/* ============================================================
   CAP & COMPAGNIE — agence de voyage familiale
   Site de démonstration.
   Quatrième identité de l'écosystème : ciel, sable, corail.
   Formes arrondies, typographie généreuse — enfantin dans le
   ton, rigoureux dans la structure.
   ============================================================ */

:root{
  color-scheme:light;

  /* Palette brute */
  --ciel-050:#f2f9ff;
  --ciel-100:#e0f0fe;
  --ciel-200:#bfe1fc;
  --ciel-400:#4fb0ee;
  --ciel-600:#1c7fc4;
  --ciel-800:#12456b;
  --nuit-900:#0d2b42;
  --corail-400:#ff8a5c;
  --corail-500:#f96a35;
  --corail-600:#dd4f1c;
  --soleil-400:#ffc94a;
  --sable-100:#fdf3e3;
  --sable-200:#f6e3c8;
  --menthe-500:#2fb98a;

  /* Rôles */
  --fond:var(--ciel-050);
  --fond-creuse:#ffffff;
  --surface:#ffffff;
  --bordure:#d9e9f7;
  --bordure-forte:#b9d6ee;
  --texte:var(--nuit-900);
  --texte-doux:#4a6f8a;
  --accent:var(--corail-600);
  --accent-clair:var(--corail-500);
  --accent-contraste:#ffffff;
  --bleu:var(--ciel-600);

  --e1:4px; --e2:8px; --e3:16px; --e4:24px;
  --e5:40px; --e6:64px; --e7:96px; --e8:132px;

  --t-xs:.8125rem; --t-sm:.9375rem; --t-md:1.0625rem;
  --t-lg:1.1875rem; --t-xl:1.5rem;

  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-full:999px;
  --ombre:0 20px 46px -26px rgb(13 43 66 / .3);
  --ombre-douce:0 10px 26px -18px rgb(13 43 66 / .26);
  --transition:260ms cubic-bezier(.2,.8,.2,1);
  --rebond:520ms cubic-bezier(.34,1.56,.64,1);
  --conteneur:1180px;

  --font-titre:'Fredoka','Trebuchet MS',system-ui,sans-serif;
  --font-texte:'Nunito Sans','Segoe UI',system-ui,sans-serif;
}

/* ---------------- Reset ---------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-texte);font-size:var(--t-md);line-height:1.65;
  color:var(--texte);background:var(--fond);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--accent);color:var(--accent-contraste)}
:where(section,[id]){scroll-margin-top:96px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------------- Layout ---------------- */
.conteneur{width:100%;max-width:var(--conteneur);margin-inline:auto;padding-inline:var(--e4)}
@media (max-width:600px){.conteneur{padding-inline:var(--e3)}}
.section{padding-block:var(--e7)}
@media (max-width:768px){.section{padding-block:var(--e6)}}
.creuse{background:var(--fond-creuse)}

.skip{
  position:absolute;left:var(--e3);top:-100px;z-index:300;
  background:var(--accent);color:var(--accent-contraste);
  padding:var(--e2) var(--e3);border-radius:var(--r-sm);transition:top var(--transition);
}
.skip:focus,.skip:focus-visible{top:var(--e3)}

