/* =========================================================
   RAVE RELICS — shared design system
   Style: CRT / terminal / radar. Black + neon (dynamic theme).
   ========================================================= */

/* DotGothic16, Orbitron, IBM Plex Mono, Space Grotesk, VT323, DM Serif Display :
   auto-hébergées depuis 2026-07-15 (voir bloc @font-face plus bas) — retirées des
   <link> Google Fonts de chaque page pour zéro appel sortant googleapis/gstatic. */
/* Compteur header site-wide : chiffre Orbitron + labels RR-Robotron — chargés ici pour
   être self-contained (sinon fallback mono sur index/globe/about). Robotron = fichier local. */
@font-face{ font-family:'RR-Robotron'; src:url("TYPO/Ac437_Robotron_A7100.woff2") format("woff2"), url("TYPO/Ac437_Robotron_A7100.ttf") format("truetype"); font-display:swap; }

/* =========================================================
   POLICES AUTO-HÉBERGÉES (ex-Google Fonts CDN) — 2026-07-15
   IBM Plex Mono, Space Grotesk, Orbitron, DotGothic16, VT323,
   DM Serif Display : sous SIL Open Font License 1.1. Fichiers
   OFL.txt conservés dans assets/webfonts/<famille>/OFL.txt.
   Objectif : zéro appel sortant vers fonts.googleapis.com /
   fonts.gstatic.com (cf. confidentialite.html — "aucun outil
   de suivi actif"). Ne jamais réintroduire de <link> Google.
   ========================================================= */

