/* ==========================================================================
   MAQUETTE 03 — « LA PAROLE »
   Instrument Serif + Inter + IBM Plex Mono · encre sur papier, un rouge sourd.
   Mise en page de livre : marge, colonne étroite, vide à droite.
   Feuille unique, mobile d'abord, aucune dépendance.
   ========================================================================== */

/* ------------------------------------------------------------- 1. JETONS */
.m3{
  /* Le marqueur « à valider » vient de la feuille commune avec un angle
     arrondi. Cette maquette n'en veut aucun : on le remet à zéro ici
     plutôt que de redéclarer la règle entière. */
  --av-r: 0;
  --papier:#F4F1EA;
  --papier-2:#EBE7DC;        /* gris de papier : la seule autre valeur de fond */
  --encre:#171310;           /* 16,2:1 sur le papier */
  --encre-2:#5A5149;         /* 6,9:1 sur papier · 6,3:1 sur papier-2 */
  --encre-3:#675E54;         /* 5,6:1 sur papier · 5,1:1 sur papier-2 */
  --filet:#DCD5C6;
  --filet-2:#BFB6A3;
  --accent:#8C2F26;          /* 7,3:1 sur papier — donc utilisable en texte */
  --accent-fonce:#6E241D;
  /* Sur fond encré, le rouge sourd tombe à 2,2:1 : il n'y va jamais. Le bloc
     d'urgence se contente donc de papier et de deux gris clairs. */
  --clair:#EDE8DC;
  --clair-2:#A9A096;         /* 7,1:1 sur l'encre */
  --clair-3:#8E857A;         /* 5,0:1 sur l'encre */

  --f-titre:'Instrument Serif','Iowan Old Style',Georgia,'Times New Roman',serif;
  --f-texte:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-cote:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Du plus petit au plus grand corps : 11 px → 129 px sur un écran de
     1440. Le rapport de 1 à 12 EST l'effet recherché — il n'y a rien
     d'autre à regarder sur cette maquette. */
  --t-cote:clamp(.6875rem,.66rem + .12vw,.8125rem);
  --t-sm:clamp(.875rem,.85rem + .12vw,.9375rem);
  --t-base:clamp(1rem,.96rem + .2vw,1.0938rem);
  --t-md:clamp(1.0938rem,1.02rem + .32vw,1.3125rem);
  --t-3:clamp(1.375rem,1.2rem + .8vw,2rem);
  --t-2:clamp(2.125rem,1.35rem + 3.1vw,4.25rem);
  --t-1:clamp(2.75rem,1.6rem + 4.8vw,6rem);
  --t-geant:clamp(3.1rem,1.4rem + 7.4vw,9.5rem);

  --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.75rem,2rem + 7.5vw,9.5rem);
  --marge-page:clamp(1.25rem,.9rem + 3vw,4.5rem);
  --largeur:74rem;
  --colonne:33rem;           /* ≈ 62 signes : la mesure du livre */
  --tete-h:56px; --barre-h:0px;
  --transi:200ms cubic-bezier(.4,0,.2,1);
}
@media (min-width:64rem){ .m3{ --tete-h:64px } }

/* --------------------------------------------------------------- 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) + 1.5rem)}
body.m3{
  font-family:var(--f-texte); font-size:var(--t-base); line-height:1.68;
  color:var(--encre); background:var(--papier);
  -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%}
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%}
p{text-wrap:pretty}

/* Instrument Serif est un didone : ses déliés sont des cheveux. En dessous
   de 20 px il se casse à l'écran, et sous 4,5:1 il devient illisible avant
   même d'être petit. Il ne titre donc que, et jamais ne compose. */
.m3 h1,.m3 h2,.m3 h3,.m3 .serif{
  font-family:var(--f-titre); font-weight:400; line-height:1.06;
  letter-spacing:-.005em; text-wrap:balance;
  /* un titre géant coupé au milieu d'un mot est un débordement déguisé */
  overflow-wrap:break-word;
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:0}
.sect--encre :focus-visible,.urg :focus-visible,.barre-tel :focus-visible{
  outline-color:var(--papier)}
::selection{background:var(--encre);color:var(--papier)}
@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 */
.cadre{width:100%;max-width:var(--largeur);margin-inline:auto;
  padding-inline:var(--marge-page)}
.sect{padding-block:var(--sect-y)}
.sect--serree{padding-block:clamp(2.5rem,1.5rem + 4vw,5rem)}
.sect--gris{background:var(--papier-2)}
.sect__suite{margin-top:var(--e-6)}
.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}

/* La cote : le seul « surtitre » de la maquette. Monospace, capitales,
   très interlettré — une annotation d'imprimeur, pas un slogan. */
.cote{font-family:var(--f-cote);font-size:var(--t-cote);font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--encre-3);
  line-height:1.5}
.cote--accent{color:var(--accent)}
.folio{font-family:var(--f-cote);font-size:var(--t-cote);letter-spacing:.2em;
  color:var(--accent);margin-bottom:var(--e-5)}
.folio span{color:var(--filet-2);padding-inline:.25em}

.geant{font-size:var(--t-geant);line-height:.93;letter-spacing:-.02em;
  max-width:15ch}
