/* ============================================================================
   AlkorasTech — Thèmes du site (switcher multi-thèmes, persistant)
   Chaque thème surcharge les variables couleur partagées par les pages marketing
   (2 vocabulaires : --dark-bg/--primary-blue/--container-bg/--text-color... ET
   --accent/--bg/--bg-card/--text/--muted/--border...). Le thème par défaut (aucun
   data-theme) reste le dark cyan defini en inline dans chaque page.
   Selecteur :root[data-theme="X"] > :root inline -> surcharge garantie.
   ========================================================================== */

/* Helper : applique un set complet de variables aux DEUX vocabulaires.
   On le duplique par thème (CSS n'a pas de mixins). */

/* ─── 1. CYAN NUIT (défaut explicite, identique au design d'origine) ─── */
:root[data-theme="cyan"] {
  --dark-bg:#0a0a14; --bg:#0a0a14; --container-bg:#10101e; --bg-card:#10101e; --bg-card-2:#14142a; --card-bg:rgba(255,255,255,.03);
  --text-color:#e0e0e0; --text:#e0e0e0; --text-muted:#a0a0a0; --muted:#a0a0a0;
  --primary-blue:#00ffff; --accent:#00ffff; --light-blue:#7DF9FF;
  --accent-soft:rgba(0,255,255,.12); --accent-glow:rgba(0,255,255,.35);
  --border:#1f1f3a; --card-border:rgba(255,255,255,.08);
}

/* ─── 2. VIOLET ROYAL (sombre, accent violet/magenta) ─── */
:root[data-theme="violet"] {
  --dark-bg:#0c0a18; --bg:#0c0a18; --container-bg:#161029; --bg-card:#161029; --bg-card-2:#1d1636; --card-bg:rgba(255,255,255,.03);
  --text-color:#ece8f7; --text:#ece8f7; --text-muted:#aa9fc6; --muted:#aa9fc6;
  --primary-blue:#b98bff; --accent:#b98bff; --light-blue:#e2c4ff;
  --accent-soft:rgba(185,139,255,.14); --accent-glow:rgba(185,139,255,.4);
  --border:#2b2150; --card-border:rgba(185,139,255,.14);
}

/* ─── 3. ÉMERAUDE (sombre, accent vert émeraude) ─── */
:root[data-theme="emeraude"] {
  --dark-bg:#06110d; --bg:#06110d; --container-bg:#0e1f17; --bg-card:#0e1f17; --bg-card-2:#13291e; --card-bg:rgba(255,255,255,.03);
  --text-color:#e3f1ea; --text:#e3f1ea; --text-muted:#9cb8ab; --muted:#9cb8ab;
  --primary-blue:#2fe6a4; --accent:#2fe6a4; --light-blue:#8ff2ce;
  --accent-soft:rgba(47,230,164,.13); --accent-glow:rgba(47,230,164,.38);
  --border:#16382a; --card-border:rgba(47,230,164,.14);
}

/* ─── 4. AMBRE SUNSET (sombre chaud, accent ambre/or) ─── */
:root[data-theme="ambre"] {
  --dark-bg:#13100a; --bg:#13100a; --container-bg:#1e1810; --bg-card:#1e1810; --bg-card-2:#271f14; --card-bg:rgba(255,255,255,.03);
  --text-color:#f4ede1; --text:#f4ede1; --text-muted:#c2b49a; --muted:#c2b49a;
  --primary-blue:#ffb24d; --accent:#ffb24d; --light-blue:#ffd699;
  --accent-soft:rgba(255,178,77,.14); --accent-glow:rgba(255,178,77,.4);
  --border:#372a1a; --card-border:rgba(255,178,77,.16);
}

/* ─── 5. ROSE MAGMA (sombre, accent rose/corail) ─── */
:root[data-theme="rose"] {
  --dark-bg:#150a10; --bg:#150a10; --container-bg:#201019; --bg-card:#201019; --bg-card-2:#2a1521; --card-bg:rgba(255,255,255,.03);
  --text-color:#f6e9f0; --text:#f6e9f0; --text-muted:#c49db1; --muted:#c49db1;
  --primary-blue:#ff5d8f; --accent:#ff5d8f; --light-blue:#ff9db9;
  --accent-soft:rgba(255,93,143,.14); --accent-glow:rgba(255,93,143,.4);
  --border:#3a2130; --card-border:rgba(255,93,143,.16);
}

