/* =========================================================================
   v2.css - Composants de la version MULTI-PAGES (maquette d'étude, 2026-09-28)
   À charger APRÈS tokens.css + base.css + site.css (cf. _partials/tete.html).
   site.css est une copie INCHANGÉE de celle du site actuel : tout ce qui est
   propre à la v2 vit ici, pour que l'écart entre les deux versions se lise
   dans un seul fichier. Tokens seulement, aucune couleur hors palette.

   SOMMAIRE
     1. Ancres, <main> cible du lien d'évitement
     2. Navigation : page en cours (aria-current)
     2b. Sous-menu « À propos » (desktop : panneau ; tiroir : indenté)
     3. En-tête de page intérieure (.psy-pagehead) : surtitre, H1 cursif,
        dégradé qui glisse sous le header, pollen léger
     4. Pages publics (2026-09-28, retour au texte strict de la V1) :
        en-tête à fiche, chapeau, grille texte / exergue, rangées, trio
        (sans numéros depuis le 2026-09-29)
     5. Tons de section (.psy-ton--*), sections génériques (.psy-v2-bloc),
        filigranes des pages intérieures
     6. Accueil : « Qui suis-je » court, portes vers les pages, approche
        résumée, lien « En savoir plus », coutures recalculées
     8. Bande de fin de page (.psy-v2-bande) : rendez-vous, liens croisés,
        urgences
     9. Reveals discrets des pages intérieures
    10. prefers-reduced-motion  ← TOUJOURS EN DERNIER
   ========================================================================= */

/* =========================================================================
   1. ANCRES + <main> CIBLE DU LIEN D'ÉVITEMENT
   ========================================================================= */
.psy-v2-main [id],
#formations,
#qui-suis-je {
  scroll-margin-top: calc(var(--header-h) + var(--space-sm));
}
/* <main tabindex="-1"> reçoit le focus du lien d'évitement : pas d'anneau
   sur un conteneur de page entier (même parti que .psy-legal). */
.psy-v2-main:focus { outline: none; }
.psy-v2-main:focus-visible { box-shadow: none; }

/* =========================================================================
   2. NAVIGATION : PAGE EN COURS
   Desktop : le filet doré du survol, figé (même signal que le pied de
   page, qui porte déjà aria-current depuis le 2026-09-27). Tiroir mobile :
   le filet de survol n'y existe pas (display: none), donc un filet doré à
   gauche + graisse 700. Le signal ne repose jamais sur la couleur seule.
   ========================================================================= */
.psy-nav__link[aria-current="page"] { color: var(--vert-foret); }
.psy-nav__link[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 1023px) {
  .psy-nav__link[aria-current="page"] {
    font-weight: var(--fw-bold);
    box-shadow: inset 3px 0 0 var(--dore-tournesol);
    padding-inline-start: var(--space-sm);
  }
}

/* =========================================================================
   2b. SOUS-MENU « À PROPOS » (demande d'Aurélie, 2026-09-29)
   Markup et motif : _partials/en-tete.html (disclosure navigation). JS :
   site.js §1bis (survol avec délais, bouton, Échap, sortie du focus).
   DESKTOP (>= 1024) : petit panneau crème sous le lien, filet vert tendre,
   ombre --shadow-md, rayon --radius-md : le vocabulaire des fiches, rien
   de nouveau. Liens de 44 px de haut (WCAG 2.5.5). Chevron 16 px dans une
   cible de 24 x 24 (WCAG 2.5.8), qui pivote quand c'est ouvert.
   ZONE TAMPON : le ::before du panneau comble l'écart lien -> panneau ;
   la souris qui descend ne quitte jamais le <li> (plus le délai de
   fermeture de 300 ms côté JS).
   Mouvement : fondu + 4 px, 200 ms (--dur-micro), coupé en reduced-motion.
   TIROIR (< 1024) : bouton masqué, sous-liens toujours visibles, indentés
   sous « À propos » avec un filet vertical (pas de survol sur tactile).
   ========================================================================= */
/* Le groupe reste en flux EN LIGNE (et non flex) : le lien garde ainsi
   exactement la ligne de base des autres liens du menu (mesuré : en flex,
   « À propos » remontait de 1,6 px). */