/* ---------------- Typographie ---------------- */
.titre-geant{
  font-family:var(--font-titre);font-weight:600;
  font-size:clamp(2.4rem,6.2vw,4.6rem);line-height:1.06;letter-spacing:-.02em;
  text-wrap:balance;
}
.titre-section{
  font-family:var(--font-titre);font-weight:600;
  font-size:clamp(1.8rem,4.2vw,2.8rem);line-height:1.12;letter-spacing:-.018em;
  text-wrap:balance;
}
.surtitre{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-titre);font-weight:500;font-size:var(--t-sm);
  color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-radius:var(--r-full);padding:6px 15px;margin-bottom:var(--e3);
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){ .surtitre{background:#ffece4} }
.chapo{color:var(--texte-doux);max-width:56ch;font-size:var(--t-lg);text-wrap:pretty}
.doux{color:var(--texte-doux)}

/* ---------------- Boutons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px var(--e5);border-radius:var(--r-full);
  font-family:var(--font-titre);font-weight:500;font-size:var(--t-md);
  transition:transform var(--rebond),background var(--transition),color var(--transition),border-color var(--transition),box-shadow var(--transition);
}
.btn:active{transform:scale(.96)}
.btn--plein{background:var(--accent);color:var(--accent-contraste);box-shadow:0 12px 26px -12px var(--accent)}
.btn--plein:hover{background:var(--accent-clair);transform:translateY(-3px)}
.btn--vide{border:2px solid var(--bordure-forte);color:var(--texte)}
.btn--vide:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}
.btn--bleu{background:var(--bleu);color:#fff;box-shadow:0 12px 26px -12px var(--bleu)}
.btn--bleu:hover{transform:translateY(-3px)}

/* ============================================================
   LE DÉCOLLAGE
   Une séquence entièrement en CSS : chaque couche a son propre
   retard. Aucun calcul en JavaScript, donc rien qui saccade.
   ============================================================ */
/* ============================================================
   LE VOL — la scène pilotée au défilement

   La section fait plusieurs hauteurs d'écran ; la scène, elle,
   reste collée pendant toute la traversée. C'est ce décalage qui
   permet au défilement de piloter l'appareil sans que la page se
   sente bloquée.
   ============================================================ */
.decol{
  position:relative;
  height:300vh;              /* la course : trois écrans de défilement */
  margin-bottom:var(--e7);
  /* PAS d'overflow ici : le moindre « hidden » sur un ancêtre fait de
     lui le conteneur de défilement du sticky, qui cesse alors de
     coller à l'écran. Le rognage se fait sur la scène elle-même. */
  overflow:visible;
}
.decol__scene{
  position:sticky;top:0;
  height:100vh;height:100svh;
  overflow:hidden;
  --train:1; --altitude:0; --sol:0; --roulage:0; --sillage:0;
  /* Deux repères géométriques partagés par le décor ET l'appareil : c'est
     ce qui garantit que les roues touchent la piste sur tous les écrans.
     --envergure  : la largeur de l'avion (son SVG fait 1240 x 470) ;
     --piste      : la LIGNE DE CONTACT, au-dessus du bas de la scène ;
     --bitume     : l'épaisseur de la bande de piste, centrée sur cette ligne. */
  --envergure:min(880px,74vw);
  --piste:20%;
  --bitume:56px;
}

/* --- Le décor --- */
.decol__decor{position:absolute;inset:0}
.decol__ciel{
  position:absolute;inset:0;
  background:linear-gradient(#bfe1fc 0%, #e0f0fe 52%, #fdf3e3 100%);
}
/* Le ciel d'altitude se révèle par-dessus, à mesure qu'on monte. */
.decol__altitude{
  position:absolute;inset:0;opacity:var(--altitude);
  background:linear-gradient(#0d2b42 0%, #1c7fc4 46%, #4fb0ee 100%);
}
.decol__sol{
  position:absolute;left:-4%;right:-4%;bottom:0;height:calc(var(--piste) + 8%);
  background:linear-gradient(#8fc98a,#6aab6a);
  transform:translate3d(0, calc((1 - var(--sol)) * 0px + var(--altitude) * 46vh), 0);
}
.decol__bitume{
  position:absolute;left:-4%;right:-4%;
  bottom:calc(var(--piste) - var(--bitume) / 2);height:var(--bitume);
  background:#3d4650;overflow:hidden;
  transform:translate3d(0, calc(var(--altitude) * 52vh), 0);
}
.decol__marques{
  /* Débordement à droite : la bande glisse de plus de 1000 px vers la
     gauche ; sans cette marge elle laissait la moitié droite de la piste
     nue en fin de roulage. */
  position:absolute;inset:0 -1180px 0 0;
  background:repeating-linear-gradient(90deg,#f4f7fa 0 58px,transparent 58px 148px);
  background-size:206px 100%;
  /* les marques défilent avec la vitesse de roulage */
  transform:translate3d(calc(var(--roulage) * -1030px),0,0);
  top:calc(50% - 3px);height:6px;
}
.decol__nuages{position:absolute;inset:0;pointer-events:none}
.decol__nuage{
  position:absolute;color:#fff;opacity:.92;width:170px;
  /* Les nuages descendent quand l'appareil monte. La course était de
     120 vh : tous sortaient du cadre et le ciel d'altitude se retrouvait
     vide. À 78 vh, ceux du bas restent visibles sous l'avion — c'est ce
     qui donne la sensation de hauteur — pendant que ceux placés
     au-dessus du cadre entrent au fur et à mesure de la montée. */
  transform:translate3d(0, calc(var(--altitude) * 78vh), 0);
}
.decol__nuage:nth-child(1){top:14%;left:8%;width:150px}
.decol__nuage:nth-child(2){top:30%;left:62%;width:210px}
.decol__nuage:nth-child(3){top:9%;left:41%;width:118px}
.decol__nuage:nth-child(4){top:48%;left:20%;width:180px}
/* Ceux-ci commencent hors cadre, en haut : ils ne se montrent qu'en vol. */
.decol__nuage:nth-child(5){top:-32%;left:70%;width:240px;opacity:.8}
.decol__nuage:nth-child(6){top:-58%;left:14%;width:190px;opacity:.7}
.decol__nuage:nth-child(7){top:-14%;left:36%;width:140px;opacity:.85}
.decol__nuage svg{width:100%;height:auto;display:block}

/* --- L'appareil --- */
.decol__avion{
  position:absolute;left:2%;
  width:var(--envergure);
  /* Le SVG mesure 1240 x 470 et la ligne des roues tombe à y=330, soit
     70,2 % de la hauteur. En plaçant l'origine des transformations sur
     cette ligne, l'agrandissement ne décolle plus l'avion du sol ; et le
     décalage ci-dessous (29,8 % de la hauteur de la boîte, donc
     0,298 x 0,379 = 0,113 de sa largeur) pose les roues sur le bitume. */
  bottom:calc(var(--piste) - var(--envergure) * .113);
  transform-origin:50% 70.2%;
  will-change:transform;
  filter:drop-shadow(0 24px 30px rgba(10,30,50,.34));
}
.decol__avion .jet{width:100%;height:auto;display:block;transform:scaleX(-1)}
/* le train se rétracte : --train passe de 1 à 0 */
.decol__scene .jet-train{
  opacity:var(--train);
  transform:translateY(calc((1 - var(--train)) * -14px)) scaleY(calc(.06 + var(--train) * .94));
  transform-origin:50% 62%;
}
/* la soufflante ne tourne qu'une fois en mouvement */
.is-envol .jet-fan{animation:vol-fan .5s linear infinite;transform-origin:512px 344px}
@keyframes vol-fan{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.is-envol .jet-feu--aile{animation:vol-feu 1.1s steps(1,end) infinite}
.is-envol .jet-feu--derive{animation:vol-feu 1.1s steps(1,end) .55s infinite}
@keyframes vol-feu{0%,42%{opacity:1}43%,100%{opacity:.12}}

.decol__trainee{
  position:absolute;left:0;bottom:calc(var(--piste) + 6px);height:5px;
  width:calc(var(--sillage) * 52vw);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85));
  border-radius:999px;opacity:calc(var(--sillage) * .9);
}

/* --- Le repère de vol --- */
.decol__jauge{
  position:absolute;left:50%;bottom:34px;translate:-50% 0;z-index:3;
  display:flex;align-items:center;gap:16px;
  width:min(560px,84vw);
  padding:12px 20px;border-radius:999px;
  background:rgb(255 255 255/.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 34px -18px rgb(13 43 66/.5);
  font-size:var(--t-xs);font-weight:600;color:var(--nuit-900);
}
.decol__ville{white-space:nowrap;letter-spacing:.02em}
.decol__trajet{
  position:relative;flex:1;height:3px;border-radius:999px;
  background:rgb(13 43 66/.16);
}
.decol__trace{
  position:absolute;inset:0;border-radius:999px;
  background:linear-gradient(90deg,var(--bleu),var(--accent));
  transform:scaleX(0);transform-origin:left;will-change:transform;
}
.decol__curseur{
  position:absolute;top:50%;left:0;
  translate:-50% -50%;
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:#fff;
  box-shadow:0 4px 12px -3px rgb(221 79 28/.6);
  will-change:left;
}
.decol__curseur svg{width:13px;height:13px;transform:scaleX(-1)}  /* il vole vers la droite, comme l'appareil */

/* --- La consigne, qui s'efface une fois le vol lancé --- */
.decol__consigne{
  position:absolute;left:50%;bottom:92px;translate:-50% 0;z-index:3;
  display:flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:999px;
  background:rgb(13 43 66/.72);color:#fff;
  font-size:var(--t-xs);font-weight:600;white-space:nowrap;
  transition:opacity .4s, transform .4s;
}
.decol__consigne svg{animation:vol-invite 1.9s ease-in-out infinite}
@keyframes vol-invite{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.is-envol .decol__consigne{opacity:0;transform:translateY(8px);pointer-events:none}

/* --- Sur téléphone : plus court, et la séquence se joue seule --- */
@media (max-width:820px), (pointer:coarse){
  .decol{height:120vh}
  .decol--auto{height:88vh}
  .decol--auto .decol__scene{position:relative;height:88vh}
  .decol__scene{--envergure:min(560px,86vw);--piste:23%;--bitume:40px}
  /* gap resserré = le curseur, à 100 %, chevauchait « Héraklion » */
  .decol__jauge{width:min(440px,92vw);gap:19px;padding:10px 12px;bottom:22px;font-size:.74rem}
  .decol__consigne{display:none}
  .decol__nuage:nth-child(2),.decol__nuage:nth-child(4),.decol__nuage:nth-child(6){display:none}
}

@media (prefers-reduced-motion: reduce){
  .decol{height:auto}
  .decol__scene{position:relative;height:78vh}
  .decol__consigne{display:none}
  /* Rien ne défile : un repère de progression n'aurait rien à indiquer. */
  .decol__jauge{display:none}
  .is-envol .jet-fan,.is-envol .jet-feu--aile,.is-envol .jet-feu--derive{animation:none}
  .decol__curseur,.decol__trace{transition:none}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding-block:var(--e7) var(--e8);overflow:hidden}
.hero__ciel{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(var(--ciel-100) 0%, var(--ciel-050) 46%, var(--fond) 100%);
}
/* Collines douces au pied du hero */
.hero__collines{position:absolute;left:0;right:0;bottom:0;z-index:-1;width:100%}
.hero__grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--e6);align-items:center}
@media (max-width:940px){.hero__grille{grid-template-columns:1fr;gap:var(--e5)}}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e5)}

/* Nuages qui dérivent lentement en fond de hero */
.nuage-fond{position:absolute;color:#fff;opacity:.75;z-index:-1;will-change:transform}
.nuage-fond:nth-of-type(1){top:12%;width:180px;animation:derive 46s linear infinite}
.nuage-fond:nth-of-type(2){top:32%;width:120px;animation:derive 62s linear infinite -18s}
.nuage-fond:nth-of-type(3){top:6%;width:230px;animation:derive 78s linear infinite -40s}
@keyframes derive{ from{ transform:translateX(-260px) } to{ transform:translateX(calc(100vw + 260px)) } }

/* Carte de vol : le petit avion qui suit une trajectoire */
.vol{
  background:var(--surface);border-radius:var(--r-lg);padding:var(--e5);
  box-shadow:var(--ombre);position:relative;overflow:hidden;
}
.vol__titre{font-family:var(--font-titre);font-weight:600;font-size:var(--t-lg);margin-bottom:var(--e4)}
.vol__trajet{position:relative;height:96px;margin-bottom:var(--e4)}
.vol__trajet svg{width:100%;height:100%;overflow:visible}
.vol__ligne{stroke:var(--bordure-forte);stroke-width:2.5;stroke-dasharray:7 7;fill:none}
.vol__avion{color:var(--accent);offset-rotate:auto}
.vol__villes{display:flex;justify-content:space-between;font-family:var(--font-titre);font-size:var(--t-sm)}
.vol__villes small{display:block;color:var(--texte-doux);font-family:var(--font-texte);font-size:var(--t-xs)}
.vol__prix{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3);
  border-top:2px dashed var(--bordure);padding-top:var(--e4);margin-top:var(--e4);
}
.vol__prix b{font-family:var(--font-titre);font-weight:600;font-size:1.9rem;color:var(--accent)}

/* ============================================================
   DESTINATIONS
   ============================================================ */
.filtres{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:var(--e5)}
.filtre{
  font-family:var(--font-titre);font-weight:400;font-size:var(--t-sm);
  padding:10px 20px;border:2px solid var(--bordure-forte);border-radius:var(--r-full);
  color:var(--texte-doux);transition:var(--transition);
  display:inline-flex;align-items:center;gap:7px;
}
.filtre:hover{border-color:var(--accent);color:var(--accent)}
.filtre[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

.destinations{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--e4)}
.destination{
  background:var(--surface);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--ombre-douce);display:flex;flex-direction:column;
  transition:transform var(--transition),box-shadow var(--transition),opacity .3s ease;
}
.destination:hover{transform:translateY(-7px);box-shadow:var(--ombre)}
.destination[hidden]{display:none}
.destination.is-masque{opacity:0;transform:scale(.96);pointer-events:none}

/* Le paysage : dessiné en SVG, il s'anime au survol */
.paysage{position:relative;aspect-ratio:16/10;overflow:hidden}
.paysage svg{width:100%;height:100%;display:block}
.paysage .soleil{transform-origin:center;transition:transform 1.4s cubic-bezier(.34,1.56,.64,1)}
.destination:hover .paysage .soleil{transform:translateY(-7px) scale(1.1)}
.paysage .flotte{transition:transform 1.6s ease}
.destination:hover .paysage .flotte{transform:translateX(14px)}
.paysage .oiseau{animation:vole 9s ease-in-out infinite}
.paysage .oiseau:nth-of-type(2){animation-delay:-3.4s}
@keyframes vole{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(26px,-9px)}
}

.destination__ruban{
  position:absolute;top:var(--e3);left:var(--e3);
  background:rgb(255 255 255 / .94);border-radius:var(--r-full);
  padding:6px 14px;font-family:var(--font-titre);font-size:var(--t-xs);
  display:inline-flex;align-items:center;gap:6px;box-shadow:var(--ombre-douce);
}
.destination__corps{padding:var(--e4);display:flex;flex-direction:column;gap:var(--e2);flex:1}
.destination__nom{font-family:var(--font-titre);font-weight:600;font-size:var(--t-xl);letter-spacing:-.015em;line-height:1.15}
.destination__pays{font-size:var(--t-sm);color:var(--texte-doux)}
.destination p{font-size:var(--t-sm);color:var(--texte-doux);flex:1}
.destination__bas{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  border-top:2px dashed var(--bordure);padding-top:var(--e3);margin-top:var(--e2);
}
.destination__prix{font-family:var(--font-titre);font-weight:600;font-size:var(--t-lg);color:var(--accent)}
.destination__prix small{display:block;font-family:var(--font-texte);font-weight:400;font-size:var(--t-xs);color:var(--texte-doux)}
.destination__duree{
  font-size:var(--t-xs);color:var(--texte-doux);display:inline-flex;align-items:center;gap:6px;
  background:var(--ciel-050);border-radius:var(--r-full);padding:6px 12px;
}

/* ============================================================
   POURQUOI NOUS · ÉTAPES
   ============================================================ */
.atouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--e4)}
.atout{
  background:var(--surface);border-radius:var(--r-lg);padding:var(--e5);
  display:grid;gap:var(--e3);align-content:start;box-shadow:var(--ombre-douce);
  transition:transform var(--transition);
}
.atout:hover{transform:translateY(-5px)}
.atout__icone{
  width:56px;height:56px;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--ciel-100);color:var(--bleu);
}
.atout:nth-child(2) .atout__icone{background:#ffece4;color:var(--accent)}
.atout:nth-child(3) .atout__icone{background:#e6f8f1;color:var(--menthe-500)}
.atout:nth-child(4) .atout__icone{background:#fff5dc;color:#c9930d}
.atout h3{font-family:var(--font-titre);font-weight:600;font-size:var(--t-lg)}
.atout p{font-size:var(--t-sm);color:var(--texte-doux)}

.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--e5);counter-reset:etape}
.etape{position:relative;padding-top:var(--e5)}
.etape::before{
  counter-increment:etape;content:counter(etape);
  position:absolute;top:0;left:0;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-family:var(--font-titre);font-weight:600;font-size:var(--t-lg);
}
.etape h3{font-family:var(--font-titre);font-weight:600;font-size:var(--t-lg);margin-bottom:var(--e2)}
.etape p{font-size:var(--t-sm);color:var(--texte-doux)}

/* ============================================================
   DEVIS
   ============================================================ */
.devis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--e6);align-items:start}
@media (max-width:900px){.devis{grid-template-columns:1fr;gap:var(--e5)}}
.formulaire{background:var(--surface);border-radius:var(--r-lg);padding:var(--e5);box-shadow:var(--ombre-douce);display:grid;gap:var(--e4)}
.groupe{display:grid;gap:var(--e2)}
.groupe > span{font-family:var(--font-titre);font-weight:500;font-size:var(--t-sm)}
.options{display:flex;flex-wrap:wrap;gap:8px}
.option{
  position:relative;font-size:var(--t-sm);
  border:2px solid var(--bordure-forte);border-radius:var(--r-full);
  padding:9px 17px;color:var(--texte-doux);cursor:pointer;transition:var(--transition);
  display:inline-flex;align-items:center;gap:7px;
}
.option:hover{border-color:var(--accent);color:var(--texte)}
.option input{position:absolute;opacity:0;pointer-events:none}
.option.is-choisi{background:var(--accent);border-color:var(--accent);color:#fff}
.option:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}

