/* ============================================================
   🐺 WOLF-HQ — Fond d'écran immersif "QG tactique"
   (v4 — 04/09/2026, retour de Michel après la v3 : "le mode sombre on
   voit presque rien, sur mobile absolument rien, et j'ai le fond
   uniquement sur inscription et pas sur le reste du site")

   Fichier centralisé (au lieu d'un <style> par page) pour pouvoir être
   chargé sur TOUTES les pages qui posent la classe .lw-fond-immersif sur
   <body> : les 2 pages publiques (inscription-alliance.php,
   valider-compte.php) ET maintenant index.php (voir v4 juste dessous).

   🩹 v4 — 2 correctifs distincts :
   1) Le fond était bien trop sombre (voire invisible sur mobile) : la
      photo sombre de Michel est déjà très sombre par nature, et
      s'empilait avec la vignette ET le voile de lisibilité ::after —
      voir --lw-filtre (nouveau, éclaircit tout le calque) et les
      opacités de vignette/voile réduites plus bas. Sur mobile, le
      cadrage "cover" d'une photo large sur un écran étroit ne montre de
      toute façon que la zone la plus sombre de la photo (le mur central,
      sans les consoles éclairées sur les côtés) — background-position
      légèrement décalé en media query pour limiter l'effet.
   2) Le fond ne s'affichait que sur les 2 pages publiques : la classe
      .lw-fond-immersif est désormais posée aussi sur index.php (voir ce
      fichier), donc sur tout le site une fois connecté. L'habillage
      "verre fumé + liseré cuivré" des cartes (pensé pour les 3-4 tuiles
      de l'accueil, pas pour les dizaines de .card du tableau de bord)
      reste lui scopé séparément via une nouvelle classe ".wolf-onb-page"
      — posée UNIQUEMENT sur les 2 pages publiques — pour ne pas
      redessiner tout le tableau de bord par effet de bord.

   🩹 v3 (rappel) : les 2 images ne sont pas une paire "PC / mobile" mais
   une paire "sombre / clair" (même image, ambiance différente selon le
   thème actif) — c'est --lw-fond-image (une seule variable, redéfinie
   dans body.light-theme un peu plus bas) qui bascule automatiquement
   entre les deux, exactement comme le reste des couleurs du thème.

   Fichiers utilisés (fournis par Michel, voir assets/img/fond/) :
     assets/img/fond/last-war-survival-fond-sombre.jpg   (thème sombre)
     assets/img/fond/last-war-survival-fond-clair.jpg    (thème clair)
   ============================================================ */

:root {
  /* Variable séparée pour pouvoir changer l'image sans toucher au reste
     de la feuille de style, et pour permettre à une page précise de la
     redéfinir si besoin (ex. surcharge par page). */
  --lw-fond-image: url("../img/fond/last-war-survival-fond-sombre.jpg");

  /* Fine grille "HUD" superposée à la photo (mode de fusion "overlay",
     voir plus bas) : elle vient épouser les zones claires/sombres de la
     photo au lieu de s'afficher comme un calque plat par-dessus —
     rendu "vitre tactique" plutôt que "grille collée". Volontairement
     très discrète : la photo elle-même porte déjà tout le décor
     (écrans, cartes lumineuses), la grille n'est qu'une texture d'appoint. */
  --lw-grille-ligne: rgba(255, 122, 41, 0.05);

  /* Vignette (assombrit légèrement les bords, laisse le centre net) :
     fusionnée en "multiply" avec la photo pour rester naturelle plutôt
     que de poser un aplat par-dessus.
     🩹 v4 (retour de Michel : "le mode sombre on voit presque rien, sur
     mobile absolument rien") — sa photo sombre est déjà très sombre par
     nature (salle plongée dans la nuit) ; empilée avec cette vignette ET
     le voile ::after ci-dessous, tout finissait quasi noir, surtout sur
     mobile où le cadrage "cover" ne montre de toute façon que la zone la
     plus sombre de la photo (le mur central, voir plus bas). Opacité de
     bord divisée par 2 (0.55 → 0.26). */
  --lw-vignette-centre: transparent;
  --lw-vignette-bord: rgba(5, 6, 8, 0.26);

  /* 🆕 v4 — Correctif du même problème : un filtre CSS qui éclaircit
     l'ensemble du calque (photo + grille + vignette réunis) au lieu de
     rester au niveau de luminosité brut de la photo de Michel. Variable
     (redéfinie en thème clair plus bas, où sa photo est déjà lumineuse
     et n'a besoin de presque rien). */
  --lw-filtre: brightness(1.55) contrast(1.04) saturate(1.08);

  /* Voile de lisibilité posé par-dessus tout le reste (calque ::after
     plus bas). Léger : la photo (désormais éclaircie par --lw-filtre
     ci-dessus) est déjà bien contrastée, ce voile ne sert qu'à unifier
     les teintes et garantir le contraste dans les zones hors-cartes. */
  --lw-fond-overlay: linear-gradient(
    180deg,
    rgba(10, 11, 15, 0.12) 0%,
    rgba(10, 11, 15, 0.20) 45%,
    rgba(10, 11, 15, 0.34) 100%
  );

  /* 🆕 v2 — Habillage "verre fumé + liseré cuivré" des cartes de cette
     page (voir règles .wolf-onb-page .card / .wolf-onb-tile plus bas).
     Scopé à .wolf-onb-page (donc uniquement inscription-alliance.php et
     valider-compte.php, voir v4 plus bas) pour ne PAS toucher aux .card
     utilisées partout ailleurs dans l'appli (tableau de bord, etc.). */
  --lw-carte-bg: rgba(28, 29, 33, 0.72);
  --lw-carte-bg-hover: rgba(32, 33, 38, 0.84);
  --lw-carte-border: rgba(255, 122, 41, 0.22);
  --lw-carte-border-hover: rgba(255, 122, 41, 0.55);
  --lw-carte-glow: rgba(255, 122, 41, 0.20);
}