.psy-nav__groupe { display: block; }
.psy-nav__sous-bouton {
  display: inline-grid;
  vertical-align: middle;
  margin-inline-start: var(--space-3xs);
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--encre);
  cursor: pointer;
}
.psy-nav__sous-bouton svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-micro) var(--ease-doux);
}
.psy-nav__item--sous.is-open .psy-nav__sous-bouton svg { transform: rotate(180deg); }
@media (hover: hover) {
  .psy-nav__sous-bouton:hover { color: var(--vert-foret); background: var(--vert-brume); }
}
.psy-nav__sous {
  list-style: none;
  margin: 0;
  padding: 0;
}
.psy-nav__sous-lien {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  color: var(--encre);
  text-decoration: none;
}
@media (min-width: 1024px) {
  .psy-nav__item--sous { position: relative; }
  .psy-nav__sous {
    position: absolute;
    top: calc(100% + var(--space-xs));
    left: calc(-1 * var(--space-sm));
    z-index: 1;
    min-width: max-content;
    padding: var(--space-2xs);
    background: var(--creme);
    border: 1px solid var(--vert-tendre);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dur-micro) var(--ease-sortie),
                transform var(--dur-micro) var(--ease-sortie),
                visibility 0s linear var(--dur-micro);
  }
  /* Zone tampon : couvre l'écart de 12 px entre le lien et le panneau. */
  .psy-nav__sous::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: calc(var(--space-xs) + 2px);
  }
  .psy-nav__item--sous.is-open > .psy-nav__sous,
  .psy.no-js .psy-nav__item--sous:hover > .psy-nav__sous,
  .psy.no-js .psy-nav__item--sous:focus-within > .psy-nav__sous {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--dur-micro) var(--ease-doux),
                transform var(--dur-micro) var(--ease-doux),
                visibility 0s;
  }
  .psy-nav__sous-lien {
    padding-inline: var(--space-sm);
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }
  @media (hover: hover) {
    .psy-nav__sous-lien:hover { background: var(--vert-brume); color: var(--vert-foret); }
  }
}
@media (max-width: 1023px) {
  .psy-nav__sous-bouton { display: none; }
  .psy-nav__sous {
    margin-top: var(--space-2xs);
    margin-inline-start: var(--space-2xs);
    padding-inline-start: var(--space-sm);
    border-inline-start: 1px solid var(--vert-tendre);
  }
  .psy-nav__sous-lien { font-size: var(--fs-body); font-weight: var(--fw-medium); }
}
@media (max-width: 1023px) and (max-height: 520px) {
  .psy-nav__sous { margin-top: 0; }
  .psy-nav__sous-lien { min-height: 36px; font-size: var(--fs-small); }
}

/* =========================================================================
   3. EN-TÊTE DE PAGE INTÉRIEURE (.psy-pagehead)
   Avis DESIGNER : surtitre, H1 cursif, un filigrane, un pollen léger.
   - Même geste que le hero de l'accueil (site.css §3) : margin-top
     négatif + padding-top du même montant, le dégradé monte jusqu'au bord
     de l'écran derrière le header transparent. Plus court : ce n'est pas
     un plein écran, c'est une entrée de page.
   - Fond : halo brume en haut à droite qui se fond dans le CRÈME. Le bas
     de l'en-tête est donc crème pur : la couture avec la première section
     (toujours ivoire) est franche, et le filigrane qui la chevauche lit
     crème en haut, ivoire en bas (le cas « non compensé » de la RÈGLE
     D'ENCRE, site.css §3c).
   - H1 en Hurricane, comme les H2 de l'accueil et le H1 des pages
     légales. Réserve d'encre identique (base.css, h2) : la boîte englobe
     les boucles de la cursive, le texte ne bouge pas.
   - overflow: hidden : borne le pollen à l'en-tête. Pas de z-index ni
     d'isolation : le contenu (.container, --z-contenu) doit rester
     au-dessus du pollen (--z-pollen) dans la pile de la racine.
   ========================================================================= */
.psy-pagehead {
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(var(--space-xl), 7vw, var(--space-3xl)));
  padding-bottom: clamp(var(--space-xl), 6vw, var(--space-2xl));
  background: radial-gradient(90% 130% at 88% 0%, var(--vert-brume) 0%, var(--creme) 62%);
}
.psy-pagehead__inner .t-overline { color: var(--vert-sauge); }
.psy-pagehead__titre {
  margin-top: var(--space-2xs);
  font-family: var(--font-manuscrite);
  font-size: clamp(2.75rem, 1.9rem + 3.4vw, 5rem); /* 44 -> 80 */
  line-height: var(--lh-h2-manuscrit);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: normal;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  max-width: 17em;
  --encre-g: 0.3em;
  --encre-d: 0.4em;
  --encre-bas: 0.06em;
  padding: 0 var(--encre-d) var(--encre-bas) var(--encre-g);
  margin-inline: calc(-1 * var(--encre-g)) calc(-1 * var(--encre-d));
  margin-bottom: calc(-1 * var(--encre-bas));
}
.psy-pagehead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
@media (max-width: 767px) {
  .psy-pagehead__actions .psy-btn { width: 100%; }
  /* Mobile : 32 px sous le header au lieu de 64. Une entrée de page n'a
     pas à respirer comme le hero plein écran de l'accueil, et chaque
     pixel rapproche le bouton de rendez-vous du premier écran (§4b). */
  .psy-pagehead { padding-top: calc(var(--header-h) + var(--space-md)); }
}

