@charset "UTF-8";
/* ==========================================================================
   NOMADE SPACE — FEUILLE DE STYLE UNIQUE
   ========================================================================== */

/* ==========================================================================
   0. LES POLICES, SERVIES PAR CE SITE        (auto-hébergées le 02/10/2026)
   --------------------------------------------------------------------------
   ⚠️ POURQUOI ELLES NE VIENNENT PLUS DE GOOGLE. Jusqu'ici, inc/head.php
   appelait fonts.googleapis.com. Un appel de police n'est pas un simple
   téléchargement : le navigateur du visiteur se connecte à un serveur de
   Google et lui transmet son adresse IP, son navigateur et la page
   consultée — avant tout consentement, et sans qu'on puisse l'en empêcher.
   C'est ce qui a valu une condamnation à un site allemand en 2022.

   ⚠️ ET ÇA CONTREDISAIT LE SITE LUI-MÊME. La page Protection des données
   affirme qu'aucune donnée ne part chez un tiers et qu'aucun bandeau de
   consentement n'est nécessaire. C'est cette affirmation, bien plus que le
   risque juridique, qui rendait l'auto-hébergement obligatoire : on ne
   publie pas une promesse que le code dément à chaque chargement de page.

   ⚠️ LA LICENCE L'AUTORISE. Archivo et Instrument Serif sont publiées sous
   SIL Open Font License, qui permet explicitement la redistribution et
   l'hébergement sur son propre serveur.

   ⚠️ LES SOUS-ENSEMBLES VIETNAMIENS ONT ÉTÉ ÉCARTÉS, les latins et
   latins étendus conservés. Six fichiers, 243 Ko au total, dont le
   navigateur ne télécharge que ce dont la page a besoin : c'est le rôle
   de `unicode-range`, qu'il ne faut pas supprimer en croyant simplifier.

   ⚠️ ARCHIVO EST UNE POLICE VARIABLE. `font-weight: 400 700` et
   `font-stretch: 62% 125%` ne sont pas des valeurs approximatives : ce
   sont les bornes entre lesquelles le navigateur interpole. Les remplacer
   par une valeur unique casserait toutes les graisses du site.
   ========================================================================== */

/* --- Archivo (variable) — texte courant ---------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Instrument Serif — titres et chiffres en vedette --------------------- */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ⚠️ L'ITALIQUE EST NÉCESSAIRE, il n'est pas décoratif : le titre de
   l'accueil porte un <i> dans sections/01-hero.php. Sans ces deux
   fichiers, le navigateur fabriquerait un faux italique en penchant les
   lettres — visiblement plus laid qu'un vrai dessin italique, et sur le
   premier mot que lit un visiteur. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============ 1. JETONS ============ */
:root{
  --nuit:#141312;
  --nuit-2:#1E1C1A;
  --clair:#F6F6F4;
  --clair-2:#EDEBE5;

  --creme:#F6F6F4;
  --creme-doux:#B3B0A9;
  --creme-faible:#8A8780;

  --encre:#1B1B19;
  --encre-doux:#565450;
  --encre-faible:#6B6963;

  --rouge:#C4433E;
  --rouge-fonce:#A32D2D;
  --rouge-clair:#DB6660;

  --ligne:rgba(246,246,244,0.14);
  --ligne-f:rgba(246,246,244,0.08);
  --ligne-c:rgba(27,27,25,0.14);
  --ligne-cf:rgba(27,27,25,0.08);

  --doux:cubic-bezier(.16,.85,.3,1);
  --r:3px;

  --voile:0.45;
  --zoom:1.08;
  --pan:1.8%;
}

/* ============ 2. BASE ============ */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--nuit);color:var(--creme);
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
  font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;height:auto;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
:focus-visible{outline:2px solid var(--rouge-clair);outline-offset:4px;}

h1,h2,.display{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  letter-spacing:-0.015em;line-height:1.05;text-wrap:balance;}
h1{font-size:clamp(2.3rem,4.4vw,3.7rem);}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem);}
h3{font-family:'Archivo',sans-serif;font-size:1.0625rem;font-weight:600;letter-spacing:-0.005em;}
em.ac{font-style:italic;color:var(--rouge-clair);}

.wrap{max-width:1320px;margin:0 auto;padding:0 3rem;width:100%;}
.col{max-width:760px;}
.num{font-variant-numeric:tabular-nums;}

.kicker{font-size:0.6875rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--creme-doux);display:flex;align-items:center;gap:0.8rem;}
.kicker::before{content:'';width:26px;height:1px;background:var(--rouge-clair);flex:none;}
.kicker.centre{justify-content:center;}
.kicker.centre::after{content:'';width:26px;height:1px;background:var(--rouge-clair);flex:none;}

.skip{position:fixed;left:-9999px;top:0;background:var(--rouge);color:var(--creme);
  padding:0.9rem 1.3rem;z-index:400;font-weight:600;}
.skip:focus{left:1rem;top:1rem;}

/* ============ 3. EN-TÊTE ============ */
.topbar{position:fixed;top:0;left:0;right:0;z-index:200;padding:1.6rem 0;
  transition:background .4s ease,padding .4s ease;}
.topbar::before{content:'';position:absolute;inset:-1.6rem 0 auto;height:200px;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,19,18,0.92) 0%,rgba(20,19,18,0.72) 28%,rgba(20,19,18,0.34) 62%,rgba(20,19,18,0) 100%);
  transition:opacity .4s ease;}
.topbar.fixee::before{opacity:0;}
.topbar.fixee{background:rgba(20,19,18,0.85);backdrop-filter:blur(14px);
  padding:1rem 0;border-bottom:1px solid var(--ligne-f);}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;}
.logo{display:flex;align-items:center;gap:0.7rem;}
.logo svg{width:30px;height:30px;flex:none;color:var(--creme);}
.logo svg .pt{fill:var(--rouge-clair);}
.logo .mots{display:flex;flex-direction:column;line-height:1;}
.logo b{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.28rem;
  text-transform:uppercase;letter-spacing:0.075em;}
.logo i{font-style:normal;font-size:0.5rem;font-weight:600;letter-spacing:0.36em;
  color:var(--rouge-clair);text-transform:uppercase;margin-top:0.34rem;}
.topnav{display:flex;gap:2rem;font-size:0.875rem;font-weight:500;}
.topnav a{position:relative;padding:0.2rem 0;color:var(--creme-doux);transition:color .25s ease;}
.topnav a:hover,.topnav a[aria-current]{color:var(--creme);}
.topnav a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--rouge-clair);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--doux);}
.topnav a:hover::after,.topnav a[aria-current]::after{transform:scaleX(1);transform-origin:left;}
.top-actions{display:flex;align-items:center;gap:1.6rem;}
.menu-toggle{display:flex;align-items:center;gap:0.7rem;font-size:0.75rem;font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;}
.menu-toggle .bars{display:block;width:24px;}
.menu-toggle .bars i{display:block;height:1.5px;background:var(--creme);margin:5px 0;}

.menu-plein{position:fixed;inset:0;z-index:190;background:var(--nuit-2);display:flex;
  flex-direction:column;justify-content:center;padding:6rem 3rem 3rem;
  clip-path:inset(0 0 100% 0);transition:clip-path .6s cubic-bezier(.76,0,.24,1);pointer-events:none;}
.menu-plein.ouvert{clip-path:inset(0 0 0 0);pointer-events:auto;}
.menu-plein nav{max-width:1320px;margin:0 auto;width:100%;}
.menu-plein a{display:block;font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.7rem,4.4vw,3rem);line-height:1.3;padding:0.4rem 0;
  border-bottom:1px solid var(--ligne-f);transition:color .3s ease,padding-left .4s ease;}
.menu-plein a:hover{color:var(--rouge-clair);padding-left:1.2rem;}
.menu-foot{max-width:1320px;margin:2.5rem auto 0;width:100%;display:flex;gap:3rem;
  flex-wrap:wrap;font-size:0.9375rem;color:var(--creme-doux);}

/* ============ 4. BOUTONS ============ */
.btn{display:inline-flex;align-items:center;gap:0.7rem;background:var(--rouge);color:var(--creme);
  padding:0.95rem 1.7rem;font-size:0.8125rem;font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;border-radius:100px;transition:background .3s ease,transform .3s ease,color .3s ease;}
.btn:hover{background:var(--creme);color:var(--nuit);transform:translateY(-1px);}
.btn svg{width:14px;height:14px;flex:none;transition:transform .3s ease;}
.btn:hover svg{transform:translateX(3px);}
.btn-sm{padding:0.7rem 1.3rem;font-size:0.75rem;}
.btn-ghost{background:none;border:1px solid var(--ligne);color:var(--creme);}
.btn-ghost:hover{background:var(--creme);color:var(--nuit);border-color:var(--creme);}
.lien-fleche{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.9375rem;font-weight:600;
  color:var(--rouge-clair);border-bottom:1px solid rgba(219,102,96,0.35);padding-bottom:2px;
  transition:border-color .25s ease;}
.lien-fleche:hover{border-bottom-color:var(--rouge-clair);}
.lien-fleche svg{width:13px;height:13px;transition:transform .3s ease;}
.lien-fleche:hover svg{transform:translateX(3px);}

/* ============ 5. HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:stretch;overflow:hidden;}
.hero .cote{width:52%;display:flex;align-items:center;position:relative;z-index:3;background:var(--nuit);}
.hero .cote::after{content:'';position:absolute;right:-1px;top:0;bottom:0;width:1px;background:var(--ligne);}
.hero .dedans{padding:8rem 4rem 7rem 3rem;max-width:640px;margin-left:auto;}
.hero .sub{color:var(--creme-doux);font-size:1.125rem;max-width:40ch;margin:1.5rem 0 2.2rem;}
.hero-cta{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;}
.reassure{margin-top:1.3rem;font-size:0.8125rem;color:var(--creme-faible);display:flex;
  gap:1.3rem;flex-wrap:wrap;}
.reassure i{font-style:normal;display:inline-flex;align-items:center;gap:0.45rem;}
.reassure b{color:var(--creme-doux);font-weight:600;}
.reassure svg{width:12px;height:12px;color:var(--rouge-clair);flex:none;}

.hero .photo{width:48%;position:relative;overflow:hidden;background:var(--nuit);}
.pan{position:absolute;inset:0;transform:scale(var(--zoom)) translateX(var(--pan));
  transition:transform 2.1s var(--doux) .1s;}
.on .pan{transform:scale(1) translateX(0);}
.img{position:absolute;inset:0;background-position:center 34%;background-size:cover;
  background-repeat:no-repeat;filter:saturate(0.82) contrast(0.94);transition:filter 1.9s ease .1s;}
.on .img{filter:saturate(1) contrast(1.05);}
.hero.on.respire .img{animation:respire 46s ease-in-out 2.6s infinite alternate;}
@keyframes respire{from{transform:scale(1);}to{transform:scale(1.035) translate3d(-0.6%,-0.4%,0);}}
.lum{position:absolute;inset:0;z-index:2;background:var(--nuit);opacity:var(--voile);
  transition:opacity 1.65s var(--doux) .1s;}
.on .lum{opacity:0;}
.hero .photo::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,19,18,0.30) 0%,rgba(20,19,18,0) 14%),
             linear-gradient(180deg,rgba(20,19,18,0.55) 0%,rgba(20,19,18,0.18) 8%,rgba(20,19,18,0) 16%);}

.ln{display:block;overflow:hidden;}
.ln > i{display:block;font-style:normal;transform:translateY(105%);
  transition:transform 1s var(--doux) .38s;}
.on .ln > i{transform:none;}
.on .ln:nth-child(2) > i{transition-delay:.47s;}
.on .ln:nth-child(3) > i{transition-delay:.56s;}
.hero .kicker::before{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--doux) .45s;}
.hero.on .kicker::before{transform:scaleX(1);}
.fade{opacity:0;transform:translateY(16px);transition:opacity .9s ease .7s,transform .9s var(--doux) .7s;}
.on .fade{opacity:1;transform:none;}
.fade.d2{transition-delay:.85s;}
.fade.d3{transition-delay:1s;}

.hero-court{padding:11rem 0 5rem;position:relative;overflow:hidden;min-height:0;display:block;}
.fil{font-size:0.8125rem;color:var(--creme-faible);margin-bottom:1.6rem;}
.fil a:hover{color:var(--creme);}
.fil span{margin:0 0.5rem;opacity:0.5;}

/* ============ 6. SECTIONS COMMUNES ============ */
section{position:relative;}
.pad{padding:7rem 0;}
.pad-sm{padding:4.5rem 0;}
.tete{max-width:52ch;margin-bottom:3.5rem;}
.tete h2{margin-top:1.3rem;}
.tete p{margin-top:1.4rem;color:var(--creme-doux);font-size:1.125rem;}
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--doux),transform .9s var(--doux);}
.reveal.on{opacity:1;transform:none;}

.geo{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);}
.geo .wrap{padding-top:3rem;padding-bottom:3rem;display:grid;grid-template-columns:190px 1fr;
  gap:3rem;align-items:start;}
.geo p{color:var(--creme-doux);max-width:74ch;}
.geo b{color:var(--creme);font-weight:600;}

.clair{background:var(--clair);color:var(--encre);}
.clair .kicker{color:var(--encre-faible);}
.clair .kicker::before,.clair .kicker.centre::after{background:var(--rouge-fonce);}
.clair .tete p{color:var(--encre-doux);}
.clair .btn{background:var(--rouge-fonce);color:var(--clair);}
.clair .btn:hover{background:var(--encre);color:var(--clair);}
.clair .lien-fleche{color:var(--rouge-fonce);border-bottom-color:rgba(163,45,45,0.35);}

/* ============ 7. COMPOSANTS ============ */

.colonnes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.colonnes > div{padding:0 2.5rem;border-left:1px solid var(--ligne-f);}
.colonnes > div:first-child{padding-left:0;border-left:0;}
.colonnes > div:last-child{padding-right:0;}
.colonnes h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.55rem;
  margin-bottom:0.7rem;}
.colonnes > div > p{color:var(--creme-doux);font-size:0.9375rem;}
.colonnes ul{list-style:none;margin-top:1.6rem;}
.colonnes li{padding:0.7rem 0;border-top:1px solid var(--ligne-f);font-size:0.9375rem;
  display:flex;gap:0.8rem;align-items:baseline;}
.colonnes li::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--rouge);
  flex:none;transform:translateY(-3px);}
.colonnes li:first-child{border-top:1px solid var(--ligne);}

.clair .colonnes > div{border-left-color:var(--ligne-cf);}
.clair .colonnes > div > p{color:var(--encre-doux);}
.clair .colonnes li{border-top-color:var(--ligne-cf);}
.clair .colonnes li:first-child{border-top-color:var(--ligne-c);}
.clair .colonnes li::before{background:var(--rouge-fonce);}

.espaces{display:grid;grid-template-columns:1fr 1fr;gap:4rem;max-width:1000px;}
.espace{padding-left:1.8rem;border-left:1px solid var(--ligne);}
.espace h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.6rem;
  margin-bottom:0.9rem;}
.espace h3 em{font-style:normal;font-size:1.05rem;color:var(--rouge-clair);}
.espace p{color:var(--creme-doux);}
.espace p + p{margin-top:1rem;}

.carrousel-zone{margin-top:3.5rem;}
.carrousel{display:flex;justify-content:safe center;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:0 max(3rem,calc((100vw - 1320px)/2));
  scrollbar-width:none;-ms-overflow-style:none;}
.carrousel::-webkit-scrollbar{display:none;}
.diapo{flex:0 0 clamp(280px,54vw,680px);scroll-snap-align:center;}
.diapo .ph{aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(150deg,#343130,#211F1E);display:flex;align-items:center;
  justify-content:center;}
.diapo .ph span{font-size:0.6875rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(246,246,244,0.3);text-align:center;padding:0 2rem;line-height:1.9;}
.diapo figcaption{margin-top:0.9rem;font-size:0.8125rem;font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--creme-doux);}
.carrousel-nav{display:flex;justify-content:center;gap:0.7rem;margin-top:2rem;}
.carrousel-nav button{width:44px;height:44px;border:1px solid var(--ligne);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:background .25s ease,border-color .25s ease;}
.carrousel-nav button:hover{background:var(--creme);border-color:var(--creme);}
.carrousel-nav button:hover svg{color:var(--nuit);}
.carrousel-nav svg{width:15px;height:15px;color:var(--creme);transition:color .25s ease;}

.jardin{position:relative;height:clamp(340px,42vw,520px);overflow:hidden;display:flex;
  align-items:flex-end;}
/* ⚠️ 29/09/2026 — LA PHOTO DU JARDIN ENTRE ICI, ET ELLE N'Y ÉTAIT JAMAIS.
   Le commentaire de sections/ateliers/06-jardin.php affirmait depuis août que
   « le fichier se remplace sans toucher au code, même nom, assets/img/
   jardin.jpg ». C'était faux : aucune règle ne chargeait cette image, le
   bandeau n'a jamais affiché qu'un dégradé.
   Le dégradé reste en seconde couche : c'est le repli si le fichier manque
   ou tarde à charger, et le texte posé dessus garde son contraste. */
.jardin .fond{position:absolute;inset:0;
  background:url('/assets/img/jardin.webp') center/cover no-repeat,
             linear-gradient(165deg,#4A4C42,#33362C 55%,#1B1D18);}
.jardin .fond::after{content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(20,19,18,0.80) 0%,rgba(20,19,18,0.15) 55%,rgba(20,19,18,0.35) 100%);}
.jardin .wrap{position:relative;z-index:2;padding-bottom:3rem;}
.jardin h2{max-width:20ch;margin-top:0.9rem;}
.jardin p{color:var(--creme-doux);margin-top:1rem;max-width:44ch;}

.prix-appel{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:900px;
  border-top:1px solid var(--ligne-c);}
.prix-appel > div{padding:2rem 2rem 2rem 0;border-right:1px solid var(--ligne-cf);}
.prix-appel > div:last-child{border-right:0;}
.prix-appel b{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:2.6rem;
  line-height:1;display:block;color:var(--rouge-fonce);}
.prix-appel span{display:block;margin-top:0.6rem;font-size:0.9375rem;}
.prix-appel em{font-style:normal;display:block;font-size:0.8125rem;color:var(--encre-faible);
  margin-top:0.15rem;}

.encart{background:var(--nuit-2);border:1px solid var(--ligne);border-radius:var(--r);
  padding:3.2rem;display:grid;grid-template-columns:1.3fr 1fr;gap:3.5rem;align-items:center;}
.encart p{color:var(--creme-doux);margin-top:1.2rem;max-width:44ch;}
.encart .droite{border-left:1px solid var(--ligne);padding-left:3rem;}
.encart .droite p{margin:0 0 1.6rem;}

.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;counter-reset:etape;}
.etape{counter-increment:etape;border-top:1px solid var(--ligne);padding-top:1.6rem;}
.etape::before{content:counter(etape,decimal-leading-zero);font-family:'Instrument Serif',Georgia,serif;
  font-size:1.6rem;color:var(--rouge-clair);display:block;margin-bottom:0.8rem;line-height:1;}
.etape h3{margin-bottom:0.5rem;}
.etape p{color:var(--creme-doux);font-size:0.9375rem;}

.fiche table{width:100%;border-collapse:collapse;max-width:860px;margin-left:auto;margin-right:auto;}
.fiche tr{border-bottom:1px solid var(--ligne-f);}
.fiche tr:last-child{border-bottom:0;}
.fiche th{font-size:0.8125rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--creme-faible);text-align:left;padding:1.2rem 1.5rem 1.2rem 0;white-space:nowrap;
  vertical-align:top;width:34%;}
.fiche td{padding:1.2rem 0;font-size:1.0625rem;color:var(--creme-doux);}
.fiche b{color:var(--creme);font-weight:600;}

.faq{max-width:900px;}
.qa{border-top:1px solid var(--ligne-f);}
.qa:last-child{border-bottom:1px solid var(--ligne-f);}
.qa button{width:100%;text-align:left;padding:1.6rem 3rem 1.6rem 0;font-size:1.125rem;
  font-weight:500;position:relative;transition:color .25s ease;}
.qa button:hover{color:var(--rouge-clair);}
.qa button::after{content:'';position:absolute;right:0.4rem;top:50%;width:11px;height:11px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .35s ease;}
.qa button[aria-expanded="true"]::after{transform:translateY(-20%) rotate(-135deg);}
.qa .rep{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1);}
.qa .rep p{padding:0 4rem 1.8rem 0;color:var(--creme-doux);font-size:1rem;max-width:70ch;}

.usages{background:#2A2926;padding:4rem 0 4.5rem;}
.usages h2{text-align:center;margin-top:1.2rem;}
.usages .kicker{justify-content:center;color:var(--creme-doux);}
.usages .kicker::before,.usages .kicker::after{background:var(--rouge-clair);}
.usages .kicker::after{content:'';width:26px;height:1px;flex:none;}
.defile{overflow:hidden;white-space:nowrap;border-top:1px solid var(--ligne);
  border-bottom:1px solid var(--ligne);padding:1.4rem 0;margin-top:2.6rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.defile-piste{display:inline-flex;animation:defile 42s linear infinite;}
.defile:hover .defile-piste{animation-play-state:paused;}
.defile-piste span{font-size:0.9375rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--creme);padding:0 1.6rem;}
.defile-piste span::after{content:'—';color:var(--rouge-clair);margin-left:1.6rem;}
@keyframes defile{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.final{text-align:center;padding:8rem 0;border-top:1px solid var(--ligne-f);}
.final .kicker{justify-content:center;}
.final .kicker::after{content:'';width:26px;height:1px;background:var(--rouge-clair);flex:none;}
.final h2{max-width:18ch;margin:1.5rem auto;}
.final p{color:var(--creme-doux);max-width:48ch;margin:0 auto 2.4rem;}

/* ============ 8. PIED DE PAGE ============ */
footer{background:var(--nuit-2);border-top:1px solid var(--ligne-f);padding:4.5rem 0 2rem;
  font-size:0.9375rem;color:var(--creme-doux);}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:3rem;margin-bottom:4rem;}
.f-titre{font-family:'Archivo',sans-serif;font-size:0.6875rem;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--creme);margin-bottom:1.4rem;}
footer address{font-style:normal;line-height:1.85;margin-top:1.4rem;}
.f-horaires{margin-top:1rem;font-size:0.875rem;color:var(--creme-faible);}
footer ul{list-style:none;}
footer li{margin-bottom:0.7rem;}
footer a{border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease;}
footer li a:hover{color:var(--rouge-clair);}
/* ⚠️ 30/09/2026 — LE BLOC CONTACT DU PIED DE PAGE REMPLACE .f-form.
   Les trois règles de champs qui vivaient ici habillaient le formulaire
   court du pied de page, supprimé le 30/09 (voir inc/footer.php). Elles
   sont retirées et non commentées : le formulaire de la page Contact a
   son propre jeu complet, .dem-champ, en fin de feuille. */
.f-appel{font-size:0.875rem;color:var(--creme-faible);margin-bottom:1.6rem;}
.f-tel{margin-bottom:1.6rem;}
.f-tel-lbl{display:block;font-size:0.6875rem;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--creme-faible);margin-bottom:0.4rem;}
/* le numéro est l'élément le plus gros du pied de page, devant l'adresse :
   c'est le geste que la page demande une fois le formulaire parti */
