/* ==========================================================================
   TechAna — feuille de style du thème
   ÉCRITE EN MOBILE FIRST : les règles de base décrivent le téléphone ; les
   paliers min-width (481 / 721 / 1024 / 1121 / 1181px) ajoutent la tablette
   puis le bureau. Aucune règle max-width, aucune dégradation.

   Source unique de vérité, enfilée par les gabarits via wp_enqueue_style().
   Ne contient pas les classes .is-hover / .is-focus / .is-active ni le bloc
   .lib de composants.html : ces règles ne servent qu'à figer les états dans
   la bibliothèque et n'ont aucun usage en production.
   ========================================================================== */

/* ─── tokens ───────────────────────────────────────────────────────────── */
:root{
  --paper:   oklch(0.99 0.001 250);
  --surface: oklch(0.968 0.002 250);
  --fg:      oklch(0.235 0.018 254);
  --muted:   oklch(0.525 0.014 254);
  --border:  oklch(0.895 0.005 254);
  --accent:  oklch(0.435 0.145 258);

  /* teintes de rubrique — meme luminosite et meme chroma que l'accent, seule la teinte tourne */
  --cat-sec: oklch(0.435 0.145 258);
  --cat-bur: oklch(0.455 0.140 25);
  --cat-lin: oklch(0.455 0.110 155);
  --cat-win: oklch(0.455 0.110 215);
  --cat-vba: oklch(0.445 0.135 305);
  --cat-aut: oklch(0.470 0.105 85);
  --cat-srv: oklch(0.455 0.090 195);
  --cat-bdd: oklch(0.450 0.140 350);
  --cat-mat: oklch(0.470 0.115 45);
  --cat-cnf: oklch(0.430 0.130 285);

  --font-display:'Barlow Semi Condensed','Roboto Condensed','Arial Narrow',system-ui,sans-serif;
  --font-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --container:1240px; --gutter:18px; --aside:320px;
  --g-xs:6px; --g-sm:12px; --g-md:20px; --g-lg:32px; --g-xl:52px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* défilement doux des ancres (retour en haut, sommaire) — jamais imposé à qui
   demande moins d'animation */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
p{margin:0;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.14;letter-spacing:-0.015em;text-wrap:balance}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* lien d'évitement — premier élément focusable de la page, invisible au repos */
.skip{position:fixed;top:0;left:0;z-index:100;transform:translateY(-120%);
  background:var(--fg);color:var(--paper);font-family:var(--font-display);font-size:15px;
  font-weight:600;letter-spacing:0.02em;padding:13px 20px;min-height:46px;
  display:inline-flex;align-items:center;transition:transform .12s ease}
.skip:focus{transform:none;outline:2px solid var(--accent);outline-offset:-4px}
/* la cible du lien n'est pas un élément interactif : son contour n'apporte rien */
main:focus{outline:none}

/* Retour en haut — lien d'ancre natif (fonctionne sans JS), révélé par la même
   classe que l'en-tête réduit. `visibility` et non `display` : la transition
   reste possible et le bouton caché sort de l'ordre de tabulation. */
.tothetop{position:fixed;right:var(--gutter);bottom:var(--gutter);z-index:45;
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--fg);color:var(--paper);border:1px solid var(--fg);
  font-size:19px;line-height:1;text-decoration:none;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s,
    background-color .12s ease,border-color .12s ease}
body.is-scrolled .tothetop{opacity:1;visibility:visible;transform:none}
.tothetop:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.tothetop:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .tothetop{transition:opacity .18s ease,visibility .18s;transform:none}
}

/* ─── primitives ───────────────────────────────────────────────────────── */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
/* Les signatures prennent la teinte de leur rubrique quand le contexte en
   porte une (classe k-*), et retombent sur le gris neutre sinon. Les teintes
   de rubrique sont toutes calées sur la même luminosité que l'accent : le
   contraste sur fond papier reste conforme. */
.meta{font-family:var(--font-mono);font-size:12px;color:var(--cat,var(--muted));letter-spacing:0.01em;font-variant-numeric:tabular-nums}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.rule{border:0;border-top:1px solid var(--border);margin:0}
.k-sec{--cat:var(--cat-sec)} .k-bur{--cat:var(--cat-bur)} .k-lin{--cat:var(--cat-lin)}
.k-win{--cat:var(--cat-win)} .k-vba{--cat:var(--cat-vba)} .k-aut{--cat:var(--cat-aut)}
.k-srv{--cat:var(--cat-srv)} .k-bdd{--cat:var(--cat-bdd)} .k-mat{--cat:var(--cat-mat)}
.k-cnf{--cat:var(--cat-cnf)}
.mark{--mark-ink:var(--paper);display:block;width:34px;height:34px;color:var(--fg);flex:0 0 auto}
.mark svg{width:100%;height:100%}
.ph-img{background:var(--surface);border:1px solid var(--border);aspect-ratio:3/2;display:grid;place-items:center;color:var(--muted);font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase}
.ph-img.square{aspect-ratio:1/1}

/* ─── barre supérieure ─────────────────────────────────────────────────── */
.topbar{background:var(--fg);color:var(--paper)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:5px;gap:var(--g-md);padding-block:7px;font-family:var(--font-mono);font-size:12px;letter-spacing:0.02em}
.topbar nav{display:flex;gap:14px}
.topbar nav a:nth-child(n+3){display:none}
.topbar a{color:color-mix(in oklch,var(--paper) 78%,transparent);padding-block:2px}
.topbar a:hover{color:var(--paper)}
.topbar time{color:color-mix(in oklch,var(--paper) 62%,transparent)}

