/* Les déclarations de polices sont dans _fontface.css, chargé par le
   gabarit juste avant cette feuille. Elles étaient auparavant tirées par
   un « @import » posé ici : le navigateur devait alors télécharger cette
   feuille, la lire, y découvrir l'import, puis repartir chercher un second
   fichier — deux allers-retours en file indienne avant la première lettre
   affichée. Les deux feuilles partent maintenant ensemble. */

/* ═══════════════════════════════════════════════════════════════
   ARÉTHIS — feuille de style du site
   Charte issue du cahier des charges (couleurs, typographie,
   sobriété). Une seule apparence : fond écru, pas de mode sombre.
   Polices hébergées localement — aucune requête vers un tiers.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Palette — codes exacts du cahier des charges */
  --ecru:        #FAF7F0;   /* fond dominant : celui des blocs */
  --fond-page:   #EFE8DC;   /* le support sur lequel les blocs reposent */
  --ecru-fonce:  #F3EEE4;   /* encarts doux */
  --sauge:       #6E8272;   /* structure : bandeau, pied de page, bouton principal */
  --sauge-fonce: #33453F;   /* titres */
  --terracotta:  #B5674A;   /* accent : liens, sous-titres, filets */
  --abricot:     #E0A17A;   /* touche chaude, sur-lignage discret */
  --texte:       #3A3A36;   /* texte courant */
  --discret:     #7A7A72;   /* teinte de charte — surfaces non textuelles uniquement */

  /* ── Déclinaisons lisibles ──────────────────────────────────
     Le cahier des charges impose ces couleurs ET exige un
     « contraste toujours suffisant pour la lisibilité ». Les deux
     sont incompatibles en petit corps : mesures WCAG sur l'écru,
     gris #7A7A72 = 4,04:1, terracotta #B5674A = 3,92:1, et blanc
     sur sauge #6E8272 = 4,12:1 — tous sous le minimum de 4,5:1.
     Les teintes de la charte restent employées partout où le texte
     est grand (titres, citation, aplats) ; ces déclinaisons, à peine
     plus profondes, prennent le relais en petit corps. */
  --discret-lisible:    #68685F;   /* 5,26:1 sur écru */
  --terracotta-lisible: #9C5740;   /* 5,10:1 sur écru */
  --sauge-lisible:      #5E7062;   /* 5,29:1 avec du blanc */

  --sauge-survol:      #4F5F53;
  --terracotta-survol: #8F4F38;
  /* Triangle du menu repliable. Le caractère « ▾ » d'EB Garamond a des
     angles vifs et un dessin qui varie d'une police de secours à l'autre.
     Celui-ci est tracé : un « stroke-linejoin: round » posé sur le
     contour arrondit les trois coins. Employé en masque, il prend la
     couleur du CSS et suit donc les variables comme le reste. */
  --triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11'%3E%3Cpath d='M8 9.2 1.9 2.4h12.2z' fill='%23000' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E");

  --filet:             rgba(122, 122, 114, .26);   /* séparations décoratives */
  --filet-doux:        rgba(122, 122, 114, .14);   /* séparations internes, à peine marquées */
  --filet-net:         rgba(122, 122, 114, .55);   /* séparations porteuses de sens */

  /* La serif porte l'identité — bandeau, navigation, titres, citation.
     La linéale porte la lecture : les pages sont longues et lues par des
     personnes parfois très fatiguées, le confort prime sur le caractère.
     Le cahier des charges le permet : « une serif pour les titres et
     éventuellement le corps ». */
  --serif:   'EB Garamond', Georgia, 'Times New Roman', serif;
  --lineale: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Largeur de la colonne de texte. Mesurée en caractères par ligne,
     le vrai critère de confort : 34rem n'en donnait que 55, un peu
     court, et laissait 256 px de vide à droite dans un cadre qui en
     offre 800 — un vide que le texte justifié soulignait d'un second
     bord net. 40rem donne 67 caractères, au milieu du créneau lisible
     (45-75), et ramène ce vide à 160 px. Remplir le cadre entier
     monterait à 102 caractères : l'œil perd sa ligne au retour. */
  --lecture:  40rem;   /* largeur de la colonne de texte */
  --page:     68rem;   /* largeur maximale de la page */
  --gouttiere: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: auto; }

/* Aucune image du site ne doit être déformée : la hauteur suit
   toujours la largeur. Exigence explicite du cahier des charges. */
img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fond-page);
  color: var(--texte);
  font-family: var(--lineale);
  font-size: 1.0625rem;     /* 17 px par défaut, mais suit l'agrandissement
                               choisi par le visiteur dans son navigateur.
                               La hauteur d'x de la linéale compense. */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Accessibilité : le focus clavier doit rester franchement visible sur
   ce qui se clique. En revanche un conteneur qui reçoit le focus par
   programme — le bloc principal, visé par « Aller au contenu » — n'a
   rien à signaler : son anneau ne ferait qu'encadrer la page. */
:focus-visible {
  outline: 2px solid var(--terracotta-lisible);
  outline-offset: 3px;
  border-radius: 2px;
}
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; }

.saut-contenu {
  position: absolute;
  left: -9999px;
  background: var(--ecru);
  color: var(--sauge-fonce);
  padding: .75rem 1.25rem;
  z-index: 100;
}
.saut-contenu:focus {
  left: 1rem;
  top: 1rem;
}

/* ── Enveloppe : des blocs détachés plutôt que des bandes ──── */

:root { --rayon: 16px; }

.enveloppe {
  max-width: 78rem;
  /* « body » est un conteneur flex, pour que la page occupe toute la
     hauteur de l'écran. Dans ce contexte, la marge automatique annule
     l'étirement : sans cette largeur, l'enveloppe se réglait sur son
     contenu et la page changeait de largeur d'une page à l'autre. */
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  /* Le même écart partout : entre les blocs empilés ici, et entre le
     contenu et le panneau dans la grille ci-dessous. */
  gap: 1rem;
}
@media (min-width: 52rem) {
  .enveloppe { padding: 1.5rem; gap: 1.25rem; }
  /* La barre collée se replace à la même distance du bord que
     l'enveloppe, sinon elle paraît sauter au défilement. */
  .navigation { top: 1.5rem; }
}

/* ── En-tête ──────────────────────────────────────────────── */

.bandeau {
  font-family: var(--serif);
  background: var(--sauge-lisible);
  color: #fff;
  padding: 2.5rem 1.5rem 2.25rem;
  text-align: center;
}
.bandeau a { color: inherit; text-decoration: none; display: inline-block; }
.bandeau a:hover { color: inherit; }
.bandeau :focus-visible { outline-color: #fff; }
.marque {
  font-size: clamp(2rem, 5vw, 2.85rem);
  letter-spacing: .22em;
  text-indent: .22em;
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 .5rem;
}
.accroche {
  font-size: .95rem;
  letter-spacing: .04em;
  margin: 0;
  text-wrap: balance;
}

/* ── Navigation ───────────────────────────────────────────── */

.navigation {
  background: var(--ecru);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  position: sticky;
  top: 1rem;
  z-index: 20;
}
.navigation .interieur { padding: 0 1.25rem; }
.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem 1.15rem;
}
.navigation li { margin-bottom: 0; }
.navigation a {
  font-family: var(--serif);
  display: block;
  position: relative;
  padding: 1.1rem 0 .95rem;
  color: var(--texte);
  text-decoration: none;
  font-size: 1rem;
  /* Graisse intermédiaire : le romain manquait de présence, le
     semi-gras en avait trop. EB Garamond étant variable, le 500 est
     une vraie graisse dessinée, pas un trait épaissi après coup. */
  font-weight: 500;
}
.navigation a:hover { color: var(--terracotta-lisible); }

/* Le trait de la page courante est dessiné plutôt que posé en bordure :
   une bordure ne peut pas avoir d'extrémités arrondies. */
.navigation a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;              /* collé au bas de la barre, comme le trait d'origine */
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--terracotta-lisible);
}

