/* =========================================================
   THÈME OBSCUR
   ---------------------------------------------------------
   Ce fichier ne redéfinit PAS le thème clair.
   Il ne contient que les différences visuelles du mode sombre.
   La structure commune de page reste dans base.css, home.css et home-media.css.
   ========================================================= */

html[data-site-theme="dark"] {
  background: #181a1e;
}

html[data-site-theme="dark"] body,
html[data-site-theme="dark"] .site-main {
  background: #2f3238;
}

/* ---------- En-tête public ---------- */
html[data-site-theme="dark"] .site-header {
  background: rgba(24, 26, 30, .97);
  border-bottom-color: rgba(255, 255, 255, .09);
  box-shadow: 0 5px 22px rgba(0, 0, 0, .24);
}

html[data-site-theme="dark"] .brand-text {
  color: #f1f3f5;
}

html[data-site-theme="dark"] .nav-link {
  color: #c8ced5;
}

html[data-site-theme="dark"] .nav-link:hover,
html[data-site-theme="dark"] .nav-link:focus-visible {
  color: #ffffff;
}

html[data-site-theme="dark"] .nav-link::after {
  background: linear-gradient(90deg, #2c7fa3, #245b86);
}

html[data-site-theme="dark"] #drawer-open.hamburger {
  border-color: rgba(255, 255, 255, .12);
  background:
    linear-gradient(145deg, #474b52, #373a40);
  color: #edf1f4;
  box-shadow:
    0 7px 24px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

html[data-site-theme="dark"] #drawer-open.hamburger:hover {
  border-color: rgba(65, 139, 172, .35);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, .23),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* ---------- Accueil ---------- */
/*
 * Même dessin que home.css :
 * on ne change ici que la palette.
 */
html[data-site-theme="dark"] .hero {
  background:
    radial-gradient(
      ellipse 78% 54% at 10% 8%,
      rgba(31, 118, 151, .30) 0%,
      rgba(31, 118, 151, .12) 34%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 70% 48% at 92% 18%,
      rgba(34, 86, 129, .28) 0%,
      rgba(34, 86, 129, .11) 36%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 88% 52% at 48% 92%,
      rgba(35, 104, 139, .18) 0%,
      rgba(35, 104, 139, .07) 42%,
      transparent 74%
    ),
    linear-gradient(
      180deg,
      #393c42 0%,
      #34373d 34%,
      #31343a 68%,
      #2f3238 100%
    );
  background-repeat: no-repeat;
  background-color: #2f3238;
}

html[data-site-theme="dark"] .parallax-layer {
  background:
    radial-gradient(
      1200px 600px at 20% 50%,
      rgba(31, 118, 151, .24),
      transparent 60%
    ),
    radial-gradient(
      800px 400px at 80% 30%,
      rgba(34, 86, 129, .22),
      transparent 70%
    );
}

/* Panneau Bienvenue : léger voile translucide sur le ciel en mode sombre.
   La couleur reste identique, seuls 15 % du fond deviennent transparents. */
html[data-site-theme="dark"] .hero-content {
  background: rgba(32, 94, 120, 0.85);
  border-color: rgba(122, 190, 215, .26);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

html[data-site-theme="dark"] .hero-title {
  /* Dégradé historique du thème sombre : rose -> fuchsia. */
  background:
    linear-gradient(135deg, #ff77ba 0%, #e847a0 52%, #c92f88 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* Halo assorti au thème sombre, sans modifier le dégradé. */
  --hero-title-halo-rgb: 255, 77, 174;
}

html[data-site-theme="dark"] .hero-lead {
  color: #f2f7f9;
}

html[data-site-theme="dark"] .hero-content .hint {
  color: #d7e7ed;
}

/* ---------- Pied de page public ---------- */
/*
 * La taille et le placement viennent de gallery.css.
 * Ici : uniquement les couleurs du thème sombre.
 */
html[data-site-theme="dark"] .site-footer {
  background: #181a1e;
  color: #c7cdd3;
  border-top-color: rgba(255, 255, 255, .09);
}

/* ---------- Panneaux / lightbox : surfaces blanches -> gris ---------- */
/*
 * Étape volontairement limitée :
 * - la grande surface blanche du panneau devient le gris de l'accueil ;
 * - le fond général de la lightbox suit la même palette sombre ;
 * - les encadrés colorés, boutons et cartouches restent inchangés.
 */

/*
 * Le panneau conserve exactement son contour animé actuel.
 * Seul le premier calque (l'intérieur blanc) devient gris.
 */
html[data-site-theme="dark"] #panel-overlay .panel {
  background:
    linear-gradient(#2f3238, #2f3238) padding-box,
    linear-gradient(100deg, var(--turq-a), var(--turq-b)) border-box;
}

@supports (background: conic-gradient(from 0deg, #000, #fff)) {
  html[data-site-theme="dark"] #panel-overlay .panel {
    background:
      linear-gradient(#2f3238, #2f3238) padding-box,
      conic-gradient(
        from var(--panel-wave-angle),
        var(--turq-a) 0deg,
        var(--turq-a) 72deg,
        var(--turq-b) 128deg,
        var(--turq-a) 176deg,
        var(--turq-a) 244deg,
        var(--turq-b) 304deg,
        var(--turq-a) 360deg
      ) border-box;
  }
}

/*
 * Le fond général de la lightbox conserve ses halos cyan/bleu :
 * seules les zones blanches/pâles sont remplacées par les gris
 * déjà utilisés sur l'accueil sombre.
 */
html[data-site-theme="dark"] .lightbox {
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(57,60,66,.76),
      transparent 25%
    ),
    radial-gradient(
      circle at 80% 18%,
      rgba(167,243,250,.24),
      transparent 31%
    ),
    radial-gradient(
      circle at 72% 82%,
      rgba(186,230,253,.22),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #363940,
      #2f3238
    );
}

/*
 * La légende finale de la lightbox est transparente.
 * Son texte passe simplement en clair pour rester lisible sur le gris.
 * Le bouton J'aime et les commandes ne sont pas modifiés.
 */
html[data-site-theme="dark"] .lightbox-caption-box,
html[data-site-theme="dark"] .lightbox-frame.lightbox-video .lightbox-caption-box {
  color: rgba(232,239,243,.86);
  text-shadow: 0 1px 0 rgba(0,0,0,.28);
}


/* ---------- Menu hamburger : coque ---------- */
html[data-site-theme="dark"] #site-drawer .drawer-panel {
  background: #33363c;
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .34);
}

html[data-site-theme="dark"] #site-drawer .drawer-body {
  background: #33363c;
}

