/* =====================================================================
   ACCUEIL (« Aujourd'hui ») : direction artistique demandée par Ruben.
   Fond presque noir avec poussière d'étoiles, badge de rang en pixel art
   au centre, typographie blanche, cartes anthracite discrètes,
   progression en petits carrés. Une seule couleur vive : celle du rang.
   Les autres pages gardent leur style en attendant leur propre refonte.
   ===================================================================== */
body.mode-accueil { background: #070708; }
body.mode-accueil .fond {
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 78% 9%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 64% 31%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(1px 1px at 27% 42%, rgba(255,255,255,.2), transparent 60%),
    radial-gradient(1px 1px at 88% 47%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1px 1px at 41% 8%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1px 1px at 6% 61%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(1px 1px at 53% 66%, rgba(255,255,255,.15), transparent 60%),
    radial-gradient(1px 1px at 93% 79%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(1px 1px at 19% 88%, rgba(255,255,255,.15), transparent 60%),
    #070708;
  background-size: 260px 300px, 260px 300px, 260px 300px, 260px 300px, 260px 300px,
    260px 300px, 260px 300px, 260px 300px, 260px 300px, 260px 300px, auto;
}
body.mode-accueil .barre-haut .sys-entete { color: #8e8e93; text-shadow: none; letter-spacing: .18em; font-size: 11px; }
body.mode-accueil .barre-haut #date-jour { color: #636366; }
body.mode-accueil #etat-sync-texte { color: #636366; }
body.mode-accueil .sync { width: 7px; height: 7px; box-shadow: none; }
.q-infos .sep { color: #5c5c61; margin: 0 -4px; }
body.mode-accueil .bandeau-penalite { background: #1c1012; border-color: rgba(255,59,85,.45); box-shadow: none; animation: none; }
body.mode-accueil .onglets { background: rgba(7,7,8,.88); border-top-color: #1f1f22; }
body.mode-accueil .onglets button { color: #636366; }
body.mode-accueil .onglets button.actif { color: #fff; text-shadow: none; }

.accueil { --carte: #161618; --bord-a: #26262a; --texte-2: #8e8e93; --texte-3: #5c5c61; }
.mono { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; font-variant-numeric: tabular-nums; }

/* Le héros : badge, niveau, rang */
.hero { position: relative; display: flex; flex-direction: column; align-items: center; padding: 18px 0 26px; }
.hero-halo {
  position: absolute; top: -12px; width: 230px; height: 230px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rang) 30%, transparent) 0%, transparent 65%);
  animation: respire 5s ease-in-out infinite; pointer-events: none;
}
.hero-badge { position: relative; width: 150px; height: 150px; animation: flotte 6s ease-in-out infinite; }
.hero-badge svg, .revelation-badge svg, .mini-badge svg { width: 100%; height: 100%; display: block; }
.hero-niveau { font-size: 46px; font-weight: 700; letter-spacing: -.02em; color: #fff; margin-top: 22px; line-height: 1; }
.hero-grade { font-size: 13px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: #8e8e93; margin-top: 12px; }
@keyframes respire { 50% { opacity: .55; transform: scale(.94); } }
@keyframes flotte { 50% { transform: translateY(-4px); } }

/* Cartes anthracite */
.carte-a { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--carte); border: 1px solid var(--bord-a); border-radius: 18px; padding: 16px 18px; margin-bottom: 10px; }
.carte-xp { cursor: pointer; }
.carte-xp-tete { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.carte-xp-tete b { flex: 1; color: #fff; font-weight: 650; }
.carte-xp-tete .mono { font-size: 14px; color: #fff; }
.mini-badge { width: 26px; height: 26px; flex: none; }
.points { display: flex; gap: 4px; margin: 14px 0 12px; }
.points i { width: 5px; height: 5px; border-radius: 1px; background: #3a3a3e; flex: none; }
.points i.plein { background: #fff; }
.carte-texte { font-size: 14px; line-height: 1.45; color: #a1a1a6; }
.carte-texte.discret { color: var(--texte-3); font-size: 12.5px; margin-top: 6px; }
.pointilles { height: 1px; margin: 22px 0 24px; background-image: linear-gradient(90deg, #3a3a3e 50%, transparent 50%); background-size: 6px 1px; }
.titre-section { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--texte-2); margin: 22px 4px 10px; }
.note-a { font-size: 12.5px; color: var(--texte-3); margin: 6px 4px 0; line-height: 1.45; }
.lien-a { font: inherit; font-size: 14px; font-weight: 600; color: #fff; background: none; border: none; padding: 6px 4px; cursor: pointer; }
.lien-a.petit-a { font-size: 12.5px; color: #c7c7cc; padding: 6px 0 0; }
.pied-accueil { margin: 26px 0 8px; }

/* Quêtes du jour */
.quete-a { display: grid; grid-template-columns: 26px 1fr auto; gap: 14px; align-items: start; }
.quete-a-titre { font-size: 15.5px; font-weight: 650; color: #fff; margin-bottom: 3px; }
.case-a { width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid #5c5c61; background: none; color: #070708; font-weight: 900; font-size: 14px; cursor: pointer; display: grid; place-items: center; margin-top: 1px; }
.quete-a.faite .case-a { background: #fff; border-color: #fff; }
.quete-a.faite .quete-a-titre { color: #8e8e93; text-decoration: line-through; text-decoration-color: #5c5c61; }
.xp-a { font-size: 13px; color: #fff; padding-top: 2px; }
.quete-a.faite .xp-a { color: #5c5c61; }

/* La recommandation dans le même style (carteQuete est partagée avec l'onglet Quêtes) */
.accueil .carte-quete { background: var(--carte); border: 1px solid var(--bord-a); border-radius: 18px; margin-bottom: 10px; }
.accueil .carte-quete.prevue { border-color: color-mix(in srgb, var(--rang) 45%, var(--bord-a)); }
.accueil .carte-quete .quete { padding: 16px 18px 6px; gap: 14px; grid-template-columns: 24px 1fr auto; }
.accueil .carte-quete .case { width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid #5c5c61; background: none; box-shadow: none; }
.accueil .q-titre { font-size: 15.5px; color: #fff; }
.accueil .q-detail { color: #a1a1a6; font-size: 14px; }
.accueil .q-infos { color: #c7c7cc; }
.accueil .q-xp { font-family: ui-monospace, "SF Mono", Consolas, monospace; color: #fff; font-weight: 600; }
.accueil .tag { background: #222225; color: #a1a1a6 !important; }
.accueil .tag-reve { color: color-mix(in srgb, var(--rang) 70%, #fff) !important; }
.accueil .rouge { color: #ff6b7d; }
.accueil .carte-actions { padding: 0 18px 14px 56px; }
.accueil .lien-btn { color: #c7c7cc; font-weight: 600; }
.accueil .lien-btn.discret { color: #5c5c61; }
.accueil .details { padding: 4px 18px 6px 56px; }
.accueil .detail-titre { color: #8e8e93; letter-spacing: .16em; }
.accueil .details p, .accueil .details li { color: #c7c7cc; }
.accueil .details .btn { background: #222225; border-color: #2e2e32; color: #fff; }
.accueil .sources, .accueil .sources a { color: #5c5c61; }

/* Révélation d'un nouveau rang */
.fenetre-modale.modale-rang { background: #0c0c0d; border-color: #26262a; box-shadow: none; }
.revelation { display: flex; flex-direction: column; align-items: center; padding: 10px 0; }
.revelation-badge { width: 170px; height: 170px; animation: revele 1.4s cubic-bezier(.2,.9,.2,1) both; filter: drop-shadow(0 0 24px color-mix(in srgb, var(--rang) 55%, transparent)); }
.revelation .hero-niveau { font-size: 38px; margin-top: 18px; animation: apparait 1s .6s both; }
.revelation .hero-grade { animation: apparait 1s .9s both; }
.revelation .note-a { margin: 14px 0; }
.btn-a { font: inherit; font-size: 15px; font-weight: 650; color: #070708; background: #fff; border: none; border-radius: 12px; padding: 12px 22px; cursor: pointer; }
@keyframes revele { from { opacity: 0; transform: scale(.6); filter: blur(6px) brightness(3); } }

@media (prefers-reduced-motion: reduce) {
  .hero-halo, .hero-badge, .revelation-badge, .revelation .hero-niveau, .revelation .hero-grade { animation: none !important; }
}