.menu-repliable > summary {
  font-family: var(--serif);
  display: none;
  font-size: 1rem;
  font-weight: 500;   /* même graisse que les liens qu'il ouvre */
  color: var(--texte);
  padding: .9rem 0;
  cursor: pointer;
  text-align: center;
  list-style: none;
}
.menu-repliable > summary::-webkit-details-marker { display: none; }
.menu-repliable > summary::after {
  content: '';
  width: .72rem;
  height: .5rem;
  flex: none;
  background-color: var(--terracotta-lisible);
  -webkit-mask: var(--triangle) center / contain no-repeat;
          mask: var(--triangle) center / contain no-repeat;
  transition: transform .18s ease;
}
/* Un seul dessin qui pivote : à l'ouverture, le triangle se retourne au
   lieu d'être remplacé par un autre caractère. */
.menu-repliable[open] > summary::after { transform: rotate(180deg); }

@media (min-width: 52.0625rem) {
  .menu-repliable > ul { display: flex !important; }
  .menu-repliable::details-content {
    content-visibility: visible;
    block-size: auto;
    overflow: visible;
  }
}

/* ── Contenu et colonne d'information ─────────────────────── */

.cadre { display: block; }

.page {
  background: var(--ecru);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}

/* Sous 64rem, les cartes ne disparaissent pas : elles passent à la
   suite du contenu, avant le pied de page. L'information reste. */
.colonne-laterale { margin-top: 1rem; }

@media (min-width: 64rem) {
  .cadre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: 1rem;
    /* Les deux colonnes descendent ensemble : sur une page courte, le
       panneau de droite laissait le bloc de contenu s'arrêter en l'air,
       et le vide au-dessus du pied de page se lisait comme un oubli. */
    align-items: stretch;
  }
  /* La carte, elle, reste en haut : étirée, elle ne pourrait plus suivre
     le défilement. */
  .colonne-laterale { align-self: start; }
  /* Accueil : pas de panneau, le contenu prend toute la largeur. */
  .cadre:not(:has(.colonne-laterale)) { display: block; }

  .colonne-laterale {
    display: block;
    position: sticky;
    top: 5.5rem;           /* sous la barre de navigation collée */
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* Le contenu n'est plus centré dans toute la page : il occupe sa
     colonne, la colonne d'information occupe la sienne. */

}

/* L'enveloppe occupe la hauteur restante : le cadre grandit, le pied de
   page reste en bas, et une page courte ne laisse plus de trou. */
.enveloppe { flex: 1; display: flex; flex-direction: column; }
.cadre { flex: 1; }

/* ── Corps de page ────────────────────────────────────────── */

.page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 2.25rem 1.5rem 2.75rem;
}
.colonne { max-width: var(--lecture); }

/* Le titre et la colonne de lecture sont centrés sous la page, sans quoi
   un bandeau pleine largeur laisse un grand vide à droite du texte. Les
   colonnes imbriquées dans une grille (.avec-image) gardent leur place. */
.page > h1,
.page > .colonne { margin-left: auto; margin-right: auto; }

/* L'image d'en-tête prend toute la largeur de la page : un débord franc
   se lit comme un parti pris, un débord intermédiaire comme une erreur
   d'alignement. Sa légende suit l'image, pas la colonne de texte. */
.page > figure { max-width: none; margin-left: 0; margin-right: 0; }
.page > figure figcaption { max-width: var(--lecture); margin-left: auto; margin-right: auto; }

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--sauge-fonce);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}
h1 {
  max-width: var(--lecture);
  font-size: clamp(2rem, 4.5vw, 2.6rem);
  margin: 0 0 1.75rem;
  letter-spacing: -.005em;
}
h2 {
  font-size: 1.5rem;
  color: var(--terracotta);
  margin: 2.75rem 0 .85rem;
}

/* Dans une page de texte, chaque titre ouvre une section : un filet et
   de l'air avant, sinon les paragraphes s'enchaînent comme les pages
   d'un livre, sans repos pour l'œil. Le premier titre n'a rien à
   séparer, il vient juste après le chapô. */
.colonne h2 {
  margin-top: 3.75rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--filet-doux);
}
.colonne h2:first-child {
  margin-top: 2rem;
  padding-top: 0;
  border-top: 0;
}
.colonne h2 + p { margin-top: 0; }
.colonne p { margin-bottom: 1.5rem; }

/* Texte justifié, à la demande d'Odile — mais seulement là où la colonne
   est assez large pour le supporter. Mesure faite sur « Ce que vous
   traversez » : à 293 px de colonne, la largeur d'un téléphone, 28 % des
   lignes voient leurs espaces s'étirer au double du normal, avec des
   pointes à 4,7 fois — le paragraphe se troue. Le rapport tombe à 7 %
   au-delà de 480 px de colonne, ce qui correspond à l'écran de 36rem
   ci-dessous ; sur un grand écran plus aucune ligne ne dépasse le
   double.

   La césure, elle, sert dans les deux cas : justifiée, elle resserre les
   espaces ; en drapeau, elle adoucit la dentelure du bord droit. D'où sa
   place hors de la requête de média.

   Restent en drapeau ce qui n'est pas du corps de texte : l'exergue, qui
   est une citation, et la mention, faite de lignes courtes qu'une
   justification écarterait bêtement. */
.colonne p:not(.exergue):not(.mention) { hyphens: auto; }

@media (min-width: 36rem) {
  .colonne p:not(.exergue):not(.mention) { text-align: justify; }
  /* L'accroche de l'accueil vit hors de la colonne de lecture, mais Odile
     l'a voulue justifiée comme le reste. Même seuil, même raison. */
  .bloc-pratique .pratique-accroche { text-align: justify; }
}
h3 {
  font-size: 1.2rem;
  margin: 2rem 0 .6rem;
}

p { margin: 0 0 1.35rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--terracotta-lisible);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:hover { color: var(--terracotta-survol); }

strong { font-weight: 600; }

/* Les numéros de téléphone sont des cibles tactiles : on leur donne
   la surface minimale requise, sans changer l'apparence du texte. */
a[href^="tel:"] {
  display: inline-block;
  padding: .15rem .35rem;
  margin: 0 -.35rem;
}

/* Les adresses longues ne doivent pas déborder de la colonne. */
a { overflow-wrap: anywhere; }

/* Un groupe de mots qui ne se sépare pas en fin de ligne : les parties d'une
   adresse, par exemple. « 21000 » d'un côté et « Dijon » de l'autre, on ne
   lit plus une ville. */
.insecable { white-space: nowrap; }

/* Un lien qui s'ouvre ailleurs doit l'annoncer : sans cela, le visiteur
   perd son bouton Retour sans comprendre pourquoi. Le texte n'est pas
   affiché, il est restitué par les lecteurs d'écran. */
main a[target="_blank"]::after {
  content: " (s'ouvre dans une nouvelle fenêtre)";
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

ul, ol { padding-left: 1.35rem; margin: 0 0 1.35rem; }
li { margin-bottom: .4rem; }

hr {
  border: 0;
  border-top: 1px solid var(--filet);
  margin: 3rem 0;
}

/* ── Boutons ──────────────────────────────────────────────── */

/* Le bouton qu'Odile pose elle-même dans une page, en Markdown :

     [Réserver une consultation en ligne](https://…?class=bouton)

   Grav retire « ?class=bouton » de l'adresse et le donne au lien. Une
   pastille au trait, de la couleur de tous les moyens de prendre
   rendez-vous — le numéro, la réservation du bandeau —, dans la forme
   cerclée des autres liens d'action du site. Elle remplace un pavé plein
   qu'Odile avait dessiné en HTML.

   Au trait et non pleine : Odile présente la réservation en ligne comme
   l'autre porte (« si vous préférez… »), le téléphone restant la première.
   Pleine, la pastille passait devant le numéro.

   Elle reste alignée à gauche, comme tout le contenu de la colonne (voir
   « Axe gauche unique ») : elle prolonge la phrase qui l'annonce, au lieu
   de flotter entre deux blocs. Deux classes par sélecteur : la règle
   générale des liens d'une colonne (zones tactiles) l'emporterait sinon. */
.colonne a.bouton {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--terracotta-lisible);
  background: transparent;
  border: 1px solid var(--terracotta-lisible);
  border-radius: 999px;
  padding: .75rem 1.6rem;
  text-decoration: none;
  text-wrap: balance;   /* s'il faut deux lignes, pas un mot seul sur la seconde */
  hyphens: manual;      /* le paragraphe coupe les mots, pas le bouton */
  transition: background-color .15s ease, border-color .15s ease;
}
/* Sur un téléphone, la pastille tient sur une ligne jusqu'à 360 px de
   large ; en deçà, le texte passe sur deux lignes équilibrées. */
