/* Nella — blog de la vitrine (/{locale}/blog). Chargé par les vues site/blog/* après site.css.
   Préfixe « b- ». Mêmes jetons (nella.css), mêmes polices : Source Serif 4 pour les titres et le
   texte des articles, Geist pour l'interface. Propriétés logiques : l'arabe se retourne seul.
   Clair et sombre suivent les jetons ; aucune couleur codée en dur hors des aplats « nuit ». */

.s-site{
  --b-measure:690px;
  --b-radius:22px;
}

/* lien « Blog » de l'en-tête sur un article ou une catégorie (section courante) */
.s-nav-link[aria-current="true"]{color:var(--ink)}
.s-nav-link[aria-current="true"]::after{content:"";position:absolute;inset-inline-start:50%;bottom:3px;width:16px;height:2px;margin-inline-start:-8px;border-radius:2px;background:var(--accent)}

/* flèche « précédent » : l'icône « arrow » retournée, dans les deux sens d'écriture */
.s-ico.b-flip{transform:scaleX(calc(-1 * var(--s-dir)))}
.s-link:hover .s-ico.b-flip{transform:translateX(calc(-3px * var(--s-dir))) scaleX(calc(-1 * var(--s-dir)))}

/* ---------------------------------------------------------------- ouverture de la liste */
.b-hero{padding-bottom:clamp(28px,4vw,44px)}
.b-hero .s-lead{margin-top:22px}
.b-hero-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:clamp(28px,4vw,40px);padding-top:22px;border-top:1px solid var(--line)}
.b-filter ul{display:flex;flex-wrap:wrap;gap:8px}
.b-filter a{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap;transition:border-color .2s,background-color .2s,color .2s}
.b-filter a:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.b-filter a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.b-rss{display:inline-flex;align-items:center;gap:7px;font:500 13px/1 var(--font-mono);letter-spacing:.02em;color:var(--muted);text-decoration:none;padding:8px 2px}
.b-rss .s-ico{color:var(--spark)}
.b-rss:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* fil d'Ariane */
.b-crumbs{margin-bottom:22px}
.b-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.b-crumbs li{display:inline-flex;align-items:center;font-size:14px;color:var(--muted)}
.b-crumbs li+li::before{content:"/";margin-inline:10px;color:color-mix(in srgb,var(--muted) 60%,transparent)}
.b-crumbs a{color:var(--muted);text-decoration:none;font-weight:500}
.b-crumbs a:hover{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.b-crumbs [aria-current]{color:var(--ink);font-weight:500}

/* ---------------------------------------------------------------- cartes */
.b-card{position:relative;display:grid;gap:18px;align-content:start;height:100%}
.b-card-media{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:var(--b-radius);background:var(--s-night);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);isolation:isolate}
.b-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--s-ease)}
.b-card:hover .b-card-media img{transform:scale(1.035)}
.b-card-ph{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(60% 80% at 75% 20%,rgba(61,75,255,.55),transparent 70%),var(--s-night)}
.b-card-ph svg{width:30%;height:auto}
.b-card-ph path{fill:none;stroke:rgba(201,205,255,.55);stroke-width:1.4;stroke-linecap:round}
.b-card-ph circle{fill:var(--spark)}
.b-card-body{display:grid;gap:10px;align-content:start}
.b-card-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:22px}
.b-cat{position:relative;z-index:2;font:500 12px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);text-decoration:none}
.b-cat:hover{text-decoration:underline;text-underline-offset:3px}
.b-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:color-mix(in srgb,var(--spark) 13%,var(--surface));color:color-mix(in srgb,var(--spark) 72%,var(--ink));font:600 12px/1 var(--font-body)}
.b-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--spark)}
.b-card-title{font:450 clamp(21px,1.9vw,25px)/1.2 var(--font-display);letter-spacing:-.016em;text-wrap:balance}
.b-card-title a{color:var(--ink);text-decoration:none}
.b-card-title a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--b-radius)}
.b-card-title a:focus-visible{outline:none}
.b-card-title a:focus-visible::after{outline:2px solid var(--accent);outline-offset:6px}
.b-card:hover .b-card-title a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.b-card-excerpt{color:var(--muted);font-size:15.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.b-card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* article à la une */
.b-featured-sec{padding-bottom:clamp(8px,2vw,16px)}
.b-card-featured{gap:24px}
.b-card-featured .b-card-title{font-size:clamp(30px,3.6vw,48px);line-height:1.08;letter-spacing:-.024em}
.b-card-featured .b-card-excerpt{font-size:17.5px;-webkit-line-clamp:4;max-width:52ch}
.b-card-featured .b-card-body{gap:14px}
@media (min-width:900px){
  .b-card-featured{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4.5vw,64px);align-items:center}
  .b-card-featured .b-card-media{border-radius:28px}
  .b-card-featured .b-card-title a::after{border-radius:28px}
}

