.site-footer .ast-footer-overlay,.site-footer .footer-sml-layout-2,.site-info,.site-below-footer-wrap,.ast-small-footer,.ast-footer-copyright{display:none !important;}

/* === [1] Fix texture body : image symétrique horizontale → pas de couture aux jonctions === */
body::before {
    background-image: url('/medias/2026/05/fond-jb4wood-sandwich-sym.webp') !important;
    background-size: 3600px 3600px !important;
}
@media (max-width: 1280px) {
    body::before { background-size: 3000px 3000px !important; }
}
@media (max-width: 760px) {
    body::before { background-size: 1800px 1800px !important; }
}

/* === [2] Galeries responsives — issu de sandbox-04 promu en prod (2026-05-14) === */
/* 4 col desktop+1280-, 3 col @1024-, 2 col mobile · gap 8px partout · padding 0 · cards radius 8px · ombre légère */
.grav-grid,
.jb4wood-galerie-grid,
.jb4wood-pro-photos-grid {
    column-count: 4 !important;
    column-gap: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}
@media (max-width: 1023px) {
    .grav-grid, .jb4wood-galerie-grid, .jb4wood-pro-photos-grid {
        column-count: 3 !important;
    }
}
@media (max-width: 767px) {
    .grav-grid, .jb4wood-galerie-grid, .jb4wood-pro-photos-grid {
        column-count: 2 !important;
        column-gap: 8px !important;
    }
}
/* Pour les grilles CSS-grid au lieu de column-count (ex: pro-photos-grid si grid-template-columns) */
.jb4wood-pro-photos-grid[style*="grid"], .jb4wood-pro-photos-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 1023px) { .jb4wood-pro-photos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 767px) { .jb4wood-pro-photos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* === [3] Coins arrondis + ombre + spacing cards photo (radius 8px depuis sandbox-04 promu) === */
.jb4wood-galerie-item img,
.jb4wood-galerie-thumb img,
.jb4wood-galerie-thumb,
.jb4wood-pro-section .pro-photos img,
.jb4wood-pro-section .pro-video video,
.jb4wood-pro-section .pro-video img,
.jb4wood-pro-photos-grid img,
.wp-block-image img,
.jb4wood-realisations-galerie img {
    border-radius: 8px !important;
}

/* === [3 bis] Cards : radius 8px + margin 8px + box-shadow 10% (sandbox-04 promu) === */
.grav-card,
.grav-card img,
.grav-card .grav-thumb,
.jb4wood-galerie-item,
.jb4wood-galerie-thumb {
    border-radius: 8px !important;
    overflow: hidden;
}
.grav-card {
    margin: 0 0 8px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10) !important;
}
.grav-card * { border-radius: inherit !important; }
.grav-card img,
.jb4wood-galerie-item img { border-radius: 8px !important; }
.grav-card:hover img { transform: scale(1.02) translateZ(0) !important; }
.jb4wood-pro-card { border-radius: 22px !important; }
.jb4wood-galerie-item { border-radius: 8px !important; overflow: hidden; }
img.jb4wood-logo-anim { border-radius: 18px !important; }

/* === [4] Cacher le bouton "Voir plus" après le clic (quand grav-grid passe en is-expanded) === */
/* Sélecteur adjacent (+) : ne cache QUE le bouton placé directement après le grid expandu.
   Indispensable sur pages multi-photothèques (ex: /gravure-laser-cnc/ = 4 grids) :
   :has() global cacherait tous les boutons → photos inaccessibles dans les autres sections. */
.grav-grid.is-expanded + .jb-voir-plus-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* === [6] Effet d'apparition (grayscale → couleur) — durée par inclinaison (2026-05-22) === */
/* SOURCE UNIQUE de la durée du reveal (bat la transition du monolithe via !important).
   Desktop (souris) = 2.5s (valeur validée). Sur appareil tactile : portrait = plus long
   et plus perceptible (3s) ; paysage = plus court (1.3s), car 2.5s gênait la visite en
   paysage (retour client iPad). N'agit que sur la DURÉE ; le déclenchement progressif
   sur image décodée est géré en JS (jbRevealCard V10, jb4wood-style.php). */
.grav-card img,
.grav-card video,
.jb4wood-realisations-galerie .grav-card img,
.jb4wood-realisations-galerie .grav-card video {
    transition: filter 2.5s ease, transform 0.5s ease !important;
}
@media (pointer: coarse) and (orientation: portrait) {
    .grav-card img,
    .grav-card video,
    .jb4wood-realisations-galerie .grav-card img,
    .jb4wood-realisations-galerie .grav-card video {
        transition: filter 3s ease, transform 0.5s ease !important;
    }
}
@media (pointer: coarse) and (orientation: landscape) {
    .grav-card img,
    .grav-card video,
    .jb4wood-realisations-galerie .grav-card img,
    .jb4wood-realisations-galerie .grav-card video {
        transition: filter 1.3s ease, transform 0.5s ease !important;
    }
}

