/* A/XESS Private Jets — maquette V1 (07/09/2026)
   Palette : nuit #0E1116 · papier #F3F1EC · brume #8B93A1 — son choix du 07/09 : barre du logo en blanc atténué, bouton principal blanc, AUCUNE couleur vive (la couleur vient des photos) */
:root {
  /* Teintes Villiers, lues dans leur CSS compilé (neutral-50 → 500) */
  --v50: #F8F9F9; --v100: #F3F3F3; --v150: #D9D9D9; --v200: #B4B4B2; --v300: #707070; --v400: #29292B; --v500: #0F0F15;

  /* THÈME SOMBRE — celui de la page par défaut */
  --paper: var(--v500);        /* fond de page */
  --surface: #151A22;          /* surfaces légèrement détachées */
  --line: rgba(248, 249, 249, .14);
  --muted: var(--v200);        /* texte secondaire */
  --text: var(--v50);          /* texte courant */
  --ink: var(--v50);           /* titres */

  --faint: var(--v200);        /* texte secondaire posé sur une photo */
  --on-photo: var(--v50);      /* texte posé sur une photo */
  --night: var(--v500);        /* voiles posés sur les photos */
  --night-2: #151A22;
  --signal: #E63946;
  --pad: clamp(20px, 5vw, 72px);
  --radius: 4px;
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
}

/* THÈME CLAIR — à poser sur une section (class="clair") ou sur <body> pour une page entière.
   08/09 : sa demande — sombre sur l'essentiel, clair sur le bas de page ou sur certaines pages. */
.clair {
  --paper: var(--v50);
  --surface: var(--v100);
  --line: var(--v150);
  --muted: var(--v300);
  --text: var(--v400);
  --ink: var(--v500);
  background: var(--paper);
  color: var(--text);
}
.clair .alert input { background: #fff; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--text); }
body { font-size: 16px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; }
p { margin: 0; }
img { display: block; max-width: 100%; }

/* ---- grain animé : mécanique Villiers à l'identique (calque fixe 200 %, hard-light, saut 10×/s), texture PNG à nous :
   bruit gris doux autour du gris moyen (img/grain.png, généré avec ffmpeg) — un gris moyen en hard-light ne change rien,
   seules les fines variations claires/sombres apparaissent, sans points blancs qui clignotent ---- */
.grain {
  position: fixed; inset: -50% 0 0 -50%; width: 200%; height: 200vh; z-index: 50; pointer-events: none;
  opacity: 1; mix-blend-mode: hard-light; will-change: transform;
  background-image: url("img/grain.png"); background-size: auto; background-repeat: repeat;
  animation: grain .5s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-5%, 5%); } 20% { transform: translate(3%, -10%); }
  30% { transform: translate(-2%, -15%); } 40% { transform: translate(-3%, -9%); } 50% { transform: translate(12%, 9%); }
  60% { transform: translate(9%, -4%); } 70% { transform: translate(-1%, 1%); } 80% { transform: translate(1%, -7%); } 90% { transform: translate(-7%, 1%); }
}

