/* =========================================================
   Véronique Callet — feuille de style principale
   Palette : teal rgb(0,128,128) / beige / blanc
   Titres : Space Mono · Texte : Montserrat
   ========================================================= */

:root {
  --teal: rgb(0, 128, 128);
  --teal-dark: #005f5f;
  --teal-light: #e2f0ef;
  --beige: #f7f2ea;
  --beige-dark: #ece3d5;
  --violet: #b6a7d6;
  --texte: #23423f;
  --texte-doux: #5d7a77;
  --blanc: #ffffff;
  --rayon: 10px;
  --ombre: 0 6px 24px rgba(0, 60, 60, .08);
  /* Conteneur de l'original : 1100px (mesuré : contenu à left 90 @1280 et 410 @1920,
     soit (viewport - 1100) / 2 — 1140px décalait tout de 20px vers la gauche). */
  --largeur: 1100px;
  --titre: "Space Mono", ui-monospace, "Courier New", monospace;
  --corps: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gris-clair: rgb(227, 223, 223);   /* fond hero + témoignages (valeur relevée sur l'original) */
  --gris-nav: rgb(51, 55, 61);        /* couleur nav en état scrollé sur l'original */
  /* Hauteur du header. Relevée sur l'original par balayage de largeurs
     (tools/hero_pente.py puis sonde dédiée) : 80px jusqu'à 666, 60px de 667 à
     1024, 70px à partir de 1025 — et cela sur TOUTES les pages du site
     (/, /qui-suis-je/, /methodes/, /contact/, /blog/ donnent les mêmes trois
     valeurs). Ce n'est donc pas un réglage propre à l'accueil.
     Notre copie servait 82px sous 901 et 70px au-delà : c'est ce décalage qui
     portait l'écart résiduel de ±10px du document (voir plus bas). */
  --header-h: 70px;
}

@media (max-width: 666px) { :root { --header-h: 80px; } }
@media (min-width: 667px) and (max-width: 1024px) { :root { --header-h: 60px; } }

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

/* Bandeau de préproduction (voir isStaging dans .eleventy.js / base.njk) */
.staging-banner {
  background: #b23b3b;
  color: #fff;
  text-align: center;
  font-family: var(--corps);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  letter-spacing: .02em;
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  font-family: var(--corps);
  /* Mesure sur l'original : Montserrat 14.4px / line-height 20px, couleur teal.
     Nos 17px/29.75px en gris fonce gonflaient chaque paragraphe de ~50 % et
     etiraient toute la page. */
  font-size: 14.4px;
  line-height: 20px;
  color: var(--teal);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal-dark); }

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 700;
  line-height: 1.25;
  color: var(--teal);
  margin: 0 0 .6em;
}
h1,
/* Le hero de l'accueil n'a pas de H1 sur l'original (voir src/index.njk) :
   .hero-titre porte exactement la même apparence sur un H2. */
.hero-titre {
  /* Valeurs relevées sur l'original : Space Mono italic 400, 64px / line-height 62px */
  font-weight: 400;
  font-style: italic;
  font-size: 64px;
  line-height: 62px;
}
.h1-accent { color: var(--blanc); }
h2 {
  /* Mesuré sur l'original : 40px / line-height 40px (et non 33.6px sur une seule
     ligne pleine largeur). Les titres y sont volontairement étroits — ils tombent
     sur 2 ou 3 lignes, ce qui fait toute la respiration de la mise en page. */
  font-size: 40px;
  line-height: 1;
  max-width: 20ch;
}
/* Largeurs relevées une à une sur l'original : chaque titre a sa propre mesure,
   c'est elle qui décide du nombre de lignes. */
#accompagnement h2 {
  font-size: 20.8px; line-height: 30px;
  font-family: var(--corps); font-weight: 500; font-style: italic;
  max-width: 772px;
  /* Sur l'original tout le bloc est centre : left 395 @1280, 715 @1920. */
  margin-inline: auto;
}
/* Mesure sur l'original : « Oooh Baby » 40px, weight 400, BLANC, centre,
   line-height 20px. Notre Space Mono 700 teal aligne a gauche etait faux. */
#temoignages h2.temoignages-titre {
  font-family: "Oooh Baby", cursive;
  font-size: 40px; font-weight: 400; line-height: 20px;
  color: var(--blanc); text-align: center;
  max-width: 530px; margin: 0;
}
/* Ce titre est en « Oooh Baby » (manuscrite) sur l'original, pas en Space Mono —
   c'est ce qui lui permet de tenir en 3 lignes dans 255px là où une monospace en
   prend 5. La police est déjà chargée dans base.njk. */
#approche h2 {
  font-family: "Oooh Baby", var(--titre);
  font-weight: 400;
  max-width: 255px;
}
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }

.wrap { width: min(100%, var(--largeur)); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--teal);
  color: #fff; padding: .6rem 1rem; z-index: 999;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }

/* ---------------- En-tête / navigation ---------------- */
/* Header dans le flux, comme sur le site d'origine. Deux états, pilotés par la classe
   .site-header--scrolled (ajoutée en JS après quelques px de scroll) :
   - repos  : transparent, logo + nav en blanc, superposé au hero
   - scroll : fond blanc opaque, logo + nav en gris (rgb(153,153,153) approx.),
              nav légèrement réduite (14.4px -> 11.7px), ombre discrète.
   Voir /assets/js/header.js pour la bascule de classe. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 0;
  transition: background-color .25s ease, box-shadow .25s ease;
}
/* La remontée du contenu sous le header transparent doit suivre --header-h, et
   non 70px figés : le header est `position: sticky`, il occupe donc --header-h
   (80 / 60 / 70 selon la largeur) DANS LE FLUX, et c'est exactement cela que la
   remontée doit annuler.

   Les 70px figés laissaient le contenu des pages internes à `--header-h - 70`
   au lieu de 0 — relevé par tools/internes_lot3.py sur /qui-suis-je/,
   /methodes/ et /contact/ : +10px à 390 (80−70), −10px à 768 et 1024 (60−70),
   +0 à 1440 et 1920 (70−70). L'écart se logeait INTÉGRALEMENT dans le premier Δ
   (Δgap = Δtop, tout l'aval à ±0), ce qui désigne bien un décalage d'origine et
   non une accumulation.

   Le .header-spacer n'était PAS en cause : il n'existe pas dans le DOM rendu
   (vérifié par tools/spacer_lot3.py, `spacer: ABSENT` des deux côtés). */
.site-header + main {
  transform: translateY(calc(-1 * var(--header-h, 70px)));
  margin-bottom: calc(-1 * var(--header-h, 70px));
}
/* La hauteur du bandeau suit --header-h (80 / 60 / 70, valeurs de l'original).
   Le padding vertical est repris par cette hauteur pour ne pas s'y ajouter. */
.site-header .header-inner { height: var(--header-h, 70px); padding: 0; }
.site-header--scrolled {
  background: var(--blanc);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
}
/* Pages sans hero clair : fond teal par défaut (état de repos), jusqu'au scroll. */
.site-header--solid:not(.site-header--scrolled) { background: var(--teal); }

/* Un spaceur de la hauteur du header compense le position:fixed pour que le
   contenu ne passe pas dessous (voir header.njk juste après </header>). */
.header-spacer { height: var(--header-h, 70px); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 0;
}
.brand { text-decoration: none; display: block; }
.brand-name {
  /* Original : Space Mono italic 700, 16px, blanc au repos */
  display: block; font-family: var(--titre); font-weight: 700; font-style: italic;
  font-size: 16px; color: var(--blanc); letter-spacing: 0;
  /* La marque est un H2 (comme sur l'original) : on neutralise la marge et la
     largeur maximale héritées de la règle générale h2, et on refixe le
     line-height (la règle h2 impose 1, la marque était rendue à 20px). */
  margin: 0; max-width: none; line-height: 16px;
  transition: color .25s ease, font-size .25s ease;
}
.site-header--scrolled .brand-name { color: var(--gris-nav); }

.site-nav ul {
  list-style: none; display: flex; align-items: center;
  gap: 1.35rem; margin: 0; padding: 0;
}
.site-nav a {
  /* Original : Montserrat 400, 14.4px, uppercase, blanc au repos ;
     11.7px, rgb(51,55,61) une fois le header scrollé. */
  text-decoration: none;
  font-family: var(--corps); font-weight: 400; font-size: 14.4px;
  text-transform: uppercase; color: var(--blanc);
  padding: .35rem 0; border-bottom: 2px solid transparent;
  transition: color .25s ease, font-size .25s ease;
}
.site-nav a:hover { color: var(--blanc); border-bottom-color: rgba(255, 255, 255, .7); }
.site-header--scrolled .site-nav a { color: var(--gris-nav); font-size: 11.7px; }
.site-header--scrolled .site-nav a:hover { color: var(--teal); border-bottom-color: var(--teal); }

.nav-toggle { display: none; }
.nav-burger { display: none; cursor: pointer; padding: .4rem; }
.nav-burger span {
  display: block; width: 26px; height: 2px; margin: 5px 0;
  background: var(--blanc); border-radius: 2px;
  transition: background-color .25s ease;
}
.site-header--scrolled .nav-burger span { background: var(--gris-nav); }
@media (min-width: 901px) {
  .site-header .header-inner {
    width: 100%;
    max-width: none;
    /* Pas de hauteur en dur ici : elle vient de --header-h (60px de 901 à 1024,
       70px au-delà, conformément à l'original). Un 70px fixe rendait le header
       trop haut de 10px sur la tranche 901–1024. */
    padding: 0;
  }
  .site-header .brand { margin-left: 42px; }
  .site-header .site-nav { margin-right: 10px; }
  .site-header .site-nav ul { gap: 0; }
  .site-header .site-nav a { padding: 15px 13px; margin: 0 5px; }
  .site-header .site-nav li:first-child a { margin-left: 0; }
  .site-header .site-nav li:last-child a { margin-right: 0; }
}

/* ---------------- Boutons ---------------- */
/* Les CTA de l'original sont des LIENS TEXTE précédés d'une puce ronde violette
   (pas de pilule, pas de flèche) : Montserrat 14.4px/400, padding 12px 24px 12px 0. */
.btn {
  position: relative;
  display: inline-block; background-color: transparent; color: var(--teal);
  font-family: var(--corps); font-size: 14.4px; font-weight: 400;
  text-transform: none; text-decoration: none;
  padding: 12px 39px 12px 30px; border: none; border-radius: 3px;
  perspective: 1px;
  transition: .18s ease;
}
.btn::before {
  content: "";
  position: absolute; left: 0; top: 14px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #b69bf8;
  border: 2px solid #b69bf8;
  transition: all .5s ease;
}
.btn:hover { color: var(--teal-dark); background-color: transparent; font-weight: 700; font-size: 1.1em; }
.btn:hover::before {
  left: -27px;
  top: -10px;
  width: 70px;
  height: 70px;
  background: transparent;
}
.section-teal .btn { color: var(--blanc); }
.section-teal .btn:hover { color: var(--beige-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }
.btn-label { display: block; font-size: .82rem; color: var(--texte-doux); margin-bottom: .35rem; }

/* ---------------- Sections génériques ---------------- */
/* L'original ne met AUCUN padding sur ses sections (0/0) : l'air vient des
   marges internes des blocs. Nos 88px haut+bas ajoutaient ~176px par section. */
section { padding: 3rem 0; }
.section-beige { background: var(--beige); }
.section-gris { background: var(--gris-clair); }
/* Fond teal plein rgb(0,128,128) + texte blanc (section « Je vous accompagne » / spécialités) */
.section-teal { background: var(--teal); color: var(--blanc); }
.section-teal h1, .section-teal h2, .section-teal h3, .section-teal h4 { color: var(--blanc); }
.section-teal a { color: var(--blanc); }
.section-teal .eyebrow { color: rgba(255, 255, 255, .8); }
.section-teal .lead, .section-teal .muted { color: rgba(255, 255, 255, .9); }
.eyebrow {
  font-family: var(--titre); font-size: .78rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--violet); margin: 0 0 .6rem;
}
.chapeau { font-size: 1.15rem; color: var(--texte-doux); max-width: 62ch; }
.muted { color: var(--texte-doux); }
.lead { font-size: 1.15rem; }

/* ---------------- Hero ---------------- */
/* Le visage « one line drawing » (AdobeStock_256179986_ColorValley.png) est posé
   en filigrane lavande derrière le héros, comme sur le site WordPress d'origine. */
.hero {
  /* Fond UNI rgb(227,223,223) sur toute la largeur (pas de dégradé) — valeur de l'original.
     Le header étant fixe et transparent au repos, le hero remonte sous lui
     (margin-top négatif) et compense par un padding-top supplémentaire pour
     que son contenu ne soit pas masqué. */
  position: relative;
  isolation: isolate;
  background: var(--gris-clair);
  margin-top: calc(-1 * var(--header-h, 70px));
  /* L'original n'a aucun padding sur le hero (0/0) : sa hauteur de 874px vient du
     contenu seul. Nos 166+112px de padding le portaient a 1050px et repoussaient
     le H1 de 210 a 310px. On garde juste de quoi degager le header fixe. */
  padding: var(--header-h, 70px) 0 0;
  border-bottom: 0;
  overflow: visible;
}
/* Pas de filigrane en fond de hero : sur l'original, l'illustration
   AdobeStock_256179986 n'est PAS dans le hero mais dans la section témoignages
   (mesuré : top 3357px, 550x660, alignée à gauche). La placer ici l'étirait sur
   toute la largeur du viewport et doublait le visuel du hero. Voir .temoignages. */

