/* ══════════════════════════════════════════════════════════════════════════
   CAHIER ET ARDOISE : le design du site (refonte d'octobre 2026).
   Theme sombre (par defaut) = l'ardoise et la craie.
   Theme clair (html.light)   = le cahier a grands carreaux, l'encre bleue, la marge rouge.
   Charge APRES style.css : a specificite egale, ces regles gagnent.
   Principe : on change d'abord les jetons (couleurs, polices, rayons, ombres)
   dont tout le site herite, puis on redessine les composants communs.
   Aucun flou, aucune ombre floue animee : les ombres sont pleines (une seule
   couche, rien a recalculer), le site reste fluide sur un telephone modeste.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons ──────────────────────────────────────────────────────────── */
:root {
  /* Ardoise */
  --bg:      #1f2a26;
  --card:    #26332e;
  --card2:   #2e3d37;
  --text:    #eef1ea;
  --muted:   #a7b3ab;
  --accent:  #ffe169;          /* craie jaune : reperes, liens, etat actif */
  --board:   #3d64b8;          /* craie bleue : boutons d'action (texte blanc) */
  --board2:  #34579f;
  --red:     #ff8e8e;
  --yellow:  #ffe169;
  --gold:    #ffe169;
  --border:  rgba(238,241,234,.22);
  --glow:    transparent;
  --shadow:  0 3px 0 rgba(0,0,0,.28);

  /* Nouveaux jetons du design */
  --ink:        #eef1ea;       /* trait principal (craie blanche) */
  --ink-soft:   rgba(238,241,234,.55);
  --line:       rgba(238,241,234,.3);   /* filet des cartes */
  --mark:       rgba(255,225,105,.5);   /* surligneur */
  --margin:     #ff8e8e;                /* trait rouge (marge, corrections) */
  --hard:       rgba(0,0,0,.32);        /* ombre pleine sous les cartes */
  --frame:      #6b4a2b;                /* cadre en bois de l'ardoise */
  --on-board:   #ffffff;

  --font-display: 'Archivo Black', 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-hand:    'Caveat', 'Segoe Print', cursive;

  /* Rayons : du papier et de l'ardoise, pas des pilules */
  --radius: 8px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* Elevation : ombres pleines decalees, comme une feuille posee sur une autre */
  --elev-1: 0 2px 0 var(--hard);
  --elev-2: 0 3px 0 var(--hard);
  --elev-3: 0 6px 0 var(--hard);
  --hairline: transparent;
  --shine: none;
}

html.light {
  /* Cahier */
  --bg:      #fdfdf9;
  --card:    #ffffff;
  --card2:   #f3f6fc;
  --text:    #22252b;
  --muted:   #5e6470;
  --accent:  #173a8a;          /* encre bleue */
  --board:   #173a8a;
  --board2:  #122f72;
  --red:     #d23a4f;
  --yellow:  #e0a800;
  --gold:    #b8860b;
  --border:  rgba(34,37,43,.28);
  --shadow:  0 2px 0 rgba(23,58,138,.16);

  --ink:      #22252b;
  --ink-soft: rgba(34,37,43,.5);
  --line:     rgba(34,37,43,.8);
  --mark:     #fff27a;
  --margin:   #e2485d;
  --hard:     rgba(23,58,138,.16);
  --on-board: #ffffff;
}

/* ── 2. Le fond : l'ardoise ou la page de cahier ─────────────────────────── */
html, body {
  font-family: var(--font-body);
  background-color: var(--bg);
  background-image: radial-gradient(130% 90% at 25% 0%, rgba(255,255,255,.055), transparent 62%);
  background-size: 100% 100%;
  background-attachment: fixed;
  color: var(--text);
}
html.light body {
  background-color: var(--bg);
  /* Seyes : un trait fort tous les 32 px, trois fins entre deux */
  background-image:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(80,130,205,.42) 31px 32px),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(120,160,220,.2) 7px 8px);
  background-size: 100% 100%;
}
/* La marge rouge du cahier, sur les ecrans assez larges pour qu'elle ne gene pas le contenu */
@media (min-width: 700px) {
  html.light body::before {
    content: ""; position: fixed; top: 0; bottom: 0; left: 56px; width: 2px;
    background: var(--margin); opacity: .75; pointer-events: none; z-index: -1;
  }
}
/* L'ardoise a son cadre en bois sur tablette et ordinateur */
@media (min-width: 700px) {
  html:not(.light) body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    box-shadow: inset 0 0 0 10px var(--frame), inset 0 0 0 12px rgba(0,0,0,.25);
  }
}


/* ── 3. Typographie ─────────────────────────────────────────────────────── */
h1 {
  font-family: var(--font-display);
  font-weight: 400;                 /* Archivo Black porte deja sa graisse */
  letter-spacing: -.01em;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}
h1, h2, h3,
.btn, .nav-tab, .btn-back, .btn-primary,
.lb-title, .lb-header, .chat-title, .game-header-center,
.idea-title, .locker-detail-title,
.book-reader-title, .feed-overlay-title, .challenge-name,
.help-modal-title, .comment-modal-title, .chatbot-header-txt,
.shop-fn-title, .shop-fn-detail-name,
.streak-main, .level-main, .honor-reward-title,
.dailygift-itemname, .game-btn-name {
  letter-spacing: 0;
}
h2, h3, .btn, .nav-tab, .btn-back, .btn-primary { font-weight: 400; }
/* Le surligneur : a poser sur un mot cle (<mark>) */
mark {
  background: linear-gradient(transparent 58%, var(--mark) 58%);
  color: inherit; padding: 0 .08em;
}
/* L'ecriture a la main : annotations, petits mots du prof */
.hand { font-family: var(--font-hand); font-weight: 700; letter-spacing: 0; }
.subtitle { color: var(--muted); }

/* ── 4. Cartes et fenetres : une feuille posee, un filet net, une ombre pleine ── */
.card, .overlay-box, .recovery-modal, .help-modal, .comment-modal, .community-modal,
.giftrecv-modal, .chatbot-panel, .help-panel {
  background: var(--card);
  border: 1.5px solid var(--line);
  box-shadow: var(--elev-3);
}
.landing-card, .profile-nav-card, .global-lb-card, .idea-card,
.read-card, .streak-banner, .onboard-quest,
.profile-badges-wrap, .announcement-box, .shop-tile, .challenge-row, .friend-row {
  border: 1.5px solid var(--line);
  box-shadow: var(--elev-1);
}
/* Le liseré de lumiere « verre poli » n'a plus de sens sur du papier ou de l'ardoise */
.profile-nav-card::before { display: none !important; }
.profile-modal-header { border-bottom: 1.5px dashed var(--border); }

/* Fenetres : un voile simple, sans flou (le flou plein ecran coute cher au GPU) */
.overlay {
  background: rgba(14,20,18,.72);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.light .overlay { background: rgba(34,37,43,.42); }

/* ── 5. Boutons ─────────────────────────────────────────────────────────── */
.btn { border-radius: var(--r-sm); }
.btn-primary {
  background: var(--board);
  color: var(--on-board);
  border: 2px solid rgba(0,0,0,.35);
  box-shadow: 0 3px 0 rgba(0,0,0,.35);
}
html.light .btn-primary { border-color: #0d2050; box-shadow: 0 3px 0 #0d2050; }
.btn-primary:hover { box-shadow: 0 4px 0 rgba(0,0,0,.35); transform: translateY(-1px); }
html.light .btn-primary:hover { box-shadow: 0 4px 0 #0d2050; }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--line);
}
.btn-secondary:hover { background: var(--card2); }

/* ── 6. Champs de saisie ────────────────────────────────────────────────── */
input[type="text"], input[type="password"], input[type="search"], input[type="number"],
input:not([type]), textarea, select {
  font-family: var(--font-body);
}
.recovery-input, .chat-input, #chat-input {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
}

/* ── 7. Barre de navigation ─────────────────────────────────────────────────
   Telephone et tablette : une barre pleine largeur en bas, comme un onglet de classeur.
   Ordinateur (>= 1024 px) : une colonne a gauche, le contenu se decale d'autant. */
.main-nav {
  top: auto; bottom: 0; left: 0; right: 0; transform: none;
  max-width: none; width: 100%;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  background: var(--card);
  border: none; border-top: 1.5px solid var(--line);
  border-radius: 0;
  box-shadow: 0 -2px 0 var(--hard);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  overflow: visible;
}
.nav-tab {
  flex-direction: column; justify-content: center; gap: 2px;
  padding: 6px 2px 5px;
  border-radius: var(--r-sm);
  font-family: var(--font-body); font-weight: 700; font-size: .7rem;
  color: var(--muted); background: transparent; box-shadow: none;
  min-height: 52px;
}
.nav-tab.active {
  background: transparent; color: var(--accent); box-shadow: none;
}
/* L'onglet actif est souligne a la main (trait ondule) */
.nav-tab.active > span:not(.nav-tab-icon):not(.profile-card-badge) {
  text-decoration: underline wavy var(--margin) 1.5px;
  text-underline-offset: 3px;
}
.nav-tab-icon { font-size: 1.15rem; }

/* Le contenu ne passe jamais sous la barre du bas */
@media (max-width: 1023px) {
  body.nav-bottom-visible .screen { padding-bottom: 96px; }
  body.nav-bottom-visible .btn-help-float,
  body.nav-bottom-visible .btn-chatbot-float { bottom: 84px; }
}

@media (min-width: 1024px) {
  .main-nav {
    top: 0; bottom: 0; right: auto; width: 96px;
    grid-template-columns: 1fr; grid-auto-rows: min-content; align-content: center; gap: 6px;
    padding: 16px 8px;
    border-top: none; border-right: 1.5px solid var(--line);
    box-shadow: 2px 0 0 var(--hard);
  }
  .nav-tab { min-height: 64px; font-size: .74rem; }
  .nav-tab-icon { font-size: 1.35rem; }
  body.nav-bottom-visible { padding-left: 96px; }
  body.nav-bottom-visible .btn-help-float { left: 112px; }
  /* Le cadre de l'ardoise et la marge du cahier commencent apres la colonne */
  html.light body.nav-bottom-visible::before { left: 152px; }
}

/* ── 8. Largeur utile selon l'ecran (telephone, tablette, ordinateur) ──────── */
@media (min-width: 700px) {
  .screen { padding-left: 28px; padding-right: 28px; }
  .card { max-width: 440px; }
}
@media (min-width: 1024px) {
  .screen { padding-left: 40px; padding-right: 40px; }
  .card { max-width: 480px; }
}

/* ── 9. Accessibilite et sobriete ───────────────────────────────────────── */
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .btn-primary:active { transform: none; }
}


/* ══ Icones : un trait d'encre ou de craie, de la couleur du texte ══════════
   Le relief (copies decalees, degre de lumiere, ombre) n'a pas sa place sur du
   papier ou une ardoise : on garde le dessin lucide, en trait simple. */
.ic3d { transform: none; }
.ic3d-depth { display: none; }
.ic3d-face { color: currentColor; filter: none; }
.ic3d-face path, .ic3d-face circle, .ic3d-face rect, .ic3d-face line,
.ic3d-face polyline, .ic3d-face polygon, .ic3d-face ellipse { stroke: currentColor !important; }
html.light .ic3d-face { filter: none; }

/* ══ Sequence 2 : ACCUEIL ════════════════════════════════════════════════════
   Une page de cahier datee du jour : un titre surligne, deux « lecons » (les
   jeux et le quiz), trois cases pour le reste, le tableau d'honneur.
   Telephone : une colonne. Tablette : les deux lecons cote a cote.
   Ordinateur : la page a gauche, le tableau d'honneur a droite. */
#screen-landing {
  background: none;
  justify-content: flex-start;
  padding-top: 64px;
  gap: 14px;
}
#screen-landing .logo-full { display: none; }
.landing-head { width: 100%; max-width: 480px; text-align: left; display: grid; gap: 2px; }
.landing-date {
  font-family: var(--font-hand); font-weight: 700; font-size: 1.25rem;
  color: var(--accent); text-transform: none; margin: 0;
}
.landing-date::first-letter { text-transform: uppercase; }
.landing-title {
  font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.05; margin: 0;
  text-wrap: balance;
}
#landing-subtitle { margin: 4px 0 0; font-size: .92rem; color: var(--muted); text-align: left; }

.landing-card,
.landing-card--hero, .landing-card--hero-alt,
.landing-card--tile, .landing-card--tile-event {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--elev-2);
  color: var(--text);
}
.landing-card:hover {
  border-color: var(--line);
  box-shadow: 0 5px 0 var(--hard);
  transform: translateY(-2px);
}
.landing-card:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--hard); }
.landing-card--hero::after, .landing-card--hero-alt::after { display: none; }
.landing-card h2, .landing-card--hero h2, .landing-card--tile h2 { color: var(--text); }
.landing-card--hero h2 { font-size: 1.45rem; }
.landing-card--hero p, .landing-card--hero-alt p, .landing-card p { color: var(--muted); }
.landing-icon, .landing-card--tile-event .landing-icon svg { color: var(--accent); }
/* « En tete d'affiche », « Le plus joue » : une annotation du prof, a l'encre rouge */
.landing-eyebrow {
  font-family: var(--font-hand); font-weight: 700; font-size: 1.15rem;
  letter-spacing: 0; text-transform: none; color: var(--margin);
}
.landing-chip {
  height: 26px; padding: 0 9px; border-radius: var(--r-sm);
  background: transparent; border: 1.5px solid var(--border);
  color: var(--text); font-size: .72rem; font-weight: 700;
}
.landing-card--tile { min-height: 100px; }
.landing-card--tile-event .event-card-countdown { color: var(--margin); }
.landing-card--community:hover { box-shadow: 0 5px 0 var(--hard); }

/* Photos en fond des cartes d'accueil. La photo occupe le cote droit (ou le haut
   des tuiles) et un voile de la couleur de la carte la recouvre du cote du texte :
   les ecrits restent toujours sur un fond uni ou presque. */
:root:root .landing-card { position: relative; overflow: hidden; isolation: isolate; }
:root:root .landing-card > * { position: relative; z-index: 1; }
:root:root .landing-card::before {
  content: ""; display: block; position: absolute; inset: 0; height: auto; opacity: 1; border-radius: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(90deg, var(--card) 0%, var(--card) 38%, color-mix(in srgb, var(--card) 72%, transparent) 62%, color-mix(in srgb, var(--card) 30%, transparent) 100%), var(--photo, none);
  background-size: cover, cover; background-position: center, right center;
}
:root:root .landing-card--tile::before {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--card) 25%, transparent) 0%, color-mix(in srgb, var(--card) 85%, transparent) 36%, var(--card) 54%), var(--photo, none);
  background-position: center, center top;
}
#btn-go-classic { --photo: url(assets/landing/classic.webp); }
#btn-go-trivia { --photo: url(assets/landing/trivia.webp); }
#btn-go-events { --photo: url(assets/landing/events.webp); }
#btn-go-community { --photo: url(assets/landing/arcade.webp); }
#btn-go-wordle { --photo: url(assets/landing/wordle.webp); }
:root:root .landing-card--tile .landing-icon { background: var(--card); border-radius: var(--r-sm); padding: 3px; box-shadow: 0 0 0 1.5px var(--line); }
@media (max-width: 600px) {
  :root:root .landing-card--hero::before { background-image: linear-gradient(90deg, var(--card) 0%, var(--card) 45%, color-mix(in srgb, var(--card) 70%, transparent) 75%, color-mix(in srgb, var(--card) 45%, transparent) 100%), var(--photo, none); }
}

/* Le tableau d'honneur (classement global) : des lignes de cahier */
.global-lb-card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--elev-2);
  padding: 12px 16px 8px;
}
.global-lb-header { font-family: var(--font-display); }
.global-lb-header > span:first-child { display: none; }
.global-lb-row { border-bottom: 1px solid var(--border); padding: 6px 0; }
.global-lb-score { color: var(--accent); }
.lb-rank, .global-lb-row .lb-rank { font-family: var(--font-hand); font-size: 1.15rem; color: var(--muted); }
.lb-rank.gold, .lb-rank.silver, .lb-rank.bronze { font-size: 1.3rem; }
.lb-rank.gold { color: var(--accent); }
.lb-rank.silver { color: var(--text); }
.lb-rank.bronze { color: var(--margin); }
.lb-row-clickable:hover { background: var(--card2); }
.landing-footer a { color: var(--muted); }

/* L'onglet News, colle sur le bord gauche comme un intercalaire */
.news-card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-left: none;
  box-shadow: var(--elev-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.news-handle { background: var(--card2); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--accent); }
.news-title { color: var(--margin); font-family: var(--font-hand); font-size: 1.1rem; text-transform: none; letter-spacing: 0; }

@media (max-width: 600px) {
  #screen-landing { padding: 60px 14px 110px; gap: 12px; }
}
@media (min-width: 700px) {
  .landing-head, .landing-grid, #screen-landing .global-lb-card { max-width: 720px; }
  .landing-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .landing-tiles { grid-column: 1 / -1; }
  .landing-card--hero { min-height: 190px; }
}
@media (min-width: 1024px) {
  #screen-landing {
    display: none;
  }
  #screen-landing.active {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
    grid-template-areas: "head head" "grid lb" "foot foot";
    align-items: start; align-content: start; justify-content: center;
    column-gap: 28px; row-gap: 18px;
    max-width: 1180px; margin: 0 auto; padding-top: 48px;
  }
  .landing-head { grid-area: head; max-width: none; }
  .landing-grid { grid-area: grid; max-width: none; }
  #screen-landing .global-lb-card { grid-area: lb; max-width: none; margin-top: 0; }
  .landing-footer { grid-area: foot; }
  .landing-title { font-size: 2.8rem; }
}

/* Les regles « html.light .x » de l'ancien design sont plus specifiques : :root:root passe devant. */
:root:root .landing-card--hero, :root:root .landing-card--hero-alt,
:root:root .landing-card--tile { background: var(--card); border-color: var(--line); }
:root:root .landing-card--hero p, :root:root .landing-card--hero-alt p { color: var(--muted); }
:root:root .landing-card--hero h2, :root:root .landing-card--tile h2 { color: var(--text); }
:root:root .landing-eyebrow { color: var(--margin); }
:root:root .landing-chip { background: transparent; color: var(--text); }
@media (min-width: 700px) and (max-width: 1023px) {
  #screen-landing .global-lb-card { margin-top: 0; }
}
@media (min-width: 1024px) {
  body.nav-bottom-visible .news-card { left: 96px; }
}

/* ══ Sequence 3a : CHOIX DU JEU et reglages de partie (jeux classiques et quiz) ══
   Une fiche d'exercice : « 1) Choisis ton jeu », « 2) Lance la partie ». */
:root:root .step-label,
:root:root #screen-trivia-home .trivia-theme-label {
  font-family: var(--font-display); font-weight: 400;
  font-size: .82rem; letter-spacing: .02em; text-transform: none; color: var(--text);
}
:root:root .step-label::before,
:root:root #screen-trivia-home .trivia-theme-label::before {
  content: counter(etape) ")";
  width: auto; height: auto; border: none; border-radius: 0; background: none;
  font-family: var(--font-hand); font-weight: 700; font-size: 1.45rem; line-height: 1;
  color: var(--margin);
}
:root:root .card > .step-label { border-bottom: 1.5px dashed var(--border); }

:root:root .game-btn {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--elev-1); color: var(--text); padding: 12px 4px 10px; gap: 6px;
}
:root:root .game-btn:hover { background: var(--card2); }
:root:root .game-btn.active {
  border: 2px solid var(--accent); background: var(--card); box-shadow: 0 3px 0 var(--hard);
}
.game-btn-icon { line-height: 0; color: var(--text); }
.game-btn-icon svg { width: 30px; height: 30px; }
.game-btn.active .game-btn-icon { color: var(--accent); }
:root:root .game-btn-name { color: var(--muted); font-family: var(--font-body); font-weight: 700; }
:root:root .game-btn.active .game-btn-name {
  color: var(--text);
  background: linear-gradient(transparent 55%, var(--mark) 55%);
}

/* Difficulte du robot, mise : des boutons de fiche, l'actif est entoure */
:root:root .bot-btn, :root:root .stake-btn {
  background: transparent; color: var(--text);
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  box-shadow: none; font-family: var(--font-body); font-weight: 700;
}
:root:root .bot-btn:hover, :root:root .stake-btn:hover { background: var(--card2); box-shadow: none; }
/* La difficulte se lit au trait : un trait pour facile, deux pour moyen, trois pour difficile */
.bot-btn[data-diff]::after {
  content: ""; display: block; height: 3px; margin: 5px auto 0; border-radius: 2px;
  background: currentColor; opacity: .55;
}
.bot-btn[data-diff="easy"]::after   { width: 10px; }
.bot-btn[data-diff="medium"]::after { width: 22px; }
.bot-btn[data-diff="hard"]::after   { width: 34px; background: var(--margin); opacity: 1; }
:root:root .stake-btn.active {
  border: 2px solid var(--accent); color: var(--text); box-shadow: none;
  background: linear-gradient(transparent 55%, var(--mark) 55%);
}
.bot-label, .stake-label { color: var(--muted); font-weight: 700; }

/* Champs : pseudo et code a 4 lettres */
:root:root #input-name, :root:root #input-trivia-name, :root:root #fh-name,
:root:root #input-code, :root:root #input-trivia-code, :root:root #fh-code {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  color: var(--text); box-shadow: none;
}
:root:root #input-code, :root:root #input-trivia-code, :root:root #fh-code { font-family: var(--font-display); color: var(--accent); }
:root:root #input-name:focus, :root:root #input-trivia-name:focus, :root:root #fh-name:focus,
:root:root #input-code:focus, :root:root #input-trivia-code:focus, :root:root #fh-code:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--mark);
}
:root:root .divider::before, :root:root .divider::after {
  height: 0; background: none; border-top: 1.5px dashed var(--border);
}
.divider { font-family: var(--font-hand); font-weight: 700; font-size: 1.1rem; }

/* Retour : un lien a l'encre */
:root:root .btn-back { color: var(--accent); font-family: var(--font-body); font-weight: 700; }

/* Classements des ecrans de jeu */
:root:root .lb-card {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: var(--elev-2);
}
.lb-header > span:first-child:not(.lb-title) { display: none; }
:root:root .lb-row { border-bottom: 1px solid var(--border); }
.error-msg { color: var(--margin); font-weight: 700; }

/* Ordinateur : la fiche a gauche, le classement a droite */
@media (min-width: 1024px) {
  #screen-home.active, #screen-trivia-home.active {
    display: grid; grid-template-columns: minmax(0, 560px) minmax(280px, 380px);
    column-gap: 32px; row-gap: 16px; justify-content: center; align-content: start; align-items: start;
    padding-top: 40px;
  }
  #screen-home > *, #screen-trivia-home > * { grid-column: 1; max-width: none; width: 100%; }
  #screen-home > .btn-back, #screen-trivia-home > .btn-back,
  #screen-home > .logo, #screen-trivia-home > .logo { grid-column: 1 / -1; }
  #screen-home > .logo, #screen-trivia-home > .logo { text-align: left; }
  #screen-home > .lb-card, #screen-trivia-home > .lb-card { grid-column: 2; grid-row: 3 / span 4; }
  #screen-home .game-selector { max-width: none; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  #screen-home .game-selector, #screen-home > .step-label, #screen-home .card, #screen-home .lb-card { max-width: 560px; }
}
@media (min-width: 1024px) { #screen-home > .btn-back, #screen-trivia-home > .btn-back { justify-self: start; } }

/* ══ Sequence 3b : PLATEAUX DE JEU ═════════════════════════════════════════
   Les plateaux sont dessines comme sur une feuille ou une ardoise : un trait net,
   pas de halo. Les cosmetiques (jetons, symboles, echiquiers) gardent la main :
   leurs regles sont en !important et passent devant ce qui suit. */
/* Joueurs : etiquette du nom, l'actif est entoure et surligne */
:root:root .player-badge {
  font-family: var(--font-body); font-weight: 700; color: var(--muted);
  border: 1.5px solid transparent; border-radius: var(--r-sm); box-shadow: none; background: none;
}
:root:root .player-badge.active {
  color: var(--text); background: var(--card); border-color: var(--line); box-shadow: 0 2px 0 var(--hard);
}
.pdot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--line); }
.pdot-r { background: var(--margin); }
.pdot-y { background: var(--yellow); }
.turn-text { font-family: var(--font-hand); font-weight: 700; font-size: 1.15rem; color: var(--text); }
:root:root .btn-quit {
  border-radius: var(--r-sm); border: 1.5px solid var(--margin); background: transparent; color: var(--margin);
  font-weight: 700;
}
:root:root .btn-quit:hover { background: var(--card2); }

