:root{
  --action:#2563eb;--action-hover:#1d4ed8;--action-subtle:#eff6ff;--action-border:#bfdbfe;
  /* --accent-border reprend --color-accent-200 de web/src/lib/styles/tokens.css : c'est le
     pendant accent de --success-border / --danger-border, pas une couleur nouvelle. */
  --accent:#d9553b;--accent-text:#c14a30;--accent-subtle:#fdf2ef;--accent-border:#f7c9bc;
  --bg-base:#f7f7f8;--bg-surface:#fff;--bg-inset:#f0f0f2;
  --text-primary:#13141a;--text-secondary:#57544d;--text-muted:#6b6b74;
  --border-default:#e6e6ea;--border-strong:#d4d4da;
  --success:#16a34a;--success-text:#15803d;--success-bg:#f0fdf4;--success-border:#bbf7d0;
  --danger:#dc2626;--danger-bg:#fef2f2;--danger-border:#fecaca;
  --warning-text:#b45309;--warning-bg:#fffbeb;--warning-border:#fde68a;
  --r-container:8px;--r-control:6px;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-base);color:var(--text-primary);
  font:400 15px/1.55 var(--sans);text-rendering:optimizeLegibility}
a{color:var(--action);text-decoration:none}
a:hover{color:var(--action-hover);text-decoration:underline}
:focus-visible{outline:2px solid var(--action);outline-offset:2px;border-radius:var(--r-control)}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
h1{font-size:25px;line-height:1.2}
h2{font-size:19px;line-height:1.3}
h3{font-size:15px;line-height:1.4}
p{margin:0 0 12px}
ul{margin:0;padding:0;list-style:none}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.pos{color:var(--success-text)}.neg{color:var(--danger)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:9;background:var(--bg-surface);padding:8px 12px;
  border:1px solid var(--border-strong);border-radius:var(--r-control)}

/* ---- Ossature ---- */
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.topbar{background:var(--bg-surface);border-bottom:1px solid var(--border-default)}
.topbar .wrap{display:flex;align-items:center;gap:24px;height:52px}
.brand{font-size:15px;font-weight:600;color:var(--text-primary)}
.brand:hover{text-decoration:none}
.topbar nav{margin-left:auto;display:flex;gap:20px;font-size:13px}
.topbar nav a{color:var(--text-secondary)}
main{padding:20px 0 48px}
.crumb{font-size:12px;color:var(--text-muted);margin-bottom:16px}
.crumb a{color:var(--text-muted)}
.crumb span{margin:0 6px;color:var(--border-strong)}

/* ---- Premier écran : la réponse ---- */
.answer{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;
  align-items:start;margin-bottom:32px}
.card{background:var(--bg-surface);border:1px solid var(--border-default);
  border-radius:var(--r-container);padding:20px}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:8px}
.headline-sub{font-size:13px;color:var(--text-muted);margin:6px 0 16px}

.verdict{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.dial{flex:0 0 auto;width:76px;height:76px;position:relative}
.dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.dial-track{fill:none;stroke:var(--bg-inset);stroke-width:8}
.dial-fill{fill:none;stroke-width:8;stroke-linecap:round}
.dial-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:600 19px/1 var(--mono)}
.tone-good .dial-fill{stroke:var(--success)}
.tone-mid .dial-fill{stroke:var(--action)}
.tone-weak .dial-fill{stroke:var(--accent)}
.tone-unknown .dial-fill{stroke:var(--border-strong)}
.verdict-word{font-size:19px;font-weight:600;display:block;margin-bottom:2px}
.verdict-txt{font-size:13px;color:var(--text-secondary)}

/* SIX piliers depuis le 2026-07-27 (cinq notes + le dividende affiche). "auto-fit" avec une
   largeur minimale plutot qu'un nombre de colonnes fige : a six tuiles sur une colonne etroite,
   repeat(6,1fr) donnait des cartes de 60 px ou le nombre passait a la ligne. Le seuil de 130 px
   fait tenir SIX tuiles en 3x2, la seule grille equilibree a six, puis 2x3 sur mobile. Sans lui,
   une grille de quatre colonnes laissait deux tuiles orphelines sur la seconde ligne. */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}
/* Le rang sectoriel n'est PAS la note : il l'accompagne, en retrait, sous les piliers. */
.sector-rank{font-size:12px;color:var(--text-secondary);margin:-8px 0 16px}
.sector-rank strong{color:var(--text-primary);font-weight:600}
.sector-scale{font-size:12px;line-height:1.5;color:var(--text-secondary);
  border-left:2px solid var(--border-default);padding-left:10px;margin:-6px 0 16px}
