/* =========================================================
   Synodeo — site statique. Design system anthracite / crème / terracotta.
   ========================================================= */

/* ---- Polices auto-hébergées (Hanken Grotesk, Newsreader) ----
   Fichiers variables convertis depuis Google Fonts, servis en local
   pour ne plus envoyer l'IP des visiteurs à Google. ---- */
@font-face{
  font-family:'Hanken Grotesk';
  src:url('fonts/HankenGrotesk-Variable.woff') format('woff');
  font-weight:200 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('fonts/Newsreader-Variable.woff') format('woff');
  font-weight:400 500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('fonts/Newsreader-Italic-Variable.woff') format('woff');
  font-weight:400 500;
  font-style:italic;
  font-display:swap;
}

:root{
  --ink:#232322; --ink-2:#33322F; --ink-3:#1A1A19;
  --cream:#F1EDE3; --cream-2:#F7F4EC; --cream-3:#FCFAF4;
  --line:#E6E3D9; --line-2:#D2CFC4;
  --grey:#6B6A64; --grey-2:#4A4945; --grey-3:#908E86; --grey-4:#B4B1A7;
  --accent:#4A4945; --brick:#4A4945;
  --maxw:1200px; --content:760px;
  --font:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--cream); color:var(--ink); font-family:var(--font); font-weight:400; line-height:1.65; -webkit-font-smoothing:antialiased; font-size:16px}
a{color:var(--brick)}
img{max-width:100%; height:auto}
h1,h2,h3,h4{font-weight:200; letter-spacing:-.03em; margin:0; color:var(--ink); line-height:1.1}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,56px)}
.eyebrow{font-weight:500; text-transform:uppercase; letter-spacing:.24em; font-size:11px; color:var(--grey)}
.mono{font-variant-numeric:tabular-nums}
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:8px; top:8px; background:var(--ink); color:var(--cream); padding:10px 16px; z-index:100}

/* ---- Header façon Mistral, logo seul cliquable ---- */
header.site{position:sticky; top:0; z-index:50; background:rgba(241,237,227,.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--ink)}
.navbar{max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:28px; padding:14px clamp(20px,5vw,56px)}
.brand{display:inline-flex; text-decoration:none; line-height:0}
.brand .glyph{width:38px; height:38px; background:var(--ink); color:var(--cream); display:flex; align-items:center; justify-content:center; font-weight:200; letter-spacing:-.03em; font-size:1.7rem; line-height:.6; transition:transform .18s, background .18s}
.brand:hover .glyph{transform:translateY(-1px); background:var(--brick)}
nav.primary{display:flex; align-items:center; gap:2px; margin-left:4px}
nav.primary a,.nav-toggle{font-weight:400; font-size:14.5px; color:var(--ink); text-decoration:none; padding:10px 12px; font-family:var(--font); background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
nav.primary a:hover,.nav-toggle:hover{opacity:.6}
nav.primary a.active{border-bottom:1px solid var(--ink)}
.has-drop{position:relative}
.has-drop .caret{font-size:9px; opacity:.55; transition:transform .2s}
.has-drop:hover .caret{transform:rotate(180deg)}
.drop{position:absolute; top:calc(100% + 8px); left:0; min-width:280px; background:var(--cream-2); border:1px solid var(--ink); padding:6px; opacity:0; visibility:hidden; transform:translateY(6px); transition:all .16s; box-shadow:0 24px 60px -24px rgba(35,35,34,.5)}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1; visibility:visible; transform:translateY(0)}
.drop.wide{min-width:560px; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--ink); border:1px solid var(--ink); padding:0}
.drop a{display:block; padding:12px 14px; background:var(--cream-2)}
.drop.wide a{background:var(--cream-2)}
.drop a:hover{background:var(--cream-3); opacity:1}
.drop a .lvl{display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-3); font-weight:600}
.drop a .t{display:block; font-weight:600; font-size:14.5px; margin-top:3px; color:var(--ink)}
.drop .drop-over{font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--brick); border-bottom:1px solid var(--line)}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.btn{font-family:var(--font); font-weight:500; font-size:14.5px; padding:11px 22px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ink); transition:all .18s}
.btn-primary{color:var(--cream); background:var(--ink)}
.btn-primary:hover{background:var(--brick); border-color:var(--brick); color:var(--cream); opacity:1}
.btn-secondary{color:var(--ink); background:transparent}
.btn-secondary:hover{background:var(--ink); color:var(--cream); opacity:1}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--ink); width:42px; height:42px; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px}
.burger span{display:block; width:18px; height:1.5px; background:var(--ink)}
.mobile-menu{display:none; border-bottom:1px solid var(--ink); background:var(--cream-2)}
.mobile-menu a{display:block; padding:13px clamp(20px,5vw,56px); text-decoration:none; border-top:1px solid var(--line); font-size:15px; color:var(--ink)}

