/* ============================================================
   DEKAEL — maquette de design
   Thème CLAIR : fond blanc, écriture bleue, photos naturelles.

   RÈGLE DE COULEUR
   · Le BLANC est le fond. Aucun aplat sombre nulle part.
   · Le BLEU écrit : tout le texte, du titre à la mention légale.
   · L'ORANGE ne sert qu'au survol et à l'état actif. Rien n'est
     orange au repos.
   · Les voiles posés sur les photos sont BLANCS et partiels : ils
     éclaircissent la zone qui reçoit le texte bleu, et s'effacent
     ailleurs pour laisser l'image dans ses couleurs d'origine.
   ============================================================ */

:root{
  color-scheme: light;

  /* ------------------------------------------------------------------
     Le bleu est la couleur de l'écriture, l'orange celle du survol.
     L'orange n'apparaît donc jamais tant que la souris ne bouge pas :
     c'est ce qui en fait un signal, l'œil comprend immédiatement que
     l'élément réagit. Sur mobile, où il n'y a pas de survol, il ne
     reste visible que sur les états actifs (filtre choisi, question
     ouverte).
     ------------------------------------------------------------------ */

  /* fonds — blancs et bleus très pâles */
  --ink:        #ffffff;
  --ink-2:      #f5f9fe;
  --panel:      #f8fbff;
  --panel-2:    #e9f1fc;
  --line:       rgba(30,110,208,.20);
  --line-soft:  rgba(30,110,208,.10);

  /* Texte, entièrement en bleu.
     Les nuances sont volontairement foncées : le bleu vif (#3d9bff)
     n'atteint que 2,9:1 de contraste sur blanc, très en dessous du
     seuil lisible de 4,5:1. Il reste donc réservé aux aplats et aux
     très gros titres, jamais au texte courant. */
  --snow:       #123a6b;   /* texte principal   — 9,7:1 sur blanc */
  --frost:      #3d6491;   /* texte secondaire  — 5,8:1 */
  --frost-dim:  #61809f;   /* mentions légères  — 4,0:1 */

  /* accents */
  --blue:       #1e6ed0;
  --blue-deep:  #0f4c9b;
  --blue-bright:#3d9bff;
  --orange:     #f97316;   /* aplats */
  --orange-hot: #c2410c;   /* orange écrit sur blanc — 5,2:1 */
  --amber:      #f59e0b;
  /* Orange d'écriture SUR PHOTO. Volontairement très saturé et un cran
     plus clair que --orange : sur une image, le contraste ne vient pas
     d'un fond uni mais de la différence de teinte, et l'orange est la
     couleur complémentaire du bleu du ciel et de la neige. */
  --hot:        #ff7a1a;

  /* mesures */
  --maxw: 1600px;
  --gut: clamp(20px, 5vw, 64px);
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;

  --display: "Bahnschrift", "Archivo", "Arial Narrow", "Haettenschweiler", Impact, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  /* Base de tous les `rem` du site. 106,25 % = 17 px sur un navigateur
     réglé par défaut : le texte courant était jugé trop petit sur la page
     blanche. En pourcentage et non en px, pour que le réglage de taille du
     navigateur continue de jouer. Aucun `rem` ne sert à une mesure de mise
     en page dans ce fichier : seul le texte grandit, la grille ne bouge pas. */
  font-size:106.25%;
  scroll-behavior:smooth;
  /* Reflet du doigt sur mobile : gris par défaut, donc étranger à la
     charte. On le repasse en bleu très pâle. */
  -webkit-tap-highlight-color:rgba(30,110,208,.14);
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--snow);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Le grain global a été retiré : sur fond sombre il donnait de la
   matière, sur blanc il ne fait que salir la page. */

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* Supprime le retard de 300 ms que le navigateur garde au cas où la
   tape serait le premier temps d'un double-tap de zoom. */
a,button,label,input,select,textarea,summary{ touch-action:manipulation; }

:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }

/* ---------- deux utilitaires d'accessibilité ----------
   .sr-only : le texte disparaît de l'écran mais reste dans l'arbre
   d'accessibilité. Sert aux libellés d'icônes — un aria-label ferait
   le même travail, mais il REMPLACE le texte visible, ce qui casse la
   commande vocale dès que les deux ne disent pas la même chose. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
/* Lien d'évitement : premier élément focalisable de chaque page, il
   saute la barre de navigation. Invisible tant qu'il n'a pas le focus. */
.skip{
  position:fixed; top:8px; left:8px; z-index:1100;
  transform:translateY(-160%);
  padding:12px 20px; border-radius:100px;
  background:var(--blue-deep); color:#fff;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; font-size:.8rem;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.skip:focus{ transform:none; }

/* La barre du haut est fixe : sans cette réserve, une ancre pose la
   section juste sous elle et son titre passe dessous. */
:where(section,main)[id]{ scroll-margin-top:96px; }

/* CALAGE À GAUCHE. Le bloc était centré (`margin-inline:auto`) : sur un
   grand écran, tout le texte se retrouvait au milieu, alors que le titre
   du hero, lui, part de la gouttière gauche — les deux ne s'alignaient
   jamais. Le bloc est donc collé à gauche, comme le hero. Le `max-width`
   ne sert plus qu'à borner la longueur des lignes vers la droite.

   max() : sur un téléphone à encoche tenu en paysage, la gouttière ne
   doit pas descendre sous la zone sûre, sinon le texte passe sous
   l'arrondi de l'écran. */
.wrap{
  width:100%; max-width:var(--maxw); margin-inline:0;
  padding-left:max(var(--gut), env(safe-area-inset-left));
  padding-right:max(var(--gut), env(safe-area-inset-right));
}
/* La barre du haut fait exception : elle doit tenir d'un bord à l'autre,
   sinon la pastille Connexion s'arrête au milieu de l'écran. Le logo,
   lui, reste sur la même gouttière que les titres. */
.nav .wrap{ max-width:none; }

/* ---------- typographie ---------- */
.display{
  font-family:var(--display);
  font-weight:700;
  font-stretch:condensed;
  text-transform:uppercase;
  line-height:1;
  letter-spacing:-.01em;
  margin:0;
}
/* le vh dans le clamp borne le titre sur les écrans bas (portables ~800 px),
   sinon le bloc dépasse la fenêtre et le bouton passe sous la ligne de flottaison */
.h1{ font-size:clamp(2.6rem, min(9.5vw, 13vh), 8rem); }
.h2{ font-size:clamp(2.2rem, 6vw, 4.4rem); }
.h3{ font-size:clamp(1.4rem, 2.6vw, 2rem); }
/* Équilibre les lignes d'un titre : plus de dernier mot tout seul.
   Le titre du hero en est exclu — il est découpé en lettres, et sa
   largeur est déjà bornée à 12ch. */
.h2,.h3,.dest-intro h3,.duo-card h2,.duo-card h3{ text-wrap:balance; }

.eyebrow{
  font-family:var(--display); font-stretch:condensed;
  text-transform:uppercase; letter-spacing:.22em;
  font-size:.78rem; color:var(--frost);
  display:flex; align-items:center; gap:12px;
}
/* Le filet de l'œil-de-bœuf se déploie de la gauche quand la section
   apparaît. `scaleX` seulement : la largeur reste réservée, donc le
   texte ne bouge pas d'un pixel pendant le trait. */
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--blue); flex:none;
}
.eyebrow.rv::before{
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s cubic-bezier(.2,.8,.2,1) .15s;
}
.eyebrow.rv.in::before{ transform:scaleX(1); }
.lede{ color:var(--frost); font-size:clamp(1.02rem,1.4vw,1.2rem); max-width:56ch; text-wrap:pretty; }
@media (max-width:520px){ .eyebrow{ font-size:.68rem; letter-spacing:.16em; } }

.grad{
  background:linear-gradient(100deg,#7cc0ff,var(--blue) 45%,var(--blue-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.outline{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(30,110,208,.38);
}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:100px;
  font-family:var(--display); font-stretch:condensed;
  text-transform:uppercase; letter-spacing:.08em; font-size:.95rem;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s, color .25s, box-shadow .25s;
}
.btn:hover{ transform:translateY(-2px); }
/* Règle générale du site : bleu au repos, orange au survol. */
.btn-primary{
  background:linear-gradient(100deg,var(--blue),var(--blue-deep));
  color:#fff; font-weight:700;
  box-shadow:0 8px 24px -10px rgba(30,110,208,.5);
}
.btn-primary:hover{
  background:linear-gradient(100deg,var(--orange),var(--orange-hot));
  box-shadow:0 14px 32px -10px rgba(194,65,12,.5);
}
.btn-ghost{ border-color:var(--line); color:var(--snow); background:transparent; }
.btn-ghost:hover{
  border-color:var(--orange-hot); color:var(--orange-hot); background:rgba(249,115,22,.08);
}
.btn-sm{ padding:10px 18px; font-size:.82rem; }
/* icône dans un bouton : elle suit la couleur du libellé */
.btn svg{ width:17px; height:17px; flex:none; }
.btn-sm svg{ width:15px; height:15px; }

/* ============================================================
   NAV
   ============================================================ */
.progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:1000;
  background:linear-gradient(90deg,#7cc0ff,var(--blue),var(--blue-deep));
  pointer-events:none;
}
/* La barre est opaque dès le départ : le hero met une photo à droite,
   et des liens bleus transparents passant par-dessus seraient illisibles. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  transition:box-shadow .3s, padding .3s;
  background:var(--ink);
  border-bottom:1px solid var(--line-soft);
  padding-block:18px;
  /* encoche : en paysage, la barre ne descend pas sous l'arrondi */
  padding-top:max(18px, env(safe-area-inset-top));
}
.nav.stuck{
  padding-block:10px;
  padding-top:max(10px, env(safe-area-inset-top));
  box-shadow:0 6px 24px -14px rgba(10,40,80,.4);
}
/* La barre rétrécit au défilement, ce qui change sa hauteur — donc un
   recalcul de mise en page à chaque image. Il ne sort pas de la barre :
   elle est en `position:fixed`, hors du flux, et aucune page ne se cale
   sur sa hauteur (les marges hautes sont écrites en dur).
   `contain` l'enferme explicitement, mais seulement au-dessus de 820 px :
   en dessous, la barre contient le panneau du menu, lui aussi en
   `position:fixed`, et `contain:layout` en ferait son bloc de référence —
   le panneau ne couvrirait plus l'écran. */
@media (min-width:821px){ .nav{ contain:layout style; } }
.nav-in{ display:flex; align-items:center; gap:28px; }
/* LE CERVIN EST LE A DE DEKAEL — 8 octobre 2026. Après plusieurs essais
   (nom à côté, puis sous la montagne), l'utilisateur a retenu « la piste
   A » : le dessin du Cervin remplace la lettre A, posé sur la ligne de
   base des lettres, sommet qui dépasse un peu leur hauteur. Le SVG vit
   DANS `.brand-name`, entre « DEK » et « EL » ; il se mesure en `em`,
   donc suit la taille du nom, dans la barre comme au pied de page.
   `vertical-align:baseline` pose le bas de sa boîte — le pied du Cervin,
   le viewBox étant recadré au ras du dessin — sur la ligne de base. */
.brand{ display:flex; align-items:center; margin-right:auto; }
.brand svg{
  display:inline-block; width:1.25em; height:.9em; vertical-align:.04em;
  margin:-.2em 0 0 -.02em; overflow:visible;
  /* Le pied du dessin (trait compris) descend 1,1 unité sous le bas du
     viewBox : `.04em` le remonte sur la ligne de base des lettres —
     signalé « plus bas que les lettres » le 10 octobre 2026. */
  /* Une ombre courte vers le bas, « pour avoir l'effet relief ». */
  filter:drop-shadow(0 1.5px 1.2px rgba(10,40,80,.35));
}
.pied .brand svg{ filter:drop-shadow(0 1.5px 1.5px rgba(0,0,0,.5)); }
.brand-name{
  font-family:var(--display); font-stretch:condensed;
  text-transform:uppercase; letter-spacing:.05em; font-size:1.6rem; font-weight:700;
  /* Interligne serré : la barre reste à 75 px, les bandeaux photo de
     transport et matériel sont calés sur 76. */
  line-height:1; white-space:nowrap;
  /* LE NOM EN DÉGRADÉ, DE L'ORANGE AU BLEU — demandé le 8 octobre 2026.
     Peint dans les lettres (`background-clip:text`) ; d'où
     `background-image` et JAMAIS le raccourci `background`, qui remettrait
     le découpage à zéro. Le Cervin, lui, garde ses propres couleurs.
     Orange au repos : entorse voulue, comme les skis du logo D. */
  /* 11 octobre 2026 : EL en bleu clair (piste C), partout — barre, pied de
     page, logo Instagram. Avant : orange → bleu nuit. */
  background-image:linear-gradient(100deg,#ea580c 0%,#f97316 22%,#6cb2ff 64%,#4a98f5 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.nav-links{ display:flex; gap:30px; align-items:center; }
.nav-links a{
  font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--frost); position:relative; padding-block:4px;
  font-family:var(--display); font-stretch:condensed;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--orange); transition:width .3s;
}
.nav-links a:hover{ color:var(--orange-hot); }
.nav-links a:hover::after{ width:100%; }

/* ---------- raccourcis en icône ---------- */
.nav-icons{ display:flex; align-items:center; gap:4px; margin-right:6px; }
.nav-ico{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 13px; border-radius:100px;
  border:1px solid transparent; color:var(--frost);
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; font-size:.72rem;
  transition:color .25s, border-color .25s, background .25s;
}
.nav-ico svg{ width:20px; height:20px; flex:none; }
.nav-ico:hover{
  color:var(--orange-hot); border-color:rgba(249,115,22,.45); background:rgba(249,115,22,.07);
}

.nav-actions{ display:flex; align-items:center; gap:8px; }

/* Connexion : pastille ronde, icône seule. Elle reste tout à droite,
   avant le bouton du menu, à toutes les tailles. */
.nav-login{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-left:10px; border-radius:50%;
  border:1px solid var(--line); color:var(--snow);
  transition:background .25s, border-color .25s, color .25s;
}
/* ---------- pastille du compte à rebours ----------
   Rangée à côté du logo tant que le hero est à l'écran, elle sort dès
   qu'il est passé. Largeur réservée par le contenu, pas d'à-coup. */
.nav-jour{
  display:inline-flex; align-items:center;
  margin-left:14px; padding:6px 13px; border-radius:100px;
  background:linear-gradient(100deg,var(--orange),var(--orange-hot));
  color:#fff; font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; font-size:.74rem;
  font-variant-numeric:tabular-nums;
  opacity:0; transform:translateY(-8px) scale(.9); pointer-events:none;
  transition:opacity .35s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav.loin .nav-jour{ opacity:1; transform:none; pointer-events:auto; }
@media (max-width:420px){ .nav-jour{ margin-left:8px; padding:5px 10px; font-size:.68rem; } }

.nav-login svg{ width:18px; height:18px; }
.nav-login:hover{ background:var(--orange); border-color:var(--orange); color:#fff; }

/* ---------- connecté : l'initiale et le petit menu ----------
   Posés par le JS seulement quand une session est ouverte. Le disque
   PLEIN dit « connecté » : la pastille vide reste celle du visiteur. */
.nav-login.est-connecte{
  background:var(--blue-deep); border-color:var(--blue-deep); color:#fff;
  font-family:var(--display); font-stretch:condensed; font-weight:700; font-size:1rem;
}
.nav-login.est-connecte:hover{ background:var(--orange); border-color:var(--orange); }
.nav-compte{ position:relative; }
/* Le menu tombe sous la pastille. Son rembourrage haut fait le pont :
   la souris descend de la pastille au menu sans le refermer. */
.nav-compte-menu{
  position:absolute; top:100%; right:0; z-index:5;
  padding-top:10px; min-width:270px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s, transform .2s, visibility 0s linear .2s;
}
.nav-compte:hover .nav-compte-menu,
.nav-compte:focus-within .nav-compte-menu{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .2s, transform .2s, visibility 0s;
}
.nav-compte-carte{
  padding:10px; border-radius:18px;
  background:var(--panel); border:1px solid var(--line);
  box-shadow:0 18px 40px -18px rgba(18,58,107,.35);
}
.nav-compte-qui{ margin:4px 10px 8px; font-size:.82rem; color:var(--frost); }
.nav-compte-qui strong{ color:var(--snow); }
.nav-compte-liens{ display:grid; gap:2px; }
.nav-compte-lien{
  display:grid; align-content:center; gap:2px; min-height:44px;
  padding:8px 10px; border-radius:10px;
  font-size:.92rem; font-weight:600; color:var(--snow); text-decoration:none;
}
.nav-compte-lien small{ font-size:.76rem; font-weight:400; color:var(--frost); }
.nav-compte-lien:hover,
.nav-compte-lien:focus-visible{ background:var(--panel-2); color:var(--orange-hot); }
.nav-compte-resa{ border:1px solid var(--line); }
@media (prefers-reduced-motion:reduce){
  .nav-compte-menu{ transform:none; transition:none; }
}

/* Écrans moyens : on garde les icônes, on retire leur libellé.
   Il est masqué, pas supprimé : en `display:none` il sortait aussi de
   l'arbre d'accessibilité, et le lien n'avait plus de nom du tout. */
@media (max-width:1120px){
  .nav-ico span{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
  .nav-ico{ padding:9px; }
}

/* 44 px : la plus petite cible tenable au doigt. Les trois traits, eux,
   gardent leurs 20 px de large. */
.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; }
.burger i{ display:block; width:20px; height:1.5px; background:var(--snow); position:relative; transition:.3s; }
.burger i::before,.burger i::after{
  content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--snow); transition:.3s;
}
.burger i::before{ top:-6px; } .burger i::after{ top:6px; }
.nav.open .burger i{ background:transparent; }
.nav.open .burger i::before{ transform:rotate(45deg); top:0; }
.nav.open .burger i::after{ transform:rotate(-45deg); top:0; }

.nav-cta-mobile{ display:none; }

/* Sous 820 px, les deux boutons ne tiennent plus à côté des icônes :
   ils descendent dans le panneau du menu. Les icônes, elles, restent
   dans la barre — ce sont les deux raccourcis les plus utiles. */
@media (max-width:820px){
  /* Téléphone : la barre ne garde que le logo et les trois traits. Les
     raccourcis et les deux boutons descendent tous dans le panneau. */
  .nav-actions,
  .nav-icons,
  .nav-compte,
  .nav-login{ display:none; }
  .burger{ display:flex; position:relative; z-index:2; }
  .nav-links{
    position:fixed; inset:0 0 auto; top:0; z-index:1;
    padding:96px max(var(--gut), env(safe-area-inset-right)) 40px
                 max(var(--gut), env(safe-area-inset-left));
    background:rgba(255,255,255,.97); backdrop-filter:blur(20px);
    flex-direction:column; align-items:flex-start; gap:18px;
    transform:translateY(-102%);
    border-bottom:1px solid var(--line-soft);
    /* le panneau ne doit pas entraîner la page derrière lui quand on
       arrive au bout de sa propre liste */
    overscroll-behavior:contain;
    /* Panneau fermé = panneau invisible AU CLAVIER aussi. Sans
       `visibility`, il est seulement remonté hors de l'écran : ses liens
       restent dans l'ordre de tabulation, et le focus part se promener
       dans un menu que personne ne voit. La visibilité ne change qu'une
       fois le panneau remonté, d'où le retard. */
    visibility:hidden;
    transition:transform .45s cubic-bezier(.2,.8,.2,1), visibility 0s linear .45s;
  }
  .nav.open .nav-links{
    transform:translateY(0);
    visibility:visible;
    transition:transform .45s cubic-bezier(.2,.8,.2,1), visibility 0s;
  }
  .nav-links a{ font-size:1.6rem; }
  /* les liens entrent l'un après l'autre, une fois le panneau descendu */
  .nav-links a{
    opacity:0; transform:translateY(-10px);
    transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), color .25s;
  }
  .nav.open .nav-links a{ opacity:1; transform:none; }
  .nav.open .nav-links a:nth-child(1){ transition-delay:.18s; }
  .nav.open .nav-links a:nth-child(2){ transition-delay:.25s; }
  .nav.open .nav-links a:nth-child(3){ transition-delay:.32s; }
  .nav.open .nav-links a:nth-child(4){ transition-delay:.39s; }
  /* la pastille passerait sous le panneau du menu et s'y verrait en
     transparence : elle s'efface le temps que le menu est ouvert */
  .nav.open .nav-jour{ opacity:0; pointer-events:none; }
  /* le logo et le bouton du menu doivent rester au-dessus du panneau */
  .nav.open .brand,
  .nav.open .nav-icons,
  .nav.open .nav-login{ position:relative; z-index:2; }
  /* `.nav-links a` l'emporterait sur `.btn-primary` et rendrait le
     libellé gris sur fond clair : on force la couleur ici. */
  .nav-links a.nav-cta-mobile{
    display:inline-flex; width:100%; margin-top:4px; font-size:1rem;
  }
  .nav-links a.btn-primary.nav-cta-mobile,
  .nav-links a.btn-primary.nav-cta-mobile:hover{ color:#fff; }
  .nav-links a.btn-ghost.nav-cta-mobile{ color:var(--snow); }
  .nav-links a.btn-ghost.nav-cta-mobile:hover{ color:var(--orange-hot); }
  .nav-links a.nav-cta-mobile::after{ display:none; }
}
/* TÉLÉPHONE CONNECTÉ — 7 octobre 2026 : « une petite boule avec ta
   lettre pour savoir que tu es connecté ». L'initiale revient dans la
   barre, juste avant les trois traits. Le petit menu, lui, ne s'ouvre
   pas (pas de survol au doigt) : ses liens sont dans le panneau, et la
   boule mène à « Mon compte ». */
@media (max-width:820px){
  /* Une boule de plus dans la barre : l'écart entre les pièces passe de
     28 à 12 px, sinon les trois traits sortaient de l'écran sur
     l'accueil, où la pastille J− prend déjà sa place. */
  .nav .wrap:has(.nav-compte){ gap:12px; }
  .nav-compte{ display:flex; align-items:center; margin-left:auto; }
  .nav-compte .nav-login.est-connecte{
    display:inline-flex; width:34px; height:34px; margin-left:0;
    position:relative; z-index:2;
  }
  .nav-compte-menu{ display:none; }
}
@media (max-width:359px){
  .nav .wrap:has(.nav-compte) .nav-jour{ display:none; }
}
/* au-dessus de 820 px, le panneau mobile et son contenu n'existent pas */
@media (min-width:821px){ .nav-links{ display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{ background:var(--ink); }

/* ---------- parallaxe en couches ---------- */
.px{
  position:relative; height:100svh; min-height:540px;
  overflow:hidden; background:#0a1f3c;
}
.px-layer{ position:absolute; left:0; width:100%; will-change:transform; }
/* la photo déborde en hauteur : sans marge, son déplacement
   découvrirait un bord vide en bas du cadre */
.px-photo{
  top:-14%; height:128%; object-fit:cover; object-position:center 42%;
}
/* La photo du hero part très légèrement agrandie et se pose en 1,8 s.
   Le mouvement passe par la propriété `scale`, PAS par `transform` : le
   JS de la parallaxe écrit déjà un `translate3d` dans le transform de ce
   calque, les deux se marcheraient dessus. `scale` est une propriété
   séparée, le navigateur compose les deux. */
@keyframes hero-pose{ from{ scale:1.07; } to{ scale:1; } }
.px-photo{ animation:hero-pose 1.8s cubic-bezier(.2,.8,.2,1) both; }

.px-titlewrap{
  top:0; height:100%; z-index:2;
  display:flex; flex-direction:column; justify-content:center;
  padding-left:max(var(--gut), env(safe-area-inset-left));
  padding-right:max(var(--gut), env(safe-area-inset-right));
  padding-top:72px;
}
/* Le nom du site, posé juste au-dessus de la destination. Les marges
   sont serrées volontairement : le bloc reste groupé dans la zone
   sombre de la photo, là où l'orange ressort. */
.px-brand{
  font-family:var(--display); font-stretch:condensed;
  text-transform:uppercase; letter-spacing:.34em; font-weight:700;
  font-size:1.15rem; color:var(--hot);
  margin:0 0 6px;
}
.px-kicker{
  font-family:var(--display); font-stretch:condensed;
  text-transform:uppercase; letter-spacing:.2em; font-size:.76rem;
  color:var(--hot); margin:0 0 10px;
  display:flex; align-items:center; gap:12px;
}
.px-kicker::before{ content:""; width:26px; height:2px; background:var(--hot); flex:none; }
.px-title{
  color:var(--hot);
  font-size:clamp(3.2rem, 17vw, 6rem);
  max-width:12ch;
}
.px-title .l{ display:block; }
.px-title .l > span{ display:block; }

/* ---------- titre découpé en lettres ----------
   Le JS enveloppe chaque mot dans .wd et chaque lettre dans .ch, puis
   pose --i, le rang de la lettre. Le retard se calcule à partir de ce
   rang : les lettres montent l'une après l'autre.
   Pas de masque en overflow:hidden — à cette taille il rognerait les
   accents. La lettre monte donc simplement en fondu.
   Le mot reste d'un bloc (.wd inline-block) : le retour à la ligne se
   fait entre les mots, jamais au milieu. */
.wd{ display:inline-block; }
.ch{
  display:inline-block;
  opacity:0; transform:translateY(.42em);
  transition:opacity .55s ease, transform .8s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i) * .045s + .1s);
}
.split.in .ch{ opacity:1; transform:none; }
/* remise à zéro sèche, quand le titre sort de l'écran */
.split.no-anim .ch{ transition:none; }

/* ---------- compte à rebours ---------- */
.px-count{
  display:grid; grid-template-columns:repeat(4,auto);
  justify-content:start; gap:0 16px;
  margin-top:22px;
}
.px-count b{
  display:block;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:2.1rem; line-height:1; color:var(--hot);
  /* chasse fixe : sinon la ligne tressaute à chaque seconde */
  font-variant-numeric:tabular-nums;
}
.px-count small{
  display:block; margin-top:3px;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--hot);
}

@media (min-width:901px){
  .px-brand{ font-size:1.35rem; letter-spacing:.42em; margin-bottom:14px; }
  .px-kicker{ font-size:.84rem; letter-spacing:.24em; margin-bottom:18px; }
  .px-kicker::before{ width:34px; }
  .px-title{ font-size:clamp(4rem, min(11vw, 17vh), 9rem); }
  .px-count{ gap:0 34px; margin-top:36px; }
  .px-count b{ font-size:3.4rem; }
  .px-count small{ font-size:.7rem; }
}
@media (max-width:900px){
  .px{ height:88svh; min-height:460px; }
  /* le bloc de titre est ancré en bas : au centre, il tombe sur le sujet
     de la photo */
  .px-titlewrap{ justify-content:flex-end; padding-bottom:11vh; }
}

/* pas d'overflow:hidden ici : à cette taille il rognerait les accents (Ô, É) */
.hero h1 .l{ display:block; }
.hero h1 .l > span{ display:block; }

/* Bouton d'inscription posé sur la photo. Il reste bleu : c'est le seul
   élément plein du hero, il se détache donc sans avoir besoin d'orange,
   et l'orange garde son rôle de signal au survol. */
.px-cta{ align-self:flex-start; margin-top:26px; }
@media (min-width:901px){ .px-cta{ margin-top:38px; padding:16px 34px; font-size:1rem; } }

.scroll-cue{
  position:absolute; right:var(--gut); bottom:clamp(40px,7vh,80px);
  writing-mode:vertical-rl; font-size:.7rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--frost-dim);
  display:flex; align-items:center; gap:14px;
}
.scroll-cue::after{
  content:""; width:1px; height:56px;
  background:linear-gradient(var(--blue),transparent);
  animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{ 0%,100%{ opacity:.3; transform:scaleY(.6); transform-origin:top; } 50%{ opacity:1; transform:scaleY(1); } }
@media (max-width:960px){ .scroll-cue{ display:none; } }
/* ============================================================
   BANDEAU DÉFILANT
   ============================================================ */
/* Écriture bleue sur blanc, et le même éclairage en biais que le bouton
   S'inscrire — mais tourné : la lumière vient du haut. Le bord supérieur
   reste blanc pur, le bas descend vers le blanc bleuté, ce qui détache la
   bande de la section destination. */
.marquee{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%,#f2f7fd 55%,var(--panel-2) 100%);
  color:var(--blue-deep);
  border-block:1px solid var(--line);
  padding-block:18px; overflow:hidden; white-space:nowrap;
  /* filet clair collé sous le bord haut : c'est lui qui donne l'impression
     d'une arête éclairée, comme sur le bouton */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.marquee ul{
  display:inline-flex; gap:38px; margin:0; padding:0; list-style:none;
  animation:slide 26s linear infinite;
}
.marquee li{
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.2em; font-size:1rem; color:var(--blue-deep);
  display:flex; align-items:center; gap:38px;
}
/* le losange de séparation est volontairement effacé : il rythme sans
   concurrencer les libellés */
.marquee li::after{ content:"◆"; color:rgba(30,110,208,.38); font-size:.5rem; }
@media (min-width:901px){
  .marquee{ padding-block:22px; }
  .marquee li{ font-size:1.1rem; letter-spacing:.24em; }
}
@keyframes slide{ to{ transform:translateX(-50%); } }
/* Le bandeau tourne sans jamais s'arrêter : ni l'arrêt au survol ni le
   bouton pause n'ont été gardés (demande de l'utilisateur, 20 août 2026).
   Seul `prefers-reduced-motion` le fige, et là il ne part pas du tout. */
@media (prefers-reduced-motion: reduce){ .marquee ul{ animation:none; } }

/* ============================================================
   SECTIONS génériques
   ============================================================ */
section{ position:relative; }
.pad{ padding-block:clamp(80px,12vh,150px); }

.sec-head{
  display:grid; grid-template-columns:1fr minmax(0,46ch);
  gap:clamp(24px,5vw,80px); align-items:end;
  margin-bottom:clamp(40px,6vh,72px);
}
@media (max-width:860px){ .sec-head{ grid-template-columns:1fr; align-items:start; } }
.sec-head .eyebrow{ margin-bottom:18px; }

/* bouton qui ferme une section sur fond blanc */
.sec-cta{ margin-top:clamp(24px,4vh,36px); }

/* ---------- bandeau photo qui ouvre une section ----------
   Une photo pleine largeur : voie lactée au-dessus des sommets enneigés.
   Elle coupe la page d'un seul coup — nuit contre blanc — et porte le
   titre de la section qui suit.

   ATTENTION, exception assumée à la règle « pas de texte sur les
   photos ». Cette règle vient de la neige : presque blanche, elle fait
   tomber l'orange à 2,5:1. Ici le ciel est noir et l'orange y ressort
   franchement. Aucun voile n'est posé — la photo reste intacte. */
.sep{
  position:relative;
  min-height:clamp(230px,30vw,420px);
  display:grid; align-items:center;
  overflow:hidden;
  border-block:1px solid var(--line);
  background:#0a1f3c;   /* le temps que la photo arrive */
}
/* La photo déborde en hauteur : le JS la déplace au défilement (parallaxe),
   et sans cette marge son mouvement découvrirait un bord vide. */
.sep-photo{
  position:absolute; left:0; right:0; top:-11%; z-index:0;
  width:100%; height:122%;
  /* 78 % : les sommets sont dans le bas de la photo. Plus haut, la bande
     ne montre que du ciel et la montagne disparaît. */
  object-fit:cover; object-position:center 78%;
}
.sep-in{
  position:relative; z-index:1;
  padding-block:clamp(30px,5vh,54px);
}
.sep-in .eyebrow{ margin-bottom:14px; }
.sep-h2{ color:var(--hot); }

/* le bloc de cartes suit la photo : peu d'air autour, la photo tient
   déjà lieu de titre et le blanc entre les deux paraissait vide */
.pad-court{ padding-block:clamp(24px,3.4vh,44px); }

.num{
  font-family:var(--display); font-stretch:condensed;
  font-size:.8rem; letter-spacing:.2em; color:var(--blue);
}

/* ============================================================
   LA DESTINATION
   Bloc volontairement petit : le titre de section reste le gros
   morceau, le texte tient dans une colonne étroite.
   ============================================================ */
/* Mobile : texte puis plan. À partir de 900 px, le plan passe à droite et
   prend toute la place restante — la colonne de texte est bornée, le plan
   grandit avec la fenêtre au lieu de laisser du blanc. */
.dest-grid{ display:grid; gap:clamp(28px,4vw,52px); margin-top:clamp(28px,5vh,44px); }
/* Les chiffres sont écrits plus grand à partir de 900 px, et la colonne
   qui les porte s'élargit d'autant. Le plan perd la différence à gauche :
   il se recentre dans la section au lieu d'être poussé contre le bord
   droit. Rien ne change sur téléphone, où les deux blocs sont empilés et
   où cette taille serait trop lourde. */
@media (min-width:900px){
  .dest-grid{
    grid-template-columns:minmax(300px,430px) minmax(0,1fr);
    gap:clamp(24px,2.6vw,38px);
    align-items:center;
  }
}
/* ATTENTION : ce bloc doit rester APRÈS les règles `.dest-key` et
   `.dest-lv` ci-dessous. À spécificité égale, c'est la dernière règle
   écrite qui gagne — placé plus haut, il était purement et simplement
   écrasé par les tailles de base. */

.dest-intro{ max-width:62ch; }
.dest-intro h3{
  font-size:clamp(1.7rem,4.4vw,2.4rem); margin:0 0 16px;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:12px;
}
.dest-intro h3 span{
  font-family:var(--body); font-weight:400; text-transform:uppercase;
  letter-spacing:.16em; font-size:.7rem; color:var(--frost-dim);
}
/* les chiffres, en ligne : trois lignes serrées plutôt qu'un tableau */
.dest-key{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--line-soft);
}
.dest-key li{
  display:grid; gap:4px;
  padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.dest-key b{
  font-family:var(--display); font-stretch:condensed; text-transform:uppercase;
  letter-spacing:.16em; font-size:.74rem; color:var(--frost-dim);
}
.dest-key span{ font-size:1.08rem; font-variant-numeric:tabular-nums; }

/* Barre de rapport entre les deux domaines. `--p` porte la part, de 0 à
   1 ; le remplissage est un scaleX, donc composé par le GPU, et la piste
   grise garde sa largeur quoi qu'il arrive. */
.dest-key .bar{
  display:block; height:3px; margin-top:10px; border-radius:3px;
  background:var(--panel-2); overflow:hidden;
}
.dest-key .bar i{
  display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-deep));
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .25s;
}
.rv.in .bar i{ transform:scaleX(var(--p)); }
/* Nombre qui monte. La largeur est réservée d'avance (ch de chasse fixe) :
   sinon la ligne s'allonge pendant le décompte et le texte qui suit danse. */