.pillar{display:block;padding:10px;border:1px solid var(--border-default);
  border-radius:var(--r-control);background:var(--bg-surface)}
a.pillar:hover{border-color:var(--action-border);background:var(--action-subtle);text-decoration:none}
.pillar-name{font-size:11px;font-weight:600;color:var(--text-secondary);display:block}
.pillar-val{font:600 19px/1.2 var(--mono);display:block;margin:4px 0 6px}
/* display:block obligatoire : c'est un span, et la propriété height ne s'applique pas à un
   élément inline non remplacé : sans lui la barre se rend en disque de la hauteur de ligne. */
.bar{display:block;height:4px;border-radius:999px;background:var(--bg-inset);overflow:hidden}
.bar i{display:block;height:4px;background:var(--action);border-radius:999px}
.pillar-note{font-size:11px;color:var(--text-muted);display:block;margin-top:6px}

.checks{display:flex;flex-direction:column;gap:2px}
.check{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:9px 0;
  border-top:1px solid var(--border-default);font-size:13px}
.check:first-child{border-top:0}
.mark{width:18px;height:18px;border-radius:999px;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:600;margin-top:1px}
.mark-pass{background:var(--success-bg);color:var(--success-text);border:1px solid var(--success-border)}
.mark-fail{background:var(--accent-subtle);color:var(--accent-text);border:1px solid var(--accent-border)}
.mark-na{background:var(--bg-inset);color:var(--text-muted);border:1px solid var(--border-default)}
.check-label{font-weight:600}
.check-label a{color:inherit}
.check-txt{color:var(--text-secondary);display:block;margin-top:2px}
.check-why{color:var(--text-muted);font-size:12px;display:block;margin-top:4px}

/* La règle qui situe une valeur dans sa population. La DROITE est toujours le bon côté, y
   compris sur les mesures où un petit nombre vaut mieux : le lecteur n'a jamais à se demander
   dans quel sens lire. Les quatre couleurs sont celles des pastilles de score, et le mot les
   double toujours, parce qu'un statut ne se dit pas par la couleur seule. */
.gauge-row{display:flex;align-items:center;gap:8px;margin:5px 0 3px}
/* 999px et non une valeur ad hoc : DESIGN.md admet ce rayon pour un élément explicitement en
   forme de pilule, et c'est le cas des deux ci-dessous. Un 3px inventé aurait été un septième
   rayon sur la même page, exactement ce que la règle des deux familles interdit. */
.gauge{position:relative;flex:0 0 96px;height:5px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent-subtle),var(--bg-inset) 45%,var(--success-bg))}
.gauge i{position:absolute;top:-3px;width:3px;height:11px;border-radius:999px;
  transform:translateX(-50%);background:var(--text-primary)}
.gauge-word{font-size:11px;font-weight:600;text-transform:lowercase}
.gauge-faible + .gauge-word{color:var(--accent-text)}
.gauge-moyen + .gauge-word{color:var(--warning-text)}
.gauge-bon + .gauge-word{color:var(--action)}
.gauge-excellent + .gauge-word{color:var(--success-text)}

/* ---- Cours ---- */
.price-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price-last{font:600 25px/1.1 var(--mono)}
/* Le chiffre en mono, la phrase en Inter. « sur la séance » en JetBrains Mono se lit comme
   du code, car la règle de DESIGN.md vise les CHIFFRES, pas les mots qui les accompagnent. */
.price-chg{font-size:13px;color:var(--text-muted)}
.price-chg b{font:600 13px var(--mono)}
.chart{width:100%;height:190px;display:block}
.chart-area{fill:var(--action-subtle)}
.chart-line{fill:none;stroke:var(--action);stroke-width:1.5;
  vector-effect:non-scaling-stroke;stroke-linejoin:round}
.chart-grid{stroke:var(--border-default);stroke-width:1;stroke-dasharray:2 4;
  vector-effect:non-scaling-stroke}
.chart.down .chart-area{fill:var(--accent-subtle)}
.chart.down .chart-line{stroke:var(--accent)}

/* Boutons de période, en CSS pure. Les boutons radio sont retirés du flux sans display:none
   ni visibility:hidden, qui les sortiraient de l'ordre de tabulation : au clavier, la période
   se choisit avec les flèches, comme n'importe quel groupe de radios. */