.f-tel a{font-size:1.3125rem;font-weight:500;color:var(--creme);letter-spacing:0.01em;}
.f-tel a:hover{color:var(--rouge-clair);}
.f-tel-plage{display:block;font-size:0.8125rem;color:var(--creme-faible);margin-top:0.3rem;}
.f-tel-hors{display:block;font-size:0.8125rem;color:var(--creme-faible);margin-top:0.2rem;}
.f-btn{margin-bottom:1.4rem;}
.f-mail{font-size:0.875rem;color:var(--creme-faible);}
.f-mail a:hover{color:var(--rouge-clair);}
.miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.msg{padding:0.8rem 1rem;border-radius:2px;font-size:0.875rem;margin-bottom:1.2rem;}
.msg.ok{background:rgba(143,169,106,0.14);border-left:2px solid #8FA96A;color:var(--creme);}
.msg.ko{background:rgba(196,67,62,0.14);border-left:2px solid var(--rouge);color:var(--creme);}
.f-bottom{border-top:1px solid var(--ligne-f);padding-top:1.8rem;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:0.8125rem;color:var(--creme-faible);}

.mbar{position:fixed;left:0;right:0;bottom:0;z-index:150;background:rgba(20,19,18,0.96);
  backdrop-filter:blur(14px);border-top:1px solid var(--ligne);padding:0.8rem 1.4rem;
  display:none;align-items:center;justify-content:space-between;gap:1rem;
  transform:translateY(110%);transition:transform .4s var(--doux);}
.mbar.visible{transform:none;}
.mbar .t b{font-family:'Instrument Serif',Georgia,serif;font-size:1.25rem;display:block;line-height:1.1;}
.mbar .t span{font-size:0.75rem;color:var(--creme-doux);}

/* ============ 9. RESPONSIVE ============ */
@media (max-width:1180px){ .topnav{display:none;} }
@media (max-width:1000px){
  .colonnes,.espaces,.etapes,.prix-appel{grid-template-columns:1fr;gap:2.5rem;}
  .colonnes > div,.espace{padding:0;border-left:0;}
  .espace{border-left:1px solid var(--ligne);padding-left:1.4rem;}
  .prix-appel > div{border-right:0;border-bottom:1px solid var(--ligne-cf);padding:1.4rem 0;}
  .encart{grid-template-columns:1fr;gap:2rem;padding:2.2rem;}
  .encart .droite{border-left:0;padding-left:0;border-top:1px solid var(--ligne);padding-top:1.6rem;}
  .geo .wrap{grid-template-columns:1fr;gap:1.4rem;}
  .f-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  .wrap{padding:0 1.4rem;}
  .pad{padding:4.5rem 0;}
  .pad-sm{padding:3rem 0;}
  .hero{flex-direction:column-reverse;min-height:auto;}
  .hero .cote,.hero .photo{width:100%;}
  .hero .photo{height:48svh;}
  .hero .cote::after{display:none;}
  .hero .dedans{padding:2.8rem 1.4rem 4rem;margin-left:0;max-width:none;}
  .hero .photo::after{background:linear-gradient(180deg,rgba(20,19,18,0) 76%,rgba(20,19,18,0.30) 100%);}
  .hero-court{padding:7.5rem 0 3.5rem;}
  .top-actions .btn{display:none;}
  .carrousel{padding:0 1.4rem;}
  .decouverte{padding:1.2rem 1.3rem;}
  .fiche th,.fiche td{display:block;width:100%;white-space:normal;}
  .fiche th{padding:1.1rem 0 0.2rem;}
  .fiche td{padding:0.2rem 0 1.1rem;}
  .qa .rep p{padding-right:0;}
  .final{padding:4.5rem 0;}
  .f-grid{grid-template-columns:1fr;}
  /* ⚠️ 02/10/2026 — EN COLONNE UNIQUE, « UNE QUESTION ? » MONTE EN DEUXIÈME.
     En grand écran les quatre blocs sont côte à côte et l'ordre ne se voit
     pas. Empilés, l'ordre du code mettait le téléphone tout en bas, après
     deux listes de liens : le seul geste que le pied de page demande
     arrivait en dernier. Il passe donc juste après l'adresse, avant « Le
     lieu ».
     Le code n'est pas réordonné : la 4e colonne (1.3fr) est taillée pour le
     gros numéro, déplacer le bloc dans le HTML obligerait à refaire la
     grille du grand écran pour un gain nul.
     Contrepartie assumée : au clavier, « Le lieu » et « Informations » sont
     parcourus avant le bouton Nous contacter, qui est pourtant au-dessus. */
  .f-grid > div{order:3;}
  .f-grid > div:first-child{order:1;}
  .f-grid > .f-contact{order:2;}
  .menu-plein{padding:5rem 1.4rem 2rem;}
  .mbar{display:flex;}
  body{padding-bottom:72px;}
}

/* ============ 10. MOUVEMENT RÉDUIT ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.fade,.ln > i{opacity:1 !important;transform:none !important;transition:none !important;}
  .pan{transform:none !important;transition:none !important;}
  .img{filter:saturate(1) contrast(1.05) !important;transition:none !important;animation:none !important;}
  .lum{opacity:0 !important;transition:none !important;}
  .hero .kicker::before{transform:scaleX(1) !important;transition:none !important;}
  .defile-piste{animation:none !important;}
  .carrousel{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:0.01ms !important;}
}

@media print{
  .topbar,.menu-plein,.mbar,.skip,.defile,.carrousel-nav{display:none !important;}
  body{background:#fff;color:#000;}
}

/* ==========================================================
   AJOUTS DU 24/08/2026
   ============================================================ */

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

.booking{position:relative;z-index:10;margin-top:-2.5rem;}
/* ⚠️ 02/10/2026 — LE PANNEAU PASSE SUR DEUX RANGÉES.
   Les quatre blocs étaient côte à côte sur une seule rangée, et la colonne
   des durées n'y recevait que 298 px : six onglets en demandent 500, ils
   passaient donc sur deux lignes. Mesuré, pas supposé — à 1320 px de large,
   la rangée distribuait 199 px au jour, 309 px au prix (sa note tient sur
   une ligne, et une colonne 'auto' se dimensionne sur son contenu le plus
   large) et 251 px au bouton. Aucun réglage de marges ne trouvait 200 px.
   D'où la disposition actuelle :
     rangée 1  « Quel jour ? »            « Pour combien de temps ? »
     rangée 2  le prix et sa note          le bouton, à droite
   Les durées reçoivent ainsi environ 920 px au lieu de 298 : la rangée
   d'onglets tient, et tiendra encore si une formule est ajoutée.
   Le placement est écrit explicitement (grid-column / grid-row) et NON en
   grid-template-areas : les deux paliers responsive ci-dessous redéfinissent
   le nombre de colonnes, et un nom de zone absent d'un template y aurait
   renvoyé les blocs en placement automatique, dans le désordre.
   ⚠️ TOUT PALIER QUI CHANGE grid-template-columns DOIT REPLACER LES QUATRE
   BLOCS. C'est fait à 1100 px et à 860 px. */
.booking-inner{background:var(--nuit-2);border-radius:4px;
  padding:2rem 2.2rem;display:grid;grid-template-columns:auto 1fr auto;
  gap:1.7rem 2rem;align-items:end;}
.bk-jour{grid-column:1;grid-row:1;}
.bk-duree{grid-column:2 / -1;grid-row:1;}
/* ⚠️ 02/10/2026 — LES DEUX QUESTIONS SONT CALÉES EN HAUT, PAS EN BAS.
   Le panneau est en align-items:end, pour que le prix et le bouton
   s'alignent par le bas. Depuis que les deux choix de jour sont empilés, sa
   colonne est plus haute que celle des durées : en fin de rangée, le titre
   « Pour combien de temps ? » descendait au niveau de « Le week-end » au
   lieu de rester en face de « Quel jour ? ». Les deux titres se lisaient
   comme deux étages. */
.bk-jour,.bk-duree{align-self:start;}
.field .lab{display:block;font-size:0.6875rem;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--creme-doux);margin-bottom:0.7rem;}
.seg{display:flex;flex-wrap:wrap;gap:0.35rem;}
/* ⚠️ 02/10/2026 — « EN SEMAINE » ET « LE WEEK-END » SONT L'UN SOUS L'AUTRE.
   Demandé par Séverine : les quatre blocs alignés sur une seule bande se
   lisaient comme une seule question. Empilés, les deux choix de jour
   forment une colonne nette à gauche, et la rangée d'onglets de durée se
   détache à droite.
   'stretch' et non 'flex-start' : les deux pastilles prennent la même
   largeur, celle de la plus longue. Ragged, la colonne aurait l'air d'un
   accident.
   Effet de bord utile : la colonne du jour passe d'environ 199 px à 105 px,
   et tout ce qu'elle rend va aux durées. */
.bk-jour .seg{flex-direction:column;align-items:stretch;}
/* ⚠️ 02/10/2026 — PADDING RESSERRÉ DE 0.95 À 0.72rem, white-space ajouté.
   Les 0.95rem faisaient 35 px de vide par onglet : sur six, c'est une
   demi-largeur d'onglet perdue. Le nowrap empêche « Journée + soirée » de
   se couper en deux lignes DANS sa pastille, qui doublerait la hauteur de
   toute la rangée. */
.seg button{padding:0.55rem 0.72rem;font-size:0.8125rem;font-weight:500;
  white-space:nowrap;
  border:1px solid var(--ligne);border-radius:100px;color:var(--creme-doux);
  transition:background .25s ease,border-color .25s ease,color .25s ease;}
/* ⚠️ 02/10/2026 — LE :not([aria-pressed="true"]) RÉPARE UN TEXTE INVISIBLE.
   L'onglet choisi est crème sur crème dès qu'il est survolé : cette règle
   est plus spécifique (0,2,1) que celle de l'état choisi juste en dessous
   (0,2,1, mais écrite avant) et lui imposait color:var(--creme) sur son fond
   crème. Très visible au téléphone, où un appui laisse le :hover collé
   jusqu'au suivant : on touchait « Journée », son libellé disparaissait.
   Ne pas retirer ce filtre en croyant simplifier le sélecteur. */
.seg button:hover:not([aria-pressed="true"]){
  border-color:var(--creme-faible);color:var(--creme);}
.seg button[aria-pressed="true"]{background:var(--creme);border-color:var(--creme);
  color:var(--nuit);font-weight:600;}
/* ⚠️ 02/10/2026 — L'ÉTAT GRISÉ EST SUPPRIMÉ, ainsi que .price-out .p.na.
   Un onglet n'est plus jamais [disabled] : une formule qui ne se loue pas ce
   jour-là n'a pas d'onglet du tout (voir $SIMU_DUREES['...']['jours'] dans
   inc/data.php). Le message « créneau indisponible » qui remplissait .p.na
   a disparu avec lui : $FRISE_NOTE, deux sections plus bas, porte la règle
   du week-end. Si un [disabled] revenait un jour, il faudrait aussi rendre
   son :not() au sélecteur de survol ci-dessus. */
.seg button[hidden]{display:none;}
/* ⚠️ 02/10/2026 — LE PRIX ET SA NOTE SONT CÔTE À CÔTE, EN BAS À GAUCHE.
   La note tenait sous le prix, dans une colonne étroite alignée à droite.
   En rangée 2, la place ne manque plus : le nombre et la phrase se lisent
   sur une seule ligne, et la hauteur gagnée paie la rangée ajoutée.
   min-width:0 est indispensable — sans lui, un élément de grille refuse de
   descendre sous la largeur de son contenu et déborde la colonne. */
.price-out{grid-column:1 / 3;grid-row:2;text-align:left;
  display:flex;align-items:flex-end;gap:1.2rem;min-width:0;}
.price-out .p{font-family:'Instrument Serif',Georgia,serif;font-size:3.1rem;line-height:1;display:block;}
.price-out small{display:block;font-size:0.75rem;color:var(--creme-doux);margin-top:0;}
.price-out small b{color:var(--rouge-clair);font-weight:600;}
.booking-inner > .btn{grid-column:3;grid-row:2;align-self:center;}

.figures{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ligne);}
.figure{padding:2.6rem 2rem 2.6rem 0;border-right:1px solid var(--ligne-f);}
.figure:last-child{border-right:0;}
.figure b{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(2.8rem,5.5vw,4.4rem);line-height:1;display:block;}
.figure span{display:block;margin-top:0.7rem;font-size:0.75rem;font-weight:600;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--creme-doux);}

.scene{display:grid;grid-template-columns:1.1fr 1fr;gap:5rem;align-items:start;}
.scene .txt h2{margin:1.4rem 0 2rem;}
.scene .txt p{color:var(--creme-doux);}
.scene .txt p + p{margin-top:1.3rem;}
.facts{border-top:1px solid var(--ligne);}
.facts .t{font-size:0.6875rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--creme-faible);padding:1.4rem 0 0.4rem;}
.facts dl{display:grid;grid-template-columns:1fr auto;}
.facts dt,.facts dd{padding:1rem 0;border-top:1px solid var(--ligne-f);font-size:0.9375rem;}
.facts dt{color:var(--creme-doux);padding-right:1.5rem;}
.facts dd{text-align:right;font-weight:600;}

.clair .scene .txt p{color:var(--encre-doux);}
.clair .facts{border-top-color:var(--ligne-c);}
.clair .facts .t{color:var(--encre-faible);}
.clair .facts dt,.clair .facts dd{border-top-color:var(--ligne-cf);}
.clair .facts dt{color:var(--encre-doux);}

.tabs{display:flex;gap:0;border-bottom:1px solid var(--ligne);margin-bottom:3rem;}
.tabs button{flex:1;text-align:left;padding:1.6rem 0;font-size:1.0625rem;font-weight:500;
  color:var(--creme-faible);border-bottom:1px solid transparent;margin-bottom:-1px;
  transition:color .3s ease,border-color .3s ease;display:flex;align-items:baseline;gap:0.8rem;}
.tabs button b{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.6rem;}
.tabs button small{font-size:0.8125rem;color:var(--creme-faible);}
.tabs button[aria-selected="true"]{color:var(--creme);border-bottom-color:var(--rouge);}
.tabs button[aria-selected="true"] small{color:var(--rouge-clair);}
.panel{display:none;grid-template-columns:1.25fr 1fr;gap:4rem;align-items:start;}
.panel.on{display:grid;animation:fadein .5s ease both;}
@keyframes fadein{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.panel .shot{aspect-ratio:16/11;background:linear-gradient(150deg,#343130,#211F1E);
  display:flex;align-items:center;justify-content:center;border-radius:var(--r);}
.panel .shot span{font-size:0.6875rem;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;
  color:rgba(246,246,244,0.3);text-align:center;padding:0 2rem;line-height:1.9;}
.panel p{color:var(--creme-doux);}
.speclist{list-style:none;margin-top:2rem;}
.speclist li{display:flex;justify-content:space-between;gap:1rem;padding:0.85rem 0;
  border-top:1px solid var(--ligne-f);font-size:0.9375rem;}
.speclist li:first-child{border-top:1px solid var(--ligne);}
.speclist li span{color:var(--creme-doux);}

.jardin-txt{max-width:36ch;}
.jardin-txt .big{font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(4rem,11vw,9rem);line-height:0.9;color:var(--rouge-clair);
  display:block;margin:0.6rem 0;}
.jardin-txt h2{font-size:clamp(1.6rem,3vw,2.4rem);}
.jardin-txt p{margin-top:1.6rem;color:var(--creme-doux);}


/* ⚠️ 09/09/2026 — L'ÉCHELLE HORAIRE ÉTAIT DÉCALÉE, ET DE BEAUCOUP.
   .tl-scale s'étalait sur toute la largeur de .timeline, alors que les barres
   vivent dans la colonne du milieu de .tl-row. Mesuré avant correction, en
   1400 px : 222 px de trop à gauche, 112 px à droite — le « 8h » tombait au
   droit de 4h37, le « 12h » sur 10h00, le « 22h » au-delà de la fin des
   pistes. La graduation ne légendait donc rien de ce qu'elle surplombait.

   C'est exactement le piège consigné le 25/08 pour .horloge (page Ateliers) :
   « deux éléments qui doivent s'aligner ne se mesurent jamais en unités
   relatives à leur propre police — largeurs partagées = variables en pixels,
   déclarées une seule fois ». La règle avait été appliquée à la frise des
   Ateliers, puis à celle de Tarifs le 09/09, mais jamais à celle-ci, qui est
   pourtant la frise d'origine.

   ⚠️ AUCUNE VALEUR N'EST MODIFIÉE : 200px, 1fr, 90px et le gap de 1.4rem sont
   ceux d'avant, simplement hissés en variables pour que l'échelle puisse les
   relire. Le rendu de .tl-row est inchangé au pixel près ; seule .tl-scale
   gagne ses deux marges. */
.timeline{border-top:1px solid var(--ligne-c);padding-top:1.2rem;
  --tl-lab:200px;--tl-gap:1.4rem;--tl-prix:90px;}
.tl-scale{display:flex;justify-content:space-between;font-size:0.6875rem;font-weight:600;
  letter-spacing:0.1em;color:var(--encre-faible);margin-bottom:1rem;
  margin-left:calc(var(--tl-lab) + var(--tl-gap));
  margin-right:calc(var(--tl-prix) + var(--tl-gap));}
.tl-rows{display:flex;flex-direction:column;gap:0.55rem;}
.tl-row{display:grid;grid-template-columns:var(--tl-lab) 1fr var(--tl-prix);
  align-items:center;gap:var(--tl-gap);}
.tl-row .lab{font-size:0.875rem;font-weight:600;}
.tl-row .lab em{display:block;font-style:normal;font-weight:400;font-size:0.75rem;
  color:var(--encre-faible);margin-top:0.15rem;}
.tl-bar{position:relative;height:38px;background:rgba(27,27,25,0.05);border-radius:2px;}
.tl-fill{position:absolute;top:0;bottom:0;background:var(--rouge-fonce);border-radius:2px;
  display:flex;align-items:center;padding-left:0.8rem;font-size:0.75rem;font-weight:600;
  color:var(--clair);letter-spacing:0.04em;white-space:nowrap;overflow:hidden;
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--doux);}
.tl-row.on .tl-fill{transform:scaleX(1);}
.tl-fill.alt{background:#3A3835;}
.tl-row .pr{text-align:right;font-family:'Instrument Serif',Georgia,serif;font-size:1.55rem;}
.tl-note{margin-top:1.6rem;font-size:0.8125rem;color:var(--encre-faible);max-width:80ch;}
.tl-note b{color:var(--encre);font-weight:600;}

.grid-tarifs{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-top:4.5rem;}
.tarif-block h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.7rem;
  margin-bottom:1.4rem;}
.tarif-block table{width:100%;border-collapse:collapse;}
.tarif-block td{padding:0.95rem 0;border-bottom:1px solid var(--ligne-c);font-size:0.9375rem;
  vertical-align:top;}
.tarif-block td em{display:block;font-style:normal;font-size:0.75rem;color:var(--encre-faible);
  margin-top:0.15rem;}
.tarif-block td:last-child{text-align:right;font-family:'Instrument Serif',Georgia,serif;
  font-size:1.3rem;white-space:nowrap;color:var(--rouge-fonce);}
.tarif-block tr:last-child td{border-bottom:0;}
.tarif-block .note{margin-top:1.2rem;font-size:0.8125rem;color:var(--encre-faible);}

/* ⚠️ 30/09/2026 — TROIS COMPOSANTS AJOUTÉS pour la section Créneaux et
   tarifs de l'accueil (piste B). AUCUNE règle existante n'est modifiée :
   .timeline, .tl-row, .tl-fill, .grid-tarifs et .tarif-block sont
   inchangés, et les autres pages qui les lisent ne bougent pas.

   .registre — l'intertitre qui nomme le régime de réservation. Ses valeurs
   reprennent .acomptes-titre, qui portait déjà ce dessin sur fond clair.
   --encre-faible sur --clair donne 4,97:1, au-dessus du plancher de 4,5.
   ⚠️ SIGNALÉ, NON CORRIGÉ : .acomptes et .acomptes-titre ne sont plus
   appelées par aucun fichier .php du site. Règles orphelines, laissées en
   place — leur suppression n'est pas demandée. */
.registre{font-size:0.6875rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--encre-faible);margin-bottom:1.4rem;}

/* .pr-demande — « sur demande » dans la colonne des prix. Sans cette règle
   il héritait de .tarif-block td:last-child, donc Instrument Serif 1,3 rem
   en rouge : une absence de prix se lisait comme un prix. */
.pr-demande{font-family:'Archivo','Helvetica Neue',Arial,sans-serif;font-size:0.8125rem;
  font-weight:400;color:var(--encre-faible);}

/* .abo-renvoi — le renvoi vers la section Abonnement, colonne de droite.
   Même dessin que .decouverte (filet, bord gauche rouge, fond --clair-2)
   sans la réutiliser : .decouverte porte un sens documenté au §5 du socle,
   l'offre découverte, et la réemployer ici brouillerait les deux. */
.abo-renvoi{border:1px solid var(--ligne-c);border-left:3px solid var(--rouge-fonce);
  border-radius:var(--r);padding:2.2rem 2.4rem;background:var(--clair-2);align-self:start;}
.abo-renvoi h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.7rem;
  line-height:1.15;margin-bottom:0.9rem;}
.abo-renvoi p{font-size:0.9375rem;color:var(--encre-doux);}
.abo-renvoi p b{color:var(--encre);font-weight:600;font-variant-numeric:tabular-nums;}
.abo-renvoi .lien-fleche{margin-top:1.4rem;}

.decouverte{margin-top:4rem;border:1px solid var(--ligne-c);border-left:3px solid var(--rouge-fonce);
  border-radius:var(--r);padding:2.4rem 2.6rem;background:var(--clair-2);max-width:none;}
.decouverte h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.9rem;
  margin-bottom:0.9rem;color:var(--encre);}
.decouverte p{font-size:0.9375rem;color:var(--encre-doux);max-width:66ch;}
.decouverte p b{color:var(--rouge-fonce);font-weight:600;font-variant-numeric:tabular-nums;}
.decouverte .cond{margin-top:0.8rem;font-size:0.8125rem;color:var(--encre-faible);}

.encart .droite .ligne{display:flex;justify-content:space-between;gap:1rem;padding:0.8rem 0;
  border-bottom:1px solid var(--ligne-f);font-size:0.9375rem;}
.encart .droite .ligne:last-of-type{border-bottom:0;}
.encart .droite .ligne b{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.25rem;}
.encart .droite .mention{font-size:0.8125rem;color:var(--creme-faible);margin:1rem 0 1.6rem;}

@media (max-width:1100px){
  /* Le bouton descend sur sa propre rangée, pleine largeur, et le prix
     gagne un filet de séparation. Les deux questions gardent la rangée 1
     et la MÊME répartition qu'en grand écran ('auto 1fr') : mesuré à
     1024 px, deux colonnes égales ne laissaient que 407 px aux durées, de
     nouveau deux lignes d'onglets. Les quatre blocs sont replacés, cf.
     l'avertissement sur .booking-inner. */
  .booking-inner{grid-template-columns:auto 1fr;gap:1.8rem;}
  .bk-jour{grid-column:1;grid-row:1;}
  .bk-duree{grid-column:2 / -1;grid-row:1;}
  .price-out{grid-column:1/-1;grid-row:2;text-align:left;display:flex;align-items:flex-end;
    justify-content:space-between;gap:1.5rem;border-top:1px solid var(--ligne);padding-top:1.5rem;}
  .price-out small{margin-top:0;}
  .booking-inner > .btn{grid-column:1/-1;grid-row:3;justify-content:center;align-self:auto;}
  .scene,.panel{grid-template-columns:1fr;gap:3rem;}
}
@media (max-width:860px){
  .booking{margin-top:-1.5rem;}
  /* Une seule colonne : les quatre blocs s'empilent dans l'ordre du code.
     Sans ces quatre lignes, le grid-column:2 du palier 1100 px survivrait
     et créerait une deuxième colonne implicite — cf. l'avertissement sur
     .booking-inner. */
  .booking-inner{grid-template-columns:1fr;padding:1.6rem;}
  .bk-jour{grid-column:1;grid-row:1;}
  .bk-duree{grid-column:1;grid-row:2;}
  .price-out{grid-column:1;grid-row:3;}
  .booking-inner > .btn{grid-column:1;grid-row:4;}
  .figures{grid-template-columns:1fr 1fr;}
  .figure{padding:1.8rem 1.2rem 1.8rem 0;border-bottom:1px solid var(--ligne-f);}
  .figure:nth-child(2n){border-right:0;padding-left:1.2rem;}
  .tabs{flex-direction:column;}
  .tabs button{padding:1.1rem 0;border-bottom:1px solid var(--ligne-f);margin-bottom:0;}
  .grid-tarifs{grid-template-columns:1fr;gap:3rem;}
  .tl-row{grid-template-columns:1fr;gap:0.4rem;}
  .tl-row .pr{text-align:left;}
  .tl-bar{height:30px;}
  .tl-scale{display:none;}
  /* ⚠️ 30/09/2026 — LA LIGNE REGROUPÉE SEULEMENT (.multi), et seulement ici.
     Sous 860 px .tl-scale disparaît : le texte DANS la barre devient le seul
     horaire lisible. La barre 18h30 – 22h occupe 25 % d'une piste de 345 px
     à 390 px, soit 86 px, et « 18h30 – 22h » en 0,75 rem en réclame 85 avec
     son retrait — overflow:hidden le coupait. En 0,6875 rem et 0,5 rem de
     retrait il en faut 73. Les lignes à barre unique gardent leur dessin. */
  .tl-row.multi .tl-fill{padding-left:0.5rem;font-size:0.6875rem;}
  .decouverte{padding:1.8rem;}
}
@media (prefers-reduced-motion:reduce){
  .tl-row .tl-fill{transform:scaleX(1) !important;transition:none !important;}
  .panel.on{animation:none !important;}
}

.hero-figures{margin-top:2rem;grid-template-columns:repeat(4,1fr);border-top:0;}
.hero-figures .figure{padding:1.5rem 1rem 0;text-align:center;border-right:0;}
.hero-figures .figure b{font-size:clamp(1.7rem,2.6vw,2.5rem);}
.hero-figures .figure span{margin-top:0.45rem;font-size:0.625rem;letter-spacing:0.11em;
  line-height:1.5;}
@media (max-width:1100px){
  .hero-figures{grid-template-columns:1fr 1fr;}
  .hero-figures .figure{padding:1.2rem 1rem;}
}

.lien-bas{display:inline-flex;align-items:center;gap:0.55rem;font-size:0.8125rem;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--creme-doux);
  transition:color .25s ease;}
.lien-bas:hover{color:var(--rouge-clair);}
.lien-bas svg{width:14px;height:14px;transition:transform .3s var(--doux);}
.lien-bas:hover svg{transform:translateY(3px);}
.hero .reassure{margin-top:0.4rem;}

/* ==========================================================
   VARIANTES CLAIRES DE COMPOSANTS COMMUNS  (fusion du 26/08)
   ========================================================== */
.clair .coches li{color:var(--encre-doux);border-top-color:var(--ligne-cf);}
.clair .coches li:first-child{border-top-color:var(--ligne-c);}
.clair .coches li::before{border-left-color:var(--rouge-fonce);
  border-bottom-color:var(--rouge-fonce);}

.clair .qa{border-top-color:var(--ligne-cf);}
.clair .qa:last-child{border-bottom-color:var(--ligne-cf);}
.clair .qa button:hover{color:var(--rouge-fonce);}
.clair .qa .rep p{color:var(--encre-doux);}

.clair .tva{border-color:var(--ligne-c);border-left-color:var(--rouge-fonce);
  background:var(--clair-2);}
.clair .tva b{color:var(--encre);}
.clair .tva p{color:var(--encre-doux);}

.col p{color:var(--creme-doux);}
.clair .col p{color:var(--encre-doux);}

/* .encart — variante CLAIRE, ajoutée le 09/09/2026.
   sections/tarifs/07-abonnement.php la réclame explicitement depuis le
   01/09 : « sa variante claire est ajoutée dans les COMPOSANTS COMMUNS de
   style.css, PAS dans la rubrique de cette page ». Elle ne l'avait jamais
   été, et la section était donc un bloc --nuit-2 dont le titre héritait de
   --encre : du presque-noir sur du presque-noir, invisible. C'est le même
   mécanisme que la frise de Formation (décision CZ du 02/09).
   ⚠️ Portée par .clair : l'encart de l'accueil, qui vit sur fond nuit
   (sections/10-abonnement.php, section .pad sans .clair), n'est pas touché. */
