/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   LE BANDEAU DE GAUCHE (20.09.2026)

   Demande de Jonathan : un bleu plus proche de celui du bandeau, et des lignes en relief à
   l'intérieur pour moderniser.

   LE BLEU. Le menu descendait de #16408F à #0A2150 — il s'assombrissait vers le bas, alors que le
   bandeau des pages s'éclaircit (#0B2458 → #113679 → #1A4A9C). Deux bleus de la même famille qui
   vont en sens inverse : côte à côte, ils ne se répondaient pas. Le menu reprend maintenant les
   mêmes trois valeurs et le même halo turquoise que le bandeau. Ce ne sont plus deux bleus, c'en
   est un seul.

   LE RELIEF. Pas d'ombres portées ni de faux boutons bombés : ce qui donne du volume sur un écran,
   ce sont les ARÊTES. Une surface éclairée d'en haut reçoit une ligne claire sur son bord
   supérieur et une ligne sombre sur son bord inférieur ; l'œil en déduit une épaisseur sans qu'on
   ait rien dessiné. Trois couches ici, toutes discrètes :
     — un réseau de lignes obliques à 2 % d'opacité, qui donne une matière plutôt qu'un aplat ;
     — des lignes horizontales fines espacées de 4 px, comme un métal brossé ;
     — les arêtes proprement dites : liseré clair en haut, bord droit lumineux, ombre interne
       à droite pour détacher le menu de la page.
   Rien ne doit se voir au premier regard. Si on remarque l'effet, c'est qu'il est trop fort.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

html .sidebar {
  position: sticky;            /* déjà posé par css/00 ; répété car les couches en dépendent */
  isolation: isolate;          /* les pseudo-éléments restent sous le contenu, jamais au-dessus */
  background:
    /* Le halo turquoise du bandeau, en haut à gauche, à la même intensité. */
    radial-gradient(120% 34% at 0% 0%, rgba(0, 207, 255, .22) 0%, transparent 60%),
    /* Un rappel plus froid en bas à droite, pour que la colonne ne soit pas plate sur 100vh. */
    radial-gradient(100% 30% at 100% 100%, rgba(0, 207, 255, .10) 0%, transparent 66%),
    /* Les trois valeurs exactes du bandeau, dans le même ordre. */
    linear-gradient(168deg, #0B2458 0%, #113679 52%, #1A4A9C 100%);
  border-right: none;
  /* L'arête : une ligne claire sur le bord droit, puis l'ombre qui détache de la page. */
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, .10),
    4px 0 18px -6px rgba(3, 14, 38, .55);
}

/* Couche 1 — les lignes gravées.
   PREMIÈRE VERSION TROP TIMIDE (corrigée le 20.09.2026) : les lignes étaient à 3 % d'opacité,
   avec l'idée que « si on remarque l'effet, il est trop fort ». Résultat : on ne le remarquait
   pas du tout, ce qui ne sert à rien. Jonathan demandait des lignes visibles.

   CE QUI FAIT LE RELIEF : la PAIRE. Une ligne claire seule est un trait ; une ligne claire
   immédiatement suivie d'une ligne sombre est une ARÊTE, et l'œil y lit une épaisseur. C'est le
   même principe qu'un biseau gravé dans du métal : la lumière frappe le haut de l'entaille et
   l'ombre se loge en dessous. On pose donc deux réseaux de paires — un large à 42 px qui donne
   la structure, un serré à 7 px qui donne le grain.

   La couche est en position:fixed plutôt qu'absolute pour que la trame ne défile PAS avec le
   menu : une matière qui glisse pendant qu'on fait défiler trahit l'effet aussitôt. */
html .sidebar::before {
  content: ''; position: fixed; top: 0; left: 0;
  width: 238px; height: 100vh; pointer-events: none; z-index: 0;
  background:
    /* Les arêtes larges : claire puis sombre, la paire fait le biseau. */
    repeating-linear-gradient(116deg,
      rgba(255, 255, 255, .085) 0 1px,
      rgba(2, 10, 30, .22) 1px 2.5px,
      transparent 2.5px 42px),
    /* Un second réseau, DANS LE MÊME SENS et non croisé. Un premier essai le faisait passer à
       64° : les deux trames se croisaient et donnaient un quadrillage de papier millimétré —
       une texture de fond, pas un relief. Des lignes parallèles plus serrées, en revanche,
       densifient la gravure sans jamais créer de motif. */
    repeating-linear-gradient(116deg,
      rgba(255, 255, 255, .038) 0 1px,
      rgba(2, 10, 30, .09) 1px 2px,
      transparent 2px 14px),
    /* Une bande de lumière oblique, comme un reflet sur une surface inclinée. C'est elle qui
       donne l'impression que le panneau n'est pas plat. */
    linear-gradient(116deg,
      transparent 0 38%,
      rgba(255, 255, 255, .055) 46%,
      rgba(255, 255, 255, .015) 54%,
      transparent 62% 100%);
  /* La gravure s'estompe vers le bas : une trame uniforme sur 100 vh devient un papier peint ;
     une trame qui s'éteint donne de la profondeur. */
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .72) 52%, rgba(0, 0, 0, .18) 88%, transparent 100%);
}

