/* ============================================================================
   bffr.fr/raid - SYSTÈME DE DESIGN des raids (refonte du 2026-09-26)
   ----------------------------------------------------------------------------
   Une seule feuille commune à TOUTES les pages du jeu, chargée par shell()
   (routes_raid_game.mjs) juste après raid_game.css et AVANT la CSS de la page :
     raid_game.css (socle historique) -> raids/ds.css (ici) -> raid_chat.css
     -> CSS de la page (raid_<page>.css, raids/<page>.css) -> site_menu.css
   Elle remplace l'ancien raidnew_skin.css (variables violettes + nav mobile).

   RÈGLES POUR QUI MODIFIE :
   - Couleurs : UNIQUEMENT via les variables ci-dessous. Les valeurs hexadécimales
     sont les couleurs "canoniques" que le moteur de thèmes (scripts/raid_custom.js,
     table SOURCES) sait re-teinter : une nouvelle teinte en dur = un thème joueur
     qui ne la suit pas. Ajoute-la à SOURCES si tu en crées une.
   - Les règles de base sont en :where() (spécificité nulle) : la CSS d'une page
     gagne toujours sans !important.
   - Mobile d'abord pour ce qui est positionné : sur téléphone, AUCUN menu ou
     panneau en position fixed/absolute dans le header (cf. mémoire nav mobile
     2026-07-29 : seuls les éléments dans le flux marchent sur les vrais téléphones).
   - Pas d'animation infinie décorative, pas de backdrop-filter sur mobile,
     pas d'ombre/filtre lourd sur un élément répété des centaines de fois.
   ============================================================================ */

