/*
 * © 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); }
/* DEUX ANCRES QUI NE SONT PAS DES LIENS DE TEXTE, ET QUE LA REGLE CI-DESSUS
   REPEIGNAIT SANS BRUIT. Elle pese plus qu'une regle de classe de
   `styles.css` et gagne donc contre la couleur que ces deux-la declarent.
   Mesure au navigateur le 02/09/2026 : le bouton blanc du bandeau tombait a
   2,85 pour un et le lien d'evitement, lisible au clavier seulement, a 1,76
   sur son propre fond. Une feuille statique ne pouvait pas le voir : elle
   lit la valeur declaree, pas celle qui gagne. Les deux sont nommees plutot
   que d'affaiblir la regle generale, dont la portee reelle n'est pas
   mesurable ici : la plupart des vues sont bâties par script. Les jetons
   sont les memes que dans `styles.css`, pour que les deux feuilles ne
   puissent pas diverger sur la valeur. */
:root[data-theme="dark"] a.cta-btn{ color: var(--z-c-smart-fonce); }
:root[data-theme="dark"] a.skip-link{ color: var(--z-c-blanc); }

/* 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 (Smart) : sous-surface imbriquee -> transparente (opacite uniforme). */
:root[data-theme="dark"] .prot-card .cf-seg{
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}