/* ============================================================
   Je veux être riche — charte v3 (feuille de style partagée)
   Canvas clair + cartes blanches + éléments juteux. Fredoka + Nunito.
   ============================================================ */
:root{
  --fond:#EEF1F7;--glow-mint:#C9F5E4;--glow-lilas:#DEDBFF;
  --surface:#FFFFFF;--surface-bord:#E4E7F0;--surface-soft:#F6F8FC;
  --encre:#22252E;--encre2:#5A6478;
  --vert:#22C55E;--vert-fonce:#16A34A;--vert-pale:#DCFCE7;
  --or:#FFB020;--or-clair:#FFD45E;--or-fonce:#C77E00;
  --corail:#FF5A5F;--corail-fonce:#E23B45;
  --violet:#7C3AED;--violet-pale:#F3EAFF;--bleu:#3B82F6;--bleu-pale:#E7F0FF;
  --r-commun:#94A3B8;--r-peucommun:#22C55E;--r-rare:#3B82F6;--r-epique:#7C3AED;--r-legendaire:#FF9F1C;
  --radius:22px;--radius-btn:16px;--bordure:3px solid var(--encre);
  --ombre-jeu:0 5px 0 rgba(34,37,46,.85);--ombre-surface:0 12px 30px rgba(40,45,80,.10);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--fond);color:var(--encre);font-family:'Nunito',system-ui,sans-serif;
  font-size:16px;line-height:1.55;position:relative;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;
  background:radial-gradient(560px 480px at 10% -5%,var(--glow-mint) 0%,transparent 60%),
    radial-gradient(600px 520px at 94% 6%,var(--glow-lilas) 0%,transparent 60%),
    radial-gradient(680px 600px at 82% 100%,#FFDDB0 0%,transparent 62%),
    radial-gradient(520px 460px at 0% 70%,#FFD1E8 0%,transparent 60%);
  opacity:.7;animation:derive 34s ease-in-out infinite alternate;}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:radial-gradient(rgba(34,37,46,.05) 2px,transparent 2px);background-size:34px 34px;}
@keyframes derive{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(-18px,14px,0) scale(1.06);}}
.deco{position:fixed;z-index:-1;pointer-events:none;font-size:32px;filter:drop-shadow(0 4px 0 rgba(34,37,46,.15));opacity:.8;animation:flotte 7s ease-in-out infinite;}
.deco.d1{top:22%;left:3%;}.deco.d2{top:40%;right:4%;font-size:26px;animation-delay:1.4s;}
.deco.d3{top:70%;left:2%;font-size:28px;animation-delay:.8s;}.deco.d4{top:86%;right:6%;animation-delay:2s;}
@keyframes flotte{0%,100%{transform:translateY(0) rotate(-6deg);}50%{transform:translateY(-16px) rotate(8deg);}}
@media(max-width:760px){.deco{display:none;}}
@media(prefers-reduced-motion:reduce){body::before,.deco{animation:none;}}
.display,h1,h2,h3{font-family:'Fredoka',sans-serif;font-weight:700;letter-spacing:.2px;}

/* NAV */
nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);
  border-bottom:2px solid var(--surface-bord);display:flex;align-items:center;gap:14px;padding:10px 18px;flex-wrap:wrap;}
nav .logo{font-family:'Fredoka';font-weight:700;font-size:18px;display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--encre);white-space:nowrap;}
@media(max-width:480px){nav .logo{font-size:15.5px;}}
nav .logo .pastille{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9A3,var(--or) 60%,var(--or-fonce));border:2.5px solid var(--encre);display:flex;align-items:center;justify-content:center;font-size:13px;}
nav .links{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto;align-items:center;}
nav .links a{font-size:12.5px;font-weight:800;color:var(--encre2);text-decoration:none;padding:6px 9px;border-radius:10px;transition:background .15s,color .15s;}
nav .links a:hover{background:var(--surface-soft);color:var(--encre);}
nav .links a.on{color:var(--encre);background:var(--surface-soft);}
nav .links a.cta{background:linear-gradient(180deg,var(--or-clair),var(--or));color:var(--encre);border:2.5px solid var(--encre);box-shadow:0 3px 0 var(--or-fonce);}
@media(max-width:700px){
  nav{gap:6px;padding:8px 12px;}
  nav .links{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:3px;
    -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent);}
  nav .links::-webkit-scrollbar{display:none;}
  nav .links a{flex:none;}
}