/* grille */
.b-list-sec{padding-top:clamp(48px,6vw,80px)}
.b-list-h{margin-bottom:clamp(24px,3vw,36px)!important;font:500 12px/1.2 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:14px}
.b-list-h::after{content:"";flex:1;height:1px;background:var(--line)}
.b-grid{display:grid;gap:clamp(40px,4.5vw,56px) clamp(24px,2.6vw,36px)}
@media (min-width:680px){.b-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.b-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* pagination */
.b-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:clamp(48px,6vw,72px);padding-top:24px;border-top:1px solid var(--line)}
.b-pager-pages{display:flex;flex-wrap:wrap;gap:6px}
.b-pager-step,.b-pager-num{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:12px;font-weight:600;font-size:14.5px;text-decoration:none;color:var(--ink)}
.b-pager-step{padding:0 16px;border:1px solid var(--line);background:var(--surface)}
.b-pager-step:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
.b-pager-step.is-disabled{opacity:.42}
.b-pager-num{min-width:42px;padding:0 10px;font-variant-numeric:tabular-nums}
.b-pager-num:hover{background:var(--surface)}
.b-pager-num.is-current{background:var(--ink);color:var(--bg)}
.b-pager-gap{display:inline-flex;align-items:center;height:42px;padding:0 4px;color:var(--muted)}
@media (max-width:560px){
  .b-pager-pages{order:-1;width:100%;justify-content:center}
  .b-pager-step{flex:1}
}

/* liste vide */
.b-empty{display:grid;justify-items:start;gap:12px;max-width:560px;padding:clamp(28px,5vw,48px);border:1px dashed var(--line);border-radius:26px;background:var(--surface)}
.b-empty p{color:var(--muted)}
.b-empty-arch{width:56px;height:56px;margin-bottom:6px}
.b-empty-arch path{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:3 3.2}
.b-empty-arch circle{fill:var(--spark)}

/* ---------------------------------------------------------------- article */
.b-progress{position:fixed;inset-inline:0;top:0;z-index:90;height:3px;pointer-events:none}
.b-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--spark)));transform:scaleX(0);transform-origin:left center}
[dir="rtl"] .b-progress i{transform-origin:right center;background:linear-gradient(-90deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--spark)))}
html:not(.s-js) .b-progress{display:none}

.b-article-head{max-width:calc(880px + 2 * var(--s-gutter));padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(28px,4vw,44px)}
.b-notice{margin:0 0 26px}
.b-title{font:450 clamp(38px,5.6vw,68px)/1.05 var(--font-display);font-optical-sizing:auto;letter-spacing:-.028em;text-wrap:balance}
.b-dek{margin-top:22px;font-size:clamp(18px,1.7vw,21.5px);line-height:1.55;color:var(--muted);max-width:60ch;text-wrap:pretty}
.b-byline{display:flex;align-items:center;gap:14px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.b-avatar{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-weight:700;font-size:17px;overflow:hidden}
.b-avatar .mark{width:44px;height:44px}
.b-byline-text{display:grid;gap:3px;line-height:1.3}
.b-byline-text b{font-weight:600;font-size:15px}
.b-byline-text small{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}

.b-cover{max-width:calc(1200px + 2 * var(--s-gutter));margin:0 auto}
.b-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:clamp(18px,2.4vw,30px);background:var(--s-night);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);box-shadow:0 1px 2px rgba(11,13,26,.05),0 40px 80px -48px rgba(11,13,26,.45)}

