/* =====================================================================
   Feuille de style commune
   Les couleurs viennent de assets/config.js (variables --c-*).
   Les valeurs ci-dessous ne servent que si la configuration manque.
   ===================================================================== */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-sortie .3s ease both; }
::view-transition-new(root) { animation: vt-entree .6s cubic-bezier(.22,.68,.28,1) both; }
@keyframes vt-sortie { to { opacity: 0; } }
@keyframes vt-entree { from { opacity: 0; translate: 0 18px; } }

:root {
  --c-mousse: #2F3A26;
  --c-olive: #5E6B3A;
  --c-sauge: #C9D1B4;
  --c-sauge-claire: #E4E8D8;
  --c-brume: #F1F0EA;
  --c-ambre: #E3A64F;
  --c-ambre-clair: #F2CF8E;
  --c-ambre-fonce: #8F5516;
  --c-terre: #1F1B15;
  --c-encre: #22281C;

  --f-titre: "Gloock", Georgia, "Times New Roman", serif;
  --f-texte: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "DM Mono", ui-monospace, Consolas, monospace;

  --ease: cubic-bezier(.22,.68,.28,1);
  --rayon: 28px;
  --marge: clamp(16px, 4.5vw, 64px);
  --large: 1320px;
  --banner-h: 0px;

  /* teintes des surfaces claires, basculées par le mode crépuscule */
  --ligne: 47 58 38;
  --g1: #2C3424; --g2: #38412F; --g3: #3E4734; --g4: #45503A; --g5: #4A5340; --g6: #5A6450;
  --carte: rgba(255,255,255,.5); --carte-reflet: rgba(255,255,255,.8);
  --champ-fond: #fff; --survol: rgba(255,255,255,.6); --erreur: #A23B2A;
  --d0: .1s;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.rideau-on { --d0: 1.65s; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  background: var(--c-terre);
}
html.menu-ouvert { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--c-encre);
  background: var(--c-terre);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 959px) { body { padding-bottom: 0; } }

img, svg { display: block; }
a { color: inherit; text-underline-offset: .18em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--c-ambre); outline-offset: 3px; border-radius: 8px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.evitement {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  padding: 12px 18px; border-radius: 999px;
  background: var(--c-mousse); color: var(--c-brume); text-decoration: none; font-weight: 600;
}
.evitement:focus { top: 12px; }

.noscript {
  margin: 0; padding: 24px var(--marge); background: var(--c-brume); color: var(--c-encre);
}

/* ---------- Typographie ---------- */
.titre-section {
  font-family: var(--f-titre);
  font-size: clamp(2.05rem, 1.3rem + 3vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--c-mousse);
  text-wrap: balance;
}
.titre-section em, .ouverture__titre em { font-style: normal; color: var(--accent, var(--c-olive)); }

.pastille {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: var(--c-olive);
  color: var(--c-brume);
  font-size: .84rem; font-weight: 500; line-height: 1.3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 14px -8px rgba(31,27,21,.5);
}
.pastille::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-ambre-clair); box-shadow: 0 0 0 3px rgba(242,207,142,.25);
}

.lien {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 44px;
  font-weight: 600; text-decoration: none; color: inherit;
}
.lien::after {
  content: ""; width: 28px; height: 1.5px; background: currentColor;
  transition: width .5s var(--ease);
}
.lien:hover::after, .lien:focus-visible::after { width: 60px; }

/* ---------- Boutons en relief ---------- */
.btn {
  --fond-btn: linear-gradient(180deg, color-mix(in srgb, var(--c-mousse) 82%, white), var(--c-mousse));
  --texte-btn: var(--c-brume);
  --horizon: rgba(241,240,234,.55);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  padding: 12px 40px 12px 26px;
  border: 0; border-radius: 999px;
  background: var(--fond-btn);
  color: var(--texte-btn);
  font-family: var(--f-texte); font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 1px 1px rgba(31,27,21,.25),
    0 10px 22px -10px rgba(31,27,21,.6);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.22), 0 2px 2px rgba(31,27,21,.2), 0 18px 30px -12px rgba(31,27,21,.6); }
.btn:active { transform: translateY(1px); transition-duration: .08s; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 1px 4px rgba(0,0,0,.3), 0 1px 1px rgba(31,27,21,.2); }

.btn--clair {
  --fond-btn: linear-gradient(180deg, #fff, var(--c-brume));
  --texte-btn: var(--c-mousse);
  --horizon: rgb(var(--ligne) / .45);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgb(var(--ligne) / .14), 0 1px 1px rgba(31,27,21,.2), 0 12px 24px -12px rgba(15,20,10,.7);
}
.btn--contour {
  --fond-btn: transparent;
  --texte-btn: currentColor;
  --horizon: currentColor;
  color: inherit;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.btn--contour:hover { box-shadow: inset 0 0 0 1.5px currentColor, 0 14px 24px -14px rgba(31,27,21,.5); }
.btn--contour:active { box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--petit { min-height: 44px; padding: 10px 40px 10px 18px; font-size: .94rem; }

/* L'aube qui se lève dans le bouton au survol */
.btn__aube {
  position: absolute; right: 18px; top: 50%;
  width: 16px; height: 12px; margin-top: -4px;
  overflow: clip; pointer-events: none;
}
.btn__aube::before {
  content: ""; position: absolute; left: 3px; bottom: -11px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-ambre);
  transition: translate .55s var(--ease);
}
.btn__aube::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--horizon); border-radius: 2px;
  opacity: 0; transition: opacity .4s ease;
}
.btn:hover .btn__aube::after, .btn:focus-visible .btn__aube::after { opacity: 1; }
.btn--petit .btn__aube { right: 14px; }
.btn:hover .btn__aube::before, .btn:focus-visible .btn__aube::before { translate: 0 -11px; }

.particule {
  position: fixed; z-index: 300; pointer-events: none;
  width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
}

/* ---------- Bandeau de démonstration ---------- */
.demo-bandeau {
  position: relative; z-index: 60;
  padding: 9px 56px 9px var(--marge);
  background: var(--c-terre);
  color: #ECE7DA;
  font-family: var(--f-mono); font-size: .78rem; line-height: 1.5;
}
.demo-bandeau p { margin: 0; }
.demo-bandeau a { color: var(--c-ambre-clair); }
.demo-bandeau__sep { opacity: .5; padding: 0 .4em; }
.demo-bandeau__fermer {
  position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: #ECE7DA; cursor: pointer;
  display: grid; place-items: center;
}
.demo-bandeau__fermer:hover { background: rgba(255,255,255,.08); }
.demo-bandeau__fermer svg { width: 14px; height: 14px; }
.bandeau-masque .demo-bandeau { display: none; }

/* ---------- Barre de progression ---------- */
.progression {
  position: fixed; left: 0; top: 0; z-index: 80;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--c-ambre), var(--c-ambre-clair));
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 10px; z-index: 50;
  height: 64px;
  margin: 10px 10px -74px;
  display: flex; justify-content: center;
  pointer-events: none;
  transition: translate .55s var(--ease);
}
.entete.est-cache { translate: 0 -100px; }
.menu-ouvert .entete { translate: none; }
.entete__barre {
  pointer-events: auto;
  width: 100%; max-width: 1500px;
  display: flex; align-items: center; gap: 12px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  background: rgba(241,240,234,.66);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.35), 0 12px 30px -16px rgba(31,27,21,.55);
  color: var(--c-mousse);
}
.marque {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; margin-right: auto;
  text-decoration: none; color: var(--c-mousse);
}
.marque svg { width: 40px; height: 40px; flex: none; }
.marque__nom { font-family: var(--f-titre); font-size: 1.2rem; line-height: 1; white-space: nowrap; }
.marque__metier { display: none; font-size: .78rem; line-height: 1.2; opacity: .85; }
@media (min-width: 560px) {
  .marque__textes { display: flex; flex-direction: column; gap: 3px; }
  .marque__metier { display: block; }
}
.nav { display: none; }
.nav ul { display: flex; gap: 2px; }
.nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0 11px;
  border-radius: 999px; font-size: .93rem; font-weight: 500; text-decoration: none;
  transition: background .3s;
}
.nav a:hover { background: rgb(var(--ligne) / .08); }
.nav a[aria-current="page"] { background: rgb(var(--ligne) / .1); }
.entete .btn--petit { display: none; }
.burger {
  width: 52px; height: 52px; flex: none;
  border: 0; border-radius: 50%;
  background: var(--c-mousse); color: var(--c-brume);
  display: grid; place-content: center; gap: 6px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 14px -8px rgba(31,27,21,.6);
}
.burger span { display: block; width: 20px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .45s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
@media (min-width: 960px) {
  .entete .btn--petit { display: inline-flex; }
}
@media (min-width: 1240px) {
  .nav { display: block; }
  .burger { display: none; }
}

/* ---------- Menu plein écran ---------- */
.menu {
  position: fixed; inset: 0; z-index: 45;
  padding: calc(110px + var(--banner-h)) var(--marge) 40px;
  background: var(--c-mousse) var(--grain);
  color: var(--c-brume);
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  overflow-y: auto;
  clip-path: circle(0 at calc(100% - 46px) 46px);
  transition: clip-path .7s var(--ease);
}
.menu.ouvert { clip-path: circle(150% at calc(100% - 46px) 46px); }
.menu ul { display: grid; gap: 2px; }
.menu a.menu__lien {
  display: flex; align-items: baseline; gap: 14px; min-height: 48px;
  font-family: var(--f-titre); font-size: clamp(1.9rem, 8vw, 3rem); line-height: 1.15;
  text-decoration: none;
}
.menu__num { font-family: var(--f-mono); font-size: .8rem; color: var(--c-ambre-clair); }
.menu a[aria-current="page"] { color: var(--c-ambre-clair); }
.menu__pied { font-size: .95rem; color: rgba(241,240,234,.88); }
.menu__pied a { color: var(--c-brume); }

/* ---------- Bouton flottant mobile ---------- */
.rdv-mobile {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 44;
  display: flex;
  transition: translate .5s var(--ease), opacity .5s;
}
.rdv-mobile .btn { width: 100%; min-height: 56px; font-size: 1.05rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.22), 0 16px 34px -10px rgba(15,18,10,.75); }
.menu-ouvert .rdv-mobile { opacity: 0; pointer-events: none; }
.rdv-doublon .rdv-mobile { translate: 0 160%; opacity: 0; pointer-events: none; }
@media (min-width: 960px) { .rdv-mobile { display: none; } }

