/* Concept Clé — mode sombre « violet gradient » (inspiré de la maquette Figma Violet Gradient Marketing Landing Page)
   Activé par <html data-theme="dark">, posé par theme.js (préférence système + choix mémorisé). */

/* ---------- l'interrupteur remplace le pictogramme devant « Concept Clé » ---------- */
.brand{display:flex;align-items:center;gap:10px;flex:none}
/* logo SVG de conceptcle.com : version claire (accent rose) / sombre (accent bleu) */
.lg{display:block;width:auto}
.lg-d{display:none}
html[data-theme="dark"] .lg-l{display:none}
html[data-theme="dark"] .lg-d{display:block}
.nav .logo .lg{height:26px}
@media (max-width:480px){.nav .logo .lg{height:17px}}
html.has-switch .nav .logo .toggle{display:none}

/* ---------- bouton de bascule (écho du logo : pastille dans une capsule) ---------- */
.theme-switch{flex:none;position:relative;width:52px;height:28px;padding:0;border-radius:20px;cursor:pointer;
  border:2px solid var(--ink-strong,#1a171b);background:transparent;transition:background .25s,border-color .25s,box-shadow .25s;}
.theme-switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:url("assets/mark-light.svg") center/contain no-repeat;transition:transform .28s cubic-bezier(.4,.1,.2,1),box-shadow .25s}
.theme-switch svg{position:absolute;top:50%;width:11px;height:11px;margin-top:-5.5px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-strong,#1a171b);opacity:.7;transition:color .25s;}
.theme-switch .i-sun{right:4px}
.theme-switch .i-moon{left:4px}
.theme-switch:focus-visible{outline:2px solid #8b5cf6;outline-offset:3px}
@media (max-width:600px){.theme-switch{width:46px;height:26px}.theme-switch::after{width:18px;height:18px}.theme-switch svg{width:9px;height:9px;margin-top:-4.5px}}
/* petits téléphones : on resserre la capsule pour que logo + tél. + bascule + burger tiennent sans déborder */
@media (max-width:480px){
  .nav{padding:12px 10px !important;gap:6px !important}
  .nav-end{gap:6px !important}
  .logo{font-size:15px !important;gap:5px !important}
  .logo .toggle{width:26px !important;height:15px !important}
  .logo .toggle::after{width:8px !important;height:8px !important}
  .nav .tel{font-size:10px !important}
  .burger{width:26px !important}
}

html[data-theme="dark"] .theme-switch{border-color:#8b5cf6;box-shadow:0 0 14px rgba(139,92,246,.45);}
html[data-theme="dark"] .theme-switch::after{transform:translateX(24px);background-image:url("assets/mark-dark.svg");filter:drop-shadow(0 0 5px rgba(76,114,241,.8));}
@media (max-width:600px){html[data-theme="dark"] .theme-switch::after{transform:translateX(20px)}}
html[data-theme="dark"] .theme-switch svg{color:#d9ccff}

/* ---------- palette ---------- */
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#d9d3ee;
  --ink-strong:#f4f1ff;
  --paper:#0b0716;
  --paper-alt:#150e29;
  --line:rgba(167,139,250,.20);
  --muted:#a399c4;
  --accent:#a77bff;
  --accent-wash:rgba(139,92,246,.22);
  --violet-grad:linear-gradient(135deg,#8b2bff 0%,#3b6bff 100%);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(900px 520px at 85% -8%,rgba(124,58,237,.28),transparent 60%),
    radial-gradient(700px 480px at -5% 30%,rgba(59,107,255,.14),transparent 60%),
    #0b0716;
  background-attachment:fixed;
}

/* ---------- capsule de menu ---------- */
html[data-theme="dark"] .nav{background:rgba(22,14,42,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(167,139,250,.22);box-shadow:0 8px 40px rgba(88,28,200,.25);}
html[data-theme="dark"] .nav.open > ul,
html[data-theme="dark"] .dropdown{background:#150e29;border:1px solid rgba(167,139,250,.22);box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 24px rgba(124,58,237,.18);}
html[data-theme="dark"] .nav.open .dropdown{background:transparent;border:0;box-shadow:none}
html[data-theme="dark"] .nav > ul > li > a::after{background:var(--violet-grad)}
html[data-theme="dark"] .dropdown li a:hover{background:rgba(139,92,246,.16);color:#c9b3ff}
html[data-theme="dark"] .dropdown li.active a{color:#c9b3ff}
html[data-theme="dark"] .logo .toggle{border-color:#8b5cf6}
html[data-theme="dark"] .logo .toggle::after{background:var(--violet-grad)}
html[data-theme="dark"] .mail svg{color:#a77bff}
html[data-theme="dark"] .mail:hover{color:#c9b3ff}
html[data-theme="dark"] .pill-tip{background:var(--violet-grad);box-shadow:0 0 12px rgba(139,92,246,.6)}

/* ---------- slider / héros : voile violet à la place du voile blanc ---------- */
html[data-theme="dark"] .slide::after{background:linear-gradient(100deg,rgba(11,7,22,.92) 0%,rgba(24,12,52,.65) 40%,rgba(11,7,22,.05) 66%)}
@media (max-width:760px){
  html[data-theme="dark"] .slide::after{background:linear-gradient(180deg,rgba(11,7,22,.92) 0%,rgba(24,12,52,.68) 55%,rgba(11,7,22,.25) 100%)}
}
html[data-theme="dark"] .hero{background:#05030c}
html[data-theme="dark"] .slide-copy p{color:#d9d3ee}
html[data-theme="dark"] .slide-eyebrow,
html[data-theme="dark"] .work-head .eyebrow,
html[data-theme="dark"] .case-hero .eyebrow,
html[data-theme="dark"] .case-gallery .eyebrow,
html[data-theme="dark"] .tech-intro .kicker,
html[data-theme="dark"] .intro h1 span{color:#b794ff}
html[data-theme="dark"] .dots a{background:rgba(217,211,238,.30)}
html[data-theme="dark"] .dots a:hover{background:rgba(217,211,238,.7)}

/* ---------- textes ---------- */
html[data-theme="dark"] .intro p,
html[data-theme="dark"] .case-body p,
html[data-theme="dark"] .case-body li,
html[data-theme="dark"] .tech-intro p,
html[data-theme="dark"] .tech-intro .procede,
html[data-theme="dark"] details.panel .panel-body,
html[data-theme="dark"] .spec-list li span.v{color:#cfc7ea}
html[data-theme="dark"] .case-body li::before,
html[data-theme="dark"] details.panel summary::after,
html[data-theme="dark"] details.panel .price b{color:#b794ff}
html[data-theme="dark"] details.panel .quote{border-left-color:#8b5cf6}

/* ---------- cartes, fiches techniques, accordéons ---------- */
html[data-theme="dark"] .tech-card{background:rgba(255,255,255,.035);border-color:var(--line);box-shadow:0 0 0 1px rgba(255,255,255,.02),0 14px 40px rgba(0,0,0,.35)}
html[data-theme="dark"] .tech-visual{background:#150e29}
html[data-theme="dark"] .tech-visual.placeholder{background:radial-gradient(circle at 30% 30%,rgba(139,92,246,.35) 0,transparent 48%),repeating-linear-gradient(135deg,#150e29 0 14px,#1b1235 14px 28px)}
html[data-theme="dark"] .tech-visual.photo .overlay{background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(139,92,246,.07) 14px 28px)}
html[data-theme="dark"] details.panel summary:hover{background:rgba(139,92,246,.10)}
html[data-theme="dark"] .tech-actions{background:rgba(139,92,246,.07)}
html[data-theme="dark"] .thumb{background:#150e29}
html[data-theme="dark"] .thumb::before{background:linear-gradient(135deg,rgba(139,43,255,.82),rgba(59,107,255,.82))}
html[data-theme="dark"] .card:hover .thumb{box-shadow:0 0 28px rgba(139,92,246,.45)}

/* ---------- boutons : dégradé violet → bleu avec lueur ---------- */
html[data-theme="dark"] .pill-btn{border-color:rgba(167,139,250,.55);color:#f4f1ff}
html[data-theme="dark"] .pill-btn:hover{background:var(--violet-grad);border-color:transparent;color:#fff;box-shadow:0 0 22px rgba(124,58,237,.6)}
html[data-theme="dark"] .pill-btn.solid,
html[data-theme="dark"] .cookie button{background:var(--violet-grad);border-color:transparent;color:#fff;box-shadow:0 6px 22px rgba(124,58,237,.45)}
html[data-theme="dark"] .pill-btn.solid:hover,
html[data-theme="dark"] .cookie button:hover{background:var(--violet-grad);filter:brightness(1.12);box-shadow:0 0 26px rgba(124,58,237,.7)}

/* ---------- pied de page & cookies ---------- */
html[data-theme="dark"] footer.sm{background:#07040f;color:#f4f1ff}
html[data-theme="dark"] footer.sm .sm-card{background:#150e29;border:1px solid rgba(167,139,250,.20);box-shadow:0 14px 40px rgba(0,0,0,.35)}
html[data-theme="dark"] footer.sm .small,html[data-theme="dark"] footer.sm .copy{color:#a399c4}
html[data-theme="dark"] footer.sm ul a:hover{color:#b794ff}
html[data-theme="dark"] .cookie{background:#150e29;border:1px solid rgba(167,139,250,.25);color:#d9d3ee;box-shadow:0 20px 50px rgba(0,0,0,.6)}

/* ---------- transition douce lors de la bascule ---------- */
html.theme-anim,html.theme-anim *{transition:background-color .35s,color .35s,border-color .35s,box-shadow .35s !important}

/* ---------- ACCUEIL PORTFOLIO (variables et éléments propres à l'accueil) ---------- */
html[data-theme="dark"]{--bg:#0b0716;--surface:#150e29;--surface-2:#1b1235;--ink-2:#a399c4}
html[data-theme="dark"] .btn{background:rgba(255,255,255,.04);border-color:rgba(167,139,250,.45);color:#f4f1ff}
html[data-theme="dark"] .btn .arr{background:var(--violet-grad)}
html[data-theme="dark"] .btn:hover{box-shadow:0 10px 28px -8px rgba(124,58,237,.6)}
html[data-theme="dark"] .tilt{background:none;box-shadow:none}
html[data-theme="dark"] .tilt .tilt-title{color:#f4f1ff;mix-blend-mode:normal}
html[data-theme="dark"] .tilt .tilt-tag{color:#a399c4}
html[data-theme="dark"] .services .intro h2 .dot{background:var(--violet-grad)}
html[data-theme="dark"] .blob{filter:saturate(1.1) brightness(.95)}
html[data-theme="dark"] form{background:var(--surface-2);border:1px solid rgba(167,139,250,.2)}
html[data-theme="dark"] input,html[data-theme="dark"] textarea{background:#0f0a20;color:#f4f1ff}
html[data-theme="dark"] input:focus,html[data-theme="dark"] textarea:focus{outline-color:#8b5cf6}
html[data-theme="dark"] .form-status.ok{color:#6ee7a0}
html[data-theme="dark"] .form-status.ko{color:#ff8fa3}
html[data-theme="dark"] .banner{background:linear-gradient(100deg,#2a1450,#4a1f6e 30%,#6b2a78 45%,#2e2f86 70%,#1a2152)}
html[data-theme="dark"] .banner h2,html[data-theme="dark"] .banner .eyebrow{color:#f4f1ff}
html[data-theme="dark"] .lb-btn{background:var(--violet-grad)}
html[data-theme="dark"] .lb-close{background:rgba(255,255,255,.12)}
/* l'accueil reutilise le nom .hero du slider : on lui retire le fond du slider (fond uni, sans demarcation) */
html[data-theme="dark"] body.home .hero{background:none}

/* drapeau portrait : en sombre, les traits deviennent clairs sur fond nuit (mode screen) */
html[data-theme="dark"] .flag{filter:invert(1) contrast(1.4);mix-blend-mode:screen;opacity:.8}
@media (max-width:900px){html[data-theme="dark"] .flag{opacity:.22}}