.clair .encart{background:var(--clair-2);border-color:var(--ligne-c);}
.clair .encart h2,.clair .encart h3{color:var(--encre);}
.clair .encart p{color:var(--encre-doux);}
.clair .encart .droite{border-left-color:var(--ligne-c);}
.clair .encart .droite .ligne{border-bottom-color:var(--ligne-cf);}
.clair .encart .droite span{color:var(--encre-doux);}
.clair .encart .droite .ligne b{color:var(--encre);}
.clair .encart .droite .unite,
.clair .encart .droite .mention{color:var(--encre-faible);}
/* ⚠️ `background:none` est OBLIGATOIRE ici, et ce n'est pas décoratif.
   `.clair .btn` (0,2,0) pose un fond --rouge-fonce sur tout bouton d'une
   section claire, et il l'emporte sur `.btn-ghost` (0,1,0). Sans cette
   déclaration, le bouton fantôme garde ce fond rouge et reçoit un texte
   --encre : 2,44:1 mesuré, très au-dessous du plancher de 4,5:1.
   Défaut introduit puis constaté à la mesure le 09/09 — la capture d'écran,
   elle, le laissait passer. */
.clair .encart .btn-ghost{background:none;border-color:var(--ligne-c);color:var(--encre);}
.clair .encart .btn-ghost:hover{background:var(--encre);color:var(--clair);border-color:var(--encre);}

.nb{white-space:nowrap;}

/* ------------------------- PAGE SALLE DE FORMATION ------------------------ */
.hero-court .sub{color:var(--creme-doux);font-size:1.25rem;max-width:46ch;margin:1.5rem 0 2.4rem;}
/* ⚠️ 29/09/2026 — LE PANNEAU OBLIQUE EST SUPPRIMÉ. Il posait un aplat
   sombre en biais sur 44 % de la largeur, à 45 % d'opacité. Il datait
   d'avant les photos, quand ce hero n'avait qu'un fond uni à animer.
   Depuis que les cinq pages ont une image, il se superposait À LA PHOTO,
   par-dessus le voile de lisibilité : deux couches sombres l'une sur
   l'autre, et c'est celle-ci qui éteignait le plus l'image.
   Ne pas le réintroduire « pour donner du relief » : le relief vient
   maintenant du dégradé du voile, qui est directionnel. */
.hero-court .wrap{position:relative;z-index:2;}

/* FRISE CHRONOLOGIQUE — « Une journée, heure par heure » */
.journee{position:relative;max-width:900px;}
.journee::before{content:'';position:absolute;left:118px;top:0.6rem;bottom:1rem;width:1px;
  background-image:linear-gradient(180deg,var(--ligne) 50%,transparent 50%);
  background-size:1px 7px;}
.moment{display:grid;grid-template-columns:118px 1fr;gap:3rem;padding-bottom:3rem;position:relative;}
.moment:last-child{padding-bottom:0;}
.moment .h{position:relative;text-align:right;padding-top:0.15rem;padding-right:1.5rem;
  font-family:'Instrument Serif',Georgia,serif;font-size:1.6rem;line-height:1.2;
  color:var(--creme);font-variant-numeric:tabular-nums;}
.moment .h::after{content:'';position:absolute;right:-5.5px;top:0.72em;
  width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--rouge-clair);
  box-shadow:0 0 0 4px var(--nuit), 0 0 0 5.5px rgba(219,102,96,0.32);}
.moment .c h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.35rem;
  line-height:1.25;margin-bottom:0.6rem;color:var(--creme);}
.moment .c p{color:var(--creme-doux);max-width:58ch;font-size:1rem;}
.moment .c p b{color:var(--creme);font-weight:600;}

.moment{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--doux),transform .8s var(--doux);}
.moment.on{opacity:1;transform:none;}

/* --- 09/09/2026 : centrage de la frise et de son bouton, et variante CLAIRE */
.journee{margin-inline:auto;}
.journee-cta{text-align:center;}
.clair .journee::before{
  background-image:linear-gradient(180deg,var(--ligne-c) 50%,transparent 50%);}
.clair .moment .h{color:var(--encre);}
.clair .moment .h::after{background:var(--rouge-fonce);
  box-shadow:0 0 0 4px var(--clair), 0 0 0 5.5px rgba(163,45,45,0.28);}
.clair .moment .c h3{color:var(--encre);}
.clair .moment .c p{color:var(--encre-doux);}
.clair .moment .c p b{color:var(--encre);}

/* PLAN DE LA SALLE */
.plan-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:4.5rem;align-items:center;}
.plan svg{width:100%;height:auto;display:block;}
.plan figcaption{margin-top:1rem;font-size:0.75rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--creme-faible);}
.ratio-big{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(3.4rem,8vw,5.5rem);
  line-height:0.95;color:var(--rouge-clair);display:block;}
.ratio-big + em{font-style:normal;font-size:0.8125rem;font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--creme-faible);display:block;margin-top:0.6rem;}
.plan-txt p{color:var(--creme-doux);margin-top:1.4rem;max-width:48ch;}
.plan-txt p:first-of-type{margin-top:2rem;}
.materiaux{display:flex;gap:0;margin-top:2.2rem;border-top:1px solid var(--ligne);flex-wrap:wrap;}
.materiaux span{padding:1rem 1.5rem 1rem 0;font-size:0.9375rem;color:var(--creme-doux);
  border-right:1px solid var(--ligne-f);margin-right:1.5rem;}
.materiaux span:last-child{border-right:0;margin-right:0;}

/* WEEK-END · FINANCEMENT · TARIFS · MENTION VISIO */
.franchise{margin-top:3rem;border:1px solid var(--ligne);border-left:2px solid var(--rouge);
  padding:1.5rem 1.8rem;max-width:70ch;background:var(--nuit-2);}
.franchise b{display:block;margin-bottom:0.4rem;}
.franchise p{color:var(--creme-doux);font-size:0.9375rem;}

/* 09/09/2026 : centrage de l'encart visio */
.franchise{margin-inline:auto;}

.we{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center;
  background:var(--nuit-2);border:1px solid var(--ligne-f);border-radius:var(--r);padding:3.5rem;}
.we p{color:var(--creme-doux);margin-top:1.3rem;max-width:44ch;}
.we-prix{border-left:1px solid var(--ligne);padding-left:3rem;}
.we-prix > div{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:1rem 0;border-bottom:1px solid var(--ligne-f);}
.we-prix > div:last-of-type{border-bottom:0;}
.we-prix span{font-size:0.9375rem;color:var(--creme-doux);}
.we-prix b{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.9rem;white-space:nowrap;}
.we-note{font-size:0.8125rem;color:var(--creme-faible);margin-top:1rem;}

.finance{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:start;}
.finance p{color:var(--creme-doux);margin-top:1.3rem;}

.tarif-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:4.5rem;align-items:start;}
.tarif-table{width:100%;border-collapse:collapse;}
.tarif-table td{padding:1.35rem 0;border-bottom:1px solid rgba(27,27,25,0.13);
  font-size:1.0625rem;vertical-align:baseline;}
.tarif-table td em{font-style:normal;display:block;font-size:0.8125rem;
  color:var(--encre-faible);margin-top:0.2rem;}
.tarif-table td:last-child{text-align:right;font-family:'Instrument Serif',Georgia,serif;
  font-size:1.75rem;white-space:nowrap;}
.tarif-table tr:last-child td{border-bottom:0;}
.tarif-side p{color:var(--encre-doux);font-size:0.9375rem;margin-bottom:1.3rem;}
.tarif-side .carnet{background:var(--clair-2);border-left:2px solid var(--rouge-fonce);
  padding:1.5rem;margin-bottom:1.8rem;}
.tarif-side .carnet b{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:1.6rem;display:block;margin-bottom:0.3rem;}
.tarif-side .carnet span{font-size:0.9375rem;color:var(--encre-doux);}

@media (max-width:1000px){
  .plan-grid,.we,.tarif-grid,.finance{grid-template-columns:1fr;gap:2.8rem;}
  .we-prix{border-left:0;padding-left:0;border-top:1px solid var(--ligne);padding-top:1.5rem;}
}
@media (max-width:860px){
  .hero-court::after{display:none;}
  .journee::before{left:0;}
  .moment{grid-template-columns:1fr;gap:0.4rem;padding-left:1.9rem;padding-bottom:2.4rem;}
  .moment .h{text-align:left;font-size:1.3rem;padding-right:0;}
  .moment .h::after{right:auto;left:-1.9rem;margin-left:-5.5px;top:0.62em;}
  .we{padding:2rem;}
  .materiaux span{border-right:0;margin-right:0;padding-right:0;width:100%;
    border-bottom:1px solid var(--ligne-f);}
}
@media (prefers-reduced-motion:reduce){
  .moment{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* ----------------------------- PAGE TARIFS -------------------------------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.tva{border:1px solid var(--ligne);border-left:2px solid var(--rouge-clair);
  background:var(--nuit-2);border-radius:var(--r);padding:1.5rem 1.8rem;max-width:60ch;}
.tva b{display:block;font-size:1.0625rem;margin-bottom:0.4rem;color:var(--creme);}
.tva p{color:var(--creme-doux);font-size:0.9375rem;}

.grille{width:100%;border-collapse:collapse;max-width:860px;}
.grille tr{border-bottom:1px solid var(--ligne-f);}
.grille tbody tr:last-child{border-bottom:0;}
.grille th[scope="row"]{text-align:left;font-size:1.0625rem;font-weight:600;
  padding:1.25rem 1.5rem 1.25rem 0;color:var(--creme);vertical-align:baseline;}
.grille .hr{font-size:0.875rem;color:var(--creme-faible);padding:1.25rem 1.5rem 1.25rem 0;
  vertical-align:baseline;}
.grille .px{text-align:right;font-family:'Instrument Serif',Georgia,serif;font-size:1.7rem;
  white-space:nowrap;padding:1.1rem 0;vertical-align:baseline;
  font-variant-numeric:tabular-nums;}
.grille .px .u{font-family:'Archivo',sans-serif;font-size:0.75rem;color:var(--creme-faible);
  display:block;margin-top:0.15rem;}
.grille.compacte th[scope="row"],.grille.compacte .hr{padding-top:0.9rem;padding-bottom:0.9rem;}
.grille.compacte .px{font-size:1.4rem;padding-top:0.8rem;padding-bottom:0.8rem;}
.grille-note{margin-top:1.4rem;font-size:0.9375rem;color:var(--creme-doux);max-width:66ch;}
.grille-note b{color:var(--creme);font-weight:600;}

.grille thead th{text-align:left;font-size:0.6875rem;font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--creme-faible);padding:0 1.5rem 0.9rem 0;
  border-bottom:1px solid var(--ligne);}
.grille thead th:last-child{text-align:right;padding-right:0;}

.grille .barre{color:var(--creme-faible);text-decoration:line-through;
  text-decoration-thickness:1px;font-size:1.0625rem;padding:1.25rem 1.5rem 1.25rem 0;
  vertical-align:baseline;font-variant-numeric:tabular-nums;}

.grille.claire tr{border-bottom-color:var(--ligne-cf);}
.grille.claire th[scope="row"]{color:var(--encre);}
.grille.claire .hr{color:var(--encre-faible);}
.grille.claire thead th{color:var(--encre-faible);border-bottom-color:var(--ligne-c);}
.clair .grille-note{color:var(--encre-doux);}
.clair .grille-note b{color:var(--encre);}

.carnets{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;}
.carnets h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.4rem;
  margin-bottom:1rem;}

.faits{margin-top:2.4rem;max-width:70ch;}
.faits p{color:var(--creme-doux);font-size:0.9375rem;}
.faits p + p{margin-top:0.9rem;}
.faits b{color:var(--creme);font-weight:600;}

.encart .droite span{font-size:0.9375rem;color:var(--creme-doux);}
.encart .droite .unite{font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--creme-faible);margin:0.6rem 0 1.6rem;text-align:right;}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:start;}
.coches{list-style:none;margin-top:1.8rem;}
.coches li{padding:0.7rem 0 0.7rem 1.8rem;border-top:1px solid var(--ligne-f);
  font-size:0.9375rem;color:var(--creme-doux);position:relative;}
.coches li:first-child{border-top:1px solid var(--ligne);}
.coches li::before{content:'';position:absolute;left:0;top:1.15rem;width:9px;height:5px;
  border-left:1.5px solid var(--rouge-clair);border-bottom:1.5px solid var(--rouge-clair);
  transform:rotate(-45deg);}

.clair .etapes{display:grid;grid-template-columns:repeat(5,1fr);gap:2rem;counter-reset:etape;}
.clair .etape{counter-increment:etape;border-top:1px solid var(--ligne-c);padding-top:1.4rem;}
.clair .etape::before{content:counter(etape);font-family:'Instrument Serif',Georgia,serif;
  font-size:1.7rem;color:var(--rouge-fonce);display:block;margin-bottom:0.7rem;line-height:1;}
.clair .etape h3{font-size:0.9375rem;margin-bottom:0.4rem;color:var(--encre);}
.clair .etape p{color:var(--encre-doux);font-size:0.875rem;}

.acomptes{margin-top:4rem;max-width:640px;}
.acomptes-titre{font-size:0.6875rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--encre-faible);margin-bottom:1.2rem;}

.rassure{border-left:2px solid var(--rouge-clair);padding-left:1.4rem;margin-bottom:2.8rem;
  max-width:64ch;}
.rassure p{font-size:1.125rem;color:var(--creme);}

.grille.delais th[scope="row"]{white-space:nowrap;width:34%;}
.grille.delais td{color:var(--creme-doux);font-size:0.9375rem;padding:1.25rem 0;
  vertical-align:baseline;}
/* ⚠️ .grille thead th:last-child aligne la dernière colonne à droite : une
   règle pensée pour les tableaux de prix, où cette colonne est .px. Ici la
   dernière colonne est du texte (« Ce qui se passe »), aligné à gauche dans
   le corps — sans cette ligne, seul l'en-tête partirait à droite. */
.grille.delais thead th:last-child{text-align:left;padding-right:1.5rem;}

@media (max-width:1000px){
  .carnets,.duo,.encart{grid-template-columns:1fr;gap:2.8rem;}
  .encart .droite{border-left:0;padding-left:0;border-top:1px solid var(--ligne);padding-top:1.6rem;}
  .clair .etapes{grid-template-columns:1fr 1fr;gap:1.8rem;}
}
@media (max-width:860px){
  .etapes{grid-template-columns:1fr;}
  .grille thead{position:absolute;left:-9999px;}
  .grille tr{display:block;padding:1rem 0;border-bottom:1px solid var(--ligne-f);}
  .grille th[scope="row"],.grille .hr,.grille .px,.grille .barre,.grille td{
    display:block;width:100%;padding:0;text-align:left;}
  .grille th[scope="row"]{margin-bottom:0.2rem;}
  .grille .hr{margin-bottom:0.4rem;}
  .grille .barre{margin-bottom:0.2rem;font-size:0.9375rem;}
  .grille .px{font-size:1.5rem;}
  .grille.delais th[scope="row"]{width:auto;white-space:normal;}
  .grille.delais td{padding:0.3rem 0 0;}
  .tva{padding:1.2rem 1.3rem;}
}

/* ENCART OFFRE DÉCOUVERTE — version développée (page Tarifs) */
.decouverte-detail{margin-top:3rem;display:grid;grid-template-columns:auto 1fr;gap:3rem;
  align-items:center;background:var(--nuit-2);border:1px solid var(--ligne);
  border-left:2px solid var(--rouge-clair);border-radius:var(--r);padding:2.4rem 2.8rem;
  max-width:860px;}
.dec-prix{text-align:center;padding-right:2.8rem;border-right:1px solid var(--ligne);}
.dec-prix .avant{display:block;font-size:1.0625rem;color:var(--creme-faible);
  text-decoration:line-through;text-decoration-thickness:1px;margin-bottom:0.2rem;}
.dec-prix b{display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:3.4rem;line-height:1;color:var(--rouge-clair);font-variant-numeric:tabular-nums;}
.dec-prix em{display:block;font-style:normal;font-size:0.6875rem;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--creme-faible);margin-top:0.6rem;}
.dec-txt h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.5rem;
  margin-bottom:0.7rem;}
.dec-txt p{color:var(--creme-doux);font-size:0.9375rem;}
.dec-txt .dec-cond{margin-top:0.9rem;font-size:0.8125rem;color:var(--creme-faible);}
.dec-txt ul{list-style:none;margin:1.2rem 0;}
.dec-txt li{padding:0.45rem 0 0.45rem 1.4rem;font-size:0.875rem;color:var(--creme-doux);
  position:relative;border-top:1px solid var(--ligne-f);}
.dec-txt li:first-child{border-top:0;}
.dec-txt li::before{content:'';position:absolute;left:0;top:1.05rem;width:5px;height:5px;
  border-radius:50%;background:var(--rouge-clair);}
.dec-demande{border-top:1px solid var(--ligne-f);padding-top:0.9rem;
  font-size:0.875rem !important;color:var(--creme-faible) !important;}

@media (max-width:860px){
  .decouverte-detail{grid-template-columns:1fr;gap:1.8rem;padding:1.8rem;}
  .dec-prix{padding-right:0;border-right:0;border-bottom:1px solid var(--ligne);
    padding-bottom:1.4rem;text-align:left;}
}

/* --------- FAQ CENTRÉE (Ateliers, Abonnement, Tarifs) --------- */
.faq-centre .tete{margin-left:auto;margin-right:auto;text-align:center;max-width:none;}
.faq-centre .tete h2{max-width:20ch;margin-left:auto;margin-right:auto;}
.faq-centre .faq{margin-left:auto;margin-right:auto;}

/* -------------------- PAGE ATELIERS ET CONSULTATIONS ---------------------- */

/* ==========================================================
   LE PÉRIMÈTRE QUI S'ALLUME — composant propre à cette page
   ----------------------------------------------------------
   Une plaque nuit posée DANS une section claire : c'est ce qui
   permet l'alternance sans que le plan perde son contraste —
   éteindre quelque chose sur fond clair ne se voit pas.
   UNE seule transformation : le trait du périmètre se dessine
   pendant que l'entourage s'efface. Déclencheur = .reveal,
   dont le crochet vit déjà dans site.js.

   ⚠️ Le vert du jardin (dégradé #vert-jardin dans le SVG) est
   celui du bandeau .jardin de l'accueil. Il n'a pas de jeton
   au §2 : à consigner le jour où le vert devient officiel.
   ========================================================== */
.lieu-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:4.5rem;align-items:center;}
.lieu-txt p{color:var(--encre-doux);margin-top:1.4rem;max-width:46ch;}
.lieu-txt p:first-of-type{margin-top:2rem;font-size:1.125rem;color:var(--encre);}

.lieu-plaque{margin:0;background:var(--nuit);border-radius:var(--r);
  padding:1.8rem 1.8rem 1.4rem;overflow:hidden;}
.lieu-plaque svg{width:100%;height:auto;display:block;}
.lieu-plaque figcaption{margin-top:1rem;font-size:0.75rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--creme-faible);}

/* --- les textes du plan : taille en CSS, jamais en attribut ---
   Sous 860 px le SVG est réduit de moitié ; c'est le seul moyen de
   reprendre les tailles par palier sans toucher au tracé. */
.lieu-plaque .p-t{font-family:'Instrument Serif',Georgia,serif;font-size:17px;fill:var(--creme);}
.lieu-plaque .p-t.sm{font-size:13px;fill:var(--creme-doux);}
.lieu-plaque .p-t.jonction{font-size:20px;fill:var(--rouge-clair);}
.lieu-plaque .p-l{font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:1.6px;
  fill:var(--creme-faible);}
/* sur le vert du jardin, --creme-faible tomberait sous 4,5:1 */
.lieu-plaque .p-l.vert{fill:var(--creme-doux);}
.lieu-plaque .p-l.ac{fill:var(--rouge-clair);font-size:9px;letter-spacing:1.4px;}
.lieu-plaque .p-m{font-family:'Archivo',sans-serif;font-size:8.5px;letter-spacing:1.2px;
  fill:var(--creme-faible);}
/* le cartouche interrompt le double trait du vitrage, comme une cote annotée */
.lieu-plaque .cartouche{fill:var(--nuit);}

/* --- deux lectures du même tracé --- */
.lieu-plaque .p-reperes{display:none;}
.lieu-legende{display:none;}

/* --- l'animation : lente, une seule transformation --- */
.lieu-plaque .dehors{opacity:1;transition:opacity 2.6s var(--doux) .25s;}
.lieu-plaque.on .dehors{opacity:0.12;}

.lieu-plaque .dedans{opacity:0.35;transition:opacity 2.2s var(--doux) .45s;}
.lieu-plaque.on .dedans{opacity:1;}

/* pathLength="100" rend la longueur indépendante de la géométrie :
   modifier le tracé ne casse pas l'animation */
.lieu-plaque .perimetre{stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset 3.2s var(--doux) .35s;}
.lieu-plaque.on .perimetre{stroke-dashoffset:0;}

@media (max-width:1000px){
  .lieu-grid{grid-template-columns:1fr;gap:2.8rem;}
}

/* --- sous 860 px : les libellés sortent du plan et deviennent une légende --- */
@media (max-width:860px){
  .lieu-plaque{padding:1.1rem 1.1rem 1.2rem;}
  .lieu-plaque .p-textes,.lieu-plaque .sm-off{display:none;}
  .lieu-plaque .p-reperes{display:block;}
  .lieu-plaque .p-reperes circle{fill:var(--nuit);stroke:var(--rouge-clair);stroke-width:1.6;}
  .lieu-plaque .p-reperes text{font-family:'Archivo',sans-serif;font-size:19px;font-weight:600;
    fill:var(--creme);}
  .lieu-plaque .p-t{font-size:30px;}
  .lieu-plaque .p-t.jonction{font-size:32px;}
  .lieu-plaque .p-l.vert{font-size:15px;letter-spacing:2px;}

  .lieu-legende{display:grid;grid-template-columns:1fr;gap:0;margin:1.3rem 0 0;
    padding:0;list-style:none;}
  .lieu-legende li{display:grid;grid-template-columns:auto 1fr;gap:0.8rem;
    align-items:baseline;padding:0.5rem 0;border-top:1px solid var(--ligne-f);}
  .lieu-legende li:first-child{border-top:0;}
  .lieu-legende b{font-family:'Archivo',sans-serif;font-size:0.75rem;font-weight:600;
    color:var(--rouge-clair);min-width:1.1em;font-variant-numeric:tabular-nums;}
  .lieu-legende span{font-size:0.875rem;color:var(--creme-doux);}
  .lieu-legende .tenant span{color:var(--creme);}
}

/* mouvement réduit : tout est en position finale, rien ne se dessine */
@media (prefers-reduced-motion:reduce){
  .lieu-plaque .dehors{opacity:0.12 !important;transition:none !important;}
  .lieu-plaque .dedans{opacity:1 !important;transition:none !important;}
  .lieu-plaque .perimetre{stroke-dashoffset:0 !important;transition:none !important;}
}

/* ==========================================================
   LE CONFIGURATEUR — second composant propre à cette page
   ----------------------------------------------------------
   Trois configurations, un seul dessin. Chaque chaise porte ses
   trois positions en variables CSS (--x1/--y1 … --x3/--y3),
   calculées en PHP : le CSS reste générique, la géométrie vit
   dans le HTML. Changer un rayon dans la section redispose tout
   le mobilier sans toucher à cette feuille.

   UNE seule transformation par section : le mobilier se déplace.
   Rien n'apparaît en fondu, rien ne change de couleur.
   Crochet JS : [data-config] — sans lui, la configuration 1
   reste affichée, ce qui est un état valide.
   ========================================================== */
.modul{display:grid;grid-template-columns:0.85fr 1.15fr;gap:4.5rem;align-items:start;}
.modul-txt p{color:var(--creme-doux);max-width:46ch;}
.modul-txt p + p{margin-top:1.6rem;}
.modul-txt p b{color:var(--creme);font-weight:600;}
.modul-liste{list-style:none;margin:1.8rem 0;}
.modul-liste li{padding:0.75rem 0 0.75rem 1.7rem;border-top:1px solid var(--ligne-f);
  font-size:0.9375rem;color:var(--creme-doux);position:relative;}
.modul-liste li:first-child{border-top:1px solid var(--ligne);}
.modul-liste li:last-child{border-bottom:1px solid var(--ligne-f);}
.modul-liste li::before{content:'';position:absolute;left:0;top:1.2rem;width:8px;height:1px;
  background:var(--rouge-clair);}

/* --- les trois onglets --- */
.config-tabs{display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:1.6rem;}
.config-tabs button{padding:0.6rem 1.1rem;font-size:0.8125rem;font-weight:500;
  border:1px solid var(--ligne);border-radius:100px;color:var(--creme-doux);
  transition:background .3s ease,border-color .3s ease,color .3s ease;}
.config-tabs button:hover{border-color:var(--creme-faible);color:var(--creme);}
.config-tabs button[aria-pressed="true"]{background:var(--creme);border-color:var(--creme);
  color:var(--nuit);font-weight:600;}

/* --- le plan --- */
.config-plan{background:var(--nuit-2);border:1px solid var(--ligne-f);border-radius:var(--r);
  padding:1.4rem;}
.config-plan svg{width:100%;height:auto;display:block;}

/* la table : un objet unique qui pivote et va se ranger contre le mur */
.config-plan .table-g rect{fill:rgba(246,246,244,0.06);stroke:var(--creme-faible);stroke-width:2;}
.config-plan .table-g{transition:transform 1.25s var(--doux);}
.config-1 .table-g{transform:translate(230px,130px) rotate(0deg);}
.config-2 .table-g,
.config-3 .table-g{transform:translate(88px,132px) rotate(90deg);}

/* les chaises : chacune glisse vers sa position, en cascade.
   ⚠️ EN CONFIGURATION 2 ELLES SORTENT DE LA SALLE et s'effacent : les
   chaises vont dans le couloir, c'est ce qui libère vraiment les 45 m².
   L'opacité tombe plus vite (.45s) que le déplacement (1.15s), pour
   qu'aucune chaise ne soit encore visible en franchissant la porte. Ne
   pas rendre ces deux durées égales. */
.config-plan .chaise{fill:var(--rouge);
  transition:transform 1.15s var(--doux) var(--d),opacity .45s ease var(--d);}