/* ---------- Rideau d'ouverture (CSS pur, une fois par visite) ---------- */
.rideau { display: none; }
.rideau-on .rideau {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  background: radial-gradient(60% 50% at 50% 60%, color-mix(in srgb, var(--c-ambre-clair) 40%, var(--c-brume)), var(--c-brume));
  color: var(--c-mousse);
  clip-path: inset(0 0 0 0 round 0);
  animation: rideau-part 1s cubic-bezier(.76,0,.24,1) 1.25s forwards;
}
.rideau svg { width: 132px; height: 132px; }
.rideau__orbite { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 1.1s var(--ease) .1s forwards; }
.rideau__lettres { opacity: 0; animation: apparait .8s var(--ease) .35s forwards; }
.rideau__astre { opacity: 0; animation: apparait .5s ease .9s forwards; }
.rideau__mot {
  margin: 0; font-family: var(--f-titre); font-size: 1.5rem;
  opacity: 0; translate: 0 10px; animation: apparait .8s var(--ease) .55s forwards;
}
@keyframes rideau-part { to { clip-path: inset(0 0 100% 0 round 0 0 50% 50%); visibility: hidden; } }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes apparait { to { opacity: 1; translate: 0 0; } }

/* ---------- Pile de feuilles ---------- */
main { display: block; }
.feuille {
  position: relative;
  margin-top: calc(var(--rayon) * -1);
  border-radius: var(--rayon) var(--rayon) 0 0;
  background: var(--fond, var(--c-brume));
  box-shadow: 0 -1px 0 rgba(255,255,255,.35) inset, 0 -26px 50px -30px rgba(10,12,6,.55);
  transform-origin: 50% 0;
}
.feuille__voile {
  position: absolute; inset: 0; z-index: 30;
  border-radius: inherit;
  background: var(--c-terre);
  opacity: 0; pointer-events: none;
}
.feuille--ouverture { margin-top: 0; border-radius: 0; box-shadow: none; }
.contenu { width: 100%; max-width: var(--large); margin: 0 auto; padding-left: var(--marge); padding-right: var(--marge); }

/* ---------- Ouverture ---------- */
.ouverture { padding: 10px 10px 0; background: var(--c-brume); }
.ouverture__grille { position: relative; display: grid; gap: 10px; }
.panneau { position: relative; border-radius: var(--rayon); }

.panneau--texte {
  overflow: clip;
  min-height: max(560px, calc(100svh - 20px - var(--banner-h) - 84px));
  padding: 108px clamp(20px, 4vw, 56px) clamp(24px, 4vw, 52px);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 22px;
  color: var(--c-brume);
  background:
    radial-gradient(110% 60% at 12% 0%, color-mix(in srgb, var(--c-ambre-clair) 75%, white) 0%, transparent 62%),
    linear-gradient(172deg,
      color-mix(in srgb, var(--c-sauge) 85%, white) 0%,
      color-mix(in srgb, var(--c-olive) 55%, var(--c-sauge)) 26%,
      var(--c-olive) 50%,
      color-mix(in srgb, var(--c-olive) 45%, var(--c-mousse)) 70%,
      var(--c-mousse) 100%);
}
.panneau--texte::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--grain); opacity: .28; mix-blend-mode: overlay;
}
.panneau--texte > * { position: relative; z-index: 1; }
.ouverture__titre {
  font-family: var(--f-titre);
  font-size: clamp(2.7rem, min(8vw, 9vh), 5.9rem);
  line-height: 1;
  letter-spacing: -.02em;
  max-width: 11ch;
  --accent: color-mix(in srgb, var(--c-ambre-clair) 75%, var(--c-brume));
  text-shadow: 0 1px 18px rgba(20,26,14,.18);
}
.ouverture__intro { max-width: 34rem; margin: 0; font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); color: rgba(241,240,234,.94); }
.ouverture__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ouverture__actions .btn--contour { color: var(--c-brume); }

.panneau--scene {
  aspect-ratio: 4 / 4.6;
  z-index: 2;
}
.scene-cadre {
  position: absolute; inset: 0; overflow: clip; border-radius: inherit;
  background:
    radial-gradient(70% 45% at 50% 42%, rgba(255,255,255,.85), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--c-sauge-claire) 70%, white) 0%, var(--c-sauge-claire) 45%, var(--c-sauge) 100%);
}
.scene-cadre::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--grain); opacity: .22; mix-blend-mode: soft-light;
}
.scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene g { will-change: transform; }
.scene__legende { display: none;
  position: absolute; left: clamp(18px, 3vw, 40px); top: clamp(18px, 3vw, 36px); z-index: 2;
  max-width: 13em; margin: 0;
  font-family: var(--f-titre); font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); line-height: 1.12;
  color: var(--c-mousse);
}
.scene__etiquettes {
  position: absolute; right: clamp(12px, 2.4vw, 28px); bottom: clamp(12px, 2.4vw, 28px); z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.scene__etiquettes li {
  padding: 7px 14px; border-radius: 999px;
  background: rgba(241,240,234,.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--c-mousse); font-size: .8rem; font-weight: 500; line-height: 1.3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px -10px rgba(20,26,14,.5);
}

/* couleurs du dessin, liées à la configuration */
.sc-ciel-1 { stop-color: color-mix(in srgb, var(--c-ambre-clair) 55%, white); }
.sc-ciel-2 { stop-color: color-mix(in srgb, var(--c-sauge-claire) 60%, white); }
.sc-soleil-1 { stop-color: #FFF8E6; }
.sc-soleil-2 { stop-color: var(--c-ambre-clair); }
.sc-soleil-3 { stop-color: var(--c-ambre); stop-opacity: 0; }
.sc-sol-1 { stop-color: color-mix(in srgb, var(--c-olive) 75%, var(--c-sauge)); }
.sc-sol-2 { stop-color: var(--c-mousse); }
.sc-dos-1 { stop-color: color-mix(in srgb, var(--c-olive) 80%, var(--c-mousse)); }
.sc-dos-2 { stop-color: color-mix(in srgb, var(--c-olive) 40%, var(--c-mousse)); }
.sc-bras-1 { stop-color: color-mix(in srgb, var(--c-olive) 70%, var(--c-sauge)); }
.sc-bras-2 { stop-color: var(--c-olive); }
.sc-bras-3 { stop-color: color-mix(in srgb, var(--c-olive) 70%, var(--c-mousse)); }
.sc-mur { fill: var(--c-brume); }
.sc-mousse { fill: color-mix(in srgb, var(--c-olive) 60%, var(--c-sauge)); }
.sc-mousse-fonce { fill: var(--c-mousse); }
.sc-laiton { fill: color-mix(in srgb, var(--c-ambre) 65%, #6b4a1c); }
.sc-ombre { fill: var(--c-mousse); }

.pollen { fill: #FFF6DC; animation: flotte var(--t, 14s) ease-in-out infinite alternate; }
@keyframes flotte { to { translate: var(--x, 18px) var(--y, -40px); } }
.scene.en-pause .pollen { animation-play-state: paused; }

/* Nuage de premier plan qui déborde du cadre */
.nuage {
  position: absolute; z-index: 4; pointer-events: none;
  left: 6%; top: -46px; width: 78%; aspect-ratio: 2.6 / 1;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.96), rgba(255,255,255,0)) 4% 70% / 34% 62% no-repeat,
    radial-gradient(closest-side, #fff, rgba(255,255,255,0)) 26% 40% / 38% 86% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.98), rgba(255,255,255,0)) 52% 30% / 40% 92% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0)) 76% 52% / 36% 74% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0)) 97% 72% / 26% 50% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.8), rgba(255,255,255,0)) 50% 82% / 96% 46% no-repeat;
  filter: drop-shadow(0 18px 18px rgb(var(--ligne) / .12));
}

.ouverture__arc { display: none; }

@media (min-width: 960px) {
  .ouverture__grille {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    height: clamp(620px, calc(100svh - 20px - var(--banner-h)), 960px);
  }
  .panneau--texte { min-height: 0; padding-top: 120px; }
  .panneau--scene { aspect-ratio: auto; }
  .nuage { left: -24%; top: 13%; width: 62%; }
  .ouverture__arc {
    display: block; position: absolute; inset: 0; z-index: 3;
    width: 100%; height: 100%; pointer-events: none; overflow: visible;
  }
  .scene__legende { top: 104px; }
}
.arc-pointille { fill: none; stroke: rgba(241,240,234,.55); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 0 10; }
.arc-plein { fill: none; stroke: var(--c-ambre); stroke-opacity: .75; stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* Repères */
.reperes {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 26px 20px;
  padding: 44px clamp(10px, 3vw, 46px) calc(56px + var(--rayon));
  align-items: start;
}
.repere { border-top: 1px solid rgb(var(--ligne) / .22); padding-top: 14px; }
.repere__valeur { display: block; font-family: var(--f-titre); font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.2rem); line-height: 1.05; color: var(--c-mousse); }
.repere__texte { display: block; margin-top: 6px; font-size: .92rem; line-height: 1.45; color: var(--g3); }
.badge-defiler {
  display: none;
  position: relative; width: 116px; height: 116px; justify-self: end; align-self: center;
  color: var(--c-mousse); text-decoration: none; border-radius: 50%;
}
.badge-defiler svg { width: 100%; height: 100%; }
.badge-defiler text { font-family: var(--f-mono); font-size: 10.5px; fill: currentColor; }
.badge-defiler__trait { position: absolute; left: 50%; top: 34%; width: 1.5px; height: 32%; background: currentColor; translate: -50% 0; }
.badge-defiler__trait::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 7px; height: 7px; translate: -50% 0; border-radius: 50%; background: var(--c-ambre); }
@keyframes tourne { to { rotate: 360deg; } }
@media (min-width: 960px) {
  .reperes { grid-template-columns: repeat(4, minmax(0,1fr)) auto; gap: 30px; }
  .badge-defiler { display: block; }
}

/* ---------- Présentation (nom géant et capsule) ---------- */
.presentation { overflow: clip; padding: clamp(72px, 9vw, 130px) 0 clamp(80px, 10vw, 150px); }
.halo { position: absolute; border-radius: 50%; pointer-events: none; }
.halo--ambre { right: -14vw; top: 6%; width: 52vw; height: 52vw; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-ambre) 45%, transparent), transparent); opacity: .5; }
.halo--gris { left: -16vw; top: 46%; width: 40vw; height: 40vw; background: radial-gradient(closest-side, rgba(120,128,108,.28), transparent); }
.portrait-zone { position: relative; }
.nom-geant {
  position: relative; z-index: 3;
  font-family: var(--f-titre);
  font-size: clamp(4rem, 1rem + 12vw, 12rem);
  line-height: .88; letter-spacing: -.03em;
  color: var(--c-mousse);
}
.nom-geant span { display: block; }
.nom-geant__nom { padding-left: 38%; margin-top: .62em; }
.capsule-zone {
  position: absolute; z-index: 2;
  left: 46%; top: .3em; width: clamp(140px, 23vw, 300px);
  font-size: clamp(4rem, 1rem + 12vw, 12rem);
}
.capsule {
  position: relative; z-index: 1; width: 100%; aspect-ratio: .64;
  border-radius: 999px; overflow: clip;
  background:
    radial-gradient(70% 50% at 35% 25%, color-mix(in srgb, var(--c-ambre-clair) 60%, white), transparent 70%),
    linear-gradient(165deg, var(--c-sauge) 0%, var(--c-olive) 70%, var(--c-mousse) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 30px 60px -30px rgba(31,27,21,.6);
  display: grid; justify-items: center; align-content: start; padding-top: 34%;
}
.capsule::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .3; mix-blend-mode: overlay; }
.capsule__mono { width: 46%; color: rgba(241,240,234,.9); }
.capsule__note {
  position: absolute; left: 50%; bottom: 9%; translate: -50% 0; z-index: 1;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(31,27,21,.45); color: #F6F4EE;
  font-family: var(--f-mono); font-size: .72rem;
}
.orbite { position: absolute; left: -48%; width: 196%; top: 56%; height: 30%; rotate: -11deg; pointer-events: none; overflow: visible; }
.orbite ellipse, .orbite path { fill: none; stroke: var(--c-ambre-fonce); stroke-opacity: .6; stroke-width: 1; }
.orbite--arriere { z-index: 0; }
.orbite--avant { z-index: 2; }
.presentation__bas {
  position: relative; z-index: 3;
  display: grid; gap: 28px; margin-top: clamp(40px, 6vw, 80px);
}
.presentation__texte { max-width: 30rem; font-size: 1.08rem; }
@media (max-width: 699px) {
  .nom-geant__nom { padding-left: 0; text-align: right; margin-top: 1.05em; }
  .capsule-zone { left: auto; right: 6%; top: .55em; width: 38vw; }
  /* la capsule dépasse du nom : on réserve sa hauteur pour ne pas couvrir le texte */
  .portrait-zone { min-height: calc(38vw / .64 + 3rem); }
  .capsule__note { white-space: normal; text-align: center; width: 78%; font-size: .6rem; padding: 4px 6px; }
  .scene__etiquettes { left: 12px; right: 12px; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .scene__etiquettes li { font-size: .74rem; padding: 5px 10px; }
}

/* Texte en escalier qui s'allume */
.escalier { position: relative; z-index: 3; margin-top: clamp(64px, 8vw, 110px); }
.escalier__p {
  max-width: 25em; margin: 0 0 .9em;
  font-size: clamp(1.2rem, 1rem + .85vw, 1.65rem); line-height: 1.38; color: var(--c-mousse);
}
.escalier__p:nth-of-type(2) { margin-left: 9%; }
.escalier__p:nth-of-type(3) { margin-left: 18%; }
@media (min-width: 960px) {
  .escalier__p:nth-of-type(2) { margin-left: 20%; }
  .escalier__p:nth-of-type(3) { margin-left: 40%; }
}
.escalier .pastille { margin-bottom: 26px; }
.anim .lum { opacity: .26; transition: opacity .5s ease; }
.anim .lum.on { opacity: 1; }

/* ---------- Approche (trois cercles) ---------- */
.approche {
  --fond: var(--c-sauge-claire);
  overflow: clip;
  padding: clamp(80px, 10vw, 150px) 0 clamp(90px, 11vw, 170px);
  background:
    radial-gradient(42% 46% at 8% 12%, color-mix(in srgb, var(--c-olive) 30%, transparent), transparent 72%),
    radial-gradient(36% 42% at 94% 92%, color-mix(in srgb, var(--c-ambre) 32%, transparent), transparent 72%),
    var(--c-sauge-claire);
}
.approche::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--grain); opacity: .25; mix-blend-mode: soft-light; pointer-events: none; }
.approche__tete { position: relative; display: grid; gap: 22px; }
.approche__intro { max-width: 32rem; font-size: 1.1rem; color: var(--g1); }
.cercles {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  margin-top: clamp(48px, 7vw, 90px);
}
.cercle {
  width: min(84vw, 360px); aspect-ratio: 1;
  border-radius: 50%;
  border: 1.3px solid rgb(var(--ligne) / .6);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 0; text-align: center; flex: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.35), rgba(255,255,255,0));
}
.cercle + .cercle { margin-top: -13%; }
.cercle:nth-of-type(2) { margin-left: 8%; }
.cercle:nth-of-type(3) { margin-right: 8%; }
.cercle > * { max-width: 70%; }
.cercle h3 { font-family: var(--f-titre); font-size: clamp(1.4rem, 1.1rem + .9vw, 2rem); line-height: 1.1; color: var(--c-mousse); margin-bottom: 10px; }
.cercle p { margin: 0; font-size: .98rem; line-height: 1.5; color: var(--g1); }
@media (min-width: 960px) {
  .approche__tete { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; }
  .approche__intro { margin: 0 0 10px; }
  .cercles { flex-direction: row; justify-content: center; padding-left: 6%; }
  .cercle { width: 32%; max-width: 420px; }
  .cercle + .cercle { margin-top: 0; margin-left: -5%; }
  .cercle:nth-of-type(2) { margin-left: -5%; margin-top: clamp(60px, 9vw, 130px); }
  .cercle:nth-of-type(3) { margin-right: 0; margin-top: -30px; }
}