@media (max-width: 26rem) {
  .colonne a.bouton { font-size: .95rem; padding-inline: 1rem; }
}
.colonne a.bouton:hover {
  color: var(--terracotta-survol);
  background: var(--ecru-fonce);
  border-color: var(--terracotta-survol);
}
/* La flèche dit qu'on part ailleurs, vers l'agenda. Elle est dessinée en
   « ::before » puis replacée après le texte (« order ») : le « ::after »
   d'un lien externe porte déjà, pour les lecteurs d'écran, l'annonce
   « s'ouvre dans une nouvelle fenêtre », qui la réduisait à un pixel.
   La flèche elle-même n'est pas lue (« / "" ») ; un navigateur qui ignore
   cette écriture garde la première déclaration. */
.colonne a.bouton::before {
  content: "\2192";
  content: "\2192" / "";
  order: 2;
  transition: transform .15s ease;
}
.colonne a.bouton:hover::before { transform: translateX(.25em); }
@media (prefers-reduced-motion: reduce) {
  .colonne a.bouton,
  .colonne a.bouton::before { transition: none; }
}


/* ── Images ───────────────────────────────────────────────── */

figure { margin: 0 0 2rem; }
figure img,
figcaption {
  font-style: italic;
  font-size: .95rem;
  color: var(--discret-lisible);
  margin-top: .6rem;
  line-height: 1.5;
}

/* Texte accompagné d'une image latérale */
.avec-image {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  max-width: 52rem;
  margin: 0 auto;
}
/* Sur ces pages, le titre s'aligne sur le bord gauche du bloc plutôt
   que sur la colonne de texte : sans cela il paraît flotter. */
.page > h1.titre-large { max-width: 52rem; }
.avec-image .colonne { max-width: var(--lecture); }

/* Accueil : l'aquarelle est posée comme un tableau, entière,
   jamais recadrée ni agrandie au-delà de ses 521 px. */


/* ── Encart doux ──────────────────────────────────────────── */

/* L'encart reprend l'arrondi du reste du site. Le trait terracotta est
   dessiné à l'intérieur plutôt que posé en bordure : une bordure épaisse
   contre un filet fin se coupe en diagonale aux angles, et ce biseau se
   voyait. Dessiné, il est droit, arrondi à ses extrémités, et ne touche
   pas les coins. */
.encart {
  position: relative;
  background: var(--ecru-fonce);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1.5rem 1.75rem 1.5rem 2.15rem;
  margin: 2.25rem 0;
}
.encart::before {
  content: '';
  position: absolute;
  left: 1.2rem;
  /* Le texte ne remplit pas sa ligne : avec un interligne de 1,7, il
     reste 0,35 em de blanc au-dessus et au-dessous. On les retranche
     pour que le trait commence et finisse sur les lettres. */
  top: calc(1.5rem + .35em);
  bottom: calc(1.5rem + .35em);
  width: 3px;
  border-radius: 999px;
  background: var(--terracotta-lisible);
}
.encart p:last-child { margin-bottom: 0; }

@media (max-width: 63.999rem) {
}
@media (max-width: 34rem) {
}


/* ── Mention discrète (signature, RPPS) ───────────────────── */

.mention {
  color: var(--texte);
  font-size: 1rem;
  line-height: 1.55;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filet);
}

/* La mention réunit deux choses de nature différente : qui reçoit, et
   les titres qui l'y autorisent. Uniformément grises et de même corps,
   les quatre lignes se confondaient en un bloc qu'on ne lisait pas.
   Le nom reprend la serif des titres ; les mentions administratives
   passent en retrait, à la manière de celles de la carte latérale. */
.mention-qui {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--sauge-fonce);
  margin-bottom: .55rem;
}
.mention-detail {
  display: block;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--discret-lisible);
}

/* Sur « Déontologie », cette mention énonce le cadre légal et non le
   propos de la page : l'italique l'en distingue. */
.mention-legale { font-style: italic; }


.carte-praticienne {
  background: var(--ecru);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
}

/* Les deux images occupent le même cadre, l'une par-dessus l'autre :
   la carte garde exactement la même hauteur quand elles s'échangent,
   donc rien ne saute sous les yeux du lecteur. */
/* Le cadre se mesure en fraction de piste : c'est ce qui permet de le
   refermer d'une hauteur réelle à zéro, sans hauteur écrite en dur. */
.carte-cadre {
  display: grid;
  grid-template-rows: 1fr;
  margin: 1.4rem 1.4rem 0;
  transition: grid-template-rows .45s ease, margin-top .45s ease;
}
.carte-cadre.se-replie {
  grid-template-rows: 0fr;
  margin-top: 0;
}

.carte-visuel {
  position: relative;
  aspect-ratio: 760 / 950;   /* le cadrage du portrait, tant qu'il est là */
  min-height: 0;             /* sans quoi la piste ne peut pas se fermer */
  border-radius: 10px;
  overflow: hidden;
  /* Le cadre suit l'image qu'il accueille : il se met au carré pour
     l'aquarelle, et reprend le format du portrait quand il revient. */
  transition: aspect-ratio .45s ease;
}
.carte-visuel.montre-motif { aspect-ratio: 1 / 1; }

.carte-visuel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .45s ease;
}
/* Pendant que le cadre se met au carré, le portrait est brièvement
   recadré : on l'ancre haut pour que ce soit le buste qui cède, et
   non le haut du visage. Sans effet au repos, où le cadre est à son
   format exact. */
.carte-portrait { object-position: 50% 15%; }

/* L'aquarelle attend en dessous ; elle ne se montre que le temps où
   le portrait de la page est à l'écran. */
.carte-motif { opacity: 0; }
.carte-visuel.montre-motif .carte-portrait { opacity: 0; }
.carte-visuel.montre-motif .carte-motif    { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .carte-visuel img,
  .carte-cadre { transition: none; }
}

.carte-corps { padding: 1.4rem 1.4rem 1.6rem; }

/* ── Identité ─────────────────────────────────────────────── */

.carte-identite {
  text-align: center;
  padding-bottom: 1.25rem;
}
.carte-nom {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--sauge-fonce);
  line-height: 1.15;
  margin: 0 0 .35rem;
}
.carte-fonction {
  font-size: .87rem;
  line-height: 1.45;
  color: var(--discret-lisible);
  margin: 0;
}

/* ── Rappel du numéro ─────────────────────────────────────────
   Sur l'accueil, le bouton de l'en-tête porte déjà l'appel à l'action :
   ici le numéro se contente d'être disponible, sans rivaliser. */

.carte-rappel {
  text-align: center;
  margin: 0;
  padding-bottom: .2rem;
}
.carte-rappel-libelle {
  display: block;
  font-family: var(--lineale);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--discret-lisible);
  margin-bottom: .15rem;
}
.carte-rappel a {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  padding: .15rem .35rem;
}
.carte-rappel a:hover { text-decoration: underline; }
.carte-note {
  font-size: .84rem;
  line-height: 1.45;
  color: var(--discret-lisible);
  text-align: center;
  margin: .5rem 0 0;
}
/* La réservation en ligne, quand Odile en donne l'adresse : un second moyen,
   à la taille du texte courant, pour que le numéro garde la vedette. */
.carte-en-ligne {
  text-align: center;
  margin: .1rem 0 0;
  font-size: .95rem;
  line-height: 1.3;
}
.carte-en-ligne a {
  display: inline-block;
  padding: .35rem .35rem;   /* cible tactile, sans décaler le texte */
  text-decoration: none;
}
.carte-en-ligne a:hover { text-decoration: underline; }