html[data-site-theme="dark"] #site-drawer .drawer-header,
html[data-site-theme="dark"] #site-drawer .drawer-footer {
  background: #282b30;
  border-color: rgba(255, 255, 255, .09);
}

html[data-site-theme="dark"] #site-drawer .drawer-header > strong,
html[data-site-theme="dark"] #site-drawer .drawer-brand-copy strong {
  color: #f2f4f6;
}

html[data-site-theme="dark"] #site-drawer .drawer-brand-copy small {
  color: #aeb6be;
}

html[data-site-theme="dark"] #site-drawer .drawer-intro p,
html[data-site-theme="dark"] #site-drawer .drawer-intro span {
  color: #b7c0c8;
}

html[data-site-theme="dark"] #site-drawer .drawer-close {
  background: rgba(255, 255, 255, .09);
  color: #eef2f4;
  border-color: rgba(255, 255, 255, .10);
}

html[data-site-theme="dark"] #site-drawer .drawer-close:hover {
  background: rgba(255, 255, 255, .14);
}

/* ---------- Cartouches : blancs, lumineux et colorés ---------- */
html[data-site-theme="dark"] #site-drawer .tree-group {
  border-color:
    color-mix(in srgb, var(--accent) 42%, transparent);
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #ffffff 38%,
      color-mix(in srgb, var(--accent) 16%, white) 100%
    );
  box-shadow:
    0 9px 24px rgba(0,0,0,.18),
    inset 0 1px 0 #ffffff;
}

html[data-site-theme="dark"] #site-drawer .tree-group:hover {
  border-color:
    color-mix(in srgb, var(--accent) 58%, transparent);
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #ffffff 30%,
      color-mix(in srgb, var(--accent) 21%, white) 100%
    );
  box-shadow:
    0 12px 29px rgba(0,0,0,.22),
    0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
    inset 0 1px 0 #ffffff;
}

html[data-site-theme="dark"] #site-drawer .tree-group.is-open,
html[data-site-theme="dark"] #site-drawer .tree-group[aria-expanded="true"] {
  border-color: var(--accent);
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #ffffff 24%,
      color-mix(in srgb, var(--accent) 27%, white) 100%
    );
  box-shadow:
    0 14px 32px rgba(0,0,0,.24),
    0 0 0 1px color-mix(in srgb, var(--accent) 13%, transparent),
    inset 0 1px 0 #ffffff;
}

html[data-site-theme="dark"] #site-drawer .tree-icon {
  background:
    color-mix(in srgb, var(--accent) 20%, white);
  border-color:
    color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 3px 8px color-mix(in srgb, var(--accent) 8%, transparent);
}

html[data-site-theme="dark"] #site-drawer .tree-title {
  color: #1d2941;
}

html[data-site-theme="dark"] #site-drawer .tree-subtitle {
  color: #6b768a;
}

html[data-site-theme="dark"] #site-drawer .tree-child-link {
  background:
    color-mix(in srgb, var(--accent) 7%, white);
  color: #344057;
}

html[data-site-theme="dark"] #site-drawer .tree-child-link:hover {
  background:
    color-mix(in srgb, var(--accent) 16%, white);
  color: #182238;
}

html[data-site-theme="dark"] #site-drawer .tree-toggle:hover,
html[data-site-theme="dark"] #site-drawer .tree-link:hover {
  background: rgba(255,255,255,.34);
}

/* Scrollbar discrète : pas de liseré blanc parasite. */
html[data-site-theme="dark"] #site-drawer .drawer-body,
html[data-site-theme="dark"] #site-drawer .tree-children {
  scrollbar-width: thin;
  scrollbar-color: rgba(181, 189, 197, .30) transparent;
}

html[data-site-theme="dark"] #site-drawer .drawer-body::-webkit-scrollbar,
html[data-site-theme="dark"] #site-drawer .tree-children::-webkit-scrollbar {
  width: 7px;
}

html[data-site-theme="dark"] #site-drawer .drawer-body::-webkit-scrollbar-track,
html[data-site-theme="dark"] #site-drawer .tree-children::-webkit-scrollbar-track {
  background: transparent;
}

html[data-site-theme="dark"] #site-drawer .drawer-body::-webkit-scrollbar-thumb,
html[data-site-theme="dark"] #site-drawer .tree-children::-webkit-scrollbar-thumb {
  background: rgba(181, 189, 197, .26);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

html[data-site-theme="dark"] #site-drawer .drawer-body::-webkit-scrollbar-thumb:hover,
html[data-site-theme="dark"] #site-drawer .tree-children::-webkit-scrollbar-thumb:hover {
  background: rgba(181, 189, 197, .42);
  border: 2px solid transparent;
  background-clip: padding-box;
}

html[data-site-theme="dark"] #site-drawer .tree {
  border-right: 0;
  box-shadow: none;
}

/* ---------- Interrupteur et version dans le drawer ---------- */
html[data-site-theme="dark"] #site-drawer .site-theme-switch-label--light {
  color: #aab3bc;
}

html[data-site-theme="dark"] #site-drawer .site-theme-switch-label--dark {
  color: #dce5ea;
}

html[data-site-theme="dark"] #site-drawer
.site-theme-toggle[aria-checked="true"] .site-theme-switch-track {
  background: linear-gradient(135deg, #2c7fa3, #245b86);
  border-color: rgba(75, 151, 186, .38);
}

html[data-site-theme="dark"] #site-drawer
.site-theme-toggle[aria-checked="true"] .site-theme-switch-thumb {
  background: #e7ebee;
}

html[data-site-theme="dark"] #site-drawer .drawer-footer-version {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .10);
  color: #c9d0d6;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  html[data-site-theme="dark"] .site-header {
    background: rgba(24, 26, 30, .985);
  }

  /*
   * Même dessin que mobile.css, uniquement recoloré.
   * La règle flex commune du .hero vient de home.css.
   */
  html[data-site-theme="dark"] .hero {
    background:
      radial-gradient(
        ellipse 92% 40% at 5% 4%,
        rgba(31, 118, 151, .29) 0%,
        rgba(31, 118, 151, .12) 38%,
        transparent 74%
      ),
      radial-gradient(
        ellipse 88% 42% at 98% 19%,
        rgba(34, 86, 129, .26) 0%,
        rgba(34, 86, 129, .10) 40%,
        transparent 76%
      ),
      radial-gradient(
        ellipse 110% 46% at 42% 94%,
        rgba(35, 104, 139, .17) 0%,
        transparent 74%
      ),
      linear-gradient(
        180deg,
        #393c42 0%,
        #34373d 38%,
        #31343a 72%,
        #2f3238 100%
      );
    background-repeat: no-repeat;
    background-color: #2f3238;
  }

  /*
   * Sur mobile, même principe que le thème clair :
   * le message Bienvenue est posé directement sur le fond,
   * sans carte ni encadré.
   */
  html[data-site-theme="dark"] .hero-content {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ---------- Footer du drawer : disposition du switch ---------- */
#site-drawer .drawer-footer-label {
  display: none;
}