/* ---- Hero accueil ---- */
.hero{border-bottom:1px solid var(--ink)}
.hero .wrap{padding-top:clamp(60px,9vw,110px); padding-bottom:clamp(52px,7vw,96px)}
.hero h1{font-size:clamp(3rem,9vw,6.4rem); line-height:.98; margin:20px 0 0}
.hero h1 em{font-style:normal; color:var(--brick)}
.hero .lead{font-size:clamp(1.05rem,2vw,1.32rem); font-weight:300; color:var(--grey-2); margin:26px 0 0; line-height:1.55}
.hero .roots{margin-top:24px; font-size:14px; color:var(--grey); display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.hero .roots b{font-weight:700; letter-spacing:.12em; color:var(--ink)}
.hero .cta{margin-top:36px; display:flex; gap:14px; flex-wrap:wrap}
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ink); border:1px solid var(--ink); margin-top:clamp(40px,6vw,68px)}
.metric{background:var(--cream-2); padding:24px 20px}
.metric .n{font-size:clamp(2rem,4vw,2.9rem); font-weight:200; letter-spacing:-.03em; line-height:1}
.metric .l{font-size:12.5px; color:var(--grey); margin-top:8px}

/* ---- Sections génériques accueil ---- */
section.block{border-bottom:1px solid var(--ink)}
section.block>.wrap{padding-top:clamp(44px,7vw,92px); padding-bottom:clamp(44px,7vw,92px)}
.sec-head{max-width:none}
.sec-head h2{font-size:clamp(2.2rem,6vw,3.8rem); line-height:1.02; margin:12px 0 0}
.sec-head p{font-size:clamp(1rem,1.6vw,1.15rem); font-weight:300; color:var(--grey-2); margin:18px 0 0}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink); border:1px solid var(--ink); margin-top:42px}
.cell{background:var(--cream-2); padding:clamp(24px,2.6vw,34px)}
.cell .num{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-3); font-weight:600}
.cell h3{font-size:1.5rem; font-weight:300; margin:12px 0 10px}
.cell p{font-size:14px; color:var(--grey-2); font-weight:300; margin:0; line-height:1.6}
.cell .n{font-family:var(--font); font-weight:200; font-size:2.3rem; letter-spacing:-.03em; line-height:1}
.pcard{background:var(--cream-2); text-decoration:none; display:flex; flex-direction:column; gap:10px; padding:clamp(24px,2.6vw,32px); transition:background .16s; color:var(--ink)}
.pcard:hover{background:var(--cream-3); opacity:1}
.pcard .lvl{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--brick); font-weight:600}
.pcard h3{font-size:1.4rem; font-weight:300}
.pcard p{font-size:13.5px; color:var(--grey-2); font-weight:300; margin:0; flex:1; line-height:1.55}
.pcard .go{font-size:13px; font-weight:500; border-bottom:1px solid var(--ink); align-self:flex-start; padding-bottom:2px}
.pcard:hover .go{color:var(--brick); border-color:var(--brick)}