.b-article-grid{display:grid;gap:36px;padding-top:clamp(40px,6vw,72px)}
@media (min-width:1120px){
  .b-article-grid{grid-template-columns:minmax(0,1fr) minmax(0,var(--b-measure)) minmax(0,1fr);gap:0 clamp(40px,4vw,64px);max-width:calc(1200px + 2 * var(--s-gutter))}
  .b-aside{grid-column:1;grid-row:1;justify-self:end;width:100%;max-width:236px;position:sticky;top:104px;align-self:start;max-height:calc(100vh - 128px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .b-prose{grid-column:2;grid-row:1}
}
@media (max-width:1119px){
  .b-article-grid{max-width:calc(var(--b-measure) + 2 * var(--s-gutter))}
  .b-aside{display:grid;gap:18px}
  .b-aside .b-share{display:none}
  .b-toc{padding:18px 18px 12px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
}
.b-aside-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;font:500 11.5px/1.2 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.b-toc ol{display:grid;gap:1px;counter-reset:b-toc}
.b-toc a{display:block;padding:7px 12px;border-radius:9px;font-size:14px;line-height:1.4;color:var(--muted);text-decoration:none;transition:background-color .15s,color .15s,box-shadow .15s}
.b-toc a:hover{color:var(--ink);background:var(--surface)}
.b-toc a.is-active{color:var(--ink);font-weight:500;background:var(--surface);box-shadow:inset 2px 0 0 var(--accent)}
[dir="rtl"] .b-toc a.is-active{box-shadow:inset -2px 0 0 var(--accent)}
.b-aside .b-share{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.b-share-actions{display:flex;flex-wrap:wrap;gap:8px}
.b-share-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 13.5px/1 var(--font-body);cursor:pointer;transition:border-color .2s,color .2s}
.b-share-btn:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
.b-share-btn.is-done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}

.b-article-foot{max-width:calc(var(--b-measure) + 2 * var(--s-gutter))}
.b-article-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(40px,5vw,56px);padding-top:26px;border-top:1px solid var(--line)}
.b-article-end .b-share{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.b-article-end .b-aside-h{margin:0}

/* ---------------------------------------------------------------- texte de l'article */
.b-prose{min-width:0;font:400 clamp(18px,1.35vw,19.5px)/1.72 var(--font-display);font-optical-sizing:auto;color:color-mix(in srgb,var(--ink) 90%,var(--muted));text-wrap:pretty;overflow-wrap:break-word}
.b-prose>:first-child{margin-top:0}
.b-prose>:last-child{margin-bottom:0}
.b-prose p,.b-prose ul,.b-prose ol,.b-prose blockquote,.b-prose pre,.b-prose .b-table,.b-prose figure{margin:0 0 1.15em}
.b-prose h2,.b-prose h3,.b-prose h4{color:var(--ink);scroll-margin-top:100px;text-wrap:balance}
.b-prose h2{margin:1.9em 0 .6em;font:450 clamp(27px,2.4vw,33px)/1.18 var(--font-display);letter-spacing:-.02em}
.b-prose h3{margin:1.6em 0 .5em;font:600 clamp(19px,1.5vw,21px)/1.35 var(--font-body);letter-spacing:-.012em}
.b-prose h4{margin:1.4em 0 .4em;font:600 17px/1.4 var(--font-body)}
.b-prose a{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent-ink) 45%,transparent);transition:text-decoration-color .15s}
.b-prose a:hover{text-decoration-color:currentColor}
.b-prose strong{color:var(--ink);font-weight:650}
.b-prose ul,.b-prose ol{padding-inline-start:1.35em}
.b-prose li{margin:.4em 0;padding-inline-start:.2em}
.b-prose li::marker{color:var(--accent)}
.b-prose ol>li::marker{font:600 .85em var(--font-body);color:var(--accent-ink)}
.b-prose li>ul,.b-prose li>ol{margin:.4em 0 0}
.b-prose blockquote{margin-inline:0;padding-block:.2em;padding-inline:1.1em 0;border-inline-start:3px solid var(--accent);color:var(--ink);font-style:italic}
.b-prose blockquote p:last-child{margin-bottom:0}
.b-prose hr{border:0;margin:2.4em 0;text-align:center;height:auto}
.b-prose hr::before{content:"· · ·";color:var(--muted);letter-spacing:.6em;font:500 18px/1 var(--font-body)}
.b-prose code{font:500 .84em/1.5 var(--font-mono);padding:.12em .38em;border-radius:6px;background:var(--surface-2);color:var(--ink);overflow-wrap:anywhere}
.b-prose pre{direction:ltr;text-align:left;padding:18px 20px;border-radius:16px;background:#0E1124;color:#DDE1F2;overflow-x:auto;font:13.5px/1.7 var(--font-mono);border:1px solid var(--line)}
.b-prose pre code{padding:0;background:none;color:inherit;font-size:inherit;overflow-wrap:normal}
.b-prose img{display:block;max-width:100%;height:auto;margin:1.6em auto;border-radius:16px}
.b-prose .b-table{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.b-prose table{width:100%;border-collapse:collapse;font:15px/1.5 var(--font-body)}
.b-prose th,.b-prose td{padding:12px 16px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
.b-prose thead th{font:500 11.5px/1.3 var(--font-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);background:var(--surface-2)}
.b-prose tbody tr:last-child>*{border-bottom:0}
.b-prose input[type="checkbox"]{accent-color:var(--accent);margin-inline-end:.4em}

/* articles liés */
.b-related{border-top:1px solid var(--line);margin-top:clamp(48px,7vw,96px);background:color-mix(in srgb,var(--surface) 55%,var(--bg))}
.b-related-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(28px,4vw,44px)}

/* ---------------------------------------------------------------- arabe, allemand */
.s-site:lang(ar) .b-title,.s-site:lang(ar) .b-card-title,.s-site:lang(ar) .b-prose,.s-site:lang(ar) .b-prose h2,.b-prose:lang(ar),.b-title:lang(ar){font-family:"Source Serif 4","Noto Naskh Arabic","Geeza Pro","Times New Roman",serif;line-height:1.5}
.s-site:lang(ar) .b-title{line-height:1.3}
.s-site:lang(ar) .b-card-title{line-height:1.45}
.s-site:lang(ar) .b-prose blockquote{font-style:normal}
.s-site:lang(ar) .b-cat,.s-site:lang(ar) .b-aside-h,.s-site:lang(ar) .b-list-h,.s-site:lang(ar) .b-prose thead th{text-transform:none;letter-spacing:0}
.s-site:lang(de) .b-prose,.s-site:lang(de) .b-card-title,.s-site:lang(de) .b-title{hyphens:auto}

/* ---------------------------------------------------------------- mouvement réduit, impression */
@media (prefers-reduced-motion: reduce){
  .b-card:hover .b-card-media img{transform:none}
  .b-progress{display:none}
}
@media print{
  .b-progress,.b-aside,.b-article-foot,.b-related,.b-share{display:none!important}
  .b-article-grid{display:block;padding-top:24px}
  .b-prose{font-size:12pt;color:#000}
  .b-cover img{box-shadow:none}
}