.config-1 .chaise{transform:translate(var(--x1),var(--y1));}
.config-2 .chaise{transform:translate(var(--x2),var(--y2));opacity:0;}
.config-3 .chaise{transform:translate(var(--x3),var(--y3));}

/* les tapis : posés au sol seulement quand la table est repoussée */
.config-plan .tapis{fill:rgba(219,102,96,0.14);stroke:var(--rouge-clair);stroke-width:1.2;
  opacity:0;transform:scale(0.86);transform-origin:center;transform-box:fill-box;
  transition:opacity .7s ease var(--d),transform .7s var(--doux) var(--d);}
.config-2 .tapis{opacity:1;transform:scale(1);}

/* --- le compteur de surface --- */
.config-etat{position:relative;margin-top:1.5rem;min-height:3.6rem;}
.config-etat .e{position:absolute;inset:0;display:flex;align-items:baseline;gap:0.9rem;
  opacity:0;transition:opacity .5s ease;pointer-events:none;}
.config-etat .e.on{opacity:1;}
.config-etat b{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:2.6rem;
  line-height:1;color:var(--rouge-clair);font-variant-numeric:tabular-nums;}
.config-etat em{font-style:normal;font-size:0.875rem;color:var(--creme-doux);}

@media (max-width:1000px){
  .modul{grid-template-columns:1fr;gap:2.8rem;}
}
@media (max-width:860px){
  .config-plan{padding:0.9rem;}
  .config-tabs button{padding:0.5rem 0.9rem;font-size:0.75rem;}
  .config-etat b{font-size:2.1rem;}
}

/* mouvement réduit : les configurations restent commutables, mais elles
   se substituent l'une à l'autre sans déplacement */
@media (prefers-reduced-motion:reduce){
  .config-plan .table-g,.config-plan .chaise,.config-plan .tapis,
  .config-etat .e{transition:none !important;}
  .config-plan .tapis{transform:scale(1) !important;}
}

/* ==========================================================
   LA SALLE D'EAU — la respiration de la page
   ----------------------------------------------------------
   Volontairement sans schéma ni transformation : deux sections
   à plan animé se suivent juste avant. Le seul geste est un
   chiffre posé en très grand contre un texte court.

   ⚠️ Ne pas confondre avec .jardin-txt .big, qui joue le même
   rôle pour le 350 du jardin : celui-ci est aligné à droite
   contre un filet, celui-là est un chiffre plein sur photo.
   Les deux se suivent sur cette page — s'ils se ressemblaient,
   l'alternance nuit/clair ne suffirait pas à les distinguer.
   ========================================================== */
.eau{display:grid;grid-template-columns:auto 1fr;gap:5rem;align-items:start;}

.eau-chiffre{text-align:right;padding-right:2.5rem;border-right:1px solid var(--ligne-c);
  min-width:9rem;}
.eau-chiffre b{display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(5rem,11vw,9.5rem);line-height:0.82;color:var(--rouge-fonce);}
.eau-chiffre i{display:block;font-style:normal;font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1;color:var(--rouge-fonce);
  margin-top:0.1rem;}
.eau-chiffre span{display:block;margin-top:1.4rem;font-size:0.6875rem;font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--encre-faible);}

.eau-txt h2{margin-top:1.3rem;}
.eau-txt p{color:var(--encre-doux);max-width:52ch;}
.eau-txt .intro{margin-top:1.8rem;font-size:1.25rem;color:var(--encre);}
.eau-txt .intro + p{margin-top:1.4rem;}
/* la chute du paragraphe : c'est la phrase qu'on doit retenir de la section */
.eau-txt .chute{margin-top:2.4rem;padding-left:1.5rem;border-left:2px solid var(--rouge-fonce);
  font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.35rem,2.4vw,1.85rem);
  line-height:1.25;color:var(--encre);max-width:34ch;}

@media (max-width:1000px){
  .eau{grid-template-columns:1fr;gap:2.4rem;}
  .eau-chiffre{text-align:left;padding-right:0;border-right:0;
    border-left:2px solid var(--rouge-fonce);padding-left:1.4rem;
    display:flex;align-items:baseline;gap:0.5rem;flex-wrap:wrap;}
  .eau-chiffre span{width:100%;margin-top:0.6rem;}
}

/* ==========================================================
   LE JARDIN — bandeau photo, puis les trois usages
   ----------------------------------------------------------
   .jardin est le composant commun de l'accueil ; .jardin.photo
   n'ajoute que l'image et retire le chiffre géant. Le dégradé
   reste DERRIÈRE la photo : si le fichier n'est pas encore sur
   le serveur, la section garde son fond au lieu d'être vide.
   ⚠️ L'image ne vit pas dans le Projet — assets/img/ est sur le
   serveur (socle technique, §0).
   ========================================================== */
.jardin.photo{height:clamp(380px,46vw,560px);}
.jardin.photo .fond{
  background-image:url('../img/jardin.webp'),
                   linear-gradient(165deg,#4A4C42,#33362C 55%,#1B1D18);
  background-size:cover;background-position:center 62%;background-repeat:no-repeat;}
/* le voile du bas rend le texte lisible quelle que soit la photo :
   sans lui, le contraste dépend de l'image et retombe sous 4,5:1 */
.jardin.photo .fond::after{
  background:linear-gradient(0deg,rgba(20,19,18,0.86) 0%,rgba(20,19,18,0.44) 34%,
                             rgba(20,19,18,0.06) 62%,rgba(20,19,18,0.26) 100%);}
.jardin-mention{margin-top:1rem;font-size:0.8125rem;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--creme-doux);}

/* --- les trois usages, démarqués par un numéro plutôt qu'un filet ---
   ⚠️ 30/09/2026 : les traits (border-top + border-right/bottom en
   colonnes) retirés sur demande de Séverine. Repris le procédé de
   .etape (numéro en Instrument Serif rouge, ::before + counter) plutôt
   qu'inventer un nouveau motif — même ressort que les « 01/02/03 » de
   la section Étapes, ailleurs sur le site. L'espacement (gap) fait
   maintenant lui seul la séparation entre les trois phrases. */
.dehors-trois{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem 2.5rem;
  counter-reset:dehors;}
.dehors-trois p{counter-increment:dehors;
  font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.15rem,1.9vw,1.5rem);
  line-height:1.3;color:var(--creme);}
.dehors-trois p::before{content:counter(dehors,decimal-leading-zero);display:block;
  font-size:1.05rem;color:var(--rouge-clair);margin-bottom:0.9rem;line-height:1;}

.dehors-chute{margin-top:3rem;max-width:62ch;color:var(--creme-doux);font-size:1.0625rem;}

@media (max-width:1000px){
  .dehors-trois{grid-template-columns:1fr;gap:2rem;}
}

/* ==========================================================
   L'ATMOSPHÈRE — la seule section en colonne décalée
   ----------------------------------------------------------
   Trois sections à deux colonnes se suivent avant celle-ci.
   Le décalage et le blanc à gauche sont ce qui l'en distingue :
   c'est une rupture de grille, pas un ornement.
   ⚠️ Aucun élément décoratif : cette section remplace le
   passage « terrazzo » du §1. Rien ne doit y suggérer un
   matériau, une hauteur ni une lumière traversante.
   ========================================================== */
.piece{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);
  column-gap:4.5rem;row-gap:0;}
.piece-tete{grid-column:1 / -1;max-width:30ch;}
.piece-tete h2{margin-top:1.3rem;}

/* le chapeau court sur les deux colonnes : c'est lui qui pose l'image
   de la pièce, et il porte les seuls faits vérifiés de la section */
.piece-chapo{grid-column:1 / -1;margin-top:3.2rem;max-width:35ch;
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.5rem,3.1vw,2.35rem);line-height:1.22;color:var(--encre);}

/* le corps est décalé en seconde colonne : le blanc de gauche est le
   sujet de la section autant que le texte */
.piece-corps{grid-column:2 / -1;margin-top:3rem;}
.piece-corps p{color:var(--encre-doux);max-width:52ch;font-size:1.0625rem;}

/* observation de terrain, jamais une allégation : petite, en bas, filetée */
.piece-note{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--ligne-c);
  font-size:0.875rem !important;color:var(--encre-faible) !important;max-width:40ch !important;}

@media (max-width:1000px){
  .piece{grid-template-columns:1fr;}
  .piece-chapo{margin-top:2.4rem;max-width:34ch;}
  .piece-corps{grid-column:1 / -1;margin-top:2rem;}
}

/* ==========================================================
   LA FRISE RÉDUITE — section 8
   ----------------------------------------------------------
   Ce n'est PAS la frise de l'accueil : quatre lignes au lieu
   de six, aucun prix par ligne, et un seul montant relié aux
   trois demi-journées par une accolade. Forfait 2 h, journée,
   journée longue et semaine appartiennent à la page Tarifs.

   Elle vit sur fond NUIT, quand .timeline de l'accueil vit sur
   fond clair : les deux ne partagent aucune classe. Seul le
   crochet [data-tl] est commun — c'est le JavaScript qui est
   réutilisé, pas le dessin.
   ========================================================== */
/* ⚠️ Les deux largeurs qui doivent concorder entre l'échelle et les
   pistes. En ch elles divergeaient : le ch de l'échelle, plus petite,
   ne vaut pas celui des lignes. En px, elles ne peuvent plus mentir. */
.horloge{margin-top:1rem;--hor-lab:170px;--hor-gap:20px;--hor-prix:150px;--hor-ecart:40px;}

/* ⚠️ L'échelle doit s'arrêter EXACTEMENT où s'arrêtent les pistes, sinon
   le 22h se retrouve au droit du 20h réel : la marge de droite reprend la
   colonne des prix et son gap, la marge de gauche reprend celle du libellé. */
.hor-echelle{display:flex;justify-content:space-between;
  margin-left:calc(var(--hor-lab) + var(--hor-gap));
  margin-right:calc(var(--hor-prix) + var(--hor-ecart));
  font-size:0.6875rem;font-weight:600;letter-spacing:0.1em;color:var(--creme-faible);
  padding-bottom:0.8rem;border-bottom:1px solid var(--ligne);}

.hor-bloc{display:grid;grid-template-columns:minmax(0,1fr) var(--hor-prix);
  gap:var(--hor-ecart);align-items:center;}
/* la journée est séparée des demi-journées par un filet : ce sont deux
   formules distinctes, pas une quatrième demi-journée */
.hor-bloc.suite{border-top:1px solid var(--ligne-f);margin-top:0.4rem;}

/* l'accolade : elle relie les trois demi-journées au montant unique.
   C'est elle qui dit l'égalité — sans elle, trois barres et un prix
   ne se rattachent à rien. */
.hor-groupe{position:relative;padding:1.2rem 0;}
/* l'accolade ne sert QUE pour le groupe de trois : c'est elle qui relie
   les trois demi-journées à un montant unique. Une seule ligne n'a rien
   à relier. */
.hor-groupe.trois::after{content:'';position:absolute;right:-1.25rem;top:1.6rem;bottom:1.6rem;
  width:9px;border:1px solid var(--rouge-clair);border-left:0;border-radius:0 2px 2px 0;}

.hor-ligne{display:grid;grid-template-columns:var(--hor-lab) minmax(0,1fr);
  gap:var(--hor-gap);align-items:center;padding:0.42rem 0;}
.hor-lab{font-size:0.875rem;color:var(--creme-doux);}
.hor-lab em{display:block;font-style:normal;font-size:0.75rem;color:var(--creme-faible);
  margin-top:0.1rem;}
.hor-piste{position:relative;height:34px;background:rgba(246,246,244,0.045);border-radius:2px;}
.hor-barre{position:absolute;top:0;bottom:0;background:var(--rouge);border-radius:2px;
  display:flex;align-items:center;padding-left:0.75rem;overflow:hidden;
  transform:scaleX(0);transform-origin:left;transition:transform 1s var(--doux);}
.hor-ligne.on .hor-barre{transform:scaleX(1);}
.hor-barre em{font-style:normal;font-size:0.75rem;font-weight:600;letter-spacing:0.04em;
  color:var(--creme);white-space:nowrap;}

/* la journée reste en gris : le rouge des barres est réservé aux trois
   demi-journées, celles que l'accolade relie. Deux formules, deux
   traitements — et la page ne vire pas au rouge. */
.hor-bloc.suite .hor-barre{background:rgba(246,246,244,0.16);}
.hor-bloc.suite .hor-barre em{color:var(--creme);}

.hor-prix{text-align:left;}
.hor-prix b{display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(2.2rem,4vw,3.1rem);line-height:1;color:var(--rouge-clair);}
.hor-prix em{display:block;font-style:normal;margin-top:0.6rem;font-size:0.8125rem;
  line-height:1.45;color:var(--creme-doux);}

.hor-note{margin-top:1.6rem;padding-left:calc(var(--hor-lab) + var(--hor-gap));font-size:0.8125rem;color:var(--creme-faible);
  max-width:80ch;}

.hor-majoration{margin-top:3rem;padding-left:1.5rem;border-left:2px solid var(--rouge-clair);
  max-width:56ch;}
.hor-majoration b{display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--creme);}
.hor-majoration span{display:block;margin-top:0.4rem;font-size:0.9375rem;color:var(--creme-doux);}

@media (max-width:1000px){
  .hor-bloc{grid-template-columns:1fr;gap:1.2rem;}
  .hor-echelle{margin-right:0;}
  .hor-groupe.trois::after{display:none;}
  .hor-prix{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
    padding-top:1.2rem;border-top:1px solid var(--ligne-f);}
  .hor-prix em{margin-top:0;}
}
@media (max-width:860px){
  /* le libellé passe au-dessus de sa barre : 170 px ne tiennent plus */
  .hor-echelle{display:none;}
  .hor-ligne{grid-template-columns:1fr;gap:0.3rem;}
  .hor-piste{height:28px;}
  .hor-note{padding-left:0;}
  /* ⚠️ 09/09/2026 — AJOUT. Depuis que les trois demi-journées partagent
     une seule piste, la barre de la soirée ne vaut plus que 25 % de la
     largeur : à 390 px il restait 1 px entre « 18h30 – 22h » et le bord.
     Un pixel n'est pas une marge — la barre est en overflow:hidden, et un
     repli de police plus large tronquerait l'horaire. Or une barre qui
     affiche « 18h30 – 2 » ne montre pas moins, elle montre faux.
     On récupère la place sur le retrait et la chasse, pas sur le texte. */
  .hor-barre{padding-left:0.5rem;}
  .hor-barre em{font-size:0.6875rem;letter-spacing:0.02em;}
}

/* ==========================================================
   LES TROIS CHEMINS — section 9
   ----------------------------------------------------------
   Trois alternatives, PAS trois étapes : rien n'est numéroté.
   Le §9ter réserve la numérotation à ce qui est réellement une
   séquence — numéroter suggérerait un parcours obligé, alors
   que le carnet n'est pas une suite de la demi-journée.
   Ce n'est pas non plus un aiguilleur : celui-ci appartient à
   la page Tarifs et à la page Contact.
   ========================================================== */
.chemins-intro{margin:-1.5rem 0 2.2rem;font-size:1.125rem;color:var(--encre);}

/* Le commutateur demi-journée / journée. Les vues ne sont masquées que
   si le JavaScript a pris la main : sans lui, les deux familles
   s'affichent l'une sous l'autre et aucun prix n'est perdu. */
.chemins-bloc.bascule-active [data-vue]:not(.on){display:none;}
.chemins-bloc .config-tabs{margin-bottom:1.4rem;}
.clair .config-tabs button{border-color:var(--ligne-c);color:var(--encre-doux);}
.clair .config-tabs button:hover{border-color:var(--encre-faible);color:var(--encre);}
.clair .config-tabs button[aria-pressed="true"]{background:var(--encre);
  border-color:var(--encre);color:var(--clair);}

.chemins{border-top:1px solid var(--ligne-c);}
.chemins + .chemins{margin-top:2rem;}
/* le retrait est donné aux TROIS lignes, avec un filet transparent : sans
   cela, la ligne mise en avant décalait ses colonnes des deux autres et
   les trois prix ne s'alignaient plus */
.chemin{display:grid;grid-template-columns:minmax(0,0.78fr) minmax(0,1.5fr) auto;
  gap:2.5rem;align-items:baseline;padding:1.7rem 1.5rem;
  border-bottom:1px solid var(--ligne-cf);
  border-left:2px solid transparent;}

.ch-profil{font-size:0.6875rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--encre-faible);}
.ch-formule{font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.2rem,2.1vw,1.6rem);line-height:1.2;color:var(--encre);}
.ch-prix{text-align:right;white-space:nowrap;}
.ch-prix i{display:block;font-style:normal;font-size:0.75rem;color:var(--encre-faible);
  margin-bottom:0.3rem;}
.ch-prix b{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.6rem,2.8vw,2.1rem);line-height:1;color:var(--rouge-fonce);}
.ch-prix em{display:block;font-style:normal;margin-top:0.35rem;font-size:0.75rem;
  color:var(--encre-faible);}

/* la troisième ligne est celle vers laquelle pointe le lien : filet rouge
   et fond légèrement plus dense, jamais de couleur pleine — un aplat rouge
   en ferait une offre poussée plutôt qu'un chemin parmi trois */
.chemin.phare{border-left-color:var(--rouge-fonce);background:var(--clair-2);}
.chemin.phare .ch-profil{color:var(--encre-doux);}

.chemins-suite{margin-top:2.8rem;display:flex;flex-direction:column;
  align-items:flex-start;gap:1.6rem;}
.chemins-suite p{color:var(--encre-doux);max-width:58ch;}

@media (max-width:860px){
  .chemin{grid-template-columns:1fr;gap:0.5rem;padding:1.4rem 1.1rem;}
  .ch-prix{text-align:left;}
  .ch-prix em{display:inline;margin-left:0.5rem;}
}

/* -------------------- PAGE BUREAU PRIVATIF (26/08/2026) ------------------- */
/* Aucun jeton de couleur nouveau. Onze sections, sept mises en page
   différentes : la page a été construite section par section en évitant
   à chaque fois le dessin déjà employé ailleurs sur le site.
   ⚠️ Trois sections n'ont AUCUN filet de séparation (4, 8, 9) — décision
   du 26/08 : c'est l'espacement qui sépare. Ne pas réintroduire de
   bordures de tableau « pour aligner ».
   ⚠️ .nb, l'utilitaire d'insécable, est remonté dans les composants
   communs lors de la fusion du 26/08 — il ne sert pas qu'ici. */

/* ==========================================================
   SECTION 3 — le parcours d'arrivée
   ----------------------------------------------------------
   NUMÉROTÉ, et c'est conforme au §9ter : elle se gare, elle
   entre, elle ne croise personne, elle s'assoit — c'est une
   vraie séquence. C'est le seul endroit numéroté de la page.
   ========================================================== */
/* Un trait au-dessus de chaque colonne, comme la section « Vous venez
   d'ailleurs » de l'accueil (.etape). */
.parcours{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;}
.parcours .pas{border-top:1px solid var(--ligne-c);padding-top:1.4rem;}
.parcours .n{display:block;font-family:'Instrument Serif',Georgia,serif;font-size:1.5rem;
  line-height:1;color:var(--rouge-fonce);margin-bottom:1rem;}
.parcours h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.22;color:var(--encre);
  margin-bottom:0.7rem;}
.parcours p{color:var(--encre-doux);font-size:0.9375rem;}

/* ==========================================================
   SECTION 4 — le lieu en chiffres
   ----------------------------------------------------------
   AUCUN filet entre les mesures : c'est le blanc qui les sépare.
   ⚠️ Le parking est volontairement SANS CHIFFRE : afficher
   « 4 à 5 places » plafonne ce qui ne l'est pas, l'avenue
   n'étant pas comptée.
   ========================================================== */
.mesures{display:grid;grid-template-columns:repeat(3,1fr);gap:3.4rem 3rem;}
.mesure b{display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(2.6rem,4.6vw,3.8rem);line-height:1;color:var(--creme);}
.mesure span{display:block;margin-top:0.9rem;font-size:0.6875rem;font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--rouge-clair);}
.mesure em{display:block;margin-top:0.35rem;font-style:normal;font-size:0.9375rem;
  color:var(--creme-doux);}
.mesures-mentions{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem 3rem;
  margin-top:3.6rem;padding-top:2rem;border-top:1px solid var(--ligne);}
.mesures-mentions span{display:block;font-size:0.6875rem;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--creme-faible);
  margin-bottom:0.35rem;}
.mesures-mentions b{font-weight:400;font-size:0.9375rem;color:var(--creme);}

/* ==========================================================
   SECTION 5 — « LE SAS », COMPOSANT PROPRE À CETTE PAGE
   ----------------------------------------------------------
   Deux états d'une même matinée d'entretiens. Le sujet n'est
   pas le rendez-vous, c'est l'INTERVALLE : il est porté par une
   cote d'architecte, dessin qui n'existe nulle part ailleurs.
   ⚠️ Largeurs partagées en px, jamais en ch (règle du 25/08).
   ========================================================== */
.sas{--sas-lab:132px;--sas-gap:22px;margin-top:0.5rem;}

.sas-tabs{display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:2.2rem;}
.sas-tabs button{padding:0.6rem 1.1rem;font-size:0.8125rem;font-weight:500;
  border:1px solid var(--ligne-c);border-radius:100px;color:var(--encre-doux);
  transition:background .3s ease,border-color .3s ease,color .3s ease;}
.sas-tabs button:hover{border-color:var(--encre-faible);color:var(--encre);}
.sas-tabs button[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);
  color:var(--clair);font-weight:600;}

.sas-echelle{display:flex;justify-content:space-between;
  margin-left:calc(var(--sas-lab) + var(--sas-gap));
  font-size:0.6875rem;font-weight:600;letter-spacing:0.1em;color:var(--encre-faible);
  padding-bottom:0.7rem;border-bottom:1px solid var(--ligne-c);}

.sas-corps{position:relative;padding-top:0.4rem;}
.sas-grille{position:absolute;top:0;bottom:0;
  left:calc(var(--sas-lab) + var(--sas-gap));right:0;pointer-events:none;}
.sas-grille i{position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,var(--ligne-cf) 50%,transparent 50%);background-size:1px 6px;}

.sas-ligne{display:grid;grid-template-columns:var(--sas-lab) minmax(0,1fr);
  gap:var(--sas-gap);align-items:center;position:relative;}
.sas-lab{font-size:0.8125rem;color:var(--encre-doux);}
.sas-lab em{display:block;font-style:normal;font-size:0.75rem;color:var(--encre-faible);
  font-variant-numeric:tabular-nums;margin-top:0.1rem;}
.sas-piste{position:relative;height:46px;}

.sas-bloc{position:absolute;top:8px;bottom:8px;background:var(--rouge-fonce);border-radius:2px;
  display:flex;align-items:center;padding:0 0.75rem;font-size:0.75rem;font-weight:600;
  letter-spacing:0.04em;color:var(--clair);white-space:nowrap;overflow:hidden;
  transition:left 1.1s var(--doux);}

/* la ligne intercalaire : le candidat suivant n'existe QUE là */
.sas-entre{display:grid;grid-template-columns:var(--sas-lab) minmax(0,1fr);
  gap:var(--sas-gap);align-items:center;position:relative;}
.sas-entre .sas-piste{height:52px;}
.sas-cote{position:absolute;top:8px;height:14px;
  transition:left 1.1s var(--doux),width 1.1s var(--doux);}
.sas-cote::before,.sas-cote::after{content:'';position:absolute;top:0;bottom:0;width:1px;
  background:var(--rouge-fonce);}
.sas-cote::before{left:0;}
.sas-cote::after{right:0;}
.sas-cote i{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rouge-fonce);}
.sas-cote b{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:0.45rem;
  white-space:nowrap;font-size:0.6875rem;font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--rouge-fonce);}

.sas-1 .sas-cote{background:rgba(163,45,45,0.12);}
.sas-2 .sas-cote{background:none;}

.sas-1 .sas-bloc,.sas-1 .sas-cote{left:var(--a);}
.sas-2 .sas-bloc,.sas-2 .sas-cote{left:var(--b);}
.sas-1 .sas-cote{width:var(--wa);}
.sas-2 .sas-cote{width:var(--wb);}

.sas-etat{position:relative;margin-top:2.2rem;min-height:4.6rem;
  border-top:1px solid var(--ligne-c);padding-top:1.4rem;}
.sas-etat .e{position:absolute;left:0;right:0;top:1.4rem;display:flex;align-items:baseline;
  gap:1rem;flex-wrap:wrap;opacity:0;transition:opacity .5s ease;pointer-events:none;}
.sas-etat .e.on{opacity:1;}
.sas-etat b{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:2.4rem;
  line-height:1;color:var(--rouge-fonce);}
.sas-etat em{font-style:normal;font-size:0.9375rem;color:var(--encre-doux);max-width:56ch;}

/* ==========================================================
   SECTION 6 — un usage à la fois
   ========================================================== */
.trois{display:grid;grid-template-columns:0.9fr 1.55fr;gap:4.5rem;
  border-top:1px solid var(--ligne);padding-top:2.6rem;}
.trois-onglets{display:flex;flex-direction:column;}
.trois-onglets button{text-align:left;padding:1.1rem 1.4rem 1.1rem 1.5rem;
  font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.15rem,1.9vw,1.45rem);
  line-height:1.2;color:var(--creme-faible);position:relative;
  border-top:1px solid var(--ligne-f);
  transition:color .3s ease,background .3s ease;}
.trois-onglets button:first-child{border-top:0;}
.trois-onglets button::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--rouge-clair);transform:scaleY(0);transform-origin:center;
  transition:transform .35s var(--doux);}
.trois-onglets button:hover{color:var(--creme-doux);}
.trois-onglets button[aria-pressed="true"]{color:var(--creme);background:rgba(246,246,244,0.035);}
.trois-onglets button[aria-pressed="true"]::before{transform:scaleY(1);}

