/* Page « Real value of stock markets » : MÊME DESIGN que « Work Now or Study First » (projet 11), demande du 23/10/2026
   (l'ancien design « terminal » est abandonné). Palette, polices (Inter + Michroma hébergées), en-tête collant, blocs encadrés, pied : ceux du projet 11.
   Tout est local : aucune ressource externe (charte technique règles 1 et 6). Les volets (details) utilisent la règle commune fonts/polices.css. */
:root{--bg:#000;--surface:#05070b;--surface-2:#090d14;--border:rgba(157,184,217,.14);--ice:#9db8d9;--text:#e6edf7;--muted:#8b99ad;--blue:#2e9bff;--red:#d4301f;--gold:#f5c451;
  --orange:#f5a50a;--rouge-t:#f87171;--carte:#05070b;--carte2:#090d14;
  --fs-xs:11px;--fs-s:12.5px;--fs-m:14px;--fs-l:16px;--fs-2xl:26px;--fs-3xl:32px;--fs-4xl:44px}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;scroll-behavior:smooth}
body{min-height:100vh;background:var(--bg);color:var(--text);font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:300;font-size:var(--fs-l);line-height:1.6;overflow-x:hidden}
header,main,footer{position:relative;z-index:1}
main{max-width:1160px;margin:0 auto;padding:0 16px 40px}
a{color:var(--blue)}
b,strong{font-weight:600}
section{scroll-margin-top:84px}