.geant--page{font-size:var(--t-1);max-width:17ch}
.chapo{font-size:var(--t-md);color:var(--encre-2);max-width:var(--colonne);
  line-height:1.55}
.txt{max-width:var(--colonne)}
.txt + .txt{margin-top:1.15em}
.txt--large{font-size:var(--t-md);line-height:1.6}
.txt--note{color:var(--encre-2);font-size:var(--t-sm)}
.chapo + .txt,.chapo + .form,.chapo + .modes{margin-top:var(--e-6)}
/* <address> arrive en italique de la feuille du navigateur : ici on écrit
   une adresse, pas une citation. */
.adr__bloc{font-style:normal;line-height:1.8;max-width:var(--colonne)}

/* La lettrine. Elle n'orne pas : elle marque le début d'un chapitre, et
   c'est le seul endroit où le didone approche le texte courant. */
.txt--lettrine::first-letter{
  float:left;font-family:var(--f-titre);font-size:4.2em;line-height:.76;
  padding-right:.07em;margin-top:.04em;color:var(--encre)}

.filet{border:0;height:1px;background:var(--filet-2);width:100%;
  transform-origin:left center;scale:0 1;
  transition:scale 900ms cubic-bezier(.22,1,.36,1)}
.filet.est-visible{scale:1 1}
.filet--accent{background:var(--accent);height:2px;
  width:min(9rem,42%);margin-block:var(--e-5)}

/* Apparition : opacité et six pixels. Pas de rebond, pas d'échelle — le
   texte se pose, il n'arrive pas en courant. */
.js [data-anim]{opacity:0;translate:0 6px;
  transition:opacity 800ms ease,translate 800ms cubic-bezier(.22,1,.36,1)}
.js [data-anim].est-visible{opacity:1;translate:0 0}
.js [data-anim][data-delai="1"]{transition-delay:110ms}
.js [data-anim][data-delai="2"]{transition-delay:220ms}
.js [data-anim][data-delai="3"]{transition-delay:330ms}
@media (prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1 !important;translate:none !important}
  .filet{scale:1 1 !important}
}

/* ---------------------------------------------- 4. BOUTONS ET LIENS */
/* Rectangulaires, en monospace capitale. Un bouton arrondi ferait entrer
   dans cette maquette la seule forme qu'elle refuse. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:3rem;padding:.8rem 1.5rem;border-radius:0;
  background:var(--encre);color:var(--papier);border:1px solid var(--encre);
  font-family:var(--f-cote);font-size:var(--t-cote);letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;text-align:center;
  transition:background var(--transi),color var(--transi),
             border-color var(--transi);
}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn--nu{background:transparent;color:var(--encre);border-color:var(--filet-2)}
.btn--nu:hover{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn--sm{min-height:2.5rem;padding:.5rem 1rem}
.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{color:var(--encre);text-decoration:none;
  border-bottom:1px solid var(--filet-2);padding-bottom:2px;
  transition:color var(--transi),border-color var(--transi)}
.lien:hover{color:var(--accent);border-color:var(--accent)}
.lien-suite{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-cote);font-size:var(--t-cote);letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;color:var(--encre);
  border-bottom:1px solid var(--encre);padding-bottom:.35rem;
  transition:color var(--transi),border-color var(--transi),gap var(--transi)}
.lien-suite:hover{color:var(--accent);border-color:var(--accent);gap:.8rem}
.lien-suite svg{width:1.1em;height:1.1em;flex:none}

/* ------------------------------------------------------------ 5. EN-TÊTE */
/* Titre courant de livre. Il se colle SOUS la barre de comparaison : sans
   le décalage, les deux se superposeraient. */
.tete{position:sticky;top:var(--cmp-h,0px);z-index:80;background:var(--papier);
  border-bottom:1px solid transparent;transition:border-color var(--transi)}
.tete.est-collee{border-bottom-color:var(--filet-2)}
.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-size:1.25rem;
  letter-spacing:.005em}
.marque__role{display:block;font-family:var(--f-cote);font-size:var(--t-cote);
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre-3);margin-top:2px}
.nav{display:none;gap:clamp(1rem,2.2vw,2.2rem)}
.nav a{font-family:var(--f-cote);font-size:var(--t-cote);letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--encre-3);
  padding-block:.5rem;border-bottom:1px solid transparent;
  transition:color var(--transi),border-color var(--transi)}
.nav a:hover{color:var(--encre);border-bottom-color:var(--encre)}
.nav a[aria-current]{color:var(--accent);border-bottom-color:var(--accent)}
.tete__act{display:flex;align-items:center;gap:var(--e-4)}
.tete__tel{display:none;font-family:var(--f-cote);font-size:var(--t-cote);
  letter-spacing:.08em;text-decoration:none;color:var(--encre);
  border-bottom:1px solid var(--filet-2);padding-bottom:2px}
.tete__tel:hover{color:var(--accent);border-color:var(--accent)}
/* Déclaré AVANT la requête de média : posé après, le display:grid du bouton
   l'emporterait à spécificité égale et le burger resterait visible sur
   grand écran, à côté de la navigation complète. */
