/* Beedy Design Language — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #fef7ff; /* Fond de page. Sur le portfolio, porte la trame de points `dot`. */
  --scl: #f7f2fa; /* Surface container low : zones calmes, rail de navigation au repos, fonds de blocs « À faire / À éviter ». */
  --sc: #f3edf7; /* Surface container : fond par défaut des cartes (`.card`, MetricCard). Pas d'ombre : la teinte suffit. */
  --sch: #ece6f0; /* Surface container high : dialogues, séparateurs de lignes (`.row` border-top), bordure du rail. */
  --schh: #e6e0e9; /* Surface container highest : barre de recherche pilule, piste du switch éteint. */
  --scc: #ffffff; /* Surface container lowest : fond des puces de code et des journaux. */
  --primary: #6750a4; /* Action principale : bouton filled, switch allumé, liens, anneau de focus. Un seul élément primary dominant par écran. */
  --on-primary: #ffffff; /* Texte et icônes sur `primary`. */
  --pc: #eaddff; /* Primary container : badges de section (cookie), logo, carte « Série en cours », FAB. */
  --on-pc: #21005d; /* Texte sur `pc`. */
  --secc: #e8def8; /* Secondary container : bouton tonal, indicateur actif de navigation, chips pleines, piste inactive du slider. */
  --on-secc: #1d192b; /* Texte sur `secc`. */
  --tertiary: #7d5260; /* Accent tertiaire, rare : mise en avant secondaire, séries de graphiques hors statut. */
  --on-tertiary: #ffffff; /* Texte sur `tertiary`. Puce active et interrupteur des variantes Chrome. */
  --tc: #ffd8e4; /* Tertiary container : formes décoratives d'accent (MetricCard), tuiles « favoris ». */
  --on-tc: #31111d; /* Texte sur `tc`. */
  --error: #b3261e; /* Erreur et action destructive (`.btn-danger`). */
  --on-error: #ffffff; /* Texte sur `error`. */
  --ec: #f9dedc; /* Error container : snackbar d'erreur, bandeau SOS de Stabilité. */
  --on-ec: #410e0b; /* Texte sur `ec`. */
  --on-surface: #1d1b20; /* Texte principal sur `surface`, `scl`, `sc`, `sch`, `schh`. */
  --on-sv: #49454f; /* Texte secondaire, labels, icônes au repos, sur toutes les surfaces container. */
  --outline: #79747e; /* Bordures de contrôles : bouton outlined, champ de texte, switch éteint. 3:1 sur les surfaces. */
  --outline-v: #cac4d0; /* Outline variant : bordures décoratives, chips outline, filet des titres de section, rail de progression. Jamais seule pour signaler un état. */
  --dot: rgba(73, 69, 79, 0.18); /* Trame de points 30px du fond de page (portfolio). Décor uniquement. */
  --ok: #2e7d32; /* Statut OK (service actif, conteneur en marche). Toujours accompagné d'un mot ou d'une icône. */
  --on-ok: #ffffff; /* Texte sur `ok`. */
  --warn: #8a5a00; /* Statut avertissement (disque presque plein, mise à jour dispo). */
  --on-warn: #ffffff; /* Texte sur `warn`. */
  --bad: #b3261e; /* Statut en panne / arrêté. Même valeur que `error`, rôle sémantique distinct. */
  --on-bad: #ffffff; /* Texte sur `bad`. */
  --series-1: #6750a4; /* Série 1 des graphiques (CPU). Validée daltonisme sur `surface`. */
  --series-2: #008a73; /* Série 2 des graphiques (RAM). */
  --hero-on: #e6e0e9; /* Texte sur la photo sombre du hero (portfolio), identique dans les deux thèmes. */
  --hero-primary: #d0bcff; /* Bouton principal du hero sur photo sombre. */
  --hero-on-primary: #381e72; /* Texte sur `hero-primary`. */
  --gloss-hi: rgba(255, 255, 255, 0.75); /* VARIANTE Plaza / Chrome : reflet du haut d'une bulle, posé en dégradé par-dessus un rôle de surface (`scl`, `sc`). Sans teinte, donc compatible Material You. */
  --gloss-edge: rgba(255, 255, 255, 0.95); /* VARIANTE : liseré lumineux interne de 1px en haut des bulles et du chrome. */
  --shade: rgba(0, 0, 0, 0.14); /* VARIANTE : ombre interne des champs et pistes en creux, ombre douce sous les bulles. */
  --shadow-float: 0 6px 20px rgba(0, 0, 0, 0.35); /* Snackbar et éléments flottants uniquement. */
  --shadow-plaza: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 0 rgba(0, 0, 0, 0.08), 0 6px 14px rgba(0, 0, 0, 0.12); /* VARIANTE Plaza : volume d'une bulle. Neutre, la teinte vient du rôle de surface dessous. */
  --shadow-chrome: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.3); /* VARIANTE Chrome : biseau métallique. Neutre. */
}
[data-theme="dark"] {
  --surface: #141218;
  --scl: #1d1b20;
  --sc: #211f26;
  --sch: #2b2930;
  --schh: #36343b;
  --scc: #0f0d13;
  --primary: #d0bcff;
  --on-primary: #381e72;
  --pc: #4f378b;
  --on-pc: #eaddff;
  --secc: #4a4458;
  --on-secc: #e8def8;
  --tertiary: #efb8c8;
  --on-tertiary: #492532;
  --tc: #633b48;
  --on-tc: #ffd8e4;
  --error: #f2b8b5;
  --on-error: #601410;
  --ec: #8c1d18;
  --on-ec: #f9dedc;
  --on-surface: #e6e0e9;
  --on-sv: #cac4d0;
  --outline: #938f99;
  --outline-v: #49454f;
  --dot: rgba(202, 196, 208, 0.16);
  --ok: #8fd694;
  --on-ok: #0b3a12;
  --warn: #f6c177;
  --on-warn: #3a2600;
  --bad: #f2b8b5;
  --on-bad: #601410;
  --series-1: #9478e8;
  --series-2: #1e9e81;
  --hero-on: #e6e0e9;
  --hero-primary: #d0bcff;
  --hero-on-primary: #381e72;
  --gloss-hi: rgba(255, 255, 255, 0.10);
  --gloss-edge: rgba(255, 255, 255, 0.16);
  --shade: rgba(0, 0, 0, 0.45);
  --shadow-plaza: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 0 rgba(0, 0, 0, 0.4), 0 6px 14px rgba(0, 0, 0, 0.4);
}
:root {
  --space-1: 4px; /* Écart icône/libellé de navigation, gap de piste de progression. */
  --space-1-5: 6px; /* Gap entre items du rail, padding vertical des chips. */
  --space-2: 8px; /* Gap dans les boutons et entre boutons de pied de dialogue. */
  --space-3: 12px; /* Gap des en-têtes de carte, de la barre du haut, padding vertical des lignes. */
  --space-4: 16px; /* Gap entre cartes d'une page, gouttière mobile minimale. */
  --space-5: 20px; /* Padding vertical des cartes, padding des dialogues, marge sous la barre du haut. */
  --space-6: 24px; /* Padding horizontal des dialogues, padding des boutons portfolio. */
  --space-8: 32px; /* Padding horizontal de la colonne principale (desktop). */
  --space-12: 48px; /* Respiration en bas de page. */
  --radius-xs: 3px; /* Case à cocher. */
  --radius-sm: 6px; /* Tooltip, puce de code. */
  --radius-chip: 8px; /* Chips (rectangle arrondi, jamais pilule). */
  --radius-md: 12px; /* Champ de texte outlined, snackbar. */
  --radius-lg: 16px; /* Indicateur de navigation 56×32, tuiles d'image. */
  --radius-btn: 20px; /* Bouton 40px (moitié de la hauteur : pilule). */
  --radius-xl: 24px; /* Bouton 48px, MetricCard compacte, cartes Stabilité. */
  --radius-card: 28px; /* Cartes, dialogues, barre de recherche 56px. */
  --radius-hero: 36px; /* Grande carte de couverture (README GitHub). */
  --state-hover: 0.08; /* Calque d'état au survol, couleur = currentColor. */
  --state-press: 0.12; /* Calque d'état à l'appui. */
  --state-ripple: 0.16; /* Ondulation (ripple) au clic. */
  --state-disabled: 0.5; /* Contrôle désactivé. */
  --font-sans: 'Google Sans Flex', 'Google Sans', 'Roboto Flex', system-ui, sans-serif;
  --font-mono: 'Google Sans Code', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  --font-rounded: 'M PLUS Rounded 1c', 'Nunito', 'Google Sans Flex', system-ui, sans-serif;
  --font-chrome: 'Michroma', 'Google Sans Flex', system-ui, sans-serif;
  --text-display: 500 68px/72px var(--font-sans); /* Nom en couverture (carte du README GitHub). Un seul par page. */
  --text-metric: 400 48px/1 var(--font-sans); /* Valeur d'une MetricCard. 34px en compact. Chiffres tabulaires. */
  --text-section-title: 500 36px/44px var(--font-sans); /* Titre de section du portfolio, clamp(28px, 4vw, 36px), précédé du badge cookie numéroté. */
  --text-brand: 500 30px/36px var(--font-sans); /* Nom de l'app en capitales espacées dans la barre du haut. */
  --text-page-title: 500 30px/36px var(--font-sans); /* Titre de page (h1) d'une app. */
  --text-dialog-title: 500 22px/28px var(--font-sans); /* Titre de dialogue. */
  --text-card-title: 500 20px/26px var(--font-sans); /* Titre de carte (`.card-head h2`). */
  --text-body: 400 15px/1.45 var(--font-sans); /* Texte courant. */
  --text-label: 600 14px/20px var(--font-sans); /* Libellé de bouton. Graisse 600 (vps-admin) retenue, voir Écarts. */
  --text-small: 400 13px/18px var(--font-sans); /* Sous-texte, métadonnées, légendes. */
  --text-chip: 600 12px/16px var(--font-sans); /* Texte de chip et de libellé de navigation (500). */
  --text-code: 400 13px/20px var(--font-mono); /* Commandes et valeurs techniques, dans une puce `scc`. */
  --text-plaza-title: 800 26px/32px var(--font-rounded); /* VARIANTE. Titres en arrondi gras, façon Rodin du menu Wii U. */
  --text-plaza-body: 500 15px/22px var(--font-rounded); /* VARIANTE. Texte courant Plaza. */
  --text-y2k-display: 400 22px/28px var(--font-chrome); /* VARIANTE. Affichage étiré, en capitales, titres et boutons seulement. Le texte courant reste en `sans`. */
}
.display {
  font-family: var(--font-sans);
  font-size: 68px;
  line-height: 72px;
  font-weight: 500;
  letter-spacing: -1px;
}
.metric {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}
.section-title {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 44px;
  font-weight: 500;
  letter-spacing: 0;
}
.brand {
  font-family: var(--font-sans);
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: 0.14em;
}
.page-title {
  font-family: var(--font-sans);
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: 0;
}
.dialog-title {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0;
}
.card-title {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
}
.chip {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0;
}
.code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.plaza-title {
  font-family: var(--font-rounded);
  font-size: 26px;
  line-height: 32px;
  font-weight: 800;
  letter-spacing: 0;
}
.plaza-body {
  font-family: var(--font-rounded);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: 0;
}
.y2k-display {
  font-family: var(--font-chrome);
  font-size: 22px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0.08em;
}
@font-face {
  font-family: "Google Sans Flex";
  src: url("fonts/google-sans-flex-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans Flex";
  src: url("fonts/google-sans-flex-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}