.cnt{ display:inline-block; text-align:right; font-variant-numeric:tabular-nums; }

/* Répartition Paradiski. Chaque niveau porte une pastille à sa couleur
   officielle ; le chiffre, lui, reste bleu — la couleur des pistes ne
   ferait pas 4,5:1 sur blanc, la pastille suffit à l'identifier. */
.dest-lv{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:1.02rem; }
.dest-lv em{ font-style:normal; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.dest-lv em::before{
  content:""; width:9px; height:9px; border-radius:50%; flex:none;
  background:currentColor; box-shadow:0 0 0 1px rgba(18,58,107,.25);
}
.dest-lv .lv-v,.dest-lv .lv-b,.dest-lv .lv-r,.dest-lv .lv-n{ color:var(--snow); }
.dest-lv .lv-v::before{ background:#2e9e5b; }
.dest-lv .lv-b::before{ background:var(--blue); }
.dest-lv .lv-r::before{ background:#d93025; }
.dest-lv .lv-n::before{ background:#1b2a3d; }

/* Les chiffres écrits plus grand, à partir de 900 px seulement. C'est
   ce qui élargit la colonne de gauche et recentre le plan.
   Ce bloc vient APRÈS les tailles de base : à spécificité égale, c'est
   le dernier qui gagne. Le remonter, et il ne sert plus à rien. */
@media (min-width:900px){
  .dest-intro h3{ font-size:clamp(1.9rem,4.4vw,2.7rem); }
  .dest-intro h3 span{ font-size:.78rem; letter-spacing:.18em; }
  .dest-key li{ padding:17px 0; }
  .dest-key b{ font-size:.82rem; }
  .dest-key span{ font-size:1.3rem; }
  /* `.dest-key .dest-lv` et non `.dest-lv` seul : la liste des niveaux
     est elle-même un `.dest-key span`, qui pèse plus lourd et lui
     imposerait sinon la taille de la ligne au-dessus. */
  .dest-key .dest-lv{ font-size:1.16rem; gap:10px 20px; }
  .dest-lv em::before{ width:10px; height:10px; }
}

/* ---------- vignette du plan des pistes ---------- */
.plan{ margin:0; }
.plan-open{
  display:block; width:100%; padding:0; position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-m); background:var(--ink-2);
  transition:border-color .3s, transform .3s cubic-bezier(.2,.8,.2,1);
}
.plan-open img{ width:100%; height:auto; display:block; }
.plan-open:hover{ border-color:rgba(249,115,22,.55); transform:translateY(-3px); }
.plan-hint{
  position:absolute; right:10px; bottom:10px;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:100px;
  background:rgba(255,255,255,.92); color:var(--snow);
  border:1px solid var(--line);
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; font-size:.68rem;
  transition:background .3s, color .3s, border-color .3s;
}
.plan-hint svg{ width:14px; height:14px; }
.plan-open:hover .plan-hint{ background:var(--orange); color:#fff; border-color:var(--orange); }
.plan figcaption{
  margin-top:10px;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; font-size:.68rem; color:var(--frost-dim);
}

/* La section 01 est cadrée plus large que le reste de la page : le titre
   part plus à gauche, et le plan s'arrête avant le bord droit.

   Le plan débordait auparavant jusqu'au bord de l'écran (marge droite
   négative). Retiré à la demande de l'utilisateur : il était collé au bord.
   La carte reste grande — c'est le cadre de la section qui s'élargit, des
   deux côtés à la fois. */
/* La gouttière gauche resserrée de cette seule section a été retirée le
   18 août 2026 : depuis que TOUTES les sections sont calées à gauche sur
   la gouttière du hero, un décalage de 32 px sur celle-ci seule se lisait
   comme un défaut. Le plan garde sa place — elle vient de la colonne de
   texte, bornée plus court, et de l'écart resserré. */
@media (min-width:900px){
  /* Plus de largeur maximale sur cette section : bornée à 1 760 px, elle
     s'arrêtait au milieu d'un grand écran et laissait toute la place
     perdue d'un seul côté, à droite du plan. Elle va maintenant d'un bord
     à l'autre. */
  #destination .wrap{ max-width:none; }
  /* Le plan ne s'étire pas pour autant : il est borné, et CENTRÉ dans la
     place qui lui reste. Le blanc se répartit des deux côtés au lieu de
     s'accumuler à droite. Sous 1 400 px de colonne — un écran d'ordinateur
     ordinaire — la borne ne joue pas et rien ne change.
     Cette règle doit rester APRÈS `.plan{ margin:0 }`, sinon la marge
     automatique est écrasée et le plan repart à gauche. */
  .plan{ max-width:1400px; margin-inline:auto; }
}

/* ============================================================
   LES ÉDITIONS D'AVANT — rubans de photos qui défilent
   Portage du composant React « image-auto-slider » de 21st.dev :
   boucle infinie, bords en fondu, agrandissement au survol. En CSS pur,
   sans React ni Tailwind.

   Une année = un ruban, du plus récent au plus ancien.
   ============================================================ */
/* ---------- la barre de choix ----------
   Elle ne porte plus que l'année : le bouton pause et la ligne « une
   photo s'ouvre en grand » ont été retirés à la demande de l'utilisateur.
   La boîte flex reste — elle sert de rangée, et accueillera ce qui
   viendra se poser à côté du sélecteur. */
.annee-barre{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:14px;
  margin-top:clamp(26px,4vh,40px); margin-bottom:16px;
  /* Indispensable, et pas évident : cette barre porte `.rv`, donc une
     animation d'apparition sur `opacity`. Une animation d'opacité en
     cours crée un CONTEXTE D'EMPILEMENT — la liste déroulante, même en
     `z-index:5`, restait enfermée dedans et passait sous les photos du
     ruban, qui viennent après elle dans le document. En posant le
     z-index sur la barre elle-même, c'est tout le bloc qui remonte. */
  position:relative; z-index:6;
}

/* Le choix de l'année : un bouton qui déroule la liste des précédentes.
   `position:relative` sert d'ancrage à cette liste. */
.annee-choix{ position:relative; }
.annee-btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:6px 4px; min-height:44px;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:clamp(1.9rem,4.6vw,2.6rem); line-height:1;
  color:var(--snow); font-variant-numeric:tabular-nums;
  transition:color .25s;
}
.annee-btn:hover{ color:var(--orange-hot); }
.annee-fleche{
  width:.6em; height:.6em; color:var(--blue);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), color .25s;
}
.annee-btn:hover .annee-fleche{ color:var(--orange-hot); }
/* la flèche se retourne quand la liste est ouverte */
.annee-btn[aria-expanded="true"] .annee-fleche{ transform:rotate(180deg); }

.annee-liste{
  position:absolute; z-index:5; top:calc(100% + 6px); left:0;
  list-style:none; margin:0; padding:6px;
  min-width:100%;
  background:var(--ink); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:0 24px 40px -24px rgba(10,40,80,.5);
  animation:annee-ouvre .2s cubic-bezier(.2,.8,.2,1);
}
.annee-liste[hidden]{ display:none; }
@keyframes annee-ouvre{ from{ opacity:0; transform:translateY(-8px); } }
@media (prefers-reduced-motion: reduce){
  .annee-liste{ animation:none; }
  .annee-fleche{ transition:none; }
}
.annee-liste button{
  display:block; width:100%; text-align:left;
  padding:11px 18px; border-radius:calc(var(--r-m) - 8px);
  min-height:44px;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:1.15rem; letter-spacing:.06em; color:var(--frost);
  font-variant-numeric:tabular-nums;
  transition:background .2s, color .2s;
}
.annee-liste button:hover{ background:var(--ink-2); color:var(--orange-hot); }
/* l'année déjà affichée : marquée, et non proposée comme une nouveauté */
.annee-liste button[aria-current="true"]{ color:var(--snow); background:var(--panel-2); }

/* Le ruban déborde la gouttière : il traverse tout l'écran.
   `mask` efface ses deux extrémités en fondu — c'est ce qui fait qu'une
   photo n'apparaît ni ne disparaît d'un coup au bord de l'écran. */
.ruban{
  overflow:hidden;
  mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* La piste est deux fois la liste : l'animation la décale de −50 %, soit
   exactement une copie, et la boucle se referme sans saut. Le JS répète
   d'abord la liste autant de fois qu'il faut pour couvrir l'écran. */
.ruban-piste{
  list-style:none; margin:0; padding:0;
  display:flex; width:max-content;
  animation:ruban 34s linear infinite;
}
/* L'écart est une marge À DROITE de chaque photo, pas un `gap` — 11 octobre
   2026, « faut que ça soit à l'infini en boucle ». Avec `gap`, la piste
   comptait un écart de moins que de photos : −50 % tombait un demi-écart
   trop court, et la boucle sautait de 9 px à chaque tour. */
.ruban-piste > li{ margin-right:clamp(10px,1.4vw,20px); }
@keyframes ruban{ to{ transform:translateX(-50%); } }

/* ---------- le mur de chalet ----------
   Demande de l'utilisateur : les photos doivent se lire comme des
   tableaux accrochés, et le mur doit couvrir TOUTE la section — pas
   seulement la bande des rubans.

   C'est le seul aplat sombre du site. La charte n'en veut nulle part
   ailleurs : ne pas l'étendre aux autres sections.

   Lambris sombre horizontal, photographié de face. Choisi sombre pour
   deux raisons : le texte y passe en clair sans peine, et les cadres
   ivoire des photos s'y détachent franchement. */
#souvenirs{
  background:#241811 url("https://images.unsplash.com/photo-1543751416-705d3e34d02a?auto=format&fit=crop&w=1800&q=68")
             center / cover no-repeat fixed;
  border-block:1px solid rgba(15,8,4,.6);
  box-shadow:inset 0 18px 30px -18px rgba(10,5,2,.85),
             inset 0 -18px 30px -18px rgba(10,5,2,.85);
}
/* `fixed` coûte cher sur téléphone — le navigateur repeint le fond à
   chaque image de défilement. On l'y repasse en défilement normal. */
@media (max-width:900px), (prefers-reduced-motion: reduce){
  #souvenirs{ background-attachment:scroll; }
}

/* Le texte de cette section passe en clair : sur ce bois, le bleu de la
   charte tombe sous le seuil lisible. L'orange aussi — il est trop
   proche de la teinte du bois. Le blanc cassé, lui, donne plus de 10:1. */
#souvenirs .h2,
#souvenirs .eyebrow,
#souvenirs .annee-btn{ color:#f6f1e8; }
#souvenirs .lede{ color:rgba(246,241,232,.82); }
#souvenirs .eyebrow::before{ background:var(--hot); }
#souvenirs .annee-btn:hover{ color:var(--hot); }
#souvenirs .annee-fleche{ color:var(--hot); }
/* le contour du clavier doit rester visible sur le bois */
#souvenirs :focus-visible{ outline-color:#f6f1e8; }

.ruban-bloc{ padding-block:clamp(10px,1.6vw,22px); }
/* un seul ruban à l'écran : les autres années attendent leur tour */
.ruban-bloc[hidden]{ display:none; }

/* Le cadre du tableau : un passe-partout ivoire, un filet sombre autour,
   et une ombre portée qui décolle la photo du mur. Coins presque vifs —
   un cadre ne s'arrondit pas. */
.ruban-piste li{
  flex:none;
  width:clamp(150px, 20vw, 300px);
  padding:clamp(7px,.7vw,11px);
  border-radius:3px;
  background:#f7f3ea;
  box-shadow:0 26px 34px -20px rgba(15,8,3,.75),
             0 0 0 1px rgba(45,25,12,.5);
}
/* Chaque photo est un vrai bouton : elle ouvre la photo en grand. Le
   recadrage du survol est coupé ICI, et non sur la vignette : sinon la
   photo grandirait par-dessus son passe-partout. */
.ruban-piste button{
  display:block; width:100%; padding:0;
  overflow:hidden; border-radius:1px;
  cursor:zoom-in;
}
/* Cadrage carré imposé : les photos d'un voyage arrivent dans tous les
   formats, et le ruban doit garder une hauteur constante. `cover`
   recadre, il ne déforme jamais. */
.ruban-piste img{
  width:100%; height:100%; aspect-ratio:1; object-fit:cover;
  transition:transform .35s ease;
}
/* Le ruban s'arrête sous la souris, et la photo visée avance.
   `focus-within` fait le même travail au clavier : dès qu'on entre dans
   le ruban par la tabulation, il s'immobilise. C'est ce qui remplace le
   bouton pause, retiré à la demande de l'utilisateur — il faut bien un
   moyen d'arrêter une animation qui tourne en boucle. */
.ruban:hover .ruban-piste,
.ruban:focus-within .ruban-piste{ animation-play-state:paused; }
.ruban-piste li:hover img{ transform:scale(1.05); }

@media (prefers-reduced-motion: reduce){
  /* Plus de défilement : le ruban devient une bande qu'on pousse au
     doigt. `width:max-content` reste, c'est le débordement qui glisse. */
  .ruban-piste{ animation:none; }
  .ruban{ overflow-x:auto; overscroll-behavior-x:contain; }
  .ruban-piste img{ transition:none; }
  .ruban-piste li:hover img{ transform:none; }
  .ruban-stop{ display:none; }
}

/* ============================================================
   SECTION EN PHOTO PLEINE LARGEUR
   Aucune couche par-dessus l'image : le texte est donc en orange, et
   ancré en bas à gauche, là où la photo est sombre.
   ============================================================ */
/* Deux rangées : le bandeau est collé EN HAUT et court sur toute la
   largeur, la photo occupe la place libre dessous — bandeau monté le
   4 octobre 2026 à la demande de l'utilisateur, il était en bas. Rien
   n'est écrit sur l'image sauf le bouton, qui est un aplat bleu. */
.shot{
  position:relative; overflow:hidden;
  min-height:clamp(420px,72svh,760px);
  display:grid; grid-template-rows:auto 1fr;
  background:var(--panel-2);
}
.shot-photo{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center 58%;
}
.shot-in{
  position:relative; z-index:1;
  align-self:center; padding-block:clamp(30px,5vh,60px);
}
.shot-cta{ font-size:1rem; padding:15px 32px; }

/* LE VIDE A CHANGÉ DE PLACE — 4 octobre 2026. Avec le bandeau monté en
   haut de #logement, l'air entre la destination et « Nos logements »
   faisait un grand blanc ; l'utilisateur l'a voulu entre la photo des
   chalets et « Les autres choses à savoir ». La destination perd donc
   l'essentiel de son rembourrage bas, et #logement le reprend en marge. */
#destination{ padding-bottom:clamp(32px,4vh,56px); }
#logement{ margin-bottom:0; }

/* le bandeau : fond plein, filet bleu en bas, côté photo */
.shot-band{
  position:relative; z-index:1;
  background:var(--ink); border-bottom:1px solid var(--line);
  padding-block:clamp(24px,3.6vh,38px);
}
.shot-band-in{ display:grid; gap:18px; }
.shot-band .eyebrow{ margin-bottom:12px; }
@media (min-width:900px){
  .shot-band-in{
    grid-template-columns:auto minmax(0,46ch);
    justify-content:space-between; align-items:end; gap:clamp(24px,5vw,72px);
  }
  .shot-band .lede{ padding-bottom:6px; }
}

/* variante orange de l'œil-de-bœuf, pour le texte posé sur photo */
.eyebrow-hot{ color:var(--hot); }
.eyebrow-hot::before{ background:var(--hot); }

/* ============================================================
   VISIONNEUSE PLEIN ÉCRAN
   Le zoom et le déplacement passent par un seul transform sur l'image :
   le navigateur le compose sur le GPU, donc rien ne saccade, même à
   4 000 px de large. La transition n'est active que pour les boutons
   (classe .anim), jamais pendant un geste.
   ============================================================ */
.lb{
  position:fixed; inset:0; z-index:2000;
  display:flex; flex-direction:column;
  background:#0b1a30;
  opacity:0; transition:opacity .25s ease;
  /* le geste qui arrive au bout du plan ne doit pas se propager à la
     page derrière, ni déclencher le « tirer pour recharger » */
  overscroll-behavior:contain;
  /* thème sombre local : les barres de défilement et les contrôles
     natifs de la visionneuse suivent son fond, pas celui du site */
  color-scheme:dark;
}
.lb.show{ opacity:1; }
.lb[hidden]{ display:none; }

.lb-bar{
  flex:none; display:flex; align-items:center; gap:14px;
  padding:12px clamp(12px,3vw,22px);
  padding-top:max(12px, env(safe-area-inset-top));
  padding-left:max(clamp(12px,3vw,22px), env(safe-area-inset-left));
  padding-right:max(clamp(12px,3vw,22px), env(safe-area-inset-right));
  background:rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.lb-title{
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; font-size:.76rem; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lb-tools{ margin-left:auto; display:flex; align-items:center; gap:8px; }
/* 44 px de haut : les trois boutons de zoom et la croix se prennent au
   doigt, sur un fond où l'on est déjà en train de pincer et de glisser. */
.lb-tools button{
  min-width:44px; height:44px; padding:0 14px; border-radius:100px;
  border:1px solid rgba(255,255,255,.28); color:#fff;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:1rem; line-height:1; transition:background .25s, border-color .25s;
}
.lb-tools button:hover{ background:var(--orange); border-color:var(--orange); }
.lb-fit{ font-size:.72rem !important; letter-spacing:.12em; text-transform:uppercase; }
.lb-pct{
  min-width:56px; text-align:center; color:#fff;
  font-family:var(--display); font-stretch:condensed; font-size:.8rem;
  font-variant-numeric:tabular-nums;
}

.lb-stage{
  flex:1; position:relative; overflow:hidden;
  /* indispensable : sans ça le navigateur mange le pincement et le glisser */
  touch-action:none; cursor:grab;
}
.lb-stage.drag{ cursor:grabbing; }
.lb-stage img{
  position:absolute; top:0; left:0;
  transform-origin:0 0; will-change:transform;
  max-width:none; user-select:none; -webkit-user-drag:none;
  opacity:0; transition:opacity .3s ease;
}
.lb-stage img.ready{ opacity:1; }
.lb-stage img.anim{ transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.lb-load{
  position:absolute; inset:0; display:grid; place-items:center; margin:0;
  color:rgba(255,255,255,.72); font-size:.9rem;
}

@media (max-width:560px){
  .lb-title{ display:none; }
  .lb-tools{ width:100%; }
}

/* ============================================================
   PHOTO AGRANDIE SUR PLACE
   Pour les photos des éditions passées. Elle grandit au-dessus du site,
   sans couvrir tout l'écran et sans fond sombre : la page reste visible
   autour. C'est l'ombre portée qui détache la photo, pas un voile — la
   charte les interdit.
   ============================================================ */
.zoom{
  position:fixed; inset:0; z-index:2000;
  display:grid; place-items:center;
  padding:clamp(16px,4vw,56px);
}
.zoom[hidden]{ display:none; }
/* Transparent, et c'est voulu : il ne sert qu'à recevoir le clic qui
   referme. Rien ne doit assombrir la page derrière. */
.zoom-fond{ position:absolute; inset:0; cursor:zoom-out; }

.zoom-cadre{
  position:relative; margin:0;
  border-radius:var(--r-l); overflow:hidden;
  border:1px solid var(--line); background:var(--ink);
  box-shadow:0 50px 90px -30px rgba(10,40,80,.55),
             0 0 0 6px rgba(255,255,255,.9);
  /* Pas d'animation d'apparition ici : c'est le JS qui la joue, en
     partant de la position exacte de la vignette cliquée. Une animation
     CSS posée en plus se battrait avec elle. */
  transform-origin:center;
}
/* Le cadre épouse la photo : c'est l'image qui porte les bornes, pas le
   cadre. Une photo debout et une photo couchée s'affichent donc chacune
   à sa forme, sans bande vide.

   Les deux bornes travaillent ensemble : la plus contraignante gagne.
   Une photo couchée s'arrête sur la largeur, une photo debout sur la
   hauteur. Rien n'est jamais déformé, `object-fit` est inutile.

   ATTENTION : ces deux bornes sont RECOPIÉES DANS LE JS, qui pose la
   taille exacte en pixels avant même que la photo n'arrive — sans quoi
   le cadre mesure deux pixels et l'animation d'ouverture part de
   travers. Si l'une bouge ici, changer l'autre là-bas. */
.zoom-cadre img{
  display:block;
  width:auto; height:auto;
  max-width:min(86vw, 900px); max-height:78svh;
}
.zoom-close{
  position:absolute; top:10px; right:10px;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.94); border:1px solid var(--line);
  color:var(--snow);
  transition:background .25s, border-color .25s, color .25s;
}
.zoom-close svg{ width:18px; height:18px; }
.zoom-close:hover{ background:var(--orange); border-color:var(--orange); color:#fff; }
/* La croix arrive après la photo : pendant le vol, elle n'aurait aucun
   sens, et elle grandirait avec le cadre. */
.zoom-croix-tard{ opacity:0; }

/* ============================================================
   PAGE DE PRÉ-INSCRIPTION (inscription.html)
   ============================================================ */
/* Retour, en haut de chaque page intérieure. La flèche recule au survol.
   Le rembourrage vertical porte la zone de touche à 44 px de haut — le
   minimum tenable au doigt. */
.back-link{
  display:inline-flex; align-items:center; gap:9px;
  padding-block:12px; margin-bottom:14px;
  font-family:var(--display); font-stretch:condensed;
  text-transform:uppercase; letter-spacing:.14em; font-size:.82rem;
  color:var(--frost); transition:color .25s;
}
.back-link svg{ width:16px; height:16px; flex:none; transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.back-link:hover{ color:var(--orange-hot); }
.back-link:hover svg{ transform:translateX(-4px); }
@media (prefers-reduced-motion: reduce){
  .back-link svg{ transition:none; }
  .back-link:hover svg{ transform:none; }
}

/* la nav est fixe : sans marge, le titre passerait dessous */
.page-form{ padding-top:calc(clamp(80px,12vh,150px) + 60px); }
.page-form h1{ margin:18px 0 20px; }
.page-form .lede{ margin:0 0 clamp(30px,5vh,44px); }

.signup-form{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  max-width:640px;
  border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(22px,4vw,32px);
  background:
    linear-gradient(160deg,var(--panel-2),var(--ink-2));
}
.field{ display:grid; gap:6px; min-width:0; }
.field-wide{ grid-column:1 / -1; }
/* Le libellé passe à `--frost` et non `--frost-dim`. Corrigé le
   2 septembre 2026 sur relevé du détecteur d'Impeccable : `--frost-dim`
   donne 4,0:1 sur le blanc — déjà juste — mais seulement **3,6:1** sur
   le panneau bleuté des formulaires, sous le seuil de 4,5:1. Or c'est le
   texte le plus petit de la page (.66rem) : c'est lui qui a le plus
   besoin de contraste, pas le moins. `--frost` donne 5,3:1 sur ce même
   panneau. */
.field label{
  font-family:var(--display); font-stretch:condensed;
  text-transform:uppercase; letter-spacing:.16em; font-size:.66rem; color:var(--frost);
}
/* Pas d'`outline:none` ici : la règle générale `:focus-visible` porte le
   contour du clavier, et cette règle-ci l'emportait sur elle (un
   sélecteur de classe pèse plus lourd qu'une pseudo-classe). Le champ
   restait donc sans contour au clavier, avec pour seul repère la
   bordure — trop discret. */
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--snow);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-s);
  padding:12px 14px; transition:border-color .25s, box-shadow .25s;
  /* 16 px minimum sur iOS, sinon Safari zoome sur le champ au focus */
  min-height:46px;
}
.field textarea{ resize:vertical; line-height:1.5; }
.field select{
  appearance:none; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--blue) 50%),linear-gradient(135deg,var(--blue) 50%,transparent 50%);
  background-position:calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--frost-dim); }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,110,208,.14);
}
.signup-form .btn{ grid-column:1 / -1; width:100%; margin-top:4px; }
/* Même correction que le libellé de champ : `--frost-dim` tombe à 3,6:1
   sur le panneau bleuté du formulaire. */
.form-note{ grid-column:1 / -1; margin:0; font-size:.74rem; color:var(--frost); }

/* E-mail refusé. La bordure orange ne suffit pas : elle ne dit pas ce
   qui ne va pas, et un lecteur d'écran ne la voit pas. Un message écrit
   accompagne donc le champ, annoncé par `aria-live` côté HTML. */
.signup-form.invalid input[type="email"]{ border-color:var(--orange-hot); }
.field-err{
  margin:0; font-size:.8rem; color:var(--orange-hot);
  display:flex; align-items:flex-start; gap:7px;
}
.field-err[hidden]{ display:none; }
.field-err svg{ width:15px; height:15px; flex:none; margin-top:3px; }

.form-done{
  margin:0; max-width:640px; font-size:1rem; color:var(--snow);
  border-left:3px solid var(--orange); padding-left:18px;
}

/* ============================================================
   CONNEXION / CRÉATION DE COMPTE
   (connexion.html, creer-compte.html)

   Portage natif du composant React « login-1 » (21st.dev) envoyé par
   l'utilisateur : carte à deux volets, halo qui suit le curseur, filet
   lumineux sur les champs au survol, éclat qui traverse le bouton.
   Ni React, ni Next.js, ni Tailwind.

   Le modèle est SOMBRE ; ici tout est repris en clair, selon la charte
   — fond blanc bleuté, écriture bleue, orange pour l'interaction. Les
   deux seules zones sombres du site restent la galerie et le pied de
   page.
   ============================================================ */
.cnx-carte{
  display:grid;
  max-width:1040px;
  border:1px solid var(--line); border-radius:var(--r-l);
  /* coupe le halo et la photo aux quatre coins */
  overflow:hidden;
  background:
    linear-gradient(160deg,var(--panel-2),var(--ink-2));
  box-shadow:0 30px 60px -42px rgba(10,40,80,.5);
}
.cnx-volet{ position:relative; overflow:hidden; }
/* le contenu passe AU-DESSUS du halo, qui vit au niveau 0 */
.cnx-in{ position:relative; z-index:1; padding:clamp(24px,6vw,44px); }
.cnx-in h1{ margin:14px 0 14px; }
.cnx-in .lede{ margin:0 0 26px; font-size:1.02rem; }

/* ---------- halo qui suit le curseur ----------
   Décor pur : `pointer-events:none`, et il n'apparaît qu'une fois posé
   par le JS. Le déplacement passe par la propriété `translate` — la
   marge négative centre le disque sur le point du curseur, et rien
   d'autre n'écrit dans son transform. */
.cnx-halo{
  position:absolute; z-index:0; top:0; left:0;
  width:420px; height:420px; margin:-210px 0 0 -210px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,
    rgba(30,110,208,.22), rgba(61,155,255,.12) 45%, transparent 70%);
  filter:blur(26px);
  opacity:0;
  transition:opacity .28s, translate .12s ease-out;
}
.cnx-volet.halo-on .cnx-halo{ opacity:1; }

/* ---------- champs ---------- */
.cnx-form{ display:grid; gap:14px; }
.cnx-champ{ position:relative; }
/* En bloc, sinon le champ garde sous lui l'espace d'une ligne de texte —
   sept pixels sur le `textarea` — et le filet du bas flotte dans le vide. */
.cnx-champ input,
.cnx-champ select,
.cnx-champ textarea{ display:block; }
/* place réservée à l'œil : sans elle, le texte passerait dessous. Le
   type du champ change au clic, la classe non — c'est elle qui porte la
   marge, pas le sélecteur `[type=password]`. */
.cnx-champ-oeil input{ padding-right:52px; }
/* champ refusé : la bordure passe à l'orange, en plus du message écrit
   sous lui et de l'attribut aria-invalid posé par le JS */
.cnx-form input.invalid{ border-color:var(--orange-hot); }

/* Filet lumineux du modèle : deux traits de 2 px, en haut et en bas du
   champ, dont la lueur suit le curseur. `--mx` est écrit par le JS ; la
   classe `.filet` n'est posée que sur un pointeur fin (souris), jamais
   au doigt. */
.cnx-champ::before,
.cnx-champ::after{
  content:""; position:absolute; left:0; right:0; height:2px; z-index:2;
  pointer-events:none; opacity:0; transition:opacity .2s;
  background:radial-gradient(30px 2px at var(--mx,50%) 50%,
    var(--orange) 0%, transparent 70%);
}
.cnx-champ::before{ top:0; }
.cnx-champ::after{ bottom:0; }
.cnx-champ.filet::before,
.cnx-champ.filet::after{ opacity:1; }

/* ---------- œil du mot de passe ----------
   44 px de zone de touche, comme partout ailleurs. */
.cnx-oeil{
  position:absolute; right:2px; top:50%; translate:0 -50%; z-index:3;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  color:var(--frost); background:none; border:0; border-radius:50%;
  transition:color .2s;
}
.cnx-oeil:hover{ color:var(--orange-hot); }
.cnx-oeil svg{ width:19px; height:19px; }
/* les deux icônes se remplacent selon l'état du bouton */
.cnx-oeil .ico-oeil-barre{ display:none; }
.cnx-oeil[aria-pressed="true"] .ico-oeil-barre{ display:block; }
.cnx-oeil[aria-pressed="true"] .ico-oeil{ display:none; }

/* ---------- liens et bouton ---------- */
.cnx-oubli{
  justify-self:start;
  display:inline-flex; align-items:center; min-height:44px;
  font-size:.82rem; color:var(--frost); text-decoration:none;
  transition:color .2s;
}
.cnx-oubli:hover{ color:var(--orange-hot); }
.cnx-form .btn{ width:100%; }

/* Éclat qui traverse le bouton au survol. La transition n'existe QUE
   pendant le survol : au départ de la souris, le trait revient d'un coup
   à gauche au lieu de repasser à l'envers. */
