/* ==========================================================================
   MAQUETTE 05 — « LA CLAIRIÈRE »
   Newsreader + Nunito Sans · vert sauge sourd sur blanc chaud.
   Feuille unique, mobile d'abord, aucune dépendance.

   RÈGLE DE LA MAQUETTE : aucun angle vif, aucune ombre dure, aucun texte
   sur photographie, aucune cible tactile sous 48 px, aucun contraste sous
   4,5:1 — et 7:1 partout où c'était atteignable sans blanchir la page.
   ========================================================================== */

/* ------------------------------------------------------------- 1. JETONS */
.m5{
  /* --- Surfaces. Trois valeurs de clair, une seule valeur sombre. ------- */
  --fond:#FCFAF6;            /* blanc chaud */
  --creme:#F5F0E6;           /* crème, pour les grands panneaux */
  --sauge-pale:#E7EDE1;      /* vert très lavé, le troisième aplat */
  --blanc:#FFFFFF;           /* les cartes, et rien d'autre */
  --nuit:#2E3D2A;            /* vert profond — appel final */
  --nuit-brun:#2B211C;       /* brun profond — urgences */

  /* --- Encres. Chaque valeur est calculée, aucune n'est choisie à l'œil.
         encre    14,4:1 sur --fond      · encre-2  8,2:1 sur --fond,
         encre-2   7,6:1 sur --creme     ·           7,3:1 sur --sauge-pale.
         Le gris « tertiaire » à 4,5:1 des autres maquettes n'existe pas
         ici : il n'y a que deux encres, et les deux dépassent AAA. ------- */
  --encre:#232821;
  --encre-2:#464F44;

  /* --- Accents ---------------------------------------------------------- */
  --sauge:#4E6749;           /* la couleur de la maquette, en aplat */
  --sauge-plein:#41573C;     /* boutons pleins : blanc dessus à 8,1:1 */
  --sauge-fonce:#35482F;     /* survol */
  --sauge-txt:#3E5339;       /* sauge en TEXTE : 8:1 sur --fond */
  --sauge-clair:#BDD1B3;     /* sauge sur fond profond : 7,1:1 */
  --terre:#7A4A28;           /* l'accent chaud, en texte : 7,1:1 */
  --terre-pale:#F3E6D8;      /* l'accent chaud, en aplat */
  --trait:#E6DFD1;
  --trait-2:#D3CABA;

  --f-titre:'Newsreader','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --f-texte:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* --- Échelle. Le corps de base est à 1,15–1,19 rem, soit 18 à 19 px :
         un cran au-dessus des quatre autres maquettes. Tout le reste en
         découle, y compris les « petits » textes, qui ne descendent jamais
         sous 0,875 rem (14 px). ---------------------------------------- */
  --t-xs:clamp(.8125rem,.79rem + .1vw,.875rem);
  --t-sm:clamp(.9375rem,.91rem + .14vw,1rem);
  --t-base:clamp(1.125rem,1.09rem + .18vw,1.1875rem);
  --t-md:clamp(1.1875rem,1.13rem + .28vw,1.375rem);
  --t-lg:clamp(1.375rem,1.26rem + .55vw,1.75rem);
  --t-xl:clamp(1.75rem,1.48rem + 1.3vw,2.75rem);
  --t-2xl:clamp(2.125rem,1.65rem + 2.2vw,3.5rem);
  --t-3xl:clamp(2.375rem,1.75rem + 3vw,4.25rem);

  --e-1:.25rem; --e-2:.5rem; --e-3:.75rem; --e-4:1rem; --e-5:1.5rem;
  --e-6:2rem; --e-7:3rem; --e-8:4rem;
  --sect-y:clamp(3.25rem,2rem + 5.5vw,6.5rem);
  --goutt:clamp(1.15rem,.7rem + 2.2vw,2.75rem);
  --largeur:76rem;
  --largeur-texte:36rem;     /* ≈ 64 signes au corps de base */

  /* --- Rayons. C'est la seule des huit maquettes franchement arrondie :
         rien ne descend sous 10 px, les cartes sont à 20–24 px, les grands
         panneaux jusqu'à 36 px, les boutons en gélule. ------------------ */
  --r-s:10px; --r-m:16px; --r-l:20px; --r-xl:24px;
  --r-2xl:clamp(22px,1rem + 1.6vw,36px);
  --r-p:999px;
  --av-r:18px;               /* rayon du marqueur « à valider » (socle) */

  /* --- Ombres. Diffuses, jamais posées : deux nappes très larges et très
         claires, aucune ombre courte. ----------------------------------- */
  --ombre-1:0 1px 2px rgba(45,60,42,.03),0 10px 26px -14px rgba(45,60,42,.16);
  --ombre-2:0 2px 5px rgba(45,60,42,.04),0 22px 46px -22px rgba(45,60,42,.24);
  --ombre-3:0 4px 10px rgba(45,60,42,.05),0 40px 80px -36px rgba(45,60,42,.34);

  --transi:240ms cubic-bezier(.33,0,.15,1);
  --transi-l:900ms cubic-bezier(.2,.9,.25,1);
  --tete-h:66px; --barre-h:0px;
}
@media (min-width:64rem){ .m5{ --tete-h:86px } }