/* Mode clair : la photo change (salle claire/brumeuse de Michel), la
   grille passe en ardoise (l'orange ressortirait trop sur une image déjà
   très lumineuse) et le voile de lisibilité repasse en blanc. Suit
   exactement le même mécanisme que le reste du site (classe
   .light-theme posée sur <body> par appliquerTheme(), voir
   assets/js/alliance.js). */
body.light-theme {
  --lw-fond-image: url("../img/fond/last-war-survival-fond-clair.jpg");

  --lw-grille-ligne: rgba(71, 85, 105, 0.06);
  --lw-vignette-centre: transparent;
  --lw-vignette-bord: rgba(100, 116, 139, 0.16);
  /* Sa photo claire est déjà lumineuse/brumeuse par nature : quasiment
     pas besoin d'éclaircir, juste un tout petit peu de contraste pour
     que la grille/vignette restent perceptibles. */
  --lw-filtre: brightness(1.05) contrast(1.03);

  --lw-fond-overlay: linear-gradient(
    180deg,
    rgba(246, 247, 250, 0.16) 0%,
    rgba(246, 247, 250, 0.28) 45%,
    rgba(246, 247, 250, 0.46) 100%
  );

  /* Verre CLAIR (au lieu du verre graphite sombre ci-dessus) : cartes
     blanches translucides avec le même liseré cuivré, pour rester dans
     l'esprit "plaque de commandement" sans basculer en thème sombre.
     🩹 05/09/2026 (retour de Michel, après avoir remplacé sa photo claire :
     "je pense que dans l'administration il faut réduire la transparence")
     — opacité remontée de 0.62 à 0.86 (et 0.80 à 0.94 au survol) : les
     cartes du tableau de bord (dont l'admin) restent "verre fumé" mais
     beaucoup plus lisibles par-dessus une photo claire et chargée. Cette
     variable est partagée par TOUTES les .card du site (voir règle plus
     bas), pas seulement l'admin — cohérent avec le choix précédent
     d'étendre la transparence "partout", on ajuste donc ici le même
     réglage partagé plutôt que d'en créer un séparé pour l'admin seul. */
  --lw-carte-bg: rgba(255, 255, 255, 0.86);
  --lw-carte-bg-hover: rgba(255, 255, 255, 0.94);
  --lw-carte-border: rgba(234, 88, 12, 0.28);
  --lw-carte-border-hover: rgba(234, 88, 12, 0.55);
  --lw-carte-glow: rgba(234, 88, 12, 0.18);
}

/* Classe à poser sur <body> (voir inscription-alliance.php / valider-compte.php).
   Deux calques fixes superposés en z-index:0, sous tout le contenu réel
   (qui doit rester en position relative + z-index:1 — voir règle
   ".lw-fond-immersif > *" plus bas, déjà en place via ".header, .container"
   sur ces pages). La photo + la grille HUD + la vignette vivent sur
   ::before ; le voile de lisibilité vit sur ::after, peint par-dessus
   (ordre naturel des pseudo-éléments générés). */