/* ── Informations ─────────────────────────────────────────── */

.carte-infos {
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet);
}
.carte-infos dt {
  font-family: var(--lineale);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--discret-lisible);
  margin-bottom: .3rem;
}
.carte-infos dd {
  margin: 0 0 1.15rem;
  font-size: .93rem;
  line-height: 1.5;
}
.carte-infos dd:last-child { margin-bottom: 0; }
.carte-infos .discret { color: var(--discret-lisible); }
.carte-infos a { font-size: .89rem; }

.carte-legitimite {
  margin: 1.35rem 0 0;
  padding-top: 1.35rem;
  border-top: 1px solid var(--filet);
  font-size: .78rem;
  line-height: 1.55;
  color: var(--discret-lisible);
  text-align: center;
}

/* ── Rappel du téléphone en fin de page ───────────────────── */

.rappel-appel {
  margin: 3.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet);
  font-size: 1.05rem;
}
.rappel-appel a[href^="tel:"] {
  font-size: 1.4rem;
  font-weight: 600;
  white-space: nowrap;
}


/* ── Coordonnées ──────────────────────────────────────────── */

/* Même dessin et même trait que l'encart : les deux blocs de la page
   Contact se répondent, l'un pour joindre, l'autre pour se repérer. */
.coordonnees {
  position: relative;
  background: var(--ecru-fonce);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1.35rem 1.75rem 1.35rem 2.15rem;
  margin: 1.5rem 0;
}
.coordonnees::before {
  content: '';
  position: absolute;
  left: 1.2rem;
  top: calc(1.35rem + .35em);
  bottom: calc(1.35rem + .35em);
  width: 3px;
  border-radius: 999px;
  background: var(--terracotta-lisible);
}
/* Le numéro était deux fois plus gros que le reste, ce qui déséquilibrait
   le bloc face à celui des informations pratiques. Les deux ont
   maintenant la même typographie et le même trait. */
.coordonnees a[href^="tel:"] { font-weight: 600; }
.coordonnees p { margin: 0; }
.coordonnees p + p { margin-top: .5rem; }

/* ── Repères en psychologie ───────────────────────────────── */

.articles { list-style: none; padding: 0; margin: 2.5rem 0 0; }
.articles > li {
  position: relative;   /* support de la zone cliquable ci-dessous */
  padding: 1.75rem 0;
  border-top: 1px solid var(--filet);
}
/* La liste porte aussi la classe « colonne », dont la règle sur les h2
   pose un filet de section : il doublait celui de l'entrée et ajoutait
   36 px de blanc. Deux classes pour passer devant. */
.colonne.articles h2 {
  font-family: var(--serif);
  color: var(--sauge-fonce);
  font-size: 1.45rem;
  margin: 0 0 .4rem;
  padding-top: 0;
  border-top: 0;
}
.articles h2 a { color: inherit; text-decoration: none; }
.articles h2 a:hover { color: var(--terracotta-lisible); }
/* Le chapô était terracotta sous un titre déjà coloré : deux niveaux se
   valaient. En gris, il redevient ce qu'il est — un résumé. */
.articles .chapo {
  color: var(--discret-lisible);
  margin: 0 0 .75rem;
  line-height: 1.55;
}
/* La date annonce une publication : petites capitales, en tête d'entrée. */
.articles .date {
  margin: 0 0 .35rem;
  font-family: var(--lineale);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--discret-lisible);
}
/* Toute l'entrée est cliquable : le lien du titre s'étend à la carte par
   un calque transparent. Un seul lien dans le DOM, donc une seule annonce
   au lecteur d'écran, et le clic tombe juste où que l'on vise. */
.colonne.articles h2 a::after {
  content: '';
  position: absolute;
  inset: 0;
}
/* Le titre est le lien : c'est lui qui se souligne. « Lire l'article »
   n'est qu'un repère — le souligner coupait le trait sur la marge qui
   le sépare de la flèche. Celle-ci avance d'un cheveu à la place. */
.articles > li:hover h2 a,
.articles > li:focus-within h2 a { color: var(--terracotta-lisible); }
.articles .lire {
  margin: 0;
  font-size: .9rem;
  color: var(--terracotta-lisible);
}
.articles .lire .fleche {
  display: inline-block;
  margin-left: .45em;
  transition: transform .15s ease;
}
.articles > li:hover .fleche,
.articles > li:focus-within .fleche { transform: translateX(.25em); }
@media (prefers-reduced-motion: reduce) {
  .articles .lire .fleche { transition: none; }
}
.article-date {
  color: var(--discret-lisible);
  font-size: .9rem;
  letter-spacing: .03em;
  margin: 0;
}

.article-chapo {
  font-family: var(--serif);
  color: var(--terracotta-lisible);
  font-size: 1.2rem;
  line-height: 1.45;
  margin: -1rem 0 .5rem;
  text-wrap: balance;
}
.bibliographie {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet);
}
.bibliographie h2 {
  font-size: 1.15rem;
  color: var(--sauge-fonce);
  margin: 0 0 .85rem;
}
.bibliographie p,
.bibliographie li {
  font-size: .95rem;
  color: var(--discret-lisible);
  line-height: 1.55;
  margin-bottom: .5rem;
}


/* ── Pied de page ─────────────────────────────────────────── */

.pied {
  background: var(--ecru);
  color: var(--texte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  margin: 0;
  padding: 1.75rem 2rem;
}
/* Le pied en trois colonnes : le contact d'abord, puis les pages du site,
   puis les ressources. Sur une seule ligne, le numéro et « Mentions
   légales » avaient le même poids et six soulignés se disputaient l'œil. */
.pied .interieur { margin: 0; }
.pied-grille {
  display: grid;
  grid-template-columns: minmax(16rem, 1.4fr) 1fr 1fr;
  gap: 2rem 3rem;
}
@media (max-width: 52rem) {
  .pied-grille { grid-template-columns: 1fr; gap: 2rem; }
}

.pied-qui {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--texte);
}
.pied-role,
.pied-adresse {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--discret-lisible);
}
/* Le numéro se colle à son libellé : séparés, on lisait deux informations
   sans rapport. Le libellé passe dessous, il annonce ce qui précède. */
.pied-numero { margin: 1.1rem 0 0; }
.pied-numero a {
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.15;   /* l'interligne du corps de texte creusait le bloc */
  color: var(--terracotta-lisible);
  text-decoration: none;
  /* Cible tactile pleine, sans décaler le texte de son axe. */
  display: inline-block;
  padding: .3rem .4rem;
  margin: -.3rem -.4rem;
}
.pied-numero a:hover { text-decoration: underline; }
/* Le courriel suit le numéro, en retrait : les deux moyens sont donnés,
   mais l'ordre dit lequel Odile préfère. Le rappel « premier contact par
   téléphone » reste dans la colonne de droite, inutile de le répéter. */
.pied-courriel,
.pied-en-ligne { margin: .1rem 0 0; font-size: 1rem; line-height: 1.3; }
.pied-courriel a,
.pied-en-ligne a {
  display: inline-block;
  padding: .2rem 0;
  color: var(--terracotta-lisible);
  text-decoration: none;
  overflow-wrap: anywhere;   /* une adresse longue ne pousse pas la colonne */
}
.pied-courriel a:hover,
.pied-en-ligne a:hover { text-decoration: underline; }
.pied-adresse { margin-top: .2rem; }

/* Les intitulés de colonne reprennent ceux de la colonne de droite —
   HORAIRES, TARIF — pour que le site parle d'une seule voix. */
.pied-titre {
  margin: 0 0 .7rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--discret-lisible);
}
.pied-bloc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .92rem;
}
.pied-bloc li { margin: 0; }
/* Les liens de service se lisent quand on les cherche : gris, sans trait,
   ils ne rivalisent plus avec le numéro. Le survol les souligne. */
.pied-bloc a {
  display: inline-block;
  padding: .3rem 0;
  color: var(--discret-lisible);
  text-decoration: none;
}
.pied-bloc a:hover {
  color: var(--terracotta-lisible);
  text-decoration: underline;
}

