/* Mon écran LED · accueil v2 (12/11/2026)
   À charger APRÈS noir.css, sur index.html uniquement.
   1. textes secondaires plus lisibles  2. vidéo en fond de tout le 1er écran (ordinateur et tablette)
   3. trois réalisations en photo  4. section claire avec les chiffres clés  5. bandeau photo avant le formulaire */

/* ---- 1. Lisibilité ---- */
:root[data-noir]{--text:#C9CCD3;--muted:#A3A7B0;--hero-text:#D5D8DE}
:root[data-noir] body{font-size:18px}
:root[data-noir] .head p{color:var(--text);font-size:18px}
:root[data-noir] .note{font-size:15px}
:root[data-noir] .hero .facts{font-size:16px}
:root[data-noir] .refs{font-size:16.5px}
:root[data-noir] footer{font-size:15px}

/* ---- 2. 1er écran : la vidéo en fond de tout le 1er écran, derrière le texte (ordinateur et tablette) ---- */
@media (min-width:768px){
  :root[data-noir] .hero-film{min-height:min(84vh,820px);display:flex;align-items:center}
  :root[data-noir] .hero-film .wrap{width:100%}
  :root[data-noir] .hero-film .hf-bg{
    left:0;right:0;top:0;bottom:0;width:auto;height:auto;aspect-ratio:auto;max-height:none;transform:none;background:#000;
    -webkit-mask-image:none;mask-image:none}
  :root[data-noir] .hero-film .hf-loop{width:100%;height:100%;object-fit:cover;object-position:center}
  :root[data-noir] .hero-film .hf-bg::after{background:
    linear-gradient(90deg,rgba(8,9,10,.90) 0%,rgba(8,9,10,.74) 36%,rgba(8,9,10,.30) 68%,rgba(8,9,10,.10) 100%),
    linear-gradient(0deg,rgba(8,9,10,.92) 0%,rgba(8,9,10,0) 30%),
    linear-gradient(180deg,rgba(8,9,10,.55) 0%,rgba(8,9,10,0) 16%)}
  :root[data-noir] .hero-film::after{display:none}
}
@media (min-width:1024px){
  :root[data-noir] .hero-film .hf-pill{opacity:1;transform:none}
}

/* ---- 3. Réalisations en photo ---- */
.v2-reals .v2-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:36px}
.v2-reals .v2-top .head{margin-bottom:0}
.v2-more{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
.v2-more:hover{color:var(--accent)}
.v2-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.v2-card{display:flex;flex-direction:column;gap:16px;color:inherit;text-decoration:none}
.v2-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:#111215}
.v2-card .eyebrow{font-size:12px;line-height:1.4}
.v2-card h3{font-size:24px;line-height:1.2;margin:6px 0}
.v2-card p{color:var(--text);font-size:17px}
.v2-card:hover h3{color:var(--accent)}
@media (max-width:900px){.v2-grid{grid-template-columns:1fr;gap:36px}}

/* ---- 4. Section claire : chiffres clés ---- */
:root[data-noir] section.v2-chiffres{background:#F4F1EA;color:#3F4147}
.v2-chiffres .eyebrow{color:#5A5D65}
.v2-chiffres h2{color:#0B0B0C;max-width:760px;margin-top:12px}
.v2-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px;margin-top:48px}
.v2-nums>div{display:flex;flex-direction:column;gap:8px;border-top:3px solid #0B0B0C;padding-top:18px}
.v2-nums .n{font:700 clamp(56px,6.4vw,88px)/1 var(--display);color:#0B0B0C;white-space:nowrap}
.v2-nums b{font-weight:600;font-size:19px;color:#0B0B0C}
.v2-nums p{font-size:17px;color:#3F4147}
@media (max-width:900px){.v2-nums{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}.v2-nums .n{font-size:clamp(44px,13vw,72px)}}

/* ---- 5. Bandeau photo pleine largeur ---- */
:root[data-noir] section.v2-band{position:relative;overflow:hidden;padding-block:112px;background:#05070C}
.v2-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v2-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,8,.94) 0%,rgba(5,6,8,.8) 45%,rgba(5,6,8,.25) 100%)}
.v2-band .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.v2-band h2{font-size:clamp(32px,4.2vw,56px);line-height:1.06;max-width:640px;color:#F7F4EE}
.v2-band p.v2-lead{max-width:520px;font-size:20px;color:#E3E5E9}
.v2-band .v2-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.v2-band .v2-tel{color:#F7F4EE;font-weight:600;font-size:18px;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
@media (max-width:767px){
  :root[data-noir] section.v2-band{padding-block:72px}
  .v2-band::after{background:rgba(5,6,8,.82)}
}