/* ============================================================
   Trame — registre neutre
   Généré depuis la planche « Fondations ». Importer en PREMIER,
   avant toute autre feuille de style.

   Principes : un seul accent, des filets semi-transparents plutôt
   que des traits pleins, une élévation en deux couches, Inter seul
   avec un tracking qui suit la taille, et un mouvement court.
   ============================================================ */

:root {
  /* ---------- surfaces ---------- */
  --c-page:          #fbfbfc;
  --c-card:          #ffffff;
  --c-editor:        #fafafa;
  --c-sunken:        #f1f1f3;   /* pistes, squelettes, remplissages inertes */
  --c-tile:          #f4f4f6;   /* tuiles d'icône, puces discrètes */
  --c-accent-soft:   #eeeefb;   /* état actif, surfaces IA */
  --c-accent-wash:   #e4e4f8;   /* surlignage de sélection */
  --c-scrim:         rgba(9, 9, 11, 0.44);
  --c-material:      rgba(9, 9, 11, 0.86);   /* barre contextuelle, calques flottants */

  /* ---------- texte ---------- */
  --c-ink:           #09090b;
  --c-ink-2:         #52525b;
  --c-ink-3:         #6a6a74;   /* 4,7:1 minimum sur toutes les surfaces claires */
  --c-control:       #a1a1aa;   /* contours de champ — jamais du texte */

  /* ---------- accent (un seul) ---------- */
  --c-accent:        #5b57d6;
  --c-accent-hover:  #6d68e6;
  --c-accent-text:   #4b47c0;   /* l'accent quand il porte du texte sur fond clair */
  --c-solid:         #18181b;   /* action pleine neutre */
  --c-solid-hover:   #27272a;

  /* ---------- statut (toujours accompagné d'un mot) ---------- */
  --c-ok:            #2c6b4f;
  --c-ok-strong:     #22573f;
  --c-ok-soft:       #edf3f0;
  --c-warn:          #8a6218;
  --c-warn-strong:   #6e4e12;
  --c-warn-soft:     #f6f1e6;
  --c-err:           #a83f4d;
  --c-err-strong:    #8e3341;
  --c-err-soft:      #f9eef0;

  /* ---------- filets ---------- */
  --c-line:          rgba(9, 9, 11, 0.08);
  --c-line-strong:   rgba(9, 9, 11, 0.13);

  /* ---------- élévation : une couche courte, une longue ---------- */
  --shadow-default:  0 1px 2px rgba(9, 9, 11, 0.04), 0 4px 12px rgba(9, 9, 11, 0.045);
  --shadow-floating: 0 4px 12px rgba(9, 9, 11, 0.06), 0 12px 32px rgba(9, 9, 11, 0.10);
  --shadow-modal:    0 8px 20px rgba(9, 9, 11, 0.08), 0 24px 56px rgba(9, 9, 11, 0.14);
  --shadow-up:       0 -4px 12px rgba(9, 9, 11, 0.06), 0 -12px 32px rgba(9, 9, 11, 0.10);

  /* ---------- rayons ---------- */
  --r-xs: 3px;  --r-sm: 6px;  --r-md: 8px;
  --r-lg: 10px; --r-xl: 12px; --r-2xl: 16px; --r-pill: 999px;

  /* ---------- espacement · grille 4px ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* ---------- typographie · Inter seul ----------
     Le tracking suit la taille : négatif quand elle monte,
     légèrement positif sur les micro-étiquettes. */
  --font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --t-display:  600 44px/48px var(--font);   --tr-display:  -0.032em;
  --t-title:    600 28px/34px var(--font);   --tr-title:    -0.026em;
  --t-heading:  600 20px/28px var(--font);   --tr-heading:  -0.018em;
  --t-read:     400 17px/29px var(--font);   --tr-read:     -0.011em;
  --t-body:     400 15px/23px var(--font);   --tr-body:     -0.008em;
  --t-ui:       400 14px/22px var(--font);   --tr-ui:       -0.006em;
  --t-small:    400 13px/20px var(--font);   --tr-small:    -0.004em;
  --t-micro:    600 11px/14px var(--font);   --tr-micro:     0.02em;

  /* ---------- mesures ---------- */
  --size-control: 48px;   /* hauteur de contrôle mobile */
  --size-touch:   44px;   /* cible tactile minimale */
  --size-sidebar: 232px;
  --size-rail:    72px;
  --size-panel:   320px;
  --size-read:    720px;  /* 640 quand le panneau droit est ouvert */

  /* ---------- mouvement ----------
     Jamais ease-in : il retarde le premier mouvement, celui que
     l'œil regarde. Rien au-dessus de 300 ms sur de l'interface. */
  --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:  cubic-bezier(0.32, 0.72, 0, 1);

  --d-press:    140ms;   /* retour de pression */
  --d-popover:  180ms;   /* infobulle, menu */
  --d-dropdown: 220ms;
  --d-sheet:    280ms;   /* feuille, tiroir, modale */
}

