/* =====================================================================
   Le blog (/blog, /blog/<slug>), genere au deploiement depuis Sanity par
   tools/blog/build.js. La mise en page du blog d'Utexo (accueil : intro et
   carrousel des articles a la une, puis tous les articles avec un filtre
   par categorie ; article : une colonne laterale collante, retour, auteur,
   sommaire, partage, puis le texte), redite dans la grammaire du site :
   des cases cernees a 0,5, a angles droits, a 8 l'une de l'autre, les
   titres en deux voix, les etiquettes en Geist (pas de chasse fixe, pas de
   capitales), et seulement des roles de tokens.css : aucune couleur en dur,
   la nuit suit d'elle-meme. Les images Sanity gardent leurs couleurs la
   nuit, dans leur case .media cernee (DESIGN.md).
   ===================================================================== */

/* ---- commun ---------------------------------------------------------- */
.bl-meta{display:block;font-size:var(--t-small);line-height:24px;letter-spacing:0;color:var(--quote)}
.bl-meta time,.bl-meta span{white-space:nowrap}
.bl-label{font-size:var(--t-small);line-height:24px;letter-spacing:0;color:var(--quote)}
.bl-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bl-feat [hidden],.bl-share [hidden],.bl-ctrl[hidden],.bl-filters[hidden],.bl-more[hidden],.bl-card[hidden]{display:none}

/* ---- l'accueil du blog : l'intro a gauche, le carrousel a droite ------- */
.bl-hero{align-items:stretch}
.bl-intro{justify-content:space-between}
.bl-intro .cell-p a{color:var(--ink-2);text-decoration:underline;text-decoration-thickness:var(--bw);text-underline-offset:3px}

/* le carrousel des articles a la une : toutes les diapositives sont dans le
   HTML. Avec la classe .js (posee en tete de page, avant le premier rendu)
   elles se superposent, la premiere visible : rien ne saute quand blog.js
   arrive, puis elles se relaient en fondu. Sans script, elles s'empilent.
   Chaque article a la une est aussi dans la grille dessous. */
.bl-feat{display:flex;flex-direction:column;min-width:0;padding:var(--s-16);background-color:var(--sec)}
.bl-slides{display:grid}
.bl-slide{display:flex;flex-direction:column;gap:var(--s-24);min-width:0}
.bl-slide + .bl-slide{margin-top:var(--s-32)}
.js .bl-slides>.bl-slide{grid-area:1 / 1;margin:0}
.js .bl-slides>.bl-slide:not(.is-on){opacity:0;visibility:hidden}
.bl-feat.is-live .bl-slide{transition:opacity .4s ease,visibility 0s linear .4s}
.bl-feat.is-live .bl-slide.is-on{transition:opacity .4s ease}
.bl-slide-a{display:block}
.bl-slide-img img,.bl-card-img img{transition:transform .5s var(--ease-media)}
.bl-slide-a:hover img{transform:scale(1.02)}
.bl-slide-body{display:flex;flex-direction:column;gap:var(--s-12);padding:0 var(--s-16)}
.bl-slide-t{max-width:22em;font-weight:400;font-size:var(--t-statement);line-height:1.2667;letter-spacing:var(--tr-text);color:var(--ink-2);text-wrap:balance}
.bl-slide-t a:hover{text-decoration:underline;text-decoration-thickness:var(--bw);text-underline-offset:4px}
.bl-slide-body .cell-p{max-width:40em}
.bl-ctrl{display:flex;justify-content:space-between;align-items:center;gap:var(--s-16);margin-top:auto;padding:var(--s-24) 0 0 var(--s-8)}
.bl-dots{display:flex;align-items:center}
/* un point carre par article ; celui qui est montre devient une jauge qui se
   remplit pendant que l'article reste a l'ecran (6 s) ; au survol, au focus
   ou sur pause, la jauge s'arrete */
