/**
 * Visite virtuelle guidée : langage « réalisations 2026 »
 * (realisations-commercial-2026.css / hub projets-près-de-chez-vous) :
 * doré #b89759, crème #f6f1e8, papier #faf7f1, titres futura-pt géants
 * uppercase lh .96 avec em cormorant italique doré, labels ls 3-4px,
 * contrôles blancs bordure primaire qui s'inversent au survol.
 */

#visite-virtuelle {
    --vv-primary: #333230;
    /* DEUX dores, et ils ne sont pas interchangeables.
       --vv-gold sert aux FILETS, APLATS, pastilles d'etapes et survols, ou le
       contraste du texte ne s'applique pas, et au texte pose sur le fond sombre
       ou il donne 4,61:1.
       --vv-gold-text sert au TEXTE sur fond clair. L'or y tombe a 2,47:1 sur
       creme et 2,78:1 sur blanc : il echoue meme le seuil assoupli des grands
       textes, d'ou la citation illisible. Ce brun est deja l'accent de quatre
       feuilles de style du site (accessoires, contact, soumission, blogue) et
       donne 4,23:1 sur creme, 4,76:1 sur blanc. Ne pas l'utiliser sur le fond
       sombre : il y tomberait a 2,69:1, soit pire que l'or. */
    --vv-gold: #b89759;
    --vv-gold-text: #946955;
    --vv-cream: #f6f1e8;
    --vv-paper: #faf7f1;
    --vv-line: rgba(51, 50, 48, 0.14);
    --vv-body70: rgba(51, 50, 48, 0.78);
    /* 0,55 donnait 3,16:1 sur creme, sous le seuil. 0,72 monte a 4,97:1. */
    --vv-muted: rgba(51, 50, 48, 0.72);
    --vv-sans: futura-pt, sans-serif;
    /* Trois tailles de texte courant pour toute la page, et rien d'autre :
       lede pour les phrases d'introduction, corps pour la prose, petit pour
       les mentions. Ecrire une valeur en dur ici est un bogue. */
    --vv-lede: 19px;
    --vv-corps: 17px;
    --vv-petit: 13px;
    --vv-serif: cormorant-garamond, "Cormorant Garamond", serif;
    font-family: var(--vv-sans);
    color: var(--vv-primary);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

#visite-virtuelle *, #visite-virtuelle *::before, #visite-virtuelle *::after { box-sizing: border-box; }
#visite-virtuelle img { max-width: 100%; display: block; }

/* ============ HERO 50/50 : contenu / visite 360 ============ */
.vv-hero { position: relative; background: var(--vv-paper); overflow: hidden; }
.vv-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Essai D plafonne le heros au lieu de le coller a 100vh. On garde le
       plafond, releve de la hauteur du bandeau fixe du site (130px). */
    min-height: min(96vh, 940px);
}
.vv-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(190px, calc(8vh + 130px), 226px) clamp(36px, 5vw, 88px) clamp(56px, 8vh, 110px) clamp(20px, 4vw, 56px);
    max-width: 720px;
    margin-left: auto;
    width: 100%;
}
.vv-hero__title {
    font-weight: 500;
    font-size: clamp(48px, 5.2vw, 84px);
    line-height: 0.96;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin: 0 0 30px;
    color: var(--vv-primary);
}
.vv-hero__title em {
    font-family: var(--vv-serif);
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: -1px;
    color: var(--vv-gold-text);
}
.vv-hero__subtitle {
    font-size: var(--vv-lede);
    line-height: 1.55;
    font-weight: 400;
    margin: 0 0 34px;
    color: var(--vv-body70);
    max-width: 30em;
}
.vv-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0 0 40px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--vv-muted);
}
.vv-hero__meta span { display: flex; align-items: center; gap: 10px; }
.vv-hero__meta span::before {
    content: '';
    width: 5px; height: 5px;
    background: var(--vv-gold);
    border-radius: 50%;
}
.vv-hero__actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }

/* Contrôle 2026 : blanc bordure primaire, s'inverse au survol */
.vv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 34px;
    background: #fff;
    border: 1px solid var(--vv-primary);
    font-family: var(--vv-sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--vv-primary);
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
}
.vv-btn:hover { background: var(--vv-primary); color: #fff; }
.vv-btn[disabled] { opacity: 0.5; cursor: default; }
.vv-btn--solid { background: var(--vv-primary); color: #fff; }
.vv-btn--solid:hover { background: #1f1e1c; border-color: #1f1e1c; color: #fff; }
.vv-btn--gold { border-color: var(--vv-gold); color: var(--vv-gold); background: transparent; }
.vv-btn--gold:hover { background: var(--vv-gold); color: #fff; }
.vv-btn--block { width: 100%; }

.vv-hero__scroll {
    font-family: var(--vv-serif);
    font-style: italic;
    font-size: var(--vv-lede);
    color: var(--vv-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}
.vv-hero__scroll:hover { color: var(--vv-gold-text); }

/* Moitié droite : la visite 360 EST l'image du héros */
.vv-hero__tour { position: relative; background: var(--vv-primary); overflow: hidden; }
.vv-hero__tour iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* La vignette du 360 est en 16:9 dans un panneau plutot vertical : c'est la
   largeur qui se fait rogner, pas la hauteur. Centre horizontalement, on garde
   les luminaires et la grande table. */
.vv-hero__tour img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; opacity: 0.92; }
.vv-tour-fullscreen {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    padding: 11px 18px;
    background: rgba(28, 27, 25, 0.72);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: all 0.25s ease;
}
.vv-tour-fullscreen:hover { background: var(--vv-gold); border-color: var(--vv-gold); color: #fff; }
.vv-tour-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    cursor: pointer;
    border: 0;
    padding: 0;
    background-size: cover;
    background-position: center;
    font-family: var(--vv-sans);
}
.vv-tour-facade::before { content: ''; position: absolute; inset: 0; /* Le voile de l'essai D partait de 0.08 sur une photo sombre. La vignette du
       360 est claire : sans un palier au milieu, le bouton et son libelle blancs
       passent sur les luminaires et deviennent illisibles. */
    background: linear-gradient(180deg, rgba(36, 35, 31, 0.14), rgba(36, 35, 31, 0.42) 46%, rgba(36, 35, 31, 0.62)); transition: opacity 0.3s ease; }
.vv-tour-facade:hover::before { opacity: 0.8; }
.vv-tour-facade > * { position: relative; }
.vv-tour-play {
    width: 92px; height: 92px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(36, 35, 31, 0.3);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 20px;
    transition: all 0.25s ease;
}
.vv-tour-facade:hover .vv-tour-play { background: var(--vv-gold); border-color: var(--vv-gold); transform: scale(1.05); }
.vv-tour-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    /* Ombre plutot qu'un voile plus opaque : le libelle tombe sur les luminaires
       clairs de la vignette, et assombrir toute l'image pour trois mots serait
       payer trop cher la lisibilite. */
    text-shadow: 0 1px 14px rgba(36, 35, 31, 0.75), 0 0 3px rgba(36, 35, 31, 0.5);
}
.vv-tour-sub {
    font-family: var(--vv-serif);
    font-style: italic;
    font-size: 19px;
    color: rgba(255, 255, 255, 0.75);
}

/* ---- La scene : ce qui s'agrandit pour prendre tout l'ecran ----
   L'agrandissement se fait au clip-path et non au transform : un scale
   deformerait l'image et l'iframe pendant toute la course. Un inset() qui
   s'ouvre du rectangle du panneau vers le plein ecran donne le meme geste
   geometrique, sans une seule pixel de deformation. */
.vv-tour-stage { position: absolute; inset: 0; overflow: hidden; background: var(--vv-primary); }
.vv-tour-stage.is-open {
    position: fixed;
    inset: 0;
    /* au-dessus de l'en-tete fixe du site, qui plafonne a 200 */
    z-index: 99999;
    transition: clip-path 0.78s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Sortie : quatre chemins, pas un seul ----
   Le bouton porte le MOT « Fermer » et pas seulement une croix : sur telephone
   il n'y a pas de touche Echap, et une croix seule au-dessus d'une visite
   Matterport se confond avec les commandes de Matterport. */
.vv-tour-close {
    position: absolute;
    top: clamp(16px, 3vh, 28px);
    right: clamp(16px, 2vw, 28px);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 12px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(36, 35, 31, 0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--vv-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.35s ease 0.32s, transform 0.35s ease 0.32s, background 0.2s ease, border-color 0.2s ease;
}
.vv-tour-stage.is-open .vv-tour-close { opacity: 1; transform: none; }
.vv-tour-close:hover { background: var(--vv-gold); border-color: var(--vv-gold); }

.vv-tour-hint {
    position: absolute;
    left: 50%;
    bottom: clamp(18px, 4vh, 34px);
    z-index: 3;
    margin: 0;
    transform: translateX(-50%);
    padding: 9px 18px;
    border-radius: 999px;
    background: rgba(36, 35, 31, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.88);
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.vv-tour-stage.is-open .vv-tour-hint { opacity: 1; transition-delay: 0.5s; }
.vv-tour-stage.is-open .vv-tour-hint.is-faded { opacity: 0; transition-delay: 0s; }

/* Mouvement reduit : on garde la fonction, on retire la course. */
@media (prefers-reduced-motion: reduce) {
    .vv-tour-stage.is-open { transition: none; }
    .vv-tour-close, .vv-tour-hint { transition: opacity 0.2s ease; transform: none; }
}

/* ============ INTRO CITATION (pattern intro__quote) ============ */
.vv-quote { background: #fff; padding: clamp(72px, 10vh, 120px) 32px; text-align: center; }
.vv-quote__text {
    font-family: var(--vv-serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.25;
    letter-spacing: -0.3px;
    color: var(--vv-gold-text);
    max-width: 920px;
    margin: 0 auto;
}

/* ============ SECTION RÉSERVATION ============ */
.vv-booking { background: var(--vv-cream); border-top: 1px solid var(--vv-line); padding: 0 clamp(20px, 4vw, 56px); }
.vv-booking__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(36px, 5vw, 88px);
    padding: clamp(64px, 9vh, 110px) 0;
    align-items: start;
}
/* 150px = bandeau fixe 130px + respiration. Si le collant ne prend jamais,
   chercher un ancetre en overflow-x:hidden avant de toucher a cette valeur. */
.vv-booking__left { position: sticky; top: 150px; }
.vv-include { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vv-line); }
.vv-include li { display: flex; gap: 18px; padding: 17px 2px; border-bottom: 1px solid var(--vv-line); }
.vv-include .vv-num {
    font-family: var(--vv-serif);
    font-style: italic;
    font-size: 21px;
    color: var(--vv-gold-text);
    flex: none;
    width: 30px;
}
.vv-include b { display: block; font-weight: 500; font-size: 16.5px; letter-spacing: 0.3px; margin-bottom: 3px; }
.vv-include p { margin: 0; font-size: 15.5px; color: var(--vv-body70); }
.vv-booking__note {
    margin-top: 26px;
    padding: 20px 22px;
    background: rgba(184, 151, 89, 0.1);
    font-size: 15px;
    line-height: 1.6;
    color: var(--vv-body70);
}
.vv-booking__note b { font-weight: 500; color: var(--vv-primary); }
.vv-eyebrow {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--vv-gold-text);
    margin: 0 0 22px;
}
.vv-title {
    font-weight: 500;
    font-size: clamp(38px, 3.8vw, 58px);
    line-height: 0.98;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin: 0;
    color: var(--vv-primary);
}
.vv-title em {
    font-family: var(--vv-serif);
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: -1px;
    color: var(--vv-gold-text);
}
.vv-booking__sub {
    font-size: 18px;
    line-height: 1.6;
    color: var(--vv-body70);
    margin: 18px 0 30px;
    max-width: 28em;
}

.vv-card {
    max-width: 780px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--vv-primary);
    padding: 48px 52px 52px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* Fil d'étapes */
.vv-dots { display: flex; align-items: center; gap: 12px; }
.vv-dot-wrap { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; }
.vv-dot-wrap:last-child { flex: 0 0 auto; }
.vv-dot {
    width: 30px; height: 30px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    letter-spacing: 1px;
    border: 1px solid var(--vv-line);
    color: var(--vv-muted);
    background: transparent;
    transition: all 0.25s ease;
}
.vv-dot.is-done { border-color: var(--vv-gold); background: var(--vv-gold); color: #fff; }
.vv-dot-bar { flex: 1 1 auto; height: 1px; background: var(--vv-line); }
.vv-dot-bar.is-done { background: var(--vv-gold); }

.vv-step { display: flex; flex-direction: column; gap: 24px; }
.vv-step[hidden] { display: none; }
.vv-step-head { display: flex; flex-direction: column; gap: 8px; }
.vv-step-eyebrow {
    font-family: var(--vv-serif);
    font-style: italic;
    font-size: 22px;
    color: var(--vv-gold-text);
}
.vv-step-head h2 {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 24px;
    font-weight: 500;
    color: var(--vv-primary);
}
.vv-step-note { font-size: var(--vv-petit); color: var(--vv-muted); letter-spacing: 0.4px; }

.vv-field-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--vv-muted);
    margin: 0 0 12px;
}
/* L'essai D fait retomber les dates a la ligne. Le defilement horizontal
   d'avant coupait une pastille au bord maintenant que la carte occupe une
   colonne et non toute la largeur. */
.vv-dates { display: flex; gap: 10px; flex-wrap: wrap; }
.vv-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 0 12px;
    flex: 0 0 72px;
    border: 1px solid var(--vv-line);
    background: #fff;
    color: var(--vv-primary);
    cursor: pointer;
    font-family: var(--vv-sans);
    transition: all 0.25s ease;
}
.vv-date:hover { border-color: var(--vv-primary); }
.vv-date-dow { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; opacity: 0.78; }
.vv-date-day { font-size: 21px; font-weight: 500; }
.vv-date.is-active { border-color: var(--vv-primary); background: var(--vv-primary); color: #fff; }
.vv-times { display: flex; gap: 10px; flex-wrap: wrap; }
.vv-time {
    padding: 13px 18px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border: 1px solid var(--vv-line);
    background: #fff;
    color: var(--vv-primary);
    cursor: pointer;
    font-family: var(--vv-sans);
    transition: all 0.25s ease;
}
.vv-time:hover { border-color: var(--vv-primary); }
.vv-time.is-active { border-color: var(--vv-primary); background: var(--vv-primary); color: #fff; }
.vv-empty { font-size: var(--vv-petit); color: var(--vv-muted); }

.vv-fineprint { font-size: 13px; line-height: 1.6; color: var(--vv-muted); letter-spacing: 0.3px; }

.vv-slot-summary {
    background: var(--vv-paper);
    border: 1px solid var(--vv-line);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    letter-spacing: 0.4px;
}
.vv-slot-edit {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--vv-gold-text);
    cursor: pointer;
    background: none;
    border: 0;
    font-family: var(--vv-sans);
    padding: 0;
}
.vv-slot-edit:hover { color: var(--vv-primary); }

.vv-form { display: flex; flex-direction: column; gap: 12px; }
#visite-virtuelle .vv-form input,
#visite-virtuelle .vv-form select,
#visite-virtuelle .vv-form textarea {
    border: 1px solid var(--vv-line);
    background: #fff;
    padding: 15px 18px;
    font-size: 15px;
    color: var(--vv-primary);
    outline: none;
    font-family: var(--vv-sans);
    border-radius: 0;
    width: 100%;
    transition: border-color 0.2s ease;
}
#visite-virtuelle .vv-form input:focus,
#visite-virtuelle .vv-form select:focus,
#visite-virtuelle .vv-form textarea:focus { border-color: var(--vv-gold); }
#visite-virtuelle .vv-form textarea { min-height: 96px; resize: vertical; }
.vv-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.6;
    color: var(--vv-muted);
    cursor: pointer;
}
.vv-consent input { width: auto !important; margin-top: 3px; accent-color: #b89759; }
.vv-error { font-size: var(--vv-petit); color: #a13c2e; margin: 0; }
/* Pot de miel : hors écran, jamais display:none */
.vv-hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }

/* Fichiers joints (photos, croquis). Le televersement passe par le point
   d'entree de sunlouvre-form-tracker, comme tous les formulaires du site. */
.vv-files { display: flex; flex-direction: column; gap: 8px; }
.vv-files__pick { display: inline-flex; }
/* Prefixe #visite-virtuelle OBLIGATOIRE : la regle des champs du formulaire
   (#visite-virtuelle .vv-form input) est plus specifique et rendait a l'input
   sa largeur de 100 %, son padding et sa bordure. Combine au position:absolute
   ci-dessous, l'input invisible mesurait 1440 px et poussait la page a
   1822 px de large. */
#visite-virtuelle .vv-files__pick input[type="file"] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
    background: none;
}
.vv-files__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border: 1px solid var(--vv-primary);
    background: #fff;
    color: var(--vv-primary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}
.vv-files__btn::before { content: "+"; font-size: 16px; line-height: 1; }
.vv-files__pick:hover .vv-files__btn,
.vv-files__pick input[type="file"]:focus-visible + .vv-files__btn {
    background: var(--vv-primary);
    color: #fff;
}
.vv-files__hint { margin: 0; font-size: var(--vv-petit); line-height: 1.6; color: var(--vv-muted); }
.vv-files__list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vv-file {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px 14px;
    padding: 10px 12px;
    border: 1px solid var(--vv-line);
    background: var(--vv-paper);
    font-size: 13px;
}
.vv-file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vv-primary); }
.vv-file__size { color: var(--vv-muted); font-size: 12px; }
.vv-file__drop {
    grid-column: 2;
    border: 0;
    background: none;
    padding: 0;
    color: var(--vv-muted);
    font-family: var(--vv-sans);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
}
.vv-file__drop:hover { color: var(--vv-primary); }
.vv-file__bar { grid-column: 1 / -1; height: 2px; background: rgba(51, 50, 48, 0.14); }
.vv-file__bar i { display: block; height: 100%; width: 0; background: var(--vv-gold); transition: width 0.2s ease; }
.vv-file[data-state="ok"] .vv-file__bar { display: none; }
.vv-file[data-state="err"] { border-color: rgba(180, 35, 24, 0.4); }
.vv-file[data-state="err"] .vv-file__size { color: #b42318; }

.vv-check {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--vv-gold);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.vv-confirm-serif {
    font-family: var(--vv-serif);
    font-style: italic;
    font-size: 30px;
    color: var(--vv-gold-text);
}
.vv-confirm-when {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 21px;
    font-weight: 500;
}
.vv-confirm-text { font-size: 15px; line-height: 1.7; color: var(--vv-body70); }
.vv-protip {
    background: var(--vv-paper);
    border-left: 2px solid var(--vv-gold);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: var(--vv-petit);
    line-height: 1.65;
    color: var(--vv-body70);
}
.vv-protip-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--vv-gold-text);
}
.vv-restart {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--vv-gold-text);
    cursor: pointer;
    text-align: center;
    background: none;
    border: 0;
    font-family: var(--vv-sans);
}
.vv-restart:hover { color: var(--vv-primary); }