/* === [5+7] Fade transparent en bas de la grille non-expanded — UNIQUEMENT sur Mes Réalisations (page 11) === */
/* Les autres pages catégories (cuisine, biblio, table, mobilier, garde-corps, gravure, divers, portes)
   affichent leur galerie entièrement, sans dégradé en bas. */
/* Fade transparent : appliqué uniquement quand la grille EST tronquée (sinon pas de fade inutile) */
.grav-grid.jb-truncate:not(.is-expanded) {
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%) !important;
            mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%) !important;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.grav-grid.is-expanded {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}
/* Annule explicitement le mask + ::after sur toutes les autres pages (au cas où une règle ailleurs l'applique) */
/* Anciennement : body:not(.page-id-11) annulait mask + max-height. Retiré pour permettre fade+truncation partout. */
/* Si une page particulière doit annuler ces effets, scoper via body.page-id-XXX. */
body:not(.page-id-11) .grav-grid::after,
body:not(.page-id-11) .jb4wood-realisations-galerie .grav-grid::after {
    display: none !important;
    content: none !important;
}
/* Bouton "Voir plus de réalisations" : visible UNIQUEMENT sur Mes Réalisations (page 11) */
/* Truncation : seuil global 800px (override par page via :root { --jb-truncate-threshold: XXX }) */
:root { --jb-truncate-threshold: 800; }
.grav-grid.jb-truncate {
    max-height: 800px !important;
    overflow: hidden !important;
}
.grav-grid.jb-truncate.is-expanded {
    max-height: none !important;
    overflow: visible !important;
}

/* Voir plus visible PAR DÉFAUT sur toutes les photothèques (cuisine, biblio, table, etc.).
   Sur /realisations/, le sélecteur adjacent fonctionne (markup direct). Sur les autres,
   le button est séparé du grid par un </section> donc l'ancien `.jb-truncate +` ne matchait
   pas en desktop. Le JS de chaque page cache via inline style="display:none" après clic. */
.jb-voir-plus-btn { display: block; }
.grav-grid.jb-truncate + .jb-voir-plus-btn { display: block !important; }

/* === Astra : cacher le H1 entry-title sur toutes les pages (titre redondant avec le contenu hero/H1 interne) === */
body.page .entry-header .entry-title,
body.page header.entry-header,
body.page .ast-archive-description {
    display: none !important;
}

/* === Home hero : boutons son + plein écran à cheval sur le bord BAS DE LA VIDÉO ===
   Le wrapper a padding-bottom:30px sur .home, donc le bord vidéo est 30px au-dessus
   du bord du wrapper. Avec boutons 44px (desktop) ou 40px (mobile), on calcule :
   bottom = padding - (button_size/2) → desktop 30-22=8, mobile 30-20=10. */
/* Le wrapper a overflow:hidden (style.php) qui rognait la moitié basse des
   boutons à cheval sur le bord vidéo. Scopé home : on autorise le débordement
   (aucun border-radius sur le héro, donc rien d'autre n'est affecté). */
body.home .jb4wood-hero-wrapper { overflow: visible !important; }
body.home .jb4wood-hero-controls {
    bottom: -18px !important;
    right: 24px !important;
}
@media (max-width: 768px) {
    body.home .jb4wood-hero-controls {
        bottom: -4px !important;
        right: 16px !important;
    }
}
/* Bulle "Cliquez pour le son" alignée sur le bouton SON (gauche) + descendue.
   Desktop : controls right:24 + FS 44 + gap 8 → centre bouton son ≈ 98px → tooltip right ≈ 70px.
   Mobile  : controls right:16 + FS 40 + gap 6 → centre bouton son ≈ 82px → tooltip right ≈ 54px.
   bottom 78px → 60px (descendue, plus proche du bouton). */
@media (min-width: 769px) {
    body.home .jb4wood-audio-tooltip { right: 70px !important; bottom: 60px !important; }
}
@media (max-width: 768px) {
    body.home .jb4wood-audio-tooltip { right: 54px !important; bottom: 60px !important; }
}
/* Boutons audio + plein écran : fond vert PLEIN (opacité retirée) */
.jb4wood-audio-toggle,
.jb4wood-hero-audio,
.jb4wood-hero-fullscreen {
    background: #14544A !important;
}
/* Équilibrage des colonnes masonry sur TOUTES les pages : évite qu'une colonne descende
   beaucoup plus bas que l'autre quand le nombre de photos n'est pas équilibré.
   `column-fill: balance` force le navigateur à répartir les items pour que toutes les
   colonnes terminent à peu près à la même hauteur. */
.grav-grid { column-fill: balance !important; }

/* === Texte justifié sur toutes les intros des pages catégories (cuisine, bibliothèque, table, etc.) === */
/* Les paragraphes principaux passent en justify pour un rendu plus pro et homogène.
   text-align-last: left évite l'espacement bizarre sur la dernière ligne courte.
   hyphens: auto autorise la coupure de mots pour un meilleur alignement.
   Les paragraphes italiques (intros stylisées en sous-titre) restent en flow normal. */
