/* ============================================================
   LE CERF BLANC, système « Givre & Aube »
   Monde bleu-ardoise traversé d'une lumière d'or, tiré de la
   scène du cerf et du loup. Marcellus + Epilogue.
   Signatures : scène vivante (neige, brume, rayon), cartes
   empilées au scroll, cadres « sommet », sentier à jalons.
   Aucun héritage des systèmes précédents.
   ============================================================ */

/* ============================================================
   JOUR ET NUIT, les jetons manquants
   Le système d'origine mélangeait trois choses sous le même nom :
   la couleur d'un rôle (le texte, le fond), la couleur d'une
   surface littérale (la plaque d'or du CTA, le noir de la scène)
   et la couleur d'un effet (les lavis, les ombres). Tant que le
   site n'avait qu'une variante, la confusion ne coûtait rien.
   Elle casse dès que la page s'éclaircit : un rôle doit basculer,
   une surface littérale ne doit surtout pas bouger.
   Les jetons ci-dessous séparent les trois. Leurs valeurs NUIT
   reproduisent exactement le rendu actuel, à une exception près,
   signalée sur --voile-mi.
   ============================================================ */
:root {
  color-scheme: dark;

  /* La courbe unique du site, commune aux deux variantes. */
  --ease: cubic-bezier(.22,.72,.24,1);

  /* --- Les jetons de rôle, valeurs NUIT ----------------------
     Ce sont des rôles, pas des couleurs littérales : --nuit est
     « le fond le plus profond », --givre « le texte principal ».
     La variante jour les redéfinit, d'où des noms qui mentent
     alors un peu (--nuit y vaut un blanc bleuté). C'est assumé :
     un rôle se renomme mal, il se redéfinit bien. */
  --nuit:      #0C1420;
  --nuit-2:    #101B2B;
  --panneau:   #152234;
  --givre:     #EAF0F6;
  --givre-soft:rgba(234,240,246,.84);
  --givre-mute:rgba(234,240,246,.58);
  --acier:     #8CA3BB;
  --aube:      #E9B36A;
  --aube-clair:#F6D9A8;
  --aube-deep: #A97B3F;
  --trait:     rgba(140,163,187,.22);
  --trait-fort:rgba(140,163,187,.4);

  /* --- L'or LITTÉRAL, stable dans les deux variantes ---------
     Ce sont les aplats d'or : la plaque du CTA, la pastille « + »
     ouverte, la barre du rideau. Ils restent de l'or véritable en
     jour comme en nuit, parce qu'un or qui brunit n'est plus de
     l'or, c'est du bronze. Ne jamais s'en servir comme couleur de
     texte sur un fond clair : voir --aube et --aube-clair. */
  --or-clair:   #F6D9A8;                /* haut du dégradé du CTA */
  --or:         #E9B36A;                /* coeur du dégradé, fond de .pmoins ouvert */
  --or-profond: #A97B3F;                /* bas du dégradé du CTA */
  --sur-or:     #221609;                /* le texte posé SUR l'or, dans les deux variantes */
  --or-cerne:   transparent;            /* liseré interne du CTA, utile seulement en jour */
  --lustre:     rgba(255,255,255,.5);   /* reflet interne haut du CTA, constant */

  /* --- La scène, nocturne dans les deux variantes ------------
     Le hero joue une vidéo de nuit : sa surface ne s'éclaircit
     jamais. --fond-scene découple « le noir de la scène » de
     « le fond de page », que la variante jour fait diverger. */
  --fond-scene: #0C1420;                /* socle des strates du voile de bas de hero (accueil) */
  --voile-mi:   rgba(12,20,32,.55);     /* strate intermédiaire du voile de bas de hero */
  --voile-p1:   46%;                    /* début de la fonte du voile */
  --voile-p2:   74%;                    /* strate intermédiaire du voile */
  --verre-menu: rgba(12,20,32,.97);     /* menu plein écran : il reste une nuit qui s'ouvre */

  /* --- L'aurore, le hero entreprises -------------------------
     Celui-là n'a aucune vidéo derrière lui : c'est un dégradé,
     donc rien ne l'oblige à rester nocturne. Il suit le thème,
     et ses quatre jetons décrivent le même ciel dans les deux
     variantes : un socle, un soleil chaud, un lavis froid, et
     une fonte vers le fond de page. En nuit la fonte vaut
     transparent, le rendu d'origine est donc intact. */
  --fond-aurore:  #0C1420;                 /* socle du ciel */
  --aurore-halo:  rgba(233,179,106,.14);   /* le soleil, haut à droite */
  --aurore-froid: rgba(140,163,187,.1);    /* le lavis froid, bas à gauche */
  --aurore-bas:   transparent;             /* fonte vers le fond de page */

  /* --- Les verres et les surfaces d'interface ---------------- */
  --verre:          rgba(21,34,52,.5);   /* fond des boutons ronds : .burger, .son, .astre */
  --verre-barre:    rgba(12,20,32,.8);   /* barre de nav floutée, à partir de 24px de scroll */
  --survol-panneau: #182740;             /* fond d'une carte .etat au survol */
  --survol-doux:    rgba(140,163,187,.12); /* fond de survol du CTA secondaire */
  --pied-fond:      #0A111B;             /* fond du pied de page */
  --pastille:       rgba(12,20,32,.45);  /* fond des pastilles : .puce, .etape-n, .tarif */
  --defil:          rgba(140,163,187,.3);/* curseur d'ascenseur */
  --selection:      rgba(233,179,106,.32); /* surlignage de sélection */

  /* --- Les cinq cartes d'orientation ------------------------- */
  --carte-1: linear-gradient(150deg, #14202F, #0D1520 65%);  /* Nord */
  --carte-2: linear-gradient(150deg, #1B2434, #10161F 65%);  /* Est */
  --carte-3: linear-gradient(150deg, #24222C, #131019 65%);  /* Sud, la seule teintée mauve */
  --carte-4: linear-gradient(150deg, #16283C, #0C1826 65%);  /* Ouest */
  --carte-5: linear-gradient(150deg, #15291F, #0B1710 60%);  /* Centre */
  /* Le seul panneau chaud du système : le phare et la carte
     d'honoraires Rando Dev'. En jour il ne devient PAS blanc
     comme les autres, il garde sa chaleur. */
  --panneau-or: linear-gradient(150deg, #1A2638, #0E1622 70%);

  /* --- Les filets d'or ---------------------------------------
     Le même rgba d'or n'a pas le même sort selon son rôle. Posé
     en filet ou en bordure, il tombe à 2:1 sur la neige et
     disparaît : il doit virer à l'or profond en jour. Quatre
     graisses, calées sur les quatre opacités déjà en place. */
  --or-trait-fin:  rgba(233,179,106,.35); /* cartouche .tarif */
  --or-trait:      rgba(233,179,106,.4);  /* .recit, .prix-j, .inclus--tarif, .tag-p, .lieu-b:hover */
  --or-trait-plus: rgba(233,179,106,.45); /* .etat:hover .vers, .inclus:hover, .phare, .etape-n */
  --or-trait-fort: rgba(233,179,106,.5);  /* .etat:hover, filet du .sur du phare */

  /* --- Les lavis d'or ----------------------------------------
     Ceux-là ne portent aucune frontière : ils réchauffent une
     surface. Ils restent donc légitimes en jour, à condition de
     se saturer un peu, sinon ils s'évaporent sur le blanc. */
  --lavis-or:      rgba(233,179,106,.14); /* halo des cartes d'orientation, pastille .tag-p */
  --lavis-or-fort: rgba(233,179,106,.16); /* halo du guide, du phare, du CTA final, anneau de jalon */
  --lettre:        rgba(233,179,106,.07); /* lettre géante en filigrane derrière chaque carte */
  --curseur-trait: rgba(233,179,106,.55); /* anneau du curseur personnalisé */
  --curseur-fond:  rgba(233,179,106,.07); /* remplissage de l'anneau au survol */

  /* --- Les ombres --------------------------------------------
     Presque noires en nuit, elles séparent du noir. Sur la neige
     elles se liraient comme une salissure : en jour elles changent
     de teinte pour l'ardoise froide, pas seulement d'opacité. */
  --ombre:         rgba(4,8,14,.55);      /* cartes empilées */
  --ombre-fort:    rgba(4,8,14,.6);       /* phare au survol */
  --ombre-or:      rgba(233,179,106,.28); /* halo doré du CTA */
  --ombre-or-fort: rgba(233,179,106,.4);  /* halo doré du CTA au survol */
}

/* ============================================================
   VARIANTE JOUR, « la neige au soleil »
   Ce n'est pas un thème clair générique, c'est le même versant
   éclairé de face : les fonds prennent la lumière, l'ardoise
   passe du fond à l'encre, et l'or descend en bronze pour rester
   lisible en texte. Deux noms mentent alors, et c'est assumé :
   --nuit vaut un blanc bleuté, et --aube-clair est plus SOMBRE
   que --aube. Ce sont des rôles, pas des couleurs. --aube-clair
   reste « l'or le plus affirmé », ce qui en jour veut dire le
   plus cuit. Ne jamais réécrire un #EAF0F6 en croyant faire du
   --givre : le jeton fait déjà le travail.
   ============================================================ */
:root[data-theme="jour"] {
  color-scheme: light;

  /* Fonds : la neige au soleil, la neige à l'ombre, la carte qui
     monte vers la lumière au lieu de descendre vers le gris. */
  --nuit:      #F3F7FB;
  --nuit-2:    #E6EDF6;
  --panneau:   #FFFFFF;

  /* Textes. La base passe de (234,240,246) à (22,33,46) : ce
     n'est pas l'opacité qu'on inverse d'abord, c'est la base.
     L'alpha du texte atténué DOIT monter de .58 à .70, une
     reprise à l'identique ne donnerait que 3.59:1 et échouerait
     le seuil AA. Ne pas le « réharmoniser » par symétrie. */
  --givre:     #16212E;
  --givre-soft:rgba(22,33,46,.86);
  --givre-mute:rgba(22,33,46,.70);
  --acier:     #4C6076;

  /* L'or de TEXTE. Bronze chaud, même famille, luminance
     retournée. C'est lui qui porte les fragments .or, les
     montants, les citations et le tracé des pictos. */
  --aube:      #8A5A14;
  --aube-clair:#6E4A12;
  --aube-deep: #4A2A06;

  /* Bordures. L'alpha de --trait-fort est poussé à .55 sur une
     base plus profonde : c'est le minimum pour franchir le 3:1
     des composants d'interface (contour de .btn-givre, de
     .pmoins, cadre .sommet-c), seuil que la nuit n'atteint
     d'ailleurs pas. Le jour est ici strictement meilleur. */
  --trait:     rgba(31,50,72,.18);
  --trait-fort:rgba(31,50,72,.55);

  /* L'or littéral ne bouge pas : le CTA reste une plaque d'or à
     texte sombre. Seul s'ajoute un liseré interne, sans quoi le
     haut du dégradé (1.27:1 sur la neige) laisserait le bouton
     sans silhouette. */
  --or-cerne:  rgba(74,42,6,.45);

  /* Le voile du hero. Seul l'arrêt final rejoint le fond de page.
     Les arrêts descendent, sinon l'éclaircissement remonterait
     jusque sous le titre du hero, qui est aligné en bas. */
  --voile-mi:  rgba(243,247,251,.42);
  --voile-p1:  68%;
  --voile-p2:  86%;

  /* L'aurore en plein jour : la même heure, vue depuis l'autre
     versant. Le socle descend d'un cran sous --nuit pour que le
     hero garde une silhouette au dessus de la section suivante,
     le soleil se sature (un lavis clair s'évapore sur la neige)
     et le bas fond vers le fond de page. */
  --fond-aurore:  #E4EDF7;
  --aurore-halo:  rgba(219,156,70,.30);
  --aurore-froid: rgba(76,96,118,.12);
  --aurore-bas:   var(--nuit);

  /* Verres et surfaces. Le survol d'une carte ne peut plus monter
     en clarté, --panneau vaut déjà le blanc : il descend. */
  --verre:          rgba(255,255,255,.62);
  --verre-barre:    rgba(243,247,251,.82);
  --survol-panneau: #EDF3FA;
  --survol-doux:    rgba(31,50,72,.08);
  --pied-fond:      #DDE7F1;   /* le pied s'ancre : il passe SOUS le corps, pas au dessus */
  --pastille:       rgba(31,50,72,.07);  /* la pastille ne noircit plus, elle pose un voile d'ardoise */
  --defil:          rgba(31,50,72,.34);
  --selection:      rgba(219,156,70,.30);

  /* Les cinq cartes gardent leur teinte d'origine, retournée :
     Nord bleu, Est neutre, Sud mauve, Ouest bleu franc, Centre
     sapin. C'est ce qui les distingue encore les unes des autres. */
  --carte-1: linear-gradient(150deg, #EDF3FA, #F7FAFD 65%);
  --carte-2: linear-gradient(150deg, #EFF2F7, #F8FAFC 65%);
  --carte-3: linear-gradient(150deg, #F2EFF5, #FAF8FC 65%);
  --carte-4: linear-gradient(150deg, #E9F1FA, #F5F9FD 65%);
  --carte-5: linear-gradient(150deg, #E9F3EC, #F5FAF7 60%);
  --panneau-or: linear-gradient(150deg, #FBF4E7, #FFFDF8 70%);

  /* Les filets virent à l'or profond, les lavis restent de l'or
     mais se saturent : un filet doit se voir, un lavis doit
     seulement réchauffer. */
  --or-trait-fin:  rgba(138,90,20,.38);
  --or-trait:      rgba(138,90,20,.45);
  --or-trait-plus: rgba(138,90,20,.5);
  --or-trait-fort: rgba(138,90,20,.55);
  --lavis-or:      rgba(219,156,70,.20);
  --lavis-or-fort: rgba(219,156,70,.22);
  --lettre:        rgba(138,90,20,.10);
  --curseur-trait: rgba(138,90,20,.7);
  --curseur-fond:  rgba(138,90,20,.10);

  /* Ombres courtes et bleutées. Une ombre noire sur la neige est
     sale, et sur les fonds chauds du phare elle tire au brun. */
  --ombre:         rgba(31,50,72,.14);
  --ombre-fort:    rgba(31,50,72,.20);
  --ombre-or:      rgba(169,123,63,.30);
  --ombre-or-fort: rgba(169,123,63,.42);
}

/* ------------------------------------------------------------
   Les îlots de nuit
   Le hero de l'accueil reste nocturne dans les deux variantes : sa
   vidéo l'est. Ses textes, eux, héritent de :root. En jour, sans cette redéclaration
   locale, le titre du hero deviendrait de l'ardoise sur une vidéo
   de nuit (1.06:1), donc illisible. Les jetons étant des rôles,
   il suffit de leur rendre localement leur valeur de nuit.
   Sont concernés : le hero de l'accueil (.ciel), qui joue une
   vidéo de nuit, le menu plein écran, et la barre pendant que le
   menu est ouvert, sans quoi la croix du burger se poserait en
   sombre sur un menu sombre.
   Le hero entreprises (.aurore) n'en fait PLUS partie : sans
   vidéo derrière lui, rien ne le retenait dans la nuit. Il suit
   le thème par ses jetons --fond-aurore et compagnie.
   Conséquence sur la barre non défilée : elle n'est nocturne que
   sur une page qui a le hero vidéo. Ailleurs (entreprises), elle
   se pose sur un ciel clair et doit s'y lire en encre.
   ------------------------------------------------------------ */
:root[data-theme="jour"] body:has(.ciel) .barre:not(.on),
:root[data-theme="jour"] body:has(.xp-hero) .barre:not(.on),
:root[data-theme="jour"] :is(.ciel, .voile-menu, .barre:has(.burger.x)) {
  --givre:      #EAF0F6;
  --givre-soft: rgba(234,240,246,.84);
  --givre-mute: rgba(234,240,246,.58);
  --acier:      #8CA3BB;
  --aube:       #E9B36A;
  --aube-clair: #F6D9A8;
  --trait:      rgba(140,163,187,.22);
  --trait-fort: rgba(140,163,187,.4);
  --verre:       rgba(21,34,52,.5);
  --verre-barre: rgba(12,20,32,.8);
  --or-cerne:    transparent;
  /* Redéclarer les jetons ne suffit pas : un élément sans `color`
     propre hérite de la couleur CALCULÉE du body, pas de la
     variable. Le nom de marque et le titre du hero repassaient
     donc en ardoise sur la vidéo. On ré-ancre l'héritage ici. */
  color: var(--givre);
}
/* Le hero n'a pas besoin d'un --nuit sombre : son voile doit au
   contraire fondre vers le fond de page. On ne le redéclare donc
   surtout pas dans l'îlot ci dessus. */

/* ------------------------------------------------------------
   Bascule
   Aucune transition de couleur n'est posée sur html, body ou les
   sections : la bascule doit être instantanée. Un fondu global
   se rejouerait à chaque arrivée sur le site, puisque le thème
   est écrit avant le premier rendu par main.js.
   ------------------------------------------------------------ */

* { box-sizing: border-box; }
/* Racine fluide : toutes les tailles en rem du site suivent la fenêtre,
   en continu et sans palier. 15.5px sur un petit mobile, 18px au delà
   de 1600px. C'est ce qui fait que « tout s'adapte » quand on réduit
   la fenêtre, pas seulement les quelques titres en clamp(). */
html { font-size: clamp(15.5px, 13.9px + .26vw, 18px); scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: var(--nuit);
  color: var(--givre);
  font-family: 'Epilogue', system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
::selection { background: var(--selection); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-thumb { background: var(--defil); border-radius: 5px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--aube); outline-offset: 3px; border-radius: 6px;
}

.cadre { max-width: 1260px; margin-inline: auto; padding-inline: clamp(1.25rem, 4.5vw, 3.6rem); }

/* ---------- Typographie ---------- */
.mar { font-family: 'Marcellus', serif; font-weight: 400; }
/* Le titre du hero est calibré pour tenir sur UNE ligne au delà de 900px :
   le bloc devient plus court, donc il descend (le hero est aligné en bas)
   et cesse de croiser la tête du loup. */
.t-hero { font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.04; letter-spacing: .01em; }
.t-sec  { font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.08; letter-spacing: .015em; }
.t-bloc { font-size: clamp(1.55rem, 3.2vw, 2.3rem); line-height: 1.12; }
h1 .or, h2 .or, h3 .or, .or { color: var(--aube-clair); }
h1 em, h2 em, h3 em, .t-hero em, .t-sec em {
  font-family: 'Epilogue', sans-serif; font-style: italic; font-weight: 300;
  color: var(--aube-clair);
}

.sur {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .62rem; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--acier);
}
.sur::before { content: ''; width: 2rem; height: 1px; background: var(--trait-fort); }

.chapo { font-size: clamp(1.02rem, 1.7vw, 1.18rem); color: var(--givre-soft); max-width: 42rem; }
.chapo strong, p strong { font-weight: 600; color: var(--givre); }

/* ---------- Révélations ---------- */
.lev { opacity: 0; transform: translateY(26px);
  transition: opacity .85s ease, transform .85s var(--ease); }
.lev.in { opacity: 1; transform: none; }
.trace { opacity: 0; letter-spacing: .14em; filter: blur(6px); transform: translateY(14px);
  transition: opacity 1s ease, letter-spacing 1.1s var(--ease),
    filter 1s ease, transform 1s var(--ease); }
.trace.in { opacity: 1; letter-spacing: .015em; filter: blur(0); transform: none; }
.wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease); }
.wipe.in { clip-path: inset(0 0 0 0); }
html.no-js .lev, html.reduced .lev,
html.no-js .trace, html.reduced .trace { opacity: 1; transform: none; filter: none; letter-spacing: inherit; }
html.no-js .wipe, html.reduced .wipe { clip-path: none; }

/* ---------- Boutons ---------- */
.btn-aube {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1.05rem 1.9rem; border-radius: 12px;
  background: linear-gradient(160deg, var(--or-clair), var(--or) 55%, var(--or-profond));
  color: var(--sur-or);
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 14px 36px var(--ombre-or), inset 0 1px 0 var(--lustre), inset 0 0 0 1px var(--or-cerne);
  transition: transform .35s var(--ease), box-shadow .4s;
}
.btn-aube:hover { transform: translateY(-2px);
  box-shadow: 0 20px 46px var(--ombre-or-fort), inset 0 1px 0 var(--lustre), inset 0 0 0 1px var(--or-cerne); }

.btn-givre {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 1.7rem; border-radius: 12px;
  border: 1px solid var(--trait-fort);
  color: var(--givre);
  font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  transition: background .35s, border-color .35s;
}
.btn-givre:hover { background: var(--survol-doux); border-color: var(--acier); }

/* Hero : le CTA principal devient un verre doré translucide (fond d'or à 30 %),
   même esprit que « Par où commencer », mais le texte reste sombre. Le halo
   doré plein est retiré, un léger flou d'arrière-plan assoit la lisibilité sur
   la vidéo. Ne vise que le hero, pas le CTA de bas de page. */
.ciel .ciel-cta .btn-aube {
  background: rgba(233, 179, 106, .30);
  border: 1px solid var(--or-trait-fort);
  box-shadow: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.ciel .ciel-cta .btn-aube:hover {
  background: rgba(233, 179, 106, .44);
  box-shadow: none;
}

.lien { display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 500; font-size: .84rem; color: var(--aube-clair);
  transition: color .3s, transform .3s var(--ease); transform-origin: left center; }
.lien .fl { display: none; } /* plus de flèche : c'est le texte qui grandit au survol */
.lien:hover { transform: scale(1.06); }

/* ---------- Nav ---------- */
.barre { position: fixed; inset: 0 0 auto; z-index: 90;
  transition: background .45s, border-color .45s;
  border-bottom: 1px solid transparent; }
.barre.on { background: var(--verre-barre);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--trait); }
/* La barre respire plus large que la mesure du texte : sur un moniteur
   externe la racine monte à 18px, les libellés grandissent, et un cadre
   figé à 1260px les faisait passer à la ligne. Rien ne se replie ici :
   chaque bloc garde sa largeur (flex: none) et ses libellés leur ligne. */
.barre-in { max-width: 1600px; margin-inline: auto;
  padding: .95rem clamp(1.25rem, 4.5vw, 3.6rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; }
.barre-in > * { flex: none; }
.barre-in .btn-aube { white-space: nowrap; }
.barre-actions { display: flex; align-items: center; gap: .7rem; }
.sigle { display: flex; align-items: center; gap: .75rem; }
.sigle .n1, .sigle .n2 { white-space: nowrap; }
.sigle .n1 { font-family: 'Marcellus', serif; font-size: 1.02rem; letter-spacing: .22em; }
.sigle .n2 { display: block; margin-top: .15rem; font-size: .5rem; font-weight: 500;
  letter-spacing: .4em; text-transform: uppercase; color: var(--givre); }
/* Troisième ligne : la date, calée sur la largeur des deux autres par
   sigles() dans main.js, comme « Éclaireur d'âmes » l'est déjà. */
.sigle .n3 { display: block; margin-top: .12rem; font-size: .44rem; font-weight: 500;
  letter-spacing: .4em; text-transform: uppercase; color: var(--aube-clair);
  white-space: nowrap; }
.barre-l { display: none; gap: clamp(1.1rem, 1.7vw, 2.1rem); font-size: .8rem; }
.barre-l a { color: var(--givre-soft); transition: color .3s; white-space: nowrap; }
.barre-l a:hover { color: var(--aube-clair); }
@media (min-width: 1060px) { .barre-l { display: flex; } }

.burger { display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid var(--trait); border-radius: 12px; cursor: pointer;
  background: var(--verre); }
.burger svg { width: 17px; }
.burger line { stroke: var(--givre); stroke-width: 1.6; stroke-linecap: round;
  transition: transform .4s var(--ease); transform-origin: center; }
.burger.x line:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger.x line:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
@media (min-width: 1060px) { .burger { display: none; } }

.voile-menu { position: fixed; inset: 0; z-index: 80;
  background: var(--verre-menu);
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem 2.2rem 3rem;
  opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; }
.voile-menu.on { opacity: 1; visibility: visible; }
.voile-menu a { font-family: 'Marcellus', serif;
  font-size: clamp(1.8rem, 7.6vw, 2.7rem); letter-spacing: .04em;
  padding-block: .55rem; border-bottom: 1px solid var(--trait);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s, transform .5s var(--ease), color .3s; }
.voile-menu.on a { opacity: 1; transform: none; }
.voile-menu.on a:nth-child(1){transition-delay:.05s} .voile-menu.on a:nth-child(2){transition-delay:.11s}
.voile-menu.on a:nth-child(3){transition-delay:.17s} .voile-menu.on a:nth-child(4){transition-delay:.23s}
.voile-menu.on a:nth-child(5){transition-delay:.29s} .voile-menu.on a:nth-child(6){transition-delay:.35s}
.voile-menu.on a:nth-child(7){transition-delay:.41s} .voile-menu.on a:nth-child(8){transition-delay:.47s}
.voile-menu a:hover { color: var(--aube-clair); }
.voile-menu .pied { margin-top: 2.4rem; font-size: .6rem; font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase; color: var(--givre-mute); }

/* ---------- Rideau (loader) ---------- */
#rideau { position: fixed; inset: 0; z-index: 100;
  background: var(--nuit);
  display: grid; place-items: center;
  transition: opacity .8s ease, visibility .8s ease; }
#rideau.off { opacity: 0; visibility: hidden; }
/* Sans JS, `.off` n'est jamais posé : le rideau masquerait tout le site. */
html.no-js #rideau { display: none; }
#rideau .rn { font-family: 'Marcellus', serif; font-size: 1.35rem;
  letter-spacing: .55em; text-indent: .55em; color: var(--givre);
  animation: rtrace 1.3s var(--ease) forwards; }
@keyframes rtrace { from { letter-spacing: .9em; opacity: 0; filter: blur(6px); }
  to { letter-spacing: .3em; opacity: 1; filter: blur(0); } }
#rideau .rl { margin: 1.3rem auto 0; width: 150px; height: 1px;
  background: var(--trait); overflow: hidden; }
#rideau .rl::after { content: ''; display: block; height: 100%; width: 44%;
  background: var(--aube);
  animation: rglisse 1.15s ease-in-out infinite; }
@keyframes rglisse { 0% { transform: translateX(-110%); } 100% { transform: translateX(340%); } }

/* ---------- Curseur (desktop) ---------- */
.pointe, .halo { display: none; }
@media (hover:hover) and (pointer:fine) {
  .pointe, .halo { display: block; position: fixed; top: 0; left: 0;
    border-radius: 50%; pointer-events: none; z-index: 99; will-change: transform; }
  .pointe { width: 5px; height: 5px; background: var(--aube-clair); }
  .halo { width: 34px; height: 34px; border: 1px solid var(--curseur-trait);
    transition: width .3s var(--ease), height .3s var(--ease), border-color .3s, background .3s; }
  .halo.hv { width: 56px; height: 56px; border-color: var(--aube);
    background: var(--curseur-fond); }
}

/* ============================================================
   HERO, la scène vivante
   L'image s'anime en CSS (zoom lent, neige, brume, rayon).
   Pour passer à la vidéo Grok plus tard : remplacer <img> par
   <video autoplay muted loop playsinline poster="scene.jpg">
   avec la même classe .scene-media, rien d'autre à changer.
   ============================================================ */
/* Le bas du hero réserve une bande pour « Descendre ». Sans elle, en
   fenêtre basse les boutons descendaient sur le repère, et en plein
   écran le repère remontait dans le vide. La bande suit la hauteur. */
.ciel { position: relative; min-height: 100svh; overflow: hidden;
  display: grid; align-items: end; justify-items: center;
  padding-bottom: clamp(8rem, 6vh + 4.8rem, 10.5rem); }
.scene { position: absolute; inset: 0; }
/* La prise verticale est deja cadree pour le portrait : elle se centre,
   la ou la scene large doit etre remontee pour garder l'horizon. */
.scene-verticale { object-position: center center !important;
  animation-name: kenb-doux; }
@keyframes kenb-doux { from { transform: scale(1.02); } to { transform: scale(1.09); } }
.scene-media { width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
  transform-origin: 50% 42%;
  animation: kenb 30s ease-in-out infinite alternate; will-change: transform; }
@keyframes kenb { from { transform: scale(1.02); } to { transform: scale(1.09); } }

/* Rayon d'aube qui pulse au centre */
.rayon { position: absolute; top: 0; bottom: 28%; left: 50%; width: 30%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 70% at 50% 30%, rgba(246,217,168,.34), transparent 70%);
  mix-blend-mode: screen; pointer-events: none;
  animation: pulse-r 7s ease-in-out infinite; }
@keyframes pulse-r { 0%,100% { opacity: .55; } 50% { opacity: .95; } }

/* Brume dérivante (2 nappes) */
.brume { position: absolute; height: 34%; width: 150%; left: -25%; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 60%, rgba(234,240,246,.13), transparent 70%);
  mix-blend-mode: screen; will-change: transform; }
.brume-a { bottom: 16%; animation: derive-a 30s ease-in-out infinite alternate; }
.brume-b { bottom: 28%; opacity: .7; animation: derive-b 40s ease-in-out infinite alternate; }
@keyframes derive-a { from { transform: translateX(-4%); } to { transform: translateX(5%); } }
@keyframes derive-b { from { transform: translateX(4%); } to { transform: translateX(-5%); } }

/* Neige (flocons générés en JS) */
.neige { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.flocon { position: absolute; top: -3vh; border-radius: 50%;
  background: rgba(240,246,252,.9);
  animation: chute var(--dur,14s) linear infinite; animation-delay: var(--del,0s);
  will-change: transform; }
.flocon--loin { filter: blur(1px); opacity: .55; }
@keyframes chute {
  0%   { transform: translate3d(0,-4vh,0); opacity: 0; }
  8%   { opacity: .95; }
  92%  { opacity: .85; }
  100% { transform: translate3d(var(--dx,20px),106vh,0); opacity: 0; }
}

/* Voile de lisibilité (bas + haut, les animaux restent dégagés) */
.voile { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12,20,32,.5) 0%, transparent 18%),
    radial-gradient(ellipse 56% 34% at 50% 50%, rgba(12,20,32,.30), transparent 72%),
    linear-gradient(180deg, transparent var(--voile-p1), var(--voile-mi) var(--voile-p2), var(--nuit) 100%); }

.ciel-in { position: relative; z-index: 5; text-align: center;
  max-width: min(56rem, 92vw); padding-inline: 1.25rem; }
.ciel-in .sur { justify-content: center; color: var(--givre);
  padding: .55rem 1.1rem; border-radius: 999px;
  background: rgba(12,20,32,.32);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(234,240,246,.14);
  text-shadow: 0 1px 14px rgba(12,20,32,.75); }
.ciel-in .sur::before { background: rgba(234,240,246,.6); }
.ciel-in .sur::after { content: ''; width: 2rem; height: 1px; background: rgba(234,240,246,.6); }
.ciel-sub { margin: 1.3rem auto 0; max-width: 34rem;
  font-style: italic; font-weight: 300;
  font-size: clamp(1.05rem, 2.3vw, 1.35rem); color: var(--givre-soft); }
.ciel-cta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.repere { position: absolute; bottom: clamp(1.4rem, 2.5vh, 2.6rem); left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  font-size: .66rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--givre);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .7), 0 0 3px rgba(0, 0, 0, .5); }
.repere::after { content: ''; width: 1px; height: 38px;
  background: linear-gradient(to bottom, var(--acier), transparent); }

/* ---------- Ruban de confiance ---------- */
.ruban { border-block: 1px solid var(--trait); background: var(--nuit-2); }
/* Deux colonnes et non quatre : le conteneur est plafonné à 1260px, une
   colonne sur quatre n'offre que 178px de texte alors que « RC
   professionnelle, premiers secours » en réclame 251. En 2x2 chaque
   proposition tient en deux lignes nettes, ce que la mise en page demande. */
.ruban-in { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 760px) { .ruban-in { grid-template-columns: repeat(2, 1fr); } }
.ruban-i { display: flex; align-items: center; gap: .8rem;
  padding: 1.15rem 1.4rem; }
.ruban-i + .ruban-i { border-top: 1px solid var(--trait); }
@media (min-width: 760px) {
  .ruban-i + .ruban-i { border-top: 0; }
  .ruban-i:nth-child(2n) { border-left: 1px solid var(--trait); }
  .ruban-i:nth-child(n+3) { border-top: 1px solid var(--trait); }
}
.ruban-i svg { flex: none; width: 27px; height: 27px; stroke: var(--aube);
  fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ruban-i span { font-size: .74rem; color: var(--givre-soft); letter-spacing: .04em; }
/* Deux lignes à toutes les largeurs : l'intitulé au-dessus, la précision
   en dessous et capitalisée. Le point médian qui les séparait disparaît. */
.ruban-i b { display: block; font-weight: 600; color: var(--givre);
  font-size: .8rem; letter-spacing: .02em; }
.ruban-i .sep { display: none; }
.ruban-i .det-r { display: block; margin-top: .12rem; }
.ruban-i .det-r::first-letter { text-transform: uppercase; }

/* ---------- Sections ---------- */
.sec { position: relative; padding-block: clamp(4.5rem, 9vw, 8rem); background: var(--nuit); }
.sec--2 { background: var(--nuit-2); }
.tete { max-width: 820px; margin-bottom: clamp(2.2rem, 5.5vw, 3.8rem); }
.tete .sur { margin-bottom: 1.2rem; }
.tete p { margin: 1.1rem 0 0; }

/* ---------- « Où en es-tu » ---------- */
.etats { display: grid; gap: .9rem; }
@media (min-width: 640px)  { .etats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .etats { grid-template-columns: repeat(3, 1fr); } }
/* Colonne flex : la ligne .vers est poussée en bas de chaque carte, si bien
   que les repères (Nord, Parcours, Centre...) s'alignent d'une carte à
   l'autre même quand les intitulés n'ont pas la même hauteur. */
.etat { display: flex; flex-direction: column; padding: 1.45rem 1.5rem;
  background: var(--panneau); border: 1px solid var(--trait); border-radius: 16px;
  transition: transform .45s var(--ease), border-color .4s, background .4s, box-shadow .45s var(--ease); }
.etat:hover { transform: translateY(-4px); border-color: var(--or-trait-fort);
  background: var(--survol-panneau); box-shadow: 0 18px 40px var(--ombre); }
.etat h3 { margin: 0 0 .3rem; font-size: .98rem; font-weight: 600; }
.etat p { margin: 0; font-size: .84rem; color: var(--givre-mute); }
.etat .vers { display: flex; align-items: baseline; gap: .7rem;
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--trait);
  font-size: .76rem; color: var(--givre-mute);
  transition: color .35s, border-color .35s; }
.etat .vers b { font-weight: 600; font-size: .58rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--acier); transition: color .35s; }
.etat:hover .vers { color: var(--givre-soft); border-top-color: var(--or-trait-plus); }
.etat:hover .vers b { color: var(--aube-clair); }

/* ============================================================
   LES 5 ORIENTATIONS, cartes empilées au scroll (signature)
   ============================================================ */
.pile { position: relative; }
.carte-o { position: sticky; overflow: hidden;
  min-height: min(78vh, 720px);
  display: flex; align-items: center;
  border-top: 1px solid var(--trait-fort);
  border-radius: 26px 26px 0 0;
  padding: clamp(2.2rem, 5vw, 4rem) 0;
  box-shadow: 0 -24px 60px var(--ombre); }
.carte-o:nth-child(1) { top: 84px;  background: var(--carte-1); }
.carte-o:nth-child(2) { top: 98px;  background: var(--carte-2); }
.carte-o:nth-child(3) { top: 112px; background: var(--carte-3); }
.carte-o:nth-child(4) { top: 126px; background: var(--carte-4); }
.carte-o:nth-child(5) { top: 140px; background: var(--carte-5); }
/* Ancre nav « Échoppe » : on vise la carte Ouest sans la caler sous la barre. */
#echoppe { scroll-margin-top: 92px; }
.carte-o::before { content: '';
  position: absolute; top: -20%; right: -6%; width: 55%; height: 140%;
  background: radial-gradient(ellipse at 60% 40%, var(--lavis-or), transparent 65%);
  pointer-events: none; }
.lettre { position: absolute; right: clamp(.5rem, 4vw, 3rem); top: 50%;
  transform: translateY(-50%);
  font-family: 'Marcellus', serif;
  font-size: clamp(11rem, 30vw, 24rem); line-height: 1;
  color: var(--lettre); pointer-events: none; user-select: none; }
.carte-in { position: relative; z-index: 2; max-width: 620px; }
.carte-id { min-width: 0; }
.carte-in .sys { font-size: .6rem; font-weight: 600; letter-spacing: .34em;
  text-transform: uppercase; color: var(--aube); margin-bottom: 1rem; }
.carte-in h3 { margin: 0; font-family: 'Marcellus', serif; font-weight: 400;
  font-size: clamp(2rem, 5.4vw, 3.6rem); line-height: 1.05; }
.carte-in .devise { margin: .8rem 0 1.1rem;
  font-style: italic; font-weight: 300;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--aube-clair); }
