/* AR Rénovation Toiture — thème sombre bleu nuit / bleu roi, couleurs de sa carte de visite (Timothé, 28/10/2026).
   Chargé en dernier sur toutes les pages : il repasse par-dessus les couleurs claires du gabarit. */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700;800&display=swap");

:root{
  --bg:#10141d !important; --text:#eef1f7 !important; --muted:rgba(238,241,247,.66) !important;
  --surface:#171d29 !important; --border:rgba(238,241,247,.11) !important; --primary:#3d6cf0 !important;
  --footer-bg:#0b0e14 !important;
  --dk-card:#1a2130; --dk-card-2:#1e2637; --copper:#3d6cf0; --copper-2:#7ea0ff; --cream:#eef1f7;
}
html,body{background:#10141d !important;color:var(--cream)}
h1,h2,h3,.section-title,.page-hero h1,#hero h1{font-family:"Barlow",Arial,sans-serif !important;font-weight:800 !important;letter-spacing:0 !important}
h2,h3,.section-title{color:var(--cream) !important}
p,li{color:inherit}
.section-sub,.section-desc,.prose p,.service-card p,.card p{color:var(--muted) !important}
.section-label,.eyebrow-label,.label{color:var(--copper) !important}
.title-underline{background:var(--copper) !important}

/* navigation */
nav,nav.nav-transparent.scrolled,nav.nav-flottant{background:rgba(16,20,29,.94) !important;border-bottom:1px solid var(--border) !important;box-shadow:none !important}
nav.nav-transparent:not(.scrolled){background:linear-gradient(180deg,rgba(16,20,29,.75),rgba(16,20,29,0)) !important;border-bottom-color:transparent !important}
.nav-links a,nav.nav-transparent.scrolled .nav-links a{color:rgba(238,241,247,.8) !important}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--copper) !important;background:rgba(61,108,240,.08) !important}
.nav-links.open,nav.nav-transparent .nav-links.open,.sub-links{background:#121824 !important;border-color:var(--border) !important}
.hamburger span{background:var(--cream) !important}
.nav-logo{color:var(--cream) !important}
.nav-logo-img{height:50px !important;width:auto !important;filter:none !important}
.nav-logo-img.logo-dark{display:none !important}.nav-logo-img.logo-light{display:block !important}
@media (max-width:600px){.nav-logo-img{height:36px !important}}
.nav-cta,.nav-phone-mobile,nav.nav-transparent .nav-cta{background:var(--copper) !important;color:#10141d !important;border:0 !important}

/* boutons */
.btn-dark,.contact-cta-btn,.form-submit-btn{background:var(--copper) !important;color:#10141d !important}
.btn-white{background:var(--cream) !important;color:#10141d !important}
.btn-dark:hover,.contact-cta-btn:hover,.form-submit-btn:hover{background:var(--copper-2) !important}

/* sections et cartes */
#reassurance,.trust-band,section.alt{background:#131925 !important;border-color:var(--border) !important}
.trust-ico,.card-icon{background:var(--dk-card) !important;border-color:var(--border) !important;color:var(--copper) !important}
.trust-item strong,.trust-title{color:var(--cream) !important}
.service-card,.card,.review-card,.faq-item,.devis-form,.ville-chip,.horaire-row{background:var(--dk-card) !important;border-color:var(--border) !important;color:var(--cream)}
.horaire-row:nth-child(even){background:var(--dk-card-2) !important}
.service-card:hover,.card:hover{border-color:rgba(61,108,240,.45) !important}
.service-card h3,.card h3,.service-name{color:var(--cream) !important}
.badge,.review-avatar{background:rgba(61,108,240,.12) !important;color:var(--copper-2) !important}
.ville-chip{color:var(--cream) !important}
.faq-question,.faq-btn{color:var(--cream) !important;background:transparent !important}
.faq-answer,.faq-answer p{color:var(--muted) !important}
.stat-val{color:var(--copper) !important}
.stat-label{color:var(--muted) !important}
.form-group label,.devis-form label{color:var(--cream) !important}
.form-group input,.form-group select,.form-group textarea{background:#10141d !important;color:var(--cream) !important;border-color:rgba(238,241,247,.16) !important}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(238,241,247,.38) !important}
.urgence-option{background:#10141d !important;color:var(--cream) !important;border-color:rgba(238,241,247,.16) !important}
.urgence-option.selected,.urgence-option:has(input:checked){border-color:var(--copper) !important;color:var(--copper) !important}
.cta-band{background:linear-gradient(135deg,#1b2436,#131925) !important;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
footer{background:#0b0e14 !important;border-top:1px solid var(--border)}
.breadcrumb,.breadcrumb a{color:var(--muted) !important}
.step-num{background:var(--copper) !important;color:#10141d !important}
.prose strong{color:var(--cream) !important}
.page-hero::after{background:linear-gradient(180deg,rgba(16,20,29,.55),rgba(16,20,29,.8)) !important}
.ba-label{background:rgba(16,20,29,.78) !important}

/* FAQ : cartes arrondies et aérées (Timothé, 27/10 : « coins agressifs et très carrés ») */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item,.faq-item.open{border:1px solid var(--border) !important;border-radius:16px !important;background:#171d29 !important;overflow:hidden;transition:border-color .25s,background .25s}
.faq-item:hover{border-color:rgba(61,108,240,.35) !important}
.faq-item.open{border-color:rgba(61,108,240,.5) !important;background:#1b2232 !important}
.faq-btn{padding:1.15rem 1.4rem !important;font-family:"Barlow",Arial,sans-serif;font-weight:500 !important;font-size:1.02rem !important;color:var(--cream) !important;line-height:1.35}
.faq-btn svg{width:30px !important;height:30px !important;padding:7px;border-radius:50%;background:rgba(61,108,240,.12);stroke:var(--copper) !important;box-sizing:border-box}
.faq-answer p{padding:0 1.4rem 1.25rem !important;margin:0;line-height:1.65}

/* bloc « photos par WhatsApp » du formulaire : lisible sur fond sombre */
.whatsapp-block{background:rgba(37,211,102,.07) !important;border:1px solid rgba(37,211,102,.32) !important;border-radius:14px !important}
.whatsapp-block-text strong{color:#5fe39a !important}
.whatsapp-block-text span{color:rgba(238,241,247,.75) !important}
.whatsapp-btn{color:#fff !important}

/* chiffres clés : bande sobre entre deux filets, dans la continuité de « À propos » (Timothé, 27/10 : bloc « bizarre ») */
#stats,#stats.stats-classique{background:#10141d !important;padding:0 11% 4.5rem !important;margin:0 !important}
#stats .stats-inner,#stats.stats-classique .stats-inner{background:transparent !important;border-radius:0 !important;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:2.4rem 0 !important;max-width:980px;margin:0 auto}
#stats .stat-val{font-family:"Barlow",Arial,sans-serif !important;font-weight:800 !important;letter-spacing:0 !important;color:var(--copper) !important;font-size:clamp(2.6rem,4.6vw,3.6rem) !important;margin-bottom:.5rem !important}
#stats .stat-lbl{color:var(--muted) !important;font-weight:600 !important;letter-spacing:.18em !important}
#stats .stats-divider{background:var(--border) !important;height:64px !important}
@media (max-width:600px){#stats,#stats.stats-classique{padding:0 6% 3rem !important}#stats .stats-inner{padding:1.8rem 0 !important}}

/* vidéos de chantier (chaîne YouTube @renaultrenovation, 28/10/2026) */
#videos{padding:5rem 6%;background:#0d1119}
#videos .vid-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1180px;margin:2.4rem auto 0}
.vid{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;cursor:pointer;border:1px solid var(--border)}
.vid img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.vid:hover img{transform:scale(1.04)}
.vid::after{content:"";position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(61,108,240,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/28px no-repeat}
.vid.on::after{display:none}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid span{position:absolute;left:10px;right:10px;bottom:10px;font-size:.8rem;font-weight:700;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8)}
#videos .yt-cta{text-align:center;margin-top:2rem}
#videos .yt-cta a{display:inline-block;padding:.9rem 1.6rem;border-radius:999px;background:#ff0033;color:#fff;font-weight:700;text-decoration:none}
@media (max-width:900px){#videos .vid-grid{grid-template-columns:repeat(2,1fr)}#videos{padding:3.5rem 5%}}
.footer-siret{font-size:.8rem;color:rgba(238,241,247,.55);margin-top:.4rem}