/* ---------- mode sombre ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-page:        #09090b;
    --c-card:        #141417;
    --c-editor:      #101013;
    --c-sunken:      #1d1d21;
    --c-tile:        #202024;
    --c-accent-soft: #1e1c33;
    --c-accent-wash: #272248;
    --c-scrim:       rgba(0, 0, 0, 0.62);
    --c-material:    rgba(20, 20, 23, 0.88);

    --c-ink:         #fafafa;
    --c-ink-2:       #a1a1aa;
    --c-ink-3:       #8a8a94;
    --c-control:     #4d4d55;

    --c-accent:       #8a86f0;
    --c-accent-hover: #9a96f6;
    --c-accent-text:  #a5a1ff;
    --c-solid:        #fafafa;
    --c-solid-hover:  #e4e4e7;

    --c-ok-soft:     #14261e;
    --c-warn-soft:   #241c0d;
    --c-err-soft:    #2a1418;

    --c-line:        rgba(255, 255, 255, 0.09);
    --c-line-strong: rgba(255, 255, 255, 0.15);
  }
}

:root[data-theme="dark"] {
  --c-page: #09090b;        --c-card: #141417;         --c-editor: #101013;
  --c-sunken: #1d1d21;      --c-tile: #202024;
  --c-accent-soft: #1e1c33; --c-accent-wash: #272248;
  --c-scrim: rgba(0, 0, 0, 0.62);
  --c-material: rgba(20, 20, 23, 0.88);
  --c-ink: #fafafa;         --c-ink-2: #a1a1aa;        --c-ink-3: #8a8a94;
  --c-control: #4d4d55;
  --c-accent: #8a86f0;      --c-accent-hover: #9a96f6; --c-accent-text: #a5a1ff;
  --c-solid: #fafafa;       --c-solid-hover: #e4e4e7;
  --c-ok-soft: #14261e;     --c-warn-soft: #241c0d;    --c-err-soft: #2a1418;
  --c-line: rgba(255, 255, 255, 0.09);
  --c-line-strong: rgba(255, 255, 255, 0.15);
}

/* ============================================================
   Socle. Ces quelques règles font la moitié du registre.
   ============================================================ */