.hero h1, .hero .hero-titre { max-width: 16ch; margin-bottom: .5em; }
/* Paragraphe d'intro : Montserrat bold italic 16px/20px, teal */
.hero .hero-intro {
  /* Mesuré sur l'original : c'est un H2 Space Mono italic 24px/28.8px teal
     (bloc 660x197 = 7 lignes), les <strong> restant en 700. */
  max-width: min(660px, 58.6vw);
  font-family: var(--titre); font-weight: 400; font-style: italic;
  font-size: 24px; line-height: 28.8px; color: var(--teal);
  /* Conserve l'espacement obtenu quand l'accroche était un <p> (top 412px) :
     la règle générale h2 appliquerait 0 0 .6em. */
  margin: 24px 0;
}
.hero .hero-intro strong { font-weight: 700; }
/* Espacements internes du hero, relevés sur l'original @1280 : le H1 finit à
   334px, l'intro commence à 412px et les boutons restent à 675px. */
.hero h1, .hero .hero-titre { margin-bottom: 78px; max-width: min(660px, 58.6vw); }
/* 56px après l'intro : combiné aux 78px ci-dessus, ce rythme conserve la
   position des CTA tout en alignant le début de l'introduction. */
.hero .btn-row { margin-top: 56px; gap: 0; padding-left: 20px; }
.hero .btn-row > div { width: 320px; }
.hero .btn-label { font-size: 14.4px; margin-bottom: 14px; }

.hero-grid {
  display: grid;
  gap: 0;
  /* Original @1280 : image top 45 (hauteur 737), H1 top 210 — les deux blocs se
     chevauchent dans la même cellule, calés au HAUT (pas centrés : le centrage
     faisait dépendre la position du texte de la hauteur de l'image). */
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.hero-text { grid-area: 1 / 1; max-width: 660px; position: relative; z-index: 2; margin-top: 210px; }
.hero-illustration { grid-area: 1 / 1; justify-self: start; width: 637px; margin: 45px 0 0 calc(50vw - 82px - max(0px, (100vw - 1100px) / 2)); }
@media (max-width: 480px) {
  .hero-illustration { margin-top: calc(121px - (100vw - 390px) * .844444); }
}

@media (min-width: 667px) and (max-width: 700px) {
  .hero-illustration { margin-top: calc(232px - (100vw - 667px) * 2.757576); }
}
@media (min-width: 701px) and (max-width: 768px) {
  .hero-illustration { margin-top: calc(141px - (100vw - 700px) * .852941); }
}
@media (min-width: 769px) and (max-width: 820px) {
  .hero-illustration { margin-top: calc(83px - (100vw - 768px) * .557692); }
}
@media (min-width: 821px) and (max-width: 900px) {
  .hero-illustration { margin-top: calc(54px - (100vw - 820px) * .2375); }
}
@media (min-width: 901px) and (max-width: 1099px) {
  .hero-illustration { margin-top: 35px; }
}
/* L'original n'empile pas des paddings sous le hero : il lui IMPOSE une hauteur
   de 92 % du viewport, et ce à TOUTES les largeurs — pas seulement au-dessus de
   1100px comme le supposait le lot 2. La règle a été lue directement sur la
   section du hero de l'original (`section.elementor-element-9a7170b`) plutôt
   qu'inférée, via tools/hero_pente.py :

     vw=390  : min-height = 644px (vh=700) · 776.48px (vh=844) · 920px (vh=1000)
     vw=768  : min-height = 644px (vh=700) · 776.48px (vh=844) · 920px (vh=1000)
     vw=1024 : min-height = 644px (vh=700) · 776.48px (vh=844) · 920px (vh=1000)

   soit 0.92·vh dans les neuf cas. Le contenu de l'original DÉBORDE cette boîte
   (à 1024x768 : boîte 706.55px, contenu interne 869px) : c'est bien `height`,
   pas `min-height`, qu'il faut reproduire — l'original ne laisse pas son hero
   grandir avec son contenu.

   Le lot 2 avait substitué sous 1100px deux hauteurs FIXES (954px et 934px)
   choisies pour tomber juste à une largeur donnée ; elles étaient fausses
   partout ailleurs et portaient à elles seules la totalité de l'écart résiduel
   (tools/ancres_lot3.py : à 1024x768 l'écart de +167px du document se loge
   INTÉGRALEMENT dans l'intervalle hero→citation, +165.5px, tout l'aval étant à
   ±2px).

   La hauteur imposée doit en plus absorber la remontée sous le header fixe :
   notre hero commence à -1 × --header-h (il passe SOUS le header transparent),
   là où celui de l'original commence à 0. Sans ce rattrapage il finissait 70px
   trop haut et toute la page suivait (bas du hero 850 au lieu de 920, pied de
   page 4297 au lieu de 4367).

   Depuis que la remontée suit --header-h (voir `.site-header + main` plus haut),
   ce que le hero doit rattraper n'est plus 70px mais --header-h, PLUS le
   supplément que la nouvelle remontée lui prend par rapport aux 70px d'avant,
   soit (--header-h − 70). D'où 92vh + 2×--header-h − 70px, qui se réduit bien à
   92vh + 70px là où --header-h vaut 70 (1440, 1920 : valeurs du lot 2 inchangées).
   Essai contrôlé avant écriture (tools/essai_combo.py, combo D) : docH de
   l'accueil +0 / +0 / +0 / +0 / −1 sur la matrice, et pages internes ramenées
   de ±10px à +0. */
.hero { height: calc(92vh + 2 * var(--header-h, 70px) - 70px); padding-bottom: 0; }
/* Mesuré sur l'original @1280 : conteneur 660px, image 614x737 (max-width 93 %).
   Le plafond de 420px rendait le visage nettement plus petit que l'original. */
.hero-illustration img {
  width: 100%; height: auto; max-width: 614px;
  margin: 0; border-radius: var(--rayon);
}
@media (max-width: 1100px) {
  .hero-text { padding-left: 10px; }
}
/* Les deux hauteurs fixes qui figuraient ici (954px sous 666, 934px de 667 à
   1099) ont été retirées par le lot 3 : elles contredisaient la règle 92vh de
   l'original, désormais appliquée à toutes les largeurs ci-dessus. Seuls les
   décalages de contenu propres à ces paliers sont conservés. */
@media (max-width: 666px) {
  .hero-text { margin-top: 60px; }
  .hero h1, .hero .hero-titre, .hero .hero-intro { max-width: calc(100vw - 20px); }
}
@media (min-width: 667px) and (max-width: 1099px) {
  .hero-text { margin-top: 200px; }
}
/* ---------------- Bandeau image large ---------------- */
/* Sur l'original, ce bandeau (mains qui se touchent) CHEVAUCHE la frontière
   entre la section beige « Mon approche » et la section teal « L'accompagnement ».
   Mesure relevée sur l'original : la moitié basse de l'image (~52 % de sa hauteur)
   déborde DANS le teal. Comme l'image est fluide (hauteur = largeur / 3.44), le
   décalage doit être exprimé en % de cette hauteur, pas en pixels fixes — sinon
   la proportion du chevauchement change à chaque largeur d'écran.
   1366px de large -> 397px de haut -> ~207px dans le teal.
   Le décalage doit suivre la hauteur RÉELLE de l'image : elle grandit avec la
   largeur du viewport (14.5vw = la moitié de 29 % de ratio) MAIS se fige dès que
   l'image atteint son max-width de 1366px — d'où le plafond à -198px, sinon le
   chevauchement continue de croître et atteint 74 % sur un écran 2032px. */
.media-band {
  position: relative;
  z-index: 2;
  /* 63px entre la fin du lien « En savoir + » (1569) et le bandeau (1632)
     sur l'original ; la marge du dernier p en apporte déjà 34. */
  margin-top: 29px;
  /* Le débord dans le teal suit la hauteur réelle de l'image : 51,5 % de
     h = largeur/3.432, soit largeur/6.66 — donne -205px au plafond de 1366px
     et se réduit avec l'image sous 1086px de viewport. */
  margin-bottom: calc(-1 * min(1366px, 100% + 280px) / 6.66 - 3px);
  pointer-events: none;
}
.media-band img {
  /* L'original fait déborder ce bandeau de 140px de chaque côté, PLAFONNÉ à
     1366px de large : mesuré l=-43 r=1323 @1280 (1366), l=-140 r=1164 @1024
     (vw+280), l=-140 r=1040 @900. Largeur fixe en dessous de 1086px de
     viewport = faux (il gardait 1366 et débordait de plus en plus). */
  width: min(1366px, calc(100% + 280px));
  max-width: none; height: 401px;
  object-fit: fill; display: block;
  margin-left: calc(50% - min(683px, 50% + 140px));
}
@media (min-width: 667px) and (max-width: 1024px) {
  .media-band {
    margin-bottom: calc(-1 * min(1366px, 100% + 280px) / 6.66 - 13px - (1024px - 100vw) * .19);
  }
}
@media (max-width: 666px) {
  .media-band { margin-top: -32px; margin-bottom: -55px; }
  .media-band img {
    width: calc(100% - 20px);
    height: 125px;
    margin-left: 10px;
  }
}

/* La section teal qui suit le bandeau doit dégager la moitié d'image qui la
   recouvre, puis laisser ~112px d'air avant son titre (mesuré sur l'original).
   Sans ce padding, le texte remonte SOUS les doigts (mesuré : -79px au lieu de +112px).
   NB : on écrase le padding-top de `section` (clamp 3rem..5.5rem) — il ne s'ajoute
   pas, sinon l'écart double (mesuré : 224px). */
/* La section teal qui suit le bandeau dégage l'image qui la recouvre (205px)
   puis laisse l'air mesuré sur l'original : titre à teal_top + 320px
   (1825 → 2145). Valeur FIXE, comme le débord — plus aucun vw ici. */
.media-band + .section-teal { padding-top: 320px; }
@media (max-width: 666px) {
  .media-band + .section-teal { padding-top: 118px; }
}

/* ---------------- Figures illustrées ---------------- */
.figure { margin: 2rem 0; }
.figure img { border-radius: var(--rayon); margin-inline: auto; }
.figure figcaption {
  margin-top: .6rem; font-size: .85rem; color: var(--texte-doux);
  text-align: center; font-style: italic;
}
.figure-small img { max-width: 300px; }
.figure-illus img { max-width: 380px; }
.figure-portrait img { max-width: 520px; box-shadow: var(--ombre); }

/* ---------------- Section « Mon approche » ---------------- */
/* Mesures sur l'original @1280 : section de 1049 à 1883 (834px), SANS fond ;
   175px d'air entre la fin du hero (874) et le contenu (1049).
   Texte : Montserrat 14.4/20 ITALIC, paragraphes margin-bottom 20px,
   colonne de 691px à x=445. */
#approche { padding: 175px 0 0; }
.approche-grid {
  display: grid;
  /* Mesuré sur l'original : colonne visuelle de 270px (image 256 + 2x7 d'air),
     texte à x=445 → gouttière de 85px. */
  gap: 85px;
  grid-template-columns: 270px minmax(0, 1fr);
  align-items: start;
  margin-top: 0;
}
.approche-visuel { text-align: center; }
/* Le haut de l'image ronde est aligné sur le haut du texte (1051 vs 1049). */
.approche-visuel .figure { margin: 0; }
.figure-round img {
  /* Mesuré sur l'original : 246x250, bordure 5px BLANCHE (pas 2px violette). */
  border-radius: 50%;
  border: 5px solid var(--blanc);
  width: 246px;
  height: 250px;
  object-fit: cover;
  box-shadow: var(--ombre);
}
/* Le titre de la section vit dans la colonne de gauche, sous l'image, en
   manuscrite « Oooh Baby » avec l'effet grave de l'original. */
#approche .approche-visuel h2 {
  margin: 53px 0 0;
  font-family: "Oooh Baby", cursive;
  font-size: 40px;
  font-weight: 400;
  line-height: 40px;
  max-width: 255px;
  margin-inline: auto;
  color: var(--gris-clair);
  text-shadow: -3px -3px 6px rgba(0, 0, 0, .3);
}
.approche-texte { max-width: 691px; font-style: italic; }
/* 34px entre paragraphes sur l'original (p tops : 1049/1183/1277/1411 pour des
   hauteurs de 100/60/100 → 20px de marge + 14px de gouttière de widget). */
.approche-texte p { margin: 0 0 34px; }

@media (min-width: 667px) and (max-width: 1099px) {
  .approche-grid { grid-template-columns: 25vw minmax(0, 1fr); }
  .figure-round img { width: min(246px, calc(25vw - 20px)); margin-left: 2px; margin-right: 0; }
  #approche .approche-visuel h2 { max-width: calc(25vw - 16px); }
  .approche-texte { width: calc(100% - 50px - (1024px - 100vw) * .015625); }
}
@media (max-width: 666px) {
  .approche-grid { grid-template-columns: 1fr; gap: 0; }
  .approche-visuel { order: -1; }
  #approche .approche-visuel h2 {
    max-width: calc(100vw - 20px);
    margin: 53px auto 0;
  }
  .approche-texte { width: calc(100% - 20px); margin-inline: 10px; }
}
@media (min-width: 1100px) {
  .figure-round img { margin-left: 7px; margin-right: 0; }
}

