/* Survol France : styles des pages de présentation (accueil, le simulateur, formules, questions) */
  :root {
    --encre: #0f2238;        /* bleu nuit des cartes aéronautiques */
    --encre-2: #1d3a57;
    --papier: #eaf1f2;       /* fond de carte, bleuté */
    --papier-2: #dbe6e8;
    --route: #b5157a;        /* magenta des routes VAC */
    --ciel: #6fa6cf;
    --ambre: #f2a531;        /* couleur d'action du jeu */
    --texte: #16283b;
    --texte-doux: #4c6072;
    --rayon: 10px;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--papier); color: var(--texte); font: 17px/1.6 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  img { display: block; max-width: 100%; }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--ambre); outline-offset: 3px; border-radius: 4px; }
  h1, h2, h3 { font-family: "Barlow Condensed", sans-serif; font-weight: 700; line-height: 0.98; letter-spacing: -0.005em; margin: 0; }
  h2 { font-size: clamp(40px, 5.4vw, 72px); color: var(--encre); }
  h3 { font-size: 28px; color: var(--encre); }
  p { margin: 0; }
  .data { font-family: "JetBrains Mono", monospace; font-weight: 500; font-size: 0.86em; }
  .wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }

  /* ---------- boutons ---------- */
  .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 999px; font: 600 17px/1 Inter, sans-serif; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s, background .15s; }
  .btn:hover { transform: translateY(-1px); }
  .btn-ambre { background: var(--ambre); color: #231500; }
  .btn-ambre:hover { background: #ffb547; }
  .btn-clair { border-color: rgba(255,255,255,0.7); color: #fff; }
  .btn-clair:hover { background: rgba(255,255,255,0.12); }
  .btn-encre { background: var(--encre); color: #fff; }
  .btn-encre:hover { background: var(--encre-2); }
  .btn-contour { border-color: var(--encre); color: var(--encre); background: transparent; }
  .btn-contour:hover { background: rgba(15,34,56,0.06); }

  /* ---------- en-tête ---------- */
  .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background-color .25s, box-shadow .25s; }
  .nav.colle { background: linear-gradient(180deg, rgba(10,24,40,0.45) 0%, rgba(10,24,40,0.28) 100%),
      url(/presentation/img/hero-mont-blanc.jpg) center top / cover no-repeat, #5f93b8;
    box-shadow: 0 6px 18px -10px rgba(10,24,40,0.5); }
  .nav .btn { gap: 0; }
  .nav ul a.btn { opacity: 1; }
  .nav .wrap { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
  .logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 700 26px/1 "Barlow Condensed", sans-serif; }
  .logo img { width: 34px; height: 34px; }
  .nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; align-items: center; }
  .nav ul a { color: #fff; text-decoration: none; font-weight: 500; font-size: 16px; opacity: .92; }
  .nav ul a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
  .nav .btn { padding: 10px 18px; font-size: 15px; }

  /* ---------- héros ---------- */
  .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--encre); }
  .hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
  .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,24,40,0.45) 0%, rgba(10,24,40,0) 22%, rgba(10,24,40,0) 45%, rgba(10,24,40,0.82) 100%); }
  .hero .route-hero { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
  .hero .wrap { position: relative; z-index: 2; padding-bottom: 72px; }
  .hero h1 { font-size: clamp(60px, 10vw, 150px); max-width: 11ch; text-shadow: 0 2px 30px rgba(0,0,0,0.35); }
  .hero .lead { font-size: clamp(18px, 1.7vw, 22px); max-width: 44ch; margin-top: 22px; color: rgba(255,255,255,0.92); }
  .hero .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
  .hero .legende { position: absolute; right: 24px; bottom: 24px; z-index: 2; font-size: 13px; color: rgba(255,255,255,0.75); text-align: right; }
  .hero .legende .data { color: #fff; }
  .route-trace { stroke-dasharray: 14 10; animation: tracer 2.6s cubic-bezier(.4,.1,.2,1) .4s both; }
  @keyframes tracer { from { stroke-dashoffset: 1600; opacity: .0; } 10% { opacity: 1; } to { stroke-dashoffset: 0; } }

  /* ---------- plan de vol : la route magenta relie les étapes ---------- */
  .plan { position: relative; }
  .plan::before { content: ""; position: absolute; left: max(16px, calc((100% - 1180px) / 2 - 36px)); top: 0; bottom: 0; border-left: 3px dashed var(--route); opacity: .55; }
  .etape { position: relative; padding: 110px 0 20px; }
  .etape .point { position: absolute; left: -36px; top: 112px; transform: translateX(-9.5px); width: 22px; height: 22px; }
  .etape .troncon { color: var(--route); font-size: 14px; margin-bottom: 14px; }
  .etape .intro { max-width: 58ch; margin-top: 20px; font-size: 19px; color: var(--texte-doux); }

  .grille-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center; margin-top: 44px; }
  .grille-2.inverse { grid-template-columns: 1fr 1.35fr; }
  .photo { border-radius: var(--rayon); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(15,34,56,0.55); background: var(--papier-2); }
  .photo img { width: 100%; height: 100%; object-fit: cover; }
  .photo figcaption, .legende-photo { font-size: 13px; color: var(--texte-doux); margin-top: 10px; }
  .faits { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
  .faits.trois { grid-template-columns: repeat(3, 1fr); margin-top: 40px; }
  .faits li { padding-left: 18px; border-left: 3px solid var(--ciel); }
  .faits b { display: block; font: 700 24px/1.1 "Barlow Condensed", sans-serif; color: var(--encre); }
  .faits span { color: var(--texte-doux); font-size: 16px; }

  .galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 44px; }
  .galerie figure { margin: 0; }
  .galerie .photo { aspect-ratio: 16 / 10; }

  /* exemple de départ : cartouche façon carte VAC */
  .cartouche { background: #fff; border: 2px solid var(--encre); border-radius: 6px; padding: 20px 22px; font-size: 15px; }
  .cartouche .recherche { display: flex; align-items: center; gap: 10px; border: 1px solid var(--papier-2); border-radius: 8px; padding: 10px 12px; color: var(--texte-doux); }
  .cartouche .recherche b { color: var(--texte); font-weight: 600; }
  .cartouche .terrain { margin-top: 16px; }
  .cartouche .terrain strong { font: 700 22px/1.1 "Barlow Condensed", sans-serif; color: var(--encre); display: block; }
  .pistes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .pistes span { border: 1.5px solid var(--encre); border-radius: 5px; padding: 4px 8px; font: 500 13px "JetBrains Mono", monospace; }
  .pistes span.choisie { background: var(--encre); color: #fff; }
  .cartouche .vers { margin-top: 18px; padding-top: 16px; border-top: 1.5px dashed var(--route); color: var(--route); font-weight: 600; }

  /* multi-écrans : maquette de trois écrans et de l'écran d'instruments */
  .ecrans { margin-top: 48px; display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 10px; align-items: end; perspective: 1400px; }
  .ecran { background: #0b1520; border-radius: 8px; padding: 7px 7px 16px; box-shadow: 0 30px 50px -30px rgba(0,0,0,0.6); }
  .ecran div { aspect-ratio: 16 / 9; background-size: cover; border-radius: 3px; }
  .ecran.g { transform: rotateY(18deg); transform-origin: right center; }
  .ecran.d { transform: rotateY(-18deg); transform-origin: left center; }
  .ecran div { background-position: center; background-size: cover; }
  .ecran.g div { background-image: url(presentation/img/ecran-gauche.jpg); }
  .ecran.f div { background-image: url(presentation/img/ecran-devant.jpg); }
  .ecran.d div { background-image: url(presentation/img/ecran-droite.jpg); }
  .ecran-bas { width: min(36%, 430px); margin: 14px auto 0; }
  .ecran-bas div { background-image: url(presentation/img/ecran-instruments.jpg); }
  .ecrans-legende { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 10px; text-align: center; font-size: 14px; color: var(--texte-doux); margin-top: 10px; }

  .petits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; }
  .petits h3 { font-size: 26px; }
  .petits p { color: var(--texte-doux); margin-top: 10px; font-size: 16px; }

  /* ---------- formules : l'arrivée ---------- */
  .arrivee { background: var(--encre); color: #fff; margin-top: 120px; padding: 110px 0 120px; position: relative; }
  .arrivee h2 { color: #fff; }
  .arrivee .intro { color: rgba(255,255,255,0.75); max-width: 56ch; margin-top: 18px; font-size: 19px; }
  .piste-arrivee { display: block; margin-bottom: 26px; }
  .periode { display: inline-flex; margin-top: 34px; background: rgba(255,255,255,0.08); border-radius: 999px; padding: 4px; }
  .periode button { border: 0; background: transparent; color: rgba(255,255,255,0.8); font: 600 15px/1 Inter, sans-serif; padding: 11px 18px; border-radius: 999px; cursor: pointer; }
  .periode button[aria-pressed="true"] { background: #fff; color: var(--encre); }
  .periode small { color: var(--ambre); font-weight: 600; margin-left: 4px; }
  .periode button[aria-pressed="true"] small { color: var(--route); }
  .formules { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 20px; margin-top: 36px; align-items: stretch; }
  .formule { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 30px 28px; display: flex; flex-direction: column; }
  .formule.phare { background: #fff; color: var(--texte); border: 0; transform: translateY(-14px); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6); }
  .formule h3 { color: inherit; font-size: 36px; }
  .formule .pour { margin-top: 6px; font-size: 15px; opacity: .8; }
  .formule .prix { margin-top: 22px; display: flex; align-items: baseline; gap: 6px; }
  .formule .prix b { font: 700 58px/1 "Barlow Condensed", sans-serif; }
  .formule .prix span { opacity: .75; font-size: 15px; }
  .formule .equivalent { font-size: 14px; opacity: .7; min-height: 22px; margin-top: 4px; }
  .formule .badge { align-self: flex-start; background: var(--route); color: #fff; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px; margin-bottom: 14px; }
  .formule ul { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 11px; font-size: 15.5px; flex: 1; align-content: start; }
  .formule li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; }
  .formule li svg { margin-top: 4px; }
  .formule li.non { opacity: .5; }
  .formule li .bientot { font-size: 12px; font-weight: 600; color: var(--ambre); border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
  .formule .btn { justify-content: center; width: 100%; }
  .formule.phare .btn-ambre { background: var(--route); color: #fff; }
  .formule.phare .btn-ambre:hover { background: #cc1f8c; }
  .formule .btn-contour { border-color: rgba(255,255,255,0.6); color: #fff; }
  .garanties { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 34px; color: rgba(255,255,255,0.75); font-size: 15px; }
  .garanties span::before { content: "✓ "; color: var(--ambre); font-weight: 700; }
  #paiement-info { margin-top: 18px; color: var(--ambre); min-height: 24px; font-size: 15px; }

  .comparatif { margin-top: 70px; overflow-x: auto; }
  .comparatif table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; }
  .comparatif th, .comparatif td { padding: 13px 12px; border-bottom: 1px solid rgba(255,255,255,0.12); text-align: center; }
  .comparatif th:first-child, .comparatif td:first-child { text-align: left; color: rgba(255,255,255,0.85); }
  .comparatif thead th { font: 700 22px/1 "Barlow Condensed", sans-serif; color: #fff; }
  .comparatif td { color: rgba(255,255,255,0.9); }
  .comparatif .oui { color: var(--ambre); font-weight: 700; }
  .comparatif .non { color: rgba(255,255,255,0.3); }

  /* ---------- questions ---------- */
  .faq { padding: 110px 0 40px; }
  .faq .liste { margin-top: 36px; max-width: 820px; }
  .faq details { border-bottom: 1px solid rgba(15,34,56,0.18); padding: 20px 0; }
  .faq summary { cursor: pointer; font: 700 25px/1.2 "Barlow Condensed", sans-serif; color: var(--encre); list-style: none; display: flex; justify-content: space-between; gap: 20px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-family: Inter, sans-serif; font-weight: 400; color: var(--route); }
  .faq details[open] summary::after { content: "−"; }
  .faq details p { margin-top: 12px; color: var(--texte-doux); max-width: 70ch; }

  /* ---------- appel final ---------- */
  .final { position: relative; margin-top: 90px; min-height: 520px; display: flex; align-items: center; color: #fff; overflow: hidden; }
  .final img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .final::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,24,40,0.85) 0%, rgba(10,24,40,0.35) 60%, rgba(10,24,40,0.1) 100%); }
  .final .wrap { position: relative; z-index: 1; }
  .final h2 { color: #fff; max-width: 16ch; }
  .final p { margin-top: 16px; max-width: 42ch; font-size: 19px; color: rgba(255,255,255,0.88); }
  .final .btn { margin-top: 30px; }

  footer { background: var(--encre); color: rgba(255,255,255,0.7); font-size: 14px; padding: 36px 0; }
  footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; }
  footer a { color: #fff; }

  @media (max-width: 1260px) {
    .plan::before, .etape .point { display: none; }
  }
  @media (max-width: 960px) {
    .nav ul li.entete-section { display: none; }
  }
  @media (max-width: 520px) {
    .nav .wrap { gap: 10px; }
    .logo { font-size: 22px; white-space: nowrap; }
    .logo img { width: 28px; height: 28px; }
    .nav ul { gap: 14px; }
    .nav ul a { white-space: nowrap; font-size: 15px; }
    .nav .btn { padding: 9px 14px; }
    .entete-long { display: none; }
    .grille-2, .grille-2.inverse { grid-template-columns: 1fr; gap: 28px; }
    .grille-2.inverse .photo { order: -1; }

    .formules { grid-template-columns: 1fr; }
    .formule.phare { transform: none; order: -1; }
    .petits { grid-template-columns: 1fr; gap: 26px; }
    .faits.trois { grid-template-columns: 1fr; }
    .plan::before, .etape .point { display: none; }
    .etape { padding-top: 80px; }
    .hero .legende { display: none; }
  }
  @media (max-width: 560px) {
    body { font-size: 16px; }
    .galerie { grid-template-columns: 1fr; }
    .ecrans, .ecrans-legende { grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
    .ecran { padding: 3px 3px 8px; }
    .ecran-bas { width: 70%; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .route-trace { animation: none; }
    .btn { transition: none; }
  }

  /* pages intérieures */
  .arrivee.seule { margin-top: 0; }
  .suite { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
  .questions-apercu { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; max-width: 820px; }
  .questions-apercu a { display: block; padding: 14px 18px; background: #fff; border-radius: 10px; text-decoration: none; color: var(--encre);
    font: 700 22px/1.2 "Barlow Condensed", sans-serif; }
  .questions-apercu a:hover { color: var(--route); }