/* ── 1. Jetons ─────────────────────────────────────────────────────────────── */
:root, body.raidnew {
  --bg: #070709;          /* fond de page */
  --bg2: #0e0e14;         /* creux : champs, puits, pistes de barres */
  --card: #101019;        /* surface de carte */
  --card2: #16161f;       /* surface levée / survol */
  --line: #20202a;        /* bordure fine */
  --line2: #2c2c39;       /* bordure visible */
  --txt: #f2f2f6;         /* texte fort */
  --txt2: #cdd2e0;        /* texte courant */
  --mut: #9c9cab;         /* texte secondaire */
  --dim: #7e7e8b;         /* texte discret (indications) : 5:1 sur --bg, 4,7:1 sur --card (avant #6b6b7a, 3,8:1) */
  --scrim: rgba(4, 4, 7, .72);   /* voile sous les fenêtres (sombre dans tous les thèmes) */
  --on-art: rgba(7, 7, 9, .55);  /* fond d'une pastille posée sur une illustration (teinte canonique, suit le thème) */
  --accent: #a78bff;      /* accent unique (violet BFFR) */
  --accent2: #c3b0ff;     /* accent clair (texte sur fond sombre) */
  --accent-dim: rgba(167, 139, 255, .12);
  --accent-line: rgba(167, 139, 255, .38);
  --accent-rgb: 167, 139, 255;   /* forme rgb de l'accent : le tiroir du menu du site (site_menu.css) l'utilise, sinon halo orange d'Halloween */
  --on-accent: #0b0b10;
  --ok: #3be08a; --bad: #ff7676; --warn: #ffb020;
  --ok-dim: rgba(59, 224, 138, .12); --ok-line: rgba(59, 224, 138, .4);
  --bad-dim: rgba(255, 118, 118, .12); --bad-line: rgba(255, 118, 118, .42);
  --warn-dim: rgba(255, 176, 32, .12); --warn-line: rgba(255, 176, 32, .42);
  --commun: #9aa0a6; --rare: #3da5ff; --epique: #9b5cff; --legendaire: #ffb020; --mythique: #ff5c8a; --secret: #ff4dff;
  --rare-dim: rgba(61, 165, 255, .12); --rare-line: rgba(61, 165, 255, .4);
  --fire: #ff7a45; --fire-dim: rgba(255, 122, 69, .12); --fire-line: rgba(255, 122, 69, .45);   /* feu de l'éveil (familiers, fiche joueur) : information, hors thème */
  --veil: var(--scrim);   /* alias demandé par la Tour et la Guerre */
  /* médailles du podium (information : elles gardent leurs teintes, hors thème) */
  --medal-or: #f4c542; --medal-or-dim: rgba(244, 197, 66, .14); --medal-or-line: rgba(244, 197, 66, .45);
  --medal-ar: #c9d1dc; --medal-ar-dim: rgba(201, 209, 220, .12); --medal-ar-line: rgba(201, 209, 220, .4);
  --on-medal: #1c1405;   /* texte posé sur une médaille */
  --medal-br: #d98a4e; --medal-br-dim: rgba(217, 138, 78, .13); --medal-br-line: rgba(217, 138, 78, .42);

  --r-s: 10px; --r-m: 14px; --r-l: 18px; --r-xl: 24px;
  --gap: 14px;
  --maxw: 1240px; --maxw-wide: 1640px;
  --head-h: 60px;
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Archivo', system-ui, sans-serif;   /* titres : Archivo 800 (il n'existe pas de famille « Archivo Expanded » hébergée) */
  --shadow-pop: 0 24px 60px -24px rgba(0, 0, 0, .8);
  --hl: inset 0 1px 0 rgba(255, 255, 255, .035);   /* liseré de lumière en haut des surfaces */
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ── 2. Base ───────────────────────────────────────────────────────────────── */
/* body.raidnew (et non :where) : doit battre le `body{font;background...fixed}` de raid_game.css. */
body.raidnew {
  margin: 0; min-height: 100vh;
  font: 15px/1.55 var(--font);
  color: var(--txt2);
  background: var(--bg); background-attachment: scroll;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Lueurs d'ambiance : couche FIXE composée une seule fois (l'ancien background-attachment:fixed
   repeignait tout l'écran à chaque frame de défilement). */
body.raidnew::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 480px at 88% -6%, rgba(167, 139, 255, .13), transparent 60%),
    radial-gradient(760px 420px at 2% -2%, rgba(61, 165, 255, .05), transparent 60%),
    var(--bg);
}
:where(body.raidnew) h1, :where(body.raidnew) h2, :where(body.raidnew) h3, :where(body.raidnew) h4 {
  color: var(--txt); line-height: 1.18; letter-spacing: -.012em; font-weight: 750; margin: 0;
}
:where(body.raidnew) h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em; }
:where(body.raidnew) a { color: var(--accent2); text-decoration: none; }
:where(body.raidnew) a:hover { text-decoration: none; color: var(--txt); }
:where(body.raidnew) b, :where(body.raidnew) strong { color: var(--txt); font-weight: 700; }
:where(body.raidnew) img { max-width: 100%; }
:where(body.raidnew) ::selection { background: rgba(167, 139, 255, .35); color: #fff; }
:where(body.raidnew) :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
body.raidnew .rgg { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--accent2); filter: none; }
html:has(body.raidnew) { scrollbar-color: #2b2b38 transparent; scroll-padding-top: 76px; }
body.raidnew ::-webkit-scrollbar-thumb { background: #2b2b38; border-color: var(--bg); }

/* ── 3. Mise en page ───────────────────────────────────────────────────────── */
/* position:relative SANS z-index : pas de contexte d'empilement, donc une fenêtre ou une barre fixe
   rendue dans la page peut passer au-dessus de l'en-tête (40) et du bouton du chat (1400). */
body.raidnew .rgmain {
  position: relative;
  max-width: var(--maxw); margin: 0 auto;
  padding: 26px clamp(14px, 3vw, 32px) 72px;
  /* backwards (et non both) : une fois l'animation finie, AUCUNE transformation ne reste sur .rgmain, qui n'est donc
     pas un bloc conteneur pour les éléments fixed de la page (charte §4.3) ; rendu identique. */
  animation: rgx-in .38s var(--ease) backwards;
}
body.raidnew .rgmain.is-wide { max-width: var(--maxw-wide); }
@keyframes rgx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Ancien conteneur étroit des sections du profil/classement : on aligne tout sur la page. */
body.raidnew .rgsec { max-width: none; margin: 30px 0 0; }
body.raidnew .rglb { max-width: none; }

/* ── 4. En-tête (PC) ───────────────────────────────────────────────────────── */
body.raidnew .rghead {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  min-height: var(--head-h); padding: 8px clamp(14px, 2.4vw, 28px);
  background: rgba(7, 7, 9, .86);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
/* Le hamburger du menu global du site (#navToggle, fixed en haut à droite) : on lui laisse sa place,
   et on le centre sur la hauteur de l'en-tête (le style du site le posait à 22 px du haut : il débordait
   sous la bordure). Même marge droite que l'en-tête : 28 + 46 + 8 = 82 px réservés. */
body.raidnew.has-site-menu .rghead { padding-right: 82px; }
body.raidnew.has-site-menu .navtoggle:not(.open) { top: calc((var(--head-h) - 46px) / 2); right: clamp(14px, 2.4vw, 28px); }
/* Menu global du site sur les pages du jeu : boutons et recherche dans la police du site (pas Arial / Times). */
body.raidnew .navtoggle, body.raidnew .navmenu button, body.raidnew .navmenu input { font-family: inherit; }
/* Tiroir du menu du site ouvert (site_menu.css le pose à 125) : AU-DESSUS du bouton du chat (1400) et de la
   palette (140), qui masquaient ses entrées, et sous les fenêtres (1500) et les notifications (1600). */
body.raidnew .navmenu { z-index: 1450; }
body.raidnew .rgbrand {
  display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
  color: var(--txt); font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em;
  padding: 4px 8px 4px 2px; border-radius: 12px; white-space: nowrap;
}
body.raidnew .rgbrand:hover { color: var(--txt); background: rgba(255, 255, 255, .03); }
body.raidnew .rgbrand-logo { width: 32px; height: 32px; object-fit: contain; flex: 0 0 32px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
body.raidnew .rgbrand svg { display: none; }
body.raidnew .rgbrand span, body.raidnew .rgbrand-s { color: var(--accent); }
body.raidnew .rgbrand-t { color: var(--txt) !important; }

body.raidnew .rgnav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; margin-left: 6px; }
body.raidnew .rgn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px; border-radius: 11px;
  color: var(--mut); font-weight: 600; font-size: .9rem; white-space: nowrap;
  border: 1px solid transparent; background: transparent; box-shadow: none;
  transition: color .15s, background-color .15s, border-color .15s;
}
body.raidnew .rgn:hover { color: var(--txt); background: rgba(255, 255, 255, .045); text-decoration: none; }
body.raidnew .rgn.active, body.raidnew .rgnav-grp.has-active > .rgnav-trig { color: var(--txt); background: var(--accent-dim); border-color: transparent; box-shadow: inset 0 -2px 0 var(--accent); }
body.raidnew .rgn-ic { width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; }
body.raidnew .rgn-emo { width: 22px; height: 22px; flex: 0 0 22px; font-size: 16px; }
body.raidnew .rgnav-gic { margin-right: 0; }
body.raidnew .rgnav-gimg { width: 22px; height: 22px; vertical-align: middle; }
body.raidnew .rgnav-car { width: 12px; height: 12px; opacity: .55; }
body.raidnew .rgnav-grp[open] > .rgnav-trig { color: var(--txt); background: rgba(255, 255, 255, .06); }
body.raidnew .rgnav-myguild { margin-left: auto; }

/* Méga-menu déroulant (PC seulement : caché sous 900px, remplacé par .rgmnav) */
body.raidnew .rgnav-menu {
  top: calc(100% + 10px); left: 0; z-index: 50;
  min-width: 300px; max-width: min(560px, calc(100vw - 24px));
  padding: 8px; gap: 2px;
  background: #101019; border: 1px solid var(--line2); border-radius: var(--r-l);
  box-shadow: var(--shadow-pop), var(--hl);
  animation: rgx-pop .16s var(--ease);
}
@keyframes rgx-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
body.raidnew .rgnav-menu.is-cols { display: grid; grid-template-columns: 1fr 1fr; min-width: min(520px, calc(100vw - 24px)); }
body.raidnew details.rgnav-grp:last-of-type .rgnav-menu { left: auto; right: 0; }
body.raidnew .rgnav-menu.is-cols .rgnm-head { grid-column: 1 / -1; }
body.raidnew .rgnm-head { padding: 6px 10px 10px; margin-bottom: 4px; font-size: .72rem; letter-spacing: .14em; color: var(--mut); border-bottom: 1px solid var(--line); }
body.raidnew .rgnm-item { gap: 12px; padding: 9px 10px; border-radius: 12px; border: 1px solid transparent; color: var(--txt); }
body.raidnew .rgnm-item:hover { background: var(--card2); }
body.raidnew .rgnm-item.active { background: var(--accent-dim); border-color: transparent; }
body.raidnew .rgnm-item.active .rgnm-lbl { color: var(--accent2); }
body.raidnew .rgnm-item .rgn-ic, body.raidnew .rgnm-item .rgn-emo { width: 30px; height: 30px; flex: 0 0 30px; }
/* Entrée sans icône illustrée (émoji de repli, ex. Chambre AFK) : même encombrement que les icônes de 30 px. */
body.raidnew .rgnm-item .rgn-emo { font-size: 24px; }
body.raidnew .rgnm-lbl { font-size: .92rem; font-weight: 650; }
body.raidnew .rgnm-desc { font-size: .75rem; color: var(--mut); line-height: 1.3; }

/* Pastille du joueur connecté */
body.raidnew .rghead-end { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: 4px; }
body.raidnew .rgme {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 4px;
  border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--txt); font-weight: 600; font-size: .86rem;
}
body.raidnew .rgme:hover { border-color: var(--line2); color: var(--txt); }
body.raidnew .rgme img { width: 32px; height: 32px; border-radius: 50%; border: 0; }
body.raidnew .rgme span { max-width: 130px; }
body.raidnew .rglogin { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: .86rem; }
body.raidnew .rglogin:hover { color: var(--on-accent); background: var(--accent2); }

/* ── 5. Menu du jeu sur téléphone (dans le flux, une seule ligne repliée) ──── */
body.raidnew .rgmnav { display: none; }
body.raidnew .rgmnav > summary { list-style: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
body.raidnew .rgmnav > summary::-webkit-details-marker { display: none; }

/* ── 6. Bandeau de page (hero) ─────────────────────────────────────────────── */
/* Toutes les pages ouvrent sur <section class="rghero"> (titre + intro). Le shell pose
   --rg-art (illustration de la page) et --rg-kicker (rubrique) sur .rgmain : sans rien
   changer au HTML des pages, chaque bandeau devient un panneau illustré. */
body.raidnew .rghero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  min-height: 228px; margin: 0 0 22px; padding: 30px clamp(20px, 3.4vw, 40px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--hl);
}
body.raidnew .rghero::before {   /* l'illustration, fondue vers la gauche */
  content: ""; position: absolute; inset: 0 0 0 auto; width: min(64%, 780px); z-index: -2;
  background: var(--rg-art, none) center right / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  opacity: .92;
}
body.raidnew .rghero::after {    /* voile de lisibilité + rubrique en surtitre */
  content: var(--rg-kicker, none);
  position: absolute; left: clamp(20px, 3.4vw, 40px); top: 22px; z-index: 1;
  font: 700 .75rem/1 var(--font); letter-spacing: .15em; text-transform: uppercase; color: var(--accent2);
}
body.raidnew .rgmain:not([style*="--rg-art"]) .rghero::before { display: none; }
body.raidnew .rgmain[style*="--rg-kicker"] .rghero { padding-top: 46px; }
body.raidnew .rghero > * { position: relative; z-index: 1; max-width: 640px; }
body.raidnew .rghero h1 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.028em;
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.7rem); line-height: 1.05; margin: 0;
  color: var(--txt); text-shadow: 0 2px 24px rgba(7, 7, 9, .6);
}
body.raidnew .rghero h1 .rgsec-ic { display: none; }   /* l'illustration remplace l'émoji de titre */
body.raidnew .rghero p { margin: 0; color: var(--txt2); font-size: 1rem; line-height: 1.6; max-width: 560px; text-shadow: 0 1px 12px rgba(7, 7, 9, .7); }
body.raidnew .rghero .rgbtn { margin-top: 6px; align-self: flex-start; }
body.raidnew .rgempty .rgbtn, body.raidnew .rgempty-state .rgbtn, body.raidnew .rgempty-card .rgbtn { margin-top: 10px; }
body.raidnew .rghero.is-full > * { max-width: none; }
/* Écrans de jeu : bandeau masqué (combat en cours) ou réduit au titre et aux chiffres. */
body.raidnew .rghero.is-hidden, body.raidnew .rghero[hidden] { display: none; }
body.raidnew .rghero.is-bare { min-height: 0; padding-top: 20px; padding-bottom: 18px; }
body.raidnew .rghero.is-bare > p { display: none; }
/* .is-compact-m : intro masquée sur téléphone (le titre et les chiffres suffisent). */
/* Sélecteur renforcé : doit battre le line-clamp de .rghero.is-compact p (bloc 480 px, plus bas) quand les deux classes sont posées. */
@media (max-width: 560px) { body.raidnew .rgmain .rghero.is-compact-m > p { display: none; } }
/* Sur un bandeau sans illustration (état vide, erreur), on reste sobre et compact. */
body.raidnew .rgmain:not([style*="--rg-art"]) .rghero { min-height: 0; }