/* en-tête collant : logo, fil d'Ariane, sommaire (comme le projet 11) */
header.top{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;margin:0;
  padding:12px max(150px,calc((100vw - 1160px)/2 + 16px)) 12px max(16px,calc((100vw - 1160px)/2 + 16px));
  background:rgba(0,0,0,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.logo{display:inline-flex;align-items:center;gap:12px;color:var(--ice);text-decoration:none;font-family:"Michroma",sans-serif;letter-spacing:.2em}
.logo img{width:34px;height:34px;border-radius:50%}
.marque{font-size:var(--fs-s)}
.fil{color:var(--muted);font-size:var(--fs-m);letter-spacing:.08em}
.fil a{color:var(--muted);text-decoration:none;font-size:var(--fs-m)}.fil a:hover{color:var(--text)}
.sommaire{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.sommaire a{color:var(--muted);text-decoration:none;font-size:var(--fs-s);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:4px}
.sommaire a:hover{color:var(--text);background:var(--surface-2)}
.sommaire .no{margin-right:.45em;opacity:.6}

/* numéros de repère : pastille grise, jaune orangé avec aura au survol (règle de la charte) */
.no{display:inline-block;vertical-align:.12em;margin-right:.7em;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:var(--fs-xs);font-weight:400;letter-spacing:.04em;text-transform:none;line-height:1.5;
  color:var(--muted);opacity:.75;padding:0 5px;border:1px solid var(--border);border-radius:3px;transition:color .15s,border-color .15s,box-shadow .15s,text-shadow .15s}
.no:hover{color:#ffb020;border-color:#ffb020;opacity:1;text-shadow:0 0 8px rgba(255,176,32,.9);box-shadow:0 0 12px rgba(255,176,32,.7),inset 0 0 6px rgba(255,176,32,.25);cursor:default}

/* titres */
h1,h2{font-family:"Michroma",sans-serif;font-weight:400;color:var(--ice);text-transform:uppercase}
h1{font-size:var(--fs-3xl);letter-spacing:.12em;line-height:1.2;overflow-wrap:anywhere}
h2{font-size:var(--fs-l);letter-spacing:.1em;margin-bottom:6px}
h3{font-weight:600;font-size:var(--fs-l);color:var(--text);margin-bottom:6px}
.sur{color:#7dd3fc;font-size:var(--fs-xs);letter-spacing:.3em;text-transform:uppercase;margin-bottom:8px}
.sous-h1{color:var(--muted);font-size:var(--fs-m);letter-spacing:.2em;text-transform:uppercase;margin-top:6px}
.heros{margin-top:24px}
.intro{color:var(--muted);max-width:72ch;margin-top:14px;font-size:var(--fs-l)}
.mot{color:var(--u);font-weight:600;text-shadow:0 0 10px color-mix(in srgb,var(--u) 80%,transparent),0 0 26px color-mix(in srgb,var(--u) 45%,transparent)}
.meta-h{color:var(--muted);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;margin-top:14px}
.meta-h b{color:var(--text);font-weight:600}
.note{color:var(--muted);font-size:var(--fs-m);margin-top:10px}
.note a{color:var(--blue)}.note strong{color:var(--text)}

/* blocs encadrés (cadre toujours visible ; aura au survol) */
.bloc{border:1px solid var(--border);border-radius:6px;background:var(--surface);padding:18px;margin-top:16px;transition:box-shadow .25s,border-color .25s}
.bloc:hover{border-color:rgba(157,184,217,.3);box-shadow:0 0 28px rgba(46,155,255,.12)}
.bloc>h2{display:block;margin-bottom:10px}
.sous{display:block;margin:22px 0 10px;padding-top:14px;border-top:1px solid var(--border);font-weight:400;font-size:var(--fs-s);letter-spacing:.16em;text-transform:uppercase;color:var(--ice)}
.bloc>.sous:first-of-type{margin-top:14px}

/* 1. choix du marché et du pays : nom en grand, encadré par les trois chevrons (liste cliquable) */
.grand{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.cat{min-width:0}
.cat-t{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:var(--fs-s);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;transition:color .2s,text-shadow .2s}
.cat-t:hover{color:#fbbf24;text-shadow:0 0 12px rgba(245,165,10,.65)}
.cat-n{color:var(--muted);font-size:var(--fs-s);margin-top:10px;min-height:2.4em}
select{font:inherit;color:var(--text);background:#0a0f18;border:1px solid var(--border);border-radius:5px;color-scheme:dark}
.grand select{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:0;color:#fff;font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:var(--fs-2xl);letter-spacing:.06em;text-transform:uppercase;text-align:center;text-align-last:center;padding:6px 0;cursor:pointer;flex:0 1 auto;min-width:0;max-width:100%;text-overflow:ellipsis;overflow:hidden;transition:color .2s,text-shadow .2s}
.cat:hover select,.grand select:focus{color:#fbbf24;text-shadow:0 0 14px rgba(245,165,10,.6);outline:none}
.grand select option{font:500 var(--fs-l) Inter,sans-serif;color:var(--text);background:#080b11;text-shadow:none;padding:4px 4px 4px 26px}
/* titres de continent dans les listes : jaune orangé, gras, petites capitales espacées, sur un fond plus sombre ; les pays sont décalés à droite */
.grand select optgroup{font:800 var(--fs-s) Inter,sans-serif;font-style:normal;letter-spacing:.14em;color:#fbbf24;background:#02040a;text-shadow:none}
.sel{display:flex;align-items:center;justify-content:center;gap:16px;cursor:pointer;min-width:0;max-width:100%}
/* LISTES ENCADRÉES PAR LES TROIS CHEVRONS (demande du 23/10/2026) : à gauche et à droite du nom, avec aura, pour montrer que c'est cliquable ;
   les chevrons pointent vers le nom, le plus intense contre lui ; jaune orangé avec aura au survol */
.sel{display:flex;align-items:center;justify-content:center;gap:16px;cursor:pointer}
.grand select{-webkit-appearance:none;appearance:none;width:auto;max-width:100%;cursor:pointer}
.sel::before,.sel::after{content:"";flex:none;width:36px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 10' fill='none' stroke='%23e6e9ef' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1,1 5,5 1,9' opacity='.3'/%3E%3Cpolyline points='10,1 14,5 10,9' opacity='.62'/%3E%3Cpolyline points='19,1 23,5 19,9'/%3E%3C/svg%3E") center / contain no-repeat;
  filter:drop-shadow(0 0 4px rgba(214,219,227,.85)) drop-shadow(0 0 10px rgba(214,219,227,.45));animation:ch-g 1.4s ease-in-out infinite;transition:filter .2s}
.sel::after{animation-name:ch-d;transform:scaleX(-1)}
.sel:hover::before,.sel:hover::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 10' fill='none' stroke='%23f3c776' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1,1 5,5 1,9' opacity='.3'/%3E%3Cpolyline points='10,1 14,5 10,9' opacity='.62'/%3E%3Cpolyline points='19,1 23,5 19,9'/%3E%3C/svg%3E");filter:drop-shadow(0 0 5px rgba(255,170,60,.9)) drop-shadow(0 0 13px rgba(255,170,60,.55))}
@keyframes ch-g{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@keyframes ch-d{0%,100%{transform:scaleX(-1) translateX(-3px)}50%{transform:scaleX(-1) translateX(3px)}}
@media (prefers-reduced-motion:reduce){.sel::before,.sel::after{animation:none}}

/* 2. période : boutons « depuis » et liste des années */
.per{display:grid;grid-template-columns:190px minmax(0,1fr);gap:12px 16px;align-items:center;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);padding:16px 18px}
.per-l{color:var(--muted);font-size:var(--fs-s);letter-spacing:.08em;text-transform:uppercase}
.per-c{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;min-width:0}
.per-c label{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:var(--fs-s);letter-spacing:.06em;text-transform:uppercase}
#depuis{display:flex;flex-wrap:wrap;gap:8px}
.pays{display:inline-flex;align-items:center;height:38px;padding:0 14px;background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:6px;font:inherit;font-size:var(--fs-s);letter-spacing:.03em;cursor:pointer;transition:color .2s,border-color .2s,box-shadow .2s}
.pays:hover{color:var(--text);border-color:rgba(157,184,217,.45)}
.pays.on{color:#fff;border-color:var(--blue);background:rgba(46,155,255,.12);box-shadow:0 0 14px rgba(46,155,255,.4)}
.per select{height:38px;padding:0 12px;min-width:92px;font-size:var(--fs-s)}
.per select:hover,.per select:focus{border-color:var(--blue);outline:none}

/* 3. cases de résultat : chiffres en grand ; le résultat réel en jaune orangé (rouge sombre s'il est négatif) */
.tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px;align-items:stretch}
.tuile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0;padding:16px 18px;border:1px solid var(--border);border-radius:6px;background:var(--surface);overflow:hidden;cursor:pointer;transition:border-color .25s,box-shadow .25s}
.tuile::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(157,184,217,.35),transparent)}
.tuile:hover{border-color:rgba(157,184,217,.45);box-shadow:0 0 22px rgba(46,155,255,.14)}
.t-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.t-lib{display:flex;align-items:center;gap:8px;min-width:0;min-height:2.8em;line-height:1.4;color:var(--muted);font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase}
.t-lib svg,.t-go svg{width:14px;height:14px;flex:none}
.t-go{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;border:1px solid var(--border);border-radius:6px;color:var(--muted)}
.t-val{font-weight:600;font-variant-numeric:tabular-nums;font-size:var(--fs-4xl);line-height:1.1;letter-spacing:.01em;color:var(--text);margin:12px 0;white-space:nowrap;overflow-wrap:normal}
.tuile:hover .t-val{animation:aura-chiffre 1.8s ease-in-out infinite}
@keyframes aura-chiffre{0%,100%{text-shadow:0 0 14px color-mix(in srgb,currentColor 75%,transparent),0 0 36px color-mix(in srgb,currentColor 40%,transparent)}50%{text-shadow:0 0 20px color-mix(in srgb,currentColor 90%,transparent),0 0 48px color-mix(in srgb,currentColor 58%,transparent)}}
@media(prefers-reduced-motion:reduce){.tuile:hover .t-val{animation:none}}
.t-bas{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--border);font-size:var(--fs-xs);min-width:0}
.t-l1{color:var(--text);font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.t-l2,.t-l3{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);text-transform:uppercase;min-width:0}
.t-l2 i{color:#334155;font-style:normal}
.t-l3 b{color:var(--text);border:1px solid var(--border);border-radius:4px;padding:1px 8px;font-weight:600}
.t-reel{flex:none;background:var(--orange);color:#000;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;border-radius:4px;padding:2px 8px}
.tuile.vrai{background:linear-gradient(180deg,rgba(245,165,10,.07) 0%,var(--surface) 100%);border-color:rgba(245,165,10,.45);box-shadow:0 0 22px -6px rgba(245,165,10,.25)}
.tuile.vrai:hover{border-color:rgba(245,165,10,.75);box-shadow:0 0 26px rgba(245,165,10,.3)}
.tuile.vrai .t-lib,.tuile.vrai .t-lib svg,.tuile.vrai .t-val,.tuile.vrai .t-l2 span:last-child{color:#fbbf24}
.tuile.vrai .t-l3 b{color:#fbbf24;border-color:var(--orange)}
.tuile.vrai.neg{background:linear-gradient(180deg,rgba(239,68,68,.07) 0%,var(--surface) 100%);border-color:rgba(239,68,68,.4);box-shadow:0 0 22px -6px rgba(239,68,68,.35)}
.tuile.vrai.neg:hover{border-color:rgba(239,68,68,.75);box-shadow:0 0 26px rgba(239,68,68,.3)}
.tuile.vrai.neg .t-lib,.tuile.vrai.neg .t-lib svg,.tuile.vrai.neg .t-val,.tuile.vrai.neg .t-l2 span:last-child{color:var(--rouge-t)}
.tuile.vrai.neg .t-reel{background:#ef4444;color:#000}
.tuile.vrai.neg .t-l3 b{color:var(--rouge-t);border-color:#ef4444}

/* tableaux d'information */
.tab{width:100%;max-width:100%;border-collapse:collapse;font-size:var(--fs-s);font-variant-numeric:tabular-nums;border:1px solid var(--border);overflow-wrap:anywhere}
.tab th,.tab td{padding:7px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:normal}
.tab thead th{background:#0b111c;color:var(--muted);font-weight:500;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase}
.tab td.num{text-align:right;white-space:nowrap}
.tab td.an{font-weight:600}
.tab tbody tr:hover td{background:var(--surface-2)}
#tab-tous tbody tr{cursor:pointer}
#tab-contenu td:first-child{white-space:normal}
#tab-contenu a.lien{color:var(--blue);text-decoration:underline}#tab-contenu a.lien:hover{color:#fbbf24}
#tab-pays th,#tab-pays td,#tab-tous th,#tab-tous td{white-space:normal}

/* feuilles de calcul sous chaque case : style tableur (demande du 22/10/2026) */
.feuille{table-layout:fixed;width:100%;max-width:1040px;font-family:Arial,Helvetica,sans-serif;font-size:var(--fs-s);line-height:20px;color:#fff;background:#05070b}
.feuille th,.feuille td{height:20px;padding:0 3px;border:1px solid rgba(255,255,255,.09);white-space:normal;text-align:left}
.feuille td.num{white-space:nowrap;text-align:left}
.feuille td.an{font-weight:400}
.feuille thead tr:not(.lettres) th{background:#05070b;color:#f5a50a;font-weight:700;text-transform:none;letter-spacing:0;font-size:var(--fs-s)}
.feuille tbody tr.res td{border-top:2px solid #334155;font-weight:700}
.feuille tbody tr.res td.num{color:#f5a50a}
.feuille tbody tr.res td:last-child{white-space:nowrap}
.feuille thead th .f{display:block;color:#94a3b8;font-weight:400;font-style:italic;font-size:var(--fs-xs);margin-top:2px}
p.logique{margin:12px 0 0;padding:10px 14px;border:1px solid rgba(255,255,255,.09);border-top:2px solid #334155;background:#05070b;color:#fff;font-size:var(--fs-m);line-height:1.55}
.tuiles .tab td{vertical-align:top}
.tuiles .tab td small{display:block;color:var(--muted);font-size:var(--fs-xs);line-height:1.35}
.tuiles .tab td small.calc{color:#fff;margin-top:2px;overflow-wrap:anywhere}
.tuiles details .note{margin:8px 0 0;font-size:var(--fs-xs)}
.expl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:10px 0 0;color:#94a3b8;font-size:var(--fs-xs)}.expl dt{color:#fff;font-weight:600}.expl dd{margin:0}

/* VOLETS REPLIABLES : cadre ; flèche, numéro et titre = règle commune fonts/polices.css */
details{border:1px solid var(--border);border-radius:6px;background:var(--surface);margin:12px 0 0;padding:10px 16px}
details>summary{cursor:pointer;color:var(--ice);font-size:var(--fs-s);letter-spacing:.08em;text-transform:uppercase;line-height:1.4;transition:color .2s}
details>summary:hover{color:#c5d7ee}
details p{margin:10px 0 0;color:var(--muted);font-size:var(--fs-l)}
.tuiles details{align-self:start;margin:0;padding:8px 12px}
.tuiles details[open]{grid-column:1/-1}
.tuiles details>summary{display:flex;align-items:center;gap:14px;min-height:36px}
.tuiles details[open]>summary{padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid var(--border)}
.tuiles details .tab{margin-top:10px}

/* 6. sources, 7. questions */
.liste{padding-left:20px;color:var(--muted);font-size:var(--fs-l)}.liste li{margin:0 0 10px}
.liste strong{color:var(--text)}
.liste a,.note a{overflow-wrap:anywhere}

/* pied de page (comme le projet 11) + actions d'export */
footer{border-top:1px solid var(--border);margin-top:56px;padding:18px 16px;text-align:center;color:var(--muted);font-size:var(--fs-xs)}
footer p{max-width:900px;margin:10px auto 0}
footer b{color:var(--text);font-weight:600}
.act{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;background:transparent;color:var(--ice);border:1px solid var(--border);border-radius:6px;font:inherit;font-size:var(--fs-s);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,box-shadow .2s,color .2s}
.btn svg{width:16px;height:16px}
.btn:hover{color:#fff;border-color:var(--blue);box-shadow:0 0 14px rgba(46,155,255,.4)}
.btn.pri{border-color:rgba(46,155,255,.55)}
.toast{position:fixed;right:22px;bottom:22px;z-index:200;display:flex;align-items:center;gap:12px;padding:12px 18px;background:rgba(5,7,11,.96);border:1px solid var(--border);border-radius:6px;font-size:var(--fs-xs);color:var(--text);transform:translateY(80px);opacity:0;transition:all .3s;pointer-events:none}
.toast.on{transform:none;opacity:1}.toast svg{width:18px;height:18px;color:var(--blue)}

/* fond étoilé du site */
/* FOND ÉTOILÉ DU SITE (identique à style.css, demande du 23/10/2026 : plus de quadrillage, on remet les étoiles) */
.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 7% 4%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 19% 11%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 34% 3%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 52% 7%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 63% 16%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 84% 5%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 91% 13%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 3% 24%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 24% 28%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 43% 24%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 58% 33%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 76% 26%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 97% 35%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 12% 50%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 28% 46%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 49% 52%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 71% 55%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 2% 70%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 21% 78%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 38% 84%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 53% 76%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 66% 79%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 86% 71%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 95% 87%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 14% 98%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 47% 97%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 62% 93%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 80% 90%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 99% 96%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 5% 8%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 27% 6%, rgba(255,255,255,.3), transparent),
    radial-gradient(1.5px 1.5px at 46% 14%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 93% 22%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 8% 36%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 69% 30%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 40% 56%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 96% 48%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 16% 62%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 60% 66%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 82% 80%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 6% 90%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 30% 94%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 74% 96%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 35% 72%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 88% 64%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 55% 40%, rgba(255,255,255,.25), transparent),
    radial-gradient(1px 1px at 6% 86%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 64% 88%, rgba(125,211,252,.5), transparent),
    radial-gradient(1.5px 1.5px at 22% 44%, rgba(125,211,252,.4), transparent);
}
.stars::before, .stars::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.stars::before { background-size: 240px 240px; background-image:
    radial-gradient(1px 1px at 168px 211px, rgba(235,240,255,.38), transparent),
    radial-gradient(1px 1px at 125px 17px, rgba(235,240,255,.22), transparent),
    radial-gradient(1px 1px at 39px 10px, rgba(235,240,255,.22), transparent),
    radial-gradient(1px 1px at 54px 18px, rgba(235,240,255,.38), transparent),
    radial-gradient(1px 1px at 25px 144px, rgba(235,240,255,.3), transparent),
    radial-gradient(1px 1px at 173px 137px, rgba(235,240,255,.38), transparent),
    radial-gradient(1px 1px at 14px 11px, rgba(235,240,255,.22), transparent),
    radial-gradient(1px 1px at 192px 193px, rgba(235,240,255,.22), transparent),
    radial-gradient(1px 1px at 106px 72px, rgba(235,240,255,.3), transparent),
    radial-gradient(1px 1px at 115px 237px, rgba(235,240,255,.38), transparent),
    radial-gradient(1px 1px at 206px 226px, rgba(235,240,255,.3), transparent),
    radial-gradient(1px 1px at 184px 150px, rgba(235,240,255,.22), transparent),
    radial-gradient(1px 1px at 54px 119px, rgba(235,240,255,.38), transparent),
    radial-gradient(1px 1px at 84px 45px, rgba(235,240,255,.3), transparent); }
.stars::after { background-size: 410px 410px; background-image:
    radial-gradient(1.5px 1.5px at 311px 72px, rgba(235,240,255,.55), transparent),
    radial-gradient(1px 1px at 189px 50px, rgba(235,240,255,.35), transparent),
    radial-gradient(1px 1px at 49px 205px, rgba(235,240,255,.55), transparent),
    radial-gradient(1px 1px at 284px 371px, rgba(235,240,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 327px 260px, rgba(235,240,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 68px 346px, rgba(235,240,255,.55), transparent),
    radial-gradient(1px 1px at 203px 109px, rgba(235,240,255,.45), transparent),
    radial-gradient(1px 1px at 247px 184px, rgba(235,240,255,.45), transparent),
    radial-gradient(1.5px 1.5px at 237px 229px, rgba(235,240,255,.45), transparent),
    radial-gradient(1px 1px at 10px 11px, rgba(235,240,255,.35), transparent); }
.stars{z-index:0}

/* AUCUN ÉLÉMENT NE SORT DE SON CADRE, de 320 à 1440 px (contrôlé par la charte) */
main,.bloc,.grand,.cat,.sel,.per,.per-c,.tuiles,.tuile,.t-bas,.t-top,.t-lib,details{min-width:0}
@media(max-width:900px){
  .grand{grid-template-columns:minmax(0,1fr)}.tuiles{grid-template-columns:minmax(0,1fr)}.per{grid-template-columns:minmax(0,1fr)}
  .sel{gap:10px}.sel::before,.sel::after{width:26px}.sommaire{margin-left:0}
}
@media(max-width:640px){
  h1{font-size:var(--fs-3xl)}.bloc{padding:14px 12px}.grand select{font-size:var(--fs-l)}.t-val{font-size:var(--fs-3xl)}
  .tab{font-size:var(--fs-xs);line-height:1.25}.tab th,.tab td{padding:2px 4px}#tab-pays,#tab-tous{table-layout:fixed}
  .feuille,.feuille tbody,.feuille tr,.feuille td{display:block;width:100%;max-width:100%}
  .feuille thead{display:none}.feuille td.rn{display:none}
  .feuille tbody tr{border:1px solid rgba(255,255,255,.1);border-radius:6px;margin:0 0 8px;padding:6px 10px;background:#05070b}
  .feuille td{border:0;padding:2px 0;font-size:var(--fs-xs);line-height:1.35;white-space:normal}
  .feuille td[data-l]{display:flex;justify-content:space-between;gap:14px}
  .feuille td[data-l]::before{content:attr(data-l);color:#94a3b8;font-weight:400;text-align:left}
  .feuille td.num{text-align:right}.feuille tbody tr.res td:first-child{font-weight:700}.feuille tbody tr.res td.num{color:#f5a50a}
  .expl{display:grid;margin:10px 0 0;padding:10px 12px;border:1px solid var(--border);border-radius:6px;background:#05070b;font-size:var(--fs-xs);line-height:1.4}
  .expl dt{color:#f5a50a;font-weight:700;margin-top:8px}.expl dt:first-child{margin-top:0}.expl dd{margin:2px 0 0;color:#cbd5e1}
}
@media(min-width:641px){h1{font-size:var(--fs-4xl)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sel::before,.sel::after{animation:none}}
/* DEUX VIGNETTES sous l'introduction (comme le projet 11) : ressenti avec la valeur nominale / avec la valeur réelle */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;max-width:820px;margin:26px auto 8px;align-items:start}
.visuel{position:relative;margin:0;min-width:0;border:1px dashed rgba(157,184,217,.3);border-radius:8px;padding:10px;background:var(--surface)}
.visuel .cadre{border-radius:5px;overflow:hidden;background:#070b12}
.visuel img{display:block;width:100%;height:auto}
.visuel figcaption{color:var(--muted);font-size:var(--fs-s);font-style:italic;margin-top:8px;text-align:center}
.visuel figcaption b{color:var(--text);font-style:normal}
@media(max-width:640px){.duo{gap:8px}.visuel{padding:6px}.visuel figcaption{font-size:var(--fs-xs)}}

/* 02/11/2026 : définitions des tuiles en une colonne sur téléphone (jamais écrasées) */
@media (max-width: 480px) { .expl { grid-template-columns: 1fr; } }
/* 02/11/2026 : tableau « What it is / Source and official explanations » en blocs sur téléphone (la colonne de gauche n'est plus écrasée) */
@media (max-width: 520px) { #tab-contenu, #tab-contenu tbody, #tab-contenu tr, #tab-contenu td { display: block; width: auto !important; } #tab-contenu td.an { padding-bottom: 0; font-weight: 600; } #tab-contenu tr { padding: 6px 0; } }