/* =============================================================================
   blog.css — la feuille du blog de la vitrine.

   Elle ne charge QUE sur les pages du blog (`$mcPage['feuilles']`) et s'appuie
   sur les tokens de `inc/entete.php` (--txt, --muted, --c1, --line…) : elle ne
   redéfinit aucune couleur de la marque.

   RIEN N'EST FIXÉ EN LARGEUR. `body` porte `overflow-x:hidden` : ce qui
   dépasse n'est pas atteignable en glissant, il est TRONQUÉ (C-173). Les
   largeurs sont des `max-width` ou des `min(…, 100vw - marge)`.

   LE SOMMAIRE EST DANS LA COLONNE DU TEXTE, PAS À CÔTÉ. Une colonne latérale
   collante empêcherait les images « larges » et « pleine largeur » de déborder
   symétriquement de la colonne : elles passeraient sous le sommaire.
   ============================================================================= */

/* ── Thème : CLAIR par défaut (servi par l'en-tête), sombre au choix ──────────
   La bascule est posée par `inc/entete.php` sur les seules pages qui la
   demandent (`$mcPage['bascule_theme']`), et TOUT le thème clair vit ici :
   cette feuille ne charge que sur le blog, il ne peut donc pas fuir ailleurs.

   LES COULEURS PROPRES AU BLOG PASSENT PAR DES TOKENS `--blog-*` : elles
   étaient écrites en dur (#cbd5e1, #fff…), et chacune aurait demandé sa règle
   de retouche. Les valeurs sombres ci-dessous sont celles d'avant, à l'octet.

   AUCUNE COULEUR DE LA VITRINE NE TIENT SUR DU BLANC : le cyan `#22d3ee` y
   donne 1,81:1. Les teintes claires en sont DÉRIVÉES — cyan 700, indigo 600,
   fuchsia 700 —, si bien que le dégradé de la marque reste reconnaissable et
   que les liens du texte (`--c1`) tiennent 5,4:1. */
:root{
    --blog-txt-fort:#fff;
    --blog-txt-2:#cbd5e1;
    --blog-txt-corps:#d5deea;
    --blog-lien-survol:#67e8f9;
    --blog-voile:rgba(255,255,255,.03);
    --blog-voile-fort:rgba(255,255,255,.08);
    --blog-ombre:rgba(0,0,0,.35);
    --blog-alerte:#fde68a;
}
/* `:root[data-theme]` pèse (0,2,0) : il l'emporte sur le `:root` des tokens
   de l'en-tête quel que soit l'ordre des feuilles — celle-ci est liée AVANT
   le `<style>` en ligne. */
:root[data-theme="light"]{
    color-scheme:light;
    --bg:#f5f7fb;
    --bg-2:#ffffff;
    --card:rgba(255,255,255,.9);
    --card-solid:#ffffff;
    --line:rgba(15,23,42,.10);
    --line-strong:rgba(15,23,42,.18);
    --txt:#0f172a;
    --muted:#475569;
    --c1:#0e7490;
    --c2:#4f46e5;
    --c3:#a21caf;
    --ok:#047857;
    --bad:#be123c;
    --blog-txt-fort:#0f172a;
    --blog-txt-2:#334155;
    --blog-txt-corps:#1e293b;
    --blog-lien-survol:#155e75;
    --blog-voile:rgba(15,23,42,.03);
    --blog-voile-fort:rgba(15,23,42,.06);
    --blog-ombre:rgba(15,23,42,.12);
    --blog-alerte:#92400e;
}

/* Le bouton : une icône, celle du thème OÙ L'ON VA. Son nom accessible est
   posé par le script de l'en-tête. */
