/* Site vitrine — styles communs à toutes les pages (polices : assets_common/css/fonts.css) */
*,*::before,*::after{box-sizing:border-box}
:root{--ink:#101010;--pap:#F5F3EF;--txt:#F2F2F2;--mut:#D4D4D4;--acc:#0B7A57;--line:rgba(255,255,255,.16)}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--txt);font-family:Inter,system-ui,sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(22px,2.7vw,38px)}

/* interface réduite au minimum */
.hdr{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .25s}
.hdr .wrap{display:flex;align-items:center;gap:26px;padding-top:20px;padding-bottom:20px}
.hdr img{width:186px}
.hdr .lg-w{filter:brightness(0) invert(1)}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{font-size:14px;color:#F2F2F2}
.nav a:hover{color:#fff}
.btn{background:var(--acc);color:#fff;font-weight:600;font-size:14px;padding:12px 22px;
  border-radius:4px;white-space:nowrap}
.btn:hover{background:#09664A;color:#fff}
.btn-lg{font-size:16px;padding:17px 34px}
.burger{display:none;background:none;border:1px solid var(--line);color:#fff;border-radius:4px;
  padding:8px 11px;font-size:15px;cursor:pointer}

/* hero plein écran, le texte posé sur l'image */
.hero{position:relative;min-height:0;padding:0;display:flex;align-items:flex-end;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 40%}
.hero .veil{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(16,16,16,.95) 0%,rgba(16,16,16,.88) 26%,rgba(16,16,16,.52) 46%,
  rgba(16,16,16,.12) 66%,rgba(16,16,16,0) 82%)}
.hero .veil2{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(16,16,16,.55) 0%,rgba(16,16,16,0) 26%,rgba(16,16,16,0) 58%,
  rgba(16,16,16,.55) 88%,rgba(16,16,16,.9) 100%)}
.hero .wrap{position:relative;z-index:1;width:100%;padding-bottom:54px;padding-top:126px}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#31C48D;font-weight:600;margin:0 0 18px;max-width:64ch}
h1{font-family:Montserrat,sans-serif;font-weight:800;font-size:clamp(40px,5.4vw,72px);
  line-height:1.2;letter-spacing:-.022em;margin:0;max-width:13ch}
.sub{font-size:clamp(17px,1.7vw,20px);color:#F2F2F2;max-width:49ch;margin:22px 0 0;line-height:1.55}
.note{font-size:13px;color:var(--mut);margin:14px 0 0}
.hero .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:30px 0 0}
.hero .cta-row .note{margin:0}
.by{font-size:15px;color:#F2F2F2;margin:14px 0 0;padding-left:15px;position:relative}
.by::before{content:"";position:absolute;left:0;top:.45em;bottom:.45em;width:2px;background:var(--acc)}

section{padding:96px 0}
h2{font-family:Montserrat,sans-serif;font-weight:800;font-size:clamp(30px,3.9vw,52px);
  line-height:1.2;letter-spacing:-.02em;margin:0;max-width:24ch}
.lead{font-size:18px;color:#D4D4D4;max-width:62ch;margin:20px 0 0}

/* bande de crédibilité sous le hero */
.creds{border-bottom:1px solid var(--line);padding:34px 0 38px}
.creds p{margin:0 0 22px;font-size:14px;color:#D4D4D4;letter-spacing:.01em}
.creds .row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.creds .box{border:1px solid rgba(255,255,255,.10);border-radius:6px;height:92px;display:flex;
  align-items:center;justify-content:center;background:var(--pap)}
.creds .box img{width:auto}
@media (max-width:700px){.creds .row{grid-template-columns:1fr;gap:10px}.creds .box{height:76px}}

/* logos posés sur le fond, sans plaque */
.creds-bare{padding:44px 0;text-align:center}
.creds-bare p{margin:0 0 26px}
.creds-bare .bare{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;
  max-width:820px;margin:0 auto}
.creds-bare .bare img{width:auto;justify-self:center}
@media (max-width:700px){
  .creds-bare .bare{grid-template-columns:1fr;gap:26px;justify-items:center}
}

/* variante 2 : une seule plaque */
.creds-strip .strip{background:var(--pap);border-radius:6px;height:104px;display:flex;
  align-items:center;justify-content:space-around;gap:30px;padding:0 40px}
/* variante 3 : les noms, sans logo */
.creds-type .names{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  border-top:1px solid var(--line);padding-top:26px}
.creds-type .names div{border-left:2px solid var(--acc);padding-left:16px}
.creds-type strong{display:block;font-family:Montserrat,sans-serif;font-weight:800;font-size:19px;
  letter-spacing:-.01em;color:#fff}
.creds-type span{display:block;font-size:14px;color:#D4D4D4;margin-top:5px}
@media (max-width:700px){.creds-strip .strip{height:auto;flex-direction:column;padding:26px;gap:22px}
  .creds-type .names{grid-template-columns:1fr;gap:18px}}

/* tuiles : la photo est la carte, aucun cadre */
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.tile{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:6px;display:block}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tile:hover img{transform:scale(1.04)}
.tile .veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(16,16,16,0) 38%,rgba(16,16,16,.86) 100%)}
.tile .lab{position:absolute;left:24px;right:24px;bottom:22px;z-index:1}
.tile h3{font-family:Montserrat,sans-serif;font-weight:800;font-size:21px;margin:0;
  letter-spacing:-.01em;min-height:2.24em;display:flex;align-items:flex-end}
.tile p{font-size:14.5px;color:#F2F2F2;margin:8px 0 0;line-height:1.5;min-height:4.5em}

/* citation : bande sobre, sans photo — les visuels restent pour les sections qui en ont besoin */
.quote-plain{min-height:0;padding:92px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);text-align:center}
.quote-plain blockquote{margin:0 auto}
.quote-plain .lead{margin-left:auto;margin-right:auto}
.quote-plain .sig{justify-content:center}

/* citation : portrait plein cadre, texte posé dessus */
.quote{position:relative;min-height:74vh;display:flex;align-items:center;overflow:hidden}
.quote>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 38%}
.quote .veil{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(16,16,16,.94) 0%,rgba(16,16,16,.78) 46%,rgba(16,16,16,.25) 100%)}
.quote .wrap{position:relative;z-index:1;width:100%}
blockquote{font-family:Montserrat,sans-serif;font-weight:800;font-size:clamp(28px,3.6vw,50px);
  line-height:1.2;letter-spacing:-.02em;margin:0;max-width:19ch;text-wrap:balance}
.sig{display:flex;align-items:center;gap:14px;margin-top:34px}
.sig img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.sig p{margin:0;font-size:14.5px;color:#D4D4D4}
.sig strong{display:block;color:#fff;font-size:16px;font-weight:600}

/* bande portrait : le texte à côté, sans encadré */
.duo{display:grid;grid-template-columns:.92fr 1fr;gap:0;align-items:stretch}
.duo .ph{position:relative;overflow:hidden;min-height:520px;border-radius:6px}
.duo .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 28%}
.duo .tx{padding:0 0 0 clamp(32px,4.4vw,64px);align-self:center}
.duo ul{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.duo li{font-size:16px;color:#F2F2F2;padding-left:20px;position:relative}
.duo li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--acc)}

.end{text-align:center;border-top:1px solid var(--line)}
.ftr{border-top:1px solid var(--line);padding:56px 0 44px;color:var(--mut);font-size:14px}
.ftr .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.ftr img{width:158px;filter:brightness(0) invert(1);opacity:.9;margin-bottom:16px}
.ftr a{display:block;color:#F2F2F2;margin-bottom:10px}
.ftr h4{color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px;font-weight:600}
.ftr .fine{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:#8F8F8F}

@media (max-width:900px){
  .rail{grid-template-columns:1fr;gap:14px}
  .duo{grid-template-columns:1fr}
  .duo .tx{padding:34px 0 0}
  .ftr .cols{grid-template-columns:1fr}
  section{padding:74px 0}
  .nav{display:none}
  .nav.open{display:grid;position:absolute;left:0;right:0;top:100%;background:#101010;
    padding:10px 26px;gap:0;border-bottom:1px solid var(--line)}
  .hdr .wrap{position:relative}
  .burger{display:inline-flex;margin-left:auto}
  .hdr .btn{display:none}
}

/* en-tête de page, sans photo */
.phead{padding:170px 0 66px;border-bottom:1px solid var(--line)}
.phead h1{font-size:clamp(34px,4.8vw,62px);max-width:20ch}
.phead .lead{margin-top:24px;font-size:19px}

/* surfaces sombres */
.card{background:#1C1C1C;border:1px solid var(--line);border-radius:8px;padding:26px}
.card h3{margin:0}
.card p{font-size:14.5px;color:#D4D4D4;margin:10px 0 0;line-height:1.6}
.card .n{font-family:Montserrat,sans-serif;font-size:12px;font-weight:800;letter-spacing:.14em;
  color:#31C48D;margin-bottom:12px}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:16px}
.mt{margin-top:44px}

/* listes à filet vert */
ul.dash{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px}
ul.dash li{font-size:16px;color:#F2F2F2;padding-left:20px;position:relative}
ul.dash li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--acc)}
ul.cols{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:13px 30px}

/* figures de preuve */
.proofs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px;margin-top:34px}
.proofs figure{margin:0}
.proofs .sh{border:1px solid var(--line);border-radius:6px;overflow:hidden;aspect-ratio:16/10;background:#1C1C1C}
.proofs .sh img{width:100%;height:100%;object-fit:cover}
.proofs h3{margin:14px 0 0;font-size:15px}
.proofs figcaption{margin-top:7px;font-size:13px;line-height:1.55;color:#A6A6A6}

/* encart neutre */
.panel{background:#1C1C1C;border:1px solid var(--line);border-radius:8px;padding:32px}
.panel h3{margin:0 0 12px;font-size:18px}
.panel p{color:#D4D4D4;margin:0}

/* logos des entreprises, centrés */
.brands{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;max-width:820px;
  margin:34px auto 0}
.brands img{justify-self:center;width:auto}
@media (max-width:700px){.brands{grid-template-columns:1fr;gap:26px}}

/* catégories du blog */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip{border:1px solid var(--line);border-radius:999px;padding:10px 17px;font-size:14px;color:#F2F2F2}

/* pages légales */
.legal p{max-width:74ch;color:#D4D4D4;margin:0 0 18px}
.legal .warn{color:#D8A94A;font-size:14px;margin-bottom:26px}
@media (max-width:900px){.phead{padding:130px 0 52px}}

/* mobile : le voile du hero est horizontal (texte à gauche) ; sur téléphone
   le texte prend toute la largeur, il faut un voile vertical */
@media (max-width:700px){
  .hero .veil{background:linear-gradient(180deg,rgba(16,16,16,.92) 0%,rgba(16,16,16,.74) 42%,rgba(16,16,16,.86) 100%)}
  .hero .veil2{background:linear-gradient(180deg,rgba(16,16,16,.55) 0%,rgba(16,16,16,.18) 45%,rgba(16,16,16,.88) 100%)}
}

/* la hauteur du hero doit laisser voir la section suivante : on comprend
   tout de suite qu'il faut descendre */
@media (max-width:700px){
  .hero .wrap{padding-top:104px;padding-bottom:40px}
  .sub{margin-top:16px}
}

/* ------------------------------------------------------------------ *
   PERSONNALITÉ DES PAGES INTÉRIEURES
   Elles empilaient les mêmes cartes sur le même noir, sans respiration.
 * ------------------------------------------------------------------ */

/* 1. une section sur deux change de fond : le rythme revient
      (classe posée par le générateur, pour ne pas compter le hero ni les bandeaux) */
body>section{position:relative}
section.alt{background:#151515}

/* 2. un filet vert sous chaque titre de section : l'accent existe enfin
      ailleurs que sur le bouton */
body>section>.wrap>h2:first-child::after,
body>section>.wrap>.eyebrow+h2::after{content:"";display:block;width:54px;height:3px;
  background:var(--acc);border-radius:2px;margin:20px 0 0}
.end .wrap h2::after{margin-left:auto;margin-right:auto}
body>section.end>.wrap>h2::after{margin-left:auto;margin-right:auto} /* centré : même spécificité que la règle ci-dessus */

/* 3. le numéro des cartes devient un chiffre fantôme :
      de la matière sans une seule image de plus */
.card{position:relative;overflow:hidden;transition:border-color .18s,background .18s}
.card::before{content:attr(data-n);position:absolute;right:-6px;top:-26px;
  font-family:Montserrat,sans-serif;font-weight:800;font-size:104px;line-height:1;
  color:rgba(255,255,255,.045);pointer-events:none}
.card:hover{border-color:rgba(49,196,141,.4);background:#1F1F1F}
.card .n{position:relative;z-index:1}

/* 4. l'en-tête de page n'est plus un simple bloc de texte */
.phead{position:relative;overflow:hidden}
.phead::before{content:"";position:absolute;left:-4%;top:-40%;width:52%;height:150%;
  background:radial-gradient(closest-side,rgba(49,196,141,.13),rgba(49,196,141,0));
  pointer-events:none}
.phead .wrap{position:relative;z-index:1}
.phead h1::after{content:"";display:block;width:64px;height:3px;background:var(--acc);
  border-radius:2px;margin:26px 0 0}

/* 5. le bandeau de fin se détache vraiment du reste */
.end{background:#151515;border-top:1px solid var(--line)}

/* ------------------------------------------------------------------ *
   MOBILE — débordement à 320 px et cibles tactiles
 * ------------------------------------------------------------------ */
@media (max-width:400px){
  /* le bouton pleine largeur et le padding du conteneur dépassaient de 24 px */
  .wrap{padding-left:16px;padding-right:16px}
  .btn,.btn-lg{display:inline-block;max-width:100%;white-space:normal;text-align:center;
    padding-left:20px;padding-right:20px;box-sizing:border-box}
  .panel{max-width:100%;box-sizing:border-box}
}
@media (max-width:900px){
  /* zones tactiles : 44 px pour le menu, 34 px pour les liens du footer (liste plus compacte) */
  .ftr a{padding:6px 0;min-height:34px;line-height:22px;display:flex;align-items:center;
    margin-bottom:0}
  .nav a{display:flex;align-items:center;min-height:44px;padding:0 4px}
  .burger{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .duo .tx a,.legal a,p.mt-22 a{display:inline-flex;align-items:center;min-height:44px}
}

/* ------------------------------------------------------------------ *
   BANDEAU BLANC AU DÉFILEMENT
   En haut de page l'en-tête est transparente sur la photo ; dès qu'on
   descend, elle devient un bandeau blanc opaque : le menu reste lisible
   quel que soit ce qui passe dessous.
 * ------------------------------------------------------------------ */
.hdr .lg-d{display:none}
.hdr.scrolled{background:rgb(245,243,239);border-bottom:1px solid rgba(0,0,0,.10);
  box-shadow:0 10px 34px rgba(0,0,0,.38)}
.hdr.scrolled .lg-w{display:none}
.hdr.scrolled .lg-d{display:block;filter:none}
.hdr.scrolled .nav a{color:rgb(16,16,16)}
.hdr.scrolled .nav a:hover{color:rgb(11,122,87)}
.hdr.scrolled .nav a[aria-current="page"]{color:rgb(11,122,87)}
.hdr.scrolled .burger{color:rgb(16,16,16);border-color:rgba(0,0,0,.22)}
@media (max-width:900px){
  /* le menu déroulant hérite du bandeau : fond blanc, texte sombre */
  .hdr.scrolled .nav.open{background:rgb(245,243,239);border-color:rgba(0,0,0,.10)}
}

/* ------------------------------------------------------------------ *
   CLASSES COMMUNES
   Ces règles remplacent les attributs style= qui étaient écrits
   directement dans le HTML. Elles servent à plusieurs pages : leur
   place est ici. Ce qui n'est utilisé que par une seule page vit dans
   la feuille de cette page (home.css, methode.css, programme.css).
 * ------------------------------------------------------------------ */
.ftr-tag{max-width:42ch;color:#D4D4D4}
.ftr-brands{margin-top:14px;font-size:12.5px;letter-spacing:.06em;color:#D4D4D4}

/* bandeau de fin : titre et accroche centrés */
.end h2{margin:0 auto}
.end .lead{margin:22px auto 34px}

/* section collée à la précédente */
.flush{padding-top:0}

/* titre de bloc « duo », plus petit que les H2 de section */
.story-h2{font-size:clamp(26px,3.2vw,40px)}

/* mention de bas de section, plus large que la mesure courante */
.note-wide{max-width:74ch}

/* texte en blanc franc (la règle .panel p impose sa couleur : on la double
   en spécificité plutôt que de répéter la déclaration ailleurs) */
.on-w,.panel p.on-w{color:#fff}

/* espacements ponctuels */
.mt-22,.panel p.mt-22{margin-top:22px}

/* intitulé vert en capitales, en tête d'un encadré */
.panel h3.panel-lbl{color:#31C48D;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase}

/* hauteur des logos des trois entreprises */
.b-ouiglass{height:34px}
.b-influmedia{height:34px}
.b-otovia{height:28px}

/* ------------------------------------------------------------------ *
   PAGES INTÉRIEURES — de la photo et de la couleur
 * ------------------------------------------------------------------ */
/* en-tête de page sur photo, même traitement que le hero de l'accueil */
.phead.ph-photo{padding:220px 0 84px;min-height:78vh;display:flex;align-items:flex-end;
  border-bottom:0}
.phead.ph-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 35%)}
.phead.ph-photo .veil{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(16,16,16,.96) 0%,rgba(16,16,16,.86) 34%,rgba(16,16,16,.42) 62%,
  rgba(16,16,16,.18) 100%)}
.phead.ph-photo .veil2{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(16,16,16,.72) 0%,rgba(16,16,16,.05) 30%,rgba(16,16,16,.1) 60%,
  rgba(16,16,16,.96) 100%)}
.phead.ph-photo::before{display:none}
.ph-top{--pos:50% 22%}.ph-mid{--pos:50% 40%}.ph-left{--pos:22% 22%}
.phead.ph-photo .wrap{width:100%}
.phead.ph-photo .lead{color:#F2F2F2;max-width:58ch}
@media (max-width:900px){.phead.ph-photo{padding:150px 0 56px;min-height:0}}

/* une section par page porte un halo vert, pour casser la suite de blocs gris */
section.glow{background:#151515;overflow:hidden}
section.glow::before{content:"";position:absolute;right:-10%;top:-30%;width:58%;height:160%;
  background:radial-gradient(closest-side,rgba(49,196,141,.14),rgba(49,196,141,0));
  pointer-events:none}
section.glow>.wrap{position:relative;z-index:1}

/* cartes et encadrés : titres blancs, filet vert sur l'encadré mis en avant */
.card h3{color:#fff}
.card:hover{transform:translateY(-2px)}
.card{transition:border-color .18s,background .18s,transform .18s}
.panel{border-left:3px solid var(--acc)}
.panel h3{color:#fff}

/* bandeau de fin : un halo, pas un simple fond gris */
.end{position:relative;overflow:hidden}
.end::before{content:"";position:absolute;left:50%;top:-60%;width:70%;height:200%;
  transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(49,196,141,.13),rgba(49,196,141,0));
  pointer-events:none}
.end>.wrap{position:relative;z-index:1}

/* duo avec liste numérotée (séances individuelles) */
.duo .steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:18px}
.duo .steps li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.duo .steps .k{font-family:Montserrat,sans-serif;font-weight:800;font-size:13px;letter-spacing:.14em;
  color:#31C48D;padding-top:4px}
.duo .steps strong{display:block;color:#fff;font-size:17px;margin-bottom:4px}
.duo .steps p{margin:0;color:#D4D4D4;font-size:15px;line-height:1.6}


/* pages légales : titres de rubrique */
.legal h3{margin:38px 0 6px;font-family:Montserrat,sans-serif;font-size:17px;font-weight:800;
  line-height:1.3;color:#fff}
.legal h3:first-child{margin-top:0}
.legal h3+p{margin-top:0}
.legal p+p{margin-top:-6px}      /* paragraphes d'une même rubrique un peu plus serrés */
@media (max-width:900px){.legal h3{margin-top:30px}}