.compteurs{display:flex;flex-wrap:wrap;gap:var(--e4)}
.compteur{display:flex;align-items:center;gap:var(--e3);background:var(--ciel-050);border-radius:var(--r-full);padding:7px 9px 7px var(--e4)}
.compteur > span{font-size:var(--t-sm)}
.compteur__cmd{display:flex;align-items:center;gap:3px}
.compteur button{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);color:var(--texte-doux);font-size:1.15rem;line-height:1;
  transition:var(--transition);box-shadow:var(--ombre-douce);
}
.compteur button:hover:not(:disabled){background:var(--accent);color:#fff}
.compteur button:disabled{opacity:.35;cursor:not-allowed}
.compteur output{min-width:26px;text-align:center;font-family:var(--font-titre);font-weight:600;font-variant-numeric:tabular-nums}

.champ{display:grid;gap:6px}
.champ label{font-family:var(--font-titre);font-weight:500;font-size:var(--t-sm)}
.champ input,.champ textarea{
  font:inherit;font-size:var(--t-sm);color:var(--texte);
  background:var(--fond);border:2px solid var(--bordure);border-radius:var(--r-sm);
  padding:13px var(--e3);width:100%;transition:border-color var(--transition);
}
.champ input:focus,.champ textarea:focus{outline:none;border-color:var(--accent)}
.erreur{font-size:var(--t-xs);color:#c8341f;min-height:1.05em}
.form-etat{font-size:var(--t-sm)}
.form-etat[data-ok]{color:var(--menthe-500)}

/* Récapitulatif en forme de carte d'embarquement */
.billet{
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--ombre);
  position:sticky;top:110px;overflow:hidden;
}
@media (max-width:900px){.billet{position:static}}
.billet__haut{background:var(--bleu);color:#fff;padding:var(--e4) var(--e5)}
.billet__haut p{font-family:var(--font-titre);font-weight:600;font-size:var(--t-lg)}
.billet__haut small{opacity:.82;font-size:var(--t-xs)}
.billet__corps{padding:var(--e5);display:grid;gap:var(--e3)}
/* L'encoche du billet, comme un vrai coupon détachable */
.billet__perfo{
  height:22px;position:relative;
  background:repeating-linear-gradient(90deg, var(--bordure) 0 8px, transparent 8px 16px);
  background-size:16px 2px;background-position:center;background-repeat:repeat-x;
}
.billet__perfo::before,.billet__perfo::after{
  content:'';position:absolute;top:50%;width:22px;height:22px;border-radius:50%;
  background:var(--fond);transform:translateY(-50%);
}
.billet__perfo::before{left:-11px}
.billet__perfo::after{right:-11px}
.billet__ligne{display:flex;justify-content:space-between;gap:var(--e3);font-size:var(--t-sm)}
.billet__ligne dt{color:var(--texte-doux)}
.billet__ligne dd{font-family:var(--font-titre);font-weight:500;text-align:right}
.billet__total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e3);padding-top:var(--e3);border-top:2px solid var(--bordure)}
.billet__total b{font-family:var(--font-titre);font-weight:600;font-size:1.9rem;color:var(--accent);font-variant-numeric:tabular-nums}