/* --- IBM Plex Mono --- */
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url("webfonts/ibm-plex-mono/ibm-plex-mono-400-normal-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url("webfonts/ibm-plex-mono/ibm-plex-mono-400-normal-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url("webfonts/ibm-plex-mono/ibm-plex-mono-500-normal-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url("webfonts/ibm-plex-mono/ibm-plex-mono-500-normal-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url("webfonts/ibm-plex-mono/ibm-plex-mono-600-normal-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url("webfonts/ibm-plex-mono/ibm-plex-mono-600-normal-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:700; font-display:swap; src:url("webfonts/ibm-plex-mono/ibm-plex-mono-700-normal-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:700; font-display:swap; src:url("webfonts/ibm-plex-mono/ibm-plex-mono-700-normal-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- Space Grotesk --- */
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url("webfonts/space-grotesk/space-grotesk-400-normal-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url("webfonts/space-grotesk/space-grotesk-400-normal-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url("webfonts/space-grotesk/space-grotesk-500-normal-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url("webfonts/space-grotesk/space-grotesk-500-normal-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url("webfonts/space-grotesk/space-grotesk-600-normal-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url("webfonts/space-grotesk/space-grotesk-600-normal-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url("webfonts/space-grotesk/space-grotesk-700-normal-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url("webfonts/space-grotesk/space-grotesk-700-normal-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- Orbitron --- */
@font-face{ font-family:'Orbitron'; font-style:normal; font-weight:400; font-display:swap; src:url("webfonts/orbitron/orbitron-400-normal-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Orbitron'; font-style:normal; font-weight:500; font-display:swap; src:url("webfonts/orbitron/orbitron-500-normal-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Orbitron'; font-style:normal; font-weight:600; font-display:swap; src:url("webfonts/orbitron/orbitron-600-normal-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Orbitron'; font-style:normal; font-weight:700; font-display:swap; src:url("webfonts/orbitron/orbitron-700-normal-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Orbitron'; font-style:normal; font-weight:800; font-display:swap; src:url("webfonts/orbitron/orbitron-800-normal-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Orbitron'; font-style:normal; font-weight:900; font-display:swap; src:url("webfonts/orbitron/orbitron-900-normal-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- DotGothic16 --- */
@font-face{ font-family:'DotGothic16'; font-style:normal; font-weight:400; font-display:swap; src:url("webfonts/dotgothic16/dotgothic16-400-normal-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'DotGothic16'; font-style:normal; font-weight:400; font-display:swap; src:url("webfonts/dotgothic16/dotgothic16-400-normal-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- VT323 --- */
@font-face{ font-family:'VT323'; font-style:normal; font-weight:400; font-display:swap; src:url("webfonts/vt323/vt323-400-normal-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'VT323'; font-style:normal; font-weight:400; font-display:swap; src:url("webfonts/vt323/vt323-400-normal-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- DM Serif Display --- */
@font-face{ font-family:'DM Serif Display'; font-style:italic; font-weight:400; font-display:swap; src:url("webfonts/dm-serif-display/dm-serif-display-400-italic-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'DM Serif Display'; font-style:italic; font-weight:400; font-display:swap; src:url("webfonts/dm-serif-display/dm-serif-display-400-italic-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'DM Serif Display'; font-style:normal; font-weight:400; font-display:swap; src:url("webfonts/dm-serif-display/dm-serif-display-400-normal-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'DM Serif Display'; font-style:normal; font-weight:400; font-display:swap; src:url("webfonts/dm-serif-display/dm-serif-display-400-normal-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =========================================================
   COLOR SYSTEM — 4 neon themes
   Brand colors (exact, never override):
     --color-acid-green : #39FF14  (57, 255, 20)
     --color-neon-purple: #A259FF  (162, 89, 255)
     --color-neon-red   : #FF3B3B  (255, 59, 59)
     --color-neon-yellow: #FFF200  (255, 242, 0)
   ========================================================= */

:root {
  /* ── Invariants ── */
  --bg:   #000;
  --bg-2: #060606;
  --bg-3: #0d0d0d;
  --warn: #ffcf2b;
  --hot:  #ff4d8a;
  --mono:    "DotGothic16", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --grid-size: 24px;

  /* ══════════════════════════════════════════
     MINI DESIGN SYSTEM — 3-level color tokens
     ══════════════════════════════════════════ */

  /* GREEN */
  --rr-green:      #39FF14;
  --rr-green-ui:   #2EDB4F;
  --rr-green-dark: #123D1C;
  --rr-green-glow: 0 0 6px rgba(57,255,20,.45), 0 0 14px rgba(57,255,20,.25);

  /* PURPLE */
  --rr-purple:      #A259FF;
  --rr-purple-ui:   #8B5CF6;
  --rr-purple-dark: #2D174D;
  --rr-purple-glow: 0 0 6px rgba(162,89,255,.45), 0 0 14px rgba(162,89,255,.25);

  /* RED */
  --rr-red:      #FF3B3B;
  --rr-red-ui:   #E84955;
  --rr-red-dark: #4A1418;
  --rr-red-glow: 0 0 6px rgba(255,59,59,.45), 0 0 14px rgba(255,59,59,.25);

  /* YELLOW */
  --rr-yellow:      #FFF200;
  --rr-yellow-ui:   #E6D900;
  --rr-yellow-dark: #4A4300;
  --rr-yellow-glow: 0 0 6px rgba(255,242,0,.45), 0 0 14px rgba(255,242,0,.25);

  /* ── Active theme aliases (updated per theme below) ── */
  --neon-ui:   #2EDB4F;   /* UI-grade, slightly less saturated    */
  --neon-soft: #1aaa2a;   /* ambient/matrix/globe — large surfaces */
  --neon-dark: #123D1C;   /* dark tint for backgrounds            */
  --neon-glow: var(--rr-green-glow);

  /* ── Default theme: acid-green ── */
  --fg:      #d6ffc8;
  --mute:    #4a7a38;
  --dim:     #2a4a20;
  --line:    #162810;
  --line-2:  #223818;
  --neon:    #39FF14;
  --neon-2:  #22e000;
  --neon-dim:#1a8a00;
  --neon-rgb: 57,255,20;
}

/* ── ACID GREEN (default) ── */
:root[data-theme="green"],
:root[data-theme="acid"] {
  --fg:      #d6ffc8;
  --mute:    #4a7a38;
  --dim:     #2a4a20;
  --line:    #162810;
  --line-2:  #223818;
  --neon:    #39FF14;
  --neon-2:  #22e000;
  --neon-dim:#1a8a00;
  --neon-rgb: 57,255,20;
  --neon-ui:   var(--rr-green-ui);
  --neon-soft: #18922a;
  --neon-dark: var(--rr-green-dark);
  --neon-glow: var(--rr-green-glow);
}

/* ── NEON PURPLE ── */
:root[data-theme="purple"] {
  --fg:      #eedeff;
  --mute:    #7a50b0;
  --dim:     #4a2878;
  --line:    #220e40;
  --line-2:  #3a1a60;
  --neon:    #A259FF;
  --neon-2:  #8833ee;
  --neon-dim:#5a1aaa;
  --neon-rgb: 162,89,255;
  --neon-ui:   var(--rr-purple-ui);
  --neon-soft: #7040cc;   /* mid purple — ambient surfaces, bars */
  --neon-dark: var(--rr-purple-dark);
  --neon-glow: var(--rr-purple-glow);
}

/* ── NEON RED ── */
:root[data-theme="red"] {
  --fg:      #ffe0e0;
  --mute:    #a03838;
  --dim:     #6a1818;
  --line:    #300808;
  --line-2:  #481010;
  --neon:    #FF3B3B;
  --neon-2:  #e02020;
  --neon-dim:#8a0a0a;
  --neon-rgb: 255,59,59;
  --neon-ui:   var(--rr-red-ui);
  --neon-soft: #c42030;   /* mid red — bars, progress, highlights */
  --neon-dark: var(--rr-red-dark);
  --neon-glow: var(--rr-red-glow);
}

/* ── NEON YELLOW ── */
:root[data-theme="yellow"] {
  --fg:      #fffff0;
  --mute:    #a8a020;
  --dim:     #686008;
  --line:    #303000;
  --line-2:  #484800;
  --neon:    #FFF200;
  --neon-2:  #e0d800;
  --neon-dim:#888000;
  --neon-rgb: 255,242,0;
  --neon-ui:   var(--rr-yellow-ui);
  --neon-soft: #b8a800;   /* golden amber — bars, progress, ambient */
  --neon-dark: var(--rr-yellow-dark);
  --neon-glow: var(--rr-yellow-glow);
}

/* ── WHITE / MONO (accent blanc sur fond sombre) ── */
:root[data-theme="white"] {
  --fg:      #ffffff;
  --mute:    #8a8a8a;
  --dim:     #555555;
  --line:    #1c1c1c;
  --line-2:  #2c2c2c;
  --neon:    #ffffff;
  --neon-2:  #e0e0e0;
  --neon-dim:#888888;
  --neon-rgb: 255,255,255;
  --neon-ui:   #eaeaea;
  --neon-soft: #b0b0b0;
  --neon-dark: #1a1a1a;
  --neon-glow: 0 0 6px rgba(255,255,255,.45), 0 0 14px rgba(255,255,255,.25);
}

:root[data-theme="rose"] {
  --fg:      #ffe0f0;
  --mute:    #a8527e;
  --dim:     #6e2a50;
  --line:    #320e22;
  --line-2:  #501838;
  --neon:    #d966b0;
  --neon-2:  #c23a93;
  --neon-dim:#7a2060;
  --neon-rgb: 217,102,176;
  --neon-ui:   #cf83b8;   /* un cran moins saturé */
  --neon-soft: #a8508a;   /* mid rose — surfaces ambiantes, barres */
  --neon-dark: #3a1530;   /* teinte sombre — fonds */
  --neon-glow: 0 0 6px rgba(217,102,176,.45), 0 0 14px rgba(217,102,176,.25);
}

:root[data-theme="cyan"] {
  --fg:      #d8fff5;
  --mute:    #4a8a80;
  --dim:     #235a52;
  --line:    #0a2824;
  --line-2:  #103c36;
  --neon:    #1fe6d2;
  --neon-2:  #10c9b4;
  --neon-dim:#0e8f80;
  --neon-rgb: 31,230,210;
  --neon-ui:   #3dd3c4;   /* un cran moins saturé */
  --neon-soft: #2aa99a;   /* mid turquoise — surfaces ambiantes, barres */
  --neon-dark: #0c3a34;   /* teinte sombre — fonds */
  --neon-glow: 0 0 6px rgba(31,230,210,.45), 0 0 14px rgba(31,230,210,.25);
}

:root[data-theme="mint"] {
  --fg:      #d6fff4;
  --mute:    #3f8f7e;
  --dim:     #1e6053;
  --line:    #062a22;
  --line-2:  #0e4034;
  --neon:    #00e5b4;
  --neon-2:  #00c79c;
  --neon-dim:#0a8f72;
  --neon-rgb: 0,229,180;
  --neon-ui:   #3dd6b8;   /* un cran moins saturé */
  --neon-soft: #1f9c80;   /* mid mint — surfaces ambiantes */
  --neon-dark: #093a30;   /* teinte sombre — fonds */
  --neon-glow: 0 0 6px rgba(0,229,180,.45), 0 0 14px rgba(0,229,180,.25);
}

:root[data-theme="lavender"] {
  --fg:      #f0e6ff;
  --mute:    #8a6ab0;
  --dim:     #553a82;
  --line:    #261443;
  --line-2:  #3d2566;
  --neon:    #cc88ff;
  --neon-2:  #b266f5;
  --neon-dim:#7a4ec0;
  --neon-rgb: 204,136,255;
  --neon-ui:   #c79df0;   /* un cran moins saturé */
  --neon-soft: #9866d0;   /* mid lavande — surfaces ambiantes */
  --neon-dark: #2e1a52;   /* teinte sombre — fonds */
  --neon-glow: 0 0 6px rgba(204,136,255,.45), 0 0 14px rgba(204,136,255,.25);
}

* { box-sizing: border-box; }

/* ── Fixed header height tokens ──
   --fixed-header-h est désormais MESURÉ au runtime par RR.measureHeader() (chrome.js),
   appelé au mount, à document.fonts.ready et au resize. La valeur ci-dessous n'est qu'un
   FALLBACK avant la 1re mesure (ou si le JS échoue). Le token mesuré inclut
   env(safe-area-inset-top) → le consommer SANS rajouter env().
   --topstrip-h / --mainheader-h restent statiques (NON mesurés) : ils positionnent
   .rr-header (top) et, sur globe, #cockpit. Sémantique inchangée (hors safe-area,
   couplés à env() chez leurs consommateurs). */
:root {
  --topstrip-h:     44px;   /* rr-topstrip — hors safe-area (consommé avec + env()) */
  --mainheader-h:   72px;   /* header mobile 1 rangée — utilisé par globe #cockpit    */
  --fixed-header-h: 116px;  /* FALLBACK avant mesure JS (topstrip+header, safe incl.) */
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-shadow: 0.6px 0 0 currentColor, -0.3px 0 0 currentColor;
}

h1, h2, h3, h4, h5, h6,
[class*="hero"] h1, [class*="hero"] h2,
.big-title, .display,
[style*="Space Grotesk"], [style*="DM Serif"] {
  text-shadow: none;
}

body {
  padding-top: var(--fixed-header-h, 140px);   /* safe-area déjà inclus dans le token mesuré */
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(var(--neon-rgb), 0.06), transparent 55%),
    radial-gradient(ellipse at 110% 110%, rgba(var(--neon-rgb), 0.04), transparent 45%),
    var(--bg);
  overflow-x: hidden;
  transition: background 0.3s ease;   /* padding-top animé seulement après 1er calage (.rr-anim-ready) */
}
/* Transition du padding-top activée par chrome.js APRÈS le 1er calage synchrone →
   pas de saut au load, mais glissement doux ensuite (fonts/resize/collapse). */
body.rr-anim-ready {
  transition: background 0.3s ease, padding-top 220ms ease-out;
}
/* When header collapses: remove its space so sticky shop-nav rises to top */
body.header-collapsed {
  padding-top: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.012) 0 1px,
    transparent 1px 3px
  );
  z-index: 3001; /* était 9998 — descendu sous le header pour fix saignement Safari 2026-06-03 */
  /* mix-blend-mode: overlay; */ /* TEST saignement mobile iOS — 2026-06-03, à restaurer ou remplacer */
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  z-index: 3000; /* était 9997 — descendu sous le header pour fix saignement Safari 2026-06-03 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

a { color: inherit; text-decoration: none; }

/* ── Global button reset — no browser defaults ── */
button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;  /* no grey flash on mobile */
  outline: none;                              /* kill browser default */
}
/* Keyboard focus: replace blue ring with theme ring */
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--neon-ui), 0 0 8px rgba(var(--neon-rgb), 0.5);
}
/* Round buttons keep round ring */
.card-play:focus-visible,
.trk-btn:focus-visible {
  border-radius: 50%;
}
/* Flat/rect buttons */
.pill:focus-visible,
.sort-btn:focus-visible,
.trk-btn.trk-playpause:focus-visible,
.buy-cta:focus-visible,
.rr-lang button:focus-visible,
.rr-theme button:focus-visible {
  border-radius: 0;
  box-shadow: 0 0 0 2px var(--neon-ui), 0 0 8px rgba(var(--neon-rgb), 0.4);
}

/* ---------- Typography ---------- */
.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.mono { font-family: var(--mono); }
.tiny { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.kbd {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--mute);
  border-radius: 2px;
}
.neon { color: var(--neon); text-shadow: 0 0 10px rgba(var(--neon-rgb),0.6); }
.neon-soft { color: var(--neon); }

.bracket::before { content: "[ "; color: var(--neon); }
.bracket::after  { content: " ]"; color: var(--neon); }

.cursor::after {
  content: "_";
  color: var(--neon);
  animation: blink 1.1s steps(2, jump-none) infinite;
  margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Layout ---------- */
.container {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 32px;
}
.hr {
  border: 0;
  border-top: 1px dashed var(--line-2);
  margin: 24px 0;
}

/* ---------- Top strip ---------- */
.rr-topstrip {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 4001;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 32px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  background: #050505;
  /* Fix A (4 juin 2026) — bug WebKit « couche composite fixe qui blanchit au scroll iOS » :
     retrait des 3 promoteurs GPU (will-change + transform:translateZ + backface-visibility).
     bg #050505 INCHANGÉ (déjà opaque sans alpha ; jamais var(--bg) → constant tous thèmes).
     La transition de repli (deck shop) reste : le translateY de .header-collapsed anime encore. */
  transition: transform 300ms ease-out, opacity 220ms ease-out;
}
.rr-topstrip::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 6px;
  background: #050505;
  pointer-events: none;
}
body.header-collapsed .rr-topstrip {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
/* Topstrip 3 zones : FR/EN gauche · pastilles thème centre · CART droite (2 juin 2026) */
.rr-topstrip .left,
.rr-topstrip .center,
.rr-topstrip .right { display: flex; gap: 18px; align-items: center; flex: 1; }
.rr-topstrip .left   { justify-content: flex-start; }
.rr-topstrip .center { justify-content: center; }
.rr-topstrip .right  { justify-content: flex-end; }
/* Panier compact dans le topstrip (icône + label + badge) */
.rr-topstrip .rr-cart { padding: 4px 10px; font-size: 11px; }
.rr-topstrip .rr-cart svg { width: 16px; height: 16px; }
.rr-topstrip .dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.3; } }

/* LIVE/GENEVA/heure : topstrip original, VISIBLE ≥768 seulement
   (restauré le 4 juin 2026 ; arrangement dans @media min-width:768px). */
.rr-live { display: none; }

/* ---------- Lang switch ---------- */
.rr-lang {
  display: inline-flex;
  gap: 2px;
  border: 1px solid var(--line-2);
  padding: 2px;
}
.rr-lang button {
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--mute);
  background: none;
  border: none;
  cursor: pointer;
  transition: all .1s;
}
.rr-lang button.active {
  background: var(--neon);
  color: #000;
  font-weight: 700;
}
.rr-lang button:hover:not(.active) {
  color: var(--neon);
}

/* ---------- Theme switcher ---------- */
.rr-theme {
  display: inline-flex;
  gap: 6px;
  padding: 2px 6px;
  border: 1px solid var(--line-2);
  align-items: center;
  height: 24px;
}
.rr-theme button {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--c);
  border: 1px solid rgba(0,0,0,0.4);
  cursor: pointer;
  padding: 0;
  transition: transform .15s, box-shadow .15s;
}
.rr-theme button:hover { transform: scale(1.15); }
.rr-theme button.active {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--c), 0 0 8px var(--c);
  transform: scale(1.1);
}
/* 7 juin 2026 — Header mobile (toutes pages) : marque dans le topstrip + bouton couleurs déroulant dans le header. Desktop/iPad inchangés (masqués ≥768 ou dans @media max-767). */
.rr-topstrip-brand { display: none; }
.rr-colors { display: none; position: relative; }
.rr-colors-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: none; border: 1px solid var(--line-2); cursor: pointer; }
.rr-colors-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 6px var(--neon); }
.rr-colors-panel { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 4002; background: #050505; }
.rr-colors.open .rr-colors-panel { display: inline-flex; }

/* ---------- Header — fixed, GPU layer ── */
.rr-header {
  position: fixed;
  top: calc(var(--topstrip-h, 40px) + env(safe-area-inset-top));
  left: 0; right: 0;
  z-index: 4000;
  background: #050505;
  border-bottom: 1px solid var(--line);
  /* Fix A (4 juin 2026) : 3 promoteurs GPU retirés (cf. .rr-topstrip). bg #050505 inchangé. */
  transition: transform 300ms ease-out, opacity 220ms ease-out;
}
.rr-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 6px;
  background: #050505;
  pointer-events: none;
  z-index: 1;
}
body.header-collapsed .rr-header {
  transform: translateY(calc(-100% - var(--topstrip-h, 40px) - env(safe-area-inset-top)));
  opacity: 0;
  pointer-events: none;
}

/* Header 2 rangées : NAV au-dessus, puis ligne logo (2 juin 2026) */
/* BASE = layout TÉLÉPHONE (<768) : nav empilée (flex-wrap) au-dessus de logo + compteur.
   ≥768 : remplacé par une grille (voir @media min-width:768px). */
.rr-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  row-gap: 4px;
  column-gap: 28px;
  padding: 14px 18px;
}
.rr-nav { flex-basis: 100%; }   /* nav sur sa propre rangée ; logo + compteur flottent dessous */
.rr-tools { display: none; }     /* panier header masqué sur téléphone (il est dans le topstrip) */
/* Bloc de marque compteur — chiffre Orbitron (= .big du hero) + 2 lignes label Robotron */
.rr-count {
  display: flex; flex-direction: column; align-items: flex-end;   /* 4 juin : chiffre + 2 labels alignés à droite */
  gap: 1px; line-height: 1; text-align: right; color: var(--mute);
  margin-left: auto;   /* 4 juin : pousse la stat contre le bord droit (respiration = padding droit du header) — largeur inchangée */
}
.rr-count-n {
  font-family: 'Orbitron', var(--display); font-weight: 800;
  font-size: 52px;             /* cohérent avec le logo (108px) ; AJUSTABLE */
  color: var(--neon); letter-spacing: -0.01em;
  text-shadow: 0 0 16px rgba(var(--neon-rgb),0.45), 0 0 34px rgba(var(--neon-rgb),0.25);
}
.rr-count-l1 { font-family: 'RR-Robotron', var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg); margin-top: 6px; }
.rr-count-l2 { font-family: 'RR-Robotron', var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.rr-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--neon);
  justify-self: start;
}
.rr-logo svg { filter: drop-shadow(0 0 8px rgba(var(--neon-rgb),0.45)); height: 84px; width: auto; }
.rr-logo-img {
  display: block;
  height: 108px;
  width: 180px;
  background-color: var(--neon);
  -webkit-mask: url("logos/rave-relics-mask.png") no-repeat center / contain;
          mask: url("logos/rave-relics-mask.png") no-repeat center / contain;
  filter: drop-shadow(0 0 8px rgba(var(--neon-rgb),0.35));
}
/* ─── Interférence VHS du logo (site-wide) — burst déclenché par .rr-glitch (scheduler JS chrome.js / globe inline, intervalle aléatoire). Cible .rr-logo-img SEULE (jamais conteneur/tagline). Aucune nouvelle couleur (canaux propres, Y neutralisé). ─── */
@keyframes rrLogoGlitch {
  0%   { filter: url(#rrLogoGlitch1); opacity: 0.6; }
  25%  { filter: url(#rrLogoGlitch2); opacity: 1; }
  50%  { filter: url(#rrLogoGlitch1); opacity: 0.78; }
  75%  { filter: url(#rrLogoGlitch2); opacity: 1; }
  100% { filter: none; opacity: 1; }
}
/* wrapper NON masqué autour du logo → le filtre SVG n'est PAS rogné par le mask de .rr-logo-img */
.rr-logo-fx { display: block; }
.rr-logo-fx.rr-glitch { animation: rrLogoGlitch 0.3s steps(1, jump-end) 1; }
.rr-logo .tag {
  font-size: 9px;
  color: var(--mute);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--mono);
  padding-left: 0;
  max-width: 140px;
  line-height: 1.4;
}

/* ---------- Nav ---------- */
.rr-nav {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  justify-self: center;
}
.rr-nav a {
  position: relative;
  padding: 12px 22px;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  border: 1px solid transparent;
  transition: all .15s;
  font-family: 'RR-ToshibaSat', var(--mono);
}
.rr-nav a:hover,
.rr-nav a.active {
  color: var(--neon);
  border-color: var(--neon);
  background: rgba(var(--neon-rgb),0.05);
}
.rr-nav a.active::before { content: "» "; color: var(--neon); }

.rr-tools {
  /* display piloté par breakpoint : none <768 (.rr-tools plus haut) / flex ≥768 (@media min-768) */
  gap: 14px;
  align-items: center;
  color: var(--mute);
  justify-self: end;
}

/* SHOP button — uses theme neon, no hard-coded colors */
.rr-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  background: none;
  cursor: pointer;
  transition: all .15s;
  font-family: var(--mono);
}
.rr-cart:hover {
  border-color: var(--neon);
  color: var(--neon);
  background: rgba(var(--neon-rgb),0.06);
}
.rr-cart .count {
  background: var(--neon);
  color: #000;
  padding: 1px 6px;
  font-weight: 700;
  border-radius: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  background: var(--bg-2);
  transition: all .15s;
  cursor: pointer;
}
.btn:hover { border-color: var(--neon); color: var(--neon); background: rgba(var(--neon-rgb),0.06); }
.btn.ghost:hover {
  background: rgba(var(--neon-rgb), 0.15);
  border-color: var(--neon);
  color: var(--neon);
  box-shadow: 0 0 10px rgba(var(--neon-rgb), 0.2);
}
.btn.primary {
  background: var(--neon);
  border-color: var(--neon);
  color: #000;
  font-weight: 700;
}
.btn.primary:hover { background: #fff; border-color: #fff; color: #000; }
.btn.ghost {
  background: rgba(var(--neon-rgb), 0.08);
  border-color: var(--neon);
  color: var(--neon);
}

/* Triangle CSS — remplace les → texte sur tous les .btn */
.btn::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #000;   /* noir → bouton primaire (fond vert) */
  margin-left: 8px;
  flex-shrink: 0;
  align-self: center;
  transition: transform 0.15s ease;
}
.btn:hover::after {
  transform: translateX(3px);
}

/* Ghost/secondary : triangle vert */
.btn.ghost::after {
  border-left-color: var(--neon);
}

/* Bouton sans modificateur (ex: OUVRIR LE GLOBE dans panel) : triangle vert aussi */
.btn:not(.primary):not(.ghost)::after {
  border-left-color: var(--neon);
}

/* Plain .btn sans modificateur = même look que ghost */
.btn:not(.primary):not(.ghost) {
  background: rgba(var(--neon-rgb), 0.08);
  border-color: var(--neon);
  color: var(--neon);
}
.btn:not(.primary):not(.ghost):hover {
  background: rgba(var(--neon-rgb), 0.15);
  box-shadow: 0 0 10px rgba(var(--neon-rgb), 0.2);
}

/* Liens texte CTA — carré clignotant terminal au hover */
.link-cta {
  display: inline;
  font-family: var(--mono);
  font-size: inherit;          /* hérite du contexte parent — pas de décalage typo */
  letter-spacing: inherit;
  color: var(--neon);
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
}
.link-cta::after {
  content: '';
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  background: var(--neon);
  opacity: 1;
  vertical-align: text-bottom;
  margin-left: 5px;
  position: relative;
  top: 0;
  animation: squareBlink 1.1s steps(1, end) infinite;
}
.link-cta:hover::after {
  opacity: 1;
}
@keyframes squareBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ---------- Cards / Panels ---------- */
.panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(var(--neon-rgb),0.03), rgba(0,0,0,0.6));
  padding: 20px;
  position: relative;
}
.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--neon);
}
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ---------- Grid background ---------- */
.grid-bg {
  background-image:
    linear-gradient(rgba(var(--neon-rgb),0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--neon-rgb),0.04) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

/* ---------- Page head shared ---------- */
.page-head {
  padding: 80px 32px 40px;
  text-align: center;
  position: relative;
}
.page-head .eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 18px;
}
.page-head h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
  color: #fff;
}
.page-head h1 em {
  font-style: normal;
  color: var(--neon);
}
.page-head p.lead {
  max-width: 680px;
  margin: 20px auto 0;
  color: var(--mute);
  font-size: 13px;
}

/* ---------- Footer ---------- */
.rr-footer {
  border-top: 1px solid var(--line);
  margin-top: 80px;
  padding: 48px 32px 24px;
  color: var(--mute);
  font-size: 11px;
}
.rr-footer-grid {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
}
.rr-footer h4 {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--neon);
  margin: 0 0 14px;
}
.rr-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.rr-footer a:hover { color: var(--neon); }
.rr-footer .signoff {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px dashed var(--line-2);
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- Barre légale site-wide (injectée par RR.mountFooter) ----------
   Distincte de .rr-footer. Flux normal (pas de position:fixed), discrète.
   Depuis l'ajout newsletter : .rr-legal est un conteneur colonne (newsletter au-dessus,
   .rr-legal-bottom = ancienne ligne liens+copyright, layout inchangé en dessous. */
.rr-legal {
  border-top: 1px solid var(--line);
  margin-top: 64px;
  padding: 32px 32px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 28px;
}
.rr-legal-bottom {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 28px;
  row-gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mute);
}
.rr-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.rr-legal-links a {
  color: var(--mute);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 2px 16px;
  transition: color .15s ease;
}
.rr-legal-links a:not(:last-child) { border-right: 1px solid var(--line-2); }
.rr-legal-links a:hover { color: var(--neon); }
.rr-legal-copy { text-transform: uppercase; letter-spacing: 0.12em; }

@media (max-width: 600px) {
  .rr-legal { row-gap: 20px; padding: 24px 20px 20px; }
  .rr-legal-bottom { flex-direction: column; row-gap: 14px; text-align: center; }
  .rr-legal-links a { padding: 2px 12px; }
}

/* ---------- Newsletter (formulaire Infomaniak webform_id=24845) — habillage DA ----------
   Structure + attributs fonctionnels (action, inf[1], key, webform_id, honeypot, altcha-widget,
   scripts) fournis par Infomaniak et posés par RR.mountFooter() — INTACTS, ne pas toucher ici.
   Le <style> inline original d'Infomaniak a été supprimé ; seule l'apparence des classes .inf-*
   est reprise ci-dessous, dark-tech, alignée sur les CSS vars du thème actif (--neon/--fg/--mute…). */
.rr-newsletter { width: 100%; max-width: 420px; }
.rr-newsletter .inf-main { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.rr-newsletter .inf-title {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
  font-weight: 700;
}
.rr-newsletter .inf-desc {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--mute);
  line-height: 1.5;
  max-width: 340px;
}
.rr-newsletter .inf-content { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin-top: 4px; }
.rr-newsletter .inf-input { width: 100%; max-width: 300px; }
.rr-newsletter .inf-input.inf-input-text input {
  width: 100%;
  height: 38px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  padding: 0 12px;
  outline: none;
  transition: border-color .15s ease;
}
.rr-newsletter .inf-input.inf-input-text input::placeholder { color: var(--dim); }
.rr-newsletter .inf-input.inf-input-text input:focus { border-color: var(--neon); }
.rr-newsletter .inf-input.inf-error input { border-color: var(--hot); }
.rr-newsletter .inf-input.inf-error label,
.rr-newsletter .inf-input.inf-error span.inf-message {
  color: var(--hot);
  font-size: 10px;
  letter-spacing: 0.05em;
}
.rr-newsletter .inf-input.inf-error span.inf-message { display: block; margin-top: 4px; text-align: left; width: 100%; max-width: 300px; }
.rr-newsletter .inf-rgpd {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: var(--dim);
  max-width: 300px;
  line-height: 1.5;
}
.rr-newsletter .inf-rgpd a { color: var(--mute); text-decoration: underline; }
.rr-newsletter .inf-rgpd a:hover { color: var(--neon); }
.rr-newsletter .inf-submit { width: 100%; max-width: 300px; }
.rr-newsletter .inf-submit input {
  width: 100%;
  height: 38px;
  background: transparent;
  border: 1px solid var(--neon);
  color: var(--neon);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.rr-newsletter .inf-submit input:hover { background: var(--neon); color: var(--bg); }
.rr-newsletter .inf-submit input.disabled { opacity: 0.4; cursor: default; }
.rr-newsletter .inf-success h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--neon);
  max-width: 300px;
  font-weight: 400;
}
.rr-newsletter .inf-success .inf-btn { color: var(--mute); text-decoration: none; font-size: 12px; }
.rr-newsletter .inf-success .inf-btn:hover { color: var(--neon); }
.rr-newsletter altcha-widget { --altcha-color-base: var(--bg-2); --altcha-color-border: var(--line-2); --altcha-color-text: var(--mute); --altcha-color-border-focus: var(--neon); max-width: 300px; }
.rr-newsletter .altcha-label span { color: var(--mute); }

@media (max-width: 600px) {
  .rr-newsletter .inf-desc,
  .rr-newsletter .inf-rgpd { max-width: 260px; }
}

/* ---------- Filter pills — shared (Shop + Merch) ---------- */
/*
  These styles are referenced by both shop.html and merch.html.
  All colors come from CSS variables — no hard-coded values.
*/
.rr-pill {
  padding: 10px 20px;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  cursor: pointer;
  transition: all .15s;
  font-weight: 600;
  background: none;
}
.rr-pill:hover { border-color: var(--neon); color: var(--neon); }
.rr-pill.active {
  background: var(--neon);
  border-color: var(--neon);
  color: #000;
  font-weight: 700;
}
.rr-pill.sub {
  padding: 8px 15px;
  font-size: 11px;
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.12em;
}
.rr-pill.sub:hover { border-color: var(--neon); color: var(--neon); }
.rr-pill.sub.active {
  background: rgba(var(--neon-rgb),0.15);
  border-color: var(--neon);
  color: var(--neon);
  font-weight: 600;
}

/* ---------- Custom sort dropdown — shared ---------- */
.rr-sort-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--mute);
  white-space: nowrap;
}
.rr-sort-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  background: rgba(0,0,0,0.6);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s;
  white-space: nowrap;
  min-width: 130px;
  justify-content: space-between;
}
.rr-sort-btn:hover,
.rr-sort-btn.open { border-color: var(--neon); color: var(--neon); }
.rr-sort-btn .chev { font-size: 9px; transition: transform .15s; opacity: 0.6; }
.rr-sort-btn.open .chev { transform: rotate(180deg); }
.rr-sort-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  min-width: 160px;
  z-index: 100;
  border: 1px solid var(--neon);
  background: #000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.8);
}
.rr-sort-dropdown.open { display: block; }
.rr-sort-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: color .1s, background .1s;
}
.rr-sort-option:last-child { border-bottom: 0; }
.rr-sort-option:hover { color: var(--neon); background: rgba(var(--neon-rgb),0.06); }
.rr-sort-option.active { color: var(--neon); background: rgba(var(--neon-rgb),0.1); }
.rr-sort-option.active::before { content: '▶ '; font-size: 8px; }

