/* =============================================================================
   AVIERO — La vitrine
   -----------------------------------------------------------------------------
   La page d'accueil publique : le hero et sa carte, les boutons, les cinq façons de
   s'entraîner, les imprévus, le bloc « préparer le vol », les trois étapes, l'offre et
   les questions posées avant de créer un compte.

   Ce fichier est le n° 2 sur 14. L'ORDRE DE CHARGEMENT EST LE CONTRAT :
   c'est la cascade CSS, et plusieurs règles de ce projet ne valent que par leur
   position après une autre. Les <link> d'index.html sont numérotés pour cette
   raison, et tests/contrat/chargement.test.mjs surveille cet ordre.

   Extrait du <style> d'index.html le 18/09/2026, sans qu'aucune règle ne soit
   modifiée, ajoutée ou supprimée.
   ========================================================================== */
  /* ---------- Hero : la carte, et la tour posée dessus ----------
     Le hero n'a plus de fond : il a un SOL. Un morceau de la carte OACI
     1:500 000 — la même que celle de la page Navigation — à peine flou, et la
     tour découpée de son ciel qui s'y tient debout à droite.
     Aucun voile nulle part, et c'est tout le point. Ce qui rend l'encre
     lisible est mélangé DANS les pixels de la carte — elle est fabriquée
     éclaircie, un peu plus à gauche là où le texte se pose — au lieu d'être
     posé par-dessus. Rien n'assombrit rien : la carte se lit, la tour garde
     ses gris, et le texte prend l'encre du site.
     Du texte BLANC n'était pas une option : sur une carte claire il ne tient
     qu'au prix du voile qu'on vient justement d'enlever. D'où --ink, qui
     bascule tout seul avec le thème ; en thème sombre c'est la CARTE qui
     s'assombrit, par un filtre porté par sa seule couche.
     `isolation:isolate` garde tout cet empilement dans la section. */
  .hero{position:relative; min-height:min(88vh,820px); display:flex; flex-direction:column;
    justify-content:flex-end; overflow:hidden; isolation:isolate; background:var(--bg)}

  /* La carte a sa propre couche, et n'est pas le fond de .hero : un filtre
     posé sur .hero teindrait aussi le texte et la tour. Ici il ne touche
     qu'elle. */
  .hero__carte{position:absolute; inset:0; z-index:0;
    /* CARTE — OACI VFR 1:500 000, SIA/DGAC édition 2026 ; tuile
       assets/oaci/7_64_44.webp (Paris sud-ouest), recadrée en 16:9, floutée de
       2 px, désaturée à 0,90 et éclaircie de 48 % — plus 13 % de plus sur la
       moitié gauche, qui s'éteignent avant la tour. */
    background:url("../images/carte-oaci-hero.webp") 50% 46%/cover no-repeat}
  :root[data-theme="dark"] .hero__carte{filter:brightness(.30) saturate(.72) contrast(1.06)}

  /* Le bas se dissout dans la page. Le dégradé est en --bg et non en noir :
     il suit le thème, et en thème clair il ÉCLAIRCIT — ce qui sert aussi les
     deux lignes de petit texte qui ferment le hero. */
  .hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
    z-index:1; pointer-events:none;
    background:linear-gradient(180deg, transparent 0, var(--bg) 94%)}

  /* La tour, détourée de son ciel (le ciel est bleu, la tour ne l'est pas :
     un seuil colorimétrique, puis une propagation depuis les bords pour que
     les panneaux clairs du fût ne soient pas pris pour du ciel).
     Ce n'est plus un fond sur lequel on écrit, c'est un objet posé sur la
     carte — et l'ombre portée est ce qui le dit. Le bas est coupé net par le
     cadre, comme une découpe collée. */
  .hero__tour{position:absolute; right:clamp(0px,2vw,56px); bottom:0; z-index:2;
    width:auto; height:min(88%,690px);
    filter:drop-shadow(0 22px 26px rgba(36,40,56,.30));
    animation:heroPose 1.1s .15s cubic-bezier(.16,.62,.28,1) both}
  :root[data-theme="dark"] .hero__tour{filter:drop-shadow(0 22px 26px rgba(0,0,0,.55)) brightness(.84)}
  /* La tour se pose : elle vient de la droite, une seule fois. Rien ne bouge
     encore quand on lit le titre. */
  @keyframes heroPose{from{opacity:0; transform:translateX(26px)} to{opacity:1; transform:none}}
  @media (prefers-reduced-motion:reduce){ .hero__tour{animation:none; opacity:1} }

  .hero__inner{position:relative; z-index:3; width:100%;
    padding:clamp(92px,12vh,156px) clamp(20px,5vw,44px) 0}
  /* La colonne de texte s'arrête avant la tour. La borne en vw est la vraie
     garde : en pixels seuls, elle passerait dessous sur un grand écran. */
  .hero__content{max-width:min(560px,100%); color:var(--ink)}
  @media (min-width:761px){ .hero__content{max-width:min(560px,44vw)} }
  /* Entre 761 et 1000 px les deux colonnes se serrent : la tour rétrécit
     AVANT que le texte ne passe dessous. */
  @media (min-width:761px) and (max-width:1000px){
    .hero__tour{height:min(74%,500px)}
    .hero__content{max-width:min(460px,46vw)}
  }
  .hero__eyebrow{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
    /* --violet-tint et non --violet-soft : ce dernier est TRANSLUCIDE
       (rgba .10 en clair, .18 en sombre), donc ce qu'on lit dessus dépend de
       la PHOTO qui passe derrière. Mesuré à 3,69:1 en sombre, pour un seuil
       de 4,5:1 — et la valeur changeait avec la zone de l'image.
       --violet-tint est opaque et existe déjà dans les deux thèmes : 6,92:1
       en clair, 7,33:1 en sombre, et ça ne dépend plus de rien.
       Relevé le 20/09/2026 par tests/mesurer-pixels.mjs. */
    color:var(--violet-dark); background:var(--violet-tint); border:1px solid var(--violet);
    padding:6px 14px; border-radius:var(--pill); margin-bottom:22px;
    opacity:0; animation:fadeUp .7s .1s ease forwards}
  /* Le titre est une phrase entière, pas une accroche de trois mots : il est
     donc borné plus bas en corps et plus large en mesure qu'un slogan.
     Plus d'ombre portée : elle servait à décoller le blanc d'une photo. */
  .hero__title{font-size:clamp(33px,4.9vw,58px); font-weight:800; line-height:1.06; letter-spacing:-.032em;
    max-width:19ch; opacity:0; animation:fadeUp .85s .24s ease forwards}
  /* Le sous-titre garde l'encre PLEINE. Un gris secondaire passe sous le seuil
     AA sur les traits les plus foncés de la carte ; la hiérarchie se fait ici
     par le corps et la graisse, pas par la couleur. */
  .hero__sub{font-size:clamp(16px,1.85vw,19.5px); color:var(--ink); font-weight:500; max-width:50ch;
    margin-top:22px; line-height:1.58;
    opacity:0; animation:fadeUp .85s .42s ease forwards}
  .hero__cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; opacity:0; animation:fadeUp .85s .6s ease forwards}
  /* Le bouton fantôme était du verre blanc sur la nuit ; sur la carte il
     devient du papier. Réglé ICI et non sur .cta-ghost : le même bouton sert
     encore sur le fond sombre de l'appel final, où le verre blanc est juste. */
  .hero .cta-ghost{background:var(--surface); color:var(--ink); border:1.5px solid var(--border);
    -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:var(--shadow-sm)}
  .hero .cta-ghost:hover{background:var(--surface); border-color:var(--violet); color:var(--violet-dark)}
  .hero__note{margin:20px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-2-fort);
    opacity:0; animation:fadeUp .85s .74s ease forwards}
  .hero__note b{color:var(--ink); font-weight:700}

  /* Le filet du haut sépare cette phrase de la note de prérequis : sans lui,
     deux paragraphes de petit texte gris se lisent comme un seul pavé. */
  .hero__claim{position:relative; z-index:3; margin:0; max-width:min(64ch,100%);
    padding:20px clamp(20px,5vw,44px) 18px; font-size:14.5px; line-height:1.62;
    color:var(--ink-2-fort); opacity:0; animation:fadeUp .9s .82s ease forwards}
  .hero__claim b{color:var(--ink); font-weight:700}
  /* La bande de chiffres ferme le hero : quatre nombres vrais, comptés dans le
     code (AERODROMES, AIRCRAFT, SCENARIOS, et le tirage d'aléas du mode Réel).
     Elle est bornée en largeur pour ne pas courir sous la tour. */
  /* Quatre colonnes, et quatre seulement : en flex-wrap, le quatrième nombre
     retombait seul sur une deuxième ligne dès que la mesure se resserrait — une
     bande de chiffres qui se casse en 3 + 1 se lit comme un oubli. La grille
     impose la ligne unique ; c'est l'écart qui cède, pas le rang. */
  .hero__strip{position:relative; z-index:3; display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.7vw,26px);
    margin-top:clamp(30px,5vh,56px); max-width:min(860px,60vw);
    padding:0 clamp(20px,5vw,44px) clamp(46px,7vw,84px);
    opacity:0; animation:fadeUp .9s .9s ease forwards}
  .hero__num{display:flex; flex-direction:column; gap:3px}
  .hero__num b{font-family:var(--mono); font-size:clamp(23px,3.1vw,33px); font-weight:800; line-height:1;
    letter-spacing:-.02em; color:var(--violet-dark)}
  /* Interlettrage resserré par rapport au reste du site : à .10em, « AÉRODROMES
     FRANÇAIS » passait à la ligne et cassait l'alignement des quatre libellés. */
  .hero__num span{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-2-fort)}
  /* L'indicateur de défilement quitte le centre : la bande de chiffres l'occupe.
     Il passe lui aussi du verre blanc au papier — sur une carte claire, un rond
     translucide clair ne se voyait plus. */
  .hero .scroll-cue{left:auto; right:clamp(20px,5vw,44px); bottom:clamp(18px,3vw,32px);
    transform:none; animation-name:cueBounce2;
    background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-sm)}
  .hero .scroll-cue .ic-svg{stroke:var(--violet-dark)}
  .hero .scroll-cue:hover{background:var(--surface); border-color:var(--violet)}
  @keyframes cueBounce2{0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)}}

  /* Écran étroit : il n'y a plus deux colonnes. La tour repasse dans le flux,
     en haut à droite, et le texte prend toute la largeur sous elle. */
  @media (max-width:760px){
    .hero{min-height:0; justify-content:flex-start}
    .hero__tour{position:relative; right:auto; bottom:auto; align-self:flex-end;
      height:auto; width:min(54%,230px);
      margin:clamp(14px,3vh,26px) clamp(14px,5vw,30px) -10px 0;
      animation:none; opacity:1}
    .hero::after{height:28%}
    .hero__inner{padding-top:clamp(8px,2vh,18px)}
    .hero__claim{font-size:13.5px}
    .hero__eyebrow{font-size:11px; letter-spacing:.11em}
    .hero__strip{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 26px; max-width:none}
    .hero__num b{font-size:22px}
    .hero .scroll-cue{display:none}
  }
  @keyframes fadeUp{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}

  /* ---------- Buttons (pilule) ---------- */
  .btn{cursor:pointer; font-family:inherit; font-size:14.5px; font-weight:600; background:var(--surface); color:var(--ink);
    border:1px solid var(--border); border-radius:var(--pill); padding:11px 20px; min-height:44px;
    transition:transform .12s, box-shadow .18s, border-color .18s, background .18s; box-shadow:var(--shadow-sm)}
  .btn:hover{border-color:#d3d6e2; transform:translateY(-1px); box-shadow:var(--shadow-md)}
  .btn:active{transform:translateY(0)}
  .btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}
  .btn.small{padding:9px 15px; font-size:13.5px; min-height:40px}
  .cta{background:var(--violet); color:#fff; border:none; padding:14px 26px; font-size:15.5px; font-weight:700; box-shadow:0 10px 26px rgba(91,75,206,.4)}
  .cta:hover{background:var(--violet-dark); box-shadow:0 14px 32px rgba(74,59,184,.48); transform:translateY(-2px)}
  .cta-ghost{background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.6); backdrop-filter:blur(6px); padding:14px 26px; font-size:15.5px; font-weight:700}
  .cta-ghost:hover{background:rgba(255,255,255,.22); border-color:#fff}
  .btn.primary{background:var(--violet); color:#fff; border:none}
  .btn.primary:hover{background:var(--violet-dark)}

  /* PTT = action principale (menthe) */
  .ptt{background:var(--violet); color:#fff; border:none; font-weight:700; min-width:210px; box-shadow:0 6px 18px rgba(91,75,206,.34)}
  .ptt:hover{background:var(--violet-dark); box-shadow:0 10px 24px rgba(74,59,184,.42)}
  .ptt.listening{background:#e05a4d; color:#fff; animation:pulse 1s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(224,90,77,.5)} 50%{box-shadow:0 0 0 12px rgba(224,90,77,0)}}
  .valider{background:var(--violet-soft); border-color:#cfc8f2; color:var(--violet-dark)}
  .valider:hover{border-color:var(--violet)}

  /* =========================================================================
     VITRINE — les sections sous le hero
     Tout ce qui suit ne vit QUE sur la page d'accueil. Les blocs clairs
     s'appuient sur les jetons du thème (--bg / --surface / --ink) et suivent
     donc le mode sombre tout seuls ; les deux blocs sombres (.alea, .final)
     écrivent leurs couleurs en dur, comme la scène de l'épellation : ils sont
     un décor, pas une surface, et doivent rester identiques dans les deux
     thèmes sous peine d'y devenir illisibles.
     ========================================================================= */
  .sec{padding:clamp(62px,8.5vw,112px) 0}
  .sec + .sec{padding-top:0}
  .sec > .container, .fleet > .container{padding-top:0; padding-bottom:0}
  .sec-tag{display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
    color:var(--violet-dark); background:var(--violet-soft); border:1px solid rgba(91,75,206,.28);
    border-radius:var(--pill); padding:5px 13px; margin-bottom:18px}
  .sec-h{font-size:clamp(27px,3.8vw,45px); font-weight:800; letter-spacing:-.032em; max-width:20ch; margin:0}
  .sec-lede{margin:18px 0 0; max-width:64ch; font-size:clamp(15.5px,1.45vw,17.5px); line-height:1.64; color:var(--ink-2)}
  .sec-lede b{color:var(--ink); font-weight:700}

  /* ---------- Les cinq façons de s'entraîner ----------
     Une liste, pas une grille de cartes : la page en compte déjà deux, et ce
     qu'on montre ici est une ÉNUMÉRATION, pas un parcours — rien n'y vient
     dans un ordre obligé. Chaque ligne porte à gauche une quantité vraie,
     comptée dans le code ou lue dans le manuel : un intitulé seul ne dit pas
     ce qu'il y a dedans. */
  .facons{list-style:none; margin:clamp(30px,4vw,46px) 0 0; padding:0;
    border-top:1px solid var(--border)}
  .facon{display:grid; grid-template-columns:minmax(0,178px) minmax(0,1fr);
    gap:clamp(14px,3vw,40px); align-items:start;
    padding:clamp(18px,2.3vw,26px) 0; border-bottom:1px solid var(--border)}
  .facon__q{font-family:var(--mono); font-size:11.5px; font-weight:800; letter-spacing:.09em;
    text-transform:uppercase; color:var(--violet-dark); padding-top:4px}
  .facon h3{margin:0 0 7px; font-size:clamp(17px,1.75vw,20px); letter-spacing:-.014em}
  .facon p{margin:0; max-width:66ch; font-size:14.6px; line-height:1.62; color:var(--ink-2)}
  @media (max-width:620px){
    .facon{grid-template-columns:minmax(0,1fr); gap:7px}
    .facon__q{padding-top:0}
  }

  /* ---------- Les imprévus, en bas de page ----------
     Un seul panneau, neuf lignes, une référence de manuel par ligne. La forme
     est celle d'une table d'ouvrage, et c'est voulu : ces situations ne sont
     pas un argument de peur, ce sont des entrées sourcées. Un panneau unique
     plutôt qu'une grille — une grille laisse une case vide quand le nombre
     d'éléments ne tombe pas juste, et neuf ne tombe juste qu'à trois colonnes. */
  .impr{list-style:none; margin:clamp(30px,4vw,46px) 0 0; padding:0;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow-sm); overflow:hidden}
  .impr__it{display:grid; grid-template-columns:88px minmax(0,232px) minmax(0,1fr);
    gap:clamp(12px,2.2vw,26px); align-items:baseline;
    padding:15px clamp(15px,2.3vw,24px) 16px}
  .impr__it + .impr__it{border-top:1px solid var(--border)}
  .impr__ref{font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.05em;
    color:var(--ink-2-fort); white-space:nowrap}
  .impr__it h3{margin:0; font-size:15.5px; letter-spacing:-.012em}
  .impr__it p{margin:0; font-size:14px; line-height:1.58; color:var(--ink-2)}
  .impr__foot{margin:clamp(20px,2.6vw,28px) 0 0; max-width:74ch; font-size:14.5px;
    line-height:1.66; color:var(--ink-2); border-left:2px solid var(--border); padding-left:18px}
  .impr__foot b{color:var(--ink); font-weight:700}
  @media (max-width:820px){
    .impr__it{grid-template-columns:minmax(0,1fr); gap:5px}
    .impr__it h3{margin-top:2px}
  }

  /* ---------- Le bloc « préparer le vol » ----------
     Une seule photo, et c'est un choix : sept appareils qui se relayaient en
     fondu donnaient un carrousel dont personne n'avait besoin, et chacun était
     trop petit pour qu'on le regarde. Le DR400 reste — c'est la machine d'école
     française — et il occupe la place des sept. Elle est DÉCORATIVE : elle ne
     porte aucune affirmation, rien dans le texte n'en dépend, d'où l'absence de
     légende et l'aria-hidden sur le cadre. */
  .fleet{padding:clamp(62px,8.5vw,112px) 0; background:var(--surface);
    border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
  .fleet__grid{display:grid; grid-template-columns:minmax(0,1.34fr) minmax(0,.86fr);
    gap:clamp(22px,4.5vw,62px); align-items:center}
  /* max-width est ici indispensable, pas decoratif. Tous les enfants du cadre
     sont en position absolue : sa hauteur de contenu vaut zero, c'est donc
     min-height qui la fixe — et une hauteur definie face a aspect-ratio se
     RETOURNE en largeur, 170 x 16/6 = 453 px. Sur un telephone de 390 px, le
     cadre debordait ainsi de 92 px et faisait defiler toute la page en travers. */
  .fleet__stage{position:relative; aspect-ratio:16/7; min-height:170px; max-width:100%}
  /* Le titre suit la largeur de sa colonne : la borne à 20ch de .sec-h le
     couperait ici en quatre lignes pour rien. */
  .fleet .sec-h{max-width:none}
  .fleet__halo{position:absolute; inset:8% 3% 6%; border-radius:50%;
    background:radial-gradient(58% 52% at 50% 54%, var(--violet-soft), transparent 72%)}
  .fleet__shot{position:absolute; inset:0; margin:auto; max-width:100%; max-height:100%;
    object-fit:contain; filter:drop-shadow(0 26px 30px rgba(36,40,56,.28))}
  .fleet__txt{min-width:0}
  .fleet__txt .sec-lede + .sec-lede{margin-top:14px}
  @media (max-width:900px){
    /* minmax(0,1fr) et non 1fr : une piste « 1fr » ne descend pas sous le
       minimum de contenu de ce qu'elle porte, et le cadre ci-dessus reclame
       453 px par le jeu de aspect-ratio. La piste enflait donc a 453 px dans un
       telephone de 390, et c'est la PISTE qui faisait defiler la page en
       travers — l'element, lui, obeissait deja a son max-width. */
    .fleet__grid{grid-template-columns:minmax(0,1fr)}
    .fleet__stage{order:2}
  }

  /* ---------- Comment ça se passe : trois étapes + un vrai échange ---------- */
  .steps__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(238px,100%),1fr));
    gap:16px; margin-top:clamp(34px,4.4vw,48px)}
  .step{position:relative; padding:26px 20px 20px; border-radius:var(--radius);
    background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm)}
  .step__n{position:absolute; top:-15px; left:20px; width:34px; height:34px; border-radius:11px;
    display:grid; place-items:center; font-family:var(--mono); font-weight:800; font-size:14.5px; color:#fff;
    /* ┌─ --violet-dark EST UNE COULEUR DE TEXTE, PAS DE FOND ─────────────┐
       │ Le dégradé allait de #7a68ff à var(--violet-dark). En thème clair  │
       │ ça tenait. En thème SOMBRE, --violet-dark devient #b3a6ff — un     │
       │ violet très clair, parce que c'est là-bas la couleur du TEXTE      │
       │ (09-theme-sombre.css le dit, et prévient que onze règles font      │
       │ l'erreur inverse). Le dégradé partait donc de clair pour aller     │
       │ vers plus clair, avec du blanc écrit dessus : 2,71:1 mesuré sur    │
       │ les pixels, pour un seuil de 4,5:1.                                │
       │ On part maintenant de --violet, qui EST un fond de bouton dans les │
       │ deux thèmes (6,28:1 en clair, 5,04:1 en sombre), vers un violet    │
       │ foncé écrit en clair — un fond n'a pas à basculer avec le thème.   │
       │ Le liseré intérieur passe de .28 à .18 : à .28 il éclaircissait le │
       │ haut de la pastille au-delà du seuil à lui tout seul.              │
       │ Relevé le 20/09/2026 par tests/mesurer-pixels.mjs.                 │
       └─────────────────────────────────────────────────────────────────────┘ */
    background:linear-gradient(135deg,var(--violet),#4a3bb8);
    box-shadow:0 9px 20px rgba(91,75,206,.38), inset 0 1px 0 rgba(255,255,255,.18)}
  .step h3{font-size:17px; margin:0 0 7px}
  .step p{margin:0; font-size:14px; line-height:1.6; color:var(--ink-2)}

  /* La maquette d'échange : ce que l'utilisateur verra vraiment à l'écran. */
  .rx{margin-top:clamp(26px,3.6vw,40px); border-radius:var(--radius); overflow:hidden;
    border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-md)}
  .rx__head{display:flex; align-items:center; gap:10px; padding:12px 17px;
    background:var(--surface-2); border-bottom:1px solid var(--border);
    font-family:var(--mono); font-size:11.5px; letter-spacing:.07em;
    /* --ink-2-fort et non --ink-2 : 4,35:1 sur --surface-2, sous le seuil AA.
       --ink-2 tient sur du BLANC (4,83:1), pas sur le gris des cartes. Le
       jeton renforcé existe pour exactement ce cas (01-socle.css) et rend
       7,66:1 ici. Relevé le 20/09/2026 par tests/parcours/contraste.spec.js. */
    color:var(--ink-2-fort)}
  .rx__dot{width:8px; height:8px; border-radius:50%; background:var(--ok);
    box-shadow:0 0 0 4px rgba(47,163,107,.16); flex:none}
  .rx__body{padding:16px 17px; display:flex; flex-direction:column; gap:12px}
  .rx__l{display:grid; grid-template-columns:104px minmax(0,1fr); gap:12px; align-items:baseline}
  .rx__who{font-family:var(--mono); font-size:10.5px; font-weight:800; letter-spacing:.09em;
    text-transform:uppercase; color:var(--ink-2)}
  .rx__t{font-size:14.5px; line-height:1.56; color:var(--ink)}
  .rx__l--moi .rx__who{color:var(--violet-dark)}
  .rx__l--moi .rx__t{font-weight:600}
  .rx__l--alea .rx__who{color:var(--bad)}
  .rx__l--alea .rx__t{color:var(--bad); font-weight:700}
  .rx__foot{padding:12px 17px; border-top:1px dashed var(--border);
    font-size:13px; line-height:1.6; color:var(--ink-2); background:var(--bg)}
  .rx__foot b{color:var(--ink)}
  @media (max-width:620px){
    .rx__l{grid-template-columns:1fr; gap:3px}
  }

  /* ---------- Feature cards / reveal ---------- */
  .feature-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(248px,100%),1fr));
    gap:16px; margin-top:clamp(30px,4vw,44px)}
  .feature{position:relative; overflow:hidden; padding:22px; border-radius:var(--radius);
    background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm);
    transition:transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s, border-color .2s}
  .feature::after{content:""; position:absolute; left:0; right:0; top:0; height:3px; opacity:0;
    background:linear-gradient(90deg,var(--violet),rgba(91,75,206,0)); transition:opacity .2s}
  .feature:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
  .feature:hover::after{opacity:1}
  .feature .fic{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:23px;
    background:var(--violet-soft); border:1px solid rgba(91,75,206,.18); margin-bottom:14px}
  .feature h3{font-size:16.5px; margin-bottom:6px}
  .feature p{color:var(--ink-2); font-size:14px; margin:0; line-height:1.6}

  /* ---------- L'appel final ---------- */
  .final{position:relative; overflow:hidden; text-align:center; color:#fff;
    padding:clamp(64px,8.5vw,110px) clamp(20px,5vw,44px);
    background:linear-gradient(138deg, var(--grad-top) 0%, var(--grad-mid) 54%, var(--grad-bot) 128%)}
  .final::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.16;
    mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E"); background-size:170px 170px}
  /* L'A320 d'Air France ferme la page. Le panneau est déjà un ciel — dégradé
     nuit → violet → lever de soleil — et l'appareil est photographié en montée :
     il sort du cadre par le coin bas-droit, comme s'il venait de décoller de la
     page. Il est DÉCORATIF, et c'est important : la liste des appareils de
     l'application ne contient que des machines légères de VFR, pas d'A320. Rien
     dans le texte n'en dépend, d'où aria-hidden et l'absence de légende.
     Il vit sous .final__in (z-index 0 contre 1) et s'efface sous 900 px, où il
     n'y a plus de marge à droite du texte. */
  .final__avion{position:absolute; z-index:0; right:-2%; bottom:-7%;
    width:clamp(260px,33vw,480px); height:auto; opacity:.94; pointer-events:none;
    filter:drop-shadow(0 26px 40px rgba(10,6,28,.50))}
  @media (max-width:900px){ .final__avion{display:none} }
  .final__in{position:relative; z-index:1; max-width:640px; margin:0 auto}
  .final h2{font-size:clamp(26px,3.5vw,40px); font-weight:800; letter-spacing:-.03em; color:#fff}
  .final p{margin:16px 0 0; font-size:clamp(15px,1.5vw,17px); line-height:1.62; color:rgba(255,255,255,.84)}
  .final__cta{display:flex; gap:13px; flex-wrap:wrap; justify-content:center; margin-top:30px}
  .final__note{margin:22px 0 0; font-size:12.5px; color:rgba(255,255,255,.60)}

  /* ---------- L'OFFRE — la bande de progression ----------
     Dans une tour, chaque appareil a sa BANDE : un carton imprimé qui porte son
     indicatif, son type, sa route, et qui passe de main en main jusqu'à ce que
     le vol soit terminé. C'est le seul objet physique du métier, et c'est à
     cette tour-là que la page apprend à parler.

     D'où la forme de ce bloc. Trois grilles de cartes tarifaires se ressemblent
     toutes ; une bande ne ressemble à rien d'autre. Les quatre cases ne sont pas
     un ornement : ce sont les quatre questions qu'on se pose avant de créer un
     compte — combien de temps, jusqu'où, faut-il sortir sa carte, et après ?

     L'ocre est la seule couleur chaude du site. Elle est ici et nulle part
     ailleurs : la page est violette et froide, la bande doit arrêter l'œil. */
  .offre{position:relative; overflow:hidden; padding:clamp(64px,8.5vw,112px) 0;
    background:
      radial-gradient(96% 62% at 50% 0%, rgba(91,75,206,.22), transparent 62%),
      linear-gradient(178deg,#0c0f1c 0%,#0a0c17 100%)}
  .offre > .container{position:relative; z-index:1}
  .offre .sec-tag{color:#f0d6a6; background:rgba(200,137,47,.16); border-color:rgba(200,137,47,.45)}
  .offre .sec-h{color:#fff; max-width:19ch}
  .offre .sec-lede{color:rgba(228,233,247,.74); max-width:66ch}
  .offre .sec-lede b{color:#fff}

  .strip{--paper:#f7f2e6; --sink:#1b1f2d; --edge:#c8892f; --rule:#cec4ab;
    position:relative; margin-top:clamp(32px,4.4vw,46px); border-radius:14px; overflow:hidden;
    background:var(--paper); color:var(--sink);
    /* La lumière vient d'en haut, comme sur une bande posée sous la lampe du
       poste : liseré clair au ras du bord supérieur, ombre large et basse. */
    box-shadow:0 28px 64px rgba(3,5,12,.62), inset 0 1px 0 rgba(255,255,255,.7)}
  /* La tranche ocre : sur une vraie bande, la couleur du carton dit le sens du
     mouvement. Ici elle dit simplement où commence la fiche. */
  .strip::before{content:""; position:absolute; left:0; top:0; bottom:0; width:7px; background:var(--edge)}
  .strip__head{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    padding:13px 20px 13px 27px; border-bottom:1px solid var(--rule); background:rgba(200,137,47,.07)}
  .strip__id{font-family:var(--mono); font-size:11.5px; font-weight:800; letter-spacing:.16em;
    text-transform:uppercase; color:#7a6440}
  .strip__id small{font-size:inherit; font-weight:inherit}
  /* Encre sombre sur l'ocre, et non l'inverse. Le papier sur l'ocre ne donnait
     que 2,66:1 — largement sous le seuil AA de 4,5:1 pour un texte de 11,5 px.
     L'ocre est gardé tel quel, c'est la couleur d'identité de la bande ; c'est
     le texte qui change de camp, et la pastille y gagne l'air d'un tampon.
     Mesuré : 5,53:1. */
  .strip__kind{font-family:var(--mono); font-size:11.5px; font-weight:800; letter-spacing:.14em;
    text-transform:uppercase; color:var(--sink); background:var(--edge);
    border-radius:var(--pill); padding:4px 12px}
  .strip__fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(168px,100%),1fr));
    margin:0; border-bottom:1px solid var(--rule)}
  .strip__f{padding:16px 20px 17px 27px; border-left:1px solid var(--rule); min-width:0}
  .strip__f:first-child{border-left:none}
  /* #86745a ne donnait que 4,03:1 sur le papier, et il s'agit de capitales de
     10,5 px : la taille où l'antialiasing éclaircit encore le noyau des glyphes.
     #6b5a3a mesure 5,97:1, avec la marge que le reste du site s'impose déjà
     (voir le commentaire de --ink-2-fort). */
  .strip__f dt{font-family:var(--mono); font-size:10.5px; font-weight:800; letter-spacing:.13em;
    text-transform:uppercase; color:#6b5a3a}
  .strip__f dd{margin:7px 0 0; font-family:var(--mono); font-size:clamp(17px,1.9vw,21px);
    font-weight:800; letter-spacing:-.01em; line-height:1.2; color:var(--sink)}
  .strip__f dd small{display:block; margin-top:4px; font-family:var(--sans); font-size:12.5px;
    font-weight:600; letter-spacing:0; color:#6f6047}
  .strip__body{padding:20px 20px 4px 27px}
  .strip__list{list-style:none; margin:0; padding:0; display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:9px 22px}
  .strip__list li{position:relative; padding-left:25px; font-size:14.5px; line-height:1.55; color:#3c3529}
  .strip__list li b{color:var(--sink); font-weight:800}
  .strip__list li::before{content:""; position:absolute; left:4px; top:.52em; width:9px; height:9px;
    border-radius:2px; background:var(--edge)}
  .strip__act{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:22px 20px 8px 27px}
  /* L'ombre violette d'origine est faite pour un fond sombre ; sur le papier
     elle bavait en halo. Resserrée, et teintée de l'encre du carton. */
  .strip .cta{box-shadow:0 6px 16px rgba(40,30,90,.22)}
  .strip__side{font-size:13.5px; line-height:1.5; color:#6f6047; max-width:34ch}
  .strip__foot{margin:0; padding:16px 20px 18px 27px; border-top:1px dashed var(--rule);
    font-size:12.8px; line-height:1.62; color:#6f6047}
  .strip__foot b{color:var(--sink); font-weight:700}
  /* Les filets de la bande doivent suivre la grille, pas la contredire. En
     laissant `auto-fit` choisir le nombre de colonnes, on ne sait plus laquelle
     commence une ligne : le filet du haut se posait au milieu d'une rangée. On
     fixe donc le nombre de colonnes par palier, et les filets s'en déduisent. */
  @media (max-width:720px){
    .strip__fields{grid-template-columns:1fr 1fr}
    .strip__f{border-left:none}
    .strip__f:nth-child(2n){border-left:1px solid var(--rule)}
    .strip__f:nth-child(n+3){border-top:1px solid var(--rule)}
  }
  @media (max-width:430px){
    .strip__fields{grid-template-columns:1fr}
    .strip__f, .strip__f:nth-child(2n){border-left:none}
    .strip__f:nth-child(n+2){border-top:1px solid var(--rule)}
  }
  /* En dessous de 520 px, l'en-tête passait à la ligne et la pastille « Essai »
     tombait sous le titre, où elle ne désigne plus rien. On raccourcit plutôt
     l'intitulé : « Bande de progression » est un rappel, pas une information. */
  @media (max-width:520px){
    .strip__id small{display:none}
    .strip__head{flex-wrap:nowrap}
  }

  /* ---------- Les questions qu'on pose avant de créer un compte ----------
     Volontairement sans cartes ni encadrés : après la bande, tout ce qui
     brillerait ferait concurrence. Des filets, du texte, rien d'autre. */
  .faq{padding:clamp(56px,7.5vw,96px) 0; background:var(--surface);
    border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
  .qa{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
    gap:0 clamp(26px,4vw,54px); margin:clamp(28px,3.6vw,40px) 0 0}
  .qa__i{padding:20px 0; border-top:1px solid var(--border)}
  .qa__i dt{font-size:16.5px; font-weight:750; letter-spacing:-.012em; color:var(--ink)}
  .qa__i dd{margin:8px 0 0; font-size:14.5px; line-height:1.64; color:var(--ink-2-fort)}
  .qa__i dd b{color:var(--ink); font-weight:700}
  .qa__i dd .auth-link{font-size:inherit}

  .reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1)}
  .reveal.in{opacity:1; transform:none}