/* ==========================================================================
   Vides Greniers - Custom styles
   Surcharge le thème Cleanon pour l'adapter au service de vide-maison/débarras
   Inspiration formulaire : leegmakenwoning.be
   ========================================================================== */

:root {
    /* Couleurs du thème Cleanon (index5) */
    --vg-primary: #0b7058;          /* vert principal */
    --vg-primary-dark: #0e3026;     /* vert très foncé (overlay slider) */
    --vg-primary-deep: #10362f;     /* vert profond (gradient overlay) */
    --vg-base: #f1ab21;             /* orange/doré accent (CTA, étoiles) */
    --vg-base-rgb: 241, 171, 33;
    --vg-secondary: #f1ab21;
    --vg-success: #0b7058;
    --vg-dark: #0e3026;
    --vg-text: #4a5b73;
    --vg-muted: #7c8aa1;
    --vg-light: #f7f4f1;            /* beige clair fond doux */
    --vg-border: #e6e0d8;
}

/* ==========================================================================
   Photos réelles dans les sections du thème
   ========================================================================== */

/* About Five - les images en cercle doivent être recadrées proprement */
.about-five__img img,
.about-five__img-2 img,
.about-five__img-3 img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Galerie projets - aspect carré et hover scale */
.project-five__single-img img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .8s ease;
}

.project-five__single:hover .project-five__single-img img {
    transform: scale(1.06);
}

/* Process one - les fonds image circulaires */
.process-one__icon-bg {
    background-size: cover;
    background-position: center;
    filter: brightness(0.85);
}

/* ==========================================================================
   Animations 2026 - finitions
   ========================================================================== */

/* Smooth scroll natif */
html { scroll-behavior: smooth; }

/* Apparition au scroll - éléments avec data-vg-animate */
[data-vg-animate] {
    opacity: 0;
    transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
}

[data-vg-animate="fade-up"]    { transform: translateY(50px); }
[data-vg-animate="fade-down"]  { transform: translateY(-50px); }
[data-vg-animate="fade-left"]  { transform: translateX(50px); }
[data-vg-animate="fade-right"] { transform: translateX(-50px); }
[data-vg-animate="zoom-in"]    { transform: scale(0.9); }
[data-vg-animate="zoom-out"]   { transform: scale(1.1); }

[data-vg-animate].is-visible {
    opacity: 1;
    transform: none;
}

/* Délais cascadés pour des effets en série */
[data-vg-delay="100"] { transition-delay: 100ms; }
[data-vg-delay="200"] { transition-delay: 200ms; }
[data-vg-delay="300"] { transition-delay: 300ms; }
[data-vg-delay="400"] { transition-delay: 400ms; }
[data-vg-delay="500"] { transition-delay: 500ms; }
[data-vg-delay="600"] { transition-delay: 600ms; }

/* Glassmorphism sur le wizard hero */
.vg-hero-form::before {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Hover effet sur les cartes offres - glow subtil */
.vg-offer { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; }

.vg-offer:hover .vg-offer__icon {
    transform: rotate(-6deg) scale(1.05);
}
.vg-offer__icon { transition: transform .35s cubic-bezier(.2,.8,.2,1); }

/* Cartes de villes - hover plus moderne */
.vg-region {
    transition: all .3s cubic-bezier(.2,.8,.2,1);
}

/* Bouton CTA - effet ripple subtil */
.thm-btn { position: relative; overflow: hidden; }

/* Témoignages avec gradient subtil au hover */
.vg-testimonial {
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
    background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
}

.vg-testimonial:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px -22px rgba(11, 112, 88, 0.4);
}

/* Ligne séparatrice décorative */
.vg-section-divider {
    height: 80px;
    background: linear-gradient(180deg, var(--vg-light) 0%, #fff 100%);
}

/* Compteur stylisé (pour about-five__project-count) - amélioration */
.about-five__project-count h4.odometer {
    color: var(--vg-base) !important;
    font-weight: 800 !important;
}

/* Section title - plus de respiration */
.section-title__title {
    line-height: 1.15 !important;
}

/* Hover effet sur les régions et services */
.vg-offer:hover {
    border-color: rgba(11, 112, 88, 0.3) !important;
    box-shadow: 0 22px 50px -22px rgba(11, 112, 88, 0.45) !important;
}

/* Footer - liens animés */
footer ul.list-unstyled li a {
    position: relative;
    transition: color .25s ease, padding-left .25s ease;
}

footer ul.list-unstyled li a:hover {
    color: #f1ab21 !important;
    padding-left: 8px;
}

/* Wizard - effet focus moderne sur les inputs */
.vg-field input:focus,
.vg-field select:focus,
.vg-field textarea:focus {
    box-shadow: 0 0 0 4px rgba(11, 112, 88, 0.15) !important;
}

/* Page banner - effet parallax léger */
.vg-page-banner {
    background-size: cover;
    background-attachment: fixed;
}

@media (max-width: 991px) {
    .vg-page-banner { background-attachment: scroll; }
}

/* ==========================================================================
   Page tarifs - tableaux pricing
   ========================================================================== */
.vg-pricing-block {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 8px 28px -16px rgba(14, 48, 38, 0.18);
    border: 1px solid var(--vg-border);
    overflow: hidden;
}
.vg-pricing-block__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--vg-border);
}
.vg-pricing-block__icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--vg-primary), #15916f);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}
.vg-pricing-block__head h2 { color: var(--vg-dark); margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.vg-pricing-block__head p { color: var(--vg-muted); margin: 0; font-size: 14px; }

.vg-pricing-table {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--vg-border);
}
.vg-pricing-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 0;
    border-bottom: 1px solid var(--vg-border);
    transition: background .15s;
}
.vg-pricing-row:last-child { border-bottom: 0; }
.vg-pricing-row:not(.vg-pricing-row--head):hover { background: var(--vg-light); }
.vg-pricing-row > div {
    padding: 14px 18px;
    color: var(--vg-text);
    font-size: 14px;
    border-right: 1px solid var(--vg-border);
}
.vg-pricing-row > div:last-child { border-right: 0; }
.vg-pricing-row--head {
    background: var(--vg-light);
    font-weight: 700;
    color: var(--vg-dark);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

@media (max-width: 767px) {
    .vg-pricing-block__head { grid-template-columns: auto 1fr; }
    .vg-pricing-block__head a { grid-column: 1 / -1; justify-self: start; }
    .vg-pricing-row { grid-template-columns: 1fr 1fr; font-size: 13px; }
    .vg-pricing-row > div { padding: 10px 12px; }
    .vg-pricing-row > div:nth-child(3),
    .vg-pricing-row > div:nth-child(4) { border-top: 1px solid var(--vg-border); }
}

.vg-extra-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 14px -8px rgba(14,48,38,.15);
    transition: transform .25s, box-shadow .25s;
    height: 100%;
}
.vg-extra-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px -16px rgba(11,112,88,.4);
}
.vg-extra-card i {
    font-size: 26px;
    color: var(--vg-primary);
    margin-bottom: 10px;
    display: block;
}
.vg-extra-card strong { display: block; color: var(--vg-dark); font-size: 14px; margin-bottom: 6px; line-height: 1.3; }
.vg-extra-card span { color: var(--vg-base); font-weight: 700; font-size: 16px; }

/* ==========================================================================
   Newsletter (bandeau footer)
   ========================================================================== */