#site-drawer .drawer-footer-inner {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "theme version";
  align-items: center;
  gap: 10px;
}

#site-drawer .drawer-footer-theme {
  grid-area: theme;
  justify-self: start;
  min-width: 0;
}

#site-drawer .drawer-footer-version {
  grid-area: version;
  justify-self: end;
}

@media (max-width: 390px) {
  #site-drawer .drawer-footer-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "theme version";
  }

  #site-drawer .site-theme-toggle {
    gap: 5px;
  }

  #site-drawer .site-theme-switch-label {
    font-size: 10px;
  }
}

/* ---------- Interrupteur cliquable ---------- */
#site-drawer .drawer-footer {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

#site-drawer .drawer-footer-inner,
#site-drawer .drawer-footer-theme,
#site-drawer .site-theme-toggle {
  pointer-events: auto;
}

#site-drawer .drawer-footer-theme {
  position: relative;
  z-index: 4;
}

#site-drawer .site-theme-toggle {
  position: relative;
  z-index: 5;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

#site-drawer .site-theme-toggle * {
  pointer-events: none;
}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  #site-drawer .site-theme-switch-thumb,
  #site-drawer .site-theme-switch-track,
  #site-drawer .site-theme-switch-label {
    transition: none;
  }
}


/* =========================================================
   ÉTAPE 2B — cartouche de titre des panneaux sur base blanche
   ---------------------------------------------------------
   Le fond du panneau reste gris.
   Le bandeau coloré retrouve la même luminosité qu'en clair :
   blanc opaque dessous + teinte de rubrique par-dessus.
   ========================================================= */

html[data-site-theme="dark"] #panel-overlay .panel-header {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.965),
      var(--panel-accent-soft)
    ),
    #ffffff;

  border-color: var(--panel-accent-border);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 1px 4px rgba(34,45,67,.025);
}

/*
 * L'icône du bandeau garde elle aussi une base blanche,
 * afin que sa teinte reste identique au thème clair.
 */
html[data-site-theme="dark"] #panel-overlay .panel-heading-icon {
  background:
    color-mix(in srgb, var(--panel-accent) 12%, white);

  border-color:
    color-mix(in srgb, var(--panel-accent) 15%, transparent);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* Texte du cartouche : mêmes tons qu'en clair. */
html[data-site-theme="dark"] #panel-overlay .panel-heading-title {
  color: #1d2941;
}

html[data-site-theme="dark"] #panel-overlay .panel-heading-subtitle {
  color: #788296;
}

/* Le détail de dossier garde la couleur propre à la rubrique. */
/* =========================================================
   ÉTAPE 2C — panneau Contact : contraste du texte
   ========================================================= */

html[data-site-theme="dark"] #panel-contact {
  color: #ffffff;
}

html[data-site-theme="dark"] #panel-contact .centered,
html[data-site-theme="dark"] #panel-contact .social-label {
  color: #ffffff;
}

/* Adresse e-mail : accent rose, cohérent avec le thème sombre de l'accueil. */
html[data-site-theme="dark"]
#panel-contact a[href^="mailto:"] {
  color: #ff77ba;
  text-decoration-color: rgba(255,119,186,.55);
}

html[data-site-theme="dark"]
#panel-contact a[href^="mailto:"]:hover,
html[data-site-theme="dark"]
#panel-contact a[href^="mailto:"]:focus-visible {
  color: #ff9dcd;
  text-decoration-color: currentColor;
}


/* =========================================================
   ÉTAPE 2D — cartouches hamburger sombres et colorés
   ---------------------------------------------------------
   Thème obscur uniquement.
   Le blanc disparaît des gros cartouches du drawer :
   base anthracite + teinte propre à chaque rubrique.
   ========================================================= */

html[data-site-theme="dark"] #site-drawer .tree-group {
  border-color:
    color-mix(in srgb, var(--accent) 46%, transparent);

  background:
    linear-gradient(
      145deg,
      #202329 0%,
      #202329 38%,
      color-mix(in srgb, var(--accent) 18%, #202329) 100%
    );

  box-shadow:
    0 9px 24px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.055);
}

html[data-site-theme="dark"] #site-drawer .tree-group:hover {
  border-color:
    color-mix(in srgb, var(--accent) 62%, transparent);

  background:
    linear-gradient(
      145deg,
      #24272d 0%,
      #22252b 30%,
      color-mix(in srgb, var(--accent) 24%, #202329) 100%
    );

  box-shadow:
    0 12px 30px rgba(0,0,0,.29),
    0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
    inset 0 1px 0 rgba(255,255,255,.07);
}

html[data-site-theme="dark"] #site-drawer .tree-group.is-open,
html[data-site-theme="dark"] #site-drawer .tree-group[aria-expanded="true"] {
  border-color: var(--accent);

  background:
    linear-gradient(
      145deg,
      #25282f 0%,
      #23262c 24%,
      color-mix(in srgb, var(--accent) 29%, #202329) 100%
    );

  box-shadow:
    0 14px 34px rgba(0,0,0,.31),
    0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Icône : sombre elle aussi, avec davantage de couleur. */
html[data-site-theme="dark"] #site-drawer .tree-icon {
  background:
    color-mix(in srgb, var(--accent) 30%, #1b1e23);

  border-color:
    color-mix(in srgb, var(--accent) 50%, transparent);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 12px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Texte clair sur fond anthracite. */
html[data-site-theme="dark"] #site-drawer .tree-title {
  color: #f5f7fa;
}

html[data-site-theme="dark"] #site-drawer .tree-subtitle {
  color: #b8c0c8;
}

/* Les flèches restent dans la couleur forte de la rubrique. */
html[data-site-theme="dark"] #site-drawer .chev,
html[data-site-theme="dark"] #site-drawer .tree-go,
html[data-site-theme="dark"] #site-drawer .tree-child-arrow {
  color: var(--accent);
}

/*
 * Sous-rubriques :
 * plus de blanc non plus, mais une surface sombre légèrement teintée.
 */
