/* =========================================================
   Élodie Delaval — Cabinet de Neurofeedback
   Design system — direction "Éditorial nature"
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

:root{
  /* ---------------------------------------------------------------
     Palette extraite directement de ses supports (carte de visite,
     flyer, visuels Instagram) — et non recomposée à l'œil.
     --------------------------------------------------------------- */
  --sage-900:#5a5a41;   /* titres — ses titres de visuels */
  --sage-800:#68684c;   /* bandeaux — pied de page de ses visuels */
  --sage-700:#68684c;   /* vert sauge de référence — fond carte de visite */
  --sage-500:#a0a080;
  --sage-300:#bdbda3;
  --sage-200:#d5d5c3;
  --sage-100:#e9e9dd;
  --cream:#f8f0e5;      /* crème réchauffé, à sa demande */
  --cream-2:#e2dacb;
  --paper:#fcf7f1;
  --gold:#ac8a5d;       /* doré de ses ornements */
  --gold-dark:#785a33;
  --beige:#d0bfa4;
  --ink:#464434;
  --ink-soft:#63604b;
  --white:#ffffff;
  --line:#e7dccb;

  /* Nuance taupe / rosé, reprise des pétales animés — page « Qui suis-je » */
  --taupe:#cfc5b2;
  --taupe-clair:#e2dacb;
  --taupe-fonce:#7a6a52;

  --font-script:'Dancing Script', 'Brush Script MT', cursive;
  --font-body:'Manrope', sans-serif;

  --ease:cubic-bezier(.16,.8,.24,1);
}

*{box-sizing:border-box;}
/* Filet de sécurité contre tout débordement latéral (feuilles décoratives,
   filigrane du hero…). « clip » plutôt que « hidden » : hidden casserait
   le comportement collant de l'en-tête. */
body{overflow-x:clip;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  font-size:16px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--font-body);
  font-weight:600;
  color:var(--sage-900);
  line-height:1.15;
  margin:0;
}
/* Les H1 — et uniquement eux — passent en Dancing Script.
   Une cursive a une hauteur d'x plus petite et de longs jambages :
   il lui faut plus de corps et plus d'interligne pour rester lisible. */
h1{
  font-family:var(--font-script);
  font-weight:600;
  line-height:1.24;
  letter-spacing:.004em;
}
/* Dancing Script n'a pas de vraie italique : le navigateur en fabriquerait
   une penchée artificielle, illisible. On distingue par la couleur. */
h1 em{font-style:normal;}
p{margin:0;}
.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 6%;
}
section{position:relative;}

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal-stagger > *{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-stagger.is-visible > *{opacity:1;transform:translateY(0);}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.14s;}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.23s;}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.32s;}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.41s;}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:.5s;}

/* ---------- Announcement bar ---------- */
.announce{
  background:var(--sage-800);
  color:var(--cream);
  text-align:center;
  font-size:13px;
  letter-spacing:.03em;
  padding:9px 16px;
  font-weight:500;
}
.announce b{color:var(--gold);font-weight:600;}

/* ---------- Nav ---------- */
header.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(247,242,232,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:padding .3s var(--ease);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 6%;
  max-width:1400px;
  margin:0 auto;
}
.brand{display:flex;align-items:center;gap:13px;}
/* height:auto — le logo n'est pas parfaitement carré, on évite l'écrasement */
.brand img{width:52px;height:auto;}
.brand .btext{line-height:1.15;}
.brand .btext .n{font-family:var(--font-body);font-size:18px;color:var(--sage-900);font-weight:500;}
.brand .btext .s{color:var(--gold-dark);}

nav.navlinks{display:flex;align-items:center;gap:30px;}
nav.navlinks a{
  font-size:13.5px;
  color:var(--ink-soft);
  position:relative;
  padding:4px 0;
  transition:color .2s;
}
nav.navlinks a:hover{color:var(--sage-900);}
nav.navlinks a.active{color:var(--sage-900);font-weight:600;}
nav.navlinks a.active::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-4px;
  height:2px;background:var(--gold);
}
/* Sélecteur volontairement spécifique : la règle "nav.navlinks a" ci-dessus
   impose padding:4px 0 à tous les liens du menu et écraserait celui-ci. */
nav.navlinks a.nav-cta{
  background:var(--sage-700);
  color:var(--cream)!important;
  padding:16px 32px;      /* respiration autour du texte */
  border-radius:40px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1;
  transition:background .25s, transform .25s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
nav.navlinks a.nav-cta::after{display:none;}  /* pas de trait doré sous le bouton */
nav.navlinks a.nav-cta:hover{background:var(--gold-dark);transform:translateY(-1px);}

.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--sage-900);margin:5px 0;}

/* Entre 1080 et 1240px le menu tient encore, mais serré : on compresse
   plutôt que de basculer trop tôt en burger. */
@media(max-width:1330px) and (min-width:1181px){
  nav.navlinks{gap:20px;}
  nav.navlinks a{font-size:12.5px;}
  nav.navlinks a.nav-cta{padding:14px 22px;font-size:12px;}
  .brand .btext .n{font-size:16.5px;}
}

/* Burger à 1180px : le menu compte désormais 8 liens + le bouton RDV.
   Au-delà de cette largeur seulement, il tient sur une ligne. */
@media(max-width:1180px){
  nav.navlinks{
    position:fixed;top:0;right:-100%;height:100vh;width:78%;
    background:var(--paper);
    flex-direction:column;
    justify-content:center;
    gap:26px;
    transition:right .4s var(--ease);
    box-shadow:-10px 0 40px rgba(0,0,0,.08);
  }
  nav.navlinks.open{right:0;}
  nav.navlinks a{font-size:16px;}
  .nav-toggle{display:block;}
  nav.navlinks a.nav-cta{margin-top:10px;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:15px 32px;
  border-radius:30px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  border:none;
  transition:transform .25s var(--ease), background .25s, box-shadow .25s;
}
.btn-primary{background:var(--sage-700);color:#f7f3ed;}
.btn-primary:hover{background:var(--gold-dark);transform:translateY(-2px);box-shadow:0 14px 28px rgba(44,54,38,.22);}
.btn-outline{background:transparent;border:1.4px solid var(--sage-700);color:var(--sage-900);}
.btn-outline:hover{background:var(--sage-700);color:#f7f3ed;border-color:var(--sage-700);}
.btn-ghost{background:transparent;color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;padding:6px 0;}

/* ---------- Hero ---------- */
.hero{
  padding:84px 6% 58px;
  text-align:center;
  overflow:hidden;
  position:relative;
}
/* Logo en filigrane derrière le contenu du hero.
   La perspective sur .hero donne la profondeur nécessaire à la rotation. */
.hero{perspective:1200px;}
.hero-watermark{
  position:absolute;
  top:46%;
  left:50%;
  width:min(400px,58vw);
  /* Le transform est piloté en JS (rotation au scroll) — on ne met ici
     que l'état de départ, la transition d'entrée se fait sur l'opacité seule */
  transform:translate(-50%,-50%) rotateY(0deg);
  transform-origin:center center;
  opacity:0;
  pointer-events:none;
  z-index:0;
  animation:watermarkFade 2s var(--ease) .3s forwards;
  will-change:transform;
  backface-visibility:visible;
}
@keyframes watermarkFade{
  to{opacity:.13;}
}
/* Le contenu du hero repasse au-dessus du filigrane */
.hero > *:not(.hero-watermark):not(.hero-leaf){position:relative;z-index:1;}

@media(max-width:640px){
  .hero-watermark{width:66vw;}
}
.hero .kicker{color:var(--gold-dark);
  margin-bottom:12px;
}
.hero h1{
  font-size:clamp(40px,6.2vw,70px);
  max-width:840px;margin:0 auto 16px;
}
.hero h1 em{
  font-style:italic;color:var(--sage-700);font-weight:400;
}
.hero .lead{
  color:var(--ink-soft);
  max-width:580px;margin:0 auto 26px;
}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---------- Page hero (non accueil) ---------- */
.page-hero{padding:56px 6% 38px;text-align:center;background:var(--cream-2);position:relative;overflow:hidden;}
.page-hero .kicker{color:var(--gold-dark);margin-bottom:14px;}
.page-hero h1{font-size:clamp(36px,5.5vw,56px);}
.page-hero p{max-width:640px;margin:10px auto 0;color:var(--ink-soft);font-size:16px;}

/* Paragraphe de corps de texte long (ses textes rédigés) */
.mp{
  color:var(--ink-soft);
  font-size:16.5px;
  line-height:1.72;
  margin-bottom:12px;
}
.mp:last-child{margin-bottom:0;}
.mp b,.mp strong{color:var(--sage-900);font-weight:600;}

/* ---------- Section header ---------- */
.sec-head{max-width:680px;margin:0 auto 34px;text-align:center;}
/* Ligne d'accroche au-dessus du titre, comme sur ses visuels
   ("QU'EST-CE QUE LA" au-dessus de "NEUROPLASTICITÉ ?") */
.sec-head .kicker{
  font-family:var(--font-body);
  font-size:clamp(15px,1.8vw,20px);
  letter-spacing:.005em;
  color:var(--sage-700);
  margin-bottom:2px;
  font-weight:400;
}
.sec-head h2{
  font-size:clamp(29px,4.2vw,44px);
  letter-spacing:.01em;
  color:var(--sage-900);
}
.sec-head p{color:var(--ink-soft);margin-top:12px;font-size:15.5px;}
/* Sous-titre en italique doré, sa signature */
.sec-head .subtitle{
  font-family:var(--font-body);
  font-style:italic;
  font-size:clamp(17px,2vw,21px);
  color:var(--gold);
  margin-top:10px;
  line-height:1.45;
}

/* ---------- Ornement de séparation (repris de ses visuels) ----------
   Trait fin doré + point central + brindille, comme sur ses posts */
.ornament{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:14px auto 0;
  max-width:340px;
}
.ornament .line{
  flex:1;
  height:1px;
  background:linear-gradient(to right,transparent,var(--gold));
}
.ornament .line:last-of-type{
  background:linear-gradient(to left,transparent,var(--gold));
}
.ornament .dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
}
.ornament .sprig{
  width:26px;height:12px;flex-shrink:0;color:var(--sage-500);
}
/* Version simple conservée pour les cas où l'ornement complet est trop chargé */
.divider{width:52px;height:1px;background:var(--gold);margin:18px auto 0;}

/* ---------- Encadré de message clé (ses boîtes arrondies dorées) ---------- */
.keybox{
  border:1px solid var(--gold);
  border-radius:16px;
  padding:22px 28px;
  text-align:center;
  max-width:620px;
  margin:0 auto;
  background:rgba(255,255,255,.35);
}
.keybox .kb-title{
  color:var(--sage-900);
  margin-bottom:10px;
}
.keybox p{color:var(--ink-soft);font-size:15.5px;}
.keybox em{font-family:var(--font-body);font-style:italic;color:var(--gold);}

/* ---------- Bandeau sauge arrondi (comme en bas de ses visuels) ---------- */
.sage-band{
  background:var(--sage-700);
  border-radius:14px;
  padding:18px 24px;
  display:flex;
  align-items:center;
  gap:18px;
  max-width:680px;
  margin:22px auto 0;
  color:#f4f4eb;
}
.sage-band .sb-ic{
  width:44px;height:44px;flex-shrink:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  display:flex;align-items:center;justify-content:center;
}
.sage-band p{font-size:14.5px;line-height:1.5;color:#f4f4eb;}

section.pad{padding:58px 0;}
section.pad-sm{padding:38px 0;}

/* Ses icônes (PNG transparents, cercle et feuilles inclus dans le dessin) */
.ic-img{
  width:54px;height:54px;
  margin-bottom:20px;        /* respiration avant le titre */
  display:block;
  transition:transform .5s var(--ease);
}
.card:hover .ic-img,.step:hover .ic-img{transform:scale(1.06) rotate(-2deg);}
.ic-img.lg{width:76px;height:76px;}
.modal-ic-img{width:72px;height:72px;margin-bottom:20px;display:block;}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:22px;align-items:stretch;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-6{grid-template-columns:repeat(6,1fr);}

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:30px 26px 26px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(44,54,38,.1);border-color:var(--sage-300);}
.card .ic{
  width:46px;height:46px;border-radius:50%;
  background:var(--sage-100);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;margin-bottom:16px;color:var(--sage-800);
}
.card h4{
  margin-bottom:10px;
  color:var(--sage-700);
}
.card p{font-size:14.5px;color:var(--ink-soft);}

/* =========================================================
   SCHÉMA DES BIENFAITS — reprise de son infographie
   ========================================================= */
.bienfaits-wrap{position:relative;}
/* Logo au centre, comme sur son visuel */
.bienfaits-centre{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:20px;
}
.bienfaits-centre img{width:150px;height:auto;margin-bottom:14px;}
.bienfaits-centre .bc-t{color:var(--sage-700);
}
.bienfaits-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  align-items:stretch;
}
.bienfait-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px 24px 24px;
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.bienfait-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(68,78,56,.1);border-color:var(--sage-300);}
.bienfait-card .bf-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.bienfait-card .bf-head img{width:52px;height:52px;flex-shrink:0;}
.bienfait-card h4{
  color:var(--sage-900);
  border-bottom:1px solid var(--gold);
  padding-bottom:5px;
}
.bf-list{list-style:none;padding:0;margin:0;}
.bf-list li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:14.5px;color:var(--ink-soft);padding:4px 0;
}
.bf-list li::before{
  content:"";flex-shrink:0;width:5px;height:5px;margin-top:8px;
  border-radius:50%;background:var(--sage-300);
}
@media(max-width:920px){.bienfaits-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.bienfaits-grid{grid-template-columns:1fr;}}

