/* =========================================================================
   Hadassa Aïem · thérapie de couple, Montmorency
   Système de design. Un seul fichier, aucune dépendance.
   ========================================================================= */

/* ---------- 0. Polices, copiées en local ----------
   Fraunces et Inter, sous licence SIL Open Font License 1.1.
   Le texte des licences est dans /assets/polices/ et cité en pied de page.
   Aucune requête ne part vers un fournisseur extérieur : les fichiers sont
   servis par ce site, et l'adresse IP de la visiteuse ne va nulle part.
   Les trois fichiers sont des polices variables : un seul fichier couvre
   toutes les graisses, ce qui évite d'en charger plusieurs. */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/polices/fraunces.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/polices/fraunces-italique.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/polices/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Jetons ---------- */
:root {
  /* Encres et papiers : un blanc chaud, une encre verte plutôt que noire.
     Le noir pur est dur ; sur un site de thérapie il fait clinique. */
  --papier:        #F8F4EC;
  --papier-creux:  #EFE8DA;
  --papier-carte:  #FDFBF6;
  --encre:         #2A2320;
  --encre-douce:   #574C45;
  --encre-tenue:   #8A7D73;
  --trait:         #E2D8C7;
  --trait-fort:    #C8BBA5;

  /* Accents : une argile et une sauge. Chaudes, adultes, jamais pastel. */
  --argile:        #2F5D7A;
  --argile-sombre: #22465C;
  --argile-voile:  #DDE7EE;
  --sauge:         #9C6B3F;
  --sauge-voile:   #F0E4D5;

  /* Les deux familles, nommees. Le serif porte les titres, la sans le reste. */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Typographie fluide : tout respire entre 360px et 1400px de large. */
  --t-micro:  0.75rem;
  --t-petit:  0.875rem;
  --t-base:   clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-lead:   clamp(1.125rem, 1.05rem + 0.36vw, 1.3125rem);
  --t-h4:     clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --t-h3:     clamp(1.375rem, 1.24rem + 0.66vw, 1.75rem);
  --t-h2:     clamp(1.75rem, 1.44rem + 1.5vw, 2.75rem);
  --t-h1:     clamp(2.25rem, 1.7rem + 2.7vw, 4rem);
  --t-geant:  clamp(2.75rem, 1.9rem + 4.2vw, 5.25rem);

  /* Rythme vertical */
  --e-1: 0.5rem;  --e-2: 0.75rem; --e-3: 1rem;   --e-4: 1.5rem;
  --e-5: 2rem;    --e-6: 3rem;    --e-7: 4rem;   --e-8: 6rem;
  /* 136 px en haut et en bas faisaient 272 px entre deux sections : correct
     en typographie éditoriale, trop aéré ici. Ramené à 104 px. */
  --section: clamp(3.25rem, 2.3rem + 4.4vw, 6.5rem);

  --largeur:  1240px;
  --lecture:  68ch;

  --rond-s: 6px; --rond: 14px; --rond-l: 24px; --rond-xl: 32px;

  --ombre-basse: 0 1px 2px rgba(42,35,32,.04), 0 4px 14px -6px rgba(42,35,32,.07);
  --ombre:       0 2px 4px rgba(42,35,32,.03), 0 14px 40px -18px rgba(42,35,32,.16);
  --ombre-haute: 0 4px 8px rgba(42,35,32,.04), 0 30px 70px -30px rgba(42,35,32,.26);

  /* Une seule courbe pour tout le site : c'est ce qui fait qu'un site
     « a l'air d'avoir un auteur » plutôt que d'être assemblé. */
  --sortie:  cubic-bezier(.22, 1, .36, 1);
  --entree:  cubic-bezier(.4, 0, .2, 1);
  --doux:    cubic-bezier(.34, .8, .24, 1);
}

/* ---------- 2. Fondations ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.72;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.menu-ouvert { overflow: hidden; }

h1, h2, h3, h4, .serif {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 40;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
  color: var(--encre);
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); line-height: 1.16; }
h3 { font-size: var(--t-h3); line-height: 1.22; }
h4 { font-size: var(--t-h4); line-height: 1.3; }
p  { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a  { color: inherit; }
img, svg, video { max-width: 100%; height: auto; display: block; }
strong { font-weight: 600; }
em { font-style: italic; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.35em; }
li { margin-bottom: .45em; }
li::marker { color: var(--argile); }
hr { border: 0; border-top: 1px solid var(--trait); margin: var(--e-6) 0; }

::selection { background: var(--argile-voile); color: var(--argile-sombre); }

:focus-visible {
  outline: 2px solid var(--argile);
  outline-offset: 3px;
  border-radius: var(--rond-s);
}

.saut-contenu {
  position: absolute; left: 50%; transform: translate(-50%, -150%);
  z-index: 200; background: var(--encre); color: var(--papier);
  padding: .8rem 1.4rem; border-radius: 0 0 var(--rond) var(--rond);
  font-size: var(--t-petit); text-decoration: none;
  transition: transform .3s var(--sortie);
}
.saut-contenu:focus { transform: translate(-50%, 0); }

/* ---------- 3. Grille ---------- */
.enveloppe {
  width: min(100% - 2.5rem, var(--largeur));
  margin-inline: auto;
}
@media (min-width: 700px) { .enveloppe { width: min(100% - 5rem, var(--largeur)); } }
.etroit  { width: min(100%, 760px); margin-inline: auto; }
.lecture { max-width: var(--lecture); }
.section { padding-block: var(--section); }
.section--creuse { background: var(--papier-creux); }
.section--encre  { background: var(--encre); color: var(--papier); }
.section--encre h1, .section--encre h2, .section--encre h3, .section--encre h4 { color: var(--papier); }

/* ---------- 4. Micro-typographie ---------- */
/* Les étiquettes de section reprennent la géométrie des capsules du héros.
   Deux teintes, une seule forme : neutre pour les informations factuelles
   (adresse, métro), argile pour les intitulés de section. */
.surtitre {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .95rem;
  border: 1px solid transparent; border-radius: 100px;
  background: var(--argile-voile); color: var(--argile-sombre);
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 var(--e-4);
  /* Dans une carte, qui est une grille, l'étiquette était étirée sur toute
     la largeur : une capsule doit épouser son texte. */
  justify-self: start; width: fit-content; max-width: 100%;
  text-align: center; line-height: 1.35;
}
/* Sur fond sombre, le voile argile disparaîtrait : on repasse en translucide. */
.section--encre .surtitre {
  background: rgba(110, 155, 184, .14);
  border-color: rgba(110, 155, 184, .3);
  color: #8FB4CB;
}
/* Sur les fonds crème des cartes, une bordure rend la capsule lisible. */
.carte .surtitre, .tarif .surtitre, .motif__titre .surtitre {
  background: transparent; border-color: #D3E0E9;
}

.chapo {
  font-size: var(--t-lead); line-height: 1.62; color: var(--encre-douce);
  max-width: 60ch;
}
.section--encre .chapo { color: rgba(248,244,236,.74); }

.legende { font-size: var(--t-petit); color: var(--encre-tenue); line-height: 1.6; }

/* Lettrine : sur les articles longs, elle signe la page. */
.lettrine::first-letter {
  float: left; font-family: 'Fraunces', Georgia, serif;
  font-size: 3.5em; line-height: .82; font-weight: 400;
  padding: .06em .1em 0 0; color: var(--argile);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
}

/* Le trait manuscrit sous un mot : dessiné au chargement. */
.souligne { position: relative; white-space: nowrap; }
.souligne svg {
  position: absolute; left: -2%; bottom: -.34em; width: 104%; height: .5em;
  overflow: visible; pointer-events: none;
}
.souligne path {
  fill: none; stroke: var(--argile); stroke-width: 5; stroke-linecap: round;
  opacity: .58;
  stroke-dasharray: var(--long, 300); stroke-dashoffset: var(--long, 300);
}
.souligne.trace path { animation: tracer 1.1s var(--sortie) forwards; }
@keyframes tracer { to { stroke-dashoffset: 0; } }

.italique-note { font-style: italic; color: var(--encre-douce); }

/* ---------- 5. Boutons ---------- */
.bouton {
  --fond: var(--encre); --texte: var(--papier);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.6rem; border-radius: 100px;
  background: var(--fond); color: var(--texte);
  font-size: var(--t-petit); font-weight: 500; letter-spacing: .01em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .45s var(--sortie), box-shadow .45s var(--sortie), color .3s;
  will-change: transform;
}
.bouton::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--argile);
  transform: translateY(101%); transition: transform .5s var(--sortie);
}
.bouton:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.bouton:hover::before { transform: translateY(0); }
.bouton:active { transform: translateY(0); }
.bouton .fleche { transition: transform .45s var(--sortie); }
.bouton:hover .fleche { transform: translateX(4px); }

.bouton--argile { --fond: var(--argile); --texte: #fff; }
.bouton--argile::before { background: var(--argile-sombre); }

.bouton--fantome {
  --fond: transparent; --texte: var(--encre);
  border-color: var(--trait-fort);
}
.bouton--fantome::before { background: var(--encre); }
.bouton--fantome:hover { color: var(--papier); border-color: var(--encre); }

.section--encre .bouton--fantome { --texte: var(--papier); border-color: rgba(248,244,236,.28); }
.section--encre .bouton--fantome::before { background: var(--papier); }
.section--encre .bouton--fantome:hover { color: var(--encre); }

/* Lien texte avec soulignement qui balaie */
.lien {
  color: var(--encre); text-decoration: none;
  background-image: linear-gradient(var(--argile), var(--argile));
  background-size: 0% 1px; background-repeat: no-repeat;
  background-position: left 92%;
  transition: background-size .45s var(--sortie), color .3s;
  padding-bottom: 1px;
}
.lien:hover { background-size: 100% 1px; color: var(--argile-sombre); }
.lien--visible { background-size: 100% 1px; }
.lien--visible:hover { color: var(--argile-sombre); }

/* Dans le corps d'un article, tous les liens sont soulignés d'office. */
.prose a:not(.bouton) {
  color: var(--argile-sombre); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--argile);
  transition: box-shadow .3s var(--sortie), background-color .3s;
}
.prose a:not(.bouton):hover { box-shadow: inset 0 -1.6em 0 var(--argile-voile); }

