/* ===================================================================
   AFRINOVA — Page « Billets d'avion »
   Complète styles.css (jetons de thème et composants de base y sont).
   =================================================================== */

:root {
  /* --bil est la couleur d'APLAT (bandeau du hero, pastille) : elle ne
     bouge pas. --bil-texte porte les usages en texte et en bordure, et
     s'éclaircit en sombre — sinon un rose soutenu sur fond noir passe
     sous le seuil de lisibilité. Même partage que --loc et --imm. */
  --bil: #BE185D;
  --bil-texte: #BE185D;
  --bil-clair: #fdf2f7;
  --bil-err: #dc2626;
}
[data-theme="dark"] {
  --bil-texte: #f07fae;
  --bil-clair: #2a1220;
  --bil-err: #f87171;
}

/* ------------------------------------------------------- En-tête */
.bil-hero {
  padding: 108px 0 40px;
  background: linear-gradient(180deg, var(--bil-clair), var(--bg));
}
.bil-kicker {
  display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bil-texte); margin-bottom: .5rem;
}
.bil-hero h1 {
  font-family: 'Poppins', sans-serif; font-weight: 800; line-height: 1.15;
  font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: .8rem;
}
.bil-lead { color: var(--muted); font-size: 1.06rem; max-width: 640px; }

.bil-atouts {
  display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.6rem;
}
.bil-atouts li {
  display: flex; align-items: center; gap: .45rem;
  font-size: .9rem; font-weight: 600; color: var(--titre);
}
.bil-atouts svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--bil-texte); }

/* ------------------------------------------------------- Mise en page */
/* Le récapitulatif accompagne le formulaire sur grand écran et passe
   au-dessus sur mobile : voir la règle responsive en fin de fichier. */
.bil-wrap {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: start;
}
.bil-form {
  background: var(--carte); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm);
  min-width: 0;
}
.bil-form h2 { font-size: 1.4rem; margin-bottom: .4rem; }

.bil-block { border: 0; margin-top: 1.3rem; min-width: 0; padding: 0; }
.bil-block legend {
  font-family: 'Poppins', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .55rem; padding: 0;
}
.bil-form .field { margin-bottom: .7rem; min-width: 0; }
.bil-form .field:last-child { margin-bottom: 0; }
/* Le champ date natif est plus haut que les autres : on aligne les hauteurs. */
.bil-form input[type="date"] { min-height: 42px; min-width: 0; }
.opt { color: var(--muted); font-weight: 500; }

/* Sans min-width:0, un élément de grille ne descend jamais sous la largeur
   de son contenu — et un champ date natif en réclame environ 176. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row .field { margin-bottom: 0; }

.bil-passagers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bil-passagers .field { margin-bottom: 0; }

/* --- Bascule aller-retour / aller simple ---
   Les styles sont volontairement portés par .bil-form : les mêmes noms
   existent dans location.css, et rien ne garantit qu'une page ne
   chargera pas les deux feuilles un jour. */
.bil-form .seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; border-radius: 999px; background: var(--bg-alt); max-width: 340px;
}
.bil-form .seg button {
  padding: .44rem .5rem; border: 0; border-radius: 999px; background: none;
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--muted);
  cursor: pointer; transition: all .2s var(--ease);
}
.bil-form .seg button:hover:not(.is-on) { color: var(--ink); }
.bil-form .seg button.is-on {
  background: var(--carte); color: var(--bil-texte); box-shadow: var(--shadow-sm);
}

/* --- Champ à préfixe (+237) --- */
.bil-form .input-prefix {
  display: flex; align-items: center; background: var(--carte-douce);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .2s, box-shadow .2s;
}
.bil-form .input-prefix > span {
  padding-left: .8rem; color: var(--muted); font-weight: 600; font-size: .92rem; flex: 0 0 auto;
}
.bil-form .input-prefix input {
  flex: 1; min-width: 0; border: 0; background: none; padding-left: .45rem;
}
.bil-form .input-prefix input:focus { box-shadow: none; border-color: transparent; }
.bil-form .input-prefix:focus-within {
  border-color: var(--bil-texte); box-shadow: 0 0 0 4px rgba(190, 24, 93, .14);
}
.bil-form .field input:focus, .bil-form .field select:focus, .bil-form .field textarea:focus {
  border-color: var(--bil-texte); box-shadow: 0 0 0 4px rgba(190, 24, 93, .14);
}

/* --- Messages sous les champs --- */
.bil-err { color: var(--bil-err); font-size: .78rem; font-weight: 600; margin-top: .3rem; }
.bil-err[hidden] { display: none; }
.bil-hint { color: var(--muted); font-size: .78rem; margin-top: .5rem; }
.bil-hint[hidden] { display: none; }

.bil-submit { margin-top: 1.5rem; padding: .78rem 1.2rem; font-size: .95rem; }
.bil-submit svg { width: 19px; height: 19px; flex: 0 0 auto; }
.bil-legal { margin-top: .6rem; text-align: center; color: var(--muted); font-size: .74rem; }
.bil-note { margin-top: .6rem; text-align: center; font-size: .85rem; font-weight: 600; }
.bil-note[hidden] { display: none; }
.bil-note.is-ok { color: var(--bil-texte); }
.bil-note.is-err { color: var(--bil-err); }

/* ------------------------------------------------------- Récapitulatif */
/* sticky : le récapitulatif reste sous les yeux pendant que le
   formulaire, plus long que l'écran, défile. */
.bil-recap {
  position: sticky; top: 96px;
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; min-width: 0;
}
.bil-recap h3 { font-size: 1.05rem; margin-bottom: 1rem; }
.bil-recap-list { display: flex; flex-direction: column; gap: .85rem; }
.bil-recap-list > div {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding-bottom: .7rem; border-bottom: 1px dashed var(--line);
}
.bil-recap-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.bil-recap-list dt {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); flex: 0 0 auto;
}
.bil-recap-list dd {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .92rem;
  color: var(--titre); text-align: right; overflow-wrap: anywhere;
}
.bil-recap-aide {
  margin-top: 1.2rem; color: var(--muted); font-size: .84rem; line-height: 1.55;
}
.bil-recap-aide a { color: var(--bil-texte); font-weight: 600; }

/* Réservé aux lecteurs d'écran : visible pour eux, invisible à l'écran.
   clip-path plutôt que display:none, qui l'aurait aussi retiré de
   l'arbre d'accessibilité. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------- Responsive */
@media (max-width: 900px) {
  /* Le récapitulatif passe au-dessus du formulaire : il annonce ce qui
     va être demandé, et sa position collante n'a plus de sens sur une
     colonne unique. */
  .bil-wrap { grid-template-columns: 1fr; gap: 24px; }
  .bil-recap { position: static; order: -1; }
  .bil-hero { padding-top: 96px; }
}
@media (max-width: 560px) {
  .bil-form { padding: 22px 18px; }
  .field-row { grid-template-columns: 1fr; }
  /* Trois compteurs de passagers côte à côte deviennent illisibles :
     les bébés passent seuls sur la deuxième ligne. */
  .bil-passagers { grid-template-columns: 1fr 1fr; }
  .bil-atouts { gap: .7rem 1.2rem; }
}