/* ==========================================================================
   MAQUETTE 02 — « LE CABINET »
   Cormorant Garamond + Jost (+ IBM Plex Mono pour les chiffres).
   Vert-noir, crème, laiton. Feuille unique, mobile d'abord, zéro dépendance.
   ========================================================================== */

/* ------------------------------------------------------------- 1. JETONS */
.m2{
  /* Quatre profondeurs de fond, pas une de plus : sans elles, une page
     sombre s'aplatit et toutes les sections se ressemblent. */
  --nuit:#0F1412;            /* le creux : urgence, frise, plan */
  --fond:#141A18;            /* le sol */
  --pli:#1A211E;             /* une marche au-dessus */
  --relief:#1E2723;          /* encarts et champs de saisie */

  --creme:#EDE7DD;           /* 14,3:1 sur --fond */
  --creme-2:#A79E90;         /*  6,7:1 sur --fond · 5,8:1 sur --relief */
  --creme-3:#9A917F;         /*  5,6:1 sur --fond · 4,9:1 sur --relief */

  /* Le laiton PUR (#A98B54) tombe à 5,5:1 : il tient, mais il grisaille dès
     qu'on descend en petit corps. On le garde pour les filets, et on éclaire
     l'accent typographique à #C0A268 — 7,2:1, franc partout. */
  --laiton:#A98B54;
  --laiton-txt:#C0A268;
  --laiton-clair:#D8BF8C;

  --filet:rgba(169,139,84,.24);
  --filet-fort:rgba(169,139,84,.5);
  --filet-froid:rgba(237,231,221,.11);

  --f-titre:'Cormorant Garamond','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --f-texte:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  /* Corps de texte (Jost) */
  --t-xs:clamp(.75rem,.72rem + .1vw,.8125rem);
  --t-sm:clamp(.8125rem,.79rem + .13vw,.9rem);
  --t-base:clamp(1rem,.97rem + .18vw,1.0938rem);
  --t-md:clamp(1.0625rem,1.02rem + .24vw,1.1875rem);
  /* Corps de titre (Cormorant) — le plus petit vaut 21,6 px : sous 20 px ce
     dessin perd ses pleins et déliés et devient sale. */
  --t-t-s:clamp(1.35rem,1.22rem + .62vw,1.75rem);
  --t-t-m:clamp(1.55rem,1.28rem + 1.3vw,2.4rem);
  --t-t-l:clamp(2rem,1.5rem + 2.4vw,3.5rem);
  --t-t-xl:clamp(2.6rem,1.55rem + 4.9vw,5.75rem);

  --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,1.9rem + 6.6vw,8rem);
  --goutt:clamp(1.15rem,.55rem + 2.8vw,3.25rem);
  --largeur:76rem; --largeur-texte:38rem;

  --transi:200ms cubic-bezier(.4,0,.2,1);
  --tete-h:62px; --barre-h:0px;
  /* Le marqueur « à valider » garde son fond et ses couleurs — ils sont
     communs aux quatre maquettes et ne se négocient pas. Seul son rayon
     d'angle est offert au thème : ici, rien n'est arrondi nulle part. */
  --av-r:0px;

  /* Toutes les photographies passent par le même bain. Sans lui, une image
     de banque en haute lumière (un canapé blanc, une porte au soleil) troue
     littéralement la page et rend le reste terne : la cohérence d'une
     maquette sombre se joue là, pas dans les aplats. */
  --bain:saturate(.5) brightness(.74) contrast(1.06);
  --bain-doux:saturate(.42) brightness(.9) contrast(1.06);
  /* Pour les bandes plein cadre : un canapé blanc sur mur blanc reste une
     dalle lumineuse même après --bain, et une dalle lumineuse au milieu
     d'une page sombre, c'est un trou. */
  --bain-fort:saturate(.4) brightness(.5) contrast(1.12);

  /* Grain : 3 %. Un fond sombre parfaitement lisse a l'air d'un écran ;
     avec un grain, il a l'air d'une matière. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.032'/%3E%3C/svg%3E");
  color-scheme:dark;         /* menus déroulants et ascenseurs natifs sombres */
}
@media (min-width:62rem){ .m2{ --tete-h:78px } }

/* --------------------------------------------------------------- 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.m2{
  font-family:var(--f-texte); font-size:var(--t-base); font-weight:300;
  line-height:1.72; letter-spacing:.004em;
  color:var(--creme); background-color:var(--fond); background-image:var(--grain);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none; overflow-x:clip; 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%}
hr{border:0}

.m2 h1,.m2 h2,.m2 h3,.m2 h4{
  font-family:var(--f-titre); font-weight:400; line-height:1.12;
  letter-spacing:0; text-wrap:balance; color:var(--creme);
}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--laiton-clair);outline-offset:3px}
::selection{background:rgba(169,139,84,.32);color:var(--creme)}
@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--plan{max-width:64rem}
.sect{padding-block:var(--sect-y);position:relative}
.sect--serree{padding-top:clamp(2rem,1rem + 3vw,3.5rem)}
.sect--pli{background-color:var(--pli);background-image:var(--grain)}
.sect--nuit{background-color:var(--nuit);background-image:var(--grain)}
/* Un liseré de laiton en tête de chaque changement de sol : c'est lui qui
   remplace, ici, l'ombre portée des cartes de m1. */
.sect--pli::before,.sect--nuit::before{content:"";position:absolute;
  inset:0 0 auto;height:1px;background:linear-gradient(90deg,
    transparent,var(--filet-fort) 22%,var(--filet-fort) 78%,transparent)}
.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-mono);font-weight:400;font-variant-numeric:tabular-nums;
  letter-spacing:.02em}

.sur{font-family:var(--f-texte);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--laiton-txt);
  margin-bottom:var(--e-4)}
.t2{font-size:var(--t-t-l);max-width:20ch}
.t3{font-size:var(--t-t-m);max-width:22ch}
.chapo{font-size:var(--t-md);color:var(--creme-2);max-width:44ch;
  margin-top:var(--e-4);font-weight:300}
.tete-s{margin-bottom:clamp(2.25rem,1.3rem + 3.4vw,4.25rem);max-width:52rem}
.suite{margin-top:var(--e-7)}
.etroit-note{max-width:46rem}
.credit{display:block;color:var(--creme-3);margin-top:2px}

/* Le filet de laiton se trace à l'apparition, lentement, de gauche à droite.
   C'est le seul geste animé de la maquette. */
.filet{height:1px;background:linear-gradient(90deg,var(--laiton),transparent);
  width:min(190px,44%);margin-block:var(--e-5);
  transform-origin:left center;scale:0 1;
  transition:scale 1100ms cubic-bezier(.22,1,.36,1)}