.vg-newsletter {
    padding: 50px 0;
    background: linear-gradient(135deg, var(--vg-base) 0%, #ffc14d 100%);
    color: var(--vg-dark);
}
.vg-newsletter__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
}
.vg-newsletter__text { display: flex; align-items: center; gap: 18px; }
.vg-newsletter__icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: rgba(14,48,38,.1);
    color: var(--vg-dark);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}
.vg-newsletter__text h3 { color: var(--vg-dark); font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.vg-newsletter__text p { margin: 0; color: var(--vg-dark); opacity: .85; font-size: 14px; }

.vg-newsletter__form { position: relative; min-width: 360px; }
.vg-newsletter__form input[type="email"] {
    width: 100%;
    padding: 16px 60px 16px 22px;
    border: 0;
    border-radius: 50px;
    background: #fff;
    font-size: 15px;
    color: var(--vg-dark);
    box-shadow: 0 14px 30px -12px rgba(14,48,38,.3);
    font-family: inherit;
}
.vg-newsletter__form input[type="email"]:focus {
    outline: 0;
    box-shadow: 0 14px 30px -12px rgba(14,48,38,.4), 0 0 0 4px rgba(11,112,88,.25);
}
.vg-newsletter__form button {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--vg-primary);
    color: #fff;
    border: 0;
    cursor: pointer;
    transition: transform .2s, background .2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vg-newsletter__form button:hover { background: var(--vg-primary-dark); transform: translateY(-50%) scale(1.05); }
.vg-newsletter__form button:disabled { opacity: .6; cursor: not-allowed; transform: translateY(-50%); }

.vg-newsletter__msg {
    position: absolute;
    top: 100%;
    left: 22px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .vg-newsletter__inner { grid-template-columns: 1fr; text-align: center; }
    .vg-newsletter__text { flex-direction: column; gap: 12px; }
    .vg-newsletter__form { min-width: 0; width: 100%; }
}

/* ==========================================================================
   Galerie photos
   ========================================================================== */
.vg-gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 36px;
}
.vg-gallery-filter {
    background: #fff;
    border: 1.5px solid var(--vg-border);
    color: var(--vg-text);
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}
.vg-gallery-filter:hover { border-color: var(--vg-primary); color: var(--vg-primary); }
.vg-gallery-filter.is-active {
    background: var(--vg-primary);
    border-color: var(--vg-primary);
    color: #fff;
    box-shadow: 0 10px 22px -10px var(--vg-primary);
}

.vg-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    grid-auto-rows: 220px;
}

.vg-gallery-item {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .3s ease, box-shadow .3s ease;
    grid-row: span 1;
}

.vg-gallery-item:nth-child(7n+1)  { grid-row: span 2; }
.vg-gallery-item:nth-child(11n+5) { grid-row: span 2; }

.vg-gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}

.vg-gallery-item:hover img { transform: scale(1.08); }
.vg-gallery-item:hover { box-shadow: 0 22px 50px -22px rgba(11,112,88,.5); transform: translateY(-3px); }

.vg-gallery-item__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(14,48,38,.92) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px;
    color: #fff;
    opacity: 0;
    transition: opacity .3s;
}
.vg-gallery-item:hover .vg-gallery-item__overlay { opacity: 1; }

.vg-gallery-item__cat {
    background: var(--vg-base);
    color: var(--vg-dark);
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.vg-gallery-item__overlay h3 {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 4px;
}
.vg-gallery-item__loc {
    font-size: 13px;
    opacity: .9;
}
.vg-gallery-item__loc i { color: var(--vg-base); margin-right: 4px; }

.vg-gallery-item__zoom {
    position: absolute;
    top: 14px; right: 14px;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    backdrop-filter: blur(8px);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: scale(.7);
    transition: all .25s;
}
.vg-gallery-item:hover .vg-gallery-item__zoom { opacity: 1; transform: scale(1); }

@media (max-width: 575px) {
    .vg-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
    .vg-gallery-filter { font-size: 12px; padding: 8px 14px; }
}

/* ==========================================================================
   Timeline (page À propos)
   ========================================================================== */
.vg-timeline { position: relative; padding-left: 60px; }
.vg-timeline::before {
    content: "";
    position: absolute;
    left: 24px; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--vg-primary), var(--vg-base));
}
.vg-timeline__item { position: relative; padding-bottom: 30px; }
.vg-timeline__item:last-child { padding-bottom: 0; }

.vg-timeline__year {
    position: absolute;
    left: -60px;
    top: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vg-primary), #15916f);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 10px 22px -10px var(--vg-primary);
}

.vg-timeline__content {
    background: var(--vg-light);
    padding: 22px 26px;
    border-radius: 14px;
    border-left: 4px solid var(--vg-primary);
}
.vg-timeline__content h3 { color: var(--vg-dark); font-size: 20px; margin: 0 0 8px; font-weight: 700; }
.vg-timeline__content p { color: var(--vg-text); margin: 0; line-height: 1.7; font-size: 15px; }

/* ==========================================================================
   Cartes équipe
   ========================================================================== */
.vg-team-card {
    background: #fff;
    padding: 28px 24px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 8px 24px -16px rgba(14,48,38,0.18);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
    height: 100%;
}
.vg-team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px -22px rgba(11, 112, 88, 0.35);
}
.vg-team-card__avatar {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vg-primary), #15916f);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 18px;
}
.vg-team-card h3 { color: var(--vg-dark); font-size: 18px; margin: 0 0 4px; font-weight: 700; }
.vg-team-card__role {
    color: var(--vg-primary);
    font-size: 13px;
    font-weight: 600;
    display: block;
    margin-bottom: 12px;
}
.vg-team-card p { color: var(--vg-text); font-size: 14px; line-height: 1.6; margin: 0; }

/* ==========================================================================
   Page 404
   ========================================================================== */