.trois-vues{position:relative;}
.trois.bascule-active [data-vue]:not(.on){display:none;}
.trois.bascule-active .trois-vue h3{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;}
.trois-vue h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.15;color:var(--creme);
  max-width:21ch;text-wrap:balance;margin-bottom:1.4rem;}
.trois-vue p{color:var(--creme-doux);max-width:60ch;}
.trois-format{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--ligne-f);
  font-size:0.9375rem;}
.trois-format span{display:block;font-size:0.6875rem;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--creme-faible);margin-bottom:0.4rem;}
.trois-format b{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:1.35rem;color:var(--rouge-clair);font-variant-numeric:tabular-nums;}

/* ==========================================================
   SECTION 7 — quatre phares, puis le reste
   ========================================================== */
.phares{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--ligne-c);}
.phares .phare{padding:2.2rem 2.2rem 0 0;}
.phares .phare + .phare{border-left:1px solid var(--ligne-cf);padding-left:2.2rem;}
.phares svg{width:30px;height:30px;color:var(--rouge-fonce);margin-bottom:1.1rem;}
.phares h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.2;color:var(--encre);
  margin-bottom:0.5rem;}
.phares p{font-size:0.875rem;color:var(--encre-doux);}

.eq-suite{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem 2.5rem;
  margin-top:3.2rem;padding-top:2.4rem;border-top:1px solid var(--ligne-c);}
.eq-suite .eq{display:flex;align-items:flex-start;gap:0.9rem;}
.eq-suite svg{width:22px;height:22px;flex:none;color:var(--rouge-fonce);margin-top:2px;}
.eq-suite b{display:block;font-size:0.9375rem;font-weight:600;color:var(--encre);
  margin-bottom:0.15rem;}
.eq-suite span{display:block;font-size:0.8125rem;color:var(--encre-doux);line-height:1.5;}

.fourni-compris{margin-top:3.2rem;padding-top:1.4rem;border-top:1px solid var(--ligne-c);
  font-size:0.9375rem;color:var(--encre-doux);max-width:62ch;}
.fourni-compris span{display:block;font-size:0.6875rem;font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--encre-faible);
  margin-bottom:0.4rem;}

/* ==========================================================
   SECTION 8 — confidentialité
   ----------------------------------------------------------
   La section la plus courte de la page, juste après la plus
   dense. Le creux EST le geste.
   ========================================================== */
.conf{padding:9rem 0;}
.conf-phrase{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.12;letter-spacing:-0.015em;
  color:var(--creme);max-width:22ch;margin-top:1.8rem;text-wrap:balance;}
.conf-sans{list-style:none;display:flex;flex-wrap:wrap;gap:1rem 3.5rem;margin:2.8rem 0 0;}
.conf-sans li{font-size:1.0625rem;color:var(--creme-doux);}
.conf-sans span{color:var(--rouge-clair);}
.conf-suite{margin-top:3.2rem;color:var(--creme-doux);max-width:52ch;font-size:1.125rem;}
.conf-chute{margin-top:2.2rem;padding-left:1.4rem;border-left:2px solid var(--rouge-clair);
  color:var(--creme);max-width:48ch;font-size:0.9375rem;}

/* ==========================================================
   SECTION 9 — tarifs, les cartes
   ========================================================== */
.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.carte-prix{background:var(--clair-2);padding:1.9rem 1.8rem;border-radius:var(--r);}
.carte-prix b{display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(2.4rem,4vw,3.2rem);line-height:1;color:var(--rouge-fonce);}
.carte-prix span{display:block;margin-top:0.9rem;font-size:1.0625rem;font-weight:600;
  color:var(--encre);}
.carte-prix em{display:block;margin-top:0.25rem;font-style:normal;font-size:0.8125rem;
  color:var(--encre-faible);}
.carte-prix.phare{background:var(--encre);}
.carte-prix.phare b{color:#E8837D;}
.carte-prix.phare span{color:var(--clair);}
.carte-prix.phare em{color:rgba(246,246,244,0.6);}
.carte-prix.carnet{background:none;border:1px dashed var(--ligne-c);}
.cartes-pied{margin-top:2.6rem;display:flex;align-items:baseline;justify-content:space-between;
  gap:3rem;flex-wrap:wrap;}
.cartes-pied p{font-size:0.9375rem;color:var(--encre-doux);max-width:70ch;}

/* ==========================================================
   SECTION 10 — FAQ, titre en vis-à-vis
   ========================================================== */
.faq-grid{display:grid;grid-template-columns:0.8fr 1.5fr;gap:4.5rem;align-items:start;}
.faq-tete h2{margin-top:1.3rem;}

/* ==========================================================
   RESPONSIVE — page Bureau privatif
   ========================================================== */
@media (max-width:1000px){
  .parcours{grid-template-columns:1fr 1fr;gap:1.8rem;}
  .mesures{grid-template-columns:1fr 1fr;gap:2.6rem 2.4rem;}
  .mesures-mentions{grid-template-columns:1fr 1fr;}
  .trois{grid-template-columns:1fr;gap:2.4rem;}
  .trois-onglets button{font-size:1.05rem;padding:0.9rem 1rem 0.9rem 1.2rem;}
  .phares{grid-template-columns:1fr 1fr;}
  .phares .phare{padding:1.8rem 1.6rem 1.8rem 0;}
  .phares .phare:nth-child(2n){border-left:1px solid var(--ligne-cf);padding-left:1.6rem;}
  .phares .phare:nth-child(2n+1){border-left:0;padding-left:0;}
  .eq-suite{grid-template-columns:1fr 1fr;}
  .cartes{grid-template-columns:1fr 1fr;}
  .faq-grid{grid-template-columns:1fr;gap:2.4rem;}
}
@media (max-width:860px){
  .parcours{grid-template-columns:1fr;gap:1.6rem;}
  .mesures{grid-template-columns:1fr;gap:2.2rem;}
  .mesures-mentions{grid-template-columns:1fr;gap:1.6rem;}

  /* le libellé passe au-dessus de sa piste : 132 px ne tiennent plus */
  .sas{--sas-lab:0px;--sas-gap:0px;}
  .sas-echelle{margin-left:0;}
  .sas-ligne,.sas-entre{grid-template-columns:1fr;gap:0.2rem;}
  .sas-lab{padding-top:0.6rem;}
  .sas-piste{height:34px;}
  .sas-grille{left:0;}
  .sas-cote b{font-size:0.625rem;letter-spacing:0.04em;}

  .phares{grid-template-columns:1fr;}
  .phares .phare,.phares .phare + .phare{border-left:0;padding:1.6rem 0;
    border-top:1px solid var(--ligne-cf);}
  .phares .phare:first-child{border-top:0;}
  .eq-suite{grid-template-columns:1fr;gap:1.4rem;}
  .conf{padding:5rem 0;}
  .conf-sans{gap:0.6rem 2rem;}
  .conf-sans li{font-size:0.9375rem;}
  .cartes{grid-template-columns:1fr;}
}

/* mouvement réduit : les deux états restent commutables, mais les blocs
   se substituent sans glisser le long de l'axe */
@media (prefers-reduced-motion:reduce){
  .sas-bloc,.sas-cote,.sas-etat .e{transition:none !important;}
  .trois-onglets button::before{transition:none !important;}
}

/* -------------------- PAGE ABONNEMENT HEBDOMADAIRE (26/08/2026) ----------- */
/* ⚠️ Les variantes claires de .coches, .qa, .tva et .col, écrites pour
   cette page, sont REMONTÉES dans les composants communs lors de la
   fusion du 26/08. Ne rien remettre ici. */

/* Section « Ce qui est compris » : texte agrandi, propre à cette page
   (.coches reste au format commun sur la page Tarifs). */
.p-abonnement .coches li{font-size:1.0625rem;}

/* ==========================================================
   LE MOIS TRAVERSÉ — composant propre à cette page
   ----------------------------------------------------------
   ⚠️ AUCUN opacity:0 SUR L'ÉTAT DE DÉPART, et c'est délibéré.
   Les cases partent d'une ÉCHELLE légèrement réduite : sans
   script, les quatre cases rouges sont toutes là, à peine plus
   petites. « Un composant dégradé doit montrer trop, jamais
   rien » (§9ter).
   ========================================================== */
.mois-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:5rem;align-items:center;}
.mois{max-width:460px;}
.mois-creneau{font-size:0.9375rem;font-weight:600;color:var(--encre-doux);margin-bottom:1.4rem;}
.mois-creneau b{color:var(--encre);}
.mois-tete{display:grid;grid-template-columns:repeat(7,1fr);gap:0.5rem;margin-bottom:0.7rem;}
.mois-tete span{text-align:center;font-size:0.6875rem;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--encre-faible);}
.mois-tete span.jour-actif{color:var(--rouge-fonce);}
.mois-cases{display:grid;grid-template-columns:repeat(7,1fr);gap:0.5rem;}
.case{aspect-ratio:1;border:1px solid var(--ligne-c);border-radius:2px;background:transparent;}
.case.actif{border-color:transparent;background:var(--rouge-fonce);position:relative;
  transform:scale(0.86);transition:transform .7s var(--doux) var(--d,0s);}
.mois.on .case.actif{transform:scale(1);}
.case.actif::after{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;
  margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--clair);opacity:0.9;}
.mois-pied{margin-top:1.1rem;display:flex;align-items:center;gap:0.6rem;font-size:0.8125rem;
  color:var(--encre-doux);}
.mois-pied i{width:13px;height:13px;background:var(--rouge-fonce);border-radius:2px;
  display:block;flex:none;}

.mois-legende{padding-left:1.5rem;border-left:2px solid var(--rouge-fonce);max-width:58ch;
  font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.15rem,2vw,1.5rem);
  line-height:1.3;color:var(--encre);}
.mois-texte{margin-top:1.8rem;max-width:68ch;color:var(--encre-doux);}

@media (max-width:1000px){
  .mois-grid{grid-template-columns:1fr;gap:2.8rem;}
}

/* ==========================================================
   CE QUE VOUS NE TRANSPORTEZ PLUS — section 4
   ========================================================== */
.transport{max-width:62ch;}
.transport-intro{color:var(--creme-doux);font-size:1.0625rem;}
.transport-ligne{margin-top:1.6rem;font-size:1.25rem;color:var(--creme);}
.transport-chute{margin-top:2rem;padding-left:1.5rem;border-left:2px solid var(--rouge-clair);
  font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.3rem,2.2vw,1.7rem);
  line-height:1.3;color:var(--creme);max-width:52ch;}

/* ==========================================================
   LE RYTHME — section 5, les trois formules
   ----------------------------------------------------------
   LE PICTOGRAMME FIGURE LE RYTHME, JAMAIS LA DURÉE.
   ========================================================== */
.rythme{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ligne-c);}
.ryt{padding:2.4rem 2.5rem 2rem 0;border-right:1px solid var(--ligne-cf);}
.ryt:last-child{border-right:0;padding-right:0;}
.ryt + .ryt{padding-left:2.5rem;}

.picto{display:flex;gap:0.4rem;margin-bottom:1.5rem;}
.picto-jour{width:24px;height:46px;border:1px solid var(--ligne-c);border-radius:2px;
  position:relative;overflow:hidden;background:transparent;}
.picto-jour::after{content:'';position:absolute;left:0;right:0;bottom:0;
  background:var(--rouge-fonce);height:0;transition:height .8s var(--doux) var(--d,0s);}
.rythme.on .picto-jour.demi::after{height:50%;}
.rythme.on .picto-jour.plein::after{height:100%;}
.picto-lab{font-size:0.6875rem;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--encre-faible);align-self:flex-end;margin-left:0.5rem;padding-bottom:0.15rem;}

.ryt-prix{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(2.8rem,5.4vw,4rem);
  line-height:0.95;color:var(--rouge-fonce);display:block;}
.ryt-unite{display:block;font-size:0.6875rem;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--encre-faible);margin-top:0.6rem;}
.ryt-titre{font-family:'Instrument Serif',Georgia,serif;font-size:1.45rem;line-height:1.2;
  color:var(--encre);margin-top:1.4rem;}
.ryt-txt{font-size:0.9375rem;color:var(--encre-doux);margin-top:0.5rem;}
.rythme-note{margin-top:1.6rem;font-size:0.9375rem;color:var(--encre-doux);max-width:66ch;}
.rythme-note b{color:var(--encre);font-weight:600;}
.rythme + .rythme-note + .tva{margin-top:2rem;}

@media (max-width:1000px){
  .rythme{grid-template-columns:1fr;}
  .ryt{padding:1.8rem 0;border-right:0;border-bottom:1px solid var(--ligne-cf);}
  .ryt + .ryt{padding-left:0;}
  .ryt:last-child{border-bottom:0;}
}

/* ==========================================================
   L'ÉCHANGE — section 10
   ========================================================== */
.echange{position:relative;max-width:1000px;}
.echange::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;
  background-image:linear-gradient(180deg,var(--ligne) 50%,transparent 50%);
  background-size:1px 7px;}
.ech-entetes{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-bottom:2rem;}
.ech-entetes span{font-size:0.6875rem;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--creme-faible);}
.ech-entetes span:last-child{text-align:right;color:var(--rouge-clair);}
.ech-ligne{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-bottom:1.6rem;
  position:relative;}
.ech-bloc{background:var(--nuit-2);border:1px solid var(--ligne-f);border-radius:var(--r);
  padding:1.5rem 1.6rem;position:relative;}
.ech-ligne.vous .ech-bloc{grid-column:1;}
.ech-ligne.eux .ech-bloc{grid-column:2;border-left:2px solid var(--rouge);}
.ech-num{font-size:0.6875rem;font-weight:600;letter-spacing:0.14em;color:var(--creme-faible);
  display:block;margin-bottom:0.5rem;}
.ech-bloc h3{margin-bottom:0.4rem;}
.ech-bloc p{color:var(--creme-doux);font-size:0.9375rem;}
.ech-bloc::after{content:'';position:absolute;top:1.9rem;width:9px;height:9px;border-radius:50%;
  background:var(--nuit);border:1.5px solid var(--creme-faible);}
.ech-ligne.vous .ech-bloc::after{right:-2.35rem;}
.ech-ligne.eux .ech-bloc::after{left:-2.35rem;border-color:var(--rouge);}

@media (max-width:900px){
  .echange::before{left:9px;}
  .ech-entetes{display:none;}
  .ech-ligne{grid-template-columns:1fr;gap:0;padding-left:2.6rem;}
  .ech-ligne.vous .ech-bloc,.ech-ligne.eux .ech-bloc{grid-column:1;}
  .ech-ligne.vous .ech-bloc::after,.ech-ligne.eux .ech-bloc::after{left:-2.35rem;right:auto;}
}

@media (prefers-reduced-motion:reduce){
  .case.actif{transform:scale(1) !important;transition:none !important;}
  .picto-jour::after{transition:none !important;}
  .rythme .picto-jour.demi::after{height:50%;}
  .rythme .picto-jour.plein::after{height:100%;}
}

/* ---------------------- PAGE QUESTIONS FRÉQUENTES (26/08/2026) ------------ */
/* Aucun jeton de couleur nouveau. La page n'ajoute AUCUN crochet à site.js. */

/* ==========================================================
   LE RAIL DE REPÈRES — composant propre à cette page (§9ter)
   ----------------------------------------------------------
   ⚠️ POURQUOI LE RAIL EST RÉPÉTÉ DANS LES QUATRE SECTIONS.
   Un position:sticky ne dépasse jamais son parent. Un rail
   unique aurait obligé à réunir les quatre thèmes dans une
   seule section — donc à renoncer à l'alternance nuit / clair.
   ⚠️ L'état actif vient de PHP, pas d'un observateur.
   ========================================================== */
.faq-th{scroll-margin-top:4.5rem;}
.faq-theme{display:grid;grid-template-columns:230px minmax(0,1fr);gap:5rem;align-items:start;}

/* 6.5rem : sous la barre de navigation une fois qu'elle s'est réduite */
.faq-rail{position:sticky;top:6.5rem;}
.faq-rail-t{font-size:0.6875rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--creme-faible);padding-bottom:0.9rem;border-bottom:1px solid var(--ligne);}
.faq-rail ol{list-style:none;}
.faq-rail li{border-bottom:1px solid var(--ligne-f);
  border-left:2px solid transparent;padding-left:0.9rem;}
.faq-rail li:last-child{border-bottom:0;}
.faq-rail a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0.7rem;
  align-items:baseline;padding:0.95rem 0;
  transition:padding-left .35s var(--doux);}
.faq-rail a:hover{padding-left:0.4rem;}
.faq-rail .n{font-family:'Instrument Serif',Georgia,serif;font-size:0.9375rem;line-height:1;
  color:var(--creme-faible);font-variant-numeric:tabular-nums;}
.faq-rail .l{font-size:0.875rem;line-height:1.35;color:var(--creme-doux);
  transition:color .25s ease;}
.faq-rail .c{font-size:0.75rem;color:var(--creme-faible);font-variant-numeric:tabular-nums;
  /* ⚠️ position:relative OBLIGATOIRE, et ce n'est pas cosmétique. Le .sr-only
     qu'il contient est en position:absolute ; sans ancre ici, son bloc
     englobant devient la <section>, il sort du conteneur défilant du rail et
     pousse la page de 349 px en 390 px. Le débordement était invisible —
     body{overflow-x:hidden} le masquait — mais bien réel. */
  position:relative;}
.faq-rail a:hover .l{color:var(--creme);}

/* le thème qu'on est en train de lire */
.faq-rail li.on{border-left-color:var(--rouge-clair);}
.faq-rail li.on .n{color:var(--rouge-clair);}
.faq-rail li.on .l{color:var(--creme);font-weight:600;}

/* variante claire — mêmes planchers de contraste qu'ailleurs */
.clair .faq-rail-t{color:var(--encre-faible);border-bottom-color:var(--ligne-c);}
.clair .faq-rail li{border-bottom-color:var(--ligne-cf);}
.clair .faq-rail .n,.clair .faq-rail .c{color:var(--encre-faible);}
.clair .faq-rail .l{color:var(--encre-doux);}
.clair .faq-rail a:hover .l{color:var(--encre);}
.clair .faq-rail li.on{border-left-color:var(--rouge-fonce);}
.clair .faq-rail li.on .n{color:var(--rouge-fonce);}
.clair .faq-rail li.on .l{color:var(--encre);}

.faq-corps .faq{max-width:none;}
.faq-suite{margin-top:2.4rem;}

@media (max-width:1000px){
  /* ⚠️ minmax(0,1fr) et non 1fr : une colonne 1fr a min-width:auto, elle
     s'élargit à la taille du contenu au lieu de le laisser défiler —
     349 px de débordement mesurés en 390 px avant correction. */
  .faq-theme{grid-template-columns:minmax(0,1fr);gap:2rem;}
  .faq-rail{position:static;min-width:0;}
  .faq-rail-t{display:none;}
  /* ⚠️ 02/10/2026 — LES QUATRE THÈMES PASSENT À LA LIGNE AU LIEU DE DÉFILER.
     C'était un rail horizontal en overflow-x:auto, avec la barre de
     défilement masquée des trois façons possibles (scrollbar-width,
     -ms-overflow-style, ::-webkit-scrollbar). Sur un téléphone, deux
     pastilles tenaient à l'écran et RIEN n'annonçait les deux autres : ni
     barre, ni ombre, ni pastille coupée au bord. Un sommaire dont on ne
     voit que la moitié ne remplit pas son office — et c'est la seule
     navigation entre les thèmes une fois le sommaire de la section 3
     dépassé.
     flex-wrap:wrap les met toutes à l'écran, sur deux lignes en 390 px.
     ⚠️ NE PAS RÉTABLIR overflow-x SANS RÉTABLIR LA BARRE. Masquer
     l'ascenseur d'une zone qui défile, c'est cacher la seule chose qui
     disait qu'elle défilait. */
  .faq-rail ol{display:flex;flex-wrap:wrap;gap:0.5rem;max-width:100%;}
  .faq-rail li{flex:none;border-bottom:0;border-left:0;padding-left:0;}
  .faq-rail a{display:flex;gap:0.5rem;padding:0.5rem 0.95rem;border:1px solid var(--ligne);
    border-radius:100px;transition:background .3s ease,border-color .3s ease;}
  .faq-rail a:hover{padding-left:0.95rem;}
  .faq-rail .n{display:none;}
  .faq-rail li.on a{background:var(--creme);border-color:var(--creme);}
  .faq-rail li.on .l,.faq-rail li.on .c{color:var(--nuit);}
  .clair .faq-rail a{border-color:var(--ligne-c);}
  .clair .faq-rail li.on a{background:var(--encre);border-color:var(--encre);}
  .clair .faq-rail li.on .l,.clair .faq-rail li.on .c{color:var(--clair);}
}

/* ==========================================================
   LE SOMMAIRE — section 3
   ========================================================== */
.somm{list-style:none;border-top:1px solid var(--ligne-c);}
.somm li{border-bottom:1px solid var(--ligne-cf);}
.somm a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2.5rem;
  align-items:baseline;padding:1.9rem 0;
  transition:padding-left .4s var(--doux);}
.somm a:hover{padding-left:1rem;}
.somm .n{font-family:'Instrument Serif',Georgia,serif;font-size:1.6rem;line-height:1;
  color:var(--rouge-fonce);font-variant-numeric:tabular-nums;}
.somm .t b{display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.2;color:var(--encre);
  transition:color .25s ease;}
.somm .t em{display:block;font-style:normal;margin-top:0.4rem;font-size:0.9375rem;
  color:var(--encre-doux);max-width:52ch;}
.somm .c{font-size:0.75rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--encre-faible);white-space:nowrap;font-variant-numeric:tabular-nums;}
.somm a:hover .t b{color:var(--rouge-fonce);}

@media (max-width:860px){
  .somm a{grid-template-columns:auto minmax(0,1fr);gap:0.9rem 1.2rem;padding:1.5rem 0;}
  .somm .c{grid-column:2;}
  .somm .n{font-size:1.3rem;}
}

@media (prefers-reduced-motion:reduce){
  .faq-rail a,.faq-rail .l,.somm a,.somm .t b{transition:none !important;}
  .faq-rail a:hover,.somm a:hover{padding-left:0 !important;}
}

/* -------------------------- PAGE CONTACT (27/08/2026) --------------------- */
/* ⚠️ AUCUN crochet ajouté à site.js — voir le commentaire de .choix. */

/* ==========================================================
   LES QUATRE BLOCS — composant propre à cette page (§9ter)
   ----------------------------------------------------------
   Dessin arrêté le 27/08, APRÈS SIX PROPOSITIONS ÉCARTÉES.
   ⚠️ TOUT LE BLOC EST CLIQUABLE, ET C'EST STRUCTUREL. Les
   étiquettes ont le dessin des onglets du site : sur une page
   où elles ne feraient rien, ce serait un faux signal.
   ⚠️ AUCUNE VOIE MISE EN AVANT. Le fond var(--clair-2) est
   celui du SURVOL.
   ========================================================== */
.choix{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--ligne-c);border:1px solid var(--ligne-c);}

.choix-bloc{position:relative;background:var(--clair);padding:2.4rem 2.2rem;
  display:flex;flex-direction:column;cursor:pointer;
  transition:background .3s ease;}
.choix-bloc:hover{background:var(--clair-2);}
/* le clavier doit voir ce que la souris voit */
.choix-bloc:focus-within{background:var(--clair-2);
  outline:2px solid var(--rouge-fonce);outline-offset:-2px;}

.choix-bloc h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.15;color:var(--encre);
  margin-bottom:0.8rem;}
.choix-bloc p{color:var(--encre-doux);font-size:0.9375rem;}
.choix-chute{margin-top:1.1rem;}

.choix-etiq{list-style:none;display:flex;flex-wrap:wrap;gap:0.45rem;
  margin:1.1rem 0 0;}
.choix-etiq li{padding:0.35rem 0.8rem;border:1px solid var(--ligne-c);
  border-radius:100px;font-size:0.8125rem;color:var(--encre-doux);
  transition:border-color .3s ease,color .3s ease;}
/* Étiquette-lien (18/10/2026) : elle passe AU-DESSUS de la zone cliquable du bloc
   (z-index), sinon le clic irait à la liste des types au lieu de son calendrier. */
.choix-etiq li.lien{padding:0;}
.choix-etiq li.lien a{display:block;position:relative;z-index:1;padding:0.35rem 0.8rem;
  color:inherit;text-decoration:none;}
.choix-etiq li.lien:hover{border-color:var(--rouge-fonce);color:var(--rouge-fonce);}
.choix-etiq li.lien a:focus-visible{outline:2px solid var(--rouge-fonce);outline-offset:2px;border-radius:100px;}
.choix-bloc:hover .choix-etiq li,
.choix-bloc:focus-within .choix-etiq li{border-color:var(--encre-faible);
  color:var(--encre);}

/* ⚠️ 18/10/2026 : le lien n'est PAS positionné (pas de position:relative). Son ::after
   se cale ainsi sur .choix-bloc, qui lui l'est, et couvre exactement son bloc. Avant,
   le lien était positionné et l'::after montait de 100 rem au-dessus de lui : le
   bloc du bas recouvrait celui du haut, et « Vous voulez un devis » ouvrait la FAQ. */
.choix-act{display:inline-flex;align-items:center;gap:0.6rem;
  align-self:flex-start;margin-top:2rem;
  font-size:0.8125rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--rouge-fonce);}
.choix-bloc > .choix-act{margin-top:auto;padding-top:2rem;}
/* la surface cliquable : tout le bloc, sans allonger l'intitulé du lien */
.choix-act::after{content:'';position:absolute;inset:0;}
.choix-act svg{width:14px;height:14px;transition:transform .3s var(--doux);}
.choix-bloc:hover .choix-act svg{transform:translateX(4px);}

@media (max-width:860px){
  .choix{grid-template-columns:1fr;}
  .choix-bloc{padding:1.9rem 1.5rem;}
}

@media (prefers-reduced-motion:reduce){
  .choix-act svg{transition:none !important;transform:none !important;}
}

/* ==========================================================
   CE QUI SE PASSE ENSUITE — section 4
   ========================================================== */