.theme-bascule{ display:inline-grid; place-items:center; width:40px; height:40px; flex:none; padding:0; border-radius:999px; border:1px solid var(--line-strong); background:var(--blog-voile); color:var(--blog-txt-2); cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.theme-bascule:hover{ background:var(--blog-voile-fort); color:var(--blog-txt-fort); }
.theme-bascule:focus-visible{ outline:2px solid var(--c1); outline-offset:2px; }
.theme-bascule__lune{ display:none; }
:root[data-theme="light"] .theme-bascule__soleil{ display:none; }
:root[data-theme="light"] .theme-bascule__lune{ display:block; }
/* Trois enfants dans la barre, plus deux : le menu se range contre le bouton.
   Menu replié, il sort du flux (il devient un panneau) et le bouton se place
   AVANT le hamburger, pour rester visible menu fermé. Le SEUIL dépend de la
   langue et se calcule dans `inc/entete.php` (`$mcRepliMenu`) : les règles du
   menu replié y vivent, plus ici. */
.nav .links{ margin-left:auto; }

/* Les deux logos : `.logo-clair` pèse (0,1,0), plus que `img{display:block}`
   de l'en-tête ; la règle claire pèse (0,3,0). Vérifié thème par thème — un
   logo affiché en double est un défaut que ce dépôt a déjà servi (voir
   « La spécificité est un piège qu'un thème sur deux masque »). */
.logo-clair{ display:none; }
:root[data-theme="light"] .logo-sombre{ display:none; }
:root[data-theme="light"] .logo-clair{ display:block; }

/* Ce que l'en-tête et le pied COMMUNS écrivent en dur pour le sombre. Chaque
   règle pèse plus que celle qu'elle retouche — `:root[data-theme]` ajoute
   (0,2,0). Le bouton d'appel est épargné : son texte blanc est posé sur le
   dégradé, qui reste sombre dans les deux thèmes. */
:root[data-theme="light"] .backdrop{ background:radial-gradient(1200px 600px at 50% -10%,#e3e9f8 0%,var(--bg) 60%); }
:root[data-theme="light"] .backdrop .blob{ mix-blend-mode:multiply; opacity:.10; }
:root[data-theme="light"] .backdrop .grid{ background-image:linear-gradient(rgba(15,23,42,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.05) 1px,transparent 1px); }
:root[data-theme="light"] .backdrop .grain{ opacity:.025; }
:root[data-theme="light"] #header.scrolled{ background:rgba(255,255,255,.82); box-shadow:0 10px 30px rgba(15,23,42,.08); }
:root[data-theme="light"] .nav .links a:not(.btn){ color:var(--blog-txt-2); }
:root[data-theme="light"] .nav .links a:not(.btn):hover{ color:var(--txt); background:var(--blog-voile-fort); }
:root[data-theme="light"] .nav-toggle span{ background:var(--txt); }
:root[data-theme="light"] .btn-ghost{ color:var(--txt); background:var(--blog-voile); }
:root[data-theme="light"] .btn-ghost:hover{ background:var(--blog-voile-fort); }
:root[data-theme="light"] footer{ color:var(--muted); }
:root[data-theme="light"] footer .row a{ color:var(--blog-txt-2); }
:root[data-theme="light"] footer .row a:hover{ color:var(--txt); }
/* Une image d'article est souvent une capture SOMBRE de l'application : sur
   fond clair, son bord se perdrait sans une ombre légère. */
:root[data-theme="light"] .b-image img, :root[data-theme="light"] .b-image-texte img, :root[data-theme="light"] .article__couverture img{ box-shadow:0 8px 24px rgba(15,23,42,.08); }

.blog{ padding-bottom:40px; }
.blog .section{ padding-bottom:32px; }

/* ── Fil d'Ariane ─────────────────────────────────────────────────────────── */
.blog-ariane{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:14px; color:var(--muted); margin-bottom:22px; }
.blog-ariane a{ color:var(--muted); border-bottom:1px solid transparent; }
.blog-ariane a:hover{ color:var(--txt); border-bottom-color:currentColor; }
.blog-ariane [aria-current]{ color:var(--txt); }

/* ── En-tête de liste ─────────────────────────────────────────────────────── */
.blog-tete{ padding-top:120px; text-align:center; }
.blog-tete .blog-ariane{ justify-content:center; }
.blog-tete .kicker{ display:inline-block; font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin-bottom:14px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.blog-tete h1{ font-size:clamp(34px,4.6vw,56px); line-height:1.08; font-weight:800; }
.blog-tete__lead{ color:var(--muted); font-size:18px; max-width:680px; margin:16px auto 0; }

.blog-categories{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:34px; }
.blog-categories a{ padding:8px 16px; border-radius:999px; border:1px solid var(--line-strong); background:var(--blog-voile); color:var(--blog-txt-2); font-size:14px; font-weight:500; transition:background .2s, color .2s, border-color .2s; }
.blog-categories a:hover{ background:var(--blog-voile-fort); color:var(--blog-txt-fort); }
.blog-categories a[aria-current]{ color:var(--blog-txt-fort); border-color:transparent; background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box, var(--grad) border-box; border:1px solid transparent; }
.blog-categories__n{ color:var(--muted); font-size:12px; margin-left:4px; }

/* ── Grille de cartes ─────────────────────────────────────────────────────── */
.blog-liste{ padding-bottom:40px; }
.blog-grille{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:28px; }

.carte{ display:flex; flex-direction:column; min-width:0; border-radius:var(--br); border:1px solid var(--line); background:var(--card); overflow:hidden; transition:transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.carte:hover{ transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 18px 50px var(--blog-ombre); }
.carte__image{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--bg-2); }
.carte__image img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.carte:hover .carte__image img{ transform:scale(1.03); }
.carte__corps{ display:flex; flex-direction:column; gap:10px; padding:22px 22px 24px; flex:1; }
.carte__categorie{ align-self:flex-start; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.carte__titre{ font-family:var(--head); font-size:20px; line-height:1.3; letter-spacing:-.01em; font-weight:700; }
.carte__titre a:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.carte__chapo{ color:var(--muted); font-size:15px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.carte__meta{ margin-top:auto; padding-top:6px; color:var(--muted); font-size:13px; }

/* ── Pagination, flux, page vide ──────────────────────────────────────────── */
.blog-pages{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:44px; }
.blog-pages a, .blog-pages span{ min-width:42px; padding:9px 14px; border-radius:12px; border:1px solid var(--line); text-align:center; font-size:15px; }
.blog-pages a:hover{ background:var(--blog-voile-fort); }
.blog-pages [aria-current]{ background:var(--grad); border-color:transparent; color:#fff; font-weight:600; }
.blog-flux{ text-align:center; margin-top:30px; font-size:14px; }
.blog-flux a{ color:var(--muted); border-bottom:1px dashed currentColor; }
.blog-vide{ text-align:center; max-width:620px; margin:0 auto; padding:40px 0 60px; }
.blog-vide h1{ font-size:clamp(30px,4vw,44px); margin-bottom:16px; padding-top:80px; }
.blog-vide p{ color:var(--muted); margin-bottom:22px; font-size:17px; }

/* ── Article : en-tête et couverture ──────────────────────────────────────── */
.article__tete{ max-width:808px; padding-top:120px; padding-bottom:30px; }
.article__tete h1{ font-size:clamp(32px,4.4vw,52px); line-height:1.1; font-weight:800; }
.article__chapo{ margin-top:20px; font-size:20px; line-height:1.55; color:var(--blog-txt-2); }
.article__meta{ margin-top:22px; display:flex; flex-wrap:wrap; gap:6px 8px; color:var(--muted); font-size:14px; }
.article__couverture{ margin:10px auto 0; max-width:1160px; }
.article__couverture img{ width:100%; height:auto; border-radius:var(--br); border:1px solid var(--line); margin:1.8em 0; }

.apercu-bandeau{ margin:100px 0 -80px; padding:12px 18px; border-radius:12px; border:1px solid rgba(251,191,36,.5); background:rgba(251,191,36,.12); color:var(--blog-alerte); font-size:15px; text-align:center; }

/* ── Article : la colonne de texte ────────────────────────────────────────── */
.article__mise{ max-width:768px; padding-top:44px; }
.article__corps{ font-size:18px; line-height:1.78; color:var(--blog-txt-corps); min-width:0; }
.article__corps > p, .article__corps > ul, .article__corps > ol{ margin:0 0 1.25em; }
.article__corps h2{ font-size:clamp(25px,2.7vw,32px); line-height:1.2; margin:1.9em 0 .6em; color:var(--txt); scroll-margin-top:96px; }
.article__corps h3{ font-size:22px; line-height:1.3; margin:1.6em 0 .5em; color:var(--txt); scroll-margin-top:96px; }
.article__corps h4{ font-family:var(--head); font-size:18px; margin:1.4em 0 .4em; color:var(--txt); scroll-margin-top:96px; }
.article__corps strong{ color:var(--txt); }
.article__corps a{ color:var(--c1); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.article__corps a:hover{ color:var(--blog-lien-survol); }
.article__corps a.btn{ color:#fff; text-decoration:none; }
.article__corps ul, .article__corps ol{ padding-left:1.4em; }
.article__corps li{ margin:.35em 0; }
.article__corps li > ul, .article__corps li > ol{ margin:.3em 0 .3em; }
.article__corps ul li::marker{ color:var(--c1); }
.article__corps ol li::marker{ color:var(--c1); font-weight:600; }
.article__corps code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em; padding:.12em .4em; border-radius:6px; background:rgba(148,163,184,.14); color:var(--txt); }
.article__corps mark{ background:rgba(214,71,226,.28); color:var(--txt); padding:0 .2em; border-radius:4px; }
.article__corps .b-coches{ list-style:none; padding-left:0; }
.article__corps .b-coches li{ padding-left:1.8em; position:relative; }
.article__corps .b-coches li::before{ content:"☐"; position:absolute; left:0; color:var(--muted); }
.article__corps .b-coches li[data-coche="1"]::before{ content:"☑"; color:var(--ok); }

.b-sep{ border:0; height:1px; margin:2.6em auto; width:40%; background:var(--grad); opacity:.6; }

.b-citation{ margin:1.8em 0; padding:6px 0 6px 24px; border-left:3px solid; border-image:var(--grad) 1; }
.b-citation p{ font-family:var(--head); font-size:22px; line-height:1.5; color:var(--txt); margin:0; }
.b-citation cite{ display:block; margin-top:10px; font-style:normal; font-size:15px; color:var(--muted); }
.b-citation cite::before{ content:"— "; }

/* Images : normale dans la colonne, large et pleine en débordent, centrées. */
.b-image{ margin:2em 0; }
.b-image img{ width:100%; height:auto; border-radius:16px; border:1px solid var(--line); }
.b-image figcaption{ margin-top:10px; font-size:14px; color:var(--muted); text-align:center; }
.b-image--wide, .b-image--full{ position:relative; left:50%; transform:translateX(-50%); }
.b-image--wide{ width:min(960px, calc(100vw - 48px)); }
.b-image--full{ width:min(1112px, calc(100vw - 48px)); }

.b-image-texte{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:28px; align-items:center; margin:2em 0; }
.b-image-texte--droite{ grid-template-columns:minmax(0,1fr) minmax(0,300px); }
.b-image-texte--droite figure{ order:2; }
.b-image-texte figure{ margin:0; }
.b-image-texte img{ width:100%; height:auto; border-radius:14px; border:1px solid var(--line); }
.b-image-texte__texte p{ margin:0; }

/* Une image qui a son AVIF est un <picture> : sans `display:block`, la balise
   en ligne laisse sous l'image l'espace d'une ligne de texte. */
.b-image picture, .b-image-texte picture, .article__couverture picture, .b-youtube picture{ display:block; }
.carte__image picture{ display:block; width:100%; height:100%; }

/* Vidéo hébergée : le lecteur du navigateur, aux proportions du fichier. */
.b-video, .b-youtube{ margin:2em 0; }
.b-video video{ display:block; width:100%; height:auto; border-radius:16px; border:1px solid var(--line); background:#000; }
.b-video figcaption, .b-youtube figcaption{ margin-top:10px; font-size:14px; color:var(--muted); text-align:center; }

/* YouTube : une FAÇADE — la miniature, hébergée ici, et un bouton. Le lecteur
   (`youtube-nocookie.com`) ne remplace la façade qu'au clic, par assets/js/blog.js. */
.b-youtube__cadre{ position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#000; }
.b-youtube__lien{ position:absolute; inset:0; display:block; }
.b-youtube__lien img{ width:100%; height:100%; object-fit:cover; }
.b-youtube__bouton{ position:absolute; left:50%; top:50%; width:68px; height:48px; transform:translate(-50%,-50%); border-radius:14px; background:rgba(15,15,15,.82); transition:background .2s var(--ease); }
.b-youtube__bouton::after{ content:""; position:absolute; left:27px; top:15px; border-style:solid; border-width:9px 0 9px 16px; border-color:transparent transparent transparent #fff; }
.b-youtube__lien:hover .b-youtube__bouton, .b-youtube__lien:focus-visible .b-youtube__bouton{ background:#e00; }
.b-youtube__cadre iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.b-youtube__mention{ margin:8px 0 0; font-size:12.5px; color:var(--muted); text-align:center; }
.b-youtube__mention a{ color:inherit; text-decoration:underline; }

.b-encadre{ display:flex; gap:14px; margin:1.8em 0; padding:18px 20px; border-radius:16px; border:1px solid var(--line); background:rgba(34,211,238,.07); border-left:4px solid var(--c1); font-size:17px; }
.b-encadre p{ margin:0; }
.b-encadre p + p{ margin-top:.5em; }
.b-encadre__icone{ font-size:20px; line-height:1.5; }
.b-encadre__titre{ font-family:var(--head); font-weight:700; color:var(--txt); }
.b-encadre--tip{ background:rgba(52,211,153,.08); border-left-color:var(--ok); }
.b-encadre--warning{ background:rgba(251,191,36,.08); border-left-color:#fbbf24; }

.b-tableau{ margin:1.8em 0; overflow-x:auto; border:1px solid var(--line); border-radius:14px; }
.b-tableau table{ width:100%; border-collapse:collapse; font-size:16px; line-height:1.5; }
.b-tableau th, .b-tableau td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.b-tableau th{ background:rgba(148,163,184,.08); color:var(--txt); font-weight:600; white-space:nowrap; }
.b-tableau tr:last-child td{ border-bottom:0; }

.b-faq{ margin:1.6em 0; display:grid; gap:12px; }
.b-faq__item{ border:1px solid var(--line); border-radius:14px; background:var(--card); }
.b-faq__item summary{ cursor:pointer; list-style:none; padding:16px 48px 16px 20px; font-family:var(--head); font-weight:600; color:var(--txt); position:relative; }
.b-faq__item summary::-webkit-details-marker{ display:none; }
.b-faq__item summary::after{ content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:22px; color:var(--c1); transition:transform .25s; }
.b-faq__item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.b-faq__reponse{ padding:0 20px 18px; color:var(--blog-txt-2); font-size:17px; }
.b-faq__reponse p{ margin:0; }

.b-appel, .article__fin{ margin:2.2em 0; padding:28px; border-radius:var(--br); text-align:center; background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box, var(--grad) border-box; border:1px solid transparent; }
.b-appel p{ margin:0 0 18px; color:var(--txt); font-size:18px; }

/* Les boutons d'un modèle : le télécharger, l'ouvrir dans Google Sheets. Préfixés
   par `.article__corps` : `.article__corps a` (0,1,1) peindrait sinon le libellé
   en lien souligné. L'icône dit la destination ; la couleur au survol est la sienne. */
.b-fichiers{ margin:1.8em 0; }
.b-fichiers__boutons{ display:flex; flex-wrap:wrap; gap:12px; }
.article__corps .b-fichier{ flex:1 1 260px; display:flex; align-items:center; gap:14px; min-height:64px; padding:12px 20px 12px 14px; border-radius:16px; border:1px solid var(--line-strong); background:var(--card-solid); color:var(--txt); font-weight:600; font-size:16px; line-height:1.3; text-decoration:none; box-shadow:0 6px 20px var(--blog-ombre); transition:transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.article__corps .b-fichier:hover{ transform:translateY(-2px); box-shadow:0 12px 30px var(--blog-ombre); }
.article__corps .b-fichier--excel:hover{ border-color:#21A366; }
.article__corps .b-fichier--sheets:hover{ border-color:#0F9D58; }
.article__corps .b-fichier:focus-visible{ outline:2px solid var(--c1); outline-offset:3px; }
.b-fichier__icone{ flex:none; width:36px; height:36px; }
.b-fichier__libelle{ min-width:0; overflow-wrap:anywhere; }
.b-fichiers__note{ margin:12px 0 0; color:var(--muted); font-size:15px; }

/* ── Sommaire ─────────────────────────────────────────────────────────────── */
.article__sommaire{ margin:0 0 2em; border:1px solid var(--line); border-radius:16px; background:rgba(148,163,184,.05); }
.article__sommaire summary{ cursor:pointer; padding:16px 20px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.article__sommaire ol{ margin:0; padding:0 20px 18px 40px; display:grid; gap:7px; font-size:16px; }
.article__sommaire li.niveau-3{ margin-left:18px; font-size:15px; list-style:circle; }
.article__sommaire a{ color:var(--blog-txt-2); border-bottom:1px solid transparent; }
.article__sommaire a:hover{ color:var(--txt); border-bottom-color:currentColor; }

/* ── Fin d'article, partage, à lire ensuite ───────────────────────────────── */
.article__fin-titre{ font-family:var(--head); font-size:22px; font-weight:700; color:var(--txt); margin:0 0 8px; }
.article__fin p{ margin:0 0 10px; color:var(--muted); font-size:17px; }
.article__fin-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:18px !important; }
.article__partage{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin:28px 0 0; font-size:15px; color:var(--muted); }
.article__partage a{ color:var(--blog-txt-2); border-bottom:1px solid var(--line-strong); text-decoration:none; }
.article__partage a:hover{ color:var(--blog-txt-fort); }

/* ── L'auteur : la signature de l'en-tête, et l'encart de fin d'article ──── */
.article__par a{ color:var(--txt); font-weight:500; border-bottom:1px solid var(--line-strong); }
.article__par a:hover{ border-bottom-color:currentColor; }
.article__auteur{ margin:2.4em 0 0; padding:22px 24px; border-radius:16px; border:1px solid var(--line); border-left:3px solid var(--c1); background:var(--card); min-width:0; scroll-margin-top:96px; }
/* Une marge PAR CLASSE, jamais `.article__auteur p { margin:0 }` : ce
   sélecteur pèserait plus lourd que chacune des classes ci-dessous et
   annulerait leurs marges sans rien signaler. */
.article__auteur-titre{ margin:0; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.article__auteur-nom{ margin:8px 0 0; font-family:var(--head); font-size:20px; font-weight:700; line-height:1.3; color:var(--txt); }
.article__auteur-poste{ margin:0; font-size:14px; color:var(--muted); }
.article__auteur-bio{ margin:12px 0 0; font-size:16px; line-height:1.65; color:var(--muted); overflow-wrap:break-word; }

.blog-lies{ padding-top:72px; padding-bottom:40px; }
.blog-lies h2{ font-size:clamp(24px,2.6vw,30px); margin-bottom:26px; }

/* ── Petits écrans ────────────────────────────────────────────────────────── */
@media (max-width:760px){
    .blog-tete, .article__tete{ padding-top:96px; }
    .article__corps{ font-size:17px; }
    .article__chapo{ font-size:18px; }
    .b-image-texte, .b-image-texte--droite{ grid-template-columns:minmax(0,1fr); }
    .b-image-texte--droite figure{ order:0; }
    .b-appel, .article__fin{ padding:22px 18px; }
    .article__auteur{ padding:18px; }
}

@media (prefers-reduced-motion:reduce){
    .carte, .carte__image img{ transition:none; }
    .article__corps .b-fichier{ transition:none; }
    .article__corps .b-fichier:hover{ transform:none; }
    .carte:hover, .carte:hover .carte__image img{ transform:none; }
}