/* --------------------------------------------------------------- 2. BASE */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--tete-h) + var(--cmp-h,0px) + 2rem)}
body.m5{
  font-family:var(--f-texte); font-size:var(--t-base); font-weight:400;
  line-height:1.7; color:var(--encre); background:var(--fond);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; padding-bottom:var(--barre-h);
}
img,picture,video,svg{display:block;max-width:100%;height:auto}
picture img{width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
ul,ol{list-style:none;padding:0}
table{border-collapse:collapse;width:100%}

/* Pas de `color` ici : la couleur des titres est HÉRITÉE de la section.
   Déclarée sur ce sélecteur, elle l'emportait (0,1,1) sur `.appel__t` et
   `.urg__t` (0,1,0) et repeignait en encre les deux seuls titres posés sur
   fond profond — 1,3:1, invisibles. */
.m5 h1,.m5 h2,.m5 h3{font-family:var(--f-titre);font-weight:500;
  line-height:1.14;letter-spacing:-.008em;text-wrap:balance}
.m5 h4,.m5 h5{font-family:var(--f-titre);font-weight:600;line-height:1.25}
p{text-wrap:pretty}

/* L'anneau de focus est plus épais et plus arrondi qu'ailleurs : sur cette
   maquette, se repérer au clavier fait partie du sujet. */
:focus-visible{outline:3px solid var(--sauge);outline-offset:3px;border-radius:6px}
::selection{background:var(--sauge-pale);color:var(--sauge-fonce)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* -------------------------------------------------------- 3. UTILITAIRES */
.conteneur{width:100%;max-width:var(--largeur);margin-inline:auto;
  padding-inline:var(--goutt)}
/* Le bloc « étroit » n'est PAS un conteneur centré : c'est un bloc calé sur
   la MÊME marge de gauche que tout le reste. Un conteneur étroit centré, à
   la manière d'une revue, déplace la marge de gauche à chaque section — sur
   une maquette dont l'argument est la lisibilité, la colonne de lecture ne
   doit jamais bouger. */
.etroit{max-width:54rem}
.sect{padding-block:var(--sect-y)}
.sect--serree{padding-top:clamp(1.75rem,1rem + 2.5vw,3rem)}
.sect--haut{padding-top:clamp(2.25rem,1.4rem + 3.5vw,4.5rem)}
.sect--creme{background:var(--creme)}
.sect--sauge{background:var(--sauge-pale)}
.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}

/* Le PANNEAU : la signature de la maquette. Un grand rectangle arrondi posé
   dans la page, au lieu d'une bande pleine largeur. L'alternance des deux
   suffit à donner du rythme sans avoir besoin d'une section sombre. */
.panneau{border-radius:var(--r-2xl);padding:clamp(1.5rem,1rem + 3vw,3.5rem)}
.panneau--creme{background:var(--creme)}
.panneau--sauge{background:var(--sauge-pale)}
.sect--creme .panneau--creme{background:var(--blanc)}

/* Le marqueur « à valider » vient du socle et garde SES couleurs : on n'y
   touche pas, on lui donne seulement son rayon (--av-r, plus haut) et une
   mesure. Laissé à la largeur du bloc, son avertissement le plus long — le
   parcours — courait sur 129 signes, ce qui contredit tout le propos de
   cette maquette. */
.a-valider{max-width:32rem}
.sur{font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sauge-txt);margin-bottom:var(--e-4)}
.sur--nuit{color:var(--sauge-clair)}
.t1{font-size:var(--t-2xl);font-weight:400;max-width:17ch}
.t2{font-size:var(--t-xl);font-weight:400;max-width:20ch}
.t3{font-size:var(--t-lg);font-weight:500;max-width:22ch}
.chapo{font-size:var(--t-md);color:var(--encre-2);max-width:38rem;
  margin-top:var(--e-5);line-height:1.62}
.chapo--fort{color:var(--encre);font-family:var(--f-titre);font-weight:400;
  font-size:var(--t-md);line-height:1.55}
.entete-s{margin-bottom:clamp(2rem,1.3rem + 2.8vw,3.5rem)}
.entete-s--centre{text-align:center}
.entete-s--centre .t2,.entete-s--centre .chapo{margin-inline:auto}
.suite{margin-top:var(--e-6)}
.credit{display:block;color:var(--encre-2);margin-top:2px;font-size:var(--t-xs)}

/* Apparition au défilement. Plus lente et plus courte que chez les autres :
   une page qui se pose, pas une page qui saute. */
.js [data-anim]{opacity:0;translate:0 14px;
  transition:opacity var(--transi-l),translate var(--transi-l)}
.js [data-anim].est-visible{opacity:1;translate:0 0}
.js [data-anim][data-delai="1"]{transition-delay:110ms}
.js [data-anim][data-delai="2"]{transition-delay:220ms}
.js [data-anim][data-delai="3"]{transition-delay:330ms}
@media (prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1 !important;translate:none !important}
}

/* ------------------------------------------------------------ 4. BOUTONS */
/* Tous les boutons sont des gélules pleines d'au moins 52 px : c'est la
   cible la plus grande de la série, et elle est volontairement au-delà des
   44 px recommandés — le doigt qui vise ici n'est pas toujours assuré. */
