/* ============================================================================
   Visite guidée interactive — ensemble du site public.
   Voir public/js/components/visite-guidee.js pour la logique.

   Fond légèrement flouté plutôt qu'un simple
   assombrissement plat, halo doux (pas un contour jaune criard) autour de
   l'élément mis en avant avec une seule pulsation à l'apparition (pas une
   animation continue — plus proche d'un « soft onboarding » que d'un
   surlignage agressif), barre de progression fine en tête de bulle, et
   un emplacement pour un clip vidéo optionnel par étape.
   ========================================================================== */

.visite-guidee {
    position: fixed;
    inset: 0;
    z-index: 100000; /* au-dessus du chatbot (99999) */
}

.visite-guidee__fond {
    position: absolute;
    inset: 0;
    background: rgba(9, 14, 24, .58);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
}

/* Découpe lumineuse autour de l'élément mis en avant — un box-shadow
   surdimensionné plutôt qu'un clip-path/SVG : plus simple, et le fond
   assombri (.visite-guidee__fond) reste dessous pour intercepter les clics
   en dehors, sans qu'il faille synchroniser deux formes. */
/* Avec une découpe, le fond ne fait plus qu'intercepter les clics : c'est la
   découpe qui porte le voile. Sinon le fond sombre et flouté passait SOUS la
   découpe et l'élément mis en avant apparaissait terne et flou. */
.visite-guidee--decoupe .visite-guidee__fond {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.visite-guidee__spot {
    position: fixed;
    border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(9, 14, 24, .58), 0 0 0 3px rgba(255, 255, 255, .9), 0 0 26px 4px rgba(30, 95, 142, .45);
    pointer-events: none;
    will-change: top, left, width, height;
}

/* Glissement uniquement lors d'un changement d'étape ; pendant un défilement,
   la découpe et la bulle suivent leur cible sans retard (voir suivreCible). */
.visite-guidee--transition .visite-guidee__spot {
    transition: top .45s cubic-bezier(.2,.8,.2,1), left .45s cubic-bezier(.2,.8,.2,1),
                width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1);
}

.visite-guidee__spot--pulse {
    animation: visite-guidee-respiration .9s ease-out;
}

/* Boutons flottants inutiles (et gênants) pendant la visite */
.visite-guidee-active .visite-guidee-bouton,
.visite-guidee-active .grecaptcha-badge {
    visibility: hidden !important;
}

@keyframes visite-guidee-respiration {
    0%   { box-shadow: 0 0 0 9999px rgba(9, 14, 24, .58), 0 0 0 3px rgba(255, 255, 255, 0), 0 0 0 0 rgba(30, 95, 142, 0); }
    35%  { box-shadow: 0 0 0 9999px rgba(9, 14, 24, .58), 0 0 0 3px rgba(255, 255, 255, .9), 0 0 34px 10px rgba(30, 95, 142, .55); }
    100% { box-shadow: 0 0 0 9999px rgba(9, 14, 24, .58), 0 0 0 3px rgba(255, 255, 255, .9), 0 0 26px 4px rgba(30, 95, 142, .45); }
}