/* Couche 2 — les arêtes du panneau : une ligne de lumière en haut, et surtout un liseré vertical
   sur tout le bord droit. C'est ce bord qui sépare le menu de la page ; lui donner une épaisseur
   éclairée est ce qui fait qu'on voit un panneau posé devant, et non une zone colorée. */
html .sidebar::after {
  content: ''; position: fixed; top: 0; left: 0;
  width: 238px; height: 100vh; pointer-events: none; z-index: 0;
  background:
    /* le bord droit, en dégradé vertical : plus lumineux en haut, là où « tombe » la lumière */
    linear-gradient(to left,
      rgba(255, 255, 255, .22) 0 1px,
      rgba(255, 255, 255, .05) 1px 2px,
      transparent 2px 100%),
    /* la ligne du haut */
    linear-gradient(180deg,
      rgba(255, 255, 255, .30) 0 1px,
      rgba(255, 255, 255, .06) 1px 2px,
      transparent 2px 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 60%, transparent 100%);
}

/* Le contenu passe au-dessus des deux couches. */
html .sidebar > * { position: relative; z-index: 1; }

/* ── Les arêtes des éléments ───────────────────────────────────────────────────────────────────── */

/* L'élément actif : c'est lui qui doit sembler en relief, et lui seul. Ligne claire en haut,
   ligne sombre en bas, plus une barre turquoise à gauche qui sert de repère de position. */
html .sidebar .nav-item.active,
html .sidebar .nav-solo-btn.active {
  background: linear-gradient(90deg, rgba(0, 207, 255, .20) 0%, rgba(0, 207, 255, .07) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -1px 0 rgba(2, 10, 30, .42),
    inset 3px 0 0 var(--brand-cyan, #00CFFF),
    0 1px 3px rgba(2, 10, 30, .35);
}

/* Le survol : un creux, pas une bosse. L'inverse de l'actif — ligne sombre en haut, claire en
   bas — pour que les deux états ne se confondent jamais. */
html .sidebar .nav-item:hover:not(.active),
html .sidebar .nav-solo-btn:hover:not(.active) {
  background: rgba(255, 255, 255, .055);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(3, 14, 38, .22),
    inset 0 -1px 0 rgba(255, 255, 255, .08);
}

/* Les pastilles d'icônes gardent leur teinte par rubrique (css/30) et reçoivent l'arête. */
html .sidebar .nav-item .nav-ico {
  box-shadow:
    inset 0 0 0 1px rgba(var(--teinte, 255, 255, 255), .20),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 1px 2px rgba(3, 14, 38, .28);
}

/* Les titres de rubrique : un filet gravé au-dessus (sombre puis clair = un sillon), qui sépare
   les groupes sans ajouter de trait franc. Le premier n'en porte pas : on ne grave pas au bord. */
html .sidebar .nav-section-btn {
  position: relative;
  color: rgba(255, 255, 255, .62);
}
html .sidebar .nav-section-btn::after {
  content: ''; position: absolute; left: 10px; right: 10px; top: -5px; height: 2px;
  background: linear-gradient(180deg, rgba(2, 10, 30, .52) 0 1px, rgba(255, 255, 255, .15) 1px 2px);
  border-radius: 1px;
}
html .sidebar .nav-section-btn:first-of-type::after { display: none; }
html .sidebar .nav-section-btn.active { color: var(--brand-cyan, #00CFFF); }

/* Le bloc équipe, en bas : même sillon, sur toute la largeur. */
html .sidebar .sidebar-team {
  border-top: none;
  box-shadow: inset 0 1px 0 rgba(3, 14, 38, .34), inset 0 2px 0 rgba(255, 255, 255, .07);
}

/* ── Thème clair ───────────────────────────────────────────────────────────────────────────────
   Le menu reste marine dans les deux thèmes (c'est déjà le parti pris de css/00) : c'est la
   colonne de marque. On allège seulement la matière, qui se verrait davantage à côté d'une page
   blanche. */
html[data-theme="clair"] .sidebar::before { opacity: .72; }

/* ── Ambiances ─────────────────────────────────────────────────────────────────────────────────
   « Nuit » et « Contraste élevé » ne peuvent pas garder un menu marine lumineux : l'une vise
   l'écran éteint, l'autre la lisibilité maximale. Chacune reçoit son propre menu. */
html[data-ambiance="nuit"] .sidebar {
  background: linear-gradient(168deg, #101216 0%, #0C0D10 60%, #08090B 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .07), 4px 0 18px -6px #000;
}
html[data-ambiance="nuit"] .sidebar::before { opacity: .5; }

html[data-ambiance="contraste"] .sidebar {
  background: #0B2458;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .5);
}
html[data-ambiance="contraste"] .sidebar::before,
html[data-ambiance="contraste"] .sidebar::after { display: none; }
html[data-ambiance="contraste"] .sidebar .nav-section-btn { color: #fff; }
html[data-ambiance="contraste"] .sidebar .nav-item { color: #E8EDF5; }

/* ── Mobile ────────────────────────────────────────────────────────────────────────────────────
   Le menu y est un tiroir qui glisse : une couche en position:fixed resterait en place pendant
   que le tiroir bouge, et le décalage se verrait. On la fait glisser avec lui. */
@media (max-width: 900px) {
  html .sidebar::before, html .sidebar::after { position: absolute; }
}