/* ---- CTA final ---- */
.final{background:var(--ink); color:var(--cream); border-bottom:1px solid var(--ink)}
.final .wrap{padding:clamp(52px,8vw,100px) clamp(20px,5vw,56px); text-align:center}
.final .eyebrow{color:var(--grey-4)}
.final h2{font-size:clamp(2.2rem,6vw,4rem); margin:14px auto 0; max-width:20ch}
.final p{font-size:clamp(1rem,1.6vw,1.15rem); font-weight:300; color:var(--grey-4); max-width:52ch; margin:20px auto 0}
.final .cta{margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn-invert{color:var(--ink); background:var(--cream); border-color:var(--cream)}
.btn-invert:hover{background:var(--brick); color:var(--cream); border-color:var(--brick)}
.btn-invert-ghost{color:var(--cream); background:transparent; border-color:var(--grey-4)}
.btn-invert-ghost:hover{background:var(--cream); color:var(--ink); border-color:var(--cream)}

/* ---- Pages éditoriales (contenu markdown) ---- */
.page-header{border-bottom:1px solid var(--ink)}
.page-header .wrap{padding-top:clamp(44px,6vw,80px); padding-bottom:clamp(26px,4vw,40px)}
.page-header .eyebrow{color:var(--brick)}
.page-header h1{font-size:clamp(2.4rem,6vw,4rem); line-height:1.03; margin:12px 0 0}
.page-header .intro{font-size:clamp(1.05rem,1.8vw,1.25rem); font-weight:300; color:var(--grey-2); margin:18px 0 0; line-height:1.55}
.article{border-bottom:1px solid var(--ink)}
.article .wrap{padding-top:clamp(40px,6vw,72px); padding-bottom:clamp(48px,7vw,88px)}
/* Séparateurs de sections limités à la largeur du .wrap (au lieu de bord à bord) */
.hero, section.block, .page-header, .article, .editorial{border-bottom:none}
.hero>.wrap, section.block>.wrap, .page-header>.wrap, .article>.wrap, .editorial>.wrap{border-bottom:1px solid var(--ink)}
.prose{max-width:none; font-size:1.06rem; font-weight:300; color:var(--grey-2); line-height:1.75}
.prose h2{font-size:1.85rem; font-weight:300; color:var(--ink); margin:2em 0 .5em; padding-top:1.2em; border-top:1px solid var(--line)}
.prose h2:first-child{border-top:none; padding-top:0; margin-top:0}
.prose h3{font-size:1.3rem; font-weight:600; color:var(--ink); margin:1.6em 0 .4em}
.prose h4{font-size:1rem; font-weight:600; color:var(--ink); letter-spacing:0; margin:1.4em 0 .3em}
.prose p{margin:0 0 1.1em}
.prose strong{color:var(--ink); font-weight:600}
.prose em{font-style:italic}
.prose a{color:var(--brick); text-decoration:underline}
.prose ul{list-style:none; padding:0; margin:1.1em 0}
.prose ul li{position:relative; padding-left:22px; margin-bottom:.55em}
.prose ul li:before{content:"—"; position:absolute; left:0; color:var(--brick)}
.prose ol{padding-left:1.3em; margin:1.1em 0}
.prose ol li{margin-bottom:.55em}
.prose blockquote{border-left:2px solid var(--ink); margin:1.5em 0; padding:.2em 0 .2em 1.2em; font-style:italic; color:var(--ink)}
.prose table{width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.94rem}
.prose th,.prose td{border:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top; line-height:1.5}
.prose th{background:var(--cream-2); color:var(--ink); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em}
.prose td{color:var(--grey-2)}
@media(max-width:700px){.prose table,.prose thead,.prose tbody,.prose th,.prose td,.prose tr{display:block}.prose thead{display:none}.prose tr{border:1px solid var(--line); margin-bottom:14px}.prose td{border:none; border-bottom:1px solid var(--line)}.prose td:last-child{border-bottom:none}.prose td:before{content:attr(data-label); display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--grey-3); margin-bottom:4px}}
.prose .cta-line{margin-top:2em}
.prose .cta-line a{display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--cream); background:var(--ink); border:1px solid var(--ink); padding:12px 24px; font-weight:500; font-size:15px}
.prose .cta-line a:hover{background:var(--brick); border-color:var(--brick)}

/* ---- Footer ---- */
footer.site{background:var(--ink-3); color:var(--grey-4)}
footer.site .wrap{padding-top:52px; padding-bottom:40px}
.foot-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start}
.foot-brand .glyph{width:38px; height:38px; background:var(--cream); color:var(--ink); display:flex; align-items:center; justify-content:center; font-weight:200; font-size:1.7rem; line-height:.6}
.foot-brand p{font-size:13px; font-weight:300; margin:16px 0 0; max-width:34ch; color:var(--grey-4)}
.foot-cols{display:flex; gap:clamp(16px,2.4vw,36px); flex-wrap:wrap}
.foot-col{flex:1 1 130px; min-width:0; max-width:200px}
.foot-col h4{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-3); font-weight:600; margin:0 0 14px}
.foot-col a{display:block; font-size:14px; color:var(--grey-4); text-decoration:none; margin-bottom:9px; font-weight:300}
.foot-col a:hover{color:var(--cream)}
.foot-bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:44px; padding-top:22px; border-top:1px solid var(--grey-2); font-size:12.5px; font-weight:300; color:var(--grey-3)}

