/* GalereLand — système « Trait » (refonte front du 28/09/2026, docs/galereland-frontend-refonte.md § 10).

   Le site reprend le trait du logo : contour d'encre, aplats francs, ombre portée DURE (jamais floue), coins en
   bulle. Chaque couleur a un rôle — rouge = rubis et danger, orange = aura, bleu = information, vert = acquis,
   « accent » = l'action (jaune par défaut, remplacé par la couleur que le viewer choisit dans ses réglages).
   Pas de dégradé décoratif, pas de lueur, pas de flou.

   Chargé juste après style.css : il redéfinit les variables historiques (--bg-*, --text-*, --accent…) pour que
   tout l'existant parle déjà la nouvelle langue, puis pose les composants t-* et la coquille (en-tête, navigation,
   calques). Les règles historiques de la coquille ont été retirées de style.css : une seule source par composant. */

/* ------------------------------------------------------------------ jetons */
:root{
  --t-encre:#16131f;
  --t-rouge:#e3262f; --t-bleu:#2a3cf0; --t-jaune:#ffc61a; --t-aura:#ff7a1f; --t-vert:#179b57;
  --t-trait:2.5px; --t-trait-fin:1.5px;
  --t-r:14px; --t-r-s:9px; --t-r-pill:999px;
  --t-titre:'Lilita One','Figtree',system-ui,sans-serif;
  --t-corps:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --t-dur:.16s; --t-ease:cubic-bezier(.2,.8,.2,1);
  --accent:var(--t-jaune); --accent-ink:var(--t-encre);
  --header-h:clamp(58px,6.6vh,72px); --mobile-nav-h:52px;
  /* l'air sous les boutons de la barre du bas (02/10/2026, demande d'Aymen : « trop collée au bas du téléphone ») : la
     zone de la barre d'accueil de l'iPhone + 8 px, et jamais moins de 18 px — sans viewport-fit=cover, iOS déclare
     souvent cette zone à 0 (application installée) et la barre d'accueil passait sur les libellés */
  --nav-relief:max(calc(env(safe-area-inset-bottom) + 8px),18px);
  /* ce que la barre du bas occupe vraiment : la barre + cet air */
  --mobile-nav-tot:calc(var(--mobile-nav-h) + var(--nav-relief));

  /* variables historiques, alignées sur le système */
  --font-display:var(--t-titre); --font-body:var(--t-corps);
  --radius-sm:var(--t-r-s); --radius-md:var(--t-r-s); --radius-lg:var(--t-r); --radius-xl:18px;
  --transition:var(--t-dur) var(--t-ease);
  --rubis-red:var(--t-rouge);
  --rubis-1:var(--accent); --rubis-2:var(--accent); --rubis-3:var(--accent);
  --gradient-rubis:linear-gradient(var(--accent),var(--accent));
  --gradient-accent:linear-gradient(var(--accent),var(--accent));
}
/* Papier (clair) */
[data-theme="light"]{
  color-scheme:light;
  --t-fond:#fbf3e4; --t-fond-2:#f3e5c8; --t-carte:#fffaf1; --t-carte-2:#fff1d6;
  --t-fond-0:#fbf6ef; --t-fond-2-0:#f2e6ce; --t-carte-0:#fffcf8; --t-carte-2-0:#fff4df;
  --t-texte:#16131f; --t-texte-2:#5b5366; --t-texte-3:#655c70; /* 3 : ≥ 4,5:1 sur tous les papiers, teintés compris (28/09, it. 2) */
  --t-bord:#16131f; --t-bord-doux:rgba(22,19,31,.16); --t-ombre-c:#16131f;
  --t-voile:rgba(22,19,31,.55);
  --t-aura-texte:#c2500a; /* l'orange de l'aura EN TEXTE sur papier : #ff7a1f n'y fait que 2,6:1 (4,5:1 ici) */
}
/* Nuit (sombre) : les contours restent d'encre, plus sombres que les surfaces */
[data-theme="dark"]{
  color-scheme:dark;
  --t-fond:#1b1834; --t-fond-2:#141128; --t-carte:#26224a; --t-carte-2:#302b5c;
  --t-fond-0:#09022b; --t-fond-2-0:#060220; --t-carte-0:#130643; --t-carte-2-0:#1d1057;
  --t-texte:#fbf3e4; --t-texte-2:#cbc3de; --t-texte-3:#a39cbd;
  --t-bord:#07060f; --t-bord-doux:rgba(251,243,228,.13); --t-ombre-c:#07060f;
  --t-voile:rgba(7,6,15,.66);
  --t-aura-texte:#ff8a3a;
}
/* La couleur d'accent teinte TOUT le site, légèrement (itération 2) : les quatre surfaces (fond, fond-2, carte,
   carte-2) sont un mélange oklab de leur papier de base (--t-*-0) et de l'accent, à dose fixe et faible (4 à 7 % en
   clair ; 9 à 12 % en sombre, où la même dose se voit moins).
   Les papiers de base sont calculés pour que l'accent PAR DÉFAUT (jaune) redonne exactement les papiers d'origine :
   sans choix du viewer, rien ne bouge au pixel près. Avec une autre couleur, le papier se refroidit (bleu, cyan),
   rosit (rouge, rose), verdit à peine (vert)… En-tête, cartes, fenêtres, menus, champs, notifications suivent,
   puisqu'ils sont tous peints avec ces jetons (et les variables historiques qui y renvoient). L'encre, les contours
   et les textes ne sont PAS teintés : les contrastes restent ceux du système (texte-3 ≥ 4,5:1 vérifié sur les
   16 papiers teintés, 8 couleurs × 2 thèmes). Navigateur sans color-mix : papiers d'origine. */
@supports (color:color-mix(in oklab,red,blue)){
  [data-theme="light"]{
    --t-fond:color-mix(in oklab,var(--t-fond-0),var(--accent) 7%); --t-fond-2:color-mix(in oklab,var(--t-fond-2-0),var(--accent) 5%);
    --t-carte:color-mix(in oklab,var(--t-carte-0),var(--accent) 4%); --t-carte-2:color-mix(in oklab,var(--t-carte-2-0),var(--accent) 6%);
  }
  [data-theme="dark"]{
    --t-fond:color-mix(in oklab,var(--t-fond-0),var(--accent) 11%); --t-fond-2:color-mix(in oklab,var(--t-fond-2-0),var(--accent) 9%);
    --t-carte:color-mix(in oklab,var(--t-carte-0),var(--accent) 12%); --t-carte-2:color-mix(in oklab,var(--t-carte-2-0),var(--accent) 12%);
  }
}
[data-theme="light"],[data-theme="dark"]{
  --bg-primary:var(--t-fond); --bg-secondary:var(--t-fond-2);
  --bg-card:var(--t-carte); --bg-card-hover:var(--t-carte-2);
  --bg-input:var(--t-carte); --bg-deep:var(--t-fond-2);
  --border:var(--t-bord-doux); --border-hover:var(--t-bord);
  --text-primary:var(--t-texte); --text-secondary:var(--t-texte-2); --text-muted:var(--t-texte-3);
  --accent-hover:var(--accent); --accent-glow:transparent;
  --success:var(--t-vert); --success-bg:rgba(23,155,87,.14);
  --error:var(--t-rouge); --error-bg:rgba(227,38,47,.13);
  --warning:#d99400; --warning-bg:rgba(255,198,26,.18);
  --header-bg:var(--t-fond); --overlay:var(--t-voile);
  --shadow-sm:2px 2px 0 var(--t-ombre-c); --shadow-md:4px 4px 0 var(--t-ombre-c); --shadow-lg:6px 6px 0 var(--t-ombre-c);
  --glow-purple:0 0 0 transparent; --glow-red:0 0 0 transparent;
}

/* ------------------------------------------------------------------ base */
/* Lilita One n'existe qu'en une graisse : sans ceci, les « font-weight:800 » historiques la font épaissir en faux gras.
   Seule la synthèse de GRAISSE est coupée (Figtree n'a pas de fichier italique : l'italique reste synthétisé). */
html{font-synthesis-weight:none}
body{font-family:var(--t-corps);font-size:15px;line-height:1.45;color:var(--t-texte);background:var(--t-fond)}
h1,h2,h3,h4{font-family:var(--t-titre);font-weight:400;letter-spacing:.005em}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2.5px solid var(--t-texte);outline-offset:2px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--t-bord-doux);border-radius:9px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--t-texte-3);background-clip:padding-box}
.icon-title{filter:none}
.num{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ composants */
/* Bouton : l'appui s'enfonce (l'ombre disparaît), le survol monte d'un pixel. */
.t-btn,.btn-primary,.btn-secondary{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;
  border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-s);background:var(--accent);color:var(--accent-ink);
  font-family:var(--t-titre);font-size:17px;font-weight:400;line-height:1;letter-spacing:.01em;text-decoration:none;cursor:pointer;
  box-shadow:2px 2px 0 var(--t-ombre-c);transition:transform var(--t-dur) var(--t-ease),box-shadow var(--t-dur) var(--t-ease),background var(--t-dur);
  -webkit-tap-highlight-color:transparent;overflow:visible}
.btn-primary::after{content:none}
@media (hover:hover){.t-btn:hover,.btn-primary:hover:not(:disabled),.btn-secondary:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--t-ombre-c)}}
.t-btn:active,.btn-primary:active:not(:disabled),.btn-secondary:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--t-ombre-c)}
.t-btn--sec,.btn-secondary{background:var(--t-carte);color:var(--t-texte)}
.t-btn--danger{background:var(--t-rouge);color:#fff}
.t-btn--info{background:var(--t-bleu);color:#fff}
.t-btn--succes{background:var(--t-vert);color:#fff}
.t-btn--grand{min-height:54px;padding:0 26px;font-size:20px}
.t-btn--petit{min-height:34px;padding:0 12px;font-size:15px}
.t-btn--plein{width:100%}
.t-btn:disabled,.t-btn[aria-disabled="true"],.btn-primary:disabled{
  background:var(--t-fond-2);color:var(--t-texte-3);border-style:dashed;box-shadow:none;transform:none;cursor:not-allowed;opacity:1}
.t-btn .icon,.btn-primary .icon,.btn-secondary .icon{width:18px;height:18px}

/* Pastille : état ou catégorie */
.t-pastille{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border:2px solid var(--t-bord);border-radius:var(--t-r-pill);
  background:var(--t-carte);color:var(--t-texte);font-family:var(--t-corps);font-size:12px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.t-pastille--live{background:var(--t-rouge);color:#fff}
.t-pastille--live::before{content:'';width:7px;height:7px;border-radius:50%;background:#fff}
.t-pastille--doux{background:var(--t-fond-2);color:var(--t-texte-2);border-color:var(--t-bord-doux)}
.t-pastille--accent{background:var(--accent);color:var(--accent-ink)}

/* Carte */
.t-carte{background:var(--t-carte);border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);box-shadow:4px 4px 0 var(--t-ombre-c)}
.t-carte--fin{border-width:var(--t-trait-fin);box-shadow:2px 2px 0 var(--t-ombre-c)}
.t-carte--plate{box-shadow:none}
a.t-carte,button.t-carte,.t-carte--cliquable{cursor:pointer;transition:transform var(--t-dur) var(--t-ease),box-shadow var(--t-dur) var(--t-ease)}
@media (hover:hover){a.t-carte:hover,button.t-carte:hover,.t-carte--cliquable:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--t-ombre-c)}}

/* Champ */
.t-champ{width:100%;min-height:46px;padding:10px 14px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-s);background:var(--t-carte);
  color:var(--t-texte);font:500 16px/1.35 var(--t-corps);transition:box-shadow var(--t-dur)}
.t-champ::placeholder{color:var(--t-texte-3)}
.t-champ:focus{outline:none;box-shadow:0 0 0 3px var(--accent)}
textarea.t-champ{min-height:110px;resize:vertical}

/* Montant : icône de monnaie + nombre en lettre ronde */
.t-prix{display:inline-flex;align-items:center;gap:6px;font-family:var(--t-titre);font-size:20px;font-variant-numeric:tabular-nums;white-space:nowrap}
.t-prix img,.t-prix svg{width:1.05em;height:1.05em;object-fit:contain;flex:none}

/* Jauge */
.t-jauge{position:relative;height:14px;border:2px solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--t-fond-2);overflow:hidden}
.t-jauge > i{display:block;height:100%;background:var(--t-bleu);border-right:2px solid var(--t-bord);transition:width .5s var(--t-ease)}
.t-jauge > i[style*="width:0"],.t-jauge > i[style*="width: 0"]{border-right:0}

/* Bulle de dialogue (titres qui parlent, retours) */
.t-bulle{position:relative;display:inline-block;padding:10px 16px;border:var(--t-trait) solid var(--t-bord);border-radius:16px;background:var(--t-carte);
  font-family:var(--t-titre);font-size:21px;line-height:1.1;box-shadow:2px 2px 0 var(--t-ombre-c)}
.t-bulle::after{content:'';position:absolute;left:24px;bottom:-11px;width:16px;height:16px;background:inherit;border-right:var(--t-trait) solid var(--t-bord);
  border-bottom:var(--t-trait) solid var(--t-bord);transform:skewX(-25deg) rotate(45deg)}

/* Bandeau d'information (état de la page) */
.t-bandeau{display:flex;align-items:center;gap:12px;padding:12px 16px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);background:var(--t-bleu);color:#fff;
  font-weight:600;box-shadow:3px 3px 0 var(--t-ombre-c)}
.t-bandeau b{font-family:var(--t-titre);font-weight:400;font-size:19px}
.t-bandeau .icon{width:22px;height:22px;flex:none}
.t-bandeau--attention{background:var(--t-jaune);color:var(--t-encre)}
.t-bandeau--succes{background:var(--t-vert)}
.t-bandeau--doux{background:var(--t-carte);color:var(--t-texte)}

/* Titre de page : le mot de la page, grand, et ce qu'on y fait */
.t-titre-page{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px 22px;margin:0 0 22px}
.t-titre-page h1{font-size:clamp(38px,5.4vw,56px);line-height:.95}
.t-titre-page p{max-width:560px;color:var(--t-texte-2);font-size:17px;font-weight:600;line-height:1.35;padding-bottom:4px}

/* Liste dense (QG, flux, historiques) : trait fin, lignes plutôt que cartes */
.t-ligne{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--t-bord-doux)}
.t-ligne:last-child{border-bottom:0}

/* État vide */
.t-vide{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px 20px;text-align:center;color:var(--t-texte-2)}
.t-vide h3{font-size:24px;color:var(--t-texte)}
.t-vide p{max-width:420px;font-weight:500}

/* Chargement */
.t-squelette{background:linear-gradient(90deg,var(--t-fond-2) 0 40%,var(--t-carte-2) 50%,var(--t-fond-2) 60% 100%);background-size:250% 100%;animation:t-squelette 1.3s linear infinite;border-radius:var(--t-r-s)}
@keyframes t-squelette{from{background-position:100% 0}to{background-position:-150% 0}}

/* Motion */
@keyframes t-tampon{0%{transform:scale(.9);opacity:0}60%{transform:scale(1.03);opacity:1}100%{transform:scale(1)}}
@keyframes t-entree{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.t-tampon{animation:t-tampon .26s var(--t-ease) both}
.t-entree{animation:t-entree .22s var(--t-ease) both}
@media (prefers-reduced-motion:reduce){
  .t-tampon,.t-entree{animation:none}
  .t-btn,.btn-primary,.btn-secondary,.t-carte,.nav-link,.wallet-slot{transition:none}
}

/* ------------------------------------------------------------------ coquille : en-tête */
.main-header{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--header-h);display:flex;align-items:center;gap:18px;padding:0 20px;
  background:var(--t-fond);border-bottom:var(--t-trait) solid var(--t-bord);white-space:nowrap}
.header-left{display:flex;align-items:center;flex:none}
.logo-link{display:flex;align-items:center;gap:9px;color:var(--t-texte);text-decoration:none}
.logo-link .logo-img{height:calc(var(--header-h) * .62);width:auto;object-fit:contain;transition:transform var(--t-dur) var(--t-ease)}
@media (hover:hover){.logo-link:hover .logo-img{transform:rotate(-6deg)}}
.logo-wordmark{font-family:var(--t-titre);font-size:24px;line-height:1;letter-spacing:.005em}
.logo-wordmark .lw-g{color:var(--t-texte)}
.logo-wordmark .lw-l{color:var(--t-rouge)}