.carte-in .desc { margin: 0 0 1.4rem; color: var(--givre-soft); max-width: 32rem; }
.carte-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.puce { padding: .45rem .9rem; border: 1px solid var(--trait);
  border-radius: 999px; background: var(--pastille);
  font-size: .66rem; font-weight: 500; letter-spacing: .08em; color: var(--givre-soft); }
.puce b { color: var(--aube-clair); font-weight: 600; }

/* ---------- Carte d'orientation en deux colonnes au dévoilement ----------
   Au-delà de la bascule, la carte est toujours une grille de deux colonnes
   de largeur égale : l'identité à gauche, la zone révélée à droite, dans la
   moitié restée vide. Au repos, l'identité est simplement décalée vers le
   centre par une translation (calc ci-dessous : demi-largeur du conteneur
   moins la demi-largeur historique de 620px), ce qui conserve la
   composition centrée d'origine. Au clic, la translation retombe à zéro :
   le bloc glisse vers la gauche pendant que deplis() anime la hauteur du
   .repli. La translation n'affecte pas la mise en page, donc la largeur du
   .repli est déjà la bonne au moment où le JS mesure son scrollHeight. */
@media (min-width: 1000px) {
  .carte-in { --ecart-o: clamp(2rem, 4vw, 3.6rem);
    width: 100%; max-width: 1260px;
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: var(--ecart-o); align-items: center; }
  .carte-id { grid-column: 1; grid-row: 1; }
  /* Sans JS, le .repli est déjà déplié : les deux colonnes sont occupées
     et le décalage de repos n'a pas lieu d'être. */
  html.js .carte-id { translate: calc(100% + clamp(1.25rem, 4.5vw, 3.6rem)
      + var(--ecart-o) / 2 - 310px) 0;
    transition: translate .55s var(--ease); }
  /* Le dévoilement pleine largeur (« Découvrir les séances », data-large) ne
     déclenche pas le glissement de l'identité : seul l'atelier occupe la
     colonne 2. */
  html.js .carte-in:has(.devoile:not([data-large])[aria-expanded="true"]) .carte-id { translate: 0 0; }
  /* La colonne d'identité vaut la moitié de la carte : le h3 redescend
     d'un cran pour que « Vivre l'expérience » tienne sur une ligne de
     1000px jusqu'au plein écran. Mesuré : le titre y occupe au plus 73%
     de la colonne. */
  .carte-in h3 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
  .carte-in > .repli { grid-column: 2; grid-row: 1;
    border-left: 1px solid var(--trait); }
  .carte-in .repli-in { padding: 0 0 0 clamp(1.4rem, 2.4vw, 2.2rem); }
}