/* ============================================================
   INFOS ET PIED DE PAGE
   ============================================================ */
.infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--e5)}
.info__titre{font-family:var(--font-titre);font-weight:600;font-size:var(--t-md);color:var(--accent);margin-bottom:var(--e2)}
.info p,.info a{font-size:var(--t-sm);color:var(--texte-doux);line-height:1.75}
.info a:hover{color:var(--accent)}

.footer{border-top:1px solid var(--bordure);padding-block:var(--e5);background:var(--fond-creuse)}
.footer__inner{display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);align-items:center;justify-content:space-between}
.footer small,.footer a{font-size:var(--t-xs);color:var(--texte-doux)}
.footer a:hover{color:var(--accent)}
.demo{
  border:2px solid var(--accent);border-radius:var(--r-md);background:var(--surface);
  padding:var(--e4);margin-bottom:var(--e4);
  font-size:var(--t-sm);color:var(--texte-doux);display:flex;gap:var(--e3);align-items:flex-start;
}
.demo svg{color:var(--accent);flex:none;margin-top:2px}
.demo b{color:var(--texte)}

/* ============================================================
   MOUVEMENT
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .nuage-fond,.paysage .oiseau{animation:none}
}

/* ============================================================
   AU DOIGT — cibles portées à 44 px
   ============================================================ */
