/* ════════════════════════════════════════════════════════════════════
   RÉSISTEZ AUX HACKEURS — assets/site.css
   Design system unique pour toute la vitrine.
   Tokens repris de design-system/styles/variables.css (émeraude),
   étendus pour les fiches formation et les états de session.
   Ce fichier est le SEUL endroit où vit le style : plus de <style> en dur.
   ════════════════════════════════════════════════════════════════════ */

/* ══ Polices auto-hébergées ══
   Elles étaient chargées depuis fonts.googleapis.com, ce qui transmettait
   l'adresse IP de chaque visiteur à Google avant tout consentement. Pour un
   cabinet qui vend de la sécurité, c'est une contradiction gênante et un point
   RGPD régulièrement sanctionné en Europe. Deux fichiers variables servis
   depuis le domaine, 128 Ko au total, et une CSP qui n'autorise plus aucune
   origine externe pour les polices.
   font-display:swap : le texte s'affiche immédiatement dans la police système
   puis bascule, plutôt que de rester invisible pendant le chargement. */
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("/assets/fonts/PlusJakartaSans-var.woff2") format("woff2-variations"),
      url("/assets/fonts/PlusJakartaSans-var.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/assets/fonts/JetBrainsMono-var.woff2") format("woff2-variations"),
      url("/assets/fonts/JetBrainsMono-var.woff2") format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap;
}

:root{
  /* palette (variables.css) */
  --primary:#0E9F6E; --primary-hover:#0C8A60; --primary-light:#DFF8EC;
  --bg:#F8FAFC; --surface:#FFFFFF;
  --dark:#07120F; --dark-surface:#0E1C17;
  --text:#111827; --muted:#6B7280; --border:#E5E7EB;
  --radius-sm:14px; --radius-md:22px; --radius-lg:28px;
  --shadow:0 12px 35px rgba(0,0,0,.05); --shadow-hover:0 18px 45px rgba(0,0,0,.08);
  --container:1320px;
  /* extensions */
  --code:#0A1512; --code-line:#1b2a24; --star:#F5B301;
  --dot-run:#22C55E; --dot-idle:#64748B;
  --dark-text:#CDE7DC; --dark-muted:#7C978C;
  --st-low:#F5A623; --st-crit:#EF5350; --st-ok:#0E9F6E;
}