.bl-dot{display:inline-flex;align-items:center;height:48px;padding:0 var(--s-8);color:var(--grey)}
.bl-dot span{position:relative;display:block;width:8px;height:8px;overflow:hidden;background:currentColor;transition:width .3s var(--ease)}
.bl-dot:hover{color:var(--ink-2)}
.bl-dot.is-on span{width:64px;height:2px;background:var(--line)}
.bl-dot.is-on span::after{content:"";position:absolute;inset:0 auto 0 0;width:0;background:var(--ink-2);animation:bl-fill 6s linear forwards}
.bl-feat.is-paused .bl-dot.is-on span::after{animation-play-state:paused}
@keyframes bl-fill{to{width:100%}}
.bl-arrows{display:flex;gap:var(--s-8)}
.bl-feat [data-pause] .icon + .icon{display:none}
.bl-feat.is-stopped [data-pause] .icon:first-child{display:none}
.bl-feat.is-stopped [data-pause] .icon + .icon{display:inline-block}

/* ---- tous les articles : le filtre a gauche, les cartes a droite ------- */
.bl-list{align-items:stretch}
.bl-side{justify-content:flex-start}
.bl-side-in{position:sticky;top:var(--stick);display:flex;flex-direction:column;gap:var(--s-16)}
.bl-filters{display:flex;flex-direction:column;border-bottom:var(--bw) solid var(--line)}
.bl-filter{display:flex;justify-content:space-between;align-items:center;gap:var(--s-16);min-height:48px;padding:var(--s-12) 0;border-top:var(--bw) solid var(--line);
  font-size:var(--t-body);line-height:1.4;letter-spacing:var(--tr-text);color:var(--quote);text-align:left;transition:color var(--d-hover)}
.bl-filter span{color:var(--grey);font-variant-numeric:tabular-nums}
.bl-filter:hover,.bl-filter[aria-pressed="true"]{color:var(--ink-2)}
.bl-filter[aria-pressed="true"] span{color:var(--ink-2)}
.bl-more{display:flex;justify-content:center;padding-top:var(--s-24)}

/* la carte : la couverture 16:9, puis la date, le titre, le chapeau ; sur la
   teinte des cartes (--cell), allumee au survol (.hatch) */
.box.bl-card{padding:var(--s-8);background-color:var(--cell)}
.bl-card-a{display:flex;flex-direction:column;height:100%}
.bl-card-a:focus-visible{outline-offset:-4px}
.bl-card-body{display:flex;flex-direction:column;gap:var(--s-8);padding:var(--s-16) var(--s-12) var(--s-12)}
.bl-card-t{text-wrap:pretty}
.bl-card-p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover){.bl-card:hover .bl-card-img img{transform:scale(1.03)}}
.bl-card.is-on .bl-card-img img{transform:scale(1.03)}

/* ---- un article --------------------------------------------------------
   Le texte d'abord dans le HTML, la colonne laterale a gauche a l'ecran
   (grid-template-areas) ; les deux sont des cases de la colonne, aux
   proportions de la preuve (353 / 910). */
.bl-crumbs{padding:var(--s-56) 0 var(--s-24) var(--s-32);font-size:var(--t-small);line-height:24px;color:var(--quote)}
.bl-crumbs ol{display:flex;flex-wrap:wrap;gap:0 var(--s-8)}
.bl-crumbs li + li::before{content:"/";margin-right:var(--s-8);color:var(--warm)}
.bl-crumbs a{color:var(--ink-2)}
.bl-crumbs a:hover{text-decoration:underline;text-decoration-thickness:var(--bw);text-underline-offset:3px}
.bl-layout{display:grid;grid-template-columns:minmax(0,353fr) minmax(0,910fr);grid-template-areas:"aside main";gap:var(--s-8);align-items:stretch}
.bl-main{grid-area:main;min-width:0;padding:var(--s-32) var(--s-32) var(--s-48)}
.bl-aside{grid-area:aside;justify-content:flex-start}
.bl-aside-in{position:sticky;top:var(--stick);display:flex;flex-direction:column;gap:var(--s-32)}
.bl-back{display:inline-flex;align-items:center;gap:var(--s-8);align-self:flex-start;min-height:24px;font-size:var(--t-body);color:var(--ink-2);transition:opacity var(--d-hover)}
.bl-back:hover{opacity:.55}
.bl-by{display:flex;align-items:center;gap:var(--s-12);font-size:var(--t-small);line-height:24px;color:var(--ink-2)}
.bl-by span:not(.bl-face){color:var(--quote)}
.bl-by a:hover{text-decoration:underline;text-decoration-thickness:var(--bw);text-underline-offset:3px}
.bl-face{flex:none;display:grid;place-items:center;width:48px;height:48px;overflow:hidden;border-radius:50%;background:var(--cell);border:var(--bw) solid var(--line);color:var(--quote)}
.bl-face img{width:100%;height:100%;object-fit:cover}
.bl-toc ol{margin-top:var(--s-8);border-left:var(--bw) solid var(--line)}
.bl-toc a{display:block;margin-left:-1px;padding:var(--s-8) 0 var(--s-8) var(--s-16);border-left:2px solid transparent;font-size:var(--t-small);line-height:1.4;color:var(--quote);transition:color var(--d-hover),border-color var(--d-hover)}
.bl-toc a:hover{color:var(--ink-2)}
.bl-toc a[aria-current]{color:var(--ink-2);border-left-color:var(--ink-2)}
.bl-share-row{display:flex;flex-wrap:wrap;gap:var(--s-8);margin-top:var(--s-8)}
.bl-share-row button .icon + .icon{display:none}
.bl-share-row .is-copied .icon:first-child{display:none}
.bl-share-row .is-copied .icon + .icon{display:inline-block}

