/* ══════════════════════════════════════════════════════════════════════
Ping Data · socle « Tricolore »
Hero sombre et spectaculaire en tête, outils clairs et rapides dessous.
Couleurs équipe de France, façon sport : marine #002654, bleu #0055A4,
blanc, rouge #EF4135. Gain de points en BLEU, perte en ROUGE, partout.
Deux zones, deux règles de thème :
· zone OUTILS : thème clair par défaut, thème sombre par préférence
système (sauf choix « clair ») ou par choix explicite data-theme="dark" ;
· HERO, en-tête, barre d'onglets, tableau des chiffres : toujours sombres,
couleurs peintes en dur (parti pris assumé), identiques dans les 2 thèmes.
INCLURE LE SOCLE DANS UNE PAGE
(accueil | points | duel | joueur | raquette | aide)
En-tête .top, barre .tabbar et pied .foot : copier le balisage de
/index.html (hub). scene.js pose aria-current sur le lien de data-page.
Bandeau de titre d'une page outil :
══════════════════════════════════════════════════════════════════════ */
:root{
/* marque : constantes, jamais redéfinies */
--marine:#002654;
--bleu:#0055A4;
--blanc:#FFFFFF;
--rouge:#EF4135;
--nuit:#000F24;
/* zone outils, thème clair */
--fond:#F2F5FA;
--surface:#FFFFFF;
--surface-2:#F7F9FC;
--texte:#0A1A31;
--texte-2:#4B5B72;
--bord:#D5DEEA;
--champ:#F5F8FC;
--action:#0055A4;
--action-hover:#00488C;
--sur-action:#FFFFFF;
--gain:#0055A4;
--gain-fond:#E2EDFA;
--perte:#C62D22;
--perte-fond:#FDE9E7;
--doux:#E4EEFA;
--resultat:#EAF1FA;
--reflet:rgba(0,85,164,.10);
--ombre:0 1px 2px rgba(10,26,49,.06),0 8px 24px rgba(10,26,49,.06);
--ombre-haute:0 2px 4px rgba(10,26,49,.08),0 18px 40px rgba(0,38,84,.16);
--focus:#0055A4;
/* anciens noms, gardés pour les pages non encore migrées */
--victoire:var(--gain);
--victoire-fond:var(--gain-fond);
--defaite:var(--perte);
--defaite-fond:var(--perte-fond);
--f-titre:"Barlow Condensed","Roboto Condensed","Arial Narrow","Helvetica Neue",Arial,system-ui,sans-serif;
--f-texte:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--r:18px;
--r-sm:12px;
--barre:64px;
--haut:58px;
--tri:linear-gradient(90deg,#0055A4 0 33.34%,#FFFFFF 33.34% 66.67%,#EF4135 66.67% 100%);
color-scheme:light;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--fond:#051224;
--surface:#0B1D36;
--surface-2:#0E2342;
--texte:#EAF1FA;
--texte-2:#9EB0C9;
--bord:#1D3659;
--champ:#07172D;
--action:#1F6FD1;
--action-hover:#2B7DE3;
--sur-action:#FFFFFF;
--gain:#72B0FF;
--gain-fond:#0F2B52;
--perte:#FF7A70;
--perte-fond:#3A1A22;
--doux:#12305A;
--resultat:#0A2446;
--reflet:rgba(255,255,255,.08);
--ombre:0 1px 2px rgba(0,0,0,.3);
--ombre-haute:0 2px 4px rgba(0,0,0,.3),0 18px 40px rgba(0,0,0,.45);
--focus:#9CC7FF;
color-scheme:dark;
}
}
:root[data-theme="dark"]{
--fond:#051224;
--surface:#0B1D36;
--surface-2:#0E2342;
--texte:#EAF1FA;
--texte-2:#9EB0C9;
--bord:#1D3659;
--champ:#07172D;
--action:#1F6FD1;
--action-hover:#2B7DE3;
--sur-action:#FFFFFF;
--gain:#72B0FF;
--gain-fond:#0F2B52;
--perte:#FF7A70;
--perte-fond:#3A1A22;
--doux:#12305A;
--resultat:#0A2446;
--reflet:rgba(255,255,255,.08);
--ombre:0 1px 2px rgba(0,0,0,.3);
--ombre-haute:0 2px 4px rgba(0,0,0,.3),0 18px 40px rgba(0,0,0,.45);
--focus:#9CC7FF;
color-scheme:dark;
}
/* ── base ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
margin:0;background:var(--fond);color:var(--texte);
font-family:var(--f-texte);font-size:17px;line-height:1.5;
padding-bottom:calc(var(--barre) + env(safe-area-inset-bottom,0px));
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@media (min-width:860px){ body{padding-bottom:0} }
[hidden]{display:none!important}
img,svg{max-width:100%}
a{color:var(--texte);text-decoration-color:var(--rouge);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--f-titre);font-weight:800;line-height:1;letter-spacing:.005em;margin:0}
h1{font-size:clamp(34px,8vw,56px);text-transform:uppercase;font-style:italic;font-weight:900}
h2{font-size:clamp(26px,5.6vw,34px);text-transform:uppercase}
h3{font-size:22px;font-weight:700}
p{margin:0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.sr:focus{position:fixed!important;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:100;
background:#FFFFFF;color:#002654;padding:12px 16px;border-radius:10px;font-weight:700}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.gain{color:var(--gain)}
.perte{color:var(--perte)}
/* ══ EN-TÊTE : marine, toujours sombre ══ */
.top{position:sticky;top:0;z-index:40;color:#FFFFFF;
background:rgba(0,19,43,.86);
-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--tri)}
.top-in{max-width:1200px;margin:0 auto;padding:0 16px;height:var(--haut);display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:#FFFFFF;
font-family:var(--f-titre);font-weight:900;font-style:italic;font-size:24px;letter-spacing:.02em;text-transform:uppercase}
.brand-ball{position:relative;width:24px;height:24px;border-radius:50%;background:#FFFFFF;flex:none;overflow:hidden;
box-shadow:0 0 0 2px rgba(255,255,255,.18),0 0 16px rgba(120,170,255,.55)}
.brand-ball::after{content:"";position:absolute;inset:-4px;
background:linear-gradient(120deg,transparent 0 38%,#0055A4 38% 50%,transparent 50% 58%,#EF4135 58% 70%,transparent 70%)}
.nav{display:none;gap:2px;margin-left:14px}
.nav a{position:relative;display:flex;align-items:center;min-height:44px;padding:0 13px;text-decoration:none;
font-family:var(--f-titre);font-weight:700;font-size:18px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:3px;background:#EF4135;
transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav a:hover{color:#FFFFFF}
.nav a:hover::after{transform:scaleX(.5)}
.nav a[aria-current="page"]{color:#FFFFFF}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (min-width:860px){ .nav{display:flex} }
.theme{margin-left:auto;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);
background:rgba(255,255,255,.08);color:#FFFFFF;font:600 14px var(--f-texte);cursor:pointer;white-space:nowrap}
.theme:hover{background:rgba(255,255,255,.16)}
.theme:focus-visible{outline-color:#FFFFFF}
/* appel à l'inscription, sur toutes les pages : il prend la marge automatique à la place du thème */
.top-cta{margin-left:auto;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;text-decoration:none;white-space:nowrap;
background:#EF4135;color:#FFFFFF;font-family:var(--f-titre);font-weight:800;font-size:17px;letter-spacing:.05em;text-transform:uppercase;
box-shadow:0 4px 14px rgba(239,65,53,.35);transition:background-color .2s ease}
.top-cta:hover{background:#D8352A}
.top-cta:focus-visible{outline-color:#FFFFFF}
.top-cta+.theme{margin-left:0}
/* petits écrans : le bouton de thème devient une pastille, pour laisser la place à l'inscription.
Son texte reste dans le bouton (lu par les lecteurs d'écran), seulement réduit à zéro. */
@media (max-width:459px){
.top-in{gap:8px}
.brand{font-size:21px;gap:8px}
.top-cta{padding:0 12px;font-size:16px}
.theme{width:44px;padding:0;font-size:0;position:relative}
.theme::before{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
border:2px solid #FFFFFF;background:linear-gradient(90deg,#FFFFFF 0 50%,transparent 50%)}
}
/* ══ BARRE D'ONGLETS mobile : 6 destinations ══ */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;color:#FFFFFF;
background:rgba(0,19,43,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tri);opacity:.9}
.tabbar a{position:relative;height:var(--barre);min-width:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
text-decoration:none;color:rgba(255,255,255,.66);font-family:var(--f-titre);font-size:13px;font-weight:700;
letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.tabbar svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tabbar a[aria-current="page"]{color:#FFFFFF}
.tabbar a[aria-current="page"]::before{content:"";position:absolute;top:2px;left:22%;right:22%;height:3px;background:#EF4135;border-radius:0 0 3px 3px}
.tabbar a[aria-current="page"] svg{filter:drop-shadow(0 0 8px rgba(110,170,255,.8))}
.tabbar a:focus-visible{outline-color:#FFFFFF;outline-offset:-4px}
@media (min-width:860px){ .tabbar{display:none} }
/* un champ ou un bouton amené à l'écran (focus, ancre, défilement automatique)
ne doit jamais finir sous la barre d'onglets ni sous l'en-tête collant */
@media (max-width:859px){ html{scroll-padding-bottom:calc(var(--barre) + env(safe-area-inset-bottom,0px) + 16px);scroll-padding-top:calc(var(--haut) + 12px)} }
/* ══ HERO : sombre dans les deux thèmes, lumière de salle ══ */
.hero-tri{position:relative;isolation:isolate;overflow:hidden;color:#FFFFFF;
background:
radial-gradient(60% 55% at 72% 8%,rgba(64,132,230,.34),transparent 70%),
radial-gradient(40% 40% at 18% 0%,rgba(255,255,255,.10),transparent 70%),
radial-gradient(90% 60% at 60% 110%,rgba(0,85,164,.35),transparent 70%),
linear-gradient(180deg,#002654 0%,#001633 60%,#000F24 100%)}
/* grain très léger, pour la matière */
.hero-tri::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* lignes de vitesse : un calque qui glisse (transform), en pause hors écran */
.hero-speed{position:absolute;top:-20%;bottom:-20%;left:-50%;width:200%;z-index:-2;pointer-events:none;opacity:.9;
background:repeating-linear-gradient(104deg,transparent 0 46px,rgba(255,255,255,.035) 46px 47px,transparent 47px 118px,rgba(120,170,255,.05) 118px 120px);
animation:tri-speed 18s linear infinite;will-change:transform}
@keyframes tri-speed{from{transform:translateX(0)}to{transform:translateX(236px)}}
.is-paused .hero-speed,.is-paused .hero-bands i,.is-paused .live .dot::after{animation-play-state:paused}
/* bandes tricolores en diagonale */
.hero-bands{position:absolute;z-index:-1;pointer-events:none;right:-12%;bottom:-40px;width:78%;height:220px;
transform:skewX(-28deg);display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
.hero-bands i{display:block;height:22px;animation:tri-band-in .9s cubic-bezier(.2,.8,.2,1) both}
.hero-bands i:nth-child(1){background:#0055A4;animation-delay:.55s;margin-right:-6%}
.hero-bands i:nth-child(2){background:#FFFFFF;height:9px;animation-delay:.62s;opacity:.9}
.hero-bands i:nth-child(3){background:#EF4135;animation-delay:.69s;margin-right:8%}
@keyframes tri-band-in{from{transform:translateX(60%);opacity:0}to{transform:none;opacity:1}}
.hero-bands.gauche{right:auto;left:-22%;top:-30px;bottom:auto;width:46%;height:120px;justify-content:flex-start;
-webkit-mask-image:linear-gradient(270deg,transparent,#000 60%);mask-image:linear-gradient(270deg,transparent,#000 60%);opacity:.55}
.hero-bands.gauche i{height:12px}
.hero-bands.gauche i:nth-child(2){height:5px}
.hero-in{max-width:1200px;margin:0 auto;padding:26px 16px 52px;position:relative}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-titre);font-weight:700;font-size:15px;
letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.hero-eyebrow::before{content:"";width:30px;height:4px;background:var(--tri);transform:skewX(-24deg)}
.hero-tri h1{margin-top:10px;font-size:clamp(40px,11.4vw,92px);line-height:.88;letter-spacing:.005em;color:#FFFFFF;
text-shadow:0 2px 30px rgba(0,20,60,.5)}
.hero-tri h1 .l{display:block}
.hero-tri h1 .chip{display:inline-block;background:#0055A4;padding:0 .14em;margin-left:-.06em;transform:skewX(-10deg)}
.hero-tri h1 .chip>span{display:inline-block;transform:skewX(10deg)}
.hero-tri h1 .rge{color:#EF4135}
.hero-lede{margin-top:14px;font-size:clamp(18px,4.4vw,21px);line-height:1.4;color:rgba(255,255,255,.84);max-width:34ch}
/* la table, pièce maîtresse */
.hero-table{position:relative;height:clamp(180px,50vw,320px);margin:12px -16px 0}
.hero-table canvas{display:block;width:100%;height:100%}
.hero-table::before{content:"";position:absolute;left:10%;right:10%;top:18%;bottom:0;z-index:-1;border-radius:50%;
background:radial-gradient(closest-side,rgba(80,150,255,.28),transparent)}
/* verre dépoli */
.glass{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 40px rgba(0,8,24,.35)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass{background:rgba(8,36,80,.86)} }
/* bandeau direct de l'échange */
.live{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:10px 16px;margin-top:6px;
font-family:var(--f-titre);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.live b{color:#FFFFFF;font-weight:800;font-variant-numeric:tabular-nums}
.live .sc{display:inline-flex;align-items:center;gap:8px;font-size:26px;letter-spacing:.02em;font-style:italic;font-weight:900;color:#FFFFFF}
.live .sc .a{color:#EF4135}
.live .dot{position:relative;width:9px;height:9px;border-radius:50%;background:#EF4135}
.live .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#EF4135;animation:tri-pulse 1.6s ease-out infinite}
@keyframes tri-pulse{from{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}}
.live .spin{color:#9CC7FF}
.pock{display:inline-flex;gap:4px;align-items:flex-end;height:16px}
.pock i{width:3px;height:5px;background:rgba(255,255,255,.3);display:block;transform-origin:bottom;
transition:transform .13s ease-out,background-color .3s linear}
.pock i.on{background:#FFFFFF;transform:scaleY(3)}
.pock i.on:nth-child(3n+1){background:#5E9EFF}
.pock i.on:nth-child(3n){background:#EF4135}
/* Mobile : le calculateur de l'accueil doit se voir sans defiler, au-dessus de la
barre d'onglets. Mesure avant : champs a 744 px, barre a 748 px. On compacte le
bandeau et on retire le panneau de score, decoratif et rempli de jargon ; la table
reste, c'est elle qui fait l'effet. */
@media (max-width:959px){
.hero-in{padding:16px 16px 24px}
.hero-tri h1{font-size:clamp(32px,9vw,56px)}
.hero-lede{margin-top:8px;font-size:17px}
.hero-table{height:clamp(130px,34vw,230px);margin-top:6px}
.hero-tri .live{display:none}
}
@media (min-width:960px){
.hero-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:10px 32px;align-items:center;padding:44px 24px 84px}
.hero-copy{grid-column:1;grid-row:1}
.hero-table{grid-column:2;grid-row:1 / span 2;margin:0 -24px 0 0;height:clamp(330px,34vw,420px)}
.hero-tri .live{grid-column:1;grid-row:2;align-self:start;margin-top:0}
.hero-tri h1{font-size:clamp(50px,5.1vw,78px)}
}
/* bandeau de titre d'une page outil */
.hero-tri.mini .hero-in{display:block;padding:22px 16px 30px}
.hero-tri.mini h1{font-size:clamp(34px,9vw,60px)}
.hero-tri.mini .hero-lede{font-size:17px;margin-top:8px}
@media (min-width:960px){ .hero-tri.mini .hero-in{padding:34px 24px 40px} }
/* ══ ZONE OUTILS ══ */
.wrap{max-width:680px;margin:0 auto;padding:0 16px}
.wrap-l{max-width:1200px;margin:0 auto;padding:0 16px}
@media (min-width:960px){ .wrap-l{padding:0 24px} }
.page-head{padding:28px 0 18px}
.page-head p{color:var(--texte-2);margin-top:8px;font-size:18px}
.stack>*+*{margin-top:14px}
.section{margin-top:32px}
section[id],details[id],div[id]{scroll-margin-top:calc(var(--haut) + 20px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-titre);font-size:15px;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--texte-2)}
.eyebrow::before{content:"";width:18px;height:3px;background:var(--tri);transform:skewX(-24deg)}
.card{position:relative;background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);box-shadow:var(--ombre);padding:20px}
.card h2{margin-bottom:4px}
.card .sub{color:var(--texte-2);font-size:16px}
.card.accent::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:4px;border-radius:0 0 4px 4px;background:var(--tri)}
/* ── champs ── */
.field{display:block;margin-top:14px}
.field>span{display:block;font-weight:600;margin-bottom:6px}
.field small{display:block;color:var(--texte-2);font-size:14px;margin-top:5px}
.inp{width:100%;min-height:56px;border-radius:var(--r-sm);border:1.5px solid var(--bord);background:var(--champ);
color:var(--texte);font:600 24px var(--f-texte);padding:0 14px;font-variant-numeric:tabular-nums;
transition:border-color .15s ease,box-shadow .15s ease}
.inp::placeholder{color:var(--texte-2);font-weight:400;opacity:.75}
.inp:hover{border-color:color-mix(in srgb,var(--action) 45%,var(--bord))}
.inp:focus{outline:none;border-color:var(--action);box-shadow:0 0 0 4px color-mix(in srgb,var(--action) 22%,transparent)}
@supports not (color:color-mix(in srgb,red 50%,blue)){ .inp:focus{outline:3px solid var(--focus);outline-offset:1px} }
select.inp{font-size:17px;appearance:none;-webkit-appearance:none;padding-right:40px;
background-image:linear-gradient(45deg,transparent 50%,var(--texte-2) 50%),linear-gradient(135deg,var(--texte-2) 50%,transparent 50%);
background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
/* choix à deux boutons */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.seg button{min-height:52px;border-radius:999px;border:1.5px solid var(--bord);background:var(--champ);color:var(--texte);
font:600 17px var(--f-texte);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--doux);border-color:var(--action);box-shadow:inset 0 0 0 1px var(--action)}
/* ── boutons ── */
.btn,.btn-2{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;
border-radius:999px;text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;
font-family:var(--f-titre);font-weight:800;font-size:19px;letter-spacing:.05em;text-transform:uppercase}
.btn{border:0;background:var(--action);color:var(--sur-action);box-shadow:0 6px 18px color-mix(in srgb,var(--action) 30%,transparent)}
.btn:hover{background:var(--action-hover)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
transform:translateX(-110%);transition:transform .6s ease}
.btn:hover::after{transform:translateX(110%)}
.btn-2{border:1.5px solid var(--bord);background:var(--surface);color:var(--texte)}
.btn-2:hover{border-color:var(--action)}
.btn-2[disabled]{opacity:.5;cursor:default}
.link-btn{background:none;border:0;padding:0;min-height:44px;color:var(--texte);font:inherit;text-decoration:underline;
text-decoration-color:var(--rouge);text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}
/* ══ RÉSULTAT : un grand chiffre de tableau d'affichage ══ */
.result{position:relative;overflow:hidden;background:var(--resultat);border-radius:var(--r);padding:20px 18px 18px;margin-top:18px}
.result::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
background:linear-gradient(180deg,#0055A4 0 33.34%,#FFFFFF 33.34% 66.67%,#EF4135 66.67%)}
.result .big{font-family:var(--f-titre);font-weight:900;font-style:italic;font-size:clamp(64px,20vw,120px);line-height:.9;
letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.result .big small{font-size:.34em;letter-spacing:0;margin-left:6px;font-weight:700;font-style:normal}
.result .lab{font-size:17px;font-weight:600;margin-top:6px}
.result .phrase{font-size:19px;margin-top:12px;font-weight:500}
.result.idle{background:var(--champ);border:1.5px dashed var(--bord)}
.result.idle::before{display:none}
.result.idle .phrase{color:var(--texte-2);margin:0;font-size:17px}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.duo>div{background:var(--surface);border-radius:14px;padding:12px 14px;box-shadow:var(--ombre)}
.duo .k{font-family:var(--f-titre);font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--texte-2)}
.duo .v{font-family:var(--f-titre);font-weight:900;font-style:italic;font-size:clamp(46px,13vw,64px);line-height:1;font-variant-numeric:tabular-nums}
.chance{margin-top:12px;font-size:17px}
/* défilement des chiffres (scene.js : Tricolore.roll) */
.roll{display:inline-block;line-height:1;white-space:pre}
.roll .rc,.roll .rs{display:inline-block;height:1em;line-height:1;vertical-align:top}
.roll .rc{clip-path:inset(0 -.4em 0 -.4em)}
.roll .rc>span{display:block;transform:translateY(calc(var(--d,0) * -10%));transition:transform .9s cubic-bezier(.16,1,.3,1)}
.roll .rc>span>span{display:block;height:1em;line-height:1}
.roll .rs,.roll .rc,.roll .rc span{font:inherit;line-height:1;margin:0;padding:0;color:inherit;letter-spacing:inherit;background:none;border:0;box-shadow:none}
/* pastilles */
.pill{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:999px;font-size:14px;font-weight:700;white-space:nowrap}
.pill.v{background:var(--gain-fond);color:var(--gain)}
.pill.d{background:var(--perte-fond);color:var(--perte)}
.pill.n{background:var(--champ);color:var(--texte-2);border:1px solid var(--bord)}
.pill.o{background:var(--action);color:var(--sur-action)}
/* barre de chances : scaleX, jamais width */
.bar{height:12px;border-radius:999px;background:color-mix(in srgb,var(--perte) 26%,transparent);overflow:hidden;margin-top:14px}
@supports not (color:color-mix(in srgb,red 50%,blue)){ .bar{background:var(--perte-fond)} }
.bar i{display:block;height:100%;width:100%;background:var(--gain);border-radius:999px;transform-origin:left;
transform:scaleX(var(--p,0));transition:transform .5s cubic-bezier(.16,1,.3,1)}
/* détails repliés */
details.more{margin-top:14px;border-top:1px solid var(--bord)}
details.more>summary{cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;gap:8px;font-weight:600}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
details.more[open]>summary::before{transform:rotate(45deg)}
.kv{list-style:none;margin:6px 0 0;padding:0}
.kv li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--bord);font-size:15px}
.kv li:last-child{border-bottom:0}
.kv li b{font-variant-numeric:tabular-nums;text-align:right}
.note{color:var(--texte-2);font-size:14px}
.tips{margin:10px 0 0;padding-left:20px}
.tips li{margin-top:8px}
.tips li::marker{color:var(--rouge)}
.banner{border-radius:var(--r-sm);padding:12px 14px;background:var(--champ);border:1px solid var(--bord);border-left:4px solid var(--action);font-size:15px}
.warn{margin-top:12px;border-radius:12px;padding:10px 12px;background:var(--perte-fond);border:1px solid var(--bord);font-size:14px}
.tw{overflow-x:auto;margin-top:10px;border:1px solid var(--bord);border-radius:14px;background:var(--surface)}
.tw table{border-collapse:collapse;width:100%;font-size:15px;min-width:480px}
.tw th,.tw td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--bord);font-variant-numeric:tabular-nums}
.tw th:first-child,.tw td:first-child{text-align:left}
.tw thead th{font-family:var(--f-titre);font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--texte-2);font-weight:700}
.tw tbody tr:last-child td{border-bottom:0}
.tw tr.hi td{background:var(--doux)}
/* ══ CARTES D'OUTIL : relief 3D, reflet, bande tricolore au survol ══ */
.tools{display:grid;gap:12px}
@media (min-width:560px){ .tools{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.tool{position:relative;display:flex;flex-direction:column;gap:8px;min-height:156px;padding:18px;overflow:hidden;isolation:isolate;
text-decoration:none;color:var(--texte);background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);box-shadow:var(--ombre);
transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,border-color .3s ease}
.tool>*{position:relative;z-index:2}
/* bande tricolore diagonale qui traverse la carte */
.tool::before{content:"";position:absolute;z-index:1;top:-30%;bottom:-30%;left:0;width:54px;pointer-events:none;
background:var(--tri);opacity:0;transform:translateX(-160%) skewX(-22deg)}
/* reflet qui suit le pointeur */
.tool::after{content:"";position:absolute;z-index:1;left:0;top:0;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;
pointer-events:none;background:radial-gradient(closest-side,var(--reflet),transparent);opacity:0;
transform:translate(var(--mx,50%),var(--my,50%));transition:opacity .3s ease}
.tool .edge{position:absolute;z-index:3;left:0;right:0;top:0;height:4px;background:var(--tri);transform:scaleX(0);transform-origin:left;
transition:transform .45s cubic-bezier(.16,1,.3,1)}
.tool h3{font-size:25px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.tool .promise{font-size:17px;line-height:1.35;color:var(--texte)}
.tool .top-t{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tool .foot-t{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.tool .ico{width:44px;height:44px;border-radius:12px;background:#002654;display:grid;place-items:center;flex:none;
box-shadow:inset 0 -3px 0 #EF4135}
.tool .ico svg{width:22px;height:22px;stroke:#FFFFFF;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tool .arrow{width:44px;height:44px;border-radius:999px;background:var(--action);color:var(--sur-action);display:grid;place-items:center;
font-weight:700;font-size:20px;flex:none;transition:transform .3s cubic-bezier(.16,1,.3,1),background-color .2s}
.tool:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.tool:focus-visible .edge{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
.tool:hover{box-shadow:var(--ombre-haute);border-color:color-mix(in srgb,var(--action) 40%,var(--bord))}
.tool:hover::before{opacity:.16;transform:translateX(1100%) skewX(-22deg);transition:transform .8s cubic-bezier(.45,0,.2,1)}
.tool:hover::after{opacity:1}
.tool:hover .edge{transform:scaleX(1)}
.tool:hover .arrow{transform:translateX(4px);background:#EF4135;color:#FFFFFF}
.tool.is-tilting{transition:transform .12s linear,box-shadow .3s ease,border-color .3s ease}
}
/* ══ TABLEAU DES CHIFFRES : marine, toujours sombre ══ */
.board{position:relative;overflow:hidden;isolation:isolate;margin-top:32px;border-radius:var(--r);color:#FFFFFF;
background:linear-gradient(135deg,#002654,#00142E);display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.board::before{content:"";position:absolute;z-index:-1;right:-40px;top:-20px;bottom:-20px;width:160px;transform:skewX(-24deg);
background:linear-gradient(90deg,transparent 0 30%,rgba(0,85,164,.55) 30% 55%,rgba(255,255,255,.12) 55% 62%,rgba(239,65,53,.5) 62% 86%,transparent 86%)}
.board>div{padding:18px 16px;border-right:1px solid rgba(255,255,255,.12)}
.board>div:last-child{border-right:0}
.board b{display:block;font-family:var(--f-titre);font-weight:900;font-style:italic;font-size:clamp(30px,6.4vw,54px);line-height:1;
font-variant-numeric:tabular-nums;white-space:nowrap;color:#FFFFFF}
.board>div:nth-child(1) b{color:#8CBCFF}
.board>div:nth-child(3) b{color:#FF6E64}
.board>div>span{display:block;margin-top:6px;font-size:14px;color:rgba(255,255,255,.76)}
@media (max-width:520px){
.board{grid-template-columns:1fr}
.board>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.12);display:flex;align-items:baseline;gap:12px;padding:14px 16px}
.board>div:last-child{border-bottom:0}
.board b{font-size:34px;min-width:4.2ch}
.board>div>span{margin-top:0}
}
/* à venir */
.soon{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.soon li{display:flex;align-items:center;gap:8px;min-height:44px;border:1.5px dashed var(--bord);border-radius:999px;padding:0 16px;
font-size:15px;color:var(--texte-2);background:var(--champ)}
.soon li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rouge);opacity:.7}
/* ══ PIED DE PAGE ══ */
.foot{position:relative;margin-top:56px;background:var(--surface);border-top:1px solid var(--bord)}
.foot::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--tri)}
.foot-in{max-width:1200px;margin:0 auto;padding:22px 16px 28px;display:flex;flex-wrap:wrap;gap:4px 22px;align-items:center;font-size:15px}
.foot-in a{display:inline-flex;align-items:center;min-height:44px;color:var(--texte);font-weight:600}
.foot-in .fine{flex-basis:100%;color:var(--texte-2);font-size:14px;margin-top:6px}
/* ══ BALAYAGE TRICOLORE au chargement (créé par scene.js) ══ */
.tri-sweep{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden}
.tri-sweep i{position:absolute;top:-25%;bottom:-25%;left:0;width:26vw;min-width:120px;transform:translateX(-140%) skewX(-24deg);
animation:tri-sweep .95s cubic-bezier(.65,0,.25,1) forwards}
.tri-sweep i:nth-child(1){background:#0055A4;animation-delay:0s}
.tri-sweep i:nth-child(2){background:#FFFFFF;animation-delay:.07s}
.tri-sweep i:nth-child(3){background:#EF4135;animation-delay:.14s}
@keyframes tri-sweep{from{transform:translateX(-140%) skewX(-24deg)}to{transform:translateX(calc(100vw + 60%)) skewX(-24deg)}}
.tri-sweep.out{opacity:0;transition:opacity .2s linear}
/* ══ MOUVEMENT RÉDUIT : tout ce qui n'est pas essentiel s'arrête ══ */
@media (prefers-reduced-motion:reduce){
.hero-speed,.hero-bands i,.live .dot::after{animation:none!important}
.live .dot::after{display:none}
.tri-sweep{display:none!important}
.tool,.tool::before,.tool::after,.tool .edge,.tool .arrow,.btn::after,.nav a::after,.inp,
.roll .rc>span,.bar i,.pock i,details.more>summary::before{transition:none!important}
.tool{transform:none!important}
.tool::before,.btn::after{display:none}
}