/* ---------------- Grilles / cartes ---------------- */
.grid { display: grid; gap: 1.6rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--beige-dark);
  border-radius: var(--rayon); padding: 1.7rem; box-shadow: var(--ombre);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card-link { text-decoration: none; color: inherit; display: block; transition: .18s ease; }
.card-link:hover { transform: translateY(-3px); border-color: var(--teal); color: inherit; }
.card-meta { font-size: .82rem; color: var(--texte-doux); font-family: var(--titre); }

/* ---------------- Accordéon spécialités ---------------- */
/* Mesuré sur l'original : items TRANSPARENTS sur le fond teal (aucune carte
   blanche), séparés par des filets 1px rgb(0,146,146). Titre : Space Mono
   italic 40px/400 VIOLET CLAIR rgb(182,155,248), icône +/− à gauche.
   Corps : Montserrat italic blanc, indenté de ~200px sous le titre.
   Item 1060px de large dans le wrap de 1100 (20px de marge interne). */
.accordion { max-width: none; margin-inline: 20px; }
.accordion details {
  background: transparent; border: 0;
  border-top: 1px solid rgb(0, 146, 146);
  border-radius: 0; margin-bottom: 0; overflow: hidden;
}
.accordion details:last-child { border-bottom: 1px solid rgb(0, 146, 146); }
.accordion summary {
  position: relative;
  cursor: pointer; list-style: none; padding: 15px 20px;
  font-family: var(--titre); font-weight: 400; font-style: italic;
  font-size: 40px; line-height: 59px; color: #b69bf8;
  display: flex; align-items: center; gap: 40px;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::before {
  content: "";
  width: 35px; height: 7px; border-radius: 4px;
  background: #b69bf8;
  flex: 0 0 35px;
  margin-right: -11px;
}
.accordion summary::after {
  content: "";
  position: absolute;
  left: 34px;
  top: 50%;
  width: 7px;
  height: 35px;
  border-radius: 4px;
  background: #b69bf8;
  transform: translateY(-50%);
  transition: transform .2s ease;
}
.accordion details[open] summary::before {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  margin-right: -16px;
  border-radius: 50%;
  background: #fff;
}
.accordion details[open] summary::after {
  left: 29px;
  width: 22px;
  height: 6px;
  background: var(--teal);
  transform: translateY(-50%);
}
.accordion details[open] > summary { color: #fff; }
.accordion .accordion-body {
  padding: 0 20px 25px 220px;
  font-family: var(--corps); font-size: 16px; line-height: 20px;
  font-style: italic; color: var(--blanc);
}
.section-teal .accordion .accordion-body { color: var(--blanc); }
.section-teal .accordion summary { color: #b69bf8; }
.accordion .accordion-body p { margin: 0 0 12px; }
.accordion .accordion-body p:last-child { margin-bottom: 0; }
/* Bouton en bas du panneau ouvert « La parentalité » (widget bouton Elementor
   sur l'original). Mesures relevées @1440 sur https://www.veronique-callet.fr/ :
   le lien fait 162x44 avec padding 12px 24px 12px 0 ; le libellé est un bloc de
   93x20 en Montserrat 14.4px/20px teal, décalé de 30px à gauche ; une pastille
   violette #b69bf8 de 15x15 (bordure 2px de la même couleur) est posée en
   absolu au bord gauche, 14px sous le haut du lien. */
.accordion .accordion-body p.accordion-cta { margin: 0; }
/* Sur l'original le bouton suit immédiatement le texte (1px d'écart) : le
   dernier paragraphe qui le précède ne doit pas garder sa marge basse de 12px. */
.accordion .accordion-body p:has(+ .accordion-cta) { margin-bottom: 0; }
.btn-pastille {
  position: relative;
  display: inline-block;
  padding: 12px 24px 12px 0;
  font-family: var(--corps); font-size: 14.4px; line-height: 20px;
  font-weight: 400; font-style: normal; color: var(--teal);
  text-decoration: none; border-radius: 3px;
}
.btn-pastille > span {
  display: block;
  margin: 0 15px 0 30px;
}
.btn-pastille::before {
  content: "";
  position: absolute; left: 0; top: 14px;
  width: 15px; height: 15px;
  background: #b69bf8; border: 2px solid #b69bf8; border-radius: 50%;
}
.btn-pastille:hover { color: var(--teal); text-decoration: underline; }
.section-teal .btn-pastille,
.section-teal .btn-pastille:hover { color: var(--teal); }
@media (max-width: 666px) {
  .accordion { margin-inline: 30px; }
  .accordion summary {
    font-size: 40px;
    line-height: 59px;
    gap: 30px;
    padding: clamp(0px, calc(13px - (100vw - 480px) * .083333), 13px) 20px;
  }
  /* Sous 667px l'original ne met AUCUN padding sur le corps du panneau : le
     bouton finit exactement au bas du panneau. Relevé sur la source à 360, 390,
     414, 480, 600 et 666px de large : padding 0/0/0/0 et « après bouton » = 0px,
     contre 20px à partir de 667px (rupture nette entre 666 et 667, le palier
     déjà utilisé ici). Nos 20px ajoutaient exactement les +20px d'écart du
     panneau relevés à 390x844 (724 contre 704). */
  .accordion .accordion-body { padding: 0; }
}
@media (min-width: 667px) {
  .accordion .accordion-body { padding: 0 0 20px 200px; }
}

/* ---------------- Témoignages ---------------- */
/* L'original place ici l'illustration AdobeStock_256179986 : 550x660, alignée à
   gauche, à pleine opacité (mesuré : top 3357, left 90, background-size 550px).
   Elle n'appartient pas au hero. En dessous de 1100px il n'y a pas la place de
   la loger à côté des témoignages : on la retire plutôt que de la superposer. */
/* L'original donne 800px a cette bande (contre 482 sans padding dedie) :
   l'illustration de 660px doit y tenir avec de l'air au-dessus et en dessous. */
/* L'original donne 800px a cette bande : l'illustration de 660px doit y tenir
   avec de l'air au-dessus et en dessous. min-height la garantit meme si le
   carousel des temoignages est plus court. */
/* L'illustration DEBORDE vers le haut dans la bande teal : sur l'original elle
   demarre a 3357 alors que la frontiere teal/gris est a 3521, soit 164px a
   cheval. La section ne doit donc pas rogner son ::before. */
#temoignages { position: relative; padding: 90px 0 0; min-height: 800px; overflow: visible; }
/* L'original CONSERVE la disposition deux colonnes (illustration 50 % /
   slider 50 %) à TOUTES les largeurs desktop — mesuré @1024 : illustration
   0..512 (50vw), nom du témoin à x=639, titre à left 10, renvoi blog à 522.
   L'ancien seuil à 1100px empilait tout : titre sur « Océane », moitié droite
   vide, puces sur le texte. On ne bascule en pile qu'en mobile (<667px). */
@media (min-width: 667px) {
  #temoignages::before {
    content: "";
    position: absolute;
    /* -164px : l'image mord sur la bande teal du dessus (valeur mesuree). */
    top: -164px;
    /* Ancrée sur la grille centrée quand elle a la place (left 90 @1280,
       410 @1920), collée au bord gauche en dessous (left 0 @1024, comme
       l'original) ; sa largeur suit alors la demi-page. */
    left: max(0px, calc(50% - 550px));
    width: min(50%, 550px); height: 660px;
    background-image: url("/assets/img/AdobeStock_256179986_ColorValley.png");
    background-repeat: no-repeat;
    background-size: 550px auto;
    pointer-events: none;
  }
  /* Le corps de section (slider + renvoi blog) demarre a 50vw + 10px sur
     l'original à toutes les largeurs (650 @1280, 522 @1024). */
  #temoignages { padding-left: calc(50vw + 10px); }
  /* Le .wrap interne ne doit pas se recentrer dans l'espace restant. */
  #temoignages > .wrap { width: auto; max-width: none; margin: 0; }
  /* Le titre se place SOUS l'illustration, dans la colonne gauche :
     left 100 @1280 (grille + 10) mais 10 @1024 (bord + 10) — max() reproduit
     les deux comportements mesurés sur l'original. */
  #temoignages > .wrap > h2.temoignages-titre {
    position: absolute;
    left: calc(max(0px, (100vw - 1100px) / 2) + 10px);
    top: calc(-164px + 660px - 30px);
    width: min(530px, calc(50vw - 20px));
  }
}
@media (max-width: 666px) {
  #temoignages::before {
    content: "";
    position: absolute;
    top: -164px;
    left: 0;
    width: 100%;
    height: 750px;
    background-image: url("/assets/img/AdobeStock_256179986_ColorValley.png");
    background-repeat: no-repeat;
    background-size: 550px auto;
    pointer-events: none;
  }
}
/* Slider des temoignages — valeurs relevees sur le Swiper de l'original :
   slide 530x400 (x=650), fondu enchaine 500ms, autoplay 5s, boucle,
   fleches 50x50 violettes centrees verticalement, puces teal de 8px.
   Sans JS (.is-slider absent), les slides restent simplement empilees. */
/* Slide de 530x400 sur l'original : on fixe la hauteur pour que le fondu ne
   fasse pas sauter la mise en page entre deux temoignages de longueurs differentes. */
.temoignages { position: relative; width: min(530px, 100%); margin-left: 0; margin-right: auto; }
.temoignages-piste { min-height: 400px; }
.temoignages-piste { display: grid; align-content: start; }

/* Mode slider actif : les slides se superposent dans la meme cellule. */
.temoignages.is-slider .temoignages-piste > .temoignage { grid-area: 1 / 1; }
.temoignages.is-slider .temoignage {
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;   /* speed: 500 */
}
.temoignages.is-slider .temoignage.est-actif { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .temoignages.is-slider .temoignage { transition: none; }
}

/* Sans JS : empilement lisible, pas de superposition. */
.temoignages:not(.is-slider) .temoignages-piste { gap: 1.6rem; }

/* Fleches : 50x50, violettes, sans fond, de part et d'autre de la slide. */
.temoignages-fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--violet); font-size: 50px; line-height: 1;
  font-family: var(--corps);
  transition: color .2s ease;
}
.temoignages-fleche:hover { color: var(--teal); }
.temoignages-fleche--prev { left: 0; }
.temoignages-fleche--next { right: 0; }


/* Puces : 8px, teal, l'inactive en translucide. */
.temoignages-puces {
  display: flex; justify-content: center; gap: .5rem;
  height: 30px; align-items: center;
  /* Sur l'original les puces sont DANS la zone de la slide, 35px au-dessus de
     son bas (3976 pour une slide 3611..4011). */
  margin-top: -35px;
}
.temoignages-puce {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--teal); opacity: .35;
  transition: opacity .2s ease;
}
.temoignages-puce.est-actif { opacity: 1; }
.temoignages-puce:hover { opacity: .7; }

/* Le NOM est au-dessus du temoignage sur l'original : 40px Space Mono italic
   teal centre, puis le texte en 14.4px Montserrat. */
.temoignage-nom {
  display: block; text-align: center;
  font-family: var(--titre); font-size: 40px; font-style: italic;
  font-weight: 700; color: var(--teal); font-variant: normal;
  margin-bottom: .4rem;
}
/* Le contenu de la slide occupe une colonne de 284px centree dans les 530px
   (mesure : x=773 pour une slide a x=650), ce qui laisse la place aux fleches. */
.temoignage-nom, .temoignage blockquote {
  width: min(284px, 100%); margin-inline: auto;
}
.temoignage blockquote {
  margin-block: 0; font-family: var(--corps); font-size: 14.4px;
  line-height: 20px; color: var(--teal);
}

/* L'original n'encadre pas les temoignages : pas de carte blanche, pas de
   bordure, pas d'italique sur le texte (14.4px Montserrat normal, teal). */
/* L'original n'encadre pas les temoignages : pas de carte blanche, pas de
   bordure. Marges navigateur du <figure> remises a zero (sinon left +40px).
   Le NOM demarre a 70px du haut de la slide sur l'original (3681 vs 3611). */
.temoignage { background: none; border: 0; padding: 55px 0 0; margin: 0; }

/* ---------------- Contenu long (prose) ---------------- */
.page-header { background: var(--beige); padding: calc(clamp(2.5rem, 6vw, 4rem) + var(--header-h, 70px)) 0 2.5rem; }
.page-header h1 { margin-bottom: .3rem; }
.post-meta { font-family: var(--titre); font-size: .85rem; color: var(--texte-doux); margin: 0; }
.prose { max-width: 46rem; padding: clamp(2rem, 5vw, 3.5rem) 0; }
.prose h2 { margin-top: 2.2rem; }
.prose blockquote {
  margin: 1.8rem 0; padding: .3rem 0 .3rem 1.4rem;
  border-left: 3px solid var(--violet); color: var(--texte-doux); font-style: italic;
}
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .45rem; }
.prose hr { border: 0; border-top: 1px solid var(--beige-dark); margin: 2.5rem 0; }
.post-footer {
  display: flex; flex-wrap: wrap; gap: 1rem;
  padding-bottom: 4rem; max-width: 46rem;
}
.download { margin: 2rem 0; }