.burger{width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--filet-2);border-radius:0}
@media (min-width:64rem){
  .nav{display:flex} .tete__tel{display:inline-block} .burger{display:none}
}
.burger__l,.burger__l::before,.burger__l::after{
  content:"";display:block;width:18px;height:1px;background:var(--encre);
  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)}

.mm{position:fixed;inset:calc(var(--tete-h) + var(--cmp-h,0px)) 0 0;z-index:79;
  background:var(--papier);padding:var(--e-6) var(--marge-page) 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-2)}
.mm__liens a{display:flex;align-items:baseline;gap:1.1rem;padding:1rem 0;
  border-bottom:1px solid var(--filet);text-decoration:none}
.mm__n{font-family:var(--f-cote);font-size:var(--t-cote);color:var(--encre-3);
  letter-spacing:.1em;flex:none}
.mm__t{font-family:var(--f-titre);font-size:1.75rem;line-height:1.1}
.mm__liens a[aria-current] .mm__t{color:var(--accent)}
.mm__pied{margin-top:var(--e-7);display:grid;gap:var(--e-4);justify-items:start}
.mm__tel{font-family:var(--f-cote);font-size:var(--t-sm);letter-spacing:.08em;
  text-decoration:none;border-bottom:1px solid var(--filet-2);padding-bottom:2px}

/* ------------------------------------------------- 6. PAGE DE TITRE */
/* Pas d'image au premier écran : une couverture. Le titre occupe l'écran,
   le colophon se pose en bas comme au pied d'une page de garde. */
.titrage{min-height:calc(100svh - var(--tete-h) - var(--cmp-h,0px));
  display:flex;padding-block:clamp(2rem,5vw,4rem) clamp(1.5rem,3vw,2.5rem)}
.titrage__in{display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--e-7);width:100%}
.titrage__coeur{margin-block:auto;padding-block:clamp(1.5rem,4vw,3.5rem)}
.titrage__lieu{padding-bottom:var(--e-4);border-bottom:1px solid var(--filet-2)}
.titrage__c{margin-top:var(--e-5);font-size:var(--t-md);color:var(--encre-2);
  max-width:30rem;line-height:1.55}
.colophon{font-style:normal;font-family:var(--f-cote);font-size:var(--t-cote);
  letter-spacing:.06em;color:var(--encre-3);
  display:flex;flex-wrap:wrap;gap:.45rem 1.25rem;
  padding-top:var(--e-4);border-top:1px solid var(--filet-2)}
.colophon__l{display:inline-block}
.colophon__tel{color:var(--encre);text-decoration:none;
  border-bottom:1px solid var(--filet-2);padding-bottom:1px}
.colophon__tel:hover{color:var(--accent);border-color:var(--accent)}

/* Frontispice des pages intérieures : même dispositif, moitié moins haut. */
.front{padding-block:clamp(3rem,2rem + 5vw,7rem) clamp(2.5rem,1.5rem + 4vw,5rem)}
.front__in{max-width:56rem}
.front__chapo{margin-top:var(--e-5);font-size:var(--t-md);color:var(--encre-2);
  max-width:var(--colonne);line-height:1.55}
.front .cote{margin-bottom:var(--e-3)}
.front--duo{padding-bottom:clamp(2.5rem,1.5rem + 4vw,5rem)}
.livre__marge-front{grid-column:1;border-top:1px solid var(--encre);
  padding-top:var(--e-3)}
.livre__marge-front .folio{margin-bottom:var(--e-2)}

/* -------------------------------------------------- 7. LA GRILLE DE LIVRE */
/* Une marge de notes, une colonne de texte de 33 rem, et du vide. Le vide
   n'est pas une place perdue : c'est ce qui fait qu'on lit la colonne. */
.livre{display:grid;gap:var(--e-5)}
.livre__corps{max-width:var(--colonne)}
@media (min-width:64rem){
  .livre{grid-template-columns:11rem minmax(0,var(--colonne)) minmax(0,1fr);
    column-gap:clamp(2rem,3.5vw,4rem);row-gap:var(--e-6);align-items:start}
  .marge{grid-column:1;grid-row:1}
  .livre__t{grid-column:2 / -1;grid-row:1}
  .livre__corps{grid-column:2}
  .livre__corps--seul{grid-column:2;grid-row:1}
  .livre__cote{grid-column:3;grid-row:2;justify-self:start}
  .livre__corps--haut{grid-column:2;grid-row:1 / span 2}
}
.livre__t{font-size:var(--t-2);max-width:22ch}
.livre__t--petit{font-size:var(--t-3);max-width:24ch}
/* Le titre de /le-psychanalyste/ occupe la place d'un h1 tout en tenant la
   colonne de titre : sans ce rappel, .livre__t le ramènerait au corps des h2. */
.livre__t.geant--page{font-size:var(--t-1);max-width:17ch}
.livre__corps > * + *{margin-top:var(--e-5)}
.livre__corps > .txt + .txt{margin-top:1.15em}

/* La note en marge. Un filet d'imprimeur au-dessus, la cote en rouge. */
.marge{font-family:var(--f-cote);font-size:var(--t-cote);letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre-3);line-height:1.6;
  border-top:1px solid var(--encre);padding-top:var(--e-3);max-width:20rem}