.lw-fond-immersif::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--bg-dark);
  background-image:
    linear-gradient(to right, var(--lw-grille-ligne) 1px, transparent 1px),
    linear-gradient(to bottom, var(--lw-grille-ligne) 1px, transparent 1px),
    radial-gradient(ellipse 130% 80% at 50% -5%, var(--lw-vignette-centre) 0%, var(--lw-vignette-bord) 100%),
    var(--lw-fond-image);
  background-size: 44px 44px, 44px 44px, 100% 100%, cover;
  background-position: left top, left top, center, center center;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  /* La grille se fond DANS la photo (elle s'assombrit/s'éclaircit selon
     la zone survolée au lieu d'un calque plat) ; la vignette s'assombrit
     naturellement PAR-DESSUS la photo (au lieu de la voiler uniformément). */
  background-blend-mode: overlay, overlay, multiply, normal;
  /* 🆕 v4 — éclaircit l'ensemble du calque (voir --lw-filtre ci-dessus) :
     corrige le rendu "quasi noir" remonté par Michel sur la photo sombre. */
  filter: var(--lw-filtre);
}

/* 🩹 v4 (retour de Michel : "sur mobile absolument rien") — en portrait,
   "cover" doit étirer une photo large (16:9) pour couvrir toute la
   hauteur de l'écran, ce qui masque presque entièrement les côtés et ne
   laisse voir que la bande centrale de la pièce (le mur nu, la zone la
   plus sombre/plate de la photo). On décale légèrement le cadrage vers
   la gauche pour accrocher un peu plus les écrans/consoles au lieu du
   mur vide, sans pour autant recouvrir les cartes (qui restent centrées). */
@media (max-width: 700px) {
  .lw-fond-immersif::before {
    background-position: left top, left top, center, 30% center;
  }
}

.lw-fond-immersif::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--lw-fond-overlay);
}

/* Le contenu réel doit passer au-dessus des 2 calques ci-dessus.
   Répété ici (déjà vrai sur inscription-alliance.php via son ancienne
   règle "body > *") pour que toute page qui pose juste la classe
   .lw-fond-immersif sur <body> hérite du bon empilement sans rien
   ajouter d'autre.

   🩹 04/09/2026 (retour de Michel : "les modales s'affichent sous le pied de page avec un fond
   gris") : cette règle était écrite ".lw-fond-immersif > *" — un sélecteur de classe, donc de
   même poids ("spécificité" CSS) que ".modal" (défini dans style.css avec position:fixed,
   z-index:2000, pour s'afficher en plein écran par-dessus tout). À poids égal, c'est la règle
   chargée EN DERNIER qui gagne — et fond-immersif.css est chargé après style.css dans le <head>.
   Résultat : "position: relative" écrasait le "position: fixed" du modal, qui s'affichait alors
   coincé dans le flux normal de la page (sous le pied de page) au lieu de recouvrir tout l'écran.
   Corrigé avec :where(...), qui ramène le poids de ce sélecteur à zéro : il continue de
   s'appliquer normalement, mais perd désormais TOUJOURS face à une règle plus spécifique comme
   ".modal" (ou tout autre composant avec son propre position/z-index), quel que soit l'ordre de
   chargement des fichiers CSS. */