.vg-404 { padding: 100px 0 80px; background: var(--vg-light); }
.vg-404__num {
    font-size: 140px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #0b7058, #f1ab21);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 14px;
    text-shadow: 0 30px 60px rgba(11, 112, 88, 0.2);
}
.vg-404 h1 { color: var(--vg-dark); font-size: 36px; margin-bottom: 14px; font-weight: 700; }
.vg-404 p { color: var(--vg-text); font-size: 17px; line-height: 1.6; max-width: 560px; margin-bottom: 28px; }
.vg-404__links { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.vg-404__suggestions h3 { font-size: 16px; color: var(--vg-dark); margin-bottom: 14px; font-weight: 600; }
.vg-404__suggestions ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vg-404__suggestions a { color: var(--vg-text); text-decoration: none; padding: 10px 14px; border-radius: 10px; background: #fff; display: flex; align-items: center; gap: 10px; transition: all .2s; font-size: 14px; }
.vg-404__suggestions a:hover { background: var(--vg-primary); color: #fff; }
.vg-404__suggestions a i { color: var(--vg-primary); transition: color .2s; }
.vg-404__suggestions a:hover i { color: #fff; }
@media (max-width: 575px) {
    .vg-404__num { font-size: 96px; }
    .vg-404 h1 { font-size: 28px; }
    .vg-404__suggestions ul { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Blog - cards et article
   ========================================================================== */
.vg-blog-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 28px -16px rgba(14, 48, 38, 0.18);
    height: 100%;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
    border: 1px solid transparent;
}

.vg-blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px -22px rgba(11, 112, 88, 0.35);
    border-color: rgba(11, 112, 88, 0.2);
}

.vg-blog-card__img {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.vg-blog-card.is-featured .vg-blog-card__img { aspect-ratio: 21 / 9; }

.vg-blog-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}

.vg-blog-card:hover .vg-blog-card__img img { transform: scale(1.06); }

.vg-blog-card__cat {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--vg-base);
    color: var(--vg-dark);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vg-blog-card__body { padding: 24px; }

.vg-blog-card__meta {
    color: var(--vg-muted);
    font-size: 12px;
    margin-bottom: 12px;
}

.vg-blog-card__meta i { color: var(--vg-primary); }

.vg-blog-card__title {
    font-size: 19px;
    font-weight: 700;
    color: var(--vg-dark);
    line-height: 1.3;
    margin: 0 0 12px;
}
.vg-blog-card.is-featured .vg-blog-card__title { font-size: 26px; }

.vg-blog-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}
.vg-blog-card__title a:hover { color: var(--vg-primary); }

.vg-blog-card__excerpt {
    color: var(--vg-text);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 14px;
}

.vg-blog-card__more {
    color: var(--vg-primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .2s;
}
.vg-blog-card__more:hover { gap: 12px; color: var(--vg-primary-dark); }

/* Article body - style typographique riche */
.vg-article-body {
    font-size: 16px;
    line-height: 1.8;
    color: var(--vg-text);
}

.vg-article-body h2 {
    color: var(--vg-dark);
    font-size: 28px;
    font-weight: 700;
    margin: 36px 0 16px;
    line-height: 1.25;
}

.vg-article-body h3 {
    color: var(--vg-dark);
    font-size: 21px;
    font-weight: 700;
    margin: 28px 0 12px;
    line-height: 1.3;
}

.vg-article-body p { margin: 0 0 18px; }
.vg-article-body p.lead {
    font-size: 18px;
    color: var(--vg-dark);
    font-weight: 500;
    border-left: 4px solid var(--vg-primary);
    padding: 14px 22px;
    background: var(--vg-light);
    border-radius: 0 12px 12px 0;
    margin-bottom: 28px;
}

.vg-article-body ul,
.vg-article-body ol {
    margin: 0 0 22px;
    padding-left: 24px;
}

.vg-article-body li { margin-bottom: 8px; }

.vg-article-body a {
    color: var(--vg-primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(11,112,88,.3);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s;
}
.vg-article-body a:hover { text-decoration-color: var(--vg-primary); }

.vg-article-body strong { color: var(--vg-dark); }

.vg-share-btn {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--vg-light);
    color: var(--vg-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all .2s;
    font-size: 15px;
}
.vg-share-btn:hover {
    background: var(--vg-primary);
    color: #fff;
    transform: translateY(-2px);
}

/* ==========================================================================
   Cookie banner RGPD
   ========================================================================== */
.vg-cookie {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
    padding: 16px;
}
.vg-cookie.is-shown { transform: translateY(0); }

.vg-cookie__inner {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 30px 80px -20px rgba(14,48,38,.45);
    border: 1px solid #e6e0d8;
    overflow: hidden;
}

.vg-cookie__main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    padding: 22px 26px;
    align-items: center;
}

.vg-cookie__icon {
    width: 54px; height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f1ab21, #ffc14d);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px; color: #fff;
}

.vg-cookie__content h4 {
    margin: 0 0 4px;
    font-size: 17px;
    color: #0e3026;
    font-weight: 700;
}
.vg-cookie__content p {
    margin: 0;
    font-size: 14px;
    color: #4a5b73;
    line-height: 1.5;
}
.vg-cookie__content a { color: #0b7058; font-weight: 600; }

.vg-cookie__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.vg-cookie__custom { padding: 26px; }
.vg-cookie__custom h4 {
    color: #0e3026;
    margin: 0 0 18px;
    font-size: 18px;
}

.vg-cookie__category {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 0;
    border-top: 1px solid #f0ece5;
}
.vg-cookie__category:first-of-type { border-top: 0; }

.vg-cookie__category > div { flex: 1; }
.vg-cookie__category strong { color: #0e3026; display: block; margin-bottom: 4px; font-size: 14px; }
.vg-cookie__category p { color: #7c8aa1; font-size: 13px; margin: 0; }

.vg-cookie__switch {
    position: relative;
    display: inline-block;
    width: 46px; height: 26px;
    flex-shrink: 0;
}
.vg-cookie__switch input { opacity: 0; width: 0; height: 0; }
.vg-cookie__switch span {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #d9d2c5;
    border-radius: 26px;
    transition: .25s;
}
.vg-cookie__switch span::before {
    content: "";
    position: absolute;
    height: 20px; width: 20px;
    left: 3px; top: 3px;
    background: white;
    border-radius: 50%;
    transition: .25s;
}
.vg-cookie__switch input:checked + span { background: #0b7058; }
.vg-cookie__switch input:checked + span::before { transform: translateX(20px); }
.vg-cookie__switch.is-locked span { opacity: 0.7; cursor: not-allowed; }

.vg-cookie__custom-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #f0ece5;
}

.vg-cookie-reopen {
    position: fixed;
    bottom: 20px; left: 20px;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e6e0d8;
    box-shadow: 0 14px 30px -12px rgba(14,48,38,.3);
    display: inline-flex; align-items: center; justify-content: center;
    color: #f1ab21;
    font-size: 18px;
    z-index: 9998;
    transition: transform .2s;
    text-decoration: none;
}
.vg-cookie-reopen:hover { transform: scale(1.08); color: #f1ab21; }

@media (max-width: 767px) {
    .vg-cookie__main {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px;
    }
    .vg-cookie__icon { width: 44px; height: 44px; font-size: 22px; }
    .vg-cookie__actions { justify-content: stretch; }
    .vg-cookie__actions .vg-btn { flex: 1; justify-content: center; padding: 12px 14px; font-size: 13px; }
}

/* ==========================================================================
   Section Stats - compteurs animés
   ========================================================================== */
.vg-stats {
    padding: 80px 0;
    background: linear-gradient(135deg, #0b7058 0%, #10362f 100%);
    position: relative;
    overflow: hidden;
    color: #fff;
}

.vg-stats::before {
    content: "";
    position: absolute;
    top: -50%; right: -10%;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(241, 171, 33, 0.15) 0%, transparent 70%);
}

.vg-stats::after {
    content: "";
    position: absolute;
    bottom: -50%; left: -10%;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
}

.vg-stats .container { position: relative; z-index: 2; }

.vg-stat__num {
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    color: #f1ab21;
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
}

.vg-stat__label {
    font-size: 15px;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
    letter-spacing: 0.5px;
}

@media (max-width: 575px) {
    .vg-stat__num { font-size: 40px; }
    .vg-stat__label { font-size: 13px; }
}

/* ==========================================================================
   Sliding text - amélioration visuelle
   ========================================================================== */

.sliding-text { background: var(--vg-dark); padding: 30px 0; }

.sliding-text__list p {
    color: rgba(255,255,255,0.95) !important;
}

.sliding-text--vg-pills {
    background:
        radial-gradient(circle at 20% 50%, rgba(241,171,33,0.12), transparent 30%),
        linear-gradient(90deg, #0d2f26 0%, #10362f 100%);
    padding: 18px 0;
    overflow: hidden;
}

.vg-ticker {
    overflow: hidden;
    width: 100%;
}

.vg-ticker__track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: vgTickerSlide 18s linear infinite;
}

.vg-ticker:hover .vg-ticker__track {
    animation-play-state: paused;
}

.vg-ticker__group {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
    padding-right: 18px;
}

.vg-ticker__pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 30px -20px rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
    animation: vgTickerFloat 3.6s ease-in-out infinite;
}

.vg-ticker__group .vg-ticker__pill:nth-child(2) {
    animation-delay: .6s;
}

.vg-ticker__group .vg-ticker__pill:nth-child(3) {
    animation-delay: 1.2s;
}

.vg-ticker__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--vg-base-rgb), 0.18);
    color: var(--vg-base);
    font-size: 13px;
    flex-shrink: 0;
}

.vg-ticker__text {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .01em;
    font-family: "Poppins", sans-serif;
    color: #fff;
}

@keyframes vgTickerFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes vgTickerSlide {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 767px) {
    .sliding-text--vg-pills {
        padding: 14px 0;
    }

    .vg-ticker__group {
        gap: 12px;
        padding-right: 12px;
    }

    .vg-ticker__pill {
        padding: 8px 14px;
    }

    .vg-ticker__text {
        font-size: 14px;
    }

    .vg-ticker__icon {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
}

.vg-phone-float {
    position: fixed;
    right: 24px;
    bottom: 112px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0b7058 0%, #15916f 100%);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 18px 35px -18px rgba(11, 112, 88, 0.75);
    z-index: 999;
    transition: transform .25s ease, box-shadow .25s ease;
    animation: vgPhonePulse 1.9s ease-out infinite;
}

.vg-phone-float:hover {
    color: #fff;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 24px 40px -18px rgba(11, 112, 88, 0.85);
}

@keyframes vgPhonePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(11, 112, 88, 0.42), 0 18px 35px -18px rgba(11, 112, 88, 0.75);
    }
    70% {
        box-shadow: 0 0 0 16px rgba(11, 112, 88, 0), 0 18px 35px -18px rgba(11, 112, 88, 0.75);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(11, 112, 88, 0), 0 18px 35px -18px rgba(11, 112, 88, 0.75);
    }
}

@media (max-width: 767px) {
    .vg-phone-float {
        width: 56px;
        height: 56px;
        right: 16px;
        bottom: 96px;
        font-size: 21px;
    }
}

/* ===== Hero slider style index5 - Customisations wizard ===== */

/* CORRECTION CRITIQUE : Le thème Cleanon définit background-color sur .swiper-slide
   ce qui couvre l'image de fond. On le neutralise pour le hero slider uniquement. */
.main-slider-four .swiper-slide {
    background-color: #0e3026 !important; /* fallback vert foncé si image non chargée */
}

/* Sécurité layout : on garantit une hauteur au slider */
.main-slider-four,
.main-slider-four .swiper-container { min-height: 720px; }
.main-slider-four .swiper-slide { min-height: 720px; }

/* S'assurer que le bg de l'image remonte bien devant le fond */
.main-slider-four__bg {
    z-index: 1 !important;
}
.main-slider-four__bg:before {
    z-index: 2 !important;
}
.main-slider-four__content {
    z-index: 10 !important;
    position: relative;
}

@media (max-width: 991px) {
    .main-slider-four,
    .main-slider-four .swiper-container,
    .main-slider-four .swiper-slide { min-height: auto; }
}

/* ===== Galerie rapide en haut (photo strip) ===== */
.vg-photo-strip {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--vg-dark);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.vg-photo-strip__item {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    cursor: pointer;
    text-decoration: none !important;
    height: 100%;
}

.vg-photo-strip__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(.2,.8,.2,1), filter 0.4s ease;
    filter: brightness(0.85);
}

.vg-photo-strip__item:hover img {
    transform: scale(1.08);
    filter: brightness(1);
}

.vg-photo-strip__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(14,48,38,0.88) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.vg-photo-strip__item:hover .vg-photo-strip__overlay {
    opacity: 1;
}

.vg-photo-strip__label {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vg-photo-strip__badge {
    display: inline-block;
    background: var(--vg-base);
    color: var(--vg-dark);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 8px;
    border-radius: 20px;
    margin-bottom: 6px;
    align-self: flex-start;
}

@media (max-width: 991px) {
    .vg-photo-strip {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 575px) {
    .vg-photo-strip {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .vg-photo-strip__item:nth-child(n+5) {
        display: none !important;
    }
}

/* On surcharge le clip-path noir du formulaire natif par un fond blanc opaque
   adapté au wizard 3 étapes (plus dense que le formulaire d'origine) */
.vg-hero-form {
    max-width: 480px !important;
    width: 100%;
    padding: 26px 26px 28px !important;
}

.vg-hero-form::before {
    background: #ffffff !important;
    clip-path: none !important;
    border-radius: 18px !important;
    box-shadow: 0 30px 60px -20px rgba(14, 48, 38, 0.45) !important;
}

.vg-hero-form .title-box h2 {
    color: var(--vg-dark) !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
    text-align: center;
    margin: 0 !important;
    text-transform: none !important;
}

.vg-hero-form .title-box::after {
    content: "Réponse 24h - 100% gratuit";
    display: block;
    text-align: center;
    color: var(--vg-muted);
    font-size: 13px;
    margin: 4px 0 14px;
}

/* Pas de double titre dans le wizard */
.vg-hero-form .vg-wizard__title,
.vg-hero-form .vg-wizard__subtitle {
    display: none;
}

.vg-hero-form .vg-wizard {
    box-shadow: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

/* Sur grand écran : le contenu à gauche doit laisser la place au form à droite */
@media (min-width: 992px) {
    .main-slider-four__content {
        max-width: 660px;
    }
}

/* Sur mobile/tablette : le formulaire absolu casse le layout - on le repositionne */
@media (max-width: 991px) {
    .main-slider-four__form-box {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 0 0 60px;
        margin-top: -60px;
    }
    .vg-hero-form {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        margin: 0 auto;
    }
    .main-slider-four__content {
        padding-bottom: 100px !important;
        padding-top: 200px !important;
    }
    .main-slider-four__title {
        font-size: 36px !important;
    }
}

/* Bullets/USP sous le hero */
.vg-hero-usps {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.vg-hero-usps li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.95);
    font-size: 15px;
    font-weight: 500;
}

.vg-hero-usps i {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--vg-base);
    color: var(--vg-dark);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

/* ===== Wizard formulaire 3 étapes ===== */
.vg-wizard {
    background: #fff;
    border-radius: 18px;
    padding: 32px 30px 28px;
    box-shadow: 0 30px 60px -20px rgba(10, 25, 50, 0.4);
    color: var(--vg-text);
    position: relative;
}

.vg-wizard__title {
    color: var(--vg-dark);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
    text-align: center;
}

.vg-wizard__subtitle {
    color: var(--vg-muted);
    font-size: 14px;
    text-align: center;
    margin: 0 0 22px;
}

/* Étapes (progress) */
.vg-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 26px;
    counter-reset: step;
    position: relative;
}

.vg-steps::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: var(--vg-border);
    z-index: 0;
}

.vg-steps__item {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
}

.vg-steps__num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--vg-border);
    color: var(--vg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 6px;
    transition: all .25s ease;
}

.vg-steps__label {
    display: block;
    font-size: 12px;
    color: var(--vg-muted);
    font-weight: 500;
}

.vg-steps__item.is-active .vg-steps__num {
    background: var(--vg-primary);
    border-color: var(--vg-primary);
    color: #fff;
    box-shadow: 0 8px 20px -8px var(--vg-primary);
}

.vg-steps__item.is-active .vg-steps__label {
    color: var(--vg-dark);
    font-weight: 600;
}

.vg-steps__item.is-done .vg-steps__num {
    background: var(--vg-success);
    border-color: var(--vg-success);
    color: #fff;
}

/* Étapes - panneaux */
.vg-step { display: none; animation: vgFade .25s ease; }
.vg-step.is-active { display: block; }

@keyframes vgFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.vg-field { margin-bottom: 14px; }
.vg-field label {
    display: block;
    font-size: 13px;
    color: var(--vg-dark);
    font-weight: 600;
    margin-bottom: 6px;
}

.vg-field input[type="text"],
.vg-field input[type="email"],
.vg-field input[type="tel"],
.vg-field input[type="date"],
.vg-field select,
.vg-field textarea {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1.5px solid var(--vg-border);
    border-radius: 10px;
    background: #fff;
    color: var(--vg-dark);
    font-size: 14px;
    transition: border-color .2s, box-shadow .2s;
}

.vg-field textarea {
    height: 90px;
    padding: 12px 14px;
    resize: vertical;
}

.vg-field input:focus,
.vg-field select:focus,
.vg-field textarea:focus {
    outline: none;
    border-color: var(--vg-primary);
    box-shadow: 0 0 0 4px rgba(11, 112, 88, 0.12);
}

.vg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Choix type de bien (cards) */
.vg-choices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.vg-choice {
    border: 1.5px solid var(--vg-border);
    border-radius: 10px;
    padding: 14px 8px;
    text-align: center;
    cursor: pointer;
    transition: all .2s ease;
    background: #fff;
}

.vg-choice i {
    font-size: 22px;
    color: var(--vg-primary);
    display: block;
    margin-bottom: 6px;
}

.vg-choice span {
    font-size: 12px;
    font-weight: 600;
    color: var(--vg-dark);
}

.vg-choice input { display: none; }

.vg-choice.is-selected,
.vg-choice:hover {
    border-color: var(--vg-primary);
    background: rgba(11, 112, 88, 0.05);
}

/* Sous-titre de groupe dans le wizard */
.vg-group-label {
    display: block;
    font-size: 13px;
    color: var(--vg-dark);
    font-weight: 600;
    margin-bottom: 8px;
}

/* Radios horizontales (urgence, antiquités, nettoyage) */
.vg-radios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.vg-radio {
    border: 1.5px solid var(--vg-border);
    border-radius: 10px;
    padding: 12px 10px;
    cursor: pointer;
    transition: all .2s ease;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--vg-dark);
    line-height: 1.3;
    min-height: 50px;
}

.vg-radio input { display: none; }
.vg-radio:hover { border-color: var(--vg-primary); }
.vg-radio.is-selected {
    border-color: var(--vg-primary);
    background: rgba(11, 112, 88, 0.06);
    color: var(--vg-primary);
}

/* Checkboxes "extra services" */
.vg-checks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.vg-check {
    border: 1.5px solid var(--vg-border);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all .2s ease;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--vg-dark);
}