.btn{
  --bg:var(--encre);--fg:#fff;--bd:var(--encre);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:3.25rem;padding:.9rem 1.85rem;
  background:var(--bg);color:var(--fg);border:2px solid var(--bd);
  border-radius:var(--r-p);
  font-size:var(--t-sm);font-weight:700;letter-spacing:.005em;
  text-decoration:none;text-align:center;
  transition:background var(--transi),color var(--transi),
             border-color var(--transi),translate var(--transi),
             box-shadow var(--transi);
}
.btn:hover{translate:0 -2px;box-shadow:var(--ombre-2)}
.btn:active{translate:0;box-shadow:none}
.btn svg{width:1.2em;height:1.2em;flex:none}
.btn--plein{--bg:var(--sauge-plein);--bd:var(--sauge-plein)}
.btn--plein:hover{--bg:var(--sauge-fonce);--bd:var(--sauge-fonce)}
.btn--contour{--bg:transparent;--fg:var(--sauge-txt);--bd:var(--trait-2)}
.btn--contour:hover{--bd:var(--sauge);--bg:var(--sauge-pale)}
.btn--clair{--bg:#fff;--fg:#2A3826;--bd:#fff}
.btn--clair:hover{--bg:#EAF0E6;--bd:#EAF0E6}
.btn--contour-clair{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.55)}
.btn--contour-clair:hover{--bd:#fff;--bg:rgba(255,255,255,.12)}
.btn--lg{min-height:3.5rem;padding:1rem 2.15rem;font-size:var(--t-base)}
.btn--sm{min-height:3rem;padding:.7rem 1.25rem;font-size:var(--t-sm)}
.btn--bloc{width:100%}
.grp{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:var(--e-6)}
.grp--serre{margin-top:var(--e-4)}
.grp--centre{justify-content:center}
@media (max-width:30rem){ .grp > .btn:not(.btn--sm){width:100%} }

.lien{display:inline-flex;align-items:center;gap:.45rem;min-height:3rem;
  font-size:var(--t-sm);font-weight:700;color:var(--sauge-txt);
  text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:5px;text-decoration-color:var(--trait-2);
  transition:gap var(--transi),text-decoration-color var(--transi)}
.lien:hover{gap:.75rem;text-decoration-color:var(--sauge)}
.lien svg{width:1.05em;height:1.05em}
.lien--tel{font-size:var(--t-md)}

/* ------------------------------------------------------------- 5. EN-TÊTE */
.tete{position:sticky;top:var(--cmp-h,0px);z-index:80;
  background:rgba(252,250,246,.88);
  border-bottom:1px solid transparent;
  transition:background var(--transi),border-color var(--transi)}
@supports (backdrop-filter:blur(12px)){
  .tete{-webkit-backdrop-filter:saturate(1.4) blur(14px);
        backdrop-filter:saturate(1.4) blur(14px)}
}
.tete.est-collee{background:rgba(252,250,246,.97);border-bottom-color:var(--trait)}
.tete__in{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(.6rem,1.6vw,1.5rem);min-height:var(--tete-h)}
.marque{text-decoration:none;display:block;line-height:1.18;flex:none}
.marque__nom{display:block;font-family:var(--f-titre);font-weight:600;
  font-size:var(--t-md);letter-spacing:-.005em}
.marque__role{display:block;font-size:var(--t-xs);color:var(--encre-2);
  letter-spacing:.06em;margin-top:1px}
.nav{display:none;align-items:center;gap:clamp(.15rem,.9vw,.7rem)}
.nav__l{font-size:.9375rem;font-weight:600;text-decoration:none;
  color:var(--encre-2);padding:.7rem clamp(.4rem,.9vw,.85rem);
  border-radius:var(--r-p);white-space:nowrap;
  transition:background var(--transi),color var(--transi)}
.nav__l:hover{background:var(--sauge-pale);color:var(--sauge-txt)}
.nav__l[aria-current]{background:var(--sauge-pale);color:var(--sauge-txt)}
.tete__act{display:flex;align-items:center;gap:var(--e-3);flex:none}
.tete__cta{display:none}
/* Déclaré AVANT la requête de média qui le masque. À spécificité égale,
   c'est la dernière règle qui gagne : écrit après, le bouton de menu reste
   affiché sur grand écran, à côté de la navigation complète. Trois des
   quatre premières maquettes sont tombées dedans. */
.burger{width:48px;height:48px;display:grid;place-items:center;
  border:2px solid var(--trait-2);border-radius:var(--r-m);
  transition:border-color var(--transi),background var(--transi)}
.burger:hover{border-color:var(--sauge);background:var(--sauge-pale)}
@media (min-width:64rem){
  .nav{display:flex} .tete__cta{display:inline-flex} .burger{display:none}
}
.burger__l,.burger__l::before,.burger__l::after{
  content:"";display:block;width:20px;height:2px;border-radius:2px;
  background:var(--encre);
  transition:transform var(--transi),opacity var(--transi)}
.burger__l::before{transform:translateY(-7px)}
.burger__l::after{transform:translateY(5px)}
.burger[aria-expanded="true"] .burger__l{background:transparent}
.burger[aria-expanded="true"] .burger__l::before{transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger__l::after{transform:translateY(-2px) rotate(-45deg)}

.mm{position:fixed;inset:calc(var(--tete-h) + var(--cmp-h,0px)) 0 0;z-index:79;
  background:var(--fond);padding:var(--e-5) var(--goutt) var(--e-8);
  overflow-y:auto;display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--e-6)}
.mm__liens{display:grid;gap:.5rem}
.mm__l{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:4rem;padding:.9rem 1.25rem;border-radius:var(--r-l);
  background:var(--creme);text-decoration:none;
  font-family:var(--f-titre);font-size:var(--t-md);font-weight:500}
.mm__l[aria-current]{background:var(--sauge-pale);color:var(--sauge-txt)}
.mm__f{width:1.1em;height:1.1em;color:var(--sauge-txt);flex:none}
.mm__pied{display:grid;gap:var(--e-4);justify-items:center}
.mm__tel{display:inline-flex;align-items:center;gap:.5rem;min-height:3rem;
  text-decoration:none;font-weight:700;color:var(--sauge-txt)}
.mm__tel svg{width:1.15em;height:1.15em}

/* --------------------------------------------------- 6. OUVERTURE ACCUEIL */
/* Le titre est sur le fond clair, la photographie à côté dans son cadre
   arrondi. Aucun texte blanc sur image : c'est le seul contraste qu'on ne
   sait pas garantir, puisqu'il dépend de la photographie. */
.ouv{padding-block:clamp(2.25rem,1.4rem + 3.5vw,4.5rem) clamp(1.75rem,1rem + 2.5vw,3.25rem)}
.ouv__in{display:grid;gap:clamp(1.75rem,1rem + 3.5vw,3.5rem);align-items:center}
@media (min-width:62rem){
  .ouv__in{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr)}
}
.ouv__t{font-size:var(--t-3xl);font-weight:400;max-width:15ch;
  letter-spacing:-.015em;line-height:1.08}
.ouv__c{margin-top:var(--e-5);font-size:var(--t-md);color:var(--encre-2);
  max-width:34rem;line-height:1.62}
.ouv__note{display:flex;align-items:center;gap:.5rem;margin-top:var(--e-5);
  font-size:var(--t-sm);color:var(--encre-2)}
.ouv__note svg{width:1.2em;height:1.2em;color:var(--sauge-txt);flex:none}
.ouv__media picture{display:block;border-radius:var(--r-2xl);overflow:hidden;
  aspect-ratio:4/3.4;box-shadow:var(--ombre-3);background:var(--creme)}
.ouv__media img{width:100%;height:100%;object-fit:cover}
@media (min-width:62rem){ .ouv__media picture{aspect-ratio:4/3.6} }

/* ------------------------------------------- 7. ENTRÉE DES PAGES INTÉRIEURES */
/* Retournement du dispositif d'accueil : le titre d'abord, seul sur le fond
   clair ; la photographie en dessous, en bandeau arrondi. */
.entree{padding-block:clamp(2rem,1.2rem + 3vw,4rem) 0}
.entree__txt{max-width:46rem}
.entree__media{margin-top:clamp(1.75rem,1rem + 3vw,3rem)}
.entree__media picture{display:block;border-radius:var(--r-2xl);overflow:hidden;
  aspect-ratio:16/9;box-shadow:var(--ombre-2);background:var(--creme)}
.entree__media img{width:100%;height:100%;object-fit:cover}
@media (min-width:56rem){ .entree__media picture{aspect-ratio:21/7} }

/* ----------------------------------------------------------------- 8. DUO */
.duo{display:grid;gap:clamp(1.5rem,1rem + 2.5vw,3rem)}
@media (min-width:60rem){
  .duo{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:start}
}
.duo__txt{max-width:var(--largeur-texte)}
.duo__txt > p + p{margin-top:var(--e-5)}
.duo__img{margin-top:var(--e-6)}
/* 16/9 et non 4/3 : en 4/3 la colonne de gauche (titre + image) dépassait
   de cent pixels la colonne de texte, et le panneau se terminait par un
   vide en bas à droite. */
.duo__img picture{display:block;border-radius:var(--r-xl);overflow:hidden;
  aspect-ratio:16/9;box-shadow:var(--ombre-1)}
.duo__img img{width:100%;height:100%;object-fit:cover}
@media (max-width:59.99rem){ .duo__img{display:none} }
.duo--simple .duo__img{display:none}

/* ----------------------------------------------------------- 9. LES TROIS */
.pubs{display:grid;gap:clamp(1rem,.6rem + 1.8vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.pub{display:flex;flex-direction:column;text-decoration:none;
  background:var(--blanc);border-radius:var(--r-2xl);overflow:hidden;
  box-shadow:var(--ombre-1);
  transition:translate var(--transi),box-shadow var(--transi)}
.pub:hover{translate:0 -5px;box-shadow:var(--ombre-3)}
.pub__media{display:block;overflow:hidden;background:var(--creme)}
.pub__media picture{display:block;aspect-ratio:4/3}
.pub__media img{width:100%;height:100%;object-fit:cover;
  transition:scale 900ms cubic-bezier(.2,.9,.25,1)}
.pub:hover .pub__media img{scale:1.04}
.pub__corps{display:flex;flex-direction:column;flex:1;
  padding:clamp(1.25rem,.9rem + 1.4vw,1.9rem)}
.pub__corps .sur{margin-bottom:var(--e-2)}
.pub__t{display:block;font-family:var(--f-titre);font-size:var(--t-lg);
  font-weight:500;line-height:1.15;margin-bottom:var(--e-3)}
.pub__c{display:block;color:var(--encre-2);font-size:var(--t-sm);flex:1}
.pub__go{display:inline-flex;align-items:center;gap:.45rem;margin-top:var(--e-5);
  min-height:2.5rem;font-size:var(--t-sm);font-weight:700;color:var(--sauge-txt)}
.pub__go svg{width:1.05em;height:1.05em;transition:translate var(--transi)}
.pub:hover .pub__go svg{translate:5px 0}

/* --------------------------------------------------------- 10. LE CHEMIN */
/* Le déroulé de m1 est une grille de quatre colonnes : quatre choses
   simultanées. Ici, un filet continu relie quatre jalons et les cartes
   descendent en escalier — on lit un trajet, avec un début et une fin.
   Le tiret pointillé rattache chaque carte au filet malgré le décalage. */
.chemin{--gap:clamp(1.1rem,.8rem + 1.2vw,1.75rem);
  display:grid;gap:var(--gap)}
.pas{--dec:0rem;position:relative;display:grid;
  grid-template-columns:3.5rem minmax(0,1fr);
  gap:clamp(.9rem,.7rem + .8vw,1.5rem);align-items:start}
.pas::after{content:"";position:absolute;left:1.75rem;top:3.5rem;
  bottom:calc(-1 * var(--gap));width:2px;translate:-1px 0;
  background:var(--trait-2);border-radius:2px}
.pas:last-child::after{display:none}
.sect--sauge .pas::after{background:#CBD8C2}
.pas__jalon{width:3.5rem;height:3.5rem;border-radius:50%;
  display:grid;place-items:center;background:var(--sauge-plein);color:#fff;
  font-weight:700;font-size:var(--t-sm);letter-spacing:.02em;
  position:relative;z-index:1;box-shadow:var(--ombre-1)}
.pas__carte{position:relative;margin-left:var(--dec);
  background:var(--blanc);border-radius:var(--r-xl);
  padding:clamp(1.15rem,.9rem + 1.2vw,1.75rem);box-shadow:var(--ombre-1)}
.pas__carte::before{content:"";position:absolute;top:1.9rem;height:2px;
  left:calc(-1 * (var(--dec) + 1.5rem));width:calc(var(--dec) + 1.5rem);
  background:repeating-linear-gradient(90deg,var(--trait-2) 0 5px,
    transparent 5px 10px)}
.sect--sauge .pas__carte::before{
  background:repeating-linear-gradient(90deg,#CBD8C2 0 5px,transparent 5px 10px)}
.pas__t{font-size:var(--t-md);font-weight:600;margin-bottom:var(--e-2)}
.pas__c{color:var(--encre-2);font-size:var(--t-sm);max-width:32rem}
@media (min-width:64rem){
  .pas:nth-child(2){--dec:1.75rem}
  .pas:nth-child(3){--dec:3.5rem}
  .pas:nth-child(4){--dec:5.25rem}
  /* La carte est calée sur la ligne de lecture, pas sur la largeur du
     conteneur : à 52 rem les paragraphes faisaient 95 signes. */
  .pas__carte{max-width:36rem}
}

/* ------------------------------------------------------------ 11. TEASER */
.teaser{display:grid;gap:clamp(1.5rem,1rem + 2.5vw,3rem);align-items:center}
@media (min-width:60rem){
  .teaser{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
}
.teaser__f picture{display:block;border-radius:var(--r-xl);overflow:hidden;
  aspect-ratio:4/5;box-shadow:var(--ombre-2);max-width:22rem}
.teaser__f img{width:100%;height:100%;object-fit:cover}
.teaser__c{margin-top:var(--e-5);color:var(--encre-2);max-width:36rem}

/* ----------------------------------------------------------- 12. ADRESSE */
.adr{display:grid;gap:clamp(1.5rem,1rem + 3vw,3.5rem);align-items:center}
@media (min-width:60rem){
  .adr{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}
.adr__bloc{margin-top:var(--e-6);font-size:var(--t-md);line-height:1.75}
.adr__plan{border-radius:var(--r-2xl);overflow:hidden;background:var(--blanc);
  box-shadow:var(--ombre-2)}

/* ------------------------------------------------------ 13. LE PLAN (SVG) */
/* Le SVG ne porte AUCUNE couleur : tout se décide ici. Version claire et
   verdoyante — bâti et parcs dans deux valeurs proches, voies en blanc,
   point du cabinet en sauge. */
.plan{width:100%;height:auto;display:block}
.plan__fond{fill:#F1EDE1}
.plan__bati{fill:#E2DAC6;stroke:none}
.plan__vert{fill:#D7E2CB}
.plan__eau{fill:#CFDEE2;stroke:#CFDEE2;stroke-width:3}
.plan__voie{stroke:#FBF8F1}
.plan__voie--majeure{stroke:#FFFFFF}
.plan__voie--pieton{stroke:#F0EADC}
.plan__tram{stroke:#A9A28C;stroke-width:1.6;stroke-dasharray:6 5}
.plan__libelle text{fill:#6F6A5C;font-size:11px;letter-spacing:.04em;
  font-family:var(--f-texte);font-weight:600}
.plan__halo{fill:var(--sauge);opacity:.14}
.plan__halo--2{opacity:.24}
.plan__point{fill:var(--sauge-plein)}
.plan__oeil{fill:#FFFFFF}
.plan__ici{fill:var(--encre);font:600 15px var(--f-texte)}
.plan__echelle path{stroke:#6F6A5C;stroke-width:1.3;fill:none}
.plan__echelle text,.plan__nord text{fill:#6F6A5C;font:600 11px var(--f-texte)}
.plan__nord path{fill:#6F6A5C}
.plan__credit{fill:#7C7668;font:400 10px var(--f-texte)}

/* ----------------------------------------------------------- 14. URGENCE */
.urg{background:var(--nuit-brun);color:#D6CCC4;
  padding-block:clamp(2.5rem,1.6rem + 3.5vw,4.5rem)}
.urg__in{display:grid;gap:clamp(1.5rem,1rem + 2.5vw,3rem)}
@media (min-width:60rem){
  .urg__in{grid-template-columns:minmax(0,.82fr) minmax(0,1.35fr)}
}
.urg__t{font-size:var(--t-lg);color:#fff;display:flex;align-items:center;gap:.6rem}
.urg__ic{width:1.05em;height:1.05em;color:#F0B48A;flex:none}
.urg__chapo{margin-top:var(--e-4);color:#D6CCC4;font-size:var(--t-sm);max-width:32rem}
.urg__liste{display:grid;gap:.6rem}
.urg__l{display:flex;gap:var(--e-4);align-items:baseline;flex-wrap:wrap;
  padding:.9rem 1.2rem;border-radius:var(--r-l);background:rgba(255,255,255,.05)}
.urg__num{flex:none;min-width:6.5rem;font-weight:700;color:#F0B48A;
  font-size:var(--t-md)}
.urg__c{font-size:var(--t-sm);color:#D6CCC4;flex:1 1 16rem;max-width:31rem}
.urg__c strong{display:block;color:#fff;font-weight:700;font-size:var(--t-base)}

/* --------------------------------------------------------- 15. APPEL FIN */
.appel{background:var(--nuit);color:#fff;
  padding-block:clamp(3rem,2rem + 4vw,5.5rem);text-align:center}
.appel__in{max-width:44rem;margin-inline:auto}
.appel__t{font-size:var(--t-xl);color:#fff;max-width:18ch;margin-inline:auto}
.appel__c{margin-top:var(--e-4);color:#DCE6D7;max-width:34rem;margin-inline:auto}
.appel__adr{margin-top:var(--e-6);font-size:var(--t-sm);color:#C9D4C3;
  display:inline-flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  justify-content:center}
.appel__adr svg{width:1.1em;height:1.1em;flex:none}

/* ------------------------------------------------------------ 16. ONGLETS */
/* Segments en gélule, 52 px de haut, pleins quand ils sont actifs : on voit
   de loin lequel est choisi, et on le touche sans viser. */
.onglets__barre{display:flex;gap:.5rem;flex-wrap:wrap;
  padding:.4rem;background:var(--creme);border-radius:var(--r-p);
  width:fit-content;max-width:100%;
  margin-bottom:clamp(2rem,1.4rem + 2.4vw,3.25rem)}
.ong{min-height:3.25rem;padding:.7rem clamp(1rem,2.4vw,1.9rem);
  border-radius:var(--r-p);font-size:var(--t-sm);font-weight:700;
  color:var(--encre-2);white-space:nowrap;
  transition:background var(--transi),color var(--transi)}
.ong:hover{background:var(--sauge-pale);color:var(--sauge-txt)}
.ong.est-actif{background:var(--sauge-plein);color:#fff}
.ong.est-actif:hover{background:var(--sauge-fonce);color:#fff}
.est-onglets .pan{animation:parait 520ms cubic-bezier(.2,.9,.25,1)}
@keyframes parait{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
/* Sans JavaScript, tous les panneaux restent visibles et séparés. */
.pan + .pan{margin-top:var(--sect-y)}
.est-onglets .pan + .pan{margin-top:0}
.pan__tete{display:grid;gap:clamp(1.25rem,.9rem + 2vw,2.5rem);align-items:center;
  margin-bottom:clamp(1.75rem,1.2rem + 2.4vw,3rem)}
@media (min-width:60rem){
  .pan__tete{grid-template-columns:minmax(0,1fr) minmax(0,.82fr)}
}
.pan__media picture{display:block;border-radius:var(--r-2xl);overflow:hidden;
  aspect-ratio:4/3;box-shadow:var(--ombre-2)}
.pan__media img{width:100%;height:100%;object-fit:cover}
/* Cinq portes : en quatre colonnes la cinquième reste seule et la grille
   boite. Trois colonnes donnent 3 + 2, qui se lit comme une composition. */
.portes{display:grid;gap:clamp(.9rem,.6rem + 1.4vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
@media (min-width:60rem){ .portes{grid-template-columns:repeat(3,1fr)} }
.porte{background:var(--blanc);border-radius:var(--r-xl);
  padding:clamp(1.15rem,.9rem + 1.1vw,1.6rem);box-shadow:var(--ombre-1)}
.porte__t{font-size:var(--t-md);margin-bottom:var(--e-3)}
.porte p{font-size:var(--t-sm);color:var(--encre-2)}
.encart{margin-top:clamp(1.75rem,1.2rem + 2.4vw,3rem);
  padding:clamp(1.4rem,1rem + 2vw,2.5rem);
  background:var(--terre-pale);border-radius:var(--r-2xl);max-width:48rem}
.encart__t{font-size:var(--t-md);margin-bottom:var(--e-4);color:var(--terre)}
.encart p + p{margin-top:var(--e-4)}
.encart p{font-size:var(--t-sm);max-width:34rem}

/* --------------------------------------------------------- 17. DÉPLIANTS */
/* m1 replie les questions dans des <details> fins, séparés par un filet.
   Ici ce sont des blocs : 64 px de haut, toute la largeur cliquable, un
   fond qui change au survol. On ne cherche pas où appuyer. */
.deplis{display:grid;gap:.75rem}
.depli{background:var(--blanc);border:2px solid var(--trait);
  border-radius:var(--r-xl);overflow:hidden;
  transition:border-color var(--transi),box-shadow var(--transi)}
.depli[open]{border-color:var(--sauge);box-shadow:var(--ombre-2)}
.depli__q{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:4rem;padding:1.1rem clamp(1.1rem,3vw,1.75rem);
  cursor:pointer;list-style:none;
  font-family:var(--f-titre);font-size:var(--t-md);font-weight:600;
  transition:background var(--transi)}
.depli__q::-webkit-details-marker{display:none}
.depli__q:hover{background:var(--sauge-pale)}
.depli__txt{flex:1}
.depli__sig{flex:none;width:2.5rem;height:2.5rem;border-radius:50%;
  display:grid;place-items:center;background:var(--sauge-pale);
  color:var(--sauge-txt);transition:transform var(--transi),background var(--transi)}
.depli__sig svg{width:1.3rem;height:1.3rem}
.depli[open] .depli__sig{transform:rotate(45deg);background:var(--sauge-plein);
  color:#fff}
.depli__r{padding:0 clamp(1.1rem,3vw,1.75rem) 1.5rem;max-width:38rem}
.depli__r p{color:var(--encre-2)}
.depli[open] .depli__r{animation:parait 380ms ease}

/* ------------------------------------------------------------ 18. TARIFS */
.tar{margin-top:var(--e-4)}
.tar th,.tar td{text-align:left;padding:1rem .5rem;
  border-bottom:1px solid var(--trait-2)}
.tar thead th{font-family:var(--f-texte);font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);
  font-weight:700;padding-bottom:.6rem}
.tar tbody th{font-weight:700;font-size:var(--t-sm)}
.tar__note{display:block;font-weight:400;font-size:var(--t-xs);
  color:var(--encre-2);margin-top:2px}
.tar__duree{color:var(--encre-2);font-size:var(--t-sm);white-space:nowrap}
.tar__prix{text-align:right;font-weight:700;white-space:nowrap;
  font-size:var(--t-md);color:var(--sauge-txt)}
.tar tbody tr:last-child th,.tar tbody tr:last-child td{border-bottom:0}
.tar__mentions{margin-top:var(--e-5);display:grid;gap:.6rem;max-width:34rem;
  font-size:var(--t-sm);color:var(--encre-2)}
.tar__mentions li{padding-left:1.4em;position:relative}
.tar__mentions li::before{content:"";position:absolute;left:0;top:.72em;
  width:.6em;height:.6em;border-radius:50%;background:var(--sauge)}

/* -------------------------------------------------------- 19. PSYCHANALYSE */
/* Le LIMINAIRE : l'ouverture de texte d'une page, en deux temps dans un
   grand panneau. Elle remplace la colonne étroite centrée de m1, qui, sous
   un titre calé à gauche, ne s'alignait sur rien. */
.liminaire{display:grid;gap:clamp(1.5rem,1rem + 2.5vw,3rem);align-items:start}
@media (min-width:62rem){
  .liminaire{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .liminaire--seul{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .liminaire--seul .intro__p + .intro__p{margin-top:0}
}
.intro__p{font-size:var(--t-md);color:var(--encre-2);max-width:34rem}
.intro__p + .intro__p{margin-top:var(--e-5)}
.liminaire--seul .intro__p:first-child{font-size:var(--t-lg);color:var(--encre);
  line-height:1.45;font-family:var(--f-titre);font-weight:400}
.props{display:grid;gap:clamp(2.25rem,1.5rem + 3vw,4rem)}
.prop{display:grid;gap:clamp(1rem,.7rem + 1.6vw,2.5rem)}
@media (min-width:60rem){
  .prop{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
}
.prop__t{font-size:var(--t-lg);font-weight:500;max-width:18ch}
.prop__txt{max-width:var(--largeur-texte)}
.prop__txt p + p{margin-top:var(--e-4)}
.prop__txt p{color:var(--encre-2)}

.metiers{display:grid;gap:clamp(.9rem,.6rem + 1.4vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.metier{background:var(--blanc);border-radius:var(--r-xl);
  padding:clamp(1.25rem,.9rem + 1.3vw,1.8rem);box-shadow:var(--ombre-1)}
.metier__t{font-size:var(--t-md);font-weight:600}
.metier__r{margin-top:var(--e-2);color:var(--terre);font-size:var(--t-sm);
  font-weight:700}
.metier__c{margin-top:var(--e-4);font-size:var(--t-sm);color:var(--encre-2)}

.cass{display:grid;gap:clamp(.9rem,.6rem + 1.4vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
/* Quatre cas en trois colonnes donnaient 3 + 1. Deux colonnes donnent
   2 + 2, et les paragraphes passent de 34 à 62 signes. */
@media (min-width:60rem){ .cass{grid-template-columns:repeat(2,1fr)} }
.cas{background:var(--blanc);border-radius:var(--r-xl);
  padding:clamp(1.25rem,.9rem + 1.3vw,1.8rem);box-shadow:var(--ombre-1)}
.cas__t{font-size:var(--t-md);font-weight:600;margin-bottom:var(--e-3)}
.cas p{font-size:var(--t-sm);color:var(--encre-2)}

.lecs{display:grid;gap:clamp(1.25rem,.9rem + 1.8vw,2.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.lec__g{background:var(--creme);border-radius:var(--r-2xl);
  padding:clamp(1.3rem,1rem + 1.4vw,2rem)}
.lec__t{display:flex;align-items:center;gap:.55rem;font-size:var(--t-md);
  font-weight:600;padding-bottom:var(--e-3);border-bottom:2px solid var(--trait-2)}
.lec__ic{width:1.15em;height:1.15em;color:var(--sauge-txt);flex:none}
.lec__l{display:grid;gap:var(--e-5);margin-top:var(--e-5)}
.lec__oeuvre{display:block;font-weight:700}
.lec__auteur{display:block;font-size:var(--t-sm);color:var(--sauge-txt);
  font-weight:600;margin-top:1px}
.lec__note{display:block;font-size:var(--t-sm);color:var(--encre-2);
  margin-top:.35rem}

/* ------------------------------------------------------------ 20. HISTOIRE */
/* Le filet de citation est arrondi à ses deux bouts : sur cette maquette,
   même un trait de deux points n'a pas d'angle. */
.cit{position:relative;padding-left:clamp(1.1rem,.8rem + 1.2vw,1.75rem)}
.cit::before{content:"";position:absolute;left:0;top:.3em;bottom:.5em;
  width:4px;border-radius:4px;background:var(--sauge)}
.cit__t{font-family:var(--f-titre);font-size:var(--t-lg);font-weight:400;
  line-height:1.3;letter-spacing:-.005em;max-width:22ch}
.cit__s{margin-top:var(--e-4);font-size:var(--t-sm);color:var(--encre-2);
  font-weight:600}
@media (min-width:62rem){ .cit__t{font-size:var(--t-xl);line-height:1.24} }

.portrait{display:grid;gap:clamp(1.5rem,1rem + 2.5vw,3rem);align-items:center}
@media (min-width:60rem){
  .portrait{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
}
.portrait__f picture{display:block;border-radius:var(--r-xl);overflow:hidden;
  aspect-ratio:4/5;box-shadow:var(--ombre-2);max-width:22rem}
.portrait__f img{width:100%;height:100%;object-fit:cover}
.portrait__f figcaption,.divan__f figcaption{margin-top:var(--e-3);
  font-size:var(--t-xs);color:var(--encre-2);max-width:22rem}
.portrait__txt p{margin-top:var(--e-5);color:var(--encre-2);max-width:36rem}

/* La frise reprend le filet et les jalons du chemin, en plus petit : les
   deux dispositifs se répondent d'une page à l'autre. */
.fr{--gap:clamp(1.1rem,.8rem + 1.2vw,1.75rem);display:grid;gap:var(--gap)}
.fr__l{position:relative;display:grid;
  grid-template-columns:1.5rem minmax(0,1fr);
  gap:.55rem clamp(.9rem,.7rem + .8vw,1.4rem);align-items:start}
.fr__date{grid-column:2;grid-row:1;display:flex;align-items:baseline;
  gap:.7rem;flex-wrap:wrap}
.fr__jalon{grid-column:1;grid-row:1;width:1.5rem;height:1.5rem;
  border-radius:50%;margin-top:.35rem;background:var(--sauge-plein);
  box-shadow:0 0 0 5px var(--sauge-pale);position:relative;z-index:1}
.fr__carte{grid-column:2;grid-row:2;background:var(--blanc);
  border-radius:var(--r-xl);padding:clamp(1.15rem,.9rem + 1.2vw,1.75rem);
  box-shadow:var(--ombre-1)}
.fr__l::after{content:"";position:absolute;left:.75rem;top:2.1rem;
  bottom:calc(-1 * var(--gap));width:2px;translate:-1px 0;background:#CBD8C2}
.fr__l:last-child::after{display:none}
.fr__an{font-weight:700;font-size:var(--t-md);color:var(--sauge-txt)}
.fr__lieu{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--encre-2);font-weight:600}
.fr__t{font-size:var(--t-md);font-weight:600;margin-bottom:var(--e-2)}
.fr__c{font-size:var(--t-sm);color:var(--encre-2);max-width:32rem}
/* Sur grand écran la date passe dans un rail à gauche du filet : on lit la
   colonne des dates seule, sans entrer dans les cartes. */
@media (min-width:64rem){
  .fr__l{grid-template-columns:10rem 1.5rem minmax(0,1fr)}
  .fr__date{grid-column:1;grid-row:1;display:block;text-align:right;
    padding-top:1.35rem}
  .fr__an{display:block}
  .fr__lieu{display:block;margin-top:3px;line-height:1.4}
  .fr__jalon{grid-column:2;grid-row:1;margin-top:1.75rem}
  .fr__carte{grid-column:3;grid-row:1;max-width:38rem}
  .fr__l::after{left:calc(10rem + 1.4rem + .75rem);top:3.5rem}
}

.divan{display:grid;gap:clamp(1.5rem,1rem + 2.5vw,3rem);align-items:center}
@media (min-width:60rem){
  .divan{grid-template-columns:minmax(0,1fr) minmax(0,.95fr)}
}
.divan__txt p{margin-top:var(--e-5);color:var(--encre-2);max-width:36rem}
.divan__f picture{display:block;border-radius:var(--r-2xl);overflow:hidden;
  aspect-ratio:4/3;box-shadow:var(--ombre-2)}
.divan__f img{width:100%;height:100%;object-fit:cover}

.mots{display:grid;gap:clamp(.9rem,.6rem + 1.4vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
/* Cinq mots en auto-fit : quatre sur la première rangée et un orphelin sur
   la seconde. Trois colonnes donnent 3 + 2, qui se lit comme une
   composition et non comme un reste. */
@media (min-width:60rem){ .mots{grid-template-columns:repeat(3,1fr)} }
.mot{background:var(--creme);border-radius:var(--r-xl);
  padding:clamp(1.15rem,.9rem + 1.2vw,1.7rem)}
.mot__t{font-size:var(--t-md);font-weight:600;color:var(--sauge-txt);
  margin-bottom:var(--e-3)}
.mot p{font-size:var(--t-sm);color:var(--encre-2)}

/* -------------------------------------------------------- 21. PSYCHANALYSTE */
.pf{display:grid;gap:clamp(1.5rem,1rem + 3vw,3.5rem);align-items:center}
@media (min-width:62rem){
  .pf{grid-template-columns:minmax(0,.75fr) minmax(0,1.1fr)}
}
.pf__f picture{display:block;border-radius:var(--r-2xl);overflow:hidden;
  aspect-ratio:4/5;box-shadow:var(--ombre-3);max-width:26rem}
.pf__f img{width:100%;height:100%;object-fit:cover}
/* Le marqueur « ce n'est pas lui » n'est pas une note de bas de page : il
   est sous la photographie, sur son propre fond, et il ne s'oublie pas. */
.pf__prov{display:flex;align-items:center;gap:.5rem;margin-top:var(--e-4);
  padding:.7rem 1rem;border-radius:var(--r-m);background:#FBEEEA;
  color:#8C2913;font-size:var(--t-sm);font-weight:700;max-width:26rem}
.pf__prov svg{width:1.2em;height:1.2em;flex:none}
.pf__txt > p{margin-top:var(--e-5);color:var(--encre-2);max-width:36rem}

.parc{display:grid;gap:.6rem}
.parc__l{display:grid;gap:.2rem 1.5rem;padding:1.1rem 1.35rem;
  background:var(--blanc);border-radius:var(--r-l)}
@media (min-width:44rem){
  .parc__l{grid-template-columns:15rem minmax(0,1fr);align-items:baseline}
}
.parc__k{font-weight:700}
.parc__v{color:var(--encre-2);font-style:italic;font-size:var(--t-sm)}

.engs{display:grid;gap:clamp(.9rem,.6rem + 1.4vw,1.5rem)}
@media (min-width:60rem){ .engs{grid-template-columns:repeat(2,1fr)} }
.eng{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1.1rem;
  background:var(--blanc);border-radius:var(--r-xl);
  padding:clamp(1.25rem,.9rem + 1.3vw,1.8rem);box-shadow:var(--ombre-1)}
.eng__n{width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;
  background:var(--sauge-pale);color:var(--sauge-txt);font-weight:700;
  font-size:var(--t-sm)}
.eng__t{font-size:var(--t-md);font-weight:600;margin-bottom:var(--e-2)}
.eng p{font-size:var(--t-sm);color:var(--encre-2)}

/* ------------------------------------------------------------- 22. CONTACT */
.ct{display:grid;gap:clamp(1.25rem,.9rem + 1.8vw,2rem);align-items:start}
@media (min-width:60rem){ .ct{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ct__t{font-family:var(--f-titre);font-size:var(--t-lg);font-weight:500;
  margin-bottom:var(--e-5)}
.ct__t--2{margin-top:var(--e-7)}
.tel-gros{display:inline-flex;align-items:center;gap:.65rem;
  min-height:3.5rem;padding:.55rem 1.4rem .55rem 1.1rem;
  border-radius:var(--r-p);background:var(--blanc);
  text-decoration:none;font-family:var(--f-titre);font-size:var(--t-xl);
  font-weight:600;color:var(--sauge-txt);margin-bottom:var(--e-5);
  box-shadow:var(--ombre-1);
  transition:color var(--transi),box-shadow var(--transi),translate var(--transi)}
.tel-gros:hover{color:var(--sauge-fonce);box-shadow:var(--ombre-2);translate:0 -2px}
.tel-gros svg{width:.8em;height:.8em}
.ct__appel p{color:var(--encre-2);max-width:34rem}
.ct__rappel{display:flex;align-items:flex-start;gap:.5rem;margin-top:var(--e-4);
  font-size:var(--t-sm)}
.ct__rappel svg{width:1.2em;height:1.2em;color:var(--sauge-txt);flex:none;
  margin-top:.2em}
.ct__addr{font-style:normal;line-height:1.8;font-size:var(--t-sm)}
.ct__addr strong{font-size:var(--t-base)}
.hor{display:grid;gap:.25rem}
.hor__l{display:flex;justify-content:space-between;gap:1rem;
  padding:.6rem .9rem;border-radius:var(--r-s);font-size:var(--t-sm)}
.hor__l:nth-child(odd){background:rgba(255,255,255,.6)}
.hor__l--off{color:var(--encre-2)}
.hor dt{font-weight:700}

.acces{display:grid;gap:clamp(1.5rem,1rem + 2.5vw,3rem);align-items:start}
@media (min-width:62rem){
  .acces{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
}
.acces__plan{border-radius:var(--r-2xl);overflow:hidden;background:var(--blanc);
  box-shadow:var(--ombre-2)}
.modes{display:grid;gap:.6rem}
.mode{display:flex;gap:var(--e-4);align-items:flex-start;
  padding:.9rem 1.1rem;border-radius:var(--r-l);background:var(--creme)}
.mode__rond{flex:none;width:2.75rem;height:2.75rem;border-radius:50%;
  display:grid;place-items:center;background:var(--blanc);color:var(--sauge-txt)}
.mode__ic{width:1.4rem;height:1.4rem}
.mode strong{display:block;font-size:var(--t-sm)}
.mode span{display:block;font-size:var(--t-sm);color:var(--encre-2)}
.acces__it-t{margin-top:var(--e-6);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre-2);font-weight:700}
.acces__note{margin-top:var(--e-5);font-size:var(--t-xs);color:var(--encre-2);
  max-width:28rem;line-height:1.65}

.form{display:grid;gap:var(--e-5);background:var(--blanc);max-width:44rem}
.ch{display:grid;gap:.4rem}
.ch__l{font-size:var(--t-sm);font-weight:700}
.ch__req{color:var(--terre);margin-left:.15em}
.ch__aide{font-size:var(--t-xs);color:var(--encre-2)}
/* Champs hauts (56 px) et franchement arrondis : c'est la partie du site où
   l'on se trompe le plus, et où viser doit être le plus facile. */
.ch__i{width:100%;min-height:3.5rem;padding:.9rem 1.1rem;background:var(--fond);
  border:2px solid var(--trait-2);border-radius:var(--r-m);
  font-size:var(--t-base);
  transition:border-color var(--transi),box-shadow var(--transi)}
.ch__i:focus{outline:0;border-color:var(--sauge);
  box-shadow:0 0 0 4px var(--sauge-pale)}
.ch__i[aria-invalid="true"]{border-color:#9E2F17}
textarea.ch__i{resize:vertical;min-height:9rem;line-height:1.65}
.form__rgpd{font-size:var(--t-xs);color:var(--encre-2);max-width:27rem;
  line-height:1.65}
.form__act{margin-top:var(--e-2)}
.form__demo{padding:1.15rem 1.35rem;background:var(--sauge-pale);
  border-radius:var(--r-l);font-size:var(--t-sm);color:var(--encre)}
.form__demo strong{display:block;margin-bottom:.25rem;font-size:var(--t-md);
  font-family:var(--f-titre)}
.form__demo-note{display:block;margin-top:.75rem;padding-top:.75rem;
  border-top:2px solid rgba(62,83,57,.2);font-size:var(--t-xs);
  color:var(--encre-2)}

/* ---------------------------------------------------------------- 23. PIED */
.pied{background:var(--creme);padding-block:clamp(2.5rem,1.6rem + 3.5vw,4rem) var(--e-6)}
.pied__in{display:grid;gap:clamp(1.75rem,1.2rem + 2.8vw,3.5rem)}
@media (min-width:60rem){ .pied__in{grid-template-columns:1.05fr .7fr 1.25fr} }
.pied__nom{font-family:var(--f-titre);font-size:var(--t-md);font-weight:600}
.pied__role{font-size:var(--t-xs);color:var(--encre-2);margin-top:2px}
.pied__adr{font-style:normal;margin-top:var(--e-5);line-height:1.8;
  font-size:var(--t-sm)}
.pied__adr a{color:var(--sauge-txt);text-decoration:underline;
  text-underline-offset:4px;font-weight:700}
.pied__sr{margin-top:var(--e-3);font-size:var(--t-xs);color:var(--encre-2)}
.pied__t{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-2);font-family:var(--f-texte);font-weight:700;
  margin-bottom:var(--e-3)}
.pied__liens{display:grid;gap:.1rem;font-size:var(--t-sm)}
.pied__liens a{display:inline-flex;align-items:center;min-height:3rem;
  text-decoration:none;color:var(--encre-2)}
.pied__liens a:hover{color:var(--sauge-txt);text-decoration:underline;
  text-underline-offset:4px}
.pied__legal{display:grid;gap:.7rem;font-size:var(--t-xs);color:var(--encre-2);
  line-height:1.65;max-width:30rem}
.pied__bas{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(2rem,1.4rem + 2.4vw,3rem);padding-top:var(--e-5);
  border-top:2px solid var(--trait);font-size:var(--t-xs);color:var(--encre-2)}

/* -------------------------------------------------- 24. BARRE TÉLÉPHONE */
.barre-tel{display:none}
@media (max-width:47.99rem){
  .m5{--barre-h:72px}
  .barre-tel{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:.65rem var(--goutt) calc(.65rem + env(safe-area-inset-bottom));
    background:rgba(252,250,246,.96);border-top:1px solid var(--trait)}
  @supports (backdrop-filter:blur(10px)){
    .barre-tel{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  }
  .barre-tel__a{display:flex;align-items:center;justify-content:center;gap:.55rem;
    min-height:3.25rem;background:var(--sauge-plein);color:#fff;
    border-radius:var(--r-p);text-decoration:none;font-weight:700;
    font-size:var(--t-sm)}
  .barre-tel__a svg{width:1.2em;height:1.2em}
}

@media print{
  .tete,.mm,.barre-tel,.appel{display:none}
  body.m5{background:#fff}
  .js [data-anim]{opacity:1 !important;translate:none !important}
  .panneau,.pas__carte,.porte,.metier,.cas,.fr__carte,.eng{box-shadow:none}
}