:where(.lw-fond-immersif) > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   🆕 v2 — 04/09/2026 (retour de Michel : "moderniser les cartes
   blanches ('Trouver mon alliance', etc.) pour qu'elles s'intègrent
   mieux dans un univers QG / militaire épuré, avec des bordures
   subtiles orange/cuivrées, un effet de verre fumé ou un relief plus
   immersif")

   🩹 v4 (retour de Michel : "j'ai le fond uniquement sur inscription et
   pas sur le reste du site") — le FOND (::before/::after ci-dessus) est
   posé sur TOUT le site via la classe ".lw-fond-immersif" (voir
   index.php). À ce moment-là, l'habillage "verre fumé + liseré cuivré"
   des .card était resté volontairement limité aux 2 pages publiques
   (nouvelle classe ".wolf-onb-page") pour ne pas redessiner d'un coup
   les dizaines de .card du tableau de bord.

   🩹 v5 (retour de Michel : "je voudrais que les autres tuiles aient la
   transparence aussi") — il veut justement CE changement plus large :
   la règle ".card" ci-dessous repasse donc sur ".lw-fond-immersif" (donc
   partout où le fond est posé, y compris le tableau de bord). En thème
   sombre ça ne change rien de visible : theme-graphite.css donne déjà
   aux .card un fond translucide + flou (règle plus spécifique, elle
   continue de gagner). C'est le thème CLAIR qui en profite enfin : ses
   .card étaient un aplat blanc opaque (#fafafa, aucune règle de ce type
   pour lui), elles devienment translucides comme le reste. Les tuiles
   ".wolf-onb-tile" (bouton "Trouver mon alliance", etc.), elles, restent
   scopées à ".wolf-onb-page" : ce sont des gros boutons spécifiques à
   l'accueil, pas des .card génériques du tableau de bord. */
.lw-fond-immersif .card {
  background: var(--lw-carte-bg);
  border: 1px solid var(--lw-carte-border);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.06);
}

/* 🩹 05/09/2026 (retour de Michel : "tu n'as rien touché à la transparence" dans l'admin) — la
   règle ".card" ci-dessus ne concernait jamais les encarts "GESTION DU PLANNING" / "ACTIONS
   RAPIDES" / "CONFIGURATIONS AVANCÉES" de l'admin : ce sont des ".admin-zone" (voir
   includes/modules/admin.php + style.css), un système de fond totalement différent et à part —
   un simple aplat de couleur à 6-8% d'opacité (ex: rgba(2,132,199,0.08)), jamais pensé pour être
   posé sur une photo. D'où la texture/le motif du fond qui restait très visible au travers, alors
   que les .card classiques avaient bien été corrigées. Empile ici la même couche "verre" que les
   .card (--lw-carte-bg) SOUS la teinte de couleur propre à chaque zone (via 2 fonds superposés) :
   la zone garde son identité (bleu "Planning", vert "Rapide", gris "Config"), mais avec un fond
   bien plus opaque en-dessous. Seulement en thème clair — en thème sombre, cette même transparence
   n'a jamais été signalée comme un problème par Michel. */
body.light-theme.lw-fond-immersif .admin-zone-planning {
  background: linear-gradient(rgba(2, 132, 199, 0.12), rgba(2, 132, 199, 0.12)), var(--lw-carte-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
body.light-theme.lw-fond-immersif .admin-zone-rapide {
  background: linear-gradient(rgba(74, 222, 128, 0.10), rgba(74, 222, 128, 0.10)), var(--lw-carte-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
body.light-theme.lw-fond-immersif .admin-zone-config {
  background: linear-gradient(rgba(148, 163, 184, 0.10), rgba(148, 163, 184, 0.10)), var(--lw-carte-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.wolf-onb-page .wolf-onb-tile {
  background: var(--lw-carte-bg);
  border: 1px solid var(--lw-carte-border);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.06);
}

/* Liseré cuivré fin en haut de chaque tuile ("plaque de commandement"),
   en plus de la bordure complète héritée de la règle ci-dessus. */
.wolf-onb-page .wolf-onb-tile {
  position: relative;
  overflow: hidden;
}
.wolf-onb-page .wolf-onb-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  opacity: 0.65;
}

/* Survol : liseré et halo cuivrés plus marqués, fond légèrement éclairci
   — au-dessus de l'effet ".wolf-onb-tile:hover" déjà défini dans
   style.css (translateY + ombre), pas besoin de le redéfinir ici.
   🩹 05/09/2026 (demande de Michel : "des effets de survol modernes... pour que ça donne vraiment
   envie de cliquer") — lueur diffuse ajoutée (dernière valeur du box-shadow) en plus du halo net
   déjà présent : cette règle est plus spécifique que ".wolf-onb-tile:hover" de style.css et gagne
   donc sur CETTE page, c'est ici qu'il faut intensifier l'effet plutôt que dans style.css. */
.wolf-onb-page .wolf-onb-tile:hover {
  border-color: var(--lw-carte-border-hover);
  background: var(--lw-carte-bg-hover);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32), 0 0 0 1px var(--lw-carte-glow), inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 0 28px var(--lw-carte-glow);
}

/* Icônes des tuiles : petit liseré clair + ombre portée pour un rendu
   "badge en relief" plutôt que plat, cohérent avec le verre fumé des
   cartes ci-dessus. */
.wolf-onb-page .wolf-onb-tile-icon {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* 🩹 05/09/2026 (retour de Michel, après avoir remplacé sa photo claire : "le pied de page aussi
   en gris clair n'est pas trop visible à cause du gris") — includes/footer_public.php n'est PAS
   une .card, il est posé à même le fond immersif. Premier essai : lui donner un fond "verre" comme
   les cartes — rejeté par Michel ("tu m'as rajouté un fond, j'en veux pas c'est dégueulasse").
   🩹 05/09/2026 bis — retiré. Reste uniquement : une couleur de texte plus foncée qu'ailleurs en
   thème clair (var(--text-sub) reste inchangé partout ailleurs) + une légère lueur CLAIRE derrière
   le texte (text-shadow, pas un encart/rectangle) pour garder un peu de contraste quel que soit ce
   qu'il y a comme fond derrière, sans poser de "boîte" visible. */
body.light-theme.lw-fond-immersif .footer-lien,
body.light-theme.lw-fond-immersif .footer-separateur,
body.light-theme.lw-fond-immersif .footer-version {
  color: #52525b;
  text-shadow: 0 1px 5px rgba(255, 255, 255, 0.85), 0 0 2px rgba(255, 255, 255, 0.85);
}