.rd *{box-sizing:border-box;margin:0;padding:0}
.rd{--cream:#FBF6EE;--page:#FAF9F7;--card:#FFF;--ink:#14162B;--ink2:#5A5F72;--muted:#6B7082;
 --line:#EDEAE3;--grid:#F1EEE7;--brand:#F7931A;--s1:#EB6834;--s2:#2A78D6;--s3:#1BAF7A;--s4:#EDA100;
 /* `--muted` valait #8A8FA0, soit 3,22 de contraste sur blanc, sous le seuil de 4,5 exigé
    pour un texte de cette taille. Il porte la ligne d'état, la mention de source et le pied
    de page, c'est-à-dire précisément ce qui atteste d'où viennent les chiffres : le texte le
    moins lisible du site était celui qui fonde sa crédibilité. Mesuré le 21 août 2026 sur les
    douze pages, il vaut désormais 4,92 sur blanc et 4,68 sur le fond de page.
    `--lien` est distinct de `--s2` : celui-ci est une couleur de série, la darkening du lien
    n'a pas à déplacer la courbe du premier cycle de halving. */
 --lien:#2069C2;
 --good:#006300;--bad:#D03B3B;
 font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--page);
 min-height:100vh;-webkit-font-smoothing:antialiased}
.rd button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.rd input,.rd select{font:inherit;color:inherit}

