/* vitrine.css — monpsy à la forme des vitrines mentalsense (02/10/2026)
   ═════════════════════════════════════════════════════════════════════════════
   Chargée après monpsy.css et mouvement.css, sur les pages de l'annuaire seulement
   (body.mp--forme : accueil, listes, fiches psy et cabinet, lexique, page introuvable).
   La réservation et le widget ne la chargent pas : ils restent tels quels.

   Elle transpose la forme commune des vitrines (vitrines/_commun/assets/css/forme.css)
   dans le vocabulaire de monpsy, sans changer ni son balisage vivant ni son mouvement
   (mouvement.css / mouvement.js s'accrochent aux mêmes classes) :
     1. la géométrie : --page, --edge, --inset, coques arrondies, rythme --sec-y ;
     2. l'en-tête en pilule flottante ;
     3. l'échelle typographique, les sur-titres à tiret, les mots en couleur (.em) ;
     4. boutons, cartes, pastilles, questions ;
     5. le pied sombre en colonnes ;
     6. ce que chaque page a de neuf.
   Les couleurs restent celles de monpsy : ivoire, encre vert profond, et l'accent de la
   page (vert de monpsy, ou la couleur choisie par le psy). Une valeur de forme qui change
   dans forme.css se reporte ici à la main. */

/* ─── 1. Géométrie et teintes ──────────────────────────────────────────────── */
body.mp--forme {
  --gut: clamp(1.5rem, 4vw, 3rem);
  --page: min(1240px, calc(100vw - 2 * var(--gut)));
  --edge: clamp(.5rem, 1vw, 1rem);
  --inset: clamp(1rem, calc((100vw - 2 * var(--edge) - var(--page)) / 2), 6rem);
  --coque: calc(var(--page) + 2 * var(--inset));
  --sec-y: clamp(4rem, 2.4rem + 4.4vw, 6.5rem);
  --head-gap: clamp(2rem, 1.4rem + 1.8vw, 3rem);
  --gap: clamp(1rem, .6rem + 1vw, 1.25rem);
  --gap-lg: clamp(2rem, 1rem + 3vw, 4.5rem);
  --pad: clamp(1.5rem, 1rem + 1.2vw, 2rem);
  --r-band: clamp(1.5rem, 1rem + 1.4vw, 2rem);
  --hdr-h: clamp(56px, 3.2rem + .6vw, 68px);
  --hdr-top: calc(var(--edge) + clamp(.4rem, .8vw, .75rem));
  --hdr-pad: clamp(1.25rem, calc(var(--hdr-h) * .46), 2rem);
  --hdr-zone: calc(var(--hdr-top) + var(--hdr-h));
  --fs-h1: clamp(2.3rem, 1.2rem + 3.2vw, 3.9rem);
  --fs-h2: clamp(1.85rem, 1.15rem + 2.1vw, 3rem);
  --fs-h2s: clamp(1.7rem, 1.15rem + 1.6vw, 2.5rem);
  --fs-h3: clamp(1.3rem, 1.05rem + .7vw, 1.65rem);
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* L'en-tête flottant remplace la barre : les scènes de mouvement.css se calent dessus. */
  --haut-h: var(--hdr-zone);

  --nuit: #14211D;                                                   /* pied, bandeaux sombres */
  --sable: #EFEAE0;                                                  /* coques claires */
  --deco: color-mix(in srgb, var(--accent) 52%, #fff);               /* filets, tirets, pastilles : jamais de texte */
  --accent-doux: color-mix(in srgb, var(--accent) 10%, #fff);
  --accent-texte: color-mix(in srgb, var(--accent) 86%, #000);
  --ombre-1: 0 1px 2px rgba(22, 35, 31, .04), 0 4px 14px rgba(22, 35, 31, .06);
  --ombre-2: 0 2px 4px rgba(22, 35, 31, .05), 0 14px 32px rgba(22, 35, 31, .10);
  /* Le trait de pinceau sous les mots en couleur : vert d'eau sur les pages de monpsy,
     sable sur celles d'un cabinet (son accent est le sien, le trait reste neutre). */
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C38 5 78 4.2 112 6.3s63 2.7 85-1.6' fill='none' stroke='%237FB5A8' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke' opacity='.7'/%3E%3C/svg%3E");

  font-size: 1.0625rem; line-height: 1.6;
}
body.mp--forme.mp--teinte, body.mp--forme.mp--image {
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C38 5 78 4.2 112 6.3s63 2.7 85-1.6' fill='none' stroke='%23C9C1B0' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke' opacity='.9'/%3E%3C/svg%3E");
}
html:has(body.mp--forme) { scroll-padding-top: 7rem; }
/* Une page courte garde son pied en bas de l'écran. */
body.mp--forme { min-height: 100vh; display: flex; flex-direction: column; }
body.mp--forme > #contenu { flex: 1 0 auto; }
/* L'en-tête ne prend plus de place dans le flux : hors scène, la page commence sous lui. */
body.mp--forme:not(.mp--scene) { padding-top: calc(var(--hdr-top) + var(--hdr-h) + 1rem); }
.mp--forme.mp--scene #contenu > :first-child { margin-top: 0; }

/* Les contenants : la largeur de page des vitrines, sans marge intérieure. */
.mp--forme :is(.mp-large, .mp-psy, .mp-bloc__in, .mp-recit, .mp-soutien__in, .mp-scene__in, .mp-vitrine__in) { max-width: none; width: var(--page); margin-inline: auto; padding-inline: 0; }
.mp--forme .mp-fil { padding: 0; width: var(--page); margin: 0 auto; }
.mp--forme.mp--scene .mp-fil { left: 50%; right: auto; transform: translateX(-50%); padding: 0 var(--inset) 0; width: min(var(--coque), calc(100vw - 2 * var(--edge))); top: calc(var(--hdr-zone) + 1rem); }

/* ─── 2. L'en-tête : une pilule flottante ──────────────────────────────────── */
.mp--forme .mp-haut {
  position: fixed; z-index: 150; top: var(--hdr-top); left: 50%; transform: translateX(-50%);
  width: min(calc(var(--page) + 2 * var(--hdr-pad)), calc(100vw - 2 * var(--edge)));
  min-height: 0; height: var(--hdr-h); gap: .5rem;
  padding: 0 calc(var(--hdr-h) * .12) 0 var(--hdr-pad);
  border: 0; border-radius: 999px; background: transparent;
  box-shadow: 0 1px 2px rgba(22, 35, 31, .05), 0 10px 30px rgba(22, 35, 31, .14);
  transition: box-shadow .35s;
}
.mp--forme .mp-haut::before { opacity: 1; border-radius: inherit; background: color-mix(in srgb, var(--accent) 5%, rgb(255 255 255 / .86)); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.mp--forme .mp-haut.verre { border: 0; box-shadow: 0 1px 2px rgba(22, 35, 31, .06), 0 14px 36px rgba(22, 35, 31, .18); }
/* Sur une image de couverture, la pilule reste claire : le texte ne passe plus en blanc. */
.mp--forme.mp--image .mp-haut:not(.verre)::after { content: none; }
.mp--forme.mp--image .mp-haut:not(.verre), .mp--forme.mp--image .mp-haut:not(.verre) .mp-haut__noms strong,
.mp--forme.mp--image .mp-haut:not(.verre) .mp-haut__nav a, .mp--forme.mp--image .mp-haut:not(.verre) .mp-haut__monpsy,
.mp--forme.mp--image .mp-haut:not(.verre) .mp-haut__lien { color: var(--encre); }
.mp--forme.mp--image .mp-haut:not(.verre) .mp-haut__noms span { color: var(--doux); }
.mp--forme.mp--image .mp-haut:not(.verre) .mp-haut__sigle { color: var(--accent); }
.mp--forme.mp--image .mp-haut:not(.verre) .mp-logo [fill="#1F6F63"] { fill: #1F6F63; }
.mp--forme.mp--image .mp-haut:not(.verre) .mp-haut__souligne { background: var(--accent); }
.mp--forme .mp-logo { height: clamp(18px, 1rem + .4vw, 22px); }
.mp--forme .mp-haut__nav { gap: .15rem; align-items: center; font-size: .9375rem; }
.mp--forme .mp-haut__nav a:not(.mp-bouton) { padding: .55rem .9rem; border-radius: 999px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s; }
.mp--forme .mp-haut__nav a:not(.mp-bouton):hover { background: var(--sable); text-decoration: none; filter: none; }
.mp--forme .mp-haut__nav--annuaire { gap: .35rem; }
.mp--forme .mp-haut__souligne { bottom: 0; height: 2px; }
.mp--forme .mp-haut .mp-bouton { min-height: 0; height: calc(var(--hdr-h) - 16px); padding: 0 1.25rem; font-size: .9375rem; }
.mp--forme .mp-haut__connexion { margin-left: .35rem; }
.mp--forme .mp-haut__marque { gap: .75rem; }
.mp--forme .mp-haut__sigle { width: 40px; height: 34px; }
.mp--forme .mp-haut__logo { max-height: calc(var(--hdr-h) - 22px); }
.mp--forme .mp-haut__noms strong { font-size: 1rem; line-height: 1.2; }
.mp--forme .mp-haut__noms span { font-size: .8rem; line-height: 1.2; }

/* ─── 3. Typographie ───────────────────────────────────────────────────────── */
.mp--forme h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; }
.mp--forme h2 { font-size: var(--fs-h2s); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.mp--forme .em, .mp--forme .mp-une__titre em { font-style: normal; color: var(--accent-texte); background: var(--brush) no-repeat 0 96% / 100% .28em; }
.mp--forme .mp-texte { font-size: var(--fs-lead); line-height: 1.6; text-wrap: pretty; }
.mp--forme .mp-surtitre {
  display: inline-flex; align-items: center; gap: .65rem; margin: 0;
  font-family: var(--sans); font-size: .75rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-texte);
}
.mp--forme .mp-surtitre::before { content: ''; width: 1.25rem; height: 2px; border-radius: 2px; background: var(--deco); flex-shrink: 0; }
.mp--forme .mp-surtitre .mp-ic { display: none; }
.mp--forme a:hover { filter: none; }
.mp--forme :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* En-tête de section : sur-titre, titre, chapô (à gauche, ou titre à gauche et chapô à droite). */
.mp-tete { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: var(--head-gap); max-width: 58rem; }
.mp-tete h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.015em; }
.mp-tete p:not(.mp-surtitre) { margin: 0; font-size: var(--fs-lead); line-height: 1.6; color: var(--encre2); max-width: 46rem; text-wrap: pretty; }
.mp-tete--double { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem var(--gap-lg); align-items: end; max-width: none; }
.mp-tete--double > div { display: flex; flex-direction: column; gap: 1.1rem; }
.mp-tete--centre { align-items: center; text-align: center; margin-inline: auto; max-width: 60rem; }

/* ─── 4. Boutons, cartes, pastilles ────────────────────────────────────────── */
.mp--forme .mp-bouton { min-height: 3.25rem; padding: 0 1.6rem; gap: .6rem; font-weight: 600; font-size: 1rem; line-height: 1.1; border-width: 1.5px; transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s, transform .18s; }
.mp--forme .mp-bouton:hover { filter: none; background: color-mix(in srgb, var(--accent) 86%, #000); border-color: color-mix(in srgb, var(--accent) 86%, #000); }
.mp--forme .mp-bouton--petit { min-height: 2.875rem; padding: 0 1.25rem; font-size: .9375rem; }
.mp--forme .mp-bouton--contour { background: transparent; border-color: #9AA39F; color: var(--encre); }
.mp--forme .mp-bouton--contour:hover { background: var(--sable); border-color: #9AA39F; color: var(--encre); }
.mp--forme .mp-bouton--clair, .mp--forme .mp-bouton--clair:hover { background: #fff; border-color: #fff; color: #1E3A5F; }
.mp--forme .mp-recherche > .mp-bouton { min-height: 0; background: #1F6F63; border-color: #1F6F63; }
.mp--forme .mp-recherche--pile > .mp-bouton { min-height: 3.125rem; }
.mp--forme .mp-carte { border-color: rgba(26, 38, 34, .08); box-shadow: var(--ombre-1); }
.mp--forme .mp-puces li { background: var(--accent-doux); color: var(--accent-texte); }

/* ─── 5. Sections et coques ────────────────────────────────────────────────── */
.mp--forme .mp-bloc { padding: 0; margin-block: var(--sec-y); }
.mp--forme .mp-bloc__in { gap: 0; }
.mp--forme .mp-bloc h2 { font-size: var(--fs-h2); margin: 0; }
.mp-coque { position: relative; isolation: isolate; overflow: hidden; width: min(var(--coque), calc(100vw - 2 * var(--edge))); margin: var(--sec-y) auto; padding: var(--inset); border-radius: var(--r-band); }
.mp-coque--sable { background: var(--sable); }
.mp-coque--nuit { background: var(--nuit); color: #fff; }
.mp-coque__volute { position: absolute; z-index: -1; pointer-events: none; width: clamp(18rem, 36vw, 36rem); color: color-mix(in srgb, var(--accent) 11%, transparent); }
.mp-coque__volute--hd { right: -6%; top: -14%; transform: rotate(180deg); }
.mp-coque__volute--bg { left: -6%; bottom: -10%; }

/* ─── 6. L'accueil ─────────────────────────────────────────────────────────── */
.mp--forme .mp-une {
  width: min(var(--coque), calc(100vw - 2 * var(--edge))); margin: var(--edge) auto 0; border-radius: var(--r-band);
  padding: calc(var(--hdr-zone) - var(--edge) + var(--inset)) var(--inset) var(--inset);
  min-height: min(52rem, 100svh - 2 * var(--edge)); display: grid; align-content: center;
}
.mp--forme .mp-une__in { max-width: none; width: 100%; gap: 1.5rem; }
.mp--forme .mp-une__titre { max-width: 13ch; }
.mp--forme .mp-une__sous { font-size: var(--fs-lead); line-height: 1.6; max-width: 36rem; }
.mp--forme .mp-une .mp-recherche { max-width: 56rem; border-radius: 20px; }
.mp--forme .mp-rapides a { min-height: 2.375rem; padding: 0 1rem; font-size: .875rem; font-weight: 500; }

/* Trois temps : des jalons reliés, comme les étapes des vitrines. */
.mp--forme .mp-temps { position: relative; gap: var(--gap); }
.mp--forme .mp-temps::before { content: ''; position: absolute; left: 1.5rem; right: 1.5rem; top: 1.45rem; height: 2px; background: linear-gradient(90deg, var(--deco), var(--accent)); }
.mp--forme .mp-temps li { position: relative; padding: 0; gap: 1.1rem; background: none; border: 0; border-radius: 0; }
.mp--forme .mp-temps li::before { width: 3rem; height: 3rem; background: var(--accent); color: #fff; font-size: 1.125rem; box-shadow: 0 0 0 6px var(--fond); }
.mp--forme .mp-temps li:last-child::before { background: var(--nuit); }
.mp--forme .mp-temps li > div { flex-grow: 1; display: flex; flex-direction: column; gap: .6rem; padding: var(--pad); border-radius: var(--rayon); background: #fff; border: 1px solid rgba(26, 38, 34, .08); box-shadow: var(--ombre-1); }
.mp--forme .mp-temps strong { font-size: 1.125rem; font-weight: 650; line-height: 1.35; }
.mp--forme .mp-temps p { font-size: .9375rem; line-height: 1.6; }

/* Le récit du téléphone : mêmes accroches que mouvement.js, l'échelle des vitrines. */
.mp--forme .mp-recit { padding: 0; margin-top: var(--sec-y); }
.mp--forme .mp-recit__tete { max-width: 58rem; gap: 1.1rem; margin-bottom: 1rem; }
.mp--forme .mp-recit__tete h2 { font-size: var(--fs-h2); line-height: 1.08; }
.mp--forme .mp-recit__tete p:last-child { font-size: var(--fs-lead); max-width: 46rem; }
.mp--forme .mp-recit__etape h3 { font-size: var(--fs-h2s); line-height: 1.1; }
.mp--forme .mp-recit__sur { font-size: .75rem; letter-spacing: .14em; color: var(--accent-texte); }

/* Ce que montre une fiche, et les atouts d'une page. */
.mp-atouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.mp-atout { display: flex; flex-direction: column; gap: .9rem; padding: var(--pad); border-radius: var(--rayon); background: #fff; border: 1px solid rgba(26, 38, 34, .08); box-shadow: var(--ombre-1); }
.mp-atout strong { font-size: 1.125rem; font-weight: 650; line-height: 1.35; }
.mp-atout p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--encre2); }
.mp-atout__ic { width: 3rem; height: 3rem; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-doux); color: var(--accent); }
.mp-atout__ic .mp-ic { width: 24px; height: 24px; }

/* Mon soutien psy : une coque sable. */
.mp--forme .mp-soutien { width: min(var(--coque), calc(100vw - 2 * var(--edge))); margin: var(--sec-y) auto; padding: var(--inset); border: 0; border-radius: var(--r-band); background: var(--sable); }
.mp--forme .mp-soutien__in { width: 100%; gap: var(--gap-lg); }
.mp--forme .mp-soutien h2 { font-size: var(--fs-h2); line-height: 1.08; margin: 1.1rem 0; }
.mp--forme .mp-soutien .mp-bloc__sous { font-size: var(--fs-lead); line-height: 1.6; margin-bottom: 1.5rem; }
.mp--forme .mp-pastille { border-color: #C9C1B0; }

.mp--forme .mp-communes { gap: .625rem; margin: 0; }
.mp--forme .mp-communes a { min-height: 3rem; padding: 0 1.15rem; border-radius: 999px; border-color: rgba(26, 38, 34, .1); box-shadow: var(--ombre-1); font-weight: 500; }
.mp--forme .mp-tuiles { gap: var(--gap); margin: 0; }
.mp--forme .mp-tuile2 { padding: var(--pad); border-color: rgba(26, 38, 34, .08); box-shadow: var(--ombre-1); }
.mp--forme .mp-tuile2 strong { font-size: var(--fs-h3); line-height: 1.15; }
.mp--forme .mp-tuile2 span { font-size: .9375rem; line-height: 1.6; color: var(--encre2); }
.mp-tuiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mp-suite { margin-top: var(--head-gap); }

/* « Vous ne savez pas par où commencer ? » : une coque bleu nuit, pleine largeur. */
.mp--forme .mp-orientation { width: min(var(--coque), calc(100vw - 2 * var(--edge))); margin: var(--sec-y) auto; padding: calc(var(--inset) * .7) var(--inset); border-radius: var(--r-band); grid-template-columns: 110px 1fr auto; gap: var(--gap-lg); }
.mp--forme .mp-orientation:has(+ .mp-bloc--suite) { margin-bottom: var(--gap); }
.mp--forme .mp-bloc--suite { margin-top: var(--gap); }
.mp--forme .mp-orientation h3 { font-size: var(--fs-h2s); line-height: 1.1; margin-bottom: .6rem; }
.mp--forme .mp-orientation p { font-size: var(--fs-lead); line-height: 1.6; max-width: 40rem; }
.mp--forme .mp-vide + .mp-orientation, .mp--forme .mp-resultats .mp-orientation { width: auto; margin: 1.5rem 0 0; padding: var(--pad); border-radius: var(--rayon); grid-template-columns: 90px 1fr auto; gap: 1.5rem; }
.mp--forme .mp-resultats .mp-orientation h3 { font-size: var(--fs-h3); }
.mp--forme .mp-resultats .mp-orientation p { font-size: 1rem; }

/* Vous êtes psychologue ? */
.mp-pro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap-lg); align-items: center; padding: var(--pad) calc(var(--pad) * 1.25); border-radius: var(--rayon); background: #fff; border: 1px solid rgba(26, 38, 34, .08); box-shadow: var(--ombre-1); }
.mp-pro h3 { font-size: var(--fs-h3); line-height: 1.15; margin-bottom: .4rem; }
.mp-pro p { margin: 0; color: var(--encre2); max-width: 46rem; }

/* L'appel final : une coque sable, la recherche au centre. */
.mp-final { text-align: center; }
.mp-final .mp-tete { margin-bottom: 1.75rem; }
.mp-final__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* ─── 7. Les listes ────────────────────────────────────────────────────────── */
.mp--forme .mp-bandeau {
  position: sticky; top: calc(var(--hdr-zone) + .5rem); z-index: 15;
  width: min(calc(var(--page) + 2 * var(--hdr-pad)), calc(100vw - 2 * var(--edge))); margin: 0 auto 1.25rem; padding: 6px;
  border: 1px solid rgba(26, 38, 34, .08); border-radius: 24px; box-shadow: var(--ombre-1);
}
.mp--forme .mp-bandeau.reduit { padding-block: 4px; }
.mp--forme .mp-bandeau .mp-recherche { border: 0; background: transparent; border-radius: 18px; }
.mp--forme .mp-large { padding-top: 1.5rem; gap: var(--head-gap); }
.mp--forme .mp-resultats-page { gap: 1.5rem; }
.mp--forme .mp-liste-tete { gap: 1.1rem; max-width: 58rem; }
.mp--forme .mp-liste-tete h1 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.015em; }
.mp--forme .mp-filtre { min-height: 2.375rem; padding: 0 1rem; font-size: .875rem; font-weight: 500; border-color: rgba(26, 38, 34, .16); }
.mp--forme .mp-filtre[aria-pressed="true"] { background: var(--nuit); border-color: var(--nuit); }
.mp--forme .mp-res { border-color: rgba(26, 38, 34, .08); box-shadow: var(--ombre-1); }
.mp--forme .mp-res__texte h2 { font-size: var(--fs-h3); line-height: 1.15; }
.mp--forme .mp-liste-carte { top: calc(var(--hdr-zone) + 5.75rem); }
.mp--forme .mp-vide h2 { font-size: var(--fs-h2s); }
.mp--forme .mp-elargir { border-color: #C9C1B0; }
.mp--forme .mp-seo, .mp--forme .mp-voisines { margin-top: calc(var(--sec-y) * .5); }
.mp--forme .mp-seo h2 { font-size: var(--fs-h2s); }
.mp--forme .mp-seo p { font-size: 1rem; line-height: 1.65; }
.mp--forme .mp-voisines { padding-top: var(--head-gap); border-top: 1px solid var(--trait); gap: var(--gap-lg); }
.mp--forme .mp-voisines strong { font-size: .75rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); }
.mp--forme .mp-grille3 { gap: var(--gap); }
.mp--forme .mp-tuile { padding: var(--pad); gap: .6rem; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.mp--forme .mp-tuile strong { font-size: 1.125rem; font-weight: 650; line-height: 1.35; }
.mp--forme .mp-tuile span { font-size: .9375rem; line-height: 1.6; color: var(--encre2); }
.mp--forme a.mp-tuile:hover { transform: translateY(-4px); box-shadow: var(--ombre-2); border-color: color-mix(in srgb, var(--accent) 30%, #fff); }

/* ─── 8. La fiche d'un psy, la page d'un cabinet ───────────────────────────── */
.mp--forme .mp-scene { width: min(var(--coque), calc(100vw - 2 * var(--edge))); margin: var(--edge) auto 0; border-radius: var(--r-band); padding: calc(var(--hdr-zone) - var(--edge) + 4.5rem) var(--inset) calc(var(--inset) * .7); }
.mp--forme .mp-scene__in { width: 100%; }
.mp--forme .mp-scene--image { padding: 0 0 2rem; }
.mp--forme .mp-scene--image .mp-scene__couverture { border-radius: var(--r-band); }
.mp--forme .mp-scene--image .mp-scene__in { width: auto; padding-inline: var(--inset); }
.mp--forme .mp-scene--cabinet:not(.mp-scene--image) { height: calc(var(--hdr-zone) + 7rem); padding: 0; }
.mp--forme .mp-scene .mp-hero h1 { font-size: var(--fs-h1); line-height: 1.04; }
.mp--forme .mp-hero__accroche { font-size: var(--fs-lead); line-height: 1.6; }
.mp--forme .mp-badges li { min-height: 2.25rem; padding: 0 .9rem; font-size: .875rem; font-weight: 500; }
.mp--forme .mp-psy { padding-top: calc(var(--sec-y) * .55); gap: var(--gap-lg); }
.mp--forme .mp-psy__col { gap: calc(var(--sec-y) * .7); }
.mp--forme .mp-psy__resa { top: calc(var(--hdr-zone) + 1.25rem); }
.mp--forme .mp-section { gap: 1.25rem; }
.mp--forme .mp-section > h2 { font-size: var(--fs-h2s); }
.mp--forme .mp-bref { padding: var(--pad); gap: 1.1rem; }
.mp--forme .mp-bref dl { gap: 1.25rem 2rem; }
.mp--forme .mp-bref dl > div { padding-top: .875rem; border-top: 2px solid var(--deco); }
.mp--forme .mp-bref dt { font-size: .8125rem; margin-bottom: .2rem; }
.mp--forme .mp-bref dd { font-size: 1rem; font-weight: 600; line-height: 1.4; }
.mp--forme .mp-entre { padding: var(--pad); gap: 1.1rem; }
.mp--forme .mp-entre li .mp-ic { width: 44px; height: 44px; padding: 10px; margin-top: 0; border-radius: 12px; background: var(--accent-doux); }
.mp--forme .mp-etapes li::before { width: 2.25rem; height: 2.25rem; box-shadow: 0 0 0 5px var(--fond); }
.mp--forme .mp-etapes li { grid-template-columns: 2.25rem 1fr; }
.mp--forme .mp-etapes li > span { padding-top: 5px; }
.mp--forme .mp-resa { border-color: rgba(26, 38, 34, .08); box-shadow: var(--ombre-2); }
.mp--forme .mp-resa h2 { font-size: 1.25rem; letter-spacing: 0; }
.mp--forme .mp-resa .mp-bouton { min-height: 3.25rem; }
.mp--forme .mp-cab { padding-top: 1rem; }
.mp--forme .mp-acces { padding: var(--pad); border-radius: var(--rayon); background: #fff; border: 1px solid rgba(26, 38, 34, .08); box-shadow: var(--ombre-1); }
.mp--forme .mp-acces__plan { border-radius: 14px; }
.mp--forme .mp-rdv-final { margin-bottom: 0; }
.mp--forme .mp-rdv-final .mp-surtitre { margin-bottom: 1rem; }
.mp--forme .mp-tarifs li { padding: 1.1rem var(--pad); }
.mp--forme .mp-cab-tete h1 { font-size: var(--fs-h1); }
.mp--forme .mp-cab-infos { padding: var(--pad); }
.mp-rdv-final { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; text-align: left; }
.mp-rdv-final h2 { font-size: var(--fs-h2s); line-height: 1.1; }
.mp-rdv-final p { margin: .5rem 0 0; color: var(--encre2); }

/* ─── 9. Le lexique ────────────────────────────────────────────────────────── */
.mp-lex-une { margin: .75rem auto calc(var(--sec-y) * .6); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--fond)) 0%, var(--sable) 100%); }
.mp--forme .mp-lex-une h1 { max-width: 20ch; }
.mp--forme .mp-tuile2 small { font-size: .8125rem; color: var(--doux); margin-top: -.25rem; }
.mp--forme .mp-large > .mp-pro { margin-top: 0; }
.mp--forme .mp-lex-une .mp-lex-tete { grid-template-columns: minmax(0, 1fr) clamp(220px, 26vw, 320px); gap: var(--gap-lg); }
.mp--forme .mp-lex-tete__texte { gap: 1.1rem; }
.mp--forme .mp-lex-une .mp-hero__accroche { max-width: 46rem; }
.mp--forme .mp-lex .mp-psy { padding-top: 0; }
.mp--forme .mp-autres { padding: var(--pad); gap: .6rem; }
.mp--forme .mp-autres strong { font-size: .75rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--doux); margin-bottom: .25rem; }

/* ─── 10. Les questions ────────────────────────────────────────────────────── */
.mp--forme .mp-faq details { padding: 0; border-color: var(--trait); }
.mp--forme .mp-faq summary { align-items: center; padding: 1.35rem 0; font-size: 1.0625rem; }
.mp--forme .mp-faq summary::after, .mp--forme .mp-faq details[open] summary::after {
  content: ''; width: 1.5rem; height: 1.5rem; flex-shrink: 0; border-radius: 50%;
  background: linear-gradient(var(--accent), var(--accent)) center / 42% 1px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 1px 42% no-repeat, var(--accent-doux);
  transition: transform .35s var(--ease);
}
.mp--forme .mp-faq details[open] summary::after { transform: rotate(45deg); }
.mp--forme .mp-faq p { margin: 0; padding-bottom: 1.5rem; font-size: .9375rem; line-height: 1.65; }
.mp-questions { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--gap-lg); align-items: start; }
.mp-questions .mp-tete { margin-bottom: 0; }
.mp--forme .mp-questions .mp-tete h2 { font-size: var(--fs-h2s); line-height: 1.1; }

/* ─── 11. Le pied : sombre, en colonnes ────────────────────────────────────── */
.mp--forme .mp-pied { margin-top: var(--sec-y); padding: clamp(3.5rem, 2rem + 4vw, 5rem) 0 0; display: block; background: var(--nuit); border: 0; color: #C9D3CF; font-size: .9375rem; }
.mp-pied__cols { width: var(--page); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--gap-lg) 2rem; }
.mp-pied__id { display: flex; flex-direction: column; gap: 1.1rem; }
.mp-pied__id p { margin: 0; max-width: 22rem; line-height: 1.6; }
.mp--forme .mp-pied__logo { color: #fff; }
.mp--forme .mp-pied__logo .mp-logo { height: 24px; }
.mp--forme .mp-pied .mp-logo [fill="#1F6F63"] { fill: #8FD3C4; }
.mp-pied__t { margin: 0 0 1rem; font-size: .75rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: #8FD3C4; }
.mp-pied__cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.mp--forme .mp-pied a { color: #C9D3CF; text-decoration: none; transition: color .2s; }
.mp--forme .mp-pied a:hover { color: #fff; }
.mp-pied__cols li { line-height: 1.5; }
.mp-pied__cols li strong { color: #fff; }
.mp-pied__bas { width: var(--page); margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) auto 0; padding: 1.5rem 0 2.5rem; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; font-size: .8125rem; color: #9FB0AA; }
.mp-pied__bas .mp-pied__liens { gap: .4rem 1.25rem; }
.mp--forme .mp-pied__bas a { color: inherit; }
.mp--forme .mp-urgence { padding: 0 var(--gut) 2rem; background: var(--nuit); color: #9FB0AA; font-size: .8125rem; }
.mp--forme .mp-urgence strong { color: #fff; }

/* ─── 12. La page introuvable ──────────────────────────────────────────────── */
.mp--forme .mp-perdu { padding-top: calc(var(--sec-y) * .6); gap: 1.25rem; }

/* ─── Petits écrans ────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .mp-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .mp-tete--double, .mp-questions, .mp-pro { grid-template-columns: minmax(0, 1fr); }
  .mp-tuiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-pied__cols { grid-template-columns: 1fr 1fr; }
  .mp-pied__id { grid-column: 1 / -1; }
  .mp--forme .mp-temps::before { display: none; }
  .mp--forme .mp-orientation { grid-template-columns: 1fr; }
  .mp--forme .mp-lex-une .mp-lex-tete { grid-template-columns: minmax(0, 1fr); }
  .mp--forme .mp-psy__resa { top: auto; }
}
@media (max-width: 720px) {
  .mp--forme .mp-une { min-height: 0; }
  .mp--forme .mp-haut { gap: .5rem; }
  .mp--forme .mp-haut .mp-haut__connexion { min-height: 0; height: calc(var(--hdr-h) - 14px); padding: 0 .9rem; }
  .mp-atouts, .mp-tuiles--3, .mp-pied__cols { grid-template-columns: minmax(0, 1fr); }
  .mp--forme .mp-bandeau { position: static; }
  .mp--forme .mp-recherche > .mp-bouton { min-height: 3.125rem; }
  .mp--forme .mp-scene--image .mp-scene__in { padding-inline: 1rem; }
  .mp--forme .mp-urgence { padding-bottom: 90px; }
  .mp-final__boutons .mp-bouton { width: 100%; }
}

/* Le pied d'une page de cabinet : une ligne, à sa marque. */
.mp--forme .mp-pied--cabinet { padding: 2.25rem 0 1rem; }
.mp--forme .mp-pied--cabinet > span { display: block; width: var(--page); margin: 0 auto .75rem; }
.mp--forme .mp-pied--cabinet .mp-pied__liens { display: flex; }