/* Variante compacte (écrans de jeu : boss, arène, tour...) : le jeu reste au-dessus de la ligne de flottaison. */
body.raidnew .rghero.is-compact { min-height: 148px; padding-top: 26px; padding-bottom: 22px; }
body.raidnew .rghero.is-compact h1 { font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.1rem); }
body.raidnew .rghero.is-compact p { font-size: .93rem; }

/* Barre de chiffres optionnelle sous le titre d'un bandeau */
body.raidnew .rgx-herostats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
body.raidnew .rghero > .rgx-herostats { max-width: 760px; }
body.raidnew .rgx-herostat { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--on-art); border: 1px solid var(--line2); font-size: .82rem; color: var(--mut); }
body.raidnew .rgx-herostat b { display: inline-flex; align-items: center; gap: 4px; color: var(--txt); font-variant-numeric: tabular-nums; font-size: .95rem; line-height: 1; }
body.raidnew .rgx-herostat b img { width: 1.1em; height: 1.1em; object-fit: contain; margin: 0; }
body.raidnew .rgx-herostat.is-ok b { color: var(--ok); }
body.raidnew .rgx-herostat.is-wait b { color: var(--warn); }
body.raidnew .rgx-herostat.is-bad b { color: var(--bad); }
body.raidnew .rgx-herostat.is-accent b { color: var(--accent2); }

