/* =====================================================================
   Knowledge Hub — style.css
   Design system : HiFi Lovers v1.0 (Little Yeti Studio)
   Stack : HTML/CSS statique, zéro dépendance, zéro framework.
   Polices : Satoshi (Fontshare, libre) + Archivo (fallback libre du
   Transducer Extended Black). Self-host le Transducer si licence dispo.
   ===================================================================== */

/* ----------------------------- Tokens ----------------------------- */
:root{
  /* Couleurs primaires (littéral) */
  --c-red:#C6121F; --c-black:#0C0C0C; --c-platinum:#E7E9ED; --c-white:#FFFFFF;
  /* Neutres secondaires */
  --c-offwhite:#FFFCF8; --c-sand:#E2D2BF;
  /* Accents secondaires (parcimonie) */
  --c-gold:#FAB62F; --c-indigo:#39359E; --c-sunset:#EA5045; --c-violet:#926FC1;
  /* Rôles sémantiques */
  --bg:var(--c-offwhite); --surface:var(--c-white); --surface-alt:var(--c-sand);
  --text:var(--c-black); --text-muted:#6B6B6B;
  --border:rgba(12,12,12,.12); --border-strong:var(--c-black);
  --accent:var(--c-red); --link:var(--c-black); --link-hover:var(--c-red);
  /* Typo */
  --font-display:"Archivo","Transducer Extended",system-ui,sans-serif;
  --font-body:"Satoshi",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  /* Espacement (base 4px) */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem; --space-24:6rem;
  /* Layout */
  --content-max:1200px; --prose-max:68ch; --radius:2px;
  --shadow-sm:0 1px 2px rgba(12,12,12,.06);
}

/* ----------------------------- Reset ------------------------------ */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-weight:400;
  font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}
::selection{background:var(--c-red); color:var(--c-white);}

/* ---------------------------- Typo -------------------------------- */
h1,h2{
  font-family:var(--font-display); font-weight:900;
  text-transform:uppercase; font-stretch:125%;
  letter-spacing:-.01em; margin:0;
}
h1{font-size:clamp(2.75rem,6vw,5rem); line-height:1.0;}
h2{font-size:clamp(2rem,3.5vw,3rem); line-height:1.05;}
h3{font-family:var(--font-body); font-weight:700; font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.25; letter-spacing:.01em; margin:0;}
h4{font-family:var(--font-body); font-weight:700; font-size:1.0625rem; letter-spacing:.01em; margin:0;}
p{max-width:var(--prose-max);}
strong,b{font-weight:700;}

a{color:var(--link); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; transition:color .15s ease;}
a:hover{color:var(--link-hover);}

.caption{font-size:.8125rem; line-height:1.4; color:var(--text-muted); letter-spacing:.01em;}
.kicker{font-weight:700; font-size:.8125rem; text-transform:uppercase; letter-spacing:.08em; color:var(--c-red); margin:0;}

.rule{border:0; border-top:1px solid var(--border); margin:0;}
.rule--accent{border:0; border-top:3px solid var(--c-red); width:64px; margin:var(--space-4) 0 var(--space-8);}

/* --------------------------- Layout ------------------------------- */
.container{max-width:var(--content-max); margin-inline:auto; padding-inline:var(--space-6);}
.prose{max-width:var(--prose-max);}
section{padding-block:var(--space-16);}
.skip-link{position:absolute; left:-9999px;}
.skip-link:focus{left:var(--space-4); top:var(--space-4); background:var(--c-black); color:#fff; padding:var(--space-2) var(--space-4); z-index:100;}

/* ----------------------------- Nav -------------------------------- */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-4) var(--space-6); border-bottom:1px solid var(--border);
  position:sticky; top:0; background:rgba(255,252,248,.9); backdrop-filter:blur(8px); z-index:10;
}
.nav__wordmark{font-family:var(--font-display); text-transform:uppercase; font-size:1.15rem; font-stretch:125%; letter-spacing:-.01em; text-decoration:none; color:var(--text);}
.nav__wordmark b{font-weight:900;}
.nav__wordmark span{font-weight:600; letter-spacing:.04em; color:var(--text-muted);}
/* Fil d'Ariane : HL Consulting › Knowledge Hub */
.nav__brand{display:flex; align-items:baseline; gap:.45rem; flex-wrap:wrap; min-width:0;}
.nav__crumb-home{font-family:var(--font-display); text-transform:uppercase; font-size:.72rem; font-weight:700; letter-spacing:.08em; color:var(--text-muted); text-decoration:none; white-space:nowrap;}
.nav__crumb-home:hover,.nav__crumb-home:focus-visible{color:var(--c-red);}
.nav__crumb-sep{color:var(--text-muted); font-size:.85rem; line-height:1;}
.nav__links{display:flex; gap:var(--space-6); list-style:none; margin:0; padding:0; align-items:center; flex-wrap:nowrap;}
.nav__links a{text-decoration:none; text-transform:uppercase; font-weight:700; font-size:.8125rem; letter-spacing:.08em;}
.nav__links a:hover{color:var(--c-red);}
.nav__links a[aria-current="page"]{color:var(--c-red);}

/* Actions nav (loupe + burger) */
.nav__actions{display:flex; align-items:center; gap:var(--space-2);}
.nav__icon{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  background:none; border:0; cursor:pointer; color:var(--text); border-radius:var(--radius); padding:0;}
.nav__icon:hover{color:var(--c-red);}
.nav__icon svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.nav__burger{display:none;}  /* visible en mobile seulement */
.nav__search-mobile{display:none;}  /* visible en mobile seulement (dans le header) */
/* Loupe en tête du menu, à gauche de Méthode */
.nav__links .nav__search{display:flex; align-items:center;}
.nav__links .nav__search:first-child{margin-right:calc(var(--space-2) * -1);}
.nav__links .nav__search button{width:34px; height:34px;}
/* Utilitaires en fin de ligne (contraste · langue) : léger détachement des liens, desktop seulement */
@media (min-width:761px){
  .nav__links li:has(.nav__theme){margin-left:var(--space-2); padding-left:var(--space-4); border-left:1px solid var(--border);}
  .nav__links .nav__lang{margin-left:calc(var(--space-1) * -1);}
}

/* Overlay de recherche globale */
.site-search{position:fixed; inset:0; z-index:50; background:rgba(12,12,12,.55); backdrop-filter:blur(4px);
  display:none; align-items:flex-start; justify-content:center; padding:var(--space-16) var(--space-4);}
.site-search[open], .site-search.is-open{display:flex;}
.site-search__panel{width:100%; max-width:640px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 12px 48px rgba(12,12,12,.25); overflow:hidden;}
.site-search__bar{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4); border-bottom:1px solid var(--border);}
.site-search__bar svg{width:20px; height:20px; stroke:var(--text-muted); fill:none; stroke-width:2; flex:none;}
.site-search__bar input{flex:1; border:0; outline:none; font-family:var(--font-body); font-size:1.1rem; color:var(--text); background:none;}
.site-search__bar kbd{font-family:var(--font-mono); font-size:.7rem; color:var(--text-muted); border:1px solid var(--border); border-radius:3px; padding:2px 6px;}
.site-search__results{max-height:60vh; overflow-y:auto; margin:0; padding:0; list-style:none;}
.site-search__results li{border-bottom:1px solid var(--border);}
.site-search__results a{display:block; padding:var(--space-3) var(--space-4); text-decoration:none; color:var(--text);}
.site-search__results a:hover, .site-search__results a.is-active{background:var(--surface-alt);}
.site-search__results .r-kicker{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--c-red);}
.site-search__results .r-title{font-weight:700; margin:2px 0;}
.site-search__results .r-excerpt{font-size:.85rem; color:var(--text-muted); line-height:1.4;}
.site-search__empty{padding:var(--space-6) var(--space-4); color:var(--text-muted); font-size:.9rem;}
.site-search mark{background:var(--c-gold); color:var(--c-black);}