/* ─── en-tête ──────────────────────────────────────────────────────────── */
.masthead{border-bottom:1px solid var(--border);background:var(--paper)}
.masthead-in{display:flex;align-items:center;gap:var(--g-md);padding-block:18px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:30px;font-weight:700;letter-spacing:-0.025em;line-height:1}
.logo-txt>span{color:var(--accent)}
.logo-txt small{display:block;font-family:var(--font-mono);font-size:10px;font-weight:400;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.mainnav{display:none;gap:2px;margin-left:auto;flex-wrap:wrap}
.mainnav a,.mainnav button{font-family:var(--font-display);font-size:15px;font-weight:500;letter-spacing:0.01em;padding:8px 7px;border-bottom:3px solid transparent;white-space:nowrap;transition:border-bottom-color .2s ease,color .2s ease}
.mainnav a:hover,.mainnav button:hover{border-bottom-color:var(--border);color:var(--fg)}
.mainnav a[aria-current="page"]{border-bottom-color:var(--accent);font-weight:600}
.mainnav button[aria-expanded="true"]{border-bottom-color:var(--fg)}
.search{display:flex;align-items:center;border:1px solid var(--border);background:var(--paper);border-radius:2px}
.search input{border:0;background:none;font:inherit;font-size:14px;color:var(--fg);padding:8px 10px;width:110px;min-height:42px}
.masthead-in .search{display:none}
.search input:focus{outline:none}
.search:focus-within{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.search button{padding:0 12px;min-height:42px;color:var(--muted)}
.search button:hover{color:var(--accent)}
.burger{display:grid;place-items:center;margin-left:auto;padding:8px;border:1px solid var(--border);min-height:44px;min-width:44px}

/* panneau « Plus » */
.morepanel{display:none;border-top:1px solid var(--border);background:var(--surface)}
.morepanel[data-open="true"]{display:none}
.morepanel ul{display:grid;grid-template-columns:1fr;gap:0 var(--g-lg);padding-block:var(--g-md)}
.morepanel li{border-top:1px solid var(--border)}
.morepanel a{display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:9px 0;font-family:var(--font-display);font-size:16px}
.morepanel a::before{content:'';width:9px;height:9px;flex:0 0 auto;background:var(--cat,var(--border))}
.morepanel .meta{margin-left:auto}
.morepanel a:hover{color:var(--accent)}

/* en-tête réduit au défilement */
.stickybar{display:none;position:fixed;top:0;left:0;right:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--border);transform:translateY(-100%);transition:transform .18s ease}
body.is-scrolled .stickybar{transform:none}
.stickybar-in{display:flex;align-items:center;gap:var(--g-md);padding-block:8px}
.stickybar .logo{font-size:20px}
.stickybar .logo-txt small{display:none}
.stickybar .mark{width:26px;height:26px}
.stickybar nav{display:flex;gap:var(--g-sm);margin-left:auto;overflow:hidden}
.stickybar nav a{font-family:var(--font-display);font-size:15px;white-space:nowrap}
.stickybar nav a:hover{color:var(--accent)}

/* ─── fil à la une ─────────────────────────────────────────────────────── */
.ticker{border-bottom:1px solid var(--border);background:var(--paper)}
.ticker-in{display:flex;align-items:center;flex-wrap:wrap;gap:var(--g-md);padding-block:11px}
.ticker-label{background:var(--fg);color:var(--paper);font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:6px 11px;white-space:nowrap}
.ticker-item{flex-basis:100%;order:3;min-width:0;font-family:var(--font-display);font-size:17px;font-weight:500;white-space:normal;overflow:hidden;text-overflow:ellipsis}
.ticker-item:hover{color:var(--accent)}
.ticker-ctrl{display:flex;gap:4px;align-items:center;margin-left:auto}
.ticker-ctrl button{border:1px solid var(--border);width:44px;height:44px;display:grid;place-items:center;color:var(--muted);font-size:13px}
.ticker-ctrl button:hover{border-color:var(--fg);color:var(--fg)}
.ticker-ctrl button:active{background:var(--surface)}
.ticker-pos{font-family:var(--font-mono);font-size:11px;color:var(--muted);padding-inline:4px}

/* ─── pavé d'étiquette (élément signature) ─────────────────────────────── */
.sec-head{display:flex;align-items:center;flex-wrap:wrap;column-gap:12px;row-gap:7px;margin-bottom:var(--g-md)}
.sec-tag{background:var(--cat,var(--accent));color:var(--paper);font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:7px 13px;white-space:nowrap}
.sec-head .line{flex:1 1 20px;height:1px;background:var(--border);min-width:20px}
.sec-count{font-family:var(--font-mono);font-size:11px;color:var(--muted);padding-left:0;order:3;white-space:nowrap}
.sec-more{font-family:var(--font-display);font-size:14px;font-weight:500;color:var(--muted);padding-left:0;order:4;white-space:nowrap}
.sec-more:hover{color:var(--accent)}
.sec-head.on-ink .sec-tag{background:var(--fg)}

/* ─── mosaïque ─────────────────────────────────────────────────────────── */
.mosaic{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);border:1px solid var(--border);margin-block:var(--g-lg)}
.mo{position:relative;background:var(--paper);display:grid;overflow:hidden;min-height:180px}
code{font-family:var(--font-mono);font-size:0.92em}
.mo:first-child{min-height:300px}
.mo .ph-img{border:0;height:100%;aspect-ratio:auto}
.mo-txt{position:absolute;inset:auto 0 0 0;padding:16px;background:color-mix(in oklch,var(--fg) 88%,transparent);color:var(--paper);transition:background .25s ease}
.mo-txt h3{font-size:19px;color:var(--paper)}
.mo:first-child .mo-txt{padding:24px}
.mo:first-child .mo-txt h3{font-size:24px;letter-spacing:-0.02em;line-height:1.08}
.mo-cat{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:color-mix(in oklch,var(--cat,var(--fg)) 40%,var(--paper));display:block;margin-bottom:6px;transition:color .25s ease}
.mo-date{font-family:var(--font-mono);font-size:11px;color:color-mix(in oklch,var(--paper) 62%,transparent);display:block;margin-top:8px}
.mo:hover .mo-txt{background:var(--fg)}
.mo:hover .mo-cat{color:var(--paper)}

/* ─── grille corps + latérale ──────────────────────────────────────────── */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--g-xl);align-items:start;padding-block:var(--g-lg) var(--g-xl)}
.block{margin-bottom:var(--g-xl)}
.block:last-child{margin-bottom:0}

/* unité liste */
.u-list{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--border);align-items:start}
.u-list:last-child{border-bottom:1px solid var(--border)}
.u-list h3{font-size:18px;font-weight:500;line-height:1.22;margin-bottom:5px}
.u-list:hover h3{color:var(--cat,var(--accent))}
.u-cat{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--cat,var(--muted));display:block;margin-bottom:5px}
.cols2{column-count:1;column-gap:var(--g-lg)}
.cols2 .u-list{break-inside:avoid}

/* unité moyenne (2 colonnes) */
.grid2{display:grid;grid-template-columns:1fr;gap:var(--g-lg) var(--g-lg)}
.u-med h3{font-size:19px;font-weight:600;margin:10px 0 6px;line-height:1.2}
.u-med:hover h3{color:var(--accent)}
/* dans une page d'article (« Articles similaires »), le survol prend la couleur de la
   rubrique de chaque unité ; sur l'accueil, le bleu de presse */
article .u-med:hover h3{color:var(--cat,var(--accent))}

/* bloc rubrique : 1 grand + 3 liste */
.rub{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--g-lg)}
.u-big h3{font-size:26px;letter-spacing:-0.02em;margin:12px 0 8px;line-height:1.12}
.u-big p{color:var(--muted);font-size:15px;margin-bottom:10px}
.u-big:hover h3{color:var(--accent)}
.rub .u-list:first-of-type{border-top:0;padding-top:0}

