/* ==========================================================================
   MAQUETTE 06 — « LA GRILLE »
   Space Grotesk (tout) + IBM Plex Mono (cotes, chiffres, libellés techniques).
   Blanc, noir, un seul bleu. Angles droits partout, aucune ombre portée.
   Feuille unique, mobile d'abord, aucune dépendance.
   ========================================================================== */

/* ------------------------------------------------------------- 1. JETONS */
.m6{
  --blanc:#FFFFFF;
  --gris:#F2F2F2;            /* la surface de structure */
  --filet:#DCDCDC;           /* le filet de structure  */
  --filet-2:#B8B8B8;         /* le filet appuyé        */
  --encre:#141414;           /* 18,4:1 sur blanc       */
  --encre-2:#5A5A5A;         /*  6,9:1 sur blanc, 6,2:1 sur --gris */
  --encre-3:#6E6E6E;         /*  5,3:1 sur blanc       */
  --bleu:#2A4B9B;            /*  8,1:1 sur blanc — L'ACCENT, le seul */
  --bleu-fonce:#1E376F;
  --bleu-clair:#7E9CE8;      /*  6,9:1 sur --encre — le MÊME accent, éclairci
                                pour tenir le contraste sur les aplats noirs */
  --bleu-pale:#EDF1FA;
  --sur-noir:#B8B8B8;        /*  9,3:1 sur --encre     */

  --f:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  --t-xs:clamp(.6875rem,.665rem + .1vw,.75rem);
  --t-sm:clamp(.8125rem,.79rem + .12vw,.875rem);
  --t-base:clamp(1rem,.975rem + .14vw,1.0625rem);
  --t-md:clamp(1.0625rem,1.02rem + .22vw,1.1875rem);
  --t-lg:clamp(1.1875rem,1.1rem + .38vw,1.5rem);
  --t-xl:clamp(1.5rem,1.28rem + 1vw,2.25rem);
  --t-2xl:clamp(1.9rem,1.45rem + 2vw,3.125rem);
  --t-3xl:clamp(2.25rem,1.6rem + 2.6vw,4rem);

  --e-1:.25rem; --e-2:.5rem; --e-3:.75rem; --e-4:1rem; --e-5:1.5rem;
  --e-6:2rem; --e-7:3rem; --e-8:4.5rem;
  --sect-y:clamp(3.25rem,1.9rem + 5.6vw,7rem);
  --marge:clamp(1.15rem,.7rem + 2.2vw,3.25rem);   /* gouttière du conteneur */
  --g:clamp(.9rem,.6rem + .9vw,1.5rem);            /* écart entre colonnes  */
  --largeur:84rem;
  --largeur-texte:34rem;      /* ≈ 64 signes : la grille ne dispense pas
                                 d'une longueur de ligne lisible */

  /* Le marqueur « à valider » porte son propre fond : on ne le restyle pas,
     on lui demande seulement d'adopter l'angle droit de la maquette. */
  --av-r:0;

  --transi:180ms cubic-bezier(.2,0,0,1);
  --transi-l:640ms cubic-bezier(.16,1,.3,1);
  --tete-h:62px; --barre-h:0px;
}
@media (min-width:64rem){ .m6{ --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.m6{
  font-family:var(--f); font-size:var(--t-base); line-height:1.62;
  font-weight:400; color:var(--encre); background:var(--blanc);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none; overflow-x:hidden; padding-bottom:var(--barre-h);
}
img,picture,video,svg{display:block;max-width:100%;height:auto}
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%}
/* Angle droit PARTOUT, boutons et champs compris : c'est la règle de la
   maquette, elle se pose une fois pour toutes. */
.m6 :where(a,button,input,textarea,select,img,picture,div,span,p,li,section,
  article,figure,table,details,summary){border-radius:0}

.m6 h1,.m6 h2,.m6 h3,.m6 h4{
  font-family:var(--f); font-weight:500; line-height:1.1;
  letter-spacing:-.018em; text-wrap:balance;
}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--bleu);outline-offset:2px}
.sect--noir :focus-visible,.appel :focus-visible,.urg :focus-visible{
  outline-color:#fff}
::selection{background:var(--bleu);color:#fff}
@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(--marge)}
.sect{padding-block:var(--sect-y);border-top:1px solid var(--filet)}
.sect--affiche,.sect--tete{border-top:0;
  padding-top:clamp(2rem,1.2rem + 3vw,4rem)}
.sect--serree{padding-top:clamp(2rem,1.2rem + 3vw,3.5rem);border-top:0}
.sect--gris{background:var(--gris);border-top-color:var(--filet-2)}
.sect--noir{background:var(--encre);color:var(--sur-noir);border-top:0}
.sect--noir h1,.sect--noir h2,.sect--noir h3,.sect--noir h4{color:#fff}
.sect__suite{margin-top:var(--e-7)}
.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}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:var(--t-xs);letter-spacing:.01em}
.corps-txt{max-width:var(--largeur-texte)}
.corps-txt p + p{margin-top:var(--e-4)}

/* La cote : le numéro de section, en marge, en monospace. */
.cote{display:flex;align-items:baseline;gap:.4em;
  font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--encre-2);
  text-transform:uppercase;letter-spacing:.1em}
