/* ==========================================================================
   MAQUETTE 04 — « VIENNE »
   Josefin Sans + Lora · papier chaud, bleu de nuit, terre cuite.
   Feuille unique, mobile d'abord, aucune dépendance.
   ========================================================================== */

/* ------------------------------------------------------------- 1. JETONS */
/* Les contrastes annoncés sont mesurés, pas estimés. La terre cuite de la
   palette (#B4622E) plafonne à 3,9:1 sur le papier : elle ne porte AUCUN
   texte, elle ne sert qu'aux filets et au motif. Le texte terre cuite passe
   par --brique, qui est la même couleur assombrie jusqu'à 6,1:1. */
.m4{
  --papier:#F6EFE3;          /* papier chaud */
  --papier-2:#EFE6D6;        /* seconde surface claire */
  --ocre:#E4D3B4;            /* valeur intermédiaire */
  --nuit:#1D2B3A;            /* bleu de nuit — 12,6:1 sur le papier */
  --nuit-2:#16212E;          /* surface sombre plus profonde */
  --brun:#2A1D16;            /* le bloc d'urgence, seul brun du site */

  --encre:#1D2B3A;
  --encre-2:#544A3D;         /* 7,6:1 sur papier · 7,0:1 sur papier-2 */
  --terre:#B4622E;           /* DÉCOR SEULEMENT */
  --brique:#8F4419;          /* 6,1:1 sur papier · 4,7:1 sur ocre */
  --terre-clair:#D98C57;     /* 5,4:1 sur nuit */
  --clair:#EDE3D2;           /* 11,3:1 sur nuit */
  --clair-2:#BCB09C;         /* 6,7:1 sur nuit */

  --f1:rgba(29,43,58,.55);   /* filet extérieur */
  --f2:rgba(29,43,58,.22);   /* filet intérieur */
  --f3:rgba(29,43,58,.11);   /* séparateur discret */
  --fc1:rgba(237,227,210,.48);
  --fc2:rgba(237,227,210,.20);
  --fc3:rgba(237,227,210,.11);

  --f-titre:'Josefin Sans','Century Gothic','Futura',ui-sans-serif,sans-serif;
  --f-texte:'Lora','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --f-tech:'IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;

  --t-xs:clamp(.6875rem,.66rem + .1vw,.75rem);
  --t-sm:clamp(.8125rem,.79rem + .12vw,.9rem);
  --t-base:clamp(1rem,.96rem + .2vw,1.0625rem);
  --t-md:clamp(1.0625rem,1.01rem + .26vw,1.25rem);
  --t-lg:clamp(1.375rem,1.22rem + .66vw,1.875rem);
  --t-xl:clamp(1.75rem,1.42rem + 1.5vw,2.875rem);
  --t-2xl:clamp(2.125rem,1.6rem + 2.5vw,3.75rem);
  --t-3xl:clamp(2.5rem,1.7rem + 3.9vw,4.875rem);

  --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.5rem,2rem + 6.4vw,7.5rem);
  --goutt:clamp(1.15rem,.6rem + 2.4vw,2.75rem);
  --largeur:76rem; --largeur-texte:38rem;

  --transi:200ms cubic-bezier(.4,0,.2,1);
  --tete-h:64px; --barre-h:0px;
  --av-r:0;                  /* le marqueur « à valider » garde l'angle droit */
}
@media (min-width:62rem){ .m4{ --tete-h:80px } }

/* --------------------------------------------------------------- 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.m4{
  font-family:var(--f-texte); font-size:var(--t-base); line-height:1.74;
  color:var(--encre); background:var(--papier);
  -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%}

/* Josefin Sans a une hauteur d'x très basse : à corps égal elle paraît deux
   points plus petite qu'une grotesque ordinaire, et son interlignage par
   défaut ouvre trop. D'où un interlignage serré et une chasse légèrement
   élargie sur les grands corps — c'est le réglage qui fait tenir le titre. */
.m4 h1,.m4 h2,.m4 h3{
  font-family:var(--f-titre); font-weight:400;
  line-height:1.14; letter-spacing:.008em; text-wrap:balance;
}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--brique);outline-offset:3px}
.sect--nuit :focus-visible,.appel :focus-visible{outline-color:var(--clair)}
::selection{background:var(--ocre);color:var(--nuit)}
@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)}
.conteneur--etroit{max-width:50rem}
.conteneur--texte{max-width:var(--largeur-texte)}
.sect{padding-block:var(--sect-y)}
.sect--serree{padding-top:clamp(2rem,1rem + 3vw,3.5rem)}
.sect--haut{padding-top:clamp(2.25rem,1.2rem + 3.6vw,4.5rem)}
.sect--papier2{background:var(--papier-2)}
.sect--ocre{background:var(--ocre)}
.sect--nuit{background:var(--nuit);color:var(--clair)}
.sect--nuit h1,.sect--nuit h2,.sect--nuit h3{color:var(--papier)}
.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}
.tech{font-family:var(--f-tech);font-variant-numeric:tabular-nums;
  font-size:.94em;letter-spacing:-.01em}

.sur{font-family:var(--f-titre);font-weight:600;
  font-size:clamp(.7rem,.665rem + .16vw,.8125rem);
  letter-spacing:.28em;text-transform:uppercase;color:var(--brique);
  line-height:1.5;margin-bottom:var(--e-4)}
.sur--clair{color:var(--terre-clair)}
.t2{font-size:var(--t-xl);font-weight:300;max-width:22ch}
.chapo{font-size:var(--t-md);color:var(--encre-2);
  max-width:var(--largeur-texte);margin-top:var(--e-4)}
.sect--nuit .chapo{color:var(--clair-2)}
.sect--ocre .chapo{color:var(--encre-2)}
.es{margin-bottom:clamp(2rem,1.3rem + 2.8vw,3.5rem)}
.es--centre{text-align:center}
.es--centre .t2,.es--centre .chapo{margin-inline:auto}
.es__suite{margin-top:var(--e-7)}

/* Le filet se trace comme un trait de tire-ligne, à l'apparition. */
.filet{height:1px;border:0;background:var(--brique);
  width:min(140px,40%);margin-block:var(--e-5);
  transform-origin:left center;scale:0 1;
  transition:scale 900ms cubic-bezier(.22,1,.36,1)}
