/* ==========================================================================
   COLIBRI, Com'& Form' — Héloïse Ribot
   Feuille de style unique du site (statique, vanilla).
   Charte : design system Colibri (palette logo vert→or→orange, neutres chauds,
   Montserrat / Raleway / Dancing Script). Chaleureux, doux, vivant.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
/* @@FONTS-START@@ */
/* Polices servies par le site lui-meme.
   Chargees depuis Google, chaque visite transmettait l'adresse IP du visiteur
   a un serveur hors UE, sans consentement possible. Fichiers pris sur
   fonts.gstatic.com le 2026-08-18, jeux latin et latin-ext, versions
   variables : un seul fichier par famille couvre toutes les graisses.
   Licence SIL Open Font, redistribution autorisee. */

@font-face{font-family:'Dancing Script';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/dancing-script-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:'Dancing Script';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/dancing-script-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:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/montserrat-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:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/montserrat-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:'Raleway';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/raleway-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:'Raleway';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/raleway-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;}
/* @@FONTS-END@@ */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* ---- Brand ramps ---- */
  --green-50:#f3f8ea; --green-100:#e4f0cf; --green-200:#cfe5a9; --green-300:#b4d77d;
  --green-400:#9fcb5d; --green-500:#8bbf4d; --green-600:#71a23a; --green-700:#527a2b;
  --gold-300:#ddd384; --gold-400:#d0c25a; --gold-500:#c2b54d; --gold-600:#a4983c;
  --orange-50:#fef4e9; --orange-100:#fde1c4; --orange-200:#fbc890; --orange-300:#f9b066;
  --orange-400:#f8a24e; --orange-500:#f18722; --orange-600:#df700f; --orange-700:#b05510;
  --terracotta-400:#f0763a; --terracotta-500:#ed6924; --terracotta-600:#cf551b;
  --yellow-300:#ffe27a; --yellow-400:#ffd53a; --yellow-500:#f7c01f;

  /* ---- Warm neutrals ---- */
  --sand-50:#fdfaf4; --sand-100:#fbf6ec; --sand-200:#f4ecdd; --sand-300:#e9ddc9; --sand-400:#d8c8ac;
  --warm-300:#c4b9a8; --warm-500:#968b7c; --warm-600:#726a5c; --warm-700:#5b5448; --warm-900:#3a342c;
  --white:#ffffff;

  /* ---- Semantic surfaces ---- */
  --color-bg:var(--sand-50); --color-bg-warm:var(--sand-100);
  --surface-card:var(--white); --surface-soft:var(--sand-100);
  --surface-warm:var(--sand-200); --surface-inverse:var(--warm-900);

  /* ---- Semantic text ---- */
  --text-strong:var(--warm-900); --text-body:var(--warm-700); --text-muted:var(--warm-600);
  --text-subtle:var(--warm-500); --text-on-color:var(--white); --text-on-dark:var(--sand-100);

  /* ---- Lines ---- */
  --border:var(--sand-300); --border-strong:var(--sand-400); --border-on-dark:rgba(255,255,255,.18);

  /* ---- Actions / accents ---- */
  --color-primary:var(--orange-500); --color-primary-hover:var(--orange-600);
  --color-primary-press:var(--orange-700); --color-primary-soft:var(--orange-50);
  --color-primary-contrast:var(--white);
  /* Orange lisible : l'orange de marque tombe a 2,55:1 avec du blanc ou sur
     fond clair, tres en dessous des 4,5:1 attendus. Cette teinte sert partout
     ou l'orange porte du texte ou une icone ; l'orange vif reste pour les
     aplats, les degrades, les bordures et les traits. */
  --color-primary-ink:#b05510;
  --color-accent:var(--green-500); --color-accent-hover:var(--green-600); --color-accent-soft:var(--green-50);
  --color-gold:var(--gold-500);

  /* ---- States ---- */
  --color-success:var(--green-600); --color-success-soft:var(--green-50);
  --color-warning:var(--orange-400); --color-warning-soft:var(--orange-50);
  --color-danger:#d9544e; --color-danger-soft:#fbeceb;

  --focus-ring:rgba(241,135,34,.40);

  /* ---- Gradients ---- */
  --gradient-colibri:linear-gradient(95deg,#8bbf4d 0%,#c2b54d 46%,#f8a24e 100%);
  --gradient-colibri-vertical:linear-gradient(160deg,#8bbf4d 0%,#c2b54d 50%,#f8a24e 100%);
  --gradient-sunset:linear-gradient(120deg,#f8a24e 0%,#ed6924 100%);
  --gradient-warm-wash:linear-gradient(180deg,var(--sand-50) 0%,var(--orange-50) 100%);
  --gradient-text:linear-gradient(92deg,#71a23a 0%,#c2b54d 45%,#f18722 100%);

  /* ---- Typography ---- */
  --font-display:'Montserrat','Segoe UI',system-ui,sans-serif;
  --font-body:'Raleway','Segoe UI',system-ui,sans-serif;
  --font-script:'Dancing Script','Brush Script MT',cursive;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-md:1.0625rem;
  --text-lg:1.25rem; --text-xl:1.5rem; --text-2xl:2rem; --text-3xl:2.5rem;
  --text-4xl:3.5rem; --text-5xl:4.5rem;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extra:800;
  --leading-tight:1.06; --leading-snug:1.28; --leading-normal:1.6; --leading-relaxed:1.78;
  --tracking-tight:-.025em; --tracking-normal:0em; --tracking-wide:.06em; --tracking-wider:.16em;

  /* ---- Spacing & layout ---- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --space-20:5rem; --space-24:6rem; --space-32:8rem;
  --container-lg:1120px; --container-xl:1200px;
  --gutter:28px; --section-y:clamp(64px,9vw,112px);

  /* ---- Radii ---- */
  --radius-xs:8px; --radius-sm:12px; --radius-md:16px; --radius-lg:22px;
  --radius-xl:30px; --radius-2xl:40px; --radius-pill:999px; --radius-circle:50%;

  /* ---- Shadows (warm-tinted) ---- */
  --shadow-xs:0 1px 2px rgba(58,52,44,.05);
  --shadow-sm:0 4px 16px -6px rgba(58,52,44,.12),0 1px 3px rgba(58,52,44,.05);
  --shadow-md:0 16px 38px -12px rgba(58,52,44,.16),0 2px 8px rgba(58,52,44,.05);
  --shadow-lg:0 32px 64px -20px rgba(150,84,24,.24),0 8px 20px -8px rgba(58,52,44,.10);
  --shadow-glow:0 16px 36px -10px rgba(241,135,34,.48);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
  --ring:0 0 0 4px var(--focus-ring);

  /* ---- Motion ---- */
  --transition-fast:140ms; --transition-base:220ms; --transition-slow:380ms;
  --ease-soft:cubic-bezier(.22,.7,.28,1); --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:96px;}
body{
  margin:0; font-family:var(--font-body); font-size:var(--text-md);
  line-height:var(--leading-relaxed); color:var(--text-body); background:var(--color-bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
h1,h2,h3,h4,h5{
  font-family:var(--font-display); font-weight:var(--weight-bold);
  line-height:var(--leading-tight); letter-spacing:var(--tracking-tight);
  color:var(--text-strong); margin:0 0 .5em; text-wrap:balance;
}
h1{font-size:clamp(38px,5vw,60px);} h2{font-size:clamp(30px,4vw,44px);}
h3{font-size:var(--text-2xl);} h4{font-size:var(--text-xl);}
p{margin:0 0 1em; text-wrap:pretty;}
img{max-width:100%; display:block;}
a{color:var(--color-primary-ink); text-decoration:none; transition:color var(--transition-fast) var(--ease-soft);}
a:hover{color:var(--color-primary-hover);}
ul,ol{margin:0; padding:0;}
button{font-family:inherit;}
::selection{background:var(--orange-200); color:var(--warm-900);}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--radius-xs);}

/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */
.container{max-width:var(--container-xl); margin-inline:auto; padding-inline:var(--gutter);}
.container--narrow{max-width:var(--container-lg);}
.section{padding-block:var(--section-y);}
.section--tight{padding-block:clamp(48px,6vw,72px);}
.section-soft{background:var(--color-bg-warm);}
.eyebrow{
  font-family:var(--font-display); font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wider); text-transform:uppercase;
  font-size:var(--text-sm); color:var(--color-primary-ink); display:inline-block;
}
.eyebrow--green{color:var(--color-accent);}
.eyebrow--onphoto{color:#ffd9a0; text-shadow:0 1px 12px rgba(28,20,10,.4);}
.script{font-family:var(--font-script); font-weight:400; letter-spacing:.01em; line-height:1;}
.lead{font-size:clamp(18px,2.2vw,20px); line-height:1.7; color:var(--text-body);}
.text-muted{color:var(--text-muted);}
.section-head{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:16px; max-width:64ch; margin:0 auto clamp(40px,5vw,56px);
}
.section-head h2{margin:0;}
.section-head p{margin:0; font-size:var(--text-lg); color:var(--text-muted);}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}

/* icônes injectées : wrapper neutre, svg dimensionné par le contexte (défaut 1em) */
[data-i]{display:inline-flex; align-items:center; justify-content:center; line-height:0; color:inherit;}
[data-i] svg{width:1em; height:1em; display:block;}

/* skip link */
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:200; background:var(--white);
  color:var(--text-strong); padding:10px 18px; border-radius:var(--radius-pill);
  box-shadow:var(--shadow-md); font-family:var(--font-display); font-weight:600;
  transition:top var(--transition-base) var(--ease-soft);
}
.skip-link:focus{top:16px;}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn{
  --_h:48px; --_px:24px; --_fz:16px;
  font-family:var(--font-display); font-weight:600; font-size:var(--_fz);
  height:var(--_h); padding:0 var(--_px); border-radius:var(--radius-pill);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:1.5px solid transparent; cursor:pointer; text-decoration:none;
  letter-spacing:.01em; white-space:nowrap; line-height:1;
  transition:background var(--transition-base) var(--ease-soft),
    background-position var(--transition-slow) var(--ease-soft),
    color var(--transition-base) var(--ease-soft),
    border-color var(--transition-base) var(--ease-soft),
    box-shadow var(--transition-base) var(--ease-soft),
    transform var(--transition-fast) var(--ease-soft);
}
.btn:focus-visible{outline:none; box-shadow:var(--ring);}
.btn[disabled]{opacity:.5; cursor:not-allowed; pointer-events:none;}
.btn--sm{--_h:40px; --_px:18px; --_fz:14px;}
.btn--lg{--_h:56px; --_px:32px; --_fz:18px;}
.btn--block{width:100%;}
.btn svg{width:1.15em; height:1.15em; flex:none;}
.btn--primary{background:var(--color-primary-ink); color:var(--color-primary-contrast); box-shadow:var(--shadow-sm);}
.btn--primary:hover{background:var(--color-primary-hover); color:#fff; box-shadow:var(--shadow-glow); transform:translateY(-1px);}
.btn--primary:active{background:var(--color-primary-press); transform:translateY(1px); box-shadow:var(--shadow-xs);}
.btn--gradient{background:var(--gradient-colibri); color:#fff; box-shadow:var(--shadow-sm); background-size:160% 100%; background-position:0% 50%;}
.btn--gradient:hover{background-position:100% 50%; color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-glow);}
.btn--gradient:active{transform:translateY(1px);}
.btn--secondary{background:var(--surface-card); color:var(--text-strong); border-color:var(--border-strong);}
.btn--secondary:hover{background:var(--surface-soft); border-color:var(--color-primary); color:var(--color-primary-hover);}
.btn--secondary:active{transform:translateY(1px);}
.btn--ghost{background:transparent; color:var(--color-primary-ink);}
.btn--ghost:hover{background:var(--color-primary-soft); color:var(--color-primary-hover);}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px;}
.btn-row--nowrap{flex-wrap:nowrap;}
@media (max-width:560px){.btn-row--nowrap{flex-wrap:wrap;}}
/* Qui suis-je : panneau "Formations complémentaires" */
.prose-narrow > p{margin:0 0 16px; color:var(--text-body); font-size:16px; line-height:1.7;}
.formations{margin-top:clamp(26px,3.5vw,38px); background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:clamp(22px,3vw,32px);}
.formations__title{margin:0 0 16px; font-family:var(--font-display); font-weight:700; color:var(--color-primary-ink); font-size:var(--text-xl);}
.formations__list{list-style:none; margin:0; padding:0; columns:2; column-gap:38px;}
.formations__list li{font-size:15px; color:var(--text-body); line-height:1.5; margin:0 0 10px; break-inside:avoid;}
.formations__year{font-weight:700; color:var(--green-600); margin-right:8px;}
@media(max-width:680px){ .formations__list{columns:1;} }
.btn--white{background:#fff; color:var(--color-primary-ink); box-shadow:var(--shadow-sm);}
.btn--white:hover{background:#fff; color:var(--color-primary-hover); transform:translateY(-1px); box-shadow:var(--shadow-md);}
.btn--on-color-ghost{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.4);}
.btn--on-color-ghost:hover{background:rgba(255,255,255,.24); color:#fff;}

/* ==========================================================================
   5. BADGES
   ========================================================================== */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-weight:600; font-size:12.5px;
  line-height:1; letter-spacing:.02em; padding:7px 13px;
  border-radius:var(--radius-pill); border:1px solid transparent; white-space:nowrap;
}
.badge svg{width:14px; height:14px;}
.badge--orange{background:var(--orange-50); color:var(--orange-700);}
.badge--green{background:var(--green-50); color:var(--green-700);}
.badge--gold{background:#f6f1d6; color:var(--gold-600);}

/* ==========================================================================
   6. CARDS
   ========================================================================== */
.card{
  background:var(--surface-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--space-6);
  transition:box-shadow var(--transition-base) var(--ease-soft),
    transform var(--transition-base) var(--ease-soft),
    border-color var(--transition-base) var(--ease-soft);
}
.card--lg{padding:var(--space-8);}
/* Pied de carte : un bouton principal et, à côté, le téléchargement du document
   en lien discret (deux boutons de même poids se disputeraient le clic). */
.card__actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding-top:4px;}
.card__pdf{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--text-muted); text-decoration:none; border-bottom:1px solid transparent;}
.card__pdf svg{width:16px; height:16px;}
.card__pdf:hover,.card__pdf:focus-visible{color:var(--color-primary-ink); border-bottom-color:currentColor;}
.card--soft{background:var(--surface-soft); border-color:transparent; box-shadow:none;}
.card--accent{position:relative; overflow:hidden;}
.card--accent::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--gradient-colibri);}

