@font-face{font-family:'Signika';src:url('/medias/2026/04/fonts/signika-700-latin-ext.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Signika';src:url('/medias/2026/04/fonts/signika-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root {
    --jb-vert: #14544A;
    --jb-vert-clair: #24633e;
    --jb-or: #7C6145;
    --jb-or-clair: #c9a684;
    --jb-beton: #e8e4e0;
    --jb-beton-light: #f0edea;
    --jb-text: #2a2520;
    --marron-fonce: #493828;  /* Marron foncé profond — accents premium */
    --gris-fonce: #474544;    /* Gris foncé chaud — texte secondaire / séparateurs */
    --jb-eras: 'Signika', 'Trebuchet MS', sans-serif;
    --jb-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* === SYSTEME TYPOGRAPHIQUE CANONIQUE (2026-05-21) ===
       Toujours via variable, jamais en dur.
       --jb-title  : titres (= --jb-eras, conserve pour compat les 32 usages existants)
       --jb-body   : corps / nav / boutons / champs de formulaire (Inter -> systeme sans-serif)
       --jb-serif  : serif STANDARD du site = PT Serif (decision client 2026-05-21 ; police OFL
                     AUTO-HEBERGEE en woff2 dans /uploads/2026/04/fonts/, RGPD-safe, jamais Google CDN).
                     S'affiche partout mobile inclus (Constantia/Lora ne couvraient pas mobile/Mac).
                     Reponses FAQ, citations/avis, intros. Fallback Georgia/Times systeme.
       --jb-lora   : Lora reservee a la differenciation PONCTUELLE (non utilisee par defaut, woff2 charge dispo).
       --jb-decor  : guillemets / textes decoratifs (Playfair Display, inchange). */
    --jb-title: var(--jb-eras); /* alias canonique titres ; --jb-eras conserve (32 usages existants) reste la source */
    --jb-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
    --jb-lora: 'Lora', Georgia, serif;
    --jb-decor: 'Playfair Display', Georgia, serif;
    --jb-shadow-tordu: 6px 8px 14px rgba(0,0,0,0.18), 2px 4px 6px rgba(0,0,0,0.10);
    --jb-shadow-tordu-form: 4px 6px 10px rgba(0,0,0,0.08), 2px 3px 5px rgba(0,0,0,0.05);
    --jb-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* === TOKENS (additif 2026-05-21, Lot 1) — DÉFINITIONS aux valeurs actuelles exactes ===
       Étape additive : on déclare les variables ; le remplacement des valeurs en dur se fait
       par lots conservateurs (uniquement quand byte-équivalent). Jamais dans une data-URI/SVG. */
    /* Couleurs récurrentes pas encore en variable */
    --jb-yellow: #f5b400;        /* étoiles avis (fill) */
    --jb-error:  #BA372A;        /* erreurs de formulaire (bordure/texte) */
    /* Rayons les plus fréquents */
    --jb-radius-2:   2px;
    --jb-radius-4:   4px;
    --jb-radius-6:   6px;
    --jb-radius-8:   8px;
    --jb-radius-10:  10px;
    --jb-radius-12:  12px;
    --jb-radius-14:  14px;
    --jb-radius-pill: 999px;     /* pilule / bouton arrondi */
    --jb-radius-circle: 50%;     /* puces, ronds */
    /* Ombres répétées */
    --jb-shadow-gold:         8px 12px 22px rgba(0,0,0,0.22), 0 0 24px rgba(124,97,69,0.45);  /* ombre dorée standard (×7) */
    --jb-shadow-gold-intense: 8px 14px 26px rgba(0,0,0,0.30), 0 0 26px rgba(124,97,69,0.55);  /* variante survol/accent (×2) */
    --jb-shadow-light:        0 4px 14px rgba(0,0,0,0.10);                                       /* ombre douce (×2) */
    /* Blurs récurrents (verre) — valeurs numériques (échelle) */
    --jb-blur-1-5: blur(1.5px);
    --jb-blur-2:  blur(2px);
    --jb-blur-4:  blur(4px);
    --jb-blur-6:  blur(6px);
    --jb-blur-8:  blur(8px);
    --jb-blur-10: blur(10px);
    --jb-blur-15: blur(15px);
    --jb-blur-20: blur(20px);
    --jb-blur-24: blur(24px);
    --jb-blur-26: blur(26px);
    /* Glassmorphisme — alias SÉMANTIQUES (Lot 2, lossless ; chaque contexte garde son blur)
       Le glass n'est PAS uniforme : header/cards = fort (20px), panels = très fort (24/26px),
       footer/badges = moyen (4-8px), FAQ/AR/form = subtil (1.5-2px). Aliases = lisibilité, valeur inchangée. */
    --jb-glass-blur:      var(--jb-blur-20); /* verre standard : cards, header beside-logo, popups */
    --jb-glass-blur-sm:   var(--jb-blur-2);  /* verre subtil : FAQ/AR/form (desktop only) */
    --jb-glass-blur-xs:   var(--jb-blur-1-5);/* verre très subtil : carrousel avis, badges */
    --jb-glass-blur-md:   var(--jb-blur-8);  /* verre moyen : champs form focus, badges */
    --jb-glass-blur-lg:   var(--jb-blur-24); /* verre fort : panneau menu mobile ouvert */
    /* Espacements récurrents */
    --jb-space-xs:  8px;
    --jb-space-sm:  14px;
    --jb-space-md:  22px;
    --jb-space-lg:  38px;
    --jb-space-xl:  48px;
}

/* Surlignage souris : marron-beige or-bois (coherent "Ebeniste Agenceur")
   - override du ::selection Astra (bleu/vert accent theme) */
::selection { background: var(--jb-or) !important; color: #fff !important; }
::-moz-selection { background: var(--jb-or) !important; color: #fff !important; }
:root { --jb-truncate-threshold: 400 !important; } /* seuil baisse : galeries larges/courtes (layout global 4-8 col) redeclenchent le Voir plus */

/* === FAQ + bloc 3D/RA — GENERALISE a toutes les pages produits
       (etait scope page-id-6 ; classes specifiques aux pages produits) === */
.jb-faq-enrich summary { font-size: 1.18rem !important; }
.jb-faq-enrich details p {
    font-family: var(--jb-serif) !important; /* serif standard Constantia (ex-Lora) — reponses FAQ ; titres summary restent ErasBold */
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    color: #333 !important;
    font-style: normal !important;
}
.jb-faq-enrich details {
    transition: background .25s ease, box-shadow .25s ease;
}
.jb-faq-enrich details:hover,
.jb-faq-enrich details[open] {
    background: rgba(251, 249, 245, 0.14) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.30),
        0 6px 22px rgba(20, 84, 74, 0.10),
        0 12px 30px rgba(73, 56, 40, 0.10);
}
.jb-ar-inline-link {
    background: rgba(124,97,69,0.08);
    border: 1px solid rgba(124,97,69,0.35);
    border-radius: 14px;
    padding: 22px 26px !important;
    container-type: inline-size;
}
.jb-ar-inline-link .jb-ar-text {
    display: block;
    font-family: 'Signika','Arial Black',Impact,sans-serif;
    color: var(--jb-vert);
    font-size: clamp(0.55rem, 2.15cqi, 1.3rem);
    line-height: 1.4;
    margin-bottom: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}
.jb-ar-inline-link .jb-ar-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--jb-vert);
    color: #fff !important;
    font-family: 'Signika','Arial Black',Impact,sans-serif;
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: 14px 26px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(20,84,74,0.28);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.jb-ar-inline-link .jb-ar-cta-btn strong { color: #fff; }
.jb-ar-inline-link .jb-ar-cta-btn .jb-cta-hl { color: var(--jb-or) !important; font-size: 1.12em; }
.jb-ar-inline-link .jb-ar-cta-btn:hover .jb-cta-hl { color: var(--marron-fonce) !important; }
.jb-ar-inline-link .jb-ar-cta-btn:hover {
    background: var(--jb-or);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(124,97,69,0.34);
}
/* "CHEZ VOUS" flou = text-shadow blanc herite de .entry-content p (glow beton).
   Le bloc 3D/RA est un <p> → herite ; on coupe sur le bouton (texte clair/dore
   sur vert, le glow beton n'a pas lieu d'etre et cree un halo). */
.jb-ar-inline-link .jb-ar-cta-btn,
.jb-ar-inline-link .jb-ar-cta-btn * { text-shadow: none !important; }
/* MOBILE : 1ere phrase lisible (le nowrap + clamp cqi la reduisait a ~0.55rem)
   + bouton plus compact (etait surdimensionne, texte sur 2 lignes). Desktop = inchange. */
@media (max-width: 768px), (orientation:landscape) and (max-height:500px) {
    .jb-ar-inline-link { padding: 18px 18px !important; }
    .jb-ar-inline-link .jb-ar-text {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: clamp(1rem, 4.4vw, 1.2rem) !important;
        line-height: 1.35 !important;
        margin-bottom: 14px !important;
    }
    .jb-ar-inline-link .jb-ar-cta-btn {
        font-size: 0.82rem !important;
        padding: 11px 16px !important;
        gap: 7px !important;
    }
    .jb-ar-inline-link .jb-ar-cta-btn .jb-cta-hl { font-size: 1.04em !important; }
}
/* Verre depoli (blur 2px) sur fond FAQ + cadre 3D/RA — DESKTOP ONLY
   (backdrop-filter au-dessus du beton fixed = mort GPU mobile, CLAUDE.md) */
@media (min-width: 1024px) {
    .jb-faq-enrich details,
    .jb-ar-inline-link {
        -webkit-backdrop-filter: var(--jb-blur-2);
        backdrop-filter: var(--jb-blur-2);
    }
}

/* G1 — agrandir le texte des 4 etapes (process) a la taille de l'accroche.
   Scope strict : 5 page-ids du groupe Coeur. Hors G1 = inchange. */
body.page-id-4 .jb4wood-services-text p,
body.page-id-11 .jb4wood-services-text p,
body.page-id-6 .jb4wood-services-text p,
body.page-id-7 .jb4wood-services-text p,
body.page-id-242 .jb4wood-services-text p {
    font-size: clamp(1.2rem, 2.2vw, 1.45rem) !important;
    line-height: 1.55 !important;
}

/* G1 desktop — process "Comment ca se passe ?" : reactive les <br>
   auteur (masques par defaut >=769px) => chaque bloc = ses 2-3 lignes
   exactes. Pas de nowrap. Scope strict 5 page-ids G1. */
@media (min-width: 769px) {
body.page-id-4 .jb4wood-services-item p br,
body.page-id-11 .jb4wood-services-item p br,
body.page-id-6 .jb4wood-services-item p br,
body.page-id-7 .jb4wood-services-item p br,
body.page-id-242 .jb4wood-services-item p br {
        display: inline !important;
    }
    body.page-id-4 .jb4wood-services-item p,
    body.page-id-11 .jb4wood-services-item p,
    body.page-id-6 .jb4wood-services-item p,
    body.page-id-7 .jb4wood-services-item p,
    body.page-id-242 .jb4wood-services-item p {
        white-space: nowrap !important;
    }
}

/* === 2. FOND BÉTON GLOBAL avec PARALLAX JS ===
   Refonte 04/2026 (3 breakpoints précis pour éviter pixelisation tablette/iPad 11"):
   - Desktop large ≥ 1440px : cover repeat-y (le parallax JS décale background-position-y)
   - Desktop standard / tablette 769→1439px : tile 1024px repeat
   - Mobile ≤ 768px : tile 600px repeat
   Tous breakpoints : background-attachment scroll (le JS gère le parallax = texture défile 40% du scroll) */
body {
    background-color: var(--jb-beton) !important;
    background-image: none !important;            /* l'image est maintenant sur body::before */
    --bg-y: 0px;                                  /* CSS variable contrôlée par le JS parallax */
    font-family: var(--jb-body);
    color: var(--jb-text);
}
/* Texture béton dans un pseudo-element pour permettre filter:brightness/contrast
   sans affecter le texte. Le contenu naturel du site reste net dessus. */
/* FIABILITE iPad/tactile (2026-05-23) : sur appareil tactile, le JS pose body.jb-no-parallax
   (--bg-y ne bouge plus) ; on retire AUSSI le will-change pour que ce calque fixe plein ecran ne
   soit plus promu/re-rasterise en continu. Le backdrop-filter du header ne re-echantillonne donc
   plus un calque qui bouge a chaque frame => fin du repaint/frame qui faisait planter Safari iPad
   apres quelques minutes. La texture reste affichee (statique). Desktop souris = inchange. */
body.jb-no-parallax::before { will-change: auto !important; }
/* MENU OUVERT : on NE TOUCHE PAS au fond (pas de flou, pas d'assombrissement).
   Tailles ajustées 05/2026 : +15% pour mieux voir les effets de transparence
   tout en gardant la finesse de la texture. */
@media (min-width: 1440px) {
}
@media (max-width: 1439px) and (min-width: 769px) {
}
@media (max-width: 768px) {
}
.site, #page, .ast-container, .site-content, #content {
    background-color: transparent !important;
}

/* ====================================================================
 * MODIF #23 (Lot 5 v9.5, 29/04/2026) — FIX overflow horizontal mobile
 * Bug : page débordait à gauche au swipe (J de JB4WOOD hors écran).
 * Cause identifiée par audit Playwright :
 *  - .jb4wood-presse-track : 825px de large dans viewport 390px (déborde -240px gauche)
 *  - .jb-hero-fullscreen : 100vw + margin négatif → calcul imparfait sur iOS
 *  - .jb4wood-hero-controls / fullscreen / audio-tooltip dépassent à droite
 * ==================================================================*/
html,
body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-x: clip;
    position: relative;
}
html, body, #page, .site, #content, .site-content, .ast-container,
.entry-content, article, main, header, footer, section, nav {
    max-width: 100vw !important;
}

/* MOBILE : neutralise les "full bleed" qui débordent sur petite viewport */
@media (max-width: 1024px) {
    .jb4wood-hero-wrapper,
    .jb-hero-fullscreen,
    .jb4wood-hero-video,
    .home .jb4wood-hero-video,
    .home .jb4wood-hero-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .jb-hero-fullscreen video,
    .jb4wood-hero-wrapper video,
    .jb4wood-hero-video video {
        width: 100% !important;
        max-width: 100vw !important;
    }
    /* Bandeau presse : track ne doit pas dépasser ; flex-wrap forcé */
    .jb4wood-presse {
        overflow: hidden !important;
        max-width: 100vw !important;
    }
    .jb4wood-presse-track {
        /* Marquee horizontal : pas de wrap (sinon les logos passent sur 3 lignes) */
        flex-wrap: nowrap !important;
        max-width: none !important;
        width: max-content !important;
        margin: 0 !important;
    }
    /* Hero controls : reste dans le viewport */
    .jb4wood-hero-controls,
    .jb4wood-audio-tooltip {
        max-width: calc(100vw - 16px) !important;
        right: 8px !important;
        box-sizing: border-box !important;
    }
}

/* ====================================================================
 * GLASSMORPHISM iOS 26 (modif #3, 04/2026) — utilitaire .jb-glass
 * À combiner sur containers : cards, popups, header sticky, lightbox meta
 * ==================================================================*/
.jb-glass,
.jb4wood-presta-card,
.jb-avis-card,
.jb-card,
.jb4wood-avis-card,
.leaflet-popup-content-wrapper,
.jb-lightbox-meta {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: var(--jb-blur-20);
    backdrop-filter: var(--jb-blur-20);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 8px 32px rgba(20, 84, 74, 0.12),
        0 0 1px rgba(73, 56, 40, 0.05) !important;
    border-radius: 14px !important;
}
/* Variant vert pour cards sur fond clair */
.jb-glass-vert {
    background: rgba(20, 84, 74, 0.12) !important;
    -webkit-backdrop-filter: var(--jb-blur-20);
    backdrop-filter: var(--jb-blur-20);
    border: 1px solid rgba(20, 84, 74, 0.25) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 8px 32px rgba(20, 84, 74, 0.18) !important;
    border-radius: 14px !important;
}
/* Lightbox meta : texte blanc → fond plus sombre pour rester lisible */
.jb-lightbox-meta {
    background: rgba(20, 26, 34, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}
.jb-lightbox-meta h2,
.jb-lightbox-meta .jb-lightbox-desc { color: #fff !important; }
/* Popup Leaflet : tip aussi en blanc translucide */
.leaflet-popup-tip { background: rgba(255, 255, 255, 0.55) !important; }
@media (max-width: 768px), (orientation:landscape) and (max-height:500px) {
  .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* === HEADER GLASSMORPHISM iOS 26 (Lot 4 — vraiment visible style pulsor.agency) === */
@media (min-width: 1024px) {
    #masthead {
        background: transparent !important;
        /* Backdrop-filter déplacé sur #masthead::before pour permettre fade-out vers le bas */
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        transition: background 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                    box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                    padding 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                    border-color 0.4s ease;
    }
    /* Glass effect porté par ::before avec mask-image multi-stops + zone de fade ÉTENDUE
       60px sous le masthead (bottom: -60px). Le dégradé continue donc dans le hero pour
       éviter tout "gap" visible entre la zone bien floutée et la zone nette. */
    #masthead::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: -60px;          /* déborde de 60px sous le masthead → fade plus long et fluide */
        -webkit-backdrop-filter: var(--jb-blur-15);
        backdrop-filter: var(--jb-blur-15);
        /* === JB-VOILE-BANDEAU (04/08/2026) — voile crème à 76 %, décidé par Jérémy.
           AVANT : ce bandeau ne posait aucune couleur, il ne faisait que flouter.
           Le menu tombait à 1,01:1 sur la vidéo sombre de l'accueil (mesuré sur
           11 images ; aucune n'atteignait 4,5:1). APRÈS, sur noir pur : brun
           5,77:1 · vert 4,52:1 · logo 7,83:1 — tout au-dessus du seuil.
           C'est le VERT (lien actif + « Devis gratuit ») qui a imposé 76 : il
           n'était qu'à 3,87:1 à 70 %.
           Le voile est plein là où vit le menu (0 → 55 % ; le menu s'arrête à
           51 %) puis s'efface avant la fin. ⚠️ NE PAS TOUCHER au mask-image
           ci-dessus : c'est le dégradé du bas, que Jérémy veut à l'identique. */
        background-color: rgba(248,245,240,0.76);   /* PLAT : la descente est faite par le masque */

        /* Multi-stops pour une courbe sigmoïde douce — plus de "marche" perceptible */
        -webkit-mask-image: linear-gradient(to bottom,
                black 0%,
                black 60%,
                rgba(0,0,0,0.972) 64%,
                rgba(0,0,0,0.896) 68%,
                rgba(0,0,0,0.784) 72%,
                rgba(0,0,0,0.648) 76%,
                rgba(0,0,0,0.500) 80%,
                rgba(0,0,0,0.352) 84%,
                rgba(0,0,0,0.216) 88%,
                rgba(0,0,0,0.104) 92%,
                rgba(0,0,0,0.028) 96%,
                transparent 100%);
        mask-image: linear-gradient(to bottom,
                black 0%,
                black 60%,
                rgba(0,0,0,0.972) 64%,
                rgba(0,0,0,0.896) 68%,
                rgba(0,0,0,0.784) 72%,
                rgba(0,0,0,0.648) 76%,
                rgba(0,0,0,0.500) 80%,
                rgba(0,0,0,0.352) 84%,
                rgba(0,0,0,0.216) 88%,
                rgba(0,0,0,0.104) 92%,
                rgba(0,0,0,0.028) 96%,
                transparent 100%);
        pointer-events: none;
        transition: backdrop-filter 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    /* S'assurer que tout le contenu (logo, menu, CTA) reste au-dessus du ::before */
    #masthead > * {
        position: relative;
        z-index: 1;
    }
    /* État scrolled : glass plus intense (blur+) sur le ::before qui fade en bas.
       Aucune box-shadow → fusion propre avec le contenu (demande user). */
    #masthead.jb-scrolled {
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-bottom: 1px solid transparent;
        box-shadow: none;
    }
    #masthead.jb-scrolled::before {
        -webkit-backdrop-filter: var(--jb-blur-24);
        backdrop-filter: var(--jb-blur-24);
    }
    /* Override Astra : .ast-primary-header-bar a un background-color via var() qui pose
       le bandeau blanc visible + un border-bottom (variable --ast-global-color-subtle-background)
       qui apparaît comme un trait fin au milieu de la zone header. On retire les deux. */
    .ast-primary-header-bar,
    .ast-primary-header-bar.main-header-bar,
    .main-header-bar {
        background: transparent !important;
        background-color: transparent !important;
        border-bottom: 0 !important;
        border-bottom-width: 0 !important;
    }
}
/* === Containers : transparents, fond béton visible (suppression bandeau blanc) === */
.entry-content,
.site-main > article,
article.post,
article.page {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;            /* contenu collé haut/bas (header → contenu → footer) */
    box-shadow: none !important;
    backdrop-filter: none !important;
}
/* === Espace haut/bas serré : contenu collé au header et au footer sur toutes les pages === */
#primary,
.site-content,
.site-main {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.entry-header {
    margin-top: 0 !important;
    margin-bottom: 0.6rem !important;       /* Astra natif 1.5em → 0.6rem (juste un peu de respiration sous le titre h1) */
    padding-top: 0.3rem !important;
    padding-bottom: 0 !important;
}
.entry-content > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.entry-content > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* Page Mes réalisations + Atelier d'embauche : titre h1 masqué → entry-header complètement aplatie */
body.page-id-11 .entry-header,
body.page-id-10 .entry-header {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
body.page-id-11 .entry-title,
body.page-id-11 h1.entry-title,
body.page-id-10 .entry-title,
body.page-id-10 h1.entry-title {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
}
/* Pages avec hero pleine largeur : padding/marges normaux retirés */
.home .entry-content,
.page-template-no-header-footer .entry-content {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
/* Sections de l'accueil : pas de fond blanc imposé — chaque card gardera le sien */
.home .entry-content > section,
.home .entry-content > div,
.home .entry-content > p {
    background: transparent;
    border-radius: 0;
    margin: 1.25rem auto;
    padding: 1.5rem clamp(1rem, 3vw, 2.5rem);
    max-width: 1200px;
    box-shadow: none;
}
.home .jb4wood-hero-video,
.home .jb4wood-hero-wrapper,
.home .jb4wood-presse {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    margin: 2rem 0 !important;
}
/* === Hero : ombres autour de la vidéo (réglage user 05/2026) ==============
   Padding vertical asymétrique : 18px top (subtil) + 25px bottom (compense
   le bg solide --beton-light de .jb4wood-accroche qui suit).
   Opacité max 0.4 → la texture béton du body reste visible.
   line-height: normal car le wrapper a line-height: 0 qui peut tronquer les pseudos. */
.home .jb4wood-hero-wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 22px !important;
    padding-bottom: 30px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    background: transparent !important;
}
.home .jb4wood-hero-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0; right: 0;
    height: 22px;
    line-height: normal;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.10) 50%,
        rgba(0, 0, 0, 0.26) 100%
    );
    pointer-events: none;
    z-index: 1;
}
.home .jb4wood-hero-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    height: 32px;
    line-height: normal;
    display: block;
    background: linear-gradient(to top,
        transparent 0%,
        rgba(0, 0, 0, 0.18) 55%,
        rgba(0, 0, 0, 0.38) 100%
    );
    pointer-events: none;
    z-index: 1;
}
/* MOBILE/TABLETTE (<1024px) : on réduit le padding-bottom du wrapper (30→18px)
   pour remonter la vidéo / supprimer la bande pâle sous elle, et on cale
   l'::after sur cette hauteur (18px) → ombre au ras du bas de la vidéo,
   AUCUN pixel mangé. Desktop (≥1024px) non concerné : ::after déjà display:none. */
@media (max-width: 1023px) {
    .home .jb4wood-hero-wrapper { padding-bottom: 18px !important; }
    .home .jb4wood-hero-wrapper::after { height: 18px !important; }
}
/* === Bandeau presse : logos en couleur (override grayscale inline du post 4) === */
.jb4wood-presse-item {
    filter: none !important;
    opacity: 1 !important;
}
.jb4wood-presse-item img {
    filter: none !important;
}

/* PERF : pause CTA shimmer + orbit quand le bloc accroche est hors viewport
   (la classe .jb-out-of-view est ajoutée/retirée par IO ci-dessous dans le JS) */
.jb4wood-accroche.jb-out-of-view .hero-btns a::before {
    animation-play-state: paused !important;
}

/* === Shimmer premium sur CTA hero (effet luxe, sweep diagonal) ===========
   Pseudo ::before traverse le bouton avec une longue pause entre 2 passes.
   Performance : transform GPU-accelerated, pas de repaint sur left/top. */