.marge__n{display:block;color:var(--accent);margin-bottom:.35rem}
.marge__t{display:block}

/* --------------------------------------------- 8. ENTRÉES DE DICTIONNAIRE */
/* Une cote, un titre, un paragraphe, un filet. Aucune boîte : ce qui sépare
   deux entrées est un trait, comme dans n'importe quel dictionnaire. */
.index{border-top:1px solid var(--encre);margin-top:clamp(1.5rem,3vw,2.5rem)}
.index__e{display:grid;gap:.4rem;padding-block:clamp(1.4rem,2.6vw,2.2rem);
  border-bottom:1px solid var(--filet)}
.index__n{font-family:var(--f-cote);font-size:var(--t-cote);letter-spacing:.16em;
  color:var(--accent)}
.index__t{font-size:var(--t-3);max-width:30ch}
.index__c{color:var(--encre-2);max-width:var(--colonne)}
@media (min-width:56rem){
  .index__e{grid-template-columns:5rem minmax(0,var(--colonne)) minmax(0,1fr);
    column-gap:clamp(1.5rem,3vw,3.5rem)}
  .index__n{grid-column:1;grid-row:1 / span 2;padding-top:.5em}
  .index__t{grid-column:2;grid-row:1}
  .index__c{grid-column:2;grid-row:2;margin-top:.35rem}
}
/* Variante « à deux colonnes » : le titre reste court à gauche, le texte
   garde ses 33 rem à droite. Sans la colonne de titre resserrée, le texte
   tombait à 44 signes — trop court pour être lu confortablement. */
@media (min-width:56rem){
  .index--large .index__e{
    grid-template-columns:5rem minmax(0,15rem) minmax(0,var(--colonne))}
  .index--large .index__t{grid-column:2;max-width:none}
  .index--large .index__c{grid-column:3;grid-row:1 / span 2;margin-top:.5em}
}
@media (min-width:70rem){
  .index--duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(2rem,4vw,4.5rem)}
  .index--duo .index__e{grid-template-columns:3.5rem minmax(0,1fr)}
  .index--duo .index__c{grid-column:2;grid-row:2}
}

/* --------------------------------------------------- 9. LES TROIS PUBLICS */
/* Un sommaire, pas trois cartes : on lit une liste d'entrées, chacune
   introduite par son numéro, chacune close par un filet. */
.pubs{border-top:1px solid var(--encre);margin-top:clamp(2rem,4vw,3.5rem)}
.pub{border-bottom:1px solid var(--filet)}
.pub__a{display:grid;gap:.5rem 2rem;padding-block:clamp(1.6rem,3vw,2.6rem);
  text-decoration:none;transition:background var(--transi)}
.pub__n{font-family:var(--f-cote);font-size:var(--t-cote);letter-spacing:.18em;
  color:var(--accent);padding-top:.6em}
.pub__t{display:block;font-family:var(--f-titre);font-size:var(--t-2);
  line-height:1.02;letter-spacing:-.01em;transition:color var(--transi)}
.pub__sur{display:block;font-family:var(--f-cote);font-size:var(--t-cote);
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre-3);
  margin-top:.6rem}
.pub__c{display:block;color:var(--encre-2);max-width:var(--colonne);
  margin-top:var(--e-4)}
.pub__go{display:inline-flex;align-items:center;gap:.45rem;margin-top:var(--e-4);
  font-family:var(--f-cote);font-size:var(--t-cote);letter-spacing:.13em;
  text-transform:uppercase;color:var(--encre)}
.pub__go svg{width:1.05em;height:1.05em;transition:translate var(--transi)}
.pub__a:hover .pub__t{color:var(--accent)}
.pub__a:hover .pub__go{color:var(--accent)}
.pub__a:hover .pub__go svg{translate:5px 0}
@media (min-width:56rem){
  .pub__a{grid-template-columns:5rem minmax(0,1fr)}
  .pub__corps{display:block}
}

/* ------------------------------------------------------- 10. SOMMAIRE ANCRÉ */
/* /consulter/ n'a pas d'onglets : la page entière est lisible d'un bout à
   l'autre, et ceci en donne l'entrée — avec ses points de conduite. */
.somm__l{border-top:1px solid var(--encre)}
.somm__a{display:flex;align-items:baseline;gap:.9rem;text-decoration:none;
  padding-block:.85rem;border-bottom:1px solid var(--filet);
  transition:color var(--transi)}
.somm__n{font-family:var(--f-cote);font-size:var(--t-cote);letter-spacing:.16em;
  color:var(--accent);flex:none}
.somm__t{font-family:var(--f-titre);font-size:var(--t-3);line-height:1.15}
/* Le point de conduite s'aligne sur la PREMIÈRE ligne. Sur téléphone, où
   la moitié des entrées passent sur deux lignes, il pendrait dans le vide :
   on le retire plutôt que de le laisser mentir. */
.somm__f{display:none}
@media (min-width:48rem){
  .somm__f{display:block;flex:1 1 auto;min-width:1.5rem;height:0;
    border-bottom:1px dotted var(--filet-2);translate:0 -.22em}
}
.somm__a:hover{color:var(--accent)}
.somm__a:hover .somm__f{border-bottom-color:var(--accent)}