/* ---------- Cadre « sommet » (média à faîte de montagne) ---------- */
.sommet-c { position: relative; }
.sommet-c::before { content: ''; position: absolute; inset: -1.5px;
  background: var(--trait-fort);
  clip-path: polygon(0 7.5%, 50% 0, 100% 7.5%, 100% 100%, 0 100%); }
.sommet { position: relative; overflow: hidden; background: var(--panneau);
  clip-path: polygon(0 7.5%, 50% 0, 100% 7.5%, 100% 100%, 0 100%); }
.sommet video, .sommet img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- La voix du guide ----------
   La vidéo n'est pas une vignette posée sur la page : elle sort de la
   grille par la gauche jusqu'au bord de la fenêtre, tient toute la
   hauteur de la section (débords compris) et se dissout dans le fond
   par un masque en dégradé. Aucune bordure, aucun cadre : le raccord
   se fait par la lumière.
   Trois règles apprises en chemin, à ne pas défaire :
   1. le fondu est un MASQUE, pas un voile peint par-dessus : un voile
      posé sur une vidéo composée par le GPU se repeint avec retard et
      laisse voir l'arête du rectangle au défilement ;
   2. une seule couche de masque par élément. `mask-composite` sur deux
      couches vide la couche entière sous Chrome (vérifié : la vidéo
      disparaissait et n'était même plus décodée). Le fondu vertical est
      donc porté par le bloc, le fondu horizontal par la vidéo elle-même,
      et les deux masques se multiplient naturellement. Le noir des
      dégradés est un canal alpha, pas une teinte : il ne dépend pas de
      la variante jour ou nuit.
   3. la révélation est un `.lev` posé sur `.guide-v`, pas un `.wipe` sur
      le média : `.wipe` clippe l'élément à une largeur nulle, et
      l'IntersectionObserver ne le voit alors jamais entrer, donc la
      vidéo restait invisible (constaté en 390px).
   `--debord` = ce qu'il faut retrancher pour atteindre le bord de la
   fenêtre depuis l'intérieur de `.cadre` ; `--respire` = le padding
   vertical de `.sec`, repris à l'identique. */
.guide-s { overflow: hidden; overflow: clip; }
.guide-g { display: grid; gap: 2.2rem;
  --debord: calc(clamp(1.25rem, 4.5vw, 3.6rem) + max(0px, (100vw - 1260px) / 2));
  --respire: clamp(4.5rem, 9vw, 8rem); }
.guide-v { position: relative; margin-inline: calc(-1 * var(--debord)); }
/* Lueur d'or sous la vidéo : elle se lit à travers le fondu, là où
   l'image s'éteint, et fait le lien entre le média et la section. */
.guide-v::before { content: ''; position: absolute; inset: 4% -12% 6% 22%;
  background: radial-gradient(ellipse at 44% 46%, var(--lavis-or-fort), transparent 62%);
  pointer-events: none; }
.guide-fondu { position: relative; overflow: hidden;
  height: clamp(18rem, 76vw, 30rem);
  --fondu-y: linear-gradient(to bottom, transparent 0, #000 3.5rem,
    #000 56%, transparent 100%);
  -webkit-mask-image: var(--fondu-y); mask-image: var(--fondu-y); }
.guide-fondu video, .guide-fondu img { width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 14%; }
.guide-leg { position: relative; margin: .9rem var(--debord) 0;
  display: flex; flex-direction: column; gap: .2rem; }

@media (min-width: 980px) {
  .guide-g { grid-template-columns: 5fr 7fr; gap: clamp(2.6rem, 5vw, 4.6rem);
    align-items: stretch; }
  .guide-v { margin-inline: calc(-1 * var(--debord)) 0; min-height: 34rem; }
  /* Le média déborde du haut et du bas de la colonne pour couvrir le
     padding de la section : il touche donc les deux sections voisines,
     que `.guide-s` recoupe au ras. Les arrêts sont calés sur `--respire`,
     l'image est donc déjà éteinte au bord de la section. */
  .guide-fondu { position: absolute; inset: calc(-1 * var(--respire)) 0; height: auto;
    --fondu-y: linear-gradient(to bottom, transparent 0,
      #000 calc(var(--respire) + 5rem),
      #000 52%, transparent calc(100% - var(--respire))); }
  /* En large, le fondu se joue aussi sur la droite : l'image s'éteint
     avant la colonne de texte, sans arête. */
  .guide-fondu video, .guide-fondu img {
    -webkit-mask-image: linear-gradient(to right, #000 52%, transparent 100%);
    mask-image: linear-gradient(to right, #000 52%, transparent 100%); }
  /* La légende se pose dans le bas du fondu, adossée à un voile qui
     reprend le fond de la section : lisible dans les deux variantes,
     et alignée sur la colonne de texte de la page. */
  .guide-leg { position: absolute; inset: auto 0 0 0; margin: 0;
    padding: 1.4rem 1rem .2rem var(--debord);
    background: radial-gradient(150% 130% at 8% 62%,
      var(--nuit-2) 42%, transparent 86%); }
}
.guide-leg b { font-family: 'Marcellus', serif; font-weight: 400;
  font-size: 1.05rem; letter-spacing: .08em; color: var(--givre); }
.guide-leg span { font-size: .58rem; font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: var(--acier); }
/* « Fondateur du Cerf Blanc » passe à la ligne sur mobile, le séparateur
   central disparaît alors. En desktop, tout reste sur une ligne. */
.guide-br { display: none; }
@media (max-width: 640px) {
  .guide-br { display: inline; }
  .guide-leg .sep-guide { display: none; }
}
.citation { margin: 1.2rem 0 0;
  font-style: italic; font-weight: 300;
  font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.4; color: var(--givre); }
.citation .or { font-style: normal; }
.bio { margin-top: 1.3rem; color: var(--givre-soft); max-width: 36rem; }

/* La carte du guide : le nom seul, le parcours au clic.
   La frise des jalons reste dehors, elle se lit d'un coup d'oeil. */
.carte-guide { margin-top: 1.6rem; padding: 1.5rem 1.6rem;
  border: 1px solid var(--trait); border-radius: 18px; background: var(--panneau);
  max-width: 36rem; transition: border-color .4s; }
.carte-guide:hover { border-color: var(--or-trait); }
.carte-guide-n { margin: 0; font-family: 'Marcellus', serif; font-weight: 400;
  font-size: 1.35rem; letter-spacing: .03em; color: var(--givre); }
.carte-guide .devoile { margin-top: .5rem; }
.carte-guide .bio { margin-top: 0; }

/* Récit fondateur, la voix à la première personne */
.recit { margin: 1.6rem 0 0; padding: 0 0 0 1.4rem;
  border-left: 1px solid var(--or-trait); max-width: 36rem; }
.recit p { margin: 0; font-style: italic; font-weight: 300;
  font-size: .92rem; line-height: 1.7; color: var(--givre-soft); }
.recit p + p { margin-top: .9rem; }

/* ---------- Sentier à jalons ---------- */
.sentier { margin: 2.2rem 0 0 .5rem; padding-left: 1.9rem;
  border-left: 1px solid var(--trait-fort); list-style: none; }
.jalon { position: relative; padding-bottom: 1.5rem; }
.jalon:last-child { padding-bottom: .2rem; }
.jalon::before { content: '';
  position: absolute; left: calc(-1.9rem - 5.5px); top: .5rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--aube);
  box-shadow: 0 0 0 5px var(--lavis-or-fort); }
.jalon .quand { font-size: .6rem; font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: var(--aube); }
.jalon h3, .jalon .quoi { display: block; margin: .3rem 0 0;
  font-family: 'Marcellus', serif; font-weight: 400; font-size: 1.12rem; letter-spacing: .02em; }
.jalon .det { display: block; margin-top: .2rem; font-size: .84rem; color: var(--givre-mute); }
.jalon .prix-j { display: inline-block; margin-top: .45rem; padding: .3rem .75rem;
  border: 1px solid var(--or-trait); border-radius: 999px;
  font-size: .66rem; font-weight: 600; letter-spacing: .1em; color: var(--aube-clair); }
/* Le montant d'une étape ne s'affiche qu'au clic, comme partout ailleurs. */
.jalon .devoile { margin-top: .5rem; font-size: .6rem; letter-spacing: .2em; }
.jalon .devoile .pmoins { width: 24px; height: 24px; }
.jalon .repli-in { padding-top: .6rem; }

/* ---------- Rando Dev' ---------- */
.rando-g { display: grid; gap: 1rem; margin-top: clamp(1.8rem, 4vw, 2.6rem);
  align-items: start; }
@media (min-width: 700px)  { .rando-g { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .rando-g { grid-template-columns: repeat(4, 1fr); } }
/* align-items:start : chaque carte se cale en haut et prend sa propre
   hauteur. Quand l'une se déplie, les cartes voisines ne s'étirent plus
   pour suivre la rangée (elles restaient ouvertes « à vide »). Un
   min-height sur l'en-tête garde les titres alignés à l'état replié. */
.inclus { background: var(--panneau);
  border: 1px solid var(--trait); border-radius: 16px;
  transition: border-color .4s, background .4s;
  display: flex; flex-direction: column; }
.inclus-t { min-height: 7.4rem; }
.inclus:hover { border-color: var(--or-trait-plus); }
.inclus-h { margin: 0; font: inherit; font-weight: inherit; }
.inclus-t { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem;
  width: 100%; padding: 1.5rem 1.5rem 1.3rem; cursor: pointer; text-align: left; }
.inclus-n { font-size: .98rem; font-weight: 600; color: var(--givre); }
.inclus-t .pmoins { width: 26px; height: 26px; }
.inclus-t .picto { display: block; width: 30px; height: 30px; }
.inclus .repli-in { padding: 0 1.5rem 1.5rem; }
.inclus .repli-in p { margin: 0; font-size: .84rem; color: var(--givre-mute); }
.inclus--tarif { border-color: var(--or-trait);
  background: var(--panneau-or); }
.inclus--tarif .grand-prix { margin: 0 0 .6rem; }
.rando-pied { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; }
.grand-prix { font-family: 'Marcellus', serif; font-size: clamp(1.4rem, 3vw, 1.7rem);
  line-height: 1.5; color: var(--aube-clair); }
.grand-prix small { font-family: 'Epilogue', sans-serif; font-size: .58em; color: var(--givre-mute); }

/* ---------- Honoraires ----------
   Le barème est une pile d'accordéons (.ligne-a) : l'intitulé est
   toujours visible, le montant ne se découvre qu'au clic. */
.bareme { border-top: 1px solid var(--trait); }
.tag-p { flex: none; padding: .28rem .7rem; border-radius: 999px;
  background: var(--lavis-or); border: 1px solid var(--or-trait);
  font-size: .56rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--aube-clair); white-space: nowrap; }

/* Phare : l'engagement Transformation */
.phare { position: relative; display: block; overflow: hidden;
  margin-top: 2.4rem; padding: clamp(1.9rem, 4.5vw, 3rem);
  border: 1px solid var(--or-trait-plus); border-radius: 20px;
  background:
    radial-gradient(ellipse at 85% 20%, var(--lavis-or-fort), transparent 55%),
    var(--panneau-or);
  transition: transform .5s var(--ease), border-color .4s, box-shadow .5s; }
.phare:hover { transform: translateY(-4px); border-color: var(--aube);
  box-shadow: 0 26px 60px var(--ombre-fort); }
.phare .sur { color: var(--aube); }
.phare .sur::before { background: var(--or-trait-fort); }
.phare h3 { margin: .9rem 0 0; font-family: 'Marcellus', serif; font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3rem); }
.phare p { margin: .7rem 0 0; max-width: 34rem; color: var(--givre-soft); font-size: .92rem; }
.phare .pied-ph { margin-top: 1.1rem; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: .8rem 1.8rem; }
.phare .cout { font-family: 'Marcellus', serif; font-size: clamp(1.6rem, 3.6vw, 2.2rem); color: var(--aube-clair); }
.phare .devoile { margin-top: 1.4rem; }
.phare .repli-in { padding-top: 1.3rem; }
/* Ancre depuis « Par où commencer » : viser la carte jaune sous la barre. */
#transformation { scroll-margin-top: 96px; }
/* Un grand panneau ouvert ne doit plus se soulever au survol. */
.phare:has(.repli:not([inert])):hover { transform: none; }

/* Reveal immersif de l'accompagnement Transformation : la vidéo paysage
   (16:9) en haut, puis le texte pleine largeur dessous, comme la vidéo du
   guide. Plus immersif qu'une colonne étroite. */
.transfo { display: block; }
.transfo-media { margin: 0 0 clamp(1.9rem, 4.4vw, 2.8rem); aspect-ratio: 16 / 9;
  /* Les bords de la vidéo se fondent dans la carte, sans arête nette :
     deux dégradés (horizontal + vertical) composés en intersection. */
  --fondu-bord: 7%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 var(--fondu-bord), #000 calc(100% - var(--fondu-bord)), transparent),
    linear-gradient(to bottom, transparent 0, #000 var(--fondu-bord), #000 calc(100% - var(--fondu-bord)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 var(--fondu-bord), #000 calc(100% - var(--fondu-bord)), transparent),
    linear-gradient(to bottom, transparent 0, #000 var(--fondu-bord), #000 calc(100% - var(--fondu-bord)), transparent);
  mask-composite: intersect; }
.transfo-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Le texte d'intro prend exactement la largeur de la vidéo (bloc plein) et
   respire avant les étapes numérotées. Sélecteur à spécificité relevée
   (.transfo .transfo-intro) pour battre `.phare p` (max-width:34rem et
   margin qui, sinon, rétrécissaient le texte et supprimaient l'espace). */
.transfo .transfo-intro { margin: 0 0 clamp(2.8rem, 6vw, 4rem); max-width: none;
  font-size: 1.02rem; line-height: 1.64; color: var(--givre); }
.transfo-etapes { margin: 0 0 1.6rem; padding: 0; list-style: none;
  display: grid; gap: 1.05rem; counter-reset: te; }
.transfo-etapes li { position: relative; padding-left: 2.5rem;
  font-size: .92rem; line-height: 1.55; color: var(--givre-mute); }
.transfo-etapes li b { color: var(--givre); font-weight: 600; }
.transfo-etapes li::before { counter-increment: te; content: counter(te);
  position: absolute; left: 0; top: -.12em; width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--or-trait-fort); background: var(--pastille);
  color: var(--aube-clair); font-family: 'Marcellus', serif; font-size: .95rem; }
/* Les 4 lignes « inclus » : sans puces, juste de l'air entre elles. */
.transfo-inclus { margin: 0 0 1.6rem; padding: 0; list-style: none; display: grid; gap: .7rem; }
.transfo-inclus li { font-size: .92rem; line-height: 1.5; color: var(--givre-soft); }

.regles { margin-top: 1.8rem; display: grid; gap: .9rem; }
@media (min-width: 780px) { .regles { grid-template-columns: repeat(3, 1fr); } }
.regle { padding: 1.1rem 1.2rem; border: 1px solid var(--trait);
  border-radius: 14px; background: var(--nuit-2);
  font-size: .78rem; color: var(--givre-soft);
  transition: transform .45s var(--ease), border-color .4s, box-shadow .45s var(--ease); }
.regle:hover { transform: translateY(-3px); border-color: var(--or-trait);
  box-shadow: 0 16px 34px var(--ombre); }
.regle b { display: block; margin-bottom: .25rem; font-size: .58rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--aube); }

/* ---------- Témoignages ---------- */
.echos { display: grid; gap: 1rem; }
@media (min-width: 800px) { .echos { grid-template-columns: repeat(2, 1fr); } }
.echo { padding: 1.8rem 1.7rem; background: var(--panneau);
  border: 1px solid var(--trait); border-radius: 18px; }
.echo .etoiles { color: var(--aube); font-size: .76rem; letter-spacing: .26em; margin-bottom: .85rem; }
.echo blockquote { margin: 0; font-style: italic; font-weight: 300;
  font-size: 1.06rem; line-height: 1.55; color: var(--givre); }
.echo .qui-e { margin-top: 1rem; font-size: .6rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--acier); }

/* ---------- Deux colonnes : engagement / limites ---------- */
.duo { display: grid; gap: 1.2rem; }
@media (min-width: 880px) { .duo { grid-template-columns: 1fr 1fr; gap: 1.6rem; } }
.duo-col { padding: 1.9rem 1.8rem; border-radius: 18px;
  border: 1px solid var(--trait); background: var(--panneau);
  transition: border-color .4s, transform .5s var(--ease), box-shadow .5s; }
.duo-col:hover { transform: translateY(-4px); border-color: var(--or-trait-plus);
  box-shadow: 0 22px 50px var(--ombre); }
.duo-col h3 { margin: 0 0 1.1rem; font-family: 'Marcellus', serif;
  font-weight: 400; font-size: 1.35rem; letter-spacing: .02em; }
.duo-col ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .85rem; }
/* Deux items et deux seulement : la coche, puis la phrase entière.
   Sans le <span>, le <strong> et la suite du texte formaient deux
   items flex distincts, séparés par le `gap` : d'où le trou béant
   derrière « Dirigeant(e) : ». Le span referme la phrase. */
.duo-col li { display: flex; gap: .8rem; align-items: flex-start;
  font-size: .9rem; line-height: 1.6; color: var(--givre-soft); }
.duo-col li > span { display: block; }
.duo-col li strong { font-weight: 600; color: var(--givre); }
.duo-col li svg { flex: none; width: 17px; height: 17px; margin-top: .18rem;
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.duo-col.oui li svg { stroke: var(--aube); }
.duo-col.non li svg { stroke: var(--acier); }

/* ---------- Accordéons (FAQ, barème) et croix « plus » ---------- */
details.accord > summary { list-style: none; cursor: pointer; }
details.accord > summary::-webkit-details-marker { display: none; }
.pmoins { flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--trait-fort);
  transition: transform .4s var(--ease), background .3s, border-color .3s; }
.pmoins svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; }
details[open] summary .pmoins, [aria-expanded="true"] .pmoins { transform: rotate(45deg);
  background: var(--aube); border-color: var(--aube); color: var(--sur-or); }
.faq { max-width: 840px; }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.3rem .2rem; font-size: .98rem; font-weight: 500; }
.fa { overflow: hidden; }
.faq .fa > div { padding: 0 .2rem 1.3rem; font-size: .9rem;
  color: var(--givre-soft); max-width: 92%; }

/* ---------- CTA final ---------- */
.final { text-align: center; position: relative; overflow: hidden; }
.final::before { content: ''; position: absolute; left: 50%; top: 6%;
  width: 640px; height: 420px; transform: translateX(-50%);
  background: radial-gradient(ellipse, var(--lavis-or-fort), transparent 65%);
  pointer-events: none; }
.final-in { position: relative; z-index: 2; }
.final .chapo { margin-inline: auto; }
.final .ciel-cta { justify-content: center; }
.final-meta { margin-top: 1.7rem; font-size: .62rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--givre-mute); }

/* ---------- Ancre flottante ---------- */
#ancre { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 70;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .4s, transform .4s var(--ease); }
#ancre.on { opacity: 1; transform: none; pointer-events: auto; }
/* Sans JS, `.on` n'est jamais posé : l'ancre resterait invisible. */
html.no-js #ancre { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 640px) { #ancre { right: 50%; transform: translate(50%, 16px); }
  #ancre.on { transform: translate(50%, 0); } }

/* ---------- Aurore (hero entreprises) ----------
   Pas de vidéo ici, seulement un dégradé : le hero suit donc les
   deux variantes. La dernière strate fond vers le fond de page,
   elle vaut transparent en nuit (rendu d'origine inchangé). */
.aurore { position: relative; overflow: hidden;
  min-height: 86svh; display: flex; align-items: flex-end;
  padding: 7rem 0 clamp(3rem, 8vh, 5rem);
  background:
    linear-gradient(180deg, transparent 56%, var(--aurore-bas) 100%),
    radial-gradient(ellipse 60% 45% at 72% 22%, var(--aurore-halo), transparent 65%),
    radial-gradient(ellipse 50% 40% at 18% 70%, var(--aurore-froid), transparent 60%),
    var(--fond-aurore); }
.stats { display: grid; gap: 1rem; margin-top: clamp(1.8rem, 4vw, 2.6rem); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { padding: 1.8rem 1.6rem; background: var(--panneau);
  border: 1px solid var(--trait); border-radius: 16px; }
.stat .n { font-family: 'Marcellus', serif;
  font-size: clamp(2.2rem, 5.2vw, 3.2rem); line-height: 1; color: var(--aube-clair);
  font-variant-numeric: tabular-nums; }
/* Le compteur : main.js glisse devant le chiffre un jumeau animé
   (aria-hidden) et met la valeur vraie hors de vue, jamais hors du
   document. Un lecteur d'écran lit donc « 25% » d'emblée, pendant
   que l'oeil voit le nombre monter. Sans JS ou en mouvement réduit,
   rien n'est touché : le chiffre final est déjà dans le HTML. */
.hors-ecran { position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.stat .l { margin-top: .7rem; font-size: .84rem; color: var(--givre-soft); }
.stat .src { display: block; margin-top: .5rem; font-size: .64rem; color: var(--givre-mute); }

/* ---------- Pied ---------- */
footer { background: var(--pied-fond); border-top: 1px solid var(--trait);
  padding: 4.4rem 0 2.4rem; }
.pied-g { display: grid; gap: 2.4rem; }
@media (min-width: 880px) { .pied-g { grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; } }
/* La baseline reprend l'or de « Depuis 2019 ». Sa largeur est calée sur
   celle du sigle par sigles() (main.js), pour former un bloc net et aligné.
   Le max-width en rem n'est qu'un repli avant le calcul JS. */
.pied-tag { margin-top: 1rem; max-width: 15rem; font-size: .82rem;
  line-height: 1.5; color: var(--aube-clair); }
.pied-h { margin: 0 0 1rem; font-size: .58rem; font-weight: 600;
  letter-spacing: .36em; text-transform: uppercase; color: var(--acier); }
.pied-l { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .55rem; font-size: .88rem; }
.pied-l a { color: var(--givre-soft); transition: color .3s; }
.pied-l a:hover { color: var(--aube-clair); }
.pied-mute { color: var(--givre-mute); }
.pied-leg { margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid var(--trait);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-size: .7rem; color: var(--givre-mute); }
.pied-leg nav { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.pied-leg nav a:hover { color: var(--aube-clair); }

/* ============================================================
   NOUVEAUX COMPOSANTS : accents, langue, son, dévoilements,
   honoraires à la demande, pictos animés au tracé
   ============================================================ */

/* Le picto suisse est le seul du jeu qui ne soit pas un tracé : c'est un
   disque plein d'où la croix fédérale est évidée, dans la couleur du fond
   de la bande. Elle suit donc le thème, bleu nuit ou blanc. Plus grand que
   ses voisins, parce qu'un disque plein a besoin d'air pour se lire. */
[data-picto="ruban-suisse"] svg { stroke: none; }
[data-picto="ruban-suisse"] svg circle { fill: var(--aube); }
[data-picto="ruban-suisse"] svg path { fill: var(--nuit-2); }
@media (hover: hover) and (pointer: fine) {
  html.js .ruban-i:hover [data-picto="ruban-suisse"] svg circle { fill: var(--aube-clair); }
  /* Le tracé progressif n'a pas de sens sur un aplat : on l'annule. */
  html.js .ruban-i:hover [data-picto="ruban-suisse"] svg > * { animation: none; }
}

/* Titre de la boussole : le picto occupe l'espace libre à gauche et se
   met à l'échelle du titre. Le titre tient sur deux lignes, jamais trois. */
/* Le picto est calé sur la hauteur des deux lignes du titre. Le titre .t-sec
   suit clamp(1.9rem, 4.6vw, 3.4rem) avec un interligne 1.08 : deux lignes
   valent donc 2.16 fois la police. On réplique ce clamp multiplié par 2.16,
   si bien que le picto suit le titre à toutes les largeurs, au même point de
   bascule vw/rem, sans mesure JS. */
.tete-boussole { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem); }
.tete-boussole .t-sec { margin: 0; }
.boussole-p { flex: none; display: block;
  width: clamp(4.1rem, 9.94vw, 7.34rem); height: clamp(4.1rem, 9.94vw, 7.34rem); }
.boussole-p svg { width: 100%; height: 100%; stroke: var(--aube); fill: none;
  stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .5s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  html.js .tete-boussole:hover .boussole-p svg { stroke: var(--aube-clair); }
  /* L'aiguille cherche le nord, le cadran reste fixe. */
  html.js .tete-boussole:hover .boussole-p svg > :last-child {
    animation: aiguille 1.6s var(--ease) both;
    transform-box: fill-box; transform-origin: center; }
}
@keyframes aiguille {
  0%   { transform: rotate(-155deg); }
  55%  { transform: rotate(18deg); }
  78%  { transform: rotate(-7deg); }
  100% { transform: rotate(0deg); }
}
/* Sur mobile, la boussole passe AU-DESSUS du titre plutôt que d'être masquée,
   à taille fixe et alignée à gauche comme le reste de l'en-tête. */
@media (max-width: 700px) {
  .tete-boussole { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .boussole-p { width: 3.2rem; height: 3.2rem; }
}

/* Accents dans les titres : « toi » et « ici » */
.toi { color: var(--aube); }
.ici { color: var(--givre); }

/* Bascule de langue (nav) */
.langue { flex: none; padding: .62rem .72rem; border: 1px solid var(--trait);
  border-radius: 10px; font-size: .62rem; font-weight: 600; letter-spacing: .18em;
  color: var(--givre-soft); transition: color .3s, border-color .3s; }
.langue:hover { color: var(--aube-clair); border-color: var(--trait-fort); }

/* Bascule jour / nuit : on montre l'astre vers lequel on bascule */
.astre { flex: none; display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid var(--trait); border-radius: 12px; cursor: pointer;
  background: var(--verre); transition: border-color .3s; }
.astre:hover { border-color: var(--trait-fort); }
.astre-i { display: block; width: 19px; height: 19px; grid-area: 1 / 1;
  transition: opacity .45s var(--ease), transform .55s var(--ease); }
.astre-i svg { width: 100%; height: 100%; stroke: var(--acier); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.astre:hover .astre-i svg { stroke: var(--aube); }
/* En nuit on propose le soleil, en jour on propose la lune. */
.astre-n { opacity: 0; transform: rotate(-40deg) scale(.6); }
:root[data-theme="jour"] .astre-j { opacity: 0; transform: rotate(40deg) scale(.6); }
:root[data-theme="jour"] .astre-n { opacity: 1; transform: none; }

/* Ambiance sonore : bouton à ondes */
.son { flex: none; display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid var(--trait); border-radius: 12px; cursor: pointer;
  background: var(--verre); transition: border-color .3s; }
.son:hover { border-color: var(--trait-fort); }
.son svg { width: 18px; height: 16px; overflow: visible; }
.son line { stroke: var(--acier); stroke-width: 2; stroke-linecap: round;
  transform-box: fill-box; transform-origin: center;
  transform: scaleY(.45); transition: stroke .3s, transform .4s var(--ease); }
.son.joue line { stroke: var(--aube); animation: onde 1.15s ease-in-out infinite; }
.son.joue line:nth-child(2) { animation-delay: .18s; }
.son.joue line:nth-child(3) { animation-delay: .36s; }
.son.joue line:nth-child(4) { animation-delay: .54s; }
@keyframes onde { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1.5); } }

/* ============================================================
   PICTOS TRACÉS
   Un seul langage de trait : or, fill none, 1.5.
   Les SVG viennent d'une bibliothèque unique dans main.js,
   posée sur les hôtes [data-picto] / [data-element].
   Trois tailles d'hôte : .element (orientations), .picto
   (ruban et rando), .sigle-m (le sigle de marque).
   ============================================================ */
.element { display: block; width: 36px; height: 36px; margin-bottom: 1.1rem; }
.picto   { display: block; width: 30px; height: 30px; }
/* Le sigle est calé sur la hauteur des deux lignes du nom de marque. */
.sigle-m { display: block; width: 3.8rem; height: 3.8rem; flex: none; object-fit: contain; }
/* Le picto du ruban épouse la hauteur des deux lignes, comme le sigle. */
.ruban-i .picto { width: 2.7rem; height: 2.7rem; flex: none; }

.element svg, .picto svg, .sigle-m svg {
  width: 100%; height: 100%;
  stroke: var(--aube); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
  transition: stroke .5s var(--ease); }
/* Le cerf du sigle est blanc : c'est le nom de la maison. */
.sigle-m svg { stroke: var(--givre); stroke-width: 1.35; }

/* Tracé progressif au survol.
   main.js pose pathLength="1", stroke-dasharray:1 et --r (le rang)
   sur chaque tracé. Au repos l'offset vaut 0 : le picto est entier.
   Au survol il repart de 1 et se redessine, trait après trait. */
@media (hover: hover) and (pointer: fine) {
  html.js :is(.ruban-i, .inclus, .carte-o, .sigle):hover
    :is(.element, .picto, .sigle-m) svg > * {
    animation: tracer .9s var(--ease) both;
    animation-delay: calc(var(--r, 0) * .085s); }
  html.js :is(.ruban-i, .inclus, .carte-o):hover
    :is(.element, .picto) svg { stroke: var(--aube-clair); }
}
@keyframes tracer {
  from { stroke-dashoffset: 1; opacity: .25; }
  55%  { opacity: 1; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}
html.reduced .element svg > *, html.reduced .picto svg > *,
html.reduced .sigle-m svg > *, html.reduced .xp-mat-p svg > *,
html.reduced .voie-p svg > * { animation: none !important; }

/* Bouton de dévoilement (cartes orientations, phare) */
.devoile { display: inline-flex; align-items: center; gap: .85rem;
  padding: .5rem 0; cursor: pointer;
  font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--givre-soft); transition: color .35s; }
.devoile:hover { color: var(--aube-clair); }
.devoile .pmoins { width: 28px; height: 28px; }

/* Zone repliée (hauteur animée en JS).
   `overflow: hidden` cache le contenu mais ne le retire pas du parcours
   clavier : main.js pose donc aussi l'attribut `inert` quand c'est fermé. */
.repli { height: 0; overflow: hidden; }
.repli[inert] { visibility: hidden; }
html.no-js .repli { height: auto; }
.repli-in { padding-top: 1.1rem; }
.repli .desc { margin: 0; }

/* Déroulé en étapes numérotées (dépliant d'une carte d'orientation) */
.etapes { list-style: none; margin: 1.3rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 1.1rem; max-width: 32rem; }
.etapes li { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; }
.etape-n { grid-row: span 2; align-self: start;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--or-trait-plus); background: var(--pastille);
  font-family: 'Marcellus', serif; font-size: .82rem; color: var(--aube-clair); }
.etape-t { align-self: center; font-size: .92rem; font-weight: 600; color: var(--givre); }
.etape-d { grid-column: 2; font-size: .84rem; color: var(--givre-mute); }
.repli-in .desc + .desc { margin-top: .9rem; }
.note-d { margin: 1.1rem 0 0; max-width: 32rem;
  font-size: .8rem; font-style: italic; color: var(--acier); }

/* Carte d'honoraire révélée */
.tarif { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  margin-top: 1.3rem; padding: 1.05rem 1.25rem;
  border: 1px solid var(--or-trait-fin); border-radius: 14px;
  background: var(--pastille); }
.tarif-t { font-size: .56rem; font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; color: var(--aube); }
.tarif-c { font-size: 1.3rem; color: var(--aube-clair); }
.tarif-c small { font-family: 'Epilogue', sans-serif; font-size: .62em; color: var(--givre-mute); }
/* Le(s) lien(s) passent SOUS le prix, alignés à gauche avec lui. */
.tarif .lien { margin: .4rem 0 0; }
.tarif .tarif-liens { margin: .4rem 0 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: .45rem; }
.tarif .tarif-liens .lien { margin: 0; }

/* Barème en accordéon : l'honoraire se découvre */
.ligne-a { border-bottom: 1px solid var(--trait); }
.ligne-a summary { display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem .7rem; border-radius: 12px;
  transition: background .35s var(--ease), padding-left .35s var(--ease); }
/* Survol : la ligne s'éclaire doucement et glisse d'un cran vers la droite. */
.ligne-a summary:hover { background: var(--survol-doux); padding-left: 1.1rem; }
.ligne-a .quoi-p { font-size: .95rem; }
.ligne-a .file { flex: 1; }
.voir { flex: none; font-size: .6rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--acier); transition: color .3s; }
.ligne-a summary:hover .voir { color: var(--aube-clair); }
.ligne-d { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .3rem 1.5rem; padding: 0 .2rem 1.25rem; }
.ligne-d small { font-size: .74rem; color: var(--givre-mute); }
.ligne-d .cout { font-family: 'Marcellus', serif; font-size: 1.15rem;
  color: var(--aube-clair); white-space: nowrap; }
@media (max-width: 560px) { .voir { display: none; } }

/* Le lieu de pratique (bandeau « Où ça se passe », section cadre) */
.lieu { margin-top: 1.4rem; display: grid; gap: 1rem; }
@media (min-width: 880px) { .lieu { grid-template-columns: repeat(3, 1fr); } }
.lieu-b { padding: 1.6rem 1.5rem; border-radius: 16px;
  border: 1px solid var(--trait); background: var(--panneau);
  transition: border-color .4s; }
.lieu-b:hover { border-color: var(--or-trait); }
.lieu-b h3 { margin: 0 0 .5rem; font-family: 'Marcellus', serif; font-weight: 400;
  font-size: 1.08rem; line-height: 1.3; color: var(--aube-clair); letter-spacing: .01em; }
.lieu-b p { margin: 0; font-size: .86rem; color: var(--givre-soft); }

/* Cartes orientations : respiration mobile */
@media (max-width: 640px) {
  .carte-o { min-height: 0; }
  .tarif .lien { margin-left: 0; width: auto; }
}

/* Nav et hero compacts sur mobile.
   Sous 400px la barre débordait : le sigle doit pouvoir rétrécir
   (min-width:0) et son nom se tronquer, sinon il pousse le burger
   hors du viewport. Cibles tactiles ramenées à 44px. */
@media (max-width: 640px) {
  /* La barre descend sous l'encoche/caméra (safe-area) et respire d'un cran.
     Les commandes se resserrent pour laisser « LE CERF BLANC » s'afficher
     en entier plutôt que tronqué. */
  .barre-in { padding-inline: .9rem; gap: .5rem;
    padding-top: calc(env(safe-area-inset-top, 0px) + .35rem); }
  .barre-in .btn-aube { display: none; }
  .barre-actions { gap: .4rem; }
  .sigle { min-width: 0; flex: 0 1 auto; gap: .55rem; }
  .sigle > span { min-width: 0; overflow: hidden; }
  /* Les TROIS lignes se tronquent proprement si jamais l'espace manque. */
  .sigle .n1, .sigle .n2, .sigle .n3 { display: block; overflow: hidden; text-overflow: ellipsis; }
  .sigle .n1 { font-size: .82rem; letter-spacing: .07em; }
  .son, .astre, .burger { width: 38px; height: 38px; border-radius: 10px; flex: none; }
  .burger svg { width: 15px; }
  .langue { flex: none; padding: .5rem .46rem; font-size: .68rem; }
  .sigle-m { width: 2.9rem; height: 2.9rem; }
  .ciel-in .sur::before, .ciel-in .sur::after { display: none; }
  .ciel-in .sur { border-radius: 18px; line-height: 2; letter-spacing: .26em; }
  .repere::after { height: 26px; }
}
/* Mise en page mobile du hero et du ruban.
   Sur mobile chaque proposition tient sa ligne et la ponctuation de fin
   disparaît : un point en fin de ligne isolée est du bruit. Sur desktop
   les phrases restent en ligne, avec leur point. */
.br-mob { display: none; }
@media (max-width: 640px) {
  .br-mob { display: inline; }
  .ciel-sub .phr { display: block; }
  .ciel-sub .pt { display: none; }
}

/* Hero mobile (prise verticale 9:16). Le titre se pose sur les montagnes, vers
   les animaux, avec le sous-titre collé juste dessous (petit écart). Les deux
   boutons, eux, restent tout en bas (poussés par margin-top:auto), côte à côte
   et compacts, au-dessus du repère « Descendre » (position absolue). */
@media (max-width: 780px) {
  .ciel { align-items: stretch; padding-top: 36svh; padding-bottom: 8rem; }
  .ciel-in { display: flex; flex-direction: column; }
  .ciel-sub { margin-top: 1.4rem; }
  .ciel-cta { margin-top: auto; flex-wrap: nowrap; gap: .55rem; align-items: stretch; }
  .ciel-cta .btn-aube, .ciel-cta .btn-givre {
    flex: 1 1 0; min-width: 0; gap: 0;
    padding: .8rem .5rem; font-size: .62rem; letter-spacing: .05em;
    justify-content: center; text-align: center; }
  .btn-min { display: none; }
}

/* Une seule rangée dès que la fenêtre l'autorise vraiment. Le bandeau
   déborde alors la mesure du texte (1260px), ce qu'il peut se permettre :
   c'est une bande pleine largeur, pas une colonne de lecture. Le corps et
   le picto se resserrent ensemble, l'un suit l'autre pour que le picto
   continue d'épouser exactement la hauteur des deux lignes. */
@media (min-width: 1400px) {
  .ruban-in { max-width: 1600px; padding-inline: clamp(1.25rem, 3vw, 2.4rem);
    grid-template-columns: repeat(4, 1fr); }
  .ruban-i { padding: 1rem .9rem; gap: .55rem; }
  .ruban-i b { font-size: .7rem; }
  .ruban-i span { font-size: .63rem; }
  .ruban-i .picto { width: 2.38rem; height: 2.38rem; }
  .ruban-i:nth-child(n+2) { border-left: 1px solid var(--trait); }
  .ruban-i:nth-child(n+3) { border-top: 0; }
}

/* Petits écrans : on resserre la marque plutôt que de la tronquer.
   La bascule était à 420px, mais la place manque bien avant : à 430px
   le nom réclamait 154px pour une colonne de 126, il partait donc en
   points de suspension entre 421 et 458px. Deux paliers mesurés :
   place pour le nom entier dès 421px au premier, dès 369px au second
   (« LE CERF BLANC » y pèse 83.5px, pour 105 disponibles à 390 et 90
   à 375). En dessous de 369px la troncature reprend, mais proprement,
   sur les trois lignes. */
@media (max-width: 480px) {
  .sigle { gap: .5rem; }
  .sigle-m { width: 2.8rem; height: 2.8rem; }
  .sigle .n1 { font-size: .8rem; letter-spacing: .05em; }
  .sigle .n2 { font-size: .44rem; letter-spacing: .18em; }
}
@media (max-width: 400px) {
  .sigle-m { width: 2.4rem; height: 2.4rem; }
  .sigle .n1 { font-size: .74rem; letter-spacing: .03em; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  #rideau { display: none; }
  .flocon { display: none; }
  .scene-media { animation: none; }
  .lev, .trace { opacity: 1; transform: none; filter: none; letter-spacing: inherit; }
  .wipe { clip-path: none; }
  [data-flot] { transform: none !important; }
}

/* Le disque suisse est plus grand que ses voisins : un aplat a besoin de
   plus de place qu'un tracé pour peser autant. Posé en fin de feuille,
   après le bloc grand écran qui redimensionne les pictos du bandeau. */
.ruban-i [data-picto="ruban-suisse"] { width: 3.1rem; height: 3.1rem; }
@media (min-width: 1400px) {
  .ruban-i [data-picto="ruban-suisse"] { width: 2.9rem; height: 2.9rem; }
}

/* ============================================================
   Pictos « Où ça se passe » (section cadre) : un repère posé
   juste après le titre de chaque carte. Forêt et accueil se
   redessinent au survol ; la météo vit en permanence, ses
   gouttes tombent en boucle lente.
   ============================================================ */
/* Posé en ligne, juste avant le titre de la carte (et non sur sa propre
   ligne). Taille en em pour suivre le titre, calé sur sa hauteur d'x. */
.lieu-p { display: inline-block; width: 1.55em; height: 1.55em;
  margin-right: .5rem; vertical-align: -.34em; }
.lieu-p svg { width: 100%; height: 100%; stroke: var(--aube); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  overflow: visible; transition: stroke .5s var(--ease); }
.lieu-b:hover .lieu-p svg { stroke: var(--aube-clair); }

@media (hover: hover) and (pointer: fine) {
  html.js .lieu-b:hover
    :is([data-picto="lieu-foret"], [data-picto="lieu-accueil"]) svg > * {
    animation: tracer .9s var(--ease) both;
    animation-delay: calc(var(--r, 0) * .085s); }
}

/* La météo : les gouttes (seuls <line> du tracé) tombent en boucle lente,
   décalées, pour une pluie douce en mouvement continu. */
[data-picto="lieu-meteo"] svg line {
  transform-box: fill-box;
  animation: goutte-tombe 2.6s var(--ease) infinite; }
[data-picto="lieu-meteo"] svg line:nth-of-type(2) { animation-delay: .55s; }
[data-picto="lieu-meteo"] svg line:nth-of-type(3) { animation-delay: 1.1s; }
@keyframes goutte-tombe {
  0%   { opacity: 0; transform: translateY(-2px); }
  25%  { opacity: 1; }
  70%  { opacity: 1; transform: translateY(2.6px); }
  100% { opacity: 0; transform: translateY(4.4px); }
}
html.reduced .lieu-p svg > *,
html.reduced [data-picto="lieu-meteo"] svg line { animation: none !important; }

/* L'enjeu (page entreprises) : chaque segment du titre tient sur une seule
   ligne, le <br/> restant la seule césure voulue. Titre plus compact,
   le client a demandé de jouer sur la taille pour éviter le retour ligne. */
#enjeu .tete h2 { font-size: clamp(1.5rem, 3.15vw, 2.5rem); }

/* La boussole a besoin de toute la largeur pour tenir chaque segment de son
   titre sur une seule ligne : on lève le plafond de lecture de .tete (820px),
   le picto restant calé sur la hauteur des deux lignes. */
#orientations .cadre.tete { max-width: none; }

/* ============================================================
   QUESTIONNAIRES NATIFS (diagnostic.html, pre-diagnostic.html)
   Rendus par quiz.js, dans le style Givre & Aube.
   ============================================================ */
.quiz-page { padding: clamp(6.5rem, 12vh, 9rem) 0 clamp(3rem, 8vh, 5rem); }
.quiz-cadre { max-width: 760px; }
.quiz-tete { margin-bottom: clamp(2.4rem, 6vw, 3.6rem); }
.quiz-tete .t-sec { margin: .5rem 0 0; }
.quiz-tete .quiz-sous { margin: .35rem 0 0; font-family: 'Marcellus', serif;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem); color: var(--aube-clair); font-style: italic; }
.quiz-tete .chapo { margin-top: 1.3rem; }
.quiz-atouts { list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem .8rem; }
.quiz-atouts li { display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border: 1px solid var(--or-trait); border-radius: 999px;
  background: var(--lavis-or); font-size: .74rem; color: var(--aube-clair); }
.quiz-atouts li::before { content: ''; width: 14px; height: 14px; flex: none;
  background: var(--aube); -webkit-mask: var(--coche) center / contain no-repeat;
  mask: var(--coche) center / contain no-repeat; }
:root { --coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); }

