/* ==========================================================================
   Mathilda Tissandié — Psychomotricienne D.E
   Direction artistique : technique & bienveillante, coloré mais apaisé,
   formes en bulles, jamais enfantin. Public : bébés → adultes (dont TSA/DYS).
   Stack cible : WordPress + Hello Elementor (enfant) + Perfactive + o2switch
   ========================================================================== */

/* -----------------------------
   0. FONTS — SELF-HOSTED (RGPD/CNIL : aucune requête vers Google)
   Manrope (fichier variable, poids 400–800) + Marcellus (400).
   Subsets latin + latin-ext (couvre les accents FR, dont « œ »).
   Fichiers : theme/assets/fonts/ — chemins relatifs à ce CSS (OK WP + preview).
   ----------------------------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/marcellus-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/marcellus-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -----------------------------
   1. VARIABLES & RESET
   ----------------------------- */
:root {
  /* Couleurs — vert d'eau dominant, rose secondaire, orange = CTA, pomme = accent */
  --eau: #9BC9BF;
  --eau-profond: #457469;      /* texte accent — AA sur blanc (5,3:1) et sur --eau-clair (4,5:1). Ancienne valeur #5E9C90 = 3,17:1, échouait AA. */
  --eau-clair: #E3F0ED;        /* fonds de sections doux */
  --rose: #F4D9D6;
  --rose-clair: #FBEDEB;
  --rose-profond: #C97F78;     /* pour texte accent rose lisible */
  --pomme: #A3C948;
  --pomme-profond: #6F9427;    /* pour texte accent lisible */
  --orange: #E07B43;           /* CTA uniquement */
  --orange-profond: #C4622E;

  --encre: #1E2A28;            /* texte principal — noir doux */
  --encre-doux: rgba(30, 42, 40, 0.66);
  --encre-tres-doux: rgba(30, 42, 40, 0.5);
  --blanc: #FFFFFF;
  --blanc-casse: #FDFCFA;      /* fond de page */
  --sable: #F6F3EE;            /* fond de section alterné */
  --trait: #E7E2DA;            /* bordures discrètes */

  /* Typographie */
  --font-titre: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-texte: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-accent: 'Marcellus', 'Georgia', serif;  /* accent élégant (kicker / signature) */

  /* Rayons — généreux et arrondis (esprit bulle) */
  --radius-s: 16px;
  --radius-m: 26px;
  --radius-l: 40px;

  --shadow-soft: 0 18px 50px -30px rgba(30, 42, 40, 0.30);
  --shadow-eau: 0 20px 55px -28px rgba(94, 156, 144, 0.45);

  --header-height: 108px;
  --transition-base: 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Décale les ancres sous le header fixe */
  scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
  margin: 0;
  font-family: var(--font-texte);
  font-size: 17px;
  line-height: 1.7;
  color: var(--encre);
  background: var(--blanc-casse);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* clip (et non hidden) : empêche le débordement horizontal des décors en
     bulles SANS faire du <body> un conteneur de scroll — sinon html cesse de
     défiler et scroll-padding-top (offset des ancres) devient inopérant. */
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

::selection {
  background: var(--eau);
  color: var(--encre);
}

:focus-visible {
  outline: 3px solid var(--eau-profond);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Accessibilité : lien d'évitement */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--encre);
  color: var(--blanc);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-s) 0;
}
.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;
}

/* -----------------------------
   2. TYPOGRAPHIE
   ----------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 700;
  margin: 0 0 0.6em;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--encre);
}

.title-xl {
  font-size: clamp(38px, 6vw, 60px);
  font-weight: 800;
  line-height: 1.05;
}

.title-lg {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 800;
}

.title-md {
  font-size: clamp(23px, 2.4vw, 30px);
  font-weight: 700;
}

p {
  margin: 0 0 1.2em;
}

.lead {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.7;
  color: var(--encre-doux);
  max-width: 58ch;
}

/* Kicker en accent (Marcellus, var --font-accent) — usage ponctuel uniquement */
.eyebrow {
  font-family: var(--font-accent);
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--eau-profond);
  margin: 0 0 6px;
  display: block;
}