.bl-head{display:flex;flex-direction:column;gap:var(--s-16)}
.bl-head .h2{padding:0;max-width:22em;text-wrap:balance}
.bl-lede{max-width:34em;font-size:var(--t-lead);line-height:1.4;letter-spacing:var(--tr-text);color:var(--quote)}
.bl-cover{margin-top:var(--s-32)}
.bl-tldr{gap:var(--s-16);justify-content:flex-start;margin-top:var(--s-32);background-color:var(--cell)}
.bl-tldr .rows{max-width:40em}

/* le texte : body-l, interligne de lecture longue (1,6), mesure de 40 em ;
   le gras et l'italique ne changent ni la graisse ni la pente (DESIGN.md :
   jamais de gras, jamais d'italique), ils passent a l'encre */
.bl-prose{max-width:40em;margin-top:var(--s-48);font-size:var(--t-body-l);line-height:1.6;letter-spacing:var(--tr-text);color:var(--quote)}
.bl-prose>*+*{margin-top:1em}
.bl-prose h2,.bl-faq h2,.bl-sources h2{font-weight:400;font-size:var(--t-statement);line-height:1.2667;letter-spacing:var(--tr-text);color:var(--ink-2);scroll-margin-top:var(--stick);text-wrap:balance}
.bl-prose h2{margin-top:2em}
.bl-prose h3{margin-top:1.6em;font-weight:400;font-size:var(--t-lead);line-height:1.29;letter-spacing:var(--tr-display);color:var(--ink-2)}
.bl-prose h4{margin-top:1.4em;font-weight:400;font-size:var(--t-body-l);line-height:1.3;color:var(--ink-2)}
.bl-prose h2+*,.bl-prose h3+*,.bl-prose h4+*{margin-top:.6em}
.bl-prose strong,.bl-prose em,.bl-prose b,.bl-prose i{font-weight:400;font-style:normal;color:var(--ink-2)}
.bl-prose a,.bl-sources a,.bl-links a{color:var(--ink-2);text-decoration:underline;text-decoration-thickness:var(--bw);text-underline-offset:3px;transition:color var(--d-hover)}
.bl-prose a:hover,.bl-sources a:hover,.bl-links a:hover{color:var(--warm)}
.bl-prose code,.bl-code{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.bl-prose :not(pre)>code{padding:0 .25em;font-size:.88em;background:var(--cell);border:var(--bw) solid var(--line);color:var(--ink-2)}
.bl-prose blockquote{margin:1.6em 0;padding-left:var(--s-24);border-left:var(--bw) solid var(--line);font-size:var(--t-lead);line-height:1.4;letter-spacing:var(--tr-text);color:var(--ink-2)}
/* les listes : des marques carrees (le vocabulaire des plans), des numeros en
   Geist */
.bl-prose ul,.bl-prose ol{display:flex;flex-direction:column;gap:.4em}
.bl-prose li{position:relative;padding-left:1.6em}
.bl-prose li>ul,.bl-prose li>ol{margin-top:.4em}
.bl-prose ul>li::before{content:"";position:absolute;left:.3em;top:calc(.8em - 3px);width:6px;height:6px;background:var(--ink-2)}
.bl-prose ol{counter-reset:bl}
.bl-prose ol>li{counter-increment:bl}
.bl-prose ol>li::before{content:counter(bl, decimal-leading-zero);position:absolute;left:0;font-size:var(--t-body);font-variant-numeric:tabular-nums;color:var(--warm)}
.bl-fig{margin:2em 0}
.bl-cap{margin-top:var(--s-12);font-size:var(--t-small);line-height:24px;color:var(--quote)}
.bl-table{margin:2em 0;overflow-x:auto;border:var(--bw) solid var(--line)}
.bl-table table{width:100%;border-collapse:collapse;font-size:var(--t-body);line-height:1.5}
.bl-table caption{padding:var(--s-12) var(--s-16);caption-side:top;text-align:left;font-size:var(--t-small);color:var(--quote);border-bottom:var(--bw) solid var(--line)}
.bl-table th,.bl-table td{padding:var(--s-12) var(--s-16);text-align:left;vertical-align:top;border-bottom:var(--bw) solid var(--line)}
.bl-table tr:last-child td{border-bottom:0}
.bl-table th{font-weight:400;color:var(--ink-2);background:var(--cell)}
.bl-code{display:block;margin:2em 0;padding:var(--s-16) var(--s-20);overflow-x:auto;white-space:pre;font-size:var(--t-small);line-height:1.6;color:var(--ink-2);background:var(--cell);border:var(--bw) solid var(--line)}
.bl-codefig{margin:2em 0}
.bl-codefig .bl-code{margin:0}
.bl-codefig figcaption{margin-bottom:var(--s-8);font-size:var(--t-small);color:var(--quote)}

/* la fin de l'article : questions ouvertes (pas de depliant), sources,
   l'auteur */
.bl-faq{max-width:46em;margin-top:var(--s-56)}
.bl-faq .qa-list{margin-top:var(--s-24)}
.bl-sources{max-width:40em;margin-top:var(--s-56)}
.bl-sources ol{margin-top:var(--s-16);padding-left:1.6em;list-style:decimal;font-size:var(--t-body);line-height:1.625;color:var(--quote)}
.bl-sources li+li{margin-top:var(--s-8)}
.bl-author{gap:var(--s-16);justify-content:flex-start;max-width:46em;margin-top:var(--s-56);background-color:var(--cell)}
.bl-author .cell-p{max-width:40em}

/* ---- paliers ---------------------------------------------------------- */
@media (max-width:999px){
  .bl-feat{padding:var(--s-8)}
  .bl-slide-body{padding:0 var(--s-8)}
  .bl-ctrl{padding-left:0}
  .bl-side-in{position:static}
  .bl-filters{flex-direction:row;flex-wrap:wrap;gap:var(--s-8);border:0}
  .bl-filter{min-height:48px;padding:0 var(--s-16);border:1px solid var(--line-bd);border-radius:var(--r-btn-line);background:var(--line-bg)}
  .bl-filter[aria-pressed="true"]{border-color:var(--ink-2)}
  .bl-crumbs{padding:var(--s-48) 0 var(--s-20)}
  .bl-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "aside"}
  .bl-main{padding:var(--s-20) var(--s-20) var(--s-32)}
  .bl-aside-in{position:static}
  .bl-toc{display:none}
  .bl-prose{margin-top:var(--s-32)}
  .bl-faq,.bl-sources,.bl-author{margin-top:var(--s-48)}
}
@media (max-width:599px){
  .bl-arrows [data-pause]{order:1}
  .bl-dot.is-on span{width:40px}
}