.visite-guidee__bulle {
    position: fixed;
    width: min(380px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(9, 14, 24, .32), 0 4px 14px rgba(9, 14, 24, .12);
    padding: 22px 24px 20px;
    outline: none;
    animation: visite-guidee-apparition .25s ease-out;
}

.visite-guidee--transition .visite-guidee__bulle {
    transition: top .4s cubic-bezier(.2,.8,.2,1), left .4s cubic-bezier(.2,.8,.2,1), width .2s ease;
}

.visite-guidee__agrandir-tel { display: none; }

@keyframes visite-guidee-montee {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

/* Une étape avec clip vidéo obtient une
   bulle nettement plus large, pour que le détail démontré (champ de
   formulaire, filtre, carte...) reste lisible. Classe posée par le JS
   (afficherMedia) uniquement quand l'étape courante a une vidéo. */
.visite-guidee__bulle--avec-video {
    /* Toutes les vidéos sont désormais
       enregistrées au même format, 1280x800 (16:10). La bulle a donc une
       largeur FIXE d'une étape à l'autre — la vidéo ne « saute » plus — et
       se réduit sur un petit écran pour que vidéo + texte + boutons tiennent
       toujours en hauteur (≈ 300px réservés au texte et aux boutons). */
    width: min(680px, calc(100vw - 32px), calc((100vh - 300px) * 1.6 + 48px));
}

/* ── Barre de progression ── */
.visite-guidee__progression {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #EEF1F6;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
}
.visite-guidee__progression-remplie {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #1e5f8e, #006A4E);
    transition: width .35s cubic-bezier(.2,.8,.2,1);
}

.visite-guidee__fermer {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: #8891A3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.visite-guidee__fermer:hover { background: #F1F2F5; color: #10233F; }
.visite-guidee__fermer svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ── Média (clip vidéo optionnel par étape) ──
   Muet, en boucle, sans contrôles : une simple démonstration visuelle
   d'ambiance, jamais un vrai lecteur à piloter. */
.visite-guidee__media {
    position: relative;
    margin: 6px 0 14px;
    border-radius: 12px;
    overflow: hidden;
    /* Fond visible pendant le chargement de la vidéo (pas de cadre blanc vide). */
    background: linear-gradient(135deg, #EEF2F7, #E3E9F1);
    border: 1px solid #E3E8EF;
    box-shadow: 0 6px 18px rgba(16, 35, 63, .10);
    /* Même format que les vidéos (1280x800) : aucune bande vide. */
    aspect-ratio: 16 / 10;
}
.visite-guidee__media video {
    width: 100%;
    height: 100%;
    /* Les vidéos ont exactement le ratio du cadre : rien n'est rogné. */
    object-fit: contain;
    display: block;
}

/* Bouton « Agrandir » — ouvre la vidéo en grand (voir __loupe). */
.visite-guidee__agrandir {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 999px;
    padding: 7px 12px 7px 10px;
    background: rgba(16, 35, 63, .78);
    color: #fff;
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    opacity: .9;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity .15s ease, background .15s ease, transform .15s ease;
}
.visite-guidee__agrandir:hover,
.visite-guidee__agrandir:focus-visible { opacity: 1; background: rgba(16, 35, 63, .92); transform: translateY(-1px); }
.visite-guidee__agrandir svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Vue agrandie : la vidéo au plus grand possible, toujours en 16:10. */
.visite-guidee__loupe {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(9, 14, 24, .86);
    animation: visite-guidee-apparition .2s ease-out;
    cursor: zoom-out;
}
.visite-guidee__loupe video {
    width: min(1280px, 100%, calc((100vh - 48px) * 1.6));
    /* height:auto obligatoire : sans lui, l'attribut height="800" de la
       balise l'emporte sur aspect-ratio et la vidéo déborde de l'écran. */
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    background: #0d1626;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.visite-guidee__loupe-fermer {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.visite-guidee__loupe-fermer:hover { background: rgba(255, 255, 255, .26); }
.visite-guidee__loupe-fermer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

@keyframes visite-guidee-apparition { from { opacity: 0; } to { opacity: 1; } }

.visite-guidee__etape {
    margin: 10px 0 8px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8891A3;
}

.visite-guidee__titre {
    margin: 0 0 10px;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color: #10233F;
    padding-right: 20px;
}

.visite-guidee__texte {
    margin: 0 0 20px;
    font-size: .92rem;
    line-height: 1.6;
    color: #45506B;
}

.visite-guidee__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.visite-guidee__lien {
    border: none;
    background: none;
    padding: 0;
    font-size: .82rem;
    color: #8891A3;
    text-decoration: underline;
    cursor: pointer;
}
.visite-guidee__lien:hover { color: #10233F; }

.visite-guidee__nav {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.visite-guidee__bouton {
    border: none;
    border-radius: 10px;
    padding: 9px 18px;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease, background .15s ease;
}
.visite-guidee__bouton:active { transform: scale(.97); }
.visite-guidee__bouton:disabled { opacity: .35; cursor: default; }

.visite-guidee__bouton--secondaire {
    background: #F1F2F5;
    color: #10233F;
}
.visite-guidee__bouton--secondaire:not(:disabled):hover { background: #E5E7EC; }

.visite-guidee__bouton--principal {
    background: linear-gradient(135deg, #16305A, #10233F);
    color: #ffffff;
}
.visite-guidee__bouton--principal:hover { background: #0d1c33; }

@media (prefers-reduced-motion: reduce) {
    .visite-guidee__spot,
    .visite-guidee__loupe,
    .visite-guidee__bulle,
    .visite-guidee--transition .visite-guidee__spot,
    .visite-guidee--transition .visite-guidee__bulle {
        transition: none !important;
        animation: none !important;
    }
}

/* ── Bouton flottant de relance ── */
.visite-guidee-bouton {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 9990;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #10233F;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 11px 18px 11px 14px;
    font-size: .84rem;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(16, 35, 63, .28);
    cursor: pointer;
    /* bottom : animé quand le bandeau cookies apparaît/disparaît (voir JS). */
    transition: transform .15s ease, background .2s ease, bottom .3s ease;
}
.visite-guidee-bouton:hover { background: #16305A; transform: translateY(-1px); }
.visite-guidee-bouton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 576px) {
    .visite-guidee-bouton span { display: none; }
    .visite-guidee-bouton { padding: 12px; }
}

/* ── Téléphone : panneau ancré en bas, vidéo remplacée par un bouton ──
   La bulle flottante recouvrait tout l'écran (texte + vidéo) et masquait
   l'élément qu'elle était censée montrer. */
@media (max-width: 575.98px) {
    .visite-guidee__bulle,
    .visite-guidee__bulle--avec-video {
        top: auto !important;
        left: 10px !important;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-height: 58vh;
        padding: 18px 18px 16px;
        border-radius: 16px;
        animation: visite-guidee-montee .3s cubic-bezier(.2,.8,.2,1);
    }

    .visite-guidee__titre { font-size: 1.05rem; }
    .visite-guidee__texte { font-size: .9rem; margin-bottom: 14px; }

    .visite-guidee__media {
        aspect-ratio: auto;
        background: none;
        border: none;
        box-shadow: none;
        margin: 0 0 14px;
        overflow: visible;
    }

    .visite-guidee__media video { display: none; }

    .visite-guidee__agrandir {
        position: static;
        width: 100%;
        justify-content: center;
        padding: 11px 14px;
        font-size: .85rem;
        background: #EEF3F8;
        color: #1e5f8e;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .visite-guidee__agrandir:hover,
    .visite-guidee__agrandir:focus-visible { background: #E2EBF4; }

    .visite-guidee__agrandir-ordi { display: none; }
    .visite-guidee__agrandir-tel { display: inline; }

    .visite-guidee__bouton { padding: 11px 18px; }
}