.rd-top{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.rd-ti{max-width:1200px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.rd-logo{display:flex;align-items:center;gap:0;font-size:19px;font-weight:800;letter-spacing:-.6px}
.rd-logo svg{width:24px;height:24px;margin-right:9px}.rd-logo em{font-style:normal;color:var(--brand)}
.rd-nav{display:flex;gap:2px;flex-wrap:wrap}
.rd-nav button{padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.rd-nav button:hover{background:rgba(20,22,43,.05)}
.rd-nav button[aria-current="page"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,22,43,.09)}
.rd-r{margin-left:auto;display:flex;align-items:center;gap:9px}
.rd-dev{display:flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px}
.rd-dev button{padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--muted)}
.rd-dev button[aria-pressed="true"]{background:var(--ink);color:#fff}
.rd-demo{font-size:11px;font-weight:700;color:#8a5a00;background:#FFF4DC;border:1px solid #F5DFA8;
 padding:5px 11px;border-radius:999px}

.rd-w{max-width:1200px;margin:0 auto;padding:24px 24px 80px}
/* Le titre à gauche, le partage du tableau de bord à droite : c'est la page qu'on partage,
   il est donc à hauteur de son titre. Il se replie sous l'introduction sur un téléphone. */
.rd-intro{margin-bottom:20px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rd-intro > div{min-width:0}
.rd-intro h1{font-size:26px;font-weight:800;letter-spacing:-1px}
.rd-intro p{font-size:13.5px;color:var(--ink2);margin-top:7px;max-width:660px}
.rd-g{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start}
/* Une page qui ne porte qu'un module : une colonne centrée, ni trou à droite ni module
   étiré sur toute la largeur. */
.rd-g.seul{grid-template-columns:minmax(0,640px);justify-content:center}
.rd-c{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px 22px;position:relative}
.rd-c.l{grid-column:1/-1}
.rd-ch{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.rd-ch h2 a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.rd-ch h2 a:hover{border-bottom-color:var(--brand);color:var(--brand)}
.rd-ch h2{font-size:14.5px;font-weight:700;letter-spacing:-.2px}
.rd-ch p{font-size:12.5px;color:var(--muted);margin-top:3px}
.rd-act{margin-left:auto;display:flex;gap:4px;flex:0 0 auto;position:relative}
/* Le menu de partage d'un module s'ancre sous son bouton et ne propose que l'image : le
   lien, lui, désigne la page entière et se partage depuis la page. */
.rd-part{position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:212px;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:7px;
  box-shadow:0 12px 30px rgba(20,22,43,.16);display:flex;flex-direction:column;gap:1px;
  text-align:left}
.rd-part button{display:block;width:100%;padding:9px 12px;border-radius:10px;
  font-size:13px;font-weight:600;color:var(--ink2);text-align:left;background:none;
  transition:background .12s,color .12s}
.rd-part button:hover{background:#F6F2EA;color:var(--ink)}
/* `display:block` ci-dessus l'emporte sur le `display:none` par défaut de [hidden] : sans
   cette ligne, le partage natif reste affiché et grisé là où le navigateur ne sait pas le
   faire. Une entrée de menu qu'on ne peut jamais cliquer n'a rien à faire dans le menu. */
.rd-part button[hidden]{display:none}
@media(max-width:520px){.rd-part{width:min(212px,calc(100vw - 56px))}}
.rd-ib{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:var(--muted);
 border:1px solid transparent;font-size:12px;font-weight:800}
.rd-ib:hover{background:#F6F2EA;color:var(--ink);border-color:var(--line)}
.rd-ib svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rd-info{display:none;background:#F7F4ED;border-radius:14px;padding:13px 16px;font-size:12.5px;
 color:var(--ink2);margin-bottom:14px}
.rd-info.on{display:block}
.rd-val{font-size:34px;font-weight:800;letter-spacing:-1.4px;line-height:1.05}
.rd-sub{font-size:12.5px;font-weight:600;color:var(--ink2);margin-top:7px}
.up{color:var(--good)}.dn{color:var(--bad)}
.rd-plot{position:relative;width:100%}
/* La légende d'un graphique : une phrase qui nomme le dessin. Elle vit en pied de carte, face
   à la mention de source, depuis que la ligne d'état est partie — c'est le pied de graphique
   classique, un côté qui nomme, l'autre qui dit d'où viennent les chiffres. Visible, et c'est
   le point : le moteur lit ce qui s'affiche, et le SVG la désigne par `aria-labelledby`. */
.rd-cap{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted);flex:1 1 auto;min-width:0}
.rd-cap:empty{display:none}
/* pan-y et non auto : un glissement horizontal sur la courbe nous revient au lieu d'être
   avalé par le défilement, ce qui rend le graphique lisible au doigt. Le défilement
   vertical de la page, lui, continue de fonctionner par-dessus. */
.rd-plot svg{display:block;width:100%;overflow:visible;touch-action:pan-y}
.rd-tip{position:absolute;pointer-events:none;background:#fff;border:1px solid var(--line);border-radius:14px;
 padding:10px 12px;font-size:12.5px;box-shadow:0 6px 22px rgba(20,22,43,.13);opacity:0;transition:opacity .12s;
 min-width:150px;max-width:270px;z-index:5}
.rd-tip em{display:block;font-size:11.5px;font-style:normal;font-weight:700;line-height:1.3;margin-bottom:3px}
.rd-tip b{display:block;font-size:11px;color:var(--muted);font-weight:700;margin-bottom:5px}
.rd-tip div{display:flex;align-items:center;gap:8px;margin-top:3px;font-weight:600}
.rd-tip i{margin-left:auto;font-style:normal;font-variant-numeric:tabular-nums}
.rd-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;background:#D8D4CA}
.rd-lg{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:10px}
.rd-lg span{display:flex;align-items:center;gap:7px}

/* Le cadran a cote de ses mesures, comme l'anneau du halving a cote des siennes. Il garde une
   largeur fixe et les lignes prennent ce qui reste ; sous 640 px les deux s'empilent. */
.rd-may{display:flex;gap:26px;align-items:center;margin-top:16px;flex-wrap:wrap}
.rd-may>svg{flex:0 0 auto}
.rd-may>.rd-rows{flex:1 1 260px;min-width:0}
@media(max-width:640px){.rd-may{gap:10px}.rd-may>svg{margin:0 auto}}
.rd-rows{display:flex;flex-direction:column}
.rd-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--grid);font-size:13.5px}
.rd-row:last-child{border-bottom:none}
.rd-row .nm{font-weight:600}
.rd-row .rt{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.rd-row .rt small{display:block;font-size:11px;color:var(--muted);font-weight:600}
.rd-meth{font-size:11.5px;color:var(--muted);margin-top:12px}
.rd-meth a{color:var(--lien);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* La barre de partage vit désormais hors de la grille des modules : elle appartient à la
   page. Plus de `grid-column`, et une vraie marge au-dessus. */
.rd .rd-bar{display:flex;justify-content:center;margin-top:22px}
.rd .rd-add{grid-column:1/-1;border:1.5px dashed #DCD7CC;border-radius:22px;padding:22px;text-align:center;
 font-size:13.5px;font-weight:700;color:var(--ink2);background:transparent}
.rd .rd-add:hover{background:#FDFBF7;border-color:var(--brand);color:var(--ink)}
.rd .rd-cp{border:1.5px solid var(--ink);border-radius:999px;padding:8px 15px;font-size:12.5px;font-weight:700}

.rd-mod{position:fixed;inset:0;background:rgba(20,22,43,.45);z-index:90;display:none;
 align-items:center;justify-content:center;padding:20px}
.rd-mod.on{display:flex}
.rd-box{background:#fff;border-radius:24px;padding:26px;max-width:600px;width:100%;max-height:82vh;overflow:auto}
.rd-box h3{font-size:18px;font-weight:800;letter-spacing:-.5px}
.rd-box>p{font-size:13px;color:var(--muted);margin:6px 0 18px}
.rd-cat{font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;
 margin:16px 0 8px}
.rd-pick{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line);
 border-radius:14px;margin-bottom:7px;cursor:pointer;font-size:13.5px;font-weight:600}
.rd-pick:hover{background:#FBF9F4}
.rd-pick[aria-pressed="true"]{border-color:var(--ink);background:#FBF9F4}
.rd-pick i{width:18px;height:18px;border-radius:6px;border:1.5px solid #D3CFC5;flex:0 0 18px;display:grid;
 place-items:center;font-style:normal;font-size:12px;color:#fff}
.rd-pick[aria-pressed="true"] i{background:var(--ink);border-color:var(--ink)}
.rd-pick span{color:var(--muted);font-weight:500;font-size:12px;margin-left:auto;text-align:right}
.rd-close{display:block;margin:18px auto 0;background:var(--ink);color:#fff;border-radius:999px;
 padding:11px 24px;font-size:13.5px;font-weight:700}
.rd-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;background:var(--ink);color:#fff;
 padding:13px 20px;border-radius:14px;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;
 transition:.25s;z-index:100}
.rd-toast.on{opacity:1;transform:translateX(-50%) translateY(-6px)}
@media(max-width:860px){
 .rd-ti{padding:11px 14px;gap:11px}.rd-w{padding:18px 13px 60px}
 .rd-g{grid-template-columns:1fr}.rd-c{padding:17px 15px;border-radius:18px}
 .rd-intro h1{font-size:21px}.rd-val{font-size:27px}
 .rd-r{width:100%;margin-left:0}.rd-nav button{padding:7px 11px;font-size:12.5px}
 /* Sur un écran étroit l'infobulle mangeait la moitié du graphique : elle porte le même
    contenu, en plus resserré, pour qu'on voie encore la courbe qu'on est en train de lire. */
 .rd-tip{padding:7px 9px;font-size:11.5px;min-width:0;max-width:min(228px,72%);border-radius:11px}
 .rd-tip em{font-size:10.5px;line-height:1.25}
 .rd-tip b{font-size:10px;margin-bottom:3px}
 .rd-tip div{gap:6px;margin-top:2px}
 .rd-dot{width:7px;height:7px;flex:0 0 7px}
}

/* ---- liens de navigation (pages réelles) ---- */
.rd-nav a{padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink2);
  text-decoration:none;display:inline-block}
.rd-nav a:hover{background:rgba(20,22,43,.05)}
.rd-nav a[aria-current="page"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,22,43,.09)}
.rd-logo{text-decoration:none;color:inherit}
.rd .rd-w{display:block}
/* Liste des grandes dates : chaque ligne est un interrupteur. Cochée, son repère est
   sur la courbe ; décochée, la ligne s'efface visuellement sans disparaître. */
.rd-ev .rd-evl{display:flex;width:100%;text-align:left;align-items:flex-start;gap:18px;
  padding:13px 12px 13px 10px;border-radius:12px;border-bottom:1px solid var(--line);
  transition:background .15s,opacity .15s}
.rd-ev .rd-evl:last-child{border-bottom:0}
.rd-ev .rd-evl:hover:not([disabled]){background:#FBFAF7}
.rd-ev .rd-evl[aria-pressed="false"]{opacity:.42}
.rd-ev .rd-evl[disabled]{cursor:default;opacity:.62}
.rd-ev .nm{font-weight:600;line-height:1.45;flex:1;min-width:0}
.rd-ev .nm b{font-weight:800;margin-right:6px;color:var(--ink2)}
.rd-ev .nm small{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:3px;max-width:62ch}
.rd-ev .nm i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:7px;font-style:normal;font-size:11px;font-weight:800;margin-right:9px;vertical-align:2px;
  border:1.5px solid #D8D2C6;background:#fff;color:var(--muted);transition:background .15s,color .15s,border-color .15s}
/* L'encre sur l'orange plutôt que le blanc : blanc sur #F7931A ne fait que 2,3 de contraste
   pour un texte de onze pixels, l'encre en fait 7,75. */
.rd-ev .rd-evl.on .nm i{background:var(--brand);border-color:var(--brand);color:var(--ink)}
.rd-ev .rt{white-space:nowrap;text-align:right;font-weight:700}
@media(max-width:600px){.rd-ev .rd-evl{flex-direction:column;gap:5px}.rd-ev .rt{text-align:left}}

.rd-pied{max-width:1200px;margin:0 auto;padding:26px 24px 50px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted)}
.rd-pied p+p{margin-top:8px}
.rd-pied a{color:var(--lien);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media(max-width:860px){.rd-nav a{padding:7px 11px;font-size:12.5px}@media(max-width:600px){.rd-ev .rd-evl{flex-direction:column;gap:5px}.rd-ev .rt{text-align:left}}

.rd-pied{padding:20px 14px 40px}}

/* ---------- pied de carte et panneau de réglages ---------- */
/* La légende à gauche, la source à droite. La légende prend la place qui reste et la source
   ne se coupe jamais : `flex:0 0 auto` sur elle, `flex:1 1 auto` sur la légende. */
.rd-bas{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
/* `margin-left:auto` et non `justify-content:space-between` : un module sans légende n'a
   qu'un seul enfant dans ce pied, et l'espacement l'aurait alors poussé à gauche. */
.rd-src{font-size:11.5px;color:var(--muted);text-align:right;flex:0 0 auto;margin-left:auto}
.rd-rg{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:start;
  padding:13px 0;border-bottom:1px solid #EFEBE2}
.rd-rg:last-of-type{border-bottom:1px solid #EFEBE2}
.rd-rg-l{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.07em;padding-top:8px}
.rd-rg-c{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rd-rg-n{flex-basis:100%;font-size:11.5px;color:var(--muted)}
.rd-seg{display:inline-flex;background:#F1EDE4;border-radius:999px;padding:3px;gap:2px}
.rd-seg button{padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;
  color:var(--ink2);white-space:nowrap;transition:background .15s,color .15s}
.rd-seg button:hover{color:var(--ink)}
.rd-seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(20,22,43,.14)}
/* La plage libre, sous les six paliers. Les deux champs se replient l'un sous l'autre
   quand la place manque, plutôt que de sortir de la carte sur un téléphone. */
/* Les deux dates vivent sous le curseur, qui dit la meme fenetre en duree : un filet d'air
   entre les deux, pour qu'on lise deux reglages et non un bloc. */
.rd-cur + .rd-plage{margin-top:11px}
.rd-plage{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.rd-plage label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  font-weight:600;color:var(--ink2);min-width:0}
.rd-plage input{flex:1 1 auto;min-width:0;width:9.4em;padding:6px 9px;border:1px solid var(--line);
  border-radius:10px;background:#fff;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink)}
.rd-plage input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
.rd-plage.on input{border-color:var(--brand)}
/* Le curseur de longueur de moyenne, 9 septembre 2026. Le libellé vit à droite du rail et
   non au-dessus : il change à chaque cran, et un texte qui saute au-dessus d'un contrôle
   qu'on tient fait bouger le rail sous le doigt. Sa largeur est réservée en `ch` pour que
   « Moyenne 9 jours » et « Moyenne 104 semaines » n'en changent pas la position. */
/* Le curseur passe sous les boutons d'unité, dans la même rangée : les deux règlent une
   seule grandeur, la longueur de la moyenne, et la rangée voisine en règle une autre, la
   période. C'est la séparation visuelle qui empêche de les confondre. */
.rd-rg-c .rd-seg + .rd-cur{margin-top:10px}
/* Le curseur prend toute la largeur de sa rangée : sans cela il partage la place avec la
   plage de dates du module Performance, et son libellé retombe sous le rail au lieu de
   rester à sa droite. */
.rd-rg-c .rd-cur{width:100%}
.rd-cur{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;min-width:0}
@media(max-width:520px){.rd-cur{flex-wrap:wrap}}
.rd-cur output{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;
 min-width:13.5ch;font-variant-numeric:tabular-nums}
.rd-cur input[type=range]{flex:1 1 190px;min-width:150px;height:22px;background:none;
 -webkit-appearance:none;appearance:none;cursor:pointer}
.rd-cur input[type=range]:focus{outline:none}
.rd-cur input[type=range]:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:999px}
.rd-cur input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:#E7E2D8}
.rd-cur input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:#E7E2D8}
.rd-cur input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
 width:20px;height:20px;margin-top:-7px;border-radius:50%;background:var(--brand);
 border:3px solid #fff;box-shadow:0 1px 4px rgba(20,22,43,.3)}
.rd-cur input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
 background:var(--brand);border:3px solid #fff;box-shadow:0 1px 4px rgba(20,22,43,.3)}
@media(max-width:520px){.rd-plage label{flex:1 1 100%}}
/* Un seul filet entre le dernier réglage et le pied du panneau : la dernière rangée garde son
   trait, le pied n'en ajoute pas. Les deux ensemble en dessinaient deux, parce que
   `.rd-rg:last-of-type` compte les `div` et non les rangées, et que le pied en est un. */
.rd-pied-pan{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:15px}
.rd-pied-pan > span{font-size:11.5px;color:var(--muted)}
.rd .rd-std{font-size:11.5px;font-weight:600;color:var(--muted);padding:6px 14px;
  border:1px solid var(--line);border-radius:999px;background:#fff;transition:border-color .15s,color .15s}
.rd .rd-std:hover{border-color:var(--brand);color:var(--brand)}
.rd-std:hover{border-color:var(--ink);color:var(--ink)}
@media(max-width:700px){
 .rd-rg{grid-template-columns:1fr;gap:8px}.rd-rg-l{padding-top:0}
 /* Six paliers ne tiennent pas sur une ligne de téléphone : le groupe se replie en deux
    rangs au lieu de déborder de la carte. Le coin s'arrondit moins pour que deux rangs
    dans une même gélule restent lisibles comme un seul réglage. */
 .rd-seg{flex-wrap:wrap;border-radius:20px;gap:3px}
 .rd-seg button{padding:6px 11px}
 .rd-bas{flex-direction:column;align-items:flex-start;gap:8px}
  .rd-src{text-align:left;margin-left:0}}

.rd-c .bd + .rd-lg{margin-top:14px}

/* ---------- le module du livre blanc, 10 septembre 2026 ----------
   Le premier module du site qui porte du texte et des liens plutôt qu'une mesure. Il reprend
   les blocs existants là où il peut, `rd-rows` pour sa fiche, et n'ajoute que ce qu'aucun
   module ne savait faire : un sommaire en deux colonnes et deux boutons de lecture. */
.rd-lbc{font-size:14.5px;line-height:1.62;color:var(--ink2);max-width:70ch}
.rd-lbh{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin:24px 0 12px}
.rd-lbs{list-style:none;counter-reset:lb;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px 30px;margin:0;padding:0}
/* Le `gap` ne vaut que pour les colonnes : appliqué aussi aux lignes, il s'ajoutait au
   `margin-top` de l'explication et ouvrait douze fois un blanc plus large entre un titre et
   sa phrase qu'entre deux sections. */
.rd-lbs li{counter-increment:lb;display:grid;grid-template-columns:26px 1fr;gap:0 10px;
  align-content:start;font-size:13px;line-height:1.45}
/* Le chiffre est encre sur orange de marque, jamais blanc : `--brand` ne fait que 2,30 de
   contraste sur blanc, et un blanc posé dessus tomberait au même endroit. En encre, le
   rapport vaut 7,1. C'est la leçon du 14 août, appliquée à un élément neuf. */
.rd-lbs li::before{content:counter(lb);display:grid;place-items:center;width:22px;height:22px;
  border-radius:50%;background:var(--brand);color:var(--ink);font-size:11.5px;font-weight:700}
/* ⚠️ **Le titre et l'explication se posent dans la deuxième colonne, explicitement.** Sans
   cette ligne, ils sont deux enfants de plus de la grille : le titre prenait la cellule
   voisine du numéro, et l'explication repartait sous le numéro, dans une colonne de 26 px,
   soit un mot par ligne sur douze sections. **Une grille compte ses enfants, pas ses
   intentions.** */
.rd-lbs b{grid-column:2;font-weight:650;color:var(--ink)}
.rd-lbs span{grid-column:2;color:var(--muted);margin-top:2px}
.rd-lbl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:24px}
.rd-lbl a{display:inline-block;padding:9px 15px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-size:13px;font-weight:600;text-decoration:none}
.rd-lbl a:first-child{background:var(--ink);border-color:var(--ink);color:#fff}
.rd-lbl a:hover{filter:brightness(.96)}
.rd-lbl p{flex-basis:100%;margin:2px 0 0;font-size:11.5px;color:var(--muted)}
@media(max-width:860px){.rd-lbs{grid-template-columns:1fr}.rd-lbh{margin-top:20px}}
/* Une ligne d'infobulle sans pastille s'aligne sur celles qui en ont une : la gouttière
   vaut la pastille plus son écart, sans quoi les deux libellés partiraient de deux abscisses
   différentes dans la même bulle. */
.rd-tip div.pl-x{padding-left:16px;color:var(--ink2)}
@media(max-width:860px){.rd-tip div.pl-x{padding-left:13px}}

/* ---------- le bouton de repli, 11 septembre 2026 ----------
   Il ouvre la liste des dates, repliée par défaut pour que le graphique tienne dans un écran.
   Pleine largeur et centré : c'est une bande de séparation autant qu'un bouton, et sa surface
   de clic doit être évidente au doigt. */
.rd-dep{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.rd-dep button{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  padding:10px 14px;border-radius:12px;font-size:13px;font-weight:650;color:var(--ink2)}
.rd-dep button:hover{background:#F6F2EA;color:var(--ink)}
.rd-dep svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}
.rd-dep button[aria-expanded="true"] svg{transform:rotate(180deg)}
/* La liste ouverte se sépare de son bouton, sinon la première date colle au libellé. */
.rd-dep + .rd-ev{margin-top:12px}
/* ⚠️ **`[hidden]` ne suffit pas quand une autre règle pose un `display`.** `.rd-rows` est en
   `display:flex`, plus spécifique que le `display:none` que le navigateur attache à l'attribut :
   la liste gardait ses onze lignes et ses mille pixels, l'attribut étant pourtant bien posé.
   C'est le deuxième endroit du site où ce piège se referme, après le partage natif du menu.
   **Un attribut `hidden` se double d'une règle dès que l'élément a un `display` à lui.** */
.rd-rows[hidden]{display:none}

/* ---------- la rubrique Ressources, 11 septembre 2026 ----------
   Le premier article du site. Tout est rendu au build : ces règles n'habillent donc jamais
   un contenu que le visiteur attendrait, elles habillent un contenu déjà là.

   ⚠️ **Aucune de ces règles ne redéfinit une variable ni ne touche à une classe `rd-`.** Les
   couleurs, la largeur de page, le bandeau, le pied, `rd-cap` et `rd-src` viennent du site et
   restent la seule source : un article qui se repeint lui-même devient une deuxième charte à
   tenir, et les deux divergent au premier changement. */

/* Le fil d'ariane, rendu pour toute page qui déclare un parent. */
.rd-fil{font-size:12.5px;color:var(--muted);margin-bottom:12px}
.rd-fil a{color:var(--muted);text-decoration:none}
.rd-fil a:hover{text-decoration:underline}
.rd-fil span{margin:0 6px}

/* Une page d'article respire autrement qu'une page de données : le titre et le chapô y sont
   du texte à lire, pas l'étiquette d'une grille de modules. */
.art .rd-intro h1{font-size:32px;line-height:1.14;max-width:900px}
.art .rd-intro p{font-size:16.5px;line-height:1.6;max-width:720px;margin-top:13px}
/* ⚠️ **`.ar-corps` enveloppe le texte d'un article depuis le 11 septembre 2026**, là où
   `.rd-g` le faisait. L'article du multiple de Mayer a besoin que `#rdG` soit un nœud
   *à l'intérieur* du texte, à l'endroit où le module tombe, et non l'enveloppe du texte
   entier : `rendre()` réécrit `#rdG` à chaque quart d'heure, et il aurait emporté trois
   mille mots avec le module. */
.ar-corps{display:block}
/* `.art .rd-g` ne désigne donc plus le corps mais le module qu'un article porte : un seul,
   en pleine largeur, avec l'air d'une section, parce qu'il coupe le fil du texte comme un H2.
   Les mêmes 76 px que `.ar-s`, et les mêmes 56 px sous 640 px : un objet qui interrompt la
   lecture respire comme un titre, pas comme un paragraphe. */
.art .rd-g{display:block;margin-top:76px}

/* ⚠️ **La date de mise à jour se lit sous l'image à la une, centrée**, et non au-dessus d'elle
   comme à la première écriture. Elle y fait office de légende : l'image annonce le sujet, la date
   dit de quand date la vérification, et le lecteur a les deux avant le sommaire. `width:fit-content`
   plutôt qu'un `text-align:center` sur le parent, parce que la pastille est un `flex` : elle doit
   se rétrécir à son contenu avant d'être centrée, sans quoi elle occupe toute la ligne. */
.ar-maj{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px;width:fit-content;
  margin:18px auto 0;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:5px 13px;font-weight:600}
.ar-maj i{width:6px;height:6px;border-radius:50%;background:var(--s3);display:block}

/* Les illustrations. Sans légende : elles n'apportent aucune information que le texte ne
   porte déjà, et une légende qui répète le paragraphe voisin est du bruit — c'est la règle
   « jamais deux fois la même information sur un visuel ».
   `width` et `height` sont posés par le build d'après le fichier réel : la place est réservée
   avant le chargement, donc rien ne saute sous le doigt du lecteur. */
/* Les objets d'un article se centrent, son texte reste à gauche. C'est le parti pris de mise en
   page posé le 11 septembre 2026 : la colonne de lecture garde son fil à gauche, et tout ce qui
   n'est pas du texte courant, image, encadré ou foire aux questions, vient se poser au milieu de
   la largeur. Un bloc étroit collé à gauche sous un tableau pleine largeur paraît tombé là. */
.ar-vis{margin:30px auto;max-width:560px}
.ar-vis img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--line)}

/* Sommaire */
.ar-som{margin:26px 0 0;background:var(--cream);border:1px solid var(--line);border-radius:22px;padding:18px 20px}
.ar-som p{font-size:12px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.ar-som ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;counter-reset:s;margin:0;padding:0}
.ar-som a{display:inline-block;padding:7px 13px;background:#fff;border:1px solid var(--line);border-radius:999px;
  font-size:13px;font-weight:600;color:var(--ink2);text-decoration:none}
.ar-som a:hover{border-color:var(--ink);color:var(--ink)}
.ar-som a::before{counter-increment:s;content:counter(s) ". ";color:var(--brand);font-weight:800}

/* Sections */
.ar-s{margin-top:76px;scroll-margin-top:76px}
.ar-s>h2{font-size:25px;font-weight:800;letter-spacing:-.8px;line-height:1.2;max-width:820px}
.ar-s>h2::before{content:"";display:block;width:34px;height:3px;background:var(--brand);border-radius:2px;margin-bottom:15px}
.ar-s h3{font-size:17.5px;font-weight:700;letter-spacing:-.35px;margin-top:32px;max-width:760px}
/* Un titre qui suit un objet, et non un paragraphe, a besoin de plus que l'interligne courant :
   le tableau ou l'encadré qui le précède porte déjà son propre cadre. */
.ar-tw + h3,.ar-note + h3,.ar-vis + h3{margin-top:44px}
.ar-t{font-size:16px;line-height:1.68;color:var(--ink2);max-width:720px;margin-top:14px}
.ar-t a{color:var(--lien);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ar-t code,.ar-l code{background:var(--cream);border:1px solid var(--line);border-radius:6px;padding:1px 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;color:var(--ink)}
.ar-l{max-width:720px;margin-top:14px;list-style:none;padding:0}
.ar-l li{font-size:16px;line-height:1.6;color:var(--ink2);padding:8px 0 8px 22px;position:relative}
.ar-l li::before{content:"";position:absolute;left:2px;top:17px;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.ar-note{max-width:720px;margin:28px auto;background:#F7F4ED;border-radius:14px;padding:15px 18px;
  font-size:14px;line-height:1.55;color:var(--ink2)}

/* Le tableau d'une famille de comptes */
.ar-tw{margin-top:20px;overflow-x:auto;border:1px solid var(--line);border-radius:22px;background:var(--card)}
.ar-tab{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.ar-tab th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.85px;text-transform:uppercase;
  color:var(--muted);padding:14px 18px;border-bottom:1px solid var(--line);background:var(--cream)}
.ar-tab td{padding:14px 18px;border-bottom:1px solid var(--grid);vertical-align:top;color:var(--ink2);line-height:1.5}
.ar-tab tr:last-child td{border-bottom:0}
.ar-tab .nm{font-weight:700;color:var(--ink);white-space:nowrap}
.ar-tab .qq{min-width:260px}
.ar-h{display:inline-flex;align-items:center;gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;font-weight:600;color:var(--lien);text-decoration:none;white-space:nowrap;
  background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.ar-h:hover{border-color:var(--lien);background:#fff}
.ar-h svg{width:9px;height:9px;flex:0 0 auto;opacity:.6}
.ar-fl{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;margin-left:7px;vertical-align:2px}

/* Le composeur de veille */
.ar-mod{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px}
.ar-mh{font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--muted)}
.ar-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:16px;align-items:start}
.ar-picks{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ar-pick{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1px solid var(--line);
  border-radius:14px;cursor:pointer;font-size:13.5px;font-weight:600;text-align:left;width:100%;line-height:1.35}
.ar-pick:hover{border-color:var(--ink2)}
.ar-pick[aria-pressed="true"]{border-color:var(--ink);background:#FBF9F4}
.ar-pick i{width:17px;height:17px;border-radius:6px;border:1.5px solid var(--line);flex:0 0 auto;margin-top:1px;
  display:grid;place-items:center;font-style:normal;font-size:10px;color:transparent}
.ar-pick[aria-pressed="true"] i{background:var(--brand);border-color:var(--brand);color:#fff}
.ar-pick small{display:block;font-weight:500;color:var(--muted);font-size:11.5px;margin-top:2px}
.ar-vider{font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:underline;
  text-underline-offset:3px;margin-top:12px}

/* Le diagramme de couverture. Il ne redit pas la liste : il nomme ce qu'elle ne couvre pas. */
.ar-cov{list-style:none;margin:0;padding:0}
.ar-cov li{display:grid;grid-template-columns:132px 1fr 30px;align-items:center;gap:10px;padding:6px 0;font-size:12.5px}
.ar-cov .f{font-weight:600;color:var(--ink2);line-height:1.28}
.ar-bar{height:9px;border-radius:5px;background:var(--grid);overflow:hidden}
.ar-bar span{display:block;height:100%;background:var(--brand);border-radius:5px;transition:width .28s ease}
.ar-cov .n{text-align:right;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ar-cov li.zero .n{color:var(--muted);font-weight:500}
.ar-cov li.zero .f{color:var(--muted)}

/* La sortie du composeur */
.ar-out{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.ar-nb{font-variant-numeric:tabular-nums}
.ar-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ar-chip{display:inline-flex;align-items:center;gap:7px;background:var(--cream);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--ink2)}
.ar-chip em{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--muted)}
.ar-cp{margin-top:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* ⚠️ La couleur est portée par « .rd .ar-btn » et non « .ar-btn » seul : le sélecteur
   « .rd button » de la charte pose `color:inherit` et l'emporterait sur une classe seule. */
.rd .ar-btn{background:var(--ink);color:#fff;border-radius:999px;padding:10px 20px;
  font-size:13.5px;font-weight:700;transition:box-shadow .15s,transform .15s}
.rd .ar-btn:hover{box-shadow:0 5px 16px rgba(20,22,43,.22);transform:translateY(-1px)}
.rd .ar-btn.ok{background:var(--good)}
.rd .ar-btn2{border:1.5px solid var(--ink);color:var(--ink);border-radius:999px;padding:9px 18px;
  font-size:13px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:7px;
  transition:background .15s}
.rd .ar-btn2:hover{background:#FBF9F4}
.rd .ar-btn2 svg{width:10px;height:10px;opacity:.55}

/* Le pas-à-pas d'abonnement, sous la zone de copie */
.ar-how{margin-top:16px;border:1px solid var(--line);border-radius:16px;background:var(--cream);overflow:hidden}
.ar-how summary{list-style:none;cursor:pointer;padding:13px 16px;font-size:13.5px;font-weight:700;
  color:var(--ink);position:relative;padding-right:36px}
.ar-how summary::-webkit-details-marker{display:none}
.ar-how summary::after{content:"";position:absolute;right:16px;top:18px;width:7px;height:7px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.ar-how[open] summary::after{transform:rotate(-135deg);top:21px}
.ar-how ol{list-style:none;counter-reset:e;padding:0 16px 6px;margin:0}
.ar-how li{counter-increment:e;position:relative;padding:0 0 14px 32px;font-size:13.5px;line-height:1.55;color:var(--ink2)}
.ar-how li::before{content:counter(e);position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center}
.ar-how li a{color:var(--lien);font-weight:600;text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.ar-how p{padding:0 16px 14px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.ar-fp{margin-top:10px;font-size:12px;line-height:1.5;color:var(--muted);max-width:680px}
.ar-ta{width:100%;margin-top:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--cream);color:var(--ink2);
  resize:vertical;min-height:72px;line-height:1.6}
.ar-vide{font-size:14px;color:var(--muted);margin-top:14px}
.ar-pied2{display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding-top:14px;border-top:1px solid var(--grid)}

/* Foire aux questions */
.ar-faq{max-width:820px;margin:22px auto 0}
.ar-q{border-bottom:1px solid var(--line)}
.ar-q summary{list-style:none;cursor:pointer;padding:16px 34px 16px 0;font-size:16px;font-weight:700;
  color:var(--ink);position:relative;line-height:1.4}
.ar-q summary::-webkit-details-marker{display:none}
.ar-q summary::after{content:"";position:absolute;right:6px;top:22px;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.ar-q[open] summary::after{transform:rotate(-135deg);top:25px}
.ar-q p{font-size:15.5px;line-height:1.62;color:var(--ink2);padding:0 0 18px}

/* Clôture */
.ar-fin{margin-top:52px;background:var(--cream);border:1px solid var(--line);border-radius:22px;padding:24px 26px}
/* Le texte de clôture se centre dans son encadré : celui-ci fait toute la largeur, un
   paragraphe collé à gauche y laissait un tiers de vide à droite. */
.ar-fin p{font-size:16px;line-height:1.68;color:var(--ink2);max-width:760px;margin:0 auto}
.ar-fin a{color:var(--lien);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* La liste des ressources, sur la page d'index de la rubrique */
.ar-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:4px}
.ar-carte{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s}
.ar-carte:hover{border-color:var(--ink2);box-shadow:0 6px 18px rgba(20,22,43,.07)}
.ar-carte img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}
.ar-carte .cr{padding:18px 20px 20px}
.ar-carte h2{font-size:17px;font-weight:750;letter-spacing:-.3px;line-height:1.3}
.ar-carte h2 a{color:var(--ink);text-decoration:none}
.ar-carte h2 a:hover{text-decoration:underline;text-underline-offset:3px}
.ar-carte p{font-size:13.5px;line-height:1.55;color:var(--ink2);margin-top:8px}
.ar-carte .dt{font-size:11.5px;color:var(--muted);margin-top:11px;font-weight:600}

@media(max-width:900px){.ar-grid{grid-template-columns:1fr;gap:22px}}
@media(max-width:640px){
  /* ⚠️ **Le bandeau collant occupe deux lignes sous 640 px, 129 px au lieu de 59.** Le
     `scroll-margin-top` de 76 px, calibré sur un bandeau d'une ligne, plaçait le titre visé
     derrière lui : un clic dans le sommaire ouvrait la section sur son deuxième paragraphe, et
     le lecteur ne voyait jamais le titre sur lequel il venait de cliquer. Le défaut n'existait
     pas avant, aucune page n'ayant d'ancres internes. */
  .ar-s{scroll-margin-top:140px}
  .art .rd-intro h1{font-size:24px}
  .art .rd-intro p{font-size:15.5px}
  .ar-s,.art .rd-g{margin-top:56px}
  .ar-s>h2{font-size:21px}
  .ar-picks{grid-template-columns:1fr}
  .ar-mod{padding:16px}
  .ar-cov li{grid-template-columns:112px 1fr 26px;font-size:12px}
  .ar-pied2{flex-direction:column;gap:8px}
  .ar-fin{padding:18px 17px}
}