/* ---- Menus École & Formations : liste verticale simple ---- */
.drop.list{min-width:260px}
.drop.list a{display:block; padding:11px 14px; font-size:14.5px; font-weight:500; color:var(--ink); text-decoration:none}
.drop.list a:hover{background:var(--cream-3); color:var(--accent)}
.drop.list .lbl{padding:12px 14px 6px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--grey-3); border-top:1px solid var(--line); margin-top:4px}

/* ---- Damier élégant (accueil + page Formations) ---- */
.board{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--ink); border:1px solid var(--ink); margin-top:32px}
.btile{background:var(--cream-2); padding:clamp(26px,3vw,42px); text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:12px; min-height:190px; transition:background .18s}
.btile:nth-child(4n+1),.btile:nth-child(4n){background:var(--cream-3)}
.btile.wide{grid-column:1 / -1}
.btile:hover{background:var(--cream); opacity:1}
.btile h3{font-size:1.55rem; font-weight:300; letter-spacing:-.02em}
.btile p{font-size:14px; color:var(--grey-2); font-weight:300; margin:0; flex:1; line-height:1.55}
.btile .go{font-size:13px; font-weight:500; border-bottom:1px solid var(--ink); align-self:flex-start; padding-bottom:2px}
.btile:hover .go{color:var(--accent); border-color:var(--accent)}
.btile.brand{align-items:center; justify-content:center; text-align:center; gap:14px; cursor:default}
.btile.brand:hover{background:var(--cream-3)}
.btile.brand .sq{width:46px; height:46px; background:var(--ink); color:var(--cream); display:flex; align-items:center; justify-content:center; font-weight:200; font-size:2rem; line-height:.6}
.btile.brand .line{font-size:13px; color:var(--grey); font-weight:300}
.sub-lead{margin-top:52px; font-size:1.05rem; font-weight:300; color:var(--grey-2)}
.sub-lead .group-label{font-weight:500; text-transform:uppercase; letter-spacing:.2em; font-size:12px; color:var(--accent); margin:0 0 10px}

/* ---- Pages pivot Hypnose / ePNL : les 3 temps ---- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink); border:1px solid var(--ink); margin-top:8px}
.step{background:var(--cream-2); padding:clamp(24px,2.6vw,32px); text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:10px; transition:background .16s}
.step:hover{background:var(--cream-3); opacity:1}
.step .sn{font-family:var(--font); font-weight:200; font-size:2.2rem; letter-spacing:-.03em; line-height:1; color:var(--ink)}
.step h3{font-size:1.4rem; font-weight:300}
.step p{font-size:13.5px; color:var(--grey-2); font-weight:300; margin:0; flex:1; line-height:1.55}
.step .go{font-size:13px; font-weight:500; border-bottom:1px solid var(--ink); align-self:flex-start; padding-bottom:2px}
.step:hover .go{color:var(--accent); border-color:var(--accent)}

/* ---- Composants marketing (pages formation V2) ---- */
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px}
.badge{border:1px solid var(--ink); background:var(--cream-2); padding:7px 14px; font-size:12.5px; font-weight:500; color:var(--ink)}