/* ---------- Accompagnements (index éditorial) ---------- */
.accomp { padding: clamp(80px, 10vw, 150px) 0 clamp(70px, 8vw, 120px); }
.accomp__grille { display: grid; gap: 40px; }
.accomp__rail { align-self: start; }
.accomp__rail p { max-width: 26rem; margin: 22px 0 10px; }
.index-acc { border-bottom: 1px solid rgb(var(--ligne) / .2); }
.acc-ligne {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 4px 12px;
  padding: 22px 40px 22px 0;
  border-top: 1px solid rgb(var(--ligne) / .2);
  text-decoration: none; color: var(--c-mousse);
}
.acc-ligne__num { grid-row: 1 / 3; padding-top: 10px; font-family: var(--f-mono); font-size: .8rem; color: var(--c-olive); }
.acc-ligne__titre { font-family: var(--f-titre); font-size: clamp(1.45rem, 1.15rem + 1vw, 2.1rem); line-height: 1.08; transition: translate .5s var(--ease); }
.acc-ligne__court { font-size: .98rem; color: var(--g3); transition: translate .5s var(--ease) .04s; }
.acc-ligne__trait { position: absolute; right: 0; top: 50%; width: 22px; height: 1.5px; background: currentColor; transition: width .5s var(--ease); }
.acc-ligne__trait::after { content: ""; position: absolute; right: -4px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-ambre); opacity: 0; transition: opacity .4s; }
.acc-ligne:hover .acc-ligne__titre, .acc-ligne:focus-visible .acc-ligne__titre { translate: 10px 0; }
.acc-ligne:hover .acc-ligne__court, .acc-ligne:focus-visible .acc-ligne__court { translate: 10px 0; }
.acc-ligne:hover .acc-ligne__trait, .acc-ligne:focus-visible .acc-ligne__trait { width: 56px; }
.acc-ligne:hover .acc-ligne__trait::after { opacity: 1; }
@media (min-width: 960px) {
  .accomp__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; }
  .accomp__rail { position: sticky; top: 120px; }
  .acc-ligne { grid-template-columns: 60px minmax(0, 1fr) 90px; padding-right: 0; }
  .acc-ligne__court { grid-column: 2; }
}

/* ---------- Petit guide ---------- */
.guide {
  position: relative; overflow: clip;
  margin-top: clamp(60px, 8vw, 110px);
  border-radius: var(--rayon);
  padding: clamp(28px, 5vw, 64px);
  color: var(--c-brume);
  background:
    radial-gradient(60% 70% at 100% 0%, color-mix(in srgb, var(--c-ambre) 34%, transparent), transparent 70%),
    linear-gradient(160deg, var(--c-olive) 0%, color-mix(in srgb, var(--c-olive) 50%, var(--c-mousse)) 45%, var(--c-mousse) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 40px 70px -40px rgba(20,24,14,.8), 0 10px 20px -12px rgba(20,24,14,.4);
}
.guide::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .25; mix-blend-mode: overlay; pointer-events: none; }
.guide > * { position: relative; z-index: 1; }
.guide__grille { display: grid; gap: 34px; }
.guide .titre-section { color: var(--c-brume); --accent: var(--c-ambre-clair); }
.guide__aide { margin: 18px 0 0; color: rgba(241,240,234,.9); }
.guide__fil { display: flex; gap: 8px; margin-top: 26px; flex-wrap: wrap; }
.guide__fil li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font-size: .82rem; color: rgba(241,240,234,.8);
  border: 1px solid rgba(241,240,234,.25);
  transition: background .4s, color .4s, border-color .4s;
}
.guide__fil li[aria-current="step"] { background: rgba(241,240,234,.14); color: var(--c-brume); border-color: rgba(241,240,234,.6); }
.guide__fil li.fait-guide { color: var(--c-ambre-clair); border-color: rgba(242,207,142,.4); }
.guide fieldset { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.guide legend { padding: 0; margin-bottom: 12px; font-weight: 600; font-size: 1rem; }
.choix-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.choix { position: relative; display: inline-flex; cursor: pointer; }
.choix input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choix span {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(241,240,234,.42);
  font-size: .95rem; line-height: 1.3;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s, transform .35s var(--ease);
}
.choix:hover span { border-color: var(--c-brume); }
.choix input:checked + span { background: var(--c-brume); color: var(--c-mousse); border-color: var(--c-brume); box-shadow: 0 8px 18px -10px rgba(0,0,0,.6); }
.choix input:focus-visible + span { outline: 3px solid var(--c-ambre); outline-offset: 2px; }
.guide__resultat {
  margin-top: 6px; padding: 24px; border-radius: 22px;
  background: rgba(241,240,234,.1);
  box-shadow: inset 0 0 0 1px rgba(241,240,234,.22);
}
.guide__resultat.arrive { animation: arrive .7s var(--ease) both; }
@keyframes arrive { from { opacity: 0; translate: 0 16px; } }
.guide__res-sur { margin: 0 0 6px; font-size: .85rem; color: var(--c-ambre-clair); font-weight: 600; }
.guide__res-titre { font-family: var(--f-titre); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.08; margin-bottom: 12px; }
.guide__resultat p { color: rgba(241,240,234,.94); }
.guide__res-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 18px; }
.guide__res-note { margin: 16px 0 0; font-size: .85rem; color: rgba(241,240,234,.8) !important; }
@media (min-width: 960px) {
  .guide__grille { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 60px; }
}

