/* ==========================================================================
   MAQUETTE 07 — « L'ÉPREUVE »
   Archivo + Source Serif 4 (+ IBM Plex Mono pour les chiffres).
   Noir et blanc INTÉGRAL : aucune teinte dans cette feuille, nulle part.
   La seule exception du site est le marqueur « à valider », qui est rouge
   parce que c'est un avertissement — il est défini dans comparateur.css et
   on ne le neutralise pas ici.
   Feuille unique, mobile d'abord, aucune dépendance.
   ========================================================================== */

/* ------------------------------------------------------------- 1. JETONS */
.m7{
  /* Deux extrêmes et cinq gris. Pas un de plus : sans couleur, une échelle
     de valeurs trop peuplée devient une bouillie, et chaque gris supplémentaire
     est un contraste de plus à vérifier. Les ratios sont mesurés, pas devinés. */
  --blanc:#FFFFFF;
  --noir:#0E0E0E;
  --gris-1:#F6F6F6;   /* fond de section alterné — le papier, à peine cassé  */
  --gris-2:#E4E4E4;   /* filets légers, fonds de champ                        */
  --gris-3:#9A9A9A;   /* filets décoratifs UNIQUEMENT, jamais du texte        */
  --gris-4:#6A6A6A;   /* texte tertiaire : 5,4:1 sur blanc · 5,0:1 sur gris-1 */
  --gris-5:#4A4A4A;   /* texte secondaire : 8,9:1 sur blanc                   */
  --nuit-1:#A8A8A8;   /* texte secondaire sur noir : 8,1:1                    */
  --nuit-2:#8C8C8C;   /* texte tertiaire sur noir  : 5,7:1                    */
  --nuit-filet:rgba(255,255,255,.22);
  --nuit-filet-fort:rgba(255,255,255,.55);

  /* Rôles. Une section en négatif ne fait que renverser ces six variables :
     tout le reste de la feuille s'y adapte sans être réécrit. */
  --fond:var(--blanc);
  --encre:var(--noir);
  --encre-2:var(--gris-5);
  --encre-3:var(--gris-4);
  --trait:var(--noir);
  --trait-doux:var(--gris-2);

  --f-titre:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-texte:'Source Serif 4','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --f-chiffre:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  --t-xs:clamp(.6875rem,.665rem + .1vw,.75rem);
  --t-sm:clamp(.8125rem,.79rem + .13vw,.9rem);
  --t-base:clamp(1.0625rem,1.02rem + .2vw,1.1875rem);
  --t-md:clamp(1.125rem,1.06rem + .3vw,1.3125rem);
  --t-lg:clamp(1.25rem,1.1rem + .62vw,1.75rem);
  --t-xl:clamp(1.625rem,1.3rem + 1.5vw,2.75rem);
  --t-2xl:clamp(1.875rem,1.35rem + 2.6vw,3.75rem);
  --t-3xl:clamp(2.2rem,1.1rem + 4.6vw,6rem);

  --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; --e-9:6rem;
  --sect-y:clamp(3.25rem,1.8rem + 6vw,7.5rem);
  --goutt:clamp(1.15rem,.6rem + 2.4vw,2.75rem);
  --largeur:76rem; --largeur-texte:33rem;

  /* Trois épaisseurs de filet, et rien d'autre. C'est TOUTE la hiérarchie
     visuelle de cette maquette : 4 px ouvre un chapitre, 2 px ouvre un
     groupe, 1 px sépare deux items d'un même groupe. */
  --f1:1px; --f2:2px; --f4:4px;

  --transi:200ms cubic-bezier(.4,0,.2,1);
  --tete-h:60px; --barre-h:0px;
  --av-r:0;     /* le marqueur « à valider » passe en angles droits         */
}
@media (min-width:64rem){ .m7{ --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.m7{
  font-family:var(--f-texte); font-size:var(--t-base); font-weight:400;
  line-height:1.72; color:var(--encre); background:var(--fond);
  -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}
picture img{width:100%}
/* TOUTES les photographies sont en noir et blanc. Une seule règle : rien ne
   peut passer à travers, y compris une image ajoutée plus tard. Le léger
   gain de contraste rattrape l'aplatissement que produit la désaturation. */
.m7 picture img{filter:grayscale(1) contrast(1.06)}
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}

/* Archivo en capitales serrées : c'est le lettrage de couverture. Le
   resserrement ne vaut QUE pour les très grands corps — en dessous de
   ~24 px il colle les lettres, donc letter-spacing repart vers zéro. */
.m7 h1,.m7 h2,.m7 h3,.m7 h4{
  font-family:var(--f-titre); font-weight:600; line-height:1.06;
  text-wrap:balance; overflow-wrap:break-word;
}
p{text-wrap:pretty}
strong,b{font-weight:600}
:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.sect--negatif :focus-visible,.appel :focus-visible,.pied :focus-visible{outline-color:#fff}
::selection{background:var(--noir);color:var(--blanc)}
.sect--negatif ::selection{background:var(--blanc);color:var(--noir)}
/* Le lien d'évitement est commun aux huit maquettes et sa feuille partagée
   lui donne un fond #16181C — un noir très légèrement BLEUTÉ. On ne modifie
   pas un fichier partagé : on le ramène au noir chez nous. C'est la dernière
   teinte du document, et il n'en reste donc plus aucune (hors « à valider »). */
.m7 .saut-contenu{background:var(--noir)}
@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:52rem}
.conteneur--texte{max-width:var(--largeur-texte)}
/* La manchette : un bloc de texte calé sur la MÊME colonne que les titres de
   chapitre, la colonne de gauche restant vide. Centrer ces blocs les faisait
   flotter au milieu de la page, hors de la grille que tout le reste suit. */
.manchette{display:grid}
@media (min-width:60rem){
  .manchette{grid-template-columns:13rem minmax(0,1fr);gap:var(--goutt)}
  .manchette > *{grid-column:2;max-width:40rem}
}
.sect{padding-block:var(--sect-y)}
.sect--serree{padding-top:clamp(2rem,1rem + 3vw,3.5rem)}
.sect--gris{background:var(--gris-1)}

/* LE NÉGATIF. Le renversement complet, et le seul « effet » du site : on ne
   change pas de graphisme, on change de papier. Toutes les règles qui suivent
   dans la feuille pointent vers les variables de rôle, donc elles suivent. */
.sect--negatif{
  background:var(--noir);
  --fond:var(--noir); --encre:var(--blanc);
  --encre-2:var(--nuit-1); --encre-3:var(--nuit-2);
  --trait:var(--nuit-filet-fort); --trait-doux:var(--nuit-filet);
  color:var(--nuit-1);
}
.sect--negatif h1,.sect--negatif h2,.sect--negatif h3,.sect--negatif h4{color:#fff}
.sect--negatif strong{color:#fff}
/* …SAUF dans le marqueur « à valider ». Il porte son propre fond clair et
   c'est la seule tache de couleur autorisée du site : un avertissement doit
   être vu. Renverser son texte en blanc le rendait illisible (1,1:1). */
.sect--negatif .a-valider strong{color:#8C2913}
.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}
.chiffre{font-family:var(--f-chiffre);font-weight:400;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* L'intitulé de rubrique : un filet court, puis le mot en capitales
   espacées. C'est la seule « décoration » de la feuille. */
.sur{display:flex;align-items:center;gap:.7rem;
  font-family:var(--f-titre);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--encre);
  margin-bottom:var(--e-4)}
.sur::before{content:"";width:1.5rem;height:2px;background:currentColor;flex:none}

.t1,.ouv__t{font-size:var(--t-2xl);text-transform:uppercase;letter-spacing:-.025em}
.t2{font-size:var(--t-xl);text-transform:uppercase;letter-spacing:-.015em;
  max-width:20ch}
.t3{font-size:var(--t-lg);text-transform:uppercase;letter-spacing:-.01em;
  max-width:22ch}
.chapo{font-size:var(--t-md);font-weight:300;color:var(--encre-2);
  max-width:var(--largeur-texte);margin-top:var(--e-4);line-height:1.6}

/* Le filet. Il se TRACE à l'apparition, de gauche à droite, comme un trait
   tiré à la règle. Trois épaisseurs, jamais une quatrième. */
.filet{display:block;width:100%;background:var(--trait);
  transform-origin:left center;scale:0 1;
  transition:scale 800ms cubic-bezier(.22,1,.36,1)}
.filet.est-visible{scale:1 1}
.filet--1{height:var(--f1)}
.filet--2{height:var(--f2)}
.filet--4{height:var(--f4)}
.sect--negatif .filet{background:#fff}

/* Apparition : un fondu, rien de plus. La classe .js autorise l'état masqué —
   sans JavaScript, rien n'est jamais caché. */
.js [data-anim]{opacity:0;translate:0 14px;
  transition:opacity 620ms ease,translate 620ms cubic-bezier(.22,1,.36,1)}
.js [data-anim].est-visible{opacity:1;translate:0 0}
.js [data-anim][data-delai="1"]{transition-delay:100ms}
.js [data-anim][data-delai="2"]{transition-delay:200ms}
.js [data-anim][data-delai="3"]{transition-delay:300ms}
@media (prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1 !important;translate:none !important}
  .filet{scale:1 1 !important}
}

/* ------------------------------------------------------------ 4. BOUTONS */
/* Aucune couleur : le survol INVERSE le bouton. C'est le seul retour visuel
   dont dispose une maquette en noir et blanc, et c'est le plus franc. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:3rem;padding:.85rem 1.7rem;border-radius:0;
  background:var(--encre);color:var(--fond);border:var(--f2) solid var(--encre);
  font-family:var(--f-titre);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;text-align:center;
  transition:background var(--transi),color var(--transi);
}
.btn:hover{background:var(--fond);color:var(--encre)}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn--contour{background:transparent;color:var(--encre)}
.btn--contour:hover{background:var(--encre);color:var(--fond)}
.btn--lg{min-height:3.4rem;padding:1rem 2.2rem;font-size:var(--t-sm)}
.btn--sm{min-height:2.6rem;padding:.55rem 1rem;border-width:var(--f1);
  letter-spacing:.1em}
.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%} }

/* Le lien fléché : souligné d'un filet qui s'épaissit au survol. Aucun
   changement de couleur — il n'y en a pas à disposition. */
.lien{display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--f-titre);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre);text-decoration:none;
  border-bottom:var(--f1) solid var(--encre);padding-bottom:4px;
  transition:border-width var(--transi),gap var(--transi)}
.lien:hover{border-bottom-width:var(--f2);gap:.75rem}
.lien svg{width:1.1em;height:1.1em}

/* Un lien posé DANS un bloc de texte doit rester repérable sans couleur :
   il est donc toujours souligné. C'est aussi ce qu'exige WCAG 1.4.1. */
main p a:not(.lien):not(.btn),main li a:not(.lien):not(.btn),
main dd a,.pied__adr a{
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.18em}

/* ------------------------------------------------------------ 5. EN-TÊTE */
/* Collé SOUS le bandeau de comparaison, dont socle.js mesure la hauteur. */
.tete{position:sticky;top:var(--cmp-h,0px);z-index:80;
  background:rgba(255,255,255,.92);
  border-bottom:var(--f1) solid transparent;
  transition:border-color var(--transi),background var(--transi)}
@supports (backdrop-filter:blur(12px)){
  .tete{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
.tete.est-collee{background:rgba(255,255,255,.98);border-bottom-color:var(--noir)}
.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:700;
  font-size:clamp(.95rem,.9rem + .2vw,1.0625rem);
  text-transform:uppercase;letter-spacing:.02em}
.marque__role{display:block;font-family:var(--f-titre);font-size:.6875rem;
  font-weight:500;color:var(--gris-4);letter-spacing:.16em;
  text-transform:uppercase;margin-top:3px}

/* La barre de navigation doit tenir sur UNE ligne à 1024, 1280 et 1440 px.
   « La psychanalyse » et « Le psychanalyste » sont longs : on descend le corps
   à 12 px et l'interlettrage à .06em, et on n'y met PAS de bouton — le
   téléphone, plus court, rend un meilleur service à cet endroit. */
.nav{display:none;gap:clamp(.75rem,1.4vw,1.6rem)}
.nav a{font-family:var(--f-titre);font-size:.75rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  color:var(--gris-5);padding-block:.45rem;position:relative;white-space:nowrap;
  transition:color var(--transi)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:var(--f2);background:var(--noir);scale:0 1;transform-origin:left;
  transition:scale var(--transi)}
.nav a:hover,.nav a[aria-current]{color:var(--noir)}
.nav a:hover::after,.nav a[aria-current]::after{scale:1 1}
.tete__act{display:flex;align-items:center;gap:var(--e-3)}
.tete__tel{display:none}
/* Déclaré AVANT la requête de média qui le masque : à spécificité égale,
   c'est la DERNIÈRE règle qui gagne. Déclaré après, le bouton de menu
   resterait affiché sur grand écran, à côté de la navigation complète. */
.burger{width:44px;height:44px;display:grid;place-items:center;
  border:var(--f1) solid var(--noir)}
/* Le téléphone apparaît dès 48 rem, c'est-à-dire EXACTEMENT là où la barre
   d'appel du bas disparaît : entre les deux, une tablette se serait retrouvée
   sans aucun numéro à l'écran. */
@media (min-width:48rem){
  .tete__tel{display:inline-flex;align-items:center;gap:.4rem;
    font-family:var(--f-titre);font-size:.8125rem;font-weight:600;
    letter-spacing:.04em;text-decoration:none;white-space:nowrap;
    border:var(--f2) solid var(--noir);padding:.5rem .8rem;
    transition:background var(--transi),color var(--transi)}
  .tete__tel:hover{background:var(--noir);color:#fff}
  .tete__tel svg{width:1em;height:1em;flex:none}
}
@media (min-width:64rem){
  .nav{display:flex}
  .burger{display:none}
}
.burger__l,.burger__l::before,.burger__l::after{
  content:"";display:block;width:18px;height:2px;background:var(--noir);
  transition:transform var(--transi),opacity var(--transi)}
.burger__l::before{transform:translateY(-6px)}
.burger__l::after{transform:translateY(4px)}
.burger[aria-expanded="true"] .burger__l{background:transparent}
.burger[aria-expanded="true"] .burger__l::before{transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger__l::after{transform:translateY(-2px) rotate(-45deg)}

/* Le menu de téléphone est en NÉGATIF : ouvrir le menu, c'est retourner la
   feuille. C'est le geste le plus fréquent du site, il mérite l'effet. */
.mm{position:fixed;inset:calc(var(--tete-h) + var(--cmp-h,0px)) 0 0;z-index:79;
  background:var(--noir);color:var(--nuit-1);
  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;border-top:var(--f2) solid #fff}
.mm__liens a{display:flex;align-items:baseline;gap:1rem;padding:1.05rem 0;
  border-bottom:var(--f1) solid var(--nuit-filet);text-decoration:none;
  color:#fff;font-family:var(--f-titre);font-weight:600;font-size:var(--t-lg);
  text-transform:uppercase;letter-spacing:-.01em}
.mm__liens a[aria-current]{text-decoration:underline;text-underline-offset:.2em}
.mm__n{font-family:var(--f-chiffre);font-size:var(--t-xs);color:var(--nuit-2);
  flex:none;min-width:2.2rem}
.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-family:var(--f-titre);font-weight:600;color:#fff;letter-spacing:.04em}
.mm__tel svg{width:1.1em;height:1.1em}
.mm .btn{background:#fff;color:var(--noir);border-color:#fff}
.mm .btn:hover{background:transparent;color:#fff}

/* --------------------------------------------------- 6. PREMIER ÉCRAN */
/* Le titre d'abord, seul sur le blanc. La photographie ensuite, en dessous,
   pleine largeur. C'est l'inverse de M1, qui pose son titre SUR l'image. */
.ouv{padding-top:clamp(2.5rem,1.5rem + 5vw,6rem)}
.ouv__in{padding-bottom:clamp(1.75rem,1rem + 3vw,3.25rem)}
.ouv__t{max-width:16ch;line-height:.98}
.ouv__t--geant{font-size:var(--t-3xl);letter-spacing:-.035em;line-height:.94;
  max-width:14ch}
.ouv .filet{margin-block:clamp(1.5rem,1rem + 2vw,2.5rem)}
.ouv__bas{display:grid;gap:var(--e-5)}
@media (min-width:56rem){
  .ouv__bas{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    align-items:start;gap:var(--goutt)}
  .ouv__bas .grp{margin-top:.35rem;justify-content:flex-end}
}
.ouv__c{font-size:var(--t-md);font-weight:300;color:var(--encre-2);
  max-width:38rem;line-height:1.62}
.ouv--page .ouv__t{font-size:var(--t-2xl)}
.ouv--court{padding-bottom:0}

/* ------------------------------------------------------------ 7. PLANCHES */
/* La planche : une photographie et sa légende DESSOUS, jamais dessus.
   Le filet du haut de la légende marque le bord du tirage. */
.pl{margin:0}
.pl__img{display:block;background:var(--gris-2)}
/* Le bord du tirage. Plusieurs photographies du fonds sont très claires
   (le canapé de lin sur mur blanc est presque un aplat) : sans ce filet,
   elles n'ont pas de bord sur la page blanche et flottent. Il n'est PAS posé
   sur les planches pleine largeur — un plein papier n'a pas de marge. */
.pl:not(.pl--pleine) .pl__img{border:var(--f1) solid var(--trait)}
.pl__img img{width:100%;height:auto;display:block}
.pl__leg{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .9rem;
  margin-top:.7rem;padding-top:.55rem;border-top:var(--f1) solid var(--trait);
  font-family:var(--f-titre);font-size:var(--t-xs);font-weight:400;
  line-height:1.5;color:var(--encre-3)}
.pl__n{font-family:var(--f-chiffre);color:var(--encre);letter-spacing:.08em;
  flex:none}
.pl__t{flex:1 1 12rem;min-width:0}
.pl__cr{flex-basis:100%;color:var(--encre-3);font-style:italic}
.sect--negatif .pl__img{background:#1C1C1C}

/* Les cadrages. On ne passe JAMAIS ratio= à ctx.image : l'attribut style en
   ligne qu'il produit battrait silencieusement ces règles. */
.pl--cine img{aspect-ratio:4/3;object-fit:cover}
@media (min-width:48rem){ .pl--cine img{aspect-ratio:21/9} }
.pl--bande img{aspect-ratio:3/2;object-fit:cover}
@media (min-width:48rem){ .pl--bande img{aspect-ratio:16/6} }
.pl--portrait img{aspect-ratio:4/5;object-fit:cover}
.pl--paysage img{aspect-ratio:3/2;object-fit:cover}
/* Pleine largeur : l'image sort du conteneur, la légende y rentre. */
.pl--pleine{width:100%}
.pl--pleine .pl__leg{max-width:var(--largeur);margin-inline:auto;
  padding-inline:var(--goutt);margin-top:.7rem}

/* --------------------------------------------------------- 8. LE CHAPITRE */
.chap{margin-bottom:clamp(2rem,1.2rem + 3vw,3.75rem)}
.chap .filet{margin-bottom:var(--e-5)}
.chap__in{display:grid;gap:var(--e-2)}
@media (min-width:60rem){
  /* align-items:start est INDISPENSABLE : .sur est un conteneur flex, donc
     étiré sur toute la hauteur de la rangée, il centrait son contenu
     verticalement et l'intitulé se retrouvait au niveau de la 2ᵉ ou 3ᵉ ligne
     du titre. Il doit se caler sur la PREMIÈRE ligne, comme une manchette. */
  .chap__in{grid-template-columns:13rem minmax(0,1fr);gap:var(--goutt);
    align-items:start}
  .chap .sur{margin-bottom:0;padding-top:.85rem}
}

/* ------------------------------------------------- 9. LES SUITES DE PLANCHES */
/* Le remplacement des cartes de M1. Des rangées pleine largeur séparées par
   un filet de 1 px ; la première rangée en porte un de 2 px, qui ouvre le
   groupe. Numéro à gauche, texte à droite. */
.suite{display:grid;border-bottom:var(--f1) solid var(--trait)}
.suite__l{display:grid;gap:var(--e-3) var(--goutt);
  padding-block:clamp(1.25rem,.9rem + 1.4vw,2rem);
  border-top:var(--f1) solid var(--trait)}
.suite__l:first-child{border-top-width:var(--f2)}
@media (min-width:56rem){
  .suite__l{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
}
.suite__g{min-width:0}
.suite__n{display:block;font-family:var(--f-chiffre);font-size:var(--t-xs);
  letter-spacing:.1em;color:var(--encre-3);margin-bottom:var(--e-2)}
.suite__t{font-size:var(--t-md);text-transform:uppercase;letter-spacing:.005em;
  line-height:1.14;max-width:22ch}
.suite__t--grand{font-size:var(--t-lg);letter-spacing:-.01em}
.suite__r{margin-top:var(--e-2);font-family:var(--f-titre);font-size:var(--t-sm);
  font-weight:500;color:var(--encre-2);max-width:26ch}
.suite__c{font-size:var(--t-sm);color:var(--encre-2);max-width:40rem}
.suite__c--long p + p{margin-top:var(--e-4)}
.suite--props .suite__l .sur{margin-bottom:var(--e-3)}

/* ---------------------------------------------------- 9 bis. LES TROIS PLANCHES */
/* Les trois publics de l'accueil. Trois planches côte à côte, chacune ouverte
   par un filet de 2 px : la même grammaire que les suites, mais avec l'image
   en tête. Sur téléphone elles s'empilent et passent en cadrage paysage —
   trois portraits 4/5 à la suite feraient une page interminable. */
.trois{display:grid;gap:clamp(1.75rem,1.2rem + 2.5vw,2.5rem)}
@media (min-width:56rem){ .trois{grid-template-columns:repeat(3,1fr)} }
.trois__l{border-top:var(--f2) solid var(--trait);padding-top:var(--e-4)}
.trois__l .pl{margin-bottom:var(--e-5)}
@media (max-width:55.99rem){ .trois__l .pl img{aspect-ratio:3/2} }
.trois__sur{font-family:var(--f-titre);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--encre-3);
  margin-bottom:var(--e-2)}
.trois__t{font-size:var(--t-lg);text-transform:uppercase;letter-spacing:-.005em;
  margin-bottom:var(--e-3)}
.trois__t a{text-decoration:none;
  border-bottom:var(--f2) solid var(--encre);padding-bottom:.06em;
  transition:border-bottom-width var(--transi)}
.trois__t a:hover{border-bottom-width:var(--f4)}
.trois__c{font-size:var(--t-sm);color:var(--encre-2)}

/* --------------------------------------------------------------- 10. DUO */
.duo{display:grid;gap:clamp(1.5rem,1rem + 3vw,3rem)}
@media (min-width:56rem){
  .duo{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
  .duo--inverse{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}
.duo__txt{max-width:var(--largeur-texte)}
.duo__txt p + p{margin-top:var(--e-5)}
.duo__go{margin-top:var(--e-6)}
.portraits{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-4)}

/* ------------------------------------------------------------ 11. ADRESSE */
.adr{display:grid;gap:clamp(1.5rem,1rem + 3vw,3rem);align-items:start}
@media (min-width:60rem){ .adr{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)} }
.adr__bloc{font-size:var(--t-md);line-height:1.7}
.adr__bloc .chiffre{font-size:var(--t-sm);color:var(--encre-3)}
.adr__tel{margin-block:var(--e-5)}
.adr__tel .lien{font-size:var(--t-sm)}
.adr__tel svg{width:1.05em;height:1.05em}

/* ----------------------------------------------------- 12. LE PLAN DU QUARTIER */
/* Le plan est un SVG SANS aucune couleur en dur : tout se décide ici. C'est
   l'exercice le plus délicat de la contrainte — il faut qu'un parc, une
   rivière et un immeuble restent distincts avec la seule valeur.
   La règle retenue : plus c'est SOMBRE, plus c'est plein. Les voies sont
   blanches (le réseau est ce qui « perce » le tissu), le bâti est le gris
   moyen, les parcs sont plus clairs que le sol (ce sont des ouvertures),
   l'eau est le gris le plus sourd. Le tram est la seule ligne pointillée
   foncée : c'est ce qui le distingue d'une rue. */
.plan-cadre{border:var(--f2) solid var(--noir);background:#EDEDED}
.sect--negatif .plan-cadre{border-color:#fff}
.plan{width:100%;height:auto;display:block}
.plan__fond{fill:#EDEDED}
.plan__bati{fill:#D2D2D2;stroke:none}
.plan__vert{fill:#F4F4F4}
.plan__eau{fill:#BEBEBE;stroke:#BEBEBE;stroke-width:3}
.plan__voie{stroke:#FBFBFB}
.plan__voie--majeure{stroke:#FFFFFF}
.plan__voie--pieton{stroke:#FFFFFF;stroke-dasharray:5 4}
.plan__tram{stroke:#5A5A5A;stroke-width:1.6;stroke-dasharray:6 5}
.plan__libelle text{fill:#5E5E5E;font-family:var(--f-titre);font-size:10.5px;
  font-weight:500;letter-spacing:.08em}
.plan__halo{fill:#0E0E0E;opacity:.1}
.plan__halo--2{opacity:.2}
.plan__point{fill:#0E0E0E}
.plan__oeil{fill:#FFFFFF}
.plan__ici{fill:#0E0E0E;font:600 13px var(--f-titre);letter-spacing:.16em;
  text-transform:uppercase}
.plan__echelle path{stroke:#4A4A4A;stroke-width:1.3;fill:none}
.plan__echelle text,.plan__nord text{fill:#4A4A4A;
  font:400 10px var(--f-chiffre)}
.plan__nord path{fill:#4A4A4A}
.plan__credit{fill:#7A7A7A;font:400 9.5px var(--f-titre);letter-spacing:.04em}

/* ------------------------------------------------------------- 13. URGENCE */
/* Le seul bloc du site encadré sur ses quatre côtés d'un filet de 4 px : un
   feuillet blanc glissé entre deux aplats noirs. On le trouve sans lire, et
   c'est exactement ce qu'on lui demande. */
.urg{background:var(--blanc);padding-block:clamp(2.5rem,1.5rem + 4vw,4.5rem)}
.urg__cadre{border:var(--f4) solid var(--noir);
  padding:clamp(1.25rem,.9rem + 2vw,2.5rem)}
.urg__tete{margin-bottom:var(--e-6)}
.urg__t{display:flex;align-items:center;gap:.6rem;font-size:var(--t-lg);
  text-transform:uppercase;letter-spacing:-.005em}
.urg__ic{width:1.05em;height:1.05em;flex:none}
.urg__chapo{margin-top:var(--e-4);font-size:var(--t-sm);color:var(--gris-5);
  max-width:40rem}
.urg__liste{display:grid;border-bottom:var(--f1) solid var(--noir)}
.urg__l{display:grid;gap:.2rem .9rem;padding-block:var(--e-4);
  border-top:var(--f1) solid var(--noir);align-items:baseline}
.urg__l:first-child{border-top-width:var(--f2)}
/* La colonne des numéros se dimensionne sur le PLUS LONG (« 09 72 39 40 50 »)
   au lieu d'être fixée : à 9 rem, SOS Amitié se coupait en deux lignes et le
   numéro d'écoute devenait illisible d'un coup d'œil. */
@media (min-width:44rem){ .urg__l{grid-template-columns:auto minmax(0,1fr)} }
.urg__num{font-family:var(--f-chiffre);font-weight:500;white-space:nowrap;
  font-size:clamp(1.05rem,.98rem + .4vw,1.3125rem);letter-spacing:-.03em;
  color:var(--noir)}
.urg__t2{display:block;font-family:var(--f-titre);font-weight:600;
  font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.06em}
.urg__d{display:block;margin-top:.2rem;font-size:var(--t-sm);color:var(--gris-5)}

/* ------------------------------------------------------- 14. APPEL FINAL */
.appel{padding-block:clamp(3rem,2rem + 5vw,6.5rem)}
.appel__t{font-size:var(--t-2xl);text-transform:uppercase;letter-spacing:-.025em;
  max-width:18ch;margin-top:var(--e-2)}
.tel-geant{display:inline-flex;align-items:center;gap:.55rem;
  margin-top:clamp(1.5rem,1rem + 2vw,2.5rem);text-decoration:none;
  font-family:var(--f-titre);font-weight:700;
  font-size:clamp(1.7rem,1.05rem + 2.8vw,3.5rem);letter-spacing:-.02em;
  color:var(--encre);border-bottom:var(--f2) solid var(--encre);
  padding-bottom:.15em;transition:border-bottom-width var(--transi)}
.tel-geant:hover{border-bottom-width:var(--f4)}
.tel-geant svg{width:.72em;height:.72em;flex:none}
.appel__adr{margin-top:var(--e-6);font-size:var(--t-sm);color:var(--encre-2);
  max-width:42rem}
.appel__go{margin-top:var(--e-6)}

/* ------------------------------------------------------------- 15. ONGLETS */
.onglets__barre{display:flex;flex-wrap:wrap;gap:0;
  border-bottom:var(--f2) solid var(--noir);
  margin-bottom:clamp(1.75rem,1.2rem + 2.5vw,3rem)}
.ong{display:inline-flex;align-items:baseline;gap:.5rem;
  padding:.85rem 1.1rem;font-family:var(--f-titre);font-size:var(--t-xs);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris-5);border-bottom:var(--f4) solid transparent;
  margin-bottom:calc(-1 * var(--f2));
  transition:color var(--transi),border-color var(--transi)}
/* Le premier onglet se cale sur le bord de la grille, comme les filets et les
   rangées : une barre d'onglets décalée de son propre rembourrage casse
   l'alignement de toute la page. */
.ong:first-child{padding-left:0}
/* Sur téléphone, « 01 ADULTES 02 ADOLESCENTS 03 ENFANTS » dépassait de 36 px
   et la barre passait sur deux lignes. On resserre plutôt que de laisser
   filer : trois publics, une seule ligne. */
@media (max-width:30rem){
  .ong{padding-inline:.55rem;gap:.35rem;letter-spacing:.06em}
  .ong:first-child{padding-left:0}
}
/* Sous 352 px (iPhone SE de première génération), même resserrés ils ne
   tiennent plus : la cote de l'onglet est décorative, elle saute. */
@media (max-width:22rem){ .ong__n{display:none} }
.ong:hover{color:var(--noir)}
.ong__n{font-family:var(--f-chiffre);font-weight:400;font-size:.6875rem;
  color:var(--gris-4)}
.ong.est-actif{color:var(--noir);border-bottom-color:var(--noir)}
.ong.est-actif .ong__n{color:var(--noir)}
.est-onglets .pan{animation:parait 380ms cubic-bezier(.22,1,.36,1)}
@keyframes parait{from{opacity:0;translate:0 8px}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 + 3vw,3rem);align-items:start;
  margin-bottom:clamp(2rem,1.3rem + 2.5vw,3rem)}
@media (min-width:56rem){
  .pan__tete{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
}
.encart{margin-top:clamp(2rem,1.3rem + 2.5vw,3rem);
  border:var(--f2) solid var(--trait);
  padding:clamp(1.2rem,.9rem + 1.6vw,2rem);max-width:46rem}
.encart__t{font-size:var(--t-md);text-transform:uppercase;letter-spacing:.01em;
  margin-bottom:var(--e-4)}
.encart__c p + p{margin-top:var(--e-4)}
.encart__c p{font-size:var(--t-sm);color:var(--encre-2)}

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

/* ------------------------------------------------------------- 17. TARIFS */
.tar{max-width:46rem;border-top:var(--f2) solid var(--trait)}
.tar th,.tar td{text-align:left;padding:.85rem .5rem;
  border-bottom:var(--f1) solid var(--trait);vertical-align:top}
.tar th:first-child,.tar td:first-child{padding-left:0}
.tar th:last-child,.tar td:last-child{padding-right:0}
.tar thead th{font-family:var(--f-titre);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre)}
.tar tbody th{font-family:var(--f-titre);font-weight:600;font-size:var(--t-sm);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.25}
.tar__note{display:block;font-family:var(--f-texte);font-weight:400;
  text-transform:none;letter-spacing:0;font-size:var(--t-xs);
  color:var(--encre-3);margin-top:.25rem;line-height:1.45}
.tar td{font-size:var(--t-sm);color:var(--encre-2);white-space:nowrap}
.tar__prix{text-align:right;color:var(--encre);font-weight:500}
.listee{margin-top:var(--e-5);display:grid;gap:.55rem;
  font-size:var(--t-sm);color:var(--encre-2);max-width:44rem}
.listee li{padding-left:1.3em;position:relative}
.listee li::before{content:"";position:absolute;left:0;top:.72em;width:.8em;
  height:var(--f1);background:var(--encre)}

/* -------------------------------------------------------- 18. PSYCHANALYSE */
.intro__p{font-size:var(--t-md);font-weight:300;color:var(--encre-2);
  line-height:1.66}
.intro__p + .intro__p{margin-top:var(--e-5)}
.intro__p:first-child{font-family:var(--f-titre);font-weight:400;
  font-size:var(--t-lg);line-height:1.34;color:var(--encre);
  letter-spacing:-.005em}

.lecs{display:grid;gap:clamp(1.5rem,1rem + 2.5vw,2.5rem)}
@media (min-width:56rem){ .lecs{grid-template-columns:repeat(3,1fr)} }
.lec__g{border-top:var(--f2) solid var(--trait);padding-top:var(--e-4)}
.lec__t{display:flex;align-items:center;gap:.5rem;font-size:var(--t-sm);
  text-transform:uppercase;letter-spacing:.1em}
.lec__ic{width:1.15em;height:1.15em;flex:none}
.lec__l{display:grid;gap:var(--e-5);margin-top:var(--e-5)}
.lec__oeuvre{display:block;font-family:var(--f-texte);font-weight:600;
  font-size:var(--t-sm)}
.lec__auteur{display:block;font-family:var(--f-titre);font-size:var(--t-xs);
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--encre-3);margin-top:.2rem}
.lec__note{display:block;font-size:var(--t-sm);color:var(--encre-2);
  margin-top:.4rem}

/* ------------------------------------------------------------ 19. HISTOIRE */
.cit{margin-bottom:clamp(1.75rem,1.2rem + 2.5vw,3rem)}
.cit__t{font-family:var(--f-titre);font-weight:500;font-size:var(--t-xl);
  line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;color:#fff}
.cit__s{margin-top:var(--e-4);font-family:var(--f-titre);font-size:var(--t-xs);
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--encre-3)}
.cit + .filet{margin-bottom:clamp(1.75rem,1.2rem + 2.5vw,3rem)}

/* La frise : la date en chiffres à gauche, le fait à droite, un filet entre
   chaque. Pas de pastille, pas de trait vertical : un relevé, pas une
   infographie. */
.fr{display:grid;border-bottom:var(--f1) solid var(--trait)}
.fr__l{display:grid;gap:var(--e-2) var(--goutt);
  padding-block:clamp(1.15rem,.9rem + 1.2vw,1.75rem);
  border-top:var(--f1) solid var(--trait);align-items:start}
.fr__l:first-child{border-top-width:var(--f2)}
@media (min-width:52rem){ .fr__l{grid-template-columns:11rem minmax(0,1fr)} }
.fr__date{display:flex;flex-direction:column;gap:.15rem}
.fr__an{font-size:var(--t-md);font-weight:500;letter-spacing:-.02em;
  color:var(--encre)}
.fr__lieu{font-family:var(--f-titre);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre-3)}
.fr__t{font-size:var(--t-md);text-transform:uppercase;letter-spacing:.005em;
  margin-bottom:var(--e-2);line-height:1.16}
.fr__c p{font-size:var(--t-sm);color:var(--encre-2);max-width:46rem}

/* ------------------------------------------------------- 20. PSYCHANALYSTE */
.pf{display:grid;gap:clamp(1.5rem,1rem + 3vw,3.5rem);align-items:start}
@media (min-width:56rem){ .pf{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)} }
.pf__txt p{max-width:var(--largeur-texte)}
.pf__txt p + p{margin-top:var(--e-5)}
/* Le marqueur « photographie provisoire » : encadré, sous le portrait, à
   l'endroit exact où l'œil arrive après avoir regardé le visage. Ce n'est
   pas Alain Cochard, et cela ne doit pas pouvoir s'oublier. */
.pf__prov{display:flex;align-items:flex-start;gap:.5rem;margin-top:var(--e-4);
  padding:.7rem .85rem;border:var(--f2) solid var(--noir);
  font-family:var(--f-titre);font-size:var(--t-xs);font-weight:500;
  line-height:1.5;color:var(--noir)}
.pf__prov strong{font-weight:700}
.pf__prov-ic{width:1.15em;height:1.15em;flex:none;margin-top:.15em}

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

/* --------------------------------------------------------------- 21. CONTACT */
.ct{display:grid;gap:clamp(1.75rem,1.2rem + 3vw,3.5rem)}
@media (min-width:56rem){ .ct{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ct__t{font-size:var(--t-md);text-transform:uppercase;letter-spacing:.06em;
  padding-bottom:var(--e-3);border-bottom:var(--f2) solid var(--trait);
  margin-bottom:var(--e-5)}
.ct__t--2{margin-top:var(--e-7)}
.ct__appel .tel-geant{margin-top:0;margin-bottom:var(--e-5)}
.ct__p{color:var(--encre-2);max-width:34rem;font-size:var(--t-sm)}
.ct__rappel{display:flex;align-items:flex-start;gap:.45rem;margin-top:var(--e-4);
  font-size:var(--t-sm);color:var(--encre-2)}
.ct__rappel svg{width:1.1em;height:1.1em;flex:none;margin-top:.2em}
.ct__addr{font-style:normal;line-height:1.75;font-size:var(--t-sm)}
.ct__addr .chiffre{color:var(--encre-3)}
.hor{display:grid;border-bottom:var(--f1) solid var(--trait)}
.hor__l{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;
  border-top:var(--f1) solid var(--trait);font-size:var(--t-sm)}
.hor__l:first-child{border-top-width:var(--f2)}
.hor__l--off{color:var(--encre-3)}
.hor dt{font-family:var(--f-titre);font-weight:500;letter-spacing:.04em}

.acces{display:grid;gap:clamp(1.5rem,1rem + 3vw,3rem);align-items:start}
@media (min-width:60rem){ .acces{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)} }
.modes{display:grid;border-bottom:var(--f1) solid var(--trait)}
.mode{display:flex;gap:var(--e-4);align-items:flex-start;padding-block:var(--e-4);
  border-top:var(--f1) solid var(--trait)}
.mode:first-child{border-top-width:var(--f2)}
.mode__ic{width:1.4rem;height:1.4rem;flex:none;margin-top:.1em}
.mode__c strong{display:block;font-family:var(--f-titre);font-size:var(--t-xs);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.mode__c span{display:block;margin-top:.2rem;font-size:var(--t-sm);
  color:var(--encre-2)}
.acces__it-t{margin-top:var(--e-6);font-family:var(--f-titre);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase}
.acces__note{margin-top:var(--e-5);font-size:var(--t-xs);color:var(--encre-3);
  max-width:34rem;line-height:1.65}

.form{display:grid;gap:var(--e-5);max-width:40rem}
.ch{display:grid;gap:.3rem}
.ch__l{font-family:var(--f-titre);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase}
.ch__req{margin-left:.25em}
.ch__aide{font-size:var(--t-xs);color:var(--encre-3)}
.ch__i{width:100%;padding:.8rem .9rem;background:var(--blanc);
  border:var(--f1) solid var(--noir);border-radius:0;
  font-family:var(--f-texte);font-size:var(--t-base);
  transition:box-shadow var(--transi)}
.ch__i:focus{outline:0;box-shadow:inset 0 0 0 2px var(--noir)}
.ch__i[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--noir)}
textarea.ch__i{resize:vertical;min-height:8rem}
.form__rgpd{font-size:var(--t-xs);color:var(--encre-3);max-width:36rem;
  line-height:1.65}
.form__act{margin-top:var(--e-2)}
/* Le retour du formulaire est en NÉGATIF : c'est le seul aplat noir de la
   section, impossible de le manquer — et il DIT qu'il n'a rien envoyé. */
.form__demo{background:var(--noir);color:var(--nuit-1);
  padding:clamp(1rem,.8rem + 1vw,1.4rem);font-size:var(--t-sm)}
.form__demo-t strong{color:#fff;font-family:var(--f-titre);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;font-size:var(--t-sm)}
.form__demo p + p{margin-top:.5rem}
.form__demo-note{margin-top:.9rem;padding-top:.75rem;
  border-top:var(--f1) solid var(--nuit-filet);
  font-size:var(--t-xs);color:var(--nuit-2)}

/* ---------------------------------------------------------------- 22. PIED */
.pied{padding-block:clamp(2.75rem,2rem + 3vw,4.5rem) var(--e-6)}
.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__nom{font-family:var(--f-titre);font-weight:700;font-size:var(--t-md);
  text-transform:uppercase;letter-spacing:.02em;color:#fff}
.pied__role{font-family:var(--f-titre);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--nuit-2);
  margin-top:.35rem}
.pied__adr{font-style:normal;margin-top:var(--e-5);line-height:1.8;
  font-size:var(--t-sm)}
.pied__adr a{color:#fff;font-weight:600}
.pied__sr{margin-top:var(--e-3);font-size:var(--t-xs);color:var(--nuit-2)}
.pied__t{font-family:var(--f-titre);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;
  padding-bottom:var(--e-3);border-bottom:var(--f1) solid var(--nuit-filet);
  margin-bottom:var(--e-4)}
.pied__liens{display:grid;gap:.5rem;font-size:var(--t-sm)}
.pied__liens a{text-decoration:none;color:var(--nuit-1)}
.pied__liens a:hover{color:#fff;text-decoration:underline;
  text-underline-offset:.18em}
.pied__legal{display:grid;gap:.7rem;font-size:var(--t-xs);color:var(--nuit-1);
  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.5vw,3rem);padding-top:var(--e-5);
  border-top:var(--f1) solid var(--nuit-filet);font-size:var(--t-xs);
  color:var(--nuit-2)}

/* -------------------------------------------------------- 23. BARRE TÉLÉPHONE */
/* La majorité des visites vient d'un téléphone, souvent le soir : le numéro
   reste à portée de pouce, en négatif, sans avoir à remonter la page. */
.barre-tel{display:none}
@media (max-width:47.99rem){
  .m7{--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:var(--blanc);border-top:var(--f2) solid var(--noir)}
  .barre-tel__a{display:flex;align-items:center;justify-content:center;gap:.5rem;
    min-height:2.9rem;background:var(--noir);color:#fff;text-decoration:none;
    font-family:var(--f-titre);font-weight:600;font-size:var(--t-xs);
    letter-spacing:.12em;text-transform:uppercase}
  .barre-tel__a svg{width:1.15em;height:1.15em}
  /* La barre est fixe : elle se pose PAR-DESSUS le bas de l'écran. Le premier
     écran lui réserve sa hauteur, sinon les deux boutons d'appel tombent
     dessous et ne se cliquent plus. */
  .ouv__in{padding-bottom:2rem}
  .portraits{gap:var(--e-3)}
}

@media print{
  .tete,.mm,.barre-tel,.appel{display:none}
  body.m7{background:#fff;color:#000}
  .sect--negatif{background:#fff !important;color:#000 !important}
  .sect--negatif h1,.sect--negatif h2,.sect--negatif h3,
  .sect--negatif h4,.sect--negatif strong{color:#000 !important}
  .js [data-anim]{opacity:1 !important;translate:none !important}
  .filet{scale:1 1 !important}
}