/* ---------- Steps (timeline) ---------- */
.steps-band{background:var(--sage-700);color:#f4f4eb;}
.steps-band .sec-head h2,.steps-band .sec-head p{color:var(--cream);}
.steps-band .sec-head .kicker{color:var(--gold);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step;}
.step{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);
  border-radius:16px;
  padding:28px 20px;
}
.step .num{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--gold);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:16px;margin-bottom:16px;
}
.step h4{
  color:#fff;
  margin-bottom:10px;
}
.step p{font-size:13.5px;color:#eaeadc;}

/* =========================================================
   ETAPES DU DEROULEMENT — mise en page de son infographie :
   numéro dans un cercle, icône, puis titre + texte
   ========================================================= */
.etapes{display:flex;flex-direction:column;}
.etape{
  display:grid;
  grid-template-columns:44px 84px 1fr;
  gap:22px;
  align-items:start;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.etape:last-child{border-bottom:none;}
.etape-num{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--gold);
  color:var(--gold-dark);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:16px;
  flex-shrink:0;margin-top:2px;
}
.etape-ic{width:74px;height:74px;flex-shrink:0;}
.etape-txt h4{
  color:var(--sage-900);
  margin-bottom:9px;
}
.etape-txt p{color:var(--ink-soft);font-size:14.5px;line-height:1.7;}

@media(max-width:640px){
  .etape{grid-template-columns:36px 1fr;gap:14px;}
  .etape-ic{display:none;}
}/* =========================================================
   STEPPER — parcours d'une séance en 5 étapes cliquables.
   Plus compact qu'une longue liste, et Élodie voulait moins de scroll.
   ========================================================= */
/* Rail de navigation : 5 pastilles reliées par un trait qui se remplit */
/* Étape franchie */
/* Étape en cours */
/* Panneau de l'étape en cours */

@keyframes stepIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}/* Pied : précédent / suivant */

@media(max-width:640px){
}

/* =========================================================
   ENCADRÉS DE CHOIX — grands blocs cliquables qui déploient
   leur contenu sur place. On voit les options d'un coup d'œil,
   on ouvre ce qui intéresse : peu de scroll au premier regard.
   ========================================================= */
.choice-grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.choice-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  gap:12px;
  padding:34px 26px 28px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  cursor:pointer;
  font-family:var(--font-body);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             border-color .35s var(--ease), background .35s var(--ease);
}
.choice-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(68,78,56,.1);
  border-color:var(--sage-300);
}
.choice-card .cc-ic{width:78px;height:78px;transition:transform .5s var(--ease);}
.choice-card:hover .cc-ic{transform:scale(1.07) rotate(-2deg);}
.choice-card h3{
  line-height:1.25;
  color:var(--sage-900);
}
.choice-card p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;}
.choice-card .cc-go{
  margin-top:6px;
  display:inline-flex;align-items:center;gap:7px;
  color:var(--gold);
  transition:color .3s var(--ease);
}
.choice-card .cc-go::after{content:"↓";font-size:13px;transition:transform .35s var(--ease);}
.choice-card:hover .cc-go::after{transform:translateY(3px);}
/* Encadré ouvert */
.choice-card.open{
  background:var(--sage-700);
  border-color:var(--sage-700);
}
.choice-card.open h3{color:#f7f3ed;}
.choice-card.open p{color:#e7e7d9;}
.choice-card.open .cc-go{color:var(--beige);}
.choice-card.open .cc-go::after{content:"↑";}
/* L'icône garde ses couleurs quand la carte est ouverte.
   « brightness(0) invert(1) » la transformait en silhouette blanche pleine :
   comme ces icônes ont un disque de fond, on n'obtenait qu'une boule blanche.
   On pose plutôt un disque clair derrière, pour qu'elle reste lisible sur le vert. */
.choice-card.open .cc-ic{
  filter:none;
  opacity:1;
  background:var(--cream);
  border-radius:50%;
  padding:7px;
  box-sizing:border-box;
}

/* Panneau déployé */
.choice-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .65s var(--ease);
}
.cp-inner{
  padding:36px 4px 8px;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .5s var(--ease) .15s, transform .5s var(--ease) .15s;
}
.choice-panel.open .cp-inner{opacity:1;transform:translateY(0);}
.cp-close{
  display:inline-flex;align-items:center;gap:8px;
  background:none;border:1px solid var(--line);
  border-radius:30px;padding:9px 18px;
  color:var(--ink-soft);cursor:pointer;
  margin-top:26px;
  transition:all .3s var(--ease);
}
.cp-close:hover{background:var(--sage-700);border-color:var(--sage-700);color:#f7f3ed;}

@media(max-width:640px){
  .choice-grid{grid-template-columns:1fr;gap:14px;}
  .choice-card{padding:26px 22px 22px;flex-direction:row;text-align:left;align-items:center;gap:16px;}
  .choice-card .cc-ic{width:56px;height:56px;flex-shrink:0;}
  .choice-card p{display:none;}        /* on garde le titre, plus compact */
  .choice-card .cc-go{margin-top:4px;}
  .choice-card > div{display:flex;flex-direction:column;gap:4px;}
  .cp-inner{padding:26px 0 4px;}
}

/* ---------- Tarification détaillée ---------- */
.tarif-bloc{
  display:flex;gap:18px;align-items:flex-start;
  padding:24px 22px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--paper);
  margin-bottom:16px;
  position:relative;
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
/* Liseré doré qui se déploie sur le bord gauche au survol */
.tarif-bloc::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--gold);
  transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--ease);
}
.tarif-bloc:hover::before{transform:scaleY(1);}
.tarif-bloc:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(68,78,56,.09);
  border-color:var(--sage-300);
}
.tarif-bloc:hover .tarif-ic{transform:scale(1.08) rotate(-3deg);}
.tarif-ic{transition:transform .5s var(--ease);}
.tarif-bloc:last-child{margin-bottom:0;}
.tarif-ic{width:56px;height:56px;flex-shrink:0;}
.tarif-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.tarif-head h4{color:var(--sage-700);
}
.tarif-prix{
  font-family:var(--font-body);font-size:24px;color:var(--sage-900);
}
.tarif-duree{
  font-family:var(--font-body);font-style:italic;
  color:var(--gold);font-size:14.5px;margin:2px 0 10px;
}
.tarif-bloc p{color:var(--ink-soft);font-size:14.5px;line-height:1.68;}

/* ---------- Liste des engagements ---------- */
.engagements{list-style:none;padding:0;margin:0;}
.engagements li{
  display:flex;gap:16px;align-items:flex-start;
  padding:14px 14px 14px 12px;
  border-radius:12px;
  border-bottom:1px solid rgba(222,214,198,.6);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.engagements li:last-child{border-bottom:none;}
.engagements li:hover{
  background:rgba(255,255,255,.55);
  transform:translateX(5px);
}
.engagements img{
  width:46px;height:46px;flex-shrink:0;
  transition:transform .5s var(--ease);
}
.engagements li:hover img{transform:scale(1.1) rotate(-4deg);}
.engagements span{color:var(--ink-soft);font-size:14.5px;line-height:1.62;padding-top:5px;}

/* ---------- Liste horizontale façon son post Instagram ---------- */
.nf-list{display:flex;flex-direction:column;}
.nf-item{
  display:grid;grid-template-columns:88px 1fr;gap:22px;align-items:center;
  padding:24px 4px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  position:relative;
  transition:background .3s var(--ease);
}
.nf-item:last-child{border-bottom:none;}
.nf-item:hover{background:rgba(255,255,255,.4);}
.nf-ic{width:78px;height:78px;flex-shrink:0;transition:transform .5s var(--ease);}
.nf-item:hover .nf-ic{transform:scale(1.06);}
.nf-txt h4{color:var(--sage-700);
  margin-bottom:8px;
}
.nf-txt p{color:var(--ink-soft);font-size:15px;line-height:1.68;}
.nf-txt .hint{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  border:none;padding:0;width:auto;
  color:var(--gold);
}
.nf-item::after{top:24px;right:6px;}
@media(max-width:640px){
  .nf-item{grid-template-columns:58px 1fr;gap:16px;}
  .nf-ic{width:54px;height:54px;}
}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:760px;margin:0 auto;}
.price-card{
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:38px 30px;text-align:center;
}
.price-card.featured{border-color:var(--gold);position:relative;}
.price-card .tag{color:var(--gold-dark);margin-bottom:12px;}
.price-card .amount{font-family:var(--font-body);font-size:46px;color:var(--sage-900);}
.price-card .amount span{font-size:15px;font-family:var(--font-body);color:var(--ink-soft);}
.price-card p.desc{color:var(--ink-soft);font-size:13.5px;margin-top:10px;}

/* ---------- Testimonial / quote cards ---------- */
.quote-card{
  background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:34px 28px;position:relative;
}
.quote-card .mark{font-family:var(--font-body);font-size:52px;color:var(--gold);line-height:0;position:relative;top:20px;}
.quote-card p{color:var(--ink-soft);margin:16px 0 18px;}
.quote-card .who{font-size:13px;font-weight:700;color:var(--sage-900);}
.quote-card .who span{display:block;font-weight:400;font-size:12px;color:var(--ink-soft);}

/* ---------- Disclaimer ---------- */
.disclaimer{
  background:var(--sage-100);
  border:1px solid var(--sage-300);
  border-radius:14px;
  padding:18px 22px;
  font-size:12.5px;
  color:var(--sage-800);
  line-height:1.6;
}

/* ---------- Placeholder note ---------- */
.tbd{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff3cd;border:1px solid #f0d787;color:#8a6d1a;
  font-size:11.5px;padding:7px 12px;border-radius:8px;margin-top:12px;
}

/* ---------- FAQ ---------- */
/* Filtres par thème */
.faq-filters{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:44px;
}
.faq-filter{
  background:transparent;
  border:1.3px solid var(--line);
  color:var(--ink-soft);
  padding:10px 20px;
  border-radius:30px;
  cursor:pointer;
  transition:all .3s var(--ease);
}
.faq-filter:hover{border-color:var(--sage-300);color:var(--sage-900);transform:translateY(-2px);}
.faq-filter.active{
  background:var(--sage-700);
  border-color:var(--sage-700);
  color:var(--cream);
}

/* Carte de question */
.faq-item{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  margin-bottom:14px;
  overflow:hidden;
  transition:
    border-color .4s var(--ease),
    box-shadow .4s var(--ease),
    transform .4s var(--ease),
    opacity .4s var(--ease);
}
.faq-item:hover{border-color:var(--sage-300);transform:translateX(4px);}
.faq-item.open{
  border-color:var(--gold);
  box-shadow:0 16px 36px rgba(44,54,38,.09);
  transform:translateX(0);
}
/* Masquage par filtre */
.faq-item.filtered-out{
  opacity:0;
  transform:scale(.96);
  max-height:0;
  margin-bottom:0;
  border-width:0;
  pointer-events:none;
  overflow:hidden;
}

.faq-q{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 26px;cursor:pointer;color:var(--sage-900);
  transition:color .3s;
}
.faq-num{
  color:var(--gold-dark);
  margin-right:14px;
}
.faq-q .plus{
  flex-shrink:0;
  width:32px;height:32px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--gold-dark);font-weight:300;
  transition:transform .45s var(--ease), background .3s, color .3s, border-color .3s;
}
.faq-item:hover .faq-q .plus{border-color:var(--gold);}
.faq-item.open .faq-q .plus{
  transform:rotate(135deg);
  background:var(--sage-700);
  border-color:var(--sage-700);
  color:var(--cream);
}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease);}
.faq-a-inner{
  padding:0 26px 24px 26px;
  color:var(--ink-soft);
  font-size:15.5px;
  max-width:760px;
  border-top:1px solid transparent;
}
/* Petit trait doré qui se déploie à l'ouverture */
.faq-item.open .faq-a-inner::before{
  content:"";
  display:block;
  width:40px;height:1px;
  background:var(--gold);
  margin-bottom:16px;
  animation:faqLine .6s var(--ease);
}
@keyframes faqLine{from{width:0;}to{width:40px;}}

.faq-tag{
  display:inline-block;
  color:var(--gold-dark);
  background:var(--sage-100);
  padding:4px 10px;
  border-radius:20px;
  margin-top:16px;
}

/* État "aucun résultat" */
.faq-empty{
  text-align:center;
  padding:50px 20px;
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-style:italic;
  font-size:17px;
  display:none;
}
.faq-empty.show{display:block;}

/* ---------- Portrait (photo réelle) ---------- */
.portrait-wrap{
  position:relative;
  border-radius:20px;
}
/* Aplat sauge décalé derrière la photo — évite l'effet "photo collée" */
.portrait-wrap::before{
  content:"";
  position:absolute;
  inset:18px -18px -18px 18px;
  background:var(--sage-100);
  border:1px solid var(--sage-300);
  border-radius:20px;
  z-index:0;
  transition:transform .8s var(--ease);
}
.portrait-wrap:hover::before{transform:translate(6px,6px);}
.portrait{
  position:relative;
  z-index:1;
  width:100%;
  max-width:300px;   /* format volontairement contenu, à sa demande */
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 18%;
  border-radius:20px;
  border:5px solid var(--paper);
  box-shadow:0 24px 50px rgba(44,54,38,.16);
  transition:transform .8s var(--ease);
}
.portrait-wrap:hover .portrait{transform:translateY(-4px);}

@media(max-width:920px){
  .portrait-wrap::before{inset:12px -12px -12px 12px;}
}

/* ---------- Photo placeholder block ---------- */
.photo-ph{
  background:var(--sage-100);
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  color:var(--sage-700);font-size:13px;text-align:center;padding:20px;
  border:1px dashed var(--sage-300);
}

