/* OubaZ Digital — thème sombre
   Activé par <html data-theme="dark"> (voir le script au début de chaque page et site.js).
   Principe : le fond et les cartes de texte passent en sombre ; les visuels produits
   (maquettes, photos sur fond blanc) restent sur des « vitrines » claires pour garder leurs couleurs. */

/* ---------- Bouton de bascule ---------- */
.theme-toggle {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink);
  cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.theme-toggle:hover { background: var(--tint); }
.theme-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.theme-toggle .i-sun { display: none; }
html[data-theme="dark"] .theme-toggle .i-sun { display: block; }
html[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.nav-theme { display: none; }
@media (max-width: 900px) {
  .nav .theme-toggle { display: none; }
  .nav-links.open .nav-theme { display: block; }
  .theme-row {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 0;
    background: none; border: 0; cursor: pointer; font: 500 16px/1.2 var(--sans); color: #303A4E; text-align: left;
  }
  .theme-row .i-sun { display: none; }
  html[data-theme="dark"] .theme-row .i-sun { display: block; }
  html[data-theme="dark"] .theme-row .i-moon { display: none; }
}

/* ---------- Thème sombre ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #E8EEFA; --muted: #9DABC5; --line: #1E2D4E;
  --tint: #14294F; --panel: #0F1B35; --navy: #060D1C; --blue-t: #6AA8FF;
}
html[data-theme="dark"] body { background: #0A1224; color: var(--ink); }

/* En-tête */
html[data-theme="dark"] .nav { background: rgba(10,18,36,.9); border-bottom-color: var(--line); }
html[data-theme="dark"] .nav.is-scrolled { background: rgba(10,18,36,.97); box-shadow: 0 10px 24px -18px #000; }
html[data-theme="dark"] .nav-links a { color: #B9C6DE; }
html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-links a[aria-current="page"] { color: #fff; }
html[data-theme="dark"] .nav .btn[aria-current="page"] { box-shadow: 0 0 0 3px rgba(106,168,255,.28); }
html[data-theme="dark"] .burger { background: linear-gradient(180deg, #1B2B4D 0%, #12203E 100%); border-color: #2A3D66; box-shadow: 0 4px 0 #0A1426, 0 10px 18px -8px #000; }
html[data-theme="dark"] .burger:active { box-shadow: 0 1px 0 #0A1426; }
html[data-theme="dark"] .burger-3d { color: #8DBBFF; }
html[data-theme="dark"] .nav-links.open { background: #0D172C; border-bottom-color: var(--line); box-shadow: 0 18px 30px -22px #000; }
html[data-theme="dark"] .theme-row { color: #B9C6DE; }
html[data-theme="dark"] .install-btn { background: transparent; color: #8DBBFF; border-color: #3C6FD8; }
html[data-theme="dark"] .install-btn:hover, html[data-theme="dark"] .install-btn:active { background: var(--blue); color: #fff; }

/* Boutons et textes bleus (le bleu de marque est trop sombre en texte sur fond noir) */
html[data-theme="dark"] .btn-line { background: transparent; color: #8DBBFF; border-color: #3C6FD8; }
html[data-theme="dark"] .btn-line:hover { background: rgba(2,87,252,.18); }
html[data-theme="dark"] .tag, html[data-theme="dark"] .link,
html[data-theme="dark"] .hero h1 span, html[data-theme="dark"] .page-hero h1 span,
html[data-theme="dark"] .svc-num, html[data-theme="dark"] .step-num, html[data-theme="dark"] .proj-kind,
html[data-theme="dark"] .cta h2 span, html[data-theme="dark"] .aud svg { color: var(--blue-t); }

/* Hero et en-têtes de page */
html[data-theme="dark"] .hero {
  background:
    radial-gradient(60% 90% at 78% 35%, rgba(2,87,252,.28), rgba(2,87,252,0) 70%),
    radial-gradient(40% 60% at 8% 80%, rgba(95,162,255,.12), rgba(95,162,255,0) 70%),
    #0A1224;
}
html[data-theme="dark"] .page-hero:has(h1) {
  background:
    radial-gradient(55% 90% at 80% 30%, rgba(2,87,252,.26), rgba(2,87,252,0) 70%),
    #0A1224;
}
html[data-theme="dark"] .aud { color: #C3CEE4; }

/* Bandes de section */
html[data-theme="dark"] .band { background: #0D1830 !important; border-color: var(--line); }
html[data-theme="dark"] .panel { background: #0F1B35; }
html[data-theme="dark"] .wrap:has(> #services)::before { background: #0F1B35 !important; }
html[data-theme="dark"] .wrap:has(> #realisations)::before { background: #0C1730 !important; }
html[data-theme="dark"] .wrap:has(> #methode)::before { background: #050B18 !important; }
html[data-theme="dark"] article.svc-row:nth-of-type(even)::before,
html[data-theme="dark"] article.proj:nth-of-type(even)::before,
html[data-theme="dark"] .values::before,
html[data-theme="dark"] main > .wrap:has(> .contact-grid)::before { background: #0E1A33; }
html[data-theme="dark"] .info-strip::before { background: #0C1730; }
html[data-theme="dark"] .svc-cta::before, html[data-theme="dark"] .pg-cta::before, html[data-theme="dark"] .case-cta::before { background: #12244A; }

/* Textes */
html[data-theme="dark"] .svc-row .desc, html[data-theme="dark"] .about-text, html[data-theme="dark"] .proj .desc,
html[data-theme="dark"] .value p, html[data-theme="dark"] .rep p, html[data-theme="dark"] .mini-box li { color: #C3CEE4; }
html[data-theme="dark"] .chips li, html[data-theme="dark"] .reps-list li { color: #E8EEFA; }
html[data-theme="dark"] .svc-for b, html[data-theme="dark"] .info-item span { color: #fff; }

/* Cartes de texte : sombres */
html[data-theme="dark"] .value, html[data-theme="dark"] .rep, html[data-theme="dark"] .about-card,
html[data-theme="dark"] .mini-box, html[data-theme="dark"] .form-card, html[data-theme="dark"] .info-card {
  background: #111E3A; border-color: var(--line); box-shadow: 0 22px 44px -28px #000;
}
html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea {
  background: #0B1630; border-color: #263A63; color: var(--ink);
}
html[data-theme="dark"] .field input:focus, html[data-theme="dark"] .field select:focus, html[data-theme="dark"] .field textarea:focus { background: #0E1B3A; border-color: var(--blue-t); }
html[data-theme="dark"] .field input::placeholder, html[data-theme="dark"] .field textarea::placeholder { color: #6F7F9E; }
html[data-theme="dark"] .slot { background: #0E1A33; border-color: #2A3D66; }
html[data-theme="dark"] .svc-row, html[data-theme="dark"] .proj, html[data-theme="dark"] .svc-cta,
html[data-theme="dark"] .pg-cta, html[data-theme="dark"] .case-cta { border-color: var(--line); }

/* Vitrines claires : cartes avec visuels produits (on garde le texte foncé à l'intérieur) */
html[data-theme="dark"] .svc, html[data-theme="dark"] .work, html[data-theme="dark"] .svc-visual,
html[data-theme="dark"] #methode .steps li {
  --ink: #0B1B36; --muted: #5B6577; color: #0B1B36;
}
html[data-theme="dark"] .hero-visual { align-self: center; background: radial-gradient(circle at 30% 20%, #fff 0%, #EAF3FF 50%, #D3E6FF 100%); border-radius: 22px; box-shadow: 0 30px 60px -34px #000; overflow: hidden; }
html[data-theme="dark"] .svc, html[data-theme="dark"] .work { border-color: #2A3D66; box-shadow: 0 22px 44px -28px #000; }
html[data-theme="dark"] .svc .link, html[data-theme="dark"] .svc .link span { color: #0257FC; }
html[data-theme="dark"] .svc-visual { border-color: #2A3D66; box-shadow: 0 22px 44px -28px #000; }

/* Panneau d'appel à l'action clair (pages intérieures) */
html[data-theme="dark"] .cta:not(.cta-h) { background: #12244A; }
html[data-theme="dark"] .cta:not(.cta-h) h2 { color: #fff; }

/* Formes décoratives : PNG à fond transparent, on retire simplement le mélange « multiply » */
html[data-theme="dark"] .gx, html[data-theme="dark"] .cta-shapes img, html[data-theme="dark"] .cta .deco {
  mix-blend-mode: normal; filter: none;
}
@media (min-width: 1360px) {
  html[data-theme="dark"] .svc-row::after, html[data-theme="dark"] .proj::after, html[data-theme="dark"] .values::after,
  html[data-theme="dark"] .info-strip::after, html[data-theme="dark"] main > .wrap:has(> .contact-grid)::after {
    mix-blend-mode: normal; filter: none;
  }
}

/* Pied de page : un peu plus profond que la page */
html[data-theme="dark"] footer { background: #060D1C; border-top: 1px solid var(--line); }

/* Logo à « C » clair sur fond sombre (complète le changement fait par le script) */
html[data-theme="dark"] .nav .brand img { content: url("../img/logo-alt.webp"); }

/* Toutes les formes bleues (PNG transparents) : pas de mélange en thème sombre */
html[data-theme="dark"] img[src*="assets/elements/"] { mix-blend-mode: normal; filter: none; }