/* ─── latérale ─────────────────────────────────────────────────────────── */
.aside-block{margin-bottom:var(--g-xl)}
.pop{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:12px 0;border-top:1px solid var(--border);align-items:start}
.pop:last-child{border-bottom:1px solid var(--border)}
.pop .rank{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--border);line-height:0.9}
.pop h3{font-size:15px;font-weight:500;line-height:1.28;margin-bottom:4px}
.pop:hover h3{color:var(--accent)}
.pop:hover .rank{color:var(--accent)}
.u-side{display:grid;grid-template-columns:64px 1fr;gap:10px;padding:11px 0;border-top:1px solid var(--border);align-items:start}
.u-side:last-child{border-bottom:1px solid var(--border)}
.u-side h3{font-size:14px;font-weight:500;line-height:1.3;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.u-side:hover h3{color:var(--accent)}
.adslot{border:1px solid var(--border);padding:10px}
.adslot .frame{background:var(--surface);height:250px;display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:0.06em}
.adslot .tagline{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:block}
/* Visuel d'annonceur : `height:auto` obligatoire, sinon la hauteur reste celle
   de l'attribut HTML dès que la colonne descend sous la largeur de l'image.
   `width:auto` tout autant — un format de régie (300 × 250) agrandi au-delà de
   sa taille native devient flou, ce qui arrive dès que la latérale passe pleine
   largeur sous 1100 px. L'image se réduit, ne grandit jamais. */
.adslot .pub-visuel{width:auto;max-width:100%;height:auto;display:block;margin-inline:auto}
.adslot :where(iframe,ins,img){max-width:100%}
/* Mention sous l'encart (affiliation, partenariat) : lisible sans concurrencer
   le contenu éditorial voisin. */
.adslot .mention{margin:8px 0 0;font-size:12px;line-height:1.45;color:var(--muted)}
/* Bandeau de rubrique et encart de corps d'article : hors de la latérale, le
   cadre 300 × 250 n'a plus de sens — l'encart prend la largeur disponible et
   se démarque du texte par ses marges. */
.adslot-hub{margin:0 0 var(--g-lg)}
.adslot-hub .frame{height:120px}
.adslot-article-corps{margin:var(--g-lg) 0}
.adslot-article-pied{margin:var(--g-xl) 0 0;max-width:68ch}
/* Hors latérale, le visuel garde ses proportions mais ne peut pas manger
   l'écran : un annonceur qui fournit une image d'article à la place d'un
   bandeau ne doit pas repousser le contenu éditorial hors de la page. */
.adslot-hub .pub-visuel,.adslot-article-corps .pub-visuel,.adslot-article-pied .pub-visuel{
  width:auto;max-width:100%;max-height:250px;margin-inline:auto;object-fit:contain}
/* Emplacement resté vide, proposé à la vente. Ce bloc n'est pas une publicité :
   il ne porte pas la mention « Publicité », que la page annonceurs réserve aux
   encarts payés — d'où un fond plein qui le distingue du cadre neutre d'un
   encart, et son propre sur-titre « Espace disponible ». */
.adslot-promo{background:var(--surface)}
.adslot-promo h3{font-size:19px;line-height:1.25;margin:0 0 8px}
.adslot-promo p{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--muted)}
.adslot-promo .btn{width:100%}
/* Hors latérale et à partir du palier large, le bloc s'étale plutôt que de
   s'étirer en colonne : accroche à gauche, bouton à droite. */
@media (min-width:721px){
  :is(.adslot-hub,.adslot-article-corps,.adslot-article-pied).adslot-promo{
    display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:var(--g-lg);padding:18px}
  :is(.adslot-hub,.adslot-article-corps,.adslot-article-pied).adslot-promo .tagline{grid-column:1}
  :is(.adslot-hub,.adslot-article-corps,.adslot-article-pied).adslot-promo h3{grid-column:1;margin:0}
  :is(.adslot-hub,.adslot-article-corps,.adslot-article-pied).adslot-promo p{grid-column:1;margin:4px 0 0}
  /* `span 3` et non `1 / -1` : sans `grid-template-rows`, les lignes sont
     implicites et `-1` y désigne le bord de la grille explicite, ce qui
     renvoyait le bouton tout en haut du bloc. */
  :is(.adslot-hub,.adslot-article-corps,.adslot-article-pied).adslot-promo .btn{
    grid-column:2;grid-row:1/span 3;align-self:center;width:auto}
}
.catlist a{display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border);font-family:var(--font-display);font-size:16px;font-weight:500}
.catlist li:last-child a{border-bottom:1px solid var(--border)}
.catlist a:hover{color:var(--accent)}
.catlist .c{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-left:auto}
.catlist a::before{content:'';width:9px;height:9px;flex:0 0 auto;background:var(--cat,var(--border))}
.pitch{border:1px solid var(--border);padding:18px}
.pitch h3{font-size:19px;margin-bottom:8px}
.pitch p{font-size:14px;color:var(--muted);margin-bottom:14px}

/* ─── boutons ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 18px;border:1px solid transparent;font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:0.02em;border-radius:0;transition:background .12s ease,border-color .12s ease,color .12s ease}
.btn-primary{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.btn-primary:hover{background:color-mix(in oklch,var(--accent) 82%,black);border-color:color-mix(in oklch,var(--accent) 82%,black)}
.btn-primary:active{background:color-mix(in oklch,var(--accent) 68%,black)}
.btn-secondary{border-color:var(--border);color:var(--fg)}
.btn-secondary:hover{border-color:var(--fg)}
.btn-secondary:active{background:var(--surface)}

/* ─── explorer par thème ───────────────────────────────────────────────── */
.explore{border-top:1px solid var(--border);padding-block:var(--g-xl)}
.themes{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);border:1px solid var(--border)}
.theme{background:var(--paper);padding:15px 16px 18px;display:block;border-top:3px solid var(--cat,var(--border))}
.theme h3{font-size:19px;margin-bottom:6px}
.theme .c{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.theme:hover{background:var(--surface)}
.theme:hover h3{color:var(--accent)}

/* ─── pied de page ─────────────────────────────────────────────────────── */
.pagefoot{background:var(--fg);color:color-mix(in oklch,var(--paper) 76%,transparent);padding-block:var(--g-xl) var(--g-md);font-size:14px}
.foot-grid{display:grid;grid-template-columns:1fr;gap:var(--g-lg)}
/* Les menus du pied sont déclarés verticaux, mais le bloc navigation retombe en
   ligne faute de classe `is-vertical` : un lien par ligne, comme les rubriques. */
.footnav ul{flex-direction:column;align-items:flex-start;gap:6px}
.pagefoot h4{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--paper);margin-bottom:14px}
.pagefoot a{color:inherit}
.pagefoot a:hover{color:var(--paper)}
.pagefoot li{padding-block:5px}
.foot-cats{columns:1;column-gap:var(--g-md)}
.foot-mark{display:flex;align-items:center;gap:10px}
/* Le bas de pied est fait de blocs éditables : leurs marges par défaut
   décaleraient la ligne. */
.foot-legal p{margin:0}
.foot-mark .mark{width:26px;height:26px;color:var(--paper);--mark-ink:var(--fg)}
.foot-legal{border-top:1px solid color-mix(in oklch,var(--paper) 20%,transparent);margin-top:var(--g-xl);padding-top:var(--g-md);display:flex;justify-content:space-between;gap:var(--g-md);flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;color:color-mix(in oklch,var(--paper) 55%,transparent)}

/* ─── menu mobile ──────────────────────────────────────────────────────── */
.mobilemenu{display:none;position:fixed;inset:0;z-index:60;background:var(--paper);overflow-y:auto;padding:var(--gutter)}
.mobilemenu[data-open="true"]{display:block}
.mobilemenu .close{position:absolute;top:14px;right:14px;border:1px solid var(--border);width:44px;height:44px;display:grid;place-items:center;font-size:18px}
.mobilemenu h4{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin:var(--g-lg) 0 8px}
.mobilemenu a[class*="k-"]::before{content:'';width:10px;height:10px;flex:0 0 auto;background:var(--cat,var(--border));margin-right:12px}
.mobilemenu .meta{margin-left:auto}
.mobilemenu a{display:flex;justify-content:flex-start;align-items:center;min-height:48px;padding:13px 0;border-top:1px solid var(--border);font-family:var(--font-display);font-size:20px;font-weight:500}
.mobilemenu .search input,.mobilemenu .search button{min-height:48px}
.mobilemenu .search input{width:100%}

/* ─── adaptations ──────────────────────────────────────────────────────── */

/* 1024–1120 : la colonne de corps est trop étroite pour deux colonnes de liste */




