/* ─── La barre de gauche (06/11/2026, Odor : « trop plate, elle manque de personnalité, de reliefs, de couleurs, c'est trop
 *  triste ») ─── Chaque page a sa couleur : son icône devient une petite tuile en relief dans un dégradé de cette couleur ; la
 *  page ouverte s'allume de la même couleur. Pour tout le monde, quel que soit le volume choisi. Classes existantes seulement. */

/* les couleurs de chaque page (début et fin du dégradé) */
.lien { --c1: #94a3b8; --c2: #64748b; }
.lien[data-page="accueil"] { --c1: #fbbf24; --c2: #f97316; }
.lien[data-page="jellyfin"] { --c1: #a855f7; --c2: #3b82f6; }
.lien[data-page="decouvrir"] { --c1: #4ade80; --c2: #059669; }
.lien[data-page="en-cours"] { --c1: #22d3ee; --c2: #2563eb; }
.lien[data-page="jeux"] { --c1: #fb7185; --c2: #db2777; }
.lien[data-page="statistiques"] { --c1: #818cf8; --c2: #7c3aed; }
.lien[data-page="kiosque"] { --c1: #facc15; --c2: #ea580c; }
.lien[data-page="derniere-chance"] { --c1: #f472b6; --c2: #be123c; }
.lien[data-page="hestia"] { --c1: #fdba74; --c2: #ef4444; }
.lien[data-page="signalements"] { --c1: #fca5a5; --c2: #dc2626; }
.lien[data-page="dashboard"] { --c1: #38bdf8; --c2: #4f46e5; }
.lien[data-page="machines"] { --c1: #2dd4bf; --c2: #0284c7; }
.lien[data-page="depannage"] { --c1: #fcd34d; --c2: #d97706; }
.lien[data-page="hestiarr"] { --c1: #c084fc; --c2: #c026d3; }
.lien[data-page="arr"] { --c1: #67e8f9; --c2: #0891b2; }
.lien[data-page="telechargements"] { --c1: #34d399; --c2: #0d9488; }
.lien[data-page="jeux-gestion"] { --c1: #fb923c; --c2: #e11d48; }
.lien[data-page="ia"] { --c1: #e879f9; --c2: #7c3aed; }
.lien[data-page="admin"] { --c1: #fde047; --c2: #f59e0b; }
.lien[data-page="activite"] { --c1: #a5b4fc; --c2: #6366f1; }
.lien[data-page="api"] { --c1: #93c5fd; --c2: #475569; }
.lien[data-page="reglages"] { --c1: #cbd5e1; --c2: #64748b; }

/* le fond de la barre : teinté par le thème, la lueur de la flamme en haut, une arête éclairée à droite */
.rail {
  background:
    radial-gradient(120% 28% at 0% 0%, rgba(255, 140, 50, .16), transparent 70%),
    radial-gradient(90% 40% at 100% 100%, rgba(var(--lueur), .14), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 84%, rgb(var(--lueur)) 16%), color-mix(in srgb, var(--nuit) 90%, rgb(var(--lueur)) 10%));
  border-right: 1px solid rgba(255, 255, 255, .07);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06), 18px 0 40px -28px rgba(0, 0, 0, .9);
}
.rail .marque span { font-size: 1.45rem; letter-spacing: .04em; filter: drop-shadow(0 2px 10px rgba(var(--lueur), .45)); }

/* les liens : l'icône dans sa tuile de couleur, en relief */
.rail .lien, .panneau-plus .lien { gap: 12px; padding: 7px 10px; border-radius: 12px; color: var(--doux); }
.rail .lien .ico, .panneau-plus .lien .ico {
  width: 30px; height: 30px; padding: 6px; border-radius: 9px; color: #fff;
  background: linear-gradient(145deg, var(--c1), var(--c2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 4px 10px -4px var(--c2);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1.3), box-shadow .25s;
}
.rail .lien .ico svg, .panneau-plus .lien .ico svg { stroke-width: 2.1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.rail .lien:hover, .panneau-plus .lien:hover {
  color: var(--encre); transform: translateX(3px);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c1) 16%, transparent), transparent 85%);
}
.rail .lien:hover .ico { transform: translateY(-1px) rotate(-6deg) scale(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 8px 16px -6px var(--c2); }

/* la page ouverte s'allume dans sa couleur */
.rail .lien[aria-current=page], .panneau-plus .lien[aria-current=page] {
  color: var(--encre);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c1) 30%, transparent), color-mix(in srgb, var(--c2) 10%, transparent) 70%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 40%, transparent), 0 8px 22px -12px var(--c2);
}
.rail .lien[aria-current=page]::before { background: linear-gradient(180deg, var(--c1), var(--c2)); box-shadow: 0 0 14px var(--c1); }
.rail .lien[aria-current=page] .ico { color: #fff; transform: scale(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 2px color-mix(in srgb, var(--c1) 40%, transparent), 0 0 18px -2px var(--c1); }

/* les titres de groupes : en dégradé, avec une ligne */
.rail .groupe-lien, .panneau-plus .groupe-lien {
  display: flex; align-items: center; gap: 8px; margin: 14px 4px 6px; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rail .groupe-lien::after, .panneau-plus .groupe-lien::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--lueur), .45), transparent); }

/* barre réduite (icônes seules) : les tuiles au centre */
:root[data-rail="icones"] .rail .lien { padding: 6px 0; }
:root[data-rail="icones"] .rail .groupe-lien { justify-content: center; font-size: 0; margin: 10px 0 6px; }
:root[data-rail="icones"] .rail .groupe-lien::after { flex: 0 0 26px; }

/* thème clair : des tuiles un peu plus douces */
:root[data-theme="clair"] .rail { background: linear-gradient(180deg, #ffffff, color-mix(in srgb, #eef2ff 80%, rgb(var(--lueur)) 20%)); }
:root[data-theme="clair"] .rail .lien .ico { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 10px -4px var(--c2); }
@media (prefers-reduced-motion: reduce) { .rail .lien:hover .ico, .rail .lien[aria-current=page] .ico { transform: none; } }

/* ─── 06/11/2026 soir (Odor : « pour les icônes de la sidebar colorées, donne un effet de transparence et néo en plus ») ───
 *  Les tuiles deviennent du VERRE teinté (couleur translucide, flou de ce qu'il y a derrière, reflet en haut, arête claire) et
 *  leur icône brille comme un NÉON de la couleur de la page ; la page ouverte et le survol s'allument davantage. */
.rail .lien .ico, .panneau-plus .lien .ico {
  position: relative; isolation: isolate;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--c1) 46%, transparent), color-mix(in srgb, var(--c2) 34%, transparent));
  -webkit-backdrop-filter: blur(8px) saturate(1.6); backdrop-filter: blur(8px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--c1) 60%, rgba(255, 255, 255, .35));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 0 12px -4px color-mix(in srgb, var(--c1) 70%, transparent),
    0 0 10px -3px var(--c1), 0 6px 16px -8px var(--c2);
}
/* le reflet du verre, sur la moitié haute */
.rail .lien .ico::after, .panneau-plus .lien .ico::after {
  content: ""; position: absolute; inset: 1px 1px 52% 1px; border-radius: 8px 8px 5px 5px; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0));
}
/* l'icône : un trait clair qui rayonne de la couleur de la page (néon) */
.rail .lien .ico svg, .panneau-plus .lien .ico svg {
  color: #fff; filter: drop-shadow(0 0 2px var(--c1)) drop-shadow(0 0 6px color-mix(in srgb, var(--c1) 75%, transparent));
}
.rail .lien:hover .ico, .panneau-plus .lien:hover .ico {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 14px -3px color-mix(in srgb, var(--c1) 80%, transparent),
    0 0 16px -2px var(--c1), 0 10px 22px -10px var(--c2);
}
.rail .lien[aria-current=page] .ico, .panneau-plus .lien[aria-current=page] .ico {
  background: linear-gradient(145deg, color-mix(in srgb, var(--c1) 62%, transparent), color-mix(in srgb, var(--c2) 48%, transparent));
  border-color: color-mix(in srgb, var(--c1) 85%, #fff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 16px -2px var(--c1),
    0 0 0 1px color-mix(in srgb, var(--c1) 55%, transparent), 0 0 16px var(--c1), 0 0 34px -8px var(--c2);
}
.rail .lien[aria-current=page] .ico svg { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px var(--c1)); }
/* thème clair : le verre est plus coloré (sinon il disparaît sur le blanc), la lueur plus discrète */
:root[data-theme="clair"] .rail .lien .ico, :root[data-theme="clair"] .panneau-plus .lien .ico {
  background: linear-gradient(145deg, color-mix(in srgb, var(--c1) 78%, transparent), color-mix(in srgb, var(--c2) 70%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 8px -3px var(--c1), 0 4px 10px -4px var(--c2);
}
/* sans flou possible (vieux navigateurs) : un verre un peu plus opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rail .lien .ico, .panneau-plus .lien .ico { background: linear-gradient(145deg, color-mix(in srgb, var(--c1) 70%, transparent), color-mix(in srgb, var(--c2) 60%, transparent)); }
}