/* ==========================================================================
   7. SERVICE CARD
   ========================================================================== */
.service{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  background:var(--surface-card); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:var(--space-8); position:relative; overflow:hidden;
  box-shadow:var(--shadow-sm); text-decoration:none; height:100%;
  transition:box-shadow var(--transition-base) var(--ease-soft),
    transform var(--transition-base) var(--ease-soft),
    border-color var(--transition-base) var(--ease-soft);
}
a.service:hover{box-shadow:var(--shadow-lg); transform:translateY(-4px); border-color:var(--orange-200);}
.service__medallion{
  width:62px; height:62px; border-radius:18px; flex:none;
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:var(--shadow-sm);
}
.service__medallion svg{width:28px; height:28px;}
.service--orange .service__medallion{background:var(--gradient-sunset);}
.service--green .service__medallion{background:linear-gradient(135deg,var(--green-400),var(--green-600));}
.service--gold .service__medallion{background:linear-gradient(135deg,var(--gold-400),var(--gold-600));}
.service__title{font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--text-strong); margin:0; line-height:1.2;}
.service__desc{margin:0; font-size:15.5px; color:var(--text-muted); line-height:1.65;}
.service__link{margin-top:auto; display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--color-primary-ink);}
.service__link svg{width:17px; height:17px; transition:transform var(--transition-base) var(--ease-soft);}
a.service:hover .service__link svg{transform:translateX(4px);}

/* ==========================================================================
   8. TESTIMONIAL
   ========================================================================== */
.testi{
  background:var(--surface-card); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:var(--space-8);
  box-shadow:var(--shadow-sm); position:relative; display:flex; flex-direction:column; gap:18px; height:100%;
}
.testi__mark{font-family:var(--font-script); font-size:64px; line-height:.5; color:var(--orange-300); height:30px;}
.testi__quote{font-family:var(--font-body); font-size:18px; line-height:1.7; color:var(--text-body); margin:0;}
.testi__author{display:flex; align-items:center; gap:13px; margin-top:auto;}
.testi__avatar{
  width:46px; height:46px; border-radius:50%; flex:none; display:inline-flex;
  align-items:center; justify-content:center; color:#fff; font-family:var(--font-display);
  font-weight:700; font-size:16px; background:var(--gradient-colibri); overflow:hidden;
}
.testi__name{font-family:var(--font-display); font-weight:700; color:var(--text-strong); font-size:15.5px; line-height:1.2; display:block;}
.testi__role{font-size:13.5px; color:var(--text-muted);}

/* --- Carrousel d'avis ------------------------------------------------------
   Le defilement est fait par le CSS (scroll-snap) : sans JavaScript, la piste
   se fait glisser au doigt ou au trackpad et les 17 avis restent atteignables.
   Le JS n'ajoute que les fleches, les points et le repli des avis longs. */
.reviews{position:relative;}
.reviews__track{
  list-style:none; margin:0; padding:4px; display:grid; grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2 * var(--space-6)) / 3); gap:var(--space-6);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
}
.reviews__track::-webkit-scrollbar{display:none;}
.reviews__slide{scroll-snap-align:start; display:flex;}
.reviews__slide > .testi{width:100%;}
/* la citation est repliee par le JS seulement : sans lui, texte entier.
   --testi-lignes fixe la hauteur de l'apercu, donc celle des cartes : les avis
   Google vont de 3 a 25 lignes, sans repli la carte la plus longue imposait sa
   hauteur a toute la rangee et les avis courts affichaient un grand vide. */
.reviews{--testi-lignes:6;}
.testi__quote{font-size:16.5px;}
.testi--clamped .testi__quote{
  display:-webkit-box; -webkit-line-clamp:var(--testi-lignes); -webkit-box-orient:vertical;
  overflow:hidden;
}
.testi__more{
  align-self:flex-start; margin:-4px 0 0; padding:0; border:0; background:none;
  font-family:var(--font-display); font-weight:600; font-size:14px; cursor:pointer;
  color:var(--color-primary-hover); border-bottom:1px solid currentColor; line-height:1.3;
}
.testi__more:hover,.testi__more:focus-visible{color:var(--orange-700);}
.reviews__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface-card); box-shadow:var(--shadow-md); color:var(--text-strong);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:color var(--transition-fast) var(--ease-soft), border-color var(--transition-fast) var(--ease-soft);
}
.reviews__arrow:hover:not(:disabled),.reviews__arrow:focus-visible{color:var(--color-primary-ink); border-color:var(--color-primary);}
.reviews__arrow:disabled{opacity:.35; cursor:default;}
.reviews__arrow svg{width:20px; height:20px;}
.reviews__arrow--prev{left:-14px;}
.reviews__arrow--next{right:-14px;}
.reviews__dots{display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin-top:26px;}
.reviews__dot{
  width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:var(--border-strong); transition:background-color var(--transition-fast) var(--ease-soft), transform var(--transition-fast) var(--ease-soft);
}
.reviews__dot[aria-current="true"]{background:var(--color-primary); transform:scale(1.35);}
@media (max-width:980px){
  .reviews__track{grid-auto-columns:calc((100% - var(--space-6)) / 2);}
}
@media (max-width:760px){
  .reviews__track{grid-auto-columns:100%;}
  .reviews__arrow--prev{left:-6px;}
  .reviews__arrow--next{right:-6px;}
}
@media (prefers-reduced-motion:reduce){
  .reviews__track{scroll-behavior:auto;}
}

/* ==========================================================================
   9. ACCORDION
   ========================================================================== */
.acc{display:flex; flex-direction:column; gap:12px;}
.acc__item{background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:border-color var(--transition-base) var(--ease-soft), box-shadow var(--transition-base) var(--ease-soft);}
.acc__item.is-open{border-color:var(--orange-200); box-shadow:var(--shadow-sm);}
.acc__head{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; background:none; border:0; cursor:pointer; text-align:left; font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--text-strong);}
.acc__head:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--radius-lg);}
.acc__panel{overflow:hidden; height:0; transition:height var(--transition-base) var(--ease-soft);}
.acc__body{padding:0 22px 20px; color:var(--text-muted); font-size:15.5px; line-height:1.7;}
.acc__body p:last-child{margin-bottom:0;}

/* ==========================================================================
   10. TABS (segmented pill)
   ========================================================================== */
.tabs{display:inline-flex; gap:4px; padding:5px; background:var(--surface-warm); border-radius:var(--radius-pill); font-family:var(--font-display);}
.tabs__tab{
  border:0; cursor:pointer; background:transparent; white-space:nowrap;
  font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--text-muted);
  padding:10px 22px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:color var(--transition-base) var(--ease-soft), background var(--transition-base) var(--ease-soft), box-shadow var(--transition-base) var(--ease-soft);
}
.tabs__tab svg{width:17px; height:17px;}
.tabs__tab:hover{color:var(--text-strong);}
.tabs__tab:focus-visible{outline:none; box-shadow:var(--ring);}
.tabs__tab.is-active{background:var(--surface-card); color:var(--color-primary-ink); box-shadow:var(--shadow-sm);}

/* Intitulés de blocs « accompagnements » (remplace les onglets sur l'accueil) */
.acc-group{display:flex; align-items:center; gap:13px; margin:0 0 22px;}
.acc-group--pro{margin-top:clamp(44px,5.5vw,64px);}
.acc-group--intro{margin-top:clamp(28px,3.5vw,38px); margin-bottom:14px;}
/* Bloc « Dans son envol » en pleine largeur, sous la photo + le 1er paragraphe */
.acc-envol{margin-top:clamp(32px,4vw,48px);}
.acc-envol .acc-group--intro{margin-top:0;}
.acc-group__bird{flex:none; width:52px; height:52px; object-fit:contain; margin-bottom:-4px;}
.acc-group__title{margin:0; font-family:var(--font-script); font-weight:600; font-size:clamp(30px,3.6vw,40px); line-height:1; color:var(--text-strong);}
/* Sur PC, les 4 cartes de chaque espace tiennent sur une seule ligne */
#accompagnements .grid--services{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:880px){#accompagnements .grid--services{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){#accompagnements .grid--services{grid-template-columns:1fr;}}

/* ==========================================================================
   11. FORM FIELDS
   ========================================================================== */
.field{display:flex; flex-direction:column; gap:7px;}
.field__label{font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--text-strong);}
.field__req{color:var(--color-primary-ink); margin-left:2px;}
.field__wrap{position:relative; display:flex; align-items:center;}
.field__icon{position:absolute; left:15px; display:inline-flex; color:var(--text-subtle); pointer-events:none;}
.field__icon svg{width:18px; height:18px;}
.input,.textarea{
  width:100%; font-family:var(--font-body); font-size:16px; color:var(--text-strong);
  background:var(--surface-card); border:1.5px solid var(--border-strong); border-radius:var(--radius-md);
  transition:border-color var(--transition-base) var(--ease-soft), box-shadow var(--transition-base) var(--ease-soft);
}
.input{height:48px; padding:0 16px;}
.textarea{min-height:130px; padding:13px 16px; line-height:1.6; resize:vertical;}
.input::placeholder,.textarea::placeholder{color:var(--text-subtle);}
.input:hover,.textarea:hover{border-color:var(--warm-300);}
.input:focus,.textarea:focus{outline:none; border-color:var(--color-primary); box-shadow:0 0 0 4px var(--focus-ring);}
.field--has-icon .input{padding-left:44px;}
.check{display:inline-flex; align-items:flex-start; gap:11px; cursor:pointer; font-family:var(--font-body); font-size:15px; color:var(--text-body); line-height:1.45;}
.check input{position:absolute; opacity:0; width:0; height:0;}
.check__box{
  width:22px; height:22px; flex:none; margin-top:1px; border-radius:7px;
  border:1.5px solid var(--border-strong); background:var(--surface-card);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--transition-base) var(--ease-soft), border-color var(--transition-base) var(--ease-soft);
}
.check__box svg{width:14px; height:14px; color:#fff; opacity:0; transform:scale(.6); transition:opacity var(--transition-fast), transform var(--transition-fast) var(--ease-soft);}
.check:hover .check__box{border-color:var(--color-primary);}
.check input:focus-visible + .check__box{box-shadow:var(--ring);}
.check input:checked + .check__box{background:var(--color-primary-ink); border-color:var(--color-primary);}
.check input:checked + .check__box svg{opacity:1; transform:scale(1);}

/* ==========================================================================
   12. HEADER
   ========================================================================== */
.site-header{position:sticky; top:0; z-index:50; background:rgba(253,250,244,0); border-bottom:1px solid transparent; transition:background .3s var(--ease-soft), box-shadow .3s var(--ease-soft), border-color .3s var(--ease-soft);}
.site-header.is-scrolled{background:rgba(253,250,244,.88); backdrop-filter:saturate(140%) blur(10px); -webkit-backdrop-filter:saturate(140%) blur(10px); border-bottom-color:var(--border); box-shadow:0 4px 20px -16px rgba(58,52,44,.4);}
.header-inner{max-width:var(--container-xl); margin:0 auto; padding:14px var(--gutter); display:flex; align-items:center; gap:24px;}
.header-logo{display:flex; flex:none;}
.header-logo img{height:56px; width:auto;}
.nav-desktop{display:flex; gap:4px; margin-left:auto;}
.nav-desktop a{
  font-family:var(--font-display); font-weight:600; font-size:15px;
  padding:9px 15px; border-radius:var(--radius-pill); color:var(--text-body);
  transition:color var(--transition-base) var(--ease-soft), background var(--transition-base) var(--ease-soft);
}
.nav-desktop a:hover{color:var(--color-primary-ink); background:var(--orange-50);}
.nav-desktop a.is-active{color:var(--color-primary-ink); background:var(--orange-50);}
.header-cta{flex:none;}
.nav-toggle{margin-left:auto; border:0; background:var(--surface-card); width:46px; height:46px; border-radius:13px; display:none; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); cursor:pointer; color:var(--text-strong);}
.nav-toggle svg{width:24px; height:24px;}
.nav-mobile{display:none; flex-direction:column; gap:4px; padding:0 var(--gutter) 20px; background:rgba(253,250,244,.96); backdrop-filter:blur(10px);}
.nav-mobile.is-open{display:flex;}
.nav-mobile a{font-family:var(--font-display); font-weight:600; padding:12px 15px; border-radius:13px; color:var(--text-body); font-size:16px;}
.nav-mobile a:hover,.nav-mobile a.is-active{background:var(--orange-50); color:var(--color-primary-ink);}
/* Le bouton d'appel du menu mobile est un .btn : la couleur generique des
   liens du menu l'emportait, et son libelle sortait en brun sur orange (1,5:1). */