/* ---- header ---- */
.top { position: absolute; inset: 0 0 auto 0; z-index: 60; height: 100px; display: flex; align-items: flex-start; justify-content: center; padding: 28px 72px; color: var(--on-photo); pointer-events: none; }
.top > * { pointer-events: auto; }
.top > .brand { display: block; line-height: 1.1; position: relative; padding-bottom: 20px; white-space: nowrap; }
.top > .brand small { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 9px; letter-spacing: .24em; white-space: nowrap; }
.hero-menu { position: absolute; top: 22px; left: 18px; }
.hero-menu summary { width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 11px; cursor: pointer; list-style: none; }
.hero-menu summary::-webkit-details-marker { display: none; }
.hero-menu summary span { display: block; width: 22px; height: 1px; background: currentColor; transition: transform .2s, opacity .2s; }
.hero-menu[open] summary span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hero-menu[open] summary span:nth-child(2) { opacity: 0; }
.hero-menu[open] summary span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.hero-menu-links { margin-top: 12px; width: min(280px, calc(100vw - 36px)); padding: 14px; background: rgba(15,15,21,.96); border: 1px solid rgba(248,249,249,.18); border-radius: 3px; backdrop-filter: blur(16px); }
.hero-menu-links a { display: block; padding: 13px 16px; font-size: 15px; }
.hero-menu-links a:hover { background: rgba(248,249,249,.08); }
.hero-menu summary:focus-visible, .hero-menu-links a:focus-visible { outline: 2px solid var(--on-photo); outline-offset: 3px; }
.brand { font-weight: 800; font-size: 22px; letter-spacing: .06em; }
.top .nav a, .brand { color: var(--on-photo); }
.brand small { font-weight: 300; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; margin-left: 10px; color: var(--on-photo); opacity: .8; }
.slash { color: currentColor; opacity: .55; font-weight: 200; font-size: 1.45em; line-height: 0; position: relative; top: .08em; margin: 0 .02em; }
.nav { display: flex; gap: 28px; margin-left: auto; font-size: 14px; font-weight: 500; }
.nav a { opacity: .85; } .nav a:hover { opacity: 1; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--ink); white-space: nowrap; }
/* dans le héro, les boutons sont posés sur la photo : ils repassent en blanc */
.hero .btn, .top .btn { color: var(--on-photo); border-color: rgba(248, 249, 249, .38); }
.hero .btn-primary, .top .btn-primary { background: var(--on-photo); border-color: var(--on-photo); color: var(--v500); }  /* 08/09 : toujours du texte sombre sur le bouton blanc — en thème sombre --ink est clair, le texte disparaissait */
.btn:hover { border-color: rgba(243,241,236,.5); }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #fff; border-color: #fff; }
.btn:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---- héro ---- */
.hero { position: relative; min-height: max(560px, 100svh); display: grid; place-items: center; overflow: hidden; }
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide { opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 1.8s ease-in-out, visibility 0s linear 1.8s; }
.hero-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.hero-img--sunset { object-position: 74% 22%; }
/* L'axe de l'avion est à 52 % de la photo. Le léger débordement à gauche
   le place à 50 % du héros, sous le logo, sans découvrir le bord droit. */
.hero-img--front { object-position: center center; }
/* Vue frontale : le visuel couvre tout le héros, sans bandes latérales. */
.hero-slide:has(.hero-img--front) { background: none; }
.hero-slide:has(.hero-img--front)::before { content: none; }
.hero-img--front { object-fit: cover; object-position: center center; z-index: 1; }
.hero-video { object-position: center center; }
.hero-carousel-controls { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 4; display: flex; align-items: center; padding: 2px 6px; border: 1px solid rgba(248,249,249,.2);
  border-radius: 999px; background: rgba(15,15,21,.5); backdrop-filter: blur(10px); }
.hero-carousel-controls[hidden] { display: none; }
.hero-carousel-button, .hero-carousel-dot { display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; background: transparent; color: var(--on-photo); cursor: pointer; border-radius: 50%; }
.hero-carousel-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-carousel-button:hover, .hero-carousel-dot:hover { background: rgba(248,249,249,.1); }
.hero-carousel-button:focus-visible, .hero-carousel-dot:focus-visible { outline: 2px solid var(--on-photo); outline-offset: -4px; }
.hero-carousel-button:disabled, .hero-carousel-dot:disabled { opacity: .3; cursor: default; }
.hero-carousel-dots { display: flex; }
.hero-carousel-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(248,249,249,.35); }
.hero-carousel-dot[aria-pressed="true"]::before { background: var(--on-photo); box-shadow: 0 0 0 3px rgba(248,249,249,.15); }
.hero-carousel-playback .carousel-play-icon, .hero-carousel-playback.is-paused .carousel-pause-icon { display: none; }
.hero-carousel-playback.is-paused .carousel-play-icon { display: block; }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }
/* Limite calculée depuis le recadrage object-fit : les deux couches restent
   dans le ciel, même lorsque la dérive remonte sur un écran panoramique.
   Sans JS ou avant chargement de la photo, les nuages restent masqués. */
.hero-atmosphere {
  --clear-sky: 0px;
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--clear-sky) * .5), transparent var(--clear-sky));
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--clear-sky) * .5), transparent var(--clear-sky));
}
/* ---- nuages en mouvement, DEUX profondeurs (08/09, v4) ----
   v2 : les deux bandes se recouvraient, la lointaine semblait figée -> décalées en hauteur.
   v3 : la bande était dupliquée en MIROIR, la symétrie se voyait comme un arc -> supprimé.
   v4 : chaque bande est une tuile de 1148 px dont la fin est fondue en dégradé sur le début,
   donc elle se répète sans raccord ET sans symétrie. Hauteurs en pixels pour que le
   déplacement (-1148 px) tombe exactement sur une tuile : aucun saut à la boucle. */