/* Puissance 4 : une grille tracee, des jetons pleins */
:root:root .c4-board {
  background: var(--card); border: 2px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--elev-3);
}
:root:root .c4-cell { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
:root:root .c4-cell.red    { background: var(--margin); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
:root:root .c4-cell.yellow { background: var(--yellow); box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); }
:root:root .c4-cell.win    { box-shadow: 0 0 0 3px var(--accent); }
:root:root .col-btn { color: var(--accent); }
:root:root .col-btn:hover { background: var(--card2); }
:root:root .col-btn:disabled { color: var(--border); }

/* Morpion : le # trace a la main, sans cadre exterieur */
:root:root .ttt-board { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
:root:root .ttt-cell { background: transparent; border: 0 solid var(--ink); border-radius: 0; color: var(--text); }
.ttt-board .ttt-cell:nth-child(-n+6) { border-bottom-width: 3px; }
.ttt-board .ttt-cell:not(:nth-child(3n)) { border-right-width: 3px; }
:root:root .ttt-cell:hover:not(.played) { background: var(--card2); }
:root:root .ttt-cell.ttt-r { color: var(--margin); }
:root:root .ttt-cell.ttt-y { color: var(--accent); }

/* Echecs et dames : le bois reste (c'est l'objet), cadre net */
:root:root .chess-board, :root:root .ck-board { box-shadow: var(--elev-3); }
.chess-coord { color: var(--muted); font-family: var(--font-hand); font-size: .9rem; }

/* Salle d'attente : le code ecrit en grand */
:root:root .code-display {
  font-family: var(--font-display); color: var(--accent);
  background: var(--card); border: 2px dashed var(--line); border-radius: var(--r-md);
}

/* Fin de partie et chat : des feuilles comme le reste */
:root:root .game-status, :root:root .chat {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: var(--elev-2);
}
.status-text { font-family: var(--font-display); font-weight: 400; }
:root:root .chat-title { font-family: var(--font-hand); font-size: 1.1rem; text-transform: none; letter-spacing: 0; color: var(--text); }

/* Ordinateur et tablette : des plateaux plus grands */
@media (min-width: 700px) {
  :root { --cell: 60px; --chess-cell: 62px; --ttt-cell: 130px; }
  .game-header { max-width: 560px; }
}
@media (min-width: 1024px) {
  :root { --cell: min(9vh, 72px); --chess-cell: min(9vh, 72px); --ttt-cell: min(20vh, 160px); }
}
@media (min-width: 700px) { .ck-board { --ck-cell: 60px; } }
@media (min-width: 1024px) {
  .ck-board { --ck-cell: min(9vh, 72px); }
}


/* ══ Sequence 4a : FONDS D'ECRAN adaptes a l'ardoise et au cahier ═══════════
   La matiere de base (ardoise ou page Seyes) est posee sur <html> et ne disparait
   jamais. Le fond equipe (#bg-layer en CSS, #bg-canvas pour les animes) se FOND
   dessus : sur l'ardoise en mode « ecran » (le sombre s'efface, le motif lumineux
   devient une craie de couleur), sur le cahier en mode « produit » (le clair
   s'efface, le motif se depose comme une encre). Chaque fond garde son motif
   et son animation, dans les materiaux du site. */
html {
  background-color: var(--bg);
  background-image: radial-gradient(130% 90% at 25% 0%, rgba(255,255,255,.055), transparent 62%);
  background-attachment: fixed;
}
html.light {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(80,130,205,.42) 31px 32px),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(120,160,220,.2) 7px 8px);
}
:root:root body, :root:root body.has-bg { background: transparent !important; }
#bg-layer, #bg-canvas { mix-blend-mode: screen; opacity: .9; }
html.light #bg-layer, html.light #bg-canvas { mix-blend-mode: multiply; opacity: .85; }
/* Appareils modestes : pas de fusion (couteuse a chaque image), un motif discret */
html.perf-low #bg-layer, html.perf-low #bg-canvas { mix-blend-mode: normal; opacity: .28; }
/* Les surfaces restent des feuilles opaques, quel que soit le fond (plus de verre floute) */
:root:root body.has-bg .card, :root:root body.has-bg .chat, :root:root body.has-bg .game-card,
:root:root body.has-bg .overlay > .overlay-content, :root:root body.has-bg .shop-overlay {
  background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Un fond ne change plus la couleur d'action du site : l'encre et la craie restent les memes partout */
:root:root body[class*="bg-theme-"] { --board: inherit; --board2: inherit; --border: inherit; --glow: inherit; }

/* ══ Symbole des Libs : un eclair dessine (masque CSS), de la couleur du texte ══ */
.bolt {
  display: inline-block; width: .74em; height: .95em; vertical-align: -.12em; margin: 0 .06em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.5 1 3 9h4l-1 6 6.5-8.5h-4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.5 1 3 9h4l-1 6 6.5-8.5h-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root:root .libs-counter {
  background: var(--card); color: var(--text); border: 1.5px solid var(--line);
  border-radius: var(--r-sm); box-shadow: 0 2px 0 var(--hard); animation: none;
  font-family: var(--font-display); font-weight: 400;
}
.libs-counter .libs-icon { color: var(--accent); }

/* ══ Sequence 4b : BOUTIQUE (le catalogue) ═══════════════════════════════════
   Des fiches de catalogue posees sur la page. La rarete est ecrite sur la fiche
   (un trait de couleur en tete + son nom) : gris commun, encre rare, rouge epique,
   or legendaire. Pas de degrade, pas de halo. */
:root:root .shop-fortnite { background: transparent; }
:root:root .shop-fn-header { background: var(--card); border-bottom: 1.5px solid var(--line); box-shadow: 0 2px 0 var(--hard); }
:root:root .shop-fn-title { color: var(--text); font-family: var(--font-display); font-weight: 400; text-transform: none; letter-spacing: 0; }
:root:root .shop-fn-balance { background: transparent; border: 1.5px solid var(--line); border-radius: var(--r-sm); }
:root:root .shop-fn-balance-label { color: var(--muted); }
:root:root .shop-fn-balance-amount { color: var(--text); }
:root:root .shop-fn-nav { background: var(--card); border-right: 1.5px solid var(--line); }
:root:root .shop-fn-nav-btn {
  background: transparent; border: 1.5px solid transparent; color: var(--muted);
  border-radius: var(--r-sm); font-family: var(--font-body);
}
:root:root .shop-fn-nav-btn:hover { background: var(--card2); color: var(--text); }
:root:root .shop-fn-nav-btn.active {
  background: var(--card2); border-color: var(--line); color: var(--text);
  box-shadow: inset 3px 0 0 var(--margin);
}
:root:root .shop-fn-section-title {
  color: var(--text); font-family: var(--font-display); font-weight: 400; font-size: 1.05rem;
  text-transform: none; letter-spacing: 0; border-bottom: 1.5px dashed var(--border);
}
:root:root .shop-fn-section-desc, :root:root .shop-fn-emote-slots { color: var(--muted); }
:root:root .shop-fn-countdown { color: var(--muted); }
:root:root .shop-fn-countdown #shop-countdown-val { color: var(--margin); font-family: var(--font-hand); font-size: 1.05rem; }

:root:root .shop-tile, :root:root .shop-tile.rarity-commun, :root:root .shop-tile.rarity-rare,
:root:root .shop-tile.rarity-epique, :root:root .shop-tile.rarity-legendaire {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--elev-2); border-top-width: 5px;
}
:root:root .shop-tile.rarity-commun     { border-top-color: #8c948f; }
:root:root .shop-tile.rarity-rare       { border-top-color: #3d64b8; }
:root:root .shop-tile.rarity-epique     { border-top-color: var(--margin); }
:root:root .shop-tile.rarity-legendaire { border-top-color: #e0a800; }
:root:root .shop-tile:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--hard); }
:root:root .shop-tile:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--hard); }
:root:root .shop-tile-footer { background: transparent; border-top: 1.5px dashed var(--border); }
:root:root .shop-tile-name { color: var(--text); font-family: var(--font-body); font-weight: 700; }
:root:root .shop-tile-price, :root:root .bundle-item-price { color: var(--text); font-family: var(--font-display); font-weight: 400; }
:root:root .shop-tile-price .bolt, .shop-fn-detail-price .bolt { color: var(--accent); }
:root:root .shop-price-crossed { color: var(--muted); }
:root:root .shop-tile-badge {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 4px;
  font-family: var(--font-body); color: var(--text); letter-spacing: .02em;
}
:root:root .shop-tile-badge.rarity-commun { color: var(--muted); }
:root:root .shop-tile-badge.rarity-rare { color: #3d64b8; }
html:not(.light) .shop-tile-badge.rarity-rare { color: #8fb0ff; }
:root:root .shop-tile-badge.rarity-epique { color: var(--margin); }
:root:root .shop-tile-badge.rarity-legendaire { color: #b8860b; }
html:not(.light) .shop-tile-badge.rarity-legendaire { color: var(--accent); }
:root:root .shop-tile-owned, :root:root .shop-tile-daily-badge, :root:root .bundle-item-tag {
  background: var(--card); color: #2f8a55; border: 1.5px solid #2f8a55; border-radius: 4px;
}
html:not(.light) .shop-tile-owned, html:not(.light) .shop-tile-daily-badge, html:not(.light) .bundle-item-tag { color: #8fe0a8; border-color: #8fe0a8; }
:root:root .shop-tile-saving { background: var(--margin); color: #fff; border-radius: 4px; }
:root:root .shop-title-tag { background: var(--card2); border: 1.5px solid var(--line); color: var(--text); }

/* Fiche detaillee d'un article */
:root:root .shop-fn-detail { background: var(--bg); }
html.light :root .shop-fn-detail, html.light .shop-fn-detail {
  background-color: var(--bg);
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(80,130,205,.42) 31px 32px);
}
:root:root .shop-fn-detail-back { background: var(--card); color: var(--accent); border-bottom: 1.5px solid var(--line); }
:root:root .shop-fn-detail-preview { background: var(--card2); border-bottom: 1.5px dashed var(--border); }
.shop-fn-detail-name { font-family: var(--font-display); font-weight: 400; color: var(--text); }
.shop-fn-detail-price { font-family: var(--font-display); color: var(--text); }
:root:root .shop-bundle-content-item { background: var(--card); border: 1.5px solid var(--border); }
:root:root .bundle-item-name { color: var(--text); }
:root:root .shop-fn-bundle-contains { color: var(--muted); }
:root:root .shop-fn-topup-btn { background: var(--board); color: #fff; border-radius: var(--r-sm); }
.real-prev { background: var(--card2); }

/* Ordinateur : plus de colonnes, une barre d'onglets plus large */
@media (min-width: 1024px) {
  .shop-fn-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
  .shop-fn-featured { grid-template-columns: repeat(3, 1fr); }
  :root:root .shop-fn-nav { width: 180px; min-width: 180px; }
}

/* ══ Sequence 5 : PROFIL (la carte d'eleve) et CASIER ═══════════════════════
   La carte d'identite est une carte d'eleve : une feuille, le pseudo, l'avatar
   dessine. Le palier se lit a la couleur du trait de gauche et a l'etiquette du
   badge : gris, encre, vert, rouge, or (plus de degrade anime). */
:root:root .level-banner, :root:root .level-banner.profile-id,
:root:root .level-tier-1, :root:root .level-tier-2, :root:root .level-tier-3,
:root:root .level-tier-4, :root:root .level-tier-5 {
  background: var(--card); color: var(--text); animation: none;
  border: 1.5px solid var(--line); border-left-width: 7px; border-radius: var(--r-md);
  box-shadow: var(--elev-2);
}
:root:root .level-tier-1 { border-left-color: #8c948f; }
:root:root .level-tier-2 { border-left-color: #3d64b8; }
:root:root .level-tier-3 { border-left-color: #2f8a55; }
:root:root .level-tier-4 { border-left-color: var(--margin); }
:root:root .level-tier-5 { border-left-color: #e0a800; }
:root:root .level-banner .level-main, :root:root .level-banner .level-badge, :root:root .level-banner .level-sub { color: var(--text); }
:root:root .level-banner .level-badge { font-family: var(--font-display); font-weight: 400; }
:root:root .level-banner .level-bar { background: var(--card2); border: 1.5px solid var(--line); height: 10px; border-radius: 3px; }
:root:root .level-banner .level-bar-fill { background: var(--accent); border-radius: 0; }
html:not(.light) .level-banner .level-bar-fill { background: var(--yellow); }
:root:root .pid-avatar {
  background: var(--card2); border: 1.5px solid var(--line); color: var(--text);
  font-family: var(--font-display); font-size: 1.5rem;
}
.pid-avatar .av-svg { width: 30px; height: 30px; }
:root:root .profile-id .pid-name-txt { filter: none; }
:root:root .vip-badge { color: var(--text); border: 1.5px solid #e0a800; text-shadow: none; border-radius: 4px; background: var(--card); }
html:not(.light) .vip-badge { color: var(--accent); border-color: var(--accent); }

/* Serie, quete de bienvenue, hauts faits, solde : des feuilles simples */
:root:root .streak-banner, :root:root .onboard-quest, :root:root .profile-badges-wrap, :root:root .profile-balance-row {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: var(--elev-1); color: var(--text);
}
.streak-flame { filter: none; color: var(--margin); }
.streak-main { font-family: var(--font-display); font-weight: 400; }

/* Sections repliables : un intertitre de cahier, souligne */
:root:root .profile-sec-head {
  font-family: var(--font-display); font-weight: 400; font-size: .95rem; letter-spacing: 0; text-transform: none;
  color: var(--text); border-bottom: 1.5px solid var(--line); padding-bottom: 6px;
}
:root:root .profile-sec-head:hover { color: var(--accent); }

/* Cartes du profil */
:root:root .profile-nav-card {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: var(--elev-1); color: var(--text);
}
:root:root .profile-nav-card:hover { background: var(--card2); box-shadow: 0 3px 0 var(--hard); }
.pnc-icon { color: var(--accent); }
.pnc-text > span { font-family: var(--font-body); }
:root:root #go-vip { animation: none; }

/* Defis : une liste a cocher */
:root:root .challenge-row { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); }
:root:root .challenge-row.done { border-color: #2f8a55; background: var(--card); }
:root:root .challenge-bar { background: var(--card2); border: 1px solid var(--border); border-radius: 3px; }
:root:root .challenge-bar span { background: var(--accent); border-radius: 0; }
html:not(.light) .challenge-bar span { background: var(--yellow); }
:root:root .challenge-claim-btn { background: var(--board); color: #fff; border-radius: var(--r-sm); box-shadow: 0 2px 0 rgba(0,0,0,.35); }

/* Casier */
:root:root .locker-cat-card {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: var(--elev-1); color: var(--text);
}
:root:root .locker-cat-card:hover { background: var(--card2); border-color: var(--line); }
.locker-cat-card .locker-cat-ic { color: var(--accent); width: 28px; height: 28px; display: inline-flex; }
.locker-cat-card .locker-cat-ic [data-ic] { width: 26px; height: 26px; display: inline-flex; }
:root:root .locker-item { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); }
.av-prev { color: var(--text); }
.av-prev .av-svg { width: 44px; height: 44px; }
.shop-emoji-preview.large.av-prev .av-svg { width: 84px; height: 84px; }
.player-icon .av-svg { width: 18px; height: 18px; vertical-align: -3px; }

/* Ordinateur : le profil sur deux colonnes (carte et defis a gauche, sections a droite) */
@media (min-width: 700px) {
  :root:root #screen-profile .profile-screen-inner { max-width: 640px; width: 100%; }
}
@media (min-width: 1024px) {
  :root:root #screen-profile .profile-screen-inner { max-width: 720px; }
  #screen-locker .locker-cats, #screen-locker > * { max-width: 900px; }
}
@media (min-width: 601px) { :root:root #screen-profile { padding-top: 32px; } }

/* ══ Sequence 6 : QUIZ, LECTURE, IDEES, LE MOT, EVENTS, HISTORIQUE ═══════════ */
/* Titres d'ecran : de l'encre ou de la craie, plus de degrade */
:root:root .read-h1, :root:root .ideas-h1, :root:root .wordle-h1 {
  background: none; -webkit-text-fill-color: currentColor; color: var(--text);
  font-family: var(--font-display); font-weight: 400; letter-spacing: 0;
}
:root:root .read-wrap { padding-top: 32px; }
.status-ic { display: inline-flex; width: 44px; height: 44px; color: var(--accent); }
.feed-status-icon { line-height: 0; }

/* Quiz : themes et difficulte en boutons de fiche, l'actif est surligne */
:root:root .theme-btn, :root:root .diff-btn {
  background: transparent; color: var(--text); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  box-shadow: none; font-family: var(--font-body); font-weight: 700;
}
:root:root .theme-btn:hover, :root:root .diff-btn:hover { background: var(--card2); color: var(--text); border-color: var(--line); }
:root:root .theme-btn.active, :root:root .diff-btn.active, :root:root .diff-btn[data-diff].active {
  border: 2px solid var(--accent); color: var(--text); box-shadow: none;
  background: linear-gradient(transparent 55%, var(--mark) 55%);
}
/* La difficulte se lit au trait : 1 a 4 traits, rouge pour l'extreme */
.diff-btn[data-diff]:not([data-diff=""])::after {
  content: ""; display: block; height: 3px; margin: 4px auto 0; border-radius: 2px; background: currentColor; opacity: .55;
}
.diff-btn[data-diff="easy"]::after    { width: 8px; }
.diff-btn[data-diff="medium"]::after  { width: 16px; }
.diff-btn[data-diff="hard"]::after    { width: 24px; }
.diff-btn[data-diff="extreme"]::after { width: 32px; background: var(--margin); opacity: 1; }
:root:root .trivia-nb-slider { background: var(--card2); accent-color: var(--accent); border: 1px solid var(--border); }

/* Lecture : des couvertures posees sur la page */
:root:root .read-cats { background: none; }
:root:root .read-cat {
  background: transparent; color: var(--text); border: 1.5px solid var(--line); border-radius: var(--r-sm); box-shadow: none;
}
:root:root .read-cat.active { background: var(--board); color: #fff; border-color: var(--board); box-shadow: none; }
:root:root .read-search { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-sm); }
:root:root .read-card { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: var(--elev-2); }

/* Idees : des fiches avec vote */
:root:root .idea-card { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: var(--elev-1); }
:root:root .idea-pinned { border-color: var(--margin); box-shadow: inset 4px 0 0 var(--margin), var(--elev-1); }
:root:root .idea-vote { background: transparent; border: 1.5px solid var(--border); border-radius: var(--r-sm); color: var(--muted); }
:root:root .idea-vote.up.on   { background: var(--card2); color: #2f8a55; border-color: #2f8a55; }
:root:root .idea-vote.down.on { background: var(--card2); color: var(--margin); border-color: var(--margin); }
.idea-score { font-family: var(--font-display); font-weight: 400; }

/* Le Mot : des cases de grille et un clavier de papier */
:root:root .wordle-cell { border: 1.5px solid var(--line); border-radius: 4px; background: var(--card); font-family: var(--font-display); font-weight: 400; }
:root:root .wordle-cell.wordle-correct { background: #2f8a55; border-color: #2f8a55; color: #fff; }
:root:root .wordle-cell.wordle-present { background: #e0a800; border-color: #e0a800; color: #1d1600; }
:root:root .wordle-cell.wordle-absent  { background: var(--card2); border-color: var(--border); color: var(--muted); }
:root:root .wordle-key { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-sm); box-shadow: 0 2px 0 var(--hard); }
:root:root .wordle-key.wordle-correct { background: #2f8a55; color: #fff; border-color: #2f8a55; }
:root:root .wordle-key.wordle-present { background: #e0a800; color: #1d1600; border-color: #e0a800; }
:root:root .wordle-key.wordle-absent  { background: var(--card2); color: var(--muted); border-color: var(--border); box-shadow: none; }
:root:root .wordle-hint-btn { background: var(--card); border: 1.5px solid var(--line); color: var(--text); }

/* Events */
.event-badge { color: #2f8a55; line-height: 0; }
.event-badge [data-ic] { width: 56px; height: 56px; display: inline-flex; }
html:not(.light) .event-badge { color: #8fe0a8; }
.snake-vote-icon [data-ic] { width: 40px; height: 40px; display: inline-flex; }

/* Quiz en partie : la question sur une fiche, les reponses en cases */
:root:root .tg-question-box { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: var(--elev-2); font-family: var(--font-display); font-weight: 400; }
:root:root .tg-choice { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: 0 2px 0 var(--hard); color: var(--text); }
:root:root .tg-choice:hover { background: var(--card2); }
:root:root .tg-choice-letter { background: transparent; border: 1.5px solid var(--line); color: var(--text); font-family: var(--font-hand); font-size: 1.05rem; }
:root:root .tg-choice.correct { border-color: #2f8a55; background: var(--card); box-shadow: inset 0 0 0 2px #2f8a55; }
:root:root .tg-choice.correct .tg-choice-letter { background: #2f8a55; color: #fff; border-color: #2f8a55; }
:root:root .tg-choice.wrong { border-color: var(--margin); background: var(--card); box-shadow: inset 0 0 0 2px var(--margin); }
:root:root .tg-choice.wrong .tg-choice-letter { background: var(--margin); color: #fff; border-color: var(--margin); }
:root:root .tg-timer { background: var(--card); color: var(--text); border: 2px solid var(--line); box-shadow: none; font-family: var(--font-display); }
:root:root .tg-timer.warning { background: var(--margin); color: #fff; border-color: var(--margin); box-shadow: none; }
:root:root .tg-podium-block { background: var(--card); border: 1.5px solid var(--line); box-shadow: 0 2px 0 var(--hard); color: var(--text); }
:root:root .tg-podium-p1 .tg-podium-block { background: var(--mark); color: #1d1600; box-shadow: 0 3px 0 var(--hard); }
@media (min-width: 1024px) {
  :root:root .tg-wrap, :root:root .tg-header { max-width: 760px; }
  :root:root .tg-question-box { font-size: 1.35rem; padding: 24px; }
  :root:root .tg-choice { font-size: 1.05rem; padding: 16px; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  :root:root .tg-wrap, :root:root .tg-header { max-width: 620px; }
}

/* ══ Sequence 7 : FENETRES, PANNEAUX, BOUTONS FLOTTANTS, AIDE, DIDACTICIEL ════ */
/* Boutons flottants (aide, assistant), cloche : des pastilles a l'encre, sans halo */
:root:root .btn-help-float, :root:root .btn-chatbot-float {
  background: var(--card); color: var(--accent); border: 1.5px solid var(--line);
  box-shadow: 0 2px 0 var(--hard); font-family: var(--font-display);
}
:root:root .btn-help-float:hover, :root:root .btn-chatbot-float:hover { background: var(--card2); box-shadow: 0 3px 0 var(--hard); }
:root:root .notif-bell { background: var(--card); color: var(--text); border: 1.5px solid var(--line); box-shadow: 0 2px 0 var(--hard); }

/* Panneaux : reglages, assistant, notifications */
:root:root .settings-panel, :root:root .chatbot-panel, :root:root .notif-panel {
  background: var(--card); color: var(--text); border: 1.5px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--elev-3); -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root:root .chatbot-header { background: var(--card2); color: var(--text); border-bottom: 1.5px solid var(--line); }
:root:root .sp-toggle {
  background: transparent; color: var(--text); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font-body);
}
:root:root .sp-toggle:hover { background: var(--card2); border-color: var(--line); }
:root:root .sp-toggle.sp-off { background: transparent; color: var(--muted); border-color: var(--border); border-style: dashed; }
:root:root .sp-toggle.sp-ingame { background: transparent; color: #2f8a55; border-color: #2f8a55; }

/* Toasts : un petit mot ecrit a la main */
:root:root .cursor-snake-toast, :root:root .libs-pill {
  background: var(--card); color: var(--text); border: 1.5px solid var(--line); box-shadow: 0 2px 0 var(--hard);
  border-radius: var(--r-sm);
}

/* Didacticiel : une bulle de prof */
:root:root .tuto-bubble {
  background: var(--card); color: var(--text); border: 1.5px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--elev-3);
}
.tuto-bubble strong { background: linear-gradient(transparent 58%, var(--mark) 58%); }

/* Fenetres (modales) : en-tetes et titres */
:root:root .profile-modal-title, :root:root .help-modal-title, :root:root .comment-modal-title {
  font-family: var(--font-display); font-weight: 400; color: var(--text);
}
:root:root .help-tab { border-radius: var(--r-sm); }
:root:root .help-tab.active { background: var(--board); color: #fff; }
:root:root .help-close-btn, :root:root .profile-modal-close, :root:root .chatbot-close {
  background: transparent; border: 1.5px solid var(--border); color: var(--text); border-radius: var(--r-sm);
}
.announcement-icon [data-ic], .honor-reward-icon [data-ic], .dailygift-emoji [data-ic] { width: 52px; height: 52px; display: inline-flex; color: var(--accent); }
.vote-btn-emoji [data-ic] { width: 28px; height: 28px; display: inline-flex; }
.snake-pause-btn [data-ic], .luffy-ctrl-btn [data-ic] { width: 22px; height: 22px; display: inline-flex; }
:root:root .snake-pause-btn, :root:root .dpad-btn {
  background: var(--card); color: var(--text); border: 1.5px solid var(--line); border-radius: var(--r-sm); box-shadow: 0 2px 0 var(--hard);
}
:root:root .maintenance-banner { background: var(--card); color: var(--margin); border-bottom: 1.5px solid var(--margin); box-shadow: none; }
/* Aide : seul le titre de la fiche passe a la ligne ; les mots en gras du texte restent dans la phrase */
:root:root .help-item p strong { display: inline; font-size: inherit; margin: 0; color: var(--text); background: linear-gradient(transparent 60%, var(--mark) 60%); }
.help-icon:empty { display: none; }
.help-item { border-bottom: 1px dashed var(--border); padding-bottom: 10px; }
.help-item > div > strong { font-family: var(--font-display); font-weight: 400; }
/* Le panneau News ne passe jamais devant une fenetre ouverte */
body.overlay-open .news-card { display: none; }

/* ══ Sequence 10 : les dernieres fenetres ═══════════════════════════════════ */
:root:root .comment-form input, :root:root .comment-form textarea {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-sm); color: var(--text);
}
/* Vote du Snake : une feuille, deux cases a cocher */
:root:root .snake-vote-modal { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: var(--elev-3); }
:root:root .snake-vote-title { color: var(--text); font-family: var(--font-display); font-weight: 400; }
:root:root .snake-vote-subtitle { color: var(--muted); }
:root:root .snake-vote-close { background: transparent; border: 1.5px solid var(--border); color: var(--text); border-radius: var(--r-sm); }
:root:root .snake-vote-btn { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: 0 2px 0 var(--hard); }
:root:root .snake-vote-yes { color: #2f8a55; } :root:root .snake-vote-no { color: var(--margin); }
html:not(.light) .snake-vote-yes { color: #8fe0a8; }
:root:root .snake-vote-btn.voted-active.snake-vote-yes { border: 2px solid #2f8a55; background: var(--card2); }
:root:root .snake-vote-btn.voted-active.snake-vote-no { border: 2px solid var(--margin); background: var(--card2); }
:root:root .snake-vote-bar { background: var(--card2); border: 1px solid var(--border); border-radius: 3px; }
:root:root .snake-vote-bar-fill { background: #2f8a55; border-radius: 0; }
.snake-vote-icon { color: #2f8a55; }
/* Bienvenue (premiere visite) : la phrase s'ecrit a la craie ou a l'encre */
:root:root .overlay-welcome { background: var(--bg); }
html:not(.light) .overlay-welcome { background: var(--bg) radial-gradient(130% 90% at 25% 0%, rgba(255,255,255,.06), transparent 62%); box-shadow: inset 0 0 0 10px var(--frame); }
html.light .overlay-welcome {
  background-color: var(--bg);
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(80,130,205,.42) 31px 32px),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(120,160,220,.2) 7px 8px);
}
:root:root .welcome-type { color: var(--text); text-shadow: none; font-family: var(--font-display); font-weight: 400; }
:root:root .welcome-caret { color: var(--margin); }
.welcome-icon { color: var(--accent); }
.welcome-icon [data-ic] { width: clamp(30px, 8vw, 44px); height: clamp(30px, 8vw, 44px); display: inline-flex; }
/* Communaute : les pastilles numerotees ecrites a la main */
:root:root .community-modal { background: var(--card); border: 1.5px solid var(--line); }
/* Podium et classement final du quiz : blocs poses, rangs ecrits a la main */
:root:root .tg-podium-block { border: 1.5px solid rgba(0,0,0,.35); border-radius: 4px 4px 0 0; box-shadow: 0 3px 0 var(--hard); font-family: var(--font-display); font-weight: 400; }
:root:root .tg-podium-p1 .tg-podium-block { box-shadow: 0 3px 0 var(--hard); }
:root:root .tg-final-row { border: 1.5px solid rgba(0,0,0,.3); border-radius: var(--r-sm); box-shadow: 0 2px 0 var(--hard); color: #fff; }
:root:root .tg-podium-msg.win { color: var(--text); text-shadow: none; background: linear-gradient(transparent 55%, var(--mark) 55%); display: inline-block; }
.rank-hand { font-family: var(--font-hand); font-weight: 700; font-size: 1.5rem; color: var(--text); }
.rank-hand.r1 { color: var(--margin); }
.tg-podium-crown { color: var(--accent); }
.tg-podium-crown [data-ic] { width: 26px; height: 26px; display: inline-flex; }
/* Fin de partie de Snake et Libero Run : une feuille posee sur le jeu */
:root:root .snake-over-overlay, :root:root .snake-pause-overlay { background: rgba(14,20,18,.82); }
html.light .snake-over-overlay, html.light .snake-pause-overlay { background: rgba(253,253,249,.9); }
:root:root .snake-over-text { color: var(--text); font-family: var(--font-display); font-weight: 400; }
:root:root .snake-new-hs { color: var(--margin); font-family: var(--font-hand); font-size: 1.4rem; animation: none; }
/* Lecture : livres, fiche d'un livre, chapitres et lecteur */
:root:root .read-book, :root:root .read-book--exclusive {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: var(--elev-2);
}
:root:root .read-book:hover, :root:root .read-book--exclusive:hover { transform: translateY(-2px); border-color: var(--line); box-shadow: 0 5px 0 var(--hard); }
:root:root .read-book-cover { border-radius: 4px; }
:root:root .read-book-cat, :root:root .read-book-cat--excl {
  background: transparent; border: 1.5px solid var(--margin); color: var(--margin); border-radius: 4px; font-weight: 700;
}
:root:root .read-book-author { color: var(--accent); }
:root:root .read-overlay { background: rgba(14,20,18,.72); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.light .read-overlay { background: rgba(34,37,43,.42); }
:root:root .read-sheet { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: var(--elev-3); }
:root:root .book-ch { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r-sm); }
:root:root .book-ch:not(.locked):hover { background: var(--card2); border-color: var(--line); }
.book-ch-num { font-family: var(--font-hand); font-weight: 700; font-size: 1.1rem; color: var(--margin); }
:root:root .book-ch-tag { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 4px; }
:root:root .book-ch-tag--free { color: #2f8a55; border-color: #2f8a55; }
html:not(.light) .book-ch-tag--free { color: #8fe0a8; border-color: #8fe0a8; }
:root:root .book-buy-btn { border-radius: var(--r-sm); }
/* Le lecteur : une page de cahier pour lire (theme clair), l'ardoise la nuit */
:root:root .book-reader { background: var(--bg); }
html.light .book-reader {
  background-color: var(--bg);
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(80,130,205,.3) 31px 32px);
}
:root:root .book-reader-bar, :root:root .book-reader-nav { background: var(--card); border-color: var(--line); }
:root:root .book-reader-close { border: 1.5px solid var(--line); border-radius: var(--r-sm); }
.book-reader-title { font-family: var(--font-display); font-weight: 400; }
.book-reader-content { font-family: var(--font-body); }
.book-reader-content h2, .book-reader-content h3 { font-family: var(--font-display); font-weight: 400; }
/* Le lecteur passe devant la cloche de notifications (lecture plein ecran) */
:root:root .book-reader { z-index: 960; }
/* Offre flash de la boutique : une etiquette de solde, sans clignotement */
:root:root .shop-flash { background: var(--card); color: var(--text); border: 1.5px solid var(--margin); border-radius: var(--r-md); box-shadow: 0 2px 0 var(--hard); }
:root:root .shop-flash-tag { color: var(--margin); animation: none; font-family: var(--font-hand); font-size: 1.2rem; }
:root:root .shop-flash-prices strong { color: var(--text); background: linear-gradient(transparent 55%, var(--mark) 55%); }

/* ══ Profil = BULLETIN DE NOTES (comme la maquette) ══════════════════════════ */
:root:root #level-banner.profile-id {
  display: block; padding: 0; overflow: hidden; border-left-width: 1.5px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--elev-2);
}
.bul-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--accent); color: var(--bg); padding: 7px 12px;
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
}
html.light .bul-hd { color: #fff; }
/* Le palier de niveau : la couleur du bandeau d'en-tete */
:root:root .level-tier-2 .bul-hd { background: #3d64b8; color: #fff; }
:root:root .level-tier-3 .bul-hd { background: #2f8a55; color: #fff; }
:root:root .level-tier-4 .bul-hd { background: var(--margin); color: #fff; }
:root:root .level-tier-5 .bul-hd { background: #e0a800; color: #1d1600; }
:root:root .bul-hd .vip-badge { background: transparent; color: inherit; border: 1.5px solid currentColor; font-size: .72rem; padding: 1px 7px; }
.bul-id { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; }
:root:root .bul-id .pid-avatar { width: 58px; height: 58px; border-radius: 50%; background: var(--mark); color: #22252b; border: 2px solid var(--line); }
html:not(.light) .bul-id .pid-avatar { background: rgba(255,225,105,.85); }
.bul-id .pid-avatar .av-svg { color: #22252b; }
.bul-id .pid-name { margin: 0; }
:root:root .bul-id .level-badge { font-family: var(--font-display); font-size: 1.15rem; }
:root:root .bul-id .level-badge::before { content: "Niveau "; font-family: var(--font-display); }
html[lang="en"] .bul-id .level-badge::before { content: "Level "; }
.bul-id .level-badge-ic { display: none; }
:root:root .bul-id .level-sub { font-family: var(--font-hand); font-size: 1.15rem; color: var(--margin); opacity: 1; margin-top: 2px; }
.bul-grades { border-top: 1.5px solid var(--line); }
.bul-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; font-size: .86rem; border-bottom: 1px solid var(--border); }
.bul-row span { padding: 7px 12px; }
.bul-note {
  border-left: 1px solid var(--border); text-align: center;
  font-family: var(--font-hand); font-weight: 700; font-size: 1.25rem; line-height: 1.1; color: var(--margin);
}
.bul-appre { margin: 0; padding: 9px 12px 11px; font-family: var(--font-hand); font-weight: 700; font-size: 1.2rem; line-height: 1.2; color: var(--accent); }
.bul-appre-k { font-family: var(--font-body); font-weight: 700; font-size: .78rem; color: var(--muted); display: block; margin-bottom: 2px; }
/* La serie et le solde sont dans le bulletin : leurs anciens blocs disparaissent (gardes pour le code) */
:root:root #streak-banner, :root:root #profile-balance-row { display: none; }

/* Defis : une liste a cocher (case, intitule, recompense ecrite a la main) */
:root:root .challenge-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; box-shadow: none; }
.ch-box {
  width: 20px; height: 20px; border: 1.8px solid var(--line); border-radius: 3px;
  display: grid; place-items: center; font-family: var(--font-hand); font-weight: 700; font-size: 1.35rem; line-height: 1; color: var(--margin);
}
:root:root .challenge-row.done .challenge-name { text-decoration: line-through; text-decoration-color: var(--margin); opacity: .7; }
:root:root .challenge-bar { height: 4px; border: none; }
.challenge-count { font-family: var(--font-hand); font-size: 1rem; }
:root:root .challenge-reward-tag, :root:root .challenge-claimed { font-family: var(--font-hand); font-weight: 700; font-size: 1.1rem; color: var(--accent); background: none; border: none; }
:root:root .challenge-row.ready .challenge-claim-btn { box-shadow: 0 2px 0 rgba(0,0,0,.35); }
/* Le pseudo du bulletin a l'encre (les couleurs achetees, posees sur .pid-name-txt, gardent la main) */
:root:root .bul-id .pid-name { color: var(--text); font-family: var(--font-display); font-weight: 400; }
:root:root .profile-id .pid-name-txt { filter: none; }
/* Premiers pas : la meme liste a cocher que les defis */
:root:root .onboard-step .ob-check { width: 18px; height: 18px; border: 1.8px solid var(--line); border-radius: 3px; color: transparent; display: inline-grid; place-items: center; flex: none; }
:root:root .onboard-step .ob-check svg { display: none; }
:root:root .onboard-step.done .ob-check::after { content: "✓"; color: var(--margin); font-family: var(--font-hand); font-weight: 700; font-size: 1.3rem; line-height: 1; }
:root:root .onboard-step.done .ob-tx { text-decoration: line-through; text-decoration-color: var(--margin); opacity: .7; }
:root:root .onboard-quest-title, :root:root .profile-badges-title, :root:root .profile-section-title {
  font-family: var(--font-display); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text);
}
:root:root .profile-section-title { border-bottom: 1.5px solid var(--line); padding-bottom: 4px; }
.perm-sub { font-family: var(--font-hand); font-size: 1.1rem; color: var(--muted); }
/* Ordinateur : deux colonnes (bulletin, quete, hauts faits et defis a gauche ; sections a droite) */
@media (min-width: 1024px) {
  :root:root #screen-profile .profile-screen-inner { max-width: 1080px; }
  :root:root #screen-profile .profile-body {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start;
  }
  #screen-profile .profile-col-right > details.profile-section:first-child { margin-top: 0; }
}

.profile-col { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.profile-col-left > * { margin-bottom: 0; }

/* ══ Fidelite a la maquette : defis, accueil, plateau, boutique ═════════════ */
/* Defis : des lignes de liste, pas des cartes */
:root:root .challenge-row {
  background: transparent; border: none; border-bottom: 1.5px dashed var(--border); border-radius: 0;
  padding: 8px 2px; box-shadow: none;
}
:root:root .challenge-row .challenge-name { font-family: var(--font-body); font-weight: 700; font-size: .9rem; margin-bottom: 4px; }

/* Accueil : les puces deviennent une annotation au stylo rouge, en bas a droite de la carte */
:root:root .landing-card--hero .landing-chips { display: block; margin-top: 6px; text-align: right; }
:root:root .landing-card--hero .landing-chip {
  display: inline; height: auto; padding: 0; border: none; background: none;
  font-family: var(--font-hand); font-weight: 700; font-size: 1.2rem; color: var(--margin);
}
:root:root .landing-card--hero .landing-chip + .landing-chip::before { content: " · "; color: var(--margin); }
:root:root .landing-card--hero .landing-eyebrow { font-size: 1.05rem; color: var(--muted); }

/* Plateau : les noms ecrits a la craie ou a l'encre, celui qui joue souligne d'un trait ondule */
:root:root .player-badge, :root:root .player-badge.active {
  background: none; border: none; box-shadow: none; padding: 2px 4px;
  font-family: var(--font-hand); font-weight: 700; font-size: 1.25rem; color: var(--muted);
}
:root:root .player-badge.active { color: var(--text); text-decoration: underline wavy var(--accent) 2px; text-underline-offset: 5px; }
:root:root .player-badge.you::after { font-family: var(--font-hand); }
.game-header-center .turn-text { font-size: 1.05rem; color: var(--muted); }
/* Emotes en partie : des cases dessinees en pointilles */
:root:root .emote-bar { background: transparent; border: none; box-shadow: none; }
:root:root .emote-btn { background: transparent; border: 1.6px dashed var(--line); border-radius: var(--r-sm); box-shadow: none; }
:root:root .emote-btn:hover { background: var(--card2); transform: none; }

/* Boutique : prix ecrits a la main, tampon « Acquis » sur les articles possedes */
:root:root .shop-tile-price, :root:root .shop-fn-detail-price {
  font-family: var(--font-hand); font-weight: 700; font-size: 1.25rem; color: var(--accent);
}
:root:root .shop-tile-large .shop-tile-price { font-size: 1.45rem; }
:root:root .shop-tile-owned {
  top: 38%; right: 10%; transform: rotate(-12deg);
  background: var(--card); color: var(--margin); border: 2.5px solid var(--margin); border-radius: 4px;
  font-family: var(--font-display); font-size: .7rem; letter-spacing: .06em; padding: 2px 8px; opacity: .92;
}
/* Equipe : tampon a l'encre bleue (craie jaune sur l'ardoise), pour ne plus le confondre avec Possede (rouge) */
:root:root .shop-tile-owned.is-eq { color: var(--accent); border-color: var(--accent); transform: rotate(8deg); }

/* ══ CLASSEMENTS = TABLEAU D'HONNEUR ═════════════════════════════════════════
   Comme le tableau d'honneur de l'ecole : un titre souligne de deux traits, les
   rangs ecrits a la main (1er, 2e, 3e au stylo rouge), des lignes de cahier, le
   premier surligne, et TA ligne entouree au stylo comme sur une copie. */
:root:root .global-lb-card, :root:root .lb-card {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--elev-2);
  padding: 12px 14px 10px;
}
:root:root .global-lb-header, :root:root .lb-header {
  display: block; text-align: center; margin: 0 0 6px; padding-bottom: 8px;
  border-bottom: 4px double var(--line);
}
:root:root .global-lb-header .lb-title, :root:root .lb-header .lb-title, :root:root .lb-header > span {
  font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase; color: var(--text);
}
.lb-header > span:empty, .global-lb-header > span:not(.lb-title) { display: none; }
:root:root .global-lb-row, :root:root .lb-row {
  position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 7px 6px; border-bottom: 1px solid var(--border); border-radius: 0; font-size: .9rem;
}
:root:root .global-lb-row:last-of-type, :root:root .lb-row:last-child { border-bottom: none; }
:root:root .lb-row-clickable:hover { background: var(--card2); }
:root:root .lb-rank { text-align: left; }
.rank-hand { font-family: var(--font-hand); font-weight: 700; font-size: 1.3rem; line-height: 1; color: var(--muted); }
.rank-hand sup { font-size: .6em; margin-left: 1px; }
.rank-hand.r1, .rank-hand.r2, .rank-hand.r3 { color: var(--margin); font-size: 1.5rem; }
:root:root .lb-name { font-weight: 700; }
/* Le premier : surligne au feutre */
:root:root .lb-top1 { background: linear-gradient(90deg, var(--mark) 0, var(--mark) 60%, transparent 100%); }
/* Ta ligne : entouree au stylo rouge (trait un peu irregulier, comme a la main) */
:root:root .lb-me::after {
  content: ""; position: absolute; inset: -2px -5px; pointer-events: none;
  border: 2px solid var(--margin);
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  transform: rotate(-.6deg);
}
/* Scores ecrits a la main */
:root:root .global-lb-score, :root:root .lb-score-snake { font-family: var(--font-hand); font-weight: 700; font-size: 1.2rem; color: var(--accent); white-space: nowrap; }
:root:root .lb-stats { display: flex; gap: 8px; font-family: var(--font-hand); font-weight: 700; font-size: 1.1rem; }
:root:root .lb-w { color: #2f8a55; } html:not(.light) .lb-w { color: #8fe0a8; }
:root:root .lb-l { color: var(--margin); }
:root:root .lb-d { color: var(--muted); }
:root:root .lb-empty { font-family: var(--font-hand); font-size: 1.15rem; color: var(--muted); }
:root:root .lb-more-btn {
  background: none; border: none; color: var(--accent); font-family: var(--font-hand); font-weight: 700; font-size: 1.15rem;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ══ Quiz : une illustration dessinee par theme ═════════════════════════════ */
:root:root #trivia-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { :root:root #trivia-themes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
:root:root .theme-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 7px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: 0 2px 0 var(--hard);
}
.theme-art-wrap { display: block; line-height: 0; color: var(--text); }
.theme-art { width: 60px; height: 47px; }
.theme-art .f { fill: var(--card2); }
.theme-art .k { fill: currentColor; }
.theme-art .r { stroke: var(--margin); }
.theme-art circle.r, .theme-art path.r[d*="z"] { fill: var(--margin); stroke: var(--margin); }
.theme-art .y { fill: #e0a800; stroke: currentColor; }
.theme-art .g { fill: #2f8a55; stroke: currentColor; }
.theme-art .t { opacity: .35; stroke-width: 1.2; }
html:not(.light) .theme-art .f { fill: rgba(238,241,234,.08); }
.theme-name { font-family: var(--font-body); font-weight: 700; font-size: .74rem; color: var(--text); }
:root:root .theme-btn:hover { background: var(--card2); }
:root:root .theme-btn.active { border: 2px solid var(--accent); background: var(--card); box-shadow: 0 3px 0 var(--hard); }
:root:root .theme-btn.active .theme-name { background: linear-gradient(transparent 55%, var(--mark) 55%); }
:root:root .theme-btn.active .theme-art .f { fill: var(--mark); }
/* Classement de l'accueil deplie : il defile dans la carte, ta ligne reste epinglee en bas */
.glb-scroll { max-height: min(46vh, 360px); overflow-y: auto; overscroll-behavior: contain; position: relative; scrollbar-width: thin; }
:root:root .glb-pin { position: sticky; bottom: 0; background: var(--card); box-shadow: 0 -2px 0 var(--hard); }
.glb-gap { text-align: center; font-family: var(--font-hand); font-size: 1.3rem; line-height: .8; color: var(--muted); }
:root:root .glb-scroll .lb-me::after { inset: 2px 3px; }
/* Quiz : une photo par theme (le dessin reste en repli si la photo ne charge pas) */
:root:root .theme-btn { padding: 5px 5px 7px; gap: 5px; }
.theme-photo { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; border: 1.5px solid var(--line); background: var(--card2); }
.theme-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.theme-photo .theme-art-wrap { display: none; }
.theme-photo.no-photo img { display: none; }
.theme-photo.no-photo .theme-art-wrap { display: grid; place-items: center; height: 100%; }
:root:root .theme-btn.active .theme-photo { border: 2px solid var(--accent); }
:root:root .theme-btn:not(.active) .theme-photo img { filter: saturate(.85); }

/* ══ PORTRAIT DESSINE (photo de profil) ═══════════════════════════════════════
   Le dessin garde toujours son encre noire (comme une photo imprimee), seul le
   cadre suit le cahier ou l'ardoise. */
.pt-svg { display: block; width: 100%; height: 100%; }
:root:root .pid-avatar.has-portrait { padding: 0; overflow: hidden; background: #fff; cursor: pointer; }
:root:root .pid-avatar { cursor: pointer; }
.lb-pt { display: inline-block; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; vertical-align: middle;
  margin-right: 7px; border: 1.5px solid var(--line); background: #fff; flex: none; }
.lb-pt svg { display: block; width: 100%; height: 100%; }
:root:root .player-icon.has-portrait { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; padding: 0; border: 1.5px solid var(--line); background: #fff; }
.pc-portrait { display: block; width: 84px; height: 84px; margin: 0 auto 6px; border: 2px solid var(--line); border-radius: 6px; overflow: hidden; box-shadow: 0 3px 0 var(--hard); background: #fff; }
.pc-portrait.hidden { display: none; }

:root:root .recovery-modal.portrait-modal { max-width: none; width: min(920px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
.pe-body { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 18px; padding: 14px 16px; overflow-y: auto; }
@media (max-width: 700px) { .pe-body { grid-template-columns: 1fr; } .pe-left { max-width: 220px; margin: 0 auto; } }
.pe-left { display: grid; gap: 10px; align-content: start; }
.pe-act { display: flex; gap: 8px; }
.pe-act .btn { width: auto; flex: 1; padding: 8px 6px; font-size: .82rem; }
.pe-photo { position: relative; background: var(--card); border: 1.5px solid var(--line); border-radius: 6px; box-shadow: 0 4px 0 var(--hard); padding: 12px 12px 8px; text-align: center; }
.pe-frame { aspect-ratio: 1; border: 2px solid var(--line); border-radius: 4px; overflow: hidden; background: #fff; }
.pe-name { font-family: var(--font-hand); font-weight: 700; font-size: 1.35rem; margin-top: 4px; }
.pe-photo.pe-fr1 { background: #fbfaf6; color: #22252b; border-radius: 2px; padding: 12px 12px 4px; }
.pe-photo.pe-fr1 .pe-name { padding: 8px 0 12px; font-size: 1.55rem; }
.pe-photo.pe-fr2 { border: 9px dotted var(--bg, var(--card2)); background-clip: padding-box; outline: 1.5px solid var(--line); outline-offset: -9px; }
.pe-photo.pe-fr2 .pe-frame { border-style: dashed; }
.pe-photo.pe-fr3 { transform: rotate(1.5deg); }
.pe-photo.pe-fr3::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 24px; transform: translateX(-50%) rotate(-4deg); background: rgba(255, 242, 122, .65); border: 1px dashed rgba(0,0,0,.15); }
.pe-photo.pe-fr4 { border: 7px double #b8860b; background: linear-gradient(135deg, #f6e2a0, #d4a73c 40%, #fbe9b0 55%, #b8860b); }
.pe-photo.pe-fr4 .pe-name { color: #3a2a05; }
.pe-photo.pe-fr5 { border: 2px solid var(--accent); border-radius: 14px; }
.pe-photo.pe-fr5 .pe-name { border-top: 1.5px solid var(--accent); margin-top: 8px; }
.pe-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 10px; flex-wrap: wrap; }
.pe-tabs button { font: 400 .88rem var(--font-display); padding: 7px 12px; border: 1.5px solid var(--line); border-bottom: none; border-radius: 6px 6px 0 0; background: var(--card2); color: var(--muted); cursor: pointer; margin-bottom: -2px; }
.pe-tabs button[aria-selected="true"] { background: var(--card); color: var(--text); border-width: 2px; border-bottom: 2px solid var(--card); }
.pe-opts { display: grid; gap: 10px; }
.pe-opt h3 { font: 700 .74rem var(--font-body); margin: 0 0 5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-chips button { font: 700 .8rem var(--font-body); padding: 6px 9px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; }
.pe-chips button em { font: 700 1rem var(--font-hand); color: var(--margin); font-style: normal; }
.pe-chips button[aria-pressed="true"] { border: 2px solid var(--accent); background: linear-gradient(transparent 55%, var(--mark) 55%), var(--card); }
.pe-chips .pe-sw { width: 30px; height: 30px; padding: 0; border-radius: 50%; position: relative; }
.pe-chips .pe-sw.lk::after { content: ""; position: absolute; right: -3px; top: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--margin); border: 2px solid var(--card); }
.pe-chips .pat-seyes { background-image: repeating-linear-gradient(0deg, transparent 0 6px, rgba(80,130,205,.6) 6px 7px); }
.pe-chips .pat-quad { background-image: linear-gradient(rgba(80,130,205,.45) 1px, transparent 1px), linear-gradient(90deg, rgba(80,130,205,.45) 1px, transparent 1px); background-size: 6px 6px; }
.pe-chips .pat-stars { background-image: radial-gradient(circle, #fff 1px, transparent 1.5px); background-size: 8px 8px; }
.pe-chips .pat-wax { background-image: radial-gradient(circle, #173a8a 3px, transparent 3.5px); background-size: 10px 10px; }
.pe-chips .pat-slate { box-shadow: inset 0 0 0 3px #6b4a2b; }
.pe-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 14px; border-top: 1.5px dashed var(--border); flex-wrap: wrap; }
.pe-foot .btn { width: auto; }
.pe-msg { margin: 0; font-family: var(--font-hand); font-weight: 700; font-size: 1.15rem; color: var(--muted); flex: 1; min-width: 180px; }
.pe-msg.ok { color: var(--accent); }
/* Atelier : publication dans l'editeur et rayon « Portraits de la classe » */
.pe-pub-toggle { width: 100%; }
.pe-pub { display: grid; gap: 7px; padding: 10px; border: 1.5px dashed var(--line); border-radius: 6px; }
.pe-pub.hidden { display: none; }
.pe-pub label { display: grid; gap: 2px; font: 700 .72rem var(--font-body); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pe-pub input, .pe-pub select { font: 600 .92rem var(--font-body); text-transform: none; letter-spacing: 0; padding: 6px 8px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); }
.pe-pub-rules { margin: 0; font-size: .78rem; color: var(--muted); }
.tpl-sort { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.tpl-sort button { font: 700 .8rem var(--font-body); padding: 5px 10px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; }
.tpl-sort button[aria-pressed="true"] { background: linear-gradient(transparent 55%, var(--mark) 55%), var(--card); border-color: var(--accent); }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tpl-empty { grid-column: 1 / -1; font-family: var(--font-hand); font-size: 1.2rem; color: var(--muted); }
.tpl { position: relative; background: var(--card); border: 1.5px solid var(--line); border-radius: 8px; box-shadow: 0 2px 0 var(--hard); overflow: hidden; }
.tpl .tp { aspect-ratio: 1; border-bottom: 1.5px dashed var(--border); background: #fff; }
.tpl .ti { padding: 7px 9px 9px; }
.tpl .tn { font: 400 .92rem var(--font-display); line-height: 1.15; }
.tpl .ta { font: 700 1.05rem var(--font-hand); color: var(--muted); }
.tpl .ta u { color: var(--accent); text-decoration-style: wavy; cursor: pointer; }
.tpl .tm { display: flex; justify-content: space-between; gap: 4px; align-items: center; font-size: .76rem; color: var(--muted); margin: 2px 0 6px; }
.tpl .pr { font: 700 1.2rem var(--font-hand); color: var(--margin); white-space: nowrap; }
.tpl .tb { display: flex; gap: 5px; }
.tpl .tb button { flex: 1; font: 700 .76rem var(--font-body); padding: 6px 4px; border-radius: 5px; border: 1.5px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; }
.tpl .tb button.buy { background: var(--accent); color: var(--card); }
.tpl.pending .tp { opacity: .55; }
.tpl-wait { position: absolute; top: 32%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); font: 400 .62rem var(--font-display); color: var(--accent); border: 2.5px solid var(--accent); border-radius: 6px; padding: 3px 7px; background: var(--card); white-space: nowrap; }

/* ══ COSMETIQUES REDESSINES (octobre 2026) ═══════════════════════════════════
   Plus aucun halo lumineux : craie, surligneur, gomme, papiers, encres. Les
   identifiants ne changent pas, seuls le rendu et le nom changent. */

/* Effets de pseudo */
@keyframes neChalk { 0%, 100% { opacity: 1; letter-spacing: 0; } 50% { opacity: .72; letter-spacing: .015em; } }
:root:root .nameeffect-blink { animation: neChalk 1.6s steps(2) infinite; text-shadow: 0 0 1px currentColor; }
@keyframes neMark { 0% { background-size: 0% 100%; } 45%, 70% { background-size: 100% 100%; } 100% { background-size: 0% 100%; background-position: right; } }
:root:root .nameeffect-pulse { animation: none; text-shadow: none; position: relative; z-index: 0; }
:root:root .nameeffect-pulse::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: .05em; height: .55em; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--mark), var(--mark)) no-repeat left / 0% 100%; animation: neMark 2.6s ease-in-out infinite;
}
@keyframes neErase { 0%, 20% { transform: translateX(-110%); } 45%, 55% { transform: translateX(0); } 80%, 100% { transform: translateX(110%); } }
:root:root .nameeffect-glitch { animation: none; filter: none; position: relative; overflow: hidden; display: inline-block; vertical-align: bottom; }
:root:root .nameeffect-glitch::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-110%);
  background: linear-gradient(90deg, transparent, var(--card) 18%, var(--card) 70%, transparent);
  animation: neErase 3.2s ease-in-out infinite;
}

/* Bulles de chat */
:root:root .msg-bubble.bubble-arcade, :root:root .shop-bubble-preview.bubble-arcade { background: #c9a36f !important; color: #2a1a0a !important; border: 1.5px solid #7a5a30; animation: none !important; }
:root:root .msg-bubble.bubble-verre, :root:root .shop-bubble-preview.bubble-verre { background: rgba(255,255,255,.55) repeating-linear-gradient(0deg, transparent 0 9px, rgba(80,130,205,.25) 9px 10px) !important; color: #22252b !important; border: 1.5px solid rgba(34,37,43,.35); }
:root:root .msg-bubble.bubble-cyan, :root:root .shop-bubble-preview.bubble-cyan { background-color: #f7fbf2 !important; background-image: linear-gradient(rgba(111,154,92,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(111,154,92,.28) 1px, transparent 1px) !important; background-size: 6px 6px !important; color: #1f3b16 !important; border: 1.5px solid #6f9a5c; }
:root:root .msg-bubble.bubble-magenta, :root:root .shop-bubble-preview.bubble-magenta { background: #f1c9d6 !important; color: #5b1832 !important; border: 1.5px solid #b06582; }
:root:root .msg-bubble.bubble-holographique, :root:root .shop-bubble-preview.bubble-holographique { background: var(--card) !important; color: #5b2a9e !important; border: 1.5px solid #5b2a9e; font-family: var(--font-hand); font-size: 1.15em; animation: none !important; }
html:not(.light) .msg-bubble.bubble-holographique, html:not(.light) .shop-bubble-preview.bubble-holographique { color: #c9a8ff !important; border-color: #c9a8ff; }
:root:root .msg-bubble.bubble-cameleon, :root:root .shop-bubble-preview.bubble-cameleon { background: #fff !important; color: #c0262f !important; border: 2px solid #22252b; border-radius: 8px; box-shadow: 3px 3px 0 #22252b; animation: none !important; }

/* Jetons de Puissance 4 */
:root:root .p4skin-p4token-goldsilver .c4-cell.red { background: radial-gradient(circle at 35% 30%, #fff2b0, #e9c25a 45%, #a07a12) !important; box-shadow: inset 0 0 0 2px #8a6410, inset 0 0 0 5px #e9c25a, inset 0 0 0 6px rgba(138,100,16,.6) !important; }
:root:root .p4skin-p4token-goldsilver .c4-cell.yellow { background: radial-gradient(circle at 35% 30%, #fff, #c9ced6 45%, #6b7480) !important; box-shadow: inset 0 0 0 2px #555d66, inset 0 0 0 5px #c9ced6, inset 0 0 0 6px rgba(85,93,102,.6) !important; }
:root:root .p4skin-p4token-neon .c4-cell.red { background: #ff8e8e !important; box-shadow: none !important; outline: 2px dashed rgba(0,0,0,.35); outline-offset: -3px; }
:root:root .p4skin-p4token-neon .c4-cell.yellow { background: #ffe169 !important; box-shadow: none !important; outline: 2px dashed rgba(0,0,0,.3); outline-offset: -3px; }
:root:root .p4skin-p4token-lavalice .c4-cell.red, :root:root .p4skin-p4token-lavaice .c4-cell.red { background: radial-gradient(circle, #d23a4f 55%, #a3122a 56% 62%, #d23a4f 63%) !important; box-shadow: 0 0 0 2px #22252b !important; border-radius: 50%; clip-path: polygon(50% 0,59% 6%,69% 3%,74% 12%,85% 13%,86% 24%,96% 30%,93% 41%,100% 50%,93% 59%,96% 70%,86% 76%,85% 87%,74% 88%,69% 97%,59% 94%,50% 100%,41% 94%,31% 97%,26% 88%,15% 87%,14% 76%,4% 70%,7% 59%,0 50%,7% 41%,4% 30%,14% 24%,15% 13%,26% 12%,31% 3%,41% 6%); }
:root:root .p4skin-p4token-lavalice .c4-cell.yellow, :root:root .p4skin-p4token-lavaice .c4-cell.yellow { background: radial-gradient(circle, #e0a800 55%, #a37a00 56% 62%, #e0a800 63%) !important; box-shadow: none !important; clip-path: polygon(50% 0,59% 6%,69% 3%,74% 12%,85% 13%,86% 24%,96% 30%,93% 41%,100% 50%,93% 59%,96% 70%,86% 76%,85% 87%,74% 88%,69% 97%,59% 94%,50% 100%,41% 94%,31% 97%,26% 88%,15% 87%,14% 76%,4% 70%,7% 59%,0 50%,7% 41%,4% 30%,14% 24%,15% 13%,26% 12%,31% 3%,41% 6%); }
:root:root .p4skin-p4token-galaxy .c4-cell.red { background: radial-gradient(circle at 35% 30%, #fff 0 8%, #ff9c9c 18%, #d23a4f 55%, #7a0d1e) !important; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.4) !important; }
:root:root .p4skin-p4token-galaxy .c4-cell.yellow { background: radial-gradient(circle at 35% 30%, #fff 0 8%, #7fb2ff 18%, #173a8a 60%, #0b1d47) !important; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.4) !important; }

/* Morpion */
.ttt-cell .ttt-sym { width: 72%; height: 72%; display: block; margin: auto; }
:root:root .ttt-skin-ttt-neon .ttt-cell { border-color: #1b6b3a; box-shadow: none; }
:root:root .ttt-skin-ttt-neon .ttt-cell.ttt-r, :root:root .ttt-skin-ttt-neon .ttt-cell.ttt-y { text-shadow: none; }
:root:root .ttt-skin-ttt-neon .ttt-cell.win-cell { background: var(--mark); }

/* Echiquiers : plus de flou ni de halo */
#chess-board.chess-theme-cyber .chess-sq { border: none; }
:root:root #chess-board.chess-theme-cyber .chess-sq.light, :root:root #chess-board.chess-theme-cyber .chess-sq.dark {
  background-color: #f7fbf2; background-image: linear-gradient(rgba(111,154,92,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(111,154,92,.35) 1px, transparent 1px); background-size: 25% 25%; }
:root:root #chess-board.chess-theme-cyber .chess-sq.dark { background-image: repeating-linear-gradient(45deg, rgba(34,37,43,.38) 0 1.5px, transparent 1.5px 6px), linear-gradient(rgba(111,154,92,.35) 1px, transparent 1px); background-size: auto, 25% 25%; }
:root:root #chess-board.chess-theme-frost .chess-sq.light, :root:root #chess-board.chess-theme-frosty .chess-sq.light { background: #e9cf9e linear-gradient(100deg, transparent 30%, rgba(0,0,0,.05) 32%, transparent 36%); backdrop-filter: none; }
:root:root #chess-board.chess-theme-frost .chess-sq.dark, :root:root #chess-board.chess-theme-frosty .chess-sq.dark { background: #a8794a linear-gradient(80deg, transparent 40%, rgba(0,0,0,.08) 44%, transparent 48%); backdrop-filter: none; }
:root:root #chess-board.chess-theme-neon { box-shadow: 0 0 0 8px #6b4a2b, 0 0 0 10px #22252b; }
:root:root #chess-board.chess-theme-neon .chess-sq.light { background: #2a3833; }
:root:root #chess-board.chess-theme-neon .chess-sq.dark { background: #1f2a26 repeating-linear-gradient(45deg, rgba(238,241,234,.22) 0 1.5px, transparent 1.5px 7px); }
:root:root #chess-board.chess-theme-neon .chess-sq .cp-w, :root:root #chess-board.chess-theme-neon .chess-sq .cp-b { text-shadow: none; }
#chess-board.chess-theme-neon .chess-sq .cp-img img, #chess-board.chess-theme-cyber .chess-sq .cp-img img { filter: none; }
:root:root #chess-board.chess-theme-marble { box-shadow: 0 0 0 6px #7a1f2b; }
:root:root #chess-board.chess-theme-marble .chess-sq.light { background: #f2e6cf; }
:root:root #chess-board.chess-theme-marble .chess-sq.dark { background: #2f6b4a; }

/* Bannieres de victoire : l'ancienne lueur du cadre est coupee, l'image se pose au-dessus du texte */
:root { --violet: #6a2fb8; }
html:not(.light) { --violet: #c9a8ff; }
:root:root #game-status[class*="victoryban-"] { animation: none; box-shadow: var(--elev-2); border: 1.5px solid var(--line); }
.vb-show { display: grid; place-items: center; overflow: hidden; margin: -4px 0 6px; min-height: 120px; }
.vb-show .vb-flags { width: min(96%, 460px); }
.vb-show .vb-note svg { width: min(78%, 260px); }
.vb-show .vb-laurel svg { width: min(70%, 240px); }
.vb-show .medal { width: 120px; }
.vb-show .vb-medal { display: grid; justify-items: center; }
.vb-show .vb-tool { width: 180px; margin: -150px 0 0 -90px; }
.vb-show .vb-stamp { font-size: 1.8rem; }
.medal{width:190px;height:auto;transform-origin:50% 0;animation:mDrop .9s cubic-bezier(.2,1.4,.4,1) both,mSwing 3.2s ease-out .85s both;filter:drop-shadow(0 6px 0 var(--hard))}
@keyframes mDrop{0%{transform:translateY(-260px)}100%{transform:translateY(0)}}
@keyframes mSwing{0%{transform:rotate(9deg)}18%{transform:rotate(-6deg)}36%{transform:rotate(4deg)}54%{transform:rotate(-2.2deg)}72%{transform:rotate(1deg)}100%{transform:rotate(0)}}
.medal .shine{animation:mShine 3.4s ease-in-out 1.6s infinite}
@keyframes mShine{0%{transform:translateX(-120px) skewX(-20deg)}35%,100%{transform:translateX(140px) skewX(-20deg)}}
.medal .disc{transform-origin:100px 168px;animation:mTurn 1.2s ease-out .9s both}
@keyframes mTurn{0%{transform:scaleX(.15)}60%{transform:scaleX(1.04)}100%{transform:scaleX(1)}}
.medal .spark path{stroke-dasharray:14;stroke-dashoffset:14;animation:mDraw .5s ease-out forwards}
.medal .spark path:nth-child(1){animation-delay:1.9s}.medal .spark path:nth-child(2){animation-delay:2s}.medal .spark path:nth-child(3){animation-delay:2.1s}.medal .spark path:nth-child(4){animation-delay:2.2s}.medal .spark path:nth-child(5){animation-delay:2.3s}.medal .spark path:nth-child(6){animation-delay:2.4s}
@keyframes mDraw{to{stroke-dashoffset:0}}
.vict{font:400 clamp(1.9rem,5vw,2.6rem) var(--font-display);margin-top:4px;background:linear-gradient(transparent 58%,var(--mark) 58%) no-repeat 0 0/0% 100%;animation:mMark .6s ease-out 1.6s forwards;padding:0 6px}
@keyframes mMark{to{background-size:100% 100%}}
.vict-sub{font:700 1.35rem var(--font-hand);color:var(--margin);opacity:0;animation:mFade .5s ease-out 2.2s forwards}
@keyframes mFade{to{opacity:1}}
.vb-sub{font:700 1.3rem var(--font-hand);color:var(--margin);text-align:center;opacity:0;animation:mFade .4s ease-out 1.3s forwards}
.vb-big{font:400 clamp(1.8rem,5vw,2.5rem) var(--font-display);text-align:center}
.vb-press{position:relative;display:grid;place-items:center;padding:20px}
.vb-stamp{font:400 2.4rem var(--font-display);color:var(--violet);border:5px solid var(--violet);border-radius:10px;padding:4px 22px;transform:rotate(-12deg);letter-spacing:.06em;position:relative;
  opacity:0;animation:vbInk .5s ease-out .8s forwards;background:repeating-linear-gradient(-30deg,transparent 0 5px,rgba(255,255,255,.0) 5px 6px)}
@keyframes vbInk{0%{opacity:0;filter:blur(1.2px)}15%{opacity:1;filter:blur(.6px)}100%{opacity:.92;filter:blur(0)}}
.vb-tool{position:absolute;left:50%;top:50%;width:250px;height:auto;margin:-210px 0 0 -125px;transform-origin:50% 100%;z-index:2;
  animation:vbTool 1.5s cubic-bezier(.5,0,.3,1) .1s both}
@keyframes vbTool{0%{transform:translate(160px,-260px) rotate(18deg)}38%{transform:translate(0,-26px) rotate(-12deg)}48%{transform:translate(0,40px) rotate(-12deg) scaleY(.94)}56%{transform:translate(0,36px) rotate(-12deg) scaleY(.97)}66%{transform:translate(0,-20px) rotate(-12deg)}88%{opacity:1}100%{transform:translate(200px,-300px) rotate(22deg);opacity:0}}
.vb-shadow{position:absolute;left:50%;top:62%;width:220px;height:26px;margin-left:-110px;border-radius:50%;background:rgba(0,0,0,.28);filter:blur(6px);opacity:0;animation:vbShadow 1.5s ease .1s both}
@keyframes vbShadow{0%{opacity:0;transform:scale(.4)}45%{opacity:.8;transform:scale(1)}66%{opacity:.4}100%{opacity:0;transform:scale(.4)}}
.vb-shake{animation:vbShake .25s linear .8s}
@keyframes vbShake{25%{transform:translate(2px,1px)}50%{transform:translate(-2px,-1px)}75%{transform:translate(1px,-1px)}}
.vb-flags{position:relative;width:min(96%,520px);aspect-ratio:460/120}
.vb-flag{transform-origin:50% 0;animation:vbFlag .5s cubic-bezier(.3,1.5,.5,1) both}
@keyframes vbFlag{0%{transform:translateY(-120px) rotate(-30deg);opacity:0}100%{transform:none;opacity:1}}
.vb-flag text{font-family:'Archivo Black';font-size:22px}
.vb-flagsway{animation:vbSway 2.4s ease-in-out 1.6s infinite;transform-origin:50% 0}
@keyframes vbSway{50%{transform:rotate(1.5deg)}}
.vb-note svg{width:min(80%,320px);height:auto;overflow:visible}
.vb-draw{stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:mDraw var(--d,.6s) ease-out var(--w,0s) forwards}
.vb-fill{opacity:0;animation:mFade .01s linear var(--w) forwards}
.vb-laurel{position:relative;display:grid;place-items:center}
.vb-laurel svg{width:min(78%,300px);height:auto;overflow:visible}
.vb-leaf{opacity:0;transform-origin:center;transform-box:fill-box;animation:vbLeaf .3s ease-out both}
@keyframes vbLeaf{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
.vb-show .vict { font-size: 1.5rem; }
/* Reactions dessinees et carnets de gribouillis */
.emote-svg { width: 1.9em; height: 1.9em; display: inline-block; vertical-align: middle; }
:root:root .emote-btn .emote-svg { width: 30px; height: 30px; }
.msg-emote { display: inline-flex; align-items: center; gap: 6px; }
.msg-emote .emote-svg { width: 34px; height: 34px; }
.shop-emoji-preview .emote-svg { width: 52px; height: 52px; }
.shop-emoji-preview.large .emote-svg { width: 84px; height: 84px; }
.doodle-prev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; color: var(--accent); }
.doodle-prev span { width: 30px; height: 30px; display: block; }
/* Portrait : bien visible sur le bulletin (crayon pour modifier, invitation tant qu'il n'est pas compose) */
.pid-av-wrap { position: relative; display: inline-grid; justify-items: center; flex: none; }
:root:root .bul-id .pid-avatar.has-portrait { width: 64px; height: 64px; background: #fff; }
.pid-av-edit { position: absolute; right: -6px; top: 40px; width: 28px; height: 28px; padding: 3px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--text); box-shadow: 0 2px 0 var(--hard); cursor: pointer; display: grid; place-items: center; }
.pid-av-edit svg { width: 100%; height: 100%; }
.pid-av-hint { font: 700 .95rem var(--font-hand); color: var(--margin); white-space: nowrap; margin-top: 2px; animation: ptHint 2.4s ease-in-out infinite; }
.pid-av-hint.hidden { display: none; }
@keyframes ptHint { 0%, 70%, 100% { transform: none; } 80% { transform: rotate(-3deg); } 90% { transform: rotate(3deg); } }

/* ══ ASSISTANT : Libe le crayon, panneau en page de cahier ═══════════════════ */
.libe-slot { display: inline-block; width: 100%; height: 100%; }
.libe { width: 100%; height: 100%; display: block; overflow: visible; }
.libe-wig { transform-origin: 50% 90%; transform-box: fill-box; animation: libeWig 5s ease-in-out infinite; }
@keyframes libeWig { 0%, 76%, 100% { transform: rotate(0); } 82% { transform: rotate(-8deg); } 88% { transform: rotate(6deg); } 94% { transform: rotate(-3deg); } }
.libe-eyes { transform-origin: center; transform-box: fill-box; animation: libeBlink 4.5s infinite; }
@keyframes libeBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.libe-idea { opacity: 0; animation: libeIdea 5s ease-in-out infinite; }
@keyframes libeIdea { 0%, 78%, 100% { opacity: 0; } 84%, 94% { opacity: 1; } }
:root:root .btn-chatbot-float { width: 58px; height: 58px; padding: 4px; overflow: visible; }
.btn-chatbot-float .libe-slot { width: 46px; height: 46px; }
.libe-hint { position: absolute; right: 64px; top: 10px; white-space: nowrap; background: var(--card); border: 1.5px solid var(--line); border-radius: 8px; padding: 2px 9px; font: 700 1.05rem var(--font-hand); color: var(--accent); box-shadow: 0 2px 0 var(--hard); opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s; pointer-events: none; }
.libe-hint.show { opacity: 1; transform: none; }
.libe-head { width: 40px; height: 40px; flex: none; }
:root:root .chatbot-header { display: flex; align-items: center; gap: 8px; border-bottom: 2px solid var(--line); }
:root:root .chatbot-header-txt { flex: 1; min-width: 0; }
:root:root .chatbot-subtitle { font-family: var(--font-hand); font-size: 1.05rem; }
:root:root .chatbot-log {
  padding: 12px 12px 12px 38px; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(90deg, transparent 26px, var(--margin) 26px 27.5px, transparent 27.5px), repeating-linear-gradient(0deg, transparent 0 25px, rgba(80,130,205,.32) 25px 26px), var(--card);
}
html:not(.light) .chatbot-log { background: linear-gradient(90deg, transparent 26px, var(--margin) 26px 27.5px, transparent 27.5px), var(--card) !important; }
:root:root .chatbot-msg-bot { background: transparent; border: none; box-shadow: none; padding: 0; font-family: var(--font-hand); font-size: 1.22rem; line-height: 1.3; color: var(--accent); max-width: 94%; animation: libeInk .6s steps(12) both; }
@keyframes libeInk { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
:root:root .chatbot-msg-bot strong { background: linear-gradient(transparent 55%, var(--mark) 55%); color: var(--text); }
:root:root .chatbot-msg-bot .chatbot-card { background: transparent; border: none; border-bottom: 1px dashed var(--border); border-radius: 0; padding: 4px 0 8px; box-shadow: none; font-family: var(--font-body); font-size: .86rem; color: var(--text); }
:root:root .chatbot-msg-bot .chatbot-card strong { font-family: var(--font-display); font-weight: 400; }
:root:root .chatbot-msg-user { align-self: flex-end; max-width: 80%; background: #fff27a; color: #22252b; border: none; border-radius: 0; padding: 8px 11px 10px; font-size: .9rem; box-shadow: 2px 3px 0 rgba(0,0,0,.18); transform: rotate(1.2deg); }
.chatbot-typing { display: flex; align-items: center; gap: 6px; font-family: var(--font-hand); font-size: 1.12rem; color: var(--muted); }
.libe-scrib { width: 24px; height: 24px; color: var(--text); animation: libeScrib .6s linear infinite; }
@keyframes libeScrib { 0% { transform: translate(0,0) rotate(-6deg); } 25% { transform: translate(4px,-2px) rotate(-2deg); } 50% { transform: translate(8px,0) rotate(-6deg); } 75% { transform: translate(4px,2px) rotate(-10deg); } 100% { transform: translate(0,0) rotate(-6deg); } }
:root:root .chatbot-chips { display: flex; gap: 4px; padding: 8px 10px 0; overflow-x: auto; flex-wrap: nowrap; border-top: 1.5px dashed var(--border); }
:root:root .chatbot-chip { flex: none; border-radius: 8px 8px 0 0; border: 1.5px solid var(--line); border-bottom: none; box-shadow: none; padding: 6px 10px; font-size: .78rem; background: var(--card2); color: var(--text); }
:root:root .chatbot-chip:nth-child(4n+1) { border-top: 4px solid #e2485d; }
:root:root .chatbot-chip:nth-child(4n+2) { border-top: 4px solid #2f8a55; }
:root:root .chatbot-chip:nth-child(4n+3) { border-top: 4px solid #e0a800; }
:root:root .chatbot-chip:nth-child(4n+4) { border-top: 4px solid #3d64b8; }
:root:root .chatbot-form { border-top: 2px solid var(--line); align-items: end; }
:root:root .chatbot-input { font: 600 1.1rem var(--font-hand); border: none; border-bottom: 2px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
:root:root .chatbot-input:focus { outline: none; border-bottom-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .libe-wig, .libe-eyes, .libe-idea, .libe-scrib { animation: none; } .libe-idea { opacity: 0; } }
/* Avalanche de stickers : chaque dessin est un autocollant decoupe (fond blanc, liseré, ombre pleine) */
.sticker-avalanche .stk { position: absolute; left: 0; top: 0; will-change: transform; border-radius: 50%; background: #fff; border: 2px solid rgba(34,37,43,.85); box-shadow: 2px 3px 0 rgba(0,0,0,.18); box-sizing: border-box; display: grid; place-items: center; }
.sticker-avalanche .stk svg { width: 100%; height: 100%; display: block; }
.sticker-avalanche .stk-emo { line-height: 1; padding: 0; }

/* ══ PASSAGE DE NIVEAU : une animation par palier ═══════════════════════════ */
.lu-show { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; background: rgba(20,24,30,.66); animation: luFade .25s ease-out both; cursor: pointer; padding: 16px; }
.lu-show.out { animation: luFadeOut .3s ease-in forwards; }
@keyframes luFade { from { opacity: 0; } } @keyframes luFadeOut { to { opacity: 0; } }
.lu-stage { display: grid; justify-items: center; gap: 10px; max-width: 100%; }
.lu-rw { font: 700 1.6rem var(--font-hand); color: #fff27a; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.lu-rw b { font-variant-numeric: tabular-nums; }
.lu-close { font: 700 1.05rem var(--font-hand); color: #fff; opacity: .8; }
.lu-bp { width: 230px; padding: 14px; border: 3px double #22252b; background: #fff7d6; color: #22252b; text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,.25); animation: luBpIn .6s cubic-bezier(.3,1.5,.5,1) both; display: grid; justify-items: center; gap: 4px; }
.lu-bp b { font: 400 1.5rem var(--font-display); }
.lu-hand { font: 700 1.3rem var(--font-hand); color: #173a8a; }
.lu-st { color: #d23a4f; border: 3px solid #d23a4f; border-radius: 50%; width: 64px; height: 64px; display: grid; place-items: center; font: 400 1.4rem var(--font-display); transform: rotate(-12deg); animation: luStamp .35s cubic-bezier(.3,1.6,.5,1) .7s both; }
@keyframes luBpIn { from { transform: translateX(-140%) rotate(-12deg); } to { transform: none; } }
@keyframes luStamp { from { transform: rotate(-12deg) scale(2.4); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: 1; } }
.lu-flip { width: 200px; height: 260px; perspective: 800px; }
.lu-flip .in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: luFlip 1.2s cubic-bezier(.3,1.3,.5,1) .2s both; }
@keyframes luFlip { from { transform: rotateY(180deg) translateY(30px); } to { transform: none; } }
.lu-flip .face, .lu-flip .back { position: absolute; inset: 0; backface-visibility: hidden; border: 2px solid #22252b; border-radius: 10px; box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.lu-flip .back { transform: rotateY(180deg); background: repeating-linear-gradient(45deg, #173a8a 0 8px, #3d64b8 8px 16px); }
.lu-flip .face { background: #fff radial-gradient(circle at 50% 38%, #fff27a 0 46px, transparent 47px); color: #22252b; display: grid; place-items: center; text-align: center; padding: 14px; }
.lu-flip .face b { font: 400 1.25rem var(--font-display); }
.lu-flip .face span { font: 700 1.2rem var(--font-hand); color: #d23a4f; }
.lu-fel { text-align: center; display: grid; justify-items: center; background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; padding: 18px 22px; box-shadow: 0 6px 0 var(--hard); }
.lu-fel .rib { background: #d23a4f; color: #fff; font: 400 1.05rem var(--font-display); padding: 10px 30px; clip-path: polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%); animation: luUnroll .8s ease-out .2s both; }
@keyframes luUnroll { from { clip-path: polygon(50% 0,50% 0,50% 50%,50% 100%,50% 100%,50% 50%); } }
.lu-fel .lv { font: 400 4.6rem/1 var(--font-display); color: var(--text); margin-top: 10px; animation: luPop .6s cubic-bezier(.3,1.6,.5,1) .9s both; }
@keyframes luPop { from { transform: scale(0) rotate(-20deg); } }
.lu-fel .hl { font: 700 1.4rem var(--font-hand); color: var(--accent); background: linear-gradient(transparent 55%, var(--mark) 55%) no-repeat 0 0 / 0% 100%; animation: luMark .6s ease-out 1.4s forwards; }
@keyframes luMark { to { background-size: 100% 100%; } }
.lu-dip { width: min(320px, 90vw); position: relative; }
.lu-dip .paper { background: #fbf3df; color: #3a2a05; border: 2px solid #8a6410; padding: 18px 18px 22px; text-align: center; transform-origin: top; animation: luRoll 1s cubic-bezier(.3,1.1,.5,1) .3s both; }
.lu-dip .paper b { font: 400 1.3rem var(--font-display); display: block; }
.lu-dip .paper span { font: 700 1.3rem var(--font-hand); }
.lu-dip .rod { height: 16px; border-radius: 8px; background: linear-gradient(#c58a4f, #7a4a22); border: 2px solid #22252b; margin: 0 -10px; }
.lu-dip .seal { position: absolute; right: 16px; bottom: -14px; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a8a, #a3122a); border: 2px solid #22252b; display: grid; place-items: center; color: #fff; font: 400 .95rem var(--font-display); animation: luStamp .35s cubic-bezier(.3,1.6,.5,1) 1.4s both; }
@keyframes luRoll { from { transform: scaleY(0); } }
.lu-hon { width: min(380px, 92vw); background: #1f2a26; border: 10px solid #6b4a2b; border-radius: 6px; padding: 18px; text-align: center; color: #eef1ea; position: relative; overflow: hidden; }
.lu-hon small { font: 700 1.1rem var(--font-hand); opacity: .8; }
.lu-hon .nm { font: 700 3rem/1.1 var(--font-hand); clip-path: inset(0 100% 0 0); animation: luWrite 1.5s steps(18) .4s forwards; }
@keyframes luWrite { to { clip-path: inset(0 0 0 0); } }
.lu-hon .gold { font: 400 1.2rem var(--font-display); color: #ffe169; opacity: 0; animation: luIn .4s 1.9s forwards; }
@keyframes luIn { to { opacity: 1; } }
.lu-conf { position: absolute; top: -10px; width: 9px; height: 6px; border: 1px solid rgba(0,0,0,.4); animation: luFall 2.4s linear both; }
@keyframes luFall { from { transform: none; } to { transform: translate(var(--dx), 300px) rotate(var(--r)); } }
/* Entre deux niveaux : la barre se remplit au surligneur, le badge respire, le prof note le reste */
:root:root #level-bar-fill { background: var(--mark); border-right: 2px solid var(--accent); transition: width 1.2s cubic-bezier(.3,.9,.4,1); }
.level-badge.lv-close { animation: lvRing 2.4s ease-out infinite; border-radius: 999px; }
@keyframes lvRing { 0% { box-shadow: 0 0 0 0 var(--mark); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.lv-nudge { display: inline-block; font: 700 1.05rem var(--font-hand); color: var(--margin); margin-left: 6px; animation: lvNud 2.2s ease-in-out infinite; }
@keyframes lvNud { 0%, 70%, 100% { transform: none; } 75% { transform: translateX(-3px) rotate(-2deg); } 85% { transform: translateX(3px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .lu-show *, .lv-nudge, .level-badge.lv-close { animation: none !important; clip-path: none !important; opacity: 1 !important; } }

/* Effets de pseudo restants, sans lueur */
@keyframes neFelt { to { background-position: 200% 0; } }
:root:root .nameeffect-gradient { background: linear-gradient(90deg, #d23a4f 0 25%, #173a8a 25% 50%, #2f8a55 50% 75%, #e0a800 75% 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; animation: neFelt 3s steps(8) infinite; }
@keyframes neStar { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1) rotate(40deg); opacity: 1; } }
:root:root .nameeffect-sparks { animation: none; text-shadow: none; position: relative; padding-right: .7em; }
:root:root .nameeffect-sparks::after { content: ""; position: absolute; right: 0; top: -.15em; width: .6em; height: .6em; background: currentColor; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); animation: neStar 1.6s ease-in-out infinite; }
@keyframes nePencil { 0% { color: #d23a4f; } 20% { color: #e8742c; } 40% { color: #e0a800; } 60% { color: #2f8a55; } 80% { color: #173a8a; } 100% { color: #7a4fc0; } }
:root:root .nameeffect-rainbow { filter: none; -webkit-text-fill-color: currentColor; animation: nePencil 3s steps(1) infinite; }
@keyframes neDrip { 0%, 40% { transform: translateY(0) scale(0); } 50% { transform: translateY(0) scale(1); } 100% { transform: translateY(.9em) scale(.6); opacity: 0; } }
:root:root .nameeffect-flammes { color: #c0262f; -webkit-text-fill-color: #c0262f; animation: none; text-shadow: none; position: relative; }
html:not(.light) .nameeffect-flammes { color: #ff8e8e; -webkit-text-fill-color: #ff8e8e; }
:root:root .nameeffect-flammes::after { content: ""; position: absolute; left: 45%; bottom: -.1em; width: .22em; height: .3em; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: currentColor; animation: neDrip 2.4s ease-in infinite; }
:root:root .nameeffect-glace { color: #3d64b8; -webkit-text-fill-color: #3d64b8; text-shadow: 0 0 1px currentColor; animation: neChalk 1.8s steps(2) infinite; }
html:not(.light) .nameeffect-glace { color: #8fb0ff; -webkit-text-fill-color: #8fb0ff; }
@keyframes neGold { to { background-position: -200% 0; } }
:root:root .nameeffect-or { background: linear-gradient(100deg, #8a6410 0%, #e9c25a 30%, #fff2b0 45%, #e9c25a 60%, #8a6410 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; animation: neGold 3.5s linear infinite; }
/* Bouton de l'assistant : Libe centre */
:root:root .btn-chatbot-float { display: grid; place-items: center; }
.btn-chatbot-float .libe-slot { width: 44px; height: 44px; display: block; }
/* Correctif : ces effets ne touchent plus a la position du pseudo (les apercus de la boutique le centrent eux-memes) */
@keyframes neMarkBg { 0% { background-size: 0% .5em; } 45%, 70% { background-size: 100% .5em; } 100% { background-size: 0% .5em; } }
:root:root .nameeffect-pulse { position: static; background-image: linear-gradient(var(--mark), var(--mark)); background-repeat: no-repeat; background-position: left 88%; background-size: 0% .5em; animation: neMarkBg 2.6s ease-in-out infinite; }
:root:root .nameeffect-pulse::after { content: none; }
@keyframes neEraseMask { 0%, 15% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 50% { -webkit-mask-position: 50% 0; mask-position: 50% 0; } 85%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
:root:root .nameeffect-glitch { position: static; overflow: visible; display: inline; -webkit-mask: linear-gradient(90deg, #000 30%, rgba(0,0,0,.08) 45%, rgba(0,0,0,.08) 55%, #000 70%) 100% 0 / 300% 100%; mask: linear-gradient(90deg, #000 30%, rgba(0,0,0,.08) 45%, rgba(0,0,0,.08) 55%, #000 70%) 100% 0 / 300% 100%; animation: neEraseMask 3.2s ease-in-out infinite; }
:root:root .nameeffect-glitch::after { content: none; }
:root:root .nameeffect-sparks { position: static; padding-right: 0; }
:root:root .nameeffect-sparks::after { position: static; display: inline-block; vertical-align: super; margin-left: .1em; width: .5em; height: .5em; }
:root:root .nameeffect-flammes { position: static; }
:root:root .nameeffect-flammes::after { position: static; display: inline-block; vertical-align: -.25em; margin-left: .08em; }
/* Trace du curseur : canevas plein ecran ; les segments du serpent ne se voient plus qu'en partie de Snake */
.cursor-trail { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9990; }
body:not(.snake-playing) .csnake-seg { opacity: 0 !important; }
:root:root .btn-chatbot-float .libe-slot > svg.libe, :root:root .libe-head > svg.libe { width: 100% !important; height: 100% !important; margin: 0 !important; }
:root:root .btn-chatbot-float .libe-slot { width: 46px !important; height: 46px !important; display: block; margin: auto; }
/* Menu d'aide : les textes respirent (ils touchaient le bord du cadre) */
:root:root .help-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px 16px; margin: 0; }
:root:root .help-item .help-icon:empty { display: none; }
:root:root .help-item:has(.help-icon:empty) { grid-template-columns: minmax(0, 1fr); }
:root:root .help-item p { margin: 3px 0 0; }
/* Fiche joueur : portrait a gauche, pseudo a droite (dans sa police equipee) */
.pc-head { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
:root:root .pc-head .pc-portrait { display: block; width: 72px; height: 72px; margin: 0; flex: none; }
:root:root .pc-head .pc-name { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 1.5rem; }

/* ══ LE PUPITRE DU PROFIL ═════════════════════════════════════════════════════
   Les rubriques ne sont plus des bandes : six objets sur un bureau en bois.
   Un clic ouvre le tiroir (la rubrique) juste dessous ; les autres sont rangees. */
.pupitre { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; padding: 40px 14px 24px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%), repeating-linear-gradient(92deg, rgba(0,0,0,.05) 0 1px, transparent 1px 9px), repeating-linear-gradient(88deg, rgba(90,50,20,.12) 0 3px, transparent 3px 61px), linear-gradient(180deg, #d39a5f, #b77a43);
  box-shadow: inset 0 0 0 7px #8a5a2b, inset 0 0 0 9px #5a3a1a, 0 8px 0 var(--hard); --wood: #c58a4f; margin-bottom: 14px; }
html:not(.light) .pupitre { filter: brightness(.85) saturate(.9); }
.pup-groove { position: absolute; left: 24px; right: 24px; top: 13px; height: 13px; border-radius: 7px; background: linear-gradient(#7a4a22, #a8733f); box-shadow: inset 0 3px 3px rgba(0,0,0,.35); }
.pup-groove::after { content: ""; position: absolute; left: 30px; top: 1.5px; width: 110px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #e2485d 0 80%, #f2d2a6 80% 94%, #22252b 94%); border: 1.5px solid #22252b; }
.pup-blot { position: absolute; left: 6%; bottom: 8px; width: 46px; height: 28px; border-radius: 50%; background: radial-gradient(ellipse, rgba(23,40,90,.5) 40%, transparent 70%); pointer-events: none; }
.pup-thing { position: relative; display: grid; justify-items: center; gap: 4px; padding: 6px 2px; border: none; background: transparent; box-shadow: none; cursor: pointer; transition: transform .25s var(--ease, ease); min-width: 0; }
.pup-thing:hover { transform: translateY(-5px); }
.pup-thing.on { transform: translateY(-3px); }
.pup-ob { width: min(150px, 100%); aspect-ratio: 170 / 130; display: block; }
.pup-ob svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pup-thing:hover .pup-ob { transform: rotate(-2deg); }
.pup-tag { position: relative; background: #fffdf3; color: #22252b; border: 1.5px solid #22252b; padding: 2px 10px 3px; font: 400 .78rem var(--font-display); transform: rotate(-2deg); box-shadow: 2px 2px 0 rgba(0,0,0,.25); max-width: 100%; text-align: center; }
.pup-tag::before { content: ""; position: absolute; left: -6px; top: 50%; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #22252b; background: #c58a4f; transform: translateY(-50%); }
.pup-thing.on .pup-tag { background: #fff27a; }
.pup-note { font: 700 1rem var(--font-hand); color: #fff27a; text-shadow: 0 1px 0 rgba(0,0,0,.5); min-height: 1.2em; text-align: center; }
@media (max-width: 520px) { .pupitre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@keyframes coin { 0% { transform: translateY(-10px); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateY(18px); opacity: 1; } 71%, 100% { transform: translateY(18px); opacity: 0; } }
/* Tiroirs : seule la rubrique choisie se montre, sans sa bande d'en-tete */
body.pupitre-on #screen-profile .profile-section:not(.pup-tray) { display: none; }
body.pupitre-on #screen-profile .profile-section.pup-tray > summary { display: none; }
body.pupitre-on #screen-profile .profile-section.pup-tray { background: var(--card); border: 1.5px solid var(--line); border-radius: 0 0 12px 12px; margin-top: -14px; padding: 14px; box-shadow: 0 4px 0 var(--hard); }
.profile-section.pup-anim { animation: pupDrawer .4s cubic-bezier(.3,1.3,.5,1) both; }
@keyframes pupDrawer { from { transform: translateY(-14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pup-thing, .pup-ob { transition: none; } .profile-section.pup-anim { animation: none; } }

/* ══ DEFIS : post-it sur le bord du pupitre + carnet de route ════════════════ */
.postits-edge { position: relative; padding: 50px 14px 20px; border-radius: 14px; background: linear-gradient(180deg, #d39a5f, #b77a43); box-shadow: inset 0 0 0 7px #8a5a2b, 0 6px 0 var(--hard); }
html:not(.light) .postits-edge { filter: brightness(.88); }
.postits-title { position: absolute; left: 18px; top: 12px; font: 700 1.35rem var(--font-hand); color: #fff27a; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.postits { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.postit { position: relative; min-height: 132px; padding: 16px 12px 34px; background: var(--pc); color: #22252b; box-shadow: 3px 5px 0 rgba(0,0,0,.25); transform: rotate(var(--r)); }
.postit::before { content: ""; position: absolute; left: 50%; top: -8px; width: 64px; height: 18px; transform: translateX(-50%) rotate(-3deg); background: rgba(255,255,255,.55); border: 1px dashed rgba(0,0,0,.15); }
.postit b { font: 700 1.25rem/1.1 var(--font-hand); display: block; }
.pi-pr { font: 400 1.45rem var(--font-display); margin-top: 6px; font-variant-numeric: tabular-nums; }
.pi-pr small { font: 700 1.05rem var(--font-hand); color: #5e6470; }
.pi-rw { position: absolute; right: 10px; bottom: 8px; font: 700 1.1rem var(--font-hand); color: #c0262f; }
:root:root .pi-claim { position: absolute; left: 10px; bottom: 7px; width: auto; font: 700 1rem var(--font-hand); background: #22252b; color: #fff27a; border: none; border-radius: 4px; padding: 2px 9px; box-shadow: none; cursor: pointer; }
.pi-stamp { display: inline-block; font: 400 .72rem var(--font-display); color: #2f8a55; border: 2px solid #2f8a55; border-radius: 4px; padding: 1px 6px; transform: rotate(-8deg); margin-top: 6px; }
.postit.claimed { opacity: .62; }
.postit.ready { animation: piWig 1.6s ease-in-out infinite; }
@keyframes piWig { 0%, 100% { transform: rotate(var(--r)); } 50% { transform: rotate(calc(var(--r) + 3deg)); } }
.postit.peel { animation: piPeel .6s ease-in forwards; }
@keyframes piPeel { 40% { transform: rotate(-8deg) translateY(-10px) scale(1.04); } 100% { transform: rotate(25deg) translate(60px, -160px) scale(.8); opacity: 0; } }
.roadbook { background: var(--card); border: 1.5px solid var(--line); border-radius: 8px; box-shadow: 0 3px 0 var(--hard); padding: 10px 14px; }
.rb-row { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.rb-row:last-child { border-bottom: none; }
.rb-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rb-hd b { font: 400 .9rem var(--font-display); flex: 1; min-width: 0; }
.rb-hd > span { font: 700 1.05rem var(--font-hand); color: var(--muted); }
.rb-hd .pi-claim { position: static; }
.rb-steps { display: flex; align-items: center; overflow-x: auto; padding: 6px 0 2px; }
.rb-st { flex: none; display: grid; justify-items: center; gap: 2px; width: 74px; text-align: center; font-size: .74rem; font-variant-numeric: tabular-nums; }
.rb-st i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font: 400 .78rem var(--font-display); font-style: normal; background: var(--card); }
.rb-st.ok i { background: #2f8a55; color: #fff; border-color: #22252b; }
.rb-st em { font: 700 .98rem var(--font-hand); color: var(--margin); font-style: normal; white-space: nowrap; }
.rb-link { flex: none; width: 20px; height: 3px; background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 8px); margin-bottom: 16px; }
@media (prefers-reduced-motion: reduce) { .postit.ready, .postit.peel { animation: none; } }
/* Defis permanents : etagere de bocaux a billes */
.jar-shelf { position: relative; border-radius: 14px; padding: 18px 12px 30px; background: linear-gradient(180deg, #d39a5f, #b77a43); box-shadow: inset 0 0 0 7px #8a5a2b, 0 6px 0 var(--hard); }
html:not(.light) .jar-shelf { filter: brightness(.88); }
.jars { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 10px; position: relative; z-index: 1; }
.jar { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0; }
.jar-svg { width: 120px; height: 130px; display: block; overflow: visible; }
.jar.full .jar-svg { animation: jarHop .9s ease-in-out infinite; }
@keyframes jarHop { 50% { transform: translateY(-5px) rotate(-2deg); } }
.jar.claimed { opacity: .7; }
.jar-tag { font: 400 .76rem/1.2 var(--font-display); color: #22252b; background: #fffdf3; border: 1.5px solid #22252b; padding: 2px 8px; transform: rotate(-2deg); box-shadow: 2px 2px 0 rgba(0,0,0,.25); max-width: 100%; }
.jar-count { font: 700 1.1rem var(--font-hand); color: #fff27a; text-shadow: 0 1px 0 rgba(0,0,0,.5); font-variant-numeric: tabular-nums; }
.jar-rw { font: 700 1rem var(--font-hand); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
:root:root .jar-claim { position: static; }
@media (prefers-reduced-motion: reduce) { .jar.full .jar-svg { animation: none; } }

/* ══ MUR DE MAINTENANCE (reglable depuis l'admin) ═══════════════════════════ */
html:root #maintenance-wall { font-family: var(--font-body, "Archivo", system-ui, sans-serif); overflow-y: auto; }
html:root #maintenance-wall.mw-ardoise { background-color: #1f2a26; background-image: radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.06), transparent 60%); box-shadow: inset 0 0 0 10px #6b4a2b; color: #eef1ea; }
html:root #maintenance-wall.mw-cahier { color: #22252b; box-shadow: none; background-color: #fdfdf9;
  background-image: linear-gradient(90deg, transparent 40px, #e2485d 40px 42px, transparent 42px), repeating-linear-gradient(0deg, transparent 0 31px, #8fb0de 31px 32px), repeating-linear-gradient(0deg, transparent 0 7px, #c9d8ef 7px 8px); }
html:root #maintenance-wall .mw-sheet { padding-left: 8px; }
html:root #maintenance-wall.mw-cahier .mw-sheet { padding-left: 44px; }
html:root #maintenance-wall .mw-title { font-family: "Archivo Black", "Archivo", system-ui, sans-serif; font-weight: 400; }
html:root #maintenance-wall .mw-date, html:root #maintenance-wall .mw-sign { font-family: "Caveat", cursive; font-style: normal; font-weight: 700; font-size: 1.35rem; }
html:root #maintenance-wall.mw-ardoise .mw-date, html:root #maintenance-wall.mw-ardoise .mw-sign { color: #f3f0d9; }
html:root #maintenance-wall.mw-cahier .mw-date, html:root #maintenance-wall.mw-cahier .mw-sign { color: #173a8a; }
html:root #maintenance-wall.mw-ardoise mark { background: linear-gradient(transparent 60%, rgba(255,225,105,.55) 60%); }
html:root #maintenance-wall.mw-cahier mark { background: linear-gradient(transparent 55%, #fff27a 55%); }
html:root #maintenance-wall.mw-ardoise .mw-note { color: #ff9e9e; border-color: #ff8e8e; }
html:root #maintenance-wall.mw-cahier .mw-note { color: #b3263a; border-color: #e2485d; }
.mw-art { width: 110px; height: 110px; margin: 0 0 8px -6px; }
.mw-art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mw-stk { display: flex; gap: 4px; width: auto; height: 54px; }
.mw-stk span { width: 50px; height: 50px; border-radius: 50%; background: #fff; border: 2px solid #22252b; padding: 9px; box-shadow: 2px 3px 0 rgba(0,0,0,.2); transform: rotate(calc(var(--k) * 14deg - 28deg)); animation: mwBob 2.4s ease-in-out infinite; animation-delay: calc(var(--k) * .2s); }
@keyframes mwBob { 50% { transform: translateY(-5px) rotate(calc(var(--k) * 14deg - 28deg)); } }
.mw-count { font: 400 1.25rem "Archivo Black", sans-serif; font-variant-numeric: tabular-nums; margin: 4px 0 12px; }
.mw-prog { margin: 6px 0 14px; max-width: 26rem; }
.mw-prog-l { font: 700 1.2rem "Caveat", cursive; }
.mw-bar { height: 14px; border: 2px solid currentColor; border-radius: 3px; overflow: hidden; margin-top: 3px; }
.mw-bar i { display: block; height: 100%; background: repeating-linear-gradient(45deg, #fff27a 0 8px, #e0a800 8px 16px); border-right: 2px solid currentColor; }
.mw-btn { display: inline-block; margin: 6px 0 4px; padding: 9px 16px; border-radius: 6px; border: 2px solid currentColor; font: 400 .95rem "Archivo Black", sans-serif; text-decoration: none; color: inherit; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
html:root #maintenance-wall.mw-cahier .mw-btn { background: #173a8a; color: #fff; border-color: #0d2050; }
html:root #maintenance-wall.mw-ardoise .mw-btn { background: #ffe169; color: #22252b; border-color: #22252b; }

/* ══ TIROIR EN FICHES SCOTCHEES ══════════════════════════════════════════════
   La rubrique ouverte est posee sur le bois du pupitre ; chaque carte est une
   fiche bristol scotchee (dessin, titre, petite ligne), distribuee une par une. */
body.pupitre-on #screen-profile .profile-section.pup-tray { background: linear-gradient(180deg, #c88d52, #b77a43); border: none; border-radius: 0 0 14px 14px; box-shadow: inset 0 0 0 7px #8a5a2b, 0 8px 0 var(--hard); padding: 30px 16px 22px; margin-top: -16px; }
body.pupitre-on .pup-tray .fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 16px; }
@media (max-width: 400px) { body.pupitre-on .pup-tray .fiches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; } }
html:not(.light) body.pupitre-on #screen-profile .profile-section.pup-tray { filter: brightness(.88); }
body.pupitre-on .pup-tray > .profile-badges-wrap { grid-column: 1 / -1; background: #fffef6; color: #22252b; padding: 14px; box-shadow: 3px 5px 0 rgba(0,0,0,.25); border-top: 6px solid var(--fc); transform: rotate(-.6deg); }
:root:root body.pupitre-on .pup-tray .profile-nav-card {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; min-height: 0; height: auto;
  padding: 18px 10px 12px; border: none; border-top: 6px solid var(--fc); border-radius: 0; color: #22252b;
  background: #fffef6 repeating-linear-gradient(0deg, transparent 0 21px, rgba(80,130,205,.35) 21px 22px);
  box-shadow: 3px 5px 0 rgba(0,0,0,.25); transform: rotate(var(--fr)); animation: ficheDeal .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay: var(--fd);
  transition: transform .2s; }
:root:root body.pupitre-on .pup-tray .profile-nav-card::before { content: ""; display: block; position: absolute; left: 50%; top: -14px; width: 56px; height: 18px; transform: translateX(-50%) rotate(3deg); background: rgba(255,255,255,.6); border: 1px dashed rgba(0,0,0,.15); opacity: 1; height: 18px; right: auto; border-radius: 0; }
:root:root body.pupitre-on .pup-tray .profile-nav-card:hover { transform: rotate(0) translateY(-4px); }
@keyframes ficheDeal { from { transform: translate(-120px, -60px) rotate(-30deg); opacity: 0; } }
body.pupitre-on .pup-tray .profile-nav-card .fiche-art { width: 96px; height: 72px; display: block; }
body.pupitre-on .pup-tray .profile-nav-card .fiche-art svg { width: 100%; height: 100%; display: block; overflow: visible; }
body.pupitre-on .pup-tray .profile-nav-card .fiche-pt { width: 66px; height: 66px; border: 2px solid #22252b; background: #fff; transform: rotate(-4deg); box-shadow: 2px 3px 0 rgba(0,0,0,.2); overflow: hidden; }
:root:root body.pupitre-on .pup-tray .profile-nav-card .pnc-icon, :root:root body.pupitre-on .pup-tray .profile-nav-card .pnc-arrow { display: none; }
:root:root body.pupitre-on .pup-tray .profile-nav-card .pnc-text { display: grid; gap: 2px; color: #22252b; }
:root:root body.pupitre-on .pup-tray .profile-nav-card .pnc-text > span { font: 400 .92rem var(--font-display); color: #22252b; }
:root:root body.pupitre-on .pup-tray .profile-nav-card .pnc-text small { font: 700 1.02rem/1.15 var(--font-hand); color: #c0262f; }
.fiche-art:not(.profile-nav-card .fiche-art) { display: none; }
@media (prefers-reduced-motion: reduce) { body.pupitre-on .pup-tray .profile-nav-card { animation: none; } }
/* Jauge du mur : ruban de chantier qui defile, plot orange au bout */
html:root #maintenance-wall .mw-prog-l { display: flex; justify-content: space-between; gap: 10px; }
html:root #maintenance-wall .mw-pc { font: 400 1.05rem "Archivo Black", sans-serif; font-variant-numeric: tabular-nums; }
html:root #maintenance-wall .mw-tape { position: relative; height: 26px; overflow: visible; margin-top: 30px; }
html:root #maintenance-wall .mw-tape > i { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(-45deg, #ffe169 0 12px, #22252b 12px 24px); background-size: 34px 34px; border-right: 2.5px solid currentColor; animation: mwTape 1s linear infinite; }
@keyframes mwTape { to { background-position: 34px 0; } }
html:root #maintenance-wall .mw-cone { position: absolute; top: -32px; width: 28px; height: 32px; margin-left: -14px; animation: mwCone 1.6s ease-in-out infinite; }
html:root #maintenance-wall .mw-cone svg { width: 100%; height: 100%; display: block; }
@keyframes mwCone { 50% { transform: translateY(-3px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { html:root #maintenance-wall .mw-tape > i, html:root #maintenance-wall .mw-cone { animation: none; } }
/* Jeux classiques : de vraies photos (CC0) a la place des icones */
:root:root .game-btn { padding: 6px 6px 8px; overflow: hidden; }
.game-btn-photo { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: calc(var(--r-md) - 5px); overflow: hidden; border: 1.5px solid var(--line); background: var(--card2); }
.game-btn-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.game-btn:hover .game-btn-photo img { transform: scale(1.06); }
:root:root .game-btn.active .game-btn-photo { border-color: var(--accent); box-shadow: 0 0 0 3px var(--mark); }
:root:root .game-btn.active .game-btn-name { color: var(--accent); background: linear-gradient(transparent 55%, var(--mark) 55%); }

/* ══ DEFIS AU TABLEAU NOIR ════════════════════════════════════════════════════ */
.chalkboard { position: relative; background: #24332c radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.06), transparent 60%); border: 12px solid #8a5a2b; border-radius: 6px; box-shadow: inset 0 0 40px rgba(0,0,0,.4), 0 8px 0 var(--hard); padding: 16px 18px 26px; color: #eef1ea; margin-bottom: 18px; }
.chalkboard::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -12px; height: 10px; background: #6b4a2b; border-radius: 3px; }
.bd-stick { position: absolute; right: 36px; bottom: -9px; width: 30px; height: 6px; background: #fff; border-radius: 2px; z-index: 2; }
.bd-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 760px) { .bd-cols { grid-template-columns: 1fr; } }
.bd-h { font: 700 1.7rem/1 var(--font-hand); margin: 0 0 4px; color: #fff; }
.bd-date { font: 700 1.15rem var(--font-hand); color: #ffe169; margin-bottom: 8px; }
.bd-duty { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1.5px dashed rgba(238,241,234,.25); font: 700 1.25rem/1.15 var(--font-hand); }
.bd-box { width: 22px; height: 22px; border: 2.5px solid #eef1ea; border-radius: 3px; position: relative; }
.bd-duty.claimed .bd-box::after { content: ""; position: absolute; left: 3px; top: -6px; width: 9px; height: 17px; border: solid #ffe169; border-width: 0 4px 4px 0; transform: rotate(40deg); }
.bd-duty.claimed .bd-txt { text-decoration: line-through; text-decoration-color: #ffe169; opacity: .75; }
.bd-duty.ready .bd-box { border-color: #ffe169; animation: bdBlink 1.2s ease-in-out infinite; }
@keyframes bdBlink { 50% { box-shadow: 0 0 0 4px rgba(255,225,105,.35); } }
.bd-bar { display: block; height: 6px; background: rgba(238,241,234,.2); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.bd-bar i { display: block; height: 100%; background: #eef1ea; }
.bd-rw { font: 700 1.1rem var(--font-hand); color: #ffe169; white-space: nowrap; }
:root:root .bd-claim { width: auto; font: 700 1rem var(--font-hand); background: #ffe169; color: #22252b; border: none; border-radius: 4px; padding: 2px 9px; box-shadow: 0 2px 0 rgba(0,0,0,.35); cursor: pointer; white-space: nowrap; }
.bd-perfect { margin-top: 12px; font: 700 1.3rem var(--font-hand); color: #ffe169; }
.bd-year { border-left: 2px dashed rgba(238,241,234,.3); padding-left: 18px; }
@media (max-width: 760px) { .bd-year { border-left: none; padding-left: 0; border-top: 2px dashed rgba(238,241,234,.3); padding-top: 12px; } }
.bd-goal { margin: 8px 0 10px; }
.bd-goal b { font: 700 1.12rem/1.1 var(--font-hand); display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.bd-goal b span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bd-chalkbar { height: 10px; border: 2px solid #eef1ea; border-radius: 2px; margin-top: 3px; background: repeating-linear-gradient(45deg, rgba(238,241,234,.85) 0 3px, transparent 3px 7px) no-repeat 0 0 / var(--p) 100%; }
.bd-goal-act { text-align: right; margin-top: 2px; }
.bd-goal-act em { font: 700 1rem var(--font-hand); color: #ffe169; font-style: normal; }
.bd-ok { font: 400 .7rem var(--font-display); color: #8fe0a8; border: 2px solid #8fe0a8; border-radius: 4px; padding: 0 6px; }
@media (prefers-reduced-motion: reduce) { .bd-duty.ready .bd-box { animation: none; } }
.chalkboard { container-type: inline-size; }
@container (max-width: 600px) {
  .bd-cols { grid-template-columns: 1fr; }
  .bd-year { border-left: none; padding-left: 0; border-top: 2px dashed rgba(238,241,234,.3); padding-top: 12px; }
  .bd-year .bd-goals, .bd-year { display: block; }
}
@container (min-width: 420px) and (max-width: 600px) {
  .bd-year { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .bd-year .bd-h { grid-column: 1 / -1; }
}

/* ══ CORRECTIFS DU THEME CLAIR ═════════════════════════════════════════════════
   Ces regles « html.light » etaient ecrasees par les regles :root:root (plus
   fortes) : fin de partie / pause de Snake et Libero Run restaient sombres, donc
   les boutons Quitter / Retour (encre foncee) ne se voyaient plus. */
:root:root.light .snake-over-overlay, :root:root.light .snake-pause-overlay { background: rgba(253,253,249,.92); color: #22252b; }
:root:root.light .snake-over-overlay .btn-secondary, :root:root.light .snake-pause-overlay .btn-secondary { background: #fff; color: #22252b; border: 1.5px solid #22252b; box-shadow: 0 3px 0 rgba(23,58,138,.16); }
:root:root.light .read-overlay { background: rgba(34,37,43,.42); }
:root:root.light .shop-fn-detail, :root:root.light .book-reader { background-color: var(--bg); background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(80,130,205,.3) 31px 32px); }
:root:root.light .overlay-welcome { background-color: var(--bg); background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(80,130,205,.42) 31px 32px), repeating-linear-gradient(0deg, transparent 0 7px, rgba(120,160,220,.2) 7px 8px); }
/* Boutons de Libe (corbeille, croix) : l'icone en relief prenait une teinte rose pale invisible sur le cahier */
:root:root .chatbot-reset, :root:root .chatbot-close { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-sm); color: var(--text); box-shadow: 0 2px 0 var(--hard); }
:root:root .chatbot-reset:hover, :root:root .chatbot-close:hover { background: var(--mark); }
:root:root .chatbot-reset svg, :root:root .chatbot-close svg { color: var(--text) !important; }
:root:root .chatbot-reset .ic3d-face, :root:root .chatbot-close .ic3d-face { color: var(--text) !important; stroke: var(--text) !important; }
:root:root .chatbot-reset .ic3d-depth, :root:root .chatbot-close .ic3d-depth { display: none; }
:root:root .chatbot-reset .ic3d-face *, :root:root .chatbot-close .ic3d-face * { stroke: var(--text) !important; }

/* ══ Profil = CARNET DE CORRESPONDANCE ═══════════════════════════════════════
   Couverture bleue (portrait colle AVEC son cadre, etiquette au pseudo, tampon VIP)
   et page lignee a marge rouge. Le palier de niveau colore le dos du carnet. */
:root:root #level-banner.profile-id {
  display: grid; grid-template-columns: 172px minmax(0, 1fr); padding: 0; overflow: hidden;
  background: #173a8a; border: 2.5px solid #22252b; border-left: 2.5px solid #22252b; border-radius: 8px;
  box-shadow: 0 6px 0 var(--hard); color: #22252b;
}
html:not(.light):root #level-banner.profile-id { border-color: rgba(238,241,234,.5); }
:root:root #level-banner.level-tier-1 { --spine: #8c948f; }
:root:root #level-banner.level-tier-2 { --spine: #6fa0ff; }
:root:root #level-banner.level-tier-3 { --spine: #4cc27f; }
:root:root #level-banner.level-tier-4 { --spine: #ff7a8a; }
:root:root #level-banner.level-tier-5 { --spine: #ffd34d; }
.corr-cover {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 10px; padding: 14px 12px 16px 18px; color: #fff;
  background: linear-gradient(90deg, var(--spine, #8c948f) 0 6px, transparent 6px), repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 4px, transparent 4px 8px);
}
.corr-kicker { font: 400 .72rem/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; text-align: center; }
/* La photo : le portrait entier, cadre compris (plus de rognage en rond) */
:root:root .corr-cover .pid-avatar, :root:root .corr-cover .pid-avatar.has-portrait {
  width: 104px; height: 104px; border-radius: 2px; border: 3px solid #fff; background: #fff; padding: 0; overflow: hidden;
  box-shadow: 2px 3px 0 rgba(0,0,0,.3); transform: rotate(3deg); display: block; color: #22252b;
}
.corr-cover .pid-avatar svg { display: block; width: 100%; height: 100%; }
.corr-cover .pid-av-edit { right: -12px; top: auto; bottom: -8px; }
.corr-cover .pid-av-hint { color: #ffe169; margin-top: -4px; }
:root:root .corr-label {
  margin: 0; max-width: 100%; background: #fffdf3; color: #22252b; border: 2px solid #22252b; border-radius: 4px;
  padding: 5px 8px; transform: rotate(-2deg); text-align: center; font-family: var(--font-hand); font-weight: 700; font-size: 1.35rem; line-height: 1.1;
  overflow-wrap: anywhere;
}
:root:root .corr-label .pid-name-txt { filter: none; }
:root:root .corr-cover .vip-badge {
  background: transparent; color: #ffe169; border: 3px solid #ffe169; border-radius: 6px; padding: 0 8px;
  font: 400 .8rem var(--font-display); transform: rotate(-8deg); text-shadow: none;
}
:root:root .corr-cover .vip-badge.hidden { display: none; }
.corr-cover .vip-badge-count::before { content: " · "; }
.corr-page {
  min-width: 0; padding: 12px 16px 14px 36px; background-color: #fffef6; color: #22252b;
  background-image: linear-gradient(90deg, transparent 22px, #e2485d 22px 23.5px, transparent 23.5px), repeating-linear-gradient(0deg, transparent 0 25px, rgba(80,130,205,.35) 25px 26px);
}
html:not(.light) .corr-page { background-color: #f3efe2; }
.corr-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.corr-row > span:first-child { font: 600 .85rem var(--font-body); color: #5e6470; }
:root:root .corr-page .level-badge { font: 700 1.6rem/1 var(--font-hand); color: #173a8a; background: none; border: none; padding: 0 4px; }
:root:root .corr-page .level-badge::before { content: none; }
:root:root .corr-page .level-main { display: none; }
:root:root .corr-page .level-bar { height: 12px; margin: 4px 0 2px; border: 2px solid #22252b; border-radius: 3px; background: #fff; overflow: hidden; }
:root:root .corr-page .level-bar-fill { background: #fff27a; border-right: 2px solid #173a8a; border-radius: 0; }
:root:root .corr-page .level-sub { margin: 0; text-align: right; font: 700 1.05rem var(--font-hand); color: #173a8a; opacity: 1; }
:root:root .corr-page .bul-grades { border: none; }
:root:root .corr-page .bul-row { display: flex; justify-content: space-between; align-items: baseline; border: none; font-size: .85rem; }
:root:root .corr-page .bul-row span { padding: 2px 0; color: #5e6470; font-weight: 600; }
:root:root .corr-page .bul-note { border: none; text-align: right; font: 700 1.25rem var(--font-hand); color: #173a8a; }
:root:root .corr-page .bul-note .bolt { background: #173a8a; }
:root:root .corr-page .bul-appre { padding: 6px 0 0; font: 700 1.2rem/1.2 var(--font-hand); color: #c0262f; }
:root:root .corr-page .bul-appre-k { color: #5e6470; }
:root:root .corr-page .lv-nudge { color: #c0262f; margin: 0; }
@media (max-width: 520px) {
  :root:root #level-banner.profile-id { grid-template-columns: 1fr; }
  .corr-cover { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 14px; }
  .corr-kicker { grid-column: 1 / -1; justify-self: center; }
  .corr-cover .pid-av-wrap { grid-row: 2 / span 3; }
  .corr-cover .pid-av-hint { grid-column: 1; grid-row: 5; justify-self: center; }
}

/* ══ Didacticiel « Libe te guide » ═══════════════════════════════════════════
   Plein ecran mais transparent aux clics : seuls la bulle et ses boutons en recoivent.
   Libe (le crayon) se deplace, un cercle rouge se dessine autour de l'element. */
:root:root .tuto-wrap { position: fixed; inset: 0; left: 0; bottom: auto; transform: none; z-index: 8000; pointer-events: none; }
:root:root .tuto-wrap.visible { pointer-events: none; }
:root:root .tuto-wrap.hidden { display: none; }
.tuto-ring {
  position: fixed; border: 3px solid #e2485d; border-radius: 50%; pointer-events: none;
  transform: rotate(-3deg); transition: left .6s cubic-bezier(.3,1.2,.5,1), top .6s cubic-bezier(.3,1.2,.5,1), width .6s, height .6s;
}
.tuto-ring.hidden { display: none; }
.tuto-ring.draw { animation: tutoWipe .7s ease-out both; }
@keyframes tutoWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
html:not(.light) .tuto-ring { border-color: #ff8e8e; }
.tuto-libe { position: fixed; width: 56px; height: 72px; pointer-events: none; transition: left .7s cubic-bezier(.3,1.2,.5,1), top .7s cubic-bezier(.3,1.2,.5,1); }
.tuto-libe svg { width: 100%; height: 100%; display: block; animation: tutoBob 1.4s ease-in-out infinite; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.18)); }
@keyframes tutoBob { 50% { transform: translateY(-5px) rotate(-3deg); } }
:root:root .tuto-bubble {
  position: fixed; pointer-events: auto; box-sizing: border-box; margin: 0;
  background: #fffef6; color: #22252b; border: 2px solid #22252b; border-radius: 14px;
  padding: 10px 14px 10px; box-shadow: 3px 4px 0 rgba(0,0,0,.18); animation: none;
  transition: left .7s cubic-bezier(.3,1.2,.5,1), top .7s cubic-bezier(.3,1.2,.5,1);
}
:root:root .tuto-bubble.pop { animation: tutoPop .35s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes tutoPop { from { transform: scale(.6); opacity: 0; } }
:root:root .tuto-text { margin: 0 0 8px; font: 700 1.3rem/1.2 var(--font-hand); color: #22252b; text-align: left; }
:root:root .tuto-text b, :root:root .tuto-text strong { font-weight: 700; background: linear-gradient(transparent 55%, #fff27a 55%); }
:root:root .tuto-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin: 0; }
:root:root .tuto-dots { display: flex; gap: 4px; margin: 0 auto 0 0; justify-content: flex-start; }
:root:root .tuto-dots i { width: 7px; height: 7px; border-radius: 50%; background: #c9ced6; }
:root:root .tuto-dots i.done { background: #8ea6d8; }
:root:root .tuto-dots i.on { background: #173a8a; }
:root:root .tuto-skip, :root:root .tuto-ok {
  font: 700 .82rem var(--font-body); padding: 6px 11px; border-radius: 6px; border: 1.5px solid #22252b;
  background: #fff; color: #22252b; box-shadow: 0 2px 0 rgba(23,58,138,.16); width: auto; cursor: pointer;
}
:root:root .tuto-skip { border-color: transparent; box-shadow: none; background: transparent; color: #5e6470; }
:root:root .tuto-ok { background: #173a8a; color: #fff; }
:root:root .tuto-highlight { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .tuto-libe svg, .tuto-ring.draw, :root:root .tuto-bubble.pop { animation: none; } .tuto-libe, .tuto-ring, :root:root .tuto-bubble { transition: none; } }

/* ══ FENETRES = ARDOISE DE POCHE (tous les themes) ═══════════════════════════
   Chaque fenetre reprend localement les couleurs du theme Ardoise : tout ce qui
   lit var(--card), var(--text)... a l'interieur passe a la craie, sans toucher au HTML.
   Cadre en bois, grain de craie, croix a la craie rouge, boutons d'action a la craie jaune. */
:root:root .overlay :is(.overlay-box, .recovery-modal, .help-modal, .comment-modal, .community-modal, .snake-vote-modal),
:root:root .settings-panel {
  --bg: #2f4a3e; --card: #2f4a3e; --card2: rgba(255,255,255,.07); --text: #eef1ea; --muted: #b8c6bd;
  --accent: #ffe169; --board: #ffe169; --board2: #f5d64a; --on-board: #22252b; --red: #ff9a9a; --yellow: #ffe169; --gold: #ffe169;
  --border: rgba(238,241,234,.25); --line: rgba(238,241,234,.55); --ink: #eef1ea; --mark: rgba(255,225,105,.45); --margin: #ff9a9a; --hard: rgba(0,0,0,.35);
  color-scheme: dark;
  background: #2f4a3e radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 5px 5px;
  color: #eef1ea; border: 10px solid #a0703f; border-radius: 12px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), 0 7px 0 rgba(0,0,0,.35);
  animation: ardIn .45s cubic-bezier(.3,1.4,.5,1) both;
}
@keyframes ardIn { from { opacity: 0; transform: translateY(26px) rotate(-2deg) scale(.94); } }
:root:root .overlay.hidden :is(.overlay-box, .recovery-modal) { animation: none; }
/* Titres a la craie, souligne jaune */
:root:root .overlay :is(.overlay-box, .recovery-modal, .help-modal, .comment-modal, .community-modal, .snake-vote-modal) :is(h2, h3, .profile-modal-title, .help-modal-title, .comment-modal-title, .snake-vote-title, .community-title) {
  color: #fff; font-family: var(--font-hand); font-weight: 700; font-size: 1.75rem; line-height: 1.05; letter-spacing: 0;
  text-decoration: underline; text-decoration-color: #ffe169; text-decoration-thickness: 3px; text-underline-offset: 4px;
}
:root:root .overlay :is(.overlay-box, .recovery-modal, .help-modal, .comment-modal, .community-modal, .snake-vote-modal) :is(p, li, label, span, div, small, td, th) { color: inherit; }
:root:root .overlay :is(.overlay-box, .recovery-modal, .help-modal, .comment-modal, .community-modal, .snake-vote-modal) :is(strong, b) { color: #ffe169; background: none; }
/* Croix de fermeture : un X a la craie blanche (A2) */
:root:root .overlay :is([class*="close"], .recovery-close) {
  background: transparent !important; border: none !important; box-shadow: none !important; color: #eef1ea !important;
  font: 700 1.7rem/1 var(--font-hand);
}
/* Champs : trait de craie pointille */
:root:root .overlay :is(.overlay-box, .recovery-modal, .help-modal, .comment-modal, .community-modal, .snake-vote-modal) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), textarea, select) {
  background: rgba(0,0,0,.18) !important; color: #fff !important; border: 2px dashed rgba(238,241,234,.6) !important; border-radius: 6px; box-shadow: none !important;
}
:root:root .overlay :is(.overlay-box, .recovery-modal, .help-modal, .comment-modal, .community-modal, .snake-vote-modal) ::placeholder { color: rgba(238,241,234,.5); }
/* Boutons : action principale a la craie jaune, les autres au trait blanc */
:root:root .overlay :is(.overlay-box, .recovery-modal, .help-modal, .comment-modal, .community-modal, .snake-vote-modal) :is(.btn, button):not([class*="close"]):not(.help-tab):not(.pe-opt):not(.pe-tab):not(.wheel-btn-free) {
  background: transparent; color: #fff; border: 2px solid rgba(238,241,234,.8); box-shadow: 0 3px 0 rgba(0,0,0,.35);
}
:root:root .overlay :is(.overlay-box, .recovery-modal, .help-modal, .comment-modal, .community-modal, .snake-vote-modal) :is(.btn-primary, .btn-primary *, .community-cta) {
  background: #ffe169; color: #22252b; border-color: #1b2a23;
}
:root:root .overlay :is(.overlay-box, .recovery-modal, .help-modal, .comment-modal, .community-modal, .snake-vote-modal) .btn-primary { box-shadow: 0 3px 0 #1b2a23; }
/* Encarts clairs de l'ancien design : sur l'ardoise, de simples cadres a la craie */
:root:root .overlay :is(.overlay-box, .recovery-modal, .help-modal, .comment-modal, .community-modal, .snake-vote-modal) :is(.community-step, .help-item, .friend-row, .friend-req-row, .recovery-section, .iq-box, .vip-perk, .referral-box, .giftrecv-item) {
  background: transparent; border-color: rgba(238,241,234,.3); box-shadow: none; color: #eef1ea;
}
:root:root .overlay :is(.community-step-num) { background: transparent; color: #ffe169; border: 2px solid #ffe169; font-family: var(--font-hand); font-weight: 700; }
:root:root .overlay :is(hr, .sp-divider) { border-color: rgba(238,241,234,.3); }
:root:root .overlay a { color: #ffe169; }
/* Le portrait garde son papier (il est dessine a l'encre) */
:root:root .overlay .recovery-modal.portrait-modal .pe-stage, :root:root .overlay .pe-prev { background: #fffef6; }

/* ══ Reglages = LISTE A COCHER (sur l'ardoise) ═══════════════════════════════ */
:root:root .settings-panel { padding: 14px 16px 12px; min-width: min(300px, calc(100vw - 32px)); }
.sp-title { margin: 0 0 6px; font: 700 1.75rem/1 var(--font-hand); color: #fff; text-decoration: underline; text-decoration-color: #ffe169; text-decoration-thickness: 3px; text-underline-offset: 4px; }
:root:root .settings-panel .sp-ck {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 0; margin: 0;
  background: none; border: none; border-radius: 0; box-shadow: none; text-align: left; cursor: pointer;
  font: 700 1.3rem/1.1 var(--font-hand); color: #eef1ea; min-height: 34px;
}
:root:root .settings-panel .sp-ck:hover { background: none; }
:root:root .settings-panel .sp-ck:hover .spk-tx { text-decoration: underline dotted rgba(238,241,234,.5); }
.spk { width: 21px; height: 21px; flex: none; border: 2px solid #eef1ea; border-radius: 3px; display: grid; place-items: center; font-style: normal; }
.sp-ck.on .spk::after { content: "✓"; color: #ff9a9a; font: 700 1.55rem/1 var(--font-hand); transform: translate(1px, -3px) rotate(-6deg); animation: spkTick .25s ease-out; }
@keyframes spkTick { from { transform: scale(.3) rotate(-30deg); opacity: 0; } }
.spk-tx em { font-style: normal; color: #ffe169; font-size: 1.05rem; }
:root:root .settings-panel .sp-vol-row { display: flex; align-items: center; gap: 10px; padding: 0 0 6px 31px; }
:root:root .settings-panel .sp-vol-row.hidden { display: none; }
:root:root .settings-panel .sp-vol-row .sp-label { font: 700 1.05rem var(--font-hand); color: #b8c6bd; }
/* Le volume : une reglette d'ecolier, curseur rouge */
:root:root .settings-panel .sp-vol-slider {
  -webkit-appearance: none; appearance: none; flex: 1; height: 22px; border: 2px solid #22252b; border-radius: 3px;
  background: #ffe9a8 repeating-linear-gradient(90deg, #22252b 0 1.5px, transparent 1.5px 9px) bottom / 100% 7px no-repeat;
}
.settings-panel .sp-vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 7px; height: 30px; background: #d23a4f; border: 1.5px solid #22252b; border-radius: 2px; cursor: pointer; }
.settings-panel .sp-vol-slider::-moz-range-thumb { width: 7px; height: 30px; background: #d23a4f; border: 1.5px solid #22252b; border-radius: 2px; cursor: pointer; }
:root:root .settings-panel .sp-divider { background: rgba(238,241,234,.25); }
:root:root .settings-panel :is(.sp-label, .sp-refund-info) { color: #b8c6bd; }
:root:root .settings-panel .sp-refund-info { color: #ffe169; font: 700 1.15rem var(--font-hand); }
:root:root .settings-panel .sp-legal-link { color: #b8c6bd; }
@media (prefers-reduced-motion: reduce) { :root:root .overlay :is(.overlay-box, .recovery-modal, .help-modal, .comment-modal, .community-modal, .snake-vote-modal), .sp-ck.on .spk::after { animation: none; } }

/* ══ Pseudos lisibles partout ═══════════════════════════════════════════════
   Classements et ailleurs : un fin CONTOUR D'ENCRE autour des lettres colorees
   (couleur et reflet intacts). Profil : la FEUILLE METALLIQUE (ruban de la couleur,
   lettres a l'encre, reflet qui passe). */
:root:root :is(.name-rainbow, .name-galaxy, .name-silver, .name-bronze, .name-gold, .name-diamond, .name-color-benin, .name-color-pagne, .nameeffect-or, .nameeffect-gradient) {
  filter: drop-shadow(1px 0 0 #22252b) drop-shadow(-1px 0 0 #22252b) drop-shadow(0 1px 0 #22252b) drop-shadow(0 -1px 0 #22252b);
}
html:not(.light) :is(.name-rainbow, .name-galaxy, .name-silver, .name-bronze, .name-gold, .name-diamond, .name-color-benin, .name-color-pagne, .nameeffect-or, .nameeffect-gradient) {
  filter: drop-shadow(1px 0 0 #141c18) drop-shadow(-1px 0 0 #141c18) drop-shadow(0 1px 0 #141c18) drop-shadow(0 -1px 0 #141c18);
}
/* Profil : le ruban */
.corr-label:has(.name-silver)  { --fo: linear-gradient(90deg, #b9c0c9, #eef1f4, #b9c0c9); }
.corr-label:has(.name-diamond) { --fo: linear-gradient(90deg, #9fd8ff, #e6f7ff, #9fd8ff); }
.corr-label:has(.name-gold)    { --fo: linear-gradient(90deg, #e0b43a, #fff0a8, #e0b43a); }
.corr-label:has(.nameeffect-or){ --fo: linear-gradient(90deg, #c99a2e, #fbe7a1, #c99a2e); }
.corr-label:has(.name-galaxy)  { --fo: linear-gradient(90deg, #3a145e, #7b2ff7, #f107a3); --fo-ink: #fff; }
.corr-label:has(.name-bronze)  { --fo: linear-gradient(90deg, #b26a2a, #f0be86, #b26a2a); }
.corr-label:has(.name-rainbow) { --fo: linear-gradient(90deg, #ffb3b3, #ffe08a, #b9f0b9, #a9dcff, #d7b8ff); }
.corr-label:has(.name-color-benin) { --fo: linear-gradient(90deg, #9fdcbf 33%, #fff09a 33% 66%, #ffb3be 66%); }
.corr-label:has(.name-color-pagne) { --fo: repeating-linear-gradient(45deg, #ffcf8a 0 8px, #ffe6b8 8px 16px); }
.corr-label:has(.nameeffect-gradient) { --fo: linear-gradient(90deg, #ffb3be 0 25%, #a9c4ff 25% 50%, #9fdcbf 50% 75%, #ffe08a 75%); }
:root:root .corr-label[style], :root:root .corr-label:is(:has(.name-silver), :has(.name-diamond), :has(.name-gold), :has(.nameeffect-or), :has(.name-galaxy), :has(.name-bronze), :has(.name-rainbow), :has(.name-color-benin), :has(.name-color-pagne), :has(.nameeffect-gradient)) {
  position: relative; overflow: hidden; background: var(--fo);
}
:root:root .corr-label .pid-name-txt:is(.name-rainbow, .name-galaxy, .name-silver, .name-bronze, .name-gold, .name-diamond, .name-color-benin, .name-color-pagne, .nameeffect-or, .nameeffect-gradient) {
  background: none; -webkit-text-fill-color: var(--fo-ink, #22252b); color: var(--fo-ink, #22252b); filter: none; animation: none;
}
:root:root .corr-label:is(:has(.name-silver), :has(.name-diamond), :has(.name-gold), :has(.nameeffect-or), :has(.name-galaxy), :has(.name-bronze), :has(.name-rainbow), :has(.name-color-benin), :has(.name-color-pagne), :has(.nameeffect-gradient))::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%);
  transform: translateX(-100%); animation: foilSweep 2.6s ease-in-out infinite;
}
@keyframes foilSweep { 60%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .corr-label::after { animation: none !important; } }

/* ══ Roue de la fortune a la craie ══════════════════════════════════════════ */
:root:root .wheel-wrap { width: 240px; height: 250px; margin: 14px auto 4px; }
:root:root .wheel-disc { width: 240px; height: 240px; border: none; box-shadow: none; background: none; border-radius: 50%; }
.wheel-disc svg { display: block; width: 100%; height: 100%; }
:root:root .wheel-pointer { top: -16px; width: 30px; height: 30px; text-shadow: none; filter: drop-shadow(1px 2px 0 rgba(0,0,0,.35)); }
.wheel-pointer svg { width: 100%; height: 100%; display: block; }
:root:root .wheel-label { display: none; }
:root:root #overlay-wheel #btn-wheel-spin { background: #ffe169; color: #22252b; border-color: #1b2a23; box-shadow: 0 3px 0 #1b2a23; }
:root:root #wheel-status { font: 700 1.5rem var(--font-hand); color: #ffe169; text-align: center; min-height: 1.6em; }
#wheel-status.wheel-won { animation: wheelWon .5s cubic-bezier(.3,1.7,.5,1); }
@keyframes wheelWon { from { transform: scale(.4) rotate(-10deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #wheel-status.wheel-won { animation: none; } }
/* Le contour d'encre des pseudos depasse un peu des lettres : on laisse de l'air
   autour du nom (sans changer la hauteur de la ligne) pour que rien ne soit rogne. */
:root:root .lb-name { padding: 4px 3px; margin: -4px -3px; }
/* Effet « gomme » : le masque ne couvrait que la boite du texte, donc il rognait net
   le contour d'encre et les lettres qui depassent (Lobster...). On lui donne de l'air,
   et la gomme n'efface plus qu'a moitie (sur une couleur claire, le pseudo disparaissait). */
:root:root .nameeffect-glitch {
  display: inline-block; padding: 5px 4px; margin: -5px -4px; vertical-align: baseline;
  -webkit-mask: linear-gradient(90deg, #000 30%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.45) 55%, #000 70%) 100% 0 / 300% 100%;
  mask: linear-gradient(90deg, #000 30%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.45) 55%, #000 70%) 100% 0 / 300% 100%;
}
:root:root .lb-name .nameeffect-glitch { max-width: calc(100% + 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* ══ Carnet qui s'embellit avec le niveau (classes posees par _carnetClasses) ═══ */
:root:root #level-banner.profile-id { --spine: #0d1f4d; }
:root:root #level-banner.cv-cuir, :root:root #level-banner.cv-noir { --spine: #e0b43a; }
.corr-cover { overflow: hidden; }
.cv-carton .corr-cover { background: linear-gradient(90deg, var(--spine) 0 6px, transparent 6px), #173a8a; }
.cv-satin .corr-cover { background: linear-gradient(90deg, var(--spine) 0 6px, transparent 6px), linear-gradient(160deg, #2a4fa8, #173a8a 60%, #122f72); }
.cv-toile .corr-cover { background: linear-gradient(90deg, var(--spine) 0 6px, transparent 6px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 3px), #1b2f6b; }
.cv-cuir .corr-cover { background: linear-gradient(90deg, var(--spine) 0 6px, transparent 6px), radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0 / 4px 4px, radial-gradient(circle at 30% 20%, #a52a3c, #6e1424 60%, #3c0812); }
.cv-noir .corr-cover { background: linear-gradient(90deg, var(--spine) 0 6px, transparent 6px), radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0 / 4px 4px, radial-gradient(circle at 30% 15%, #2a251c, #14110c 65%, #070605); }
:root:root #level-banner.profile-id { background: #0d1f4d; }
.corr-cover { box-shadow: inset -10px 0 18px rgba(0,0,0,.25); }
.corr-cover > :not(.corr-deco) { position: relative; z-index: 1; }
:root:root .corr-cover .pid-av-wrap { position: relative; }
.corr-kicker { padding: 0 6px; }
.cv-cuir .corr-kicker, .cv-noir .corr-kicker {
  background: linear-gradient(180deg, #fff2b0 0%, #e9c25a 40%, #a87a14 60%, #f6dc8a 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,.55));
}
/* Decors */
.corr-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.corr-deco .cd { position: absolute; }
.cd.filig { inset: 0; width: 100%; height: 100%; opacity: .55; }
.cd.stch { inset: 7px 7px 7px 14px; border: 1.5px dashed var(--th, rgba(255,240,200,.5)); border-radius: 5px; }
.cd.stch2 { inset: 11px 11px 11px 18px; border: 1.5px dashed rgba(255,240,200,.32); border-radius: 4px; }
.cd.brass { width: 28px; height: 28px; background: linear-gradient(135deg, #fff2b0, #d4a62c 45%, #7a5508 70%, #e9c25a); border: 1.5px solid #4a3305; }
.cd.brass.plastic { background: linear-gradient(135deg, #d6dade, #9aa3ad); border-color: #4b525a; }
.cd.tl { left: 0; top: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.cd.bl { left: 0; bottom: 0; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.cd.tr { right: 0; top: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.cd.br { right: 0; bottom: 0; clip-path: polygon(100% 0, 0 100%, 100% 100%); }
.cd.band { right: 20px; top: 0; bottom: 0; width: 7px; background: linear-gradient(90deg, #111, #3a3a3a, #111); }
.cd.silk { right: 10px; top: 0; width: 13px; height: 92px; background: linear-gradient(90deg, var(--rb), color-mix(in srgb, var(--rb) 65%, #fff) 50%, var(--rb)); border: 1.5px solid #22252b; border-top: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); }
.cd.tassel { right: 5px; top: 84px; width: 23px; height: 19px; background: repeating-linear-gradient(90deg, #e9c25a 0 2px, #a87a14 2px 4px); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.cd.clasp { right: 0; top: 50%; width: 26px; height: 36px; margin-top: -18px; border-radius: 6px 0 0 6px; background: linear-gradient(180deg, #fff2b0, #d4a62c 40%, #7a5508 75%, #e9c25a); border: 1.5px solid #4a3305; border-right: none; box-shadow: -2px 2px 0 rgba(0,0,0,.35); }
.cd.clasp::after { content: ""; position: absolute; left: 8px; top: 12px; width: 9px; height: 11px; border-radius: 50%; background: radial-gradient(#3a2600, #1a1000); }
.cd.stk { left: 14px; bottom: 12px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #22252b; background: #fff27a; transform: rotate(-12deg); display: grid; place-items: center; font: 400 .62rem var(--font-display); color: #22252b; }
.cd.medal { left: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(#fff2b0, #d4a62c, #7a5508, #e9c25a, #fff2b0, #d4a62c, #7a5508, #e9c25a, #fff2b0); border: 2px solid #4a3305; display: grid; place-items: center; font: 400 .66rem var(--font-display); color: #4a3305; }
.cd.wax { left: 10px; bottom: 10px; width: 44px; height: 44px; border-radius: 47% 53% 49% 51%; background: radial-gradient(circle at 35% 30%, #ff8a8a, #b3122a 55%, #5c0712); box-shadow: 0 3px 0 rgba(0,0,0,.4), inset 0 0 0 5px rgba(0,0,0,.18); display: grid; place-items: center; font: 400 1rem var(--font-display); color: #7a0a1c; text-shadow: 0 1px 0 rgba(255,150,150,.6); }
.cd.stars { inset: 0; }
.cd.stars i { position: absolute; width: 8px; height: 8px; background: #ffe9a0; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: cdTw 2.4s ease-in-out infinite; }
@keyframes cdTw { 50% { transform: scale(.3); opacity: .3; } }
.cd.glint { inset: 0; background: linear-gradient(110deg, transparent 42%, rgba(255,240,190,.4) 50%, transparent 58%); transform: translateX(-120%); animation: cdGl 5s ease-in-out infinite; }
@keyframes cdGl { 55%, 100% { transform: translateX(120%); } }
/* Photo : cadre laiton puis or */
:root:root .ph-brass .corr-cover .pid-avatar { border: 4px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #e9d39a, #b08a3a, #6e5420) border-box; }
:root:root .ph-gold .corr-cover .pid-avatar { border: 4px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #fff2b0, #d4a62c, #7a5508, #e9c25a) border-box; transform: none; }
/* Cadre de l'etiquette (le papier et le pseudo ne changent jamais) */
.corr-lab-w { position: relative; display: inline-block; max-width: 100%; }
.corr-rivet { display: none; }
.lab-2 .corr-lab-w::before, .lab-2 .corr-lab-w::after { content: ""; position: absolute; top: -5px; width: 26px; height: 10px; background: rgba(255,248,200,.75); border: 1px solid rgba(0,0,0,.12); z-index: 2; }
.lab-2 .corr-lab-w::before { left: -8px; transform: rotate(-30deg); }
.lab-2 .corr-lab-w::after { right: -8px; transform: rotate(30deg); }
.lab-3 .corr-lab-w, .lab-4 .corr-lab-w, .lab-5 .corr-lab-w { padding: 4px 8px; border-radius: 6px; }
.lab-3 .corr-lab-w { background: linear-gradient(180deg, #f2d27a, #b8862a 50%, #e9c25a); border: 1.5px solid #4a3305; box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.lab-4 .corr-lab-w { background: linear-gradient(180deg, #fff2b0, #d4a62c 45%, #7a5508 55%, #f6dc8a); border: 1.5px solid #4a3305; box-shadow: 0 3px 0 rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.35); }
.lab-5 .corr-lab-w { padding: 6px 10px; background: #14110c; border: 2px solid #e0b43a; box-shadow: 0 3px 0 rgba(0,0,0,.5), inset 0 0 0 3px #14110c, inset 0 0 0 4.5px #e0b43a; }
:root:root .lab-3 .corr-label, :root:root .lab-4 .corr-label, :root:root .lab-5 .corr-label { transform: none; border-width: 1.5px; }
:root:root .lab-4 .corr-label, :root:root .lab-5 .corr-label { border-color: #7a5508; box-shadow: inset 0 0 0 2px #fffdf3, inset 0 0 0 3px #e0b43a; }
.lab-3 .corr-rivet, .lab-4 .corr-rivet, .lab-5 .corr-rivet { display: block; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6c8, #8a6410); border: 1px solid #3a2600; z-index: 2; }
.corr-rivet:first-child { left: 1px; } .corr-rivet:last-child { right: 1px; }
.lab-star .corr-lab-w::after { content: ""; position: absolute; left: 50%; top: -9px; width: 14px; height: 14px; margin-left: -7px; background: #ffe9a0; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: cdTw 2.4s ease-in-out infinite; }
/* Page : tranche doree */
.pg-edge .corr-page { box-shadow: inset 6px 0 0 #e0b43a, inset 0 -5px 0 #e0b43a, inset 0 5px 0 #e0b43a; }
.pg-edge2 .corr-page { background-color: #fffaf0; box-shadow: inset 7px 0 0 #c99a2e, inset 0 -6px 0 #c99a2e, inset 0 6px 0 #c99a2e, inset -2px 0 0 #c99a2e; }
@media (max-width: 520px) { .cd.band, .cd.silk, .cd.tassel, .cd.clasp { display: none; } .corr-cover .corr-lab-w { grid-column: 2; } }
@media (prefers-reduced-motion: reduce) { .cd.stars i, .cd.glint, .lab-star .corr-lab-w::after { animation: none; } }
@media (max-width: 520px) { .cd.stk, .cd.medal, .cd.wax { left: auto; right: 12px; } }
:root:root #level-banner .corr-page { margin: 0; align-self: stretch; }

/* ══ BOUTIQUE = LA PAPETERIE DE LIBERO (+ tableau de liege) ═════════════════
   Auvent raye en haut, rayons en pastilles, « A la une » et « Du jour » (ce qui
   change) punaises sur un tableau de liege, les autres rayons poses sur des
   etageres en bois avec leur etiquette de prix, la fiche d'un article = le comptoir. */
#screen-shop { --wall: #f3e9cf; --wood: linear-gradient(#b07a45, #8a5a2b); --wood-line: #5a3a1a; }
html:not(.light) #screen-shop { --wall: #2c2620; }
:root:root #screen-shop .shop-fortnite { background: var(--wall); }
/* L'auvent et l'enseigne */
:root:root #screen-shop .shop-fn-header {
  position: relative; padding: 10px 16px 22px; border: none; box-shadow: none;
  background: repeating-linear-gradient(90deg, #d23a4f 0 34px, #fffdf3 34px 68px);
  clip-path: polygon(0 0,100% 0,100% calc(100% - 12px),97% 100%,94% calc(100% - 12px),91% 100%,88% calc(100% - 12px),85% 100%,82% calc(100% - 12px),79% 100%,76% calc(100% - 12px),73% 100%,70% calc(100% - 12px),67% 100%,64% calc(100% - 12px),61% 100%,58% calc(100% - 12px),55% 100%,52% calc(100% - 12px),49% 100%,46% calc(100% - 12px),43% 100%,40% calc(100% - 12px),37% 100%,34% calc(100% - 12px),31% 100%,28% calc(100% - 12px),25% 100%,22% calc(100% - 12px),19% 100%,16% calc(100% - 12px),13% 100%,10% calc(100% - 12px),7% 100%,4% calc(100% - 12px),0 100%);
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.18));
}
:root:root #screen-shop .shop-fn-title {
  background: #fffdf3; color: #22252b; border: 2px solid #22252b; border-radius: 4px; padding: 2px 14px;
  font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; box-shadow: 2px 3px 0 rgba(0,0,0,.2);
}
:root:root #screen-shop .shop-fn-title .ui-ic, :root:root #screen-shop .shop-fn-title [data-ic] { display: none; }
:root:root #screen-shop .shop-fn-balance { background: #fffdf3; border: 2px solid #22252b; border-radius: 4px; transform: rotate(1.5deg); box-shadow: 2px 3px 0 rgba(0,0,0,.2); }
:root:root #screen-shop .shop-fn-balance-label { color: #5e6470; font-family: var(--font-hand); font-weight: 700; font-size: 1rem; }
:root:root #screen-shop .shop-fn-balance-amount { color: #173a8a; font-family: var(--font-hand); font-weight: 700; font-size: 1.25rem; }
/* Les rayons : des pastilles en haut, plus de colonne */
:root:root #screen-shop .shop-fn-body { flex-direction: column; }
:root:root #screen-shop .shop-fn-nav {
  flex-direction: row; flex-wrap: wrap; width: auto; min-width: 0; gap: 6px; padding: 10px 16px 4px;
  background: transparent; border: none; overflow: visible;
}
:root:root #screen-shop .shop-fn-nav-btn {
  width: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px;
  border: 2px solid #22252b; border-radius: 999px; background: #fffdf3; color: #22252b; font: 700 .8rem var(--font-body); box-shadow: none;
}
:root:root #screen-shop .shop-fn-nav-btn .shop-nav-icon { width: 15px; height: 15px; }
:root:root #screen-shop .shop-fn-nav-btn:hover { background: #fff27a; }
:root:root #screen-shop .shop-fn-nav-btn.active { background: #22252b; color: #fffdf3; box-shadow: none; }
@media (max-width: 700px) {
  :root:root #screen-shop .shop-fn-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; }
  :root:root #screen-shop .shop-fn-nav-btn .shop-nav-label { display: inline; }
}
:root:root #screen-shop .shop-fn-content { padding: 14px 16px 60px; }
:root:root #screen-shop .shop-fn-section-title { border: none; font-size: 1.15rem; color: var(--text); }
html.light #screen-shop .shop-fn-section-title { color: #22252b; }

/* ── Les etageres (tous les rayons sauf A la une / Du jour) ── */
:root:root #screen-shop .shop-fn-grid, :root:root #screen-shop .shop-fn-featured { gap: 34px 18px; padding: 8px 6px 0; }
:root:root #screen-shop .shop-tile, :root:root #screen-shop .shop-tile[class*="rarity-"] {
  position: relative; background: transparent; border: none; border-radius: 0; box-shadow: none; overflow: visible; padding-bottom: 20px;
}
:root:root #screen-shop .shop-tile::after {
  content: ""; position: absolute; left: -12px; right: -12px; bottom: 0; height: 13px; z-index: 0;
  background: var(--wood); border-top: 2px solid var(--wood-line); border-bottom: 2px solid var(--wood-line); box-shadow: 0 5px 0 rgba(0,0,0,.18);
}
:root:root #screen-shop .shop-tile-img {
  position: relative; z-index: 1; background: #fff; border: 2px solid #22252b; border-radius: 6px; overflow: hidden;
  box-shadow: 3px 3px 0 rgba(0,0,0,.18); transition: transform .2s var(--ease, ease);
}
:root:root #screen-shop .shop-tile:hover { transform: none; box-shadow: none; }
:root:root #screen-shop .shop-tile:hover .shop-tile-img { transform: translateY(-6px) rotate(-2deg); }
:root:root #screen-shop .shop-tile-footer { position: relative; z-index: 1; border: none; background: transparent; padding: 6px 2px 4px; display: block; text-align: center; }
:root:root #screen-shop .shop-tile-name { display: block; font-size: .8rem; color: var(--text); }
html.light #screen-shop .shop-tile-name { color: #22252b; }
/* L'etiquette de prix attachee par une ficelle */
:root:root #screen-shop .shop-tile-price {
  position: absolute; z-index: 2; top: 10px; right: -8px; background: #fffdf3; border: 1.5px solid #22252b; padding: 0 6px;
  font: 700 1.1rem/1.3 var(--font-hand); color: #c0262f; transform: rotate(8deg); box-shadow: 1px 2px 0 rgba(0,0,0,.2); white-space: nowrap;
}
:root:root #screen-shop .shop-tile-price::before { content: ""; position: absolute; left: -14px; top: 7px; width: 14px; height: 1.5px; background: #22252b; }
:root:root #screen-shop .shop-tile-price .bolt { color: #c0262f; }
:root:root #screen-shop .shop-tile-footer .shop-tile-price { position: absolute; top: auto; bottom: calc(100% + 0px); }
:root:root #screen-shop .shop-tile-badge { position: absolute; z-index: 2; top: 6px; left: 6px; font-size: .58rem; }
:root:root #screen-shop .shop-tile-owned { z-index: 2; }

/* ── Le tableau de liege : A la une et Du jour (ce qui change chaque jour) ── */
:root:root #screen-shop :is(#shop-sec-featured, #shop-sec-daily) {
  background: #c99a5b; border: 10px solid #8a5a2b; border-radius: 8px; padding: 18px 14px 16px; box-shadow: 0 5px 0 rgba(0,0,0,.2);
  background-image: radial-gradient(rgba(90,50,10,.25) 1.2px, transparent 1.5px), radial-gradient(rgba(255,230,180,.2) 1px, transparent 1.5px);
  background-size: 7px 7px, 11px 11px;
}
:root:root #screen-shop :is(#shop-sec-featured, #shop-sec-daily) .shop-fn-section-title {
  align-self: flex-start; background: #fffdf3; border: 2px solid #22252b; padding: 1px 12px; margin-top: -32px; transform: rotate(-2deg);
  font: 700 1.35rem var(--font-hand); color: #22252b; box-shadow: 2px 3px 0 rgba(0,0,0,.2);
}
:root:root #screen-shop :is(#shop-sec-featured, #shop-sec-daily) .shop-fn-section-desc { color: #3a2a14; font-weight: 600; }
:root:root #screen-shop :is(#shop-sec-featured, #shop-sec-daily) .shop-tile {
  --r: -2deg; background: var(--nb, #fffdf3); border: 1.5px solid rgba(0,0,0,.25); padding: 14px 10px 8px; transform: rotate(var(--r));
  box-shadow: 2px 4px 0 rgba(0,0,0,.25); transition: transform .2s;
}
:root:root #screen-shop :is(#shop-sec-featured, #shop-sec-daily) .shop-tile:nth-child(4n+2) { --r: 2deg; --nb: #ffd0d8; }
:root:root #screen-shop :is(#shop-sec-featured, #shop-sec-daily) .shop-tile:nth-child(4n+3) { --r: -1deg; --nb: #bfe3ff; }
:root:root #screen-shop :is(#shop-sec-featured, #shop-sec-daily) .shop-tile:nth-child(4n+4) { --r: 1.5deg; --nb: #c9efc9; }
:root:root #screen-shop #shop-sec-featured .shop-tile:first-child { --nb: #fff27a; }
:root:root #screen-shop :is(#shop-sec-featured, #shop-sec-daily) .shop-tile:hover { transform: rotate(0) scale(1.03); z-index: 3; }
:root:root #screen-shop :is(#shop-sec-featured, #shop-sec-daily) .shop-tile:hover .shop-tile-img { transform: none; }
/* La punaise a la place de l'etagere */
:root:root #screen-shop :is(#shop-sec-featured, #shop-sec-daily) .shop-tile::after {
  left: 50%; right: auto; top: -8px; bottom: auto; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, var(--pc, #d23a4f) 45%, #5c0712); border: 1.5px solid #22252b; box-shadow: none;
}
:root:root #screen-shop :is(#shop-sec-featured, #shop-sec-daily) .shop-tile:nth-child(3n+2)::after { --pc: #2f8a55; }
:root:root #screen-shop :is(#shop-sec-featured, #shop-sec-daily) .shop-tile:nth-child(3n+3)::after { --pc: #3d64b8; }
:root:root #screen-shop :is(#shop-sec-featured, #shop-sec-daily) .shop-tile-img { box-shadow: none; border-width: 1.5px; border-radius: 2px; }
:root:root #screen-shop :is(#shop-sec-featured, #shop-sec-daily) .shop-tile-name { font: 700 1.15rem/1.1 var(--font-hand); color: #22252b; }
/* Le prix : des languettes a arracher en bas de l'annonce */
:root:root #screen-shop :is(#shop-sec-featured, #shop-sec-daily) .shop-tile-footer .shop-tile-price {
  position: static; display: block; transform: none; border: none; border-top: 1.5px dashed rgba(0,0,0,.35); background: transparent; box-shadow: none;
  margin: 6px -10px -8px; padding: 2px 0; background-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1.5px), rgba(0,0,0,.3) calc(25% - 1.5px) 25%);
}
:root:root #screen-shop :is(#shop-sec-featured, #shop-sec-daily) .shop-tile-price::before { content: none; }
/* L'offre flash : la grande affiche jaune du tableau */
:root:root #screen-shop .shop-flash:not(.hidden) {
  margin: 12px 16px 0; background: #fff27a; border: 1.5px solid rgba(0,0,0,.3); border-radius: 0; transform: rotate(-.8deg);
  box-shadow: 3px 5px 0 rgba(0,0,0,.25); color: #22252b; position: relative;
}
:root:root #screen-shop .shop-flash:not(.hidden)::before {
  content: ""; position: absolute; left: 50%; top: -8px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #d23a4f 45%, #5c0712); border: 1.5px solid #22252b;
}

/* ── La fiche d'un article = le comptoir ── */
:root:root #screen-shop .shop-fn-detail, html.light #screen-shop .shop-fn-detail { background: var(--wall); background-image: none; }
:root:root #screen-shop .shop-fn-detail > :not(.shop-fn-detail-back) {
  max-width: 560px; margin-left: auto; margin-right: auto; background-color: #fffdf3; color: #22252b;
  border-left: 2px solid #22252b; border-right: 2px solid #22252b;
}
:root:root #screen-shop .shop-fn-detail-preview { margin-top: 18px; border-top: 2px solid #22252b !important; border-radius: 8px 8px 0 0; background: #fff !important; position: relative; }
:root:root #screen-shop .shop-fn-detail-preview::before {
  content: "Au comptoir"; position: absolute; top: -15px; left: 14px; background: #fffdf3; border: 2px solid #22252b; padding: 0 10px;
  font: 700 1.15rem var(--font-hand); transform: rotate(-2deg); color: #22252b;
}
:root:root[lang="en"] #screen-shop .shop-fn-detail-preview::before { content: "At the counter"; }
:root:root #screen-shop .shop-fn-detail > :last-child { border-bottom: 14px solid #8a5a2b; border-radius: 0 0 6px 6px; padding-bottom: 16px; box-shadow: 0 5px 0 rgba(0,0,0,.2); }
:root:root #screen-shop .shop-fn-detail :is(.shop-fn-detail-name, .shop-fn-detail-price) { color: #22252b; }
:root:root #screen-shop .shop-fn-detail-back { background: transparent; border: none; color: var(--text); }
html.light #screen-shop .shop-fn-detail-back { color: #173a8a; }
:root:root #screen-shop .shop-fn-detail > :not(.shop-fn-detail-back) { width: min(560px, calc(100% - 24px)); box-sizing: border-box; align-self: center; }
:root:root #screen-shop { background: var(--wall); }
:root:root #screen-shop .shop-tile::after { box-shadow: none; border-bottom-width: 4px; }
@media (min-width: 900px) { :root:root #screen-shop :is(#shop-sec-featured, #shop-sec-daily) :is(.shop-fn-featured, .shop-fn-grid) { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }

/* ══ Hauts faits = CAHIER DE TAMPONS ════════════════════════════════════════ */
.stamp-page {
  background: #fffef6; border: 2px solid #22252b; border-radius: 4px; padding: 12px 12px 14px 42px; color: #22252b;
  background-image: linear-gradient(90deg, transparent 28px, #e2485d 28px 29.5px, transparent 29.5px), repeating-linear-gradient(0deg, transparent 0 25px, rgba(80,130,205,.35) 25px 26px);
}
.stamp-head { margin: 0 0 8px; font: 700 1.6rem/1 var(--font-hand); color: #173a8a; }
.stamp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px 8px; }
.stamp-grid-sm { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
.stamp-cell { height: 92px; display: grid; place-items: center; text-align: center; position: relative; }
.stamp-grid-sm .stamp-cell { height: 70px; }
.stamp-ink {
  width: 82px; height: 82px; border-radius: 50%; border: 3px solid var(--c); color: var(--c); display: grid; place-items: center;
  position: relative; transform: rotate(var(--r)); opacity: .92; mix-blend-mode: multiply;
  -webkit-mask: radial-gradient(circle at 30% 70%, #000 60%, rgba(0,0,0,.72) 100%); mask: radial-gradient(circle at 30% 70%, #000 60%, rgba(0,0,0,.72) 100%);
}
.stamp-grid-sm .stamp-ink { width: 62px; height: 62px; }
.stamp-ink::before { content: ""; position: absolute; inset: 4px; border: 1.5px solid var(--c); border-radius: 50%; }
.stamp-ink svg { width: 40%; height: 40%; margin-top: -14px; }
.stamp-ink small { position: absolute; bottom: 12px; left: 8px; right: 8px; font: 400 .48rem/1.05 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.stamp-grid-sm .stamp-ink small { font-size: .38rem; bottom: 9px; }
.stamp-cell.off { border: 1.5px dashed #9aa3ad; border-radius: 8px; padding: 4px; }
.stamp-cell.off small { font: 700 1.02rem/1.05 var(--font-hand); color: #8a929c; }
.stamp-honor { display: inline-block; margin: 0 0 10px; border: 3px double #b8860b; color: #b8860b; padding: 2px 10px; font: 400 .8rem var(--font-display); transform: rotate(-3deg); text-transform: uppercase; }
/* Le coup de tampon : il tombe de haut, ecrase le papier, l'encre se pose */
.stamp-new .stamp-ink { animation: stampThud .55s cubic-bezier(.3,1.6,.5,1) both; animation-delay: inherit; }
.stamp-new { animation: stampShake .3s ease-out both; animation-delay: inherit; }
@keyframes stampThud { 0% { transform: translateY(-40px) scale(2.2) rotate(var(--r)); opacity: 0; } 55% { transform: scale(.88) rotate(var(--r)); opacity: 1; } 100% { transform: scale(1) rotate(var(--r)); opacity: .92; } }
@keyframes stampShake { 0%, 100% { transform: none; } 60% { transform: translateY(2px); } }
html:not(.light) .stamp-ink { mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) { .stamp-new .stamp-ink, .stamp-new { animation: none; } }
:root:root #sec-badges .profile-badges-wrap { grid-column: 1 / -1; width: 100%; max-width: 760px; margin: 0 auto; background: none; border: none; box-shadow: none; padding: 0; }
:root:root #sec-badges .profile-badges-title { display: none; }
:root:root #profile-badges.badge-grid { display: block; }

/* ══ IDEES = LE TABLEAU DE LA CLASSE ═════════════════════════════════════════
   Tableau noir a cadre bois ; chaque idee est un post-it scotche de travers ;
   votes pour = gommettes vertes, contre = rouges ; statut = tampon dans le coin. */
:root:root #screen-ideas .ideas-wrap {
  max-width: 1100px; margin: 12px auto 80px; padding: 20px 18px 26px; border: 12px solid #a0703f; border-radius: 10px;
  background: #2f4a3e radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 5px 5px; color: #eef1ea;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), 0 8px 0 rgba(0,0,0,.25);
}
:root:root #screen-ideas .ideas-h1 { color: #fff; font: 700 2.2rem/1 var(--font-hand); text-decoration: underline; text-decoration-color: #ffe169; text-decoration-thickness: 3px; text-underline-offset: 6px; }
:root:root #screen-ideas .ideas-sub { color: #b8c6bd; font: 700 1.2rem var(--font-hand); }
:root:root #screen-ideas .ideas-sort { background: transparent; border: none; gap: 6px; }
:root:root #screen-ideas .ideas-sort-btn { background: transparent; color: #eef1ea; border: 2px solid #eef1ea; border-radius: 999px; padding: 3px 12px; font: 700 .82rem var(--font-body); }
:root:root #screen-ideas .ideas-sort-btn.active { background: #ffe169; color: #22252b; border-color: #ffe169; }
:root:root #screen-ideas .ideas-new-btn { background: #ffe169; color: #22252b; border: 2px solid #1b2a23; box-shadow: 0 3px 0 #1b2a23; }
:root:root #screen-ideas .ideas-search { background: rgba(0,0,0,.18); color: #fff; border: 2px dashed rgba(238,241,234,.6); border-radius: 6px; }
:root:root #screen-ideas .ideas-search::placeholder { color: rgba(238,241,234,.5); }
:root:root #screen-ideas .ideas-status, :root:root #screen-ideas .videocomments-empty { color: #eef1ea; }
:root:root #screen-ideas .ideas-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 26px 18px; padding-top: 14px; }
:root:root #screen-ideas .idea-card {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 180px; padding: 18px 12px 10px;
  background: var(--pi); color: #22252b; border: none; border-radius: 0; transform: rotate(var(--r)); box-shadow: 3px 5px 0 rgba(0,0,0,.35);
  transition: transform .2s;
}
:root:root #screen-ideas .idea-card:hover { transform: rotate(0) scale(1.02); z-index: 2; }
:root:root #screen-ideas .idea-card::before { content: ""; position: absolute; top: -8px; left: 50%; width: 62px; height: 16px; margin-left: -31px; background: rgba(255,248,200,.72); transform: rotate(-3deg); box-shadow: 0 1px 0 rgba(0,0,0,.1); }
:root:root #screen-ideas .idea-title { margin: 0; padding-right: 64px; font: 700 1.4rem/1.05 var(--font-hand); color: #22252b; }
:root:root #screen-ideas .idea-desc { margin: 2px 0; font-size: .84rem; color: #3a3d44; flex: 1; }
:root:root #screen-ideas .idea-meta { margin: 0; font-size: .74rem; color: #5e6470; }
:root:root #screen-ideas .idea-del { background: none; border: none; color: #c0262f; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }
:root:root #screen-ideas .idea-reply { margin: 2px 0; font: 700 1.1rem/1.15 var(--font-hand); color: #c0262f; background: none; border: none; padding: 0; }
:root:root #screen-ideas .idea-reply b { font: 600 .72rem var(--font-body); color: #5e6470; }
.idea-pin-lbl { font: 400 .6rem var(--font-display); color: #c26a00; letter-spacing: .05em; text-transform: uppercase; }
/* Le statut : un tampon */
:root:root #screen-ideas .idea-badge {
  position: absolute; right: 8px; top: 10px; background: rgba(255,255,255,.6); border: 2.5px solid var(--sc); color: var(--sc); border-radius: 4px;
  padding: 0 6px; font: 400 .58rem/1.5 var(--font-display); letter-spacing: .05em; text-transform: uppercase; transform: rotate(-6deg);
}
.idea-st-open { --sc: #5e6470; } .idea-st-planned { --sc: #173a8a; } .idea-st-done { --sc: #2f8a55; } .idea-st-rejected { --sc: #d23a4f; }
/* Les votes : gommettes + deux boutons ronds */
:root:root #screen-ideas .idea-votes { display: flex; align-items: center; gap: 5px; flex-direction: row; border-top: 1.5px dashed rgba(0,0,0,.3); padding-top: 6px; margin-top: 4px; background: none; }
.idea-dots { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.idea-dots i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #22252b; background: #2f8a55; }
.idea-dots i.r { background: #d23a4f; }
:root:root #screen-ideas .idea-score { font: 700 1.15rem var(--font-hand); color: #22252b; min-width: 0; }
:root:root #screen-ideas .idea-vote { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #22252b; background: #fff; color: #22252b; font: 700 .85rem var(--font-body); display: grid; place-items: center; padding: 0; box-shadow: none; }
:root:root #screen-ideas .idea-vote.up.on { background: #2f8a55; color: #fff; }
:root:root #screen-ideas .idea-vote.down.on { background: #d23a4f; color: #fff; }
@media (max-width: 520px) { :root:root #screen-ideas .ideas-wrap { border-width: 8px; padding: 14px 10px 20px; margin: 6px 6px 80px; } }
:root:root #screen-ideas .idea-vote { flex: none; min-width: 30px; max-width: 30px; }
:root:root #screen-ideas .idea-score { display: inline-block; flex: none; }
:root:root #screen-ideas .idea-dots { flex: 1 1 auto; min-width: 0; }
:root:root #screen-ideas .idea-votes { align-self: stretch; width: 100%; justify-content: flex-end; }
.idea-dots i { flex: none; }

/* ══ LECTURE = L'ETAGERE DU CDI ═════════════════════════════════════════════
   Meuble en bois veine, fond sombre ; livres ranges par le dos (reliure toilee
   arrondie, titre et filets dores, etiquette de cote) ; plaque de laiton par planche. */
:root:root #read-grid { display: block; padding: 14px 4px 30px; }
#read-grid .case { position: relative; max-width: 860px; margin: 14px auto 0; padding: 14px 18px 0; border-radius: 6px 6px 0 0; border: 2px solid #3a240f;
  background: linear-gradient(90deg, #5b3a1e 0 18px, transparent 18px calc(100% - 18px), #5b3a1e calc(100% - 18px)), repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 9px), linear-gradient(#7a5230, #6b4527);
  box-shadow: 0 10px 18px rgba(0,0,0,.25); }
#read-grid .case::before { content: ""; position: absolute; left: -6px; right: -6px; top: -12px; height: 16px; border-radius: 4px; background: linear-gradient(#a8743f, #8a5a2b); border: 2px solid #3a240f; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
#read-grid .bay { position: relative; min-height: 250px; margin: 0 2px; display: flex; align-items: flex-end; gap: 2px; padding: 16px 10px 0; overflow-x: auto; overflow-y: visible; scrollbar-width: none;
  background: linear-gradient(#2c1a0b 0, #3b2513 14%, #4a2f17 100%); box-shadow: inset 0 18px 22px rgba(0,0,0,.55), inset 14px 0 18px rgba(0,0,0,.4), inset -14px 0 18px rgba(0,0,0,.4); }
#read-grid .bay-soon { min-height: 150px; opacity: .85; }
#read-grid .soon { margin: auto; font: 700 1.3rem var(--font-hand); color: rgba(255,240,200,.7); text-align: center; }
#read-grid .plank { position: relative; height: 22px; margin: 0 -16px; background: linear-gradient(#b98450, #9a6a3a 45%, #7d5128); border: 2px solid #3a240f; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
#read-grid .brass { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); white-space: nowrap; background: linear-gradient(#f6dc8a, #c99a2e 50%, #e9c25a); border: 1.5px solid #4a3305; border-radius: 2px; padding: 0 12px; font: 400 .58rem/14px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: #3a2600; box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); }
#read-grid .brass::before, #read-grid .brass::after { content: ""; position: absolute; top: 5px; width: 4px; height: 4px; border-radius: 50%; background: #7a5508; }
#read-grid .brass::before { left: 3px; } #read-grid .brass::after { right: 3px; }
#read-grid .sp { position: relative; flex: none; width: var(--w, 44px); height: var(--h); border-radius: 3px 3px 1px 1px; cursor: pointer; border: none; padding: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.45) 0, rgba(0,0,0,.05) 18%, rgba(255,255,255,.22) 38%, rgba(255,255,255,.05) 55%, rgba(0,0,0,.35) 100%), var(--c);
  box-shadow: 2px 0 2px rgba(0,0,0,.45); transition: transform .35s cubic-bezier(.3,1.3,.5,1), box-shadow .35s; transform-origin: bottom center; }
#read-grid .sp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); pointer-events: none; }
#read-grid .sp .bd { position: absolute; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #7a5508, #f6dc8a 45%, #c99a2e); opacity: .9; }
#read-grid .sp .bd.t { top: 12px; } #read-grid .sp .bd.t2 { top: 20px; height: 2px; } #read-grid .sp .bd.b { bottom: 30px; }
#read-grid .sp .tt { position: absolute; left: 50%; top: 32px; bottom: 42px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center; overflow: hidden;
  font: 400 .64rem/1 var(--font-display); letter-spacing: .05em; white-space: nowrap; background: linear-gradient(180deg, #fff2b0, #d4a62c 50%, #f6dc8a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
#read-grid .sp .cote { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 30px; background: #fffdf3; border-radius: 2px; font: 700 .5rem/1.15 var(--font-body); color: #22252b; text-align: center; padding: 2px 0; box-shadow: 0 1px 0 rgba(0,0,0,.4); }
#read-grid .sp.deco { cursor: default; filter: saturate(.7) brightness(.9); }
#read-grid .sp:not(.deco):hover { transform: translateY(-6px); }
#read-grid .sp.sel { transform: translateY(-16px) scale(1.06); box-shadow: 6px 10px 14px rgba(0,0,0,.55); z-index: 3; outline: 2px solid #ffe169; outline-offset: 2px; }
#read-grid .sp:focus-visible { outline: 3px solid #ffe169; outline-offset: 2px; }
#read-grid .bookend { flex: none; width: 12px; height: 120px; margin-left: 6px; background: linear-gradient(90deg, #4b525a, #c9ced6 40%, #7a828c); border-radius: 2px 2px 0 0; box-shadow: 2px 0 3px rgba(0,0,0,.5); position: relative; }
#read-grid .bookend::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 6px; background: linear-gradient(#c9ced6, #7a828c); }
#read-grid .stack { flex: none; display: flex; flex-direction: column-reverse; margin-left: auto; margin-right: 6px; }
#read-grid .stack i { display: block; width: var(--w); height: 16px; background: linear-gradient(rgba(255,255,255,.2), rgba(0,0,0,.3)), var(--c); border-radius: 2px; margin-left: var(--x, 0); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
@media (max-width: 520px) { #read-grid .stack { display: none; } #read-grid .case { padding: 12px 12px 0; } #read-grid .plank { margin: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { #read-grid .sp { transition: none; } }

/* ══ BOUTON RETOUR = LA FLECHE AU CRAYON ══════════════════════════════════════
   Une fleche tracee a la main avant le mot « Retour » ecrit a l'encre ; au survol,
   la fleche recule et le mot est surligne. Tous les boutons retour du site. */
:root:root :is(.btn-back, .shop-fn-detail-back, .locker-back-cats) {
  display: inline-flex; align-items: center; gap: 6px; width: auto; background: none !important; border: none !important; box-shadow: none !important;
  padding: 4px 6px; font: 700 1.4rem/1 var(--font-hand); color: var(--accent); cursor: pointer;
}
:root:root :is(.btn-back, .shop-fn-detail-back, .locker-back-cats) [data-ic="back"] { display: none; }
:root:root :is(.btn-back, .shop-fn-detail-back, .locker-back-cats)::before {
  content: ""; flex: none; width: 40px; height: 22px; background: currentColor; transition: transform .25s var(--ease, ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 24'%3E%3Cpath d='M42 13q-14-3-34-1' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M13 4l-9 8 10 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 24'%3E%3Cpath d='M42 13q-14-3-34-1' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M13 4l-9 8 10 7' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root:root :is(.btn-back, .shop-fn-detail-back, .locker-back-cats):hover::before { transform: translateX(-5px); }
:root:root :is(.btn-back, .shop-fn-detail-back, .locker-back-cats):hover { background: none; text-decoration: none; }
:root:root :is(.btn-back, .shop-fn-detail-back, .locker-back-cats):hover { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: .35em; text-underline-offset: -.15em; text-decoration-skip-ink: none; }
html.light :is(.btn-back, .shop-fn-detail-back, .locker-back-cats) { color: #173a8a; }

/* ══ LE MOT = GRILLE DE MOTS CROISES dans un cahier a petits carreaux ════════ */
:root:root #screen-wordle { background-color: #fdfdf9; background-image: linear-gradient(rgba(80,130,205,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(80,130,205,.25) 1px, transparent 1px); background-size: 14px 14px; }
html:not(.light) #screen-wordle { background-color: #f3efe2; }
:root:root #screen-wordle :is(.wordle-h1) { font: 700 2.3rem/1 var(--font-hand); color: #173a8a; }
:root:root #screen-wordle .wordle-sub { color: #5e6470; }
:root:root #screen-wordle .btn-back { color: #173a8a; }
:root:root #screen-wordle .wordle-streak { font: 700 1.3rem var(--font-hand); color: #c0262f; }
:root:root .wordle-board { display: grid; gap: 3px; background: #22252b; padding: 3px; box-shadow: 4px 5px 0 rgba(0,0,0,.18); width: max-content; margin-inline: auto; }
:root:root .wordle-row { gap: 3px; }
:root:root .wordle-cell {
  position: relative; background: #fff; border: none; border-radius: 0; box-shadow: none; color: #173a8a;
  font: 700 2rem/1 var(--font-hand); text-transform: uppercase;
}
.wordle-cell::before { content: attr(data-n); position: absolute; left: 3px; top: 1px; font: 700 .5rem var(--font-body); color: #9aa3ad; }
:root:root .wordle-cell.filled { background: #fff; color: #173a8a; border: none; }
:root:root .wordle-cell.wordle-correct { background: #c9efc9; color: #173a8a; }
:root:root .wordle-cell.wordle-correct::after { content: "✓"; position: absolute; right: 3px; bottom: 0; font: 700 1rem var(--font-hand); color: #2f8a55; }
:root:root .wordle-cell.wordle-present { background: #fff27a; color: #173a8a; }
:root:root .wordle-cell.wordle-absent { background: #eceef2; color: #9aa3ad; }
:root:root .wordle-key {
  background: #fff; border: 1.5px solid #22252b; border-radius: 3px; color: #22252b; font: 700 1.25rem var(--font-hand);
  box-shadow: 1px 2px 0 rgba(0,0,0,.15);
}
:root:root .wordle-key.wordle-correct { background: #c9efc9; color: #22252b; border-color: #22252b; }
:root:root .wordle-key.wordle-present { background: #fff27a; color: #22252b; border-color: #22252b; }
:root:root .wordle-key.wordle-absent { background: #eceef2; color: #9aa3ad; border-color: #9aa3ad; }
:root:root .wordle-msg { font: 700 1.35rem var(--font-hand); color: #c0262f; }
:root:root .wordle-hint-btn { background: #fffdf3; border: 1.5px solid #22252b; color: #22252b; border-radius: 4px; transform: rotate(-1deg); box-shadow: 1px 2px 0 rgba(0,0,0,.15); }
:root:root .wordle-hint { font: 700 1.2rem var(--font-hand); color: #173a8a; background: #fff27a; border: none; padding: 4px 10px; transform: rotate(-1deg); }

/* ══ PREMIERE VISITE = CARNET A INTERCALAIRES ════════════════════════════════
   « Nouveau » (3 pages qu'on tourne) / « J'ai deja un carnet ». Hors du style ardoise
   des fenetres : c'est un carnet papier pose sur le voile. */
.onb-book { width: min(380px, calc(100vw - 28px)); color: #22252b; }
.onb-tabs { display: flex; gap: 3px; margin-left: 14px; }
.onb-tab { border: 2px solid #22252b; border-bottom: none; border-radius: 8px 8px 0 0; padding: 5px 11px; font: 700 .8rem var(--font-body); color: #22252b; background: var(--t, #fff27a); opacity: .6; cursor: pointer; }
#onb-tab-new { --t: #fff27a; } #onb-tab-old { --t: #bfe3ff; }
.onb-tab.on { opacity: 1; transform: translateY(2px); }
.onb-tab.nudge { animation: onbNudge 1.2s .6s ease-in-out 2; }
@keyframes onbNudge { 0%, 100% { transform: none; } 20% { transform: translateY(-5px) rotate(-3deg); } 40% { transform: translateY(0) rotate(2deg); } 60% { transform: translateY(-3px); } }
.onb-page {
  position: relative; display: grid; border: 2px solid #22252b; border-radius: 4px; padding: 16px 16px 18px 46px; min-height: 360px; box-shadow: 0 8px 0 rgba(0,0,0,.25);
  background: #fdfdf9; background-image: linear-gradient(90deg, transparent 32px, #e2485d 32px 33.5px, transparent 33.5px), repeating-linear-gradient(0deg, transparent 0 25px, rgba(80,130,205,.4) 25px 26px);
}
.onb-page.turn { animation: onbTurn .35s ease both; }
@keyframes onbTurn { from { transform: perspective(800px) rotateY(-14deg); opacity: .4; } }
.onb-p { display: grid; gap: 10px; align-content: start; }
.onb-p.hidden { display: none; }
.onb-steps { display: flex; gap: 4px; align-items: center; font: 700 1rem var(--font-hand); color: #5e6470; }
.onb-steps i { width: 24px; height: 6px; border-radius: 3px; background: #d8dbe0; }
.onb-steps i.on { background: #173a8a; }
.onb-steps span { margin-left: 6px; }
.onb-h { margin: 0; font: 700 1.95rem/1.02 var(--font-hand); color: #173a8a; text-decoration: none; letter-spacing: 0; }
.onb-q { font: 700 1.25rem/1.1 var(--font-hand); color: #c0262f; }
.onb-n { margin: 0; font: 700 1.05rem/1.15 var(--font-hand); color: #5e6470; }
:root:root .onb-ln { width: 100%; border: none !important; border-bottom: 1.5px dashed #22252b !important; border-radius: 0; background: transparent !important; font: 700 1.35rem var(--font-hand); padding: 2px; color: #22252b !important; box-shadow: none !important; }
:root:root .onb-ln:focus { outline: none; border-bottom-style: solid !important; background: linear-gradient(transparent 60%, rgba(255,242,122,.6) 60%) !important; }
.onb-ln::placeholder { color: #9aa3ad; }
.onb-cta { border: 2px solid #22252b; border-radius: 7px; background: #ffe169; padding: 10px 12px; font: 700 .95rem var(--font-body); box-shadow: 0 3px 0 #22252b; color: #22252b; cursor: pointer; }
.onb-cta:disabled { opacity: .55; }
.onb-lnk { background: none; border: none; padding: 0; font: 700 .85rem var(--font-body); color: #173a8a; text-decoration: underline; text-align: left; cursor: pointer; justify-self: start; }
/* « Deja un carnet ? Ouvre-le ici » : ecrit a la main, fleche au crayon vers l'onglet bleu */
.onb-have { position: relative; justify-self: start; margin-top: 4px; background: none; border: none; padding: 0 0 0 4px; font: 700 1.25rem var(--font-hand); color: #173a8a; cursor: pointer; }
.onb-have span { background: linear-gradient(transparent 60%, #bfe3ff 60%); }
.onb-have::after {
  content: ""; position: absolute; right: -54px; top: -46px; width: 50px; height: 52px; background: #173a8a; transform: rotate(-12deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 52'%3E%3Cpath d='M4 48q30-4 36-40' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M30 12l10-8 6 12' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 52'%3E%3Cpath d='M4 48q30-4 36-40' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M30 12l10-8 6 12' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Cahier / ardoise : deux vignettes */
#overlay-onboard .onboard-theme-row { display: flex; gap: 10px; }
:root:root #overlay-onboard .onboard-theme-btn { flex: 1; display: grid; justify-items: center; gap: 6px; padding: 8px; border: 2px solid #22252b; border-radius: 7px; background: #fff; color: #22252b; font: 700 .9rem var(--font-body); box-shadow: 0 2px 0 #22252b; cursor: pointer; }
#overlay-onboard .onboard-theme-btn::before { content: ""; width: 100%; height: 40px; border: 1.5px solid #22252b; }
#onboard-theme-day::before { background: #fdfdf9 repeating-linear-gradient(0deg, transparent 0 7px, rgba(80,130,205,.5) 7px 8px); }
#onboard-theme-night::before { background: #2f4a3e; }
:root:root #overlay-onboard .onboard-theme-btn.onboard-theme-active { outline: 3px solid #ffe169; outline-offset: 1px; background: #fff8c8; }
.onb-hint { margin: 10px 0 0; min-height: 1.2em; font: 700 1.15rem var(--font-hand); color: #5e6470; }
.onb-hint.recovery-err { color: #c0262f; } .onb-hint.recovery-ok { color: #2f8a55; }
@media (prefers-reduced-motion: reduce) { .onb-page.turn, .onb-tab.nudge { animation: none; } }
/* L'invitation se place en haut a droite de la page 1, sa fleche monte vers l'onglet bleu. */
.onb-p[data-p="1"] { position: static; }
.onb-have { position: absolute; top: 6px; right: 12px; margin: 0; max-width: 58%; text-align: right; font-size: 1.1rem; line-height: 1.05; }
.onb-have::after { right: auto; left: -40px; top: -30px; width: 40px; height: 40px; transform: scaleX(-1) rotate(-10deg); }
.onb-p[data-p="1"] .onb-steps { margin-top: 30px; }
/* Fiche d'un joueur : les tampons en petite rangee compacte, encre eclaircie pour l'ardoise. */
:root:root #playercard-badges.badge-grid { display: block; }
#playercard-badges .stamp-grid-sm { display: flex; flex-wrap: wrap; gap: 4px 2px; }
#playercard-badges .stamp-cell { width: 44px; height: 44px; }
#playercard-badges .stamp-ink { width: 40px; height: 40px; border-width: 2px; mix-blend-mode: normal; --c2: color-mix(in srgb, var(--c) 40%, #fff); border-color: var(--c2); color: var(--c2); }
#playercard-badges .stamp-ink::before { inset: 3px; border-color: var(--c2); }
#playercard-badges .stamp-ink svg { width: 52%; height: 52%; margin: 0; }
#playercard-badges .stamp-ink small { display: none; }
#playercard-badges .stamp-honor { margin: 0 6px 4px 0; padding: 0 6px; font-size: .62rem; border-color: #ffe169; color: #ffe169; }

/* ══ Lancer une partie : « Avec qui ? » d'abord (jeux classiques et quiz) ══
   Le choix ouvre seulement les reglages utiles ; cibles de 48 px, l'actif est
   entoure d'un trait epais en plus du surligne (pas que la couleur). */
.who-row { display: flex; gap: 8px; width: 100%; margin: 4px 0 10px; }
.who-row.who-col { flex-direction: column; }
:root:root .who-btn {
  flex: 1; min-height: 48px; padding: 10px 12px; cursor: pointer;
  background: transparent; color: var(--text); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font-body); font-weight: 700; font-size: .95rem; line-height: 1.2;
}
:root:root .who-btn:hover { background: var(--card2); }
:root:root .who-btn.active {
  border: 2.5px solid var(--accent); outline: 2px solid var(--accent); outline-offset: 1px;
  background: linear-gradient(transparent 55%, var(--mark) 55%);
}
.who-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.who-pane { display: none; width: 100%; }
.who-card[data-who="bot"]    .who-pane[data-for~="bot"],
.who-card[data-who="friend"] .who-pane[data-for~="friend"],
.who-card[data-who="code"]   .who-pane[data-for~="code"],
.who-card[data-who="solo"]   .who-pane[data-for~="solo"] { display: block; }
.who-card[data-who] .who-pane.trivia-action-row[data-for] { display: none; }
.who-card[data-who="solo"]   .who-pane.trivia-action-row[data-for~="solo"],
.who-card[data-who="friend"] .who-pane.trivia-action-row[data-for~="friend"] { display: flex; }
.who-pane .bot-row .bot-btn, .who-pane .stake-btn, .nb-row .nb-btn { min-height: 48px; }
.who-pane #btn-create, .who-pane #btn-challenge-friend { width: 100%; margin-top: 10px; }
.nb-row { display: flex; gap: 8px; width: 100%; }
.nb-row .nb-btn { flex: 1; }
.who-pane .join-group { margin-top: 4px; }
:root:root .nb-btn {
  background: transparent; color: var(--text); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font-body); font-weight: 700; font-size: 1rem; cursor: pointer;
}
:root:root .nb-btn:hover { background: var(--card2); }
:root:root .nb-btn.active { border: 2px solid var(--accent); background: linear-gradient(transparent 55%, var(--mark) 55%); }
:root:root .who-btn { display: flex; align-items: center; justify-content: center; text-align: center; }

/* Cases a cocher dessinees : la coche est posee en absolu au centre de SA case.
   Avant, l'icone inseree dans la case prenait la premiere cellule de la grille et
   la coche tombait dessous, donc dans la case de la ligne suivante. */
:root:root .onboard-step .ob-check, .spk { position: relative; }
:root:root .onboard-step .ob-check > *, .spk > * { display: none !important; }
:root:root .onboard-step.done .ob-check::after, .sp-ck.on .spk::after {
  position: absolute; left: 50%; top: 50%; margin: 0;
}
:root:root .onboard-step.done .ob-check::after { transform: translate(-45%, -60%) rotate(-6deg); }
.sp-ck.on .spk::after { transform: translate(-45%, -62%) rotate(-6deg); }

/* La fiche d'un article (comptoir) et la recharge couvrent la grille : elles
   doivent passer AU-DESSUS des articles, qui ont leur propre empilement. */
:root:root #screen-shop .shop-fn-detail { z-index: 30; isolation: isolate; }

/* ══ Boutons « quitter » refondus ═══════════════════════════════════════════
   A2 fermer une fenetre = croix tracee a la craie (couleur du texte de la fenetre,
   donc craie sur l'ardoise). B2 quitter une partie = « Abandonner » au feutre rouge.
   C2 salle d'attente = ticket a dechirer. D2 pause / fin = « Reprendre » seul bouton,
   le reste en liens ecrits. Cibles de 44 px minimum partout. */
:root:root :is(.help-close-btn, .profile-modal-close, .chatbot-close, .snake-vote-close) {
  position: relative; width: 44px; height: 44px; min-width: 44px; padding: 0;
  background: transparent !important; border: none !important; box-shadow: none !important;
  color: var(--text); font-size: 0; cursor: pointer;
}
:root:root :is(.help-close-btn, .profile-modal-close, .chatbot-close, .snake-vote-close) > * { display: none !important; }
:root:root :is(.help-close-btn, .profile-modal-close, .chatbot-close, .snake-vote-close)::before {
  content: ""; position: absolute; inset: 6px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 6.5l18.5 19.5M24.5 6 7.5 26' stroke='%23000' stroke-width='3.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 6.5l18.5 19.5M24.5 6 7.5 26' stroke='%23000' stroke-width='3.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .15s ease;
}
:root:root :is(.help-close-btn, .profile-modal-close, .chatbot-close, .snake-vote-close):hover::before { transform: rotate(8deg) scale(1.08); }
:root:root :is(.help-close-btn, .profile-modal-close, .chatbot-close, .snake-vote-close):focus-visible { outline: 3px solid var(--accent); outline-offset: 0; border-radius: 8px; }

:root:root .btn-quit.abandon-btn {
  min-height: 44px; padding: 0 8px; background: transparent; border: none; box-shadow: none;
  font-family: var(--font-hand); font-weight: 700; font-size: 1.35rem; color: var(--margin);
  background-image: linear-gradient(transparent 62%, color-mix(in srgb, var(--margin) 18%, transparent) 62%);
  background-clip: content-box;
}
:root:root .btn-quit.abandon-btn::before { content: "\2190"; margin-right: 4px; font-family: var(--font-body); font-size: 1rem; }
:root:root .btn-quit.abandon-btn:hover { background-color: transparent; text-decoration: underline wavy; }

:root:root :is(#screen-waiting, #screen-trivia-waiting) .code-display {
  background: #fff8d6; color: #22252b; border: 2px dashed #22252b; border-radius: 6px;
  transform: rotate(-1.5deg); box-shadow: 3px 4px 0 rgba(0,0,0,.12);
  -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
:root:root .btn.tear-btn {
  min-height: 44px; background: transparent; color: var(--muted); box-shadow: none;
  border: 1.5px dashed var(--line); font-weight: 700;
}
:root:root .btn.tear-btn:hover { color: var(--margin); border-color: var(--margin); background: transparent; }

:root:root .quit-link {
  display: block; margin: 2px auto 0; min-height: 44px; padding: 0 12px;
  background: none; border: none; box-shadow: none; cursor: pointer;
  font-family: var(--font-hand); font-weight: 700; font-size: 1.3rem; color: #ffe169;
  text-decoration: underline wavy rgba(255,225,105,.55); text-underline-offset: 4px;
}
:root:root.light .quit-link, html.light .quit-link { color: #173a8a; text-decoration-color: rgba(23,58,138,.4); }
:root:root .quit-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
/* Les fenetres sont des ardoises : la croix est toujours a la craie. */
:root:root :is(.help-close-btn, .profile-modal-close, .snake-vote-close) { color: #eef1ea !important; }
:root:root .btn-quit.abandon-btn { background-image: none; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--margin) 35%, transparent); text-decoration-thickness: 6px; text-underline-offset: -2px; text-decoration-skip-ink: none; }

/* Bouton pause (Snake, Libero Run, quiz) : les deux barres sont dessinees en CSS.
   Avant, il ne contenait qu'une icone chargee a part ; si elle tardait, il restait
   une petite pilule vide (le « tiret » signale par les joueurs). */
:root:root .snake-pause-btn { position: relative; width: 44px; height: 36px; min-width: 44px; padding: 0; }
:root:root .snake-pause-btn > * { display: none !important; }
:root:root .snake-pause-btn::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 16px; transform: translate(-50%, -50%);
  border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: border-box; border-radius: 1px;
}
:root:root .snake-pause-btn.hidden { display: none !important; }

/* ══ CHAT ENTRE AMIS (« Mes mots ») ═════════════════════════════════════════
   Bouton enveloppe a cote de la cloche (memes ecrans). Arrivee : avion origami
   (offset-path pose en JS). Fenetre : plein ecran sur telephone, tiroir a droite
   sur ordinateur. Conversation style encre : on s'ecrit dans la marge du cahier. */
.dm-btn {
  position: absolute; top: 14px; right: 60px; z-index: 950; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  background: var(--card); color: var(--text); border: 1.5px solid var(--line); box-shadow: 0 2px 0 var(--hard);
}
.dm-btn.hidden, body.screen-shop-active .dm-btn { display: none !important; }
.dm-btn svg { width: 22px; height: 22px; }
.dm-count {
  position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 999px;
  background: var(--margin, #e0435a); color: #fff; font: 800 .68rem/19px var(--font-body); text-align: center; border: 2px solid var(--card);
}
.dm-count.hidden { display: none; }
.dm-count.dm-pop { animation: dmPop .4s cubic-bezier(.3,1.7,.5,1); }
.dm-btn.dm-ring { animation: dmRing .5s ease; }
@keyframes dmPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes dmRing { 30% { transform: scale(1.18) rotate(-8deg); } 60% { transform: scale(.95) rotate(5deg); } }
.dm-plane {
  position: fixed; left: 0; top: 0; width: 28px; height: 28px; z-index: 2000; pointer-events: none;
  offset-rotate: auto; animation: dmFly 1.25s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes dmFly { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; transform: scale(.4); } }
/* En partie : seulement un point rouge discret sur le bouton pause. */
body.dm-pending .snake-pause-btn::after {
  content: ""; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--margin, #e0435a); border: 2px solid var(--card);
}

.dm-sheet { position: fixed; inset: 0; z-index: 1500; background: rgba(20,24,30,.35); }
.dm-sheet.hidden { display: none; }
.dm-box {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg, #fbfaf6); color: var(--text); animation: dmSheetIn .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes dmSheetIn { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 900px) {
  .dm-box { left: auto; width: 400px; border-left: 2px solid var(--text); box-shadow: -8px 0 0 rgba(0,0,0,.06); animation-name: dmDrawerIn; }
  @keyframes dmDrawerIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
}
.dm-hd { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; min-height: 60px; border-bottom: 2px solid var(--text); background: var(--card); position: relative; }
.dm-title { flex: 1; margin: 0; font: 700 1.6rem/1.05 var(--font-hand); color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-title small { display: block; font: 400 .72rem var(--font-body); color: var(--muted); }
.dm-title small.on { color: #2f9e5a; }
.dm-back, .dm-menu-btn { width: 44px; height: 44px; border: none; background: none; cursor: pointer; color: var(--accent); font: 700 1.6rem var(--font-hand); }
.dm-menu-btn { font: 900 1.4rem var(--font-body); color: var(--text); }
.dm-back.hidden, .dm-menu-btn.hidden { display: none; }
:root:root .dm-hd .help-close-btn { color: var(--text) !important; }
.dm-menu { position: absolute; right: 52px; top: 56px; z-index: 3; background: var(--card); border: 1.5px solid var(--text); border-radius: 10px; box-shadow: 3px 4px 0 rgba(0,0,0,.12); overflow: hidden; }
.dm-menu.hidden { display: none; }
.dm-menu button { display: block; width: 100%; min-height: 44px; padding: 0 18px; border: none; background: none; text-align: left; font: 700 .9rem var(--font-body); color: var(--text); cursor: pointer; }
.dm-menu button + button { border-top: 1px dashed var(--line); color: var(--margin, #e0435a); }
.dm-av { position: relative; flex: none; border-radius: 8px; border: 1.5px solid var(--text); background: #f0c9a0; display: grid; place-items: center; font: 800 .9rem var(--font-body); color: #22252b; }
.dm-av svg { width: 100%; height: 100%; border-radius: 6px; display: block; }
.dm-dot { position: absolute; right: -4px; bottom: -4px; width: 12px; height: 12px; border-radius: 50%; background: #b8bec9; border: 2px solid var(--card); }
.dm-dot.on { background: #2f9e5a; }
.dm-who:empty { display: none; }

.dm-list { flex: 1; overflow-y: auto; }
.dm-list.hidden, .dm-conv-wrap.hidden { display: none !important; }
.dm-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: none; border-bottom: 1px dashed var(--line); background: none; text-align: left; cursor: pointer; color: var(--text); }
.dm-row:hover { background: var(--card2); }
.dm-row-n { flex: 1; min-width: 0; }
.dm-row-n b { display: block; font-size: .95rem; }
.dm-row-n small { display: block; color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-row-n small.unread { color: var(--text); font-weight: 700; }
.dm-row-n small.first { font-style: italic; }
.dm-row-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: .72rem; color: var(--muted); }
.dm-cnt { font-style: normal; background: var(--margin, #e0435a); color: #fff; font: 800 .7rem/20px var(--font-body); min-width: 20px; height: 20px; border-radius: 10px; text-align: center; padding: 0 5px; }
.dm-empty { text-align: center; color: var(--muted); padding: 22px 16px; margin: 0; }
.dm-add { display: block; margin: 12px auto 20px; min-height: 44px; padding: 0 16px; border: none; background: none; cursor: pointer; font: 700 1.3rem var(--font-hand); color: var(--accent); }

.dm-conv-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dm-conv {
  flex: 1; overflow-y: auto; padding: 14px 14px 10px 46px; display: flex; flex-direction: column; gap: 12px;
  background-color: var(--bg, #fbfaf6);
  background-image: linear-gradient(90deg, transparent 30px, rgba(224,67,90,.5) 30px 31.5px, transparent 31.5px),
                    repeating-linear-gradient(transparent 0 27px, rgba(80,130,205,.25) 27px 28px);
  background-attachment: local;
}
.dm-day { align-self: center; font: 700 1.05rem var(--font-hand); color: var(--muted); }
.dm-m { max-width: 86%; position: relative; font-family: Kalam, var(--font-hand), cursive; font-size: 1.02rem; line-height: 1.35; overflow-wrap: anywhere; }
.dm-m.them { align-self: flex-start; color: #1b3a8c; }
.dm-m.me { align-self: flex-end; text-align: right; color: var(--text); }
.dm-name { display: block; font: 700 .64rem var(--font-body); letter-spacing: .05em; color: var(--muted); }
.dm-name time { font-weight: 400; letter-spacing: 0; }
.dm-m.me .dm-txt { background: linear-gradient(transparent 58%, var(--mark, rgba(251,239,122,.9)) 58%); padding: 0 2px; }
html:not(.light) .dm-m.them { color: #9ec1ff; }
/* L'ami : le texte s'ecrit a la plume (revele de gauche a droite), le stylo suit. */
.dm-m.dm-in-them .dm-txt { display: inline-block; clip-path: inset(0 100% 0 0); animation: dmInk var(--dur, 1s) steps(var(--steps, 20)) forwards; }
@keyframes dmInk { to { clip-path: inset(0 0 0 0); } }
.dm-pen { position: absolute; width: 18px; height: 18px; bottom: 2px; left: 0; pointer-events: none; animation: dmPen var(--dur, 1s) steps(var(--steps, 20)) forwards; }
@keyframes dmPen { 0% { left: 0; opacity: 1; } 99% { left: calc(100% - 6px); opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
/* Moi : le mot se pose, puis un coup de surligneur. */
.dm-m.dm-in-me { animation: dmUp .3s ease both; }
.dm-m.dm-in-me .dm-txt { background-size: 0% 100%; background-repeat: no-repeat; background-position: right; animation: dmHl .35s ease .25s forwards; }
@keyframes dmUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dmHl { to { background-size: 100% 100%; } }
.dm-typing { align-self: flex-start; font: italic .95rem Kalam, var(--font-hand), cursive; color: var(--muted); }
.dm-typing.hidden { display: none; }
.dm-quick { display: flex; gap: 6px; padding: 8px 10px 0; overflow-x: auto; background: var(--card); scrollbar-width: none; }
.dm-chip { flex: none; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--text); background: transparent; color: var(--text); font: 700 .82rem var(--font-body); cursor: pointer; }
.dm-comp { display: flex; gap: 6px; align-items: center; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--card); margin: 0; }
.dm-in { flex: 1; min-width: 0; min-height: 44px; border: 1.5px solid var(--text); border-radius: 10px; padding: 0 12px; font: 1rem var(--font-body); background: var(--bg, #fff); color: var(--text); }
.dm-send { width: 46px; height: 46px; flex: none; border: none; border-radius: 10px; background: #1b3a8c; display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 #0d1f55; }
.dm-send svg { width: 20px; }
.dm-sword { flex: none; min-height: 44px; padding: 0 10px; border: 1.5px solid var(--text); border-radius: 10px; background: transparent; color: var(--text); font: 800 .75rem var(--font-body); cursor: pointer; }
.dm-err { margin: 0; padding: 0 12px 6px; min-height: 0; font-size: .8rem; color: var(--margin, #e0435a); background: var(--card); }
.dm-err:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .dm-box, .dm-m, .dm-txt, .dm-pen, .dm-plane, .dm-count, .dm-btn { animation: none !important; clip-path: none !important; } .dm-pen { display: none; } }
.dm-conv > :first-child { margin-top: auto; }
/* Meme gabarit que la cloche sur telephone (36 px, 10 px du haut), 8 px d'ecart. */
@media (max-width: 600px) { .dm-btn { top: 10px; right: 54px; width: 36px; height: 36px; } .dm-btn svg { width: 20px; height: 20px; } }
@media (min-width: 601px) { .dm-btn { right: 60px; } }

/* Fenetre de confirmation (ardoise) : le choix sur en grand, l'action en craie rouge. */
:root:root .confirm-modal { max-width: 380px; }
:root:root .confirm-text { font-size: 1rem; line-height: 1.45; }
.confirm-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.confirm-actions .btn { width: 100%; min-height: 46px; margin: 0; }
:root:root .btn.confirm-danger {
  background: transparent; color: #ff9a9a; border: 2px dashed #ff9a9a; box-shadow: none;
  font-family: var(--font-hand); font-weight: 700; font-size: 1.3rem;
}
:root:root .btn.confirm-danger:hover { background: rgba(255,154,154,.12); }
#overlay-confirm { z-index: 3000; }
:root:root .overlay .confirm-actions .btn.confirm-danger { background: transparent !important; color: #ff9a9a !important; border: 2px dashed #ff9a9a !important; box-shadow: none !important; }
:root:root .overlay .confirm-actions .btn.confirm-danger:hover { background: rgba(255,154,154,.12) !important; }

/* Liste d'amis : bouton « Offrir » lisible (dessin de cadeau + mot), plus de pilule vide. */
:root:root .friend-row .friend-gift {
  display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 40px; padding: 0 12px; margin: 0;
  font: 700 1.15rem var(--font-hand); color: #ffe169 !important; border: 1.5px solid rgba(255,225,105,.6) !important; background: transparent !important;
}
:root:root .friend-row .friend-gift svg { width: 18px; height: 18px; flex: none; }
:root:root .friend-row .friend-gift:hover { background: rgba(255,225,105,.12) !important; }

/* ══ Libe IA ══ */
.chatbot-ai-tag { display: inline-block; margin-left: 6px; padding: 1px 5px; border: 1.5px solid currentColor; border-radius: 4px; font: 800 .58rem var(--font-body); letter-spacing: .06em; color: var(--accent); vertical-align: 3px; }
.chatbot-ai-tag.hidden { display: none; }
.chatbot-quota { margin: 0; padding: 0 14px 10px; font-size: .74rem; color: var(--muted); }
.chatbot-quota.hidden { display: none; }
:root:root .chatbot-msg-bot .chatbot-refuse { color: var(--margin, #e0435a); }
:root:root .chatbot-act {
  display: inline-flex; align-items: center; margin-top: 8px; min-height: 40px; padding: 0 14px; border-radius: 8px;
  background: #1b3a8c; color: #fff; border: none; box-shadow: 0 2px 0 #0d1f55; font: 800 .8rem var(--font-body); cursor: pointer;
}
.sp-note { margin: -2px 0 6px 32px; font-size: .74rem; line-height: 1.35; color: rgba(238,241,234,.75); }
.sp-note.hidden { display: none; }

/* ══ Dames : choix des regles + damier 8x8 ou 10x10 ══ */
.ck-rules { width: 100%; max-width: 560px; margin: 0 auto 12px; }
.ck-rules.hidden { display: none; }
.ck-rules-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
:root:root .ck-rule {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; padding: 10px 8px; cursor: pointer;
  background: var(--card); color: var(--text); border: 1.5px solid var(--line); border-radius: var(--r-sm); font-family: var(--font-body);
}
:root:root .ck-rule b { font-size: .95rem; }
:root:root .ck-rule small { font-size: .74rem; color: var(--muted); }
:root:root .ck-rule.active { border: 2.5px solid var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; background: linear-gradient(transparent 72%, var(--mark) 72%), var(--card); }
.ck-mini { display: grid; width: 60px; height: 60px; margin-bottom: 6px; border: 1.5px solid var(--text); }
.ck-mini.b10 { grid-template-columns: repeat(10, 1fr); }
.ck-mini.b8 { grid-template-columns: repeat(8, 1fr); }
.ck-mini i { background: #f2e4c6; position: relative; }
.ck-mini i.d { background: #8a5a2b; }
.ck-mini i.r::after, .ck-mini i.y::after { content: ""; position: absolute; inset: 15%; border-radius: 50%; }
.ck-mini i.r::after { background: #e0435a; } .ck-mini i.y::after { background: #f6c945; }
.ck-diff { margin-top: 8px; font-size: .85rem; color: var(--text); }
.ck-diff summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; justify-content: center; font: 700 1.15rem var(--font-hand); color: var(--accent); }
.ck-diff > div { margin-top: 6px; padding: 10px 12px; border: 1.5px dashed var(--line); border-radius: 8px; line-height: 1.45; }
.ck-board { grid-template-columns: repeat(var(--ck-n, 8), var(--ck-cell)) !important; grid-template-rows: repeat(var(--ck-n, 8), var(--ck-cell)) !important; }
.ck-board.ck-10 { --ck-cell: min(calc((100vw - 36px) / 10), 46px); }
@media (min-width: 700px) { .ck-board.ck-10 { --ck-cell: 50px; } }
@media (min-width: 1024px) { .ck-board.ck-10 { --ck-cell: min(7.4vh, 60px); } }
.ck-piece.ck-taken { opacity: .35; filter: grayscale(.6); }
.ck-variant-tag { text-align: center; margin: 0 0 8px; font: 700 1.1rem var(--font-hand); color: var(--muted); }

/* Libe sur telephone : la fenetre monte jusque sous les boutons du haut (au lieu
   de prendre seulement la hauteur de son contenu). */
@media (max-width: 600px) {
  :root:root .chatbot-panel { top: 60px; height: auto; max-height: none; }
}
body:has(#chatbot-panel:not(.hidden)) .news-card { display: none !important; }
/* Tampon « IA » pose a droite du crayon Libe (et non etire sous lui). */
:root:root .chatbot-header-txt { position: relative; }
:root:root .chatbot-header-txt .chatbot-ai-tag { position: absolute; left: 46px; top: 12px; margin: 0; width: auto; transform: rotate(-6deg); }

/* ══ Libe IA : jauge « encrier » (une goutte par question) ══ */
.chatbot-quota.libe-ink { display: flex; align-items: center; gap: 10px; padding: 4px 14px 10px; }
.chatbot-quota.libe-ink.hidden { display: none; }
.ink-bottle { position: relative; width: 26px; height: 32px; flex: none; }
.ink-neck { position: absolute; left: 7px; right: 7px; top: 0; height: 8px; border: 2px solid var(--text); border-bottom: none; border-radius: 3px 3px 0 0; background: var(--card); }
.ink-glass { position: absolute; inset: 7px 0 0 0; border: 2px solid var(--text); border-radius: 5px 5px 8px 8px; overflow: hidden; background: var(--card); }
.ink-lvl { position: absolute; left: 0; right: 0; bottom: 0; background: #1b3a8c; transition: height .6s cubic-bezier(.3,.7,.3,1); }
.ink-lvl::before { content: ""; position: absolute; left: -10%; right: -10%; top: -3px; height: 6px; border-radius: 50%; background: #2c52b8; }
.ink-right { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ink-drops { display: flex; gap: 3px; flex-wrap: wrap; }
.ink-drops i { width: 8px; height: 11px; background: #1b3a8c; clip-path: polygon(50% 0, 100% 60%, 85% 100%, 15% 100%, 0 60%); transition: background .3s; }
html:not(.light) .ink-drops i, html:not(.light) .ink-lvl { background: #8fb4ff; }
.ink-drops i.u { background: var(--line) !important; }
.ink-lbl { font: 700 .95rem var(--font-hand); color: var(--muted); line-height: 1.1; }
.libe-ink.warn .ink-lbl { color: #c2410c; }
.libe-ink.off .ink-lbl { color: var(--margin, #e0435a); }
.libe-ink.off .ink-bottle { opacity: .55; }
.ink-drops i.u { background: #cfd5e0 !important; }
html:not(.light) .ink-drops i.u { background: rgba(238,241,234,.22) !important; }
.libe-ink.off .ink-lvl::before { display: none; }

/* Panne d'encre de Libe : debut a l'encre, trois taches, puis crayon gris. */
.libe-relay { position: relative; align-self: flex-start; font: 700 1.22rem var(--font-hand); color: var(--accent); min-height: 30px; padding-right: 60px; }
.rl-first { display: inline-block; clip-path: inset(0 100% 0 0); animation: rlWrite .8s steps(12) .1s forwards; }
@keyframes rlWrite { to { clip-path: inset(0 0 0 0); } }
.rl-blot { position: absolute; border-radius: 50%; background: #1b3a8c; opacity: 0; transform: scale(0); }
.rl-blot.b1 { right: 44px; top: 8px; width: 10px; height: 10px; animation: rlBlot .25s ease .95s forwards; }
.rl-blot.b2 { right: 28px; top: 14px; width: 6px; height: 6px; animation: rlBlot .25s ease 1.15s forwards; }
.rl-blot.b3 { right: 6px; top: 4px; width: 15px; height: 13px; border-radius: 45% 55% 50% 50%; animation: rlBlot .25s ease 1.35s forwards; }
@keyframes rlBlot { to { opacity: .85; transform: scale(1); } }
html:not(.light) .rl-blot { background: #8fb4ff; }
:root:root .chatbot-msg-bot .libe-lead { color: #5b6270; }
html:not(.light) .chatbot-msg-bot .libe-lead { color: #b8bec9; }
.chatbot-ai-tag.lead { color: #5b6270; border-color: #5b6270; }
@media (prefers-reduced-motion: reduce) { .rl-first, .rl-blot { animation: none; clip-path: none; opacity: 1; transform: none; } }

/* Mes mots : tiroir a emojis (recents en haut, petit espace, puis toute la liste a faire defiler). */
.dm-emo { flex: none; width: 44px; height: 44px; border: 1.5px solid var(--text); border-radius: 10px; background: transparent; color: var(--text); display: grid; place-items: center; cursor: pointer; }
.dm-emo svg { width: 22px; height: 22px; }
.dm-emo.on { background: var(--hl, #fbef7a); color: #1d2433; }
.dm-emo:focus-visible, .dm-emo-k:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.dm-emoji { height: min(38vh, 260px); overflow-y: auto; overscroll-behavior: contain; background: var(--card); border-top: 1.5px solid var(--text); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
.dm-emoji.hidden, .dm-emo-grid.hidden { display: none; }
.dm-emo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
.dm-emo-recent { margin-bottom: 12px; }
.dm-emo-k { height: 42px; border: none; background: transparent; border-radius: 8px; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.dm-emo-k:active { transform: scale(1.25); background: var(--card2, rgba(0,0,0,.06)); }
@media (hover: hover) { .dm-emo-k:hover { background: var(--card2, rgba(0,0,0,.06)); } }
@media (max-width: 380px) { .dm-sword { padding: 0 6px; } .dm-emo { width: 40px; } }

/* Lancer une partie : meme ossature aux jeux et au quiz (rangee de 3, deux boutons cote a cote). */
.who-row .who-btn { flex: 1 1 0; min-width: 0; padding-inline: 4px; white-space: normal; line-height: 1.15; }
.who-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
:root:root .who-pane .who-acts #btn-create, :root:root .who-pane .who-acts #btn-challenge-friend { width: 100%; margin: 0; }
.who-card[data-who="code"] .tq-setup { display: none; }
.tq-nb-label { margin: 8px 0 4px; font-size: .82rem; font-weight: 700; color: var(--muted); }
:root:root .who-acts .btn, :root:root #trivia-who .trivia-action-row .btn { font-size: .92rem; padding-inline: 6px; }

/* Mes mots : la bulle achetee devient un ruban dans sa matiere, a cote du message (sans texte). */
.dm-m.dm-has-rib { position: relative; padding-left: 14px; }
:root:root .dm-m .dm-rib.msg-bubble { position: absolute; left: 0; top: 3px; bottom: 3px; width: 7px; padding: 0; border-radius: 2px; box-shadow: none; font-size: 0; transform-origin: top; animation: dmRib .45s ease both !important; }
:root:root .dm-m.me .dm-rib.msg-bubble { left: auto; right: 0; }
.dm-m.me.dm-has-rib { padding-left: 0; padding-right: 14px; }
@keyframes dmRib { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { :root:root .dm-m .dm-rib.msg-bubble { animation: none !important; } }

/* ══ Arcade : Libero Run et Snake ══ */
#screen-arcade .arcade-card { margin-bottom: 14px; }
#screen-arcade .arcade-card + .arcade-card .event-badge { color: #15803d; }
.arcade-lb-tabs { display: flex; gap: 14px; padding: 2px 4px 6px; overflow-x: auto; scrollbar-width: none; }
.arcade-tab { flex: none; border: none; background: none; padding: 6px 0; font: 800 .82rem var(--font-body); color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; min-height: 36px; }
.arcade-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.arcade-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#screen-arcade .luffy-suggest-link { margin: 12px auto 0; display: block; }

/* ══ Évents : le calendrier des week-ends (cahier de textes) ══ */
.evcal { width: 100%; max-width: 560px; margin: 0 auto; }
.evcal-ribbon { display: flex; gap: 8px; align-items: center; border: 1.5px dashed var(--text); border-radius: 10px; padding: 8px 12px; background: var(--card); font-size: .85rem; margin-bottom: 8px; }
.evcal-ribbon [data-ic] { width: 22px; height: 22px; flex: none; color: var(--accent); }
.evcal-wk { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1.5px dashed var(--border); position: relative; }
.evcal-date { font: 700 1.45rem/1 var(--font-hand); color: var(--margin, #e0435a); text-align: right; padding-top: 4px; }
.evcal-date small { display: block; font: 800 .6rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.evcal-evs { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.evcal-ev { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; border: 1.5px solid var(--text); border-radius: 10px; background: var(--card); color: var(--text); padding: 9px 11px; cursor: pointer; font: inherit; min-height: 44px; transition: transform .15s, box-shadow .15s; }
.evcal-ev:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.evcal-ev.open, .evcal-wk.live .evcal-ev { box-shadow: 3px 3px 0 var(--text); }
.evcal-ic { width: 24px; height: 24px; flex: none; margin-top: 1px; color: var(--accent); }
.evcal-tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.evcal-tx b { font-size: .92rem; line-height: 1.2; }
.evcal-day { font: 800 .6rem var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.evcal-more { display: none; font-size: .8rem; color: var(--muted); line-height: 1.4; margin-top: 4px; }
.evcal-more em { display: block; font-style: normal; font-weight: 800; color: var(--text); margin-top: 4px; }
.evcal-ev.open .evcal-more { display: block; animation: evOpen .25s ease both; }
@keyframes evOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.evcal-ev.c5 { background: color-mix(in srgb, var(--hl, #fbef7a) 45%, var(--card)); }
.evcal-stamp { position: absolute; right: 0; top: 4px; font: 800 .62rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--margin, #e0435a); border: 2px solid currentColor; border-radius: 4px; padding: 2px 6px; transform: rotate(6deg); background: var(--bg, #fbfaf6); z-index: 1; }
.evcal-wk.live .evcal-evs { padding-top: 18px; }
.evcal-note, .evcal-empty { text-align: center; font: 600 1.05rem var(--font-hand); color: var(--muted); margin: 14px 0 0; }
@media (prefers-reduced-motion: reduce) { .evcal-ev.open .evcal-more { animation: none; } }
.arcade-lb-title { margin: 0; padding: 2px 4px 0; font: 800 .9rem var(--font-body); color: var(--accent); }
/* Arcade sur ordinateur : les jeux cote a cote. */
.arcade-games { width: 100%; display: flex; flex-direction: column; align-items: center; }
.lb-unit { font: 600 .75rem var(--font-body); color: var(--muted); }
@media (min-width: 900px) {
  .arcade-games { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); gap: 20px; justify-content: center; align-items: stretch; }
  .arcade-games .arcade-card { margin: 0 !important; width: 100%; max-width: none; height: 100%; }
  #screen-arcade .arcade-lb { margin-top: 20px; width: 100%; max-width: 780px; }
}

/* ══ Animations des moments forts (oct. 2026) ══ */
/* Libs gagnes : eclairs qui volent vers le compteur */
.libs-bolt { position: fixed; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; z-index: 9999; pointer-events: none; will-change: transform, opacity; }
.libs-bolt svg { width: 100%; height: 100%; fill: #ffd84a; stroke: #1d2433; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255, 200, 40, .75)); }
#libs-counter.libs-gain { animation: libsGain .55s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes libsGain { 40% { transform: scale(1.3); box-shadow: 0 0 0 6px rgba(255, 216, 74, .45); } 100% { transform: none; box-shadow: none; } }
/* Le Mot trouve : la vague */
.wordle-wave { animation: wordleWave .55s cubic-bezier(.3, 1.4, .5, 1) calc(var(--i, 0) * .09s) both; }
@keyframes wordleWave { 45% { transform: translateY(-18px) scale(1.06); } 100% { transform: none; } }
/* Roue : rayons dores qui tournent derriere la roue */
.wheel-rays { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; z-index: 0;
  background: repeating-conic-gradient(rgba(255, 210, 60, .5) 0 12deg, transparent 12deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%); mask: radial-gradient(circle, #000 35%, transparent 70%);
  animation: wheelRaysIn .5s ease both, wheelRaysTurn 6s linear infinite; }
@keyframes wheelRaysIn { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes wheelRaysTurn { to { rotate: 360deg; } }
#wheel-disc { position: relative; z-index: 1; }
#wheel-status.wheel-won { animation: wheelWonZoom .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes wheelWonZoom { 0% { transform: scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* Record de l'Arcade : le score brille une fois atteint */
.hs-glow { animation: hsGlow 1s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes hsGlow { 0% { transform: scale(1); } 45% { transform: scale(1.18); text-shadow: 0 0 22px rgba(255, 200, 40, .95); } 100% { transform: scale(1); text-shadow: 0 0 10px rgba(255, 200, 40, .6); } }
@media (prefers-reduced-motion: reduce) { .wordle-wave, .wheel-rays, #libs-counter.libs-gain, .hs-glow { animation: none; } }
:root:root .wheel-pointer { z-index: 2; }

/* ══ Podium de fin de quiz a plusieurs (podium.js) ══
   Suit le theme : --bg / --text / --muted / --accent / --margin changent entre cahier et ardoise. */
.pd-show { position: fixed; inset: 0; z-index: 9000; background: var(--bg); animation: pdIn .4s ease both; }
.pd-show.pd-out { animation: pdOut .35s ease forwards; }
@keyframes pdIn { from { opacity: 0; } } @keyframes pdOut { to { opacity: 0; } }
body.pd-open { overflow: hidden; }
.pd-scene { position: absolute; inset: 0; overflow: hidden; color: var(--text);
  --g1:#fff4b8; --g2:#ffd23f; --g3:#d99a00; --g4:#8a5a00; --s1:#fff; --s2:#d7dde6; --s3:#8e99aa; --b1:#ffd9b0; --b2:#d08a4a; --b3:#7d4a1d;
  --u: 10px; --step: 104px; --f3: 70px; --f2: 84px; --f1: 112px; --h1: 28%; --h2: 19%; --h3: 13%; --gap: 6px; --base: 21%; }
.pd-pc .pd-scene { --u: 12px; --step: 170px; --f3: 96px; --f2: 114px; --f1: 150px; --h1: 26%; --h2: 17%; --h3: 11%; --gap: 14px; --base: 20%; }
.pd-cam, .pd-shake { position: absolute; inset: 0; will-change: transform; }
.pd-page { position: absolute; inset: -40%; background: repeating-linear-gradient(transparent 0 25px, color-mix(in srgb, var(--accent) 18%, transparent) 25px 26px); }
.pd-title { position: absolute; top: 4%; left: 0; right: 0; text-align: center; font: 700 calc(var(--u) * 3.2) var(--font-hand); color: var(--accent); opacity: 0; z-index: 12; }
.pd-title small { display: block; font: 800 calc(var(--u) * 1) var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pd-pc .pd-title { left: 6%; right: auto; text-align: left; top: 5%; }
.pd-rays { position: absolute; left: 50%; bottom: calc(var(--base) + var(--h1)); width: calc(var(--f1) * 5); aspect-ratio: 1; margin-left: calc(var(--f1) * -2.5); margin-bottom: calc(var(--f1) * -1.9); opacity: 0; pointer-events: none; }
.pd-rays i { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 220, 80, .55) 0 8deg, transparent 8deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 14%, transparent 60%); mask: radial-gradient(circle, #000 14%, transparent 60%); will-change: transform; }
.pd-ground { position: absolute; left: -20%; right: -20%; bottom: var(--base); height: 2px; background: var(--text); z-index: 6; }
.pd-soil { position: absolute; left: -20%; right: -20%; bottom: 0; height: var(--base); background: repeating-linear-gradient(115deg, color-mix(in srgb, var(--text) 10%, transparent) 0 6px, transparent 6px 14px); z-index: 6; }
.pd-step { position: absolute; bottom: var(--base); width: var(--step); transform-origin: 50% 100%; transform: scaleY(0); border: 2px solid var(--text); border-bottom: none; border-radius: 8px 8px 0 0;
  display: flex; justify-content: center; padding-top: calc(var(--u) * .8); font: 700 calc(var(--u) * 4.2)/1 var(--font-hand); color: #1d2433; z-index: 5; will-change: transform; overflow: hidden; }
.pd-st1 { left: 50%; margin-left: calc(var(--step) / -2); height: var(--h1); background: linear-gradient(180deg, var(--g1), var(--g2) 55%, var(--g3)); }
.pd-st2 { left: 50%; margin-left: calc(var(--step) * -1.5 - var(--gap)); height: var(--h2); background: linear-gradient(180deg, var(--s1), var(--s2) 60%, var(--s3)); }
.pd-st3 { left: 50%; margin-left: calc(var(--step) * .5 + var(--gap)); height: var(--h3); background: linear-gradient(180deg, var(--b1), var(--b2) 60%, var(--b3)); }
.pd-sh { position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-15deg); }
.pd-live .pd-st1 .pd-sh { animation: pdShine 3.4s ease-in-out .4s infinite; }
@keyframes pdShine { 0% { transform: translateX(0) skewX(-15deg); } 55%, 100% { transform: translateX(420%) skewX(-15deg); } }
.pd-crack { position: absolute; left: 50%; bottom: calc(var(--base) * .08); width: calc(var(--step) * 3); margin-left: calc(var(--step) * -1.5); height: calc(var(--base) * .9); z-index: 7; pointer-events: none; }
.pd-crack path { fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 160; stroke-dashoffset: 160; vector-effect: non-scaling-stroke; }
.pd-dust { position: absolute; left: 50%; bottom: var(--base); width: 0; height: 0; z-index: 8; pointer-events: none; }
.pd-dust i { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: #c9b49a; opacity: 0; }
.pd-shock { position: absolute; left: 50%; bottom: calc(var(--base) + var(--h1)); width: calc(var(--f1) * 2.6); height: calc(var(--f1) * .7); margin-left: calc(var(--f1) * -1.3); margin-bottom: calc(var(--f1) * -.35); border-radius: 50%; border: 3px solid rgba(255, 200, 40, .9); opacity: 0; z-index: 6; pointer-events: none; }
.pd-pl { position: absolute; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .3); opacity: 0; z-index: 7; will-change: transform, opacity; width: var(--step); }
.pd-p1 { left: 50%; margin-left: calc(var(--step) / -2); bottom: calc(var(--base) + var(--h1) + 1%); }
.pd-p2 { left: 50%; margin-left: calc(var(--step) * -1.5 - var(--gap)); bottom: calc(var(--base) + var(--h2) + 1%); }
.pd-p3 { left: 50%; margin-left: calc(var(--step) * .5 + var(--gap)); bottom: calc(var(--base) + var(--h3) + 1%); }
.pd-nm { font: 800 calc(var(--u) * 1.4) var(--font-body); color: var(--text); white-space: nowrap; max-width: calc(var(--step) * 1.3); overflow: hidden; text-overflow: ellipsis; }
.pd-pts { font: 700 calc(var(--u) * 2) var(--font-hand); color: var(--muted); line-height: 1; }
.pd-p1 .pd-nm { font-size: calc(var(--u) * 1.7); margin-top: calc(var(--u) * .6); }
.pd-p1 .pd-pts { font: 400 calc(var(--u) * 2.1) var(--font-display); color: #c98a00; }
.pd-you { display: inline-block; font: 800 calc(var(--u) * .85) var(--font-body); letter-spacing: .08em; text-transform: uppercase; background: var(--mark); color: #1d2433; border-radius: 999px; padding: 1px 6px; margin-left: 4px; vertical-align: 2px; }
.pd-fr { position: relative; border-radius: 50%; flex: none; }
.pd-pt { position: absolute; border-radius: 50%; overflow: hidden; background: #fff; z-index: 2; }
.pd-pt svg { width: 100%; height: 100%; display: block; }
.pd-f3 { width: var(--f3); height: var(--f3); background: linear-gradient(145deg, var(--b1), var(--b2) 45%, var(--b3)); border: 2px solid var(--text); }
.pd-f3 .pd-pt { inset: 5px; }
.pd-f2 { width: var(--f2); height: var(--f2); background: conic-gradient(from 210deg, var(--s3), var(--s1), var(--s2), var(--s3), var(--s1), var(--s3)); border: 2px solid var(--text); }
.pd-f2 .pd-pt { inset: 7px; box-shadow: 0 0 0 2px #fff; }
.pd-gl { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; z-index: 3; pointer-events: none; }
.pd-gl::after { content: ""; position: absolute; top: -10%; bottom: -10%; width: 35%; left: -50%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .9), transparent); transform: skewX(-15deg); }
.pd-live .pd-gl::after { animation: pdShine 4.2s ease-in-out 1.2s infinite; }
.pd-f1 { width: var(--f1); height: var(--f1); }
.pd-plain { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--text); background: #e6e8ee; }
.pd-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--text); background: conic-gradient(var(--g4), var(--g2), var(--g1), var(--g3), var(--g2), var(--g1), var(--g4)); opacity: 0; will-change: transform, opacity; }
.pd-live .pd-ring { animation: pdTurn 5s linear infinite; }
@keyframes pdTurn { to { transform: rotate(360deg); } }
.pd-f1 .pd-pt { inset: 9px; }
.pd-halo { position: absolute; inset: -24%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 215, 70, .7), rgba(255, 215, 70, 0) 65%); opacity: 0; will-change: transform, opacity; }
.pd-live .pd-halo { animation: pdBreathe 2.4s ease-in-out infinite; }
@keyframes pdBreathe { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.12); opacity: 1; } }
.pd-gold { opacity: 0; }
.pd-gem { position: absolute; width: 12%; height: 12%; transform: rotate(45deg); border: 1.5px solid #3a1d00; z-index: 4; }
.pd-gem.a { top: -6%; left: 44%; background: #e0435a; } .pd-gem.b { bottom: -6%; left: 44%; background: #3d64b8; }
.pd-gem.c { left: -6%; top: 44%; background: #2f8a55; } .pd-gem.d { right: -6%; top: 44%; background: #2f8a55; }
.pd-laurel { position: absolute; inset: -30%; width: 160%; height: 160%; pointer-events: none; }
.pd-laurel path { fill: #3f9a52; stroke: #1d4d27; stroke-width: 1.1; }
.pd-orbit { position: absolute; inset: -24%; z-index: 5; pointer-events: none; will-change: transform; }
.pd-live .pd-orbit { animation: pdTurn 7s linear infinite; }
.pd-orbit i { position: absolute; width: 7px; height: 7px; margin: -3.5px; background: #ffd23f; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.pd-crown { position: absolute; top: -44%; left: 50%; width: 56%; margin-left: -28%; z-index: 6; opacity: 0; will-change: transform, opacity; }
.pd-streaks { position: absolute; left: 50%; top: calc(var(--f1) * .5); width: 0; height: 0; z-index: 1; opacity: 0; pointer-events: none; }
.pd-streaks i { position: absolute; right: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 210, 63, 0), rgba(255, 210, 63, .95)); transform-origin: 100% 50%; transform: rotate(-38deg); }
.pd-streaks i:nth-child(1) { width: calc(var(--f1) * 2.4); top: -14px; } .pd-streaks i:nth-child(2) { width: calc(var(--f1) * 1.7); top: 4px; }
.pd-streaks i:nth-child(3) { width: calc(var(--f1) * 2); top: 22px; } .pd-streaks i:nth-child(4) { width: calc(var(--f1) * 1.3); top: -30px; }
.pd-banner { position: absolute; left: 50%; top: 17%; width: max-content; translate: -50% 0; transform: scaleX(0); opacity: 0; background: #e0435a; color: #fff; font: 400 calc(var(--u) * 1.6) var(--font-display); letter-spacing: .05em; padding: calc(var(--u) * .8) calc(var(--u) * 2.2); border: 2px solid #1d2433; border-radius: 4px; white-space: nowrap; z-index: 12; box-shadow: 0 4px 0 #1d2433; }
.pd-pc .pd-banner { top: 6%; left: auto; right: 5%; translate: none; }
.pd-msg { position: absolute; left: 6%; right: 6%; bottom: calc(var(--base) * .48); text-align: center; font: 700 calc(var(--u) * 2.3) var(--font-hand); color: var(--accent); opacity: 0; z-index: 12; }
.pd-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(255, 240, 150, .9), rgba(255, 240, 150, 0) 55%); opacity: 0; pointer-events: none; z-index: 11; }
.pd-conf { position: absolute; top: 0; left: 0; width: 8px; height: 12px; border: 1px solid rgba(0, 0, 0, .25); z-index: 13; pointer-events: none; will-change: transform, opacity; }
.pd-rest { display: none; }
.pd-pc .pd-rest { display: flex; position: absolute; right: 4%; top: 30%; width: 18%; flex-direction: column; gap: 8px; z-index: 12; opacity: 0; }
.pd-rest div { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--text); background: var(--card); border-radius: 8px; padding: 6px 8px; font: 700 13px var(--font-body); color: var(--text); }
.pd-rest div.me { background: var(--mark); color: #1d2433; }
.pd-rest div span { font: 700 20px var(--font-hand); color: var(--muted); width: 22px; }
.pd-rest div em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 12px; }
.pd-skip, .pd-done { position: absolute; z-index: 20; font: 800 .85rem var(--font-body); border: 1.5px solid var(--text); background: var(--card); color: var(--text); border-radius: 999px; padding: 8px 16px; min-height: 40px; cursor: pointer; }
.pd-skip { top: calc(12px + env(safe-area-inset-top)); right: 12px; }
.pd-done { left: 50%; translate: -50% 0; bottom: calc(var(--base) * .12 + env(safe-area-inset-bottom)); opacity: 0; pointer-events: none; background: var(--accent); color: var(--bg); border-color: var(--accent); transition: opacity .5s ease; }
.pd-end .pd-skip { display: none; }
.pd-end .pd-done { opacity: 1; pointer-events: auto; }
.pd-skip:focus-visible, .pd-done:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Sans animation (reglage de l'appareil) : la scene finale, directement. */
.pd-static .pd-pl, .pd-static .pd-title, .pd-static .pd-msg, .pd-static .pd-rays, .pd-static .pd-crown, .pd-static .pd-banner, .pd-static .pd-rest, .pd-static .pd-gold, .pd-static .pd-ring, .pd-static .pd-halo { opacity: 1; }
.pd-static .pd-step, .pd-static .pd-banner { transform: none; }
@media (prefers-reduced-motion: reduce) { .pd-live *, .pd-show { animation: none !important; } }
/* Salon de quiz jusqu'a 20 joueurs : les scores en partie defilent sur une ligne au lieu de remplir l'ecran. */
:root:root .tg-scores { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
:root:root .tg-scores::-webkit-scrollbar { display: none; }
:root:root .tg-scores > * { flex: none; }

/* ══ Demande des notifications (feuille « au bon moment ») ══ */
.pa-wrap { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: flex-end; justify-content: center; }
.pa-dim { position: absolute; inset: 0; background: rgba(20, 26, 36, .5); animation: paFade .3s ease both; }
.pa-sheet { position: relative; width: min(100%, 460px); background: var(--bg); color: var(--text); border: 2px solid var(--text); border-bottom: none; border-radius: 20px 20px 0 0;
  padding: 14px 18px calc(18px + env(safe-area-inset-bottom)) 36px; animation: paUp .45s cubic-bezier(.22, 1, .36, 1) both;
  background-image: repeating-linear-gradient(transparent 0 23px, color-mix(in srgb, var(--accent) 16%, transparent) 23px 24px); }
.pa-sheet::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 1.5px; background: var(--margin); opacity: .5; }
.pa-grip { width: 44px; height: 5px; border-radius: 3px; background: var(--muted); opacity: .5; margin: 0 auto 10px; }
.pa-sheet h3 { margin: 0 0 6px; font: 700 1.9rem/1 var(--font-hand); color: var(--accent); }
.pa-sheet p { margin: 0 0 14px; font-size: .95rem; line-height: 1.5; }
.pa-sheet mark { background: linear-gradient(transparent 58%, var(--mark) 58%); color: inherit; padding: 0 2px; }
.pa-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pa-btns .btn { min-height: 46px; }
.pa-wrap.pa-out .pa-sheet { animation: paDown .3s ease both; }
.pa-wrap.pa-out .pa-dim { animation: paFadeOut .3s ease both; }
@keyframes paUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes paDown { to { transform: translateY(100%); } }
@keyframes paFade { from { opacity: 0; } } @keyframes paFadeOut { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pa-sheet, .pa-dim { animation: none !important; } }

/* Quiz a plusieurs : changer de reponse jusqu'a la fin du decompte, et pourcentage de chaque reponse a la correction. */
.tg-choice { position: relative; overflow: hidden; }
.tg-choice > * { position: relative; z-index: 1; }
.tg-choice > .tg-pct { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: 0; background: color-mix(in srgb, var(--accent) 22%, transparent); transition: width .9s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.tg-choice.pct-in > .tg-pct { width: var(--w); }
.tg-choice.correct > .tg-pct { background: color-mix(in srgb, #2f8a55 30%, transparent); }
.tg-choice.wrong > .tg-pct { background: color-mix(in srgb, #e2485d 26%, transparent); }
.tg-pct-n { margin-left: auto; flex: none; white-space: nowrap; padding-left: 8px; font: 900 1rem var(--font-body); font-variant-numeric: tabular-nums; }
:root:root .tg-choice.picked { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--accent); background: color-mix(in srgb, var(--mark) 55%, var(--card)); }
:root:root .tg-choice.picked .tg-choice-letter { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.tg-choice.dimmed:has(.tg-pct) { opacity: .85; }
.tg-change-hint { text-align: center; font: 700 1.1rem var(--font-hand); color: var(--accent); margin: 8px 0 0; }
.tg-change-hint.hidden { display: none; }
@media (prefers-reduced-motion: reduce) { .tg-choice > .tg-pct { transition: none; } }

/* Gain d'XP : pastille qui monte puis file vers le badge de niveau */
.xp-pill { position: fixed; z-index: 99990; pointer-events: none; white-space: nowrap; opacity: 0; font: 400 34px 'Archivo Black', Archivo, system-ui, sans-serif; color: var(--text); background: linear-gradient(transparent 58%, rgba(255,225,105,.45) 58%); padding: 0 8px; will-change: transform, opacity; }
html.light .xp-pill { color: #173a8a; }

/* Deconnexion (Mon compte) : separee du formulaire par un trait en pointilles */
.logout-zone { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 2px dashed var(--border); }
.logout-zone.hidden { display: none; }
.logout-btn { width: 100%; background: transparent; border: 2px solid var(--red); color: var(--red); font-weight: 800; }
.logout-zone .recovery-intro { margin: 0; font-size: 13px; }

/* Uno : pas de mise ni de defi d'ami dans l'accueil des jeux (le salon se partage par code ou lien) */
#home-who.is-uno .stake-row, #home-who.is-uno #step-stake, #home-who.is-uno #btn-challenge-friend { display: none; }

/* ── Quiz : page de choix (culture generale / drapeaux) ── */
.qh-cards { display: grid; gap: 12px; width: 100%; max-width: 560px; margin: 0 auto; padding: 0 4px; }
.qh-card { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; padding: 14px; border: 3px solid var(--text); border-radius: 16px; background: var(--card); color: var(--text); cursor: pointer; font: inherit; box-shadow: var(--shadow); }
.qh-card:active { transform: translateY(2px); }
.qh-card .qh-ic { width: 64px; height: 64px; border-radius: 14px; background: var(--card2); display: grid; place-items: center; flex: none; overflow: hidden; font: 400 34px 'Archivo Black', system-ui, sans-serif; border: 2px solid var(--text); }
.qh-card .qh-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qh-card b { display: block; font: 400 20px 'Archivo Black', system-ui, sans-serif; } .qh-card small { color: var(--muted); font-size: 13px; font-weight: 600; }
.qh-new { background: var(--red); color: #1d2433; border-radius: 6px; padding: 0 7px; font: 800 11px Archivo, system-ui, sans-serif; margin-left: 6px; vertical-align: middle; }

/* ── Drapeau et son cadre (quiz a plusieurs et partie solo) ── */
.flag-frame { display: inline-block; line-height: 0; width: min(260px, 70vw); max-width: 100%; position: relative; }
.flag-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--text); border-radius: 4px; background: #fff; user-select: none; -webkit-user-drag: none; }
.flag-frame[data-frame="wood"] { padding: 8px; background: linear-gradient(135deg, #c28b4f, #7b4a1d 60%, #a9703a); border-radius: 6px; box-shadow: 0 5px 10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.3); }
.flag-frame[data-frame="wood"] .flag-img { border: 1px solid #3b2410; border-radius: 2px; }
.flag-frame[data-frame="gold"] { padding: 8px; background: linear-gradient(135deg, #f6e3a1, #c9a24a 55%, #8a6a22); border-radius: 6px; box-shadow: 0 5px 10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.55); }
.flag-frame[data-frame="gold"] .flag-img { border: 1px solid #6b4f12; border-radius: 2px; }
.flag-frame[data-frame="neon"] { padding: 6px; background: #0b0b14; border-radius: 8px; box-shadow: 0 0 0 2px #00f0ff, 0 0 16px 4px #ff2bd6; }
.flag-frame[data-frame="neon"] .flag-img { border: 1px solid #000; border-radius: 3px; }
.flag-frame[data-frame="cloth"] { padding: 0; animation: flagWave 2.6s ease-in-out infinite; transform-origin: left center; }
.flag-frame[data-frame="cloth"] .flag-img { border: 0; border-radius: 3px; box-shadow: 0 6px 10px rgba(0,0,0,.45); }
.flag-frame[data-frame="cloth"]::before { content: ""; position: absolute; left: -9px; top: -10px; bottom: -22px; width: 6px; border-radius: 3px; background: linear-gradient(#ececec, #8c8c8c); }
@keyframes flagWave { 0%, 100% { transform: perspective(500px) rotateY(-5deg) skewY(0); } 50% { transform: perspective(500px) rotateY(5deg) skewY(1.5deg); } }
@media (prefers-reduced-motion: reduce) { .flag-frame[data-frame="cloth"] { animation: none; } }
#tg-question .flag-frame { margin: 4px 0; }
#tg-question .flag-frame { display: block; margin: 4px auto; }

/* Repondre a un mot */
.dm-m { transition: background .3s; }
.dm-rep { display: none; position: absolute; top: -12px; z-index: 2; border: 1.5px solid var(--text); border-radius: 8px; background: var(--card); color: var(--text); font: 700 .7rem var(--font-body); padding: 2px 8px; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.dm-m.me .dm-rep { right: 0; } .dm-m.them .dm-rep { left: 0; }
@media (hover: hover) { .dm-m:hover .dm-rep { display: inline-block; } }
.dm-pull::before { content: "\21A9"; position: absolute; left: -40px; top: 50%; margin-top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--text); background: var(--mark, #fff27a); color: #22252b; display: grid; place-items: center; font: 800 15px var(--font-body); }
.dm-quote { display: block; text-align: left; border: 0; border-left: 4px solid var(--margin, #e2485d); background: var(--card2); border-radius: 0 6px 6px 0; padding: 3px 8px; margin: 2px 0 3px; font: .82rem/1.25 var(--font-body); color: var(--muted); max-width: 100%; }
.dm-quote b { display: block; color: var(--margin, #e2485d); font-size: .72rem; }
.dm-quote span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-quote-go { cursor: pointer; width: 100%; }
.dm-m.me .dm-quote { margin-left: auto; }
.dm-hi { animation: dmHiBg 1.6s ease 1; }
@keyframes dmHiBg { 0%, 60% { background: var(--mark, #fff27a); } 100% { background: transparent; } }
.dm-replybar { display: flex; gap: 8px; align-items: center; border-top: 2px solid var(--line); padding: 6px 10px; background: var(--card2); }
.dm-replybar.hidden { display: none; }
.dm-replybar .dm-quote { flex: 1; min-width: 0; margin: 0; }
.dm-rb-x { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); color: var(--text); font: 800 16px var(--font-body); cursor: pointer; flex: none; }
@media (prefers-reduced-motion: reduce) { .dm-hi { animation: none; background: var(--mark, #fff27a); } }

/* Quiz en direct : bandeau et pastille (le reste est dans live.css) */
.lv-live { display: inline-flex; align-items: center; gap: 6px; background: var(--margin); color: #fff; border-radius: 99px; padding: 3px 10px; font: 800 11px var(--font-body); letter-spacing: .08em; }
.lv-live i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: lvPulse 1.2s infinite; }
@keyframes lvPulse { 50% { opacity: .25; transform: scale(.7); } }
.live-cta { display: flex; align-items: center; gap: 10px; width: 100%; border: 2px solid var(--line); border-radius: 12px; background: var(--mark); color: #22252b; padding: 10px 12px; font: 800 14px var(--font-body); cursor: pointer; text-align: left; margin-bottom: 10px; box-shadow: var(--elev-2); }
.live-cta .lv-live { flex: none; } .live-cta small { display: block; font-weight: 700; opacity: .8; }
.live-pill { position: fixed; right: 12px; bottom: 76px; z-index: 40; border: 2px solid var(--line); border-radius: 99px; background: var(--margin); color: #fff; padding: 8px 14px; font: 800 13px var(--font-body); cursor: pointer; box-shadow: var(--elev-3); display: none; }
.live-pill.on { display: inline-flex; align-items: center; gap: 6px; }

/* Chat entre amis : la bulle de la boutique enveloppe le mot (plus de simple ruban) */
:root:root .dm-m .dm-txt.dm-bub { display: inline-block; max-width: 100%; padding: 7px 13px 8px; border-radius: 16px 16px 16px 4px; font-family: inherit; text-align: left; box-shadow: 0 2px 0 rgba(0,0,0,.18); }
:root:root .dm-m.me .dm-txt.dm-bub { border-radius: 16px 16px 4px 16px; }

/* ══ COFFRE DU TOURNOI : notification collante, cadres de portrait, bulles exclusives ══ */
.notif-sticky { cursor: pointer; }
.notif-sticky .notif-ic { color: var(--accent); display: inline-flex; align-items: center; }
:root:root .msg-bubble.bubble-live-gold, :root:root .shop-bubble-preview.bubble-live-gold { background: linear-gradient(135deg, #fff0a8, #e0a82e) !important; color: #2b1a00 !important; border: 1.5px solid #8a5d00; }
:root:root .msg-bubble.bubble-live-silver, :root:root .shop-bubble-preview.bubble-live-silver { background: linear-gradient(135deg, #f4f8fc, #9aa7b7) !important; color: #1d2530 !important; border: 1.5px solid #5d6b7c; }
:root:root .msg-bubble.bubble-live-bronze, :root:root .shop-bubble-preview.bubble-live-bronze { background: linear-gradient(135deg, #f0c08e, #b9743a) !important; color: #2a1506 !important; border: 1.5px solid #6e3f1e; }
.lb-pt.pf-gold { box-shadow: 0 0 0 2px #e0a82e, 0 0 0 3px rgba(0,0,0,.45), 0 0 7px 1px rgba(224,168,46,.75); }
.lb-pt.pf-silver { box-shadow: 0 0 0 2px #cfd8e3, 0 0 0 3px rgba(0,0,0,.45); }
.lb-pt.pf-bronze { box-shadow: 0 0 0 2px #c8803f, 0 0 0 3px rgba(0,0,0,.45); }
.lb-pt.pf-finalist { box-shadow: 0 0 0 2px #b69af0, 0 0 0 3px rgba(0,0,0,.45), 0 0 6px 1px rgba(182,154,240,.7); }
.lb-pt.pf-semi { box-shadow: 0 0 0 2px #8fd3f2, 0 0 0 3px rgba(0,0,0,.45); }
.lb-pt.pf-big { width: 54px; height: 54px; }
:root:root .pid-avatar.pf-gold { box-shadow: 0 0 0 4px #e0a82e, 0 0 0 6px rgba(0,0,0,.4), 0 0 14px 3px rgba(224,168,46,.75); }
:root:root .pid-avatar.pf-silver { box-shadow: 0 0 0 4px #cfd8e3, 0 0 0 6px rgba(0,0,0,.4); }
:root:root .pid-avatar.pf-bronze { box-shadow: 0 0 0 4px #c8803f, 0 0 0 6px rgba(0,0,0,.4); }
:root:root .pid-avatar.pf-finalist { box-shadow: 0 0 0 4px #b69af0, 0 0 0 6px rgba(0,0,0,.4), 0 0 12px 2px rgba(182,154,240,.7); }
:root:root .pid-avatar.pf-semi { box-shadow: 0 0 0 4px #8fd3f2, 0 0 0 6px rgba(0,0,0,.4); }

/* Accueil : compte a rebours du Quiz en direct, bouton d'entree une fois la salle ouverte */
.live-home { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--mark); color: #22252b; padding: 10px 12px; margin: 6px 0 10px; }
.live-home[hidden], .live-home .lh-go[hidden] { display: none; }
.lh-top { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; }
.lh-title { font: 800 .95rem var(--font-body); }
.lh-cd { flex: 1 1 140px; font: 700 1.35rem var(--font-hand); font-variant-numeric: tabular-nums; }
.lh-go { border: 2px solid #22252b; border-radius: 99px; background: var(--margin); color: #fff; padding: 8px 18px; font: 800 .95rem var(--font-body); cursor: pointer; }

/* Undercover : pas de robot, de mise ni de defi a deux ; les boutons flottants s'effacent pendant la partie */
#home-who.is-uc .stake-row, #home-who.is-uc #step-stake, #home-who.is-uc #btn-challenge-friend, #home-who.is-uc #who-bot { display: none; }
body.screen-undercover-active .btn-help-float, body.screen-undercover-active .btn-comment-float, body.screen-undercover-active .btn-chatbot-float, body.screen-undercover-active .chatbot-panel, body.screen-undercover-active #live-pill { display: none !important; }

/* Choix du jeu sur telephone : une ligne qui defile, environ 4 jeux visibles, noms lisibles */
@media (max-width: 640px) {
  .game-selector { overflow-x: auto; scroll-snap-type: x proximity; gap: 8px; padding: 4px 2px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .game-selector::-webkit-scrollbar { display: none; }
  :root:root .game-selector .game-btn { flex: 0 0 calc((100% - 24px) / 4.3); min-width: 0; scroll-snap-align: start; padding: 6px 3px 8px; }
  .game-selector .game-btn-name { font-size: .66rem; line-height: 1.15; text-align: center; }
}

/* ══ Ludo : plateau mobile d'abord (dessin SVG), salon et fin de partie ══ */
.game-screen.ludo-game .player-badge { display: none; }
.ldo-wrap { display: flex; flex-direction: column; gap: 8px; width: min(100%, 520px); margin: 0 auto; padding: 2px 6px 12px; }
.ldo-tray { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ldo-tray[data-n="1"] { display: flex; }
.ldo-tray[data-n="1"] .ldo-seat { flex: 0 1 62%; }
.ldo-tray[data-n="1"]:has(.ldo-seat[data-role="Y"]) { justify-content: flex-end; }
.ldo-seat { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border: 2px solid var(--c); border-radius: 12px; background: var(--card); box-shadow: 0 3px 0 var(--hard); transition: box-shadow .25s, opacity .25s, transform .25s; }
.ldo-seat.turn { box-shadow: 0 0 0 3px var(--mark), 0 3px 0 var(--hard); transform: translateY(-1px); }
.ldo-seat.out { opacity: .4; filter: grayscale(1); }
.ldo-seat.away { opacity: .65; }
.ldo-pf { position: relative; display: block; width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--c); overflow: hidden; background: #fff; flex: none; }
.ldo-pf svg { display: block; width: 100%; height: 100%; }
.ldo-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ldo-nm { font-weight: 800; font-size: .8rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.ldo-st { font-size: .66rem; color: var(--muted); font-weight: 700; min-height: .9em; }
.ldo-die { width: 40px; height: 40px; flex: none; padding: 5px; border-radius: 9px; border: 2px solid #22252b; background: #fff; color: #22252b; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1px; cursor: default; position: relative; }
.ldo-face { display: contents; }
.ldo-die i { border-radius: 50%; display: block; }
.ldo-die i.p { background: currentColor; }
.ldo-q { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; place-items: center; font-weight: 800; opacity: .4; }
.ldo-die.can-roll { cursor: pointer; animation: ldoCan 1s ease-in-out infinite; }
.ldo-die.rolling { animation: ldoRoll .65s ease-in-out; }
@keyframes ldoCan { 50% { transform: scale(1.14); } }
@keyframes ldoRoll { 0% { transform: rotate(0) scale(1); } 35% { transform: rotate(200deg) scale(1.35); } 70% { transform: rotate(340deg) scale(.9); } 100% { transform: rotate(360deg) scale(1); } }
.ldo-board { width: 100%; aspect-ratio: 1; display: block; touch-action: manipulation; }
.ldo-pawn { transition: transform .13s linear; cursor: default; }
.ldo-pawn .ldo-ring { fill: none; stroke: var(--text); stroke-width: 2.4; opacity: 0; transform-box: fill-box; }
.ldo-pawn.can { cursor: pointer; }
.ldo-pawn.can .ldo-ring { opacity: 1; animation: ldoRing .9s ease-in-out infinite; }
@keyframes ldoRing { 50% { opacity: .35; stroke-width: 4; } }
.ldo-dest { cursor: pointer; }
.ldo-bar { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 44px; }
.ldo-bar .btn { width: 100%; }
.ldo-bar .btn:disabled { opacity: .45; }
.ldo-bar .btn.pulse { animation: ldoCan 1.2s ease-in-out infinite; }
.ldo-msg { min-height: 1.4em; text-align: center; font-family: var(--font-hand); font-size: 1.35rem; line-height: 1.05; color: var(--text); }
.ldo-msg.mine { color: var(--accent); }
.ldo-msg.flash { color: var(--margin); }
.ldo-auto { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.ldo-end { display: flex; flex-direction: column; gap: 8px; }
.ldo-end.hidden { display: none; }
.ldo-stamp { align-self: center; border: 3px solid var(--margin); color: var(--margin); font-family: var(--font-display, 'Archivo Black', sans-serif); padding: 3px 16px; transform: rotate(-4deg); border-radius: 6px; font-size: 1.1rem; }
.ldo-stamp.win { border-color: #1f8a54; color: #1f8a54; }
.ldo-rk { display: flex; align-items: center; gap: 8px; border: 2px solid var(--c); border-radius: 10px; background: var(--card); padding: 6px 8px; box-shadow: 0 2px 0 var(--hard); }
.ldo-rk .ldo-n { font-family: var(--font-display, 'Archivo Black', sans-serif); font-size: 1.1rem; width: 22px; text-align: center; }
.ldo-rk .ldo-pf { width: 34px; height: 34px; }
.ldo-rn { flex: 1; font-weight: 800; font-size: .85rem; }
.ldo-rn small { color: var(--muted); font-weight: 700; }
.ldo-pips { display: flex; gap: 3px; }
.ldo-pips i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--text); background: var(--c); display: block; }
.ldo-pips i.o { background: transparent; opacity: .45; }
.ldo-stt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ldo-stt div { border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); text-align: center; padding: 5px 2px; font-size: .7rem; color: var(--muted); font-weight: 700; }
.ldo-stt b { display: block; font: 700 1.4rem var(--font-hand); color: var(--text); line-height: 1; }
.ldo-note { text-align: center; font-size: .8rem; color: var(--muted); margin: 0; }
/* Salon : places colorees et regles de la partie */
.ldo-seatgrid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; width: min(100%, 420px) !important; }
.ldo-sc { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 100px; padding: 8px; text-align: center; border: 2.5px solid var(--c); border-radius: 12px; background: var(--card); box-shadow: 0 3px 0 var(--hard); }
.ldo-sc .ldo-pf { width: 44px; height: 44px; }
.ldo-sc b { font-size: .84rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ldo-sc small { color: var(--muted); font-size: .7rem; font-weight: 700; }
.ldo-sc .ldo-dot { position: absolute; top: 7px; left: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.ldo-sc.free { border-style: dashed; opacity: .7; }
.ldo-sc.free b { color: var(--muted); font-weight: 600; }
.ldo-sc.away { opacity: .6; }
.ldo-rules { width: min(100%, 420px); margin: 10px auto 4px; text-align: left; }
.ldo-rules.hidden { display: none; }
.ldo-step { font-family: var(--font-hand); font-size: 1.4rem; color: var(--margin); line-height: 1; margin-bottom: 4px; }
.ldo-step b { font-family: var(--font-display, 'Archivo Black', sans-serif); font-weight: 400; font-size: .8rem; color: var(--text); }
.ldo-rl { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px; border-bottom: 1.5px dashed var(--line); font-size: .86rem; font-weight: 700; }
.ldo-rl small { display: block; color: var(--muted); font-weight: 600; font-size: .72rem; }
.ldo-tg { position: relative; flex: none; width: 44px; height: 24px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; padding: 0; }
.ldo-tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--text); transition: transform .2s; }
.ldo-tg.on { background: var(--accent); }
.ldo-tg.on::after { transform: translateX(20px); background: #fff; }
.ldo-tg:disabled { opacity: .6; cursor: default; }
@media (min-width: 1024px) { .ldo-wrap { width: min(100%, 560px); } }

/* Carte « Quiz mixte » du hub : l'icone est coupee en deux, point d'interrogation et drapeau. */
.qh-ic.qh-ic-mix { position: relative; overflow: hidden; }
.qh-ic-mix img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.qh-ic-mix i { position: absolute; left: 9px; top: 4px; font-style: normal; font-weight: 900; font-size: 1.5rem; }

/* ══ PORTRAIT OBLIGATOIRE (carnet d'accueil + rappel) ══ */
#overlay-portrait { z-index: 300; }
#overlay-pfp { z-index: 250; }
.onb-pf-av { width: 120px; height: 120px; margin: 8px auto; border: 2px solid #22252b; border-radius: 8px; overflow: hidden; background: #fdfdf9; }
.onb-pf-av svg { width: 100%; height: 100%; display: block; }
#onb-nextf[disabled] { opacity: .45; cursor: not-allowed; }
#pfp-av svg { width: 100%; height: 100%; display: block; }

/* ══ PASSAGE DE NIVEAU : combo barre + flash + compteur + pieces ══ */
.lu-combo { position: relative; width: min(340px, 90vw); height: 300px; display: grid; justify-items: center; align-content: center; gap: 8px; animation: luShake .5s ease-in-out 1.2s both; }
.lu-art { display: none; }
.lu-show.art .lu-combo { display: none; }
.lu-show.art .lu-art { display: grid; justify-items: center; }
.lu-odo { height: 110px; overflow: hidden; font: 400 6rem/110px var(--font-display); color: #fff27a; text-shadow: 0 4px 0 rgba(0,0,0,.4); }
.lu-odo > div { animation: luOdo .5s cubic-bezier(.5,0,.2,1) 1.35s both; }
.lu-odo span { display: block; height: 110px; text-align: center; }
@keyframes luOdo { to { transform: translateY(-110px); } }
.lu-tx { font: 700 1.5rem var(--font-hand); color: #fff; letter-spacing: .04em; opacity: 0; animation: luPop .4s ease-out 1.6s both; }
@keyframes luPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.lu-bar { width: 80%; height: 16px; border: 3px solid #fff; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.15); }
.lu-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffe169, #ff9ec7); animation: luFill 1.2s ease-out both; }
@keyframes luFill { to { width: 100%; } }
.lu-flash { position: absolute; inset: -40vh -40vw; background: #fff; opacity: 0; pointer-events: none; animation: luFlash .5s ease-out 1.2s both; }
@keyframes luFlash { 0% { opacity: 0; } 20% { opacity: .9; } 100% { opacity: 0; } }
@keyframes luShake { 0%,100% { transform: none; } 20% { transform: translate(-8px, 4px); } 40% { transform: translate(7px, -5px); } 60% { transform: translate(-5px, -3px); } 80% { transform: translate(4px, 3px); } }
.lu-ring { position: absolute; left: 50%; top: 40%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border: 4px solid #ffe169; border-radius: 50%; opacity: 0; animation: luRing .9s ease-out 1.2s both; }
.lu-ring.r2 { animation-delay: 1.4s; border-color: #fff; }
@keyframes luRing { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(6); } }
.lu-bolt { position: absolute; top: 4%; width: 6px; height: 120px; background: linear-gradient(#fff, #ffe169); clip-path: polygon(50% 0, 100% 40%, 60% 40%, 100% 100%, 0 50%, 45% 50%); opacity: 0; animation: luBolt .5s ease-out 1.2s both; }
.lu-bolt.b1 { left: 22%; transform: rotate(-20deg); } .lu-bolt.b2 { right: 22%; transform: rotate(20deg); }
@keyframes luBolt { 0% { opacity: 0; scale: .3; } 30% { opacity: 1; scale: 1.4; } 100% { opacity: 0; scale: 1; } }
.lu-coin { position: absolute; top: -20px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6b0, #e0a800); border: 2px solid #8a6a00; opacity: 0; animation: luCoin 1.3s ease-in both; }
@keyframes luCoin { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 1; transform: translateY(330px) rotate(540deg); } }
.lu-combo.calm * { animation-duration: .01s !important; animation-delay: 0s !important; }

/* Cadres du tournoi, edition 2 */
.lb-pt.pf-2gold { box-shadow: 0 0 0 2px #ffd34d, 0 0 0 4px #22252b, 0 0 0 5px #ffd34d, 0 0 9px 2px rgba(255,211,77,.75); }
:root:root .pid-avatar.pf-2gold { box-shadow: 0 0 0 4px #ffd34d, 0 0 0 6px #22252b, 0 0 0 8px #ffd34d, 0 0 9px 4px rgba(255,211,77,.75); }
.lb-pt.pf-2silver { box-shadow: 0 0 0 2px #dfe6ee, 0 0 0 3px #22252b, 0 0 0 5px #aab6c4; }
:root:root .pid-avatar.pf-2silver { box-shadow: 0 0 0 4px #dfe6ee, 0 0 0 6px #22252b, 0 0 0 8px #aab6c4; }
.lb-pt.pf-2bronze { box-shadow: 0 0 0 2px #d58a4a, 0 0 0 3px #22252b, 0 0 0 5px #d58a4a; }
:root:root .pid-avatar.pf-2bronze { box-shadow: 0 0 0 4px #d58a4a, 0 0 0 6px #22252b, 0 0 0 8px #d58a4a; }
.lb-pt.pf-2finalist { box-shadow: 0 0 0 2px #b69af0, 0 0 0 3px #22252b, 0 0 8px 2px rgba(182,154,240,.7); }
:root:root .pid-avatar.pf-2finalist { box-shadow: 0 0 0 4px #b69af0, 0 0 0 6px #22252b, 0 0 8px 4px rgba(182,154,240,.7); }
.lb-pt.pf-2semi { box-shadow: 0 0 0 2px #8fd3f2, 0 0 0 3px #22252b, 0 0 0 5px #8fd3f2; }
:root:root .pid-avatar.pf-2semi { box-shadow: 0 0 0 4px #8fd3f2, 0 0 0 6px #22252b, 0 0 0 8px #8fd3f2; }
@keyframes pf2pulse { 50% { filter: brightness(1.25); } }
.lb-pt.pf-2gold, :root:root .pid-avatar.pf-2gold { animation: pf2pulse 2s ease-in-out infinite; }