/* ---------- 6. En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding-block: 1.15rem;
  transition: padding .5s var(--sortie), background-color .5s var(--sortie),
              box-shadow .5s var(--sortie), backdrop-filter .5s;
  border-bottom: 1px solid transparent;
}
.entete.condensee {
  padding-block: .6rem;
  background: rgba(248,244,236,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--trait);
}
.entete.cachee { transform: translateY(-102%); }
.entete { transition-property: padding, background-color, box-shadow, transform, border-color; }

.entete__grille {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
}

/* Le monogramme : deux disques qui se recouvrent. */
.marque { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.marque__signe { width: 40px; height: 26px; flex: none; overflow: visible; }
.marque__signe circle { fill: none; stroke: var(--encre); stroke-width: 1.4; }
.marque__signe .lentille { fill: var(--argile); stroke: none; opacity: .82; }
.marque__signe .g { transition: transform .7s var(--doux); }
.marque__signe .d { transition: transform .7s var(--doux); }
.marque:hover .g { transform: translateX(2.4px); }
.marque:hover .d { transform: translateX(-2.4px); }
.marque__texte { display: grid; line-height: 1.15; }
.marque__nom {
  font-family: 'Fraunces', Georgia, serif; font-size: 1.0625rem; font-weight: 500;
  letter-spacing: -.01em; font-variation-settings: 'SOFT' 20, 'WONK' 1;
}
.marque__role {
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre-tenue); font-weight: 500;
}

/* La navigation est décrite en section 37. */
.entete__actions { display: flex; align-items: center; gap: .6rem; }
.entete .bouton { padding: .7rem 1.15rem; }
@media (max-width: 1059px) { .entete .bouton--rdv { display: none; } }

/* Bouton menu : deux traits qui deviennent une croix */
.hamburger {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 46px; height: 46px; gap: 5px;
  background: none; border: 1px solid var(--trait-fort); border-radius: 100px;
  cursor: pointer; padding: 0; transition: border-color .3s, background-color .3s;
}
@media (min-width: 1060px) { .hamburger { display: none; } }
.hamburger:hover { border-color: var(--encre); }
.hamburger span {
  display: block; width: 17px; height: 1.4px; background: var(--encre); border-radius: 2px;
  transition: transform .45s var(--sortie), opacity .25s;
}

.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.4px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.4px) rotate(-45deg); }

/* Panneau mobile plein écran */
.panneau {
  position: fixed; inset: 0; z-index: 90;
  background: var(--papier);
  display: grid; grid-template-rows: 1fr auto;
  padding: 5.5rem 0 2.5rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--sortie);
  visibility: hidden;
}
.panneau[data-ouvert="true"] { clip-path: inset(0 0 0 0); visibility: visible; }
.panneau__liens {
  display: grid; align-content: start; gap: .1rem;
  overflow-y: auto; overscroll-behavior: contain;
}
.panneau__groupe { opacity: 0; transform: translateY(18px); }
.panneau[data-ouvert="true"] .panneau__groupe {
  animation: monteeLien .6s var(--sortie) forwards;
  animation-delay: calc(var(--i) * 55ms + 160ms);
}
@keyframes monteeLien { to { opacity: 1; transform: translateY(0); } }
.panneau__pied { display: grid; gap: 1rem; }
.panneau__pied .bouton { width: 100%; }

/* ---------- 7. Héros ---------- */
.heros {
  position: relative; padding-top: clamp(6rem, 5rem + 4.5vw, 9rem);
  padding-bottom: var(--section); overflow: hidden;
}
.heros__toile {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.heros__grille {
  position: relative; z-index: 1;
  display: grid; gap: var(--e-7);
}
@media (min-width: 980px) {
  .heros__grille { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: var(--e-8); }
}
.heros h1 { font-size: var(--t-geant); margin-bottom: var(--e-4); }
.heros__chapo { font-size: var(--t-lead); color: var(--encre-douce); max-width: 46ch; }
.heros__actions {
  display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--e-5);
}
.heros__preuves {
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem; margin-top: var(--e-6);
  padding-top: var(--e-4); border-top: 1px solid var(--trait);
}
.heros__preuve { display: grid; gap: .1rem; }
.heros__preuve b {
  font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; font-weight: 500;
  font-variation-settings: 'SOFT' 30, 'WONK' 1;
}
.heros__preuve span { font-size: var(--t-micro); color: var(--encre-tenue); letter-spacing: .04em; }

/* Mots du titre qui montent un par un */
.mot { display: inline-block; overflow: hidden; vertical-align: bottom; }
.mot > span {
  display: inline-block; transform: translateY(105%);
  animation: monteeMot .95s var(--sortie) forwards;
  animation-delay: calc(var(--i) * 62ms + 120ms);
}
@keyframes monteeMot { to { transform: translateY(0); } }

/* ---------- 8. Cartes ---------- */
.grille { display: grid; gap: var(--e-4); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }

.carte {
  position: relative; background: var(--papier-carte);
  border: 1px solid var(--trait); border-radius: var(--rond-l);
  padding: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem);
  display: grid; gap: .7rem; align-content: start;
  transition: transform .55s var(--sortie), box-shadow .55s var(--sortie),
              border-color .45s, background-color .45s;
}
.carte--liee { text-decoration: none; }
.carte--liee:hover {
  transform: translateY(-5px); box-shadow: var(--ombre);
  border-color: var(--trait-fort); background: #fff;
}
.carte h3 { font-size: var(--t-h4); }
.carte p { color: var(--encre-douce); font-size: .9375rem; margin: 0; }
.carte__num {
  font-family: 'Fraunces', Georgia, serif; font-size: .8125rem; color: var(--argile);
  letter-spacing: .06em;
}
.carte__icone {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 100px; background: var(--argile-voile); margin-bottom: .35rem;
}
.carte__icone svg { width: 22px; height: 22px; stroke: var(--argile-sombre); fill: none; stroke-width: 1.5; }
.carte--sauge .carte__icone { background: var(--sauge-voile); }
.carte--sauge .carte__icone svg { stroke: var(--sauge); }

/* ---------- 9. Étapes numérotées (déroulé d'une séance) ---------- */
.etapes { display: grid; gap: 0; counter-reset: etape; position: relative; }
.etape {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--e-4);
  padding-block: var(--e-5); border-top: 1px solid var(--trait);
  align-items: start;
}
.etape:last-child { border-bottom: 1px solid var(--trait); }
.etape__pastille {
  width: 3.25rem; height: 3.25rem; border-radius: 100px;
  display: grid; place-items: center; flex: none;
  border: 1px solid var(--trait-fort); background: var(--papier-carte);
  font-family: 'Fraunces', Georgia, serif; font-size: 1.0625rem; color: var(--argile);
  transition: background-color .5s var(--sortie), border-color .5s, color .5s, transform .5s var(--sortie);
}
.etape.vue .etape__pastille { background: var(--argile); border-color: var(--argile); color: #fff; }
.etape__titre { margin-bottom: .35rem; }
.etape__corps { color: var(--encre-douce); max-width: 62ch; }
.etape__duree {
  display: inline-block; margin-top: .6rem; font-size: var(--t-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--encre-tenue);
}
@media (min-width: 780px) { .etape { grid-template-columns: 3.25rem 1fr; gap: var(--e-5); } }

/* ---------- 10. Le cycle : la pièce maîtresse ---------- */
.cycle {
  display: grid; gap: var(--e-6); align-items: center;
}
@media (min-width: 940px) { .cycle { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--e-8); } }
.cycle__scene {
  position: relative; aspect-ratio: 1; width: min(100%, 460px); margin-inline: auto;
}
.cycle__scene svg { width: 100%; height: 100%; overflow: visible; }
.cycle__anneau { fill: none; stroke: var(--trait-fort); stroke-width: 1.2; stroke-dasharray: 3 6; opacity: .8; }
.cycle__flux {
  fill: none; stroke: var(--argile); stroke-width: 2.4; stroke-linecap: round;
  /* r = 130 → circonférence 816.8, coupée en trois segments qui tournent. */
  stroke-dasharray: 56 216.27; opacity: .8;
}
.cycle__scene.anime .cycle__flux { animation: fluxCycle 7s linear infinite; }
@keyframes fluxCycle { to { stroke-dashoffset: -272.27; } }
.cycle__noeud circle {
  fill: var(--papier-carte); stroke: var(--trait-fort); stroke-width: 1.2;
  transition: fill .5s var(--sortie), stroke .5s;
}
.cycle__noeud text {
  font-family: 'Inter', sans-serif; font-size: 11px; fill: var(--encre-douce);
  text-anchor: middle; font-weight: 500; letter-spacing: .01em;
}
.cycle__noeud.actif circle { fill: var(--argile-voile); stroke: var(--argile); }
.cycle__noeud.actif text { fill: var(--argile-sombre); }
.cycle__noeud { cursor: pointer; }
.cycle__halo {
  fill: var(--argile); opacity: 0;
}
.cycle__noeud.actif .cycle__halo { animation: halo 2.4s var(--sortie) infinite; }
@keyframes halo {
  0%   { opacity: .22; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.55); }
  100% { opacity: 0;   transform: scale(1.55); }
}
.cycle__legende {
  display: grid; gap: var(--e-2);
}
.cycle__ligne {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
  padding: .9rem 1rem; border-radius: var(--rond);
  border: 1px solid transparent; cursor: pointer;
  background: none; text-align: left; font: inherit; color: inherit; width: 100%;
  transition: background-color .45s var(--sortie), border-color .45s;
}
.cycle__ligne:hover { background: var(--papier-carte); }
.cycle__ligne[aria-selected="true"] { background: var(--papier-carte); border-color: var(--trait); }
.cycle__puce {
  width: .55rem; height: .55rem; border-radius: 100px; margin-top: .62rem;
  background: var(--trait-fort); transition: background-color .4s, transform .4s var(--sortie);
}
.cycle__ligne[aria-selected="true"] .cycle__puce { background: var(--argile); transform: scale(1.3); }
.cycle__ligne b { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .1rem; }
.cycle__ligne span { font-size: .875rem; color: var(--encre-douce); line-height: 1.6; }

