/* =========================
   HERO BAND — SCOPED STYLES
   ============
    ============= */
.hero-band {
    margin-top: 56px;
    --bg-top: #0f3170;
    --bg-bottom: #441b83;
    --text: #eaf0ff;
    --btn1-start: #3ea7ff;
    --btn1-end: #8a4dff;
    --btn1-shadow: rgba(74,144,226,.35);
    --card: #ffffff;
    --card-text: #0f2350;
    font-family: "Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
    background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
    color: var(--text);
    padding: 64px 0 56px; /* espace vertical du bandeau */
}

/* Option : uniformiser l'angle via une variable */
.shape-diagonal,
.shape-diagonal-dual {
    --diag-cut: 15%; /* même “profondeur” de diagonale en haut et en bas */
}

/* Déjà présent chez toi : diagonale uniquement en bas à droite
.shape-diagonal { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--diag-cut)), 0 100%); }
*/

/* Nouvelle variante : diagonale en bas à droite + en haut à gauche */
.shape-diagonal-dual {
    clip-path: polygon(0 var(--diag-cut), 100% 0, 100% calc(100% - var(--diag-cut)), 0 100%);
}



.g-violetBlue-04 { /* Bleu cyan ? Indigo */
    --bg-top: #48cfff;
    --bg-bottom: #2f1e94;
    --btn1-start: #48cfff;
    --btn1-end: #7b5cff;
}
    .hero-band .hero {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        gap: 36px;
        align-items: center;
        min-height: 540px;
    }

