/* STRUCTURE — jamais thémé, identique chez tous les studios.
   Espacement, rayons, échelle typographique, durées, courbes.
   Un studio ne redéfinit RIEN d'ici : c'est ce qui fait que le produit
   reste le même produit, quelle que soit la marque posée dessus. */
:root{
/* Espacement — base 4 px */
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;--space-40:160px;
/* Rayons */
--radius-none:0;--radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-2xl:40px;--radius-pill:999px;
/* Tailles de contrôle */
--size-control-sm:32px;--size-control-md:40px;--size-control-lg:52px;--size-icon-sm:16px;--size-icon-md:20px;--size-icon-lg:24px;
/* Gabarits */
--container-page:1180px;--container-wide:1440px;--container-prose:660px;--sidebar-width:248px;--topbar-height:52px;--gutter:var(--space-6);
/* Échelle typographique */
--text-2xs:11px;--text-xs:12px;--text-sm:13px;--text-md:15px;--text-lg:17px;--text-xl:21px;--text-2xl:28px;--text-3xl:40px;--text-4xl:56px;--text-5xl:80px;--text-6xl:112px;
--leading-tight:1.04;--leading-snug:1.14;--leading-normal:1.5;--leading-relaxed:1.62;
--tracking-display:-0.035em;--tracking-tight:-0.018em;--tracking-normal:-0.005em;--tracking-caps:0.08em;
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-black:800;
/* Mouvement */
--ease-out:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.83,0,.17,1);
--dur-fast:150ms;--dur-base:300ms;--dur-slow:700ms;
/* Flou */
--blur-panel:blur(30px) saturate(180%);--blur-glass:blur(48px) saturate(180%);
}

/* SÉMANTIQUE — les seuls noms que les composants ont le droit d'employer.
   Tout se DÉDUIT des variables de marque du thème actif (themes/*.css).

   La règle qui rend le clair et le sombre presque gratuits :
   on ne mélange jamais vers le BLANC, on mélange vers --brand-ink.
   En thème sombre l'encre est claire, donc le survol éclaircit ;
   en thème clair l'encre est sombre, donc le survol assombrit.
   Une seule formule, les deux sens.

   POURQUOI LE SELECTEUR PORTE AUSSI [data-theme-scope] :
   une propriete personnalisee est substituee LA OU ELLE EST DECLAREE. Ecrite
   seulement sur :root, --accent y est resolu une fois pour toutes, et un
   descendant qui redefinit --brand-accent herite quand meme de la valeur deja
   calculee : rien ne change a l'ecran. En repetant le bloc sur
   [data-theme-scope], tout element portant cet attribut RE-DECLARE les alias
   depuis SES propres variables de marque. C'est ce qui rend possible l'apercu
   en direct de ThemeEditor, et deux themes cote a cote dans la console
   editeur. Trouve le 14/09/2026 : sans ca, l'apercu restait rouge Metronome
   quelle que soit la couleur saisie. */