/* ---------- 11. Citations ---------- */
.citation {
  position: relative; padding: var(--e-5) 0 var(--e-5) clamp(1.25rem, .8rem + 1.6vw, 2.25rem);
  border-left: 2px solid var(--argile);
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.2rem, 1.06rem + .7vw, 1.6rem);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  line-height: 1.38; letter-spacing: -.012em; color: var(--encre);
}
.citation cite {
  display: block; margin-top: var(--e-3);
  font-family: 'Inter', sans-serif; font-size: var(--t-petit); font-style: normal;
  color: var(--encre-tenue); letter-spacing: .02em;
}
.citation cite::before { content: '· '; }

/* Bloc « ce que les gens disent en arrivant » */
.paroles { display: grid; gap: var(--e-3); }
.parole {
  background: var(--papier-carte); border: 1px solid var(--trait);
  border-radius: var(--rond-l) var(--rond-l) var(--rond-l) 6px;
  padding: 1.1rem 1.35rem; font-size: .9375rem; color: var(--encre-douce);
  font-style: italic; max-width: 46ch;
  box-shadow: var(--ombre-basse);
}
.parole:nth-child(even) {
  justify-self: end; border-radius: var(--rond-l) var(--rond-l) 6px var(--rond-l);
  background: var(--argile-voile); border-color: #D1DEE8; color: var(--argile-sombre);
}

/* ---------- 12. Accordéon FAQ ---------- */
.faq { border-top: 1px solid var(--trait); }
.faq__item { border-bottom: 1px solid var(--trait); }
.faq__bouton {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: var(--e-4);
  align-items: center; text-align: left;
  padding: 1.5rem 0; background: none; border: 0; cursor: pointer;
  font-family: 'Fraunces', Georgia, serif; font-size: var(--t-h4);
  font-variation-settings: 'SOFT' 30, 'WONK' 1;
  color: var(--encre); line-height: 1.3;
  transition: color .3s;
}
.faq__bouton:hover { color: var(--argile-sombre); }
.faq__signe {
  position: relative; width: 2.1rem; height: 2.1rem; flex: none;
  border: 1px solid var(--trait-fort); border-radius: 100px;
  transition: border-color .4s, background-color .4s, transform .5s var(--sortie);
}
.faq__signe::before, .faq__signe::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: .7rem; height: 1.2px;
  background: var(--encre); transform: translate(-50%, -50%);
  transition: transform .45s var(--sortie), background-color .4s;
}
.faq__signe::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__bouton[aria-expanded="true"] .faq__signe { background: var(--argile); border-color: var(--argile); transform: rotate(180deg); }
.faq__bouton[aria-expanded="true"] .faq__signe::before,
.faq__bouton[aria-expanded="true"] .faq__signe::after { background: #fff; }
.faq__bouton[aria-expanded="true"] .faq__signe::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__volet {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--sortie);
}
.faq__volet[data-ouvert="true"] { grid-template-rows: 1fr; }
.faq__volet > div { overflow: hidden; }
.faq__corps {
  padding-bottom: 1.6rem; color: var(--encre-douce); max-width: 68ch;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .45s var(--sortie) .08s, transform .45s var(--sortie) .08s;
}
.faq__volet[data-ouvert="true"] .faq__corps { opacity: 1; transform: translateY(0); }
/* Sans JavaScript les volets ne s'ouvrent pas : on les laisse ouverts, sinon
   les réponses seraient illisibles. */
html:not(.js) .faq__volet { grid-template-rows: 1fr; }
html:not(.js) .faq__volet > div { overflow: visible; }
html:not(.js) .faq__corps { opacity: 1; transform: none; }
html:not(.js) .faq__bouton .faq__signe { display: none; }

/* ---------- 13. Tarifs ---------- */
.tarifs { display: grid; gap: var(--e-4); }
@media (min-width: 780px) { .tarifs { grid-template-columns: 1fr 1fr; } }
.tarif {
  border: 1px solid var(--trait); border-radius: var(--rond-l);
  padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  background: var(--papier-carte); display: grid; gap: .55rem; align-content: start;
  position: relative; overflow: hidden;
}
.tarif--principal { border-color: var(--argile); background: #fff; box-shadow: var(--ombre); }
.tarif--principal::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--argile), #6E9BB8);
}
.tarif__prix {
  font-family: 'Fraunces', Georgia, serif; font-size: clamp(2.2rem, 1.8rem + 1.7vw, 3rem);
  font-variation-settings: 'SOFT' 30, 'WONK' 1; line-height: 1;
  display: flex; align-items: baseline; gap: .35rem;
  /* Sans ce reset, le 1.15em hérité de `p` vaut ~55 px sous un prix de 3 rem. */
  margin: 0;
}
.tarif__prix small { font-size: max(.75rem, .34em); color: var(--encre-tenue); font-family: 'Inter', sans-serif; letter-spacing: .02em; }
.tarif ul { list-style: none; padding: 0; margin: var(--e-3) 0 0; display: grid; gap: .55rem; }
.tarif li {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: .7rem;
  font-size: .9375rem; color: var(--encre-douce); margin: 0; line-height: 1.55;
}
.tarif li svg { width: 1.1rem; height: 1.1rem; margin-top: .3rem; stroke: var(--argile); fill: none; stroke-width: 1.8; }

/* ---------- 14. Journal ---------- */
.articles { display: grid; gap: var(--e-5); }
@media (min-width: 760px) { .articles { grid-template-columns: 1fr 1fr; gap: var(--e-5) var(--e-4); } }
@media (min-width: 1080px) { .articles--3 { grid-template-columns: repeat(3, 1fr); } }

.article-vignette {
  display: grid; gap: var(--e-3); align-content: start;
  text-decoration: none; padding: var(--e-4) 0 var(--e-5); position: relative;
  border-top: 1px solid var(--trait);
  transition: border-color .4s;
}
.article-vignette:hover { border-color: var(--argile); }
.article-vignette__texte { display: grid; gap: .7rem; align-content: start; }
.article-vignette__meta {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center;
  font-size: var(--t-micro); color: var(--encre-tenue); letter-spacing: .05em; text-transform: uppercase;
}
.etiquette {
  display: inline-block; padding: .25rem .6rem; border-radius: 100px;
  background: var(--sauge-voile); color: var(--sauge);
  font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 500;
}
.article-vignette h3 {
  font-size: clamp(1.2rem, 1.08rem + .55vw, 1.5rem);
  transition: color .35s; margin: 0;
}
.article-vignette:hover h3 { color: var(--argile-sombre); }
.article-vignette p { color: var(--encre-douce); font-size: .9375rem; margin: 0; }
.article-vignette__lire {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-petit); color: var(--argile-sombre); font-weight: 500;
  min-height: 44px;
}
.article-vignette__lire svg { transition: transform .45s var(--sortie); }
.article-vignette:hover .article-vignette__lire svg { transform: translateX(4px); }

.article-vignette--large { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .article-vignette--large {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--e-5); align-items: center;
  }
  .article-vignette--large h3 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); }
  .article-vignette--large .article-vignette__texte { gap: .9rem; }
}

/* Barre de progression de lecture */
.progression {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 110;
  background: var(--argile); transform-origin: 0 50%; transform: scaleX(0);
  will-change: transform;
}

/* 296 px de rembourrage pour 416 px de contenu : les introductions
   flottaient au milieu du vide. Le haut ne sert qu'à dégager l'entête fixe. */