.hero-sky-far, .hero-sky { position: absolute; left: 0; right: 0; pointer-events: none;
  background-repeat: repeat-x; will-change: background-position; }

/* LOINTAIN : haut du cadre, à peine flouté, mouvement lent mais visible (~11 min) */
.hero-sky-far {
  top: 0; height: 230px;
  background-image: url("img/hero-sky-far.webp"); background-size: 1148px 230px;
  opacity: .85;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  animation: derive-loin 420s linear infinite;
}

/* PROCHE : juste en dessous, se fond dans le lointain par le haut et dans la photo par le bas */
.hero-sky {
  top: 96px; height: 380px;
  background-image: url("img/hero-sky.webp"); background-size: 1148px 380px;
  opacity: .9;
  /* Fondu de la texture ; le masque parent protège l'avion selon le cadrage. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 42%, transparent 54%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 42%, transparent 54%);
  animation: derive-pres 240s linear infinite;
}
@keyframes derive-loin { from { background-position: 0 0; } to { background-position: -1148px 0; } }
@keyframes derive-pres { from { background-position: 0 0; } to { background-position: -1148px 0; } }
@media (prefers-reduced-motion: reduce) { .hero-sky, .hero-sky-far { animation: none; } }

.hero-veil { position: absolute; inset: 0; background: rgba(0,0,0,.42); pointer-events: none; }
/* 10/09 : composition de la référence Villiers /fr — image plein écran,
   marque centrée en haut, recherche au centre, titre dans l'introduction. */
.hero-body { position: relative; z-index: 3; padding: 100px 32px; width: 100%; display: flex; justify-content: center; pointer-events: none; }
.hero-body > * { pointer-events: auto; }
.intro-text h1 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(38px, 4.8vw, 68px); line-height: 1.05; letter-spacing: -.025em; }
.hero-kicker { font-size: 14px; font-weight: 500; letter-spacing: .04em; color: var(--on-photo); opacity: .85; margin-bottom: 18px; }
.route { display: flex; align-items: baseline; gap: clamp(14px, 3vw, 40px); flex-wrap: wrap; }
.code { font-size: clamp(64px, 12vw, 150px); font-weight: 600; letter-spacing: -.04em; line-height: .9; display: flex; flex-direction: column; }
.code small { font-size: clamp(13px, 1.2vw, 16px); font-weight: 400; letter-spacing: .02em; color: var(--on-photo); opacity: .8; margin-top: 12px; }
.arrow { font-size: clamp(36px, 6vw, 80px); font-weight: 300; color: var(--on-photo); opacity: .8; align-self: center; }
.hero-sub { margin-top: 26px; max-width: 54ch; font-size: 17px; font-weight: 300; color: var(--paper); opacity: .9; }
.hero-title, .hero-sub { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; } .hero-sub { animation-delay: .25s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero * { animation: none !important; } }

/* Recherche centrale : proportions de Villiers, couleurs de la marque A/XESS. */
.searchbar { position: relative; z-index: 3; margin: 0; width: 100%; max-width: 1080px; display: grid;
             grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(170px, 1.15fr) 150px 170px;
             align-items: stretch; background: rgba(15, 23, 41, .48); border: 1px solid rgba(248, 249, 249, .18);
             border-radius: 3px; -webkit-backdrop-filter: blur(18px) saturate(.82); backdrop-filter: blur(18px) saturate(.82);
             text-align: left; box-shadow: 0 12px 40px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(248,249,249,.06); scroll-margin-top: 24px; }
.sb-field { display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 64px;
            border-right: 1px solid rgba(248, 249, 249, .13); min-width: 0; }
.sb-ico { display: grid; place-items: center; color: rgba(248, 249, 249, .55); flex: none; }
.sb-ico svg { width: 17px; height: 17px; stroke-linecap: round; stroke-linejoin: round; }
.sb-field input { font: inherit; font-size: 15px; font-weight: 500; color: var(--on-photo);
                  background: transparent; border: 0; padding: 0; min-width: 0; width: 100%; color-scheme: dark; }