/* ============ TROIS CHOSES : rangees alternees ============ */
.vv-three { background: #fff; padding: 112px 32px; }
.vv-three__inner { max-width: 1280px; margin: 0 auto; }
.vv-three__head { max-width: 760px; margin: 0 0 clamp(40px, 6vh, 64px); }
.vv-three__head p { margin: 18px 0 0; max-width: 32em; font-size: var(--vv-lede); line-height: 1.6; color: var(--vv-body70); }
.vv-three-row {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
    padding: clamp(30px, 4vh, 44px) 0;
    border-top: 1px solid var(--vv-line);
}
.vv-three-row--flip .vv-three-media { order: 2; }
.vv-three-media { overflow: hidden; }
.vv-three-media img {
    width: 100%;
    height: clamp(220px, 26vw, 320px);
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.vv-three-row:hover .vv-three-media img { transform: scale(1.04); }
.vv-three-media--finis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
    height: clamp(220px, 26vw, 320px);
}
.vv-three-media--finis .vv-finis { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vv-three-media--finis .vv-finis i {
    flex: 1;
    display: block;
    border: 1px solid var(--vv-line);
    background:
        linear-gradient(168deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.16) 46%, rgba(255, 255, 255, 0) 60%),
        var(--vv-c);
}
.vv-three-media--finis .vv-finis b {
    font-weight: 500;
    font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--vv-muted); text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vv-three-k {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--vv-gold-text);
}
.vv-three-txt h3 {
    margin: 0 0 12px;
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--vv-primary);
}
.vv-three-txt p { margin: 0; max-width: 30em; font-size: var(--vv-corps); line-height: 1.7; color: var(--vv-body70); }