.article-entete {
  padding-top: clamp(5.5rem, 4.6rem + 3.6vw, 8rem);
  padding-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.article-entete h1 { max-width: 20ch; margin-bottom: var(--e-4); }
.fil {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  font-size: var(--t-micro); color: var(--encre-tenue);
  margin-bottom: var(--e-4); list-style: none; padding: 0;
}
.fil li { margin: 0; display: flex; align-items: center; gap: .45rem; }
.fil a { text-decoration: none; color: var(--encre-tenue); transition: color .3s; }
.fil a:hover { color: var(--argile); }
.fil li + li::before { content: '/'; color: var(--trait-fort); }

.prose { max-width: var(--lecture); }
.prose h2 { margin: var(--e-7) 0 var(--e-3); }
.prose h3 { margin: var(--e-5) 0 var(--e-2); }
.prose > p:first-of-type { font-size: var(--t-lead); color: var(--encre-douce); line-height: 1.62; }
.prose ul, .prose ol { color: var(--encre-douce); }
.prose figure { margin: var(--e-5) 0; }

.encart {
  margin: var(--e-5) 0; padding: clamp(1.3rem, 1rem + 1.1vw, 1.9rem);
  background: var(--sauge-voile); border-radius: var(--rond-l);
  border: 1px solid #E4D5BF;
}
.encart h3 { font-size: var(--t-h4); margin-bottom: .5rem; color: #5C3E22; }
.encart p { color: #6E4B2B; font-size: .9375rem; margin-bottom: .7rem; }
.encart :last-child { margin-bottom: 0; }
.encart--argile { background: var(--argile-voile); border-color: #D6E2EA; }
.encart--argile h3 { color: var(--argile-sombre); }
.encart--argile p { color: #1B3B4E; }

.sommaire {
  border: 1px solid var(--trait); border-radius: var(--rond-l);
  padding: 1.4rem 1.6rem; background: var(--papier-carte); margin-bottom: var(--e-6);
}
.sommaire p { font-size: var(--t-micro); letter-spacing: .13em; text-transform: uppercase; color: var(--argile); margin-bottom: .8rem; }
.sommaire ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
.sommaire li { font-size: .9375rem; margin: 0; }
.sommaire a { text-decoration: none; color: var(--encre-douce); transition: color .3s; }
.sommaire a:hover { color: var(--argile-sombre); }

/* ---------- 15. Pied ---------- */
.pied {
  background: var(--encre); color: rgba(248,244,236,.72);
  padding-block: var(--e-8) var(--e-5); margin-top: 0;
}
.pied a { color: rgba(248,244,236,.72); text-decoration: none; transition: color .3s; }
.pied a:hover { color: #6E9BB8; }
.pied__grille { display: grid; gap: var(--e-6); }
@media (min-width: 820px) { .pied__grille { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--e-5); } }
.pied h3 {
  font-family: 'Inter', sans-serif; font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(248,244,236,.42);
  margin-bottom: var(--e-3);
}
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.pied li { margin: 0; font-size: .9375rem; }
.pied .marque__nom, .pied .marque__signe circle { color: var(--papier); stroke: var(--papier); }
.pied .marque__role { color: rgba(248,244,236,.42); }
.pied__bas {
  margin-top: var(--e-7); padding-top: var(--e-4);
  border-top: 1px solid rgba(248,244,236,.13);
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; justify-content: space-between;
  font-size: var(--t-micro); color: rgba(248,244,236,.42);
}
.pied__urgence {
  margin-top: var(--e-5); padding: 1.1rem 1.3rem; border-radius: var(--rond);
  background: rgba(248,244,236,.05); border: 1px solid rgba(248,244,236,.11);
  font-size: .875rem; line-height: 1.6; color: rgba(248,244,236,.6);
}
.pied__urgence b { color: rgba(248,244,236,.9); font-weight: 500; }

/* ---------- 16. Bande d'appel ---------- */
.appel {
  position: relative; overflow: hidden;
  background: var(--papier-creux);
  border-radius: var(--rond-xl);
  padding: clamp(2.4rem, 1.7rem + 3.2vw, 4.5rem) clamp(1.6rem, 1rem + 3vw, 4rem);
  text-align: center;
}
.appel h2 { max-width: 22ch; margin-inline: auto; margin-bottom: var(--e-3); }
.appel .chapo { margin-inline: auto; text-align: center; max-width: 52ch; }
.appel__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: var(--e-5); }
.appel__fond { position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none; }
/* Le décor est en `position:absolute` juste au-dessus, MAIS cette règle a la même
   spécificité et vient après : sans l'exclusion, elle le repassait en `relative`,
   il rentrait dans le flux, et son SVG en 100% de large sur un viewBox 800x400
   ouvrait un vide de la moitié de la largeur du bloc, sur toutes les pages. */
.appel > *:not(.appel__fond) { position: relative; z-index: 1; }

/* ---------- 17. Accès / carte ---------- */
.acces { display: grid; gap: var(--e-5); }
@media (min-width: 900px) { .acces { grid-template-columns: 1fr 1fr; gap: var(--e-7); align-items: center; } }
.metros { display: grid; gap: .8rem; margin-top: var(--e-4); }
.metro { display: flex; align-items: center; gap: .85rem; font-size: .9375rem; }
.metro__ligne {
  display: grid; place-items: center; min-width: 1.7rem; height: 1.7rem; padding-inline: .4rem;
  border-radius: 100px; background: var(--encre); color: var(--papier);
  font-size: .75rem; font-weight: 600; flex: none;
}
.metro__temps { color: var(--encre-tenue); font-size: var(--t-petit); margin-left: auto; }

.plan {
  position: relative; border-radius: var(--rond-l); overflow: hidden;
  border: 1px solid var(--trait); background: var(--papier-creux); aspect-ratio: 4/3;
}
.plan svg { width: 100%; height: 100%; }
.plan__rue { fill: none; stroke: #E8E0D0; stroke-width: 7; stroke-linecap: round; }
.plan__rue--grande { stroke: #DCD3C0; stroke-width: 11; }
.plan__bloc { fill: #EFE8DA; }
.plan__eau { fill: #EFE3D3; }
.plan__point { fill: var(--argile); }
.plan__onde { fill: none; stroke: var(--argile); stroke-width: 1.4; opacity: 0; }
.plan.anime .plan__onde { animation: onde 3s var(--sortie) infinite; }
.plan.anime .plan__onde:nth-of-type(2) { animation-delay: 1s; }
@keyframes onde {
  0% { r: 6; opacity: .7; }
  100% { r: 30; opacity: 0; }
}
.plan__etiquette {
  font-family: 'Inter', sans-serif; font-size: 8.5px; fill: var(--encre-tenue);
  letter-spacing: .04em;
}

/* ---------- 18. Révélations au défilement ----------
   L'état masqué est enfermé dans html.js : la classe est posée par un script,
   donc sans JavaScript rien n'est caché et la page reste entière. */
html.js [data-reveler] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .85s var(--sortie), transform .85s var(--sortie);
  transition-delay: var(--retard, 0ms);
}
html.js [data-reveler].vu { opacity: 1; transform: none; }
html.js [data-reveler="voile"] { transform: none; }
html.js [data-reveler="cote"] { transform: translateX(-22px); }
html.js [data-reveler="echelle"] { transform: scale(.97); }

/* ---------- 19. Détails ---------- */
.filet {
  height: 1px; background: linear-gradient(90deg, transparent, var(--trait-fort), transparent);
  border: 0; margin: 0;
}
.puces-douces { list-style: none; padding: 0; display: grid; gap: .8rem; }
.puces-douces li {
  display: grid; grid-template-columns: 1.15rem 1fr; gap: .8rem; margin: 0;
  color: var(--encre-douce); line-height: 1.62;
}
.puces-douces svg { width: 1.15rem; height: 1.15rem; margin-top: .32rem; stroke: var(--argile); fill: none; stroke-width: 1.7; }

.encadre-chiffre {
  display: grid; gap: .25rem; padding: var(--e-4) 0;
}
.encadre-chiffre b {
  font-family: 'Fraunces', Georgia, serif; font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  font-variation-settings: 'SOFT' 40, 'WONK' 1; line-height: 1; color: var(--argile);
}
.encadre-chiffre span { font-size: .9375rem; color: var(--encre-douce); }
.encadre-chiffre small { font-size: var(--t-micro); color: var(--encre-tenue); }

.portrait {
  position: relative; border-radius: var(--rond-xl); overflow: hidden;
  background: var(--papier-creux); aspect-ratio: 4/5;
  border: 1px solid var(--trait);
  display: grid; place-items: center; text-align: center; padding: 2rem;
}
.portrait span { font-size: var(--t-petit); color: var(--encre-tenue); max-width: 24ch; }

/* ---------- 20. Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveler] { opacity: 1 !important; transform: none !important; }
  .mot > span { transform: none !important; }
  .souligne path { stroke-dashoffset: 0 !important; }
  .panneau { transition: none; }
  .panneau__groupe { opacity: 1; transform: none; }
}

/* ---------- 21. La figure du héros : deux disques qui respirent ---------- */
.heros__figure { margin: 0; display: grid; gap: var(--e-3); justify-items: center; }
.heros__figure svg { width: min(100%, 480px); overflow: visible; }
.heros__figure figcaption {
  font-size: var(--t-petit); color: var(--encre-tenue); text-align: center;
  max-width: 34ch; line-height: 1.55; font-style: italic;
}
.disque-g circle, .disque-d circle { mix-blend-mode: multiply; }
.disque-g circle { fill: rgba(47, 93, 122, .17); stroke: rgba(47, 93, 122, .5); stroke-width: 1.1; }
.disque-d circle { fill: rgba(156, 107, 63, .19); stroke: rgba(156, 107, 63, .55); stroke-width: 1.1; }
.disque-etiquette {
  font-family: 'Inter', sans-serif; font-size: 12px; fill: var(--encre-tenue);
  letter-spacing: .1em; text-transform: uppercase;
}
/* Sans JS, les disques restent posés, décalés : la figure tient quand même. */
.heros__figure:not(.prete) .disque-g { transform: translateX(-4px); }
.heros__figure:not(.prete) .disque-d { transform: translateX(4px); }

/* ---------- 22. Deux colonnes de texte (approche, à propos) ---------- */
.duo { display: grid; gap: var(--e-5); align-items: start; }
@media (min-width: 900px) {
  .duo { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: var(--e-8); }
  .duo--inverse { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
  .duo--egal { grid-template-columns: 1fr 1fr; }
  .duo__collant { position: sticky; top: 7rem; }
}
.duo h2 { margin-bottom: var(--e-3); }

/* ---------- 23. Liste d'ancres (motifs) ---------- */
.ancres { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--e-4); padding: 0; list-style: none; }
.ancres li { margin: 0; }
.ancres a {
  display: inline-block; padding: .5rem .95rem; border-radius: 100px;
  border: 1px solid var(--trait-fort); font-size: .875rem; text-decoration: none;
  color: var(--encre-douce); background: var(--papier-carte);
  transition: border-color .35s, color .35s, transform .45s var(--sortie), background-color .35s;
}
.ancres a:hover { border-color: var(--argile); color: var(--argile-sombre); transform: translateY(-2px); background: #fff; }

/* ---------- 24. Motif détaillé ---------- */
.motif {
  padding-block: var(--e-6); border-top: 1px solid var(--trait);
  display: grid; gap: var(--e-3);
}
@media (min-width: 880px) {
  .motif { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--e-6); }
  .motif__titre { position: sticky; top: 7.5rem; }
}
.motif h3 { margin-bottom: .6rem; }
.motif__dit {
  font-family: 'Fraunces', Georgia, serif; font-size: 1.0625rem; line-height: 1.5;
  font-variation-settings: 'SOFT' 40, 'WONK' 1; font-style: italic;
  color: var(--argile-sombre); margin: 0;
}
.motif__corps { color: var(--encre-douce); }
.motif__corps p:first-child { margin-top: 0; }

/* ---------- 25. Bandeau de repères chiffrés ---------- */
.reperes { display: grid; gap: var(--e-4); }
@media (min-width: 700px) { .reperes { grid-template-columns: repeat(3, 1fr); gap: var(--e-5); } }
.repere { padding-top: var(--e-3); border-top: 2px solid var(--argile); }
.repere b {
  display: block; font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.9rem, 1.5rem + 1.7vw, 2.75rem); line-height: 1.05;
  font-variation-settings: 'SOFT' 40, 'WONK' 1; margin-bottom: .35rem;
}
.repere p { font-size: .9375rem; color: var(--encre-douce); margin: 0; }
.repere small { display: block; margin-top: .6rem; font-size: var(--t-micro); color: var(--encre-tenue); }
.section--encre .repere { border-top-color: #6E9BB8; }
.section--encre .repere p { color: rgba(248,244,236,.7); }
.section--encre .repere small { color: rgba(248,244,236,.42); }

/* ---------- 26. Formulaire de contact ---------- */
.formulaire { display: grid; gap: var(--e-3); }
.champ { display: grid; gap: .4rem; }
.champ label { font-size: var(--t-petit); font-weight: 500; }
.champ input, .champ textarea, .champ select {
  font: inherit; font-size: var(--t-base); color: var(--encre);
  padding: .85rem 1rem; border-radius: var(--rond);
  border: 1px solid var(--trait-fort); background: var(--papier-carte);
  transition: border-color .3s, box-shadow .3s, background-color .3s;
  width: 100%;
}
.champ textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none; border-color: var(--argile); background: #fff;
  box-shadow: 0 0 0 3px var(--argile-voile);
}
.champ small { font-size: var(--t-micro); color: var(--encre-tenue); }
.duo-champs { display: grid; gap: var(--e-3); }
@media (min-width: 620px) { .duo-champs { grid-template-columns: 1fr 1fr; } }
.formulaire .bouton { justify-self: start; margin-top: .5rem; }
/* ---------- Me joindre ----------
   Remplace le formulaire du gabarit. Mêmes jetons que .carte : papier carte,
   trait, rond large, même relevé au survol. Cible tactile bien au-delà de 44 px. */
.joindre { display: grid; }
.joindre__voie {
  display: flex; align-items: flex-start; gap: 1rem;
  text-decoration: none; color: inherit;
  padding: 1.25rem 1.4rem; margin-bottom: var(--e-3);
  background: var(--papier-carte); border: 1px solid var(--trait);
  border-radius: var(--rond-l);
  transition: transform .55s var(--sortie), box-shadow .55s var(--sortie),
              border-color .45s, background-color .45s;
}
.joindre__voie:hover, .joindre__voie:focus-visible {
  transform: translateY(-3px); box-shadow: var(--ombre);
  border-color: var(--argile); background: #fff;
}
.joindre__num {
  font-family: 'Fraunces', Georgia, serif; font-size: .8125rem;
  color: var(--argile); letter-spacing: .06em; flex: none; padding-top: .2rem;
}
.joindre__texte { display: grid; gap: .3rem; }
.joindre__texte b {
  font-family: 'Fraunces', Georgia, serif; font-weight: 500;
  font-size: 1.0625rem; line-height: 1.35;
}
.joindre__texte span { font-size: .9375rem; color: var(--encre-douce); line-height: 1.6; }
.joindre__voie .fleche { flex: none; margin-left: auto; align-self: center; color: var(--argile); }
.joindre .mention-rgpd { margin-top: var(--e-3); }
@media (prefers-reduced-motion: reduce) {
  .joindre__voie, .joindre__voie:hover, .joindre__voie:focus-visible { transition: none; transform: none; }
}

.mention-rgpd { font-size: var(--t-micro); color: var(--encre-tenue); line-height: 1.6; max-width: 58ch; }

/* ---------- 27. Bloc contact latéral ---------- */
.coordonnees { display: grid; gap: var(--e-4); }
.coordonnee { display: grid; gap: .2rem; padding-bottom: var(--e-3); border-bottom: 1px solid var(--trait); }
.coordonnee dt { font-size: var(--t-micro); letter-spacing: .13em; text-transform: uppercase; color: var(--argile); }
.coordonnee dd { margin: 0; font-size: 1.0625rem; }
.coordonnee dd small { display: block; font-size: var(--t-petit); color: var(--encre-tenue); margin-top: .2rem; line-height: 1.55; }

/* ---------- 28. Pagination article ---------- */
.suite {
  display: grid; gap: var(--e-3); margin-top: var(--e-7);
  padding-top: var(--e-5); border-top: 1px solid var(--trait);
}
@media (min-width: 760px) { .suite { grid-template-columns: 1fr 1fr; gap: var(--e-4); } }
.suite a {
  display: grid; gap: .35rem; text-decoration: none; padding: 1.2rem 1.4rem;
  border: 1px solid var(--trait); border-radius: var(--rond-l); background: var(--papier-carte);
  transition: border-color .4s, transform .5s var(--sortie), background-color .4s;
}
.suite a:hover { border-color: var(--argile); transform: translateY(-3px); background: #fff; }
.suite span { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-tenue); }
.suite b { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 1.0625rem; line-height: 1.3; }

/* ---------- 29. Signature de fin d'article ---------- */
.signature {
  margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid var(--trait);
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center;
}
.signature__pastille {
  width: 3.2rem; height: 3.2rem; border-radius: 100px; display: grid; place-items: center;
  background: var(--argile-voile); font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem; color: var(--argile-sombre);
}
.signature p { margin: 0; font-size: .9375rem; color: var(--encre-douce); }
.signature b { color: var(--encre); font-weight: 600; }

/* Le filet du surtitre ne doit pas se retrouver seul sur sa ligne quand le
   texte passe à la ligne : on l'ancre à la première ligne. */
.surtitre { flex-wrap: wrap; row-gap: .25rem; }

/* Trois repères côte à côte dans la colonne du héros dès qu'il y a la place. */
@media (min-width: 560px) {
  .heros__preuves { gap: 1rem 1.9rem; }
  .heros__preuve b { font-size: 1.25rem; }
}

/* ---------- 30. Cibles tactiles ----------
   Les liens de liste (pied, sommaire, fil d'Ariane) faisaient 19 px de haut :
   sous le doigt, c'est trop petit. On les passe au-dessus de 44 px sans
   toucher aux liens en pleine phrase, que la règle WCAG 2.5.8 exempte
   justement parce qu'on ne peut pas les agrandir sans casser le texte. */
.pied li { margin: 0; }
.pied ul a,
.pied__bas a {
  display: inline-block; padding-block: .62rem; min-height: 44px;
  display: inline-flex; align-items: center;
}
.pied ul { gap: 0; }

.sommaire ol { gap: 0; }
.sommaire li { line-height: 1.4; }
.sommaire a {
  display: flex; align-items: center; min-height: 44px; padding-block: .2rem;
}

.fil a { display: inline-flex; align-items: center; min-height: 44px; }
.fil li { min-height: 44px; }

.article-vignette__lire { min-height: 44px; align-items: center; }

/* Le lien du flux RSS et l'adresse électronique sont dans une phrase :
   on leur donne de la marge de frappe sans les sortir du fil du texte. */
.legende a, .coordonnee a { padding-block: .3rem; }

/* ---------- 31. Photographies ---------- */
.photo-cadre { overflow: hidden; border-radius: var(--rond-l); background: var(--papier-creux); }
.photo-cadre img { width: 100%; height: auto; display: block; }

/* Bandeau pleine largeur, juste après le héros. La marge basse du héros et
   celle du bandeau s'additionnaient : près de 350 px de vide. */
.bandeau { margin: 0; }
.heros:has(+ .bandeau) { padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.bandeau img {
  width: 100%; height: clamp(200px, 24vw, 340px); object-fit: cover; display: block;
}
.bandeau__legende {
  font-size: var(--t-petit); color: var(--encre-tenue); font-style: italic;
  margin: var(--e-3) 0 0; max-width: 56ch;
}

/* L'image d'en-tête d'un article. */
.article-photo { margin: var(--e-5) 0 0; border-radius: var(--rond-l); overflow: hidden; }
.article-photo img { width: 100%; height: clamp(200px, 32vw, 380px); object-fit: cover; }

/* La vignette d'un article dans le journal. */
.article-vignette__photo {
  overflow: hidden; border-radius: var(--rond); background: var(--papier-creux);
  margin-bottom: .2rem;
}
.article-vignette__photo img {
  width: 100%; height: clamp(160px, 22vw, 210px); object-fit: cover;
  transition: transform 1s var(--sortie), filter .6s;
  filter: saturate(.92);
}
.article-vignette:hover .article-vignette__photo img { transform: scale(1.035); filter: saturate(1); }
.article-vignette--large .article-vignette__photo img { height: clamp(200px, 30vw, 320px); }

/* La photo qui accompagne le bloc d'accès. */
.acces__photo { border-radius: var(--rond-l); overflow: hidden; margin-bottom: var(--e-3); }
.acces__photo img { width: 100%; height: clamp(180px, 24vw, 260px); object-fit: cover; }
/* Emplacement d'attente quand la photographie n'existe pas encore : même gabarit,
   même hauteur, même arrondi que la photo, mais rien qui prétende montrer le lieu. */
.acces__photo--attente {
  display: grid; place-items: center;
  height: clamp(180px, 24vw, 260px);
  background: var(--papier-creux); border: 1px solid var(--trait);
}
.acces__gares { margin-top: var(--e-4); }

/* Le portrait : tant qu'il n'y a pas de photographie, un cadre assumé
   plutôt qu'un visage d'inconnu emprunté à une banque d'images. */
.portrait--photo { padding: 0; aspect-ratio: auto; }
.portrait--photo img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .article-vignette:hover .article-vignette__photo img { transform: none; }
}

/* Le journal : le chapô et la première vignette étaient séparés par près de
   250 px de vide, somme du bas d'en-tête et du haut de section. */
.journal-liste { padding-top: 0; }
.journal-liste .articles { margin-top: 0; }

/* ---------- 32. Capsules d'information ----------
   La ligne d'adresse du héros était un surtitre unique, avec des points
   médians pour séparer trois informations de nature différente. Découpée
   en capsules, chaque information se lit seule et le tout se replie
   proprement sur un petit écran. */
.capsules {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; padding: 0; margin: 0 0 var(--e-4);
}
.capsule {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .9rem .45rem .75rem;
  border: 1px solid var(--trait-fort); border-radius: 100px;
  background: rgba(253, 251, 248, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .6875rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-douce);
  margin: 0; white-space: nowrap;
}
.capsule svg { width: 13px; height: 13px; flex: none; stroke: var(--argile); fill: none; stroke-width: 1.6; }


/* Entrée décalée, sur la même courbe que le reste du héros. */
.capsules .capsule {
  opacity: 0; transform: translateY(8px);
  animation: capsuleEntre .7s var(--sortie) forwards;
  animation-delay: calc(var(--i) * 90ms + 80ms);
}
@keyframes capsuleEntre { to { opacity: 1; transform: none; } }

@media (max-width: 380px) {
  .capsule { padding: .4rem .7rem .4rem .6rem; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  .capsules .capsule { opacity: 1; transform: none; animation: none; }
}

/* Texte réservé aux lecteurs d'écran. */
.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;
}

/* ---------- 33. Aperçu des motifs, sur l'accueil ----------
   Six cartes blanches identiques, sans le moindre accent, dans une grille
   auto-fit qui tombait en 4+2 : la section n'avait aucun relief alors que
   toutes les autres en ont un. On reprend ici les repères déjà employés
   ailleurs sur le site, filet argile, numéro, flèche au survol. */
.motifs-apercu { display: grid; gap: var(--e-3); }
@media (min-width: 640px)  { .motifs-apercu { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .motifs-apercu { grid-template-columns: repeat(3, 1fr); } }

.motif-carte {
  position: relative; display: grid; gap: .55rem; align-content: start;
  padding: 1.6rem 1.5rem 1.5rem;
  background: var(--papier-carte);
  border: 1px solid var(--trait); border-radius: var(--rond-l);
  text-decoration: none; overflow: hidden;
  transition: transform .55s var(--sortie), box-shadow .55s var(--sortie),
              border-color .45s, background-color .45s;
}
/* Le filet du haut, comme sur les repères chiffrés. */
.motif-carte::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--argile); opacity: .28;
  transform: scaleX(.22); transform-origin: left;
  transition: transform .6s var(--sortie), opacity .45s;
}
.motif-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre); background: #fff; }
.motif-carte:hover::before { transform: scaleX(1); opacity: 1; }

.motif-carte__num {
  font-family: 'Fraunces', Georgia, serif; font-size: .8125rem;
  color: var(--argile); letter-spacing: .08em;
}
.motif-carte h3 { font-size: var(--t-h4); transition: color .35s; }
.motif-carte:hover h3 { color: var(--argile-sombre); }
.motif-carte p { margin: 0; color: var(--encre-douce); font-size: .9375rem; }

/* La flèche signale que la carte mène quelque part : rien ne le disait. */
.motif-carte__fleche {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem;
  font-size: var(--t-petit); font-weight: 500; color: var(--argile-sombre);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .45s var(--sortie), transform .45s var(--sortie);
}
.motif-carte:hover .motif-carte__fleche,
.motif-carte:focus-visible .motif-carte__fleche { opacity: 1; transform: none; }

@media (hover: none) {
  .motif-carte__fleche { opacity: 1; transform: none; }
  .motif-carte::before { transform: scaleX(1); opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .motif-carte, .motif-carte::before, .motif-carte__fleche { transition: none; }
}

/* ---------- 34. Le repère unique ----------
   Trois colonnes de chiffres avec leurs notes de source faisaient rapport
   universitaire. Un seul chiffre, celui qui dit quelque chose au lecteur. */
.repere-cle {
  display: grid; gap: .55rem; margin: 0;
  padding-left: clamp(1rem, .6rem + 1.4vw, 1.6rem);
  border-left: 2px solid #6E9BB8;
}
.repere-cle b {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400;
  font-size: clamp(2.2rem, 1.7rem + 2.2vw, 3.4rem); line-height: 1;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  color: var(--papier);
}
.repere-cle span { color: rgba(248,244,236,.72); font-size: .9375rem; line-height: 1.6; max-width: 46ch; }

/* ---------- 35. Le portrait de la praticienne ----------
   La classe .acces__photo plafonne à 260 px de haut : c'est une bande, elle
   aurait coupé le visage. Le portrait garde son rapport et remplit sa colonne. */
.portrait-photo { border-radius: var(--rond-l); overflow: hidden; background: var(--papier-creux); }
.portrait-photo img { width: 100%; height: auto; display: block; aspect-ratio: 11 / 8; object-fit: cover; }

/* ---------- 36. Lisibilité sur petit écran ----------
   Les micro-libellés en capitales étaient à 11 px, et le badge de ligne de
   métro à 10 px. Correct en théorie ; trop petit pour un site consulté le
   soir par des gens de 35 à 60 ans. On remonte à 12 px sous 768 px. */
/* Plancher de lisibilité : rien sous 12 px sur un écran tactile, tablette
   comprise. Les petites capitales espacées passent à 11 px sur grand écran,
   où la distance de lecture est plus grande, mais pas dans la main. */
@media (max-width: 1024px) {
  .surtitre, .capsule, .etiquette, .marque__role,
  .panneau__liens .num, .article-vignette__meta, .legende {
    font-size: .75rem;
  }
  .surtitre { letter-spacing: .1em; }
}

/* Un titre d'article atteignait six lignes sur un iPhone SE, soit 43 % de
   l'écran avant le premier mot du texte. */
@media (max-width: 380px) {
  :root { --t-h1: clamp(1.875rem, 1.5rem + 1.9vw, 4rem); }
}


/* ---------- 35. Impression ----------
   Sur le papier il n'y a ni défilement ni survol ni clic : tout ce qui attend
   l'un des trois est ouvert d'office, sinon la page imprimée serait trouée. */
@media print {
  html.js [data-reveler] { opacity: 1 !important; transform: none !important; }
  .faq__volet { grid-template-rows: 1fr !important; }
  .faq__volet > div { overflow: visible !important; }
  .faq__corps { opacity: 1 !important; transform: none !important; }
  .motif-carte__fleche { opacity: 1 !important; transform: none !important; }
  .cycle__noeud circle, .cycle__flux { opacity: 1 !important; }
}

/* =============================================================================
   LA MARQUE, REVUE
   Les deux cercles sont pleins et portent les deux couleurs du site : le bleu
   pour l'un, le tabac pour l'autre, et leur recouvrement fait une troisieme
   valeur. C'est la meme lecture que la figure du hero : vous, l'autre, et ce
   qu'il y a au milieu. La ligne de role tient sur une seule ligne.
   ============================================================================= */
.marque__signe circle{ stroke:none }
.marque__signe .g circle{ fill:var(--argile); opacity:.85 }
.marque__signe .d circle{ fill:var(--sauge); opacity:.85 }
.marque__signe{ mix-blend-mode:multiply }

.marque__role{ white-space:nowrap }
@media (max-width:400px){
  .marque__role{ font-size:.625rem; letter-spacing:.06em }
}

/* =========================================================================
   37. LA NAVIGATION À PANNEAU
   Un seul niveau déplié : « La thérapie de couple » reste un lien, et un
   bouton mitoyen ouvre le panneau. Rien n'est réservé au survol, rien ne
   dépend du script : sans JS le panneau s'ouvre au survol et au focus, et
   le panneau du téléphone se déplie en bloc statique.
   Le panneau tient en deux portes : « venir à deux » et « venir sans
   l'autre ». Ni carte, ni icône, ni bloc plein, deux colonnes, un filet
   entre elles, et une barre de renseignements dessous.
   Aucune couleur en dur : tout sort des jetons.
   ========================================================================= */

.nav { display: none; }
@media (min-width: 1060px) { .nav { display: block; } }

.nav__liste {
  display: flex; align-items: center; gap: .35rem;
  list-style: none; margin: 0; padding: 0;
}
.nav__liste > li { margin: 0; }
.nav__item { display: flex; align-items: center; }

.nav__lien {
  position: relative; text-decoration: none; font-size: .875rem; font-weight: 450;
  color: var(--encre-douce); padding: .5rem .7rem; border-radius: 100px;
  transition: color .3s;
  /* Un libellé coupé en deux donne une barre bancale. */
  white-space: nowrap;
}
.nav__lien::after {
  content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .28rem;
  height: 1px; background: var(--argile);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--sortie);
}
.nav__lien:hover { color: var(--encre); }
.nav__lien:hover::after,
.nav__lien[aria-current]::after { transform: scaleX(1); }
.nav__lien[aria-current] { color: var(--encre); }
/* La page courante porte un trait plein ; la section qui la contient, un
   trait plus pâle. On voit d'un coup d'œil où l'on est et d'où l'on vient. */
.nav__lien[aria-current="true"]::after { opacity: .4; }

/* Le déclencheur : c'est lui qui porte aria-expanded et aria-controls. */
.nav__declic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-left: -.4rem; padding: 0;
  background: none; border: 0; border-radius: 100px; cursor: pointer;
  color: var(--encre-tenue);
  transition: color .3s, background-color .3s;
}
.nav__declic:hover { color: var(--encre); background: var(--papier-creux); }
.declic__chevron { transition: transform .4s var(--sortie); }
.nav__declic[aria-expanded="true"] .declic__chevron { transform: rotate(180deg); }
@media (hover: hover) {
  .nav__item--mega:hover .declic__chevron { transform: rotate(180deg); }
}
.nav__item--mega[data-ouvert="false"] .declic__chevron { transform: none; }
/* Sans script, le bouton ne ferait rien : on ne l'affiche pas, et le
   panneau s'ouvre au survol comme au focus. */
html:not(.js) .nav__declic { display: none; }

/* ---------- Le panneau : « les deux portes » ----------
   Deux colonnes de largeur egale, separees par un seul filet vertical. Ni
   carte, ni icone, ni bloc plein : la hierarchie tient dans le corps, la
   graisse et la couleur. Chaque entree porte son titre a gauche et, a droite,
   la phrase qu'on lui dit au telephone. */
.mm {
  position: absolute; top: 100%; left: 0; right: 0;
  padding: .5rem 2.5rem 0;           /* le haut sert de pont au survol */
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--sortie), transform .3s var(--sortie), visibility .3s;
}
.mm__cadre {
  width: min(100%, var(--largeur)); margin-inline: auto;
  padding: 30px;
  background: var(--papier-carte);
  border: 1px solid var(--trait); border-radius: var(--rond-l);
  box-shadow: var(--ombre-haute);
}
@media (hover: hover) {
  .nav__item--mega:hover > .mm { opacity: 1; visibility: visible; transform: none; }
}
.nav__item--mega:focus-within > .mm,
.nav__item--mega[data-ouvert="true"] > .mm { opacity: 1; visibility: visible; transform: none; }
/* Échap ferme, même si le focus est encore dans le groupe : cette règle
   vient après, elle l'emporte à spécificité égale. */
.nav__item--mega[data-ouvert="false"] > .mm {
  opacity: 0; visibility: hidden; transform: translateY(-8px);
}

/* Les deux portes, et le filet qui les sépare. 28 px de part et d'autre. */
.mm__portes { display: grid; grid-template-columns: 1fr 1fr; }
.mm__porte { min-width: 0; padding-inline-end: 28px; }
.mm__porte + .mm__porte {
  padding-inline: 28px 0;
  border-inline-start: 1px solid var(--trait);
}

.mm__porte-titre {
  display: block; text-decoration: none; color: var(--encre);
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 40;
  font-size: 1.3125rem; font-weight: 500; line-height: 1.2; letter-spacing: -.018em;
  transition: color .3s;
}
.mm__porte-titre:hover { color: var(--argile-sombre); }
/* La seule ligne colorée du panneau : la durée, le prix, le lieu. */
.mm__porte-ligne {
  margin: .3rem 0 .9rem;
  font-size: .78125rem; font-weight: 600; line-height: 1.35;
  color: var(--argile);
}

.mm__motifs { list-style: none; margin: 0; padding: 0; }
.mm__motifs > li { margin: 0; }
.mm__motif {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem;
  padding: .5rem 0; border-bottom: 1px solid var(--trait);
  text-decoration: none; color: var(--encre);
}
.mm__nom { font-size: .9375rem; font-weight: 500; line-height: 1.35; transition: color .3s; }
/* La phrase citée : --encre-tenue tombait à 3,86:1, sous le seuil AA, pour un
   texte de 12,5 px lu le soir sur un téléphone. --encre-douce donne 8,04:1 ;
   la hiérarchie tient par le corps et la graisse, pas par la pâleur. */
.mm__dit {
  text-align: right; font-size: .78125rem; font-weight: 400; line-height: 1.35;
  color: var(--encre-douce); transition: color .3s;
}
.mm__motif:hover .mm__nom { color: var(--argile-sombre); }
.mm__motif:hover .mm__dit  { color: var(--encre); }

/* La page courante, dans le panneau */
.mm__porte-titre[aria-current],
.mm__motif[aria-current] .mm__nom {
  color: var(--argile-sombre); text-decoration: underline; text-underline-offset: 4px;
}

/* La barre du bas : ce qu'on demande au téléphone, et deux portes de sortie.
   Un bandeau plein qui ferme le panneau, d'un bord à l'autre : il ressort de
   la marge intérieure de 30 px par une marge négative, et reprend au bas les
   deux coins du cadre, moins l'épaisseur du filet qui l'entoure. */
.mm__barre {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.75rem;
  margin: 1rem -30px -30px; padding: 14px 30px;
  background: var(--argile); color: var(--papier);
  border-radius: 0 0 calc(var(--rond-l) - 1px) calc(var(--rond-l) - 1px);
  font-size: .8125rem; line-height: 1.45;
}
.mm__barre b { color: var(--papier); font-weight: 600; }
/* 82 % de papier sur l'argile : le composité mesure 4,95:1, au-dessus du
   seuil. En dessous, « je réponds moi-même » cesserait d'être lisible. */
.mm__faible { color: color-mix(in srgb, var(--papier) 82%, var(--argile)); }
.mm__tel { color: var(--papier); text-decoration: none; }
.mm__tel:hover { text-decoration: underline; text-underline-offset: 3px; }
.mm__vers {
  margin-inline-start: auto;
  color: var(--papier); font-weight: 600; text-decoration: none;
}
/* Les deux sorties se tiennent à droite, côte à côte : c'est la première qui
   pousse, la seconde la suit. */
.mm__vers + .mm__vers { margin-inline-start: 0; }
.mm__vers:hover,
.mm__vers:focus-visible,
.mm__vers[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
/* Sur le bleu, le contour d'accent s'effacerait : dans le bandeau il passe
   en clair. */
.mm__barre :focus-visible { outline-color: var(--papier); }

/* Entre 1060 et 1259 px la barre est juste : on resserre. */
@media (min-width: 1060px) and (max-width: 1259px) {
  .nav__liste { gap: .05rem; }
  .nav__lien { padding-inline: .42rem; font-size: .8125rem; }
  .nav__lien::after { left: .42rem; right: .42rem; }
  .mm { padding-inline: 1.5rem; }
  .mm__cadre { padding: 24px; }
  .mm__porte { padding-inline-end: 20px; }
  .mm__porte + .mm__porte { padding-inline: 20px 0; }
  .mm__barre { margin: 1rem -24px -24px; padding: 14px 24px; gap: .5rem 1rem; }
}

/* ---------- Le panneau du téléphone : la même arborescence, en accordéon --- */
.panneau__groupe { display: grid; }
.panneau__tete { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--trait); }
.panneau__lien {
  flex: 1; min-width: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.45rem, 1.05rem + 2vw, 2.1rem);
  font-variation-settings: 'SOFT' 30, 'WONK' 1;
  text-decoration: none; padding: .55rem 0;
  display: flex; align-items: baseline; gap: .9rem;
  min-height: 44px;
}
.panneau__lien[aria-current] { color: var(--argile-sombre); }
.panneau__liens .num {
  font-family: 'Inter', sans-serif; font-size: .7rem; color: var(--argile);
  letter-spacing: .1em; font-variation-settings: normal;
}
.panneau__declic {
  flex: none; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--trait); border-radius: 100px;
  color: var(--encre-douce); cursor: pointer;
  transition: border-color .3s, color .3s;
}
.panneau__declic[aria-expanded="true"] { border-color: var(--argile); color: var(--argile); }
.panneau__declic[aria-expanded="true"] .declic__chevron { transform: rotate(180deg); }
html:not(.js) .panneau__declic { display: none; }