/* ---------- Footer ---------- */
footer{background:var(--sage-800);color:#e6e6d9;padding:46px 6% 24px;}
.footer-grid{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;
  max-width:1180px;margin:0 auto;padding-bottom:26px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand{display:flex;gap:15px;align-items:center;margin-bottom:16px;}
/* Le filtre blanc écrasait le logo en aplat ("vrillé"). On garde ses vraies
   couleurs sur un disque crème, comme sur ses propres visuels. */
.footer-brand .logo-disc{
  width:64px;height:64px;flex-shrink:0;
  border-radius:50%;
  background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  padding:5px;
}
.footer-brand .logo-disc img{width:100%;height:auto;filter:none;opacity:1;}
/* Filet de sécurité : une image directe dans .footer-brand reste contenue */
.footer-brand > img{width:54px;height:auto;flex-shrink:0;}
/* Le nom ne peut plus déborder sur la colonne voisine */
.footer-brand{min-width:0;}
.footer-brand .n{min-width:0;overflow-wrap:anywhere;}
/* Son nom : plus discret, en capitales espacées plutôt qu'en gros serif blanc */
.footer-brand .n{
  font-family:var(--font-body);
  color:#f1f1e6;
  font-size:15px;
  font-weight:400;
  letter-spacing:.02em;
  line-height:1.35;
}
.footer-brand .n small{
  display:block;
  color:var(--beige);
  margin-top:3px;
}
footer p{font-size:13px;color:#c7c7ac;max-width:260px;}
footer h5{color:var(--beige);margin-bottom:16px;}
footer ul{list-style:none;padding:0;margin:0;font-size:13.5px;}
footer ul li{margin-bottom:10px;}
footer a:hover{color:#fff;}
.footer-bottom{
  max-width:1180px;margin:0 auto;padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:11.5px;color:#99997c;
}

@media(max-width:920px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  section.pad{padding:44px 0;}
}
@media(max-width:640px){
  .grid-2,.grid-3,.grid-4,.grid-6{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .price-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .hero{padding:110px 6% 60px;}
  /* le bouton RDV est traité plus bas, dans la passe mobile */
}

/* =========================================================
   COUCHE 2 — Feuilles animées (canvas global)
   ========================================================= */
#leaf-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  opacity:.85;
}
/* Les couches de contenu passent au-dessus du canvas (z-index explicites,
   sans sélecteur global qui écraserait le header ou les modales) */
.announce{position:relative;z-index:10;}
main{position:relative;z-index:5;}
footer{position:relative;z-index:5;}

/* Feuilles décoratives qui se révèlent au scroll dans les sections */
.leaf-accent.is-visible{opacity:.4;transform:translateY(0) rotate(0deg) scale(1);}

/* =========================================================
   COUCHE 3 — Cartes ouvrables (flip + agrandissement)
   ========================================================= */
/* Perspective sur la grille : sans elle, le rotateY des cartes paraît plat */
.grid:has(.is-openable){perspective:1400px;}

.is-openable{
  cursor:pointer;
  position:relative;
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
/* Le "+" est TOUJOURS visible, sur tous les appareils : elle n'avait pas
   repéré les cartes ouvrables, elle les a découvertes par hasard au survol. */
.is-openable::after{
  content:"+";
  position:absolute;
  top:16px;right:18px;
  width:24px;height:24px;
  border:1px solid var(--line);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
  font-weight:300;
  color:var(--gold);
  background:var(--cream);
  opacity:1;
  transform:none;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.is-openable:hover::after{
  background:var(--gold);
  border-color:var(--gold);
  color:#fff;
}
/* Le libellé aussi est toujours affiché, avec un chevron qui avance au survol */
.is-openable .hint{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:16px;
  padding-top:13px;
  border-top:1px solid var(--line);
  width:100%;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  opacity:1;
  transform:none;
  transition:color .3s var(--ease);
}
.is-openable .hint::after{
  content:"→";
  font-size:13px;
  transition:transform .3s var(--ease);
}
.is-openable:hover .hint{color:var(--sage-700);}
.is-openable:hover .hint::after{transform:translateX(4px);}

/* ---------- ALIGNEMENT DES CARTES ----------
   Les cartes d'une même grille n'ont pas le même volume de texte.
   En les passant en colonne flex avec le libellé poussé en bas, le trait
   de séparation et le "en savoir plus" tombent exactement au même niveau
   sur toute la ligne. */
.grid > .is-openable{
  display:flex;
  flex-direction:column;
  height:100%;
}
.grid > .is-openable > h4{margin-bottom:10px;}
.grid > .is-openable > p{margin-bottom:0;}
.grid > .is-openable > .hint{margin-top:auto;}
/* Les icônes gardent la même hauteur d'une carte à l'autre */
.grid > .is-openable > .ic-img{flex-shrink:0;}

/* La carte source qui "part" en flip lorsqu'on l'ouvre */
.card.is-flipping{
  transform:rotateY(-85deg) scale(.94);
  opacity:0;
  transition:transform .5s var(--ease), opacity .35s var(--ease);
}

/* ---- Overlay ---- */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:900;
  background:rgba(30,38,26,0);
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s var(--ease), background .6s var(--ease), backdrop-filter .6s var(--ease);
  perspective:1600px;
}
.modal-overlay.open{
  opacity:1;
  pointer-events:auto;
  background:rgba(30,38,26,.52);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

/* ---- Panneau qui grandit depuis la carte ---- */
.modal-panel{
  position:fixed;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  transform-origin:center center;
  transform:rotateY(-92deg);
  opacity:0;
  box-shadow:0 40px 90px rgba(30,38,26,.3);
  transition:
    top .72s var(--ease),
    left .72s var(--ease),
    width .72s var(--ease),
    height .72s var(--ease),
    transform .72s var(--ease),
    opacity .38s var(--ease),
    border-radius .72s var(--ease);
  will-change:top,left,width,height,transform;
}
.modal-panel.open{transform:rotateY(0deg);opacity:1;}
/* Placement initial sur la carte cliquée : aucune transition, sinon le panneau
   glisse depuis la position de la carte précédemment ouverte */
.modal-panel.no-transition{transition:none!important;}

.modal-scroll{
  height:100%;
  overflow-y:auto;
  padding:46px 46px 40px;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s var(--ease) .3s, transform .5s var(--ease) .3s;
}
.modal-panel.open .modal-scroll{opacity:1;transform:translateY(0);}

.modal-close{
  position:absolute;
  top:16px;right:18px;
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--cream);
  color:var(--sage-800);
  font-size:19px;
  line-height:1;
  cursor:pointer;
  z-index:5;
  transition:background .25s, transform .25s var(--ease), color .25s;
}
.modal-close:hover{background:var(--sage-700);color:var(--cream);transform:rotate(90deg);}

.modal-ic{
  width:60px;height:60px;border-radius:50%;
  background:var(--sage-100);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;margin-bottom:20px;
}
.modal-kicker{
  color:var(--gold-dark);margin-bottom:10px;
}
.modal-scroll h3{
  color:var(--sage-900);
  margin-bottom:6px;
}
.modal-lead{
  color:var(--sage-700);
  margin:12px 0 22px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.modal-scroll p{color:var(--ink-soft);font-size:15px;margin-bottom:15px;}
/* Image dans une modale (ex. le certificat) */
.modal-figure{margin:22px 0 4px;}
.modal-figure img{
  width:100%;
  border-radius:12px;
  border:1px solid var(--line);
  box-shadow:0 14px 32px rgba(44,54,38,.14);
}
.modal-figure figcaption{
  font-size:12px;
  color:var(--ink-soft);
  text-align:center;
  margin-top:10px;
  font-style:italic;
}

.modal-points{list-style:none;padding:0;margin:20px 0 0;}
.modal-points li{
  display:flex;gap:12px;align-items:flex-start;
  font-size:14.5px;color:var(--ink-soft);
  padding:11px 0;
  border-bottom:1px solid rgba(221,213,189,.5);
}
.modal-points li:last-child{border-bottom:none;}
.modal-points li::before{
  content:"";
  flex-shrink:0;
  width:7px;height:7px;margin-top:8px;
  border-radius:50%;
  background:var(--gold);
}
.modal-foot{
  margin-top:26px;padding-top:22px;
  border-top:1px solid var(--line);
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
}

@media(max-width:640px){
  .modal-scroll{padding:36px 24px 32px;}
  .modal-panel{transition-duration:.6s;}
}

/* =========================================================
   PASSE MOBILE — pensée pour le tactile, pas seulement réduite
   ========================================================= */

/* Appareils sans survol (téléphones, tablettes) :
   les affordances au hover ne se déclencheront jamais → on les rend visibles */
@media (hover: none){
  .is-openable::after{opacity:1;transform:rotate(0) scale(1);}
  .is-openable .hint{opacity:1;transform:translateY(0);}
  /* Pas d'effet de survol fantôme au tap */
  .card:hover{transform:none;box-shadow:none;}
  .is-openable:active{transform:scale(.985);}
}

@media(max-width:920px){
  /* Les blocs texte + image passent en pile : côte à côte c'est illisible */
  .grid-2{grid-template-columns:1fr;}
  .portrait-wrap{max-width:340px;margin:0 auto;}
  /* Le filigrane derrière le hero devient discret pour ne pas gêner la lecture */
  .hero-watermark{width:78vw;}
}

@media(max-width:640px){
  .hero{padding:90px 6% 54px;}
  .hero-ctas{flex-direction:column;align-items:stretch;}
  .hero-ctas .btn{justify-content:center;}
  /* Feuilles décoratives d'angle : trop encombrantes sur petit écran */
    
  .nav-inner{padding:12px 5%;}
  .brand img{width:42px;}
  .brand .btext .n{font-size:16px;}
  nav.navlinks a.nav-cta{padding:13px 22px;font-size:12.5px;}

  section.pad{padding:38px 0;}
  .sec-head{margin-bottom:34px;}
  .card{padding:26px 22px;}

  /* Modale plein écran sur téléphone : plus lisible qu'une fenêtre flottante */
  .modal-scroll{padding:32px 22px 28px;}
  .modal-points li{font-size:14px;}
  .modal-foot{flex-direction:column;align-items:stretch;}
  .modal-foot .btn{justify-content:center;}

  /* FAQ : cibles tactiles plus généreuses */
  .faq-q{padding:20px 18px;font-size:16.5px;gap:12px;}
  .faq-a-inner{padding:0 18px 22px;}
  .faq-filters{gap:8px;margin-bottom:32px;}
  .faq-filter{padding:9px 15px;}
  .faq-item:hover{transform:none;}

  .price-card .amount{font-size:38px;}
  footer{padding:48px 6% 24px;}
  .footer-bottom{flex-direction:column;gap:6px;}
}

/* Accessibilité — mouvement réduit */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
  }
  #leaf-canvas{display:none;}
  .reveal,.reveal-stagger > *{opacity:1;transform:none;}
}

/* ---------- Passe mobile complémentaire (restructure août 2026) ---------- */
@media(max-width:640px){
  /* Visuels au centre des schémas : 150/110px débordaient sur petit écran */
  .bienfaits-centre img{width:min(150px,34vw);}
  /* Le certificat en pleine largeur reste lisible */
  .grid-2 > img{width:100%;height:auto;}
}

/* ---------- Dancing Script : lisibilité sur petit écran ---------- */
@media(max-width:640px){
  /* En cursive, un titre long devient vite illisible : on réduit le corps
     et on ouvre l'interligne plutôt que de laisser le clamp décider seul. */
  .hero h1{font-size:clamp(31px,8.6vw,40px);line-height:1.3;}
  .page-hero h1{font-size:clamp(29px,8vw,36px);line-height:1.3;}
  h1{letter-spacing:0;}
}
/* Les prix restent en typographie classique, jamais en cursive */
.tarif-prix,.price-card .amount,.amount,.tarif-bloc .prix{font-family:var(--font-body)!important;}

/* =========================================================
   BLOG — liste d'articles et page d'article
   ========================================================= */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch;}
.blog-card{
  display:flex;flex-direction:column;height:100%;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(73,79,54,.10);}
.blog-card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--sage-100);}
.blog-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.blog-card:hover .blog-card-media img{transform:scale(1.04);}
/* Article sans image : on affiche le logo en filigrane plutôt qu'un trou blanc */
.blog-card-vide{display:flex;align-items:center;justify-content:center;height:100%;background:var(--cream-2);}
.blog-card-vide img{width:64px;height:auto;opacity:.32;}
.blog-card-corps{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.blog-date{color:var(--gold-dark);}
.blog-card-titre{line-height:1.28;margin:9px 0 10px;color:var(--sage-900);}
.blog-card-titre a{transition:color .2s;}
.blog-card-titre a:hover{color:var(--gold-dark);}
.blog-card-extrait{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin-bottom:16px;}
.blog-lien{margin-top:auto;font-size:13px;font-weight:600;color:var(--gold-dark);
  display:inline-flex;align-items:center;gap:7px;padding-top:14px;border-top:1px solid var(--line);}
.blog-lien span{transition:transform .25s var(--ease);}
.blog-card:hover .blog-lien span{transform:translateX(4px);}

/* ---------- Page d'article ---------- */
.article-tete{background:var(--cream-2);padding:44px 6% 38px;text-align:center;}
.article-tete h1{margin:16px 0 12px;font-size:clamp(32px,4.6vw,50px);}
.article-date{color:var(--gold-dark);}
.article-retour{font-size:13.5px;font-weight:600;color:var(--gold-dark);display:inline-flex;align-items:center;gap:7px;}
.article-retour:hover{color:var(--sage-900);}
.article-image{width:100%;border-radius:16px;margin:-24px 0 0;position:relative;
  box-shadow:0 18px 40px rgba(73,79,54,.13);}
.article-chapo{line-height:1.55;
  color:var(--ink-soft);margin:38px 0 8px;text-align:center;}

/* Le corps de l'article reste en typographie classique : c'est de la lecture
   longue, la cursive des H1 n'a rien à y faire. */
.article-corps{font-family:var(--font-body);font-size:16.5px;line-height:1.8;color:var(--ink);
  margin:34px 0 44px;}
.article-corps p{margin:0 0 20px;}
.article-corps h2{font-family:var(--font-body);font-size:28px;line-height:1.3;margin:40px 0 14px;}
.article-corps h3{font-family:var(--font-body);font-size:22px;line-height:1.35;margin:32px 0 10px;}
.article-corps ul,.article-corps ol{margin:0 0 20px;padding-left:22px;}
.article-corps li{margin-bottom:9px;}
.article-corps img{border-radius:12px;margin:24px 0;}
.article-corps a{color:var(--gold-dark);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line);}
.article-corps a:hover{text-decoration-color:var(--gold-dark);}
.article-corps blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--sage-300);
  font-family:var(--font-body);font-style:italic;font-size:19px;color:var(--ink-soft);}
