/**
 * Halo sur le lac — Overrides globaux
 * =============================================================================
 * Petites règles utilitaires appliquées sur toutes les pages du site.
 * Charger inconditionnellement depuis functions.php.
 *
 * NE PAS y mettre de règles spécifiques à une page — pour ça, créer un
 * fichier dédié et l'enqueue conditionnellement (cf. plans-unites.css, faq.css).
 * =============================================================================
 */

/* ===========================================================================
 * 1. NOWRAP des labels boutons (toutes tailles)
 * ========================================================================= */

/* "Voir les plans des unités" (header, id 2d4b2e01) */
.elementor-element-2d4b2e01 .elementor-button-text,
.elementor-element-2d4b2e01 .elementor-button,
.elementor-element-2d4b2e01 a,
.elementor-element-2d4b2e01 button {
    white-space: nowrap;
}

/* "Visite virtuelle" (home, id b3btn-visite) */
[data-id="b3btn-visite"] .elementor-button-text,
[data-id="b3btn-visite"] .elementor-button {
    white-space: nowrap;
}

/* ===========================================================================
 * 2. HEADER — ARCHITECTURE RESPONSIVE COMPLÈTE
 *
 * Stratégie :
 *   - position: fixed → header reste visible en permanence (anti-disparition au scroll)
 *   - 2 ÉTATS visuels :
 *     a) « hero » (page accueil, top du document) : transparent + scrim subtil
 *        + textes BLANCS pour rester lisibles sur photo carrousel
 *     b) « scrolled » (>80px) ou hors-accueil : fond blanc semi-translucide
 *        + backdrop-filter blur + textes en couleur primary
 *   - CSS Grid (1fr auto 1fr) ≥768px → logo strictement centré
 *   - Mobile : layout dynamique selon largeur (voir tableau)
 *
 * Layouts par breakpoint :
 *   ┌────────────┬──────────┬──────────┬──────┬──────────────┐
 *   │ Breakpoint │ Réserver │ Logo     │ FAQ  │ Voir plans   │
 *   ├────────────┼──────────┼──────────┼──────┼──────────────┤
 *   │ ≥1367      │ ✓ outline│ 220 ↓-60 │ ✓    │ ✓ primary    │
 *   │ 1025-1366  │ ✓ outline│ 180 ↓-40 │ ✓    │ ✓ primary    │
 *   │ 768-1024   │ ✓ compact│ 130      │ ✓ S  │ ✓ compact    │
 *   │ 481-767    │ ✓ mini   │ 100      │ ─    │ ✓ mini       │
 *   │ ≤480       │ ─        │ 90       │ ─    │ ✓ mini       │
 *   └────────────┴──────────┴──────────┴──────┴──────────────┘
 *
 * État scrolled (toutes tailles) : logo shrink à 70-80px, paddings réduits.
 *
 * IDs Elementor (template 254) :
 *   37f1d9ed (root wrapper, margin-bottom = espace réservé sur hero)
 *   4dab5a17 (rectangle visible, devient fixed)
 *   289e66a / 2d4b2d3f (col gauche / Réserver)
 *   e4a2744 (logo direct)
 *   d276aa7 / 560a0ce / 2d4b2e01 (col droite / FAQ / Voir plans)
 * ========================================================================= */

/* --------------------------------------------------------------
 * 2.0 STACKING + POSITIONING
 * -------------------------------------------------------------- */

/* Le wrapper externe garde son margin-bottom (espace réservé sur hero accueil).
   On force position:relative pour créer un stacking context propre. */
.elementor-254 .elementor-element.elementor-element-37f1d9ed {
    position: relative;
    z-index: 100;
}

/* Le rectangle visible reste en position: absolute (default Elementor) :
   il disparaît naturellement au scroll. Pas de sticky/fixed. */
.elementor-254 .elementor-element.elementor-element-4dab5a17 {
    z-index: 101 !important;
    transition: background-color 0.35s ease, backdrop-filter 0.35s ease, padding 0.3s ease, box-shadow 0.35s ease;
}