.jb4wood-accroche .hero-btns a {
    position: relative !important;
    overflow: hidden !important;
}
.jb4wood-accroche .hero-btns a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 35%,
        rgba(255, 255, 255, 0.48) 50%,
        transparent 65%
    );
    transform: translateX(-110%) skewX(-22deg);
    pointer-events: none;
    z-index: 1;
    animation: jb-cta-shimmer 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: 1.5s;
}
.jb4wood-accroche .hero-btns a.secondary {
    border-color: transparent !important;
    background-clip: padding-box !important;
}
.jb4wood-accroche .hero-btns a.secondary::before {
    inset: 0 !important;
    border-radius: 4px !important;
    padding: 2px !important;
    background: conic-gradient(
        from var(--jb-orbit, 0deg),
        var(--jb-vert) 0deg,
        var(--jb-vert) 270deg,
        var(--jb-or) 305deg,
        #fff7e0 340deg,
        var(--jb-or) 350deg,
        var(--jb-vert) 360deg
    ) !important;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
            mask-composite: exclude !important;
    transform: none !important;
    animation: jb-cta-orbit 4s linear infinite !important;
    animation-delay: 0s !important;
    z-index: 1;
}
@property --jb-orbit {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes jb-cta-orbit {
    to { --jb-orbit: 360deg; }
}
@keyframes jb-cta-shimmer {
    0%,  100% { transform: translateX(-110%) skewX(-22deg); }
    30%       { transform: translateX(110%)  skewX(-22deg); }
    65%       { transform: translateX(110%)  skewX(-22deg); }
}
@media (prefers-reduced-motion: reduce) {
    .jb4wood-accroche .hero-btns a::before { animation: none; }
}

/* Hero full-width edge-to-edge (user 05/2026) */
.home .jb4wood-hero-wrapper,
.home .jb-hero-fullscreen {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}
.home .jb4wood-hero-wrapper video,
.home .jb-hero-fullscreen video {
    width: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
}
/* Lisibilité texte sur fond béton fixed : léger glow blanc sur paragraphes longs */
.entry-content p,
.jb4wood-accroche .sous-titre,
.realisation-content p {
    text-shadow: 0 1px 2px rgba(255,255,255,0.45);
}

/* === 1. HEADER LOGO JB4WOOD === */
/* Cache le titre Astra natif (texte) */
.ast-site-identity .site-title,
.ast-site-identity .site-description {
    display: none !important;
}
/* Conteneur logo injecté (lien cliquable vers /) */
.jb4wood-logo,
a.jb4wood-logo-link {
    display: inline-flex;
    flex-direction: column;        /* JB4WOOD au-dessus, "Ébéniste Agenceur" décalé sous le WOOD */
    align-items: flex-start;
    gap: 0;
    line-height: 1;
    text-decoration: none !important;
    color: inherit;
    padding: 0.15rem 0;
    transition: opacity 0.3s var(--jb-easing);
    cursor: pointer;
}
.jb4wood-logo:hover,
a.jb4wood-logo-link:hover { opacity: 0.85; }
.jb4wood-logo:focus-visible,
a.jb4wood-logo-link:focus-visible {
    outline: 2px solid var(--jb-or);
    outline-offset: 4px;
    border-radius: 2px;
}
.jb4wood-logo .jb-mark {
    font-family: var(--jb-eras);
    font-weight: 700;
    font-size: 4.5rem;
    color: var(--jb-vert);
    letter-spacing: -0.02em;
    line-height: 1;
}
.jb4wood-logo .jb-sub {
    font-family: var(--jb-eras);
    font-size: 2.15rem;            /* +0.2rem vs précédent (était 1.95rem) */
    color: var(--jb-or);
    letter-spacing: 0.02em;
    text-transform: none;
    font-style: italic;
    margin: -0.1em 0 0 0;
    padding: 0;
    align-self: stretch;
    padding-left: 25%;
    text-align: left;
    box-sizing: border-box;
    white-space: nowrap;
}
@media (max-width: 1023px) {
    .jb4wood-logo .jb-mark { font-size: 3.6rem; }
    .jb4wood-logo .jb-sub  { font-size: 1.85rem; }
}
@media (max-width: 480px) {
    .jb4wood-logo .jb-mark { font-size: 3.1rem; }
    .jb4wood-logo .jb-sub  { font-size: 1.55rem; }
}
@media (max-width: 380px) {
    .jb4wood-logo .jb-mark { font-size: 2.7rem; }
    .jb4wood-logo .jb-sub  { font-size: 1.35rem; }
}
/* Insertion via JS dans .ast-site-identity (voir JS) */

/* === 3. HEADER STYLE PULSOR.AGENCY (refonte 04/2026) ===
   - Top fixed, transparent total au repos, glass blur permanent
   - Au scroll > 50px : background blanc 0.85 + ombre subtle
   - Layout : logo gauche / menu centré / CTA droite (pattern site pro moderne)
   - Bordure inférieure : gradient transparent → vert subtle */
@media (min-width: 1024px) {
    #masthead {
        position: fixed !important;
        top: 0; left: 0; right: 0;
        z-index: 9999;
        padding: 14px 0 8px 0 !important;
        background: rgba(255,255,255,0) !important; /* totalement transparent au repos */
        /* Backdrop-filter déplacé sur ::before pour permettre fade-out vers le bas */
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-bottom: 1px solid transparent;
        box-shadow: none;
        transition: background 0.4s var(--jb-easing), box-shadow 0.4s var(--jb-easing), padding 0.4s var(--jb-easing), border-color 0.4s var(--jb-easing);
    }
    /* Démarcation bas du masthead retirée 05/2026 (apparaissait comme un "trait clair" sur
       fond sombre — gênant visuellement). Le glass + box-shadow scroll suffit comme repère. */
    #masthead::after {
        content: none;
    }
    #masthead .ast-main-header-wrap,
    #masthead .main-header-bar,
    #masthead .ast-primary-header-bar {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
    }
    /* Layout flex : logo gauche / menu centré / CTA droite */
    #masthead .ast-builder-grid-row,
    #masthead .main-header-bar,
    #masthead .ast-primary-header-bar > .site-primary-header-wrap,
    #masthead .ast-main-header-bar-alignment {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 2rem;
        gap: 2rem;
    }
    /* Le bloc menu central s'étend pour permettre le centrage */
    #masthead .ast-builder-menu-1,
    #masthead .main-header-bar-navigation,
    #masthead .main-navigation {
        flex: 1 1 auto;
        display: flex !important;
        justify-content: center !important;
    }
    #masthead .ast-site-identity { flex: 0 0 auto; }
    #masthead .header-widget-area, #masthead .ast-header-button-1 { flex: 0 0 auto; }
    /* Au scroll : padding réduit (override couleur géré dans bloc HEADER GLASSMORPHISM en haut) */
    #masthead.jb-scrolled {
        padding: 8px 0 6px 0 !important;
    }
    body.home,
    body { padding-top: 72px; } /* aligné avec le nouveau padding masthead */
}

/* === 4. MENU DESKTOP — STYLE BURGER (refonte 05/2026) ===
   Inspiré du menu burger mobile : texte ErasBold marron foncé sur fond transparent,
   hover en vert sapin + lift subtle, current en or-bois. Pas de boutons or, pas de gradient,
   pas de shimmer. Encadré dans @media (min-width: 1024px) → mobile burger intact. */
@media (min-width: 1024px) {
    .ast-primary-header-bar .menu-item > a,
    .ast-primary-header-bar .menu-item > a.menu-link,
    .main-header-menu > li.menu-item > a.menu-link,
    .main-header-menu > li > a {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        color: var(--marron-fonce) !important;
        font-family: var(--jb-eras) !important;
        font-style: normal !important;
        font-weight: 700 !important;
        font-size: 1.05rem !important;
        line-height: 1.2 !important;
        text-transform: none !important;
        letter-spacing: 0.02em !important;
        padding: 0.5rem 0.9rem !important;
        margin: 0 0.25rem !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        transition: color 0.2s ease, transform 0.2s ease !important;
        overflow: visible !important;
    }
    /* Suppression du shimmer hover de l'ancien style or */
    .ast-primary-header-bar .menu-item > a::before,
    .main-header-menu > li > a::before {
        content: none !important;
    }
    /* Hover : vert sapin + lift + scale + glow doré (effet plus spectaculaire) */
    .ast-primary-header-bar .menu-item > a:hover,
    .ast-primary-header-bar .menu-item > a:focus-visible,
    .main-header-menu > li > a:hover,
    .main-header-menu > li > a:focus-visible {
        background: transparent !important;
        color: var(--jb-vert) !important;
        transform: translateY(-3px) scale(1.06) !important;
        box-shadow: none !important;
        text-shadow:
            0 0 14px rgba(124, 97, 69, 0.55),
            0 2px 6px rgba(20, 84, 74, 0.18) !important;
        letter-spacing: 0.04em !important;
    }

    /* Underline animé : slide depuis le centre (gradient or → vert sapin) */
    .ast-primary-header-bar .menu-item > a {
        position: relative;
    }
    .ast-primary-header-bar .menu-item > a::after {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 50%;
        width: 0;
        height: 3px;
        /* 2 couches : éclat blanc fin (animé gauche → droite) sur fond gradient symétrique
           marron foncé aux bords / marron clair (or-bois) au centre */
        background:
            linear-gradient(90deg,
                transparent 44%,
                rgba(255,255,255,0.85) 50%,
                transparent 56%) 100% 0 / 300% 100% no-repeat,
            linear-gradient(90deg,
                var(--marron-fonce) 0%,
                #C9A875 50%,
                var(--marron-fonce) 100%);
        transition:
            width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
            left 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
        pointer-events: none;
    }
    .ast-primary-header-bar .menu-item > a:hover::after,
    .ast-primary-header-bar .menu-item > a:focus-visible::after {
        width: 85%;
        left: 7.5%;
        /* Shining + pause : ~1s de traversée gauche → droite + ~1.4s de pause avant le prochain */
        animation: jb-underline-shine 2.4s linear infinite;
    }
    @keyframes jb-underline-shine {
        0%   { background-position: 100% 0, 0 0; }
        42%  { background-position:   0% 0, 0 0; }   /* fin du shine — la lumière sort à gauche */
        100% { background-position:   0% 0, 0 0; }   /* pause statique avant le prochain cycle */
    }
    /* Item actif : underline visible en permanence + shining + pause plus longue */
    .ast-primary-header-bar .current-menu-item > a::after,
    .ast-primary-header-bar .current_page_item > a::after {
        width: 60%;
        left: 20%;
        animation: jb-underline-shine 3.2s linear infinite;
    }
    /* "Mes réalisations" (item 308) : gradient vert (foncé bords / sapin centre) + même shining */
    .ast-primary-header-bar li.menu-item.menu-item-308 > a::after {
        background:
            linear-gradient(90deg,
                transparent 44%,
                rgba(255,255,255,0.85) 50%,
                transparent 56%) 100% 0 / 300% 100% no-repeat,
            linear-gradient(90deg,
                #0d3a32 0%,
                var(--jb-vert) 50%,
                #0d3a32 100%);
    }

    /* Icônes (camera, feather) : petit pulse + rotation au hover */
    .ast-primary-header-bar .menu-item > a:hover .jb-menu-icon {
        animation: jb-menu-icon-pulse 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes jb-menu-icon-pulse {
        0%   { transform: scale(1) rotate(0); }
        50%  { transform: scale(1.25) rotate(-6deg); }
        100% { transform: scale(1) rotate(0); }
    }
    /* Item actif : or-bois (cohérent avec burger mobile) */
    .ast-primary-header-bar .current-menu-item > a,
    .ast-primary-header-bar .current_page_item > a,
    .main-header-menu > li.current-menu-item > a,
    .main-header-menu > li.current_page_item > a {
        background: transparent !important;
        color: var(--jb-or) !important;
    }
    /* CTA "Contact" : même style que les autres (pas de bouton vert plein) */
    .ast-primary-header-bar .menu-item.btn-cta > a {
        background: transparent !important;
        background-image: none !important;
        color: var(--marron-fonce) !important;
        border: none !important;
    }
    .ast-primary-header-bar .menu-item.btn-cta > a:hover {
        color: var(--jb-vert) !important;
    }
    /* Sous-menus : garder un fond léger pour la lisibilité (texte marron sur fond crème transparent) */
    .main-header-menu .sub-menu a,
    .ast-primary-header-bar .sub-menu a {
        background: rgba(248, 245, 240, 0.88) !important;
        color: var(--marron-fonce) !important;
        font-family: var(--jb-eras) !important;
        font-weight: 600 !important;
        font-size: 0.95rem !important;
        font-style: normal !important;
        transform: none !important;
        box-shadow: none !important;
        border-bottom: 1px solid rgba(124, 97, 69, 0.18) !important;
        padding: 0.5rem 0.9rem !important;
    }
    .main-header-menu .sub-menu a:hover,
    .ast-primary-header-bar .sub-menu a:hover {
        background: rgba(255, 255, 255, 0.96) !important;
        color: var(--jb-vert) !important;
    }

    /* Desktop : cacher l'item "Accueil" (le logo cliquable joue déjà ce rôle) */
    .ast-primary-header-bar .main-header-menu > li.menu-item:first-child {
        display: none !important;
    }

    /* Logo : retirer l'opacity hover qui donnait un effet blanchâtre désagréable */
    .jb4wood-logo:hover,
    a.jb4wood-logo-link:hover {
        opacity: 1 !important;
    }

    /* Icônes burger (jb-menu-icon-camera/feather) injectées par PHP filter sur tous les
       contextes — on les style aussi pour le desktop (tailles + alignement adaptés). */
    .ast-primary-header-bar .jb-menu-icon {
        width: 1.05em !important;
        height: 1.05em !important;
        margin-right: 0.42em !important;
        vertical-align: -0.18em !important;
        display: inline-block !important;
    }
    .ast-primary-header-bar .jb-menu-icon-camera {
        color: var(--jb-vert) !important;   /* vert sapin → cohérent avec "Mes réalisations" mis en évidence */
    }
    .ast-primary-header-bar .jb-menu-icon-feather {
        color: var(--jb-or) !important;   /* or-bois → discret, comme dans le burger */
    }

    /* "Mes réalisations" (item 308) : couleur verte + font-weight 800 — alignement burger */
    .ast-primary-header-bar li.menu-item.menu-item-308 > a,
    .ast-primary-header-bar li.menu-item.menu-item-308 > a.menu-link {
        color: var(--jb-vert) !important;
        font-weight: 800 !important;
    }
    .ast-primary-header-bar li.menu-item.menu-item-308 > a:hover,
    .ast-primary-header-bar li.menu-item.menu-item-308.current-menu-item > a,
    .ast-primary-header-bar li.menu-item.menu-item-308.current_page_item > a {
        color: var(--jb-vert) !important;
    }

    /* === JB-MENU-2-LIGNES-HARDENED (2026-05-19) ===
       Le menu desktop DOIT tenir sur EXACTEMENT 2 lignes (decision client).
       Cette regle etait dans jb4wood-overrides.css (#masthead) mais ne survivait
       que par une marge de specificite fragile : style.php (injecte APRES, prio
       100 vs 99) contenait au contraire un bloc 'flex-wrap:nowrap' (1 ligne) +
       une compaction font 1-ligne (~L7700) + un display:none sur le 1er item
       (l'element recycle en saut de ligne flex). On rend donc la regle 2 lignes
       AUTORITAIRE ici, scopee #masthead, desktop only (>=1024px) : le burger
       mobile (<=1024px) n'est PAS concerne (hors @media). Calibree ~1145/1280/
       1440px : L1 = 308/309/358 (~516px) · saut · L2 = 311/312/1766/313 (~526px),
       largeur dispo ~min(96vw,1200px) => jamais de 3e ligne. */
    #masthead .ast-primary-header-bar .main-header-menu,
    #masthead .ast-primary-header-bar .main-navigation ul.main-header-menu {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        max-width: min(96vw, 1200px) !important;
        row-gap: 0 !important;
        margin: 0 auto !important;
    }
    /* Police FLUIDE : chaque rang (3 / 4 items) tient toujours sur 1 ligne. */
    #masthead .ast-primary-header-bar .menu-item > a,
    #masthead .ast-primary-header-bar .menu-item > a.menu-link {
        font-size: clamp(0.95rem, 0.35rem + 0.85vw, 1.45rem) !important;
        white-space: nowrap !important;
        padding: 0.4rem 0.6rem !important;
        margin: 0 0.12rem !important;
        letter-spacing: 0.02em !important;
    }
    /* Ordre visuel (CSS order — DOM/burger mobile intacts) :
       L1 : Mes realisations(308) · Gravure & Decoupe(309) · FAQ(358)
       L2 : Clients pros(311) · Conseils & Blog(312) · Qui suis-je(1766) · Contact(313) */
    #masthead .ast-primary-header-bar .main-header-menu > li.menu-item-308 { order: 1 !important; }
    #masthead .ast-primary-header-bar .main-header-menu > li.menu-item-309 { order: 2 !important; }
    #masthead .ast-primary-header-bar .main-header-menu > li.menu-item-358 { order: 3 !important; }
    /* Item 307 (Accueil) recycle en SAUT DE LIGNE flex garanti entre L1 et L2 :
       invisible, non focusable, 0px de haut. Re-affiche en 'block' ICI (avec
       #masthead) pour battre le 'display:none !important' du bloc first-child
       (~L924) qui le tuerait sinon et casserait la separation 2 lignes. */
    #masthead .ast-primary-header-bar .main-header-menu > li.menu-item-307 {
        display: block !important;
        order: 4 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    #masthead .ast-primary-header-bar .main-header-menu > li.menu-item-311  { order: 5 !important; }
    #masthead .ast-primary-header-bar .main-header-menu > li.menu-item-312  { order: 6 !important; }
    #masthead .ast-primary-header-bar .main-header-menu > li.menu-item-1766 { order: 7 !important; }
    #masthead .ast-primary-header-bar .main-header-menu > li.menu-item-313  { order: 8 !important; }

    /* Décalage hero vidéo desktop : géré par la règle plus spécifique
       'body.home .jb4wood-hero-wrapper.jb-hero-fullscreen' ligne ~1208 (margin-top: 140px). */
}

/* === 5. VIDÉO HERO — wrapper viewport + vidéo plein hero + ombres stylées ===
   Refonte 04/2026 (v2 plein hero) :
   - 1 seul <video> dans le post 4 avec multiples <source media="...">
   - Source picker natif HTML5 : portrait sur mobile portrait, landscape sinon
   - Wrapper full-viewport (100vw, casse le container Astra)
   - object-fit: cover pour occuper toute la zone sans bandes noires
   - Ombre stylée 4 couches inspirée premium + fade gradient bas vers section suivante */
.jb4wood-hero-wrapper {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    line-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--jb-beton);
}
.jb4wood-hero-video {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    display: block;
    line-height: 0;
}
.jb4wood-hero-video video,
.jb4wood-hero-wrapper video {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center center;
}
/* Variante plein hero (nouvelles vidéos 1920x1080 desktop + 1080x1920 portrait) */
.jb-hero-fullscreen {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    line-height: 0;
    font-size: 0;          /* élimine le baseline-gap des inline children */
    background: var(--jb-beton);
    /* Ombre stylée 4 couches inspirée premium (soft, profonde) */
    box-shadow:
        0 0 0 1px rgba(20, 84, 74, 0.06),
        0 8px 30px rgba(0, 0, 0, 0.18),
        0 30px 80px rgba(20, 84, 74, 0.12),
        0 50px 120px rgba(73, 56, 40, 0.08);
}
.jb-hero-fullscreen video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;             /* aucune marge → vidéo collée au wrapper et à son ombre */
    padding: 0;
    border: 0;
    vertical-align: bottom; /* prévient le sub-pixel gap iOS Safari sous la vidéo */
}

/* === RESET HERO VIDÉO 2026-04-27 (Lot 3) — ratio natif respecté, plein largeur, centré ===
   Bloque tous les object-fit cover/contain hérités d'autres règles + force width:100% + height:auto */
.jb4wood-hero-wrapper video,
.jb-hero-fullscreen video,
.jb4wood-hero-video video,
.jb4wood-hero-wrapper.jb-hero-fullscreen video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: unset !important;
    aspect-ratio: auto !important;
    margin: 0 auto !important;
}
.jb4wood-hero-wrapper,
.jb-hero-fullscreen,
.jb4wood-hero-video {
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
}
/* Fade gradient bas — réactivé via .home .jb4wood-hero-wrapper::after (05/2026) */
/* Effet cinéma latéral DÉSACTIVÉ (user 05/2026) — vidéo full-width */
/* @media >=1920px : ::before/::after réactivés pour les ombres haut/bas */

/* === Contrôles vidéo hero : boutons son + plein écran groupés en bas-droite,
       à cheval = à moitié sous le bord inférieur de la vidéo === */
.jb4wood-hero-controls {
    position: absolute;
    bottom: -22px;            /* -50% de 44px = à cheval sur le bord */
    right: 24px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: none; /* permet au tooltip de transparaître ; les boutons réactivent ci-dessous */
}
.jb4wood-hero-controls > button {
    pointer-events: auto;
}
.jb4wood-audio-toggle,
.jb4wood-hero-audio,
.jb4wood-hero-fullscreen {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 84, 74, 0.85);
    -webkit-backdrop-filter: var(--jb-blur-8);
    backdrop-filter: var(--jb-blur-8);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 7px 20px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.32);
    transition: transform 0.3s var(--jb-easing), background 0.3s var(--jb-easing), box-shadow 0.3s var(--jb-easing);
}
.jb4wood-audio-toggle svg,
.jb4wood-hero-audio svg,
.jb4wood-hero-fullscreen svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.jb4wood-audio-toggle:hover,
.jb4wood-audio-toggle:focus-visible,
.jb4wood-hero-audio:hover,
.jb4wood-hero-audio:focus-visible,
.jb4wood-hero-fullscreen:hover,
.jb4wood-hero-fullscreen:focus-visible {
    background: var(--jb-vert);
    transform: scale(1.1);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 20px rgba(124, 97, 69, 0.5);
    outline: none;
}
.jb4wood-hero-audio.is-on {
    background: var(--jb-or);
}
@media (max-width: 768px) {
    .jb4wood-hero-controls { bottom: -20px; right: 16px; gap: 6px; }
    .jb4wood-audio-toggle,
    .jb4wood-hero-audio,
    .jb4wood-hero-fullscreen { width: 40px; height: 40px; }
}

/* Tooltip "Cliquez pour le son" */
.jb4wood-audio-tooltip {
    position: absolute;
    bottom: 78px;
    right: 16px;
    z-index: 6;
    padding: 8px 14px;
    background: rgba(20, 84, 74, 0.92);
    color: #fff;
    font-family: var(--jb-body);
    font-size: 0.85rem;
    line-height: 1.2;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s var(--jb-easing), transform 0.4s var(--jb-easing);
    pointer-events: none;
}
.jb4wood-audio-tooltip.show { opacity: 1; transform: translateY(0); }
.jb4wood-audio-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 22px;
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(20, 84, 74, 0.92);
}

/* === 6. BANDEAU PRESSE — espacement Bois+/Le Bouvet ===
   Modif #2 (04/2026) : alpha-fade latéral via mask-image (au lieu d'un dégradé blanc opaque). */
/* === Eyebrow "Ils ont parlé de moi" (intro discrete au-dessus du bandeau presse) === */
/* Eyebrow ULTRA tight : zéro spacing autour, gap géré par margin-top du press band */
.jb4wood-presse-eyebrow,
.home .entry-content > div.jb4wood-presse-eyebrow {
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
    max-width: none !important;
    background: transparent !important;
}
/* Press band : detache du titre + glass subtil + hauteur compacte */
.home .entry-content > section.jb4wood-presse {
    margin-top: 1.6rem !important;
    margin-bottom: 1.5rem !important;
    padding: 0.4rem 0 0.4rem !important;
    background: rgba(232, 228, 224, 0.12) !important;
    -webkit-backdrop-filter: var(--jb-blur-1-5);
    backdrop-filter: var(--jb-blur-1-5);
}
.jb4wood-presse-eyebrow span {
    display: inline-block;
    font-family: 'Signika', 'Arial Black', sans-serif;
    font-size: 0.78rem;
    line-height: 1;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--jb-or);
    opacity: 0.88;
    position: relative;
    padding: 0 14px;
}
/* Barres or dégradées de chaque côté du texte (effet eyebrow premium) */
.jb4wood-presse-eyebrow span::before,
.jb4wood-presse-eyebrow span::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 44px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--jb-or));
    opacity: 0.85;
    border-radius: 1px;
}
.jb4wood-presse-eyebrow span::before {
    right: 100%;
    background: linear-gradient(90deg, transparent, var(--jb-or));
}
.jb4wood-presse-eyebrow span::after {
    left: 100%;
    background: linear-gradient(90deg, var(--jb-or), transparent);
}

.jb4wood-presse {
    overflow: hidden;
    /* Edge-to-edge full-bleed (100vw + margins négatifs) — force l'extension hors entry-content */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 1.5rem 0 !important;
    position: relative;
    /* Edge-to-edge full viewport width */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    /* Side fade-out : transparent au bord (0px) → opaque à 110px (fade plus visible) */
    -webkit-mask-image: linear-gradient(to right,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,0.4) 30px,
        rgba(0,0,0,1) 110px,
        rgba(0,0,0,1) calc(100% - 110px),
        rgba(0,0,0,0.4) calc(100% - 30px),
        rgba(0,0,0,0) 100%) !important;
    mask-image: linear-gradient(to right,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,0.4) 30px,
        rgba(0,0,0,1) 110px,
        rgba(0,0,0,1) calc(100% - 110px),
        rgba(0,0,0,0.4) calc(100% - 30px),
        rgba(0,0,0,0) 100%) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    /* Bordures inline du post 4 retirées : redessinées via pseudos haut/bas */
    border-top: none !important;
    border-bottom: none !important;
}
/* Barre décorative HAUT — fine ligne or-bois en gradient (matching divider deluxe) */
.jb4wood-presse::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: min(82%, 720px) !important;
    height: 2px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(124, 97, 69, 0.55) 12%,
        rgba(124, 97, 69, 0.95) 50%,
        rgba(124, 97, 69, 0.55) 88%,
        transparent 100%
    ) !important;
    border-radius: 1px !important;
    pointer-events: none;
    z-index: 3;
}
/* Barre décorative BAS — strictement identique à la barre du haut */
.jb4wood-presse::after {
    content: '' !important;
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(82%, 720px) !important;
    height: 2px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(124, 97, 69, 0.55) 12%,
        rgba(124, 97, 69, 0.95) 50%,
        rgba(124, 97, 69, 0.55) 88%,
        transparent 100%
    ) !important;
    border-radius: 1px !important;
    pointer-events: none;
    z-index: 3;
}
.jb4wood-presse-track {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;        /* commence à gauche → translate -50% pour boucler */
    flex-wrap: nowrap;
    gap: 3.5rem !important;
    padding: 0 !important;
    width: max-content !important;       /* dimension naturelle = somme des items */
    animation: jb4wood-marquee 28s linear infinite;
    will-change: transform;
}
.jb4wood-presse:hover .jb4wood-presse-track,
.jb4wood-presse:focus-within .jb4wood-presse-track {
    animation-play-state: paused;        /* pause au hover/focus pour lisibilité */
}
@keyframes jb4wood-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }   /* 50% car on a doublé les items */
}
.jb4wood-presse-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    padding: 0 1.2rem;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    opacity: 1;
}
/* Demande client #4 : couleur pleine par défaut, zoom + glow au survol/tap */
.jb4wood-presse-item img {
    filter: none !important;
    opacity: 1 !important;
    max-width: 200px !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), filter 0.35s ease;
}
.jb4wood-presse-item:hover img,
.jb4wood-presse-item:focus img,
.jb4wood-presse-item.jb-tap-active img {
    transform: scale(1.15);
    filter: drop-shadow(0 0 20px rgba(124,97,69,0.4));
}
@media (max-width: 768px) {
    .jb4wood-presse-track { gap: 1.4rem !important; padding: 0 0.5rem; }
    .jb4wood-presse-item { min-width: 100px; padding: 0 0.4rem; }
    .jb4wood-presse-item img { max-width: 140px !important; max-height: 64px !important; }
}
@media (max-width: 480px) {
    .jb4wood-presse-track { gap: 1rem !important; padding: 0 0.3rem; }
    .jb4wood-presse-item { min-width: 80px; padding: 0 0.2rem; }
    .jb4wood-presse-item img { max-width: 110px !important; max-height: 56px !important; }
}