/* Demonstration des lames : defilement image par image de la video.
   Meme technique que les pages accessoires (sequence d'images dessinee dans
   un canvas) : le seek d'un <video> saccade selon le codec, pas une sequence.
   Tant que la sequence n'est pas livree, la rangee reste une simple photo
   et le curseur n'apparait pas. */
.vv-lames { display: flex; flex-direction: column; gap: 16px; }
.vv-lames__stage {
    position: relative;
    height: clamp(220px, 26vw, 320px);
    overflow: hidden;
    border: 1px solid var(--vv-line);
    background-color: var(--vv-cream);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.vv-lames__stage canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.vv-lames.is-ready .vv-lames__stage canvas { opacity: 1; }
.vv-lames__ctrl { display: none; align-items: center; gap: 16px; }
.vv-lames.is-ready .vv-lames__ctrl { display: flex; }
.vv-lames__lbl {
    flex: none;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--vv-muted);
}
.vv-lames__ctrl input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 2px;
    margin: 0;
    background: rgba(51, 50, 48, 0.25);
    cursor: pointer;
}
.vv-lames__ctrl input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    background: var(--vv-gold);
    border: 0;
    cursor: pointer;
}
.vv-lames__ctrl input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px;
    background: var(--vv-gold);
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

/* ============ EN LIGNE / EN PERSONNE (sombre) ============ */
.vv-dark {
    background: var(--vv-primary);
    padding: 0 clamp(20px, 4vw, 56px);
}
/* Trois colonnes depuis l'ajout de Gatineau : l'ecart de 110px etait calibre
   pour deux, il etranglait la troisieme. */