/* Stacking enfants pour qu'ils restent au-dessus du fond et du carrousel */
.elementor-254 .elementor-element-289e66a,
.elementor-254 .elementor-element-d276aa7,
.elementor-254 .elementor-element-2d4b2d3f,
.elementor-254 .elementor-element-2d4b2e01,
.elementor-254 .elementor-element-560a0ce,
.elementor-254 .elementor-element-e4a2744 {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------
 * 2.1 FOND HEADER : 2 états (transparent + scrim / opaque scrolled)
 * --------------------------------------------------------------
 * État par défaut (transparent + scrim) : appliqué seulement
 * sur la page d'accueil (body.home) quand non-scrollé.
 * Sur les pages internes (FAQ, plans) ou en scrolled, fond opaque.
 * -------------------------------------------------------------- */

/* État "hero" (home, top of page) : fond transparent + scrim subtil */
body.home:not(.halo-header-scrolled) .elementor-254 .elementor-element-4dab5a17 {
    background-image: linear-gradient(
        180deg,
        rgba(30, 49, 79, 0.55) 0%,
        rgba(30, 49, 79, 0.25) 60%,
        rgba(30, 49, 79, 0) 100%
    );
    background-color: transparent;
}

/* État "scrolled" (toutes pages au scroll) ou pages internes par défaut :
   fond blanc semi-translucide + blur + ombre douce */
body.halo-header-scrolled .elementor-254 .elementor-element-4dab5a17,
body:not(.home) .elementor-254 .elementor-element-4dab5a17 {
    background-image: none;
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px) saturate(1.08);
    -webkit-backdrop-filter: blur(12px) saturate(1.08);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------
 * 2.2 COULEURS TEXTES selon état
 * --------------------------------------------------------------
 * - Home non-scrolled : tous les textes BLANCS (lisibles sur scrim)
 * - Sinon : couleurs originales (bleu marine #1E314F)
 * -------------------------------------------------------------- */

/* Home non-scrolled : FAQ heading en blanc */
body.home:not(.halo-header-scrolled) .elementor-254 .elementor-element-560a0ce .elementor-heading-title,
body.home:not(.halo-header-scrolled) .elementor-254 .elementor-element-560a0ce .elementor-heading-title a {
    color: #FFFFFF !important;
    transition: color 0.3s ease;
}
body.home:not(.halo-header-scrolled) .elementor-254 .elementor-element-560a0ce .elementor-heading-title a:hover {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* Home non-scrolled : bouton Réserver outline blanc semi-transparent */
body.home:not(.halo-header-scrolled) .elementor-254 .elementor-element-2d4b2d3f .elementor-button {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
    background-color: rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
body.home:not(.halo-header-scrolled) .elementor-254 .elementor-element-2d4b2d3f .elementor-button:hover,
body.home:not(.halo-header-scrolled) .elementor-254 .elementor-element-2d4b2d3f .elementor-button:focus {
    background-color: #FFFFFF !important;
    color: #1E314F !important;
    border-color: #FFFFFF !important;
}

/* Home non-scrolled : bouton "Voir les plans" garde ses couleurs originales
   (probablement primary plein, déjà visible) — on ajoute juste un boost de
   visibilité au cas où le fond accent serait clair sur photo claire */
body.home:not(.halo-header-scrolled) .elementor-254 .elementor-element-2d4b2e01 .elementor-button {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* État scrolled / pages internes : couleurs textes originales (rétabli au cas où) */
body.halo-header-scrolled .elementor-254 .elementor-element-560a0ce .elementor-heading-title,
body.halo-header-scrolled .elementor-254 .elementor-element-560a0ce .elementor-heading-title a,
body:not(.home) .elementor-254 .elementor-element-560a0ce .elementor-heading-title,
body:not(.home) .elementor-254 .elementor-element-560a0ce .elementor-heading-title a {
    color: #1E314F !important;
}

/* --------------------------------------------------------------
 * 2.2.1 UNIFORMISATION FONTS DES 3 BOUTONS
 *       Même police (Urbanist 600 uppercase) et même comportement.
 *       Les tailles sont définies par breakpoint dans 2.5-2.7.
 * -------------------------------------------------------------- */
.elementor-254 .elementor-element-2d4b2d3f .elementor-button,
.elementor-254 .elementor-element-2d4b2e01 .elementor-button,
.elementor-254 .elementor-element-560a0ce .elementor-heading-title,
.elementor-254 .elementor-element-560a0ce .elementor-heading-title a {
    font-family: "Urbanist", sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* --------------------------------------------------------------
 * 2.2.2 FAQ DANS UN CONTENEUR (style bouton outline, comme Réserver)
 *       Border + padding pour ressembler à un bouton.
 *       Couleur du border suit la couleur du texte (currentColor).
 * -------------------------------------------------------------- */
.elementor-254 .elementor-element-560a0ce > .elementor-widget-container {
    border: 1px solid currentColor;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.elementor-254 .elementor-element-560a0ce .elementor-heading-title {
    margin: 0 !important;
    line-height: 1.3em !important;
}
.elementor-254 .elementor-element-560a0ce .elementor-heading-title a {
    text-decoration: none !important;
}

/* Hover du conteneur FAQ : home non-scrolled = blanc plein */
body.home:not(.halo-header-scrolled) .elementor-254 .elementor-element-560a0ce > .elementor-widget-container {
    background-color: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-color: rgba(255, 255, 255, 0.85);
}
body.home:not(.halo-header-scrolled) .elementor-254 .elementor-element-560a0ce > .elementor-widget-container:hover {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
}
body.home:not(.halo-header-scrolled) .elementor-254 .elementor-element-560a0ce > .elementor-widget-container:hover .elementor-heading-title,
body.home:not(.halo-header-scrolled) .elementor-254 .elementor-element-560a0ce > .elementor-widget-container:hover .elementor-heading-title a {
    color: #1E314F !important;
}

/* Hover en mode scrolled / pages internes : fond foncé plein */
body.halo-header-scrolled .elementor-254 .elementor-element-560a0ce > .elementor-widget-container:hover,
body:not(.home) .elementor-254 .elementor-element-560a0ce > .elementor-widget-container:hover {
    background-color: #1E314F;
    border-color: #1E314F;
}
body.halo-header-scrolled .elementor-254 .elementor-element-560a0ce > .elementor-widget-container:hover .elementor-heading-title,
body.halo-header-scrolled .elementor-254 .elementor-element-560a0ce > .elementor-widget-container:hover .elementor-heading-title a,
body:not(.home) .elementor-254 .elementor-element-560a0ce > .elementor-widget-container:hover .elementor-heading-title,
body:not(.home) .elementor-254 .elementor-element-560a0ce > .elementor-widget-container:hover .elementor-heading-title a {
    color: #FFFFFF !important;
}

/* --------------------------------------------------------------
 * 2.2.3 TAILLES UNIFORMES DES 3 BOUTONS PAR BREAKPOINT
 *       Réserver (button) + FAQ (heading dans container) + Voir plans (button)
 *       → mêmes font-size + padding pour rendre une hauteur visuelle identique.
 * -------------------------------------------------------------- */

/* Desktop large (≥ 1367) */
@media (min-width: 1367px) {
    .elementor-254 .elementor-element-2d4b2d3f .elementor-button,
    .elementor-254 .elementor-element-2d4b2e01 .elementor-button {
        font-size: 14px !important;
        line-height: 1.3em !important;
        padding: 11px 24px !important;
        letter-spacing: 0.6px !important;
    }
    .elementor-254 .elementor-element-560a0ce .elementor-heading-title {
        font-size: 14px !important;
        letter-spacing: 0.6px !important;
        line-height: 1.3em !important;
    }
    .elementor-254 .elementor-element-560a0ce > .elementor-widget-container {
        padding: 11px 24px !important;
    }
}

/* Laptop (1025-1366) */
@media (max-width: 1366px) and (min-width: 1025px) {
    .elementor-254 .elementor-element-2d4b2d3f .elementor-button,
    .elementor-254 .elementor-element-2d4b2e01 .elementor-button {
        font-size: 13px !important;
        line-height: 1.3em !important;
        padding: 10px 20px !important;
        letter-spacing: 0.5px !important;
    }
    .elementor-254 .elementor-element-560a0ce .elementor-heading-title {
        font-size: 13px !important;
        letter-spacing: 0.5px !important;
        line-height: 1.3em !important;
    }
    .elementor-254 .elementor-element-560a0ce > .elementor-widget-container {
        padding: 10px 20px !important;
    }
}

/* --------------------------------------------------------------
 * 2.3 LAYOUT DESKTOP (≥ 768px) — Grid 1fr auto 1fr
 *     LOGO strictement au CENTRE de l'écran (col 2 = auto, centrée
 *     entre 2 colonnes 1fr identiques).
 *
 * Structure :
 *   col 1 (1fr)  : Réserver (container 289e66a, justify-self: start)
 *   col 2 (auto) : Logo (e4a2744, justify-self: center)
 *   col 3 (1fr)  : FAQ + Voir plans (container d276aa7 en flex row)
 *
 * Garantit que le centre visuel du logo = centre du viewport
 * (modulo padding symétrique). FAQ se place naturellement entre
 * le logo et "Voir les plans" dans la col droite.
 * -------------------------------------------------------------- */
@media (min-width: 768px) {
    .elementor-254 .elementor-element.elementor-element-4dab5a17 {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
        column-gap: 16px;
        padding: 14px 32px !important;
    }

    /* Col gauche : Réserver */
    .elementor-254 .elementor-element-289e66a {
        grid-column: 1 !important;
        justify-self: start !important;
        --width: auto !important;
        width: auto !important;
        display: flex !important;
    }

    /* Col centre : Logo strictement centré */
    .elementor-254 .elementor-element-e4a2744 {
        grid-column: 2 !important;
        justify-self: center !important;
        text-align: center !important;
        --width: auto !important;
        width: auto !important;
        max-width: 100%;
    }

    /* Container droit transparent → FAQ et Voir plans deviennent items
       directs du grid (FAQ peut alors être absolute relative à 4dab5a17) */
    .elementor-254 .elementor-element-d276aa7 {
        display: contents !important;
    }

    /* Voir plans : col 3, aligné à droite (place fixe) */
    .elementor-254 .elementor-element-2d4b2e01 {
        grid-column: 3 !important;
        justify-self: end !important;
        --width: auto !important;
        width: auto !important;
    }

    /* FAQ : position absolute, JS calcule left = milieu (logo_right + vp_left)/2
       (cf halo-header.js : centerFAQ()).
       Le rectangle 4dab5a17 est position:absolute (Elementor default)
       → FAQ absolute s'y positionne. */
    .elementor-254 .elementor-element-560a0ce {
        z-index: 3 !important;
        transition: left 0.2s ease;
    }
}

/* --------------------------------------------------------------
 * 2.4 LOGO — taille progressive + transition
 * -------------------------------------------------------------- */
.elementor-254 .elementor-element-e4a2744 img {
    transition: max-width 0.3s ease;
    height: auto !important;
}
.elementor-254 .elementor-element-e4a2744 > .elementor-widget-container {
    transition: margin-bottom 0.3s ease;
}

/* Le LOGO DÉPASSE pour que la SÉPARATION entre les deux carrés du logo
   ("halō" vert ↑ / "SUR LE LAC" bleu marine ↓) coïncide pile avec la ligne
   du header. Calculé par échantillonnage de l'image source halo-logo.png :
   séparation à y=187.5/339 = 55.3% du haut. Donc 44.7% de la hauteur
   affichée doit dépasser → margin-bottom: -44.7% × height. */

/* Desktop large (≥ 1367) : logo 360 → height 233 → dépasse -104 (44.7%) */
@media (min-width: 1367px) {
    .elementor-254 .elementor-element-e4a2744 img {
        max-width: 360px !important;
    }
    .elementor-254 .elementor-element-e4a2744 > .elementor-widget-container {
        margin-bottom: -104px !important;
    }
}

/* Laptop (1025-1366) : logo 280 → height 181 → dépasse -81 */
@media (max-width: 1366px) and (min-width: 1025px) {
    .elementor-254 .elementor-element.elementor-element-4dab5a17 {
        padding: 12px 28px !important;
    }
    .elementor-254 .elementor-element-e4a2744 img {
        max-width: 280px !important;
    }
    .elementor-254 .elementor-element-e4a2744 > .elementor-widget-container {
        margin-bottom: -81px !important;
    }
}

/* --------------------------------------------------------------
 * 2.5 TABLETTE (768-1024) — 3 boutons visibles, logo dépasse
 *     Logo 140 → height ≈ 91 → margin-bottom -45 (50%)
 * -------------------------------------------------------------- */
@media (max-width: 1024px) and (min-width: 768px) {
    /* Annuler elementor-hidden-tablet (Réserver) */
    .elementor-254 .elementor-element-289e66a.elementor-hidden-tablet {
        display: flex !important;
    }

    .elementor-254 .elementor-element.elementor-element-4dab5a17 {
        padding: 10px 12px !important;
        column-gap: 8px;
    }

    /* Col droite : gap réduit */
    .elementor-254 .elementor-element-d276aa7 {
        gap: 8px !important;
    }

    .elementor-254 .elementor-element-2d4b2d3f .elementor-button,
    .elementor-254 .elementor-element-2d4b2e01 .elementor-button {
        font-size: 10px !important;
        line-height: 1.3em !important;
        padding: 7px 12px !important;
        letter-spacing: 0.3px !important;
    }
    .elementor-254 .elementor-element-560a0ce .elementor-heading-title {
        font-size: 10px !important;
        letter-spacing: 0.3px !important;
        line-height: 1.3em !important;
    }
    .elementor-254 .elementor-element-560a0ce > .elementor-widget-container {
        padding: 7px 12px !important;
    }

    .elementor-254 .elementor-element-e4a2744 img {
        max-width: 170px !important;
    }
    .elementor-254 .elementor-element-e4a2744 > .elementor-widget-container {
        margin-bottom: -49px !important;
    }
}

/* --------------------------------------------------------------
 * 2.6 MOBILE & PETIT MOBILE (≤ 767) — Layout 2 colonnes
 *     Logo en HAUT-GAUCHE, 3 boutons EN VERTICAL à droite,
 *     ordre : Voir les plans / Réserver / FAQ
 *
 * Technique : `display: contents` sur les containers Elementor
 * 289e66a et d276aa7 → leurs enfants directs (Réserver btn, FAQ heading,
 * Voir plans btn) deviennent des items du grid principal et peuvent
 * être placés via grid-area indépendamment du DOM order.
 * -------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Override la règle inline `#header-inner { height: 187px !important }` */
    #header-inner.elementor-element-4dab5a17,
    .elementor-254 .elementor-element.elementor-element-4dab5a17 {
        height: auto !important;
        min-height: 0 !important;
    }
    .elementor-254 .elementor-element.elementor-element-4dab5a17 {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: repeat(3, min-content) !important;
        grid-template-areas:
            "logo voirplans"
            "logo reserver"
            "logo faq" !important;
        align-items: center !important;
        column-gap: 12px;
        row-gap: 6px;
        padding: 6px 12px !important;
    }

    /* Containers Elementor transparents → items deviennent enfants du grid */
    .elementor-254 .elementor-element-289e66a,
    .elementor-254 .elementor-element-d276aa7 {
        display: contents !important;
    }

    /* Placement par grid-area */
    .elementor-254 .elementor-element-e4a2744 {
        grid-area: logo;
        justify-self: start;
        align-self: center;
        --width: auto !important;
        width: auto !important;
    }
    .elementor-254 .elementor-element-2d4b2e01 {
        grid-area: voirplans;
        justify-self: end;
    }
    .elementor-254 .elementor-element-2d4b2d3f {
        grid-area: reserver;
        justify-self: end;
    }
    .elementor-254 .elementor-element-560a0ce {
        grid-area: faq;
        justify-self: end;
        display: block !important;
    }

    /* Logo en mode mobile : taille modérée, pas de dépassement
       (le rectangle prend la hauteur du contenu = 3 boutons empilés) */
    .elementor-254 .elementor-element-e4a2744 img {
        max-width: 140px !important;
        height: auto !important;
    }
    .elementor-254 .elementor-element-e4a2744 > .elementor-widget-container {
        margin-bottom: 0 !important;
    }

    /* Boutons et FAQ : tailles confortables uniformes */
    .elementor-254 .elementor-element-2d4b2d3f .elementor-button,
    .elementor-254 .elementor-element-2d4b2e01 .elementor-button {
        font-size: 13px !important;
        line-height: 1.3em !important;
        padding: 8px 14px !important;
        letter-spacing: 0.5px !important;
        white-space: nowrap;
    }
    .elementor-254 .elementor-element-560a0ce .elementor-heading-title {
        font-size: 13px !important;
        letter-spacing: 0.5px !important;
        line-height: 1.3em !important;
    }
    .elementor-254 .elementor-element-560a0ce > .elementor-widget-container {
        padding: 8px 14px !important;
    }
}

/* --------------------------------------------------------------
 * 2.7 PETIT MOBILE (≤ 480) — affinage : logo plus petit + fonts compacts
 * -------------------------------------------------------------- */
@media (max-width: 480px) {
    .elementor-254 .elementor-element.elementor-element-4dab5a17 {
        column-gap: 10px;
        padding: 6px 10px !important;
        row-gap: 5px;
    }
    .elementor-254 .elementor-element-e4a2744 img {
        max-width: 115px !important;
    }
    .elementor-254 .elementor-element-2d4b2d3f .elementor-button,
    .elementor-254 .elementor-element-2d4b2e01 .elementor-button {
        font-size: 11px !important;
        padding: 7px 12px !important;
        letter-spacing: 0.4px !important;
    }
    .elementor-254 .elementor-element-560a0ce .elementor-heading-title {
        font-size: 11px !important;
        letter-spacing: 0.4px !important;
    }
    .elementor-254 .elementor-element-560a0ce > .elementor-widget-container {
        padding: 7px 12px !important;
    }
}

/* --------------------------------------------------------------
 * 2.8 ÉTAT SCROLLED — header rétréci + logo plus petit
 * -------------------------------------------------------------- */
body.halo-header-scrolled .elementor-254 .elementor-element.elementor-element-4dab5a17 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
body.halo-header-scrolled .elementor-254 .elementor-element-e4a2744 img {
    max-width: 70px !important;
}
body.halo-header-scrolled .elementor-254 .elementor-element-e4a2744 > .elementor-widget-container {
    margin-bottom: 0 !important;
}
@media (min-width: 1367px) {
    body.halo-header-scrolled .elementor-254 .elementor-element-e4a2744 img {
        max-width: 90px !important;
    }
}

/* --------------------------------------------------------------
 * 2.9 MARGIN-BOTTOM SYNC AVEC HERO COMPENSATION
 * --------------------------------------------------------------
 * Le hero accueil (s0, id `2fcbd48f`) a un margin-top négatif calibré
 * sur la hauteur du header (Elementor stocke en DB) :
 *   widescreen (≥ 2400) : -187   ← match wrapper bottom 187
 *   laptop (1025-1366)  : -53    ← BUG si wrapper bottom = 187 → 134px de gap
 *   tablet_extra (≥768) : -76    ← BUG si wrapper bottom = 260 → 184px de gap
 *   mobile (≤ 767)      : -78    ← BUG si wrapper bottom = 260 → 182px de gap
 *
 * Solution : on synchronise le margin-bottom du wrapper avec le margin-top
 * négatif du hero pour que le carrousel commence au top du viewport.
 *
 * Sur les pages internes (FAQ, Plans), pas de hero compensé : on garde
 * uniquement la hauteur réelle du header fixed (~70px).
 * -------------------------------------------------------------- */

/* Home : sync margin-bottom = -hero.margin-top par breakpoint */
@media (max-width: 1366px) and (min-width: 1025px) {
    body.home .elementor-254 .elementor-element.elementor-element-37f1d9ed {
        --margin-bottom: 53px !important;
        margin-bottom: 53px !important;
    }
}
@media (max-width: 1024px) and (min-width: 768px) {
    body.home .elementor-254 .elementor-element.elementor-element-37f1d9ed {
        --margin-bottom: 76px !important;
        margin-bottom: 76px !important;
    }
}
@media (max-width: 767px) {
    body.home .elementor-254 .elementor-element.elementor-element-37f1d9ed {
        --margin-bottom: 78px !important;
        margin-bottom: 78px !important;
    }
}

/* Pages internes : pas de compensation hero, juste la hauteur du header fixed */
body:not(.home) .elementor-254 .elementor-element.elementor-element-37f1d9ed {
    --margin-bottom: 70px !important;
    margin-bottom: 70px !important;
}
@media (max-width: 767px) {
    body:not(.home) .elementor-254 .elementor-element.elementor-element-37f1d9ed {
        --margin-bottom: 56px !important;
        margin-bottom: 56px !important;
    }
}

/* --------------------------------------------------------------
 * 2.10 ANIMATION D'APPARITION HEADER au load (subtle fade)
 * -------------------------------------------------------------- */
.elementor-254 .elementor-element.elementor-element-4dab5a17 {
    animation: haloHeaderFadeIn 0.6s ease both;
}
@keyframes haloHeaderFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------
 * 2.11 SUPPORT prefers-reduced-motion
 * -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .elementor-254 .elementor-element.elementor-element-4dab5a17,
    .elementor-254 .elementor-element-e4a2744 img,
    .elementor-254 .elementor-element-e4a2744 > .elementor-widget-container,
    .elementor-254 .elementor-element-560a0ce .elementor-heading-title,
    .elementor-254 .elementor-element-2d4b2d3f .elementor-button {
        transition: none !important;
        animation: none !important;
    }
}


/* ===========================================================================
 * 3. HERO — 3 BOUTONS (Planifier visite / Voir dispos / Visite virtuelle)
 *    Container parent : a939c00 (page accueil id=117)
 *    IDs : a939b7a, a939b7b, b3btn-visite
 *
 * Objectif : même taille (width, font, padding) en tablette ET mobile.
 *   Tablette (768–1024) : row, 3 boutons à largeur égale (flex: 1)
 *   Mobile  (≤ 767)     : column déjà géré par Elementor → stretch 100%
 * ========================================================================= */
@media (max-width: 1024px) {
    /* Style commun appliqué aux 3 boutons identiquement */
    .elementor-element-a939c00 > .elementor-widget-button .elementor-button {
        font-size: 13px !important;
        line-height: 1.3em !important;
        padding: 14px 18px !important;
        letter-spacing: 0.5px !important;
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
    }
}

/* Tablette : 3 boutons sur une ligne, largeurs égales */
@media (max-width: 1024px) and (min-width: 768px) {
    .elementor-element-a939c00 {
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }
    .elementor-element-a939c00 > .elementor-widget-button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
        --width: auto !important;
    }
}

/* Mobile : 3 boutons empilés à largeur identique */
@media (max-width: 767px) {
    .elementor-element-a939c00 > .elementor-widget-button {
        width: 100% !important;
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        --width: 100% !important;
    }
    .elementor-element-a939c00 > .elementor-widget-button .elementor-button {
        font-size: 14px !important;
        padding: 16px 20px !important;
    }
}