html[data-site-theme="dark"] #site-drawer .tree-child-link {
  background:
    color-mix(in srgb, var(--accent) 10%, #262a30);
  color: #e6ebef;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

html[data-site-theme="dark"] #site-drawer .tree-child-link:hover {
  background:
    color-mix(in srgb, var(--accent) 18%, #292d34);
  color: #ffffff;
}

/*
 * Le hover du bouton principal reste transparent :
 * la couleur vient du cartouche lui-même.
 */
html[data-site-theme="dark"] #site-drawer .tree-toggle:hover,
html[data-site-theme="dark"] #site-drawer .tree-link:hover {
  background: rgba(255,255,255,.025);
}


/* =========================================================
   ÉTAPE 2E — cartouche supérieur des panneaux sombre + coloré
   ---------------------------------------------------------
   Même langage visuel que les cartouches du hamburger :
   anthracite + teinte de la rubrique.
   ========================================================= */

html[data-site-theme="dark"] #panel-overlay .panel-header {
  background:
    linear-gradient(
      145deg,
      #202329 0%,
      #202329 38%,
      color-mix(in srgb, var(--panel-accent) 18%, #202329) 100%
    );

  border-color:
    color-mix(in srgb, var(--panel-accent) 46%, transparent);

  box-shadow:
    0 9px 24px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.055);
}

/* Icône du panneau : sombre et davantage teintée par la rubrique. */
html[data-site-theme="dark"] #panel-overlay .panel-heading-icon {
  background:
    color-mix(in srgb, var(--panel-accent) 30%, #1b1e23);

  border-color:
    color-mix(in srgb, var(--panel-accent) 50%, transparent);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 12px color-mix(in srgb, var(--panel-accent) 12%, transparent);
}

/* Titres : contraste clair sur le cartouche sombre. */
html[data-site-theme="dark"] #panel-overlay .panel-heading-title {
  color: #f5f7fa;
}

html[data-site-theme="dark"] #panel-overlay .panel-heading-subtitle {
  color: #b8c0c8;
}

/* Lorsqu'un dossier est sélectionné, son nom garde la couleur de la rubrique. */
html[data-site-theme="dark"]
#panel-overlay .panel[data-heading-detail="folder"] .panel-heading-subtitle {
  color: var(--panel-accent);
}

/*
 * Sur mobile, mobile.css donne normalement un fond blanc au header.
 * Cette règle garantit que le thème sombre conserve le nouveau cartouche.
 */
@media (max-width: 768px) {
  html[data-site-theme="dark"] #panel-overlay .panel-header {
    background:
      linear-gradient(
        145deg,
        #202329 0%,
        #202329 38%,
        color-mix(in srgb, var(--panel-accent) 18%, #202329) 100%
      );
  }
}


/* =========================================================
   ÉTAPE 2F — cartouche interne Ressources
   ---------------------------------------------------------
   Même langage visuel que le hamburger et les en-têtes
   de panneaux : anthracite + indigo Ressources.
   Couvre la structure actuelle ET l'ancien markup anti-cache.
   ========================================================= */

html[data-site-theme="dark"]
#textes-area .text-section-cartouche-resources,
html[data-site-theme="dark"]
#textes-area .text-group-resources > .text-group-heading {
  --resource-accent: #4f46e5;

  background:
    linear-gradient(
      145deg,
      #202329 0%,
      #202329 38%,
      color-mix(in srgb, var(--resource-accent) 18%, #202329) 100%
    );

  border-color:
    color-mix(in srgb, var(--resource-accent) 46%, transparent);

  box-shadow:
    0 9px 24px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.055);
}

/* Icône actuelle + compatibilité ancien markup. */
html[data-site-theme="dark"]
#textes-area .text-section-cartouche-icon,
html[data-site-theme="dark"]
#textes-area .text-group-resources > .text-group-heading > .text-group-heading-icon {
  background:
    color-mix(in srgb, var(--resource-accent) 30%, #1b1e23);

  border-color:
    color-mix(in srgb, var(--resource-accent) 50%, transparent);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 12px color-mix(in srgb, var(--resource-accent) 12%, transparent);
}

/* Titres actuels + compatibilité ancien markup. */
html[data-site-theme="dark"]
#textes-area .text-section-cartouche-title,
html[data-site-theme="dark"]
#textes-area .text-group-resources .text-group-title {
  color: #f5f7fa;
}

html[data-site-theme="dark"]
#textes-area .text-section-cartouche-subtitle,
html[data-site-theme="dark"]
#textes-area .text-group-resources .text-group-subtitle {
  color: #b8c0c8;
}


/* =========================================================
   ÉTAPE 2G — cartes de lecture Écrits / Ressources
   ---------------------------------------------------------
   Hiérarchie visuelle :
   - panneau : #2f3238
   - cartouches de navigation : #202329
   - cartes de lecture : #393d44 + légère teinte de rubrique
   ========================================================= */

html[data-site-theme="dark"]
#textes-area .text-group-writings .text-card,
html[data-site-theme="dark"]
#textes-area .text-group-resources .text-card {
  background:
    radial-gradient(
      ellipse 110% 88% at 10% 0%,
      rgba(var(--text-card-rgb), .12) 0%,
      rgba(var(--text-card-rgb), .035) 44%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 72% 70% at 96% 100%,
      rgba(var(--text-card-rgb), .035) 0%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      #3d4148 0%,
      #393d44 100%
    );

  border-color:
    rgba(var(--text-card-rgb), .28);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 2px 5px rgba(0,0,0,.10),
    0 9px 22px rgba(var(--text-card-rgb), .045);

  color: #edf0f2;
}

/* Texte courant des cartes. */
html[data-site-theme="dark"]
#textes-area .text-group-writings .text-card p,
html[data-site-theme="dark"]
#textes-area .text-group-resources .text-card p,
html[data-site-theme="dark"]
#textes-area .text-group-writings .text-card li,
html[data-site-theme="dark"]
#textes-area .text-group-resources .text-card li {
  color: #edf0f2;
}

/* Titre de chaque encadré : accent de rubrique plus lumineux. */
html[data-site-theme="dark"]
#textes-area .text-group-writings .text-card > h4 {
  color:
    color-mix(in srgb, #7c3aed 72%, #ffffff);
}

html[data-site-theme="dark"]
#textes-area .text-group-resources .text-card > h4 {
  color:
    color-mix(in srgb, #4f46e5 72%, #ffffff);
}

/*
 * Liens :
 * on conserve le principe bleu / indigo existant,
 * mais on les éclaircit légèrement pour le fond sombre.
 */