/* ---------- Tarifs (feuille sombre) ---------- */
.tarifs-accueil {
  --fond: var(--c-terre);
  overflow: clip;
  padding: clamp(150px, 16vw, 230px) 0 clamp(90px, 10vw, 150px);
  color: #E9E4D8;
  background:
    radial-gradient(70% 55% at 50% 115%, color-mix(in srgb, var(--c-ambre) 45%, transparent), transparent 72%),
    linear-gradient(180deg, var(--c-terre), color-mix(in srgb, var(--c-terre) 80%, #4a3412));
}
.tarifs-accueil__arc { position: absolute; left: 0; top: 0; width: 100%; height: clamp(150px, 16vw, 230px); overflow: visible; pointer-events: none; }
.tarifs-accueil__arc path { fill: none; stroke-width: 2; stroke-linecap: round; }
.tarifs-accueil__points { stroke: rgba(242,207,142,.5); stroke-dasharray: 0 9; }
.tarifs-accueil .titre-section { color: #F4EFE3; --accent: var(--c-ambre); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.tarifs-accueil__grille { display: grid; gap: 40px; }
.tarifs-accueil__texte { max-width: 34rem; margin-top: 24px; font-size: 1.08rem; }
.tarifs-accueil__note { font-size: .85rem; color: #C9C1AF; }
.tarifs-accueil .lien { color: #F4EFE3; }
.chiffres { display: grid; gap: 0; }
.chiffre { display: grid; grid-template-columns: minmax(0, 1fr); padding: 22px 0; border-top: 1px solid rgba(233,228,216,.2); }
.chiffre__valeur { font-family: var(--f-titre); font-size: clamp(2.4rem, 1.9rem + 2vw, 3.6rem); line-height: 1; color: var(--c-ambre-clair); }
.chiffre__texte { margin-top: 8px; font-size: .98rem; color: #DCD5C5; max-width: 26rem; }
@media (min-width: 960px) {
  .tarifs-accueil__grille { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: start; }
  .chiffres { margin-top: 10px; }
  .chiffre { grid-template-columns: 190px minmax(0,1fr); gap: 20px; align-items: center; }
  .chiffre__texte { margin: 0; }
}

/* ---------- Questions fréquentes ---------- */
.faq-accueil { padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 110px); }
.faq-accueil__grille { display: grid; gap: 34px; }
.faq-liste { border-bottom: 1px solid rgb(var(--ligne) / .2); }
.faq__item { border-top: 1px solid rgb(var(--ligne) / .2); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 64px; padding: 16px 0;
  font-family: var(--f-titre); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem); line-height: 1.2;
  color: var(--c-mousse); cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__signe { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.3px rgb(var(--ligne) / .45); transition: background .3s, rotate .5s var(--ease); }
.faq__signe::before, .faq__signe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--c-mousse); transition: rotate .5s var(--ease); }
.faq__signe::after { rotate: 90deg; }
.faq__item[open] .faq__signe { background: var(--c-sauge-claire); }
.faq__item[open] .faq__signe::after { rotate: 0deg; }
.faq__reponse p { max-width: 40rem; padding: 0 0 20px; margin: 0; color: var(--g1); }
@supports (interpolate-size: allow-keywords) {
  .faq-liste { interpolate-size: allow-keywords; }
  .faq__item::details-content { height: 0; overflow: clip; transition: height .5s var(--ease), content-visibility .5s allow-discrete; }
  .faq__item[open]::details-content { height: auto; }
}
@media (min-width: 960px) {
  .faq-accueil__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; }
}

/* ---------- Appel final (deux panneaux) ---------- */
.final { padding: 10px 10px calc(10px + var(--rayon)); }
.final__grille { display: grid; gap: 10px; }
.final__panneau { position: relative; overflow: clip; border-radius: var(--rayon); padding: clamp(28px, 5vw, 64px); }
.final__panneau--aube {
  min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end;
  background:
    radial-gradient(90% 80% at 85% 110%, var(--c-ambre) 0%, transparent 60%),
    linear-gradient(200deg, var(--c-brume) 10%, color-mix(in srgb, var(--c-ambre-clair) 70%, var(--c-brume)) 60%, var(--c-ambre-clair) 100%);
}
.final__panneau--aube::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .25; mix-blend-mode: soft-light; pointer-events: none; }
.final__panneau--aube .titre-section { position: relative; z-index: 1; max-width: 11ch; --accent: var(--c-olive); }
.final__arc { position: absolute; right: -10%; top: -30%; width: 80%; aspect-ratio: 1; border-radius: 50%; border: 1.5px dotted rgb(var(--ligne) / .35); pointer-events: none; }
.final__panneau--contact { background: var(--c-mousse); color: #E9EDE0; }
.final__panneau--contact p { max-width: 32rem; }
.final__adresse { font-family: var(--f-titre); font-size: 1.5rem; line-height: 1.2; color: var(--c-brume); margin-bottom: 4px; }
.final__note { font-size: .85rem; color: #C3CCB3; }
.final__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 26px; }
.final__panneau--contact .lien { color: var(--c-brume); }
@media (min-width: 960px) {
  .final__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .final__panneau--aube { min-height: 520px; }
  .final__panneau--contact { display: flex; flex-direction: column; justify-content: flex-end; }
}

/* ---------- Pied de page (dernière feuille) ---------- */
.pied {
  --fond: var(--c-mousse);
  color: #E2E7D8;
  padding: clamp(60px, 8vw, 110px) 0 calc(40px + env(safe-area-inset-bottom));
}
@media (min-width: 960px) { .pied { padding-bottom: 40px; } }
.pied::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--grain); opacity: .18; mix-blend-mode: overlay; pointer-events: none; }
.pied > * { position: relative; }
.pied a { color: var(--c-brume); }
.pied__haut { display: flex; align-items: center; gap: 16px; margin-bottom: 44px; color: var(--c-brume); }
.pied__haut svg { width: 64px; height: 64px; }
.pied__nom { font-family: var(--f-titre); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem); line-height: 1; }
.pied__metier { font-size: .95rem; color: #C9D1B9; }
.pied__grille { display: grid; grid-template-columns: minmax(0,1fr); gap: 30px; }
.pied__titre { font-family: var(--f-texte); font-size: .9rem; font-weight: 600; color: var(--c-ambre-clair); margin-bottom: 10px; }
.pied__grille p, .pied__grille li { font-size: .95rem; margin: 0 0 6px; }
.pied nav ul { columns: 2; column-gap: 20px; }
.pied__grille ul a { display: inline-flex; min-height: 32px; align-items: center; text-decoration: none; }
.pied__grille ul a:hover { text-decoration: underline; }
.pied__urgence {
  margin: 44px 0 0; padding: 18px 20px; border-radius: 18px;
  background: rgba(241,240,234,.08); box-shadow: inset 0 0 0 1px rgba(241,240,234,.18);
  color: var(--c-brume); font-size: 1rem;
}
.pied__urgence a { font-weight: 700; }
.pied__demo { margin: 22px 0 0; font-family: var(--f-mono); font-size: .78rem; color: #C3CCB3; }
@media (min-width: 700px) { .pied__grille { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px) { .pied__grille { grid-template-columns: 1.2fr 1fr .9fr 1fr; } }

/* ---------- Fenêtre de démonstration (rendez-vous) ---------- */
.dialogue {
  width: min(92vw, 460px); padding: 0; border: 0; border-radius: 26px;
  background: var(--c-brume); color: var(--c-encre);
  box-shadow: 0 40px 80px -30px rgba(10,12,6,.7);
}
.dialogue::backdrop { background: rgba(31,27,21,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dialogue[open] { animation: arrive .5s var(--ease) both; }
.dialogue__corps { padding: 30px 28px 26px; }
.dialogue svg { width: 54px; height: 54px; color: var(--c-olive); margin-bottom: 14px; }
.dialogue h2 { font-family: var(--f-titre); font-size: 1.7rem; line-height: 1.1; color: var(--c-mousse); margin-bottom: 12px; }
.dialogue__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 20px; }

/* ---------- Apparitions ---------- */
.anim .entree { animation: entree 1.1s var(--ease) both; animation-delay: calc(var(--d0) + var(--i, 0) * 90ms); }
@keyframes entree { from { opacity: 0; translate: 0 26px; } }

.m { display: inline-block; vertical-align: top; }
.anim .m { overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.anim .mots-finis .m { overflow: visible; }
.anim [data-mots] .m-i { display: inline-block; translate: 0 108%; transition: translate 1.05s var(--ease); transition-delay: calc(var(--k, 0) * 55ms); }
.anim [data-mots].vu .m-i { translate: 0 0; }
.anim .ouverture__titre .m-i { display: inline-block; animation: mot-monte 1.15s var(--ease) both; animation-delay: calc(var(--d0) + 150ms + var(--k, 0) * 70ms); }
@keyframes mot-monte { from { translate: 0 108%; } }

.anim [data-reveal="monte"] { opacity: 0; translate: 0 30px; transition: opacity .9s var(--ease), translate 1s var(--ease); transition-delay: calc(var(--k, 0) * 90ms); }
.anim [data-reveal="redresse"] { opacity: 0; transform: perspective(900px) rotateX(24deg) translateY(40px); transform-origin: 50% 100%; transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--k, 0) * 120ms); }
.anim [data-reveal="photo"] { opacity: 0; scale: 1.06; translate: 0 18px; transition: opacity 1.4s ease, scale 2.6s var(--ease), translate 1.6s var(--ease); }
.anim [data-reveal].vu { opacity: 1; translate: 0 0; transform: none; scale: 1; }

/* dessin de la scène à l'arrivée */
.anim .l-soleil { animation: soleil-leve 2.8s var(--ease) both; animation-delay: calc(var(--d0) + .1s); }
@keyframes soleil-leve { from { translate: 0 150px; opacity: .3; } }
.anim .l-fauteuils { animation: entree 1.6s var(--ease) both; animation-delay: calc(var(--d0) + .35s); }
.anim .nuage { animation: nuage-arrive 2.4s var(--ease) both; animation-delay: calc(var(--d0) + .2s); }
@keyframes nuage-arrive { from { opacity: 0; translate: -40px 10px; } }
.anim .arc-plein { stroke-dashoffset: 1; animation: trace 2.4s var(--ease) forwards; animation-delay: calc(var(--d0) + .5s); }
.anim .arc-pointille { animation: apparait-simple 1.6s ease both; animation-delay: calc(var(--d0) + .4s); }
@keyframes apparait-simple { from { opacity: 0; } }

/* Filet de sécurité : tout visible si le script ne s'est pas terminé */
.tout-visible .entree, .tout-visible [data-reveal], .tout-visible .m-i, .tout-visible .l-soleil, .tout-visible .l-fauteuils, .tout-visible .nuage {
  opacity: 1 !important; translate: none !important; transform: none !important; scale: none !important; animation: none !important;
}
.tout-visible .lum { opacity: 1 !important; }
.tout-visible .rideau { display: none !important; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rideau { display: none !important; }
  .menu { clip-path: none; }
  .scene g { will-change: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* largeurs intermédiaires : le nuage ne doit pas toucher le grand titre */
@media (min-width: 960px) and (max-width: 1279px) {
  .nuage { left: -10%; top: 9%; width: 54%; }
}

/* ---------- Un cadre clair (garanties professionnelles) ---------- */
.cadre { position: relative; z-index: 3; margin-top: clamp(70px, 9vw, 130px); }
.cadre__titre { font-family: var(--f-titre); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); color: var(--c-mousse); margin-bottom: 22px; }
.cadre__liste { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid rgb(var(--ligne) / .22); }
.cadre__item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 10px; padding: 20px 0; border-bottom: 1px solid rgb(var(--ligne) / .14); font-size: .97rem; color: var(--g2); }
.cadre__num { grid-row: 1 / 3; padding-top: 3px; font-family: var(--f-mono); font-size: .76rem; color: var(--c-olive); }
.cadre__item strong { font-weight: 600; color: var(--c-mousse); }
@media (min-width: 960px) {
  .cadre { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px; }
  .cadre__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 0; }
  .cadre__item { grid-template-columns: minmax(0,1fr); padding: 18px 22px 4px 0; margin-right: 22px; border-bottom: 0; border-top: 1px solid rgb(var(--ligne) / .22); align-content: start; }
  .cadre__num { grid-row: auto; }
}

/* ---------- Première séance en trois temps ---------- */
.premiere {
  --fond: color-mix(in srgb, var(--c-sauge-claire) 55%, var(--c-brume));
  padding: clamp(80px, 10vw, 140px) 0 calc(clamp(70px, 9vw, 120px) + var(--rayon));
}
.premiere__tete { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vw, 72px); }
.premiere__tete p { max-width: 30rem; margin: 0; font-size: 1.08rem; }
.etapes { position: relative; display: grid; gap: 34px; margin-bottom: 36px; counter-reset: etape; }
.etapes::before {
  content: ""; position: absolute; left: 21px; top: 22px; bottom: 30px; width: 1px;
  background: linear-gradient(var(--c-olive), color-mix(in srgb, var(--c-ambre) 70%, transparent));
  transform-origin: 50% 0;
}
.anim .etapes[data-reveal="trait"]::before { transform: scaleY(0); transition: transform 1.6s var(--ease) .2s; }
.anim .etapes.vu::before { transform: none; }
.etape { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 18px; }
.etape__num {
  grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-brume); color: var(--c-mousse);
  font-family: var(--f-titre); font-size: 1.05rem;
  box-shadow: inset 0 0 0 1px rgb(var(--ligne) / .35), 0 6px 14px -8px rgba(31,27,21,.4);
}
.etape h3 { font-family: var(--f-titre); font-size: clamp(1.35rem, 1.15rem + .7vw, 1.75rem); line-height: 1.15; color: var(--c-mousse); padding-top: 8px; }
.etape p { margin: 0; max-width: 24rem; color: var(--g2); }
@media (min-width: 960px) {
  .premiere__tete { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; }
  .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .etapes::before { left: 22px; right: 8%; top: 22px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--c-olive), color-mix(in srgb, var(--c-ambre) 70%, transparent)); transform-origin: 0 50%; }
  .anim .etapes[data-reveal="trait"]::before { transform: scaleX(0); }
  .anim .etapes.vu::before { transform: none; }
  .etape { grid-template-columns: minmax(0, 1fr); }
  .etape__num { grid-row: auto; margin-bottom: 14px; }
  .etape h3 { padding-top: 0; }
}