:root,[data-theme-scope]{

/* Fonds */
--bg-page:var(--brand-surface);
--bg-sunken:var(--brand-surface);
--bg-raised:var(--brand-surface-raised);
--bg-elevated:color-mix(in oklab, var(--brand-surface-raised), var(--brand-ink) 4%);
--bg-card:color-mix(in oklab, transparent, var(--brand-ink) 5%);
--bg-hover:color-mix(in oklab, var(--brand-surface-raised), var(--brand-ink) 8%);
--bg-inverse:var(--brand-ink);

/* Texte — quatre niveaux, du plein au presque effacé */
--text-primary:var(--brand-ink);
--text-secondary:color-mix(in oklab, var(--brand-surface), var(--brand-ink) 80%);
--text-muted:color-mix(in oklab, var(--brand-surface), var(--brand-ink) 60%);
--text-faint:color-mix(in oklab, var(--brand-surface), var(--brand-ink) 44%);
--text-inverse:var(--brand-surface);
--text-accent:var(--brand-highlight);
--text-link:var(--brand-info);

/* Bordures — filets translucides, jamais des traits pleins */
--border-subtle:color-mix(in oklab, transparent, var(--brand-ink) 8%);
--border-default:color-mix(in oklab, transparent, var(--brand-ink) 13%);
--border-strong:color-mix(in oklab, transparent, var(--brand-ink) 24%);
--border-accent:var(--brand-accent);

/* Accent */
--accent:var(--brand-accent);
--accent-hover:color-mix(in oklab, var(--brand-accent), var(--brand-ink) 18%);
--accent-active:color-mix(in oklab, var(--brand-accent), var(--brand-surface) 18%);
--accent-fg:var(--brand-accent-fg);
--accent-glow:color-mix(in oklab, transparent, var(--brand-accent) 32%);

/* Verre */
--glass-bg:color-mix(in oklab, transparent, var(--brand-ink) 5%);
--glass-bg-strong:color-mix(in oklab, transparent, var(--brand-ink) 8%);
--glass-border:color-mix(in oklab, transparent, var(--brand-ink) 10%);
--glass-border-strong:color-mix(in oklab, transparent, var(--brand-ink) 16%);

/* STATUTS — NIVEAU PRODUIT, JAMAIS THÉMÉS.
   Chez Metronome la couleur d'accent EST le rouge d'erreur : si les statuts
   suivaient la marque, un studio à l'accent vert afficherait ses erreurs en
   vert. Une information de sécurité ne se décline pas. */
--status-success:#30D158;
--status-warning:#E9B45F;
--status-danger:#E11836;
--status-info:#4C8DFF;
--status-success-bg:color-mix(in oklab, transparent, var(--status-success) 12%);
--status-warning-bg:color-mix(in oklab, transparent, var(--status-warning) 12%);
--status-danger-bg:color-mix(in oklab, transparent, var(--status-danger) 12%);
--status-info-bg:color-mix(in oklab, transparent, var(--status-info) 12%);

/* Focus — une seule valeur, produit, pour que l'anneau soit reconnaissable
   d'un studio à l'autre comme il l'est d'un système d'exploitation à l'autre */
--focus-ring:0 0 0 3px color-mix(in oklab, transparent, var(--status-info) 45%);

/* Typographie composée */
--font-display:var(--brand-font-display);
--font-body:var(--brand-font-body);
--font-mono:var(--brand-font-mono);
--type-display:600 var(--text-5xl)/var(--leading-tight) var(--font-display);
--type-h1:600 var(--text-4xl)/var(--leading-tight) var(--font-display);
--type-h2:600 var(--text-3xl)/var(--leading-snug) var(--font-display);
--type-h3:600 var(--text-2xl)/var(--leading-snug) var(--font-display);
--type-h4:600 var(--text-xl)/var(--leading-snug) var(--font-display);
--type-body:400 var(--text-lg)/var(--leading-relaxed) var(--font-body);
--type-body-sm:400 var(--text-md)/var(--leading-normal) var(--font-body);
--type-label:500 var(--text-sm)/1 var(--font-body);
--type-overline:600 var(--text-xs)/1 var(--font-body);
--type-mono:400 var(--text-sm)/1.4 var(--font-mono);
--type-mono-lg:500 var(--text-xl)/1 var(--font-mono);

/* Ombres — portées par le fond du thème, pas par du noir absolu */
--shadow-sm:0 1px 2px color-mix(in oklab, transparent, var(--brand-shadow) 50%);
--shadow-md:0 6px 20px color-mix(in oklab, transparent, var(--brand-shadow) 50%);
--shadow-lg:0 24px 70px color-mix(in oklab, transparent, var(--brand-shadow) 65%);
--shadow-glow:0 0 0 1px color-mix(in oklab, transparent, var(--brand-accent) 45%),0 0 48px var(--accent-glow);
--inset-line:inset 0 1px 0 color-mix(in oklab, transparent, var(--brand-ink) 6%);

/* Forme d'onde — motif signature, suit la mise en avant du studio */
--waveform:var(--brand-highlight);
--waveform-muted:color-mix(in oklab, transparent, var(--brand-ink) 14%);
--meter-green:var(--status-success);--meter-amber:var(--status-warning);--meter-red:var(--status-danger);

/* Dégradés de protection sur photo — dépendent du fond, pas du noir */
--gradient-protect:linear-gradient(180deg,transparent 0%,color-mix(in oklab,transparent,var(--brand-shadow) 35%) 45%,color-mix(in oklab,transparent,var(--brand-shadow) 92%) 100%);
--gradient-protect-top:linear-gradient(180deg,color-mix(in oklab,transparent,var(--brand-shadow) 75%) 0%,transparent 40%);
--gradient-glass:linear-gradient(160deg,color-mix(in oklab,transparent,var(--brand-ink) 8%),color-mix(in oklab,transparent,var(--brand-ink) 2%));
}

/* THÈME — Metronome Label Music (sombre). Premier client, thème de référence.
   Structure d'un thème :
     1. les variables de marque   <- le seul bloc à remplir pour un studio neuf
     2. les ajustements           <- facultatif, pour une palette réglée à la main
     3. l'héritage                <- propre à Metronome, à ne PAS recopier ailleurs
*/

/* ---- 1. VARIABLES DE MARQUE ------------------------------------------ */
:root{
--brand-scheme:dark;
--brand-accent:#E11836;          /* velours des murs du studio */
--brand-accent-fg:#FFFFFF;
--brand-highlight:#FBDA9B;       /* néon doré de l'enseigne */
--brand-info:#4C8DFF;            /* LED bleue des rampes de régie */
--brand-surface:#000000;         /* noir pur */
--brand-surface-raised:#0B0B0D;
--brand-ink:#F5F5F7;
--brand-shadow:#000000;
--brand-font-display:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Geist","Helvetica Neue",sans-serif;
--brand-font-body:"SF Pro Text",-apple-system,BlinkMacSystemFont,"SF Pro Display","Geist","Helvetica Neue",sans-serif;
--brand-font-mono:"SF Mono","Geist Mono",ui-monospace,Menlo,monospace;
}