/* ----------------------------- Hero ------------------------------- */
.hero{padding:var(--space-24) 0 var(--space-16);}
.hero .lead{font-size:1.25rem; line-height:1.55; margin-top:var(--space-6); max-width:60ch;}
.hero .meta{margin-top:var(--space-8); display:flex; gap:var(--space-6); flex-wrap:wrap;}
.stat{border-left:3px solid var(--c-red); padding-left:var(--space-3);}
.stat b{font-family:var(--font-display); font-weight:900; font-stretch:125%; font-size:1.5rem; display:block; line-height:1;}
.stat span{font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted);}

/* Hero sombre (variante immersive) */
.hero--dark{background:var(--c-black); color:var(--c-white);}
.hero--dark .lead{color:#E7E9ED;}
.hero--dark .stat span{color:#A8A8A8;}

/* -------------------------- Section head -------------------------- */
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap;}
.section-head a{font-size:.8125rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; text-decoration:none;}

/* ---------------------------- Grilles ----------------------------- */
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-6);}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-12); align-items:center;}

/* ---------------------------- Cards ------------------------------- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--space-6); box-shadow:var(--shadow-sm);
  transition:border-color .15s ease, transform .15s ease;
  display:flex; flex-direction:column; min-height:200px; text-decoration:none; color:var(--text); position:relative;
}
.card:hover{border-color:var(--c-red); transform:translateY(-2px);}
.card__kicker{font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--c-red);}
.card__title{font-weight:700; font-size:1.25rem; line-height:1.25; margin:var(--space-2) 0;}
.card__desc{font-size:.95rem; color:var(--text-muted); line-height:1.5; flex:1;}
.card__foot{margin-top:var(--space-4); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted);}
.card__lock{position:absolute; top:var(--space-4); right:var(--space-4); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); border:1px solid var(--border); padding:2px 7px; border-radius:var(--radius);}

/* --------------------------- Journal ------------------------------ */
.entry-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--border);}
.entry{display:grid; grid-template-columns:120px 1fr auto; gap:var(--space-6); align-items:baseline; padding:var(--space-6) 0; border-bottom:1px solid var(--border); transition:background .15s ease;}
.entry:hover{background:rgba(198,18,31,.03);}
.entry time{font-family:var(--font-mono); font-size:.8125rem; color:var(--text-muted);}
.entry__title{font-weight:700; font-size:1.15rem; line-height:1.3; margin:0 0 var(--space-2);}
.entry__title a{text-decoration:none;}
.entry__title a:hover{color:var(--c-red);}
.entry__excerpt{font-size:.95rem; color:var(--text-muted); margin:0; max-width:62ch;}

/* ------------------------- Tags & auteurs ------------------------- */
.tags{display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3);}
.tag{font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; padding:2px 8px; border:1px solid var(--border); border-radius:var(--radius); color:var(--text-muted); --tag-c:var(--c-black);}
/* couleur de marque/outil portée par --tag-c (révélée au survol) — voir bloc palette plus bas */
.author{justify-self:end; align-self:start;}
.author span{display:inline-block; font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border-radius:var(--radius);}
.author--hl{background:var(--c-black); color:var(--c-white);}
.author--cobra{background:var(--c-indigo); color:var(--c-white);}

