/* ============================================================
   blog-2026.css — Design system refonte blog mARTketing (07/2026)
   Repro fidèle des maquettes .dc.html : Kalam + Spectral + Space Mono,
   néon #e4ff00, fond papier millimétré, ombres portées dures.
   Style le nouveau chrome ET tous les composants de corps existants.
   ============================================================ */
:root{
  --ink:#17160f; --ink-soft:rgba(23,22,15,.83); --ink-mute:rgba(23,22,15,.5);
  --paper:#faf8f1; --paper-out:#f3f1e8;
  --neon:#e4ff00; --blue:#2836ff; --accent:#b4420f;
  --card:#fffef9; --dark:#100f0b; --dark2:#0b0b09; --border:rgba(23,22,15,.13);
  --line:rgba(23,22,15,.034);
  --shadow:12px 16px 0 rgba(23,22,15,.07); --shadow-sm:6px 8px 0 rgba(23,22,15,.05);
  --ff-title:'Kalam',cursive; --ff-hand:'Kalam',cursive; --ff-serif:'Spectral',serif; --ff-mono:'Space Mono',monospace;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{background:var(--paper-out); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:var(--blue); text-decoration:none;}
a:hover{color:var(--ink);}
::selection{background:var(--neon); color:var(--ink);}
img{max-width:100%;}
.article-retour, .margin-annot, .article-nav{display:none !important;}

/* ---------- LAYOUT ---------- */
.page{position:relative; z-index:2; background:var(--paper); overflow:hidden; padding:44px 6vw 96px;}
.page::before{content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:34px 34px;}
.wrap{position:relative; max-width:1120px; margin:0 auto;}

/* ---------- NAV ---------- */
.nav{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:76px;}
.nav-logo{display:flex; align-items:center; flex-shrink:0;}
.nav-logo img{height:30px; width:auto; display:block;}
.nav-links{display:flex; align-items:center; gap:30px; font-family:var(--ff-mono); font-size:15px; letter-spacing:.02em; flex-wrap:wrap;}
.nav-links a{color:var(--ink);}
.nav-cta{background:var(--dark); color:#fff!important; padding:13px 22px; border-radius:3px; transition:transform .18s;}
.nav-cta:hover{transform:translateY(-2px);}

/* ---------- HEADER ---------- */
.a-head{max-width:900px; margin:0 auto; text-align:center; padding:40px 0 24px;}
.eyebrow{font-family:var(--ff-mono); font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin-bottom:30px;}
.a-title{margin:0; font-family:var(--ff-title); font-weight:800; font-size:clamp(46px,6.4vw,82px); line-height:1.02; letter-spacing:-.025em; color:var(--ink); text-wrap:balance;}
.a-title .hl, .a-title .hi-marker{display:inline-block; background:var(--neon); line-height:.86; padding:.06em .1em .1em;}
.a-meta{font-family:var(--ff-mono); font-size:14px; letter-spacing:.08em; color:rgba(23,22,15,.55); margin-top:34px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;}
.a-meta .article-meta-dot{width:3px; height:3px; background:rgba(23,22,15,.4); border-radius:50%;}

/* ---------- FIGURES ---------- */
.frame{border-radius:4px; overflow:hidden; box-shadow:var(--shadow); background:#e9e6db;}
.frame img{display:block; width:100%; height:100%; object-fit:cover;}
.figcap, .article-figure figcaption{font-family:var(--ff-mono); font-size:12.5px; line-height:1.6; color:var(--ink-mute); text-align:center; margin:18px auto 0; max-width:420px; font-style:normal;}
.fig-hero{margin:40px auto 20px; width:min(460px,100%);}
.fig-hero .frame{aspect-ratio:3/4; background:var(--dark);}
.fig{margin:56px 0;}
.fig .frame{aspect-ratio:4/3;}
.fig-portrait{margin:56px auto; width:min(420px,100%);}
.fig-portrait .frame{aspect-ratio:3/4;}
.fig-duo, .survivor-duo{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:52px 0;}
.fig-duo figure, .survivor-duo figure{margin:0;}
.fig-duo .frame, .survivor-duo .frame{aspect-ratio:1/1; box-shadow:9px 12px 0 rgba(23,22,15,.06);}
.fig-duo .figcap, .survivor-duo figcaption{font-size:12px; margin-top:14px;}
/* Figures existantes (article-body) : même langage visuel */
.article-figure{margin:56px auto; text-align:center;}
.article-figure img{display:block; width:100%; height:auto; margin:0 auto; border-radius:4px; box-shadow:var(--shadow); background:#e9e6db;}
.article-figure.is-portrait{width:min(440px,100%);}
.article-figure.hero{margin:40px auto 20px; width:min(460px,100%);}
.survivor-duo figure img{border-radius:4px; box-shadow:9px 12px 0 rgba(23,22,15,.06);}

/* ---------- ARTICLE TYPOGRAPHIE ---------- */
.article, .article-body{max-width:632px; margin:56px auto 0;}
.article p, .article-body p{font-family:var(--ff-serif); font-size:20px; line-height:1.92; color:var(--ink-soft); margin:0 0 34px; text-wrap:pretty;}
.article p.lead, .article-body > p:first-of-type{font-size:20.5px; color:rgba(23,22,15,.86);}
.article p.lead::first-letter, .article-body > p:first-of-type::first-letter{float:left; font-family:var(--ff-title); font-weight:700; font-size:88px; line-height:.72; padding:12px 16px 0 0; color:var(--ink);}
.article strong, .article em, .article-body strong, .article-body em{font-weight:400; font-style:italic; color:var(--ink);}
.article mark, .article-body mark{background:var(--neon); padding:1px 4px; color:inherit;}
.article a, .article-body a, a.inl{color:var(--blue); text-decoration:underline; text-underline-offset:3px;}
.article a:hover, .article-body a:hover{color:var(--ink);}
.article-body ul, .article-body ol{font-family:var(--ff-serif); font-size:20px; line-height:1.8; color:var(--ink-soft); margin:0 0 34px; padding-left:26px;}
.article-body li{margin-bottom:12px;}
.article h2, .article-body h2{font-family:var(--ff-title); font-weight:800; font-size:clamp(34px,4.4vw,52px); line-height:1.06; letter-spacing:-.02em; color:var(--ink); margin:92px 0 6px;}
.article h2::after, .article-body h2::after{content:''; display:block; width:66px; height:9px; background:var(--neon); margin:0 0 36px; transform:rotate(-1deg);}
.article-body h2[id], .article-body h3[id]{scroll-margin-top:90px;}
.article-body h3{font-family:var(--ff-title); font-weight:700; font-size:28px; line-height:1.15; color:var(--ink); margin:40px 0 12px;}

/* ---------- CITATION / CALLOUT ---------- */
.callout, .pullquote{margin:48px 0; padding:8px 0 8px 32px; border-left:6px solid var(--neon); background:linear-gradient(90deg, rgba(228,255,0,.16), transparent);}
.callout{font-family:var(--ff-serif); font-style:italic; font-size:26px; line-height:1.55; color:var(--ink); text-wrap:pretty;}
.pullquote p{font-family:var(--ff-serif); font-style:italic; font-size:26px; line-height:1.55; color:var(--ink); margin:0;}

/* ---------- FAQ ---------- */
.faq{display:flex; flex-direction:column; gap:40px;}
.faq h3{font-family:var(--ff-title); font-weight:700; font-size:26px; line-height:1.2; color:var(--ink); margin:0 0 14px;}
.faq p{font-size:20px; line-height:1.8; color:rgba(23,22,15,.82); margin:0;}
.faq-q{font-family:var(--ff-title); font-weight:700; font-size:26px; line-height:1.2; color:var(--ink); margin:40px 0 10px;}

/* ---------- SOMMAIRE ---------- */
.toc{background:var(--card); border:1px solid var(--border); border-radius:3px; box-shadow:var(--shadow-sm); padding:24px 28px; margin:44px 0;}
.toc-label{font-family:var(--ff-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; display:block;}
.toc ol{columns:2; column-gap:28px; margin:0 !important; padding-left:20px !important; font-family:var(--ff-serif); font-size:16px !important;}
.toc li{margin-bottom:9px; break-inside:avoid;}
.toc a{color:var(--ink-soft); text-decoration:none;}
.toc a:hover{color:var(--blue); text-decoration:underline;}

/* ---------- VERDICT / SCHEMA-BOX (blocs sombres) ---------- */
.verdict, .schema-box{background:var(--dark2); color:#fff; border-radius:4px; padding:30px 30px 26px; margin:44px 0; box-shadow:var(--shadow); position:relative;}
.verdict-label, .schema-box-label{font-family:var(--ff-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--neon); margin-bottom:16px; display:block;}
.verdict p{font-family:var(--ff-serif); font-size:18px; line-height:1.65; color:rgba(255,255,255,.88); margin:0 0 12px;}
.verdict p:last-child{margin-bottom:0;}
.verdict strong{color:var(--neon); font-style:normal; font-weight:700;}
.verdict .stars{font-size:22px; letter-spacing:2px; color:var(--neon); margin-bottom:12px;}
.verdict .stars .s-num{font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; color:rgba(255,255,255,.6); margin-left:8px;}
.schema-box-step{display:flex; align-items:flex-start; gap:14px; margin-bottom:14px;}
.schema-box-step:last-child{margin-bottom:0;}
.schema-box-num{font-family:var(--ff-title); font-size:24px; font-weight:700; color:var(--neon); line-height:1.1; min-width:26px;}
.schema-box-text{font-family:var(--ff-serif); font-size:16.5px; line-height:1.55; color:rgba(255,255,255,.85);}
.schema-box-text strong{font-style:normal; font-weight:700; color:#fff;}

/* ---------- CARTES INTRO / COMPARE ---------- */
.intro2, .compare2{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:38px 0;}
.intro2 > div, .compare2 > div{border:1px solid var(--border); border-radius:3px; padding:22px 22px 18px; background:var(--card); box-shadow:var(--shadow-sm);}
.intro2 .i-ghl, .compare2 .c-tunnel{border-color:var(--blue);}
.compare2 .c-site{background:#f5f2e8;}
.intro2 h4, .compare2 h4{font-family:var(--ff-title); font-size:24px; font-weight:700; margin:0 0 2px; color:var(--ink);}
.intro2 .i-ghl h4, .compare2 .c-tunnel h4{color:var(--blue);}
.intro2 .i-sub{font-family:var(--ff-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); display:block; margin-bottom:12px;}
.intro2 p{font-family:var(--ff-serif); font-size:15px; line-height:1.55; color:var(--ink-soft); margin:0;}
.compare2 ul{margin:0; padding-left:20px; font-family:var(--ff-serif); font-size:15px; line-height:1.6;}
.compare2 li{margin-bottom:7px; color:var(--ink-soft);}

/* ---------- STAT CARDS ---------- */
.stat-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:44px 0;}
.stat-card{background:var(--card); border:1px solid var(--border); border-radius:3px; padding:24px 18px 20px; text-align:center; box-shadow:var(--shadow-sm); position:relative;}
.stat-card::before{content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(-2deg); width:36px; height:11px; background:var(--neon);}
.stat-num{font-family:var(--ff-title); font-size:42px; font-weight:800; color:var(--blue); line-height:1; letter-spacing:-.02em;}
.stat-lbl{font-family:var(--ff-serif); font-size:14.5px; line-height:1.4; color:var(--ink-soft); margin-top:8px;}

/* ---------- BAR CHART ---------- */
.bar-chart{margin:40px 0; padding:26px 26px 22px; background:var(--card); border:1px solid var(--border); border-radius:3px; box-shadow:var(--shadow-sm);}
.bar-chart-title{font-family:var(--ff-title); font-size:24px; font-weight:700; color:var(--ink); margin-bottom:6px; line-height:1.15;}
.bar-legend{font-family:var(--ff-mono); font-size:10px; letter-spacing:.04em; color:var(--ink-mute); margin-bottom:18px;}
.bar-legend .dot{display:inline-block; width:10px; height:10px; margin:0 4px 0 12px; vertical-align:middle;}
.bar-legend .dot.grey{background:#9a9384;} .bar-legend .dot.blue{background:var(--blue);}
.bar-row{margin-bottom:14px;} .bar-row:last-child{margin-bottom:0;}
.bar-label{font-family:var(--ff-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:5px; display:block;}
.bar-track{background:#efe9da; height:26px; position:relative; overflow:hidden; margin-bottom:5px; border-radius:2px;}
.bar-track.tall{height:34px;}
.bar-fill{height:100%; display:flex; align-items:center; justify-content:flex-end; padding-right:9px; font-family:var(--ff-serif); font-weight:700; font-style:normal; font-size:13px; color:#fff; white-space:nowrap;}
.bar-fill.blue{background:var(--blue);} .bar-fill.grey{background:#9a9384;}
.bar-fill.fluo{background:var(--neon); color:var(--ink); box-shadow:inset 0 0 0 1.5px #b7cc00;}
.bar-cap{font-family:var(--ff-mono); font-size:9px; letter-spacing:.05em; color:var(--ink-mute); margin-top:16px; line-height:1.5;}

/* ---------- TABLEAU ---------- */
.tool-table{width:100%; border-collapse:collapse; margin:36px 0; font-family:var(--ff-serif); font-size:15.5px;}
.tool-table th,.tool-table td{border:1px solid var(--border); padding:12px 14px; text-align:left; vertical-align:top; line-height:1.5;}
.tool-table th{font-family:var(--ff-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:var(--ink); color:#fff;}
.tool-table td:first-child{font-weight:700; color:var(--ink); font-style:normal;}
.tool-table .win{background:rgba(228,255,0,.20);}
.tool-table .yes{color:#1a7a3a; font-weight:700;}
.tool-table .no{color:#b0472e; font-weight:700;}

/* ---------- PROS / CONS ---------- */
.proscons{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:32px 0;}
.pc{border:1px solid var(--border); border-radius:3px; padding:20px 22px; background:var(--card); box-shadow:var(--shadow-sm);}
.pc h4{font-family:var(--ff-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 12px;}
.pc-pro h4{color:#1a7a3a;} .pc-con h4{color:#b0472e;}
.pc ul{list-style:none; margin:0 !important; padding:0 !important; font-family:var(--ff-serif); font-size:15px; line-height:1.5;}
.pc li{position:relative; padding-left:24px; margin-bottom:9px; color:var(--ink-soft);}
.pc-pro li::before{content:'✓'; position:absolute; left:0; color:#1a7a3a; font-weight:700;}
.pc-con li::before{content:'✕'; position:absolute; left:0; color:#b0472e; font-weight:700;}

/* ---------- PERSONAS ---------- */
.persona-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:36px 0;}
.persona-card{border:1px solid var(--border); border-radius:3px; background:var(--card); padding:20px 22px; box-shadow:var(--shadow-sm);}
.persona-emoji{font-size:28px; line-height:1;}
.persona-title{font-family:var(--ff-title); font-size:21px; font-weight:700; color:var(--ink); margin:8px 0 4px; line-height:1.15;}
.persona-desc{font-family:var(--ff-serif); font-size:14.5px; line-height:1.5; color:var(--ink-soft); margin:0 0 10px;}
.pv{font-family:var(--ff-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; display:inline-block; border-radius:2px;}
.pv-sio, .pv-no{background:#efe9da; color:#6b6350;}
.pv-ghl, .pv-yes{background:var(--blue); color:#fff;}

/* ---------- CHECKLIST ---------- */
.checklist{list-style:none !important; margin:36px 0 !important; padding:26px 28px !important; background:var(--card); border:1px solid var(--blue); border-radius:3px; box-shadow:var(--shadow-sm);}
.checklist li{position:relative; padding-left:38px; margin-bottom:14px; font-family:var(--ff-serif); font-size:16px; line-height:1.55; color:var(--ink-soft);}
.checklist li:last-child{margin-bottom:0;}
.checklist li::before{content:'✓'; position:absolute; left:0; top:-1px; width:24px; height:24px; line-height:24px; text-align:center; background:var(--neon); color:var(--ink); font-weight:700; font-family:var(--ff-mono); font-size:14px; border-radius:2px;}

/* ---------- VIDÉO + CHAPITRES ---------- */
.video-embed{position:relative; width:100%; padding-top:56.25%; margin:40px 0 12px; background:var(--dark); border-radius:4px; overflow:hidden; box-shadow:var(--shadow);}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
.video-cap{font-family:var(--ff-mono); font-size:11px; letter-spacing:.05em; color:var(--ink-mute); text-align:center; margin:0 0 40px; line-height:1.6;}
.video-cap b{font-family:var(--ff-serif); font-style:italic; font-weight:400; color:var(--ink);}
.chapters{list-style:none; margin:0 0 40px; padding:20px 22px; background:var(--card); border:1px solid var(--border); border-radius:3px; box-shadow:var(--shadow-sm);}
.chapters li{margin:0; border-bottom:1px dashed rgba(23,22,15,.14);}
.chapters li:last-child{border-bottom:0;}
.chapters a{display:flex; align-items:baseline; gap:14px; padding:10px 4px; text-decoration:none; font-family:var(--ff-serif); font-size:16.5px; color:var(--ink-soft); transition:color .15s;}
.chapters a:hover{color:var(--blue);}
.chapters .ch-time{font-family:var(--ff-mono); font-size:11px; color:var(--ink); background:var(--neon); padding:3px 8px; min-width:66px; text-align:center; flex-shrink:0; border-radius:2px;}

/* ---------- FUNNEL SCHEMA ---------- */
.funnel-schema{margin:44px auto; display:flex; flex-direction:column; align-items:center; gap:7px;}
.funnel-row{background:var(--card); border:1.5px solid var(--blue); border-radius:2px; font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; color:var(--ink); text-align:center; padding:13px 10px; line-height:1.4; box-shadow:3px 4px 0 rgba(40,54,255,.14);}
.funnel-row b{font-family:var(--ff-serif); font-style:normal; font-weight:700; display:block; font-size:13.5px; margin-bottom:2px;}
.funnel-row span{color:var(--ink-mute); font-size:10px;}
.funnel-row.f1{width:100%; background:#eef1ff;}
.funnel-row.f2{width:82%;} .funnel-row.f3{width:64%;}
.funnel-row.f4{width:46%; background:var(--neon); border-color:#b7cc00;}
.step-num{font-family:var(--ff-title); font-weight:800; color:var(--blue);}

/* ---------- CTA INLINE ---------- */
.cta-inline{display:block; text-decoration:none; background:var(--neon); color:var(--ink); padding:24px 28px; margin:44px 0; border-radius:4px; box-shadow:var(--shadow); position:relative; transition:transform .18s;}
.cta-inline:hover{transform:translateY(-2px);}
.cta-inline .ci-eyebrow{font-family:var(--ff-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; opacity:.55; display:block; margin-bottom:6px;}
.cta-inline .ci-title{font-family:var(--ff-title); font-size:28px; font-weight:800; line-height:1.12; margin-bottom:4px;}
.cta-inline .ci-arrow{font-family:var(--ff-title); font-size:17px; font-weight:700;}

/* ---------- À LIRE AUSSI ---------- */
.a-hr{border:none; border-top:1px solid rgba(23,22,15,.14); margin:100px 0 84px;}
.rel{margin-bottom:148px;}
.rel-label{font-family:var(--ff-mono); font-size:13px; letter-spacing:.34em; text-transform:uppercase; color:var(--blue); margin-bottom:44px;}
.rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px;}
.rel-card{position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:3px; padding:34px 30px 28px; box-shadow:var(--shadow-sm); transition:transform .18s;}
.rel-card:hover{transform:translateY(-4px);}
.rel-card .tape{position:absolute; top:-12px; left:40px; width:74px; height:26px; background:var(--neon); opacity:.85;}
.rel-card:nth-child(1) .tape{transform:rotate(-3deg);}
.rel-card:nth-child(2) .tape{transform:rotate(2deg);}
.rel-card:nth-child(3) .tape{transform:rotate(-2deg);}
.rel-cat{font-family:var(--ff-mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:20px;}
.rel-title{font-family:var(--ff-title); font-weight:700; font-size:25px; line-height:1.24; letter-spacing:-.01em; color:var(--ink); margin-bottom:28px;}
.rel-more{margin-top:auto; font-family:var(--ff-title); font-weight:700; font-size:18px; color:var(--blue);}

/* ---------- PROCHAINE ÉTAPE ---------- */
.cta-wrap{margin-bottom:156px;}
.cta-intro{max-width:760px; margin-bottom:60px;}
.cta-intro .eyebrow{margin-bottom:22px; text-align:left;}
.cta-h2{margin:0; font-family:var(--ff-title); font-weight:800; font-size:clamp(52px,7vw,82px); line-height:.98; letter-spacing:-.02em; color:var(--ink);}
.cta-h2 .hl-under{position:relative; display:inline-block; z-index:0;}
.cta-h2 .hl-under::after{content:''; position:absolute; left:-2px; right:-6px; bottom:6px; height:16px; background:var(--neon); z-index:-1; transform:rotate(-1deg);}
.cta-sub{margin:30px 0 0; font-family:var(--ff-serif); font-style:italic; font-size:23px; line-height:1.6; color:rgba(23,22,15,.66); text-wrap:pretty;}
.cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.cta-card{display:flex; flex-direction:column; border-radius:4px; padding:52px 48px 46px; min-height:420px; box-shadow:var(--shadow); transition:transform .18s;}
.cta-card:hover{transform:translateY(-3px);}
.cta-card.dark{background:var(--dark);} .cta-card.neon{background:var(--neon);}
.cta-eyebrow{font-family:var(--ff-mono); font-size:13px; letter-spacing:.24em; text-transform:uppercase; margin-bottom:34px;}
.cta-card.dark .cta-eyebrow{color:rgba(255,255,255,.5);}
.cta-card.neon .cta-eyebrow{color:rgba(23,22,15,.55);}
.cta-card h3{margin:0 0 26px; font-family:var(--ff-title); font-weight:800; font-size:40px; line-height:1.02; letter-spacing:-.015em;}
.cta-card.dark h3{color:#fff;} .cta-card.neon h3{color:var(--dark);}
.cta-card p{margin:0 0 34px; font-family:var(--ff-serif); font-size:20px; line-height:1.68; text-wrap:pretty;}
.cta-card.dark p{color:rgba(255,255,255,.78);} .cta-card.neon p{color:rgba(16,15,11,.82);}
.cta-foot{margin-top:auto;}
.cta-price{font-family:var(--ff-mono); font-size:14px; letter-spacing:.12em; margin-bottom:22px;}
.cta-card.dark .cta-price{color:var(--neon);} .cta-card.neon .cta-price{color:rgba(16,15,11,.6);}
.cta-go{font-family:var(--ff-title); font-weight:800; font-size:24px;}
.cta-card.dark .cta-go{color:var(--neon);}
.cta-card.neon .cta-go{display:inline-flex; align-items:center; gap:10px; background:var(--dark); color:#fff; font-size:22px; padding:14px 26px; border-radius:3px;}
.cta-card:hover .cta-go{opacity:.82;}

/* ---------- À PROPOS ---------- */
.about{margin-bottom:24px;}
.about-label{font-family:var(--ff-mono); font-size:13px; letter-spacing:.34em; text-transform:uppercase; color:var(--blue); margin-bottom:34px;}
.about-card{position:relative; background:var(--dark2); border-radius:5px; overflow:hidden; box-shadow:16px 20px 0 rgba(23,22,15,.07);}
.about-tape{position:absolute; top:22px; left:26px; z-index:3; width:120px; height:32px; background:var(--neon); opacity:.85; transform:rotate(-2.5deg);}
.about-photo{width:100%; aspect-ratio:16/9; background-color:#0a0a08; background-size:cover; background-position:center 30%;}
.about-body{padding:clamp(40px,4.8vw,64px);}
.about-eyebrow{font-family:var(--ff-mono); font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--neon); margin-bottom:16px;}
.about-name{margin:0 0 10px; font-family:var(--ff-title); font-weight:800; font-size:clamp(48px,5.8vw,76px); line-height:.98; letter-spacing:-.02em; color:#fff;}
.about-role{font-family:var(--ff-mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:30px;}
.about-desc{margin:0 0 36px; max-width:680px; font-family:var(--ff-serif); font-size:clamp(19px,2vw,23px); line-height:1.72; color:rgba(255,255,255,.85); text-wrap:pretty;}
.about-links{display:flex; flex-wrap:wrap; gap:12px;}
.about-links a{display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:13px; letter-spacing:.06em; color:#fff; border:1px solid rgba(255,255,255,.26); padding:11px 20px; border-radius:3px; transition:border-color .18s, color .18s;}
.about-links a:hover{border-color:var(--neon); color:var(--neon);}

/* ---------- FOOTER + STABILO ---------- */
.site-footer{position:fixed; left:0; right:0; bottom:0; z-index:1; width:100%; overflow:visible; background:#0c0c0a; border-top:6px solid var(--neon); padding:84px 6vw 40px; color:#fff;}
.footer-strokes-wrap{position:absolute; top:0; left:0; right:0; transform:translateY(-46%); text-align:center; z-index:10; pointer-events:none; line-height:0;}
.footer-strokes{width:1300px; max-width:88%;}
.footer-strokes path{will-change:clip-path;}
.foot-grid{max-width:1160px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1.4fr 1fr; gap:40px;}
.foot-logo{margin-bottom:26px;}
.foot-logo img{height:40px; width:auto; display:block;}
.foot-tag{font-family:var(--ff-serif); font-style:italic; font-size:22px; line-height:1.4; color:rgba(255,255,255,.85); margin:0;}
.foot-h{font-family:var(--ff-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--neon); margin-bottom:22px;}
.foot-col{display:flex; flex-direction:column; gap:13px; font-family:var(--ff-mono); font-size:13.5px;}
.foot-col a{color:rgba(255,255,255,.82);} .foot-col a:hover{color:#fff;}
.foot-col .soon{color:rgba(255,255,255,.4);}
.foot-col .soon span{font-size:10px; letter-spacing:.14em;}
.foot-plat{display:grid; grid-template-columns:1fr 1fr; gap:13px 24px;}
.foot-bottom{max-width:1160px; margin:64px auto 0; padding-top:26px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:var(--ff-mono); font-size:11.5px; color:rgba(255,255,255,.4);}

/* ---------- BLOG HOME (bibliothèque) ---------- */
.lib-hero{text-align:center; max-width:860px; margin:56px auto 0;}
.lib-eyebrow{font-family:var(--ff-mono); font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--blue); margin-bottom:22px;}
.lib-title{margin:0; font-family:var(--ff-title); font-weight:800; font-size:clamp(58px,8vw,104px); line-height:.98; letter-spacing:-.025em; color:var(--ink);}
.lib-title .hl{display:inline-block; background:var(--neon); line-height:.86; padding:.06em .1em .1em;}
.lib-sub{margin:28px 0 0; font-family:var(--ff-serif); font-style:italic; font-size:clamp(19px,2.2vw,24px); color:rgba(23,22,15,.6); text-wrap:balance;}

.lib-filters{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:52px auto 0;}
.lib-pill{font-family:var(--ff-mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; padding:10px 20px; border-radius:3px; border:none; cursor:pointer; background:rgba(23,22,15,.055); color:rgba(23,22,15,.7); transition:transform .12s ease;}
.lib-pill:hover{transform:translateY(-2px);}
.lib-pill.is-active{background:var(--dark); color:#fff;}

.lib-search{position:relative; max-width:900px; margin:30px auto 0;}
.lib-search-box{display:flex; align-items:center; gap:16px; background:var(--card); border:1px solid rgba(23,22,15,.2); border-radius:4px; padding:20px 28px; box-shadow:7px 9px 0 rgba(23,22,15,.08);}
.lib-search-ico{font-size:20px; color:rgba(23,22,15,.4);}
.lib-search input{flex:1; border:none; outline:none; background:transparent; font-family:var(--ff-serif); font-style:italic; font-size:20px; color:var(--ink);}
.lib-search input::placeholder{color:rgba(23,22,15,.4);}

.lib-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:48px 44px; align-items:start; margin:72px 0 96px;}
.lib-empty{display:none; text-align:center; padding:80px 0; font-family:var(--ff-serif); font-style:italic; font-size:22px; color:rgba(23,22,15,.5); grid-column:1/-1;}
.lib-card{position:relative; background:var(--card); border:1px solid rgba(23,22,15,.1); border-radius:3px; box-shadow:8px 12px 0 rgba(23,22,15,.05); padding:54px 42px 36px; display:flex; flex-direction:column; min-height:400px; text-decoration:none; background-image:repeating-linear-gradient(rgba(23,22,15,.055) 0px, rgba(23,22,15,.055) 1px, transparent 1px, transparent 34px); background-position:0 84px; transition:transform .18s ease, box-shadow .18s ease;}
.lib-card:hover{transform:translateY(-4px); box-shadow:12px 18px 0 rgba(23,22,15,.07);}
.lib-card.is-hidden{display:none;}
.lib-binding{position:absolute; top:-9px; left:34px; right:34px; display:flex; justify-content:space-between;}
.lib-binding span{width:13px; height:19px; border-radius:5px; background:linear-gradient(#dcd9cf,#b3b0a6); box-shadow:0 2px 2px rgba(0,0,0,.14);}
.lib-card-meta{display:flex; align-items:center; gap:16px; margin-bottom:26px;}
.lib-cat{background:var(--dark); color:#fff; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; padding:6px 12px;}
.lib-min{font-family:var(--ff-mono); font-size:12px; letter-spacing:.12em; color:rgba(23,22,15,.42);}
.lib-card h2{font-family:var(--ff-title); font-weight:700; font-size:clamp(27px,2.6vw,35px); line-height:1.14; letter-spacing:-.01em; color:var(--ink); margin:0 0 22px;}
.lib-card p{font-family:var(--ff-serif); font-size:18px; line-height:1.62; color:rgba(23,22,15,.7); margin:0; text-wrap:pretty;}
.lib-read{margin-top:auto; padding-top:40px; display:inline-flex; align-items:center; gap:14px; font-family:var(--ff-title); font-weight:700; font-size:21px; color:var(--ink); transition:gap .18s ease;}
.lib-card:hover .lib-read{gap:20px;}
.lib-read .hl{background:var(--neon); padding:2px 7px;}
.lib-read .arw{color:var(--ink); font-family:var(--ff-mono);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .cta-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .stat-cards{grid-template-columns:1fr;}
  .lib-grid{grid-template-columns:1fr; gap:36px;}
}
@media (max-width:760px){
  .page{padding:28px 5vw 72px;}
  .nav{padding-bottom:52px;}
  .a-head{padding:16px 0 8px;}
  .article, .article-body{font-size:16px;}
  .article p, .article-body p, .article-body ul, .article-body ol{font-size:17px;}
  .rel-grid{grid-template-columns:1fr; gap:26px;}
  .rel{margin-bottom:96px;}
  .cta-wrap{margin-bottom:96px;}
  .cta-card{padding:40px 30px 34px; min-height:0;}
  .intro2, .compare2, .proscons, .persona-grid{grid-template-columns:1fr;}
  /* Footer — sortir du mode fixed reveal sur mobile */
  .site-footer{position:static; padding:64px 6vw 32px;}
  .page{margin-bottom:0 !important;}
  .footer-strokes-wrap{transform:translateY(-42%);}
}
@media (max-width:520px){
  .fig-duo, .survivor-duo{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr; gap:32px;}
  .article p.lead::first-letter, .article-body > p:first-of-type::first-letter{font-size:68px;}
  .toc ol{columns:1;}
  .tool-table{font-size:13px;} .tool-table th,.tool-table td{padding:8px 9px;}
}