/*
 * © 2026 DATASHIELD RISK CONSULTING (SAS) · Zerval
 * Thème « L'Affût » verre sombre sur fond photo. Chargé APRÈS styles.css/site.css.
 * Actif sous html[data-theme="dark"]. Repose sur le décor .app-bgfond existant.
 */
:root[data-theme="dark"]{
  /* palette verre sombre (surcharge le :root de base) */
  --bg: transparent;
  /* OPAQUES. Une surface de travail a 65 % d'opacite laisse le decor decider
     du contraste de son texte : la meme couleur d'encre passe sur du clair et
     du sombre selon l'endroit de la photo. Le jeton `--surface-opaque` est la
     couleur de la charte, sans transparence ; le decor reste visible entre les
     surfaces, ou il ne gene la lecture de rien. */
  --surface-opaque: #171b21;
  --bg-soft: #171b21;
  --bg-card: #171b21;
  --border: rgba(255,255,255,.11);
  --border-soft: rgba(255,255,255,.07);
  --text: #f4efe4;
  --text-dim: #aab2be;
  --paper: transparent;
  --ink: #f4efe4;
  --shadow: 0 20px 50px rgba(0,0,0,.45);
  --z-color-surface: rgba(18,22,28,.65);
  --z-color-border: rgba(255,255,255,.11);
  --z-color-text: #f4efe4;
  --z-color-muted: #aab2be;
  --z-color-white: #f4efe4;
  color-scheme: dark;
}

/* fond de page nuit + décor photo voilé (par app : ../img/appbg/bg.webp) */
:root[data-theme="dark"]{ background:#0d1116; }
:root[data-theme="dark"] body{ background:transparent; color:var(--text); }
:root[data-theme="dark"] .app-bgfond{
  background:
    linear-gradient(180deg, rgba(9,12,17,.66) 0%, rgba(9,12,17,.60) 40%, rgba(9,12,17,.50) 80%, rgba(9,12,17,.58) 100%),
    radial-gradient(120% 80% at 84% 8%, rgba(61,166,232,.10), transparent 60%),
    /* `fixed` retire : la couche `.app-bgfond` est DEJA en `position: fixed`,
       l'attachement faisait donc repeindre la photo a chaque defilement sans
       rien changer a l'image. Retrait sans effet visuel, gain de composition. */
    url("../img/appbg/bg.webp") center center / cover no-repeat !important;
  opacity:1 !important; filter:none;   /* voile 60%, flou 0 (demande Hans) */
}
:root[data-theme="dark"] .app-bgfond::after{ display:none; }   /* filigrane serval attenue sur la photo */

/* header + barre latérale en verre */
:root[data-theme="dark"] .app-header{
  background: rgba(12,16,22,.82) !important; backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
:root[data-theme="dark"] .sidebar{
  background: rgba(11,15,21,.85) !important; backdrop-filter: blur(16px);
  border-right: 1px solid var(--border);
}

/* SURFACES DE CONTENU : OPAQUES, ET SANS FLOU.
   Mesure du 30/08 sur l'accueil : 126 elements portaient un `backdrop-filter`,
   dont 114 cartes, chacune translucide a 65 % au-dessus d'une photo. Deux
   consequences, et aucune n'est esthetique. Le contraste d'abord : le meme
   texte passait sur des zones claires et sombres du decor selon le
   defilement, et un etat critique perdait sa saillance. La composition
   ensuite : 126 floutages recalcules a chaque peinture, sur un fond en
   `attachment: fixed`, c'est-a-dire repeint a chaque defilement.
   Le decor reste : il se voit entre les cartes, et c'est la qu'il sert.
   Ce qui FLOTTE vraiment garde son flou, plus bas : la barre du haut, le menu,
   les modales et les menus deroulants. Ils sont six, pas cent vingt-six. */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .home-card,
:root[data-theme="dark"] .esp-card,
:root[data-theme="dark"] .widget,
:root[data-theme="dark"] .sec,
:root[data-theme="dark"] .box,
:root[data-theme="dark"] .kpi,
:root[data-theme="dark"] .stat,
:root[data-theme="dark"] .tile,
:root[data-theme="dark"] .home-section{
  background: var(--surface-opaque) !important;
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow);
}
/* Ce qui flotte AU-DESSUS du contenu : le flou y a un sens, et ils sont peu. */
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .sheet,
:root[data-theme="dark"] .dropdown,
:root[data-theme="dark"] .menu{
  background: var(--surface-opaque) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow);
}