/* ── 7. Titres de section ──────────────────────────────────────────────────── */
body.raidnew .rgsec > h2, body.raidnew .rgx-h2 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 1.12rem; font-weight: 750; color: var(--txt);
}
body.raidnew .rgsec > h2::after, body.raidnew .rgx-h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line2), transparent); margin-left: 6px; }
body.raidnew .rgsec-ic { margin-right: 0; }
body.raidnew .rgsec > h2 .re, body.raidnew .rgx-h2 .re { width: 1.25em; height: 1.25em; }
/* Titre dans un en-tête en ligne (titre + actions ou barre) : il prend la place libre, le filet va jusqu'aux voisins. */
body.raidnew .rgx-h2.is-row { margin: 0; flex: 1 1 auto; min-width: 0; }
body.raidnew .rghub-h { color: var(--mut); letter-spacing: .14em; font-size: .72rem; }

/* ── 8. Boutons ────────────────────────────────────────────────────────────── */
body.raidnew .rgbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px; margin-top: 0;
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  font: 700 .92rem/1 var(--font); letter-spacing: -.005em;
  box-shadow: 0 8px 22px -12px rgba(167, 139, 255, .55);
  transition: transform .12s var(--ease), filter .15s, box-shadow .15s;
}
body.raidnew .rgbtn:hover { filter: brightness(1.08); color: var(--on-accent); text-decoration: none; }
body.raidnew .rgbtn:active { transform: translateY(1px); }
body.raidnew .rgbtn:disabled, body.raidnew .rgbtn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; }
body.raidnew .rgbtn.ghost, body.raidnew .rgbtn-ghost { background: var(--card2); color: var(--txt); border: 1px solid var(--line2); box-shadow: none; }
body.raidnew .rgbtn.ghost:hover, body.raidnew .rgbtn-ghost:hover { border-color: var(--accent-line); color: var(--txt); filter: none; }

body.raidnew .rgmini {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 12px; border-radius: var(--r-s);
  background: var(--card2); border: 1px solid var(--line2); color: var(--txt);
  font: 600 .82rem/1.1 var(--font); cursor: pointer;
  transition: border-color .13s, color .13s, background-color .13s;
}
body.raidnew .rgmini:hover { border-color: var(--accent-line); color: var(--accent2); background: var(--card2); }
body.raidnew .rgmini.active { border-color: var(--accent); color: var(--accent2); background: var(--accent-dim); }
body.raidnew .rgmini.danger:hover { border-color: rgba(255, 118, 118, .6); color: var(--bad); }
body.raidnew .rgmini:disabled { opacity: .45; cursor: not-allowed; }
body.raidnew .rgmini.ghost { background: transparent; }
body.raidnew .rgwk { border-radius: 999px; padding: 5px 11px; border-color: var(--line2); }
body.raidnew .rgwk:hover { background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent2); }

/* ── 9. Champs ─────────────────────────────────────────────────────────────── */
/* Spécificité volontairement BASSE (:where) : une page qui pose sa loupe (padding-left) ou sa propre
   taille gagne sans surenchère de sélecteurs. Les fenêtres (.rgd-modal, enfants de body) en profitent aussi. */
:where(body.raidnew .rgmain, body.raidnew .rgd-modal) :is(input[type="search"], input[type="text"], input[type="number"], input:not([type]), select, textarea),
:where(body.raidnew) .rgx-field {
  min-height: 40px; background: var(--bg2); border: 1px solid var(--line2); color: var(--txt);
  border-radius: 11px; padding: 0 12px; font: 500 .9rem var(--font);
  transition: border-color .15s, box-shadow .15s;
}
body.raidnew .rginv-tools .rgf-q, body.raidnew .rginv-tools .rgf-sel { min-height: 40px; border-radius: 11px; font: 500 .9rem var(--font); }
:where(body.raidnew .rgmain, body.raidnew .rgd-modal) textarea { padding: 10px 12px; min-height: 80px; }
:where(body.raidnew .rgmain, body.raidnew .rgd-modal) select { padding-right: 30px; cursor: pointer; }
/* Liste déroulante : apparence native retirée. Safari (WebKit) gardait son bloc clair sous notre texte clair :
   « Trier par », « Plus récentes », filtres Set / Tier / Type illisibles (recette finale du 2026-09-27). Flèche
   dessinée en dégradés à la couleur du thème (var(--mut), suit les thèmes des joueurs, même tracé que la
   saison de l'Arène, exclue ici car elle pose déjà la sienne ; `.rg-nochev` pour s'en passer ailleurs).
   Deux règles : (1) apparence + place de la flèche en (0,2,1), juste au-dessus de la règle de base et sous les
   règles de page (une page garde son padding) ; (2) la flèche elle-même avec un :not(#id) (spécificité d'id) :
   les pages posent souvent `background: var(--card)` sur leurs listes (inventaire : .rgiv-tools .rgf-sel), ce
   raccourci effaçait l'image et laissait une liste SANS flèche. Seule l'image est protégée, la couleur de fond
   de la page reste la sienne. */
:where(body.raidnew .rgmain, body.raidnew .rgd-modal) select:not([multiple]):not(.rgd-season-sel):not(.rg-nochev) {
  -webkit-appearance: none; appearance: none; padding-right: 32px;   /* place de la flèche (la native la réservait seule) */
}
:where(body.raidnew .rgmain, body.raidnew .rgd-modal) select:not([multiple]):not(.rgd-season-sel):not(.rg-nochev):not(#rg-chev-x) {
  background-image: linear-gradient(45deg, transparent 50%, var(--mut) 50%), linear-gradient(135deg, var(--mut) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
:where(body.raidnew .rgmain, body.raidnew .rgd-modal) select option { background-color: var(--card); color: var(--txt); }
/* Croix d'effacement des recherches (Chrome, Safari) : la native était bleue, seule couleur hors charte. */
:where(body.raidnew) input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0 0 0 6px; cursor: pointer;
  background-color: var(--mut);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
:where(body.raidnew) input[type="search"]::-webkit-search-cancel-button:hover { background-color: var(--txt); }
:where(body.raidnew .rgmain, body.raidnew .rgd-modal) :is(input, textarea)::placeholder { color: var(--dim); }
:where(body.raidnew .rgmain, body.raidnew .rgd-modal) :is(input, select, textarea):focus, :where(body.raidnew) .rgx-field:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(167, 139, 255, .18);
}
:where(body.raidnew) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); min-height: 0; }
body.raidnew .rginv-tools { gap: 8px; margin-bottom: 14px; }
body.raidnew .rginv-tools .rgf-count { color: var(--mut); }