.filet.est-visible{scale:1 1}
.filet--centre{margin-inline:auto;transform-origin:center}
.filet--clair{background:var(--terre-clair)}

/* ------------------------------------------------------- 4. LE MOTIF ---- */
/* Un seul motif : le carré. En signature (trois carrés emboîtés) et en
   trame (le même carré répété en échelle). Rien d'autre n'est ajouté. */
.carre{width:1.15rem;height:1.15rem;color:var(--terre);flex:none}
.trame{display:block;height:9px;width:100%;color:var(--terre);
  margin-bottom:clamp(1.75rem,1.2rem + 2vw,3rem);
  background:
    repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 9px),
    linear-gradient(currentColor 0 0) 0 0/100% 1px no-repeat,
    linear-gradient(currentColor 0 0) 0 100%/100% 1px no-repeat;
  opacity:.5}
.trame--clair{color:var(--terre-clair);opacity:.6}
.trame--large{margin-bottom:0;margin-top:clamp(2rem,1.4rem + 2.4vw,3.5rem)}
/* La trame se dévoile de gauche à droite : c'est le seul « effet » de la
   maquette, et il imite le tracé plutôt que l'animation. */
.js .trame[data-anim]{opacity:.5;translate:none;
  clip-path:inset(0 100% 0 0);transition:clip-path 1000ms cubic-bezier(.22,1,.36,1)}
.js .trame--clair[data-anim]{opacity:.6}
.js .trame[data-anim].est-visible{clip-path:inset(0 0 0 0)}

/* Le cadre à filet double : un filet extérieur, un filet intérieur en
   retrait. C'est la façon dont on montait une gravure sur son carton. */
.cadre{position:relative;border:1px solid var(--f1);
  padding:clamp(1.4rem,1rem + 2.2vw,2.5rem)}
.cadre::before{content:"";position:absolute;inset:6px;
  border:1px solid var(--f2);pointer-events:none}
.cadre--clair{border-color:var(--fc1)}
.cadre--clair::before{border-color:var(--fc2)}

/* La plaque : une image montée sur un carton, filet extérieur + marie-louise. */
.plaque{margin:0}
.plaque__im{position:relative;padding:.55rem;background:var(--papier);
  border:1px solid var(--f1)}
.plaque__im::after{content:"";position:absolute;inset:.55rem;
  border:1px solid var(--f2);pointer-events:none}
.plaque--nuit .plaque__im{background:var(--nuit-2);border-color:var(--fc1)}
.plaque--nuit .plaque__im::after{border-color:var(--fc2)}
.plaque__lg{margin-top:var(--e-3);font-size:var(--t-xs);
  color:var(--encre-2);line-height:1.6;max-width:30rem}
.plaque__cr{display:block;font-family:var(--f-titre);letter-spacing:.07em;
  text-transform:uppercase;margin-top:.35rem;font-size:.95em;line-height:1.5}
.sect--nuit .plaque__lg{color:var(--clair-2)}

/* Apparition au défilement. La classe .js autorise l'état masqué : sans
   JavaScript, rien n'est jamais caché. */
.js [data-anim]{opacity:0;translate:0 16px;
  transition:opacity 700ms ease,translate 700ms cubic-bezier(.22,1,.36,1)}
.js [data-anim].est-visible{opacity:1;translate:0 0}
.js [data-anim][data-delai="1"]{transition-delay:90ms}
.js [data-anim][data-delai="2"]{transition-delay:180ms}
.js [data-anim][data-delai="3"]{transition-delay:270ms}
@media (prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1 !important;translate:none !important}
  .js .trame[data-anim]{clip-path:none !important}
  .filet{scale:1 1 !important}
}

/* ------------------------------------------------------------ 5. BOUTONS */
/* Angles droits : 2 px au maximum. La Sécession ne connaît pas la pilule. */
.btn{
  --bg:var(--nuit);--fg:var(--papier);--bd:var(--nuit);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:3rem;padding:.8rem 1.5rem;border-radius:2px;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  font-family:var(--f-titre);font-weight:600;font-size:var(--t-sm);
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  text-align:center;position:relative;
  transition:background var(--transi),color var(--transi),
             border-color var(--transi),translate var(--transi)}
.btn:hover{translate:0 -2px}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn--brique{--bg:var(--brique);--bd:var(--brique)}
.btn--brique:hover{--bg:#743611;--bd:#743611}
.btn--contour{--bg:transparent;--fg:var(--nuit);--bd:var(--f1)}
.btn--contour:hover{--bd:var(--nuit);--bg:rgba(29,43,58,.05)}
.btn--clair{--bg:var(--papier);--fg:var(--nuit);--bd:var(--papier)}
.btn--lg{min-height:3.3rem;padding:.95rem 1.85rem}
.btn--sm{min-height:2.6rem;padding:.5rem 1rem;font-size:var(--t-xs);
  letter-spacing:.12em}
.btn--bloc{width:100%}
.grp{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:var(--e-6)}
.grp--centre{justify-content:center}
.grp--serre{margin-top:var(--e-3)}
@media (max-width:26rem){ .grp > .btn:not(.btn--sm){width:100%} }

.lien{display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--f-titre);font-weight:600;font-size:var(--t-sm);
  letter-spacing:.14em;text-transform:uppercase;color:var(--brique);
  text-decoration:none;border-bottom:1px solid var(--terre);padding-bottom:4px;
  transition:gap var(--transi),color var(--transi)}
.lien:hover{gap:.75rem;color:var(--nuit);border-bottom-color:var(--nuit)}
.lien svg{width:1.05em;height:1.05em}
.lien--clair{color:var(--terre-clair);border-bottom-color:var(--terre-clair)}
.lien--clair:hover{color:var(--papier);border-bottom-color:var(--papier)}

/* ------------------------------------------------------------- 6. EN-TÊTE */
.tete{position:sticky;top:var(--cmp-h,0px);z-index:80;
  background:rgba(246,239,227,.92);
  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(12px);
        backdrop-filter:saturate(1.4) blur(12px)}
}
/* Collée, l'en-tête gagne son filet double : c'est le même vocabulaire que
   les cadres, appliqué à un bord. */
.tete.est-collee{background:rgba(246,239,227,.985);border-bottom-color:var(--f1)}
.tete.est-collee::after{content:"";position:absolute;left:0;right:0;bottom:-4px;
  height:1px;background:var(--f3)}