.wrap{max-width:1080px;margin:0 auto;padding:22px 20px 80px;}
section{margin-top:30px;}
.page-title{font-size:clamp(26px,4.4vw,40px);margin-top:10px;}
.page-sub{font-weight:800;color:var(--encre2);margin:2px 0 6px;}

.card{background:var(--surface);border:2px solid var(--surface-bord);border-radius:var(--radius);box-shadow:var(--ombre-surface);padding:24px;position:relative;}
.card::before{content:"";position:absolute;top:-2px;left:24px;right:24px;height:5px;border-radius:0 0 8px 8px;background:linear-gradient(90deg,var(--vert),var(--bleu),var(--violet),var(--corail),var(--or));opacity:.85;}
.card.plain::before{display:none;}
.sec-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.sec-head .num{width:34px;height:34px;border-radius:12px;border:var(--bordure);box-shadow:var(--ombre-jeu);display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:700;font-size:15px;transform:rotate(-4deg);color:#fff;}
.sec-head h2{font-size:21px;}
.lab{font-size:10px;font-weight:900;color:#fff;background:var(--bleu);border-radius:6px;padding:1px 7px;vertical-align:middle;letter-spacing:.4px;text-transform:uppercase;}
.endbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:28px;padding-top:20px;border-top:2px solid var(--surface-bord);}
.endbar .back{font-weight:800;font-size:13px;color:var(--encre2);text-decoration:none;padding:9px 4px;}
.endbar .back:hover{color:var(--encre);}
.endbar .next{margin-left:auto;}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;text-align:center;
  font-family:'Fredoka';font-weight:700;font-size:16px;color:#fff;padding:13px 24px;border-radius:var(--radius-btn);
  border:var(--bordure);text-shadow:0 2px 0 rgba(0,0,0,.22);transition:transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .12s;position:relative;}