.filet.est-visible{scale:1 1}

.js [data-anim]{opacity:0;translate:0 16px;
  transition:opacity 900ms ease,translate 900ms cubic-bezier(.22,1,.36,1)}
.js [data-anim].est-visible{opacity:1;translate:0 0}
.js [data-anim][data-delai="1"]{transition-delay:120ms}
.js [data-anim][data-delai="2"]{transition-delay:240ms}
.js [data-anim][data-delai="3"]{transition-delay:360ms}
@media (prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1 !important;translate:none !important}
}

/* Colonnes de journal : un texte de trois paragraphes lu sur 76 rem de large
   est illisible ; le couper en deux colonnes rend la ligne à sa longueur.
   En dessous de trois, c'est .mesure qui prend le relais (voir classe_texte). */
.mesure{max-width:var(--largeur-texte)}
.mesure p + p{margin-top:var(--e-5)}
.colonnes{max-width:var(--largeur-texte)}
.colonnes p + p{margin-top:var(--e-5)}
@media (min-width:56rem){
  .colonnes{max-width:64rem;columns:2;column-gap:clamp(2rem,4vw,4.5rem);
    column-rule:1px solid var(--filet-froid)}
  .colonnes p{break-inside:avoid}
  .colonnes p + p{margin-top:var(--e-4)}
  .colonnes--2{column-gap:2.5rem}
}

/* ------------------------------------------------------------ 4. BOUTONS */
/* Aucun angle arrondi de toute la maquette : ce sont des plaques gravées,
   pas des pastilles. */
.btn{
  --bg:transparent;--fg:var(--creme);--bd:var(--filet-fort);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:3rem;padding:.8rem 1.7rem;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  font-size:var(--t-sm);font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;text-align:center;
  transition:background var(--transi),color var(--transi),border-color var(--transi);
}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn--laiton{--bg:var(--laiton-txt);--fg:#121715;--bd:var(--laiton-txt)}
.btn--laiton:hover{background:var(--laiton-clair);border-color:var(--laiton-clair)}
.btn--contour:hover{border-color:var(--creme);background:rgba(237,231,221,.06)}
.btn--lg{min-height:3.4rem;padding:.95rem 2.1rem}
.btn--sm{min-height:2.6rem;padding:.55rem 1.05rem;font-size:var(--t-xs)}
.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-3)}
@media (max-width:26rem){ .grp > .btn:not(.btn--sm){width:100%} }

.lien{display:inline-flex;align-items:center;gap:.45rem;
  font-size:var(--t-sm);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--laiton-txt);text-decoration:none;
  border-bottom:1px solid var(--filet-fort);padding-bottom:4px;
  transition:color var(--transi),gap var(--transi),border-color var(--transi)}
.lien:hover{color:var(--laiton-clair);border-color:var(--laiton-clair);gap:.75rem}
.lien svg{width:1em;height:1em}
.lien--nu{border-bottom-color:transparent;font-size:inherit;text-transform:none;
  letter-spacing:0}
.lien--nu:hover{border-bottom-color:var(--laiton-clair)}

/* ------------------------------------------------------------ 5. EN-TÊTE */
.tete{position:sticky;top:var(--cmp-h,0px);z-index:80;
  background:rgba(15,20,18,.82);border-bottom:1px solid var(--filet);
  transition:background var(--transi),border-color var(--transi)}
@supports (backdrop-filter:blur(12px)){
  .tete{-webkit-backdrop-filter:saturate(1.2) blur(16px);
        backdrop-filter:saturate(1.2) blur(16px)}
}
.tete.est-collee{background:rgba(15,20,18,.96);border-bottom-color:var(--filet-fort)}
.tete__in{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e-4);min-height:var(--tete-h)}
.marque{text-decoration:none;display:block;line-height:1.1}
.marque__nom{display:block;font-family:var(--f-titre);font-weight:500;
  font-size:var(--t-t-s);letter-spacing:.01em}
.marque__role{display:block;font-size:.6875rem;color:var(--creme-2);
  letter-spacing:.2em;text-transform:uppercase;margin-top:4px}
.nav{display:none;gap:clamp(.85rem,1.55vw,2rem);align-items:center}
.nav a{font-size:var(--t-xs);font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--creme-2);
  padding-block:.5rem;position:relative;transition:color var(--transi)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--laiton-txt);scale:0 1;transform-origin:left;
  transition:scale var(--transi)}
.nav a:hover,.nav a[aria-current]{color:var(--creme)}
.nav a:hover::after,.nav a[aria-current]::after{scale:1 1}
.tete__act{display:flex;align-items:center;gap:var(--e-4)}
.tete__tel{display:none;align-items:center;gap:.5rem;text-decoration:none;
  color:var(--laiton-txt);font-size:var(--t-sm);letter-spacing:.04em;
  white-space:nowrap;
  padding-left:clamp(.9rem,1.7vw,1.8rem);border-left:1px solid var(--filet);
  transition:color var(--transi)}
.tete__tel:hover{color:var(--laiton-clair)}
.tete__tel svg{width:1.05em;height:1.05em}
.burger{width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--filet-fort)}
.burger__l,.burger__l::before,.burger__l::after{
  content:"";display:block;width:18px;height:1px;background:var(--creme);
  transition:transform var(--transi),opacity var(--transi)}
.burger__l::before{transform:translateY(-6px)}
.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(-1px) rotate(-45deg)}

/* ATTENTION À L'ORDRE : le bloc .burger ci-dessus doit rester AVANT les
   requêtes de média. Une règle dans un @media n'a pas plus de poids qu'une
   règle hors média ; à spécificité égale, c'est la dernière écrite qui gagne,
   et un .burger{display:grid} placé après aurait rallumé le bouton de menu
   sur grand écran, à côté d'une navigation déjà complète.

   Deux paliers, et pas un seul. « LA PSYCHANALYSE » et « LE PSYCHANALYSTE »
   en capitales espacées coûtent bien plus de chasse que leur équivalent
   bas-de-casse : entre 1000 et 1100 px, le menu ET le numéro ne tiennent pas
   sur une ligne. Le menu passe donc en premier (62 rem), le numéro attend
   d'avoir la place (70 rem). Une barre qui se dédouble décale tout ce qui est
   collé dessous. */
@media (min-width:62rem){
  .nav{display:flex} .burger{display:none}
}
@media (min-width:70rem){
  .tete__tel{display:inline-flex}
}

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

