/* ============================================================================
   zz-create-sortie-app.css — ASSISTANT « Créer une sortie » (create-sortie.php)
   Reskin SOMBRE (charte app) + chrome d'assistant 4 étapes (.arw-*) construit par
   zz-create-sortie-app.js. Maquettes cachées 06→09 normalisées en sombre (choix
   Julien 15/08). 100% additif/réversible, scopé html.apprefonte body.page-sorties:has(.arw-head).
   Spécificité (html.apprefonte body.page-sorties:has(.arw-head) …) > styles inline .cs2-* de la page.
   ============================================================================ */

@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {

  /* Page + conteneur : fond charte, colonne unique. */
  html.apprefonte body.page-sorties:has(.arw-head) .pub-topbar { display: none !important; }
  html.apprefonte body.page-sorties:has(.arw-head) main.pub-content { padding: 0 !important; max-width: none !important; background: var(--ar-bg) !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2 { background: var(--ar-bg) !important; padding: 0 !important; color: var(--ar-ink) !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-grid { display: block !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-aside { display: none !important; }
  /* En-tête d'origine de la page (titre/sous-titre) masqué : remplacé par .arw-head. */
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-head,
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-sub { display: none !important; }
  /* (audit 24/08 · FDCN-053) LE TITRE SORT DE L'ŒIL, PAS DU SITE.
     Le sous-titre est un paragraphe : display:none lui va. Le titre, lui, est le
     <h1> de l'écran, et l'en-tête .arw-head qui le remplace visuellement n'expose
     aucun titre de niveau 1. Mesuré le 24/08 en 390 px : « Créer une sortie »
     n'avait AUCUN h1 rendu et commençait par des h2 numérotés.
     Même motif que le Carnet et que Voyages/Sortir : invisible à l'œil, toujours
     lu. Aucun changement visuel. */
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-title {
    position: absolute !important; width: 1px !important; height: 1px !important;
    margin: -1px !important; padding: 0 !important; overflow: hidden !important;
    clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
  }

  html.apprefonte body.page-sorties:has(.arw-head) .cs2-form {
    display: block !important; background: transparent !important; border: 0 !important;
    padding: 0 0 calc(var(--ar-navh,64px) + var(--ar-safe-b,0px) + 96px) !important; margin: 0 !important;
  }

  /* ---------- Chrome assistant ---------- */
  html.apprefonte body.page-sorties:has(.arw-head) .arw-head {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px 6px;
  }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-back {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ar-cyan); font-size: 22px; text-decoration: none;
    border: 1px solid var(--ar-hairline); background: var(--ar-surface);
  }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-htitle {
    flex: 1 1 auto; text-align: center; font: 800 20px/1.1 'Inter', system-ui, sans-serif; color: var(--ar-ink);
  }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-count {
    flex: 0 0 auto; min-width: 40px; text-align: right; font: 700 12px/1 'Inter', sans-serif; color: var(--ar-ink-soft);
  }

  html.apprefonte body.page-sorties:has(.arw-head) .arw-stepper {
    display: flex; align-items: center; justify-content: center; gap: 0; padding: 6px 16px 18px;
  }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-dot {
    display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; cursor: pointer;
  }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-dotc {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    border: 2px solid var(--ar-hairline); color: var(--ar-ink-soft); background: transparent; position: relative;
    font: 800 15px/1 'Inter', sans-serif;
  }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-check { display: none; }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-dot.is-active .arw-dotc { border-color: var(--ar-amber); color: var(--ar-amber); box-shadow: 0 0 0 4px rgba(255,182,90,.14); }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-dot.is-done .arw-dotc { border-color: var(--ar-amber); background: var(--ar-amber); color: var(--ar-on-accent); }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-dot.is-done .arw-num { display: none; }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-dot.is-done .arw-check { display: block; font-size: 17px; }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-lab { font: 600 11.5px/1.1 'Inter', sans-serif; color: var(--ar-ink-soft); white-space: nowrap; }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-dot.is-active .arw-lab { color: var(--ar-amber); }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-line { flex: 1 1 auto; height: 2px; background: var(--ar-hairline); margin: -18px 6px 0; border-radius: 2px; max-width: 60px; }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-line.is-done { background: var(--ar-amber); }

  /* ---------- Étapes ---------- */
  html.apprefonte body.page-sorties:has(.arw-head) .arw-step { display: none; padding: 0 16px; }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-step.is-current { display: block; animation: arwfade .2s ease; }
  @keyframes arwfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-steptitle { display: none; } /* le stepper porte déjà le titre */

  /* ---------- Sections & champs (reskin .cs2-*) ---------- */
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-row2 { display: block !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-sec { margin: 0 0 18px !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-h {
    font: 600 15px/1.3 'Inter', system-ui, sans-serif !important; color: var(--ar-ink) !important; margin: 0 0 10px !important; display: block !important;
  }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-n { display: none !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-secsub,
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-note,
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-lbl { color: var(--ar-ink-soft) !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-lbl { font: 600 13px/1.2 'Inter', sans-serif !important; display: block; margin-bottom: 6px; }

  html.apprefonte body.page-sorties:has(.arw-head) .cs2-field,
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-textarea,
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-select {
    background: var(--ar-surface) !important; color: var(--ar-ink) !important;
    border: 1px solid var(--ar-hairline) !important; border-radius: 14px !important;
    font-size: 16px !important; min-height: 52px !important; padding: 12px 14px !important;
  }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-textarea { min-height: 110px !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-field:focus,
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-textarea:focus,
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-select:focus { outline: 2px solid var(--ar-cyan) !important; outline-offset: 1px; border-color: var(--ar-cyan) !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-inp { position: relative; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-ico { color: var(--ar-cyan) !important; position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-ico-l { left: 15px; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-ico-r { right: 15px; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-field.cs2-has-l { padding-left: 46px !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-field.cs2-has-r { padding-right: 46px !important; }
  /* la puce icône du champ Lieu suit sous le libellé « Lieu » → recentrer sur l'input */
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-inp .cs2-lbl + .cs2-field { }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-invalid { outline: 2px solid var(--ar-danger, #e5544b) !important; border-color: var(--ar-danger, #e5544b) !important; }

  /* Catégories : grille de tuiles (icône cyan, actif ambre) — maquette 06. */
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-cats {
    display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px !important;
  }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-cat {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 84px; padding: 12px 6px !important; text-align: center;
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: 14px !important; color: var(--ar-ink) !important;
  }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-cat-i { font-size: 22px; color: var(--ar-cyan) !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-cat-l { font: 600 12px/1.15 'Inter', sans-serif !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-cat.is-active {
    background: rgba(255,182,90,.10) !important; border-color: var(--ar-amber) !important; color: var(--ar-amber) !important;
    box-shadow: 0 0 0 1px var(--ar-amber) inset !important;
  }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-cat.is-active .cs2-cat-i { color: var(--ar-amber) !important; }

  /* Visibilité : cartes radio empilées — maquette 08. */
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-vis { display: flex !important; flex-direction: column; gap: 10px !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-visc {
    display: block !important; position: relative; padding: 14px 46px 14px 16px !important;
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important; border-radius: 14px !important;
  }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-visc::after {
    content: ""; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ar-hairline);
  }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-visc.is-active { border-color: var(--ar-cyan) !important; background: rgba(53,215,209,.08) !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-visc.is-active::after { border-color: var(--ar-cyan); box-shadow: inset 0 0 0 4px var(--ar-cyan); }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-visc-t { display: block; font: 700 15px/1.2 'Inter', sans-serif !important; color: var(--ar-ink) !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-visc-d { display: block; margin-top: 3px; font: 400 13px/1.35 'Inter', sans-serif !important; color: var(--ar-ink-soft) !important; }

  /* Stepper nombre + select + dropzone photos. */
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-step { display: flex !important; align-items: stretch; gap: 8px; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-step-b {
    width: 48px; flex: 0 0 48px; border-radius: 12px !important; border: 1px solid var(--ar-hairline) !important;
    background: var(--ar-surface) !important; color: var(--ar-cyan) !important; font-size: 22px;
  }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-step-i { text-align: center; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-selectwrap { position: relative; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-chev { color: var(--ar-ink-soft) !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-drop {
    display: flex !important; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    padding: 26px 16px !important; border: 1.5px dashed var(--ar-cyan-40, rgba(53,215,209,.4)) !important;
    border-radius: 16px !important; background: var(--ar-surface) !important; color: var(--ar-ink-soft) !important;
  }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-drop-i { font-size: 28px; color: var(--ar-cyan) !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-drop-t { font: 700 15px/1.2 'Inter', sans-serif !important; color: var(--ar-ink) !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-hint,
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-modo { color: var(--ar-ink-soft) !important; font-size: 13px !important; }

  /* Récapitulatif étape 4. */
  html.apprefonte body.page-sorties:has(.arw-head) .arw-recap {
    margin-top: 16px; background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline);
    border-radius: 16px; overflow: hidden;
  }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-recap-h { padding: 12px 16px; font: 700 14px/1 'Inter', sans-serif; color: var(--ar-ink); border-bottom: 1px solid var(--ar-hairline); }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-recap-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--ar-hairline); }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-recap-row:last-child { border-bottom: 0; }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-recap-i { width: 22px; text-align: center; }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-recap-v { color: var(--ar-ink); font: 500 14px/1.3 'Inter', sans-serif; }

  /* ---------- Barre de navigation (collée en bas) ---------- */
  html.apprefonte body.page-sorties:has(.arw-head) .arw-nav {
    position: fixed; left: 0; right: 0; bottom: calc(var(--ar-navh,64px) + var(--ar-safe-b,0px));
    display: flex; gap: 12px; padding: 12px 16px calc(12px + var(--ar-safe-b,0px));
    background: linear-gradient(0deg, var(--ar-bg) 78%, rgba(7,22,36,0)); z-index: 30;
  }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-btn {
    flex: 1 1 0; min-height: 54px; border-radius: 14px; font: 800 16px/1 'Inter', system-ui, sans-serif;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-btn-back {
    flex: 0 0 34%; background: transparent; color: var(--ar-ink); border: 1px solid var(--ar-border, var(--ar-hairline));
  }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-btn-next,
  html.apprefonte body.page-sorties:has(.arw-head) .cs2-submit {
    background: var(--ar-amber) !important; color: var(--ar-on-accent) !important;
    background-image: none !important; box-shadow: none !important; border: 0 !important;
    min-height: 54px !important; border-radius: 14px !important; font: 800 16px/1 'Inter', sans-serif !important;
    flex: 1 1 0 !important; margin: 0 !important; width: auto !important;
  }

}

  /* ---------- (20/08) 5 étapes : le rail doit tenir sur un écran de téléphone ---------- */
  html.apprefonte body.page-sorties:has(.arw-head) .arw-stepper[data-count="5"] { padding-left: 8px; padding-right: 8px; }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-stepper[data-count="5"] .arw-dotc { width: 32px; height: 32px; font-size: 13px; border-width: 2px; }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-stepper[data-count="5"] .arw-dot.is-done .arw-check { font-size: 14px; }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-stepper[data-count="5"] .arw-lab { font-size: 10px; }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-stepper[data-count="5"] .arw-line { margin: -16px 3px 0; max-width: 34px; }

  /* (25/08) 6 étapes (« Qui est dispo ? » en plus) : même rail, encore resserré. */
  html.apprefonte body.page-sorties:has(.arw-head) .arw-stepper[data-count="6"] { padding-left: 4px; padding-right: 4px; }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-stepper[data-count="6"] .arw-dotc { width: 28px; height: 28px; font-size: 12px; border-width: 2px; }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-stepper[data-count="6"] .arw-dot.is-done .arw-check { font-size: 13px; }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-stepper[data-count="6"] .arw-lab { font-size: 9px; letter-spacing: -0.2px; }
  html.apprefonte body.page-sorties:has(.arw-head) .arw-stepper[data-count="6"] .arw-line { margin: -14px 2px 0; max-width: 20px; }

  /* ---------- (20/08) Étape « Qui emmène quoi ? » : confort du doigt ---------- */
  html.apprefonte body.page-sorties:has(.arw-head) .sre .sre-del { height: 52px; }
  html.apprefonte body.page-sorties:has(.arw-head) .sre .sre-add { width: 100%; min-height: 50px; }
  html.apprefonte body.page-sorties:has(.arw-head) .sre .sre-msg { min-height: 90px !important; }
  html.apprefonte body.page-sorties:has(.arw-head) .sre .sre-comps { grid-template-columns: 1fr 1fr; }
  html.apprefonte body.page-sorties:has(.arw-head) .sre .sre-note,
  html.apprefonte body.page-sorties:has(.arw-head) .sre .sre-lbl { color: var(--ar-ink-soft); }
  html.apprefonte body.page-sorties:has(.arw-head) .sre .sre-h3 { color: var(--ar-ink); }