.tete__in{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e-4);min-height:var(--tete-h)}
.marque{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.marque__c{width:1.5rem;height:1.5rem;color:var(--terre)}
.marque__nom{display:block;font-family:var(--f-titre);font-weight:600;
  font-size:var(--t-sm);letter-spacing:.2em;text-transform:uppercase;
  line-height:1.2}
.marque__role{display:block;font-size:var(--t-xs);color:var(--encre-2);
  letter-spacing:.12em;text-transform:uppercase;
  font-family:var(--f-titre);margin-top:3px}
/* Des capitales espacées demandent BEAUCOUP plus de place qu'un bas-de-casse :
   à .18em, « LE PSYCHANALYSTE » passait à la ligne et cassait la barre. La
   navigation garde donc un espacement plus serré que les surtitres — c'est le
   seul endroit du site où la largeur commande — et ne se déplie qu'à 70rem,
   au-dessous de quoi le menu de téléphone reprend la main. */
.nav{display:none;gap:clamp(.75rem,1.3vw,1.5rem)}
.nav a{font-family:var(--f-titre);font-weight:600;font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  white-space:nowrap;color:var(--encre-2);padding-block:.5rem;position:relative;
  transition:color var(--transi)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--terre);scale:0 1;transform-origin:left;
  transition:scale var(--transi)}
.nav a:hover,.nav a[aria-current]{color:var(--nuit)}
.nav a:hover::after,.nav a[aria-current]::after{scale:1 1}
.tete__act{display:flex;align-items:center;gap:var(--e-3)}
.tete__cta{display:none;white-space:nowrap;letter-spacing:.1em;
  min-height:2.75rem;padding:.65rem 1.1rem}
.burger{width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--f1);border-radius:2px}
@media (min-width:70rem){
  .nav{display:flex}
  .tete__cta{display:inline-flex}
  .tete .burger{display:none}
}
.burger__l,.burger__l::before,.burger__l::after{
  content:"";display:block;width:18px;height:1.5px;background:var(--nuit);
  transition:transform var(--transi),opacity var(--transi)}