/* Pollen léger : le composant de l'accueil (site.css §3b), confiné à
   l'en-tête au lieu d'être fixé à l'écran. */
.psy-pollen--entete {
  position: absolute;
  inset: 0;
}

/* =========================================================================
   4. PAGES PUBLICS (Adultes, Enfants & ados, Familiale)
   Refonte DESIGNER du 2026-09-28, après retrait des encadrés : chaque page
   ne porte plus que le texte de la V1 (~200 à 400 mots). Parti pris : une
   page COURTE mais COMPOSÉE, plutôt qu'une colonne de prose isolée dans
   des aplats. Aucun texte ajouté ; la matière visuelle vient de la mise en
   page, d'une exergue (fragment littéral, aria-hidden), du portrait (bande)
   et des filigranes.
   ========================================================================= */

/* 4a. EN-TÊTE À FICHE (.psy-pagehead--fiche). La fiche tarif de la V1 monte
   dans l'en-tête, EN REGARD du H1 (>= 1024 px) : le premier écran répond
   à « pour qui, quoi, combien, comment réserver ». Sous 1024 px elle suit
   le bouton. Le chapeau = l'accroche d'Aurélie (sa première phrase V1). */
@media (min-width: 1024px) {
  .psy-pagehead--fiche .psy-pagehead__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    column-gap: var(--space-2xl);
    align-items: end;
  }
}
.psy-pagehead__chapeau {
  max-width: 40rem;
  margin-top: var(--space-md);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--encre);
  text-wrap: pretty;
}
.psy-pagehead__chapeau + .psy-pagehead__actions { margin-top: var(--space-lg); }

/* La fiche (composant .psy-public__tarifs de site.css §7b) : dans l'en-tête
   elle ne colle pas (rien à accompagner) et n'a plus de bouton (celui de
   l'en-tête est à côté : une seule action primaire par vue). */
.psy-v2-fiche.psy-public__tarifs {
  position: static;
  margin-top: var(--space-xl);
  background: var(--creme);
}
@media (min-width: 1024px) {
  .psy-v2-fiche.psy-public__tarifs { margin-top: 0; }
}
/* Adultes : deux lignes de tarif, séparées d'un filet. Les intitulés sont
   des liens vers leur section (un sommaire qui ne dit pas son nom). */
.psy-v2-fiche__ligne {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--vert-tendre);
}
.psy-v2-fiche__lien {
  color: inherit;
  text-decoration-color: var(--dore-tournesol);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
}
.psy-v2-fiche .psy-public__tarif-cond { margin-top: var(--space-sm); }

/* 4b. SECTION DE TEXTE (.psy-v2-texte). Rythme vertical plein (--section-y
   de site.css) : c'est LE contenu de la page. */
.psy-v2-texte__prose { max-width: 40rem; }
.psy-v2-texte__prose > p { color: var(--encre-douce); }
.psy-v2-texte__prose > p + p,
.psy-v2-texte__prose > h2 + p { margin-top: var(--space-sm); }
.psy-v2-texte__prose > .psy-v2-texte__fin { margin-top: var(--space-base); }
.psy-v2-texte__lead,
.psy-v2-texte__prose > p.psy-v2-texte__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--encre);
}
.psy-v2-texte__prose > .psy-v2-texte__lead + p { margin-top: var(--space-base); }

/* Justifié + césure au-dessus de 768 px, fer à gauche en dessous : même
   règle que la prose de l'accueil (site.css §0, demande d'Aurélie).
   SAUF les textes en corps « lead » (chapeau, lead) : à 21 px, une
   colonne de 40rem ne compte que ~60 signes et le justifié y creusait une
   ligne à trous (« votre   dynamique   familiale », mesuré à 1440 px). */
.psy-v2-texte__prose > p:not(.psy-v2-texte__lead),
.psy-v2-rangee__texte > p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
@media (max-width: 767px) {
  .psy-v2-texte__prose > p,
  .psy-v2-rangee__texte > p {
    text-align: start;
    -webkit-hyphens: manual;
    hyphens: manual;
  }
}