.sb-field input::placeholder { color: rgba(248, 249, 249, .5); font-weight: 300; }
.sb-pax { justify-content: center; gap: 5px; padding: 0 8px; }
.sb-pax input { width: 25px; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.sb-pax input::-webkit-inner-spin-button, .sb-pax input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pax-step { display: grid; place-items: center; flex: none; width: 30px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--on-photo); font: inherit; font-size: 20px; cursor: pointer; }
.pax-step:hover { background: rgba(248,249,249,.08); }
.pax-step:disabled { opacity: .3; cursor: default; }
.sb-go { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 24px; border: 0; border-radius: 0 2px 2px 0; cursor: pointer;
         font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .04em;
         background: var(--on-photo); color: var(--v500); white-space: nowrap; }
.sb-go svg { width: 16px; height: 16px; stroke-linecap: round; stroke-linejoin: round; }
.sb-go:hover { background: #fff; }
.sb-go:focus-visible { outline: 2px solid var(--v500); outline-offset: -5px; }
.pax-step:focus-visible { outline: 2px solid var(--on-photo); outline-offset: -3px; }

@media (max-width: 1000px) {
  .hero-body { padding-inline: 24px; }
  .searchbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 160px 134px 120px; }
  .sb-field { padding-inline: 12px; }
  .sb-pax { padding-inline: 4px; }
}
@media (max-width: 760px) {
  .top { padding-top: 24px; }
  .hero-menu { top: 17px; left: 10px; }
  .hero-body { padding: 110px 20px 70px; }
  .hero-img { object-position: 62% center; }
  .hero-img--sunset { object-position: 76% center; }
  .hero-carousel-controls { bottom: 14px; }
  .searchbar { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .sb-field { border-right: 0; border-bottom: 1px solid rgba(248, 249, 249, .14); }
  .sb-pax { gap: 12px; }
  .pax-step { width: 44px; }
  .sb-go { padding: 20px; border-radius: 0 0 2px 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-menu summary span { transition: none; }
}

/* ---- comment ça marche : bande, pas de cartes ---- */

/* ---- empty legs : cartes plein cadre façon carte Instagram ---- */
/* ---------------------------------------------------------------- comment ça marche
   08/09 : refait en cartes (sa remarque, capture de la section Villiers à l'appui) —
   photo de fond, icône, numéro en filigrane, une carte accentuée. L'ancienne bande
   était 4 colonnes de texte séparées par des filets : trop pauvre à côté de la référence. */
.how { padding: 92px var(--pad) 104px; }
.how-head { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 820px; margin: 0 auto 48px; text-align: center; }
.how-head h2 { font-size: clamp(36px, 4.8vw, 58px); letter-spacing: -.045em; line-height: 1; }
.how-head p { max-width: 72ch; color: var(--muted); font-size: 17px; font-weight: 300; line-height: 1.55; }

.steps { list-style: none; width: min(100%, 1280px); margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.step { position: relative; isolation: isolate; overflow: hidden; border-radius: 6px;
        min-height: 360px; padding: 26px 26px 28px; display: flex; flex-direction: column;
        border: 1px solid var(--line); background: var(--night-2); color: var(--on-photo);
        transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s ease, border-color .35s ease, box-shadow .45s ease; }
/* la photo vit dans un pseudo-élément : elle se fond dans le noir vers le bas,
   pour que le texte reste lisible sans poser un voile plat sur toute la carte */
.step::before { content: ""; position: absolute; inset: 0; z-index: -2;
                background-image: var(--shot); background-size: cover; background-position: center;
                /* désaturation : les photos gardent leur matière mais rentrent dans la palette
                   « blanc atténué » — sans elle, le ciel bleu de la carte 4 jure avec le reste */
                filter: saturate(.42) contrast(1.06); opacity: .62;
                transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .45s ease, filter .45s ease; }
.step::after { content: ""; position: absolute; inset: 0; z-index: -1;
               background: linear-gradient(180deg, rgba(15,15,21,.25) 0%, rgba(15,15,21,.82) 58%, rgba(15,15,21,.96) 100%); }

.step .num { position: absolute; top: 14px; right: 22px; font-size: 62px; font-weight: 600;
             line-height: 1; letter-spacing: -.03em; color: var(--v50); opacity: .16; }
.step .ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
             background: rgba(248, 249, 249, .12); border: 1px solid rgba(248, 249, 249, .18); }
.step .ico svg { width: 19px; height: 19px; stroke-linecap: round; stroke-linejoin: round; }

.step:hover, .step:focus-within { transform: translateY(-7px); border-color: rgba(248,249,249,.42);
                                  box-shadow: 0 22px 46px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(248,249,249,.08); }
.steps:has(.step:hover) .step:not(:hover) { opacity: .7; transform: scale(.985); }
.step:hover::after, .step:focus-within::after { background: linear-gradient(180deg, rgba(15,15,21,.12) 0%, rgba(15,15,21,.76) 58%, rgba(15,15,21,.96) 100%); }
.step:hover::before, .step:focus-within::before { transform: scale(1.06); opacity: .8; filter: saturate(.58) contrast(1.04); }
.step:hover .ico, .step:focus-within .ico { background: rgba(248,249,249,.2); border-color: rgba(248,249,249,.42); }
.step:hover .num, .step:focus-within .num { opacity: .28; }

.step-body { margin-top: 22px; }
.step-body h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 10px; color: var(--on-photo); }
.step-body p { font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(248, 249, 249, .74); }

/* carte accentuée : le seul endroit de la section qui porte un liseré clair */
.step.accent { border-color: rgba(248, 249, 249, .42); box-shadow: 0 0 0 1px rgba(248,249,249,.08), 0 18px 60px -24px rgba(248,249,249,.28); }
.step-flag { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(248, 249, 249, .22);
             font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--on-photo); }