.cnx-btn{ position:relative; overflow:hidden; }
.cnx-eclat{
  position:absolute; top:0; bottom:0; left:0; width:34px;
  background:rgba(255,255,255,.3); pointer-events:none;
  transform:skew(-13deg) translateX(-300%);
}
.cnx-btn:hover .cnx-eclat{
  transition:transform .9s ease;
  transform:skew(-13deg) translateX(1200%);
}

/* L'erreur rendue par le service, au-dessus du bouton : un cran plus
   grande que celle d'un champ, elle concerne tout le formulaire. */
.cnx-err{ font-size:.88rem; }
.cnx-err a{ color:var(--blue-deep); font-weight:700; }
.cnx-err a:hover{ color:var(--orange-hot); }
.cnx-btn[disabled]{ cursor:progress; opacity:.75; }

/* Titre suivi directement du formulaire (chapô retiré le 3 octobre
   2026 sur connexion et création de compte) : un peu d'air entre les deux. */
.cnx-in h1 + .cnx-form{ margin-top:clamp(18px,2.4vh,28px); }

/* Mention RGPD courte, sous les formulaires qui gardent des données
   (création de compte, inscription). Le détail est sur confidentialite.html. */
.rgpd-note{ margin:14px 0 0; max-width:62ch; font-size:.8rem; line-height:1.5; color:var(--frost); }
.rgpd-note a{ color:var(--blue-deep); font-weight:600; }
.rgpd-note a:hover{ color:var(--orange-hot); }
.resa-form .rgpd-note{ margin:0; }

/* ---------- confidentialite.html ----------
   Sept blocs courts. En grand, ils se rangent en colonnes (`fr`) au
   lieu de faire une longue bande étroite à gauche ; chaque bloc garde
   des lignes lisibles. */
.conf{
  margin-top:clamp(22px,3vh,36px);
  display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));
  align-items:start;
}
.conf-bloc{
  padding:clamp(18px,2vw,26px); border-radius:18px;
  background:var(--panel); border:1px solid var(--line);
  font-size:.95rem; line-height:1.6; color:var(--snow);
}
.conf-bloc p, .conf-bloc ul{ margin:0; }
.conf-bloc p + p, .conf-bloc ul + p, .conf-bloc p + ul{ margin-top:10px; }
.conf-bloc ul{ padding-left:1.1em; display:grid; gap:8px; }
.conf-bloc a{ color:var(--blue-deep); font-weight:600; overflow-wrap:anywhere; }
.conf-bloc a:hover{ color:var(--orange-hot); }
.conf-t{
  margin:0 0 10px; font-family:var(--display); font-stretch:condensed;
  font-size:1.1rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}

/* Session ouverte, à la place du formulaire. */
.cnx-compte{ display:grid; gap:12px; justify-items:start; }
.cnx-compte[hidden], .cnx-form[hidden]{ display:none; }
.cnx-compte p{ margin:0; }
.cnx-compte-nom{ font-size:1.25rem; font-weight:700; color:var(--snow); }
.cnx-compte-mail{ font-size:.95rem; color:var(--frost); overflow-wrap:anywhere; }
.cnx-compte .btn{ margin-top:8px; }

/* Mes réservations : une carte par réservation, l'en-cours d'abord
   repérable par son pastille bleue et son bouton pour reprendre. */
.cnx-resas{ width:100%; margin-top:14px; display:grid; gap:12px; }
.cnx-resas-t{
  margin:0; font-size:.74rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--frost);
}
.cnx-resas-vide{ margin:0; font-size:.92rem; color:var(--frost); }
.cnx-resas-vide a{ color:var(--blue-deep); font-weight:600; }
.cnx-resas-vide a:hover{ color:var(--orange-hot); }
.cnx-resas-liste{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.cnx-resa{
  display:grid; gap:8px; justify-items:start;
  padding:16px 18px; border-radius:18px;
  background:var(--panel); border:1px solid var(--line);
}
.cnx-resa p{ margin:0; }
.cnx-resa-tete{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:.8rem; color:var(--frost); }
.cnx-resa-etat{
  padding:3px 10px; border-radius:10px; font-weight:700;
  background:var(--panel-2); color:var(--blue-deep);
}
.cnx-resa-titre{ font-weight:700; color:var(--snow); }
.cnx-resa-faits{
  margin:0; width:100%;
  display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:.86rem;
}
.cnx-resa-faits dt{ color:var(--frost); }
.cnx-resa-faits dd{ margin:0; color:var(--snow); overflow-wrap:anywhere; }
.cnx-resa .cnx-resa-lien{ margin-top:6px; width:auto; }

/* ============================================================
   VOTRE RÉSERVATION (ma-reservation.html)
   Le résumé complet, écrit par le JS. En grand : le séjour, le
   responsable et le total en colonne à gauche, les participants à
   droite — c'est la partie qui grandit avec le groupe. Colonnes en
   `fr` : en 2 560 px tout va d'une gouttière à l'autre.
   ============================================================ */
.mr-zone{ margin-top:clamp(18px,3vh,30px); display:grid; gap:clamp(16px,2vw,24px); justify-items:start; }
.mr-vide{ margin:0; font-size:1rem; color:var(--frost); }
.mr-vide a{ color:var(--blue-deep); font-weight:600; }
.mr-vide a:hover{ color:var(--orange-hot); }
.mr-etat{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.95rem; color:var(--frost); }
.mr{ width:100%; display:grid; gap:clamp(16px,2vw,24px); align-items:start; }
.mr-bloc{
  padding:clamp(18px,2vw,26px); border-radius:18px;
  background:var(--creme, var(--panel)); border:1px solid var(--line);
}
.mr-titre{
  margin:0 0 14px; font-family:var(--display); font-stretch:condensed;
  font-size:1.15rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--snow);
}
.mr-faits{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:.95rem; }
.mr-faits dt{ color:var(--frost); }
.mr-faits dd{ margin:0; color:var(--snow); overflow-wrap:anywhere; }
.mr-liste{
  list-style:none; margin:0; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.mr-carte{
  padding:16px 18px; border-radius:18px;
  background:var(--panel); border:1px solid var(--line);
}
.mr-nom{ margin:0 0 10px; font-weight:700; font-size:1.02rem; color:var(--snow); }
.mr-opts{ margin:8px 0 0; font-size:.9rem; color:var(--snow); }
.mr-note{ margin:10px 0 0; font-size:.85rem; color:var(--frost); }
@media (min-width:1000px){
  .mr{
    grid-template-columns:1fr 2fr;
    grid-template-areas:"sejour gens" "resp gens" "total gens";
  }
  .mr-sejour{ grid-area:sejour; }
  .mr-gens{ grid-area:gens; }
  .mr-resp{ grid-area:resp; }
  .mr-total{ grid-area:total; }
  /* La colonne de droite s'étire sur les trois rangées : sans cela, la
     dernière rangée de gauche s'allongerait pour suivre les participants. */
  .mr{ grid-template-rows:auto auto 1fr; }
}

/* Le commentaire et les documents : toute la largeur, sous le reste. */
.mr-com, .mr-docs{ grid-column:1 / -1; }
.mr-com-txt{ margin:0; font-size:.95rem; color:var(--snow); white-space:pre-line; overflow-wrap:anywhere; }
.mr-docs-l{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.mr-doc{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  padding:6px 14px; border-radius:10px; background:var(--panel); border:1px solid var(--line);
}
.mr-doc-b{
  min-height:44px; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-weight:600; color:var(--blue-deep); text-align:left;
  overflow-wrap:anywhere; text-decoration:underline; text-underline-offset:3px;
}
.mr-doc-b:hover{ color:var(--orange-hot); }
.mr-doc-t{ font-size:.82rem; color:var(--frost); }
.mr-doc-x{
  margin-left:auto; min-height:44px; padding:0 4px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:.85rem; color:var(--frost); text-decoration:underline;
}
.mr-doc-x:hover{ color:var(--orange-hot); }

/* Le statut posé par l'équipe. Pas d'orange au repos : validée en bleu
   plein, non validée en pointillé, en attente dans la pastille pâle. */
.cnx-resa-etat.est-validee{ background:var(--blue-deep); color:#fff; }
.cnx-resa-etat.est-refusee{ background:transparent; border:1px dashed var(--frost); color:var(--frost); }
.cnx-resa-etat.est-brouillon{ background:transparent; border:1px solid var(--line); color:var(--frost); }

/* Une option dont l'équipe a coupé la vente. */
.opt.est-indispo .opt-in{ border-style:dashed; opacity:.6; }

/* ============================================================
   ESPACE ADMIN (admin.html)
   Refait le 3 octobre 2026 — « c'est un peu brouillon ». Un outil de
   travail, donc un tableau de bord : des compteurs qui servent aussi
   de filtres, des listes qui se lisent comme des RELEVÉS (une ligne,
   un filet, des colonnes alignées sur un en-tête), et une commande de
   statut en trois positions. Tout tient dans des panneaux blancs posés
   sur le crème. Colonnes en `fr`. Rien d'orange au repos.
   ============================================================ */
.ad{ margin-top:clamp(18px,3vh,30px); }
.ad-etat .mr-vide a{ color:var(--blue-deep); font-weight:600; }

/* ---------- les onglets : une commande segmentée ---------- */
.ad-onglets{
  display:inline-flex; flex-wrap:wrap; gap:4px; padding:5px;
  margin-bottom:clamp(18px,2.6vh,28px);
  border-radius:100px; background:var(--panel); border:1px solid var(--line);
  box-shadow:0 30px 60px -50px rgba(10,40,80,.6);
}
.ad-onglet{
  min-height:44px; padding:0 24px; border-radius:100px; cursor:pointer;
  border:0; background:transparent; color:var(--frost);
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:.95rem; letter-spacing:.08em; text-transform:uppercase;
  transition:background .2s, color .2s;
}
.ad-onglet:hover{ color:var(--orange-hot); }
.ad-onglet[aria-selected="true"]{
  background:linear-gradient(100deg,var(--blue),var(--blue-deep)); color:#fff;
  box-shadow:0 8px 24px -10px rgba(30,110,208,.5);
}
.ad-panneau{ display:grid; gap:16px; }
.ad-panneau[hidden]{ display:none; }
.ad-msg{ margin:0; font-size:.9rem; color:var(--frost); }
.ad-msg:empty{ display:none; }
.ad-msg.est-err{ color:var(--orange-hot); }

/* ---------- les compteurs, qui sont aussi les filtres ---------- */
.ad-filtres{
  display:grid; gap:12px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:760px){ .ad-filtres{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.ad-stat{
  display:grid; gap:2px; align-content:start; text-align:left;
  min-height:96px; padding:16px 18px; border-radius:18px; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); color:var(--snow); font:inherit;
  box-shadow:0 30px 60px -50px rgba(10,40,80,.6);
  transition:border-color .2s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.ad-stat:hover{ border-color:var(--orange-hot); transform:translateY(-2px); }
.ad-stat-n{
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:clamp(1.9rem,2.6vw,2.6rem); line-height:1; font-variant-numeric:tabular-nums;
}
.ad-stat-l{ font-size:.82rem; color:var(--frost); }
.ad-stat[aria-pressed="true"]{
  border-color:var(--blue-deep); box-shadow:inset 0 0 0 1px var(--blue-deep), 0 30px 60px -50px rgba(10,40,80,.6);
}
.ad-stat[aria-pressed="true"] .ad-stat-n{ color:var(--blue-deep); }

/* ---------- les panneaux qui portent un relevé ---------- */
.ad-liste, .ad-comptes{
  list-style:none; margin:0; padding:0;
  border-radius:18px; background:var(--panel); border:1px solid var(--line);
  box-shadow:0 30px 60px -50px rgba(10,40,80,.6);
  overflow:hidden;
}
.ad-liste > li + li, .ad-comptes > li + li{ border-top:1px solid var(--line-soft); }
.ad-liste > .mr-vide, .ad-comptes > .mr-vide{ padding:22px; }

/* L'en-tête des colonnes : des libellés, rien de cliquable. Visible
   seulement là où les colonnes existent. */
.ad-entete{ display:none; }
.ad-col{
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--frost);
}

/* ---------- une réservation ---------- */
.ad-resa-tete{
  width:100%; min-height:64px; padding:14px 20px; border:0; background:none; cursor:pointer;
  font:inherit; color:var(--snow); text-align:left;
  display:grid; grid-template-columns:auto 1fr auto; gap:6px 14px; align-items:center;
  transition:background .2s;
}
.ad-resa-tete:hover{ background:rgba(30,110,208,.04); }
.ad-resa-tete:hover .ad-resa-qui{ color:var(--orange-hot); }
.ad-resa-n{ font-size:.85rem; font-weight:700; color:var(--frost); font-variant-numeric:tabular-nums; }
.ad-resa-qui{ font-weight:700; overflow-wrap:anywhere; }
.ad-resa-d, .ad-resa-nb, .ad-resa-tot{ font-size:.9rem; color:var(--frost); font-variant-numeric:tabular-nums; }
.ad-resa-tot{ color:var(--snow); font-weight:600; }
.ad-resa-tete .cnx-resa-etat{ justify-self:start; white-space:nowrap; }
/* Le chevron dit que la ligne s'ouvre, et dans quel sens. */
.ad-chev{ width:18px; height:18px; color:var(--frost); transition:transform .25s; justify-self:end; }
.ad-resa-tete[aria-expanded="true"] .ad-chev{ transform:rotate(180deg); }
.ad-resa-tete[aria-expanded="true"]{ background:rgba(30,110,208,.05); }

@media (min-width:1000px){
  .ad-entete{
    display:grid; grid-template-columns:.45fr 2fr 1.1fr .8fr 1.3fr 1.5fr 24px;
    gap:14px; padding:14px 20px 12px; border-bottom:1px solid var(--line);
  }
  .ad-resa-tete{ grid-template-columns:.45fr 2fr 1.1fr .8fr 1.3fr 1.5fr 24px; }
}
/* En colonne unique : numéro, nom et chevron sur la première ligne,
   le reste dessous. */
@media (max-width:999px){
  .ad-resa-tete{ grid-template-columns:auto 1fr auto; }
  .ad-resa-d, .ad-resa-nb, .ad-resa-tot, .ad-resa-tete .cnx-resa-etat{ grid-row:2; }
  .ad-resa-d{ grid-column:1 / 3; }
  .ad-resa-tete .cnx-resa-etat{ grid-column:3; justify-self:end; }
  .ad-resa-nb, .ad-resa-tot{ display:none; }
  .ad-chev{ grid-row:1; grid-column:3; }
}

.ad-resa-detail{
  padding:20px; display:grid; gap:16px;
  background:rgba(30,110,208,.03); border-top:1px solid var(--line-soft);
}
.ad-resa-detail[hidden]{ display:none; }
.ad-resume{ display:grid; gap:14px; }
.ad-resume .mr-etat{ display:none; }   /* le statut est déjà dans la commande */
.ad-resume .mr-bloc{ background:var(--panel); }

/* ---------- la commande de statut : trois positions ---------- */
.ad-statut{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.ad-statut-l{ font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--frost); }
.ad-seg{
  display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px;
  border-radius:100px; background:var(--panel); border:1px solid var(--line);
}
.ad-seg button{
  min-height:40px; padding:0 18px; border-radius:100px; border:0; cursor:pointer;
  background:transparent; color:var(--snow); font:inherit; font-size:.9rem; font-weight:600;
  transition:background .2s, color .2s;
}
.ad-seg button:hover{ color:var(--orange-hot); }
.ad-seg button[aria-pressed="true"]{ background:var(--blue-deep); color:#fff; cursor:default; }
.ad-seg button[aria-pressed="true"][data-st="refusee"]{ background:var(--frost); }
.ad-seg button:disabled:not([aria-pressed="true"]){ opacity:.5; cursor:progress; }

/* ---------- le dépôt de documents ---------- */
.ad-depot{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:14px;
  padding:14px; border-radius:10px; border:1px dashed var(--line);
}
.ad-lab{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--frost); }
.ad-depot .ad-lab{ flex:1 0 100%; }
.ad-depot input[type="file"]{ font:inherit; font-size:.9rem; color:var(--snow); max-width:100%; flex:1 1 220px; }

/* ---------- les tarifs ---------- */
.ad-tarifs{
  display:grid; gap:16px; align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
}
.ad-groupe{ background:var(--panel); box-shadow:0 30px 60px -50px rgba(10,40,80,.6); }
.ad-groupe-aide{ margin:-6px 0 14px; max-width:60ch; }
.ad-tarifs-l{ list-style:none; margin:0; padding:0; }
.ad-tarifs-l .ad-entete{
  display:grid; grid-template-columns:minmax(0,1fr) 128px 112px; gap:12px;
  padding:0 0 8px; border-bottom:1px solid var(--line);
}
.ad-tarif{
  display:grid; grid-template-columns:minmax(0,1fr) 128px 112px; gap:12px; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--line-soft);
}
.ad-tarif.est-off .ad-in{ color:var(--frost); background:transparent; border-style:dashed; }
.ad-champ{ display:grid; gap:4px; min-width:0; }
.ad-tarif .ad-lab{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ad-in{
  width:100%; min-height:44px; padding:0 12px; border-radius:10px;
  border:1px solid var(--line); background:#fff; color:var(--snow); font:inherit; font-size:1rem;
}
.ad-in:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
/* Le prix porte son « € » dedans, à droite. */
.ad-prix-w{ position:relative; }
.ad-prix-w .ad-in{ padding-right:28px; text-align:right; font-variant-numeric:tabular-nums; }
.ad-prix-w::after{ content:"€"; position:absolute; right:12px; top:50%; translate:0 -50%; color:var(--frost); pointer-events:none; }

/* L'interrupteur « Disponible » : une vraie case à cocher, peinte en
   glissière. Le clavier et le lecteur d'écran la lisent comme une case. */
.ad-dispo{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:.85rem; color:var(--frost); cursor:pointer; }
.ad-dispo input{
  appearance:none; -webkit-appearance:none; margin:0; flex:none; cursor:pointer;
  width:40px; height:24px; border-radius:100px; background:rgba(61,100,145,.3);
  position:relative; transition:background .2s;
}
.ad-dispo input::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 2px 4px rgba(10,40,80,.3); transition:transform .2s;
}
.ad-dispo input:checked{ background:var(--blue-deep); }
.ad-dispo input:checked::after{ transform:translateX(16px); }
.ad-dispo input:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

.ad-ajout{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 10px; align-items:end;
  margin-top:16px; padding-top:14px; border-top:1px dashed var(--line);
}
.ad-ajout .ad-lab{ grid-column:1 / -1; }

/* La barre d'enregistrement reste collée en bas de l'écran pendant
   qu'on fait défiler les tarifs : on n'oublie pas de sauver. */
.ad-barre{
  position:sticky; bottom:12px; z-index:3;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  padding:12px 14px; border-radius:100px;
  background:var(--panel); border:1px solid var(--line);
  box-shadow:0 18px 40px -22px rgba(10,40,80,.55);
  justify-self:start;
}
.ad-barre .ad-msg:empty{ display:none; }

@media (max-width:560px){
  .ad-tarifs-l .ad-entete{ display:none; }
  .ad-tarif{ grid-template-columns:minmax(0,1fr) 110px; }
  .ad-tarif .ad-dispo{ grid-column:1 / -1; }
  .ad-barre{ border-radius:18px; }
}

/* ---------- les comptes ---------- */
.ad-compte{
  display:grid; gap:6px 14px; align-items:center; padding:14px 20px;
  grid-template-columns:minmax(0,1fr);
}
.ad-compte-t{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:var(--snow); }
.ad-compte-t b{ font-weight:700; }
.ad-compte-mail{ font-size:.9rem; color:var(--frost); overflow-wrap:anywhere; }
.ad-compte-v{ font-size:.9rem; color:var(--snow); }
.ad-compte-v .ad-col{ display:inline; margin-right:6px; }
.ad-compte .ad-actions{ display:flex; flex-wrap:wrap; gap:4px 14px; }
.ad-compte .ad-msg{ grid-column:1 / -1; }
.ad-lien-b{
  min-height:44px; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:.88rem; color:var(--blue-deep); text-decoration:underline; text-underline-offset:3px;
}
.ad-lien-b:hover{ color:var(--orange-hot); }
.ad-suppr{
  min-height:44px; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:.88rem; color:var(--frost); text-decoration:underline; text-underline-offset:3px;
}
.ad-suppr:hover{ color:var(--orange-hot); }
.ad-suppr:disabled{ opacity:.5; cursor:default; }
/* Le bas d'une fiche de réservation : la suppression, à part du reste. */
.ad-resa-bas{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px;
  margin-top:clamp(14px,2vw,22px); padding-top:10px; border-top:1px solid var(--line);
}
/* « Modifier la réservation » — 11 octobre 2026. Un vrai bouton bleu :
   c'est l'action courante du bas de fiche, la suppression reste discrète. */
.ad-modif{
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:99px;
  font-size:.88rem; font-weight:600; color:#fff; text-decoration:none;
  background:var(--blue-deep); transition:background .25s;
}
.ad-modif:hover,
.ad-modif:focus-visible{ background:var(--orange-hot); }
/* Le prix d'un logement partagé — 12 octobre 2026. Encadré au-dessus du
   résumé, sur les seules réservations « Partagé ». */
.ad-partage{
  display:grid; gap:10px; margin:14px 0; padding:14px 16px; border-radius:10px;
  background:var(--panel); border:1px solid var(--line);
}
.ad-partage-t{ margin:0; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--frost); }
.ad-partage-etat{ margin:0; font-size:.98rem; font-weight:600; color:var(--snow); }
.ad-partage-l{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; }
.ad-partage-champ{ display:grid; gap:4px; flex:1 1 220px; min-width:0; }
.ad-partage-champ:nth-child(2){ flex:0 1 150px; }
.ad-partage-lab{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--frost); }
.ad-partage-sel,
.ad-partage-prix{
  width:100%; min-height:44px; padding:0 12px; border-radius:10px; border:1px solid var(--line);
  background:#fff; color:var(--snow); font:inherit; font-size:1rem;
}
.ad-partage-ok{ min-height:44px; }
.ad-partage-retire{
  min-height:44px; padding:0 6px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:.88rem; color:var(--frost); text-decoration:underline;
}
.ad-partage-retire:hover{ color:var(--orange-hot); }
.ad-partage-ok:disabled,
.ad-partage-retire:disabled{ opacity:.5; cursor:progress; }
.ad-partage-calc{ margin:0; font-size:.92rem; color:var(--frost); }
.ad-partage-calc:empty{ display:none; }
/* Le mode admin du parcours d'inscription : le message « enregistré ». */
.resa-modif-ok{
  margin:0 0 12px; padding:12px 16px; border-radius:10px;
  background:#e7f3ea; color:#1d5a2e; font-size:.95rem; line-height:1.5;
  box-shadow:inset 0 0 0 1px rgba(29,90,46,.2);
}
.resa-modif-ok a{ color:inherit; font-weight:600; }
@media (min-width:1000px){
  .ad-comptes .ad-entete{
    display:grid; grid-template-columns:2.2fr 1fr 1fr 1.1fr 1.2fr 2fr;
    gap:14px; padding:14px 20px 12px; border-bottom:1px solid var(--line);
  }
  .ad-compte{ grid-template-columns:2.2fr 1fr 1fr 1.1fr 1.2fr 2fr; }
  .ad-compte-v .ad-col{ display:none; }
  .ad-compte .ad-actions{ justify-content:flex-end; }
}

/* Les postes du récapitulatif de l'inscription. */
.resa-recap-postes{ margin-top:14px; }

.cnx-bas{ margin:22px 0 0; font-size:.9rem; color:var(--frost); }
.cnx-bas[hidden]{ display:none; }
.cnx-bas a{ color:var(--blue-deep); font-weight:600; }
.cnx-bas a:hover{ color:var(--orange-hot); }

/* ---------- volet photo ----------
   Absent sous 1 000 px : la carte n'est plus qu'un formulaire, en pleine
   largeur. Au-dessus, deux colonnes égales, et la photo prend toute la
   hauteur de la carte. */
.cnx-photo{ display:none; }
@media (min-width:1000px){
  .cnx-carte{ grid-template-columns:1fr 1fr; }
  .cnx-photo{ display:block; }
  .cnx-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  /* La pré-inscription porte six champs, dont quatre sur deux colonnes :
     son volet gauche est élargi, et la carte avec lui. Le volet photo
     garde environ 460 px. */
  .cnx-carte-large{ grid-template-columns:1.25fr .75fr; }
}
.cnx-carte-large{ max-width:1180px; }

/* Le formulaire de pré-inscription DANS la carte : il portait son propre
   cadre, son fond et sa marge — une boîte dans une boîte. La carte s'en
   charge maintenant ; lui ne garde que sa grille à deux colonnes. */
.cnx-in .signup-form{
  border:0; background:none; padding:0; max-width:none;
}
/* Sous 700 px d'écran, la photo est déjà partie et le volet occupe toute
   la largeur : deux colonnes de champs y deviennent trop étroites. Ils
   s'empilent. Au-dessus, le volet fait au moins 600 px et les tient. */
@media (max-width:700px){
  .cnx-in .signup-form{ grid-template-columns:1fr; }
}

/* Animations coupées : ni halo, ni filet, ni éclat. Les champs et le
   bouton gardent leur apparence, seul le mouvement disparaît. */
@media (prefers-reduced-motion: reduce){
  .cnx-halo,
  .cnx-eclat{ display:none; }
  .cnx-champ::before,
  .cnx-champ::after{ display:none; }
}

/* ============================================================
   DEUX CATÉGORIES CÔTE À CÔTE (a-savoir.html)
   Une carte par catégorie : icône, titre, bouton. Le bouton est le
   seul élément cliquable — la carte entière ne l'est pas, sinon le
   bouton n'aurait plus de raison d'être.
   ============================================================ */
.duo{ display:grid; gap:16px; margin-top:clamp(30px,5vh,46px); }
@media (min-width:760px){ .duo{ grid-template-columns:1fr 1fr; gap:24px; } }

/* EXCEPTION au calage à gauche : les deux cartes de la section 03 sont
   recentrées, à la demande de l'utilisateur. Deux blocs de même poids
   côte à côte tiennent mieux au milieu qu'accrochés à un bord, et sur un
   très grand écran tout le blanc s'accumulait à leur droite.
   Tant que la fenêtre est plus étroite que `--maxw`, la marge automatique
   vaut zéro : rien ne bouge sur un écran ordinaire ni sur téléphone.
   Le titre de la section, lui, reste à gauche — il est écrit sur la photo
   pleine largeur, avec les titres des autres sections. */
#a-savoir .pad .wrap{ margin-inline:auto; }

.duo-card{
  display:flex; flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-l);
  background:
    linear-gradient(160deg,var(--panel-2),var(--ink-2));
  transition:border-color .3s, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.duo-card:hover{
  border-color:rgba(249,115,22,.45);
  transform:translateY(-3px);
  box-shadow:0 18px 34px -22px rgba(10,40,80,.45);
}
/* h2 sur a-savoir.html, h3 sur l'accueil — là, le titre de section est
   déjà un h2, les cartes descendent donc d'un cran */
/* La photo occupe le haut de la carte, sur toute sa largeur. Rien n'est
   écrit dessus : les deux images sont claires — neige, ciel bleu — et un
   titre y tomberait sous le seuil lisible. Le texte reste donc en bleu
   sur le fond clair, juste en dessous. */
.duo-img{
  width:100%; height:clamp(210px,27vw,300px);
  object-fit:cover; object-position:center 55%;
  border-bottom:1px solid var(--line-soft);
  /* la photo avance doucement quand la souris entre dans la carte ;
     `overflow:hidden` sur la carte coupe le débord */
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.duo-card:hover .duo-img{ transform:scale(1.05); }
.duo-txt{
  flex:1;
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  padding:clamp(22px,3.4vw,30px);
}
.duo-card h2,
.duo-card h3{ font-size:clamp(1.5rem,4vw,1.9rem); margin:0; }
/* le bouton se cale en bas : les deux cartes s'alignent même si un
   titre passe sur deux lignes */
.duo-card .btn{ margin-top:auto; }

/* La phrase de la carte, entre le titre et le lien. Écrite dans le bleu
   secondaire : le titre reste le premier niveau de lecture, le lien le
   dernier. La marge haute est négative pour rattraper l'écart de 16 px
   de `.duo-txt` — la phrase appartient au titre, elle doit le suivre de
   près, pas flotter au milieu de la carte. */
.duo-mot{
  margin:-6px 0 0; color:var(--frost);
  font-size:clamp(1rem,1.2vw,1.1rem); line-height:1.5;
  max-width:46ch; text-wrap:pretty;
}

/* Lien de la carte : l'écriture seule, plus d'aplat. Le bouton plein
   mangeait la place, et la photo la rend mieux. La flèche s'écarte au
   survol, en même temps que la couleur passe à l'orange.
   Le rembourrage vertical porte la zone de touche à 44 px. */
.duo-lien{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:9px;
  /* 12 px de haut et de bas : la ligne fait environ 20 px, la zone de
     touche atteint donc les 44 px demandés au doigt */
  padding-block:12px;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; font-size:.86rem;
  color:var(--blue-deep);
  transition:color .25s;
}
/* La flèche s'écarte au survol. Le mouvement passe par `transform`, plus
   par `gap` : une flèche qui bouge ne doit pas redessiner la carte. */
.duo-lien svg{
  width:16px; height:16px; flex:none;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.duo-lien:hover{ color:var(--orange-hot); }
.duo-lien:hover svg{ transform:translateX(6px); }
@media (prefers-reduced-motion: reduce){
  .duo-lien svg{ transition:none; }
  .duo-lien:hover svg{ transform:none; }
}

/* icône ronde — conservée pour a-savoir.html, qui n'a pas de photo */
.duo-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:#fff; border:1px solid var(--line); color:var(--blue);
}
.duo-ico svg{ width:26px; height:26px; }

/* ============================================================
   ANIMATIONS D'APPARITION
   ============================================================ */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s; } .rv-d2{ transition-delay:.16s; } .rv-d3{ transition-delay:.24s; }
.rv-d4{ transition-delay:.32s; } .rv-d5{ transition-delay:.40s; } .rv-d6{ transition-delay:.48s; }

/* ---------- apparitions pilotées par le défilement ----------
   Là où le navigateur sait le faire, l'apparition suit le doigt : le
   bloc monte pendant qu'il entre à l'écran, et redescend si on remonte.
   Aucun JS, tout est calculé par le compositeur — c'est plus fluide
   qu'un déclenchement d'un coup, et ça résiste au défilement rapide.

   Le hero en est exclu : il est déjà à l'écran au chargement, sa
   séquence d'entrée reste pilotée par la classe `.in`.
   Le décalage des `.rv-dN` ne passe plus par un retard — il n'y a plus
   d'horloge — mais par une plage de défilement plus tardive. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    :where(.pad,.shot,.sep,.duo) .rv{
      opacity:0; transform:translateY(26px); transition:none;
      animation:rv-monte linear both;
      animation-timeline:view();
      animation-range:entry 6% cover 28%;
    }
    :where(.pad,.shot,.sep,.duo) .rv-d1{ animation-range:entry 9% cover 31%; }
    :where(.pad,.shot,.sep,.duo) .rv-d2{ animation-range:entry 12% cover 34%; }
    :where(.pad,.shot,.sep,.duo) .rv-d3{ animation-range:entry 15% cover 37%; }
    :where(.pad,.shot,.sep,.duo) .rv-d4{ animation-range:entry 18% cover 40%; }
    :where(.pad,.shot,.sep,.duo) .rv-d5{ animation-range:entry 21% cover 43%; }
    :where(.pad,.shot,.sep,.duo) .rv-d6{ animation-range:entry 24% cover 46%; }
    @keyframes rv-monte{ to{ opacity:1; transform:none; } }
  }
}

@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .ch{ opacity:1; transform:none; transition:none; }
  .eyebrow.rv::before{ transform:none; transition:none; }
  .px-photo{ animation:none; }
  .duo-img{ transition:none; }
  .duo-card:hover .duo-img{ transform:none; }
  .scroll-cue::after{ animation:none; }
}

/* ============================================================
   PIED DE PAGE
   Portage du composant React « hover-footer » de 21st.dev : panneau
   sombre arrondi, colonnes, filet, icônes sociales, et le nom en très
   gros dessous, dessiné au trait. Ni React, ni motion, ni Tailwind.

   Deuxième aplat sombre du site, après le mur de la galerie. Il est
   assumé : un pied de page se distingue du contenu, et le panneau est
   détaché des bords, posé sur le blanc de la page.
   ============================================================ */
/* La piste vue du ciel, sous le pied de page. Le blanc de la page y
   paraissait vide : le panneau bleu nuit est maintenant posé sur la
   neige, et ce sont ses marges qui laissent voir les traces de ski tout
   autour. Un fond de secours bleu très pâle le temps que la photo
   arrive — la page ne clignote pas en blanc pur. */
.pied-fond{
  background:#e4ecf7 url("https://images.unsplash.com/photo-1769365324240-5e5d95df4733?auto=format&fit=crop&w=1600&q=70")
             center / cover no-repeat;
  padding-block:clamp(6px,1.6vw,26px);
}

.pied{
  position:relative; overflow:hidden;
  margin:clamp(20px,3vw,40px);
  margin-left:max(clamp(20px,3vw,40px), env(safe-area-inset-left));
  margin-right:max(clamp(20px,3vw,40px), env(safe-area-inset-right));
  border-radius:var(--r-l);
  background:#0b1a30;
  color:rgba(226,238,252,.72);
}
/* La lueur du composant d'origine, rejouée avec les bleus de la charte :
   une tache claire en haut au centre, qui se perd vers le bas. */
.pied::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(125% 125% at 50% 8%, #12294a 45%, rgba(61,155,255,.28) 100%);
}
.pied-in{
  position:relative; z-index:1;
  padding:clamp(30px,5vw,64px) clamp(22px,4vw,56px) clamp(22px,3vw,34px);
  max-width:1400px;
}

.pied-cols{ display:grid; gap:clamp(28px,4vw,48px); }
@media (min-width:640px){ .pied-cols{ grid-template-columns:1fr 1fr; } }
@media (min-width:1020px){ .pied-cols{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; } }

.pied-marque .brand{ display:inline-flex; margin-bottom:14px; }
/* Pied de page : MÊME dégradé que la barre, demandé le 8 octobre 2026 —
   au risque que « EL », en bleu nuit, se perde sur le panneau bleu nuit. */
.pied-marque p{ margin:0; font-size:1rem; line-height:1.6; max-width:34ch; }

.pied-col h2{
  margin:0 0 18px;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; font-size:.78rem;
  color:#fff;
}
.pied-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
/* L'orange au survol, comme partout ailleurs sur le site : il ne sert
   qu'à signaler ce qui réagit. Sur ce bleu nuit, c'est `--hot` — l'orange
   d'écriture sur fond sombre — et non `--orange-hot`, réservé au blanc. */
.pied-col a{ display:inline-block; padding-block:9px; transition:color .25s; }
.pied-col a:hover{ color:var(--hot); }
.pied-marque .brand{ transition:color .25s; }
/* Le nom est peint par son fond : au survol, c'est le fond qui passe à
   l'orange, pas la couleur du texte. */
.pied-marque .brand:hover .brand-name{ background-image:linear-gradient(var(--hot), var(--hot)); }

.pied-contact li{ display:flex; align-items:flex-start; gap:11px; padding-block:6px; }
.pied-contact svg{ width:18px; height:18px; flex:none; margin-top:9px; color:var(--blue-bright); }
.pied-contact span{ padding-block:9px; }

.pied-filet{
  position:relative; z-index:1;
  border:0; border-top:1px solid rgba(226,238,252,.16);
  margin:clamp(20px,3vw,32px) 0;
}

.pied-bas{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; font-size:.9rem;
}
.pied-social{ list-style:none; margin:0; padding:0; display:flex; gap:6px; }
.pied-social a{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  transition:background .25s, color .25s;
}
.pied-social svg{ width:20px; height:20px; }
.pied-social a:hover{ background:rgba(255,122,26,.16); color:var(--hot); }
.pied-droits{ margin:0; }

/* ---------- le nom dessiné au trait ----------
   Deux fois le même mot, l'un sur l'autre. Celui du dessous est un trait
   pâle, tracé au premier passage à l'écran. Celui du dessus est coloré,
   mais masqué partout sauf sous une tache ronde qui suit le pointeur :
   la couleur ne se découvre qu'au passage de la souris. */
.pied-mot{
  position:relative; z-index:1;
  margin-top:-4%;
  padding-inline:clamp(10px,2vw,30px);
}
.pied-mot svg{ width:100%; height:auto; display:block; overflow:visible; }
.pied-mot text{
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:62px; fill:transparent; stroke-width:.5;
  paint-order:stroke;
}
.pied-trace{
  stroke:rgba(226,238,252,.34);
  stroke-dasharray:1400; stroke-dashoffset:1400;
}
/* La couleur ne se montre qu'au passage de la souris. Sans cela, la
   tache du masque reste au centre et laisse une flaque colorée en
   permanence — visible surtout sur téléphone, où il n'y a pas de
   pointeur pour l'emmener ailleurs. */
.pied-teinte{ opacity:0; transition:opacity .3s ease; }
.pied-mot svg:hover .pied-teinte{ opacity:1; }
/* le tracé ne part qu'une fois le pied de page à l'écran */
.pied-mot.in .pied-trace{ animation:pied-trait 3.4s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes pied-trait{ to{ stroke-dashoffset:0; } }

@media (prefers-reduced-motion: reduce){
  .pied-trace{ stroke-dashoffset:0; }
  .pied-mot.in .pied-trace{ animation:none; }
}

/* ============================================================
   TRANSITION ENTRE LES PAGES
   View Transitions API : le navigateur photographie la page qui part
   et celle qui arrive, puis anime le passage de l'une à l'autre.
   Aucune bibliothèque, aucun JS, et rien à charger.

   Deux éléments portent le même view-transition-name : le bouton
   S'INSCRIRE du hero et le titre de la page de pré-inscription. Le
   navigateur comprend alors qu'il s'agit du même objet, et le bouton
   s'étire jusqu'à devenir le titre. Le retour joue l'inverse.

   Trois choses à savoir :
   · Le nom doit être unique dans la page. Les autres boutons
     « S'inscrire » (barre du haut, menu mobile) n'ont donc pas la classe.
   · Il faut un vrai serveur et la même origine. Netlify : oui. Un
     double-clic sur le fichier : non.
   · Sans prise en charge (Firefox, aujourd'hui, pour le passage entre
     deux pages), la page s'affiche directement. Rien ne casse.
   ============================================================ */
@view-transition{ navigation:auto; }

.vt-cta{ view-transition-name:dekael-cta; }
/* Les deux cartes de la section 03 et les bandeaux photo de leurs pages.
   Chaque nom doit rester unique dans une page : ces classes ne sont
   posées qu'une fois de chaque côté. */
.vt-transport{ view-transition-name:dekael-transport; }
.vt-materiel{ view-transition-name:dekael-materiel; }
::view-transition-group(dekael-transport),
::view-transition-group(dekael-materiel){
  animation-duration:.55s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1);
}

/* bandeau photo en tête des pages transport et matériel.
   La barre du haut est fixe : sans cette marge, la photo passerait
   dessous. 76 px = sa hauteur au repos (18 px de marge haute et basse
   autour d'une pastille de 38 px). */
.page-band{
  margin-top:76px;
  height:clamp(190px,26vw,340px);
  overflow:hidden; border-bottom:1px solid var(--line);
  background:#0a1f3c;
}
.page-photo{ width:100%; height:100%; object-fit:cover; object-position:center 55%; }
/* la photo tient lieu d'en-tête : moins d'air au-dessus du titre */
.page-sous-photo{ padding-top:clamp(26px,4vh,44px); }
/* Le titre est un bloc : sa boîte irait d'un bord à l'autre, et le bouton
   s'étirerait en bandeau vide. `fit-content` la fait coller au texte —
   rien ne change à l'œil, le titre reste calé à gauche. */
h1.vt-cta{ width:fit-content; }

/* la traversée de l'objet partagé : la même courbe que les boutons */
::view-transition-group(dekael-cta){
  animation-duration:.55s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1);
}
/* le libellé du bouton s'efface vite, le titre d'arrivée prend le relais */
::view-transition-old(dekael-cta){ animation-duration:.2s; }
::view-transition-new(dekael-cta){ animation-duration:.45s; }