/* ---------- Utility ---------- */
.stack { display: grid; gap: 16px; }
.row { display: flex; gap: 16px; align-items: center; }
.spacer { flex: 1; }

@media (max-width: 900px) {
  /* Responsive général (hors header — le pivot header est à 768px) */
  .rr-footer-grid { grid-template-columns: 1fr 1fr; }
  .container { padding: 0 18px; }
}

/* GLOBE réservé desktop + iPad : masqué sur téléphone uniquement (≤767px).
   iPad portrait (768px) conserve les 4 liens. HOME/SHOP/ABOUT visibles partout. */
@media (max-width: 767px) {
  /* ───── TÉLÉPHONE = NOUVEAU header (3 juin 2026) ───── */
  .rr-nav { gap: 2px; }
  .rr-nav a { padding: 8px 10px; font-size: 12px; }
  .rr-nav-globe { display: none; }                          /* GLOBE réservé ≥768 */
  .rr-logo .tag { display: none; }                          /* tagline ≥768 only */
  .rr-topstrip .left span:not(:first-child) { display: none; }
  .rr-topstrip .rr-cart .rr-cart-label { display: none; }   /* icône + badge seuls → topstrip court */
  /* B2 : 3e ligne RÉ-AFFICHÉE → compteur mobile sur 3 lignes (chiffre + EN STOCK + ÉCOUTÉS) */
  .rr-count-n  { font-size: 36px; }                         /* 4 juin : 46 → 36 (anti-wrap ; bloc compteur borné par le label Robotron mesuré ~111px) */
  .rr-logo-img { height: 108px; width: 170px; }             /* 4 juin : logo 190 → 170 → marge 29px à 360px (mesuré, sans débordement) */
  .rr-header-inner { column-gap: 14px; }                    /* resserre logo↔compteur → tient à 390px (~24px de marge) */
  .rr-topstrip { padding: calc(8px + env(safe-area-inset-top)) 18px 8px; }
  /* 7 juin 2026 — marque dans le topstrip + bouton couleurs dans le header (mobile, toutes pages) */
  .rr-topstrip-brand { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--neon); }
  .rr-topstrip .left .rr-topstrip-brand .rr-mini-planet { display: inline-block; width: 26px; height: 26px; }
  .rr-topstrip .left .rr-topstrip-brand .rr-wordmark { display: inline-block; height: 15px; }   /* topstrip un peu + compact ; scopé .left, sans !important */
  .rr-topstrip .rr-colors-toggle { box-sizing: border-box; }
  .rr-topstrip .rr-lang { height: 28px; box-sizing: border-box; align-items: center; }
  .rr-topstrip .rr-lang button { padding: 0 9px; font-size: 12px; }
  .rr-topstrip .rr-cart { height: 28px; box-sizing: border-box; padding: 0 10px; }
  .rr-topstrip .rr-theme:not(.rr-colors-panel) { display: none; }   /* masque les pastilles brutes, PAS le panneau déroulant (.rr-colors-panel déplacé dans le topstrip) */
  .rr-header .rr-logo { display: none; }
  .rr-colors { display: inline-flex; }
  .rr-count { flex-basis: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   ≥768px (TABLETTE + DESKTOP) = ANCIEN header (revert) — 3 juin 2026
   Topstrip : thème + FR/EN à droite, pas de panier. Header : 1 rangée
   logo | nav | panier. Compteur près-logo masqué (→ hero shop). Voir chrome.js.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  :root { --topstrip-h: 40px; --mainheader-h: 144px; --fixed-header-h: 184px; }

  /* Topstrip ORIGINAL restauré ≥768 : ● LIVE/GENEVA/heure à GAUCHE ·
     pastilles + FR/EN à DROITE. Zones rendues transparentes
     (display:contents) pour ordonner les items directement. */
  .rr-topstrip { justify-content: flex-start; gap: 18px; }
  .rr-topstrip .left,
  .rr-topstrip .center,
  .rr-topstrip .right { display: contents; }
  .rr-live          { display: inline-flex; align-items: center; gap: 8px; order: 1; margin-right: auto; } /* LIVE à gauche, pousse le reste à droite */
  .rr-theme         { order: 3; }
  .rr-lang          { order: 4; }
  .rr-topstrip .rr-cart { display: none; }   /* masque UNIQUEMENT le panier du topstrip (le header .rr-tools le porte ≥768) */

  /* Header : grille logo | nav | panier. grid-row:1 sur les 3 items (3 juin 2026) →
     force 1 SEULE rangée malgré l'ordre DOM (nav→logo→tools) : sans ça, l'auto-placement
     grid sparse renvoie le logo en rangée 2 (header sur 2 rangées à ≥768). */
  .rr-header { padding: 0 32px; }   /* gouttière 32px sur la barre pleine largeur → l'inner se centre DEDANS = modèle imbriqué identique au hero (logo aligné sur le « D », sans 100vw) — 2026-06-15 */
  .rr-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 40px;
    padding: 18px 0;                /* était 18px 32px — gouttière déplacée sur .rr-header */
    max-width: 1480px;
    margin: 0 auto;
  }
  .rr-logo  { grid-column: 1; grid-row: 1; justify-self: start; }
  .rr-header .rr-logo { margin-left: -14px; }   /* nudge optique : le masque PNG (contain) centre le logo → ~20px de vide à gauche ; compense pour aligner le globe VISIBLE sur le « D » du hero — 2026-06-15 */
  .rr-nav   { grid-column: 2; grid-row: 1; justify-self: center; flex-basis: auto; }
  .rr-tools { grid-column: 3; grid-row: 1; justify-self: end; display: flex; }
  .rr-count { display: none; }            /* compteur près-logo masqué ≥768 → hero shop */
  .rr-nav a { padding: 12px 22px; font-size: 15px; }
  .rr-nav-globe { display: inline-block; } /* GLOBE visible ≥768 */
}