.nav-mobile a.btn--primary{color:var(--color-primary-contrast);}
.nav-mobile a.btn--primary:hover{background:var(--color-primary-ink); color:var(--color-primary-contrast);}
.nav-mobile .btn{margin-top:10px;}

/* ---- Nav : menus déroulants (Particuliers / Professionnels) ---- */
.nav-group{position:relative;}
.nav-group__trigger{display:inline-flex; align-items:center; gap:5px; cursor:pointer;}
.nav-group__caret{width:15px !important; height:15px !important; transition:transform var(--transition-base) var(--ease-soft);}
.nav-group:hover .nav-group__caret,.nav-group:focus-within .nav-group__caret,.nav-group.is-open .nav-group__caret{transform:rotate(180deg);}
.nav-menu{position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(8px); min-width:316px; background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:10px; display:grid; gap:2px; opacity:0; visibility:hidden; transition:opacity var(--transition-base) var(--ease-soft), transform var(--transition-base) var(--ease-soft); z-index:60;}
.nav-menu::before{content:""; position:absolute; top:-12px; left:0; right:0; height:12px;}
.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu,.nav-group.is-open .nav-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.nav-menu a{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-md); background:transparent;}
.nav-menu a:hover{background:var(--sand-100);}
.nav-menu a b{display:block; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--text-strong); line-height:1.22;}
.nav-menu a small{display:block; font-size:12.5px; color:var(--text-muted); margin-top:2px; font-weight:500;}
.nav-menu__ic{flex:none; width:38px; height:38px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; color:#fff;}
.nav-menu__ic svg{width:19px; height:19px;}
.nav-menu__ic[data-tone="orange"]{background:var(--gradient-sunset);}
.nav-menu__ic[data-tone="green"]{background:linear-gradient(150deg,var(--green-400),var(--green-600));}
.nav-menu__ic[data-tone="gold"]{background:linear-gradient(150deg,var(--gold-400),var(--gold-600));}
.nav-mobile__label{font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--color-primary-ink); padding:14px 15px 4px;}
.nav-mobile__sub{padding-left:28px !important; font-weight:500 !important; font-size:15px !important;}

/* ==========================================================================
   13. HERO
   ========================================================================== */
.hero{position:relative; overflow:hidden;}