/* le reste de la page, lui, fond simplement */
::view-transition-old(root),
::view-transition-new(root){ animation-duration:.35s; }

/* Animations coupées : on repasse en navigation classique. */
@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation:none; }
}


/* ============================================================
   RIDEAU — page logement
   Portage natif du composant React « motion-footer » (21st.dev,
   septième composant envoyé par l'utilisateur) : le contenu de la
   page glisse comme un rideau et découvre un panneau resté immobile
   dessous. Ni GSAP, ni ScrollTrigger, ni Tailwind — le mécanisme
   tient en deux règles :

     · le panneau est en `position:fixed`, donc immobile à l'écran ;
     · son parent porte un `clip-path`, et un clip-path découpe TOUT
       son sous-arbre, y compris ce qui est fixe. Le panneau n'est
       donc visible que dans la boîte du parent — boîte qui remonte
       au défilement, d'où le rideau qui s'ouvre.

   Aucun JS : rien à nettoyer, aucune mesure de mise en page lue au
   défilement. Le composant d'origine faisait le même effet avec
   gsap + ScrollTrigger et deux `useEffect`.
   ============================================================ */

/* ---------- 1. l'écran d'ouverture ---------- */
.logi-intro{
  position:relative;
  /* un plein écran : le rideau ne doit rien laisser voir avant qu'on
     descende. `svh` et non `vh` — sur téléphone, la barre d'adresse
     mange la différence et l'invite tomberait hors de l'écran. */
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  /* 76 px = la hauteur de la barre fixe, plus un peu d'air. L'écran
     portait 157 px de vide au-dessus du titre : le contenu étant centré
     dans un plein écran, cette marge ne faisait que le pousser vers le
     bas, sans rien apporter. */
  padding-top:calc(76px + clamp(18px,3.5vh,44px));
  padding-bottom:clamp(88px,13vh,120px);
}
.logi-intro h1{ margin:18px 0 20px; }
.logi-intro .lede{ margin:0; }

/* ============================================================
   L'ÉCRAN D'OUVERTURE EN PARALLAXE — page logement, 1er sept. 2026

   Portage natif du composant React « parallax-scrolling » (21st.dev,
   neuvième fois). Le modèle glissait quatre calques à quatre vitesses
   avec `gsap.timeline` en `scrub`, `ScrollTrigger` et un défilement
   lissé par Lenis. Ici, trois calques et trois `@keyframes` accrochées
   au défilement lui-même : `view-timeline`, la même mécanique que le
   zoom du rideau juste en dessous. AUCUN JS, aucune bibliothèque, rien
   à nettoyer au départ de la page — le modèle avait un `useEffect` de
   démontage pour tuer ses trois instances.

   Trois calques, du fond vers l'avant :
     1. `.para-fond`  — la photo, qui descend le plus ;
     2. `.para-in`    — le titre, qui descend plus vite encore ;
     3. `.para-bas`   — le blanc de la page, presque immobile.
   Le titre s'enfonce donc dans le blanc pendant qu'on descend, et en
   ressort si l'on remonte.

   LA PHOTO EST SOMBRE, ET C'EST LA CONDITION DE TOUT LE BLOC. La charte
   interdit d'écrire sur une photo claire : la neige fait tomber l'orange
   à 2,5:1. Ce crépuscule mesure 28/255 de luminance dans la bande où le
   titre est posé, soit environ 6:1 contre `--hot` — le même cas que le
   ciel noir du bandeau de la section 03. AUCUN VOILE n'est posé, la
   photo reste dans ses couleurs. Changer cette photo pour une plus
   claire casserait la règle : vérifier la luminance avant.
   ============================================================ */
/* Le texte est calé BAS, pas au milieu. La moitié haute de la photo est
   du ciel clair et de la neige éclairée : mesuré sur le rendu réel, le
   titre orange n'y tenait que 1,8:1 — la charte a raison, on n'écrit pas
   sur de la neige. Le bas du cadre est un versant à l'ombre : 5:1 en
   moyenne, 3:1 au pixel le plus clair, soit le seuil des grands
   caractères. C'est là que le bloc est posé.
   TOUTE PHOTO QUI REMPLACERAIT CELLE-CI DOIT REPASSER CETTE MESURE. */
.para{
  position:relative; isolation:isolate; overflow:hidden;
  justify-content:flex-end;
  padding-bottom:clamp(190px,25vh,340px);
}

/* Le fond de secours, le temps que la photo arrive : sans lui, le titre
   orange serait écrit sur du blanc pendant le chargement. */
.para{ background:#1b1a33; }

/* La photo déborde en hauteur : elle descend de 16 % au défilement, et
   sans cette réserve son mouvement découvrirait un bord vide. Même
   raison et même mesure que la voie lactée du bandeau 04. */
.para-fond{
  position:absolute; inset:-10% 0 auto 0; z-index:0;
  width:100%; height:120%;
  object-fit:cover; object-position:center 62%;
}

/* Le contenu passe au-dessus de la photo. Il ne porte aucun aplat :
   c'est la photo qui est sombre, pas un voile qui l'assombrit. */
.para-in{ position:relative; z-index:2; }

/* Le blanc de la page, remonté en calque avant. Il est dégradé sur sa
   moitié haute : une arête franche se lirait comme une bande, alors
   qu'il doit se lire comme le bas de la page qui monte. */
.para-bas{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  height:22%;
  background:linear-gradient(rgba(255,255,255,0), var(--ink) 72%);
  pointer-events:none;
}

/* ---- les couleurs du texte sur la photo ----
   Même traitement que la section galerie : sur un fond sombre, ni le
   bleu de la charte ni l'orange d'écriture sur blanc ne tiennent. Le
   texte courant passe en blanc cassé, le titre en `--hot`, l'orange
   réservé aux photos. */
/* L'œil-de-bœuf passe en blanc cassé, pas en orange : écrit à 13 px, il
   lui faut 4,5:1, et l'orange ne tient que 3,2:1 sur le pixel le plus
   clair du versant. Son filet, lui, reste orange — un trait décoratif de
   26 px n'est pas du texte. Même partage que la section galerie. */
.para .eyebrow,
.para .back-link,
.para .lede{ color:#f2ece2; }
.para .back-link:hover,
.para .back-link:focus-visible{ color:var(--hot); }
.para h1{ color:var(--hot); }
/* L'invite « Descends » tombe sur le calque BLANC de la parallaxe, pas
   sur la photo : elle garde donc le bleu du site, et non le blanc cassé
   des trois textes au-dessus. `--frost` et non `--frost-dim` — sur ce
   dégradé, les 4,0:1 du second passent sous le seuil.
   `z-index` : sans lui l'invite est peinte SOUS le calque blanc, qui la
   délave — elle n'a pas de z-index à elle, donc elle vaut 0 contre les 3
   du calque.

   NE PAS LA PASSER EN BLANC CASSÉ. Le détecteur d'Impeccable la relève à
   2,8:1 sur `#1b1a33` le 2 septembre 2026 : il mesure contre la photo,
   qui est bien derrière elle dans l'ordre des calques, mais que le calque
   blanc recouvre entièrement à cet endroit. Le passage au blanc cassé a
   été essayé et vu à l'écran le même jour — l'invite disparaissait dans
   le blanc. Faux positif, à laisser tel quel. */
.para .logi-cue{ color:var(--frost); z-index:4; }

/* ---- le mouvement au défilement ----

   `exit 0% → exit 100%` : la section fait un écran et commence en haut
   de page, donc sa sortie couvre exactement le premier écran de
   défilement — 0 % au chargement, 100 % quand elle a disparu.

   Le mouvement passe par `translate`, jamais par `transform` : rien
   d'autre n'écrit dans cette propriété ici, et `object-fit` n'y touche
   pas.

   Sans prise en charge (Firefox, Safari à ce jour), les trois calques
   restent en place : l'écran est déjà composé au repos, seule la
   profondeur manque. Coupé aussi sous `prefers-reduced-motion`. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .para{ view-timeline-name:--para; }
    .para-fond,
    .para-in,
    .para-bas{
      animation:linear both;
      animation-timeline:--para;
      animation-range:exit 0% exit 100%;
    }
    .para-fond{ animation-name:para-fond; }
    .para-in{ animation-name:para-in; }
    .para-bas{ animation-name:para-bas; }

    /* La photo MONTE, elle ne descend pas. En descendant, son bord haut
       finissait par entrer dans l'écran et découvrait le fond de secours ;
       en montant, c'est son bord bas qui se dégage — et celui-là est déjà
       couvert par le blanc du calque avant. */
    @keyframes para-fond{ to{ translate:0 -12%; } }
    @keyframes para-in{ to{ translate:0 30%; } }
    @keyframes para-bas{ to{ translate:0 -4%; } }
  }
}

/* L'invite à descendre. Elle est centrée en bas et visible sur toutes
   les tailles — contrairement à `.scroll-cue`, qui est écrite à la
   verticale dans la gouttière et disparaît sous 960 px. */
.logi-cue{
  position:absolute; left:50%; translate:-50% 0;
  bottom:clamp(20px,4vh,44px); margin:0;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--display); font-stretch:condensed;
  text-transform:uppercase; letter-spacing:.28em; font-size:.72rem;
  color:var(--frost-dim); pointer-events:none;
}
.logi-cue::after{
  content:""; width:1px; height:clamp(38px,7vh,64px);
  background:linear-gradient(var(--blue),transparent);
  animation:cue 2.2s ease-in-out infinite;   /* keyframes du .scroll-cue */
}

/* ---------- 2. le rideau ---------- */
/* Ce bloc ne contient rien de visible : il ne sert qu'à découper. Sa
   hauteur est la course du rideau. */