/* Kicker technique alternatif (majuscules discrètes) */
.eyebrow-tech {
  font-family: var(--font-texte);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eau-profond);
  margin: 0 0 16px;
  display: block;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--eau-profond);
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 3px;
  transition: gap var(--transition-base), color var(--transition-base);
}
.text-link::after {
  content: "→";
  transition: transform var(--transition-base);
}
.text-link:hover {
  gap: 13px;
  color: var(--orange);
}

/* -----------------------------
   3. LAYOUT — CONTAINERS & SECTIONS
   ----------------------------- */
.container {
  width: min(1160px, 100% - 48px);
  margin-inline: auto;
  position: relative;   /* au-dessus des bulles décoratives */
  z-index: 1;
}

.container-narrow {
  width: min(820px, 100% - 48px);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.section {
  padding: clamp(64px, 9vw, 128px) 0;
  position: relative;
}

.section-blanc { background: var(--blanc-casse); }
.section-sable { background: var(--sable); }
.section-eau   { background: var(--eau-clair); }
.section-rose  { background: var(--rose-clair); }

.section-head {
  max-width: 640px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.section-head.is-center {
  margin-inline: auto;
  text-align: center;
}

/* -----------------------------
   4. BUTTONS
   ----------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  font-family: var(--font-texte);
  font-weight: 700;
  font-size: 15px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: transform var(--transition-base), background var(--transition-base),
              color var(--transition-base), border-color var(--transition-base),
              box-shadow var(--transition-base);
}
.btn:hover {
  transform: translateY(-2px);
}

/* CTA principal — orange, réservé à la prise de RDV */
.btn-primary {
  background: var(--orange);
  color: var(--blanc);
  border-color: var(--orange);
}
.btn-primary:hover {
  background: var(--orange-profond);
  border-color: var(--orange-profond);
  box-shadow: 0 16px 40px -18px rgba(196, 98, 46, 0.6);
}

/* Bouton secondaire — vert d'eau doux */
.btn-soft {
  background: var(--eau);
  color: var(--encre);
  border-color: var(--eau);
}
.btn-soft:hover {
  background: var(--eau-profond);
  color: var(--blanc);
  border-color: var(--eau-profond);
}

/* Bouton contour discret */
.btn-outline {
  background: transparent;
  color: var(--eau-profond);
  border-color: var(--eau);
}
.btn-outline:hover {
  background: var(--eau-clair);
  border-color: var(--eau-profond);
}

/* -----------------------------
   5. HEADER & NAV (barre fixe)
   ----------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: rgba(222, 238, 234, 0.9);   /* léger voile vert d'eau pour se détacher de la page */
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(94, 156, 144, 0.18);
  transition: border-color var(--transition-base), box-shadow var(--transition-base),
              background var(--transition-base);
}
.site-header.is-scrolled {
  background: rgba(215, 233, 228, 0.95);
  border-bottom-color: rgba(94, 156, 144, 0.3);
  box-shadow: 0 8px 30px -22px rgba(30, 42, 40, 0.5);
}

.nav-shell {
  width: min(1240px, 100% - 48px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Marque du header : logo image (.brand img). Les styles .brand-name /
   .brand-role ci-dessous sont un fallback texte legacy (non utilisé actuellement). */
.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand .brand-name {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--encre);
}
.brand .brand-role {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--eau-profond);
}
.brand img { height: 108px; width: auto; display: block; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.main-nav a.nav-link {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  color: var(--encre-doux);
  padding: 8px 14px;
  border-radius: 999px;
  transition: color var(--transition-base), background var(--transition-base);
}
.main-nav a.nav-link:hover,
.main-nav a.nav-link.is-active {
  color: var(--eau-profond);
  background: var(--eau-clair);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-cta {
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--blanc) !important;
  font-weight: 700;
  font-size: 15px;
  transition: background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.nav-cta:hover {
  background: var(--orange-profond);
  box-shadow: 0 14px 34px -16px rgba(196, 98, 46, 0.6);
  transform: translateY(-2px);
}

/* CTA « Prendre rendez-vous » du menu déroulant — masqué en desktop
   (le CTA vit dans le header), affiché sur mobile via responsive.css. */
.nav-cta-mobile { display: none; }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--encre);
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Décalage du contenu sous le header fixe */
main { padding-top: var(--header-height); }

/* -----------------------------
   6. FORMES BULLES (décor réutilisable)
   ----------------------------- */
.bubble {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}
.bubble-eau  { background: var(--eau-clair); }
.bubble-rose { background: var(--rose-clair); }

/* Pastille / puce en bulle (numéros d'étape, tags) */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  background: var(--eau-clair);
  color: var(--eau-profond);
}

/* Photo ronde (portrait « Qui suis-je ») */
.portrait-round {
  width: clamp(220px, 30vw, 320px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-eau);
}

/* Illustrations « style dessin » — médaillon rond (les images sont des ronds
   sur fond blanc → on clippe au cercle, les coins blancs disparaissent). */
.illu-frame {
  display: block;
  position: relative;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}
.illu-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);   /* mange le fin liseré blanc au bord du cercle */
  display: block;
}
/* État placeholder (tant que l'image n'est pas fournie) */
.illu-frame.is-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 20px;
  border: 1px dashed var(--eau);
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(155, 201, 191, 0.25), transparent 60%),
    var(--eau-clair);
  color: var(--eau-profond);
}
.illu-frame.is-empty .illu-ico { font-size: 30px; opacity: 0.75; }
.illu-frame.is-empty .illu-label { font-size: 12px; font-weight: 600; color: var(--encre-doux); }

