/* ════════════════════════════════════════════════════════════
   BLOCS COMMUNS — même style sur toutes les pages
   · bandeau d'urgence, boîte « Un projet électrique ? », « Zones voisines », horaires : bleu nuit (plus de vert dominant)
   · carte finale « Un projet ? » (#cta-final) : carte claire + photo
   · apparition progressive (.rv / .rv-in, pilotée par site-blocks.js)
   Le vert reste réservé aux accents (boutons, pastilles, détails).
   Ce fichier doit rester à la racine du site (chemins d'images relatifs).
════════════════════════════════════════════════════════════ */

:root { --navy: #0f1a30; --navy-2: #1a2a4a; }

/* ── Menu « Services » sur ordinateur : pas de zone morte entre le lien et le panneau ──
   Le panneau commence sous l'en-tête ; sans « pont », la souris quitte le survol en descendant
   vers lui et le menu se referme avant qu'on puisse cliquer. Le pont fait partie du panneau
   (donc du survol du <li>) et reste invisible. */
@media (min-width: 769px) {
    body .mega-menu::before {
        content: ''; position: absolute; left: 0; right: 0; top: -40px; height: 40px; background: transparent;
    }
    /* Ouverture aussi au clavier (Tab) */
    body #main-nav > ul > li.has-mega:focus-within .mega-menu { display: block; }
}

/* ── Menu mobile ouvert : toujours sous l'en-tête, et défilant si la liste dépasse l'écran ── */
@media (max-width: 768px) {
    body #main-nav.open {
        top: calc(var(--topbar-h, 38px) + var(--header-h, 80px));
        max-height: calc(100vh - var(--topbar-h, 38px) - var(--header-h, 80px));
        max-height: calc(100dvh - var(--topbar-h, 38px) - var(--header-h, 80px));
        overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    }
    body #main-nav.open > ul > li > a { justify-content: center; }
}

/* ── Bandeau d'urgence ── */
body .urgence-band {
    background: linear-gradient(100deg, var(--navy) 0%, var(--navy-2) 100%);
    color: #fff; gap: 18px; padding: 15px 32px;
}
body .urgence-band > i { color: #ffb020; animation: sbBlink 1.8s ease-in-out infinite; }
body .urgence-band a {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--green-light); color: #fff;
    padding: 7px 20px; border-radius: 50px; font-size: 17px; font-weight: 800;
    box-shadow: 0 6px 18px rgba(84,178,63,.35);
    transition: background .25s ease, transform .25s ease;
}
body .urgence-band a i { font-size: 15px; }
body .urgence-band a:hover { background: var(--green); color: #fff; transform: translateY(-2px); }
@keyframes sbBlink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ── Boîte « Un projet électrique ? » (colonne de droite des pages services / villes) ── */
body .cta-box {
    position: relative; overflow: hidden; border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(15,26,48,.55) 0%, rgba(15,26,48,.93) 52%, rgba(15,26,48,.98) 100%),
        url('assets/img/slider/slider-maintenance.jpg') 80% 30% / cover no-repeat,
        var(--navy);
    box-shadow: 0 18px 44px rgba(15,26,48,.28);
    padding-top: 40px;
}
body .cta-box .cta-btn {
    border-radius: 50px; background: var(--green-light);
    box-shadow: 0 8px 22px rgba(84,178,63,.38);
}
body .cta-box .cta-btn:hover { background: var(--green); transform: translateY(-2px); }
body .cta-box .cta-tel { color: #fff; }
body .cta-box .cta-tel:hover { color: var(--green-light); }
body .cta-box .cta-mention {
    opacity: 1; color: rgba(255,255,255,.88); font-weight: 700;
    background: rgba(255,255,255,.1); padding: 5px 14px; border-radius: 30px;
}

/* ── Zones voisines (pages villes) ── */
body .projets-link {
    background:
        linear-gradient(100deg, rgba(15,26,48,.97) 0%, rgba(15,26,48,.90) 55%, rgba(15,26,48,.72) 100%),
        url('assets/img/slider/slider-energie-verte.jpg') center 60% / cover no-repeat,
        var(--navy);
}
body .pl-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    letter-spacing: 2px; font-weight: 800; color: var(--green-light);
}
body .pl-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--green-light); border-radius: 2px; }
body .pl-title {
    font-family: var(--font-body, 'Nunito', sans-serif); text-transform: none;
    font-weight: 800; letter-spacing: -.4px; font-size: clamp(26px, 3.4vw, 38px);
}
body .pl-see-all { border-radius: 50px; }