.pied-bas {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filet);
  font-size: .82rem;
  color: var(--discret-lisible);
}

/* ── Carte de localisation ────────────────────────────────── */

.carte {
  margin: 1.5rem 0 0;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);   /* le même arrondi que les autres blocs */
  overflow: hidden;
  /* Leaflet peint ses tuiles dans une couche transformée : sans découpe
     explicite, les angles carrés de cette couche débordent de l'arrondi. */
  isolation: isolate;
}
.carte .leaflet-pane,
.carte .leaflet-control-container { border-radius: inherit; }
/* Le lien vers l'itinéraire reprend le dessin des autres liens qui mènent
   ailleurs, avec une flèche sortante : on quitte le site. */
a.lien-carte { margin-top: 1rem; }
/* La flèche est écrite dans le gabarit, pas en pseudo-élément : le
   ::after est déjà pris par la mention « s'ouvre dans une nouvelle
   fenêtre » que les lecteurs d'écran annoncent. L'écart se règle donc
   sur la flèche elle-même, le bouton restant un inline-block. */
a.lien-carte .fleche {
  margin-left: .55em;
  font-size: 1.05rem;
}

/* Marqueur du cabinet, dessiné par nos soins : une goutte blanche qui
   porte le visage d'Odile. Leaflet l'accroche aux coordonnées et la place ;
   nous ne faisons que la dessiner. Elle mesure 54 px de côté, sa pointe
   descend 11 px plus bas — d'où l'ancrage [27, 65] côté script. */
.carte-pin-icone {
  background: none;   /* Leaflet dessine par défaut un carré blanc bordé */
  border: 0;
}
.carte-pin {
  position: relative;
  display: block;
  width: 54px;
  height: 54px;
}
.carte-pin::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 50% 50% 50% 0;   /* trois coins ronds, une pointe en bas */
  transform: rotate(-45deg);
  box-shadow: 0 3px 12px rgba(40, 36, 30, .35);
}
/* Sélecteur volontairement long : leaflet.css impose
   « .leaflet-container .leaflet-marker-pane img { width: auto } », de
   spécificité (0,2,1). Une largeur en pourcentage y était perdue et le
   disque prenait le rapport de la photo — un ovale, avec un liseré deux
   fois plus large sur les côtés qu'en haut. Il faut passer devant. */
.carte .carte-pin-icone .carte-pin img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88%;      /* le disque emplit la goutte, le blanc n'est qu'un liseré */
  height: 88%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 0%;   /* on cadre en haut : le crâne était coupé */
}

.carte {
  height: 22rem;
  background: var(--ecru-fonce);   /* le temps que les tuiles arrivent */
}
/* Les commandes et l'attribution de Leaflet reprennent la typographie du
   site plutôt que celle, plus dure, de la bibliothèque. */
.carte .leaflet-container { font-family: var(--lineale); }
.carte .leaflet-control-attribution {
  font-size: .72rem;
  background: rgba(253, 251, 247, .82);
}
/* Les crédits de la carte — Leaflet, OpenStreetMap — sont les derniers
   liens du site à ne pas se laisser viser au doigt : quatorze pixels de
   haut. Leur taille de texte doit rester celle-là, discrète, sous la
   carte ; c'est la surface tactile qu'on agrandit, en la reprenant
   ensuite en marge négative pour que le bandeau garde sa hauteur. */
.carte .leaflet-control-attribution a {
  display: inline-block;
  padding: .35rem 0;
  margin: -.35rem 0;
  /* « HOT » est un mot de trois lettres : il n'atteignait pas les 24 px
     de large que réclame la même règle. Le plancher ne concerne que lui,
     les autres crédits étant déjà plus longs. */
  min-width: 24px;
  text-align: center;
}
/* Leaflet rend le plan focusable pour qu'on puisse le déplacer aux
   flèches, et lui donne le focus au moindre clic : le cerne d'accessibilité
   encadrait alors toute la carte. Les commandes de zoom, elles, gardent le
   leur — le clavier conserve un repère visible. */
.carte.leaflet-container:focus,
.carte.leaflet-container:focus-visible {
  outline: none;
}
.carte-repli {
  padding: 1.5rem;
  margin: 0;
  font-size: .95rem;
  color: var(--discret-lisible);
}

/* ── Adaptation aux petits écrans ─────────────────────────── */

@media (max-width: 62rem) {
  .accueil,
  .avec-image {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 52rem) {
  body { font-size: 1rem; }

  /* En ligne plutôt qu'en bloc : le mot et son triangle se placent
     alors côte à côte, avec un écart qu'on peut régler. */
  .menu-repliable > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
  }
  .menu-repliable:not([open]) > ul { display: none; }
  .navigation ul { flex-direction: column; gap: 0; padding-bottom: .75rem; }

  /* Le filet net découpait le menu en tranches ; celui des listes du
     site suffit à séparer sans marquer. */
  .navigation ul li { border-top: 1px solid var(--filet); }
  .navigation a {
    padding: .8rem .25rem;
    margin-bottom: 0;
    border-bottom: 0;
  }

  /* Page courante : la couleur d'accent porte l'information, et le trait
     du bureau bascule à la verticale, à hauteur de texte. Sans cette
     bascule il restait couché sous le lien et, ajouté à la bordure
     gauche, dessinait un angle qui ressemblait à un cadre inachevé. */
  .navigation a[aria-current="page"] {
    color: var(--terracotta-lisible);
    padding-left: .85rem;
  }
  .navigation a[aria-current="page"]::after {
    top: 50%;
    right: auto;
    bottom: auto;
    width: 3px;
    height: 1.3em;      /* la hauteur du texte du lien, jambages compris */
    border-radius: 999px;
    transform: translateY(-50%);
  }


  .page { padding-top: 2rem; }

  /* L'aquarelle occupait tout le premier écran : la citation et les
     boutons passaient sous la ligne de flottaison sur la plupart
     des téléphones. */

  /* Boutons pleine largeur : cible plus grande et alignement plus net. */
  .pied .interieur { flex-direction: column; gap: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── Axe gauche unique quand la colonne d'information est présente ──
   La mise en page est déjà asymétrique : contenu à gauche, cartes à
   droite. Tout le contenu partage donc un seul bord gauche, plus rien
   ne flotte de travers. Ces règles viennent après celles qu'elles
   surchargent, sinon le centrage l'emporte. */

@media (min-width: 64rem) {
  .page > h1,
  .page > .colonne,
  .page > figure figcaption,
  .accueil,
  .avec-image,
  .bloc,
  .rappel-appel {
    margin-left: 0;
    margin-right: 0;
  }

  /* Le bloc de contenu remplit sa colonne. « margin: auto », hérité de
     la règle générale, le faisait se dimensionner sur son texte : il
     restait en retrait du bandeau et l'écart avec le panneau paraissait
     plus grand que l'espacement vertical. */
  .page {
    max-width: none;
    margin: 0;
    padding: 3rem 3rem 3.5rem;
  }
  /* La page d'accueil respire davantage que les pages intérieures. */
  .page:has(.identite) { padding: 4rem 3.5rem 4.5rem; }

  .avec-image { max-width: none; }
  .page > h1.titre-large { max-width: none; }
  .page > figure { max-width: 46rem; }
}


/* ═══════════════════════════════════════════════════════════════
   ACCUEIL INFORMATIONNEL
   Le site n'est pas un livre qu'on lit mais un annuaire qu'on
   consulte : chaque bloc répond à une question qu'on se pose avant
   d'appeler un psychologue.
   ═══════════════════════════════════════════════════════════════ */

.aquarelle-entete {
  display: block;
  width: 100%;
  max-width: 20rem;
  margin: 0 0 2rem;
  border-radius: var(--rayon);
}

/* ── En-tête d'accueil ────────────────────────────────────────
   Pas d'image : elle rivalisait avec le portrait de la carte. La
   citation porte l'entrée, l'identité passe en surtitre. */

.identite { padding: 1.5rem 0 0; }

/* Le métier était écrit au corps des liens du menu, trois fois plus
   petit que la citation : on lisait une jolie phrase avant de savoir
   chez qui on était. Il monte donc au second rang, juste sous le nom,
   et la citation redescend d'autant. */
.identite-titre {
  margin: 0 0 2.4rem;
  max-width: none;
  letter-spacing: 0;
}
.identite-nom,
.identite-fonction { display: block; }

.identite-nom {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--sauge-fonce);
  line-height: 1.2;
  margin-bottom: .25rem;
}
.identite-fonction {
  font-family: var(--serif);
  font-size: 1.38rem;
  font-weight: 400;
  color: var(--sauge-lisible);
  line-height: 1.35;
  text-wrap: balance;
}

.identite-citation {
  font-family: var(--serif);
  font-style: italic;
  color: var(--sauge);
  font-size: clamp(1.7rem, 3.3vw, 2.5rem);
  line-height: 1.25;
  margin: 0;
  /* Deux lignes larges plutôt que trois étroites : la phrase occupe
     la colonne au lieu de s'y blottir. */
  max-width: 30ch;
  text-wrap: balance;
}

/* Un accueil respire davantage qu'une page intérieure. */
.accueil-texte, .intro {
  margin-top: 2.75rem;
  font-size: 1.1rem;
  line-height: 1.7;
}

/* ── Les quatre informations qu'on cherche en premier ─────── */


.intro { margin-bottom: 1rem; }

/* ── Sections ─────────────────────────────────────────────── */

.section {
  margin-top: 4.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--filet-doux);
}
.section > h2 {
  font-family: var(--serif);
  color: var(--sauge-fonce);
  font-size: 1.6rem;
  margin: 0 0 1.75rem;
}