/* ------------------------------------------------------------ 11. ENCART */
/* « Et les parents ? » : un hors-texte. Un filet épais à gauche suffit à le
   détacher — un fond coloré en ferait une boîte. */
.encart{max-width:44rem;margin-top:clamp(2rem,4vw,3.25rem);
  border-left:2px solid var(--accent);padding-left:clamp(1.1rem,2.5vw,2rem)}
.encart__t{font-size:var(--t-3);margin-bottom:var(--e-4)}
.encart__p{color:var(--encre-2);max-width:var(--colonne)}
.encart__p + .encart__p{margin-top:1.1em}

/* ------------------------------------------------- 12. QUESTIONS / RÉPONSES */
/* Rien à déplier : la question est composée en italique de didone, la
   réponse en Inter. Un accordéon cacherait la moitié de ce qui rassure. */
.qrs{display:grid;gap:0;border-top:1px solid var(--encre);
  margin-top:clamp(1.5rem,3vw,2.5rem)}
.qr{padding-block:clamp(1.4rem,2.6vw,2.2rem);border-bottom:1px solid var(--filet)}
.qr__q{font-size:var(--t-3);font-style:italic;max-width:26ch;color:var(--encre)}
.qr__r{margin-top:var(--e-4);color:var(--encre-2);max-width:var(--colonne)}
@media (min-width:64rem){
  .qr{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,var(--colonne));
    column-gap:clamp(2rem,4vw,4.5rem);align-items:start}
  .qr__r{margin-top:.35em}
}

/* ------------------------------------------------------------- 13. TARIFS */
.tar__bloc{margin-top:clamp(1.5rem,3vw,2.5rem)}
.tar{max-width:44rem}
.tar th,.tar td{text-align:left;padding:.95rem .5rem;
  border-bottom:1px solid var(--filet);vertical-align:baseline}
.tar thead th{font-family:var(--f-cote);font-size:var(--t-cote);font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--encre-3);
  border-bottom:1px solid var(--encre)}
.tar tbody th{font-weight:500;padding-left:0}
.tar__note{display:block;font-weight:400;font-size:var(--t-cote);
  color:var(--encre-3);margin-top:.25rem;font-family:var(--f-cote);
  letter-spacing:.02em;line-height:1.5}
.tar__duree,.tar__prix{font-family:var(--f-cote);font-size:var(--t-sm);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tar__duree{color:var(--encre-2)}
.tar__prix{text-align:right;padding-right:0;color:var(--encre)}
.tar thead th:last-child{text-align:right;padding-right:0}
.tar__mentions{margin-top:var(--e-5);display:grid;gap:.5rem;
  font-size:var(--t-sm);color:var(--encre-2);max-width:42rem}
.tar__mentions li{padding-left:1.4em;position:relative}
.tar__mentions li::before{content:"—";position:absolute;left:0;color:var(--accent)}

/* ------------------------------------------------- 14. FICHES « QUEL PSY » */
.fiches{display:grid;gap:0;border-top:1px solid var(--encre);
  margin-top:clamp(1.5rem,3vw,2.5rem)}
.fiche{padding-block:clamp(1.5rem,3vw,2.4rem);border-bottom:1px solid var(--filet)}
.fiche__n{font-family:var(--f-cote);font-size:var(--t-cote);letter-spacing:.16em;
  color:var(--accent);margin-bottom:.5rem}
.fiche__t{font-size:var(--t-3)}
.fiche__r{margin-top:.5rem;font-family:var(--f-titre);font-style:italic;
  font-size:var(--t-md);line-height:1.3;color:var(--encre-2);max-width:24ch}
.fiche__c{margin-top:var(--e-4);color:var(--encre-2);max-width:var(--colonne)}
@media (min-width:64rem){
  .fiche{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,var(--colonne));
    column-gap:clamp(2rem,4vw,4.5rem);align-items:start}
  .fiche__c{margin-top:.35em}
}

/* -------------------------------------------------------- 15. LES LECTURES */
.lecs{display:grid;gap:clamp(2rem,4vw,3.5rem);
  margin-top:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:62rem){ .lecs{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* Ces trois intertitres sont des h2/h3 qui doivent rester en monospace : le
   sélecteur `.m3 h3` les rattraperait sinon et les repasserait en didone. */
.m3 .lec__t{font-family:var(--f-cote);font-size:var(--t-cote);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--encre-3);
  line-height:1.5;padding-bottom:var(--e-3);border-bottom:1px solid var(--encre)}
.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-md);
  line-height:1.2}
.lec__auteur{display:block;font-family:var(--f-cote);font-size:var(--t-cote);
  letter-spacing:.06em;color:var(--accent);margin-top:.3rem}
.lec__note{display:block;font-size:var(--t-sm);color:var(--encre-2);
  margin-top:.5rem}

/* ------------------------------------------------------------ 16. HISTOIRE */
/* La citation ouvre la page : c'est le seul endroit du site où le didone
   passe en italique et occupe toute la largeur. */