/* ---- Hero photo immersif + parallax ---- */
.hero--photo{min-height:clamp(560px,90vh,820px); display:flex;}
.hero__bg{position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--warm-900);}
.hero__bg img{position:absolute; top:-20%; left:0; width:100%; height:140%; object-fit:cover; object-position:center 35%; will-change:transform;}
.hero__scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(253,250,244,.94) 0%, rgba(253,250,244,.34) 11%, rgba(58,52,44,0) 26%),
    linear-gradient(96deg, rgba(38,29,17,.74) 0%, rgba(38,29,17,.46) 36%, rgba(38,29,17,.06) 66%, rgba(38,29,17,0) 100%),
    linear-gradient(180deg, rgba(38,29,17,0) 52%, rgba(38,29,17,.28) 78%, rgba(253,250,244,.97) 100%),
    radial-gradient(130% 90% at 88% 116%, rgba(241,135,34,.22), transparent 58%);
}
.hero__inner{position:relative; z-index:2; width:100%; max-width:var(--container-xl); margin:0 auto; padding:clamp(122px,17vh,184px) var(--gutter) clamp(74px,10vh,116px); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px; align-items:end;}
.hero__content{max-width:660px;}
.hero__title{font-size:clamp(40px,5.6vw,66px); line-height:1.03; margin:18px 0 0; color:#fff; letter-spacing:-.02em; text-shadow:0 2px 30px rgba(28,20,10,.5);}
.hero__accent{background:linear-gradient(92deg,#dff0a0 0%,#ffe18c 46%,#ffb05a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none;}
.hero__lead{font-size:clamp(17px,2vw,19.5px); line-height:1.7; color:rgba(255,255,255,.93); max-width:50ch; margin-top:22px; text-shadow:0 1px 16px rgba(28,20,10,.45);}
.hero__actions{display:flex; gap:12px; margin-top:32px; flex-wrap:wrap;}
.hero__actions .btn{--_px:24px; --_fz:16.5px;}
.hero__accent-visual{position:relative; justify-self:end; align-self:end; display:flex; flex-direction:column; align-items:flex-end; gap:18px; text-align:right;}
.hero__medallion{width:clamp(124px,15vw,170px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.96), rgba(251,246,236,.72)); box-shadow:0 26px 64px -18px rgba(28,20,10,.6), inset 0 1px 0 rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center;}
.hero__medallion img{width:72%; filter:drop-shadow(0 10px 18px rgba(120,70,16,.28));}
.hero__whisper{margin:0; font-size:31px; color:#fff; line-height:1; text-shadow:0 2px 18px rgba(28,20,10,.55);}
.hero__whisper span{display:block; font-family:var(--font-body); font-size:14px; font-weight:500; color:rgba(255,255,255,.86); line-height:1.5; margin-top:9px; max-width:236px;}

/* ==========================================================================
   14. PAGE HERO (interior pages)
   ========================================================================== */
.page-hero{position:relative; background:var(--color-bg-warm); overflow:hidden; min-height:252px;}
.page-hero__tache{position:absolute; right:clamp(20px,4vw,64px); top:50%; transform:translateY(-50%); width:228px; height:228px; pointer-events:none; display:flex; align-items:center; justify-content:center;}
.page-hero__blob{position:absolute; width:228px; height:228px; border-radius:48% 52% 56% 44%/52% 44% 56% 48%; background:var(--gradient-colibri); opacity:.14;}
.page-hero__disc{position:relative; width:198px; height:198px; border-radius:50%; background:radial-gradient(circle at 50% 42%,#fff,var(--sand-100)); box-shadow:var(--shadow-lg); display:flex; align-items:center; justify-content:center;}
.page-hero__disc img{width:64%; height:auto; filter:drop-shadow(0 10px 22px rgba(180,90,20,.16));}
@media(max-width:980px){ .page-hero__tache{display:none;} .page-hero{min-height:0;} }
.page-hero__inner{position:relative; max-width:var(--container-xl); margin:0 auto; padding:clamp(32px,5vw,52px) var(--gutter) clamp(48px,6vw,64px);}
.page-hero__inner > *{max-width:680px;}
.page-hero h1{margin:16px 0 18px;}
.page-hero h1.sr-only + .lead{margin-top:24px;}
.breadcrumb{display:flex; flex-wrap:wrap; align-items:center; gap:7px; color:var(--text-muted); font-family:var(--font-display); font-weight:600; font-size:14.5px; margin-bottom:22px;}
.breadcrumb a{color:var(--text-muted);}
.breadcrumb a:hover{color:var(--color-primary-ink);}
.breadcrumb svg{width:15px; height:15px;}

/* ==========================================================================
   15. GRIDS
   ========================================================================== */
.grid{display:grid; gap:22px;}
.grid--services{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));}
.grid--3{grid-template-columns:repeat(3,1fr);}
/* Grille de 3 colonnes qui CENTRE une dernière ligne incomplète : 5 cartes se posent
   en 3 + 2 centrées au lieu de laisser un trou à droite. Utilisée sur les fiches
   formateur, où le nombre de formations animées varie d'une personne à l'autre.
   Principe : 6 colonnes, chaque carte en occupe 2, et l'avant-dernière carte qui
   ouvre une ligne est décalée d'une demi-carte. */
.grid--balanced{grid-template-columns:repeat(6,1fr);}
.grid--balanced > *{grid-column:span 2;}
.grid--balanced > *:nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2;}
.grid--balanced > .card{display:flex; flex-direction:column;}
.grid--balanced > .card .card__actions{margin-top:auto;}

/* ==========================================================================
   16. VALUES SECTION
   ========================================================================== */
.values{position:relative; overflow:hidden;}
.values__inner{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center;}
.values__visual{position:relative; display:flex; justify-content:center; align-items:center; min-height:360px;}
.values__blob{position:absolute; width:340px; height:340px; border-radius:48% 52% 56% 44%/52% 44% 56% 48%; background:var(--gradient-colibri); opacity:.13;}
.values__disc{position:relative; width:min(300px,70vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 42%,#fff,var(--sand-100)); box-shadow:var(--shadow-lg); display:flex; align-items:center; justify-content:center;}
.values__disc img{width:70%; filter:drop-shadow(0 10px 22px rgba(180,90,20,.16));}
.values__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:14px;}
.values__list li{display:flex; align-items:center; gap:14px;}
.value-letter{font-family:var(--font-script); font-weight:700; font-size:30px; width:36px; height:36px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; color:#fff; flex:none; line-height:1; padding-bottom:2px;}
.value-letter--green{background:var(--green-500);} .value-letter--orange{background:var(--orange-500);}
.values__list li span:last-child{color:var(--text-body); font-size:16px;}

/* ==========================================================================
   17. NEWSLETTER / GRADIENT BANNER
   ========================================================================== */
.banner{position:relative; overflow:hidden; border-radius:var(--radius-2xl); background:var(--gradient-colibri); padding:clamp(36px,5vw,56px); color:#fff;}
.banner__motif{position:absolute; right:28px; bottom:22px; width:clamp(140px,18vw,210px); opacity:.16; pointer-events:none;}
.banner__inner{position:relative; max-width:580px;}
.banner .script{font-size:clamp(34px,4.5vw,44px); margin:0 0 8px;}
.banner p{font-size:17.5px; line-height:1.7; color:rgba(255,255,255,.95); margin:0 0 24px;}
.banner__form{display:flex; gap:12px; flex-wrap:wrap;}
.banner__form .field{flex:1 1 240px;}
.banner__form .input{background:#fff;}

/* CTA strip (premier échange offert etc.) */
.cta-strip{background:var(--surface-inverse); color:#fff; position:relative; overflow:hidden;}
.cta-strip__motif{position:absolute; right:-40px; bottom:-50px; width:300px; opacity:.08; pointer-events:none;}
.cta-strip__inner{position:relative; max-width:var(--container-xl); margin:0 auto; padding:clamp(48px,6vw,72px) var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.cta-strip h2{color:#fff; margin:0 0 8px;}
.cta-strip p{color:rgba(255,255,255,.9); margin:0; font-size:var(--text-lg);}

/* ==========================================================================
   18. SERVICE DETAIL (pole page)
   ========================================================================== */
.detail{display:grid; grid-template-columns:1.6fr .9fr; gap:48px; align-items:start;}
.detail h2{font-size:clamp(26px,3vw,32px); margin-bottom:18px;}
/* Titre éditorial « signé » : script + colibri (comme les blocs .acc-group) */
.branded-title{display:flex; align-items:center; gap:11px; font-family:var(--font-script); font-weight:600; line-height:1.12; color:var(--text-strong);}
.detail h2.branded-title{font-size:clamp(28px,3.3vw,36px);}
.branded-title::before{content:""; flex:none; width:40px; height:40px; margin-bottom:-3px; background:url("../img/hummingbird-up.webp") center/contain no-repeat;}
.benefits{list-style:none; padding:0; margin:0 0 44px; display:grid; gap:14px;}
.benefits li{display:flex; gap:13px; align-items:flex-start; font-size:17px; color:var(--text-body);}
/* Panneau "Ce que cet accompagnement peut vous apporter" : liste large en colonnes */
.benefits-panel{margin-top:clamp(30px,4vw,46px); background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius-xl); padding:clamp(26px,3.4vw,40px);}
.benefits-panel__intro{margin:0 0 20px; font-family:var(--font-display); font-weight:600; font-size:clamp(17px,1.9vw,20px); color:var(--text-strong);}
.benefits--cols{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:16px 34px; margin:0;}
/* Variante centree : le panneau se cale sous le titre centre au lieu de courir
   sur toute la largeur, et tient en deux colonnes (le min(100%,320px) le fait
   retomber a une seule colonne sur telephone, sans media query). */
.benefits-panel--centre{max-width:900px; margin-left:auto; margin-right:auto;}
.benefits-panel--centre .benefits--cols{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));}
.detail-disclaimer{margin:20px 0 0; font-size:15px;}
/* Le titre du concept arrive juste apres la phrase de reserve : sans cette
   respiration, les deux se collent. */
.concept-intro{margin-top:clamp(36px,4.5vw,56px);}
/* Document (fiche, affiche) présenté dans un cadre photo : visible en entier, pas rogné */
.doc-open{margin-top:14px;}

/* Ouverture d'un document en grand */
.lightbox{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:clamp(10px,2vw,24px); background:rgba(38,28,18,.8);}
.lightbox[hidden]{display:none;}
.lightbox__dialog{position:relative; display:block; text-align:center;}
.lightbox__close{position:fixed; top:clamp(12px,2vw,22px); right:clamp(12px,2vw,22px); z-index:2; display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--text-strong); border:1px solid var(--border); border-radius:var(--radius-pill); padding:10px 18px; font-family:var(--font-display); font-weight:600; font-size:14.5px; line-height:1; cursor:pointer; box-shadow:var(--shadow-md); transition:background var(--transition-fast);}
.lightbox__close:hover{background:var(--surface-soft);}
.lightbox__close svg{width:17px; height:17px;}
/* le document occupe la place disponible à l'écran, sans jamais être rogné */
.lightbox__img{display:block; margin:0 auto; max-width:96vw; max-height:94vh; width:auto; height:auto; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); background:#fff;}
body.has-lightbox{overflow:hidden;}

/* Programme de formation : les 2 pages A4 côte à côte, comme une double page A3 paysage */
.lightbox--spread{padding:clamp(8px,1.4vw,18px);}
.lightbox__spread{display:flex; align-items:center; justify-content:center; gap:clamp(8px,1.2vw,16px);}
.lightbox__spread img{display:block; width:auto; height:auto; max-width:calc(50vw - 22px); max-height:94vh; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); background:#fff;}
/* écran étroit ou en portrait : les pages s'empilent et la fenêtre défile */
@media (max-width:900px), (orientation:portrait){
  .lightbox--spread{align-items:flex-start; overflow:auto;}
  .lightbox__spread{flex-direction:column; gap:14px; padding:54px 0 12px;}
  .lightbox__spread img{max-width:min(94vw,760px); max-height:none;}
}

/* ==========================================================================
   18 quater. CONTENU DÉPLIÉ DES ATELIERS EN ENTREPRISE
   Trois natures de contenu, trois traitements : un sommaire de séance,
   ce que l'atelier apporte, et les faits pratiques. Les coches sont réservées
   aux bénéfices, sinon toute la page se lit comme une seule longue liste.
   ========================================================================== */
.therapy__more--pro > :first-child{margin-top:0;}
.therapy__more--pro h4{display:flex; align-items:center; gap:11px; font-size:17px; margin:34px 0 14px;}
.therapy__more--pro h4::before{content:""; flex:none; width:10px; height:10px; border-radius:50%; background:var(--gradient-sunset);}

/* le programme est un sommaire : puces sobres, deux colonnes, panneau discret */
.syllabus{list-style:none; margin:0; padding:20px 24px; background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius-lg); columns:2; column-gap:36px;}
.syllabus li{break-inside:avoid; position:relative; margin:0 0 11px; padding-left:19px; font-size:15.5px; line-height:1.65; color:var(--text-body);}
.syllabus li:last-child{margin-bottom:0;}
/* La pastille est definie ici, AVANT la variante numerotee : a specificite
   egale c'est la derniere regle qui gagne, et la pastille se posait sur la
   premiere lettre des listes a numeros (vu par Heloise le 20/08). */
.syllabus li::before{content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,var(--green-400),var(--gold-500));}
/* Variante numerotee : meme panneau, mais l'ordre des modules est signifiant,
   on garde donc les chiffres au lieu de la puce ronde. */
.syllabus--num{list-style:decimal; padding-left:44px;}
.syllabus--num li{padding-left:4px;}
.syllabus--num li::before{content:none;}
.syllabus--num li::marker{color:var(--green-600); font-family:var(--font-display); font-weight:700;}
@media (max-width:760px){ .syllabus{columns:1;} }

/* ce que l'atelier apporte : panneau vert doux, les coches gardent leur sens */
.pro-panel{padding:19px 24px; border-radius:var(--radius-lg); background:var(--color-accent-soft); border:1px solid rgba(113,162,58,.24);}
.pro-panel .benefits{margin:0;}
.pro-panel .benefits li{margin-bottom:11px;}
.pro-panel .benefits li:last-child{margin-bottom:0;}

/* ==========================================================================
   18 ter. GALERIE 3D (nos locaux) — cylindre tournant à la souris
   Sans JS, les emplacements s'affichent simplement en ligne : rien ne se perd.
   ========================================================================== */
.gallery3d{margin-top:clamp(22px,3vw,32px);}
.gallery3d__stage{position:relative; height:clamp(280px,32vw,400px); overflow:hidden; border-radius:var(--radius-2xl); border:1px solid var(--border); background:linear-gradient(155deg,#fff,var(--orange-50));}
.gallery3d__ring{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; height:100%; padding:18px; overflow:auto;}
.gallery3d__card{margin:0; width:190px;}
.gallery3d__card .photo-frame{aspect-ratio:4/3; box-shadow:var(--shadow-md);}
.gallery3d__controls{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:16px;}
.gallery3d__nav{width:44px; height:44px; flex:none; border-radius:50%; border:1.5px solid var(--border-strong); background:var(--surface-card); color:var(--text-strong); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:color var(--transition-fast) var(--ease-soft), border-color var(--transition-fast) var(--ease-soft);}
.gallery3d__nav:hover{border-color:var(--color-primary); color:var(--color-primary-ink);}
.gallery3d__nav svg{width:19px; height:19px;}
.gallery3d__hint{margin:0; font-size:14px; color:var(--text-muted); text-align:center;}

/* avec JS : les cartes sont posées sur un cylindre que l'on fait tourner */
.gallery3d.is-3d .gallery3d__stage{perspective:1100px;}
.gallery3d.is-3d .gallery3d__ring{display:block; position:absolute; inset:0; padding:0; overflow:visible; transform-style:preserve-3d; will-change:transform; cursor:grab; touch-action:pan-y;}
.gallery3d.is-3d .gallery3d__ring:active{cursor:grabbing;}
.gallery3d.is-3d .gallery3d__card{position:absolute; top:50%; left:50%; width:auto; backface-visibility:hidden;}
.gallery3d.is-3d .gallery3d__card .photo-frame{height:100%; aspect-ratio:auto;}
.gallery3d.is-3d .gallery3d__card img{width:100%; height:100%; object-fit:cover;}

/* ==========================================================================
   18 bis. DOMAINES DE FORMATION (un bloc par famille, sur toute la largeur)
   ========================================================================== */
.domains{display:flex; flex-direction:column; gap:clamp(16px,2.2vw,24px);}
.domain{background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-2xl); box-shadow:var(--shadow-sm); padding:clamp(22px,2.8vw,32px);}
/* Medaillon cale en haut, sur la ligne du titre : centre verticalement, il decrochait
   d'autant plus que le bloc etait haut (12 px sur le bloc le plus court, 40 px sur le
   plus long), et les 4 medaillons n'etaient alignes sur rien. Le bouton, lui, reste
   centre dans la hauteur du bloc. */
.domain__head{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(16px,2vw,26px); align-items:start;}
/* Deux classes volontairement : .therapy__toggle, declaree plus bas dans le fichier,
   impose margin-top:22px et gagnait sur le .domain__toggle{margin-top:0} a une classe.
   Cette marge decalait le bouton de 11 px sous l'axe du bloc. */
.domain__head .domain__toggle{align-self:center; margin-top:0;}
/* même médaillon que les cartes de service du site : dégradé de la charte, icône blanche */
.domain__medallion{width:62px; height:62px; border-radius:18px; flex:none; display:inline-flex; align-items:center; justify-content:center; color:#fff; box-shadow:var(--shadow-sm); background:var(--gradient-sunset);}
.domain__medallion[data-tone="green"]{background:linear-gradient(135deg,var(--green-400),var(--green-600));}
.domain__medallion[data-tone="gold"]{background:linear-gradient(135deg,var(--gold-400),var(--gold-600));}
.domain__medallion svg{width:28px; height:28px;}
.domain__title{font-family:var(--font-display); font-size:clamp(19px,2.1vw,23px); line-height:1.25; margin:0 0 7px; color:var(--text-strong);}
.domain__desc{margin:0; color:var(--text-muted); font-size:15.5px; line-height:1.7;}
/* Ligne « a qui ca s'adresse » : verte et detachee, sinon elle se lisait dans la
   continuite du paragraphe du dessus et les deux ne formaient qu'un pave de 4 lignes. */
/* Orange fonce (700) et non l'orange vif de la charte (500) : sur le fond clair des
   cartes, le 500 tombe a 2,5:1 de contraste, sous le minimum lisible de 4,5:1. */
.domain__desc--sub{margin-top:11px; font-size:14.5px; line-height:1.6; color:var(--orange-700); font-weight:500;}
/* le bouton du domaine est parfois un lien direct vers une page (bilan de compétences) */
.domain__toggle{margin-top:0; white-space:nowrap; text-decoration:none;}
.domain__list{display:flex; flex-direction:column; gap:12px; padding-top:24px;}
/* une formation = une ligne cliquable, qui ouvre son programme ou mène au contact */
.course{display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; text-align:left; padding:16px 20px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-soft); color:inherit; text-decoration:none; font:inherit; cursor:pointer; transition:border-color var(--transition-fast) var(--ease-soft), background var(--transition-fast) var(--ease-soft), box-shadow var(--transition-fast) var(--ease-soft);}
.course:hover{border-color:var(--color-primary); background:var(--surface-card); box-shadow:var(--shadow-sm);}
.course__name{display:block; font-family:var(--font-display); font-weight:600; font-size:16.5px; color:var(--text-strong);}
.course__meta{display:block; margin-top:4px; font-size:14.5px; line-height:1.6; color:var(--text-muted);}
/* Ligne sans programme : l'encadre n'est pas cliquable, seul son bouton l'est.
   Sans cette variante, le survol continuerait a l'annoncer comme un lien. */
.course--statique{cursor:default;}
.course--statique:hover{border-color:var(--border); background:var(--surface-soft); box-shadow:none;}
.course__cta{display:inline-flex; align-items:center; gap:8px; flex:none; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--color-primary-ink);}
.course__cta svg{width:16px; height:16px;}
/* Programme d'une formation, déplié sous son intitulé (2026-08-12).
   Le texte vit dans la page (lisible par Google et les assistants) mais reste replié
   pour ne pas allonger la page ; le mécanisme est celui de [data-reveal-toggle].
   Sans JavaScript, le programme s'affiche déplié : rien n'est perdu. */
/* Note de bas de catégorie tarifaire (renvoi vers les programmes détaillés) */
.tarif-cat__note{margin:14px 0 0; padding-top:14px; border-top:1px dashed var(--border); color:var(--text-muted); font-size:14.5px; line-height:1.65;}
.course-item{display:flex; flex-direction:column;}
.course-item .course{border-bottom-left-radius:0; border-bottom-right-radius:0;}
.course-item .course[aria-expanded="false"]{border-bottom-left-radius:var(--radius-lg); border-bottom-right-radius:var(--radius-lg);}
.course-item .course[aria-expanded="true"]{border-color:var(--color-primary); background:var(--surface-card); border-bottom-color:transparent;}
.course-item .course[aria-expanded="true"] .course__cta svg{transform:rotate(180deg);}
.course__cta svg{transition:transform var(--transition-base) var(--ease-soft);}
.course__reveal{overflow:hidden; transition:height var(--transition-base) var(--ease-soft);}
.course__prog{border:1px solid var(--color-primary); border-top:0; border-radius:0 0 var(--radius-lg) var(--radius-lg); background:var(--surface-card); padding:clamp(18px,2.2vw,26px) clamp(18px,2.2vw,24px);}
.course__prog h4{font-family:var(--font-display); font-size:16px; color:var(--text-strong); margin:22px 0 10px;}
.course__prog h4:first-child{margin-top:0;}
.course__prog p{margin:0 0 12px; color:var(--text-body); font-size:15.5px; line-height:1.7;}
.course__prog ul{margin:0 0 14px; padding-left:0; list-style:none; display:grid; gap:7px;}
.course__prog li{position:relative; padding-left:22px; color:var(--text-body); font-size:15px; line-height:1.65;}
.course__prog li::before{content:""; position:absolute; left:6px; top:9px; width:6px; height:6px; border-radius:50%; background:var(--green-500,var(--green-600));}
/* Grille alignee : les 7 faits se rangent en colonnes qui se repondent d'une
   ligne a l'autre. En flex, chaque fait prenait sa largeur naturelle et les
   intitules de la 2e ligne tombaient n'importe ou. */
.course__facts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; gap:14px 26px; margin:0 0 18px; padding:14px 18px; border-radius:var(--radius-lg); background:var(--color-accent-soft); border:1px solid rgba(113,162,58,.24);}
.course__facts div{font-size:14.5px; line-height:1.5;}
.course__facts dt{font-family:var(--font-display); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--green-700); margin:0 0 2px;}
.course__facts dd{margin:0; color:var(--text-strong);}
.course__dl{display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:4px; max-width:100%;}

/* ===== Note "dates et sur mesure" du centre de formations =====
   Posee sous le chapeau des thematiques : dit ou trouver les dates et que les
   sessions peuvent etre organisees a la demande. */
.dates-note{
  max-width:840px; margin:0 auto clamp(30px,4vw,44px); padding:22px clamp(20px,2.6vw,28px);
  border-radius:var(--radius-xl); background:var(--surface-soft); border:1px solid var(--border);
  display:flex; gap:18px; align-items:flex-start; text-align:left;
}
.dates-note__ic{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--color-accent-soft); color:var(--green-700); border:1px solid rgba(113,162,58,.24);
}
.dates-note__ic svg{width:22px; height:22px;}
.dates-note__body{min-width:0;}
.dates-note p{margin:0 0 14px; color:var(--text-body); font-size:15.5px; line-height:1.7;}
.dates-note p:last-child{margin-bottom:0;}
.dates-note__actions{display:flex; flex-wrap:wrap; gap:10px;}
@media (max-width:640px){ .dates-note{flex-direction:column; gap:14px;} }

/* ===== Agenda des formations =====
   Les sessions sont ECRITES dans la page (lisibles par Google et les assistants) ;
   le JavaScript ne fait que masquer celles qui ne repondent pas aux filtres.
   Sans JavaScript, l'agenda complet reste visible : rien n'est perdu. */