.article-corps hr{border:none;border-top:1px solid var(--line);margin:34px 0;}
.article-pied{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:26px 0 10px;border-top:1px solid var(--line);margin-bottom:16px;}

@media(max-width:920px){ .blog-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:640px){
  .blog-grid{grid-template-columns:1fr;gap:20px;}
  .article-tete{padding:34px 6% 30px;}
  .article-image{margin-top:-14px;border-radius:12px;}
  .article-chapo{margin-top:28px;}
  .article-corps{font-size:16px;margin:26px 0 34px;}
  .article-corps h2{font-size:24px;} .article-corps h3{font-size:20px;}
  .article-pied{flex-direction:column;align-items:stretch;}
  .article-pied .btn{justify-content:center;}
}

/* =========================================================
   LIGHTBOX — images et vidéos, sans quitter la page
   ========================================================= */
.lb{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;padding:34px 22px;
  background:rgba(38,42,30,.86);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .28s var(--ease);
}
.lb.on{display:flex;} .lb.vu{opacity:1;}
.lb-boite{
  position:relative;max-width:min(94vw,980px);width:100%;
  transform:translateY(14px) scale(.985);transition:transform .32s var(--ease);
}
.lb.vu .lb-boite{transform:none;}
.lb-boite img{width:100%;height:auto;border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.42);}
.lb-cadre{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden;
  background:#000;box-shadow:0 30px 70px rgba(0,0,0,.42);}
.lb-cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.lb-legende{margin-top:14px;text-align:center;color:#eaeadc;font-size:14px;line-height:1.55;}
.lb-fermer{
  position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;
  font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.lb-fermer:hover{background:rgba(255,255,255,.28);}
@media(max-width:640px){
  .lb{padding:60px 14px 22px;}
  .lb-fermer{top:-48px;right:50%;transform:translateX(50%);width:44px;height:44px;}
}

/* Bouton discret « Voir l'image » */
.voir-image{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  padding:10px 18px;border-radius:24px;border:1.4px solid var(--sage-300);
  background:var(--paper);color:var(--sage-900);
  font-size:13px;font-weight:600;cursor:pointer;transition:all .25s var(--ease);
}
.voir-image:hover{background:var(--sage-700);color:var(--cream);border-color:var(--sage-700);}

/* ---------- Cartes vidéo ---------- */
.videos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
.video-carte{
  display:flex;flex-direction:column;height:100%;text-align:left;cursor:pointer;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  padding:0;font:inherit;color:inherit;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.video-carte:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(73,79,54,.12);}
.video-vignette{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  /* Le dégradé ne sert plus que de fond, le temps que la miniature charge */
  background:linear-gradient(140deg,var(--sage-700),var(--sage-900));
  display:flex;align-items:center;justify-content:center;
}
.video-vignette img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
/* Voile sombre : le bouton de lecture reste lisible quelle que soit l'image */
.video-vignette::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(30,34,24,.10), rgba(30,34,24,.36));
  transition:background .3s var(--ease);
}
.video-carte:hover .video-vignette img{transform:scale(1.05);}
.video-carte:hover .video-vignette::after{
  background:linear-gradient(to bottom, rgba(30,34,24,.04), rgba(30,34,24,.22));
}
.video-play{
  position:relative;z-index:2;width:62px;height:62px;border-radius:50%;
  background:rgba(253,246,236,.95);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(0,0,0,.32);
  transition:transform .3s var(--ease), background .3s;
}
.video-play::before{
  content:"";border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--sage-900);margin-left:4px;
}
.video-carte:hover .video-play{transform:scale(1.12);background:#fff;}
.video-corps{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;}
.video-source{color:var(--gold-dark);}
.video-titre{line-height:1.3;margin:8px 0 8px;color:var(--sage-900);}
.video-note{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-top:auto;}
@media(max-width:920px){.videos-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.videos-grid{grid-template-columns:1fr;}}

/* ---------- Témoignages en cartes compactes ---------- */
.temoins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
.temoin{
  display:flex;flex-direction:column;height:100%;text-align:left;cursor:pointer;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:24px 22px 22px;font:inherit;color:inherit;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.temoin:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(73,79,54,.10);border-color:var(--sage-300);}
.temoin-nom{color:var(--sage-900);margin-bottom:4px;}
.temoin-role{color:var(--gold-dark);margin-bottom:14px;line-height:1.5;}
.temoin-extrait{font-size:14.5px;line-height:1.65;color:var(--ink-soft);font-style:italic;}
.temoin-plus{margin-top:auto;padding-top:15px;border-top:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--gold-dark);display:inline-flex;align-items:center;gap:7px;}
.temoin-plus span{transition:transform .25s var(--ease);}
.temoin:hover .temoin-plus span{transform:translateX(4px);}
.lb-texte{background:var(--paper);border-radius:16px;padding:38px 36px 32px;max-height:78vh;overflow:auto;}
.lb-texte .temoin-nom{font-size:26px;} .lb-texte .temoin-role{margin-bottom:20px;}
.lb-texte blockquote{margin:0 0 18px;padding-left:20px;border-left:3px solid var(--sage-300);
  font-family:var(--font-body);font-style:italic;font-size:19px;line-height:1.6;color:var(--ink);}
.lb-texte p{font-size:15px;line-height:1.75;color:var(--ink-soft);margin-bottom:14px;}
.lb-texte .src{font-size:12.5px;color:var(--gold-dark);font-weight:600;}
@media(max-width:920px){.temoins-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){
  .temoins-grid{grid-template-columns:1fr;}
  .lb-texte{padding:28px 22px 24px;} .lb-texte blockquote{font-size:17px;padding-left:14px;}
}

/* =========================================================
   TARIFS COMPACTS — l'essentiel visible, le détail au clic
   ========================================================= */
.tarifs{display:flex;flex-direction:column;gap:14px;}
.tarif-carte{border:1px solid var(--line);border-radius:14px;background:var(--paper);
  overflow:hidden;transition:border-color .25s, box-shadow .25s;}
.tarif-carte:hover{border-color:var(--sage-300);box-shadow:0 10px 26px rgba(73,79,54,.07);}
.tarif-carte.ouvert{border-color:var(--sage-300);}
.tarif-tete{
  width:100%;display:flex;align-items:center;gap:16px;
  padding:18px 20px;background:none;border:none;cursor:pointer;
  font:inherit;color:inherit;text-align:left;
}
.tarif-ic{width:42px;height:auto;flex-shrink:0;}
.tarif-ident{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
/* Le nom reste en serif classique, le prix en sans-serif : ni l'un ni
   l'autre ne passe en cursive, un tarif doit se lire d'un coup d'œil. */
.tarif-nom{font-family:var(--font-body);font-size:19px;font-weight:600;color:var(--sage-900);line-height:1.25;}
.tarif-duree{font-family:var(--font-body);font-size:12.5px;color:var(--ink-soft);letter-spacing:.02em;}
.tarif-prix{
  font-family:var(--font-body);font-size:23px;font-weight:700;color:var(--sage-900);
  letter-spacing:-.01em;flex-shrink:0;font-variant-numeric:tabular-nums;
}
.tarif-chevron{width:11px;height:11px;flex-shrink:0;border-right:1.8px solid var(--sage-500);
  border-bottom:1.8px solid var(--sage-500);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s var(--ease);}
.tarif-carte.ouvert .tarif-chevron{transform:rotate(-135deg) translate(-3px,-3px);}
.tarif-detail{max-height:0;overflow:hidden;transition:max-height .38s var(--ease);}
.tarif-detail-in{padding:0 20px 20px;border-top:1px solid var(--line);margin:0 20px;padding-left:0;padding-right:0;}
.tarif-detail-in p{font-size:14.5px;line-height:1.75;color:var(--ink-soft);padding-top:16px;}
@media(max-width:640px){
  .tarif-tete{padding:16px 15px;gap:12px;flex-wrap:wrap;}
  .tarif-ic{width:34px;} .tarif-prix{font-size:21px;}
  .tarif-detail-in{margin:0 15px;} .tarif-detail-in p{font-size:14px;}
}

/* Liens légaux au pied de page */
.footer-legal{display:flex;gap:18px;flex-wrap:wrap;}
.footer-legal a{opacity:.82;transition:opacity .2s;}
.footer-legal a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;}
@media(max-width:640px){.footer-legal{gap:14px;}}

/* =========================================================
   HARMONISATION — passe de validation cliente
   La référence visuelle est « optimiser ses capacités » du hero :
   typographie douce, vert moins foncé. On aligne les autres titres
   dessus au lieu de les laisser en vert sombre.
   ========================================================= */

/* Les titres de section reprennent la cursive et le vert adouci du hero */
h2{
  font-family:var(--font-script);
  font-weight:600;
  color:var(--sage-700);
  line-height:1.25;
  letter-spacing:.004em;
}
/* Les titres de cartes restent en serif : trop de cursive nuirait à la
   lecture rapide. On les adoucit seulement en couleur. */
h3,h4{color:var(--sage-700);}
.sec-head h2{margin-bottom:2px;}

/* Sur-titres : un doré plus doux, jamais noir */
.kicker{color:var(--gold-dark);}/* Aucun titre ne doit rester en gris/noir hérité */

/* ---------- Boutons : un seul comportement, partout ---------- */
.btn,.btn:link,.btn:visited{text-decoration:none;}
.btn-primary{background:var(--sage-700);color:var(--cream);box-shadow:none;}
.btn-primary:hover,.btn-primary:focus-visible{
  background:var(--sage-800);color:var(--cream);
  transform:translateY(-2px);box-shadow:0 12px 26px rgba(98,98,63,.22);
}
.btn-outline{background:transparent;border:1.5px solid var(--sage-500);color:var(--sage-700);}
.btn-outline:hover,.btn-outline:focus-visible{
  background:var(--sage-500);border-color:var(--sage-500);color:var(--paper);
  transform:translateY(-2px);box-shadow:0 12px 26px rgba(160,160,128,.28);
}
.btn-ghost:hover{color:var(--sage-700);}
nav.navlinks a.nav-cta{background:var(--sage-700);}
nav.navlinks a.nav-cta:hover,nav.navlinks a.nav-cta:focus-visible{
  background:var(--sage-800);transform:translateY(-1px);
}
/* Repère visible au clavier — sans cela la navigation au clavier est aveugle */
.btn:focus-visible,.nav-cta:focus-visible,.choice-card:focus-visible,
.video-carte:focus-visible,.temoin:focus-visible,.tarif-tete:focus-visible,
.faq-q:focus-visible,.voir-image:focus-visible{
  outline:2px solid var(--sage-500);outline-offset:3px;
}/* ---------- Lecture : paragraphes explicatifs justifiés ---------- */

/* Jamais de justification sur les titres, boutons et textes courts */
h1,h2,h3,h4,.btn,.kicker,.subtitle,.blog-card-extrait,.video-note,
.tarif-duree,.temoin-role,.hero .lead{text-align:inherit;hyphens:manual;}
@media(max-width:640px){/* Sur une colonne étroite la justification devient laide : on revient à gauche */

}

/* ---------- FAQ : question plus affirmée, réponse plus légère ---------- */
.faq-q{font-weight:600;}
.faq-a-inner{color:var(--ink-soft);font-size:15px;}
.faq-num{color:var(--sage-500);}

/* ---------- Nuance taupe / rosé — page « Qui suis-je » ---------- */
.bloc-taupe{
  background:var(--taupe-clair);
  border:1px solid var(--taupe);
  border-radius:16px;
  padding:30px 32px;
}
.bloc-taupe h3{color:var(--taupe-fonce);}
.bloc-taupe .kicker{color:var(--taupe-fonce);}
.fond-taupe{background:var(--taupe-clair);}
@media(max-width:640px){.bloc-taupe{padding:24px 20px;}}

/* =========================================================
   ACCUEIL — ajustements de la passe de validation
   ========================================================= */

/* Hero : un fond très légèrement chaud plutôt qu'un blanc froid */
.hero{background:linear-gradient(180deg,var(--cream) 0%,var(--paper) 62%);}

/* Le titre entier prend le vert adouci : la cliente ne voulait plus voir
   deux verts différents dans la même phrase. */
/* Une seule et même couleur pour toute la phrase : la cliente ne voulait
   plus voir deux verts différents dans le titre. C'est le vert de
   « optimiser ses capacités » qui a été retenu comme référence. */
.hero h1,.hero h1 em{color:var(--sage-700);font-style:normal;}

/* Sous-titre : on cherche à le garder sur une seule ligne en grand écran */
.hero .lead{
  font-family:var(--font-body);
  font-style:italic;
  max-width:none;
  white-space:nowrap;
  margin-bottom:6px;
}
.hero .lead sup{font-size:.55em;vertical-align:super;font-style:normal;}
.hero .lead-2{
  color:var(--ink-soft);
  margin:0 auto 26px;
}
/* En dessous de 1100px la phrase ne tient plus : on la laisse revenir à la ligne */
@media(max-width:1100px){
  .hero .lead{white-space:normal;max-width:600px;margin-left:auto;margin-right:auto;}
}

/* Texte d'introduction : deux paragraphes courts, centrés et respirants */
.intro-nf{max-width:700px;margin:0 auto;text-align:center;}
.intro-nf p{
  font-size:16.5px;line-height:1.75;color:var(--ink-soft);
  text-align:center;hyphens:none;
}
.intro-nf p + p{margin-top:14px;}

/* Bloc de prudence : l'information reste, l'encombrement disparaît */
.note-prudence{
  max-width:760px;margin:26px auto 0;
  padding:12px 20px;
  border-left:2px solid var(--sage-300);
  background:transparent;
  font-size:13px;line-height:1.65;color:var(--ink-soft);
  text-align:left;hyphens:none;
}
@media(max-width:640px){
  .note-prudence{font-size:12.5px;padding:10px 15px;margin-top:20px;}
  .intro-nf p{font-size:15.5px;}
}