.vg-check input { display: none; }

.vg-check::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--vg-border);
    flex-shrink: 0;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 10px;
    color: #fff;
}

.vg-check:hover { border-color: var(--vg-primary); }

.vg-check.is-selected {
    border-color: var(--vg-primary);
    background: rgba(11, 112, 88, 0.06);
}

.vg-check.is-selected::before {
    content: "\f00c";
    background: var(--vg-primary);
    border-color: var(--vg-primary);
}

.vg-check i {
    color: var(--vg-primary);
    font-size: 14px;
    margin-left: auto;
}

/* Upload de photos */
.vg-photos {
    border: 2px dashed var(--vg-border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    background: var(--vg-light);
    cursor: pointer;
    transition: all .2s ease;
    margin-bottom: 8px;
}

.vg-photos:hover,
.vg-photos.is-drag {
    border-color: var(--vg-primary);
    background: rgba(11, 112, 88, 0.05);
}

.vg-photos i {
    font-size: 32px;
    color: var(--vg-primary);
    display: block;
    margin-bottom: 8px;
}

.vg-photos__title {
    font-weight: 600;
    color: var(--vg-dark);
    font-size: 14px;
    margin-bottom: 4px;
}

.vg-photos__hint {
    font-size: 12px;
    color: var(--vg-muted);
}

.vg-photos input[type="file"] { display: none; }

.vg-photos-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.vg-photo-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--vg-border);
}