/* Grille texte / exergue. Sous 1024 px : une colonne, l'exergue APRÈS la
   prose (elle résonne, elle n'introduit pas un texte qu'on n'a pas lu).
   >= 1024 px : 5/7, exergue (ou titre + exergue) à gauche, collante sous
   le header le temps de la lecture ; prose à droite. */
.psy-v2-texte__grille { display: flex; flex-direction: column; }
.psy-v2-texte__grille > .psy-v2-texte__exergue { order: 2; margin-bottom: 0; }
.psy-v2-texte__exergue { max-width: 18ch; }
.psy-v2-texte__cote h2 { margin-bottom: 0; }
.psy-v2-texte__cote + .psy-v2-texte__prose { margin-top: var(--space-lg); }
@media (min-width: 1024px) {
  .psy-v2-texte__grille {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-2xl);
    align-items: start;
  }
  .psy-v2-texte__grille > .psy-v2-texte__exergue,
  .psy-v2-texte__cote {
    order: 0;
    position: sticky;
    top: calc(var(--header-h) + var(--space-lg));
    margin-top: 0;
  }
  .psy-v2-texte__cote + .psy-v2-texte__prose { margin-top: 0; }
  .psy-v2-texte__cote .psy-v2-texte__exergue { margin-bottom: 0; }
  .psy-v2-texte__prose { max-width: 42rem; }
}

/* 4c. RANGÉES ÉDITORIALES (Adultes, trois sous-parties). Intertitre à
   gauche (4/12), texte à droite (8/12), filets vert tendre : le langage des
   portes et des diplômes. Trois colonnes auraient donné ~38 caractères
   par ligne à 1440 px, sous le minimum de 45. */
.psy-v2-texte__tete { max-width: 44rem; }
.psy-v2-texte__tete h2 { margin-bottom: 0; }
.psy-v2-texte__tete .psy-v2-texte__lead { margin-top: var(--space-base); }
.psy-v2-rangees { margin-top: var(--space-xl); }
.psy-v2-rangee {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--vert-tendre);
}
.psy-v2-rangee:last-child { border-bottom: 1px solid var(--vert-tendre); }
.psy-v2-rangee .psy-public__soustitre { font-size: var(--fs-lead); margin-bottom: var(--space-sm); }
.psy-v2-rangee__texte > p { color: var(--encre-douce); max-width: 42rem; }
.psy-v2-rangee__texte > p:first-child { color: var(--encre); }
.psy-v2-rangee__texte > p + p { margin-top: var(--space-sm); }
@media (min-width: 1024px) {
  .psy-v2-rangee {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-2xl);
    align-items: start;
  }
  .psy-v2-rangee .psy-public__soustitre { margin-bottom: 0; max-width: 16em; }
}

/* 4d. TRIO DES SITUATIONS (Familiale), SANS NUMÉROS (retour d'Aurélie du
   2026-09-29 : « ne pas numéroter les possibilités de motifs de venue,
   sinon ça hiérarchise et ce n'est pas l'idée »). Les numéros 01-03
   (compteur CSS) sont retirés ; reste le trio de site.css §7b, qui ne
   porte aucun ordre : trois colonnes de même largeur (>= 768 px), même
   filet, même tiret doré, même corps, même encre. Rien ne distingue la
   première de la troisième. Sous 768 px l'empilement est inévitable ; le
   repère identique garde les trois au même rang. */
.psy-v2-trio { margin-block: 0; }
.psy-v2-texte__grille--suite { margin-top: var(--space-2xl); }

/* =========================================================================
   5. TONS DE SECTION, SECTIONS GÉNÉRIQUES, FICHES, FILIGRANES
   Chaque page déclare sa chaîne de fonds dans un commentaire en tête de
   <main>. Règle : jamais deux tons identiques de part et d'autre d'une
   couture. Les tons ci-dessous l'emportent sur les fonds des sections de
   l'accueil (.psy-public--enfants, --familiale : même spécificité,
   déclarés plus tôt dans site.css).
   ========================================================================= */
.psy-ton--ivoire { background: var(--ivoire); }
.psy-ton--creme  { background: var(--creme); }
.psy-ton--brume  { background: var(--vert-brume); }

/* Section porteuse de filigrane : même ancrage que les sections de
   l'accueil (site.css §3c : position relative SANS z-index, overflow-x
   clip et non hidden, pour laisser déborder la moitié haute du mot). */
.psy-v2-bloc {
  position: relative;
  overflow-x: clip;
}