/* ─── hub de rubrique ──────────────────────────────────────────────────── */
.mainnav a[aria-current="page"]{border-bottom-color:var(--cat,var(--accent));font-weight:600}
.crumb{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-family:var(--font-mono);font-size:12px;color:var(--muted);padding-top:20px}
.crumb a:hover{color:var(--cat,var(--accent))}
.crumb .sep{color:var(--border)}
.crumb [aria-current]{color:var(--fg)}
/* mobile : le niveau intermédiaire se tronque plutôt que de passer à la ligne */
.crumb a:not(:first-child){max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-head{padding:16px 0 var(--g-lg);border-bottom:1px solid var(--border)}
.hub-head h1{font-size:clamp(36px,4.6vw,52px);letter-spacing:-0.028em;line-height:1.04;margin:14px 0 14px}
/* `:not(.sec-tag)` : sans lui, cette règle l'emporte sur `.sec-tag` (un tag est
   un paragraphe) et écrit le nom de la rubrique en gris sur son fond coloré. */
.hub-head p:not(.sec-tag){max-width:66ch;color:var(--muted);font-size:17px;line-height:1.6}
.hub-facts{display:flex;gap:0;flex-wrap:wrap;margin-top:20px;border:1px solid var(--border)}
.hub-facts div{padding:11px 16px;flex-basis:100%;border-right:0;border-bottom:1px solid var(--border)}
.hub-facts div:last-child{border-bottom:0}
.hub-facts dt{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.hub-facts dd{margin:0;font-family:var(--font-display);font-size:18px;font-weight:600}
.u-hub{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:24px 0;border-top:1px solid var(--border);align-items:start}
.u-hub:first-of-type{border-top:0}
.hub-list{border-bottom:1px solid var(--border)}
.u-hub h3{font-size:19px;font-weight:600;line-height:1.16;margin-bottom:9px}
.u-hub:hover h3{color:var(--cat,var(--accent))}
.u-hub p{display:none;color:var(--muted);font-size:15px;line-height:1.55;margin-bottom:11px;max-width:62ch}
.u-hub .meta em{font-style:normal;color:var(--fg)}
/* pagination */
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-block:var(--g-lg)}
.pager a,.pager span{min-width:44px;min-height:44px;display:grid;place-items:center;padding:0 13px;border:1px solid var(--border);font-family:var(--font-mono);font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.pager a:hover{border-color:var(--fg);color:var(--fg)}
.pager a:active{background:var(--surface)}
.pager [aria-current="page"]{background:var(--cat,var(--accent));border-color:var(--cat,var(--accent));color:var(--paper)}
.pager .edge{font-family:var(--font-display);font-size:15px;font-weight:500;letter-spacing:0.02em}
.pager .off{opacity:.38;pointer-events:none}
.pager .gap{border-color:transparent;min-width:20px;padding:0}
.pager-note{margin-left:0;flex-basis:100%;font-family:var(--font-mono);font-size:12px;color:var(--muted)}


/* ─── article ──────────────────────────────────────────────────────────── */
.art-head{padding-block:16px var(--g-md)}
.art-head h1{font-size:clamp(34px,4.4vw,50px);letter-spacing:-0.028em;line-height:1.05;margin:14px 0}
.chapo{font-size:18px;line-height:1.5;color:var(--muted);max-width:68ch;margin-bottom:var(--g-md)}
.byline{display:flex;align-items:center;row-gap:4px;gap:14px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:12px;color:var(--cat,var(--muted))}
.byline .who{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--fg)}
.byline .dot{display:none;color:var(--border)}
.art-figure{margin:var(--g-md) 0 var(--g-lg)}
.art-figure figcaption{font-size:13px;color:var(--muted);margin-top:9px;line-height:1.5}
/* en bref */
.tldr{border:1px solid var(--border);border-left:4px solid var(--cat,var(--accent));padding:20px 22px;margin-bottom:var(--g-lg);max-width:68ch}
.tldr h2{font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--cat,var(--accent));margin-bottom:12px}
.tldr li{position:relative;padding-left:20px;margin-bottom:9px;font-size:16px;line-height:1.55}
.tldr li:last-child{margin-bottom:0}
.tldr li::before{content:'';position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--cat,var(--accent))}
/* corps — rythme vertical en multiples d'interligne */
.prose{max-width:68ch;font-size:17px;line-height:1.65}
.prose p,.prose ul,.prose ol,.prose figure,.prose pre,.prose blockquote,.prose .note,.prose .table-scroll,.prose .codeblock{margin:0 0 1lh}
/* en bref détecté dans le corps : la boîte vit dans .prose et sa liste est un bloc
   liste — les styles de titre et de liste (thème comme theme.json) s'effacent
   devant les siens */
.prose .tldr{margin:0 0 1lh}
.prose .tldr h2{font-size:13px;letter-spacing:0.12em;line-height:1.4;margin:0 0 12px}
.prose .tldr ul{list-style:none;padding:0;margin:0;background:none;color:inherit;border-radius:0}
.prose .tldr li{margin-bottom:9px}
.prose .tldr li:last-child{margin-bottom:0}
/* couleur et taille des titres : theme.json (styles.elements.h1…h6, réglables dans
   Apparence → Éditeur → Styles) — ici, seuls rythme et espacement */
.prose h2{letter-spacing:-0.02em;line-height:1.15;margin:2lh 0 0.5lh;scroll-margin-top:76px}
.prose h3{font-size:22px;line-height:1.25;margin:1.25lh 0 0.3lh}
.prose h4{font-size:18px;line-height:1.3;margin:1lh 0 0.2lh}
.prose h2+p,.prose h3+p,.prose h4+p{margin-top:0}
.prose>*:last-child{margin-bottom:0}
/* couleur et soulignement des liens du corps : theme.json (core/post-content → link) ;
   offset et épaisseur restent prêts si le soulignement revient */