body {
  margin: 0;
  font: var(--t-ui);
  letter-spacing: var(--tr-ui);
  background: var(--c-page);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Toute chose pressable répond à la pression. C'est le détail qui
   fait qu'une interface a l'air d'écouter. */
button,
a[href],
[role="button"] {
  transition:
    transform        var(--d-press) var(--ease-out),
    background-color var(--d-press) ease,
    color            var(--d-press) ease,
    box-shadow       var(--d-press) ease;
}
button:active,
a[href]:active,
[role="button"]:active { transform: scale(0.97); }

/* Le survol seulement là où il existe vraiment. */
@media (hover: hover) and (pointer: fine) {
  a[href]:hover { color: var(--c-accent-text); }
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Moins de mouvement ne veut pas dire aucun retour : on garde
   l'opacité et la couleur, on retire le déplacement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Deux utilitaires qui reviennent partout.
   ============================================================ */

/* Un filet semi-transparent, pas un trait plein : il reste juste
   sur n'importe quel fond, et il suit le mode sombre tout seul. */
.sty-hairline { border: 1px solid var(--c-line); }

/* Matière sombre flottante : barre d'action contextuelle,
   infobulle, calque au-dessus du contenu. */
.sty-material {
  background: var(--c-material);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  color: #ffffff;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-floating);
}

/* ============================================================
   Compléments de l'application
   Les valeurs dont les écrans ont besoin et que la planche
   « Fondations » ne nommait pas encore. Elles vivent ici, et
   seulement ici : app.css ne contient aucune valeur en dur.
   ============================================================ */
:root {
  /* titres d'écran : 38/46 au bureau, 34/42 tablette, 28/34 mobile */
  --t-screen:   700 38px/46px var(--font);  --tr-screen: -0.032em;
  --t-screen-sm: 700 28px/34px var(--font);
  --t-card-title: 600 22px/28px var(--font); --tr-card-title: -0.02em;
  --t-lead:     400 17px/27px var(--font);   --tr-lead: -0.011em;
  --t-timer:    600 56px/60px var(--font);   --tr-timer: -0.03em;
  --t-mono:     500 13px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --size-tabbar:     56px;
  --size-fab:        56px;
  --size-tile:       40px;
  --size-tile-lg:    48px;
  --size-avatar:     30px;
  --size-avatar-lg:  64px;
  --size-hibou:      260px;
  --size-hibou-sm:   150px;
  --size-max-panneau: 380px;   /* la conversation avec Max */
  --size-max-bulle:  360px;    /* la bulle de la visite guidée */
  --size-max-hibou:  28px;
  /* Le visage de Max (js/max-visage.js) : capsule, conversation, visite, illustrations. */
  --size-max-visage-capsule: 32px;
  --size-max-visage-bulle:   48px;
  --size-max-visage-tete:    80px;
  --size-max-visage-dit:     64px;
  --size-max-visage-vide:    132px;
  --size-max-visage-grand:   220px;
  --size-max-hauteur: 580px;
  --size-carte-min:  300px;
  --size-modal:      660px;
  --size-modal-large: 720px;
  --size-sous-nav:   272px;
  --size-editeur:    620px;
  --size-lecteur:    300px;
  --size-recherche:  56px;
  --size-auth:       548px;
  --size-onboarding: 560px;
  --size-bouton-rond: 72px;
  --size-onde:       64px;
  --size-point:      8px;
  --size-point-actif: 24px;
  --size-filet:      1px;
  --size-filet-epais: 2px;
  --size-barre-ecart: 2px;
  --size-heure:      56px;
  --size-heure-planning: 40px;
  --size-bulle-min: 50px; --size-bulle-max: 82px;   /* rayons des bulles de la carte des savoirs */
  --size-languette: 26px; --size-languette-mobile: 16px; --size-avatar-profil: 72px;   /* poignée du panneau sur tablette */
  --size-avatar-xs: 28px; --size-point-saisie: 6px;   /* « en train d’écrire » */
  /* tailles propres à certains écrans */
  --size-icone-xs: 14px; --size-icone-sm: 18px; --size-icone-md: 22px; --size-icone-lg: 34px;
  --size-signe: 28px; --size-mot: 70px; --size-mot-ouverture: 200px;
  --size-tuile-sm: 36px; --size-barre-haute: 60px; --size-cellule: 80px; --size-bouton-rec: 84px;
  --size-scene-onde: 130px; --size-note: 140px; --size-fil: 180px; --size-menu: 220px;
  --size-bouton-large: 240px; --size-jauge: 250px; --size-bouton-reveler: 280px;
  --size-colonne-sm: 300px; --size-colonne: 340px; --size-champ-entete: 350px; --size-champ: 420px;
  --size-visuel: 440px; --size-jauge-large: 460px; --size-signal: 480px; --size-texte-etroit: 520px;
  --size-avance: 540px; --size-jugements: 760px; --size-carte-revision: 856px; --size-chrono: 96px;
  --t-question: 600 26px/34px var(--font);
  /* aperçus du choix de thème : les deux thèmes, quel que soit le thème actif */
  --c-apercu-clair: #fafafa; --c-apercu-clair-2: #e4e4e7; --c-apercu-clair-3: #ffffff;
  --c-apercu-sombre: #09090b; --c-apercu-sombre-2: #27272a; --c-apercu-sombre-3: #141417;
  --size-case-jour:  96px;
  --size-noeud:      12px;

  --c-rec:           var(--c-err);          /* le point d'enregistrement */
  --c-surligne:      var(--c-accent-wash);
  /* La trame vivante (points du logo qui s'animent dans les zones libres). */
  --c-trame-1: #6a66e6; --c-trame-2: #3531a6; --trame-force: 0.75;
  --c-trame-bleu: #3f66e8; --c-trame-violet: #7a4fe8;   /* le dégradé signature, pour la trame vivante */
  /* Fond des discussions de groupe (kit « trame-fond-discussion ») : dosages mesurés pour
     laisser les horodatages à 4,5:1 ; ne pas les monter. */
  --c-fond-point: color-mix(in srgb, var(--c-accent) 9%, transparent);
  --fond-trame-taille: 512px;
  /* Surligneur de l'éditeur : les teintes des séries, adoucies pour rester lisibles sous le texte. */
  --c-sl-jaune:  color-mix(in srgb, var(--c-serie-4) 34%, transparent);
  --c-sl-vert:   color-mix(in srgb, var(--c-serie-3) 28%, transparent);
  --c-sl-bleu:   color-mix(in srgb, var(--c-serie-1) 24%, transparent);
  --c-sl-rose:   color-mix(in srgb, var(--c-serie-5) 30%, transparent);
  --c-sl-orange: color-mix(in srgb, var(--c-serie-2) 26%, transparent);
  --c-sur-sombre:    #ffffff;               /* texte sur la matière sombre */
  --c-sur-sombre-2:  rgba(255, 255, 255, 0.72);
  --c-sur-sombre-bouton: rgba(255, 255, 255, 0.14);
  --c-sur-sombre-survol: rgba(255, 255, 255, 0.10);
  --c-on-accent:     #ffffff;
  /* la scène d'enregistrement reste sombre, quel que soit le thème */
  --c-scene:         #09090b;
  --c-scene-2:       #1d1d21;
  --c-scene-ligne:   rgba(255, 255, 255, 0.24);
  --c-scene-onde:    #7d79f0;
  --c-scene-eteint:  #4d4d55;
  --c-scene-rec:     #d07a86;
  --s-16: 64px;
}
@media (max-width: 1279px) {
  :root { --t-screen: 700 34px/42px var(--font); --size-editeur: 620px; }
}
@media (max-width: 767px) {
  :root { --t-screen: 700 28px/34px var(--font); --tr-screen: -0.026em; --t-timer: 600 48px/52px var(--font); }
}

/* Apparence et accessibilité (Réglages → Apparence) */
:root[data-texte="grand"] {
  --t-read: 400 19px/32px var(--font); --t-body: 400 16px/25px var(--font);
  --t-ui: 400 15px/23px var(--font);   --t-small: 400 14px/21px var(--font);
}
:root[data-texte="tres-grand"] {
  --t-read: 400 21px/35px var(--font); --t-body: 400 18px/28px var(--font);
  --t-ui: 400 17px/26px var(--font);   --t-small: 400 15px/23px var(--font); --t-micro: 600 13px/16px var(--font);
}
:root[data-densite="compact"] { --size-control: 40px; }
:root[data-contraste] {
  --c-ink-2: var(--c-ink); --c-ink-3: var(--c-ink-2);
  --c-line: rgba(9, 9, 11, 0.22); --c-line-strong: rgba(9, 9, 11, 0.36);
}
:root[data-contraste][data-theme="dark"] { --c-line: rgba(255, 255, 255, 0.26); --c-line-strong: rgba(255, 255, 255, 0.4); }
:root[data-mouvement-reduit] {
  --d-press: 1ms; --d-popover: 1ms; --d-dropdown: 1ms; --d-sheet: 1ms;
}

/* Mode sombre : les teintes d'état du design system n'y ont pas de valeur.
   Elles sont relevées pour rester lisibles sur les fonds sombres (≥ 4.5:1). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-ok: #4fae83;  --c-ok-strong: #7fd1aa;
    --c-warn: #c9922e; --c-warn-strong: #e6be6e;
    --c-err: #d0606e; --c-err-strong: #f09aa4;
  }
}
:root[data-theme="dark"] {
  --c-ok: #4fae83;  --c-ok-strong: #7fd1aa;
  --c-warn: #c9922e; --c-warn-strong: #e6be6e;
  --c-err: #d0606e; --c-err-strong: #f09aa4;
}

/* Séries des graphiques générés (validées : daltonisme, écart normal, bande de clarté).
   Série 1 = l'accent. Les versions « -clair » servent à l'image PNG insérée dans le texte. */
:root {
  --c-serie-1: #5b57d6; --c-serie-2: #eb6834; --c-serie-3: #1baf7a; --c-serie-4: #eda100;
  --c-serie-1-clair: #5b57d6; --c-serie-2-clair: #eb6834; --c-serie-3-clair: #1baf7a; --c-serie-4-clair: #eda100;
  /* Secteurs : deux teintes de plus, dans l'ordre de la palette (voisines distinctes). */
  --c-serie-5: #e87ba4; --c-serie-6: #008300;
  --c-serie-5-clair: #e87ba4; --c-serie-6-clair: #008300;
  --c-graphique-axe: #52525b;
  /* Couleurs des cours dans le planning : la palette des séries, plus un bleu et un rouge.
     Elles teintent le fond et la barre latérale ; le texte reste à l'encre. */
  --c-cours-1: #5b57d6; --c-cours-2: #eb6834; --c-cours-3: #1baf7a; --c-cours-4: #eda100;
  --c-cours-5: #e87ba4; --c-cours-6: #008300; --c-cours-7: #2a78d6; --c-cours-8: #e34948;
  --mix-cours: 14%;
  --size-banniere-cours: 96px; --size-banniere-cours-mobile: 72px; --size-banniere-page: 140px;
  --size-anneau-tuile: 4px; --size-nuance: 92px;
  /* Le motif des groupes (hiboux, livres, « Better Everyday »), en variante claire et sombre. */
  --fond-groupes: url("../img/fonds/groupes-clair.jpg"); --size-motif-groupes: 560px;
  --size-graphique: 640px;
  /* Carte des savoirs : reflet et creux des bulles pleines, étiquette posée sur le dégradé. */
  --c-reflet-bulle: rgba(255, 255, 255, 0.55); --c-creux-bulle: rgba(20, 10, 80, 0.22);
  --c-etiquette-pleine: rgba(20, 12, 90, 0.28); --c-pastille-pleine: #7ef0b8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --c-serie-1: #7d79ea; --c-serie-2: #d95926; --c-serie-3: #199e70; --c-serie-4: #c98500; --c-serie-5: #d55181; --c-serie-6: #008300;
    --c-cours-1: #7d79ea; --c-cours-2: #d95926; --c-cours-3: #199e70; --c-cours-4: #c98500; --c-cours-5: #d55181; --c-cours-6: #1f9a1f; --c-cours-7: #3987e5; --c-cours-8: #e66767; --mix-cours: 24%; --fond-groupes: url("../img/fonds/groupes-sombre.jpg");
    --c-reflet-bulle: rgba(255, 255, 255, 0.32); --c-creux-bulle: rgba(8, 4, 40, 0.35); }
}
:root[data-theme="dark"] { --c-serie-1: #7d79ea; --c-serie-2: #d95926; --c-serie-3: #199e70; --c-serie-4: #c98500; --c-serie-5: #d55181; --c-serie-6: #008300;
  --c-cours-1: #7d79ea; --c-cours-2: #d95926; --c-cours-3: #199e70; --c-cours-4: #c98500; --c-cours-5: #d55181; --c-cours-6: #1f9a1f; --c-cours-7: #3987e5; --c-cours-8: #e66767; --mix-cours: 24%; --fond-groupes: url("../img/fonds/groupes-sombre.jpg");
    --c-reflet-bulle: rgba(255, 255, 255, 0.32); --c-creux-bulle: rgba(8, 4, 40, 0.35); }

/* Boutons, bascules et assistant (maquette Figma « Boutons pour Trame », 24/09/2026).
   Le dégradé bleu → violet est celui de l'état actif et du survol. */
:root {
  --c-bouton:          #4b47c0;   /* bouton principal au repos */
  --c-degrade-debut:   #4169e8;
  --c-degrade-fin:     #7754e8;
  --degrade-bouton:    linear-gradient(90deg, var(--c-degrade-debut) 0%, var(--c-degrade-fin) 54%);
  --degrade-bascule:   linear-gradient(90deg, var(--c-degrade-debut) 0%, var(--c-degrade-fin) 60%);
  --degrade-halo:      linear-gradient(120deg, var(--c-degrade-debut) 0%, var(--c-degrade-fin) 100%);
  --c-bascule-eteinte: #d9d9d9;
  --c-assistant-fond:  #eeeefb;
  --c-assistant-bord:  rgba(88, 84, 196, 0.8);
  --shadow-bouton:     0 4px 4px rgba(0, 0, 0, 0.25);
  --shadow-bascule-eteinte: inset 20px 4px 50px rgba(0, 0, 0, 0.25);
  --shadow-bascule-active:  inset 0 4px 50px rgba(0, 0, 0, 0.25);
  --r-bouton:          20px;
  --size-bascule-l:    48px;
  --size-bascule-h:    24px;
  --size-bascule-rond: 21px;
  --size-assistant:    44px;
  --size-assistant-icone: 16px;
  --c-assistant-eteint: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --c-bascule-eteinte: #4d4d55; }
}
:root[data-theme="dark"] { --c-bascule-eteinte: #4d4d55; }
/* Les logos de l'assistant ont leur fond de pastille intégré (blanc éteint, lavande allumé) :
   le rond garde ces fonds dans les deux thèmes. */

/* Trame vivante en sombre : des points plus clairs, un peu plus présents sur le noir. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-trame-1: #8d8af2; --c-trame-2: #5b57d6; --trame-force: 0.9; --c-trame-bleu: #6a93ff; --c-trame-violet: #a985ff; } }
:root[data-theme="dark"] { --c-trame-1: #8d8af2; --c-trame-2: #5b57d6; --trame-force: 0.9; --c-trame-bleu: #6a93ff; --c-trame-violet: #a985ff; }

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-fond-point: color-mix(in srgb, var(--c-accent) 18%, transparent); } }
:root[data-theme="dark"] { --c-fond-point: color-mix(in srgb, var(--c-accent) 18%, transparent); }
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  :root { --c-fond-point: rgba(91, 87, 214, 0.09); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-fond-point: rgba(138, 134, 240, 0.18); } }
  :root[data-theme="dark"] { --c-fond-point: rgba(138, 134, 240, 0.18); }
}

/* Le visage de Max se détache du fond : un anneau, une ombre portée, un halo.
   En clair, l'ombre suffit ; en sombre, l'anneau et le halo prennent le relais. */
:root { --c-max-anneau: rgba(106, 102, 230, 0.22); --c-max-ombre: rgba(20, 18, 50, 0.32); --c-max-halo: rgba(106, 102, 230, 0.16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-max-anneau: rgba(165, 161, 255, 0.42); --c-max-ombre: rgba(0, 0, 0, 0.7); --c-max-halo: rgba(141, 138, 242, 0.3); } }
:root[data-theme="dark"] { --c-max-anneau: rgba(165, 161, 255, 0.42); --c-max-ombre: rgba(0, 0, 0, 0.7); --c-max-halo: rgba(141, 138, 242, 0.3); }