.cote__n{color:var(--bleu);font-weight:500}
.cote__d{color:var(--encre-3)}
.cote__l{color:var(--encre-2)}
.cote__ic{width:1.05em;height:1.05em;flex:none;color:currentColor}
.cote--clair{color:#fff}
.cote--clair .cote__n,.cote--clair .cote__l{color:#fff}
.cote--clair .cote__d{color:rgba(255,255,255,.75)}
.sect--noir .cote__n{color:var(--bleu-clair)}
.sect--noir .cote__l{color:var(--sur-noir)}
.sect--noir .cote__d{color:#8A8A8A}

/* Le sur-titre. Pas de capitales : les libellés de contenu sont des phrases
   françaises accentuées, et les capitaliser les rend illisibles. */
.sur{font-family:var(--f-mono);font-size:var(--t-sm);font-weight:500;
  color:var(--bleu);margin-bottom:var(--e-4);letter-spacing:.005em}
.sect--noir .sur{color:var(--bleu-clair)}

.t1{font-size:var(--t-2xl);font-weight:400;letter-spacing:-.025em;max-width:16ch}
.t-affiche{font-size:var(--t-3xl);font-weight:400;letter-spacing:-.032em;
  line-height:1.02;max-width:18ch}
.t2{font-size:var(--t-xl);font-weight:400;letter-spacing:-.022em;max-width:22ch}
.t3{font-size:var(--t-lg);font-weight:500;max-width:24ch}
.chapo{font-size:var(--t-md);color:var(--encre-2);
  max-width:var(--largeur-texte);margin-top:var(--e-4)}
.sect--noir .chapo{color:var(--sur-noir)}

/* Le filet qui se trace : origine à gauche, jamais au-delà de 1 —
   il ne peut donc pas déborder de la page. */
.filet{height:1px;border:0;background:var(--encre);
  transform-origin:left center;scale:0 1;
  transition:scale 820ms cubic-bezier(.16,1,.3,1)}
.filet.est-visible{scale:1 1}

/* Apparition. La classe .js autorise l'état masqué : sans JavaScript, rien
   n'est jamais caché. Le déplacement est vertical et minime — dans une
   grille, un décalage horizontal ferait douter de l'alignement. */
.js [data-anim]{opacity:0;translate:0 10px;
  transition:opacity 620ms ease,translate 620ms cubic-bezier(.16,1,.3,1)}
.js [data-anim].est-visible{opacity:1;translate:0 0}
.js [data-anim][data-delai="1"]{transition-delay:80ms}
.js [data-anim][data-delai="2"]{transition-delay:160ms}
.js [data-anim][data-delai="3"]{transition-delay:240ms}
@media (prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1 !important;translate:none !important}
  .filet{scale:1 1}
}

/* ------------------------------------------------ 4. LA GRILLE, VISIBLE */
/* Douze colonnes. Les filets verticaux sont des éléments vides posés dans
   la MÊME grille que le contenu : ils tombent donc exactement sur les
   bords de colonne, y compris quand la gouttière change de largeur. */
.a-reglure{position:relative}
.reglure{position:absolute;inset-block:0;left:var(--marge);right:var(--marge);
  display:none;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);
  pointer-events:none;z-index:0}
.reglure span{border-left:1px solid var(--filet)}
.reglure span:last-child{border-right:1px solid var(--filet)}
@media (min-width:64rem){ .reglure{display:grid} }

/* ------------------------------------------------------------ 5. BOUTONS */
.btn{
  --bg:var(--encre);--fg:#fff;--bd:var(--encre);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:3rem;padding:.75rem 1.5rem;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  font-size:var(--t-sm);font-weight:500;letter-spacing:0;
  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--accent{--bg:var(--bleu);--bd:var(--bleu)}
.btn--accent:hover{--bg:var(--bleu-fonce);--bd:var(--bleu-fonce)}
.btn--contour{--bg:transparent;--fg:var(--encre);--bd:var(--filet-2)}
.btn--contour:hover{--bd:var(--encre);--bg:var(--encre);--fg:#fff}
.btn--clair{--bg:#fff;--fg:var(--bleu-fonce);--bd:#fff}
.btn--clair:hover{--bg:var(--bleu-pale);--bd:var(--bleu-pale)}
.btn--contour-clair{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.55)}
.btn--contour-clair:hover{--bd:#fff;--bg:rgba(255,255,255,.14)}
.btn--sm{min-height:2.5rem;padding:.45rem 1rem;font-size:var(--t-xs)}
.btn--bloc{width:100%}
.grp{display:flex;flex-wrap:wrap;gap:.6rem;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:.4rem;
  font-size:var(--t-sm);font-weight:500;color:var(--encre);
  text-decoration:none;padding-bottom:3px;
  border-bottom:1px solid var(--bleu);
  transition:color var(--transi),gap var(--transi)}
.lien:hover{color:var(--bleu);gap:.65rem}
.lien svg{width:1em;height:1em}
.lien--clair{color:#fff;border-bottom-color:var(--bleu-clair)}
.lien--clair:hover{color:var(--bleu-clair)}

.tel-gros{display:inline-flex;align-items:center;gap:.55rem;
  text-decoration:none;font-size:var(--t-xl);font-weight:400;
  letter-spacing:-.02em;color:var(--bleu);
  font-variant-numeric:tabular-nums;transition:color var(--transi)}
.tel-gros:hover{color:var(--bleu-fonce)}
.tel-gros svg{width:.8em;height:.8em}
.tel-gros--clair{color:#fff}
.tel-gros--clair:hover{color:var(--bleu-pale)}

/* ------------------------------------------------------------- 6. EN-TÊTE */
.tete{position:sticky;top:var(--cmp-h,0px);z-index:80;background:var(--blanc);
  border-bottom:1px solid transparent;transition:border-color var(--transi)}
.tete.est-collee{border-bottom-color:var(--filet)}
.tete__in{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e-5);min-height:var(--tete-h)}
.marque{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.marque__mono{display:grid;place-items:center;width:30px;height:30px;flex:none;
  background:var(--encre);color:#fff;font-family:var(--f-mono);
  font-size:12px;font-weight:500;letter-spacing:.02em}
.marque__txt{display:block;line-height:1.18}
.marque__nom{display:block;font-size:var(--t-base);font-weight:500;
  letter-spacing:-.015em}
.marque__role{display:block;font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--encre-2);margin-top:1px}
.nav{display:none;gap:clamp(.85rem,1.5vw,1.75rem);align-items:stretch}
.nav__a{position:relative;display:flex;align-items:center;
  font-size:var(--t-sm);font-weight:500;white-space:nowrap;
  text-decoration:none;color:var(--encre-2);
  padding-block:.4rem;transition:color var(--transi)}
.nav__a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--bleu);scale:0 1;transform-origin:left;
  transition:scale var(--transi)}
.nav__a:hover,.nav__a[aria-current]{color:var(--encre)}
.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;min-height:2.6rem;padding:.5rem 1.1rem}
/* Déclaré AVANT la requête de média qui le masque : à spécificité égale
   c'est la dernière règle qui l'emporte, et le bouton de menu restait
   affiché sur grand écran, à côté de la navigation complète. */
.burger{width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--filet-2)}
@media (min-width:64rem){
  .nav{display:flex} .tete__cta{display:inline-flex} .burger{display:none}
}
.burger__l,.burger__l::before,.burger__l::after{
  content:"";display:block;width:18px;height:1.5px;background:var(--encre);
  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(--blanc);padding:var(--e-5) var(--marge) var(--e-7);
  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:1rem 0;
  border-bottom:1px solid var(--filet);text-decoration:none;
  font-size:var(--t-lg);font-weight:400;letter-spacing:-.02em}
.mm__liens a[aria-current]{color:var(--bleu)}
.mm__n{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--encre-3);
  min-width:2.2em}