/* ---- animations reduites : pas de rotation automatique, ni zoom, ni fondu */
@media (prefers-reduced-motion:reduce){
  .bl-dot.is-on span::after{animation:none;width:100%}
  .bl-feat [data-pause]{display:none}
  .bl-feat.is-live .bl-slide,.bl-feat.is-live .bl-slide.is-on{transition:none}
  .bl-slide-img img,.bl-card-img img,.bl-dot span{transition:none}
  .bl-slide-a:hover img,.bl-card:hover .bl-card-img img,.bl-card.is-on .bl-card-img img{transform:none}
}

/* ---- reprise 2026-10-23 (apercu local) ---------------------------------
   le titre respire (1,15), le chapo court ne se confond plus avec le texte,
   pas de mot seul en fin de paragraphe, des lignes seulement entre les
   points cles, et sous 1000 px plus de case dans la case */
.bl-title{line-height:1.15}
.bl-prose p,.bl-prose li,.bl-lede,.bl-tldr li,.bl-faq .cell-p,.bl-faq .qa-t,.bl-sources li,.bl-author .cell-p,.bl-table td{text-wrap:pretty}
.bl-tldr .rows{border-bottom:0}
.bl-tldr .rows li:first-child{border-top:0;padding-top:0}
.bl-tldr .rows li:last-child{padding-bottom:0}
/* la colonne laterale sur le meme fond que les points cles (owner, 23/10/2026) */
@media (min-width:1000px){.bl-aside,.bl-intro{background-color:var(--cell)}}   /* the index's left cell in the article panel's tone */
@media (max-width:999px){
  .bl-layout{gap:0}
  .bl-main,.bl-aside{border:0;background:none}
  .bl-main{padding:var(--s-8) 0 var(--s-32)}
  .bl-aside{padding:var(--s-24) 0 0;border-top:var(--bw) solid var(--line)}
}

