/* =========================================================
   NOCTURNE — thème sombre du site public

   Troisième thème du site, à côté de classic.css et halloween.css, et bâti
   exactement sur le même contrat : skin.css porte la STRUCTURE, les feuilles de
   thème posent les valeurs. Halloween n'est pas touché, et n'est même pas servi
   en même temps — il reste prioritaire quand il est actif.

   TOUT EST ACCROCHÉ À `html.nuit`, ET C'EST DÉLIBÉRÉ

   La classe est sur <html> et non sur <body> parce qu'elle peut être posée par
   assets/theme-init.js, qui s'exécute pendant la lecture de <head> — à cet
   instant <body> n'existe pas encore. C'est ce qui évite le clignotement au
   premier affichage chez un visiteur réglé en sombre.

   `html.nuit` a une spécificité de (0,1,1) : il l'emporte sur les `:root` de
   style.css, ui.css et skin.css sans un seul `!important`.

   CE QUE LE THÈME NE PEUT PAS RÉUTILISER

   Le site clair est bâti sur des planches PNG peintes : cadre crème, bandeau de
   navigation, boutons, ciel. Ce sont des illustrations claires — on ne les rend
   pas sombres en changeant une couleur. Quatre structures sont donc redessinées
   EN CSS ici, et c'est aussi ce qui donne le rendu « noir et bleu lumineux »
   demandé, plutôt qu'un simple assombrissement.

   Le reste — l'immense majorité — passe par les variables déjà déclarées par le
   site. C'est ce qui rend cette feuille courte au regard de ce qu'elle repeint.
========================================================= */