.main-nav{position:relative;display:flex;align-items:center;gap:4px;margin-left:6px;min-width:0}
.nav-link{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border:var(--t-trait) solid transparent;border-radius:var(--t-r-pill);
  background:none;color:var(--t-texte);font-family:var(--t-titre);font-size:17px;line-height:1;cursor:pointer;
  transition:background var(--t-dur),border-color var(--t-dur),color .2s .06s,transform var(--t-dur) var(--t-ease),box-shadow var(--t-dur) var(--t-ease)}
.nav-link .icon-nav{display:none}
.nav-link:hover{background:var(--t-carte-2);border-color:var(--t-bord-doux)}
.nav-link.active{background:var(--accent);color:var(--accent-ink);border-color:var(--t-bord);box-shadow:2px 2px 0 var(--t-ombre-c)}
.nav-ink{display:none}
/* Itération 2 — l'indicateur de la nav (app.js, bloc « nav : trait et pastille »). Une fois le script prêt
   (.main-nav.nav-ind), l'onglet actif n'a plus de fond à lui : c'est la PASTILLE, un seul élément posé derrière lui,
   qui glisse d'un onglet à l'autre. Au survol, un TRAIT d'encre file sous le libellé survolé et trois traits
   d'emphase se dessinent à son coin ; au clic, ce trait GRANDIT en pastille sur place pendant que l'ancienne
   s'efface. Le PICTOGRAMME de la page (celui de la barre du bas) apparaît en pastille au coin de l'onglet survolé,
   posé par-dessus (rien ne se décale), et s'efface quand le trait devient pastille. Rien sans souris (le clavier a le
   même trait au focus) ; mouvement réduit / mode Performance : la
   pastille change de place sans glisser, le trait sans transition. */
.main-nav.nav-ind .nav-link.active,.main-nav.nav-ind .nav-link:hover{background:none;border-color:transparent;box-shadow:none}
.main-nav.nav-ind .nav-ink{display:block;position:absolute;z-index:0;left:0;top:0;width:0;height:3px;box-sizing:border-box;border:0 solid var(--t-bord);border-radius:3px;
  background:var(--t-texte);opacity:0;pointer-events:none;transition:left .26s var(--t-ease),width .26s var(--t-ease),opacity .14s linear}
.main-nav.nav-ind .nav-ink.on{opacity:1}
.main-nav.nav-ind .nav-ink.morph{opacity:1;border-width:var(--t-trait);border-radius:var(--t-r-pill);background:var(--accent);box-shadow:2px 2px 0 var(--t-ombre-c);
  transition:left .3s var(--t-ease),top .3s var(--t-ease),width .3s var(--t-ease),height .3s var(--t-ease),border-width .3s,border-radius .3s,background-color .3s,box-shadow .3s}
.nav-pastille{position:absolute;z-index:0;left:0;top:0;width:0;height:38px;box-sizing:border-box;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-pill);
  background:var(--accent);box-shadow:2px 2px 0 var(--t-ombre-c);pointer-events:none;
  transition:left .32s var(--t-ease),width .32s var(--t-ease),opacity .18s linear,transform .18s var(--t-ease)}
.nav-pastille.part{opacity:0;transform:scale(.9)}
.nav-picto{position:absolute;z-index:2;left:0;top:0;display:grid;place-items:center;width:22px;height:22px;box-sizing:border-box;border:2px solid var(--t-bord);
  border-radius:50%;background:var(--t-carte);color:var(--t-texte);box-shadow:1.5px 1.5px 0 var(--t-ombre-c);pointer-events:none;
  opacity:0;transform:scale(.35) rotate(-25deg);transition:opacity .12s linear,transform .24s cubic-bezier(.3,1.6,.5,1)}
.nav-picto svg{display:block;width:13px;height:13px}
.nav-picto.on{opacity:1;transform:rotate(-8deg)}
.nav-sans-anim,.nav-sans-anim.nav-ink,.nav-sans-anim.nav-pastille{transition:none!important}
@media (prefers-reduced-motion:reduce){
  .main-nav.nav-ind .nav-ink,.nav-pastille{transition:none}
  .nav-picto{transition:opacity .12s linear;transform:rotate(-8deg)}
}
body.low-perf .main-nav.nav-ind .nav-ink,body.low-perf .nav-pastille{transition:none}
body.low-perf .nav-picto{transition:none;transform:rotate(-8deg)}

.header-right{display:flex;align-items:center;gap:10px;margin-left:auto}
/* Itération 2 — la nav VRAIMENT centrée sur la fenêtre : trois colonnes, les deux côtés à 1fr chacun (donc égaux)
   tant que leur contenu y tient. Si un côté ne tient plus (compte + « En direct » + gros soldes), sa colonne prend
   la place qu'il lui faut (minmax(max-content, 1fr)) et la nav se décale d'autant, sans jamais passer dessous.
   Sous 1101 px la barre est trop pleine pour centrer quoi que ce soit : on garde la file de gauche à droite. */
@media (min-width:1101px){
  .main-header{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr)}
  .header-left{justify-self:start}
  .main-nav{justify-self:center;margin-left:0}
  .header-right{justify-self:end;margin-left:0}
}
.header-live{display:none;align-items:center;gap:6px;height:28px;padding:0 11px;border:2px solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--t-rouge);
  color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.header-live.is-live{display:inline-flex}
.header-live i{width:7px;height:7px;border-radius:50%;background:#fff;animation:t-battement 1.6s ease-in-out infinite}
@keyframes t-battement{0%,100%{opacity:1}50%{opacity:.35}}
.hdr-icon-btn,.pwa-header-install-btn{position:relative;flex:none;display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:var(--t-trait) solid var(--t-bord);
  border-radius:50%;background:var(--t-carte);color:var(--t-texte);cursor:pointer;box-shadow:2px 2px 0 var(--t-ombre-c);
  transition:transform var(--t-dur) var(--t-ease),box-shadow var(--t-dur) var(--t-ease)}
@media (hover:hover){.hdr-icon-btn:hover,.pwa-header-install-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--t-ombre-c)}}
.hdr-icon-btn:active,.pwa-header-install-btn:active{transform:translate(2px,2px);box-shadow:none}
.hdr-icon-btn svg,.hdr-icon-btn .icon,.pwa-header-install-btn svg{width:20px;height:20px}
.wallet{display:flex;align-items:center;gap:8px}
.wallet-slot{position:relative;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 13px 0 6px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-pill);
  background:var(--t-carte);color:var(--t-texte);font-family:var(--t-titre);font-size:18px;line-height:1;font-variant-numeric:tabular-nums;cursor:pointer;
  box-shadow:2px 2px 0 var(--t-ombre-c);transition:transform var(--t-dur) var(--t-ease),box-shadow var(--t-dur) var(--t-ease)}
@media (hover:hover){.wallet-slot:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--t-ombre-c)}}
.wallet-slot:active{transform:translate(2px,2px);box-shadow:none}
.wallet-slot .aura-icon-sm,.wallet-slot .rubis-icon-sm{flex:none;width:26px;height:26px;object-fit:contain;filter:none;opacity:1}
/* Itération 2 : la <source> du <picture> (display:contents) devenait un élément flex de largeur nulle et ajoutait un
   écart de 7 px avant l'icône d'aura ; l'icône de rubis, elle, prenait sa largeur naturelle (15 px) et collait au
   bord. Les deux icônes ont maintenant la même boîte, centrée : même marge, même écart jusqu'au nombre. */
.wallet-slot source{display:none}
.wallet-slot img.rubis-icon-sm{width:22px}
/* L'avatar : .user-menu était un bloc, donc une boîte de LIGNE ; le bouton se posait sur sa ligne de base et
   l'avatar sortait 3,4 px plus haut que les autres boutons de la barre. Une boîte flex centrée n'a pas de ligne. */
.user-menu{position:relative;display:flex;align-items:center}
.user-btn{display:flex;align-items:center;padding:0;border:0;background:none;cursor:pointer;border-radius:50%}
.user-cog{display:grid;place-items:center}
.user-avatar{display:block;width:40px;height:40px;border-radius:50%;border:var(--t-trait) solid var(--t-bord);object-fit:cover;background:var(--t-fond-2);box-shadow:2px 2px 0 var(--t-ombre-c)}
.user-name,.user-chevron{display:none}
.user-dropdown{position:absolute;top:calc(100% + 12px);right:-4px;z-index:210;width:260px;padding:8px;background:var(--t-carte);border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);
  box-shadow:4px 4px 0 var(--t-ombre-c);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--t-dur),transform var(--t-dur) var(--t-ease),visibility 0s linear var(--t-dur)}
.user-dropdown.show,.user-dropdown.open,.user-menu.open .user-dropdown{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dropdown-user-header{display:flex;align-items:center;gap:10px;padding:8px 8px 10px}
.dropdown-avatar{width:40px;height:40px;border-radius:50%;border:2px solid var(--t-bord);object-fit:cover}
.dropdown-user-info{display:flex;flex-direction:column;min-width:0}
.dropdown-display-name{font-family:var(--t-titre);font-size:18px;line-height:1.1}
.dropdown-username{font-size:13px;color:var(--t-texte-3)}
.dropdown-divider{height:2px;margin:6px 4px;background:var(--t-bord-doux);border-radius:2px}
.dropdown-link{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 10px;border:0;border-radius:var(--t-r-s);background:none;color:var(--t-texte);
  font:600 15px/1 var(--t-corps);text-decoration:none;text-align:left;cursor:pointer}
.dropdown-link:hover{background:var(--t-carte-2)}
.dropdown-link .icon{width:19px;height:19px;color:var(--t-texte-2)}
.logout-link{color:var(--t-rouge)}.logout-link .icon{color:var(--t-rouge)}
.dd-notif-badge{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border:2px solid var(--t-bord);
  border-radius:var(--t-r-pill);background:var(--t-rouge);color:#fff;font-size:12px;font-weight:800}

/* ------------------------------------------------------------------ calques : notifications (Communication) et historique des push */
.notif-panel{position:fixed;top:calc(var(--header-h) + 10px);right:14px;z-index:210;width:390px;max-height:calc(100vh - var(--header-h) - 24px);overflow-y:auto;
  background:var(--t-carte);border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);box-shadow:5px 5px 0 var(--t-ombre-c)}
.notif-panel.hidden{display:none}
.notif-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--t-carte);
  border-bottom:2px solid var(--t-bord-doux);font-family:var(--t-titre);font-size:20px}
.notif-header button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.notif-header button:hover{background:var(--t-carte-2)}
.notif-section{padding:12px 14px;border-bottom:2px solid var(--t-bord-doux)}
.notif-section:last-child{border:0}
.notif-section-title{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-family:var(--t-titre);font-size:17px;color:var(--t-texte)}
.notif-section-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border:2px solid var(--t-bord);border-radius:var(--t-r-pill);
  background:var(--accent);color:var(--accent-ink);font:800 12px/1 var(--t-corps)}
.notif-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 20px;text-align:center;color:var(--t-texte-2);font-weight:600;line-height:1.45}
.notif-empty svg{width:34px;height:34px;color:var(--t-texte-3)}
.nt--info{--nt:var(--t-bleu)}.nt--success{--nt:var(--t-vert)}.nt--warn{--nt:#d99400}.nt--alert{--nt:var(--t-rouge)}.nt--event{--nt:#7b3fe4}
.notif-card{position:relative;margin-bottom:10px;padding:12px 13px;background:var(--t-carte);border:2px solid var(--t-bord);border-left-width:6px;border-left-color:var(--nt,var(--t-bord));
  border-radius:var(--t-r-s);box-shadow:2px 2px 0 var(--t-ombre-c)}
.notif-card:last-child{margin-bottom:0}
.notif-card::before{content:none}
.notif-card.is-unread{background:var(--t-carte-2)}
.notif-card-head{display:flex;align-items:flex-start;gap:10px}
.notif-card-icon{flex:none;display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--t-bord);border-radius:50%;background:var(--nt,var(--accent));color:#fff}
.notif-card-icon svg{width:16px;height:16px}
.notif-card-heading{flex:1;min-width:0}
.notif-card-title{margin:1px 0 0;font-family:var(--t-titre);font-size:17px;line-height:1.2;color:var(--t-texte);word-break:break-word}
.notif-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:5px}
.notif-card-time{font-size:12px;color:var(--t-texte-3)}
.notif-card-close{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:none;color:var(--t-texte-3);font-size:18px;line-height:1;cursor:pointer}
.notif-card-close:hover{background:var(--t-fond-2);color:var(--t-texte)}
.notif-card-body{margin-top:8px;font-size:14px;line-height:1.5;color:var(--t-texte-2);white-space:pre-wrap;word-break:break-word}
.notif-card-head + .notif-card-body{margin-left:42px}
.notif-chip{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border:1.5px solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--t-carte);
  color:var(--t-texte-2);font-size:11px;font-weight:800}
.notif-chip svg{width:11px;height:11px}
.notif-chip--muted{border-color:var(--t-bord-doux)}
.notif-chip--live{background:var(--t-rouge);color:#fff}
.notif-chip--count{font-variant-numeric:tabular-nums}
.notif-card-actions{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.notif-act{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 16px;border:2px solid var(--t-bord);border-radius:var(--t-r-s);
  font:400 16px/1 var(--t-titre);cursor:pointer;box-shadow:2px 2px 0 var(--t-ombre-c);transition:transform var(--t-dur) var(--t-ease),box-shadow var(--t-dur) var(--t-ease)}
.notif-act:active{transform:translate(2px,2px);box-shadow:none}
.notif-act--main{background:var(--accent);color:var(--accent-ink)}
.notif-act--ghost{background:var(--t-carte);color:var(--t-texte)}
.notif-act:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.notif-poll-desc{margin:8px 0 0 42px;font-size:13px;line-height:1.5;color:var(--t-texte-3);white-space:pre-wrap}
.notif-poll-opts{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.notif-opt{position:relative;display:flex;align-items:center;gap:9px;width:100%;min-height:42px;padding:8px 12px;overflow:hidden;background:var(--t-carte);
  border:2px solid var(--t-bord);border-radius:var(--t-r-s);color:var(--t-texte);font:600 14px/1.3 var(--t-corps);text-align:left;cursor:pointer}
.notif-opt:hover{background:var(--t-carte-2)}
.notif-opt.is-selected,.notif-opt.is-mine{box-shadow:inset 0 0 0 2px var(--accent)}
.notif-opt[disabled]{cursor:default}
.notif-opt-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);opacity:.35;transition:width .5s var(--t-ease)}
.notif-opt > *:not(.notif-opt-fill){position:relative;z-index:1}
.notif-opt-mark{flex:none;display:grid;place-items:center;width:18px;height:18px;border:2px solid var(--t-bord);border-radius:50%;background:var(--t-carte)}
.notif-opt-mark--box{border-radius:5px}
.notif-opt-mark svg{width:10px;height:10px;opacity:0}
.notif-opt.is-selected .notif-opt-mark,.notif-opt.is-mine .notif-opt-mark{background:var(--accent);color:var(--accent-ink)}
.notif-opt.is-selected .notif-opt-mark svg,.notif-opt.is-mine .notif-opt-mark svg{opacity:1}
.notif-opt-emoji{flex:none;font-size:16px;line-height:1}
.notif-opt-label{flex:1;min-width:0;word-break:break-word}
.notif-opt-pct{flex:none;font-family:var(--t-titre);font-size:16px;font-variant-numeric:tabular-nums}
.notif-opt-votes{flex:none;font-size:12px;color:var(--t-texte-3);font-variant-numeric:tabular-nums}
.notif-poll-custom{width:100%;margin-top:7px;padding:9px 12px;border:2px solid var(--t-bord);border-radius:var(--t-r-s);background:var(--t-carte);color:var(--t-texte);font:500 14px var(--t-corps)}
.notif-poll-custom:focus{outline:none;box-shadow:0 0 0 3px var(--accent)}
.notif-poll-custom--inline{margin:-2px 0 2px 26px;width:calc(100% - 26px)}
.notif-poll-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}
.notif-poll-stat{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--t-texte-3);font-variant-numeric:tabular-nums}
.notif-poll-stat svg{flex:none;width:13px;height:13px}
.notif-poll-hint{margin-top:8px;font-size:12px;color:var(--t-texte-3)}
.notif-poll-mine{display:flex;align-items:center;gap:8px;margin-top:10px;padding:9px 11px;border:2px dashed var(--t-bord-doux);border-radius:var(--t-r-s);font-size:13px;color:var(--t-texte-2)}
.notif-poll-mine b{color:var(--t-texte)}
.notif-poll-mine svg{flex:none;width:15px;height:15px}