/* ---- 2. AJUSTEMENTS -------------------------------------------------- */
/* La palette de Metronome a été réglée à la main sur les photographies du
   studio. On garde ses valeurs exactes plutôt que les dérivées, pour que la
   bascule vers le nouveau socle ne déplace AUCUNE couleur existante.
   Un studio neuf n'a pas ce bloc : les dérivées lui suffisent. */
:root{
--bg-elevated:#121215;
--bg-hover:#1A1A1F;
--bg-card:rgba(255,255,255,.045);
--text-secondary:#C9C9CF;
--text-muted:#98989F;
--text-faint:#6E6E76;
--border-subtle:rgba(255,255,255,.08);
--border-default:rgba(255,255,255,.13);
--border-strong:rgba(255,255,255,.24);
--accent-hover:#FF5E77;
--accent-active:#B3122A;
--glass-bg:rgba(255,255,255,.045);
--glass-bg-strong:rgba(255,255,255,.075);
--glass-border:rgba(255,255,255,.10);
--glass-border-strong:rgba(255,255,255,.16);
}

/* ---- 3. HÉRITAGE ----------------------------------------------------- */
/* Palette nommée de Metronome, employée par les composants et les kits écrits
   avant le contrat de tokens. Elle vit DANS le thème, ce qui est sa place :
   « velours » et « néon doré » sont des mots de Metronome, pas du produit.
   NE PAS recopier ce bloc dans le thème d'un autre studio. */
:root{
--ink-1000:#000000;--ink-950:#06060700;--ink-900:#060607;--ink-850:#0B0B0D;--ink-800:#121215;--ink-700:#1A1A1F;--ink-600:#26262D;--ink-500:#34343D;
--velvet-200:#FF8A9B;--velvet-300:#FF5E77;--velvet-400:#E11836;--velvet-500:#B3122A;--velvet-600:#8A0A1C;--velvet-700:#5C0512;--velvet-glow:rgba(225,24,54,.32);
--gold-200:#FFEFC9;--gold-300:#FBDA9B;--gold-400:#E9B45F;--gold-500:#C8913C;--gold-glow:rgba(251,218,155,.26);
--led-300:#8FB6FF;--led-400:#4C8DFF;--led-500:#2B6BFF;--led-glow:rgba(76,141,255,.26);
--bone-50:#F5F5F7;--bone-100:#E8E8ED;--bone-200:#C9C9CF;--bone-300:#98989F;--bone-400:#6E6E76;--bone-500:#48484E;
--glass-highlight:rgba(255,255,255,.32);
--glow-velvet:var(--velvet-glow);--glow-gold:var(--gold-glow);--glow-led:var(--led-glow);
--gradient-velvet:linear-gradient(135deg,var(--velvet-400),var(--velvet-600));
--gradient-gold:linear-gradient(135deg,var(--gold-200),var(--gold-400));
--gradient-halo:radial-gradient(60% 60% at 50% 0%,var(--velvet-glow),transparent 70%);
--shadow-glass:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 var(--glass-border-strong);
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
/* Anciens noms, conservés tant que les kits ne sont pas repris */
--espresso-950:var(--ink-1000);--espresso-900:var(--ink-900);--espresso-850:var(--ink-850);--espresso-800:var(--ink-800);--espresso-700:var(--ink-700);--espresso-600:var(--ink-600);
--parchment-50:var(--bone-50);--parchment-100:var(--bone-100);--parchment-200:var(--bone-200);--parchment-300:var(--bone-200);--parchment-400:var(--bone-300);--parchment-500:var(--bone-400);
--brass-300:var(--gold-300);--brass-400:var(--gold-400);--brass-500:var(--gold-500);--brass-600:var(--gold-500);--brass-glow:var(--gold-glow);
--copper-500:var(--velvet-500);--copper-400:var(--velvet-400);--olive-500:var(--status-success);--olive-400:var(--status-success);--teal-500:var(--led-500);
--glow-amber:var(--gold-glow);--glow-violet:var(--led-glow);--glow-teal:var(--led-glow);--glow-red:var(--velvet-glow);
}

/* BASE — la remise à zéro de la page.

   Elle ne contient que ce qu'aucun composant ne peut poser lui-même : le fond
   de la page, l'encre héritée, la famille par défaut et le lissage. Tout le
   reste appartient aux composants.

   Elle se charge EN DERNIER (après le thème) parce qu'elle consomme les alias
   sémantiques — elle n'en définit aucun. */

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: var(--brand-scheme, dark); }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Les chiffres d'un studio se comparent en colonne : facture à facture, durée
   à durée. Sans chasse fixe, les colonnes ne s'alignent pas. */
[data-mono], code, kbd, samp { font-variant-numeric: tabular-nums; }

/* Le focus reste visible partout. Le retirer sans le remplacer rend le
   produit impraticable au clavier, et ça ne se voit pas à la souris. */
:focus-visible { outline: 2px solid var(--border-focus, var(--accent)); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}