/* ══════════════════════════════════════════════════════════════════
   Blog Otaku Discount — feuille du module.

   Ne contient QUE ce que le module possede : liste d'articles, article,
   sommaire, resume, sources, boite auteur, produits lies, navigation.

   Le theme fournit : les jetons de couleur (--paper, --ink, --brand,
   --act, --actTx, --actHv, --line, --soft, --card, --deep, --r...),
   les polices « Play » et « UI », la classe .ico et son sprite,
   le fil d'Ariane .bc, la pagination .pg, l'accordeon .qa,
   et la carte produit .pc.

   GENERE PAR build/mkodblog.py DEPUIS build/odZ_css.html — NE PAS EDITER.
   ══════════════════════════════════════════════════════════════════ */

/* ── filtres de rubrique ── */
.tags{display:flex;flex-wrap:wrap;gap:.45rem;padding:.9rem 0 1.5rem;border-bottom:1px solid var(--line);
  margin-bottom:1.6rem}
.tags a{display:inline-flex;align-items:baseline;gap:.45rem;padding:.42rem .95rem;border-radius:999px;
  border:1.5px solid var(--line);font-size:.9rem;font-weight:600;color:var(--ink);transition:.15s}
.tags a:hover{background:var(--act);border-color:var(--act);color:#fff}
.tags a[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tags em{font-style:normal;font-size:.8rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.tags a[aria-current] em{color:var(--paper);opacity:.75}

/* ── article en vedette ── */
.feat{display:grid;gap:1.2rem;margin-bottom:1.8rem;color:var(--ink)}
@media (min-width:860px){.feat{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2rem;align-items:center}}
.feat__i{position:relative;overflow:hidden;border-radius:var(--r);background:var(--soft)}
/* height:auto : sans lui l'attribut height= de l'image l'emporte et aspect-ratio ne s'applique pas. Voir .pc__i img. */
.feat__i img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;transition:transform .45s cubic-bezier(.25,1,.5,1)}
.feat:hover .feat__i img{transform:scale(1.03)}
.feat__d{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;color:var(--actTx)}
.feat__d .ico{font-size:1.05rem}
.feat__d .sep{color:var(--ink2);font-weight:400}
.feat h2{font-family:"Play",sans-serif;font-weight:400;font-size:clamp(1.4rem,1.1rem+1.5vw,2.1rem);
  line-height:1.3;margin:.6rem 0 .5rem}
.feat h2 a{position:static}
.feat p{color:var(--ink2);font-size:.98rem;line-height:1.6;max-width:56ch}
.feat .go2{display:inline-flex;align-items:center;gap:.55rem;margin-top:1rem;border:1.5px solid var(--ink);
  border-radius:999px;padding:.6rem 1.2rem;font-weight:700;font-size:.9rem;color:var(--ink);transition:.16s}
.feat .go2:hover{background:var(--act);border-color:var(--act);color:#fff}

/* ── grille d'articles ── */
.pg2{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.pa{position:relative;display:flex;flex-direction:column;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .2s cubic-bezier(.25,1,.5,1),border-color .2s}
.pa:hover{transform:translateY(-4px);border-color:var(--brand)}
.pa__i{overflow:hidden;background:var(--soft)}
.pa__i img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;transition:transform .42s cubic-bezier(.25,1,.5,1)}
.pa:hover .pa__i img{transform:scale(1.05)}
.pa__b{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.pa__d{display:flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600;color:var(--actTx)}
.pa__d .ico{font-size:1rem}
.pa__d .sep{color:var(--ink2);font-weight:400}
.pa__t{font-weight:600;font-size:1.02rem;line-height:1.34;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pa__t a::after{content:"";position:absolute;inset:0;z-index:1}
.pa__x{font-size:.88rem;color:var(--ink2);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pa__f{margin-top:auto;padding-top:.75rem;display:flex;align-items:center;gap:.4rem;
  font-size:.84rem;font-weight:700;color:var(--ink)}
.pa__f .ico{font-size:1rem}

/* ── article : mise en page ── */
.ar{display:grid;gap:1.8rem;padding-bottom:2.5rem;color:var(--ink)}
@media (min-width:1000px){.ar{grid-template-columns:minmax(0,1fr) 300px;gap:2.6rem;align-items:start}}
.ar__h{padding:1.3rem 0 1.1rem}
/* Le titre prend toute la largeur du conteneur, comme l'ouverture (demande du
   client le 23/09). Il etait bride a 22ch : « Kurumada publie la 4e partie de
   Saint Seiya Tenkai-hen le 18 decembre » sortait sur trois lignes courtes au
   milieu d'une page de 1265 px. Sans bride, a 3,1rem, la ligne fait une
   cinquantaine de signes — largement dans ce qu'un titre d'affichage supporte. */
.ar__h h1{font-family:"Play",sans-serif;font-weight:400;font-size:clamp(1.9rem,1.4rem+2.4vw,3.1rem);
  line-height:1.06}
.ar__m{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin-top:.9rem;
  font-size:.9rem;color:var(--ink2)}
.ar__m .cat{display:inline-flex;align-items:center;gap:.4rem;background:var(--ink);color:var(--paper);
  border-radius:999px;padding:.28rem .8rem;font-size:.82rem;font-weight:700}
.ar__m .cat .ico{font-size:1rem;color:var(--brand)}
.ar__m b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.ar__i{border-radius:var(--r);overflow:hidden;background:var(--soft);margin-bottom:1.5rem}
.ar__i img{width:100%;height:auto;aspect-ratio:29/16;object-fit:cover}
.ar__c{font-size:1.06rem;line-height:1.75;color:var(--ink);
  --h2:clamp(1.3rem,1.1rem+1vw,1.75rem);--h3:clamp(1.12rem,1.02rem+.45vw,1.32rem)}
.ar__c > p{max-width:68ch;margin-bottom:1.15rem}
.ar__c > p:first-of-type{font-size:1.18rem;line-height:1.65;color:var(--ink);font-weight:500}
.ar__c h2{font-family:"Play",sans-serif;font-weight:400;font-size:var(--h2);
  line-height:1.2;margin:2rem 0 .85rem;max-width:32ch}
.ar__c h2:first-child{margin-top:0}

/* ═══════════ corps de l'article : le HTML reel des articles ═══════════
   La maquette ne montre que des h2 et des p. Le contenu repris de SmartBlog
   contient aussi — releve en base le 09/09/2026, sur les articles actifs :
   des h3 (301 articles), des tableaux (213, jusqu'a six colonnes), des
   listes (72), des images (82, avec width= et height= en dur), des iframes
   YouTube (33), des cartes d'embed X et TikTok (6), et les classes de
   l'ancien editeur (banniereShop 39, btn 3). Rien de tout cela n'avait de
   regle : ce bloc les habille. Aucune valeur d'article n'est ecrite ici,
   seules des balises et des classes de contenu sont visees.               */

/* titres de section : le reset du theme (h2,h3{margin:0}) les laisse colles */
.ar__c h3{font-family:"Play",sans-serif;font-weight:400;font-size:var(--h3);
  line-height:1.25;margin:1.75rem 0 .6rem;max-width:40ch;color:var(--ink)}
.ar__c h3:first-child{margin-top:0}
.ar__c h2 + h3{margin-top:.9rem}
.ar__c h2,.ar__c h3{scroll-margin-top:1.5rem}   /* cibles des liens du sommaire */

/* paragraphes imbriques : « .ar__c > p » ne descend pas dans les td et les li.
   Les conteneurs div sont volontairement hors de la liste : le paragraphe
   de l'encart .pcta est dans un div, et il a deja sa propre regle. */
.ar__c li p,.ar__c td p,.ar__c th p,.ar__c blockquote p,.ar__c figure p,
.ar__c section p{margin:0 0 .7rem;max-width:none}
.ar__c li p:last-child,.ar__c td p:last-child,.ar__c th p:last-child,
.ar__c blockquote p:last-child,.ar__c figure p:last-child,
.ar__c section p:last-child{margin-bottom:0}

/* le premier paragraphe est entierement en <strong> sur 298 articles :
   le font-weight:500 de la maquette n'y arrivait jamais */
.ar__c > p:first-of-type > strong:only-child{font-weight:500}

/* liens du corps : « a{color:inherit;text-decoration:none} » du theme les
   rendait indiscernables du texte (168 liens sur 101 articles).
   Vise le texte courant seulement : les liens-boutons (.pcta, .banniereShopA,
   .btn) sont habilles plus bas et ne doivent pas etre soulignes. */
.ar__c p a,.ar__c li a,.ar__c td a,.ar__c th a,.ar__c h2 a,.ar__c h3 a,
.ar__c blockquote a,.ar__c section a{color:var(--actTx);text-decoration:underline;
  text-decoration-thickness:.07em;text-underline-offset:.16em;transition:color .15s}
.ar__c p a:hover,.ar__c li a:hover,.ar__c td a:hover,.ar__c th a:hover,
.ar__c h2 a:hover,.ar__c h3 a:hover,.ar__c blockquote a:hover,
.ar__c section a:hover{color:var(--actHv);text-decoration-thickness:.12em}

/* listes : « ul{list-style:none;margin:0;padding:0} » du theme supprimait
   puces ET retrait ; les <ol>, eux, gardaient les leurs. Meme puce losange
   que la page CMS et l'encart « en resume », pour rester dans la charte. */
.ar__c ul,.ar__c ol{display:grid;gap:.45rem;margin:0 0 1.2rem;padding:0;
  list-style:none;max-width:68ch}
.ar__c li{position:relative;padding-left:1.35rem;line-height:1.65}
.ar__c ul > li::before{content:"";position:absolute;left:0;top:.62rem;width:7px;height:7px;
  border-radius:2px;background:var(--brand)}
.ar__c ol{counter-reset:arc}
.ar__c ol > li{padding-left:1.95rem}
.ar__c ol > li::before{counter-increment:arc;content:counter(arc) ".";position:absolute;
  left:0;top:0;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
.ar__c li > ul,.ar__c li > ol{margin:.45rem 0 0}

/* images : le contenu porte width= et height= en dur, sans height:auto
   l'image est ecrasee des que max-width:100% reduit sa largeur */
.ar__c img{height:auto;margin:1.5rem auto;border-radius:var(--r);background:var(--soft)}
.ar__c p img,.ar__c li img,.ar__c td img,.ar__c th img{margin:.9rem auto}

/* videos et lecteurs : width="560" height="315" en dur dans le contenu */
.ar__c iframe{display:block;width:100%;max-width:100%;border:0;border-radius:var(--r);
  margin:1.6rem auto}
.ar__c iframe[src*="youtube"],.ar__c iframe[src*="youtu.be"]{aspect-ratio:16/9;height:auto;
  background:var(--deep)}
.ar__c video{display:block;width:100%;height:auto;border-radius:var(--r);
  background:var(--deep);margin:1.6rem auto}
.ar__c .embed-responsive{margin:1.6rem 0}
.ar__c .embed-responsive iframe{margin:0}

/* citations : dans ce corpus ce sont les cartes de repli des embeds X et
   TikTok, affichees telles quelles quand le script tiers ne se charge pas */
.ar__c blockquote{margin:1.6rem 0;padding:.95rem 1.2rem;border-left:3px solid var(--brand);
  border-radius:0 var(--rs) var(--rs) 0;background:var(--soft);color:var(--ink);
  font-size:.97rem;line-height:1.6;max-width:68ch}
.ar__c .twitter-tweet,.ar__c .tiktok-embed{max-width:605px}
.ar__c .tiktok-embed{min-width:0!important}   /* style="min-width:325px" en dur */

/* tableaux : 213 articles, 165 a trois colonnes ou plus. Le tableau est
   lui-meme la zone de defilement (display:block + overflow-x) : c'est le
   seul moyen sans conteneur cote serveur. Le <tbody> redevient la boite
   de tableau pour garder la repartition des colonnes sur 100 % de la
   largeur — 223 tableaux sur 225 n'ont pas de <thead>. */
.ar__c table{display:block;width:100%;max-width:100%;overflow-x:auto;
  overscroll-behavior-x:contain;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);border-collapse:collapse;margin:1.6rem 0;
  font-size:.95rem;line-height:1.5}
.ar__c table > tbody:only-child{display:table;width:100%}
.ar__c th,.ar__c td{min-width:7rem;padding:.62rem .85rem;text-align:left;
  vertical-align:top;border-bottom:1px solid var(--line)}
.ar__c tbody > tr:last-child > td{border-bottom:0}
/* l'ancien editeur n'a pas produit de <thead> : la premiere ligne fait l'en-tete */
.ar__c thead th,.ar__c table > tbody > tr:first-child > td{background:var(--soft);
  font-weight:700;color:var(--ink)}

/* ── classes heritees de l'ancien editeur ──
   L'encart .banniereShop (39 articles) doit etre converti en .pcta cote
   serveur ; d'ici la il doit au moins s'afficher : sans regle, .banniereShop1
   n'a aucune hauteur, son image de fond reste invisible et il ne subsiste
   que deux lignes de texte nu. Le fond vient du style= de l'article. */
.ar__c .banniereShop{margin:1.8rem 0}
.ar__c .banniereShop1{position:relative;display:grid;align-items:end;
  min-height:clamp(160px,26vw,230px);border-radius:var(--r);overflow:hidden;
  background:var(--deep) center/cover no-repeat}
.ar__c .banniereShop1::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(13,12,10,.88),rgba(13,12,10,.15))}
.ar__c .banniereShop2{position:relative;z-index:1;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:.7rem 1.2rem;padding:1.1rem 1.3rem}
.ar__c .banniereShopP{margin:0;max-width:none;font-family:"Play",sans-serif;
  font-size:clamp(1.05rem,.95rem+.5vw,1.3rem);line-height:1.15;color:var(--onDeepS);
  letter-spacing:.04em}
.ar__c .banniereShopA,.ar__c .btn,.ar__c .btn-default{display:inline-flex;align-items:center;
  gap:.5rem;background:var(--brand);color:#1C1A17;border-radius:999px;padding:.62rem 1.2rem;
  font-weight:700;font-size:.9rem;line-height:1.2;white-space:nowrap;text-decoration:none}
.ar__c .banniereShopA:hover,.ar__c .btn:hover,.ar__c .btn-default:hover{background:#FFB42E;
  color:#1C1A17;text-decoration:none}
.ar__c .btn,.ar__c .btn-default{white-space:normal;margin:.3rem 0}

/* garde-fous : styles en ligne colles depuis un traitement de texte
   (105 articles). A retirer du contenu ; d'ici la, ils imposent du 13 px
   et du noir en dur au milieu de l'article, y compris en theme sombre. */
.ar__c p[style*="font-size"],.ar__c span[style*="font-size"],
.ar__c li[style*="font-size"],.ar__c td[style*="font-size"]{font-size:inherit!important;
  line-height:inherit!important}
.ar__c h2[style*="font-size"]{font-size:var(--h2)!important;line-height:1.2!important}
.ar__c h3[style*="font-size"]{font-size:var(--h3)!important;line-height:1.25!important}
.ar__c > p[style]:not(:first-of-type){margin-bottom:1.15rem!important}
.ar__c [style*="color: #000000"]{color:inherit!important}

/* encart produit dans l'article */
.pcta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.9rem 1.2rem;align-items:center;
  background:var(--deep);color:var(--onDeepS);border-radius:var(--r);padding:1.2rem 1.4rem;margin:1.8rem 0}
.pcta .ico{font-size:2rem;color:var(--brand);flex:none}
.pcta b{font-family:"Play",sans-serif;font-weight:400;font-size:1.2rem;line-height:1.15;display:block}
.pcta p{color:var(--onDeep);font-size:.9rem;margin-top:.25rem;max-width:52ch;line-height:1.5}
.pcta a{background:var(--brand);color:#1C1A17;border-radius:999px;padding:.68rem 1.25rem;font-weight:700;
  font-size:.9rem;white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem}
.pcta a:hover{background:#FFB42E}
@media (max-width:720px){.pcta{grid-template-columns:auto minmax(0,1fr)}.pcta a{grid-column:1/-1;justify-content:center}}

/* colonne latérale de l'article */
.side{display:grid;gap:1rem}
@media (min-width:1000px){.side{position:sticky;top:1rem}}
.sbx{border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);
  padding:1.1rem 1.15rem 1.2rem}
.sbx h2{font-size:.86rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);
  margin-bottom:.85rem}
.sbx ol{display:grid;gap:.2rem;list-style:none;margin:0;padding:0;counter-reset:s}
.sbx ol a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;padding:.4rem .3rem;border-radius:8px;
  font-size:.9rem;line-height:1.4;color:var(--ink)}
.sbx ol a::before{counter-increment:s;content:counter(s);font-size:.78rem;font-weight:700;color:var(--ink2);
  font-variant-numeric:tabular-nums}
.sbx ol a:hover{background:var(--soft);color:var(--actTx)}
.sbx .rel{display:grid;gap:.75rem}
.sbx .rel a{display:grid;grid-template-columns:72px minmax(0,1fr);gap:.7rem;align-items:center;color:var(--ink)}
.sbx .rel img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;border-radius:6px}
.sbx .rel span{font-size:.87rem;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sbx .rel a:hover span{color:var(--actTx)}

/* ═══════════ page article : blocs repris de ChinaZone ═══════════ */

/* ouverture : bandeau pleine largeur, legende dessous.

   TROIS DECISIONS DU CLIENT, DANS L'ORDRE OU ELLES SONT TOMBEES LE 23/09 :
   pleine largeur, puis pas de rognage, puis « trop haut ». Les trois ne
   tiennent pas ensemble : a ~1265 px de large et 1,6 de rapport, respecter le
   fichier donne 791 px de haut. Arbitrage retenu : on garde la pleine largeur
   et on RECOUPE, plafond 480 px — soit un bandeau en 2,64:1, plus genereux
   que l'ancien design qui plafonnait a 400 px (3,16:1).
   On perd donc 39 % de la hauteur d'un 1280x800. C'est assume.

   La hauteur est en vw, pas en px fixes : une seule valeur donne alors un
   RAPPORT CONSTANT a toutes les largeurs d'ecran (37vw ~ 1/2,64 de la largeur
   du conteneur). Le plancher de 180 px rend la recoupe plus douce sur
   telephone, ou la hauteur coute moins cher que la largeur.

   SAUF les visuels carres ou verticaux, que le gabarit marque « .arh--haut ».
   Recouper un 600x600 en 2,64:1 lui ferait perdre 62 % de sa hauteur : il n'en
   resterait qu'une lamelle. Ceux-la gardent donc leur forme entiere, hauteur
   plafonnee au meme 480 px, avec un passe-partout sur les cotes. Deux articles
   sur 365 sont dans ce cas. Le seuil est pose par le GABARIT, pas ici : la
   feuille ne connait pas les dimensions du fichier.

   Le gabarit doit poser les attributs width= et height= REELS (le controleur
   les fournit) : sans eux, la boite reservee avant le chargement n'a pas le
   bon rapport et la page saute.

   Le credit passe SOUS l'image, en italique attenue, au lieu d'une pastille
   posee par-dessus sur un degrade noir. Il n'a donc plus besoin de couleurs
   ecrites en dur pour ressortir sur du sombre : var(--ink2) suit les deux
   palettes, claire et sombre. La legende est alignee a gauche, comme le <h1>
   qui la suit : la pastille de rubrique d'abord, le credit ensuite. */
.arh{margin:1.3rem 0 0}
.arh__f{display:flex;justify-content:center;background:var(--soft);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.arh__f img{display:block;width:100%;height:clamp(180px,37vw,480px);object-fit:cover}
.arh--haut .arh__f img{width:auto;height:auto;max-width:100%;
  max-height:clamp(180px,37vw,480px)}
.arh__c{display:flex;align-items:baseline;gap:.55rem 1rem;flex-wrap:wrap;margin-top:.7rem}
.arh__b{display:inline-flex;align-items:center;gap:.4rem;background:var(--brand);color:#1C1A17;
  border-radius:999px;padding:.4rem .95rem;font-weight:700;font-size:.84rem}
.arh__b .ico{font-size:.95rem}
.arh__cr{font-style:italic;font-size:.84rem;line-height:1.5;color:var(--ink2)}
a.arh__cr{text-decoration:underline;text-underline-offset:2px}
a.arh__cr:hover{color:var(--ink)}


/* chapo */
/* Le chapo suit le mouvement mais GARDE une mesure. Ce n'est pas un oubli :
   a 1,2rem sur 1265 px la ligne ferait environ 130 signes, l'oeil perd le
   debut de la ligne suivante. 78ch le rapproche du titre tout en restant dans
   la plage lisible. C'est du texte de lecture, pas un titre d'affichage. */
.chp{margin-top:1rem;font-size:1.2rem;line-height:1.6;font-weight:500;color:var(--ink);max-width:78ch}

/* signature + partage */
.byl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.byl__w{display:flex;align-items:center;gap:.7rem;min-width:0}
.avt{width:42px;height:42px;flex:none;border-radius:50%;background:var(--brand);color:#1C1A17;
  display:grid;place-items:center;font-family:"Play",sans-serif;font-size:1.15rem;line-height:1;
  /* .avt habille deux choses : un <span> d'initiales et une <img>. La photo
     est forcee au carre ; sans object-fit, un portrait rectangulaire
     s'ecraserait au lieu d'etre recadre. (Sans effet sur le <span>.) */
  object-fit:cover}
.byl__n{font-weight:700;font-size:.98rem}
.byl__n a{color:var(--ink);text-decoration:none}
.byl__n a:hover{color:var(--actTx)}
.byl__r{font-size:.83rem;color:var(--ink2);margin-top:.1rem}
.shr{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.shr__l{font-size:.8rem;color:var(--ink2);margin-right:.15rem}
.shr a,.shr button{display:inline-flex;align-items:center;gap:.35rem;background:var(--card);
  border:1.5px solid var(--line);border-radius:999px;padding:.4rem .8rem;font-size:.82rem;
  font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer;font-family:inherit}
.shr a:hover,.shr button:hover{background:var(--act);border-color:var(--act);color:#fff}
.shr .ico{font-size:.95rem}

/* encart « en resume » */
.rsm{background:var(--soft);border:1px solid var(--line);
  border-radius:var(--r);padding:1.3rem 1.5rem 1.4rem;margin-bottom:1.8rem}
.rsm h2{font-family:"Play",sans-serif;font-weight:400;font-size:1.15rem;margin-bottom:.75rem;
  display:flex;align-items:center;gap:.5rem}
.rsm h2 .ico{font-size:1.25rem;color:var(--brand)}
.rsm ul{list-style:none;display:grid;gap:.55rem;margin:0;padding:0;position:relative}
.rsm li{position:relative;padding-left:1.15rem;font-size:.97rem;
  line-height:1.55;color:var(--ink);max-width:66ch}
.rsm li::before{content:"";position:absolute;left:0;top:.5rem;width:7px;height:7px;
  border-radius:2px;background:var(--act);transform:rotate(45deg)}
.rsm b{font-weight:700}

/* sommaire collant */
.toc{position:sticky;top:1.5rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);color:var(--ink);padding:1rem 1.1rem 1.1rem}
.toc__h{font-size:.86rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:.7rem;display:flex;align-items:center;gap:.45rem}
.toc__h .ico{font-size:1rem;color:var(--brand)}
.toc ol{list-style:none;display:grid;gap:.15rem;margin:0;padding:0;counter-reset:t}
.toc a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:baseline;
  padding:.42rem .45rem;border-radius:8px;color:var(--ink2);text-decoration:none;
  font-size:.9rem;line-height:1.4}
.toc a::before{counter-increment:t;content:counter(t,decimal-leading-zero);font-size:.74rem;
  font-weight:700;color:var(--ink2);opacity:.6;font-variant-numeric:tabular-nums}
.toc a:hover{background:var(--soft);color:var(--actTx)}
.toc a[aria-current]{background:var(--soft);color:var(--ink);font-weight:600}
.toc a[aria-current]::before{color:var(--act);opacity:1}
.toc__p{height:3px;border-radius:2px;background:var(--line);margin-top:.9rem;overflow:hidden}
.toc__p span{display:block;height:100%;width:0;background:var(--brand);border-radius:2px}
@media (max-width:999px){.toc{position:static}}

/* questions frequentes dans l'article */
.afq{padding:1.6rem 0 .4rem}
.afq h2{font-family:"Play",sans-serif;font-weight:400;
  font-size:clamp(1.3rem,1.1rem+1vw,1.75rem);margin-bottom:.9rem}
.afq__l{display:grid;gap:.6rem;max-width:72ch}

/* sources */
.srcs{padding:1.3rem 0;border-bottom:1px solid var(--line)}
.srcs__h{font-size:.86rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:.6rem}
.srcs ol{list-style:none;display:grid;gap:.4rem;margin:0;padding:0;counter-reset:sr}
.srcs li{position:relative;padding-left:1.5rem;font-size:.9rem;line-height:1.5}
.srcs li::before{counter-increment:sr;content:counter(sr) ".";position:absolute;left:0;top:0;
  color:var(--ink2);font-weight:700;font-variant-numeric:tabular-nums}
.srcs a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.srcs a:hover{color:var(--actTx);border-color:currentColor}
.srcs em{font-style:normal;color:var(--ink2);font-size:.84rem}

/* boite auteur */
.abx{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1.3rem 1.4rem;margin:1.5rem 0}
.abx .avt{width:62px;height:62px;font-size:1.7rem}
.abx h2{font-family:"Play",sans-serif;font-weight:400;font-size:1.3rem}
.abx__r{font-size:.85rem;color:var(--ink2);margin-top:.15rem}
.abx p{font-size:.95rem;line-height:1.65;color:var(--ink);margin-top:.7rem;max-width:64ch}
/* ── les profils de l'auteur ──
   Quatre pastilles au plus, dans l'ordre de l'usage professionnel. Les
   logos de marque ne se lisent qu'en plein (.ico--f) ; le globe du site
   personnel reste au trait, comme le reste des icones du site. */
.abx__s{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.85rem;padding:0;list-style:none}
.abx__s a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--soft);border:1px solid var(--line);color:var(--ink2);
  font-size:.95rem;transition:background .16s,border-color .16s,color .16s}
.abx__s a:hover{background:var(--act);border-color:var(--act);color:#fff}
.abx__s a:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

.abx__m{display:inline-flex;align-items:center;gap:.4rem;margin-top:.85rem;font-weight:700;
  font-size:.9rem;color:var(--actTx);text-decoration:none}
.abx__m:hover{color:var(--actHv);gap:.6rem}
.abx__m .ico{font-size:1rem;transition:transform .18s}
@media (max-width:560px){.abx{grid-template-columns:1fr}}

/* produits lies a l'article */
.apr{padding:1.8rem 0 .6rem}
.apr__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.5rem 1rem;margin-bottom:1rem}
.apr__h h2{font-family:"Play",sans-serif;font-weight:400;
  font-size:clamp(1.3rem,1.1rem+1vw,1.75rem)}
.apr__h p{font-size:.9rem;color:var(--ink2)}
.apr__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
@media (min-width:720px){.apr__g{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* article precedent / suivant */
.pnv{display:grid;gap:.8rem;padding:1.8rem 0 2.5rem;border-top:1px solid var(--line)}
@media (min-width:720px){.pnv{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pnv a{display:grid;gap:.35rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:.95rem 1.15rem;text-decoration:none;color:var(--ink)}
.pnv a:hover{border-color:var(--brand)}
.pnv__d{font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.pnv__t{font-weight:600;line-height:1.4;font-size:.97rem}
.pnv a:hover .pnv__t{color:var(--actTx)}
.pnv .nx2{text-align:right}