/* Bloc d'explication des dimensions (IPHD) */
.quiz-dims { margin: 1.8rem 0 0; display: grid; gap: .8rem; }
@media (min-width: 640px) { .quiz-dims { grid-template-columns: 1fr 1fr; } }
.quiz-dim { padding: 1.1rem 1.2rem; border: 1px solid var(--trait);
  border-radius: 14px; background: var(--nuit-2); }
.quiz-dim b { display: block; font-family: 'Marcellus', serif; font-weight: 400;
  font-size: 1rem; color: var(--aube-clair); margin-bottom: .3rem; }
.quiz-dim span { font-size: .82rem; color: var(--givre-soft); }
.quiz-avant { margin-top: 1.6rem; padding: 1.1rem 1.3rem; border-left: 2px solid var(--or-trait);
  background: var(--nuit-2); border-radius: 0 12px 12px 0; font-size: .88rem; color: var(--givre-soft); }

/* Groupes et questions */
.groupe { margin-top: clamp(2.2rem, 5vw, 3.2rem); }
.groupe-t { font-family: 'Marcellus', serif; font-weight: 400;
  font-size: clamp(1.2rem, 3vw, 1.6rem); color: var(--givre);
  padding-bottom: .7rem; border-bottom: 1px solid var(--trait); margin: 0 0 1.4rem; }