/* Variante « carte » : médaillon plus petit, centré en tête de carte */
.illu-card {
  max-width: 190px;
  margin-bottom: 14px;
}

/* -----------------------------
   7. PLACEHOLDERS (images à venir)
   ----------------------------- */
.img-placeholder {
  width: 100%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  border: 1.5px dashed var(--eau);
  border-radius: var(--radius-m);
  background:
    radial-gradient(120% 90% at 30% 25%, rgba(155, 201, 191, 0.20), transparent 60%),
    var(--eau-clair);
  color: var(--eau-profond);
}
.img-placeholder.is-round { border-radius: 50%; aspect-ratio: 1/1; min-height: 0; }
.img-placeholder .ph-icon { font-size: 30px; opacity: 0.7; }
.img-placeholder .ph-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--encre-doux);
}

/* -----------------------------
   8. FOOTER
   ----------------------------- */
.site-footer {
  background: var(--eau-clair);
  color: var(--encre);
  padding: clamp(48px, 6vw, 80px) 0 32px;
}
.footer-inner {
  width: min(1160px, 100% - 48px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
}
.footer-logo { width: clamp(190px, 22vw, 250px); height: auto; display: block; }
.footer-brand .brand-name { font-size: 22px; }
.footer-brand p {
  color: var(--encre-doux);
  font-size: 15px;
  max-width: 38ch;
  margin-top: 12px;
}
.footer-col h3 {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eau-profond);
  margin-bottom: 16px;
}
.footer-col a,
.footer-col span {
  display: block;
  font-size: 15px;
  color: var(--encre-doux);
  margin-bottom: 10px;
  transition: color var(--transition-base);
}
.footer-col a:hover { color: var(--orange); }

.footer-bottom {
  width: min(1160px, 100% - 48px);
  margin: clamp(32px, 4vw, 48px) auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(94, 156, 144, 0.25);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--encre-tres-doux);
}

/* -----------------------------
   9. COOKIE BANNER (RGPD)
   ----------------------------- */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 120;
  width: min(560px, calc(100% - 32px));
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; font-size: 14px; color: var(--encre-doux); flex: 1 1 240px; }
.cookie-banner a { color: var(--eau-profond); text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; }
.cookie-refuse {
  padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 14px;
  border: 1.5px solid var(--trait); color: var(--encre-doux);
}
.cookie-accept {
  padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 14px;
  background: var(--eau-profond); color: var(--blanc);
}

/* -----------------------------
   10. REVEAL (animations douces — coupées si reduced-motion)
   ----------------------------- */