/* La mesure se pose sur le paragraphe TITRÉ, pas sur le blockquote : un
   `ch` se calcule sur la police de l'élément qui le porte, et sur le
   blockquote c'était le corps de texte — la citation tombait à neuf lignes
   d'un mot. */
.cit{margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.cit__t{font-family:var(--f-titre);font-style:italic;font-size:var(--t-1);
  line-height:1.0;letter-spacing:-.015em;text-wrap:balance;
  max-width:min(38rem,100%)}
.cit__s{margin-top:var(--e-5);font-family:var(--f-cote);font-size:var(--t-cote);
  letter-spacing:.16em;text-transform:uppercase;color:var(--encre-3);
  padding-top:var(--e-3);border-top:1px solid var(--filet-2);
  display:inline-block}

/* La frise : un index. La date en marge, en monospace ; le texte en
   colonne. Ni pastille, ni ligne verticale — ce n'est pas un métro. */
.fr{border-top:1px solid var(--encre);margin-top:clamp(1.5rem,3vw,2.5rem)}
.fr__e{display:grid;gap:.4rem;padding-block:clamp(1.4rem,2.6vw,2.2rem);
  border-bottom:1px solid var(--filet)}
.fr__date{font-family:var(--f-cote);font-size:var(--t-sm);font-weight:500;
  letter-spacing:.04em;color:var(--encre);font-variant-numeric:tabular-nums}
.fr__lieu{display:block;font-size:var(--t-cote);letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre-3);font-weight:400;margin-top:.3rem}
.fr__t{font-size:var(--t-3);max-width:24ch}
.fr__c{color:var(--encre-2);max-width:var(--colonne)}
@media (min-width:56rem){
  .fr__e{grid-template-columns:9rem minmax(0,16rem) minmax(0,var(--colonne));
    column-gap:clamp(1.5rem,3vw,3.5rem);align-items:start}
  .fr__date{grid-column:1;padding-top:.35em}
  .fr__t{grid-column:2}
  .fr__c{grid-column:3}
}