/* Enfants & Adolescents : le sous-titre d'Aurélie est un H2 sur sa page
   (H3 sur l'accueil). Rendu identique exigé : on annule la cursive et la
   réserve d'encre du h2 (base.css), la classe fixe déjà le reste. */
h2.psy-public__soustitre {
  font-family: var(--font-titre);
  font-synthesis: weight style;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
  margin-inline: 0;
}

/* Filigranes des pages intérieures : UN par page publics (sur la couture
   en-tête / première section), TROIS sur À propos (comme la V1 : « Qui
   suis-je », « Se mettre en mouvement », « Formation »). Coutures crème /
   ivoire : aucune compensation d'encre (site.css §3c, RÈGLE D'ENCRE). À
   DROITE sur les pages publics : le H1 est calé à gauche au-dessus. */
.psy--interieur .psy-v2-bloc > .psy-filigrane { --fg-cote: 1; }
.psy-v2-texte--adultes > .psy-filigrane   { --fg-chars: 7; }
.psy-v2-texte--enfants > .psy-filigrane   { --fg-chars: 21; }
.psy-v2-texte--familiale > .psy-filigrane { --fg-chars: 22; }
.psy--interieur .psy-apropos > .psy-filigrane { --fg-chars: 11; }
/* « Se mettre en mouvement » sur À propos : ivoire en haut, brume en bas,
   la couture de la V1 : réglage de site.css conservé (gauche, 0,14 en
   bas). « Formation » : brume en haut, crème en bas, idem V1 (droite,
   0,15 en haut) : site.css s'applique tel quel, --fg-cote: 1 compris. */
.psy--interieur .psy-approche > .psy-filigrane { --fg-cote: 0; }

/* =========================================================================
   6. ACCUEIL
   Chaîne de fonds (recalculée pour la v2) :
     Hero (dégradé -> crème) -> Qui suis-je IVOIRE -> Pour qui CRÈME ->
     Approche BRUME -> Contact IVOIRE -> footer forêt.
   Filigranes : Qui suis-je GAUCHE, Pour qui DROITE, Se mettre en mouvement
   DROITE, Contact GAUCHE. Quatre mots, deux repères fixés par Thomas
   (ouverture et Contact à gauche) : un nombre pair rend un doublon
   inévitable (site.css §3c). Il est placé, comme le prévoit la règle,
   derrière la section la plus longue (Pour qui : portes + nuage), là où
   les deux mots ne sont jamais à l'écran ensemble.
   ========================================================================= */

/* Coutures touchant le brume : compensations recalculées (RÈGLE D'ENCRE).
   Approche : haut CRÈME / bas BRUME -> 0,15 en bas (0,13 mobile), le cas
   « Consultation Familiale » de la v1. Contact : haut BRUME / bas IVOIRE
   -> 0,14 en haut (0,12 mobile), le cas « Approche groupale » de la v1. */
.psy-approche--resume > .psy-filigrane { --fg-cote: 1; --fg-opacite-bas: 0.15; }
body:not(.psy--interieur) .psy-contact > .psy-filigrane { --fg-opacite-haut: 0.14; }
@media (max-width: 767px) {
  .psy-approche--resume > .psy-filigrane { --fg-opacite-bas: 0.13; }
  body:not(.psy--interieur) .psy-contact > .psy-filigrane { --fg-opacite-haut: 0.12; }
}

/* RYTHME MOBILE DE L'ACCUEIL RACCOURCI (objectif du cahier des charges :
   ~8 à 9 écrans à 390 px). Sections à 64 px au lieu de 96 sous 768 px.
   Les filigranes mobiles plafonnent à 6rem (96 px) : leur moitié basse,
   48 px, reste dans le blanc au-dessus du surtitre. */
@media (max-width: 767px) {
  body:not(.psy--interieur) main > .section:not(.psy-hero) { padding-block: var(--space-xl); }
}

/* « Qui suis-je » court : le texte (chapeau + une phrase) est désormais
   plus court que le portrait. Le portrait ne colle plus (rien à
   accompagner) et le texte se centre verticalement en regard. Sur mobile,
   le portrait est plafonné pour ne pas faire un écran à lui seul. */
@media (min-width: 768px) {
  .psy-apropos--court .psy-apropos__grid { align-items: center; }
  .psy-apropos--court .psy-apropos__media { position: static; }
}
@media (max-width: 767px) {
  .psy-apropos--court .psy-apropos__grid { gap: var(--space-lg); }
  .psy-apropos--court .psy-apropos__media {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-base);
  }
  .psy-apropos--court .psy-apropos__chiffre { margin: 0; align-items: flex-start; text-align: start; }
}