.ensuite{margin-top:4rem;padding-top:2.2rem;border-top:1px solid var(--ligne);}
.ensuite-t{font-size:0.6875rem;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--creme-faible);margin-bottom:1.6rem;}
.ensuite-file{list-style:none;display:flex;flex-wrap:wrap;align-items:stretch;gap:0;}
.ensuite-file li{flex:1 1 12rem;position:relative;padding:0 2.2rem 0 0;
  font-size:0.9375rem;color:var(--creme-doux);line-height:1.5;}
.ensuite-file li + li{padding-left:2.2rem;}
/* le chevron : il relie, il ne numérote pas */
.ensuite-file li + li::before{content:'';position:absolute;left:0.7rem;top:0.45rem;
  width:8px;height:8px;border-top:1.5px solid var(--rouge-clair);
  border-right:1.5px solid var(--rouge-clair);transform:rotate(45deg);}
.ensuite-file li:first-child{color:var(--creme);font-weight:600;}
.ensuite-note{margin-top:2.4rem;padding-left:1.4rem;
  border-left:2px solid var(--rouge-clair);max-width:64ch;
  font-size:0.9375rem;color:var(--creme-doux);}
.ensuite-note b{color:var(--creme);font-weight:600;}

@media (max-width:860px){
  .ensuite-file{flex-direction:column;gap:1rem;}
  .ensuite-file li,.ensuite-file li + li{padding:0 0 0 1.8rem;flex:none;}
  .ensuite-file li::before{content:'';position:absolute;left:0;top:0.45rem;
    width:8px;height:8px;border-top:1.5px solid var(--rouge-clair);
    border-right:1.5px solid var(--rouge-clair);transform:rotate(135deg);}
  .ensuite-file li:first-child::before{display:none;}
}

/* ==========================================================
   VISITER AVANT DE RÉSERVER — section 5
   ========================================================== */
.visite{display:grid;grid-template-columns:0.85fr 1.15fr;gap:4.5rem;
  align-items:start;}
.visite-tete h2{margin-top:1.3rem;}
.visite-phrase{margin-top:1.6rem;font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.25;color:var(--encre);
  padding-left:1.4rem;border-left:2px solid var(--rouge-fonce);max-width:22ch;}
.visite-corps p{color:var(--encre-doux);max-width:58ch;}
.visite-corps p + p{margin-top:1.4rem;}
.visite-lien{margin-top:2rem;}

@media (max-width:1000px){
  .visite{grid-template-columns:1fr;gap:2.4rem;}
}

/* ==========================================================
   OÙ NOUS TROUVER — section 6
   ----------------------------------------------------------
   ⚠️ L'emplacement reste VIDE tant qu'aucun plan n'existe : pas
   de carte tierce embarquée, elle déposerait des cookies avant
   consentement sur la page la plus lue avant une réservation.
   ========================================================== */
.acces{display:grid;grid-template-columns:1.25fr 1fr;gap:4.5rem;align-items:start;}
.acces .fiche table{max-width:none;}
.acces .fiche td a{border-bottom:1px solid rgba(219,102,96,0.4);
  color:var(--rouge-clair);transition:border-color .25s ease;}
.acces .fiche td a:hover{border-bottom-color:var(--rouge-clair);}
.acces-txt{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--ligne-f);
  color:var(--creme-doux);font-size:0.9375rem;max-width:62ch;}
.acces-carte{margin:0;}
.acces-ph{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(150deg,#343130,#211F1E);display:flex;
  align-items:center;justify-content:center;}
.acces-ph span{font-size:0.6875rem;font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;color:rgba(246,246,244,0.3);text-align:center;
  padding:0 2rem;line-height:1.9;}
/* ⚠️ 30/09/2026 — .acces-ph EST DEVENU UN LIEN AUTOUR D'UNE CAPTURE. Le
   fond dégradé et le centrage restent : ils servent de repli tant que
   l'image n'a pas chargé, exactement comme avant. */
.acces-ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s var(--doux);}
.acces-ph:hover img{transform:scale(1.04);}
.acces-carte figcaption{margin-top:0.9rem;font-size:0.75rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--creme-faible);}

@media (max-width:1000px){
  .acces{grid-template-columns:1fr;gap:2.6rem;}
}

/* -------------------- PAGE RÈGLEMENT INTÉRIEUR (27/08/2026) --------------- */
/* Aucun jeton de couleur nouveau. Cinq sections, et un parti pris qui
   s'écarte du §9ter : PAS D'ALTERNANCE nuit / clair. Trois zones — hero
   nuit, tout le règlement sur fond clair, pied nuit.
   ⚠️ AUCUNE APPARITION AU SCROLL SUR CETTE PAGE : un document opposable ne
   doit pas dépendre du JavaScript pour être lisible.
   ⚠️ N'UTILISE PAS .fiche pour le tableau des horaires. */

/* SECTION 1 — HERO
   ⚠️ Volontairement PAS .hero ni .hero-court : site.js sélectionne .hero et
   lui pose .on, ce qui déclencherait le voile, le zoom et le pan de
   l'accueil sur une page sans image. */
.reg-hero{padding:11rem 0 4.5rem;border-bottom:1px solid var(--ligne);}
.reg-hero h1{margin-top:1.4rem;}
.reg-sous{margin-top:1rem;font-size:1.125rem;color:var(--creme-doux);}

.reg-meta{display:flex;flex-wrap:wrap;gap:0.5rem 2.2rem;align-items:baseline;
  margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--ligne-f);
  max-width:70ch;font-size:0.8125rem;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--creme-faible);
  font-variant-numeric:tabular-nums;}
.reg-meta b{color:var(--rouge-clair);font-weight:600;}

.reg-preambule{margin-top:2.6rem;max-width:68ch;}
.reg-preambule p{color:var(--creme-doux);line-height:1.75;}
.reg-preambule p + p{margin-top:1.2rem;}

/* SECTION 2 — LE SOMMAIRE
   ⚠️ LA GRILLE SE REMPLIT COLONNE PAR COLONNE grâce à grid-auto-flow:column.
   Le nombre de rangs arrive de PHP dans --reg-rangs. */
.reg-som ol{list-style:none;display:grid;grid-auto-flow:column;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(var(--reg-rangs,10),auto);
  column-gap:4rem;border-top:1px solid var(--ligne-c);}
.reg-som li{border-bottom:1px solid var(--ligne-cf);}
.reg-som a{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:0.9rem;
  align-items:baseline;padding:0.9rem 0.4rem;
  transition:background .3s var(--doux),padding-left .3s var(--doux);}
.reg-som a:hover{background:var(--clair-2);padding-left:0.9rem;}
.reg-som .n{font-family:'Instrument Serif',Georgia,serif;font-size:1.35rem;line-height:1;
  color:var(--rouge-fonce);font-variant-numeric:tabular-nums;}
.reg-som .l{font-size:1rem;font-weight:500;color:var(--encre);line-height:1.35;}
.reg-som a:hover .l{color:var(--rouge-fonce);}

/* SECTION 3 — LE CORPS */
.reg-corps{padding:1rem 0 2rem;}

/* 5.5rem : sous la barre de navigation une fois qu'elle s'est réduite. */
.reg-art{scroll-margin-top:5.5rem;position:relative;
  display:grid;grid-template-columns:6.5rem minmax(0,68ch);gap:0 2.2rem;
  padding:3.2rem 0 2.8rem;border-top:1px solid var(--ligne-c);}
.reg-art:first-child{border-top:0;padding-top:1rem;}

.reg-num{font-family:'Instrument Serif',Georgia,serif;font-size:3.4rem;line-height:0.85;
  color:var(--rouge-fonce);font-variant-numeric:tabular-nums;
  text-align:right;padding-top:0.35rem;}

.reg-titre{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.12;letter-spacing:-0.01em;
  color:var(--encre);margin-bottom:1.3rem;text-wrap:balance;}

.reg-txt > p{color:var(--encre-doux);line-height:1.75;margin-bottom:1.1rem;}
.reg-txt > p:last-child{margin-bottom:0;}
.reg-txt strong{color:var(--encre);font-weight:600;}

.reg-soustitre{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:1.35rem;line-height:1.2;color:var(--encre);
  margin:2.2rem 0 1rem;padding-top:1.2rem;border-top:1px solid var(--ligne-cf);}
.reg-soustitre em{font-style:normal;font-size:0.75rem;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--encre-faible);
  display:block;margin-top:0.4rem;font-family:'Archivo',sans-serif;}

/* les listes : un tiret court rouge, jamais un rond */
ul.reg-liste{list-style:none;margin:0 0 1.3rem;}
ul.reg-liste li{position:relative;padding-left:1.6rem;margin-bottom:0.7rem;
  color:var(--encre-doux);line-height:1.7;}
ul.reg-liste li:last-child{margin-bottom:0;}
ul.reg-liste li::before{content:'';position:absolute;left:0;top:0.78em;
  width:11px;height:1.5px;background:var(--rouge-fonce);}

.reg-renvoi{color:var(--rouge-fonce);border-bottom:1px solid rgba(163,45,45,0.35);
  transition:border-color .25s ease;}
.reg-renvoi:hover{border-bottom-color:var(--rouge-fonce);}

/* — le tableau des horaires, article 1 — */
.reg-horaires{margin:0 0 1.6rem;}
.reg-horaires table{width:100%;border-collapse:collapse;}
.reg-horaires thead th{text-align:left;font-family:'Archivo',sans-serif;
  font-size:0.6875rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--encre-faible);padding:0 0 0.8rem;border-bottom:1px solid var(--ligne-c);}
.reg-horaires thead th:last-child{text-align:right;}
.reg-horaires tbody th{text-align:left;font-weight:500;color:var(--encre);
  padding:0.85rem 1.5rem 0.85rem 0;border-bottom:1px solid var(--ligne-cf);
  vertical-align:baseline;}
.reg-horaires tbody th em{display:block;font-style:italic;font-weight:400;
  font-size:0.8125rem;color:var(--encre-faible);margin-top:0.15rem;}
.reg-horaires td{text-align:right;white-space:nowrap;color:var(--encre-doux);
  font-variant-numeric:tabular-nums;padding:0.85rem 0;
  border-bottom:1px solid var(--ligne-cf);vertical-align:baseline;}
.reg-horaires tbody tr:last-child th,
.reg-horaires tbody tr:last-child td{border-bottom:0;}

/* LE COMPOSANT PROPRE À CETTE PAGE (§9ter) — le lien d'article copiable.
   ⚠️ AUCUN JAVASCRIPT N'EST NÉCESSAIRE À SON EXISTENCE : le repère est un
   lien d'ancre ordinaire et le marquage vient de :target. */
.reg-ancre{margin-left:0.55rem;font-family:'Archivo',sans-serif;font-size:0.875rem;
  font-weight:600;color:var(--rouge-fonce);vertical-align:0.14em;
  opacity:0;transition:opacity .25s var(--doux);}
.reg-art:hover .reg-ancre,
.reg-ancre:focus-visible{opacity:0.6;}
.reg-ancre:hover{opacity:1;}
@media (hover:none){ .reg-ancre{opacity:0.45;} }

.reg-ancre.copie{opacity:1;}
.reg-ancre.copie::after{content:'lien copié';margin-left:0.5rem;font-size:0.625rem;
  font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--encre-faible);}

.reg-art:target::before{content:'';position:absolute;left:-1.4rem;top:3.2rem;bottom:2.8rem;
  width:2px;background:var(--rouge-fonce);}
.reg-art:first-child:target::before{top:1rem;}

/* SECTION 4 — PIED CONTRACTUEL
   ⚠️ LE BLOC DE SIGNATURE EST MASQUÉ À L'ÉCRAN ET VISIBLE À L'IMPRESSION. */
.reg-contrat-sec .wrap{padding-bottom:5rem;}
.reg-contrat{max-width:68ch;margin-left:8.7rem;padding-top:2.2rem;
  border-top:2px solid var(--encre);}
.reg-vigueur{color:var(--encre);font-weight:500;}
.reg-vigueur b{font-weight:600;}
.reg-adresse{margin-top:0.4rem;font-size:0.9375rem;color:var(--encre-doux);}
.reg-signature{display:none;}
.reg-imprimer{margin-top:2rem;}

/* SECTION 5 — LES AUTRES DOCUMENTS */
.reg-docs ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--ligne);border:1px solid var(--ligne);}
.reg-docs li{background:var(--nuit-2);}
.reg-docs a,.reg-docs span{display:block;padding:1.6rem 1.5rem;font-size:1rem;
  font-weight:500;color:var(--creme-doux);transition:background .3s ease,color .3s ease;}