.rideau{
  position:relative;
  height:100svh;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Le panneau. Il ne bouge jamais : c'est la page qui remonte devant. */
.rideau-vue{
  position:fixed; left:0; right:0; bottom:0;
  /* `dvh` ici, `svh` sur le parent : le panneau suit la fenêtre réelle,
     et le découpage, plus court, laisse toujours voir son bas — donc le
     bandeau du titre. */
  height:100dvh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  background:#0a1f3c;   /* le temps que la photo arrive */
}
.rideau-photo{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  /* 58 % : le village est dans la moitié basse de la photo. Plus haut,
     le cadrage ne garde que les sommets. */
  object-fit:cover; object-position:center 58%;
}

/* Plein soleil sur la neige : aucun texte ne tient sur cette image.
   Le titre va donc dans un bandeau blanc pleine largeur, écrit en
   bleu — même traitement que la section 02 de l'accueil. */
.rideau-band{
  position:relative; z-index:1;
  background:var(--ink); border-top:1px solid var(--line);
  padding-block:clamp(24px,4vh,42px);
  box-shadow:0 -20px 44px -34px rgba(10,40,80,.55);
}
.rideau-band-in{ display:grid; gap:18px; }
.rideau-band .eyebrow{ margin-bottom:12px; }
.rideau-band h2{ margin:0; }
/* 11 octobre 2026 : trois villages au lieu d'un (« rajoute Plagne Centre,
   Plagne Villages, garde Plagne Soleil »). Les noms restent d'un bloc et
   un point bleu les sépare. Trois noms ne tiennent pas à côté du chapô :
   en vue PC, le titre prend la ligne entière et le chapô passe dessous. */
.villages-titre{ font-size:clamp(1.9rem,3.4vw,3.6rem); }
@media (min-width:900px){
  .rideau-band-in:has(.villages-titre){ grid-template-columns:1fr; gap:10px; }
  .rideau-band-in:has(.villages-titre) .lede{ max-width:60ch; }
}
.villages-titre span{ white-space:nowrap; }
.villages-titre span + span::before{ content:"·"; margin-right:.4em; color:var(--blue-bright,#3d9bff); }
@media (max-width:899px){
  .villages-titre span{ display:block; }
  .villages-titre span + span::before{ content:none; }
}
@media (min-width:900px){
  .rideau-band-in{
    grid-template-columns:auto minmax(0,46ch);
    justify-content:space-between; align-items:end; gap:clamp(24px,5vw,72px);
  }
  .rideau-band .lede{ padding-bottom:6px; }
}

/* La photo se resserre pendant que le rideau s'ouvre. Le mouvement est
   piloté par le défilement, pas par une horloge : la ligne de temps est
   posée sur `.rideau`, et la photo — qui est fixe, donc sans ligne de
   temps à elle — va la chercher chez son parent. Aucun JS.
   La propriété est `scale`, jamais `transform` : le cadrage `object-fit`
   n'y touche pas, et rien d'autre n'écrit dedans. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rideau{ view-timeline-name:--rideau; }
    .rideau-photo{
      animation:rideau-zoom linear both;
      animation-timeline:--rideau;
      animation-range:entry 0% entry 100%;
    }
    @keyframes rideau-zoom{ from{ scale:1.12; } to{ scale:1; } }
  }
}

@media (prefers-reduced-motion: reduce){
  .logi-cue::after{ animation:none; }
}

/* ============================================================
   LES PLUS DE L'HÉBERGEMENT — page logement
   REFONTE COMPLÈTE DU 4 SEPTEMBRE 2026 : « refais-moi un design
   total sans changer les infos, une refonte globale de cette partie
   car elle est vraiment pas belle ».

   Ce qui n'allait pas — l'ancienne version posait TOUT en relevé :
   trois colonnes de lignes séparées par des filets, la même graisse,
   la même casse, le même filet du premier au dernier libellé. Rien ne
   disait qu'un atout du logement et une ligne d'inventaire ne se
   lisent pas pareil, et deux des colonnes s'arrêtaient au milieu de
   leur hauteur : du vide à droite de « Casier à ski » et sous
   « Ménage en fin de séjour ».

   Ce que la refonte fait — trois familles, trois traitements, du plus
   fort au plus discret :
     1. `.plus-cartes` — les cinq atouts, en cartes posées sur une
        rangée pleine largeur. Pastille en haut, filet, libellé en bas.
        Ce sont les arguments du logement : ils passent devant ;
     2. `.plus-inclus` — l'équipement, dans un panneau clair. Ses huit
        lignes ne sont plus des rangées de tableau mais des pastilles
        rectangulaires qui s'écoulent et se replient toutes seules :
        c'est ce qui remplit la largeur à toutes les tailles d'écran,
        sans palier ni colonne à compter ;
     3. `.plus-services` — les deux services payants, dans un panneau
        d'une teinte plus soutenue (`--panel-2`), à côté. Ils ne sont
        justement PAS inclus : ils ne doivent pas se lire comme le
        panneau voisin.

   Repères repris de la charte, sans un écart : la carte est un
   rectangle de 18 px de rayon, le panneau de 28 px, la pastille est
   toujours un rond au trait, la séparation est un filet bleu
   transparent, l'ombre est bleu de nuit et fortement rentrée, et rien
   n'est orange au repos — aucun de ces blocs n'est cliquable.

   TOUTES LES COLONNES SONT EN `fr`, ET C'EST TOUJOURS LE POINT À
   RETENIR (leçon du 2 septembre 2026) : une borne en pixels choisie
   pour 1 345 px laisse un demi-écran vide en 2 560. Les pastilles
   d'équipement vont plus loin encore — elles n'ont pas de colonne du
   tout, elles se replient d'elles-mêmes.
   ============================================================ */
.plus-in{ display:grid; gap:clamp(26px,3.4vw,46px); }
.plus-tete h2{ margin:16px 0 0; }

/* ---------- 1. les cinq atouts, en cartes ----------
   Les paliers sont écrits à la main plutôt qu'en `auto-fit` : sur une
   liste de CINQ, aucun compte de colonnes ne tombe juste tout seul, et
   `auto-fit` laisse une carte seule au bout d'une rangée à moitié
   vide. La dernière rangée est donc rattrapée à chaque palier —
   c'est tout le sel de ce bloc :
     • 1 colonne — les cinq l'une sous l'autre ;
     • 2 colonnes — 2 + 2 + 1, et la cinquième prend TOUTE la largeur ;
     • 3 colonnes — obtenues sur une grille de SIX : les trois premières
       cartes tiennent deux colonnes, les deux dernières en tiennent
       trois. Les deux rangées vont d'un bord à l'autre ;
     • 5 colonnes — une seule rangée, rien à rattraper. */
.plus-cartes{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(12px,1.2vw,20px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:560px){
  .plus-cartes{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plus-carte:last-child{ grid-column:1 / -1; }
}
@media (min-width:900px){
  .plus-cartes{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .plus-carte{ grid-column:span 2; }
  .plus-carte:nth-child(4),
  .plus-carte:nth-child(5){ grid-column:span 3; }
}
/* Le palier des cinq colonnes est à 1 240 px, comme l'ancien 3 + 2 :
   plus étroit, la colonne tombe sous 230 px et « À 100 mètres des
   commerces » se coupe en trois lignes. */
@media (min-width:1240px){
  .plus-cartes{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .plus-carte,
  .plus-carte:nth-child(4),
  .plus-carte:nth-child(5){ grid-column:auto; }
}

/* La carte : fond `--panel`, filet bleu, ombre « pose de carte ».

   SUR TÉLÉPHONE ELLE EST COUCHÉE — pastille à gauche, libellé à
   droite. Debout, les cinq cartes empilées faisaient 665 px à elles
   seules et la section montait à 1 880 px : sur une colonne unique,
   une carte debout n'apporte rien qu'une ligne n'apporte déjà, et
   coûte 130 px pièce. Couchée, elle en fait 80. */
.plus-carte{
  display:flex; align-items:center; gap:14px; min-width:0;
  padding:clamp(14px,3.6vw,18px);
  background:var(--panel);
  border:1px solid var(--line); border-radius:18px;
  box-shadow:0 34px 70px -46px rgba(10,40,80,.6);
}
.plus-carte-txt{
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; line-height:1.25;
  font-size:clamp(1rem,1.05vw,1.22rem); color:var(--snow);
}

/* Dès qu'il y a plusieurs colonnes, la carte se redresse : pastille en
   haut, filet, libellé en bas.
   Le libellé est collé en bas par `margin-top:auto` — les cinq cartes
   sont étirées à la hauteur de la plus haute par la grille, et sans
   cela « Casier à ski » flotterait au milieu de la sienne pendant que
   « À 100 mètres des commerces » remplirait deux lignes. */
@media (min-width:560px){
  .plus-carte{
    flex-direction:column; align-items:stretch; gap:0;
    padding:clamp(18px,1.7vw,28px);
  }
  .plus-carte-txt{
    margin-top:auto;
    padding-top:clamp(14px,1.4vw,20px);
    border-top:1px solid var(--line-soft);
  }
}

/* La pastille du logo : même dessin que `.duo-ico`, et elle grandit
   avec la carte. `flex:none` — sans elle, elle s'écraserait quand la
   carte se resserre. */
.plus-ico{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(44px,3.2vw,56px); height:clamp(44px,3.2vw,56px);
  border-radius:50%;
  background:#fff; border:1px solid var(--line); color:var(--blue);
}
.plus-ico svg{ width:clamp(21px,1.5vw,26px); height:auto; }
@media (min-width:560px){
  .plus-ico{ margin-bottom:clamp(16px,1.6vw,26px); }
}

/* ---------- 2 et 3. les deux relevés ----------
   Côte à côte à 1 100 px : le panneau de l'équipement porte huit
   lignes, celui des services deux — d'où le 2fr / 1fr. Les deux sont
   étirés à la même hauteur par la grille. */
.plus-bas{ display:grid; gap:clamp(14px,1.4vw,24px); }
@media (min-width:1100px){
  .plus-bas{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
}

.plus-inclus,
.plus-services{
  min-width:0;
  padding:clamp(20px,2.2vw,34px);
  border:1px solid var(--line); border-radius:28px;
  box-shadow:0 30px 60px -50px rgba(10,40,80,.6);
}
.plus-inclus{ background:var(--panel); }
/* Un cran plus teinté : c'est le seul signe qu'il faut, et il ne coûte
   ni couleur nouvelle ni libellé en plus. */
.plus-services{ background:var(--panel-2); }

.plus-inclus h3,
.plus-services h3{
  margin:0;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; line-height:1.1;
  font-size:clamp(1.2rem,1.7vw,1.5rem); color:var(--snow);
}
.plus-sous{
  margin:8px 0 0;
  font-size:.94rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); font-weight:700;
}

/* Les huit lignes d'équipement. Elles n'ont PAS de pastille ronde —
   décision du 2 septembre 2026, ce sont des éléments de l'appartement
   et non des atouts à mettre en avant. Elles reçoivent en revanche un
   petit dessin au trait, sans rond autour : de quoi se repérer d'un
   coup d'œil sans monter au rang des cinq cartes.
   Elles s'écoulent en `flex-wrap` : aucune colonne à compter, aucun
   palier à écrire, et la ligne se remplit d'une gouttière à l'autre
   aussi bien en 1 345 qu'en 2 560 px. */
.plus-eq{
  list-style:none; margin:clamp(16px,2vh,24px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:clamp(9px,.8vw,14px);
}
.plus-eq li{
  display:flex; align-items:center; gap:10px;
  padding:clamp(10px,.95vw,14px) clamp(13px,1.1vw,18px);
  background:#fff; border:1px solid var(--line); border-radius:10px;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(.94rem,.95vw,1.06rem); color:var(--snow);
}

/* GRAND ÉCRAN : LES HUIT PASTILLES PASSENT EN QUATRE COLONNES ÉGALES,
   ET C'EST LE POINT DE LA REFONTE. L'écoulement libre remplit très bien
   la ligne jusqu'à 1 500 px — 4 + 4 en 1 345, la vue de l'utilisateur —
   mais au-delà il pose 5 pastilles sur la première ligne et 3 sur la
   seconde : 560 px de panneau vide à droite en 1 920 px, et une
   pastille seule sur sa ligne en 2 560. Quatre colonnes divisent huit,
   donc les deux lignes sont toujours pleines, quelle que soit la
   largeur.
   Le palier est à 1 560 px et pas plus bas : c'est la première largeur
   où une colonne dépasse 201 px, la place que réclame « Balcon /
   Terrasse » — sous cette valeur, ce seul libellé se couperait en deux
   et sa ligne entière grandirait avec lui. */
@media (min-width:1560px){
  .plus-eq{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* Les deux services : mêmes pastilles, mais en pleine largeur de leur
   panneau et l'une sous l'autre — la première porte une précision sur
   deux lignes, elles ne tiendraient pas côte à côte dans une colonne
   de 380 px. Entre 560 et 1 100 px le panneau prend toute la page :
   là, elles se mettent côte à côte. */
.plus-serv{
  list-style:none; margin:clamp(16px,2vh,24px) 0 0; padding:0;
  display:grid; gap:clamp(9px,.8vw,14px);
}
.plus-serv li{
  display:flex; align-items:flex-start; gap:11px;
  padding:clamp(12px,1.05vw,16px) clamp(13px,1.1vw,18px);
  background:#fff; border:1px solid var(--line); border-radius:10px;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; line-height:1.32;
  font-size:clamp(.94rem,.95vw,1.06rem); color:var(--snow);
}
@media (min-width:560px) and (max-width:1099px){
  .plus-serv{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Le petit dessin des relevés : au trait, sans pastille. */
.plus-mini{
  flex:none; display:inline-flex; align-items:center;
  color:var(--blue);
}
.plus-mini svg{ width:clamp(17px,1.2vw,20px); height:auto; }
/* Dans les services, le libellé peut faire deux lignes : le dessin se
   cale sur la première, pas au milieu du bloc. */
.plus-serv .plus-mini{ margin-top:1px; }

/* La précision entre parenthèses est en minuscules et dans la police
   du texte courant : en capitales condensées comme le reste du relevé,
   elle pesait plus lourd que le libellé qu'elle précise. */
.plus-note{
  display:block; margin-top:3px;
  font-family:var(--body); font-weight:400;
  text-transform:none; letter-spacing:0; line-height:1.4;
  font-size:.9rem; color:var(--frost);
}
/* ============================================================
   LE STUDIO — page logement
   Description générale du logement, entre le rideau et les plus.
   Elle ne parle d'aucune édition : elle reste d'une année sur
   l'autre.

   Le titre est écrit plus grand que les autres `h2` du site : c'est
   le seul texte de la section, et il doit tenir tout seul l'écran
   entre deux blocs à photo.
   ============================================================ */
.studio-titre{
  font-size:clamp(2.5rem,7.6vw,5.6rem);
  margin:16px 0 clamp(20px,3.4vh,32px);
}
/* Un cran au-dessus de `.lede` : ce paragraphe est le contenu de la
   section, pas son chapô. La ligne est bornée à 52 caractères — au
   delà, l'œil perd la ligne suivante. */
.studio-txt{
  color:var(--frost);
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.6; max-width:52ch; margin:0;
  text-wrap:pretty;
}

/* ---------- le ruban de photos du studio ----------
   Reprend la mécanique des rubans de la galerie (`.ruban`,
   `.ruban-piste`) : même défilement en boucle, même fondu sur les
   bords, même arrêt au survol et à l'entrée du focus.

   Seul l'habillage change. Là-bas les photos sont des tableaux
   accrochés à un mur de bois — passe-partout ivoire, coins vifs. Ici on
   est sur le blanc de la page : une simple carte à filet bleu pâle,
   comme le reste du site. D'où ces trois annulations. */
.studio-ruban{ margin-top:clamp(28px,4.5vh,48px); }
/* sept photos au lieu de trois : la boucle est plus longue à parcourir */
.studio-ruban .ruban-piste{ animation-duration:52s; }
.studio-ruban .ruban-piste li{
  width:clamp(230px,26vw,380px);
  padding:0; background:none;              /* pas de passe-partout */
  overflow:hidden;                          /* c'est la carte qui recadre */
  border-radius:var(--r-m);
  border:1px solid var(--line);
  box-shadow:0 24px 44px -34px rgba(10,40,80,.6);
}
/* Photos couchées, pas carrées : ce sont des pièces, et un carré coupe
   toujours soit la fenêtre, soit le sol. */
.studio-ruban .ruban-piste img{
  aspect-ratio:3/2;
  border-radius:calc(var(--r-m) - 1px);
}

/* ============================================================
   PACKS DE MATÉRIEL — page matériel

   Portage natif du composant React « card-7 » (21st.dev, huitième
   envoi de l'utilisateur) : une carte photo qui s'incline sous la
   souris, un bandeau de verre posé en haut, une pastille de prix
   dessous. Ni React, ni Tailwind, ni `cn()`.

   Trois écarts avec le modèle, tous voulus :
   · le modèle noie la photo sous un dégradé noir. Ici la photo reste
     dans ses couleurs — c'est la règle du site. Ce qui porte le texte
     est un aplat clair posé dessus, jamais un voile sur toute l'image ;
   · les quatre points de pagination sont retirés : ils annoncent un
     carrousel qui n'existe pas ;
   · le logo de marque aussi : la carte n'en porte aucune.

   L'inclinaison vit dans le JS, qui écrit `--rx` et `--ry` sur la
   carte. Sans JS les deux valent zéro : la carte est simplement posée
   à plat, et rien ne manque.
   ============================================================ */
.pack-grille{
  list-style:none; margin:clamp(28px,4.5vh,48px) 0 0; padding:0;
  display:grid; gap:clamp(18px,2.2vw,30px);
  /* `1fr` et non une largeur fixe : les cinq cartes doivent remplir la
     largeur disponible et tomber sur une seule ligne sur grand écran.
     `auto-fit` en met autant qu'il en tient — cinq en 1 345 px, deux
     sur une tablette, un seul sur téléphone. */
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  /* Les cartes sont étirées à la hauteur de la plus haute : les prix
     tombent alors sur la même ligne d'une carte à l'autre. */
  align-items:stretch;
}

/* La perspective vit sur la scène, pas sur la carte : posée sur la
   carte elle-même, chaque angle serait mesuré depuis son propre
   centre, et cinq cartes côte à côte fuiraient dans cinq
   directions différentes. */
.pack-scene{ perspective:1000px; display:flex; }

/* LA CARTE N'A PLUS DE PROPORTION FIXE. Elle en a eu une (9/12) tant
   qu'il n'y avait qu'un pack : le texte était alors posé en absolu
   par-dessus la photo, et une réserve en pourcentage l'empêchait de
   passer derrière le matériel. À plusieurs cartes, cette réserve tombe en
   panne — les cartes rétrécissent, le texte s'allonge sur plus de
   lignes, et il finit par déborder de sa réserve.

   La photo et le texte sont donc empilés pour de bon. La photo garde
   sa propre proportion, le texte prend la place qu'il lui faut, et la
   grille étire toutes les cartes à la même hauteur. Rien ne peut plus
   se chevaucher, quelle que soit la largeur. */
.pack{
  position:relative;
  display:flex; flex-direction:column;
  width:100%; max-width:340px;
  border-radius:var(--r-l);
  border:1px solid var(--line);
  /* blanc et non `--panel` : une des photos est un PNG détouré, et
     c'est le fond de la carte qu'on voit à travers. */
  background:#fff;
  box-shadow:0 34px 70px -46px rgba(10,40,80,.6);
  /* `preserve-3d` — sans elle, le texte reste collé au plan de la
     carte et l'inclinaison est plate. */
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale3d(var(--s,1),var(--s,1),var(--s,1));
  transition:transform .4s ease;
}
/* Pendant que la souris est dessus, le mouvement doit coller au
   curseur : c'est le JS qui pose la classe, et elle raccourcit la
   transition. Au départ du pointeur, elle tombe et la carte revient
   doucement à plat. */
.pack.incline{ transition:transform .1s ease-out; }

/* La photo : du matériel découpé sur fond blanc — deux skis, deux
   bâtons et une paire de chaussures pour les packs, un casque pour la
   cinquième carte. Elle ne se recadre pas — `cover` couperait une
   spatule ou une pointe de bâton. Son blanc se confond avec celui de
   la carte : on ne voit plus une photo dans un cadre, mais du matériel
   posé dessus.

   Le cadre est carré quelle que soit la photo. Les cinq sources ne
   sont pas au même format (de 600×600 à 800×800) et viennent de cinq
   magasins différents : sans cadre imposé, les cinq cartes n'auraient
   pas la même tête. */
.pack-img{
  width:100%; height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  padding:9% 9% 0;
  border-radius:calc(var(--r-l) - 1px) calc(var(--r-l) - 1px) 0 0;
}

/* ---- Carte à deux images : le Pack Découverte, ski ou snowboard ----

   Le modèle « card-7 » n'avait qu'une photo, et ses quatre points de
   pagination avaient été retirés parce qu'ils annonçaient un carrousel
   qui n'existait pas. Ici il en existe un, sur une seule carte.

   Le ruban est un vrai débordement horizontal avec scroll-snap : au
   doigt on glisse d'une image à l'autre sans une ligne de JS, et sans
   JS du tout la carte reste utilisable. La flèche ne fait que pousser
   ce même défilement. */
.pack-media{ position:relative; }

.pack-vues{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  /* Le glissé s'arrête à la carte : il ne doit pas se propager à la
     page ni déclencher le retour arrière du navigateur. */
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  border-radius:calc(var(--r-l) - 1px) calc(var(--r-l) - 1px) 0 0;
}
.pack-vues::-webkit-scrollbar{ display:none; }

/* Chaque image occupe toute la largeur du cadre : `0 0 100%`, sinon
   flex les rétrécirait pour les faire tenir toutes les deux. */
.pack-vues .pack-img{
  flex:0 0 100%;
  scroll-snap-align:center;
  border-radius:0;
}

/* La flèche. 44 px de zone de touche, posée dans le coin bas droit de
   la photo — le matériel occupe le haut du cadre. Elle tourne d'un
   demi-tour sur la dernière image : elle dit alors « reviens ». */
.pack-fleche{
  position:absolute; right:8px; bottom:8px;
  width:44px; height:44px; padding:0;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--blue);
  box-shadow:0 12px 26px -16px rgba(10,40,80,.9);
  cursor:pointer; touch-action:manipulation;
  transition:background .22s ease, color .22s ease, border-color .22s ease;
}
.pack-fleche svg{
  width:20px; height:20px;
  transition:transform .3s ease;
}
.pack-fleche[data-fin] svg{ transform:scaleX(-1); }
.pack-fleche:hover{
  background:var(--orange-hot); border-color:var(--orange-hot); color:#fff;
}

/* La composition du pack, sous la phrase. Sur le Pack Découverte elle
   change avec l'image ; sur le Pack Éco elle est écrite en dur.

   Elle est écrite GRAND — demande de l'utilisateur : c'est ce qu'on
   cherche sur une carte de location, pas la phrase. Taille fixe et non
   un `clamp` sur la fenêtre, même raison que `.pack-nom` : à cinq
   cartes, la fenêtre ne dit rien de la largeur d'une colonne. Elle
   passe sur deux lignes dans une colonne étroite, et c'est très bien —
   la grille étire les cinq cartes ensemble. */
.pack-var{
  margin:10px 0 0;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em;
  font-size:1.02rem; line-height:1.15;
  color:var(--blue-deep);
  text-wrap:balance;
}

/* Le texte, calé en bas — `margin-top:auto`. La carte étant étirée à
   la hauteur de la plus haute de la ligne, c'est ce qui aligne les
   prix d'une carte à l'autre.

   Il est avancé de 24 px : c'est lui qui donne la profondeur à
   l'inclinaison, la photo restant au plan de la carte. Pas plus — au
   delà, le bas du texte sort du bord arrondi. */
.pack-in{
  margin-top:auto;
  padding:0 clamp(14px,6%,20px) clamp(16px,6%,22px);
  display:flex; flex-direction:column; align-items:flex-start;
  gap:12px;
  transform:translateZ(24px);
}

/* PAS DE BANDEAU DE VERRE, contrairement au modèle.

   Le modèle écrit en blanc sur une photo sombre, d'où sa vitre floutée.
   Ici le fond de la photo EST blanc : une vitre blanche posée sur du
   blanc ne se voit pas, et son filet ne ferait qu'ajouter une boîte
   dans une boîte. Le texte est donc écrit directement sur le blanc, en
   bleu, comme partout ailleurs sur le site — 9,7:1. */
.pack-tete{ width:100%; }

.pack-nom{
  margin:0;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; line-height:1.05;
  /* Taille fixe, et non un `clamp` sur la largeur de la fenêtre : à
     cinq cartes, une colonne fait 220 px sur grand écran mais 335 px
     sur téléphone — la fenêtre ne dit rien de la place réelle. À cette
     taille, « Pack Découverte » et « Pack Excellence » tiennent sur une
     ligne dans les deux cas. */
  font-size:1.35rem;
  color:var(--snow);
}
.pack-desc{
  margin:6px 0 0;
  font-size:.88rem; line-height:1.45; color:var(--frost);
  text-wrap:pretty;
}

/* Pastille de prix : un aplat bleu, comme le bouton du hero. Sur une
   photo, un prix écrit nu se perdrait dans la neige. */
.pack-prix{
  margin:0;
  padding:8px 18px; border-radius:999px;
  background:var(--blue); color:#fff;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  letter-spacing:.05em; font-size:1.02rem; line-height:1;
  box-shadow:0 12px 26px -16px rgba(10,40,80,.9);
}

/* Sous prefers-reduced-motion, la carte ne bouge plus du tout : elle
   reste une photo, un bandeau et un prix. */
@media (prefers-reduced-motion: reduce){
  .pack{ transform:none; transition:none; }
  .pack-fleche, .pack-fleche svg{ transition:none; }
}

/* ============================================================
   TRANSPORT — page transport

   Deux blocs de texte et deux cartes d'étape. Rien d'animé, rien de
   piloté par le JS : c'est une page qu'on vient lire avant de réserver
   ailleurs, et elle doit se laisser lire au premier coup d'œil.

   Les cartes sont côte à côte à partir de 900 px et empilées en
   dessous. Elles s'étirent à la même hauteur : le prix et le bouton de
   l'étape 01 tombent alors sur la même ligne que ceux de l'étape 02,
   même si l'une des deux a une ligne de plus.
   ============================================================ */
.tr-bloc{ margin-top:clamp(52px,9vh,104px); }
/* Le premier bloc suit le h1 de la page, qui porte déjà sa marge
   basse : sans cela, l'écart y serait deux fois plus grand
   qu'entre les deux blocs. */
.tr-bloc-1{ margin-top:clamp(18px,3vh,34px); }
.tr-bloc h2{ margin:14px 0 18px; }

.tr-etapes{
  list-style:none; margin:clamp(28px,4.5vh,44px) 0 0; padding:0;
  display:grid; gap:clamp(18px,2.4vw,28px);
}
@media (min-width:900px){
  .tr-etapes{ grid-template-columns:repeat(2,1fr); align-items:stretch; }
}

.tr-etape{
  position:relative;
  display:flex; flex-direction:column; gap:14px;
  padding:clamp(22px,3vw,30px);
  border:1px solid var(--line); border-radius:var(--r-l);
  background:var(--panel);
  box-shadow:0 30px 60px -50px rgba(10,40,80,.6);
}

/* Le numéro d'étape, dessiné au trait dans le coin. Il est décoratif —
   l'ordre est déjà donné par le <ol> — d'où l'`aria-hidden` dans le
   HTML. Le titre lui réserve sa place par un `padding-right`, sinon un
   nom de gare long passerait dessous. */
.tr-num{
  position:absolute; top:clamp(14px,2vw,20px); right:clamp(16px,2.4vw,24px);
  margin:0;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:clamp(2.2rem,4vw,3rem); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(30,110,208,.28);
}

.tr-mode{
  margin:0;
  display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-stretch:condensed;
  text-transform:uppercase; letter-spacing:.16em;
  font-size:.74rem; color:var(--frost);
}
/* Même pastille que `.plus-ico` et `.duo-ico`, un cran plus petite. */
.tr-ico{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:#fff; border:1px solid var(--line); color:var(--blue);
}
.tr-ico svg{ width:21px; height:21px; }

.tr-titre{
  margin:0; padding-right:2.6em;
  font-size:clamp(1.15rem,2.1vw,1.5rem);
  color:var(--snow);
  /* Les deux titres sont des trajets : la flèche doit rester collée aux
     noms de gares, et la ligne peut se couper n'importe où ailleurs. */
  text-wrap:balance;
}

.tr-faits{
  list-style:none; margin:2px 0 0; padding:0;
  display:grid; gap:9px;
  font-size:.97rem; line-height:1.5; color:var(--frost);
  text-wrap:pretty;
}
/* Une puce dessinée : un point bleu, aligné sur la première ligne. */
.tr-faits li{ position:relative; padding-left:18px; }
.tr-faits li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--blue-bright);
}

/* Le prix et le bouton sont poussés en bas : c'est ce qui les aligne
   d'une carte à l'autre quand l'une a une ligne de plus. */
.tr-prix{
  margin:auto 0 0; padding-top:6px;
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px;
}
.tr-prix b{
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  letter-spacing:.02em; font-size:clamp(1.5rem,2.6vw,1.9rem); line-height:1;
  color:var(--blue-deep);
}
/* Le libellé passe toujours sous le nombre — `flex-basis:100%`. Laissé
   libre, il se mettait à côté sur une carte et dessous sur l'autre, et
   les deux prix ne tombaient plus à la même hauteur. */
.tr-prix span{ flex:1 0 100%; font-size:.88rem; color:var(--frost); }

/* 44 px de zone de touche : `.btn-sm` s'arrête à 43. */
.tr-lien{ align-self:flex-start; margin-top:4px; min-height:44px; }

/* Le lien écrit petit sous le bouton — les horaires chez l'office de
   tourisme. Il est en `inline-flex` de 44 px : une zone de touche fait
   44 px même quand le texte n'en fait que 18. La marge négative rattrape
   la hauteur ainsi ajoutée, sinon le lien flotterait loin du bouton. */
.tr-mini{ margin:-10px 0 0; font-size:.8rem; line-height:1.4; }
.tr-mini a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--blue-deep);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(15,76,155,.4);
}
.tr-mini a:hover{
  color:var(--orange-hot); text-decoration-color:currentColor;
}

/* La mention des tarifs, à côté des deux cartes en vue large et sous
   elles en dessous de 1 200 px. Bornée en caractères, pas en pixels :
   c'est du texte suivi, et une ligne de 150 signes ne se lit plus.

   Une NOTE encadrée a vécu ici jusqu'au 31 août 2026 — elle disait de
   descendre à Aime et pas à Bourg-Saint-Maurice. Bourg ayant été retiré
   de la page, elle n'avait plus d'objet. */
.tr-maj{
  max-width:60ch;
  margin:clamp(16px,2.4vh,22px) 0 0;
  /* `--frost` et non `--frost-dim` : à cette taille, les 4,0:1 du second
     passent sous le seuil lisible. */
  font-size:.88rem; line-height:1.5; color:var(--frost);
  text-wrap:pretty;
}

/* ---- Le principe, en panneau crème et deux tirages ----

   Demande de l'utilisateur le 31 août 2026 : « rends cette partie plus
   chaleureuse ». Trois moyens, tous dans la charte :

   · un panneau CRÈME au lieu du blanc nu. C'est une troisième nuance de
     fond sur le site, et la seule qui soit chaude — les deux autres
     exceptions, la galerie et le pied de page, sont sombres. Le crème
     reprend l'ivoire des passe-partout de la galerie, il n'invente pas
     une couleur ;
   · une lueur ambrée très faible dans un coin, 5 % d'opacité : de
     l'atmosphère, pas un signal. L'orange reste réservé à ce qui réagit ;
   · deux tirages posés de travers, avec passe-partout, filet et ombre —
     le même langage que les photos accrochées de la galerie.

   Aucun texte n'est écrit sur les photos : elles sont claires, et la
   charte l'interdit. Les légendes sont sous l'image, sur le carton. */
/* Les deux nuances chaudes servent maintenant à deux blocs : le panneau
   du principe, et la paire de tirages posée dans la colonne de droite du
   bloc 2027. Elles restent hors de `:root` — la charte du site ne compte
   pas une couleur de fond de plus, ce sont deux blocs qui la partagent. */
.pri, .tirages{ --creme:#fbf6ef; --carton:#fdfbf6; }

.pri-panneau{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(26px,4vw,54px);
  border:1px solid rgba(30,110,208,.14);
  border-radius:var(--r-l);
  background:var(--creme);
  display:grid; gap:clamp(28px,4vw,48px);
}
/* La lueur, posée derrière tout le reste. `isolation:isolate` sur le
   panneau : sans elle, le z-index négatif ferait passer la lueur sous
   le fond de la page, donc invisible. */
.pri-panneau::before{
  content:""; position:absolute; z-index:-1;
  top:-30%; right:-10%; width:70%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(245,158,11,.14), rgba(245,158,11,0) 68%);
  pointer-events:none;
}
@media (min-width:980px){
  /* Le texte tient une colonne un peu plus large que les photos : c'est
     lui qu'on vient lire. */
  .pri-panneau{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); align-items:center; }
}
/* Le paragraphe du principe. Le texte est DICTÉ, mot pour mot : on n'en
   ajoute pas et on n'en retire pas — seule sa composition se règle.

   IL EST ÉCRIT EN LONG, pas en pavé. Demande de l'utilisateur le 1er
   septembre 2026 : « je veux pas que le texte soit un bloc mais plus en
   rectangle ». La borne en signes n'a donc plus rien à voir avec les
   56 du reste du site — les mêmes mots tiennent en cinq ou six lignes
   larges au lieu de neuf lignes étroites.

   Mais elle ne saute pas complètement, et c'est la correction du
   2 septembre 2026. Sans aucune borne, la ligne suivait la fenêtre :
   80 signes en 1 345 px — ce que l'utilisateur a validé — mais **134 en
   1 920**, relevé par le détecteur d'Impeccable. Une ligne de 134 signes
   ne se lit plus, l'œil perd le début de la suivante.
   `80ch` est calé pour redonner en grand écran exactement la longueur
   validée en 1 345. Sous cette largeur la borne ne joue pas : rien ne
   bouge sur la vue que l'utilisateur a approuvée. */
.pri-txt .lede{
  margin:0;
  font-size:clamp(1.04rem,1.45vw,1.22rem);
  line-height:1.6;
  max-width:80ch;
}

/* Le collage. La seconde photo est en absolu, donc hors du flux : le
   `padding-bottom` du conteneur lui réserve la place, sinon elle
   déborderait sur le bloc suivant. */
.pri-collage{
  position:relative;
  padding-bottom:13%;
  /* Elle dépasse un peu à droite : le collage doit paraître posé, pas
     rangé au cordeau. Le panneau est en `overflow:hidden`, rien ne peut
     s'échapper de la page. */
  padding-right:4%;
}

.pri-vue{
  margin:0;
  padding:10px 10px 0;
  background:var(--carton);
  border:1px solid rgba(30,110,208,.16);
  border-radius:10px;
  box-shadow:0 26px 48px -30px rgba(10,40,80,.55);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}
.pri-vue img{
  display:block; width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover;
  border-radius:4px;
}
.pri-vue figcaption{
  padding:9px 2px 10px;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em;
  font-size:.68rem; color:var(--frost);
}

.pri-vue-1{ transform:rotate(-1.8deg); }
/* Décalée de 8 px du bord de la réserve : inclinée, sa boîte dépasse de
   quelques pixels, et le panneau est en `overflow:hidden` — collée au
   bord, elle se ferait rogner un coin. */
.pri-vue-2{
  position:absolute; right:8px; bottom:8px; width:52%;
  transform:rotate(3.2deg);
}
@media (min-width:980px){
  .pri-vue-2{ width:56%; }
}

/* Au survol, le tirage se redresse et remonte : on le regarde de plus
   près. Rien d'autre ne bouge. */
@media (hover: hover) and (pointer: fine){
  .pri-vue:hover{
    transform:rotate(0deg) translateY(-6px);
    box-shadow:0 34px 60px -30px rgba(10,40,80,.6);
  }
  .pri-vue:hover figcaption{ color:var(--orange-hot); }
}

/* Sous prefers-reduced-motion, les tirages gardent leur inclinaison —
   ce n'est pas du mouvement — mais plus rien ne se redresse. */
@media (prefers-reduced-motion: reduce){
  .pri-vue{ transition:none; }
  .pri-vue:hover{ transform:rotate(-1.8deg); }
  .pri-vue-2:hover{ transform:rotate(3.2deg); }
}

/* ---- Une paire de tirages, hors du panneau crème ----

   Même passe-partout, même filet, même ombre que les deux photos du
   principe : c'est le langage des tableaux accrochés de la galerie,
   repris ici. Elles remplissent la colonne de droite du bloc 2027, qui
   ne portait qu'une mention de trois lignes au-dessus de 350 px de
   blanc.

   DEUX DE FRONT, ET NON L'UNE SOUS L'AUTRE. Empilées, elles feraient
   660 px de haut : la colonne dépasserait les cartes d'étape et la page
   s'allongerait de 250 px. Côte à côte, la paire tient dans la hauteur
   déjà occupée par les cartes — le blanc se remplit sans qu'on ait un
   pixel de plus à dérouler. C'est la même raison sous 1 200 px, où la
   colonne passe en pleine largeur.

   Elles ne portent aucun texte par-dessus : photos claires, règle de la
   charte. Les légendes sont sous l'image, sur le carton. */
.tirages{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);
  margin-top:clamp(18px,2.4vh,26px);
}
/* Debout (4/5) et non couchées comme celles du principe : la colonne est
   étroite et haute, un cadrage couché n'y remplirait qu'un tiers de la
   place et la paire laisserait 180 px de blanc sous elle. */
.tirages .pri-vue img{ aspect-ratio:4/5; }

/* Deux inclinaisons opposées : posées d'aplomb, elles redeviennent une
   grille de vignettes. */
.tirages .pri-vue-a{ transform:rotate(-1.6deg); }
.tirages .pri-vue-b{ transform:rotate(2.4deg); }
/* La règle de survol de `.pri-vue` joue déjà. Celle de
   `prefers-reduced-motion`, en revanche, rend l'inclinaison du premier
   tirage du principe (−1,8°) : il faut rendre la leur. */
@media (prefers-reduced-motion: reduce){
  .tirages .pri-vue-a:hover{ transform:rotate(-1.6deg); }
  .tirages .pri-vue-b:hover{ transform:rotate(2.4deg); }
}

/* ============================================================
   GRAND ÉCRAN — les trois pages intérieures

   `--maxw` vaut 1 600 px et `.wrap` est calé à gauche : passé
   1 728 px de fenêtre, le contenu s'arrêtait donc au milieu et
   laissait une bande blanche à droite, d'autant plus visible que la
   page est faite de blocs pleins. Demande de l'utilisateur le
   31 août 2026 : « adapte en plein écran ».

   Les pages concernées portent `page-full` sur leur `<body>` —
   `materiel.html`, `transport.html`, `logement.html`. L'accueil n'y
   est pas : ses sections sont déjà pleine largeur, ce sont des photos.

   La borne saute, mais pas la lisibilité : ce qui est du texte suivi
   reste borné en caractères (`ch`), jamais en pixels.
   ============================================================ */
/* Transport — les deux cartes à gauche, la mention des tarifs en
   colonne à droite. C'est elle qui remplit le bord droit, au lieu de
   flotter seule sous des cartes déjà larges. Le palier est plus bas que
   celui du plein écran : ce texte est borné en caractères, donc le
   blanc à sa droite apparaît bien avant 1 500 px. */
@media (min-width:1200px){
  .tr-corps{
    display:grid;
    grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);
    gap:clamp(24px,2.6vw,44px);
    align-items:start;
    margin-top:clamp(28px,4.5vh,44px);
  }
  .tr-corps .tr-etapes,
  .tr-corps .tr-maj{ margin-top:0; max-width:none; }
}

@media (min-width:1500px){
  .page-full .wrap{ max-width:none; }

  /* Le principe — la colonne de texte se resserre et les tirages
     prennent le reste : le paragraphe est borné à 56 caractères, une
     colonne plus large ne ferait que du vide autour de lui. */
  .page-full .pri-panneau{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }

  /* Matériel — les cartes peuvent grandir un peu, sans devenir des
     affiches : les visuels des loueurs ne dépassent pas 800 px. */
  .page-full .pack{ max-width:420px; }
  .page-full .pack-scene{ justify-content:center; }
}

/* ============================================================
   INSCRIPTION — LE PARCOURS EN TROIS ÉTAPES (inscription.html)
   Posé le 4 septembre 2026. Seule l'étape 1 existe ; les deux autres
   sont annoncées dans le fil et restent à dicter.

   La page est en DEUX COLONNES sur grand écran : le formulaire à
   gauche, le récapitulatif à droite, collé au défilement. C'est la
   forme de tous les tunnels de réservation regardés pour l'occasion, et
   elle règle du même coup le problème du plein écran — sans elle, un
   formulaire seul laisse la moitié droite d'un 2 560 px vide.

   Rien n'est borné en pixels : les deux colonnes sont en `fr`, et les
   grilles d'options se comptent en colonnes, jamais en largeurs.

   L'ORANGE MARQUE LE CHOIX FAIT, et c'est la règle du repos appliquée à
   la lettre : au repos une option est bleue et sur fond clair ; elle ne
   passe à l'orange qu'une fois cochée — un état actif, exactement ce
   que l'orange signale partout ailleurs sur le site.
   ============================================================ */
.page-resa .lede{ margin:0 0 clamp(22px,3vh,34px); }

/* ---------- le fil des trois étapes ----------
   Trois pastilles numérotées reliées par un filet. Les deux étapes à
   venir sont en retrait — pas grisées au point d'être illisibles :
   `--frost` donne 5,8:1, elles restent lisibles, elles ne sont
   simplement pas actives. */
.resa-fil{
  list-style:none; margin:0 0 clamp(28px,4vh,44px); padding:0;
  display:flex; flex-wrap:wrap; gap:clamp(10px,1.4vw,20px);
}
.resa-fil-p{
  display:flex; align-items:center; gap:10px; min-width:0;
  flex:1 1 auto;
  padding:clamp(11px,1.1vw,15px) clamp(14px,1.3vw,20px);
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-m);
}
.resa-fil-n{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--blue); color:#fff;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:.86rem; letter-spacing:.02em;
}
.resa-fil-t{
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  font-size:clamp(.86rem,.9vw,.98rem); color:var(--snow);
}
/* L'étape en cours : filet bleu franc et fond blanc, elle avance d'un
   cran sur les deux autres. */
.resa-fil-p[aria-current="step"]{
  background:#fff; border-color:var(--blue);
  box-shadow:0 34px 70px -46px rgba(10,40,80,.6);
}
.resa-fil-p.est-off{ background:transparent; }
.resa-fil-p.est-off .resa-fil-n{ background:var(--panel-2); color:var(--frost); }
.resa-fil-p.est-off .resa-fil-t{ color:var(--frost); }

/* ---------- la page en deux colonnes ---------- */
/* Le bandeau du compte, entre le fil et le formulaire : une ligne de
   texte et l'état de l'enregistrement. Discret — c'est une aide, pas
   une étape. */
.resa-compte{
  margin:calc(clamp(28px,4vh,44px) * -.5) 0 clamp(22px,3vh,34px);
  padding:12px 18px; border-radius:18px;
  border:1px solid var(--line); background:var(--panel);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px;
  font-size:.92rem; color:var(--snow);
}
.resa-compte[hidden]{ display:none; }
.resa-compte p{ margin:0; }
.resa-compte a{ color:var(--blue-deep); font-weight:600; }
.resa-compte a:hover{ color:var(--orange-hot); }
.resa-compte-statut{ font-size:.82rem; color:var(--frost); }
.resa-compte-statut:empty{ display:none; }
.resa-compte-statut.est-err{ color:var(--orange-hot); }
.resa-recommence{
  min-height:44px; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:.88rem; font-weight:600; color:var(--blue-deep);
  text-decoration:underline; text-underline-offset:3px;
}
.resa-recommence:hover{ color:var(--orange-hot); }
.resa-recommence:disabled{ opacity:.5; cursor:default; }

.resa{ display:grid; gap:clamp(18px,2vw,32px); align-items:start; }
@media (min-width:1080px){
  .resa{ grid-template-columns:minmax(0,2.1fr) minmax(0,1fr); }
}
.resa-form{ display:grid; gap:clamp(16px,1.8vw,26px); min-width:0; }

/* ---------- un bloc de l'étape ----------
   Le numéro est posé dans le coin, comme les `.eyebrow` du reste du
   site : c'est le même repère de lecture. */
.resa-bloc{
  min-width:0;
  padding:clamp(20px,2.2vw,34px);
  background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:0 30px 60px -50px rgba(10,40,80,.6);
}
.resa-num{
  margin:0;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:.78rem; letter-spacing:.22em; color:var(--blue);
}
.resa-titre{
  margin:6px 0 0;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; line-height:1.1;
  font-size:clamp(1.3rem,1.9vw,1.75rem); color:var(--snow);
}
.resa-lab{
  display:block; padding:0;
  font-family:var(--display); font-stretch:condensed;
  text-transform:uppercase; letter-spacing:.16em;
  font-size:.72rem; color:var(--frost);
}
.resa-aide{
  margin:8px 0 0; font-size:.86rem; color:var(--frost); max-width:60ch;
}
.resa-aide-haut{ margin:10px 0 clamp(16px,2vh,22px); }
/* Le lien vers une page d'explication, posé SOUS un groupe de choix et
   jamais dans un `label` : dedans, le clic cocherait l'option en même
   temps qu'il changerait de page. Zone de touche de 44 px, d'où la
   marge négative qui rattrape la hauteur ainsi ajoutée. */
.resa-lien{ margin:2px 0 -10px; font-size:.84rem; line-height:1.4; }
.resa-lien a{
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  color:var(--blue-deep);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(15,76,155,.4);
}
.resa-lien a svg{ width:15px; height:15px; transition:transform .25s; }
.resa-lien a:hover{ color:var(--orange-hot); text-decoration-color:currentColor; }
.resa-lien a:hover svg{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){
  .resa-lien a svg{ transition:none; }
  .resa-lien a:hover svg{ transform:none; }
}
.resa-ligne{ margin-top:clamp(18px,2.4vh,26px); }
.resa-ligne .resa-lab{ margin-bottom:8px; }
/* Le repli sans JS : les deux blocs garnis par le script ne sont pas
   vides pour autant, ils disent pourquoi. */
.resa-sansjs{ margin:0; font-size:.9rem; color:var(--frost); }

/* ---------- le compteur de participants ----------
   Les deux boutons font 44 px de côté — la zone de touche minimale du
   site. Le champ reste un vrai `number` : sur un téléphone, taper « 6 »
   va plus vite que d'appuyer cinq fois sur le plus. */
.resa-nb{ display:flex; align-items:center; gap:10px; }
.resa-nb-b{
  flex:none; width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); color:var(--blue);
  cursor:pointer; transition:border-color .25s, color .25s, background .25s;
}
.resa-nb-b svg{ width:19px; height:19px; }
.resa-nb-b:hover{ border-color:var(--orange); color:var(--orange-hot); }
.resa-nb-b[disabled]{ opacity:.4; cursor:not-allowed; }
.resa-nb-b[disabled]:hover{ border-color:var(--line); color:var(--blue); }
.resa-nb-v{
  width:82px; text-align:center;
  font:inherit; font-family:var(--display); font-stretch:condensed;
  font-weight:700; font-size:1.3rem; color:var(--snow);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-s);
  padding:10px 6px; min-height:46px;
  transition:border-color .25s, box-shadow .25s;
}
.resa-nb-v:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,110,208,.14); }

