/* ═══════════════════════════════════════════════════════════════════
   STYLE COMMUN — index.html (Grimoire), index-craft.html (Outils),
   index-tresors.html (Trésors).

   Ce fichier est la seule source pour : les tokens de couleur, le reset, la
   base typographique, la bande verte, la barre du haut (logo + navigation
   + recherche d'en-tête + boutons) et le pied de page. Les pages ne
   contiennent plus que ce qui leur est propre.

   Historique de la refonte de design (2026-09-04, auparavant dupliquée dans
   chaque page) : --radius 4→6px (surfaces plus arrondies et calmes),
   text3/text4 éclaircis pour le contraste, ombres de cartes aplaties (la
   hiérarchie vient de la bordure/teinte de surface, les fortes ombres sont
   réservées à ce qui flotte : infobulles, modales), anneaux de focus,
   prefers-reduced-motion, interligne de lecture, couleur de sélection.

   Charger avant la <style> de la page (elle peut ainsi surcharger), avec
   un paramètre ?v=… à changer à chaque modification : les navigateurs
   gardent sinon l'ancienne feuille avec une page déjà à jour (et
   inversement).
   ═══════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#181a1b;--bg2:#202223;--bg3:#252729;--bg4:#2c2f30;--bg5:#343738;
  --bdr:#4a4f50;--bdr2:#343738;
  --green:#5a9e1e;--green2:#6aba22;--green3:#7dd326;--green-dk:#3d6e12;
  --gold:#c8962e;--gold2:#e8c87a;
  --red:#c0392b;--red2:#eb6d60;--red-bg:#3a1010;
  --blue:#3a7bd5;--blue2:#5a9be5;
  --purple:#7a4ad4;--purple2:#9a6af4;
  --text:#e4e6e2;--text2:#a3a8a2;--text3:#82877f;--text4:#7f847c;
  --radius:6px;--radius-sm:3px;
  --shadow-card:0 1px 2px rgba(0,0,0,.35);
  --shadow-float:0 8px 24px rgba(0,0,0,.5);
  --focus-ring:0 0 0 2px var(--bg2),0 0 0 4px var(--green2);
  /* Jetons de surface et d'état. Valeurs d'origine ici ; le thème v2 (bas du fichier, html[data-ui="v2"])
     les redéfinit. Ajouter un jeton plutôt qu'une couleur en dur dans une règle. */
  --body-bg:#222;--chrome:#1c1e1f;--chrome-bd:#111;--chrome-sep:#444;--chrome-extra-bd:#2a2c2d;--footer-bg:#1e1e1e;
  --tip-bg:#111;--tip-fg:var(--text);
  --ok:#6aba22;--ok-line:#5a9e1e;--ok-dk:#3d6e12;--ok-bg:#1a3a0a;
  --gold-bg:#2a1800;--n-bg:rgba(255,255,255,.06);--red-fg:#f57575;
  --on-bg:var(--green-dk);--on-bd:var(--green);--on-fg:#fff;
  --btn-bg:var(--green-dk);--btn-bd:var(--green);--btn-fg:#fff;--btn-hover:var(--green);
  --blue-soft:rgba(58,123,213,.14);--blue-line:var(--blue);
  --accent-glow:rgba(106,186,34,.22);
  --ov-gold:#e8c87a;--ov-blue:#5a9be5;--ov-red:#e74c3c;
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
::selection{background:var(--green-dk);color:#fff}
html,body{margin:0}
body{background:var(--body-bg);color:var(--text);font-family:'Segoe UI',Arial,sans-serif;font-size:14px;line-height:1.45}
a{color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}

/* Bande verte en haut */
.top-stripe{height:6px;background:linear-gradient(90deg,var(--green-dk),var(--green2),var(--green3),var(--green2),var(--green-dk));flex-shrink:0}

/* Barre du haut. Elle passe à la ligne quand les boutons de la page ne tiennent plus (au lieu de
   déborder) ; à largeur normale elle reste à une seule ligne de 44px. */
.topbar{background:var(--chrome);border-bottom:1px solid var(--chrome-bd);padding:0 1rem;min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;row-gap:4px;flex-shrink:0}
.t-logo{font-family:'Segoe UI',Arial,sans-serif;font-size:20px;font-weight:700;color:var(--text);letter-spacing:0;display:flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap}
.t-logo span{color:var(--green2)}
.t-sep{width:1px;height:20px;background:var(--chrome-sep);flex-shrink:0}
.t-offline{display:none;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--red2);background:var(--red-bg);border:1px solid var(--red);border-radius:var(--radius-sm);padding:3px 8px;flex-shrink:0}
.t-offline.show{display:inline-flex}
.site-down{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 20px;background:var(--red-bg);border-bottom:1px solid var(--red);color:var(--red2);font-size:12.5px;font-weight:600}
.site-down[hidden]{display:none}
.site-down i{font-size:16px}
.site-down span{flex:1;min-width:240px}
.site-down-retry{font:inherit;font-size:12px;font-weight:700;color:var(--red2);background:transparent;border:1px solid var(--red);border-radius:var(--radius-sm);padding:2px 12px;cursor:pointer}
.site-down-retry:hover{background:var(--red);color:var(--bg)}
/* invitation « Qui êtes-vous ? » : un bandeau sous la barre du haut, dans le flux (flottante, elle recouvrait le bas des pages) */
.who-ask{position:relative;z-index:1;width:min(var(--page-w,1180px),calc(100% - 40px));margin:10px auto 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;background:var(--bg2,var(--surface));border:1px solid var(--accent-line,var(--bdr2));border-radius:14px;box-shadow:var(--shadow-float,0 8px 24px rgba(0,0,0,.4));font-size:12.5px;color:var(--text2)}
.who-ask span{flex:1;min-width:200px}
.who-pick,.who-later{font:inherit;font-size:12px;font-weight:700;border-radius:14px;padding:2px 12px;cursor:pointer;border:1px solid var(--accent-line,var(--bdr2));background:transparent;color:var(--accent,var(--text))}
.who-pick:hover{background:var(--accent,var(--bg4));color:var(--bg)}
.who-later{border-color:var(--bdr2);color:var(--muted,var(--text3))}
.t-backup-warn{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--gold2);background:var(--gold-bg);border:1px solid var(--gold);border-radius:var(--radius-sm);padding:3px 8px;flex-shrink:0;cursor:help}
.t-count{font-size:12px;color:var(--text3);margin-left:auto;white-space:nowrap}

/* Boutons de la barre (icônes) */
.t-btn{background:var(--bg3);border:1px solid var(--bdr2);color:var(--text2);width:32px;height:32px;padding:0;border-radius:var(--radius);cursor:pointer;font-size:16px;font-family:inherit;transition:all .15s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.t-btn:hover{background:var(--bg4);color:var(--text)}
.t-btn.on{background:var(--on-bg);border-color:var(--on-bd);color:var(--on-fg);font-weight:600}
.t-btn[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--tip-bg);color:var(--tip-fg);font-size:11px;font-weight:600;padding:4px 9px;border-radius:var(--radius-sm);white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .1s;z-index:200;box-shadow:var(--shadow-float)}
.t-btn[data-tip]:hover::after{opacity:1;visibility:visible;transition-delay:.15s}
/* Bouton proche du bord droit : l'infobulle s'aligne sur son bord droit au lieu de déborder de la page
   (même masquée, elle élargit la zone défilable et fait apparaître une barre horizontale). Classe posée
   par shared.js (placeTips). */
.t-btn.tip-end[data-tip]::after{left:auto;right:0;transform:none}
.t-badge{position:absolute;top:-4px;right:-4px;background:var(--red2);color:#fff;font-size:9px;font-weight:700;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1;box-shadow:0 0 0 2px var(--chrome)}

/* Navigation entre les pages (générée par shared.js, identique partout) */
.site-nav{display:flex;align-items:center;gap:6px;flex-shrink:0}
.snav-btn{background:var(--bg3);border:1px solid var(--bdr2);color:var(--text2);height:32px;padding:0 12px;border-radius:var(--radius);display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;font-family:inherit;text-decoration:none;white-space:nowrap;position:relative;transition:all .15s}
.snav-btn i{font-size:16px}
.snav-btn:hover{background:var(--bg4);color:var(--text)}
.snav-btn.on{background:var(--on-bg);border-color:var(--on-bd);color:var(--on-fg)}
/* Libellés seulement sur grands écrans : le Grimoire a la barre la plus chargée et déborde sinon.
   En dessous, icônes seules (infobulle native via title). */
@media (max-width:1400px){
  .snav-label{display:none}
  .snav-btn{width:32px;padding:0;justify-content:center}
}

/* Recherche globale de l'en-tête (Grimoire et Outils) */
.header-search-wrap{position:relative;flex:1;min-width:120px;max-width:340px;display:flex;align-items:center}
.header-search-icon{position:absolute;left:9px;color:var(--text4);font-size:13px;pointer-events:none}
.header-search-input{width:100%;height:32px;box-sizing:border-box;background:var(--bg3);border:1px solid var(--bdr2);color:var(--text);border-radius:var(--radius);padding:0 46px 0 30px;font-size:12px;font-family:inherit;outline:none;transition:border-color .15s}
.header-search-input:focus{border-color:var(--green)}
.header-search-input::placeholder{color:var(--text3)}
.header-search-kbd{position:absolute;right:7px;font-size:10px;color:var(--text4);background:var(--bg4);border:1px solid var(--bdr2);border-radius:3px;padding:1px 5px;pointer-events:none;font-family:inherit}
.header-search-results{display:none;position:absolute;top:calc(100% + 6px);left:0;width:380px;max-width:80vw;max-height:65vh;overflow-y:auto;background:var(--bg2);border:1px solid var(--bdr2);border-radius:var(--radius);box-shadow:var(--shadow-float);padding:.4rem;z-index:500}
.header-search-results.open{display:block}
.gsearch-row:hover,.gsearch-row.on{background:var(--bg3)}

/* Bouton "Aujourd'hui" (résumé du jour, cross-pages) : même mécanique de panneau déroulant que la
   recherche d'en-tête ci-dessus. */
.today-wrap{position:relative;display:inline-flex;flex-shrink:0}
.today-panel{display:none;position:absolute;top:calc(100% + 6px);right:0;width:300px;max-width:80vw;max-height:65vh;overflow-y:auto;background:var(--bg2);border:1px solid var(--bdr2);border-radius:var(--radius);box-shadow:var(--shadow-float);padding:.6rem;z-index:500}
.today-panel.open{display:block}
.today-loading,.today-empty{font-size:12px;color:var(--text3);text-align:center;padding:.6rem 0}
.today-section+.today-section{margin-top:.6rem;padding-top:.6rem;border-top:1px dashed var(--bdr2)}
.today-section-title{font-size:10px;font-weight:700;color:var(--gold2);text-transform:uppercase;letter-spacing:.3px;display:flex;align-items:center;gap:5px;margin-bottom:.35rem}
.today-count{background:var(--bg4);color:var(--text3);border-radius:8px;padding:0 6px;font-size:10px}
.today-line{font-size:12px;color:var(--text2);padding:2px 0;line-height:1.35}
.today-line b{color:var(--text)}
.today-more{font-size:11px;color:var(--text4);padding-top:2px}

/* ═══ Composants communs (référence : structure de la page Outils) ═══
   Cartes, badges, boutons et toast : une seule définition pour les trois pages. Ajouter une variante
   ici plutôt que de la redéfinir dans une page. */

/* Cartes : titre avec filet, icône verte. .card-compact = densité réduite. Les marges entre cartes
   dépendent de la mise en page de chaque page (elles ne sont pas définies ici). */
.card{background:var(--bg2);border:1px solid var(--bdr2);border-radius:var(--radius);padding:.6rem .8rem;box-shadow:var(--shadow-card)}
.card-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:.55rem;padding-bottom:6px;border-bottom:1px solid var(--bdr2);display:flex;align-items:center;gap:6px;letter-spacing:.1px}
.card-title i{color:var(--green2)}
.card-compact{padding:.45rem .6rem}
.card-compact .card-title{font-size:11px;margin-bottom:.35rem}

/* Badges : bordure + teinte. .badge-md = un cran plus grand (chips du Grimoire). Les noms
   .badge-craft/-type/-warn/-reward/-ice sont les anciens noms des pages, gardés comme synonymes. */
.badge{display:inline-flex;align-items:center;font-size:10px;padding:1px 7px;border-radius:var(--radius-sm);border:1px solid;font-weight:600}
.badge-md{font-size:11px;padding:2px 9px}
.badge-green,.badge-craft{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.badge-red,.badge-warn{background:var(--red-bg);border-color:var(--red);color:var(--red-fg)}
.badge-gold,.badge-reward{background:var(--gold-bg);border-color:var(--gold);color:var(--gold2)}
.badge-blue,.badge-ice{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue2)}
.badge-gray{background:var(--bg4);border-color:var(--bdr);color:var(--text2)}
.badge-type{background:var(--bg4);border-color:var(--bdr);color:var(--text3)}

/* Boutons : .btn = action principale (vert) ; .btn-ghost = secondaire ; .btn-red = destructif teinté ;
   .btn-danger = destructif plein (confirmation) ; .btn-gold, .btn-blue = accents ; .btn-sm = compact. */