.reg-docs a:hover{background:#232120;color:var(--creme);}
.reg-docs li.ici span{color:var(--rouge-clair);background:#232120;}

@media (max-width:1000px){
  .reg-som ol{grid-auto-flow:row;grid-template-columns:1fr;
    grid-template-rows:none;}
  .reg-docs ul{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  .reg-hero{padding:7.5rem 0 3rem;}
  .reg-preambule{margin-top:2rem;}
  .reg-art{grid-template-columns:1fr;gap:0;padding:2.4rem 0 2rem;}
  .reg-num{text-align:left;font-size:2.1rem;line-height:1;padding:0 0 0.5rem;}
  .reg-art:target::before{left:-1rem;top:2.4rem;bottom:2rem;}
  .reg-art:first-child:target::before{top:1rem;}
  .reg-horaires thead{position:absolute;left:-9999px;}
  .reg-horaires tbody th,.reg-horaires td{display:block;width:100%;text-align:left;
    border-bottom:0;}
  .reg-horaires tbody th{padding:0.8rem 0 0.1rem;}
  .reg-horaires td{padding:0 0 0.8rem;border-bottom:1px solid var(--ligne-cf);}
  .reg-horaires tbody tr:last-child td{border-bottom:0;}
  .reg-contrat{margin-left:0;}
  .reg-docs ul{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  .reg-ancre,.reg-som a,.reg-renvoi{transition:none !important;}
  .reg-som a:hover{padding-left:0.4rem !important;}
}

/* IMPRESSION — cadré par .p-reglement, ne peut rien changer ailleurs.
   ⚠️ LES FONDS NE S'IMPRIMENT PAS par défaut : toutes les couleurs de texte
   sont donc forcées en noir, et non laissées à l'héritage. */
@media print{
  .p-reglement,
  .p-reglement section,
  .p-reglement .clair{background:#fff !important;color:#000 !important;}
  .p-reglement .reg-hero,
  .p-reglement .reg-hero *,
  .p-reglement .reg-txt,
  .p-reglement .reg-txt *,
  .p-reglement .reg-som *,
  .p-reglement .reg-contrat *{color:#000 !important;}

  .p-reglement footer,
  .p-reglement .reg-docs-sec,
  .p-reglement .reg-ancre,
  .p-reglement .reg-imprimer{display:none !important;}

  .p-reglement .reg-signature{display:block !important;margin-top:2.5rem;}
  .p-reglement .reg-signature p{margin-bottom:1.6rem;}
  .p-reglement .reg-signature span{display:inline-block;min-width:60mm;
    border-bottom:1px dotted #000;}

  .p-reglement{font-size:11pt;}
  .p-reglement .wrap{max-width:none;padding:0;}
  .p-reglement .reg-hero{padding:0 0 1cm;border-bottom:1pt solid #000;}
  .p-reglement .reg-som-sec .wrap{padding:0.6cm 0;}
  .p-reglement .reg-som a:hover{background:none;padding-left:0.4rem;}
  .p-reglement .reg-art{grid-template-columns:2cm 1fr;gap:0 0.6cm;
    padding:0.7cm 0 0.5cm;border-top:0.5pt solid #999;}
  .p-reglement .reg-num{font-size:20pt;}
  .p-reglement .reg-titre{font-size:14pt;break-after:avoid;page-break-after:avoid;}
  .p-reglement .reg-contrat{margin-left:0;max-width:none;}
  .p-reglement .reg-renvoi{border-bottom:0;}
  .p-reglement a[href^="#"]{text-decoration:none;}
}

/* -------------------- PAGE MENTIONS LÉGALES (28/08/2026) ------------------ */
/* ⚠️ RATTRAPAGE DU 03/09/2026 : ce bloc était documenté comme collé depuis
   le 28/08, mais ne l'avait jamais été.
   Six sections, et le même parti que le règlement intérieur : PAS
   D'ALTERNANCE nuit / clair, mais trois zones.
   ⚠️ LA SECTION 4 EST LA SEULE INVERSION, et c'est tout le dessin de la page.
   ⚠️ AUCUNE APPARITION AU SCROLL. */

.ml-hero{padding:11rem 0 4rem;}
.ml-hero h1{margin-top:1.4rem;}
.ml-sous{margin-top:1rem;font-size:1.125rem;color:var(--creme-doux);}
.ml-chapo{margin-top:2rem;max-width:60ch;color:var(--creme-doux);line-height:1.75;}

/* SECTION 2 — SOMMAIRE
   ⚠️ AUCUN NUMÉRO — la numérotation encode une séquence, jamais une liste. */
.ml-som-sec{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);}
.ml-som ul{list-style:none;display:flex;flex-wrap:wrap;gap:0.6rem;}
.ml-som a{display:inline-block;padding:0.6rem 1.15rem;border:1px solid var(--ligne);
  border-radius:100px;font-size:0.8125rem;font-weight:500;color:var(--creme-doux);
  transition:border-color .3s ease,color .3s ease;}
.ml-som a:hover{border-color:var(--creme-faible);color:var(--creme);}

/* LA FICHE D'IDENTITÉ — composant propre à cette page (§9ter)
   ⚠️ CE N'EST PAS .fiche : on ne sait pas quelle ligne le lecteur cherche,
   donc LE MÊME POIDS TYPOGRAPHIQUE PARTOUT.
   ⚠️ UN SEUL DESSIN POUR LES DEUX SECTIONS : c'est la SECTION qui porte le
   fond, jamais le composant. */
.ml-fiche{max-width:860px;}
.ml-fiche > div{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);
  gap:0.35rem 2.4rem;align-items:baseline;
  padding:1.05rem 0;border-top:1px solid var(--ligne-cf);}
.ml-fiche > div:first-child{border-top:1px solid var(--ligne-c);}
.ml-fiche > div:last-child{border-bottom:1px solid var(--ligne-cf);}
.ml-fiche dt{font-size:0.6875rem;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--encre-faible);}
.ml-fiche dd{font-size:1.0625rem;color:var(--encre);line-height:1.55;
  font-variant-numeric:tabular-nums;}
.ml-fiche dd a{border-bottom:1px solid rgba(163,45,45,0.35);color:var(--rouge-fonce);
  transition:border-color .25s ease;}
.ml-fiche dd a:hover{border-bottom-color:var(--rouge-fonce);}

/* variante sur fond nuit — l'hébergeur */
.ml-heb .ml-fiche > div{border-top-color:var(--ligne-f);}
.ml-heb .ml-fiche > div:first-child{border-top-color:var(--ligne);}
.ml-heb .ml-fiche > div:last-child{border-bottom-color:var(--ligne-f);}
.ml-heb .ml-fiche dt{color:var(--creme-faible);}
.ml-heb .ml-fiche dd{color:var(--creme);}
.ml-heb .ml-fiche dd a{color:var(--rouge-clair);border-bottom-color:rgba(219,102,96,0.35);}
.ml-heb .ml-fiche dd a:hover{border-bottom-color:var(--rouge-clair);}

/* LE REPÈRE DE COPIE
   ⚠️ LE BOUTON EST POSÉ PAR LE SCRIPT, JAMAIS PAR LE HTML. */
.ml-cop{display:inline-flex;align-items:baseline;gap:0.7rem;flex-wrap:wrap;}
.ml-copier{border:1px solid var(--ligne-c);border-radius:100px;
  padding:0.2rem 0.7rem;font-family:'Archivo',sans-serif;font-size:0.625rem;
  font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--encre-faible);
  transition:border-color .25s ease,color .25s ease;}
.ml-copier:hover{border-color:var(--rouge-fonce);color:var(--rouge-fonce);}
.ml-copier.copie{border-color:var(--rouge-fonce);color:var(--rouge-fonce);}

.ml-tva{margin-top:2rem;padding-left:1.4rem;border-left:2px solid var(--rouge-fonce);
  max-width:62ch;font-size:0.9375rem;color:var(--encre-doux);}

.ml-heb{background:var(--nuit);}

.ml-blocs{display:grid;gap:2.6rem;max-width:860px;}
.ml-blocs > section{border-top:1px solid var(--ligne-c);padding-top:1.5rem;}
.ml-blocs h3{color:var(--encre);}
.ml-blocs p{margin-top:0.7rem;max-width:68ch;color:var(--encre-doux);line-height:1.75;}
.ml-blocs a{color:var(--rouge-fonce);border-bottom:1px solid rgba(163,45,45,0.35);
  transition:border-color .25s ease;}
.ml-blocs a:hover{border-bottom-color:var(--rouge-fonce);}

@media (max-width:860px){
  .ml-hero{padding:7.5rem 0 2.8rem;}
  .ml-chapo{margin-top:1.6rem;}
  /* l'étiquette passe AU-DESSUS de sa valeur : 17 rem ne tiennent plus */
  .ml-fiche > div{grid-template-columns:minmax(0,1fr);gap:0.3rem;padding:0.95rem 0;}
  .ml-fiche dd{font-size:1rem;}
  .ml-tva{margin-top:1.6rem;}
  .ml-blocs{gap:2rem;}
}

@media (prefers-reduced-motion:reduce){
  .ml-som a,.ml-copier,.ml-fiche dd a,.ml-blocs a{transition:none !important;}
}

@media print{
  .p-mentions,
  .p-mentions section,
  .p-mentions .clair,
  .p-mentions .ml-heb{background:#fff !important;color:#000 !important;}
  .p-mentions .ml-hero *,
  .p-mentions .ml-fiche *,
  .p-mentions .ml-blocs *,
  .p-mentions .ml-tva{color:#000 !important;}

  .p-mentions footer,
  .p-mentions .ml-som-sec,
  .p-mentions .ml-docs-sec,
  .p-mentions .ml-copier{display:none !important;}

  .p-mentions{font-size:11pt;}
  .p-mentions .wrap{max-width:none;padding:0;}
  .p-mentions .ml-hero{padding:0 0 0.8cm;border-bottom:1pt solid #000;}
  .p-mentions .pad{padding:0.7cm 0;}
  .p-mentions .ml-fiche > div{grid-template-columns:6cm 1fr;
    border-top:0.5pt solid #999;padding:0.25cm 0;}
  .p-mentions .ml-fiche > div:last-child{border-bottom:0.5pt solid #999;}
  .p-mentions h2{font-size:14pt;break-after:avoid;page-break-after:avoid;}
}

/* ------------------ PAGE PROTECTION DES DONNÉES (01/09/2026) -------------- */
/* ⚠️ RATTRAPAGE DU 03/09/2026 : comme le bloc Mentions légales ci-dessus, ce
   bloc était documenté comme collé depuis le 01/09, mais ne l'avait jamais
   été. Neuf sections, et — contrairement aux mentions légales et au
   règlement — L'ALTERNANCE DU §9ter EST RESPECTÉE.
   ⚠️ AUCUNE APPARITION AU SCROLL.
   ⚠️ LE SOMMAIRE N'A AUCUNE RÈGLE ICI : il reprend .ml-som-sec / .ml-som,
   composant commun aux pages de documents.
   ⚠️ RENOMMAGE .doc-som TOUJOURS PAS FAIT au 03/09. */

.rg-hero{padding:11rem 0 4rem;}
.rg-hero h1{margin-top:1.4rem;}
.rg-sous{margin-top:1rem;font-size:1.125rem;color:var(--creme-doux);}
.rg-chapo{margin-top:2rem;max-width:58ch;color:var(--creme-doux);line-height:1.75;
  font-size:1.0625rem;}
/* la date de mise à jour : discrète, mais en haut */
.rg-maj{margin-top:2.2rem;font-size:0.8125rem;color:var(--creme-faible);}

.rg-sec-nuit{background:var(--nuit);}
/* la section 4 colle à la 3 : même bloc de lecture, une seule respiration */
.rg-tab-sec{padding-bottom:5.5rem;}
.rg-sec .tete{margin-bottom:2.6rem;}

/* prose de document : une seule largeur de lecture, jamais de colonnes */
.rg-prose{max-width:66ch;}
.rg-prose p + p{margin-top:1.1rem;}
.rg-sec-nuit .rg-prose{color:var(--creme-doux);line-height:1.75;}
.clair .rg-prose{color:var(--encre-doux);line-height:1.75;}

/* SECTION 3 — QUI TRAITE VOS DONNÉES
   ⚠️ EN PROSE, PAS EN FICHE : le dessin « étiquette / valeur / filet » est LE
   COMPOSANT PROPRE des mentions légales (décision CI). */
.rg-qui{max-width:64ch;color:var(--encre-doux);line-height:1.75;}
.rg-qui p + p{margin-top:1.1rem;}
.rg-qui strong{color:var(--encre);font-weight:600;}
.rg-qui a{color:var(--rouge-fonce);border-bottom:1px solid rgba(163,45,45,0.35);
  transition:border-color .25s ease;}
.rg-qui a:hover{border-bottom-color:var(--rouge-fonce);}

.rg-adresse{margin-top:1.3rem;font-style:normal;color:var(--encre);
  line-height:1.7;padding-left:1.2rem;border-left:2px solid var(--rouge-fonce);}

/* SECTION 4 — LE TABLEAU DES TRAITEMENTS · COMPOSANT PROPRE (§9ter)
   ⚠️ LA PREMIÈRE COLONNE EST LA SEULE EN GRAS — entorse assumée à la règle
   CI : ici la colonne « Donnée » sert d'INDEX aux trois autres. */
.rg-tab{width:100%;border-collapse:collapse;text-align:left;}
.rg-tab th{font-size:0.6875rem;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--encre-faible);
  padding:0 1.6rem 0.7rem 0;vertical-align:bottom;white-space:nowrap;
  border-bottom:1px solid var(--ligne-c);}
.rg-tab td{padding:1.15rem 1.6rem 1.15rem 0;vertical-align:top;
  font-size:0.9375rem;line-height:1.6;color:var(--encre-doux);
  border-bottom:1px solid var(--ligne-cf);}
.rg-tab th:last-child,.rg-tab td:last-child{padding-right:0;}
.rg-tab .rg-c-quoi{color:var(--encre);font-weight:600;width:31%;}
.rg-tab .rg-c-fin{width:26%;}
.rg-tab .rg-c-base{width:20%;}
.rg-tab .rg-c-duree{width:23%;font-variant-numeric:tabular-nums;}
/* l'étiquette de fiche : dans le HTML, masquée tant qu'on a les en-têtes */
.rg-tab .rg-l{display:none;}

.rg-notes{margin-top:1.8rem;display:grid;gap:0.55rem;}
.rg-notes p{max-width:74ch;font-size:0.875rem;line-height:1.65;
  color:var(--encre-faible);}
.rg-notes p:first-child{color:var(--encre-doux);padding-left:1.2rem;
  border-left:2px solid var(--rouge-fonce);}

/* SECTION 5 — LES DESTINATAIRES */
.rg-st{list-style:none;margin:0;padding:0;max-width:70ch;
  border-top:1px solid var(--ligne);}
.rg-st li{display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr) auto;
  gap:0.4rem 1.8rem;align-items:baseline;
  padding:1.15rem 0;border-bottom:1px solid var(--ligne-f);}
.rg-st b{font-size:1.0625rem;color:var(--creme);font-weight:600;}
.rg-st span{font-size:0.9375rem;color:var(--creme-doux);line-height:1.6;}

/* la pastille de pays. ⚠️ AUCUN JETON NOUVEAU : --rouge-clair tient 5,4:1. */
.rg-pays{font-style:normal;font-size:0.625rem;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;white-space:nowrap;
  padding:0.25rem 0.7rem;border-radius:100px;
  color:var(--creme-doux);border:1px solid var(--ligne);}
.rg-pays.hors{color:var(--rouge-clair);border-color:rgba(219,102,96,0.5);}

.rg-fin-sec{margin-top:1.8rem;max-width:66ch;color:var(--creme-doux);
  line-height:1.75;}

/* SECTION 6 — LES TRANSFERTS */
.rg-clou{margin-top:2.2rem;max-width:60ch;font-size:1.0625rem;line-height:1.7;
  color:var(--creme);padding-left:1.4rem;border-left:2px solid var(--rouge-clair);}

/* SECTION 7 — LES DROITS
   ⚠️ LA NUMÉROTATION EST PERMISE ICI : ces quatre étapes se font dans l'ordre. */
.rg-marche{list-style:none;margin:0;padding:0;counter-reset:rgm;max-width:66ch;}
.rg-marche li{counter-increment:rgm;position:relative;padding:0 0 1.5rem 3rem;}
.rg-marche li::before{content:counter(rgm,decimal-leading-zero);
  position:absolute;left:0;top:0.15rem;
  font-size:0.6875rem;font-weight:600;letter-spacing:0.1em;
  color:var(--rouge-fonce);font-variant-numeric:tabular-nums;}
.rg-marche b{display:block;color:var(--encre);font-size:1rem;font-weight:600;
  margin-bottom:0.2rem;}
.rg-marche span{color:var(--encre-doux);font-size:0.9375rem;line-height:1.65;}

.rg-effacer{margin-top:0.6rem;}

/* L'ENCART — CNIL (section 7) et bandeau (section 8)
   ⚠️ CE N'EST PAS .encart : cette classe désigne un bloc sur fond --nuit-2
   en DEUX colonnes ; en reprendre le nom aurait cassé quatre pages. */
.rg-note{margin-top:2.6rem;max-width:72ch;background:var(--clair-2);
  border-left:2px solid var(--rouge-fonce);padding:1.6rem 1.9rem;}
.rg-note h3{color:var(--encre);margin-bottom:0.7rem;}
.rg-note p{color:var(--encre-doux);font-size:0.9375rem;line-height:1.7;}
.rg-note p + p{margin-top:0.8rem;}
.rg-note strong{color:var(--encre);font-weight:600;}
.rg-note a{color:var(--rouge-fonce);border-bottom:1px solid rgba(163,45,45,0.35);
  transition:border-color .25s ease;}
.rg-note a:hover{border-bottom-color:var(--rouge-fonce);}
.rg-note .rg-adresse{margin-top:0.9rem;border-left:0;padding-left:0;
  font-size:0.9375rem;font-weight:600;}

/* RESPONSIVE — LA BASCULE DU TABLEAU
   ⚠️ LES <th scope="col"> NE SONT PAS SUPPRIMÉS, seulement masqués
   VISUELLEMENT, et par clip — display:none les retirerait de l'arbre
   d'accessibilité, et l'association colonne/valeur avec eux. */
@media (max-width:860px){
  .rg-hero{padding:7.5rem 0 2.8rem;}
  .rg-chapo{margin-top:1.6rem;}
  .rg-st li{grid-template-columns:minmax(0,1fr);gap:0.35rem;padding:1.05rem 0;}
  .rg-pays{justify-self:start;margin-top:0.35rem;}
}

@media (max-width:760px){
  .rg-tab,
  .rg-tab tbody,
  .rg-tab tr,
  .rg-tab td{display:block;width:auto;}

  .rg-tab thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

  .rg-tab tr{background:var(--clair-2);border-left:2px solid var(--rouge-fonce);
    padding:1.1rem 1.15rem 0.35rem;margin-bottom:0.85rem;}

  .rg-tab td{border:0;padding:0 0 0.85rem;}
  .rg-tab .rg-c-quoi{font-size:1rem;line-height:1.5;padding-bottom:0.9rem;
    margin-bottom:0.85rem;border-bottom:1px solid var(--ligne-cf);}
  .rg-tab .rg-l{display:block;font-size:0.625rem;font-weight:600;
    letter-spacing:0.13em;text-transform:uppercase;color:var(--encre-faible);
    margin-bottom:0.15rem;}

  .rg-marche li{padding-left:2.4rem;}
  .rg-note{padding:1.3rem 1.4rem;}
}

@media (prefers-reduced-motion:reduce){
  .rg-qui a,.rg-note a{transition:none !important;}
}

@media print{
  .p-rgpd,
  .p-rgpd section,
  .p-rgpd .clair,
  .p-rgpd .rg-sec-nuit{background:#fff !important;color:#000 !important;}
  .p-rgpd .rg-hero *,
  .p-rgpd .rg-prose,
  .p-rgpd .rg-qui,
  .p-rgpd .rg-qui *,
  .p-rgpd .rg-tab *,
  .p-rgpd .rg-st *,
  .p-rgpd .rg-marche *,
  .p-rgpd .rg-note *,
  .p-rgpd .rg-clou,
  .p-rgpd .rg-notes p,
  .p-rgpd .rg-fin-sec{color:#000 !important;}

  .p-rgpd footer,
  .p-rgpd .ml-som-sec,
  .p-rgpd .rg-docs-sec{display:none !important;}

  .p-rgpd{font-size:11pt;}
  .p-rgpd .wrap{max-width:none;padding:0;}
  .p-rgpd .rg-hero{padding:0 0 0.8cm;border-bottom:1pt solid #000;}
  .p-rgpd .pad{padding:0.7cm 0;}
  .p-rgpd h2{font-size:14pt;break-after:avoid;page-break-after:avoid;}

  .p-rgpd .rg-tab{font-size:9pt;}
  .p-rgpd .rg-tab th{border-bottom:1pt solid #000;}
  .p-rgpd .rg-tab td{border-bottom:0.5pt solid #999;padding:0.18cm 0.4cm 0.18cm 0;}
  .p-rgpd .rg-tab tr{break-inside:avoid;page-break-inside:avoid;}

  .p-rgpd .rg-note,
  .p-rgpd .rg-clou,
  .p-rgpd .rg-adresse{border-left:1pt solid #000;}
  .p-rgpd .rg-note{background:#fff !important;}
}

/* ------------------------- PAGE CGV (03/09/2026) --------------------------- */
/* Treize sections, alternance nuit / clair respectée du hero au pied.
   ⚠️ AUCUNE APPARITION AU SCROLL SUR CETTE PAGE.
   ⚠️ .cgv-hero est un QUATRIÈME hero de document, délibérément non fusionné
   avec .ml-hero, .reg-hero et .rg-hero. */

.cgv-hero{padding:11rem 0 4rem;}
.cgv-hero h1{margin-top:1.4rem;}
.cgv-sous{margin-top:1rem;font-size:1.125rem;color:var(--creme-doux);max-width:60ch;}
/* VIDE = absente, comme $RGPD['maj'] et $REGLEMENT['date_vigueur'] */
.cgv-maj{margin-top:2.2rem;font-size:0.8125rem;color:var(--creme-faible);}

/* LE BARÈME D'ANNULATION — composant propre à cette page (§9ter)
   ⚠️ L'anneau ne dessine PAS l'acompte — celui-ci n'est JAMAIS remboursé
   dans les trois cas : il montre la part du SOLDE rendue.
   ⚠️ LE POURCENTAGE ARRIVE PAR VARIABLE CSS (--pct), POSÉE EN PHP.
   ⚠️ PUR CSS, AUCUN JAVASCRIPT. */
.cgv-bareme{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem;
  border-top:1px solid var(--ligne-c);padding-top:2.6rem;margin-top:2.4rem;}
.cgv-anneau{position:relative;width:68px;height:68px;border-radius:50%;
  background:conic-gradient(var(--rouge-fonce) calc(var(--pct,0)*1%), var(--ligne-c) 0);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.3rem;}
.cgv-anneau::after{content:'';position:absolute;inset:7px;border-radius:50%;
  background:var(--clair);}
.cgv-anneau em{position:relative;z-index:1;font-style:normal;
  font-family:'Instrument Serif',Georgia,serif;font-size:0.9375rem;color:var(--rouge-fonce);
  font-variant-numeric:tabular-nums;}
.cgv-delai{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.3rem;
  line-height:1.2;color:var(--encre);margin-bottom:0.6rem;}
.cgv-consequence{color:var(--encre-doux);font-size:0.9375rem;line-height:1.65;max-width:30ch;}
.cgv-bareme-note{margin-top:2.2rem;padding-left:1.4rem;
  border-left:2px solid var(--rouge-fonce);max-width:64ch;
  font-size:0.9375rem;color:var(--encre-doux);line-height:1.7;}
.cgv-bareme-note a{color:var(--rouge-fonce);border-bottom:1px solid rgba(163,45,45,0.35);
  transition:border-color .25s ease;}
.cgv-bareme-note a:hover{border-bottom-color:var(--rouge-fonce);}

/* SECTION 7 — ARRHES / ACOMPTE, LA COMPARAISON */
.cgv-arrhes{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--ligne);margin-top:2.2rem;max-width:760px;}
.cgv-arrhes > div{padding:0 2.2rem 0 0;border-right:1px solid var(--ligne-f);}
.cgv-arrhes > div:last-child{border-right:0;padding-right:0;padding-left:2.2rem;}
.cgv-arrhes h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.35rem;
  color:var(--creme);margin-bottom:1.2rem;}
.cgv-arrhes dl{display:grid;gap:1.3rem;}
.cgv-arrhes dt{font-size:0.6875rem;font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--creme-faible);margin-bottom:0.3rem;}
.cgv-arrhes dd{color:var(--creme-doux);font-size:0.9375rem;line-height:1.6;}

/* SECTION 10 — LA SÉANCE MANQUÉE
   Reprend .grille.delais ; il manquait sa variante claire. */
.clair .grille.delais td{color:var(--encre-doux);}

@media (max-width:860px){
  .cgv-hero{padding:7.5rem 0 2.8rem;}
  .cgv-bareme{grid-template-columns:1fr;gap:2.2rem;}
  .cgv-arrhes{grid-template-columns:1fr;gap:1.8rem;}
  .cgv-arrhes > div{border-right:0;padding-right:0;}
  .cgv-arrhes > div:last-child{padding-left:0;border-top:1px solid var(--ligne-f);
    padding-top:1.8rem;}
}

/* aucune transition propre à cette page : l'anneau est un dégradé statique. */

@media print{
  .p-cgv,
  .p-cgv section,
  .p-cgv .clair,
  .p-cgv .rg-sec-nuit{background:#fff !important;color:#000 !important;}
  .p-cgv .cgv-hero *,
  .p-cgv .rg-prose,
  .p-cgv .rg-prose *,
  .p-cgv .cgv-delai,
  .p-cgv .cgv-consequence,
  .p-cgv .cgv-bareme-note,
  .p-cgv .cgv-arrhes *,
  .p-cgv .grille.delais td{color:#000 !important;}

  .p-cgv footer,
  .p-cgv .ml-som-sec{display:none !important;}

  .p-cgv{font-size:11pt;}
  .p-cgv .wrap{max-width:none;padding:0;}
  .p-cgv .cgv-hero{padding:0 0 0.8cm;border-bottom:1pt solid #000;}
  .p-cgv .pad{padding:0.7cm 0;}
  .p-cgv h2{font-size:14pt;break-after:avoid;page-break-after:avoid;}
  .p-cgv .cgv-anneau{display:none;}
  .p-cgv .cgv-bareme{grid-template-columns:1fr;gap:0.4cm;border-top:0.5pt solid #999;}
}

/* ==========================================================================
   PAGE TARIFS — LES SECTIONS DE LA REFONTE DU 01/09/2026
   --------------------------------------------------------------------------
   AJOUTÉ LE 09/09/2026. La page a été restructurée le 01/09 — aiguilleur en
   section 3, frise des créneaux en section 4, paliers en 5, parcours en 10 —
   et AUCUNE de ces classes n'avait jamais reçu de style. La page ne se rendait
   de toute façon pas au-delà de la section 4 (frise() non définie), ce qui a
   masqué le problème : l'audit du 04/09 n'a pu voir ni la section 5 ni la 10.

   Aucune règle existante n'est modifiée : ce bloc n'ajoute que des sélecteurs
   neufs. Les fonds sont respectés section par section — 03, 05, 07, 10 et 12
   sont en .clair, 04, 06, 08, 09 et 11 sur fond nuit. C'est la leçon CZ du
   02/09 : un composant écrit pour un fond ne se pose pas sur l'autre.
   ========================================================================== */

/* ==========================================================
   SECTION 3 — L'AIGUILLEUR EN TROIS QUESTIONS · fond CLAIR
   ----------------------------------------------------------
   Volontairement sans dessin : décision du 01/09, reprise de l'arbitrage du
   27/08 sur la page Contact — l'aiguillage est un service rendu, pas un sujet
   de dessin. Trois lignes de même forme, les réponses en jetons cliquables.
   ⚠️ Les jetons reprennent la forme des onglets du site (.seg, .config-tabs) :
   la règle du 27/08 l'autorise parce qu'ils CLIQUENT réellement — chacun mène
   à une ancre distincte de la page.
   ========================================================== */
.aiguille{border-top:1px solid var(--ligne-c);}
.aig-ligne{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:1rem 2.5rem;align-items:baseline;
  padding:1.7rem 0;border-bottom:1px solid var(--ligne-cf);}
.aig-q{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.2;color:var(--encre);}
.aig-rep{list-style:none;display:flex;flex-wrap:wrap;gap:0.5rem;}
.aig-rep a{display:inline-block;padding:0.5rem 1rem;
  border:1px solid var(--ligne-c);border-radius:100px;
  font-size:0.875rem;color:var(--encre-doux);
  transition:border-color .3s ease,color .3s ease,background .3s ease;}
.aig-rep a:hover{border-color:var(--rouge-fonce);color:var(--encre);background:var(--clair-2);}
.aig-note{margin-top:1.7rem;font-size:0.9375rem;color:var(--encre-faible);}

/* ==========================================================
   SECTION 4 — LA FRISE DES CRÉNEAUX · fond NUIT
   COMPOSANT PROPRE DE LA PAGE (§9ter)
   ----------------------------------------------------------
   Ce n'est ni .timeline (accueil, fond clair, prix en colonne à part) ni
   .horloge (Ateliers, fond nuit, accolade et prix unique) : aucune classe
   n'est partagée. Ce qui distingue celle-ci, c'est que LE PRIX VIT DANS LA
   BARRE, à son extrémité — plus la barre est longue, plus le nombre est gros.

   ⚠️ LA BARRE NE PART PAS D'UNE TAILLE NULLE, ET C'EST LA RÈGLE DU 26/08 :
   « un bloc animé au scroll ne part jamais d'opacity:0 quand son contenu porte
   de l'information ». Ici la barre porte l'horaire ET le prix. C'est donc son
   REMPLISSAGE (::before) qui s'anime, jamais la barre : sans JavaScript, la
   barre reste dessinée en contour, avec son horaire et son prix lisibles — il
   ne manque que la couleur. Un composant dégradé montre trop, jamais rien.

   ⚠️ Largeurs partagées en px et non en ch : l'échelle et les pistes doivent
   tomber au même endroit, et le ch de la petite échelle ne vaut pas celui des
   libellés (règle du 25/08, déjà appliquée à .horloge et .sas).
   ========================================================== */
.creneaux{--cr-lab:190px;--cr-gap:22px;margin-top:1rem;}

.cr-echelle{display:flex;justify-content:space-between;
  margin-left:calc(var(--cr-lab) + var(--cr-gap));
  font-size:0.6875rem;font-weight:600;letter-spacing:0.1em;color:var(--creme-faible);
  padding-bottom:0.8rem;border-bottom:1px solid var(--ligne);}

.cr-ligne{display:grid;grid-template-columns:var(--cr-lab) minmax(0,1fr);
  gap:var(--cr-gap);align-items:center;
  padding:0.7rem 0;border-bottom:1px solid var(--ligne-f);}
.cr-ligne:last-of-type{border-bottom:0;}

.cr-lab{font-size:0.875rem;color:var(--creme-doux);}
.cr-lab em{display:block;font-style:normal;font-size:0.75rem;
  color:var(--creme-faible);margin-top:0.1rem;}
.cr-lab i{display:block;font-style:normal;font-size:0.6875rem;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--rouge-clair);
  margin-top:0.4rem;font-variant-numeric:tabular-nums;}

.cr-piste{position:relative;height:40px;background:rgba(246,246,244,0.045);
  border-radius:2px;}

.cr-barre{position:absolute;top:0;bottom:0;border-radius:2px;overflow:hidden;
  border:1px solid rgba(196,67,62,0.55);
  display:flex;align-items:center;justify-content:space-between;
  gap:0.8rem;padding:0 0.8rem;}
/* le remplissage, seule chose qui s'anime */
.cr-barre::before{content:'';position:absolute;inset:0;background:var(--rouge);
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--doux);}
.cr-ligne.on .cr-barre::before{transform:scaleX(1);}

/* le texte passe AU-DESSUS du remplissage et ne bouge jamais */
.cr-h,.cr-prix{position:relative;z-index:1;white-space:nowrap;color:var(--creme);}
.cr-h{font-size:0.75rem;font-weight:600;letter-spacing:0.04em;}
.cr-prix{font-family:'Instrument Serif',Georgia,serif;font-size:1.15rem;
  font-variant-numeric:tabular-nums;}

/* « à convenir » : un créneau qui ne se dessine pas à une heure fixe */
.cr-barre.libre{border-style:dashed;}
.cr-barre.libre::before{background:#3A3835;}

/* le week-end emprunte la géométrie de la journée mais pas son prix : le
   remplissage passe au blanc, sans bordure rouge, pour ne pas être le sosie
   visuel de la journée complète. Le texte passe en sombre, faute de quoi il
   serait blanc sur blanc. */
.cr-barre.alt{border-color:transparent;}
.cr-barre.alt::before{background:var(--creme);}
.cr-barre.alt .cr-h,.cr-barre.alt .cr-prix{color:var(--nuit);}

/* LE PIVOT — la journée est le pivot commercial de la gamme : seule piste
   haute, seul prix en grand, seul libellé en pleine valeur. La hiérarchie est
   dans la barre, pas dans une carte mise en avant. */
.cr-ligne.pivot .cr-piste{height:58px;}
.cr-ligne.pivot .cr-lab{color:var(--creme);font-weight:600;}
.cr-ligne.pivot .cr-prix{font-size:1.7rem;}

.cr-note{margin-top:1.8rem;padding-left:calc(var(--cr-lab) + var(--cr-gap));
  font-size:0.8125rem;color:var(--creme-faible);}
.cr-note b{color:var(--creme);font-weight:600;}

/* ==========================================================
   SECTION 5 — LES PALIERS DE DÉGRESSIVITÉ · fond CLAIR
   ----------------------------------------------------------
   ⚠️ LA JAUGE EST PROPORTIONNELLE AU COÛT D'UNE JOURNÉE, PAS AU TOTAL — la
   largeur vient de PHP, qui divise par l'étalon d'une journée seule. Le total,
   lui, MONTE de 110 à 400 € : une barre proportionnelle au total dirait le
   contraire de ce que la section vend (§9ter — un composant ne doit pas
   pouvoir affirmer une chose fausse). Aucune largeur n'est décidée ici.
   ⚠️ La ligne « pour mémoire » se distingue par sa COULEUR, jamais par une
   opacité : un aplat translucide ferait tomber son texte sous 4,5:1.
   ========================================================== */
.paliers{border-top:1px solid var(--ligne-c);}
.pal{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr) minmax(0,9rem);
  gap:2rem;align-items:center;
  padding:1.5rem 0;border-bottom:1px solid var(--ligne-cf);}
.pal:last-of-type{border-bottom:0;}

.pal-duree{font-size:1rem;font-weight:600;color:var(--encre);}
.pal-duree em{display:block;font-style:normal;font-size:0.6875rem;font-weight:600;
  letter-spacing:0.11em;text-transform:uppercase;color:var(--encre-faible);
  margin-top:0.2rem;}
.pal.memoire .pal-duree{font-weight:500;color:var(--encre-doux);}

.pal-jauge{position:relative;height:34px;}
.pal-fond{position:absolute;inset:0;background:rgba(27,27,25,0.05);border-radius:2px;}
.pal-barre{position:absolute;top:0;bottom:0;left:0;background:var(--rouge-fonce);
  border-radius:2px;display:flex;align-items:center;gap:0.6rem;padding:0 0.9rem;
  overflow:hidden;}
.pal-barre b{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:1.15rem;color:var(--clair);font-variant-numeric:tabular-nums;
  white-space:nowrap;}
.pal-barre span{font-size:0.6875rem;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;color:rgba(246,246,244,0.88);white-space:nowrap;}
/* l'étalon : gris foncé, jamais rouge — ce n'est pas une offre de la section */
.pal.memoire .pal-barre{background:var(--encre-doux);}

.pal-total{text-align:right;font-family:'Instrument Serif',Georgia,serif;
  font-size:1.5rem;color:var(--encre);font-variant-numeric:tabular-nums;
  white-space:nowrap;}
.pal-total i{display:block;font-style:normal;font-family:'Archivo',sans-serif;
  font-size:0.6875rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--encre-faible);margin-top:0.35rem;}

.pal-note{margin-top:1.5rem;font-size:0.875rem;color:var(--encre-faible);max-width:74ch;}
.pal-note.pal-we{margin-top:0.8rem;padding-left:1.3rem;
  border-left:2px solid var(--rouge-fonce);color:var(--encre-doux);}

/* ==========================================================
   SECTION 6 — L'ÉCONOMIE DU CARNET · fond NUIT
   ----------------------------------------------------------
   Le montant est CALCULÉ par data.php depuis le plein tarif (décision AR).
   Il n'a besoin que d'être distingué du prix unitaire à côté duquel il vit.
   ========================================================== */
.eco{display:inline-block;margin-left:0.6rem;font-size:0.75rem;font-weight:600;
  letter-spacing:0.04em;color:var(--rouge-clair);white-space:nowrap;
  font-variant-numeric:tabular-nums;}

/* ==========================================================
   SECTION 9 — PROLONGER AU-DELÀ DU CRÉNEAU · fond NUIT
   ----------------------------------------------------------
   L'heure supplémentaire a quitté la grille commerciale le 25/08 (décision
   AR-3) : « ce n'est pas une formule qu'on achète, c'est un dépassement qu'on
   régularise ». Sa place est dans les conditions — d'où un bloc à filet, et
   non une ligne de tableau.
   ========================================================== */
.prolonger{margin-top:3.2rem;padding-left:1.5rem;
  border-left:2px solid var(--rouge-clair);max-width:64ch;}
.prolonger b{display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.2rem,2.1vw,1.55rem);line-height:1.2;color:var(--creme);
  margin-bottom:0.5rem;}
.prolonger p{color:var(--creme-doux);font-size:0.9375rem;}

/* ==========================================================
   SECTION 10 — DE LA RÉSERVATION AU JOUR J · fond CLAIR
   ----------------------------------------------------------
   Trois repères en file (cinq à l'origine, ramenés à trois le 18/09/2026
   quand le solde à J-15 a été retiré — $PARCOURS n'a plus que trois étapes,
   grid-template-columns doit suivre). Ce que les colonnes numérotées ne
   disaient pas : QUAND chaque étape arrive, et LAQUELLE engage un paiement.
   Une seule étape porte de l'argent — elle seule a le filet rouge et la
   pastille de montant.
   ⚠️ Aucun marqueur 01/02/03 : la colonne « quand » encode déjà la séquence.
   ⚠️ Volontairement PAS .etapes (accueil et Tarifs) ni .parcours (Bureau) :
   des colonnes filetées numérotées existent déjà deux fois sur le site.
   ========================================================== */
.resa{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--ligne-c);}
.resa-e{padding:1.8rem 1.6rem 0 0;border-right:1px solid var(--ligne-cf);}
.resa-e:last-child{border-right:0;padding-right:0;}
.resa-e + .resa-e{padding-left:1.6rem;}
/* le filet rouge ne marque QUE les étapes qui engagent un paiement */
.resa-e.paie{border-top:2px solid var(--rouge-fonce);margin-top:-1px;}

.resa-quand{font-size:0.6875rem;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--encre-faible);margin-bottom:0.9rem;}
.resa-e.paie .resa-quand{color:var(--rouge-fonce);}

.resa-e h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.22;color:var(--encre);
  margin-bottom:0.5rem;}
.resa-e p{font-size:1rem;color:var(--encre-doux);}

.montant{display:inline-block;margin-top:1.1rem;
  background:var(--rouge-fonce);color:var(--clair);
  padding:0.3rem 0.75rem;border-radius:100px;
  font-size:0.6875rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;}

.resa-pied{margin-top:2.6rem;padding-left:1.4rem;
  border-left:2px solid var(--rouge-fonce);max-width:76ch;
  font-size:0.9375rem;color:var(--encre-doux);}
.resa-pied b{color:var(--encre);font-weight:600;}

/* ==========================================================
   LE LIEN DE RETOUR VERS L'AIGUILLEUR
   ----------------------------------------------------------
   Il ferme les sections 4 à 8 et ramène aux trois questions. Il vit sur les
   DEUX fonds — sections 4, 6 et 8 sur fond nuit, 5 et 7 en clair — donc il a
   sa variante, sans quoi il serait invisible une fois sur deux. C'est
   exactement l'écart CZ du 02/09.
   ⚠️ Ce n'est pas un bouton d'action : la règle « un seul bouton par section »
   reste tenue, ce lien ne quitte pas la page.
   ========================================================== */
.retour{display:inline-flex;align-items:center;gap:0.55rem;margin-top:2.6rem;
  font-size:0.75rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--creme-faible);transition:color .25s ease;}
.retour svg{width:13px;height:13px;transition:transform .3s var(--doux);}
.retour:hover{color:var(--creme);}
.retour:hover svg{transform:translateY(-3px);}
.clair .retour{color:var(--encre-faible);}
.clair .retour:hover{color:var(--encre);}

/* ==========================================================
   RESPONSIVE — page Tarifs
   ========================================================== */
@media (max-width:1000px){
  .aig-ligne{grid-template-columns:minmax(0,1fr);gap:0.9rem;}
  .resa{grid-template-columns:1fr 1fr;}
  .resa-e,.resa-e + .resa-e{padding:1.6rem 1.4rem 1.4rem 0;}
  .resa-e:nth-child(2n){border-right:0;padding-left:1.4rem;}
  .resa-e:nth-child(2n+1){padding-left:0;}
  .pal{grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:1rem 1.6rem;}
  .pal-total{grid-column:1/-1;text-align:left;display:flex;align-items:baseline;
    gap:0.9rem;flex-wrap:wrap;}
  .pal-total i{margin-top:0;}
}
@media (max-width:860px){
  /* le libellé passe AU-DESSUS de sa piste : 190 px ne tiennent plus */
  .creneaux{--cr-lab:0px;--cr-gap:0px;}
  .cr-echelle{display:none;}
  .cr-ligne{grid-template-columns:1fr;gap:0.45rem;padding:0.9rem 0;}
  .cr-piste{height:34px;}
  .cr-ligne.pivot .cr-piste{height:44px;}
  .cr-ligne.pivot .cr-prix{font-size:1.35rem;}
  .cr-note{padding-left:0;}
  .cr-lab i{display:inline-block;margin-top:0.25rem;}

  .aig-rep a{font-size:0.8125rem;padding:0.45rem 0.85rem;}

  .pal{grid-template-columns:1fr;gap:0.7rem;padding:1.3rem 0;}
  .pal-jauge{height:30px;}

  .resa{grid-template-columns:1fr;}
  .resa-e,.resa-e + .resa-e{padding:1.4rem 0;border-right:0;
    border-bottom:1px solid var(--ligne-cf);}
  .resa-e:last-child{border-bottom:0;}
  .prolonger{margin-top:2.4rem;}
}

/* ==========================================================
   MOUVEMENT RÉDUIT — page Tarifs
   ----------------------------------------------------------
   Le remplissage de la frise se pose d'emblée, sans se dérouler. Rien ne
   disparaît : la barre était déjà lisible sans script, elle est ici
   simplement remplie tout de suite.
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  .cr-barre::before{transform:scaleX(1) !important;transition:none !important;}
  .aig-rep a,.retour,.retour svg{transition:none !important;}
  .retour:hover svg{transform:none !important;}
}


/* ── Photos réelles dans les emplacements réservés (29/09/2026) ──────────
   Les blocs .shot et .ph gardent leur fond dégradé par défaut : c'est le
   repli quand aucune photo n'est déclarée. La classe .a-photo, posée par
   la section quand data.php fournit un fichier, substitue l'image.
   Le chemin passe par la variable --photo, écrite en style inline : c'est
   la seule façon de sortir un nom de fichier d'un tableau PHP sans écrire
   d'URL dans la feuille de style. */
.panel .shot.a-photo,
.diapo .ph.a-photo{background:var(--photo) center/cover no-repeat;}

/* ── Fond photo des heros de pages intérieures (29/09/2026) ──────────────
   Seul l'accueil avait une image. Les cinq autres pages commerciales
   s'ouvraient sur du texte, juste après un accueil illustré : l'attention
   tombait à cet endroit précis.

   Trois couches, dans cet ordre :
     .fond-photo > i   la photo, seule à bouger
     .fond-photo::after  le voile, qui rend le texte lisible
     .wrap             le texte, au-dessus de tout

   ⚠️ LE VOILE EST PLUS DENSE À GAUCHE qu'à droite. Le texte est aligné à
   gauche : il lui faut du contraste là, et la photo peut respirer ailleurs.
   Un voile uniforme assez sombre pour le texte éteindrait l'image entière.

   ⚠️ L'ANIMATION EST UN ZOOM ARRIÈRE DE 4 %, EN 2,6 s. Volontairement à la
   limite du perceptible : on doit sentir que l'image est vivante sans
   jamais la voir « bouger ». Elle ne joue qu'une fois, au chargement, et
   se déclenche par la classe .on que site.js pose déjà sur le hero.
   Sans JavaScript, l'image reste à 1,04 : personne ne peut le deviner. */
/* ⚠️ LA HAUTEUR EST CE QUI REND LA PHOTO LISIBLE, pas sa définition.
   Une bande de 1440 × 650 a un rapport de 2,2 quand les prises de vue
   sont en 4/3 (1,33) : `cover` remplit la largeur puis coupe le haut et
   le bas, et il ne reste qu'un bandeau au milieu. À 72 vh le rapport
   tombe à 1,85 et l'image perd un tiers de son recadrage.
   ⚠️ LE CENTRAGE PASSE EN FLEX : avec une hauteur minimale et un
   affichage en bloc, le texte resterait collé en haut. .wrap prend
   width:100%, sinon l'élément flex se réduit à son contenu. */
.hero-court.a-photo{display:flex;align-items:center;
  min-height:clamp(560px,72vh,780px);
  padding-top:7.5rem;padding-bottom:4.5rem;}
.hero-court.a-photo > .wrap{width:100%;}
.hero-court .fond-photo{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-court .fond-photo > i{position:absolute;inset:0;display:block;
  background:var(--photo) center/cover no-repeat;
  /* ⚠️ LE RECADRAGE MONTE À 32 %, IL NE RESTE PAS CENTRÉ. Sur ces prises
     de vue, le tiers bas n'est que du sol : mosaïque grise et dossier de
     fauteuil au premier plan. Ce qui vend la salle vit dans les deux
     tiers hauts. Centrer revenait à garder le sol et couper l'essentiel. */
  background-position:center 32%;
  /* La photo est reprise d'un cran : le voile qui rend le texte lisible
     mange de la lumière, et ces images d'intérieur sont déjà douces. */
  filter:brightness(1.20) saturate(1.10);
  transform:scale(1.04);transition:transform 2.6s var(--doux) .15s;}
.hero-court.on .fond-photo > i{transform:scale(1);}
/* ⚠️ VALEURS ARRÊTÉES AVEC SÉVERINE LE 29/09, après trois essais.
   Gauche 0,72 → 0,80 : la première version laissait mal lire le texte.
   ⚠️ LA ZONE DENSE S'ÉTEND JUSQU'À 62 %, ET CE N'EST PAS DÉCORATIF :
   .reassure (« Jusqu'à 10 stagiaires ») est en flex SANS largeur
   maximale, quand le titre et le chapô sont bridés à 46 caractères. Elle
   traverse toute la largeur du wrap et sortait de la zone couverte.
   ⚠️ LE VOILE DU BAS (0,40 à partir de 70 %) EST CELUI QUI SAUVE CETTE
   LIGNE : c'est là qu'elle vit. Le toucher, c'est la rendre illisible.
   ⚠️ UN CRAN PLUS SOMBRE A ÉTÉ ESSAYÉ PUIS REJETÉ (gauche 0,86, bas
   0,52) : « on ne gagne pas grand-chose au visuel ». Le texte gagnait
   peu, la photo perdait nettement. NE PAS LE REFAIRE. */
.hero-court .fond-photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(20,19,18,0.80) 0%,rgba(20,19,18,0.72) 34%,
                                   rgba(20,19,18,0.38) 62%,rgba(20,19,18,0.12) 86%,
                                   rgba(20,19,18,0.04) 100%),
             linear-gradient(180deg,rgba(20,19,18,0.50) 0%,rgba(20,19,18,0) 16%,
                                    rgba(20,19,18,0) 70%,rgba(20,19,18,0.40) 100%);}
.hero-court .wrap{position:relative;z-index:1;}

/* ⚠️ L'OMBRE PORTÉE N'EST PAS UNE COQUETTERIE : c'est elle qui autorise
   un voile aussi clair sans perdre le contraste. Volontairement à la
   limite du visible — au-delà, le titre prend un aspect de vignette. */
.hero-court.a-photo .wrap{text-shadow:0 1px 2px rgba(20,19,18,0.35);}

/* ── Bandeau de respiration, page Formation (02/10/2026) ─────────────────
   Une photo pleine largeur, sans un mot, entre la mini-FAQ et l'appel
   final. Le dessin vient du hero ci-dessus, et il en RÉUTILISE le fond :
   `.fond-photo` et son `> i` sont déjà définis, seule la section change.
   C'est pour ça que les règles qui suivent sont si courtes.

   ⚠️ AUCUN VOILE EN BIAIS, ET C'EST LE POINT. Le dégradé à 95° du hero
   existe pour rendre un titre lisible par-dessus l'image : il monte à
   0,80 d'opacité à gauche. Ici il n'y a aucun texte — le reprendre
   assombrirait la photo pour protéger ce qui n'existe pas. Il ne reste
   que deux bandes verticales très légères, dont le seul rôle est de
   fondre le haut et le bas dans le fond nuit des sections voisines.

   ⚠️ LA HAUTEUR ET LE CADRAGE SE TIENNENT, ILS NE SE RÈGLENT PAS SÉPARÉMENT.
   Première version : 52 vh et un cadrage à 32 %, repris du hero. Comparée
   en rendu réel le 02/10, elle était PLATE — on voyait la table, mais rien
   ne disait la taille de la pièce. Une photo 4/3 dans une bande de rapport
   2,9 ne garde qu'un ruban central, et c'est le sol du premier plan, coupé
   le premier, qui porte toute la fuite vers le fond.

   ⚠️ ET CE CADRAGE CONTREDIT CELUI DU HERO, DÉLIBÉRÉMENT. Le commentaire
   du hero dit que « le tiers bas n'est que du sol » et monte à 32 % pour
   l'éviter. C'est vrai là-bas : le texte occupe la gauche, et ce qui doit
   se voir est l'équipement. Ici il n'y a aucun texte et le seul rôle de
   l'image est de faire sentir le volume — le sol cesse d'être du remplissage
   pour devenir le sujet. Même réglage, raison inverse. Ne pas « harmoniser »
   les deux valeurs en croyant corriger un oubli.

   ⚠️ LE ZOOM SE DÉCLENCHE PAR .reveal.on, posé par site.js à l'entrée
   dans l'écran — pas au chargement comme pour le hero, qui est déjà
   visible. Retirer .reveal du PHP fige l'image à 1,04 sans rien casser. */
.bandeau-photo{position:relative;overflow:hidden;
  min-height:clamp(460px,64vh,700px);}
.bandeau-photo .fond-photo{position:absolute;inset:0;z-index:0;overflow:hidden;}
/* ⚠️ LE CADRAGE VERTICAL EST UNE VARIABLE, PAS UNE CONSTANTE — et chaque
   page pose la sienne. 45 % convient à la photo de la page Formation,
   où le sol porte la fuite vers une table qui donne l'échelle. Il ne
   convient PAS à une pièce vide : le sol y devient un grand aplat gris
   qui dit « local à louer » au lieu de « espace ». La page Cabinet pose
   donc 32 %. Valeur par défaut : 45 %. */
.bandeau-photo .fond-photo > i{position:absolute;inset:0;display:block;
  background:var(--photo) center var(--pos,45%)/cover no-repeat;
  filter:brightness(1.20) saturate(1.10);
  transform:scale(1.04);transition:transform 2.6s var(--doux) .15s;}
.bandeau-photo.on .fond-photo > i{transform:scale(1);}
.bandeau-photo .fond-photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,19,18,0.55) 0%,rgba(20,19,18,0) 14%,
                                    rgba(20,19,18,0) 78%,rgba(20,19,18,0.55) 100%);}

/* ⚠️ .reveal POSE opacity:0 ET translateY(24px) SUR LA SECTION ENTIÈRE.
   Sur un bloc pleine largeur de 500 px de haut, ce glissement vertical
   découvre une bande de fond au-dessus pendant l'animation. On garde le
   fondu, qui est discret, et on annule le déplacement. */
.bandeau-photo.reveal{transform:none;}

/* Mobile : le texte occupe toute la largeur, le voile doit donc être
   uniforme. Un dégradé latéral y laisserait des mots sur du clair. */
@media (max-width:860px){
  /* La hauteur minimale tombe : sur un écran haut et étroit, 72 vh de
     photo repousserait le texte trop bas. */
  .hero-court.a-photo{min-height:clamp(420px,58vh,560px);
    padding-top:6.5rem;padding-bottom:3.5rem;}
  .hero-court .fond-photo::after{
    background:linear-gradient(180deg,rgba(20,19,18,0.76) 0%,rgba(20,19,18,0.64) 48%,
                                      rgba(20,19,18,0.60) 100%);}
}

/* Mouvement réduit : pas de zoom du tout, l'image est posée nette. */
@media (prefers-reduced-motion: reduce){
  .hero-court .fond-photo > i{transform:none;transition:none;}
}

/* ── LE PLAN ET LA PREUVE — configurateur de la page Ateliers (29/09) ────
   Validé le 29/09. Sert sections/ateliers/04-modulable.php, et elle seule.

   ⚠️ TOUT REPOSE SUR LE SÉLECTEUR `~`, ET C'EST CE QUI ÉVITE DE TOUCHER
   À site.js. Le script pose déjà « config-1 », « config-2 » ou
   « config-3 » sur .config-plan quand on change d'onglet. Le bloc photo
   est son FRÈRE et le suit dans le DOM : il lit cette classe sans qu'une
   seule ligne de JavaScript soit ajoutée. site.js sert six pages, ne pas
   y toucher pour une variante d'une seule est la vraie raison de ce
   montage.
   ⚠️ Corollaire : déplacer .config-photos AVANT .config-plan éteint les
   trois photos, en silence. `~` ne regarde que vers l'aval.

   ⚠️ LES TROIS PHOTOS SONT EMPILÉES, PAS ÉCHANGÉES. Elles occupent la
   même case et se fondent l'une dans l'autre. C'est ce qui donne
   l'impression que la salle se transforme au lieu de donner l'impression
   qu'on feuillette trois images. Le conteneur porte donc un
   aspect-ratio : sans lui, des enfants tous en position absolue
   laisseraient une case de hauteur nulle. */
.config-photos{position:relative;aspect-ratio:4/3;margin-top:1.1rem;
  border-radius:var(--r);overflow:hidden;background:var(--nuit-2);}
.config-photos .cp{position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity .55s var(--doux);pointer-events:none;}
.config-photos .cp > span{position:absolute;inset:0;display:block;
  background:var(--photo) center/cover no-repeat;}
/* La légende reprend le libellé de l'onglet : elle confirme ce qu'on
   regarde, à l'endroit où l'œil se pose après la bascule. */
.config-photos .cp figcaption{position:absolute;left:0;bottom:0;
  padding:0.75rem 1.1rem;font-size:0.6875rem;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--creme);
  background:linear-gradient(0deg,rgba(20,19,18,0.82) 0%,rgba(20,19,18,0) 100%);
  width:100%;}

.config-plan.config-1 ~ .config-photos .cp[data-p="1"],
.config-plan.config-2 ~ .config-photos .cp[data-p="2"],
.config-plan.config-3 ~ .config-photos .cp[data-p="3"]{opacity:1;}

/* Sans JavaScript, .config-plan garde « config-1 » : la première photo
   s'affiche et les deux autres restent invisibles. État valide, comme
   pour le plan lui-même. */

@media (prefers-reduced-motion: reduce){
  .config-photos .cp{transition:none;}
}

/* ── Le bandeau panoramique de la page Bureau a été SUPPRIMÉ le 02/10/2026.
   Il portait sa propre classe, .bandeau-lieu : une bande basse de 42 vh avec
   une légende. Séverine l'a écarté, et la page Bureau utilise désormais
   .bandeau-photo, le composant commun aux pages Formation et Cabinet, défini
   plus haut dans cette feuille.
   ⚠️ CES RÈGLES NE SONT PAS COMMENTÉES MAIS RETIRÉES, après vérification
   qu'aucune page n'emploie plus la classe. Un composant sans usage finit par
   resservir sans qu'on sache pourquoi — c'est ainsi qu'une feuille de style
   se met à contenir trois bandeaux qui font la même chose. ── */

/* ==========================================================
   PAGE CONTACT — SECTION 4bis, LE FORMULAIRE DE DEMANDE
   ----------------------------------------------------------
   ⚠️ 30/09/2026 — CSS MANQUANT DEPUIS LA CRÉATION DE LA SECTION (01/09) :
   sections/contact/04b-formulaire.php posait déjà .dem-centre, .dem-bloc,
   .dem-form, .dem-champ, .dem-large et .dem-rgpd, mais aucune de ces
   classes n'existait ici. Le formulaire s'affichait donc avec le rendu par
   défaut du navigateur — pas le rendu attendu. Repris sur le vocabulaire
   déjà établi (jetons, .btn, et le formulaire court du pied de page tant
   qu'il existait — supprimé le 30/09) plutôt qu'un dessin nouveau.
   ⚠️ « LE BLOC EST CENTRÉ, PAS LE TEXTE » (commentaire du fichier PHP) :
   .tete est centré comme .faq-centre .tete, mais à l'intérieur du
   formulaire les étiquettes et les champs restent alignés à gauche. */
.dem-centre .tete{margin-left:auto;margin-right:auto;text-align:center;}

.dem-bloc{max-width:940px;margin:0 auto;border:1px solid var(--ligne);
  border-radius:var(--r);padding:2.8rem 3.2rem;}

.dem-form{display:grid;grid-template-columns:1fr 1fr;column-gap:1.8rem;row-gap:1.5rem;}
.dem-large{grid-column:1 / -1;}

.dem-champ label{display:block;font-size:0.6875rem;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--creme-faible);margin-bottom:0.5rem;}
/* le point rouge marque un champ nécessaire — jamais un astérisque, qui
   appelle une note de bas de page que cette page n'a pas */
.dem-champ label b{color:var(--rouge-clair);font-style:normal;margin-left:0.3rem;}
/* la précision « (si plusieurs jours) » n'est pas le nom du champ : elle
   ne prend ni les majuscules ni le poids de l'étiquette */
.dem-champ label em{font-style:normal;font-weight:400;text-transform:none;
  color:var(--creme-faible);margin-left:0.3rem;}

.dem-champ input,.dem-champ select,.dem-champ textarea{width:100%;
  background:rgba(246,246,244,0.05);border:1px solid var(--ligne);color:var(--creme);
  padding:0.8rem 1rem;font-family:'Archivo',sans-serif;font-size:0.9375rem;
  border-radius:2px;transition:border-color .25s ease,background .25s ease;}
.dem-champ input:focus,.dem-champ select:focus,.dem-champ textarea:focus{
  border-color:rgba(246,246,244,0.45);background:rgba(246,246,244,0.09);}
.dem-champ textarea{resize:vertical;min-height:9.5rem;line-height:1.5;}

/* select natif, flèche redessinée en CSS pur (pas de fichier image) pour
   rester lisible sur fond sombre — même jeton --creme-faible que le reste
   du formulaire */
.dem-champ select{appearance:none;padding-right:2.4rem;cursor:pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--creme-faible) 50%),
    linear-gradient(135deg, var(--creme-faible) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 16px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat:no-repeat;}
/* ⚠️ 30/09/2026 — LES OPTIONS, PAS SEULEMENT LE SELECT FERMÉ. La plupart
   des navigateurs ouvrent la liste déroulante sur un fond CLAIR imposé par
   le système, quel que soit le background posé sur <select> : color
   héritait le --creme du champ fermé, donc du texte blanc sur un fond
   blanc, invisible. <option> reprend ses propres couleurs, sombres. */
.dem-champ select option{color:var(--encre);background:var(--clair);}

/* l'icône native du sélecteur de date est sombre par défaut : invisible
   sur ce fond. Sans effet hors navigateurs Blink/WebKit, sans dommage non
   plus — le champ reste utilisable. */
.dem-champ input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(0.75);cursor:pointer;}