/* Portrait : le cadre derrière la photo suit la nouvelle palette */
.portrait-wrap::before{background:var(--taupe-clair);border-color:var(--taupe);}

/* =========================================================
   VIDÉOS EN PLACE — la miniature devient le lecteur au clic
   ========================================================= */
.video-bloc{margin:0;display:flex;flex-direction:column;}
.video-lecteur{
  position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:var(--sage-800);
  box-shadow:0 12px 30px rgba(98,98,63,.14);
}
.video-lecteur img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.video-lecteur::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom, rgba(30,34,24,.06), rgba(30,34,24,.30));
  transition:background .3s var(--ease);
}
.video-lecteur:hover img{transform:scale(1.04);}
.video-lecteur:hover::after{background:linear-gradient(to bottom, rgba(30,34,24,.02), rgba(30,34,24,.18));}
/* Une fois lancée, plus de voile ni de miniature */
.video-lecteur.en-lecture::after{display:none;}
.video-lecteur iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* Bouton de lecture */
.video-lecteur .video-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:2;width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(252,247,241,.95);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(0,0,0,.30);
  transition:transform .3s var(--ease), background .3s;
}
.video-lecteur .video-play::before{
  content:"";border-style:solid;border-width:12px 0 12px 19px;
  border-color:transparent transparent transparent var(--sage-900);margin-left:4px;
}
.video-lecteur:hover .video-play{transform:translate(-50%,-50%) scale(1.1);background:#fff;}
/* Légende sous la vidéo */
.video-bloc figcaption{padding:14px 2px 0;display:flex;flex-direction:column;gap:5px;}
.video-bloc .video-titre{
  font-family:var(--font-body);font-size:19px;line-height:1.3;color:var(--sage-700);
}
.video-bloc .video-note{font-size:13.5px;line-height:1.6;color:var(--ink-soft);}
@media(max-width:640px){
  .video-lecteur .video-play{width:56px;height:56px;}
  .video-bloc .video-titre{font-size:18px;}
}/* Le panneau ouvert doit se placer sous l'en-tête, pas dessous celle-ci :
   sans cette marge, le titre du panneau se retrouvait masqué au clic. */

/* Horaires du cabinet */
.horaires{list-style:none;padding:0;margin:0;max-width:340px;}
.horaires li{
  display:flex;justify-content:space-between;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;color:var(--ink);
}
.horaires li:last-child{border-bottom:none;}
.horaires li span:first-child{color:var(--sage-700);}
.horaires li span:last-child{color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.horaires li.ferme span:last-child{color:var(--taupe-fonce);font-style:italic;}

/* =========================================================
   CASSE NATURELLE — les titres ne sont plus forcés en capitales.
   Cette police devient dure en majuscules ; on garde la même
   famille et on compense la hiérarchie par la graisse.
   ========================================================= */
.sec-head h2{font-weight:600;letter-spacing:.004em;}

/* =========================================================
   CARTES VIDÉO — « Ils en parlent »
   Chaque vidéo forme un bloc unique : miniature en haut, puis
   nom, sujet et description dans le même cadre. Traitement
   volontairement discret — une bordure fine et une ombre douce.
   ========================================================= */
.videos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}

figure.video-carte{
  margin:0;display:flex;flex-direction:column;height:100%;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(98,98,63,.05);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
figure.video-carte:hover{
  transform:translateY(-3px);
  border-color:var(--sage-300);
  box-shadow:0 16px 32px rgba(98,98,63,.11);
}

/* La miniature occupe toute la largeur de la carte, sans arrondi propre :
   c'est la carte qui porte la forme. */
figure.video-carte .video-lecteur{border-radius:0;box-shadow:none;}

figure.video-carte .video-corps{
  padding:18px 20px 20px;
  display:flex;flex-direction:column;gap:6px;flex:1;
  border-top:1px solid var(--line);
  background:var(--cream);
}
.video-nom{line-height:1.25;
  color:var(--sage-700);
}
.video-sujet{line-height:1.45;
  color:var(--ink);
}
.video-desc{
  font-size:13px;line-height:1.6;color:var(--ink-soft);
  margin-top:auto;padding-top:4px;
}

@media(max-width:920px){
  .videos-grid{grid-template-columns:1fr 1fr;gap:20px;}
}
@media(max-width:640px){
  .videos-grid{grid-template-columns:1fr;gap:18px;}
  figure.video-carte .video-corps{padding:16px 17px 18px;}
}/* =========================================================
   JUSTIFICATION DES CORPS DE TEXTE — passe finale
   Règle générale : tout vrai paragraphe de contenu est justifié,
   avec césure automatique. Sans la césure, la justification
   creuse de grands trous blancs entre les mots.
   ========================================================= */
/* --- Ce qui ne doit JAMAIS être justifié ---
   titres, textes centrés, textes courts, listes de repères,
   légendes, tarifs, horaires : la justification y serait laide. */

/* Ceux-là doivent explicitement rester centrés */
.hero p, .page-hero p, .sec-head p, .subtitle, .intro-nf p,
.article-chapo, .note-prudence, .lb-legende{text-align:center;}
.note-prudence{text-align:left;}

@media(max-width:640px){/* Colonne trop étroite : la justification créerait de gros écarts.
     On revient à un alignement à gauche, plus propre à cette largeur. */

  .hero p, .page-hero p, .sec-head p, .subtitle, .intro-nf p,
  .article-chapo, .lb-legende{text-align:center;}
}

/* =========================================================
   VIDÉOS — la miniature ouvre le lecteur en grand
   ========================================================= */
.video-lecteur{cursor:pointer;}
.video-lecteur .video-play{cursor:pointer;}
/* La fenêtre agrandie : format 16/9 confortable, sans déborder de l'écran */
.lb-boite{max-width:min(94vw,1080px);}
.lb-cadre{padding-top:56.25%;}
@media(max-width:900px){
  .lb-boite{max-width:96vw;}
}
@media(max-width:640px){
  .lb{padding:66px 10px 20px;}
  .lb-boite{max-width:100%;}
  .lb-fermer{top:-52px;right:50%;transform:translateX(50%);width:46px;height:46px;font-size:24px;}
  .lb-legende{font-size:13px;margin-top:12px;}
}

/* =========================================================
   PALETTE DÉFINITIVE — taupe #E2DACB · vert #68684C
   La cliente souhaitait moins de codes couleur concurrents :
   les grands aplats verts foncés laissent la place au taupe,
   le vert redevient une couleur de titre et d'accent.
   ========================================================= */

/* Les gros encadrés passent en taupe plutôt qu'en vert soutenu */
.keybox{
  background:var(--cream-2);
  border:1px solid var(--taupe);
  color:var(--ink);
}
.keybox .kb-title{color:var(--sage-900);}
.keybox p,.keybox em{color:var(--ink-soft);}

.sage-band{
  background:var(--cream-2);
  border:1px solid var(--taupe);
  color:var(--ink);
}
.sage-band p{color:var(--ink-soft);}
.sage-band .sb-ic{background:var(--sage-700);}
/* L'icône du bandeau était blanche sur vert : elle doit rester lisible */
.sage-band .sb-ic img{filter:brightness(0) invert(1);opacity:.92;}

/* Encadrés de prudence et cadre de l'accompagnement */
.disclaimer{
  background:var(--cream-2);
  border:1px solid var(--taupe);
  border-left:3px solid var(--sage-700);
  color:var(--ink-soft);
}
.disclaimer b{color:var(--sage-900);}

/* « Mon engagement » et les blocs équivalents */
.bloc-taupe{background:var(--cream-2);border-color:var(--taupe);}
.bloc-taupe h3,.bloc-taupe .kicker{color:var(--sage-900);}
.fond-taupe{background:var(--cream-2);}

/* Un seul vert pour les titres et les accents */
h2,h3,h4{color:var(--sage-900);}
.kicker{color:var(--sage-700);}

/* =========================================================
   ACCUEIL — cohérence avec les bandeaux des autres pages
   ========================================================= */
/* Le hero reprend le même aplat taupe que les en-têtes de Méthode,
   Séance, Qui suis-je et Cabinet : l'accueil n'était pas raccord. */
.hero{background:var(--cream-2);}

/* Plus de carré graphique derrière le portrait : la cliente veut la
   photo seule, sans encadrement décoratif. */
.portrait-wrap::before{display:none;}
.portrait-wrap{max-width:330px;}
.portrait{border-radius:14px;box-shadow:0 14px 34px rgba(90,90,65,.14);}
@media(max-width:640px){.portrait-wrap{max-width:260px;margin:0 auto;}}/* =========================================================
   DÉROULEMENT D'UNE SÉANCE — présentation verticale
   La cliente souhaite lire les cinq temps les uns sous les
   autres, comme la page « Votre accompagnement ». On garde le
   balisage existant : la navigation par onglets est masquée et
   toutes les étapes deviennent visibles, reliées par un filet.
   ========================================================= */
/* Toutes les étapes sont affichées, plus une seule à la fois */
/* Le filet vertical qui relie les étapes entre elles */
/* Pastille numérotée à la place de l'icône ronde */
/* Une seule et même typographie pour les cinq étapes */

@media(max-width:640px){
}/* Le bloc de conclusion reprend le traitement du sous-titre de la page */

/* =========================================================
   FINITIONS — survol, FAQ, typographies
   ========================================================= */

/* ---- Survol des boutons ----
   La palette ayant été resserrée, --sage-700 et --sage-800 sont
   devenus identiques : le survol ne produisait plus aucun effet.
   On prend une nuance nettement plus soutenue au survol. */
.btn-primary{background:var(--sage-700);color:var(--cream);}
.btn-primary:hover,.btn-primary:focus-visible{
  background:var(--sage-900);color:var(--cream);
  transform:translateY(-2px);box-shadow:0 12px 26px rgba(90,90,65,.26);
}
.btn-outline{background:transparent;border:1.5px solid var(--sage-700);color:var(--sage-900);}
.btn-outline:hover,.btn-outline:focus-visible{
  background:var(--sage-700);border-color:var(--sage-700);color:var(--cream);
  transform:translateY(-2px);box-shadow:0 12px 26px rgba(104,104,76,.24);
}
nav.navlinks a.nav-cta{background:var(--sage-700);color:var(--cream)!important;}
nav.navlinks a.nav-cta:hover,nav.navlinks a.nav-cta:focus-visible{
  background:var(--sage-900);transform:translateY(-1px);
}
.voir-image:hover{background:var(--sage-700);color:var(--cream);border-color:var(--sage-700);}

/* ---- FAQ : la question doit primer sur la réponse ----
   À 18,5 px la question se lisait presque comme le corps de la
   réponse (14,5 px). On creuse l'écart : rapport de 1,45 entre les
   deux, la hiérarchie devient immédiate. */
.faq-q{
  font-family:var(--font-body);
  font-size:21px;
  font-weight:700;
  color:var(--sage-900);
  line-height:1.3;
}
.faq-num{color:var(--sage-500);}
.faq-a-inner{
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:400;
  line-height:1.75;
  color:var(--ink-soft);
}
/* Les quatre filtres partagent exactement le même traitement */
.faq-filter{
  font-family:var(--font-body);
  font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:none;
  color:var(--sage-900);
  border:1px solid var(--taupe);
  background:var(--paper);
}
.faq-filter.active{background:var(--sage-700);color:var(--cream);border-color:var(--sage-700);}
.faq-filter:hover{border-color:var(--sage-500);}
.faq-tag{background:var(--cream-2);color:var(--sage-900);}
@media(max-width:640px){.faq-q{line-height:1.35;} .faq-a-inner{font-size:14px;}}

/* ---- Petits titres et informations pratiques : un seul système ---- */
.horaires li span:first-child{
  font-family:var(--font-body);font-size:14.5px;font-weight:600;color:var(--sage-900);
}

/* ---- Pied de page : le logo reste contenu et aligné ---- */
.footer-brand .logo-disc{width:58px;height:58px;padding:6px;background:var(--cream);}
.footer-brand .logo-disc img{width:100%;height:auto;}
.footer-brand{align-items:center;gap:14px;}

/* =========================================================
   MÉTHODE — les trois cartes sur une même ligne
   Elles n'avaient pas la même hauteur selon la longueur du
   texte : on les étire à la hauteur de la plus grande et on
   pousse le lien « Découvrir » en bas de chacune.
   ========================================================= */
.choice-grid.trois{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  align-items:stretch;
}
.choice-grid.trois .choice-card{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:28px 24px 24px;
  margin:0;
}
.choice-grid.trois .choice-card > div{
  display:flex;flex-direction:column;flex:1;width:100%;
}
.choice-grid.trois .choice-card h3{min-height:2.6em;display:flex;align-items:center;justify-content:center;}
.choice-grid.trois .choice-card p{flex:1;}
.choice-grid.trois .choice-card .cc-go{margin-top:auto;padding-top:14px;}
@media(max-width:920px){
  .choice-grid.trois{grid-template-columns:1fr 1fr;}
  .choice-grid.trois .choice-card h3{min-height:0;}
}
@media(max-width:640px){
  .choice-grid.trois{grid-template-columns:1fr;gap:16px;}
}/* =========================================================
   TIMELINE VERTICALE — reprise complète
   ---------------------------------------------------------
   L'ancienne version héritait des règles du carrousel horizontal :
   aplat vert sur l'étape active, icône de 110 px qui perdait son
   contraste, pas de repère de progression. On repart sur une vraie
   timeline : cercle numéroté à gauche, carte à droite, filet vertical.
   ========================================================= */
/* --- une étape : cercle + carte --- */
/* --- le filet qui relie les cercles entre eux --- */
/* --- le cercle numéroté : clair, contrasté, jamais illisible --- */
/* --- la carte de l'étape --- */
/* --- l'icône reste, en discret, sans jamais poser de souci de lisibilité --- */
/* --- survol : accent sur le cercle, teinte très légère sur la carte --- */
/* --- textes : une seule et même typographie pour les cinq étapes --- */

/* --- mobile --- */
@media(max-width:640px){
}/* =========================================================
   DÉROULEMENT D'UNE SÉANCE — version simple
   ---------------------------------------------------------
   On abandonne la timeline à filet vertical : trop de signaux
   visuels pour peu de bénéfice. Les cinq étapes sont de simples
   encadrés empilés, chacun avec son numéro et son icône, qui
   apparaissent au fil du défilement.
   ========================================================= */
/* --- une étape = un encadré sobre --- */
/* --- le numéro --- */
/* --- l'icône, juste sous le numéro, toujours dans ses couleurs --- */
/* --- le texte --- */
/* --- apparition au défilement, étape par étape --- */

/* Sans JavaScript, ou si l'animation ne se déclenche pas,
   les étapes doivent rester lisibles. */
@media (prefers-reduced-motion: reduce){
}

@media(max-width:640px){
}

/* =========================================================================
   SYSTÈME TYPOGRAPHIQUE — quatre styles, et rien d'autre
   -------------------------------------------------------------------------
   Tout le site se lit avec quatre traitements. Un élément appartient à un
   style selon son RÔLE visuel, pas selon sa balise : une question de FAQ et
   une accroche de section partagent le même style même si l'une est un div
   et l'autre un paragraphe.

     STYLE 1  corps de texte ............ Manrope
     STYLE 2  grands titres ............. Dancing Script
     STYLE 3  petits titres et labels ... Manrope, petit et espacé
     STYLE 4 · sous-titres et questions ...... Manrope

   Pour modifier une taille, il n'y a plus qu'un seul endroit : ici.
   ========================================================================= */

:root{
  --t1-taille:16px;          --t1-hauteur:1.75;
  --t2-poids:600;
  --t3-taille:12px;          --t3-poids:700;   --t3-espacement:.06em;
  --t4-titre:21px;           --t4-poids:600;
}/* -------------------------------------------------------------------------
   STYLE 1 — CORPS DE TEXTE
   Paragraphes, descriptions, réponses de FAQ, articles, contenus de cartes.
   ------------------------------------------------------------------------- */

body{font-size:var(--t1-taille);font-weight:400;line-height:1.62;}
p, li, .mp, .article-corps p{line-height:var(--t1-hauteur);}
.video-sujet{font-weight:600;font-size:14px;}
.video-desc, .video-note{font-size:13.5px;}
.horaires li span:first-child{font-size:14.5px;font-weight:600;}
.horaires li span:last-child{font-size:14.5px;font-weight:400;}
.note-prudence, .disclaimer, .tbd{font-size:13px;}

/* -------------------------------------------------------------------------
   STYLE 2 — GRANDS TITRES
   La signature du site. Réservée aux titres de page et de section.
   ------------------------------------------------------------------------- */
h1, h2{
  font-family:var(--font-script);
  font-weight:var(--t2-poids);
  font-style:normal;
  text-transform:none;
  letter-spacing:.004em;
}
h1{font-size:clamp(40px,6.2vw,70px);line-height:1.24;color:var(--sage-900);}
h2{font-size:clamp(28px,4vw,42px);line-height:1.25;color:var(--sage-900);}
h1 em, h2 em{font-style:normal;}
.page-hero h1{font-size:clamp(36px,5.5vw,56px);}
.hero h1{font-size:clamp(40px,6.2vw,70px);}
.article-tete h1{font-size:clamp(32px,4.6vw,50px);}/* -------------------------------------------------------------------------
   STYLE 3 — PETITS TITRES, LABELS, ÉTAPES
   Sur-titres, numéros d'étape, dates, mentions, liens d'action discrets.
   Casse naturelle : la hiérarchie vient de la graisse, pas des capitales.
   ------------------------------------------------------------------------- */

.hero .kicker, .page-hero .kicker{font-size:12.5px;}
.sec-head .kicker{font-size:13px;}
.faq-num{font-size:12px;color:var(--sage-500);}
.faq-filter{font-size:12.5px;}
.brand .btext .s, .footer-brand .n small{font-size:10px;letter-spacing:.08em;}
.bienfaits-centre .bc-t{font-size:14px;line-height:1.4;}

/* -------------------------------------------------------------------------
   STYLE 4 — SOUS-TITRES, ACCROCHES, QUESTIONS
   Référence : « Un accompagnement doux et personnalisé avec la méthode
   NeurOptimal® ». Italique pour les phrases mises en avant, romain pour les
   titres de cartes — même police, même famille visuelle.
   ------------------------------------------------------------------------- */
.hero .lead, .subtitle, .article-chapo, .modal-lead,
.faq-q > span:first-child,
.keybox .kb-title, .quote-card p{
  font-family:var(--font-body);
  font-style:italic;
  font-weight:500;
  text-transform:none;
  letter-spacing:normal;
}
.hero .lead{font-size:clamp(19px,2.1vw,23px);line-height:1.45;color:var(--ink-soft);}
.subtitle{font-size:clamp(17px,1.9vw,20px);line-height:1.55;color:var(--ink-soft);}
.article-chapo{font-size:20px;line-height:1.55;}
.modal-lead{font-size:18px;}
.keybox .kb-title{font-size:clamp(17px,2vw,21px);font-style:normal;font-weight:600;color:var(--sage-900);}
.hero .lead-2{font-family:var(--font-body);font-size:15px;font-weight:400;font-style:normal;color:var(--ink-soft);}/* Titres de cartes : même police, en romain */

h4, .card h4, .step h4, .etape-txt h4, .nf-txt h4, .tarif-head h4, .tarif-nom{font-size:18px;}
.modal-scroll h3{font-size:clamp(22px,3vw,26px);}
.footer-brand .n{font-size:17px;font-weight:500;color:#f1f1e6;}

/* --- FAQ : la question est une accroche, la réponse un corps de texte --- */
.faq-q{font-family:var(--font-body);}
.faq-q > span:first-child{font-size:20px;line-height:1.35;color:var(--sage-900);}
.faq-q .plus{font-family:var(--font-body);font-style:normal;font-weight:400;}
.faq-a-inner{color:var(--ink-soft);line-height:1.75;}

/* --- Les prix restent en chiffres sans empattement, jamais en cursive --- */
.tarif-prix, .price-card .amount{
  font-family:var(--font-body);font-style:normal;font-weight:700;text-transform:none;
}
.tarif-prix{font-size:23px;letter-spacing:-.01em;}
.tarif-duree{font-family:var(--font-body);font-size:12.5px;font-weight:400;font-style:normal;
  text-transform:none;letter-spacing:.02em;color:var(--ink-soft);}

/* --- Mobile : on resserre sans changer de système --- */
@media(max-width:640px){
  :root{--t1-taille:15.5px;--t4-titre:19px;}
  h1{font-size:clamp(31px,8.6vw,40px);line-height:1.3;}
  h2{font-size:clamp(25px,7vw,32px);}
  .page-hero h1{font-size:clamp(29px,8vw,36px);}
  .faq-q > span:first-child{font-size:18px;}
  .hero .lead{font-size:17.5px;}
  h4, .card h4, .step h4, .nf-txt h4, .tarif-head h4{font-size:17px;}
}


/* =========================================================================
   SYSTÈME TYPOGRAPHIQUE — blocs 1, 3 et 4 (suite)
   ========================================================================= */

/* --- STYLE 1 : corps de texte --- */
body,
p, li, .mp,
.card p, .choice-card p, .step-panel p, .sp-txt p, .nf-txt p,
.faq-a-inner,
.video-sujet, .video-desc, .video-note,
.temoin-extrait, .blog-card-extrait,
.article-corps, .article-corps p, .article-corps li,
.modal-body, .modal-points li,
.keybox p, .sage-band p, .bloc-taupe p,
.horaires li span:first-child, .horaires li span:last-child,
.note-prudence, .disclaimer, .tbd{
  font-family:var(--font-body);
  font-style:normal;
  text-transform:none;
  letter-spacing:normal;
}
body{font-size:var(--t1-taille);font-weight:400;line-height:1.62;}
p, li, .mp, .article-corps p{line-height:var(--t1-hauteur);}
.card p, .choice-card p, .sp-txt p, .nf-txt p,
.faq-a-inner, .temoin-extrait, .blog-card-extrait{font-size:15px;font-weight:400;}
.video-sujet{font-weight:600;font-size:14px;}
.video-desc, .video-note{font-size:13.5px;}
.horaires li span:first-child{font-size:14.5px;font-weight:600;}
.horaires li span:last-child{font-size:14.5px;font-weight:400;}
.note-prudence, .disclaimer, .tbd{font-size:13px;}

/* --- STYLE 3 : petits titres, labels, étapes --- */
.kicker, .hero .kicker, .page-hero .kicker, .sec-head .kicker,
.sp-kicker,
.video-source, .temoin-role,
.blog-date, .article-date,
.faq-num, .faq-tag, .faq-filter,
.price-card .tag, .modal-kicker,
footer h5, .brand .btext .s, .footer-brand .n small,
.hint, .is-openable .hint, .nf-txt .hint,
.choice-card .cc-go, .cp-close,
.bienfaits-centre .bc-t{
  font-family:var(--font-body);
  font-size:var(--t3-taille);
  font-weight:var(--t3-poids);
  font-style:normal;
  letter-spacing:var(--t3-espacement);
  text-transform:none;
  line-height:1.45;
}
.hero .kicker, .page-hero .kicker{font-size:12.5px;}
.sec-head .kicker{font-size:13px;}
.faq-num{font-size:12px;color:var(--sage-500);}
.faq-filter{font-size:12.5px;}
.brand .btext .s, .footer-brand .n small{font-size:10px;letter-spacing:.08em;}
.bienfaits-centre .bc-t{font-size:14px;line-height:1.4;}

/* --- STYLE 4 : titres de cartes (même police, en romain) --- */
h3, h4,
.choice-card h3, .step-panel h3, .sp-txt h3, .modal-scroll h3,
.card h4, .step h4, .etape-txt h4, .nf-txt h4, .tarif-head h4, .bienfait-card h4,
.temoin-nom, .video-nom, .blog-card-titre, .tarif-nom, .footer-brand .n{
  font-family:var(--font-body);
  font-weight:var(--t4-poids);
  font-style:normal;
  text-transform:none;
  letter-spacing:.004em;
  line-height:1.3;
  color:var(--sage-900);
}
h3, .choice-card h3, .sp-txt h3, .temoin-nom, .video-nom,
.blog-card-titre, .bienfait-card h4{font-size:var(--t4-titre);}
h4, .card h4, .step h4, .etape-txt h4, .nf-txt h4, .tarif-head h4, .tarif-nom{font-size:18px;}
.modal-scroll h3{font-size:clamp(22px,3vw,26px);}
.step-panel h3{font-size:var(--t4-titre);}
.footer-brand .n{font-size:17px;font-weight:500;color:#f1f1e6;}

@media(max-width:640px){
  h4, .card h4, .step h4, .nf-txt h4, .tarif-head h4{font-size:17px;}
}

/* =========================================================================
   DÉROULEMENT D'UNE SÉANCE
   -------------------------------------------------------------------------
   Une seule règle, une seule génération. Cinq encadrés numérotés qui
   apparaissent au défilement. Pas d'icône, pas de trait, pas de navigation :
   les trois versions successives qui se superposaient ont été supprimées.
   ========================================================================= */
.stepper{max-width:740px;margin:0 auto;}
.stepper-panels{display:flex;flex-direction:column;gap:16px;}

.step-panel{
  display:grid;
  grid-template-columns:48px 1fr;
  column-gap:20px;
  align-items:start;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px 26px;
  position:relative;
}

/* le numéro de l'étape, tiré de l'attribut data-step */
.step-panel::before{
  content:attr(data-step);
  width:48px;height:48px;
  border-radius:50%;
  background:var(--cream-2);
  border:1px solid var(--taupe);
  color:var(--sage-900);
  font-family:var(--font-body);
  font-size:18px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.sp-txt{min-width:0;padding-top:3px;}
.sp-kicker{color:var(--sage-700);margin-bottom:6px;}
.sp-txt h3{margin:0 0 8px;}
.sp-txt p{color:var(--ink-soft);line-height:1.75;text-align:justify;hyphens:auto;margin:0;}

/* apparition au fil du défilement */
.step-panel.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);}
.step-panel.reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .step-panel.reveal{opacity:1;transform:none;transition:none;}
}

@media(max-width:640px){
  .step-panel{grid-template-columns:40px 1fr;column-gap:14px;padding:18px 18px;}
  .step-panel::before{width:40px;height:40px;font-size:16px;}
  .sp-txt p{text-align:left;font-size:14.5px;}
}


/* =========================================================================
   GRILLES DE CARTES — une composition équilibrée à chaque largeur
   -------------------------------------------------------------------------
   Règle de base : jamais une carte seule sur la ligne suivante. Pour un
   groupe de trois, on passe directement de 3 colonnes à 1 — un 2+1 est
   toujours plus disgracieux qu'une pile propre.
   ========================================================================= */

/* --- groupes de 3 cartes --- */
.choice-grid.trois,
.grid-3,
.videos-grid,
.temoins-grid,
.blog-grid,
.bienfaits-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
  justify-content:center;
}
@media(max-width:1000px){
  .bienfaits-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:900px){
  /* on ne passe pas par un 2+1 : trois colonnes puis une seule */
  .choice-grid.trois,
  .grid-3{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto;}
  .videos-grid,
  .temoins-grid,
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
  .videos-grid,.temoins-grid,.blog-grid,.bienfaits-grid{grid-template-columns:1fr;gap:18px;}
}

/* --- groupes de 2 cartes --- */
.choice-grid:not(.trois){
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch;
}
@media(max-width:820px){
  .choice-grid:not(.trois){grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto;}
}

/* --- groupe de 6 cartes (accueil « Pour qui ») --- */
.grid-6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;}
@media(max-width:1180px){.grid-6{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:760px){.grid-6{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:480px){.grid-6{grid-template-columns:1fr;}}

/* --- les cartes d'un même groupe ont la même hauteur --- */
.choice-grid > *, .grid-3 > *, .grid-6 > *,
.videos-grid > *, .temoins-grid > *, .blog-grid > *{height:100%;}

/* =========================================================================
   STRUCTURES ET INSTITUTIONS — cinq cartes sur fond vert
   Même traitement visuel que les témoignages du dessus. Cinq cartes se
   répartissent en 3 + 2, la seconde ligne restant centrée.
   ========================================================================= */
.structures-grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:20px;
  max-width:1040px;margin:0 auto;
}
.structures-grid > *{
  flex:1 1 260px;
  max-width:calc(33.333% - 14px);
}
.structure{
  display:flex;flex-direction:column;gap:8px;
  background:var(--cream-2);
  border:1px solid var(--taupe);
  border-radius:16px;
  padding:22px 22px 24px;
}
.structure-nom{
  font-family:var(--font-body);
  font-size:19px;font-weight:600;line-height:1.3;
  color:var(--sage-900);
}
.structure-desc{
  font-family:var(--font-body);
  font-size:14px;line-height:1.65;color:var(--ink-soft);
  text-align:left;
}
@media(max-width:900px){
  .structures-grid > *{max-width:calc(50% - 10px);}
}
@media(max-width:640px){
  .structures-grid > *{max-width:100%;flex-basis:100%;}
  .structure{padding:18px 18px 20px;}
}

/* =========================================================================
   JUSTIFICATION DES CORPS DE TEXTE
   Cette règle avait disparu lors du nettoyage typographique : elle est
   rétablie ici, avec césure automatique pour éviter les trous entre les mots.
   ========================================================================= */
main p, main li,
.mp,
.cp-inner p, .cp-inner li,
.modal-body, .modal-body p,
.faq-a-inner,
.article-corps p, .article-corps li,
.sp-txt p, .nf-txt p,
.bloc-taupe p{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  text-wrap:pretty;
}
/* Ce qui ne doit jamais être justifié */
h1, h2, h3, h4, h5, h6,
.hero p, .hero .lead, .hero .lead-2,
.page-hero p, .subtitle, .localisation,
.article-tete p, .sec-head p, .intro-nf p, .article-chapo,
.kicker, .sp-kicker, .modal-kicker,
.btn, .nav-cta, nav.navlinks a, .cc-go, .hint, .cp-close,
.blog-card-extrait, .blog-card-titre, .blog-date, .article-date,
.video-nom, .video-sujet, .video-desc, figcaption, figcaption *,
.temoin-nom, .temoin-role, .temoin-extrait, .temoin-plus,
.structure-nom, .structure-desc,
.tarif-nom, .tarif-duree, .tarif-prix, .horaires, .horaires *,
.bf-list, .bf-list li, .bc-t,
.note-prudence, .tbd, .disclaimer,
.keybox p, .kb-title, .sage-band p,
.modal-points, .modal-points li, .modal-lead, .modal-foot,
.faq-q, .faq-q *, .faq-tag, .faq-filter,
.card p, .choice-card p,
footer, footer *, .footer-legal, .announce,
.lb-legende, .lb-texte .src{
  text-align:inherit;
  hyphens:manual;
  -webkit-hyphens:manual;
}
.hero p, .page-hero p, .sec-head p, .subtitle, .localisation,
.intro-nf p, .article-chapo, .lb-legende{text-align:center;}
.note-prudence{text-align:left;}

@media(max-width:640px){
  /* colonne trop étroite : la justification creuserait des trous */
  main p, main li, .mp, .cp-inner p, .modal-body, .modal-body p,
  .faq-a-inner, .article-corps p, .article-corps li,
  .sp-txt p, .nf-txt p, .bloc-taupe p{text-align:left;hyphens:auto;}
  .hero p, .page-hero p, .sec-head p, .subtitle, .localisation,
  .intro-nf p, .article-chapo, .lb-legende{text-align:center;}
}

/* --- Bandeau du Cabinet : la localisation passe sous l'accroche --- */
.page-hero .localisation{
  font-family:var(--font-body);
  font-size:14.5px;
  color:var(--ink-soft);
  margin:8px auto 0;
  max-width:620px;
}


/* =========================================================================
   PHOTO D'ACCÈS AU CABINET
   Taille moyenne, traitement doux : coins arrondis, filet fin, pas d'ombre
   marquée. Elle accompagne les informations pratiques sans devenir un hero.
   ========================================================================= */
.photo-acces{margin:22px 0 0;}
.photo-acces img{
  width:100%;height:auto;display:block;
  max-height:240px;object-fit:cover;object-position:center 58%;
  border-radius:14px;
  border:1px solid var(--line);
}
.photo-acces figcaption{
  font-family:var(--font-body);
  font-size:12.5px;line-height:1.5;color:var(--ink-soft);
  margin-top:8px;text-align:left;
}
@media(max-width:900px){
  .photo-acces img{max-height:220px;}
}
@media(max-width:640px){
  .photo-acces{margin-top:18px;}
  .photo-acces img{max-height:190px;}
  .photo-acces figcaption{font-size:12px;}
}

/* =========================================================================
   ANNUAIRE OFFICIEL NEUROPTIMAL®
   Mention volontairement discrète : elle ne doit pas concurrencer les
   boutons de prise de rendez-vous.
   ========================================================================= */
.annuaire{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line);
}
.annuaire-titre{
  font-family:var(--font-body);
  font-size:13px;font-weight:700;letter-spacing:.02em;
  color:var(--sage-900);line-height:1.4;
}
.annuaire-texte{
  font-family:var(--font-body);
  font-size:13px;line-height:1.6;color:var(--ink-soft);
}
.annuaire-lien{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:5px;
  font-family:var(--font-body);
  font-size:12.5px;font-weight:600;
  color:var(--sage-700);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--taupe);
  transition:color .2s, text-decoration-color .2s;
}
.annuaire-lien:hover,.annuaire-lien:focus-visible{
  color:var(--sage-900);text-decoration-color:var(--sage-700);
}
@media(max-width:640px){
  .annuaire{margin-top:18px;padding-top:16px;}
}


