/**
 * ColisVoyage — système de design mobile-first
 * ---------------------------------------------------------------------------
 * Les jetons du prototype « Refonte mobile », repris à l'identique. Une seule
 * échelle typographique, une seule famille de composants, un rythme
 * d'espacement constant.
 *
 * ── POURQUOI CE FICHIER, ET PAS UN NOUVEAU PROJET REACT ────────────────────
 * Le prompt dit : « Si le projet a déjà un framework, utilise ses patterns
 * existants ; sinon pars sur React + Vite ». Ce dépôt n'a pas de framework,
 * mais il a des PATTERNS, et surtout il est EN PRODUCTION avec de l'argent
 * réel : séquestre Stripe, KYC, codes de remise, 78 pages.
 *
 * Reconstruire les quinze écrans en React à côté, ce serait dupliquer chaque
 * règle métier — le prix, l'escrow, le code secret — dans un second site à
 * tenir à jour. C'est exactement le défaut qu'on a passé la journée à corriger
 * ailleurs : une valeur écrite à deux endroits finit par diverger.
 *
 * On applique donc la maquette AU SITE QUI EXISTE. Le résultat visible est le
 * même ; ce qui change, c'est qu'il n'y a toujours qu'un seul ColisVoyage.
 *
 * ── LE PRIX NE VIT PAS ICI ─────────────────────────────────────────────────
 * `js/calculerTarif.js` est la source unique, côté serveur comme côté
 * navigateur. Aucun « 9 » ne doit être écrit dans une feuille de style ni dans
 * une page.
 */

/* ═══ JETONS ═══════════════════════════════════════════════════════════════ */
:root {
  /* Surfaces */
  --cv-fond:        #F1EEE8;
  --cv-surface:     #FFFFFF;
  --cv-surface-2:   #F7F5F0;
  --cv-surface-3:   #F3F1EC;
  --cv-sombre:      #16181D;

  /* Texte */
  --cv-t1:          #16181D;
  --cv-t2:          #5C5F68;
  /* MESURE : le `#6B6F78` du prototype donne 4,35:1 sur le fond de page
     `#F1EEE8` — sous le seuil WCAG AA de 4,5. Le prompt annoncait les jetons
     « deja calibres » ; sur cette combinaison-la, ils ne l'etaient pas.
     `#676A73` est le plus proche qui passe (4,67:1) : la teinte reste la meme,
     l'ecart est invisible a l'oeil, et le texte devient lisible. */
  --cv-t3:          #676A73;
  --cv-t-off:       #C1BFB9;
  --cv-t-sombre-2:  #9CA3AF;   /* secondaire SUR fond sombre uniquement */

  /* Accent */
  --cv-accent:      #3B82F6;
  --cv-accent-fonce:#1D4ED8;   /* liens, texte sur tint — 5,17:1 sur blanc */
  --cv-accent-tint: #EFF6FF;

  /* Succès */
  --cv-ok:          #059669;
  --cv-ok-fonce:    #047857;
  --cv-ok-tint:     #F0FDF4;

  /* Alerte */
  --cv-alerte-fond: #FFF8EE;
  --cv-alerte-bord: #F3E2C7;
  --cv-alerte-t:    #7A5A1F;

  /* Erreur */
  --cv-err:         #B91C1C;
  --cv-err-tint:    #FEF2F2;

  /* Bordures */
  --cv-b-champ:     #E4E0D8;
  --cv-b-carte:     #E9E5DD;
  --cv-b-sep:       #EFECE6;
  --cv-b-liste:     #F2EFE9;
  --cv-b-bouton:    #DFDBD2;

  /* Rayons */
  --cv-r-carte:     22px;
  --cv-r-carte-l:   26px;
  --cv-r-bloc:      18px;
  --cv-r-petit:     12px;
  --cv-r-pilule:    999px;

  /* Rythme */
  --cv-gap:         16px;
  --cv-pad-ecran:   20px;

  /* La barre d'onglets, pour que les pages réservent la place. */
  --cv-tabbar-h:    68px;
}

/* ═══ BASE ════════════════════════════════════════════════════════════════ */
/**
 * `box-sizing` AVANT tout le reste.
 *
 * MESURÉ dans Chrome à 390 px : sans cette règle, `.cv-btn { width:100%;
 * padding:15px }` fait 420 px de large et la page déborde de 10 px. Idem pour
 * la barre d'onglets, dont le `padding` s'ajoutait à `left:0; right:0`.
 *
 * Le débordement était invisible à l'œil — le navigateur laisse simplement
 * glisser la page de côté — mais il se sent tout de suite au doigt.
 */
.cv-pwa, .cv-pwa *, .cv-pwa *::before, .cv-pwa *::after { box-sizing: border-box; }

.cv-pwa {
  margin: 0;
  background: var(--cv-fond);
  color: var(--cv-t1);
  font-family: Figtree, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* La barre d'onglets est fixe : sans cette réserve, le dernier bouton de
     chaque page se retrouve dessous et devient intouchable. */
  padding-bottom: calc(var(--cv-tabbar-h) + env(safe-area-inset-bottom, 0px));
}

/**
 * Le parcours est centré à 480 px ; l'accueil, les tarifs et les destinations
 * s'élargissent. On borne au lieu d'étirer : une ligne de texte de 1200 px ne
 * se lit pas.
 */
.cv-wrap      { max-width: 480px; margin: 0 auto; padding: 0 var(--cv-pad-ecran); }
.cv-wrap--large { max-width: 960px; }