.groupe-d { margin: -.6rem 0 1.4rem; color: var(--givre-mute); font-size: .9rem; }
.quiz-relais { margin-top: clamp(2.2rem, 5vw, 3.2rem); padding: 1.4rem 1.5rem;
  border: 1px solid var(--or-trait); border-radius: 16px;
  background: radial-gradient(ellipse at 85% 20%, var(--lavis-or), transparent 60%), var(--nuit-2); }
.quiz-relais p { margin: .5rem 0 0; color: var(--givre-soft); }

.q { border: 0; margin: 0 0 1.5rem; padding: 0; }
.q-titre { display: block; font-size: .98rem; font-weight: 500; color: var(--givre);
  line-height: 1.45; margin-bottom: .8rem; }
/* Indice discret sous une question à choix multiple */
.q-hint { display: block; margin-top: .2rem; font-size: .74rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--givre-mute); }

/* Choix (radio) : rangée de cases sélectionnables.
   Trois régimes de largeur selon la longueur des libellés :
   - .choix--likert : les 5 réponses courtes (Jamais..Toujours), 5 colonnes ;
   - .choix--liste  : des libellés-phrases, une seule colonne pleine largeur ;
   - défaut : réponses de profil, colonnes larges pour tenir sur une ligne. */
.choix { display: grid; gap: .5rem; }
@media (min-width: 620px) {
  .choix { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .choix--likert { grid-template-columns: repeat(5, 1fr); }
  .choix--liste { grid-template-columns: 1fr; }
}
.opt { position: relative; display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem; border: 1px solid var(--trait); border-radius: 12px;
  background: var(--panneau); cursor: pointer;
  transition: border-color .25s, background .25s, transform .25s var(--ease); }
.opt:hover { border-color: var(--or-trait); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt-p { flex: none; width: 17px; height: 17px; border-radius: 50%;
  border: 1.5px solid var(--acier); transition: border-color .25s, box-shadow .25s; }
.opt-p--case { border-radius: 5px; }
.opt-t { font-size: .86rem; line-height: 1.35; color: var(--givre-soft); }
.opt:has(input:checked) { border-color: var(--aube); background: var(--survol-panneau); }
.opt:has(input:checked) .opt-p { border-color: var(--aube);
  box-shadow: inset 0 0 0 4px var(--aube); }
.opt:has(input:checked) .opt-t { color: var(--givre); }
.opt:has(input:focus-visible) { outline: 2px solid var(--aube-clair); outline-offset: 2px; }

/* Échelle 1..10 */
.q-echelle .echelle { display: flex; flex-wrap: wrap; gap: .4rem; }
.echelle-p { position: relative; flex: 1 1 auto; min-width: 40px; }
.echelle-p input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.echelle-n { display: grid; place-items: center; height: 44px; border-radius: 10px;
  border: 1px solid var(--trait); background: var(--panneau);
  font-family: 'Marcellus', serif; font-size: 1rem; color: var(--givre-soft);
  cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.echelle-p:hover .echelle-n { border-color: var(--or-trait); }
.echelle-p:has(input:checked) .echelle-n { border-color: var(--aube);
  background: var(--survol-panneau); color: var(--aube-clair); }
.echelle-p:has(input:focus-visible) .echelle-n { outline: 2px solid var(--aube-clair); outline-offset: 2px; }
.echelle-leg { display: flex; justify-content: space-between; margin-top: .5rem;
  font-size: .72rem; color: var(--givre-mute); }

/* Champs texte / email / tel */
.champ-in { width: 100%; padding: .85rem 1rem; border: 1px solid var(--trait);
  border-radius: 12px; background: var(--panneau); color: var(--givre);
  font-family: 'Epilogue', sans-serif; font-size: .95rem; transition: border-color .25s; }
.champ-in::placeholder { color: var(--givre-mute); }
.champ-in:focus { outline: none; border-color: var(--aube); }
.champ-autre { margin-top: .6rem; }

/* Consentement */
.q-consent { margin-top: .4rem; }
.consent { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
  font-size: .82rem; color: var(--givre-soft); line-height: 1.5; }
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent .opt-p { margin-top: .1rem; }
.consent:has(input:checked) .opt-p { border-color: var(--aube); box-shadow: inset 0 0 0 4px var(--aube); }

/* Erreur + envoi */
.quiz-erreur { margin: 1.6rem 0 0; padding: .8rem 1rem; border-radius: 10px;
  border: 1px solid var(--or-trait-fort); background: var(--lavis-or);
  color: var(--aube-clair); font-size: .85rem; }
.quiz-envoi { margin-top: 2.2rem; }
.quiz-envoi .btn-aube { width: 100%; justify-content: center; }
@media (min-width: 620px) { .quiz-envoi .btn-aube { width: auto; } }

/* Résultat / merci */
.resultat { outline: none; }
.resultat > .sur { justify-content: flex-start; }
.resultat .t-sec { margin: .4rem 0 0; }
.jauges { margin-top: 2rem; display: grid; gap: 1rem; }
@media (min-width: 620px) { .jauges { grid-template-columns: repeat(3, 1fr); } }
.jauge { padding: 1rem 1.1rem; border: 1px solid var(--trait); border-radius: 14px; background: var(--nuit-2); }
.jauge--global { margin-top: 1rem; }
.jauge-h { display: flex; justify-content: space-between; align-items: baseline;
  font-size: .78rem; color: var(--givre-soft); }
.jauge-v { font-family: 'Marcellus', serif; font-size: 1.25rem; color: var(--aube-clair); }
.jauge-v small { font-family: 'Epilogue', sans-serif; font-size: .62em; color: var(--givre-mute); }
.jauge-b { margin-top: .6rem; height: 6px; border-radius: 999px; background: var(--pastille); overflow: hidden; }
.jauge-b i { display: block; height: 100%; width: var(--p); border-radius: 999px;
  background: var(--c, linear-gradient(90deg, var(--aube-deep), var(--aube))); }
.jauge-b--or i { background: linear-gradient(90deg, var(--aube), var(--aube-clair)); }
/* Pastille de couleur du palier (rouge, orange, or, vert selon le score global). */
.pal-dot { display: inline-block; width: .68em; height: .68em; border-radius: 50%;
  background: var(--c); margin-right: .55rem; vertical-align: middle;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); }
.resultat-domaines-t { margin-top: 1.9rem; }
.resultat-intro { margin-top: 1.8rem; font-style: italic; color: var(--givre-soft); }
.resultat-corps { margin-top: 1.4rem; }
.resultat-corps p { margin: 0 0 .9rem; color: var(--givre-soft); }
.resultat-liste { margin: .3rem 0 1rem; padding-left: 1.1rem; color: var(--givre-soft); }
.resultat-liste li { margin: .3rem 0; }
.resultat-chute { font-weight: 500; color: var(--givre); }
.resultat-cloture { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--trait);
  font-style: italic; color: var(--givre-soft); }
.merci-recevoir { margin-top: 1.6rem; }
.quiz-cta { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.quiz-cta .btn-givre { border-color: var(--trait-fort); }

/* Retour discret vers l'accueil, en tête de page questionnaire */
.quiz-retour { display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acier);
  transition: color .25s; }
.quiz-retour:hover { color: var(--aube-clair); }

/* Attribution des sources en bas de la page entreprises : un filet fin, un
   texte discret et centré. Les astérisques des statistiques y renvoient. */
.sources-note { max-width: 62rem; margin: clamp(1.6rem, 4vw, 3rem) auto 0;
  padding-top: 1.4rem; border-top: 1px solid var(--trait);
  font-size: .68rem; line-height: 1.65; color: var(--givre-mute); text-align: center; }

/* ============================================================
   PAGE VIVRE L'EXPÉRIENCE, ateliers, événements & stages
   Photos immersives, formats en nature, matériel à prévoir.
   ============================================================ */
.xp-hero { position: relative; min-height: 74svh; display: flex; align-items: flex-end;
  overflow: hidden; border-bottom: 1px solid var(--trait); color-scheme: dark; }
.xp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; z-index: 0; }
.xp-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(6,10,16,.5) 0%, rgba(6,10,16,.16) 24%, rgba(6,10,16,.1) 44%,
    rgba(6,10,16,.32) 64%, rgba(6,10,16,.6) 82%, rgba(6,10,16,.9) 100%); }