@media (max-width: 1080px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .how { padding-top: 72px; padding-bottom: 78px; }
  .how-head { margin-bottom: 34px; }
  .how-head p { font-size: 15px; }
  .steps { grid-template-columns: 1fr; }
  .step { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .step, .step::before { transition: none; }
}

/* ---------------------------------------------------------------- le corridor
   Section signature : la fiche technique des 6 terrains, de Gênes à Saint-Tropez.
   Traitée comme un tableau d'aérogare (filets, colonnes alignées), pas comme des
   cartes : ici c'est la donnée qui doit être lisible, pas le contenant. */
.corridor { padding: 90px var(--pad) 80px; }
.corridor-head { display: grid; grid-template-columns: minmax(0, 22ch) minmax(0, 62ch); gap: 48px; align-items: start; margin-bottom: 48px; }
.corridor-head h2 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.02em; line-height: 1; }
.corridor-head p { color: var(--muted); font-weight: 300; }

.fields { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.fields li { display: grid; grid-template-columns: 88px minmax(0, 1fr) 150px minmax(0, 1.25fr); gap: 28px;
             align-items: baseline; padding: 26px 0 24px; border-bottom: 1px solid var(--line); }

.fields .code { font-size: 19px; font-weight: 600; letter-spacing: .04em; }
.fields .code em { display: block; font-style: normal; font-size: 11px; font-weight: 300; letter-spacing: .14em; color: var(--muted); margin-top: 5px; }

.fields .field { font-size: 17px; font-weight: 500; color: var(--ink); }
.fields .field em { display: block; font-style: normal; font-size: 13px; font-weight: 300; color: var(--muted); margin-top: 5px; }

/* la longueur de piste est le fait déterminant du corridor : c'est elle qu'on met en avant */
.fields .rwy { text-align: right; font-size: 14px; font-weight: 300; color: var(--muted); white-space: nowrap; }
.fields .rwy b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.fields .rwy em { display: block; font-style: normal; font-size: 11px; letter-spacing: .1em; margin-top: 7px; white-space: normal; }

.fields .note { color: var(--muted); font-size: 14px; font-weight: 300; line-height: 1.55; }

.corridor-src { margin: 26px 0 0; font-size: 12px; font-weight: 300; color: var(--muted); max-width: 76ch; }

@media (max-width: 1080px) {
  .fields li { grid-template-columns: 78px minmax(0, 1fr) 130px; }
  .fields .note { grid-column: 2 / -1; }
}
@media (max-width: 720px) {
  .corridor-head { grid-template-columns: 1fr; gap: 18px; }
  .fields li { grid-template-columns: 1fr auto; gap: 14px; }
  .fields .rwy { text-align: right; }
  .fields .note { grid-column: 1 / -1; }
}

.legs { padding: 90px var(--pad); }
.legs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.legs-head p { color: var(--muted); max-width: 46ch; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--night-2); color: var(--on-photo); display: grid; grid-template-rows: auto 1fr auto; padding: 26px; isolation: isolate; }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s ease; }
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,17,22,.55) 0%, rgba(14,17,22,0) 35%, rgba(14,17,22,0) 55%, rgba(14,17,22,.85) 100%); }
.card:hover img { transform: scale(1.03); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.card .c { display: flex; flex-direction: column; font-size: 44px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--on-photo); }
.card .c small { font-size: 13px; font-weight: 400; letter-spacing: .02em; margin-top: 6px; opacity: .85; }
.card .a { font-size: 26px; font-weight: 300; opacity: .8; margin-top: 10px; }
.card-bottom { grid-row: 3; }
.card time { display: block; font-size: 18px; font-weight: 400; margin-bottom: 14px; }
.card .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(248, 249, 249, .35); font-size: 12px; opacity: .95; }
.card .meta strong { font-size: 20px; font-weight: 500; margin-left: auto; }
.legs-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 32px; flex-wrap: wrap; }
.alert { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alert span { color: var(--muted); font-size: 14px; }
.alert input { font: inherit; font-size: 14px; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); min-width: 240px; }