/* ---------- un groupe de choix ----------
   `fieldset` sans son cadre : le cadre du navigateur est laid et ne
   suit aucune charte. La `legend` reste, elle : c'est elle qui nomme le
   groupe pour un lecteur d'écran. */
.resa-choix{
  margin:clamp(20px,2.6vh,30px) 0 0; padding:0; border:0; min-width:0;
}
.resa-choix .resa-lab{ margin-bottom:10px; }

/* ---------- une option ----------
   Le bouton radio est retiré de l'écran mais PAS du document : il garde
   le focus, le clavier et le lecteur d'écran. C'est la carte qui se
   peint à sa place, par le sélecteur frère `:checked + .opt-in`.
   Pas de `:has()` ici : le motif frère marche partout, et il n'y a rien
   à gagner à s'en priver. */
/* Le nombre de colonnes suit le nombre d'options, et la dernière rangée
   est toujours rattrapée — même règle que les cinq cartes de `#plus` :
   deux options sur trois colonnes laissent un trou, cinq options sur
   deux colonnes en laissent un aussi. D'où le `span` sur la dernière.
   Les paliers ne sont pas les mêmes pour tous : le logement tient dans
   quatre colonnes étroites (« 4 personnes » fait deux mots), le
   matériel non — « Pack Découverte » et sa ligne de composition
   réclament 178 px, qu'une colonne du formulaire n'atteint pas avant
   1 800 px de fenêtre. */