.xp-hero .cadre { position: relative; z-index: 2; width: 100%;
  padding-top: 9rem; padding-bottom: clamp(2.6rem, 6vw, 4.6rem); }
.xp-hero .sur { color: #ecc794; }
.xp-hero h1 { color: #f4f7fb; }
/* « l'expérience » garde la teinte or claire aussi en thème jour : le doré
   foncé du jour se lisait mal sur la photo sombre. */
.xp-hero .or { color: #ecc794; -webkit-text-fill-color: #ecc794; }
/* Le CTA secondaire du hero (« Voir les trois formats », « Découvrir les
   formats ») reste clair dans les deux thèmes : en jour, le bas gris de la
   photo rendait le texte sombre de .btn-givre illisible. */
.xp-hero .btn-givre { color: #f4f7fb; border-color: rgba(244, 247, 251, .5); }
.xp-hero .btn-givre:hover { background: rgba(244, 247, 251, .12); border-color: rgba(244, 247, 251, .82); }
.xp-hero .chapo { color: #d9e2ee; max-width: 40rem; }

/* Trois formats : rangées image + texte alternées */
.xp-formats { display: grid; gap: clamp(2.2rem, 5vw, 4rem); margin-top: clamp(2rem, 5vw, 3.4rem); }
.xp-format { display: grid; gap: clamp(1.3rem, 3vw, 2.6rem); align-items: center; }
@media (min-width: 780px) {
  .xp-format { grid-template-columns: 1fr 1fr; }
  .xp-format:nth-child(even) .xp-media { order: 2; }
}
.xp-media { margin: 0; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--trait); box-shadow: 0 22px 50px var(--ombre); aspect-ratio: 4 / 3; }
.xp-media img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.3s var(--ease); }
.xp-format:hover .xp-media img { transform: scale(1.045); }
.xp-format .xp-kicker { font-size: .66rem; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--aube); }
.xp-format h3 { margin: .5rem 0 0; font-family: 'Marcellus', serif; font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.15rem); line-height: 1.15; }
.xp-format p { margin: .7rem 0 0; color: var(--givre-soft); font-size: .92rem; line-height: 1.6; }
.xp-format p + p { margin-top: .6rem; }

/* Centre Âme et Nature : les trois marches (réutilise .etapes du site) */
.xp-centre { margin-top: clamp(2.4rem, 5vw, 3.6rem);
  background: var(--panneau); border: 1px solid var(--trait); border-radius: 20px;
  padding: clamp(1.6rem, 4vw, 2.8rem); }
.xp-centre .etapes { margin-top: 1.4rem; }

/* Matériel à prévoir */
.xp-mat { list-style: none; margin: clamp(1.4rem, 3vw, 2rem) 0 0; padding: 0;
  display: grid; gap: .7rem; }
@media (min-width: 640px) { .xp-mat { grid-template-columns: repeat(2, 1fr); } }
.xp-mat li { display: flex; gap: .85rem; align-items: center;
  font-size: .88rem; line-height: 1.45; color: var(--givre-soft);
  background: var(--panneau); border: 1px solid var(--trait); border-radius: 12px;
  padding: .9rem 1.1rem;
  transition: border-color .35s, transform .4s var(--ease), background .35s; }
.xp-mat li:hover { border-color: var(--or-trait-plus); transform: translateY(-3px);
  background: var(--panneau-or); }
/* Un petit symbole animé remplace la puce, un par carte. */
.xp-mat-p { flex: none; width: 1.65rem; height: 1.65rem; }
.xp-mat-p svg { display: block; width: 100%; height: 100%; fill: none;
  stroke: var(--givre-soft); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  html.js .xp-mat li:hover .xp-mat-p svg > * { animation: tracer .9s var(--ease) both;
    animation-delay: calc(var(--r, 0) * .09s); }
  html.js .xp-mat li:hover .xp-mat-p svg { stroke: var(--aube-clair); }
}
/* La note « prochaines dates » : pleine largeur, alignée à gauche avec les cartes. */
.xp-note { margin-top: 1.6rem; max-width: none; text-align: left; }

/* Marque déposée IPHD : petit, surélevé, discret. */
.tm { font-size: .64em; vertical-align: super; line-height: 0;
  letter-spacing: normal; margin-left: -.04em; font-weight: 400; opacity: .85; }
/* Le ™ doit être collé à IPHD : on annule l'interlettrage du contexte
   (sur-titres .34em, boutons .1em) qui l'écartait du « D ». */
.sur .tm { margin-left: -.32em; }
.btn-aube .tm { margin-left: -.09em; }

/* Lien CTA du pied (appel de clarté, pré-diagnostic…) : sans flèche,
   le texte grandit un peu au survol, comme les .lien. */
.pied-cta { display: inline-block; transform-origin: left center;
  transition: transform .3s var(--ease), color .3s; }
.pied-cta:hover { transform: scale(1.05); }

/* Liste « Contact » : une petite icône à gauche de chaque ligne
   (tel, WhatsApp, e-mail, Instagram, LinkedIn, Facebook, Google). Le titre
   « Contact » et les icônes partagent le même bord gauche. */
.pied-contact { display: grid; gap: .58rem; }
.pied-contact li { margin: 0; }
.pied-contact a { display: inline-flex; align-items: center; gap: .6rem;
  color: var(--givre-soft); transition: color .3s; }
.pied-contact a:hover { color: var(--aube-clair); }
.pied-contact svg { width: 17px; height: 17px; flex: none; fill: currentColor; opacity: .78; }
.pied-contact a:hover svg { opacity: 1; }

/* ============================================================
   PAGES LÉGALES (mentions légales, confidentialité)
   ============================================================ */
.legal-page { padding-top: clamp(6rem, 12vw, 8.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.legal { max-width: 760px; margin-top: clamp(1.6rem, 4vw, 2.4rem); }
.legal h2 { font-family: 'Marcellus', serif; font-weight: 400;
  font-size: clamp(1.2rem, 2.8vw, 1.55rem); color: var(--givre); margin: 2.4rem 0 .5rem; }
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 1rem; color: var(--givre-soft); font-size: .95rem; line-height: 1.7; }
.legal ul { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.legal li { margin: .35rem 0; color: var(--givre-soft); font-size: .95rem; line-height: 1.65; }
.legal strong { color: var(--givre); font-weight: 600; }
.legal .lien-in { color: var(--aube-clair); }
.legal .lien-in:hover { text-decoration: underline; }
.legal .todo { color: var(--aube); font-style: italic; }
.legal .maj { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--trait);
  font-size: .82rem; color: var(--givre-mute); font-style: italic; }

/* ============================================================
   CARTE SUD : second dévoilement « Découvrir les séances »
   Une bande pleine largeur sous l'identité de la carte, portant
   son propre .devoile (data-large) et un renvoi vers La Voie du
   Cerf. Indépendante du dévoilement « ateliers » (colonne 2).
   ============================================================ */
.sud-seances { margin-top: .35rem; }
/* Le lien « Vivre l'expérience » sort du cartouche d'honoraire : espace au-dessus. */
.ateliers-lien { margin: clamp(1.1rem, 2.6vw, 1.6rem) 0 0; }
/* Espace entre le dévoilement « séances » et le bouton « stage » qui le suit. */
.sud-seances .repli + .devoile { margin-top: clamp(.7rem, 1.8vw, 1.1rem); }
.sud-seances .repli-in { padding: 1.1rem 0 0; }
.sud-seances .repli-in .desc { max-width: 34rem; }
.sud-seances-hook { margin: 1rem 0 0; }
/* Le depliant « stages » contient deux stages : on separe nettement les
   deux blocs, sinon le lien du premier colle a la description du second. */
.sud-seances-hook + .desc { margin-top: clamp(1.5rem, 3.4vw, 2.2rem); }
@media (min-width: 1000px) {
  /* La bande « séances » occupe la colonne d'identité (col. 1) et suit son
     décalage : au repos elle est translatée vers le centre comme .carte-id,
     donc « Découvrir les séances » tombe pile sous « Découvrir les ateliers ».
     Quand l'atelier s'ouvre, l'identité et la bande reviennent à gauche
     ensemble (l'atelier occupe la colonne 2). */
  .carte-in > .sud-seances { grid-column: 1; grid-row: 2; }
  html.js .carte-in > .sud-seances { translate: calc(100% + clamp(1.25rem, 4.5vw, 3.6rem)
      + var(--ecart-o) / 2 - 310px) 0;
    transition: translate .55s var(--ease); }
  html.js .carte-in:has(.devoile:not([data-large])[aria-expanded="true"]) > .sud-seances { translate: 0 0; }
}

/* ============================================================
   PAGE LES SEANCES (La Voie du Cerf), classes .voie-*
   ============================================================ */
/* Le manifeste : phrase-pivot de l'offre */
.voie-lede { margin: clamp(1.6rem, 4vw, 2.6rem) 0 0; max-width: 46rem;
  font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  line-height: 1.4; color: var(--givre); }

/* Les trois lectures (chêne, rouge-gorge, plante) */
.voie-trio { display: grid; gap: clamp(1rem, 2.4vw, 1.4rem);
  margin: clamp(1.8rem, 4vw, 2.8rem) 0 0; }
@media (min-width: 720px) { .voie-trio { grid-template-columns: repeat(3, 1fr); } }
.voie-note { border: 1px solid var(--trait); border-radius: 16px;
  background: var(--panneau); padding: clamp(1.2rem, 2.6vw, 1.6rem);
  transition: border-color .4s, transform .5s var(--ease), box-shadow .5s; }
.voie-note-k { margin: 0 0 .5rem; font-family: 'Marcellus', serif;
  font-size: 1.12rem; color: var(--aube-clair); }
.voie-note p:not(.voie-note-k) { margin: 0; color: var(--givre-soft);
  font-size: .9rem; line-height: 1.6; }
@media (hover: hover) and (pointer: fine) {
  .voie-note:hover { transform: translateY(-4px); border-color: var(--or-trait-plus);
    box-shadow: 0 22px 50px var(--ombre); }
}

.voie-p-txt { margin: clamp(1.8rem, 4vw, 2.8rem) 0 0; max-width: 46rem;
  color: var(--givre-soft); line-height: 1.7; }

/* Citation encadrée (croyances, enfants, lieu et météo) */
.voie-cite { margin: clamp(1.6rem, 3.5vw, 2.4rem) 0 0; max-width: 46rem;
  padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1.2rem, 2.8vw, 1.7rem);
  border-left: 2px solid var(--or-trait-plus);
  background: var(--pastille); border-radius: 0 14px 14px 0;
  font-style: italic; font-weight: 300; color: var(--givre-soft);
  font-size: clamp(.95rem, 2vw, 1.05rem); line-height: 1.65; }

/* Les trois formats : cartes avec picto, contenu et honoraires masqués */
.voie-formats { display: grid; gap: clamp(1.4rem, 3vw, 2rem);
  margin: clamp(2rem, 5vw, 3.2rem) 0 0; }
@media (min-width: 900px) { .voie-formats { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.voie-card { border: 1px solid var(--trait); border-radius: 20px;
  background: var(--panneau); padding: clamp(1.5rem, 3vw, 2rem);
  display: flex; flex-direction: column;
  transition: border-color .4s, transform .5s var(--ease), box-shadow .5s; }
@media (hover: hover) and (pointer: fine) {
  .voie-card:hover { transform: translateY(-4px); border-color: var(--or-trait-plus);
    box-shadow: 0 22px 50px var(--ombre); }
}
/* En-tête cliquable de la carte format : picto + durée/titre/accroche + « + ».
   La carte s'ouvre au clic pour révéler le détail et les honoraires. */
.voie-fmt-btn { display: flex; align-items: center; gap: .95rem; width: 100%;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  text-align: left; color: inherit; font: inherit; }
.voie-fmt-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.voie-fmt-btn .pmoins { flex: none; }
.voie-p { flex: none; width: 2.6rem; height: 2.6rem; }
.voie-p svg { display: block; width: 100%; height: 100%; fill: none;
  stroke: var(--aube); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  html.js .voie-card:hover .voie-p svg > * { animation: tracer .9s var(--ease) both;
    animation-delay: calc(var(--r, 0) * .085s); }
  html.js .voie-card:hover .voie-p svg { stroke: var(--aube-clair); }
}
.voie-duree { margin: 0; font-size: .62rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--acier); }
.voie-fmt-titre { margin: .28rem 0 0; font-family: 'Marcellus', serif; font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 1.6rem); line-height: 1.12; color: var(--givre); }
.voie-tag { margin: .4rem 0 0; font-style: italic; font-weight: 300;
  color: var(--aube-clair); font-size: .92rem; line-height: 1.5; }
.voie-plus { margin: 0 0 .6rem; font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; color: var(--givre-mute); text-transform: uppercase; }
/* Petit intitulé « Honoraires » au-dessus de la grille de prix révélée */
.voie-prix-t { margin: 1.2rem 0 .2rem; font-size: .62rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--acier); }
.voie-inclus { list-style: none; margin: 0; padding: 0; }
.voie-inclus li { position: relative; padding-left: 1.3rem; margin: .55rem 0;
  color: var(--givre-soft); font-size: .9rem; line-height: 1.55; }
