/* Mon écran LED — thème NOIR (maquette 10/11/2026)
   À charger APRÈS style.css. Deux variantes :
   <html data-noir="profond">  noir pur, mat
   <html data-noir="metal">    noir métallique (graphite brossé, reflets) */

:root[data-noir]{
  color-scheme:dark;
  --accent:#F2A93B; --accent-ink:#F2A93B; --on-accent:#0B0B0C;
  --ink:#F4F1EA; --text:#B8BBC2; --muted:#878B94;
  --hero-title:#F7F4EE; --hero-text:#BFC3CB;
  --ok:#5FD39A; --err:#FF8A80;
  --dot:rgba(242,169,59,.6);
}
:root[data-noir="profond"]{
  --bg:#050505; --surface:#0E0E0F; --line:rgba(255,255,255,.08); --hero:#000;
}
:root[data-noir="metal"]{
  --bg:#0B0C0E; --surface:#15161A; --line:rgba(255,255,255,.09); --hero:#08090A;
  --sheen:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%);
  --brush:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);
}

/* ---- Les points du pitch, sur tout le site ---- */
:root[data-noir] body{background-color:var(--bg);position:relative}
:root[data-noir] body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(242,169,59,.10) 1.2px,transparent 1.7px) 0 0/22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 80% 10%,#000 0%,transparent 75%);
          mask-image:radial-gradient(ellipse 90% 70% at 80% 10%,#000 0%,transparent 75%);
}
:root[data-noir] main,:root[data-noir] section{background-color:transparent}
:root[data-noir] .alt{background:rgba(255,255,255,.015)}

/* hero : points plus présents + halo ambre */
:root[data-noir] .hero{background:var(--hero)}
:root[data-noir] .hero::after{
  content:"";position:absolute;right:-10%;top:-30%;width:70%;height:120%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,169,59,.16),transparent);filter:blur(10px)
}
:root[data-noir] .hero .wrap{z-index:1}

/* nav : verre fumé */
:root[data-noir] .nav{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07)}

/* champs */
:root[data-noir] input,:root[data-noir] select,:root[data-noir] textarea{background:#0A0A0B;border-color:rgba(255,255,255,.12);color:var(--ink)}
:root[data-noir] .chips label{background:#0A0A0B;border-color:rgba(255,255,255,.12)}

/* boutons */
:root[data-noir] .btn.ghost{border-color:rgba(255,255,255,.28)}
:root[data-noir] .btn:not(.ghost){box-shadow:0 0 0 1px rgba(242,169,59,.4),0 6px 24px rgba(242,169,59,.22)}
:root[data-noir] .nav-links a.keep{background:#F4F1EA;color:#0B0B0C}

/* ---- Variante NOIR MÉTALLIQUE ---- */
:root[data-noir="metal"] body{
  background:
    radial-gradient(120% 60% at 50% -10%,#1d1f24 0%,transparent 60%),
    linear-gradient(180deg,#0E0F12,#08090A) fixed;
}
:root[data-noir="metal"] .hero{
  background:
    radial-gradient(90% 120% at 15% 0%,#22252B 0%,transparent 55%),
    linear-gradient(160deg,#141518 0%,#060607 70%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
:root[data-noir="metal"] .hero h1{
  background:linear-gradient(180deg,#FFFFFF 0%,#D9DCE1 55%,#9EA3AC 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
:root[data-noir="metal"] .hero h1 em{
  background:linear-gradient(180deg,#FFD08A 0%,#F2A93B 55%,#C27F1C 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* cartes : graphite brossé, arête lumineuse en haut */
:root[data-noir="metal"] .panel,
:root[data-noir="metal"] .real,
:root[data-noir="metal"] .temoignage,
:root[data-noir="metal"] .tip,
:root[data-noir="metal"] .crit article,
:root[data-noir="metal"] .results div{
  background:var(--sheen),var(--brush),linear-gradient(180deg,#1A1B1F,#111215);
  border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 40px -20px rgba(0,0,0,.9);
}
:root[data-noir="metal"] .crit,:root[data-noir="metal"] .results{background:rgba(255,255,255,.07)}
:root[data-noir="metal"] .alt{
  background:var(--brush),linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));
  border-color:rgba(255,255,255,.07);
}
:root[data-noir="metal"] .steps li{border-top:2px solid transparent;border-image:linear-gradient(90deg,#F2A93B,#7a5a2a) 1}
:root[data-noir="metal"] .btn:not(.ghost){background:linear-gradient(180deg,#FFC266,#F2A93B 55%,#D98E1F)}
:root[data-noir="metal"] .btn.ghost{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border-color:rgba(255,255,255,.22)}
:root[data-noir="metal"] footer{border-top-color:rgba(255,255,255,.08)}

/* corrections */
:root[data-noir] .nav-links a.keep{background:none;color:var(--hero-text)}
@media (max-width:900px){:root[data-noir] .nav-links a.keep{background:#F4F1EA;color:#0B0B0C}}
:root[data-noir] .li-btn{background:#0A66C2!important;color:#fff;box-shadow:none!important}
:root[data-noir] .founder{background:rgba(255,255,255,.02)}
:root[data-noir="metal"] .founder{background:var(--sheen),var(--brush),linear-gradient(180deg,#1A1B1F,#111215);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}

/* page Vitrines, version vidéo : titre plein (lisible sur la vidéo), voile noir au lieu de bleu nuit */
:root[data-noir="metal"] .lp-hero.has-video h1{background:none;color:var(--hero-title)}
:root[data-noir="metal"] .lp-hero.has-video h1 em{background:none;color:var(--accent)}
@media (max-width:900px){
  :root[data-noir] .lp-hero.has-video .hv::after{background:linear-gradient(180deg,rgba(0,0,0,.40) 0%,rgba(0,0,0,.66) 55%,rgba(0,0,0,0) 100%)}
}

/* ---- Accueil avec film (v2 du thème, 11/11/2026) ---- */
/* titre argent : l'ombre portée passe en filtre, sinon elle ternit le dégradé */
:root[data-noir="metal"] .hero-film h1{text-shadow:none;filter:drop-shadow(0 2px 18px rgba(0,0,0,.55))}
/* l'écran vidéo se fond dans le graphite et les points (plus de rectangle noir) */
:root[data-noir] .hero-film .hf-bg{background:transparent}
:root[data-noir] .hf-pill{background:rgba(12,12,14,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
:root[data-noir] .hf-ico::before{border-left-color:#0B0B0C}
@media (max-width:767px){
  :root[data-noir="metal"] .hero-film .hf-bg::after{background:linear-gradient(0deg,#0A0B0D 0%,rgba(10,11,13,.6) 22%,transparent 50%)}
}