.opts{ display:grid; gap:clamp(8px,.8vw,12px); }
@media (min-width:480px){
  .opts-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:560px){
  .opts-4,
  .opts-5{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .opts-5>.opt:last-child{ grid-column:1 / -1; }
}
@media (min-width:1080px){
  .opts-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (min-width:1800px){
  .opts-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .opts-5>.opt:last-child{ grid-column:auto; }
}
/* SKI OU SNOWBOARD — 10 octobre 2026. Deux cartes courtes, côte à côte
   à toute largeur (un seul mot chacune), posées au-dessus des packs. */
.opts-glisse{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:clamp(10px,1vw,14px); }
.opts-glisse .opt-in{ min-height:0; justify-content:center; text-align:center; }
/* LES LOGEMENTS RECONSTRUITS DEPUIS LES TARIFS — 7 octobre 2026.
   Leur nombre suit l'admin (`data-n`, posé par le JS) : trois, quatre,
   cinq… Même règle que partout : la dernière rangée est rattrapée.
   Deux colonnes sur tablette, la dernière carte d'un compte impair en
   pleine largeur ; en grand, une rangée tant que les cartes gardent
   ~130 px, sinon 3 + 2 sur une grille de six. */
@media (min-width:560px){
  .opts-l{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .opts-l[data-impair]>.opt:last-child{ grid-column:1 / -1; }
}
@media (min-width:1080px){
  .opts-l[data-n="3"]{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .opts-l[data-n="4"],
  .opts-l[data-n="7"],
  .opts-l[data-n="8"]{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .opts-l[data-n="5"]{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .opts-l[data-n="5"]>.opt{ grid-column:span 2; }
  .opts-l[data-n="5"]>.opt:nth-child(n+4){ grid-column:span 3; }
  .opts-l[data-n="6"]{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .opts-l[data-impair]:not([data-n="5"])>.opt:last-child{ grid-column:auto; }
}
@media (min-width:1300px){
  .opts-l[data-n="5"]{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .opts-l[data-n="5"]>.opt,
  .opts-l[data-n="5"]>.opt:nth-child(n+4){ grid-column:auto; }
}
.opt{ position:relative; display:block; min-width:0; cursor:pointer; }
.opt input{
  position:absolute; width:1px; height:1px; margin:0;
  opacity:0; pointer-events:none;
}
.opt-in{
  display:flex; flex-direction:column; gap:3px;
  height:100%;
  padding:clamp(12px,1.1vw,16px) clamp(13px,1.2vw,18px);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-s);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.opt-nom{
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; line-height:1.25;
  font-size:clamp(.94rem,.95vw,1.04rem); color:var(--snow);
}
.opt-det{ font-size:.8rem; color:var(--frost); line-height:1.35; }
/* Le prix est collé en bas : les cinq packs n'ont pas la même longueur
   de description, et sans cela les cinq prix tombent à cinq hauteurs. */
.opt-prix{
  margin-top:auto; padding-top:6px;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:1.02rem; color:var(--blue);
}
.opt:hover .opt-in{ border-color:var(--orange); }
/* L'état choisi. C'est la seule chose de la page qui soit orange au
   repos — et c'en est bien un état actif, pas une décoration. */
.opt input:checked + .opt-in{
  border-color:var(--orange);
  background:rgba(249,115,22,.08);
  box-shadow:0 8px 24px -14px rgba(194,65,12,.5);
}
.opt input:checked + .opt-in .opt-nom,
.opt input:checked + .opt-in .opt-prix{ color:var(--orange-hot); }
/* Le contour du clavier suit le bouton caché : sans cette règle, se
   déplacer aux flèches dans un groupe radio ne se voit nulle part. */
.opt input:focus-visible + .opt-in{
  outline:2px solid var(--blue); outline-offset:2px;
}
/* Un logement trop petit pour le groupe est mis hors service par le JS.
   Il reste lisible : on doit comprendre qu'il existe et pourquoi il ne
   se prend pas. */
.opt input:disabled + .opt-in{
  opacity:.45; background:var(--panel-2); border-style:dashed;
}
.opt:has(input:disabled){ cursor:not-allowed; }

/* ---------- la case du casque ----------
   La case native est remplacée par un carré dessiné, pour la même
   raison que les options : celle du navigateur ne se met pas à la
   charte. Elle garde 44 px de zone de touche par sa hauteur de ligne. */
.opt-case{
  display:flex; align-items:center; gap:11px;
  margin-top:clamp(10px,1vw,14px); min-height:44px;
  cursor:pointer; color:var(--snow);
}
.opt-case input{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.opt-case-b{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:var(--r-s);
  background:#fff; border:1px solid var(--line); color:transparent;
  transition:border-color .2s, background .2s, color .2s;
}
.opt-case-b svg{ width:15px; height:15px; }
.opt-case:hover .opt-case-b{ border-color:var(--orange); }
.opt-case input:checked + .opt-case-b{
  background:var(--orange); border-color:var(--orange); color:#fff;
}
.opt-case input:focus-visible + .opt-case-b{
  outline:2px solid var(--blue); outline-offset:2px;
}
.opt-case-t{ font-size:.92rem; }
.opt-case-t b{
  font-family:var(--display); font-stretch:condensed;
  color:var(--blue); margin-left:4px;
}
.opt-case input:checked ~ .opt-case-t b{ color:var(--orange-hot); }

/* ---------- une fiche de participant ----------
   Fond blanc sur le panneau bleuté du bloc : c'est ce qui détache une
   personne de la suivante sans ajouter un filet de plus. */
.resa-liste{ display:grid; gap:clamp(12px,1.3vw,18px); }
.fiche{
  min-width:0;
  padding:clamp(16px,1.7vw,24px);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-m);
}
.fiche-t{
  margin:0 0 clamp(14px,1.6vh,18px);
  display:flex; align-items:baseline; flex-wrap:wrap; gap:10px;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; line-height:1.2;
  font-size:1.02rem; color:var(--snow);
}
/* Le rang passe en second plan dès que le nom est écrit : c'est le nom
   qu'on cherche des yeux quand on revient corriger une fiche. */
.fiche-r{ color:var(--blue); }
.fiche-nom{
  font-family:var(--body); font-weight:400;
  text-transform:none; letter-spacing:0;
  font-size:.92rem; color:var(--frost);
}
.fiche-nom:empty{ display:none; }
.fiche-grille{ display:grid; gap:12px; grid-template-columns:minmax(0,1fr); }
@media (min-width:520px){
  .fiche-grille{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1500px){
  /* Cinq champs, cinq colonnes : la fiche tient sur une seule ligne, et
     c'est tout l'intérêt du grand écran quand il y a sept fiches. */
  .fiche-grille{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}
.fiche-opt .resa-choix:first-of-type{ margin-top:0; }

/* ---------- le récapitulatif ----------
   Collé au défilement à partir de 1 080 px : on garde ses choix sous
   les yeux pendant qu'on remplit sept fiches. En dessous, il repasse
   dans le flux, au-dessus du bouton. */
.resa-recap{ min-width:0; }
@media (min-width:1080px){
  .resa-recap{ position:sticky; top:96px; }
}
.resa-recap-in{
  padding:clamp(20px,2.2vw,30px);
  background:var(--panel-2);
  border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:0 30px 60px -50px rgba(10,40,80,.6);
}
.resa-recap-t{
  margin:8px 0 0;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; line-height:1.1;
  font-size:clamp(1.3rem,1.7vw,1.6rem); color:var(--snow);
}
.resa-recap-sous{ margin:6px 0 0; font-size:.88rem; color:var(--frost); }
.resa-recap-l{
  margin:clamp(16px,2vh,22px) 0 0; padding:0;
  display:grid; gap:0;
}
.resa-recap-l>div{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-block:11px; border-top:1px solid var(--line-soft);
}
.resa-recap-l dt{
  font-family:var(--display); font-stretch:condensed;
  text-transform:uppercase; letter-spacing:.12em;
  font-size:.7rem; color:var(--frost);
}
.resa-recap-l dd{
  margin:0; text-align:right;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:1rem; color:var(--snow);
}
/* La liste des participants. Chacun tient sur deux lignes : son nom, et
   ses trois choix en dessous. */
.resa-recap-p{
  list-style:none; margin:clamp(14px,1.8vh,20px) 0 0; padding:0;
  display:grid; gap:10px;
}
.resa-recap-p li{
  padding:11px 13px;
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-s);
}
.resa-recap-p b{
  display:block;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  font-size:.9rem; color:var(--snow);
}
.resa-recap-p span{
  display:block; margin-top:3px;
  font-size:.82rem; color:var(--frost); line-height:1.45;
}
.resa-recap-tot{
  margin:clamp(16px,2vh,22px) 0 0;
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-top:14px; border-top:1px solid var(--line);
  font-family:var(--display); font-stretch:condensed;
  text-transform:uppercase; letter-spacing:.12em;
  font-size:.74rem; color:var(--frost);
}
.resa-recap-tot b{
  letter-spacing:.01em; font-size:1.5rem; color:var(--snow);
}
.resa-recap-note{
  margin:10px 0 0; font-size:.8rem; color:var(--frost); line-height:1.5;
}

/* ---------- le bas du formulaire ---------- */
.resa-err{ margin:0; }
/* Le bouton de suite : terne tant qu'il manque un choix, allumé dès que
   l'étape est complète. La classe `.pret` est posée par le JS, à chaque
   recalcul du récapitulatif.

   IL N'EST JAMAIS DÉSACTIVÉ. Un bouton grisé et mort ne dit pas ce qui
   manque ; celui-ci se clique, affiche le message et emmène le focus au
   premier champ en défaut. La couleur annonce, elle n'interdit pas —
   d'où un simple retrait de saturation, et non l'aspect d'un bouton
   hors service. */
.resa-suite{
  width:100%;
  filter:saturate(.3) opacity(.72);
  transition:filter .4s ease, box-shadow .4s ease;
}
.resa-suite.pret{
  filter:none;
  box-shadow:0 16px 36px -14px rgba(30,110,208,.6);
}
/* Le passage à l'état prêt se voit une fois, par une onde qui part du
   bouton. Une seule passe : rien ne clignote sur cette page. */
@media (prefers-reduced-motion:no-preference){
  .resa-suite.pret{ animation:pretOnde .6s ease-out; }
}
@keyframes pretOnde{
  0%{ box-shadow:0 0 0 0 rgba(249,115,22,.45), 0 16px 36px -14px rgba(30,110,208,.6); }
  100%{ box-shadow:0 0 0 14px rgba(249,115,22,0), 0 16px 36px -14px rgba(30,110,208,.6); }
}
.resa-form .form-note{ margin:0; text-align:center; }
.resa-done{ max-width:none; }
/* L'écran « Réservation confirmée », posé par le JS à la place des
   étapes une fois Formspree d'accord (8 octobre 2026). */
.resa-confirme{
  margin:0; display:grid; justify-items:start; gap:12px;
  padding:clamp(24px,3vw,44px); border-radius:28px;
  background:var(--creme, var(--panel)); border:1px solid rgba(30,110,208,.14);
  box-shadow:0 34px 70px -46px rgba(10,40,80,.6);
}
.resa-confirme[hidden]{ display:none; }
.resa-confirme-ico{
  width:52px; height:52px; fill:none; stroke:var(--blue); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.resa-confirme-t{
  margin:0; font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:clamp(1.6rem,2.6vw,2.3rem); letter-spacing:.02em; text-transform:uppercase;
  color:var(--snow);
}
.resa-confirme-t:focus{ outline:none; }
.resa-confirme-txt{ margin:0; max-width:60ch; font-size:1.02rem; line-height:1.6; color:var(--snow); text-wrap:pretty; }
.resa-confirme-lien{ margin-top:6px; }
@media (prefers-reduced-motion:no-preference){
  .resa-confirme{ animation:resaConfirme .5s cubic-bezier(.2,.8,.2,1) both; }
  .resa-confirme-ico path{ stroke-dasharray:1; stroke-dashoffset:1; animation:resaCoche .5s .25s ease-out forwards; }
}
@keyframes resaConfirme{ from{ opacity:0; translate:0 14px; } }
@keyframes resaCoche{ to{ stroke-dashoffset:0; } }

/* ---------- les étapes ----------
   Une `.resa-etape` par étape, une seule visible. Elle reprend le
   rythme du formulaire. La règle `[hidden]` est écrite à part : le
   `display:grid` l'emporterait sinon sur l'attribut. */
.resa-etape{ display:grid; gap:clamp(16px,1.8vw,26px); min-width:0; }
.resa-etape[hidden], .resa-prec[hidden]{ display:none; }
.resa-prec{ width:100%; justify-content:center; }

/* Les coordonnées du responsable, sur une grille de SIX colonnes, dans
   l'ordre dicté : nom et prénom par deux (`.rc-demi`), e-mail et
   adresse par deux, ville, code postal et pays par trois (`.rc-tiers`),
   le téléphone seul sur toute la largeur (`.rc-plein`) — il vient en
   dernier, et une moitié de rangée laisserait un trou. Aucune rangée ne
   finit à moitié vide. */
.resa-coord{ display:grid; gap:12px; grid-template-columns:minmax(0,1fr); }
@media (min-width:520px){
  .resa-coord{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .rc-demi{ grid-column:span 3; }
  .rc-tiers{ grid-column:span 2; }
  .rc-plein{ grid-column:1 / -1; }
}
/* ---------- l'étape 3, la finalisation ----------
   Du texte à lire, pas un formulaire : le chapô, deux fiches côte à
   côte (payer, le conseil), l'encadré du Ps, et la question de la fin.
   L'encadré est BLEU et non orange — au repos rien n'est orange, et un
   rappel n'est pas une erreur. C'est le filet épais de gauche et le
   dessin du triangle qui le signalent. */
.resa-fin-chapo{
  margin:clamp(12px,1.6vh,18px) 0 0;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:clamp(1.1rem,1.3vw,1.3rem); color:var(--blue-deep);
}
.resa-fin-txt{ margin:8px 0 0; font-size:.95rem; line-height:1.6; color:var(--snow); max-width:70ch; }
.fiche .resa-fin-txt{ margin:0; }
.resa-fin-grille{
  display:grid; gap:12px; margin-top:clamp(18px,2.2vh,26px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:700px){
  .resa-fin-grille{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.resa-alerte{
  display:flex; gap:14px; align-items:flex-start;
  margin-top:12px; padding:clamp(14px,1.6vw,20px);
  background:var(--blanc-chaud,#fff); border:1px solid var(--line);
  border-left:4px solid var(--blue); border-radius:var(--r-m);
}
.resa-alerte svg{ flex:none; width:24px; height:24px; color:var(--blue); margin-top:1px; }
.resa-alerte p{ margin:0; font-size:.95rem; line-height:1.6; color:var(--snow); }
/* L'e-mail du responsable = celui du compte (20 octobre 2026) : un
   encadré à la place du champ, même dessin que le Ps de l'étape 3. */
.resa-mail-compte{ margin:14px 0 20px; }
.resa-mail-compte b{ overflow-wrap:anywhere; }

/* PAS DE COMPTE, PAS DE FINALISATION — 20 octobre 2026. Un panneau bleu
   plein, posé en tête de l'étape 3 : c'est la seule chose qui bloque,
   il doit se voir avant le reste. Bleu et non orange : règle du repos. */
.resa-gate{
  display:flex; gap:16px; align-items:flex-start;
  margin-top:clamp(14px,1.8vh,20px); padding:clamp(16px,1.8vw,24px);
  background:var(--blue-deep); color:#fff; border-radius:var(--r-m);
  box-shadow:0 10px 26px -14px rgba(15,76,155,.55);
}
.resa-gate[hidden]{ display:none; }
.resa-gate > svg{ flex:none; width:28px; height:28px; margin-top:2px; }
.resa-gate p{ margin:0; }
.resa-gate-t{
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:clamp(1.1rem,1.3vw,1.3rem); line-height:1.2;
}
.resa-gate-txt{ margin-top:6px !important; font-size:.95rem; line-height:1.55; color:#e3edfb; }
.resa-gate-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.resa-gate .btn-primary{ background:#fff; color:var(--blue-deep); }
.resa-gate .btn-primary:hover{ background:var(--orange); color:#fff; }
.resa-gate .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.55); }
.resa-gate .btn-ghost:hover{ color:#fff; border-color:var(--hot); }
@media (max-width:519px){
  .resa-gate{ flex-direction:column; gap:10px; }
  .resa-gate-btns .btn{ white-space:normal; flex:1 1 100%; justify-content:center; text-align:center; }
}
.resa-com{ margin-top:clamp(18px,2.2vh,26px); }
.resa-com textarea{ min-height:120px; }
.resa-com-opt{ font-weight:400; text-transform:none; letter-spacing:0; }
.resa-fin-q{ margin-top:clamp(18px,2.2vh,26px); }
.resa-fin-q a{ color:var(--blue-deep); font-weight:600; text-underline-offset:3px; }
.resa-fin-q a:hover{ color:var(--orange-hot); }

/* Une étape déjà remplie : ni éteinte, ni en cours. */
.resa-fil-p.est-fait .resa-fil-n{ background:var(--snow); }

/* ============================================================
   LES GARANTIES DE L'ASSURANCE — `assurance.html`, 6 septembre 2026

   Quatre cartes, reprises telles quelles de `#plus` (`logement.html`) :
   même fond, même filet, même ombre, même pastille. Seule la grille
   change, et c'est tout l'intérêt d'un bloc à part : QUATRE tombe juste
   sur toutes les colonnes — 1, 2 puis 4 —, là où les cinq atouts du
   logement demandent une dernière rangée rattrapée à chaque palier.
   Les colonnes sont en `fr`, jamais bornées en pixels : une borne
   choisie pour 1 345 px laisse un demi-écran vide en 2 560.
   ============================================================ */
.gar-cartes{
  list-style:none; margin:clamp(22px,3vh,34px) 0 0; padding:0;
  display:grid; gap:clamp(12px,1.2vw,20px);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:620px){
  .gar-cartes{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1100px){
  .gar-cartes{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
/* Sur téléphone la carte est couchée — pastille à gauche, libellé à
   droite : sur une colonne unique, une carte debout n'apporte rien
   qu'une ligne n'apporte déjà, et coûte 60 px de plus. Même règle que
   les cartes de `#plus`. */
.gar-carte{
  display:flex; align-items:center; gap:14px; min-width:0;
  padding:clamp(14px,3.6vw,18px);
  background:var(--panel);
  border:1px solid var(--line); border-radius:18px;
  box-shadow:0 34px 70px -46px rgba(10,40,80,.6);
}
/* Interligne à 1,3 et non à 1,25 comme les cartes de `#plus` : deux
   des quatre libellés passent sur deux lignes en vue large, et un
   libellé de deux lignes a besoin d'un peu plus d'air. */
.gar-txt{
  margin:0;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; line-height:1.3;
  font-size:clamp(1rem,1.05vw,1.18rem); color:var(--snow);
}
@media (min-width:620px){
  .gar-carte{
    flex-direction:column; align-items:stretch; gap:0;
    padding:clamp(18px,1.7vw,28px);
  }
  /* Le libellé est collé en bas : la grille étire les quatre cartes à
     la hauteur de la plus haute, et sans cela « Frais de rapatriement »
     flotterait au milieu de la sienne pendant que sa voisine en
     remplirait trois lignes. */
  .gar-txt{
    margin-top:auto;
    padding-top:clamp(14px,1.4vw,20px);
    border-top:1px solid var(--line-soft);
  }
}
/* La précision entre parenthèses : minuscules et police du texte
   courant, sinon elle pèse plus lourd que le libellé qu'elle précise.
   Même traitement que `.plus-note`. */
.gar-note{
  display:block; margin-top:4px;
  font-family:var(--body); font-weight:400;
  text-transform:none; letter-spacing:0; line-height:1.4;
  font-size:.88rem; color:var(--frost);
}
.gar-bas{ margin:clamp(20px,2.6vh,30px) 0 0; font-size:.86rem; color:var(--frost); max-width:60ch; }

/* ============================================================
   LA LUEUR QUI SUIT LA SOURIS — brique `[data-lueur]`

   Portée du composant « login-1 » de 21st.dev, le même que la carte de
   connexion, et sur la seule demande de l'utilisateur : « juste l'effet
   avec la souris, le reste tu t'en fous ». Elle habille aujourd'hui les
   quatre cartes de `assurance.html` et les trois étapes du parcours
   d'inscription.

   Deux calques, comme dans le modèle : un disque de lumière dans le
   panneau, et un trait de lumière sur son filet. Le JS n'écrit que deux
   variables, `--mx` et `--my`, et pose la classe `.souris` ; tout le
   reste est peint ici.

   Le filet est obtenu par un masque en XOR : le dégradé est peint sur
   tout le panneau, puis tout l'intérieur en est retranché — il ne reste
   que le liseré d'un pixel. `mask-composite` n'a pas de repli : là où
   il manque, le disque reste et le filet ne se peint pas.

   LES DEUX CALQUES SONT EN `z-index:-1`, ET LE PANNEAU EN
   `isolation:isolate`. C'est ce qui les range entre le fond du panneau
   et son contenu, sans avoir à relever chaque enfant : un
   pseudo-élément positionné se peint sinon PAR-DESSUS le texte.

   Décor pur : `pointer-events:none` sur les deux, et la classe
   `.souris` n'est posée qu'à l'entrée d'un pointeur fin. Au doigt rien
   ne change ; sous `prefers-reduced-motion`, les deux calques
   n'existent pas du tout.
   ============================================================ */
[data-lueur]{ position:relative; isolation:isolate; overflow:hidden; }
[data-lueur]::before,
[data-lueur]::after{
  content:""; position:absolute; inset:0; z-index:-1;
  pointer-events:none; opacity:0; transition:opacity .28s;
}
/* le disque */
[data-lueur]::before{
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    rgba(249,115,22,.24), rgba(249,115,22,.08) 42%, transparent 68%);
}
/* le filet */
[data-lueur]::after{
  padding:1px; border-radius:inherit;
  background:radial-gradient(190px circle at var(--mx,50%) var(--my,50%),
    var(--orange), rgba(249,115,22,.35) 40%, transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,
               linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,
       linear-gradient(#000 0 0);
  mask-composite:exclude;
}
[data-lueur].souris::before,
[data-lueur].souris::after{ opacity:1; }
/* Le disque d'un grand panneau est plus large que celui d'une carte :
   260 px perdus au milieu des trois étapes ne se verraient pas. */
.resa-bloc[data-lueur]::before{
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),
    rgba(249,115,22,.30), rgba(249,115,22,.10) 42%, transparent 68%);
}
.resa-bloc[data-lueur]::after{
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    var(--orange), rgba(249,115,22,.3) 40%, transparent 62%);
}
@media (prefers-reduced-motion:reduce){
  [data-lueur]::before,
  [data-lueur]::after{ display:none; }
}

/* ============================================================
   CHALEUR — inscription.html et assurance.html, 6 septembre 2026

   Demande de l'utilisateur : « rajoute des effets, des trucs qui vont
   rendre la page inscription et assurance chaleureuses, plus vivantes »,
   en gardant la structure et les informations. RIEN N'A DONC BOUGÉ DANS
   LE HTML hors deux ajouts : la classe `page-chaleur` sur le <body>, et
   le panneau crème qui enveloppe les cartes de garantie. Retirer la
   classe et la page revient exactement à ce qu'elle était.

   LE CHAUD DU SITE EST LE CRÈME, PAS UN ORANGE DE PLUS : c'est la
   nuance du panneau du principe de transport.html, elle-même tirée de
   l'ivoire des passe-partout de la galerie. La règle du repos tient
   donc entière — au repos rien n'est orange ; l'orange n'apparaît qu'au
   survol, au focus et à l'état coché.

   Cinq gestes, et pas un de plus — le premier est celui qui compte :
   1. le fond des panneaux passe du bleu pâle au crème ;
      UN GRAIN DE PAPIER A VÉCU DESSUS UNE HEURE, en data-URI à 4 % : il
      ne se voyait pas, et il rendait dix fausses alertes d'Impeccable —
      buried-raster sur le grain lui-même, et low-contrast partout, le
      détecteur composant le texte contre le bruit au lieu du crème. Ni
      l'une ni l'autre de ces deux règles ne se coupe sur une valeur
      précise. Retiré : le crème seul porte la chaleur ;
   2. ce qui se survole se soulève, par la propriété `translate` et
      JAMAIS par `transform` : les blocs portent déjà une apparition
      `.rv` qui écrit dans leur transform, et deux mains dans la même
      propriété, l'une efface l'autre ;
   3. les traits des pastilles se dessinent quand la carte entre à
      l'écran — d'où le pathLength="1" posé sur chaque chemin du HTML,
      qui rend la longueur du trait indépendante du dessin ;
   4. ce qui change de valeur le montre : l'option cochée fait un pas
      d'échelle, le total et le compteur roulent.

   Tout est coupé sous prefers-reduced-motion.
   ============================================================ */
/* ---------- 0. le papier n'est plus blanc ----------
   Demande de l'utilisateur, le jour même du crème : « enlève le fond
   blanc dans les cases, il y a trop de blanc sur la page assurance et
   inscription ». Le blanc ne s'enlève pas case par case — c'est le
   PAPIER qu'il faut changer, sinon les cases flottent sur une page qui
   reste blanche.

   Quatre niveaux, du plus foncé au plus clair, et l'ordre compte : le
   fond de la page est le plus soutenu, le panneau vient au-dessus, la
   carte est la plus claire. C'est ce dégradé qui donne la profondeur ;
   à l'envers, tout s'aplatit.

   `--ink` et `--panel` sont REDÉFINIS ici, sur le body seulement : le
   fond de page, celui de la barre du haut et celui des cartes suivent
   alors sans qu'une seule règle du reste du fichier ait à bouger. Les
   autres pages gardent leur blanc, la charte n'a pas changé.
   ============================================================ */
.page-chaleur{
  --ink:#f7f1e7;        /* le papier de la page, et la barre du haut */
  --ink-2:#fdfaf5;
  --panel:#fdfaf5;
  --panel-2:#f4ecdf;
  --creme:#fbf6ef;      /* les panneaux */
  --carton:#fdfbf6;
  --blanc-chaud:#fffdf9; /* ce qui était #fff dans les cases */
}
/* Les blancs écrits en dur : champs, pastilles, cartes intérieures.
   Ils ne passent par aucun jeton, il faut donc les reprendre un à un.

   UNE SEULE CARTE RESTE EN BLANC PUR, ET C'EST VOULU : `.pack`, sur
   materiel.html. Les visuels des loueurs sont détourés sur blanc et
   l'un d'eux est un PNG transparent — c'est le fond de la carte qu'on
   voit à travers. En crème, chaque photo poserait son rectangle blanc
   au milieu de la carte. `.pack-fleche`, posée dessus, reste blanche
   pour la même raison. */
.page-chaleur .field input,
.page-chaleur .field select,
.page-chaleur .field textarea,
.page-chaleur .resa-nb-v,
.page-chaleur .resa-nb-b,
.page-chaleur .opt-in,
.page-chaleur .opt-case-b,
.page-chaleur .fiche,
.page-chaleur .resa-recap-p li,
.page-chaleur .plus-ico,
.page-chaleur .plus-eq li,
.page-chaleur .plus-serv li,
.page-chaleur .duo-ico,
.page-chaleur .tr-ico,
.page-chaleur .gar-panneau .gar-carte,
.page-chaleur .resa-fil-p[aria-current="step"]{ background:var(--blanc-chaud); }
/* Le panneau du menu téléphone : il couvre la page, il doit être du
   même papier. */
.page-chaleur .nav-links{ background:rgba(255,253,249,.97); }
/* Le bandeau défilant garde son éclairage par le haut, mais dans les
   nuances chaudes : son dégradé partait du blanc pur et passait par un
   bleu pâle, deux couleurs qui n'existent plus sur la page. */
.page-chaleur .marquee{
  background:linear-gradient(180deg,var(--blanc-chaud) 0%,#f7efe2 55%,#f0e4d2 100%);
}

/* ---------- 1. les fonds ---------- */
.page-chaleur .resa-bloc,
.page-chaleur .resa-fil-p{ background:var(--creme); }
.page-chaleur .resa-fil-p.est-off{ background:transparent; }
/* Le récapitulatif reste le plus clair des trois : c'est un ticket, il
   doit se lire comme posé PAR-DESSUS le formulaire, pas comme un
   panneau de plus. */
.page-chaleur .resa-recap-in{
  background:var(--carton);
  border-color:rgba(30,110,208,.16);
}
/* Les cartes intérieures gardent le blanc pur : c'est leur écart au
   crème qui les détache, et il n'y a rien à ajouter pour cela. */

/* Le panneau crème des garanties — même dessin que .pri-panneau de
   transport.html, lueur ambrée comprise. Elle est de l'atmosphère et
   non un signal : rien n'y est écrit ni cliquable. */
.gar-panneau{
  position:relative; isolation:isolate; overflow:hidden;
  margin-top:clamp(22px,3vh,34px);
  padding:clamp(20px,3vw,40px);
  border:1px solid rgba(30,110,208,.14);
  border-radius:var(--r-l);
  background:var(--creme);
}
.gar-panneau::before{
  content:""; position:absolute; z-index:-1;
  top:-40%; right:-8%; width:60%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(245,158,11,.14), rgba(245,158,11,0) 68%);
  pointer-events:none;
}
/* Le panneau porte la marge haute et le rembourrage : la grille et la
   mention du tarif n'ont plus à les porter. */
.gar-panneau .gar-cartes{ margin-top:0; }
.gar-panneau .gar-bas{ margin-bottom:0; }

/* ---------- 2. ce qui se survole se soulève ---------- */
.page-chaleur .gar-carte,
.page-chaleur .opt-in,
.page-chaleur .fiche{
  transition:translate .3s cubic-bezier(.2,.8,.2,1),
             box-shadow .3s, border-color .25s, background .25s;
}
.page-chaleur .gar-carte:hover{
  translate:0 -5px;
  box-shadow:0 44px 80px -44px rgba(10,40,80,.72);
  border-color:rgba(249,115,22,.45);
}
/* La pastille chauffe avec la carte : l'orange dit que l'objet réagit. */
.page-chaleur .gar-carte .plus-ico{ transition:color .25s, border-color .25s; }
.page-chaleur .gar-carte:hover .plus-ico{
  color:var(--orange-hot); border-color:var(--orange);
}
.page-chaleur .opt:hover .opt-in{
  translate:0 -2px;
  box-shadow:0 18px 34px -26px rgba(10,40,80,.6);
}
/* La fiche s'allume quand on écrit dedans : c'est la seule d'un groupe
   de sept à réagir, on sait où l'on est. */
.page-chaleur .fiche:focus-within{
  border-color:var(--blue);
  box-shadow:0 24px 44px -34px rgba(10,40,80,.7);
}

/* ---------- 3. les traits qui se dessinent ----------
   pathLength="1" est posé sur chaque chemin dans le HTML : la longueur
   du trait vaut alors 1, quel que soit le dessin, et le même dasharray
   marche pour l'hélicoptère comme pour l'écusson. */
@media (prefers-reduced-motion:no-preference){
  .page-chaleur .gar-carte .plus-ico path{
    stroke-dasharray:1; stroke-dashoffset:1;
  }
  .page-chaleur .gar-carte.in .plus-ico path{
    animation:traitDessin .9s cubic-bezier(.4,0,.2,1) forwards;
  }
  /* Les quatre pastilles se dessinent l'une après l'autre, dans l'ordre
     de lecture — le même décalage que les apparitions .rv-dN. */
  .page-chaleur .gar-carte:nth-child(2) .plus-ico path{ animation-delay:.10s; }
  .page-chaleur .gar-carte:nth-child(3) .plus-ico path{ animation-delay:.20s; }
  .page-chaleur .gar-carte:nth-child(4) .plus-ico path{ animation-delay:.30s; }
}
@keyframes traitDessin{ to{ stroke-dashoffset:0; } }

/* ---------- 4. ce qui change le montre ----------
   L'option cochée fait un pas d'échelle. L'animation part au moment où
   la règle se met à correspondre, donc à chaque fois qu'on coche ; et
   transform est libre ici, une option ne porte pas d'apparition. */
@media (prefers-reduced-motion:no-preference){
  .page-chaleur .opt input:checked + .opt-in{ animation:optPop .34s ease; }
  .page-chaleur .opt-case input:checked + .opt-case-b{ animation:optPop .34s ease; }
}
@keyframes optPop{
  0%{ transform:scale(1); }
  42%{ transform:scale(1.035); }
  100%{ transform:scale(1); }
}

/* L'étape en cours porte un trait qui se remplit une fois, au
   chargement : elle est ouverte, les deux autres attendent. UNE SEULE
   PASSE — rien ne clignote en boucle sur cette page. */
@media (prefers-reduced-motion:no-preference){
  .page-chaleur .resa-fil-p[aria-current="step"]{ position:relative; overflow:hidden; }
  .page-chaleur .resa-fil-p[aria-current="step"]::after{
    content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
    background:linear-gradient(90deg,var(--blue),rgba(30,110,208,0));
    transform-origin:left; transform:scaleX(0);
    animation:filEtape 1.1s .35s cubic-bezier(.2,.8,.2,1) forwards;
  }
}
@keyframes filEtape{ to{ transform:scaleX(1); } }

/* ============================================================
   TROIS GESTES DE PAPIER — 6 septembre 2026

   Demande de l'utilisateur : « d'autres trucs vraiment design et
   originaux ». Quatre pistes proposées, trois retenues — la quatrième,
   une barre de défilement en trace de ski, a été écartée.

   Tout tient dans ce bloc, en HTML/CSS natif : aucune image, aucune
   bibliothèque, aucune information nouvelle. Les trois gestes disent
   la même chose que le fond crème — CECI EST DU PAPIER, pas un écran.
   ============================================================ */

/* ---------- 1. la typo gravée dans le papier ----------
   Un seul filet blanc d'un pixel sous chaque lettre : la feuille
   accroche la lumière en dessous du creux, et le titre paraît pressé
   dans le papier plutôt que posé dessus. C'est le geste le moins cher
   du site — une déclaration — et celui qui se voit sur les onze pages.

   IL NE VA QUE SUR LE PAPIER. Les titres écrits sur une photo en sont
   exclus un par un : la charte interdit toute ombre portée sur une
   image, et un liseré blanc sous de l'orange sur un ciel de nuit se
   verrait comme un défaut d'impression. */
.page-chaleur .display{ text-shadow:0 1px 0 rgba(255,255,255,.92); }
.page-chaleur .hero .display,
.page-chaleur .sep .display,
.page-chaleur .para .display,
.page-chaleur .shot .display,
.page-chaleur .rideau .display,
.page-chaleur #souvenirs .display,
.page-chaleur .pied .display{ text-shadow:none; }

/* ---------- 2. le cachet d'édition ----------
   Un tampon d'encre posé de travers au bas du récapitulatif, comme sur
   un billet ou un passeport. Dessiné en SVG dans le HTML : deux
   anneaux, un texte courbé sur un arc, l'année en gros, un filet, la
   station. Rien qui ne soit déjà écrit sur la page.

   L'ENCRE EST BLEUE, PAS ORANGE. Au repos, rien n'est orange sur ce
   site — c'est la règle du repos, et un cachet ne réagit à rien.
   L'opacité fait le reste : un tampon bien encré n'existe pas.

   La place lui est RÉSERVÉE par le rembourrage bas du panneau. Posé
   par-dessus le texte, il couvrirait la mention des tarifs — et le
   détecteur aurait raison de le dire. */
.resa-recap-in{ position:relative; }
.page-chaleur .resa-recap-in{ padding-bottom:clamp(104px,10vw,132px); }
.cachet{
  position:absolute; z-index:0; pointer-events:none;
  right:clamp(16px,2vw,28px); bottom:clamp(12px,1.6vw,22px);
  width:clamp(88px,9.5vw,116px); height:auto;
  rotate:-9deg;
  color:var(--blue-deep); opacity:.4;
}
.cachet circle{ fill:none; stroke:currentColor; }
.cachet .cachet-o{ stroke-width:2.6; }
.cachet .cachet-i{ stroke-width:1; }
.cachet text{
  fill:currentColor;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
}
.cachet .cachet-h{ font-size:15px; letter-spacing:.3em; }
.cachet .cachet-an{ font-size:29px; letter-spacing:.02em; }
.cachet .cachet-b{ font-size:9.5px; letter-spacing:.22em; }
.cachet .cachet-tr{ stroke:currentColor; stroke-width:1.2; }

/* ---------- 3. le bord de crête ----------
   Les grands panneaux crème sont découpés en haut le long d'une LIGNE
   DE CRÊTE. Le bord était d'abord une simple déchirure de papier ; la
   demande a suivi le jour même — « plus réaliste, mais style montagne,
   avec des pics hauts, moins hauts, etc. »

   CE QUI FAIT QU'UNE CRÊTE RESSEMBLE À UNE CRÊTE, et non à une dent de
   scie — les quatre points ont été réglés un par un :

   · LES SOMMETS N'ONT PAS LA MÊME HAUTEUR. Cinq dominants, échelonnés
     de 2 à 8 px du haut, et entre eux des épaules qui ne montent qu'à
     mi-pente. Une crête où tous les pics se valent est un zigzag.
   · LES VERSANTS SONT ASYMÉTRIQUES. Chaque sommet a un côté raide et un
     côté long — c'est le sens du glacier, et c'est ce qui distingue une
     montagne d'un triangle.
   · LES COLS SONT PROFONDS ET INÉGAUX. Le plus creux descend à 27 px,
     les autres s'arrêtent plus haut. C'est le creux qui donne l'échelle
     du sommet voisin.
   · RIEN NE SE RÉPÈTE. Aucune distance entre deux points ne revient
     deux fois : une période régulière se voit immédiatement.

   Le bas reste DROIT, avec deux coins coupés. Une seconde crête en bas
   ferait un ruban en dents de scie, et il n'y a qu'un horizon.

   TROIS CHOSES À SAVOIR AVANT D'Y TOUCHER :
   · c'est un `clip-path`, donc AUCUNE image et aucun masque en
     data-URI : le détecteur d'Impeccable compte un fichier raster comme
     une texture enterrée, et une image de bord serait signalée à chaque
     scan. Il rend en échange une alerte `organic-clip-path`, éteinte et
     documentée ;
   · un `clip-path` COUPE l'ombre portée, et l'ombre ne doit PAS repasser
     par `filter: drop-shadow()` : le filtre rendait onze fausses alertes
     de contraste, le détecteur composant le texte contre son calque.
     C'est la teinte du papier qui détache la feuille, un cran plus
     claire que le fond de la page ;
   · les abscisses sont en pourcentage et les hauteurs en pixels : la
     crête garde le même profil du téléphone au 2 560 px. Le rembourrage
     haut réserve la hauteur du plus profond des cols, sinon un titre
     viendrait se poser dans un versant.

   PLUS AUCUN PANNEAU NE PORTE LA CRÊTE depuis le 4 octobre 2026 :
   retirée à la demande de l'utilisateur sur les étapes de l'inscription
   puis sur les garanties d'assurance.html ; « Nous joindre » et le
   panneau du nom (pages de nuit) l'annulent eux aussi. La règle reste
   ici, prête à resservir — retirer la classe d'un sélecteur suffit à
   l'éteindre. */
.page-chaleur .faq-joindre-in,
.page-chaleur .ap-nom,
.page-chaleur .resa-bloc{
  background:#fdf9f1;
  border:0; border-radius:0;
  box-shadow:none;
  padding-top:calc(clamp(20px,2.2vw,34px) + 54px);
  clip-path:polygon(
    /* LA CRÊTE, de gauche à droite. y = profondeur depuis le haut :
       4 px pour le plus haut sommet, 52 px pour le col le plus creux. */
    0 40px, 5% 28px, 9% 46px, 14% 24px,
    18% 8px,            /* sommet 1 — versant gauche long, droit raide */
    20% 20px, 24% 36px, 29% 30px,
    33% 52px,           /* le col le plus profond : c'est lui qui donne
                           son échelle au sommet suivant */
    38% 40px, 42% 26px, 45% 34px, 50% 16px,
    53% 4px,            /* sommet 2 — le point haut de la ligne */
    56% 14px, 60% 30px, 64% 22px, 68% 44px, 72% 32px,
    76% 12px,           /* sommet 3 */
    79% 24px, 83% 38px, 87% 18px,
    90% 6px,            /* sommet 4 */
    93% 20px, 97% 34px, 100% 26px,
    /* le bas, droit, deux coins coupés */
    100% calc(100% - 10px), calc(100% - 10px) 100%,
    10px 100%, 0 calc(100% - 10px)
  );
}

/* SUR TÉLÉPHONE, LA CRÊTE S'APLATIT DE MOITIÉ. Le profil est en
   pourcentages : sur un panneau de 335 px, deux points voisins ne sont
   plus qu'à 13 px l'un de l'autre, et une dénivelée de 48 px entre eux
   ne fait plus une montagne mais une dent de scie. Mêmes abscisses,
   mêmes sommets, hauteurs divisées par deux — la ligne garde son
   dessin, elle perd sa pente. */
@media (max-width:700px){
  .page-chaleur .faq-joindre-in,
  .page-chaleur .ap-nom,
  .page-chaleur .resa-bloc{
    padding-top:calc(clamp(20px,2.2vw,34px) + 28px);
    clip-path:polygon(
      0 20px, 5% 14px, 9% 23px, 14% 12px,
      18% 4px,
      20% 10px, 24% 18px, 29% 15px,
      33% 26px,
      38% 20px, 42% 13px, 45% 17px, 50% 8px,
      53% 2px,
      56% 7px, 60% 15px, 64% 11px, 68% 22px, 72% 16px,
      76% 6px,
      79% 12px, 83% 19px, 87% 9px,
      90% 3px,
      93% 10px, 97% 17px, 100% 13px,
      100% calc(100% - 10px), calc(100% - 10px) 100%,
      10px 100%, 0 calc(100% - 10px)
    );
  }
}

/* ============================================================
   PAGE COMPACTE — essai posé sur `transport.html`, 1er septembre 2026

   Demande de l'utilisateur : les pages sont trop longues à dérouler.
   Rien n'est retiré et aucun texte ne rapetisse — c'est le VIDE qui se
   resserre, partout à la fois. Tout est regroupé ici, sous une seule
   classe posée sur le `<body>` : si l'essai ne plaît pas, on retire
   `page-compact` du HTML et la page revient exactement à ce qu'elle
   était.

   Les paliers du bas de chaque `clamp` (la valeur mobile) bougent moins
   que ceux du haut : sur un téléphone, l'air entre les blocs est déjà
   juste, c'est sur grand écran qu'il s'étale.
   ============================================================ */

/* ---- 1. les deux grands vides : le bandeau d'en-tête et le bas de page ---- */

/* 150 px de blanc sous le dernier mot, sur un écran de 1 300 px de haut. */
.page-compact main.pad{ padding-bottom:clamp(44px,4.5vh,56px); }

/* Le bandeau photo occupait un quart de l'écran avant le premier mot.
   Il reste une image de pleine largeur, mais cesse de tenir lieu de
   hero : cette page n'en a pas, elle a un titre. */
.page-compact .page-band{ height:clamp(120px,14vw,180px); }
.page-compact .page-sous-photo{ padding-top:clamp(16px,2vh,24px); }

/* ---- 2. le bloc de titre : retour, œil-de-bœuf, titre ---- */
.page-compact .back-link{ padding-block:8px; margin-bottom:2px; }
.page-compact main > .wrap > .eyebrow{ margin-block:6px; }
.page-compact main > .wrap > h1{ margin:8px 0 10px; }

/* ---- 3. transport : l'écart entre les blocs et leurs titres ---- */
.page-compact .tr-bloc{ margin-top:clamp(32px,4vh,40px); }
.page-compact .tr-bloc-1{ margin-top:clamp(12px,1.6vh,18px); }
.page-compact .tr-bloc h2{ margin:8px 0 12px; }

/* ---- 4. le panneau crème ----
   Sa hauteur ne vient pas de son texte — la colonne de gauche ne fait
   que 310 px — mais du collage, qui en fait 440. C'est donc le collage
   qu'on borne : les deux tirages restent lisibles, le panneau perd
   100 px. */
.page-compact .pri-panneau{ padding:clamp(20px,2.2vw,28px); }
/* La colonne de texte prend tout ce qui reste, les tirages une colonne
   fixe. Deux fractions se partageaient la largeur à parts presque
   égales : le paragraphe s'arrêtait au milieu du panneau et laissait
   250 px de crème entre lui et les photos. Ici, la ligne court jusqu'aux
   tirages — le texte est écrit en long, comme demandé, et le panneau
   n'est plus qu'une bande large et basse. */
@media (min-width:980px){
  .page-compact .pri-panneau{
    grid-template-columns:minmax(0,1fr) clamp(220px,23vw,300px);
  }
}
/* `width:100%` est indispensable : une marge automatique ou un
   `justify-self` sur un élément de grille le fait passer en
   largeur-au-contenu, et ce bloc n'a pas de contenu dans le flux — le
   second tirage est en absolu. Il s'effondrait à 101 px. */
.page-compact .pri-collage{
  width:100%; justify-self:end;
  padding-bottom:9%;
}

/* ---- 5. les deux cartes d'étape ----
   Le prix est collé en bas par un `margin-top:auto` : resserrer le haut
   de la carte ne suffit pas, il faut aussi que la liste des faits
   respire moins. */
.page-compact .tr-etapes{ margin-top:clamp(18px,2.4vh,26px); }
.page-compact .tr-etape{ padding:clamp(16px,1.9vw,20px); gap:9px; }
.page-compact .tr-faits{ gap:7px; }
.page-compact .tr-prix{ padding-top:0; }
@media (min-width:1200px){
  .page-compact .tr-corps{ margin-top:clamp(18px,2.4vh,26px); }
}


/* ============================================================
   FAQ (faq.html) — 4 octobre 2026
   Texte dicté par l'utilisateur. Un sommaire, cinq thèmes en
   accordéon, et une sortie « Nous joindre » ouverte.

   · Plein écran d'abord : à partir de 1 100 px le sommaire se colle
     à gauche (1.3fr) et les thèmes prennent le reste (3fr).
   · Une question ouverte est un état actif : son filet et sa croix
     passent à l'orange. Au repos, rien n'est orange.
   · Les réponses sont bornées à 72 caractères, la carte non.
   ============================================================ */
.faq .lede{ margin-bottom:clamp(26px,4vh,40px); }

/* `minmax(0,1fr)` et non la colonne implicite : une colonne `auto`
   grandit jusqu'au plus large contenu insécable, et pousse la page. */
.faq-corps{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,3.4vw,64px); }
@media (min-width:1100px){
  .faq-corps{
    grid-template-columns:minmax(0,1.3fr) minmax(0,3fr);
    align-items:start;
  }
}

/* ---- le sommaire ---- */
.faq-som ol{ list-style:none; margin:0; padding:0; }
.faq-som a{
  display:flex; align-items:center; gap:12px;
  min-height:44px;
  color:var(--snow);
  transition:color .25s;
}
.faq-som-n{
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:.9rem; letter-spacing:.06em; color:var(--frost);
  flex:none; min-width:2ch; transition:color .25s;
}
.faq-som-t{ font-weight:600; font-size:.95rem; line-height:1.25; }
.faq-som-c{
  margin-left:auto; flex:none;
  min-width:26px; height:26px; padding:0 8px;
  display:inline-grid; place-items:center;
  border-radius:999px; border:1px solid rgba(30,110,208,.18);
  font-size:.78rem; font-variant-numeric:tabular-nums; color:var(--frost);
  transition:border-color .25s, color .25s;
}
.faq-som a:hover,
.faq-som a:hover .faq-som-n{ color:var(--orange-hot); }
.faq-som a:hover .faq-som-c{ border-color:rgba(194,65,12,.45); color:var(--orange-hot); }

/* Téléphone et tablette : une rangée de pastilles qu'on pousse au doigt. */
@media (max-width:1099px){
  .faq-som{
    margin-inline:calc(-1 * var(--gut));
    overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .faq-som::-webkit-scrollbar{ display:none; }
  .faq-som ol{ display:flex; gap:8px; padding-inline:var(--gut); width:max-content; }
  .faq-som a{
    padding:0 8px 0 14px; white-space:nowrap;
    border:1px solid rgba(30,110,208,.16); border-radius:999px;
    background:var(--blanc-chaud, #fff);
  }
  .faq-som-n{ min-width:0; }
  .faq-som-t{ font-size:.88rem; }
  .faq-som-c{ min-width:22px; height:22px; padding:0 6px; font-size:.72rem; }
}
/* Grand écran : une colonne collée au défilement, sur un panneau crème. */
@media (min-width:1100px){
  .faq-som{
    position:sticky; top:100px;
    padding:clamp(14px,1.4vw,22px) clamp(16px,1.6vw,26px);
    border:1px solid rgba(30,110,208,.14);
    border-radius:var(--r-l);
    background:var(--creme, var(--panel));
  }
  .faq-som li + li a{ border-top:1px solid rgba(30,110,208,.10); }
  .faq-som a{ padding-block:12px; }
}

/* ---- les thèmes ---- */
.faq-theme{ scroll-margin-top:96px; }
.faq-theme + .faq-theme{ margin-top:clamp(40px,6vh,72px); }
.faq-theme-t{
  display:flex; align-items:baseline; gap:14px;
  margin:0 0 clamp(14px,2vh,22px);
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; letter-spacing:-.005em; line-height:1.05;
  font-size:clamp(1.4rem,2.2vw,2rem); color:var(--snow);
  text-wrap:balance;
}
.faq-theme-n{
  flex:none;
  font-size:1.5em; line-height:.8;
  color:transparent; -webkit-text-stroke:1.3px rgba(30,110,208,.6);
}

/* UNE SEULE COLONNE, À TOUTE LARGEUR. Deux colonnes ont été essayées en
   grand écran : une question ouverte étire toute sa rangée, et sa
   voisine fermée se retrouve au-dessus d'un trou. Pas de remède propre —
   `dense` fait sauter l'ordre, `columns` fait changer les questions de
   colonne sous le pointeur. */
.faq-liste{ display:grid; gap:12px; }

/* ---- une question ---- */
.faq-q{
  background:var(--blanc-chaud, #fff);
  border:1px solid rgba(30,110,208,.14);
  border-radius:var(--r-m);
  box-shadow:0 6px 24px -14px rgba(10,40,80,.4);
  scroll-margin-top:96px;
  transition:border-color .25s, box-shadow .25s;
}
.faq-q[open]{
  border-color:rgba(249,115,22,.5);
  box-shadow:0 14px 34px -18px rgba(10,40,80,.45);
}
.faq-q summary{
  list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  min-height:44px;
  padding:clamp(16px,1.5vw,20px) clamp(16px,1.6vw,24px);
  cursor:pointer; border-radius:var(--r-m);
  font-weight:600; font-size:1.04rem; line-height:1.35; color:var(--snow);
  transition:color .25s;
  touch-action:manipulation;
}
.faq-q summary::-webkit-details-marker{ display:none; }
/* Le « + » : deux traits dessinés en dégradé, qui tournent en croix. */
.faq-q summary::after{
  content:""; flex:none;
  width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(30,110,208,.22);
  background:
    linear-gradient(currentColor,currentColor) center / 11px 1.6px no-repeat,
    linear-gradient(currentColor,currentColor) center / 1.6px 11px no-repeat;
  color:var(--blue);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background-color .25s, border-color .25s, color .25s;
}
.faq-q summary:hover{ color:var(--orange-hot); }
.faq-q summary:hover::after{ border-color:rgba(194,65,12,.45); color:var(--orange-hot); }
.faq-q summary:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.faq-q[open] summary::after{
  transform:rotate(45deg);
  background-color:var(--orange); border-color:var(--orange); color:#fff;
}

.faq-r{
  padding:0 clamp(16px,1.6vw,24px) clamp(18px,1.6vw,22px);
  color:var(--frost); font-size:1rem; line-height:1.6;
}
.faq-r p{ margin:0; max-width:72ch; text-wrap:pretty; }
.faq-r p + p{ margin-top:.75em; }
.faq-r strong{ color:var(--snow); font-weight:650; }
.faq-r a{ color:var(--blue-deep); text-decoration:underline; text-underline-offset:3px; }
.faq-r a:hover{ color:var(--orange-hot); }
/* Le lien vers une page du site : écrit, pas un bouton. 44 px de
   zone de touche, rattrapés par la marge négative. */
.faq-r a.faq-lien{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; margin-bottom:-10px;
  font-family:var(--display); font-stretch:condensed;
  text-transform:uppercase; letter-spacing:.12em; font-size:.8rem;
  text-decoration:none; color:var(--blue-deep);
}
.faq-r a.faq-lien::after{ content:"→"; transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.faq-r a.faq-lien:hover{ color:var(--orange-hot); }
.faq-r a.faq-lien:hover::after{ transform:translateX(4px); }

/* L'ouverture se déplie là où le navigateur sait animer `auto`. Ailleurs
   elle s'ouvre d'un coup — rien ne manque. */
@supports selector(::details-content){
  .faq-q{ interpolate-size:allow-keywords; }
  .faq-q::details-content{
    block-size:0; overflow:clip;
    transition:block-size .38s cubic-bezier(.2,.8,.2,1),
               content-visibility .38s allow-discrete;
  }
  .faq-q[open]::details-content{ block-size:auto; }
}

/* ---- 06, la sortie : un panneau crème à bord de crête ---- */
.faq-joindre-in{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; gap:clamp(20px,2.4vw,36px);
  padding:clamp(20px,3vw,40px);
  border:1px solid rgba(30,110,208,.14);
  border-radius:var(--r-l);
  background:var(--creme, var(--panel));
}
.faq-joindre-in::before{
  content:""; position:absolute; z-index:-1;
  top:-40%; right:-8%; width:50%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(245,158,11,.14), rgba(245,158,11,0) 68%);
  pointer-events:none;
}
.faq-joindre-qr{ display:grid; gap:18px; margin:0; }
.faq-joindre-qr dt{ font-weight:600; font-size:1.06rem; color:var(--snow); }
.faq-joindre-qr dd{ margin:6px 0 0; color:var(--frost); line-height:1.6; max-width:60ch; text-wrap:pretty; }
.faq-insta{ justify-self:start; }
/* Sur téléphone, le libellé du bouton passe à la ligne. En `nowrap`
   (règle de `.btn`), il faisait 316 px : avec le rembourrage du
   panneau, la colonne des thèmes montait à 359 px et toute la page
   défilait de travers en 375. Relevé le 7 octobre 2026. */
@media (max-width:520px){
  .faq-insta{
    white-space:normal; text-align:center; max-width:100%;
    padding-inline:18px; letter-spacing:.05em;
  }
}
@media (min-width:760px){
  .faq-joindre-qr{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,48px); }
}
@media (min-width:1300px){
  .faq-joindre-in{ grid-template-columns:minmax(0,1fr) auto; align-items:center; }
}

@media (prefers-reduced-motion: reduce){
  .faq-q, .faq-q summary, .faq-q summary::after,
  .faq-som a, .faq-som-n, .faq-som-c, .faq-r a.faq-lien::after{ transition:none; }
  .faq-q::details-content{ transition:none; }
  .faq-r a.faq-lien:hover::after{ transform:none; }
}

/* ============================================================
   À PROPOS (a-propos.html) — 4 octobre 2026
   Texte dicté. Trois temps : intro et photo, trois chapitres en
   frise, panneau du nom. Colonnes en fr, jamais bornées en pixels ;
   le texte suivi est borné en caractères.
   ============================================================ */
.ap .page-form h1, .ap h1{ margin:18px 0 0; }

/* ---- 1. l'intro ---- */
.ap-intro{ display:grid; gap:clamp(30px,4vw,64px); align-items:center; }
.ap-accroche{
  margin:clamp(18px,2.6vh,28px) 0 0;
  max-width:24ch;
  font-size:clamp(1.5rem,2.7vw,3.2rem); line-height:1.02;
  color:var(--blue-deep); text-wrap:balance;
}
.ap-intro .lede{ margin:clamp(14px,2vh,22px) 0 0; }
@media (min-width:1000px){
  .ap-intro{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
}

/* ---- le tirage : passe-partout, filet, ombre, de travers ---- */
.ap-tirage{
  margin:0; padding:12px 12px 0;
  background:var(--blanc-chaud, #fff);
  border:1px solid rgba(18,58,107,.12);
  box-shadow:0 24px 40px -24px rgba(10,40,80,.5);
  transition:rotate .5s cubic-bezier(.2,.8,.2,1), translate .5s cubic-bezier(.2,.8,.2,1);
}
.ap-tirage figcaption{
  padding:10px 2px 12px;
  font-family:var(--display); font-stretch:condensed;
  text-transform:uppercase; letter-spacing:.14em; font-size:.74rem;
  color:var(--frost);
}
.ap-tirage-1{ rotate:2deg; width:100%; max-width:520px; justify-self:center; }
.ap-tirage:hover{ rotate:0deg; translate:0 -4px; }
/* La case vide, en attendant la vraie photo. Elle dit ce qu'elle est. */
.ap-vide{
  display:grid; place-content:center; justify-items:center; gap:10px;
  background:
    repeating-linear-gradient(135deg, rgba(30,110,208,.05) 0 10px, transparent 10px 20px),
    var(--creme, var(--panel));
  color:var(--frost);
  font-family:var(--display); font-stretch:condensed;
  text-transform:uppercase; letter-spacing:.16em; font-size:.8rem;
}
.ap-vide svg{ width:34px; height:34px; opacity:.7; }
.ap-vide-debout{ aspect-ratio:4/5; }
.ap-vide-couche{ aspect-ratio:3/2; }
.ap-tirage img{ display:block; width:100%; height:auto; object-fit:cover; }
/* La photo de famille est debout (3/4) : même cadre que la case vide
   qu'elle remplace, à un cran près. */
.ap-tirage .ap-photo{ aspect-ratio:3/4; }

/* ---- 2. la frise ----
   Une ligne court au-dessus des trois chapitres, un point par chapitre :
   on lit une suite, de gauche à droite en grand, de haut en bas sur
   téléphone. */
.ap-frise{
  list-style:none; margin:clamp(56px,9vh,110px) 0 0; padding:0;
  display:grid; gap:clamp(34px,4vw,64px);
}
.ap-chap{ position:relative; padding-left:28px; }
.ap-chap::before{                       /* le trait */
  content:""; position:absolute; left:5px; top:12px; bottom:-40px;
  width:1px; background:rgba(30,110,208,.22);
}
.ap-chap:last-child::before{ bottom:0; }
.ap-chap::after{                        /* le point */
  content:""; position:absolute; left:0; top:6px;
  width:11px; height:11px; border-radius:50%;
  background:var(--ink, #fff); border:2px solid var(--blue);
}
.ap-chap-n{
  display:block;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:clamp(2.6rem,4vw,3.6rem); line-height:.85;
  color:transparent; -webkit-text-stroke:1.3px rgba(30,110,208,.6);
}
.ap-chap-t{
  margin:12px 0 14px;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  text-transform:uppercase; line-height:1.05;
  font-size:clamp(1.3rem,1.9vw,1.75rem); color:var(--snow);
  text-wrap:balance;
}
.ap-chap p{ margin:0; max-width:60ch; color:var(--frost); line-height:1.65; text-wrap:pretty; }
.ap-chap p + p{ margin-top:.8em; }
.ap-chap .ap-chute{ color:var(--snow); font-weight:600; }

@media (min-width:1100px){
  .ap-frise{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ap-chap{ padding-left:0; padding-top:34px; }
  .ap-chap::before{ left:0; right:calc(-1 * clamp(34px,4vw,64px)); top:5px; bottom:auto; width:auto; height:1px; }
  .ap-chap:last-child::before{ right:0; }
  .ap-chap::after{ top:0; }
}

/* ---- 3. le nom ---- */
.ap-nom{
  position:relative; isolation:isolate; overflow:hidden;
  margin-top:clamp(56px,9vh,110px);
  display:grid; gap:clamp(26px,3vw,48px); align-items:center;
  padding:clamp(20px,3vw,44px);
  border:1px solid rgba(30,110,208,.14);
  border-radius:var(--r-l);
  background:var(--creme, var(--panel));
}
.ap-nom::before{
  content:""; position:absolute; z-index:-1;
  top:-40%; right:-8%; width:50%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(245,158,11,.14), rgba(245,158,11,0) 68%);
  pointer-events:none;
}
.ap-mot{
  margin:0 0 clamp(14px,2vh,22px);
  font-size:clamp(3.4rem,8vw,7.5rem); line-height:.9; letter-spacing:.02em;
}
.ap-l{ color:var(--blue-deep); }
.ap-v{ color:transparent; -webkit-text-stroke:1.5px rgba(30,110,208,.45); }
.ap-nom-txt p{ margin:0; max-width:56ch; color:var(--frost); line-height:1.65; text-wrap:pretty; }
.ap-nom strong{ color:var(--snow); }

.ap-chiffre{ margin:0; display:grid; gap:8px; }
.ap-chiffre-v{
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:clamp(4.5rem,9vw,8.5rem); line-height:.85;
  color:var(--blue-deep); font-variant-numeric:tabular-nums;
}
.ap-chiffre-l{ color:var(--frost); line-height:1.5; max-width:24ch; }

.ap-tirage-2{ rotate:-1.5deg; }

@media (min-width:760px){
  .ap-nom{ grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr); }
  .ap-tirage-2{ grid-column:1 / -1; }
}
@media (min-width:1300px){
  .ap-nom{ grid-template-columns:minmax(0,1.5fr) minmax(0,.6fr) minmax(0,1.1fr); }
  .ap-tirage-2{ grid-column:auto; }
}

@media (prefers-reduced-motion: reduce){
  .ap-tirage{ transition:none; }
  .ap-tirage:hover{ rotate:none; translate:none; }
  .ap-tirage-1{ rotate:2deg; }
  .ap-tirage-2{ rotate:-1.5deg; }
}

/* ============================================================
   PAGES DE NUIT — faq.html et a-propos.html, 4 octobre 2026
   Choisi par l'utilisateur parmi six propositions : une vraie photo
   de nuit derrière toute la page, qui glisse lentement au défilement
   (parallaxe). Les crêtes dessinées au premier plan ont été essayées
   et RETIRÉES à sa demande — « ça, tu me dégages ».

   · FAQ : le télésiège sous la Voie lactée. Source 5 268 × 3 512,
     servie jusqu'à pleine résolution sur écran dense — en 2 400 px
     elle était floue.
   · À propos : la station de nuit, village éclairé.
   · Le texte posé à même la photo passe en blanc cassé, comme la
     galerie. Exception demandée : le titre et les numéros de thème
     de la FAQ RESTENT BLEUS — le bleu clair de la charte, le bleu
     encre ne se lirait pas sur un ciel noir.
   · À propos : l'intro et les chapitres sont sur des cartes de nuit
     pleines. Un texte courant ne se lit pas sur les lumières d'un
     village — et ce n'est pas un voile : la photo reste intacte autour.
   · Pas d'`animation-timeline` (Firefox, Safari) : la photo reste
     fixe, rien ne manque.
   ============================================================ */
.page-nuit{ background-color:#0b1a30; --nuit-txt:#f6f1e8; }
/* `--ph-fond` : ce qui se voit TANT QUE LA PHOTO CHARGE. Sur les deux
   pages à ciel clair (FAQ, inscription), le titre est en bleu encre : sur
   le bleu nuit de secours, il ne se lisait pas avant l'arrivée de la
   photo — une à deux secondes en 4G. Le dégradé reprend les teintes
   moyennes du ciel, du milieu et du bas de chaque photo (relevées le
   7 octobre 2026). */
.page-nuit::before{
  content:""; position:fixed; left:0; right:0; top:0; height:118vh; z-index:-1; pointer-events:none;
  background:var(--ph-s) var(--pos, center) / cover no-repeat, var(--ph-fond, none) #0b1a30;
}
@media (min-width:900px){
  .page-nuit::before{ background-image:var(--ph-l), var(--ph-fond, none); }
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .page-nuit::before{ animation:nuitLoin linear both; animation-timeline:scroll(root); }
  }
}
@keyframes nuitLoin{ from{ translate:0 0; } to{ translate:0 -18vh; } }

.nuit-faq{
  --ph-s:image-set(url("https://images.unsplash.com/photo-1771707685982-1fe8688f3a8f?w=1100&q=80&auto=format") 1x,
                   url("https://images.unsplash.com/photo-1771707685982-1fe8688f3a8f?w=2200&q=80&auto=format") 2x);
  --ph-l:image-set(url("https://images.unsplash.com/photo-1771707685982-1fe8688f3a8f?w=3000&q=82&auto=format") 1x,
                   url("https://images.unsplash.com/photo-1771707685982-1fe8688f3a8f?w=6000&q=80&auto=format") 2x);
  --pos:center 40%;
  --ph-fond:linear-gradient(#c9a5ca, #727b9e 55%, #212b4e);
}
.nuit-apropos{
  --ph-s:image-set(url("https://images.unsplash.com/photo-1734942416348-d2a02f8fc1df?w=1100&q=80&auto=format") 1x,
                   url("https://images.unsplash.com/photo-1734942416348-d2a02f8fc1df?w=2200&q=80&auto=format") 2x);
  --ph-l:image-set(url("https://images.unsplash.com/photo-1734942416348-d2a02f8fc1df?w=3000&q=82&auto=format") 1x,
                   url("https://images.unsplash.com/photo-1734942416348-d2a02f8fc1df?w=5000&q=80&auto=format") 2x);
  --pos:center 40%;
}

/* Inscription — 4 octobre 2026 : « faut aussi mettre un décor sur la page
   inscription ». Lever du soleil sur les pistes, ciel clair en haut :
   le titre garde son bleu encre, comme la FAQ. Le soleil se lève juste
   derrière le bord en crête des panneaux. Source 7 008 × 4 672. */
.nuit-inscription{
  --ph-s:image-set(url("https://images.unsplash.com/photo-1773079166779-c16d5659f39c?w=1100&q=80&auto=format") 1x,
                   url("https://images.unsplash.com/photo-1773079166779-c16d5659f39c?w=2200&q=80&auto=format") 2x);
  --ph-l:image-set(url("https://images.unsplash.com/photo-1773079166779-c16d5659f39c?w=3000&q=82&auto=format") 1x,
                   url("https://images.unsplash.com/photo-1773079166779-c16d5659f39c?w=6000&q=80&auto=format") 2x);
  --pos:center 40%;
  --ph-fond:linear-gradient(#7fb6d2, #a8a69f 55%, #5a6b79);
}

/* ---- le texte posé sur la photo ---- */
.page-nuit .back-link,
.page-nuit main .lede,
.page-nuit main .eyebrow{ color:var(--nuit-txt); }
.page-nuit main .eyebrow::before{ background:var(--hot); }
.page-nuit .back-link:hover{ color:var(--hot); }
.page-nuit .faq-theme-t{ color:var(--nuit-txt); }

/* FAQ : la photo est un CRÉPUSCULE, ciel clair — choisie pour que le
   titre et les numéros gardent le bleu encre de la charte, demandé tel
   quel. Tout le texte posé sur la photo revient donc aux couleurs
   d'origine. */
.nuit-faq .back-link,
.nuit-faq main .lede,
.nuit-faq main .eyebrow{ color:var(--snow); }
.nuit-faq main .eyebrow::before{ background:var(--blue); }
.nuit-faq .back-link:hover{ color:var(--orange-hot); }
/* LES CASES DE LA FAQ PRENNENT LA DA D'À PROPOS — demandé : cartes
   bleu nuit, écriture blanche, numéros en orange de nuit. Seuls le
   titre, l'œil-de-bœuf et le chapô, posés sur le ciel clair, restent
   en bleu encre. */
.nuit-faq .faq-som,
.nuit-faq .faq-q,
.nuit-faq .faq-theme-t,
.page-chaleur.nuit-faq .faq-joindre-in{
  background:rgba(9,20,38,.9);
  border:1px solid rgba(246,241,232,.12);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
/* Les titres de thème passent sur la montagne sombre du bas de la
   photo : ils sont sur une étiquette de nuit. */
.nuit-faq .faq-theme-t{
  color:var(--nuit-txt);
  width:fit-content; max-width:100%;
  padding:10px 20px 10px 16px;
  border-radius:999px;
}
.nuit-faq .faq-theme-n,
.nuit-faq .ap-chap-n{ -webkit-text-stroke-color:var(--hot); }

/* le sommaire */
.nuit-faq .faq-som a{ color:var(--nuit-txt); }
.nuit-faq .faq-som-n{ color:var(--hot); }
.nuit-faq .faq-som-c{ color:rgba(246,241,232,.75); border-color:rgba(246,241,232,.25); }
.nuit-faq .faq-som li + li a{ border-top-color:rgba(246,241,232,.1); }
.nuit-faq .faq-som a:hover,
.nuit-faq .faq-som a:hover .faq-som-n{ color:var(--hot); }
.nuit-faq .faq-som a:hover .faq-som-c{ color:var(--hot); border-color:var(--hot); }
/* Téléphone : le sommaire est une rangée de pastilles — ce sont elles
   qui prennent la nuit, pas la bande entière. */
@media (max-width:1099px){
  .nuit-faq .faq-som{ background:none; border:0; box-shadow:none; }
  .nuit-faq .faq-som a{ background:rgba(9,20,38,.9); border-color:rgba(246,241,232,.14); }
}

/* les questions */
.nuit-faq .faq-q summary{ color:var(--nuit-txt); }
.nuit-faq .faq-q summary::after{ color:var(--nuit-txt); border-color:rgba(246,241,232,.3); }
.nuit-faq .faq-q summary:hover{ color:var(--hot); }
.nuit-faq .faq-q summary:hover::after{ color:var(--hot); border-color:var(--hot); }
.nuit-faq .faq-q summary:focus-visible{ outline-color:var(--blue-bright); }
.nuit-faq .faq-q[open]{ border-color:rgba(255,122,26,.6); }
.nuit-faq .faq-q[open] summary::after{ background-color:var(--orange); border-color:var(--orange); color:#fff; }
.nuit-faq .faq-r{ color:rgba(246,241,232,.8); }
.nuit-faq .faq-r strong{ color:#fff; }
.nuit-faq .faq-r a,
.nuit-faq .faq-r a.faq-lien{ color:var(--nuit-txt); }
.nuit-faq .faq-r a:hover,
.nuit-faq .faq-r a.faq-lien:hover{ color:var(--hot); }

/* Nous joindre : plus de crème ni de crête */
.page-chaleur.nuit-faq .faq-joindre-in{
  border-radius:var(--r-l);
  clip-path:none;
  padding:clamp(22px,2.6vw,40px);
}
.nuit-faq .faq-joindre-in::before{ display:none; }
.nuit-faq .faq-joindre-qr dt{ color:var(--nuit-txt); }
.nuit-faq .faq-joindre-qr dd{ color:rgba(246,241,232,.8); }

/* Inscription : ciel clair, l'en-tête garde le bleu encre. Ce qui était
   posé à nu sur la page — les deux étapes inactives du fil, la mention
   sous le bouton — reçoit un fond plein, comme le reste du formulaire. */
.nuit-inscription .back-link,
.nuit-inscription main .eyebrow{ color:var(--snow); }
.nuit-inscription main .eyebrow::before{ background:var(--blue); }
.nuit-inscription .back-link:hover{ color:var(--orange-hot); }
.page-chaleur.nuit-inscription .resa-fil-p.est-off{ background:rgba(255,253,249,.9); }
/* « Revenir à l'étape … » : un bouton fantôme se perdait sur la neige de
   la photo (8 octobre 2026). Fond plein, même carton que le reste. */
.nuit-inscription .resa-prec{
  background:rgba(255,253,249,.94); border-color:rgba(30,110,208,.22);
  color:var(--snow);
}
.nuit-inscription .resa-prec:hover{ background:#fffdf9; border-color:var(--orange-hot); color:var(--orange-hot); }
/* PLUS DE BORD EN CRÊTE SUR LES ÉTAPES — « enlève les rebords en pique
   des cases » (4 octobre 2026). Les trois panneaux retrouvent leurs
   coins arrondis, leur filet et leur ombre, à toute largeur. La crête
   reste sur le panneau des garanties d'assurance.html. */
.page-chaleur.nuit-inscription .resa-bloc{
  clip-path:none;
  padding-top:clamp(20px,2.2vw,34px);
  border:1px solid rgba(30,110,208,.14);
  border-radius:var(--r-l);
  box-shadow:0 30px 60px -40px rgba(10,40,80,.55);
}
.nuit-inscription .form-note{
  justify-self:start; width:fit-content;
  padding:6px 12px; border-radius:999px;
  background:rgba(255,253,249,.92);
}

/* À propos : titre en orange de nuit (charte), cartes de nuit. */
.nuit-apropos main h1.display{ color:var(--hot); }
.nuit-apropos .ap-chap-n{ -webkit-text-stroke-color:var(--hot); }
.nuit-apropos .ap-accroche{ color:var(--nuit-txt); }
.nuit-apropos .ap-intro-txt,
.nuit-apropos .ap-chap{
  padding:clamp(20px,2vw,30px);
  background:rgba(9,20,38,.9);
  border:1px solid rgba(246,241,232,.12);
  border-radius:var(--r-l);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.nuit-apropos .ap-intro-txt{ padding:clamp(22px,2.6vw,40px); }
.nuit-apropos .ap-intro-txt h1{ margin-top:14px; }
.nuit-apropos .ap-chap::before,
.nuit-apropos .ap-chap::after{ display:none; }
.nuit-apropos .ap-chap-t{ color:var(--nuit-txt); }
.nuit-apropos .ap-chap p{ color:rgba(246,241,232,.8); }
.nuit-apropos .ap-chap .ap-chute{ color:#fff; }

/* Le panneau du nom prend la même carte de nuit que les chapitres —
   demandé : plus de crème, plus de bord de crête. Deux colonnes, le nom
   et le 34 (la photo du groupe 2026 a été retirée). */
.page-chaleur.nuit-apropos .ap-nom{
  background:rgba(9,20,38,.9);
  border:1px solid rgba(246,241,232,.12);
  border-radius:var(--r-l);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  clip-path:none;
  padding:clamp(22px,2.6vw,40px);
}
.nuit-apropos .ap-nom::before{ display:none; }
@media (min-width:760px){
  .nuit-apropos .ap-nom{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
}
.nuit-apropos .ap-l{ color:var(--nuit-txt); }
.nuit-apropos .ap-v{ -webkit-text-stroke-color:var(--hot); }
.nuit-apropos .ap-nom-txt p,
.nuit-apropos .ap-chiffre-l{ color:rgba(246,241,232,.8); }
.nuit-apropos .ap-nom strong{ color:#fff; }
.nuit-apropos .ap-chiffre-v{ color:var(--hot); }

/* ============================================================
   CONNEXION EN PLEINE PAGE — 4 octobre 2026
   « Je veux que la case prenne toute la page, pas de fond. » La carte
   à deux volets n'est plus posée sur la page : elle EST la page, sous
   la barre du haut — formulaire à gauche, photo à droite, d'un bord à
   l'autre. Le décor photo de fond est retiré. Le lien Retour est passé
   dans la case, en tête du formulaire.
   Une classe de <body>, `page-cnx-plein` : la retirer rend la carte.
   ============================================================ */
.page-cnx-plein main.page-form{ padding:76px 0 0; }
.page-cnx-plein main > .wrap{ max-width:none; padding:0; }
.page-cnx-plein .cnx-carte{
  max-width:none;
  min-height:calc(100svh - 76px);
  border:0; border-radius:0; box-shadow:none;
}
/* Le formulaire se centre dans sa moitié, borné en caractères — une
   colonne de champs de 1 200 px ne se remplirait pas. */
.page-cnx-plein .cnx-volet{ display:flex; align-items:center; }
.page-cnx-plein .cnx-in{
  width:100%; max-width:600px; margin-inline:auto;
  padding:clamp(28px,5vw,64px) max(var(--gut), env(safe-area-inset-left));
}
.page-cnx-plein .cnx-in .back-link{ margin-bottom:clamp(10px,3vh,28px); }
/* Sur téléphone la barre fait 81 px (logo agrandi + trois traits), pas 76. */
@media (max-width:820px){
  .page-cnx-plein main.page-form{ padding-top:81px; }
  .page-cnx-plein .cnx-carte{ min-height:calc(100svh - 81px); }
}
/* LA PHOTO PREND TOUTE LA PAGE, ET LE FORMULAIRE EST ÉCRIT DESSUS —
   4 octobre 2026, en trois temps : photo en fond, puis « la case ne doit
   pas être séparée en deux : une photo de piste de ski, comme ça c'est
   tout blanc, et par-dessus les écritures en transparent ».
   · La photo est une PISTE DAMÉE, presque blanche sous un ciel pâle
     (photo-1546180043-e1475c173021, 6 000 × 3 376). C'est sa blancheur
     qui permet d'écrire en bleu à même l'image : la règle « pas de
     texte sur une photo claire » vient de l'ORANGE, qui y tombe sous
     2,5:1 ; le bleu encre y tient comme sur le papier.
   · Plus de colonne, plus de case : le formulaire est centré sur la
     page, sans fond. Seuls les champs gardent leur blanc — on doit voir
     où écrire.
   · La photo se lit ici en `object-position` bas : le ciel et le haut
     de la piste, les plus clairs, sont derrière le titre. */
.page-cnx-plein .cnx-carte{
  position:relative; isolation:isolate;
  grid-template-columns:minmax(0,1fr);
  background:#eef2f6;
}
.page-cnx-plein .cnx-photo{
  display:block; overflow:hidden;
  position:absolute; inset:0; z-index:-1;
}
/* La photo déborde de 25 % vers le bas, coupée par son cadre : les
   rayures du damage, qui commencent aux trois cinquièmes de l'image,
   tombent ainsi aux trois quarts de l'écran — sous le formulaire, à
   toutes les proportions de fenêtre. */
.page-cnx-plein .cnx-photo img{
  position:absolute; top:0; left:0;
  width:100%; height:125%; object-fit:cover; object-position:center top;
}
/* Le formulaire est calé HAUT : les rayures du damage occupent la moitié
   basse de la photo, et un petit lien posé sur elles ne se lisait plus.
   En haut, c'est la neige lisse et le ciel. */
.page-cnx-plein .cnx-volet{
  background:none; box-shadow:none;
  justify-content:center; align-items:flex-start;
}
.page-cnx-plein .cnx-in{ max-width:520px; padding-top:clamp(20px,6vh,90px); }
/* Les petits liens et mentions passent au bleu encre, en demi-gras :
   sur la neige, le bleu secondaire était trop léger. */
.page-cnx-plein .cnx-in .eyebrow,
.page-cnx-plein .cnx-in .back-link,
.page-cnx-plein .cnx-oubli,
.page-cnx-plein .cnx-bas,
.page-cnx-plein .field label{ color:var(--snow); font-weight:600; }
/* ============================================================
   ADMIN — GALERIE ET RECADRAGE (admin.html), 7 octobre 2026
   L'onglet Galerie : l'année, le bouton d'ajout, puis une grille de
   vignettes par année. Le recadrage est une fenêtre par-dessus la page,
   une photo à la fois.
   ============================================================ */
.ad-gal-champs{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px; }
.ad-gal-champs .field{ margin:0; width:160px; }
.ad-gal-choix{ cursor:pointer; }
.ad-gal-choix:focus-within{ outline:2px solid var(--blue); outline-offset:3px; }
.ad-gal-annee{ margin-top:clamp(16px,2vw,24px); }
.ad-gal-grille{
  list-style:none; margin:14px 0 0; padding:0;
  display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.ad-gal-photo{ display:grid; gap:6px; }
.ad-gal-photo img{
  width:100%; aspect-ratio:1; object-fit:cover; display:block;
  border-radius:var(--r-s,10px); border:1px solid var(--line);
}
/* L'ordre des photos — 11 octobre 2026. Une poignée ronde dans le coin,
   le rang en bas à gauche ; la photo tirée se soulève et s'allume. */
.ad-gal-aide{ margin:6px 0 0; font-size:.88rem; color:var(--frost); }
.ad-gal-cadre{ position:relative; }
.ad-gal-rang{
  position:absolute; left:8px; bottom:8px; min-width:26px; height:26px; padding:0 7px;
  display:grid; place-items:center; border-radius:99px;
  font:700 .78rem/1 var(--display); color:#fff; background:rgba(11,26,48,.78);
  z-index:2; pointer-events:none;
}
.ad-gal-poignee{
  position:absolute; top:6px; right:6px; width:44px; height:44px; padding:0;
  display:grid; place-items:center; border:0; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--snow); cursor:grab;
  box-shadow:0 2px 8px rgba(11,26,48,.25);
  z-index:2; touch-action:none; transition:background .2s, color .2s;
}
.ad-gal-poignee svg{ width:20px; height:20px; fill:currentColor; }
.ad-gal-poignee:hover,
.ad-gal-poignee:focus-visible{ background:#fff; color:var(--orange-hot); }
.ad-gal-photo.est-tire{ position:relative; z-index:2; }
.ad-gal-photo.est-tire img{
  outline:3px solid var(--orange); outline-offset:-3px;
  box-shadow:0 14px 30px -10px rgba(11,26,48,.5);
}
.ad-gal-photo.est-tire .ad-gal-poignee{ cursor:grabbing; color:var(--orange-hot); }
@media (prefers-reduced-motion:reduce){ .ad-gal-poignee{ transition:none; } }

.ad-crop{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; padding:16px;
  background:rgba(9,20,38,.82);
  overscroll-behavior:contain;
}
.ad-crop[hidden]{ display:none; }
.ad-crop-in{
  width:min(100%, 980px); max-height:100%; overflow:auto;
  display:grid; gap:14px; padding:clamp(14px,2vw,24px);
  border-radius:var(--r-l,28px); background:var(--panel,#fff);
}
.ad-crop-t{ margin:0; font-weight:600; color:var(--snow); overflow-wrap:anywhere; }
.ad-crop-scene{ position:relative; justify-self:center; line-height:0; touch-action:none; user-select:none; }
.ad-crop-scene img{ display:block; max-width:100%; max-height:62vh; width:auto; height:auto; }
.ad-crop-cadre{
  position:absolute; cursor:move; touch-action:none;
  border:2px solid #fff;
  /* tout ce qui sort du cadre est assombri : c'est ce qui sera coupé */
  box-shadow:0 0 0 9999px rgba(9,20,38,.55);
}
/* Les poignées sont posées DANS le cadre : la scène coupe ce qui déborde. */
.ad-crop-scene{ overflow:hidden; }
.ad-crop-cadre span{
  position:absolute; width:22px; height:22px;
  background:#fff; border:2px solid var(--blue); border-radius:50%;
}
.ad-crop-cadre [data-poignee="nw"]{ left:-2px; top:-2px; cursor:nwse-resize; }
.ad-crop-cadre [data-poignee="ne"]{ right:-2px; top:-2px; cursor:nesw-resize; }
.ad-crop-cadre [data-poignee="sw"]{ left:-2px; bottom:-2px; cursor:nesw-resize; }
.ad-crop-cadre [data-poignee="se"]{ right:-2px; bottom:-2px; cursor:nwse-resize; }
.ad-crop-formats{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.ad-crop-formats [aria-pressed="true"]{ border-color:var(--orange); color:var(--orange-hot); }
.ad-crop-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
@media (max-width:520px){
  .ad-crop-actions .btn{ flex:1 1 100%; white-space:normal; }
  .ad-crop-cadre span{ width:28px; height:28px; }
  .ad-crop-cadre [data-poignee="nw"]{ left:-2px; top:-2px; }
  .ad-crop-cadre [data-poignee="ne"]{ right:-2px; top:-2px; }
  .ad-crop-cadre [data-poignee="sw"]{ left:-2px; bottom:-2px; }
  .ad-crop-cadre [data-poignee="se"]{ right:-2px; bottom:-2px; }
}
/* ============================================================
   LA BARRE « ENCRE ET NEIGE » — 10 octobre 2026
   Demandée en trois temps : « un truc plus design, plus pro », piste F
   retenue (« améliore-le de fou »), puis le ciel : une vraie photo, peu
   d'étoiles, pas de galaxie — la photo C, bleu canard
   (`photo-1660112472113-af4f1f78bc49`, Unsplash, libre). Ni voile ni
   dessin dessus : la photo est assez sombre pour porter du texte clair.
   La barre change de nature : FONCÉE sur les quinze pages, avec ses
   liens (La station, Logement, Transport, Matériel, FAQ) et un bouton
   S'inscrire. Sur téléphone, les mêmes liens sont dans le panneau.
   La barre de progression passe au bas de la barre, en orange.
   ============================================================ */
/* 11 octobre 2026 : la photo de ciel est retirée (« l'effet granuleux,
   pas fan ») — piste C « Aurore » de `.claude/outils/barre-sans-grain.html`.
   Dégradés purs, rien ne peut grainer. */
.nav{
  background:
    radial-gradient(120% 220% at 88% 0%,rgba(120,92,200,.55),transparent 55%),
    radial-gradient(90% 200% at 45% 120%,rgba(20,120,140,.55),transparent 60%),
    linear-gradient(100deg,#08182e,#0c2a45 50%,#102e52);
  border-bottom:0;
  color:#d5e3f7;
}
.nav.stuck{ box-shadow:0 8px 28px -12px rgba(4,16,28,.6); }

/* Le nom : le MÊME dégradé que le pied de page — piste C, orange → bleu
   clair (éclairci le même jour, « essaye d'éclaircir le dégradé du EL »). Posé d'abord orange → bleu nuit —
   11 octobre 2026, « mets aussi les lettres EL en bleu en haut de page et
   toutes les pages ». Avant : orange → pêche → blanc. Sur la barre foncée,
   EL est sombre : choisi en connaissance de cause (même rendu que le logo
   Instagram retenu le même jour). */
.nav .brand-name{
  background-image:linear-gradient(100deg,#ea580c 0%,#f97316 22%,#6cb2ff 64%,#4a98f5 100%);
}
.nav .brand svg{ filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); }

/* ---------- les liens du grand écran ---------- */
.nav-menu{ display:flex; gap:clamp(0px,.6vw,12px); align-items:center; }
.nav-menu a{
  position:relative; padding:9px 8px;
  font-family:var(--display); font-stretch:condensed; font-weight:600;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:#c3d5ea; text-decoration:none; transition:color .25s;
}
.nav-menu a::after{
  content:""; position:absolute; left:8px; right:8px; bottom:1px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,#ea580c,#ff9a4d);
  transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav-menu a:hover,
.nav-menu a:focus-visible{ color:#fff; }
.nav-menu a:hover::after,
.nav-menu a:focus-visible::after{ transform:scaleX(1); }
/* la page ouverte : orange, soulignée, un point lumineux au-dessus */
.nav-menu a[aria-current="page"]{ color:#ff9a4d; }
.nav-menu a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-menu a[aria-current="page"]::before{
  content:""; position:absolute; left:50%; top:-3px; width:4px; height:4px; margin-left:-2px;
  border-radius:50%; background:#ff7a1a; box-shadow:0 0 8px #ff7a1a;
}

/* ---------- S'inscrire : le seul aplat orange de la barre ---------- */
.nav-inscrire{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  padding:10px 18px; border-radius:99px;
  font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; text-decoration:none;
  background:linear-gradient(180deg,#ff8a2e,#ea580c);
  box-shadow:0 6px 18px rgba(234,88,12,.35), inset 0 1px 0 rgba(255,255,255,.35);
  transition:box-shadow .25s, filter .25s;
}
.nav-inscrire svg{ width:15px; height:15px; transition:transform .3s; }
.nav-inscrire:hover{ filter:brightness(1.06); box-shadow:0 8px 24px rgba(234,88,12,.5), inset 0 1px 0 rgba(255,255,255,.35); }
.nav-inscrire:hover svg{ transform:translateX(3px); }
.nav-inscrire[aria-current="page"]{ box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); }

/* ---------- J−, connexion, trois traits : clairs sur le bleu ---------- */
.nav-jour{
  background:rgba(255,122,26,.12); color:#ffb27a;
  box-shadow:inset 0 0 0 1px rgba(255,122,26,.5);
}
.nav-login{
  width:38px; height:38px; margin-left:0;
  color:#e6eefa; border-color:rgba(213,227,247,.32); background:rgba(255,255,255,.05);
}
.nav-login.est-connecte{ background:#1e6ed0; border-color:#5d9be6; }
.burger i,
.burger i::before,
.burger i::after{ background:#e6eefa; }
.nav.open .burger i{ background:transparent; }

/* ---------- la barre de lecture, au bas de la barre ---------- */
.progress{
  height:2px;
  background:linear-gradient(90deg,#ea580c,#ff9a4d);
  box-shadow:0 0 10px rgba(255,122,26,.7);
}
.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:rgba(213,227,247,.14); pointer-events:none;
}
.nav .progress{ position:absolute; left:0; top:auto; bottom:0; z-index:1; }

/* ---------- les largeurs ----------
   Sous 1 180 px les cinq liens ne tiennent plus à côté du reste : ils
   se resserrent, puis la pastille J− laisse sa place. */
@media (max-width:1180px){
  .nav-in{ gap:16px; }
  .nav-menu a{ letter-spacing:.1em; padding-inline:6px; }
  .nav-menu a::after{ left:6px; right:6px; }
}
@media (max-width:1020px){
  .nav-jour{ display:none; }
  .nav-inscrire{ padding-inline:14px; }
}
@media (max-width:820px){
  .nav-menu,
  .nav-inscrire{ display:none; }
  /* Le panneau du téléphone passe au bleu de la barre. */
  .nav-links,
  .page-chaleur .nav-links{
    background:rgba(9,34,52,.97);
    border-bottom:1px solid rgba(213,227,247,.12);
  }
  .nav-links a{ color:#d5e3f7; }
  .nav-links a:hover,
  .nav-links a[aria-current="page"]{ color:#ff9a4d; }
  .nav.open .nav-links a:nth-child(5){ transition-delay:.46s; }
  .nav.open .nav-links a:nth-child(6){ transition-delay:.53s; }
  .nav.open .nav-links a:nth-child(7){ transition-delay:.6s; }
  .nav-links a.nav-insc-mobile{
    display:inline-flex; width:100%; margin-top:10px; font-size:1rem; color:#fff;
  }
  .nav-links a.nav-insc-mobile::after{ display:none; }
  .nav-links a.btn-ghost.nav-cta-mobile{ color:#e6eefa; border-color:rgba(213,227,247,.35); }
  .nav-links a.btn-ghost.nav-cta-mobile:hover{ color:#ff9a4d; }
  .nav-compte .nav-login.est-connecte{ width:34px; height:34px; }
}
@media (prefers-reduced-motion:reduce){
  .nav-menu a::after, .nav-inscrire svg{ transition:none; }
}
/* S'inscrire avant la pastille du compte, comme sur la maquette : la
   pastille reste la dernière pièce à droite (le JS l'enveloppe parfois
   dans `.nav-compte`). */
.nav-login, .nav-compte{ order:3; }
.burger{ order:4; }
@media (max-width:820px){
  .nav-links a.nav-insc-mobile{
    background:linear-gradient(180deg,#ff8a2e,#ea580c); border-color:transparent;
    box-shadow:0 6px 18px rgba(234,88,12,.35);
  }
}

/* ============================================================
   LE MANIFESTE — accueil, entre #logement et #a-savoir, 10 octobre 2026
   L'accroche de « À propos » écrite en très grand, trois tons : bleu
   encre, bleu vif, orange d'écriture. Il remplace le vide de 60 à 110 px
   qui séparait les deux photos (`#logement{ margin-bottom }`, remis à 0).
   La taille suit la largeur ET reste bornée : « deux mille mètres, »
   doit tenir sur une ligne en 375 px.
   ============================================================ */
.mani{ padding-block:clamp(56px,9vh,120px); }
.mani-in{ display:grid; gap:32px; }
.mani-titre{
  margin:0; font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:clamp(2.1rem,6.2vw,6rem); line-height:.92; letter-spacing:-.005em;
  text-transform:uppercase; color:var(--snow); text-wrap:balance;
}
.mani-titre span{ display:block; }
.mani-bleu{ color:var(--blue); }
.mani-chaud{ color:var(--orange-hot); }
.mani-cote{
  max-width:34ch; padding-left:18px; border-left:2px solid var(--orange);
  font-size:1.02rem; line-height:1.55; color:var(--frost);
}
.mani-cote p{ margin:0; }
.mani-qui{
  margin-bottom:8px !important; font-family:var(--display); font-stretch:condensed; font-weight:700;
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--snow);
}
.mani-lien{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:6px;
  font-weight:600; color:var(--orange-hot); text-decoration:none;
}
.mani-lien span{ transition:transform .3s; }
.mani-lien:hover span{ transform:translateX(4px); }
@media (min-width:900px){
  .mani-in{ grid-template-columns:1fr auto; align-items:end; gap:clamp(40px,6vw,120px); }
  .mani-cote{ margin-bottom:.6em; }
}
@media (prefers-reduced-motion:reduce){ .mani-lien span{ transition:none; } }
/* En 2 560 px, la phrase de droite va jusqu'à la gouttière : la bande
   ne laisse pas un demi-écran vide à droite. */
.mani .wrap{ max-width:none; }


/* ============================================================
   LE LOGO EN IMAGE — 13 octobre 2026
   « remplace-moi ce logo par tous les autres » : DEKAEL au pinceau,
   orange → bleu, le A est le Cervin. Une image fournie par
   l'utilisateur (assets/img/logo/dekael-logo.webp, 2 000 × 669,
   fond transparent) remplace le nom en dégradé et le Cervin SVG
   dans la barre des 15 pages et au pied de page.
   L'image a beaucoup de vide autour du dessin : elle est recadrée
   en CSS sur la boîte du dessin, relevée au pixel —
   x 36 → 1 962, y 137 → 547 (1 926 × 410).
   ============================================================ */
.brand-logo{
  display:block; position:relative; overflow:hidden;
  height:44px; aspect-ratio:1926 / 410;
}
.brand-logo img{
  position:absolute; max-width:none; height:auto;
  width:103.842%;   /* 2 000 / 1 926 */
  left:-1.869%;     /* 36 / 1 926 */
  top:-33.415%;     /* 137 / 410 */
}
.pied-marque .brand-logo{ height:58px; }
@media (max-width:420px){ .brand-logo{ height:36px; } }