.hero-band h1 {
    margin: 0 0 18px 0;
    font-weight: 800;
    line-height: 1.05;
    font-size: clamp(34px,5.3vw,64px);
    letter-spacing: .2px;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

    .hero-band .h-break {
        display: block;
    }

.adomicile {
    color: #ffffff;
    font-style: italic;
    text-decoration: underline 3px #00b3ff;
}
.hero-band .accent {
    background: none !important;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: #f2f7ff; /* blanc légèrement bleuté */
    text-shadow: 0 1px 0 rgba(0,0,0,.15), 0 10px 24px rgba(2,7,28,.22);
}


    .hero-band .lead {
        margin: 18px 0 28px;
        font-size: clamp(16px,1.6vw,20px);
        color: #c9d6ff;
        max-width: 56ch;
    }

    .hero-band .actions {
        display: flex;
        gap: 18px;
        align-items: center;
    }

    .hero-band .btn {
        appearance: none;
        border: 0;
        cursor: pointer;
        font-weight: 600;
        line-height: 1;
        padding: 18px 24px;
        border-radius: 52px;
        font-size: 16px;
        display: inline-flex;
        gap: 10px;
        align-items: center;
        text-decoration: none;
    }

    .hero-band .btn-primary {
        color: #fff;
        background: linear-gradient(90deg,var(--btn1-start),var(--btn1-end));
        box-shadow: 0 10px 20px var(--btn1-shadow), inset 0 0 0 1px rgba(255,255,255,.06);
    }

    .hero-band .btn-outline {
        color: #dbe4ff;
        background: rgba(255,255,255,.04);
        outline: 1px solid rgba(255,255,255,.18);
        box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
        padding: 17px 24px;
    }

    .hero-band .media {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Carte note */
    .hero-band .rating {
        position: absolute;
        left: 18px;
        bottom: -22px;
        background: var(--card);
        color: var(--card-text);
        border-radius: 14px;
        padding: 14px 16px 12px;
        min-width: 150px;
        box-shadow: 0 16px 40px rgba(2,7,28,.28);
        display: inline-flex;
        flex-direction: column;
        gap: 6px;
        z-index: 5;
    }

        .hero-band .rating .top {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
        }

        .hero-band .rating .star {
            color: #f5b800;
            display: inline-flex;
        }

        .hero-band .rating small {
            color: #6b7280;
            font-weight: 600;
        }

    /* -------------------------
   CAROUSEL + AVANT / APRES
   ------------------------- */
    .hero-band .hero-carousel {
        width: 100%;
        aspect-ratio: 16/9;
        border-radius: 18px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 25px 40px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.06) inset;
        outline: 1px solid rgba(255,255,255,.08);
        background: #0b1b3f;
    }

    /* Piste des slides (flex, largeur auto) */
    .hero-band .hero-carousel__track {
        display: flex;
        height: 100%;
        transition: transform .45s cubic-bezier(.22,.61,.36,1);
        will-change: transform;
    }

    .hero-band .hero-slide {
        width: 100%;
        flex: 0 0 100%;
        position: relative;
    }

        /* Zone de comparaison */
        .hero-band .hero-slide .compare {
            position: relative;
            height: 100%;
            width: 100%;
            --pos: 50%; /* position de la poignée 0–100% */
            background: #0b1b3f; /* fond neutre derrière les images */
        }

        /* Images AVANT/APRÈS (dans le HTML) */
        .hero-band .hero-slide .img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* ✅ remplace 'contain' par 'cover' */
            object-position: center;
            pointer-events: none;
            display: block;
        }

            /* L’image APRÈS est découpée par clip-path */
            .hero-band .hero-slide .img.after {
                clip-path: inset(0 0 0 var(--pos));
            }

        /* Ligne + poignée */
        .hero-band .hero-slide .divider {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2px;
            left: var(--pos);
            transform: translateX(-1px);
            background: rgba(255,255,255,.9);
            box-shadow: 0 0 0 1px rgba(0,0,0,.08);
            pointer-events: none;
            z-index: 2;
        }

        .hero-band .hero-slide .handle {
            position: absolute;
            top: 50%;
            left: var(--pos);
            transform: translate(-50%,-50%);
            width: 32px;
            height: 32px;
            border-radius: 999px;
            border: 0;
            cursor: ew-resize;
            background: #fff;
            box-shadow: 0 6px 16px rgba(0,0,0,.35);
            z-index: 3;
        }

            .hero-band .hero-slide .handle:after {
                content: "";
                position: absolute;
                inset: 7px;
                border-radius: 999px;
                background: linear-gradient(90deg,#6db3ff,#a68cff);
            }

    /* Puces */
    .hero-band .hero-carousel__dots {
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 10px;
        pointer-events: auto;
    }

        .hero-band .hero-carousel__dots .dot {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            border: 0;
            background: rgba(255,255,255,.5);
            cursor: pointer;
        }

            .hero-band .hero-carousel__dots .dot.is-active {
                background: #fff;
                width: 22px;
                border-radius: 999px;
            }

/* Responsive */
@media (max-width: 992px) {
    .hero-band .hero {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .hero-band .media {
        order: -1;
    }

    .hero-band .rating {
        left: 14px;
        bottom: -18px;
    }
}
/* ==========================================
   Masquer le carrousel et la carte avis sur mobile
   ========================================== */
@media (max-width: 768px) {
    .hero-band .media,
    .hero-band .hero-carousel,
    .hero-band .rating {
        display: none !important;
        visibility: hidden;
    }

    /* Pour éviter les espaces vides du grid */
    .hero-band .hero {
        grid-template-columns: 1fr;
        text-align: center;
        min-height: auto;
        padding: 32px 16px 56px;
    }

    /* Centrer le contenu du texte */
    .hero-band .text {
        justify-self: center;
    }

    .hero-band .actions {
        justify-content: center;
        flex-direction: column;
        gap: 14px;
    }

    .hero-band .btn {
        width: 100%;
        max-width: 260px;
        justify-content: center;
    }
}
/* === Correctif affichage du burger sur la page d'accueil === */
#topNav {
    z-index: 9999; /* S'assure qu'il passe au-dessus du hero diagonal */
}

/* Empêche le hero d'empiéter sous le header */
body.home .hero-band:first-of-type {
    margin-top: var(--nav-offset, 80px);
}

/* Ajuste la hauteur du header sur mobile (plus d'espace pour le burger) */
@media (max-width: 900px) {
    .mc-topbar {
        padding: 10px 0; /* un peu plus d’air en haut/bas */
    }

    .mc-burger {
        margin-right: 6px; /* évite qu’il colle au bord droit */
    }
}

.hero-carousel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px; /* espace entre les puces pour éviter les clics involontaires */
    margin-top: 1.2rem;
}

    .hero-carousel__dots .dot {
        width: 16px; /* taille visuelle de la puce */
        height: 16px;
        border-radius: 50%;
        background-color: rgba(255,255,255,0.6);
        border: none;
        cursor: pointer;
        position: relative;
    }

        /* ✅ Augmente la surface tactile sans changer le style visuel */
        .hero-carousel__dots .dot::before {
            content: "";
            position: absolute;
            top: -16px;
            left: -16px;
            width: 48px;
            height: 48px;
            background: transparent;
        }

        /* État actif */
        .hero-carousel__dots .dot.is-active {
            background-color: #007bff;
        }

        /* Focus clavier accessible */
        .hero-carousel__dots .dot:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 4px;
        }