/* Annonce forcée (fenêtre centrée) et bandeaux sous l'en-tête */
.notif-ov{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:18px;background:var(--t-voile);animation:t-entree .2s var(--t-ease)}
.notif-ov-box{width:100%;max-width:460px;max-height:calc(100vh - 40px);overflow-y:auto;padding:4px;background:var(--t-carte);border:3px solid var(--t-bord);border-radius:18px;
  box-shadow:7px 7px 0 var(--t-ombre-c);animation:t-tampon .26s var(--t-ease)}
.notif-ov-box .notif-card{margin:0;border:0;border-left:0;box-shadow:none;background:none;padding:14px}
.notif-banners{position:fixed;top:var(--header-h);left:0;right:0;z-index:420;display:flex;flex-direction:column;pointer-events:none}
.notif-banner{position:relative;pointer-events:auto;display:flex;align-items:center;gap:10px;padding:9px 16px;background:var(--nt,var(--t-bleu));color:#fff;
  border-bottom:var(--t-trait) solid var(--t-bord);animation:t-entree .24s var(--t-ease)}
.notif-banner-icon{flex:none;display:flex}
.notif-banner-icon svg{width:18px;height:18px}
.notif-banner-text{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.notif-banner-text b{font-weight:800}
.notif-banner .notif-act{height:32px;padding:0 12px;font-size:15px}
.notif-admin-msg{padding:12px;border:2px dashed var(--t-bord-doux);border-radius:var(--t-r-s);background:var(--t-fond-2)}
.notif-opt.is-lead .notif-opt-fill{opacity:.55}

/* ------------------------------------------------------------------ barre de navigation mobile */
html.clavier-natif .mobile-nav{visibility:hidden;pointer-events:none}
html.clavier-natif body.is-live-landscape .chat-box[data-mode="live"]{padding-bottom:var(--clavier-h,0px)!important;background:var(--t-carte)}
html.clavier-natif body.live-fs .chat-box[data-mode="live"]{padding-bottom:var(--clavier-h,0px)!important;background:var(--t-carte)}
/* le trajet : seulement pendant que le clavier bouge (html.clavier-anime), au rythme de --clavier-dur / --clavier-ease */
html.clavier-anime .chat-box[data-mode="live"]{transition:top var(--clavier-dur,.3s) var(--clavier-ease,ease-out) var(--clavier-avance,0ms),bottom var(--clavier-dur,.3s) var(--clavier-ease,ease-out) var(--clavier-avance,0ms),padding-bottom var(--clavier-dur,.3s) var(--clavier-ease,ease-out) var(--clavier-avance,0ms)}
.mobile-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:200;height:var(--mobile-nav-tot);padding-bottom:var(--nav-relief);
  background:var(--t-carte);border-top:var(--t-trait) solid var(--t-bord)}
.mobile-nav-link{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 2px;border:0;
  border-left:var(--t-trait) solid transparent;border-right:var(--t-trait) solid transparent;background:none;color:var(--t-texte-2);
  font:700 10.5px/1.1 var(--t-corps);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mobile-nav-link .icon-nav{width:21px;height:21px}
.mobile-nav-link span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-nav-link.active{background:var(--accent);color:var(--accent-ink);border-color:var(--t-bord)}
/* la barre est surélevée (--nav-relief) : l'onglet actif ne touche plus le bas de l'écran, il pend sous le trait du
   haut et se ferme par un bord arrondi (02/10/2026) */
.mobile-nav-link.active{border-bottom:var(--t-trait) solid var(--t-bord);border-radius:0 0 14px 14px}
.mobile-nav-link.active:first-child{border-bottom-left-radius:0}
.mobile-nav-link.active:last-child{border-bottom-right-radius:0}
.mobile-nav-link.active:first-child{border-left-color:transparent}
.mobile-nav-link.active:last-child{border-right-color:transparent}
.mobile-nav-link:active{background:var(--t-carte-2)}

/* Chat : les « /me » de Twitch (
ACTION…) se lisent en italique, dans la couleur du pseudo, comme sur Twitch */
.cc-action .cc-text{font-style:italic;color:var(--cc-act)}

/* ------------------------------------------------------------------ calques communs */
.toast-container{position:fixed;top:calc(var(--header-h) + 12px);right:16px;z-index:600;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:380px;padding:12px 16px;background:var(--t-carte);color:var(--t-texte);
  border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);box-shadow:4px 4px 0 var(--t-ombre-c);font-size:15px;font-weight:600;line-height:1.35;
  transition:transform .22s var(--t-ease),opacity .22s}
.toast-success{border-left:8px solid var(--t-vert)}.toast-error{border-left:8px solid var(--t-rouge)}.toast-warning{border-left:8px solid var(--t-jaune)}.toast-info{border-left:8px solid var(--t-bleu)}

.modal-overlay{background:var(--t-voile);-webkit-backdrop-filter:none;backdrop-filter:none}
.modal-card{background:var(--t-carte);color:var(--t-texte);border:3px solid var(--t-bord);border-radius:18px;box-shadow:7px 7px 0 var(--t-ombre-c)}
.modal-close{top:12px;right:12px;width:38px;height:38px;border:var(--t-trait) solid var(--t-bord);border-radius:50%;background:var(--t-carte);color:var(--t-texte);box-shadow:2px 2px 0 var(--t-ombre-c)}
.modal-close:hover{background:var(--t-rouge);color:#fff}
.modal-body h3{font-size:26px;line-height:1.05}

/* Réglages */
.settings-body h3{font-size:28px}
.setting-row{padding:14px 0;border-bottom:2px solid var(--t-bord-doux)}
.setting-label{font-weight:700;font-size:16px}
.setting-desc{font-size:13px;color:var(--t-texte-3)}
.toggle-switch{width:52px;height:30px}
.toggle-slider{background:var(--t-fond-2);border:var(--t-trait) solid var(--t-bord);border-radius:999px}
.toggle-slider::before{left:3px;bottom:3px;width:19px;height:19px;background:var(--t-carte);border:2px solid var(--t-bord);box-sizing:border-box}
.toggle-switch input:checked + .toggle-slider{background:var(--accent);border-color:var(--t-bord)}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(22px);background:var(--t-carte)}
.toggle-switch input:focus-visible + .toggle-slider{outline:2.5px solid var(--t-texte);outline-offset:2px}
.theme-mode-seg{display:inline-flex;padding:3px;border:var(--t-trait) solid var(--t-bord);border-radius:999px;background:var(--t-fond-2)}
.theme-mode-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border:0;border-radius:999px;background:none;color:var(--t-texte-2);font:700 14px var(--t-corps);cursor:pointer}
.theme-mode-btn.active{background:var(--t-carte);color:var(--t-texte);box-shadow:0 0 0 2px var(--t-bord)}
.theme-color-row{display:flex;gap:8px;flex-wrap:wrap}
.theme-color-btn{position:relative;width:32px;height:32px;padding:0;border:var(--t-trait) solid var(--t-bord);border-radius:50%;cursor:pointer;box-shadow:2px 2px 0 var(--t-ombre-c);transition:transform var(--t-dur) var(--t-ease)}
@media (hover:hover){.theme-color-btn:hover{transform:translateY(-2px)}}
.theme-color-btn.active{box-shadow:0 0 0 3px var(--t-carte),0 0 0 5.5px var(--t-bord)}
.theme-color-btn.active::after{content:'';position:absolute;inset:0;margin:auto;width:9px;height:9px;border-radius:50%;background:var(--t-encre);border:2px solid #fff}

/* Bandeau cookies : une ligne discrète, jamais sur la navigation */
.cookie-banner{position:fixed;left:16px;right:auto;bottom:16px;z-index:500;display:flex;align-items:center;gap:14px;max-width:min(520px,calc(100vw - 32px));padding:10px 10px 10px 16px;
  background:var(--t-carte);color:var(--t-texte);border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);box-shadow:4px 4px 0 var(--t-ombre-c)}
.cookie-text{display:flex;align-items:center;gap:8px;flex:1;font-size:14px;font-weight:600;color:var(--t-texte-2)}
.btn-cookie-accept{flex:none;min-height:38px;padding:0 16px;border:2px solid var(--t-bord);border-radius:var(--t-r-s);background:var(--accent);color:var(--accent-ink);
  font:400 16px/1 var(--t-titre);cursor:pointer;box-shadow:2px 2px 0 var(--t-ombre-c)}
@media (hover:hover){.btn-cookie-accept:hover{transform:none;box-shadow:2px 2px 0 var(--t-ombre-c)}}

/* ------------------------------------------------------------------ live : lecteur, chat, hub (boîtes globales)
   Les positions et les modes (live / mini / audio / hidden) restent pilotés par app.js et kg-mini.js : ici, l'habillage. */
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--t-texte-3);flex:none}
.live-dot-on{background:var(--t-rouge);animation:t-battement 1.6s ease-in-out infinite}
/* Le lecteur reste un lecteur (itération 2) : un rectangle vidéo net, sans contour d'encre ni ombre dure — la DA
   s'exprime AUTOUR (la scène animée, la barre du direct, les tuiles), pas sur le cadre de la vidéo. */
.stream-box[data-mode="live"]{background:#000;border:0;border-radius:0;box-shadow:none}
.stream-box[data-mode="mini"],.stream-box[data-mode="audio"]{background:var(--t-carte);border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);box-shadow:5px 5px 0 var(--t-ombre-c)}
.stream-bar{padding:7px 8px 7px 12px;background:var(--t-carte);border-bottom:var(--t-trait) solid var(--t-bord)}
.stream-bar-title{gap:7px;font-family:var(--t-titre);font-size:16px}
.stream-bar-channel{color:var(--t-texte);font-weight:400}
.sbtn{width:30px;height:30px;border:2px solid var(--t-bord);border-radius:50%;background:var(--t-carte);color:var(--t-texte)}
.sbtn:hover{background:var(--accent);color:var(--accent-ink)}
.offline-overlay{background:#000}
.mini-restore-btn{border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--t-carte);color:var(--t-texte);font-family:var(--t-titre);font-size:16px;
  font-weight:400;box-shadow:3px 3px 0 var(--t-ombre-c)}
.mini-restore-btn:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--t-bord);box-shadow:3px 3px 0 var(--t-ombre-c)}

/* Chat : dense (trait fin), lisible (15 px), le pseudo en couleur Twitch, l'heure en retrait */
.custom-chat{background:var(--t-carte)}
.cc-messages{padding:8px 10px;gap:1px}
.cc-msg{padding:4px 8px;border-radius:7px;font-size:15px;line-height:1.42}
.cc-msg:hover{background:var(--t-carte-2)}
.cc-name{font-size:15px;font-weight:800}
.cc-time{font-size:11px;color:var(--t-texte-3);opacity:1}
.cc-text{color:var(--t-texte)}
.cc-msg.cc-mention{background:var(--t-carte-2);border-left:4px solid var(--accent);padding-left:6px}
.cc-reply-ctx{border-left:2px solid var(--t-bord-doux);color:var(--t-texte-3);font-size:12px}
.cc-reply-btn{border:1.5px solid var(--t-bord);border-radius:50%;background:var(--t-carte);color:var(--t-texte)}
.cc-reply-btn:hover{background:var(--accent);color:var(--accent-ink)}
.cc-system-msg{background:var(--t-fond-2);border:0;border-left:4px solid var(--t-bord-doux);border-radius:7px;color:var(--t-texte-2);font-size:14px}
.cc-system-msg.cc-event-msg{background:var(--accent);color:var(--accent-ink);border-left-color:var(--t-bord);font-weight:700}
.cc-msg-highlight{animation:t-surligne 1.4s ease}
@keyframes t-surligne{0%{background:var(--accent)}100%{background:transparent}}
.cc-load-more{border-bottom:2px solid var(--t-bord-doux)}
.cc-load-btn{font-weight:800;color:var(--t-texte)}
.cc-scroll-bottom{border:2px solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:13px;padding:5px 14px;
  box-shadow:2px 2px 0 var(--t-ombre-c)}
.cc-reply-bar{background:var(--t-fond-2);border-top:2px solid var(--t-bord-doux);color:var(--t-texte-2);font-size:13px}
.cc-input-wrap{gap:7px;padding:10px;border-top:2px solid var(--t-bord-doux);align-items:center}
.cc-input{padding:9px 14px;min-height:24px;background:var(--t-fond);border:2px solid var(--t-bord);border-radius:20px;color:var(--t-texte);font-size:15px}
.cc-input:focus{border-color:var(--t-bord);box-shadow:0 0 0 3px var(--accent)}
.cc-input:empty::before{color:var(--t-texte-3)}
.cc-send{width:40px;height:40px;border:2px solid var(--t-bord);border-radius:50%;background:var(--accent);color:var(--accent-ink);box-shadow:2px 2px 0 var(--t-ombre-c)}
@media (hover:hover){.cc-send:hover{transform:translate(-1px,-1px)}}
.cc-send:active{transform:translate(2px,2px);box-shadow:none}
/* Live, itération 3 : message en vol (posé, pas encore confirmé par Twitch), message refusé, état du salon, décompte du
   mode lent sur le bouton d'envoi, pastille du décalage de l'image (app.js, KGChat et « Délai du direct »). */
.cc-msg.cc-msg-envoi{opacity:.55}
.cc-msg.cc-msg-refuse{background:color-mix(in srgb,var(--t-rouge) 10%,transparent);border-radius:7px}
.cc-msg-refuse .cc-text{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--t-rouge) 60%,transparent)}
.cc-refus{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:5px;font-size:13px;font-weight:700;color:var(--t-rouge)}
.cc-refus span{flex:1 1 180px;min-width:0}
[data-theme="dark"] .cc-refus{color:#ff8a90}   /* le rouge du système n'atteint pas 4,5:1 sur la nuit teintée de rouge */
.cc-refus button{display:inline-grid;place-items:center;min-height:28px;padding:0 11px;border:2px solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--t-carte);color:var(--t-texte);font:800 12.5px/1 var(--t-corps);cursor:pointer}
.cc-refus .cc-refus-x{width:28px;padding:0;border-radius:50%;font-size:17px}
.cc-send.cc-send-attente{position:relative;background:var(--t-fond-2);color:transparent;box-shadow:none}
.cc-send.cc-send-attente::after{content:attr(data-attente);position:absolute;inset:0;display:grid;place-items:center;color:var(--t-texte);font:400 16px/1 var(--t-titre)}
.live-delai,.live-retard{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:2px solid var(--t-bord-doux);border-radius:var(--t-r-pill);background:var(--t-carte);
  color:var(--t-texte-2);font:800 12px/1 var(--t-corps);white-space:nowrap;cursor:pointer;min-width:0}
.live-delai[hidden],.live-retard[hidden]{display:none}
.live-delai span{overflow:hidden;text-overflow:ellipsis}
.live-delai.on{border-color:var(--t-bord);color:var(--t-texte)}
.live-delai b{font-family:var(--t-titre);font-weight:400;font-size:14px;color:var(--t-texte)}
.live-retard{border-color:var(--t-bord);background:var(--accent);color:var(--accent-ink);box-shadow:2px 2px 0 var(--t-ombre-c)}
@media (max-width:420px){.live-delai span{display:none}}
.mli-top .live-delai,.mli-top .live-retard{margin-left:auto;flex-shrink:0;height:26px}
.mli-top .live-delai + .live-retard{margin-left:0}
.cc-emote-btn,.cc-cp-btn{width:38px;height:38px;border-radius:50%;color:var(--t-texte-2)}
.cc-emote-btn:hover,.cc-cp-btn:hover{background:var(--t-carte-2);color:var(--t-texte)}
/* Le bouton du Hub est l'entrée des achats pendant le direct : il se voit */
.cc-cp-btn#ccHubBtn{border:2px solid var(--t-bord);background:var(--accent);color:var(--accent-ink);box-shadow:2px 2px 0 var(--t-ombre-c)}
@media (hover:hover){.cc-cp-btn#ccHubBtn:hover{background:var(--accent);transform:translate(-1px,-1px)}}
.cc-mention-list,.cc-emote-picker,.cc-context-menu{background:var(--t-carte);border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);box-shadow:4px 4px 0 var(--t-ombre-c)}
.cc-emote-picker{border-radius:var(--t-r) var(--t-r) 0 0}
.cc-ep-header,.cc-ep-tabs{border-bottom:2px solid var(--t-bord-doux)}
.cc-ep-search{min-height:36px;padding:6px 12px;background:var(--t-fond);border:2px solid var(--t-bord);border-radius:20px;color:var(--t-texte);font-size:14px}
.cc-ep-tab{font-size:13px;font-weight:700;color:var(--t-texte-2);border-radius:var(--t-r-pill)}
.cc-ep-tab.active{background:var(--accent);color:var(--accent-ink)}
.cc-ep-emote:hover{background:var(--t-carte-2)}
.cc-ep-group-header{font-size:12px;font-weight:800;color:var(--t-texte-3);border-bottom:2px solid var(--t-bord-doux)}
.cc-mention-item:hover,.cc-mention-item.active{background:var(--t-carte-2)}