.page-chapo {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--terracotta-lisible);
  margin: -1.25rem 0 1.75rem;
  /* Même largeur que le corps du texte : élargi, le chapô débordait de
     la colonne de lecture et désalignait toute la page. Pas
     d'équilibrage non plus : « balance » rend les lignes égales au lieu
     de les remplir, et le texte semblait s'arrêter avant le bord. */
  max-width: var(--lecture);
}

/* ── Le cabinet en images ────────────────────────────────── */

.section-intro {
  color: var(--discret-lisible);
  margin: -.75rem 0 1.35rem;
  max-width: var(--lecture);
  line-height: 1.65;
}

/* Mosaïque : une vue dominante, deux détails, une vue large.
   Les légendes vivent dans l'attribut alt — les afficher sous chaque
   vignette cassait la grille et alourdissait la section. */

/* Mosaïque : une vue dominante, deux détails, une vue large. Toutes
   les photos n'ont pas le même poids, et la grille le dit. Les légendes
   vivent dans l'attribut alt ; on les lit en plein écran, où chaque
   photo occupe enfin la même place que les autres. */
.galerie {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 9.5rem;
  gap: .6rem;
}
.galerie li { margin: 0; }
.galerie li:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.galerie li:nth-child(4) { grid-column: span 2; }
.galerie .galerie-reserve { display: none; }   /* réservée au plein écran */

.galerie-vue {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 8px;
  overflow: hidden;
  cursor: default;
}
.galerie-vue img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .5s ease;
}

/* L'agrandissement ne s'annonce que si le script a pris la main. */
.galerie[data-visionneuse] .galerie-vue { cursor: zoom-in; }
.galerie[data-visionneuse] .galerie-vue:hover img { transform: scale(1.04); }

/* Un seul dessin pour tout ce qui mène ailleurs : le bouton de la
   galerie et les liens de fin de section. Cerclé et discret, il se
   distingue d'un lien dans le corps du texte sans crier comme un
   appel à l'action. */
.galerie-action,
.suite { margin: 1.6rem 0 0; }

.galerie-tout,
a.lien-suite {
  display: inline-block;
  font: inherit;
  font-size: .95rem;
  color: var(--terracotta-lisible);
  background: none;
  border: 1px solid var(--filet);
  border-radius: 999px;
  padding: .6rem 1.3rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease;
}
.galerie-tout:hover,
a.lien-suite:hover { border-color: var(--terracotta-lisible); }
.galerie-action:not([data-visionneuse]) { display: none; }

.cabinet-mot {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--sauge-fonce);
  max-width: var(--lecture);
  margin: 2rem 0 0;
}

/* ── Visionneuse plein écran ──────────────────────────────── */

.visionneuse {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: var(--fond-page);
  color: var(--texte);
}
.visionneuse::backdrop { background: rgba(30, 28, 24, .82); }
.visionneuse[open] {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 4.5rem;
  align-items: center;
}

/* La légende reste sous la photo, pas au pied de l'écran : le groupe
   est centré ensemble, ce qui tient aussi sur un écran haut et étroit. */
.visionneuse-scene {
  margin: 0;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 1rem;
  height: 100dvh;
  padding: 3.5rem 0 2rem;
}
.visionneuse-scene img {
  width: 100%;
  max-height: calc(100dvh - 9rem);
  object-fit: contain;
  border-radius: 6px;
}
.visionneuse-scene figcaption {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .9rem;
  font-size: .95rem;
  color: var(--discret-lisible);
}
.visionneuse-compteur { font-variant-numeric: tabular-nums; }

/* Les chevrons du serif sont trop fins pour se détacher d'une photo :
   on les pose sur une pastille et on les prend à la linéale. Sélecteurs
   à deux classes, sinon la règle générale des boutons l'emporterait. */
.visionneuse .visionneuse-pas,
.visionneuse .visionneuse-fermer {
  font-family: var(--lineale);
  color: var(--sauge-fonce);
  cursor: pointer;
  line-height: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ecru);
  border: 1px solid var(--filet);
}
.visionneuse .visionneuse-pas {
  width: 3rem;
  height: 3rem;
  font-size: 1.9rem;
  padding: 0 0 .18em;   /* le chevron ne porte pas sur sa ligne de base */
  justify-self: center;
}
.visionneuse .visionneuse-fermer {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.05rem;
  padding: 0;
}
.visionneuse .visionneuse-pas:hover,
.visionneuse .visionneuse-fermer:hover {
  color: var(--terracotta-lisible);
  border-color: var(--terracotta-lisible);
}

@media (max-width: 44rem) {
  .galerie { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 8rem; }
  .galerie li:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .galerie li:nth-child(4) { grid-column: span 2; }
  .visionneuse[open] { grid-template-columns: 2.8rem minmax(0, 1fr) 2.8rem; }
  .visionneuse-pas { font-size: 2rem; padding: .5rem; }
  .visionneuse-scene { padding: 3.5rem 0 1.5rem; }
}