/* Lien « En savoir plus » : lien texte (pas un bouton, un seul CTA
   principal par écran), souligné doré, flèche qui avance au survol. */
.psy-lien-suite { margin-top: var(--space-lg); }
.psy-apropos__text .psy-lien-suite { margin-top: var(--space-lg); }
.psy-lien-suite a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  font-weight: var(--fw-semi);
  color: var(--vert-foret);
  text-decoration-line: underline;
  text-decoration-color: var(--dore-tournesol);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.3em;
}
.psy-lien-suite__fleche { display: inline-grid; place-items: center; transition: transform var(--dur-base) var(--ease-doux); }
.psy-lien-suite__fleche svg { width: 20px; height: 20px; }
.psy-lien-suite--centre { text-align: center; margin-inline: auto; margin-top: var(--space-xl); }
@media (hover: hover) {
  .psy-lien-suite a:hover .psy-lien-suite__fleche { transform: translateX(4px); }
}

/* PORTES SANS NUMÉROS (retour d'Aurélie du 2026-09-29 : « est-ce
   nécessaire de numéroter les sous-catégories ? »). Les <span> 01-04 sont
   retirés du HTML ; la grille de site.css §7a réservait une colonne (mobile)
   ou une rangée (>= 768 px) au numéro. Ici : titre + flèche sur une seule
   rangée à toutes les largeurs, flèche calée sur la première ligne du
   titre. La note de l'Approche groupale passe pleine largeur. */
.psy-acces--portes .psy-acces__lien { grid-template-columns: minmax(0, 1fr) auto; }
.psy-acces--portes .psy-acces__note { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .psy-acces--portes .psy-acces__lien {
    grid-template-areas: "titre fleche";
    grid-template-rows: auto;
    align-items: start;
  }
  .psy-acces--portes .psy-acces__fleche { margin-top: 0.1em; }
  .psy-acces--portes .psy-acces__item--a-venir .psy-acces__lien { grid-template-rows: auto 1fr; }
  .psy-acces--portes .psy-acces__note { grid-column: 1 / -1; margin-top: calc(var(--space-sm) * -1 + var(--space-2xs)); }
}

/* LE NUAGE AVANT LES PORTES (2026-09-29, retour d'Aurélie : les motifs de
   consultation « parlent aux gens », elle craint qu'on ne les voie pas).
   On rétablit SON ordre, celui du document : chapeau -> « Ce qui vous
   amène ici » -> portes. Le prototype #5 (2026-09-27) avait remonté les
   portes au-dessus du nuage en CSS ; il est annulé ici (order rendu au
   flux du DOM). Mesuré : le repère du nuage remonte de 3,19 à ~2,5 écrans
   à 390 x 844 et de 2,95 à ~2,4 écrans à 1440 x 900.
   Desktop : le filet qui séparait le nuage des portes du dessus n'a plus
   d'objet ; les filets hauts des quatre portes font la séparation. */
.psy-pourqui__motscles { order: 2; }
.psy-pourqui .psy-acces { order: 3; margin-top: var(--space-2xl); }
@media (min-width: 1024px) {
  .psy-pourqui__motscles { border-top: 0; padding-top: 0; }
}
/* Cible du lien du hero (tabindex="-1" : reçoit le focus à l'arrivée,
   pour le clavier). Pas d'anneau sur un bloc entier. */
.psy-pourqui__motscles:focus { outline: none; }
.psy-pourqui__motscles:focus-visible { box-shadow: none; }

/* LIEN DU HERO « Ce qui vous amène ici » : lien texte tertiaire (même
   composant que « En savoir plus »), sous les deux boutons. La flèche
   pointe vers le bas et descend au survol : il emmène plus bas dans la
   page, il ne change pas de page. */
.psy-hero__motifs { margin-top: var(--space-base); }
@media (hover: hover) {
  .psy-hero__motifs a:hover .psy-lien-suite__fleche { transform: translateY(3px); }
}

/* Portes : elles MÈNENT à une page, la flèche pointe à droite et avance au
   survol (au lieu de descendre). */
@media (hover: hover) {
  .psy-acces--portes .psy-acces__lien:hover .psy-acces__fleche,
  .psy-acces--pages .psy-acces__lien:hover .psy-acces__fleche { transform: translateX(4px); }
}
/* Porte « Approche groupale » : mention non cliquable, ton discret, aucun
   effet de survol (ce n'est pas un lien). */