.vg-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vg-photo-thumb__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(231, 76, 60, 0.95);
    color: #fff;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
}

.vg-photos-counter {
    font-size: 12px;
    color: var(--vg-muted);
    text-align: right;
    margin-top: 4px;
}

@media (max-width: 575px) {
    .vg-radios { grid-template-columns: 1fr; }
    .vg-checks { grid-template-columns: 1fr; }
}

/* Boutons wizard */
.vg-wizard__actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
}

.vg-btn {
    border: 0;
    cursor: pointer;
    padding: 13px 26px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

.vg-btn--primary {
    background: var(--vg-primary);
    color: #fff;
    box-shadow: 0 10px 22px -10px var(--vg-primary);
}

.vg-btn--primary:hover {
    background: var(--vg-primary-dark);
    transform: translateY(-1px);
    color: #fff;
}

.vg-btn--ghost {
    background: var(--vg-light);
    color: var(--vg-dark);
}

.vg-btn--ghost:hover { background: var(--vg-border); color: var(--vg-dark); }

.vg-btn--full { width: 100%; justify-content: center; }

.vg-wizard__success {
    display: none;
    text-align: center;
    padding: 30px 10px 10px;
}

.vg-wizard__success i {
    font-size: 56px;
    color: var(--vg-success);
    margin-bottom: 14px;
}

.vg-wizard__success h3 {
    color: var(--vg-dark);
    margin-bottom: 8px;
    font-size: 20px;
}

.vg-wizard__success p { color: var(--vg-muted); }

.vg-wizard.is-done .vg-step,
.vg-wizard.is-done .vg-steps,
.vg-wizard.is-done .vg-wizard__actions { display: none; }

.vg-wizard.is-done .vg-wizard__success { display: block; }

/* ===== Section 4 offres style leegmakenwoning ===== */
.vg-offers {
    padding: 100px 0;
    background: var(--vg-light);
}

.vg-offers__head { text-align: center; margin-bottom: 50px; }

.vg-offers__tag {
    color: var(--vg-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 12px;
    display: block;
}

.vg-offers__title {
    font-size: 42px;
    color: var(--vg-dark);
    font-weight: 700;
    margin-bottom: 14px;
}

.vg-offers__lead {
    font-size: 17px;
    color: var(--vg-text);
    max-width: 720px;
    margin: 0 auto;
}

.vg-offer {
    background: #fff;
    border-radius: 16px;
    padding: 32px 26px;
    box-shadow: 0 8px 28px -16px rgba(14, 26, 43, 0.18);
    transition: transform .25s ease, box-shadow .25s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

.vg-offer::after {
    content: "";
    position: absolute;
    inset: auto auto -60px -60px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(11, 112, 88, 0.07) 0%, transparent 70%);
    border-radius: 50%;
    transition: all .3s;
}

.vg-offer:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px -22px rgba(11, 112, 88, 0.35);
    border-color: rgba(11, 112, 88, 0.25);
}

.vg-offer__icon {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--vg-primary), #15916f);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
}

.vg-offer__title {
    font-size: 22px;
    color: var(--vg-dark);
    font-weight: 700;
    margin-bottom: 12px;
}