/* ---- routes : liste, pas de cartes ---- */
.routes { padding: 0 var(--pad) 90px; }
.routes h2 { margin-bottom: 20px; }
.routes ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.routes li a { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.routes li a:hover .c { opacity: .6; }
.routes .c { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); transition: color .2s; }
.routes li a > span:last-child { color: var(--muted); font-size: 14px; }

/* ---- about ---- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.about img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; filter: saturate(.85); }
.about div { padding: 72px var(--pad); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.about p { max-width: 52ch; color: var(--text); font-weight: 400; }
.about p + p { color: var(--muted); font-size: 14px; }

/* ---- journal ---- */
.journal { padding: 90px var(--pad); border-top: 1px solid var(--line); }
.posts a:hover b { opacity: .6; }

/* ---- footer ---- */
.foot { padding: 48px var(--pad) 40px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: start; background: var(--surface); }
.foot .brand { color: var(--ink); }
.foot .brand small { color: var(--muted); }
.foot p { color: var(--muted); font-size: 13px; max-width: 60ch; }
.foot nav { display: flex; gap: 22px; font-size: 13px; color: var(--muted); }

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .estimator { grid-template-columns: 1fr 1fr; }
  .estimator .btn { grid-column: 1 / -1; height: auto; padding: 16px; }
  .strip { grid-template-columns: 1fr 1fr; } .step:nth-child(3) { border-left: 0; padding-left: var(--pad); }
  .cards { grid-template-columns: 1fr 1fr; }
  .about { grid-template-columns: 1fr; }
  .posts { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav { display: none; }
  .strip { grid-template-columns: 1fr; } .step { border-left: 0; padding-left: var(--pad); border-top: 1px solid var(--line); }
  .cards { grid-template-columns: 1fr; }
  .legs-head { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------- assurances
   Équivalent honnête des blocs de réassurance de Villiers (« 10 ans d'existence »,
   « support 24/7 ») : ici l'expertise territoriale, la transparence tarifaire et le
   statut des transporteurs. Titres en serif pour ne pas répéter la bande .strip. */
.assurances { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.assurance { padding: 54px var(--pad) 58px 32px; border-left: 1px solid var(--line); }
.assurance:first-child { border-left: 0; padding-left: var(--pad); }
.assurance h3 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 30px;
                line-height: 1.1; letter-spacing: -.01em; margin-bottom: 14px; max-width: 18ch; }
.assurance p { color: var(--muted); font-size: 14px; font-weight: 300; line-height: 1.6; max-width: 38ch; }

@media (max-width: 900px) {
  .assurances { grid-template-columns: 1fr; }
  .assurance { border-left: 0; border-top: 1px solid var(--line); padding: 38px var(--pad); }
  .assurance:first-child { border-top: 0; }
}

/* ---------------------------------------------------------------- présentation
   Format de sa référence : grand titre, surtitre, 3 paragraphes avec les mots qui
   comptent en gras, photo à droite en carte arrondie. */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px;
         align-items: center; padding: 96px var(--pad); }
.intro h2 { font-size: clamp(34px, 5vw, 62px); line-height: 1.02; letter-spacing: -.025em; font-weight: 600; }
.intro-kicker { margin: 8px 0 30px; font-size: 19px; font-weight: 500; letter-spacing: .12em;
                text-transform: uppercase; color: var(--v300); }
.intro-text p { color: var(--muted); font-weight: 300; font-size: 15px; line-height: 1.7; max-width: 54ch; margin-bottom: 18px; }
.intro-text p b { font-weight: 600; color: var(--ink); }
.intro-shot { margin: 0; }
.intro-shot img, .intro-shot video { display: block; width: 100%; height: 100%; max-height: 460px;
                  object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--night-2); }