/* ---------------- Formulaire ---------------- */
.form-card {
  background: #fff; border: 1px solid var(--beige-dark);
  border-radius: var(--rayon); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--ombre);
}
.form-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .88rem; font-weight: 600; }
.field input, .field textarea {
  font: inherit; font-size: 1rem; padding: .75rem .9rem;
  border: 1px solid var(--beige-dark); border-radius: 8px;
  background: var(--blanc); color: var(--texte);
}
.field input:focus, .field textarea:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px var(--teal-light); }
.field textarea { min-height: 170px; resize: vertical; }
.form-note { font-size: .85rem; color: var(--texte-doux); }
.honeypot { position: absolute !important; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ---------------- Pied de page ---------------- */
/* Mesuré sur l'original @1280 : fond BLANC, 4 colonnes égales PLEINE LARGEUR
   (320px chacune, la 1re commence à x=0 — pas de grille 1100px ici).
   col 1 : marque Space Mono italic 700 16px teal + bouton Facebook rond violet ;
   cols 2-3 : liens Montserrat italic 14.4px UPPERCASE gris clair rgb(227,223,223),
   padding 10px 20px ; col 4 : adresse Montserrat italic 16px teal.
   Pas de bande copyright séparée. */
.site-footer { background: var(--blanc); color: var(--teal); padding: 40px 0 10px; margin-top: 0; }
.site-footer .footer-grid {
  width: min(100%, 1366px); max-width: none; margin-inline: auto;
  display: grid; gap: 0; grid-template-columns: repeat(4, 1fr);
}
.footer-brand {
  font-family: var(--titre); font-weight: 700; font-style: italic;
  font-size: 16px; line-height: 16px; color: var(--teal); margin: 45px 0 20px; text-align: center;
  /* H2 comme sur l'original : la largeur maximale de la règle h2 ne s'applique pas. */
  max-width: none;
}
.footer-fb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border: 2px solid var(--violet); border-radius: 50%;
  color: var(--violet); margin-left: calc(50% - 34px);
  transition: .18s ease;
}
.footer-fb:hover { color: var(--blanc); background: var(--violet); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 0; }
.footer-col a {
  display: block; padding: 10px 20px;
  font-family: var(--corps); font-style: italic; font-size: 14.4px;
  text-transform: uppercase; text-decoration: none;
  color: var(--gris-clair);
}
.footer-col a:hover { color: var(--teal); }
.footer-adresse {
  font-style: italic; font-size: 16px; line-height: 30px;
  color: var(--teal); margin-top: 0;
}
.footer-adresse a { display: inline; position: relative; top: -5px; padding: 0; text-transform: none; color: var(--violet); font-size: 16px; }
.footer-adresse a:hover { color: var(--teal); }
@media (max-width: 666px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 0; }
  .site-footer { height: 695px; overflow: hidden; }
  .footer-brand { text-align: center; margin: 45px 0 20px; }
  .footer-fb { margin-left: calc(50% - 34px); height: 69px; }
  .site-footer .footer-col ul { margin-top: 0; }
  .site-footer .footer-grid nav:first-of-type ul { margin-top: 0; }
  .site-footer nav.footer-col a { width: 100%; text-align: center; }
  .site-footer .footer-adresse { margin-top: 0; text-align: center; line-height: 29px; }
  .site-footer .footer-adresse a { position: relative; top: -5px; }
}
@media (min-width: 667px) {
  .site-footer { height: 290px; overflow: hidden; }
  .site-footer .footer-adresse { position: relative; top: -6px; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .nav-burger { display: block; }
  .header-inner { flex-wrap: wrap; }
  .site-nav {
    flex-basis: 100%; max-height: 0; overflow: hidden;
    transition: max-height .25s ease;
  }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: .2rem; padding: .5rem 0 1rem; }
  .site-nav a { display: block; padding: .55rem 0; width: 100%; }
  .nav-toggle:checked ~ .site-nav { max-height: 32rem; }
}

/* ---------------- Section « L'accompagnement » ---------------- */
/* L'original centre le bloc d'intro sur le VIEWPORT avec un décalage constant
   de +141px (left 395 @1280, 715 @1920) — mais l'ACCORDÉON, lui, reste dans la
   grille de 1100px. Le débordement pleine largeur ne s'applique donc qu'au
   bloc d'intro, pas à tous les .wrap de la section. */
#accompagnement > .wrap.accompagnement-intro {
  width: 100%; max-width: none; padding-inline: 0; margin-inline: 0;
}
/* Teal : 1835 -> 3521 sur l'original (1686px). Le padding-top est déjà imposé
   par .media-band + .section-teal ; en bas, 290px d'air après le dernier item
   de l'accordéon (mesuré : accordéon fini à 3232, frontière à 3521). */
#accompagnement { padding-bottom: 293px; min-height: 0; }
/* 120px entre le bouton « méthodes » (fin 2443) et le 1er item (2563). */
#specialites { padding-top: 120px; }
/* Le bloc n'est PAS centre : mesure sur l'original, il demarre a 395px @1280 et
   715px @1920, soit un decalage constant de +141px par rapport au centre. */
#accompagnement > .wrap > h2,
#accompagnement > .wrap > p,
#accompagnement > .wrap > .btn-row {
  max-width: 772px;
  margin-left: calc((100vw - 772px) / 2 + 141px);
  margin-right: 0;
}
#accompagnement > .wrap > p,
#accompagnement .btn {
  font-size: 16px;
  line-height: 20px;
}
#accompagnement > .wrap > p { font-style: italic; }
#accompagnement .btn { padding-right: 39px; }
#accompagnement > .wrap > h2 { margin-bottom: 20px; }
#accompagnement > .wrap > p { margin-top: 0; margin-bottom: 21px; }
#accompagnement > .wrap > .btn-row { margin-top: calc(1.8rem + 5px); }
@media (min-width: 667px) and (max-width: 1100px) {
  #accompagnement > .wrap > h2,
  #accompagnement > .wrap > p,
  #accompagnement > .wrap > .btn-row {
    margin-left: calc(27.9vw + 5px);
    max-width: min(772px, calc(72.1vw - 27px));
  }
}
@media (max-width: 666px) {
  #accompagnement > .wrap > h2,
  #accompagnement > .wrap > p,
  #accompagnement > .wrap > .btn-row {
    margin-left: 30px;
    max-width: calc(100vw - 60px);
  }
  #temoignages h2.temoignages-titre {
    font-size: 64px;
    line-height: 55px;
  }
  #accompagnement .btn {
    width: min(365.3125px, calc(100% - 15px));
    padding: 12px 24px 12px 0;
  }
}
@media (max-width: 666px) {
  #accompagnement { padding-bottom: 264px; }
  #temoignages {
    min-height: min(1224px, calc(1444px - 45.8333vw));
    padding-top: 466px;
  }
  #temoignages h2.temoignages-titre {
    width: calc(100% - 20px);
    max-width: none;
    margin-left: 10px;
  }
}
@media (max-width: 390px) {
  #accompagnement { padding-bottom: calc(726.286px - 115.7143vw); }
}
@media (min-width: 391px) and (max-width: 480px) {
  #accompagnement { padding-bottom: calc(877.333px - 154.4444vw); }
}
@media (min-width: 481px) and (max-width: 600px) {
  #accompagnement { padding-bottom: calc(-420px + 115.8333vw); }
}
@media (min-width: 601px) and (max-width: 666px) {
  #accompagnement { padding-bottom: calc(145px + 21.6667vw); }
}
@media (min-width: 667px) and (max-width: 850px) {
  #accompagnement { padding-bottom: calc(313px - (100vw - 700px) * .125); }
}
@media (min-width: 667px) and (max-width: 680px) {
  .media-band + .section-teal {
    padding-top: calc(335px - (100vw - 667px) * .039604);
  }
  #accompagnement {
    padding-bottom: calc(322px - (100vw - 700px) * .125 - (15px - (100vw - 667px) * .039604) + 2px);
  }
}
@media (min-width: 681px) and (max-width: 768px) {
  .media-band + .section-teal {
    padding-top: calc(335px - (100vw - 667px) * .039604);
  }
  #accompagnement {
    padding-bottom: calc(313px - (100vw - 700px) * .125 - (15px - (100vw - 667px) * .039604));
  }
}
@media (min-width: 851px) and (max-width: 900px) {
  #accompagnement {
    padding-bottom: calc(328px - (100vw - 900px) * .274 - (41px - (100vw - 851px) * .653061));
  }
}
@media (min-width: 901px) and (max-width: 950px) {
  #accompagnement {
    padding-bottom: calc(328px - (100vw - 900px) * .274 - (9px + (100vw - 900px) * .16));
  }
}
@media (min-width: 951px) and (max-width: 1000px) {
  #accompagnement {
    padding-bottom: calc(328px - (100vw - 900px) * .274 - (17px - (100vw - 950px) * .22));
  }
}
@media (min-width: 1001px) and (max-width: 1024px) {
  #accompagnement {
    padding-bottom: calc(328px - (100vw - 900px) * .274 - (6px - (100vw - 1000px) * .25));
  }
}
@media (min-width: 1025px) and (max-width: 1050px) {
  #accompagnement {
    padding-bottom: calc(328px - (100vw - 900px) * .274 + (100vw - 1024px) * .423077);
  }
}
@media (min-width: 1051px) and (max-width: 1100px) {
  #accompagnement {
    padding-bottom: calc(328px - (100vw - 900px) * .274 - (-11px + (100vw - 1050px) * .12));
  }
}

/* Source Elementor column percentages, applied before rounding to pixels. */
@media (min-width: 667px) {
  /* Source image widget margin-bottom -150px plus next section -58px. */
  .media-band { margin-bottom: -208px; }
  .media-band + .section-teal { padding-top: 320px; }
  .hero .hero-titre, .hero .hero-intro {
    max-width: calc(min(1100px, 100vw - 20px) * .6);
  }
  #approche .approche-visuel h2 {
    width: calc(min(1100px, 100vw) * .23198);
    max-width: none; margin: 51px 0 0;
  }
  /* Source image widget has a 254px inline formatting box for its 250px image. */
  .approche-visuel .figure { padding-bottom: 4px; }
  #accompagnement > .wrap > h2,
  #accompagnement > .wrap > p,
  #accompagnement > .wrap > .btn-row {
    margin-left: calc(max(0px, (100vw - 1100px) / 2) + 20px + min(1080px, 100vw - 20px) * .26369);
    max-width: calc(min(1080px, 100vw - 20px) * .73297 - 20px);
  }
}

/* ---------------- Renvoi vers le blog ---------------- */
/* Sur l'original ce bloc vit DANS la section témoignages, sous le slider,
   dans la colonne droite (x=650, 530px de large) : phrase à 3727, lien à 3801
   quand la section démarre à 3521. */
.blog-cta { margin-top: 25px; }
.blog-cta p { margin: 0 0 20px; max-width: 530px; }
.blog-cta .btn-row { margin-top: 0; }
@media (max-width: 666px) {
  .blog-cta {
    width: calc(100% - 20px);
    margin: 125px 0 0 10px;
  }
  .blog-cta p { width: 100%; margin-bottom: 34px; }
}

/* ---------------- Page « Qui suis-je ? » ---------------- */
.page-qui-suis-je .site-header {
  background: #fff;
}
.page-qui-suis-je .site-header .site-nav a,
.page-qui-suis-je .site-header .brand-name {
  color: #b0aeae;
}
.page-qui-suis-je .site-header .site-nav a:hover {
  color: #b0aeae;
  border-bottom-color: transparent;
}
/* Le sticky source devient encore plus pâle (#dcd4d4). Garder ici
   le gris visible du haut, sans réintroduire de blanc sur blanc. */