.psy-acces__item--a-venir .psy-acces__lien { color: var(--encre-douce); cursor: default; }
.psy-acces__item--a-venir .psy-acces__num { color: var(--vert-tendre); }
.psy-acces__item--a-venir .psy-acces__tarif { color: var(--encre-douce); }
/* Les deux phrases V1 de l'ancienne section « Approche groupale ». */
.psy-acces__note {
  grid-column: 2 / -1;
  margin-top: var(--space-2xs);
  color: var(--encre-douce);
  max-width: 34ch;
}
@media (min-width: 768px) {
  .psy-acces__item--a-venir .psy-acces__lien { grid-template-rows: auto auto 1fr; }
  .psy-acces__note { grid-column: 1 / -1; margin-top: calc(var(--space-sm) * -1 + var(--space-2xs)); }
}
@media (hover: hover) {
  .psy-acces__item--a-venir .psy-acces__lien:hover { color: var(--encre-douce); }
  .psy-acces__item--a-venir .psy-acces__lien:hover .psy-acces__titre { transform: none; }
}

/* Approche résumée : les piliers n'ont plus que titre + chapeau. Les
   bandes mobiles sont resserrées d'autant (numéro en regard du titre au
   lieu d'au-dessus : -1 ligne par pilier). */
.psy-approche--resume .psy-pilier { padding-block: var(--space-lg); }
@media (max-width: 1023px) {
  .psy-approche--resume .psy-approche__piliers { margin-top: var(--space-xl); }
  .psy-approche--resume .psy-pilier { padding-block: var(--space-base); }
  .psy-approche--resume .psy-pilier__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-sm);
    align-items: baseline;
  }
  .psy-approche--resume .psy-pilier__num { margin: 0; font-size: 2.5rem; }
  .psy-approche--resume .psy-pilier__chapeau { grid-column: 1 / -1; margin-top: var(--space-2xs); }
  .psy-approche--resume .psy-lien-suite--centre { margin-top: var(--space-base); }
}
@media (min-width: 1024px) {
  .psy-approche--resume .psy-pilier { padding: var(--space-lg); }
  .psy-approche--resume .psy-pilier--deux { margin-top: var(--space-xl); }
}

/* =========================================================================
   8. BANDE DE FIN DE PAGE (.psy-v2-bande)
   Rendez-vous (Doctolib + e-mail), secret professionnel, téléphone,
   rappel des urgences (phrases de la V1), liens croisés. Deux colonnes
   dès 1024 px ; la liste reprend le vocabulaire des portes de l'accueil
   (filets, flèche) sans numéros. Variante --avec : portrait en regard.
   ========================================================================= */
.psy-v2-bande.psy-v2-bloc { padding-block: clamp(var(--space-xl), 7vw, var(--space-3xl)); }
.psy-v2-bande__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 1024px) {
  .psy-v2-bande__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-3xl); }
}
.psy-v2-bande__grid > * { min-width: 0; }
.psy-v2-bande__rdv .t-overline { color: var(--vert-sauge); }
.psy-v2-bande__rdv h2 { margin-top: var(--space-2xs); }
.psy-v2-bande__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
@media (max-width: 767px) {
  .psy-v2-bande__actions .psy-btn { width: 100%; }
}
.psy-v2-bande .psy-contact__secret { margin-top: var(--space-base); color: var(--encre-douce); max-width: 34rem; }
.psy-v2-bande__liste { margin-top: var(--space-base); max-width: 34rem; }
/* Colonnes de ~24 à 30rem en petit corps : le justifié (site.css §0) y
   creusait des trous (« en   danger,   le   119 ») : fer à gauche. */
.psy-v2-bande .psy-contact__secret,
.psy-v2-bande .psy-contact__urgence { text-align: start; -webkit-hyphens: manual; hyphens: manual; }
.psy-v2-bande__liste li { grid-template-columns: 1fr; gap: var(--space-3xs); }

/* Portrait en regard (variante --avec). Pourquoi : sur un site de
   praticienne, le visage est la première réassurance (ux-psychologie,
   « Personne ») ; les pages publics n'en avaient aucun. Aucun texte
   ajouté : le titre V1 « Prendre rendez-vous » suffit, le visage dit
   « avec qui ». Même radius que les cartes (--radius-lg), ombre bezel.
   Mobile : vignette 6rem au-dessus du surtitre. >= 768 : colonne de
   9rem à gauche du bloc, alignée en haut. */
