/* ============================================================
   THEME-DUAL.CSS — double identité visuelle d'OpsBoard.
   - body.mode-ops   : HUD tactique (vues jeu/session), déjà proche
     de l'existant, juste affiné (radar, coins biseautés).
   - body.mode-club  : Dossier confidentiel d'état-major (vues
     association : Association, Annonces, Admin) — même esprit
     militaire, univers visuel opposé (dactylo, tampon, sceau).
   Chargé après index.css et modern.css : ne redéclare que ce qui
   change, tout le reste (layout, JS, structure) est hérité.
   ============================================================ */

/* ---------- Mode Club : jeu de tokens ---------- */
body.mode-club{
  --bg:#1b170f; --bg-grid: rgba(0,0,0,0.28);
  --panel:#241d12; --panel2:#2a2213; --panel3:#302713;
  --line:#4a3c22; --line-soft:#3a2f1a;
  --text:#ecdfb9; --muted:#bcae82; --muted2:#9c8d63;
  --accent:#d4ab35; --accent-dim:#8a6f1c;
  --olive:#6b5a2e; --olive-dim:#3a3018;
  --danger:#c24a3a; --danger-dim:#3a1010;
  --radius:0px;
  --shadow: 0 4px 18px rgba(0,0,0,0.6);
  position:relative;
}
body.mode-club::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:repeating-linear-gradient(135deg, rgba(0,0,0,0.16) 0 2px, transparent 2px 26px);
}
/* La police machine à écrire reste réservée aux titres, boutons d'action
   principaux et étiquettes courtes — jamais au texte courant, aux tableaux
   ou aux petits boutons d'onglets, sous peine d'illisibilité. */
body.mode-club h1, body.mode-club h2, body.mode-club h3, body.mode-club .display{
  font-family:'Special Elite', monospace; letter-spacing:.01em;
}
body.mode-club button.primary, body.mode-club .btn.solid{
  font-family:'Special Elite', monospace; letter-spacing:0; border-radius:0; color:#1b170f;
}
body.mode-club .hero::after{ content:none; }
body.mode-club .section-title h2::before{ content:'§ '; color:var(--accent); }
body.mode-club button, body.mode-club .btn{ border-radius:0; }

/* Tampon "CONFIDENTIEL" — à poser dans un conteneur position:relative */
body.mode-club .stamp{
  position:absolute; top:8px; right:0; border:3px solid var(--danger); color:var(--danger);
  font-family:'Special Elite', monospace; font-size:13px; padding:6px 12px; letter-spacing:.05em;
  transform:rotate(8deg); opacity:.85; pointer-events:none;
  animation:stampin .4s ease-out;
}
@keyframes stampin{ from{ transform:rotate(8deg) scale(2.2); opacity:0; } to{ transform:rotate(8deg) scale(1); opacity:.85; } }

/* Sceau rond façon cachet officiel — pour les éléments validés (PV signé, mandat...) */
body.mode-club .seal{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; border:2px solid var(--accent); color:var(--accent); font-size:12px;
  font-family:'Special Elite', monospace; margin-right:8px; flex:none;
}

/* ---------- Mode Ops : raffinements réels (pas que le radar) ---------- */
body.mode-ops .panel{
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
body.mode-ops .stat-strip .num, body.mode-ops .mono{ font-family:'JetBrains Mono', monospace; }

/* Boutons "action" en biseau, comme sur la maquette — la nav (onglets du
   haut, du bas, et le menu "Plus") garde sa forme texte/soulignée : un
   clip-path y serait invisible ou couperait le focus ring pour rien. */
body.mode-ops button:not(nav.tabs button):not(.nav-more-toggle):not(.nav-more-panel button):not(.bottom-nav button):not(.tab-switch button),
body.mode-ops .btn:not(.tab-switch .btn){
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);
  padding-left:18px; padding-right:18px;
}

body.mode-ops .hero{ position:relative; overflow:hidden; }
body.mode-ops .radar{
  position:absolute; top:10px; right:0; width:180px; height:180px;
  border-radius:50%; overflow:hidden; background:var(--bg); opacity:.55; pointer-events:none;
}
body.mode-ops .radar .ring{ position:absolute; border:1px solid var(--line); border-radius:50%; }
body.mode-ops .radar .r1{ inset:0; } body.mode-ops .radar .r2{ inset:28px; }
body.mode-ops .radar .r3{ inset:56px; } body.mode-ops .radar .r4{ inset:84px; }
body.mode-ops .radar .sweep{
  position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  /* 3 points d'arrêt, pas 2 : sans un stop de retour à transparent juste
     après 55deg, le dégradé conique garde la DERNIÈRE couleur déclarée
     sur tout le reste du cercle (55deg -> 360deg) au lieu de rester
     transparent, ce qui remplirait tout le disque. Le bord d'attaque du
     balayage (le plus avancé dans le sens de rotation, donc l'angle
     55deg dans le repère local de l'élément) est le plus opaque, et ça
     retombe aussitôt à transparent ensuite ; l'arrière (0deg) part
     transparent pour créer le fondu du sillage derrière le sweep.
     ATTENTION : 55 (RADAR_SWEEP_LEAD_DEG côté JS, assets/js/core-nav.js)
     doit rester synchro avec ce chiffre si jamais il change ici. */
  background:conic-gradient(from 0deg, transparent, rgba(232,163,61,.6) 55deg, transparent 55deg);
  animation:radarspin 3.6s linear infinite; transform-origin:50% 50%;
}
@keyframes radarspin{ to{ transform:rotate(360deg); } }
@media (max-width:760px){ body.mode-ops .radar{ display:none; } }

/* Points ("blips") apparaissant aléatoirement sur le radar — purement
   décoratif, pilotés par assets/js/core-nav.js (spawnRadarBlips). Chaque
   point est ajouté/retiré dynamiquement en JS avec une position et un
   délai aléatoires ; le CSS ne gère que son apparence et l'animation
   d'apparition/disparition en fondu. */
body.mode-ops .radar .blip{
  position:absolute; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:#e8a33d; box-shadow:0 0 4px 1px rgba(232,163,61,.8);
  animation:radarBlip 2.2s ease-in-out forwards;
}
@keyframes radarBlip{
  0%{ opacity:0; transform:scale(.4); }
  15%{ opacity:1; transform:scale(1); }
  70%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(.6); }
}