.voie-inclus li::before { content: ''; position: absolute; left: 0; top: .55em;
  width: .42rem; height: .42rem; border-radius: 50%; background: var(--aube);
  transform: translateY(-50%); }
.voie-card .repli-in { padding-top: 1rem; }
.voie-options .repli-in { padding-top: 1rem; }

/* Grille d'honoraires révélée */
.voie-prix { list-style: none; margin: 0; padding: 0; }
.voie-prix li { display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: .2rem 1rem; padding: .5rem 0; border-top: 1px solid var(--trait); }
.voie-prix li:first-child { border-top: none; }
.voie-prix li > span:first-child { color: var(--givre-soft); font-size: .88rem; }
/* Le prix peut se replier sur les écrans très étroits (options à deux montants)
   plutôt que d'être rogné par le overflow:hidden du panneau. */
.voie-prix li > span:last-child { color: var(--aube-clair); font-size: 1.02rem;
  text-align: right; margin-left: auto; }
.voie-prix small { color: var(--givre-mute); font-size: .74rem; font-style: italic; }

/* Options complémentaires */
.voie-options { margin: clamp(1.6rem, 3.5vw, 2.4rem) 0 0;
  border: 1px solid var(--trait); border-radius: 20px; background: var(--nuit-2);
  padding: clamp(1.5rem, 3vw, 2rem); }