.psy-v2-bande__visage { display: block; width: 6rem; margin-bottom: var(--space-base); }
.psy-v2-bande__visage img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--carte-bezel);
}
.psy-v2-bande--sans .psy-v2-bande__visage { display: none; }
@media (min-width: 768px) {
  .psy-v2-bande--avec .psy-v2-bande__rdv {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: var(--space-lg);
    align-content: start;
  }
  .psy-v2-bande--avec .psy-v2-bande__rdv > * { grid-column: 2; }
  .psy-v2-bande--avec .psy-v2-bande__visage {
    grid-column: 1;
    grid-row: 1 / span 8;
    width: auto;
    margin: 0;
    align-self: start;
  }
}
/* Urgences : sous les liens croisés (colonne de droite en desktop), pour
   équilibrer les deux colonnes ; en dernier sur mobile. */
.psy-v2-bande .psy-contact__urgence { margin-top: var(--space-xl); color: var(--encre-douce); }

/* Liste des autres pages : les règles des portes (site.css §7a) passent en
   grille numéro / flèche dès 768 px sans être limitées à « Pour qui » ;
   on rétablit ici une simple ligne titre · flèche. */
.psy-acces--pages { margin: 0; max-width: none; }
.psy-acces--pages .psy-acces__lien {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "titre fleche";
  grid-template-rows: auto;
  align-items: center;
  padding-block: var(--space-sm);
  height: auto;
}
.psy-acces--pages .psy-acces__titre { grid-area: titre; font-size: var(--fs-lead); }
.psy-acces--pages .psy-acces__fleche { grid-area: fleche; }
.psy-acces--pages .psy-acces__item:last-child { border-bottom: 1px solid var(--vert-tendre); }

/* =========================================================================
   8b. CORRECTIFS DE REVUE DESIGNER (2026-09-28)
   ========================================================================= */

/* Contact de l'accueil entre 768 et 1023 px : deux colonnes de ~325 et
   ~267 px séparées par 128 px de gouttière, puis un label de 7rem dans
   chaque ligne. Il restait ~150 px aux valeurs : l'e-mail coupé
   (« aurelierey. / com »), l'adresse et les horaires à ~12 caractères par
   ligne. Gouttière ramenée à 48 px et label AU-DESSUS de sa valeur (même
   solution que sous 375 px, site.css §9). */
@media (min-width: 768px) and (max-width: 1023px) {
  .psy-contact__grid { column-gap: var(--space-lg); }
  .psy-contact__list li { grid-template-columns: 1fr; gap: var(--space-3xs); }
}

/* Pied de page, écrans tactiles : les liens faisaient 18 px de haut. Ils
   passaient WCAG 2.5.8 grâce à l'espacement, mais avec le multi-pages le
   pied de page devient une vraie navigation : cible de 44 px (WCAG 2.5.5,
   Apple), gouttière verticale annulée pour ne pas allonger d'autant le
   pied de page (+14 px par lien au lieu de +26). */
@media (max-width: 1023px) {
  .psy-footer__nav ul { gap: 0; }
  .psy-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* 8b. PAGE 404 (src-v2/404.html, revue SEO B2). Même en-tête que les pages
   intérieures, un message en corps de chapeau, puis la liste « Pages du
   site » (composant .psy-acces--pages de la bande). */
.psy-v2-404__message {
  max-width: 44rem;
  margin-top: var(--space-md);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--encre);
}
.psy-v2-404.section { padding-block: clamp(var(--space-xl), 6vw, var(--space-2xl)); }
.psy-v2-404 .container { max-width: 52rem; }
.psy-v2-404__titre { margin-bottom: var(--space-base); }

/* =========================================================================
   9. REVEALS DISCRETS (pages intérieures)
   Même moteur (site.css §0 + site.js §5), amplitude réduite de moitié :
   montée 14 px au lieu de 28, flou 3 px au lieu de 8. L'accueil garde
   l'effet plein.
   ========================================================================= */
.psy--interieur [data-reveal] {
  transform: translateY(14px);
  filter: blur(3px);
}

/* =========================================================================
   10. prefers-reduced-motion - TOUJOURS EN DERNIER
   site.css §11 masque déjà .psy-pollen (donc le pollen d'en-tête) et
   rend les reveals visibles. Ici : les deux micro-mouvements propres à la
   v2 (flèches qui avancent au survol) et le glissement du sous-menu.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .psy-lien-suite__fleche,
  .psy-nav__sous-bouton svg,
  .psy-acces--portes .psy-acces__fleche,
  .psy-acces--pages .psy-acces__fleche { transition: none; transform: none !important; }
  .psy--interieur [data-reveal] { transform: none !important; filter: none !important; }
  /* Sous-menu : apparition sans glissement ; les durées sont déjà
     ramenées à 0,01 ms par la règle globale de base.css. */
  .psy-nav__sous { transform: none !important; }
}