.btn{background:var(--btn-bg);border:1px solid var(--btn-bd);color:var(--btn-fg);padding:6px 13px;border-radius:var(--radius);cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;display:inline-flex;align-items:center;gap:5px;transition:background .15s,border-color .15s,transform .1s}
.btn:hover{background:var(--btn-hover)}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-ghost{background:var(--bg3);border:1px solid var(--bdr2);color:var(--text2)}
.btn-ghost:hover{background:var(--bg4);color:var(--text)}
.btn-red{background:var(--red-bg);border-color:var(--red);color:var(--red2)}
.btn-red:hover{background:var(--red);color:#fff}
.btn-danger{background:var(--red);border-color:var(--red2);color:#fff}
.btn-danger:hover{background:var(--red2)}
.btn-gold{background:var(--gold-bg);border-color:var(--gold);color:var(--gold2)}
.btn-gold:hover{background:var(--gold);color:#111}
.btn-blue{background:var(--blue);border-color:var(--blue2);color:#fff}
.btn-blue:hover{background:var(--blue2)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:disabled:active{transform:none}

/* Toast unique (window.siteToast, shared.js) : centré en bas, neutre par défaut, .toast-ok/-err/-info
   pour un statut, bouton d'action optionnel (ex. « Annuler »). */
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);background:var(--bg5);border:1px solid var(--bdr);border-radius:var(--radius);padding:8px 14px;font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-float);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:1100;max-width:calc(100vw - 24px)}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.toast-err{background:var(--red-bg);border-color:var(--red);color:var(--red-fg)}
.toast-info{background:var(--bg3);border-color:var(--bdr);color:var(--text2)}
.toast-action{background:transparent;border:1px solid var(--gold);color:var(--gold2);border-radius:var(--radius-sm);padding:3px 10px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.toast-action:hover{background:var(--gold);color:#1a1200}

/* Champs de formulaire (opt-in : <body class="form-base">, Grimoire et Trésors). Outils n'en fait pas
   partie : ses champs sont plus compacts (fond --bg3, marges réduites) et changer ça est une décision de
   design, pas un simple ménage. */
.form-base input[type=text],.form-base input[type=search],.form-base input[type=password],.form-base select,.form-base textarea{background:var(--bg);border:1px solid var(--bdr2);color:var(--text);border-radius:var(--radius);padding:8px 11px;font-size:13px;font-family:inherit;width:100%;outline:none;transition:border-color .15s}
.form-base input[type=text]:hover,.form-base input[type=search]:hover,.form-base input[type=password]:hover,.form-base select:hover,.form-base textarea:hover{border-color:var(--text4)}
.form-base input:focus,.form-base select:focus,.form-base textarea:focus{border-color:var(--green)}
.form-base select{cursor:pointer}
.form-base select option{background:var(--bg2)}
.form-base textarea{resize:vertical;min-height:65px}
.form-base input[type=checkbox]{accent-color:var(--green);cursor:pointer;width:14px;height:14px}

/* Champs de recherche : bouton « effacer » (×) visible dès qu'il y a du texte (type="search").
   Dans la barre du haut, le raccourci « Ctrl K » s'efface pour lui laisser la place. */
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;height:14px;width:14px;margin-left:6px;cursor:pointer;opacity:.7;background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a8a2' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
input[type=search]::-webkit-search-cancel-button:hover{opacity:1}
.header-search-input:not(:placeholder-shown)~.header-search-kbd{display:none}

/* Bouton "effacer" ajouté par shared.js UNIQUEMENT quand le navigateur n'a pas de × natif pour
   type="search" (Firefox : pas de ::-webkit-search-cancel-button). Sur Chrome/Edge/Safari, le ×
   ci-dessus suffit et ce bloc ne sert jamais (voir hasNativeSearchClear). */
.search-clear-wrap{position:relative}
.search-clear-wrap input[type=search]{width:100%}
.search-clear-btn{position:absolute;top:50%;right:6px;transform:translateY(-50%);display:none;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:transparent;border:none;color:var(--text4);cursor:pointer;font-size:13px;line-height:1}
.search-clear-btn:hover{color:var(--text)}
.search-clear-wrap.has-value .search-clear-btn{display:flex}
.header-search-wrap.js-clear .search-clear-btn{position:absolute;top:50%;right:7px;transform:translateY(-50%);display:none;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:transparent;border:none;color:var(--text4);cursor:pointer;font-size:13px;line-height:1}
.header-search-wrap.js-clear.has-value .search-clear-btn{display:flex}
.header-search-wrap.js-clear.has-value .header-search-kbd{display:none}
.header-search-wrap.js-clear.has-value .header-search-input{padding-right:28px}
/* Priorité sur .form-base (Grimoire, Trésors) : la barre du haut garde son propre gabarit */
.header-search-wrap input.header-search-input[type=search]{background:var(--bg3);padding:0 46px 0 30px;font-size:12px}
.header-search-wrap input.header-search-input[type=search]:not(:placeholder-shown){padding-right:12px}

/* Pied de page : texte propre à la page (.sf-extra, optionnel) + mention légale commune (.sf-legal,
   ajoutée par shared.js). */
.site-footer{background:var(--footer-bg);border-top:1px solid var(--chrome-bd);padding:5px 1rem;font-size:11px;color:var(--text3);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-shrink:0}
.sf-extra{display:flex;align-items:baseline;gap:1rem;min-width:0;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-legal{font-size:10px;color:var(--text4);white-space:nowrap;margin-left:auto}
@media (max-width:700px){.site-footer{flex-wrap:wrap;padding:5px .6rem}.sf-legal{white-space:normal}}

/* Menu mobile : shared.js range les contrôles propres à la page dans .topbar-extra. Sur ordinateur
   il est en display:contents (les contrôles restent des éléments directs de la barre) ; sous 700px il
   est replié derrière le bouton ☰ au lieu d'occuper 4 lignes. */
.topbar-extra{display:contents}
.topbar-menu-btn{display:none;margin-left:auto;background:var(--bg3);border:1px solid var(--bdr2);color:var(--text2);width:32px;height:32px;border-radius:var(--radius);cursor:pointer;font-size:18px;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.topbar-menu-btn:hover{background:var(--bg4);color:var(--text)}
.topbar-menu-btn[aria-expanded="true"]{background:var(--on-bg);border-color:var(--on-bd);color:var(--on-fg)}

/* Mobile : cibles tactiles de 40px et barre à padding réduit */
@media (max-width:700px){
  .topbar{padding:.4rem .6rem}
  .t-btn{width:40px;height:40px;font-size:16px}
  .snav-btn{height:40px;width:40px}
  .topbar-menu-btn{display:inline-flex;width:40px;height:40px}
  .topbar-extra{display:none;flex:1 0 100%;flex-wrap:wrap;align-items:center;gap:.5rem;padding-top:6px;border-top:1px solid var(--chrome-extra-bd)}
  .topbar-extra.open{display:flex}
  .topbar-extra>.t-sep:first-child{display:none}
}
/* Très petits écrans : logo + navigation + ☰ doivent tenir sur une ligne */
@media (max-width:480px){
  .topbar>.t-sep{display:none}
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THÈME v2 (repris de la maquette « refonte ») — opt-in : <html data-ui="v2" data-theme="…">.
   Quatre thèmes = mode (dark|light) × accent (amber|blue), choisis avec les boutons de la barre du haut
   (shared.js) et mémorisés (localStorage « solonk_theme »). Les pages non migrées gardent le thème
   d'origine ci-dessus. Migrer une page : data-ui="v2" sur <html> + le script de thème de son <head>
   (voir index-tresors.html) ; ses couleurs passent par les jetons, pas par des hex.
   Deux familles de jetons : ceux de la maquette (--surface, --surface2, --border, --muted, --dim,
   --accent*, --ok*, --info*, --violet*, --danger*, --nav) pour les pages migrées, et les anciens noms
   (--bg2…--bg5, --green*, --gold*, --blue*…) redéfinis pour que les composants communs (toast, badges,
   panneau « Aujourd'hui »…) suivent le thème.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
html[data-ui="v2"]{
  color-scheme:dark;
  --bg:#12110f;--surface:rgba(30,29,26,.92);--surface2:#2a2825;--border:#3a3833;
  --text:#eeedeb;--muted:#9a968f;--dim:#a19c95;
  --accent:#f5b41a;--accent-glow:rgba(245,180,26,.2);--accent-soft:rgba(245,180,26,.1);--accent-line:rgba(245,180,26,.3);
  --ok:#3fb950;--ok-soft:rgba(63,185,80,.1);--ok-line:rgba(63,185,80,.3);
  --info:#58a6ff;--info-soft:rgba(88,166,255,.1);--info-line:rgba(88,166,255,.3);
  --violet:#a78bfa;--violet-soft:rgba(167,139,250,.1);--violet-line:rgba(167,139,250,.3);
  --danger:#ef4444;--danger-soft:rgba(239,68,68,.1);--danger-line:rgba(239,68,68,.3);
  --nav:rgba(18,17,15,.92);--dot:rgba(245,180,26,.035);--halo:rgba(245,180,26,.06);--shadow:rgba(0,0,0,.4);
  --radius-lg:16px;
  /* anciens noms (composants communs) */
  --bg2:#1e1d1a;--bg3:#252420;--bg4:#2a2825;--bg5:#33312d;--bdr:#4a4741;--bdr2:#3a3833;
  --text2:#aeaaa2;--text3:#9a968f;--text4:#a19c95;
  --green:#c58f14;--green2:#f5b41a;--green3:#ffc83d;--green-dk:#8f6a0e;
  --on-bg:var(--accent-soft);--on-bd:var(--accent-line);--on-fg:var(--accent);
  --btn-bg:#f5b41a;--btn-bd:#f5b41a;--btn-fg:#12110f;--btn-hover:#ffc83d;
  --blue:#3a7bd5;--blue2:#58a6ff;--blue-soft:var(--info-soft);--blue-line:var(--info-line);
  --ok-dk:#2a7a38;--ok-bg:rgba(63,185,80,.12);
  --gold-bg:rgba(200,150,46,.14);--n-bg:rgba(245,180,26,.1);--red-fg:#f57575;
  --body-bg:var(--bg);--chrome:var(--nav);--chrome-bd:var(--border);--chrome-sep:var(--border);--chrome-extra-bd:var(--border);
  --footer-bg:var(--nav);--tip-bg:#0b0a09;--tip-fg:#eeedeb;
  --radius:10px;--radius-sm:6px;
  --shadow-card:0 1px 2px rgba(0,0,0,.4);--shadow-float:0 8px 24px rgba(0,0,0,.5);
}
html[data-ui="v2"][data-theme="dark-blue"]{
  --bg:#0b0f16;--surface:rgba(22,27,34,.92);--surface2:#1c2333;--border:#30363d;
  --text:#e6edf3;--muted:#8b949e;--dim:#9ba4b1;
  --accent:#58a6ff;--accent-glow:rgba(88,166,255,.2);--accent-soft:rgba(88,166,255,.1);--accent-line:rgba(88,166,255,.3);
  --info:#f59e0b;--info-soft:rgba(245,158,11,.1);--info-line:rgba(245,158,11,.3);
  --nav:rgba(11,15,22,.92);--dot:rgba(88,166,255,.035);--halo:rgba(88,166,255,.06);
  --bg2:#161b22;--bg3:#1a2030;--bg4:#1c2333;--bg5:#262e3c;--bdr:#3d4651;--bdr2:#30363d;
  --text2:#a3adb8;--text3:#9ba4b1;--text4:#9ba4b1;
  --green:#3f8ee0;--green2:#58a6ff;--green3:#7ab8ff;--green-dk:#1f5fae;
  --btn-bg:#58a6ff;--btn-bd:#58a6ff;--btn-fg:#0b0f16;--btn-hover:#7ab8ff;
  --blue:#d68a08;--blue2:#f59e0b;--n-bg:rgba(88,166,255,.1);--tip-bg:#05070b;
}
html[data-ui="v2"][data-theme="light-amber"],html[data-ui="v2"][data-theme="light-blue"]{
  color-scheme:light;
  --bg:#f9f9f8;--surface:rgba(252,252,252,.92);--surface2:#ffffff;--border:#d1cfca;
  --text:#2c2a26;--muted:#5b5851;--dim:#68645b;
  --accent:#7f5d0f;--accent-glow:rgba(221,158,10,.3);--accent-soft:rgba(221,158,10,.15);--accent-line:rgba(221,158,10,.45);
  --ok:#307339;--ok-soft:rgba(54,157,68,.15);--ok-line:rgba(54,157,68,.45);
  --info:#0f62c1;--info-soft:rgba(37,139,255,.15);--info-line:rgba(37,139,255,.45);
  --violet:#4619cc;--violet-soft:rgba(125,83,248,.15);--violet-line:rgba(125,83,248,.45);
  --danger:#c52121;--danger-soft:rgba(235,26,26,.15);--danger-line:rgba(235,26,26,.45);
  --nav:rgba(249,249,248,.92);--dot:rgba(221,158,10,.053);--halo:rgba(221,158,10,.09);--shadow:rgba(0,0,0,.14);
  --bg2:#ffffff;--bg3:#f3f2ef;--bg4:#ebeae6;--bg5:#e2e0db;--bdr:#bdbab2;--bdr2:#d1cfca;
  --text2:#55524b;--text3:#68645b;--text4:#68645b;
  --green:#a37813;--green2:#8e6912;--green3:#b8890f;--green-dk:#8e6912;
  --btn-bg:#8e6912;--btn-bd:#8e6912;--btn-fg:#ffffff;--btn-hover:#a37813;
  --gold:#805e09;--gold2:#7a5a09;--gold-bg:rgba(221,158,10,.15);
  --red:#c52121;--red2:#c52121;--red-bg:rgba(235,26,26,.1);--red-fg:#c52121;
  --blue:#0f62c1;--blue2:#0f62c1;--purple:#4619cc;--purple2:#4619cc;
  --ok-dk:#307339;--ok-bg:rgba(54,157,68,.14);--n-bg:rgba(0,0,0,.06);
  --tip-bg:#2c2a26;--tip-fg:#f9f9f8;
  --shadow-card:0 1px 2px rgba(0,0,0,.08);--shadow-float:0 8px 24px rgba(0,0,0,.16);
}
html[data-ui="v2"][data-theme="light-blue"]{
  --bg:#f6f8fb;--surface:rgba(251,252,253,.92);--border:#c8cdd3;
  --text:#1a2a37;--muted:#4e565e;--dim:#5e6776;
  --accent:#0f62c1;--accent-glow:rgba(37,139,255,.3);--accent-soft:rgba(37,139,255,.15);--accent-line:rgba(37,139,255,.45);
  --info:#855a0e;--info-soft:rgba(209,135,9,.15);--info-line:rgba(209,135,9,.45);
  --nav:rgba(246,248,251,.92);--dot:rgba(37,139,255,.053);--halo:rgba(37,139,255,.09);
  --bdr:#bcc3cb;--bdr2:#c8cdd3;--text2:#46505a;--text3:#58626d;--text4:#5e6776;
  --green:#2a80e0;--green2:#116cd4;--green3:#3a8fe8;--green-dk:#116cd4;
  --btn-bg:#116cd4;--btn-bd:#116cd4;--btn-hover:#2a80e0;
  --blue:#855a0e;--blue2:#855a0e;
}

/* Fond : halo en haut + grille de points */
html[data-ui="v2"] body{background:var(--bg);color:var(--text);transition:background .3s,color .3s}
html[data-ui="v2"] body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 80% 50% at 50% -10%,var(--halo),transparent 60%)}
html[data-ui="v2"] body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(circle,var(--dot) 1px,transparent 1px);background-size:40px 40px;opacity:.7}

/* Barre du haut : 52px, collée, verre dépoli — mêmes valeurs que la maquette (nav.top / .logo / .tab / .nbtn) */
html[data-ui="v2"] .top-stripe{display:none}
html[data-ui="v2"] .topbar{position:sticky;top:0;z-index:100;min-height:52px;gap:14px;padding:0 24px;background:var(--nav);border-bottom:1px solid var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html[data-ui="v2"] .t-logo{font-size:1.05rem;font-weight:700;gap:0;color:var(--text)}
html[data-ui="v2"] .t-logo span{color:var(--accent)}
html[data-ui="v2"] .t-sep{background:var(--border);height:20px}
html[data-ui="v2"] .snav-btn{height:32px;padding:0 13px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:13.3333px;font-weight:400;gap:6px}
html[data-ui="v2"] .snav-btn i{font-size:inherit}
@media (min-width:701px){html[data-ui="v2"] .snav-label{display:inline}html[data-ui="v2"] .snav-btn{width:auto;padding:0 13px}}
html[data-ui="v2"] .snav-btn:hover{background:transparent;border-color:var(--accent);color:var(--accent)}
html[data-ui="v2"] .snav-btn.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
html[data-ui="v2"] .t-btn,html[data-ui="v2"] .topbar-menu-btn{width:auto;height:auto;padding:6px 12px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:.86rem}
html[data-ui="v2"] .t-btn:hover{background:transparent;border-color:var(--accent);color:var(--accent)}
html[data-ui="v2"] .t-btn.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
html[data-ui="v2"] .theme-dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 1px rgba(128,128,128,.35)}
html[data-ui="v2"] #t-search{margin-left:auto}
html[data-ui="v2"] .today-wrap{margin-left:0}
html[data-ui="v2"] .site-footer{background:var(--nav);border-top-color:var(--border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:relative;z-index:1}
html[data-ui="v2"] .today-panel,html[data-ui="v2"] .header-search-results{background:var(--bg2)}
html[data-ui="v2"] .toast{backdrop-filter:blur(12px);border-radius:var(--radius-lg)}
@media (max-width:700px){html[data-ui="v2"] .topbar{padding:.4rem .6rem}html[data-ui="v2"] #t-search{margin-left:0}}
@media print{html[data-ui="v2"] body::before,html[data-ui="v2"] body::after{display:none!important}}
/* ═══ Navigation par sections (shared.js : SECTIONS) ═══ */
/* section de plusieurs pages : l'onglet (dernière page vue de la section) et sa flèche ▾ forment un seul bloc */
.snav-sec{position:relative;display:inline-flex;align-items:stretch}
html[data-ui="v2"] .snav-sec>.snav-btn{border-top-right-radius:0;border-bottom-right-radius:0;padding-right:9px}
.snav-caret{display:inline-flex;align-items:center;justify-content:center;width:24px;height:32px;padding:0;margin-left:-1px;border:1px solid var(--border,var(--bdr2));border-radius:0 8px 8px 0;background:transparent;color:var(--muted,var(--text3));cursor:pointer;font-size:.8rem;transition:color .15s,border-color .15s,background .15s}
.snav-caret i{transition:transform .18s}
.snav-caret:hover,.snav-sec.open .snav-caret{color:var(--accent);border-color:var(--accent)}
.snav-sec.open .snav-caret i{transform:rotate(180deg)}
.snav-sec.on .snav-caret{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.snav-sec .snav-pop{left:0;right:auto;top:calc(100% + 6px)}
/* Almanax de demain qui vous concerne (shared.js, paintAlmTomorrow) */
.t-badge.alm-tm{background:var(--accent);color:var(--bg,#111);cursor:help}
em.alm-tm{font-style:normal;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:8px;padding:0 5px;margin-left:6px;cursor:help}
/* sous-onglets : les pages de la section affichée, sous la barre */
.t-subnav{display:flex;align-items:center;gap:4px;padding:5px 24px;background:var(--nav,var(--chrome));border-bottom:1px solid var(--border,var(--chrome-bd));overflow-x:auto;scrollbar-width:none;position:relative;z-index:90}
/* lien de retour (Carte ↔ Ocre, Capture) : sous les sous-onglets quand il y en a */
html:has(.t-subnav:not([hidden])) .back-pill{top:100px}
.t-subnav[hidden]{display:none}
.t-subnav::-webkit-scrollbar{display:none}
.tsn-sec{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,var(--text3));margin-right:8px;white-space:nowrap}
.tsn-sec i{color:var(--accent);font-size:.9rem}
.snav-sub{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:.82rem;color:var(--muted,var(--text2));text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:color .15s,background .15s,border-color .15s}
.snav-sub:hover{color:var(--accent);background:var(--accent-soft)}
.snav-sub.on{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line);font-weight:700}
@media (max-width:700px){.t-subnav{padding:5px .6rem}.tsn-sec{display:none}}
html.focus-mode .t-subnav{display:none!important}
@media print{.t-subnav{display:none!important}}
/* recherche globale : un champ (« Rechercher  Ctrl K ») plutôt qu'une loupe seule */
html[data-ui="v2"] .t-search{display:inline-flex;align-items:center;gap:8px;min-width:190px;justify-content:flex-start;padding:5px 8px 5px 12px;border-radius:20px;color:var(--muted)}
.t-search .tsr-l{flex:1;text-align:left}
.t-search kbd{font:inherit;font-size:.7rem;font-weight:700;padding:1px 6px;border-radius:6px;border:1px solid var(--border,var(--bdr2));color:var(--muted,var(--text3))}
@media (max-width:1279px){html[data-ui="v2"] .t-search{min-width:0}.t-search .tsr-l,.t-search kbd{display:none}}
/* menu Réglages */
.t-settings{position:relative;display:inline-flex;flex-shrink:0}
.t-set-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:600;width:min(280px,calc(100vw - 24px));padding:6px;background:var(--bg2);border:1px solid var(--border,var(--bdr2));border-radius:14px;box-shadow:var(--shadow-float)}
.t-set-pop[hidden]{display:none}
.set-row{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:.86rem;text-align:left;cursor:pointer}
.set-row>i,.set-row>.theme-dot{width:18px;flex-shrink:0;text-align:center;color:var(--accent);font-size:1.05rem}
.set-row>.theme-dot{flex:none;width:12px;height:12px;margin:0 3px}
.set-row span:not(.theme-dot){flex:1;display:flex;align-items:center;gap:6px}
.set-row kbd{margin-left:auto;font:inherit;font-size:.68rem;font-weight:700;padding:0 6px;border-radius:6px;border:1px solid var(--border,var(--bdr2));color:var(--muted,var(--text3))}
.set-row:hover,.set-row:focus-visible{background:var(--accent-soft)}
@media (prefers-reduced-motion:no-preference){.snav-pop:not([hidden]),.t-set-pop:not([hidden]){animation:navPopIn .16s var(--ease-out,ease-out)}}
@keyframes navPopIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ═══ Info Solonk : module flottant (shared.js, initSolonk) ═══ */
.solonk-float{position:fixed;left:18px;bottom:42px;z-index:90;width:300px;max-width:calc(100vw - 24px);background:var(--bg2);border:1px solid var(--accent-line,var(--bdr));border-radius:14px;box-shadow:var(--shadow-float);padding:10px 12px 9px;font-size:12px;line-height:1.45;color:var(--text2);animation:sflIn .4s ease both}
@keyframes sflIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.solonk-float::before{content:'';position:absolute;top:0;left:14px;right:14px;height:2px;border-radius:0 0 2px 2px;background:var(--accent,var(--green2))}
.sfl-head{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.sfl-head>i{color:var(--accent,var(--green2));font-size:1rem}
.sfl-title{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);flex:1}
.sfl-btn{width:22px;height:22px;border-radius:50%;border:none;background:transparent;color:var(--text3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:.85rem;transition:background .15s,color .15s}
.sfl-btn:hover{background:var(--n-bg,var(--bg4));color:var(--accent,var(--green2))}
.sfl-body{transition:opacity .16s;overflow-wrap:anywhere}
.sfl-body b{color:var(--accent,var(--green2))}
.solonk-float.swap .sfl-body{opacity:0}
.sfl-note{font-size:10px;color:var(--text4);font-style:italic;margin-top:5px}
.sfl-pill{display:none;align-items:center;gap:6px;background:transparent;border:none;color:var(--text2);font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;padding:0}
.sfl-pill i{color:var(--accent,var(--green2))}
/* réduite (par défaut) : une pastille ronde dans le coin, le libellé n'apparaît qu'au survol ou au focus */
.solonk-float.min{width:auto;left:12px;bottom:12px;padding:4px;border-radius:20px;opacity:.85;transition:opacity .15s,border-color .15s}
.solonk-float.min:hover,.solonk-float.min:focus-within{opacity:1;padding:4px 12px 4px 4px}
.solonk-float.min .sfl-mini{width:26px;height:26px}
.solonk-float.min:not(:hover):not(:focus-within) .sfl-pill-t{display:none}
.solonk-float.min::before{display:none}
.solonk-float.min .sfl-head,.solonk-float.min .sfl-body,.solonk-float.min .sfl-note{display:none}
.solonk-float.min .sfl-pill{display:inline-flex}
.solonk-float.min:hover{border-color:var(--accent,var(--green2))}
@media (max-width:700px){
  .solonk-float{right:8px;left:8px;width:auto;bottom:36px;padding:8px 10px}
  .solonk-float.min{right:auto}
  .sfl-note{display:none}
  .sfl-body{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
@media print{.solonk-float{display:none!important}}
@media (prefers-reduced-motion:reduce){.solonk-float{animation:none}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ── Indicateur de synchro, nouveautés depuis la dernière visite, palette de recherche globale ── */
/* Six sections + des boutons à droite : sous 1024 px, seul l'onglet de la section courante garde son libellé ; au-delà
   tous les libellés restent (sans libellé, il fallait survoler chaque icône pour s'y retrouver) */
@media (min-width:701px) and (max-width:1023px){
  html[data-ui="v2"] .snav-btn:not(.on) .snav-label{display:none}
  html[data-ui="v2"] .snav-btn:not(.on){padding:0 10px}
}
/* barre trop chargée pour tous les libellés (shared.js, fitNav) : seul l'onglet actif garde le sien */
@media (min-width:701px){
  html.nav-compact[data-ui="v2"] .snav-btn:not(.on) .snav-label{display:none}
  html.nav-compact[data-ui="v2"] .snav-btn:not(.on){padding:0 10px}
}
@media (min-width:1280px) and (max-width:1600px){
  html[data-ui="v2"] .site-nav{gap:4px}
  html[data-ui="v2"] .snav-btn{padding:0 8px;gap:5px;font-size:12.8px}
  html[data-ui="v2"] .topbar{gap:10px;padding:0 16px}
}
.today-dot{position:absolute;top:-5px;right:-5px;background:var(--accent,var(--red2));color:var(--bg,#fff);font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1;box-shadow:0 0 0 2px var(--bg,var(--chrome))}
.today-dot[hidden]{display:none}
.today-panel{width:340px}
.today-tabs{display:flex;gap:4px;margin-bottom:.55rem}
.today-tab{flex:1;font:inherit;font-size:11px;font-weight:700;color:var(--muted,var(--text3));background:transparent;border:1px solid var(--border,var(--bdr2));border-radius:20px;padding:3px 8px;cursor:pointer}
.today-tab.on{background:var(--accent-soft,var(--on-bg));border-color:var(--accent-line,var(--on-bd));color:var(--accent,var(--on-fg))}
.today-section-title a{color:inherit;text-decoration:none}
.today-section-title a:hover{text-decoration:underline}
.today-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:.6rem;padding-top:.5rem;border-top:1px dashed var(--border,var(--bdr2));font-size:11px;color:var(--text3,var(--muted))}
.today-seen{font:inherit;font-size:11px;font-weight:700;color:var(--accent,var(--on-fg));background:transparent;border:1px solid var(--accent-line,var(--on-bd));border-radius:20px;padding:2px 10px;cursor:pointer}
.today-seen:hover{background:var(--accent-soft,var(--on-bg))}
.pal-ovl{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.5);display:none;align-items:flex-start;justify-content:center;padding:12vh 12px 0}
.pal-ovl.open{display:flex}
.pal{width:min(620px,100%);background:var(--bg2);border:1px solid var(--border,var(--bdr2));border-radius:14px;box-shadow:var(--shadow-float);overflow:hidden;color:var(--text)}
.pal-top{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border,var(--bdr2))}
.pal-top i{color:var(--muted,var(--text3));font-size:18px}
.pal-top input{flex:1;background:transparent;border:0;outline:0;color:var(--text);font:inherit;font-size:1rem;min-height:0}
.pal-list{max-height:min(55vh,420px);overflow-y:auto;padding:6px}
.pal-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--text);text-decoration:none;cursor:pointer}
.pal-row i{font-size:17px;color:var(--accent,var(--green2));flex-shrink:0}
.pal-row.on,.pal-row:hover{background:var(--accent-soft,var(--bg4))}
.pal-t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:.9rem;font-weight:600}
.pal-t small{font-size:.74rem;font-weight:400;color:var(--muted,var(--text3));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-row em{font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,var(--text3));flex-shrink:0}
.pal-empty{padding:1.2rem;text-align:center;color:var(--muted,var(--text3));font-size:.85rem}
.today-all{color:var(--accent,var(--on-fg));text-decoration:none;font-weight:700}
.today-all:hover{text-decoration:underline}
.today-notif{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.today-me{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--text)}
.today-me select{font:inherit;font-size:.78rem;color:var(--text);background:var(--bg);border:1px solid var(--border,var(--bdr2));border-radius:8px;padding:1px 6px}
.today-notif input{accent-color:var(--accent,var(--green2));min-height:0}
.hlp .pal-top b{font-size:.95rem}
.hlp-b{padding:6px 16px 14px}
.hlp-b h4{margin:.8rem 0 .3rem;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted,var(--text3))}
.hlp-r{display:flex;align-items:center;gap:12px;padding:3px 0;font-size:.88rem}
.hlp-r kbd{min-width:84px;text-align:center;font:inherit;font-size:.74rem;font-weight:700;border:1px solid var(--border,var(--bdr2));border-bottom-width:2px;border-radius:6px;padding:1px 8px;color:var(--text);background:var(--surface2,var(--bg3))}
.rst-ovl{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.5);display:none;align-items:flex-start;justify-content:center;padding:9vh 12px 0;overflow-y:auto}
.rst-ovl.open{display:flex}
.rst{position:relative;width:min(560px,100%);background:var(--bg2);border:1px solid var(--border,var(--bdr2));border-radius:14px;box-shadow:var(--shadow-float);padding:16px 18px 18px;color:var(--text);margin-bottom:40px}
.rst h3{margin:0 0 .5rem;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.rst h3 i{color:var(--accent,var(--green2))}
.rst h4{margin:1rem 0 .4rem;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted,var(--text3))}
.rst-warn{margin:0;font-size:.82rem;color:var(--muted,var(--text3));background:var(--warn-soft,var(--gold-bg));border:1px solid var(--warn-line,var(--gold));border-radius:9px;padding:6px 10px}
.rst-x{position:absolute;top:10px;right:10px;background:transparent;border:0;color:var(--muted,var(--text3));font-size:1.1rem;cursor:pointer}
.rst-file,.rst-go{font:inherit;font-size:.84rem;font-weight:700;color:var(--accent,var(--on-fg));background:transparent;border:1px solid var(--accent-line,var(--on-bd));border-radius:20px;padding:5px 14px;cursor:pointer}
.rst-file:hover,.rst-go:hover{background:var(--accent-soft,var(--on-bg))}
.rst-days{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto}
.rst-day{border:1px solid var(--border,var(--bdr2));border-radius:10px;padding:8px 12px}
.rst-dayhead{display:flex;align-items:center;gap:10px}
.rst-dayhead b{text-transform:capitalize}
.rst-dayhead span{flex:1;color:var(--muted,var(--text3));font-size:.8rem}
.rst-day details{margin-top:6px;font-size:.8rem;color:var(--muted,var(--text3))}
.rst-day summary{cursor:pointer}
.rst-routes{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:3px 12px;padding:6px 0 2px;color:var(--text)}
.rst-routes input{accent-color:var(--accent,var(--green2));min-height:0}
.rst-bad{font-style:normal;color:var(--warn,var(--gold2));font-weight:700;cursor:help}
.rst-none{color:var(--muted,var(--text3));font-style:italic;font-size:.85rem}

/* ── Zones tactiles : sur mobile / écran tactile, aucune cible sous ~36 px de haut ──
   Une seule règle pour les 4 pages. Exclus volontairement : la bande de villes de Trésors (.seg, 14 cases
   serrées) et les coches d'une carte Ocre (.st), qui sont dans une cible plus grande. */
@media (max-width:700px),(pointer:coarse){
  html .snav-btn,html .topbar-menu-btn,html .t-btn{min-height:40px;min-width:40px}
  .t-logo{min-height:40px}
  .sfl-btn{width:34px;height:34px}
  button,select,[role="tab"],.chip,.btn,.otab,.gtab,.pbtn,.sort-btn,.char-chip,.grp-all,input:not([type]),input[type="text"],input[type="search"],input[type="number"]{min-height:36px}
}

/* ═══ Composants communs (pages avec <body class="… ui-common">) : puces, boutons, états vides, bandeau, filtres, titres
   de section. Une seule définition au lieu d'une par page (la puce existait en 6 variantes, l'état vide en 8). Les pages
   qui ont besoin d'une variante la déclarent en plus dans leur <style> (plus tard dans la cascade, même spécificité). ═══ */
html[data-ui="v2"] .glass{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body.ui-common .chip{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.8rem;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:4px 12px;cursor:pointer;transition:.18s}
body.ui-common .chip:hover{border-color:var(--accent);color:var(--text)}
body.ui-common .chip.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
body.ui-common .chip[disabled]{opacity:.5;cursor:not-allowed}
body.ui-common .btn{display:inline-flex;align-items:center;gap:6px;background:var(--btn-bg);border:1px solid var(--btn-bd);color:var(--btn-fg);border-radius:var(--radius);padding:6px 14px;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
body.ui-common .btn:hover{background:var(--btn-hover)}
body.ui-common .empty{color:var(--dim);font-style:italic;font-size:.85rem;text-align:center;padding:1.5rem 0}
body.ui-common .hero h1{font-size:1.2rem;font-weight:800;line-height:1.2;margin:0;background:linear-gradient(135deg,var(--accent),var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.ui-common .controls{padding:10px 14px;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
body.ui-common .sec-h{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:16px 2px 8px}

/* ═══ Peau « aventure » : mouvement, relief, retours visuels (toutes les pages) + couche de jeu (game.js) ═══
   Tout le mouvement est coupé par prefers-reduced-motion (règle globale en haut de ce fichier). */
html[data-theme^="light"]{--gm-flame:#b45309;--gm-gold:#8a6410}
html{--gm-flame:#ff8a1f;--gm-gold:#f5c84a;scroll-behavior:smooth}
* {scrollbar-width:thin;scrollbar-color:var(--bdr) transparent}
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
  html[data-ui="v2"] .topbar{view-transition-name:gm-topbar}
  ::view-transition-group(gm-topbar){animation-duration:0s}
  @keyframes gmIn{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
  .gm-stagger>*:not(.rise):nth-child(-n+10){animation:gmIn .5s cubic-bezier(.2,.7,.2,1) backwards}
  .gm-stagger>*:not(.rise):nth-child(2){animation-delay:.05s}.gm-stagger>*:not(.rise):nth-child(3){animation-delay:.1s}.gm-stagger>*:not(.rise):nth-child(4){animation-delay:.15s}
  .gm-stagger>*:not(.rise):nth-child(5){animation-delay:.2s}.gm-stagger>*:not(.rise):nth-child(6){animation-delay:.25s}.gm-stagger>*:not(.rise):nth-child(n+7){animation-delay:.3s}
}
/* relief : cartes en verre, reflet en haut, survol qui se soulève */
html[data-ui="v2"] .glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 28px -16px rgba(0,0,0,.55);transition:border-color .2s,box-shadow .2s,transform .2s}
html[data-ui="v2"] .glass.card:hover,html[data-ui="v2"] .zt:hover,html[data-ui="v2"] .tn a:hover{border-color:var(--accent-line)}
@media (hover:hover){
  html[data-ui="v2"] .glass.card:not(.wide):hover,html[data-ui="v2"] .zt:hover,html[data-ui="v2"] .opt:hover:not([disabled]){transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 30px -14px rgba(0,0,0,.6),0 0 0 1px var(--accent-line)}
}
/* retour au toucher : tout ce qui se clique s'enfonce un peu */
html[data-ui="v2"] :is(button,.btn,.chip,.snav-btn,.t-btn,.pill,.opt):not([disabled]):active{transform:scale(.96)}
html[data-ui="v2"] :is(.mon,.zt,.pbtn):not([disabled]):active{transform:scale(.985)}
html[data-ui="v2"] :focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
/* barres de progression : reflet « jeu » sur toutes les jauges de pages */
html[data-ui="v2"] :is(.bar i,.grp-bar i,.qz-bar i,.zt-bar i,.pr .bar i){background-image:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 62%);box-shadow:0 0 10px -2px var(--pc,var(--accent))}
html[data-ui="v2"] .snav-btn.on{box-shadow:0 0 0 1px var(--accent-line),0 0 16px -4px var(--accent)}
/* fond : halo coloré fixe, derrière tout */
html[data-ui="v2"]::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(38% 32% at 12% 18%,var(--accent-glow),transparent 70%),radial-gradient(34% 30% at 88% 8%,var(--violet-soft,transparent),transparent 70%);opacity:.5}
@media print{html[data-ui="v2"]::before{display:none}}

/* ── Pastille de niveau (en-tête) et anneau d'XP ── */
.gm-ring{--s:34px;position:relative;display:inline-grid;place-items:center;width:var(--s);height:var(--s);border-radius:50%;background:conic-gradient(var(--pc,var(--accent)) calc(var(--p,0)*1%),var(--border,var(--bdr2)) 0);flex-shrink:0;transition:background .6s}
.gm-ring::before{content:'';position:absolute;inset:calc(var(--s)*.1);border-radius:50%;background:var(--bg2)}
.gm-ring b{position:relative;font-size:calc(var(--s)*.42);font-weight:800;line-height:1;color:var(--text)}
/* avatar (game.js, avatar()) : le monstre choisi dans l'anneau de progression, le niveau en pastille, un cadre selon le
   niveau — bronze, argent, or, diamant (reflet tournant) */
.gm-av{--fr:#b87333}
.gm-av.av-argent{--fr:#c9d1dc}
.gm-av.av-or{--fr:#f5c84a}
.gm-av.av-diamant{--fr:#8fe3ff}
.gm-av::before{background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--pc,var(--accent)) 30%,var(--bg2)),var(--bg2) 72%)!important;box-shadow:0 0 0 calc(var(--s)*.035) var(--fr)}
.gm-av img{position:relative;width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.gm-av .gm-av-l{position:absolute;right:-6%;bottom:-6%;min-width:calc(var(--s)*.4);height:calc(var(--s)*.4);padding:0 4px;display:grid;place-items:center;border-radius:999px;font-size:max(9px,calc(var(--s)*.2));font-weight:900;line-height:1;color:#16120a;background:var(--fr);box-shadow:0 1px 4px rgba(0,0,0,.5)}
.gm-av.av-diamant::after{content:"";position:absolute;inset:calc(var(--s)*-.04);border-radius:50%;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,255,255,.75) 80%,transparent 90%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px))}
@media (prefers-reduced-motion:no-preference){.gm-av.av-diamant::after{animation:avShine 3.2s linear infinite}.gm-av.av-or .gm-av-l{animation:avGlint 2.6s ease-in-out infinite}}
@keyframes avShine{to{transform:rotate(360deg)}}
@keyframes avGlint{50%{box-shadow:0 0 10px 1px var(--fr)}}
.gm-r .gm-av{--s:26px;margin-right:2px}
/* « #mini » (Ctrl K → Fenêtre flottante) : le bouton de la fenêtre flottante appelle le clic */
.mini-call{box-shadow:0 0 0 3px var(--accent),0 0 22px var(--accent)!important}
@media (prefers-reduced-motion:no-preference){.mini-call{animation:miniCall .9s ease-in-out infinite alternate}}
@keyframes miniCall{to{transform:scale(1.06)}}
/* cadres à débloquer (game.js, FRAMES) : chacun gagné avec un succès, il remplace le cadre du palier de niveau */
.gm-av.fr-pilori{--fr:#7fe08a}
.gm-av.fr-fidele{--fr:#7cc4ff}
.gm-av.fr-assidu{--fr:#ff8a3d}
.gm-av.fr-lame{--fr:#3ac7b0}
.gm-av.fr-succes{--fr:#e5534b}
.gm-av.fr-collec{--fr:#c9a7ff}
.gm-av.fr-terreur{--fr:#b0303a}
.gm-av.fr-memoire{--fr:#ff9de2}
.gm-av.fr-quete{--fr:#ffd76a}
.gm-av[class*=" fr-"]::before{box-shadow:0 0 0 calc(var(--s)*.05) var(--fr),0 0 calc(var(--s)*.18) color-mix(in srgb,var(--fr) 55%,transparent)}
.gm-av.fr-memoire::after,.gm-av.fr-quete::after,.gm-av.fr-assidu::after{content:"";position:absolute;inset:calc(var(--s)*-.05);border-radius:50%;pointer-events:none;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px))}
.gm-av.fr-memoire::after{background:conic-gradient(#ff7a7a,#ffd27a,#9aff7a,#7affd9,#7aa8ff,#d57aff,#ff7a7a)}
.gm-av.fr-quete::after{background:conic-gradient(from 0deg,#ffd76a,#fff4c2,#c8962e,#ffd76a)}
.gm-av.fr-assidu::after{background:conic-gradient(from 0deg,transparent 0 60%,#ffb36b 75%,#ff5a1f 85%,transparent 95%)}
@media (prefers-reduced-motion:no-preference){.gm-av.fr-memoire::after,.gm-av.fr-quete::after,.gm-av.fr-assidu::after{animation:avShine 4s linear infinite}}
/* passage de palier (montée de niveau) : l'ancien cadre, puis le nouveau qui arrive en tournant */
.gm-lvl-tier{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:12px 0 4px}
.gm-lvl-tier b{flex-basis:100%;font-size:1rem;color:var(--gm-gold,#f5c84a)}
.gm-lvl-tier small{flex-basis:100%;color:var(--muted)}
.gm-lvl-tier>i{font-size:1.4rem;color:var(--muted)}
.gm-tier-old{opacity:.6;filter:grayscale(.4)}
@media (prefers-reduced-motion:no-preference){.gm-lvl.in .gm-tier-new{animation:tierIn 1s cubic-bezier(.2,1.5,.4,1) .5s both}}
@keyframes tierIn{from{transform:scale(.2) rotate(-200deg);opacity:0}to{transform:none;opacity:1}}
/* aide « ? » : bouton « Copier le diagnostic » */
.hlp-diag{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px dashed var(--border)}
.hlp-diag button{font:inherit;font-size:.78rem;font-weight:800;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:12px;padding:4px 12px;cursor:pointer}
.hlp-diag small{color:var(--muted);font-size:.7rem;flex:1;min-width:200px}
.hlp-errs{margin-top:12px;padding-top:10px;border-top:1px dashed var(--border)}
.hlp-errs summary{cursor:pointer;font-size:.78rem;font-weight:800;color:var(--muted)}
.hlp-errs summary i{color:var(--accent)}
.hlp-errs-b{margin-top:8px;display:flex;flex-direction:column;gap:6px;font-size:.78rem;color:var(--muted);max-height:220px;overflow-y:auto}
.hlp-err small{display:block;font-size:.68rem;color:var(--muted)}
.hlp-err code{display:block;font-size:.74rem;color:var(--text);white-space:pre-wrap;word-break:break-word}
/* « Retour à la carte » (shared.js) : pastille flottante sous la barre, sur Capture et Ocre quand on vient de la Carte */
.back-pill{position:fixed;left:14px;top:62px;z-index:95;display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:800;color:var(--accent);text-decoration:none;background:var(--bg2);border:1px solid var(--accent-line);border-radius:20px;padding:5px 13px;box-shadow:var(--shadow-float);transition:transform .15s,background .15s}
.back-pill:hover{background:var(--accent-soft);transform:translateX(-2px)}
@media print{.back-pill{display:none!important}}
/* coordonnée qui se copie en commande du pilote automatique de Dofus (shared.js, data-travel) */
.crd{font:inherit;color:inherit;background:none;border:0;border-bottom:1px dotted currentColor;padding:0 1px;margin:0;cursor:copy;border-radius:2px;line-height:inherit}
.crd:hover,.crd:focus-visible{color:var(--accent);background:var(--accent-soft);outline:none}
.crd.ok{color:var(--ok);border-bottom-style:solid}
.gm-chip{position:relative;display:inline-flex;padding:0;border:0;background:transparent;border-radius:50%;cursor:pointer;flex-shrink:0;transition:transform .18s,box-shadow .18s}
.gm-chip[hidden]{display:none}
.gm-chip:hover{transform:scale(1.1);box-shadow:0 0 0 3px var(--accent-glow)}
.gm-chip.gm-pulse{animation:gmBeat 1s ease-out}
@keyframes gmBeat{0%{box-shadow:0 0 0 0 var(--gm-gold);transform:scale(1)}25%{transform:scale(1.28)}100%{box-shadow:0 0 0 16px transparent;transform:scale(1)}}
#gm-rain{position:fixed;inset:0;z-index:960;pointer-events:none;overflow:hidden}
#gm-rain img{position:absolute;top:-70px;height:auto;animation:gmRain 3.4s linear both;filter:drop-shadow(0 4px 4px rgba(0,0,0,.35))}
@keyframes gmRain{from{transform:translateY(0) rotate(0)}to{transform:translateY(calc(100vh + 120px)) rotate(var(--rot,180deg))}}
@media print{#gm-rain{display:none!important}}
.gm-float{position:fixed;z-index:970;transform:translateX(-50%);font-weight:800;font-size:.95rem;color:var(--gm-gold);text-shadow:0 1px 6px rgba(0,0,0,.45);pointer-events:none;animation:gmFloat 1.6s ease-out forwards}
@keyframes gmFloat{0%{opacity:0;transform:translate(-50%,6px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.1)}100%{opacity:0;transform:translate(-50%,-34px) scale(1)}}
#gm-confetti{position:fixed;inset:0;width:100%;height:100%;z-index:940;pointer-events:none}

/* ── Cartes de succès et montée de niveau ── */
#gm-cele{position:fixed;top:64px;right:16px;z-index:950;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:min(360px,calc(100vw - 24px))}
.gm-card{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg2);border:1px solid var(--accent-line);border-radius:14px;box-shadow:var(--shadow-float);opacity:0;transform:translateX(40px);transition:opacity .35s,transform .35s cubic-bezier(.2,.9,.3,1.2)}
.gm-card.in{opacity:1;transform:none}
.gm-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--violet,var(--accent)));color:var(--bg);font-size:1.25rem;flex-shrink:0}
.gm-tx{display:flex;flex-direction:column;min-width:0;font-size:.9rem}
.gm-tx small{color:var(--muted);font-size:.78rem}
.gm-lvl{position:fixed;inset:0;z-index:960;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s}
.gm-lvl.in{opacity:1}
.gm-lvl-box{text-align:center;padding:26px 40px 24px;background:var(--bg2);border:1px solid var(--accent-line);border-radius:22px;box-shadow:0 0 0 6px var(--accent-glow),var(--shadow-float);transform:scale(.8);transition:transform .45s cubic-bezier(.2,1.3,.4,1)}
.gm-lvl.in .gm-lvl-box{transform:none}
.gm-lvl-k{font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.gm-lvl-n{font-size:5.5rem;font-weight:900;line-height:1.05;background:linear-gradient(135deg,var(--gm-gold),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gm-lvl-t{font-size:1.1rem;font-weight:700;color:var(--text)}
.gm-lvl-s{font-size:.85rem;color:var(--muted);margin:4px 0 14px}
.gm-btn{font:inherit;font-size:.84rem;font-weight:700;color:var(--btn-fg,#fff);background:var(--btn-bg,var(--accent));border:1px solid var(--btn-bd,var(--accent));border-radius:20px;padding:6px 18px;cursor:pointer}
.gm-btn:hover{background:var(--btn-hover,var(--accent))}
#gm-keys{position:fixed;left:50%;bottom:22px;z-index:930;transform:translate(-50%,16px);max-width:calc(100vw - 24px);padding:9px 14px;font-size:.8rem;color:var(--text2);background:var(--bg2);border:1px solid var(--accent-line);border-radius:14px;box-shadow:var(--shadow-float);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
#gm-keys.show{opacity:1;transform:translate(-50%,0)}
#gm-keys kbd{font:inherit;font-weight:800;font-size:.72rem;border:1px solid var(--border,var(--bdr2));border-bottom-width:2px;border-radius:5px;padding:0 5px;color:var(--text)}

/* ── Profil ── */
.gm-ovl{position:fixed;inset:0;z-index:900;display:none;align-items:flex-start;justify-content:center;padding:5vh 12px 24px;overflow-y:auto;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.gm-ovl.open{display:flex}
.gm-prof{position:relative;width:min(880px,100%);padding:20px 22px 22px;color:var(--text);background:var(--bg2);border:1px solid var(--border,var(--bdr2));border-radius:20px;box-shadow:var(--shadow-float)}
@media (prefers-reduced-motion:no-preference){.gm-ovl.open .gm-prof{animation:gmIn .3s cubic-bezier(.2,.9,.3,1) both}}
.gm-loading{padding:2rem;text-align:center;color:var(--muted)}
.gm-p-head{display:flex;align-items:center;gap:18px;padding-right:34px;flex-wrap:wrap}
.gm-p-id{flex:1;min-width:240px}
.gm-p-id h2{font-size:1.4rem;font-weight:800;margin:6px 0 8px;line-height:1.2}
.gm-p-id h2 span{font-weight:600;color:var(--gm-gold);font-size:1.05rem}
.gm-p-tabs{display:flex;gap:6px;flex-wrap:wrap}
.gm-tab{font:inherit;font-size:.78rem;font-weight:700;color:var(--muted);background:transparent;border:1px solid var(--border,var(--bdr2));border-radius:20px;padding:2px 12px;cursor:pointer}
.gm-tab.on{color:var(--pc,var(--accent));border-color:var(--pc,var(--accent));background:var(--accent-soft)}
.gm-x{position:absolute;top:10px;right:12px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1.4rem;line-height:1;cursor:pointer}
.gm-x:hover{background:var(--accent-soft);color:var(--text)}
.gm-xpbar{height:10px;border-radius:6px;background:var(--surface2,var(--bg3));overflow:hidden}
.gm-xpbar i,.gm-qp u,.gm-sb u,.gm-rb u,.gm-bp u{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--violet,var(--accent)));transition:width .8s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:no-preference){.gm-xpbar i{background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%),linear-gradient(90deg,var(--accent),var(--violet,var(--accent)));background-size:220% 100%,100% 100%;animation:gmShine 3.2s linear infinite}@keyframes gmShine{from{background-position:130% 0,0 0}to{background-position:-30% 0,0 0}}}
.gm-p-xp{margin-top:5px;font-size:.82rem;color:var(--muted)}
.gm-p-xp b{color:var(--text)}
.gm-cols{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px;margin-top:6px}
@media (max-width:760px){.gm-cols{grid-template-columns:1fr}}
.gm-prof h3,.gm-home h2{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.gm-prof h3 i,.gm-home h2 i{color:var(--accent);font-size:1rem}
.gm-cnt{margin-left:auto;font-size:.78rem;letter-spacing:0;color:var(--muted)}
.gm-streak{font-size:.88rem;color:var(--muted);padding:2px 0}
.gm-streak b{color:var(--gm-flame);font-size:1.15rem;margin-right:3px}
.gm-streak em{font-style:normal;color:var(--gm-flame)}
.gm-qs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin-top:6px}
.gm-q{position:relative;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:4px 10px;padding:9px 12px 12px;text-align:left;font:inherit;color:var(--text);text-decoration:none;background:var(--surface2,var(--bg3));border:1px solid var(--border,var(--bdr2));border-radius:12px;cursor:pointer;overflow:hidden;transition:border-color .2s,transform .2s}
.gm-q:hover{border-color:var(--accent)}
.gm-qi{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-size:1.15rem}
.gm-qt{display:flex;flex-direction:column;font-size:.84rem;font-weight:700;min-width:0}
.gm-qt small{font-weight:600;color:var(--muted);font-size:.74rem}
.gm-qp{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--border,var(--bdr2))}
.gm-q.done{border-color:var(--ok-line)}
.gm-q.done .gm-qi{background:var(--ok-soft);color:var(--ok)}
.gm-q.done .gm-qp u{background:var(--ok)}
.gm-qgo{position:absolute;top:8px;right:10px;font-style:normal;font-size:.72rem;font-weight:800;color:var(--accent)}
.gm-src,.gm-rank{display:flex;flex-direction:column;gap:6px}
.gm-s{display:grid;grid-template-columns:18px minmax(0,1fr) 84px 52px;align-items:center;gap:8px;font-size:.82rem;color:var(--muted)}
.gm-s i{color:var(--accent)}
.gm-s em,.gm-r em{font-style:normal;font-weight:700;color:var(--text);text-align:right}
.gm-sb,.gm-rb{height:7px;border-radius:5px;background:var(--surface2,var(--bg3));overflow:hidden}
.gm-r{display:grid;grid-template-columns:24px 1fr 90px 64px;align-items:center;gap:8px;font:inherit;font-size:.86rem;font-weight:700;color:var(--pc,var(--text));text-align:left;background:transparent;border:1px solid transparent;border-radius:10px;padding:5px 8px;cursor:pointer}
.gm-r.on,.gm-r:hover{background:var(--accent-soft);border-color:var(--accent-line)}
.gm-r small{font-weight:600;color:var(--muted)}
.gm-r .gm-rb u{background:var(--pc,var(--accent))}
.gm-rk{display:grid;place-items:center;color:var(--gm-gold);font-weight:800}
.gm-goal{margin-top:12px;font-size:.84rem;color:var(--muted)}
.gm-goal>div:first-child{display:flex;justify-content:space-between;gap:10px;margin-bottom:4px}
.gm-goal b{color:var(--text)}
.gm-bs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.gm-b{position:relative;display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:9px 10px 11px;background:var(--surface2,var(--bg3));border:1px solid var(--border,var(--bdr2));border-radius:12px;overflow:hidden;color:var(--muted)}
.gm-b b{font-size:.8rem;color:var(--text)}
.gm-b small{grid-column:2;font-size:.72rem;color:var(--muted)}
.gm-bi{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--border,var(--bdr2));color:var(--muted);font-size:1.1rem}
.gm-b.on{border-color:var(--accent-line);background:linear-gradient(135deg,var(--accent-soft),var(--surface2,var(--bg3)))}
.gm-b.on .gm-bi{background:linear-gradient(135deg,var(--accent),var(--violet,var(--accent)));color:var(--bg)}
.gm-bp{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--border,var(--bdr2))}
.gm-rules{margin-top:16px;font-size:.82rem;color:var(--muted)}
.gm-rules summary{cursor:pointer;font-weight:700}
.gm-rules p,.gm-rules ul{margin:6px 0 0 4px}
.gm-rules ul{padding-left:16px}

/* ── Accueil : « Votre aventure » ── */
.gm-home{padding:16px 18px;margin-bottom:12px;min-height:214px}
.gm-home-in{display:grid;grid-template-columns:minmax(260px,1.2fr) auto minmax(280px,1.6fr);gap:12px 22px;align-items:center}
@media (max-width:1000px){.gm-home-in{grid-template-columns:1fr}}
.gm-home-id{display:flex;align-items:center;gap:16px}
.gm-home-id>div{flex:1;min-width:0}
.gm-home-id h2{font-size:1.25rem;font-weight:800;letter-spacing:0;text-transform:none;color:var(--text);margin:2px 0 8px}
.gm-home-k{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gm-home-mid{display:flex;gap:10px}
.gm-flame{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:6px;align-items:center;padding:8px 14px;border-radius:14px;background:var(--surface2,var(--bg3));border:1px solid var(--border,var(--bdr2));color:var(--muted)}
.gm-flame i{grid-row:1/3;font-size:1.6rem;color:var(--muted)}
.gm-flame b{font-size:1.5rem;font-weight:900;color:var(--text);line-height:1}
.gm-flame small{font-size:.72rem;grid-column:2}
.gm-flame.on{border-color:var(--gm-flame)}
.gm-flame.on i,.gm-flame.on b{color:var(--gm-flame)}
@media (prefers-reduced-motion:no-preference){.gm-flame.on i{animation:gmFlick 1.8s ease-in-out infinite}@keyframes gmFlick{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.12) rotate(2deg)}}}
.gm-flame.sm i{font-size:1.3rem}
.gm-home-q{min-width:0}
.gm-home-qh{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gm-home-bot{grid-column:1/-1;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding-top:10px;border-top:1px dashed var(--border,var(--bdr2))}
.gm-mini{display:flex;gap:6px;flex-wrap:wrap}
.gm-chipb{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:700;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:20px;padding:2px 10px}
.gm-next{font-size:.8rem;color:var(--muted);flex:1;min-width:200px}
.gm-next b{color:var(--text)}
.gm-muted{color:var(--muted);font-size:.85rem;margin-top:4px}
.gm-home .gm-rank{max-width:380px}
@media print{#gm-cele,#gm-lvl,#gm-confetti,.gm-chip,#gm-keys,.gm-ovl{display:none!important}}

/* ═══ Identité des pages et finitions ═══
   Chaque page a sa couleur (--pg, posée par shared.js via <html data-page>) : filet du bandeau, fin du dégradé des titres,
   barre des intertitres, filigrane et liseré de la barre du haut. Les boutons, puces et le reste suivent toujours l'accent
   du thème (ambre ou bleu), pour que le choix de l'utilisateur reste maître. Icônes : ti-ghost-2 (états vides). */
html{--pg:var(--accent);--pg-ink:var(--pg)}
html[data-page="ocre"]{--pg:#e0a526}
html[data-page="capture"]{--pg:#f0773c}
html[data-page="tresors"]{--pg:#2fb8a6}
html[data-page="grimoire"]{--pg:#e0564f}
html[data-page="almanax"]{--pg:#9a7af0}
html[data-page="metiers"]{--pg:#58b85a}
html[data-page="jeux"]{--pg:#e85fa8}
html[data-page="outils"]{--pg:#4a9ee8}
html[data-page="retro"]{--pg:#d98c3a}
html[data-page="chronique"]{--pg:#8f7cf0}
html[data-page="activite"]{--pg:#7e92a8}
html[data-theme^="light"]{--pg-ink:color-mix(in srgb,var(--pg) 62%,#000)}
html[data-ui="v2"] body{font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html[data-ui="v2"] .topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--pg) 50%,transparent);opacity:.6;pointer-events:none}
html[data-ui="v2"] .topbar-accent::before{background:linear-gradient(90deg,var(--pg),var(--accent) 55%,var(--pg))}
html[data-ui="v2"] .hero h1{background-image:linear-gradient(135deg,var(--accent),var(--pg-ink));text-wrap:balance}
body.ui-common .sec-h::before{content:"";width:3px;height:1.05em;border-radius:2px;background:linear-gradient(var(--pg),var(--accent));flex-shrink:0}
.gm-wm{position:absolute;right:22px;top:50%;transform:translateY(-50%) rotate(-12deg);font-size:118px;line-height:1;color:var(--pg);opacity:.07;pointer-events:none;z-index:0}
/* repère de marque : petite gemme à facettes devant « infosolonk » */
.t-mark{width:20px;height:20px;margin-right:7px;flex-shrink:0;filter:drop-shadow(0 0 7px var(--accent-glow));transition:transform .25s}
.t-mark .f1{fill:var(--accent)}
.t-mark .f2{fill:#fff;opacity:.38}
.t-mark .f3{fill:#000;opacity:.2}
.t-logo:hover .t-mark{transform:rotate(-10deg) scale(1.1)}
/* chargement : lignes qui scintillent au lieu d'un « Chargement… » */
.sk{display:grid;gap:9px;padding:3px 0}
.sk i{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--surface2,var(--bg3)) 25%,var(--border,var(--bdr2)) 50%,var(--surface2,var(--bg3)) 75%);background-size:300% 100%}
.sk i:nth-child(2){width:78%}.sk i:nth-child(3){width:52%}
@media (prefers-reduced-motion:no-preference){.sk i{animation:gmSk 1.5s linear infinite}@keyframes gmSk{from{background-position:130% 0}to{background-position:-30% 0}}}
/* états vides : un fantôme au-dessus du texte */
html[data-ui="v2"] .empty{text-align:center}
html[data-ui="v2"] .empty::before{font-family:"tabler-icons";content:"\f57c";display:block;font-size:1.7rem;font-style:normal;opacity:.32;margin-bottom:2px}
/* niveau du joueur, posé par les pages (<span class="gm-lvpill" data-gm-lvl="Joueur">) */
.gm-lvpill{display:inline-flex;align-items:center;margin-left:6px;font-size:.68rem;font-weight:800;letter-spacing:.02em;padding:1px 7px;border-radius:10px;color:var(--text);background:var(--accent-soft);border:1px solid var(--accent-line);vertical-align:middle;white-space:nowrap}
.gm-lvpill:empty{display:none}
.gm-btn.ghost{color:var(--text);background:transparent;border-color:var(--border);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.gm-btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent}

/* ═══ Thème « parchemin » (cinquième look : bois sombre et or, ou parchemin clair) ═══ */
html[data-ui="v2"][data-theme="dark-parch"]{
  --bg:#15100b;--surface:rgba(38,29,20,.93);--surface2:#31261a;--border:#5b4630;
  --text:#f2e8d3;--muted:#bfa885;--dim:#c4ae8b;
  --accent:#e4b24c;--accent-glow:rgba(228,178,76,.22);--accent-soft:rgba(228,178,76,.12);--accent-line:rgba(228,178,76,.34);
  --ok:#86c97b;--ok-soft:rgba(134,201,123,.12);--ok-line:rgba(134,201,123,.34);
  --info:#86bddb;--info-soft:rgba(134,189,219,.12);--info-line:rgba(134,189,219,.32);
  --violet:#bda3f5;--violet-soft:rgba(189,163,245,.12);--violet-line:rgba(189,163,245,.32);
  --danger:#ec7266;--danger-soft:rgba(236,114,102,.12);--danger-line:rgba(236,114,102,.34);
  --nav:rgba(21,16,11,.93);--dot:rgba(228,178,76,.045);--halo:rgba(228,178,76,.09);--shadow:rgba(0,0,0,.45);
  --bg2:#261d14;--bg3:#2d2217;--bg4:#33281c;--bg5:#40321f;--bdr:#6e5738;--bdr2:#5b4630;
  --text2:#cdb892;--text3:#bfa885;--text4:#c4ae8b;
  --green:#c8922c;--green2:#e4b24c;--green3:#f0c565;--green-dk:#8a6118;
  --btn-bg:#e4b24c;--btn-bd:#e4b24c;--btn-fg:#15100b;--btn-hover:#f0c565;
  --blue:#6aa5c9;--blue2:#86bddb;--tip-bg:#0a0705;--tip-fg:#f2e8d3;--n-bg:rgba(228,178,76,.1);--gold-bg:rgba(228,178,76,.14);--red-fg:#f08a80;
}
html[data-ui="v2"][data-theme="light-parch"]{
  color-scheme:light;
  --bg:#ecdfc2;--surface:rgba(249,241,222,.95);--surface2:#f6ecd1;--border:#c8b080;
  --text:#34260f;--muted:#57441f;--dim:#5c4821;
  --accent:#7a4a0a;--accent-glow:rgba(160,100,20,.28);--accent-soft:rgba(160,100,20,.14);--accent-line:rgba(160,100,20,.42);
  --ok:#2c6a2e;--ok-soft:rgba(44,106,46,.14);--ok-line:rgba(44,106,46,.42);
  --info:#1b5a98;--info-soft:rgba(27,90,152,.13);--info-line:rgba(27,90,152,.4);
  --violet:#4a2aa8;--violet-soft:rgba(74,42,168,.13);--violet-line:rgba(74,42,168,.4);
  --danger:#b02320;--danger-soft:rgba(176,35,32,.13);--danger-line:rgba(176,35,32,.4);
  --nav:rgba(236,223,194,.94);--dot:rgba(122,74,10,.06);--halo:rgba(160,100,20,.1);--shadow:rgba(60,40,10,.2);
  --bg2:#f9f1de;--bg3:#f1e6c9;--bg4:#e9dcb9;--bg5:#dfd0a8;--bdr:#b49b66;--bdr2:#c8b080;
  --text2:#473719;--text3:#52401d;--text4:#58451f;
  --green:#8a5a12;--green2:#7a4a0a;--green3:#9c6a14;--green-dk:#7a4a0a;
  --btn-bg:#7a4a0a;--btn-bd:#7a4a0a;--btn-fg:#ffffff;--btn-hover:#94600f;
  --gold:#7a5208;--gold2:#6e4a07;--gold-bg:rgba(160,100,20,.15);
  --red:#b02320;--red2:#b02320;--red-bg:rgba(176,35,32,.1);--red-fg:#b02320;
  --blue:#1b5a98;--blue2:#1b5a98;--purple:#4a2aa8;--purple2:#4a2aa8;
  --ok-dk:#2c6a2e;--ok-bg:rgba(44,106,46,.14);--n-bg:rgba(60,40,10,.07);
  --tip-bg:#34260f;--tip-fg:#f6ecd1;
  --shadow-card:0 1px 2px rgba(60,40,10,.12);--shadow-float:0 8px 24px rgba(60,40,10,.22);
}
/* parchemin : titres à empattement (polices du système), double filet autour des cartes, fil de séparation derrière les intertitres, grain de papier */
html[data-theme$="parch"] :is(h1,h2,h3,.t-logo,.gm-lvl-n,.gm-p-id h2){font-family:Georgia,'Palatino Linotype','Book Antiqua',Palatino,serif}
html[data-ui="v2"][data-theme$="parch"] .glass{border-color:var(--border);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--surface2) 80%,transparent),inset 0 0 0 4px color-mix(in srgb,var(--border) 55%,transparent),0 12px 26px -16px rgba(0,0,0,.55)}
html[data-theme$="parch"] :is(.sec-h,.card h2,.gm-prof h3){position:relative}
html[data-theme$="parch"] :is(.sec-h,.card h2,.gm-prof h3)::after{content:"";flex:1;height:1px;margin-left:10px;background:linear-gradient(90deg,var(--border),transparent);align-self:center}
html[data-ui="v2"][data-theme$="parch"] body::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .25 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px;opacity:.09}
html[data-ui="v2"][data-theme="dark-parch"] body::after{opacity:.05}

/* ═══ Cartes « éclairées » : la lumière suit le curseur ═══ */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  html[data-ui="v2"] :is(.glass,.zt,.q,.gm-q,.rec):hover{background-image:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 12%,transparent),transparent 65%)}
}

/* ═══ Mascotte (boîte « Info Solonk ») ═══ */
.solonk-float{width:340px}
.sfl-row{display:flex;gap:10px;align-items:flex-end}
.sfl-col{flex:1;min-width:0}
.sfl-mascot{flex-shrink:0;width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));transform-origin:50% 90%}
.sfl-emoji{display:grid;place-items:center;font-size:2rem;line-height:1}
.sfl-mini{width:22px;height:22px;object-fit:contain;vertical-align:middle}
@media (prefers-reduced-motion:no-preference){
  .sfl-mascot{animation:sflBob 3.2s ease-in-out infinite}
  .sfl-mascot.hop{animation:sflHop .7s cubic-bezier(.3,1.6,.5,1)}
  .sfl-mascot.zz{animation:sflZz 3.6s ease-in-out infinite;filter:grayscale(.5) drop-shadow(0 4px 6px rgba(0,0,0,.4))}
  @keyframes sflBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px) rotate(-2deg)}}
  @keyframes sflHop{0%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-16px) scale(.92,1.1)}60%{transform:translateY(0) scale(1.1,.88)}100%{transform:translateY(0) scale(1,1)}}
  @keyframes sflZz{0%,100%{transform:scale(1,.96)}50%{transform:scale(1,1.02)}}
}
.solonk-float.react{border-color:var(--accent);box-shadow:var(--shadow-float),0 0 0 3px var(--accent-glow)}
@media (max-width:700px){.solonk-float{width:auto}}

/* ═══ Menu « Plus » de la barre (pages hors barre) ═══ */
.snav-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:600;width:min(340px,calc(100vw - 24px));padding:6px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-float)}
.snav-pop[hidden]{display:none}
.snav-pi{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:10px;color:var(--text);text-decoration:none}
.snav-pi i{font-size:1.2rem;color:var(--accent);margin-top:2px}
.snav-pi b{display:block;font-size:.88rem}
.snav-pi small{display:block;font-size:.74rem;color:var(--muted);line-height:1.3}
.snav-key{margin-left:auto;flex:none;align-self:center;font:inherit;font-size:.62rem;font-weight:700;color:var(--muted);border:1px solid var(--border,var(--bdr2));border-bottom-width:2px;border-radius:5px;padding:0 5px;white-space:nowrap}
/* Pages de la barre (⚙ Réglages) */
.np-ovl .hlp-b{max-height:min(74vh,640px);overflow-y:auto}
.np-note{margin:.2rem 0 .4rem;font-size:.82rem;color:var(--text2,var(--muted));line-height:1.45}
.np-note kbd{font:inherit;font-size:.72rem;font-weight:700;border:1px solid var(--border,var(--bdr2));border-bottom-width:2px;border-radius:5px;padding:0 5px}
.np-r{display:flex;align-items:center;gap:10px;padding:5px 6px;border-radius:9px;cursor:pointer}
.np-r:hover{background:var(--surface2,var(--bg3))}
.np-r input{accent-color:var(--accent);width:16px;height:16px;flex:none}
.np-r i{font-size:1.1rem;color:var(--accent);flex:none}
.np-r b{display:block;font-size:.88rem}
.np-r small{display:block;font-size:.74rem;color:var(--muted);line-height:1.3}
.np-r:has(input:not(:checked)){opacity:.55}
.snav-pi:hover,.snav-pi:focus-visible,.snav-pi.on{background:var(--accent-soft)}

/* ═══ Palette : aperçu du résultat sélectionné ═══ */
.pal-body{display:flex}
.pal-body .pal-list{flex:1;min-width:0}
.pal-prev{display:none;width:210px;flex-shrink:0;padding:14px;border-left:1px solid var(--border,var(--bdr2));text-align:center;flex-direction:column;align-items:center;gap:5px;overflow:hidden}
@media (min-width:720px){.pal-prev{display:flex}}
.pal-prev img{max-width:100%;max-height:130px;object-fit:contain;filter:drop-shadow(0 6px 10px var(--shadow))}
.pal-prev b{font-size:1rem;line-height:1.2}
.pal-prev small{color:var(--muted);font-size:.74rem;line-height:1.3}
.pal-pi{font-size:3rem;color:var(--accent);opacity:.85}
.pal-pk{font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:1px 8px;border-radius:10px;border:1px solid var(--accent-line);color:var(--accent);background:var(--accent-soft)}
.pal-ph{margin-top:auto;padding-top:8px}
.pal-ph kbd{font:inherit;font-weight:800;font-size:.68rem;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:0 5px;color:var(--text)}
.solonk-float.min .sfl-row{display:none}

/* ═══ Gabarit et mouvement communs (refonte d'octobre 2026) ═══
   Deux largeurs de page seulement (avant : huit, de 980 à 1 800 px, et le contenu sautait à chaque changement de page) :
   --page-w pour les pages qui se lisent, --page-wide pour les pages-outils (Grimoire, Outils, Carte). Capture garde sa
   colonne étroite, faite pour tenir à côté du jeu. Les durées et courbes d'animation sont aussi communes : une page qui
   anime quelque chose prend --dur-* et --ease-* plutôt que ses propres valeurs. Tout le mouvement reste coupé par
   prefers-reduced-motion (règle globale en haut de ce fichier ; les animations en JavaScript testent le même réglage). */
:root{
  --page-w:1180px;--page-wide:1600px;
  --ease-out:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.3,1.5,.5,1);
  --dur-1:.15s;--dur-2:.28s;--dur-3:.6s;
}
/* apparition d'un bloc (classe .rise des pages, avec --i pour l'échelonner) : une seule définition pour toutes les pages */
@keyframes rise{to{opacity:1;transform:none}}
/* une ligne, une carte qui arrive dans une liste (journal, fails, avis) */
@keyframes gmEnter{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
/* tampon « terminé » posé sur une carte (zone d'Ocre complétée…) */
@keyframes gmStamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(2.2)}55%{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(.92)}75%{transform:translate(-50%,-50%) rotate(-14deg) scale(1.04)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1)}}
/* chargement : reflet qui passe sur une carte « squelette » */
@keyframes gmSkel{from{background-position:150% 0}to{background-position:-50% 0}}
/* le bandeau « Qui êtes-vous ? » descend au lieu d'apparaître d'un coup */
@keyframes gmDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.who-ask{animation:gmDrop var(--dur-2) var(--ease-out) both}

/* Transitions entre pages (Router.svelte, View Transitions) : l'ancienne page s'efface vite, la nouvelle entre avec son
   apparition échelonnée habituelle (game.js), l'onglet actif de la navigation glisse de l'ancien au nouveau */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:var(--dur-1) ease-in both gmVtOut}
  ::view-transition-new(root){animation:var(--dur-2) var(--ease-out) both gmVtIn}
  html[data-ui="v2"] .snav-btn.on{view-transition-name:gm-nav-on}
  ::view-transition-group(gm-nav-on){animation-duration:.38s;animation-timing-function:var(--ease-out)}
  ::view-transition-old(gm-nav-on),::view-transition-new(gm-nav-on){animation-duration:.38s;height:100%}
}
@keyframes gmVtOut{to{opacity:0}}
@keyframes gmVtIn{from{opacity:0}}

/* Menu « Plus » rangé par thème */
.snav-pg{font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 10px 2px}
.snav-pg:first-child{padding-top:4px}

/* Jauges et anneaux : ils se remplissent au lieu de sauter à la nouvelle valeur */
html[data-ui="v2"] :is(.bar i,.grp-bar i,.qz-bar i,.zt-bar i,.pr .bar i,.prog-fill,.bar-fill){transition:width var(--dur-3) var(--ease-out)}

/* Carte « squelette » pendant un chargement (Outils : recherche DofusDB) */
.gm-skel{border-radius:var(--radius-lg,12px);border:1px solid var(--border,var(--bdr2));background:linear-gradient(100deg,var(--surface,var(--bg2)) 30%,var(--surface2,var(--bg3)) 50%,var(--surface,var(--bg2)) 70%) 0 0/250% 100%;animation:gmSkel 1.3s linear infinite}
.gm-skel-l{height:10px;border-radius:5px;background:var(--border,var(--bdr2));opacity:.55;margin:10px 12px 0}
.gm-skel-l.w60{width:60%}.gm-skel-l.w40{width:40%}.gm-skel-l.w80{width:80%}

/* Nombre qui change (compteurs des en-têtes) : bref éclat de la couleur d'accent */
@keyframes gmTick{0%{color:var(--accent);text-shadow:0 0 10px var(--accent-glow)}100%{}}
.gm-tick{animation:gmTick .9s var(--ease-out)}

/* Tampon de fin posé par-dessus une carte (.gm-stamped sur la carte, le texte dans data-stamp) */
.gm-stamped{position:relative}
.gm-stamped::after{content:attr(data-stamp);position:absolute;left:50%;top:50%;z-index:3;pointer-events:none;font-size:.95rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--ok,#3cb53c);border:3px solid currentColor;border-radius:8px;padding:2px 10px;background:color-mix(in srgb,var(--bg2) 70%,transparent);animation:gmStamp .7s var(--ease-spring) both,gmVtOut .5s ease-in 1.6s forwards}
/* ═══ Nouveautés du site (shared.js, NOTES) : bouton du pied de page et fenêtre ═══ */
.sf-notes{position:relative;display:inline-flex;align-items:center;gap:5px;flex-shrink:0;font:inherit;font-size:11px;font-weight:700;color:var(--accent,var(--green2));background:transparent;border:1px solid var(--accent-line,var(--bdr2));border-radius:20px;padding:1px 10px;cursor:pointer;font-style:normal}
.sf-notes:hover{background:var(--accent-soft,var(--bg4))}
.sf-notes-dot{position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--accent,var(--red2));box-shadow:0 0 0 2px var(--nav,var(--footer-bg))}
.sf-notes-dot[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.sf-notes-dot:not([hidden]){animation:gmBeat 1.6s ease-in-out 3}}
.notes{width:min(640px,100%)}
.notes .pal-top{position:relative}
.notes-x{margin-left:auto;background:transparent;border:0;color:var(--muted,var(--text3));font-size:1.05rem;cursor:pointer;border-radius:8px;padding:2px 6px}
.notes-x:hover{color:var(--text);background:var(--accent-soft,var(--bg4))}
.notes-b{max-height:min(70vh,560px);overflow-y:auto}
.notes .note{padding:4px 0 10px;border-bottom:1px dashed var(--border,var(--bdr2))}
.notes .note:last-child{border-bottom:0}
.notes .note h4{text-transform:none;letter-spacing:.02em;font-size:.74rem}
.notes .note h4::first-letter{text-transform:uppercase}
/* la pastille « Info Solonk » est dans le coin bas gauche : le texte du pied de page commence après elle */
.site-footer{padding-left:56px}
.notes .note h4 em{font-style:normal;text-transform:none;letter-spacing:0;font-size:.66rem;font-weight:800;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:10px;padding:0 7px;margin-left:6px}
.notes .note>b{display:block;font-size:.95rem;margin-bottom:4px;color:var(--text)}
.notes .note ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:3px;font-size:.85rem;color:var(--text2,var(--muted));line-height:1.45}
.notes .note.new>b{color:var(--accent)}
/* Historique d'annulation (Ctrl Alt Z) */
.hist{width:min(520px,100%)}
.hist h4 small{font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted,var(--text3))}
.hist-l{display:flex;flex-direction:column;gap:4px;margin:4px 0 12px}
.hist-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;font-size:.86rem;color:var(--text);background:var(--bg3,transparent);border:1px solid var(--border,var(--bdr2));border-radius:10px;padding:7px 10px;cursor:pointer}
.hist-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-row small{flex-shrink:0;color:var(--muted,var(--text3));font-size:.74rem}
.hist-row i{color:var(--accent);font-size:1rem}
.hist-row:hover,.hist-row:focus-visible{border-color:var(--accent-line,var(--bdr2));background:var(--accent-soft,var(--bg4))}
.hist-empty,.hist-tip{margin:4px 0 8px;font-size:.84rem;color:var(--text2,var(--muted));line-height:1.45}
.hist-tip{font-size:.76rem;color:var(--muted,var(--text3))}
/* Mode focus (Ctrl Alt F) : la page seule */
html.focus-mode .top-stripe,html.focus-mode .topbar,html.focus-mode .site-footer,html.focus-mode .who-ask,
html.focus-mode .solonk-float,html.focus-mode .back-pill{display:none!important}
.focus-pill{position:fixed;top:10px;right:12px;z-index:60;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;font-weight:700;padding:5px 12px;border-radius:16px;cursor:pointer;color:var(--text2,var(--text));background:var(--bg2,var(--surface));border:1px solid var(--accent-line,var(--bdr2));box-shadow:var(--shadow-float,0 8px 24px rgba(0,0,0,.4));opacity:.55;transition:opacity var(--dur-1,.15s)}
.focus-pill:hover,.focus-pill:focus-visible{opacity:1}
.focus-pill[hidden]{display:none}
/* ═══ Interactions communes (shared.js) : J / K, fiche au survol, onglets glissables, affichage compact ═══ */
/* élément de liste choisi au clavier (J / K) */
.kb-cur{outline:2px solid var(--accent)!important;outline-offset:2px;scroll-margin:80px}
/* fiche flottante d'un monstre ou d'un donjon (data-mon / data-dj) */
.hov-card{position:fixed;z-index:960;width:280px;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--bg2);border:1px solid var(--accent-line,var(--bdr2));border-radius:12px;box-shadow:var(--shadow-float);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity var(--dur-1),transform var(--dur-1) var(--ease-out)}
.hov-card.show{opacity:1;transform:none}
.hov-card img{width:56px;height:56px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.hov-card div{display:flex;flex-direction:column;gap:2px;min-width:0}
.hov-card b{font-size:.9rem;color:var(--text)}
.hov-card small{font-size:.74rem;color:var(--muted,var(--text3));line-height:1.35}
.hov-k{align-self:flex-start;font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:0 7px;border-radius:9px;border:1px solid var(--accent-line);color:var(--accent);margin:1px 0 2px}
.hov-k.boss{color:var(--danger,var(--red2));border-color:var(--danger-line,var(--red))}
.hov-k.avis{color:var(--accent);border-color:var(--accent-line)}
.hov-k.archi{color:var(--violet,var(--purple2));border-color:var(--violet-line,var(--purple))}
[data-mon],[data-dj]{cursor:help}
a[data-dj],button[data-dj]{cursor:pointer}
/* onglets de la barre : glisser pour les ranger */
html[data-ui="v2"] .snav-btn.dragging{opacity:.45}
html[data-ui="v2"] .snav-btn.drag-over{border-color:var(--accent);box-shadow:-3px 0 0 var(--accent)}
/* troisième bouton du sélecteur de thème : densité */
html[data-ui="v2"] #theme-density[aria-pressed="true"]{color:var(--accent)}

/* Affichage compact (bouton densité, classe dense sur <html>) : texte un peu plus petit, cartes et listes resserrées */
html.dense body{font-size:13px}
html.dense .page{padding-top:8px;padding-bottom:24px}
html.dense .hero{padding-top:8px;padding-bottom:8px;margin-bottom:8px;min-height:0}
html.dense .grid{gap:8px}
html.dense .card{padding:9px 12px;gap:6px}
html.dense .glass.controls,html.dense .controls{padding:7px 10px;margin-bottom:8px}
html.dense .mon .art{height:70px}
html.dense .mon .art>img{height:56px}
html.dense .mon .body{padding:5px 8px 6px}
html.dense .zt{padding:5px 9px}
html.dense .fail{padding:8px 10px}
html.dense .fails{gap:8px}
html.dense .ev{padding:4px 10px}
html.dense .row{padding:4px 10px}
html.dense .hunt .name{padding:5px 8px}
html.dense .item-card{padding:.4rem .5rem}
html.dense .items-grid{gap:.4rem}
html.dense .st{padding-top:4px;padding-bottom:4px}
/* ═══ Préférences (aide « ? ») : taille du texte, réglages, raccourcis ; sauvegarde déposée ═══ */
/* taille du texte : les pages comptent en rem (relatif à <html>) et le corps en px, les deux suivent */
html.fs-s{font-size:14.5px}
html.fs-s body{font-size:13px}
html.fs-l{font-size:17.5px}
html.fs-l body{font-size:15.5px}
.prf{display:flex;flex-direction:column;gap:7px;padding:2px 0 4px}
.prf-r{display:flex;align-items:center;gap:10px;font-size:.85rem;flex-wrap:wrap}
.prf-r>span:first-child{min-width:190px;color:var(--text2,var(--muted))}
.prf-r select{font:inherit;font-size:.82rem;color:var(--text);background:var(--bg);border:1px solid var(--border,var(--bdr2));border-radius:8px;padding:2px 8px}
.prf-r input[type=color]{width:42px;height:26px;padding:0;border:1px solid var(--border,var(--bdr2));border-radius:6px;background:transparent;cursor:pointer}
.prf-r button,.prf-seg button{font:inherit;font-size:.76rem;font-weight:700;color:var(--muted,var(--text3));background:transparent;border:1px solid var(--border,var(--bdr2));border-radius:14px;padding:2px 10px;cursor:pointer}
.prf-seg{display:inline-flex;gap:4px}
.prf-seg button.on{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)}
kbd.key-edit{cursor:pointer}
kbd.key-edit:hover{border-color:var(--accent);color:var(--accent)}
kbd.key-edit.wait{border-color:var(--accent);color:var(--accent);animation:gmBeat 1s ease-in-out infinite}
/* fichier glissé sur la page : la zone de dépôt */
.drop-ovl{position:fixed;inset:0;z-index:990;display:grid;place-items:center;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity var(--dur-1)}
.drop-ovl.show{opacity:1}
.drop-ovl>div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 40px;border:2px dashed var(--accent);border-radius:18px;background:var(--bg2);color:var(--text)}
.drop-ovl i{font-size:2.2rem;color:var(--accent)}
.drop-ovl small{color:var(--muted,var(--text3))}

/* ═══ Refonte « Nuit d'aventure » (octobre 2026) ═══
   Une nuit plus profonde et chaude (thème ambre sombre), des cartes en verre très léger cerclées de lumière, des bandeaux
   éclairés par deux halos (couleur de la page et accent), de grands titres en dégradé (accent → --accent2, la braise) et la
   police Inter (paquet @fontsource-variable/inter, importé par src/app/main.js). Les autres thèmes gardent leurs couleurs et
   prennent les mêmes formes : ils définissent --accent2, et les clairs une lueur plus discrète. Nouveaux jetons : --card et
   --card-bd (fond et filet des cartes), --card-solid (même teinte, opaque : bandeaux, info-bulles des graphiques), --accent2,
   --glow (anneau et halo autour d'une carte), --font-ui. */
html[data-ui="v2"]{
  --accent2:#ff7a45;--card:color-mix(in srgb,var(--surface2) 55%,transparent);--card-bd:var(--border);--card-solid:var(--bg2);
  --glow:0 0 0 1px color-mix(in srgb,var(--accent) 9%,transparent),0 18px 44px -30px color-mix(in srgb,var(--accent) 24%,transparent);
  --font-ui:'Inter Variable','Inter','Segoe UI',system-ui,sans-serif;
  --radius-lg:18px;
}
html[data-ui="v2"][data-theme="dark-amber"]{
  --bg:#0d0b12;--surface:rgba(22,19,28,.92);--surface2:#1d1925;--border:#2c2736;
  --text:#f3eee6;--muted:#a59fae;--dim:#aaa3b3;
  --card:rgba(255,255,255,.035);--card-bd:rgba(255,255,255,.08);--card-solid:#15121c;
  --nav:rgba(13,11,18,.78);--dot:rgba(245,180,26,.03);--halo:rgba(255,122,69,.07);
  --bg2:#15121c;--bg3:#1b1722;--bg4:#211c29;--bg5:#2a2433;--bdr:#3d3647;--bdr2:#2c2736;
  --text2:#b8b1c0;--text3:#a59fae;--text4:#aaa3b3;
  --btn-fg:#0d0b12;--tip-bg:#08070b;--tip-fg:#f3eee6;
}
html[data-ui="v2"][data-theme="dark-blue"]{--accent2:#a78bfa}
html[data-ui="v2"][data-theme="dark-parch"]{--accent2:#e9824a}
html[data-ui="v2"][data-theme^="light"]{
  --card:var(--surface);--card-bd:var(--border);--card-solid:var(--bg2);
  --glow:0 1px 2px rgba(0,0,0,.05),0 14px 34px -22px color-mix(in srgb,var(--accent) 45%,transparent);
}
html[data-ui="v2"][data-theme="light-amber"]{--accent2:#b5441a}
html[data-ui="v2"][data-theme="light-blue"]{--accent2:#6a3fd0}
html[data-ui="v2"][data-theme="light-parch"]{--accent2:#9b3d14}

/* police */
html[data-ui="v2"] body,html[data-ui="v2"] .t-logo{font-family:var(--font-ui)}
html[data-ui="v2"] :is(h1,h2,h3){letter-spacing:-.01em}

/* fond : deux halos chauds en haut de page (au lieu du halo central) */
html[data-ui="v2"] body::before{background:radial-gradient(1100px 520px at 88% -12%,color-mix(in srgb,var(--accent2) 13%,transparent),transparent 62%),radial-gradient(900px 420px at 0% -4%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 62%)}
html[data-ui="v2"]::before{opacity:.32}

/* barre du haut (maquette) : 62 px, logo seul (la page active se lit dans les onglets ; plus de « / page » ni de « à jour »), onglets avec libellé sans cadre,
   l'onglet actif est une petite carte dont l'icône prend l'accent, la flèche des sections reste discrète, un vrai champ
   « Rechercher » à droite. */
html[data-ui="v2"] .topbar{min-height:62px;padding:0 28px;gap:12px;background:color-mix(in srgb,var(--bg) 80%,transparent);border-bottom-color:var(--card-bd);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)}
html[data-ui="v2"] .t-logo{font-size:1.06rem;font-weight:800;letter-spacing:-.02em;margin-right:6px}
html[data-ui="v2"] .topbar .t-sep{display:none}
html[data-ui="v2"] .site-nav{gap:4px}
html[data-ui="v2"] .snav-btn{height:36px;padding:0 13px;gap:7px;font-size:13.5px}
html[data-ui="v2"] .snav-btn i{font-size:16px}
html[data-ui="v2"] :is(.snav-btn,.t-btn,.topbar-menu-btn){border-color:transparent;border-radius:12px;font-weight:600;color:var(--muted);transition:color var(--dur-1),background var(--dur-1),border-color var(--dur-1),box-shadow var(--dur-1)}
html[data-ui="v2"] :is(.snav-btn,.t-btn,.topbar-menu-btn):hover{background:var(--card);border-color:transparent;color:var(--text)}
html[data-ui="v2"] :is(.snav-btn,.t-btn).on{background:var(--card);border-color:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--card-bd)}
html[data-ui="v2"] :is(.snav-btn,.t-btn).on i{color:var(--accent)}
html[data-ui="v2"] .snav-sec>.snav-btn{padding-right:4px}
html[data-ui="v2"] .snav-caret{width:20px;height:36px;border-color:transparent;border-radius:0 12px 12px 0;color:var(--dim);font-size:.7rem;opacity:.7}
html[data-ui="v2"] .snav-sec:hover .snav-caret,html[data-ui="v2"] .snav-sec.open .snav-caret{opacity:1;background:var(--card);color:var(--text)}
html[data-ui="v2"] .snav-sec.on .snav-caret{background:var(--card);border-color:transparent;box-shadow:inset -1px 0 0 var(--card-bd),inset 0 1px 0 var(--card-bd),inset 0 -1px 0 var(--card-bd);color:var(--accent);opacity:1}
html[data-ui="v2"] .snav-sec.on>.snav-btn.on{box-shadow:inset 1px 0 0 var(--card-bd),inset 0 1px 0 var(--card-bd),inset 0 -1px 0 var(--card-bd)}
html[data-ui="v2"] .t-search{height:38px;min-width:260px;padding:0 10px 0 12px;gap:10px;background:var(--card);border:1px solid var(--card-bd);border-radius:12px;color:var(--dim);font-size:13.5px;font-weight:500}
/* page avec ses propres contrôles dans la barre (Grimoire, Outils…) : la recherche globale se réduit à sa loupe pour que
   les onglets gardent leurs libellés */
html[data-ui="v2"] .topbar:has(.topbar-extra>:not(.t-search,.today-wrap,.t-settings,.gm-chip)) .t-search{min-width:0;width:38px;padding:0;justify-content:center}
html[data-ui="v2"] .topbar:has(.topbar-extra>:not(.t-search,.today-wrap,.t-settings,.gm-chip)) .t-search :is(.tsr-l,kbd){display:none}
@media (max-width:1279px){html[data-ui="v2"] .t-search{min-width:0;width:38px;padding:0;justify-content:center}}
html[data-ui="v2"] .t-search:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--card-bd));color:var(--text)}
html[data-ui="v2"] .t-search kbd{border-radius:6px;border-color:var(--card-bd);font-weight:600}
html[data-ui="v2"] .t-subnav{background:color-mix(in srgb,var(--bg) 70%,transparent);border-bottom-color:var(--card-bd);padding-left:28px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html[data-ui="v2"] .snav-sub{border-radius:10px}
html[data-ui="v2"] .snav-sub.on{background:var(--card);border-color:var(--card-bd);color:var(--text)}
html[data-ui="v2"] .snav-sub.on i{color:var(--accent)}
html[data-ui="v2"] .gm-chip .gm-ring{--s:36px!important}
/* tablette (701-900 px) : la barre tient sur une ligne (sans le nom de la page à côté du logo, espacements resserrés) */
@media (min-width:701px) and (max-width:900px){
  html[data-ui="v2"] .topbar{padding:0 12px;gap:8px}
  html[data-ui="v2"] .site-nav{gap:2px}
  html[data-ui="v2"] .t-search{min-width:0}
}
html[data-ui="v2"] :is(.snav-pop,.t-set-pop,.today-panel,.header-search-results){border-radius:16px;border-color:var(--card-bd);box-shadow:0 24px 60px -20px rgba(0,0,0,.7),var(--glow)}

/* cartes : verre très léger, filet clair, lueur d'accent ; au survol elles se soulèvent et leur filet s'allume */
html[data-ui="v2"] .glass{background:var(--card);border-color:var(--card-bd);border-radius:var(--radius-lg);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),var(--glow)}
html[data-ui="v2"] .glass .glass{box-shadow:none}
html[data-ui="v2"] .glass.card{transition:transform var(--dur-2) var(--ease-out),border-color var(--dur-2),box-shadow var(--dur-2)}
@media (hover:hover){
  html[data-ui="v2"] .glass.card:not(.wide):hover,html[data-ui="v2"] .zt:hover,html[data-ui="v2"] .opt:hover:not([disabled]){transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,var(--card-bd));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),0 24px 56px -22px color-mix(in srgb,var(--accent) 42%,transparent)}
}

/* bandeau de page : grand titre en dégradé, deux halos (couleur de la page en haut à droite, accent en haut à gauche),
   un filet lumineux en haut au lieu de la bande de 3 px */
html[data-ui="v2"] .hero{position:relative;overflow:hidden;border-radius:calc(var(--radius-lg) + 6px);padding:22px 26px;margin-bottom:16px;background:radial-gradient(1100px 380px at 92% -40%,color-mix(in srgb,var(--pg) 24%,transparent),transparent 60%),radial-gradient(800px 300px at 0% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 60%),var(--card-solid)}
html[data-ui="v2"].cap-compact .hero{padding:8px 12px;margin-bottom:8px}
html[data-ui="v2"] .hero h1{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem);font-weight:800;line-height:1.08;letter-spacing:-.025em;background-image:linear-gradient(95deg,var(--accent) 10%,var(--accent2) 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.06em}
html[data-ui="v2"].cap-compact .hero h1{font-size:1.15rem}
/* titre dont seule une partie est en dégradé (« Bonsoir <span class="hl">Hicham</span> ») : le reste en couleur du texte */
html[data-ui="v2"] .hero h1:has(.hl){background:none;color:var(--text);-webkit-text-fill-color:currentColor}
html[data-ui="v2"] .hero :is(.sub,.hero-sub){font-size:.92rem;line-height:1.5;min-width:min(100%,340px)}
html[data-ui="v2"] .topbar-accent::before{height:1px;opacity:.9;background:linear-gradient(90deg,transparent,var(--pg) 30%,var(--accent2) 70%,transparent)}

/* intertitres de carte : petites capitales plus espacées */
html[data-ui="v2"] :is(.card h2,.sec-h,.gm-home h2){letter-spacing:.09em}

/* puces, pastilles et boutons */
html[data-ui="v2"] :is(.chip,.pill,.fchip){border-radius:999px}
html[data-ui="v2"] :is(.chip,.fchip):not(.on){background:var(--card);border-color:var(--card-bd)}
html[data-ui="v2"] :is(.chip,.fchip).on{box-shadow:0 0 0 1px var(--accent-line),0 6px 18px -8px var(--accent)}
html[data-ui="v2"] .btn{border-radius:12px;transition:background var(--dur-1),transform var(--dur-1),box-shadow var(--dur-1)}
html[data-ui="v2"] .btn:not(.btn-ghost):not(.ghost){background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 60%);box-shadow:0 8px 22px -12px var(--accent)}
@media (hover:hover){html[data-ui="v2"] .btn:not([disabled]):hover{transform:translateY(-1px)}}

/* ═══ Graphiques maison (web/src/lib/charts : LineChart, BarChart, Donut) ═══
   Tracé, pousse et rotation à l'affichage (animations « from » seulement : la fin est la valeur de l'élément, que la règle
   prefers-reduced-motion du haut de ce fichier atteint tout de suite), info-bulle qui suit le pointeur, légende cliquable. */
.ch{position:relative;user-select:none}
.ch svg{display:block;overflow:visible}
.ch-grid{stroke:var(--card-bd,var(--border));stroke-dasharray:3 5}
.ch-ax{fill:var(--dim,var(--text3));font-size:10.5px;font-variant-numeric:tabular-nums}
.ch-ax.on{fill:var(--text)}
.ch-cross{stroke:color-mix(in srgb,var(--accent) 55%,transparent);stroke-dasharray:3 4}
.ch-ln{fill:none;stroke:var(--c);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;filter:drop-shadow(0 4px 10px color-mix(in srgb,var(--c) 40%,transparent));animation:chDraw 1.2s var(--ease-out) both}
.ch-area{animation:chFade .9s .35s both}
.ch-pt{fill:var(--card-solid,var(--bg2));stroke:var(--c);stroke-width:2;transition:r var(--dur-1);animation:chFade .4s calc(.6s + var(--i,0) * 18ms) both}
.ch-pt.on{fill:var(--c);stroke:var(--card-solid,var(--bg2))}
.ch-bar{transform-box:fill-box;transform-origin:50% 100%;filter:drop-shadow(0 6px 12px color-mix(in srgb,var(--c) 30%,transparent));transition:opacity var(--dur-1);animation:chGrow .7s calc(var(--i,0) * 35ms) var(--ease-out) both}
.ch-bar.dim{opacity:.45}
.ch-band{fill:color-mix(in srgb,var(--accent) 8%,transparent)}
.ch-tip{position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,calc(-100% - 12px));display:flex;flex-direction:column;gap:2px;padding:8px 11px;border-radius:12px;background:var(--card-solid,var(--bg2));border:1px solid var(--card-bd,var(--border));box-shadow:0 14px 34px -12px rgba(0,0,0,.6);font-size:.76rem;white-space:nowrap;color:var(--muted)}
.ch-tip b{color:var(--text);font-size:.8rem;margin-bottom:2px}
.ch-tip span{display:flex;align-items:center;gap:6px}
.ch-tip i,.ch-lg i,.ch-dli i{width:9px;height:9px;border-radius:3px;flex-shrink:0;display:inline-block}
.ch-tip em{font-style:normal;font-weight:800;color:var(--text);margin-left:auto;padding-left:8px}
.ch-tip .ch-tot{border-top:1px solid var(--card-bd,var(--border));margin-top:3px;padding-top:3px}
.ch-lg{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;margin-top:6px}
.ch-lg button{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.76rem;font-weight:600;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:999px;padding:2px 10px;cursor:pointer;transition:color var(--dur-1),border-color var(--dur-1),opacity var(--dur-1)}
.ch-lg button:hover{color:var(--text);border-color:var(--card-bd,var(--border))}
.ch-lg button.off{opacity:.45;text-decoration:line-through}
/* interactions : outils en haut à droite (zoom, export), période en cours de sélection, survol venu d'un autre graphique */
.ch-tools{position:absolute;top:2px;right:2px;z-index:4;display:flex;gap:6px;opacity:0;transition:opacity var(--dur-1)}
.ch:hover .ch-tools,.ch-tools:focus-within,.ch-tools.on{opacity:1}
.ch-tool{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:.72rem;font-weight:700;color:var(--muted);background:var(--card-solid,var(--bg2));border:1px solid var(--card-bd,var(--border));border-radius:9px;padding:3px 8px;cursor:pointer}
.ch-tool:hover{color:var(--accent);border-color:var(--accent-line)}
.ch-brush{fill:color-mix(in srgb,var(--accent) 16%,transparent);stroke:var(--accent);stroke-dasharray:4 4}
.ch-cross.synced{stroke-dasharray:2 6;opacity:.7}
.ch-band.synced{opacity:.6}
.ch svg.pickable{cursor:pointer}
/* Pierre d'âme qui se remplit (lib/SoulStone.svelte) : progression d'une zone d'Ocre, scellée une fois terminée */
.ss{position:relative;display:inline-grid;place-items:center;width:var(--sz);height:calc(var(--sz) * 4 / 3);flex:none}
.ss svg{width:100%;height:100%;overflow:visible}
.ss-body{fill:color-mix(in srgb,var(--ss) 12%,rgba(10,10,20,.55))}
.ss-liq{transition:fill .3s}
.ss-liq2{fill:color-mix(in srgb,var(--ss) 45%,transparent);opacity:.6}
.ss-facet{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1}
.ss-rim{fill:none;stroke:color-mix(in srgb,var(--ss) 80%,#fff);stroke-width:2;stroke-linejoin:round}
.ss-spark{fill:#fff;filter:drop-shadow(0 0 4px #fff)}
.ss-rays path{stroke:var(--ss);stroke-width:2.5;stroke-linecap:round;opacity:.0}
.ss.sealed .ss-rim{stroke:#fff;filter:drop-shadow(0 0 5px var(--ss)) drop-shadow(0 0 10px var(--ss))}
.ss-lock{position:absolute;bottom:-4px;right:-4px;font-size:calc(var(--sz) * .26);color:#fff;background:var(--ss);border-radius:50%;padding:2px;box-shadow:0 0 8px var(--ss)}
@media (prefers-reduced-motion:no-preference){
  .ss-liq{animation:ssWave 2.6s linear infinite}
  .ss-liq2{animation:ssWave 3.8s linear infinite reverse}
  .ss-spark{animation:ssSpark .9s ease-out forwards}
  .ss.sealed .ss-rays path{animation:ssRay 2.8s ease-in-out infinite}
  .ss.sealed svg{animation:ssGlow 2.8s ease-in-out infinite}
  .ss-lock{animation:ssSeal .6s cubic-bezier(.2,1.6,.4,1) both}
}
.ss.sealed:not(:hover) .ss-rays path{opacity:.35}
@keyframes ssWave{to{transform:translateX(-20px)}}
@keyframes ssSpark{0%{r:2;opacity:1}100%{r:26;opacity:0}}
@keyframes ssRay{0%,100%{opacity:.15}50%{opacity:.6}}
@keyframes ssGlow{50%{filter:drop-shadow(0 0 8px var(--ss))}}
@keyframes ssSeal{from{transform:scale(0) rotate(-90deg)}to{transform:none}}
/* fragments sur la route (lib/fragments.js, Capture et fiche d'un monstre d'Ocre) : les fragments de Trésors qui tombent là où vit le monstre */
.frag-here{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;margin-top:6px;padding:6px 10px;border-radius:10px;font-size:.8rem;border:1px dashed color-mix(in srgb,var(--info,#58a6ff) 55%,transparent);background:color-mix(in srgb,var(--info,#58a6ff) 9%,transparent)}
.frag-here>i{color:var(--info,#58a6ff)}
.frag-here>span{color:var(--muted)}
.frag-here a{color:var(--text);text-decoration:none;padding:1px 8px;border-radius:9px;background:var(--surface2);border:1px solid var(--border)}
.frag-here a:hover{border-color:var(--info,#58a6ff)}
.frag-here a b{color:var(--info,#58a6ff)}
@media (prefers-reduced-motion:no-preference){.frag-here>i{animation:fragWiggle 2.4s ease-in-out infinite}}
@keyframes fragWiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-14deg)}90%{transform:rotate(12deg)}}
/* « Remonter le temps » (lib/TimeTravel.svelte) : un élément jour par jour d'après les sauvegardes */
.tt{margin-top:12px;border:1px solid var(--card-bd,var(--border));border-radius:12px;background:var(--surface2,var(--bg3));font-size:.82rem}
.tt summary{cursor:pointer;padding:8px 12px;font-weight:700;list-style:none;display:flex;align-items:center;gap:7px}
.tt summary::-webkit-details-marker{display:none}
.tt summary i{color:var(--accent)}
.tt summary small{font-weight:500;color:var(--muted)}
.tt[open] summary{border-bottom:1px solid var(--card-bd,var(--border))}
.tt-note{padding:8px 12px;color:var(--muted);font-size:.78rem;line-height:1.4}
.tt-scroll{overflow-x:auto;padding:6px 8px 0}
.tt-t{border-collapse:separate;border-spacing:3px;font-variant-numeric:tabular-nums}
.tt-t th{font-size:.7rem;font-weight:700;color:var(--muted);text-align:center;white-space:nowrap;padding:0 2px}
.tt-t tbody th{text-align:left;color:var(--pc);font-size:.78rem;padding-right:6px}
.tt-t td{text-align:center;padding:0;border-radius:7px}
.tt-t td span,.tt-t td button,.tt-t td b{display:block;min-width:38px;padding:3px 5px;border-radius:7px;font:inherit;font-size:.76rem}
.tt-t td span{color:var(--muted)}
.tt-t td button{border:1px dashed var(--accent-line);background:transparent;color:var(--text);cursor:pointer}
.tt-t td button:hover,.tt-t td.on button{background:var(--accent-soft);border-style:solid}
.tt-t td.ch{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--pc) 70%,transparent)}
.tt-t td.now b{color:var(--text);background:color-mix(in srgb,var(--pc) 16%,transparent)}
.tt-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px 10px}
.tt-pick span{flex:1;min-width:200px}
.ch svg{touch-action:pan-y}
.ch-tip-h{display:block;margin-top:3px;font-size:.68rem;color:var(--dim)}
/* détail du jour cliqué sous un graphique */
.day-pick{position:relative;display:flex;flex-direction:column;gap:3px;margin-top:10px;padding:10px 40px 10px 12px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent-line);font-size:.82rem;animation:gmDrop var(--dur-2) var(--ease-out) both}
.day-pick b{font-size:.86rem}
.day-pick button{position:absolute;top:6px;right:6px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;border:0;background:transparent;color:var(--muted);cursor:pointer}
.day-pick button:hover{color:var(--text)}
/* classement horizontal */
.ch-h{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}
.ch-hr{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;align-items:center;gap:10px;width:100%;padding:4px 8px;margin:0;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:.82rem;text-align:left;animation:chFade .5s calc(var(--i,0) * 50ms) both}
button.ch-hr{cursor:pointer}
button.ch-hr:hover{background:color-mix(in srgb,var(--c) 10%,transparent)}
.ch-hl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-ht{height:10px;border-radius:99px;background:color-mix(in srgb,var(--c) 12%,transparent);overflow:hidden}
.ch-ht i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 55%,transparent),var(--c));box-shadow:0 0 12px -2px var(--c);transform-origin:0 50%;animation:chGrowX .9s calc(.1s + var(--i,0) * 50ms) var(--ease-out) both}
.ch-hr em{font-style:normal;font-weight:800;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}
/* anneau */
.ch-d{display:flex;align-items:center;justify-content:center;gap:18px 26px;flex-wrap:wrap;min-height:100%}
.ch-dn{position:relative;flex-shrink:0}
.ch-dn svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ch-dbg{fill:none;stroke:var(--card-bd,var(--border))}
.ch-arc{fill:none;stroke:var(--c);cursor:pointer;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 45%,transparent));transition:stroke-width var(--dur-1);animation:chSweep 1.1s calc(var(--i,0) * 120ms) var(--ease-out) both}
.ch-dc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.ch-dc b{font-size:1.7rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.ch-dc small{font-size:.72rem;color:var(--muted);margin-top:3px}
.ch-dl{display:flex;flex-direction:column;gap:4px;min-width:150px}
.ch-dli{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:8px;padding:4px 8px;border-radius:10px;font-size:.82rem;cursor:default;transition:background var(--dur-1)}
.ch-dli.on{background:var(--card,var(--bg3))}
.ch-dli em{font-style:normal;font-weight:800}
.ch-dli small{color:var(--muted);min-width:3.5ch;text-align:right}
/* radar (Radar) */
.ch-radar{display:flex;flex-direction:column;align-items:center;gap:6px}
.ch-radar svg{overflow:visible;height:auto}
.ch-rgrid{fill:none;stroke:var(--card-bd,var(--border));stroke-width:.3}
.ch-raxis{stroke:var(--card-bd,var(--border));stroke-width:.3;transition:stroke var(--dur-1)}
.ch-raxis.on{stroke:var(--accent);stroke-width:.5}
.ch-rhit{stroke:transparent;stroke-width:6;cursor:default}
.ch-rlab{fill:var(--muted);font-size:3.6px;font-weight:600;cursor:default;transition:fill var(--dur-1)}
.ch-rlab.on{fill:var(--text)}
.ch-rpoly{fill:color-mix(in srgb,var(--c) 22%,transparent);stroke:var(--c);stroke-width:.7;stroke-linejoin:round;transform-origin:50px 50px;filter:drop-shadow(0 0 2px color-mix(in srgb,var(--c) 50%,transparent));animation:chRadar .9s calc(var(--i,0) * 150ms) var(--ease-spring,ease-out) both}
.ch-rpt{fill:var(--c);transition:r var(--dur-1);animation:chFade .4s calc(.6s + var(--i,0) * 150ms) both}
.ch-rinfo{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 12px;min-height:2.6em;font-size:.8rem;color:var(--muted);text-align:center}
.ch-rinfo b{color:var(--text)}
.ch-rinfo span{display:inline-flex;align-items:center;gap:5px}
.ch-rinfo i{width:9px;height:9px;border-radius:3px;display:inline-block}
.ch-rinfo em{font-style:normal;font-weight:800;color:var(--text)}
.ch-rinfo small{flex-basis:100%;color:var(--dim)}
@keyframes chRadar{from{transform:scale(0);opacity:0}}
/* anneau de progression (Gauge) */
.ch-gauge{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.ch-gn{position:relative;display:grid;place-items:center}
.ch-gn svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ch-gn b{position:relative;font-size:1.15rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ch-garc{stroke-linecap:round;cursor:default}
.ch-gl{margin-top:6px;font-size:.84rem;font-weight:700;color:var(--muted)}
.ch-gauge small{font-size:.72rem;color:var(--dim);font-variant-numeric:tabular-nums}
@keyframes chDraw{from{stroke-dashoffset:1}}
@keyframes chFade{from{opacity:0}}
@keyframes chGrow{from{transform:scaleY(0)}}
@keyframes chGrowX{from{transform:scaleX(0)}}
@keyframes chSweep{from{stroke-dasharray:0 1}}

/* « Votre aventure » (game.js) dans la grille de l'Accueil : titre et lien vers le profil en haut, anneau de niveau et
   barre d'XP, puis les quatre objectifs de la semaine côte à côte */
html[data-ui="v2"] .gm-home{margin-bottom:0;padding:18px 20px}
html[data-ui="v2"] .gm-home-in{grid-template-columns:minmax(0,1fr) auto;gap:16px 22px}
html[data-ui="v2"] .gm-home-h{grid-column:1/-1;margin:0!important}
html[data-ui="v2"] .gm-home-h .go{margin-left:auto;display:inline-flex;align-items:center;gap:3px;font:inherit;font-size:.78rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--accent);background:none;border:0;padding:0;cursor:pointer}
html[data-ui="v2"] .gm-home-h .go:hover{text-decoration:underline}
html[data-ui="v2"] .gm-home-id{gap:22px}
html[data-ui="v2"] .gm-home-id h3{font-size:1.4rem;font-weight:800;letter-spacing:-.01em;margin:0 0 10px}
html[data-ui="v2"] .gm-home-mid{flex-direction:column}
html[data-ui="v2"] .gm-home-q{grid-column:1/-1}
html[data-ui="v2"] .gm-qs{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
html[data-ui="v2"] .gm-q{border-radius:14px;background:var(--card-solid,var(--bg2));border-color:var(--card-bd);overflow:hidden;transition:border-color var(--dur-1),transform var(--dur-2) var(--ease-out)}
@media (hover:hover){html[data-ui="v2"] .gm-q:hover{transform:translateY(-2px)}}
@media (max-width:760px){html[data-ui="v2"] .gm-home-in{grid-template-columns:1fr}html[data-ui="v2"] .gm-home-mid{flex-direction:row}}
html[data-ui="v2"] .gm-xpbar{height:10px;border-radius:99px;background:var(--card-bd,var(--border))}
html[data-ui="v2"] :is(.gm-xpbar i,.gm-qp u,.gm-sb u,.gm-rb u,.gm-bp u){background:linear-gradient(90deg,var(--accent),var(--accent2,var(--accent)))}
@media (prefers-reduced-motion:no-preference){html[data-ui="v2"] .gm-xpbar i{background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%),linear-gradient(90deg,var(--accent),var(--accent2,var(--accent)))}}
/* ═══ Visite des nouveautés (web/src/lib/site/tour.js) : projecteur autour de l'élément, bulle d'explication ═══ */
.tour{position:fixed;inset:0;z-index:980;pointer-events:none}
.tour-spot{position:fixed;border-radius:16px;box-shadow:0 0 0 9999px rgba(5,4,8,.66),0 0 0 2px var(--accent),0 0 30px 4px color-mix(in srgb,var(--accent) 45%,transparent);transition:left .45s var(--ease-out),top .45s var(--ease-out),width .45s var(--ease-out),height .45s var(--ease-out)}
.tour-tip{position:fixed;pointer-events:auto;width:min(360px,calc(100vw - 24px));display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:16px;background:var(--card-solid,var(--bg2));border:1px solid var(--accent-line);box-shadow:0 24px 60px -18px rgba(0,0,0,.8);transition:left .45s var(--ease-out),top .45s var(--ease-out)}
.tour-tip small{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.tour-tip b{font-size:1.02rem}
.tour-tip p{margin:0;font-size:.86rem;color:var(--muted);line-height:1.45}
.tour-act{display:flex;align-items:center;gap:8px;margin-top:6px}
.tour-act span{flex:1}
.tour-act button{font:inherit;font-size:.8rem;font-weight:700;border-radius:10px;padding:5px 12px;cursor:pointer;border:1px solid var(--card-bd,var(--border));background:transparent;color:var(--muted)}
.tour-act button[data-tour="skip"]{border:0;padding:5px 0;text-decoration:underline}
.tour-act .btn{color:var(--btn-fg);background:var(--btn-bg);border-color:var(--btn-bd)}
.notes-tour{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:2px 0 12px;font:inherit;font-size:.86rem;font-weight:700;padding:9px 12px;border-radius:12px;border:1px dashed var(--accent-line);background:var(--accent-soft);color:var(--accent);cursor:pointer}
.notes-tour:hover{border-style:solid}
@media print{.tour{display:none!important}}

/* ═══ Transitions « morph » (lib/motion.js : morph ; Router : liens data-morph) ═══
   L'élément cliqué se transforme en sa destination : carte de monstre -> fiche (Ocre), nom de donjon -> titre de la fiche
   (Grimoire), tuile de zone -> carte (Ocre -> Carte). D'une page à l'autre, le grand titre glisse jusqu'au suivant. */
@media (prefers-reduced-motion:no-preference){
  html[data-ui="v2"] .hero h1{view-transition-name:gm-title}
  ::view-transition-group(gm-morph){animation-duration:.48s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
  ::view-transition-group(gm-title){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
  ::view-transition-old(gm-morph),::view-transition-new(gm-morph){height:100%;object-fit:contain}
  ::view-transition-old(gm-title),::view-transition-new(gm-title){height:100%;width:auto}
}

/* ═══ Fond vivant (web/src/lib/site/sky.js) : ciel selon l'heure (data-sky), particules selon l'Almanax (data-alm) ═══
   Thèmes sombres seulement : les clairs gardent leur fond. Les halos du haut prennent la teinte du moment. */
html[data-ui="v2"][data-theme^="dark"]{--sky-a:color-mix(in srgb,var(--accent2) 13%,transparent);--sky-b:color-mix(in srgb,var(--accent) 9%,transparent);--sky-c:transparent}
html[data-ui="v2"][data-theme^="dark"][data-sky="aube"]{--sky-a:rgba(255,140,170,.13);--sky-b:rgba(255,190,120,.10);--sky-c:rgba(140,120,255,.05)}
html[data-ui="v2"][data-theme^="dark"][data-sky="jour"]{--sky-a:color-mix(in srgb,var(--accent) 14%,transparent);--sky-b:rgba(120,190,255,.07);--sky-c:transparent}
html[data-ui="v2"][data-theme^="dark"][data-sky="crepuscule"]{--sky-a:rgba(255,110,60,.16);--sky-b:rgba(200,80,160,.09);--sky-c:rgba(255,170,60,.05)}
html[data-ui="v2"][data-theme^="dark"][data-sky="nuit"]{--sky-a:rgba(110,120,255,.11);--sky-b:rgba(80,200,255,.06);--sky-c:rgba(150,110,255,.05)}
html[data-ui="v2"][data-theme^="dark"] body::before{background:radial-gradient(1100px 520px at 88% -12%,var(--sky-a),transparent 62%),radial-gradient(900px 420px at 0% -4%,var(--sky-b),transparent 62%),radial-gradient(1200px 600px at 50% 120%,var(--sky-c),transparent 60%);transition:background 2s}
.sky-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;--pt:color-mix(in srgb,var(--accent) 70%,#fff)}
html[data-alm="xp"] .sky-fx{--pt:#b9a3ff}
html[data-alm="drop"] .sky-fx{--pt:var(--gm-gold)}
html[data-alm="metier"] .sky-fx{--pt:#7fe08a}
html[data-theme^="light"] .sky-fx{display:none}
.sky-fx i{position:absolute;left:var(--x);bottom:-12px;width:var(--s);height:var(--s);border-radius:50%;background:var(--pt);box-shadow:0 0 8px 1px var(--pt);opacity:0;animation:skyRise var(--d) var(--w) linear infinite}
@keyframes skyRise{0%{transform:translate(0,0);opacity:0}10%{opacity:.55}50%{transform:translate(var(--sw),-55vh)}90%{opacity:.35}100%{transform:translate(0,-110vh);opacity:0}}
@media (prefers-reduced-motion:reduce){.sky-fx{display:none}}
@media print{.sky-fx{display:none}}
/* habillages de saison (sky.js, data-season) : le ciel prend la couleur de la fête, et quelques éléments flottent
   discrètement derrière les cartes (Halloween : chauves-souris, fantômes, citrouilles, araignées ; Noël : neige ;
   Nouvel An : étincelles et confettis) */
html[data-ui="v2"][data-theme^="dark"][data-season="halloween"]{--sky-a:rgba(255,122,30,.15);--sky-b:rgba(140,70,210,.13);--sky-c:rgba(255,140,40,.07)}
html[data-ui="v2"][data-theme^="dark"][data-season="noel"]{--sky-a:rgba(150,210,255,.12);--sky-b:rgba(220,60,70,.08);--sky-c:rgba(120,220,150,.05)}
html[data-ui="v2"][data-theme^="dark"][data-season="nouvelan"]{--sky-a:rgba(255,205,90,.14);--sky-b:rgba(170,120,255,.10);--sky-c:rgba(255,215,120,.06)}
html[data-season="halloween"] .sky-fx{--pt:#ff9a3c}
html[data-season="noel"] .sky-fx{--pt:#e6f6ff}
html[data-season="nouvelan"] .sky-fx{--pt:var(--gm-gold,#f5c84a)}
.season-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;--se-a:.42}
html[data-theme^="light"] .season-fx{--se-a:.3}
.season-fx i{position:absolute;left:var(--x);top:var(--y);font-size:var(--z);line-height:1;opacity:var(--se-a);will-change:transform}
html[data-season="halloween"] .season-fx .ti-bat{left:-4%;color:#a98ee0;animation:seBat var(--d) var(--w) linear infinite}
html[data-season="halloween"][data-theme^="light"] .season-fx .ti-bat{color:#4b2f78}
html[data-season="halloween"] .season-fx .ti-ghost-2{color:#efeaff;animation:seFloat calc(var(--d) * .6) var(--w) ease-in-out infinite alternate}
html[data-season="halloween"][data-theme^="light"] .season-fx .ti-ghost-2{color:#7a6aa8}
html[data-season="halloween"] .season-fx .ti-pumpkin-scary{top:auto;bottom:10px;color:#ff8a1f;filter:drop-shadow(0 0 6px rgba(255,138,31,.7));animation:seGlow 3.2s var(--w) ease-in-out infinite alternate}
html[data-season="halloween"] .season-fx .ti-spider{top:-2px;color:#c9b8f0;animation:seDrop var(--d) var(--w) ease-in-out infinite}
html[data-season="halloween"][data-theme^="light"] .season-fx .ti-spider{color:#3d2a5c}
html[data-season="halloween"] .season-fx .ti-spider::after{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:100vh;background:currentColor;opacity:.5}
html[data-season="noel"] .season-fx .ti-snowflake{top:-6%;color:#e6f6ff;animation:seFall var(--d) var(--w) linear infinite}
html[data-season="noel"][data-theme^="light"] .season-fx .ti-snowflake{color:#6c9cc4}
html[data-season="noel"] .season-fx .ti-christmas-tree{top:auto;bottom:8px;color:#4cc26a;filter:drop-shadow(0 0 6px rgba(255,214,90,.6));animation:seGlow 2.6s var(--w) ease-in-out infinite alternate}
html[data-season="nouvelan"] .season-fx .ti-sparkles{color:var(--gm-gold,#f5c84a);animation:seTwinkle calc(var(--d) * .25) var(--w) ease-in-out infinite}
html[data-season="nouvelan"] .season-fx .ti-confetti{top:-6%;color:#c9a7ff;animation:seFall var(--d) var(--w) linear infinite}
@keyframes seBat{0%{transform:translate(0,0) scaleY(1)}12%{transform:translate(14vw,-2vh) scaleY(.7)}25%{transform:translate(28vw,1vh) scaleY(1)}50%{transform:translate(56vw,-3vh) scaleY(.7)}75%{transform:translate(84vw,2vh) scaleY(1)}100%{transform:translate(112vw,0) scaleY(.7)}}
@keyframes seFloat{0%{transform:translate(0,0)}50%{transform:translate(18px,-22px)}100%{transform:translate(-12px,8px)}}
@keyframes seGlow{0%{opacity:calc(var(--se-a) * .6)}100%{opacity:calc(var(--se-a) * 1.5)}}
@keyframes seDrop{0%,100%{transform:translateY(0)}45%,60%{transform:translateY(26vh)}}
@keyframes seFall{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(24px,55vh) rotate(180deg)}100%{transform:translate(-10px,112vh) rotate(360deg)}}
@keyframes seTwinkle{0%,100%{transform:scale(.6);opacity:0}50%{transform:scale(1.15);opacity:var(--se-a)}}
@media (prefers-reduced-motion:reduce){.season-fx{display:none}}
@media print{.season-fx{display:none}}

/* ═══ Célébrations : scène au centre de l'écran (succès, zone, série…), montée de niveau, âmes qui s'envolent ═══ */
.gm-card.gm-scene{position:fixed;inset:0;z-index:955;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--pc,var(--accent)) 18%,rgba(0,0,0,.55)),rgba(0,0,0,.72) 70%);border:0;border-radius:0;box-shadow:none;transform:none;opacity:0;transition:opacity .3s;cursor:pointer}
.gm-scene.in{opacity:1}
.gm-scene.out{opacity:0}
.gm-sc{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;max-width:min(460px,92vw)}
.gm-rays{position:absolute;left:50%;top:70px;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--gm-gold) 34%,transparent) 0 6deg,transparent 6deg 18deg);-webkit-mask-image:radial-gradient(circle,#000 0,#000 18%,transparent 66%);mask-image:radial-gradient(circle,#000 0,#000 18%,transparent 66%);opacity:.85}
.gm-medal{position:relative;display:grid;place-items:center;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6d6 0,var(--gm-gold) 30%,color-mix(in srgb,var(--gm-gold) 55%,#5a3a00) 100%);box-shadow:0 0 0 6px color-mix(in srgb,var(--gm-gold) 35%,transparent),0 0 60px -6px var(--gm-gold),inset 0 -8px 18px rgba(0,0,0,.28)}
.gm-medal::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--gm-gold);opacity:0}
.gm-scene .gm-ic{width:auto;height:auto;background:none;color:#3a2600;font-size:4rem;border-radius:0}
.gm-scene .gm-tx{align-items:center;gap:4px;font-size:1rem;color:#fff}
.gm-scene .gm-tx b{font-size:1.5rem;font-weight:800;letter-spacing:-.01em;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.gm-scene .gm-tx small{font-size:.95rem;color:rgba(255,255,255,.78)}
.gm-sc-more{font-size:.76rem;font-weight:700;color:rgba(255,255,255,.6)}
@media (prefers-reduced-motion:no-preference){
  .gm-scene.in .gm-rays{animation:gmSpin 14s linear infinite,chFade .6s both}
  .gm-scene.in .gm-medal{animation:gmStrike .75s cubic-bezier(.2,1.4,.4,1) both}
  .gm-scene.in .gm-medal::after{animation:gmShock .9s .3s ease-out both}
  .gm-scene.in .gm-tx{animation:gmRiseIn .5s .35s var(--ease-out) both}
  .gm-lvl.in .gm-rays{animation:gmSpin 14s linear infinite,chFade .6s both}
  .gm-lvl.in .gm-lvl-n{animation:gmStrike .8s .1s cubic-bezier(.2,1.4,.4,1) both}
}
@keyframes gmSpin{to{transform:rotate(360deg)}}
@keyframes gmStrike{0%{transform:scale(2.8) rotate(-24deg);opacity:0}55%{transform:scale(.88) rotate(4deg);opacity:1}80%{transform:scale(1.06) rotate(-1deg)}100%{transform:none}}
@keyframes gmShock{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.9)}}
@keyframes gmRiseIn{from{opacity:0;transform:translateY(14px)}}
/* montée de niveau : mêmes rayons derrière le chiffre */
html[data-ui="v2"] .gm-lvl-box{position:relative;overflow:visible;background:var(--card-solid,var(--bg2));border-color:color-mix(in srgb,var(--gm-gold) 45%,transparent);box-shadow:0 0 0 6px color-mix(in srgb,var(--gm-gold) 18%,transparent),0 30px 80px -20px rgba(0,0,0,.8)}
.gm-lvl-box .gm-rays{top:96px;z-index:-1}
.gm-lvl-box>:not(.gm-rays){position:relative}
/* âme qui vole jusqu'à l'anneau de niveau ; l'anneau la « reçoit » */
.gm-soul{position:fixed;z-index:975;width:16px;height:16px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 40% 35%,#fff 0,var(--pc,var(--accent)) 45%,transparent 72%);box-shadow:0 0 14px 4px color-mix(in srgb,var(--pc,var(--accent)) 70%,transparent),0 0 30px 8px color-mix(in srgb,var(--pc,var(--accent)) 30%,transparent)}
.gm-chip.gm-catch{animation:gmCatch .7s var(--ease-spring,ease-out)}
@keyframes gmCatch{0%{transform:scale(1)}35%{transform:scale(1.28);filter:drop-shadow(0 0 10px var(--gm-gold))}100%{transform:none}}

/* fenêtre profil : lien vers la page Profil complète */
.gm-p-page{align-self:flex-start;margin-top:2px;font-size:.8rem}
/* anneaux de niveau : ils se remplissent en tournant (propriété enregistrée, animable) */
@property --gm-p{syntax:"<number>";inherits:false;initial-value:0}
html[data-ui="v2"] .gm-ring{--gm-p:var(--p,0);background:conic-gradient(from 0deg,var(--pc,var(--accent)) calc(var(--gm-p)*1%),var(--card-bd,var(--border)) 0);transition:--gm-p var(--dur-3) var(--ease-out);animation:gmRingIn 1.2s var(--ease-out) both}
html[data-ui="v2"] .gm-ring::before{background:var(--card-solid,var(--bg2))}
@keyframes gmRingIn{from{--gm-p:0}}

/* jauges arrondies, qui se remplissent depuis la gauche quand elles apparaissent */
html[data-ui="v2"] :is(.bar,.grp-bar,.qz-bar,.zt-bar),html[data-ui="v2"] :is(.bar i,.grp-bar i,.qz-bar i,.zt-bar i){border-radius:99px}
html[data-ui="v2"] :is(.bar i,.grp-bar i,.qz-bar i,.zt-bar i,.pc-bar){transform-origin:0 50%;animation:chGrowX .9s .15s var(--ease-out) backwards}