.mm__pied{margin-top:var(--e-6);display:grid;gap:var(--e-4)}
.mm__tel{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-weight:500;color:var(--bleu)}
.mm__tel svg{width:1.1em;height:1.1em}

/* ------------------------------------------------------------ 7. L'AFFICHE */
.affiche__in{display:grid;gap:var(--e-5) var(--g)}
.affiche__cote{position:relative;z-index:1}
.affiche__t,.affiche__bas,.affiche__chapo,.affiche__coord,
.affiche__media,.affiche__filet{position:relative;z-index:1}
.affiche__chapo{font-size:var(--t-md);color:var(--encre-2);
  max-width:var(--largeur-texte)}
.affiche__coord{color:var(--encre-2);line-height:1.85}
.affiche__coord a{color:var(--bleu);text-decoration:none}
.affiche__coord a:hover{text-decoration:underline}
.affiche__filet{margin-block:var(--e-2)}
.affiche__bas .corps-txt{margin-top:var(--e-5);color:var(--encre-2)}
.prov{display:flex;align-items:flex-start;gap:.4rem;margin-top:var(--e-3);
  font-family:var(--f-mono);font-size:var(--t-xs);line-height:1.5;
  color:#9E2F17;background:#FBEEEA;padding:.5rem .6rem;
  border-left:3px solid #9E2F17}
.prov__ic{width:1.05em;height:1.05em;flex:none;margin-top:.15em}

@media (min-width:64rem){
  .affiche__in{grid-template-columns:repeat(12,minmax(0,1fr));
    row-gap:var(--e-5)}
  /* r1 cote · r2 titre · r3 filet · r4 bas — et l'image, cadrée dur, tient
     les quatre rangées à droite. Le vide est un élément de composition :
     il n'est pas rempli. */
  .affiche__cote  {grid-column:1/4;  grid-row:1}
  .affiche__t     {grid-column:1/9;  grid-row:2;align-self:start}
  .affiche__media {grid-column:9/13; grid-row:1/5;align-self:start}
  .affiche__filet {grid-column:1/9;  grid-row:3}
  .affiche__bas   {grid-column:1/7;  grid-row:4}
  .affiche__chapo {grid-column:1/7;  grid-row:4}
  .affiche__coord {grid-column:7/9;  grid-row:4;align-self:start}
  .sect--tete .affiche__media{grid-row:1/5}
}

/* Les images : cadrées dur, jamais en fond, jamais voilées. */
.media{display:block;overflow:hidden;background:var(--gris)}
.media img{width:100%;height:100%;object-fit:cover}
.media--11{aspect-ratio:1/1}
.media--43{aspect-ratio:4/3}
.media--169{aspect-ratio:16/9}
@media (max-width:47.99rem){
  /* Sur téléphone, un carré occupe tout l'écran et repousse le texte :
     on ramène les cadrages hauts au 4/3. */
  .media--11{aspect-ratio:4/3}
}
.legende{margin-top:var(--e-3);font-size:var(--t-xs);color:var(--encre-2);
  max-width:26rem;line-height:1.55}
.legende__cr{display:block;color:var(--encre-3);margin-top:2px}

/* ------------------------------------------------- 8. EN-TÊTE DE SECTION */
/* La cote occupe la marge, le titre commence à la colonne 4 : c'est ce
   décalage — et non un centrage — qui donne son assise à la page. */
.tete-s{display:grid;gap:var(--e-3) var(--g);
  margin-bottom:clamp(2rem,1.2rem + 3vw,3.5rem)}
@media (min-width:56rem){
  .tete-s{grid-template-columns:repeat(12,minmax(0,1fr))}
  .tete-s .cote{grid-column:1/4;padding-top:.45em}
  .tete-s__c{grid-column:4/12}
}

/* --------------------------------------------------------- 9. LE REGISTRE */
/* Une liste n'est pas une pile de cartes : c'est un registre. Cote, intitulé,
   texte, alignés sur les mêmes colonnes d'un bout à l'autre du site. Le filet
   de tête se trace à l'apparition. */
.reg{border-bottom:1px solid var(--filet)}
.sect--noir .reg{border-bottom-color:#2E2E2E}
.reg__l{position:relative;display:grid;gap:.3rem var(--g);
  padding-block:clamp(1.1rem,.8rem + 1vw,1.6rem)}
.reg__l::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--filet);transform-origin:left;
  transition:scale 700ms cubic-bezier(.16,1,.3,1)}