/* ── base ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.14}
.container{max-width:var(--container);margin:auto;padding:0 40px}
.mono{font-family:"JetBrains Mono",monospace}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
@media(max-width:640px){.container{padding:0 22px}}

/* ── boutons / badges / liens ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:600;font-size:15px;padding:15px 26px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;transition:.25s;white-space:nowrap}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 15px 40px rgba(16,185,129,.25)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--muted);transform:translateY(-2px)}
.btn-dark{background:var(--dark);color:#fff}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 15px 40px rgba(0,0,0,.2)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-sm{padding:11px 18px;font-size:14px}
.btn-block{width:100%;justify-content:center}
.badge{display:inline-flex;align-items:center;gap:6px;padding:.4rem .8rem;border-radius:999px;font-size:.8rem;font-weight:600;background:var(--primary-light);color:var(--primary)}
.eyebrow{font-weight:600;font-size:14px;color:var(--primary)}
.link-arrow{font-weight:600;color:var(--primary);display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.link-arrow:hover{gap:10px}
.ph-note{margin-top:9px;font-size:12px;color:#b0b8c2;font-family:"JetBrains Mono",monospace}

/* ── header ───────────────────────────────────────────────────────── */
header.site{position:sticky;top:0;z-index:50;background:rgba(248,250,252,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
header.site .container{display:flex;align-items:center;gap:34px;height:76px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.brand .mark{width:42px;height:42px;border-radius:12px;background:var(--primary);display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 6px 16px rgba(14,159,110,.3)}
.brand .txt strong{display:block;font-size:17px;font-weight:800;letter-spacing:-.03em}
.brand .txt span{display:block;font-size:12px;color:var(--muted);margin-top:-2px}
nav.main{display:flex;align-items:center;gap:24px}
nav.main a{font-size:15px;font-weight:500;color:var(--text);opacity:.85;transition:.15s}
nav.main a:hover,nav.main a.active{opacity:1;color:var(--primary)}
.header-actions{display:flex;align-items:center;gap:16px}
.header-actions a.plain{font-size:14px;font-weight:500;color:var(--muted)}
.header-actions a.plain:hover{color:var(--text)}
.burger{display:none}
@media(max-width:1080px){nav.main,.header-actions a.plain{display:none}.burger{display:grid}}

/* ── footer ───────────────────────────────────────────────────────── */
footer.site{background:var(--dark);color:var(--dark-muted);padding:26px 0;margin-top:20px}
footer.site .container{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
footer.site a:hover{color:var(--dark-text)}

/* ══════════════════════ HOME ══════════════════════ */
.hero{display:grid;grid-template-columns:45% 55%;gap:60px;align-items:center;padding:88px 0 72px}
.hero h1{font-size:clamp(38px,4.6vw,56px);font-weight:800}
.hero h1 .g{color:var(--primary)}
.hero .sub{font-size:18px;color:var(--muted);max-width:46ch;margin:20px 0 30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:repeat(4,auto);gap:34px;margin-top:44px}
.hstat .v{font-size:22px;font-weight:800;display:flex;align-items:center;gap:7px}
.hstat .l{font-size:12.5px;color:var(--muted)}
@media(max-width:1080px){.hero{grid-template-columns:1fr;gap:44px;padding:56px 0}.hero-stats{grid-template-columns:repeat(2,1fr);gap:24px}}

.dash{background:var(--dark);color:var(--dark-text);border-radius:var(--radius-lg);padding:22px;box-shadow:0 30px 60px rgba(7,18,15,.28);display:grid;grid-template-columns:56px 1fr;gap:18px}
.dash-rail{display:flex;flex-direction:column;gap:8px;align-items:center;padding-top:6px}
.dash-rail .ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--dark-muted);transition:.15s}
.dash-rail .ico.on{background:var(--primary);color:#fff}
.dash-main{min-width:0}
.dash-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.dash-top .lab-l{font-size:12px;color:var(--dark-muted)}
.dash-top .lab-t{font-size:15px;font-weight:700;color:#fff}
.dash-prog{min-width:170px}
.dash-prog .pl{display:flex;justify-content:space-between;font-size:12px;color:var(--dark-muted);margin-bottom:6px}
.dash-prog .pl b{color:var(--primary)}
.dash-prog .bar{height:6px;background:#12241d;border-radius:99px;overflow:hidden}
.dash-prog .fill{height:100%;width:72%;background:var(--primary);border-radius:99px}
.dash-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:14px}
.panel{background:var(--dark-surface);border:1px solid #17281f;border-radius:16px;padding:15px}
.panel .h{font-size:12px;color:var(--dark-muted);margin-bottom:11px}
.vm{display:flex;align-items:center;gap:10px;padding:7px 0}
.vm .d{width:8px;height:8px;border-radius:50%;flex:none}
.vm .d.run{background:var(--dot-run);box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.vm .d.idle{background:var(--dot-idle)}
.vm .n{font-size:13px;font-weight:600;color:var(--dark-text)}
.vm .o{font-size:11px;color:var(--dark-muted)}
.ex .h2{font-size:14px;font-weight:700;color:#fff;margin-bottom:6px}
.ex p{font-size:12px;color:var(--dark-muted);margin-bottom:11px;line-height:1.5}
.term{background:var(--code);border:1px solid var(--code-line);border-radius:12px;padding:12px;font-family:"JetBrains Mono",monospace;font-size:11px;line-height:1.7;color:#8fd6b4;overflow:hidden}
.term .c{color:#5b7a6e}.term .p{color:var(--primary)}
.dash-foot{margin-top:14px}
@media(max-width:520px){.dash-grid{grid-template-columns:1fr}.dash{grid-template-columns:1fr}.dash-rail{flex-direction:row;flex-wrap:wrap}}

.trust{padding:26px 0}
.trust .box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px 30px;display:flex;align-items:center;gap:34px;flex-wrap:wrap;box-shadow:var(--shadow)}
.trust .lbl{font-size:13px;color:var(--muted);font-weight:600;flex:none}
.trust .logos{display:flex;align-items:center;gap:30px;flex-wrap:wrap;flex:1;justify-content:space-around;opacity:.8}
.trust .logos span{font-weight:800;letter-spacing:.04em;color:#94a3b8;font-size:15px}

section{padding:60px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px;flex-wrap:wrap}
.sec-head h2{font-size:32px;font-weight:800}

/* cartes formation (home + catalogue) */
.f-grid{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:20px}
@media(max-width:1200px){.f-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.f-grid{grid-template-columns:1fr}}
.fcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow);transition:.3s;display:flex;flex-direction:column}
.fcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
/* Bandeau illustré. La scène SVG occupe toute la surface (viz_svg rend un
   viewBox 400x150 en mode « slice »), d'où la hauteur augmentée et le
   place-items:stretch : plus de pictogramme isolé flottant au milieu. */
.fcard .viz{position:relative;height:150px;background:var(--dark);display:block;overflow:hidden}
.fcard .vizart{display:block;width:100%;height:100%}
.fcard .dur{position:absolute;top:12px;left:12px;z-index:1;backdrop-filter:blur(3px);font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:600;color:var(--primary);background:rgba(14,159,110,.14);border:1px solid rgba(14,159,110,.3);padding:3px 8px;border-radius:7px;letter-spacing:.05em}
/* Étiquette de sujet (keywords[0]) : le titre d'une fiche est accrocheur mais
   ne dit pas toujours de quoi elle parle. « De l'initiation à l'investigation
   avancée » a besoin du mot OSINT à côté. */
.fcard .subj{position:absolute;top:12px;right:12px;z-index:1;font-family:"JetBrains Mono",monospace;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#07120F;
  background:var(--primary);padding:3px 9px;border-radius:7px}
.fcard .body{padding:20px;display:flex;flex-direction:column;flex:1}
.fcard h3{font-size:17px;font-weight:700;min-height:44px}
.fcard p{font-size:13.5px;color:var(--muted);margin:8px 0 14px;flex:1}
.lvl{align-self:flex-start;font-size:12px;font-weight:600;padding:3px 11px;border-radius:999px;border:1px solid var(--border);color:var(--muted);margin-bottom:14px}
/* Public visé, en pastilles courtes sous le niveau. */
.aud{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.aud span{font-family:"JetBrains Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.02em;
  padding:3px 9px;border-radius:999px;background:var(--primary-light);color:var(--primary)}
.fcard .foot{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--border)}
.fcard .price{font-size:20px;font-weight:800}
.fcard .price small{font-size:12px;font-weight:600;color:var(--muted)}

.practice{background:var(--dark);border-radius:var(--radius-lg);color:var(--dark-text);padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;box-shadow:0 30px 70px rgba(7,18,15,.25)}
@media(max-width:900px){.practice{grid-template-columns:1fr;padding:32px;gap:32px}}
.practice h2{color:#fff;font-size:28px;font-weight:800;margin-bottom:12px}
.practice .intro{color:var(--dark-muted);font-size:15px;margin-bottom:26px;max-width:46ch}
.feat{display:flex;gap:14px;padding:12px 0}
.feat .fi{width:38px;height:38px;border-radius:11px;background:rgba(14,159,110,.14);display:grid;place-items:center;color:var(--primary);flex:none}
.feat b{color:#fff;font-size:15px;display:block}
.feat span{color:var(--dark-muted);font-size:13px}
.termbox{background:var(--code);border:1px solid var(--code-line);border-radius:18px;overflow:hidden}
.termbox .tabs{display:flex;gap:2px;background:#0d1a15;padding:10px 14px 0;border-bottom:1px solid var(--code-line)}
.termbox .tab{font-family:"JetBrains Mono",monospace;font-size:12px;padding:7px 14px;color:var(--dark-muted);border-radius:8px 8px 0 0}
.termbox .tab.on{background:var(--code);color:var(--dark-text)}
.termbox pre{margin:0;padding:18px;font-family:"JetBrains Mono",monospace;font-size:12px;line-height:1.75;color:#8fd6b4;overflow-x:auto}
.termbox .c{color:#5b7a6e}.termbox .p{color:var(--primary)}.termbox .w{color:#e2e8f0}

.stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:820px){.stats-band{grid-template-columns:repeat(2,1fr)}}
.sb{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px;box-shadow:var(--shadow)}
.sb .ic{width:52px;height:52px;border-radius:15px;background:var(--primary-light);display:grid;place-items:center;color:var(--primary);flex:none}
.sb b{font-size:26px;font-weight:800;display:block;line-height:1.1}
.sb span{font-size:13px;color:var(--muted)}

.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.t-grid{grid-template-columns:1fr}}
.tcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:26px;box-shadow:var(--shadow)}
.stars{color:var(--star);font-size:15px;letter-spacing:2px;margin-bottom:12px}
.tcard q{font-size:15px;line-height:1.6;display:block;margin-bottom:18px}
.who{display:flex;align-items:center;gap:12px}
.who .av{width:40px;height:40px;border-radius:50%;background:var(--primary-light);color:var(--primary);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.who b{font-size:14px;display:block}
.who span{font-size:12.5px;color:var(--muted)}

.fin{text-align:center;padding:44px 0}
.fin .lbl{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:22px}
.fin .row{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;opacity:.75}
.fin .row span{font-weight:800;color:#94a3b8;font-size:15px;letter-spacing:.03em}

.cta-final{background:var(--primary)}
.cta-final .container{display:flex;align-items:center;gap:30px;justify-content:space-between;padding:34px 40px;flex-wrap:wrap}
.cta-final h2{color:#fff;font-size:26px;font-weight:800;line-height:1.2}
.cta-final p{color:rgba(255,255,255,.9);font-size:15px;margin-top:4px}
.cta-final .acts{display:flex;gap:12px;flex-wrap:wrap}

/* ══════════════════════ FICHE FORMATION ══════════════════════ */
.f-hero{padding:56px 0 40px}
.f-hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:44px;align-items:start}
@media(max-width:900px){.f-hero-grid{grid-template-columns:1fr;gap:28px}}
.f-tag{display:inline-block;font-size:13px;font-weight:600;color:var(--primary);background:var(--primary-light);padding:6px 14px;border-radius:999px;margin-bottom:18px}
.f-title{font-size:clamp(30px,3.8vw,44px);font-weight:800;margin-bottom:16px}
.f-title em{font-style:normal;color:var(--primary)}
.f-lead{font-size:17px;color:var(--muted);max-width:52ch;margin-bottom:22px}
.f-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.fbadge{font-size:13px;font-weight:600;padding:7px 13px;border-radius:10px;background:var(--surface);border:1px solid var(--border);color:var(--text)}
.fbadge.teal{background:var(--primary-light);border-color:transparent;color:var(--primary)}
.f-hero-actions{display:flex;gap:12px;flex-wrap:wrap}

.info-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow)}
.ic-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--border)}
.ic-row:last-child{border-bottom:0}
.ic-label{font-size:13px;color:var(--muted)}
.ic-val{font-size:14px;font-weight:600;text-align:right}
.ic-val.price{font-size:18px;color:var(--primary);font-weight:800}
.ic-val.date{color:var(--primary)}
.cta-card{margin-top:16px;background:var(--dark);color:var(--dark-text);border-radius:var(--radius-md);padding:20px}
.cta-card p{font-size:13.5px;margin-bottom:14px;color:var(--dark-muted)}

.f-section{padding:44px 0;border-top:1px solid var(--border)}
.section-label{font-size:13px;font-weight:700;color:var(--primary);letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}
.section-title{font-size:30px;font-weight:800;margin-bottom:26px}
.section-title em{font-style:normal;color:var(--primary)}
.f-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:820px){.f-grid-2{grid-template-columns:1fr}}
.f-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:26px;box-shadow:var(--shadow)}
.f-card h3{font-size:18px;font-weight:700;margin-bottom:14px}
.f-card ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.f-card ul li{position:relative;padding-left:26px;font-size:14.5px;color:#374151}
.f-card ul li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%;background:var(--primary-light);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9F6E' stroke-width='3.5'%3E%3Cpath d='m5 12 5 5L20 7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:10px;background-repeat:no-repeat;background-position:center}
.f-sub{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.f-sub p{font-size:14px;color:var(--muted)}

.prog-list{display:flex;flex-direction:column;gap:14px}
.prog-day{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:22px 26px;box-shadow:var(--shadow);transition:.2s}
.prog-day:hover{border-color:var(--primary);box-shadow:var(--shadow-hover)}
.prog-day-tag{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:600;color:var(--primary);background:var(--primary-light);padding:4px 12px;border-radius:8px;margin-bottom:12px}
.prog-day h4{font-size:18px;font-weight:700;margin-bottom:14px}
.prog-day ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
@media(max-width:640px){.prog-day ul{grid-template-columns:1fr}}
.prog-day ul li{position:relative;padding-left:20px;font-size:14px;color:#374151}
.prog-day ul li::before{content:"▸";position:absolute;left:0;color:var(--primary);font-size:12px;top:2px}

.planning-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:26px;box-shadow:var(--shadow)}
.planning-date{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--border);margin-bottom:18px}
.planning-date .d-icon{width:46px;height:46px;border-radius:13px;background:var(--primary-light);display:grid;place-items:center;color:var(--primary);flex:none}
.planning-date strong{display:block;font-size:17px}
.planning-date span{font-size:13px;color:var(--muted)}
.planning-detail{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pd-item{display:flex;flex-direction:column}
.pd-item span{font-size:12px;color:var(--muted)}
.pd-item strong{font-size:15px}
.planning-empty{padding:18px;background:var(--bg);border:1px dashed var(--border);border-radius:12px;text-align:center;color:var(--muted);font-size:14px}

.cta-band{position:relative;background:var(--dark);color:#fff;text-align:center;padding:64px 0;overflow:hidden;border-radius:var(--radius-lg);margin-top:44px}
.cta-band h2{font-size:32px;font-weight:800;margin-bottom:12px}
.cta-band h2 em{font-style:normal;color:var(--primary)}
.cta-band > .container > p{color:var(--dark-muted);margin-bottom:26px}
.cta-group{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ══ liste des sessions (home + catalogue) ══ */
.sessions-list{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.srow{display:grid;grid-template-columns:150px 1fr 120px 130px;gap:20px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border);transition:.15s}
.srow:last-child{border-bottom:0}
.srow:hover{background:var(--bg)}
.srow .sd{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted)}
.srow .st{font-size:15px;font-weight:700}
.srow .sm{font-size:12px;color:var(--muted)}
.srow .sp{font-family:"JetBrains Mono",monospace;font-weight:700;text-align:right}
.chip{justify-self:end;font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px}
.chip.ok{background:var(--primary-light);color:var(--primary)}
.chip.low{background:#FEF3C7;color:#B45309}
.chip.crit{background:#FEE2E2;color:#B91C1C}
@media(max-width:820px){.srow{grid-template-columns:1fr auto;gap:6px 14px}.srow .sd{grid-column:1/-1}.chip{grid-column:1/-1;justify-self:start}}

/* ══ Link preview (hovercards) ══ */
.lp-card{position:absolute;z-index:120;width:320px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 20px 50px rgba(7,18,15,.18);padding:18px 20px;opacity:0;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease;pointer-events:auto}
.lp-card.lp-show{opacity:1;transform:translateY(0)}
.lp-tag{display:inline-block;font-size:11px;font-weight:600;color:var(--primary);background:var(--primary-light);padding:3px 10px;border-radius:999px;margin-bottom:10px}
.lp-title{font-size:16px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
.lp-lead{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lp-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.lp-badge{font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:2px 10px}
.lp-price{margin-left:auto;font-size:16px;font-weight:800}
.lp-session{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--border);margin-bottom:10px}
.lp-sess-date{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted)}
.lp-chip{font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px}
.lp-ok{background:var(--primary-light);color:var(--primary)}
.lp-low{background:#FEF3C7;color:#B45309}
.lp-crit{background:#FEE2E2;color:#B91C1C}
.lp-cta{font-size:13px;font-weight:600;color:var(--primary)}
@media(hover:none){.lp-card{display:none}}

/* ══ Équipe (à propos) ══ */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.team-grid{grid-template-columns:1fr}}
.member{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow);transition:.25s;display:flex;flex-direction:column}
.member:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.m-photo{margin-bottom:16px}
.m-photo img{width:88px;height:88px;border-radius:20px;object-fit:cover;border:2px solid var(--primary-light)}
.m-body h3{font-size:19px;font-weight:800;letter-spacing:-.02em}
.m-role{font-size:13px;font-weight:600;color:var(--primary);margin:2px 0 12px}
.m-bio{font-size:13.5px;color:#374151;line-height:1.6;flex:1}
.m-certs{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 14px}
.m-certs span{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:3px 8px}
.m-link{font-size:13px;font-weight:600;color:var(--primary);align-self:flex-start}
.m-link:hover{gap:8px}

/* ══ Bande de notes (témoignages) ══ */
.rating-band{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
@media(max-width:700px){.rating-band{grid-template-columns:1fr}}
.rb{background:var(--dark);color:var(--dark-text);border-radius:var(--radius-md);padding:20px 24px;display:flex;align-items:baseline;gap:12px}
.rb b{font-size:30px;font-weight:800;color:var(--primary)}
.rb span{font-size:13px;color:var(--dark-muted)}

/* ══ Hero : crédibilité + domaines d'intervention ══ */
.hero-cred{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--text);background:var(--primary-light);border-radius:12px;padding:12px 16px;margin:0 0 24px}
.hero-cred svg{color:var(--primary);flex:none}
.domaines{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:10px;align-self:stretch}
.dom-head{padding:16px 16px 14px}
.dom-label{display:block;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:600;color:var(--primary);letter-spacing:.04em}
.dom-approach{display:block;font-size:15px;font-weight:700;color:var(--text);margin-top:4px;letter-spacing:-.01em}
.dom-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;transition:.18s}
.dom-row:hover{background:var(--bg)}
.dom-row+.dom-row{border-top:1px solid var(--border)}
.dom-ic{width:42px;height:42px;border-radius:12px;background:var(--primary-light);display:grid;place-items:center;color:var(--primary);flex:none}
.dom-row b{display:block;font-size:15px;font-weight:700}
.dom-row span span{font-size:13px;color:var(--muted)}
@media(max-width:1080px){.domaines{align-self:auto}}

/* ══ Hero : bandeau illustré du bloc « domaines » ══
   Le cadre de droite était trop aéré : on ajoute une illustration + le slogan,
   sur le même principe que la bannière LinkedIn mais en palette émeraude.
   Grille 2 colonnes (illustration | texte), qui passe en pile sous 620px. */
.dom-viz{position:relative;overflow:hidden;border-radius:var(--radius-md);
  background:linear-gradient(135deg,#07120F 0%,#0E1C17 52%,#0B2C21 100%);
  padding:24px 26px;display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center}
/* halo émeraude derrière l'illustration, purement décoratif */
.dom-viz::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 16% 52%,rgba(14,159,110,.26),transparent 58%)}
.dom-viz-art{position:relative;z-index:1;width:100%;height:auto;display:block}
.dom-viz-txt{position:relative;z-index:1;min-width:0}
.dvt-slogan{font-size:clamp(16px,1.35vw,20px);line-height:1.22;font-weight:800;color:#fff;
  text-transform:uppercase;letter-spacing:-.01em}
.dvt-slogan em{font-style:normal;color:#34D399}
.dvt-sub{margin-top:10px;font-family:"JetBrains Mono",monospace;font-size:10.5px;
  line-height:1.5;letter-spacing:.05em;text-transform:uppercase;color:var(--dark-muted)}
/* le libellé sous le bandeau n'a plus besoin d'autant d'air */
.dom-viz + .dom-head{padding:18px 16px 10px}
@media(max-width:620px){
  .dom-viz{grid-template-columns:1fr;text-align:center;padding:22px 20px}
  .dom-viz-art{max-width:170px;margin:0 auto}
}

/* Le cadre s'étire sur la hauteur de la colonne de gauche : on répartit
   l'espace restant sur les lignes plutôt que de laisser un vide en bas. */
.domaines{display:flex;flex-direction:column}
.dom-viz,.dom-head,.dom-foot{flex:none}
.dom-row{flex:1 1 auto}
.dom-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding:16px;border-top:1px solid var(--border);border-radius:0 0 18px 18px;transition:.18s}
.dom-foot:hover{background:var(--bg)}
.dom-foot-chips{display:flex;gap:7px;flex-wrap:wrap}
.dom-foot-chips span{font-family:"JetBrains Mono",monospace;font-size:10.5px;font-weight:600;
  padding:5px 9px;border-radius:999px;background:var(--primary-light);color:var(--primary)}
.dom-foot .link-arrow{font-size:13.5px}

/* ══════════════════════ PAGES CONTACT & BLOG ══════════════════════ */

/* En-tête commun aux pages simples (contact, blog). */
.page-head{padding:60px 0 34px;max-width:760px}
.page-head .section-title{margin-bottom:14px;font-size:clamp(28px,3.2vw,38px)}
.page-lead{font-size:17px;color:var(--muted);line-height:1.65}

/* Grille du formulaire : colonne principale + récapitulatif à droite. */
.contact-grid{display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start;padding-bottom:56px}
@media(max-width:1000px){.contact-grid{grid-template-columns:1fr}}

.contact-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:30px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:20px}

/* Honeypot : hors flux et hors lecture d'écran. Un humain ne le voit jamais,
   un automate qui remplit tout se trahit en le remplissant. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:640px){.fld-row{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.fld label{font-size:13.5px;font-weight:600;color:var(--text)}
.fld .req{color:var(--primary)}
.fld input,.fld select,.fld textarea{font-family:inherit;font-size:15px;color:var(--text);
  background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:13px 14px;width:100%;
  transition:border-color .15s,box-shadow .15s}
.fld textarea{resize:vertical;line-height:1.55;min-height:110px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(14,159,110,.14);background:var(--surface)}
.fld input:disabled,.fld select:disabled,.fld textarea:disabled{opacity:.55;cursor:not-allowed}
.fld-help{font-size:12px;color:var(--muted)}

.captcha-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.captcha-q{font-family:"JetBrains Mono",monospace;font-size:14px;font-weight:600;color:var(--primary);
  background:var(--primary-light);padding:12px 14px;border-radius:12px;white-space:nowrap}
.captcha-row input{flex:1;min-width:110px}

.form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--border);padding-top:22px}
.form-foot .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.form-legal{font-size:12px;color:var(--muted);flex:1;min-width:200px;line-height:1.5}

.form-msg{font-size:14px;font-weight:500;padding:14px 16px;border-radius:12px;line-height:1.55}
.form-msg.ok{background:var(--primary-light);color:var(--primary-hover)}
.form-msg.err{background:#FEF2F2;color:#B91C1C}
.form-msg a{text-decoration:underline}

.contact-side{position:sticky;top:96px}
@media(max-width:1000px){.contact-side{position:static}}

/* Pastilles de public dans l'aperçu au survol. */
.lp-aud{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 0}
.lp-aud span{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:600;
  padding:2px 8px;border-radius:999px;background:var(--primary-light);color:var(--primary)}

/* ══ Cartes d'article de blog (page blog + bas des fiches formation) ══
   Grille auto-fit : trois colonnes en large, une seule sur mobile, sans
   media query à maintenir. */
/* Trois colonnes fixes, comme les cartes formation : un auto-fit laissait une
   quatrième colonne sur grand écran et un article orphelin sur la ligne suivante. */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.art-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.art-grid{grid-template-columns:1fr}}
.art-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow);transition:.18s}
.art-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.art-date{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--primary);margin-bottom:10px}
.art-card h3{font-size:17px;font-weight:700;line-height:1.32;margin-bottom:10px}
.art-card p{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:16px;flex:1}
.art-card .link-arrow{font-size:13.5px;align-self:flex-start}