/* zones à fond blanc dur -> transparentes/sombres */
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background:#ffffff"]{
  background: var(--bg-card) !important;
}

/* champs de saisie */
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select{
  background: rgba(255,255,255,.05) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{ color: var(--text-dim); }

/* tableaux */
:root[data-theme="dark"] table{ color: var(--text); }
:root[data-theme="dark"] th{ color: var(--text-dim); border-color: var(--border) !important; }
:root[data-theme="dark"] td{ border-color: var(--border-soft) !important; }
:root[data-theme="dark"] tr:hover td{ background: rgba(255,255,255,.03); }

/* titres + texte : forcer clair là où c'est écrit en dur en sombre */
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3,
:root[data-theme="dark"] h4{ color: #ffffff; }
:root[data-theme="dark"] [style*="color:#14171B"],
:root[data-theme="dark"] [style*="color:#1C2430"],
:root[data-theme="dark"] [style*="color: #14171B"]{ color: var(--text) !important; }

/* liens / accent restent Signal */
:root[data-theme="dark"] a{ color: var(--accent); }

/* boutons primaires : garder le Signal/Fauve, texte lisible */
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-ghost{
  background: rgba(255,255,255,.05); color: var(--text); border: 1px solid var(--border);
}

/* Anti-empilage du verre : une sous-surface verre dans une surface verre empile
   les opacités (0.65 sur 0.65 = ~0.88) et paraît plus opaque. On rend la sous-surface
   imbriquée transparente : une seule couche de teinte, opacité uniforme partout.
   Ciblage parent>enfant (une instance autonome garde son verre). (c) 2026 DRC (SAS). */
:root[data-theme="dark"] .expo-card .ref-card,
:root[data-theme="dark"] .traj-ech .traj-row,
:root[data-theme="dark"] .su-col .su-card,
:root[data-theme="dark"] .pf-team .pf-card,
:root[data-theme="dark"] .dash-conn .intg-kv,
:root[data-theme="dark"] .eb-block .ropa-card,
:root[data-theme="dark"] .eb-block .prog-card,
:root[data-theme="dark"] .eb-block .crise-ctx-c,
:root[data-theme="dark"] .eb-block .crise-hist-i,
/* Lechelle de situation est desormais rendue AUSSI dans la salle dincident,
   ou elle tombe dans une carte : sans cette ligne, une carte de verre dans une
   carte de verre, exactement ce que la regle du hero evite deja. */
:root[data-theme="dark"] .cc-cell .crise-clock,
:root[data-theme="dark"] .cc-cell .crise-task,
:root[data-theme="dark"] .dash-conn .crise-rung,
:root[data-theme="dark"] .crise-hero .crise-rung,
:root[data-theme="dark"] .crise-hero .crise-sev,
:root[data-theme="dark"] .crise-hero .crise-methode{
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Cellule de crise : bouton d'urgence rouge, toujours reperable dans le menu (demande Hans). */
.nav-crise-urgent{background:#b4231c !important;border:1px solid #e0655b !important;box-shadow:0 2px 10px rgba(180,35,28,.45)}
.nav-crise-urgent span,.nav-crise-urgent i{color:#fff !important}
.nav-crise-urgent span{font-weight:800 !important;letter-spacing:.01em}
.nav-crise-urgent:hover{background:#c62a22 !important}
.nav-crise-urgent.on,.nav-crise-urgent.active{background:#9a1d16 !important;border-color:#fff !important}