html[data-site-theme="dark"]
#textes-area .text-card .file-link:not(.is-visited),
html[data-site-theme="dark"]
#textes-area .text-card .file-link:not(.is-visited):visited {
  color: #79b8ff;
}

html[data-site-theme="dark"]
#textes-area .text-card .file-link.is-visited,
html[data-site-theme="dark"]
#textes-area .text-card .file-link.is-visited:visited {
  color: #b8a1ff;
}

html[data-site-theme="dark"]
#textes-area .text-card .file-link:hover {
  background: rgba(255,255,255,.045);
}

/* Fallback sans color-mix(). */
@supports not (color: color-mix(in srgb, red, blue)) {
  html[data-site-theme="dark"]
  #textes-area .text-group-writings .text-card > h4 {
    color: #b79af6;
  }

  html[data-site-theme="dark"]
  #textes-area .text-group-resources .text-card > h4 {
    color: #a6a0f4;
  }
}


/* =========================================================
   ÉTAPE 2H — encadrés sombres dans toutes les rubriques
   ---------------------------------------------------------
   Principe commun :
   - panneau : #2f3238
   - encadré de contenu : #393d44 / #3d4148
   - légère brume de la couleur de rubrique
   - bordure de rubrique
   - texte clair
   Les boutons et contrôles restent volontairement inchangés.
   ========================================================= */

/* =========================================================
   ACTUALITÉS — orange
   ========================================================= */

html[data-site-theme="dark"] #actus-feed .actu-card {
  background:
    radial-gradient(
      ellipse 118% 94% at 10% 0%,
      rgba(var(--actu-light-rgb), .12) 0%,
      rgba(var(--actu-light-rgb), .035) 42%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 104% 92% at 96% 100%,
      rgba(var(--actu-rgb), .045) 0%,
      transparent 78%
    ),
    linear-gradient(
      180deg,
      #3d4148 0%,
      #393d44 100%
    );

  border-color: rgba(var(--actu-rgb), .28);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 2px 5px rgba(0,0,0,.10),
    0 9px 22px rgba(var(--actu-rgb), .045);

  color: #edf0f2;
}

html[data-site-theme="dark"] #actus-feed .actu-content {
  color: #edf0f2;
}

html[data-site-theme="dark"] #actus-feed .actu-date {
  color: #f2c277;
}


/* =========================================================
   CONFÉRENCES / PHOTOS / VIDÉOS — dossiers
   ========================================================= */

html[data-site-theme="dark"] #conferences-folders .folder,
html[data-site-theme="dark"] #photos-folders .folder,
html[data-site-theme="dark"] #videos-folders .folder {
  background:
    radial-gradient(
      ellipse 115% 95% at 14% 0%,
      rgba(var(--folder-theme-rgb), .12) 0%,
      rgba(var(--folder-theme-rgb), .035) 42%,
      transparent 74%
    ),
    linear-gradient(
      180deg,
      #3d4148 0%,
      #393d44 100%
    );

  border-color:
    rgba(var(--folder-theme-rgb), .28);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 2px 5px rgba(0,0,0,.10),
    0 9px 22px rgba(var(--folder-theme-rgb), .045);

  color: #edf0f2;
}

html[data-site-theme="dark"] #conferences-folders .folder-name,
html[data-site-theme="dark"] #photos-folders .folder-name,
html[data-site-theme="dark"] #videos-folders .folder-name {
  color: #edf0f2;
}

/* Survol : légèrement plus clair et plus coloré. */
html[data-site-theme="dark"] #conferences-folders .folder:hover,
html[data-site-theme="dark"] #photos-folders .folder:hover,
html[data-site-theme="dark"] #videos-folders .folder:hover,
html[data-site-theme="dark"] #conferences-folders .folder:focus-visible,
html[data-site-theme="dark"] #photos-folders .folder:focus-visible,
html[data-site-theme="dark"] #videos-folders .folder:focus-visible {
  background:
    radial-gradient(
      ellipse 120% 100% at 14% 0%,
      rgba(var(--folder-theme-rgb), .18) 0%,
      rgba(var(--folder-theme-rgb), .055) 44%,
      transparent 75%
    ),
    linear-gradient(
      180deg,
      #41454c 0%,
      #3b3f46 100%
    );

  border-color:
    rgba(var(--folder-theme-rgb), .42);
}

/* Dossier sélectionné : accent encore un peu plus présent. */
html[data-site-theme="dark"] #conferences-folders .folder.selected,
html[data-site-theme="dark"] #photos-folders .folder.selected,
html[data-site-theme="dark"] #videos-folders .folder.selected {
  background:
    radial-gradient(
      ellipse 125% 108% at 12% 0%,
      rgba(var(--folder-theme-rgb), .22) 0%,
      rgba(var(--folder-theme-rgb), .07) 46%,
      transparent 76%
    ),
    linear-gradient(
      180deg,
      #42464d 0%,
      #3b3f46 100%
    );

  border-color:
    rgba(var(--folder-theme-rgb), .50);
}

html[data-site-theme="dark"]
#conferences-folders .folder.selected .folder-name,
html[data-site-theme="dark"]
#photos-folders .folder.selected .folder-name,
html[data-site-theme="dark"]
#videos-folders .folder.selected .folder-name {
  color:
    color-mix(in srgb, var(--folder-theme) 64%, #ffffff);
}

/* Surface qui regroupe les dossiers sur desktop. */
@media (min-width: 769px) {
  html[data-site-theme="dark"] #conferences-folders,
  html[data-site-theme="dark"] #photos-folders,
  html[data-site-theme="dark"] #videos-folders {
    background:
      radial-gradient(
        ellipse 70% 85% at 8% 0%,
        rgba(var(--folder-theme-rgb), .075) 0%,
        rgba(var(--folder-theme-rgb), .025) 42%,
        transparent 68%
      ),
      #34383e;

    box-shadow:
      inset 0 0 0 1px rgba(var(--folder-theme-rgb), .10);
  }
}


/* =========================================================
   CONFÉRENCES / PHOTOS / VIDÉOS — cartes média
   ========================================================= */

html[data-site-theme="dark"] #conferences-area .gallery-item,
html[data-site-theme="dark"] #photos-area .gallery-item,
html[data-site-theme="dark"] #videos-area .video-card {
  background:
    radial-gradient(
      ellipse 115% 88% at 12% 0%,
      rgba(var(--media-card-rgb), .12) 0%,
      rgba(var(--media-card-rgb), .035) 42%,
      transparent 74%
    ),
    linear-gradient(
      180deg,
      #3d4148 0%,
      #393d44 100%
    );

  border-color:
    rgba(var(--media-card-rgb), .28);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 2px 5px rgba(0,0,0,.10),
    0 9px 22px rgba(var(--media-card-rgb), .045);
}