/* ═══ TYPOGRAPHIE ═════════════════════════════════════════════════════════ */
.cv-hero    { margin: 0; font: 800 32px/1.08 Figtree, sans-serif; letter-spacing: -1.1px; color: var(--cv-t1); text-wrap: balance; }
.cv-titre   { margin: 0; font: 800 19px Figtree, sans-serif; letter-spacing: -.4px; color: var(--cv-t1); }
.cv-section { font: 800 16px Figtree, sans-serif; letter-spacing: -.3px; color: var(--cv-t1); }
.cv-corps   { margin: 0; font: 400 15px/1.55 Figtree, sans-serif; color: var(--cv-t2); }
.cv-petit   { font: 400 13px/1.5 Figtree, sans-serif; color: var(--cv-t3); }
.cv-label   { font: 700 12px Figtree, sans-serif; color: var(--cv-t2); }
.cv-legende { font: 500 11px Figtree, sans-serif; color: var(--cv-t3); }
.cv-prix    { font: 900 24px Figtree, sans-serif; letter-spacing: -.6px; color: var(--cv-accent); font-variant-numeric: tabular-nums; }
.cv-prix--l { font-size: 34px; letter-spacing: -1.2px; color: var(--cv-t1); }

/* ═══ CARTES ══════════════════════════════════════════════════════════════ */
.cv-carte {
  background: var(--cv-surface-2);
  border: 1px solid var(--cv-b-carte);
  border-radius: var(--cv-r-carte);
  padding: 16px;
}
.cv-carte--blanche { background: var(--cv-surface); }
.cv-carte--accent  { border: 1.5px solid var(--cv-accent); background: var(--cv-surface); }
.cv-carte--sombre  { background: var(--cv-sombre); border: 0; border-radius: var(--cv-r-carte-l); color: #fff; }
.cv-carte--sombre .cv-petit,
.cv-carte--sombre .cv-legende { color: var(--cv-t-sombre-2); }

.cv-alerte {
  background: var(--cv-alerte-fond);
  border: 1px solid var(--cv-alerte-bord);
  border-radius: var(--cv-r-bloc);
  padding: 14px;
  font: 400 12px/1.5 Figtree, sans-serif;
  color: var(--cv-alerte-t);
}

/* ═══ BOUTONS ═════════════════════════════════════════════════════════════ */
/**
 * `min-height: 48px` n'est pas décoratif : sous 44 px, une cible tactile se
 * rate au doigt. C'est le seuil WCAG 2.5.5, et le doigt d'un adulte fait 45 px.
 */
.cv-btn {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 15px;
  border: 0;
  border-radius: var(--cv-r-pilule);
  background: var(--cv-accent);
  color: #fff;
  font: 800 15px Figtree, sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}
.cv-btn:hover  { background: #2563EB; }
.cv-btn:active { opacity: .62; }

.cv-btn--2 {
  background: var(--cv-surface);
  border: 1.5px solid var(--cv-b-bouton);
  color: var(--cv-t1);
  font-weight: 700;
  padding: 14px;
}
.cv-btn--2:hover { background: var(--cv-surface-3); }

.cv-btn--ok { background: var(--cv-ok); }
.cv-btn--ok:hover { background: var(--cv-ok-fonce); }

/* Le contour du navigateur est illisible sur ces fonds : on le remplace, on ne
   le supprime pas. Supprimer sans remplacer, c'est rendre le site
   inutilisable au clavier. */
.cv-pwa :focus-visible {
  outline: 2px solid var(--cv-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ═══ CHAMPS ══════════════════════════════════════════════════════════════ */
.cv-champ {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 18px;
  background: var(--cv-surface);
  border: 1px solid var(--cv-b-champ);
  border-radius: var(--cv-r-pilule);
}
.cv-champ:focus-within { border-color: var(--cv-accent); }
.cv-champ input,
.cv-champ select {
  flex: 1;
  min-width: 0;              /* sans ça, un champ long pousse la ligne hors écran */
  border: 0;
  outline: none;
  padding: 0;
  background: transparent;
  font: 600 14px Figtree, sans-serif;
  color: var(--cv-t1);
}
/* `#7A7D86` donnait 4,11:1 sur blanc, pas 4,58 comme je l'avais ecrit sans
   verifier. `#72757E` donne 4,60:1 — mesure, cette fois. */
.cv-champ input::placeholder { color: #72757E; }

/* ═══ PASTILLES ═══════════════════════════════════════════════════════════ */
.cv-pastille {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: var(--cv-r-pilule);
  background: var(--cv-surface-3);
  font: 700 11px Figtree, sans-serif;
  color: var(--cv-t2);
}
.cv-pastille--accent { background: var(--cv-accent-tint); color: var(--cv-accent-fonce); }
.cv-pastille--ok     { background: var(--cv-ok-tint);     color: var(--cv-ok-fonce); }

/* ═══ BARRE D'ONGLETS ═════════════════════════════════════════════════════ */
.cv-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 8px 4px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--cv-surface);
  border-top: 1px solid var(--cv-b-sep);
}
.cv-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 48px;
  font: 600 10px Figtree, sans-serif;
  color: var(--cv-t3);
  text-decoration: none;
}
.cv-tab .cv-tab-ic { font-size: 17px; line-height: 1; }
.cv-tab[aria-current="page"] { color: var(--cv-accent); font-weight: 700; }
.cv-tab:active { opacity: .62; }

/* ═══ TRANSITION D'ÉCRAN ══════════════════════════════════════════════════ */
@keyframes cv-entree { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cv-ecran { animation: cv-entree .18s ease-out; }

/* Une animation d'entrée n'est pas une information : qui demande moins de
   mouvement doit pouvoir s'en passer. */
@media (prefers-reduced-motion: reduce) {
  .cv-ecran { animation: none; }
  .cv-btn { transition: none; }
}