.vg-offer__text {
    color: var(--vg-text);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 18px;
}

.vg-offer__features {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

.vg-offer__features li {
    color: var(--vg-text);
    font-size: 14px;
    margin-bottom: 8px;
    padding-left: 24px;
    position: relative;
}

.vg-offer__features li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    color: var(--vg-success);
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 12px;
}

.vg-offer__link {
    color: var(--vg-primary);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .2s;
}

.vg-offer__link:hover { gap: 12px; color: var(--vg-primary-dark); }

/* ===== Section "Comment ça marche" ===== */
.vg-how { padding: 100px 0; background: #fff; }

.vg-how__step {
    text-align: center;
    padding: 24px 18px;
    position: relative;
}

.vg-how__num {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vg-primary), #15916f);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 18px;
    box-shadow: 0 10px 24px -10px var(--vg-primary);
}

.vg-how__step-title {
    font-size: 18px;
    color: var(--vg-dark);
    font-weight: 700;
    margin-bottom: 8px;
}

.vg-how__step-text {
    color: var(--vg-text);
    font-size: 14px;
    line-height: 1.6;
}

/* ===== Bandeau confiance ===== */
.vg-trustbar {
    background: var(--vg-dark);
    color: #fff;
    padding: 40px 0;
}

.vg-trustbar__item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vg-trustbar__item i {
    font-size: 32px;
    color: var(--vg-secondary);
}

.vg-trustbar__item strong {
    display: block;
    font-size: 22px;
    line-height: 1;
}

.vg-trustbar__item span {
    font-size: 14px;
    opacity: 0.85;
}

/* ===== Pourquoi nous choisir ===== */
.vg-why { padding: 100px 0; background: #fff; }

.vg-why__img-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(14,26,43,0.4);
}

.vg-why__img-wrap img { width: 100%; display: block; }

.vg-why__badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: #fff;
    padding: 16px 22px;
    border-radius: 14px;
    box-shadow: 0 14px 30px -12px rgba(14,26,43,0.3);
    display: flex;
    align-items: center;
    gap: 14px;
}

.vg-why__badge i {
    width: 48px; height: 48px;
    background: var(--vg-primary);
    color: #fff;
    border-radius: 12px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 20px;
}

.vg-why__badge strong { display:block; color:var(--vg-dark); font-size:18px; line-height:1; }
.vg-why__badge span { color: var(--vg-muted); font-size: 13px; }

.vg-why__feature {
    display: flex;
    gap: 18px;
    margin-bottom: 24px;
}

.vg-why__feature i {
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(11, 112, 88,0.1);
    color: var(--vg-primary);
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 22px;
}

.vg-why__feature h4 { color: var(--vg-dark); font-size: 18px; margin: 0 0 6px; font-weight: 700; }
.vg-why__feature p  { color: var(--vg-text); font-size: 14px; line-height: 1.6; margin: 0; }

/* ===== Témoignages ===== */
.vg-testimonials { padding: 100px 0; background: var(--vg-light); }

.vg-testimonial {
    background: #fff;
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 10px 30px -18px rgba(14,26,43,0.18);
    height: 100%;
    position: relative;
}

.vg-testimonial__stars {
    color: #ffb800;
    font-size: 16px;
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.vg-testimonial__text {
    color: var(--vg-text);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 22px;
    font-style: italic;
}

.vg-testimonial__person {
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid var(--vg-border);
    padding-top: 18px;
}

.vg-testimonial__avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vg-primary), #15916f);
    color: #fff;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 20px;
}

.vg-testimonial__name { color: var(--vg-dark); font-weight: 700; display: block; }
.vg-testimonial__loc  { color: var(--vg-muted); font-size: 13px; }

/* ===== FAQ ===== */
.vg-faq { padding: 100px 0; background: #fff; }

.vg-faq__item {
    background: var(--vg-light);
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid transparent;
    transition: all .25s ease;
}

.vg-faq__item.is-open {
    background: #fff;
    border-color: rgba(11, 112, 88,0.25);
    box-shadow: 0 14px 30px -18px rgba(11, 112, 88,0.3);
}

.vg-faq__q {
    padding: 20px 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-weight: 600;
    color: var(--vg-dark);
    font-size: 16px;
}

.vg-faq__q::after {
    content: "\f067";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    color: var(--vg-primary);
    font-size: 14px;
    transition: transform .25s ease;
    flex-shrink: 0;
}

.vg-faq__item.is-open .vg-faq__q::after { content: "\f068"; transform: rotate(180deg); }

.vg-faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
    color: var(--vg-text);
    font-size: 15px;
    line-height: 1.7;
    padding: 0 24px;
}

.vg-faq__item.is-open .vg-faq__a { max-height: 500px; padding: 0 24px 22px; }

/* ===== Régions ===== */
.vg-regions { padding: 100px 0; background: var(--vg-light); }

.vg-regions__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 40px;
}

.vg-region {
    background: #fff;
    border-radius: 12px;
    padding: 18px 20px;
    text-align: left;
    color: var(--vg-dark);
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid transparent;
    transition: all .25s ease;
}

.vg-region i { color: var(--vg-primary); font-size: 18px; }

.vg-region:hover {
    border-color: var(--vg-primary);
    transform: translateY(-3px);
    color: var(--vg-primary);
    box-shadow: 0 14px 28px -16px rgba(11, 112, 88,0.35);
}

/* ===== CTA final ===== */
.vg-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--vg-primary), var(--vg-primary-dark));
    color: #fff;
    text-align: center;
}

.vg-cta h2 { color: #fff; font-size: 38px; margin-bottom: 14px; font-weight: 700; }
.vg-cta p  { font-size: 17px; opacity: 0.92; max-width: 680px; margin: 0 auto 26px; }

/* ===== Responsive ===== */
@media (max-width: 991px) {
    .vg-hero { padding: 100px 0 60px; }
    .vg-hero__title { font-size: 38px; }
    .vg-wizard { margin-top: 40px; }
}

@media (max-width: 575px) {
    .vg-hero__title { font-size: 30px; }
    .vg-grid-2 { grid-template-columns: 1fr; }
    .vg-choices { grid-template-columns: repeat(2, 1fr); }
    .vg-offers__title, .vg-cta h2 { font-size: 28px; }
    .vg-steps__label { font-size: 11px; }
}

/* ==========================================================================
   CORRECTIONS CRITIQUES - Hero slider + Photo strip + Galerie réalisations
   ========================================================================== */

/* -- HERO SLIDER : isolation du contexte de pile pour que l'image soit visible -- */
.main-slider-four .swiper-slide {
    isolation: isolate;
    background-color: transparent !important;   /* rend l'image de fond visible */
}

.main-slider-four__bg {
    position: absolute !important;
    inset: 0;
    z-index: -1 !important;                 /* derrière le contenu, dans le contexte isolé */
    background-size: cover !important;
    background-position: center !important;
}

.main-slider-four__bg::before {
    z-index: 0 !important;                  /* overlay gradient dessus de l'image */
}

.main-slider-four__content,
.main-slider-four__sub-title-box,
.main-slider-four__title,
.main-slider-four__text,
.vg-hero-usps {
    position: relative;
    z-index: 1;
}

/* -- PHOTO STRIP : correction min-width: 0 (bug classique CSS Grid) -- */
.vg-photo-strip {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 0 !important;
    height: 220px !important;
    overflow: hidden;
}

.vg-photo-strip__item {
    min-width: 0 !important;               /* crucial pour éviter l'overflow des images */
    height: 220px !important;
    overflow: hidden !important;
    display: block !important;
    position: relative !important;
}

.vg-photo-strip__item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    max-width: none !important;
}