/* Plan du site : l'arborescence en clair, les niveaux par le retrait. */
.plan ul { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.plan ul ul { margin: .5rem 0 1rem 1.4rem; padding-left: 1rem; border-left: 1px solid var(--filet-doux); }
.plan li { margin: 0 0 .55rem; }
.plan > ul > li > a { font-family: var(--serif); font-size: 1.15rem; }

/* Une image de respiration au milieu du texte : pleine largeur, elle
   coupe le fil sans flotter. Le paragraphe qui l'enveloppe est neutralisé
   pour qu'elle échappe à la règle de flottement ci-dessous. */
/* L'image est un temps d'arrêt, pas la suite du paragraphe précédent :
   le même filet que les titres de section la détache de ce qui la
   précède. Celui du titre suivant la referme. */
.colonne figure.respiration {
  margin: 3.5rem 0;
  padding: 2.25rem 0;
  border-top: 1px solid var(--filet-doux);
  border-bottom: 1px solid var(--filet-doux);
}
/* Le titre qui suit n'a plus de filet à poser : la respiration ou la
   phrase vient de fermer le sien, deux traits se toucheraient. */
.colonne figure.respiration + h2,
.colonne .exergue + h2 {
  margin-top: 3rem;
  padding-top: 0;
  border-top: 0;
}
.colonne figure.respiration p:has(> img:only-child) {
  float: none;
  width: 100%;
  margin: 0;
}
.colonne figure.respiration img { border-radius: var(--rayon); }

/* En conclusion de page, le filet du bas n'a plus rien à séparer : la
   respiration comme la phrase en exergue ne gardent que celui du haut. */
.colonne figure.respiration:last-child,
.colonne .exergue:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* L'alerte et l'image qui la suit ferment la page ensemble : le filet
   se pose avant l'encart, pas entre eux. Il ne reste qu'un espace, plus
   court que celui des sections, pour les tenir liés. */
.colonne :has(+ .encart + figure.respiration) {
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--filet-doux);
}
.colonne .encart:has(+ figure.respiration) { margin-bottom: 1.5rem; }
.colonne .encart + figure.respiration {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Une image seule dans son paragraphe s'intègre au texte plutôt que de
   le couper : carrée, à droite, la lecture se poursuit autour d'elle.
   Les titres remettent le flux à plat, pour qu'aucune image ne déborde
   sur la section suivante. */
/* La colonne s'élargit quand elle accueille une image flottante : sans
   cela, le texte qui la contourne tomberait à trente-cinq caractères par
   ligne, sous le seuil de confort.

   Le « > » est essentiel : seule l'image flottante est fille directe de
   la colonne. Celle d'une « figure.respiration » occupe toute la largeur
   et n'a rien à faire contourner ; sans cette précision elle élargissait
   sa page de 32 px de plus que les autres, sans raison. */
.colonne:has(> p > img:only-child) { max-width: 42rem; }

.colonne p:has(> img:only-child) {
  float: right;
  width: min(38%, 15rem);
  margin: .45rem 0 1.3rem 2rem;
}
.colonne p > img:only-child {
  display: block;
  width: 100%;
  border-radius: var(--rayon);
}
.colonne h2,
.colonne h3 { clear: both; }

/* Sous cette largeur, le texte n'a plus la place de contourner. */
@media (max-width: 44rem) {
  .colonne p:has(> img:only-child) {
    float: none;
    width: 100%;
    margin: 1.4rem 0;
  }
}

/* Retour vers la page mère. Il reprend le dessin des autres liens qui
   mènent ailleurs — cerclé, terracotta — plutôt qu'un chevron gris :
   un chemin de retour qu'on ne voit pas ne sert à personne. */
.fil { margin: 0 0 1.6rem; }
.fil a {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  font-size: .95rem;
  color: var(--terracotta-lisible);
  background: none;
  border: 1px solid var(--filet);
  border-radius: 999px;
  padding: .55rem 1.2rem .55rem 1rem;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.fil a::before {
  content: '\2190';          /* une vraie flèche, lisible d'un coup d'œil */
  font-family: var(--lineale);
  font-size: 1.05rem;
  line-height: 1;
}
.fil a:hover {
  border-color: var(--terracotta-lisible);
  background: var(--ecru-fonce);
}

/* ── Entrées vers les pages de détail ─────────────────────────
   Une page de deuxième niveau pose le sujet et ouvre sur trois pages.
   Chaque entrée est une porte : assez large pour qu'on la voie, assez
   sobre pour ne pas ressembler à un bouton d'action. */

.entrees {
  list-style: none;
  padding: 0;
  margin: 2.75rem 0 0;
  display: grid;
  gap: .9rem;
}
.entrees li { margin: 0; }

.entrees a {
  display: block;
  padding: 1.4rem 1.6rem;
  background: var(--ecru);
  border: 1px solid var(--filet-doux);
  border-radius: var(--rayon);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, background-color .18s ease;
}
.entrees a:hover {
  border-color: var(--terracotta-lisible);
  background: var(--ecru-fonce);
}

.entree-titre {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--sauge-fonce);
  line-height: 1.25;
}
.entrees a:hover .entree-titre { color: var(--terracotta-lisible); }

.entree-apercu {
  display: block;
  margin-top: .45rem;
  font-size: .97rem;
  line-height: 1.55;
  color: var(--discret-lisible);
  max-width: var(--lecture);
}

/* Les motifs : on les montre tels quels plutôt que de les résumer.
   Le lecteur reconnaît sa situation avant même d'ouvrir la page. */
.entree-liste {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .55rem;
  margin-top: .8rem;
}
.entree-liste span {
  font-size: .9rem;
  line-height: 1.3;
  color: var(--discret-lisible);
  padding: .3rem .7rem;
  border: 1px solid var(--filet-doux);
  border-radius: 999px;
}

/* ── L'objection levée ────────────────────────────────────── */

/* Pas de filet en marge : ce paragraphe n'est pas une citation, ce
   sont ses mots au même titre que le reste, et le terracotta est
   réservé à ce qui se clique. Le corps et la couleur suffisent à le
   détacher. */
.bloc-pratique .pratique-accroche {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--sauge-fonce);
  max-width: var(--lecture);
  margin: 0 0 1rem;
}

/* Citation de clôture, sur la page « Ma pratique » */
/* La phrase et l'image de respiration marquent un temps d'arrêt au
   milieu de la lecture : deux filets suffisent à les détacher, sans
   ajouter un cadre de plus à une page qui en compte déjà. */
.exergue {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--sauge);
  margin: 3.25rem 0;
  padding: 2.25rem 0;
  border-top: 1px solid var(--filet-doux);
  border-bottom: 1px solid var(--filet-doux);
  text-wrap: balance;
}

/* ── Ce que vous traversez ────────────────────────────────────
   Six dépliants plutôt que six cartes : la section tient en un écran,
   et chacun n'ouvre que ce qui le concerne. Les filets sont volontairement
   ténus — ils séparent sans découper. */

.depliants details { border-bottom: 1px solid var(--filet-doux); }
/* Le dernier filet ne sépare de rien : il barrerait la fin de la liste. */
.depliants details:last-of-type { border-bottom: 0; }

.depliants summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  cursor: pointer;
  list-style: none;
}
.depliants summary::-webkit-details-marker { display: none; }
.depliants summary::after {
  content: '+';
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--terracotta-lisible);
  flex-shrink: 0;
}
.depliants details[open] summary::after { content: '–'; }
.depliants summary:hover .depliant-titre { color: var(--terracotta-lisible); }

.depliant-titre {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--sauge-fonce);
  line-height: 1.3;
}
.depliant-extrait {
  margin: 0;
  padding: 0 2rem .95rem 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--discret-lisible);
}

/* ── Comment ça se passe ──────────────────────────────────── */


/* Illustration au trait : elle rend concret un parcours qui inquiète,
   sans rien promettre. Décorative au sens technique — le texte qui suit
   dit tout, donc elle est masquée aux lecteurs d'écran. */


/* ── Ce que vous trouverez ici ────────────────────────────────
   Une composition typographique plutôt qu'un nuage d'étiquettes :
   les mots respirent, les tailles créent le rythme, rien n'est encadré. */

.mots {
  list-style: none;
  padding: 0;
  margin: 2.2rem 0 1.2rem;
  position: relative;
  height: 19.5rem;
  perspective: 800px;            /* c'est elle qui creuse la scène */
  perspective-origin: 50% 45%;
}

/* Chaque mot est posé à sa place et à sa distance. Le navigateur trie
   lui-même ce qui passe devant : les mots proches masquent les autres,
   et l'échelle vient de la perspective, pas d'un corps de texte forcé. */
.mot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  margin: 0;
  font-family: var(--serif);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--sauge-fonce);
  transform: translate3d(-50%, -50%, var(--z));
  opacity: var(--opacite);
}

/* Valeurs de repli, déclarées avant les plans : un onzième mot ajouté
   par Odile atterrit au centre plutôt que dans le coin haut gauche. */
.mot { --x: 50%; --y: 50%; --z: 0px; --opacite: .9; --derive: 10px; }

/* Trois plans. Le lointain est plus pâle et à peine flou : c'est la
   profondeur de champ qui fait qu'un nuage a un devant et un fond. */