/* Hub du live : panneau au-dessus du chat (bureau), feuille par le bas (mobile) */
.cc-hub{background:var(--t-fond);border:3px solid var(--t-bord);border-radius:18px;box-shadow:6px 6px 0 var(--t-ombre-c);animation:t-entree .18s var(--t-ease)}
.cc-hub-head{padding:10px 12px 10px 16px;background:var(--accent);color:var(--accent-ink);border-bottom:var(--t-trait) solid var(--t-bord)}
.cc-hub-title{gap:8px;font-family:var(--t-titre);font-size:21px;font-weight:400;color:inherit}
.cc-hub-close{width:34px;height:34px;border:2px solid var(--t-bord);border-radius:50%;background:var(--t-carte);color:var(--t-texte);font-size:20px;display:grid;place-items:center;padding:0}
.cc-hub-main{padding:12px}
.cc-hub-side{width:200px;background:var(--t-carte);border-left:var(--t-trait) solid var(--t-bord)}
.cc-hub-sec,.cc-hub-sec-evt,.cc-hub-sec-obj{background:var(--t-carte);border:2px solid var(--t-bord);border-radius:var(--t-r);box-shadow:3px 3px 0 var(--t-ombre-c);padding:10px 10px 12px}
.cc-hub-sec-title{font-family:var(--t-titre);font-size:18px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--t-texte)}
.cc-hub-sec-evt .cc-hub-sec-title>span,.cc-hub-sec-obj .cc-hub-sec-title>span{color:var(--t-texte)}
.cc-hub-sec-link{font:800 13px var(--t-corps);color:var(--t-texte);text-decoration:underline;text-underline-offset:3px}
.cc-hub-obj,.cc-hub-evt-card{border:2px solid var(--t-bord);border-radius:var(--t-r-s)}
@media (hover:hover){.cc-hub-obj:hover,.cc-hub-evt-card:hover{border-color:var(--t-bord);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--t-ombre-c)}}
.cc-hub-obj-pct{font-family:var(--t-titre);font-weight:400}
.cc-hub-obj-bar{height:6px;background:rgba(0,0,0,.45)}
.cc-hub-obj-bar>span,.cc-hub-dt-bar>span{background:var(--accent)}
.cc-hub-empty{font-weight:600;color:var(--t-texte-3)}
.cc-hub-side-title{font-family:var(--t-titre);font-size:17px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--t-texte)}
.cc-hub-qb-btn,.cc-hub-ct-presets button{border:2px solid var(--t-bord);border-radius:var(--t-r-s);background:var(--t-carte);color:var(--t-texte);font-family:var(--t-titre);
  font-size:17px;font-weight:400;box-shadow:2px 2px 0 var(--t-ombre-c)}
.cc-hub-qb-btn:hover,.cc-hub-ct-presets button:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--t-bord)}
.cc-hub-qb-custom input,.cc-hub-ct-row input{background:var(--t-carte);border:2px solid var(--t-bord);border-radius:var(--t-r-s);color:var(--t-texte)}
.cc-hub-qb-go{border:2px solid var(--t-bord);border-radius:var(--t-r-s);background:var(--accent);color:var(--accent-ink);font-family:var(--t-titre);font-weight:400}
.cc-hub-back{font-weight:800;color:var(--t-texte-2)}
.cc-hub-dt-banner{border:2px solid var(--t-bord);border-radius:var(--t-r-s)}
.cc-hub-dt-title{font-weight:400;font-size:22px}
.cc-hub-dt-pct{font-weight:400;font-size:40px}
.cc-hub-dt-bar{height:12px;border:2px solid var(--t-bord);border-radius:999px;background:var(--t-fond-2)}

/* Pronostic : tout est dans predictions.css (système Trait, 28/09/2026). */

/* Barre du direct sous le lecteur, en mobile */
.mobile-live-info{background:var(--t-carte);border-top:0;border-bottom:2px solid var(--t-bord)}
.mobile-live-info .live-badge.live-on{color:var(--t-rouge)}
.mobile-live-info .live-viewers{color:var(--t-rouge)}

/* ------------------------------------------------------------------ responsive de la coquille */
@media (max-width:1180px){
  .logo-wordmark{display:none}
  .nav-link{padding:0 10px;font-size:16px}
}
@media (min-width:901px) and (max-width:1020px){
  .header-live{display:none!important}
  .main-nav{gap:0}
}
/* L'en-tête qui tient (04/10/2026, arrivée de la Box) : crans posés sur .main-header par assets/js/kg-nav-fit.js,
   SEULEMENT quand logo, onglets et boutons ne tiennent plus sur la ligne (mesuré : l'équipe débordait déjà à 1280 px).
   Cumulatifs : le cran 3 porte aussi nav-c1 et nav-c2. */
.main-header.nav-c1 .main-nav{gap:1px}
.main-header.nav-c1 .nav-link{padding:0 9px}
.main-header.nav-c2 .logo-wordmark{display:none}
.main-header.nav-c3 .nav-link{padding:0 7px;font-size:16px}
.main-header.nav-c4{gap:10px;padding:0 12px}
.main-header.nav-c4 .nav-link{padding:0 5px;font-size:15px}
.main-header.nav-c4 .header-right{gap:6px}
@media (max-width:900px){
  :root{--header-h:56px}
  .main-header{gap:10px;padding:0 12px;border-bottom-width:2px}
  .main-nav{display:none}
  .mobile-nav{display:flex}
  /* tout ce qui se cale AU-DESSUS de la barre prend sa hauteur réelle (zone de l'iPhone comprise) */
  .main-content{bottom:var(--mobile-nav-tot)}
  .chat-box[data-mode="live"]{bottom:var(--mobile-nav-tot)}
  /* clavier du téléphone ouvert (kg-clavier-natif.js) : la barre du bas s'efface, le chat descend jusqu'en bas et se
     garde une marge de la hauteur du clavier (son fond reste sous le clavier), il remonte PAR-DESSUS la barre d'info
     du direct (z-index), le lecteur et l'en-tête ne bougent pas d'un pixel */
  html.clavier-natif .chat-box[data-mode="live"]{top:calc(var(--header-h) + 56.25vw);bottom:0;padding-bottom:var(--clavier-h,0px);z-index:95;background:var(--t-carte)}
  html.clavier-natif .main-content{bottom:0}
  .logo-link .logo-img{height:34px}
  .logo-wordmark{display:none}
  .header-live{display:none!important}
  .header-right{gap:7px}
  .wallet{gap:6px}
  .wallet-slot{height:36px;padding:0 10px 0 4px;font-size:16px;gap:5px}
  .wallet-slot .aura-icon-sm,.wallet-slot .rubis-icon-sm{width:22px;height:22px}
  .hdr-icon-btn,.pwa-header-install-btn{width:36px;height:36px}
  .user-avatar{width:36px;height:36px}
  .hdr-cog-btn{display:none}
  .notif-panel{left:10px;right:10px;width:auto;top:calc(var(--header-h) + 8px);max-height:calc(100vh - var(--header-h) - var(--mobile-nav-tot) - 20px)}
  .toast-container{left:12px;right:12px;top:calc(var(--header-h) + 8px)}
  .toast{max-width:none}
  .cookie-banner{left:10px;right:10px;bottom:calc(var(--mobile-nav-tot) + 10px);max-width:none}
  .stream-box[data-mode="live"]{border:0;border-radius:0;box-shadow:none;border-bottom:2px solid var(--t-bord)}
  .cc-hub{border-radius:20px 20px 0 0;border-bottom:0;box-shadow:none}
  .cc-hub-side{width:auto;border-left:0;border-top:var(--t-trait) solid var(--t-bord)}
}
@media (max-width:380px){
  .wallet-slot{padding:0 8px 0 3px;font-size:15px}
  .hdr-icon-btn#pushHistBtn{display:none}
}

/* ------------------------------------------------------------------ connexion */
/* Écran de connexion (includes/login.php), itération 2 : les clips de la chaîne en fond, la connexion au centre, six
   cartes de part et d'autre. Le mur est un DÉCOR : vignettes en noir et blanc sous un voile jaune (nuit en thème
   sombre), incliné, qui glisse lentement — une colonne = un calque composité qui ne fait que se translater, aucune
   image n'est redessinée pendant le mouvement. La carte de connexion reste l'objet le plus contrasté de l'écran.
   Anciennes règles (« salle du trésor ») : assets/css/style.css.bak.preFR1. */