.vv-dark__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(40px, 4.4vw, 76px);
    padding: clamp(72px, 10vh, 120px) 0;
}
.vv-dark-col { display: flex; flex-direction: column; gap: 18px; }
.vv-dark-eyebrow {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--vv-gold);
}
.vv-dark h3 {
    margin: 0;
    font-family: var(--vv-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(28px, 2.6vw, 38px);
    color: #fff;
}
.vv-dark p { margin: 0; font-size: var(--vv-corps); line-height: 1.7; color: rgba(255, 255, 255, 0.72); }
.vv-dark .vv-btn {
    align-self: flex-start;
    margin-top: 10px;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}
.vv-dark .vv-btn:hover { background: #fff; border-color: #fff; color: var(--vv-primary); }
.vv-hours {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    color: #fff;
    letter-spacing: 0.4px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 8px;
}
/* Selecteur d'ENFANT DIRECT : le balisage est un span de rangee contenant deux
   spans (jour et heures). En descendant, les spans interieurs heritaient du
   filet et affichaient une deuxieme ligne courte, a la largeur du texte. */
.vv-hours > span {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 13px 2px;
}
.vv-hours > span > span:last-child { color: rgba(255, 255, 255, 0.72); }
.vv-dark-tel {
    align-self: flex-start;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #fff;
    text-decoration: none;
    margin-top: 8px;
}
.vv-dark-tel:hover { color: var(--vv-gold); }
.vv-dark-addr {
    font-style: normal;
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.78);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 14px;
    margin: 0;
}

/* Sous un bloc d'horaire (Gatineau), la ligne du haut ferait doublon avec
   la ligne du bas de l'horaire : on la retire. */
.vv-hours + .vv-dark-addr {
    border-top: 0;
    padding-top: 6px;
}

/* ============ FAQ ============ */
/* La MISE EN PAGE est propre a cette page : deux colonnes, titre et citation du
   conseiller a gauche, accordeon a droite. Les ITEMS, eux, viennent du gabarit
   .quote-faq de quote-form.css : ne rien redefinir de .quote-faq__* ici. */
.vv-faq { background: var(--vv-paper); padding: 112px 32px 120px; }
.vv-faq__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 96px;
    align-items: start;
}
.vv-faq-left { display: flex; flex-direction: column; gap: 40px; }
.vv-faq-left .vv-title { font-size: clamp(34px, 3.6vw, 54px); }
.vv-faq-rep { display: flex; gap: 20px; align-items: center; }
.vv-faq-rep-photo {
    flex: none;
    width: 80px; height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--vv-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--vv-serif);
    font-style: italic;
    font-size: 22px;
    letter-spacing: 1px;
}
.vv-faq-rep-photo img { width: 100%; height: 100%; object-fit: cover; }
.vv-faq-rep p {
    margin: 0;
    font-family: var(--vv-serif);
    font-style: italic;
    font-size: clamp(19px, 1.6vw, 22px);
    line-height: 1.5;
    color: var(--vv-body70);
}
/* L'accordeon emprunte vit ici dans une colonne, pas dans le conteneur de
   900 px du formulaire de soumission : le premier item garde son filet du haut. */