.burger__l::before{transform:translateY(-6px)}
.burger__l::after{transform:translateY(4.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(-1.5px) rotate(-45deg)}

.mm{position:fixed;inset:calc(var(--tete-h) + var(--cmp-h,0px)) 0 0;z-index:79;
  background:var(--papier);padding:var(--e-6) var(--goutt) var(--e-8);
  overflow-y:auto;display:flex;flex-direction:column;justify-content:space-between}
.mm__liens{display:flex;flex-direction:column}
.mm__liens a{display:flex;align-items:baseline;gap:1rem;
  padding:1.05rem 0;border-bottom:1px solid var(--f3);text-decoration:none;
  font-family:var(--f-titre);font-weight:400;font-size:var(--t-lg);
  letter-spacing:.1em;text-transform:uppercase}
.mm__liens a[aria-current]{color:var(--brique)}
.mm__n{font-family:var(--f-tech);font-size:var(--t-xs);color:var(--terre);
  flex:none}
.mm__pied{margin-top:var(--e-7);display:grid;gap:var(--e-4)}
.mm__tel{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-weight:600;color:var(--brique)}
.mm__tel svg{width:1.1em;height:1.1em}

/* -------------------------------------------------- 7. PREMIER ÉCRAN ---- */
/* Une PLANCHE, pas une photographie plein écran : le divan est tenu dans un
   cadre, et son cartouche de titre est posé dessous, dans le même cadre.
   C'est l'écart de composition le plus net avec la maquette 01. */
.heros{padding-block:clamp(1.5rem,1rem + 2.4vw,3rem) 0;background:var(--papier)}
.heros__planche{position:relative;border:1px solid var(--f1);
  padding:clamp(.5rem,.3rem + .8vw,.85rem);background:var(--papier)}
.heros__planche::before{content:"";position:absolute;
  inset:clamp(.5rem,.3rem + .8vw,.85rem);border:1px solid var(--f2);
  pointer-events:none;z-index:1}
.heros__im{overflow:hidden;background:var(--papier-2)}
.heros__im picture,.heros__im img{width:100%;display:block}
.heros__im img{aspect-ratio:5/4;object-fit:cover;object-position:50% 55%}
@media (min-width:44rem){ .heros__im img{aspect-ratio:16/9} }
@media (min-width:70rem){ .heros__im img{aspect-ratio:2/1} }
.heros__cart{text-align:center;padding:clamp(2rem,1.3rem + 3.4vw,3.75rem)
  clamp(1rem,.4rem + 3vw,3.5rem) clamp(1.5rem,1rem + 2.4vw,3rem)}
.heros__cart .sur{margin-bottom:var(--e-5)}
.heros__t{font-size:var(--t-3xl);font-weight:300;max-width:17ch;
  margin-inline:auto;letter-spacing:0}
.heros__c{font-size:var(--t-md);color:var(--encre-2);max-width:40rem;
  margin-inline:auto}

/* ------------------------------------------- 8. EN-TÊTE DE PAGE INTÉRIEURE */
.pt{padding-top:clamp(2rem,1.2rem + 3vw,4rem);background:var(--papier)}
.pt--histoire{background:var(--nuit);color:var(--clair);
  padding-bottom:clamp(2.5rem,1.6rem + 3.4vw,4.5rem)}
.pt__in{display:grid;gap:clamp(1.5rem,1rem + 3vw,3rem);align-items:center}
@media (min-width:62rem){
  .pt__in{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
  .pt__in--inverse{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
}
.pt__cart{background:var(--papier)}
.pt--histoire .pt__cart{background:transparent}
.pt__sceau{width:1.6rem;height:1.6rem;margin-bottom:var(--e-4)}
.pt--histoire .pt__sceau{color:var(--terre-clair)}
.pt__t{font-size:var(--t-2xl);font-weight:300;max-width:16ch}
.pt--histoire .pt__t{color:var(--papier)}
.pt__c{font-size:var(--t-md);color:var(--encre-2);max-width:36rem}
.pt--histoire .pt__c{color:var(--clair-2)}
.pt__im picture,.pt__im img{width:100%}
.pt__im img{object-fit:cover}

/* ----------------------------------------------------------- 9. DUO ----- */
.duo{display:grid;gap:clamp(1.75rem,1.2rem + 3vw,4rem)}
@media (min-width:56rem){
  .duo{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
}
.duo__im{margin-top:var(--e-6);max-width:26rem}
.duo__im img{object-fit:cover}
.duo__txt{max-width:var(--largeur-texte)}
.duo__txt > p + p{margin-top:var(--e-5)}

/* -------------------------------------------------------- 10. LES TROIS -- */
.pubs{display:grid;gap:clamp(1.1rem,.7rem + 1.8vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
/* Les trois cartes sont des planches de même hauteur : leur appel de fin est
   donc poussé en bas, sinon les trois flèches se retrouvent à trois hauteurs
   différentes et le rang se défait. */
.pub{display:flex;flex-direction:column;text-decoration:none;
  background:var(--papier);border:1px solid var(--f1);padding:.55rem;
  position:relative;
  transition:border-color var(--transi),translate var(--transi)}
.pub::before{content:"";position:absolute;inset:.55rem;border:1px solid var(--f2);
  pointer-events:none;z-index:1}
.pub:hover{border-color:var(--nuit);translate:0 -3px}
.pub__media{display:block;overflow:hidden;background:var(--papier-2)}
.pub__media picture,.pub__media img{width:100%;height:100%;object-fit:cover}
.pub__media img{transition:scale 620ms cubic-bezier(.22,1,.36,1)}
.pub:hover .pub__media img{scale:1.04}
.pub__corps{display:flex;flex-direction:column;flex:1;
  padding:clamp(1.25rem,.9rem + 1.6vw,1.75rem) clamp(1rem,.7rem + 1.4vw,1.5rem)}
.pub__corps .sur{margin-bottom:var(--e-2)}
.pub__t{font-family:var(--f-titre);font-weight:400;font-size:var(--t-lg);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--e-3)}
.pub__c{display:block;color:var(--encre-2);font-size:var(--t-sm)}
.pub__go{display:inline-flex;align-self:flex-start;align-items:center;gap:.4rem;
  margin-top:auto;padding-top:var(--e-5);
  font-family:var(--f-titre);font-weight:600;font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--brique)}
.pub__go svg{width:1.05em;height:1.05em;transition:translate var(--transi)}
.pub:hover .pub__go svg{translate:4px 0}

/* -------------------------------------------------------- 11. LE RAIL --- */
/* Les étapes : un filet horizontal par colonne, un carré plein posé dessus.
   Le même carré que partout ailleurs, réduit à son plus simple appareil. */
.rail{display:grid;gap:clamp(1.5rem,1rem + 2.4vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.rail__l{position:relative;padding-top:var(--e-5);border-top:1px solid var(--fc2)}
.rail__l::before{content:"";position:absolute;top:-4px;left:0;
  width:8px;height:8px;background:var(--terre-clair)}
.rail__n{display:block;font-size:var(--t-xs);letter-spacing:.14em;
  color:var(--terre-clair);margin-bottom:var(--e-3)}
.rail__t{font-size:var(--t-md);font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:var(--e-3)}
.rail__x{font-size:var(--t-sm);color:var(--clair-2)}

/* -------------------------------------------------------- 12. TEASER ---- */
.teaser{display:grid;gap:clamp(1.5rem,1rem + 3vw,3.5rem);align-items:center}
@media (min-width:56rem){
  .teaser{grid-template-columns:minmax(0,.7fr) minmax(0,1fr)}
}
.teaser__im img{aspect-ratio:4/5;object-fit:cover;filter:sepia(.12) contrast(1.02)}
.teaser__txt > p{margin-top:var(--e-5);color:var(--encre-2);max-width:36rem}
.teaser__go{margin-top:var(--e-6)}

/* -------------------------------------------------------- 13. ADRESSE --- */
.adr{display:grid;gap:clamp(1.5rem,1rem + 3vw,3.5rem);align-items:center}
@media (min-width:58rem){
  .adr{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
}
.adr__bloc{margin-block:var(--e-6) var(--e-5);font-size:var(--t-md);
  line-height:1.8}

/* ------------------------------------------------- 14. LE PLAN, CADASTRAL */
/* Le plan est un SVG sans aucune couleur en dur : tout se décide ici. On le
   traite en plan cadastral ancien — papier chaud, bâti en aplat sourd, voies
   en réserve claire — et on l'encadre du même filet double que les images. */
.plan-cadre{position:relative;border:1px solid var(--f1);padding:.55rem;
  background:#F2E8D4}
.plan-cadre::after{content:"";position:absolute;inset:.55rem;
  border:1px solid var(--f2);pointer-events:none}
.plan{width:100%;height:auto;display:block}
.plan__fond{fill:#F2E8D4}
.plan__bati{fill:#E1D2B5;stroke:none}
.plan__vert{fill:#D9DCC0}
.plan__eau{fill:#C6D5D4;stroke:#C6D5D4;stroke-width:3}
.plan__voie{stroke:#FBF5E9}
.plan__voie--majeure{stroke:#FFFCF4}
.plan__voie--pieton{stroke:#EFE5D0}
.plan__tram{stroke:#A28C68;stroke-width:1.6;stroke-dasharray:6 5}
.plan__libelle text{fill:#7A6A50;font-family:var(--f-titre);font-weight:600;
  font-size:11px;letter-spacing:.09em}
.plan__halo{fill:var(--terre);opacity:.15}
.plan__halo--2{opacity:.24}
.plan__point{fill:var(--brique)}
.plan__oeil{fill:#F6EFE3}
.plan__ici{fill:var(--nuit);font:600 15px var(--f-titre);letter-spacing:.14em}
.plan__echelle path{stroke:#6B5B44;stroke-width:1.3;fill:none}
.plan__echelle text,.plan__nord text{fill:#6B5B44;
  font:600 11px var(--f-titre);letter-spacing:.08em}
.plan__nord path{fill:#6B5B44}
.plan__credit{fill:#8B7A5F;font:400 10px var(--f-titre);letter-spacing:.06em}

/* -------------------------------------------------------- 15. ONGLETS --- */
.onglets__barre{display:flex;gap:.25rem;flex-wrap:wrap;
  border-bottom:1px solid var(--f2);margin-bottom:clamp(2rem,1.3rem + 2.8vw,3.25rem)}
.ong{padding:.9rem 1.15rem;font-family:var(--f-titre);font-weight:600;
  font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--encre-2);position:relative;margin-bottom:-1px;
  border-bottom:2px solid transparent;transition:color var(--transi)}
.ong:hover{color:var(--nuit)}
.ong.est-actif{color:var(--brique);border-bottom-color:var(--brique)}
.ong.est-actif::before{content:"";position:absolute;left:50%;bottom:-6px;
  width:7px;height:7px;translate:-50% 0;background:var(--brique)}
.est-onglets .pan{animation:parait 420ms cubic-bezier(.22,1,.36,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.5rem,1rem + 2.6vw,3rem);align-items:start;
  margin-bottom:clamp(2rem,1.3rem + 2.8vw,3rem)}
@media (min-width:58rem){
  .pan__tete{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
}
.pan__im img{aspect-ratio:4/3;object-fit:cover}
.portes{display:grid;gap:clamp(1rem,.7rem + 1.5vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.porte{padding-top:var(--e-4);border-top:1px solid var(--f2)}
.porte__c{width:.95rem;height:.95rem;margin-bottom:var(--e-3)}
.porte__t{font-family:var(--f-titre);font-weight:400;font-size:var(--t-md);
  letter-spacing:.05em;margin-bottom:var(--e-3)}
.porte p{font-size:var(--t-sm);color:var(--encre-2)}
.encart{margin-top:clamp(2rem,1.3rem + 2.8vw,3rem);background:var(--papier-2);
  max-width:48rem}
.encart__t{font-family:var(--f-titre);font-weight:600;font-size:var(--t-md);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--e-4);
  color:var(--brique)}
.encart p + p{margin-top:var(--e-4)}
.encart p{font-size:var(--t-sm)}

/* --------------------------------------------------- 16. QUESTIONS/RÉP -- */
.qrs{border-top:1px solid var(--f2)}
.qr{border-bottom:1px solid var(--f2)}
.qr__q{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;padding:1.15rem 0;cursor:pointer;list-style:none;
  font-family:var(--f-titre);font-weight:600;font-size:var(--t-md);
  letter-spacing:.05em}
.qr__q::-webkit-details-marker{display:none}
.qr__ic{width:1.15em;height:1.15em;flex:none;color:var(--brique);margin-top:.15em;
  transition:transform var(--transi)}
.qr[open] .qr__ic{transform:rotate(45deg)}
.qr__r{padding-bottom:1.3rem;max-width:44rem}
.qr__r p{color:var(--encre-2)}
.qr[open] .qr__r{animation:parait 320ms ease}

/* -------------------------------------------------------- 17. TARIFS ---- */
.tar-cadre{border:1px solid var(--f1);padding:.55rem;background:var(--papier);
  position:relative}
.tar-cadre::after{content:"";position:absolute;inset:.55rem;
  border:1px solid var(--f2);pointer-events:none}
.tar{background:var(--papier)}
.tar th,.tar td{text-align:left;padding:.85rem clamp(.6rem,.4rem + .6vw,1.1rem);
  border-bottom:1px solid var(--f3)}
.tar thead th{font-family:var(--f-titre);font-weight:600;font-size:var(--t-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--brique);
  border-bottom:1px solid var(--f2)}
.tar tbody th{font-weight:600}
.tar tbody tr:last-child th,.tar tbody tr:last-child td{border-bottom:0}
.tar__note{display:block;font-weight:400;font-size:var(--t-xs);
  color:var(--encre-2);margin-top:3px;line-height:1.45}
.tar__prix{text-align:right;font-weight:500;white-space:nowrap;color:var(--nuit)}
.tar td:nth-child(2){color:var(--encre-2);white-space:nowrap}
.mentions{margin-top:var(--e-5);display:grid;gap:.5rem;font-size:var(--t-sm);
  color:var(--encre-2)}
.mentions li{padding-left:1.4em;position:relative}
.mentions li::before{content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;background:var(--terre)}

/* --------------------------------------------------- 18. PSYCHANALYSE --- */
/* Le chapeau reste en Lora : Josefin Sans est faite pour trois mots en
   capitales, pas pour six lignes de bas-de-casse. C'est ce que dit le
   dessin de sa hauteur d'x. */
.intro__p{font-size:var(--t-md);color:var(--encre-2)}
.intro__p + .intro__p{margin-top:var(--e-5)}
.intro__p:first-child{font-size:var(--t-lg);font-weight:500;line-height:1.55;
  color:var(--nuit)}
.props{display:grid;gap:clamp(2.25rem,1.5rem + 3.4vw,4rem)}
@media (min-width:60rem){ .props{grid-template-columns:repeat(3,1fr)} }
.prop{position:relative;padding-top:var(--e-5);border-top:1px solid var(--f2)}
.prop__n{position:absolute;top:-.85em;right:0;font-size:var(--t-xs);
  color:var(--brique);letter-spacing:.1em;background:var(--papier-2);
  padding-left:.5rem}
.prop__t{font-size:var(--t-lg);font-weight:400;max-width:17ch;
  letter-spacing:.02em}
.prop__txt{margin-top:var(--e-5)}
.prop__txt p + p{margin-top:var(--e-4)}
.prop__txt p{font-size:var(--t-sm);color:var(--encre-2)}

.metiers{display:grid;gap:clamp(1rem,.7rem + 1.5vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.metier{background:var(--papier)}
.metier__t{font-family:var(--f-titre);font-weight:600;font-size:var(--t-md);
  letter-spacing:.09em;text-transform:uppercase}
.metier__r{margin-top:var(--e-2);color:var(--brique);font-size:var(--t-sm);
  font-weight:500}
.metier__c{margin-top:var(--e-4);font-size:var(--t-sm);color:var(--encre-2)}

.cass{display:grid;gap:clamp(1.2rem,.9rem + 1.6vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.cas{padding-top:var(--e-4);border-top:1px solid var(--fc2)}
.cas__c{width:.95rem;height:.95rem;color:var(--terre-clair);margin-bottom:var(--e-3)}
.cas__t{font-size:var(--t-md);font-weight:400;letter-spacing:.05em;
  margin-bottom:var(--e-3)}
.cas p{font-size:var(--t-sm);color:var(--clair-2)}

.lecs{display:grid;gap:clamp(1.2rem,.9rem + 1.6vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.lec{background:rgba(246,239,227,.55)}
.lec__t{display:flex;align-items:center;gap:.55rem;font-family:var(--f-titre);
  font-weight:600;font-size:var(--t-sm);letter-spacing:.16em;
  text-transform:uppercase;padding-bottom:var(--e-3);
  border-bottom:1px solid var(--f2)}
.lec__ic{width:1.2em;height:1.2em;color:var(--brique);flex:none}
.lec__l{display:grid;gap:var(--e-5);margin-top:var(--e-5)}
.lec__oeuvre{display:block;font-weight:600}
.lec__auteur{display:block;font-size:var(--t-sm);color:var(--brique);margin-top:2px}
.lec__note{display:block;font-size:var(--t-sm);color:var(--encre-2);
  margin-top:.35rem}

/* ------------------------------------------------------- 19. HISTOIRE --- */
/* La vitrine. Trois planches, et rien qui vienne les concurrencer. */
/* Le portrait de Freud est une image PAYSAGE (1200×920) : lui imposer un
   cadre vertical lui coupait le haut du crâne. On garde son format natif et
   c'est la marie-louise qui fait le portrait. */
.ouv{display:grid;gap:clamp(1.75rem,1.2rem + 3vw,3.5rem);align-items:start;
  margin-top:clamp(1.75rem,1.2rem + 2.4vw,3rem)}
@media (min-width:62rem){
  .ouv{grid-template-columns:24rem minmax(0,1fr)}
}
.ouv__im{max-width:24rem}
.ouv__txt p + p{margin-top:var(--e-5)}
.ouv__txt p{color:var(--encre-2);max-width:38rem}
.cit{position:relative;padding:clamp(1.25rem,1rem + 1.6vw,2rem) 0
  clamp(1.25rem,1rem + 1.6vw,2rem);
  border-top:2px solid var(--terre);border-bottom:1px solid var(--f2)}
.cit__t{font-family:var(--f-titre);font-weight:300;font-size:var(--t-xl);
  line-height:1.2;letter-spacing:.01em;color:var(--nuit)}
.cit__s{margin-top:var(--e-4);font-family:var(--f-titre);font-weight:600;
  font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;
  color:var(--brique)}

.frise__tete{display:grid;gap:clamp(1.5rem,1rem + 2.4vw,2.5rem);
  align-items:end;margin-bottom:clamp(2rem,1.4rem + 2.6vw,3.25rem)}
@media (min-width:62rem){
  .frise__tete{grid-template-columns:minmax(0,1fr) 15rem}
}
.frise__im{max-width:15rem}
/* La frise : une planche d'exposition. Un filet vertical, des cotes à
   gauche, et le motif en nœud sur chaque date. */
.frise{background:transparent}
/* Aucun écart entre les entrées : c'est le rembourrage bas qui les espace,
   pour que le filet vertical soit CONTINU d'un bout à l'autre de la planche.
   Avec un gap, il se serait débité en douze segments. */
.frise__l{display:grid;gap:0}
.fr{display:grid;gap:.6rem}
@media (min-width:48rem){
  .fr{grid-template-columns:9.5rem minmax(0,1fr);gap:0 2.25rem;align-items:start}
}
.fr__date{display:flex;flex-direction:column;gap:2px;padding-top:.1rem}
.fr__an{font-family:var(--f-titre);font-weight:300;font-size:var(--t-lg);
  letter-spacing:.06em;color:var(--papier);line-height:1.1}
.fr__lieu{font-family:var(--f-titre);font-weight:600;font-size:var(--t-xs);
  letter-spacing:.18em;text-transform:uppercase;color:var(--terre-clair)}
.fr__c{position:relative;padding-left:2rem;border-left:1px solid var(--fc2);
  padding-bottom:clamp(1.75rem,1.2rem + 2.4vw,2.75rem)}
.fr:last-child .fr__c{padding-bottom:0}
.fr__pt{position:absolute;left:0;top:.1rem;translate:-50% 0;
  width:1.05rem;height:1.05rem;color:var(--terre-clair);
  background:var(--nuit);padding:1px}
.fr__t{font-size:var(--t-md);font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:var(--e-3)}
.fr__x{font-size:var(--t-sm);color:var(--clair-2);max-width:46rem}

.divan{display:grid;gap:clamp(1.75rem,1.2rem + 3vw,3.5rem);align-items:center}
@media (min-width:58rem){
  /* Deux colonnes de largeur FIXE, centrées : avec un 1fr à droite, la paire
     se collait à gauche et laissait un vide de 20 % sur la droite. */
  .divan{grid-template-columns:30rem minmax(0,32rem);justify-content:center}
}
/* La photographie du divan n'existe qu'en 480 px de large : on ne l'agrandit
   pas, on l'entoure. Une marie-louise large fait le reste — c'est d'ailleurs
   ainsi qu'on présente une pièce au musée. */
.plaque--musee .plaque__im{padding:clamp(1rem,.7rem + 1.4vw,1.75rem);
  background:var(--papier)}
.plaque--musee .plaque__im::after{inset:clamp(1rem,.7rem + 1.4vw,1.75rem)}
.divan__im{max-width:30rem;margin-inline:auto}
.divan__txt p{color:var(--encre-2);max-width:34rem}
.divan__txt p + p{margin-top:var(--e-5)}

/* Cinq entrées : à quatre colonnes il en reste une seule sur la ligne du
   bas. Trois colonnes donnent 3 + 2, plus tenable, et une justification plus
   confortable. */
.mots{display:grid;gap:clamp(1.2rem,.9rem + 1.6vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.mot{padding-top:var(--e-4);border-top:1px solid var(--f2);position:relative}
.mot::before{content:"";position:absolute;top:-4px;left:0;width:8px;height:8px;
  background:var(--terre)}
.mot__t{font-family:var(--f-titre);font-weight:600;font-size:var(--t-sm);
  letter-spacing:.2em;text-transform:uppercase;color:var(--brique);
  margin-bottom:var(--e-3)}
.mot p{font-size:var(--t-sm);color:var(--encre-2)}

/* --------------------------------------------------- 20. PSYCHANALYSTE -- */
.pf{display:grid;gap:clamp(1.75rem,1.2rem + 3vw,3.5rem);align-items:center}
@media (min-width:58rem){
  .pf{grid-template-columns:minmax(0,.8fr) minmax(0,1.15fr)}
}
.pf__im img{aspect-ratio:4/5;object-fit:cover}
/* Le marqueur « photographie provisoire » doit rester impossible à manquer :
   il est le seul élément de la maquette autorisé à être laid. */
.pf__prov{display:flex;align-items:flex-start;gap:.55rem;margin-top:.55rem;
  padding:.8rem 1rem;background:#FBEEEA;border-left:3px solid #9E2F17;
  font-family:var(--f-titre);font-weight:600;font-size:var(--t-sm);
  letter-spacing:.06em;color:#7A2410;line-height:1.5}
.pf__prov svg{width:1.2em;height:1.2em;flex:none;margin-top:.15em;color:#9E2F17}
.pf__t{font-size:var(--t-2xl);font-weight:300}
.pf__txt > p{margin-top:var(--e-5);color:var(--encre-2);max-width:36rem}
.pf__txt > .chapo{color:var(--nuit);font-size:var(--t-lg);font-weight:500;
  line-height:1.55}

.parc{display:grid;gap:0;border-top:1px solid var(--f1)}
.parc__l{display:grid;gap:.15rem 1.5rem;padding:.95rem 0;
  border-bottom:1px solid var(--f2)}
@media (min-width:44rem){ .parc__l{grid-template-columns:15rem minmax(0,1fr)} }
.parc__k{font-family:var(--f-titre);font-weight:600;font-size:var(--t-sm);
  letter-spacing:.14em;text-transform:uppercase}
.parc__v{color:var(--encre-2);font-style:italic;font-size:var(--t-sm)}

.engs{display:grid;gap:clamp(1.3rem,1rem + 1.7vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.eng{padding-top:var(--e-4);border-top:1px solid var(--fc2);position:relative}
.eng::before{content:"";position:absolute;top:-4px;left:0;width:8px;height:8px;
  background:var(--terre-clair)}
.eng__n{display:block;font-size:var(--t-xs);color:var(--terre-clair);
  letter-spacing:.14em;margin-bottom:var(--e-3)}
.eng__t{font-size:var(--t-md);font-weight:400;letter-spacing:.05em;
  margin-bottom:var(--e-3)}
.eng p{font-size:var(--t-sm);color:var(--clair-2)}

/* -------------------------------------------------------- 21. CONTACT --- */
.ct{display:grid;gap:clamp(1.75rem,1.2rem + 3vw,3.5rem);align-items:start}
@media (min-width:58rem){ .ct{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ct__appel .t2{font-size:var(--t-lg);font-weight:400;letter-spacing:.06em;
  text-transform:uppercase}
.ct__appel p{color:var(--encre-2);max-width:34rem}
.ct__adr{background:var(--papier-2)}
.ct__c{width:1.4rem;height:1.4rem;margin-bottom:var(--e-4)}
.ct__addr{font-style:normal;line-height:1.85;font-size:var(--t-sm)}
.ct__addr strong{font-family:var(--f-titre);font-weight:600;
  font-size:var(--t-md);letter-spacing:.14em;text-transform:uppercase}
.ct__t{font-family:var(--f-titre);font-weight:600;font-size:var(--t-sm);
  letter-spacing:.2em;text-transform:uppercase;color:var(--brique);
  margin:var(--e-6) 0 var(--e-4)}
.tel-gros{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-family:var(--f-titre);font-weight:300;font-size:var(--t-xl);
  color:var(--brique);letter-spacing:.04em;
  margin-block:var(--e-5);transition:color var(--transi)}
.tel-gros:hover{color:var(--nuit)}
.tel-gros svg{width:.8em;height:.8em}
.tel-gros--clair{color:var(--papier)}
.tel-gros--clair:hover{color:var(--ocre)}

.hor{display:grid;gap:0;border-top:1px solid var(--f2)}
.hor__l{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--f3);
  font-size:var(--t-sm)}
.hor__l--off{color:var(--encre-2)}
.hor dt{font-family:var(--f-titre);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;font-size:var(--t-xs)}

.acces{display:grid;gap:clamp(1.5rem,1rem + 3vw,3rem);align-items:start}
@media (min-width:60rem){
  .acces{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
}
.modes{display:grid;gap:var(--e-4)}
.mode{display:flex;gap:var(--e-4);align-items:flex-start;
  padding-bottom:var(--e-4);border-bottom:1px solid var(--f3)}
.mode:last-child{border-bottom:0;padding-bottom:0}
.mode__ic{width:1.35rem;height:1.35rem;flex:none;color:var(--brique);
  margin-top:.2em}
/* Enfants DIRECTS seulement : le marqueur « à valider » loge lui aussi un
   strong et un span, et il porte son propre habillage — on ne le rhabille pas. */
.mode > div > strong{display:block;font-family:var(--f-titre);font-weight:600;
  font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase}
.mode > div > span{display:block;font-size:var(--t-sm);color:var(--encre-2);
  margin-top:.15rem}
.mode--valider .a-valider{margin:.5rem 0 0}
.acces__it-t{margin-top:var(--e-6);font-family:var(--f-titre);font-weight:600;
  font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;
  color:var(--brique)}
.acces__note{margin-top:var(--e-5);font-size:var(--t-xs);color:var(--encre-2);
  max-width:32rem;line-height:1.65}

.form{display:grid;gap:var(--e-5);background:rgba(246,239,227,.6)}
.ch{display:grid;gap:.35rem}
.ch__l{font-family:var(--f-titre);font-weight:600;font-size:var(--t-xs);
  letter-spacing:.18em;text-transform:uppercase}
.ch__req{color:var(--brique);margin-left:.3em}
.ch__aide{font-size:var(--t-xs);color:var(--encre-2)}
.ch__i{width:100%;padding:.75rem .9rem;background:var(--papier);
  border:1px solid var(--f1);border-radius:2px;font-size:var(--t-base);
  transition:border-color var(--transi),box-shadow var(--transi)}
.ch__i:focus{outline:0;border-color:var(--brique);
  box-shadow:0 0 0 3px rgba(143,68,25,.18)}
textarea.ch__i{resize:vertical;min-height:8rem}
.form__rgpd{font-size:var(--t-xs);color:var(--encre-2);max-width:36rem;
  line-height:1.65}
.form__act{margin-top:var(--e-2)}
.form__demo{padding:1rem 1.2rem;background:var(--nuit);color:var(--clair);
  font-size:var(--t-sm)}
.form__demo strong{display:block;margin-bottom:.25rem;
  font-family:var(--f-titre);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--papier)}
/* Le remerciement vient du contenu et ne parle que du fond ; la mention qui
   suit dit que rien n'est parti. Les deux doivent se distinguer à l'œil,
   sinon le visiteur attend une réponse qui n'arrivera jamais. */
.form__demo-note{display:block;margin-top:.7rem;padding-top:.7rem;
  border-top:1px solid var(--fc2);font-weight:600;font-size:var(--t-sm);
  line-height:1.6;color:var(--terre-clair)}

/* -------------------------------------------------------- 22. URGENCE --- */
.urg{background:var(--brun);color:#E6D9CC;padding-block:clamp(2.5rem,1.8rem + 3vw,4rem)}
.urg__in{display:grid;gap:clamp(1.5rem,1rem + 2.4vw,3rem)}
@media (min-width:56rem){
  .urg__in{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr)}
}
.urg__t{font-size:var(--t-lg);font-weight:400;color:#FFF7EF;
  display:flex;align-items:center;gap:.6rem;letter-spacing:.06em;
  text-transform:uppercase}
.urg__ic{width:1.05em;height:1.05em;color:#E9A272;flex:none}
.urg__chapo{margin-top:var(--e-4);color:#C1AE9C;font-size:var(--t-sm);
  max-width:32rem}
.urg__liste{display:grid;gap:var(--e-4)}
/* Une colonne de numéros en grille et non en flex : « 09 72 39 40 50 » est
   deux fois plus long que « 15 » et décalait toute la colonne de droite. */
.urg__l{display:grid;gap:.2rem;padding-bottom:var(--e-4);
  border-bottom:1px solid rgba(230,217,204,.14)}
@media (min-width:34rem){
  .urg__l{grid-template-columns:9.5rem minmax(0,1fr);gap:0 var(--e-4);
    align-items:baseline}
}
.urg__l:last-child{border-bottom:0;padding-bottom:0}
.urg__num{font-family:var(--f-tech);font-weight:500;
  color:#E9A272;letter-spacing:-.01em}
.urg__c strong{display:block;color:#FFF7EF;font-family:var(--f-titre);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  font-size:var(--t-xs);margin-bottom:.15rem}
.urg__c{font-size:var(--t-sm);color:#C1AE9C}

/* ------------------------------------------------------ 23. APPEL FINAL - */
.appel{background:var(--brique);color:var(--papier);
  padding-block:clamp(3rem,2rem + 4vw,5rem);text-align:center}
.appel__in{display:flex;flex-direction:column;align-items:center}
.appel .trame{color:#F2DCC8;opacity:.55;max-width:14rem}
.js .appel .trame[data-anim]{opacity:.55}
.appel .sur--clair{color:#F2DCC8}
/* Sur l'aplat terre cuite, la terre cuite claire tombe à 2,6:1 : le lien
   « clair » s'y rhabille en crème. Une couleur d'accent n'est jamais
   transposable telle quelle d'un fond sombre à un fond coloré. */
.appel .lien--clair{color:#F2DCC8;border-bottom-color:#F2DCC8}
.appel .lien--clair:hover{color:var(--papier);border-bottom-color:var(--papier)}
.appel__t{font-size:var(--t-xl);font-weight:300;color:var(--papier);
  max-width:20ch}
.appel__c{margin-top:var(--e-4);color:#F6E7D9;max-width:36rem}
.appel__adr{font-size:var(--t-sm);color:#F6E7D9;display:inline-flex;
  align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:center}
.appel__adr svg{width:1.05em;height:1.05em;flex:none}
.appel__go{margin-top:var(--e-6)}

/* ---------------------------------------------------------- 24. PIED ---- */
.pied{background:var(--nuit-2);color:var(--clair-2);
  padding-block:clamp(2.5rem,1.8rem + 3vw,4rem) var(--e-6)}
.pied .trame{color:var(--terre-clair)}
.pied__in{display:grid;gap:clamp(1.75rem,1.2rem + 3vw,3.5rem)}
@media (min-width:56rem){ .pied__in{grid-template-columns:1.1fr .7fr 1.2fr} }
.pied__marque{display:flex;align-items:center;gap:.6rem;
  font-family:var(--f-titre);font-weight:600;font-size:var(--t-sm);
  letter-spacing:.2em;text-transform:uppercase;color:var(--papier)}
.pied__c{width:1.3rem;height:1.3rem;color:var(--terre-clair)}
.pied__role{font-family:var(--f-titre);font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;margin-top:.4rem}
.pied__adr{font-style:normal;margin-top:var(--e-5);line-height:1.85;
  font-size:var(--t-sm)}
.pied__adr a{color:var(--terre-clair);text-decoration:none;font-weight:600}
.pied__adr a:hover{text-decoration:underline}
.pied__sr{margin-top:var(--e-3);font-size:var(--t-xs)}
.pied__t{font-family:var(--f-titre);font-weight:600;font-size:var(--t-xs);
  letter-spacing:.22em;text-transform:uppercase;color:var(--papier);
  margin-bottom:var(--e-4)}
.pied__liens{display:grid;gap:.5rem;font-size:var(--t-sm)}
.pied__liens a{text-decoration:none}
.pied__liens a:hover{color:var(--papier)}
.pied__legal{display:grid;gap:.65rem;font-size:var(--t-xs);line-height:1.7;
  max-width:34rem}
.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:1px solid var(--fc3);font-size:var(--t-xs)}

/* -------------------------------------------------- 25. BARRE TÉLÉPHONE - */
.barre-tel{display:none}
@media (max-width:47.99rem){
  .m4{--barre-h:64px}
  .barre-tel{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:.6rem var(--goutt) calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(246,239,227,.96);border-top:1px solid var(--f1)}
  @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:.5rem;
    min-height:2.9rem;background:var(--brique);color:var(--papier);
    border-radius:2px;text-decoration:none;font-family:var(--f-titre);
    font-weight:600;font-size:var(--t-xs);letter-spacing:.16em;
    text-transform:uppercase}
  .barre-tel__a svg{width:1.2em;height:1.2em}
}

@media print{
  .tete,.mm,.barre-tel,.appel{display:none}
  body.m4{background:#fff}
  .js [data-anim]{opacity:1 !important;translate:none !important}
}