.login-screen{position:fixed;inset:0;z-index:1000;overflow-x:hidden;overflow-y:auto;background:var(--t-jaune);color:var(--t-encre)}
[data-theme="dark"] .login-screen{background:var(--t-fond);color:var(--t-texte)}
.login-mur{position:fixed;top:-14vh;bottom:-14vh;left:-12vw;right:-12vw;z-index:0;display:flex;gap:16px;transform:rotate(-7deg);pointer-events:none;overflow:hidden}
.lm-col{flex:1 1 0;min-width:0;will-change:transform}
.lm-anime .lm-col{animation:lm-monte var(--d,80s) linear infinite}
.lm-anime .lm-col.lm-bas{animation-name:lm-descend}
.lm-pause .lm-col{animation-play-state:paused}
/* marge BASSE plutôt que gap : la colonne mesure exactement deux fois son jeu de vignettes, la boucle à -50 % ne saute pas */
.lm-v{aspect-ratio:16/9;margin-bottom:16px;border:var(--t-trait) solid var(--t-encre);border-radius:12px;overflow:hidden;background:rgba(22,19,31,.18)}
.lm-v img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);opacity:0;transition:opacity .7s ease}
.lm-v img.on{opacity:1}
@keyframes lm-monte{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes lm-descend{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
.login-voile{position:fixed;inset:0;z-index:0;pointer-events:none;background:rgba(255,198,26,.8);background:color-mix(in srgb,var(--accent) 80%,transparent)}
[data-theme="dark"] .login-voile{background:rgba(27,24,52,.86)}
[data-theme="dark"] .lm-v{border-color:#07060f}

.login-stage{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:100%;padding:32px 24px}
.login-inner{display:grid;grid-template-columns:minmax(0,300px) minmax(0,420px) minmax(0,300px);align-items:center;gap:40px;width:100%;max-width:1160px;margin:0 auto}

/* Les six cartes : même gabarit, rotations en miroir de part et d'autre (composition symétrique) */
.login-aile{display:flex;flex-direction:column;gap:18px;margin:0;padding:0;list-style:none}
.login-carte{--rot:0deg;display:flex;align-items:center;gap:13px;min-height:98px;padding:14px 16px;background:var(--t-carte);color:var(--t-texte);
  border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);box-shadow:4px 4px 0 var(--t-ombre-c);transform:rotate(var(--rot))}
.login-aile-g .login-carte:nth-child(1){--rot:-1.6deg}.login-aile-d .login-carte:nth-child(1){--rot:1.6deg}
.login-aile-g .login-carte:nth-child(2){--rot:1.4deg}.login-aile-d .login-carte:nth-child(2){--rot:-1.4deg}
.login-aile-g .login-carte:nth-child(3){--rot:-1.4deg}.login-aile-d .login-carte:nth-child(3){--rot:1.4deg}
.lc-ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border:var(--t-trait) solid var(--t-bord);border-radius:50%;background:var(--lc,var(--accent));
  color:#fff;box-shadow:2px 2px 0 var(--t-ombre-c)}
.lc-ic .icon{width:24px;height:24px}
.lc-ic img{width:32px;height:32px;object-fit:contain}
.lc-aura{--lc:var(--t-carte-2)}
.lc-pred{--lc:var(--t-bleu)}
.lc-events{--lc:var(--t-rouge)}
.lc-obj{--lc:var(--t-vert)}
.lc-royale{--lc:var(--t-jaune)}
.lc-royale .lc-ic{color:var(--t-encre)}
.lc-jeux{--lc:#7b4dff}
.lc-txt{display:flex;flex-direction:column;gap:3px;min-width:0;text-align:left}
.lc-txt b{font-family:var(--t-titre);font-size:19px;font-weight:400;line-height:1.1}
.lc-txt span{font-size:14px;font-weight:500;line-height:1.35;color:var(--t-texte-2)}

/* Le centre : le logo, une phrase, la connexion */
.login-centre{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.login-logo{margin:0;line-height:0}
.login-logo img{display:block;width:min(360px,100%);height:auto}
.login-marque{display:flex;align-items:center;gap:14px;margin:0;font-size:clamp(40px,5vw,60px);line-height:1}
.login-marque img{width:72px;height:72px;border:var(--t-trait) solid var(--t-bord);border-radius:18px;object-fit:cover}
.login-accroche{max-width:420px;margin:0;font-family:var(--t-titre);font-size:clamp(20px,1.8vw,24px);line-height:1.18}
.login-carte-cx{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;padding:20px 22px 18px;background:var(--t-carte);color:var(--t-texte);
  border:var(--t-trait) solid var(--t-bord);border-radius:18px;box-shadow:6px 6px 0 var(--t-ombre-c)}
.btn-twitch-login{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;min-height:60px;padding:0 22px;border:var(--t-trait) solid var(--t-bord);
  border-radius:12px;background:#9146ff;color:#fff;font-family:var(--t-titre);font-size:23px;line-height:1;text-decoration:none;box-shadow:4px 4px 0 var(--t-ombre-c);
  transition:transform var(--t-dur) var(--t-ease),box-shadow var(--t-dur) var(--t-ease)}
.btn-twitch-login .icon{width:26px;height:26px}
.btn-twitch-login:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--t-ombre-c)}
.btn-twitch-login:focus-visible{outline:3px solid var(--t-texte);outline-offset:3px}
.login-live-chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:5px 13px;border:2px solid var(--t-bord);border-radius:16px;text-align:left;
  background:var(--t-fond-2);color:var(--t-texte);font-size:13.5px;font-weight:700}
.llc-dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--t-texte-3)}
.login-live-chip.is-live{background:var(--t-rouge);color:#fff}
.login-live-chip.is-live .llc-dot{background:#fff;animation:t-battement 1.6s ease-in-out infinite}
@keyframes t-battement{0%,100%{transform:scale(1)}50%{transform:scale(.6)}}
.login-cx-note{max-width:360px;margin:0;font-size:14px;font-weight:500;line-height:1.45;color:var(--t-texte-2)}
.login-note{margin:0;font-size:13.5px;font-weight:600}
.login-credit-wrap{position:relative;display:inline-block}
.login-credit{padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.login-social-popup{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:5;display:none;flex-direction:column;gap:2px;min-width:180px;padding:6px;transform:translateX(-50%);
  border:2px solid var(--t-bord);border-radius:12px;background:var(--t-carte);box-shadow:3px 3px 0 var(--t-ombre-c);text-align:left}
.login-social-popup::after{content:'';position:absolute;top:100%;left:0;right:0;height:10px}
.login-credit-wrap.show .login-social-popup{display:flex}
.login-social-link{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;color:var(--t-texte);font-size:14px;font-weight:700;text-decoration:none}
.login-social-link svg{width:18px;height:18px;flex:none}
.social-twitch svg{color:#9146ff}.social-discord svg{color:#5865f2}
@media (hover:hover){
  .btn-twitch-login:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--t-ombre-c)}
  .login-credit-wrap:hover .login-social-popup{display:flex}
  .login-social-link:hover{background:var(--t-carte-2)}
}
/* Téléphone et tablette : la connexion d'abord, puis les six cartes en deux colonnes de trois */
@media (max-width:1000px){
  .login-stage{align-items:flex-start;padding:22px 14px 36px}
  /* les deux listes s'effacent (display:contents) pour que les six cartes forment UNE grille 2 x 3 : chaque rangée
     prend la hauteur de sa plus grande carte, les deux colonnes restent alignées */
  .login-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;max-width:560px}
  .login-centre{grid-column:1/-1;grid-row:1;gap:14px;margin-bottom:10px}
  .login-aile{display:contents}
  .login-aile-g .login-carte{grid-column:1}.login-aile-d .login-carte{grid-column:2}
  .login-aile .login-carte:nth-child(1){grid-row:2}.login-aile .login-carte:nth-child(2){grid-row:3}.login-aile .login-carte:nth-child(3){grid-row:4}
  .login-carte{flex-direction:column;align-items:flex-start;gap:8px;min-height:0;padding:12px}
  .login-aile .login-carte:nth-child(n){--rot:0deg}
  .lc-ic{width:40px;height:40px}.lc-ic .icon{width:20px;height:20px}.lc-ic img{width:26px;height:26px}
  .lc-txt b{font-size:16.5px}.lc-txt span{font-size:13px}
  .login-logo img{width:min(260px,72vw)}
  .btn-twitch-login{min-height:56px;font-size:21px}
  .login-mur{gap:10px}.lm-v{margin-bottom:10px;border-width:2px;border-radius:9px}
}
@media (prefers-reduced-motion:reduce){.login-live-chip.is-live .llc-dot{animation:none}.lm-v img{transition:none}}
body.low-perf .login-mur{display:none}

/* ------------------------------------------------------------------ calques secondaires */
/* Réglages : la rangée des couleurs passe sous son libellé (8 pastilles tiennent sur une ligne, au lieu d'en laisser
   une seule orpheline à la ligne suivante). */
.setting-row:has(#themeColorRow){flex-direction:column;align-items:flex-start;gap:12px}
.setting-row:has(#themeColorRow) .theme-color-row{flex-wrap:nowrap;gap:10px}

/* « Nous contacter » (app.js openContactModal) : une carte dessinée, des choix en boutons de papier, ses propres
   messages sur l'accent (à l'encre dessus : l'accent par défaut est jaune). */
.ct-modal{width:440px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);background:var(--t-carte);box-shadow:5px 5px 0 var(--t-ombre-c);animation:t-tampon .22s var(--t-ease) both}
.ct-header{padding:14px 16px 12px 20px;border-bottom:var(--t-trait) solid var(--t-bord);font-family:var(--t-titre);font-size:24px;font-weight:400}
.ct-close{display:grid;place-items:center;width:36px;height:36px;padding:0;border:2px solid var(--t-bord);border-radius:50%;background:var(--t-carte);color:var(--t-texte);
  font-size:22px;line-height:1;box-shadow:2px 2px 0 var(--t-ombre-c)}
.ct-choice{min-height:56px;border:2px solid var(--t-bord);border-radius:var(--t-r-s);background:var(--t-carte);font-size:16px;font-weight:700;box-shadow:2px 2px 0 var(--t-ombre-c)}
.ct-choice:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--t-ombre-c)}
.ct-divider{font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--t-texte-2);border-top:2px solid var(--t-bord-doux)}
.ct-thread{border:2px solid var(--t-bord-doux);border-radius:var(--t-r-s);background:var(--t-carte)}
.ct-unread{min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 6px;border:1.5px solid var(--t-bord);border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:11px}
.ct-toggle-closed{border-top:2px solid var(--t-bord-doux);font-size:13px;font-weight:700}
.ct-compose-title{font-family:var(--t-titre);font-size:21px;font-weight:400}
.ct-textarea{min-height:120px;padding:10px 14px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-s);background:var(--t-carte);color:var(--t-texte);font:500 15.5px/1.4 var(--t-corps)}
.ct-textarea:focus{border-color:var(--t-bord);box-shadow:0 0 0 3px var(--accent)}
.ct-btn-send,.ct-btn-cancel{min-height:44px;padding:0 18px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-s);font-family:var(--t-titre);font-size:17px;font-weight:400;box-shadow:2px 2px 0 var(--t-ombre-c)}
.ct-btn-send{background:var(--accent);color:var(--accent-ink)}
.ct-btn-send:disabled{background:var(--t-fond-2);color:var(--t-texte-3);border-style:dashed;box-shadow:none}
.ct-btn-cancel{background:var(--t-carte);color:var(--t-texte)}
.ct-btn-send:active,.ct-btn-cancel:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--t-ombre-c)}
.ct-msg-bubble{border:2px solid var(--t-bord);font-size:15px}
.ct-msg-user .ct-msg-bubble{background:var(--accent);color:var(--accent-ink)}
.ct-msg-admin .ct-msg-bubble{background:var(--t-fond-2);border-color:var(--t-bord)}
.ct-msg-time{font-size:11.5px;color:var(--t-texte-3)}
.ct-closed-notice{border-top:2px solid var(--t-bord-doux);font-size:13px;color:var(--t-texte-2)}
@media (hover:hover){
  .ct-choice:hover{border-color:var(--t-bord);background:var(--t-carte-2)}
  .ct-thread:hover{border-color:var(--t-bord)}
  .ct-close:hover{background:var(--accent);color:var(--accent-ink)}
  .ct-btn-cancel:hover{border-color:var(--t-bord);background:var(--t-carte-2)}
}
@media (max-width:480px){
  .setting-row:has(#themeColorRow) .theme-color-row{gap:7px;padding-left:3px}
  .setting-row:has(#themeColorRow) .theme-color-btn{width:28px;height:28px}
}
/* Page chargée à l'ouverture (app.js, navigateTo) : le fragment attend son CSS, la roue d'attente reste visible. */
.page-panel.kg-attente-css > :not(.page-loading){visibility:hidden}
/* 7 onglets (le staff a le QG en plus) : « Objectifs » se faisait couper en « Object… » à 390 px */
.mobile-nav:has(> .mobile-nav-link:nth-child(7)) .mobile-nav-link{padding:0 1px;font-size:10px;letter-spacing:-.015em}
/* 8 et 9 onglets (La Place, 30/09/2026 ; le staff a le QG en plus) : le libellé se resserre, le picto reste lisible */
.mobile-nav:has(> .mobile-nav-link:nth-child(8)) .mobile-nav-link{padding:0;font-size:9.2px;letter-spacing:-.025em}
.mobile-nav:has(> .mobile-nav-link:nth-child(9)) .mobile-nav-link{font-size:8.4px;letter-spacing:-.03em}
/* Chat : les couleurs de pseudo Twitch sont pensées pour un fond sombre. app.js (renderMsg) en calcule deux versions
   lisibles (≥ 4,5:1) — assombrie pour le papier, éclaircie pour la nuit — et le thème choisit. */
[data-theme="light"] .cc-msg .cc-name{color:var(--nc-clair,var(--t-texte))}
[data-theme="dark"] .cc-msg .cc-name{color:var(--nc-sombre,var(--t-texte))}
[data-theme="light"] .cc-action .cc-text{color:var(--nc-clair,var(--cc-act))}
[data-theme="dark"] .cc-action .cc-text{color:var(--nc-sombre,var(--cc-act))}
/* Soldes de l'en-tête : le chiffre à l'encre (l'icône porte la couleur de la monnaie) — l'orange de l'aura sur papier
   tombait à 2,2:1. Solde négatif : rouge d'encre. */
.wallet-slot .aura-count,.wallet-slot .rubis-count{color:var(--t-texte)}
.wallet-slot .aura-count.negative,.wallet-slot .rubis-count.negative{color:var(--t-rouge)}

/* ------------------------------------------------------------------ états partagés */
/* Chargement d'une page : un disque d'encre qui tourne (le trait de l'accent en tête), pas un filet gris. */
.spinner{width:40px;height:40px;border:4px solid var(--t-bord-doux);border-top-color:var(--t-texte);border-right-color:var(--accent);border-radius:50%}
.spinner-sm{border-width:2.5px;border-color:var(--t-bord-doux);border-top-color:var(--t-texte)}
/* Page vide ou en échec (« Impossible de charger la page » + Réessayer) */
.empty-state{gap:14px;color:var(--t-texte-2);font-size:16px;font-weight:600}
.empty-state p{margin:0;max-width:420px}
.empty-state .icon-xl{opacity:.6}
.kg-page-retry{min-height:46px}
@media (prefers-reduced-motion:reduce){.spinner,.spinner-sm{animation-duration:2.4s}}
/* Mode Performance : toutes les animations sont coupées (style.css), sauf celle qui dit « ça charge » — une roue figée
   laisse croire que la page est plantée. Une rotation composée : coût nul. */
body.low-perf .spinner,body.low-perf .spinner-sm{animation:spin 1.1s linear infinite!important}
/* « Prédits » (bouton du staff dans l'en-tête du chat, predictions_gm.js) : il avait gardé l'habit d'avant la refonte —
   dégradé violet, lueur, reflet balayé, pictogramme qui tournait EN PERMANENCE. Pastille « Trait » bleue (bleu =
   prédiction, comme au QG), immobile au repos, cible ≥ 32 px. Itération 2, campagne finale. */
.chat-header .pred-gm-launch-btn{min-height:32px;padding:0 12px;border:2px solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--t-bleu);color:#fff;
  font:400 15px/1 var(--t-titre);letter-spacing:.01em;text-transform:none;box-shadow:2px 2px 0 var(--t-ombre-c);filter:none;transition:transform var(--t-dur) var(--t-ease),box-shadow var(--t-dur) var(--t-ease)}
.chat-header .pred-gm-launch-btn::before{content:none}
.chat-header .pred-gm-launch-btn svg{animation:none}
@media (hover:hover){.chat-header .pred-gm-launch-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--t-ombre-c);filter:none}}
.chat-header .pred-gm-launch-btn:active{transform:translate(2px,2px);box-shadow:none}

/* ------------------------------------------------------------------ calques de l'application (pwa.css) */
/* Installer l'app, bandeau des notifications, récompense « +5 000 aura », préférences de notification, aide iOS :
   même papier, même encre que le reste. L'orange de l'aura reste la couleur de ces calques (ils parlent d'aura),
   en aplat, sans lueur ni pulsation. (pwa.css est chargé avant ce fichier : mêmes sélecteurs, ceux-ci gagnent.) */
.pwa-install-btn{min-height:46px;padding:0 10px 0 12px;gap:9px;background:var(--t-aura);color:var(--t-encre);border:var(--t-trait) solid var(--t-bord);
  font-family:var(--t-titre);font-size:17px;font-weight:400;box-shadow:3px 3px 0 var(--t-ombre-c)}
.pwa-install-btn.show{animation:none}
.pwa-install-btn .pwa-install-icon{filter:none}
.pwa-install-btn .pwa-install-reward{background:var(--t-carte);color:var(--t-texte);border:2px solid var(--t-bord);font-family:var(--t-corps);font-size:12.5px}
.pwa-install-btn .pwa-install-close{width:32px;height:32px;margin-left:2px;background:var(--t-carte);color:var(--t-texte);border:2px solid var(--t-bord);opacity:1;font-size:18px}
/* le bouton « Installer l'app » ne couvre jamais ce qu'on est en train d'utiliser : il s'efface clavier ouvert, panneau
   des messages ou fiche ouverts, et sur le Live il passe au-dessus de la saisie du chat (au lieu d'être posé dessus) */
html.clavier-natif .pwa-install-btn,html.sp-ouvert .pwa-install-btn,body:has(#profilModal:not([hidden])) .pwa-install-btn,body:has(#ccEmotePicker:not(.hidden)) .pwa-install-btn{display:none!important}
@media (max-width:900px){body:has(.chat-box[data-mode="live"]) .pwa-install-btn{bottom:calc(var(--mobile-nav-tot) + 78px)}}
.pwa-notif-banner{background:var(--t-carte);color:var(--t-texte);border:var(--t-trait) solid var(--t-bord);box-shadow:4px 4px 0 var(--t-ombre-c)}
.pwa-notif-banner-icon{filter:none}
.pwa-notif-banner-text strong{font-family:var(--t-titre);font-weight:400;font-size:17px;color:var(--t-texte)}
.pwa-notif-banner-actions button{min-height:40px;border:2px solid var(--t-bord);border-radius:var(--t-r-s);font-family:var(--t-titre);font-size:15px;font-weight:400}
.pwa-notif-banner-actions .pwa-btn-yes{background:var(--accent);color:var(--accent-ink);box-shadow:2px 2px 0 var(--t-ombre-c)}
.pwa-notif-banner-actions .pwa-btn-no{background:var(--t-carte);color:var(--t-texte)}
.pwa-reward-overlay,.pwa-prefs-overlay,.pwa-ios-hint-overlay{background:var(--t-voile);backdrop-filter:none;-webkit-backdrop-filter:none}
.pwa-reward-card,.pwa-prefs-card{background:var(--t-carte);color:var(--t-texte);border:var(--t-trait) solid var(--t-bord);box-shadow:5px 5px 0 var(--t-ombre-c)}
.pwa-reward-icon img{filter:none;animation:none}
.pwa-reward-card h2,.pwa-prefs-card h2{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--t-texte);font-family:var(--t-titre);font-weight:400;font-size:26px}
.pwa-reward-amount{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--t-texte);text-shadow:none;font-family:var(--t-titre);font-weight:400;font-size:46px;letter-spacing:0}
.pwa-reward-card p,.pwa-prefs-card .pwa-prefs-sub{color:var(--t-texte-2)}
.pwa-reward-btn-primary,.pwa-reward-btn-secondary,.pwa-prefs-footer button,.setting-cta-btn{min-height:44px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-s);
  font-family:var(--t-titre);font-size:17px;font-weight:400;box-shadow:2px 2px 0 var(--t-ombre-c)}
.pwa-reward-btn-primary,.pwa-prefs-footer .pwa-prefs-save,.setting-cta-btn{background:var(--accent);color:var(--accent-ink)}
.pwa-reward-btn-secondary,.pwa-prefs-footer .pwa-prefs-cancel{background:var(--t-carte);color:var(--t-texte)}
.setting-cta-btn{min-height:38px;padding:0 14px;font-size:15px}
.pwa-prefs-row{background:var(--t-fond-2);border-left:5px solid var(--t-aura);border-radius:var(--t-r-s)}
.pwa-prefs-row .pwa-prefs-row-text span{color:var(--t-texte-2)}
.pwa-switch-slider{background:var(--t-fond-2);border:2px solid var(--t-bord)}
.pwa-switch-slider:before{bottom:1px;left:1px;background:var(--t-carte);border:2px solid var(--t-bord);box-sizing:border-box}
.pwa-switch input:checked + .pwa-switch-slider{background:var(--accent)}
.pwa-ios-hint-card{background:var(--t-carte);color:var(--t-texte);border:var(--t-trait) solid var(--t-bord);border-bottom:0}
@media (hover:hover){
  .pwa-install-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--t-ombre-c)}
  .pwa-reward-btn-primary:hover,.setting-cta-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--t-ombre-c)}
}
@media (hover:none){.pwa-install-btn:hover,.pwa-reward-btn-primary:hover,.setting-cta-btn:hover{transform:none}}
.pwa-prefs-row .pwa-prefs-row-icon{display:grid;place-items:center;width:30px;height:30px;flex:none;color:var(--t-texte)}
.pwa-prefs-row .pwa-prefs-row-icon svg{width:24px;height:24px}
.pwa-prefs-row:first-child .pwa-prefs-row-icon{color:var(--t-rouge)}

/* ------------------------------------------------------------------ fenêtres d'events (dessin, vocal, zoom) */
/* Nées sur le site tout sombre : panneau d'enregistrement en dur (#0a0a18) avec un minuteur à la couleur du texte
   (donc encre sur nuit en thème clair : invisible), prix en blanc sur fond transparent. Elles prennent le trait. */
.voe-stage{background:var(--t-fond-2);border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r)}
.voe-mic{width:88px;height:88px;border:var(--t-trait) solid var(--t-bord);background:var(--accent);color:var(--accent-ink);box-shadow:3px 3px 0 var(--t-ombre-c)}
.voe-mic.rec{background:var(--t-rouge);color:#fff;border-color:var(--t-bord)}
.voe-timer{font-family:var(--t-titre);font-weight:400;font-size:40px;color:var(--t-texte)}
.voe-state{color:var(--t-texte-2);font-weight:600}
.voe-title,.dre-title,.zoe-title{font-family:var(--t-titre);font-weight:400;font-size:24px}
.voe-hint,.zoe-hint{color:var(--t-texte-2)}
.voe-footer,.dre-footer,.zoe-footer{border-top:2px solid var(--t-bord-doux)}
.dre-cost,.voe-cost,.zoe-cost{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-pill);
  background:var(--t-carte);color:var(--t-texte);font-family:var(--t-titre);font-weight:400;font-size:19px;box-shadow:none}