/* ------------------------------------------- 6. LE SEUIL (premier écran) */
/* Diptyque : le mot à gauche, la pièce à droite. La photographie n'est pas
   un fond — elle est l'autre moitié de la page, et son bord gauche se dissout
   dans le noir pour qu'aucune arête ne coupe l'écran en deux. */
.seuil{position:relative;display:grid;align-items:stretch;
  background:radial-gradient(120% 90% at 6% 12%,rgba(169,139,84,.13),transparent 62%)}
.seuil__mot{display:flex;align-items:center;
  padding:clamp(3rem,7vw,7.5rem) 0 clamp(2.5rem,5vw,6rem)}
.seuil__in{width:100%;max-width:var(--largeur);margin-inline:auto;
  padding-inline:var(--goutt)}
.seuil__sur{font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;
  color:var(--laiton-txt);margin-bottom:var(--e-5)}
.seuil__t{font-size:var(--t-t-xl);font-weight:300;line-height:1.02;
  letter-spacing:-.012em;max-width:14ch}
.seuil__c{font-size:var(--t-md);color:var(--creme-2);max-width:40ch;font-weight:300}
.seuil__vue{position:relative;overflow:hidden}
.seuil__vue picture,.seuil__vue img{width:100%;height:100%;object-fit:cover}
/* Bain DOUX ici, et pas le bain courant : « cabinet-penombre » est déjà une
   photographie de pénombre — la rabattre une seconde fois la transformait en
   tache noire, et le premier écran perdait son sujet. */