/* ---- Glyphes de parcours ---- */
.hero-title-row{display:flex; align-items:center; gap:28px; margin-top:24px}
.hero-glyph{flex-shrink:0; display:flex; align-items:center; justify-content:center}
.hero-glyph img{width:clamp(68px,9vw,128px); height:clamp(68px,9vw,128px); display:block}
.btile-top{display:flex; align-items:center; gap:20px}
.btile-glyph{flex-shrink:0; display:flex; align-items:center; justify-content:center}
.btile-glyph img{width:clamp(50px,6vw,72px); height:clamp(50px,6vw,72px); display:block}
.lead-xl{font-size:clamp(1.15rem,2.2vw,1.5rem); font-weight:300; color:var(--grey-2); line-height:1.5; margin:0}
.benefits{list-style:none; padding:0; margin:26px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:14px 40px}
.benefits li{position:relative; padding-left:28px; font-size:15px; font-weight:300; color:var(--ink); line-height:1.5}
.benefits li:before{content:"→"; position:absolute; left:0; color:var(--accent); font-weight:600}
.highlight{border:1px solid var(--ink); background:var(--cream-2); padding:clamp(26px,3vw,40px); margin-top:8px; display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start}
.highlight .code{background:var(--ink); color:var(--cream); padding:14px 18px; font-weight:600; font-size:14px; white-space:nowrap; align-self:start}
.highlight h3{font-size:1.4rem; font-weight:300; margin:0 0 10px}
.highlight p{font-size:15px; font-weight:300; color:var(--grey-2); line-height:1.6; margin:0}
.highlight a{color:var(--accent)}
.faq{border:1px solid var(--ink); background:var(--cream-2); margin-top:8px}
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:none}
.faq summary{cursor:pointer; padding:20px 26px; font-weight:600; font-size:1.05rem; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+"; color:var(--accent); font-weight:400; font-size:1.4rem; line-height:1}
.faq details[open] summary:after{content:"\2013"}
.faq .fa{padding:0 26px 22px; font-size:15px; font-weight:300; color:var(--grey-2); line-height:1.7}
.pill-row{display:flex; gap:18px; flex-wrap:wrap; margin-top:22px; font-size:13.5px; color:var(--grey)}
.pill-row b{color:var(--ink); font-weight:600}

/* ---- Formulaire de contact ---- */
.contact-form{max-width:660px; margin-top:8px}
.form-error{border:1px solid var(--ink); border-left:3px solid var(--accent); background:var(--cream-2); padding:14px 18px; margin-bottom:26px; font-size:14px; color:var(--ink); line-height:1.5}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.field{margin-bottom:20px}
.field label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:7px}
.field .req{color:var(--accent)}
.field textarea{min-height:130px; resize:vertical}
.checks{display:flex; flex-direction:column; gap:14px; margin:6px 0 24px}
.check{display:flex; gap:11px; align-items:flex-start; font-size:14px; font-weight:300; color:var(--grey-2); line-height:1.5; cursor:pointer}
.check input{width:18px; height:18px; margin-top:1px; flex:none; accent-color:var(--ink)}
.form-note{font-size:12.5px; color:var(--grey); margin-top:16px}
.hp{position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden}