html[data-site-theme="dark"] #conferences-area .gallery-item:hover,
html[data-site-theme="dark"] #photos-area .gallery-item:hover,
html[data-site-theme="dark"] #videos-area .video-card:hover {
  background:
    radial-gradient(
      ellipse 120% 92% at 12% 0%,
      rgba(var(--media-card-rgb), .18) 0%,
      rgba(var(--media-card-rgb), .055) 45%,
      transparent 76%
    ),
    linear-gradient(
      180deg,
      #41454c 0%,
      #3b3f46 100%
    );

  border-color:
    rgba(var(--media-card-rgb), .42);
}

html[data-site-theme="dark"] #conferences-area .gallery-item figcaption,
html[data-site-theme="dark"] #photos-area .gallery-item figcaption,
html[data-site-theme="dark"] #videos-area .video-card-caption,
html[data-site-theme="dark"] #videos-area .video-card p {
  color: #edf0f2;
}

html[data-site-theme="dark"]
#conferences-area .gallery-item:hover figcaption,
html[data-site-theme="dark"]
#photos-area .gallery-item:hover figcaption,
html[data-site-theme="dark"]
#videos-area .video-card:hover .video-card-caption,
html[data-site-theme="dark"]
#videos-area .video-card:hover p {
  color:
    color-mix(in srgb, var(--media-card-color) 65%, #ffffff);
}


/* =========================================================
   SPORT — vert
   ========================================================= */

html[data-site-theme="dark"] #panel-sport .sport-group {
  background:
    radial-gradient(
      ellipse 110% 80% at 8% 0%,
      rgba(var(--sport-rgb), .12) 0%,
      rgba(var(--sport-rgb), .035) 44%,
      transparent 74%
    ),
    linear-gradient(
      180deg,
      #3d4148 0%,
      #393d44 100%
    );

  border-color:
    rgba(var(--sport-rgb), .28);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 2px 5px rgba(0,0,0,.10),
    0 9px 22px rgba(var(--sport-rgb), .045);

  color: #edf0f2;
}

html[data-site-theme="dark"] #panel-sport .parcours-tile,
html[data-site-theme="dark"] #panel-sport .bilan-tile {
  background:
    radial-gradient(
      ellipse 120% 100% at 12% 0%,
      rgba(var(--sport-rgb), .13) 0%,
      rgba(var(--sport-rgb), .035) 48%,
      transparent 76%
    ),
    #3a3e45;

  border-color:
    rgba(var(--sport-rgb), .26);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 2px 8px rgba(0,0,0,.10);

  color: #edf0f2;
}

html[data-site-theme="dark"] #panel-sport .tile-title {
  color: #bcc5cc;
}

html[data-site-theme="dark"] #panel-sport .tile-value {
  color: #f4f6f7;
}

html[data-site-theme="dark"] #panel-sport .bilan-tile:hover,
html[data-site-theme="dark"] #panel-sport .bilan-tile.selected,
html[data-site-theme="dark"] #panel-sport .bilan-tile:focus-visible {
  background:
    radial-gradient(
      ellipse 120% 95% at 12% 0%,
      rgba(var(--sport-rgb), .20) 0%,
      rgba(var(--sport-rgb), .06) 48%,
      transparent 77%
    ),
    #40444b;

  border-color:
    rgba(var(--sport-rgb), .42);

  color: #ffffff;
}

html[data-site-theme="dark"] #panel-sport .bilan-tile h4 {
  color:
    color-mix(in srgb, var(--sport-accent) 66%, #ffffff);
}


/* =========================================================
   CHAT — turquoise
   ---------------------------------------------------------
   La bulle utilisateur reste telle quelle : elle est déjà colorée.
   Le bouton Envoyer reste également inchangé.
   ========================================================= */

html[data-site-theme="dark"] #panel-chat .chat-container {
  background:
    radial-gradient(
      ellipse 120% 62% at 8% 0%,
      rgba(15,143,141,.12) 0%,
      rgba(15,143,141,.035) 45%,
      transparent 76%
    ),
    linear-gradient(
      180deg,
      #3d4148 0%,
      #393d44 100%
    );

  border-color: rgba(15,143,141,.28);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 2px 5px rgba(0,0,0,.10),
    0 9px 22px rgba(15,143,141,.045);
}

html[data-site-theme="dark"] #panel-chat .chat-contact-bar {
  background: #34383e;
  border-bottom-color: rgba(15,143,141,.22);
}

html[data-site-theme="dark"] #panel-chat .chat-contact-name {
  color: #f3f5f6;
}

html[data-site-theme="dark"] #panel-chat .chat-contact-subtitle,
html[data-site-theme="dark"] #panel-chat .message-meta {
  color: #b5bec6;
}

html[data-site-theme="dark"] #panel-chat .message-sender {
  color: #dce4e8;
}

/* Réponses d'Icare : même logique anthracite + turquoise. */
html[data-site-theme="dark"] #panel-chat .message.bot,
html[data-site-theme="dark"] #panel-chat .typing-bubble {
  background:
    radial-gradient(
      ellipse 110% 90% at 10% 0%,
      rgba(47,174,191,.13) 0%,
      rgba(47,174,191,.035) 50%,
      transparent 76%
    ),
    #3a3e45;

  border-color: rgba(47,174,191,.28);
  color: #edf0f2;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 3px 11px rgba(0,0,0,.10);
}

/* Zone de saisie : sombre, mais bouton Envoyer inchangé. */
html[data-site-theme="dark"] #panel-chat .chat-input-area {
  background: #34383e;
  border-top-color: rgba(15,143,141,.22);
}

html[data-site-theme="dark"] #panel-chat #chat-input {
  background: #3a3e45;
  border-color: rgba(15,143,141,.30);
  color: #f1f4f5;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.16);
}

html[data-site-theme="dark"] #panel-chat #chat-input::placeholder {
  color: #9da8b1;
}

html[data-site-theme="dark"] #panel-chat #chat-input:disabled {
  background: #373b41;
  color: #9da8b1;
}

/* Petit statut central : plus de pastille blanche. */
html[data-site-theme="dark"] #panel-chat .chat-system-status {
  background:
    color-mix(in srgb, #0f8f8d 10%, #393d44);
  border-color: rgba(15,143,141,.22);
  color: #bfc9ce;
}


/* =========================================================
   FALLBACKS sans color-mix()
   ========================================================= */