/* =========================================================================
   SURVOL DES BOUTONS PLEINS — le vert bascule en taupe
   -------------------------------------------------------------------------
   Au repos : fond vert, texte clair. Au survol : fond taupe, texte vert
   foncé. Le changement est franc (13 % → 71 % de luminosité), on voit
   immédiatement que le bouton réagit. Contraste du texte : 5,09:1.
   ========================================================================= */
.btn-primary,
nav.navlinks a.nav-cta{
  border:1.5px solid var(--sage-700);
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease),
             box-shadow .25s var(--ease);
}
.btn-primary:hover,
.btn-primary:focus-visible,
nav.navlinks a.nav-cta:hover,
nav.navlinks a.nav-cta:focus-visible{
  background:var(--cream-2);
  color:var(--sage-900) !important;
  border-color:var(--taupe);
  box-shadow:0 12px 26px rgba(104,104,76,.18);
}
.btn-primary:hover{transform:translateY(-2px);}
nav.navlinks a.nav-cta:hover{transform:translateY(-1px);}


/* --- Note de prudence de l'accueil : un intitulé puis le texte --- */
.note-prudence{display:block;}
.note-prudence-titre{
  display:block;
  font-family:var(--font-body);
  font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--sage-900);
  margin-bottom:6px;
}
.note-prudence p{
  margin:0;
  font-family:var(--font-body);
  font-size:13px;line-height:1.65;color:var(--ink-soft);
  text-align:left;hyphens:none;
}


