/**
 * btp-home-pin.css — Effet pin scroll cascade sur les 4 tuiles du hero
 * + pin stacked sur les rubriques suivantes (Agenda/Resto/Bar/Privatisation/Social).
 *
 * Au scroll du hero : la page se fige, chaque scroll-tick déploie
 * successivement Manger → Boire → Danser → Privatiser (même animation
 * que :hover), puis on entre dans la stack de rubriques qui se relayent
 * en sticky top:0 (effet "cards stacked").
 *
 * Tout est fluide (clamp/vw/vh) — s'adapte à toute taille de fenêtre
 * de 1024px à 3840px sans tailles fixes en px.
 *
 * Mobile <1024px : pin désactivé, scroll vertical natif.
 */

/* ============================================
   MENU COMPACT HOMEPAGE — refonte identité visuelle
   ============================================ */
@media (min-width: 1024px) {

    /* 2026-05-21 — Sur la home en mode compact, le menu kinetic est restylé
       à l'identique du look & feel des sidebars .btp-menu-app utilisées par
       les pages templates (/resa/, /programmation/, /privatisation/, /contact/).
       Pas de menu-app HTML sur la home (front-page.php n'a pas le wrapper),
       on prend donc la STRUCTURE existante du header (.btp-nav-kinetic > .btp-nav-list >
       .btp-nav-link[.btp-nav-prefix + .btp-nav-name]) et on la skin "menu-app".
       Items affichés : LE CARNET, LE BATEAU, LA CARTE, LES INFOS, avec préfixes
       SVG rotés -90° et titre horizontal Anton, couleur papier (#F5E6D3).
       Pas d'effet hover : état statique pour ne pas perturber la stack snap.
       Utilities (newsletter/socials) et adresse restent masquées (déjà dans le
       footer du site et bouton resa déjà présent à droite). */
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"] .btp-nav-utility,
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"] .btp-nav-address {
        display: none !important;
    }

    /* Sidebar container — Pin top-left, largeur 200px, sous le logo compact */
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"] {
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 200px !important;
        max-width: 200px !important;
        height: 100vh !important;
        padding: clamp(96px, 12vh, 144px) 24px 32px 32px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 999 !important;
    }
    /* Aucun pseudo overlay (anciens fonds) */
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"]::before,
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"]::after {
        display: none !important;
    }

    /* La nav-list devient une colonne sidebar style .btp-menu-nav */
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"] .btp-nav-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Chaque item — look .btp-menu-nav-link (paper, no chip, no blur) */
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"] .btp-nav-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 10px 8px !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: var(--btp-red-light) !important;
        text-decoration: none !important;
        font-family: 'Anton', 'Yapari', Impact, sans-serif !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
        cursor: pointer;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    /* AUCUN effet hover sur l'item — état statique permanent.
       Override TOUTES les modifs hover legacy de btp-nav-kinetic.css :
       - ligne 1305-1311 : gap:10px, padding:6px 10px (causait décalage visuel)
       - ligne 1323-1325 : nav-name color change
       - ligne 1327-1329 : nav-prefix color → blanc (causait flash blanc)
       - ligne 1315-1321 : nav-label gap:2px, opacity, transform */
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"] .btp-nav-link:hover {
        background: transparent !important;
        border: none !important;
        transform: none !important;
        opacity: 1 !important;
        color: var(--btp-red-light) !important;
        gap: 14px !important;      /* identique au state non-hover (override ligne 1309) */
        padding: 10px 8px !important;  /* identique au state non-hover (override ligne 1310) */
    }
    /* Force la nav-label à conserver son layout au hover */
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"] .btp-nav-link:hover .btp-nav-label {
        gap: 12px !important;
        opacity: 1 !important;
        margin: 0 !important;
        transform: none !important;
        max-width: none !important;
    }
    /* nav-name : couleur papier fixe (override ligne 1324) */
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"] .btp-nav-link:hover .btp-nav-name {
        color: var(--btp-red-light) !important;
        transform: none !important;
    }
    /* nav-prefix : COULEUR PAPIER (battre le white de la ligne 1328) — couleur fixe au hover */
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"] .btp-nav-link:hover .btp-nav-prefix {
        color: var(--btp-red-light) !important;
        fill: var(--btp-red-light) !important;
    }

    /* CRITICAL FIX 2026-05-21 v6 :
       btp-nav-kinetic.css ligne 680 force au hover : width:48px height:48px
       background:rouge transform:translateY(-2px) → l'item devient un "cercle picto"
       et nav-label devient un tooltip flottant (ligne 691-714).
       Sur la home en sidebar style menu-app, on NEUTRALISE complètement ce comportement.
       L'item reste à sa taille/style normal au hover (seul rotate du LE/LA actif). */
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"] .btp-nav-link:hover {
        width: auto !important;
        height: auto !important;
        padding: 10px 8px !important;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }
    /* Label : RESTE inline (pas tooltip flottant) au hover */
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"] .btp-nav-link .btp-nav-label,
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"] .btp-nav-link:hover .btp-nav-label {
        position: static !important;
        left: auto !important;
        top: auto !important;
        background: transparent !important;
        border: none !important;
        color: var(--btp-red-light) !important;
        padding: 0 !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        white-space: nowrap !important;
        z-index: auto !important;
        transform: none !important;
        transition: none !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* Préfixe LE/LA/LES — wrap FIXE 30×30 pour alignement constant.
       2026-05-23 : SVG limités à max 26x26 dans le wrap (object-fit centré)
       pour éviter les débords variables (LE 25px, LES 16px etc.) qui décalaient
       le nav-name horizontalement. Le SVG reste centré dans le wrap, tous
       les nav-name partent du MÊME x. */
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"] .btp-nav-prefix-wrap {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 30px !important;
        height: 30px !important;
        flex-shrink: 0 !important;
        opacity: 1 !important;
        max-width: 30px !important;
        overflow: hidden !important;
    }
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"] .btp-nav-prefix {
        display: block !important;
        width: 26px !important;
        height: 26px !important;
        max-width: 26px !important;
        max-height: 26px !important;
        color: var(--btp-red-light) !important;
        fill: var(--btp-red-light) !important;
        transform: rotate(-90deg) !important;
        transform-origin: center center !important;
        vertical-align: middle !important;
        overflow: visible !important;
        flex: 0 0 26px !important;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    /* SEUL effet hover gardé : LE/LA "se remet droit" (rotate 0°) au survol */
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"] .btp-nav-link:hover .btp-nav-prefix {
        transform: rotate(0deg) !important;
    }

    /* Label (wrapper du nom + prefix dans le markup header.php) — visible */
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"] .btp-nav-label {
        display: inline-flex !important;
        align-items: center !important;
        gap: 12px !important;
        max-width: none !important;
        opacity: 1 !important;
        margin: 0 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Icone topbar svg cachée — on garde uniquement le préfixe + nom */
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"] .btp-nav-icon {
        display: none !important;
    }

    /* Nom principal — Anton 22px paper, alignement horizontal */
    html body.home.btp-nav-compact .btp-nav-kinetic[data-state="compact"] .btp-nav-name {
        display: inline-block !important;
        font-family: 'Anton', 'Yapari', Impact, sans-serif !important;
        font-size: clamp(20px, 1.5vw, 26px) !important;
        font-weight: 400 !important;
        letter-spacing: 0.5px !important;
        color: var(--btp-red-light) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    /* Décalage du contenu stack pour laisser la place à la sidebar (200px + gap) */
    body.home.btp-nav-compact .btp-home-stack > section .btp-container {
        margin-left: max(240px, 14vw) !important;
    }

    /* Logo LE BATEAU PHARE pin haut-gauche : agrandi pour visibilité (32→48px) */
    html body.home.btp-nav-compact .btp-compact-logo {
        height: clamp(32px, 2.4vh, 48px) !important;
    }

    /* ============================================
       BOUTON RÉSERVATION (tab vertical right) — refonte identité papier
       Remplace le tab rouge plein par un tab "papier" sobre : fond navy
       semi-transparent + bordure paper + texte paper, aligné sur le pattern
       .btp-btn-logo-submit utilisé sur /resa/ et le reste du site éditorial.
       Specificité: html body.home + multiples body.btp-nav-compact selectors
       pour battre les règles de btp-resa-tab.css (lignes 88-110).
       ============================================ */
    html body.home .btp-btn-resa-fixed,
    html body.home.btp-nav-compact .btp-btn-resa-fixed {
        background: rgba(33, 47, 89, 0.78) !important;
        border: 1px solid var(--btp-red-light) !important;
        border-right: none !important;
        color: var(--btp-red-light) !important;
        box-shadow: -6px 4px 24px rgba(0, 0, 0, 0.35) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    html body.home .btp-btn-resa-fixed:hover,
    html body.home.btp-nav-compact .btp-btn-resa-fixed:hover {
        background: var(--btp-red-light) !important;
        color: var(--btp-primary) !important;
        border-color: var(--btp-red-light) !important;
        box-shadow: -10px 4px 32px rgba(245, 230, 211, 0.35) !important;
    }
    html body.home .btp-btn-resa-fixed .btp-btn-resa-text,
    html body.home.btp-nav-compact .btp-btn-resa-fixed .btp-btn-resa-text {
        color: inherit !important;
        font-family: 'Anton', 'Yapari', Impact, sans-serif !important;
        letter-spacing: 3px;
        font-weight: 400;
    }
    /* Barre indicatrice (::after) : paper plutôt que white pour cohérence */
    html body.home .btp-btn-resa-fixed::after,
    html body.home.btp-nav-compact .btp-btn-resa-fixed::after {
        background: rgba(245, 230, 211, 0.55) !important;
    }
    html body.home .btp-btn-resa-fixed:hover::after,
    html body.home.btp-nav-compact .btp-btn-resa-fixed:hover::after {
        background: rgba(33, 47, 89, 0.55) !important;
    }
}

/* ============================================
   DESKTOP — Pin stage hero (cascade tuiles)
   ============================================ */
@media (min-width: 1024px) {

    /* Stage refactor 2026-05-21 v6 : plus de sticky pin, le hero occupe
       juste 100vh statique. La cascade des 4 tuiles est gérée 100% en JS
       via toggle .is-active sans scroll natif (1 wheel = 1 tuile). */
    .btp-home-pin-stage {
        position: relative;
        height: 100vh;
    }

    .btp-home-pin-stage .btp-home-hero {
        position: relative;
        height: 100vh;
        min-height: 600px;
        margin: 0;
        padding: clamp(40px, 6vh, 80px) 0 clamp(30px, 4vh, 60px) !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }

    /* Hero content : largeur fluide jusqu'à 1600px sur grands écrans */
    .btp-home-pin-stage .btp-home-hero-content {
        max-width: min(95vw, 1600px) !important;
        padding: 0 clamp(16px, 2vw, 48px) !important;
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: center;
        gap: clamp(20px, 3vh, 48px);
    }

    .btp-home-pin-stage .btp-home-baseline {
        margin-bottom: 0 !important;
    }

    /* === Logo SVG : taille fluide, GARANTIT pas d'overflow horizontal ===
       Triple guard :
       1. SVG max-width : 60vw plafonné à 1000px (mode top = barre nav horizontale)
       2. Hero-content max-width : 90vw avec padding interne
       3. Hero pin-stage : overflow:hidden global pour clipper tout overflow */
    .btp-home-pin-stage .btp-hero-svg {
        max-width: min(60vw, 1000px) !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
    .btp-home-pin-stage .btp-home-hero-content {
        max-width: min(90vw, 1400px) !important;
    }
    .btp-home-pin-stage,
    .btp-home-pin-stage .btp-home-hero {
        overflow: hidden !important;
    }
    .btp-home-pin-stage .btp-home-baseline {
        width: 100% !important;
        overflow: hidden !important;
    }
    .btp-home-pin-stage .btp-hero-logo {
        width: 100% !important;
        overflow: hidden !important;
        max-width: 100% !important;
    }

    /* === Tuiles wrap : hauteur fluide vh, gap fluide === */
    .btp-home-pin-stage .btp-home-tuiles {
        height: clamp(420px, 60vh, 720px) !important;
        min-height: 0 !important;
        gap: clamp(4px, 0.5vw, 10px) !important;
    }

    /* === Padding tuiles fluide === */
    .btp-home-pin-stage .btp-tuile-content {
        padding: clamp(24px, 3vh, 56px) clamp(14px, 1.6vw, 32px) !important;
    }

    /* === H2 vertical (état défaut, tuile non active) === */
    .btp-home-pin-stage .btp-tuile-content h2 {
        font-size: clamp(20px, 1.8vw, 38px) !important;
        letter-spacing: clamp(2px, 0.3vw, 5px) !important;
    }

    /* === Icone SVG dans la tuile fluide === */
    .btp-home-pin-stage .btp-tuile-icon svg {
        width: clamp(32px, 3vw, 60px) !important;
        height: clamp(32px, 3vw, 60px) !important;
    }

    /* === Sub/CTA fluide === */
    .btp-home-pin-stage .btp-tuile-sub {
        font-size: clamp(12px, 1vw, 17px) !important;
    }
    .btp-home-pin-stage .btp-tuile-cta {
        font-size: clamp(11px, 0.9vw, 15px) !important;
    }

    /* === Tuile active pilotée par JS au scroll ===
       Reproduit pixel-perfect le comportement :hover existant
       (cf. btp-home-c.css lignes 141-193) sans dépendre du curseur. */

    .btp-home-tuiles.is-scroll-pin .btp-tuile {
        flex: 0.55 1 0 !important;
    }
    .btp-home-tuiles.is-scroll-pin .btp-tuile.is-active {
        flex: 2.8 1 0 !important;
    }

    /* h2 vertical → horizontal sur tuile active (fluide) */
    .btp-home-tuiles.is-scroll-pin .btp-tuile.is-active h2 {
        writing-mode: horizontal-tb !important;
        transform: rotate(0deg) !important;
        font-size: clamp(28px, 2.6vw, 56px) !important;
        letter-spacing: clamp(0px, 0.05vw, 2px) !important;
    }

    /* Sous-titre + CTA révélés sur tuile active */
    .btp-home-tuiles.is-scroll-pin .btp-tuile.is-active .btp-tuile-sub,
    .btp-home-tuiles.is-scroll-pin .btp-tuile.is-active .btp-tuile-cta {
        opacity: 1;
        transform: translateY(0);
    }

    /* Icône agrandie sur tuile active (fluide) */
    .btp-home-tuiles.is-scroll-pin .btp-tuile.is-active .btp-tuile-icon svg {
        width: clamp(40px, 3.8vw, 72px) !important;
        height: clamp(40px, 3.8vw, 72px) !important;
    }

    /* Overlay accent sur tuile active — navy accent au lieu de rouge */
    .btp-home-tuiles.is-scroll-pin .btp-tuile.is-active .btp-tuile-overlay {
        background: linear-gradient(180deg, rgba(33,47,89,0.3) 0%, rgba(33,47,89,0.85) 100%) !important;
    }

    /* Désactivation du double-état hover + active en mode scroll-pin */
    .btp-home-tuiles.is-scroll-pin:has(.btp-tuile:hover) .btp-tuile {
        flex: 0.55 1 0 !important;
    }
    .btp-home-tuiles.is-scroll-pin:has(.btp-tuile:hover) .btp-tuile.is-active {
        flex: 2.8 1 0 !important;
    }
    .btp-home-tuiles.is-scroll-pin:has(.btp-tuile:hover) .btp-tuile:hover:not(.is-active) h2 {
        writing-mode: vertical-rl !important;
        transform: rotate(180deg) !important;
        font-size: clamp(20px, 1.8vw, 38px) !important;
        letter-spacing: clamp(2px, 0.3vw, 5px) !important;
    }
    .btp-home-tuiles.is-scroll-pin:has(.btp-tuile:hover) .btp-tuile:hover:not(.is-active) .btp-tuile-sub,
    .btp-home-tuiles.is-scroll-pin:has(.btp-tuile:hover) .btp-tuile:hover:not(.is-active) .btp-tuile-cta {
        opacity: 0;
        transform: translateY(20px);
    }

    /* === Dots indicateurs progression (4) en bas du hero === */
    .btp-home-pin-progress {
        position: absolute;
        bottom: clamp(20px, 3vh, 48px);
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: clamp(8px, 0.8vw, 14px);
        z-index: 4;
        pointer-events: none;
    }
    .btp-home-pin-dot {
        width: clamp(7px, 0.6vw, 12px);
        height: clamp(7px, 0.6vw, 12px);
        border-radius: 50%;
        background: rgba(255,255,255,0.3);
        transition: background 0.4s ease, transform 0.4s ease;
    }
    .btp-home-pin-dot.is-active {
        background: var(--btp-red-light, #F5E6D3);
        transform: scale(1.4);
    }

    /* ============================================
       SNAP DIAPO rubriques — architecture 2026-05-21 v2
       ============================================
       BUG IDENTIFIÉ : scroll-snap-type:y mandatory permanent sur <html>
       fait que le browser auto-snap au target le plus proche dès le chargement
       → scrollY=0 saute direct à scrollY=heroEnd=3024 (agenda), la cascade
       hero est complètement skip. CONFIRMÉ par test Playwright 2026-05-21 12:01.

       FIX : retour au toggle dynamique via JS btp-home-pin.js (update() set
       scrollSnapType='y mandatory' UNIQUEMENT quand scrollY >= heroEnd). Avant
       heroEnd : snap-type=none → cascade hero 100% libre.

       Ici on définit juste les targets (snap-align) sans le scroll-snap-type
       sur html (qui est piloté par JS). */

    html {
        scroll-behavior: smooth;
        scroll-padding-top: 0;
        /* scroll-snap-type piloté dynamiquement par btp-home-pin.js */
    }

    .btp-home-stack {
        position: relative;
    }

    .btp-home-stack > section {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        min-height: 100vh;
        height: 100vh;
        display: flex;
        align-items: center;
        padding: clamp(40px, 6vh, 100px) 0 !important;
        overflow: hidden;
        /* Crossfade in à l'arrivée de la section dans le viewport */
        animation: btp-snap-in 0.7s ease-out both;
    }

    /* Footer : snap target accessible juste après la dernière section (social).
       Hauteur naturelle (contenu footer.php), pas de min-height 100vh forcé. */
    body.home .btp-footer {
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }

    @keyframes btp-snap-in {
        0% { opacity: 0; transform: translateY(40px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    /* Container interne : largeur fluide + padding-left large pour ne PAS
       chevaucher la nav fixed gauche (LE CARNET / LE BATEAU / LA CARTE / LES INFOS)
       qui occupe ~120px de gauche. */
    .btp-home-stack > section .btp-container {
        width: 100%;
        max-width: min(94vw, 1600px) !important;
        margin-left: max(160px, 9vw) !important;
        margin-right: max(80px, 4vw) !important;
        padding: 0 clamp(16px, 2vw, 32px) !important;
    }

    /* Section titles fluide */
    .btp-home-stack .btp-section-title {
        font-size: clamp(32px, 3.5vw, 64px) !important;
        line-height: 1.05 !important;
    }
    .btp-home-stack .btp-eyebrow {
        font-size: clamp(11px, 0.8vw, 14px) !important;
        letter-spacing: clamp(2px, 0.3vw, 4px) !important;
    }

    /* Resto split fluide + photo droite (miroir bar) */
    .btp-home-stack .btp-resto-split {
        gap: clamp(24px, 4vw, 64px) !important;
        align-items: stretch !important;
    }
    .btp-home-stack .btp-resto-photo {
        background-size: cover;
        background-position: center;
        border-radius: clamp(12px, 1.2vw, 24px);
        min-height: clamp(360px, 55vh, 620px);
        box-shadow: 0 24px 60px rgba(0,0,0,0.45);
    }

    /* Bar grid fluide */
    .btp-home-stack .btp-bar-grid {
        gap: clamp(24px, 4vw, 64px) !important;
    }
    .btp-home-stack .btp-bar-photo {
        height: clamp(320px, 50vh, 560px) !important;
    }

    /* Privatisation grid fluide */
    .btp-home-stack .btp-priv-grid {
        gap: clamp(16px, 2vw, 32px) !important;
    }
    .btp-home-stack .btp-priv-card {
        padding: clamp(20px, 2.5vw, 40px) !important;
    }
    .btp-home-stack .btp-priv-card h3 {
        font-size: clamp(20px, 1.8vw, 28px) !important;
    }

    /* Events grid fluide */
    .btp-home-stack .btp-home-events-grid {
        gap: clamp(16px, 1.8vw, 28px) !important;
    }

    /* Social grid fluide */
    .btp-home-stack .btp-social-grid {
        gap: clamp(20px, 2.5vw, 40px) !important;
    }

    /* ============================================
       Refonte social : layout asymétrique
       (Google rating en hero gauche + Instagram + Newsletter à droite empilés)
       ============================================ */
    .btp-home-stack .btp-social-section-modern .btp-social-grid {
        display: grid !important;
        grid-template-columns: 1.4fr 1fr !important;
        gap: clamp(28px, 3vw, 56px) !important;
        align-items: stretch !important;
    }
    .btp-social-section-modern .btp-social-col-right {
        display: flex !important;
        flex-direction: column !important;
        gap: clamp(20px, 2vw, 32px) !important;
    }
    .btp-social-block-card {
        position: relative;
        padding: clamp(32px, 3vw, 56px);
        border-radius: clamp(14px, 1.2vw, 24px);
        background: linear-gradient(135deg, rgba(245, 230, 211, 0.05), rgba(33, 47, 89, 0.4));
        border: 1px solid rgba(245, 230, 211, 0.12);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                    border-color 0.35s ease,
                    box-shadow 0.45s ease;
        overflow: hidden;
    }
    .btp-social-block-card:hover {
        transform: translateY(-4px);
        border-color: rgba(245, 230, 211, 0.32);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    }
    /* Carte Google rating — feature, plus grande, étoiles en hero */
    .btp-social-block-google {
        height: 100%;
        background:
            radial-gradient(120% 80% at 20% 0%, rgba(245, 230, 211, 0.12), transparent 60%),
            linear-gradient(135deg, rgba(196, 58, 58, 0.18), rgba(33, 47, 89, 0.5));
    }
    .btp-social-block-google .btp-social-rating {
        display: block;
        font-family: 'Anton', sans-serif;
        font-size: clamp(48px, 5vw, 88px) !important;
        color: var(--btp-red-light) !important;
        letter-spacing: 4px;
        line-height: 1;
        margin-bottom: clamp(12px, 1.2vw, 20px);
        text-shadow: 0 6px 24px rgba(245, 230, 211, 0.18);
    }
    .btp-social-block-google .btp-social-score {
        font-family: 'Anton', sans-serif;
        font-size: clamp(40px, 4.2vw, 72px) !important;
        color: var(--btp-white) !important;
        line-height: 1;
        margin: 0 0 8px;
        letter-spacing: -0.5px;
    }
    .btp-social-block-google .btp-social-score small {
        font-family: var(--font-body);
        font-size: clamp(13px, 1vw, 17px);
        color: rgba(245, 230, 211, 0.6);
        font-weight: 400;
        letter-spacing: 1px;
        margin-left: 8px;
        text-transform: uppercase;
    }
    .btp-social-block-google .btp-social-count {
        font-size: clamp(13px, 1vw, 16px);
        color: rgba(255, 255, 255, 0.55);
        letter-spacing: 2px;
        text-transform: uppercase;
        margin: 0;
    }
    .btp-social-block-google .btp-social-google-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: clamp(20px, 2vw, 32px);
        align-self: flex-start;
        font-family: 'Anton', sans-serif;
        font-size: 13px;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        color: var(--btp-red-light);
        text-decoration: none;
        padding: 12px 22px;
        border: 1px solid rgba(245, 230, 211, 0.35);
        border-radius: 999px;
        transition: all 0.3s ease;
    }
    .btp-social-block-google .btp-social-google-cta:hover {
        background: var(--btp-red-light);
        color: var(--btp-primary);
        border-color: var(--btp-red-light);
    }

    /* Cartes Instagram + Newsletter — colonne droite, hauteur égale */
    .btp-social-block-instagram,
    .btp-social-block-newsletter {
        flex: 1;
    }
    .btp-social-block-instagram .btp-social-icon-wrap,
    .btp-social-block-newsletter .btp-social-icon-wrap {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: rgba(245, 230, 211, 0.1);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--btp-red-light);
        margin-bottom: clamp(14px, 1.4vw, 20px);
    }
    .btp-social-block-instagram .btp-social-icon-wrap svg,
    .btp-social-block-newsletter .btp-social-icon-wrap svg {
        width: 24px;
        height: 24px;
    }
    .btp-social-block-instagram .btp-eyebrow,
    .btp-social-block-newsletter .btp-eyebrow {
        font-family: var(--font-body);
        font-size: 11px !important;
        letter-spacing: 3px !important;
        text-transform: uppercase;
        color: var(--btp-red-light) !important;
        font-weight: 700;
        margin-bottom: 8px;
    }
    .btp-social-block-instagram .btp-social-handle {
        font-family: 'Anton', sans-serif;
        font-size: clamp(22px, 2vw, 32px);
        color: var(--btp-white);
        margin: 0 0 16px;
        letter-spacing: 0.5px;
    }
    .btp-social-block-newsletter p {
        color: rgba(255, 255, 255, 0.7);
        font-size: clamp(13px, 0.95vw, 15px);
        line-height: 1.55;
        margin: 0 0 16px;
    }
    .btp-social-block-newsletter .btp-newsletter-inline {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    .btp-social-block-newsletter .btp-newsletter-inline input[type="email"] {
        flex: 1 1 200px;
        min-width: 0;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(245, 230, 211, 0.18);
        border-radius: 999px;
        padding: 12px 18px;
        color: var(--btp-white);
        font-size: 14px;
        font-family: var(--font-body);
        outline: none;
        transition: border-color 0.25s ease, background 0.25s ease;
    }
    .btp-social-block-newsletter .btp-newsletter-inline input[type="email"]:focus {
        border-color: var(--btp-red-light);
        background: rgba(255, 255, 255, 0.1);
    }
    .btp-social-block-newsletter .btp-newsletter-inline input[type="email"]::placeholder {
        color: rgba(245, 230, 211, 0.4);
    }
    .btp-social-block-newsletter .btp-newsletter-inline button {
        flex: 0 0 auto;
        background: var(--btp-red-light);
        color: var(--btp-primary);
        border: 1px solid var(--btp-red-light);
        border-radius: 999px;
        padding: 12px 22px;
        font-family: 'Anton', sans-serif;
        font-size: 12px;
        letter-spacing: 2px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .btp-social-block-newsletter .btp-newsletter-inline button:hover {
        background: transparent;
        color: var(--btp-red-light);
    }

    /* Animation arrival douce (stagger) */
    .btp-social-section-modern .btp-social-block-card {
        opacity: 0;
        transform: translateY(30px);
        animation: btp-social-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .btp-social-section-modern .btp-social-block-google { animation-delay: 0.1s; }
    .btp-social-section-modern .btp-social-block-instagram { animation-delay: 0.25s; }
    .btp-social-section-modern .btp-social-block-newsletter { animation-delay: 0.4s; }
    @keyframes btp-social-rise {
        to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 1200px) {
        .btp-home-stack .btp-social-section-modern .btp-social-grid {
            grid-template-columns: 1fr !important;
        }
        .btp-social-block-google { min-height: 360px; }
    }

}

/* ============================================
   MOBILE — Désactive le pin, scroll natif
   ============================================ */
@media (max-width: 1023px) {
    /* Désactive le snap sur mobile (scroll natif vertical libre) */
    html {
        scroll-snap-type: none;
    }
    .btp-home-pin-stage {
        height: auto;
    }
    .btp-home-pin-stage .btp-home-hero {
        position: relative;
        height: auto;
    }
    .btp-home-pin-progress {
        display: none;
    }
    .btp-home-stack > section {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        scroll-snap-align: none;
    }
    body.home .btp-footer {
        scroll-snap-align: none;
    }
    /* Resto split mobile : photo visible avec hauteur, grid en 1 col */
    .btp-home-stack .btp-resto-split {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        align-items: stretch !important;
    }
    .btp-home-stack .btp-resto-photo {
        min-height: clamp(220px, 38vh, 320px) !important;
        height: clamp(220px, 38vh, 320px) !important;
        border-radius: 12px;
        background-size: cover;
        background-position: center;
        order: -1; /* photo en premier sur mobile */
    }
    /* Bar grid mobile aussi */
    .btp-home-stack .btp-bar-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .btp-home-stack .btp-bar-photo {
        height: clamp(220px, 38vh, 320px) !important;
        order: -1;
    }
    /* Containers stack : retire margin-left desktop (la sidebar n'existe pas en mobile) */
    .btp-home-stack > section .btp-container {
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 16px !important;
        max-width: 100vw !important;
    }
    /* Social mobile : layout colonne, gap réduit */
    .btp-home-stack .btp-social-section-modern .btp-social-grid {
        display: flex !important;
        flex-direction: column;
        gap: 20px;
    }
    .btp-social-section-modern .btp-social-col-right {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .btp-social-block-card {
        padding: 28px 24px;
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(245, 230, 211, 0.05), rgba(33, 47, 89, 0.4));
        border: 1px solid rgba(245, 230, 211, 0.12);
    }
    .btp-social-block-google .btp-social-rating {
        font-family: 'Anton', sans-serif;
        font-size: 40px;
        color: var(--btp-red-light);
        letter-spacing: 3px;
        line-height: 1;
        margin-bottom: 12px;
        display: block;
    }
    .btp-social-block-google .btp-social-score {
        font-family: 'Anton', sans-serif;
        font-size: 32px;
        color: var(--btp-white);
        margin: 0 0 6px;
    }
    .btp-social-block-google .btp-social-count {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.55);
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin: 0;
    }
    .btp-social-block-instagram .btp-social-handle {
        font-family: 'Anton', sans-serif;
        font-size: 22px;
        color: var(--btp-white);
        margin: 4px 0 14px;
    }
    .btp-social-block-newsletter .btp-newsletter-inline {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
    }
    .btp-social-block-newsletter .btp-newsletter-inline input[type="email"] {
        flex: 1 1 100%;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(245, 230, 211, 0.18);
        border-radius: 999px;
        padding: 10px 16px;
        color: var(--btp-white);
        font-size: 14px;
        outline: none;
    }
    .btp-social-block-newsletter .btp-newsletter-inline button {
        background: var(--btp-red-light);
        color: var(--btp-primary);
        border: none;
        border-radius: 999px;
        padding: 10px 20px;
        font-family: 'Anton', sans-serif;
        font-size: 12px;
        letter-spacing: 2px;
        text-transform: uppercase;
        cursor: pointer;
    }
    .btp-social-block-google .btp-social-google-cta,
    .btp-social-block-instagram .btp-social-google-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: 'Anton', sans-serif;
        font-size: 12px;
        letter-spacing: 2px;
        color: var(--btp-red-light);
        text-decoration: none;
        padding: 10px 18px;
        border: 1px solid rgba(245, 230, 211, 0.35);
        border-radius: 999px;
        text-transform: uppercase;
        margin-top: 14px;
    }
}