@supports not (color: color-mix(in srgb, red, blue)) {
  html[data-site-theme="dark"]
  #conferences-folders .folder.selected .folder-name {
    color: #72bfe7;
  }

  html[data-site-theme="dark"]
  #photos-folders .folder.selected .folder-name {
    color: #ee8fba;
  }

  html[data-site-theme="dark"]
  #videos-folders .folder.selected .folder-name {
    color: #ec9a93;
  }

  html[data-site-theme="dark"] #panel-sport .bilan-tile h4 {
    color: #7fc79a;
  }

  html[data-site-theme="dark"] #panel-chat .chat-system-status {
    background: #354345;
  }
}


/* =========================================================
   ÉTAPE 2I — Sport : onglets + liste de traces
   ---------------------------------------------------------
   Thème obscur uniquement.
   Les onglets et les traces non sélectionnées suivent
   maintenant le même langage anthracite + vert.
   ========================================================= */

/* Onglets Traces GPX/TCX / Bilan annuel */
html[data-site-theme="dark"] #panel-sport .sport-tabs {
  background:
    radial-gradient(
      ellipse 95% 120% at 8% 0%,
      rgba(var(--sport-rgb), .12) 0%,
      rgba(var(--sport-rgb), .035) 46%,
      transparent 76%
    ),
    linear-gradient(
      180deg,
      #3d4148 0%,
      #393d44 100%
    );

  border-color: rgba(var(--sport-rgb), .28);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 2px 8px rgba(0,0,0,.10),
    0 8px 20px rgba(var(--sport-rgb), .04);
}

html[data-site-theme="dark"] #panel-sport .sport-tabs .tab-btn {
  color: #c2cbd1;
}

html[data-site-theme="dark"] #panel-sport .sport-tabs .tab-btn:hover,
html[data-site-theme="dark"] #panel-sport .sport-tabs .tab-btn:focus-visible {
  color: #ffffff;
  background:
    color-mix(in srgb, var(--sport-accent) 12%, #393d44);
}

html[data-site-theme="dark"] #panel-sport .sport-tabs .tab-btn.selected {
  color:
    color-mix(in srgb, var(--sport-accent-light) 66%, #ffffff);

  background:
    color-mix(in srgb, var(--sport-accent) 17%, #393d44);

  box-shadow:
    inset 0 -3px 0 var(--sport-accent);
}

/* Liste verticale des fichiers de traces */
html[data-site-theme="dark"] #panel-sport .trace-carousel-vertical {
  background:
    linear-gradient(
      180deg,
      rgba(var(--sport-rgb), .055),
      rgba(var(--sport-rgb), .012) 18%,
      rgba(var(--sport-rgb), .012) 82%,
      rgba(var(--sport-rgb), .055)
    ),
    #34383e;

  border-top-color: rgba(var(--sport-rgb), .22);
  border-bottom-color: rgba(var(--sport-rgb), .22);
}

/* État normal : plus aucun bouton blanc. */
html[data-site-theme="dark"]
#panel-sport .trace-carousel-vertical .btn[data-trace-idx] {
  background:
    radial-gradient(
      ellipse 120% 100% at 8% 0%,
      rgba(var(--sport-rgb), .09) 0%,
      transparent 70%
    ),
    #3a3e45;

  border-color: rgba(var(--sport-rgb), .20);
  color: #edf0f2;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 2px 6px rgba(0,0,0,.08);
}

/* Date séparée du titre : plus d'inline style gris figé. */
html[data-site-theme="dark"]
#panel-sport .trace-carousel-vertical .trace-date {
  color: #aeb8bf;
  font-size: .9em;
  font-weight: 500;
}

/* Hover / clavier */
html[data-site-theme="dark"]
#panel-sport .trace-carousel-vertical .btn[data-trace-idx]:hover,
html[data-site-theme="dark"]
#panel-sport .trace-carousel-vertical .btn[data-trace-idx]:focus-visible {
  background:
    radial-gradient(
      ellipse 120% 100% at 8% 0%,
      rgba(var(--sport-rgb), .16) 0%,
      transparent 72%
    ),
    #40444b;

  border-color: rgba(var(--sport-rgb), .38);
  color: #ffffff;
}

/* Trace sélectionnée : accent vert plus présent. */
html[data-site-theme="dark"]
#panel-sport .trace-carousel-vertical .btn[data-trace-idx].selected {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--sport-accent) 24%, #3b4046) 0%,
      #3b4046 100%
    );

  border-color: rgba(var(--sport-rgb), .50);

  color:
    color-mix(in srgb, var(--sport-accent-light) 62%, #ffffff);

  box-shadow:
    inset 3px 0 0 var(--sport-accent),
    0 4px 14px rgba(var(--sport-rgb), .10);
}

html[data-site-theme="dark"]
#panel-sport .trace-carousel-vertical .btn[data-trace-idx].selected .trace-date {
  color: #d2d9dd;
}

@supports not (color: color-mix(in srgb, red, blue)) {
  html[data-site-theme="dark"] #panel-sport .sport-tabs .tab-btn:hover,
  html[data-site-theme="dark"] #panel-sport .sport-tabs .tab-btn:focus-visible {
    background: #39463e;
  }

  html[data-site-theme="dark"] #panel-sport .sport-tabs .tab-btn.selected {
    color: #88d1a3;
    background: #3a4940;
  }

  html[data-site-theme="dark"]
  #panel-sport .trace-carousel-vertical .btn[data-trace-idx].selected {
    color: #88d1a3;
    background: #3b4941;
  }
}


/* =========================================================
   ÉTAPE 2L — Carte Sport sombre sans API externe
   ---------------------------------------------------------
   Les tuiles restent celles d'OpenStreetMap France.
   Seul le pane des tuiles est assombri en thème sombre.
   Les tracés, marqueurs et contrôles Leaflet ne sont pas filtrés.
   ========================================================= */

html[data-site-theme="dark"] #panel-sport #gpx-map {
  background: #202329;

  box-shadow:
    inset 0 0 0 1px rgba(var(--sport-rgb), .18),
    0 4px 16px rgba(0,0,0,.18);
}

/*
 * Important : on filtre uniquement les tuiles.
 * Les marqueurs GPX, la polyline et les contrôles restent intacts.
 */
html[data-site-theme="dark"]
#panel-sport #gpx-map .leaflet-tile-pane {
  filter:
    brightness(.63)
    contrast(1.12)
    saturate(.72)
    hue-rotate(172deg)
    invert(.82);
}