@media (max-width: 991px) {
    .vg-photo-strip {
        grid-template-columns: repeat(3, 1fr) !important;
        height: 160px !important;
    }
    .vg-photo-strip__item { height: 160px !important; }
    .vg-photo-strip__item:nth-child(n+4) { display: none !important; }
}

@media (max-width: 575px) {
    .vg-photo-strip {
        grid-template-columns: repeat(2, 1fr) !important;
        height: 130px !important;
    }
    .vg-photo-strip__item { height: 130px !important; }
    .vg-photo-strip__item:nth-child(n+3) { display: none !important; }
}

/* -- GALERIE NOS RÉALISATIONS : project-five avec marquee -- */
.project-five {
    padding: 80px 0 60px;
    background: #f7f4f1;
    overflow: hidden;
}

.project-five__inner {
    overflow: hidden;
}

/* Taille fixe des images dans la galerie marquee */
.project-five__list li {
    width: 320px !important;
    flex-shrink: 0;
}

.project-five__single-img img {
    width: 320px !important;
    height: 240px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 12px;
}

/* Overlay au hover avec label ville */
.project-five__single-img .content-box {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 18px;
    background: linear-gradient(180deg, transparent 0%, rgba(14,48,38,0.92) 100%);
    border-radius: 0 0 12px 12px;
    z-index: 6;
}

.project-five__single-img .content-box h2 {
    font-size: 16px !important;
    font-weight: 700;
    margin: 0 0 2px !important;
}

.project-five__single-img .content-box h2 a {
    color: #ffffff !important;
    text-decoration: none;
    transition: color .2s;
}

.project-five__single-img .content-box h2 a:hover {
    color: var(--vg-base) !important;
}

.project-five__single-img .content-box p {
    color: rgba(255,255,255,0.8) !important;
    font-size: 13px !important;
    margin: 0 !important;
}

.project-five__single-img .content-box p::before {
    content: "\f3c5";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    color: var(--vg-base);
    margin-right: 4px;
    font-size: 11px;
}

/* ===== Hero two-column layout (vg-hero-overlay) ===== */
.main-slider-four {
    position: relative;
    overflow: hidden;
}

.main-slider-four__carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.main-slider-four,
.main-slider-four__carousel,
.main-slider-four .swiper-wrapper,
.main-slider-four .swiper-slide {
    min-height: 720px;
}

.vg-hero-overlay {
    position: relative;
    z-index: 10;
    min-height: 720px;
    padding: 165px 0 72px;
}

.vg-hero-overlay > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 480px);
    align-items: start;
    gap: 40px;
    width: 100%;
}

.vg-hero-left {
    min-width: 0;
    color: #fff;
    padding-top: 34px;
}

/* These theme classes are normally revealed only inside .swiper-slide-active.
   In the custom overlay they live outside the slide, so force them visible. */
.vg-hero-left .main-slider-four__sub-title-box {
    opacity: 1;
    transform: none;
}

.vg-hero-form {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100%;
    margin-left: auto;
}

@media (max-width: 1199px) {
    .vg-hero-overlay {
        padding-top: 150px;
    }

    .vg-hero-overlay > .container {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 450px);
        gap: 28px;
    }

    .vg-hero-left {
        padding-top: 18px;
    }

    .vg-hero-left h1 {
        font-size: 32px !important;
    }
}

@media (max-width: 991px) {
    .main-slider-four,
    .main-slider-four__carousel,
    .vg-hero-overlay {
        min-height: 0;
    }

    .vg-hero-overlay {
        padding: 145px 0 48px;
    }

    .vg-hero-left {
        display: none !important;
    }

    .vg-hero-overlay > .container {
        grid-template-columns: minmax(0, 480px);
        justify-content: center;
    }

    .vg-hero-form {
        margin: 0 auto;
    }
}

/* ============================================================
   ESPACEMENT GLOBAL ENTRE SECTIONS — 2026-05-29
   Plus d'air entre les blocs sur toutes les pages.
   ============================================================ */
/* Sections de CONTENU uniquement : on aère franchement.
   Les blocs volontairement serrés (hero, bandeau photos, marquee,
   trustbar, sliding-text) sont EXCLUS pour ne pas casser le rythme. */
.vg-offers,
.process-one,
.about-five,
.vg-stats,
.vg-testimonials,
.vg-faq,
.vg-regions,
.vg-cta,
.vg-newsletter,
.vg-cta-band,
.vg-reassurance,
.vg-service-detail {
    margin-top: clamp(28px, 5vw, 56px);
    margin-bottom: clamp(28px, 5vw, 56px);
}

/* Deux bandes consécutives (stats + CTA) : on garde un écart net sans excès */
.vg-reassurance + .vg-cta,
.vg-reassurance + .vg-cta-band,
.vg-cta-band + .vg-cta,
.vg-service-detail + .vg-reassurance {
    margin-top: clamp(20px, 3vw, 36px);
}

/* Paragraphes plus aérés et plus lisibles */
.vg-prose p,
.service-content p,
.about-three__text,
.faq-page__answer p {
    line-height: 1.75;
    margin-bottom: 1.1em;
}

/* Bouton CTA réutilisable */
.vg-cta-band .thm-btn:hover {
    background: #ffb733 !important;
    transform: translateY(-1px);
    transition: all .2s ease;
}

/* Grille de stats responsive */
@media (max-width: 575px) {
    .vg-reassurance .container > div:last-child {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================================
   ACCESSIBILITÉ — 2026-05-29
   ============================================================ */
.sr-only {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.vg-skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100000;
    background: #0b7058; color: #fff; padding: 12px 20px;
    border-radius: 0 0 8px 0; font-weight: 700; text-decoration: none;
}
.vg-skip-link:focus { left: 0; }
.vg-faq__q:focus-visible { outline: 2px solid #0b7058; outline-offset: 2px; }
.mobile-nav__toggler:focus-visible { outline: 2px solid #f1ab21; outline-offset: 3px; }

/* ============================================================
   BARRE CTA STICKY MOBILE — 2026-05-29 (Sprint 1)
   ============================================================ */
.vg-mobile-cta { display: none; }
@media (max-width: 767px) {
    .vg-mobile-cta {
        display: flex; gap: 10px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255,255,255,.97);
        box-shadow: 0 -6px 24px rgba(14,48,38,.16);
        border-top: 1px solid #e6ebf2;
    }
    .vg-mobile-cta a {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        min-height: 50px; border-radius: 12px; font-weight: 800; font-size: 15px;
        text-decoration: none; padding: 0 14px;
    }
    .vg-mobile-cta__call {
        flex: 0 0 38%; background: #0e3026; color: #fff;
    }
    .vg-mobile-cta__quote {
        flex: 1 1 auto; background: #f1ab21; color: #0e3026;
    }
    /* éviter le doublon avec le bouton téléphone flottant */
    .vg-phone-float { display: none !important; }
    /* laisser respirer le bas de page sous la barre */
    .page-wrapper { padding-bottom: 72px; }
}

/* ============================================================
   ANIMATIONS MODERNES (2026) — sobres, performantes
   Reveal au scroll (classe .vg-reveal posée par vg-anim.js)
   + micro-interactions au survol. prefers-reduced-motion safe.
   ============================================================ */
:root { --vg-ease: cubic-bezier(.22,.61,.36,1); }

/* Reveal : actif uniquement si JS (sinon contenu visible) */
html.vg-js .vg-reveal { opacity: 0; transform: translateY(22px); }
html.vg-js .vg-reveal.vg-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--vg-ease), transform .7s var(--vg-ease);
}

/* Cartes : élévation douce au survol */
.vg-offer, .vg-stat, .vg-region, .vg-testimonial {
  transition: transform .35s var(--vg-ease), box-shadow .35s var(--vg-ease);
}
.vg-offer:hover, .vg-stat:hover, .vg-region:hover, .vg-testimonial:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -18px rgba(11,112,88,.45);
}