/* Champ de recherche avec loupe : <label class="rgx-search"><svg>...</svg><input type="search"></label> */
body.raidnew .rgx-search { position: relative; display: flex; align-items: center; min-width: 0; }
body.raidnew .rgx-search > svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--mut); pointer-events: none; }
body.raidnew .rgx-search > input { width: 100%; padding-left: 36px; }

/* ── 10. Onglets (contrôle segmenté) ───────────────────────────────────────── */
/* Spécificité basse (:where) : une page peut changer display, largeur ou flex de ses onglets sans surenchère. */
:where(body.raidnew) .rgtabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; width: max-content; max-width: 100%;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 14px;
  overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap;
}
:where(body.raidnew) .rgtabs::-webkit-scrollbar { display: none; }
:where(body.raidnew) .rgtab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px;
  background: transparent; color: var(--mut); font: 650 .86rem var(--font); cursor: pointer; white-space: nowrap;
  box-shadow: none; transition: color .15s, background-color .15s;
}
:where(body.raidnew) .rgtab:not(.active):hover { background: rgba(255, 255, 255, .04); color: var(--txt); }
:where(body.raidnew) a.rgtab, :where(body.raidnew) a.rgtab:hover { text-decoration: none; }
:where(body.raidnew) .rgtab.active { background: var(--card2); color: var(--txt); box-shadow: var(--hl), 0 1px 2px rgba(0, 0, 0, .4); }
:where(body.raidnew) .rgtab-ic { width: 1.35em; height: 1.35em; vertical-align: middle; margin: 0; }
/* .rgtabs.is-grid : sur téléphone, les onglets passent en grille de 3 au lieu de défiler (rien de caché). */

/* ── 11. Surfaces : panneaux, cartes, tuiles de chiffres, pastilles ─────────── */
body.raidnew .rgpanel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px; box-shadow: var(--hl); }
:where(body.raidnew) .rgpanel h2 { font-size: 1.06rem; margin: 0 0 14px; }
body.raidnew .rgpanel h2 .cnt { background: var(--bg2); color: var(--mut); border: 1px solid var(--line); }

body.raidnew .rgcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--hl); }
body.raidnew .rgcard:hover { border-color: var(--line2); box-shadow: var(--hl); }
body.raidnew .rgcard-name { color: var(--txt); }
body.raidnew .rgcard-set { color: var(--accent2); }

body.raidnew .rgstat-pill, body.raidnew .rgsg {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--hl);
}
body.raidnew .rgsg { background: var(--bg2); }
body.raidnew .rgstat-pill .v, body.raidnew .rgsg .v { color: var(--txt); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
body.raidnew .rgstat-pill .v.gold, body.raidnew .rgsg .v.gold { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--accent2); }
body.raidnew .rgstat-pill .k, body.raidnew .rgsg .k { color: var(--mut); letter-spacing: .08em; font-size: .75rem; font-weight: 650; }

body.raidnew .rgin { background: var(--bg2); border-color: var(--line); border-radius: 999px; padding: 4px 10px; color: var(--mut); }
body.raidnew .rgin b { color: var(--txt); }
body.raidnew .rgbadge { border-radius: 7px; background: var(--bg2); }