/* === DESKTOP / MOBILE — toggle des 3 videos hero (06/2026) ===
   Mobile (<1024px)  : video 1920x1080 (jb4wood-hero-mobile-only)
   Desktop (>=1024px): video fine 1920x500 (jb4wood-hero-desktop-only)
   Fullscreen source : 1920x1080 cachee (visibility hidden + position absolute 1x1, sinon
                       requestFullscreen rejette display:none) */
body.home .jb4wood-hero-wrapper video.jb4wood-hero-desktop-only,
body.home .jb-hero-fullscreen   video.jb4wood-hero-desktop-only { display: none !important; }
body.home .jb4wood-hero-wrapper video.jb4wood-hero-mobile-only,
body.home .jb-hero-fullscreen   video.jb4wood-hero-mobile-only  { display: block !important; }
body.home .jb4wood-hero-wrapper video.jb4wood-hero-fullscreen-source,
body.home .jb-hero-fullscreen   video.jb4wood-hero-fullscreen-source {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 1px !important; height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    visibility: hidden;
}
body.home .jb4wood-hero-wrapper video.jb4wood-hero-fullscreen-source:fullscreen,
body.home .jb-hero-fullscreen   video.jb4wood-hero-fullscreen-source:fullscreen,
body.home .jb4wood-hero-wrapper video.jb4wood-hero-fullscreen-source:-webkit-full-screen,
body.home .jb-hero-fullscreen   video.jb4wood-hero-fullscreen-source:-webkit-full-screen {
    position: static !important;
    width: 100% !important; height: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: auto !important;
    pointer-events: auto !important;
    object-fit: contain !important;
    background: #000 !important;
}

@media (min-width: 1024px) {
    body.home .jb4wood-hero-wrapper video.jb4wood-hero-mobile-only,
    body.home .jb-hero-fullscreen   video.jb4wood-hero-mobile-only  { display: none !important; }
    body.home .jb4wood-hero-wrapper video.jb4wood-hero-desktop-only,
    body.home .jb-hero-fullscreen   video.jb4wood-hero-desktop-only { display: block !important; }
    body.home .jb4wood-hero-wrapper.jb-hero-fullscreen {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        max-height: none !important;
        /* 120px : laisse le fade glass finir avant la vidéo + air pour l'ombre */
        margin-top: 120px !important;
        box-shadow:
            0 -18px 24px -10px rgba(0, 0, 0, 0.35),
            0   8px 36px  -6px rgba(0, 0, 0, 0.58),
            0  24px 72px -16px rgba(0, 0, 0, 0.32) !important;
    }
    /* Toutes les pages (pas que la home) : même décalage hero pour cohérence header glass */
    .jb4wood-hero-wrapper.jb-hero-fullscreen,
    .jb-hero-fullscreen {
        margin-top: 120px !important;
    }
    body.home .jb4wood-hero-wrapper.jb-hero-fullscreen video.jb4wood-hero-desktop-only {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        max-width: 100% !important;
        object-fit: cover !important;
    }
    body.home .jb4wood-hero-wrapper::before,
    body.home .jb4wood-hero-wrapper::after {
        display: none !important;
    }
}

/* Effet remplaçant les dividers deluxe : un léger fade-in à l'apparition du bandeau presse */
.jb4wood-presse {
    position: relative;
    margin: 30px auto;
}
.jb4wood-presse::before, .jb4wood-presse::after {
    content: '';
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 82%; max-width: 540px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(124,97,69,0.85), transparent);
    border-radius: 1px;
}
.jb4wood-presse::before { top: 0; }
.jb4wood-presse::after { bottom: 0; }

/* === 7. SECTION PRESTATIONS — icônes SVG bois (remplacent les emojis) === */
.jb4wood-prestations { padding: 3rem 1rem; }
.jb4wood-prestations h2 {
    font-family: var(--jb-eras);
    color: var(--jb-vert);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    text-align: center;
    margin: 0 0 2rem;
    letter-spacing: -0.01em;
}
.jb4wood-presta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: 1280px;
    margin: 0 auto;
}
/* Desktop : Cuisine + Bibliothèque occupent chacune 2 cols (= row 1 complet) */
.jb4wood-presta-grid > .jb4wood-presta-card[href*="cuisine"],
.jb4wood-presta-grid > .jb4wood-presta-card[href*="bibliotheque"] {
    grid-column: span 2;
}
/* Signature Gravure : full row, juste en dessous de Cuisine + Biblio (position HTML 3 conservée) */
.jb4wood-presta-grid .jb-presta-signature {
    grid-column: 1 / -1;
}
@media (max-width: 1100px) {
    /* Tablette + mobile : grid 2 cols, Cuisine/Biblio en normal, signature full row */
    .jb4wood-presta-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
    .jb4wood-presta-grid > .jb4wood-presta-card[href*="cuisine"],
    .jb4wood-presta-grid > .jb4wood-presta-card[href*="bibliotheque"] {
        grid-column: auto;
    }
}
@media (max-width: 768px)  { .jb4wood-presta-card { padding: 1.1rem 0.7rem 1rem; } }
@media (max-width: 768px)  { .jb4wood-presta-card .ico { width: 50px; height: 50px; margin-bottom: 0.55rem; } }
@media (max-width: 768px)  { .jb4wood-presta-card h3 { font-size: 0.92rem; } }
@media (max-width: 768px)  { .jb4wood-presta-card p { font-size: 0.78rem; } }