/*
 * L'inversion peut rendre certaines cartes un peu bleutées ;
 * une opacité très légère adoucit le rendu sans perdre les routes.
 */
html[data-site-theme="dark"]
#panel-sport #gpx-map .leaflet-tile {
  opacity: .93;
}

/* Contrôles Leaflet */
html[data-site-theme="dark"]
#panel-sport #gpx-map .leaflet-control-zoom a {
  background: #2f3339;
  color: #edf0f2;
  border-bottom-color: rgba(255,255,255,.08);
}

html[data-site-theme="dark"]
#panel-sport #gpx-map .leaflet-control-zoom a:hover,
html[data-site-theme="dark"]
#panel-sport #gpx-map .leaflet-control-zoom a:focus-visible {
  background:
    color-mix(in srgb, var(--sport-accent) 18%, #34383e);
  color: #ffffff;
}

html[data-site-theme="dark"]
#panel-sport #gpx-map .leaflet-control-attribution {
  background: rgba(32,35,41,.82);
  color: #aeb8bf;

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

html[data-site-theme="dark"]
#panel-sport #gpx-map .leaflet-control-attribution a {
  color:
    color-mix(in srgb, var(--sport-accent-light) 62%, #ffffff);
}

/* Popups */
html[data-site-theme="dark"]
#panel-sport #gpx-map .leaflet-popup-content-wrapper,
html[data-site-theme="dark"]
#panel-sport #gpx-map .leaflet-popup-tip {
  background: #34383e;
  color: #edf0f2;
}

html[data-site-theme="dark"]
#panel-sport #gpx-map .leaflet-popup-content-wrapper {
  border: 1px solid rgba(var(--sport-rgb), .24);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}

@supports not (color: color-mix(in srgb, red, blue)) {
  html[data-site-theme="dark"]
  #panel-sport #gpx-map .leaflet-control-zoom a:hover,
  html[data-site-theme="dark"]
  #panel-sport #gpx-map .leaflet-control-zoom a:focus-visible {
    background: #39463e;
  }

  html[data-site-theme="dark"]
  #panel-sport #gpx-map .leaflet-control-attribution a {
    color: #88d1a3;
  }
}

/* =========================================================
   ACCUEIL — Humeur dark : noir profond + rose pop
   ---------------------------------------------------------
   Même logique visuelle que les cartouches du hamburger :
   base sombre, couleur concentrée sur le contour et les reflets.
   Le rose reprend celui du titre « Bienvenue ».
   Le thème clair n'est pas modifié.
   ========================================================= */

html[data-site-theme="dark"] .encadre-humeur {
  background:
    radial-gradient(
      ellipse 105% 130% at 7% 0%,
      rgba(255, 77, 174, .17) 0%,
      rgba(255, 77, 174, .055) 42%,
      transparent 72%
    ),
    linear-gradient(
      145deg,
      #15161a 0%,
      #18191e 58%,
      #21171f 100%
    );

  border-color: rgba(255, 77, 174, .52);
  color: #f7f3f6;

  box-shadow:
    0 10px 26px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,77,174,.055),
    0 0 18px rgba(232,71,160,.07),
    inset 0 1px 0 rgba(255,255,255,.055);

  animation: none;
}

html[data-site-theme="dark"] .encadre-humeur .texte-humeur {
  color: #f7f3f6;
}

html[data-site-theme="dark"] .emoji-humeur-badge {
  background:
    linear-gradient(
      145deg,
      #242127 0%,
      #18181d 62%,
      #291823 100%
    );

  border-color: rgba(255, 77, 174, .46);

  box-shadow:
    0 3px 10px rgba(0,0,0,.24),
    0 0 10px rgba(232,71,160,.055),
    inset 0 1px 0 rgba(255,255,255,.06);

  animation: none;
}



/* =========================================================
   Lecteur PDF — intégration au thème obscur
   ---------------------------------------------------------
   Le cadre et les contrôles suivent la palette du site.
   Le document lui-même reste en rendu positif dans l'iframe :
   aucune inversion de couleurs des textes, images ou graphiques.
   ========================================================= */
html[data-site-theme="dark"] .pdf-backdrop {
  background: rgba(5, 7, 10, .72);
}

html[data-site-theme="dark"] .pdf-panel {
  background: #202329;
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48);
}

html[data-site-theme="dark"] .pdf-header,
html[data-site-theme="dark"] .pdf-actions {
  background: #24272c;
  border-color: rgba(255, 255, 255, .09);
}

html[data-site-theme="dark"] .pdf-header h3 {
  color: #eef1f4;
}

html[data-site-theme="dark"] .pdf-close {
  color: #c7cdd3;
}

html[data-site-theme="dark"] .pdf-close:hover,
html[data-site-theme="dark"] .pdf-close:focus-visible {
  color: #ffffff;
}

html[data-site-theme="dark"] #pdf-frame {
  background: #181a1e;
}

html[data-site-theme="dark"] .pdf-actions a,
html[data-site-theme="dark"] .pdf-actions button {
  border-color: rgba(255, 255, 255, .13);
  background: #30343a;
  color: #eef1f4;
}

html[data-site-theme="dark"] .pdf-actions a:hover,
html[data-site-theme="dark"] .pdf-actions a:focus-visible,
html[data-site-theme="dark"] .pdf-actions button:hover,
html[data-site-theme="dark"] .pdf-actions button:focus-visible {
  background: #3a4148;
  border-color: rgba(116, 180, 207, .42);
  color: #ffffff;
}

/* Accessibilité : le commutateur de thème ne doit pas animer en mode mouvement réduit. */
@media (prefers-reduced-motion: reduce) {
  #site-drawer .site-theme-switch-thumb,
  #site-drawer .site-theme-switch-track,
  #site-drawer .site-theme-switch-label { transition: none !important; }
}

/* Mobile sombre : les optimisations de rendu historiques restent identiques sans priorité forcée. */
@media (max-width: 768px) {
  html[data-site-theme="dark"] .site-header,
  html[data-site-theme="dark"] .pdf-panel {
    box-shadow: none;
  }
}

/* Mobile : mêmes optimisations de rendu qu’avant, exprimées par la cascade plutôt que par une priorité forcée. */
@media (max-width: 768px) {
  .site-header,
  #panel-overlay .panel,
  #panel-overlay .folder,
  #panel-overlay .folder.selected,
  #panel-overlay .gallery-item,
  #videos-area .video-card,
  #audio-player-card.spotify-card,
  #panel-chat .chat-container,
  .instant-photo-wrapper,
  .instant-badge {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  #panel-overlay .panel { transform: none; }
}