.voie-options h3 { margin: 0 0 .9rem; font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.4rem); color: var(--givre); }

.voie-orig { margin-top: clamp(2rem, 4.5vw, 3rem); max-width: 46rem;
  font-style: italic; }

/* ============================================================
   PAGE STAGE (La naissance du tambour), classes .stage-*
   ============================================================ */
/* Cadrage du hero tambour : on montre le tambour doré, pas seulement le ciel. */
.stage-hero-img { object-position: center 60%; }

.stage-parcours { margin-top: clamp(1.4rem, 3.5vw, 2.2rem); }

/* Le stage jour par jour : 4 jours à gauche, photo immersive à droite.
   Les deux colonnes s'étirent à la même hauteur (align-items: stretch). */
.stage-jours-wrap { display: grid; gap: clamp(1.6rem, 4vw, 2.6rem);
  margin-top: clamp(2rem, 5vw, 3rem); }
@media (min-width: 900px) {
  .stage-jours-wrap { grid-template-columns: 1fr minmax(300px, 400px); }
}
.stage-jours { display: grid; gap: clamp(1.1rem, 2.4vw, 1.6rem); align-content: start; }

/* Photo de section : bords fondus dans le fond, léger zoom au survol. */
.stage-photo { position: relative; margin: 0; overflow: hidden; align-self: stretch;
  min-height: clamp(22rem, 58vh, 40rem); --fondu-bord: 7%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 var(--fondu-bord), #000 calc(100% - var(--fondu-bord)), transparent),
    linear-gradient(to bottom, transparent 0, #000 var(--fondu-bord), #000 calc(100% - var(--fondu-bord)), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image:
    linear-gradient(to right, transparent 0, #000 var(--fondu-bord), #000 calc(100% - var(--fondu-bord)), transparent),
    linear-gradient(to bottom, transparent 0, #000 var(--fondu-bord), #000 calc(100% - var(--fondu-bord)), transparent); }
.stage-photo img { display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: center 55%; transition: transform 1s var(--ease); }
@media (hover: hover) and (pointer: fine) { .stage-photo:hover img { transform: scale(1.07); } }
@media (max-width: 899px) { .stage-photo { min-height: 0; aspect-ratio: 4 / 5; max-width: 30rem; margin: 0 auto; } }
html.reduced .stage-photo img { transition: none; }
html.reduced .stage-photo:hover img { transform: none; }
.stage-jour { border: 1px solid var(--trait); border-radius: 20px; background: var(--panneau);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: border-color .4s, transform .5s var(--ease), box-shadow .5s; }
@media (hover: hover) and (pointer: fine) {
  .stage-jour:hover { transform: translateY(-4px); border-color: var(--or-trait-plus);
    box-shadow: 0 22px 50px var(--ombre); }
}
.stage-jour-tete { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.stage-jour-n { flex: none; font-family: 'Marcellus', serif; font-size: .68rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--aube);
  border: 1px solid var(--or-trait); border-radius: 999px; padding: .32rem .72rem; }
.stage-jour h3 { margin: 0; font-family: 'Marcellus', serif; font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.1; color: var(--givre); }
.stage-jour-sub { margin: .2rem 0 0; font-style: italic; font-weight: 300;
  color: var(--aube-clair); font-size: .9rem; }
.stage-jour .voie-inclus li b { color: var(--givre); font-weight: 600; }
/* Pastille « rituel » discrète, en fin de puce */
.stage-rit { display: inline-block; font-size: .6rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--aube);
  border: 1px solid var(--or-trait); border-radius: 999px; padding: .06rem .5rem;
  margin-left: .35rem; white-space: nowrap; vertical-align: middle; }

.stage-plus { margin-top: clamp(2.6rem, 5.5vw, 4rem); }
.stage-plus .voie-inclus li b { color: var(--givre); font-weight: 600; }

/* ============================================================
   CARTES « DÉCOUVRIR » (page Vivre l'expérience, vers séances / stage)
   Photo + mini-description ; toute la carte est cliquable.
   ============================================================ */
.decouvrir { display: grid; gap: clamp(1.2rem, 3vw, 2rem);
  margin-top: clamp(2.2rem, 5vw, 3.4rem); }
@media (min-width: 700px) { .decouvrir { grid-template-columns: 1fr 1fr; } }
.decouvrir-c { display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--trait); border-radius: 20px; overflow: hidden;
  background: var(--panneau);
  transition: border-color .4s, transform .5s var(--ease), box-shadow .5s; }
@media (hover: hover) and (pointer: fine) {
  .decouvrir-c:hover { transform: translateY(-4px); border-color: var(--or-trait-plus);
    box-shadow: 0 22px 50px var(--ombre); }
}
.decouvrir-img { display: block; overflow: hidden; aspect-ratio: 16 / 9; }
.decouvrir-img img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease); }
@media (hover: hover) and (pointer: fine) { .decouvrir-c:hover .decouvrir-img img { transform: scale(1.06); } }
.decouvrir-txt { display: block; padding: clamp(1.3rem, 2.8vw, 1.7rem); }
.decouvrir-k { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--aube); }
.decouvrir-h { display: block; margin: .35rem 0 0; font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.6rem); line-height: 1.12; color: var(--givre); }
.decouvrir-d { display: block; margin: .6rem 0 0; color: var(--givre-soft);
  font-size: .9rem; line-height: 1.55; }
.decouvrir-v { display: inline-block; margin: 1rem 0 0; color: var(--aube-clair);
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  transform-origin: left center; transition: transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .decouvrir-c:hover .decouvrir-v { transform: scale(1.07); } }
html.reduced .decouvrir-img img { transition: none; }
html.reduced .decouvrir-c:hover .decouvrir-img img,
html.reduced .decouvrir-c:hover .decouvrir-v { transform: none; }