/* Sous-titre à l'intérieur d'un encadré clé */
.keybox .kb-sous-titre{
  font-family:var(--font-body);
  font-style:italic;
  font-size:16px;
  color:var(--ink-soft);
  margin:0 0 12px;
}


/* =========================================================
   RÈGLE TYPOGRAPHIQUE FINALE — 3 FAMILLES, USAGES FIXÉS
   Dancing Script  : grands H1 de page uniquement
   Manrope         : H2 à H4, titres de cartes, questions FAQ, sous-titres
   Manrope         : tout le reste (lecture et interface)
   Seules les tailles, graisses et interlignages portent la hiérarchie.
   ========================================================= */

/* Les H2 (titres de section) quittent la manuscrite pour la serif éditoriale.
   Tailles, graisses, couleurs et espacements inchangés. */
h2,
.sec-head h2,
.article-corps h2{
  font-family:var(--font-body);
  font-style:normal;
}

/* Dancing Script strictement réservée aux grands titres de page */
h1,
.hero h1,
.page-hero h1,
.article-tete h1{
  font-family:var(--font-script);
}


/* =========================================================
   ITALIQUE — SUPPRESSION SUR LES ÉLÉMENTS DE STRUCTURE
   L'italique avait un dessin de lettre très
   différent du romain et se lit comme une police supplémentaire.
   Il ne subsiste donc que sur les citations encadrées (blockquote),
   où il est un signe de citation et non un choix typographique.
   Rien d'autre ne change : familles, tailles, graisses, couleurs.
   ========================================================= */
.hero .lead,
.hero h1 em,
h1 em,
h2 em,
.subtitle,
.sec-head .subtitle,
.article-chapo,
.modal-lead,
.faq-q > span:first-child,
.faq-empty,
.keybox .kb-title,
.keybox .kb-sous-titre,
.keybox em,
.quote-card p,
.tarif-duree,
.temoin-extrait,
.modal-figure figcaption{
  font-style:normal;
}

/* « Fermé » : la couleur suffit à le distinguer, plus d'italique. */
.horaires li.ferme span:last-child{font-style:normal;}


/* =========================================================
   PASSAGE À DEUX FAMILLES — ADAPTATION OPTIQUE
   Manrope est une linéale : à taille égale, sa hauteur d'x est
   nettement supérieure à celle d'un Garamond, et son gris de page
   plus dense. Les titres paraissent donc plus gros et plus lourds
   qu'avant. On ne change ni la structure, ni les couleurs, ni les
   marges : on réajuste seulement les tailles d'environ 12 %, on
   resserre l'interlignage et on passe à un léger crénage négatif,
   qui convient aux linéales dans les grandes tailles.
   ========================================================= */

h2, .sec-head h2{
  font-size:clamp(25px,3.5vw,37px);
  line-height:1.2;
  letter-spacing:-.015em;
}
.article-corps h2{ font-size:25px; line-height:1.25; letter-spacing:-.012em; }
.modal-scroll h3{ font-size:clamp(20px,2.7vw,23px); letter-spacing:-.01em; }
.lb-texte .temoin-nom{ font-size:23px; }

:root{ --t4-titre:19px; }
h3, h4,
.choice-card h3, .step-panel h3, .sp-txt h3, .modal-scroll h3,
.card h4, .step h4, .etape-txt h4, .nf-txt h4,
.temoin-nom, .video-nom, .structure-nom, .tarif-nom, .blog-card-titre{
  letter-spacing:-.008em;
  line-height:1.3;
}
h4, .card h4, .step h4, .etape-txt h4, .nf-txt h4{ font-size:17px; }
.structure-nom, .tarif-nom{ font-size:17.5px; }

.faq-q > span:first-child{ font-size:18px; line-height:1.4; letter-spacing:-.005em; }
.sec-head .subtitle, .subtitle{ font-size:clamp(16px,1.8vw,19px); }
.keybox .kb-title{ font-size:clamp(16px,1.8vw,19px); letter-spacing:-.008em; }
.article-chapo{ font-size:18px; }
.modal-lead{ font-size:17px; }

/* Casse naturelle : plus aucune majuscule forcée sur le site. */
.is-openable .hint{ text-transform:none; }

@media(max-width:900px){
  h2, .sec-head h2{ font-size:clamp(22px,6.2vw,28px); }
  .article-corps h2{ font-size:22px; }
  :root{ --t4-titre:17px; }
  h4, .card h4, .step h4, .etape-txt h4, .nf-txt h4{ font-size:16px; }
  .faq-q > span:first-child{ font-size:16.5px; }
  .article-chapo{ font-size:17px; }
}


/* =========================================================
   H2 EN DANCING SCRIPT — MÊME IDENTITÉ QUE LES H1
   Les grands titres de section retrouvent l'écriture manuscrite,
   comme les titres de page. Les tailles, l'interlignage et le
   crénage reviennent aux valeurs qui convenaient à cette police :
   une manuscrite a une hauteur d'x plus faible et des jambages
   longs, elle demande donc plus de place qu'une linéale.
   Les titres de cartes d'articles ne sont pas concernés : ce sont
   des titres de carte, pas des titres de section.
   ========================================================= */

h2,
.sec-head h2,
.article-corps h2{
  font-family:var(--font-script);
  font-weight:var(--t2-poids);
  font-style:normal;
  text-transform:none;
  letter-spacing:.004em;
}

h2, .sec-head h2{
  font-size:clamp(28px,4vw,42px);
  line-height:1.25;
}

/* Intertitres à l'intérieur d'un article de blog */
.article-corps h2{ font-size:30px; line-height:1.35; }

/* Les titres des cartes du blog restent en Manrope */
.blog-card-titre{
  font-family:var(--font-body);
  font-size:var(--t4-titre);
  font-weight:var(--t4-poids);
  letter-spacing:-.008em;
  line-height:1.3;
}

@media(max-width:900px){
  h2, .sec-head h2{ font-size:clamp(25px,7vw,32px); }
  .article-corps h2{ font-size:26px; }
}


/* =========================================================
   RÈGLE FINALE — LA MANUSCRITE POUR CE QUI NOMME,
   LA LINÉALE POUR CE QUI EXPLIQUE
   Le critère n'est pas la balise mais le rôle : un texte qui
   NOMME une page, une section, une carte, un bloc ou une modale
   est un titre → Dancing Script. Un texte qui décrit, étiquette,
   accompagne ou informe → Manrope.
   Audit fait composant par composant : sur ce site, tous les
   h1 à h4 sont des titres éditoriaux ; les h5 sont les intitulés
   de colonnes du pied de page et restent en Manrope.
   Les tailles augmentent d'environ 30 % : une manuscrite a une
   hauteur d'x faible, elle serait illisible aux tailles de la
   linéale. Le crénage redevient positif — on ne resserre jamais
   une écriture liée.
   ========================================================= */