/* ---------------------------------------------------------------- pourquoi A/XESS
   Grille d'atouts à gauche (filets, pas de cartes), grande photo à droite. */
.why { padding: 20px var(--pad) 96px; }
.why-head { margin-bottom: 34px; }
.why-head h2 { font-size: clamp(32px, 4.6vw, 56px); font-weight: 600; letter-spacing: -.025em; }
.why-head h2 em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; }
.why-kicker { margin-top: 8px; font-size: 13px; font-weight: 500; letter-spacing: .16em;
              text-transform: uppercase; color: var(--v300); }
.why-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: stretch; }
.why-cells { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.why-cells article { padding: 26px 26px 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.why-ico { display: block; color: var(--v200); margin-bottom: 14px; }
.why-ico svg { width: 21px; height: 21px; stroke-linecap: round; stroke-linejoin: round; }
.why-cells h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.why-cells p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--muted); }
.why-shot { margin: 0; }
.why-shot img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }

@media (max-width: 980px) {
  .intro { grid-template-columns: 1fr; gap: 34px; padding: 64px var(--pad); }
  .intro-shot { order: -1; }
  .why-grid { grid-template-columns: 1fr; }
  .why-shot img { max-height: 320px; }
}
@media (max-width: 620px) { .why-cells { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- routes populaires
   Équivalent honnête du « Recently Searched Flights » de sa référence : chez eux ce sont
   de vraies recherches d'utilisateurs, ici ce sont des routes types annoncées comme telles
   — inventer une activité qu'on n'a pas serait de la preuve sociale fabriquée. */
.popular { padding: 20px var(--pad) 90px; }
.popular-head { display: grid; grid-template-columns: minmax(0, 26ch) minmax(0, 58ch); gap: 48px; margin-bottom: 34px; }
.popular-head h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 600; letter-spacing: -.022em; line-height: 1.05; }
.popular-head p { color: var(--muted); font-weight: 300; font-size: 14px; }

.rails { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rail { position: relative; isolation: isolate; overflow: hidden; border-radius: 8px; padding: 22px 22px 20px;
        border: 1px solid var(--line); background: var(--night-2); color: var(--on-photo); }
.rail::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--shot);
                background-size: cover; background-position: center; filter: saturate(.4) contrast(1.05); opacity: .5; }
.rail::after { content: ""; position: absolute; inset: 0; z-index: -1;
               background: linear-gradient(180deg, rgba(15,15,21,.55), rgba(15,15,21,.94)); }