.jb4wood-gravure-intro p {
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.jb4wood-gravure-intro p[style*="italic"],
.jb4wood-gravure-intro p[style*="font-style: italic"] {
    text-align: left;
    text-align-last: auto;
    hyphens: none;
    -webkit-hyphens: none;
}
.grav-grid > * {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
}

/* === [8] Bouton "Voir plus de réalisations" — même style que bouton hero accueil === */
/* Couleurs : or-bois → vert au hover ; effet shimmer (sweep lumineux) qui passe en boucle */
.jb-voir-plus-btn {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    background: #7C6145 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 30px !important;
    margin: 24px auto 28px !important;
    font-family: 'Signika', 'Arial Black', Impact, sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(73,56,40,0.25) !important;
    transform: none !important;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
    isolation: isolate;
    cursor: pointer;
}
.jb-voir-plus-btn.is-hidden { display: none !important; }
.jb-voir-plus-btn:hover {
    background: #1a4a2e !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(124,97,69,0.35) !important;
    color: #fff !important;
}
/* Sweep lumineux qui balaye le bouton en boucle (effet "shimmer") */
.jb-voir-plus-btn::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;
}
/* Pause shimmer au hover (effet "on s'arrête sur le bouton") */
.jb-voir-plus-btn:hover::before {
    animation-play-state: paused;
}
/* Texte au-dessus du shimmer */
.jb-voir-plus-btn > * {
    position: relative;
    z-index: 2;
}
/* Keyframes (au cas où le mu-plugin n'aurait pas chargé sur cette page) */
@keyframes jb-cta-shimmer {
    0%,  100% { transform: translateX(-110%) skewX(-22deg); }
    30%       { transform: translateX(110%)  skewX(-22deg); }
    65%       { transform: translateX(110%)  skewX(-22deg); }
}

/* === [9] Blur visible 8px sous le bloc "Je me déplace dans tout le Puy-de-Dôme et l'Allier" === */
.jb4wood-realisations-zones {
    position: relative !important;
    /* Box-shadow flou diffus directement sur le bloc → rend l'effet visible
       même quand le fond derrière est uniforme (béton lisse) */
    box-shadow:
        0 16px 24px -4px rgba(73, 56, 40, 0.18),
        0 6px 12px -2px rgba(124, 97, 69, 0.12) !important;
}
.jb4wood-realisations-zones::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 60px;
    /* Voile semi-transparent qui rend le blur perceptible même sur fond uniforme */
    background: linear-gradient(to bottom,
        rgba(232, 228, 224, 0.35) 0%,
        rgba(232, 228, 224, 0) 100%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}
/* === Menu desktop : 2 lignes, largeur fluide selon l'écran + police +grande ===
   Override (scopé desktop, #masthead pour battre style.php) du max-width:560px
   fixe qui forçait 3 lignes. clamp() = s'adapte à la largeur d'écran en gardant
   ~2 lignes. Le bandeau flou (#masthead::before top:0/bottom:-60px) suit auto. */
@media (min-width: 1024px) {
    #masthead .ast-primary-header-bar .main-header-menu,
    #masthead .ast-primary-header-bar .main-navigation ul.main-header-menu {
        max-width: min(96vw, 1200px) !important;
        flex-wrap: wrap !important;
    }
    /* Police FLUIDE selon largeur d'écran → chaque groupe (3 / 4 items) tient
       toujours sur 1 rang : 2 lignes garanties (avec le break #307).
       ~0.95rem @1024px → ~1.45rem sur très grand écran. */
    #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;
    }
    /* Ordre voulu (CSS order, desktop only — burger mobile DOM intact) :
       L1 : Mes réalisations(308) · Gravure & Découpe(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, déjà masqué) recyclé en SAUT DE LIGNE flex garanti
       entre L1 et L2 — invisible, non focusable (visibility:hidden), 0 px haut. */
    #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; }
}

/* === Hero vidéo desktop : descendue légèrement (home only) ===
   Surcharge le margin-top:120px de style.php (body.home .jb4wood-hero-wrapper.jb-hero-fullscreen).
   style.php s'injecte en wp_head prio 100 (APRÈS overrides prio 99) : à spécificité
   égale il gagnait. On préfixe "html" (spécificité 0,3,2 > 0,3,1) → on gagne quel
   que soit l'ordre. La règle générique "toutes pages" (120px) n'est PAS touchée. */
@media (min-width: 1024px) {
    html body.home .jb4wood-hero-wrapper.jb-hero-fullscreen { margin-top: 165px !important; }
}


@media (min-width: 1024px) {
    body:not(.home):not(.error404) #primary {
        padding-top: 120px !important;
    }
}

/* QW4 contain:paint DESACTIVE : .jb-avis-card / .jb4wood-avis-card /
   .jb4wood-presta-card ont des :hover debordants (transform lift +
   box-shadow outset ~80px + shimmer ::before -120%->130% pour presta).
   contain:paint clipperait ces effets = regression visuelle (piege CLAUDE.md).
   Ne PAS decommenter sans verifier que ces cartes n'ont plus d'effet
   hover/pseudo qui sort de leur boite.
.jb-avis-card, .jb4wood-presta-card { contain: paint; }
*/