.jb4wood-presta-card {
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column; align-items: center;
    padding: 1.6rem 1rem 1.4rem;
    background: rgba(255,255,255,0.94);
    border-radius: 8px;
    text-decoration: none !important;
    color: var(--jb-text);
    box-shadow: 0 4px 14px rgba(0,0,0,0.07);
    border: 1px solid rgba(20,84,74,0.08);
    transition: transform 0.4s var(--jb-easing), box-shadow 0.4s var(--jb-easing);
}
.jb4wood-presta-card::before {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
    transition: left 0.8s var(--jb-easing);
    pointer-events: none;
    z-index: 1;
}
.jb4wood-presta-card:hover::before { left: 130%; }
.jb4wood-presta-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(20,84,74,0.18), 0 0 24px rgba(124,97,69,0.25);
    border-color: var(--jb-or);
}
.jb4wood-presta-card .ico {
    font-size: 0 !important;
    width: 64px; height: 64px;
    margin-bottom: 0.8rem;
    background-color: var(--jb-vert);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    transition: background-color 0.4s var(--jb-easing);
}
.jb4wood-presta-card:hover .ico { background-color: var(--jb-or); }
.jb4wood-presta-card h3 {
    font-family: var(--jb-eras);
    color: var(--jb-vert);
    font-size: 1.05rem;
    margin: 0 0 0.4rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.jb4wood-presta-card p {
    font-size: 0.85rem;
    color: #5a5048;
    margin: 0;
    text-align: center;
    line-height: 1.45;
}

/* Ciblage des cards par href pour appliquer une icône SVG inline encodée */
/* Cuisine — chair / cabinet */
.jb4wood-presta-card[href*="cuisine"] .ico {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='8' rx='1'/><rect x='3' y='13' width='18' height='8' rx='1'/><line x1='12' y1='3' x2='12' y2='11'/><line x1='12' y1='13' x2='12' y2='21'/><circle cx='9' cy='7' r='0.6'/><circle cx='15' cy='7' r='0.6'/><circle cx='9' cy='17' r='0.6'/><circle cx='15' cy='17' r='0.6'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='8' rx='1'/><rect x='3' y='13' width='18' height='8' rx='1'/><line x1='12' y1='3' x2='12' y2='11'/><line x1='12' y1='13' x2='12' y2='21'/><circle cx='9' cy='7' r='0.6'/><circle cx='15' cy='7' r='0.6'/><circle cx='9' cy='17' r='0.6'/><circle cx='15' cy='17' r='0.6'/></svg>");
}
/* Bibliothèque — vraies étagères en quinconce (3 niveaux, cloisons décalées, pas mur de brique) */
.jb4wood-presta-card[href*="bibliotheque"] .ico {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='20' rx='0.5'/><line x1='2' y1='8' x2='22' y2='8'/><line x1='2' y1='14' x2='22' y2='14'/><line x1='13' y1='2' x2='13' y2='8'/><line x1='9' y1='8' x2='9' y2='14'/><line x1='15' y1='14' x2='15' y2='22'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='20' rx='0.5'/><line x1='2' y1='8' x2='22' y2='8'/><line x1='2' y1='14' x2='22' y2='14'/><line x1='13' y1='2' x2='13' y2='8'/><line x1='9' y1='8' x2='9' y2='14'/><line x1='15' y1='14' x2='15' y2='22'/></svg>");
}
/* Table */
.jb4wood-presta-card[href*="table"] .ico {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><line x1='2' y1='9' x2='22' y2='9'/><line x1='2' y1='12' x2='22' y2='12'/><line x1='5' y1='12' x2='5' y2='20'/><line x1='19' y1='12' x2='19' y2='20'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><line x1='2' y1='9' x2='22' y2='9'/><line x1='2' y1='12' x2='22' y2='12'/><line x1='5' y1='12' x2='5' y2='20'/><line x1='19' y1='12' x2='19' y2='20'/></svg>");
}
/* Garde-corps & escalier — main courante inclinée parallèle aux nez de marches + barreaux verticaux */
.jb4wood-presta-card[href*="garde-corps"] .ico,
.jb4wood-presta-card[href*="escalier"] .ico {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,22 8,22 8,17 14,17 14,12 20,12'/><line x1='3' y1='15' x2='20' y2='4'/><line x1='6' y1='13' x2='6' y2='22'/><line x1='11' y1='10' x2='11' y2='17'/><line x1='16' y1='6.5' x2='16' y2='12'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,22 8,22 8,17 14,17 14,12 20,12'/><line x1='3' y1='15' x2='20' y2='4'/><line x1='6' y1='13' x2='6' y2='22'/><line x1='11' y1='10' x2='11' y2='17'/><line x1='16' y1='6.5' x2='16' y2='12'/></svg>");
}
/* Mobilier sur mesure — commode 3 tiroirs avec poignées centrées + pieds (silhouette claire) */
.jb4wood-presta-card[href*="mobilier"] .ico {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='17' rx='0.6'/><line x1='3' y1='8.6' x2='21' y2='8.6'/><line x1='3' y1='14.2' x2='21' y2='14.2'/><line x1='10' y1='5.8' x2='14' y2='5.8'/><line x1='10' y1='11.4' x2='14' y2='11.4'/><line x1='10' y1='17' x2='14' y2='17'/><line x1='5' y1='20' x2='5' y2='22.5'/><line x1='19' y1='20' x2='19' y2='22.5'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='17' rx='0.6'/><line x1='3' y1='8.6' x2='21' y2='8.6'/><line x1='3' y1='14.2' x2='21' y2='14.2'/><line x1='10' y1='5.8' x2='14' y2='5.8'/><line x1='10' y1='11.4' x2='14' y2='11.4'/><line x1='10' y1='17' x2='14' y2='17'/><line x1='5' y1='20' x2='5' y2='22.5'/><line x1='19' y1='20' x2='19' y2='22.5'/></svg>");
}
/* Gravure laser & usinage CNC — ancien haut + plateau U + 2 copeaux plus petits et moins collés au centre */
.jb4wood-presta-card[href*="gravure"] .ico {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='2' width='8' height='3' rx='0.3'/><line x1='6' y1='3.5' x2='8' y2='3.5'/><line x1='16' y1='3.5' x2='18' y2='3.5'/><line x1='12' y1='5' x2='12' y2='8'/><path d='M 9 8 L 15 8 L 12 17 Z'/><line x1='10' y1='11' x2='14' y2='12'/><line x1='10.5' y1='14' x2='13.5' y2='15'/><line x1='2' y1='21' x2='10' y2='21'/><path d='M 10 21 L 11 22.5 L 13 22.5 L 14 21'/><line x1='14' y1='21' x2='22' y2='21'/><line x1='8.5' y1='19' x2='5.5' y2='16.5'/><line x1='15.5' y1='19' x2='18.5' y2='16.5'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='2' width='8' height='3' rx='0.3'/><line x1='6' y1='3.5' x2='8' y2='3.5'/><line x1='16' y1='3.5' x2='18' y2='3.5'/><line x1='12' y1='5' x2='12' y2='8'/><path d='M 9 8 L 15 8 L 12 17 Z'/><line x1='10' y1='11' x2='14' y2='12'/><line x1='10.5' y1='14' x2='13.5' y2='15'/><line x1='2' y1='21' x2='10' y2='21'/><path d='M 10 21 L 11 22.5 L 13 22.5 L 14 21'/><line x1='14' y1='21' x2='22' y2='21'/><line x1='8.5' y1='19' x2='5.5' y2='16.5'/><line x1='15.5' y1='19' x2='18.5' y2='16.5'/></svg>");
}
/* Agencement pro — devanture/comptoir */
.jb4wood-presta-card[href*="clients-pro"] .ico,
.jb4wood-presta-card[href*="agencement"] .ico {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l1.5-4h15L21 9'/><rect x='3' y='9' width='18' height='12'/><rect x='6' y='13' width='4' height='6'/><line x1='14' y1='13' x2='18' y2='13'/><line x1='14' y1='16' x2='18' y2='16'/><line x1='3' y1='9' x2='21' y2='9'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l1.5-4h15L21 9'/><rect x='3' y='9' width='18' height='12'/><rect x='6' y='13' width='4' height='6'/><line x1='14' y1='13' x2='18' y2='13'/><line x1='14' y1='16' x2='18' y2='16'/><line x1='3' y1='9' x2='21' y2='9'/></svg>");
}

/* Card signature — Gravure laser : bordure or-bois, badge "Spécialité signature" */
.jb4wood-presta-card.jb-presta-signature {
    border: 2px solid var(--jb-or, #7C6145);
    background: linear-gradient(135deg, rgba(255,255,255,0.97) 0%, rgba(248,242,234,0.97) 100%);
    box-shadow: 0 6px 18px rgba(124,97,69,0.18);
    padding-top: 2.4rem;
}
.jb4wood-presta-card.jb-presta-signature:hover {
    border-color: var(--jb-or, #7C6145);
    box-shadow: 0 14px 30px rgba(124,97,69,0.30), 0 0 24px rgba(124,97,69,0.35);
    transform: translateY(-6px);
}
.jb4wood-presta-card.jb-presta-signature .ico {
    background-color: var(--jb-or, #7C6145) !important;
}
.jb4wood-presta-card.jb-presta-signature h3 {
    color: var(--marron-fonce);
}
.jb-presta-badge {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    background: var(--jb-or, #7C6145);
    color: #fff;
    font-family: 'Signika', 'Arial Black', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    z-index: 2;
    line-height: 1;
    white-space: nowrap;
}

/* === CTA FINAL === */
.jb4wood-cta-final {
    text-align: center;
    padding: 3rem 1.5rem;
    background: linear-gradient(135deg, var(--jb-vert) 0%, var(--jb-vert-clair) 100%) !important;
    color: #fff;
    border-radius: 12px;
}
.jb4wood-cta-final h2 {
    font-family: var(--jb-eras);
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    margin: 0 0 0.8rem;
}
.jb4wood-cta-final p {
    color: rgba(255,255,255,0.92);
    max-width: 640px; margin: 0 auto 1.6rem;
}
.jb4wood-cta-final a {
    position: relative; overflow: hidden;
    display: inline-block;
    background: var(--jb-or);
    color: #fff !important;
    text-decoration: none !important;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    padding: 0.85rem 2.2rem;
    border-radius: 4px 6px 4px 6px;
    box-shadow: var(--jb-shadow-tordu);
    transform: skewY(-1deg);
    transition: transform 0.4s var(--jb-easing), box-shadow 0.4s var(--jb-easing);
}
.jb4wood-cta-final a::before {
    content:''; position:absolute; top:0; left:-120%;
    width:60%; height:100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
    transition: left 0.7s var(--jb-easing);
}
.jb4wood-cta-final a:hover::before { left: 130%; }
.jb4wood-cta-final a:hover {
    transform: skewY(-1deg) translateY(-4px);
    box-shadow: var(--jb-shadow-gold-intense);
}

/* === FIX #3 — CTA "Quelques minutes suffisent" : lisibilité texte + hover bouton (charte JB4WOOD) === */
/* Override l'Additional CSS Astra qui mettait le hover en blanc/blanc */
section.jb4wood-cta-final {
    background: linear-gradient(135deg, var(--jb-vert) 0%, var(--jb-vert-clair) 100%) !important;
    color: #fff !important;
    padding: 3.5rem 1.5rem !important;
    border-radius: 12px;
}
section.jb4wood-cta-final h2 {
    color: #fff !important;
    font-family: var(--jb-eras), 'Signika', Georgia, serif !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
section.jb4wood-cta-final p {
    color: #fff !important;
    font-family: var(--jb-serif) !important;
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    max-width: 640px;
    margin: 0 auto 1.6rem !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.30);
    opacity: 1 !important;
}
section.jb4wood-cta-final a {
    background: var(--jb-vert) !important;
    color: #fff !important;
    border: 2px solid rgba(255,255,255,0.85) !important;
    padding: 1rem 2.4rem !important;
    border-radius: 6px 8px 6px 8px !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-style: italic;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: var(--jb-shadow-tordu);
    transform: skewY(-1deg);
    transition: background 0.4s var(--jb-easing), transform 0.4s var(--jb-easing), box-shadow 0.4s var(--jb-easing), border-color 0.4s var(--jb-easing) !important;
}
section.jb4wood-cta-final a:hover,
section.jb4wood-cta-final a:focus {
    background: var(--jb-or) !important; /* or-bois au hover, JAMAIS blanc */
    color: #fff !important;
    border-color: var(--jb-or-clair) !important;
    transform: skewY(-1deg) translateY(-4px) !important;
    box-shadow: var(--jb-shadow-gold-intense) !important;
}

/* === 9. FORMULAIRE FLUENT FORMS — ombres tordues + multi-step simulé === */
.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform select,
.fluentform textarea {
    background: var(--jb-beton-light) !important;
    border: 1px solid rgba(20,84,74,0.15) !important;
    border-radius: 4px 6px 4px 6px !important;
    box-shadow: var(--jb-shadow-tordu-form) !important;
    padding: 0.75rem 0.95rem !important;
    font-family: var(--jb-body) !important;
    font-size: 1rem !important;
    color: var(--jb-text) !important;
    transition: border-color 0.3s var(--jb-easing), box-shadow 0.3s var(--jb-easing) !important;
}
.fluentform .ff-el-form-control:focus,
.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus {
    border-color: var(--jb-or) !important;
    box-shadow: var(--jb-shadow-tordu-form), 0 0 0 3px rgba(124,97,69,0.22) !important;
    outline: none !important;
}
.fluentform .ff-el-input--label label {
    font-family: var(--jb-eras);
    color: var(--jb-vert);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
}
.fluentform button.ff-btn-submit,
.fluentform .ff-btn {
    position: relative; overflow: hidden;
    background: var(--jb-or) !important;
    color: #fff !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-style: italic !important;
    padding: 0.85rem 2rem !important;
    border-radius: 4px 6px 4px 6px !important;
    box-shadow: var(--jb-shadow-tordu) !important;
    transform: skewY(-1deg);
    border: none !important;
    transition: transform 0.4s var(--jb-easing), box-shadow 0.4s var(--jb-easing), background 0.4s var(--jb-easing) !important;
}
.fluentform button.ff-btn-submit::before,
.fluentform .ff-btn::before {
    content:''; position:absolute; top:0; left:-120%;
    width:60%; height:100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
    transition: left 0.7s var(--jb-easing);
}
.fluentform button.ff-btn-submit:hover::before,
.fluentform .ff-btn:hover::before { left: 130%; }
.fluentform button.ff-btn-submit:hover,
.fluentform .ff-btn:hover {
    background: var(--jb-vert) !important;
    transform: skewY(-1deg) translateY(-3px);
    box-shadow: var(--jb-shadow-gold) !important;
}

/* Progress bar (Fluent Forms multi-step natif OU simulation) */
.ff-step-header,
.jb4wood-ff-progress {
    margin-bottom: 1.5rem;
}
.ff-step-header .ff-step-titles { display: flex; gap: 0.5rem; }
.ff-step-header .ff-step-titles li {
    flex: 1;
    padding: 0.6rem 0.5rem;
    text-align: center;
    background: var(--jb-beton-light);
    border-radius: 999px;
    font-size: 0.85rem;
    color: #888;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
    transition: all 0.4s var(--jb-easing);
}
.ff-step-header .ff-step-titles li.active,
.ff-step-header .ff-step-titles li.ff_active {
    background: var(--jb-vert) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(20,84,74,0.18), 0 0 18px rgba(124,97,69,0.4);
}
.ff-step-header .ff-el-progress {
    height: 8px;
    background: var(--jb-beton-light);
    border-radius: 999px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.08);
    margin-top: 0.6rem;
    overflow: hidden;
}
.ff-step-header .ff-el-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--jb-or) 0%, var(--jb-vert) 100%) !important;
    border-radius: 999px;
    transition: width 0.6s var(--jb-easing) !important;
}

/* Simulation multi-step JS : conteneur + steps cachés */
.jb4wood-ff-progress {
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: 0.8rem 1rem; background: rgba(255,255,255,0.92);
    border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.jb4wood-ff-progress-row {
    display: flex; align-items: center; gap: 1rem;
}
.jb4wood-ff-progress-label {
    font-family: var(--jb-eras);
    color: var(--jb-vert);
    font-size: 0.95rem;
    white-space: nowrap;
}
.jb4wood-ff-progress-track {
    flex: 1;
    height: 8px;
    background: var(--jb-beton-light);
    border-radius: 999px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.08);
    overflow: hidden;
}
.jb4wood-ff-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--jb-or) 0%, var(--jb-vert) 100%);
    border-radius: 999px;
    transition: width 0.6s var(--jb-easing);
}
.jb4wood-ff-step {
    animation: jb-fade-in 0.4s var(--jb-easing) both;
}
@keyframes jb-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.jb4wood-ff-nav {
    display: flex; justify-content: space-between; gap: 1rem;
    margin-top: 1.2rem;
}
.jb4wood-ff-nav button {
    position: relative; overflow: hidden;
    padding: 0.7rem 1.6rem;
    background: var(--jb-or); color: #fff;
    border: none; border-radius: 4px 6px 4px 6px;
    font-family: 'Playfair Display', Georgia, serif; font-style: italic;
    cursor: pointer;
    box-shadow: var(--jb-shadow-tordu);
    transform: skewY(-1deg);
    transition: transform 0.3s var(--jb-easing), box-shadow 0.3s var(--jb-easing), background 0.3s var(--jb-easing);
}
.jb4wood-ff-nav button:hover {
    background: var(--jb-vert);
    transform: skewY(-1deg) translateY(-3px);
    box-shadow: var(--jb-shadow-gold);
}
.jb4wood-ff-nav button[disabled] {
    opacity: 0.4; cursor: not-allowed;
}
.jb4wood-ff-nav .jb-prev { background: transparent; color: var(--jb-vert); border: 1px solid var(--jb-vert); box-shadow: none; transform: none; }
.jb4wood-ff-nav .jb-prev:hover { background: var(--jb-vert); color: #fff; transform: translateY(-2px); }

/* === 10. GLOW & GLOSSY pattern global pour autres CTA === */
.entry-content a.button,
.wp-block-button__link,
.ast-custom-button,
.ast-button {
    position: relative; overflow: hidden;
    background: var(--jb-or) !important;
    color: #fff !important;
    border-radius: 4px 6px 4px 6px !important;
    box-shadow: var(--jb-shadow-tordu) !important;
    transform: skewY(-1deg);
    transition: transform 0.4s var(--jb-easing), box-shadow 0.4s var(--jb-easing), background 0.4s var(--jb-easing) !important;
}
.entry-content a.button::before,
.wp-block-button__link::before,
.ast-custom-button::before,
.ast-button::before {
    content:''; position:absolute; top:0; left:-120%;
    width:60%; height:100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
    transition: left 0.7s var(--jb-easing);
    pointer-events: none;
}
.entry-content a.button:hover::before,
.wp-block-button__link:hover::before,
.ast-custom-button:hover::before,
.ast-button:hover::before { left: 130%; }
.entry-content a.button:hover,
.wp-block-button__link:hover,
.ast-custom-button:hover,
.ast-button:hover {
    background: var(--jb-vert) !important;
    transform: skewY(-1deg) translateY(-3px) !important;
    box-shadow: var(--jb-shadow-gold) !important;
}

/* === Titres globaux en ErasBold === */
h1, h2, h3, .entry-title, .site-title {
    font-family: var(--jb-eras) !important;
    color: var(--jb-vert);
    letter-spacing: -0.01em;
}

/* === CENTRAGE TITRES GLOBAL (toutes pages) === */
/* Centre de facon FIABLE tous les titres de contenu h1/h2 du site.
   Pose AVEC !important + specificite (body + .entry-content) pour battre les
   regles de composant scopees (.jb4wood-gravure-intro h2, .jb-faq h2,
   styles inline page, etc.) qui laissaient ces h2 a gauche par defaut.
   Le Blog (page-id-106) et .entry-title/.bm-h1 sont exclus en amont. */
body:not(.page-id-106) .entry-content h1:not(.entry-title):not(.bm-h1),
body:not(.page-id-106) .entry-content h2:not(.entry-title):not(.bm-h1) {
    text-align: center !important;
}

/* EXCLUSIONS — doivent rester alignees a GAUCHE et donc BATTRE le centrage
   ci-dessus. On fixe explicitement left !important (pas revert : ambigu face
   a un centrage !important). Specificite >= celle du centrage (prefixe
   body:not(.page-id-106) .entry-content). NE concerne PAS le <h2> de section
   "Questions frequentes" ni les <h2> de categorie /faq/ (hors .jb-faq-item /
   <details> -> ils restent centres). */
body:not(.page-id-106) .entry-content .grav-grid *,
body:not(.page-id-106) .entry-content .grav-card *,
body:not(.page-id-106) .entry-content .jb-faq-enrich details,
body:not(.page-id-106) .entry-content .jb-faq-enrich details *,
body:not(.page-id-106) .entry-content .jb-faq-enrich summary,
body:not(.page-id-106) .entry-content .jb-faq-enrich details p,
body:not(.page-id-106) .entry-content .jb-faq .jb-faq-item,
body:not(.page-id-106) .entry-content .jb-faq .jb-faq-item *,
body:not(.page-id-106) .entry-content .jb-faq .jb-faq-item summary,
body:not(.page-id-106) .entry-content .jb4wood-cta-final-section *,
body:not(.page-id-106) .entry-content .jb-ar-inline-link *,
body:not(.page-id-106) .entry-content .jb-art-carousel *,
body:not(.page-id-106) .entry-content .post-navigation * {
    text-align: left !important;
}
/* === /CENTRAGE TITRES GLOBAL === */
/* CTA final centre GLOBAL (override anti-regle text-align:left, spec (0,4,1)>(0,3,1), apres). */
body:not(.page-id-106) .entry-content .jb4wood-cta-final-section .jb4wood-cta-card,
body:not(.page-id-106) .entry-content .jb4wood-cta-final-section .jb4wood-cta-card * { text-align: center !important; }
/* Bouton 3D/RA empile (jb-cta-stack) GLOBAL : phrase blanche 1 ligne centree,
   'chez VOUS' centre dessous, fleche ::after a droite fixe. Spec (0,5,1). */
body:not(.page-id-106) .entry-content .jb-ar-inline-link .jb-ar-text{ text-align:center !important; display:block; }
body:not(.page-id-106) .entry-content .jb-ar-cta-btn.jb-cta-stack{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; position:relative; text-align:center !important; padding-left:46px !important; padding-right:46px !important; }
body:not(.page-id-106) .entry-content .jb-ar-cta-btn.jb-cta-stack .jb-cta-line{ display:block; color:#fff !important; text-align:center !important; white-space:nowrap; }
body:not(.page-id-106) .entry-content .jb-ar-cta-btn.jb-cta-stack .jb-cta-hl{ display:block; text-align:center !important; }
body:not(.page-id-106) .entry-content .jb-ar-cta-btn.jb-cta-stack::after{ content:"\2192"; position:absolute; right:18px; top:50%; transform:translateY(-50%); color:#fff; font-weight:700; line-height:1; }

/* === Mobile : header non sticky (Lot 5 v2 — voir MODIF #19 plus bas) === */
@media (max-width: 1023px) {
    body { padding-top: 0; }
    .ast-site-identity { text-align: left; justify-content: flex-start; }
    .jb4wood-logo { align-items: flex-start; }
}

/* ======================================================================
 * MENU MOBILE — refonte complète couleurs (demande client #3, 04/2026)
 * Astra hamburger : panel #ast-mobile-site-navigation, items .menu-item > a
 * Avant : items en blanc transparent → invisibles. Après : marron-fonce ErasBold.
 * ====================================================================== */
@media (max-width: 1024px) {
    /* Bouton burger : icône 3 lignes en haut-droite */
    .ast-mobile-header-wrap .menu-toggle,
    .ast-mobile-header-wrap .ast-mobile-menu-buttons,
    .ast-mobile-header-wrap .ast-mobile-menu-trigger-minimal,
    .ast-mobile-header-wrap .main-header-menu-toggle {
        color: var(--jb-vert) !important;
        background: transparent !important;
        border: 1px solid rgba(20,84,74,0.15) !important;
        border-radius: 6px;
    }
    .ast-mobile-header-wrap .menu-toggle .mobile-menu-toggle-icon,
    .ast-mobile-header-wrap .menu-toggle svg {
        fill: var(--jb-vert) !important;
        color: var(--jb-vert) !important;
    }
    body.ast-mobile-popup-opened .menu-toggle,
    .ast-mobile-popup-opened .ast-mobile-header-wrap .menu-toggle {
        color: var(--marron-fonce) !important;
    }
    body.ast-mobile-popup-opened .menu-toggle svg,
    .ast-mobile-popup-opened .ast-mobile-header-wrap .menu-toggle svg {
        fill: var(--marron-fonce) !important;
    }

    /* ================================================================
       MENU MOBILE — REFONTE Lot 5 v10 (29/04/2026)
       Sidebar panel droite (slide-in), arrêt mi-écran, fond solid (lisible),
       logo fond bois en haut, mask gradient haut+bas, body flouté derrière.
       ================================================================ */

    /* #ast-mobile-header transparent (le panel est sur .ast-mobile-header-content) */
    #ast-mobile-header {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    /* PANEL DROITE — sidebar avec slide-in depuis la droite */
    body.ast-header-break-point #ast-mobile-header .ast-mobile-header-content,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content {
        display: block !important;
        position: fixed !important;
        top: 50% !important;
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        width: 60vw !important;
        max-width: 380px !important;
        min-width: 260px !important;
        height: auto !important;
        max-height: calc(100dvh - 40px) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 9990 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        /* Fond crème chaud (pas le gris béton terne), bord gauche or-bois en accent */
        background: rgba(248, 245, 240, 0.70) !important;
        background-color: rgba(248, 245, 240, 0.70) !important;
        -webkit-backdrop-filter: var(--jb-blur-26) !important;
        backdrop-filter: var(--jb-blur-26) !important;
        border: none !important;
        border-left: 3px solid var(--jb-or, #7C6145) !important;
        border-radius: 22px 0 0 22px !important;
        box-shadow:
            -16px 0 48px rgba(20, 84, 74, 0.22),
            -2px 0 12px rgba(73, 56, 40, 0.08),
            0 0 0 1px rgba(124, 97, 69, 0.20);
        color: var(--marron-fonce) !important;
        /* Pas de mask-image : bords nets avec border-radius + shadow */
        -webkit-mask-image: none !important;
        mask-image: none !important;
        /* État repos : panel hors écran à droite + centré verticalement (translateY -50% pour matcher top:50%) */
        transform: translate(105%, -50%) !important;
        opacity: 0 !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        transition:
            transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.25s ease;
        pointer-events: none;
        will-change: transform, opacity;
        text-align: right !important;
    }

    /* MENU OUVERT : panel slide-in depuis la droite */
    body.ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-content,
    body.ast-popup-nav-open #ast-mobile-header .ast-mobile-header-content,
    body.ast-mobile-popup-opened #ast-mobile-header .ast-mobile-header-content,
    body.ast-main-header-nav-open .ast-mobile-header-wrap .ast-mobile-header-content,
    body.ast-popup-nav-open .ast-mobile-header-wrap .ast-mobile-header-content {
        transform: translate(0, -50%) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Pas d'overlay assombrissant ni flou : le fond reste tel quel (demande client).
       Pour fermer le menu au tap hors panel, on capture les clics sur body via un
       overlay invisible qui ne touche pas au visuel. */
    body::after {
        content: '';
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 9985;
        opacity: 0;
        pointer-events: none;
    }
    body.ast-main-header-nav-open::after,
    body.ast-popup-nav-open::after,
    body.ast-mobile-popup-opened::after {
        opacity: 1;
        pointer-events: auto;
    }

    /* Nav + liste : fond transparent (le panel parent est déjà solid), aligné DROITE */
    #ast-mobile-header .ast-mobile-header-content .main-navigation,
    #ast-mobile-header .ast-mobile-header-content #ast-mobile-site-navigation,
    #ast-mobile-header .ast-mobile-header-content nav.site-navigation,
    #ast-mobile-header .ast-mobile-header-content ul.main-header-menu {
        text-align: right !important;
        background: transparent !important;
        padding: 0 1rem 0.4rem 1rem !important;     /* padding-bottom réduit (était 1rem) */
        margin: 0 !important;
        list-style: none !important;
    }

    /* Items : style premium, séparateurs subtils or-bois, slide-in cascade */
    #ast-mobile-header .ast-mobile-header-content .menu-item {
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: none !important;
        border-bottom: 1px solid rgba(124, 97, 69, 0.18) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: right !important;
        list-style: none !important;
        opacity: 0;
        transform: translateX(20px);
        transition:
            opacity 0.22s ease,
            transform 0.30s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    /* Dernier item : pas de bordure inférieure */
    #ast-mobile-header .ast-mobile-header-content .menu-item:last-child {
        border-bottom: none !important;
    }
    #ast-mobile-header .ast-mobile-header-content .menu-item > a,
    #ast-mobile-header .ast-mobile-header-content .menu-item > .menu-link {
        display: block !important;
        text-align: right !important;
        padding: 1.05rem 0.2rem !important;
        color: var(--marron-fonce) !important;
        font-family: var(--jb-eras) !important;
        font-weight: 700 !important;
        font-size: 1.3rem !important;
        line-height: 1.15 !important;
        background: transparent !important;
        border: none !important;
        text-shadow: none !important;
        transition: color 0.2s ease, transform 0.2s ease;
    }
    #ast-mobile-header .ast-mobile-header-content .menu-item > a:hover,
    #ast-mobile-header .ast-mobile-header-content .menu-item > a:focus,
    #ast-mobile-header .ast-mobile-header-content .menu-item > a:active,
    #ast-mobile-header .ast-mobile-header-content .menu-item > a.jb-tap-active {
        color: var(--jb-vert) !important;
        transform: translateX(-4px);
    }
    #ast-mobile-header .ast-mobile-header-content .current-menu-item > a,
    #ast-mobile-header .ast-mobile-header-content .current_page_item > a {
        color: var(--jb-or, #7C6145) !important;
    }
    /* MENU OUVERT : items apparaissent en cascade rapide (50ms entre, fin ~0.4s) */
    body.ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-content .menu-item,
    body.ast-popup-nav-open #ast-mobile-header .ast-mobile-header-content .menu-item,
    body.ast-mobile-popup-opened #ast-mobile-header .ast-mobile-header-content .menu-item {
        opacity: 1;
        transform: translateX(0);
    }
    body.ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(1),
    body.ast-popup-nav-open      #ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(1) { transition-delay: 0.10s; }
    body.ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(2),
    body.ast-popup-nav-open      #ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(2) { transition-delay: 0.14s; }
    body.ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(3),
    body.ast-popup-nav-open      #ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(3) { transition-delay: 0.18s; }
    body.ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(4),
    body.ast-popup-nav-open      #ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(4) { transition-delay: 0.22s; }
    body.ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(5),
    body.ast-popup-nav-open      #ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(5) { transition-delay: 0.26s; }
    body.ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(6),
    body.ast-popup-nav-open      #ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(6) { transition-delay: 0.30s; }
    body.ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(7),
    body.ast-popup-nav-open      #ast-mobile-header .ast-mobile-header-content .menu-item:nth-child(7) { transition-delay: 0.34s; }

    /* === Le bloc CSS de mise en évidence "Mes réalisations" est défini PLUS BAS,
           après les overrides Astra (ligne ~1656), pour gagner la cascade. */

    /* Logo fond bois — DESCENDU + AGRANDI + animations dynamiques (float, shimmer, glow) */
    #ast-mobile-header .ast-mobile-header-content .jb4wood-logo-drawer-header {
        display: block !important;
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: none !important;
        border-bottom: 1px solid rgba(124, 97, 69, 0.30) !important;
        border-radius: 0 !important;
        padding: 2.5rem 1rem 2.6rem !important;       /* +0.8rem en bas pour respirer l'ombre */
        margin: 0 !important;
        box-shadow: none !important;
        text-align: center !important;
        line-height: 0;
        position: relative;
        overflow: visible;                               /* shimmer désactivé : on laisse l'ombre du logo dépasser */
    }
    /* Le wrapper <a> porte les dimensions exactes du logo : c'est lui qui clip
       le shimmer (::after) au rectangle arrondi.
       overflow:hidden + clip-path:inset(0 round 12px) : double protection
       car overflow:hidden seul ne clip pas un pseudo-element avec
       skewX + mix-blend-mode + transform parent (bug Safari connu). */
    #ast-mobile-header .ast-mobile-header-content .jb4wood-logo-drawer-header > a {
        display: block;
        width: 72%;
        max-width: 210px;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        clip-path: inset(0 round 12px);
        -webkit-clip-path: inset(0 round 12px);
        isolation: isolate;
        line-height: 0;
        /* PERF : promotion GPU layer + isolation paint (sinon backdrop-filter du panel re-blur a chaque frame) */
        transform: translateZ(0);
        will-change: transform;
        contain: paint;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    /* L'<img> dedans remplit 100% du <a> (le <a> a deja les dimensions cibles) */
    #ast-mobile-header .ast-mobile-header-content .jb4wood-logo-drawer-header img,
    #ast-mobile-header .ast-mobile-header-content .jb4wood-logo-drawer-header img.jb4wood-logo-anim {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 12px !important;
        position: relative;
        z-index: 1;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    /* Shimmer "classe" : reflet diagonal lumineux qui glisse sur le logo,
       declenche 5.2s apres l'ouverture du drawer (2.2s anim GIF + 3s pause). */
    #ast-mobile-header .ast-mobile-header-content .jb4wood-logo-drawer-header > a::after {
        content: '';
        position: absolute;
        top: 0;
        left: -55%;
        width: 50%;
        height: 100%;
        background: linear-gradient(110deg,
            transparent 0%,
            transparent 28%,
            rgba(255, 245, 220, 0.18) 40%,
            rgba(255, 250, 235, 0.62) 50%,
            rgba(255, 245, 220, 0.18) 60%,
            transparent 72%,
            transparent 100%);
        transform: skewX(-16deg);
        pointer-events: none;
        z-index: 2;
        mix-blend-mode: overlay;
        opacity: 0;
    }
    body.ast-popup-nav-open      #ast-mobile-header .ast-mobile-header-content .jb4wood-logo-drawer-header > a::after,
    body.ast-mobile-popup-opened #ast-mobile-header .ast-mobile-header-content .jb4wood-logo-drawer-header > a::after,
    body.ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-content .jb4wood-logo-drawer-header > a::after {
        /* 4.4s par cycle = 1.4s shimmer + 3s pause. Delay initial 5.2s pour ne demarrer
           qu apres la fin du GIF (2.2s) + 3s de respiration. Boucle ensuite a l infini. */
        animation: jb-logo-shimmer-classe 4.4s cubic-bezier(0.25, 0.1, 0.25, 1) 5.2s infinite;
    }
    @keyframes jb-logo-shimmer-classe {
        0%   { left: -55%; opacity: 0; }            /* debut shimmer hors cadre gauche */
        4%   { opacity: 1; }                          /* fade in tres rapide */
        28%  { opacity: 1; }                          /* shimmer visible jusqu a sortie droite */
        32%  { left: 110%; opacity: 0; }              /* shimmer sorti a droite (1.4s / 4.4s = 31.8%) */
        100% { left: 110%; opacity: 0; }              /* pause 3s sans shimmer */
    }
    /* Ombre portée AU SOL sous le logo : ellipse aplatie, plus large + plus dense */
    #ast-mobile-header .ast-mobile-header-content .jb4wood-logo-drawer-header::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 8px;
        left: 50%;
        width: 78%;
        max-width: 230px;
        height: 28px;
        background: radial-gradient(ellipse at center,
            rgba(15, 10, 4, 0.62) 0%,
            rgba(15, 10, 4, 0.40) 32%,
            rgba(15, 10, 4, 0.14) 62%,
            transparent 82%);
        filter: blur(5px);
        transform: translateX(-50%);
        pointer-events: none;
        z-index: 0;
    }
    /* (ancien trigger shimmer supprimé : l'ombre au sol est animée en permanence dans la règle ::after ci-dessus) */
    /* Ombre au sol : oscille de gauche à droite et inversement (lumière virtuelle qui
       passe derrière le logo). On combine translateX + scaleX pour simuler la perspective :
       ombre plus longue + plus diluée quand la lumière est rasante (extrémités), plus courte
       et plus dense au point central. */
    @keyframes jb-logo-floor-shadow {
        0% {
            transform: translateX(calc(-50% + 38px)) scaleX(1.15);
            opacity: 0.65;
        }
        50% {
            transform: translateX(-50%) scaleX(1.0);
            opacity: 1;
        }
        100% {
            transform: translateX(calc(-50% - 38px)) scaleX(1.15);
            opacity: 0.65;
        }
    }
    @keyframes jb-logo-glow {
        0%, 100% {
            box-shadow:
                0 4px 14px rgba(20, 84, 74, 0.15),
                0 0 0 0 rgba(124, 97, 69, 0);
        }
        50% {
            box-shadow:
                0 6px 20px rgba(20, 84, 74, 0.22),
                0 0 32px 4px rgba(124, 97, 69, 0.28);
        }
    }
    @keyframes jb-logo-shimmer {
        /* premier passage : déclenché à l'ouverture du drawer */
        0%   { left: -90%; }
        100% { left: 110%; }
    }
    @keyframes jb-logo-shimmer-loop {
        /* boucle lente : balayage 2.6s + longue pause = effet "lumière qui révèle les veines" */
        0%        { left: -90%; }
        25%, 100% { left: 110%; }
    }
    /* Cache le texte JB4WOOD/Ébéniste si présent dans le clone drawer (logo image suffit) */
    #ast-mobile-header .ast-mobile-header-content .jb4wood-logo-drawer-header .jb-mark,
    #ast-mobile-header .ast-mobile-header-content .jb4wood-logo-drawer-header .jb-sub {
        display: none !important;
    }

    /* Empêche le scroll du body quand le menu est ouvert */
    body.ast-main-header-nav-open,
    body.ast-popup-nav-open,
    body.ast-mobile-popup-opened {
        overflow: hidden !important;
    }

    /* Items du menu mobile : marron-fonce, ErasBold, lisibles */
    #ast-mobile-site-navigation .menu-item > a,
    #ast-mobile-site-navigation .menu-item > .menu-link,
    .ast-mobile-popup-content .menu-item > a,
    .ast-mobile-popup-content .menu-item > .menu-link,
    .ast-mobile-popup-content .main-header-menu .menu-item > a,
    .ast-mobile-popup-content .main-header-menu > li > a {
        background: transparent !important;
        color: var(--marron-fonce) !important;
        font-family: var(--jb-eras) !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        font-style: normal !important;
        letter-spacing: 0.01em;
        padding: 0.85rem 1rem !important;
        margin: 0 !important;
        border: none !important;
        border-bottom: 1px solid rgba(73,56,40,0.10) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        text-transform: none !important;
        transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
        display: block;
    }
    /* Item actif (page courante) */
    #ast-mobile-site-navigation .current-menu-item > a,
    #ast-mobile-site-navigation .current_page_item > a,
    .ast-mobile-popup-content .current-menu-item > a,
    .ast-mobile-popup-content .current_page_item > a {
        background: rgba(20,84,74,0.10) !important;
        color: var(--jb-vert) !important;
        border-left: 3px solid var(--jb-vert) !important;
        padding-left: calc(1rem - 3px) !important;
    }
    /* Hover/tap */
    #ast-mobile-site-navigation .menu-item > a:hover,
    #ast-mobile-site-navigation .menu-item > a:focus,
    #ast-mobile-site-navigation .menu-item > a.jb-tap-active,
    .ast-mobile-popup-content .menu-item > a:hover,
    .ast-mobile-popup-content .menu-item > a:focus,
    .ast-mobile-popup-content .menu-item > a.jb-tap-active {
        background: rgba(124,97,69,0.08) !important;
        color: var(--jb-vert) !important;
        transform: none !important;
        box-shadow: none !important;
    }
    /* Sous-menu : indentation + gris-fonce */
    #ast-mobile-site-navigation .sub-menu .menu-item > a,
    .ast-mobile-popup-content .sub-menu .menu-item > a {
        padding-left: 2.5rem !important;
        color: var(--gris-fonce) !important;
        font-size: 0.95rem !important;
        background: rgba(232,228,224,0.4) !important;
    }
    /* Bouton fermer (X) en haut-droite du panel */
    .menu-toggle-close,
    .ast-mobile-popup-close,
    .ast-mobile-popup-drawer .menu-toggle-close {
        color: var(--jb-vert) !important;
        background: transparent !important;
        border: 1px solid rgba(20,84,74,0.20) !important;
        border-radius: 50%;
        width: 36px; height: 36px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .menu-toggle-close svg,
    .ast-mobile-popup-close svg {
        fill: var(--jb-vert) !important;
        color: var(--jb-vert) !important;
        width: 18px; height: 18px;
    }
    /* Anti-fantôme : virer un éventuel text-shadow blanc qui rend les items invisibles */
    #ast-mobile-site-navigation a,
    .ast-mobile-popup-content a,
    .ast-mobile-popup-content .menu-link,
    #ast-mobile-site-navigation .menu-link {
        text-shadow: none !important;
    }
    /* Icône flèche dropdown : visible aussi */
    #ast-mobile-site-navigation .ast-header-navigation-arrow,
    .ast-mobile-popup-content .ast-header-navigation-arrow,
    #ast-mobile-site-navigation .dropdown-menu-toggle {
        color: var(--marron-fonce) !important;
        fill: var(--marron-fonce) !important;
    }

    /* === MISE EN ÉVIDENCE "Mes réalisations" (item 308) — discret : couleur vert + bold + icône appareil photo ===
       Pas de pill, pas de gradient. Juste : texte vert JB4WOOD + un peu plus gros + bold + petit appareil photo à gauche du mot. */
    #ast-mobile-header li.menu-item.menu-item-308 > a,
    #ast-mobile-header li.menu-item.menu-item-308 > a.menu-link,
    #ast-mobile-site-navigation li.menu-item.menu-item-308 > a,
    #ast-mobile-site-navigation li.menu-item.menu-item-308 > a.menu-link,
    .ast-mobile-popup-content li.menu-item.menu-item-308 > a,
    .ast-mobile-popup-content li.menu-item.menu-item-308 > a.menu-link {
        color: var(--jb-vert) !important;
        font-weight: 800 !important;
        font-size: 1.1rem !important;        /* SEUL item à garder une taille pleine pour rester en évidence */
        background: transparent !important;
        white-space: nowrap !important;
    }
    /* Icônes SVG inline (injectées via filter PHP) — taille + alignement
       Camera (item 308 "Mes réalisations") + Feather (item 312 "Blog") */
    #ast-mobile-header .jb-menu-icon,
    #ast-mobile-site-navigation .jb-menu-icon,
    .ast-mobile-popup-content .jb-menu-icon {
        width: 1.15em !important;
        height: 1.15em !important;
        margin-right: 0.45em !important;
        vertical-align: -0.18em !important;
        display: inline-block !important;
    }
    /* Camera : couleur vert (item Mes réalisations qui est mis en évidence) */
    #ast-mobile-header .jb-menu-icon-camera,
    #ast-mobile-site-navigation .jb-menu-icon-camera,
    .ast-mobile-popup-content .jb-menu-icon-camera {
        color: var(--jb-vert) !important;
    }
    /* Feather : couleur or-bois pour rester discret comme les autres items */
    #ast-mobile-header .jb-menu-icon-feather,
    #ast-mobile-site-navigation .jb-menu-icon-feather,
    .ast-mobile-popup-content .jb-menu-icon-feather {
        color: var(--jb-or) !important;
    }
    #ast-mobile-site-navigation li.menu-item.menu-item-308.current-menu-item > a,
    #ast-mobile-site-navigation li.menu-item.menu-item-308.current_page_item > a,
    .ast-mobile-popup-content li.menu-item.menu-item-308.current-menu-item > a,
    .ast-mobile-popup-content li.menu-item.menu-item-308.current_page_item > a {
        color: var(--jb-vert) !important;
    }
    /* Item "Gravure & Découpe Numérique" (309) : font plus petit pour ne pas
       le mettre en avant visuellement (texte long mais discret). */
    #ast-mobile-header li.menu-item.menu-item-309 > a,
    #ast-mobile-header li.menu-item.menu-item-309 > a.menu-link,
    #ast-mobile-site-navigation li.menu-item.menu-item-309 > a,
    #ast-mobile-site-navigation li.menu-item.menu-item-309 > a.menu-link,
    .ast-mobile-popup-content li.menu-item.menu-item-309 > a,
    .ast-mobile-popup-content li.menu-item.menu-item-309 > a.menu-link {
        font-size: 0.93rem !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
    }
}

/* ======================================================================
 * PHOTO HELBERT — figure dédiée (remplace iframe Facebook posts 14 + 168)
 * ====================================================================== */
