/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* 22.09.2026 : le « position: sticky » répété ici l'emportait (html .sidebar est plus spécifique)
   sur le tiroir mobile de css/00 (.sidebar { position: fixed } sous 768 px) : sur téléphone, le
   menu restait dans le flux au lieu de glisser par-dessus la page. On ne le répète donc plus
   qu'au-dessus de 768 px. */
@media (min-width: 769px) {
  html .sidebar { position: sticky; }  /* déjà posé par css/00 ; répété car les couches en dépendent */
}
html .sidebar {
  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; }

/* ── Thème sombre (10.10.2026) ─────────────────────────────────────────────────────────────────
   « Quand on bascule sur sombre, la couleur du menu reste la même. » Le marine lumineux, pensé
   pour répondre au bandeau sur une page claire, devenait la zone la plus vive de l'écran à côté
   d'un contenu presque noir : l'œil y était tiré en permanence. En sombre, le menu descend donc
   dans la même nuit que la page, en gardant la famille de la marque : un bleu nuit profond, un
   cran plus clair que le fond (#0A0F1C) pour rester un panneau distinct, le halo turquoise
   atténué et la gravure adoucie. Les ambiances qui ont leur propre menu (Nuit) passent après. */
html:not([data-theme="clair"]) .sidebar {
  background:
    radial-gradient(120% 34% at 0% 0%, rgba(0, 207, 255, .12) 0%, transparent 60%),
    radial-gradient(100% 30% at 100% 100%, rgba(0, 207, 255, .05) 0%, transparent 66%),
    linear-gradient(168deg, #0A1630 0%, #0C1C3C 55%, #0F2448 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .07), 4px 0 18px -6px rgba(0, 0, 0, .6);
}
html:not([data-theme="clair"]) .sidebar::before { opacity: .55; }
html:not([data-theme="clair"]) .sidebar::after { opacity: .6; }

/* Ardoise : le gris-bleu neutre de l'ambiance, sans la teinte marine. */
html[data-ambiance="ardoise"]:not([data-theme="clair"]) .sidebar {
  background:
    radial-gradient(120% 34% at 0% 0%, rgba(0, 207, 255, .07) 0%, transparent 60%),
    linear-gradient(168deg, #172133 0%, #131C2E 60%, #101827 100%);
}

/* Bleu REX (3e mode, 10.10.2026) : c'est le thème de la marque, le menu y garde son marine vif. */
html[data-ambiance="bleu"] .sidebar {
  background:
    radial-gradient(120% 34% at 0% 0%, rgba(0, 207, 255, .22) 0%, transparent 60%),
    radial-gradient(100% 30% at 100% 100%, rgba(0, 207, 255, .10) 0%, transparent 66%),
    linear-gradient(168deg, #0B2458 0%, #113679 52%, #1A4A9C 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .10), 4px 0 18px -6px rgba(3, 14, 38, .55);
}
html[data-ambiance="bleu"] .sidebar::before,
html[data-ambiance="bleu"] .sidebar::after { opacity: 1; }

/* ── La barre du haut sur iPhone, en sombre (10.10.2026) ──────────────────────────────────────
   « Il reste des titres qui sont en noir. » css/97 passe cette barre en bleu ciel avec une encre
   marine, mais css/40 repeint ensuite son fond en marine (!important) : le titre de la page, la
   marque REX, le ☰ et la loupe se retrouvaient marine sur marine, et la mascotte, noircie pour un
   fond clair, devenait une silhouette. En sombre, la barre prend le bleu nuit du menu, l'encre
   redevient blanche, la marque turquoise, et la mascotte retrouve ses couleurs. */
html:not([data-theme="clair"]) .mobile-topbar {
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(0, 207, 255, .14) 0%, transparent 60%),
    linear-gradient(135deg, #0A1630 0%, #0C1C3C 60%, #0F2448 100%) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}
html[data-ambiance="bleu"] .mobile-topbar {
  background: linear-gradient(135deg, #0B2458 0%, #113679 60%, #1A4A9C 100%) !important;
}
html:not([data-theme="clair"]) .mobile-topbar .rex-topbar-marque { color: #00CFFF !important; }
html:not([data-theme="clair"]) .mobile-topbar img { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3)); }

/* ── Thèmes de club (10.10.2026, renforcés le 11.10.2026 — voir css/99-themes.css) ────────────
   « Le thème Barça doit être BEAUCOUP plus prononcé », « Valence plus assimilable à Valence »,
   « ajoute Arsenal », « trouve un moyen d'ajouter la patte de chaque club ». La patte, ici :
     — le menu et les bandeaux aux couleurs franches du maillot (rayures blaugrana, noir de
       Valence) ; pour Arsenal, le marine du club touché de rouge (11.10.2026 : « beaucoup trop
       rouge » — le rouge n'est plus qu'un accent) ;
     — un liseré en haut : or (Barça), Senyera coronada — bande azur couronnée puis barres jaune et
       rouge — (Valence), rouge et filet or (Arsenal) ;
     — un filigrane : chauve-souris (le rat penat de Valence), canon (Arsenal) ; pour le Barça,
       les rayures sont le motif ;
     — les titres des bandeaux soulignés à la couleur du club ;
     — le blason en filigrane dans chaque bandeau, en grand sur l'accueil (js/183-sport.js).
   Le repère turquoise de la marque (--brand-cyan) prend la couleur vive du club. Tout le texte
   posé sur ces fonds reste blanc à ≥ 4,5:1 (test/themes-club.test.js). */

/* ── FC Barcelona : rayures verticales bleu #004D98 / grenat #A50044 franches, or #EDBB00 ────── */
html[data-ambiance="fcb"] .sidebar {
  --brand-cyan: #EDBB00;
  background:
    linear-gradient(#EDBB00, #EDBB00) top left / 100% 4px no-repeat,
    linear-gradient(180deg, rgba(4, 12, 40, .06) 0%, rgba(4, 12, 40, .38) 100%),
    repeating-linear-gradient(90deg, #004D98 0 34px, #A50044 34px 68px);
  box-shadow: inset -3px 0 0 #EDBB00, 4px 0 18px -6px rgba(0, 0, 0, .55);
}
html[data-ambiance="fcb"] .sidebar::before { opacity: .22; }
html[data-ambiance="fcb"] .sidebar :is(.nav-item, .nav-solo-btn).active {
  background: linear-gradient(90deg, rgba(6, 14, 44, .72) 0%, rgba(6, 14, 44, .45) 100%);
  box-shadow: inset 3px 0 0 #EDBB00;
}
html[data-ambiance="fcb"] .mobile-topbar {
  background:
    linear-gradient(#EDBB00, #EDBB00) bottom left / 100% 3px no-repeat,
    linear-gradient(180deg, rgba(4, 12, 40, .12), rgba(4, 12, 40, .30)),
    repeating-linear-gradient(90deg, #004D98 0 30px, #A50044 30px 60px) !important;
}
html[data-ambiance="fcb"] .mobile-topbar .rex-topbar-marque { color: #EDBB00 !important; }
/* Les bandeaux : plus de bleu ciel (le sombre ordinaire, css/97) mais les rayures, plus larges que
   dans le menu, un voile marine en bas pour asseoir le texte, le liseré or en haut. L'encre devient
   blanche par les variables --bnd-* de css/99-themes.css. */
html[data-ambiance="fcb"] :is(.dbx-hero, .fcx-hero, .cf-hero, .ozx-hero, .rex-bandeau, .rex-bandeau-hote) {
  background:
    linear-gradient(#EDBB00, #EDBB00) top left / 100% 4px no-repeat,
    radial-gradient(90% 130% at 100% 0%, rgba(237, 187, 0, .18) 0%, transparent 55%),
    linear-gradient(180deg, rgba(6, 14, 44, .14) 0%, rgba(6, 14, 44, .48) 100%),
    repeating-linear-gradient(90deg, #004D98 0 64px, #A50044 64px 128px);
  color: #FFFFFF;
  border: 1px solid rgba(237, 187, 0, .40);
}
/* Le verre des boutons (Barça et Arsenal, les deux clubs sombres à bandeau foncé) : css/97 le
   peint en blanc à 72 % sous une encre marine ; sur ces bandeaux, il devient un verre marine sous
   une encre blanche (même poids de sélecteur, plus un attribut). */
html:is([data-ambiance="fcb"], [data-ambiance="arsenal"]):not([data-theme="clair"]) :is(.dbx-hero, .fcx-hero, .cf-hero, .ozx-hero, .rex-bandeau, .rex-bandeau-hote) :is(.btn-secondary, .btn-cancel, .btn-outline, .btn-light, .dbx-btn-verre, .tab-btn, select, input:not([type="checkbox"]):not([type="radio"])) {
  background: rgba(4, 12, 34, .46) !important;
  border: 1px solid rgba(255, 255, 255, .36) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
html:is([data-ambiance="fcb"], [data-ambiance="arsenal"]):not([data-theme="clair"]) :is(.dbx-hero, .fcx-hero, .cf-hero, .ozx-hero, .rex-bandeau, .rex-bandeau-hote) :is(.btn-secondary, .btn-cancel, .btn-outline, .btn-light, .dbx-btn-verre, .tab-btn):hover {
  background: rgba(4, 12, 34, .66) !important; border-color: var(--club-or) !important;
}
/* La recherche de l'accueil reste un verre sombre (même pendant la saisie) : tout le bandeau hérite
   de l'encre blanche (css/97), un champ blanc rendrait la frappe invisible. */
html:is([data-ambiance="fcb"], [data-ambiance="arsenal"]) .dbx-hero .dbx-recherche { background: rgba(4, 12, 34, .48); border: 1px solid rgba(255, 255, 255, .36); }
html:is([data-ambiance="fcb"], [data-ambiance="arsenal"]) .dbx-hero .dbx-recherche:focus-within { background: rgba(4, 12, 34, .78); box-shadow: 0 0 0 3px var(--club-or); }
html:is([data-ambiance="fcb"], [data-ambiance="arsenal"]) .dbx-hero .dbx-recherche input::placeholder { color: rgba(255, 255, 255, .80); }
html:is([data-ambiance="fcb"], [data-ambiance="arsenal"]) .dbx-hero .dbx-recherche kbd { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32); }
/* Le champ lui-même reste transparent dans son verre (la règle des boutons ci-dessus vise aussi les
   champs du bandeau et lui dessinait une seconde boîte). */
html:is([data-ambiance="fcb"], [data-ambiance="arsenal"]) .dbx-hero .dbx-recherche input:not([type="checkbox"]):not([type="radio"]) {
  background: transparent !important; border: none !important; box-shadow: none !important;
}
/* Les boutons blancs du bandeau (« + Client », « + Opportunité ») : css/97 leur impose l'encre du
   bandeau, ici blanche — texte blanc sur fond blanc. Ils deviennent un verre clair bien bordé. */
html:is([data-ambiance="fcb"], [data-ambiance="arsenal"]) :is(.dbx-hero, .rex-bandeau, .rex-bandeau-hote) .dbx-btn-blanc {
  background: rgba(255, 255, 255, .16) !important; border: 1px solid rgba(255, 255, 255, .62) !important; box-shadow: none !important;
}
html:is([data-ambiance="fcb"], [data-ambiance="arsenal"]) :is(.dbx-hero, .rex-bandeau, .rex-bandeau-hote) .dbx-btn-blanc:hover {
  background: rgba(255, 255, 255, .26) !important; border-color: var(--club-or) !important;
}

/* ── Valencia CF : noir du short, orange du rat penat, liseré senyera (jaune #FFD200, rouge #DA121A) ─
   11.10.2026 : la Senyera coronada — au-dessus des barres jaune et rouge, la bande azur aux
   ornements d'or (couronne à gauche, fleurons debout du drapeau), dessinée par les variables --vlc-*
   de css/99-themes.css. Menu : 14 px d'azur (fleurons « courts ») + 5 px de barres, sous le logo
   (qui commence à 20 px) ; la frise est décalée de 22/24 × 14 px pour qu'un grand fleuron tombe
   sous la couronne. Le filigrane : la chauve-souris du Centenari (1919-2019-∞), deux ailes en
   éventail, nervures et bord festonné, oreilles carrées au centre.
   --sidebar redéfini DANS le menu (css/00 y pose le marine #113679 en clair) : la tête collante du
   menu complet (.nav-fixe, js/154) en prend le fond, et dessinait une bande bleue sur le noir. */
html[data-ambiance="valencia"] .sidebar {
  --brand-cyan: #F27F1B;
  --sidebar: #121212;
  background:
    var(--vlc-couronne) left 0 top 0 / auto 14px no-repeat,
    var(--vlc-fleurons-court) left 12.833px top 0 / auto 14px repeat-x,
    var(--vlc-azur) left 0 top 0 / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, #FFD200 0 10px, #DA121A 10px 20px) left 0 top 14px / 100% 5px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 70'%3E%3Cg id='l' fill='%23F27F1B' opacity='.13'%3E%3Cpath d='M.5 32.4Q12 8 48.9 1.3L22.2 42.6Q12 34 .5 32.4Z' fill-opacity='1'/%3E%3Cpath d='M48.9 1.3L55.6 48Q39 33 22.2 42.6Z' fill-opacity='0.6'/%3E%3Cpath d='M48.9 1.3L99.6 63.5Q80 40 55.6 48Z' fill-opacity='1'/%3E%3Cpath d='M48.9 1.3Q73 8 93.3 23.5L93.3 19.1L97.6 19.6L98.2 20.2L99.6 63.5Z' fill-opacity='0.6'/%3E%3C/g%3E%3Cuse href='%23l' transform='matrix(-1 0 0 1 200 0)'/%3E%3C/svg%3E") right -26px bottom 30px / 200px auto no-repeat,
    radial-gradient(120% 34% at 0% 0%, rgba(242, 127, 27, .20) 0%, transparent 60%),
    linear-gradient(168deg, #0B0B0B 0%, #151515 55%, #1E1E1E 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .10), 4px 0 18px -6px rgba(0, 0, 0, .45);
}
html[data-ambiance="valencia"] .sidebar::before { opacity: .45; }
html[data-ambiance="valencia"] .sidebar :is(.nav-item, .nav-solo-btn).active {
  background: linear-gradient(90deg, rgba(242, 127, 27, .26) 0%, rgba(242, 127, 27, .07) 100%);
}
/* Barre du haut sur iPhone : 5 px d'azur nu + 3 px de barres, dans les 8 px de marge haute. */
html[data-ambiance="valencia"] .mobile-topbar {
  background:
    var(--vlc-azur) left 0 top 0 / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, #FFD200 0 10px, #DA121A 10px 20px) left 0 top 5px / 100% 3px no-repeat,
    linear-gradient(135deg, #0B0B0B 0%, #1A1A1A 60%, #2A2A2A 100%) !important;
}
html[data-ambiance="valencia"] .mobile-topbar .rex-topbar-marque { color: #F27F1B !important; }
/* Les bandeaux : noir, halo orange, Senyera coronada en tête, la chauve-souris du Centenari en
   filigrane à droite. La bande azur (16 px, fleurons du drapeau) et la bordure rouge à points et
   joyaux (4 px) occupent une bordure haute transparente de 20 px : elles ajoutent leur hauteur au
   bandeau au lieu de passer sous le titre, quel que soit le rembourrage de chaque famille de bandeau
   (14 px sur téléphone). Leurs couches partent du bord extérieur (border-box) ; les barres jaune et
   rouge, du bord intérieur, juste dessous. La couronne est collée à gauche (son cartouche couvre la
   frise dès le bord) ; la frise est décalée de 22/24 × 16 px. */
html[data-ambiance="valencia"] :is(.dbx-hero, .fcx-hero, .cf-hero, .ozx-hero, .rex-bandeau, .rex-bandeau-hote) {
  border-top: 20px solid transparent;
  background:
    var(--vlc-couronne) left 0 top 0 / auto 16px no-repeat border-box,
    var(--vlc-fleurons) left 14.667px top 0 / auto 16px repeat-x border-box,
    var(--vlc-azur) left 0 top 0 / 100% 16px no-repeat border-box,
    var(--vlc-bordure) left 0 top 16px / auto 4px repeat-x border-box,
    repeating-linear-gradient(90deg, #FFD200 0 12px, #DA121A 12px 24px) top left / 100% 5px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 70'%3E%3Cg id='l' fill='%23F27F1B' opacity='.2'%3E%3Cpath d='M.5 32.4Q12 8 48.9 1.3L22.2 42.6Q12 34 .5 32.4Z' fill-opacity='1'/%3E%3Cpath d='M48.9 1.3L55.6 48Q39 33 22.2 42.6Z' fill-opacity='0.6'/%3E%3Cpath d='M48.9 1.3L99.6 63.5Q80 40 55.6 48Z' fill-opacity='1'/%3E%3Cpath d='M48.9 1.3Q73 8 93.3 23.5L93.3 19.1L97.6 19.6L98.2 20.2L99.6 63.5Z' fill-opacity='0.6'/%3E%3C/g%3E%3Cuse href='%23l' transform='matrix(-1 0 0 1 200 0)'/%3E%3C/svg%3E") right 4% bottom 2px / min(340px, 46%) auto no-repeat,
    radial-gradient(120% 150% at 100% 0%, rgba(242, 127, 27, .30) 0%, transparent 55%),
    linear-gradient(135deg, #0B0B0B 0%, #1A1A1A 55%, #2B2B2B 100%);
  color: #FFFFFF;
}
/* L'accueil (11.10.2026, 3e passe : « relève la chauve-souris du Centenari à l'accueil, elle ne se
   voit pas, mets-la au-dessus du volcan, réduis la taille de sorte que l'aile ne soit pas découpée »).
   — Bande : 22 px + 5 px de bordure sur ordinateur (la forme la plus fidèle au drapeau), 16 + 4 px
     sur téléphone.
   — La chauve-souris : plus petite (104 px, 70 px sur téléphone), deux fois plus marquée (48 %
     d'opacité au lieu de 20 %), et posée dans le ciel AU-DESSUS DU VOLCAN du décor de Rex (js/117,
     .rxa-decor : 420 × 170 calé à droite, cratère à 118 × 62). Mesures faites sur l'accueil réel :
     cratère à 304 px du bord droit et 136 px du bas sur ordinateur (le décor est ancré à droite et
     en bas : la valeur ne bouge pas de 1280 à 1920 px), à 177 px du bord droit et 61 px du bas sur
     téléphone. Elle reste entre le bas des boutons et le panache de fumée, sans rien de coupé.
     L'écusson du club (js/183, 116 px à 31 % du bord droit, 84 px à 26 % sous 1 180 px) et Rex au
     repos (à 127–247 px du bord droit) se partagent le reste : au-dessus du cratère dès 1 502 px,
     à gauche de l'écusson (qui recouvre alors le cratère) de 1 181 à 1 501 px, au-dessus du flanc
     gauche du volcan de 769 à 1 180 px — jamais derrière la pastille blanche ni la tête de Rex.
   C'est une couche du fond du bandeau : texte, boutons, recherche, décor et Rex passent devant.
   Les dimensions passent par des variables, les trois cas ne changent qu'elles. */
html[data-ambiance="valencia"] .dbx-hero {
  --vlc-bande: 16px; --vlc-bord: 4px; --vlc-calage: 14.667px;            /* 22/24 × 16 */
  --vlc-cs: right 142px bottom 72px / 70px auto;                          /* téléphone */
  border-top-width: calc(var(--vlc-bande) + var(--vlc-bord));
  background:
    var(--vlc-couronne) left 0 top 0 / auto var(--vlc-bande) no-repeat border-box,
    var(--vlc-fleurons) left var(--vlc-calage) top 0 / auto var(--vlc-bande) repeat-x border-box,
    var(--vlc-azur) left 0 top 0 / 100% var(--vlc-bande) no-repeat border-box,
    var(--vlc-bordure) left 0 top var(--vlc-bande) / auto var(--vlc-bord) repeat-x border-box,
    repeating-linear-gradient(90deg, #FFD200 0 12px, #DA121A 12px 24px) top left / 100% 5px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 70'%3E%3Cg id='l' fill='%23F27F1B' opacity='.48'%3E%3Cpath d='M.5 32.4Q12 8 48.9 1.3L22.2 42.6Q12 34 .5 32.4Z' fill-opacity='1'/%3E%3Cpath d='M48.9 1.3L55.6 48Q39 33 22.2 42.6Z' fill-opacity='0.6'/%3E%3Cpath d='M48.9 1.3L99.6 63.5Q80 40 55.6 48Z' fill-opacity='1'/%3E%3Cpath d='M48.9 1.3Q73 8 93.3 23.5L93.3 19.1L97.6 19.6L98.2 20.2L99.6 63.5Z' fill-opacity='0.6'/%3E%3C/g%3E%3Cuse href='%23l' transform='matrix(-1 0 0 1 200 0)'/%3E%3C/svg%3E") var(--vlc-cs) no-repeat,
    radial-gradient(120% 150% at 100% 0%, rgba(242, 127, 27, .30) 0%, transparent 55%),
    linear-gradient(135deg, #0B0B0B 0%, #1A1A1A 55%, #2B2B2B 100%);
}
@media (min-width: 769px) {
  html[data-ambiance="valencia"] .dbx-hero {
    --vlc-bande: 22px; --vlc-bord: 5px; --vlc-calage: 20.167px;          /* 22/24 × 22 */
    --vlc-cs: right 326px bottom 160px / 104px auto;                      /* à gauche du panache */
  }
}
@media (min-width: 1181px) {
  /* L'écusson (116 px, à 31 %) recouvre le cratère et Rex se tient juste à droite : elle se pose à
     gauche de l'écusson, à sa hauteur (le pourcentage d'un fond se calcule sur « largeur − image » :
     31 % × (L − 92) + 153 px = 31 % × L + 124 px, soit 8 px à gauche de la pastille). */
  html[data-ambiance="valencia"] .dbx-hero { --vlc-cs: right calc(31% + 153px) bottom 160px / 92px auto; }
}
@media (min-width: 1502px) {
  /* Grand écran : l'écusson est passé à gauche du volcan, le ciel au-dessus du cratère est libre
     (entre Rex, à 247 px du bord, et la pastille) : elle vole pile au-dessus du panache. */
  html[data-ambiance="valencia"] .dbx-hero { --vlc-cs: right 252px bottom 160px / 104px auto; }
}

/* ── Arsenal (revu le 11.10.2026 : « beaucoup trop rouge, l'écusson ne se voit pas bien ») ──────
   Base marine #063672 qui descend vers le presque noir, rouge #EF0107 en TOUCHES seulement (liseré
   du haut, repère de l'élément actif, soulignement des titres), filet or discret, canon en
   filigrane blanc. L'écusson est posé sur une pastille blanche par js/183 (menu, bandeaux). */
html[data-ambiance="arsenal"] .sidebar {
  --brand-cyan: #EF0107;
  background:
    linear-gradient(#EF0107, #EF0107) top left / 100% 4px no-repeat,
    linear-gradient(rgba(200, 162, 74, .85), rgba(200, 162, 74, .85)) left 0 top 4px / 100% 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50'%3E%3Cg fill='%23FFFFFF' opacity='.16'%3E%3Cpath d='M22 14L104 18L104 15L112 15L112 31L104 31L104 28L22 32C16 32 12 28 12 23C12 18 16 14 22 14Z'/%3E%3Ccircle cx='7' cy='23' r='4'/%3E%3Cpath fill-rule='evenodd' d='M28 36a12 12 0 1 0 24 0a12 12 0 1 0-24 0ZM33 36a7 7 0 1 0 14 0a7 7 0 1 0-14 0Z'/%3E%3Cpath d='M20 41L66 41L62 47L24 47Z'/%3E%3C/g%3E%3C/svg%3E") left 14px bottom 26px / 200px auto no-repeat,
    radial-gradient(120% 30% at 0% 0%, rgba(239, 1, 7, .14) 0%, transparent 60%),
    linear-gradient(168deg, #0A3F80 0%, #063672 45%, #04234A 100%);
  box-shadow: inset -2px 0 0 rgba(200, 162, 74, .7), 4px 0 18px -6px rgba(0, 0, 0, .55);
}
html[data-ambiance="arsenal"] .sidebar::before { opacity: .3; }
html[data-ambiance="arsenal"] .sidebar :is(.nav-item, .nav-solo-btn).active {
  background: linear-gradient(90deg, rgba(239, 1, 7, .26) 0%, rgba(239, 1, 7, .06) 100%);
  box-shadow: inset 3px 0 0 #EF0107;
}
html[data-ambiance="arsenal"] .mobile-topbar {
  background:
    linear-gradient(#EF0107, #EF0107) bottom left / 100% 3px no-repeat,
    linear-gradient(135deg, #0A3F80 0%, #063672 60%, #04234A 100%) !important;
}
html[data-ambiance="arsenal"] .mobile-topbar .rex-topbar-marque { color: #FFFFFF !important; }
/* Les bandeaux : marine profond, liseré rouge puis filet or, le canon en filigrane à droite. */
html[data-ambiance="arsenal"] :is(.dbx-hero, .fcx-hero, .cf-hero, .ozx-hero, .rex-bandeau, .rex-bandeau-hote) {
  background:
    linear-gradient(#EF0107, #EF0107) top left / 100% 4px no-repeat,
    linear-gradient(rgba(200, 162, 74, .9), rgba(200, 162, 74, .9)) left 0 top 4px / 100% 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50'%3E%3Cg fill='%23FFFFFF' opacity='.14'%3E%3Cpath d='M22 14L104 18L104 15L112 15L112 31L104 31L104 28L22 32C16 32 12 28 12 23C12 18 16 14 22 14Z'/%3E%3Ccircle cx='7' cy='23' r='4'/%3E%3Cpath fill-rule='evenodd' d='M28 36a12 12 0 1 0 24 0a12 12 0 1 0-24 0ZM33 36a7 7 0 1 0 14 0a7 7 0 1 0-14 0Z'/%3E%3Cpath d='M20 41L66 41L62 47L24 47Z'/%3E%3C/g%3E%3C/svg%3E") right 3% bottom 10px / min(330px, 44%) auto no-repeat,
    radial-gradient(110% 140% at 100% 0%, rgba(239, 1, 7, .16) 0%, transparent 52%),
    linear-gradient(135deg, #0A3F80 0%, #063672 50%, #041D40 100%);
  color: #FFFFFF;
  border: 1px solid rgba(200, 162, 74, .35);
}

/* ── La typographie des titres de bandeau, à la touche du club ──────────────────────────────── */
html:is([data-ambiance="fcb"], [data-ambiance="valencia"], [data-ambiance="arsenal"]) :is(.dbx-hero-titre, .rex-bandeau h1, .rex-bandeau-hote h1, .rex-bandeau-hote h2, .fcx-hero h1, .cf-hero h1, .ozx-hero h1) {
  font-weight: 700; text-decoration-line: underline; text-decoration-thickness: 3px; text-underline-offset: 7px;
}
html[data-ambiance="fcb"] :is(.dbx-hero-titre, .rex-bandeau h1, .rex-bandeau-hote h1, .rex-bandeau-hote h2, .fcx-hero h1, .cf-hero h1, .ozx-hero h1) { text-decoration-color: #EDBB00; }
html[data-ambiance="valencia"] :is(.dbx-hero-titre, .rex-bandeau h1, .rex-bandeau-hote h1, .rex-bandeau-hote h2, .fcx-hero h1, .cf-hero h1, .ozx-hero h1) { text-decoration-color: #F27F1B; }
html[data-ambiance="arsenal"] :is(.dbx-hero-titre, .rex-bandeau h1, .rex-bandeau-hote h1, .rex-bandeau-hote h2, .fcx-hero h1, .cf-hero h1, .ozx-hero h1) {
  text-decoration-color: #EF0107; text-transform: uppercase; letter-spacing: .03em;
}
/* Les chiffres en gras du résumé d'accueil (turquoise par défaut) prennent l'orange du club sur le
   noir de Valence (6,8:1). Chez le Barça et Arsenal, css/97 leur impose l'encre blanche du bandeau. */
html[data-ambiance="valencia"] .dbx-hero .dbx-hero-resume strong { color: #F27F1B; }

/* Les boutons principaux posés sur un bandeau clair (thèmes sombres) : css/97 force l'encre
   marine dans tout le bandeau avec un sélecteur très lourd, et son exception « texte blanc » pour
   .btn-save pesait moins : texte marine sur un bouton grenat (Barça) ou turquoise. On l'emporte
   avec le même poids, plus une classe. */
html:not([data-theme="clair"]) :is(.dbx-hero, .fcx-hero, .cf-hero, .ozx-hero, .rex-bandeau, .rex-bandeau-hote) :is(.btn-save, .btn-add, .btn-primary):not([class*="badge"]):not([class*="puce"]):not([class*="pastille"]):not([class*="tendance"]):not([class*="chip"]):not([class*="sous"]):not([class*="surtitre"]):not([class*="date"]) {
  color: var(--on-accent, #fff) !important;
}

/* ── 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; }
}