.reveal {
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* On ne masque .reveal QUE si le JS est confirmé (classe .js posée par un
   script inline en <head>). Sans JS — ou si main.js échoue à charger — le
   contenu reste visible. Progressive enhancement. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   PAGE ACCUEIL
   ========================================================================== */

/* ---- Hero ---- */
.hero-accueil {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 120px);
}
.hero-accueil-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero-accueil-copy {
  max-width: 640px;
  order: 1;               /* texte à gauche, illustration à droite */
}
.hero-accueil-illu { order: 2; }
.hero-accueil .title-xl {
  margin: 0 0 20px;
}
.hero-accueil .lead {
  margin-bottom: 14px;
}
.hero-accueil-sub {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--encre-doux);
  max-width: 60ch;
  margin-bottom: 32px;
}
.hero-accueil-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ---- Duo Pour qui / Pourquoi ---- */
.duo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
}
.soft-card {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--radius-l);
  padding: clamp(28px, 3vw, 40px);
  box-shadow: var(--shadow-soft);
}
.soft-card .pill {
  margin-bottom: 16px;
}
.soft-card p {
  margin: 0;
  color: var(--encre-doux);
}

/* ---- Bande des étapes du bilan ---- */
.step-band {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
.step-card {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--radius-m);
  padding: 32px 26px 26px;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.step-card:hover {
  transform: translateY(-4px);
  border-color: var(--eau);
  box-shadow: var(--shadow-soft);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 19px;
  margin-bottom: 16px;
}
/* Une couleur par étape */
.step-card:nth-child(1) .step-num { background: var(--eau-clair);            color: var(--eau-profond); }
.step-card:nth-child(2) .step-num { background: var(--rose-clair);           color: var(--rose-profond); }
.step-card:nth-child(3) .step-num { background: rgba(163, 201, 72, 0.22);    color: var(--pomme-profond); }
.step-card:nth-child(4) .step-num { background: rgba(224, 123, 67, 0.16);    color: var(--orange-profond); }
.step-title {
  font-size: 19px;
  margin: 0 0 8px;
}
.step-card p {
  margin: 0;
  font-size: 15px;
  color: var(--encre-doux);
}

/* ---- Aperçu consultations ---- */
.consult-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 30px);
}
.consult-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--radius-m);
  padding: clamp(26px, 2.6vw, 36px);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.consult-card:hover {
  transform: translateY(-5px);
  border-color: var(--eau);
  box-shadow: var(--shadow-eau);
}
.consult-card h3 { margin: 0; }
.consult-card p {
  margin: 0;
  font-size: 15px;
  color: var(--encre-doux);
  flex: 1;
}
.consult-card .text-link {
  margin-top: 4px;
}

/* ---- Bande CTA finale ---- */
.cta-band {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr auto;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(36px, 5vw, 64px);
  border-radius: var(--radius-l);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(155, 201, 191, 0.35), transparent 60%),
    var(--eau-clair);
  border: 1px solid var(--eau);
}
.cta-band-copy { position: relative; z-index: 1; }
.cta-band-copy h2 { margin-bottom: 10px; }
.cta-band-copy .lead { margin: 0; }
.cta-band-action {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 220px;
}
.cta-band-action .btn { justify-content: center; }

/* ==========================================================================
   PAGE QUI SUIS-JE
   ========================================================================== */

/* ---- Intro + portrait ---- */
.qsj-intro {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.qsj-portrait {
  display: flex;
  justify-content: center;
}
.qsj-intro-copy .title-lg { margin-bottom: 4px; }
.qsj-role {
  font-family: var(--font-accent);
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--eau-profond);
  margin: 0 0 18px;
}

/* ---- Listes à tirets ---- */
.tiret-list,
.tiret-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tiret-list > li {
  position: relative;
  padding: 18px 20px 18px 52px;
  margin-bottom: 14px;
  font-size: 17px;
  line-height: 1.55;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--eau);
  border-radius: var(--radius-m);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.tiret-list > li:hover {
  transform: translateX(4px);
  border-left-color: var(--eau-profond);
  box-shadow: var(--shadow-soft);
}
/* Pastille ronde avec check à la place du simple tiret */
.tiret-list > li::before {
  content: "✦";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--eau-clair);
  color: var(--eau-profond);
  font-size: 12px;
}
.tiret-sublist {
  margin-top: 14px;
}
.tiret-sublist > li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-size: 16px;
  color: var(--encre-doux);
}
.tiret-sublist > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pomme);
}