.mot-fort {
  --z: 140px;
  --opacite: 1;
  --derive: 28px;
  font-size: 1.5rem;
  font-weight: 600;
}
.mot-moyen {
  --z: 0px;
  --opacite: .96;
  --derive: 14px;
  font-size: 1.18rem;
}
.mot-discret {
  --z: -215px;
  --opacite: .74;
  --derive: 5px;
  font-size: 1.34rem;   /* l'éloignement le réduit d'un bon quart */
  font-style: italic;
  filter: blur(.4px);
}

/* Les places du nuage. Les trois mots du fond sont répartis sur les
   trois étages plutôt que groupés en haut : l'italique doit essaimer,
   sinon il fait bloc et laisse un trou ailleurs.
   Un mot du fond frôle un mot du premier plan :
   assez pour qu'on voie lequel passe devant, jamais au point de lui
   manger des lettres — un mot amputé n'est pas un mot lointain, c'est
   un mot cassé. Ces valeurs ont été réglées sur le rendu, pas sur le
   papier : la perspective déplace ce qu'elle projette, d'autant plus
   que le mot est loin du plan neutre. */
/* Positions revues après les corrections d'Odile de septembre 2026 : trois
   formules se sont nettement allongées — « Sans jugement » (130 px) est devenu
   « Une écoute accueillante » (253 px), « Sur mesure » « Une pratique ajustée
   à chacun », « Je serai là » « Une présence engagée ».

   Les valeurs ci-dessous ne sont pas les positions vues à l'écran : la
   perspective déplace chaque mot selon sa profondeur. Mesuré sur le rendu, un
   mot « fort » (z = 140 px) est projeté 11 % plus loin du centre que sa valeur
   nominale, un « discret » (z = -215 px) 26 % plus près. Les nominales ci-après
   ont donc été calculées à l'envers, depuis la composition voulue : cinq bandes
   horizontales, les mots forts répartis plutôt que groupés d'un côté. */
.mot:nth-child(1)  { --x: 54.5%; --y: 24.3%; }  /* Une écoute attentive */
.mot:nth-child(2)  { --x: 30.2%; --y:  6.3%; }  /* Une écoute accueillante */
.mot:nth-child(3)  { --x: 12.4%; --y: 48.0%; }  /* Confidentialité */
.mot:nth-child(4)  { --x: 68.0%; --y: 60.3%; }  /* À votre rythme */
.mot:nth-child(5)  { --x: 87.6%; --y: 26.5%; }  /* Un cadre sûr */
.mot:nth-child(6)  { --x: 73.7%; --y:  5.0%; }  /* Une pratique ajustée à chacun */
.mot:nth-child(7)  { --x: 39.2%; --y: 52.8%; }  /* Votre manière d'être */
.mot:nth-child(8)  { --x:  9.7%; --y: 25.9%; }  /* Sincérité */
.mot:nth-child(9)  { --x: 76.9%; --y: 48.0%; }  /* Le respect de qui vous êtes */
.mot:nth-child(10) { --x: 23.1%; --y: 79.7%; }  /* Libre d'avancer à votre mesure */
.mot:nth-child(11) { --x: 45.5%; --y: 76.5%; }  /* Une présence engagée */
/* ── Profondeur au défilement ─────────────────────────────────
   Les plans dérivent à des vitesses différentes : le premier plan
   avance nettement, le fond bouge à peine. C'est la parallaxe qui
   achève de creuser la scène. Piloté par le défilement, en CSS natif :
   aucun script, et rien ne bouge si le navigateur l'ignore. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mot {
      animation: derive linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 50%;
      will-change: transform;
    }
    /* Seule la position bouge. L'opacité de chaque plan est acquise
       une fois pour toutes : les mots sont lisibles dès qu'ils sont
       à l'écran, quelle que soit la position du défilement. */
    @keyframes derive {
      from { transform: translate3d(-50%, calc(-50% + var(--derive)), calc(var(--z) - 60px)); }
      to   { transform: translate3d(-50%, -50%, var(--z)); }
    }
  }
}

/* Écran étroit : la scène rétrécit avec lui, sinon les mots longs
   se marchent dessus. */
@media (max-width: 60rem) {
  .mots { height: 18rem; perspective: 640px; }
  .mot-fort { font-size: 1.3rem; }
  .mot-moyen { font-size: 1.05rem; }
  .mot-discret { font-size: .96rem; }
}

/* Sous cette largeur, plus aucun nuage ne tient : les mots reprennent
   le fil de la lecture, en gardant leurs trois tailles. */
@media (max-width: 44rem) {
  .mots {
    position: static;
    height: auto;
    perspective: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem 1.1rem;
  }
  .mot {
    position: static;
    transform: none;
    filter: none;
    opacity: 1;
    animation: none;
  }
  .mot-fort { font-size: 1.3rem; }
  .mot-moyen { font-size: 1.08rem; }
  .mot-discret { font-size: 1rem; }
}

/* ── Qui je suis ──────────────────────────────────────────── */

/* Le titre reprend la teinte des autres sections : il était en
   terracotta parce qu'il n'était pas enfant direct de .section. */
.presentation > h2 {
  font-family: var(--serif);
  color: var(--sauge-fonce);
  font-size: 1.6rem;
  margin: 0 0 1.75rem;
}

.presentation-corps {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.presentation-corps img {
  width: 100%;
  max-width: 521px;
  border-radius: var(--rayon);
}

/* Trois faits vérifiables, séparés par un filet plutôt que pointés
   par des puces : plus calme, et cohérent avec les dépliants. */
.points-forts { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.points-forts li {
  padding: .8rem 0;
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  border-bottom: 1px solid var(--filet-doux);
}
.points-forts li:first-child { padding-top: 0; }
/* Le dernier filet ne sépare de rien : il ne fait que barrer la fin. */
.points-forts li:last-child { border-bottom: 0; }

@media (max-width: 44rem) {
  .presentation-corps { grid-template-columns: 1fr; gap: 1.5rem; }
  .presentation-corps img { max-width: 13rem; }
}

/* ── Sommaire de la page « Consulter » ────────────────────── */

/* Un titre atteint par une ancre ne doit pas passer sous la
   barre de navigation collée. */
.colonne h2[id] { scroll-margin-top: 6rem; }

@media (max-width: 40rem) {
  .identite { grid-template-columns: 1fr; gap: 1.5rem; }
  .presentation { grid-template-columns: 1fr; }
  .presentation img { max-width: 11rem; }
}

/* ── Zones tactiles ───────────────────────────────────────── */

/* Un lien mesuré au doigt, pas à la souris. Plusieurs liens du site
   n'offraient qu'une vingtaine de pixels de haut : la hauteur d'une ligne
   de texte. Sur un téléphone, viser cela demande de l'application, et les
   personnes qui consultent ce site ne sont pas toujours en état d'être
   appliquées.

   Deux traitements, selon la nature du lien.

   Les liens posés dans une phrase restent au fil du texte : le rembourrage
   d'un élément « inline » agrandit la surface que le doigt peut toucher
   sans écarter les lignes ni décaler quoi que ce soit. La mise en page ne
   bouge pas d'un pixel, à l'écran comme à l'impression. */
.colonne p a,
.coordonnees a,
.encart a,
.bibliographie a {
  padding-top: .35rem;
  padding-bottom: .35rem;
}

/* Les liens qui servent à naviguer — le plan du site, le renvoi vers la
   page d'accès — ne sont pas pris dans une phrase : ils peuvent occuper
   leur propre bloc. Le rembourrage est alors repris en marge négative,
   pour que la colonne garde exactement la hauteur qu'elle avait. */
.plan a,
.carte-infos dd a,
.pied-bloc a {
  display: inline-block;
  padding: .4rem 0;
  margin: -.4rem 0;
}

/* Les entrées du plan étaient trop serrées pour que deux zones agrandies
   ne se touchent pas : on leur donne l'écart qui les sépare vraiment. */
.plan li { margin-bottom: .95rem; }
.pied-bloc li + li { margin-top: .35rem; }

/* ── Impression ───────────────────────────────────────────── */

@media print {
  .navigation, .saut-contenu { display: none; }
  body { font-size: 11pt; background: #fff; }
  .bandeau, .pied { background: none; color: #000; }
  a { color: #000; }
}