.rail header { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.rail header small { font-size: 11px; font-weight: 300; letter-spacing: .1em; color: rgba(248,249,249,.6); }
.rail .ar { margin: 0 4px; color: rgba(248,249,249,.55); }
.rail-meta { margin-top: 8px; font-size: 12px; font-weight: 300; color: rgba(248,249,249,.6); }
.rail-cat { margin-top: 20px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(248,249,249,.72); }
.rail-price { margin-top: 4px; font-size: 25px; font-weight: 600; letter-spacing: -.02em; }
.rail-go { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 500; color: var(--on-photo);
           border-bottom: 1px solid rgba(248,249,249,.35); padding-bottom: 2px; }

/* ---------------------------------------------------------------- empty legs en liste
   Format de sa capture : une ligne par vol, date, route, appareil, passagers, prix. */
.legs-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip { font: inherit; font-size: 13px; font-weight: 500; padding: 9px 18px; border-radius: 999px; cursor: pointer;
        border: 1px solid var(--line); background: transparent; color: var(--muted); }
.chip.is-on { background: rgba(248, 249, 249, .12); color: var(--ink); border-color: rgba(248, 249, 249, .3); }

.legrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.legrows li { display: grid; grid-template-columns: 108px minmax(0, 1fr) 168px 54px 118px 40px; gap: 20px;
              align-items: center; padding: 16px 20px; border: 1px solid var(--line); border-radius: 8px;
              background: rgba(248, 249, 249, .022); }
.legrows li:hover { border-color: rgba(248, 249, 249, .28); background: rgba(248, 249, 249, .05); }
.lr-date { font-size: 13px; font-weight: 300; color: var(--muted); font-variant-numeric: tabular-nums; }
.lr-route b { font-size: 15px; font-weight: 600; letter-spacing: .03em; }
.lr-route .ar { margin: 0 6px; color: var(--muted); }
.lr-route em { display: block; font-style: normal; font-size: 12px; font-weight: 300; color: var(--muted); margin-top: 3px; }
.lr-craft { font-size: 13px; font-weight: 300; color: var(--muted); }
.lr-pax { font-size: 13px; font-weight: 300; color: var(--muted); text-align: right; }
.lr-price { font-size: 18px; font-weight: 600; letter-spacing: -.01em; text-align: right; font-variant-numeric: tabular-nums; }
.lr-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
         border: 1px solid var(--line); color: var(--muted); justify-self: end; }
.legrows li:hover .lr-go { color: var(--ink); border-color: rgba(248, 249, 249, .4); }

@media (max-width: 1080px) { .rails { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .popular-head { grid-template-columns: 1fr; gap: 16px; }
  .legrows li { grid-template-columns: 1fr auto; gap: 8px 16px; }
  .lr-date { order: -1; } .lr-craft, .lr-pax { display: none; }
}
@media (max-width: 620px) { .rails { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- journal
   Format de sa capture : cartes avec visuel, date, titre, lien de lecture. */
.journal { padding: 20px var(--pad) 90px; }
.journal-head { display: grid; grid-template-columns: minmax(0, 26ch) minmax(0, 56ch); gap: 48px; margin-bottom: 32px; }
.journal-head h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 600; letter-spacing: -.022em; line-height: 1.05; }
.journal-head p { color: var(--muted); font-weight: 300; font-size: 14px; }

.posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.post { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px;
        overflow: hidden; background: rgba(248, 249, 249, .022); }
.post:hover { border-color: rgba(248, 249, 249, .28); }
.post-shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.post-shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.5) contrast(1.04); }
.post:hover .post-shot img { filter: saturate(.72) contrast(1.04); }
.post time { display: block; padding: 18px 20px 0; font-size: 11px; font-weight: 400; letter-spacing: .12em;
             text-transform: uppercase; color: var(--muted); }
.post b { display: block; padding: 8px 20px 0; font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; }
.post-go { display: block; margin-top: auto; padding: 16px 20px 20px; font-size: 13px; font-weight: 500; color: var(--muted); }
.post:hover .post-go { color: var(--ink); }

/* ---------------------------------------------------------------- newsletter */
.news { padding: 0 var(--pad) 96px; display: grid; place-items: center; }
.news-card { width: 100%; max-width: 470px; padding: 40px 38px 36px; border: 1px solid var(--line);
             border-radius: 12px; background: var(--surface); display: grid; gap: 12px; text-align: center; }
.news-card h2 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.news-card > p { color: var(--muted); font-size: 13.5px; font-weight: 300; line-height: 1.6; margin-bottom: 10px; }
.news-card label { display: block; }
.news-card input { width: 100%; font: inherit; font-size: 14px; padding: 15px 18px; border-radius: 8px;
                   border: 1px solid var(--line); background: rgba(248, 249, 249, .04); color: var(--text); }
.news-card input::placeholder { color: var(--muted); font-weight: 300; letter-spacing: .04em; }
.news-go { margin-top: 6px; font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .04em; cursor: pointer;
           padding: 15px 18px; border-radius: 8px; border: 1px solid rgba(248, 249, 249, .28);
           background: rgba(248, 249, 249, .1); color: var(--ink); }
.news-go:hover { background: var(--on-photo); color: var(--v500); border-color: var(--on-photo); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 1080px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .journal-head { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 620px) { .posts { grid-template-columns: 1fr; } }