/* ================================================================
   THEME DARK — appliqué à <body data-theme="dark">
   ================================================================
   Redéfinit les variables du design system pour inverser la palette
   et remplacer l'orange par le vert lime signature "lab".
   Tout le reste du système (typos, espaces, durées, easings) reste
   identique → l'air de famille avec la page principale est garanti.
   ================================================================ */

body[data-theme="dark"] {
  /* Fond noir chaud (miroir du crème chaud de la page principale) */
  --couleur-fond:         #0B0A09;
  --couleur-fond-alt:     #16140F;

  /* Texte : le crème devient la couleur de lecture */
  --couleur-texte:        #F4F0EA;
  --couleur-texte-doux:   #9A9488;

  /* Accent signature du laboratoire — vert lime */
  --couleur-accent:       #B7FF1A;

  /* Séparateurs sur fond sombre */
  --couleur-trait:        rgba(244, 240, 234, 0.14);

  background-color: var(--couleur-fond);
  color: var(--couleur-texte);
}


/* Nav transparente sur fond sombre : on relève la lisibilité
   du blur + légère bordure basse */
body[data-theme="dark"] .nav {
  background-color: rgba(11, 10, 9, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--couleur-trait);
}
body[data-theme="dark"] .nav__lien {
  color: var(--couleur-texte);
}
body[data-theme="dark"] .nav__lien:hover {
  color: var(--couleur-accent);
}
body[data-theme="dark"] .nav__logo {
  color: var(--couleur-texte);
}


/* Sélection de texte : accent lime sur fond crème — lisible */
body[data-theme="dark"] ::selection {
  background-color: var(--couleur-accent);
  color: var(--couleur-fond);
}


/* Footer sur fond sombre : garde la même structure, juste les couleurs */
body[data-theme="dark"] .pied {
  background-color: var(--couleur-fond);
  color: var(--couleur-texte);
  border-top: 1px solid var(--couleur-trait);
}
body[data-theme="dark"] .pied__lien:hover {
  color: var(--couleur-accent);
}


/* ---- Composants « see more » : posés sur le fond de la page ----
   Sur la page pro, .projet-toggle / .projet-plus forment des blocs
   noirs pleine largeur qui tranchent sur le crème. Ici tout est déjà
   sombre : on les fond dans la page (transparent, sans padding latéral
   ajouté — les sections perso ont déjà leurs marges). */
body[data-theme="dark"] .projet-toggle,
body[data-theme="dark"] .projet-plus {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
body[data-theme="dark"] .projet-toggle {
  --projet-toggle-bord: rgba(244, 240, 234, 0.28);
  --projet-toggle-texte: var(--couleur-texte);
}


/* ---- Back to top : liseré pour rester visible sur fond noir ---- */
body[data-theme="dark"] .back-top {
  background-color: rgba(244, 240, 234, 0.1);
  border: 1px solid rgba(244, 240, 234, 0.22);
}
body[data-theme="dark"] .back-top:hover {
  background-color: var(--couleur-accent);
  color: var(--couleur-fond);
  border-color: var(--couleur-accent);
}


/* ---- Side-nav latérale : adaptée au thème sombre ----
   Sur la page pro la carte est crème claire avec texte foncé.
   Ici on inverse : carte sombre avec texte clair, accent lime. */
body[data-theme="dark"] .side-nav:hover,
body[data-theme="dark"] .side-nav:focus-within {
  background-color: rgba(22, 20, 15, 0.92);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
body[data-theme="dark"] .side-nav__lien {
  color: var(--couleur-texte);
}
body[data-theme="dark"] .side-nav__lien:hover {
  background-color: rgba(244, 240, 234, 0.06);
}
body[data-theme="dark"] .side-nav__lien:hover .side-nav__bar,
body[data-theme="dark"] .side-nav__lien.is-actif .side-nav__bar {
  background-color: var(--couleur-accent);
}
body[data-theme="dark"] .side-nav__lien.is-actif .side-nav__label {
  color: var(--couleur-accent);
}