@media (pointer: coarse), (max-width: 900px){
  .burger{width:44px;height:44px}
  .filtre{min-height:44px;display:inline-flex;align-items:center}
  .nav a,.footer a,.btn{min-height:44px}
  .nav a,.footer a{display:flex;align-items:center}
  .footer nav{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4)}

  /* Les compteurs de voyageurs : 34 px, c'est un bouton qu'on
     rate une fois sur trois. */
  .compteur button,.nombre button,[data-pas]{
    width:48px;height:48px;font-size:1.25rem;
  }
  .compteur,.nombre{gap:var(--e2)}
}

@media (pointer: coarse), (max-width: 900px){
  /* Le logo est un lien de retour à l'accueil : il mérite 44 px. */
  .logo{min-height:44px;display:inline-flex;align-items:center}
  .skip{min-height:44px;display:inline-flex;align-items:center}
  /* Les liens EN PLEINE PHRASE gardent leur taille : les gonfler
     disloquerait le paragraphe, et la règle d'accessibilité les
     dispense justement pour cette raison. */
}

@media (pointer: coarse), (max-width: 900px){
  /* Un numéro de téléphone sur un mobile, c'est LE geste du site :
     il ne peut pas faire 16 px de haut. */
  a[href^="tel:"],a[href^="mailto:"]{
    min-height:44px;display:inline-flex;align-items:center;
  }
}