/* ---- Formations ---- */
.formation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
.formation-card {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--eau);
  border-radius: var(--radius-m);
  padding: clamp(24px, 2.6vw, 32px);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.formation-card:hover {
  transform: translateY(-4px);
  border-left-color: var(--eau-profond);
  box-shadow: var(--shadow-soft);
}
.formation-title {
  font-size: 18px;
  color: var(--eau-profond);
  margin: 0 0 8px;
}
.formation-card p {
  margin: 0;
  font-size: 15px;
  color: var(--encre-doux);
}
/* Diplôme principal — mis en avant, pleine largeur */
.formation-card.is-featured {
  grid-column: 1 / -1;
  background:
    radial-gradient(90% 130% at 0% 0%, rgba(155, 201, 191, 0.25), transparent 60%),
    var(--eau-clair);
  border-color: var(--eau);
  border-left-width: 5px;
}
.formation-card.is-featured .formation-title { font-size: 21px; }
.formation-card.is-featured p { color: var(--encre); }
/* Badge « à venir » */
.formation-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(224, 123, 67, 0.14);
  color: var(--orange-profond);
  font-family: var(--font-texte);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ==========================================================================
   PAGE CONSULTATIONS
   ========================================================================== */

/* ---- Intro resserrée ---- */
.consult-intro { padding-bottom: clamp(32px, 4vw, 56px); }

/* ---- Nav ancres sticky ---- */
.consult-nav {
  position: sticky;
  top: var(--header-height);
  z-index: 40;
  background: rgba(253, 252, 250, 0.9);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}
.consult-nav-inner {
  width: min(1160px, 100% - 48px);
  margin-inline: auto;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.consult-nav-inner::-webkit-scrollbar { display: none; }
.consult-nav a {
  flex: 0 0 auto;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--encre-doux);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
}
/* Une couleur par onglet (les 3 accents de la charte) */
.consult-nav a:nth-child(1) { color: var(--pomme-profond); }  /* Bilan psychomoteur (= pomme, comme les pills RDV) */
.consult-nav a:nth-child(2) { color: var(--eau-profond); }    /* Séances individuelles (= eau, comme sa section) */
.consult-nav a:nth-child(3) { color: var(--rose-profond); }   /* Séances en binôme */
.consult-nav a:hover,
.consult-nav a.is-active {
  border-bottom-color: currentColor;   /* soulignement dans la couleur de l'onglet */
}

/* ---- Bilan : mise en avant + 2 RDV ---- */
.consult-highlight {
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 600;
  color: var(--eau-profond);
  margin: 8px 0 12px;
}
.consult-aside {
  font-size: 14px;
  font-style: italic;
  color: var(--encre-doux);
  margin: 0 0 24px;
}
/* Sections consultations : conteneur au-dessus du décor bulles */
.page-consultations .section > .container-narrow { position: relative; z-index: 1; }

/* Bande de motif (symboles psychomot) dans la marge latérale des sections consult */
.consult-print {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(240px, 34vw, 520px);
  z-index: 0;
  pointer-events: none;
  background-image: url(../assets/images/motif-vert.svg);
  background-repeat: repeat;
  background-size: 240px 240px;
  opacity: 0.65;
}
.consult-print.is-rose { background-image: url(../assets/images/motif-rose.svg); }
.consult-print-right {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, #000 25%, transparent 92%);
          mask-image: linear-gradient(to left, #000 25%, transparent 92%);
}
.consult-print-left {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, #000 25%, transparent 92%);
          mask-image: linear-gradient(to right, #000 25%, transparent 92%);
}
/* Masquée quand la marge devient trop étroite (évite le chevauchement du texte) */
@media (max-width: 1180px) {
  .consult-print { display: none; }
}
.rdv-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  margin-bottom: 28px;
}
.rdv-card {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--radius-m);
  padding: clamp(24px, 2.6vw, 32px);
}
.rdv-card .pill { margin-bottom: 14px; background: rgba(163, 201, 72, 0.20); color: var(--pomme-profond); }
.rdv-card p { margin: 0; font-size: 15px; color: var(--encre-doux); }

.consult-note {
  font-size: 15px;
  color: var(--encre-doux);
  border-left: 3px solid var(--pomme);
  padding-left: 18px;
  margin: 0 0 28px;
}

.consult-cta { margin-top: 8px; }

/* ---- Chips (domaines travaillés) ---- */
.chip-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip-list li {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--blanc);
  border: 1px solid rgba(94, 156, 144, 0.35);
  font-size: 14px;
  font-weight: 600;
  color: var(--eau-profond);
}