/* la case RGPD n'est pas un « champ » au sens des autres — son étiquette
   porte une phrase, pas un nom de champ : elle sort de l'habillage
   majuscule ci-dessus, déclarée après pour l'emporter à spécificité égale */
.dem-rgpd label{display:flex;align-items:flex-start;gap:0.7rem;
  font-size:0.875rem;font-weight:400;letter-spacing:normal;text-transform:none;
  color:var(--creme-doux);cursor:pointer;margin-bottom:0;}
.dem-rgpd input[type="checkbox"]{width:16px;height:16px;margin-top:0.2rem;
  flex:none;accent-color:var(--rouge);cursor:pointer;}
.dem-rgpd a{color:var(--rouge-clair);border-bottom:1px solid rgba(219,102,96,0.35);
  transition:border-color .25s ease;}
.dem-rgpd a:hover{border-bottom-color:var(--rouge-clair);}

.dem-pied{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:0.4rem;}
.dem-pied span{font-size:0.875rem;color:var(--creme-faible);}

@media (max-width:860px){
  .dem-bloc{padding:1.9rem 1.6rem;}
  .dem-form{grid-template-columns:1fr;}
  .dem-pied{flex-direction:column;align-items:flex-start;gap:0.9rem;}
}

/* ==========================================================
   PAGE PLAN DU SITE   (ajouté le 02/10/2026, après la bascule)
   ----------------------------------------------------------
   ⚠️ CES RÈGLES MANQUAIENT PUREMENT ET SIMPLEMENT. La page existait depuis
   le 03/09, son HTML était juste, et AUCUN de ses sélecteurs n'avait de
   règle dans cette feuille. Repérée par Séverine le 02/10 au soir, une
   fois le site en ligne.

   Le symptôme était spectaculaire et il est instructif : la flèche de
   fleche() est un <svg> sans attribut width ni height. Sans règle CSS pour
   la dimensionner, un SVG ne vaut pas 14 px par défaut — il s'étale à la
   largeur de son conteneur et prend la hauteur que lui donne son ratio.
   D'où une flèche noire de plus de 1 000 px qui repoussait les onze autres
   liens hors de l'écran : la page semblait n'en contenir qu'un.

   ⚠️ C'EST `.plan-liste svg{width:14px;height:14px}` QUI RÉPARE LA PAGE.
   Tout le reste est de l'habillage. Ne jamais retirer cette ligne.

   ⚠️ Le CSS n'a pas été réinventé : il existait, écrit le 03/09 dans
   cowork-extrait/claude/page-plan-du-site-code.md, et n'avait jamais été
   reporté dans la feuille. Il est repris tel quel, à une exception près,
   signalée plus bas.

   Deux groupes inégaux, chaque ligne porte une phrase : ni .somm (sommaire
   NUMÉROTÉ d'un même document), ni .reg-docs (grille de cases égales, sans
   description). Une seule transformation au survol, le lien avance, comme
   .somm et .faq-rail le font déjà ailleurs.
   ========================================================== */
.plan-hero{padding:11rem 0 4rem;border-bottom:1px solid var(--ligne);}
.plan-hero h1{margin-top:1.2rem;}
.plan-hero p{margin-top:1.2rem;color:var(--creme-doux);font-size:1.125rem;max-width:60ch;}

.plan-groupe{margin-bottom:3rem;}
.plan-groupe:last-child{margin-bottom:0;}
.plan-groupe-titre{font-size:0.6875rem;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--encre-faible);padding-bottom:0.9rem;
  border-bottom:1px solid var(--ligne-c);margin-bottom:0.5rem;}

.plan-liste{list-style:none;}
.plan-liste li{border-bottom:1px solid var(--ligne-cf);}
.plan-liste li:last-child{border-bottom:0;}
.plan-liste a{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.3rem 0;transition:padding-left .3s var(--doux);}
.plan-liste a:hover{padding-left:0.6rem;}
.plan-liste .t{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:1.15rem;color:var(--encre);}
.plan-liste .t em{display:block;font-style:normal;margin-top:0.3rem;
  font-family:'Archivo',sans-serif;font-size:0.875rem;color:var(--encre-doux);}
.plan-liste a:hover .t{color:var(--rouge-fonce);}
/* ⚠️ LA LIGNE QUI RÉPARE LA PAGE — voir l'en-tête de ce bloc. */
.plan-liste svg{width:14px;height:14px;flex:none;color:var(--rouge-fonce);
  transition:transform .3s var(--doux);}
.plan-liste a:hover svg{transform:translateX(4px);}

@media (max-width:860px){
  .plan-hero{padding:7.5rem 0 3rem;}
  .plan-liste a{padding:1.1rem 0;gap:1rem;}
}
@media (prefers-reduced-motion:reduce){
  .plan-liste a,.plan-liste svg{transition:none !important;}
}