html.nuit {
  /*
    LE CIEL DEVIENT LA NUIT.

    `--ciel-*` porte le dégradé de fond de tout le site. Les trois teintes
    gardent leur rôle — haut, milieu, bas — pour qu'aucune règle n'ait à changer.
  */
  --ciel-haut: #050a16;
  --ciel: #081225;
  --ciel-bas: #0b1a33;
  --nuage: rgba(120, 170, 255, 0.05);

  --nuit: #0a1526;
  --nuit-fonce: #050b16;

  /*
    L'or reste l'or — c'est l'identité de la marque, et il tient très bien sur
    fond sombre. Il est seulement éclairci d'un cran : le doré profond du thème
    clair (#8a6108) devient illisible sur du bleu nuit.
  */
  --or: #f7d070;
  --or-clair: #ffe6a8;
  --or-fonce: #d9a43a;
  --or-texte: #f0c974;

  --bg-deep: #050a16;
  --bg-mid: #0a1426;

  /*
    Les surfaces. `--card-bg` était un blanc à 82 % d'opacité : il devient un
    bleu nuit translucide, qui laisse deviner le fond sans rien perdre en
    lisibilité.
  */
  --card-bg: rgba(16, 28, 50, 0.86);
  --surface: #101c32;
  --surface-haut: #16243f;

  /* Textes — clairs, avec un gris bleuté pour le secondaire. */
  --text: #dde7f7;
  --text-dim: #93a8c6;
  --texte-doux: #b3c4dd;

  --border: rgba(120, 170, 255, 0.16);
  --trait: rgba(120, 170, 255, 0.1);

  /* Les verts et le rouge sont remontés en luminosité : les teintes du thème
     clair disparaissent sur fond sombre. */
  --vert-clair: #9ee86a;
  --vert: #5fc63a;
  --vert-fonce: #3f9424;
  --danger: #ff6b62;

  --veyra: #a98cff;
  --veyra-glow: rgba(169, 140, 255, 0.22);

  /* ---- Palette de ui.css ---- */

  /*
    `--ui-creme` est le remplissage des panneaux. C'est LA variable qui décide
    de l'apparence des cartes, y compris dans les remplacements CSS écrits pour
    le mobile : la basculer suffit à rendre sombres les deux rendus à la fois.
  */
  --ui-creme: #12203a;
  --ui-creme-fonce: #0d1729;

  --ui-nuit: #dce8fa;
  --ui-nuit-fonce: #b9cbe6;

  --ui-bleu-clair: #4aa3ff;
  --ui-bleu: #1f6fd8;
  --ui-bleu-fonce: #114a9c;

  --ui-or-clair: #ffe6a8;
  --ui-or: #d9a43a;
  --ui-or-fonce: #9c7226;

  --ui-gemme: #4aa3ff;

  /* ---- Repères de skin.css ---- */

  /*
    Le ciel photographié laisse place à un dégradé, et le fichier de 2,6 Mo
    n'est plus demandé du tout sur ce thème.

    UN SEUL DÉGRADÉ, ET C'EST UNE CONTRAINTE, PAS UN CHOIX.

    anim.css pose cette variable ainsi : `background: var(--sk-fond) center
    center / cover no-repeat`. Dans cette forme courte, la position, la taille et
    la répétition ne s'appliquent qu'à la DERNIÈRE couche. Une variable à
    plusieurs couches y produit donc une déclaration bancale, dont le rendu
    dépend du navigateur.

    Les halos de profondeur sont ajoutés séparément, plus bas, sur la couche qui
    porte réellement le fond.
  */
  --sk-fond: linear-gradient(180deg, #050a16 0%, #081225 42%, #0b1a33 100%);

  --sk-voile: 5, 10, 22;
  --sk-accent: 74, 163, 255;
  --sk-encre-ornee: #dfe9fb;
  --sk-bouton-encre: #eaf3ff;
  --sk-bouton-ombre: 0 1px 3px rgba(0, 0, 0, 0.75);

  color-scheme: dark;
}

/*
  LE FOND DE PAGE.

  `.home-body .background` pose `--sk-fond` en `background-image`, avec un
  `cover no-repeat fixed`. Un dégradé s'en accommode, à une exception près : le
  `background-color` du thème clair transparaîtrait sur les bords si le dégradé
  ne couvrait pas. On le fixe explicitement.
*/
html.nuit .home-body .background {
  background-color: #050a16;
}

/*
  LE VOILE DE PAGE — c'était lui, le fond grisâtre.

  `ui.css` pose sur `.particles::before` un dégradé presque blanc qui couvre
  TOUTE la page : rgba(226, 241, 252, …), de 30 % en haut à 72 % en bas. Sur
  l'illustration de jour, il éclaircit le paysage pour que le texte passe
  partout. Sur un thème sombre, c'est un calque laiteux tendu sur l'écran, et
  c'est ce qui délavait le fond, les panneaux et jusqu'aux couleurs des tests de
  contrôle.

  Il a fallu le débusquer : masquer le halo de clairière, l'illustration, le
  voile du héros, puis repeindre le fond n'y changeait rien — parce que la
  couche fautive était AU-DESSUS de tout cela. C'est un test par élimination,
  pixel mesuré à l'appui, qui l'a désigné.

  Halloween surcharge exactement cette règle, avec ses propres teintes : ce
  point d'accroche est donc bien celui prévu pour un thème. On l'emploie de la
  même manière, en tirant vers le bleu nuit plutôt que vers le blanc.
*/
html.nuit .home-body .background .particles::before {
  background: linear-gradient(180deg,
    rgba(5, 10, 22, 0.28) 0%,
    rgba(6, 13, 28, 0.5) 45%,
    rgba(8, 18, 37, 0.72) 100%);
}

/*
  Les halos de profondeur.

  Ils vont sur `.background::before`, parce que c'est cette couche — créée par
  anim.css — qui porte réellement le fond et son défilement par parallaxe.
  `background-color` sous elle garantit qu'aucun bord ne laisse passer le clair
  pendant que la couche se déplace.
*/
html.nuit .home-body .background::before {
  background-image:
    radial-gradient(1200px 700px at 18% 6%, rgba(47, 143, 255, 0.22), transparent 62%),
    radial-gradient(900px 620px at 84% 16%, rgba(120, 90, 255, 0.16), transparent 60%),
    var(--sk-fond);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/*
  LE BLOC HÉROS — trois couches claires à reprendre, et c'est là que se cachait
  le voile grisâtre.

  ui.css construit le héros en trois épaisseurs, toutes posées en dur, sans
  passer par une variable de thème :

    .hero-fond          l'illustration hero.png, cadrée à droite ;
    .hero-fond::after   un VOILE CLAIR sur la moitié gauche —
                        rgba(232, 244, 253, 0.92) — pour que le titre bleu nuit
                        se détache des nuages ;
    .hero-fond::before  un fondu bleu ciel en bas, qui raccorde au fond du site.

  C'est le deuxième qui délavait toute la zone de texte en nocturne : un voile
  quasi blanc à 92 % posé par-dessus un thème sombre. Les trois sont donc
  redéfinis, en gardant leur RÔLE — assombrir le côté texte, raccorder le bas —
  mais avec les teintes de la nuit.
*/
html.nuit .hero-fond {
  background:
    radial-gradient(900px 560px at 76% 34%, rgba(47, 143, 255, 0.16), transparent 66%),
    linear-gradient(180deg, #060c1a 0%, #0a1526 60%, #0b1a33 100%);
}

/* Le voile garde sa direction — dense à gauche, effacé à droite — pour que le
   titre et le texte restent lisibles quoi qu'il y ait derrière. */
html.nuit .hero-fond::after {
  background: linear-gradient(90deg,
    rgba(5, 10, 22, 0.92) 0%,
    rgba(5, 10, 22, 0.76) 26%,
    rgba(5, 10, 22, 0.28) 52%,
    rgba(5, 10, 22, 0) 74%);
}

html.nuit .hero-fond::before {
  background: linear-gradient(180deg, rgba(11, 26, 51, 0), rgba(11, 26, 51, 1));
}

/*
  LE TEXTE DU HÉROS — l'endroit où le thème sombre s'est cassé les dents.

  Deux règles de ui.css, et il a fallu les débusquer : masquer le halo de
  clairière, puis l'illustration, puis le voile, ne changeait rien à la large
  tache laiteuse qui mangeait le texte.

  · `.hero-titre` porte `text-shadow: … 0 0 30px rgba(255,255,255,0.5)`. Sur un
    ciel clair, ce halo blanc détache le titre bleu nuit. Sur fond sombre, c'est
    une lampe de 30 px derrière chaque lettre : mises bout à bout, elles
    formaient la tache. Elle ne venait donc d'aucun élément — il n'y avait rien
    à masquer, c'était le texte lui-même qui éclairait.

  · `.hero-texte .description` porte `color: #16395e`, ÉCRIT EN DUR. Aucune
    variable à surcharger : ce bleu nuit restait invisible sur fond nuit. C'est
    ce qui faisait disparaître des mots entiers au milieu des phrases.

  Le halo est conservé mais retourné : bleu au lieu de blanc, il éclaire le
  titre au lieu de le noyer.
*/
html.nuit .hero-titre {
  color: #eef4ff;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.5),
    0 0 34px rgba(47, 143, 255, 0.55);
}
html.nuit .hero-accroche { color: #b9cfea; opacity: 1; }
html.nuit .hero-texte .description { color: var(--texte-doux); }
html.nuit .hero-signature { color: var(--or); }

/*
  LE VOILE BLANC DERRIÈRE LE TEXTE — la vraie cause, trouvée en dernier.

  `.hero-rendrya .dedans::before` pose un radial BLANC À 72 % centré à 22 % de
  la largeur, exactement sous la colonne de texte. Sur le ciel de jour, il pose
  une clarté qui détache le titre bleu nuit ; sur fond sombre, c'est un
  projecteur braqué sur la page, et c'est lui qui délavait tout le héros.

  Il a résisté à plusieurs tentatives parce qu'il ne ressemble à rien de ce
  qu'on cherche : il n'est ni sur `.hero-fond`, ni sur `.background`, ni sur
  `.glade-glow` — masquer les trois ne changeait rien. C'est un test par
  élimination sur `*::before` qui l'a fait sortir.

  Il garde son rôle — asseoir la colonne de texte — en devenant une ombre
  bleutée plutôt qu'une lumière blanche.
*/
html.nuit .hero-rendrya .dedans::before {
  background: radial-gradient(60% 70% at 22% 50%, rgba(5, 10, 22, 0.78), transparent 72%);
}

/*
  LE HALO DE CLAIRIÈRE.

  ui.css le masque déjà sur `.home-body`, c'est-à-dire sur toutes les pages du
  site public : cette règle ne sert donc à rien aujourd'hui. Elle est gardée par
  précaution, pour le jour où ce masquage sauterait — son radial blanc à 62 %
  laisserait alors une large tache laiteuse au milieu du héros.
*/
html.nuit .glade-glow {
  background:
    radial-gradient(circle, rgba(74, 163, 255, 0.28) 0%, rgba(47, 143, 255, 0.12) 36%, transparent 64%),
    radial-gradient(circle, transparent 46%, rgba(120, 90, 255, 0.1) 58%, transparent 78%);
  opacity: 0.85;
}

/*
  Décors d'illustration absents de la version actuelle des pages — nuages,
  dirigeable, bannières latérales dorées. Ils ne sont plus dans le balisage,
  mais leurs règles vivent toujours dans ui.css : si l'un d'eux revenait, il
  poserait une image claire au milieu du thème sombre. On les éteint d'avance,
  ce qui coûte quatre lignes.
*/
html.nuit .bande-nuages,
html.nuit .hero-nuages,
html.nuit .dirigeable,
html.nuit .bordure-page { display: none; }

/* Les particules deviennent des étoiles : c'est le seul élément du thème clair
   qui gagne à passer en nocturne sans rien changer d'autre que son intensité. */
html.nuit .particle { opacity: 0.55; }

/* =========================================================
   LES QUATRE STRUCTURES REDESSINÉES

   Chacune repose, en clair, sur une planche PNG posée en `border-image` ou en
   `background`. Aucune ne peut être assombrie : ce sont des illustrations. On
   coupe donc l'image et on redessine en CSS.
========================================================= */

/*
  1. LE CADRE CRÈME — la carte du site.

  `border-image: none` seul ne suffirait pas : la largeur de bordure reste à
  30 px et laisserait un liseré énorme. On la ramène à 1 px et on rend au
  contenu, en rembourrage, la place que la planche occupait.

  Les sélecteurs sont repris tels quels de skin.css, y compris `section.cadre-creme`
  qui y porte une spécificité de (0,1,1) : un `.cadre-creme` seul perdrait.
*/
html.nuit .cadre,
html.nuit .cadre-creme,
html.nuit section.cadre-creme,
html.nuit .apercu {
  border-image: none;
  border: 1px solid rgba(120, 170, 255, 0.22);
  border-width: 1px;
  border-radius: 16px;
  padding: 26px 28px;
  background:
    linear-gradient(90deg, rgba(74, 163, 255, 0.55), rgba(74, 163, 255, 0.06) 42%, transparent 74%) top left / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(120, 170, 255, 0.06), rgba(120, 170, 255, 0) 55%),
    var(--card-bg);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.5),
    0 18px 48px rgba(0, 0, 0, 0.4);
}

/* Les deux fonds d'illustration des cartes « état » et « accès » n'existent
   plus sur ce thème : ces blocs ont été retirés de l'accueil, et leurs planches
   sont claires. On les neutralise par sécurité, au cas où une page les rendrait. */
html.nuit section.cadre-creme.zone-serveurs,
html.nuit section.cadre-creme.zone-acces {
  background-image: none;
}

/*
  2. LE BANDEAU DE NAVIGATION — on retire la planche, on habille la barre.

  Première tentative, et pourquoi elle était fausse : j'avais repeint
  `.site-nav::before`, en croyant n'échanger qu'une image contre un dégradé.

  Cette pseudo-élément n'a pas les dimensions de la barre. Il porte
  `width: 100%` et `aspect-ratio: 2172/724` — soit, pour une barre d'environ
  1 500 px, une boîte de 500 px de HAUT, remontée de 46 % et volontairement
  débordante. L'image y tenait en `contain`, donc lettreboxée au milieu. Un
  dégradé, lui, remplit toute la boîte : le résultat était un bloc noir couvrant
  le tiers supérieur de la page.

  `.site-nav` porte déjà son propre fond et son `border-radius: 14px`, et mesure
  62 px. La bonne solution est donc de masquer la planche et d'habiller la barre
  elle-même.
*/
html.nuit .site-nav::before { display: none; }

html.nuit .site-nav {
  background: linear-gradient(180deg, #0d1c33 0%, #081426 100%);
  border: 1px solid rgba(74, 163, 255, 0.3);
  box-shadow:
    0 0 26px rgba(47, 143, 255, 0.16),
    0 12px 34px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/*
  LE LOGO DOIT ÊTRE RENDU VISIBLE — sans quoi il n'y en a plus du tout.

  C'est la conséquence, non évidente, du retrait de la planche. Le logo n'est
  pas une image posée dans la barre : il est PEINT DANS sk-navbar2.png. La
  balise <img> existe bien dans le balisage, mais skin.css la met à
  `opacity: 0` — elle ne sert qu'à réserver la largeur entre les deux groupes
  d'onglets, pour qu'ils ne se rejoignent pas au centre.

  En masquant la planche, j'ai donc effacé le logo sans toucher à l'image, et la
  barre s'est retrouvée avec un trou au milieu.

  skin.css fait exactement la même chose sous 1101 px, où la barre est déjà
  dessinée en CSS : `@media (max-width: 1100px) { .nav-logo img { opacity: 1 } }`.
  Le thème sombre dessinant la barre à TOUTES les largeurs, il lui faut la même
  révélation, sans condition de largeur.

  La hauteur suit : le logo est dimensionné pour reposer sur la planche, bien
  plus haute que la barre — jusqu'à 150 px contre 62. Ramené à la hauteur de la
  barre, moins une marge.
*/
html.nuit .nav-logo img {
  opacity: 1;
  /* 52 px dans une barre de 62 : cinq pixels de marge en haut et en bas. Assez
     pour que la marque tienne sa place, trop peu pour qu'elle touche les bords. */
  height: 52px;
  filter: drop-shadow(0 0 12px rgba(74, 163, 255, 0.45));
}

/* Les embouts dorés de la barre sont des images claires eux aussi. */
html.nuit .nav-cap-g,
html.nuit .nav-cap-d { display: none; }

html.nuit .site-nav a,
html.nuit .nav-bouton,
html.nuit .nav-label {
  color: #cfe0f7;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
html.nuit .site-nav a:hover,
html.nuit .nav-bouton:hover .nav-label {
  color: #fff;
  text-shadow: 0 0 12px rgba(74, 163, 255, 0.85);
}
/* L'onglet courant s'allume plutôt que de s'assombrir : sur fond nuit, le
   soulignement doré du thème clair ne se voit plus. */
html.nuit .site-nav a.actif,
html.nuit .nav-bouton.actif .nav-label {
  color: #fff;
  text-shadow: 0 0 14px rgba(74, 163, 255, 0.95);
}

/*
  3. LES BOUTONS D'APPEL.

  Deux planches en clair — bleue pour l'action principale, dorée pour la
  secondaire. Elles deviennent deux dégradés, avec un halo qui s'intensifie au
  survol. `.hero-texte .actions .cta-button` est repris de skin.css : c'est sous
  ce sélecteur à trois classes qu'elle pose la planche, un `.cta-button` seul
  perdrait quel que soit l'ordre des feuilles.
*/
html.nuit .cta-button,
html.nuit .hero-texte .actions .cta-button {
  border-image: none;
  border: 1px solid rgba(99, 172, 255, 0.55);
  border-radius: 11px;
  padding: 13px 22px;
  background: linear-gradient(180deg, #2f8fff 0%, #1a63c8 55%, #124a9e 100%);
  color: #f2f8ff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 18px rgba(47, 143, 255, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.18s ease, transform 0.12s ease;
}
html.nuit .cta-button:hover,
html.nuit .hero-texte .actions .cta-button:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 26px rgba(47, 143, 255, 0.6),
    0 6px 18px rgba(0, 0, 0, 0.55);
}
html.nuit .cta-button:active { transform: translateY(1px); }

/* La variante secondaire garde son rôle : présente, mais en retrait. */
html.nuit .cta-button.ghost,
html.nuit .hero-texte .actions .cta-button.ghost {
  background: linear-gradient(180deg, rgba(120, 170, 255, 0.12), rgba(120, 170, 255, 0.04));
  border-color: rgba(217, 164, 58, 0.5);
  color: var(--or-clair);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 14px rgba(0, 0, 0, 0.45);
}
html.nuit .cta-button.ghost:hover,
html.nuit .hero-texte .actions .cta-button.ghost:hover {
  border-color: var(--or);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 20px rgba(247, 208, 112, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.5);
}

/*
  4. LA GEMME DES TITRES.

  Un losange dessiné, comme celui déjà écrit pour le mobile — mais bleu
  lumineux, avec un halo. C'est le seul ornement décoratif que le thème sombre
  conserve, et il sert de ponctuation aux titres.
*/
html.nuit .gemme {
  background: linear-gradient(135deg, #7cc0ff 0%, #2f8fff 60%, #124a9e 100%);
  border: 1px solid rgba(255, 230, 168, 0.55);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(74, 163, 255, 0.6);
}

/* =========================================================
   LES COULEURS ÉCRITES EN DUR

   Le site est très largement piloté par variables — c'est ce qui rend ce thème
   court. Mais vingt-quatre déclarations de couleur de TEXTE y sont posées en
   dur, sans variable à surcharger. Toutes sont sombres, puisqu'elles ont été
   choisies pour un fond clair : sur fond nuit, elles vont du difficile à lire à
   l'entièrement invisible.

   Elles ont été relevées en parcourant style.css, home.css, ui.css et
   classic.css à la recherche des `color: #…` dont la luminance est inférieure à
   110, hors ombres et bordures. C'est plus fiable que de repeindre écran par
   écran : une page rarement ouverte — les mentions légales, une carte de
   fonctionnalité — aurait gardé son texte sombre sans que personne ne le voie
   avant un joueur.

   Elles sont regroupées ici plutôt que dispersées dans la feuille : le jour où
   l'une de ces règles gagnera une variable, c'est cette liste qu'on viendra
   raccourcir.
========================================================= */

/* Titres de section et de carte — le bleu nuit #123a6b devient l'encre claire. */
html.nuit .section-title,
html.nuit .feature-card h3,
html.nuit .roadmap-content h3,
html.nuit .faq-item summary { color: #eaf1ff; }

/* Textes secondaires — bleus moyens, illisibles sur nuit. */
html.nuit .subtitle-tag,
html.nuit .legal-resume,
html.nuit .legal-autres a,
html.nuit .legal-sommaire a { color: var(--texte-doux); }

/* Intitulés dorés du sommaire légal : le doré sombre #8c5c10 s'éteint. */
html.nuit .legal-sommaire-titre,
html.nuit .legal-sommaire a:hover { color: var(--or); }

/*
  LES DEUX PANNEAUX DES PAGES LÉGALES.

  `.legal-sommaire` et `.legal-contenu` sont des aplats blancs translucides —
  82 % et 90 %. Ce sont les plus grandes surfaces claires de tout le site
  public : sur les mentions légales et les CGU, elles occupaient le tiers de
  l'écran, avec un texte clair posé dessus, donc illisible.

  Ces pages se lisent en entier, d'une traite : leur fond est volontairement un
  peu plus dense que celui des cartes de l'accueil, pour poser le texte.
*/
html.nuit .legal-sommaire,
html.nuit .legal-contenu {
  background: rgba(14, 25, 45, 0.92);
  border-color: rgba(120, 170, 255, 0.2);
  color: var(--texte-doux);
}
html.nuit .legal-contenu h2,
html.nuit .legal-contenu h3,
html.nuit .legal-titre { color: #eaf1ff; }
html.nuit .legal-meta,
html.nuit .legal-autres-titre { color: var(--text-dim); }

/* Le vert des compteurs de support : #3d8515 disparaît sur nuit. */
html.nuit .support-compteur,
html.nuit .support-badge-reponse,
html.nuit .support-reponse-auteur { color: var(--vert-clair); }

/*
  Les bruns du parchemin — #3b2f21, #4a3c2b, #7a6647, #6d5a3c. Ce sont les
  encres des cartes crème, dont le fond est maintenant bleu nuit : elles n'ont
  plus lieu d'être brunes.
*/
html.nuit .cadre-creme,
html.nuit .apercu,
html.nuit .serveurs li { color: var(--text); }
html.nuit .apercu p,
html.nuit .actu p { color: var(--texte-doux); }
html.nuit .actu-date { color: var(--text-dim); }
html.nuit .zone-actus .actu-attente .badge-rendrya,
html.nuit .zone-actus .actu-attente .actu-titre { color: #7f92ad; }

/* Un bouton inerte doit rester visiblement inerte, sans devenir invisible. */
html.nuit .cta-button[disabled] { color: #64789a; }

/* =========================================================
   TEXTES, TITRES, LIENS
========================================================= */

html.nuit body { color: var(--text); }

html.nuit h1,
html.nuit h2,
html.nuit h3,
html.nuit .section-title,
html.nuit .hero-texte h1 {
  color: #eaf1ff;
  text-shadow: 0 2px 18px rgba(47, 143, 255, 0.25);
}

/* L'exergue au-dessus des titres garde l'or, qui reste la couleur de marque. */
html.nuit .eyebrow { color: var(--or); }

html.nuit p,
html.nuit .description,
html.nuit li { color: var(--texte-doux); }

html.nuit a { color: #7cc0ff; }
html.nuit a:hover { color: #a9d6ff; }

/* =========================================================
   PIED DE PAGE

   classic.css le peint en bande bleu nuit à filet doré — donc déjà sombre. On
   ne le refait pas : on l'accorde seulement au reste, en poussant son fond d'un
   cran plus noir pour qu'il se détache du corps de page.
========================================================= */

html.nuit .classic-body .footer {
  background: linear-gradient(180deg, #081426 0%, #040a14 100%);
  border-top-color: rgba(217, 164, 58, 0.35);
}
html.nuit .classic-body .footer-bas {
  background: rgba(0, 0, 0, 0.3);
}

/* =========================================================
   ESPACE MEMBRE

   Il partage la coquille du site, donc il hérite déjà de tout ce qui précède.
   Ne restent que ses propres jetons, préfixés `m-`, et ses cartes.
========================================================= */

/*
  ===========================================================================
  TOUTES LES SURFACES CLAIRES DU SITE, EN UNE FOIS
  ===========================================================================

  Ce bloc ne vient pas d'une page qu'on a trouvée laide : il vient d'un
  inventaire. Les six feuilles du site public ont été parcourues à la recherche
  de chaque déclaration de fond dont la couleur dépasse une luminance de 185 —
  blancs purs, blancs translucides, dégradés vers #eef7fe. Elles sont
  vingt-neuf, et les voici toutes.

  Pourquoi de cette manière plutôt qu'écran par écran : le site compte des pages
  qu'on ouvre rarement — une carte de fonctionnalité, la galerie, un pack de la
  boutique, un ticket de support. Corriger ce qu'on voit aurait laissé du blanc
  éclatant sur celles-là, et c'est un joueur qui l'aurait découvert.

  `.particle` est délibérément ABSENTE de cette liste : ses points blancs sont
  les étoiles du thème. `.roadmap-dot` de même — c'est une puce de 8 px sur une
  ligne de temps, et l'éteindre la ferait disparaître.
*/

/* Les panneaux — même traitement que les cartes de l'accueil. */
html.nuit .card,
html.nuit .m-carte,
html.nuit .apercu,
html.nuit .support-connexion,
html.nuit .support-bouton,
html.nuit .support-ticket,
html.nuit .lore-card,
html.nuit .feature-card,
html.nuit .faq-item,
html.nuit .gallery-item,
html.nuit .wiki-article,
html.nuit .m-section,
html.nuit .m-tuile,
html.nuit .m-pack,
html.nuit .m-main .m-palier,
html.nuit .m-recap {
  background: linear-gradient(180deg, rgba(120, 170, 255, 0.05), transparent 55%), var(--card-bg);
  border-color: rgba(120, 170, 255, 0.2);
  color: var(--texte-doux);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 48px rgba(0, 0, 0, 0.38);
}

/*
  LE FILET DORÉ DES SECTIONS SURVIT AU THÈME SOMBRE.

  La règle ci-dessus repeint `border-color` pour tous ces conteneurs — elle
  effacerait donc le filet doré que membre.css pose en tête des sections de
  « Mon compte ». On le remet, et lui seul : les trois autres côtés gardent le
  bleu discret du thème.

  C'est la seule couleur qui tranche franchement sur le fond étoilé, et c'est
  déjà le vocabulaire du site — le pied de page en porte un identique.
*/
html.nuit .m-section {
  border-top-color: var(--ui-or);
}

/*
  LES CARTES DE COMPTE DE JEU, EN THÈME SOMBRE.

  Elles ne figuraient dans aucune liste ci-dessus : leur bordure restait donc
  le `rgba(12, 50, 80, 0.12)` du thème clair, soit du bleu nuit à 12 % sur un
  fond `--surface` à #101c32 — invisible. Leur ombre portée, calculée pour un
  fond blanc, ne les détachait pas davantage. Les cartes n'avaient plus d'arête.

  On ne reprend QUE les couleurs de bordure : fond et ombre fonctionnent, et
  les ajouter à la grande règle du dessus leur donnerait un dégradé dont elles
  n'ont pas besoin.
*/
html.nuit .m-carte-compte { border-color: rgba(120, 170, 255, 0.2); }

/* Le liseré bleu du compte actif doit survivre à la règle précédente, sinon
   l'indicateur disparaît — même raisonnement que pour le filet doré. */
html.nuit .m-carte-compte.actif { border-color: rgba(47, 138, 232, 0.75); }

/* Un emplacement libre garde son trait discontinu, un peu plus marqué : en
   pointillé et à faible contraste, il s'effaçait complètement. */
html.nuit .m-carte-compte.m-libre { border-color: rgba(120, 170, 255, 0.3); }

/* Le filet des raccourcis de mouvement, à l'intérieur de la carte. */
html.nuit .m-carte-mouvements { border-top-color: rgba(120, 170, 255, 0.18); }

/* Les aplats blancs translucides — listes, liens de résultats, encarts. */
html.nuit .serveurs li,
html.nuit .acces-rapide a {
  background: rgba(120, 170, 255, 0.07);
  border-color: rgba(120, 170, 255, 0.18);
}

/*
  La vignette d'actualité. Son #cfe4ff est un bleu très clair qui sert de place
  réservée tant qu'aucune image n'est fournie — et aucune ne l'est aujourd'hui,
  puisque les catégories du wiki n'ont pas d'illustration. C'était donc un
  rectangle lumineux sur chaque carte d'actualité.
*/
html.nuit .actu-vignette {
  background: rgba(120, 170, 255, 0.1);
  border-color: rgba(120, 170, 255, 0.25);
}

/* Les tableaux de l'espace membre — historique de commandes, paliers. */
html.nuit .m-table { background: transparent; }
html.nuit .m-table thead th {
  background: rgba(120, 170, 255, 0.08);
  color: var(--text-dim);
  border-bottom-color: rgba(120, 170, 255, 0.24);
}
html.nuit .m-table td { border-bottom-color: rgba(120, 170, 255, 0.12); }

/*
  Un bouton inerte. Son dégradé gris clair le faisait ressortir davantage qu'un
  bouton actif — exactement l'inverse de ce qu'il doit dire.
*/
html.nuit .cta-button[disabled],
html.nuit .hero-texte .actions .cta-button[disabled] {
  background: rgba(120, 170, 255, 0.08);
  border-color: rgba(120, 170, 255, 0.18);
  box-shadow: none;
}

/*
  La liste ouverte d'un <select> est peinte par le système, pas par la page.
  `color-scheme: dark`, déclaré sur `html.nuit` tout en haut, suffit à la rendre
  sombre ; cette règle ne couvre que les navigateurs qui laissent encore la main
  sur les options.
*/
html.nuit select option { background: #101c32; color: var(--text); }

html.nuit .m-sous,
html.nuit .m-aide { color: var(--text-dim); }

/*
  Les champs de saisie. Une règle à spécificité minimale qui rattrape tout
  formulaire du site public — connexion, inscription, réinitialisation,
  recherche du wiki, ouverture de ticket — sans avoir à les nommer un par un.
  En thème sombre, un champ oublié ne paraît pas « moins joli » : il sort blanc
  éclatant au milieu de la page.
*/
html.nuit input,
html.nuit select,
html.nuit textarea {
  background-color: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(120, 170, 255, 0.28);
  color: var(--text);
}
html.nuit input:focus,
html.nuit select:focus,
html.nuit textarea:focus {
  outline: 2px solid #4aa3ff;
  outline-offset: 1px;
  border-color: rgba(74, 163, 255, 0.6);
}
html.nuit ::placeholder { color: #6b7f9c; opacity: 1; }

/* Les alertes de l'espace membre. */
html.nuit .m-alerte.ok {
  background: rgba(95, 198, 58, 0.1);
  border-color: rgba(95, 198, 58, 0.34);
  color: #9ee86a;
}
html.nuit .m-alerte.ko {
  background: rgba(255, 107, 98, 0.1);
  border-color: rgba(255, 107, 98, 0.34);
  color: #ff9d97;
}

/* =========================================================
   WIKI

   Le corps d'article est du contenu rédigé : on ne touche qu'à son cadre et à
   ses couleurs de base. Un article qui pose son propre <style> — le sanitiseur
   l'autorise, confiné à `.wiki-corps` — garde la main sur son rendu, et c'est
   voulu : l'auteur sait ce qu'il fait.
========================================================= */

/*
  LES PANNEAUX DU WIKI.

  `.wiki-cote` (la colonne « Parcourir ») et `.wiki-carte` (les vignettes de
  catégorie) portent `linear-gradient(180deg, #ffffff, #eef7fe)` — du blanc pur,
  écrit en dur. Ce sont les deux derniers grands aplats clairs du site public,
  et ils restaient éclatants au milieu du thème sombre, titres dorés illisibles
  par-dessus.
*/
html.nuit .wiki-cote,
html.nuit .wiki-carte,
html.nuit .wiki-vide,
html.nuit .wiki-resultats li a {
  background: linear-gradient(180deg, rgba(120, 170, 255, 0.06), transparent 55%), var(--card-bg);
  border-color: rgba(120, 170, 255, 0.2);
  color: var(--texte-doux);
}
html.nuit .wiki-carte:hover {
  border-color: rgba(74, 163, 255, 0.55);
  box-shadow: 0 0 20px rgba(47, 143, 255, 0.22);
}
html.nuit .wiki-carte-titre,
html.nuit .wiki-section-titre,
html.nuit .wiki-cote-titre { color: var(--or-clair); }
html.nuit .wiki-carte-desc,
html.nuit .wiki-carte-enfants,
html.nuit .wiki-recent-date,
html.nuit .wiki-compte { color: var(--text-dim); }
html.nuit .wiki-cote-accueil,
html.nuit .wiki-arbre a { color: var(--texte-doux); }
html.nuit .wiki-cote-accueil:hover,
html.nuit .wiki-arbre a:hover { background: rgba(74, 163, 255, 0.12); color: #eaf1ff; }
html.nuit .wiki-cote-accueil.courant,
html.nuit .wiki-arbre a.courant {
  background: rgba(217, 164, 58, 0.16);
  color: var(--or-clair);
}

html.nuit .wiki-corps { color: var(--texte-doux); }
html.nuit .wiki-corps h2,
html.nuit .wiki-corps h3 { color: #eaf1ff; }

html.nuit .wiki-corps pre,
html.nuit .wiki-corps code {
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(120, 170, 255, 0.18);
  color: #9fe0f0;
}
html.nuit .wiki-corps pre code { border: 0; background: none; }

html.nuit .wiki-corps th,
html.nuit .wiki-corps td { border-bottom-color: rgba(120, 170, 255, 0.16); }

html.nuit .wiki-corps blockquote {
  border-left-color: var(--or-fonce);
  background: rgba(217, 164, 58, 0.09);
}

/* =========================================================
   LA BASCULE CLAIR / SOMBRE

   Elle vit dans le pied de page plutôt que dans la barre de navigation : celle-ci
   est une planche peinte dont la géométrie des onglets est relevée au
   pourcentage sur l'image. Y glisser un cinquième élément déplacerait tous les
   autres, sur les deux thèmes à la fois.

   Le bouton est donc stylé pour les DEUX thèmes — d'où des règles hors du bloc
   `html.nuit`, seules de cette feuille dans ce cas.
========================================================= */

.theme-bascule {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}
.theme-bascule button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.theme-bascule button:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
}
.theme-bascule button:focus-visible {
  outline: 2px solid #7cc0ff;
  outline-offset: 2px;
}
/* L'icône est décorative : le libellé écrit à côté porte l'information, et
   c'est lui que lit une synthèse vocale. */
.theme-bascule .icone { font-size: 0.95rem; line-height: 1; }

html.nuit .theme-bascule button {
  border-color: rgba(74, 163, 255, 0.4);
  background: rgba(74, 163, 255, 0.12);
}
html.nuit .theme-bascule button:hover {
  border-color: rgba(74, 163, 255, 0.7);
  box-shadow: 0 0 16px rgba(74, 163, 255, 0.3);
}

/* =========================================================
   MOUVEMENT

   Aucune animation propre à ce thème. Les halos sont statiques : un panneau
   d'administration peut se permettre une pulsation de voyant, un site public
   consulté longuement, non.

   Seule concession : la transition de couleur au basculement, pour que le
   passage clair → sombre ne soit pas un à-coup. Elle est coupée dès que le
   système demande moins de mouvement.
========================================================= */

@media (prefers-reduced-motion: no-preference) {
  html.nuit body,
  html.nuit .cadre,
  html.nuit .card {
    transition: background-color 0.25s ease, color 0.25s ease;
  }
}