.page-qui-suis-je .site-header a:focus-visible,
.page-qui-suis-je .site-header button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
@media (max-width: 1024px) {
  .page-qui-suis-je .site-header .header-inner { width: 100%; flex-wrap: nowrap; gap: 0; }
  .page-qui-suis-je .site-header .brand { margin-left: 42px; }
  .page-qui-suis-je .site-header .nav-burger { display: block; width: 60px; height: 60px; padding: 10px; margin-right: 10px; flex-shrink: 0; }
  .page-qui-suis-je .site-header .nav-burger span { background: var(--teal); width: 30px; margin: 6px auto; }
  .page-qui-suis-je .site-header .site-nav { position: absolute; left: 0; top: calc(var(--header-h) - 10px); width: 100%; margin: 0; background: white; max-height: 0; overflow: hidden; }
  .page-qui-suis-je .site-header .site-nav ul { flex-direction: column; align-items: flex-start; padding: 0; gap: 0; }
  .page-qui-suis-je .site-header .site-nav li { width: 100%; }
  .page-qui-suis-je .site-header .site-nav a { display: block; width: 100%; margin: 0; padding: 13px 20px; color: #33373d; }
  .page-qui-suis-je .site-header .site-nav a:hover { color: #33373d; }
  .page-qui-suis-je .nav-toggle:checked ~ .site-nav { max-height: 32rem; }
  .page-qui-suis-je .site-header .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .page-qui-suis-je .site-header .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .page-qui-suis-je .site-header .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
.page-qui-suis-je .qui-page p { color: var(--teal); }
.page-qui-suis-je .qui-page p:empty { display: none; }
.page-qui-suis-je main > p:empty { display: none; }
.page-qui-suis-je .qui-intro {
  margin-top: 10px;
  margin-bottom: 100px;
  padding: 0;
  background: #fff;
}
.page-qui-suis-je .qui-intro-inner,
.page-qui-suis-je .qui-accompagnement-inner {
  width: min(100%, 1100px);
  margin-inline: auto;
}
.page-qui-suis-je .qui-intro-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
}
.page-qui-suis-je .qui-face {
  width: calc(100% + 300px);
  margin: 113px 0 0 50px;
  opacity: .43;
  position: relative;
  z-index: 0;
}
.page-qui-suis-je .qui-face img {
  width: 100%;
  max-width: none;
}
.page-qui-suis-je .qui-biographie {
  position: relative;
  z-index: 1;
  margin-top: 183px;
  padding-right: 11%;
}
.page-qui-suis-je .qui-biographie h1 {
  margin: 0;
  color: #b69bf8;
  font-family: var(--titre);
  font-size: 48px;
  font-weight: 400;
  font-style: italic;
  line-height: 30px;
}
.page-qui-suis-je .qui-biographie p {
  margin: 0 0 14px;
  font-family: var(--corps);
  font-size: 14.4px;
  font-weight: 400;
  line-height: 20px;
}
.page-qui-suis-je .qui-biographie .qui-chapeau {
  margin-top: 90px;
  margin-bottom: 34px;
  font-size: 17.6px;
  font-style: italic;
}
.page-qui-suis-je .qui-cursus {
  padding: 0 20px 100px;
  background: #fff;
}
.page-qui-suis-je .qui-cursus-inner {
  width: min(100%, 900px);
  margin-inline: auto;
}
.page-qui-suis-je .qui-cursus h2 {
  margin: 0 0 42px;
  color: #b69bf8;
  font-family: var(--titre);
  font-size: 42px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.15;
}
.page-qui-suis-je .qui-cursus-liste {
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-qui-suis-je .qui-cursus-item {
  position: relative;
  padding-left: 28px;
  color: var(--teal);
  font-family: var(--corps);
  font-size: 15px;
  line-height: 1.6;
}
.page-qui-suis-je .qui-cursus-item::before {
  content: "";
  position: absolute;
  top: .65em;
  left: 0;
  width: 9px;
  height: 9px;
  border: 2px solid #b69bf8;
  border-radius: 50%;
}
.page-qui-suis-je .qui-accompagnement {
  padding: 75px 0;
  background: #f8f5fe;
}
.page-qui-suis-je .qui-accompagnement-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
}
.page-qui-suis-je .qui-portrait {
  box-sizing: border-box;
  width: min(182px, 80%);
  height: 186px;
  margin: 0 0 0 calc(80% - min(182px, 80%));
  border: 2px solid #b69bf8;
  border-radius: 50%;
  overflow: hidden;
}
.page-qui-suis-je .qui-portrait img {
  box-sizing: border-box;
  width: 100%;
  height: 182px;
  max-width: none;
  border: 5px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}
.page-qui-suis-je .qui-invitation-texte {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.page-qui-suis-je .qui-invitation-texte p {
  margin: 0;
  color: #bc98ff;
  font-family: var(--corps);
  font-size: 19.2px;
  font-weight: 400;
  font-style: italic;
  line-height: 20px;
}
.page-qui-suis-je .qui-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 104px;
}
.page-qui-suis-je .qui-actions p {
  margin: 0;
  font-size: 14.4px;
  line-height: 20px;
}
.page-qui-suis-je .qui-actions .btn {
  margin-top: -6px;
  padding: 12px 24px 12px 0;
  font-size: 14.4px;
  line-height: 20px;
}
.page-qui-suis-je .qui-actions .btn:hover { font-size: 15.84px; }
.page-qui-suis-je .qui-actions > div:first-child .btn { width: min(231px, 100%); }
.page-qui-suis-je .qui-actions > div:last-child .btn { width: 140px; }

@media (min-width: 667px) and (max-width: 1099px) {
  .page-qui-suis-je .qui-face {
    margin-top: calc(65px + (100vw - 667px) * .110855);
  }
  .page-qui-suis-je .qui-biographie {
    margin-top: calc(99px + (100vw - 667px) * .193995);
  }
}
@media (min-width: 667px) and (max-width: 719px) {
  .page-qui-suis-je .qui-actions > div:first-child .btn span {
    display: block;
    width: 129px;
    margin-inline: auto;
    text-align: center;
  }
}
@media (min-width: 667px) and (max-width: 768px) {
  .page-qui-suis-je .qui-intro {
    margin-top: calc(12px - (100vw - 667px) * .029703);
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .page-qui-suis-je .qui-intro {
    margin-top: calc(10px - (100vw - 768px) * .027344);
  }
}
@media (min-width: 1025px) and (max-width: 1099px) {
  .page-qui-suis-je .qui-intro {
    margin-top: calc(3px + (100vw - 1024px) * .093333);
  }
}
@media (max-width: 666px) {
  .page-qui-suis-je .qui-intro-inner,
  .page-qui-suis-je .qui-accompagnement-inner {
    width: 100%;
  }
  .page-qui-suis-je .qui-intro-inner,
  .page-qui-suis-je .qui-accompagnement-inner {
    display: block;
  }
  .page-qui-suis-je .qui-face {
    width: calc(100% + 300px);
  }
  .page-qui-suis-je .qui-biographie {
    margin-top: 93px;
    display: flow-root;
  }
  .page-qui-suis-je .qui-cursus {
    padding-right: 30px;
    padding-bottom: 75px;
    padding-left: 30px;
  }
  .page-qui-suis-je .qui-cursus h2 {
    margin-bottom: 32px;
    font-size: 34px;
  }
  .page-qui-suis-je .qui-cursus-item {
    padding-left: 24px;
    font-size: 14.4px;
    line-height: 1.55;
  }
  .page-qui-suis-je .qui-portrait {
    margin-left: calc(80% - min(182px, 80%));
    margin-right: 0;
  }
  .page-qui-suis-je .qui-actions {
    display: block;
  }
  .page-qui-suis-je .qui-actions > div {
    height: 58px;
  }
}
@media (max-width: 390px) {
  .page-qui-suis-je .qui-face { margin-top: calc(-52px + 50vw); }
}
@media (min-width: 391px) and (max-width: 480px) {
  .page-qui-suis-je .qui-face { margin-top: calc(286px - 36.6667vw); }
}
@media (min-width: 481px) and (max-width: 600px) {
  .page-qui-suis-je .qui-face { margin-top: calc(299.975px - 39.4958vw); }
}
@media (min-width: 601px) and (max-width: 666px) {
  .page-qui-suis-je .qui-face { margin-top: calc(290.273px - 37.8788vw); }
}

/* ---------------- Page « Méthodes » ---------------- */
.page-methodes .site-header { background: var(--beige); }
.page-methodes .methodes-page { background: var(--teal); }
.page-methodes .methodes-page p:empty { display: none; }
.page-methodes .methodes-intro {
  padding: 150px 0 0;
  background: var(--teal);
}
.page-methodes .methodes-intro-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  width: min(100%, 1366px);
  margin-inline: auto;
}
.page-methodes .methodes-mains {
  width: min(406px, 100%);
  margin: -79px -52px -17px 0;
  opacity: .28;
}
.page-methodes .methodes-mains img {
  width: 100%;
  max-width: none;
}
.page-methodes .methodes-contenu h1 {
  width: 80%;
  margin: 0;
  color: #b69bf8;
  font-family: var(--titre);
  font-size: 62.4px;
  font-weight: 400;
  font-style: italic;
  line-height: 68.64px;
}
.page-methodes .methodes-contenu p {
  margin: 0 0 14px;
  color: #fff;
  font-family: var(--corps);
  font-size: 14.4px;
  font-weight: 400;
  line-height: 20px;
}
.page-methodes .methodes-contenu .methodes-chapeau {
  margin-top: 40px;
  margin-bottom: 34px;
  font-size: 19.2px;
  font-style: italic;
  line-height: 25px;
}
.page-methodes .methodes-contenu .methodes-fin-intro { margin-bottom: 34px; }
.page-methodes .methodes-cabinet {
  width: min(637px, 100%);
  margin: 0;
}
.page-methodes .methodes-cabinet img {
  width: 637px;
  height: auto;
  max-width: 100%;
}
.page-methodes .methodes-details {
  padding: 50px 0 110px;
  background: var(--teal);
}
.page-methodes .methodes-details-inner { max-width: 1100px; margin-inline: auto; }
.page-methodes .methodes-accordeon {
  width: calc(79.333% - 20px);
  margin: 10px 0 0 calc(10% + 10px);
}
.page-methodes .methodes-accordeon details {
  border: 0;
  border-block: 1px solid rgb(0, 146, 146);
  overflow: visible;
  border-radius: 0;
  background: transparent;
}
.page-methodes .methodes-accordeon summary {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  color: #b69bf8;
  font: italic 700 16px/16px var(--titre);
}
.page-methodes .methodes-accordeon summary::before,
.page-methodes .methodes-accordeon summary::after { content: none; }
.page-methodes .methodes-title {
  font: italic 700 40px/59px var(--titre);
}
/* Same font file and floating inline flow as Elementor, not a CSS drawing. */
.page-methodes .methodes-icon { float: left; width: 1.5em; margin-right: 35px; }
.page-methodes .methodes-icon-glyph {
  display: inline-block;
  font: normal 900 40px/40px "Font Awesome 5 Free";
  margin: 10px 0;
}
.page-methodes .methodes-icon-glyph::before { content: "\f067"; }
.page-methodes details[open] .methodes-icon-glyph::before { content: "\f056"; }
@media (max-width: 666px) {
  .page-methodes .methodes-icon { width: 1.2em; }
}
.page-methodes .methodes-accordeon details[open] > summary { color: #fff; }
.page-methodes .methodes-accordeon .accordion-body {
  padding: 10px 0 20px 200px;
  color: #fff;
  font-family: var(--corps);
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  line-height: 20px;
}
.page-methodes .methodes-accordeon .accordion-body p {
  margin: 0 0 14px;
  color: #fff;
}
.page-methodes .methodes-accordeon .accordion-body p:last-child { margin-bottom: 0; }
.page-methodes .methodes-accordeon details:first-child .accordion-body p:last-child { margin-bottom: 14px; }
@media (min-width: 667px) and (max-width: 1024px) {
  .page-methodes .methodes-intro { padding-top: 140px; }
}
@media (min-width: 667px) and (max-width: 700px) {
  .page-methodes .methodes-accordeon details:first-child .accordion-body { padding-bottom: 22px; }
}
@media (max-width: 666px) {
  .page-methodes .methodes-intro-inner { display: block; width: 100%; }
  .page-methodes .methodes-mains {
    width: calc(100% + 52px);
    margin: -69px 0 -17px;
    text-align: center;
  }
  .page-methodes .methodes-mains img {
    width: min(406px, 100%);
    margin-inline: auto;
  }
  .page-methodes .methodes-contenu { margin-top: 0; }
  .page-methodes .methodes-contenu h1 { width: 80%; }
  .page-methodes .methodes-accordeon { width: calc(100% - 20px); margin-inline: 10px; }
  .page-methodes .methodes-accordeon details:first-child .accordion-body { padding-bottom: 22px; }
}

/* Mobile source stacks two empty Elementor columns (min-height:1px),
   surrounding the accordion. Item borders belong to the box, not min-heights. */
@media (min-width: 321px) and (max-width: 666px) {
  .page-methodes .methodes-accordeon { padding-block: 1px; }
  .page-methodes .methodes-accordeon details:first-child .accordion-body { padding-bottom: 20px; }
  .page-methodes .methodes-accordeon details {
    border-block: 1px solid rgb(0, 146, 146);
  }
  .page-methodes .methodes-accordeon details:nth-child(n) > summary {
    min-height: 0; padding-bottom: 0;
  }
}

/* ---------------- Page « Contact » ----------------
   Tout ce bloc est préfixé par .page-contact (classe posée sur <body> par
   src/contact.njk) : aucune règle ici ne peut atteindre l'accueil ni une autre
   page. Les valeurs sont des MESURES de l'original relevées le 2026-09-17
   (tools/diag_contact.py et sondes de géométrie), pas des choix esthétiques.

   Forme de l'original : UNE bande violette rgb(182,155,248) pleine largeur,
   conteneur 1100px centré, deux colonnes 60,545 % / 38,818 %. La colonne
   gauche porte le titre puis le formulaire, la droite le bloc Facebook puis
   l'adresse. */
.page-contact .contact-col-droite {
  background: url('/assets/img/AdobeStock_281016504_ColorValley-e1651045901747.png') 0 0 / 63% no-repeat;
}
@media (min-width: 1025px) {
  .page-contact .contact-col-droite { background-position: 161.6px 353.6px; }
}
.page-contact .contact-bande { background: rgb(182, 155, 248); }

.page-contact .contact-grille {
  width: min(100%, var(--largeur));
  margin-inline: auto;
  display: grid;
  /* Pourcentages relevés par balayage de largeurs sur l'original
     (700 → 1920 px) : 60,5245 % et 38,8062 %, stables à toutes les largeurs.
     Ils ne totalisent pas 100 % — le reste est la gouttière que laisse
     Elementor (666 + 427 = 1093 pour 1100 @1440).
     Nos 60,545 % / 38,818 % donnaient 464,98px au lieu de 464,83px @768 :
     0,16px suffisait à faire basculer un mot du chapeau à la ligne suivante,
     soit 20px de paragraphe et 18px de document. */
  grid-template-columns: 60.5245% 38.8062%;
  align-items: start;
}

/* Décalage vertical de la bande relevé sur l'original : 0 au-dessus de 1024,
   −10px entre 667 et 1024, +10px en mobile. */
.page-contact .contact-bande { margin-top: 0; }
@media (min-width: 667px) and (max-width: 1024px) {
  .page-contact .contact-bande { margin-top: -10px; }
}
@media (max-width: 666px) {
  .page-contact .contact-bande { margin-top: 10px; }
}

/* --- Colonne gauche : titre + formulaire ---
   150px de respiration en haut ET en bas : c'est ce qui donne à la bande ses
   956px @1440 (150 + 231 d'intro + 425 de formulaire + 150). */
.page-contact .contact-col-gauche { padding: 150px 0; }

/* 10px de retrait en HAUT, pas une marge sur le H1 : une marge traverserait ce
   conteneur (fusion des marges) et décalerait le bloc entier de 10px vers le
   bas — le titre restait bien à y=160 mais l'intro démarrait à 160 au lieu de
   150, et la bande gagnait 10px. */
.page-contact .contact-intro { padding: 10px 10px 24px; }
.page-contact .contact-intro h1 {
  margin: 0;
  font-family: var(--titre);
  font-style: italic;
  font-weight: 400;
  font-size: 62.4px;
  line-height: 68.64px;
  color: var(--blanc);
  letter-spacing: normal;
}
.page-contact .contact-chapeau {
  margin: 20px 0 0;
  font-family: var(--corps);
  font-style: italic;
  font-size: 14.4px;
  line-height: 20px;
  color: var(--blanc);
  max-width: none;
}
.page-contact .contact-chapeau strong { font-weight: 700; }

/* Le formulaire n'occupe pas toute la colonne : 592 / 666 sur l'original,
   moins 10px de retrait de chaque côté, soit 572px de champs @1440. */
.page-contact .contact-form-zone {
  width: 88.889%;
  padding: 10px 10px;
}
.page-contact .contact-form-zone form { margin: 0; }

.page-contact .contact-champs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  /* 15px, pas 16 : sur l'original les rangées démarrent à 391 / 447 / 502 pour
     des champs de 40,39px, soit des gouttières mesurées de 15,33 et 14,94px.
     Avec 16px la zone de message tombait à 504 et le bouton à 758 (+2px), ce
     qui se retrouvait intégralement dans la hauteur du document. */
  row-gap: 15px;
}
.page-contact .contact-message { grid-column: 1 / -1; }

/* Saisies : fond TRANSPARENT et un seul filet blanc de 2px en haut — pas de
   carte blanche à coins arrondis. Texte teal en capitales, 16px / 22.4px :
   22,4 + 16 de padding + 2 de filet = les 40px de haut relevés. */
.page-contact .contact-saisie {
  font-family: var(--corps);
  font-size: 16px;
  line-height: 22.4px;
  font-weight: 400;
  color: var(--teal);
  /* Relevé sur l'original : rgba(255,255,255,0) — transparent, mais déclaré à
     partir du blanc. `transparent` calcule rgba(0,0,0,0) : visuellement
     identique, différent à la mesure. */
  background-color: rgba(255, 255, 255, 0);
  border: 0 solid var(--blanc);
  border-top-width: 2px;
  border-radius: 0;
  padding: 8px 16px;
  text-transform: uppercase;
  width: 100%;
  display: block;
  box-shadow: none;
}
/* 0,6 d'opacité : valeur relevée sur l'original. À 1 les indications de saisie
   paraissaient plus sombres que celles de la source. */
.page-contact .contact-saisie::placeholder { color: var(--teal); opacity: .6; }
.page-contact .contact-saisie:focus { outline: 2px solid var(--blanc); outline-offset: 2px; }

/* La zone de message est le seul pavé plein : fond blanc, filet blanc sur les
   quatre côtés. 10 lignes de 22,4 + 10 de padding + 4 de filet = 238px. */
.page-contact .contact-message {
  background-color: var(--blanc);
  border-width: 2px;
  padding: 5px 14px;
  resize: vertical;
  min-height: 0;
}

.page-contact .contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin-top: 16px;
  padding: 0 24px;
  font-family: var(--titre);
  font-size: 15px;
  line-height: 15px;
  font-weight: 400;
  color: var(--blanc);
  background-color: transparent;
  border: 0 none var(--blanc);
  border-radius: 3px;
  cursor: pointer;
}
.page-contact .contact-btn:hover { text-decoration: underline; }
/* Puce ronde + libellé : 15×15 et 5px de gouttière, comme sur l'original
   (puce à x=425, texte à x=445 @1440). */
.page-contact .contact-btn-puce {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  flex: 0 0 auto;
}
.page-contact .contact-btn-puce svg { display: block; }
.page-contact .contact-btn-texte { line-height: 15px; }

/* --- Colonne droite : bloc Facebook puis adresse --- */
.page-contact .contact-col-droite { padding-top: 212px; }

.page-contact .contact-fb {
  display: grid;
  /* 93 / 265 / 67 sur 427 : une gouttière, le texte, la pastille. */
  grid-template-columns: 21.78% 62.06% 15.69%;
  padding-bottom: 24px;
}
.page-contact .contact-fb-texte {
  grid-column: 2;
  /* 10px de retrait de chaque côté, comme le padding des colonnes Elementor :
     le paragraphe fait 245px de large à x=939 @1440, pas 265 à x=929. */
  margin: 10px 10px 0;
  padding: 0;
  font-family: var(--titre);
  font-style: italic;
  font-size: 16px;
  line-height: 30px;
  font-weight: 400;
  color: var(--blanc);
  text-align: right;
}
.page-contact .contact-fb-texte strong { font-weight: 700; }
.page-contact .contact-fb-pastille {
  grid-column: 3;
  margin: 42px 0 0 10px;
  width: 68px;
  height: 69px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--blanc);
  border-radius: 50%;
  color: var(--blanc);
  box-sizing: border-box;
}