/* ---- La carte se soulève en passant au centre de l'écran ---- */
@media (pointer: coarse){
  /* La transformation est posée en JavaScript, image par image :
     pas de transition ici, elle lutterait contre le calcul. */
  .anime-au-doigt{will-change:transform}
}

@media (max-width:420px){
  /* Le panneau de navigation dépassait de 2 px sur les plus
     petits écrans : sa bordure s'ajoutait à sa largeur pleine. */
  .nav{max-width:100vw;box-sizing:border-box}
}

@media (max-width:420px){
  /* La carte d'embarquement gardait une largeur minimale héritée
     de la grille : elle dépassait de 2 px du conteneur. */
  .formulaire,.billet,.billet__haut,.billet__corps,.billet__perfo{
    max-width:100%;min-width:0;
  }
  .formulaire{overflow-x:hidden}
}

/* ============================================================
   NE PAS PEINDRE CE QUI EST HORS DE LÉCRAN

   Sur une page longue, le navigateur calcule la mise en page et
   peint des sections que personne ne regarde. « content-visibility »
   lui dit de sauter tout ce travail tant que la section napproche
   pas — cest le levier le plus efficace sur ce genre de page, et
   il ne change rien à lapparence.

   La taille estimée est indispensable : sans elle, la barre de
   défilement sauterait à mesure que les sections se révèlent.
   ============================================================ */