/* ---------- Numéros utiles ---------- */
.ressources {
  margin-top: 36px; padding: 24px; border-radius: 22px;
  background: color-mix(in srgb, var(--c-sauge-claire) 70%, var(--c-brume));
  box-shadow: inset 0 0 0 1px rgb(var(--ligne) / .12);
}
.ressources :is(h2, h3) { font-family: var(--f-titre); font-size: 1.45rem; line-height: 1.15; color: var(--c-mousse); margin-bottom: 6px; }
.ressources :is(h2, h3) em { font-style: normal; color: var(--c-olive); }
.ressources > p { font-size: .95rem; margin-bottom: 14px; color: var(--g2); }
.ressource {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 0 14px; align-items: baseline;
  padding: 11px 0; min-height: 44px; border-top: 1px solid rgb(var(--ligne) / .14);
  text-decoration: none; color: var(--c-mousse);
}
.ressource__num { font-family: var(--f-titre); font-size: 1.2rem; white-space: nowrap; }
.ressource__nom { font-weight: 600; font-size: .95rem; }
.ressource__texte { grid-column: 1 / -1; font-size: .88rem; color: var(--g4); }
.ressource:hover .ressource__num { color: var(--c-olive); }

/* ---------- Infos pratiques ---------- */
.pratique { margin: 4px 0 0; display: grid; gap: 8px; font-size: .95rem; color: #DCE2D0; }
.pratique li { position: relative; padding-left: 18px; }
.pratique li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-ambre); opacity: .8; }

/* =====================================================================
   PAGES INTÉRIEURES
   ===================================================================== */

/* ---------- En-tête de page ---------- */
.page-tete { padding: 10px 10px 0; background: var(--c-brume); }
.page-tete__grille { display: grid; gap: 10px; }
.page-tete__texte {
  position: relative; overflow: clip;
  border-radius: var(--rayon);
  padding: 116px clamp(20px, 4vw, 56px) clamp(32px, 4vw, 56px);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 20px;
  background:
    radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--c-sauge) 55%, transparent), transparent 70%),
    var(--c-sauge-claire);
}
.page-tete__texte::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .22; mix-blend-mode: soft-light; pointer-events: none; }
.page-tete__texte > * { position: relative; z-index: 1; }
.page-tete h1 {
  font-family: var(--f-titre);
  font-size: clamp(2.5rem, 1.5rem + 4.4vw, 5.2rem);
  line-height: 1.02; letter-spacing: -.02em;
  color: var(--c-mousse); max-width: 14ch; text-wrap: balance;
}
.page-tete h1 em { font-style: normal; color: var(--c-olive); }
.page-tete__intro { max-width: 36rem; margin: 0; font-size: clamp(1.02rem, .95rem + .3vw, 1.15rem); color: var(--g1); }
.page-tete__aube {
  position: relative; overflow: clip; border-radius: var(--rayon);
  min-height: 190px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-sauge-claire) 60%, white), var(--c-sauge-claire) 70%);
}
.page-tete__aube svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-tete__aube::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .2; mix-blend-mode: soft-light; pointer-events: none; }
.anim .page-tete__soleil { animation: soleil-leve 2.6s var(--ease) both; animation-delay: calc(var(--d0) + .1s); }
.tout-visible .page-tete__soleil { animation: none !important; }
@media (min-width: 960px) {
  .page-tete__grille { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); min-height: clamp(520px, 72svh, 720px); }
  .page-tete__texte { padding-top: 140px; }
}