/* Adresse : cinq lignes de 30px d'écart. Sur l'original chaque ligne est un
   <p> d'un pixel de haut (line-height 1px) et c'est la marge qui espace —
   quirk Elementor reproduit tel quel pour retrouver la même trame. */
.page-contact .contact-adresse {
  width: 62.76%;
  padding: 0 10px;
  margin-top: 133px;
}
.page-contact .contact-adresse p {
  margin: 0 0 29px;
  font-family: var(--corps);
  font-style: italic;
  font-size: 12.8px;
  line-height: 1px;
  color: var(--teal);
}
.page-contact .contact-adresse p:last-child { margin-bottom: 0; }
.page-contact .contact-adresse a { color: inherit; text-decoration: none; }
.page-contact .contact-adresse a:hover { text-decoration: underline; }

@media (min-width: 667px) and (max-width: 1024px) {
  .page-contact .contact-col-droite { padding-top: 230px; }
  .page-contact .contact-adresse { margin-top: 128px; }
}

/* Mobile : les deux colonnes s'empilent (breakpoint Elementor 767px, mais nos
   relevés donnent la bascule sous 667 comme le reste du site). */
@media (max-width: 666px) {
  .page-contact .contact-grille { grid-template-columns: 1fr; }
  .page-contact .contact-col-gauche { padding: 150px 0; }
  .page-contact .contact-form-zone { width: 100%; }
  /* 134px sous la dernière ligne d'adresse : sur l'original la colonne de
     droite descend jusqu'à 1558 alors que l'adresse s'arrête à 1422. Sans ce
     talon la bande mesurait 1413px au lieu de 1547 et le document perdait
     134px. */
  .page-contact .contact-col-droite { padding-top: 34px; padding-bottom: 134px; }
  .page-contact .contact-fb {
    grid-template-columns: 1fr;
    padding-bottom: 10px;
  }
  .page-contact .contact-fb-texte { grid-column: 1; }
  .page-contact .contact-fb-pastille {
    grid-column: 1;
    margin: 34px auto 0;
  }
  .page-contact .contact-adresse {
    width: 100%;
    margin-top: 10px;
  }
}

/* En-tête de la page Contact. Relevé sur l'original : bandeau GRIS CLAIR
   rgb(227,223,223) — pas le teal que servait `.site-header--solid` — avec les
   liens en blanc et celui de la page courante en teal.
   Portée limitée à .page-contact : /methodes/ et /blog/ présentent le même
   écart mais seront repris à leur tour, et ce lot ne doit rien y changer. */
.page-contact .site-header--solid:not(.site-header--scrolled) {
  background: var(--gris-clair);
}
/* Lien de la page courante : teal, à l'état de repos comme à l'état scrollé. */
.page-contact .site-header .site-nav a[aria-current="page"],
.page-contact .site-header--scrolled .site-nav a[aria-current="page"] {
  color: var(--teal);
}

/* =========================================================
   Pages « archive + article » — /blog/, /category/formations/
   et chaque publication (classe .page-archive sur <body>)
   =========================================================

   Structure relevée sur l'original par tools/releve_archive.py, vérifiée par
   tools/test_parite_archive.py :

     · bande de titre pleine largeur, fond rgb(227,223,223), H2 Space Mono
       48px/48px 500 italique blanc centré. La bande est haute de 325px et le
       H2 y est posé par une marge haute de 80px sur son conteneur (t=175 pour
       une bande à t=10 @1440), pas par un centrage vertical ;
     · puis une section deux colonnes, même fond : à gauche la liste des
       publications puis une illustration de 365×422 débordant de 45px de
       chaque côté, à droite l'article (méta en ligne, H1, chapeau, corps).

   Points de géométrie qui ne se devinent pas et se sont payés en mesures :

     · la MARGE HAUTE de la bande vaut 10px @1440/@1920 et @390, 0 de 667 à
       1024. L'original la produit par `margin-top: -60px` sur une section qui
       suit un en-tête de 70px ; on la pose directement ;
     · le conteneur du H2 fait 1080px de large pour un conteneur de page de
       1100 : 10px de gouttière de chaque côté. En dessous de 1025 il occupe
       toute la largeur moins 10px ;
     · la liste latérale est une GRILLE : une seule colonne de 275px @1440 et
       @1920, mais DEUX colonnes (113px, puis 81px) de 667 à 1024, avec
       25px/30px d'espacement. C'est ce qui empile les trois billets sur deux
       rangées en tablette ;
     · chaque entrée de méta est un `flex` avec 12,5px de marge de chaque côté
       (soit 25px entre deux entrées) et l'icône occupe 14px plus 9px de
       gouttière avant le texte : la date commence donc à x+23, pas à x ;
     · le chapeau porte 25px de padding bas EN PLUS de ses 14px de marge : sans
       lui il manque 25px sur chaque article.                                  */

.page-archive main { background: var(--gris-clair); }

/* --- Bande de titre ----------------------------------------------------- */
.page-archive .archive-bande {
  background: var(--gris-clair);
  /* Hauteur PILOTÉE PAR LE CONTENU, pas figée : 165px au-dessus du H2 et 112px
     en dessous. Un H2 sur une ligne (48px) donne 325 ; sur deux lignes (96px,
     cas de « Partager mes réflexions » à 390) il donne 373. Ce sont exactement
     les deux hauteurs relevées sur l'original. */
  margin-top: 10px;
  padding: 0 0 112px;
}
.page-archive .archive-bande-inner {
  width: min(100% - 20px, calc(var(--largeur) - 20px));
  margin-inline: auto;
  /* Le H2 est posé à 165px du haut de la bande (relevé : t=175 pour une bande
     à t=10 @1440 ; t=165 pour une bande à t=0 @1024). L'original y parvient
     par 80px de marge sur le widget PLUS la hauteur des éléments de bande qui
     le précèdent ; on pose directement la distance mesurée. */
  padding-top: 165px;
  /* Le H2 est aligné à GAUCHE sur les pages de billet et CENTRÉ sur /blog/ et
     /category/formations/ — divergence de la source, reproduite telle quelle
     par .page-archive-index ci-dessous. */
}
.page-archive .archive-bande-titre {
  font-family: var(--titre); font-size: 48px; line-height: 48px;
  font-weight: 500; font-style: italic; color: var(--blanc);
  text-align: start; margin: 0; max-width: none;
}
.page-archive-index .archive-bande-titre,
.page-formations .archive-bande-titre { text-align: center; }

/* --- Grille deux colonnes ----------------------------------------------- */
.page-archive .archive-corps {
  background: var(--gris-clair);
  /* 200px de talon sous la colonne la plus longue (padding du conteneur
     d'origine). */
  padding: 0 0 200px;
}
.page-archive .archive-grille {
  width: min(100%, var(--largeur)); margin-inline: auto;
  display: grid;
  /* 275 + 100 de gouttière + 721 = 1096 dans un conteneur de 1100. */
  grid-template-columns: 25% calc(74.666% - 100px);
  column-gap: 100px;
  align-items: start;
}

/* --- Colonne de gauche : liste des publications -------------------------- */
.page-archive .liste-publications {
  display: grid; grid-template-columns: 275px;
  row-gap: 25px; column-gap: 30px;
}
.page-archive .publication { margin: 0; }
.page-archive .publication-texte { padding-top: 13px; }
.page-archive .publication-titre {
  font-family: var(--corps); font-size: 17.6px; line-height: 20px;
  font-weight: 700; font-style: normal; margin: 0; max-width: none;
  /* Le H3 lui-même porte la couleur violette sur l'original, pas seulement son
     lien : un relevé du H3 (et non du <a>) doit voir rgb(182,155,248). */
  color: rgb(182, 155, 248);
}
.page-archive .publication-titre a {
  color: rgb(182, 155, 248); text-decoration: none;
  /* L'original grossit le lien de 10 % dans le titre (19.36px pour un H3 à
     17.6px) : quirk de la feuille du thème, reproduit. */
  font-size: 1.1em;
}
.page-archive .publication-titre a:hover { text-decoration: underline; }
.page-archive .publication-meta {
  font-family: var(--corps); font-size: 12.8px; line-height: 20px;
  font-weight: 400; color: var(--teal); margin-top: 7px;
}
.page-archive .publication-extrait {
  font-family: var(--titre); font-size: 14px; line-height: 21px;
  font-weight: 700; font-style: italic; color: rgb(119, 119, 119);
  /* Source: title-to-excerpt gap 6px, excerpt bottom margin 10px.
     Contain that margin in the card, as Elementor's flex article does. */
  margin: 6px 0 10px;
}
.page-archive .publication:has(.publication-extrait) { display: flow-root; }

