/* =========================================================
   Style « Obsidienne » — surfaces en couches, lueurs d'accent, indigo.
   Ne s'applique que sous html[data-apparence="obsidienne"] ; le style
   Classique (theme.css) reste intact. Deux thèmes : clair (défaut) et
   sombre ([data-theme="dark"]). Mêmes tokens que theme.css, redéfinis,
   plus quelques tokens propres (--o-*) pour le relief.
   Choix de l'utilisateur dans Mon compte → Apparence (App\Core\Apparence).
   ========================================================= */

[data-apparence="obsidienne"] {
  --primary-rgb: 91, 108, 255;           /* indigo */
  --primary-hover: #4858F0;
  --primary-soft: #E9EBFF;
  --accent-rgb: 224, 51, 90;             /* framboise */
  --success-rgb: 21, 168, 107;
  --info-rgb: 26, 166, 194;
  --warning-rgb: 217, 138, 26;
  --danger-rgb: 224, 51, 90;

  --gradient-brand: linear-gradient(180deg, #6B7BFF, #4858F0);
  --gradient-brand-soft: linear-gradient(135deg, #6B7BFF, #9B6CFF);
  --gradient-accent: linear-gradient(72deg, #E0335A, #FF8A5C);

  --body-bg: #EEF0F6;
  --surface: #FFFFFF;
  --surface-alt: #F3F4FA;
  --border: rgba(20, 24, 40, .09);
  --border-card: rgba(20, 24, 40, .07);
  --input-border: rgba(20, 24, 40, .14);
  --input-bg: #FFFFFF;
  --hover-bg: #F3F4FA;

  --text: #141828;
  --text-menu: #2A3047;
  --text-muted: #5B6480;
  --text-header: #5B6480;
  --placeholder: #9AA2BA;

  --gray-1: #F7F8FC; --gray-2: #EFF1F7; --gray-3: #E2E5EF; --gray-4: #CDD2E0;
  --gray-5: #9AA2BA; --gray-6: #7C8499; --gray-7: #5B6480; --gray-8: #3B4258; --gray-9: #141828;

  --shadow-sm: 0 1px 2px rgba(20, 24, 40, .06);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px var(--border-card), 0 14px 36px -18px rgba(20, 24, 40, .28);
  --shadow-card-hover: var(--shadow-card);
  --shadow-pop: 0 0 0 1px var(--border-card), 0 30px 70px -20px rgba(20, 24, 40, .4);
  --shadow-primary: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 8px 24px -8px rgba(var(--primary-rgb), .6), 0 0 0 1px rgba(var(--primary-rgb), .45);
  --shadow-menu-active: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 0 0 1px rgba(var(--primary-rgb), .28);
  --header-glass: rgba(238, 240, 246, .72);
  --backdrop: rgba(20, 24, 40, .5);

  --font-family: "Onest", "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --sidebar-bg: linear-gradient(180deg, rgba(246, 247, 251, .8), rgba(238, 240, 246, .8));   /* 20 % de transparence : le fond animé passe dessous */
  --sidebar-text: #4A5270;
  --sidebar-text-strong: #141828;
  --sidebar-muted: #8C94AD;
  --sidebar-hover: rgba(20, 24, 40, .05);
  --sidebar-border: rgba(20, 24, 40, .08);

  /* Tokens propres au relief */
  --o-surface-2: #FBFBFE;                /* haut des cartes (dégradé) */
  --o-ctrl: #ECEEF7;                     /* contrôles, pastilles */
  --o-haut: rgba(255, 255, 255, .9);     /* liseré lumineux en haut */
  --o-lueur: rgba(91, 108, 255, .28);
  --o-halo-1: rgba(91, 108, 255, .14);
  --o-halo-2: rgba(26, 166, 194, .08);
  --o-actif-fond: linear-gradient(180deg, rgba(91, 108, 255, .14), rgba(91, 108, 255, .06));
  --o-actif-texte: #4858F0;
  color-scheme: light;
}

[data-apparence="obsidienne"][data-theme="dark"] {
  --primary-rgb: 124, 140, 255;
  --primary-hover: #A6B1FF;
  --primary-soft: rgba(124, 140, 255, .16);
  --accent-rgb: 255, 92, 122;
  --success-rgb: 61, 220, 151;
  --info-rgb: 79, 209, 232;
  --warning-rgb: 255, 180, 84;
  --danger-rgb: 255, 92, 122;

  --gradient-brand: linear-gradient(180deg, #7C8CFF, #5B6CFF);
  --gradient-brand-soft: linear-gradient(135deg, #7C8CFF, #B06CFF);

  --body-bg: #07080C;
  --surface: #141823;
  --surface-alt: #1A1F2C;
  --border: rgba(255, 255, 255, .07);
  --border-card: rgba(255, 255, 255, .06);
  --input-border: rgba(255, 255, 255, .12);
  --input-bg: #0F1219;
  --hover-bg: rgba(255, 255, 255, .03);

  --text: #EEF0F6;
  --text-menu: #D5D9E6;
  --text-muted: #9AA3B8;
  --text-header: #B4BBCC;
  --placeholder: #5F6880;

  --gray-1: #1A1F2C; --gray-2: #1F2535; --gray-3: #2A3040; --gray-4: #353C4F;
  --gray-5: #5F6880; --gray-6: #7C859C; --gray-7: #9AA3B8; --gray-8: #C5CAD8; --gray-9: #EEF0F6;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .13) inset, 0 0 0 1px var(--border-card), 0 20px 50px -20px rgba(0, 0, 0, .7);
  --shadow-card-hover: var(--shadow-card);
  --shadow-pop: 0 0 0 1px var(--border-card), 0 30px 70px -20px rgba(0, 0, 0, .8);
  --shadow-primary: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 24px -8px rgba(var(--primary-rgb), .45), 0 0 0 1px rgba(var(--primary-rgb), .4);
  --shadow-menu-active: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 0 0 1px rgba(var(--primary-rgb), .3);
  --header-glass: rgba(7, 8, 12, .6);
  --backdrop: rgba(0, 0, 0, .6);

  --sidebar-bg: linear-gradient(180deg, rgba(11, 13, 19, .8), rgba(7, 8, 12, .8));
  --sidebar-text: #9AA3B8;
  --sidebar-text-strong: #FFFFFF;
  --sidebar-muted: #5F6880;
  --sidebar-hover: rgba(255, 255, 255, .04);
  --sidebar-border: rgba(255, 255, 255, .06);

  --o-surface-2: #1A1F2C;
  --o-ctrl: #1F2535;
  --o-haut: rgba(255, 255, 255, .14);
  --o-lueur: rgba(124, 140, 255, .35);
  --o-halo-1: rgba(124, 140, 255, .16);
  --o-halo-2: rgba(79, 209, 232, .08);
  --o-actif-fond: linear-gradient(180deg, rgba(124, 140, 255, .18), rgba(124, 140, 255, .08));
  --o-actif-texte: #FFFFFF;
  color-scheme: dark;
}
[data-apparence="obsidienne"][data-theme="dark"] { --bs-body-color-rgb: 238, 240, 246; }
[data-apparence="obsidienne"] { --bs-body-color-rgb: 20, 24, 40; }

/* ---------- Fond : deux halos fixes derrière tout l'écran */
[data-apparence="obsidienne"] html, html[data-apparence="obsidienne"] {
  background: radial-gradient(900px 500px at 15% -10%, var(--o-halo-1), transparent 60%),
              radial-gradient(700px 400px at 95% 10%, var(--o-halo-2), transparent 60%),
              var(--body-bg);
  background-attachment: fixed;
}
html[data-apparence="obsidienne"] body { background: transparent; }

/* ---------- Fond « liquide » de la partie centrale (bureau seulement) : deux nappes de
   taches pastel très diluées, plus grandes que l'écran, qui tournent lentement en sens
   inverse et respirent. Fixes derrière le contenu (les cartes, opaques, passent devant) ;
   seules des transformations sont animées, donc aucun recalcul de mise en page.
   Arrêtées si le système demande de réduire les animations. */
/* Les nappes sont portées par <body> (bureau seulement) en z-index négatif, et surtout pas par
   .app-content isolé dans son propre plan : les fenêtres modales, qui vivent dans .app-content,
   passaient alors SOUS le voile gris de Bootstrap (ajouté à <body>) et devenaient inutilisables. */
html[data-apparence="obsidienne"][data-fond="liquide"] body:not(.terrain):not(.auth-body)::before,
html[data-apparence="obsidienne"][data-fond="liquide"] body:not(.terrain):not(.auth-body)::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax;
  opacity: var(--o-liquide, .9); will-change: transform;
}
html[data-apparence="obsidienne"][data-fond="liquide"] body:not(.terrain):not(.auth-body)::before {
  background:
    radial-gradient(closest-side at 32% 38%, rgba(124, 140, 255, .34), transparent 100%) 0 0 / 46% 46% no-repeat,
    radial-gradient(closest-side at 50% 50%, rgba(255, 170, 200, .30), transparent 100%) 62% 30% / 40% 40% no-repeat,
    radial-gradient(closest-side at 50% 50%, rgba(120, 220, 210, .28), transparent 100%) 40% 78% / 44% 44% no-repeat;
  animation: o-liquide-a 30s ease-in-out infinite alternate;
}
html[data-apparence="obsidienne"][data-fond="liquide"] body:not(.terrain):not(.auth-body)::after {
  background:
    radial-gradient(closest-side at 50% 50%, rgba(255, 205, 150, .26), transparent 100%) 70% 66% / 42% 42% no-repeat,
    radial-gradient(closest-side at 50% 50%, rgba(176, 140, 255, .28), transparent 100%) 26% 62% / 38% 38% no-repeat,
    radial-gradient(closest-side at 50% 50%, rgba(140, 200, 255, .30), transparent 100%) 56% 22% / 36% 36% no-repeat;
  animation: o-liquide-b 41s ease-in-out infinite alternate;
}
html[data-apparence="obsidienne"][data-theme="dark"] body { --o-liquide: .5; }
@keyframes o-liquide-a {
  0%   { transform: rotate(0deg) scale(1) translate3d(0, 0, 0); }
  50%  { transform: rotate(70deg) scale(1.12) translate3d(3%, -2%, 0); }
  100% { transform: rotate(150deg) scale(.96) translate3d(-3%, 3%, 0); }
}
@keyframes o-liquide-b {
  0%   { transform: rotate(0deg) scale(1.05) translate3d(0, 0, 0); }
  50%  { transform: rotate(-85deg) scale(.94) translate3d(-4%, 2%, 0); }
  100% { transform: rotate(-170deg) scale(1.1) translate3d(3%, -3%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-apparence="obsidienne"][data-fond="liquide"] body:not(.terrain):not(.auth-body)::before,
  html[data-apparence="obsidienne"][data-fond="liquide"] body:not(.terrain):not(.auth-body)::after { animation: none; }
}

/* ---------- Cartes : dégradé vertical + liseré lumineux + anneau */
[data-apparence="obsidienne"] .card {
  background: linear-gradient(180deg, var(--o-surface-2), var(--surface));
  border-radius: 14px;
}
[data-apparence="obsidienne"] .card-title { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
[data-apparence="obsidienne"] .modal-content,
[data-apparence="obsidienne"] .dropdown-menu,
[data-apparence="obsidienne"] .palette__panel { background: linear-gradient(180deg, var(--o-surface-2), var(--surface)); }

/* ---------- Menu latéral : entrée active en pastille douce + barre lumineuse */
[data-apparence="obsidienne"] .app-sidebar { box-shadow: 1px 0 0 var(--sidebar-border); }
/* Sur téléphone, le menu glisse par-dessus la page : il redevient opaque, sinon le contenu se lirait au travers. */
@media (max-width: 991.98px) {
  [data-apparence="obsidienne"] .app-sidebar { background: linear-gradient(180deg, #F6F7FB, #EEF0F6); }
  [data-apparence="obsidienne"][data-theme="dark"] .app-sidebar { background: linear-gradient(180deg, #0B0D13, #07080C); }
}
/* Fond du menu : courbes de niveau abstraites (assets/img/menu-topo.svg, générées,
   utilisées comme masque pour prendre la couleur d'accent du thème), denses en bas et
   fondues vers le haut pour ne jamais gêner la lecture des entrées ; un halo doux en pied. */
[data-apparence="obsidienne"] .app-sidebar::before,
[data-apparence="obsidienne"] .app-sidebar::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
[data-apparence="obsidienne"] .app-sidebar::before {
  background: var(--primary); opacity: var(--o-topo, .17);
  -webkit-mask-image: url("../img/menu-topo.svg"), linear-gradient(to top, #000 0, #000 30%, transparent 88%);
          mask-image: url("../img/menu-topo.svg"), linear-gradient(to top, #000 0, #000 30%, transparent 88%);
  -webkit-mask-size: 260px auto, 100% 100%; mask-size: 260px auto, 100% 100%;
  -webkit-mask-position: left bottom, 0 0; mask-position: left bottom, 0 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
[data-apparence="obsidienne"] .app-sidebar::after {
  background: radial-gradient(260px 220px at 0% 100%, var(--o-halo-1), transparent 70%),
              radial-gradient(200px 180px at 100% 62%, var(--o-halo-2), transparent 70%);
}
[data-apparence="obsidienne"][data-theme="dark"] .app-sidebar { --o-topo: .22; }
[data-apparence="obsidienne"] .app-sidebar > * { position: relative; z-index: 1; }
[data-apparence="obsidienne"] .side-menu__item.active {
  background: var(--o-actif-fond);
  color: var(--o-actif-texte);
  box-shadow: var(--shadow-menu-active);
}
[data-apparence="obsidienne"] .side-menu__item.active::before {
  content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px;
  background: var(--primary); box-shadow: 0 0 12px var(--primary);
}
[data-apparence="obsidienne"] .side-menu__item.active .side-menu__dot { background: var(--primary); }
/* Barre glissante (menu-indicateur.js) : un seul trait lumineux qui va de l'entrée active
   à l'entrée survolée, puis revient. Quand le script est là, la barre fixe ci-dessus s'efface. */
[data-apparence="obsidienne"] .side-menu { position: relative; }
.side-menu__indicateur { display: none; }
[data-apparence="obsidienne"] .side-menu__indicateur {
  display: block; position: absolute; left: 0; top: 0; width: 3px; height: 20px; border-radius: 3px;
  background: var(--primary); box-shadow: 0 0 12px var(--primary), 0 0 2px var(--primary);
  opacity: 0; pointer-events: none; will-change: transform;
  transition: transform .32s cubic-bezier(.2, .9, .25, 1.15), height .25s ease, opacity .2s ease;
}
html.menu-indicateur[data-apparence="obsidienne"] .side-menu__item.active::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  [data-apparence="obsidienne"] .side-menu__indicateur { transition: opacity .2s ease; }
}
[data-apparence="obsidienne"] .side-menu__item.active .side-menu__tag { background: rgba(var(--accent-rgb), .18); color: var(--accent); }
[data-apparence="obsidienne"] .side-menu__badge { font-family: var(--font-mono); font-weight: 600; }
[data-apparence="obsidienne"] .sidebar-brand__logo {
  background: var(--gradient-brand-soft);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 8px 20px -6px var(--o-lueur);
}
[data-apparence="obsidienne"] .sidebar-search,
[data-apparence="obsidienne"] .sidebar-search__kbd { background: var(--o-ctrl); box-shadow: 0 0 0 1px var(--border), 0 1px 0 var(--o-haut) inset; }
[data-apparence="obsidienne"] .sidebar-search:hover { background: var(--o-ctrl); color: var(--primary); }
[data-apparence="obsidienne"] .sidebar-user__avatar,
[data-apparence="obsidienne"] .header-user__avatar,
[data-apparence="obsidienne"] .mon-compte-identite__avatar { background: var(--gradient-brand-soft); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 6px 16px -6px var(--o-lueur); }

/* ---------- En-tête : verre plus net, anneau fin */
[data-apparence="obsidienne"] .app-header {
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 0 0 1px var(--border-card), 0 1px 0 var(--o-haut) inset, 0 10px 30px -16px rgba(0, 0, 0, .35);
  border-radius: 14px;
}
[data-apparence="obsidienne"] .app-header .header-icon { border-radius: 10px; }
[data-apparence="obsidienne"] .app-header .header-icon:hover { background: var(--o-ctrl); color: var(--text); box-shadow: 0 0 0 1px var(--border); }

/* ---------- Boutons : dégradé vertical + reflet + lueur */
[data-apparence="obsidienne"] .btn { font-weight: 600; }
[data-apparence="obsidienne"] .btn-primary,
[data-apparence="obsidienne"] .btn-gradient { --btn-shadow: var(--shadow-primary); background: var(--gradient-brand); }
[data-apparence="obsidienne"] .btn-primary:hover, [data-apparence="obsidienne"] .btn-primary:focus-visible,
[data-apparence="obsidienne"] .btn-gradient:hover { --btn-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 12px 28px -8px var(--o-lueur), 0 0 0 1px rgba(var(--primary-rgb), .55); background: var(--gradient-brand); filter: brightness(1.06); }
[data-apparence="obsidienne"] .btn-light {
  background: linear-gradient(180deg, var(--o-surface-2), var(--surface)); border-color: transparent;
  box-shadow: 0 0 0 1px var(--input-border), 0 1px 0 var(--o-haut) inset;
}
[data-apparence="obsidienne"] .btn-light:hover { color: var(--primary); box-shadow: 0 0 0 1px rgba(var(--primary-rgb), .5), 0 1px 0 var(--o-haut) inset; }

/* ---------- Champs */
[data-apparence="obsidienne"] .form-control, [data-apparence="obsidienne"] .form-select {
  box-shadow: 0 1px 0 var(--o-haut) inset;
}
[data-apparence="obsidienne"] .form-control:focus, [data-apparence="obsidienne"] .form-select:focus {
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .22), 0 0 0 1px var(--primary);
}
[data-apparence="obsidienne"] .input-group-text { background: var(--o-ctrl); }

/* ---------- Tableaux : en-tête sans fond, capitales fines, chiffres en mono */
[data-apparence="obsidienne"] .table th { background: transparent; font-size: 11px; letter-spacing: .06em; font-weight: 600; }
[data-apparence="obsidienne"] .table thead.table-light th { background: transparent; }
[data-apparence="obsidienne"] .table td.text-end, [data-apparence="obsidienne"] .table td.tabular-nums,
[data-apparence="obsidienne"] .tabular-nums { font-family: var(--font-mono); font-size: .95em; }
/* Les chiffres en monospace, pas les boutons ni les pastilles posés dans une cellule alignée à droite. */
[data-apparence="obsidienne"] .table td .btn, [data-apparence="obsidienne"] .table td .badge { font-family: var(--font-family); }

/* ---------- Badges et pastilles : point lumineux */
[data-apparence="obsidienne"] .badge { box-shadow: 0 0 0 1px rgba(127, 127, 127, .12) inset; }
[data-apparence="obsidienne"] .badge.bg-success-transparent { color: rgb(var(--success-rgb)); }
[data-apparence="obsidienne"] .badge.bg-warning-transparent { color: rgb(var(--warning-rgb)); }
[data-apparence="obsidienne"] .badge.bg-info-transparent { color: rgb(var(--info-rgb)); }
[data-apparence="obsidienne"] .badge.text-bg-success { color: rgb(var(--success-rgb)) !important; }
[data-apparence="obsidienne"] .badge.text-bg-warning { color: rgb(var(--warning-rgb)) !important; }
[data-apparence="obsidienne"] .alert-info { color: rgb(var(--info-rgb)); }
[data-apparence="obsidienne"] .alert-warning { color: rgb(var(--warning-rgb)); }
[data-apparence="obsidienne"] .alert-success { color: rgb(var(--success-rgb)); }

/* ---------- Tuiles KPI : icône en anneau, trait de couleur en haut de la carte */
[data-apparence="obsidienne"] .stat-card__icon { border-radius: 10px; box-shadow: 0 0 0 1px currentColor inset; opacity: .95; }
[data-apparence="obsidienne"] .stat-card__row strong { font-family: var(--font-mono); font-size: 13px; }
[data-apparence="obsidienne"] .dashboard-widget > .card { position: relative; }
[data-apparence="obsidienne"] .dashboard-widget > .card::after {
  content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), .7), transparent);
}

/* ---------- Onglets, pagination, listes */
[data-apparence="obsidienne"] .nav-tabs .nav-link.active::after { box-shadow: 0 0 10px var(--o-lueur); }
[data-apparence="obsidienne"] .pagination .page-item.active .page-link { background: var(--gradient-brand); box-shadow: var(--shadow-primary); }
/* Fond transparent pour les éléments ordinaires seulement : appliqué aussi à l'élément
   sélectionné, il laissait son texte blanc sur fond clair (profil choisi invisible). */
[data-apparence="obsidienne"] .list-group-item:not(.active) { background: transparent; }
[data-apparence="obsidienne"] .list-group-item-action:not(.active):hover { background: var(--hover-bg); }
[data-apparence="obsidienne"] .list-group-item.active {
  background: var(--gradient-brand); border-color: transparent; color: #fff;
  box-shadow: var(--shadow-primary); position: relative; z-index: 1;
}
[data-apparence="obsidienne"] kbd, [data-apparence="obsidienne"] .palette kbd { background: var(--o-ctrl); font-family: var(--font-mono); }
[data-apparence="obsidienne"] .palette__item.is-active { background: var(--o-actif-fond); color: var(--o-actif-texte); box-shadow: var(--shadow-menu-active); }

/* ---------- Toasts et squelettes */
[data-apparence="obsidienne"] .ds-toast { background: linear-gradient(180deg, var(--o-surface-2), var(--surface)); border-color: var(--border-card); }
[data-apparence="obsidienne"][data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent); }

/* ---------- Mouvement discret (respecte la préférence système) */
@media (prefers-reduced-motion: no-preference) {
  [data-apparence="obsidienne"] .side-menu__item { transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }
}

/* =========================================================
   Fonds animés au choix (partials/fond_anime.php) : lave, vagues, aurore.
   html[data-fond] désigne le fond affiché (App\Core\Apparence : défaut du site
   ou préférence de l'utilisateur) ; « liquide » est plus haut, « aucun » ne
   montre rien. Fixe, derrière tout le contenu, sans isoler .app-content.
   ========================================================= */
.fond-anime { display: none; }
html[data-apparence="obsidienne"] .fond-anime {
  --f1: #8f9bff; --f2: #ff9ec7; --f3: #6fe0cb; --f4: #ffc078; --f5: #8fd0ff; --f6: #c79bff;
  display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  opacity: .7;
}
html[data-apparence="obsidienne"][data-theme="dark"] .fond-anime {
  --f1: #5b6cff; --f2: #e0559a; --f3: #22b8a0; --f4: #e08a2e; --f5: #2f9be0; --f6: #9a5be0;
  opacity: .45;
}
.fond-anime > * { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-fond="lave"] .fond-anime__lave,
html[data-fond="vagues"] .fond-anime__vagues,
html[data-fond="aurore"] .fond-anime__aurore,
html[data-fond="faisceaux"] .fond-anime__faisceaux,
html[data-fond="courants"] .fond-anime__courants,
html[data-fond="grille"] .fond-anime__grille { display: block; }

/* Fonds « au trait » (faisceaux, courants, grille) : pas de voile d'ensemble, des couleurs
   franches en clair et lumineuses en sombre (--t1 à --t6, lues aussi par fond-anime.js). */
html[data-apparence="obsidienne"] .fond-anime {
  --t1: #5b6cff; --t2: #e0559a; --t3: #19b39a; --t4: #f08a24; --t5: #2f9be0; --t6: #9a5be0;
  --o-trame: rgba(20, 24, 40, .10);
}
html[data-apparence="obsidienne"][data-theme="dark"] .fond-anime {
  --t1: #8f9bff; --t2: #ff7fb8; --t3: #5fe3cd; --t4: #ffb561; --t5: #7cc8ff; --t6: #c79bff;
  --o-trame: rgba(255, 255, 255, .10);
}
html[data-apparence="obsidienne"][data-fond="faisceaux"] .fond-anime,
html[data-apparence="obsidienne"][data-fond="courants"] .fond-anime,
html[data-apparence="obsidienne"][data-fond="grille"] .fond-anime { opacity: 1; }

/* Faisceaux : des tracés courbes à peine visibles, parcourus par des impulsions lumineuses. */
.fond-anime__faisceaux path { fill: none; stroke-linecap: round; }
.fond-anime__faisceaux .rail { stroke: var(--o-trame); stroke-width: 1; }
.fond-anime__faisceaux .flux {
  stroke: currentColor; stroke-width: 2.2; stroke-dasharray: 70 930;
  animation: fond-parcours linear infinite; filter: drop-shadow(0 0 5px currentColor);
}
@keyframes fond-parcours { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

/* Lave : des gouttes qui dérivent, fusionnent et se séparent (filtre « goo »). */
.fond-anime__lave circle { transform-box: fill-box; transform-origin: center; }
.fond-anime__lave .g1 { fill: var(--f1); animation: fond-goutte-1 17s ease-in-out infinite alternate; }
.fond-anime__lave .g2 { fill: var(--f2); animation: fond-goutte-2 21s ease-in-out infinite alternate; }
.fond-anime__lave .g3 { fill: var(--f3); animation: fond-goutte-3 15s ease-in-out infinite alternate; }
.fond-anime__lave .g4 { fill: var(--f4); animation: fond-goutte-4 19s ease-in-out infinite alternate; }
.fond-anime__lave .g5 { fill: var(--f5); animation: fond-goutte-2 13s ease-in-out infinite alternate-reverse; }
.fond-anime__lave .g6 { fill: var(--f6); animation: fond-goutte-1 23s ease-in-out infinite alternate-reverse; }
.fond-anime__lave .g7 { fill: var(--f1); animation: fond-goutte-3 11s ease-in-out infinite alternate-reverse; }
@keyframes fond-goutte-1 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(160px, 90px) scale(1.25); } 100% { transform: translate(-80px, 170px) scale(.85); } }
@keyframes fond-goutte-2 { 0% { transform: translate(0, 0) scale(1.1); } 50% { transform: translate(-190px, 60px) scale(.8); } 100% { transform: translate(-60px, -140px) scale(1.3); } }
@keyframes fond-goutte-3 { 0% { transform: translate(0, 0) scale(.9); } 50% { transform: translate(120px, -130px) scale(1.2); } 100% { transform: translate(230px, 40px) scale(1); } }
@keyframes fond-goutte-4 { 0% { transform: translate(0, 0) scale(1.2); } 50% { transform: translate(-110px, -110px) scale(.9); } 100% { transform: translate(90px, -200px) scale(1.15); } }

/* Vagues : quatre nappes ondulées, tracées sur deux largeurs, qui glissent de 50 % en boucle. */
.fond-anime__vagues svg { position: absolute; left: 0; top: 0; width: 200%; height: 100%; }
.fond-anime__vague--1 { fill: var(--f1); animation: fond-glisse 26s linear infinite; }
.fond-anime__vague--2 { fill: var(--f2); animation: fond-glisse 18s linear infinite reverse; }
.fond-anime__vague--3 { fill: var(--f3); animation: fond-glisse 13s linear infinite; }
.fond-anime__vague--4 { fill: var(--f5); animation: fond-glisse 34s linear infinite reverse; }
@keyframes fond-glisse { to { transform: translateX(-50%); } }

/* Aurore : des rubans de lumière flous qui ondulent, l'ensemble changeant lentement de teinte. */
.fond-anime__aurore { filter: blur(38px) saturate(1.25); animation: fond-teinte 24s linear infinite; }
.fond-anime__aurore i { position: absolute; top: -25%; height: 150%; width: 34%; border-radius: 50%; }
.fond-anime__aurore .a1 { left: -6%; background: linear-gradient(180deg, transparent, var(--f1) 35%, var(--f3) 70%, transparent); animation: fond-ruban 11s ease-in-out infinite alternate; }
.fond-anime__aurore .a2 { left: 20%; background: linear-gradient(180deg, transparent, var(--f2) 30%, var(--f6) 65%, transparent); animation: fond-ruban 14s ease-in-out infinite alternate-reverse; }
.fond-anime__aurore .a3 { left: 46%; background: linear-gradient(180deg, transparent, var(--f5) 40%, var(--f1) 75%, transparent); animation: fond-ruban 9s ease-in-out infinite alternate; }
.fond-anime__aurore .a4 { left: 70%; background: linear-gradient(180deg, transparent, var(--f4) 30%, var(--f2) 70%, transparent); animation: fond-ruban 16s ease-in-out infinite alternate-reverse; }
@keyframes fond-ruban { 0% { transform: translateX(-12%) skewX(-14deg) scaleY(1); } 50% { transform: translateX(16%) skewX(10deg) scaleY(1.15); } 100% { transform: translateX(-4%) skewX(-6deg) scaleY(.92); } }
@keyframes fond-teinte { to { filter: blur(38px) saturate(1.25) hue-rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .fond-anime, .fond-anime * { animation: none !important; }
}