.vv-faq__inner .quote-faq__list > .quote-faq__item:first-child { border-top: 1px solid var(--quote-border, #d4d4d4); }
.vv-faq__inner .quote-faq__answer,
.vv-faq__inner .quote-faq__answer p { font-size: var(--vv-corps); line-height: 1.7; }

/* ============ Responsive ============ */
@media (max-width: 1100px) {
    .vv-hero__content { padding: 190px 40px 72px 40px; }
    .vv-hero__title { font-size: clamp(44px, 7vw, 64px); }
    /* Trois colonnes sombres tiennent mal sous 1100px : l'horaire de Granby
       cassait ses deux spans sur deux lignes. Deux colonnes, la troisieme passe
       dessous. */
    .vv-dark__inner { grid-template-columns: repeat(2, 1fr); gap: 48px clamp(40px, 5vw, 72px); }
}
@media (max-width: 900px) {
    .vv-hero__inner { grid-template-columns: 1fr; min-height: 0; }
    .vv-hero__content { padding: 170px 24px 56px; max-width: none; }
    .vv-hero__scroll-dir { display: none; }
    .vv-hero__tour { min-height: 420px; }
    .vv-dark__inner, .vv-faq__inner { grid-template-columns: 1fr; gap: 56px; }
    .vv-booking__inner { grid-template-columns: 1fr; gap: 44px; }
    /* Une colonne collante n'a plus rien a longer quand elle est empilee. */
    .vv-booking__left { position: static; }
    .vv-three-row { grid-template-columns: 1fr; gap: 28px; }
    .vv-three-row--flip .vv-three-media { order: 0; }
    .vv-card { padding: 34px 24px 40px; }
}
@media (max-width: 640px) {
    .vv-hero__content { padding: 150px 20px 48px; }
    .vv-hero__title { font-size: clamp(38px, 11vw, 48px); }
    .vv-quote { padding: 72px 20px 64px; }
    .vv-booking { padding: 0 20px; }
    .vv-booking__inner { padding: 72px 0 88px; }
    .vv-three { padding: 72px 20px; }
    .vv-dark { padding: 0 20px; }
    .vv-dark__inner { padding: 72px 0; }
    .vv-faq { padding: 72px 20px 88px; }
    .vv-hero__tour { min-height: 340px; }
    .vv-btn { padding: 16px 26px; font-size: 14px; }
}