/* --- Illustration sous la liste ----------------------------------------- */
/* Sur l'original l'image sort de 45px de CHAQUE côté de sa colonne : 365px de
   large pour une colonne de 275 (170 → 125). C'est elle qui produit le
   débordement horizontal de 9 à 45px mesuré sur la SOURCE ; le reproduire est
   la condition de la parité, pas un défaut à corriger. */
.page-archive .archive-illustration { margin: 150px -45px 100px; }
.page-archive .archive-illustration img {
  width: 365px; height: 422px; object-fit: fill; max-width: none;
}

/* --- Colonne de droite : l'article --------------------------------------- */
.page-archive .archive-colonne-article { padding-top: 18px; }
.page-archive .article-meta {
  list-style: none; margin: 0 0 35px; padding: 0;
  display: flex; flex-wrap: wrap;
}
.page-archive .article-meta li {
  font-family: var(--corps); font-size: 14.4px; line-height: 15px;
  font-weight: 400; text-transform: uppercase; color: var(--teal);
  display: flex; align-items: center;
  /* 12,5px de chaque côté comme l'original : 25px séparent deux entrées, et le
     premier décalage de 12,5px est repris par la marge négative ci-dessous. */
  margin: 0 12.5px;
}
/* La liste déborde de 12,5px de CHAQUE côté de la colonne : c'est elle qui
   produit le débordement horizontal de 9px @1024 et 10px @768 mesuré sur
   l'original (le seul élément qui dépasse à ces largeurs). Reproduire la
   géométrie reproduit le débordement ; le forcer à zéro romprait la parité. */
.page-archive .article-meta { margin-left: -12.5px; margin-right: -12.5px; }
/* Icône du widget d'origine : un carré de 14px suivi de 9px de gouttière. On
   la reproduit par un pseudo-élément pour garder la même avance de texte sans
   dépendre d'une police d'icônes tierce. */
.page-archive .article-meta li::before {
  content: ""; width: 14px; height: 14px; margin-right: 9px;
  flex: 0 0 14px;
  background: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
}
.page-archive .article-meta-date {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L64 64C28.7 64 0 92.7 0 128l0 16 0 48L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-256 0-48 0-16c0-35.3-28.7-64-64-64l-40 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L152 64l0-40zM48 192l352 0 0 256c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256z'/%3E%3C/svg%3E");
}
.page-archive .article-meta-categorie {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M345 39.1L472.8 168.4c52.4 53 52.4 138.2 0 191.2L360.8 472.9c-9.3 9.4-24.5 9.5-33.9 .2s-9.5-24.5-.2-33.9L438.6 325.9c33.9-34.3 33.9-89.4 0-123.7L310.9 72.9c-9.3-9.4-9.2-24.6 .2-33.9s24.6-9.2 33.9 .2zM0 229.5L0 80C0 53.5 21.5 32 48 32l149.5 0c17 0 33.3 6.7 45.3 18.7l168 168c25 25 25 65.5 0 90.5L277.3 442.7c-25 25-65.5 25-90.5 0l-168-168C6.7 262.7 0 246.5 0 229.5zM144 144a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E");
}
@font-face {
  font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900;
  font-display: block; src: url('/assets/fonts/fa-solid-900.woff2') format('woff2');
}
.page-archive .article-meta li.article-meta-date::before {
  content: "\f133"; font: normal 900 14px/14px "Font Awesome 5 Free";
  background: none; mask: none; -webkit-mask: none;
}
.page-contact .contact-btn-puce svg { display: none; }
.page-contact .contact-btn-puce::before {
  content: "\f111"; font: normal 900 15px/15px "Font Awesome 5 Free";
}
/* La date est BLANCHE sur l'original (c'est un lien), la catégorie teal. */
.page-archive .article-meta-date a { color: var(--blanc); text-decoration: none; }
.page-archive .article-meta-categorie a { color: var(--teal); text-decoration: none; }
.page-archive .article-meta a:hover { text-decoration: underline; }

.page-archive .article-titre {
  /* U+FFFC du titre historique est absent de Space Mono : le repli sans-serif
     source lui donne 1em, contre .6em avec Courier New (une ligne perdue). */
  font-family: "Space Mono", sans-serif; font-size: 40px; line-height: 60px;
  font-weight: 400; font-style: italic; color: rgb(182, 155, 248);
  /* 20px entre le bas du H1 et le bloc suivant sur une page de billet
     (relevé : H1 403→463, chapeau à 483 @1440) ; 55px sur /blog/ et
     /category/formations/, où l'original insère un espaceur. */
  margin: 0 0 20px; max-width: none;
}
.page-archive-index .article-titre { margin-bottom: 55px; }
/* /blog/ et /category/formations/ affichent le titre en 56px ; les pages
   d'article en 40px. Différence relevée des deux côtés sur l'original. */
.page-archive.page-archive-index .article-titre { font-size: 56px; }

.page-archive .article-contenu { display: flow-root; }
.page-archive .article-nav-empty { margin-top: 20px; height: 0; }
.page-archive .article-contenu p {
  font-family: var(--corps); font-size: 14.4px; line-height: 20px;
  font-weight: 400; color: var(--teal); margin: 0 0 14px;
}
.page-archive .article-contenu p.intro-arcticle {
  font-size: 21.6px; line-height: 30px; font-style: italic;
  color: rgb(182, 155, 248);
  /* 25px de remplissage BAS en plus des 14px de marge (valeur de l'original :
     padding 0 0 25px, marge 0 0 14px). L'écart de 55px qui sépare le bas du H1
     du haut du chapeau vient, lui, de la marge basse du H1 ci-dessus. */
  margin: 0 0 14px; padding: 0 0 25px;
}
.page-archive .article-contenu ul,
.page-archive .article-contenu ol {
  font-family: var(--corps); font-size: 14.4px; line-height: 20px;
  color: var(--teal); padding-left: 40px; margin: 0;
}
.page-archive .article-contenu a { color: var(--teal); }
.page-archive .article-contenu strong { font-weight: 700; }

/* /formations/ : contenu plus long et structuré (sous-titres, listes) que les
   formations précédentes — on aère le texte plutôt que de garder la densité
   héritée de l'original, prévue pour un paragraphe ou deux. */
.page-formations .article-titre { margin-bottom: 32px; }
.page-formations.page-archive-index .article-titre { margin-bottom: 70px; }
.page-formations .article-contenu p {
  line-height: 26px; margin: 0 0 20px;
}
.page-formations .article-contenu h2 {
  font-family: var(--titre); font-size: 20.8px; font-style: italic;
  font-weight: 500; line-height: 30px; max-width: none;
  margin: 40px 0 16px;
}
.page-formations .article-contenu ul,
.page-formations .article-contenu ol {
  line-height: 26px; margin: 0 0 20px;
}
.page-formations .article-contenu li { margin-bottom: 8px; }
.page-formations .wp-block-file { margin-top: 32px; }

/* Bloc de fichier WordPress (programme PDF de la formation) : l'original rend
   un aperçu de 800px de haut, un lien texte et un bouton sombre. */
.page-archive .wp-block-file { margin: 0 0 17.28px; }
.page-archive .wp-block-file__embed { width: 100%; height: 800px; }
.page-archive .wp-block-file a {
  font-family: var(--corps); font-size: 11.52px; line-height: 20px;
  color: var(--blanc); text-decoration: none;
}
.page-archive .wp-block-file__button {
  display: inline-block; background: rgb(50, 55, 60); color: var(--blanc);
  padding: 10px 20px; margin-left: 10px;
}

/* --- Tablette et large tablette (667 → 1024) ----------------------------- */
/* Pas de marge blanche au-dessus de la bande, conteneurs pleine largeur, et
   la liste latérale passe sur DEUX colonnes : les trois billets s'y répartissent
   en 2 + 1, ce qui explique la hauteur de 250px @1024 et 292px @768. */
@media (min-width: 667px) and (max-width: 1024px) {
  .page-archive .archive-bande { margin-top: 0; }
  .page-archive .archive-bande-inner {
    width: calc(100% - 20px);
  }
  /* Relevé : colonne gauche 256 puis droite 665 à x=356 dans 1024 — soit 25 %
     de large, 100px de gouttière et le reste pour l'article ; à 768 : 192 puis
     473 à x=292, même loi (25 % + 100px). */
  .page-archive .archive-grille {
    width: 100%;
    grid-template-columns: 25% calc(74.666% - 100px);
    column-gap: 100px;
    /* Pourcentage réel source : 74.666%, pas un talon arrondi de 3/4px. */
    padding-right: 0;
  }
  .page-archive .liste-publications { grid-template-columns: 113px 113px; }
  .page-archive .archive-illustration img { width: 346px; height: 400px; }
}
@media (min-width: 667px) and (max-width: 800px) {
  .page-archive .liste-publications { grid-template-columns: 81px 81px; }
  .page-archive .archive-illustration img { width: 282px; height: 326px; }
}

/* --- Mobile (< 667) ------------------------------------------------------ */
/* Les colonnes s'empilent : liste puis illustration, puis l'article, qui prend
   une gouttière de 100px à gauche et 0 à droite sur l'original (relevé :
   colonne de droite à x=100 pour 290px de large dans 390). */