.agenda-filters{display:grid; gap:16px; margin-bottom:clamp(26px,3.4vw,38px);}
.filter-group{display:flex; flex-wrap:wrap; align-items:center; gap:9px;}
.filter-group__label{
  font-family:var(--font-display); font-weight:600; font-size:12.5px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--green-700); margin-right:4px;
}
.filter-chip{
  font-family:var(--font-body); font-size:14.5px; line-height:1; color:var(--text-body);
  padding:10px 16px; border-radius:999px; border:1px solid var(--border); background:var(--surface-card);
  cursor:pointer; transition:border-color var(--transition-base) var(--ease-soft), background var(--transition-base) var(--ease-soft), color var(--transition-base) var(--ease-soft);
}
.filter-chip:hover{border-color:var(--color-primary); color:var(--text-strong);}
.filter-chip[aria-pressed="true"]{background:var(--color-primary-ink); border-color:var(--color-primary); color:#fff;}
.session-list{display:grid; gap:16px;}
.session{
  display:grid; grid-template-columns:132px minmax(0,1fr); gap:clamp(18px,2.4vw,28px); align-items:start;
  padding:clamp(20px,2.4vw,26px); border-radius:var(--radius-xl);
  border:1px solid var(--border); background:var(--surface-card);
}
/* L'encadre porte UNE LIGNE PAR JOURNEE : une session peut courir sur deux mois
   (les week-ends de "Creer un site web"), un seul jour affiche serait faux. */
.session__when{
  display:grid; justify-items:center; align-content:start; gap:7px; padding:14px 12px;
  border-radius:var(--radius-lg); background:var(--color-accent-soft); border:1px solid rgba(113,162,58,.24);
}
.session__slot{display:flex; align-items:baseline; gap:6px; font-family:var(--font-display); white-space:nowrap;}
.session__slot b{font-weight:700; font-size:22px; line-height:1; color:var(--text-strong);}
.session__slot span{font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--green-700);}
.session__year{
  font-size:13.5px; color:var(--text-muted); width:100%; text-align:center;
  margin-top:2px; padding-top:7px; border-top:1px solid rgba(113,162,58,.28);
}
/* Exception a la regle du dessus, pour les parcours mensuels de dix journees :
   les afficher toutes deborde des 132 px de la colonne. Essaye sur deux colonnes
   le 19/08, la seconde se posait par-dessus le texte de la carte. L'encadre porte
   donc le compte, le rythme et la periode ; les dix dates sont ecrites en toutes
   lettres dans le paragraphe juste a cote, donc rien n'est cache. */
.session__rythme{
  font-family:var(--font-display); font-weight:600; font-size:13px;
  color:var(--green-700); text-align:center; line-height:1.3;
}
.session__title{font-family:var(--font-display); font-weight:700; font-size:clamp(18px,2vw,21px); line-height:1.25; color:var(--text-strong); margin:0 0 8px;}
.session__dates{margin:0 0 12px; color:var(--text-body); font-size:15.5px; line-height:1.6;}
.session__facts{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-wrap:wrap; gap:8px 10px;}
.session__facts li{font-size:14px; line-height:1; color:var(--text-body); padding:7px 12px; border-radius:999px; background:var(--surface-soft); border:1px solid var(--border);}
.session__actions{display:flex; flex-wrap:wrap; gap:9px; margin:0;}
/* .session est en display:grid : sans cette regle, l'attribut hidden pose par
   le filtre ne masquerait rien (une regle display l'emporte sur [hidden]). */
.session[hidden]{display:none;}
/* Ligne 2 des filtres : elle depend du type choisi, d'ou le leger retrait
   qui la rattache visuellement a la ligne du dessus. */
.filter-group--sub{padding-left:14px; border-left:2px solid rgba(113,162,58,.28);}
/* le 3e niveau se decale encore d'un cran : on voit qu'il depend du domaine */
.filter-group--sub2{margin-left:16px; border-left-color:rgba(113,162,58,.18);}
.filter-group[hidden]{display:none;}

/* Surtitre du bloc des ateliers, qui n'ont pas encore de dates */
.agenda-subhead{
  font-family:var(--font-display); font-weight:700; font-size:clamp(17px,1.9vw,20px);
  color:var(--green-700); margin:clamp(20px,2.6vw,30px) 0 2px;
}
.agenda-subhead[hidden]{display:none;}

/* Atelier sans date : meme carte, mais l'encadre annonce l'attente au lieu
   d'afficher des journees. Le ton reste celui des sessions datees, en plus sobre. */
.session--a-venir .session__when--a-venir{
  background:var(--surface-soft); border-color:var(--border);
  align-content:center; min-height:86px;
}
.session__soon{
  display:flex; align-items:center; gap:8px; text-align:center;
  font-family:var(--font-display); font-weight:600; font-size:14px; line-height:1.25;
  color:var(--text-muted);
}
.session__soon svg{flex:none; width:20px; height:20px;}

.agenda-empty{
  margin:0; padding:28px; text-align:center; color:var(--text-muted); font-size:15.5px;
  border:1px dashed var(--border); border-radius:var(--radius-xl); background:var(--surface-soft);
}
@media (max-width:640px){
  .session{grid-template-columns:1fr; gap:14px;}
  /* en mobile l'encadre se couche : les journees se suivent et passent a la ligne */
  .session__when{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; padding:11px 14px;}
  .session--a-venir .session__when--a-venir{min-height:0; align-items:center;}
  .session__slot b{font-size:19px;}
  .session__year{width:auto; margin-top:0; padding-top:0; border-top:0;}
}
@media (max-width:980px){ .course__facts{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:760px){ .course__facts{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:640px){
  .course{flex-direction:column; align-items:flex-start; gap:10px;}
  .course__facts{gap:12px 18px;}
}
@media (max-width:460px){ .course__facts{grid-template-columns:1fr;} }
@media (max-width:760px){
  .domain__head{grid-template-columns:auto minmax(0,1fr);}
  .domain__head .domain__toggle{grid-column:1 / -1; justify-self:start; align-self:start; margin-top:6px;}
  .course{flex-direction:column; align-items:flex-start; gap:10px;}
}

/* Photo à gauche, texte à droite : bloc sur toute la largeur de la page,
   la photo prend exactement la hauteur de la colonne de texte (encadré compris) */
.text-figure{display:grid; grid-template-columns:min(38%,440px) minmax(0,1fr); gap:44px; align-items:stretch; margin-top:clamp(36px,5vw,56px);}
.text-figure__media{margin:0;}
/* pas de ratio imposé ici : le cadre s'étire sur la hauteur de la colonne texte */
.text-figure__media .photo-frame{height:100%; aspect-ratio:auto;}
.text-figure h2{font-size:clamp(28px,3.3vw,36px); margin-bottom:18px;}
.text-figure__body{display:flex; flex-direction:column;}
.text-figure__body > :first-child{margin-top:0;}
.text-figure__body > :last-child{margin-bottom:0;}
.text-figure__note{margin-top:clamp(18px,2.4vw,28px);}
.text-figure__note h3{font-size:19px; margin:0 0 10px;}
.text-figure__note p{margin:0; font-size:15.5px; line-height:1.7;}
/* sous 980px la page entière passe en une colonne : la photo repasse au-dessus du texte,
   sinon elle s'étirerait en bande verticale et le cadrage mangerait les personnages */
@media (max-width:980px){
  .text-figure{grid-template-columns:1fr; gap:24px;}
  /* la photo ne prend pas toute la largeur de la tablette, sinon elle fait 1100px de haut */
  .text-figure__media{max-width:min(100%,420px); margin-inline:auto;}
  .text-figure__media .photo-frame{height:auto; aspect-ratio:4/5;}
}
.benefits li > svg{flex:none; width:26px; height:26px; padding:5px; border-radius:50%; background:var(--color-accent-soft); color:var(--green-600); margin-top:1px;}
.aside-card{position:sticky; top:96px;}
/* Deux boutons pleine largeur empiles dans la carte laterale : le second respire. */
.aside-card .btn--block + .btn--block{margin-top:10px;}
.practical{display:flex; flex-direction:column; gap:16px; margin-bottom:22px;}
.practical__row{display:flex; gap:13px; align-items:center;}
.practical__icon{width:40px; height:40px; border-radius:12px; background:var(--orange-50); color:var(--color-primary-ink); display:inline-flex; align-items:center; justify-content:center; flex:none;}
.practical__icon svg{width:19px; height:19px;}
.practical__row k{display:block; font-size:12.5px; color:var(--text-subtle); text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-display); font-weight:600; font-style:normal;}
.practical__row b{font-family:var(--font-display); color:var(--text-strong);}
.aside-note{text-align:center; font-size:13.5px; color:var(--text-muted); margin:14px 0 0;}

/* method chips */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 8px;}
.chip{display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:var(--radius-pill); background:var(--surface-soft); border:1px solid var(--border); font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--text-body);}
.chip svg{width:15px; height:15px; color:var(--color-primary-ink);}

/* prose blocks */
.prose{max-width:68ch;}
.prose h2{margin-top:1.6em;}
.prose h3{margin-top:1.4em; font-size:var(--text-xl);}
.prose ul{padding-left:1.2em; margin:0 0 1.2em;}
.prose ul li{margin-bottom:.5em;}
.prose p{font-size:17px; line-height:1.78;}

/* ==========================================================================
   19. CONTACT
   ========================================================================== */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start;}