/* ---- type scale taken from Plasma's blog (owner's reference, 2026-10-23) -------------
   index: "Blog" 48/56 with the subtitle 16/22 right under it, 16px apart, in one cell;
   article: meta 14/18, 15px, title 48/56, 64px, body 18/28 with 20px between paragraphs,
   section titles 28/32 (weight 400: the brand never sets bold) with 48px above and 20px below */
.bl-top{padding-top:var(--s-32)}
.bl-intro-head{display:flex;flex-direction:column;gap:16px}
.bl-h1{font-weight:400;font-size:48px;line-height:56px;letter-spacing:-.01em;color:var(--ink-2)}
.bl-sub{max-width:300px;font-size:16px;line-height:22px;letter-spacing:0;color:var(--quote);text-wrap:balance}
.bl-head{gap:0}
.bl-head .bl-meta{font-size:14px;line-height:18px}
.bl-head .h2.bl-title{margin-top:15px;font-size:48px;line-height:56px;letter-spacing:-.01em}
.bl-head .bl-lede{margin-top:16px;font-size:18px;line-height:28px;letter-spacing:0}
.bl-prose{margin-top:64px;font-size:18px;line-height:28px;letter-spacing:0;color:var(--ink-2)}
.bl-prose>*+*{margin-top:20px}
.bl-prose h2{margin-top:48px;font-weight:400;font-size:28px;line-height:32px;letter-spacing:-.01em}
.bl-prose h3{margin-top:40px;font-weight:400;font-size:22px;line-height:28px;letter-spacing:-.01em}
.bl-prose h2+*,.bl-prose h3+*,.bl-prose h4+*{margin-top:20px}
@media (max-width:999px){
  .bl-h1,.bl-head .h2.bl-title{font-size:36px;line-height:42px}
  .bl-prose{margin-top:40px;font-size:17px;line-height:27px}
  .bl-prose h2{margin-top:40px;font-size:24px;line-height:28px}
}
/* RSS: lucide's rss drawing with lucide-animated's wifi motion (waves out, then back one by one) */
.bl-intro .cell-p a.bl-rss{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:-8px;color:var(--grey);text-decoration:none;transition:color var(--d-hover)}
.bl-intro .cell-p a.bl-rss:hover,.bl-intro .cell-p a.bl-rss:focus-visible{color:var(--ink-2)}
.bl-rss-i{width:20px;height:20px;stroke-width:2}
.bl-rss:hover .w1,.bl-rss:focus-visible .w1{animation:bl-wave .62s cubic-bezier(.34,1.56,.64,1) .1s both}
.bl-rss:hover .w2,.bl-rss:focus-visible .w2{animation:bl-wave .62s cubic-bezier(.34,1.56,.64,1) .2s both}
@keyframes bl-wave{0%{opacity:1}24%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.bl-rss .w1,.bl-rss .w2{animation:none!important}}