/* Public site theme system: QHSEfrance, QHSEproTools and FIREproTools */
:root {
  color-scheme: dark;

  /* QHSEfrance — France Tech / DARK */
  --site-bg: #071426;
  --site-surface: #0b1f35;
  --site-surface-soft: #112b46;

  --site-primary: #164b9b;          /* Bleu France */
  --site-primary-strong: #0b376d;   /* Bleu France profond */
  --site-tech: #2f73ff;             /* Bleu électrique */
  --site-accent: #e63946;           /* Rouge France */
  --site-accent-soft: rgba(230, 57, 70, 0.13);

  --site-text-main: #f7f9fc;
  --site-text-muted: #adbbcf;
  --site-link: #82adff;

  --site-border: rgba(255, 255, 255, 0.14);
  --site-border-soft: rgba(255, 255, 255, 0.08);

  --site-panel-bg:
    radial-gradient(circle at 100% 0%, rgba(47, 115, 255, 0.08) 0%, transparent 34%),
    linear-gradient(145deg, #0d223a 0%, #071426 100%);

  --site-card-bg:
    radial-gradient(circle at 100% 0%, rgba(47, 115, 255, 0.055) 0%, transparent 34%),
    linear-gradient(145deg, #102740 0%, #0a192c 100%);

  --site-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
  --site-btn-bg: linear-gradient(135deg, #164b9b 0%, #2f73ff 52%, #e63946 100%);
  --site-btn-text: #ffffff;
  --site-focus-ring: 0 0 0 3px rgba(47, 115, 255, 0.30);
}

body[data-theme="light"] {
  color-scheme: light;

  /* QHSEfrance — France Tech / LIGHT */
  --site-bg: #f4f7fb;
  --site-surface: #ffffff;
  --site-surface-soft: #eaf0f7;

  --site-primary: #164b9b;          /* Bleu France */
  --site-primary-strong: #0e3e79;
  --site-tech: #2f73ff;
  --site-accent: #d92d3a;
  --site-accent-soft: rgba(217, 45, 58, 0.09);

  --site-text-main: #142033;
  --site-text-muted: #59697f;
  --site-link: #164b9b;

  --site-border: rgba(20, 32, 51, 0.14);
  --site-border-soft: rgba(20, 32, 51, 0.08);

  --site-panel-bg:
    radial-gradient(circle at 100% 0%, rgba(47, 115, 255, 0.055) 0%, transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #eef3f9 100%);

  --site-card-bg:
    linear-gradient(145deg, #ffffff 0%, #f7f9fc 100%);

  --site-shadow: 0 16px 36px rgba(14, 62, 121, 0.10);
  --site-btn-bg: linear-gradient(135deg, #164b9b 0%, #2f73ff 58%, #d92d3a 100%);
  --site-btn-text: #ffffff;
  --site-focus-ring: 0 0 0 3px rgba(47, 115, 255, 0.24);
}

body {
  background: var(--site-bg) !important;
  color: var(--site-text-main) !important;
  transition: background-color 0.22s ease, color 0.22s ease;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 0% 0%, var(--site-accent-soft) 0%, transparent 34%),
    var(--site-bg);
  pointer-events: none;
}

body .header {
  background:
    linear-gradient(
      90deg,
      var(--site-primary-strong) 0%,
      var(--site-primary) 48%,
      var(--site-primary-strong) 100%
    ) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;
}




body main,
body section,
body .software-page,
body .home-page {
  color: var(--site-text-main) !important;
}

body .software-page,
body .home-page,
body .qhse-bg,
body .container,
body .card-container,
body .buscador-container {
  background-color: transparent !important;
}

body .software-card,
body .home-card,
body .home-visual,
body .home-signal,
body .glass,
body .card-front,
body .card-back,
body .message-container,
body .ventana,
body .ventana1,
body .ventana2,
body .ventana3 {
  background: var(--site-card-bg) !important;
  border-color: var(--site-border-soft) !important;
  color: var(--site-text-main) !important;
  box-shadow: var(--site-shadow) !important;
}

body p,
body .muted,
body .software-card p,
body .home-card p,
body .home-signal span {
  color: var(--site-text-muted) !important;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  color: var(--site-text-main) !important;
}

body .header .navigation ul li a {
  color: #ffffff !important;
}

body .header .navigation ul li a:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

body .header .navigation ul li ul {
  background:
    linear-gradient(
      145deg,
      var(--site-primary-strong) 0%,
      var(--site-primary) 100%
    ) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.20) !important;
}

body button,
body .btn,
body .cta-btn,
body .software-actions a {
  background: var(--site-btn-bg) !important;
  color: var(--site-btn-text) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.20);
}

body img {
  transition: filter 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
}

body[data-theme="light"] img:not(.menu):not([src*="logo"]) {
  filter: saturate(0.96) contrast(0.98) brightness(1.03);
}

body[data-theme="dark"] img:not(.menu):not([src*="logo"]),
body:not([data-theme]) img:not(.menu):not([src*="logo"]) {
  filter: saturate(1.06) contrast(1.04) brightness(0.92);
}

body a {
  color: var(--site-link);
}

body[data-theme="dark"] a,
body:not([data-theme]) a {
  color: var(--site-link);
}

body input,
body select,
body textarea {
  background: var(--site-surface-soft);
  color: var(--site-text-main);
  border-color: var(--site-border);
}

body input:focus,
body select:focus,
body textarea:focus,
body button:focus-visible,
body a:focus-visible {
  outline: none;
  box-shadow: var(--site-focus-ring);
}

/* =========================================================
   QHSEfrance — Navigation neutre "France Tech"
   Vitrine uniquement. Les pages avec data-brand="qhseprotools"
   ou data-brand="fireprotools" conservent leurs couleurs produit.
   ========================================================= */

/* DARK / défaut : graphite technologique */
body:not([data-brand]) .header,
body[data-brand="qhsefrance"] .header,
body:not([data-brand])[data-theme="dark"] .header,
body[data-brand="qhsefrance"][data-theme="dark"] .header {
  background:
    linear-gradient(135deg, #151e28 0%, #111820 52%, #0d141c 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11) !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.045) !important;
}

/* LIGHT : gris acier clair */
body:not([data-brand])[data-theme="light"] .header,
body[data-brand="qhsefrance"][data-theme="light"] .header {
  background:
    linear-gradient(135deg, #edf1f5 0%, #e3e8ef 52%, #d8dfe7 100%) !important;
  border-bottom: 1px solid rgba(20, 32, 51, 0.12) !important;
  box-shadow:
    0 10px 26px rgba(20, 32, 51, 0.10),
    inset 0 -1px 0 rgba(255, 255, 255, 0.72) !important;
}

/* Texto principal del menú */
body:not([data-brand]) .header .navigation > ul > li > a,
body[data-brand="qhsefrance"] .header .navigation > ul > li > a {
  color: #f7f9fc !important;
}

body:not([data-brand])[data-theme="light"] .header .navigation > ul > li > a,
body[data-brand="qhsefrance"][data-theme="light"] .header .navigation > ul > li > a {
  color: #142033 !important;
}

/* Hover: interacción azul tecnológica, sin teñir toda la barra */
body:not([data-brand]) .header .navigation > ul > li > a:hover,
body[data-brand="qhsefrance"] .header .navigation > ul > li > a:hover {
  background: rgba(47, 115, 255, 0.12) !important;
  color: #ffffff !important;
}

body:not([data-brand])[data-theme="light"] .header .navigation > ul > li > a:hover,
body[data-brand="qhsefrance"][data-theme="light"] .header .navigation > ul > li > a:hover {
  background: #d1dae6 !important;
  color: #164b9b !important;
}

/* Submenús — dark */
body:not([data-brand]) .header .navigation ul li ul,
body[data-brand="qhsefrance"] .header .navigation ul li ul,
body:not([data-brand]) .header .navigation ul li ul li,
body[data-brand="qhsefrance"] .header .navigation ul li ul li {
  background: #18222d !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body:not([data-brand]) .header .navigation ul li ul li a,
body[data-brand="qhsefrance"] .header .navigation ul li ul li a {
  color: #f7f9fc !important;
}

/* Submenús — light */
body:not([data-brand])[data-theme="light"] .header .navigation ul li ul,
body[data-brand="qhsefrance"][data-theme="light"] .header .navigation ul li ul,
body:not([data-brand])[data-theme="light"] .header .navigation ul li ul li,
body[data-brand="qhsefrance"][data-theme="light"] .header .navigation ul li ul li {
  background: #f0f3f7 !important;
  border-color: rgba(20, 32, 51, 0.09) !important;
}

body:not([data-brand])[data-theme="light"] .header .navigation ul li ul li a,
body[data-brand="qhsefrance"][data-theme="light"] .header .navigation ul li ul li a {
  color: #142033 !important;
}

body:not([data-brand])[data-theme="light"] .header .navigation ul li ul li a:hover,
body[data-brand="qhsefrance"][data-theme="light"] .header .navigation ul li ul li a:hover {
  background: #dce4ed !important;
  color: #164b9b !important;
}

/* Mobile: neutraliza los fondos heredados del antiguo styleA */
@media (max-width: 1500px) {
  body:not([data-brand]) .header .navigation,
  body[data-brand="qhsefrance"] .header .navigation,
  body:not([data-brand]) .header .navigation > ul > li,
  body[data-brand="qhsefrance"] .header .navigation > ul > li {
    background: #111820 !important;
  }

  body:not([data-brand])[data-theme="light"] .header .navigation,
  body[data-brand="qhsefrance"][data-theme="light"] .header .navigation,
  body:not([data-brand])[data-theme="light"] .header .navigation > ul > li,
  body[data-brand="qhsefrance"][data-theme="light"] .header .navigation > ul > li {
    background: #e3e8ef !important;
  }
}

/* Firma francesa discreta */
body:not([data-brand]) .header::after,
body[data-brand="qhsefrance"] .header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(
    90deg,
    #164b9b 0% 33.333%,
    #f7f9fc 33.333% 66.666%,
    #e63946 66.666% 100%
  );
  opacity: 0.72;
  pointer-events: none;
}

/* =========================================================
   QHSEfrance — Logo adaptatif Light / Dark
   Le bouton de thème ne nécessite aucune modification :
   dès que body[data-theme] change, le logo suit automatiquement.
   ========================================================= */

body .header .logo .qhsefrance-logo-link {
  display: grid;
  align-items: center;
  justify-items: start;
  width: 100%;
  text-decoration: none;
}

body .header .logo .qhsefrance-logo {
  grid-area: 1 / 1;
  display: block;
  width: min(250px, 100%);
  max-width: 100%;
  height: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateZ(0);
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease;
}

/* DARK por defecto, incluido cuando todavía no existe data-theme */
body .header .logo .qhsefrance-logo--dark,
body[data-theme="dark"] .header .logo .qhsefrance-logo--dark {
  opacity: 1;
  visibility: visible;
}

body .header .logo .qhsefrance-logo--light,
body[data-theme="dark"] .header .logo .qhsefrance-logo--light {
  opacity: 0;
  visibility: hidden;
}

/* LIGHT */
body[data-theme="light"] .header .logo .qhsefrance-logo--dark {
  opacity: 0;
  visibility: hidden;
}

body[data-theme="light"] .header .logo .qhsefrance-logo--light {
  opacity: 1;
  visibility: visible;
}

/* No aplicar filtros globales a los logos de marca */
body[data-theme="light"] .qhsefrance-logo,
body[data-theme="dark"] .qhsefrance-logo,
body:not([data-theme]) .qhsefrance-logo {
  filter: none !important;
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  body .header .logo .qhsefrance-logo {
    transition: none;
  }
}