/* =========================================================
   RETRO 90s PIXEL CURSOR
   ========================================================= */
html, body {
  cursor: url("cursor-arrow.png") 1 1, auto;
}
a, button, input, textarea, select, label,
[role="button"], [onclick],
.btn, .gbtn, .sbtn, .cbtn, .check, .knob, .tog {
  cursor: url("cursor-arrow.png") 1 1, pointer;
}
button[disabled], input[disabled], [aria-disabled="true"] {
  cursor: url("cursor-arrow.png") 1 1, not-allowed;
}

/* ════════════════════════════════════════════════════════════════════
   PASS NAV — wayfinding calme (2026-05-29)
   But : faire reculer la nav principale (.rr-nav) pour qu'elle cesse de se lire
   comme une rangée de chips de filtre (.pill). Surcharge les règles .rr-nav a
   de la section header (l.471-488). N'affecte PAS .pill. GLOBAL (rave.css chargé
   partout) → nav cohérente sur toutes les pages. Layout header / RR.mount / logo
   NON touchés. Rollback = supprimer ce bloc.
   ════════════════════════════════════════════════════════════════════ */

/* Repos : teinte atténuée theme-aware (recule), tracking aéré, AUCUN cadre */
.rr-nav a{
  color:color-mix(in srgb, var(--fg) 60%, transparent);
  letter-spacing:0.2em;
  border-color:transparent;
  background:none;
}
/* Survol : le label passe en blanc cassé theme-aware — sans soulignement, cadre ni fond */
.rr-nav a:hover{
  color:color-mix(in srgb, var(--fg) 18%, white);
  border-color:transparent;
  background:none;
}
/* Actif (page courante) : accent néon sur le TEXTE seul (+ chevron « » » conservé,
   l.488) → plus de cadre ni de fond, désolidarisé du look pill actif. */