.dre-stage,.zoe-stage{border:var(--t-trait) solid var(--t-bord)}
.voe-btn,.dre-btn{min-height:44px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-s);font-family:var(--t-titre);font-weight:400;font-size:17px;box-shadow:2px 2px 0 var(--t-ombre-c)}
.voe-btn-ghost,.dre-btn-ghost{background:var(--t-carte);color:var(--t-texte)}
.voe-btn-primary,.dre-btn-primary{background:var(--accent);color:var(--accent-ink)}
.voe-btn-primary:disabled,.dre-btn-primary:disabled{opacity:1;background:var(--t-fond-2);color:var(--t-texte-3);border-style:dashed;box-shadow:none}
@media (hover:hover){.voe-mic:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--t-ombre-c)}}
@media (hover:none){.voe-mic:hover{transform:none}}
/* Curseurs (taille du trait, durée d'affichage) : un rail dessiné, sinon seul le bouton se voyait sur le papier */
.dre-range{height:10px;border:2px solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--t-fond-2)}
.dre-range::-webkit-slider-thumb{width:22px;height:22px;border:2.5px solid var(--t-bord);box-shadow:2px 2px 0 var(--t-ombre-c)}
.dre-range::-moz-range-thumb{width:22px;height:22px;border:2.5px solid var(--t-bord);box-shadow:2px 2px 0 var(--t-ombre-c)}
.dre-size-dot{box-shadow:0 0 0 2px var(--t-bord)}

/* ------------------------------------------------------------------ le ciel (itération 3, assets/js/cosmos.js) */
/* Un seul décor, fixe sous l'en-tête, derrière toutes les pages : nébuleuse (WebGL, basse résolution) + étoiles et motif
   de la page (2D). Il remplace les fonds animés par page de l'itération 2 (.kg-fond, gardés dans le balisage, masqués
   dès que le ciel est là). Mode Performance : le ciel n'est pas créé. */
.kg-ciel{position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:0;overflow:hidden;pointer-events:none}
.kg-ciel canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
body.low-perf .kg-ciel{display:none}
html.kg-ciel-on .kg-fond{display:none}
html.kg-ciel-on .page-panel[data-page="jeux"] .jx-arena{background:transparent}
/* Les quelques textes posés À MÊME le ciel (titres de page, en-têtes de colonnes du QG, top 3 de la boutique, nom de la
   chaîne sous le lecteur) : un halo à la couleur du fond — pas une lueur, il ne se voit que là où le ciel est vif — et
   les encadrés vides reçoivent un fond plein. La nébuleuse s'estompe aussi en haut de l'écran (cosmos.js). */
html.kg-ciel-on :is(.t-titre-page h1,.t-titre-page p,.qg-col-h,.live-channel,.bq-top-tete h2,.bq-top-tete p){text-shadow:0 0 2px var(--t-fond),0 1px 10px var(--t-fond),0 0 22px var(--t-fond)}
html.kg-ciel-on .bq-top-vide{background:var(--t-carte)}

/* ------------------------------------------------------------------ fonds animés (itération 2) */
/* Un fond par page, qui dit quelque chose de la page : la SCÈNE du Live (un plancher de trame qui avance sous un
   projecteur), les RAYONS des Events (les traits de vitesse d'une case de BD : ça se passe maintenant), la TRAME des
   Objectifs (deux hachures d'imprimeur qui glissent l'une sur l'autre : leur moiré fait passer de grandes bandes, comme
   une jauge qui monte), le PLATEAU des Jeux (un damier de jeu de société en perspective).
   Coût : un élément par page, une ou deux couches peintes UNE fois (dégradés CSS, aucune image, aucun canvas, aucun
   SVG) puis seulement déplacées par `transform` sur le compositeur — pas de mise en page, pas de repeinture, pas de
   CLS. Arrêt quand l'onglet est caché (html.kg-cache, app.js), fond figé avec le mouvement réduit, absent en mode
   Performance. Les teintes suivent le thème et la couleur d'accent choisie. */
.kg-fond{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict}
.kg-fond > i{position:absolute;display:block;will-change:transform}
html.kg-cache .kg-fond > i{animation-play-state:paused}
body.low-perf .kg-fond{display:none}
@media (prefers-reduced-motion:reduce){.kg-fond > i{animation:none!important}}

/* Live — la scène */
.kg-fond--scene{--kf-pt:color-mix(in srgb,var(--t-texte) 28%,transparent);--kf-lum:color-mix(in srgb,var(--accent) 45%,transparent)}
.kg-fond--scene .kf-halo{left:10%;top:-55%;width:80%;height:130%;border-radius:50%;background:radial-gradient(closest-side,var(--kf-lum),transparent);
  animation:kf-halo 18s ease-in-out infinite alternate}
.kg-fond--scene .kf-sol{left:-40%;right:-40%;bottom:-8%;height:78%;transform-origin:50% 100%;
  background:radial-gradient(circle,var(--kf-pt) 1.8px,transparent 2.4px) 0 0/26px 26px;
  -webkit-mask-image:linear-gradient(to top,#000 15%,transparent 90%);mask-image:linear-gradient(to top,#000 15%,transparent 90%);
  transform:perspective(520px) rotateX(63deg);animation:kf-sol 5s linear infinite}
@keyframes kf-sol{from{transform:perspective(520px) rotateX(63deg) translate3d(0,0,0)}to{transform:perspective(520px) rotateX(63deg) translate3d(0,26px,0)}}
@keyframes kf-halo{from{transform:translate3d(-16%,0,0)}to{transform:translate3d(16%,0,0)}}

/* Events — les rayons */
.kg-fond--rayons{--kf-ray:color-mix(in srgb,var(--accent) 30%,transparent)}
.kg-fond--rayons .kf-rayons{left:calc(50% - 80vmax);top:calc(110px - 80vmax);width:160vmax;height:160vmax;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,var(--kf-ray) 0deg 5deg,transparent 5deg 15deg);
  -webkit-mask-image:radial-gradient(circle,transparent 6%,#000 16%,rgba(0,0,0,.55) 34%,transparent 52%);
  mask-image:radial-gradient(circle,transparent 6%,#000 16%,rgba(0,0,0,.55) 34%,transparent 52%);
  animation:kf-tour 200s linear infinite}
@keyframes kf-tour{to{transform:rotate(360deg)}}

/* Objectifs — la trame (moiré de deux hachures) */
.kg-fond--trame{--kf-l:color-mix(in srgb,var(--t-texte) 9%,transparent)}
.kg-fond--trame .kf-h1,.kg-fond--trame .kf-h2{top:-10%;bottom:-10%;left:-10%;right:-10%;
  -webkit-mask-image:linear-gradient(170deg,#000,rgba(0,0,0,.35) 45%,#000 95%);mask-image:linear-gradient(170deg,#000,rgba(0,0,0,.35) 45%,#000 95%)}
.kg-fond--trame .kf-h1{background:repeating-linear-gradient(115deg,var(--kf-l) 0 2px,transparent 2px 16px);animation:kf-h1 14s linear infinite}
.kg-fond--trame .kf-h2{background:repeating-linear-gradient(107deg,var(--kf-l) 0 2px,transparent 2px 16px);animation:kf-h2 14s linear infinite}
/* un cran exact de chaque hachure (16 px / sin de son angle) : la boucle ne saute pas */
@keyframes kf-h1{to{transform:translate3d(-17.654px,0,0)}}
@keyframes kf-h2{to{transform:translate3d(16.731px,0,0)}}

/* Jeux — le plateau */
.kg-fond--plateau{--kf-c:color-mix(in srgb,var(--t-texte) 7%,transparent);--kf-lum:color-mix(in srgb,var(--accent) 30%,transparent)}
.kg-fond--plateau .kf-halo{left:5%;top:-50%;width:90%;height:120%;border-radius:50%;background:radial-gradient(closest-side,var(--kf-lum),transparent);
  animation:kf-halo 22s ease-in-out infinite alternate}
.kg-fond--plateau .kf-damier{left:-50%;right:-50%;bottom:-10%;height:70%;transform-origin:50% 100%;
  background:conic-gradient(var(--kf-c) 25%,transparent 0 50%,var(--kf-c) 0 75%,transparent 0) 0 0/72px 72px;
  -webkit-mask-image:linear-gradient(to top,#000 20%,transparent 92%);mask-image:linear-gradient(to top,#000 20%,transparent 92%);
  transform:perspective(560px) rotateX(64deg);animation:kf-damier 9s linear infinite}
@keyframes kf-damier{from{transform:perspective(560px) rotateX(64deg) translate3d(0,0,0)}to{transform:perspective(560px) rotateX(64deg) translate3d(0,144px,0)}}

/* Où chaque fond se pose : Events et Objectifs couvrent tout le panneau (pleine largeur, contenu borné au centre),
   le Live seulement la scène autour du lecteur, les Jeux l'arène. Le contenu passe devant. */
.page-panel[data-page="events"],.page-panel[data-page="objectifs"]{position:relative;isolation:isolate;max-width:none;min-height:calc(100vh - var(--header-h))}
.ev-page,.obj-room{position:static;max-width:1224px;margin:0 auto}
.ev-page > :not(.kg-fond),.obj-room > :not(.kg-fond),.jx-arena > :not(.kg-fond),.live-scene > :not(.kg-fond){position:relative;z-index:1}
.live-scene{position:relative;isolation:isolate}
@media (max-width:900px){.page-panel[data-page="events"],.page-panel[data-page="objectifs"]{min-height:calc(100vh - var(--header-h) - var(--mobile-nav-h))}}

/* ------------------------------------------------------------------ rappel d'objectif (app.js _rappelAfficher) */
/* Toutes les 30 min, sur toutes les pages : une GRANDE carte en haut à droite, dans la pile des notifications du site
   (#toastContainer : en haut sur toute la largeur au téléphone). Elle arrive de la droite et se pose ; la flèche fait un
   aller-retour pour montrer où aller ; une fine barre dit le temps qu'il lui reste (14 s, en pause sous la souris ou
   le focus). Mouvement réduit : fondu seul. */
.kg-rappel{position:relative;pointer-events:auto;display:flex;align-items:center;gap:14px;width:min(460px,calc(100vw - 32px));box-sizing:border-box;padding:14px 14px 18px 16px;
  background:var(--t-carte);color:var(--t-texte);border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);box-shadow:4px 4px 0 var(--t-ombre-c);cursor:pointer;overflow:visible;
  opacity:0;transform:translate3d(28px,0,0);transition:opacity .22s var(--t-ease),transform .42s cubic-bezier(.2,1.25,.4,1)}
.kg-rappel--in{opacity:1;transform:none}
.kg-rappel--out{opacity:0;transform:translate3d(28px,0,0);transition-duration:.2s,.2s;transition-timing-function:ease-in}
.kg-rappel-ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border:var(--t-trait) solid var(--t-bord);border-radius:50%;background:var(--t-vert);color:#fff;box-shadow:2px 2px 0 var(--t-ombre-c)}
.kg-rappel-ic svg{width:26px;height:26px}
.kg-rappel-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.kg-rappel-txt b{font-family:var(--t-titre);font-size:23px;font-weight:400;line-height:1.05}
.kg-rappel-nom{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:700;color:var(--t-texte-2)}
.kg-rappel-go{flex:none;display:grid;place-items:center;width:54px;height:54px;padding:0;border:var(--t-trait) solid var(--t-bord);border-radius:14px;background:var(--accent);
  color:var(--accent-ink);box-shadow:3px 3px 0 var(--t-ombre-c);cursor:pointer}
.kg-rappel-go svg{width:26px;height:26px}
.kg-rappel--in .kg-rappel-go svg{animation:kg-fleche .7s .55s ease-in-out 2}
@keyframes kg-fleche{0%,100%{transform:none}50%{transform:translateX(4px)}}
.kg-rappel-go:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--t-ombre-c)}
.kg-rappel-x{position:absolute;top:-13px;right:-13px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:2px solid var(--t-bord);border-radius:50%;
  background:var(--t-carte);color:var(--t-texte);font-size:20px;line-height:1;cursor:pointer;box-shadow:2px 2px 0 var(--t-ombre-c)}
/* le temps qui reste : une barre d'encre qui se vide, posée sur le bord bas */
.kg-rappel-temps{position:absolute;left:14px;right:14px;bottom:7px;height:4px;border-radius:4px;background:var(--t-bord-doux);overflow:hidden}
.kg-rappel-temps i{display:block;height:100%;background:var(--t-texte);transform-origin:left;animation:kg-rappel-temps var(--kg-rappel-duree,14s) linear forwards}
.kg-rappel:is(:hover,:focus-within) .kg-rappel-temps i{animation-play-state:paused}
@keyframes kg-rappel-temps{to{transform:scaleX(0)}}
@media (hover:hover){.kg-rappel:hover{box-shadow:6px 6px 0 var(--t-ombre-c)}.kg-rappel-x:hover{background:var(--t-carte-2)}}
@media (max-width:900px){
  .kg-rappel{width:100%;transform:translate3d(0,-14px,0)}
  .kg-rappel--in{transform:none}
  .kg-rappel--out{transform:translate3d(0,-10px,0)}
  .kg-rappel-x{top:-10px;right:-6px}
}
@media (prefers-reduced-motion:reduce){.kg-rappel,.kg-rappel--in,.kg-rappel--out{transform:none!important}.kg-rappel--in .kg-rappel-go svg{animation:none}.kg-rappel-temps i{animation:none;transform:scaleX(.5)}}
body.low-perf .kg-rappel{transition:opacity .15s linear;transform:none}
body.low-perf .kg-rappel--in .kg-rappel-go svg{animation:none}

/* ── Payer un event : rubis OU aura (04/10/2026) ───────────────────────────────────────────────────────────────────
   Le sélecteur « Payer en » des modales d'events (assets/js/app.js, evPayPickerHtml) : deux grandes pastilles, chacune
   avec l'icône de la monnaie, le PRIX dans cette monnaie et le solde de l'acheteur. L'option choisie prend l'accent ;
   celle qu'il ne peut pas payer dit ce qu'il lui manque (et reste choisissable seulement si l'autre manque aussi).
   Contour d'encre, ombre dure, aucune lueur. */
.ev-pay{flex:1 1 100%;display:flex;flex-direction:column;gap:8px;margin:12px 0}
.ev-pay-titre{font-family:var(--t-titre);font-size:14px;line-height:1;letter-spacing:.05em;text-transform:uppercase;color:var(--t-texte-2)}
.ev-pay-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.ev-pay-opt{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico txt" "solde solde";align-items:center;gap:6px 10px;
  padding:10px 12px;text-align:left;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);background:var(--t-carte);color:var(--t-texte);
  font-family:var(--t-corps);cursor:pointer;box-shadow:2px 2px 0 var(--t-ombre-c);transition:transform var(--t-dur) var(--t-ease),box-shadow var(--t-dur) var(--t-ease),background var(--t-dur)}
.ev-pay-opt:hover:not([disabled]){transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--t-ombre-c)}
.ev-pay-opt:active:not([disabled]){transform:translate(2px,2px);box-shadow:0 0 0 var(--t-ombre-c)}
.ev-pay-opt.is-on{background:var(--accent);color:var(--accent-ink);box-shadow:3px 3px 0 var(--t-ombre-c)}
.ev-pay-opt[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
.ev-pay-opt:focus-visible{outline:3px solid var(--t-texte);outline-offset:2px}
.ev-pay-ico{grid-area:ico;width:36px;height:36px;display:grid;place-items:center;border:2px solid var(--t-bord);border-radius:50%;background:var(--t-fond-2)}
.ev-pay-ico .ev-pay-img,.ev-pay-ico img,.ev-pay-ico svg{width:22px;height:22px;object-fit:contain;display:block}
.ev-pay-txt{grid-area:txt;min-width:0;display:flex;flex-direction:column;gap:1px}
.ev-pay-nom{font-weight:800;font-size:12px;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.ev-pay-prix{font-family:var(--t-titre);font-weight:400;font-size:21px;line-height:1.1;overflow-wrap:anywhere}
.ev-pay-solde{grid-area:solde;font-size:12px;font-weight:700;line-height:1.2;opacity:.85}
.ev-pay-opt.is-lack .ev-pay-solde{font-weight:800;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}

/* ── Guide d'installation de l'app (assets/js/pwa-guide.js, 04/10/2026) ───────────────────────────────────────────────
   Une fenêtre qui MONTRE quoi faire : le choix de l'appareil (PC), puis les étapes de l'iPhone, d'Android ou du PC, chacune
   avec son écran dessiné ; les cibles à toucher portent un anneau qui pulse. Contour d'encre, ombre dure, papier / nuit
   par les jetons du site. Les écrans dessinés (.pg-ill) sont des SVG qui prennent ces mêmes jetons. */
.pg-overlay{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:16px;background:var(--t-voile);opacity:0;transition:opacity .2s var(--t-ease)}
.pg-overlay.show{opacity:1}
.pg-card{width:min(1040px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);
  background:var(--t-fond);color:var(--t-texte);box-shadow:6px 6px 0 var(--t-ombre-c);overflow:hidden;transform:translateY(12px);transition:transform .28s var(--t-ease)}
.pg-overlay.show .pg-card{transform:none}
.pg-tete{flex:none;display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--t-carte);border-bottom:var(--t-trait) solid var(--t-bord)}
.pg-tete-ico{flex:none;width:54px;height:54px;border:var(--t-trait) solid var(--t-bord);border-radius:14px;background:var(--t-fond-2);box-shadow:2px 2px 0 var(--t-ombre-c)}
.pg-tete-txt{flex:1;min-width:0}
.pg-tete h2{margin:0;font-family:var(--t-titre);font-weight:400;font-size:30px;line-height:1.05}
.pg-tete-sous{margin:3px 0 0;font-size:14px;font-weight:700;color:var(--t-texte-2)}
.pg-bonus{flex:none;display:inline-flex;align-items:center;height:34px;padding:0 14px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--t-aura);
  color:var(--t-encre);font-family:var(--t-titre);font-size:16px;white-space:nowrap;box-shadow:2px 2px 0 var(--t-ombre-c)}