.jb4wood-helbert-photo {
    margin: 2rem auto;
    max-width: 600px;
    text-align: center;
}
.jb4wood-helbert-photo img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(20,84,74,0.18), 0 0 0 1px rgba(73,56,40,0.05);
    display: block;
    margin: 0 auto;
}
.jb4wood-helbert-photo figcaption {
    margin-top: 1rem;
    font-family: var(--jb-serif);
    font-size: 0.95rem;
    color: var(--gris-fonce);
    font-style: italic;
    line-height: 1.5;
}

/* === 11. EFFETS GLOSSY/GLOW AU TACTILE (mobile) ===
   Sur tactile, :hover "colle" après le tap. On reproduit l'effet wow desktop
   via une classe .jb-tap-active ajoutée 700ms par le JS au touchstart. */

/* Sweep glossy : refléter les ::before:hover en ::before pendant .jb-tap-active */
.main-header-menu > li > a.jb-tap-active::before,
.entry-content a.button.jb-tap-active::before,
.wp-block-button__link.jb-tap-active::before,
.ast-custom-button.jb-tap-active::before,
.ast-button.jb-tap-active::before,
.jb4wood-cta-final a.jb-tap-active::before,
.fluentform button.ff-btn-submit.jb-tap-active::before,
.fluentform .ff-btn.jb-tap-active::before,
.jb4wood-presta-card.jb-tap-active::before,
.jb4wood-ff-nav button.jb-tap-active::before {
    left: 130%;
}

/* Glow + lift : reproduire l'état :hover sur .jb-tap-active */
.main-header-menu > li > a.jb-tap-active {
    background: var(--jb-vert) !important;
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: var(--jb-shadow-gold);
}
.entry-content a.button.jb-tap-active,
.wp-block-button__link.jb-tap-active,
.ast-custom-button.jb-tap-active,
.ast-button.jb-tap-active {
    background: var(--jb-vert) !important;
    transform: skewY(-1deg) translateY(-3px) !important;
    box-shadow: var(--jb-shadow-gold) !important;
}
.jb4wood-cta-final a.jb-tap-active {
    transform: skewY(-1deg) translateY(-4px);
    box-shadow: var(--jb-shadow-gold-intense);
}
.fluentform button.ff-btn-submit.jb-tap-active,
.fluentform .ff-btn.jb-tap-active {
    background: var(--jb-vert) !important;
    transform: skewY(-1deg) translateY(-3px);
    box-shadow: var(--jb-shadow-gold) !important;
}
.jb4wood-presta-card.jb-tap-active {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(20,84,74,0.18), 0 0 24px rgba(124,97,69,0.25);
    border-color: var(--jb-or);
}
.jb4wood-presta-card.jb-tap-active .ico { background-color: var(--jb-or); }
.jb4wood-ff-nav button.jb-tap-active {
    background: var(--jb-vert);
    transform: skewY(-1deg) translateY(-3px);
    box-shadow: var(--jb-shadow-gold);
}
.jb-card.jb-tap-active {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(20,84,74,0.18), 0 0 24px rgba(124,97,69,0.35);
}

/* === 12. POLICE CONSTANTIA (fallback Lora) pour textes basiques === */
.sous-titre,
.entry-content p,
.jb4wood-presta-card p,
.jb4wood-presta-card .desc,
.jb4wood-accroche .sous-titre,
.realisation-content p,
.jb4wood-galerie-tags,
.jb4wood-cta-final p,
.fluentform .ff-el-input--label label,
.jb-card p {
    font-family: var(--jb-serif);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--jb-text);
}
/* Garder Inter explicitement pour nav, boutons, champs et tableaux */
.main-header-menu a,
.fluentform input,
.fluentform select,
.fluentform textarea,
button,
table, th, td {
    font-family: var(--jb-body) !important;
}

/* Pulse-glow lent automatique sur CTA primaires (mobile uniquement) */
@keyframes jb-pulse-glow {
    0%   { box-shadow: var(--jb-shadow-tordu); }
    18%  { box-shadow: var(--jb-shadow-tordu), 0 0 25px rgba(124,97,69,0.5); }
    37%  { box-shadow: var(--jb-shadow-tordu); }
    100% { box-shadow: var(--jb-shadow-tordu); }
}
@media (hover: none) and (pointer: coarse) {
    /* Cible les CTA primaires : Obtenir un devis + boutons quizz Suivant */
    .jb4wood-cta-final a,
    .jb4wood-ff-nav .jb-next,
    a.jb4wood-cta,
    .fluentform button.ff-btn-submit {
        animation: jb-pulse-glow 4s ease-in-out infinite;
    }
    /* Désactive l'animation pendant le tap pour ne pas overrider le glow tap */
    .jb4wood-cta-final a.jb-tap-active,
    .jb4wood-ff-nav .jb-next.jb-tap-active,
    a.jb4wood-cta.jb-tap-active,
    .fluentform button.ff-btn-submit.jb-tap-active {
        animation: none;
    }
}

/* ======================================================================
 * 12. FIX SERVICES-BAND LISIBILITÉ (Au service de vos projets)
 * Le fond vert est rendu transparent par .home > section, donc texte blanc
 * devenait illisible sur béton. On bascule sur palette marron/vert lisible.
 * ====================================================================*/
.home .entry-content > section.jb4wood-services-band,
section.jb4wood-services-band {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: var(--jb-blur-6);
    -webkit-backdrop-filter: var(--jb-blur-6);
    border-radius: 12px;
    padding: 50px 30px !important;
    margin: 60px auto !important;
    box-shadow: 0 4px 20px rgba(20, 84, 74, 0.06);
}
.jb4wood-services-band h2 {
    color: var(--marron-fonce) !important;
    font-family: var(--jb-eras) !important;
    text-align: center;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom: 40px !important;
    letter-spacing: -0.01em;
}
.jb4wood-services-band .service-item p {
    color: var(--marron-fonce) !important;
    font-family: var(--jb-eras) !important;
    font-weight: 700;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0.01em;
    text-shadow: none !important;
}
.jb4wood-services-band .service-item svg {
    stroke: var(--jb-vert) !important;
    fill: none !important;
    stroke-width: 1.6;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    transition: transform 0.3s var(--jb-easing);
}
.jb4wood-services-band .service-item:hover svg {
    transform: translateY(-4px) scale(1.05);
    stroke: var(--jb-or) !important;
}

/* ======================================================================
 * 13. FOOTER ENRICHI — refonte 04/2026 : fond béton clair glass + texte foncé
 * Demande client : "rester dans les beiges/marron clair OU blanc faible
 * opacité, écritures plus foncées, lisibilité +".
 * ====================================================================*/
.jb4wood-footer-enrich {
    /* Zone footer entièrement transparente — pas de border-top, pas de fond.
       On veut zéro jonction visible entre le site et le footer (texture béton continue).
       Glass uniquement sur les .footer-col (cf. jb4wood-footer.php). */
    background: transparent !important;
    border-top: none !important;
    color: var(--marron-fonce);
}
.jb4wood-footer-enrich .footer-col h4 {
    color: var(--marron-fonce) !important;
    font-family: var(--jb-eras) !important;
    font-size: 1.2rem;
    text-shadow: none;
    letter-spacing: 0.01em;
}
.jb4wood-footer-enrich .footer-contact a,
.jb4wood-footer-enrich .footer-col p,
.jb4wood-footer-enrich .footer-bottom,
.jb4wood-footer-enrich .footer-bottom a {
    color: var(--marron-fonce) !important;
    text-shadow: 0 1px 1px rgba(255,255,255,0.45);
    font-family: var(--jb-serif); /* serif standard = PT Serif self-hostee (ex-Constantia non self-hostee, 2026-05-23) */
    font-size: 1.05rem;
    line-height: 1.65;
}
.jb4wood-footer-enrich .footer-bottom a {
    color: var(--jb-vert) !important;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s var(--jb-easing), color 0.2s var(--jb-easing);
}
.jb4wood-footer-enrich .footer-contact a:hover,
.jb4wood-footer-enrich .footer-bottom a:hover {
    color: var(--jb-or) !important;
    border-bottom-color: var(--jb-or);
}
.jb4wood-footer-enrich .footer-contact svg {
    stroke: var(--jb-vert) !important;
}
.jb4wood-footer-enrich .footer-bottom {
    border-top: 1px solid rgba(73, 56, 40, 0.18) !important;
}

/* RS footer (refonte 04/2026 v2) — RETOUR au format initial demandé par le client :
   carrés arrondis marron-fonce, icônes BLANCHES, hover vert + lift + glow.
   Plus de couleurs marques, plus de fond blanc, plus de dégradé Instagram. */
.jb4wood-footer-enrich .footer-socials {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.jb4wood-footer-enrich .footer-socials a {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--marron-fonce);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 250ms var(--jb-easing), background 250ms var(--jb-easing), box-shadow 250ms var(--jb-easing);
    text-decoration: none !important;
    overflow: hidden;
    border: none !important;
    box-shadow: 0 4px 10px rgba(73,56,40,0.20);
}
.jb4wood-footer-enrich .footer-socials a:hover,
.jb4wood-footer-enrich .footer-socials a:focus-visible {
    background: var(--jb-vert);
    transform: translateY(-2px) scale(1.10);
    box-shadow: 0 6px 18px rgba(20,84,74,0.40);
    outline: none;
}
/* On force le blanc sur toute la SVG (override des fills couleur marque) */
.jb4wood-footer-enrich .footer-socials a svg,
.jb4wood-footer-enrich .footer-socials a svg path,
.jb4wood-footer-enrich .footer-socials a svg circle,
.jb4wood-footer-enrich .footer-socials a svg rect {
    width: 22px;
    height: 22px;
    fill: #fff !important;
    color: #fff !important;
}
.jb4wood-footer-enrich .footer-socials a svg path,
.jb4wood-footer-enrich .footer-socials a svg circle,
.jb4wood-footer-enrich .footer-socials a svg rect {
    width: auto;
    height: auto;
}
/* Override du gradient Instagram : on aplatit sur blanc */
.jb4wood-footer-enrich .footer-socials a.soc-ig svg defs { display: none; }
.jb4wood-footer-enrich .footer-socials a.soc-ig svg path[fill^="url"] { fill: #fff !important; }
/* PNG L'Air du Bois passé en blanc via filter */
.jb4wood-footer-enrich .footer-socials a.soc-adb img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
    transition: transform 0.3s var(--jb-easing), filter 0.3s var(--jb-easing);
}
.jb4wood-footer-enrich .footer-socials a.soc-adb:hover img,
.jb4wood-footer-enrich .footer-socials a.soc-adb:focus-visible img {
    transform: scale(1.06);
}

/* ======================================================================
 * 14. FORM FLUENT — hover/focus/tactile + validation visuelle erreurs
 * ====================================================================*/
.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="url"],
.fluentform select,
.fluentform textarea {
    transition: border-color 0.2s var(--jb-easing), box-shadow 0.2s var(--jb-easing), transform 0.2s var(--jb-easing), background-color 0.2s var(--jb-easing) !important;
}
@media (hover: hover) {
    .fluentform .ff-el-form-control:hover:not(:focus):not(.jb-error),
    .fluentform input[type="text"]:hover:not(:focus):not(.jb-error),
    .fluentform input[type="email"]:hover:not(:focus):not(.jb-error),
    .fluentform input[type="tel"]:hover:not(:focus):not(.jb-error),
    .fluentform input[type="number"]:hover:not(:focus):not(.jb-error),
    .fluentform select:hover:not(:focus):not(.jb-error),
    .fluentform textarea:hover:not(:focus):not(.jb-error) {
        border-color: var(--jb-or) !important;
        box-shadow: var(--jb-shadow-tordu-form), 0 0 0 3px rgba(124, 97, 69, 0.15) !important;
        transform: translateY(-1px);
    }
}
.fluentform .ff-el-form-control:focus,
.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus {
    border-color: var(--jb-vert) !important;
    box-shadow: var(--jb-shadow-tordu-form), 0 0 0 3px rgba(20, 84, 74, 0.2) !important;
    transform: translateY(-2px);
    outline: none !important;
}
.fluentform .ff-el-form-control:active,
.fluentform input:active,
.fluentform select:active,
.fluentform textarea:active {
    border-color: var(--jb-or) !important;
    box-shadow: var(--jb-shadow-tordu-form), 0 0 0 3px rgba(124, 97, 69, 0.18) !important;
}

/* État erreur stylisé (rouge tomato doux) */
@keyframes jb-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.fluentform .ff-el-form-control.jb-error,
.fluentform input.jb-error,
.fluentform select.jb-error,
.fluentform textarea.jb-error,
.fluentform .ff-el-input--input.jb-error input,
.fluentform .ff-el-input--input.jb-error textarea,
.fluentform .ff-el-input--input.jb-error select {
    border: 2px solid #d1604f !important;
    background-color: rgba(244, 222, 218, 0.5) !important;
    box-shadow: 0 4px 14px rgba(209, 96, 79, 0.25), inset 0 0 0 1px rgba(209, 96, 79, 0.08) !important;
    animation: jb-shake 0.4s var(--jb-easing);
}
.fluentform .ff-el-group.jb-error-group label,
.fluentform .ff-el-input--label.jb-error-group label {
    color: #a8483c !important;
}
.fluentform .jb-error-msg {
    display: block;
    color: #a8483c;
    font-size: 0.8rem;
    font-style: italic;
    margin-top: 0.35rem;
    font-family: var(--jb-body);
}
.fluentform .ff-el-form-control.jb-error:focus,
.fluentform input.jb-error:focus,
.fluentform textarea.jb-error:focus,
.fluentform select.jb-error:focus {
    border-color: var(--jb-vert) !important;
    background-color: var(--jb-beton-light) !important;
    box-shadow: var(--jb-shadow-tordu-form), 0 0 0 3px rgba(20, 84, 74, 0.2) !important;
    animation: none;
}

/* === Section AVIS CLIENTS (homepage, repro fidèle) === */
.jb4wood-avis-clients {
    max-width: 1200px;
    margin: 4.5rem auto 4rem;
    padding: 0 20px;
    text-align: center;
}
.jb4wood-avis-clients .jb4wood-avis-eyebrow {
    display: inline-block;
    width: 60px;
    height: 2px;
    background: var(--marron-fonce);
    margin: 0 auto 18px;
    opacity: 0.85;
}
.jb4wood-avis-clients h2.jb4wood-avis-title {
    font-family: var(--jb-eras), Georgia, serif;
    font-size: clamp(2rem, 4vw, 2.9rem);
    color: var(--marron-fonce) !important;
    letter-spacing: 0.04em;
    margin: 0 0 2.5rem;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.05;
}
.jb4wood-avis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    margin-bottom: 2.6rem;
}
@media (max-width: 980px) { .jb4wood-avis-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .jb4wood-avis-grid { grid-template-columns: 1fr; gap: 1.2rem; } }
.jb4wood-avis-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: var(--jb-blur-2);
    border-radius: 12px;
    padding: 1.8rem 1.5rem 1.6rem;
    box-shadow:
        0 4px 14px rgba(73, 56, 40, 0.08),
        0 16px 40px rgba(20, 84, 74, 0.07);
    border: 1px solid rgba(73, 56, 40, 0.05);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    transition: transform 0.25s var(--jb-easing), box-shadow 0.25s var(--jb-easing);
}
.jb4wood-avis-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 22px rgba(73, 56, 40, 0.12),
        0 24px 60px rgba(20, 84, 74, 0.12);
}
.jb4wood-avis-card cite {
    font-style: normal;
    font-family: var(--jb-eras), Georgia, serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--jb-vert);
    letter-spacing: 0.02em;
}
.jb4wood-avis-card blockquote {
    margin: 0;
    padding: 0;
    border: none;
    font-style: italic;
    font-family: var(--jb-serif); /* serif standard Constantia (ex-Lora) — citation avis */
    color: var(--jb-vert);
    font-size: 1rem;
    line-height: 1.55;
    quotes: "\201C" "\201D";
}
.jb4wood-avis-card blockquote p { margin: 0; }
/* === Effet apparition texte (mots cascade) sur les avis clients === */
.jb4wood-avis-card blockquote .jb-avis-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 0.45s ease-out,
        transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: opacity, transform;
}
.jb4wood-avis-card.is-revealed blockquote .jb-avis-word {
    opacity: 1;
    transform: translateY(0);
}
.jb4wood-avis-stars {
    display: flex;
    gap: 4px;
    margin-top: auto;
    align-items: center;
}
.jb4wood-avis-stars svg {
    width: 20px;
    height: 20px;
    fill: var(--jb-yellow);
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.12));
    transition: transform 0.25s ease, filter 0.25s ease;
}
.jb4wood-avis-stars svg.jb-glow {
    transform: scale(1.18) rotate(-4deg);
    filter: drop-shadow(0 0 6px rgba(245, 180, 0, 0.7));
}
.jb4wood-avis-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.jb4wood-avis-btn {
    display: inline-block;
    background: var(--jb-vert);
    color: #fff !important;
    font-family: var(--jb-serif); /* serif standard Constantia (ex-Lora) — bouton avis */
    font-style: italic;
    font-weight: 500;
    font-size: 1rem;
    padding: 1rem 2rem;
    border-radius: 6px;
    text-decoration: none !important;
    letter-spacing: 0.04em;
    box-shadow:
        6px 8px 14px rgba(20, 84, 74, 0.22),
        2px 4px 6px rgba(73, 56, 40, 0.14);
    transition: transform 0.22s var(--jb-easing), box-shadow 0.22s var(--jb-easing), background 0.22s var(--jb-easing);
    border: none;
    cursor: pointer;
}
.jb4wood-avis-btn:hover,
.jb4wood-avis-btn:focus-visible {
    transform: translateY(-2px);
    background: var(--jb-vert-clair);
    box-shadow:
        8px 12px 22px rgba(20, 84, 74, 0.30),
        3px 6px 10px rgba(73, 56, 40, 0.20),
        0 0 24px rgba(124, 97, 69, 0.25);
    outline: none;
}
.jb4wood-avis-btn--ghost {
    background: transparent;
    color: var(--jb-vert) !important;
    border: 2px solid var(--jb-vert);
    box-shadow: 4px 6px 10px rgba(20, 84, 74, 0.10);
}
.jb4wood-avis-btn--ghost:hover {
    background: var(--jb-vert);
    color: #fff !important;
}

/* === Badges affiliations footer (CAPEB / Nord Limagne / Décennale) === */
.jb4wood-footer-enrich .footer-badges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.jb4wood-footer-enrich .footer-badges li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--marron-fonce);
    font-size: 0.88rem;
    line-height: 1.3;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.45);
    font-family: var(--jb-serif); /* serif standard = PT Serif self-hostee (ex-Constantia non self-hostee, 2026-05-23) */
}
.jb4wood-footer-enrich .footer-badges svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--jb-vert);
    stroke: var(--jb-vert);
}
.jb4wood-footer-enrich .footer-badges strong {
    color: var(--marron-fonce);
    font-weight: 700;
    font-family: var(--jb-eras);
}
@media (min-width: 768px) {
    .jb4wood-footer-enrich .footer-badges { gap: 0.45rem; }
}

/* ======================================================================
 * 15. LIGHTBOX GALERIE/PROS — overlay full-screen avec descriptions
 * ====================================================================*/
.jb-lightbox-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 99999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s var(--jb-easing);
    backdrop-filter: var(--jb-blur-6);
    -webkit-backdrop-filter: var(--jb-blur-6);
    /* Modif #12 (04/2026) : pas de scroll horizontal sur les images zoomées */
    overflow: hidden;
    max-width: 100vw;
}
.jb-lightbox-overlay.is-open {
    display: flex !important;
    opacity: 1;
}
.jb-lightbox-inner {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 2rem 3rem;
    box-sizing: border-box;
}
.jb-lightbox-image-wrap {
    flex: 1 1 auto;
    max-width: 65%;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jb-lightbox-image-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(124, 97, 69, 0.25);
}
.jb-lightbox-meta {
    flex: 0 0 32%;
    color: #fff;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1rem 0.5rem;
}
.jb-lightbox-meta h2 {
    font-family: var(--jb-eras), 'Signika', Georgia, serif;
    color: var(--jb-or-clair);
    font-size: 1.5rem;
    margin: 0 0 1rem;
    line-height: 1.2;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.jb-lightbox-meta .jb-lightbox-desc {
    font-family: var(--jb-serif);
    font-size: 1rem;
    line-height: 1.7;
    color: #ece8e2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.jb-lightbox-meta .jb-lightbox-tags {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--jb-or-clair);
    font-style: italic;
}
.jb-lightbox-close {
    position: absolute;
    top: 22px; right: 28px;
    width: 48px; height: 48px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.25s var(--jb-easing), transform 0.25s var(--jb-easing);
    z-index: 100001;
}
/* Modif #4 (04/2026) : rotate retiré → scale + couleur or au hover */
.jb-lightbox-close:hover { background: rgba(255,255,255,0.18); color: var(--jb-or); transform: scale(1.15); }
.jb-lightbox-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 56px; height: 56px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    transition: background 0.25s var(--jb-easing);
    z-index: 100001;
}
.jb-lightbox-nav:hover { background: var(--jb-or); }
.jb-lightbox-prev { left: 18px; }
.jb-lightbox-next { right: 18px; }
.jb-lightbox-counter {
    position: absolute;
    bottom: 18px; left: 50%; transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    font-family: var(--jb-body);
}
/* Activable hint sur les images cliquables */
.jb4wood-galerie-item, .jb4wood-pro-card, .pro-section img { cursor: pointer; }
/* === Pas de curseur loupe (zoom-in) sur les photos — TOUT le site, toutes les pages ===
   2 sources couvertes :
   1) Lightbox natif Gutenberg (wp-includes/blocks/image/style.css : .wp-lightbox-container img{cursor:zoom-in}) — coeur WP, jamais edite.
   2) CSS propres aux pages JB4WOOD qui posent cursor:zoom-in sur .grav-card / .jb-hero-anchor / .pro-video video / .pro-media-link img (non !important -> ce !important global gagne). */
.wp-lightbox-container img,
.wp-lightbox-container .lightbox-trigger,
.wp-lightbox-container button.lightbox-trigger,
img[data-wp-lightbox],
figure[data-wp-lightbox] img,
.grav-card, .grav-card img, .grav-card a,
.jb-hero-anchor,
.pro-media-link, .pro-media-link img,
.pro-video video, .jb4wood-hero-pro-wrapper video,
[data-lightbox], [data-lightbox] img { cursor: pointer !important; }

/* === Pages articles (single post) : texte en F2 (Constantia) justifie ===
   Scope = enfants DIRECTS de .entry-content -> n'affecte PAS les articles
   presse (contenu enveloppe dans .jb4wood-article-presse), design preserve. */
body.single-post .entry-content > p,
body.single-post .entry-content > ul li,
body.single-post .entry-content > ol li,
body.single-post .entry-content > table td,
body.single-post .entry-content > blockquote,
body.single-post .entry-content > figure figcaption {
  font-family: var(--jb-serif) !important;
  font-size:clamp(1.1rem,2vw,1.35rem) !important;
  line-height:1.75 !important;
  color:var(--marron-fonce) !important;
  text-align:justify !important;
  hyphens:none !important;
}
body.single-post .entry-content > h2,
body.single-post .entry-content > h3 {
  font-family:'Signika','Arial Black',Impact,sans-serif !important;
  color:var(--jb-vert) !important;
}
/* JB-ART-TITLE-CENTER (2026-05-20) : titre d'article (entry-title) centré sur single post */
body.single-post .entry-title,
body.single-post h1.entry-title,
body.single-post h2.entry-title { text-align:center !important; }
body.single-post .entry-content .jb-art-cta p { text-align:center !important; }
/* CTA expert en bas d'article */
body.single-post .jb-art-cta {
  max-width:760px; margin:48px auto; padding:38px 28px; text-align:center;
  background:linear-gradient(135deg,var(--jb-vert) 0%,var(--jb-vert-clair) 60%,var(--jb-or) 165%);
  border-radius:14px; box-shadow:0 10px 26px rgba(73,56,40,.22);
}
body.single-post .jb-art-cta .jb-art-cta-k {
  font-family:'Signika','Arial Black',Impact,sans-serif !important;
  letter-spacing:.18em; text-transform:uppercase; font-size:.8rem;
  color:#fff !important; opacity:.85; margin:0 0 6px !important;
}
body.single-post .jb-art-cta h3 {
  font-family:'Signika','Arial Black',Impact,sans-serif !important;
  color:#fff !important; font-size:clamp(1.5rem,3vw,2rem);
  margin:0 0 10px !important; text-transform:uppercase;
}
body.single-post .jb-art-cta p {
  color:#f1ece4 !important; font-size:1.05rem !important;
  line-height:1.6 !important; margin:0 0 22px !important; text-align:center !important;
}
body.single-post .jb-art-cta-btn {
  display:inline-block; font-family:'Signika','Arial Black',Impact,sans-serif !important;
  background:#fff; color:var(--jb-vert) !important; padding:14px 32px; border-radius:8px;
  text-transform:uppercase; letter-spacing:.04em; text-decoration:none !important;
  transition:transform .2s, box-shadow .2s;
}
body.single-post .jb-art-cta-btn:hover {
  transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.25);
}

/* (bloc F2 non-scope en double retire : il cassait les articles presse) */

@media (max-width: 900px) {
    .jb-lightbox-inner { flex-direction: column; padding: 3rem 1rem 4rem; gap: 1rem; }
    .jb-lightbox-image-wrap { max-width: 100%; height: 50vh; }
    .jb-lightbox-meta { flex: 1 1 auto; max-height: 35vh; padding: 0 0.5rem; }
    .jb-lightbox-nav { width: 44px; height: 44px; }
}

/* Image de presentation en tete d'article (single post) */
body.single-post .entry-content > figure.jb-art-hero { margin:0 0 28px; }
body.single-post .entry-content > figure.jb-art-hero img {
  width:100%; height:auto; display:block; border-radius:12px;
  box-shadow:0 8px 22px rgba(73,56,40,.16);
}