/* ---------- Blocs de contenu ---------- */
.bloc { padding: clamp(72px, 9vw, 130px) 0 calc(clamp(64px, 8vw, 110px) + var(--rayon)); }
.bloc--sauge { --fond: color-mix(in srgb, var(--c-sauge-claire) 60%, var(--c-brume)); }
.bloc--sombre { --fond: var(--c-mousse); color: #E2E7D8; }
.bloc--sombre .titre-section { color: var(--c-brume); --accent: var(--c-ambre-clair); }
.deux-col { display: grid; gap: 34px; }
.deux-col__rail p { max-width: 28rem; margin-top: 18px; }
@media (min-width: 960px) {
  .deux-col { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .deux-col__rail { position: sticky; top: 120px; align-self: start; }
}
.note-demo { font-family: var(--f-mono); font-size: .76rem; color: var(--g6); margin-top: 18px; }
.bloc--sombre .note-demo { color: #BFC8B0; }

/* liste à filets numérotée */
.filets { border-top: 1px solid rgb(var(--ligne) / .22); }
.filets > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 22px 0; border-bottom: 1px solid rgb(var(--ligne) / .16); }
.filets__num { grid-row: 1 / 3; padding-top: 6px; font-family: var(--f-mono); font-size: .78rem; color: var(--c-olive); }
.filets h3 { font-family: var(--f-titre); font-size: clamp(1.3rem, 1.1rem + .7vw, 1.75rem); line-height: 1.15; color: var(--c-mousse); }
.filets p { margin: 6px 0 0; color: var(--g2); max-width: 36rem; }
.bloc--sombre .filets { border-color: rgba(241,240,234,.2); }
.bloc--sombre .filets > li { border-color: rgba(241,240,234,.14); }
.bloc--sombre .filets h3 { color: var(--c-brume); }
.bloc--sombre .filets p { color: #D6DDCA; }
.bloc--sombre .filets__num { color: var(--c-ambre-clair); }

/* puces sobres */
.puces { display: grid; gap: 12px; }
.puces li { position: relative; padding-left: 22px; max-width: 38rem; }
.puces li::before { content: ""; position: absolute; left: 2px; top: .66em; width: 7px; height: 7px; border-radius: 50%; background: var(--c-ambre); }

/* parcours */
.parcours { position: relative; border-left: 1px solid rgb(var(--ligne) / .3); margin-left: 6px; }
.parcours li { position: relative; padding: 0 0 30px 26px; }
.parcours li::before { content: ""; position: absolute; left: -5px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--c-brume); box-shadow: inset 0 0 0 1.5px var(--c-olive); }
.parcours li:last-child::before { background: var(--c-ambre); box-shadow: none; }
.parcours__annee { display: block; font-family: var(--f-titre); font-size: 1.4rem; color: var(--c-mousse); }
.parcours__texte { display: block; max-width: 34rem; color: var(--g2); }

/* ---------- Accompagnements ---------- */
.index-themes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.index-themes a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgb(var(--ligne) / .3); text-decoration: none; font-size: .95rem; color: var(--c-mousse);
  transition: background .3s, box-shadow .3s;
}
.index-themes a:hover { background: var(--survol); box-shadow: inset 0 0 0 1px var(--c-mousse); }
.index-titre { margin: 0; font-weight: 600; font-size: .95rem; color: var(--c-mousse); }
.theme {
  scroll-margin-top: 100px;
  display: grid; gap: 22px;
  padding: clamp(44px, 6vw, 80px) 12px;
  margin: 0 -12px;
  border-top: 1px solid rgb(var(--ligne) / .18);
}
.theme:first-of-type { border-top: 0; padding-top: 0; }
.theme__tete { display: flex; gap: 16px; align-items: baseline; }
.theme__num { font-family: var(--f-mono); font-size: .8rem; color: var(--c-olive); }
.theme h2 { font-family: var(--f-titre); font-size: clamp(1.9rem, 1.4rem + 2vw, 3.1rem); line-height: 1.05; color: var(--c-mousse); }
.theme__corps p { max-width: 38rem; }
.theme__pistes-titre { font-weight: 600; color: var(--c-mousse); margin: 6px 0 12px; }
.theme__note { margin-top: 20px; padding: 14px 18px; border-radius: 16px; background: rgba(227,166,79,.14); box-shadow: inset 0 0 0 1px rgba(143,85,22,.2); max-width: 38rem; font-size: .96rem; }
.theme__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 22px; }
.theme.illumine { animation: illumine 2.4s ease; }
@keyframes illumine { 0% { background: transparent; } 20% { background: color-mix(in srgb, var(--c-ambre-clair) 30%, transparent); } 100% { background: transparent; } }
@media (min-width: 960px) {
  .theme { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .theme__tete { flex-direction: column; gap: 10px; position: sticky; top: 120px; align-self: start; }
}

/* ---------- Étapes verticales (première séance) : un sentier qui s'éclaire ---------- */
.etapes-v {
  --l-haut: 22px; --l-long: calc(100% - 80px); --avance: 0;
  position: relative; display: grid; gap: 0;
}
/* le sentier : des petits points de mousse, comme le sol du décor */
.etapes-v::before, .etapes-v::after {
  content: ""; position: absolute; z-index: 0; left: 20px; top: var(--l-haut); height: var(--l-long); width: 4px;
  pointer-events: none;
}
.etapes-v::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--c-olive) 55%, transparent) 1.3px, transparent 1.8px) center top / 4px 10px repeat-y;
}
/* la lumière qui avance avec la lecture */
.etapes-v::after {
  left: 21px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--c-olive), var(--c-ambre));
  transform-origin: 50% 0; transform: scaleY(var(--avance));
  box-shadow: 0 0 10px color-mix(in srgb, var(--c-ambre) 45%, transparent);
}
.etapes-v .etape {
  /* au-dessus du sentier, même pendant l'animation d'apparition */
  z-index: 1;
  grid-template-columns: 44px minmax(0, 1fr); gap: 4px 22px;
  padding-bottom: clamp(30px, 4vw, 44px);
}
.etapes-v .etape:last-child { padding-bottom: 0; }
.etapes-v .etape__num { grid-row: 1 / 3; margin: 0; position: relative; z-index: 1; transition: background .6s, color .6s, box-shadow .6s; }
.etapes-v .etape h3 { padding-top: 7px; }
.etapes-v .etape p { max-width: 34rem; }
/* étape atteinte : le numéro s'allume comme un petit soleil */
.etapes-v .etape.atteinte .etape__num {
  background: radial-gradient(circle at 40% 35%, #FFF6DD, var(--c-ambre-clair) 70%);
  color: var(--c-terre);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ambre-fonce) 35%, transparent),
    0 0 0 6px color-mix(in srgb, var(--c-ambre) 16%, transparent),
    0 8px 18px -8px color-mix(in srgb, var(--c-ambre-fonce) 70%, transparent);
}

/* cartes d'information */
.infos { display: grid; gap: 10px; }
.info {
  padding: 24px; border-radius: 22px;
  background: var(--carte);
  box-shadow: inset 0 1px 0 var(--carte-reflet), inset 0 0 0 1px rgb(var(--ligne) / .1), 0 18px 34px -26px rgba(31,27,21,.45), 0 4px 10px -8px rgba(31,27,21,.2);
}
.info h3 { font-family: var(--f-titre); font-size: 1.35rem; color: var(--c-mousse); margin-bottom: 8px; }
.info p { margin: 0; font-size: .98rem; color: var(--g2); }
@media (min-width: 700px) { .infos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.citation-douce {
  font-family: var(--f-titre); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); line-height: 1.3;
  color: var(--c-brume); max-width: 30em; margin: 22px 0 0;
}

/* ---------- Tarifs ---------- */
.grille-tarifs { border-top: 1px solid rgb(var(--ligne) / .25); }
.ligne-tarif { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid rgb(var(--ligne) / .16); }
.ligne-tarif__nom { font-family: var(--f-titre); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.65rem); color: var(--c-mousse); }
.ligne-tarif__detail { grid-column: 1; font-size: .95rem; color: var(--g4); }
.ligne-tarif__prix { grid-column: 2; grid-row: 1 / 3; font-family: var(--f-titre); font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.8rem); color: var(--c-olive); white-space: nowrap; }
.msp { display: grid; gap: 10px; margin-top: 34px; }
@media (min-width: 700px) { .msp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.msp .info { background: rgba(241,240,234,.07); box-shadow: inset 0 0 0 1px rgba(241,240,234,.16); }
.msp .info h3 { color: var(--c-ambre-clair); }
.msp .info p { color: #DCE2D0; }

/* ---------- Contact ---------- */
.contact-grille { display: grid; gap: 10px; }
.carte-rdv {
  position: relative; overflow: clip; border-radius: var(--rayon); padding: clamp(28px, 4vw, 48px);
  color: var(--c-brume);
  background:
    radial-gradient(70% 70% at 100% 0%, color-mix(in srgb, var(--c-ambre) 34%, transparent), transparent 70%),
    linear-gradient(160deg, var(--c-olive), var(--c-mousse));
  box-shadow: 0 30px 60px -36px rgba(20,24,14,.8);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
}
.carte-rdv h2 { font-family: var(--f-titre); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); margin-bottom: 10px; }
.carte-rdv p { max-width: 30rem; color: rgba(241,240,234,.92); }
.carte-rdv__tel { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; }
.carte-rdv__tel a { color: var(--c-brume); display: inline-flex; min-height: 44px; align-items: center; }
.plan { position: relative; overflow: clip; border-radius: var(--rayon); min-height: 320px; background: var(--c-sauge-claire); }
.plan svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plan__legende { position: absolute; left: 14px; bottom: 14px; margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(241,240,234,.9); font-family: var(--f-mono); font-size: .72rem; color: var(--c-mousse); }
.coord { display: grid; gap: 28px; }
.coord h3 { font-family: var(--f-titre); font-size: 1.5rem; color: var(--c-mousse); margin-bottom: 8px; }
.coord p { margin-bottom: 6px; max-width: 32rem; }
@media (min-width: 960px) {
  .contact-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .coord { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* formulaire */
.formulaire { display: grid; gap: 20px; max-width: 40rem; }
.champ { display: grid; gap: 6px; border-radius: 14px; }
.champ > label, .champ > legend { font-weight: 600; color: var(--c-mousse); padding: 0; }
.champ__etat { font-weight: 400; font-size: .85rem; color: var(--g6); margin-left: 6px; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"], .champ select, .champ textarea {
  width: 100%; min-height: 52px; padding: 12px 16px;
  font: inherit; font-size: 16px; color: var(--c-encre);
  background: var(--champ-fond); border: 1px solid rgb(var(--ligne) / .3); border-radius: 14px;
  box-shadow: inset 0 2px 4px rgba(31,27,21,.05);
  transition: border-color .3s, box-shadow .3s;
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-mousse) 50%), linear-gradient(135deg, var(--c-mousse) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--c-olive); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-ambre) 35%, transparent); }
.champ [aria-invalid="true"] { border-color: var(--erreur); }
.champ__erreur { margin: 0; color: var(--erreur); font-size: .92rem; font-weight: 500; }
.champ--case { display: flex; gap: 12px; align-items: flex-start; }
.champ--case input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--c-mousse); flex: none; }
.champ--case label { flex: 1; min-width: 0; font-weight: 400; color: var(--c-encre); }
.champ--case .champ__erreur { flex-basis: 100%; }
.champ--case { flex-wrap: wrap; }
fieldset.champ { border: 0; margin: 0; padding: 0; min-width: 0; }
.choix--clair span { border-color: rgb(var(--ligne) / .35); color: var(--c-mousse); }
.choix--clair:hover span { border-color: var(--c-mousse); }
.choix--clair input:checked + span { background: var(--c-mousse); color: var(--c-brume); border-color: var(--c-mousse); }
.illumine:not(.theme) { animation: illumine-champ 2.2s ease; }
@keyframes illumine-champ { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 25% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-ambre) 45%, transparent); } }
.resume-erreurs { margin: 0; padding: 14px 18px; border-radius: 14px; background: #F6E3DE; color: #7A2A1C; font-weight: 500; }
.confirmation { padding: clamp(24px, 4vw, 40px); border-radius: 22px; background: var(--c-sauge-claire); box-shadow: inset 0 0 0 1px rgb(var(--ligne) / .15); max-width: 40rem; }
.confirmation.arrive { animation: arrive .8s cubic-bezier(.34,1.4,.64,1) both; }
.confirmation h3 { font-family: var(--f-titre); font-size: 2rem; color: var(--c-mousse); margin-bottom: 10px; outline: none; }
.confirmation__demo { font-weight: 600; color: var(--c-mousse); }

/* ---------- Mentions légales ---------- */
.mentions-texte h2 { font-family: var(--f-titre); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: var(--c-mousse); margin: 44px 0 12px; }
.mentions-texte section:first-child h2 { margin-top: 0; }
.mentions-texte p { max-width: 42rem; }
.page-tete h1 { text-shadow: none; }

/* Sur téléphone, le bouton flottant ne doit jamais cacher un champ ni un lien */
@media (max-width: 959px) {
  html { scroll-padding-bottom: 96px; scroll-padding-top: 90px; }
  body:has(.formulaire :focus) .rdv-mobile, body:has(.confirmation:not([hidden])) .rdv-mobile { translate: 0 160%; opacity: 0; pointer-events: none; }
}

@media (max-width: 959px) { .page-tete__aube { min-height: 130px; } }

/* ---------- Petits détails ---------- */
/* sélection de texte aux couleurs du site */
::selection { background: color-mix(in srgb, var(--c-ambre-clair) 70%, white); color: var(--c-terre); }

/* bas du pied : droits et retour en haut */
.pied__bas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px;
  margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(241,240,234,.14);
  font-size: .88rem; color: #C3CCB3;
}
.pied__bas p { margin: 0; }
.pied__remonter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.pied__remonter svg { width: 15px; height: 15px; transition: translate .4s var(--ease); }
.pied__remonter:hover { text-decoration: underline; }
.pied__remonter:hover svg { translate: 0 -3px; }