.prose a{text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2.5px}
.prose strong{font-weight:600}
/* fond, couleur, padding, rayon et puces des listes : theme.json (styles.blocks.core/list) */
.prose li{margin-bottom:0.35lh}
.prose li>ul,.prose li>ol{margin:0.35lh 0 0}
.prose blockquote{border-left:4px solid var(--cat,var(--accent));padding-left:20px;font-size:20px;line-height:1.5;font-style:normal;color:var(--fg)}
.prose blockquote cite{display:block;margin-top:10px;font-family:var(--font-mono);font-size:12px;font-style:normal;color:var(--muted)}
/* code */
.prose code{font-family:var(--font-mono);font-size:0.88em;background:var(--surface);padding:2px 5px}
.prose .wp-block-list code{color:var(--fg)}
.codeblock{position:relative;background:var(--surface);border-left:3px solid var(--cat,var(--accent))}
.codeblock .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 12px;border-bottom:1px solid var(--border)}
.codeblock .lang{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
.codeblock .copy{font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;color:var(--muted);border:1px solid var(--border);padding:5px 10px;background:var(--paper)}
.codeblock .copy:hover{border-color:var(--fg);color:var(--fg)}
.codeblock .copy:active{background:var(--surface)}
.codeblock .copy[data-done="true"]{color:var(--cat-lin);border-color:var(--cat-lin)}
.codeblock pre{margin:0;overflow-x:auto;padding:14px 12px}
.codeblock code{background:none;padding:0;font-size:13.5px;line-height:1.62;display:block;white-space:pre}
.t-cmt{color:var(--muted)}
.t-kw{color:var(--cat-sec);font-weight:500}
.t-str{color:var(--cat-lin)}
.t-num{color:var(--cat-mat)}
.t-var{color:var(--cat-vba)}
/* tableau */
.table-scroll{overflow-x:auto;border:1px solid var(--border)}
.prose table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.45}
.prose th,.prose td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border);border-right:1px solid var(--border);vertical-align:top}
.prose th:last-child,.prose td:last-child{border-right:0}
.prose thead th{background:var(--surface);font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
.prose tbody tr:nth-child(even){background:var(--surface)}
.prose tbody tr:last-child td{border-bottom:0}
.prose th:first-child,.prose td:first-child{position:sticky;left:0;background:var(--paper);font-weight:600}
.prose thead th:first-child,.prose tbody tr:nth-child(even) td:first-child{background:var(--surface)}
.prose .scroll-hint{display:block;font-family:var(--font-mono);font-size:11px;color:var(--muted);margin:-0.6lh 0 1lh}
/* encadres */
.note{border:1px solid var(--border);border-left:4px solid var(--tone,var(--accent));padding:16px 18px;font-size:16px;line-height:1.55}
.note h4{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--tone,var(--accent));margin:0 0 7px}
.note p{margin:0}
.note.info{--tone:var(--cat-sec)}
.note.warn{--tone:var(--cat-mat)}
.note.danger{--tone:var(--cat-bur)}
/* faq */
.faq{max-width:68ch;margin-top:var(--g-xl)}
.faq dt{font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.25;margin-bottom:8px}
.faq dd{margin:0 0 26px;font-size:16px;line-height:1.6;color:var(--muted);padding-bottom:26px;border-bottom:1px solid var(--border)}
.faq dd:last-child{border-bottom:0}
/* bloc auteur */
.authorbox{display:grid;grid-template-columns:72px 1fr;gap:18px;border:1px solid var(--border);padding:20px;margin-top:var(--g-xl);max-width:68ch}
.authorbox h3{font-size:19px;margin-bottom:5px}
.authorbox p{font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:10px}
.authorbox .more{font-family:var(--font-mono);font-size:12px;color:var(--accent)}
.authorbox .more:hover{color:var(--fg)}
/* precedent / suivant */
.prevnext{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);border:1px solid var(--border);margin-top:var(--g-lg)}
.prevnext a{background:var(--paper);padding:18px 20px;display:block}
.prevnext a:hover{background:var(--surface)}
.prevnext .dir{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.prevnext h3{font-size:18px;font-weight:500;line-height:1.25}
.prevnext a:hover h3{color:var(--cat,var(--accent))}
.prevnext .next{text-align:left}
/* sommaire */
.toc ul{margin:0}
/* sommaire : le bloc porte la classe k-<cle> sur un article, pas sur une page — les
   liens prennent la couleur de la rubrique quand elle existe, les tons neutres sinon */
.toc li a{display:block;padding:7px 0 7px 14px;border-left:2px solid var(--border);font-size:14px;line-height:1.35;color:var(--cat,var(--muted))}
.toc li a:hover{color:var(--fg);border-left-color:var(--muted)}
.toc li a.on{color:var(--cat,var(--fg));border-left-color:var(--cat,var(--accent));border-left-width:3px;padding-left:13px;font-weight:500}
.toc-mobile{display:block;border:1px solid var(--border);margin-bottom:var(--g-lg);max-width:68ch}
.toc-mobile summary{list-style:none;cursor:pointer;padding:14px 16px;font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;min-height:48px}
.toc-mobile summary::-webkit-details-marker{display:none}
.toc-mobile summary::after{content:'+';font-family:var(--font-mono);font-size:17px;color:var(--muted)}
.toc-mobile[open] summary::after{content:'–'}
.toc-mobile .toc{padding:0 16px 12px}
.sticky-toc{position:sticky;top:70px}
.aside-toc{display:none}




/* ─── recherche ────────────────────────────────────────────────────────── */
.searchpage{padding-block:var(--g-lg) var(--g-md);border-bottom:1px solid var(--border)}
.searchpage h1{font-size:clamp(30px,3.6vw,42px);letter-spacing:-0.025em;margin-bottom:18px}
.search-big{display:flex;border:1px solid var(--fg);max-width:660px}
.search-big input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:18px;padding:14px 16px;min-height:56px;color:var(--fg)}
.search-big input:focus{outline:none}
.search-big:focus-within{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.search-big button{background:var(--fg);color:var(--paper);font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:0.03em;padding:0 16px;min-height:56px;white-space:nowrap}
.search-big button:hover{background:var(--accent)}
.search-big button:active{background:color-mix(in oklch,var(--accent) 70%,black)}
.search-big .clear{background:none;color:var(--muted);padding:0 14px;font-family:var(--font-mono);font-size:16px;min-height:56px}
.search-big .clear:hover{color:var(--fg)}
.search-count{font-family:var(--font-mono);font-size:13px;color:var(--muted);margin-top:18px}
.search-count strong{color:var(--fg);font-weight:500}
.u-hub p strong{font-weight:600;color:var(--fg)}
/* ─── état vide et 404 ─────────────────────────────────────────────────── */
.void{padding-block:var(--g-xl) var(--g-lg)}
.void h1{font-size:clamp(32px,4.2vw,46px);letter-spacing:-0.028em;line-height:1.06;margin-bottom:18px;max-width:26ch}
.void h1 em{font-style:normal;font-family:var(--font-mono);font-size:0.62em;font-weight:400;letter-spacing:0;color:var(--muted)}
.void .lead{font-size:18px;color:var(--muted);line-height:1.6;max-width:62ch;margin-bottom:var(--g-lg)}
.void .search-big{margin-bottom:var(--g-lg)}
.suggest{border:1px solid var(--border);padding:20px 22px;max-width:62ch;margin-bottom:var(--g-xl)}
.suggest h2{font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.suggest li{padding:11px 0;border-top:1px solid var(--border);font-size:16px;line-height:1.5;display:flex;gap:12px;align-items:baseline}
.suggest li:first-of-type{border-top:0;padding-top:0}
.suggest li:last-child{padding-bottom:0}
.suggest .q{font-family:var(--font-mono);font-size:14px;color:var(--accent);white-space:nowrap}
.suggest .q:hover{color:var(--fg)}
.errcode{font-family:var(--font-display);font-size:clamp(72px,11vw,124px);font-weight:700;letter-spacing:-0.05em;line-height:0.85;color:var(--border);margin-bottom:8px}
.block-tight{margin-bottom:var(--g-xl)}

/* ─── écrans étroits (360 → 480px) ─────────────────────────────────────── */
/* ─── page institutionnelle ────────────────────────────────────────────── */
.pagehead{padding-block:16px var(--g-md);border-bottom:1px solid var(--border);margin-bottom:var(--g-lg)}
.pagehead h1{font-size:clamp(32px,4.2vw,46px);letter-spacing:-0.028em;line-height:1.06;margin:14px 0 14px}
.pagehead .lead{font-size:19px;color:var(--muted);line-height:1.6;max-width:66ch;margin-bottom:18px}
.pagehead .stamp{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.pagehead .stamp .dot{color:var(--border)}
.pagehead .stamp b{color:var(--fg);font-weight:500}
.legal-toc{border:1px solid var(--border);padding:18px 20px 20px;margin-bottom:var(--g-xl);max-width:68ch}
.legal-toc h2{font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.legal-toc ol{display:grid;grid-template-columns:1fr;gap:0 24px;margin:0;padding:0;list-style:none;counter-reset:l}
.legal-toc li{counter-increment:l}
.legal-toc a{display:flex;gap:9px;padding:5px 0;font-size:15px;line-height:1.35}
.legal-toc a::before{content:counter(l);font-family:var(--font-mono);font-size:11px;color:var(--muted);padding-top:3px;min-width:12px}
.legal-toc a:hover{color:var(--accent)}
.tofill{font-family:var(--font-mono);font-size:0.9em;background:var(--surface);border-bottom:1px solid var(--border);padding:1px 6px;color:var(--muted);white-space:nowrap}
.legal-nav{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);border:1px solid var(--border);margin-top:var(--g-xl);max-width:68ch}
.legal-nav a{background:var(--paper);padding:16px 18px;display:block}
.legal-nav a:hover{background:var(--surface)}
.legal-nav a:hover h3{color:var(--accent)}
.legal-nav .k{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:7px}
.legal-nav h3{font-size:17px;font-weight:500;line-height:1.25}


/* ─── écrans étroits (360 → 480px) ─────────────────────────────────────── */
/* ─── page auteur ──────────────────────────────────────────────────────── */
.authorhead{display:grid;grid-template-columns:92px 1fr;gap:16px;padding-block:16px var(--g-lg);border-bottom:1px solid var(--border);align-items:start}
.authorhead h1{font-size:clamp(32px,4.2vw,46px);letter-spacing:-0.028em;line-height:1.06;margin:12px 0 9px}
.authorhead .role{font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.authorhead .bio{font-size:17px;line-height:1.62;color:var(--muted);max-width:66ch;margin-bottom:16px}
.authorhead .bio strong{color:var(--fg);font-weight:600}
.authorhead .bio+.bio{margin-top:-4px}
.author-links{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--font-mono);font-size:12px;padding-top:14px;border-top:1px solid var(--border)}
.author-links a{color:var(--accent)}
.author-links a:hover{color:var(--fg)}
.author-links span{color:var(--muted)}
.author-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.author-cat{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--border);padding:7px 12px;font-family:var(--font-display);font-size:14px;font-weight:500}
.author-cat::before{content:'';width:8px;height:8px;flex:0 0 auto;background:var(--cat,var(--border))}
.author-cat:hover{border-color:var(--fg)}
.author-cat .n{font-family:var(--font-mono);font-size:11px;color:var(--muted)}

/* ─── champs de formulaire ─────────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:1fr;gap:var(--g-md);max-width:640px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:0.01em}
.field .hint{font-family:var(--font-mono);font-size:11px;color:var(--muted);line-height:1.5}
.field .req{color:var(--accent)}
.input,.textarea,.select{width:100%;border:1px solid var(--border);border-radius:2px;background:var(--paper);color:var(--fg);font:inherit;font-size:16px;padding:10px 12px;min-height:44px}
.textarea{min-height:132px;resize:vertical;line-height:1.55}
.select{appearance:none;padding-right:34px;background-image:none}
.input:hover,.textarea:hover,.select:hover{border-color:var(--muted)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.input:disabled,.textarea:disabled{background:var(--surface);color:var(--muted);cursor:not-allowed}
.input[aria-invalid="true"]{border-color:var(--cat-bur);box-shadow:inset 0 0 0 1px var(--cat-bur)}
.field .err{font-family:var(--font-mono);font-size:11px;color:var(--cat-bur)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5}
.check input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--accent)}

/* ─── article sponsorisé ───────────────────────────────────────────────── */
.sponsor-bar{background:var(--fg);color:var(--paper)}
.sponsor-bar .in{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-block:9px;font-family:var(--font-mono);font-size:12px;letter-spacing:0.02em}
.sponsor-bar .tag{background:var(--paper);color:var(--fg);font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;padding:4px 9px}
.sponsor-bar span{color:color-mix(in oklch,var(--paper) 72%,transparent)}
.byline .sponsored{background:var(--fg);color:var(--paper);font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:3px 8px}
.advertiser{border:1px solid var(--border);border-left:4px solid var(--fg);padding:18px 20px;margin-bottom:var(--g-lg);max-width:68ch}
.advertiser .k{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:9px}
.advertiser h2{font-size:20px;margin-bottom:8px}
.advertiser p{font-size:15px;line-height:1.55;color:var(--muted);margin-bottom:12px}
.advertiser a{font-family:var(--font-mono);font-size:12px;color:var(--accent)}
.advertiser a:hover{color:var(--fg)}

/* ─── offres commerciales ──────────────────────────────────────────────── */
.offers{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);border:1px solid var(--border)}
.offer{background:var(--paper);padding:22px 20px}
.offer h3{font-size:22px;margin-bottom:6px}
.offer .price{font-family:var(--font-mono);font-size:13px;color:var(--accent);margin-bottom:14px;display:block}
.offer p{font-size:15px;line-height:1.55;color:var(--muted);margin-bottom:14px}
.offer ul{border-top:1px solid var(--border)}
.offer li{position:relative;padding:9px 0 9px 20px;border-bottom:1px solid var(--border);font-size:14px;line-height:1.5}
.offer li::before{content:'';position:absolute;left:0;top:16px;width:8px;height:8px;background:var(--cat,var(--accent))}
.offer li:last-child{border-bottom:0}
.steps{counter-reset:s;border-top:1px solid var(--border);max-width:68ch}
.steps li{counter-increment:s;display:grid;grid-template-columns:38px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--border);align-items:start}
.steps li::before{content:counter(s);font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--border);line-height:0.9}
.steps h3{font-size:18px;margin-bottom:5px}
.steps p{font-size:15px;line-height:1.55;color:var(--muted)}