.pg-x{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:var(--t-trait) solid var(--t-bord);border-radius:12px;background:var(--t-carte-2);color:var(--t-texte);
  font-size:26px;line-height:1;cursor:pointer;box-shadow:2px 2px 0 var(--t-ombre-c);transition:transform var(--t-dur) var(--t-ease),box-shadow var(--t-dur) var(--t-ease)}
.pg-x:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--t-ombre-c)}
.pg-contenu{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.pg-corps-zone{flex:1;min-height:0;overflow:auto;padding:16px 18px 20px}

/* onglets : l'appareil */
.pg-onglets{flex:none;display:flex;flex-wrap:wrap;gap:10px;padding:14px 18px 0}
.pg-onglet{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--t-carte);color:var(--t-texte);
  font-family:var(--t-titre);font-size:17px;cursor:pointer;box-shadow:2px 2px 0 var(--t-ombre-c);transition:transform var(--t-dur) var(--t-ease),box-shadow var(--t-dur) var(--t-ease)}
.pg-onglet:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--t-ombre-c)}
.pg-onglet.is-on{background:var(--accent);color:var(--accent-ink);box-shadow:3px 3px 0 var(--t-ombre-c)}
.pg-onglet:focus-visible,.pg-choix-btn:focus-visible,.pg-gros:focus-visible,.pg-fermer:focus-visible,.pg-x:focus-visible,.pg-lien:focus-visible{outline:3px solid var(--t-texte);outline-offset:2px}

/* le choix de l'appareil (sur PC) */
.pg-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.pg-choix-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 14px 20px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);background:var(--t-carte);color:var(--t-texte);
  cursor:pointer;box-shadow:3px 3px 0 var(--t-ombre-c);transition:transform var(--t-dur) var(--t-ease),box-shadow var(--t-dur) var(--t-ease)}
.pg-choix-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--t-ombre-c)}
.pg-choix-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--t-ombre-c)}
.pg-choix-ico{display:grid;place-items:center;width:68px;height:68px;border:var(--t-trait) solid var(--t-bord);border-radius:50%;background:var(--accent);color:var(--accent-ink);box-shadow:2px 2px 0 var(--t-ombre-c)}
.pg-choix-ico svg{width:34px;height:34px}
.pg-choix-btn b{font-family:var(--t-titre);font-weight:400;font-size:23px;line-height:1.1}
.pg-choix-btn small{font-size:14px;font-weight:700;color:var(--t-texte-2)}

/* le QR code : de l'ordinateur au téléphone */
.pg-qr{display:flex;align-items:center;gap:18px;margin:0 0 18px;padding:14px 16px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);background:var(--t-carte-2);box-shadow:3px 3px 0 var(--t-ombre-c)}
.pg-choix + .pg-qr{margin:18px 0 0}
.pg-qr-svg{flex:none;width:136px;height:136px;border:var(--t-trait) solid var(--t-bord);border-radius:10px;background:#fff}
.pg-qr b{font-family:var(--t-titre);font-weight:400;font-size:22px;line-height:1.1}
.pg-qr p{margin:5px 0 0;font-size:14.5px;font-weight:600;line-height:1.45;color:var(--t-texte-2)}

/* les étapes */
.pg-etapes{list-style:none;margin:0;padding:12px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:20px 16px;counter-reset:pg}
.pg-etapes--pc{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.pg-etape{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px 16px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);background:var(--t-carte);
  box-shadow:3px 3px 0 var(--t-ombre-c);text-align:center}
.pg-num{position:absolute;top:-14px;left:-10px;display:grid;place-items:center;width:36px;height:36px;border:var(--t-trait) solid var(--t-bord);border-radius:50%;background:var(--accent);color:var(--accent-ink);
  font-family:var(--t-titre);font-size:20px;line-height:1;box-shadow:2px 2px 0 var(--t-ombre-c)}
.pg-vignette{display:flex;justify-content:center;width:100%}
.pg-ill{display:block;width:100%;max-width:152px;height:auto;overflow:visible}
.pg-ill--pc{max-width:250px}
.pg-etape h3{margin:2px 0 0;font-family:var(--t-titre);font-weight:400;font-size:20px;line-height:1.12}
.pg-etape p{margin:0;font-size:14px;font-weight:600;line-height:1.42;color:var(--t-texte-2)}
.pg-etape p b{color:var(--t-texte);font-weight:800}
.pg-etape p small{display:block;margin-top:5px;font-size:12px;font-weight:700;opacity:.85}
.pg-pc-action{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 16px}
.pg-pc-action span{font-size:14px;font-weight:700;color:var(--t-texte-2)}
.pg-gros{height:52px;padding:0 26px;border:var(--t-trait) solid var(--t-bord);border-radius:14px;background:var(--accent);color:var(--accent-ink);font-family:var(--t-titre);font-size:22px;cursor:pointer;
  box-shadow:3px 3px 0 var(--t-ombre-c);transition:transform var(--t-dur) var(--t-ease),box-shadow var(--t-dur) var(--t-ease)}
.pg-gros:hover:not([disabled]){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--t-ombre-c)}
.pg-gros:active:not([disabled]){transform:translate(3px,3px);box-shadow:0 0 0 var(--t-ombre-c)}
.pg-gros[disabled]{opacity:.7;cursor:progress}
.pg-note{margin:0 0 16px;padding:12px 14px;border:2px solid var(--t-bord);border-radius:var(--t-r-s);background:var(--t-carte-2);font-size:14px;font-weight:600;line-height:1.55}
.pg-note b{font-weight:800}

/* le pied */
.pg-pied{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 18px;border-top:var(--t-trait) solid var(--t-bord);background:var(--t-carte)}
.pg-pied-txt{flex:1 1 260px;font-size:13.5px;font-weight:700;color:var(--t-texte-2)}
.pg-lien{padding:6px 4px;border:0;background:none;color:var(--t-texte-2);font-family:inherit;font-size:13.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pg-lien:hover{color:var(--t-texte)}
.pg-fermer{height:40px;padding:0 20px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--t-carte-2);color:var(--t-texte);font-family:var(--t-titre);font-size:17px;cursor:pointer;
  box-shadow:2px 2px 0 var(--t-ombre-c);transition:transform var(--t-dur) var(--t-ease),box-shadow var(--t-dur) var(--t-ease)}
.pg-fermer:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--t-ombre-c)}

/* ── les écrans dessinés (SVG) ── */
.pg-ill .pg-corps{fill:var(--t-bord)}
.pg-ill .pg-ecran{fill:var(--t-fond-2)}
.pg-ill .pg-ilot{fill:var(--t-bord)}
.pg-ill .pg-bloc{fill:var(--t-bord-doux)}
.pg-ill .pg-barre{fill:var(--t-carte);stroke:var(--t-bord);stroke-width:1.5}
.pg-ill .pg-feuille{fill:var(--t-carte);stroke:var(--t-bord);stroke-width:2}
.pg-ill .pg-champ{fill:var(--t-fond-2);stroke:var(--t-bord-doux);stroke-width:1}
.pg-ill .pg-sep{fill:var(--t-bord-doux)}
.pg-ill .pg-voile{fill:rgba(0,0,0,.5)}
.pg-ill .pg-ligne{fill:none;stroke:var(--t-texte);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pg-ill .pg-pt{fill:var(--t-texte)}
.pg-ill .pg-t{fill:var(--t-texte);font-family:var(--t-corps)}
.pg-ill .pg-gras{font-weight:800}
.pg-ill .pg-vise{fill:var(--accent);stroke:var(--t-bord);stroke-width:1.5}
.pg-ill .pg-sur{fill:var(--accent-ink)}
.pg-ill .pg-lsur{stroke:var(--accent-ink)}
.pg-ill .pg-dock{fill:var(--t-bord-doux)}
.pg-ill .pg-app{stroke:var(--t-bord);stroke-width:1.2}
.pg-ill .pg-c1{fill:var(--t-bleu)}.pg-ill .pg-c2{fill:var(--t-rouge)}.pg-ill .pg-c3{fill:var(--t-vert)}.pg-ill .pg-c4{fill:var(--t-aura)}
.pg-ill .pg-c5{fill:var(--t-jaune)}.pg-ill .pg-c6{fill:var(--t-texte-3)}.pg-ill .pg-c7{fill:var(--t-carte-2)}
.pg-ill .pg-ring-o{fill:none;stroke:var(--t-bord);stroke-width:6.5}
.pg-ill .pg-ring-i{fill:none;stroke:var(--accent);stroke-width:3.4}
.pg-ill .pg-ping{transform-box:fill-box;transform-origin:center;animation:pg-ping 1.7s ease-in-out infinite}
@keyframes pg-ping{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){.pg-ill .pg-ping{animation:none}.pg-overlay,.pg-card{transition:none}}
body.low-perf .pg-ill .pg-ping{animation:none}

/* l'invitation (PC) : la carte de rappel du site, aux couleurs de l'app */
.kg-install .kg-install-ic{padding:0;overflow:hidden;background:var(--t-carte)}
.kg-install .kg-install-ic img{display:block;width:100%;height:100%;object-fit:cover}

@media (max-width:640px){
  .pg-overlay{padding:0;align-items:end}
  .pg-card{max-height:100vh;max-height:100dvh;border-radius:var(--t-r) var(--t-r) 0 0;border-bottom:0}
  .pg-tete{gap:10px;padding:12px}
  .pg-tete h2{font-size:24px}
  .pg-tete-ico{width:44px;height:44px}
  .pg-bonus{display:none}
  .pg-corps-zone{padding:14px 12px 18px}
  .pg-onglets{padding:12px 12px 0}
  .pg-onglet{height:38px;padding:0 12px;font-size:15px}
  .pg-etapes,.pg-etapes--pc{grid-template-columns:1fr 1fr;gap:20px 12px}
  .pg-etapes--pc{grid-template-columns:1fr}
  .pg-qr{flex-direction:column;text-align:center}
  .pg-pied{padding:10px 12px}
}

/* ══ Kit des modales GM « Trait » (04/10/2026) ═══════════════════════════════════════════════════════════════════════
   Les modales de CRÉATION / MODIFICATION d'un event (pages/events/script.js) et d'un objectif (pages/objectifs/script.js)
   parlent enfin la langue du site : contour d'encre, aplats francs, ombre dure, Lilita One pour les titres, jetons papier / nuit.
   Les deux portent la classe `tg-modal` ; elles partagent le squelette (en-tête, corps qui défile, pied) et les mêmes champs
   (.gm-f, .gm-in, .gm-sw, .gm-sec…). Les anciennes règles de pages/objectifs/style.css (verre sombre, filets d'un pixel, halos)
   restent en place mais perdent : chaque règle ci-dessous double sa classe racine pour passer devant, même chargée plus tôt. */
.modal-card:has(.tg-modal){max-width:none;width:auto;padding:0;background:none;border:0;box-shadow:none;max-height:min(96vh,96dvh);overflow:visible}
.modal-card:has(.tg-modal) .modal-close{display:none}
.tg-modal.gm-obj-modal-flex{align-items:center}
.tg-modal.tg-modal .gm-obj-card,.tg-modal.tg-modal .tg-card{position:relative;display:flex;flex-direction:column;max-height:min(90vh,90dvh);background:var(--t-fond);color:var(--t-texte);
  border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);box-shadow:6px 6px 0 var(--t-ombre-c);-webkit-backdrop-filter:none;backdrop-filter:none;overflow:hidden}
.tg-modal.tg-modal .tg-card{width:min(620px,94vw)}
.tg-modal.tg-modal .gm-obj-head{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;border-bottom:var(--t-trait) solid var(--t-bord);background:var(--t-carte)}
.tg-modal.tg-modal .gm-obj-head h3{margin:0;flex:1;min-width:0;font-family:var(--t-titre);font-weight:400;font-size:25px;line-height:1.05;letter-spacing:.005em}
.tg-modal.tg-modal .gm-obj-kind{flex:none;display:inline-flex;align-items:center;height:26px;padding:0 11px;border:2px solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--accent);
  color:var(--accent-ink);font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.tg-modal.tg-modal .gm-obj-x{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border:var(--t-trait) solid var(--t-bord);border-radius:11px;background:var(--t-carte-2);color:var(--t-texte);
  font-size:22px;line-height:1;cursor:pointer;box-shadow:2px 2px 0 var(--t-ombre-c);transition:transform var(--t-dur) var(--t-ease),box-shadow var(--t-dur) var(--t-ease)}
.tg-modal.tg-modal .gm-obj-x:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--t-ombre-c);color:var(--t-texte)}
.tg-modal.tg-modal .gm-obj-x:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--t-ombre-c)}
.tg-modal.tg-modal .gm-obj-body{padding:14px 16px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:13px;scrollbar-width:thin;scrollbar-color:var(--t-bord) transparent}
.tg-modal.tg-modal .gm-obj-body::-webkit-scrollbar{width:9px}
.tg-modal.tg-modal .gm-obj-body::-webkit-scrollbar-thumb{background:var(--t-bord);border-radius:6px;border:2px solid var(--t-fond)}
.tg-modal.tg-modal .gm-obj-foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 16px;border-top:var(--t-trait) solid var(--t-bord);background:var(--t-carte)}
.tg-modal.tg-modal .gm-obj-spacer{flex:1}

/* champs */
.tg-modal.tg-modal .gm-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.tg-modal.tg-modal .gm-f>label{font-size:12px;font-weight:800;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--t-texte-2)}
.tg-modal.tg-modal .gm-opt{text-transform:none;letter-spacing:0;font-weight:700;opacity:.85}
.tg-modal.tg-modal .gm-nom{margin-left:6px;padding:1px 9px;border:2px solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--t-fond-2);color:var(--t-texte);font-size:11.5px;letter-spacing:0;text-transform:none}
.tg-modal.tg-modal .gm-in{width:100%;min-height:42px;padding:8px 12px;box-sizing:border-box;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-s);background:var(--t-carte);color:var(--t-texte);
  font-family:var(--t-corps);font-size:15px;font-weight:600;line-height:1.3;box-shadow:none;transition:box-shadow var(--t-dur) var(--t-ease)}