h1, h2, h3, h4,
.choice-card h3, .step-panel h3, .sp-txt h3, .modal-scroll h3,
.card h4, .step h4, .etape-txt h4, .nf-txt h4, .bf-head h4, .bienfait-card h4,
.keybox .kb-title,
.blog-card-titre, .blog-card-titre a,
.temoin-nom, .video-nom, .structure-nom,
.faq-q > span:first-child{
  font-family:var(--font-script);
  font-style:normal;
  text-transform:none;
  letter-spacing:.004em;
}

/* Tailles adaptées à la manuscrite */
:root{ --t4-titre:25px; }
h3, .choice-card h3, .sp-txt h3, .step-panel h3,
.temoin-nom, .video-nom, .blog-card-titre, .bienfait-card h4{
  font-size:var(--t4-titre);
  line-height:1.35;
}
h4, .card h4, .step h4, .etape-txt h4, .nf-txt h4, .bf-head h4{
  font-size:23px;
  line-height:1.35;
}
.structure-nom{ font-size:23px; line-height:1.35; }
.keybox .kb-title{ font-size:clamp(21px,2.2vw,25px); line-height:1.35; }
.faq-q > span:first-child{ font-size:23px; line-height:1.4; }
.modal-scroll h3{ font-size:clamp(25px,3vw,29px); line-height:1.3; }
.lb-texte .temoin-nom{ font-size:29px; }

/* ---- Restent en Manrope : ce qui décrit, étiquette ou informe ----
   Surtitres et labels (.kicker, .sp-kicker, .modal-kicker), accroches
   et sous-titres (.subtitle, .modal-lead, .article-chapo, .kb-sous-titre),
   descriptions de cartes, réponses de FAQ, listes à puces, liens
   fonctionnels — tous déjà en Manrope et non touchés ci-dessus.
   Les exceptions explicites sont ci-dessous.                        */

/* Tarifs, horaires et informations pratiques : blocs fonctionnels */
.tarif-nom, .tarif-duree, .tarif-prix, .price-card .amount{
  font-family:var(--font-body);
  letter-spacing:-.008em;
}
.tarif-nom{ font-size:17.5px; line-height:1.25; }

/* Sous-niveau à l'intérieur d'un article : reste lisible en linéale */
.article-corps h3{
  font-family:var(--font-body);
  font-size:22px; line-height:1.35; letter-spacing:-.008em;
}

/* Intitulés de colonnes du pied de page, libellé d'annuaire,
   sous-titre d'encadré, nom de marque du bandeau : fonctionnels */
footer h5,
.annuaire-titre,
.keybox .kb-sous-titre,
.bienfaits-centre .bc-t,
.brand .btext .n, .footer-brand .n{
  font-family:var(--font-body);
}

@media(max-width:900px){
  :root{ --t4-titre:22px; }
  h4, .card h4, .step h4, .etape-txt h4, .nf-txt h4, .bf-head h4{ font-size:21px; }
  .structure-nom{ font-size:21px; }
  .faq-q > span:first-child{ font-size:20px; }
  .article-corps h3{ font-size:20px; }
  .tarif-nom{ font-size:17.5px; }
}


/* =========================================================
   ACCUEIL — SECTION « POUR QUI ? »
   Les titres des 6 cartes de profil passent en linéale grasse
   et en capitales. La classe .grid-6 n'existe que sur cette
   section de la page d'accueil : aucun autre h4 du site n'est
   atteint. Taille et couleur inchangées.
   ========================================================= */
.grid-6 .card h4{
  font-family:var(--font-body);
  font-weight:700;
  text-transform:uppercase;
  font-size:14px;
  letter-spacing:.03em;
}


/* =========================================================
   JUSTIFICATION — COMPLÉMENT
   La règle plus haut ne couvrait pas les contenus situés hors
   de <main> ni ceux que la liste d'exclusions ramenait à
   « inherit » : le corps et les puces des modales, les encadrés
   et les descriptions de cartes (dont les cartes Neuroplasticité).
   Seuls les paragraphes et les listes sont concernés : titres,
   surtitres, accroches, prix, coordonnées, boutons et éléments
   centrés par le design restent inchangés.
   ========================================================= */
.modal-scroll p:not(.modal-lead),
.modal-points li,
.keybox p:not(.kb-sous-titre),
.card p{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  text-wrap:pretty;
}

@media(max-width:640px){
  /* colonne trop étroite : la justification creuserait des trous */
  .modal-scroll p:not(.modal-lead),
  .modal-points li,
  .keybox p:not(.kb-sous-titre),
  .card p{ text-align:left; }
}


/* =========================================================
   MÉTHODE — PETITS TITRES INTERNES DES TROIS PANNEAUX
   « 1. Observer », « Adaptation », « L'image du miroir »…
   Linéale grasse, casse naturelle, sobre : ces intitulés
   structurent la lecture sans concurrencer le grand titre du
   panneau, qui reste inchangé. Portée limitée aux trois
   panneaux de la page Méthode.
   ========================================================= */
#pan-neurofeedback .nf-txt h4,
#pan-neuroplasticite .card h4,
#pan-neurofeedback .kb-title,
#pan-neuroplasticite .kb-title,
#pan-dynamique .kb-title{
  font-family:var(--font-body);
  font-weight:700;
  font-style:normal;
  text-transform:none;
  font-size:15px;
  letter-spacing:.02em;
  line-height:1.45;
}

/* -----------------------------------------------------------
   ENCADRÉS : RETOUR AU CENTRAGE D'ORIGINE
   La passe de justification avait aligné à gauche le texte des
   encadrés, alors que ce composant est centré par construction.
   Le centrage est rétabli partout, sauf dans les pavés éditoriaux
   de la Méthode, où les paragraphes sont longs et gagnent à
   rester justifiés.
   ----------------------------------------------------------- */
.keybox p:not(.kb-sous-titre){
  text-align:center;
  hyphens:manual;
  -webkit-hyphens:manual;
}
#pan-dynamique .keybox p:not(.kb-sous-titre){
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
@media(max-width:640px){
  #pan-dynamique .keybox p:not(.kb-sous-titre){text-align:left;}
}


/* =========================================================
   SÉANCE — TITRES DES ÉTAPES DU DÉROULEMENT
   Mêmes réglages que les petits titres internes de la Méthode,
   pour une lecture identique d'une page à l'autre.
   Portée limitée au panneau « Le déroulement d'une séance » :
   « Étape 1 sur 5 », les paragraphes et le reste de la page
   ne sont pas concernés.
   ========================================================= */
#pan-deroulement .sp-txt h3{
  font-family:var(--font-body);
  font-weight:700;
  font-style:normal;
  text-transform:none;
  font-size:15px;
  letter-spacing:.02em;
  line-height:1.45;
}


/* =========================================================
   MÉTHODE ET SÉANCE — TITRES PRINCIPAUX DES CARTES CLIQUABLES
   « Qu'est-ce que le neurofeedback ? », « Le déroulement d'une
   séance »… Même logique que les cartes « Pour qui ? » de
   l'accueil : linéale grasse, style normal, couleur inchangée.
   La taille passe de 25 à 19 px : Manrope a une hauteur d'x
   bien supérieure à la manuscrite, 25 px paraîtraient énormes.
   Le composant .choice-card n'existe que sur ces deux pages ;
   les titres internes déjà traités ne sont pas concernés.
   ========================================================= */
.choice-card h3{
  font-family:var(--font-body);
  font-weight:700;
  font-style:normal;
  text-transform:uppercase;
  font-size:16px;
  letter-spacing:.03em;
  line-height:1.4;
}


/* =========================================================
   CABINET — TITRES DES DEUX CARTES
   « UN ESPACE CALME », « FACILE D'ACCÈS » : même traitement
   que les autres titres de cartes du site. Le sélecteur ne
   correspond qu'à ces deux cartes (seule grille à deux colonnes
   du site qui contient des cartes ouvrables). Le contenu des
   modales, italiques compris, n'est pas concerné.
   ========================================================= */
.grid-2 .card h4{
  font-family:var(--font-body);
  font-weight:700;
  font-style:normal;
  text-transform:uppercase;
  font-size:16px;
  letter-spacing:.03em;
  line-height:1.4;
}


/* =========================================================
   SÉANCE — ÉTAPES SANS LIBELLÉ « ÉTAPE X SUR 5 »
   Le numéro dans la pastille suffit. Sans le surtitre, le titre
   remonte tout en haut du bloc : on le décale pour qu'il vienne
   se placer à hauteur du chiffre, plutôt que collé au bord.
   ========================================================= */
#pan-deroulement .sp-txt{ padding-top:13px; }
@media(max-width:640px){
  #pan-deroulement .sp-txt{ padding-top:9px; }
}


/* =========================================================
   FIL D'ARIANE — PAGES D'ARTICLE UNIQUEMENT
   Reprend les réglages du lien « Retour au blog » qu'il remplace :
   même taille, même couleur, même graisse. Linéale, jamais la
   manuscrite. Sur mobile, le titre de l'article passe à la ligne
   plutôt que de déborder.
   ========================================================= */
.fil-ariane{
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:600;
  line-height:1.5;
  color:var(--ink-soft);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
  max-width:100%;
}
.fil-ariane a{
  color:var(--gold-dark);
  text-decoration:none;
  transition:color .2s;
}
.fil-ariane a:hover,
.fil-ariane a:focus-visible{ color:var(--sage-900); }
.fil-ariane .fil-sep{ color:var(--taupe); font-weight:400; }
.fil-ariane .fil-courant{
  color:var(--ink-soft);
  font-weight:400;
  min-width:0;
  overflow-wrap:anywhere;
}

@media(max-width:640px){
  .fil-ariane{ font-size:12.5px; gap:6px; }
}


/* =========================================================
   STRUCTURE SÉMANTIQUE — RENDU INCHANGÉ
   Le surtitre et le titre de section ne forment plus qu'un seul
   <h2> : Google lit la phrase entière au lieu de sa seconde
   moitié. À l'écran, rien ne bouge — les deux parties restent
   sur deux lignes, avec exactement leurs styles d'origine.
   ========================================================= */
.sec-head h2 > .kicker,
.sec-head h2 > .sh-titre{ display:block; }

/* Les 12 questions de la FAQ sont devenues des <h2>. La classe
   .faq-q porte déjà tous les styles ; on neutralise seulement ce
   que la balise h2 apporterait en plus. */
h2.faq-q{ margin:0; letter-spacing:normal; }

/* Le sous-titre du bandeau Cabinet est devenu le <h2> de la page.
   La classe .subtitle porte le style ; on rétablit la marge que
   le paragraphe avait par défaut. */
.page-hero h2.subtitle{ margin:10px auto 0; max-width:640px; font-size:16px; }

/* Téléphone et adresse e-mail de la page Rendez-vous : ce ne sont
   pas des titres, ils reprennent à l'identique l'apparence qu'ils
   avaient en <h4> dans une carte. */
.card .contact-valeur{
  font-family:var(--font-script);
  font-weight:var(--t2-poids);
  font-style:normal;
  font-size:23px;
  line-height:1.35;
  letter-spacing:.004em;
  color:var(--sage-900);
  margin:0 0 10px;
  text-align:center;
}
@media(max-width:900px){
  .card .contact-valeur{ font-size:21px; }
}


/* =========================================================
   BANDEAU DE CONSENTEMENT
   Sobre, aux couleurs du site, en Manrope. Les deux boutons
   ont exactement la même taille, la même graisse et le même
   poids visuel : refuser doit être aussi simple qu'accepter.
   ========================================================= */
.bandeau-cookies{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:1200;
  background:var(--paper);
  border-top:1px solid var(--taupe);
  box-shadow:0 -10px 30px rgba(30,38,26,.10);
  transform:translateY(110%);
  transition:transform .38s var(--ease);
  font-family:var(--font-body);
}
.bandeau-cookies.visible{ transform:translateY(0); }

.bandeau-cookies .bc-inner{
  max-width:1120px;
  margin:0 auto;
  padding:18px 24px;
  display:flex;
  align-items:center;
  gap:26px;
}
.bandeau-cookies .bc-texte{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--ink-soft);
  text-align:left;
  hyphens:manual;
}
.bandeau-cookies .bc-lien{
  color:var(--gold-dark);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
  white-space:nowrap;
}
.bandeau-cookies .bc-lien:hover,
.bandeau-cookies .bc-lien:focus-visible{ color:var(--sage-900); }

.bandeau-cookies .bc-actions{
  display:flex;
  gap:12px;
  flex-shrink:0;
}
.bandeau-cookies .bc-btn{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  line-height:1;
  padding:16px 26px;   /* 47 px de haut : au-dessus du seuil tactile de 44 px */
  min-width:132px;
  border-radius:999px;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.bandeau-cookies .bc-refuser{
  background:transparent;
  color:var(--sage-900);
  border:1px solid var(--sage-700);
}
.bandeau-cookies .bc-refuser:hover,
.bandeau-cookies .bc-refuser:focus-visible{
  background:var(--cream-2);
  border-color:var(--taupe);
}
.bandeau-cookies .bc-accepter{
  background:var(--sage-700);
  color:var(--cream);
  border:1px solid var(--sage-700);
}
.bandeau-cookies .bc-accepter:hover,
.bandeau-cookies .bc-accepter:focus-visible{
  background:var(--cream-2);
  color:var(--sage-900);
  border-color:var(--taupe);
}
.bandeau-cookies .bc-btn:focus-visible{
  outline:2px solid var(--sage-500);
  outline-offset:2px;
}

@media(max-width:900px){
  .bandeau-cookies .bc-inner{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    padding:18px 20px;
  }
  .bandeau-cookies .bc-actions{ gap:10px; }
  .bandeau-cookies .bc-btn{ flex:1 1 0; min-width:0; padding:16px 12px; }
}
@media(max-width:420px){
  .bandeau-cookies .bc-texte{ font-size:13.5px; }
  .bandeau-cookies .bc-btn{ font-size:12.5px; letter-spacing:.02em; }
}

/* Lien discret du pied de page */
footer .footer-legal a[data-cookies]{ cursor:pointer; }