/* ═══ RESPONSIVE — mobile first ═════════════════════════════════════════
   Les règles ci-dessus décrivent le téléphone. Chaque palier ajoute, il ne
   corrige jamais : 481px (téléphone large) · 721px (tablette) · 1024px
   (latérale et navigation complète) · 1121px · 1181px.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:481px){
  .topbar nav a:nth-child(n+3){display:inline}
  .byline .dot{display:inline}
  .hub-facts div{flex-basis:auto;border-right:1px solid var(--border);border-bottom:0}
  .hub-facts div:last-child{border-right:0}
  .search-big button{padding:0 26px}
  .offers{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:721px){
  :root{--gutter:28px}
  .sec-head{flex-wrap:nowrap;column-gap:0;row-gap:0}
  .sec-head .line{flex:1;min-width:16px}
  .sec-count,.sec-more{padding-left:12px;order:0}
  .crumb a:not(:first-child){max-width:none;overflow:visible;white-space:normal}
  .ticker-in{flex-wrap:nowrap}
  .ticker-item{flex:1;order:0;white-space:nowrap;font-size:18px}
  .ticker-ctrl button{width:36px;height:36px}
  .mosaic{grid-template-columns:1fr 1fr}
  .mo:first-child{grid-column:span 2}
  .mo:first-child .mo-txt h3{font-size:32px}
  .cols2{column-count:2}
  .grid2{grid-template-columns:repeat(2,1fr)}
  .rub{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .themes{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-cats{columns:2}
  .prose{font-size:19px}
  .prose .scroll-hint{display:none}
  .chapo{font-size:21px}
  .u-hub{grid-template-columns:132px 1fr;gap:20px}
  .u-hub h3{font-size:23px}
  .u-hub p{display:block}
  .pager-note{margin-left:auto;flex-basis:auto}
  .prevnext{grid-template-columns:1fr 1fr}
  .prevnext .next{text-align:right}
  .legal-toc ol{grid-template-columns:1fr 1fr}
  .legal-nav{grid-template-columns:repeat(3,1fr)}
  .authorhead{grid-template-columns:140px 1fr;gap:26px}
  .morepanel ul{grid-template-columns:repeat(3,1fr)}
  .offers{grid-template-columns:repeat(3,1fr)}
  .form-grid{grid-template-columns:1fr 1fr}
  .form-grid .full{grid-column:1/-1}
}
@media (min-width:1024px){
  .mainnav{display:flex}
  .masthead-in{gap:var(--g-lg)}
  .masthead-in .search{display:flex}
  .burger{display:none}
  .stickybar{display:block}
  .morepanel[data-open="true"]{display:block}
  .layout{grid-template-columns:minmax(0,1fr) var(--aside)}
  /* Latérale collante, figée quand sa FIN est atteinte : un sticky par le haut
     laisserait ses derniers blocs — rubriques, dernières mises à jour — hors de
     portée, la colonne étant plus haute que l'écran. `bottom` ne retient pas
     l'élément dans cette grille ; le décalage est donc un `top` négatif que
     techana.js calcule (100vh − hauteur de la colonne) et repose à chaque
     changement de taille. Sans JS : aucun offset, la colonne défile — la
     dégradation la plus sûre. La latérale d'article est exclue, son sommaire
     porte déjà son propre sticky. */
  .layout > aside:not(:has(.sticky-toc)){position:sticky}
  .mosaic{grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,1fr)}
  .mo:first-child{grid-row:span 2;grid-column:auto;min-height:400px}
  .toc-mobile{display:none}
  .aside-toc{display:block}
  .foot-grid{grid-template-columns:1.7fr 1fr 1fr}
  /* 1024 → 1120 : la colonne de corps est trop étroite pour deux colonnes de liste */
  .cols2{column-count:1}
}
@media (min-width:1121px){ .cols2{column-count:2} }
@media (min-width:1181px){
  .mainnav a,.mainnav button{font-size:16px;padding:8px 10px}
  .search input{width:150px}
  .morepanel ul{grid-template-columns:repeat(5,1fr)}
  .themes{grid-template-columns:repeat(5,1fr)}
}