/* Images d'article : centrees */
body.single-post .entry-content img {
  display:block; margin-left:auto; margin-right:auto;
  max-width:100%; height:auto;
}
body.single-post .entry-content figure { margin-left:auto; margin-right:auto; text-align:center; }
body.single-post .entry-content figure figcaption { text-align:center; }

/* Carrousel images en tete d'article (single post) */
body.single-post .entry-content > .jb-art-carousel {
  position:relative; width:100%; max-width:540px;
  margin:0 auto 34px !important; border-radius:14px; overflow:hidden;
  background:transparent; box-shadow:0 10px 30px rgba(20,40,30,.18); font-size:0;
}
body.single-post .jbc-track {
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
body.single-post .jbc-track::-webkit-scrollbar { display:none; }
body.single-post .jbc-track img {
  flex:0 0 100%; width:100%; aspect-ratio:1/1; height:auto;
  object-fit:cover; scroll-snap-align:center; display:block; margin:0; border-radius:0;
}
body.single-post .jbc-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border:0; border-radius:0;
  background:transparent; color:#fff;
  font:700 34px/1 Georgia,serif; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s; z-index:2; padding:0;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
body.single-post .jbc-nav:hover { transform:translateY(-50%) scale(1.18); }
body.single-post .jbc-prev { left:14px; }
body.single-post .jbc-next { right:14px; }
body.single-post .jbc-dots {
  position:absolute; bottom:14px; left:0; right:0;
  display:flex; gap:7px; justify-content:center; z-index:2;
}
body.single-post .jbc-dots i {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.45); cursor:pointer;
  transition:background .18s,transform .18s;
}
body.single-post .jbc-dots i.on { background:var(--jb-or); transform:scale(1.25); }
body.single-post .jb-art-carousel.jbc-single .jbc-nav,
body.single-post .jb-art-carousel.jbc-single .jbc-dots { display:none; }
@media (max-width:680px) {
  body.single-post .jbc-nav { width:36px; height:36px; font-size:22px; }
}

/* Navigation article (prec / tous les articles / suiv) — relook charte */
/* Pleine largeur : Precedent colle a gauche, Suivant colle a droite de l'ecran */
body.single-post .post-navigation {
  border:0; box-sizing:border-box;
  max-width:1100px; width:100%;
  margin:46px auto 10px; padding:0 24px;
}
/* Grille : Precedent | Suivant (2 colonnes egales) ; Le blog en pleine largeur dessous */
body.single-post .post-navigation .nav-links {
  display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:stretch;
}
/* Flou verre 2px — ORDI uniquement (cf. alerte perf parallax) */
@media (min-width:1024px){
  body.single-post .post-navigation .nav-links > div > a {
    -webkit-backdrop-filter: var(--jb-blur-2); backdrop-filter: var(--jb-blur-2);
  }
  /* Ordi : bouton blog = "Le blog" uniquement (masque "Tous les articles") */
  body.single-post .post-navigation .nav-allposts a p { display:none !important; }
}
/* Les items de grille DOIVENT remplir toute leur colonne (sinon Suivant reste au milieu) */
body.single-post .post-navigation .nav-links > .nav-previous,
body.single-post .post-navigation .nav-links > .nav-next {
  display:flex !important; width:100% !important; min-width:0;
  justify-self:stretch; align-self:stretch; text-align:center;
}
body.single-post .post-navigation .nav-previous { grid-column:1; grid-row:1; }
body.single-post .post-navigation .nav-next { grid-column:2; grid-row:1; }
body.single-post .post-navigation .nav-allposts { grid-column:1 / -1; grid-row:2; display:flex; }
/* Boutons prec/suiv : uniquement le libelle "Article precedent/suivant" (titre masque) */
body.single-post .post-navigation .nav-previous a p,
body.single-post .post-navigation .nav-next a p { display:none !important; }
body.single-post .post-navigation .nav-links > div > a,
body.single-post .post-navigation .nav-allposts a {
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px;
  height:100%; width:100% !important; max-width:100% !important; margin:0 !important;
  padding:16px 20px !important; box-sizing:border-box;
  border:1px solid rgba(124,97,69,.45);
  border-radius:10px; background:rgba(255,255,255,.55);
  text-decoration:none !important; color:var(--jb-vert) !important;
  transition:background .2s, transform .2s, box-shadow .2s;
}
/* Neutralise Astra : max-width:80% sur les <a>, separateur 1px, padding inline-flex */
body.single-post .post-navigation .nav-links { padding:0 !important; }
body.single-post .post-navigation .nav-previous:after,
body.single-post .post-navigation .nav-next:after,
body.single-post .post-navigation .nav-allposts:after { content:none !important; display:none !important; }
body.single-post .post-navigation .nav-links > div > a:hover,
body.single-post .post-navigation .nav-allposts a:hover {
  background:var(--jb-or); color:#fff !important;
  transform:translateY(-2px); box-shadow:0 8px 18px rgba(73,56,40,.22);
}
body.single-post .post-navigation .nav-links > div > a:hover .ahfb-svg-iconset svg { fill:#fff; }
body.single-post .post-navigation .ast-post-nav {
  font-family:'Signika','Arial Black',Impact,sans-serif !important;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--jb-or);
  white-space:normal; line-height:1.3; text-align:center; width:100%;
}
body.single-post .post-navigation .nav-previous a,
body.single-post .post-navigation .nav-next a {
  align-items:center; justify-content:center; text-align:center;
  min-width:0; width:100%; box-sizing:border-box;
}
body.single-post .post-navigation .nav-next a:hover .ast-post-nav,
body.single-post .post-navigation .nav-previous a:hover .ast-post-nav,
body.single-post .post-navigation .nav-allposts a:hover .ast-post-nav,
body.single-post .post-navigation .nav-allposts a:hover p { color:#fff !important; }
body.single-post .post-navigation .nav-links p {
  margin:0 !important; font-family:var(--jb-serif) !important;
  font-size:1rem !important; line-height:1.35 !important; color:inherit !important;
  text-align:inherit !important;
}
body.single-post .post-navigation .nav-allposts a {
  align-items:center; text-align:center;
  font-family:'Signika','Arial Black',Impact,sans-serif !important;
  text-transform:uppercase; letter-spacing:.06em; font-size:.95rem;
  background:var(--jb-vert); color:#fff !important; border-color:var(--jb-vert);
}
body.single-post .post-navigation .nav-allposts a:hover { background:var(--jb-or); border-color:var(--jb-or); }
@media (max-width:680px){
  /* Precedent / Suivant cote a cote, marge symetrique aux bords ; 2 lignes si besoin */
  body.single-post .post-navigation { padding:0 16px; }
  body.single-post .post-navigation .nav-links { gap:10px; }
  body.single-post .post-navigation .nav-links > div > a { padding:14px 12px; }
  body.single-post .post-navigation .ast-post-nav { font-size:.72rem; letter-spacing:.06em; }
}

/* === CTA premium (visuel sb-08-cta-final) reutilise dans les articles === */
/* Spécificité forcée pour battre #jb4wood-sandbox-isolate qui force width:100vw sur tout <section> direct de .entry-content */
body.jb4wood-sb .entry-content > .jb4wood-cta-final-section,
.entry-content > .jb4wood-cta-final-section,
.jb4wood-cta-final-section{
    width:min(92vw, 390px) !important;
    max-width:390px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-top:20px !important;
    margin-bottom:30px !important;
    padding:18px 0 22px !important;
    position:relative !important;
    box-sizing:border-box !important;
    border-top:none !important;
    border-bottom:none !important;
}
.jb4wood-cta-card{
    position:relative;
    isolation:isolate;
    overflow:visible;
    padding:54px 26px 64px;
    background:transparent;
    -webkit-backdrop-filter: var(--jb-blur-2);
    backdrop-filter: var(--jb-blur-2);
    border:3px solid var(--jb-or);
    border-radius:18px;
    box-shadow:none;
    text-align:center;
    transition:transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}
.jb4wood-cta-card:hover{
    transform:translateY(-3px);
    background:rgba(251, 249, 245, 0.14);
    -webkit-backdrop-filter: var(--jb-blur-4);
    backdrop-filter: var(--jb-blur-4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.30),
        0 6px 22px rgba(20, 84, 74, 0.10),
        0 12px 30px rgba(73, 56, 40, 0.10);
}


/* Badge "PREMIER RDV GRATUIT" à cheval haut */
.jb-cta-badge{
    position:absolute;
    top:-26px;
    left:50%;
    transform:translateX(-50%);
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(135deg, #B89571 0%, #7C6145 50%, #8E7250 100%);
    color:#fff;
    font-family:'Signika','Arial Black',Impact,sans-serif;
    font-size:0.76rem;
    letter-spacing:0.07em;
    text-transform:uppercase;
    line-height:1.2;
    text-align:center;
    padding:9px 24px;
    border-radius:18px;
    box-shadow:
        0 4px 12px rgba(124,97,69,0.45),
        inset 0 1px 0 rgba(255,255,255,0.35);
    z-index:5;
}
.jb-cta-badge svg{
    width:18px;
    height:18px;
    flex-shrink:0;
    fill:var(--jb-yellow);
    position:relative;
    z-index:2;
    transform-origin:center;
    animation:jb-cta-star-twinkle 1.5s ease-in-out infinite;
    will-change:transform, filter;
}
@keyframes jb-cta-star-twinkle{
    0%, 100% { transform:scale(1);    filter:drop-shadow(0 0 0 rgba(245,180,0,0)); }
    50%      { transform:scale(1.32); filter:drop-shadow(0 0 5px rgba(245,180,0,0.85)); }
}
.jb-cta-badge-text{
    display:inline-block;
    position:relative;
    z-index:2;
    white-space:nowrap;
}

/* Titre + sous-titre */
.jb4wood-cta-card h2{
    font-family:'Signika','Arial Black',Impact,sans-serif;
    color:var(--jb-vert);
    font-size:1.65rem;
    line-height:1.2;
    margin:0 0 16px;
    letter-spacing:-0.005em;
}
/* Trois promesses sur 2 lignes centrées avec séparateur or-bois */
.cta-promesses{
    margin:0 auto 28px;
    color:var(--marron-fonce);
    font-size:1.02rem;
    line-height:1.6;
    text-align:center;
}
.cta-promesses .sep{
    color:var(--jb-or);
    font-weight:700;
    margin:0 6px;
}

/* Bouton primary or-bois avec shining boucle */
.jb-cta-btn-wrap{
    display:flex;
    justify-content:center;
    margin:0 0 18px;
    position:relative;
    z-index:2;
}
.jb-cta-btn{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:15px 32px;
    background:rgba(232, 228, 224, 0.12);
    -webkit-backdrop-filter: var(--jb-blur-1-5);
    backdrop-filter: var(--jb-blur-1-5);
    color:var(--marron-fonce);
    font-family:'Signika','Arial Black',Impact,sans-serif;
    font-size:1.05rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    text-decoration:none;
    border:2px solid transparent;
    background-clip:padding-box;
    border-radius:8px;
    box-shadow:none;
    transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.jb-cta-btn,
.jb-cta-btn:hover,
.jb-cta-btn:focus,
.jb-cta-btn:focus-visible,
.jb-cta-btn:active{
    color:var(--marron-fonce) !important;
}
/* Bordure conic-gradient avec sweep doré qui orbite autour (calque sur CTA secondary hero) */
@property --jb-cta-orbit{
    syntax:'<angle>';
    initial-value:0deg;
    inherits:false;
}
.jb-cta-btn::before{
    content:'';
    position:absolute;
    inset:0;
    padding:2px;
    border-radius:8px;
    background:conic-gradient(
        from var(--jb-cta-orbit, 0deg),
        #493828 0deg,
        #493828 270deg,
        #7C6145 305deg,
        #fff7e0 340deg,
        #7C6145 350deg,
        #493828 360deg
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite:exclude;
    pointer-events:none;
    z-index:1;
    animation:jb-cta-btn-orbit 4s linear infinite;
}
@keyframes jb-cta-btn-orbit{
    to { --jb-cta-orbit:360deg; }
}
.jb-cta-btn:hover{
    background:rgba(73, 56, 40, 0.10);
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(73, 56, 40, 0.20);
}

/* Lien tel discret avec underline animé */
.jb4wood-cta-card a,
.jb4wood-cta-card a:hover,
.jb4wood-cta-card a:focus,
.jb4wood-cta-card a *{
    text-decoration:none !important;
    border-bottom:none !important;
}
.jb-cta-tel{
    display:inline-block;
    color:var(--jb-vert);
    font-size:1.10rem;
    position:relative;
    padding-bottom:2px;
    font-family:var(--jb-serif);
}
.jb-cta-tel-label{
    color:#6b6058;
    font-style:italic;
    font-weight:700;
}
.jb-cta-tel-num{
    color:var(--jb-vert);
    font-weight:700;
    font-style:italic;
}

/* JB: police footer — CTA tel + meta blog (validé 2026-05-18) */
.entry-meta,
.entry-meta a,
.entry-meta .posted-by,
.entry-meta .posted-on,
.entry-meta .author-name,
.entry-meta .published{
    font-family:var(--jb-serif) !important;
}


/* Sceau bois rond bottom-right */
.jb-cta-sceau{
    position:absolute;
    bottom:-58px;
    right:-50px;
    width:140px;
    height:140px;
    border-radius:50%;
    overflow:hidden;
    box-sizing:border-box;
    border:3px solid var(--jb-or);
    box-shadow:
        0 8px 22px rgba(73, 56, 40, 0.30),
        0 2px 6px rgba(0, 0, 0, 0.18);
    z-index:3;
    background:#3a2e1f;
    opacity:0;
    transform:scale(0.78);
    transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.jb-cta-sceau.jb-sceau-visible{
    opacity:1;
    transform:scale(1);
}
.jb-cta-sceau-spinner{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:rotate(-8deg);
    transition:transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change:transform;
}
.jb-cta-sceau-spinner img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
/* Effet tampon au survol : lift + tilt arrière → slam + écrase → bounce → settle droit */
@keyframes jb-cta-sceau-stamp{
    0%   { transform:rotate(-8deg) scale(1); }
    20%  { transform:rotate(-14deg) scale(1.18); }
    45%  { transform:rotate(2deg)   scale(0.84); }
    65%  { transform:rotate(-2deg)  scale(1.06); }
    85%  { transform:rotate(1deg)   scale(0.98); }
    100% { transform:rotate(0deg)   scale(1); }
}
.jb4wood-cta-card:hover .jb-cta-sceau-spinner{
    animation:jb-cta-sceau-stamp 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.jb4wood-cta-card:hover .jb-cta-sceau{
    transform:scale(1.06);
}

@media (prefers-reduced-motion: reduce){
    .jb-cta-badge svg{ animation:none; }
    .jb-cta-btn::before{ animation:none; }
    .jb-cta-sceau{
        opacity:1;
        transform:none;
    }
    .jb-cta-sceau-spinner{ animation:none; }
    .jb4wood-cta-card:hover .jb-cta-sceau{ transform:none; }
    .jb4wood-cta-card:hover .jb-cta-sceau-spinner{ animation:none; }
}

/* Mobile : marge de respiration sur les bords de l'écran + sceau ne touche pas le bord */
@media (max-width:768px){
    body.jb4wood-sb .entry-content > .jb4wood-cta-final-section,
    .entry-content > .jb4wood-cta-final-section,
    .jb4wood-cta-final-section{
        width:min(86vw, 380px) !important;
        max-width:380px !important;
        margin-top:16px !important;
        margin-bottom:6px !important;
        padding:14px 0 4px !important;
    }
    .jb4wood-cta-card{ padding:50px 22px 52px; }
    .jb-cta-badge{
        font-size:0.62rem;
        padding:7px 16px;
        gap:6px;
        letter-spacing:0.05em;
    }
    .jb-cta-badge svg{ width:13px; height:13px; }
    .jb-cta-sceau{
        width:96px;
        height:96px;
        bottom:-32px;
        right:-26px;
    }
}

    .jb-lightbox-image-wrap { max-width: 100%; height: 50vh; }
    .jb-lightbox-meta { flex: 1 1 auto; max-height: 35vh; padding: 0 0.5rem; }
    .jb-lightbox-nav { width: 44px; height: 44px; }
}

/* ======================================================================
 * 16. RADIOS STYLE CARDS — charte JB4WOOD (override bleu Fluent Forms)
 * ====================================================================*/
/* Cibler les radios (type_projet, style, echeance) — utilise .ff-el-form-check qui contient un label */
.fluentform .ff-el-group.ff_list_buttons .ff-el-input--content,
.fluentform .ff-el-group:has(input[type="radio"][name="type_projet"]) .ff-el-input--content,
.fluentform .ff-el-group:has(input[type="radio"][name="style"]) .ff-el-input--content,
.fluentform .ff-el-group:has(input[type="radio"][name="echeance"]) .ff-el-input--content {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px !important;
}
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check,
.fluentform .ff-el-group:has(input[type="radio"][name="type_projet"]) .ff-el-form-check,
.fluentform .ff-el-group:has(input[type="radio"][name="style"]) .ff-el-form-check {
    margin: 0 !important;
    flex: 0 0 auto;
}
/* Cache l'input natif radio */
.fluentform .ff-el-group.ff_list_buttons input[type="radio"],
.fluentform .ff-el-group:has(input[type="radio"][name="type_projet"]) input[type="radio"],
.fluentform .ff-el-group:has(input[type="radio"][name="style"]) input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0; height: 0;
}
/* FIX BUG QUIZZ (04/2026) — Force cache TOTAL des inputs radio sur questionnaire devis
   (Safari rendait l'input bleu natif par-dessus le label vert au clic). On exclut explicitement
   la checkbox RGPD (name="rgpd_consent") qui doit rester visible & utilisable. */
.fluentform .ff-el-form-check input[type="radio"]:not([name="rgpd_consent"]),
.fluentform .ff-el-form-check input[type="checkbox"]:not([name="rgpd_consent"]):not(.jb-keep-native) {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    z-index: -1 !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
}
/* Style le label en card */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check-label,
.fluentform .ff-el-group:has(input[type="radio"][name="type_projet"]) .ff-el-form-check-label,
.fluentform .ff-el-group:has(input[type="radio"][name="style"]) .ff-el-form-check-label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 0.85rem 1.4rem !important;
    border: 2px solid var(--jb-or) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.6) !important;
    cursor: pointer !important;
    transition: all 0.3s var(--jb-easing);
    box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.08), 1px 2px 4px rgba(0, 0, 0, 0.05);
    font-family: var(--jb-body) !important;
    font-weight: 500;
    color: var(--jb-text) !important;
    position: relative;
    overflow: hidden;
    user-select: none;
}
/* Glossy sweep décoratif sur les cards */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check-label::before,
.fluentform .ff-el-group:has(input[type="radio"][name="type_projet"]) .ff-el-form-check-label::before,
.fluentform .ff-el-group:has(input[type="radio"][name="style"]) .ff-el-form-check-label::before {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
    transition: left 0.7s var(--jb-easing);
    pointer-events: none;
}
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check-label:hover,
.fluentform .ff-el-group:has(input[type="radio"][name="type_projet"]) .ff-el-form-check-label:hover,
.fluentform .ff-el-group:has(input[type="radio"][name="style"]) .ff-el-form-check-label:hover {
    border-color: var(--jb-or-clair) !important;
    transform: translateY(-2px) scale(1.01);
    box-shadow: 6px 10px 18px rgba(0, 0, 0, 0.12), 0 0 16px rgba(124, 97, 69, 0.18);
}
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check-label:hover::before,
.fluentform .ff-el-group:has(input[type="radio"][name="type_projet"]) .ff-el-form-check-label:hover::before,
.fluentform .ff-el-group:has(input[type="radio"][name="style"]) .ff-el-form-check-label:hover::before {
    left: 130%;
}
/* État checked : la classe .ff-jb-checked est ajoutée par notre JS sur le label */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check-label.ff-jb-checked,
.fluentform .ff-el-group:has(input[type="radio"][name="type_projet"]) .ff-el-form-check-label.ff-jb-checked,
.fluentform .ff-el-group:has(input[type="radio"][name="style"]) .ff-el-form-check-label.ff-jb-checked {
    background: var(--jb-vert) !important;
    color: #fff !important;
    border-color: var(--jb-vert) !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 6px 10px 22px rgba(20, 84, 74, 0.30), 0 0 20px rgba(124, 97, 69, 0.40);
}
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check-label.ff-jb-checked span,
.fluentform .ff-el-group:has(input[type="radio"][name="type_projet"]) .ff-el-form-check-label.ff-jb-checked span,
.fluentform .ff-el-group:has(input[type="radio"][name="style"]) .ff-el-form-check-label.ff-jb-checked span {
    color: #fff !important;
}
/* Active (touch tap) */
.fluentform .ff-el-form-check-label:active {
    transform: translateY(-1px) scale(1.005);
}

/* ======================================================================
 * 17. TIMELINE ÉCHÉANCE — chronologique horizontale (custom)
 * ====================================================================*/
/* FIX BUG QUIZZ (04/2026) — refonte propre : flex space-between + ::before track + labels absolu sous chaque rond */
.jb-timeline-echeance {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 700px;
    margin: 2rem auto 4rem;
    padding: 24px 16px 56px;
    box-sizing: border-box;
}
.jb-timeline-echeance::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 24px;
    right: 24px;
    height: 4px;
    background: linear-gradient(90deg, var(--jb-or) 0%, var(--jb-vert) 100%);
    border-radius: 2px;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}
.jb-timeline-echeance .jb-tl-track,
.jb-timeline-echeance .jb-tl-points {
    /* Anciens wrappers neutralisés : on positionne directement les .jb-tl-point */
    display: contents;
}
.jb-timeline-echeance .jb-tl-point {
    position: relative;
    z-index: 1;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--jb-or);
    cursor: pointer;
    transition: all 0.3s var(--jb-easing);
    flex: 0 0 auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.jb-timeline-echeance .jb-tl-point:hover {
    transform: scale(1.25);
    box-shadow: 0 0 16px rgba(124, 97, 69, 0.55);
}
.jb-timeline-echeance .jb-tl-point.is-active {
    background: var(--jb-vert);
    border-color: var(--jb-vert);
    transform: scale(1.4);
    box-shadow: 0 0 22px rgba(20, 84, 74, 0.65), 0 0 36px rgba(124, 97, 69, 0.4);
}
.jb-timeline-echeance .jb-tl-point .jb-tl-label {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--jb-text);
    font-family: var(--jb-body);
    font-weight: 500;
    text-align: center;
    transition: color 0.3s var(--jb-easing), font-weight 0.3s var(--jb-easing);
    pointer-events: none;
}
.jb-timeline-echeance .jb-tl-point.is-active .jb-tl-label {
    color: var(--jb-vert);
    font-weight: 700;
}
@media (max-width: 600px) {
    .jb-timeline-echeance { padding: 24px 12px 80px; }
    .jb-timeline-echeance::before { left: 20px; right: 20px; }
    .jb-timeline-echeance .jb-tl-point .jb-tl-label {
        font-size: 0.72rem;
        top: calc(100% + 10px);
        /* Rotation -45° pour éviter chevauchement sur petits écrans */
        transform: translateX(-50%) rotate(-45deg);
        transform-origin: top left;
        text-align: left;
    }
}

/* ======================================================================
 * 18. SLIDER BUDGET — range visuel
 * ====================================================================*/
.jb-budget-slider {
    padding: 2rem 1rem 1.5rem;
    margin: 1rem 0;
}
.jb-budget-slider .jb-bs-tooltip {
    display: block;
    text-align: center;
    font-family: var(--jb-eras), Georgia, serif;
    color: var(--jb-vert);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: color 0.3s var(--jb-easing);
}
.jb-budget-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--jb-or) 0%, var(--jb-vert) 100%);
    outline: none;
    margin: 0.5rem 0;
}
.jb-budget-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--jb-vert);
    cursor: grab;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25), 0 0 16px rgba(124, 97, 69, 0.35);
    transition: transform 0.2s var(--jb-easing), box-shadow 0.2s var(--jb-easing);
}
.jb-budget-slider input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.30), 0 0 22px rgba(124, 97, 69, 0.55);
}
.jb-budget-slider input[type="range"]::-moz-range-thumb {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--jb-vert);
    cursor: grab;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25), 0 0 16px rgba(124, 97, 69, 0.35);
}
.jb-budget-slider .jb-bs-ticks {
    display: flex;
    justify-content: space-between;
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: var(--jb-text);
    opacity: 0.7;
    font-family: var(--jb-body);
}
.jb-budget-slider .jb-bs-ticks span { flex: 1 1 0; text-align: center; }
.jb-budget-slider .jb-bs-ticks span:first-child { text-align: left; }
.jb-budget-slider .jb-bs-ticks span:last-child { text-align: right; }
/* Cache le select natif quand la version visuelle est rendue */
.fluentform .ff-el-group.jb-budget-replaced > .ff-el-input--content > select { display: none !important; }
.fluentform .ff-el-group.jb-echeance-replaced > .ff-el-input--content > .ff-el-form-check { display: none !important; }

/* ======================================================================
 * 19. ARTICLE PRESSE — mise en page enrichie
 * ====================================================================*/