/* ---- Formulaire multi-étapes : grille façon damier (Contact / Inscription / Diagnostic) ---- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--ink); border:1px solid var(--ink); margin-top:0}
.form-cell{background:var(--cream-3); padding:clamp(20px,2.4vw,26px)}
.form-cell.wide{grid-column:1 / -1}
.form-cell label{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--ink); margin-bottom:10px}
.form-cell .req{color:var(--accent); text-transform:none; letter-spacing:0; font-size:13px}
.form-cell input[type="text"],.form-cell input[type="email"],.form-cell input[type="tel"],.form-cell select,.form-cell textarea{width:100%; font-family:var(--font); font-size:15px; color:var(--ink); background:var(--cream-3); border:1px solid var(--line-2); padding:10px 13px; line-height:1.4; transition:border-color .16s}
.form-cell input[type="file"]{width:100%; font-family:var(--font); font-size:13px; color:var(--grey-2); background:var(--cream-3); border:1px solid var(--line-2); padding:9px 12px}
.form-cell select{appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--grey) 50%),linear-gradient(135deg,var(--grey) 50%,transparent 50%); background-position:calc(100% - 20px) center,calc(100% - 15px) center; background-size:5px 5px,5px 5px; background-repeat:no-repeat; cursor:pointer}
.form-cell input:focus,.form-cell select:focus,.form-cell textarea:focus{outline:none; border-color:var(--ink)}
.form-cell textarea{min-height:120px; resize:vertical}
.wiz-step .form-cell textarea{min-height:110px}
.form-cell .hint{display:block; font-size:12.5px; font-weight:300; color:var(--grey); margin-top:8px}
.form-cell .checks{display:flex; flex-direction:column; gap:14px}
.form-submit{background:var(--ink); color:var(--cream); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.form-submit .form-note{font-size:12.5px; color:var(--grey-4); margin:0}
.wiz-progress{display:flex; gap:1px; background:var(--ink); border:1px solid var(--ink); border-bottom:none; margin:8px 0 0}
.wiz-dot{flex:1; background:var(--cream-2); padding:14px 8px; text-align:center}
.wiz-dot.active,.wiz-dot.done{background:var(--cream-3)}
.wiz-dot .wiz-n{display:block; font-size:11px; letter-spacing:.12em; color:var(--grey-3); font-weight:600}
.wiz-dot.active .wiz-n{color:var(--brick)}
.wiz-dot .wiz-l{display:block; font-size:11.5px; color:var(--grey-2); margin-top:4px; font-weight:500; line-height:1.3}
.wiz-step[hidden]{display:none}
.wiz-nav{background:var(--ink); color:var(--cream); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:clamp(18px,2.2vw,24px); border:1px solid var(--ink); border-top:none}
.wiz-nav .form-note{color:var(--grey-4); margin:0; font-size:13px}
.wiz-nav .btn-secondary{color:var(--cream); border-color:var(--grey-4)}
.wiz-nav .btn-secondary:hover{background:var(--cream); color:var(--ink)}
@media(max-width:700px){.wiz-dot .wiz-l{display:none}}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}
@media(max-width:480px){.row2{grid-template-columns:1fr}}

/* ---- Frise module par module (fiches formation) ---- */
.frise{margin-top:8px; border-top:1px solid var(--ink)}
.frise-mod{border:1px solid var(--ink); border-top:none}
.fm-head{background:var(--cream-2); padding:18px clamp(20px,2.4vw,28px); display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.fm-n{font-family:var(--font); font-weight:200; font-size:1.7rem; letter-spacing:-.03em; color:var(--brick); line-height:1; flex:none}
.fm-head h3{font-size:1.2rem; font-weight:300; margin:0}
.fm-chapters{margin:0 0 0 auto; display:flex; gap:8px; flex-wrap:wrap}
.fm-chapters span{border:1px solid var(--line-2); background:var(--cream-3); padding:5px 11px; font-size:11.5px; color:var(--grey-2); font-weight:500}
.fm-body{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--ink); border-top:1px solid var(--ink)}
.fm-cell{background:var(--cream-3); padding:clamp(18px,2.2vw,24px)}
.fm-label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--grey-3); margin-bottom:10px}
.fm-cell p{font-size:14.5px; color:var(--grey-2); font-weight:300; line-height:1.6; margin:0}
.fm-cell p strong{color:var(--ink); font-weight:600}
.fm-note{font-size:12px; color:var(--grey); font-weight:300; margin-top:14px}
@media(max-width:700px){.fm-body{grid-template-columns:1fr}.fm-chapters{margin-left:0}}

/* ---- Sélecteur de langue FR/EN ---- */
.lang-switch{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; letter-spacing:.03em; margin-left:14px; padding-left:14px; border-left:1px solid var(--line)}
.lang-switch span.active{color:var(--ink)}
.lang-switch a{color:var(--grey-3); text-decoration:none}
.lang-switch a:hover{color:var(--ink); opacity:1}
.lang-switch .sep{color:var(--line-2)}
.mobile-menu .lang-switch{padding:13px clamp(20px,5vw,56px); border-top:1px solid var(--line); border-left:none; margin-left:0; font-size:14.5px; gap:9px}

/* ---- Blog : liste des articles ---- */
.post-list{margin-top:8px}
.post-card{border-top:1px solid var(--line); padding:clamp(28px,4vw,44px) 0; display:grid; grid-template-columns:120px 1fr; gap:clamp(20px,3vw,36px); text-decoration:none; color:inherit}
.post-list .post-card:first-child{border-top:none}
.post-meta{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-3); font-weight:600; padding-top:6px}
.post-card .post-body{min-width:0}
.post-title{font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:300; letter-spacing:-.02em; color:var(--ink); margin:0 0 12px; line-height:1.18; transition:color .15s}
.post-card:hover .post-title{color:var(--brick)}
.post-excerpt{font-size:15px; font-weight:300; color:var(--grey-2); line-height:1.7; margin:0 0 14px}
.post-go{font-size:13px; font-weight:500; border-bottom:1px solid var(--ink); padding-bottom:2px; display:inline-block}
.post-card:hover .post-go{color:var(--brick); border-color:var(--brick)}
@media(max-width:640px){.post-card{grid-template-columns:1fr; gap:8px}}