.seuil__vue img{filter:var(--bain-doux);aspect-ratio:4/5}
.seuil__vue{-webkit-mask-image:linear-gradient(180deg,transparent,#000 15%);
  mask-image:linear-gradient(180deg,transparent,#000 15%)}
/* Le fondu du bas est un calque, pas un second masque : empiler deux
   mask-image demande mask-composite, dont la valeur par défaut (add) ferait
   exactement l'inverse si le navigateur ne la comprenait pas. */
.seuil__vue::after{content:"";position:absolute;inset:auto 0 0;height:26%;
  background:linear-gradient(180deg,transparent,var(--fond));pointer-events:none}
@media (min-width:60rem){
  .seuil{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    min-height:min(46rem,calc(100svh - var(--tete-h) - var(--cmp-h,0px)))}
  .seuil__mot{padding-block:clamp(4rem,7vw,8rem)}
  .seuil__in{max-width:calc(var(--largeur) / 2 + var(--goutt));
    margin-inline:auto 0;padding-right:clamp(2rem,4vw,4rem)}
  .seuil__vue{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);
    mask-image:linear-gradient(90deg,transparent,#000 22%)}
  .seuil__vue img{aspect-ratio:auto;height:100%}
  .seuil__vue::after{height:18%}
}

/* Tête des pages intérieures : le titre seul, puis la photographie révélée
   en dessous, fondue en haut comme en bas. */
.entree{padding-top:clamp(2.5rem,1.5rem + 4vw,5.5rem);position:relative;
  background:radial-gradient(90% 70% at 12% 0%,rgba(169,139,84,.1),transparent 60%)}
.entree__in{max-width:60rem}
.entree__rail{display:flex;align-items:center;gap:.85rem;
  font-size:var(--t-xs);letter-spacing:.22em;text-transform:uppercase;
  color:var(--laiton-txt);margin-bottom:var(--e-5)}
.entree__filet{display:block;width:clamp(1.5rem,4vw,3.5rem);height:1px;
  background:var(--filet-fort)}
.entree__t{font-size:var(--t-t-l);font-weight:300;letter-spacing:-.01em;
  max-width:16ch}
.entree__c{margin-top:var(--e-5);font-size:var(--t-md);color:var(--creme-2);
  max-width:46ch;font-weight:300}
.entree__vue{margin-top:clamp(2.5rem,5vw,4.5rem);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 66%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 66%,transparent)}
.entree__vue img{width:100%;object-fit:cover;aspect-ratio:4/3;filter:var(--bain)}
@media (min-width:52rem){ .entree__vue img{aspect-ratio:21/8} }

/* Respiration : une bande photographique entre deux blocs de texte, fondue
   des deux côtés. Elle ne dit rien — elle laisse le lecteur reprendre. */
.respire{margin-top:clamp(3rem,6vw,6rem);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.respire img{width:100%;object-fit:cover;aspect-ratio:3/2;filter:var(--bain)}
@media (min-width:52rem){ .respire img{aspect-ratio:32/9} }

/* ------------------------------------------- 7. RANGÉES (les trois publics) */
/* Pas de cartes : trois rangées pleine largeur, un filet entre chacune, le
   numéro d'ordre dans la marge. Une liste de trois choses de même nature n'a
   aucune raison de se présenter en trois boîtes. */
.portes-r{border-top:1px solid var(--filet)}
.porte-r{display:grid;gap:var(--e-4);align-items:center;
  padding-block:clamp(1.5rem,3vw,2.4rem);border-bottom:1px solid var(--filet);
  text-decoration:none;transition:background var(--transi)}
.porte-r:hover{background:rgba(169,139,84,.05)}
.porte-r__n{font-size:var(--t-xs);color:var(--laiton-txt);letter-spacing:.14em}
.porte-r__vue{display:block;overflow:hidden}
.porte-r__vue picture,.porte-r__vue img{width:100%;height:100%;object-fit:cover}
/* Ces trois photographies n'ont ni la même lumière ni la même dominante ;
   un virage commun (désaturation + sépia) les remet au même diapason, et
   c'est le survol qui rend la couleur. */
.porte-r__vue img{aspect-ratio:16/9;
  filter:grayscale(.6) sepia(.16) brightness(.56) contrast(1.14);
  transition:filter 600ms ease,scale 700ms cubic-bezier(.22,1,.36,1)}
.porte-r:hover .porte-r__vue img{filter:grayscale(.15) sepia(.05) brightness(.86);
  scale:1.04}
.porte-r__sur{display:block;font-size:var(--t-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--creme-3);margin-bottom:.5rem}
.porte-r__t{display:block;font-family:var(--f-titre);font-size:var(--t-t-m);
  line-height:1.1;margin-bottom:var(--e-3)}
.porte-r__p{display:block;font-size:var(--t-sm);color:var(--creme-2);max-width:52ch}
.porte-r__go{display:none;color:var(--laiton-txt);justify-self:end}
.porte-r__go svg{width:1.6rem;height:1.6rem;transition:translate var(--transi)}
.porte-r:hover .porte-r__go svg{translate:6px 0}
@media (min-width:52rem){
  .porte-r{grid-template-columns:3.5rem 14rem minmax(0,1fr) 3rem;
    gap:clamp(1.5rem,3vw,3rem);align-items:center}
  .porte-r__vue img{aspect-ratio:5/4}
  .porte-r__n{align-self:start;padding-top:.4rem}
  .porte-r__go{display:block}
}

/* --------------------------------------------------- 8. L'ESCALIER (étapes) */
.marches{position:relative;padding-left:clamp(2.6rem,7vw,5.5rem)}
.marches::before{content:"";position:absolute;left:clamp(.9rem,2.4vw,1.9rem);
  top:.6rem;bottom:2rem;width:1px;background:linear-gradient(180deg,
    var(--filet-fort),var(--filet),transparent)}
.marche{position:relative;padding-block:clamp(1.25rem,2.4vw,2rem);
  border-bottom:1px solid var(--filet-froid)}
.marche:last-child{border-bottom:0}
.marche__n{position:absolute;left:calc(-1 * clamp(2.6rem,7vw,5.5rem));
  top:clamp(1.1rem,2.2vw,1.8rem);width:clamp(1.9rem,4.9vw,3.9rem);
  text-align:center;font-family:var(--f-titre);font-size:var(--t-t-m);
  color:var(--laiton-txt);line-height:1;
  background-color:var(--nuit);padding-block:.15rem}
.sect--pli .marche__n{background-color:var(--pli)}
.marche__t{font-size:var(--t-t-s);margin-bottom:var(--e-3)}
.marche__p{font-size:var(--t-sm);color:var(--creme-2);max-width:76ch}

/* ------------------------------------------------------ 9. CADRE PHOTO */
.cadre-photo{display:grid;gap:clamp(2rem,4vw,4rem);align-items:center}
@media (min-width:52rem){
  .cadre-photo{grid-template-columns:minmax(0,18rem) minmax(0,1fr)}
}
/* Le laiton ne cerne pas l'image : il la double, décalé. Un cadre plein
   ferme ; un cadre décalé ouvre. */
.cadre-photo__f{position:relative}
.cadre-photo__f::before{content:"";position:absolute;
  inset:-.85rem -.85rem .85rem .85rem;border:1px solid var(--filet-fort);
  pointer-events:none}
.cadre-photo__f img{width:100%;object-fit:cover;filter:var(--bain-doux)}
.cadre-photo__p{margin-top:var(--e-5);color:var(--creme-2);max-width:56ch}
.cadre-photo__c p + p{margin-top:var(--e-5)}

/* ------------------------------------------------------ 10. LE LIEU + PLAN */
.lieu{position:relative}
.lieu__plan{border:1px solid var(--filet)}
.lieu__mot{margin-top:var(--e-6);padding:clamp(1.4rem,3vw,2.2rem);
  background:var(--pli);border:1px solid var(--filet-fort)}
.lieu__p{margin-top:var(--e-4);color:var(--creme-2);font-size:var(--t-sm)}
.lieu__adr{margin-block:var(--e-5);font-size:var(--t-md);line-height:1.8}
@media (min-width:62rem){
  /* En surimpression : le plan est une image de fond, l'adresse est ce
     qu'on vient y chercher. Les deux au même endroit. */
  /* transform, et surtout PAS translate : la propriete `translate` est deja
     prise par l'animation d'apparition du socle, qui la remet a 0 en devenant
     visible — et decentrerait le panneau. Deux proprietes distinctes, aucun
     conflit. Le decalage gauche s'ajoute a la gouttiere du conteneur, sinon
     le panneau deborde du plan par la gauche. */
  .lieu__mot{position:absolute;left:calc(var(--goutt) + clamp(1rem,2.4vw,2.25rem));
    top:50%;transform:translateY(-50%);width:min(24rem,42%);margin-top:0;
    background:rgba(20,26,24,.94)}
  @supports (backdrop-filter:blur(6px)){
    .lieu__mot{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  }
}

/* ------------------------------------------------- 11. LE PLAN, DE NUIT */
/* Le SVG ne porte AUCUNE couleur : tout se décide ici. Version nocturne —
   les voies sont des sillons plus clairs que le bâti, l'eau tire au bleu
   froid, la ligne de tram et le point du cabinet sont les deux seuls
   laitons. C'est le seul endroit du site où la couleur signifie. */
.plan{width:100%;height:auto;display:block}
.plan__fond{fill:#101614}
.plan__bati{fill:#1B2320;stroke:none}
.plan__vert{fill:#17231D}
.plan__eau{fill:#15262C;stroke:#15262C;stroke-width:3}
.plan__voie{stroke:#2C3733}
.plan__voie--majeure{stroke:#3B4842}
.plan__voie--pieton{stroke:#242E2A}
.plan__tram{stroke:#7C6438;stroke-width:1.6;stroke-dasharray:6 5}
.plan__libelle text{fill:#9A9484;font-size:11px;letter-spacing:.06em;
  font-family:var(--f-texte);font-weight:400}
.plan__halo{fill:#C0A268;opacity:.14}
.plan__halo--2{opacity:.24}
.plan__point{fill:#C0A268}
.plan__oeil{fill:#101614}
.plan__ici{fill:#EDE7DD;font:500 15px var(--f-texte);letter-spacing:.12em;
  text-transform:uppercase}
.plan__echelle path{stroke:#9A9484;stroke-width:1.3;fill:none}
.plan__echelle text,.plan__nord text{fill:#9A9484;font:400 11px var(--f-mono)}
.plan__nord path{fill:#9A9484}
.plan__credit{fill:#8A8578;font:400 10px var(--f-texte)}

/* -------------------------------------------------------- 12. LES URGENCES */
/* Cinq colonnes, filets verticaux : la forme d'un ours de journal. Un numéro
   qu'on cherche ne doit pas se dérouler, il doit se voir. */
.urg{background-color:var(--nuit);background-image:var(--grain);
  padding-block:clamp(2.75rem,5vw,4.5rem);border-top:1px solid var(--filet-fort)}
.urg__tete{max-width:46rem;margin-bottom:clamp(1.75rem,3.4vw,2.75rem)}
.urg__t{font-size:var(--t-t-m);display:flex;align-items:center;gap:.6rem}
.urg__ic{width:.9em;height:.9em;color:#E0A277;flex:none}
.urg__chapo{margin-top:var(--e-4);color:var(--creme-2);font-size:var(--t-sm)}
.urg__liste{display:grid;gap:0;border-top:1px solid var(--filet)}
.urg__l{padding:var(--e-4) 0;border-bottom:1px solid var(--filet-froid)}
.urg__num{display:block;font-size:clamp(1.3rem,1.15rem + .6vw,1.65rem);
  color:#E9B98D;line-height:1.15}
.urg__t2{display:block;margin-top:.35rem;font-weight:500;font-size:var(--t-sm);
  color:var(--creme)}
.urg__d{display:block;margin-top:.3rem;font-size:var(--t-xs);color:var(--creme-2);
  line-height:1.6}
@media (min-width:52rem){
  .urg__liste{grid-template-columns:repeat(5,minmax(0,1fr));
    border-bottom:1px solid var(--filet)}
  /* Réserve de hauteur : « 09 72 39 40 50 » tient sur deux lignes là où
     « 15 » en tient une, et les cinq intitulés cessaient d'être alignés.
     Uniquement en colonnes : empilés, ce serait un trou. */
  .urg__num{min-height:2.3em}
  .urg__l{padding:var(--e-5) clamp(.8rem,1.6vw,1.4rem);border-bottom:0;
    border-left:1px solid var(--filet-froid)}
  .urg__l:first-child{border-left:0;padding-left:0}
}

/* ------------------------------------------------------- 13. APPEL FINAL */
.appel{position:relative;overflow:hidden;background-color:var(--fond);
  padding-block:clamp(3.5rem,6.5vw,7rem);border-top:1px solid var(--filet)}
.appel__lueur{position:absolute;inset:auto 0 0;height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 8%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 8%,#000 100%)}
.appel__lueur picture,.appel__lueur img{width:100%;height:100%;object-fit:cover;
  opacity:.3;filter:saturate(.45) contrast(1.1)}
.appel__in{position:relative}
.appel__t{font-size:var(--t-t-m);color:var(--laiton-txt);font-weight:400;
  letter-spacing:.02em}
.appel__num{display:inline-block;margin-top:var(--e-4);text-decoration:none;
  font-family:var(--f-titre);font-weight:300;font-size:var(--t-t-xl);
  line-height:1;letter-spacing:-.01em;color:var(--creme);
  transition:color var(--transi)}
.appel__num:hover{color:var(--laiton-clair)}
.appel__bas{display:grid;gap:clamp(1.5rem,3vw,3rem);
  margin-top:clamp(2rem,4vw,3.25rem);padding-top:clamp(1.5rem,3vw,2.25rem);
  border-top:1px solid var(--filet)}
@media (min-width:56rem){
  .appel__bas{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
}
.appel__c{color:var(--creme-2);max-width:46ch;font-size:var(--t-sm)}
.appel__act{display:flex;flex-wrap:wrap;gap:var(--e-3)}
@media (max-width:32rem){ .appel__act > .btn{flex:1 1 100%} }
.appel__adr{flex:1 0 100%;display:flex;align-items:center;gap:.45rem;
  flex-wrap:wrap;margin-top:var(--e-2);font-size:var(--t-xs);color:var(--creme-3)}
.appel__adr svg{width:1.05em;height:1.05em;color:var(--laiton-txt);flex:none;
  margin-top:.15em}
.appel__adr span{flex:1 1 auto}

/* ------------------------------------------------------------ 14. ONGLETS */
.onglets__barre{display:flex;flex-wrap:wrap;gap:0;
  border-block:1px solid var(--filet);margin-bottom:clamp(2rem,4vw,3.25rem)}
.ong{padding:1rem clamp(.9rem,2.4vw,1.8rem);font-family:var(--f-texte);
  font-size:var(--t-xs);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--creme-2);border-bottom:2px solid transparent;margin-bottom:-1px;
  border-left:1px solid var(--filet-froid);
  transition:color var(--transi),border-color var(--transi)}
.ong:first-child{border-left:0;padding-left:0}
.ong:hover{color:var(--creme)}
.ong.est-actif{color:var(--laiton-txt);border-bottom-color:var(--laiton-txt)}
.est-onglets .pan{animation:parait 500ms cubic-bezier(.22,1,.36,1)}
@keyframes parait{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.pan + .pan{margin-top:var(--sect-y)}
.est-onglets .pan + .pan{margin-top:0}
.pan__tete{max-width:52rem}
.pan__vue{margin-block:clamp(2rem,4vw,3.25rem);
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent);
  mask-image:linear-gradient(180deg,#000 78%,transparent)}
.pan__vue img{width:100%;object-fit:cover;aspect-ratio:16/9;filter:var(--bain-fort)}
@media (min-width:52rem){ .pan__vue img{aspect-ratio:24/7} }

.portes{border-top:1px solid var(--filet)}
.porte{display:grid;gap:.35rem 1.75rem;padding-block:clamp(1.1rem,2.2vw,1.6rem);
  border-bottom:1px solid var(--filet-froid)}
@media (min-width:46rem){
  .porte{grid-template-columns:3.5rem minmax(0,1fr)}
}
.porte__n{font-size:var(--t-xs);color:var(--laiton-txt);letter-spacing:.14em;
  padding-top:.35rem}
.porte__t{font-size:var(--t-t-s);margin-bottom:var(--e-2)}
.porte__p{font-size:var(--t-sm);color:var(--creme-2);max-width:70ch}

.encart{margin-top:clamp(2rem,4vw,3rem);padding:clamp(1.3rem,2.8vw,2.1rem);
  background:var(--relief);border-left:2px solid var(--laiton);max-width:52rem}
.encart__t{font-size:var(--t-t-s);color:var(--laiton-txt);margin-bottom:var(--e-4)}
.encart__c p{font-size:var(--t-sm);color:var(--creme-2)}
.encart__c p + p{margin-top:var(--e-4)}

/* ------------------------------------------------------ 15. QUESTIONS/RÉP */
.qrs{border-top:1px solid var(--filet)}
.qr{border-bottom:1px solid var(--filet)}
.qr__q{display:grid;grid-template-columns:2.75rem minmax(0,1fr) 1.5rem;
  align-items:baseline;gap:.5rem;padding:1.25rem 0;cursor:pointer;
  list-style:none;transition:color var(--transi)}
.qr__q::-webkit-details-marker{display:none}
.qr__q:hover{color:var(--laiton-txt)}
.qr__n{font-size:var(--t-xs);color:var(--laiton-txt);letter-spacing:.14em}
.qr__l{font-family:var(--f-titre);font-size:var(--t-t-s);line-height:1.25}
.qr__ic{width:1.1rem;height:1.1rem;color:var(--laiton-txt);justify-self:end;
  transition:transform var(--transi)}
.qr[open] .qr__ic{transform:rotate(45deg)}
.qr__r{padding:0 1.5rem 1.4rem 2.75rem;max-width:60rem}
.qr__r p{color:var(--creme-2);font-size:var(--t-sm)}
.qr[open] .qr__r{animation:parait 340ms ease}

/* --------------------------------------------------------------- 16. TARIFS */
.tar{margin-top:var(--e-5)}
.tar th,.tar td{text-align:left;padding:1rem .5rem;
  border-bottom:1px solid var(--filet-froid);vertical-align:baseline}
.tar thead th{font-family:var(--f-texte);font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--creme-2);font-weight:500;
  border-bottom:1px solid var(--filet-fort);padding-bottom:.6rem}
.tar tbody th{font-weight:400}
.tar__lib{display:block;font-family:var(--f-titre);font-size:var(--t-t-s);
  line-height:1.2}
.tar__note{display:block;font-size:var(--t-xs);color:var(--creme-3);margin-top:3px;
  max-width:26ch}
.tar__duree{color:var(--creme-2);white-space:nowrap;font-size:var(--t-sm)}
.tar__prix{text-align:right;white-space:nowrap;font-family:var(--f-titre);
  font-size:var(--t-t-s);color:var(--laiton-txt)}
.tar__mentions{margin-top:var(--e-5);display:grid;gap:.55rem;
  font-size:var(--t-sm);color:var(--creme-2);max-width:52rem}
.tar__mentions li{padding-left:1.3em;position:relative}
.tar__mentions li::before{content:"—";position:absolute;left:0;
  color:var(--laiton-txt)}

/* -------------------------------------------------- 17. LA PSYCHANALYSE */
.chapeau{max-width:44rem}
.chapeau__p{color:var(--creme-2)}
.chapeau__p + .chapeau__p{margin-top:var(--e-5)}
/* Le premier paragraphe passe en Cormorant grand corps : il fait office de
   chapeau de revue et donne le ton avant que le texte de labeur commence. */
.chapeau__p:first-child{font-family:var(--f-titre);font-weight:300;
  font-size:var(--t-t-m);line-height:1.35;color:var(--creme);max-width:24ch}

.theses{display:grid;gap:clamp(2.5rem,4.5vw,4rem)}
.these{display:grid;gap:var(--e-4) clamp(2rem,4vw,4rem);
  padding-top:clamp(1.5rem,3vw,2.25rem);border-top:1px solid var(--filet)}
@media (min-width:56rem){
  .these{grid-template-columns:11rem minmax(0,1fr)}
}
.these__k{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap}
.these__n{font-size:var(--t-xs);color:var(--laiton-txt);letter-spacing:.14em}
.these__k .sur{margin-bottom:0}
.these__v .t3{margin-bottom:var(--e-5);max-width:24ch}
.these__v p{color:var(--creme-2);font-size:var(--t-sm)}
/* Les trois thèses sont des sœurs : deux d'entre elles n'ont que deux
   paragraphes et passeraient en mesure unique, la troisième en trois
   colonnes — on verrait la mécanique. Une seule forme pour les trois. */
.these__v .colonnes{columns:auto;max-width:46rem}
.these__v .mesure{max-width:46rem}

/* Registre : intitulé à gauche, corps à droite, filet entre chaque. Sert
   trois fois — métiers, lexique, parcours — parce que ce sont trois listes
   de même nature. */
.regs{border-top:1px solid var(--filet)}
.reg{display:grid;gap:.5rem clamp(2rem,4vw,4rem);
  padding-block:clamp(1.4rem,2.8vw,2.2rem);border-bottom:1px solid var(--filet)}
@media (min-width:52rem){
  .reg{grid-template-columns:minmax(0,17rem) minmax(0,1fr);align-items:baseline}
  .regs--lexique .reg{grid-template-columns:minmax(0,13rem) minmax(0,1fr)}
}
.reg__t{font-size:var(--t-t-s);line-height:1.2}
.regs--lexique .reg__t{color:var(--laiton-txt)}
.reg__r{margin-top:.35rem;font-size:var(--t-xs);color:var(--laiton-txt);
  letter-spacing:.03em}
.reg__v p{color:var(--creme-2);font-size:var(--t-sm);max-width:70ch}
/* Les definitions du lexique tiennent en une phrase : au corps des textes
   longs, elles paraissaient chuchotees. */
.regs--lexique .reg__v p{font-size:var(--t-base);color:var(--creme)}

.cass{display:grid;gap:0;border-top:1px solid var(--filet-froid)}
@media (min-width:52rem){
  .cass{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(2rem,4vw,4rem)}
}
.cas{padding-block:clamp(1.2rem,2.4vw,1.8rem);
  border-bottom:1px solid var(--filet-froid)}
.cas__t{font-size:var(--t-t-s);margin-bottom:var(--e-3);color:var(--creme)}
.cas__p{font-size:var(--t-sm);color:var(--creme-2);max-width:56ch}

.lecs{display:grid;gap:clamp(2rem,3.5vw,3rem)}
@media (min-width:56rem){ .lecs{grid-template-columns:repeat(3,minmax(0,1fr))} }
.lec__t{font-size:var(--t-t-s);padding-bottom:var(--e-3);
  border-bottom:1px solid var(--filet-fort);color:var(--laiton-txt)}
.lec__l{display:grid;gap:var(--e-5);margin-top:var(--e-5)}
.lec__oeuvre{display:block;font-family:var(--f-titre);font-size:var(--t-t-s);
  line-height:1.2}
.lec__auteur{display:block;font-size:var(--t-xs);color:var(--creme-2);
  letter-spacing:.09em;text-transform:uppercase;margin-top:.35rem}
.lec__auteur .tech{text-transform:none;letter-spacing:.02em;
  color:var(--laiton-txt);margin-left:.35rem}
.lec__note{display:block;font-size:var(--t-sm);color:var(--creme-2);
  margin-top:.5rem}

/* ------------------------------------------------------------ 18. HISTOIRE */
.cit{max-width:34rem;margin-bottom:clamp(2.5rem,5vw,4rem);text-align:left}
.cit__t{font-family:var(--f-titre);font-weight:300;font-style:italic;
  font-size:var(--t-t-l);line-height:1.16;letter-spacing:-.005em;
  padding-block:clamp(1.5rem,3vw,2.25rem);
  border-block:1px solid var(--filet-fort)}
.cit__s{margin-top:var(--e-4);font-size:var(--t-xs);color:var(--laiton-txt);
  letter-spacing:.14em;text-transform:uppercase}

.portrait{display:grid;gap:clamp(2rem,4vw,4rem);align-items:center}
@media (min-width:52rem){
  .portrait{grid-template-columns:minmax(0,1fr) minmax(0,22rem)}
}
.portrait__p{color:var(--creme-2);max-width:56ch}
.portrait__p + .portrait__p{margin-top:var(--e-5)}
.portrait__p:first-child{font-family:var(--f-titre);font-weight:300;
  font-size:var(--t-t-s);line-height:1.4;color:var(--creme)}
.portrait__f img{width:100%;object-fit:cover;filter:var(--bain-doux)}
.portrait__f figcaption{margin-top:var(--e-3);font-size:var(--t-xs);
  color:var(--creme-2);line-height:1.5}

/* La frise : la date en très grand dans la marge, le fait à droite, un filet
   entre chacun. m1 pose des pastilles sur une ligne ; ici c'est la DATE qui
   sert de repère, parce que c'est elle qu'on cherche. */
.fr{border-top:1px solid var(--filet)}
.fr__l{display:grid;gap:.5rem clamp(1.75rem,4vw,4rem);
  padding-block:clamp(1.4rem,2.8vw,2.2rem);border-bottom:1px solid var(--filet-froid);
  transition:background var(--transi)}
.fr__l:hover{background:rgba(169,139,84,.045)}
@media (min-width:52rem){
  .fr__l{grid-template-columns:minmax(0,13rem) minmax(0,1fr);align-items:baseline}
}
.fr__date{display:block;font-family:var(--f-titre);font-size:var(--t-t-m);
  color:var(--laiton-txt);line-height:1;letter-spacing:0}
.fr__lieu{display:block;margin-top:.5rem;font-size:var(--t-xs);
  letter-spacing:.17em;text-transform:uppercase;color:var(--creme-3)}
.fr__t{font-size:var(--t-t-s);margin-bottom:var(--e-2)}
.fr__p{font-size:var(--t-sm);color:var(--creme-2);max-width:70ch}

.divan{margin-block:0 clamp(2rem,4vw,3.5rem)}
.divan__vue{-webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 9%,#000 84%,transparent)}
.divan__vue img{width:100%;object-fit:cover;aspect-ratio:3/2;filter:var(--bain)}
@media (min-width:52rem){ .divan__vue img{aspect-ratio:21/8} }
.divan__leg{margin-top:var(--e-4);font-size:var(--t-xs);color:var(--creme-2);
  text-align:right}

/* -------------------------------------------------------- 19. PSYCHANALYSTE */
.pf{padding-block:clamp(2.5rem,1.5rem + 4vw,5.5rem) var(--sect-y);
  background:radial-gradient(80% 60% at 85% 0%,rgba(169,139,84,.1),transparent 60%)}
.pf__in{display:grid;gap:clamp(2rem,4vw,4.5rem);align-items:center}
@media (min-width:60rem){
  .pf__in{grid-template-columns:minmax(0,1.1fr) minmax(0,.78fr)}
}
.pf__t{font-size:var(--t-t-l);font-weight:300;letter-spacing:-.01em}
.pf__chapo{font-family:var(--f-titre);font-weight:300;font-size:var(--t-t-s);
  line-height:1.42;color:var(--creme);max-width:32ch}
.pf__txt{margin-top:var(--e-5)}
.pf__p{color:var(--creme-2);max-width:52ch}
.pf__p + .pf__p{margin-top:var(--e-4)}
.pf__f img{width:100%;object-fit:cover;filter:var(--bain-doux)}
/* Le marqueur « ce n'est pas lui » porte son propre fond ambré : posé sur une
   maquette sombre, un simple texte rouge se serait fondu dans le décor, et
   c'est précisément l'avertissement qu'il ne faut pas rater. */
.prov{display:flex;align-items:flex-start;gap:.55rem;
  padding:.7rem .9rem;background:#3A2A18;border-left:3px solid #C98B3E;
  color:#F0C48A;font-size:var(--t-xs);line-height:1.5}
.prov__ic{width:1.1em;height:1.1em;flex:none;margin-top:.15em}

.parc{border-top:1px solid var(--filet)}
.parc__l{display:grid;gap:.3rem 2rem;padding-block:1.05rem;
  border-bottom:1px solid var(--filet-froid)}
@media (min-width:44rem){ .parc__l{grid-template-columns:16rem minmax(0,1fr)} }
.parc__k{display:flex;align-items:baseline;gap:.7rem;font-size:var(--t-sm);
  font-weight:500;letter-spacing:.05em}
.parc__k .tech{font-size:var(--t-xs);color:var(--laiton-txt)}
.parc__v{color:var(--creme-3);font-style:italic;font-size:var(--t-sm)}

.engs{display:grid;gap:0;border-top:1px solid var(--filet)}
@media (min-width:56rem){
  .engs{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(2rem,4vw,4rem)}
}
.eng{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:.5rem 1rem;
  padding-block:clamp(1.3rem,2.6vw,2rem);border-bottom:1px solid var(--filet-froid)}
.eng__n{font-family:var(--f-titre);font-size:var(--t-t-s);color:var(--laiton-txt);
  line-height:1.3}
.eng__t{font-size:var(--t-t-s);margin-bottom:var(--e-3)}
.eng__p{font-size:var(--t-sm);color:var(--creme-2)}

/* -------------------------------------------------------------- 20. CONTACT */
.numero{text-align:left}
.numero__t{color:var(--laiton-txt);font-size:var(--t-t-s);
  letter-spacing:.02em}
.numero__n{display:inline-block;margin-top:var(--e-4);text-decoration:none;
  font-family:var(--f-titre);font-weight:300;font-size:var(--t-t-xl);
  line-height:1;letter-spacing:-.015em;transition:color var(--transi)}
.numero__n:hover{color:var(--laiton-clair)}
.numero__bas{display:grid;gap:var(--e-5) clamp(2rem,4vw,4rem);
  margin-top:clamp(1.75rem,3.5vw,2.75rem);
  padding-top:clamp(1.5rem,3vw,2.25rem);border-top:1px solid var(--filet)}
@media (min-width:56rem){
  .numero__bas{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
}
.numero__p{color:var(--creme-2);max-width:52ch;font-size:var(--t-sm)}
.numero__r{display:flex;align-items:flex-start;gap:.5rem;font-size:var(--t-sm);
  color:var(--creme)}
.numero__r svg{width:1.1em;height:1.1em;color:var(--laiton-txt);flex:none;
  margin-top:.28em}

.duo-filet{display:grid;gap:clamp(2rem,4vw,4rem)}
@media (min-width:52rem){
  .duo-filet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duo-filet__c + .duo-filet__c{padding-left:clamp(2rem,4vw,4rem);
    border-left:1px solid var(--filet)}
}
.duo-filet .t3{margin-bottom:var(--e-5)}
.ct__addr{font-style:normal;line-height:1.85;color:var(--creme-2)}
.ct__addr strong{color:var(--creme);font-weight:500}
.ct__quartier{font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--creme-3)}
.hor{border-top:1px solid var(--filet)}
.hor__l{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:1px solid var(--filet-froid);font-size:var(--t-sm)}
.hor__l--off{color:var(--creme-3)}
.hor dt{font-weight:400;letter-spacing:.04em}
.hor dd{color:var(--laiton-txt)}
.hor__l--off dd{color:var(--creme-3)}

.acces__plan{border:1px solid var(--filet);margin-bottom:clamp(2rem,4vw,3.5rem)}
.modes{display:grid;gap:0;border-top:1px solid var(--filet)}
@media (min-width:46rem){ .modes{grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.5rem,3vw,3rem)} }
@media (min-width:64rem){ .modes{grid-template-columns:repeat(3,minmax(0,1fr))} }
.mode{padding-block:var(--e-4);border-bottom:1px solid var(--filet-froid)}
.mode__k{display:flex;align-items:center;gap:.6rem;font-size:var(--t-sm)}
.mode__k strong{font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  font-size:var(--t-xs)}
.mode__ic{width:1.35rem;height:1.35rem;flex:none;color:var(--laiton-txt)}
.mode__d{display:block;margin-top:.4rem;font-size:var(--t-sm);color:var(--creme-2)}
.mode--valider{grid-column:1/-1}
.itin{margin-top:clamp(2rem,3.5vw,3rem)}
.itin__t{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--creme-2)}
.acces__note{margin-top:clamp(2rem,3.5vw,3rem);font-size:var(--t-xs);
  color:var(--creme-3);max-width:48rem;line-height:1.7;
  padding-top:var(--e-4);border-top:1px solid var(--filet-froid)}

/* Champs soulignés, pas encadrés : une boîte de plus sur une page sans
   boîtes ferait tache, et la ligne suffit à dire « on écrit ici ». */
.form{display:grid;gap:var(--e-6)}
.ch{display:grid;gap:.3rem}
.ch__l{font-size:var(--t-xs);font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--creme)}
.ch__req{color:var(--laiton-txt);margin-left:.2em}
.ch__aide{font-size:var(--t-xs);color:var(--creme-2)}
/* Un champ de 700 px de large pour saisir un prenom : la longueur d'un champ
   annonce la longueur de la reponse attendue. */
.ch__i{width:100%;max-width:34rem;padding:.7rem .1rem;margin-top:.35rem;
  background:transparent;color:var(--creme);
  border:0;border-bottom:1px solid var(--filet-fort);border-radius:0;
  font-size:var(--t-base);transition:border-color var(--transi)}
.ch__i:hover{border-bottom-color:var(--laiton-txt)}
.ch__i:focus{outline:2px solid var(--laiton-clair);outline-offset:4px;
  border-bottom-color:var(--laiton-clair)}
select.ch__i{background:var(--relief);padding-inline:.6rem}
textarea.ch__i{resize:vertical;min-height:8rem;background:var(--relief);
  padding-inline:.6rem}
.form__rgpd{font-size:var(--t-xs);color:var(--creme-2);max-width:52ch;
  line-height:1.7;padding-left:var(--e-4);border-left:1px solid var(--filet)}
.form__act{margin-top:var(--e-2)}
.form__demo{max-width:36rem;padding:1rem 1.2rem;background:var(--relief);
  border-left:2px solid var(--laiton);font-size:var(--t-sm);color:var(--creme-2)}
.form__demo strong{display:block;margin-bottom:.25rem;color:var(--laiton-txt);
  font-family:var(--f-titre);font-size:var(--t-t-s);font-weight:400}
.form__demo-note{display:block;margin-top:.7rem;padding-top:.7rem;
  border-top:1px solid var(--filet-fort);font-size:var(--t-xs);
  color:var(--creme-3);line-height:1.6}

/* ---------------------------------------------------------------- 21. PIED */
.pied{background-color:var(--nuit);background-image:var(--grain);
  border-top:1px solid var(--filet-fort);
  padding-block:clamp(2.5rem,5vw,4rem) var(--e-5)}
.pied__haut{display:grid;gap:var(--e-4) clamp(2rem,5vw,5rem);
  padding-bottom:clamp(1.75rem,3.5vw,2.75rem);border-bottom:1px solid var(--filet)}
@media (min-width:52rem){
  .pied__haut{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:end}
}
.pied__nom{font-family:var(--f-titre);font-weight:300;font-size:var(--t-t-l);
  line-height:1;letter-spacing:-.005em}
.pied__adr{font-style:normal;display:grid;gap:.2rem;font-size:var(--t-sm);
  color:var(--creme-2)}
.pied__adr a{color:var(--laiton-txt);text-decoration:none;font-size:var(--t-md)}
.pied__adr a:hover{text-decoration:underline;text-underline-offset:4px}
.pied__sr{color:var(--creme-3);font-size:var(--t-xs);margin-top:.3rem}
.pied__bas{display:grid;gap:clamp(1.75rem,3.5vw,3rem);
  padding-block:clamp(1.75rem,3.5vw,2.75rem)}
@media (min-width:52rem){
  .pied__bas{grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}
}
.pied__t{font-family:var(--f-texte);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--laiton-txt);
  margin-bottom:var(--e-4)}
.pied__liens{display:grid;gap:.5rem;font-size:var(--t-sm)}
.pied__liens a{text-decoration:none;color:var(--creme-2)}
.pied__liens a:hover{color:var(--creme)}
.pied__legal{display:grid;gap:.7rem;font-size:var(--t-xs);color:var(--creme-2);
  line-height:1.7;max-width:44rem}
@media (min-width:64rem){
  .pied__legal{columns:2;column-gap:2.5rem;display:block}
  .pied__legal li{break-inside:avoid;margin-bottom:.7rem}
}
.pied__ourlet{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:var(--e-4);border-top:1px solid var(--filet-froid);
  font-size:var(--t-xs);color:var(--creme-3)}

/* ------------------------------------------------------ 22. BARRE TÉLÉPHONE */
.barre-tel{display:none}
@media (max-width:47.99rem){
  .m2{--barre-h:62px}
  .barre-tel{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:.55rem var(--goutt) calc(.55rem + env(safe-area-inset-bottom));
    background:rgba(15,20,18,.95);border-top:1px solid var(--filet-fort)}
  @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:2.9rem;background:var(--laiton-txt);color:#121715;
    text-decoration:none;font-weight:500;font-size:var(--t-xs);
    letter-spacing:.13em;text-transform:uppercase}
  .barre-tel__a svg{width:1.15em;height:1.15em}
}

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