.sect--noir .reg__l::before{background:#2E2E2E}
.js .reg__l[data-anim]::before{scale:0 1}
.js .reg__l[data-anim].est-visible::before{scale:1 1}
.reg__n{font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;
  color:var(--bleu);font-variant-numeric:tabular-nums;padding-top:.35em}
.sect--noir .reg__n{color:var(--bleu-clair)}
.reg__t{font-size:var(--t-md);font-weight:500;letter-spacing:-.012em}
.reg__t--sm{font-size:var(--t-base)}
.reg__r{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--bleu);
  line-height:1.55}
.sect--noir .reg__r{color:var(--bleu-clair)}
.reg__c{color:var(--encre-2);font-size:var(--t-sm);max-width:30rem}
.sect--noir .reg__c{color:var(--sur-noir)}
.reg--serre .reg__l{padding-block:.85rem}
@media (min-width:56rem){
  .reg__l{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .reg__n{grid-column:1/2}
  .reg__t{grid-column:2/6;padding-right:var(--g)}
  .reg__c{grid-column:6/13}
  /* Trois colonnes de contenu : intitulé, résumé, développement. */
  .reg--tab .reg__t{grid-column:2/5}
  .reg--tab .reg__r{grid-column:5/8;padding-top:.2em}
  .reg--tab .reg__c{grid-column:8/13}
  .reg--serre .reg__t{grid-column:2/5}
  .reg--serre .reg__c{grid-column:5/13}
}

/* -------------------------------------------------------- 10. LES TROIS */
/* Trois blocs sur quatre colonnes chacun. Aucune boîte : l'image, un filet,
   le texte. Ce qui les tient ensemble est l'alignement, pas une bordure. */
.trois{display:grid;row-gap:clamp(1.75rem,1rem + 2.4vw,2.5rem);
  column-gap:var(--g)}
@media (min-width:56rem){
  .trois{grid-template-columns:repeat(12,minmax(0,1fr))}
  .trois__l{grid-column:span 4}
}
/* Les trois appels à lire tombent sur la même ligne quelle que soit la
   longueur du texte : `margin-top:auto` les pousse au bas du bloc. */
.trois__a{display:flex;flex-direction:column;gap:var(--e-3);
  text-decoration:none;height:100%}
.trois__media{display:block;overflow:hidden;margin-bottom:var(--e-3)}
.trois__media .media img{transition:scale 640ms cubic-bezier(.16,1,.3,1)}
.trois__a:hover .media img{scale:1.04}
.trois__n{display:block;color:var(--bleu);padding-top:var(--e-3);
  border-top:1px solid var(--encre)}
.trois__t{display:block;font-size:var(--t-lg);font-weight:500;
  letter-spacing:-.02em;line-height:1.12}
.trois__s{display:block;font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--encre-2)}
.trois__c{display:block;font-size:var(--t-sm);color:var(--encre-2);
  margin-top:var(--e-2)}
.trois__go{display:inline-flex;align-items:center;gap:.4rem;
  margin-top:auto;padding-top:var(--e-3);align-self:flex-start;
  font-size:var(--t-sm);font-weight:500;color:var(--bleu)}
.trois__go svg{width:1em;height:1em;transition:translate var(--transi)}
.trois__a:hover .trois__go svg{translate:4px 0}
.trois__a:hover .trois__t{color:var(--bleu)}