/* boutons « Copier » discrets à côté du téléphone et de l'e-mail */
.carte-rdv__tel { flex-direction: column; gap: 2px; }
.copiable { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.copier {
  /* zone tactile de 44 px, pastille visible plus petite */
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--c-brume); font-family: var(--f-mono); font-size: .72rem; letter-spacing: .02em;
}
.copier span {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px;
  background: rgba(241,240,234,.1); box-shadow: inset 0 0 0 1px rgba(241,240,234,.28);
  transition: background .3s, box-shadow .3s, color .3s;
}
.copier:hover span { background: rgba(241,240,234,.18); }
.copier.fait span { background: var(--c-ambre-clair); box-shadow: none; color: var(--c-terre); }
.copier:focus-visible { outline: none; }
.copier:focus-visible span { outline: 3px solid var(--c-ambre); outline-offset: 2px; }

/* impression : seulement le contenu, sans décor */
@media print {
  html, body { background: #fff !important; }
  body { color: #000; font-size: 11pt; }
  .demo-bandeau, .entete, .menu, .rdv-mobile, .progression, .rideau, .dialogue, .scene, .badge-defiler,
  .feuille__voile, .halo, .orbite, .copier, .pied__remonter, .guide, .evitement { display: none !important; }
  .feuille { transform: none !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; background: #fff !important; color: #000 !important; }
  .feuille * { color: #000 !important; }
  [data-reveal], .m-i, .lum { opacity: 1 !important; transform: none !important; translate: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  h2, h3 { break-after: avoid; }
  section { break-inside: auto; }
}

/* page introuvable */
.introuvable__liens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.introuvable__liens a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  text-decoration: none; color: var(--c-mousse); box-shadow: inset 0 0 0 1px rgb(var(--ligne) / .35);
  transition: background .3s;
}
.introuvable__liens a:hover { background: var(--survol); }

/* ---------- Respiration guidée (accueil) ---------- */
.respiration__grille { display: grid; gap: clamp(36px, 6vw, 80px); align-items: center; }
.respiration__texte p { max-width: 30rem; margin-top: 22px; font-size: 1.08rem; }
.respiration__note { font-size: .92rem !important; color: var(--g5); }
.respiration__exercice { display: grid; justify-items: center; text-align: center; gap: 6px; }
.respiration__soleil { position: relative; width: min(78vw, 340px); aspect-ratio: 1; }
.respiration__soleil svg { width: 100%; height: 100%; overflow: visible; }
.respiration__anneau { stroke: color-mix(in srgb, var(--c-olive) 45%, transparent); stroke-width: 1; stroke-dasharray: 0 7; stroke-linecap: round; stroke-width: 2.4; }
.respiration__anneau--2 { stroke-dasharray: none; stroke-width: 1; stroke: color-mix(in srgb, var(--c-olive) 25%, transparent); }
.respiration__astre {
  transform-box: fill-box; transform-origin: center;
  transform: scale(.42);
  transition: transform var(--souffle, 5s) cubic-bezier(.45, 0, .55, 1);
}
.respiration__exercice.inspire .respiration__astre { transform: scale(1); }
.respiration__secondes {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--f-mono); font-size: .95rem; color: var(--c-ambre-fonce);
}
.respiration__phase { margin: 10px 0 0; font-family: var(--f-titre); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.1; color: var(--c-mousse); min-height: 1.2em; }
.respiration__compteur { margin: 0 0 14px; min-height: 1.4em; font-family: var(--f-mono); font-size: .8rem; color: var(--c-olive); }
@media (min-width: 960px) {
  .respiration__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  /* sans mouvement : le soleil reste fixe, on suit le texte et le décompte */
  .respiration__astre, .respiration__exercice.inspire .respiration__astre { transform: scale(.7); transition: none; }
}

/* ---------- Simulateur de reste à charge (tarifs) ---------- */
.simulateur__grille { display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; }
.simulateur__tete p { max-width: 28rem; margin-top: 22px; font-size: 1.08rem; }
.simulateur__carte {
  display: grid; gap: 22px;
  padding: clamp(22px, 4vw, 36px); border-radius: 28px;
  background: color-mix(in srgb, var(--c-sauge-claire) 55%, var(--c-brume));
  box-shadow: inset 0 0 0 1px rgb(var(--ligne) / .12), 0 30px 60px -40px rgba(31,27,21,.45);
}
.simulateur__carte fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.simulateur__carte legend { margin-bottom: 10px; }
.simulateur__carte .choix span { min-height: 44px; }
.simulateur__carte input[type="number"] {
  width: 100%; max-width: 12rem; min-height: 48px; padding: 0 14px; border-radius: 12px;
  border: 1.5px solid rgb(var(--ligne) / .3); background: var(--champ-fond); color: var(--c-encre); font: inherit; font-size: 1.05rem;
}
.simulateur__carte input[type="number"]:focus { outline: none; border-color: var(--c-olive); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-ambre) 35%, transparent); }
.simulateur__aide { margin: 0; font-size: .88rem; color: var(--g5); }
.pas-a-pas { display: flex; align-items: center; gap: 8px; }
.pas-a-pas input[type="number"] { max-width: 5.5rem; text-align: center; -moz-appearance: textfield; }
.pas-a-pas input::-webkit-inner-spin-button, .pas-a-pas input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pas-a-pas__btn {
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--c-brume); color: var(--c-mousse); font-size: 1.4rem; line-height: 1;
  box-shadow: inset 0 0 0 1px rgb(var(--ligne) / .3); transition: background .3s;
}
.pas-a-pas__btn:hover { background: var(--champ-fond); }
.simulateur__resultat { padding-top: 18px; border-top: 1px solid rgb(var(--ligne) / .18); }
.simulateur__lignes { margin: 0; display: grid; gap: 8px; }
.simulateur__lignes > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.simulateur__lignes dt { color: var(--g3); }
.simulateur__lignes dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--c-mousse); font-weight: 600; white-space: nowrap; }
.simulateur__reste { margin-top: 8px; padding-top: 14px; border-top: 1px dashed rgb(var(--ligne) / .3); }
.simulateur__reste dt { font-weight: 600; color: var(--c-mousse); }
.simulateur__reste dd { font-family: var(--f-titre); font-weight: 400; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); color: var(--c-ambre-fonce); line-height: 1; }
.simulateur__reste small { font-family: var(--f-texte); font-size: .85rem; color: var(--g5); }
.simulateur__total { margin: 14px 0 0; font-weight: 500; color: var(--c-mousse); }
.simulateur__limite { margin: 8px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(227,166,79,.16); font-size: .92rem; }
.simulateur__carte .note-demo { margin: 0; }
@media (min-width: 960px) {
  .simulateur__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .simulateur__tete { position: sticky; top: 120px; }
}

/* =====================================================================
   Mode crépuscule (sombre)
   Automatique si le téléphone ou l'ordinateur est en mode sombre,
   ou choisi avec le bouton lune de l'en-tête.
   Principe : les surfaces claires passent au vert de nuit, tandis que
   les éléments déjà sombres (boutons, pied, panneaux verts) gardent
   leurs couleurs d'origine, mémorisées dans --o-*.
   ===================================================================== */