.rr-nav a.active{
  color:var(--neon);
  border-color:transparent;
  background:none;
}

/* @keyframes requis par .rrp-track-bars span — complété LOT 4 P0 (2026-06-01), était absent de rave.css */
@keyframes tlBar { 0%,100%{transform:scaleY(0.3);} 50%{transform:scaleY(1);} }

/* ===== RRP FOOTER PLAYER (commun shop/globe) — extrait de shop_v2.html, 2026-06-01 ===== */
.rrp {
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:#040404;
    border-top:1px solid var(--neon-soft);
    box-shadow:0 -2px 20px rgba(var(--neon-rgb),0.06);
    transform:translateY(100%);
    opacity:0;
    transition:transform 175ms cubic-bezier(0.22,1,0.36,1), opacity 175ms ease;
  }
.rrp.peek {
    transform:translateY(calc(100% - 48px));
    opacity:1;
  }
.rrp.open {
    transform:translateY(0);
    opacity:1;
  }
.rrp-handle {
    height:48px;
    background:color-mix(in srgb, var(--neon) 10%, #000);
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 20px;
    cursor:pointer;
    border-bottom:1px solid var(--line);
    user-select:none;
  }
.rrp-handle .rrp-signal {
    display:flex;align-items:center;gap:7px;
    font-family:var(--mono);font-size:10px;letter-spacing:0.22em;
    text-transform:uppercase;color:var(--neon-soft);flex-shrink:0;
  }
.rrp-handle .rrp-dot {
    width:5px;height:5px;border-radius:50%;
    background:var(--neon-soft);
    animation:pulse 2s ease-in-out infinite;
    flex-shrink:0;
  }
.rrp-handle .rrp-now {
    font-family:var(--mono);font-size:13px;color:var(--fg);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    flex:1;
  }
.rrp-handle .rrp-now b { color:#fff;font-family:var(--display);font-weight:700;margin-right:6px; }
.rrp-handle .rrp-chev {
    color:var(--mute);font-size:12px;transition:transform .2s;flex-shrink:0;
  }
.rrp.open .rrp-handle .rrp-chev { transform:rotate(180deg); }
.rrp-handle .rrp-meta {
    display:flex;align-items:center;gap:6px;flex-shrink:0;
    font-family:var(--mono);font-size:10px;
  }
.rrp-handle .rrp-meta .rrp-genre { color:var(--neon-soft);letter-spacing:0.18em;text-transform:uppercase; }
.rrp-handle .rrp-meta .rrp-meta-sep { color:var(--line-2); }
.rrp-handle .rrp-meta .rrp-year { color:var(--mute);letter-spacing:0.12em; }
.rrp-handle .rrp-htransport { display:flex;align-items:center;flex-shrink:0; }
.rrp-body {
    display:grid;
    grid-template-columns:180px 1fr 200px;
    gap:0;
    height:180px;
    overflow:hidden;
  }
.rrp-cover {
    position:relative;
    width:180px;height:180px;
    background:#080808;
    border-right:1px solid var(--line);
    overflow:hidden;
    flex-shrink:0;
    align-self:flex-start;
    display:flex;align-items:center;justify-content:center;
    flex-direction:column;
  }
.rrp-cover-inner {
    position:relative;
    width:100%;
    flex:1;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
.rrp-cover-img {
    position:relative;
    width:100%;height:100%;
    object-fit:contain;
    object-position:center;
    z-index:1;
    filter:saturate(0.88) contrast(1.04);
    transition:filter .3s;
  }
.rrp-cover-fb {
    position:absolute;inset:0;z-index:1;width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
  }
.rrp-cover-inner::after {
    content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
    background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.18) 3px,rgba(0,0,0,0.18) 4px);
  }
.rrp-cover.playing .rrp-cover-img { filter:saturate(0.95) contrast(1.04); }
.rrp-bar-wrap {
    width:100%;height:5px;             /* 3→5 : piste plus épaisse (ajustable) */
    background:var(--line);
    flex-shrink:0;
    position:relative;
    overflow:visible;                  /* laisse dépasser le curseur .rrp-bar::after */
  }
.rrp-bar {
    position:absolute;top:0;left:0;height:100%;width:0%;
    background:var(--neon);            /* contraste : néon plein (était --neon-soft, peu lisible) */
    transition:width .9s linear;
    box-shadow:0 0 6px rgba(var(--neon-rgb),0.45);   /* léger glow CRT */
  }
/* Curseur (tête de lecture) — indicatif partout ; le seek reste géré par .rrp-bar-wrap.
   Sur globe desktop : purement indicatif (pas de seek au clic). */
.rrp-bar::after {
    content:'';
    position:absolute;
    right:-1px; top:50%;
    transform:translate(50%,-50%);
    width:11px; height:11px;           /* taille du curseur (ajustable) */
    border-radius:50%;
    background:var(--neon);
    box-shadow:0 0 8px rgba(var(--neon-rgb),0.6);
    pointer-events:none;
  }
.rrp-cover-novid {
    position:absolute;bottom:12px;left:0;right:0;text-align:center;z-index:5;
    font-family:var(--mono);font-size:8px;letter-spacing:.18em;
    color:rgba(255,255,255,0.15);text-transform:uppercase;display:none;
  }
.rrp-transport {
    display:flex;
    align-items:center;
    gap:0;
    padding:0 16px;
    height:40px;
    border-bottom:1px solid var(--line);
    background:rgba(0,0,0,0.6);
    flex-shrink:0;
  }
.rrp-center {
    display:grid;
    grid-template-rows:auto 1fr;
    overflow:hidden;
    border-right:1px solid var(--line);
  }
.rrp-btn {
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;
    background:none;
    border:none;                /* ← no border */
    outline:none;
    color:var(--mute);
    font-family:var(--mono);
    font-size:14px;
    line-height:1;
    animation:none;
    cursor:pointer;
    transition:none !important;
    user-select:none;
    -webkit-user-select:none;
    padding:0;
    letter-spacing:0;
    border-radius:2px;
  }
.rrp-btn:hover {
    color:var(--neon-ui);
    text-shadow:0 0 8px rgba(var(--neon-rgb),0.5);  /* hover glow only */
  }
.rrp-btn:active {
    color:var(--neon);
    text-shadow:0 0 14px rgba(var(--neon-rgb),0.8);
    transform:none !important;
    box-shadow:none !important;
  }
.rrp-btn:focus-visible { box-shadow:none !important; border-radius:2px; }
.rrp-btn.rrp-playpause:focus-visible { box-shadow:none !important; }
.rrp-btn.rrp-playpause {
    width:44px;
    font-size:18px;
    color:var(--neon-ui);
    margin:0 2px;
  }
.rrp-btn.rrp-playpause:hover {
    color:var(--neon);
    text-shadow:0 0 12px rgba(var(--neon-rgb),0.6);
  }
.rrp.playing .rrp-btn.rrp-playpause {
    color:var(--neon-ui);
    text-shadow:0 0 8px rgba(var(--neon-rgb),0.35);
  }
.rrp-ctrl-sep {
    width:1px;height:14px;
    background:var(--line-2);
    margin:0 6px;
    flex-shrink:0;
  }
.rrp-time {
    font-family:var(--mono);font-size:11px;letter-spacing:0.08em;
    color:var(--mute);
    padding:0 10px;
    margin-left:4px;
    white-space:nowrap;
    display:flex;align-items:center;gap:3px;
  }
.rrp-time .rrp-cur { color:var(--neon-soft); }
.rrp-time .rrp-time-sep { color:var(--line-2); }
.rrp-time .rrp-tot { color:var(--mute); }
.rrp-tracklist {
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--line-2) transparent;
  }