/* ------------------------------------------------------ 11. DEUX COLONNES */
.deux{display:grid;gap:clamp(1.5rem,1rem + 2.4vw,var(--e-7)) var(--g)}
.deux__txt{max-width:var(--largeur-texte)}
.deux__txt p + p{margin-top:var(--e-4)}
.deux__go{margin-top:var(--e-5)}
@media (min-width:56rem){
  .deux{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .deux__txt{grid-column:4/9;grid-row:1}
  .deux__media{grid-column:9/13;grid-row:1}
  /* Variante : l'image passe dans la bande de marge, à gauche. Le texte,
     lui, ne bouge JAMAIS de la colonne 4 — c'est ce qui tient la page. */
  .deux--inv .deux__txt{grid-column:4/10;grid-row:1}
  .deux--inv .deux__media{grid-column:1/4;grid-row:1}
}

/* Le bloc « à valider » et les tableaux se calent sur la même marge que les
   textes de section : sans cela ils flotteraient au bord gauche. */
.cadre-marge{max-width:52rem}
@media (min-width:56rem){
  .cadre-marge{margin-left:calc((100% - 11 * var(--g)) / 12 * 3 + 3 * var(--g))}
}

/* --------------------------------------------------------- 12. LE PLAN */
.plan-bloc{display:grid;gap:clamp(1.5rem,1rem + 2.4vw,var(--e-7)) var(--g)}
@media (min-width:56rem){
  .plan-bloc{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .plan-bloc__txt{grid-column:4/7;grid-row:1}
  .plan-bloc .plan-cadre{grid-column:7/13;grid-row:1}
}
.adr-bloc{font-size:var(--t-md);line-height:1.8}
.adr-quartier{margin-top:var(--e-2);color:var(--encre-2);margin-bottom:var(--e-5)}
.plan-cadre{border:1px solid var(--encre);background:#F4F4F4}

/* Le plan est un SVG sans aucune couleur en dur : tout se décide ici.
   Registre technique — deux gris, trait fin, libellés en monospace, et le
   seul point coloré de la page est le cabinet. */
.plan{width:100%;height:auto;display:block}
.plan__fond{fill:#F4F4F4}
.plan__bati{fill:#E3E3E3;stroke:none}
.plan__vert{fill:#EDEDED}
.plan__eau{fill:#DEE4F2;stroke:#DEE4F2;stroke-width:3}
.plan__voie{stroke:#FFFFFF}
.plan__voie--majeure{stroke:#FFFFFF}
.plan__voie--pieton{stroke:#FAFAFA}
.plan__tram{stroke:#141414;stroke-width:.9;stroke-dasharray:5 4;opacity:.45}
.plan__libelle text{fill:#5F5F5F;font-family:var(--f-mono);font-size:9.5px;
  font-weight:400;letter-spacing:.02em}
.plan__halo{fill:var(--bleu);opacity:.10}
.plan__halo--2{opacity:.18}
.plan__point{fill:var(--bleu)}
.plan__oeil{fill:#FFFFFF}
.plan__ici{fill:#141414;font:500 12px var(--f-mono);letter-spacing:.1em}
.plan__echelle path{stroke:#141414;stroke-width:1;fill:none}
.plan__echelle text,.plan__nord text{fill:#141414;
  font:400 9.5px var(--f-mono);letter-spacing:.04em}
.plan__nord path{fill:#141414}
.plan__credit{fill:#7A7A7A;font:400 9px var(--f-mono);letter-spacing:.02em}

/* -------------------------------------------------------- 13. LES ONGLETS */
.onglets{margin-top:var(--e-5)}
.onglets__barre{display:flex;flex-wrap:wrap;gap:0 clamp(1rem,3vw,2.25rem);
  border-top:1px solid var(--encre);border-bottom:1px solid var(--filet);
  margin-bottom:clamp(2rem,1.2rem + 3vw,3.25rem)}
.ong{display:flex;align-items:baseline;gap:.45rem;
  padding:.9rem 0;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--transi),border-color var(--transi)}
/* À 390 px, trois onglets au corps du texte débordaient sur deux lignes et le
   soulignement de l'onglet actif se retrouvait au milieu du bloc, loin du
   filet de la barre. On resserre plutôt que de faire défiler : une zone qui
   défile horizontalement doit être atteignable au clavier, et c'est un
   dispositif de plus à expliquer pour trois mots. */
@media (max-width:30rem){
  .onglets__barre{gap:0 .9rem}
  .ong__t{font-size:var(--t-base)}
}
.ong__n{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--encre-3)}
.ong__t{font-size:var(--t-md);font-weight:500;color:var(--encre-2);
  letter-spacing:-.01em}
.ong:hover .ong__t{color:var(--encre)}
.ong.est-actif{border-bottom-color:var(--bleu)}
.ong.est-actif .ong__t{color:var(--encre)}
.ong.est-actif .ong__n{color:var(--bleu)}
.est-onglets .pan{animation:parait 340ms cubic-bezier(.16,1,.3,1)}
@keyframes parait{from{opacity:0}to{opacity:1}}
/* 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:var(--e-5) var(--g);
  margin-bottom:clamp(1.75rem,1.2rem + 2vw,2.75rem)}
.pan__txt .chapo{margin-top:var(--e-4)}
@media (min-width:56rem){
  .pan__tete{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .pan__txt{grid-column:1/8}
  .pan__media{grid-column:8/13}
}
.encart{display:grid;gap:var(--e-3) var(--g);margin-top:clamp(2rem,4vw,3rem);
  padding-top:var(--e-5);border-top:2px solid var(--encre)}
.encart__t{font-size:var(--t-md);font-weight:500;margin-bottom:var(--e-3)}
.encart__c{max-width:var(--largeur-texte)}
.encart__c p + p{margin-top:var(--e-4)}
.encart__c p{font-size:var(--t-sm);color:var(--encre-2)}
@media (min-width:56rem){
  .encart{grid-template-columns:repeat(12,minmax(0,1fr))}
  .encart .cote{grid-column:1/4}
  .encart__c{grid-column:4/11}
}

/* ------------------------------------------------- 14. QUESTIONS/RÉPONSES */
.qrs{border-top:1px solid var(--encre)}
.qr{border-bottom:1px solid var(--filet)}
.qr__q{display:grid;grid-template-columns:3.2rem minmax(0,1fr) 1.4rem;
  align-items:baseline;gap:.5rem;padding:1.1rem 0;cursor:pointer;
  list-style:none}
.qr__q::-webkit-details-marker{display:none}
.qr__n{color:var(--encre-3)}
.qr__l{font-size:var(--t-md);font-weight:500;letter-spacing:-.012em}
.qr__ic{width:1.05em;height:1.05em;color:var(--bleu);justify-self:end;
  transition:transform var(--transi)}
.qr[open] .qr__ic{transform:rotate(45deg)}
.qr[open] .qr__l{color:var(--bleu)}
.qr__r{padding:0 1.4rem 1.3rem 3.7rem}
.qr__r p{color:var(--encre-2);font-size:var(--t-sm);max-width:32rem}
@media (max-width:37.49rem){
  .qr__q{grid-template-columns:2.6rem minmax(0,1fr) 1.2rem}
  .qr__r{padding-left:2.6rem}
}

/* ------------------------------------------------------------ 15. TARIFS */
.tar{margin-top:var(--e-5);border-top:1px solid var(--encre)}
.tar th,.tar td{text-align:left;padding:.85rem .6rem .85rem 0;
  border-bottom:1px solid var(--filet);vertical-align:baseline}
.tar thead th{font-family:var(--f-mono);font-size:var(--t-xs);
  font-weight:500;text-transform:uppercase;letter-spacing:.09em;
  color:var(--encre-2);border-bottom-color:var(--filet-2)}
.tar tbody th{font-weight:500}
.tar__note{display:block;font-weight:400;font-size:var(--t-xs);
  color:var(--encre-3);margin-top:2px}
.tar__prix{text-align:right;padding-right:0;white-space:nowrap;
  font-weight:500;color:var(--encre)}
.tar td:nth-child(2){color:var(--encre-2);white-space:nowrap}
.tar thead th:last-child{text-align:right}
.tar__mentions{margin-top:var(--e-5);display:grid;gap:.5rem;
  font-size:var(--t-sm);color:var(--encre-2)}
.tar__mentions li{padding-left:1.4em;position:relative}
.tar__mentions li::before{content:"—";position:absolute;left:0;color:var(--bleu)}

/* ------------------------------------------------------ 16. PSYCHANALYSE */
.intro{max-width:44rem}
@media (min-width:56rem){
  .intro{margin-left:calc((100% - 11 * var(--g)) / 12 * 3 + 3 * var(--g));
    max-width:38rem}
}
.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);color:var(--encre);
  line-height:1.42;font-weight:400;letter-spacing:-.015em}

.props{display:grid;row-gap:clamp(2rem,1.2rem + 3vw,3rem);column-gap:var(--g)}
@media (min-width:56rem){
  .props{grid-template-columns:repeat(12,minmax(0,1fr))}
  .prop{grid-column:span 4}
}
.prop{padding-top:var(--e-4);border-top:1px solid var(--encre)}
.prop__n{color:var(--bleu);margin-bottom:var(--e-4)}
.prop .sur{margin-bottom:var(--e-2)}
.prop__t{font-size:var(--t-lg);font-weight:500;letter-spacing:-.02em;
  max-width:16ch}
.prop__c{margin-top:var(--e-4)}
.prop__c p{font-size:var(--t-sm);color:var(--encre-2)}
.prop__c p + p{margin-top:var(--e-4)}

.lecs{display:grid;gap:clamp(1.75rem,1.2rem + 2vw,var(--e-7)) var(--g)}
@media (min-width:56rem){
  .lecs{grid-template-columns:repeat(12,minmax(0,1fr))}
  .lec__g:nth-child(1){grid-column:1/5}
  .lec__g:nth-child(2){grid-column:5/9}
  .lec__g:nth-child(3){grid-column:9/13}
}
.lec__t{display:flex;align-items:center;gap:.5rem;font-size:var(--t-md);
  font-weight:500;padding-bottom:var(--e-3);
  border-bottom:1px solid var(--encre)}
.lec__ic{width:1.05em;height:1.05em;color:var(--bleu);flex:none}
.lec__l{display:grid;gap:var(--e-5);margin-top:var(--e-5)}
.lec__oeuvre{display:block;font-weight:500}
.lec__auteur{display:block;color:var(--bleu);margin-top:2px}
.lec__note{display:block;font-size:var(--t-sm);color:var(--encre-2);
  margin-top:.35rem}

/* ------------------------------------------------------------ 17. HISTOIRE */
.cit{max-width:46rem;padding-left:clamp(1rem,3vw,2rem);
  border-left:2px solid var(--bleu);margin-bottom:clamp(2rem,4vw,3rem)}
@media (min-width:56rem){
  .cit{margin-left:calc((100% - 11 * var(--g)) / 12 * 3 + 3 * var(--g))}
}
.cit__t{font-size:var(--t-xl);font-weight:300;line-height:1.2;
  letter-spacing:-.025em}
.cit__s{margin-top:var(--e-4);color:var(--encre-2);text-transform:uppercase;
  letter-spacing:.1em}

/* La frise est un INDEX : date et lieu en marge, en monospace, le texte à
   droite. Pas de pastilles, pas de trait vertical décoratif. */
.fr{border-bottom:1px solid #2E2E2E}
.fr__l{position:relative;display:grid;gap:.25rem var(--g);
  padding-block:clamp(1.2rem,.9rem + 1vw,1.7rem)}
.fr__l::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:#2E2E2E;transform-origin:left;
  transition:scale 700ms cubic-bezier(.16,1,.3,1)}
.js .fr__l[data-anim]::before{scale:0 1}
.js .fr__l[data-anim].est-visible::before{scale:1 1}
.fr__date{color:var(--bleu-clair);font-size:var(--t-sm);font-weight:500}
.fr__lieu{color:#8A8A8A;text-transform:uppercase;letter-spacing:.09em}
.fr__t{font-size:var(--t-md);font-weight:500}
.fr__c{color:var(--sur-noir);font-size:var(--t-sm);max-width:30rem}
@media (min-width:56rem){
  .fr__l{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .fr__date{grid-column:1/3;padding-top:.3em}
  .fr__lieu{grid-column:3/5;padding-top:.55em}
  .fr__t{grid-column:5/8;padding-right:var(--g)}
  .fr__c{grid-column:8/13}
}

/* --------------------------------------------------------- 18. PARCOURS */
.parc{border-top:1px solid var(--encre)}
.parc__l{display:grid;gap:.15rem var(--g);padding:.9rem 0;
  border-bottom:1px solid var(--filet)}
@media (min-width:44rem){ .parc__l{grid-template-columns:14rem minmax(0,1fr)} }
.parc__k{font-weight:500}
.parc__v{color:var(--encre-3);font-size:var(--t-sm)}

/* ---------------------------------------------------------- 19. CONTACT */
.ct{display:grid;gap:clamp(2rem,1.2rem + 3vw,var(--e-7)) var(--g)}
@media (min-width:56rem){
  .ct{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .ct__appel{grid-column:1/7}
  .ct__adr{grid-column:8/13}
}
.ct__t{font-size:var(--t-lg);font-weight:500;padding-bottom:var(--e-3);
  margin-bottom:var(--e-5);border-bottom:1px solid var(--encre)}
.ct__t--2{margin-top:var(--e-6)}
.ct .tel-gros{margin-bottom:var(--e-5)}
.ct__p{color:var(--encre-2);max-width:var(--largeur-texte)}
.ct__rappel{margin-top:var(--e-4);color:var(--bleu);
  font-size:var(--t-sm);line-height:1.6}
.ct__addr{font-style:normal;line-height:1.85}
.hor{border-top:1px solid var(--filet)}
.hor__l{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;
  border-bottom:1px solid var(--filet);font-size:var(--t-sm)}
.hor__l--off{color:var(--encre-3)}
.hor dt{font-weight:500}

.acces{display:grid;gap:clamp(1.75rem,1.2rem + 2.4vw,var(--e-7)) var(--g)}
@media (min-width:56rem){
  .acces{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .acces__plan{grid-column:1/8}
  .acces__txt{grid-column:8/13}
}
.acces__txt .reg__l{grid-template-columns:2.6rem minmax(0,1fr)}
.acces__txt .reg__n{grid-column:1;padding-top:.15em}
.acces__txt .reg__t{grid-column:2;padding-right:0}
.acces__txt .reg__c{grid-column:2}
.acces__it-t{margin-top:var(--e-6);text-transform:uppercase;
  letter-spacing:.1em;color:var(--encre-2)}
.acces__note{margin-top:var(--e-5);font-size:var(--t-xs);color:var(--encre-3);
  max-width:32rem;line-height:1.65}

/* Le formulaire. Les champs sont numérotés comme le reste du site : c'est
   la même logique de registre, et cela dit combien il en reste. */
.form{display:grid;gap:var(--e-5);max-width:38rem}
.ch{display:grid;grid-template-columns:2.6rem minmax(0,1fr);
  gap:.3rem .5rem;align-items:baseline}
.ch__n{grid-row:1/2;color:var(--encre-3);padding-top:.2em}
.ch__l{grid-column:2;font-size:var(--t-sm);font-weight:500}
.ch__req{color:var(--bleu);margin-left:.15em}
.ch__aide{grid-column:2;font-size:var(--t-xs);color:var(--encre-2)}
.ch__i{grid-column:2;width:100%;padding:.7rem .8rem;background:var(--blanc);
  border:1px solid var(--filet-2);font-size:var(--t-base);
  transition:border-color var(--transi),box-shadow var(--transi)}
.ch__i:focus{outline:0;border-color:var(--bleu);
  box-shadow:inset 0 0 0 1px var(--bleu)}
.ch__i[aria-invalid="true"]{border-color:#9E2F17}
textarea.ch__i{resize:vertical;min-height:8rem}
.form__rgpd{font-size:var(--t-xs);color:var(--encre-2);line-height:1.65}
.form__act{margin-top:var(--e-1)}
.form__demo{padding:1rem 1.1rem;background:var(--bleu-pale);
  border-left:3px solid var(--bleu);font-size:var(--t-sm);
  color:var(--bleu-fonce)}
.form__demo strong{display:block;margin-bottom:.2rem}
.form__demo-note{display:block;margin-top:.55rem;padding-top:.55rem;
  border-top:1px solid rgba(42,75,155,.3);font-size:var(--t-xs)}

/* ------------------------------------------------------- 20. APPEL FINAL */
.bande{border-top:0}
.appel{background:var(--bleu);color:#fff;
  padding-block:clamp(2.75rem,1.8rem + 4vw,5rem)}
.appel__in{display:grid;gap:var(--e-6) var(--g)}
.appel__t{font-size:var(--t-xl);font-weight:400;color:#fff;
  letter-spacing:-.025em;max-width:16ch;margin-top:var(--e-4)}
.appel__c{margin-top:var(--e-4);color:rgba(255,255,255,.9);
  max-width:30rem;font-size:var(--t-sm)}
.appel__adr{margin-top:var(--e-4);color:rgba(255,255,255,.9);
  font-size:var(--t-sm);line-height:1.7}
.appel__adr .mono{display:inline-block;margin-top:.2rem;
  color:rgba(255,255,255,.75)}
@media (min-width:56rem){
  .appel__in{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .appel__g{grid-column:1/7}
  .appel__d{grid-column:8/13}
}

/* ------------------------------------------------------------ 21. URGENCE */
.urg{background:var(--encre);color:var(--sur-noir);
  padding-block:clamp(2.5rem,1.6rem + 3.4vw,4rem)}
.urg__tete{display:grid;gap:var(--e-3) var(--g);margin-bottom:var(--e-6)}
.urg__chapo{margin-top:var(--e-3);color:var(--sur-noir);
  font-size:var(--t-sm);max-width:38rem}
.urg .t3{color:#fff}
.urg__liste{border-bottom:1px solid #2E2E2E}
.urg__l{position:relative;display:grid;gap:.15rem var(--g);
  padding-block:.85rem}
.urg__l::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:#2E2E2E;transform-origin:left;
  transition:scale 700ms cubic-bezier(.16,1,.3,1)}
.js .urg__l[data-anim]::before{scale:0 1}
.js .urg__l[data-anim].est-visible::before{scale:1 1}
.urg__num{font-family:var(--f-mono);font-size:var(--t-md);font-weight:500;
  color:var(--bleu-clair);font-variant-numeric:tabular-nums;white-space:nowrap}
.urg__t{color:#fff;font-weight:500;font-size:var(--t-sm)}
.urg__c{color:var(--sur-noir);font-size:var(--t-sm);max-width:32rem}
@media (min-width:56rem){
  .urg__tete{grid-template-columns:repeat(12,minmax(0,1fr))}
  .urg__tete .cote{grid-column:1/4;padding-top:.4em}
  .urg__tete > div{grid-column:4/12}
  .urg__l{grid-template-columns:repeat(12,minmax(0,1fr));align-items:baseline}
  .urg__num{grid-column:1/3}
  .urg__t{grid-column:3/6}
  .urg__c{grid-column:6/13}
}

/* -------------------------------------------------------------- 22. PIED */
.pied{background:var(--blanc);border-top:1px solid var(--encre);
  padding-block:clamp(2.5rem,1.6rem + 3vw,4rem) var(--e-5)}
.pied__in{display:grid;gap:var(--e-6) var(--g)}
@media (min-width:56rem){
  .pied__in{grid-template-columns:repeat(12,minmax(0,1fr))}
  .pied__id{grid-column:1/5}
  .pied__nav{grid-column:5/8}
  .pied__legal{grid-column:8/13}
}
.pied__nom{font-size:var(--t-md);font-weight:500;letter-spacing:-.015em}
.pied__role{font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--encre-2);margin-top:3px}
.pied__adr{font-style:normal;margin-top:var(--e-4);line-height:1.8;
  font-size:var(--t-sm)}
.pied__adr a{color:var(--bleu);text-decoration:none;font-weight:500}
.pied__adr a:hover{text-decoration:underline}
.pied__sr{margin-top:var(--e-2);color:var(--encre-3)}
.pied__t{font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;color:var(--encre-2);
  padding-bottom:var(--e-2);margin-bottom:var(--e-4);
  border-bottom:1px solid var(--filet)}
.pied__liens{display:grid;gap:.45rem;font-size:var(--t-sm)}
.pied__liens a{text-decoration:none;color:var(--encre-2)}
.pied__liens a:hover{color:var(--bleu)}
.pied__legal-l{display:grid;gap:.65rem;font-size:var(--t-xs);
  color:var(--encre-2);line-height:1.65;max-width:27rem}
.pied__bas{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(2rem,4vw,3rem);padding-top:var(--e-4);
  border-top:1px solid var(--filet);color:var(--encre-3)}

/* -------------------------------------------------------------- 23. FOLIO */
/* Le numéro de section, fixe dans la marge basse, qui s'incrémente au
   défilement. C'est le folio d'une revue : il dit où l'on en est. */
.folio{display:none}
@media (min-width:64rem){
  .folio{display:flex;position:fixed;left:var(--marge);bottom:1.1rem;z-index:60;
    align-items:baseline;gap:.25em;pointer-events:none;
    font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;
    font-variant-numeric:tabular-nums;letter-spacing:.08em;
    background:var(--blanc);padding:.3rem .55rem;
    border:1px solid var(--filet);border-left:2px solid var(--bleu)}
  .folio__n{color:var(--encre)}
  .folio__d{color:var(--encre-3)}
}

/* ------------------------------------------------------ 24. BARRE TÉLÉPHONE */
.barre-tel{display:none}
@media (max-width:47.99rem){
  .m6{--barre-h:58px}
  .barre-tel{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:.5rem var(--marge) calc(.5rem + env(safe-area-inset-bottom));
    background:var(--blanc);border-top:1px solid var(--encre)}
  .barre-tel__a{display:flex;align-items:center;justify-content:center;gap:.5rem;
    min-height:2.7rem;background:var(--bleu);color:#fff;text-decoration:none;
    font-weight:500;font-size:var(--t-sm)}
  .barre-tel__a svg{width:1.1em;height:1.1em}
}

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