/* ── Horaires (page contact) ── */
body .hours-box { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); }

/* ════════════════════════════════════════
   CARTE FINALE « Un projet électrique ? » — carte claire + photo
════════════════════════════════════════ */
#cta-final { background: var(--grey-bg, #f4f5f7); padding: 90px 32px; }
.cta-card {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1.25fr .95fr;
    background: #fff; border-radius: 28px; overflow: hidden;
    box-shadow: 0 24px 70px rgba(15,26,48,.13);
}
.cta-copy { padding: 60px 52px; display: flex; flex-direction: column; justify-content: center; }
.cta-eyebrow {
    display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
    font-size: 12.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--green, #3a8f2a);
}
.cta-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--green-light, #54b23f); border-radius: 2px; }
#cta-final h2 {
    font-family: var(--font-body, 'Nunito', sans-serif); font-size: clamp(30px, 3.6vw, 44px); font-weight: 800;
    letter-spacing: -.5px; line-height: 1.1; color: var(--text-dark, #1a1a1a); margin: 12px 0 14px; text-wrap: balance;
}
#cta-final p { font-size: 16.5px; color: var(--text-mid, #555); line-height: 1.7; margin: 0 0 32px; }
.cta-final-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-final-btns .btn-white {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--green-light, #54b23f); color: #fff; padding: 16px 30px; border-radius: 50px;
    font-weight: 800; font-size: 15px; box-shadow: 0 8px 22px rgba(84,178,63,.35);
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.cta-final-btns .btn-white:hover { background: var(--green, #3a8f2a); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(84,178,63,.42); }
.cta-final-btns .btn-outline {
    display: inline-flex; align-items: center; gap: 10px; background: transparent;
    border: 2px solid var(--text-dark, #1a1a1a); color: var(--text-dark, #1a1a1a); padding: 14px 28px; border-radius: 50px;
    font-weight: 800; font-size: 15px;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}
.cta-final-btns .btn-outline:hover { background: var(--text-dark, #1a1a1a); color: #fff; transform: translateY(-3px); }
.cta-photo {
    position: relative; min-height: 380px;
    background: url('assets/img/slider/slider-maintenance.jpg') 78% 50% / cover no-repeat;
}
/* fondu doux entre le texte blanc et la photo */
.cta-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 22%); }
.cta-chip {
    position: absolute; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 8px;
    background: rgba(15,26,48,.82); backdrop-filter: blur(6px); color: #fff;
    padding: 10px 18px; border-radius: 30px; font-size: 13.5px; font-weight: 700;
}
.cta-chip i { color: #ffb020; animation: sbBlink 1.8s ease-in-out infinite; }

@media (max-width: 900px) {
    #cta-final { padding: 56px 20px; }
    .cta-card { grid-template-columns: 1fr; border-radius: 22px; }
    .cta-photo { order: -1; min-height: 220px; }
    .cta-photo::before { background: linear-gradient(180deg, rgba(255,255,255,0) 70%, #fff 100%); }
    .cta-copy { padding: 32px 24px 36px; }
}

/* ════════════════════════════════════════
   APPARITION PROGRESSIVE (scroll)
   .rv = état caché, .rv-in = visible ; retirées à la fin
   pour que les survols d'origine reprennent la main.
════════════════════════════════════════ */
.rv { opacity: 0; transform: translateY(30px); }
.rv-in { opacity: 1; transform: none; }
.rv, .rv-in { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease !important; }

@media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1; transform: none; }
    body .urgence-band > i, .cta-chip i { animation: none; }
}