.jb4wood-article-presse {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.5rem 1.2rem;
    font-family: var(--jb-body);
    color: var(--jb-text);
    line-height: 1.7;
}
.jb4wood-article-presse .jb-presse-intro {
    font-size: 1.15rem;
    color: var(--jb-vert);
    font-style: italic;
    border-left: 4px solid var(--jb-or);
    padding-left: 1rem;
    margin: 1.4rem 0 2rem;
}
.jb4wood-article-presse blockquote.jb-presse-quote {
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-left: 5px solid var(--jb-vert);
    padding: 1.2rem 1.5rem;
    margin: 1.8rem 0;
    border-radius: 0 8px 8px 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--jb-text);
    box-shadow: 4px 6px 14px rgba(0, 0, 0, 0.08);
    position: relative;
}
.jb4wood-article-presse blockquote.jb-presse-quote::before {
    content: '\201C';
    position: absolute;
    top: -10px; left: 12px;
    font-size: 4rem;
    color: var(--jb-or);
    font-family: Georgia, serif;
    line-height: 1;
}
.jb4wood-article-presse blockquote.jb-presse-quote cite {
    display: block;
    margin-top: 0.5rem;
    color: var(--jb-or);
    font-size: 0.9rem;
    font-style: normal;
}
.jb4wood-article-presse .jb-presse-cta {
    display: inline-block;
    margin: 1.5rem 0;
    padding: 0.85rem 1.6rem;
    background: var(--jb-vert);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    box-shadow: var(--jb-shadow-tordu);
    transform: skewY(-1deg);
    transition: all 0.3s var(--jb-easing);
}
.jb4wood-article-presse .jb-presse-cta:hover {
    background: var(--jb-or);
    transform: skewY(-1deg) translateY(-2px);
    box-shadow: 6px 12px 22px rgba(0, 0, 0, 0.25), 0 0 24px rgba(124, 97, 69, 0.4);
}
.jb4wood-article-presse .jb-presse-tags {
    margin-top: 2.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(73, 56, 40, 0.18);
    font-size: 0.85rem;
    color: var(--jb-or);
    font-style: italic;
}
.jb4wood-article-presse .jb-presse-tags strong {
    color: var(--jb-vert);
    font-style: normal;
    margin-right: 0.5rem;
}

/* ====================================================================
 * MODIF #10 (04/2026) — Doublons H1 éditoriaux : masquer .entry-title
 * Astra sur Home (4), Blog (106), À propos (14)
 * ==================================================================*/
.page-id-4 .entry-header { display: none !important; }
.page-id-4 .entry-title,
.page-id-106 .entry-title,
.page-id-14 .entry-title,
.page-id-5 .entry-title,
.page-id-15 .entry-title,
.page-id-16 .entry-title,
.page-id-10 .entry-title,
.page-id-11 .entry-title,
.page-id-6 .entry-title,
.page-id-7 .entry-title,
.page-id-8 .entry-title,
.page-id-614 .entry-title,
.page-id-593 .entry-title,
.page-id-341 .entry-title,
.page-id-342 .entry-title,
.page-id-343 .entry-title,
.page-id-344 .entry-title,
.page-id-284 .entry-title,
.page-id-242 .entry-title,
.page-id-19 .entry-title,
.page-id-18 .entry-title,
.page-id-17 .entry-title,
.page-id-13 .entry-title,
.page-id-9 .entry-title,
.page-id-2101 .entry-title { display: none !important; }

/* ====================================================================
 * MODIF #5 (04/2026) — Carte interactive page Réalisations
 * Pins logos pros + pin neutre vert pour zones particuliers + filtre galerie
 * ==================================================================*/
.jb4wood-realisations-map {
    width: 100%;
    height: 480px;
    margin: 1.5rem 0 2rem;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(20, 84, 74, 0.12);
    overflow: hidden;
}
@media (max-width: 768px) {
    .jb4wood-realisations-map { height: 360px; }
}
/* Pin neutre particulier (cercle vert) */
.jb-zone-pin {
    width: 28px; height: 28px;
    background: var(--jb-vert);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(20, 84, 74, 0.45);
    cursor: pointer;
    transition: transform 0.25s var(--jb-easing);
}
.jb-zone-pin:hover { transform: scale(1.15); }
/* Pin pro avec logo (carré arrondi 40×40) */
.jb-pro-pin {
    width: 44px; height: 44px;
    background: #fff;
    border: 2px solid var(--jb-or);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    overflow: hidden;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.25s var(--jb-easing);
}
.jb-pro-pin:hover { transform: scale(1.18); }
.jb-pro-pin img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 2px;
}
/* Badge filtre actif */
.jb-galerie-filter-active {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 1rem 0;
    padding: 0.6rem 1rem;
    background: rgba(20, 84, 74, 0.12);
    border: 1px solid rgba(20, 84, 74, 0.25);
    border-radius: 30px;
    font-size: 0.9rem;
    color: var(--jb-vert);
    width: fit-content;
}
.jb-galerie-filter-active button {
    background: var(--jb-vert);
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 22px; height: 22px;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0;
}

/* ====================================================================
 * MODIF #6 (04/2026) — Effet noir & blanc → couleur au scroll galerie
 * Pages /realisations/ (11) et /clients-pro/ (10) uniquement.
 * ==================================================================*/
body.page-id-11 .jb4wood-galerie-thumb,
body.page-id-10 .jb4wood-pro-section img {
    filter: grayscale(1) blur(2px);
    transition: filter 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}
body.page-id-11 .jb4wood-galerie-thumb.jb-color-on,
body.page-id-10 .jb4wood-pro-section img.jb-color-on {
    filter: grayscale(0) blur(0);
}
/* Mobile : N&B->couleur SANS blur ET SANS transition (flash-proof : ces images
   ne sont pas windowed mais on supprime tout risque ; rendu instantane au
   passage .jb-color-on, conforme regle iOS no-blur/no-anim galerie). */
@media (max-width: 768px) {
    body.page-id-11 .jb4wood-galerie-thumb,
    body.page-id-10 .jb4wood-pro-section img { filter: grayscale(1) !important; transition: none !important; }
    body.page-id-11 .jb4wood-galerie-thumb.jb-color-on,
    body.page-id-10 .jb4wood-pro-section img.jb-color-on { filter: grayscale(0) !important; transition: none !important; }
}

/* ====================================================================
 * MODIF #8/#9 (04/2026) — Page Clients pro : hero vidéo + structure pro
 * ==================================================================*/
.jb4wood-hero-pro-wrapper {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    line-height: 0;
    background: #000;
    aspect-ratio: 16 / 7;
    max-height: 70vh;
    margin-bottom: 2rem;
}
.jb4wood-hero-pro-wrapper video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.jb4wood-hero-pro-overlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0,0,0,0.6);
    width: 90%;
    max-width: 800px;
}
.jb4wood-hero-pro-overlay h1 {
    font-family: var(--jb-eras);
    color: #fff !important;
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}
.jb4wood-hero-pro-overlay p {
    font-family: var(--jb-body);
    font-style: italic;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    margin: 0;
    opacity: 0.95;
}
/* Section pro restructurée : vidéo + texte côte à côte, devanture grid 3 photos */
.jb4wood-pro-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    padding: 2.5rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}
.jb4wood-pro-section.reverse > .pro-text { order: 2; }
.jb4wood-pro-section h2 {
    font-family: var(--jb-eras);
    color: var(--marron-fonce);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.jb4wood-pro-section .pro-video video,
.jb4wood-pro-section .pro-video img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(20, 84, 74, 0.14);
}
.jb4wood-pro-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 1200px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}
.jb4wood-pro-photos-grid img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: var(--jb-shadow-light);
}
@media (max-width: 800px) {
    .jb4wood-pro-section { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.5rem 1rem; }
    .jb4wood-pro-section.reverse > .pro-text { order: 0; }
    .jb4wood-pro-photos-grid { grid-template-columns: 1fr; }
}
/* Section devantures de commerce */
.jb4wood-devantures-section {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 2rem 1rem;
    text-align: center;
}
.jb4wood-devantures-section h2 {
    font-family: var(--jb-eras);
    color: var(--marron-fonce);
    text-transform: uppercase;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin: 0 0 1.5rem;
}
.jb4wood-devantures-section ul.jb-puces-vert {
    list-style: none;
    padding: 0;
    margin: 1rem auto 1.5rem;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: center;
    max-width: 800px;
}
.jb4wood-devantures-section ul.jb-puces-vert li {
    color: var(--jb-vert);
    font-weight: 600;
    position: relative;
    padding-left: 1.2rem;
}
.jb4wood-devantures-section ul.jb-puces-vert li::before {
    content: '✦';
    position: absolute; left: 0;
    color: var(--jb-or);
}
.jb4wood-devantures-section .jb-conclusion {
    font-family: var(--jb-serif); /* serif standard = PT Serif self-hostee (ex-Constantia non self-hostee, 2026-05-23) */
    font-style: italic;
    color: var(--gris-fonce);
    font-size: 1.05rem;
    max-width: 760px;
    margin: 1rem auto 0;
}

/* ====================================================================
 * MODIF #7 (04/2026) — GIF bijouterie lazy : placeholder + swap visible
 * ==================================================================*/
.jb-gif-lazy {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--jb-beton);
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.jb-gif-lazy img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* ====================================================================
 * MODIF #10 (04/2026) — RETRAIT OVERLAY hero pro (vidéo nue, comme home)
 * Demande client : "RETIRER complètement cet overlay" (le titre Cadran
 * solaire + Filmé par QuiPlusEst).
 * ==================================================================*/
body.page-id-10 .jb4wood-hero-pro-overlay {
    display: none !important;
}
/* Hero pro vidéo : aligner sur le rendu home (largeur full) */
body.page-id-10 .jb4wood-hero-pro-wrapper {
    aspect-ratio: auto;
    max-height: none;
    background: var(--jb-beton);
}
body.page-id-10 .jb4wood-hero-pro-wrapper video {
    height: auto;
    aspect-ratio: 16 / 9;
}

/* ====================================================================
 * MODIF #11 (04/2026) — DIVIDER DELUXE (avant/après bandeau presse)
 * ==================================================================*/
.jb4wood-divider-deluxe {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 60%;
    margin: 60px auto;
    padding: 0 20px;
}
.jb4wood-divider-deluxe .line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--jb-or), var(--jb-vert), var(--jb-or), transparent);
    border-radius: 2px;
}
.jb4wood-divider-deluxe .ornament {
    color: var(--jb-or);
    font-size: 1.6rem;
    line-height: 1;
    text-shadow: 0 2px 6px rgba(124,97,69,0.25);
}
@media (max-width: 768px) {
    .jb4wood-divider-deluxe { max-width: 90%; margin: 36px auto; gap: 14px; }
    .jb4wood-divider-deluxe .ornament { font-size: 1.2rem; }
}

/* ====================================================================
 * MODIF #12 (04/2026) — OMBRES "WAW" sur cards (réalisations / pros / avis / prestations)
 * ==================================================================*/
.jb4wood-presta-card,
.jb4wood-avis-card,
.jb4wood-galerie-item,
.jb-card,
.jb-blog-card {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 10px 25px rgba(20,84,74,0.10),
        0 24px 60px rgba(73,56,40,0.08),
        -8px 8px 30px rgba(124,97,69,0.12) !important;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.jb4wood-presta-card:hover,
.jb4wood-avis-card:hover,
.jb4wood-galerie-item:hover,
.jb-blog-card:hover {
    transform: translateY(-6px) rotate(-0.5deg);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 14px 35px rgba(20,84,74,0.16),
        0 30px 80px rgba(73,56,40,0.14),
        -10px 12px 40px rgba(124,97,69,0.20) !important;
}

/* ====================================================================
 * MODIF #13 (04/2026) — OMBRES STYLÉES sur vidéos hero pro (clients-pro)
 * ==================================================================*/
.jb4wood-hero-pro-wrapper video,
.jb4wood-pro-section .pro-video video,
.jb4wood-pro-section .pro-video img {
    box-shadow:
        0 0 0 1px rgba(20,84,74,0.06),
        0 12px 40px rgba(0,0,0,0.22),
        0 40px 100px rgba(20,84,74,0.18),
        -16px 16px 60px rgba(124,97,69,0.15) !important;
    border-radius: 6px !important;
}

/* ====================================================================
 * MODIF #14 (04/2026) — GLOSSY SHIMMER (renforcement : carry sweep en CSS pur)
 * ==================================================================*/
@keyframes jb-shimmer-sweep {
    0%   { left: -120%; }
    60%  { left: -120%; }
    100% { left: 130%; }
}
.jb4wood-presta-card:hover::before,
.jb-card:hover::before,
.jb-blog-card:hover::before,
.jb-ar-card:hover::before {
    animation: jb-shimmer-sweep 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ====================================================================
 * MODIF #15 (04/2026) — PAGE BLOG : cards horizontales + glassmorphism
 * Le bloc latest-posts WP rend <ul.wp-block-latest-posts__list>
 * ==================================================================*/
body.page-id-106 .wp-block-latest-posts.is-grid,
body.page-id-106 ul.wp-block-latest-posts__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 2rem auto !important;
    max-width: 1100px;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 3rem !important;
}
body.page-id-106 ul.wp-block-latest-posts__list > li {
    background: rgba(255,255,255,0.55);
    -webkit-backdrop-filter: var(--jb-blur-20);
    backdrop-filter: var(--jb-blur-20);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 14px;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 40%) 1fr;
    gap: 1.5rem;
    align-items: center;
    margin: 0 !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 10px 25px rgba(20,84,74,0.10),
        0 24px 60px rgba(73,56,40,0.08),
        -8px 8px 30px rgba(124,97,69,0.12);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.5s var(--jb-easing);
    position: relative;
    overflow: hidden;
}
body.page-id-106 ul.wp-block-latest-posts__list > li:hover {
    transform: translateY(-6px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.7) inset,
        0 14px 35px rgba(20,84,74,0.18),
        0 30px 80px rgba(73,56,40,0.14),
        -10px 12px 40px rgba(124,97,69,0.20);
}
body.page-id-106 ul.wp-block-latest-posts__list > li .wp-block-latest-posts__featured-image {
    margin: 0 !important;
    border-radius: 10px;
    overflow: hidden;
}
body.page-id-106 ul.wp-block-latest-posts__list > li .wp-block-latest-posts__featured-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}
body.page-id-106 ul.wp-block-latest-posts__list > li .wp-block-latest-posts__post-title {
    font-family: var(--jb-eras);
    color: var(--jb-vert);
    font-size: 1.35rem;
    margin: 0 0 0.5rem;
    text-decoration: none !important;
    display: block;
}
body.page-id-106 ul.wp-block-latest-posts__list > li .wp-block-latest-posts__post-date {
    color: var(--gris-fonce);
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 0.5rem;
    display: block;
}
body.page-id-106 ul.wp-block-latest-posts__list > li .wp-block-latest-posts__post-excerpt {
    color: var(--jb-text);
    font-family: var(--jb-serif); /* serif standard = PT Serif self-hostee (ex-Constantia non self-hostee, 2026-05-23) */
    line-height: 1.6;
    margin: 0.5rem 0 0;
}
@media (max-width: 768px) {
    body.page-id-106 ul.wp-block-latest-posts__list > li {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.2rem;
    }
}

/* ====================================================================
 * MODIF #19 v3 (Lot 5 corrigé v3, 04/2026) — HEADER MOBILE
 *  - Aucun bandeau visible : tout transparent, pas de glass, pas de blanc.
 *    Le logo flotte directement sur la texture béton.
 *  - Header forcé en static (override Astra sticky même quand .ast-header-sticked).
 *  - SEUL le burger reste fixed (pastille glass en haut-droite) qui suit le scroll.
 * ==================================================================*/
@media (max-width: 1024px) {
    /* Override TOUS les sélecteurs Astra sticky (gratuit + Pro + customizer) */
    #masthead,
    .ast-mobile-header-wrap,
    .ast-primary-header-bar,
    .main-header-bar,
    .main-header-bar-wrap,
    .ast-main-header-wrap,
    .ast-builder-grid-row,
    .ast-builder-grid-row-container-inner,
    .site-primary-header-wrap,
    .ast-mobile-header-content,
    .ast-builder-layout-element,
    .ast-site-identity,
    .site-branding,
    body:not(.home) #masthead,
    body.home #masthead,
    body.ast-header-sticked #masthead,
    body.ast-header-sticked .ast-mobile-header-wrap,
    .ast-header-sticked #masthead,
    .ast-header-sticked .ast-mobile-header-wrap,
    #masthead.ast-header-sticked,
    #ast-mobile-header.ast-header-sticked {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 6px 4px !important;     /* logo plus près du bord gauche */
        box-sizing: border-box !important;
        background: transparent !important;
        background-color: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }
    body { padding-top: 0 !important; }

    /* ============================================================
       BURGER CUSTOM (refonte complète Lot 5 v8) — 3 barres CSS pures
       qui se transforment en X lors de l'ouverture du drawer.
       On masque les 2 SVG natifs Astra et on dessine 3 barres via :
       ::before (haut) + .mobile-menu-toggle-icon (milieu) + ::after (bas).
       ============================================================ */
    .ast-mobile-header-wrap .menu-toggle,
    .ast-mobile-header-wrap .ast-mobile-menu-buttons,
    .ast-mobile-header-wrap .main-header-menu-toggle {
        position: fixed !important;
        top: 24px !important;
        right: 24px !important;
        z-index: 9999 !important;
        width: 76px !important;
        height: 76px !important;
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-radius: 0 !important;
        border: none !important;
        display: block !important;
        box-shadow: none !important;
        cursor: pointer;
        padding: 0 !important;
        font-size: 0 !important;             /* masque tout texte (screen-reader) */
        transition: opacity 200ms var(--jb-easing);
    }
    /* Pas de réduction d'opacity sur tap/focus mobile — sinon les barres
       paraissent ternes pendant l'animation et il faut scroller pour que
       le focus se relâche et que la couleur redevienne vive. */
    .ast-mobile-header-wrap .menu-toggle:hover,
    .ast-mobile-header-wrap .menu-toggle:focus,
    .ast-mobile-header-wrap .menu-toggle:focus-visible,
    .ast-mobile-header-wrap .menu-toggle:active {
        background: transparent !important;
        opacity: 1 !important;
        outline: none !important;
    }

    /* MASQUE tout le contenu natif Astra du bouton (SVG + screen-reader-text) */
    .ast-mobile-header-wrap .menu-toggle > *,
    .ast-mobile-header-wrap .menu-toggle .ahfb-svg-iconset,
    .ast-mobile-header-wrap .menu-toggle .ast-mobile-svg,
    .ast-mobile-header-wrap .menu-toggle svg,
    .ast-mobile-header-wrap .menu-toggle .screen-reader-text {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }
    /* Mais on RÉACTIVE .mobile-menu-toggle-icon car il devient la barre du milieu */
    .ast-mobile-header-wrap .menu-toggle .mobile-menu-toggle-icon {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 36px !important;
        height: 4px !important;
        margin: 0 !important;
        background: var(--jb-vert) !important;
        border-radius: 2px !important;
        transform: translate(-50%, -50%) !important;
        transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
        font-size: 0 !important;
    }
    /* Et tout enfant de .mobile-menu-toggle-icon (les SVG d'Astra) doit rester caché */
    .ast-mobile-header-wrap .menu-toggle .mobile-menu-toggle-icon * {
        display: none !important;
    }

    /* 3 barres custom : ::before = haut, .mobile-menu-toggle-icon = milieu, ::after = bas
       FIX v8.1 : ajout display:block pour que width/height des pseudo-elements soient pris en compte */
    .ast-mobile-header-wrap .menu-toggle::before,
    .ast-mobile-header-wrap .menu-toggle::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 36px !important;
        height: 4px !important;
        background: var(--jb-vert) !important;
        border-radius: 2px !important;
        transform-origin: center center !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
                    opacity 0.25s ease,
                    background 0.3s ease;
    }
    .ast-mobile-header-wrap .menu-toggle::before {
        transform: translate(-50%, calc(-50% - 12px)) !important;
    }
    .ast-mobile-header-wrap .menu-toggle::after {
        transform: translate(-50%, calc(-50% + 12px)) !important;
    }

    /* DRAWER OUVERT : transformation en croix X — couvre les 3 classes Astra possibles
       (ast-mobile-popup-opened, ast-popup-nav-open, main-header-nav-open) */
    body.ast-mobile-popup-opened .ast-mobile-header-wrap .menu-toggle::before,
    body.ast-popup-nav-open .ast-mobile-header-wrap .menu-toggle::before,
    body.ast-main-header-nav-open .ast-mobile-header-wrap .menu-toggle::before,
    .ast-mobile-popup-opened .menu-toggle::before,
    .ast-popup-nav-open .menu-toggle::before,
    .menu-toggle[aria-expanded="true"]::before {
        transform: translate(-50%, -50%) rotate(45deg) !important;
    }
    body.ast-mobile-popup-opened .ast-mobile-header-wrap .menu-toggle::after,
    body.ast-popup-nav-open .ast-mobile-header-wrap .menu-toggle::after,
    body.ast-main-header-nav-open .ast-mobile-header-wrap .menu-toggle::after,
    .ast-mobile-popup-opened .menu-toggle::after,
    .ast-popup-nav-open .menu-toggle::after,
    .menu-toggle[aria-expanded="true"]::after {
        transform: translate(-50%, -50%) rotate(-45deg) !important;
    }
    body.ast-mobile-popup-opened .ast-mobile-header-wrap .menu-toggle .mobile-menu-toggle-icon,
    body.ast-popup-nav-open .ast-mobile-header-wrap .menu-toggle .mobile-menu-toggle-icon,
    body.ast-main-header-nav-open .ast-mobile-header-wrap .menu-toggle .mobile-menu-toggle-icon,
    .ast-mobile-popup-opened .menu-toggle .mobile-menu-toggle-icon,
    .ast-popup-nav-open .menu-toggle .mobile-menu-toggle-icon,
    .menu-toggle[aria-expanded="true"] .mobile-menu-toggle-icon {
        opacity: 0 !important;
        transform: translate(-50%, -50%) scale(0) !important;
    }

    /* Logo aligné GAUCHE dans le header (override Astra centrage natif) */
    .ast-mobile-header-wrap .ast-site-identity,
    .ast-mobile-header-wrap .site-branding,
    .ast-mobile-header-wrap .ast-site-title-wrap,
    .ast-mobile-header-wrap .site-header-primary-section-left,
    .ast-mobile-header-wrap .ast-builder-grid-row,
    .ast-mobile-header-wrap .ast-builder-layout-element {
        flex: 1 1 auto;
        text-align: left !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    /* Padding global du header mobile : logo collé plus près du bord (sans toucher) */
    #masthead {
        padding-left: 4px !important;
    }
    /* Mobile : header transparent → texture béton du body visible derrière le menu */
    #masthead, #masthead .main-header-bar, #masthead .ast-primary-header-bar, #ast-mobile-header {
        background: transparent !important;
        background-color: transparent !important;
    }

    /* Items legacy à cacher (compat ancien menu) */
    #ast-mobile-site-navigation .menu-item.menu-item-jb-mobile-hidden,
    .ast-mobile-popup-content .menu-item.menu-item-jb-mobile-hidden {
        display: none !important;
    }
}

/* ====================================================================
 * MODIF #20 v2 (04/2026) — TYPO PLUS LISIBLE PARTOUT
 * Demande Jérémy : "plus gras partout dans le site, particulièrement mobile"
 * Body + tous les paragraphes / listes / citations / boutons / inputs en 500.
 * Titres conservent leur poids existant (600/700 ErasBold).
 * ==================================================================*/
body,
body p,
body li,
body blockquote,
body cite,
body em,
body i,
body strong,
body figcaption,
body label,
body span:not(.jb-mark):not(.jb-sub):not(.ast-icon),
body a:not(.jb4wood-logo-link),
body button:not(.menu-toggle):not(.ast-menu-toggle):not(.ast-builder-menu-toggle),
body input,
body textarea,
body select,
.entry-content,
.entry-content *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.jb-mark):not(.jb-sub) {
    font-weight: 500 !important;
}
/* Mobile : letter-spacing léger pour aérer le texte plus dense */
@media (max-width: 768px) {
    body p, body li, body blockquote {
        letter-spacing: 0.005em;
    }
}

/* ====================================================================
 * MODIF #24 v2 (30/04/2026) — Carte Leaflet plein écran propre
 * Le plugin leaflet.fullscreen ajoute la class sur la DIV map, pas sur body.
 * → la class body.jb-map-fullscreen est ajoutée par notre JS via les events
 *   `enterFullscreen` / `exitFullscreen`. Ce CSS la consomme.
 * ==================================================================*/
/* Body : verrou scroll + viewport plein */
body.jb-map-fullscreen {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
}
/* Carte : par-dessus tout */
body.jb-map-fullscreen .jb4wood-realisations-map,
body.jb-map-fullscreen .leaflet-container {
    z-index: 100000 !important;
}
/* TOUT le reste caché en plein écran */
body.jb-map-fullscreen #masthead,
body.jb-map-fullscreen .ast-mobile-header-wrap,
body.jb-map-fullscreen #ast-mobile-header,
body.jb-map-fullscreen .ast-mobile-header-wrap .menu-toggle,
body.jb-map-fullscreen .menu-toggle,
body.jb-map-fullscreen .jb4wood-realisations-galerie,
body.jb-map-fullscreen .jb-realisations-filters-wrap,
body.jb-map-fullscreen .jb4wood-footer-enrich,
body.jb-map-fullscreen .ast-footer-overlay,
body.jb-map-fullscreen .ast-mobile-popup-content,
body.jb-map-fullscreen h2,
body.jb-map-fullscreen .jb-map-legend,
body.jb-map-fullscreen .grav-grid,
body.jb-map-fullscreen .jb-voir-plus-btn,
body.jb-map-fullscreen .entry-content > p,
body.jb-map-fullscreen .site-footer,
body.jb-map-fullscreen .jb4wood-logo-drawer-header {
    display: none !important;
    visibility: hidden !important;
}
/* Bouton sortie fullscreen accessible */
body.jb-map-fullscreen .leaflet-control-fullscreen,
body.jb-map-fullscreen .leaflet-control-zoom,
body.jb-map-fullscreen .leaflet-control-layers {
    z-index: 100001 !important;
}

/* ====================================================================
 * MODIF #21 (04/2026) — "Au service de vos projets" : 2 colonnes mobile
 * Override le CSS inline de la home (1fr → 2cols sous 600px)
 * ==================================================================*/