/* ------------------- Filtres journal (chips) ---------------------- */
.filter-bar{display:flex; flex-wrap:wrap; gap:var(--space-2); margin:var(--space-6) 0 var(--space-4);}
.chip{font-family:var(--font-body); cursor:pointer; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:var(--space-2) var(--space-3); border:1px solid var(--border); border-radius:var(--radius); background:transparent; color:var(--text-muted); --tag-c:var(--c-black); transition:background .15s ease,color .15s ease,border-color .15s ease;}
.chip:hover{border-color:var(--tag-c); color:var(--tag-c);}
.chip[aria-pressed="true"]{background:var(--tag-c); color:#fff; border-color:var(--tag-c);}
/* couleur du chip = celle de son tag (révélée au survol + actif, une seule à la fois) */
.chip[data-filter="shopify"]{--tag-c:#5E8E3E;}
.chip[data-filter="odoo-dev"], .chip[data-filter="odoo-admin"]{--tag-c:#714B67;}
.chip[data-filter="agent"]{--tag-c:var(--c-violet);}
.chip[data-filter="meta"], .chip[data-filter="strat"]{--tag-c:var(--c-indigo);}
.chip[data-filter="marketing"]{--tag-c:var(--c-violet);}
.chip[data-filter="seo-gtm"]{--tag-c:#1F7A8C;}
.chip[data-filter="data"]{--tag-c:#2D6CDF;}
.chip[data-filter="en-prod"]{--tag-c:#1F7A3D;}
.chip[data-filter="en-cours"]{--tag-c:#9A6A00;}
/* chips verticales : pointillés (comme les pastilles) + couleur de marque */
.chip--vert{border-style:dashed;}
.chip[data-filter="cobra"]{--tag-c:#C6121F;}
.chip[data-filter="haute-fidelite"]{--tag-c:#D17A1F;}
.chip[data-filter="hifi-lovers"]{--tag-c:#EA5045;}
.chip[data-filter="perso"]{--tag-c:var(--c-indigo);}
.chip[data-filter="hf-os"]{--tag-c:#3457A6;}
.filter-count{font-size:.8125rem; color:var(--text-muted); margin-left:auto; align-self:center;}
.entry.is-hidden{display:none;}

/* Champ de recherche journal */
.search-box{position:relative; margin:var(--space-6) 0 var(--space-2);}
.search-box input{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--text);
  padding:var(--space-3) var(--space-4); padding-left:2.6rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  transition:border-color .15s ease;
}
.search-box input:focus{outline:none; border-color:var(--c-red);}
.search-box input::placeholder{color:var(--text-muted);}
.search-box svg{position:absolute; left:var(--space-3); top:50%; transform:translateY(-50%); width:18px; height:18px; stroke:var(--text-muted); pointer-events:none;}
mark{background:var(--c-gold); color:var(--c-black); padding:0 .1em; border-radius:1px;}

/* ------------------- YouTube léger (façade) ----------------------- */
/* Miniature + bouton play ; l'iframe ne charge qu'au clic (perf). */
.lite-yt{position:relative; display:block; aspect-ratio:16/9; border:0; padding:0; width:100%;
  border-radius:var(--radius); overflow:hidden; cursor:pointer; background:#000 center/cover no-repeat;}
.lite-yt::before{content:""; position:absolute; inset:0; background:linear-gradient(transparent 55%, rgba(0,0,0,.45));}
.lite-yt__play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:68px; height:48px; border-radius:12px; background:var(--c-red); display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, transform .15s ease;}
.lite-yt:hover .lite-yt__play{background:var(--c-black); transform:translate(-50%,-50%) scale(1.06);}
.lite-yt__play::after{content:""; border-style:solid; border-width:10px 0 10px 17px; border-color:transparent transparent transparent #fff; margin-left:3px;}
.lite-yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* ------------------- Embeds LinkedIn ------------------------------ */
.embed-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--space-6); align-items:start; justify-items:center;}
.li-embed{width:100%; max-width:504px;}
.li-embed iframe{width:100%; max-width:504px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);}
.li-embed figcaption{margin-top:var(--space-2);}

/* ----- Palette des tags : couleur de marque/outil, révélée au survol ----- */
/* Marques & verticales */
.tag[data-tag="cobra"]{--tag-c:#C6121F;}            /* Cobra — rouge */
.tag[data-tag="hifi-lovers"]{--tag-c:#EA5045;}      /* HiFi Lovers — rouge */
.tag[data-tag="haute-fidelite"]{--tag-c:#D17A1F;}   /* Haute Fidélité — orange */
.tag[data-tag="perso"]{--tag-c:var(--c-indigo);}    /* Perso — indigo */
.tag[data-tag="hf-os"]{--tag-c:#3457A6;}        /* HF-OS — bleu acier */
/* Outils */
.tag[data-tag="shopify"]{--tag-c:#5E8E3E;}          /* Shopify — vert */
.tag[data-tag="odoo-dev"],
.tag[data-tag="odoo-admin"]{--tag-c:#714B67;}       /* Odoo — violet/prune */
.tag[data-tag="github"]{--tag-c:#1F2328;}           /* GitHub — anthracite */
/* IA & écosystème Claude */
.tag[data-tag="ia"],
.tag[data-tag="llm"],
.tag[data-tag="claude"],
.tag[data-tag="claude-code"],
.tag[data-tag="anthropic"],
.tag[data-tag="mcp"],
.tag[data-tag="karpathy"],
.tag[data-tag="compound-engineering"]{--tag-c:var(--c-indigo);}
.tag[data-tag="agent"]{--tag-c:var(--c-violet);}
/* Contenu / méthode */
.tag[data-tag="meta"],
.tag[data-tag="strat"]{--tag-c:var(--c-indigo);}
.tag[data-tag="marketing"],
.tag[data-tag="methode"],
.tag[data-tag="vulgarisation"],
.tag[data-tag="prompt"]{--tag-c:var(--c-violet);}
/* SEO / GEO / data */
.tag[data-tag="seo-gtm"],
.tag[data-tag="seo"],
.tag[data-tag="geo"]{--tag-c:#1F7A8C;}              /* teal */
.tag[data-tag="data"]{--tag-c:#2D6CDF;}             /* bleu */
.tag[data-tag="commerce"]{--tag-c:#B8702A;}         /* ambre */
/* Statut */
.tag[data-tag="en-prod"]{--tag-c:#1F7A3D;}          /* vert */
.tag[data-tag="en-cours"]{--tag-c:#9A6A00;}         /* ambre */
/* Sécurité / données */
.tag[data-tag="securite"],
.tag[data-tag="donnees"]{--tag-c:#5B6470;}          /* ardoise */
.tag[data-tag="cout"]{--tag-c:#2F7A52;}             /* vert sapin */
/* (email, infra, admin, doc, logistique, design : noir par défaut) */

/* Tags cliquables : remplissage complet de leur couleur au survol/focus */
a.tag, button.tag{font-family:var(--font-body); cursor:pointer; background:transparent; text-decoration:none; transition:background-color .15s ease, color .15s ease, border-color .15s ease;}
a.tag:hover, a.tag:focus-visible, button.tag:hover{background:var(--tag-c); border-color:var(--tag-c); color:#FFFCF8;}

/* --------------------------- Callout ------------------------------ */
.callout{background:var(--surface-alt); border-radius:var(--radius); padding:var(--space-8); margin-block:var(--space-8);}
.callout code{font-family:var(--font-mono); font-size:.85em; background:rgba(12,12,12,.06); padding:.1em .4em; border-radius:var(--radius);}

/* ---------------------------- Boutons ----------------------------- */
.btn{display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-6); font-family:var(--font-body); font-weight:700; font-size:.875rem; text-transform:uppercase; letter-spacing:.06em; text-decoration:none; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; transition:background .15s ease,color .15s ease,border-color .15s ease;}
.btn--primary{background:var(--c-black); color:var(--c-white);}
.btn--primary:hover{background:var(--c-red); color:var(--c-white);}
.btn--ghost{background:transparent; color:var(--c-black); border-color:var(--c-black);}
.btn--ghost:hover{background:var(--c-black); color:var(--c-white);}
.btn-row{display:flex; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-8);}

/* ------------------------- Lexique -------------------------------- */
/* Termes du glossaire détectés dans le texte (infobulles) */
.lex-term{border-bottom:1px dotted var(--c-red); cursor:pointer; text-decoration:none; color:inherit;}
.lex-term:hover{color:var(--c-red);}
/* Infobulle / popover */
.lex-pop{position:absolute; z-index:60; max-width:300px; background:var(--c-black); color:#F3F3F3;
  font-family:var(--font-body); font-size:.85rem; line-height:1.5; padding:var(--space-3) var(--space-4);
  border-radius:var(--radius); box-shadow:0 8px 30px rgba(12,12,12,.3); opacity:0; transform:translateY(4px);
  transition:opacity .12s ease, transform .12s ease; pointer-events:none;}
.lex-pop.is-open{opacity:1; transform:translateY(0); pointer-events:auto;}
.lex-pop b{color:#fff;}
.lex-pop a{color:var(--c-gold); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; text-decoration:none; display:inline-block; margin-top:var(--space-2);}
.lex-pop a:hover{text-decoration:underline;}

/* Page Lexique */
.lex-search{position:relative; margin:var(--space-6) 0 var(--space-4); max-width:var(--prose-max);}
.lex-search input{width:100%; font-family:var(--font-body); font-size:1rem; color:var(--text);
  padding:var(--space-3) var(--space-4); padding-left:2.6rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);}
.lex-search input:focus{outline:none; border-color:var(--c-red);}
.lex-search svg{position:absolute; left:var(--space-3); top:50%; transform:translateY(-50%); width:18px; height:18px; stroke:var(--text-muted); fill:none; stroke-width:2; pointer-events:none;}
.lex-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--border);}
.lex-entry{padding:var(--space-6) 0; border-bottom:1px solid var(--border); scroll-margin-top:90px;}
.lex-anchor{display:block; position:relative; top:-90px; height:0; visibility:hidden;}
.lex-entry.is-hidden{display:none;}
.lex-entry h2{font-family:var(--font-body); font-weight:700; font-size:1.25rem; margin:0 0 var(--space-2);}
.lex-entry__def{font-size:1rem; line-height:1.6; max-width:var(--prose-max); margin:0;}
.lex-entry__links{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-6); margin-top:var(--space-3);}
.lex-entry__links .lk{font-size:.75rem; color:var(--text-muted);}
.lex-entry__links .lk b{color:var(--c-red); text-transform:uppercase; letter-spacing:.06em; font-size:.68rem; margin-right:var(--space-2);}
.lex-entry__links .lk a{color:var(--text); text-decoration:none; border-bottom:1px solid var(--border); transition:border-color .15s, color .15s;}
.lex-entry__links .lk a:hover{color:var(--c-red); border-bottom-color:var(--c-red);}
.lex-az{display:flex; flex-wrap:wrap; gap:var(--space-1); margin:var(--space-4) 0;}
.lex-az a{font-family:var(--font-mono); font-size:.8rem; text-decoration:none; color:var(--text-muted); padding:2px 7px; border:1px solid var(--border); border-radius:var(--radius);}
.lex-az a:hover{border-color:var(--c-red); color:var(--c-red);}
.lex-list mark{background:var(--c-gold); color:var(--c-black);}

/* ------------------- Veille IA ------------------------------------ */
.flux-controls{display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; justify-content:space-between; margin:var(--space-2) 0 var(--space-6);}
.flux-controls .search-box{flex:1; min-width:240px; margin:0;}
.tg-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); background:var(--c-black); color:#FFFCF8; border-radius:var(--radius); padding:var(--space-6) var(--space-8); margin-bottom:var(--space-6);}
.tg-cta__title{font-weight:800; font-size:1.25rem; margin:0;}
.tg-cta__sub{color:#C9C9C9; margin:var(--space-1) 0 0; font-size:.95rem;}
.tg-cta__btn{white-space:nowrap;}
.veille-feed{display:flex; flex-direction:column;}

/* Angles de lecture (Tout / Marchands) */
.veille-angles{display:flex; gap:var(--space-2); margin:0 0 var(--space-4);}
.angle{font-family:var(--font-body); cursor:pointer; font-size:.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:var(--space-2) var(--space-4); border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--text-muted); transition:background .15s,color .15s,border-color .15s;}
.angle:hover{border-color:var(--text);}
.angle.is-active{background:var(--c-black); color:#FFFCF8; border-color:var(--c-black);}
.angle--biz.is-active{background:#5E8E3E; border-color:#5E8E3E;}

/* En-tête de jour : date forte + compteur */
.veille-dayblock{margin-top:var(--space-8);}
.veille-day{display:flex; align-items:baseline; gap:var(--space-3); margin:0 0 var(--space-4); padding-bottom:var(--space-2); border-bottom:2px solid var(--text);}
.veille-day time{display:flex; align-items:baseline; gap:var(--space-2);}
.veille-day__dow{font-family:var(--font-body); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted);}
.veille-day__d{font-family:var(--font-display); font-weight:900; font-stretch:125%; text-transform:uppercase; font-size:1.5rem; letter-spacing:-.01em; color:var(--text);}
.veille-day__y{font-family:var(--font-mono); font-size:.8rem; color:var(--text-muted);}
.veille-day__count{margin-left:auto; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted);}

.veille-item{position:relative; padding:var(--space-4) 0 var(--space-5); border-bottom:1px solid var(--border);}
.veille-flag{display:inline-block; font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#5E8E3E; border:1px solid #5E8E3E; border-radius:999px; padding:1px 8px; margin-bottom:var(--space-2);}
.veille-title{font-size:1.15rem; font-weight:700; margin:0 0 var(--space-2);}
.veille-resume{color:var(--text); margin:0 0 var(--space-3); line-height:1.6; max-width:var(--prose-max);}
.veille-meta{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-6); align-items:center; justify-content:space-between;}
.veille-tags{margin-top:0;}
.tag--biz{--tag-c:#5E8E3E;}
.veille-more{margin-top:var(--space-4); font-family:var(--font-body); cursor:pointer; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text); background:transparent; border:1px dashed var(--border); border-radius:var(--radius); padding:var(--space-2) var(--space-4); transition:border-color .15s,color .15s;}
.veille-more:hover{border-color:var(--c-red); color:var(--c-red);}
.veille-foot{display:flex; gap:var(--space-4); align-items:center; font-size:.85rem; color:var(--text-muted); margin-left:auto;}
.veille-auteur{font-family:var(--font-mono); font-size:.8rem;}
.veille-src{font-weight:600; color:var(--c-red); text-decoration:none; white-space:nowrap;}
.veille-src:hover{text-decoration:underline;}
.veille-embed{margin:var(--space-3) 0; max-width:520px;}
.veille-embed .twitter-tweet{margin:0 !important;}
.veille-card{display:inline-flex; align-items:center; gap:var(--space-3); padding:var(--space-4); border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); text-decoration:none; color:var(--text); max-width:520px; transition:border-color .15s ease;}
.veille-card:hover{border-color:var(--c-black);}
.veille-card__x{font-size:1.3rem; font-weight:700; line-height:1;}
.veille-card__txt{display:flex; flex-direction:column; font-size:.9rem;}
.veille-card__cta{color:var(--c-red); font-weight:600; font-size:.85rem;}
mark{background:var(--c-gold); color:var(--c-black);}
@media (max-width:640px){ .tg-cta{flex-direction:column; align-items:flex-start;} .veille-foot{margin-left:0;} }

/* ----------------------- Liens externes --------------------------- */.linklist{list-style:none; margin:var(--space-6) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-2);}
.linklist a{
  display:inline-flex; align-items:center; gap:var(--space-2);
  text-decoration:none; font-weight:700; font-size:.8125rem;
  text-transform:uppercase; letter-spacing:.06em;
  padding:var(--space-2) var(--space-3); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); transition:border-color .15s ease, color .15s ease;
}
.linklist a:hover{border-color:var(--c-red); color:var(--c-red);}
.linklist a[data-primary]{background:var(--c-black); color:var(--c-white); border-color:var(--c-black);}
.linklist a[data-primary]:hover{background:var(--c-red); border-color:var(--c-red); color:#fff;}

/* ---------------------- Figures / photos -------------------------- *//* Emplacements photo : ratio réservé pour éviter le CLS (perf SEO). */
.figure{margin:0;}
.figure img{width:100%; height:100%; object-fit:cover; border-radius:var(--radius);}
.figure figcaption{margin-top:var(--space-2);}
.ph{                     /* placeholder visuel en attendant la vraie image */
  background:repeating-linear-gradient(45deg,var(--c-platinum),var(--c-platinum) 12px,#dde0e6 12px,#dde0e6 24px);
  border:1px solid var(--border); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
}
.ph--portrait{aspect-ratio:4/5;}
.ph--landscape{aspect-ratio:16/9;}
.ph--square{aspect-ratio:1/1;}

/* ----------------------- Long-form (how-to) ----------------------- */
.article{padding-block:var(--space-16);}
.article .prose > * + *{margin-top:var(--space-6);}
.article h2{margin-top:var(--space-16); font-size:clamp(1.6rem,3vw,2.4rem);}
.article h3{margin-top:var(--space-8); color:var(--c-black);}
.article ol,.article ul{max-width:var(--prose-max); padding-left:1.25rem;}
.article li{margin-top:var(--space-2);}
.meta-bar{display:flex; gap:var(--space-4); flex-wrap:wrap; align-items:center; color:var(--text-muted); font-size:.8125rem; margin-top:var(--space-6);}
.meta-bar time{font-family:var(--font-mono);}

/* Bloc prompt copiable */
.promptbox{background:var(--c-black); color:#F3F3F3; border-radius:var(--radius); padding:var(--space-6); font-family:var(--font-mono); font-size:.85rem; line-height:1.6; overflow-x:auto; max-width:100%;}
.promptbox .lbl{display:block; color:var(--c-gold); font-weight:500; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; margin-bottom:var(--space-3);}

/* TOC ancré */
.toc{border-left:3px solid var(--c-red); padding-left:var(--space-4); margin:var(--space-8) 0;}
.toc ul{list-style:none; margin:0; padding:0;}
.toc li{margin-top:var(--space-1);}
.toc a{text-decoration:none; font-size:.95rem;}

/* --------------------- Bandeau consulting ------------------------- */
.cta-band{background:var(--c-black); color:var(--c-white); border-radius:var(--radius); padding:var(--space-16); text-align:center;}
.cta-band h2{color:var(--c-white);}
.cta-band p{color:#E7E9ED; margin-inline:auto; margin-top:var(--space-4);}
.cta-band .btn--ghost{color:#fff; border-color:#fff;}
.cta-band .btn--ghost:hover{background:#fff; color:var(--c-black);}

/* ---------------------------- Footer ------------------------------ */
.footer{border-top:1px solid var(--border); margin-top:var(--space-24); padding-block:var(--space-16);}
.footer__grid{display:flex; justify-content:space-between; gap:var(--space-8); flex-wrap:wrap; align-items:flex-end;}
.footer__kata{font-size:1.1rem; color:var(--text-muted); letter-spacing:.1em;}

/* ====================================================================
   GUIDES — section evergreen (gabarit de la série) + visuels codés
   ==================================================================== */

/* Cartes de la liste Guides (réutilise l'esprit .card) */
.guide-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--space-6); margin-top:var(--space-8);}
.guide-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--space-6); box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  min-height:190px; text-decoration:none; color:var(--text); position:relative;
  transition:border-color .15s ease, transform .15s ease;
}
.guide-card[href]:hover{border-color:var(--c-red); transform:translateY(-2px);}
.guide-card__num{font-family:var(--font-mono); font-size:.75rem; color:var(--text-muted); letter-spacing:.04em;}
.guide-card__title{font-weight:700; font-size:1.25rem; line-height:1.3; margin:var(--space-2) 0;}
.guide-card__desc{font-size:.95rem; color:var(--text-muted); line-height:1.5; flex:1;}
.guide-card__foot{margin-top:var(--space-4); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--c-red);}
/* État « bientôt » (stub roadmap) */
.guide-card--soon{opacity:.66; cursor:default;}
.guide-card--soon .guide-card__foot{color:var(--text-muted);}
.guide-card__badge{position:absolute; top:var(--space-4); right:var(--space-4); font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); border:1px solid var(--border); border-radius:999px; padding:2px 9px;}

/* Pastilles « niveaux de lecture » */
.levels{display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-6); list-style:none; padding:0;}
.level-pill{display:inline-flex; align-items:center; gap:var(--space-2); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); border:1px solid var(--border); border-radius:999px; padding:var(--space-2) var(--space-3);}
.level-pill b{color:var(--c-red); font-family:var(--font-mono); font-weight:500;}

/* Encart « En 30 secondes » : callout accentué */
.callout--tldr{border-left:3px solid var(--c-red); background:var(--surface-alt);}
.callout--tldr ul{margin:var(--space-3) 0 0; padding-left:1.1rem;}
.callout--tldr li{margin-top:var(--space-2);}

/* Bloc Veille IA (home) — distinct du callout « Nouveau » : fond surface, accent or, point « live » */
.veille-home{background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--c-gold);}
.veille-home .kicker{color:var(--c-gold); display:flex; align-items:center; gap:var(--space-2);}
.veille-home .kicker::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--c-gold); animation:veille-pulse 2s ease-out infinite;}
@keyframes veille-pulse{0%{box-shadow:0 0 0 0 rgba(250,182,47,.55);}70%{box-shadow:0 0 0 6px rgba(250,182,47,0);}100%{box-shadow:0 0 0 0 rgba(250,182,47,0);}}
@media (prefers-reduced-motion:reduce){.veille-home .kicker::before{animation:none;}}

/* Figure de schéma (visuels codés) : pleine largeur prose, légende */
.diagram{max-width:var(--prose-max); margin:var(--space-12) 0;}
.diagram > figcaption{margin-top:var(--space-3);}

/* ---- Visuel 1 : poupées russes IA ⊃ ML ⊃ DL ⊃ LLM ---- */
.nesting{max-width:560px; margin-inline:auto;}
.nesting__l{border:2px solid; border-radius:26px; padding:var(--space-5) var(--space-5) var(--space-6); text-align:center;}
.nesting__l + .nesting__l, .nesting__l > .nesting__l{margin-top:var(--space-4);}
.nesting__tag{display:block; font-family:var(--font-display); font-weight:900; font-stretch:125%; text-transform:uppercase; letter-spacing:-.01em; line-height:1; margin-bottom:var(--space-3);}
.nesting__l--ia{border-color:var(--c-red);}            .nesting__l--ia  > .nesting__tag{color:var(--c-red); font-size:1.5rem;}
.nesting__l--ml{border-color:var(--c-gold);}           .nesting__l--ml  > .nesting__tag{color:#9a6a00; font-size:1.25rem;}
.nesting__l--dl{border-color:var(--c-violet);}         .nesting__l--dl  > .nesting__tag{color:var(--c-violet); font-size:1.1rem;}
.nesting__l--llm{border-color:var(--c-black); background:var(--c-black);} .nesting__l--llm > .nesting__tag{color:#fff; font-size:1rem; margin-bottom:0;}
.nesting-legend{margin:var(--space-6) 0 0; padding:0; list-style:none; max-width:var(--prose-max);}
.nesting-legend li{display:grid; grid-template-columns:150px 1fr; gap:var(--space-1) var(--space-4); align-items:baseline; padding:var(--space-2) 0; border-top:1px solid var(--border); font-size:.9rem;}
.nesting-legend b{font-family:var(--font-display); font-weight:900; font-stretch:125%; text-transform:uppercase; font-size:.85rem; letter-spacing:.02em; min-width:0; overflow-wrap:normal; word-break:keep-all; hyphens:none;}
@media (max-width:520px){ .nesting-legend li{grid-template-columns:1fr;} }
.nesting-legend span{color:var(--text-muted);}

/* ---- Visuel 2 : prédiction token par token ---- */
.token-predict{background:var(--c-black); color:#F3F3F3; border-radius:var(--radius); padding:var(--space-8);}
.token-predict__phrase{font-family:var(--font-mono); font-size:1.05rem; line-height:1.6; color:#fff; max-width:none; margin:0;}
.token-predict__phrase .tp-done{color:#fff;}
.token-predict__cursor{display:inline-block; width:.6ch; background:var(--c-gold); color:var(--c-gold); border-radius:1px; animation:tp-blink 1.1s steps(1) infinite; margin-left:2px;}
@keyframes tp-blink{50%{opacity:.15;}}
.token-predict__hint{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--c-gold); margin:var(--space-6) 0 var(--space-3); font-weight:700;}
.token-predict__cands{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2);}
.token-predict__cands li{display:grid; grid-template-columns:minmax(0,1fr) 110px 48px; gap:var(--space-3); align-items:center;}
.tp-word{font-family:var(--font-mono); font-size:.9rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tp-bar{height:8px; background:rgba(255,255,255,.14); border-radius:999px; overflow:hidden;}
.tp-bar i{display:block; height:100%; background:var(--c-gold); border-radius:999px;}
.token-predict__cands li:first-child .tp-bar i{background:var(--c-red);}
.tp-pct{font-family:var(--font-mono); font-size:.8rem; color:#cfcfcf; text-align:right;}

/* ---- Visuel 3 : bandeau d'acteurs (logos recodés) ---- */
.actor-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--space-6);}
.actor{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:var(--space-8) var(--space-6); display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-2); transition:border-color .15s ease, transform .15s ease; box-shadow:var(--shadow-sm);}
.actor:hover{border-color:var(--c-red); transform:translateY(-2px);}
.actor__mark{width:46px; height:46px; margin-bottom:var(--space-3);}
.actor__mark svg{width:100%; height:100%; display:block;}
.actor__name{font-weight:700; font-size:1rem;}
.actor__prod{font-size:.8rem; color:var(--text-muted);}
.actor__spec{font-size:.78rem; color:var(--text-muted); line-height:1.45; margin-top:var(--space-3);}
.actor__meta{margin-top:var(--space-4); display:flex; align-items:center; gap:var(--space-2); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);}
.actor__flag{font-size:1rem; line-height:1;}
.actor__badge{font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; border-radius:999px; padding:3px 9px; border:1px solid;}
.actor__badge--open{color:#1f7a3d; border-color:#1f7a3d;}
.actor__badge--closed{color:var(--text-muted); border-color:var(--border);}

/* ---- Triptyque gabarits (Opus/Sonnet/Haiku) : icône dans .card ---- */
.tier-ico{width:38px; height:38px; margin-bottom:var(--space-3); color:var(--c-red);}
.tier-ico svg{width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

/* ---- Hub « tout tourne sur Claude » (nœud central + tuiles) ---- */
.hub{max-width:var(--prose-max); margin-inline:auto; text-align:center;}
.hub__core{display:inline-flex; align-items:center; gap:var(--space-2); background:var(--c-black); color:#fff; font-family:var(--font-display); font-weight:900; font-stretch:125%; text-transform:uppercase; letter-spacing:-.01em; font-size:1.4rem; padding:var(--space-3) var(--space-6); border-radius:999px;}
.hub__link{width:2px; height:28px; background:var(--border); margin:var(--space-1) auto 0;}
.hub__nodes{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--space-4); margin-top:var(--space-6);}
.hub__node{border:1px solid var(--border); border-top:3px solid var(--c-red); border-radius:var(--radius); background:var(--surface); padding:var(--space-5) var(--space-4); box-shadow:var(--shadow-sm);}
.hub__node b{display:block; font-size:.95rem;}
.hub__node span{font-size:.8rem; color:var(--text-muted); line-height:1.4; display:block; margin-top:var(--space-1);}

/* ---- Frise « technologies à usage général » ---- */
.timeline{list-style:none; margin:var(--space-8) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr);}
.timeline li{position:relative; padding:var(--space-8) var(--space-2) 0; text-align:center;}
.timeline li::before{content:""; position:absolute; top:9px; left:0; right:0; height:2px; background:var(--border);}
.timeline li:first-child::before{left:50%;}
.timeline li:last-child::before{right:50%;}
.timeline li::after{content:""; position:absolute; top:3px; left:50%; transform:translateX(-50%); width:14px; height:14px; border-radius:50%; background:var(--bg); border:2px solid var(--text-muted);}
.timeline b{display:block; font-size:.9rem; line-height:1.2;}
.timeline span{font-size:.72rem; color:var(--text-muted);}
.timeline li.is-now::after{background:var(--c-red); border-color:var(--c-red); width:18px; height:18px; top:1px;}
.timeline li.is-now b{color:var(--c-red);}

/* ---- Comparaison avant / après ---- */
.compare{display:grid; grid-template-columns:1fr auto 1fr; gap:var(--space-4); align-items:stretch; margin-top:var(--space-8);}
.compare__side{border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-6); background:var(--surface);}
.compare__side--after{border-color:var(--c-red);}
.compare__tag{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted);}
.compare__side--after .compare__tag{color:var(--c-red);}
.compare__side h4{margin:var(--space-2) 0 var(--space-3);}
.compare__side ul{margin:0; padding-left:1.1rem; font-size:.9rem; color:var(--text-muted);}
.compare__side li{margin-top:var(--space-2);}
.compare__arrow{display:flex; align-items:center; justify-content:center; color:var(--c-red); font-size:1.6rem; font-weight:900;}

/* ---- Modes Chat / Cowork / Code (triptyque coloré) ---- */
.modes{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:var(--space-8);}
.mode{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); overflow:hidden; display:flex; flex-direction:column;}
.mode__head{padding:var(--space-4); color:#fff;}
.mode__head b{font-family:var(--font-display); font-weight:900; font-stretch:125%; text-transform:uppercase; font-size:1.15rem; letter-spacing:-.01em;}
.mode__head span{display:block; font-size:.75rem; opacity:.85; margin-top:2px;}
.mode--chat   .mode__head{background:var(--c-indigo);}
.mode--cowork .mode__head{background:var(--c-violet);}
.mode--code   .mode__head{background:var(--c-red);}
.mode dl{margin:0; padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3);}
.mode dt{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:700;}
.mode dd{margin:2px 0 0; font-size:.9rem; line-height:1.45;}

/* ---- Fenêtre terminal stylisée ---- */
.terminalbox{background:#0C0C0C; border:1px solid #2a2a2a; border-radius:8px; overflow:hidden; max-width:var(--prose-max);}
.terminalbox__bar{display:flex; align-items:center; gap:6px; padding:var(--space-3) var(--space-4); background:#1c1c1c;}
.terminalbox__bar i{width:11px; height:11px; border-radius:50%; display:block;}
.terminalbox__bar i:nth-child(1){background:#ff5f56;}
.terminalbox__bar i:nth-child(2){background:#ffbd2e;}
.terminalbox__bar i:nth-child(3){background:#27c93f;}
.terminalbox__title{margin-left:var(--space-2); font-family:var(--font-mono); font-size:.72rem; color:#888;}
.terminalbox__body{padding:var(--space-5); font-family:var(--font-mono); font-size:.85rem; color:#eee; line-height:1.8; white-space:nowrap; overflow-x:auto;}
.terminalbox__body .tb-prompt{color:#27c93f; user-select:none;}
.terminalbox__body .tb-cursor{display:inline-block; width:9px; height:1.05em; background:#eee; vertical-align:-2px; margin-left:3px; animation:tp-blink 1.1s steps(1) infinite;}

/* ---- Bloc de commande copier-coller ---- */
.codeblock{background:var(--c-black); color:#F3F3F3; border-radius:var(--radius); padding:var(--space-4) var(--space-5); font-family:var(--font-mono); font-size:.85rem; line-height:1.7; overflow-x:auto; margin:var(--space-3) 0 0;}
.codeblock .cb-c{color:#8a8a8a;}

/* ---- Flow « ton ordi ↔ serveurs Anthropic » ---- */
.flow{display:grid; grid-template-columns:1fr auto 1fr; gap:var(--space-4); align-items:center; margin-top:var(--space-8); text-align:center;}
.flow__node{border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-8) var(--space-6); background:var(--surface); box-shadow:var(--shadow-sm);}
.flow__node--server{border-color:var(--c-black);}
.flow__ico{width:38px; height:38px; margin:0 auto var(--space-3); color:var(--text);}
.flow__ico svg{width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.flow__node b{display:block; font-size:.95rem;}
.flow__node span{font-size:.78rem; color:var(--text-muted); line-height:1.4; display:block; margin-top:var(--space-1);}
.flow__link{font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); line-height:1.3;}
.flow__link::before{content:"⇄"; display:block; font-size:1.5rem; color:var(--c-red);}
.flow-badge{display:inline-block; margin-top:var(--space-6); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#1f7a3d; border:1px solid #1f7a3d; border-radius:999px; padding:3px 11px;}

/* -------------------------- Responsive ---------------------------- */
@media (max-width:820px){
  .two-col{grid-template-columns:1fr; gap:var(--space-8);}
}
@media (max-width:680px){
  .modes{grid-template-columns:1fr;}
  .compare{grid-template-columns:1fr;}
  .compare__arrow{transform:rotate(90deg); padding:var(--space-1) 0;}
  .flow{grid-template-columns:1fr;}
  .flow__link::before{content:"⇅";}
  .timeline{grid-template-columns:repeat(2,1fr); gap:var(--space-4) 0;}
  .timeline li::before, .timeline li:first-child::before, .timeline li:last-child::before{display:none;}
}
@media (max-width:520px){
  .token-predict{padding:var(--space-6);}
  .token-predict__cands li{grid-template-columns:minmax(0,1fr) 70px 42px;}
}
@media (max-width:760px){
  /* Header au-dessus du menu pour pouvoir refermer */
  .nav{position:sticky; top:0; z-index:50;}
  .nav__burger{display:inline-flex;}
  .nav__search-mobile{display:inline-flex;}   /* loupe visible dans le header mobile */
  .nav__links .nav__search{display:none;}     /* la loupe du menu est masquée en mobile (doublon) */
  /* Menu déroulant sous le header (pas plein écran translateX, plus robuste) */
  .nav__links{
    position:fixed; inset:64px 0 auto 0; z-index:40;
    flex-direction:column; align-items:flex-start;
    gap:var(--space-5); padding:var(--space-8);
    background:var(--bg); border-bottom:1px solid var(--border);
    max-height:calc(100dvh - 64px); overflow-y:auto;
    transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .nav[data-open="true"] .nav__links{transform:translateY(0); opacity:1; pointer-events:auto;}
  .nav__links a{font-family:var(--font-display); font-stretch:125%; letter-spacing:-.01em; font-size:1.4rem;}
  /* la loupe reste en ligne en tête de menu */
  .nav__links .nav__search{margin:0 0 var(--space-2);}
  .nav__links .nav__search button{width:40px; height:40px;}
}
@media (max-width:720px){
  .entry{grid-template-columns:1fr; gap:var(--space-2);}
  .author{justify-self:start;}
  section{padding-block:var(--space-12);}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}

/* ====================================================================
   DARK MODE — anthracite chaud (cohérent avec l'offwhite du light)
   Activé via [data-theme="dark"] sur <html> (toggle Auto/Clair/Sombre).
   ==================================================================== */
[data-theme="dark"]{
  --bg:#1A1813;            /* anthracite chaud, pas noir pur */
  --surface:#221F18;       /* panneau */
  --surface-alt:#2C2820;   /* panneau accentué (callouts) */
  --text:#FFFCF8;          /* offwhite chaud, pas blanc pur */
  --text-muted:#A89F92;
  --border:rgba(255,252,248,.14);
  --border-strong:#FFFCF8;
  --link:#FFFCF8;
  --link-hover:#F2453F;
  --c-red:#F2453F;         /* accent éclairci pour le contraste sur sombre */
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
}
[data-theme="dark"] .nav{background:rgba(26,24,19,.9);}
[data-theme="dark"] ::selection{background:var(--c-red); color:#1A1813;}

/* Boutons : conserver la prominence en inversant proprement */
[data-theme="dark"] .btn--primary{background:var(--text); color:#1A1813;}
[data-theme="dark"] .btn--primary:hover{background:var(--c-red); color:#fff;}
[data-theme="dark"] .btn--ghost{color:var(--text); border-color:var(--border-strong);}
[data-theme="dark"] .btn--ghost:hover{background:var(--text); color:#1A1813;}

/* Badge auteur HL (noir sur clair) -> noir profond bordé sur sombre */
[data-theme="dark"] .author--hl{background:#000; color:var(--text);}

/* Blocs déjà sombres : légère séparation pour ne pas se fondre dans le fond */
[data-theme="dark"] .promptbox,
[data-theme="dark"] .codeblock,
[data-theme="dark"] .token-predict,
[data-theme="dark"] .terminalbox,
[data-theme="dark"] .cta-band,
[data-theme="dark"] .tg-cta,
[data-theme="dark"] .hub__core,
[data-theme="dark"] .veille-card:hover{border:1px solid rgba(255,252,248,.14);}

/* Placeholder image : trame sombre */
[data-theme="dark"] .ph{background:repeating-linear-gradient(45deg,#2a2620,#2a2620 12px,#231f1a 12px,#231f1a 24px);}
/* Visuels décoratifs en noir pur : bordure subtile pour les détacher du fond sombre */
[data-theme="dark"] .nesting__l--llm,
[data-theme="dark"] .loop__step--goal,
[data-theme="dark"] .matrix__item{border:1px solid rgba(255,252,248,.18);}
[data-theme="dark"] .matrix__item--star{border-color:var(--c-red);}
[data-theme="dark"] .nesting__l--ml > .nesting__tag{color:var(--c-gold);}

/* Bouton thème (header) — icône selon l'état */
.nav__theme .ti-sun,.nav__theme .ti-moon,.nav__theme .ti-auto{display:none;}
.nav__theme[data-state="light"] .ti-sun{display:block;}
.nav__theme[data-state="dark"] .ti-moon{display:block;}
.nav__theme[data-state="auto"] .ti-auto{display:block;}
/* version desktop (dans le menu, à droite de la loupe) vs mobile (header) */
.nav__theme-mobile{display:none;}
@media (max-width:760px){ .nav__theme-mobile{display:inline-flex;} }

/* Toast nom du mode au clic — centré, juste sous la barre de nav */
.theme-toast{position:fixed; left:50%; top:72px; transform:translateX(-50%) translateY(-8px);
  background:var(--c-black); color:#FFFCF8; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:var(--space-2) var(--space-4); border-radius:999px; box-shadow:0 8px 30px rgba(0,0,0,.3);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:80;}
.theme-toast.is-show{opacity:1; transform:translateX(-50%) translateY(0);}
[data-theme="dark"] .theme-toast{background:var(--text); color:#1A1813;}

/* ====================================================================
   GUIDES — composants visuels (batch evergreen #5+)
   ==================================================================== */

/* ---- Pipeline horizontal (X → Y → Z), flèche « auto » ---- */
.pipeline{display:flex; align-items:stretch; flex-wrap:wrap; margin-top:var(--space-8);}
.pipeline__step{flex:1 1 0; min-width:110px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:var(--space-5) var(--space-4); text-align:center; box-shadow:var(--shadow-sm);}
.pipeline__step b{display:block; font-size:.92rem;}
.pipeline__step span{font-size:.76rem; color:var(--text-muted);}
.pipeline__step--live{border-color:var(--c-red); border-width:2px;}
.pipeline__arrow{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 var(--space-2); flex:none;}
.pipeline__arrow b{color:var(--c-red); font-size:1.3rem; line-height:1;}
.pipeline__arrow span{font-size:.58rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-top:2px;}

/* ---- Historique de versions (« revenir ici ») ---- */
.commits{list-style:none; margin:var(--space-8) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-3);}
.commits li{flex:1 1 130px; border:1px solid var(--border); border-left:3px solid var(--text-muted); border-radius:var(--radius); background:var(--surface); padding:var(--space-3) var(--space-4); position:relative;}
.commits time{font-family:var(--font-mono); font-size:.7rem; color:var(--text-muted); display:block;}
.commits b{font-size:.88rem;}
.commits li.is-restore{border-left-color:var(--c-red);}
.commits .c-back{display:inline-block; margin-top:var(--space-2); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--c-red); border:1px solid var(--c-red); border-radius:999px; padding:1px 8px;}

/* ---- Marches ascendantes (effort → / puissance ↑ ; intérêts composés) ---- */
.stairs{display:flex; align-items:flex-end; gap:var(--space-3); margin-top:var(--space-8); min-height:220px;}
.stairs__step{flex:1; background:var(--surface); border:1px solid var(--border); border-bottom:3px solid var(--c-red); border-radius:var(--radius); padding:var(--space-3); display:flex; flex-direction:column; justify-content:flex-end; gap:2px;}
.stairs__step:nth-child(1){height:42%;}
.stairs__step:nth-child(2){height:60%;}
.stairs__step:nth-child(3){height:80%;}
.stairs__step:nth-child(4){height:100%;}
.stairs__step b{font-size:.88rem; line-height:1.2;}
.stairs__step span{font-size:.72rem; color:var(--text-muted);}
.stairs__axes{display:flex; justify-content:space-between; margin-top:var(--space-2); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted);}

/* ---- Boucle d'agent / spirale (étapes en cycle) ---- */
.loop{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-2); margin-top:var(--space-8);}
.loop__step{border:1px solid var(--border); border-radius:999px; background:var(--surface); padding:var(--space-2) var(--space-4); font-weight:700; font-size:.85rem;}
.loop__step--goal{background:var(--c-black); color:#fff; border-color:var(--c-black);}
.loop__step--done{border-color:var(--c-red); color:var(--c-red);}
.loop__arrow{color:var(--c-red); font-weight:900;}
.loop__again{flex-basis:100%; text-align:center; font-size:.74rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-top:var(--space-2);}
.loop__again::before{content:"↺ "; color:var(--c-red); font-weight:900;}

/* ---- Pile de blocs (anatomie CLAUDE.md) ---- */
.stack{max-width:var(--prose-max); margin:var(--space-8) 0 0;}
.stack__block{border:1px solid var(--border); border-left:4px solid var(--c-red); border-radius:var(--radius); background:var(--surface); padding:var(--space-4) var(--space-5); margin-top:var(--space-3);}
.stack__block:nth-child(1){border-left-color:var(--c-indigo);}
.stack__block:nth-child(2){border-left-color:var(--c-gold);}
.stack__block:nth-child(3){border-left-color:var(--c-violet);}
.stack__block:nth-child(4){border-left-color:var(--c-red);}
.stack__block b{display:block;}
.stack__block span{font-size:.85rem; color:var(--text-muted);}

/* ---- Matrice effort / impact ---- */
.matrix{position:relative; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); aspect-ratio:1/1; max-width:440px; margin:var(--space-8) auto var(--space-2);}
.matrix::before{content:""; position:absolute; left:50%; top:6%; bottom:6%; border-left:1px dashed var(--border);}
.matrix::after{content:""; position:absolute; top:50%; left:6%; right:6%; border-top:1px dashed var(--border);}
.matrix__item{position:absolute; transform:translate(-50%,-50%); background:var(--c-black); color:#fff; font-size:.7rem; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap;}
.matrix__item--star{background:var(--c-red);}
.matrix__axis{position:absolute; font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted);}
.matrix__axis--x{bottom:6px; right:10px;}
.matrix__axis--y{top:6px; left:10px;}

@media (max-width:680px){
  .pipeline{flex-direction:column;}
  .pipeline__arrow{flex-direction:row; padding:var(--space-2) 0;}
  .pipeline__arrow b{transform:rotate(90deg);}
  .stairs{min-height:auto; flex-direction:column; align-items:stretch;}
  .stairs__step{height:auto !important; border-bottom:1px solid var(--border); border-left:3px solid var(--c-red);}
  .matrix__item{font-size:.6rem; padding:2px 6px;}
}

/* ===== Sélecteur de langue (bilingue FR/EN) ===== */
.nav__lang a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2rem; height:1.75rem; padding:0 .5rem;
  font-family:var(--mono, "IBM Plex Mono", monospace);
  font-size:.75rem; font-weight:500; letter-spacing:.06em;
  color:var(--text-muted); text-decoration:none;
  border:1px solid var(--border); border-radius:var(--radius);
  transition:color .15s, border-color .15s, background .15s;
}
.nav__lang a:hover,
.nav__lang a:focus-visible{
  color:var(--c-black); border-color:var(--text); background:var(--c-platinum, #E7E9ED);
}
[data-theme="dark"] .nav__lang a:hover,
[data-theme="dark"] .nav__lang a:focus-visible{ color:var(--text); background:transparent; }


/* ===== Visuels dossier (HF-OS) ===== */
.kpi{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-4); margin:var(--space-8) 0; list-style:none; padding:0;}
.kpi li{border:1px solid var(--border); border-top:3px solid var(--c-red); border-radius:var(--radius); background:var(--surface); padding:var(--space-4);}
.kpi b{display:block; font-family:var(--font-display); font-weight:900; font-stretch:125%; font-size:1.9rem; line-height:1; letter-spacing:-.01em;}
.kpi span{display:block; margin-top:var(--space-2); font-size:.8rem; color:var(--text-muted); line-height:1.35;}
.prbars{margin:var(--space-8) 0; max-width:var(--prose-max);}
.prbars__row{display:grid; grid-template-columns:64px 1fr 44px; align-items:center; gap:var(--space-3); margin-top:var(--space-2);}
.prbars__day{font-family:var(--font-mono); font-size:.8rem; color:var(--text-muted);}
.prbars__track{background:var(--surface-alt); border-radius:999px; overflow:hidden; height:16px;}
.prbars__fill{height:100%; background:var(--c-red); border-radius:999px;}
.prbars__row--peak .prbars__fill{background:#3457A6;}
.prbars__n{font-family:var(--font-mono); font-size:.8rem; text-align:right;}
.timeline--wide{grid-template-columns:repeat(5,1fr);}
@media (max-width:680px){ .timeline--wide{grid-template-columns:repeat(2,1fr); gap:var(--space-4) 0;} }