:root {
  --o-mousse: var(--c-mousse); --o-olive: var(--c-olive); --o-sauge: var(--c-sauge);
  --o-sauge-claire: var(--c-sauge-claire); --o-brume: var(--c-brume); --o-ambre-fonce: var(--c-ambre-fonce);
  --o-encre: var(--c-encre);
}
html.crepuscule { color-scheme: dark; }
.crepuscule body {
  --c-brume: #191D15;
  --c-sauge-claire: #232A1D;
  --c-sauge: #3A4530;
  --c-mousse: #ECE8DC;
  --c-olive: #BAC590;
  --c-encre: #DEDCD1;
  --c-ambre-fonce: #EDBE73;
  --ligne: 236 232 220;
  --g1: #D6D8CB; --g2: #CDD0C2; --g3: #C7CBBB; --g4: #BFC4B3; --g5: #B8BDAC; --g6: #AEB3A2;
  --carte: rgba(255,255,255,.04); --carte-reflet: rgba(255,255,255,.06);
  --champ-fond: #12150F; --survol: rgba(255,255,255,.08); --erreur: #F2A493;
}
/* éléments qui restent comme en journée */
.crepuscule :is(.btn, .guide, .carte-rdv, .final__panneau--contact, .menu, .bloc--sombre, .pied,
  .tarifs-accueil, .ouverture__grille, .capsule, .page-tete__aube, .demo-bandeau, .copier, .burger) {
  --c-mousse: var(--o-mousse); --c-olive: var(--o-olive); --c-sauge: var(--o-sauge);
  --c-sauge-claire: var(--o-sauge-claire); --c-brume: var(--o-brume); --c-ambre-fonce: var(--o-ambre-fonce);
  --c-encre: var(--o-encre);
  --ligne: 47 58 38;
}
/* en-tête en verre fumé */
.crepuscule .entete__barre {
  background: rgba(25,29,21,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06), 0 12px 30px -16px rgba(0,0,0,.7);
}
/* le dessin de l'accueil passe à la tombée du jour */
.crepuscule .scene { filter: brightness(.72) saturate(.9); }
.crepuscule .page-tete__aube { filter: brightness(.6) saturate(.9); }
.crepuscule .cercle { background: radial-gradient(closest-side, rgba(255,255,255,.07), rgba(255,255,255,0)); }
.crepuscule .ouverture, .crepuscule .page-tete { background: var(--c-brume); }
.crepuscule .plan__legende { background: rgba(25,29,21,.88); }
.crepuscule .plan svg { filter: brightness(.55) saturate(.8); }
.crepuscule .feuille { box-shadow: 0 -1px 0 rgba(255,255,255,.07) inset, 0 -26px 50px -30px rgba(0,0,0,.8); }
.crepuscule .final__panneau--aube {
  background:
    radial-gradient(90% 80% at 85% 110%, color-mix(in srgb, var(--c-ambre) 70%, transparent) 0%, transparent 60%),
    linear-gradient(200deg, #1E231A 10%, #3A3221 70%, #6B4F25 100%);
}
.crepuscule .resume-erreurs { background: #3A1E18; color: #F6D2C9; }
.crepuscule .theme__note, .crepuscule .simulateur__limite { background: rgba(227,166,79,.12); }
.crepuscule ::selection { background: var(--c-ambre-clair); color: var(--c-terre); }

/* bouton lune / soleil de l'en-tête */
.theme-bascule {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: transparent; color: var(--c-mousse);
  transition: background .3s;
}
.theme-bascule:hover { background: rgb(var(--ligne) / .1); }
.theme-bascule svg { width: 20px; height: 20px; }
.theme-bascule .icone-soleil { display: none; }
.crepuscule .theme-bascule .icone-lune { display: none; }
.crepuscule .theme-bascule .icone-soleil { display: block; color: var(--c-ambre-clair); }

/* très petits téléphones (320 px) : l'en-tête garde le bouton lune sans déborder */
@media (max-width: 359px) {
  .entete__barre { gap: 4px; padding-left: 10px; }
  .marque__nom { font-size: 1.12rem; }
}

/* ---------- Demande de rendez-vous (agenda intégré) ---------- */
.rdv__piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rdv__grille { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
.rdv__etapes { display: grid; gap: clamp(36px, 5vw, 56px); min-width: 0; }
.rdv__etape { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 18px; }
.rdv__titre {
  display: flex; align-items: center; gap: 14px; padding: 0; margin: 0 0 4px;
  font-family: var(--f-titre); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.1; color: var(--c-mousse);
}
.rdv__num {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1rem; background: radial-gradient(circle at 40% 35%, #FFF6DD, var(--c-ambre-clair) 70%); color: var(--c-terre);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-ambre) 16%, transparent);
}
.rdv__etape .champ legend { font-weight: 600; color: var(--c-mousse); margin-bottom: 10px; padding: 0; }
.rdv__etape fieldset.champ { border: 0; margin: 0; padding: 0; min-width: 0; }
.rdv__etape .choix span { min-height: 44px; }

/* navigation entre les semaines */
.semaine-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.semaine-nav__titre { margin: 0; font-weight: 600; color: var(--c-mousse); text-align: center; }
.semaine-nav__btn {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: transparent; color: var(--c-mousse); box-shadow: inset 0 0 0 1px rgb(var(--ligne) / .3); transition: background .3s;
}
.semaine-nav__btn svg { width: 16px; height: 16px; }
.semaine-nav__btn:hover:not(:disabled) { background: var(--survol); }
.semaine-nav__btn:disabled { opacity: .35; cursor: default; }

/* les jours : une rangée qui défile sur téléphone, une grille sur ordinateur */
.jours {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
  margin: 0 calc(var(--marge) * -1); padding: 4px var(--marge) 10px; scrollbar-width: thin;
}
.jours li { flex: none; scroll-snap-align: start; }
.jour {
  width: 74px; min-height: 108px; padding: 10px 6px; border-radius: 18px; border: 0; cursor: pointer;
  display: grid; justify-items: center; align-content: center; gap: 2px;
  background: var(--carte); color: var(--c-mousse); font: inherit;
  box-shadow: inset 0 0 0 1px rgb(var(--ligne) / .2);
  transition: background .3s, box-shadow .3s, translate .3s var(--ease);
}
.jour__nom { font-size: .78rem; font-weight: 600; text-transform: capitalize; }
.jour__num { font-family: var(--f-titre); font-size: 1.75rem; line-height: 1; }
.jour__mois { font-size: .74rem; color: var(--g5); }
.jour__etat { margin-top: 4px; font-family: var(--f-mono); font-size: .66rem; color: var(--c-olive); }
.jour:hover:not(:disabled) { translate: 0 -2px; box-shadow: inset 0 0 0 1px rgb(var(--ligne) / .5); }
.jour.est-choisi { background: var(--c-mousse); color: var(--c-brume); box-shadow: 0 12px 24px -14px rgba(31,27,21,.7); }
.jour.est-choisi .jour__mois, .jour.est-choisi .jour__etat { color: var(--c-ambre-clair); }
.jour:disabled { cursor: default; opacity: .5; background: transparent; box-shadow: inset 0 0 0 1px rgb(var(--ligne) / .1); }
@media (min-width: 700px) {
  .jours { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .jour { width: 100%; }
}

/* les heures */
.heures-zone { min-height: 120px; }
.heures-titre { margin: 6px 0 4px; font-weight: 600; font-size: 1rem; color: var(--c-mousse); text-transform: none; }
.heures-titre::first-letter { text-transform: uppercase; }
.heures-aide { margin: 0 0 12px; font-size: .92rem; color: var(--g4); min-height: 1.2em; }
.heures { display: flex; flex-wrap: wrap; gap: 8px; }
.heure {
  min-width: 84px; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer;
  background: transparent; color: var(--c-mousse); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgb(var(--ligne) / .35); transition: background .3s, color .3s, box-shadow .3s;
}
.heure:hover { box-shadow: inset 0 0 0 1.5px var(--c-mousse); }
.heure[aria-pressed="true"] { background: var(--c-mousse); color: var(--c-brume); box-shadow: 0 10px 20px -12px rgba(31,27,21,.7); }
.jour:focus-visible, .heure:focus-visible, .semaine-nav__btn:focus-visible { outline: 3px solid var(--c-ambre); outline-offset: 3px; }

/* récapitulatif et envoi */
.recap {
  display: grid; gap: 14px; padding: clamp(22px, 3vw, 30px); border-radius: 26px;
  background: color-mix(in srgb, var(--c-sauge-claire) 60%, var(--c-brume));
  box-shadow: inset 0 0 0 1px rgb(var(--ligne) / .12), 0 30px 60px -40px rgba(31,27,21,.45);
}
.recap__titre { margin: 0; font-family: var(--f-mono); font-size: .76rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--c-olive); }
.recap__creneau { margin: 0; font-family: var(--f-titre); font-size: clamp(1.45rem, 1.2rem + .8vw, 1.85rem); line-height: 1.15; color: var(--c-mousse); }
.recap__detail { margin: 4px 0 0; color: var(--g3); }
.recap__vide { margin: 0; color: var(--g4); }
.recap__tarif { margin: 0; padding-top: 12px; border-top: 1px dashed rgb(var(--ligne) / .3); font-size: .92rem; color: var(--g3); }
.recap .btn { width: 100%; }
.recap .btn:disabled { opacity: .6; cursor: progress; }
.recap__note { margin: 0; font-size: .84rem; color: var(--g5); }
@media (min-width: 960px) {
  .rdv__grille { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
  .recap { position: sticky; top: 110px; }
}

.confirmation--rdv { max-width: 44rem; }
.confirmation--rdv h2 { font-family: var(--f-titre); font-weight: 400; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); color: var(--c-mousse); margin: 0 0 10px; outline: none; }
.confirmation__creneau { font-family: var(--f-titre); font-size: 1.35rem; color: var(--c-ambre-fonce); }

/* sur la page de rendez-vous, le bouton flottant ferait doublon */
[data-page="rdvPage"] .rdv-mobile { display: none; }
.crepuscule .jour.est-choisi .jour__mois, .crepuscule .jour.est-choisi .jour__etat { color: var(--c-brume); }

/* ---------- Mode Doctolib + site : les trois façons de réserver ---------- */
.choix-rdv .titre-section { margin-bottom: clamp(28px, 4vw, 48px); }
.choix-rdv__liste { display: grid; gap: 12px; }
.choix-rdv__carte {
  position: relative; display: grid; align-content: start; gap: 10px;
  padding: clamp(22px, 3vw, 32px); border-radius: 26px;
  background: var(--carte); box-shadow: inset 0 0 0 1px rgb(var(--ligne) / .16);
}
.choix-rdv__carte h3 { margin: 0; font-family: var(--f-titre); font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); line-height: 1.1; color: var(--c-mousse); }
.choix-rdv__carte p { margin: 0; color: var(--g2); }
.choix-rdv__carte .lien { margin-top: 6px; justify-self: start; }
.choix-rdv__carte--principale {
  color: var(--c-brume);
  background:
    radial-gradient(70% 70% at 100% 0%, color-mix(in srgb, var(--c-ambre) 34%, transparent), transparent 70%),
    linear-gradient(160deg, var(--c-olive), var(--c-mousse));
  box-shadow: 0 30px 60px -36px rgba(20,24,14,.8);
}
.choix-rdv__carte--principale h3 { color: var(--c-brume); }
.choix-rdv__carte--principale p { color: rgba(241,240,234,.9); }
.choix-rdv__carte--principale .btn { margin-top: 8px; justify-self: start; }
.choix-rdv__badge {
  justify-self: start; padding: 4px 10px; border-radius: 999px;
  font-family: var(--f-mono); font-size: .7rem !important; letter-spacing: .03em;
  background: var(--c-ambre-clair); color: var(--c-terre) !important;
}
.crepuscule .choix-rdv__carte--principale {
  --c-mousse: var(--o-mousse); --c-olive: var(--o-olive); --c-brume: var(--o-brume);
}
@media (min-width: 960px) {
  .choix-rdv__liste { grid-template-columns: 1.25fr 1fr 1fr; }
}
.rdv__intro-site {
  margin: 0 0 clamp(28px, 4vw, 44px); padding: 14px 18px; border-radius: 16px; max-width: 46rem;
  background: rgba(227,166,79,.14); box-shadow: inset 0 0 0 1px rgba(143,85,22,.2);
}