.rrp-tracklist::-webkit-scrollbar { width:3px; }
.rrp-tracklist::-webkit-scrollbar-thumb { background:var(--line-2); }
.rrp-track {
    display:grid;
    grid-template-columns:28px 1fr auto;
    align-items:center;
    gap:10px;
    padding:5px 14px;
    cursor:pointer;
    transition:opacity .1s;
  }
.rrp-track:last-child { border-bottom:0; }
.rrp-track:not(.active):hover .rrp-track-num,
  .rrp-track:not(.active):hover .rrp-track-title { opacity:0.82; }
.rrp-track .rrp-track-num {
    font-family:var(--mono);font-size:11px;color:var(--mute);
    letter-spacing:0.08em;text-align:center;opacity:0.55;
  }
.rrp-track .rrp-track-play { display:none;color:var(--neon-soft);font-size:9px; }
.rrp-track .rrp-track-title {
    font-family:var(--mono);font-size:13px;
    color:var(--fg);letter-spacing:0.04em;line-height:1.4;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0.5;
  }
.rrp-track .rrp-track-dur {
    font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:0.08em;
  }
.rrp-track.active .rrp-track-num,
  .rrp-track.active .rrp-track-title,
  .rrp-track.active .rrp-track-play { opacity:1; }
.rrp-track.active .rrp-track-title { text-shadow:0 0 5px rgba(var(--neon-rgb),0.35); }
.rrp-track.active .rrp-track-num { display:none; }
.rrp-track.active .rrp-track-play { display:block; }
.rrp-track.active .rrp-track-title { color:#e8e8e8;font-weight:600; }
.rrp-track.active .rrp-track-dur { color:var(--neon-soft); }
.rrp-track-bars {
    display:inline-flex;gap:2px;align-items:flex-end;height:10px;
    vertical-align:middle;margin-left:5px;
  }
.rrp-track-bars span {
    display:block;width:2px;background:var(--neon-soft);
    border-radius:1px;animation:tlBar 0.9s ease-in-out infinite;
  }
.rrp-track-bars span:nth-child(1) {height:3px;animation-delay:0s;}
.rrp-track-bars span:nth-child(2) {height:8px;animation-delay:0.18s;}
.rrp-track-bars span:nth-child(3) {height:5px;animation-delay:0.36s;}
.rrp-center.paused .rrp-track-bars span { animation-play-state:paused; }
.rrp-track.no-video { cursor:default; }
.rrp-track.no-video:hover { background:transparent; }
.rrp-track.no-video .rrp-track-num { color:var(--mute); }
.rrp-track.no-video .rrp-track-title { color:var(--mute); }
.rrp-track.no-video .rrp-track-noprev {
    font-family:var(--mono);font-size:9px;letter-spacing:0.12em;
    color:var(--dim);text-transform:uppercase;flex-shrink:0;
  }
.rrp-buy {
    display:flex;flex-direction:column;gap:10px;
    padding:16px;
    background:rgba(0,0,0,0.6);
    border-left:1px solid var(--line);
    justify-content:center;
  }
.rrp-buy .rrp-buy-label {
    font-family:var(--mono);font-size:9px;color:var(--mute);
    letter-spacing:0.24em;text-transform:uppercase;
  }
.rrp-buy .rrp-buy-price {
    font-family:var(--display);font-weight:800;
    font-size:34px;color:var(--neon-ui);letter-spacing:-0.02em;line-height:1;
  }
.rrp-buy .rrp-buy-meta {
    font-family:var(--mono);font-size:10px;color:var(--mute);
    letter-spacing:0.1em;line-height:1.5;
    text-transform:uppercase;
  }
.rrp-buy .rrp-buy-cta {
    width:100%;padding:12px;
    background:var(--neon-ui);          /* filled — strongest CTA */
    border:none;
    color:#000;                          /* dark text on neon bg */
    font-family:var(--mono);font-weight:700;font-size:10px;
    letter-spacing:0.22em;text-transform:uppercase;cursor:pointer;
    transition:box-shadow .15s, filter .15s;
  }
.rrp-buy .rrp-buy-cta:hover {
    filter:brightness(1.12);
    box-shadow:0 0 14px rgba(var(--neon-rgb),0.35);
  }
.rrp-buy .rrp-buy-cta:active {
    filter:brightness(0.9);
  }
@media(max-width:1100px) {
  .rrp-body {grid-template-columns:180px 1fr;height:auto;max-height:55vh;overflow-y:auto;}
  .rrp-cover {width:180px;height:auto;min-height:180px;}
  .rrp-buy {display:none;}
  .rrp-time {display:none;}
}
.rrp-tracklist .rrp-track-num,
.rrp-tracklist .rrp-track-title,
.rrp-tracklist .rrp-track-dur { font-family:'RR-ToshibaSat', var(--mono); }
.rrp-tracklist .rrp-track-num { letter-spacing:0.14em; font-size:12px; color:color-mix(in srgb, var(--neon) 45%, #fff); }
.rrp-tracklist .rrp-track-title { font-family:'RR-Robotron', var(--mono); font-size:14px; letter-spacing:0.02em; text-transform:none; }
.rrp-handle .rrp-signal { font-family:'RR-ToshibaSat', var(--mono); font-size:14px; color:var(--neon); text-shadow:0 0 8px rgba(var(--neon-rgb),0.45); }
.rrp-handle .rrp-now { font-family:'RR-Robotron', var(--mono); font-weight:400; font-size:16px; letter-spacing:0.02em; text-transform:none; color:color-mix(in srgb, var(--neon) 50%, #fff); }
.rrp-handle .rrp-now b { font-family:'RR-Doto', var(--display); font-weight:800; font-size:18px; text-transform:uppercase; letter-spacing:0.01em; color:#fff; }
.rrp-buy { position:relative; justify-content:center; }
.rrp-buy .rrp-buy-label { position:absolute; top:16px; left:16px; margin:0; font-family:'RR-Robotron', var(--mono); font-size:13px; letter-spacing:0.24em; color:color-mix(in srgb, var(--neon) 50%, #fff); }
.rrp-buy .rrp-buy-meta { position:absolute; top:16px; right:16px; margin:0; font-family:'RR-Robotron', var(--mono); font-size:13px; letter-spacing:0.24em; color:color-mix(in srgb, var(--neon) 50%, #fff); }
.rrp-buy .rrp-buy-price { font-family:'RR-Robotron', var(--mono); font-weight:400; font-size:40px; letter-spacing:0.04em; text-transform:uppercase; color:var(--neon-ui); text-align:center; text-shadow:0.8px 0 0 currentColor, -0.8px 0 0 currentColor, 0 0 14px rgba(var(--neon-rgb),0.35); }
.rrp-buy .rrp-buy-cta { position:absolute; left:16px; right:16px; bottom:16px; width:auto; font-family:'RR-ToshibaSat', var(--mono); font-weight:700; font-size:16px; letter-spacing:0.1em; text-indent:0.1em; padding:12px 12px; color:#000; }
.rrp-handle .rrp-meta .rrp-genre { letter-spacing:0.2em; font-size:11px; color:var(--neon); }
.rrp-handle .rrp-meta .rrp-year { letter-spacing:0.12em; font-size:11px; }
.rrp-tracklist, .rrp-body { scrollbar-width:none; -ms-overflow-style:none; }
.rrp-tracklist::-webkit-scrollbar, .rrp-body::-webkit-scrollbar { display:none; width:0; height:0; }
.rrp-track, .rrp-handle { cursor: url("assets/cursor-arrow.png") 1 1, pointer; }
.rrp-transport .rrp-btn { font-size:17px; }
.rrp-transport .rrp-btn.rrp-playpause { font-size:22px; }
.rrp-transport .rrp-ctrl-sep { display:none; }
.rrp-transport { gap:6px; }
.rrp-buy {
  position:static;            /* annule position:relative (l.742) */
  flex-direction:column;
  align-items:flex-start;     /* pile alignée à GAUCHE */
  justify-content:center;     /* centrage vertical du groupe (comme globe) */
  gap:10px;
}
.rrp-buy > div:first-child { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.rrp-buy .rrp-buy-label,
.rrp-buy .rrp-buy-meta {           /* PRICE + condition : jumeaux discrets, encadrent le montant */
  position:static;
  font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-weight:500;
  font-size:14px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg); opacity:0.55;
}
.rrp-buy .rrp-buy-price {          /* montant CHF unifié — seul élément en accent */
  position:static;            /* annule le centrage absolu (l.749) */
  font-family:'RR-Robotron', var(--mono);   /* = #deck-buy #deck-price du globe */
  font-weight:400;                            /* = globe */
  font-size:40px;                             /* = globe (#deck-buy #deck-price) */
  letter-spacing:0.04em;                      /* = globe */
  line-height:1;
  text-transform:uppercase;                   /* = globe */
  text-align:left;
  white-space:nowrap;          /* "CHF 888" : une seule ligne, jamais de wrap */
  color:var(--neon);                                 /* vert PUR, comme .price des cartes */
  text-shadow:0.8px 0 0 currentColor, -0.8px 0 0 currentColor, 0 0 16px rgba(var(--neon-rgb),0.35);   /* épaississement RR-Robotron (= globe) + glow deck shop */
}
.rrp-buy .rrp-buy-cta {            /* ADD TO CART — apparence inchangée, repassé dans le flux */
  position:static;            /* annule absolute bottom (l.751) */
  width:100%;
  background:var(--neon);   /* unifie sur le même vert exact que le prix (#39FF14) */
}
.rrp-handle .rrp-signal { font-size:15px; text-shadow:none; }
.rrp-handle .rrp-signal .rrp-genre {
  font-family:'RR-ToshibaSat', var(--mono);
  font-size:14px; letter-spacing:0.16em; font-weight:700; line-height:1;
  text-transform:uppercase; color:#000;
  display:inline-block; padding:3px 7px; border-radius:0; text-indent:0.16em;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px), var(--neon);
  box-shadow:0 0 6px rgba(var(--neon-rgb),0.35);
}
.rrp-handle .rrp-now { font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace; color:var(--fg); }
.rrp-handle .rrp-meta .rrp-genre {
  font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  color:var(--fg); opacity:0.55;
}
.rrp-handle .rrp-meta .rrp-year {
  font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  color:var(--fg); opacity:0.40;
}
.rrp-tracklist .rrp-track-title {
  font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  color:var(--fg);
  font-weight:500;
  text-shadow:none;
}
.rrp-track.active .rrp-track-title {
  font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-weight:500;
  color:color-mix(in srgb, var(--fg) 30%, white);
}
.rrp-transport .rrp-btn { color:color-mix(in srgb, var(--neon) 50%, black); font-size:22px; }
.rrp-transport .rrp-btn.rrp-playpause { color:color-mix(in srgb, var(--neon) 50%, black); }
.rrp-time, .rrp-time .rrp-cur, .rrp-time .rrp-tot { color:color-mix(in srgb, var(--neon) 50%, black); }
.rrp-transport .rrp-btn:hover { color:var(--neon); text-shadow:none; }
.rrp.playing .rrp-btn.rrp-playpause { color:var(--neon); text-shadow:none; }

/* ─────────────────────────────────────────────────────────────
   Compteur stock — MASQUÉ dans le header sur tout le mobile (≤767px).
   7 juin 2026 : sur shop, le compteur est désormais dans le hero
   (.shop-hero .counter) ; les autres pages mobile n'affichent pas de
   compteur dans le header.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .rr-count { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   Refonte header (Direction 1) — 7 juin 2026. MOBILE-ONLY, desktop intact.
   Accueil : gros logo centré en mobile. Pages internes : gros logo (desktop)
   → mini-planète + wordmark (mobile). Mini-planète = masque néon (comme .rr-logo-img),
   sans .rr-logo-fx donc jamais glitchée. Valeurs de taille = départ, à caler à l'œil.
   ───────────────────────────────────────────────────────────── */
.rr-mini-planet, .rr-wordmark { display: none; }   /* masqués par défaut = desktop intact */
.rr-mini-planet {
  width: 30px; height: 30px; flex-shrink: 0;
  background-color: var(--neon);
  -webkit-mask: url("logos/planet.png") no-repeat center / contain;
          mask: url("logos/planet.png") no-repeat center / contain;
  filter: drop-shadow(0 0 6px rgba(var(--neon-rgb),0.35));
}
.rr-wordmark {
  display: none;                     /* masqué par défaut (desktop/iPad) — réaffiché en mobile via les overrides @media max-767 */
  height: 18px;                      /* hauteur du wordmark — SEUL knob à nudger */
  aspect-ratio: 737 / 159;           /* ratio exact du PNG découpé → largeur auto */
  width: auto;
  font-size: 0;                      /* masque le texte (conservé dans le DOM pour l'accessibilité) */
  background-color: var(--neon);
  -webkit-mask: url("logos/wordmark-mask.png") no-repeat center / contain;
          mask: url("logos/wordmark-mask.png") no-repeat center / contain;
  filter: drop-shadow(0 0 6px rgba(var(--neon-rgb),0.35));
}
/* 7 juin 2026 — Logo hero (Home) : masqué par défaut (desktop/iPad inchangés), affiché <768 (voir @media). */
.hero-logo { display: none; }
@media (max-width: 767px) {
  /* 7 juin 2026 — MOBILE-ONLY : gros logo Home déplacé du header vers le hero. Header mobile = marque compacte. */
  .rr-logo-home { display: inline-flex; align-items: center; gap: 10px; }
  .rr-logo-home .rr-logo-fx { display: none; }
  .rr-logo-home .rr-mini-planet { display: inline-block; }
  .rr-logo-home .rr-wordmark { display: inline-block; }
  .hero-logo { display: block; margin: 0 0 24px; }
  .hero-logo .rr-logo-img { height: 140px; width: 250px; margin-left: auto; margin-right: auto; }   /* centré + taille validée */
  .rr-logo-internal { display: inline-flex; align-items: center; gap: 10px; }
  .rr-logo-internal .rr-logo-fx { display: none; }           /* masque le gros logo en mobile */
  .rr-logo-internal .rr-mini-planet { display: inline-block; }
  .rr-logo-internal .rr-wordmark { display: inline-block; }
}

/* ── Accessibilité / SEO — titre visuellement masqué mais lisible par les moteurs ── */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}