.mots{display:grid;gap:clamp(1.75rem,3.5vw,3rem);
  margin-top:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:52rem){ .mots{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:72rem){ .mots{grid-template-columns:repeat(3,minmax(0,1fr))} }
.mot{border-top:1px solid var(--encre);padding-top:var(--e-4)}
.mot__t{font-size:var(--t-3)}
.mot__c{margin-top:var(--e-3);color:var(--encre-2);font-size:var(--t-sm)}

/* -------------------------------------------------------- 17. LES VIGNETTES */
/* Cinq images sur six pages. Petites, en noir et blanc, jamais en fond,
   jamais en pleine largeur : ce site parle, il n'illustre pas. */
.vign{max-width:17rem}
.vign picture{filter:grayscale(1) contrast(1.04);background:var(--papier-2)}
.vign img{border-radius:0}
.vign figcaption{margin-top:var(--e-3);padding-top:var(--e-2);
  border-top:1px solid var(--filet-2);
  font-family:var(--f-cote);font-size:var(--t-cote);line-height:1.55;
  color:var(--encre-3)}
.vign__cr{display:block;margin-top:.35rem;color:var(--encre-3)}
@media (max-width:63.99rem){ .vign{max-width:14rem} }

/* Le marqueur de photographie provisoire. Il doit rester le premier chose
   qu'on voit sous ce portrait : ce n'est pas Alain Cochard. */
.vign--prov figcaption.prov{display:flex;gap:.45rem;align-items:flex-start;
  color:var(--accent);border-top-color:var(--accent);font-weight:500}
.prov__ic{width:1.1em;height:1.1em;flex:none;margin-top:.15em}

/* ------------------------------------------------------------- 18. LE PLAN */
/* Le plan est un SVG sans aucune couleur en dur. Ici il se règle comme une
   gravure : deux valeurs de gris sur le papier, un trait d'un demi-point
   sur chaque îlot, les rues creusées en réserve, et le seul rouge de la
   page sur le point du cabinet. */
.plan-large{margin-top:clamp(2rem,4vw,3.5rem)}
.plan{width:100%;height:auto;display:block;
  border-top:1px solid var(--encre);border-bottom:1px solid var(--encre)}
.plan__fond{fill:#F4F1EA}
.plan__bati{fill:#E1DBC9;stroke:#C7BDA6;stroke-width:.45}
.plan__vert{fill:#E8E3D2}
.plan__eau{fill:#D7D2C2;stroke:#D7D2C2;stroke-width:3}
.plan__voie{stroke:#F7F4EE}
.plan__voie--majeure{stroke:#FDFCF9}
.plan__voie--pieton{stroke:#EDE8DB}
.plan__tram{stroke:#171310;stroke-width:.9;stroke-dasharray:5 4;opacity:.5}
.plan__libelle text{fill:#6B6357;font:400 10px var(--f-cote);letter-spacing:.04em}
.plan__halo{fill:#8C2F26;opacity:.1}
.plan__halo--2{opacity:.16}
.plan__point{fill:#8C2F26}
.plan__oeil{fill:#F4F1EA}
.plan__ici{fill:#171310;font:500 13px var(--f-cote);letter-spacing:.1em}
.plan__echelle path{stroke:#171310;stroke-width:1;fill:none}
.plan__echelle text,.plan__nord text{fill:#171310;font:400 10px var(--f-cote);
  letter-spacing:.1em}
.plan__nord path{fill:#171310}
.plan__credit{fill:#7C7466;font:400 9px var(--f-cote);letter-spacing:.04em}

/* ------------------------------------------------------------- 19. URGENCE */
/* Le seul bloc encré. Pas de rouge : sur ce fond il n'atteindrait pas
   3:1, et ces numéros doivent se lire dans n'importe quel état. */
.urg{background:var(--encre);color:var(--clair-2);
  padding-block:clamp(3rem,5vw,5rem)}
.urg__in{display:grid;gap:clamp(1.75rem,3.5vw,3.5rem)}
@media (min-width:64rem){
  .urg__in{grid-template-columns:minmax(0,20rem) minmax(0,1fr);
    column-gap:clamp(2rem,4vw,5rem)}
}
.urg__t{font-size:var(--t-2);color:var(--clair);max-width:14ch}
.urg__chapo{margin-top:var(--e-4);font-size:var(--t-sm);color:var(--clair-3);
  max-width:32rem}
.urg__l{display:grid;gap:0;border-top:1px solid rgba(244,241,234,.28)}
.urg__e{display:grid;gap:.2rem .5rem;padding-block:var(--e-4);
  border-bottom:1px solid rgba(244,241,234,.14)}
/* « 09 72 39 40 50 » ne se coupe pas : un numéro d'urgence sur deux lignes
   se recompose mal de tête. */
.urg__num{font-family:var(--f-cote);font-size:var(--t-md);font-weight:500;
  color:var(--clair);letter-spacing:.04em;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.urg__q{display:block;color:var(--clair);font-weight:500;font-size:var(--t-sm)}
.urg__r{display:block;font-size:var(--t-sm);color:var(--clair-2);max-width:42rem}
@media (min-width:40rem){
  .urg__e{grid-template-columns:12rem minmax(0,1fr);
    column-gap:clamp(1rem,2.5vw,2.5rem);align-items:baseline}
}

/* --------------------------------------------------------- 20. APPEL FINAL */
.appel{background:var(--papier-2);padding-block:clamp(3.5rem,6vw,7rem);
  border-top:1px solid var(--filet-2)}
.appel__in{max-width:52rem}
.appel__t{font-size:var(--t-2);margin-top:var(--e-4);max-width:16ch}
.appel__tel{display:inline-block;margin-top:clamp(1.5rem,3vw,2.5rem);
  font-family:var(--f-titre);font-size:var(--t-1);line-height:1;
  letter-spacing:-.01em;color:var(--encre);text-decoration:none;
  border-bottom:2px solid var(--filet-2);padding-bottom:.1em;
  overflow-wrap:break-word;transition:color var(--transi),border-color var(--transi)}
.appel__tel:hover{color:var(--accent);border-bottom-color:var(--accent)}
.appel__c{margin-top:var(--e-6);color:var(--encre-2);max-width:32rem}
.appel__adr{margin-top:var(--e-4);font-family:var(--f-cote);
  font-size:var(--t-cote);letter-spacing:.06em;color:var(--encre-3);
  max-width:40rem;line-height:1.7}
.appel__go{margin-top:var(--e-6)}

/* -------------------------------------------------------------- 21. CONTACT */
.appel__tel--seul{margin-top:0}
.m3 .ct__t{font-family:var(--f-cote);font-size:var(--t-cote);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--encre-3);
  line-height:1.5;padding-bottom:var(--e-3);border-bottom:1px solid var(--encre)}
.ct__adr{max-width:20rem}
.ct__addr{font-style:normal;margin-top:var(--e-4);line-height:1.8;
  font-size:var(--t-sm)}
.ct__q{font-family:var(--f-cote);font-size:var(--t-cote);color:var(--encre-3);
  letter-spacing:.06em}

.hor{display:grid;gap:0;border-top:1px solid var(--encre);max-width:26rem}
.hor__e{display:flex;justify-content:space-between;gap:1rem;padding-block:.55rem;
  border-bottom:1px solid var(--filet);font-size:var(--t-sm)}
.hor dt{font-weight:500}
.hor dd{font-family:var(--f-cote);font-size:var(--t-sm);letter-spacing:.02em;
  color:var(--encre-2);font-variant-numeric:tabular-nums}
.hor__e--off dt,.hor__e--off dd{color:var(--encre-3);font-weight:400}

.modes{display:grid;gap:0;border-top:1px solid var(--encre)}
.mode{display:grid;gap:.2rem .5rem;padding-block:.85rem;
  border-bottom:1px solid var(--filet)}
.mode__k{font-family:var(--f-cote);font-size:var(--t-cote);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.mode__v{font-size:var(--t-sm);color:var(--encre-2)}
@media (min-width:34rem){
  .mode{grid-template-columns:7rem minmax(0,1fr);align-items:baseline}
}
.acces__it-t{margin-top:var(--e-6)}
.acces__note{margin-top:var(--e-5);font-size:var(--t-cote);color:var(--encre-3);
  max-width:32rem;line-height:1.7}

/* Le formulaire n'a pas de boîtes : des lignes. Une ligne à remplir est la
   forme la plus ancienne d'un formulaire, et la plus lisible. */
.form{display:grid;gap:var(--e-6);margin-top:var(--e-6);max-width:var(--colonne)}
.ch{display:grid;gap:.3rem}
.ch__l{font-family:var(--f-cote);font-size:var(--t-cote);letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre-3)}
.ch__req{color:var(--accent);margin-left:.3em}
.ch__aide{font-size:var(--t-sm);color:var(--encre-2)}
.ch__i{width:100%;padding:.55rem 0;background:transparent;border:0;
  border-bottom:1px solid var(--filet-2);border-radius:0;
  font-size:var(--t-base);color:var(--encre);
  transition:border-color var(--transi)}
.ch__i:hover{border-bottom-color:var(--encre-3)}
.ch__i:focus{outline:2px solid var(--accent);outline-offset:4px;
  border-bottom-color:var(--accent)}
select.ch__i{padding-block:.5rem}
textarea.ch__i{resize:vertical;min-height:6rem;
  border:1px solid var(--filet-2);padding:.7rem .8rem}
.ch__i[aria-invalid="true"]{border-bottom-color:var(--accent);
  border-bottom-width:2px}
.form__rgpd{font-size:var(--t-cote);color:var(--encre-3);line-height:1.7}
.form__act{margin-top:var(--e-1)}
.form__demo{padding:.9rem 1.1rem;background:var(--papier);
  border-left:2px solid var(--accent);font-size:var(--t-sm);color:var(--encre-2)}
.sect--gris .form__demo{background:var(--papier)}
.form__demo strong{display:block;color:var(--encre);margin-bottom:.2rem}
.form__demo-tech{display:block;margin-top:.5rem;font-family:var(--f-cote);
  font-size:var(--t-cote);color:var(--encre-3);line-height:1.6}

/* ------------------------------------------------------- 22. PSYCHANALYSTE */
.parc{display:grid;gap:0;border-top:1px solid var(--encre);max-width:56rem;
  margin-top:clamp(1.5rem,3vw,2.5rem)}
.parc__e{display:grid;gap:.2rem 2rem;padding-block:1rem;
  border-bottom:1px solid var(--filet)}
@media (min-width:44rem){ .parc__e{grid-template-columns:16rem minmax(0,1fr);
  align-items:baseline} }
.parc__k{font-family:var(--f-cote);font-size:var(--t-cote);letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre)}
.parc__v{color:var(--encre-3);font-style:italic;font-size:var(--t-sm)}

/* ---------------------------------------------------------------- 23. PIED */
.pied{border-top:1px solid var(--encre);padding-block:clamp(2.5rem,5vw,4.5rem) var(--e-6)}
.pied__in{display:grid;gap:clamp(1.75rem,4vw,3.5rem)}
@media (min-width:56rem){ .pied__in{grid-template-columns:1.05fr .7fr 1.25fr} }
.pied__nom{font-family:var(--f-titre);font-size:1.5rem;line-height:1.1}
.pied__role{font-family:var(--f-cote);font-size:var(--t-cote);letter-spacing:.12em;
  text-transform:uppercase;color:var(--encre-3);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:var(--encre);text-decoration:none;
  border-bottom:1px solid var(--filet-2)}
.pied__adr a:hover{color:var(--accent);border-color:var(--accent)}
.pied__sr{margin-top:var(--e-3);font-family:var(--f-cote);font-size:var(--t-cote);
  color:var(--encre-3);letter-spacing:.06em}
.m3 .pied__t{font-family:var(--f-cote);font-size:var(--t-cote);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--encre-3);
  line-height:1.5;padding-bottom:var(--e-3);border-bottom:1px solid var(--filet-2);
  margin-bottom:var(--e-4)}
.pied__liens{display:grid;gap:.5rem;font-size:var(--t-sm)}
.pied__liens a{text-decoration:none;color:var(--encre-2)}
.pied__liens a:hover{color:var(--accent)}
.pied__legal{display:grid;gap:.7rem;font-size:var(--t-cote);color:var(--encre-3);
  line-height:1.75;max-width:36rem}
.pied__bas{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(2rem,4vw,3.5rem);padding-top:var(--e-4);
  border-top:1px solid var(--filet-2);font-family:var(--f-cote);
  font-size:var(--t-cote);color:var(--encre-3);letter-spacing:.04em}

/* ------------------------------------------------------ 24. BARRE TÉLÉPHONE */
.barre-tel{display:none}
@media (max-width:47.99rem){
  .m3{--barre-h:60px}
  .barre-tel{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--encre);
    padding-bottom:env(safe-area-inset-bottom)}
  .barre-tel__a{display:flex;align-items:center;justify-content:center;gap:.55rem;
    min-height:60px;color:var(--papier);text-decoration:none;
    font-family:var(--f-cote);font-size:var(--t-cote);letter-spacing:.13em;
    text-transform:uppercase}
  .barre-tel__a svg{width:1.15em;height:1.15em}
}

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