/* Pastilles du bandeau défilant */
.vg-ticker__pill { transition: transform .3s var(--vg-ease), box-shadow .3s var(--vg-ease); }
.vg-ticker__pill:hover { transform: translateY(-3px); box-shadow: 0 10px 22px -12px rgba(11,112,88,.4); }

/* Icône d'offre : léger pop quand on survole la carte */
.vg-offer i { transition: transform .35s var(--vg-ease); }
.vg-offer:hover i { transform: scale(1.12); }

/* Boutons : lift + lueur */
.thm-btn, .vg-btn, .main-menu__btn {
  transition: transform .25s var(--vg-ease), box-shadow .25s var(--vg-ease), filter .25s var(--vg-ease);
}
.thm-btn:hover, .vg-btn:hover, .main-menu__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(11,112,88,.55);
}

/* Photos : zoom doux au survol */
.vg-photo-strip a, .vg-photos-preview a { display: block; overflow: hidden; }
.vg-photo-strip img, .vg-photos-preview img { transition: transform .6s var(--vg-ease); }
.vg-photo-strip a:hover img, .vg-photos-preview a:hover img { transform: scale(1.06); }

/* Bouton d'appel flottant : pulsation discrète */
@keyframes vgPulse {
  0%   { box-shadow: 0 0 0 0 rgba(11,112,88,.45); }
  70%  { box-shadow: 0 0 0 14px rgba(11,112,88,0); }
  100% { box-shadow: 0 0 0 0 rgba(11,112,88,0); }
}
html.vg-js .scroll-to-target.style2,
html.vg-js a[href^="tel:"].vg-float-call { animation: vgPulse 2.6s var(--vg-ease) infinite; }

@media (prefers-reduced-motion: reduce) {
  html.vg-js .vg-reveal { opacity: 1 !important; transform: none !important; }
  .vg-offer, .vg-stat, .vg-region, .vg-testimonial, .vg-ticker__pill,
  .thm-btn, .vg-btn, .main-menu__btn, .vg-offer i,
  .vg-photo-strip img, .vg-photos-preview img { transition: none !important; }
  .vg-offer:hover, .vg-stat:hover, .vg-region:hover, .vg-testimonial:hover,
  .vg-ticker__pill:hover, .thm-btn:hover, .vg-btn:hover, .main-menu__btn:hover,
  .vg-offer:hover i, .vg-photo-strip a:hover img, .vg-photos-preview a:hover img { transform: none !important; }
  html.vg-js [class*="vg-"] { animation: none !important; }
}

/* ============================================================
   EFFETS PREMIUM (2026) — sobres, performants, charte respectée
   Barre de progression · spotlight/tilt cartes · shine boutons ·
   icônes dégradé · Ken Burns hero · aurora CTA · shimmer titres.
   Tout est désactivé en prefers-reduced-motion.
   ============================================================ */

/* 1) Barre de progression de lecture (haut de page) */
.vg-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--vg-primary), var(--vg-base) 60%, #ffd56b);
  box-shadow: 0 1px 6px -1px rgba(var(--vg-base-rgb), .6);
  pointer-events: none; will-change: transform;
}

/* 2) Spotlight + tilt 3D sur cartes */
.vg-tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(0);
  transform-style: preserve-3d;
  transition: transform .25s var(--vg-ease), box-shadow .35s var(--vg-ease);
  position: relative;
}
.vg-tilt:hover {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
}
/* halo lumineux qui suit le curseur */
.vg-tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%),
              rgba(var(--vg-base-rgb), .16), transparent 60%);
  opacity: 0; transition: opacity .3s var(--vg-ease); pointer-events: none; z-index: 1;
}
.vg-tilt:hover::after { opacity: 1; }
.vg-tilt > * { position: relative; z-index: 2; }

/* 3) Boutons : reflet glissant au survol */
.thm-btn, .vg-btn, .main-menu__btn, .vg-offer__link {
  position: relative; overflow: hidden; isolation: isolate;
}
.thm-btn::before, .vg-btn::before, .main-menu__btn::before {
  content: ""; position: absolute; top: 0; left: -130%; width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); transition: left .6s var(--vg-ease); z-index: 1; pointer-events: none;
}
.thm-btn:hover::before, .vg-btn:hover::before, .main-menu__btn:hover::before { left: 140%; }

/* 4) Icônes d'offre : pastille dégradée + lueur au survol de la carte */
.vg-offer__icon {
  background: linear-gradient(135deg, var(--vg-primary), #12a07d);
  color: #fff; transition: transform .4s var(--vg-ease), box-shadow .4s var(--vg-ease);
}
.vg-offer:hover .vg-offer__icon {
  transform: translateY(-4px) rotate(-4deg) scale(1.06);
  box-shadow: 0 14px 28px -10px rgba(11,112,88,.55);
}

/* 5) Hero : Ken Burns (zoom lent) sur les fonds du carrousel */
.main-slider-four__bg {
  animation: vgKenBurns 18s ease-in-out infinite alternate;
  transform-origin: center;
}
@keyframes vgKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* 6) Bande CTA : aurore dégradée animée en fond */
.vg-cta-band { position: relative; overflow: hidden; }
.vg-cta-band::before {
  content: ""; position: absolute; inset: -40%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(var(--vg-base-rgb), .22), transparent 60%),
    radial-gradient(45% 55% at 80% 70%, rgba(18,160,125,.28), transparent 60%);
  filter: blur(8px); animation: vgAurora 16s ease-in-out infinite alternate;
}
.vg-cta-band > * { position: relative; z-index: 1; }
@keyframes vgAurora {
  0%   { transform: translate3d(-4%, -2%, 0) rotate(0deg); }
  100% { transform: translate3d(4%, 3%, 0) rotate(6deg); }
}

/* 7) Titres de sections offres : liseré doré qui se déploie */
.vg-offers__title { position: relative; display: inline-block; }
.vg-offers__title::after {
  content: ""; position: absolute; left: 0; bottom: -8px; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--vg-primary), var(--vg-base));
  border-radius: 3px; transition: width .8s var(--vg-ease);
}
.vg-offers__title.vg-in::after,
html.vg-js .vg-reveal.vg-in .vg-offers__title::after { width: 64px; }
/* fallback : si pas de reveal sur ce noeud, on déploie au survol de section */
.vg-offers:hover .vg-offers__title::after { width: 64px; }

/* Accessibilité : tout effet animé coupé si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  .vg-progress { display: none; }
  .vg-tilt, .vg-tilt:hover { transform: none; }
  .vg-tilt::after { display: none; }
  .main-slider-four__bg { animation: none; }
  .vg-cta-band::before { animation: none; }
  .thm-btn::before, .vg-btn::before, .main-menu__btn::before { display: none; }
}