.contact-form{display:grid; gap:18px; max-width:540px;}
.contact-form .row-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.contact-info{display:flex; flex-direction:column; gap:18px;}
.info-row{display:flex; gap:13px; align-items:center;}
.info-row__icon{width:42px; height:42px; border-radius:12px; background:#fff; color:var(--color-primary-ink); display:inline-flex; align-items:center; justify-content:center; flex:none; box-shadow:var(--shadow-xs);}
.info-row__icon svg{width:19px; height:19px;}
.info-row span{color:var(--text-body); font-size:15.5px;}
.map-card{border-radius:var(--radius-lg); overflow:hidden; height:240px; position:relative; box-shadow:var(--shadow-sm);}
.map-card iframe{width:100%; height:100%; border:0; display:block; filter:saturate(.92);}
.form-success{display:flex; gap:14px; align-items:center;}
.form-success__icon{width:46px; height:46px; border-radius:50%; background:var(--color-success-soft); color:var(--color-success); display:inline-flex; align-items:center; justify-content:center; flex:none;}
.form-success__icon svg{width:22px; height:22px;}
.is-hidden{display:none !important;}

/* ==========================================================================
   20. FOOTER
   ========================================================================== */
.site-footer{background:linear-gradient(180deg,#423a30 0%,#2a251f 100%); color:#fff; position:relative; overflow:hidden;}
.site-footer__rule{height:4px; background:var(--gradient-colibri);}
.site-footer__motif{position:absolute; right:-56px; bottom:-40px; width:340px; opacity:.07; pointer-events:none;}
.footer-inner{max-width:var(--container-xl); margin:0 auto; padding:64px var(--gutter) 32px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; position:relative;}
.footer-brand__logo{position:relative; display:inline-block; margin-bottom:24px;}
.footer-brand__logo::before{content:""; position:absolute; inset:-26px -44px; background:radial-gradient(closest-side,rgba(248,162,78,.28),transparent 72%); filter:blur(6px);}
.footer-brand__logo img{position:relative; height:98px; filter:drop-shadow(0 8px 20px rgba(0,0,0,.4));}
.footer-brand p{max-width:320px; color:rgba(255,255,255,.92); line-height:1.7; font-size:15.5px;}
.footer-social{display:flex; gap:10px; margin-top:20px;}
.footer-social a{width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.10); display:inline-flex; align-items:center; justify-content:center; color:#fff; transition:background var(--transition-base) var(--ease-soft), transform var(--transition-base) var(--ease-soft);}
.footer-social a:hover{background:rgba(255,255,255,.22); color:#fff; transform:translateY(-2px);}
.footer-social svg{width:20px; height:20px;}
.footer-col h2{color:#fff; font-family:var(--font-display); font-size:15px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 16px;}
.footer-col a{display:block; color:rgba(255,255,255,.92); padding:6px 0; font-size:15.5px;}
.footer-col a:hover{color:#fff;}
.footer-contact{display:flex; flex-direction:column; gap:12px; color:rgba(255,255,255,.92); font-size:15.5px;}
.footer-contact span{display:flex; gap:10px; align-items:flex-start;}
.footer-contact svg{width:18px; height:18px; flex:none; margin-top:3px;}
.footer-contact a{display:inline; padding:0;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.22);}
.footer-bottom__inner{max-width:var(--container-xl); margin:0 auto; padding:18px var(--gutter); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; color:rgba(255,255,255,.85); font-size:13.5px;}

/* ===== Qualiopi : bandeau pied de page (toutes pages) ===== */
/* Tailles calibrées sur l'exigence du certificateur (retour Effiqualis du 2026-08-10) :
   le logo doit être lisible, et la mention ci-contre doit rester de taille équivalente
   ou légèrement plus petite que le « processus certifié » du logo. Dans l'image,
   « processus certifié » mesure 31,4 px pour 760 px de large : à 360 px d'affichage
   il rend ~14,9 px, contre 12,5 px pour la mention. Toute réduction du logo doit donc
   s'accompagner d'une réduction de la mention (voir les media queries ci-dessous). */
.footer-qualiopi{max-width:var(--container-xl); margin:0 auto; padding:26px var(--gutter); display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:center; border-top:1px solid rgba(255,255,255,.14); position:relative; z-index:2;}
.footer-qualiopi__plate{flex:none; max-width:100%; background:#fff; border-radius:0; padding:10px 12px; box-shadow:0 2px 12px rgba(0,0,0,.2);}
.footer-qualiopi__plate img{width:360px; max-width:100%; height:auto; display:block;}
.footer-qualiopi__body{max-width:460px;}
/* Mention et gras au meme blanc : a taille egale (12,5 px), une opacite plus basse
   sur le texte courant le faisait paraitre plus petit que le gras (retour Julien 14/08). */
.footer-qualiopi p{margin:0; color:#fff; font-size:12.5px; line-height:1.55;}
.footer-qualiopi strong{color:#fff; font-weight:600;}
/* Lien vers le certificat : volontairement calé sur la taille de la mention (12,5 px),
   donc sous le « processus certifié » du logo, pour ne pas concurrencer le bandeau. */
/* Message d'echec d'envoi : il doit se voir, c'est le seul moment ou le
   visiteur apprend que son message n'est pas parti. */
.form-erreur{margin:14px 0 0; padding:12px 14px; border-radius:var(--radius-lg);
  background:#fdeceb; border:1px solid #f0b8b3; color:#8a2b22; font-size:15px; line-height:1.55;}

/* Piege a robots du formulaire : hors ecran plutot que display:none,
   que certains automates savent detecter. Jamais atteint au clavier. */
.pot-de-miel{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ===== Reglages rapatries des pages (2026-08-18) =====
   Ils etaient ecrits en dur dans le HTML : invisibles pour la feuille de
   style, donc introuvables le jour d'un changement de charte. */
.h-section{font-size:22px; margin:0 0 18px;}
.h-bloc{font-size:20px; margin:0 0 10px;}
.h-bloc--serre{font-size:20px; margin:0 0 8px;}
.p-repere{margin:0 0 10px; font-size:14px; font-weight:600; color:var(--green-700);}
.p-courant{margin:0 0 16px; font-size:15.5px; line-height:1.65;}
.p-courant--12{margin:0 0 12px; font-size:15.5px; line-height:1.65;}
.p-courant--nu{margin:0; font-size:15.5px; line-height:1.65;}
.p-petit{font-size:15px;}
.service__medallion.medallion--sunset{background:var(--gradient-sunset); margin-bottom:14px;}
.service__medallion.medallion--vert{background:linear-gradient(135deg,var(--green-400),var(--green-600)); margin-bottom:14px;}
.service__medallion.medallion--or{background:linear-gradient(135deg,var(--gold-400),var(--gold-600)); margin-bottom:14px;}
.rangee-centree{justify-content:center; margin:0;}
.p-corps{color:var(--text-body); font-size:15.5px;}
.lead-large{font-size:17px; line-height:1.7; max-width:50ch; margin-bottom:26px;}

/* Mention legale d'organisme de formation : le numero de declaration doit
   figurer la ou le site se presente comme certifie. */
.footer-qualiopi__body p.footer-qualiopi__nda{margin:10px 0 12px; font-size:13px; line-height:1.6; color:rgba(255,255,255,.82);}
.footer-qualiopi__nda b{color:#fff; font-weight:600;}
.footer-qualiopi__doc{display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:7px 15px; border:1px solid rgba(255,255,255,.34); border-radius:999px; font-family:var(--font-display); font-weight:600; font-size:12.5px; line-height:1; color:#fff; text-decoration:none; transition:background-color .2s ease, border-color .2s ease;}
.footer-qualiopi__doc svg{width:15px; height:15px; flex:none;}
.footer-qualiopi__doc:hover,.footer-qualiopi__doc:focus-visible{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.66);}
@media(max-width:760px){
  .footer-qualiopi{justify-content:flex-start; gap:16px;}
  .footer-qualiopi__plate{padding:8px 10px;}
  .footer-qualiopi p{font-size:11.5px;}
  .footer-qualiopi__doc{font-size:11.5px; padding:6px 13px; margin-top:10px;}
}
@media(max-width:360px){
  .footer-qualiopi{padding-inline:14px;}
  .footer-qualiopi__plate{padding:6px 8px;}
  .footer-qualiopi p{font-size:10.5px;}
  .footer-qualiopi__doc{font-size:10.5px; padding:6px 12px;}
}

/* ===== Qualiopi : bloc dédié (pages formation / bilan / tarifs) ===== */

/* Citation illustrée (espace particuliers) */
.quote-feature{display:grid; grid-template-columns:minmax(0,290px) 1fr; align-items:center; gap:clamp(28px,4vw,52px); max-width:900px; margin:0 auto;}
.quote-feature__media{position:relative; aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden; background:var(--gradient-colibri); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);}
.quote-feature__media > img{display:block; width:100%; height:100%; object-fit:cover;}
.quote-feature__body{position:relative;}
.quote-feature__text{font-family:var(--font-script); font-style:normal; font-weight:600; font-size:clamp(26px,3vw,34px); line-height:1.3; color:var(--text-strong); margin:0;}
.quote-feature__text::before{content:"\201C"; color:var(--green-600); opacity:.55; font-size:1.35em; line-height:0; vertical-align:-.35em; margin-right:.06em;}
.quote-feature__text::after{content:"\201D"; color:var(--green-600); opacity:.55; font-size:1.35em; line-height:0; vertical-align:-.5em; margin-left:.04em;}
.quote-feature__author{font-family:var(--font-script); font-weight:600; font-size:25px; color:var(--green-600); margin-top:14px; text-align:right;}
.quote-note{max-width:760px; margin:clamp(28px,4vw,40px) auto 0; text-align:center;}
.quote-note p{margin:0 0 16px; color:var(--text-body); font-size:16.5px; line-height:1.7;}
.quote-note p:last-child{margin-bottom:0;}
/* Meme degrade doux que les encadres de mise en avant du site (vert pale vers
   orange pale), plutot qu'une carte blanche : le bloc se voit sans crier. */
.team-note{margin-top:clamp(34px,5vw,52px); background:linear-gradient(150deg,var(--green-50),var(--orange-50)); border:1px solid rgba(113,162,58,.24); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:clamp(24px,3.4vw,38px);}
.team-note__text p{margin:0 0 16px; color:var(--text-body); font-size:16.5px; line-height:1.7;}
.team-note__text p:last-child{margin-bottom:0;}
.team-note .btn{display:flex; width:fit-content; margin:26px auto 0;}
/* Colonne + marge automatique sur le lien : les « Voir son parcours » des trois
   cartes tombent a la meme hauteur, quelle que soit la longueur des biographies. */
.profile{display:flex; flex-direction:column; background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:30px 26px; text-align:center;}
.profile__avatar{width:96px; height:96px; border-radius:50%; margin:0 auto 16px; background:var(--gradient-colibri); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.profile__avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.profile__avatar--empty i, .profile__avatar--empty svg{width:38px; height:38px; color:#fff; opacity:.92;}
.profile__name{font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--text-strong); margin:0 0 4px;}
.profile__role{font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--green-600); margin:0 0 12px;}
.profile__bio{color:var(--text-muted); font-size:14.5px; line-height:1.6; margin:0;}
/* Carte profil cliquable vers la fiche du formateur (2026-08-12).
   Un seul lien tabulable (le nom) dont le ::after couvre toute la carte : la carte
   entière est cliquable sans multiplier les liens pour les lecteurs d'écran.
   Le :hover est écrit .profile.profile--link pour passer devant .reveal.is-visible. */
.profile--link{position:relative; transition:transform var(--transition-base) var(--ease-soft), box-shadow var(--transition-base) var(--ease-soft), border-color var(--transition-base) var(--ease-soft);}
.profile.profile--link:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--orange-200);}
.profile__name a{color:inherit; text-decoration:none;}
.profile__name a::after{content:""; position:absolute; inset:0; border-radius:var(--radius-lg);}
.profile__name a:focus-visible::after{outline:3px solid var(--green-600); outline-offset:4px;}
.profile__more{display:inline-flex; align-items:center; gap:7px; align-self:center; margin:auto 0 0; padding-top:15px; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--green-600);}
.profile__more i, .profile__more svg{width:16px; height:16px; transition:transform var(--transition-base) var(--ease-soft);}
.profile.profile--link:hover .profile__more i, .profile.profile--link:hover .profile__more svg{transform:translateX(4px);}
@media (prefers-reduced-motion:reduce){
  .profile--link, .profile__more i, .profile__more svg{transition:none;}
  .profile.profile--link:hover{transform:none;}
  .profile.profile--link:hover .profile__more i, .profile.profile--link:hover .profile__more svg{transform:none;}
}
@media(max-width:680px){
  .quote-feature{grid-template-columns:1fr; text-align:center; max-width:420px;}
  .quote-feature__media{width:230px; margin:0 auto;}
  .quote-feature__author{text-align:center;}
}
.footer-bottom__inner a{color:rgba(255,255,255,.85);}
.footer-bottom__inner a:hover{color:#fff;}

/* ==========================================================================
   21. PHOTO PLACEHOLDERS (stylés — à remplacer par vraies photos)
   ========================================================================== */
.photo-frame{position:relative; border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-lg); background:linear-gradient(150deg,var(--green-100),var(--orange-50)); aspect-ratio:4/5;}
.photo-frame img{width:100%; height:100%; object-fit:cover;}
.photo-frame--placeholder{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--green-700); text-align:center; padding:24px;}
.photo-frame--placeholder svg{width:48px; height:48px; opacity:.6;}
.photo-frame--placeholder span{font-family:var(--font-display); font-weight:600; font-size:14px;}
.photo-frame__badge{position:absolute; left:16px; bottom:16px; background:rgba(255,255,255,.92); backdrop-filter:blur(4px); border-radius:var(--radius-pill); padding:8px 14px; font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--text-strong); box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:7px;}
.photo-frame__badge svg{width:15px; height:15px; color:var(--color-primary-ink);}

/* feature row (text + visual alternating) */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center;}
.feature--reverse .feature__visual{order:-1;}
/* L'inverse : le bloc a la photo ecrite en premier, mais on veut la voir a droite.
   Sert a rattraper le quinconce quand un article est retire de la serie. */
.feature--photo-droite .feature__visual{order:1;}
.feature__visual{position:relative;}
/* Photo d'Héloïse réduite à ~2/3 (accueil + qui-suis-je) */
.feature__visual .photo-frame:not(.photo-frame--placeholder){max-width:66%; margin-inline:auto;}
@media (max-width:680px){.feature__visual .photo-frame:not(.photo-frame--placeholder){max-width:80%;}}
/* Photo de groupe (pros) : pleine largeur, pas la réduction 2/3 du portrait */
.feature__visual .photo-frame.photo-frame--full{max-width:100%;}
/* Portrait de formateur en attente de photo : le placeholder est exclu de la règle 2/3 ci-dessus,
   il occuperait donc toute la colonne. On lui rend la taille d'un portrait (fiches formateurs). */
.feature__visual .photo-frame--placeholder.photo-frame--portrait{max-width:66%; margin-inline:auto;}
@media (max-width:680px){.feature__visual .photo-frame--placeholder.photo-frame--portrait{max-width:80%;}}

/* ===== Thérapies : approches détaillées (une par approche, visuel + texte) ===== */
.approaches .branded-title{font-size:clamp(28px,3.3vw,36px); margin-bottom:clamp(28px,4vw,44px);}
.therapy{max-width:var(--container-lg); margin-inline:auto;}
.therapy + .therapy{margin-top:clamp(44px,6vw,76px); padding-top:clamp(44px,6vw,76px); border-top:1px solid var(--border);}
.therapy .feature{align-items:center;}
.therapy__title{font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.4vw,28px); line-height:1.2; color:var(--text-strong); margin:0 0 16px;}
.therapy .feature__text > p{margin:0 0 14px; color:var(--text-body);}
.therapy .feature__text > p:last-child{margin-bottom:0;}
.therapy .feature__visual .photo-frame.photo-frame--full{aspect-ratio:4/3; margin-inline:auto;}
/* Photos larges de l'ancien site (ateliers) : cadre 16:10 pour ne pas couper les personnes */
.therapy .feature__visual .photo-frame.photo-frame--wide{aspect-ratio:16/10;}

/* Schéma concept actions / émotions / pensées (therapies-breves, SVG inline) */
.concept-figure{margin:clamp(34px,5vw,56px) auto 0; max-width:960px;}
.concept-scroller{overflow-x:auto;}
.concept-svg{display:block; width:100%; height:auto;}
.concept-svg text{font-family:var(--font-display);}
.cs-sector{stroke:#fff; stroke-width:4;}
.cs-sector--top{fill:var(--green-100);}
.cs-sector--left{fill:var(--gold-300); fill-opacity:.5;}
.cs-sector--right{fill:var(--orange-200);}
.cs-core{fill:var(--white,#fff); stroke:var(--sand-300);}
.cs-core-div{stroke:var(--sand-300); stroke-width:1.5;}
.cs-core-label{fill:var(--orange-600); font-weight:600; font-size:14px;}
.cs-title{fill:var(--text-strong); font-weight:700; font-size:17px; text-decoration:underline; text-underline-offset:3px;}
.cs-body{fill:var(--text-body); font-size:14.5px;}
.cs-axis{fill:var(--text-muted); font-weight:600; font-size:16px; letter-spacing:.14em;}
.cs-big{font-weight:800; font-size:27px; letter-spacing:.04em;}
.cs-big--actions{fill:var(--green-700);}
.cs-big--emotions{fill:var(--gold-600);}
.cs-big--pensees{fill:var(--orange-600);}
.cs-arrow{fill:none; stroke:var(--text-muted); stroke-width:3; stroke-linecap:round;}
.cs-arrowhead{fill:var(--text-muted);}
.cs-dash{stroke:var(--text-subtle); stroke-width:2.5; stroke-dasharray:10 9;}
@media (max-width:760px){.concept-svg{min-width:680px;}}
.therapy .photo-frame--placeholder .photo-frame__badge{position:absolute; left:16px; bottom:16px;}
.therapy__toggle{display:inline-flex; align-items:center; gap:9px; margin-top:22px; padding:11px 22px; border-radius:var(--radius-pill); border:1.5px solid var(--border-strong); background:var(--surface-card); color:var(--text-strong); font-family:var(--font-display); font-weight:600; font-size:15px; cursor:pointer; transition:color var(--transition-fast) var(--ease-soft), border-color var(--transition-fast) var(--ease-soft);}
.therapy__toggle:hover{border-color:var(--color-primary); color:var(--color-primary-ink);}
.therapy__toggle svg{width:17px; height:17px; transition:transform .3s var(--ease-soft);}
.therapy__toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
.therapy__reveal{overflow:hidden; transition:height .34s var(--ease-soft);}
.therapy__more{max-width:820px; margin:0 auto; padding-top:clamp(20px,3vw,32px);}
.therapy__lead{font-family:var(--font-display); font-weight:600; font-size:clamp(17px,1.9vw,20px); line-height:1.5; color:var(--green-700); margin:0 0 18px;}
.therapy__more > p{margin:0 0 16px; color:var(--text-body);}
.therapy__quote{margin:26px 0; padding:clamp(22px,3vw,30px); background:var(--surface-soft); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); text-align:center;}
.therapy__quote p{margin:0; font-family:var(--font-script); font-weight:600; font-size:clamp(24px,3vw,30px); line-height:1.3; color:var(--text-strong);}
.therapy__quote blockquote{margin:0;}
.therapy__quote-author{margin-top:12px; font-family:var(--font-script); font-weight:600; font-size:22px; color:var(--green-600);}
.therapy__quote p::before{content:"\201C"; color:var(--green-600); opacity:.55; margin-right:.04em;}
.therapy__quote p::after{content:"\201D"; color:var(--green-600); opacity:.55; margin-left:.02em;}
.therapy__quote cite{display:block; margin-top:12px; font-family:var(--font-script); font-weight:600; font-style:normal; font-size:22px; color:var(--green-600);}
.therapy__acronym{display:grid; gap:10px; margin:0 0 20px;}
.therapy__acronym p{margin:0; color:var(--text-body);}
.acronym__letter{font-family:var(--font-display); font-weight:800; font-size:26px; line-height:1; vertical-align:-3px; margin-right:1px;}
.acronym__letter--p{color:var(--green-600);}
.acronym__letter--n{color:var(--gold-600);}
.acronym__letter--l{color:var(--orange-600);}
.therapy__venn{max-width:400px; margin:6px auto 26px;}
.therapy__venn svg{display:block; width:100%; height:auto;}
.therapy__venn text{font-family:var(--font-display);}
.venn-circle{fill:none; stroke-width:3;}
.venn-circle--psy{stroke:var(--green-500);}
.venn-circle--acu{stroke:var(--orange-400);}
.venn-lens{fill:var(--orange-400);}
.venn-label{font-weight:600; font-size:19px;}
.venn-label--psy{fill:var(--green-700);}
.venn-label--acu{fill:var(--orange-600);}
.venn-eft{fill:#fff; font-weight:700; font-size:21px; letter-spacing:.04em;}
.therapy__figure{margin:26px 0; padding:clamp(14px,2.2vw,22px); background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs);}
.therapy__figure img{display:block; width:100%; height:auto;}
.therapy__figure figcaption{margin-top:12px; text-align:center; font-size:14px; color:var(--text-muted);}
.therapy__more .benefits{margin:0 0 20px;}
.therapy__callout{margin-top:26px; padding:clamp(22px,3vw,30px) clamp(24px,3.4vw,34px); background:linear-gradient(150deg,var(--green-50),var(--orange-50)); border-radius:var(--radius-lg); box-shadow:var(--shadow-inset);}
.therapy__callout p{margin:0; font-family:var(--font-display); font-weight:600; font-size:clamp(16px,1.8vw,19px); line-height:1.55; color:var(--text-strong);}
.therapy__more h4{font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--text-strong); margin:26px 0 12px;}
.therapy__more h4:first-child{margin-top:0;}

/* ===== Bilan : voyage au fil de la rivière (photo de fond + tracé au scroll) ===== */
.journey{position:relative; background:var(--sand-100); overflow:hidden;}
.journey__bg{position:absolute; inset:0; overflow:hidden;}
.journey__bg img{display:block; width:100%; height:114%; object-fit:cover; will-change:transform;}
.journey__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(253,250,244,.94) 0%, rgba(253,250,244,.6) 12%, rgba(251,246,236,.52) 55%, rgba(253,250,244,.95) 100%);}
.journey__inner{position:relative;}
.journey .branded-title{justify-content:center; text-align:center; font-size:clamp(28px,3.3vw,36px); margin:0 0 12px;}
.journey__intro{max-width:640px; margin:0 auto; text-align:center; font-weight:var(--weight-medium); color:var(--warm-700);}
.journey__track{position:relative; max-width:960px; margin:clamp(38px,5vw,58px) auto 0;}
.journey__river{position:absolute; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none;}
.journey__bed{fill:none; stroke:rgba(253,250,244,.85); stroke-width:3.5; stroke-linecap:round; stroke-dasharray:.5 12;}
.journey__flow-shadow{fill:none; stroke:rgba(58,52,44,.26); stroke-width:11; stroke-linecap:round; transform:translateY(3px);}
.journey__flow{fill:none; stroke:url(#journey-grad); stroke-width:9; stroke-linecap:round;}
.journey__ripple{fill:none; stroke:rgba(255,255,255,.8); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:1 24; animation:journey-ripple 1.8s linear infinite;}
@keyframes journey-ripple{to{stroke-dashoffset:-25;}}
.journey__tip{opacity:0; transition:opacity .3s linear;}
.journey__tip-core{fill:#fff; stroke:rgba(58,52,44,.2); stroke-width:1;}
.journey__tip-halo{fill:rgba(255,255,255,.4); transform-box:fill-box; transform-origin:center; animation:tip-pulse 2.4s ease-in-out infinite;}
@keyframes tip-pulse{0%,100%{transform:scale(1); opacity:.9;} 50%{transform:scale(1.45); opacity:.35;}}
.journey__steps{list-style:none; margin:0; padding:14px 0 8px; position:relative; display:grid; gap:clamp(34px,5vw,58px);}
.journey-step{display:grid; grid-template-columns:1fr 118px 1fr; align-items:center;}
.journey-step__pin{grid-area:1/2; justify-self:center; position:relative; z-index:1; width:54px; height:54px; border-radius:var(--radius-circle); display:flex; align-items:center; justify-content:center; background:var(--pin,var(--green-600)); color:#fff; font-family:var(--font-display); font-weight:800; font-size:20px; box-shadow:inset 0 2px 6px rgba(255,255,255,.42), inset 0 -3px 7px rgba(0,0,0,.14), 0 0 0 5px rgba(255,255,255,.95), 0 14px 28px -10px rgba(58,52,44,.4), 0 6px 20px -4px var(--pin,var(--green-600)); transform:scale(.35); opacity:0; transition:transform .6s var(--ease-out) .28s, opacity .35s linear .28s;}
.journey-step__pin::after{content:""; position:absolute; inset:-6px; border-radius:var(--radius-circle); border:2px solid rgba(255,255,255,.9); opacity:0; pointer-events:none;}
.journey-step.is-visible .journey-step__pin{transform:scale(1); opacity:1;}
.journey-step.is-visible .journey-step__pin::after{animation:pin-ripple 1s var(--ease-out) .5s;}
@keyframes pin-ripple{0%{opacity:.9; transform:scale(.75);} 100%{opacity:0; transform:scale(2);}}
.journey-step__card{grid-area:1/1; background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(9px) saturate(1.05); backdrop-filter:blur(9px) saturate(1.05); border:1px solid rgba(255,255,255,.8); border-radius:var(--radius-xl); padding:clamp(22px,3vw,32px) clamp(22px,3.2vw,34px); box-shadow:var(--shadow-md);}
.journey-step:nth-child(even) .journey-step__card{grid-area:1/3;}
/* Entrée éditoriale : la carte glisse depuis sa rive, le pin pop ensuite */
.journey-step.reveal{opacity:1; transform:none;}
.journey-step .journey-step__card{opacity:0; transform:translate(calc(var(--ox,0px) + var(--slide,28px)), var(--oy,0px)); transition:opacity .65s var(--ease-out) .05s, transform .65s var(--ease-out) .05s;}
.journey-step.is-visible .journey-step__card{opacity:1; transform:translate(var(--ox,0px), var(--oy,0px));}
.journey-step:nth-child(odd) .journey-step__card{--slide:-28px;}
.journey-step h3{margin:0 0 10px; font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:.01em; line-height:1.3; color:var(--text-strong);}
.journey-step__kicker{display:block; font-family:var(--font-script); font-weight:600; font-size:27px; line-height:1.15; color:var(--ink,var(--green-700)); margin-bottom:3px;}
.journey-step p{margin:0; font-size:15.5px; line-height:1.68; color:var(--text-body);}
.journey__outro{display:flex; align-items:center; gap:12px; max-width:760px; margin:clamp(36px,5vw,54px) auto 0; padding:17px 28px; background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); border:1px solid rgba(255,255,255,.8); border-radius:var(--radius-pill); box-shadow:var(--shadow-md); font-family:var(--font-display); font-weight:600; font-size:15.5px; line-height:1.5; color:var(--text-strong);}
.journey__outro svg{flex:none; width:20px; height:20px; color:var(--green-600);}
/* Mode "le tracé suit la rivière de la photo" (desktop) : pins posés sur le lit réel */
.journey-step.journey-step--cardleft .journey-step__card{grid-area:1/1; --slide:-28px;}
.journey-step.journey-step--cardright .journey-step__card{grid-area:1/3; --slide:28px;}
.journey--map .journey__bg img{height:100%;}
.journey__track--map .journey-step{position:relative;}
.journey__track--map .journey-step__pin{grid-area:auto; position:absolute; top:50%; left:var(--px,50%); transform:translate(-50%,-50%) scale(.35);}
.journey__track--map .journey-step.is-visible .journey-step__pin{transform:translate(-50%,-50%) scale(1);}
/* Phases du bilan en 3 vignettes sur une ligne (au-dessus de la rivière) */
.phases-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px); align-items:stretch;}
.phase-card{display:flex; flex-direction:column; background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:clamp(24px,2.8vw,32px); box-shadow:var(--shadow-sm);}
.phase-card__num{flex:none; width:44px; height:44px; border-radius:var(--radius-circle); display:flex; align-items:center; justify-content:center; background:var(--pin,var(--green-600)); color:#fff; font-family:var(--font-display); font-weight:800; font-size:19px; box-shadow:inset 0 2px 5px rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.12); margin-bottom:16px;}
.phase-card .therapy__title{font-size:clamp(19px,1.7vw,22px); margin-bottom:12px;}
.phase-card > p{margin:0 0 20px; font-size:15.5px; line-height:1.68; color:var(--text-body);}
/* Le bouton suit directement le texte de SA carte (retour Heloise du 14/08) : avec
   margin-top:auto il etait pousse au bas de la carte la plus haute, et le contenu
   deplie apparaissait alors detache du texte, tout en bas de la case. */
.phase-card .therapy__toggle{align-self:flex-start;}
.phase-card .therapy__more{padding-top:20px;}
.phase-card .therapy__more > :last-child{margin-bottom:0;}
@media (max-width:980px){.phases-grid{grid-template-columns:1fr; max-width:640px; margin-inline:auto;}}
@media (max-width:760px){
  .journey__bg::after{background:linear-gradient(180deg, rgba(253,250,244,.95) 0%, rgba(253,250,244,.84) 15%, rgba(251,246,236,.84) 60%, rgba(253,250,244,.96) 100%);}
  .journey-step{grid-template-columns:64px 1fr;}
  .journey-step__pin{grid-area:1/1; width:42px; height:42px; font-size:17px;}
  .journey-step__card, .journey-step:nth-child(even) .journey-step__card{grid-area:1/2;}
  .journey-step .journey-step__card, .journey-step:nth-child(odd) .journey-step__card{--slide:22px;}
  .journey__outro{border-radius:var(--radius-lg); padding:16px 20px;}
}

/* ===== Neurofeedback : domaines d'accompagnement ===== */
.nf-domains{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:22px; margin-top:clamp(26px,3.5vw,40px);}
/* Cinq domaines sur trois colonnes : les deux derniers restaient plaques a
   gauche. On passe la grille en six colonnes, chaque carte en occupant deux, et
   on decale la quatrieme d'une demi-largeur : les deux du bas se centrent alors
   sous les trois du haut. Vaut pour CINQ cartes ; en ajouter une demande de
   retirer le decalage. */
@media (min-width:1000px){
  .nf-domains{grid-template-columns:repeat(6,1fr);}
  .nf-domain{grid-column:span 2;}
  .nf-domain:nth-child(4){grid-column:2 / span 2;}
}
.nf-domain{background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:var(--space-6); box-shadow:var(--shadow-sm);}
.nf-domain__medallion{width:50px; height:50px; border-radius:15px; color:#fff; display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px;}
.nf-domain__medallion svg{width:25px; height:25px;}
.nf-domain--orange .nf-domain__medallion{background:var(--gradient-sunset);}
.nf-domain--green .nf-domain__medallion{background:linear-gradient(135deg,var(--green-400),var(--green-600));}
.nf-domain--gold .nf-domain__medallion{background:linear-gradient(135deg,var(--gold-400),var(--gold-600));}
.nf-domain h3{font-family:var(--font-display); font-weight:700; font-size:18px; margin:0 0 12px; color:var(--text-strong);}
.nf-domain ul{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.nf-domain li{position:relative; padding-left:18px; font-size:15px; color:var(--text-body); line-height:1.55;}
.nf-domain li::before{content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--green-400);}
.nf-domain--orange li::before{background:var(--orange-400);}
.nf-domain--gold li::before{background:var(--gold-500);}

/* ===== Neurofeedback : vidéo + liste numérotée des blocs Découvrir ===== */
.video-embed{position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); margin:26px 0; background:#000;}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.nf-olist{list-style:none; counter-reset:nfstep; display:grid; gap:11px; margin:0 0 20px; padding:0;}
.nf-olist li{counter-increment:nfstep; position:relative; padding-left:38px; color:var(--text-body); line-height:1.6;}
.nf-olist li::before{content:counter(nfstep); position:absolute; left:0; top:1px; width:26px; height:26px; border-radius:50%; background:var(--green-100); color:var(--green-700); font-family:var(--font-display); font-weight:700; font-size:13.5px; display:flex; align-items:center; justify-content:center;}

/* ===== Tarifs : tableaux clairs par catégorie ===== */
.tarif-note{display:flex; gap:13px; align-items:flex-start;}
.tarif-audience{margin-top:clamp(38px,5vw,58px);}
.tarif-cat{background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:4px 24px 12px; margin-bottom:16px;}
.tarif-cat__head{display:flex; align-items:center; gap:12px; padding:18px 0 8px;}
.tarif-cat__title{margin:0; font-size:19px;}
.tarif-cat__sub{margin:3px 0 0; color:var(--text-muted); font-size:13.5px; line-height:1.4;}
/* Colonnes 2 et 3 à largeur fixe (et non "auto"/fr) : sinon la largeur du prix, qui varie
   de 55 à 200 px selon la ligne, décale la colonne "durée" de 82 px d'une ligne à l'autre.
   Les clamp() ne dépendent que du viewport, donc toutes les lignes de la page restent alignées. */
.tarif-row{display:grid; grid-template-columns:minmax(0,1fr) clamp(150px,20vw,190px) clamp(120px,22vw,200px); gap:8px 22px; align-items:center; padding:14px 0; border-top:1px solid var(--border);}
.tarif-row__name{font-family:var(--font-display); font-weight:600; color:var(--text-strong); font-size:15.5px;}
.tarif-row__sub{color:var(--text-muted); font-size:13.5px; margin-top:2px;}
.tarif-row__meta{color:var(--text-body); font-size:14.5px;}
.tarif-row__meta b{font-weight:600; color:var(--text-strong);}
.tarif-row__price{justify-self:end; text-align:right; font-family:var(--font-display); font-weight:800; color:var(--color-primary-ink); font-size:19px; line-height:1.15; white-space:nowrap;}
.tarif-row__price small{display:block; font-weight:500; font-size:12px; color:var(--text-muted); white-space:normal; max-width:170px; margin-top:3px;}
.tarif-row__price--soft{font-size:14.5px; font-weight:600; color:var(--text-body); white-space:normal; max-width:200px;}

/* Mise en avant — produit phare (Centre de formations) */
.tarif-feature{position:relative; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-md);
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(139,191,77,.10), transparent 55%),
    radial-gradient(120% 150% at 100% 0%, rgba(248,162,78,.13), transparent 55%),
    var(--surface-card);
  margin-bottom:clamp(38px,5vw,56px);}
.tarif-feature::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--gradient-colibri);}
.tarif-feature__body{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(250px,.85fr); gap:clamp(24px,3vw,44px); align-items:center; padding:clamp(26px,3.2vw,40px);}
.tarif-feature__top{display:flex; align-items:center; gap:13px; margin-bottom:15px;}
.tarif-feature__medal{flex:none; width:52px; height:52px; border-radius:15px; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:var(--gradient-colibri-vertical); box-shadow:var(--shadow-sm);}
.tarif-feature__medal svg{width:26px; height:26px;}
.tarif-feature__title{margin:0 0 10px; font-size:clamp(23px,2.7vw,29px); line-height:1.12;}
.tarif-feature__lead{margin:0 0 16px; color:var(--text-body); font-size:16px; line-height:1.65; max-width:56ch;}
.tarif-feature__tags{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; padding:0;}
.tarif-feature__tags li{font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--text-strong); background:var(--surface-soft); border:1px solid var(--border); padding:6px 13px; border-radius:var(--radius-pill);}
.tarif-feature__fin{display:flex; align-items:flex-start; gap:9px; margin:0; color:var(--text-muted); font-size:13.5px; line-height:1.55;}
.tarif-feature__fin svg{width:17px; height:17px; flex:none; color:var(--color-accent); margin-top:1px;}
.tarif-feature__aside{display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding-left:clamp(0px,2vw,30px); border-left:1px solid var(--border);}
.tarif-feature__price{font-family:var(--font-display); font-weight:800; color:var(--color-primary-ink); font-size:25px; line-height:1.1;}
.tarif-feature__price small{display:block; font-weight:500; font-size:13px; color:var(--text-muted); margin-top:4px;}
.tarif-feature__aside .btn{width:100%;}
@media (max-width:820px){
  .tarif-feature__body{grid-template-columns:1fr; gap:24px;}
  .tarif-feature__aside{border-left:none; border-top:1px solid var(--border); padding-left:0; padding-top:22px; width:100%;}
}
@media (max-width:680px){
  .tarif-cat{padding:4px 18px 10px;}
  .tarif-row{grid-template-columns:1fr auto; gap:4px 16px;}
  .tarif-row__main{grid-column:1; grid-row:1;}
  .tarif-row__price{grid-column:2; grid-row:1; align-self:start;}
  .tarif-row__meta{grid-column:1 / -1; grid-row:2;}
}