body.raidnew .rgslot { background: var(--bg2); border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--r-m); }
body.raidnew .rgslot-ic { background: #0e0e14; border-color: var(--line); border-radius: 12px; }
body.raidnew .rgset { background: var(--bg2); border-color: var(--line); border-radius: 10px; }

/* Médailles de rang (1, 2, 3) : pastilles lisibles, mêmes teintes partout */
body.raidnew .rgmed { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; padding: 0 .34em; border-radius: 8px; font-weight: 800; font-size: .9em; line-height: 1; color: var(--on-medal); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22); font-variant-numeric: tabular-nums; }
body.raidnew .rgmed-g { background: var(--medal-or); background: linear-gradient(160deg, color-mix(in srgb, var(--medal-or) 62%, #fff), var(--medal-or) 70%); }
body.raidnew .rgmed-s { background: var(--medal-ar); background: linear-gradient(160deg, color-mix(in srgb, var(--medal-ar) 62%, #fff), var(--medal-ar) 70%); }
body.raidnew .rgmed-b { background: var(--medal-br); background: linear-gradient(160deg, color-mix(in srgb, var(--medal-br) 62%, #fff), var(--medal-br) 70%); }
/* Thème CLAIR d'un joueur (html.rc-light, posé par raid_custom.js) : les TEXTES aux teintes de médaille et le titre
   Prestige en dégradé pâle sont foncés vers la couleur du texte (1,6:1 sur blanc avant ; recette finale 2026-09-27).
   Les pastilles de médaille (.rgmed, fond coloré + texte sombre) gardent leurs teintes. */
html.rc-light body.raidnew .rgcl-pc-pow, html.rc-light body.raidnew .rgjx-rank.is-or, html.rc-light body.raidnew .rgcl .rglb-vip { color: color-mix(in srgb, var(--medal-or) 48%, var(--txt)); }
html.rc-light body.raidnew .rgjx-rank.is-ar { color: color-mix(in srgb, var(--medal-ar) 40%, var(--txt)); }
html.rc-light body.raidnew .rgjx-rank.is-br { color: color-mix(in srgb, var(--medal-br) 55%, var(--txt)); }
html.rc-light body.raidnew .rgt-title-prestige { background-image: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, var(--txt)), color-mix(in srgb, var(--legendaire) 55%, var(--txt)), color-mix(in srgb, var(--accent) 70%, var(--txt))); }
/* Titres de joueur à teinte fixe (raid_game.css) : même traitement en thème clair, sans halo (il salissait le fond blanc). */
html.rc-light body.raidnew .rgt-title-tenebre { color: color-mix(in srgb, #7b4dff 72%, var(--txt)); text-shadow: none; }
html.rc-light body.raidnew .rgt-title-or { color: color-mix(in srgb, #ffb020 50%, var(--txt)); text-shadow: none; }
html.rc-light body.raidnew .rgt-title-violet { color: color-mix(in srgb, #9b5cff 70%, var(--txt)); text-shadow: none; }
html.rc-light body.raidnew .rgt-title-cyan { color: color-mix(in srgb, #3da5ff 62%, var(--txt)); text-shadow: none; }
html.rc-light body.raidnew .rgt-title-argent { color: color-mix(in srgb, #8b93a7 60%, var(--txt)); text-shadow: none; }
/* ... chiffres du podium (teinte de médaille à 0,85 d'opacité : 1,5:1 sur blanc), badge « Éveillé » et étoiles de la
   fiche joueur, et couleurs CHOISIES par les guildes (un nom blanc devenait invisible) - recette finale 2026-09-27. */
html.rc-light body.raidnew .rgcl-pc-step b { color: color-mix(in srgb, var(--medal) 45%, var(--txt)); opacity: 1; }
html.rc-light body.raidnew .rgjx-fam-awk { color: color-mix(in srgb, var(--star-awk, #ff7a45) 62%, var(--txt)); }
html.rc-light body.raidnew .rggl-mono, html.rc-light body.raidnew .rggl-tagc, html.rc-light body.raidnew .rggl-mine-n, html.rc-light body.raidnew .rggl-mine-n:hover, html.rc-light body.raidnew .rgge-pv-name, html.rc-light body.raidnew .rggl-pod-n, html.rc-light body.raidnew .rggl-nm, html.rc-light body.raidnew .rghero.rggd-hero h1 { color: color-mix(in srgb, var(--gc, var(--accent2)) 55%, var(--txt)); }

/* Chip générique (filtres, badges) */
body.raidnew .rgx-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line2); color: var(--mut); font: 600 .8125rem var(--font); cursor: pointer; }
body.raidnew .rgx-chip[aria-pressed="true"], body.raidnew .rgx-chip.on { background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent2); }

/* ── 12. États : vide, chargement ──────────────────────────────────────────── */
body.raidnew .rgempty-box, body.raidnew .rgempty-state, body.raidnew .rgempty-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--hl); padding: 30px 22px;
}
body.raidnew .rgempty { background: var(--bg2); border: 1px dashed var(--line2); border-radius: var(--r-m); color: var(--mut); }
body.raidnew .rgempty-ic, body.raidnew .rgempty-box .ico { font-size: 2.2rem; }
body.raidnew .rgempty-ic .re { width: 1.2em; height: 1.2em; }
body.raidnew .rgempty-t, body.raidnew .rgempty-box h3 { color: var(--txt); font-size: 1.05rem; }
:where(body.raidnew) [class*="grid"] > .rgempty-box, :where(body.raidnew) .rgbag > .rgempty-box { grid-column: 1 / -1; }
body.raidnew .rgempty-box .rgbtn { margin-top: 8px; }
body.raidnew .rgloader { background: var(--card); border-color: var(--line); border-radius: var(--r-l); }
body.raidnew .rgloader::before { border-color: var(--line2); border-top-color: var(--accent); }
body.raidnew .rgskel { background: linear-gradient(100deg, var(--card) 30%, var(--card2) 50%, var(--card) 70%); background-size: 200% 100%; border-color: var(--line); }

/* ── 13. Fenêtres, feuilles, notifications ─────────────────────────────────── */
body.raidnew .rgd-modal { background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 1500; }
body.raidnew .rgd-sheet { background: #101019; border: 1px solid var(--line2); border-radius: 20px; box-shadow: var(--shadow-pop), var(--hl); }
body.raidnew .rgd-head { background: linear-gradient(180deg, #16161f, #101019); }
body.raidnew .rgd-head::before { background: linear-gradient(90deg, var(--accent2), var(--accent)); }
body.raidnew .rgd-stat, body.raidnew .rgd-srow, body.raidnew .rgd-ench, body.raidnew .rgd-pot, body.raidnew .rgd-set { background: var(--bg2); border-color: var(--line); }
/* Fiche d'une pièce (raid_inspect.js, .rgd-insp) : la croix reste visible en haut quand on fait défiler une
   fiche longue (avant : elle partait avec le contenu, seul le fond voilé restait pour fermer au téléphone).
   Collante dans le flux, marge basse négative = sa hauteur : l'en-tête garde sa place, dessous. */
body.raidnew .rgd-sheet.rgd-insp > .rgd-x { position: sticky; top: 10px; margin: 10px 10px -40px auto; background: var(--card2); border-color: var(--line2); }
@media (max-width: 960px) { body.raidnew .rgd-sheet.rgd-insp > .rgd-x { top: 8px; margin: 8px 8px -48px auto; } }
/* Fenêtre ouverte au doigt ou à la souris (.is-ptr, posé par raid_game.js / raid_inspect.js) : le focus y
   entre (clavier, lecteurs d'écran) sans anneau sur la croix ; la classe tombe à la première touche. */
body.raidnew .rgd-modal.is-ptr :is(button, a):focus { outline: none; }
/* Largeur : avec left:50% et translateX(-50%) sans largeur, la bulle se limitait à la moitié de l'écran. */
body.raidnew .rgtoast { z-index: 1600; border-radius: 14px; background: #16161f; border-color: var(--line2); box-shadow: var(--shadow-pop); font-weight: 600; width: max-content; max-width: min(520px, calc(100vw - 28px)); box-sizing: border-box; text-align: center; }
/* Notification masquée (opacité 0, elle reste dans la page) : elle ne doit plus capter les clics. Avant
   (recette du 2026-09-27), elle bloquait « Tout (filtré) » et « Verrouiller » de la barre de sélection du sac. */
body.raidnew .rgtoast:not(.show) { pointer-events: none; }
/* Une notification pendant qu'une fenêtre est ouverte passe EN HAUT, à toutes les largeurs : en bas, elle recouvrait
   le pied de la fiche (PC) ou la feuille qui monte du bas (téléphone) - recette finale 2026-09-27. */
body.raidnew:has(.rgd-modal, .rga-modal, .rgfam-modal, .rb-modal, [aria-modal="true"]:not([hidden])) :is(.rgtoast, .rm-toast, .rt-toast) { top: 14px; bottom: auto; }
/* Confirmation en place d'une carte (poubelle) : voile en teinte de carte canonique, re-teinté par les thèmes. */
body.raidnew .rgcard-confirm { background: rgba(16, 16, 25, .95); }
body.raidnew .rgselbar-in { background: #16161f; border-color: var(--line2); border-radius: 16px; box-shadow: var(--shadow-pop); }

/* ── 14. Pied de page ──────────────────────────────────────────────────────── */
body.raidnew .rgfoot { position: relative; z-index: 1; border-top: 1px solid var(--line); margin-top: 24px; }
body.raidnew .rgfoot-in { max-width: var(--maxw); margin: 0 auto; padding: 22px clamp(14px, 3vw, 32px) 96px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
body.raidnew .rgfoot-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--txt); font-family: var(--font-display); font-weight: 800; font-size: .92rem; }
body.raidnew .rgfoot-brand img { width: 24px; height: 24px; object-fit: contain; }
body.raidnew .rgfoot nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
body.raidnew .rgfoot nav a { color: var(--mut); font-size: .84rem; font-weight: 600; }
body.raidnew .rgfoot nav a:hover { color: var(--txt); }
/* --mut et non --dim : phrase de 13 px, lisible dans TOUS les thèmes (--dim tombait à 3:1 en thème clair). */
body.raidnew .rgfoot p { flex: 1 1 100%; margin: 0; color: var(--mut); font-size: .8125rem; }

/* ── 15. Utilitaires ───────────────────────────────────────────────────────── */
body.raidnew .rg-num { font-variant-numeric: tabular-nums; }
/* Texte sur 2 lignes maximum (noms de guilde, pseudos longs) : jamais coupé en « Ac... » sur téléphone. */
body.raidnew .rg-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* Longues listes : le navigateur ne calcule/peint que les éléments proches de l'écran. */
body.raidnew .rg-cv { content-visibility: auto; contain-intrinsic-size: auto var(--cv-h, 72px); }
body.raidnew .rg-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.raidnew .re { width: 1.15em; height: 1.15em; vertical-align: -.18em; }
/* Icône vectorielle (Lucide) posée par raid_emojify.js à la place d'un émoji Unicode sans émoji du serveur. */
body.raidnew .re-svg { display: inline-block; flex: 0 0 auto; }
body.raidnew .re-svg > svg, :is(#rgmarket, #rgtrade, .rm-float, .rt-modal, .rt-float, .rt-toast) .re-svg > svg { display: block; width: 100%; height: 100%; vertical-align: 0; }
/* Bouton "Afficher plus" des listes plafonnées */
body.raidnew .rgx-more { display: flex; justify-content: center; margin: 16px 0 4px; }
body.raidnew .rgx-more[hidden], body.raidnew .rgx-herostats:empty { display: none; }
body.raidnew .rgselbar-in { position: relative; }
body.raidnew .rgx-more > button, body.raidnew .rgx-more > a { min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line2); color: var(--txt); font: 650 .86rem var(--font); cursor: pointer; }
body.raidnew .rgx-more > button:hover, body.raidnew .rgx-more > a:hover { border-color: var(--accent-line); color: var(--accent2); }
body.raidnew .rgx-more > button[disabled] { opacity: .6; cursor: progress; border-color: var(--line2); color: var(--mut); }
/* Lien de retour d'une fiche (joueur, guilde, wiki, recherche) : UN seul modèle, discret, AU-DESSUS du bandeau.
   <a class="rgx-back" href="..."><svg ...chevron.../>Classement</a> (fil d'Ariane : plusieurs liens séparés par .rgx-back-sep) */
body.raidnew .rgx-back { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 40px; margin: -8px 0 8px; color: var(--mut); font-size: .86rem; font-weight: 600; }
body.raidnew .rgx-back a, body.raidnew a.rgx-back { color: var(--mut); }
body.raidnew .rgx-back a:hover, body.raidnew a.rgx-back:hover { color: var(--txt); }
body.raidnew .rgx-back svg { width: 16px; height: 16px; flex: 0 0 16px; }
body.raidnew .rgx-back-sep { color: var(--dim); }
/* Rangée d'actions d'un bandeau (page introuvable du jeu, route de repli de routes_raid_game.mjs). */
body.raidnew .rgx-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
body.raidnew .rghero .rgx-cta .rgbtn { margin-top: 0; }

/* ── 16. Téléphone et tablette ─────────────────────────────────────────────── */
/* Petits écrans PC : on garde les menus mais Accueil / Ma guilde passent en icône seule et la pastille
   du joueur en avatar seul (sinon « Ma guilde » passait sous la pastille à 1024 px). */
@media (max-width: 1240px) and (min-width: 961px) {
  body.raidnew .rgn-home .rgn-t, body.raidnew .rgnav-myguild .rgn-t, body.raidnew .rgme span { display: none; }
  body.raidnew .rgn { padding: 0 10px; gap: 7px; }
  body.raidnew .rgme { padding: 0 3px; }
  body.raidnew .rgbrand-s { display: none; }
}
@media (max-width: 960px) {
  body.raidnew .rgnav { display: none; }
  body.raidnew .rghead {
    position: static;                         /* dans le flux : rien ne peut être mal ancré */
    -webkit-backdrop-filter: none; backdrop-filter: none; background: #09090c;
    min-height: 56px; padding: 8px 14px; gap: 10px;
  }
  body.raidnew.has-site-menu .rghead { padding-right: 70px; }
  body.raidnew .rghead-end { margin-left: auto; }
  body.raidnew .rgme { padding: 0 3px; }
  body.raidnew .rgme span { display: none; }

  /* Menu du jeu : UNE ligne repliée sous l'en-tête ; ouverte, une grille de tuiles DANS la page. */
  body.raidnew .rgmnav { display: block; margin: 10px 14px 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--hl); }
  body.raidnew .rgmnav > summary { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; color: var(--txt); font-weight: 700; font-size: .95rem; }
  body.raidnew .rgmnav-burger { width: 20px; height: 20px; color: var(--accent2); flex: 0 0 20px; }
  body.raidnew .rgmnav-cur { color: var(--mut); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.raidnew .rgmnav-car { width: 16px; height: 16px; margin-left: auto; opacity: .6; transition: transform .2s; flex: 0 0 16px; }
  body.raidnew .rgmnav[open] > summary .rgmnav-car { transform: rotate(180deg); }
  body.raidnew .rgmnav[open] > summary { border-bottom: 1px solid var(--line); }
  body.raidnew .rgmnav-body { padding: 10px 10px 14px; }
  body.raidnew .rgmnav-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
  body.raidnew .rgmnav-grp h3 { margin: 14px 4px 8px; font: 700 .75rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); display: flex; align-items: center; gap: 8px; }
  body.raidnew .rgmnav-grp h3 img, body.raidnew .rgmnav-grp h3 .re { width: 18px; height: 18px; }
  body.raidnew .rgmnav-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  body.raidnew .rgmnav-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 8px 4px;
    background: var(--bg2); border: 1px solid var(--line); border-radius: 13px; color: var(--txt2); font-size: .8125rem; font-weight: 650; text-align: center; line-height: 1.15;
  }
  body.raidnew .rgmnav-tile .rgn-ic, body.raidnew .rgmnav-tile .rgn-emo { width: 28px; height: 28px; flex: 0 0 28px; font-size: 20px; }
  body.raidnew .rgmnav-tile .rgn-emo { font-size: 23px; }   /* émoji de repli (Chambre AFK) : même encombrement que les icônes */
  body.raidnew .rgmnav-quick > .rgmnav-tile:only-child { grid-column: 1 / -1; }   /* visiteur : « Accueil » seul, pleine largeur */
  body.raidnew .rgmnav-tile.active { border-color: var(--accent-line); background: var(--accent-dim); color: var(--txt); }
  body.raidnew .rgmnav-quick .rgmnav-tile { flex-direction: row; min-height: 48px; font-size: .86rem; gap: 8px; }
  body.raidnew .rgmnav-custom { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; margin-top: 14px; border-radius: 13px; border: 1px dashed var(--line2); color: var(--txt2); font-size: .86rem; font-weight: 650; }
  body.raidnew .rgmnav-custom:hover { border-color: var(--accent-line); color: var(--accent2); }
  body.raidnew .rgmnav-custom-ic { width: 20px; height: 20px; color: var(--accent2); flex: 0 0 20px; }

  body.raidnew .rgmain { padding: 16px 14px 64px; }
  /* Le hamburger du menu global est en position fixe : sur téléphone il flottait seul par-dessus le
     contenu une fois la page défilée. Ici il reste en haut du document (il part avec l'en-tête). */
  body.raidnew #navToggle, body.raidnew .navtoggle:not(.open) { position: absolute; }
  /* ... et centré sur l'en-tête de 56 px : (56 - 44) / 2 = 6 px. */
  body.raidnew.has-site-menu .navtoggle:not(.open) { top: 6px; right: 14px; width: 44px; height: 44px; }
  body.raidnew .rgx-chip, body.raidnew .rgtab { min-height: 40px; }
  body.raidnew .rgtabs.is-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; overflow: visible; }
  body.raidnew .rgtabs.is-grid .rgtab { justify-content: center; padding: 0 8px; white-space: normal; text-align: center; line-height: 1.15; min-height: 40px; }
  /* Bandeau téléphone : l'illustration couvre tout le panneau et se fond vers le bas, le texte
     passe dessus (compact : le contenu de la page reste visible sans défiler). */
  body.raidnew .rghero { min-height: 0; padding: 22px 18px 20px; gap: 8px; border-radius: 20px; margin-bottom: 16px; }
  body.raidnew .rgmain[style*="--rg-kicker"] .rghero { padding-top: 50px; }
  body.raidnew .rgmain[style*="--rg-art"] .rghero { padding-top: 92px; }
  body.raidnew .rgmain[style*="--rg-art"] .rghero.is-compact { padding-top: 64px; }
  body.raidnew .rghero::before {
    inset: 0; width: auto; height: auto;
    background-image: var(--rg-art-s, var(--rg-art, none));
    background-position: 72% 30%;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.12) 100%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.12) 100%);
  }
  body.raidnew .rghero::after { top: auto; bottom: auto; left: 18px; top: 16px; padding: 5px 9px; border-radius: 999px; background: rgba(7, 7, 9, .7); }
  body.raidnew .rghero p { font-size: .93rem; }
  body.raidnew .rgfoot-in { padding-bottom: 124px; }   /* les liens du pied restent au-dessus des boutons ronds (palette, chat) */
  /* Liens du pied : cibles tactiles de 40 px (charte §4.5), comme sur la vitrine. */
  body.raidnew .rgfoot nav { gap: 0 16px; }
  body.raidnew .rgfoot nav a { display: inline-flex; align-items: center; min-height: 40px; }
  /* Safari iOS zoome la page au focus d'un champ dont le texte fait moins de 16 px. */
  /* ... y compris dans les fenêtres et couches ajoutées à <body> (fiche d'objet, Arène, familiers...). */
  body.raidnew input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), body.raidnew select, body.raidnew textarea { font-size: 16px; }
  /* Fenêtres (fiche d'objet, confirmations) : feuille qui monte du bas, pleine largeur, au pouce. */
  body.raidnew .rgd-modal { align-items: flex-end; padding: 0; }
  body.raidnew .rgd-sheet {
    max-width: none !important; width: 100%; max-height: 88vh; max-height: 88dvh;
    border-radius: 22px 22px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: rgx-sheet .24s var(--ease);
  }
  @keyframes rgx-sheet { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
  /* Croix de fermeture des fenêtres : cible tactile de 40 px. */
  body.raidnew .rgd-x { width: 40px; height: 40px; font-size: 22px; }
  /* Une notification pendant qu'une fenêtre est ouverte passe EN HAUT : en bas elle recouvrait la feuille et ses boutons. */
  /* ... y compris les notifications propres au Marché et au Trade (.rm-toast, .rt-toast), qui recouvraient
     le champ Quantité de leur feuille (recette finale du 2026-09-27). */
  /* (règle « notification en haut pendant une fenêtre » : désormais pour TOUTES les largeurs, voir §13) */
}
@media (max-width: 720px) {
  /* Notifications au-dessus du bouton rond du chat (bas droite) dès qu'une bulle large peut l'atteindre. */
  body.raidnew .rgtoast { bottom: 88px; }
}
@media (max-width: 560px) {
  body.raidnew .rgx-herostats { gap: 6px; }
  body.raidnew .rgx-herostat { padding: 5px 10px; font-size: .8125rem; gap: 5px; }
  body.raidnew .rgx-herostat b { font-size: .86rem; }
}
@media (max-width: 480px) {
  body.raidnew .rgmnav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body.raidnew .rgmnav-tile { min-height: 72px; font-size: .8125rem; }
  body.raidnew .rgmain[style*="--rg-art"] .rghero { padding-top: 76px; }
  body.raidnew .rgmain[style*="--rg-art"] .rghero.is-compact, body.raidnew .rgmain[style*="--rg-art"] .rghero.is-compact-m { padding-top: 60px; }
  body.raidnew .rghero.is-compact p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  :where(body.raidnew) .rgtabs { width: 100%; }
}

/* ── 17. Mouvement réduit ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.raidnew .rgmain, body.raidnew .rgnav-menu, body.raidnew .rgd-sheet { animation: none; }
  body.raidnew .rgbtn, body.raidnew .rgn, body.raidnew .rgmini, body.raidnew .rgtab { transition: none; }
}