.panneau__sous { display: grid; gap: .7rem; padding: .9rem 0 1.2rem; }
.panneau__groupe[data-ouvert="false"] .panneau__sous { display: none; }
/* Dans l'accordéon, les deux portes s'empilent : le filet vertical tombe,
   la phrase citée passe sous son titre, et toute cible fait 44 px. */
.panneau__sous .mm__portes { display: block; }
.panneau__sous .mm__porte { padding: 0; }
.panneau__sous .mm__porte + .mm__porte {
  padding: 0; border-inline-start: 0; margin-top: 1.4rem;
}
.panneau__sous .mm__porte-titre {
  display: flex; align-items: center; min-height: 44px; font-size: 1.375rem;
}
.panneau__sous .mm__porte-ligne { margin: .1rem 0 .5rem; }
.panneau__sous .mm__motif {
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: .1rem; min-height: 44px; padding-block: .6rem;
}
.panneau__sous .mm__dit { text-align: left; }
/* Le même bandeau dans l'accordéon. Il ne va pas d'un bord à l'autre : le
   panneau du téléphone n'a pas de cadre à épouser, et une marge négative y
   déborderait. Il garde donc ses quatre coins. */
.panneau__sous .mm__barre {
  display: grid; justify-items: start; gap: 0;
  margin: 1.4rem 0 0; padding: 14px 18px;
  border-radius: var(--rond);
}
/* Les deux faits se lisent, les deux liens se touchent : eux seuls passent en
   flex, et portent leur propre espace-mot, que le flux inline ne leur donne
   plus. */