/* ===== Financements ===== */
.finance-card{background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--space-6);}
.finance-card__head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px;}
.finance-card h3{margin:0 0 6px; font-size:18px;}
.finance-card p{margin:0; color:var(--text-muted); font-size:15px; line-height:1.6;}
.badge--ok{background:var(--surface-warm); color:var(--green-600);}
.finance-note{margin-top:20px; color:var(--text-muted); font-size:14.5px; line-height:1.6;}

/* steps / parcours */
.steps{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); counter-reset:step;}
.step{position:relative; background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-sm);}
.step__num{counter-increment:step; font-family:var(--font-display); font-weight:800; font-size:18px; width:40px; height:40px; border-radius:12px; background:var(--gradient-sunset); color:#fff; display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px;}
/* Accueil : dégradé des numéros du orange (1) au vert (4) */
.steps--gradient .step:nth-child(1) .step__num{background:linear-gradient(135deg,#f8a24e 0%,#ed6924 100%);}
.steps--gradient .step:nth-child(2) .step__num{background:linear-gradient(135deg,#f7ad3f 0%,#d9a52a 100%);}
.steps--gradient .step:nth-child(3) .step__num{background:linear-gradient(135deg,#bdb64f 0%,#93bd4c 100%);}
.steps--gradient .step:nth-child(4) .step__num{background:linear-gradient(135deg,#7fb84a 0%,#5f922f 100%);}
.step h3,.step h4{margin:0 0 8px; font-size:var(--text-lg);}
.step p{margin:0; font-size:15px; color:var(--text-muted); line-height:1.6;}

/* pricing */
.pricing{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));}
.price-card{display:flex; flex-direction:column; gap:6px; background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-xl); padding:var(--space-8); box-shadow:var(--shadow-sm);}
.price-card__name{font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--text-strong); margin:0;}
.price-card__price{font-family:var(--font-display); font-weight:800; font-size:34px; color:var(--color-primary-ink); line-height:1.1; margin:6px 0;}
.price-card__price small{font-size:15px; font-weight:600; color:var(--text-muted);}
.price-card__desc{font-size:15px; color:var(--text-muted); line-height:1.6; margin:0;}
.price-card ul{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px;}
.price-card li{display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--text-body);}
.price-card li svg{flex:none; width:18px; height:18px; color:var(--green-600); margin-top:2px;}
.tag-verify{display:inline-flex; align-items:center; gap:6px; background:var(--color-warning-soft); color:var(--orange-700); font-family:var(--font-display); font-weight:600; font-size:11.5px; padding:4px 10px; border-radius:var(--radius-pill); letter-spacing:.04em;}

/* Tarifs : sous-sections + cartes illustrées */

.price-card{overflow:hidden;}
.price-card__illus{position:relative; height:122px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.price-card__illus::after{content:""; position:absolute; width:170px; height:170px; border-radius:50%; right:-55px; top:-65px; background:rgba(255,255,255,.15);}
.price-card[data-tone="orange"] .price-card__illus{background:var(--gradient-sunset);}
.price-card[data-tone="green"] .price-card__illus{background:linear-gradient(150deg,var(--green-400),var(--green-600));}
.price-card[data-tone="gold"] .price-card__illus{background:linear-gradient(150deg,var(--gold-400),var(--gold-600));}
.price-card__illus-ic{position:relative; width:64px; height:64px; border-radius:20px; background:rgba(255,255,255,.94); display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);}
.price-card__illus-ic svg{width:30px; height:30px; color:var(--color-primary-ink);}
.price-card[data-tone="green"] .price-card__illus-ic svg{color:var(--green-600);}
.price-card[data-tone="gold"] .price-card__illus-ic svg{color:var(--gold-600);}
.price-card__body{display:flex; flex-direction:column; gap:6px; padding:var(--space-8);}


/* trust row / logos */

/* ---- Repères de confiance (cartes) ---- */
.reperes .section-head{margin-bottom:34px;}
.grid--reperes{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.repere{background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px 24px; box-shadow:var(--shadow-sm); transition:transform var(--transition-base) var(--ease-soft), box-shadow var(--transition-base) var(--ease-soft);}
.repere:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.repere__ic{width:52px; height:52px; border-radius:15px; display:inline-flex; align-items:center; justify-content:center; color:#fff; margin-bottom:16px;}
.repere__ic svg{width:24px; height:24px;}
.repere__ic[data-tone="orange"]{background:var(--gradient-sunset);}
.repere__ic[data-tone="green"]{background:linear-gradient(150deg,var(--green-400),var(--green-600));}
.repere__ic[data-tone="gold"]{background:linear-gradient(150deg,var(--gold-400),var(--gold-600));}
.repere h3{font-size:18px; margin:0 0 6px;}
.repere p{font-size:14.5px; color:var(--text-muted); margin:0; line-height:1.55;}

/* ==========================================================================
   22. ANIMATIONS — reveal on scroll
   ========================================================================== */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);}
.reveal.is-visible{opacity:1; transform:none;}
.reveal[data-delay="1"]{transition-delay:.08s;}
.reveal[data-delay="2"]{transition-delay:.16s;}
.reveal[data-delay="3"]{transition-delay:.24s;}

/* ==========================================================================
   23. RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .hero--photo{min-height:auto;}
  .hero__inner{grid-template-columns:minmax(0,1fr); gap:40px; padding-top:clamp(112px,18vh,150px); padding-bottom:clamp(56px,9vh,84px); align-items:start;}
  .hero__accent-visual{display:none;}
  .grid--reperes{grid-template-columns:repeat(2,1fr);}
  .values__inner{grid-template-columns:1fr; gap:40px;}
  .values__visual{min-height:280px;}
  .detail{grid-template-columns:1fr; gap:36px;}
  .aside-card{position:static;}
  /* minmax(0,1fr) et non 1fr : une piste 1fr garde un minimum implicite egal
     a la largeur minimale de son contenu. Mesure le 2026-08-20 sur un ecran
     de 320 px : la colonne du formulaire faisait 323 px dans un conteneur
     de 280, et la page debordait. */
  .contact-grid{grid-template-columns:minmax(0,1fr); gap:36px;}
  .feature{grid-template-columns:1fr; gap:32px;}
  .feature--reverse .feature__visual{order:0;}
  .therapy .feature__text{order:0;}
  .therapy .feature__visual{order:1;}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1 / -1;}
}
@media (max-width:900px){
  .nav-desktop,.header-cta{display:none;}
  .nav-toggle{display:inline-flex;}
}
@media (max-width:760px){
  :root{--gutter:20px;}
  .grid--3,.grid--balanced{grid-template-columns:1fr;}
  .grid--balanced > *,.grid--balanced > *:nth-child(3n+1):nth-last-child(2){grid-column:auto;}
  .values__list{grid-template-columns:1fr;}
  .contact-form .row-2{grid-template-columns:1fr;}
  .cta-strip__inner{flex-direction:column; align-items:flex-start;}
  .footer-inner{grid-template-columns:1fr; gap:32px;}
  .footer-brand{grid-column:auto;}
  .section-head p{font-size:var(--text-md);}
  .tabs{display:flex; flex-direction:column; width:100%; max-width:340px;}
  .tabs__tab{width:100%;}
}
@media (max-width:480px){
  .hero__actions .btn,.banner__form .btn{width:100%;}
  .grid--reperes{grid-template-columns:1fr;}
  /* Un bouton trop long pour l'ecran doit passer a la ligne, jamais pousser la
     page. Mesure le 2026-08-20 a 22h35 : « Formation sur mesure : me contacter »
     (336 px) et « Decouvrir nos formateurs » (337 px) faisaient deborder
     formations.html de 25 px, avec DEFILEMENT HORIZONTAL, sur tout ecran de
     moins de 414 px. La regle existait deja pour le hero et la bande d'appel
     seulement ; elle vaut pour tous les boutons.
     Les trois proprietes vont ensemble : .btn a une hauteur FIXE et un
     line-height de 1, donc autoriser le retour a la ligne sans liberer la
     hauteur ferait deborder le texte hors du bouton. Le min-height reprend la
     variable de taille, ce qui garde 40, 48 ou 56 px selon la variante. */
  .btn{white-space:normal; height:auto; min-height:var(--_h); padding-block:12px;
       line-height:1.25; text-align:center;}
}

/* ==========================================================================
   24. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  .reveal{opacity:1; transform:none;}
  .hero__bg img{transform:none !important;}
}