.cbox{margin:12px 0 4px}
.cradio{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.ctabs{display:flex;gap:4px;margin-bottom:8px}
.ctab{font-size:12px;line-height:1;padding:6px 10px;border-radius:var(--r-control);
  border:1px solid var(--border-default);color:var(--text-muted);cursor:pointer;user-select:none}
.ctab:hover{border-color:var(--border-strong);color:var(--text-secondary)}
/* L'appariement bouton/panneau est écrit à la main : CSS ne sait pas relier deux classes de
   façon générique. Une période de plus (10 ans, YTD) demande une ligne ici. Cf. PeriodKey. */
.cpane{display:none}
.cradio-1a:checked ~ .cpane-1a,
.cradio-5a:checked ~ .cpane-5a,
.cradio-max:checked ~ .cpane-max{display:block}
.cradio-1a:checked ~ .ctabs .ctab-1a,
.cradio-5a:checked ~ .ctabs .ctab-5a,
.cradio-max:checked ~ .ctabs .ctab-max{background:var(--action-subtle);
  border-color:var(--action-border);color:var(--action);font-weight:600}
.cradio:focus-visible ~ .ctabs{outline:2px solid var(--action);outline-offset:3px;
  border-radius:var(--r-control)}

/* Les extrêmes sont posés EN HTML par-dessus le SVG, en pourcentage des deux axes : le SVG est
   étiré horizontalement (preserveAspectRatio none), donc tout ce qui doit garder sa forme
   ou sa taille de texte reste dehors. */
.cplot{position:relative}
.cmark{position:absolute;transform:translate(-50%,-50%);pointer-events:none}
.cmark i{display:block;width:7px;height:7px;border-radius:50%;background:var(--action);
  box-shadow:0 0 0 2px var(--bg-surface)}
.chart.down ~ .cmark i{background:var(--accent)}
.cmark b{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;
  font:600 11px var(--mono);color:var(--text-primary);background:var(--bg-surface);
  border:1px solid var(--border-default);border-radius:var(--r-control);padding:2px 6px}
.cmark em{font:400 10px var(--sans);color:var(--text-muted);font-style:normal;margin-left:5px}
.cmark-hi b{bottom:calc(100% + 6px)}
.cmark-lo b{top:calc(100% + 6px)}
.cmark.at-start b{left:0;transform:none}
.cmark.at-end b{left:auto;right:0;transform:none}

/* Les années sous la courbe, alignées sur les traits pointillés du SVG. */
.cticks{position:relative;height:16px;margin-top:2px}
.cticks span{position:absolute;transform:translateX(-50%);font:400 10px var(--mono);
  color:var(--text-muted)}
.price-meta{font-size:11px;color:var(--text-muted);margin-top:8px}
.price-meta b{font:600 11px var(--mono);color:var(--text-secondary)}
.price-meta + .price-meta{margin-top:4px}
.range{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--border-default)}
.range div{font-size:11px;color:var(--text-muted)}
.range b{display:block;font:600 13px/1.4 var(--mono);color:var(--text-primary)}

/* ---- Sections ---- */
section.block{background:var(--bg-surface);border:1px solid var(--border-default);
  border-radius:var(--r-container);padding:24px;margin-bottom:20px;scroll-margin-top:16px}
.block > h2{margin-bottom:4px}
.block-intro{font-size:13px;color:var(--text-muted);margin-bottom:20px;max-width:68ch}
/* Paragraphe de clôture d'une section (méthode, fraîcheur) : même voix, position inverse. */
.block-outro{font-size:13px;color:var(--text-muted);margin:20px 0 0;max-width:68ch}
.mt{margin-top:16px}
.mt-lg{margin-top:20px}
.eyebrow.spaced{margin:24px 0 8px}
caption{text-align:left;caption-side:top}
.pillar-block{border-top:1px solid var(--border-default);padding-top:16px;margin-top:16px;
  scroll-margin-top:16px}
.pillar-block:first-of-type{border-top:0;padding-top:0;margin-top:0}
.pillar-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.pillar-head h3{font-size:15px}
.weight{font-size:11px;color:var(--text-muted)}
.pillar-q{font-size:13px;color:var(--text-muted);margin-bottom:12px}

/* ---- Tables de faits ---- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--border-default);border:1px solid var(--border-default);
  border-radius:var(--r-container);overflow:hidden}
.facts div{background:var(--bg-surface);padding:12px 14px}
/* Trois colonnes FIXES : en auto-fit, un nombre de cellules non multiple de la colonne laissait
   une case vide grise en fin de grille, visible sur le premier écran de la page ETF. */