.panneau__sous .mm__fait { display: block; padding-block: .5rem; }
.panneau__sous .mm__fait--tel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 .35rem;
  min-height: 44px; padding-block: 0;
}
.panneau__sous .mm__tel { align-self: stretch; display: flex; align-items: center; }
.panneau__sous .mm__vers {
  margin-inline-start: 0; display: flex; align-items: center; gap: .35rem;
  min-height: 44px;
}

/* ---------- Sans script : le panneau du téléphone devient un bloc ---------- */
html:not(.js) .panneau {
  position: static; clip-path: none; visibility: visible;
  padding-top: 6.5rem; border-bottom: 1px solid var(--trait);
}
html:not(.js) .panneau__groupe { opacity: 1; transform: none; }
@media (min-width: 1060px) {
  /* Sur grand écran, la barre porte déjà les seize liens : ce double
     ferait doublon. */
  html:not(.js) .panneau { display: none; }
}

/* ---------- Impression ----------
   Sur le papier le menu est une table des matières : il garde ses seize
   liens et leurs libellés, il perd ce qui ne s'imprime pas, l'ombre, le
   fond d'accent, les pastilles décoratives et les boutons. Trois colonnes
   de texte, une quinzaine de lignes en tout. */
@media print {
  .entete { position: static; padding-block: .3rem; background: none; box-shadow: none; }
  .entete.cachee { transform: none; }
  .entete__grille { flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
  .nav { display: block; width: 100%; }
  .nav__liste { flex-wrap: wrap; align-items: flex-start; }
  .nav__item { display: block; }
  .nav__lien { padding: .1rem .4rem; font-size: .8rem; }
  .nav__declic, .hamburger, .panneau__declic { display: none; }
  .mm {
    position: static; padding: .25rem 0 0;
    opacity: 1 !important; visibility: visible !important; transform: none !important;
  }
  .mm__cadre {
    width: 100%; padding: 0;
    background: none; border: 0; box-shadow: none;
  }
  /* Les deux portes tiennent en deux colonnes de texte, sans filet. */
  .mm__porte { padding-inline-end: .8rem; }
  .mm__porte + .mm__porte { padding-inline: .8rem 0; border-inline-start: 0; }
  .mm__porte-titre { font-size: .82rem; break-after: avoid; }
  .mm__porte-ligne { margin: 0 0 .14rem; font-size: .65rem; color: var(--encre-douce); }
  /* Ce sont les entrées, pas les colonnes, qui refusent d'être coupées en deux. */
  .mm__motif { display: block; padding: 0; border: 0; break-inside: avoid; }
  .mm__nom { font-size: .7rem; }
  .mm__dit { display: inline; text-align: left; font-size: .65rem; color: var(--encre-douce); }
  .mm__dit::before { content: " · "; }
  /* Un aplat bleu pleine largeur vide une cartouche et ne se lit pas : sur le
     papier le bandeau redevient du texte sombre sur blanc. */
  .mm__barre {
    display: block; margin: .3rem 0 0; padding: .2rem 0 0;
    background: none; color: var(--encre); border-radius: 0;
    font-size: .65rem; line-height: 1.32;
  }
  .mm__fait::after { content: " · "; }
  .mm__barre b, .mm__tel, .mm__vers { color: var(--encre); }
  .mm__faible { color: var(--encre-douce); }
  /* Sur le papier les deux sorties se suivent dans le fil : il leur faut un
     séparateur, et leur flèche ne doit pas tomber seule à la ligne. */
  .mm__vers { white-space: nowrap; }
  .mm__vers + .mm__vers::before { content: "· "; }
  /* Le panneau du téléphone reprend exactement les mêmes liens que la barre
     ci-dessus : sur le papier on n'imprime pas deux fois le même menu. */
  .panneau { display: none; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .mm, .declic__chevron,
  .mm__porte-titre, .mm__nom, .mm__dit { transition: none; }
  .panneau__groupe { opacity: 1; transform: none; animation: none; }
}


/* =========================================================================
   41. LES DEUX LIENS D'AILLEURS, DANS LE PIED
   Instagram et la fiche Google. Deux liens sortants, et rien d'autre : aucune
   ressource n'est chargée depuis ces domaines. La flèche dit qu'on sort du site.
   ========================================================================= */
.pied__ailleurs-titre { margin-top: var(--e-4); }
.pied__ailleurs .pied__ext { margin-left: .3rem; font-size: .8em; opacity: .6; }

/* =========================================================================
   42. LA QUATRIÈME VOIE, TANT QUE L'AGENDA N'EST PAS OUVERT
   Le bloc n'est pas un lien : il ne doit donc ni se soulever, ni s'éclairer au
   survol. Le trait pointillé dit « pas encore ». Le script le change en lien le
   jour où la constante RDV_EN_LIGNE est renseignée.
   ========================================================================= */
.joindre__voie--attente { background: var(--papier-creux); border-style: dashed; }
.joindre__voie--attente:hover,
.joindre__voie--attente:focus-visible {
  transform: none; box-shadow: none;
  border-color: var(--trait-fort); background: var(--papier-creux);
}

/* =========================================================================
   43. LA CARTE, AU CLIC SEULEMENT
   Ce site n'émet aucune requête sortante au chargement, et sa page de
   confidentialité le dit. Un iframe Google posé d'office rendrait cette page
   mensongère : le cadre ci-dessous est donc dessiné avec les jetons du site, et
   l'adresse de la carte dort dans un attribut data- jusqu'au clic.
   Aucune couleur en dur.
   ========================================================================= */
.carte-geo {
  display: grid; overflow: hidden;
  min-height: clamp(240px, 30vw, 340px);
  background: var(--papier-creux);
  border: 1px solid var(--trait); border-radius: var(--rond-l);
}
.carte-geo__voile {
  display: grid; align-content: center; gap: .9rem;
  padding: clamp(1.2rem, 1rem + 1.4vw, 2rem);
}
.carte-geo__adresse {
  margin: 0; font-family: var(--serif); font-weight: 500;
  font-size: var(--t-h4); line-height: 1.3;
}
.carte-geo__note {
  margin: 0; max-width: 48ch;
  font-size: var(--t-micro); color: var(--encre-tenue); line-height: 1.6;
}
.carte-geo__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.carte-geo__actions .bouton { max-width: 100%; }
.carte-geo iframe {
  display: block; width: 100%; border: 0;
  min-height: clamp(240px, 30vw, 340px);
}
.carte-geo--chargee { background: var(--papier-carte); }
/* Sans script, le bouton ne peut rien : il s'efface, et le lien vers Google Maps
   prend sa place, la carte reste atteignable, et rien n'est chargé d'office.
   Avec script, c'est l'inverse. Sur le papier, c'est le lien qui s'imprime. */
html:not(.js) .carte-geo__bouton { display: none; }
html.js .carte-geo__sansjs { display: none; }
@media print {
  .carte-geo__bouton { display: none; }
  html.js .carte-geo__sansjs { display: inline-flex; }
}


/* =============================================================================
   TÉLÉPHONE · cibles tactiles
   Relevé au navigateur à 390 px : la marque de l'en-tête et du pied tombait à
   31 px, les titres de motif à 28 px, les pastilles d'ancre à 42 px. Le seuil
   est 44 px. On agrandit la zone touchable sans changer le dessin.
   ============================================================================= */
@media (max-width: 900px) {
  .marque { min-height: 44px; }
  .ancres a,
  .ancres li > a { min-height: 44px; display: inline-flex; align-items: center; }
  .motif__titre h3 a,
  .motif__titre a { min-height: 44px; display: inline-flex; align-items: center; }
  .marque__role { font-size: 11px; }
}


/* =============================================================================
   LES PHOTOGRAPHIES D'HADASSA
   Elles sont verticales, prises au téléphone. Les emplacements du gabarit
   étaient horizontaux : c'était à eux de s'adapter, pas aux photos d'être
   rognées. On leur rend leur format, et l'image n'est plus recadrée.
   ============================================================================= */
.photo-verticale { margin: 0; }
.photo-verticale img {
  width: 100%; height: auto; display: block;
  border-radius: var(--rond-l);
  box-shadow: var(--ombre);
}
/* le portrait fait 4/5 : l'emplacement aussi, sinon le cadrage coupe le visage */
.portrait-photo { aspect-ratio: auto !important; padding: 0 !important; display: block !important; }
.portrait-photo img {
  width: 100%; height: auto; display: block;
  aspect-ratio: auto !important;      /* le gabarit imposait 11/8, un format paysage */
  object-fit: contain !important;     /* plus aucun recadrage : la photo est entière */
  border-radius: var(--rond-l);
  box-shadow: var(--ombre);
}
/* la plaque de porte fait 4/3 */
.acces__photo { aspect-ratio: auto !important; }
.acces__photo img {
  width: 100%; height: auto; display: block;
  border-radius: var(--rond-l);
  box-shadow: var(--ombre);
}
@media (max-width: 900px) {
  .photo-verticale img, .portrait-photo img { max-height: 70vh; width: auto; margin: 0 auto; }
}


/* =============================================================================
   PLUS DE COULEUR (A + B) · demandé par Hadassa, qui trouvait le site fade
   Aucune couleur nouvelle n'entre dans la palette. On donne du travail au
   tabac, qui dormait dans le logo, et on fait respirer la page par bandes
   au lieu d'un crème continu.
   Les bandes sombres existantes sont exclues : les écraser mettrait du texte
   clair sur un fond clair.
   ============================================================================= */

/* A · le tabac prend du service */
.surtitre { background: #E8D6BE; color: #7A4E28; }
.carte__num { color: #B07E4A; }
.section--creuse { background: #F3E9DC; }

/* B · une section sur deux prend un vrai fond */
main > section:not(.section--encre):nth-of-type(4n+4) { background: #E3EAEF; }
main > section:not(.section--encre):nth-of-type(4n+4) .surtitre {
  background: #CFDDE7; color: #234A63;
}
main > section:not(.section--encre):nth-of-type(4n+4) .carte { border-color: #C7D6E0; }

/* les cartes se teintent l'une après l'autre, très légèrement */
.grille .carte:nth-child(even) { background: #F6F1E7; }


/* --- Contrastes mesurés après la mise en couleur ---------------------------
   Deux corrections, dont une qui préexistait et que la mesure a révélée. */

/* le numéro de carte en tabac tombait à 3,4:1 sur le fond crème */
.carte__num { color: #7A4E28; }

/* PRÉEXISTANT, et grave : sur les bandes sombres, l'étiquette de section était
   bleu pâle sur un voile bleu pâle, soit 1,36:1. Elle était illisible. */
.section--encre .surtitre {
  background: rgba(248,244,236,.14) !important;
  color: #EFE6D9 !important;
}


/* --- Le gris secondaire, remonté au-dessus du seuil ------------------------
   PRÉEXISTANT : --encre-tenue valait #8A7D73, soit 3,64:1 sur le papier. Il
   porte les légendes, les fils d'Ariane et les mentions de 11 à 14 px, donc
   précisément les tailles où le seuil de 4,5:1 s'applique. Assombri.        */
:root { --encre-tenue: #6F6459; }


/* --- Texte sombre sur bande sombre -----------------------------------------
   PRÉEXISTANT : dans les bandes en encre, les listes .puces-douces gardaient
   la couleur du mode clair (#574C45), soit 1,86:1 sur le fond. Elles étaient
   quasiment illisibles sur trois pages.                                     */
.section--encre .puces-douces,
.section--encre .puces-douces li,
.section--encre .puces-douces p { color: rgba(248,244,236,.84); }
.section--encre .puces-douces strong,
.section--encre .puces-douces b { color: var(--papier); }