@media (max-width: 600px) {
    body .jb4wood-services-band .services-grid,
    body section.jb4wood-services-band .services-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 18px !important;
    }
}

/* ====================================================================
 * MODIF #22 (04/2026) — Logo cloné dans le drawer mobile
 * Le logo reste visible quand le menu burger est ouvert (en haut du drawer).
 * Le burger croix flotte par-dessus en haut-droite (z-index plus élevé).
 * ==================================================================*/
.jb4wood-logo-drawer-header {
    padding: 1.4rem 110px 1.2rem 1.2rem;   /* padding-right pour ne pas chevaucher le burger croix */
    border-bottom: 1px solid rgba(73, 56, 40, 0.08);
    margin: 0 0 0.6rem 0;
    background: transparent;
}
.jb4wood-logo-drawer-header .jb4wood-logo {
    padding: 0;
}
/* Logo dans le drawer : taille un peu plus modérée pour rentrer sans déborder */
.jb4wood-logo-drawer-header .jb-mark { font-size: 2.7rem !important; }
.jb4wood-logo-drawer-header .jb-sub  { font-size: 1.15rem !important; padding-left: 25% !important; }
@media (max-width: 480px) {
    .jb4wood-logo-drawer-header .jb-mark { font-size: 2.3rem !important; }
    .jb4wood-logo-drawer-header .jb-sub  { font-size: 0.95rem !important; }
}
@media (max-width: 380px) {
    .jb4wood-logo-drawer-header .jb-mark { font-size: 2rem !important; }
    .jb4wood-logo-drawer-header .jb-sub  { font-size: 0.85rem !important; }
}

/* ====================================================================
 * MODIF #17 (04/2026) — PAGE CGV : centrée façon screen client
 * ==================================================================*/
body.page-id-19 .jb-cgv-wrapper {
    max-width: 760px;
    margin: 3rem auto;
    padding: 2rem 1.5rem;
    text-align: center;
}
body.page-id-19 .jb-cgv-title {
    font-family: var(--jb-eras);
    color: var(--marron-fonce);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: 0.02em;
    margin: 0 0 1.2rem;
    text-transform: uppercase;
}
body.page-id-19 .jb-cgv-intro {
    color: var(--jb-text);
    font-family: var(--jb-serif); /* serif standard = PT Serif self-hostee (ex-Constantia non self-hostee, 2026-05-23) */
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 auto 2rem;
    max-width: 640px;
}
body.page-id-19 .jb-cgv-pdf {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none !important;
    transition: transform 0.3s var(--jb-easing);
    padding: 1.2rem;
    border-radius: 12px;
}
body.page-id-19 .jb-cgv-pdf:hover {
    transform: translateY(-4px) scale(1.05);
}
body.page-id-19 .jb-cgv-pdf svg {
    width: 96px; height: 96px;
    color: var(--jb-vert);
    filter: drop-shadow(0 6px 16px rgba(20,84,74,0.20));
}
body.page-id-19 .jb-cgv-pdf-label {
    font-family: var(--jb-serif); /* serif standard = PT Serif self-hostee (ex-Constantia non self-hostee, 2026-05-23) */
    font-style: italic;
    color: var(--jb-vert);
    font-size: 1.05rem;
}
body.page-id-19 .jb-cgv-footer-info {
    margin: 3rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(73,56,40,0.18);
    color: var(--jb-vert);
    font-family: var(--jb-serif); /* serif standard = PT Serif self-hostee (ex-Constantia non self-hostee, 2026-05-23) */
    font-size: 0.92rem;
    line-height: 1.7;
    text-align: center;
}

/* ====================================================================
 * MODIF #18 (04/2026 v2) — VIDÉO HERO HOME PLEIN HERO
 * 2 vidéos plein écran (desktop landscape 1920x1080 + portrait 1080x1920)
 * Hauteurs ciblées : 60vh desktop / 50vh tablette / 70vh mobile portrait
 * Plafond commun 88vh (ne dépasse pas le viewport).
 * ==================================================================*/
.jb-hero-fullscreen {
    min-height: 0;
    max-height: none;
}
.jb-hero-fullscreen video {
    min-height: 0;
    max-height: none;
}
/* Tablette 769→1024px : un peu moins haut */
@media (min-width: 769px) and (max-width: 1024px) {
    .jb-hero-fullscreen,
    .jb-hero-fullscreen video {
        min-height: 0;
        max-height: none;
    }
}
/* Mobile portrait : vidéo verticale = plus haute, on monte à 70vh */
@media (max-width: 768px) {
    .jb-hero-fullscreen,
    .jb-hero-fullscreen video {
        min-height: 0;
        max-height: none;
    }
}
/* Compat ancien wrapper (utilisé encore par d'autres pages éventuellement) */
.jb4wood-hero-wrapper {
    background: var(--jb-beton);
    min-height: 240px;
}
@media (min-width: 1920px) {
    .jb4wood-hero-video { max-width: 1800px; }
    .jb4wood-hero-wrapper { background: var(--jb-beton); }
}

/* ======================================================================
 * JB-HEADER-FONT-TABLET (2026-05-20) — font-family ONLY.
 * Tablette portrait / mode burger (body.ast-header-break-point, <=1024px) :
 * force les LIENS du menu/drawer mobile (#ast-hf-mobile-menu) en ErasBold,
 * identique au menu desktop (var(--jb-eras) = 'Signika',Georgia,serif).
 * Bat .main-header-menu a{font-family:var(--jb-body)!important} (Inter) qui,
 * via la classe .main-header-menu portee par le drawer, repassait certains
 * liens en Inter. Specificite 2 IDs (#ast-mobile-header #ast-hf-mobile-menu)
 * + !important => domine. NE TOUCHE QUE font-family (taille/couleur/layout intacts).
 * ==================================================================== */
@media (max-width: 1024px) {
    body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu a,
    body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu a.menu-link,
    body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .menu-item > a,
    body.ast-header-break-point #ast-mobile-header #ast-hf-mobile-menu .sub-menu a {
        font-family: var(--jb-eras), 'Signika', Georgia, serif !important;
    }
}

/* ======================================================================
 * MIGRATION DEPUIS astra-settings custom-css (legacy) — 2026-05-21
 * Blocs VIVANTS exclusifs au custom-css Astra, déplacés ici avant de vider
 * la clé custom-css (gain ~17,5 Ko/page servi partout). Valeurs reprises À
 * L'IDENTIQUE pour neutralité visuelle stricte (rendu byte-pour-byte conservé).
 *   - .jb4wood-rec-frame  : module vidéo « caméra REC » de /qui-suis-je/ (page 14)
 *                           — la page 14 override l'essentiel inline (!important),
 *                           mais l'équerre en L (.corner.*), @keyframes rec-blink,
 *                           la taille des équerres <769px et la base HUD restent
 *                           portés ICI (sinon perdus).
 *   - .jb4wood-about-section / .jb4wood-about-title : sections « À propos » de
 *                           /qui-suis-je/ (+ titres about sur pages 10/16).
 *                           NB : la couleur du .jb4wood-about-title est TOUJOURS
 *                           surchargée inline en #14544A!important (pages 10/14/16) ;
 *                           reprise ici en var(--jb-or) (charte) = sans effet visuel.
 *                           Le H2 .jb4wood-about-section conserve #1a4a2e (valeur
 *                           legacy EXACTE — voir point de vigilance charte au rapport).
 *   - :root --vert/--or-bois/… : seules les vars LEGACY encore consommées par du
 *                           contenu live (post 110 utilise var(--vert,#14544A)).
 *                           Reprises ici pour neutralité ; --vert garde #1a4a2e.
 * ==================================================================== */
:root {
    --vert: #14544A;
    --vert-light: #24633e;
    --or-bois: #7C6145;
    --or-clair: #d4b06a;
    --beton: #e8e4e0;
    --beton-light: #f0edea;
    --blanc: #ffffff;
    --text: #2a2520;
    --text-soft: #6b6058;
}

/* --- À propos : cadre REC caméra (ex-custom-css M7) --- */
.jb4wood-rec-frame {
  position: relative;
  max-width: 900px;
  margin: 30px auto 50px;
  background: #000;
  padding: 18px;
  border-radius: 4px;
}
.jb4wood-rec-frame video,
.jb4wood-rec-frame iframe {
  width: 100%;
  display: block;
  border-radius: 2px;
}
.jb4wood-rec-frame .corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 3px solid #fff;
  z-index: 5;
}
.jb4wood-rec-frame .corner.tl { top: 6px;    left: 6px;    border-right: none; border-bottom: none; }
.jb4wood-rec-frame .corner.tr { top: 6px;    right: 6px;   border-left:  none; border-bottom: none; }
.jb4wood-rec-frame .corner.bl { bottom: 6px; left: 6px;    border-right: none; border-top:    none; }
.jb4wood-rec-frame .corner.br { bottom: 6px; right: 6px;   border-left:  none; border-top:    none; }
.jb4wood-rec-frame .rec-dot {
  position: absolute;
  top: 14px; right: 40px;
  display: flex; align-items: center; gap: 6px;
  color: #fff; font-family: monospace; font-weight: 700; font-size: 12px;
  z-index: 6;
}
.jb4wood-rec-frame .rec-dot::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: #e02424; box-shadow: 0 0 6px #e02424;
  animation: rec-blink 1s infinite;
}
@keyframes rec-blink { 50% { opacity: 0.3; } }
.jb4wood-rec-frame .rec-timer {
  position: absolute;
  top: 14px; left: 40px;
  color: #fff; font-family: monospace; font-size: 12px; font-weight: 700;
  z-index: 6;
}
.jb4wood-rec-frame .rec-battery {
  position: absolute;
  bottom: 14px; left: 40px;
  display: flex; align-items: center; gap: 6px;
  color: #fff; font-family: monospace; font-size: 11px;
  z-index: 6;
}
.jb4wood-rec-frame .rec-battery svg { width: 22px; height: 12px; fill: #fff; }
.jb4wood-rec-frame .rec-countdown {
  position: absolute;
  bottom: 14px; right: 40px;
  color: #fff; font-family: monospace; font-size: 12px; letter-spacing: 2px;
  z-index: 6;
}

/* --- À propos : titre + sections (ex-custom-css M7) --- */
.jb4wood-about-title {
  font-family: 'Signika', 'Arial Black', sans-serif;
  color: var(--jb-or);
  font-size: 3rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 40px 0 20px;
}
.jb4wood-about-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: 1100px;
  margin: 50px auto;
  padding: 0 20px;
}
.jb4wood-about-section.reverse { direction: rtl; }
.jb4wood-about-section.reverse > * { direction: ltr; }
.jb4wood-about-section h2 {
  color: #14544A;
  font-family: 'Signika', 'Arial Black', sans-serif;
  font-size: 1.8rem;
  margin-bottom: 16px;
}
.jb4wood-about-section img {
  width: 100%; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
@media (max-width: 768px) {
  .jb4wood-about-section { grid-template-columns: 1fr; }
  .jb4wood-about-section.reverse { direction: ltr; }
  .jb4wood-about-title { font-size: 2rem; }
}



/* ═════════════════════════════════════════════════════════════════════════
 * JB4WOOD — CORRECTIF VISUEL IPHONE 2026-08-01 (marqueur jb-visuel-iphone)
 *
 * Trois défauts relevés par Jérémy sur son iPhone, MESURÉS sur le miroir
 * statique servi par test.jb4wood.com (jb4wood-core-lean.css y est identique
 * octet pour octet à celui-ci : md5 ec74b176b… côté test = celui d'ici après
 * réécriture d'URL par la construction statique).
 *
 * Ce bloc N'ÉCRASE AUCUNE RÈGLE : il est en fin de fichier et surcharge par
 * la cascade. Pour annuler : supprimer d'ici jusqu'au marqueur de fin.
 * ════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
 * A — LE LOGO TOUCHAIT LE BORD GAUCHE
 *
 * MESURÉ (accueil, iPhone 13 = 390×844) :
 *   · « JB4WOOD » démarrait à x = 16 px ;
 *   · TOUS les autres blocs de la page démarrent à x = 20 px
 *     (#content .ast-container → padding-left: 20px, valeur relevée dans le
 *     navigateur, pas devinée) ;
 *   → le logo était le seul élément de la page à sortir de la gouttière.
 *
 * ORIGINE DES 16 px : quatre paddings de 4 px empilés — #masthead,
 * .ast-mobile-header-wrap, .ast-main-header-wrap, .ast-primary-header-bar —
 * tous posés par la même déclaration « padding: 6px 4px !important » du bloc
 * « header non sticky » (dont le commentaire dit d'ailleurs « logo plus près
 * du bord gauche »). On rend les 4 px manquants sur le plus extérieur.
 *
 * ⚠️ PIÈGE MESURÉ : « #masthead { padding-left: 8px !important } » NE PASSE
 *    PAS. Le bloc d'origine cible « body.home #masthead » — spécificité
 *    (1,1,1) — qui bat (1,0,0) même à !important égal. Vérifié en direct :
 *    la valeur calculée restait 4px. D'où la reprise de la même paire de
 *    sélecteurs ci-dessous.
 * ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    body:not(.home) #masthead,
    body.home       #masthead { padding-left: 8px !important; }   /* 8 + 4 + 4 + 4 = 20 px */
}

/* ─────────────────────────────────────────────────────────────────────────
 * A bis — « Ébéniste Agenceur » DÉBORDAIT
 *
 * MESURÉ (390×844) : la boîte du sous-titre mesurait 241 px (clientWidth)
 * pour 285 px de contenu (scrollWidth) → 44 px hors boîte. Le texte finissait
 * à x = 300,5 px alors que la zone tactile du burger commence à x = 290 px :
 * 10,5 px du sous-titre passaient SOUS le bouton. À 320 px de large, le
 * chevauchement montait à 43,8 px.
 *
 * MÉCANIQUE : .jb-sub cumule « align-self: stretch » + « white-space: nowrap »
 * + « padding-left: 25% ». Le 25 % se résout sur la largeur de la boîte
 * (fixée par le mot JB4WOOD) — mais un padding en pourcentage compte pour 0
 * dans le calcul de cette largeur. La boîte ne s'élargit donc JAMAIS pour
 * l'accueillir : le texte sort par la droite, systématiquement.
 *
 * CORRECTIF — le mot « JB4WOOD » n'est PAS touché (3,1rem à 390 px, 2,7rem
 * sous 380 px : c'est la marque). On rentre le sous-titre dans la largeur du
 * mot, en réduisant le décalage (25 % → 20 %) et la taille.
 * Rapports mesurés dans le navigateur, police ErasBold :
 *     largeur(« JB4WOOD »)           = 5,329 × sa taille de police
 *     largeur(« Ébéniste Agenceur ») = 9,917 × la sienne
 * Pour que 0,20·L + l = L, il faut l = 0,80·L, soit une taille de sous-titre
 * de 0,80 × 5,329 / 9,917 = 0,43 × celle du mot.
 *
 * RÉSULTAT MESURÉ à 390×844 : débordement 44 px → 0 px ; le sous-titre
 * s'arrête à 260,6 px pour un « JB4WOOD » qui s'arrête à 261,1 px (il ne
 * dépasse plus, il s'aligne) ; écart à la zone du burger : −10,5 px → +29,4 px.
 * ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    #ast-mobile-header .ast-site-identity .jb4wood-logo .jb-sub {
        padding-left: 20% !important;
        font-size: 1.55rem;                 /* 3,60rem × 0,43   (était 1,85rem) */
    }
}
@media (max-width: 480px) {
    #ast-mobile-header .ast-site-identity .jb4wood-logo .jb-sub {
        font-size: 1.33rem;                 /* 3,10rem × 0,43   (était 1,55rem) */
    }
}
@media (max-width: 380px) {
    #ast-mobile-header .ast-site-identity .jb4wood-logo .jb-sub {
        font-size: 1.16rem;                 /* 2,70rem × 0,43   (était 1,35rem) */
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * B — LES INFOBULLES DE LA CARTE PASSAIENT SOUS LES COMMANDES
 *
 * MESURÉ sur /contact/ (375 px de large), infobulle « Atelier JB4WOOD »
 * ouverte — carte de 295×360 px :
 *     .leaflet-popup-pane ............ z-index  700
 *     .leaflet-top.leaflet-left ...... z-index 1000   (plein écran + / −)
 *     .leaflet-top.leaflet-right ..... z-index 1000   (sélecteur Map/Satellite)
 *     .leaflet-control ............... z-index  800   (posé par le site)
 *   → recouvrement mesuré : 41 × 88,6 px par la colonne de gauche
 *                        + 138,8 × 30,6 px par Map/Satellite
 *   → 7 880 px² sur 26 934, soit 29 % de l'infobulle illisible.
 *   Et la croix de fermeture (24 × 24 px seulement) avait sa moitié gauche
 *   sous le sélecteur Map/Satellite.
 *
 * ⚠️ CE QUI NE MARCHE PAS, ET POURQUOI (mesuré, pour ne pas y revenir) :
 *    monter .leaflet-popup-pane à 1100 NE CHANGE RIEN. Le pane est enfant de
 *    .leaflet-map-pane, qui porte « transform: matrix(1,0,0,1,27,0) » — donc
 *    un contexte d'empilement. Aucun descendant ne peut passer au-dessus des
 *    commandes (1000), qui sont hors de ce contexte. Testé en direct : essai
 *    à 1100 → capture identique. Et remonter .leaflet-map-pane ferait passer
 *    les TUILES par-dessus les commandes.
 *
 * CORRECTIF : on ne se bat pas avec l'empilement, on libère la place. Tant
 * qu'une infobulle est ouverte, les deux groupes de commandes descendent en
 * bas de la carte ; elles remontent dès sa fermeture.
 *   · vérifié : les deux groupes restent DANS la carte (bas à 487,5 px pour
 *     une carte qui finit à 513,5) et ne recouvrent pas l'attribution (0 px) ;
 *   · vérifié : recouvrement infobulle × commandes = 0 × 0 px ;
 *   · la carte reste pilotable — commandes toujours cliquables, glisser et
 *     pincer inchangés, croix de fermeture portée de 24 à 44 px (cible
 *     tactile minimale) et elle n'est plus sous le sélecteur Map/Satellite.
 *   · si :has() n'est pas connu du navigateur (iOS < 15.4), la règle entière
 *     est ignorée → comportement d'avant, aucune régression.
 * ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .leaflet-container:has(.leaflet-popup) .leaflet-top.leaflet-left,
    .leaflet-container:has(.leaflet-popup) .leaflet-top.leaflet-right {
        top: auto !important;
        bottom: 26px !important;
    }
    /* Cible tactile de la croix : 24 px mesurés → 44 px (le minimum tenu
       partout sur le site). Le glyphe reste centré, rien ne bouge à l'œil. */
    .leaflet-popup-close-button {
        width: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
        font-size: 20px !important;
        text-align: center !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * C — LE MENU BURGER OBLIGEAIT À FAIRE DÉFILER
 *
 * MESURÉ, tiroir #ast-mobile-header .ast-mobile-header-content
 * (largeur 260 px, hauteur disponible = calc(100dvh − 40px)) :
 *
 *   contenu réel ......................................... 862 px
 *     · bandeau logo animé ......... 239,4 px  (dont 74,4 px de padding
 *                                    et un logo de 164 × 164 px)
 *     · bloc téléphone + devis ..... 132,0 px
 *     · 8 liens de menu ............ 461,5 px  (padding vertical 15,3 px)
 *     · marges du bloc menu ......... 29,2 px
 *
 *   iPhone 13 (390×844) : 804 px disponibles → 58 px cachés, il FAUT défiler.
 *   iPhone SE (375×667) : 627 px disponibles → 235 px cachés, soit 28 % du
 *                         menu invisible.
 *   Autrement dit le tiroir réclamait 902 px de hauteur de fenêtre ; aucun
 *   iPhone n'en offre autant (844 au mieux, moins quand Safari affiche ses
 *   barres).
 *
 * CORRECTIF — on ne retire AUCUNE entrée, on comprime ce qui ne porte pas
 * d'information :
 *   ① le logo animé du tiroir passe de 164 px à 110 px et son bandeau de
 *      74 px de padding à 34 px   → −96 px  (poste le plus lourd, de loin) ;
 *   ② le padding vertical des liens passe de 15,32 px à 11,2 px, AVEC un
 *      min-height: 44px qui garantit la cible tactile → −65 px ;
 *   ③ le bloc téléphone/devis passe de 0,9/1 rem à 0,5/0,55 rem → −12 px ;
 *   ④ marges du bloc menu resserrées → −12 px.
 *
 * RÉSULTAT MESURÉ : 862 px → 682 px.
 *   iPhone 13 (390×844) : 804 dispo → 122 px de marge, plus de défilement.
 *   iPhone SE (375×667) : 627 dispo → 616 px (règle « écran court »
 *                         ci-dessous), 11 px de marge, plus de défilement.
 *   Cible tactile la plus petite après correction : 44,0 px (10 cibles).
 *
 * ⚠️ Si le menu gagne une entrée, refaire la mesure : le tiroir tient
 *    désormais jusqu'à 656 px de hauteur de fenêtre, pas en dessous. C'est
 *    la valeur qui déclenche l'indication de défilement, tout en bas.
 * ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* ① bandeau logo du tiroir : 239,4 px → 143,9 px */
    #ast-mobile-header .ast-mobile-header-content .jb4wood-logo-drawer-header {
        padding-top: 1.1rem !important;
        padding-bottom: 1.2rem !important;
    }
    #ast-mobile-header .ast-mobile-header-content .jb4wood-logo-drawer-header > a {
        width: 48% !important;              /* 72 % → 48 %  : 164 px → 110 px */
        max-width: 120px !important;        /* était 210px */
    }
    /* l'ombre au sol suit le logo, sinon elle serait plus large que lui */
    #ast-mobile-header .ast-mobile-header-content .jb4wood-logo-drawer-header::after {
        width: 52% !important;              /* était 78 % */
        max-width: 150px !important;        /* était 230px */
        height: 18px !important;            /* était 28px */
        bottom: 4px !important;
    }
    /* ② liens du menu : padding 15,32 → 11,2 px, mais jamais sous 44 px */
    #ast-mobile-header .ast-mobile-header-content .main-header-menu > li > a.menu-link {
        padding-top: 11.2px !important;
        padding-bottom: 11.2px !important;
        min-height: 44px !important;        /* cible tactile garantie */
        box-sizing: border-box !important;
    }
    /* ③ bloc téléphone + devis — la règle d'origine vit dans
       jb4wood-contact-mobile.php, chargé APRÈS ce fichier : il faut la
       battre en spécificité (le « body » de tête sert exactement à ça). */
    body #ast-mobile-header .ast-mobile-header-content ul.main-header-menu > li.jb-burger-cta {
        padding-top: .5rem !important;
        padding-bottom: .55rem !important;
    }
    /* ④ marges du bloc menu */
    #ast-mobile-header .ast-mobile-header-content .main-header-menu {
        padding-bottom: 0 !important;
    }
    #ast-mobile-header .ast-mobile-header-content .ast-builder-menu-mobile {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
}

/* Écrans courts (iPhone SE 375×667 et tout ce qui est plus petit) : on
   resserre encore le bandeau logo. MESURÉ : 682 px → 616 px, pour 627 px
   disponibles. C'est ce cran qui fait tenir le menu sur un SE. */
@media (max-width: 1024px) and (max-height: 720px) {
    #ast-mobile-header .ast-mobile-header-content .jb4wood-logo-drawer-header {
        padding-top: .7rem !important;
        padding-bottom: .75rem !important;
    }
    #ast-mobile-header .ast-mobile-header-content .jb4wood-logo-drawer-header > a {
        width: 30% !important;
        max-width: 72px !important;
    }
    #ast-mobile-header .ast-mobile-header-content .jb4wood-logo-drawer-header::after {
        width: 34% !important;
        max-width: 100px !important;
        height: 12px !important;
        bottom: 3px !important;
    }
    #ast-mobile-header .ast-mobile-header-content .ast-builder-menu-mobile {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    body #ast-mobile-header .ast-mobile-header-content ul.main-header-menu > li.jb-burger-cta > a.jb-cm-btn {
        min-height: 44px !important;        /* 48 px → 44 px, plancher tactile */
    }
}

/* REPLI accepté par Jérémy — « ou sinon mettre une flèche en bas ».
   En dessous de 655 px de hauteur de fenêtre (Safari barres affichées sur un
   petit iPhone), le tiroir ne peut PLUS tenir : 616 px de contenu + 40 px de
   marge = 656 px nécessaires. Là seulement, on annonce le défilement — un
   fondu ET un chevron, collés en bas du tiroir (position: sticky, donc ils ne
   défilent pas avec le contenu). Au-dessus de ce seuil, rien ne s'affiche :
   pas de flèche posée là pour rien. */
@media (max-width: 1024px) and (max-height: 655px) {
    #ast-mobile-header .ast-mobile-header-content::after {
        content: '';
        display: block;
        position: sticky;
        bottom: 0;
        height: 38px;
        margin-top: -38px;                  /* n'ajoute AUCUNE hauteur au tiroir */
        pointer-events: none;
        background:
            /* le chevron ⌄, centré en bas */
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='13' viewBox='0 0 22 13' fill='none' stroke='%237C6145' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,2 11,10.5 20,2'/></svg>") no-repeat center 20px,
            /* le fondu, ton du panneau */
            linear-gradient(to top, rgba(248,245,240,.96) 0%, rgba(248,245,240,.72) 45%, rgba(248,245,240,0) 100%);
        animation: jb-tiroir-defiler 1.8s ease-in-out 3 both;
    }
    @keyframes jb-tiroir-defiler {
        0%, 100% { opacity: .78; }
        50%      { opacity: 1;   }
    }
    @media (prefers-reduced-motion: reduce) {
        #ast-mobile-header .ast-mobile-header-content::after { animation: none; opacity: .9; }
    }
}
/* ═══════ FIN — correctif visuel iPhone 2026-08-01 ═══════ */