/* ─── 6. CLAIR (thème lumineux, fond clair / texte sombre / accent bleu) ─── */
:root[data-theme="clair"] {
  --dark-bg:#f4f5fa; --bg:#f4f5fa; --container-bg:#ffffff; --bg-card:#ffffff; --bg-card-2:#f1f3f9; --card-bg:#ffffff;
  --text-color:#191b2e; --text:#191b2e; --text-muted:#5b5e77; --muted:#5b5e77;
  --primary-blue:#0061cc; --accent:#0061cc; --light-blue:#0094c2;
  --accent-soft:rgba(0,97,204,.10); --accent-glow:rgba(0,97,204,.28);
  --border:#dde0ec; --card-border:#e3e6f0;
}

/* Thème clair : quelques surfaces/halos sont codés en dur (#000, blanc translucide,
   gradients sombres) sur un site pensé dark-first. On neutralise les plus visibles
   pour garder le clair lisible. */
:root[data-theme="clair"] body { background:#f4f5fa; }
:root[data-theme="clair"] .header { background:rgba(255,255,255,.82) !important; border-bottom:1px solid #e3e6f0; }
:root[data-theme="clair"] h1, :root[data-theme="clair"] h2, :root[data-theme="clair"] h3,
:root[data-theme="clair"] .csw-h1, :root[data-theme="clair"] .csw-h2 { color:#191b2e !important; }
:root[data-theme="clair"] .logo, :root[data-theme="clair"] .csw-logo { color:#191b2e; }
:root[data-theme="clair"] .nav a { color:#3a3d55; }
:root[data-theme="clair"] .ec-card, :root[data-theme="clair"] .csw-feature,
:root[data-theme="clair"] .csw-persona, :root[data-theme="clair"] .akt-service-card,
:root[data-theme="clair"] .contact-card { border-color:#e3e6f0; box-shadow:0 4px 18px rgba(20,25,60,.05); }
/* Corps de texte avec couleur claire codee en dur -> muted lisible sur fond clair */
:root[data-theme="clair"] .ec-subtitle,
:root[data-theme="clair"] .ec-card p { color:var(--text-muted); }
/* Questions FAQ (summary #fff code en dur) -> sombre lisible */
:root[data-theme="clair"] .csw-faq-item summary { color:var(--text); }
/* Burger mobile (#fff) sur header clair -> sombre */
:root[data-theme="clair"] .burger { color:var(--text); }
/* Bandeau "Belleville... Devis sous 24h" (eyebrow) : pilule bleue lisible sur clair */
:root[data-theme="clair"] .hero-eyebrow {
  background:rgba(0,97,204,.07); border-color:rgba(0,97,204,.3); color:#0056bd;
}
:root[data-theme="clair"] .hero-eyebrow::before { background:#0061cc; box-shadow:0 0 8px rgba(0,97,204,.6); }
/* Logo (canvas particules cyan) : trop clair sur fond clair -> on l'assombrit */
:root[data-theme="clair"] #hero-canvas { filter:none; } /* logo recolore nativement (animation.js) */
/* Header : bordure + lien actif propres en clair */
:root[data-theme="clair"] .header { border-bottom:1px solid #e3e6f0; }
:root[data-theme="clair"] .nav a.active { color:#fff; }
:root[data-theme="clair"] .nav a:hover { color:#fff; }
/* Titres de cartes (#fff code en dur) -> texte sombre */
:root[data-theme="clair"] .ec-card h3, :root[data-theme="clair"] .csw-feature h3,
:root[data-theme="clair"] .csw-persona h3, :root[data-theme="clair"] .akt-service-card h3,
:root[data-theme="clair"] .contact-card h3, :root[data-theme="clair"] .wa-ct-title { color:var(--text); }
/* Bordures sombres codees en dur (inputs, footer, separateurs) -> claires */
:root[data-theme="clair"] .form-group input, :root[data-theme="clair"] .form-group textarea { border-color:#dde0ec; }
:root[data-theme="clair"] .footer { border-top-color:#e3e6f0; }
/* Prix des packs (#fff code en dur) -> sombre lisible */
:root[data-theme="clair"] .csw-price-amount, :root[data-theme="clair"] .csw-price-big,
:root[data-theme="clair"] .price-main, :root[data-theme="clair"] .card-price-big { color:var(--text); }
/* Stepper du configurateur : label de l'etape active (#fff) -> sombre */
:root[data-theme="clair"] .config-steps .step.active em { color:var(--text); }
/* Mockup demo (apercu de faux sites clients) : reste SOMBRE quel que soit le theme
   du site (c'est une "capture" d'autres sites, pas du contenu AlkorasTech). On
   redefinit localement les variables de theme en valeurs SOMBRES -> tout le contenu
   du mockup (qui utilise var(--text)/var(--muted)/var(--bg)...) se rend comme en
   theme sombre, sans avoir a corriger chaque element. */
:root[data-theme="clair"] .csw-mockup {
  --text:#e0e0e0; --text-color:#e0e0e0; --muted:#a0a0a0; --text-muted:#a0a0a0;
  --bg:#0a0a14; --bg-card:#10101e; --bg-card-2:#14142a; --container-bg:#10101e;
  --border:#1f1f3a; --card-border:rgba(255,255,255,.08);
  --accent:#00ffff; --primary-blue:#00ffff; --accent-2:#00d4ff; --light-blue:#7DF9FF;
  background:#0d0d1a; border-color:#23233a;
}
:root[data-theme="clair"] .csw-mockup-body { background:#0a0a14; }
/* contre l'override clair h1/h2/h3 (sombre !important) DANS le mockup -> texte clair */
:root[data-theme="clair"] .csw-mockup h1, :root[data-theme="clair"] .csw-mockup h2,
:root[data-theme="clair"] .csw-mockup h3, :root[data-theme="clair"] .csw-mockup h4 { color:#fff !important; }

/* Transition douce au changement de thème (sauf reduced-motion, gere globalement) */
:root { transition: background-color .35s ease, color .35s ease; }
body, .header, .ec-card, .csw-feature, .csw-persona, .akt-service-card, .contact-card,
.wa-contact-top, .csw-section, .csw-mini-card {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}

/* ─── Switcher de thème (bouton + popover, injecté après "Contact") ─── */
.akt-theme-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  width:38px; height:38px; padding:0; margin-left:.25rem;
  background:transparent; border:1px solid var(--border,#1f1f3a); border-radius:50%;
  color:var(--primary-blue,#00ffff); cursor:pointer; position:relative;
  transition:border-color .2s, transform .2s, background .2s;
}
.akt-theme-btn:hover { transform:translateY(-1px); border-color:var(--primary-blue,#00ffff); background:var(--accent-soft,rgba(0,255,255,.12)); }
.akt-theme-btn svg { width:18px; height:18px; }
.akt-theme-btn:focus-visible { outline:2px solid var(--primary-blue,#00ffff); outline-offset:3px; }
.akt-theme-pop {
  position:absolute; top:calc(100% + 10px); right:0; z-index:1200;
  background:var(--container-bg,#10101e); border:1px solid var(--border,#1f1f3a);
  border-radius:14px; padding:.5rem; min-width:208px;
  box-shadow:0 18px 50px rgba(0,0,0,.5); display:none;
}
.akt-theme-pop.open { display:block; animation:akt-pop-in .16s ease; }
@keyframes akt-pop-in { from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }
.akt-theme-pop .akt-theme-pop-title { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted,#a0a0a0); padding:.35rem .6rem .5rem; }
.akt-theme-opt {
  display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  padding:.55rem .6rem; border:0; background:transparent; border-radius:9px;
  color:var(--text-color,#e0e0e0); font-family:inherit; font-size:.92rem; cursor:pointer;
  transition:background .15s;
}
.akt-theme-opt:hover { background:var(--bg-card-2,#14142a); }
.akt-theme-opt[aria-checked="true"] { background:var(--accent-soft,rgba(0,255,255,.12)); }
.akt-theme-opt .akt-sw { width:22px; height:22px; border-radius:50%; flex:none; border:1px solid rgba(255,255,255,.18); }
.akt-theme-opt .akt-check { margin-left:auto; color:var(--primary-blue,#00ffff); opacity:0; }
.akt-theme-opt[aria-checked="true"] .akt-check { opacity:1; }
@media (max-width:768px){ .nav .akt-theme-wrap{display:block;width:100%;order:100;} .nav .akt-theme-btn{display:flex;width:100%;height:auto;margin-left:0;padding:.7rem 1rem;border-radius:10px;justify-content:center;} .nav .akt-theme-btn::after{content:'Thème du site';font-size:.95rem;font-weight:600;color:var(--text-color);} .nav .akt-theme-pop{position:static;display:none;left:auto;right:auto;min-width:0;width:100%;margin-top:.3rem;padding:0;background:transparent;border:0;box-shadow:none;} .nav .akt-theme-pop.open{display:block;} .nav{max-height:80vh;overflow-y:auto;} }
.akt-theme-wrap { position:relative; display:inline-flex; align-items:center; }