/* ═══ Pont WordPress ════════════════════════════════════════════════════
   Adaptations du markup de blocs Gutenberg aux sélecteurs du design.
   Cette section est la SEULE différence avec design/techana.css — aucune
   valeur en dur, uniquement des tokens. Ne rien ajouter au-dessus. */

/* Image à la une des unités de carte — remplace la réserve .ph-img */
.wp-block-post-featured-image{margin:0}
.ph-auto img{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:3/2}
.ph-auto.square img{aspect-ratio:1/1}
.mo .wp-block-post-featured-image{height:100%}
.mo .ph-auto img{height:100%;aspect-ratio:auto}

/* Toute la carte est cliquable : le lien du titre est étendu à l'unité,
   comme le <a> englobant des maquettes */
.u-list,.u-med,.u-big,.u-side,.mo{position:relative}
.u-list .wp-block-post-title a::after,.u-med .wp-block-post-title a::after,
.u-big .wp-block-post-title a::after,.u-side .wp-block-post-title a::after,
.mo .wp-block-post-title a::after{content:"";position:absolute;inset:0}
/* les liens de rubrique restent cliquables au-dessus du lien étendu */
.u-list .u-cat a,.u-med .u-cat a,.mo .mo-cat a{position:relative;z-index:1}

/* Barre supérieure : la date est un paragraphe, la navigation est en liste */
.topbar .topdate{color:color-mix(in oklch,var(--paper) 62%,transparent)}
.topbar nav li:nth-child(n+3){display:none}
@media (min-width:481px){ .topbar nav li:nth-child(n+3){display:block} }

/* Navigation principale : l'ul du bloc navigation porte le flex du design */
.mainnav .wp-block-navigation__container{display:flex;gap:2px;flex-wrap:wrap}

/* Bloc recherche core habillé par .search */
.search .wp-block-search__inside-wrapper{display:flex;align-items:center;width:100%;border:0;padding:0}
.search .wp-block-search__input{border:0}

/* Pagination core habillée par .pager : les numéros sortent de leur wrapper,
   la page courante reprend la règle aria-current, les points la règle .gap */
.pager .wp-block-query-pagination-numbers{display:contents}
.pager .current{background:var(--cat,var(--accent));border-color:var(--cat,var(--accent));color:var(--paper)}
.pager .dots{border-color:transparent;min-width:20px;padding:0}
.pager .wp-block-query-pagination-previous,.pager .wp-block-query-pagination-next{font-family:var(--font-display);font-size:15px;font-weight:500;letter-spacing:0.01em}

/* Query Loop : les <li> du post-template s'effacent — la carte redevient
   l'enfant direct de la grille, comme dans les maquettes. Les sélecteurs
   structurels (:first-child, :last-child) sont rejoués au niveau du <li>. */
.wp-block-post-template>.wp-block-post{display:contents}
.wp-block-post-template .u-list:last-child{border-bottom:0}
.wp-block-post-template>.wp-block-post:last-child .u-list{border-bottom:1px solid var(--border)}
.wp-block-post-template .mo:first-child{min-height:180px}
.wp-block-post-template .mo:first-child .mo-txt{padding:16px}
.wp-block-post-template .mo:first-child .mo-txt h3{font-size:19px;letter-spacing:normal;line-height:inherit}
.wp-block-post-template>.wp-block-post:first-child .mo{min-height:300px}
.wp-block-post-template>.wp-block-post:first-child .mo-txt{padding:24px}
.wp-block-post-template>.wp-block-post:first-child .mo-txt h3{font-size:24px;letter-spacing:-0.02em;line-height:1.08}
@media (min-width:721px){
  .wp-block-post-template>.wp-block-post:first-child .mo{grid-column:span 2}
  .wp-block-post-template>.wp-block-post:first-child .mo-txt h3{font-size:32px}
}
@media (min-width:1024px){
  .wp-block-post-template>.wp-block-post:first-child .mo{grid-row:span 2;grid-column:auto;min-height:400px}
}
/* bloc de rubrique : la tête (unité grande) s'aplatit dans la grille .rub,
   et seule la première ligne de liste réelle perd son filet haut */
.rub-tete,.rub-tete .wp-block-post-template{display:contents}
.rub .u-list:first-of-type{border-top:1px solid var(--border);padding-top:14px}
.rub .wp-block-post-template>.wp-block-post:first-child .u-list{border-top:0;padding-top:0}
/* unité hub : mêmes rejeux structurels + lien étendu */
.u-hub{position:relative}
.u-hub .wp-block-post-title a::after{content:"";position:absolute;inset:0}
.wp-block-post-template .u-hub:first-of-type{border-top:1px solid var(--border)}
.wp-block-post-template>.wp-block-post:first-child .u-hub{border-top:0}
/* pages institutionnelles : conteneur réduit de la maquette (style inline) */
.page-narrow{max-width:1000px}
/* 404 : la colonne « plus lus » de la maquette (style inline max-width) */
.void-pop{max-width:62ch}
/* mosaïque : l'image couvre la carte (calée sur .mo), le voile reste au-dessus */
.mo .wp-block-post-featured-image{position:absolute;inset:0;height:100%}
.mo .ph-auto img{width:100%;height:100%;object-fit:cover}
.mo .ph-img{position:absolute;inset:0;height:100%}
/* navigation principale : le CSS du bloc core force display — on rejoue les
   paliers du design avec la spécificité nécessaire */
nav.mainnav.wp-block-navigation{display:none}
@media (min-width:1024px){
  nav.mainnav.wp-block-navigation{display:flex}
}
/* rejeu des positions de grille de la mosaïque aux paliers (le :first-child
   original toucherait chaque carte via son <li> effacé) */
@media (min-width:721px){
  .wp-block-post-template .mo:first-child{grid-column:auto}
  .wp-block-post-template>.wp-block-post:first-child .mo{grid-column:span 2}
}
@media (min-width:1024px){
  .wp-block-post-template .mo:first-child{grid-row:auto;grid-column:auto;min-height:180px}
  .wp-block-post-template>.wp-block-post:first-child .mo{grid-row:span 2;grid-column:auto;min-height:400px}
}
/* grille des thèmes : 6 silos → 3 colonnes pleines (la maquette en prévoyait
   10 sur 5 colonnes ; des cellules vides afficheraient le fond de filet) */