.facts-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:700px){.facts-3{grid-template-columns:1fr}}
.facts dt{font-size:11px;color:var(--text-muted);margin-bottom:4px}
.facts dd{margin:0;font:600 15px/1.3 var(--mono)}
.facts small{display:block;font:400 11px/1.4 var(--sans);color:var(--text-muted);margin-top:4px}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;font-weight:600;color:var(--text-muted);
  padding:8px 10px;border-bottom:1px solid var(--border-default)}
td{padding:8px 10px;border-bottom:1px solid var(--border-default)}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-family:var(--mono)}
.muted{color:var(--text-muted);font-size:11px}

/* ---- Allocations (page ETF) ---- */
.alloc{display:flex;flex-direction:column;gap:7px}
/* Colonnes BORNÉES : en 1fr/2fr, sur un écran large la barre s'étirait sur 600 px pour dire
   « 44 % » : long, illisible, et visuellement faux puisque la longueur perdait son échelle. */
.alloc li{display:grid;grid-template-columns:minmax(88px,1.2fr) minmax(50px,1fr) 52px;
  gap:10px;align-items:center;font-size:12px}
/* 46 px et non 34 : une pastille reclame 30 px de contenu + 10 de marge interne + 2 de
   bordure. Trop etroite, elle etait ecrasee et la couleur devenait invisible. */
.alloc.holds li{grid-template-columns:minmax(80px,1.2fr) minmax(36px,1fr) 50px 46px}
.alloc.holds .alloc-label a{color:var(--text-secondary)}
/* Pastilles de score. Le chiffre reste lisible seul ; la couleur n'est qu'un renfort. */
.pill{display:inline-block;min-width:30px;text-align:center;padding:1px 5px;
  border-radius:var(--r-control);font:600 11px var(--mono);border:1px solid transparent}
.pill-good{background:var(--success-bg);color:var(--success-text);border-color:var(--success-border)}
.pill-mid{background:var(--action-subtle);color:var(--action-hover);border-color:var(--action-border)}
.pill-low{background:var(--warning-bg);color:var(--warning-text);border-color:var(--warning-border)}
.pill-weak{background:var(--accent-subtle);color:var(--accent-text);border-color:var(--accent-border)}
.pill-na{background:var(--bg-inset);color:var(--text-muted);border-color:var(--border-default)}
.alloc-label{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alloc-val{font:600 12px var(--mono);text-align:right;color:var(--text-primary)}
.alloc-rest .alloc-label{color:var(--text-muted);font-style:italic}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:860px){.cols{grid-template-columns:1fr}}
.scroll-x{overflow-x:auto}

/* ---- Listes de titres (maillage) ---- */
.links{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.links a{display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:10px 12px;border:1px solid var(--border-default);border-radius:var(--r-control);
  background:var(--bg-surface);color:var(--text-primary);font-size:13px}
.links a:hover{border-color:var(--action-border);background:var(--action-subtle);text-decoration:none}
.links b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.links span{font:600 13px var(--mono);color:var(--text-muted);flex:0 0 auto}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{padding:5px 10px;border:1px solid var(--border-default);border-radius:999px;
  font-size:12px;background:var(--bg-surface)}

/* ---- Encarts ---- */
.callout{border:1px solid var(--warning-border);background:var(--warning-bg);
  border-radius:var(--r-container);padding:14px 16px;font-size:13px;color:var(--text-secondary)}
.callout b{color:var(--warning-text)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;
  border:1px solid var(--action-border);background:var(--action-subtle);
  border-radius:var(--r-container);padding:18px 20px;margin-bottom:20px}
.cta p{margin:0;font-size:13px;color:var(--text-secondary);max-width:60ch}
.cta strong{display:block;font-size:15px;color:var(--text-primary);margin-bottom:4px;font-weight:600}
.btn{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;
  background:var(--action);color:#fff;border-radius:var(--r-control);
  font-size:13px;font-weight:600;white-space:nowrap}
.btn:hover{background:var(--action-hover);color:#fff;text-decoration:none}

footer{border-top:1px solid var(--border-default);background:var(--bg-surface);
  padding:28px 0;font-size:12px;color:var(--text-muted)}
footer p{max-width:78ch}
footer .legal{font-size:11px;line-height:1.6}
footer nav{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px;font-size:12px}

@media (max-width:860px){
  .answer{grid-template-columns:1fr}
  .pillars{grid-template-columns:repeat(2,1fr)}
  h1{font-size:19px}
  .wrap{padding:0 14px}
  section.block{padding:18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.topbar,.cta,.btn{display:none}body{background:#fff}}