.tg-modal.tg-modal textarea.gm-in{min-height:66px;resize:vertical}
.tg-modal.tg-modal select.gm-in{cursor:pointer}
.tg-modal.tg-modal .gm-in:focus{outline:none;border-color:var(--t-bord);box-shadow:0 0 0 3px var(--accent)}
.tg-modal.tg-modal .gm-in::placeholder{color:var(--t-texte-3);font-weight:600}
.tg-modal.tg-modal .gm-in.is-bad{border-color:var(--t-rouge);box-shadow:0 0 0 3px color-mix(in srgb,var(--t-rouge) 38%,transparent)}
.tg-modal.tg-modal .gm-in[disabled]{opacity:.6;cursor:not-allowed}
.tg-modal.tg-modal .gm-hint{font-size:12.5px;font-weight:600;line-height:1.4;color:var(--t-texte-2);margin:0}
.tg-modal.tg-modal .gm-hint b{color:var(--t-texte);font-weight:800}
.tg-modal.tg-modal .gm-note{padding:9px 11px;border:2px solid var(--t-bord-doux);border-radius:var(--t-r-s);background:var(--t-fond-2)}
.tg-modal.tg-modal .gm-texte{margin:0;font-size:15px;font-weight:600;line-height:1.5}
.tg-modal.tg-modal .gm-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tg-modal.tg-modal .gm-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tg-modal.tg-modal .gm-sec{display:flex;align-items:center;gap:10px;margin-top:6px}
.tg-modal.tg-modal .gm-sec span{font-family:var(--t-titre);font-size:16px;font-weight:400;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:var(--t-texte);white-space:nowrap}
.tg-modal.tg-modal .gm-sec::after{content:"";flex:1;height:var(--t-trait);border-radius:2px;background:var(--t-bord);opacity:.22}
.tg-modal.tg-modal .gm-pill{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;padding:8px 12px;box-sizing:border-box;border:2px solid var(--t-bord);border-radius:var(--t-r-s);background:var(--t-fond-2)}
.tg-modal.tg-modal .gm-pill-k{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--t-texte-2)}
.tg-modal.tg-modal .gm-pill-v{font-size:14px;font-weight:800;color:var(--t-texte);text-transform:capitalize}
.tg-modal.tg-modal .gm-unit-tag{text-transform:none;letter-spacing:0;opacity:.85}
.tg-modal.tg-modal .gm-ok{font-size:13.5px;font-weight:800;color:var(--t-vert)}
.tg-modal.tg-modal .gm-err{margin:0;padding:10px 12px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-s);background:var(--t-rouge);color:#fff;font-size:14px;font-weight:800;line-height:1.35}
.tg-modal.tg-modal .gm-err[hidden],.tg-modal.tg-modal .gm-reveal[hidden],.tg-modal.tg-modal [hidden].gm-bloc-corps{display:none}
.tg-modal.tg-modal .gm-lien{padding:0;border:0;background:none;color:var(--t-texte);font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* interrupteur (un seul composant, pour les <button> des events et les <span> des objectifs) */
.tg-modal.tg-modal .gm-sw{display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:none;color:var(--t-texte);font-family:var(--t-corps);font-size:14px;font-weight:800;cursor:pointer}
.tg-modal.tg-modal .gm-sw i{position:relative;flex:none;width:48px;height:28px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--t-fond-2);transition:background var(--t-dur) var(--t-ease)}
.tg-modal.tg-modal .gm-sw i::after{content:"";position:absolute;top:50%;left:3px;width:15px;height:15px;margin:-7.5px 0 0;border-radius:50%;background:var(--t-bord);transition:left var(--t-dur) var(--t-ease)}
.tg-modal.tg-modal .gm-sw.on i{background:var(--accent)}
.tg-modal.tg-modal .gm-sw.on i::after{left:24px;background:var(--t-bord)}
.tg-modal.tg-modal .gm-sw.on{color:var(--t-texte)}
.tg-modal.tg-modal .gm-sw:focus-visible i{outline:3px solid var(--t-texte);outline-offset:2px}

/* boutons */
.tg-modal.tg-modal .gm-btn,.tg-modal.tg-modal .gm-ghost{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 18px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-pill);
  background:var(--t-carte-2);color:var(--t-texte);font-family:var(--t-titre);font-size:16px;font-weight:400;line-height:1;cursor:pointer;box-shadow:2px 2px 0 var(--t-ombre-c);
  transition:transform var(--t-dur) var(--t-ease),box-shadow var(--t-dur) var(--t-ease),background var(--t-dur)}
.tg-modal.tg-modal .gm-ghost{min-height:36px;padding:0 14px;font-size:14.5px;background:var(--t-carte)}
.tg-modal.tg-modal .gm-btn:hover:not([disabled]),.tg-modal.tg-modal .gm-ghost:hover:not([disabled]){transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--t-ombre-c);color:var(--t-texte);border-color:var(--t-bord)}
.tg-modal.tg-modal .gm-btn:active:not([disabled]),.tg-modal.tg-modal .gm-ghost:active:not([disabled]){transform:translate(2px,2px);box-shadow:0 0 0 var(--t-ombre-c)}
.tg-modal.tg-modal .gm-btn.primary{background:var(--accent);color:var(--accent-ink);filter:none}
.tg-modal.tg-modal .gm-btn.danger,.tg-modal.tg-modal .gm-ghost.danger{background:var(--t-rouge);color:#fff;border-color:var(--t-bord)}
.tg-modal.tg-modal .gm-ghost.danger{background:var(--t-carte);color:var(--t-rouge)}
.tg-modal.tg-modal .gm-ghost.danger:hover:not([disabled]){background:var(--t-rouge);color:#fff}
.tg-modal.tg-modal .gm-btn[disabled],.tg-modal.tg-modal .gm-ghost[disabled]{opacity:.65;cursor:progress;box-shadow:none}
.tg-modal.tg-modal .gm-btn:focus-visible,.tg-modal.tg-modal .gm-ghost:focus-visible{outline:3px solid var(--t-texte);outline-offset:2px}

/* le sélecteur d'icônes (event) : de vraies icônes, une case par icône */
.tg-modal.tg-modal .gm-icones{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px;padding:10px;border:2px solid var(--t-bord-doux);border-radius:var(--t-r-s);background:var(--t-fond-2);max-height:178px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--t-bord) transparent}
.tg-modal.tg-modal .gm-icone{display:grid;place-items:center;aspect-ratio:1;min-height:44px;padding:0;border:2px solid var(--t-bord);border-radius:11px;background:var(--t-carte);color:var(--t-texte);cursor:pointer;box-shadow:2px 2px 0 var(--t-ombre-c);
  transition:transform var(--t-dur) var(--t-ease),box-shadow var(--t-dur) var(--t-ease),background var(--t-dur)}
.tg-modal.tg-modal .gm-icone svg,.tg-modal.tg-modal .gm-icone .gm-ico{width:24px;height:24px}
.tg-modal.tg-modal .gm-icone:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--t-ombre-c)}
.tg-modal.tg-modal .gm-icone.is-on{background:var(--accent);color:var(--accent-ink);transform:translate(1px,1px);box-shadow:0 0 0 var(--t-ombre-c)}
.tg-modal.tg-modal .gm-icone:focus-visible{outline:3px solid var(--t-texte);outline-offset:2px}
.tg-modal.tg-modal .gm-icone-vide{font-weight:800;opacity:.5}

/* le prix : qui peut payer */
.tg-modal.tg-modal .gm-payable{margin:0;padding:9px 12px;border:2px solid var(--t-bord);border-radius:var(--t-r-s);background:var(--t-carte-2);font-size:14px;font-weight:700;line-height:1.35}
.tg-modal.tg-modal .gm-payable b{font-weight:800}
.tg-modal.tg-modal .gm-payable.is-gratuit{background:var(--t-vert);color:#fff}

/* un bloc à interrupteur (Mise) */
.tg-modal.tg-modal .gm-bloc{border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-s);background:var(--t-carte-2);box-shadow:2px 2px 0 var(--t-ombre-c)}
.tg-modal.tg-modal .gm-bloc-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px}
.tg-modal.tg-modal .gm-bloc-tete b{display:block;font-family:var(--t-titre);font-weight:400;font-size:18px;line-height:1.1}
.tg-modal.tg-modal .gm-bloc-tete small{display:block;margin-top:2px;font-size:12.5px;font-weight:600;line-height:1.35;color:var(--t-texte-2)}
.tg-modal.tg-modal .gm-bloc-corps{padding:2px 13px 13px;border-top:2px solid var(--t-bord-doux);margin-top:0;padding-top:12px}

/* états (actif, direct seulement, remise à zéro) */
.tg-modal.tg-modal .gm-etats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tg-modal.tg-modal .gm-etat{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:8px 12px;border:2px solid var(--t-bord);border-radius:var(--t-r-s);background:var(--t-fond-2)}
.tg-modal.tg-modal .gm-etat>span:first-child{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--t-texte-2)}
.tg-modal.tg-modal .gm-etat--reset{margin-top:2px}
.tg-modal.tg-modal .gm-confirm-ligne{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13.5px;font-weight:700}

/* bannière : aperçu + actions */
.tg-modal.tg-modal .gm-banner-zone{display:flex;align-items:center;gap:12px}
.tg-modal.tg-modal .gm-banner-prev{flex:none;width:132px;height:74px;display:grid;place-items:center;overflow:hidden;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-s);background:var(--t-fond-2);box-shadow:2px 2px 0 var(--t-ombre-c)}
.tg-modal.tg-modal .gm-banner-prev img{display:block;width:100%;height:100%;object-fit:cover}
.tg-modal.tg-modal .gm-banner-prev.is-vide{border-style:dashed;box-shadow:none}
.tg-modal.tg-modal .gm-banner-prev span{font-size:12.5px;font-weight:800;color:var(--t-texte-3)}
.tg-modal.tg-modal .gm-banner-actions{display:flex;flex-wrap:wrap;gap:8px}
.tg-modal.tg-modal .gm-retrait{margin:-4px 0 0}

/* ── propres à la modale d'objectif : paliers, Plus Ultra, monnaie, bannière, déblocage ── */
.tg-modal.tg-modal .gm-tiers,.tg-modal.tg-modal .gm-utiers{--gm-ligne:40px;--gm-gout:6px;--gm-pad:8px;border:2px solid var(--t-bord-doux);border-radius:var(--t-r-s);background:var(--t-fond-2)}
.tg-modal.tg-modal .gm-tiers::-webkit-scrollbar-thumb,.tg-modal.tg-modal .gm-utiers::-webkit-scrollbar-thumb{background:var(--t-bord);border-radius:4px}
.tg-modal.tg-modal .gm-tier{grid-template-columns:1fr 96px 36px;gap:6px}
.tg-modal.tg-modal .gm-tier .gm-in{min-height:38px;padding:4px 10px;font-size:14px;border-width:2px}
.tg-modal.tg-modal .gm-tier-x{height:38px;display:grid;place-items:center;padding:0;border:2px solid var(--t-bord);border-radius:10px;background:var(--t-carte);color:var(--t-rouge);font-size:18px;line-height:1;cursor:pointer;box-shadow:2px 2px 0 var(--t-ombre-c)}
.tg-modal.tg-modal .gm-tier-x:hover{background:var(--t-rouge);color:#fff}
.tg-modal.tg-modal .gm-add{align-self:flex-start;min-height:36px;padding:0 14px;border:2px dashed var(--t-bord);border-radius:var(--t-r-pill);background:none;color:var(--t-texte);font-family:var(--t-corps);font-size:13.5px;font-weight:800;cursor:pointer;transition:background var(--t-dur)}
.tg-modal.tg-modal .gm-add:hover{background:var(--accent);color:var(--accent-ink);border-style:solid}
.tg-modal.tg-modal .gm-ultra,.tg-modal.tg-modal .gm-coin{padding:11px 13px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-s);background:var(--t-carte-2);box-shadow:2px 2px 0 var(--t-ombre-c);display:flex;flex-direction:column;gap:9px}
.tg-modal.tg-modal .gm-ultra-head,.tg-modal.tg-modal .gm-coin-head{display:flex;align-items:center;gap:10px}
.tg-modal.tg-modal .gm-ultra-head b,.tg-modal.tg-modal .gm-coin-head b{flex:1;font-family:var(--t-titre);font-weight:400;font-size:17px;line-height:1.1;color:var(--t-texte)}
.tg-modal.tg-modal .gm-ultra-hint,.tg-modal.tg-modal .gm-coin-hint{font-size:12.5px;font-weight:600;line-height:1.4;color:var(--t-texte-2)}
.tg-modal.tg-modal .gm-ultra-hint strong{color:var(--t-texte)}
.tg-modal.tg-modal .gm-ultra .gm-in,.tg-modal.tg-modal .gm-coin .gm-in{border-color:var(--t-bord)}
.tg-modal.tg-modal .gm-ultra .gm-add{border-color:var(--t-bord);color:var(--t-texte)}
.tg-modal.tg-modal .gm-ultra .gm-sw.on i,.tg-modal.tg-modal .gm-coin .gm-sw.on i{background:var(--accent)}
.tg-modal.tg-modal .gm-ultra .gm-sw.on i::after,.tg-modal.tg-modal .gm-coin .gm-sw.on i::after{background:var(--t-bord)}
.tg-modal.tg-modal .gm-ultra .gm-sw.on,.tg-modal.tg-modal .gm-coin .gm-sw.on{color:var(--t-texte)}
.tg-modal.tg-modal .gm-coin-face img{border:2px solid var(--t-bord);border-radius:50%;background:var(--t-fond-2)}
.tg-modal.tg-modal .gm-coin-pick{border:2px dashed var(--t-bord);border-radius:var(--t-r-s);background:none;color:var(--t-texte);font-weight:800}
.tg-modal.tg-modal .gm-coin-pick:hover{background:var(--accent);color:var(--accent-ink);border-style:solid}
.tg-modal.tg-modal .gm-banner-wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tg-modal.tg-modal .gm-banner{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 14px;border:2px dashed var(--t-bord);border-radius:var(--t-r-s);background:none;color:var(--t-texte);cursor:pointer;transition:background var(--t-dur)}
.tg-modal.tg-modal .gm-banner:hover{background:var(--accent);color:var(--accent-ink);border-style:solid}
.tg-modal.tg-modal .gm-banner svg{color:inherit}
.tg-modal.tg-modal .gm-banner-t{font-size:14px;font-weight:800}
.tg-modal.tg-modal .gm-banner-act{min-height:36px;padding:0 13px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--t-carte);color:var(--t-texte);font-family:var(--t-corps);font-size:13.5px;font-weight:800;cursor:pointer;box-shadow:2px 2px 0 var(--t-ombre-c)}
.tg-modal.tg-modal .gm-banner-act.danger{color:var(--t-rouge)}
.tg-modal.tg-modal .gm-banner-act:hover{background:var(--accent);color:var(--accent-ink)}
.tg-modal.tg-modal .gm-banner-act.danger:hover{background:var(--t-rouge);color:#fff}
.tg-modal.tg-modal .gm-lock{display:flex;flex-direction:column;gap:9px}
.tg-modal.tg-modal .gm-lock select.gm-in{appearance:auto;cursor:pointer}
.tg-modal.tg-modal .gm-lock-hint{margin:0;font-size:12.5px;font-weight:600;line-height:1.4;color:var(--t-texte-2)}
.tg-modal.tg-modal .gm-lock-hint b{color:var(--t-texte)}
.tg-modal.tg-modal .gm-lock-err{color:var(--t-rouge);font-weight:800}
.tg-modal.tg-modal .ges-banner-confirm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:800;color:var(--t-texte)}
.tg-modal.tg-modal .ges-banner-cancel,.tg-modal.tg-modal .ges-banner-yes{min-height:32px;padding:0 12px;border:2px solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--t-carte);color:var(--t-texte);font-family:var(--t-corps);font-size:13px;font-weight:800;cursor:pointer}
.tg-modal.tg-modal .ges-banner-yes{background:var(--t-rouge);color:#fff}
.tg-modal.tg-modal .ges-slide-text{font-size:14px;font-weight:800}
.tg-modal .gm-obj-preview-title{font-family:var(--t-titre);font-size:14px;font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--t-voile-texte,#fff)}

@media (max-width:620px){
  .tg-modal.tg-modal .gm-row2,.tg-modal.tg-modal .gm-etats{grid-template-columns:1fr}
  .tg-modal.tg-modal .gm-banner-zone{flex-direction:column;align-items:stretch}
  .tg-modal.tg-modal .gm-banner-prev{width:100%;height:120px}
  .tg-modal.tg-modal .gm-obj-head h3{font-size:21px}
}
@media (prefers-reduced-motion:reduce){.tg-modal.tg-modal .gm-btn,.tg-modal.tg-modal .gm-ghost,.tg-modal.tg-modal .gm-icone,.tg-modal.tg-modal .gm-obj-x,.tg-modal.tg-modal .gm-sw i,.tg-modal.tg-modal .gm-sw i::after{transition:none}}