/* ---- Article éditorial ---- */
.editorial{background:var(--cream-3); border-bottom:1px solid var(--ink)}
.editorial-intro{border-bottom:none}
.editorial>.wrap{max-width:var(--content); padding-left:clamp(28px,7vw,72px); padding-right:clamp(28px,7vw,72px)}
.editorial-intro>.wrap{max-width:var(--maxw)}
.editorial-header{padding:clamp(52px,8vw,92px) 0 clamp(26px,4vw,40px)}
.editorial-header .kicker{font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--brick)}
.editorial-header h1{font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:clamp(2.1rem,5.5vw,3.3rem); line-height:1.08; letter-spacing:-.01em; margin:20px 0 0; color:var(--ink)}
.editorial-header .dek{font-family:'Newsreader',Georgia,serif; font-style:italic; font-weight:400; font-size:clamp(1.1rem,2vw,1.35rem); color:var(--grey-2); margin:24px 0 0; line-height:1.55}
.editorial-meta{display:flex; gap:14px; align-items:center; margin-top:30px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; color:var(--grey); flex-wrap:wrap}
.editorial-meta .sep{color:var(--line-2)}
.editorial-body{padding-top:clamp(38px,5.5vw,64px); padding-bottom:clamp(52px,8vw,92px)}
.editorial-body .lede{font-family:'Newsreader',Georgia,serif; font-size:clamp(1.18rem,2vw,1.38rem); font-weight:400; line-height:1.62; color:var(--ink); margin:0 0 1.4em}
.editorial-body .lede:first-letter{float:left; font-family:'Newsreader',Georgia,serif; font-size:4.4em; line-height:.82; font-weight:500; padding:.04em .09em 0 0; color:var(--brick)}
.editorial-body p{font-size:1.06rem; font-weight:300; color:var(--grey-2); line-height:1.85; margin:0 0 1.35em}
.editorial-body h2{font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:1.65rem; color:var(--ink); margin:1.8em 0 .6em; line-height:1.22}
.editorial-body h3{font-weight:600; font-size:1.1rem; color:var(--ink); margin:1.6em 0 .4em}
.editorial-body strong{color:var(--ink); font-weight:600}
.editorial-body em{font-style:italic}
.editorial-body a{color:var(--brick); text-decoration:underline; text-underline-offset:2px}
.editorial-body ul{padding:0; list-style:none; margin:1.2em 0}
.editorial-body ul li{position:relative; padding-left:22px; margin-bottom:.6em; font-size:1.06rem; font-weight:300; color:var(--grey-2); line-height:1.7}
.editorial-body ul li:before{content:"—"; position:absolute; left:0; color:var(--brick)}
.editorial-body blockquote{font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:1.28rem; line-height:1.5; color:var(--ink); border-left:2px solid var(--brick); margin:1.8em 0; padding:.2em 0 .2em 1.4em}
.editorial-body .refs{margin-top:2.6em; padding-top:1.6em; border-top:1px solid var(--line); font-size:12.5px; color:var(--grey-3); line-height:1.85}
.editorial-body .refs h4{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-3); margin:0 0 .8em}
.editorial-body .cta-line{margin-top:2.2em}
.editorial-body .cta-line a{display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--cream); background:var(--ink); border:1px solid var(--ink); padding:12px 24px; font-weight:500; font-size:15px; font-family:var(--font)}
.editorial-body .cta-line a:hover{background:var(--brick); border-color:var(--brick)}
.editorial-share{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:2.8em; padding-top:1.8em; border-top:1px solid var(--line)}
.editorial-back{font-size:13.5px; font-weight:500; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:2px}
.editorial-back:hover{color:var(--brick); border-color:var(--brick)}

/* ---- Animations ---- */
.progress-bar{position:fixed; top:0; left:0; height:2px; width:0; background:var(--ink); z-index:60; transition:width .08s linear}
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
.hero{position:relative; overflow:hidden}
.hero>.wrap{position:relative; z-index:1}
.hero-bg{display:none}
@keyframes drift{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-26px,24px) rotate(8deg)}100%{transform:translate(0,0) rotate(0deg)}}
@keyframes drift2{0%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(20px,-18px) rotate(-6deg)}100%{transform:translate(0,0) rotate(0deg)}}
@media (prefers-reduced-motion: reduce){
  .hero-bg .fx{animation:none}
  .reveal{opacity:1; transform:none; transition:none}
  .progress-bar{display:none}
}