@media (min-width:1181px){ .themes{grid-template-columns:repeat(3,1fr)} }
/* vidéos embarquées : centrées et fluides sur la largeur de colonne, ratio
   16:9 imposé — les iframes oEmbed arrivent en 500×281 fixes quand le cache
   est servi sans la CSS core, et les URL nues auto-embarquées n'ont aucun
   habillage */
.prose .wp-block-embed{margin:var(--g-md) auto var(--g-lg)}
.prose .wp-block-embed.is-type-video .wp-block-embed__wrapper{position:relative;aspect-ratio:16/9}
.prose .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.prose p>iframe[src*="youtube.com/embed"]{display:block;width:100%;height:auto;aspect-ratio:16/9;margin:var(--g-md) auto var(--g-lg);border:0}
/* image à la une de l'article : format 16:9 uniforme — les originaux 4:3,
   trop petits pour le recadrage techana-lead, arrivaient en ratio natif et
   l'attribut height HTML les étirait ; object-fit recadre sans déformer */
.art-figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* images du contenu : la hauteur suit la largeur contrainte par la colonne */
.prose img{height:auto}
/* recherche du header en bouton seul (bloc core button-only) : au clic sur
   la loupe, le menu s'efface et laisse toute la ligne au champ de recherche ;
   au clic extérieur (ou Échap) le champ se referme — comportement natif du
   bloc — et le menu réapparaît. Le menu au repos tient ainsi sur une ligne */
.masthead-in .wp-block-search,.stickybar-in .wp-block-search{width:44px;height:44px;flex:none;border:0;box-shadow:none}
.masthead-in .wp-block-search .wp-block-search__inside-wrapper,
.stickybar-in .wp-block-search .wp-block-search__inside-wrapper{background:var(--paper);border:1px solid var(--border)}
/* état déployé : le menu s'efface… */
.masthead-in:has(.wp-block-search:not(.wp-block-search__searchfield-hidden)) .mainnav{display:none}
.stickybar-in:has(.wp-block-search:not(.wp-block-search__searchfield-hidden)) nav{display:none}
/* …et la recherche occupe la ligne entière */
.masthead-in .wp-block-search:not(.wp-block-search__searchfield-hidden),
.stickybar-in .wp-block-search:not(.wp-block-search__searchfield-hidden){width:auto;flex:1;margin-left:auto}
.masthead-in .wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper,
.stickybar-in .wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper{display:flex;width:100%;max-width:none}
.masthead-in .wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input,
.stickybar-in .wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input{flex:1;width:auto}
/* le liseré focus du design (.search:focus-within) vit sur le cadre du champ */
.masthead-in .wp-block-search:focus-within .wp-block-search__inside-wrapper,
.stickybar-in .wp-block-search:focus-within .wp-block-search__inside-wrapper{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.masthead-in .wp-block-search .wp-block-search__button,
.stickybar-in .wp-block-search .wp-block-search__button{min-height:42px;min-width:42px;display:grid;place-items:center;margin:0;padding:0}
/* le menu principal ne passe jamais sur deux lignes */
.mainnav,.mainnav .wp-block-navigation__container{flex-wrap:nowrap}

/* ─── images rendues côté serveur ────────────────────────────────────────
   `img{max-width:100%}` seul écrase les images en hauteur : la largeur est
   contrainte par la grille, mais la hauteur reste celle de l'attribut HTML.
   Partout où une vignette carrée est attendue, on impose le carré ET le
   recadrage — l'image est rognée, jamais déformée. */
.u-side img{width:64px;height:64px;aspect-ratio:1/1;object-fit:cover}
.authorbox .avatar,.authorhead .avatar{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}

/* Portrait de repli : initiales sur la teinte de rubrique, même gabarit que
   l'image — un rédacteur sans photo garde une identité visuelle. */
.avatar-initiales{display:grid;place-items:center;width:100%;aspect-ratio:1/1;
  container-type:inline-size;
  background:var(--cat,var(--accent));color:var(--paper);
  font-family:var(--font-display);font-weight:700;letter-spacing:0.02em;
  line-height:1;text-transform:uppercase}
/* L'initiale se règle sur la pastille, pas sur la fenêtre : le même clamp
   donnait 30px aussi bien dans les 72px de la fin d'article que dans les
   140px de la page auteur, où la lettre se perdait au milieu du carré.
   La taille est portée par la lettre elle-même, pas par la pastille :
   container-type fait d'un élément le conteneur de ses DESCENDANTS, jamais
   de lui-même — un cqw posé ici se résoudrait sur la fenêtre.
   42cqw redonne exactement 30px dans une pastille de 72px : aucune
   régression là où la proportion était déjà juste. */
.avatar-initiales>span{font-size:clamp(20px,3vw,30px)}
@supports (font-size:1cqw){.avatar-initiales>span{font-size:42cqw}}

/* ─── formulaire de contact ──────────────────────────────────────────────── */
.contact-form{max-width:68ch;margin-top:var(--g-lg)}
.contact-form .champ{margin-bottom:var(--g-md)}
.contact-form label{display:block;font-family:var(--font-mono);font-size:12px;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.contact-form :where(input[type=text],input[type=email],textarea){width:100%;
  padding:11px 12px;border:1px solid var(--border);background:var(--paper);
  color:var(--fg);font:inherit;border-radius:0}
.contact-form :where(input,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.contact-form textarea{resize:vertical;min-height:160px}
.contact-form .champ-case label{display:flex;gap:9px;align-items:flex-start;
  font-family:inherit;font-size:14px;line-height:1.5;text-transform:none;
  letter-spacing:normal;color:var(--muted)}
.contact-form .champ-case input{margin-top:3px;flex:none}
.contact-form .btn{font-family:var(--font-display);font-weight:600;font-size:15px;
  letter-spacing:0.01em;padding:12px 22px;border:0;background:var(--accent);
  color:var(--paper);cursor:pointer}
.contact-form .btn:hover{background:var(--fg)}
/* Le leurre doit rester dans le DOM pour être rempli par un robot, et invisible
   pour tout le monde — y compris des lecteurs d'écran. */
.champ-leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-retour{padding:12px 14px;margin-bottom:var(--g-md);font-size:15px;
  border-left:3px solid var(--accent);background:var(--surface)}
.form-erreur{border-left-color:#b3261e}

/* chapô sans texte : le paragraphe vide laisserait sa marge sous le titre */
.chapo:empty,.lead:empty{display:none}

/* ─── barre d'administration ─────────────────────────────────────────────
   Connecté, WordPress pose une barre fixe de 32 px (46 px sous 783 px) au
   z-index 99999 : tout élément du thème calé à `top:0` passe derrière et
   devient illisible. Chaque élément fixe du thème se décale d'autant.
   Sous 601 px, WordPress repasse sa barre en `absolute` : elle défile avec la
   page, plus rien à compenser. */
body.admin-bar .stickybar{top:32px}
body.admin-bar .skip{top:32px}
@media (max-width:782px){
  body.admin-bar .stickybar,body.admin-bar .skip{top:46px}
  body.admin-bar .mobilemenu{top:46px}
}
@media (max-width:600px){
  body.admin-bar .stickybar,body.admin-bar .skip{top:0}
  body.admin-bar .mobilemenu{top:0}
}
/* la latérale collante se cale sur le bas de l'écran : la barre ne la gêne pas,
   mais le sommaire d'article, lui, est calé par le haut */
body.admin-bar .sticky-toc{top:102px}
@media (max-width:600px){body.admin-bar .sticky-toc{top:70px}}