main > section{
  content-visibility:auto;
  /* Estimation calée sur la hauteur MÉDIANE réellement
     mesurée. Trop basse, la barre s'allonge en descendant ;
     trop haute, elle se rétracte. Les deux se voient, et les
     sections d'un téléphone font le double de celles d'un
     écran : d'où deux valeurs. */
  contain-intrinsic-size:auto 1700px;
}
@media (min-width:900px){
  main > section{contain-intrinsic-size:auto 1075px}
}
/* La première section est visible demblée : lexclure évite un
   passage inutile au chargement, celui qui compte le plus. */
main > section:first-of-type{content-visibility:visible}

/* La scène du vol est EXCLUE de cette optimisation : « content-visibility »
   impose un confinement de taille, ce qui casse « position:sticky » et
   remplace la hauteur réelle de la section par l'estimation. La scène
   ne restait plus collée et la course se faisait sur 1700 px imaginaires. */
main > section#vol{content-visibility:visible;contain:none}

/* Chaque carte se contient elle-même : ce qui change à lintérieur
   ne peut plus déclencher un recalcul de toute la page. */
.projet,.produit,.destination,.presta,.plat,.engagement,.info,.film,.formule,.carte-franchise,.etape{
  contain:layout paint style;
}


/* ============================================================
   REPÈRES DE NAVIGATION
   ============================================================ */