@media(max-width:1120px){
  nav.primary,.nav-right{display:none}
  .burger{display:flex}
  body.menu-open .mobile-menu{display:block}
}

@media(max-width:900px){
  nav.primary,.nav-right{display:none}
  .burger{display:flex}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .grid-3,.steps,.board,.benefits{grid-template-columns:1fr}
  .highlight{grid-template-columns:1fr}
  body.menu-open .mobile-menu{display:block}
}

/* Encart durée de formation (fiches-parcours) */
.duration-box{background:var(--cream-2); border:1px solid var(--ink); padding:32px clamp(20px,4vw,40px); margin:40px 0}
.duration-box .duration-head{font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; opacity:.65; margin-bottom:20px}
.duration-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.duration-stat .num{font-size:clamp(1.6rem,3vw,2.1rem); font-weight:700; line-height:1.1}
.duration-stat .lbl{font-size:.85rem; opacity:.75; margin-top:4px}
.duration-note{margin-top:24px; padding-top:24px; border-top:1px solid var(--ink); font-size:.95rem; line-height:1.55}
.duration-note strong{display:block; margin-bottom:6px}
@media(max-width:700px){
  .duration-stats{grid-template-columns:1fr; gap:16px}
}

/* Encart durée simplifié (v2) */
.duration-total{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.duration-total .num{font-size:clamp(1.8rem,3.4vw,2.4rem); font-weight:700; line-height:1}
.duration-total .lbl{font-size:.95rem; opacity:.75}

/* Certifier partners */
.certifiers-card{border:1px solid var(--ink); background:var(--cream-3); padding:clamp(24px,4vw,38px)}
.certifiers-list{display:flex; flex-wrap:wrap; gap:clamp(22px,4vw,44px); margin-top:20px; align-items:center}
.certifier{display:flex; align-items:center; gap:16px; text-decoration:none}
.certifier img{width:84px; height:auto; display:block}
.certifier .c-name{display:block; font-weight:600; color:var(--ink); font-size:1rem; letter-spacing:0}
.certifier .c-role{display:block; font-size:.85rem; color:var(--grey); font-weight:400; line-height:1.4}
.certifiers-note{margin-top:18px; margin-bottom:0; font-size:.9rem; color:var(--grey); font-style:italic}

.badge-iactm{display:inline-flex; align-items:center; gap:7px; text-decoration:none}
.badge-iactm img{height:16px; width:auto; display:block}
.badge-iactm:hover{background:var(--cream); border-color:var(--brick)}
.badge-iha{display:inline-flex; align-items:center; gap:7px; text-decoration:none}
.badge-iha img{height:16px; width:auto; display:block}
.badge-iha:hover{background:var(--cream); border-color:var(--brick)}

.accreditor-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--ink); border:1px solid var(--ink); margin-top:28px}
@media(max-width:720px){.accreditor-grid{grid-template-columns:1fr}}
.accreditor-card{background:var(--cream-2); padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; gap:14px; text-decoration:none; color:var(--ink); transition:background .18s}
.accreditor-card:hover{background:var(--cream-3)}
.accreditor-card .ac-head{display:flex; align-items:center; gap:16px}
.accreditor-card .ac-head img{width:64px; height:auto; display:block}
.accreditor-card .ac-name{font-size:1.5rem; font-weight:300; letter-spacing:-.03em; line-height:1}
.accreditor-card .ac-role{font-size:.78rem; color:var(--grey); text-transform:uppercase; letter-spacing:.14em; font-weight:500; margin-top:4px}
.accreditor-card .ac-desc{font-size:14.5px; color:var(--grey-2); line-height:1.6; margin:0}
.accreditor-card .ac-facts{display:flex; flex-wrap:wrap; gap:8px}
.accreditor-card .ac-fact{border:1px solid var(--grey-4); padding:4px 10px; font-size:12px; color:var(--grey-2)}
.accreditor-card .ac-more{margin-top:auto; font-weight:500; color:var(--brick); display:inline-flex; align-items:center; gap:6px}
.accreditor-card:hover .ac-more{text-decoration:underline}