.btn:hover{transform:translateY(-3px) scale(1.03);}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(34,37,46,.85)!important;}
.btn-or{background:linear-gradient(180deg,var(--or-clair),var(--or) 45%,var(--or-fonce));color:var(--encre);text-shadow:none;box-shadow:0 5px 0 #9A6200;}
.btn-vert{background:linear-gradient(180deg,#4ADE80,var(--vert) 45%,var(--vert-fonce));box-shadow:0 5px 0 #0E7A38;}
.btn-corail{background:linear-gradient(180deg,#FF8A8E,var(--corail) 45%,var(--corail-fonce));box-shadow:0 5px 0 #A61E27;}
.btn-bleu{background:linear-gradient(180deg,#60A5FA,var(--bleu) 45%,#2563EB);box-shadow:0 5px 0 #1E4F9E;}
.btn.sm{font-size:13.5px;padding:9px 16px;border-width:2.5px;}

/* Jauges */
.rail{height:26px;background:#E7EBF3;border:var(--bordure);border-radius:999px;overflow:hidden;position:relative;box-shadow:inset 0 3px 6px rgba(34,37,46,.14);}
.rail .rempli{height:100%;border-radius:999px;position:relative;min-width:14px;transition:width 1.1s cubic-bezier(.34,1.3,.64,1);display:flex;align-items:center;justify-content:flex-end;padding-right:8px;}
.rail .rempli::after{content:"";position:absolute;top:4px;left:10px;right:10px;height:7px;border-radius:8px;background:rgba(255,255,255,.45);}
.rail .rempli.vert{background:linear-gradient(180deg,#4ADE80,var(--vert-fonce));}
.rail .rempli.or{background:linear-gradient(180deg,var(--or-clair),var(--or-fonce));}
.rail .rempli.corail{background:linear-gradient(180deg,#FF8A8E,var(--corail-fonce));}
.rail .rempli.violet{background:linear-gradient(180deg,#A78BFA,#6D28D9);}
.rail .pastille{position:relative;z-index:2;background:#fff;border:2px solid var(--encre);border-radius:999px;font-size:11px;font-weight:900;padding:2px 8px;white-space:nowrap;color:var(--encre);}
.mini{margin:9px 0;}
.mini label{display:flex;justify-content:space-between;font-weight:900;font-size:12.5px;margin-bottom:4px;}
.mini .rail{height:20px;}

/* HERO */
.hero{background:linear-gradient(160deg,#7C3AED 0%,#5B6BF6 55%,#3B82F6 100%);border:var(--bordure);border-radius:28px;padding:30px 26px;color:#fff;box-shadow:0 16px 38px rgba(60,40,140,.3);position:relative;overflow:hidden;margin-top:22px;}
.hero .devise{font-weight:900;font-size:13px;letter-spacing:1px;text-transform:uppercase;opacity:.85;}
.hero h1{font-size:clamp(26px,4.6vw,44px);margin:4px 0 2px;text-shadow:0 3px 0 rgba(34,37,46,.5);}
.hero .lvl-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 8px;}
.hero .lvlbadge{background:#fff;color:var(--encre);border:var(--bordure);border-radius:14px;padding:6px 14px;font-family:'Fredoka';font-weight:700;font-size:15px;box-shadow:var(--ombre-jeu);}
.hero .titre-perso{font-weight:900;font-size:14px;background:rgba(255,255,255,.18);padding:5px 12px;border-radius:999px;}
.hero .piece{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9A3,var(--or) 60%,var(--or-fonce));border:3px solid var(--encre);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:var(--encre);animation:tourne 3s linear infinite;margin-left:auto;}
@keyframes tourne{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
.hero .million-lbl{display:flex;justify-content:space-between;font-weight:900;font-size:14px;margin:16px 0 7px;}
.hero .million-val{font-family:'Fredoka';font-weight:700;font-size:clamp(30px,6vw,52px);line-height:1;}
.hero .rail{height:34px;border-color:#22252E;}
.hero .sub{font-size:12.5px;font-weight:800;opacity:.9;margin-top:8px;}

/* Grilles */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:820px){.grid2,.grid3{grid-template-columns:1fr;}}

/* Stuff / perso */
.perso{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;}
@media(max-width:600px){.perso{grid-template-columns:1fr;text-align:center;}}
.mascotte{width:150px;height:170px;border-radius:20px;border:var(--bordure);background:repeating-linear-gradient(45deg,#F1F3FA 0 12px,#E9ECF5 12px 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--ombre-jeu);gap:6px;margin:0 auto;}
.mascotte.big{width:190px;height:220px;}
.mascotte .ph{font-size:52px;}.mascotte .tag{font-size:10.5px;font-weight:900;color:var(--encre2);text-transform:uppercase;letter-spacing:.6px;text-align:center;line-height:1.3;}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
@media(max-width:600px){.slots{grid-template-columns:repeat(2,1fr);}}
.item{background:var(--surface);border:var(--bordure);border-radius:16px;padding:10px 8px;text-align:center;box-shadow:var(--ombre-jeu);cursor:help;transition:transform .15s cubic-bezier(.34,1.56,.64,1);}
.item:hover{transform:rotate(-2deg) scale(1.05);}
.item .ico{width:46px;height:46px;margin:0 auto 6px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:23px;border:3px solid var(--rar);background:color-mix(in srgb,var(--rar) 15%,#fff);box-shadow:0 3px 0 color-mix(in srgb,var(--rar) 55%,var(--encre));}
.item .nom{font-weight:900;font-size:11px;color:var(--rar);line-height:1.2;}
.item .type{font-size:9.5px;font-weight:800;color:var(--encre2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;}

.stat-line{display:flex;justify-content:space-between;font-weight:800;font-size:13.5px;padding:6px 0;border-bottom:1.5px solid #EEF1F7;}
.stat-line:last-child{border:none;}.stat-line .v{font-family:'Fredoka';font-weight:600;}

/* Arbre de compétences (verrouillé) */
.skilltree{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.skill{background:var(--surface-soft);border:2.5px dashed #C7CDDA;border-radius:16px;padding:14px 12px;text-align:center;position:relative;filter:grayscale(.3);opacity:.85;}
.skill .lock{font-size:22px;}
.skill .sn{font-weight:900;font-size:12.5px;margin-top:4px;}
.skill .sr{font-size:10.5px;font-weight:800;color:var(--encre2);margin-top:3px;}

/* Bercy / stats */
.bercy{display:flex;align-items:center;gap:12px;}
.bercy .av{width:52px;height:52px;flex:none;border-radius:14px;border:var(--bordure);background:#FFE7E7;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:var(--ombre-jeu);}
.stats-abs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px;}
@media(max-width:600px){.stats-abs{grid-template-columns:1fr;}}
.abs{background:var(--surface-soft);border:2px solid var(--surface-bord);border-radius:14px;padding:10px 12px;}
.abs .k{font-size:11px;font-weight:900;color:var(--encre2);text-transform:uppercase;letter-spacing:.5px;}
.abs .val{font-family:'Fredoka';font-weight:600;font-size:16px;}

/* Force */
.streak{font-size:12px;font-weight:900;color:var(--vert-fonce);}

/* Paliers dons */
.palier{background:var(--surface-soft);border:2px solid var(--surface-bord);border-radius:16px;padding:14px;text-align:center;transition:border-color .15s,transform .15s;}
.palier:hover{border-color:var(--or);transform:translateY(-3px);}
.palier .p{font-family:'Fredoka';font-weight:700;font-size:22px;}
.palier .d{font-size:11.5px;font-weight:800;color:var(--encre2);min-height:32px;margin:4px 0 10px;}

/* Hauts faits */
.hf{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1.5px solid #EEF1F7;font-weight:800;font-size:13.5px;}
.hf:last-child{border:none;}
.hf .med{width:30px;height:30px;flex:none;border-radius:9px;border:2.5px solid var(--encre);display:flex;align-items:center;justify-content:center;font-size:15px;}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
.ach{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:2px solid var(--surface-bord);border-radius:16px;padding:13px;box-shadow:var(--ombre-surface);}
.ach.lock{opacity:.6;filter:grayscale(.4);}
.ach .m{width:42px;height:42px;flex:none;border-radius:12px;border:var(--bordure);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:var(--ombre-jeu);}
.ach .t{font-weight:900;font-size:13.5px;line-height:1.25;}
.ach .d{font-size:11.5px;font-weight:700;color:var(--encre2);margin-top:2px;}
.tier{display:inline-block;font-size:10px;font-weight:900;padding:1px 7px;border-radius:999px;border:2px solid var(--encre);margin-top:5px;}
.tier.bronze{background:#F4D3B0;}.tier.argent{background:#DFE6EE;}.tier.or{background:#FFE9A3;}.tier.legend{background:#F3D9FF;}.tier.honte{background:#FFE7E7;color:var(--corail-fonce);}
.hf-cat{font-size:19px;margin:26px 0 12px;display:flex;align-items:center;gap:8px;}
.hf-cat::after{content:"";flex:1;height:2px;background:var(--surface-bord);border-radius:2px;}
.defi{padding:20px;}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.chip{cursor:pointer;font-weight:900;font-size:12px;padding:6px 12px;border-radius:999px;border:2.5px solid var(--encre);background:#fff;box-shadow:var(--ombre-jeu);transition:transform .1s;}
.chip:hover{transform:translateY(-2px);}
.chip.on{background:var(--encre);color:#fff;}

/* Versus / baromètre */
.versus{display:grid;gap:10px;}
.vs-line label{display:flex;justify-content:space-between;font-weight:900;font-size:12.5px;margin-bottom:3px;}
.barometre{height:26px;border-radius:999px;border:var(--bordure);overflow:hidden;background:linear-gradient(90deg,#22C55E,#FFB020,#FF5A5F);position:relative;box-shadow:inset 0 3px 6px rgba(0,0,0,.12);}
.barometre .aig{position:absolute;top:-6px;width:5px;height:38px;background:var(--encre);border-radius:3px;transform:translateX(-50%);}

/* Newsletter / FAQ */
.news{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.news input{flex:1;min-width:200px;border:var(--bordure);border-radius:14px;padding:11px 14px;font-family:'Nunito';font-weight:700;font-size:14px;}
.q{font-weight:900;font-size:15px;margin-top:14px;}
.a{font-weight:700;color:var(--encre2);font-size:13.5px;}
.faq-item{border-bottom:1.5px solid #EEF1F7;padding-bottom:8px;}

/* Footer */
footer{background:var(--encre);color:#fff;padding:28px 20px 40px;margin-top:40px;}
footer .fwrap{max-width:1080px;margin:0 auto;}
footer .flogo{font-family:'Fredoka';font-weight:700;font-size:20px;display:flex;align-items:center;gap:8px;}
footer .flogo .p{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9A3,#FFB020 60%,#C77E00);border:2.5px solid #22252E;display:flex;align-items:center;justify-content:center;font-size:12px;color:#22252E;}
footer .cols{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;}
footer a{color:#C9D1E6;text-decoration:none;font-size:12.5px;font-weight:800;padding:5px 10px;border-radius:9px;background:rgba(255,255,255,.06);}
footer a:hover{background:rgba(255,255,255,.14);color:#fff;}
footer .fine{font-size:11.5px;color:#8A93AC;font-weight:700;margin-top:10px;}

/* Récit homepage */
.kicker{display:inline-block;font-size:11px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;color:var(--violet);background:var(--violet-pale);border-radius:999px;padding:4px 12px;}
.story{text-align:center;max-width:640px;margin:0 auto 20px;}
.story .st{font-size:clamp(22px,3.6vw,32px);}
.story .ss{font-weight:800;color:var(--encre2);font-size:14px;margin-top:4px;}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:760px){.pillars{grid-template-columns:1fr;}}
.pill{text-align:center;padding:22px 18px;}
.pill .pi{font-size:38px;}
.pill .pt{font-family:'Fredoka';font-weight:700;font-size:17px;margin:6px 0 4px;}
.pill .pd{font-weight:700;font-size:12.5px;color:var(--encre2);}
.explore{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(max-width:760px){.explore{grid-template-columns:1fr 1fr;}}
@media(max-width:460px){.explore{grid-template-columns:1fr;}}
.tile{display:flex;align-items:center;gap:12px;background:var(--surface);border:2px solid var(--surface-bord);border-radius:16px;padding:14px;text-decoration:none;color:var(--encre);box-shadow:var(--ombre-surface);transition:transform .15s cubic-bezier(.34,1.56,.64,1),border-color .15s;}
.tile:hover{transform:translateY(-3px);border-color:var(--bleu);}
.tile .te{width:44px;height:44px;flex:none;border-radius:13px;border:var(--bordure);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:var(--ombre-jeu);background:#fff;}
.tile .tn{font-family:'Fredoka';font-weight:700;font-size:14.5px;}
.tile .td{font-size:11.5px;font-weight:700;color:var(--encre2);}
.tile .ar{margin-left:auto;font-weight:900;color:var(--bleu);font-size:18px;}
.path{padding:22px;}
.path .ph{font-family:'Fredoka';font-weight:700;font-size:19px;display:flex;align-items:center;gap:8px;}
.path ul{list-style:none;margin:12px 0 16px;padding:0;}
.path li{font-weight:800;font-size:13px;padding:5px 0 5px 22px;position:relative;color:#3A4050;}
.path li::before{content:"✓";position:absolute;left:0;color:var(--vert-fonce);font-weight:900;}

/* Tableau / ledger */
.tbl{width:100%;border-collapse:collapse;font-size:13px;}
.tbl th{text-align:left;font-weight:900;color:var(--encre2);font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;border-bottom:2px solid var(--surface-bord);}
.tbl td{padding:9px 10px;border-bottom:1.5px solid #EEF1F7;font-weight:700;}
.tbl tr:last-child td{border:none;}
.tbl .pos{color:var(--vert-fonce);font-weight:900;}
.tbl .neg{color:var(--corail-fonce);font-weight:900;}
.tbl .mono{font-family:'Fredoka';font-weight:600;}

/* Mini graphe en barres (historique) */
.spark{display:flex;align-items:flex-end;gap:5px;height:90px;padding-top:6px;}
.spark span{flex:1;background:linear-gradient(180deg,#4ADE80,var(--vert-fonce));border:2px solid var(--encre);border-radius:6px 6px 0 0;min-height:6px;box-shadow:0 3px 0 rgba(34,37,46,.15);}

/* Carte de France placeholder */
.mapfr{height:200px;border-radius:16px;border:2.5px dashed #C7CDDA;background:var(--surface-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--encre2);font-weight:900;}
.mapfr .big{font-size:44px;}

/* Leaderboard */
.lb{display:flex;flex-direction:column;gap:7px;}
.lb .row{display:flex;align-items:center;gap:12px;background:var(--surface-soft);border:2px solid var(--surface-bord);border-radius:14px;padding:9px 12px;font-weight:800;font-size:13.5px;}
.lb .row .rk{width:26px;height:26px;flex:none;border-radius:8px;border:2.5px solid var(--encre);display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:700;font-size:13px;background:#fff;}
.lb .row.top1 .rk{background:#FFE9A3;}.lb .row.top2 .rk{background:#DFE6EE;}.lb .row.top3 .rk{background:#F4D3B0;}
.lb .row .amt{margin-left:auto;font-family:'Fredoka';font-weight:600;}

/* Affiliation / produits */
.prod{display:flex;flex-direction:column;gap:8px;}
.prod .top{display:flex;align-items:center;gap:10px;}
.prod .ico{width:44px;height:44px;flex:none;border-radius:13px;border:var(--bordure);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:var(--ombre-jeu);background:#fff;}
.prod .nm{font-family:'Fredoka';font-weight:700;font-size:15px;}
.prod .cut{font-size:11px;font-weight:900;color:var(--vert-fonce);background:var(--vert-pale);border-radius:999px;padding:2px 9px;display:inline-block;}
.prod .dz{font-size:12.5px;font-weight:700;color:var(--encre2);}

/* Calendrier */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal .d{aspect-ratio:1;border-radius:10px;border:2px solid var(--surface-bord);background:var(--surface-soft);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;color:var(--encre2);}
.cal .d.pris{background:#FFE7E7;border-color:var(--corail);color:var(--corail-fonce);}
.cal .d.libre{background:var(--vert-pale);border-color:var(--vert);color:var(--vert-fonce);cursor:pointer;}

/* Bloc code (embed) */
.code{background:#22252E;color:#C9F5E4;border-radius:12px;padding:12px 14px;font-family:ui-monospace,Menlo,monospace;font-size:12px;overflow:auto;line-height:1.5;}

/* Légal */
.legal h3{font-size:16px;margin:18px 0 4px;}
.legal p{font-weight:700;font-size:13.5px;color:#3A4050;margin-bottom:6px;}
.legal .note{background:var(--bleu-pale);border:2px solid #C7DBFF;border-radius:12px;padding:12px 14px;font-size:12.5px;font-weight:800;color:#1E3A8A;margin-top:12px;}

/* Feedback */
#toasts{position:fixed;bottom:18px;left:18px;z-index:300;display:flex;flex-direction:column;gap:8px;}
.toast{display:inline-flex;align-items:center;gap:10px;background:#fff;border:var(--bordure);border-radius:999px;padding:9px 18px 9px 10px;box-shadow:var(--ombre-jeu);font-weight:900;font-size:13.5px;animation:tpop .5s cubic-bezier(.34,1.56,.64,1);}
.toast .pc{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9A3,var(--or) 60%,var(--or-fonce));border:2.5px solid var(--encre);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;}
@keyframes tpop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.07)}100%{transform:scale(1)}}
.confetti{position:fixed;z-index:999;pointer-events:none;width:11px;height:11px;border-radius:3px;}
@keyframes conf-fall{to{transform:translate(var(--dx),var(--dy)) rotate(var(--dr));opacity:0;}}
#tooltip{position:fixed;z-index:400;max-width:250px;pointer-events:none;display:none;background:#fff;border:var(--bordure);border-radius:14px;padding:10px 12px;box-shadow:var(--ombre-jeu),var(--ombre-surface);font-size:12.5px;line-height:1.4;}
#tooltip .tn{font-family:'Fredoka';font-weight:600;font-size:14px;}
#tooltip .ts{color:var(--vert-fonce);font-weight:800;}
#tooltip .tf{color:var(--encre2);font-style:italic;margin-top:5px;border-top:1.5px solid #EEF1F7;padding-top:5px;}
#levelup{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;pointer-events:none;}
#levelup .box{font-family:'Fredoka';font-weight:700;font-size:44px;color:#fff;background:linear-gradient(180deg,var(--or-clair),var(--or-fonce));border:var(--bordure);border-radius:22px;padding:18px 34px;box-shadow:var(--ombre-jeu);text-shadow:0 3px 0 rgba(0,0,0,.3);animation:lu 1.4s cubic-bezier(.34,1.56,.64,1);}
@keyframes lu{0%{transform:scale(.3) rotate(-8deg);opacity:0}30%{transform:scale(1.1) rotate(3deg);opacity:1}80%{transform:scale(1) rotate(0);opacity:1}100%{transform:scale(1.05);opacity:0}}

/* ============================================================
   v3.1 — passe prod : reveal au scroll, bob des icônes, partage,
   machine à sous, états vides, accessibilité
   ============================================================ */

/* Accessibilité */
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:#fff;border:var(--bordure);border-radius:12px;padding:10px 16px;font-weight:900;color:var(--encre);}
.skip:focus{left:12px;top:12px;}
a:focus-visible,button:focus-visible,input:focus-visible,.chip:focus-visible{outline:3px solid var(--bleu);outline-offset:3px;border-radius:12px;}

/* Reveal au scroll (charte : "sections en pop") */
.reveal{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .55s ease,transform .55s cubic-bezier(.34,1.4,.64,1);}
.reveal.in{opacity:1;transform:none;}

/* Bob des icônes d'objets (charte : validé "à fond") */
.item .ico{animation:bob 3.2s ease-in-out infinite;}
.item:nth-child(2n) .ico{animation-delay:.6s;}
.item:nth-child(3n) .ico{animation-delay:1.1s;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Titre du hero qui se balance doucement (charte) */
.hero h1{display:inline-block;animation:balance 5s ease-in-out infinite;transform-origin:8% 100%;}
@keyframes balance{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.6deg)}}

/* États vides (vrai zéro) */
.vide{text-align:center;padding:22px 14px;border:2.5px dashed #C7CDDA;border-radius:16px;background:var(--surface-soft);color:var(--encre2);font-weight:800;font-size:13px;}
.vide .ve{display:block;font-size:32px;margin-bottom:6px;filter:grayscale(.2);}
.soon{display:inline-block;font-size:10px;font-weight:900;color:#8A6D1F;background:#FFF3D4;border:1.5px solid #F3D98A;border-radius:999px;padding:2px 9px;vertical-align:middle;letter-spacing:.4px;text-transform:uppercase;}

/* Barre de partage (au-dessus du footer) */
.sharebar{max-width:1080px;margin:36px auto 0;padding:0 20px;}
.sharebar .in2{background:linear-gradient(160deg,#7C3AED,#3B82F6);border:var(--bordure);border-radius:20px;padding:18px 22px;color:#fff;display:flex;align-items:center;gap:14px;flex-wrap:wrap;box-shadow:0 10px 26px rgba(60,40,140,.25);}
.sharebar .tx{font-weight:900;font-size:14px;}
.sharebar .tx small{display:block;font-size:11.5px;font-weight:800;opacity:.85;}
.sharebar .btn{margin-left:auto;}
@media(max-width:600px){.sharebar .btn{margin-left:0;}}

/* Machine à sous — le Casino de Rien */
.slotm{display:flex;flex-direction:column;align-items:center;gap:12px;}
.slotm .rouleaux{display:flex;gap:10px;}
.slotm .rl{width:74px;height:74px;border:var(--bordure);border-radius:16px;background:#fff;box-shadow:var(--ombre-jeu),inset 0 4px 8px rgba(34,37,46,.08);display:flex;align-items:center;justify-content:center;font-size:38px;overflow:hidden;}
.slotm .rl.spin{animation:slotshake .09s linear infinite;}
@keyframes slotshake{0%{transform:translateY(-2px)}50%{transform:translateY(2px)}100%{transform:translateY(-2px)}}
.slotm .gain{font-family:'Fredoka';font-weight:700;font-size:17px;min-height:24px;text-align:center;}

/* Pluie de billets (easter egg) */
.billet{position:fixed;top:-50px;z-index:998;font-size:30px;pointer-events:none;animation:bfall linear forwards;}
@keyframes bfall{to{transform:translateY(110vh) rotate(360deg);}}

/* Page 404 */
.p404{text-align:center;padding:60px 20px;}
.p404 .n{font-family:'Fredoka';font-weight:700;font-size:clamp(80px,18vw,160px);line-height:1;background:linear-gradient(180deg,var(--or-clair),var(--or-fonce));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;}

/* ============================================================
   v3.4 — passe UX/fun : surligneurs, shine, jauges vivantes,
   pièces du hero, wiggle, sélection dorée
   ============================================================ */

/* Surligneurs colorés (charte : validé "à fond") */
.hl{padding:0 .16em;border-radius:5px;background:linear-gradient(100deg,transparent 2%,#FFE9A3 6% 94%,transparent 98%);box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.hl.mint{background:linear-gradient(100deg,transparent 2%,#C9F5E4 6% 94%,transparent 98%);}
.hl.rose{background:linear-gradient(100deg,transparent 2%,#FFD1E8 6% 94%,transparent 98%);}
.hl.lilas{background:linear-gradient(100deg,transparent 2%,#DEDBFF 6% 94%,transparent 98%);}

/* Reflet qui balaie les CTA or (juteux, discret) */
.btn-or{overflow:hidden;}
.btn-or::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.5) 48%,transparent 61%);
  background-size:260% 100%;background-position:180% 0;animation:shine 3.8s ease-in-out infinite;}
@keyframes shine{0%,55%{background-position:180% 0}90%,100%{background-position:-80% 0}}

/* Rayures animées dans les jauges (esprit jeu) */
.rail .rempli::before{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;
  background:linear-gradient(45deg,rgba(255,255,255,.14) 25%,transparent 25% 50%,rgba(255,255,255,.14) 50% 75%,transparent 75%);
  background-size:24px 24px;animation:raye 1.2s linear infinite;}
@keyframes raye{to{background-position:24px 0;}}

/* Pièces qui flottent dans le hero */
.hero .hcoin{position:absolute;pointer-events:none;opacity:.3;font-size:24px;animation:flotte 6.5s ease-in-out infinite;}

/* Wiggle des tuiles Explore + badge de niveau */
.tile:hover .te{animation:wiggle .45s ease;}
@keyframes wiggle{25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
.hero .lvlbadge{transition:transform .15s cubic-bezier(.34,1.56,.64,1);}
.hero .lvlbadge:hover{transform:rotate(-3deg) scale(1.07);}

/* Sélection de texte dorée */
::selection{background:#FFE9A3;color:var(--encre);}

/* Ticker boursier */
.ticker{overflow:hidden;background:var(--encre);color:#EDEFF7;font-weight:800;font-size:12px;}
.ticker .tk{display:inline-flex;gap:38px;white-space:nowrap;padding:7px 0 7px 38px;animation:tick 46s linear infinite;will-change:transform;}
.ticker:hover .tk{animation-play-state:paused;}
@keyframes tick{to{transform:translateX(-50%);}}
.ticker b{color:#FFD45E;font-weight:900;}

/* Badge actionnaire dans la nav */
.nav-act{font-size:11px;font-weight:900;background:#FFF3D4;border:2px solid var(--encre);border-radius:999px;padding:3px 10px;color:#8A6D1F;white-space:nowrap;}

/* Roadmap / plan stratégique */
.rmi{display:flex;gap:14px;position:relative;padding-bottom:18px;}
.rmi::before{content:"";position:absolute;left:11px;top:27px;bottom:0;width:3px;background:var(--surface-bord);}
.rmi:last-child::before{display:none;}
.rmi .pt2{width:25px;height:25px;flex:none;border-radius:50%;border:3px solid var(--encre);background:linear-gradient(180deg,var(--or-clair),var(--or));box-shadow:var(--ombre-jeu);position:relative;z-index:1;}
.rmi.off .pt2{background:var(--surface-soft);}
.rmi .rt{font-weight:900;font-size:13.5px;}
.rmi .rd{font-size:12px;font-weight:700;color:var(--encre2);}

/* Résolutions d'AG */
.resol{border:2px solid var(--surface-bord);border-radius:14px;padding:13px 15px;margin-top:10px;background:var(--surface-soft);}
.resol .agv{display:block;font-size:11.5px;font-weight:900;color:var(--vert-fonce);margin-top:6px;}

@media(prefers-reduced-motion:reduce){
  .item .ico,.hero h1,.hero .piece,.slotm .rl.spin,.btn-or::after,.rail .rempli::before,.hero .hcoin,.tile:hover .te{animation:none;}
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ---- Bannière d'annonce pilotée depuis la base (clé contenu.annonce) ---- */
.annonce{display:flex;align-items:center;gap:12px;background:#FFFFFF;border:3px solid var(--encre);border-radius:16px;box-shadow:var(--ombre-jeu);padding:12px 18px;font-weight:900;font-size:13.5px;margin:16px 0 4px;}
.annonce .ai{font-size:22px;flex:none;animation:annonce-bob 2.4s ease-in-out infinite;}
@keyframes annonce-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.annonce .ai{animation:none;}}