/* ---- Callout modalités ---- */
.info-callout {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(244, 217, 214, 0.55), transparent 60%),
    var(--sable);
  border: 1px solid var(--trait);
  border-radius: var(--radius-l);
  padding: clamp(28px, 3.5vw, 48px);
}
.info-callout h2 { margin-bottom: 10px; }
.info-callout p { color: var(--encre-doux); max-width: 62ch; }
.info-callout .text-link { margin-top: 4px; }
.info-callout .pill { margin-bottom: 14px; }

/* ==========================================================================
   PAGE TARIFS
   ========================================================================== */

/* Emoji d'accent dans un titre (ex. stéthoscope) */
.callout-emoji { font-size: 1.15em; margin-right: 4px; }

/* Triangle d'avertissement rouge (ex. Absences & régularité) */
.warn-tri { vertical-align: -5px; margin-right: 10px; flex: 0 0 auto; }

/* Soulignement discret (orange) */
.soulign {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Section « Absences & régularité » — paragraphes mis en avant */
.page-suivi p {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--pomme);
  border-radius: var(--radius-m);
  padding: 20px 24px 20px 26px;
  margin: 0 0 16px;
  color: var(--encre);
  box-shadow: var(--shadow-soft);
}

/* ---- Table des tarifs ---- */
.price-table {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 32px);
  border-bottom: 1px solid var(--trait);
}
.price-row:last-child { border-bottom: 0; }
.price-name strong {
  display: block;
  font-size: 17px;
  color: var(--encre);
}
.price-name span {
  display: block;
  font-size: 14px;
  color: var(--encre-doux);
  margin-top: 2px;
}
.price-amount {
  flex: 0 0 auto;
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: 22px;
  color: var(--eau-profond);
  white-space: nowrap;
}
.price-amount.is-tbd {
  font-size: 14px;
  font-weight: 600;
  color: var(--encre-tres-doux);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--sable);
  border: 1px dashed var(--trait);
}

/* ---- Règlement ---- */
.pay-block { margin-top: clamp(28px, 3.5vw, 44px); }
.pay-title { margin-bottom: 10px; }

/* ---- Aides (mutuelle / MDPH / PCO) ---- */
.aide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
.aide-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-top: 4px solid var(--eau);
  border-radius: var(--radius-m);
  padding: clamp(24px, 2.6vw, 32px);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.aide-card:hover {
  transform: translateY(-4px);
  border-top-color: var(--eau-profond);
  box-shadow: var(--shadow-soft);
}
.aide-card p {
  margin: 0;
  font-size: 15px;
  color: var(--encre-doux);
  flex: 1;
}
.aide-card .text-link { margin-top: 4px; }

/* ==========================================================================
   PAGE CONTACT
   ========================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
}

/* ---- Colonne infos pratiques ---- */
.contact-info-card {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--radius-l);
  padding: clamp(28px, 3vw, 40px);
  box-shadow: var(--shadow-soft);
}
.contact-info-card h2 { margin-bottom: 20px; }
.contact-block { margin-bottom: 24px; }
.contact-label {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eau-profond);
  margin: 0 0 12px;
}
.horaires-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.horaires-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--trait);
  font-size: 15px;
}
.horaires-list li:last-child { border-bottom: 0; }
.horaires-list li span:first-child { color: var(--encre-doux); }
.horaires-list li span:last-child { font-weight: 600; }

.contact-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-lines li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}
.contact-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--eau-clair);
  color: var(--eau-profond);
  font-size: 16px;
}
.contact-lines a:hover { color: var(--orange); }
.contact-rdv { width: 100%; justify-content: center; margin-top: 8px; }

/* ---- Formulaire ---- */
.form-shell {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--radius-l);
  padding: clamp(28px, 3vw, 44px);
  box-shadow: var(--shadow-soft);
}
.form-shell h2 { margin-bottom: 20px; }

.form-feedback {
  border-radius: var(--radius-s);
  padding: 14px 18px;
  font-size: 15px;
  margin-bottom: 20px;
}
.form-feedback.is-success {
  background: rgba(163, 201, 72, 0.16);
  border: 1px solid rgba(111, 148, 39, 0.4);
  color: var(--pomme-profond);
}
.form-feedback.is-error {
  background: rgba(224, 123, 67, 0.12);
  border: 1px solid rgba(196, 98, 46, 0.4);
  color: var(--orange-profond);
}