.lecture-jauge{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:120;
  pointer-events:none;background:transparent;
}
.lecture-jauge i{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb,var(--accent) 55%, var(--texte)));
  will-change:transform;
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .lecture-jauge i{background:var(--accent)}
}

.haut-page{
  position:fixed;right:18px;bottom:18px;z-index:110;
  width:48px;height:48px;display:grid;place-items:center;
  border:1px solid var(--trait-fort, var(--trait));border-radius:50%;
  background:var(--surface);color:var(--texte);cursor:pointer;
  box-shadow:0 10px 26px -12px rgb(0 0 0/.45);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);
  transition:opacity .28s, transform .28s, visibility .28s, background .2s;
}
.haut-page.is-visible{opacity:1;visibility:visible;transform:none}
.haut-page:hover{background:var(--accent);color:var(--accent-contraste);border-color:var(--accent)}
.haut-page svg{width:20px;height:20px}
/* le repère de chapitre du portfolio occupe déjà ce coin */
.haut-page{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
@media (max-width:600px){ .haut-page{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))} }

/* La section en cours, dans le menu */
[data-menu] a[aria-current="true"]{color:var(--accent)}
[data-menu] a[aria-current="true"]::after{
  content:'';display:block;height:2px;border-radius:2px;
  background:var(--accent);margin-top:3px;
}

@media (prefers-reduced-motion: reduce){
  .haut-page{transition:opacity .01s, visibility .01s}
  .lecture-jauge i{transition:none}
}