@media (max-width: 666px) {
  .page-archive .archive-bande { margin-top: 20px; }
  .page-archive .archive-grille {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  .page-archive .liste-publications { grid-template-columns: 1fr; }
  /* 15px de talon sous la colonne de gauche avant l'article empilé : relevé
     sur l'original, la colonne de gauche s'arrête à 1748 et l'article démarre
     à 1766 (méta), soit 15px de plus que la seule marge basse de la citation. */
  .page-archive .archive-colonne-article { padding: 15px 0 0 100px; min-width: min-content; }
  /* Alice : le widget source conserve 100vw malgré sa marge gauche de 100px. */
  .page-alice .archive-colonne-article { width: calc(100% + 100px); }
  /* Formation: source column's white top border is inside its 100px inset. */
  .page-formations .archive-colonne-article { padding-top: 18px; position: relative; }
  .page-formations .archive-colonne-article::before {
    content: ""; position: absolute; left: 100px; right: 0; top: 0;
    border-top: 3px solid white;
  }
  .page-archive .archive-illustration { margin: 150px -45px 100px; }
  .page-archive .archive-illustration img { width: 480px; height: 555px; }
}

/* En-tête des pages « archive + article ». L'original y sert le même bandeau
   GRIS CLAIR rgb(227,223,223) que sur /contact/ et /, avec les liens en blanc
   et celui de la rubrique courante en teal. Notre `.site-header--solid`
   servait un bandeau teal uni. Même correction que .page-contact, portée
   séparément pour que chaque lot reste isolable. */
.page-archive .site-header--solid:not(.site-header--scrolled) {
  background: var(--gris-clair);
}
.page-archive .site-header .site-nav a[aria-current="page"],
.page-archive .site-header--scrolled .site-nav a[aria-current="page"] {
  color: var(--teal);
}

/* Citation manuscrite de la colonne de gauche. Présente UNIQUEMENT sur /blog/
   sur l'original (absente des pages d'article et de /category/formations/) :
   l'extrait du dernier billet, en « Oooh Baby » 35.2px/40px violet, aligné à
   droite, 275px de large et 440px de haut @1440. */
.page-archive .archive-citation {
  font-family: "Oooh Baby", cursive;
  font-size: 35.2px; line-height: 40px; font-weight: 400; font-style: normal;
  color: rgb(182, 155, 248); text-align: right; margin: 0;
}

/* --- Navigation entre publications --------------------------------------- */
/* Relevé sur l'original @1440 : bloc de 721×60 sous le contenu, deux moitiés
   de 360px encadrant un filet vertical de 1px. Chaque lien tient sur deux
   lignes de 30px (libellé en capitales violet, puis titre violet) précédées
   ou suivies d'une flèche Space Mono 45px violette dans une boîte de 23px. */
/* Deux moitiés ÉGALES (360px pour 721 de large @1440) : les exprimer en
   fractions, et non en pixels, évite de déborder du viewport aux largeurs
   étroites — un `360px` figé sortait de 186px à 390. */
.page-archive .article-nav {
  display: grid; grid-template-columns: 1fr 1px 1fr;
  height: 60px; margin-top: 20px;
}
.page-archive .article-nav a {
  display: flex; align-items: flex-start; text-decoration: none; height: 60px;
}
.page-archive .article-nav-next a { justify-content: flex-end; }
.page-archive .article-nav-fleche {
  font-family: var(--titre); font-size: 45px; line-height: 30px;
  font-weight: 700; font-style: italic; color: rgb(182, 155, 248);
  width: 23px; flex: 0 0 23px; text-align: center;
  /* La flèche descend de 8px par rapport au haut du bloc sur l'original. */
  margin-top: 8px;
}
.page-archive .article-nav-prev .article-nav-textes { margin-left: 30px; }
.page-archive .article-nav-next .article-nav-textes { margin-right: 30px; text-align: right; }
.page-archive .article-nav-textes { display: block; }
.page-archive .article-nav-textes { min-width: 0; }
.page-archive .article-nav-label,
.page-archive .article-nav-titre {
  display: block; overflow-wrap: anywhere;
  font-family: var(--corps); font-size: 14.4px; line-height: 30px;
  font-weight: 400; font-style: italic; color: rgb(182, 155, 248);
}
.page-archive .article-nav-label { text-transform: uppercase; }
.page-archive .article-nav-filet { background: var(--teal); width: 1px; height: 60px; }

/* En-tête naturel : fonds relus sur chaque gabarit, marque à x42. */
body:not(.page-qui-suis-je) .site-header:not(.site-header--scrolled) { background: var(--gris-clair); }
.nav-burger { border: 0; background: transparent; border-radius: 0; }
@media (max-width: 900px) {
  .site-header .header-inner { width: 100%; flex-wrap: nowrap; gap: 0; }
  .site-header .brand { margin-left: 42px; }
  .site-header .nav-burger { width: 60px; height: 60px; padding: 10px; margin-right: 10px; flex-shrink: 0; }
  .site-header .nav-burger span { background: var(--teal); width: 30px; margin: 6px auto; }
  .site-header .site-nav { position: absolute; left: 0; top: calc(var(--header-h) - 10px); width: 100%; background: white; }
  .site-header .site-nav ul { padding: 0; gap: 0; }
  .site-header .site-nav li { width: 100%; }
  .site-header .site-nav a { color: var(--teal); padding: 13px 20px; }
  .site-header .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .site-header .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .site-header .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* Politique : contenu source verbatim et gabarit Hello Elementor mesuré. */
.page-confidentialite .site-header + main { transform: none; margin-bottom: 0; }
.page-confidentialite .privacy-document {
  max-width: 1140px; margin-inline: auto;
  font: italic 700 16px/30px var(--titre); color: var(--teal);
}
.page-confidentialite .page-header { padding: 0; margin: 0; background: transparent; }
.page-confidentialite h1 {
  font: normal 400 62.4px/68.64px var(--titre);
  margin: 8px 0 16px; padding: 0; max-width: none; letter-spacing: normal;
}
.page-confidentialite .privacy-document h2 {
  font: italic 500 24px/28.8px var(--titre);
  margin: 8px 0 16px; max-width: none;
}
.page-confidentialite .privacy-document p { margin: 0 0 14px; font: inherit; }
@media (min-width: 768px) and (max-width: 991px) {
  .page-confidentialite .privacy-document { max-width: 600px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .page-confidentialite .privacy-document { max-width: 800px; }
}
@media (max-width: 767px) {
  .page-confidentialite .privacy-document { padding: 0 10px; }
  .page-confidentialite h1 { padding: 0 10px; }
}

/* ---------------- Mobile : lecture sans chevauchement ----------------
   La parité historique reproduisait aussi plusieurs débordements du thème
   WordPress. Sur téléphone, la priorité est désormais la lecture : chaque
   illustration reste dans son bloc, les colonnes sont réellement empilées et
   aucun contenu utile ne sort du viewport. Le desktop reste inchangé. */
@media (max-width: 666px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
  }

  /* En-tête lisible et dans le flux, plutôt que superposé au premier écran. */
  .site-header,
  .page-qui-suis-je .site-header,
  body:not(.page-qui-suis-je) .site-header:not(.site-header--scrolled) {
    position: relative;
    top: auto;
    background: var(--blanc);
  }
  .site-header .header-inner,
  .page-qui-suis-je .site-header .header-inner {
    width: 100%;
    padding-inline: 20px;
  }
  .site-header .brand,
  .page-qui-suis-je .site-header .brand {
    margin-left: 0;
  }
  .site-header .brand-name,
  .page-qui-suis-je .site-header .brand-name {
    color: var(--teal);
  }
  .site-header .nav-burger,
  .page-qui-suis-je .site-header .nav-burger {
    margin-right: 0;
  }
  .site-header .nav-burger span,
  .page-qui-suis-je .site-header .nav-burger span {
    background: var(--teal);
  }
  .site-header .site-nav,
  .page-qui-suis-je .site-header .site-nav {
    background: var(--blanc);
  }
  .site-header .site-nav a,
  .page-qui-suis-je .site-header .site-nav a,
  .page-qui-suis-je .site-header .site-nav a:hover {
    color: var(--gris-nav);
  }
  .site-header + main,
  .page-confidentialite .site-header + main {
    transform: none;
    margin-bottom: 0;
  }

  /* Accueil : le portrait décoratif précède le texte au lieu de passer dessous. */
  .hero {
    height: auto;
    min-height: 0;
    margin-top: 0;
    padding: 35px 0 65px;
    overflow: clip;
  }
  .hero-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .hero-illustration {
    order: 0;
    align-self: center;
    width: min(300px, 78vw);
    margin: 0 auto 32px;
  }
  .hero-illustration img {
    width: 100%;
    max-width: 100%;
  }
  .hero-text {
    order: 1;
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding-inline: 20px;
  }
  .hero h1,
  .hero .hero-titre,
  .hero .hero-intro {
    width: 100%;
    max-width: none;
  }
  .hero .hero-titre {
    margin-bottom: 38px;
    font-size: clamp(44px, 13vw, 56px);
    line-height: 1.05;
  }
  .hero .hero-intro {
    margin: 0;
    font-size: clamp(18px, 5.2vw, 22px);
    line-height: 1.4;
  }
  .hero .btn-row {
    display: grid;
    gap: 22px;
    margin-top: 38px;
    padding-left: 0;
  }
  .hero .btn-row > div { width: 100%; }

  /* Les pastilles gardent leur propre colonne et ne masquent plus les libellés. */
  #accompagnement .btn,
  .page-qui-suis-je .qui-actions .btn {
    padding-left: 30px;
  }
  .accordion {
    margin-inline: 20px;
  }
  .accordion summary {
    min-width: 0;
    padding-inline: 10px;
    gap: 18px;
    font-size: clamp(28px, 9vw, 36px);
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .accordion summary::after { left: 24px; }
  .accordion details[open] summary::after { left: 19px; }
  .accordion .accordion-body {
    padding: 18px 10px 24px;
  }
  #approche .approche-visuel h2 {
    color: var(--teal-dark);
  }
  #temoignages h2.temoignages-titre {
    color: var(--teal-dark);
  }

  /* Qui suis-je : illustration contenue et gouttières constantes. */
  .page-qui-suis-je .qui-intro {
    margin-top: 0;
    margin-bottom: 65px;
  }
  .page-qui-suis-je .qui-face {
    width: min(100%, 340px);
    margin: 45px auto 0;
    padding-inline: 20px;
  }
  .page-qui-suis-je .qui-face img {
    width: 100%;
    max-width: 100%;
  }
  .page-qui-suis-je .qui-biographie {
    margin-top: 35px;
    padding-inline: 20px;
  }
  .page-qui-suis-je .qui-biographie h1 {
    font-size: clamp(38px, 11vw, 44px);
    line-height: 1.05;
    white-space: nowrap;
  }
  .page-qui-suis-je .qui-biographie .qui-chapeau {
    margin-top: 45px;
  }
  .page-qui-suis-je .qui-cursus {
    padding-inline: 20px;
  }
  .page-qui-suis-je .qui-cursus h2 {
    font-size: clamp(28px, 9vw, 34px);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .page-qui-suis-je .qui-accompagnement-inner {
    padding-inline: 20px;
  }

  /* Méthodes : véritable pile verticale et corps d'accordéon pleine largeur. */
  .page-methodes .methodes-intro {
    padding: 40px 0 20px;
    overflow: clip;
  }
  .page-methodes .methodes-mains {
    width: min(280px, 78vw);
    margin: 0 auto 32px;
  }
  .page-methodes .methodes-mains img {
    width: 100%;
    max-width: 100%;
  }
  .page-methodes .methodes-contenu {
    width: 100%;
    padding-inline: 20px;
  }
  .page-methodes .methodes-contenu h1 {
    width: 100%;
    font-size: clamp(42px, 13vw, 54px);
    line-height: 1.08;
  }
  .page-methodes .methodes-cabinet,
  .page-methodes .methodes-cabinet img {
    width: 100%;
    max-width: 100%;
  }
  .page-methodes .methodes-details {
    padding: 45px 0 70px;
  }
  .page-methodes .methodes-accordeon {
    width: calc(100% - 40px);
    margin-inline: 20px;
  }
  .page-methodes .methodes-title {
    font-size: clamp(27px, 8.5vw, 34px);
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .page-methodes .methodes-icon {
    width: 1.2em;
    margin-right: 16px;
  }
  .page-methodes .methodes-icon-glyph {
    font-size: 32px;
    line-height: 32px;
    margin: 6px 0;
  }
  .page-methodes .methodes-accordeon .accordion-body,
  .page-methodes .methodes-accordeon details:first-child .accordion-body {
    padding: 18px 0 24px;
  }

  /* Archives et articles : suppression des largeurs volontairement débordantes
     du thème source, avec une gouttière de lecture de 20px. */
  .page-archive .archive-corps {
    padding-bottom: 85px;
    overflow: clip;
  }
  .page-archive .archive-grille {
    width: 100%;
    padding-inline: 20px;
    grid-template-columns: minmax(0, 1fr);
  }
  .page-archive .liste-publications {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }
  .page-archive .archive-illustration {
    width: 100%;
    margin: 65px 0;
    overflow: clip;
  }
  .page-archive .archive-illustration img {
    width: min(100%, 360px);
    height: auto;
    max-width: 100%;
    margin-inline: auto;
  }
  .page-archive .archive-citation {
    width: 100%;
    font-size: 30px;
    line-height: 1.25;
    text-align: left;
  }
  .page-archive .archive-colonne-article,
  .page-archive.page-alice .archive-colonne-article {
    width: 100%;
    min-width: 0;
    padding: 35px 0 0;
  }
  .page-archive .article-meta {
    gap: 12px 18px;
    margin: 0 0 28px;
  }
  .page-archive .article-meta li {
    margin: 0;
  }
  .page-archive .article-meta-date a {
    color: var(--teal-dark);
  }
  .page-archive .article-titre,
  .page-archive.page-archive-index .article-titre {
    font-size: clamp(32px, 10vw, 44px);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .page-archive .article-contenu,
  .page-archive .article-contenu p,
  .page-archive .article-contenu li,
  .page-archive .article-contenu a {
    overflow-wrap: anywhere;
  }
  .page-archive .article-nav-prev .article-nav-textes { margin-left: 8px; }
  .page-archive .article-nav-next .article-nav-textes { margin-right: 8px; }

  /* Pages utilitaires et mentions longues. */
  .page-confidentialite .privacy-document,
  .page.wrap.prose {
    width: 100%;
    max-width: 100%;
    padding-inline: 20px;
  }
  .page-confidentialite h1 {
    width: 100%;
    max-width: 100%;
    padding: 0;
    font-size: clamp(29px, 9vw, 38px);
    line-height: 1.12;
    overflow-wrap: normal;
    hyphens: none;
  }
  .page-confidentialite .page-content,
  .page-confidentialite .page-content p,
  .page-confidentialite .page-content a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .page.wrap.prose h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(34px, 11vw, 48px);
    line-height: 1.12;
    overflow-wrap: anywhere;
  }
  .page.wrap.prose object {
    width: 100%;
    max-width: 100%;
  }

  /* Contact : formulaire en colonne et informations séparées du décor. */
  .page-contact .contact-bande {
    margin-top: 0;
  }
  .page-contact .contact-col-gauche {
    padding: 60px 20px 55px;
  }
  .page-contact .contact-intro {
    padding: 0 0 30px;
  }
  .page-contact .contact-intro h1 {
    font-size: clamp(42px, 13vw, 54px);
    line-height: 1.08;
  }
  .page-contact .contact-form-zone {
    width: 100%;
    padding: 0;
  }
  .page-contact .contact-champs {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }
  .page-contact .contact-col-droite {
    padding: 48px 20px max(72px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, .45);
    background-image: none;
  }
  .page-contact .contact-fb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-bottom: 0;
  }
  .page-contact .contact-fb-texte {
    width: 100%;
    max-width: 320px;
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    text-align: center;
  }
  .page-contact .contact-fb-pastille {
    margin: 0;
  }
  .page-contact .contact-adresse {
    width: 100%;
    max-width: 335px;
    margin: 42px auto 0;
    padding: 24px 20px;
    border-radius: 12px;
    background: var(--blanc);
    box-shadow: 0 8px 24px rgba(0, 95, 95, .12);
    text-align: center;
  }
  .page-contact .contact-adresse p {
    margin: 0 0 12px;
    font-size: 14.4px;
    line-height: 1.5;
  }
  .page-contact .contact-adresse p:last-child {
    margin-bottom: 0;
  }

  /* Pied de page : pas de texte gris pâle ni de hauteur qui coupe le contenu. */
  .site-footer {
    height: auto;
    min-height: 0;
    padding-bottom: 40px;
    overflow: visible;
  }
  .site-footer nav.footer-col a {
    color: var(--gris-nav);
  }
  .site-footer .footer-fb,
  .site-footer .footer-adresse a {
    color: var(--teal-dark);
    border-color: var(--teal-dark);
  }
}