/* Honeypot : caché aux humains, présent pour les bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.form-field.is-full { grid-column: 1 / -1; }
.form-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--encre-doux);
}
.form-field .req { color: var(--orange); }
.form-field input,
.form-field textarea {
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--trait);
  background: var(--blanc-casse);
  font-family: var(--font-texte);
  font-size: 15px;
  color: var(--encre);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--eau-profond);
  background: var(--blanc);
  box-shadow: 0 0 0 4px rgba(94, 156, 144, 0.15);
}
.form-submit {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* ---- Accès / carte ---- */
.access-map { border-radius: var(--radius-l); overflow: hidden; }
.access-layout { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.access-info { display: flex; flex-direction: column; gap: 22px; }
.access-mode h3 { margin: 0 0 4px; }
.access-mode p { margin: 0; color: var(--encre-doux); font-size: 15px; }
.access-map .img-placeholder { min-height: 320px; border-radius: var(--radius-l); }
.access-frame {
  display: block;
  width: 100%;
  min-height: 380px;
  border: 0;
  border-radius: var(--radius-l);
}

/* ==========================================================================
   PAGE QUESTIONNAIRE D'ANAMNÈSE
   ========================================================================== */

.q-required-note {
  font-size: 14px;
  color: var(--encre-doux);
  margin: 4px 0 0;
}
.req { color: var(--orange); font-weight: 700; }

/* select : même look que les inputs */
.form-field select {
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--trait);
  background: var(--blanc-casse);
  font-family: var(--font-texte);
  font-size: 15px;
  color: var(--encre);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}
.form-field select:focus {
  outline: none;
  border-color: var(--eau-profond);
  background: var(--blanc);
  box-shadow: 0 0 0 4px rgba(94, 156, 144, 0.15);
}

/* Sections du questionnaire */
.q-fieldset {
  border: 0;
  border-top: 2px solid var(--eau);
  padding: 24px 0 0;
  margin: 0 0 8px;
}
.q-fieldset + .q-fieldset { margin-top: 28px; }
.q-fieldset > legend {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--eau-profond);
  padding: 0;
  margin-bottom: 18px;
}
.q-subtitle {
  font-weight: 700;
  font-size: 16px;
  margin: 24px 0 12px;
}
.q-hint {
  font-size: 14px;
  color: var(--encre-doux);
  margin: 0 0 14px;
}
.q-subtitle .q-hint { font-weight: 400; }

/* Groupe de boutons radio (autorisation) */
.q-radiogroup {
  border: 1px solid var(--trait);
  border-radius: var(--radius-m);
  padding: 20px 22px;
  margin-top: 20px;
  background: var(--blanc-casse);
}
.q-radiogroup > legend {
  font-weight: 600;
  font-size: 15px;
  color: var(--encre);
  padding: 0 6px;
}
.q-radio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: 22px;
  font-size: 15px;
  cursor: pointer;
}
.q-radio input { accent-color: var(--eau-profond); width: 18px; height: 18px; }
/* Texte de consentement (paragraphe dans le cadre, évite le legend qui chevauche la bordure) */
.q-consent-text { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--encre); }

/* ==========================================================================
   PAGES LÉGALES (mentions légales, politique de confidentialité)
   ========================================================================== */

.legal-content h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--eau-profond);
  margin: clamp(32px, 4vw, 48px) 0 12px;
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 {
  font-size: 17px;
  margin: 22px 0 6px;
}
.legal-content p,
.legal-content li {
  color: var(--encre-doux);
  font-size: 16px;
  line-height: 1.7;
}
.legal-content ul {
  padding-left: 22px;
  margin: 0 0 1.2em;
}
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--eau-profond); text-decoration: underline; }
.legal-content a:hover { color: var(--orange); }

/* Placeholder d'info à compléter avant mise en ligne */
.ph {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  background: rgba(224, 123, 67, 0.12);
  border: 1px dashed rgba(196, 98, 46, 0.5);
  color: var(--orange-profond);
  font-size: 0.92em;
  font-weight: 600;
}