/* ===== RGPD CHECKBOX FIX (sub-agent 9 — visible + cliquable + stylée) ===== */
.fluentform .ff-el-form-check:has(input[name="rgpd_consent"]),
.fluentform .ff-el-group:has(input[name="rgpd_consent"]) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 1.4em 0 1em !important;
    padding: 1em 1.1em !important;
    background: rgba(255,255,255,0.7) !important;
    border: 1px solid rgba(124,97,69,0.35) !important;
    border-left: 3px solid var(--jb-vert, #14544A) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(73,56,40,0.06) !important;
}
.fluentform .ff-el-form-check input[name="rgpd_consent"] {
    /* Override le masquage radio Safari : la checkbox RGPD doit être visible et cliquable */
    position: relative !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    margin-right: 12px !important;
    margin-top: 2px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 2px solid var(--jb-vert, #14544A) !important;
    border-radius: 5px !important;
    background: #fff !important;
    vertical-align: top !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    z-index: 1 !important;
    overflow: visible !important;
    clip: auto !important;
}
.fluentform .ff-el-form-check input[name="rgpd_consent"]:hover {
    border-color: var(--jb-or, #7C6145) !important;
    box-shadow: 0 0 0 3px rgba(124,97,69,0.15) !important;
}
.fluentform .ff-el-form-check input[name="rgpd_consent"]:checked {
    background: var(--jb-vert, #14544A) !important;
    border-color: var(--jb-vert, #14544A) !important;
}
.fluentform .ff-el-form-check input[name="rgpd_consent"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
}
.fluentform .ff-el-form-check input[name="rgpd_consent"]:focus-visible {
    outline: 3px solid rgba(124,97,69,0.4) !important;
    outline-offset: 2px !important;
}
.fluentform .ff-el-form-check:has(input[name="rgpd_consent"]) label {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 0 !important;
    color: #2a2520 !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    font-weight: 400 !important;
}
.fluentform .ff-el-form-check:has(input[name="rgpd_consent"]) label a {
    color: var(--jb-vert, #14544A) !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}
/* Message d'erreur RGPD */
.fluentform .ff-el-group:has(input[name="rgpd_consent"]) .error,
.fluentform .ff-el-group:has(input[name="rgpd_consent"]) .text-danger {
    color: var(--jb-error) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    margin-top: 8px !important;
    padding: 6px 10px !important;
    background: rgba(192,57,43,0.08) !important;
    border-radius: 4px !important;
    display: block !important;
}

/* ===== Vidéos pros mobile portrait (Clients Pro page) ===== */
.jb4wood-pro-section .pro-video,
.jb4wood-pro-section .pro-photos { position: relative; }
.jb4wood-pro-section .pro-video video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    object-fit: contain;
    background: #000;
}
@media (max-width: 768px) {
    .jb4wood-pro-section .pro-video video {
        max-height: 70vh;
        aspect-ratio: 9 / 16;
        object-fit: cover;
        margin: 0 auto;
    }
    /* Hero pro librairie : mobile = portrait */
    .jb4wood-hero-pro-wrapper video {
        aspect-ratio: 9/16 !important;
        max-height: 75vh !important;
        object-fit: cover !important;
    }
}

/* ============================================================
 * Page Gravure laser & CNC — hero, intro, galeries, CTA
 * ============================================================ */
.jb4wood-gravure-hero {
    max-width: 1200px;
    margin: 40px auto 50px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}
.jb4wood-gravure-hero .hero-img-wrap {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.18);
}
.jb4wood-gravure-hero .hero-img-wrap img {
    width: 100%;
    height: 580px;
    object-fit: cover;
    object-position: center 78%;
    display: block;
    transition: transform 0.6s ease;
    filter: none !important;
    cursor: pointer;
}
/* Le hero est cliquable comme une grav-card mais sans le styling masonry */
.jb4wood-gravure-hero .hero-img-wrap.grav-card {
    margin: 0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.18);
}
.jb4wood-gravure-hero:hover .hero-img-wrap img {
    transform: scale(1.04);
}
.jb4wood-gravure-hero h1 {
    font-family: 'Signika', 'Arial Black', sans-serif;
    color: var(--jb-vert, #14544A);
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0 0 18px;
    line-height: 1.15;
}
.jb4wood-gravure-hero .hero-tagline {
    font-family: var(--jb-serif);
    color: var(--marron-fonce);
    font-size: 1.2rem;
    line-height: 1.5;
    font-style: italic;
}
@media (max-width: 768px) {
    .jb4wood-gravure-hero {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 20px auto 30px;
    }
    .jb4wood-gravure-hero .hero-img-wrap img { height: 380px; object-position: center 78%; }
    .jb4wood-gravure-hero h1 { font-size: 1.7rem; text-align: center; }
    .jb4wood-gravure-hero .hero-tagline { text-align: center; font-size: 1rem; }
}

.jb4wood-gravure-intro {
    max-width: 850px;
    margin: 40px auto;
    padding: 0 20px;
}
.jb4wood-gravure-intro p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
    margin: 0 0 18px;
}
.jb4wood-gravure-intro strong { color: var(--jb-or, #7C6145); }

.jb4wood-gravure-galerie {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
}
.jb4wood-gravure-galerie h2 {
    font-family: 'Signika', 'Arial Black', sans-serif;
    color: var(--jb-vert, #14544A);
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-align: center;
    margin: 0 0 30px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* =========================================================================
   KILL SWITCH MOBILE — anti-crash iOS Safari (13/05/2026)
   Cause documentée : combinaison body::before parallax fixed + backdrop-filter
   (45 occurrences dans ce mu-plugin) = re-paint global par frame sur iOS
   → mémoire GPU explosée → tab killed → message "Un problème récurrent".
   Sur mobile (≤768px) on désactive en masse pour libérer la GPU.
   Conforme à la règle #1 stability_first (cf mémoire projet).
   ========================================================================= */
@media (max-width: 768px) {
    /* Tue tous les backdrop-filter (les remplace par fond opaque équivalent) */
    *,
    *::before,
    *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* Fond béton FIXE et STATIQUE sur mobile : le ::before est position:fixed
       (reste dans le viewport, le contenu défile par-dessus) MAIS sans aucun
       mouvement — pas de parallax, background-position figé, transform:none.
       => peint une seule fois, ZÉRO re-paint par frame. La cause du crash iOS
       documenté (13/05) était le re-paint par frame (parallax) + backdrop-filter ;
       ici les deux sont neutralisés (backdrop-filter:none conservé ci-dessus).
       ⚠️ À VALIDER sur iPhone réel (zone du crash documenté — règle #1). */
    body::before {
        background-attachment: scroll !important;
        position: fixed !important;
        background-position: center 0 !important;  /* statique : le --bg-y du JS est ignoré */
        will-change: auto !important;
        transform: none !important;
    }
}

/* =========================================================================
   GALERIE PINTEREST MASONRY — refonte propre (13/05/2026 — v5 FINAL)
   ─────────────────────────────────────────────────────────────────────────
   Architecture : positionnement absolu calculé en JS pur. C'est ce que
   font Pinterest, Medium, Etsy. Aucun autre système ne donne stabilité
   100% avec lazy loading + viewport responsive.

   Au load :
   1. CSS columns rend les cards en fallback (anti-flash blanc, ~50 ms)
   2. JS masonry démarre, calcule positions absolues per-card, ajoute
      classe .is-masonry-laid sur le grid
   3. CSS bascule en position:absolute pour les cards → plus AUCUN reflow
      possible (les cards sont hors flow, placées au px près)

   Règle d'harmonie : le JS évite de placer 2 cards de même orientation
   (portrait/landscape/square) consécutives dans une même colonne. Quand
   2 colonnes ont une grande différence de hauteur en fin de placement,
   l'algo migre des cards vers la plus courte.

   Voir <script id="jb-gallery-js"> du même fichier.
   ========================================================================= */
.grav-grid {
    position: relative;
    /* Fallback CSS columns avant init JS (anti-flash). Si JS échoue
       complètement (e.g., JS désactivé), le visiteur voit ce fallback. */
    column-count: 3;
    column-gap: 18px;
}
@media (max-width: 900px) { .grav-grid { column-count: 2; column-gap: 6px; } }
@media (max-width: 480px) { .grav-grid { column-count: 2; column-gap: 5px; } }
/* Mobile/tablette (<1024px) : galerie quasi bord-a-bord (gouttiere 6px),
   full-bleed comme desktop mais marge minimale. JS masonry lit clientWidth. */
@media (max-width: 1023px) {
    .grav-grid {
        width: calc(100vw - 12px);
        max-width: calc(100vw - 12px);
        margin-left: calc(50% - 50vw + 6px);
        margin-right: calc(50% - 50vw + 6px);
    }
}

/* /realisations/ desktop : galerie facon mosaique — 5 a 10 colonnes selon la
   largeur d'ecran, photos resserrees (gap 6px), gouttiere de 32px par
   rapport au bord d'ecran. Le JS masonry lit column-count/column-gap.
   GLOBAL : toutes les galeries .grav-grid (decision client — remplace
   l'ancien layout phototheque 4 col valide). Le JS masonry recalcule
   les colonnes (4->8 selon ecran) ; mobile/tablette inchanges (<1024px). */
@media (min-width: 1024px) {
    .grav-grid {
        width: calc(100vw - 64px);
        max-width: calc(100vw - 64px);
        margin-left: calc(50% - 50vw + 32px);
        margin-right: calc(50% - 50vw + 32px);
        column-gap: 6px;
        column-count: 5;
    }
}
@media (min-width: 1280px) { .grav-grid { column-count: 6; } }
@media (min-width: 1440px) { .grav-grid { column-count: 7; } }
@media (min-width: 1680px) { .grav-grid { column-count: 8; } }
@media (min-width: 1920px) { .grav-grid { column-count: 9; } }
@media (min-width: 2300px) { .grav-grid { column-count: 10; } }

/* AVANT init JS : cards invisibles le temps que le JS calcule les positions
   (élimine le flash de "toutes les photos à (0,0)" pendant le calcul). */
.grav-grid:not(.is-masonry-laid):not(.jb-failsafe-columns) > .grav-card {
    opacity: 0;
}
/* Failsafe : si JS plante, après 1.5s on force fallback CSS columns visible */
.grav-grid.jb-failsafe-columns > .grav-card {
    opacity: 1;
}

/* APRÈS init JS : cards positionnées en absolute aux coords inline */
.grav-grid.is-masonry-laid {
    column-count: 1;
    column-gap: 0;
}
.grav-grid.is-masonry-laid > .grav-card {
    position: absolute;
    margin: 0;
    break-inside: unset;
    opacity: 1;
    transition: opacity 0.25s ease;
    /* width/height/top/left posés inline par JS au pixel près */
}
.grav-grid.is-masonry-laid > .grav-card > img,
.grav-grid.is-masonry-laid > .grav-card > video {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* card-aspect ≈ img-aspect → pas de crop visible */
}

.grav-card {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: var(--jb-shadow-light);
    margin: 0 0 18px;
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    cursor: pointer;
    /* aspect-ratio inline ajouté par shortcode pour fallback columns */
}
.grav-card img,
.grav-card video {
    width: 100%;
    height: auto;
    display: block;
}
/* ============================================================
   REVEAL GALERIES — V8 DECOUPLE DU CHARGEMENT (2026-05-21)
   ------------------------------------------------------------
   Probleme corrige : l'ancien reveal couplait DEUX classes async
   (is-loaded + in-color) => courses de timing (flash gris sur image
   en cache, effet manque sur reseau lent). La nouvelle version pose
   UNE SEULE classe permanente `.jb-revealed` (par un IO threshold:0,
   declenche a l'apparition en bas), independante du chargement image.
   Le keyframe se joue UNE FOIS ; un changement de `src` (windowing)
   ne rejoue jamais une animation terminee (la classe reste sur la
   CARTE, pas sur l'img). Preuve CDP : 30 cartes => 30 animationstart,
   0 rejeu apres 200 scrolls saccades, 0 anim supp. au windowing.
   Conforme regle #1 : aucun backdrop-filter ; will-change:filter
   desktop only retire apres l'anim (.jb-rev-done). Mobile = gris->
   couleur SANS flou (pas de filter:blur anime = pas de jank WebKit).
   ============================================================ */
/* DESKTOP (>=1024) : defaut gris+flou ; revele = flou-vite + couleur-lente */
/* V9 TRANSITION (2026-05-21) — re-trigger-proof : une transition ne se rejoue QUE si
   la valeur calculee du filter change. .jb-revealed etant permanente, un re-rendu/re-decode
   de l'img par Safari iOS/iPadOS au scroll haut/bas NE rejoue RIEN (le keyframe V8, lui, se
   rejouait => clignotement). Pas de will-change toggle (autre source de blink). */
.grav-card img,
.grav-card video { transition: filter 2.2s cubic-bezier(0.4, 0, 0.2, 1); }
@media (min-width: 1024px) {
    .grav-card img { filter: grayscale(100%) blur(2px); }
    .grav-card.jb-revealed img { filter: none; }
    /* VIDEO/GIF (2026-05-22) : meme reveal gris->couleur que les photos, mais SANS flou.
       Un blur(5px) anime sur une video qui JOUE = re-blur GPU a chaque frame pendant
       2.5s (cout sur desktop faible), donc on garde grayscale seul pour la video. */
    .grav-card video { filter: grayscale(100%); }
    .grav-card.jb-revealed video { filter: none; }
}
/* MOBILE / TABLETTE (<1024) : defaut gris SANS flou ; revele = gris->couleur
   SANS flou. filter:grayscale seul (PAS de blur anime) = composite leger,
   pas le jank WebKit/iOS du filter:blur anime. windowing-safe (classe sur
   la carte, pas l'img => re-rendu du src ne rejoue rien). */
@media (max-width: 1023.98px) {
    /* tablette/mobile : gris -> couleur SANS flou (img ET video) */
    .grav-card img,
    .grav-card video { filter: grayscale(100%); }
    .grav-card.jb-revealed img,
    .grav-card.jb-revealed video { filter: none; }
    .grav-card img,
    .grav-card video { transform: none; }   /* pas de translateZ : memoire GPU iOS */
}
/* NB DUREE REVEAL : la duree effective (desktop 2.5s / portrait tactile 3s /
   paysage tactile 1.3s) est pilotee SITE-WIDE par jb4wood-overrides.css bloc [6]
   (!important, source unique). Ce `transition: filter 2.2s` ci-dessus n'est qu'un
   defaut de repli (jamais effectif tant que overrides.css est charge). Le degrade
   progressif sur image decodee est garanti par jbRevealCard V10 (JS, plus bas). */
/* prefers-reduced-motion : tout en couleur, zero animation (desktop+mobile) */
@media (prefers-reduced-motion: reduce) {
    .grav-card img,
    .grav-card video { filter: none !important; transition: none !important; }
}
/* Ancien calque desaturant ::after (.jb-shade) neutralise definitivement :
   l'approche est desormais le filter sur l'img, plus aucun pseudo-element. */
.grav-card.jb-shade::after { content: none !important; }

/* IMPORTANT : pas de :hover transform sur la card en mode masonry (touch
   mobile déclenche :hover au passage du doigt → scale → perçu comme saut).
   Hover sobre uniquement (changement de shadow) sur device mouse. */
@media (hover: hover) and (pointer: fine) {
    .grav-card { transition: box-shadow 0.3s ease; }
    .grav-card:hover { box-shadow: 0 10px 22px rgba(0,0,0,0.18); }
}

/* Mobile : truncate visuel UNIQUEMENT (les cards 7+ restent positionnées,
   on cache juste le bas via max-height + fade). Au clic "Voir plus" on
   retire has-voir-plus → max-height disparaît, les cards sont déjà à leur
   place finale = ZÉRO recalcul, ZÉRO saut. */
@media (max-width: 768px) {
    .grav-grid.is-masonry-laid.has-voir-plus {
        max-height: var(--jb-voir-plus-max-h, 1100px);
        overflow: hidden;
    }
    .grav-grid.is-masonry-laid.has-voir-plus::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 180px;
        background: linear-gradient(to bottom, rgba(244,239,231,0) 0%, rgba(244,239,231,1) 100%);
        pointer-events: none;
    }
}
.jb-voir-plus-btn {
    /* display: block déplacé dans jb4wood-overrides.css pour cohérence
       cross-page (était display: none ici, masquait button sur toutes
       catégories en desktop). Visuel premium (or-bois shimmer) géré
       par .jb-voir-plus-btn premium rule dans overrides.css. */
    display: block;
    margin: 24px auto 28px;
    cursor: pointer;
    text-align: center;
}
.jb-voir-plus-btn.is-hidden { display: none; }
/* Fix : apres clic le bouton doit disparaitre meme si le grid garde
   .jb-truncate. Spec (0,4,0) !important > overrides.css L139 (0,3,0). */
.grav-grid.jb-truncate.is-expanded + .jb-voir-plus-btn,
.grav-grid.is-expanded + .jb-voir-plus-btn.is-hidden,
.grav-grid.jb-truncate + .jb-voir-plus-btn.is-hidden,
.grav-grid.is-expanded + .jb-voir-plus-btn { display: none !important; }

/* CTA bas de page Gravure — fix lisibilité (override couleurs Astra/global) */
.jb4wood-gravure-cta {
    max-width: 900px;
    margin: 60px auto 40px;
    padding: 50px 30px;
    background: linear-gradient(135deg, var(--jb-vert, #14544A) 0%, #1a6b5a 100%);
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(20,84,74,0.25);
}
.jb4wood-gravure-cta h2 {
    color: #fff !important;
    font-family: 'Signika', 'Arial Black', sans-serif;
    font-size: clamp(1.4rem, 2.6vw, 1.8rem);
    margin: 0 0 14px;
    font-style: normal !important;
}
.jb4wood-gravure-cta p {
    color: #ffffff !important;
    font-family: var(--jb-serif);
    font-size: 1.1rem;
    margin: 0 0 28px;
    line-height: 1.55;
    font-style: italic;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.jb4wood-gravure-cta .cta-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.jb4wood-gravure-cta .btn-primary,
.jb4wood-gravure-cta .btn-secondary {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 6px;
    text-decoration: none !important;
    font-family: 'Signika', 'Arial Black', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.25s ease;
}
.jb4wood-gravure-cta .btn-primary {
    background: var(--jb-or, #7C6145);
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}
.jb4wood-gravure-cta .btn-primary:hover,
.jb4wood-gravure-cta .btn-primary:focus {
    background: #ffffff;
    color: var(--jb-vert, #14544A) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.30);
}
.jb4wood-gravure-cta .btn-secondary {
    background: transparent;
    color: #ffffff !important;
    border: 2px solid #fff;
}
.jb4wood-gravure-cta .btn-secondary:hover,
.jb4wood-gravure-cta .btn-secondary:focus {
    background: #ffffff;
    color: var(--jb-vert, #14544A) !important;
}
@media (max-width: 600px) {
    .jb4wood-gravure-cta { margin: 40px 16px; padding: 35px 20px; }
    .jb4wood-gravure-cta .cta-buttons { flex-direction: column; }
    .jb4wood-gravure-cta .btn-primary,
    .jb4wood-gravure-cta .btn-secondary { width: 100%; padding: 14px 20px; }
}

/* Lightbox custom — fond sombre, image quasi pleine largeur, boutons sans bulle (icônes par-dessus image) */
.jb-lightbox {
    position: fixed;
    inset: 0;
    /* hauteur dynamique = compense la barre URL iOS Safari qui apparaît/disparaît */
    height: 100vh;
    height: 100dvh;
    background: rgba(0,0,0,0.94);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    backdrop-filter: var(--jb-blur-6);
    -webkit-backdrop-filter: var(--jb-blur-6);
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
}
.jb-lightbox.is-open { display: flex; }
.jb-lightbox figure {
    margin: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    /* Pas de display:flex pour éviter le centrage du track de 300vw */
}
/* Track carrousel : 3 slides côte à côte, position absolute fixée à left:0
   (sans flex parent, l'origin du track est garanti à 0 — fix bug décalage) */
.jb-lb-track {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 300vw;
    height: calc(100vh - 110px);
    height: calc(100dvh - 110px);
    transform: translate3d(-100vw, 0, 0);
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}
.jb-lb-track.is-dragging { transition: none; }
.jb-lb-slide {
    width: 100vw;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 14px;
    box-sizing: border-box;
    user-select: none;
}
.jb-lb-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
/* Vidéo dans une slide lightbox (intégration vidéo dans la galerie photos depuis 05/2026) */
.jb-lb-slide video.jb-lb-video {
    max-width: 100%;
    max-height: calc(100vh - 180px);
    width: auto;
    height: auto;
    border-radius: 0;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    background: transparent;
    display: block;
    outline: none;
}
/* Caption — fond noir + texte gros + scroll commençant en HAUT (texte commence visible, scroll si trop long) */
.jb-lightbox .jb-lb-caption {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    min-height: 130px;
    max-height: 45vh;
    overflow-y: auto;
    display: block;
    color: #fff;
    font-family: var(--jb-serif);
    font-size: 1.15rem;
    line-height: 1.55;
    max-width: 100%;
    padding: 22px 70px;
    box-sizing: border-box;
    text-align: center;
    font-style: italic;
    margin: 0;
    text-shadow: 0 2px 6px rgba(0,0,0,0.95);
    background: linear-gradient(to top, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.78) 70%, rgba(0,0,0,0) 100%);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.jb-lightbox .jb-lb-caption::-webkit-scrollbar { width: 6px; }
.jb-lightbox .jb-lb-caption::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; }
.jb-lightbox.is-open .jb-lb-caption {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease 0.65s, transform 0.4s ease 0.65s;
}
/* Pendant pinch zoom : désactiver pan-y pour permettre le zoom natif-like custom */
.jb-lightbox.is-pinching { touch-action: none; }
.jb-lb-track.is-pinching .jb-lb-slide-curr img { transition: none !important; }

/* === Pins Leaflet carte /realisations/ : différenciation pro (or-bois) / particulier (vert) === */
.leaflet-marker-icon.jb-marker {
    background: transparent !important;
    border: 0 !important;
}
.jb-marker .pin-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--jb-vert);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    transition: transform 0.15s ease;
    transform-origin: center center;
    /* Default : VISIBLE (état final naturel). L'invisibilité avant animation est
       gérée par .jb4wood-realisations-map:not(.pins-visible) ci-dessous → ainsi,
       même si `forwards` ne tient pas (override par animation-delay inline),
       l'état final naturel reste visible. */
}
/* AVANT que .pins-visible soit ajouté : pins invisibles */
.jb4wood-realisations-map:not(.pins-visible) .jb-marker .pin-circle {
    transform: scale(0) translateY(-40px);
    opacity: 0;
}
/* Au moment de l'ajout de .pins-visible : animation drop+bounce.
   Props séparées (pas shorthand) pour éviter que l'inline animation-delay
   ne reset les autres props. */
.jb4wood-realisations-map.pins-visible .jb-marker .pin-circle {
    animation-name: jb-pin-drop;
    animation-duration: 0.75s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-fill-mode: backwards;       /* applique l'état du 0% AVANT le delay */
}
@keyframes jb-pin-drop {
    0%   { transform: scale(0) translateY(-40px); opacity: 0; }
    55%  { transform: scale(1.25) translateY(0); opacity: 1; }
    75%  { transform: scale(0.92);              opacity: 1; }
    100% { transform: scale(1);                 opacity: 1; }
}

/* === Pin ATELIER : apparaît EN DERNIER avec rebond plus marqué === */
.jb-marker-atelier { background: transparent !important; border: 0 !important; }
.jb-atelier-img {
    width: 44px;
    height: 60px;
    display: block;
    transform-origin: 50% 100%;       /* pivot en bas (point du pin) */
    filter: drop-shadow(0 4px 8px rgba(20, 84, 74, 0.35));
}
/* Avant déclenchement : invisible (state initial = match keyframe 0%) */
.jb4wood-realisations-map:not(.pins-visible) .jb-atelier-img {
    opacity: 0;
    transform: translateY(-140px) scale(0) rotate(-12deg);
}
/* Au déclenchement : descente fluide + mini rebond final (delay = après les autres pins) */
.jb4wood-realisations-map.pins-visible .jb-atelier-img {
    animation-name: jb-atelier-drop;
    animation-duration: 0.95s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: backwards;
    animation-delay: 2.3s;
}
@keyframes jb-atelier-drop {
    0%   { transform: translateY(-100px) scale(1); opacity: 0; }
    65%  { transform: translateY(0)      scale(1); opacity: 1; }
    82%  { transform: translateY(-6px)   scale(1); opacity: 1; }   /* mini rebond final */
    100% { transform: translateY(0)      scale(1); opacity: 1; }
}
.jb-marker-pro .pin-circle {
    background: var(--jb-or);
    border: 3px solid #fff;
    box-shadow: 0 3px 10px rgba(124,97,69,0.6), 0 0 0 2px rgba(124,97,69,0.25);
    cursor: pointer;
    position: relative;             /* pour positionner le halo ::after */
    overflow: visible;
}
.jb-marker-pro:hover .pin-circle { transform: scale(1.15); }
.jb-marker-particulier .pin-circle { cursor: default; }
.jb-marker-particulier .pin-circle:hover { transform: scale(1.05); }

/* === Scintillement pin pro : halo or qui pulse en boucle pour attirer le clic === */
.jb-marker-pro .pin-circle::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255,213,140,0.65) 0%, rgba(124,97,69,0.2) 45%, rgba(124,97,69,0) 70%);
    opacity: 0;
    z-index: -1;
}
/* Halo activé seulement après l'animation drop initiale (pins-visible)
   et seulement quand l'utilisateur n'interagit pas (au hover, halo se calme) */
.jb4wood-realisations-map.pins-visible .jb-marker-pro .pin-circle::after {
    animation: jb-pro-sparkle 2.8s ease-in-out 3.2s infinite;
}
.jb4wood-realisations-map.pins-visible .jb-marker-pro:hover .pin-circle::after {
    animation-play-state: paused;
    opacity: 1;
}
@keyframes jb-pro-sparkle {
    0%   { opacity: 0;    transform: scale(0.8); }
    25%  { opacity: 0.95; transform: scale(1.4); }
    40%  { opacity: 0.4;  transform: scale(1.15); }
    55%  { opacity: 0.85; transform: scale(1.35); }
    70%  { opacity: 0.15; transform: scale(1.05); }
    100% { opacity: 0;    transform: scale(0.8); }
}
/* Surbrillance subtile du pin : ::before en glow blanc qui pulse en boucle (post-drop) */
.jb-marker-pro .pin-circle::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%);
    opacity: 0.4;
    z-index: 1;
}
.jb4wood-realisations-map.pins-visible .jb-marker-pro .pin-circle::before {
    animation: jb-pro-glow 2.8s ease-in-out 3.2s infinite;
}
@keyframes jb-pro-glow {
    0%, 100% { opacity: 0.4; }
    25%, 55% { opacity: 1; }
    40%      { opacity: 0.55; }
    70%      { opacity: 0.3; }
}

/* Popup pin pro : bouton "Voir plus" or-bois */
.jb-pro-popup { text-align: center; padding: 4px 2px; min-width: 180px; }
.jb-pro-popup strong { display: block; font-family: 'Signika','Arial Black',sans-serif; color: var(--jb-vert); font-size: 1.05rem; margin-bottom: 4px; }
.jb-pro-popup small { color: #555; font-size: 0.88rem; display: block; margin-bottom: 10px; }
.jb-pro-popup-btn {
    display: inline-block;
    padding: 8px 16px;
    background: var(--jb-or);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 2px 6px rgba(124,97,69,0.35);
    transition: background 0.2s ease, transform 0.2s ease;
}
.jb-pro-popup-btn:hover {
    background: var(--jb-vert);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* Légende carte : spans visuels rond or + rond vert */
.jb-map-legend { color:#474544; font-size:.95rem; margin: 12px 0 1.5rem; line-height: 1.8; }
.jb-map-legend em { font-style: italic; color: #6a6a6a; }
.jb-legend-pin {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    vertical-align: middle;
    margin-right: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.jb-legend-pin.pro { background: var(--jb-or); box-shadow: 0 1px 4px rgba(124,97,69,0.5); }
.jb-legend-pin.part { background: var(--jb-vert); }

/* Filtres galerie /realisations/ — pills sous le titre, avec icône + bouton "Tout" actif */
.jb-realisations-filters-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 12px auto 30px;
    max-width: 900px;
    padding: 0 12px;
}
.jb-realisations-filters-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--jb-or, #7C6145);
    font-family: 'Signika', 'Arial Black', sans-serif;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}
.jb-realisations-filters-icon svg { width: 18px; height: 18px; }
.jb-realisations-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.jb-realisations-filters a,
.jb-realisations-filters span {
    display: inline-block;
    padding: 8px 14px;
    background: rgba(255,255,255,0.7);
    color: var(--jb-vert, #14544A);
    font-family: 'Signika', 'Arial Black', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none !important;
    border: 1.5px solid var(--jb-vert, #14544A);
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1.2;
}
.jb-realisations-filters a:hover {
    background: var(--jb-vert, #14544A);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(20,84,74,0.2);
}
.jb-realisations-filters .active,
.jb-realisations-filters span.active {
    background: var(--jb-vert, #14544A);
    color: #fff;
    border-color: var(--jb-vert, #14544A);
    cursor: default;
}
.jb-realisations-filters a.signature {
    background: var(--jb-or, #7C6145);
    color: #fff;
    border-color: var(--jb-or, #7C6145);
}
.jb-realisations-filters a.signature:hover {
    background: var(--jb-vert, #14544A);
    border-color: var(--jb-vert, #14544A);
}
@media (max-width: 600px) {
    .jb-realisations-filters a, .jb-realisations-filters span { padding: 7px 12px; font-size: 0.82rem; }
    .jb-realisations-filters { gap: 7px; }
}

/* Réduire l'espace avant/après contenu sur /realisations/ */
body.page-id-11 .entry-content > p:first-of-type {
    margin-top: 0 !important;
    text-align: justify;
    text-align-last: center;
    hyphens: none;
}

/* === POLICE STANDARD pour textes posés directement sur le fond texturé béton ====
   Tous les <p> qui sont enfants DIRECTS de .entry-content (= pas enveloppés dans
   un <section> qui aurait sa propre taille, pas dans une card/glass). Reprise EXACTE
   du réglage de .jb4wood-accroche .sous-titre (home).
   Préfixe body pour battre la règle .entry-content p plus loin dans le fichier
   qui force font-size:1.05rem (même spécificité = ordre source → on perd).
   `body .entry-content > p` = (0,1,2) bat `.entry-content p` = (0,1,1). */
body .entry-content > p {
    font-family: var(--jb-serif);
    font-size: clamp(1.2rem, 2.2vw, 1.45rem);
    line-height: 1.75;
    color: var(--marron-fonce);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    hyphens: none;
}
body .entry-content > p strong,
body .entry-content > p .emphase { font-weight: 600; color: var(--jb-vert); }
/* H1 contenu /realisations/ : centrer le BLOC (pas que le texte) comme l'intro <p> */
body.page-id-11 .entry-content > h1 {
    max-width: 980px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}
body.page-id-11 .jb4wood-realisations-galerie { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* Cacher Astra entry-title sur les pages services (évite double H1 avec mon H1 d'intro) */
body.page-id-6 .entry-header,
body.page-id-7 .entry-header,
body.page-id-8 .entry-header,
body.page-id-9 .entry-header,
body.page-id-242 .entry-header,
body.page-id-284 .entry-header,
body.page-id-6 .ast-archive-description,
body.page-id-7 .ast-archive-description,
body.page-id-8 .ast-archive-description,
body.page-id-9 .ast-archive-description,
body.page-id-242 .ast-archive-description,
body.page-id-284 .ast-archive-description { display: none !important; }

/* CTA service pages : seulement bouton "Demander un devis" (le tel est déjà dans le footer ME CONTACTER) */
body.page-id-6 .jb4wood-gravure-cta .btn-secondary,
body.page-id-7 .jb4wood-gravure-cta .btn-secondary,
body.page-id-8 .jb4wood-gravure-cta .btn-secondary,
body.page-id-9 .jb4wood-gravure-cta .btn-secondary,
body.page-id-284 .jb4wood-gravure-cta .btn-secondary { display: none !important; }

/* Note : l'ancien système :not(.is-expanded) + mask-image + max-height a été
   remplacé le 13/05/2026 par le système .has-voir-plus + .is-hidden piloté
   par le JS masonry (voir bloc CSS principal de la galerie + script id
   "jb-gallery-js"). Plus de doublon, plus de conflit. */
.jb4wood-realisations-galerie { position: relative; }
.jb-voir-plus-btn:hover { background: var(--jb-vert, #14544A); }

/* Leaflet layers control (toggle Map/Satellite) — haut-droit, petit */
.leaflet-top.leaflet-right .leaflet-control-layers {
    margin: 12px 12px 0 0;
    border-radius: 6px;
    border: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.22);
    background: #fff;
    overflow: hidden;
}
.leaflet-control-layers-toggle { background-image: none !important; width: auto !important; height: auto !important; }
.leaflet-control-layers-expanded { padding: 0; background: #fff; }
.leaflet-control-layers-base { display: flex; margin: 0; padding: 0; background: #fff; }
.leaflet-control-layers-base label {
    margin: 0;
    padding: 5px 11px;
    cursor: pointer;
    /* #F1 policeStandardTexte (Constantia) — uniformisation typo prod (14/05/26) */
    font-family: var(--jb-serif);
    font-size: 11.5px;
    font-weight: 600;
    color: #5f6368;
    transition: background 0.15s ease;
}
.leaflet-control-layers-base label:has(input:checked) { color: #202124; background: #f1f3f4; }
.leaflet-control-layers-base label:hover { background: #f8f9fa; }
.leaflet-control-layers-base input { display: none; }
.leaflet-control-layers-separator { display: none; }

/* Attribution Leaflet/OSM : ultra-discrète (gris très pâle, sans drapeau Leaflet) */
.leaflet-control-attribution {
    background: rgba(255,255,255,0.25) !important;
    backdrop-filter: var(--jb-blur-2);
    -webkit-backdrop-filter: var(--jb-blur-2);
    font-size: 7.5px !important;
    color: rgba(73, 56, 40, 0.30) !important;
    padding: 1px 4px !important;
    border-radius: 3px 0 0 0;
    line-height: 1;
}
.leaflet-control-attribution a { color: rgba(73, 56, 40, 0.40) !important; }
/* Cache le drapeau Ukraine ajouté par défaut par Leaflet (prefix) */
.leaflet-attribution-flag { display: none !important; }

/* Légende carte : indication "2 doigts" cachée sur desktop (≥769px) */
@media (min-width: 769px) { .jb-touch-hint { display: none !important; } }

/* Plugin Leaflet.GestureHandling : overlay "2 doigts" stylisé en or-bois (charte) */
.leaflet-gesture-handling-touch-warning::after,
.leaflet-gesture-handling-scroll-warning::after {
    background: rgba(124, 97, 69, 0.92) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-family: 'Signika', 'Arial Black', sans-serif !important;
    font-size: 1.05rem !important;
    padding: 14px 22px !important;
    box-shadow: 0 6px 20px rgba(73, 56, 40, 0.3) !important;
}

/* Fix z-index : menu burger Astra DOIT passer au-dessus de la carte Leaflet (markers ~600, popups ~700) */
.ast-mobile-popup-drawer,
.ast-mobile-header-wrap,
#masthead,
.main-header-bar-wrap {
    z-index: 9999 !important;
}
.leaflet-container, .leaflet-pane, .leaflet-control { z-index: auto !important; }
.leaflet-pane { z-index: 400 !important; }
.leaflet-overlay-pane { z-index: 410 !important; }
.leaflet-marker-pane { z-index: 600 !important; }
.leaflet-popup-pane { z-index: 700 !important; }
.leaflet-control { z-index: 800 !important; }
.jb-lightbox button {
    position: absolute;
    background: transparent;
    color: #fff;
    border: 0;
    cursor: pointer;
    /* #F1 policeStandardTexte (Constantia) — uniformisation typo prod (14/05/26) */
    font-family: var(--jb-serif);
    line-height: 1;
    padding: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 4px rgba(0,0,0,0.6);
    opacity: 0;
    z-index: 2;
    transition: opacity 0.3s ease;
}
.jb-lightbox button:hover,
.jb-lightbox button:focus { opacity: 1 !important; transform: scale(1.1); outline: none; }
/* Apparition séquencée à l'ouverture : close → prev/next → caption */
.jb-lightbox.is-open .jb-lb-close { opacity: 0.9; transition: opacity 0.3s ease 0.45s; }
.jb-lightbox.is-open .jb-lb-prev,
.jb-lightbox.is-open .jb-lb-next { opacity: 0.9; transition: opacity 0.3s ease 0.55s; }
.jb-lightbox .jb-lb-close {
    top: 18px; right: 18px;
    width: 48px; height: 48px;
    font-size: 38px;
    font-weight: 300;
}
.jb-lightbox .jb-lb-prev,
.jb-lightbox .jb-lb-next {
    top: 50%;
    transform: translateY(-50%);
    width: 56px; height: 56px;
    font-size: 56px;
    font-weight: 200;
}
.jb-lightbox .jb-lb-prev:hover,
.jb-lightbox .jb-lb-next:hover { transform: translateY(-50%) scale(1.1); }
.jb-lightbox .jb-lb-prev { left: 8px; }
.jb-lightbox .jb-lb-next { right: 8px; }
@media (max-width: 600px) {
    .jb-lb-track { height: calc(100vh - 100px); height: calc(100dvh - 100px); }
    .jb-lb-slide { padding: 12px 6px; }
    .jb-lightbox .jb-lb-prev, .jb-lightbox .jb-lb-next { font-size: 44px; width: 44px; height: 44px; }
    .jb-lightbox .jb-lb-close { font-size: 32px; width: 40px; height: 40px; top: 12px; right: 12px; }
    .jb-lightbox .jb-lb-caption { font-size: 1.05rem; padding: 8px 24px; height: 90px; }
}
body.jb-lb-open { overflow: hidden; }

/* ============================================================
 * Pages SEO local : /ebeniste-{ville}/
 * Layout vertical avec sections cards, cohérence charte JB4WOOD
 * ============================================================ */
.jb4wood-seo-local {
    max-width: 1100px;
    margin: 1.5rem auto 2rem;
    padding: 0 1.25rem;
    color: #2a2520;
    font-family: var(--jb-serif);
}
.jb4wood-seo-local h1,
.jb4wood-seo-local h2,
.jb4wood-seo-local h3 {
    font-family: 'Signika','Arial Black',Impact,sans-serif !important;
    color: var(--jb-vert) !important;
    line-height: 1.2;
}
.jb4wood-seo-local h1 {
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    margin: 0 0 0.7rem;
}
.jb4wood-seo-local .seo-local-hero {
    background: rgba(255,255,255,0.62);
    border-left: 4px solid var(--jb-or);
    border-radius: 14px;
    padding: clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2rem);
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 14px rgba(73,56,40,0.06);
}
.jb4wood-seo-local .seo-local-lead {
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 0.9rem;
}
.jb4wood-seo-local .seo-local-distance {
    background: rgba(124,97,69,0.13);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 1.1rem;
    font-size: 0.95rem;
    color: var(--marron-fonce);
}
.jb4wood-seo-local .seo-local-cta-wrap {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.jb4wood-seo-local .seo-local-cta-btn {
    display: inline-block;
    background: var(--jb-vert);
    color: #fff !important;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: 'Signika','Arial Black',Impact,sans-serif;
    font-size: 1rem;
    letter-spacing: 0.02em;
    transition: background 220ms ease, transform 220ms ease;
}
.jb4wood-seo-local .seo-local-cta-btn:hover,
.jb4wood-seo-local .seo-local-cta-btn:focus-visible {
    background: var(--jb-or);
    transform: translateY(-1px);
}
.jb4wood-seo-local .seo-local-cta-btn-alt {
    background: transparent;
    color: var(--jb-vert) !important;
    border: 2px solid var(--jb-vert);
    padding: 10px 22px;
}
.jb4wood-seo-local .seo-local-cta-btn-alt:hover,
.jb4wood-seo-local .seo-local-cta-btn-alt:focus-visible {
    background: var(--jb-vert);
    color: #fff !important;
}
.jb4wood-seo-local .seo-local-block {
    background: rgba(255,255,255,0.55);
    border-radius: 14px;
    padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.1rem, 2.5vw, 1.6rem);
    margin-bottom: 1.4rem;
    box-shadow: 0 2px 8px rgba(73,56,40,0.05);
}
.jb4wood-seo-local .seo-local-block h2 {
    font-size: clamp(1.25rem, 2.4vw, 1.55rem);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(124,97,69,0.30);
}
.jb4wood-seo-local p {
    line-height: 1.65;
    margin: 0 0 0.85rem;
}
.jb4wood-seo-local .seo-local-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.jb4wood-seo-local .seo-local-services-grid article {
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(73,56,40,0.10);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    transition: transform 220ms ease, box-shadow 220ms ease;
}
.jb4wood-seo-local .seo-local-services-grid article:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(73,56,40,0.10);
}
.jb4wood-seo-local .seo-local-services-grid h3 {
    font-size: 1.05rem;
    margin: 0 0 0.5rem;
}
.jb4wood-seo-local .seo-local-services-grid p {
    font-size: 0.94rem;
    margin-bottom: 0.7rem;
}
.jb4wood-seo-local .seo-local-link {
    color: var(--jb-or) !important;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease;
}
.jb4wood-seo-local .seo-local-link:hover,
.jb4wood-seo-local .seo-local-link:focus-visible {
    border-bottom-color: var(--jb-or);
}
.jb4wood-seo-local .seo-local-link-strong {
    font-size: 1rem;
    font-family: 'Signika','Arial Black',Impact,sans-serif;
    color: var(--jb-vert) !important;
}
.jb4wood-seo-local .seo-local-realisations-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}
.jb4wood-seo-local .seo-local-realisations-list li {
    background: rgba(255,255,255,0.72);
    border-left: 3px solid var(--jb-or);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 8px;
    line-height: 1.5;
    font-size: 0.96rem;
}
.jb4wood-seo-local .seo-local-faq-item {
    border-top: 1px solid rgba(124,97,69,0.25);
    padding: 1rem 0 0.5rem;
}
.jb4wood-seo-local .seo-local-faq-item:first-of-type {
    border-top: 0;
    padding-top: 0;
}
.jb4wood-seo-local .seo-local-faq-item h3 {
    font-size: 1.02rem;
    margin: 0 0 0.5rem;
    color: var(--marron-fonce) !important;
}
.jb4wood-seo-local .seo-local-faq-item p {
    margin: 0 0 0.4rem;
    font-size: 0.96rem;
}
.jb4wood-seo-local .seo-local-cross {
    text-align: center;
    background: rgba(20,84,74,0.06);
}
.jb4wood-seo-local .seo-local-cross-links {
    font-size: 1.05rem;
    margin: 0;
}
.jb4wood-seo-local .seo-local-cross-links a {
    color: var(--jb-vert) !important;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    padding: 0 4px;
    transition: border-color 200ms ease, color 200ms ease;
}
.jb4wood-seo-local .seo-local-cross-links a:hover,
.jb4wood-seo-local .seo-local-cross-links a:focus-visible {
    color: var(--jb-or) !important;
    border-bottom-color: var(--jb-or);
}
.jb4wood-seo-local .seo-local-final-cta {
    text-align: center;
    background: linear-gradient(135deg, rgba(20,84,74,0.10) 0%, rgba(124,97,69,0.10) 100%);
}
.jb4wood-seo-local .seo-local-final-cta .seo-local-cta-wrap {
    justify-content: center;
}
@media (max-width: 600px) {
    .jb4wood-seo-local { padding: 0 0.8rem; }
    .jb4wood-seo-local .seo-local-services-grid { grid-template-columns: 1fr; }
    .jb4wood-seo-local .seo-local-final-cta .seo-local-cta-wrap { flex-direction: column; }
    .jb4wood-seo-local .seo-local-cta-btn { width: 100%; text-align: center; }
}

/* Bandeau zones d'intervention sur /realisations/ : sous le bouton "Voir plus" */
.jb4wood-realisations-zones {
    box-sizing: border-box;
    width: fit-content;
    max-width: 760px;
    margin: 2.4rem auto 0;
    padding: 1.6rem 138px 1.6rem 1.9rem;
    background: rgba(255,255,255,0.55);
    border-radius: 18px;
    border: 1px solid rgba(124,97,69,0.45);
    text-align: left;
    position: relative;
    overflow: visible;
    /* meme ombre que la carte 3D/RA (.jb-ar-teaser-card) */
    box-shadow: 0 10px 30px rgba(20,84,74,0.10), 0 2px 8px rgba(73,56,40,0.06);
}
body.page-id-11 .jb4wood-realisations-zones { max-width: 760px !important; }
/* Menu desktop : compaction font "1 ligne" NEUTRALISEE le 2026-05-19
   (JB-MENU-2-LIGNES-HARDENED). Le menu est desormais sur 2 lignes (clamp fluide
   #masthead, voir bloc ~L963) ; ces @media rapetissaient la police pour forcer
   1 ligne et contredisaient les 2 lignes. Selecteurs rendus inertes (prefixe
   '.jb-disabled-1ligne-noop' jamais present dans le DOM) — reversible, bornes
   @media conservees pour historique. */
@media (min-width: 1024px) and (max-width: 1380px) {
    .jb-disabled-1ligne-noop .ast-primary-header-bar .menu-item > a {
        font-size: 0.82rem !important;
    }
}
@media (min-width: 1024px) and (max-width: 1160px) {
    .jb-disabled-1ligne-noop .ast-primary-header-bar .menu-item > a {
        font-size: 0.72rem !important;
    }
}
/* Camion : oscillation douce avance/recule (transform only, GPU). */
@keyframes jb-van-roll {
    0%, 100% { transform: translateY(-50%) translateX(-5px); }
    50%      { transform: translateY(-50%) translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
    .jb4wood-realisations-zones::before { animation: none !important; }
}
/* Camion JB (theme "je me deplace") : a droite du texte, depasse + ombre */
.jb4wood-realisations-zones::before {
    content: '';
    position: absolute;
    right: -26px;
    top: 50%;
    transform: translateY(-50%);
    animation: jb-van-roll 3.4s ease-in-out infinite;
    width: 150px;
    height: 82px;
    background: url("data:image/svg+xml,%3Csvg%20width%3D%27160%27%20height%3D%2788%27%20viewBox%3D%270%200%20160%2088%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20style%3D%27fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linecap%3Around%3B%27%3E%3Cpath%20d%3D%27M0%2C68.123l0%2C-56c0%2C-5.333%202.667%2C-8%208%2C-8l104%2C0c4%2C0%207.333%2C1.667%2010%2C5l18%2C23l14%2C3c4%2C0.667%206%2C3%206%2C7l0%2C26c0%2C4%20-2%2C6%20-6%2C6l-148%2C0c-4%2C0%20-6%2C-2%20-6%2C-6Z%27%20style%3D%27fill%3A%237C6145%3Bfill-rule%3Anonzero%3B%27%2F%3E%3Cpath%20d%3D%27M10%2C4.123l100%2C0%27%20style%3D%27fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3A%23c9a684%3Bstroke-width%3A2px%3B%27%2F%3E%3Cpath%20d%3D%27M8%2C57.701l136%2C0%27%20style%3D%27fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3A%238a6f52%3Bstroke-width%3A2px%3B%27%2F%3E%3Cpath%20d%3D%27M96.748%2C6.123l-0%2C61.5%27%20style%3D%27fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3A%238a6f52%3Bstroke-width%3A1.4px%3B%27%2F%3E%3Cpath%20d%3D%27M100.9%2C10.62c-0%2C-1.09%200.883%2C-1.974%201.973%2C-1.974c2.687%2C0%207.467%2C0%2010.154%2C0c1.089%2C0%201.973%2C0.884%201.973%2C1.974c0%2C4.001%200%2C13.028%200%2C17.03c0%2C1.09%20-0.884%2C1.973%20-1.973%2C1.973c-2.687%2C0%20-7.467%2C0%20-10.154%2C0c-1.09%2C0%20-1.973%2C-0.883%20-1.973%2C-1.973c-0%2C-4.002%20-0%2C-13.029%20-0%2C-17.03Z%27%20style%3D%27fill%3A%23d8e3e6%3Bfill-rule%3Anonzero%3B%27%2F%3E%3Cpath%20d%3D%27M119.152%2C9.146c-0%2C-0.214%200.136%2C-0.404%200.339%2C-0.473c0.202%2C-0.069%200.427%2C-0.001%200.557%2C0.168c3.025%2C3.93%2012.815%2C16.646%2015.379%2C19.977c0.116%2C0.151%200.137%2C0.355%200.053%2C0.526c-0.085%2C0.171%20-0.258%2C0.279%20-0.449%2C0.279c-2.726%2C0%20-10.239%2C0%20-13.867%2C0c-1.111%2C0%20-2.012%2C-0.901%20-2.012%2C-2.012c-0%2C-4.37%20-0%2C-14.64%20-0%2C-18.465Z%27%20style%3D%27fill%3A%23d8e3e6%3Bfill-rule%3Anonzero%3B%27%2F%3E%3Cpath%20d%3D%27M158.929%2C41.983l-0%2C9.471c-0%2C0.552%20-0.448%2C1%20-1%2C1l-4.597%2C0c-0.551%2C0%20-1%2C-0.448%20-1%2C-1l0%2C-9.471c0%2C-0.552%200.449%2C-1%201%2C-1l4.597%2C-0c0.552%2C-0%201%2C0.448%201%2C1Z%27%20style%3D%27fill%3A%23f6efe0%3B%27%2F%3E%3Cpath%20d%3D%27M160%2C63.123l0%2C5c0%2C0.552%20-0.448%2C1%20-1%2C1l-14%2C0c-0.552%2C0%20-1%2C-0.448%20-1%2C-1l0%2C-5c0%2C-0.552%200.448%2C-1%201%2C-1l14%2C0c0.552%2C0%201%2C0.448%201%2C1Z%27%20style%3D%27fill%3A%238a6f52%3B%27%2F%3E%3Cpath%20d%3D%27M55.42%2C27.428l11.512%2C8.855l-15.939%2C12.84l-0%2C-37.192l15.939%2C12.84l-11.512%2C8.856%27%20style%3D%27fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3A%23fff%3Bstroke-width%3A2px%3Bstroke-linejoin%3Around%3B%27%2F%3E%3Cpath%20d%3D%27M31.068%2C36.283l15.939%2C12.84l0%2C-37.192l-15.939%2C12.84%27%20style%3D%27fill%3Anone%3Bfill-rule%3Anonzero%3Bstroke%3A%23fff%3Bstroke-width%3A2px%3Bstroke-linejoin%3Around%3B%27%2F%3E%3Ccircle%20cx%3D%2736%27%20cy%3D%2774.123%27%20r%3D%2713%27%20style%3D%27fill%3A%232b241d%3B%27%2F%3E%3Ccircle%20cx%3D%2736%27%20cy%3D%2774.123%27%20r%3D%275%27%20style%3D%27fill%3A%238a6f52%3B%27%2F%3E%3Ccircle%20cx%3D%27128%27%20cy%3D%2774.123%27%20r%3D%2713%27%20style%3D%27fill%3A%232b241d%3B%27%2F%3E%3Ccircle%20cx%3D%27128%27%20cy%3D%2774.123%27%20r%3D%275%27%20style%3D%27fill%3A%238a6f52%3B%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
    filter: drop-shadow(0 7px 6px rgba(0,0,0,0.30));
    pointer-events: none;
    z-index: 3;
}
/* Accent : epingle de carte or-bois en filigrane (coin bas-droite),
   theme zones d'intervention. Remplace la barre gauche. */
/* Blur : desktop only (>=1024px) — sur mobile, backdrop-filter au-dessus
   du beton fixed = mort GPU (interdit CLAUDE.md). Idem carte 3D/RA. */
@media (min-width: 1024px) {
    .jb4wood-realisations-zones {
        -webkit-backdrop-filter: var(--jb-blur-2);
        backdrop-filter: var(--jb-blur-2);
    }
}
.jb4wood-realisations-zones h3 {
    font-family: 'Signika','Arial Black',Impact,sans-serif !important;
    color: var(--jb-vert) !important;
    font-size: 1.1rem;
    margin: 0 0 0.6rem;
    white-space: nowrap;
}
.jb4wood-realisations-zones p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.8;
}
.jb4wood-realisations-zones a {
    display: inline-block;
    color: var(--jb-vert) !important;
    text-decoration: none;
    font-weight: 600;
    margin: 0 10px;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 200ms ease, color 200ms ease;
}
.jb4wood-realisations-zones a:hover,
.jb4wood-realisations-zones a:focus-visible {
    color: var(--jb-or) !important;
    border-bottom-color: var(--jb-or);
}

/* ============================================================
 * JB-MENU-2L-V3-FULLROW-922 (2026-05-19) — CORRECTIF DETERMINISTE MENU 2 LIGNES
 * ------------------------------------------------------------
 * CAUSE REELLE (prouvee) : le header est un CSS Grid Astra
 *   .ast-builder-grid-row{display:grid;grid-template-columns:auto auto}
 * colonne gauche = logo JS (.jb-mark "JB4WOOD" 4.5rem ~330px),
 * colonne droite = la nav. Le parent direct du <ul#ast-hf-menu-1>
 * est .main-navigation.ast-inline-flex (display:inline-flex, shrink
 * to content). L'ancien bloc HARDENED ne posait qu'un max-width
 * (borne SUP, n'elargit pas) en supposant 96vw : faux, la piste
 * grille droite ne fait que ~550px a ~1145px => la 2e rangee
 * (4 items ~566px) deborde et passe sur une 3e ligne.
 * 2e defaut : bloc gate @media>=1024px alors que le menu DESKTOP
 * Astra apparait des >=922px (#ast-desktop-header display:none a
 * max-width:921.9px) => 922-1023px = desktop SANS regle 2 lignes.
 *
 * FIX DETERMINISTE :
 *  (1) breakpoint = 922px (vrai seuil desktop Astra ; <922 = burger,
 *      non touche, hors @media) ;
 *  (2) on sort la nav de la contrainte de piste grille : la section
 *      droite + la nav + .main-navigation prennent 100% de la largeur
 *      d'en-tete et le <ul> n'est plus inline-flex shrink mais
 *      width:100% (flex row, wrap). La largeur dispo du menu = pleine
 *      largeur d'en-tete (~ min(96vw,1200px)), JAMAIS la piste ~550px ;
 *  (3) coupure 2 lignes garantie par l'item 307 en flex:0 0 100%
 *      (rendu, pas display:none) entre L1(308/309/358) et
 *      L2(311/312/1766/313) ;
 *  (4) chaque rangee = 3 ou 4 items, largeur de groupe <= ~600px
 *      (police clamp bornee), pleine largeur dispo >= ~ min(96vw)-?
 *      => a 922/1024/1145/1280/1440/1600px chaque groupe tient sur
 *      1 ligne, le break force la 2e : EXACTEMENT 2 lignes, jamais 3.
 * Specificite : #masthead (1 id) + classes + !important, et EMIS EN
 * DERNIER du bloc prio 100 => bat overrides-mu (prio 99) ET l'ancien
 * HARDENED @1024 (meme specificite, ce bloc est plus loin = gagne).
 * ============================================================ */
@media (min-width: 922px) {
    /* (2) La section droite + la nav prennent toute la largeur d'en-tete,
       sous le logo : la nav n'est plus contrainte par la piste grille. */
    #masthead #ast-desktop-header .site-header-primary-section-right,
    #masthead #ast-desktop-header .ast-builder-menu-1,
    #masthead #ast-desktop-header .ast-main-header-bar-alignment,
    #masthead #ast-desktop-header .main-header-bar-navigation,
    #masthead #ast-desktop-header nav#primary-site-navigation-desktop,
    #masthead #ast-desktop-header .main-navigation.ast-inline-flex {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    /* La grille d'en-tete : forcer la nav sur sa PROPRE rangee pleine
       largeur (sinon elle reste dans la piste droite "auto"). */
    #masthead #ast-desktop-header .ast-builder-grid-row {
        grid-template-columns: 100% !important;
        justify-items: center !important;
        row-gap: 6px !important;
    }
    #masthead #ast-desktop-header .site-header-primary-section-left {
        justify-content: center !important;
        width: 100% !important;
    }
    /* (2/3) Le <ul> : flex row wrap, PLEINE largeur dispo (plus de
       inline-flex shrink), centre, max borne a min(96vw,1200px). */
    #masthead .ast-primary-header-bar .main-header-menu,
    #masthead .ast-primary-header-bar .main-navigation ul.main-header-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: min(96vw, 1200px) !important;
        row-gap: 0 !important;
        margin: 0 auto !important;
        white-space: normal !important;
    }
    /* (4) Police bornee : chaque groupe (3/4 items) tient sur 1 ligne
       de 922px (groupe <= ~560px) a 1600px (groupe <= ~700px,
       largeur dispo >= ~880px). */
    #masthead .ast-primary-header-bar .menu-item > a,
    #masthead .ast-primary-header-bar .menu-item > a.menu-link {
        font-size: clamp(0.9rem, 0.45rem + 0.65vw, 1.25rem) !important;
        white-space: nowrap !important;
        padding: 0.4rem 0.55rem !important;
        margin: 0 0.1rem !important;
        letter-spacing: 0.01em !important;
        display: flex !important;
        align-items: center !important;
    }
    /* Ordre visuel (CSS order ; DOM/burger mobile inchanges) :
       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; }
    /* (3) Item 307 (Accueil) = SAUT DE LIGNE flex garanti, RENDU
       (pas display:none : bat le first-child display:none ~L924,
       #masthead = 1 id > 0 id), invisible / non focusable / 0px. */
    #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; }
}


/* ============================================================
 * JB-MENU-2L-V4-WIDEN (2026-05-19) — CORRECTIF MESURE (rendu reel Chrome)
 * ------------------------------------------------------------
 * VERITE TERRAIN (Puppeteer/Chrome 148, qui-suis-je, ?v= neuf) :
 *   chaine d'ancetres du <ul#ast-hf-menu-1> = TOUT en display:flex
 *   (PAS de .ast-builder-grid-row grid : l'hypothese V3 etait fausse,
 *    sa regle grid-template-columns ciblait du vide => inerte).
 *   Chaine reelle : ul -> div.main-navigation(flex 1 1 100%) ->
 *   nav#primary-site-navigation-desktop -> .main-header-bar-navigation
 *   -> .ast-main-header-bar-alignment -> .ast-builder-menu-1.
 *   Mesures ul width / lignes :
 *     921px  : BURGER (menu desktop display:none) -> hors @media OK
 *     923px  : ul 835px -> 2 lignes  (separateur 307 OK)
 *     960px  : ul 872px -> 2 lignes  (separateur 307 OK)
 *     1000px : ul 912px -> 2 lignes  (separateur 307 OK)
 *     1024px : ul 364px -> 4 LIGNES (KO)
 *     1145px : ul 356px -> 4 LIGNES (KO)
 *     1280px : ul 424px -> 4 LIGNES (KO)
 *     1440px : ul 504px -> 4 LIGNES (KO)
 *   CAUSE PROUVEE : a >=1024px le header passe en layout inline
 *   (logo + menu meme rangee) ; .ast-builder-menu-1 se reduit a
 *   ~468-608px (partage la rangee avec le logo), donc .main-navigation
 *   (flex 1 1 100% mais 100% d'un parent etroit) ~400-544px, donc le
 *   <ul> ~356-504px => les 7 items reels (rangees 3 + 4) debordent et
 *   s'empilent sur 4 lignes. Le separateur 307 (flex:0 0 100%) EST
 *   present et fonctionne (prouve a 923-1000px) ; il ne s'agit donc
 *   PAS d'un probleme de separateur mais d'une PISTE TROP ETROITE.
 *
 * FIX DETERMINISTE (reproduit l'etat 960px qui donne deja 2 lignes) :
 *  (1) breakpoint MESURE = 922px (>=922 desktop ; <=921 burger,
 *      hors @media => burger intact, logo/z-index intacts) ;
 *  (2) on elargit la VRAIE chaine d'ancetres flex mesuree a 100%
 *      de la largeur d'en-tete (la nav cesse de partager la rangee
 *      etroite du logo) -> piste menu = pleine largeur, comme a 960px ;
 *  (3) la rangee interne de l'en-tete passe en wrap (la section
 *      droite/nav prend flex-basis:100% et tombe sous le logo) ;
 *      regles posees en flex ET en grid : inertes si l'element absent,
 *      jamais nuisibles ;
 *  (4) le <ul> : flex row wrap, width 100%, MAX-WIDTH 860px (borne
 *      calibree : a 960px l'etat 2-lignes a un ul ~872-912px ;
 *      860px conserve le pli 3+4 en 2 rangees ET empeche tout
 *      retour a 1 ligne sur tres large ecran) ;
 *  (5) separateur 307 reaffirme (flex:0 0 100%, rendu, 0px, invisible,
 *      non focusable) entre L1(308/309/358) et L2(311/312/1766/313)
 *      => EXACTEMENT 2 lignes, jamais 3, jamais 1.
 * Specificite : #masthead (1 id) + classes + !important ; EMIS EN
 * DERNIER du bloc prio 100 (apres V3) => gagne par ordre source a
 * specificite egale, et bat overrides-mu (prio 99) + customizer Astra.
 * ============================================================ */
@media (min-width: 922px) {
    /* (2) Elargir la chaine d'ancetres flex MESUREE a pleine largeur. */
    #masthead .ast-primary-header-bar nav#primary-site-navigation-desktop,
    #masthead .ast-primary-header-bar .main-header-bar-navigation,
    #masthead .ast-primary-header-bar .ast-main-header-bar-alignment,
    #masthead .ast-primary-header-bar .ast-builder-menu-1,
    #masthead .ast-primary-header-bar .ast-builder-menu-1 > .ast-builder-layout-element,
    #masthead .ast-primary-header-bar .main-navigation,
    #masthead .ast-primary-header-bar .main-navigation.ast-inline-flex {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        flex-basis: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
    }
    /* (3) Rangee interne de l'en-tete : wrap -> la nav tombe sous le
       logo et occupe sa propre rangee pleine largeur. Pose en flex ET
       en grid (inerte si l'element / le mode est absent). */
    #masthead .ast-primary-header-bar .site-primary-header-wrap,
    #masthead .ast-primary-header-bar .ast-builder-grid-row,
    #masthead .ast-primary-header-bar .ast-builder-grid-row-container-inner,
    #masthead .ast-primary-header-bar .site-header-primary-section-right {
        flex-wrap: wrap !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        justify-content: center !important;
        row-gap: 4px !important;
    }
    #masthead .ast-primary-header-bar .site-header-primary-section-right {
        flex: 1 1 100% !important;
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
    }
    /* (4) Le <ul> : flex row wrap, pleine largeur, MAX 860px (borne
       qui garantit le pli 3+4 = 2 lignes, jamais 1, jamais 3). */
    #masthead .ast-primary-header-bar .main-header-menu,
    #masthead .ast-primary-header-bar .main-navigation ul.main-header-menu,
    #masthead .ast-primary-header-bar ul#ast-hf-menu-1 {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 860px !important;
        row-gap: 0 !important;
        margin: 0 auto !important;
        white-space: normal !important;
    }
    /* Police bornee : chaque groupe (3 / 4 items) tient 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.9rem, 0.5rem + 0.55vw, 1.2rem) !important;
        white-space: nowrap !important;
        padding: 0.4rem 0.55rem !important;
        margin: 0 0.1rem !important;
        letter-spacing: 0.01em !important;
        display: flex !important;
        align-items: center !important;
    }
    /* Ordre visuel (CSS order ; DOM/burger mobile inchanges) :
       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; }
    /* (5) Item 307 (Accueil) = SAUT DE LIGNE flex garanti, RENDU
       (pas display:none : bat le first-child display:none ~L924),
       invisible / non focusable / 0px. */
    #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; }
}



/* ============================================================
 * JB-MENU-2L-V6-GRID (2026-05-19) — REMPLACEMENT ROBUSTE PAR CSS GRID
 *   (iteration 2 : + layout BESIDE-LOGO repris de V5, car V5 a ete
 *    reverte par un process concurrent ; V4 seul = menu SOUS le logo,
 *    refuse par le client. Mesure Chrome CDP : V6 grid sans le layout
 *    V5 => 2 rangees OK mais beside=false/underLogo=true a 922.)
 * ------------------------------------------------------------
 * PROBLEME flex+separateur (V3/V4/V5) — mesure Chrome CDP balayage
 *   fin 760->2200 (table AVANT du rapport) :
 *     - V5 @1080 : 3 RANGEES (16:2,52:1,88:4) — le client voit 3 lignes
 *       entre 2 paliers de zoom (flex+separateur NON deterministe) ;
 *     - V4 @1200/1280/1366 : menu CENTRE SOUS le logo (beside=false,
 *       underLogo=true) — layout refuse.
 *
 * FIX V6 (robuste PAR CONSTRUCTION) :
 *   (A) LAYOUT BANDE (repris VERBATIM de V5, valide par mesure :
 *       beside-logo, jamais sous le logo) : .ast-builder-grid-row en
 *       flex nowrap space-between ; section logo flex:0 0 auto (jamais
 *       compressee, a gauche) ; section menu flex:1 a droite ; chaine
 *       d'ancetres profonde en blocs 100% (la piste du <ul> = espace a
 *       droite du logo). Annule le "pleine largeur sous logo" V3/V4.
 *   (B) Le <ul> en CSS GRID a colonnes fixes :
 *       display:grid ; grid-template-columns:repeat(4,max-content) ;
 *       grid-auto-flow:row. 7 items reels (separateur li#307 =
 *       display:none) => rangee1 = 4 items, rangee2 = 3 items.
 *       Une 3e rangee exigerait >= 9 items : IMPOSSIBLE (7 items).
 *       => EXACTEMENT 2 rangees a TOUTE largeur. Sur-debordement
 *       eventuel = horizontal (gere par la police clamp), JAMAIS
 *       une 3e ligne. Annule explicitement flex/wrap/separateur
 *       V3/V4/V5 sur CE <ul>.
 *   Ordre lisible gauche->droite, rangee1 puis rangee2, via `order`
 *   (DOM/burger inchanges) :
 *     R1 : 308 Mes realisations | 309 Gravure & Decoupe | 358 FAQ | 311 Clients pros
 *     R2 : 312 Conseils & Blog  | 1766 Qui suis-je       | 313 Contact
 *
 * POLICE CLAMP : calibree par le balayage APRES (cf. rapport). La
 *   rangee la + large = R1 (4 items + 2 icones SVG). Contrainte :
 *   largeur(R1) <= espace a droite du logo - gap - marge (>=20px)
 *   sur tout [922,2200], plancher lisible.
 * Specificite #masthead #ast-desktop-header (2 id) + !important,
 *   EMIS EN DERNIER (apres V3/V4) => gagne par ordre source ET
 *   specificite. <922px hors @media => burger desktop intact.
 * ============================================================ */
@media (min-width: 922px) {
    /* (A) LAYOUT BANDE — repris de V5 (mesure : menu A COTE du logo). */
    /* Rangee d'en-tete : UNE seule ligne (annule V3/V4 wrap sous logo). */
    #masthead #ast-desktop-header .ast-builder-grid-row,
    #masthead #ast-desktop-header .ast-builder-grid-row-has-sides {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        grid-template-columns: none !important;
        column-gap: 24px !important;
        row-gap: 0 !important;
    }
    /* Section LOGO : largeur intrinseque, jamais compressee, a gauche. */
    #masthead #ast-desktop-header .site-header-primary-section-left {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        justify-content: flex-start !important;
        align-self: center !important;
    }
    /* Section MENU : occupe l'espace restant A DROITE du logo,
       reste sur la MEME ligne, aligne son contenu a droite. */
    #masthead #ast-desktop-header .site-header-primary-section-right {
        flex: 1 1 0% !important;
        flex-basis: 0% !important;
        flex-grow: 1 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        align-items: stretch !important;
        align-self: center !important;
    }
    #masthead #ast-desktop-header .site-header-primary-section-right .ast-builder-menu-1 {
        flex: 1 1 100% !important;
        flex-basis: 100% !important;
        flex-grow: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-self: stretch !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Chaine PROFONDE en blocs 100% (piste du <ul> = section droite
       = espace a droite du logo). */
    #masthead #ast-desktop-header .site-header-primary-section-right .ast-builder-menu-1 > .ast-builder-layout-element,
    #masthead #ast-desktop-header .site-header-primary-section-right .ast-main-header-bar-alignment,
    #masthead #ast-desktop-header .site-header-primary-section-right .main-header-bar-navigation,
    #masthead #ast-desktop-header .site-header-primary-section-right nav#primary-site-navigation-desktop,
    #masthead #ast-desktop-header .site-header-primary-section-right .main-navigation,
    #masthead #ast-desktop-header .site-header-primary-section-right .main-navigation.ast-inline-flex {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        flex: none !important;
        float: none !important;
        text-align: right !important;
    }
    /* (B) Le <ul> : CSS GRID 4 colonnes fixes, 2 rangees structurelles.
       Annule EXPLICITEMENT flex/wrap de V3/V4/V5 sur ce <ul>. */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu,
    #masthead #ast-desktop-header .ast-primary-header-bar .main-navigation ul.main-header-menu,
    #masthead #ast-desktop-header .ast-primary-header-bar ul#ast-hf-menu-1 {
        display: grid !important;
        grid-template-columns: repeat(4, max-content) !important;
        grid-auto-flow: row !important;
        grid-auto-rows: min-content !important;
        justify-content: flex-end !important;
        justify-items: center !important;
        align-content: center !important;
        align-items: center !important;
        column-gap: clamp(0.15rem, -0.35rem + 0.95vw, 0.95rem) !important;
        row-gap: 2px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: none !important;
        flex-wrap: nowrap !important;
        flex-basis: auto !important;
        flex-grow: 0 !important;
        white-space: normal !important;
        list-style: none !important;
    }
    /* chaque <li> = cellule de grille (pas de flex-basis 100% V5). */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item {
        display: block !important;
        flex: none !important;
        flex-basis: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }
    /* Separateur li#307 : SUPPRIME (neutralise flex:0 0 100% V5).
       Sans lui : 7 items / 4 colonnes => 2 rangees pile. */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-307 {
        display: none !important;
    }
    /* Ordre lisible R1(4)/R2(3) — DOM & burger inchanges. */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-308  { order: 1 !important; } /* R1 c1 */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-309  { order: 2 !important; } /* R1 c2 */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-358  { order: 3 !important; } /* R1 c3 */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-311  { order: 4 !important; } /* R1 c4 */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-312  { order: 5 !important; } /* R2 c1 */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-1766 { order: 6 !important; } /* R2 c2 */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-313  { order: 7 !important; } /* R2 c3 */
    /* Police FLUIDE calibree mesure (R1 = rangee la + large). */
    #masthead #ast-desktop-header .ast-primary-header-bar .menu-item > a,
    #masthead #ast-desktop-header .ast-primary-header-bar .menu-item > a.menu-link {
        font-size: clamp(0.82rem, 0.42rem + 0.62vw, 1.18rem) !important;
        white-space: nowrap !important;
        padding: 0.30rem 0.42rem !important;
        margin: 0 !important;
        letter-spacing: 0.005em !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1.25 !important;
    }
}

/* ============================================================
 * JB-MENU-2L-V7-GRID-3H4B (2026-05-19) — REPARTITION 3 HAUT / 4 BAS
 * ------------------------------------------------------------
 * Conserve INTEGRALEMENT la robustesse V6 (layout BANDE beside-logo,
 * <ul> en CSS GRID, separateur li#307 display:none, police clamp).
 * NE CHANGE QUE la repartition des items entre les 2 rangees.
 *
 * Demande client : revenir au visuel "d'avant" = ligne du HAUT a
 * 3 items, ligne du BAS a 4 items (bas plus fourni/resserre), avec
 * "Clients pros" (#menu-item-311) sur la ligne du BAS.
 *
 * MECANISME DETERMINISTE (pas d'auto-flow) : on PIN chaque item a
 * une CELLULE EXACTE de la grille via grid-row + grid-column par ID
 * (IDs WP stables). L'auto-placement V6 (base sur `order`) devient
 * sans effet : aucun item n'est jamais place en rangee 3 =>
 * EXACTEMENT 2 rangees PAR CONSTRUCTION, a toute largeur/zoom.
 *   Rangee 1 (3) : 308 Mes realisations | 309 Gravure & Decoupe | 358 FAQ
 *   Rangee 2 (4) : 311 Clients pros | 312 Conseils & Blog | 1766 Qui suis-je | 313 Contact
 * `order` est AUSSI redefini (defensif) pour que tout flux de repli
 * eventuel lise gauche->droite dans le bon ordre. li#307 reste
 * display:none. grid-template-columns:repeat(4,max-content) (4 col
 * = la rangee BAS a 4 items), grid-auto-flow:row, justify-content
 * flex-end (a droite, a cote du logo) : tout repris de V6, inchange.
 *
 * POLICE/GAP : la rangee la + large est desormais la BAS (4 items :
 * 311,312,1766,313 — sans icone SVG). Mesure Chrome CDP balayage
 * [820,2200] : a la clamp V6, somme(311,312,1766,313) = 353px @922
 * -> 518px @2200, soit << espace a droite du logo (579px @922 ->
 * 1305px @2200). L'ancienne rangee haute V6 (4 items DONT 2 icones
 * SVG : 308,309,358,311) etait deja la + large et tenait deja ; la
 * nouvelle rangee bas est PLUS ETROITE => la clamp V6 est conservee
 * VERBATIM (deja validee par mesure, marge >> 20px, plancher
 * lisible). Aucun retrecissement logo. Si une largeur cassait, on
 * resserrerait gap/clamp ici uniquement.
 *
 * Specificite identique a V6 (#masthead #ast-desktop-header, 2 id +
 * !important) MAIS EMIS APRES V6 dans la meme fonction => gagne par
 * ordre source. <922px hors @media => burger desktop V6 intact.
 * ============================================================ */
@media (min-width: 922px) {
    /* Re-affirme la grille V6 (idempotent / robustesse). */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu,
    #masthead #ast-desktop-header .ast-primary-header-bar .main-navigation ul.main-header-menu,
    #masthead #ast-desktop-header .ast-primary-header-bar ul#ast-hf-menu-1 {
        display: grid !important;
        grid-template-columns: repeat(4, max-content) !important;
        grid-template-rows: min-content min-content !important;
        grid-auto-flow: row !important;
        grid-auto-rows: 0 !important;
        justify-content: flex-end !important;
        align-content: center !important;
        flex-wrap: nowrap !important;
    }
    /* Separateur li#307 : reste supprime (sinon il prendrait une cellule). */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-307 {
        display: none !important;
    }
    /* PIN par ID — RANGEE 1 (haut) = 3 items, cellules (1,1)(1,2)(1,3). */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-308 {
        grid-row: 1 !important; grid-column: 1 !important; order: 1 !important; }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-309 {
        grid-row: 1 !important; grid-column: 2 !important; order: 2 !important; }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-358 {
        grid-row: 1 !important; grid-column: 3 !important; order: 3 !important; }
    /* RANGEE 2 (bas) = 4 items, cellules (2,1)(2,2)(2,3)(2,4). */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-311 {
        grid-row: 2 !important; grid-column: 1 !important; order: 4 !important; }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-312 {
        grid-row: 2 !important; grid-column: 2 !important; order: 5 !important; }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-1766 {
        grid-row: 2 !important; grid-column: 3 !important; order: 6 !important; }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-313 {
        grid-row: 2 !important; grid-column: 4 !important; order: 7 !important; }
}

/* ============================================================
 * JB-MENU-PHASE2-EXTEND-600 (2026-05-20) — ETEND MENU 2 LIGNES
 * DESKTOP A LA BANDE 600-921.9px + DEFENSE ANTI-PASTILLES.
 * ------------------------------------------------------------
 * OBJECTIF :
 *   1. < 600px        : burger Astra natif INTACT (rien ici).
 *   2. 600 - 921.9 px : on FORCE l'affichage du menu desktop texte
 *      2 lignes (3 haut / 4 bas hérités V7) et on masque le
 *      header mobile + burger. Astra (par défaut) hide
 *      #ast-desktop-header en @media(max-width:921.9px) et
 *      show #ast-mobile-header @media(max-width:921.9px) ; on
 *      override les deux pour cette bande.
 *   3. >= 922 px      : V7 existant joue déjà ; on n'y touche pas
 *      (mais on étend les règles V7 ici aussi pour qu'elles
 *      s'appliquent dès 600 sans dupliquer le @media).
 *
 * STRATEGIE 600 - 921.9 px :
 *   - Pas de squeeze horizontal : à ces largeurs (logo
 *     ~270-300px), il ne reste pas assez pour mettre le menu
 *     A COTE du logo. On bascule donc en LAYOUT VERTICAL :
 *     logo en haut, menu (2 lignes texte centrées) en dessous.
 *     Ça respecte la consigne 'autoriser le menu 2 lignes en
 *     pleine largeur centré sous le logo dans la bande 600-921'.
 *   - Au-dessus de 922 (V7 d'origine), le menu reste beside-logo.
 *
 * DEFENSE ANTI-PASTILLES (toutes largeurs >= 600px) :
 *   Plusieurs réécritures Astra responsive (builder) ou règles
 *   futures peuvent injecter background/border/border-radius/
 *   box-shadow sur les <li>/<a> du menu primary et donner
 *   l'effet "pastille" (cadre arrondi). On neutralise
 *   préventivement avec une spécificité (0,3,0)+!important
 *   ciblée sur le menu primary (#masthead → .ast-primary-
 *   header-bar → .main-header-menu li/a) — burger mobile
 *   (#ast-mobile-header) NON concerné.
 *
 * MARQUEUR D'IDEMPOTENCE : JB-MENU-PHASE2-EXTEND-600
 * ============================================================ */

/* ---- DEFENSE ANTI-PASTILLES (>=600px, menu desktop primary uniquement) ---- */
@media (min-width: 834px) {
    #masthead .ast-primary-header-bar .main-header-menu > li,
    #masthead .ast-primary-header-bar .main-header-menu > li > a,
    #masthead .ast-primary-header-bar .main-header-menu > li > a.menu-link {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        outline: 0 !important;
    }
    /* Sécurité ::before/::after qui pourraient simuler une pastille */
    #masthead .ast-primary-header-bar .main-header-menu > li::before,
    #masthead .ast-primary-header-bar .main-header-menu > li::after {
        background: transparent !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    /* Restaure le SEUL effet visuel voulu : soulignement actif/hover
       sur a::after (géré ailleurs ~L848). Ici on ne réautorise PAS
       le background sur a::after, car notre underline est en
       background-image/linear-gradient sur le pseudo — donc on
       l'autorise spécifiquement ci-dessous : */
    #masthead .ast-primary-header-bar .main-header-menu > li > a::after,
    #masthead .ast-primary-header-bar .main-header-menu > li > a::before {
        /* Annule le reset défensif pour ::after/::before des <a>
           (le soulignement passe par background-* + width: 100%) */
        background: revert-layer !important;
        background-color: revert-layer !important;
        background-image: revert-layer !important;
    }
}

/* ---- BANDE 600 - 921.9 px : OVERRIDE ASTRA RESPONSIVE ---- */
@media (min-width: 922px) and (max-width: 921.9px) { /* JB-MENU-PHASE2-HEADER-STICKY 2026-05-20 : bande 834-921 desactivee (min 834->922 = jamais matche) -> fallback burger Astra natif (sticky natif), car header desktop force = 381px de haut, inadapte a un header collant. */
    /* Force le header desktop visible (Astra le hide à max-width:921.9px) */
    #ast-desktop-header,
    body #ast-desktop-header,
    body.ast-header-break-point #ast-desktop-header {
        display: block !important;
    }
    /* Force le header mobile masqué (Astra le show à max-width:921.9px) */
    #ast-mobile-header,
    body #ast-mobile-header,
    body.ast-header-break-point #ast-mobile-header {
        display: none !important;
    }
    /* Burger toggle masqué dans cette bande */
    #ast-mobile-header .menu-toggle,
    #ast-mobile-header .ast-mobile-menu-trigger-minimal,
    #ast-mobile-header .ast-mobile-menu-buttons,
    .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,
    body.ast-header-break-point .ast-mobile-header-wrap .menu-toggle,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-menu-buttons {
        display: none !important;
    }

    /* LAYOUT : logo en haut centré, menu DESSOUS en pleine largeur centré.
       On laisse Astra construire son row primary (avec logo + menu) et on
       passe simplement le wrapper en COLUMN. */
    #masthead #ast-desktop-header .ast-primary-header-bar,
    #masthead #ast-desktop-header .ast-primary-header-bar > .site-primary-header-wrap,
    #masthead #ast-desktop-header .ast-builder-grid-row,
    #masthead #ast-desktop-header .ast-builder-grid-row-container-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.6rem !important;
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: nowrap !important;
    }
    /* Empêche les colonnes Astra de fixer une largeur qui couperait */
    #masthead #ast-desktop-header .ast-builder-grid-row > * {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
    /* Logo centré */
    #masthead #ast-desktop-header .site-branding,
    #masthead #ast-desktop-header .ast-site-identity {
        text-align: center !important;
        margin: 0 auto !important;
    }

    /* MENU UL : grille V7 (4 colonnes × 2 lignes) centrée dans toute
       la largeur disponible (justify-content: center, plus flex-end). */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu,
    #masthead #ast-desktop-header .ast-primary-header-bar .main-navigation ul.main-header-menu,
    #masthead #ast-desktop-header .ast-primary-header-bar ul#ast-hf-menu-1 {
        display: grid !important;
        grid-template-columns: repeat(4, max-content) !important;
        grid-template-rows: min-content min-content !important;
        grid-auto-flow: row !important;
        grid-auto-rows: 0 !important;
        justify-content: center !important;
        align-content: center !important;
        flex-wrap: nowrap !important;
        column-gap: 0.4rem !important;
        row-gap: 0.1rem !important;
        margin: 0 auto !important;
        padding: 0 !important;
        max-width: 100% !important;
    }
    /* Sépa item 307 : reste display:none (sinon prendrait une cellule). */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-307 {
        display: none !important;
    }
    /* Pin items rangee 1 (3 items) */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-308 {
        grid-row: 1 !important; grid-column: 1 !important; order: 1 !important;
        display: block !important;
    }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-309 {
        grid-row: 1 !important; grid-column: 2 !important; order: 2 !important;
        display: block !important;
    }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-358 {
        grid-row: 1 !important; grid-column: 3 !important; order: 3 !important;
        display: block !important;
    }
    /* Pin items rangee 2 (4 items) */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-311 {
        grid-row: 2 !important; grid-column: 1 !important; order: 4 !important;
        display: block !important;
    }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-312 {
        grid-row: 2 !important; grid-column: 2 !important; order: 5 !important;
        display: block !important;
    }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-1766 {
        grid-row: 2 !important; grid-column: 3 !important; order: 6 !important;
        display: block !important;
    }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-313 {
        grid-row: 2 !important; grid-column: 4 !important; order: 7 !important;
        display: block !important;
    }
    /* Resserre la police pour 600-921 (clamp V7 = 1.45rem à 922 -> trop gros à 600).
       Recalc explicite pour cette bande seulement. */
    #masthead #ast-desktop-header .ast-primary-header-bar .menu-item > a,
    #masthead #ast-desktop-header .ast-primary-header-bar .menu-item > a.menu-link {
        font-size: clamp(0.85rem, 0.55rem + 0.55vw, 1.10rem) !important;
        padding: 0.30rem 0.50rem !important;
        white-space: nowrap !important;
        letter-spacing: 0.015em !important;
    }
}


/* ============================================================
 * JB-MENU-PHASE2-ICONS-FIX (2026-05-20) — ICONES MENU dans la
 * bande 600-921.9px : meme taille + meme couleur qu'a >=922.
 * ------------------------------------------------------------
 * CONTEXTE : le bloc d'origine .ast-primary-header-bar .jb-menu-icon
 * (~L963) est wrappe dans @media (min-width:1024px) → ne s'applique
 * pas dans la bande 600-921 ou la phase2 force #ast-desktop-header
 * visible. Resultat constate : camera 0x0px (collapse) + feather
 * 93.5px (taille SVG par defaut), color/stroke = #FFFEFA (blanc) car
 * la couleur du <a> parent n'est plus contrainte dans cette bande
 * → currentColor herite blanc.
 *
 * VALEURS CIBLES (mesurees a 1280px sur /qui-suis-je/, 2026-05-20) :
 *   width/height : 1.05em (≈15.375px @ font 14.656px)
 *   margin-right : 0.42em ; vertical-align : -0.18em ; display : inline-block
 *   camera : color #14544A (vert sapin)
 *   feather: color #7C6145 (or-bois)
 *
 * IDEMPOTENT : marqueur JB-MENU-PHASE2-ICONS-FIX. Specificite
 * #masthead + !important pour battre toute regle blanche heritee.
 * ============================================================ */
@media (min-width: 922px) and (max-width: 921.9px) { /* JB-MENU-PHASE2-HEADER-STICKY 2026-05-20 : bande 834-921 desactivee (min 834->922 = jamais matche) -> fallback burger Astra natif (sticky natif), car header desktop force = 381px de haut, inadapte a un header collant. */
    /* Forcer la couleur du texte des liens du menu dans la bande
       (currentColor du SVG suit la couleur du <a>) */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item > a,
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item > a.menu-link {
        color: var(--marron-fonce) !important;
    }
    /* Item 308 "Mes réalisations" → vert (cohérence ≥1024) */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-308 > a,
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-308 > a.menu-link {
        color: var(--jb-vert) !important;
        font-weight: 800 !important;
    }
    /* SVG icones : taille + alignement (mêmes valeurs que ≥1024) */
    #masthead #ast-desktop-header .ast-primary-header-bar .jb-menu-icon,
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu .jb-menu-icon,
    #masthead #ast-desktop-header .ast-primary-header-bar svg.jb-menu-icon {
        width: 1.05em !important;
        height: 1.05em !important;
        min-width: 1.05em !important;
        min-height: 1.05em !important;
        max-width: 1.05em !important;
        max-height: 1.05em !important;
        margin-right: 0.42em !important;
        margin-left: 0 !important;
        vertical-align: -0.18em !important;
        display: inline-block !important;
        flex: 0 0 auto !important;
        fill: none !important;
    }
    /* Camera (item 308) — vert sapin (stroke = currentColor) */
    #masthead #ast-desktop-header .ast-primary-header-bar .jb-menu-icon-camera,
    #masthead #ast-desktop-header .ast-primary-header-bar svg.jb-menu-icon-camera {
        color: var(--jb-vert) !important;
        stroke: var(--jb-vert) !important;
    }
    /* Feather (item 312) — or-bois (stroke = currentColor) */
    #masthead #ast-desktop-header .ast-primary-header-bar .jb-menu-icon-feather,
    #masthead #ast-desktop-header .ast-primary-header-bar svg.jb-menu-icon-feather {
        color: var(--jb-or) !important;
        stroke: var(--jb-or) !important;
    }
}

/* ---- EXTEND V7 RULES TO MIN-WIDTH 600px (au cas où Astra >=922 reprend
        le row primary normal). Au-dessus de 922 la règle V7 d'origine
        gagne par ordre source ; cette section sert de filet 600-921. ---- */

/* ============================================================
 * JB-MENU-PHASE2-COLOR-ICONS-ALL (2026-05-20) — COULEUR TEXTE +
 * ICONES MENU sur TOUTE la plage du menu texte (>= 834px).
 * ------------------------------------------------------------
 * BUG CLIENT (iPad) : sur la bande ~922-1023px, NI le fix
 * 834-921 (JB-MENU-PHASE2-ICONS-FIX, @media max 921.9) NI la
 * regle d'origine icones/couleur (@media min 1024, ~L799/L963)
 * ne s'appliquaient => texte des liens delave/blanc + icones
 * (camera "Mes realisations", plume "Conseils & Blog")
 * absentes/cassees. A 834-921 OK, a >=1024 OK : trou 922-1023.
 *
 * FIX : bloc ADDITIF en @media (min-width: 834px) — couvre TOUTE
 * la plage (pas seulement 922-1023) donc PAS de trou, et
 * idempotent avec les regles existantes qui donnent deja le
 * meme resultat aux extremites. UNIQUEMENT couleur texte +
 * icones : ZERO modif du layout V7 (beside-logo) ni de la grille.
 *
 * VALEURS CIBLES (mesurees a 1280px sur /qui-suis-je/, 2026-05-20) :
 *   - liens menu (defaut)  : color #493828 (var --marron-fonce)
 *   - lien item 308        : color #14544A (vert sapin) + 800
 *   - .jb-menu-icon        : 1.05em x 1.05em, mr 0.42em, va -0.18em, inline-block
 *   - camera (308)         : color/stroke #14544A
 *   - feather (312)        : color/stroke #7C6145
 *   - hover (#14544A) + soulignement actif (a::after) : PRESERVES
 *
 * Specificite : #masthead #ast-desktop-header .ast-primary-header-bar
 * + !important pour battre toute couleur blanche heritee dans la bande.
 * IDEMPOTENT : marqueur JB-MENU-PHASE2-COLOR-ICONS-ALL.
 * ============================================================ */
@media (min-width: 834px) {
    /* --- COULEUR DES LIENS (etat repos, hors hover/focus) --- */
    /* Defaut = marron fonce charte. On EXCLUT :hover/:focus-visible
       (couleur volontaire #14544A geree ailleurs) et le pseudo
       ::after (soulignement actif anime) — non touche ici. */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item > a,
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item > a.menu-link {
        color: var(--marron-fonce) !important;
    }
    /* Item 308 "Mes realisations" : vert sapin + gras (repos + actif). */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-308 > a,
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-308 > a.menu-link,
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-308.current-menu-item > a,
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-308.current_page_item > a {
        color: var(--jb-vert) !important;
        font-weight: 800 !important;
    }
    /* Hover/focus PRESERVE (vert sapin, lift) : on re-affirme pour
       qu'aucune regle blanche de la bande ne le delave. */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item > a:hover,
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item > a:focus-visible {
        color: var(--jb-vert) !important;
    }

    /* --- ICONES SVG : taille + alignement (memes valeurs que >=1024) --- */
    #masthead #ast-desktop-header .ast-primary-header-bar .jb-menu-icon,
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu .jb-menu-icon,
    #masthead #ast-desktop-header .ast-primary-header-bar svg.jb-menu-icon {
        width: 1.05em !important;
        height: 1.05em !important;
        min-width: 1.05em !important;
        min-height: 1.05em !important;
        max-width: 1.05em !important;
        max-height: 1.05em !important;
        margin-right: 0.42em !important;
        margin-left: 0 !important;
        vertical-align: -0.18em !important;
        display: inline-block !important;
        flex: 0 0 auto !important;
        fill: none !important;
    }
    /* Camera (item 308) — vert sapin (stroke = currentColor). */
    #masthead #ast-desktop-header .ast-primary-header-bar .jb-menu-icon-camera,
    #masthead #ast-desktop-header .ast-primary-header-bar svg.jb-menu-icon-camera {
        color: var(--jb-vert) !important;
        stroke: var(--jb-vert) !important;
    }
    /* Feather (item 312) — or-bois (stroke = currentColor). */
    #masthead #ast-desktop-header .ast-primary-header-bar .jb-menu-icon-feather,
    #masthead #ast-desktop-header .ast-primary-header-bar svg.jb-menu-icon-feather {
        color: var(--jb-or) !important;
        stroke: var(--jb-or) !important;
    }
}

/* ============================================================
 * JB-MENU-PHASE2-HEADER-STICKY (2026-05-20) — HEADER COLLANT + BLUR
 * ------------------------------------------------------------
 * PROBLEME CLIENT : dans la plage menu texte tablette, le header ne
 * suivait PAS le scroll et n'avait PAS le blur verre (effet voulu a
 * >=1024). RECON (scroll, /qui-suis-je/) :
 *   834/900/1000/1023 -> #masthead position:STATIC, header part au
 *     scroll (rectTop 24->-576), ::before backdrop none, body pad 0.
 *   1100/1280         -> position:FIXED, reste a 0, blur 15->24px,
 *     classe .jb-scrolled, body pad 72px.
 * MECANISME : sticky=@media(min-1024) #masthead{position:fixed;top:0}
 *   + body{padding-top:72px}. blur=@media(min-1024) #masthead::before
 *   {blur(15px)} + .jb-scrolled::before{blur(24px)}. JS onScroll gate
 *   innerWidth<1024 => .jb-scrolled jamais sous 1024. BLOQUEUR =
 *   @media(max-1024) body:not(.home) #masthead{position:static
 *   !important} (specificite 0,2,1), imprime APRES nous dans le DOM
 *   (style-core prio 100 enregistre avant subagent9 mais sort apres).
 *
 * HAUTEURS MESUREES : 834-921 (layout 2-lignes V7 sous logo) = 381px
 *   -> trop haut pour un header collant -> FALLBACK burger (cf. bloc 1).
 *   922-1023 (beside-logo) = ~173px -> OK pour sticky.
 *
 * ISSUE RETENUE = HYBRIDE :
 *   - 834-921  : fallback burger Astra natif (sticky natif) [bloc 1].
 *   - 922-1023 : OPTION PREFEREE = header collant + blur, en
 *     position:STICKY (reste dans le flux -> ZERO saut de contenu, pas
 *     de padding-top a calibrer, contrairement a fixed). Blur ::before
 *     identique a >=1024. Specificite html-prefix (0,3,1) pour battre
 *     le bloqueur (0,2,1) malgre l'ordre DOM.
 * Le JS (plus bas) abaisse le seuil 1024->922 pour declencher
 * .jb-scrolled sur 922-1023.
 * IDEMPOTENT : marqueur JB-MENU-PHASE2-HEADER-STICKY.
 * ============================================================ */
@media (min-width: 922px) and (max-width: 1023.9px) {
    /* STICKY (sticky, pas fixed -> reste dans le flux, zero saut).
       Specificite html-prefix (0,3,1) bat body:not(.home) #masthead (0,2,1)
       du bloqueur @media(max-1024) imprime apres dans le DOM. */
    html #masthead,
    html body #masthead,
    html body:not(.home) #masthead,
    html body.home #masthead,
    html body.ast-header-sticked #masthead,
    html .ast-header-sticked #masthead,
    html #masthead.ast-header-sticked {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        z-index: 9999 !important;
        width: 100% !important;
        max-width: 100vw !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border-bottom: 1px solid transparent !important;
        transition: padding 0.4s cubic-bezier(0.22,0.61,0.36,1) !important;
    }
    /* Contenu au-dessus du ::before flou. */
    html #masthead > * { position: relative; z-index: 1; }
    /* Anti-saut : header fixe ~174px de haut (beside-logo 2 lignes a cette
       largeur) -> on reserve l'espace pour que le contenu ne passe pas sous
       le logo/menu opaque. Le glass ::before deborde de 60px sous le header
       et fade -> le contenu defile sous le verre sans etre masque. */
    html body { padding-top: 178px !important; }
    html body.home { padding-top: 178px !important; }

    /* BLUR : reactive le glass ::before (le bloqueur le mettait a none),
       memes valeurs + masque sigmoide qu'a >=1024. html-prefix idem. */
    html #masthead::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: -60px !important;
        -webkit-backdrop-filter: var(--jb-blur-15) !important;
        backdrop-filter: var(--jb-blur-15) !important;
        /* === 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) !important;   /* PLAT : la descente est faite par le masque */

        -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%) !important;
        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%) !important;
        pointer-events: none !important;
        transition: backdrop-filter 0.4s cubic-bezier(0.22,0.61,0.36,1) !important;
    }
    html #masthead.jb-scrolled::before {
        -webkit-backdrop-filter: var(--jb-blur-24) !important;
        backdrop-filter: var(--jb-blur-24) !important;
    }
}


/* ============================================================
 * JB-MENU-REFINE-ALIGN (2026-05-20) — RETOUCHE APPARENCE MENU TEXTE
 * ------------------------------------------------------------
 * Bloc ADDITIF, emis EN DERNIER dans le <style> subagent9 => gagne
 * par ordre source ET specificite (#masthead #ast-desktop-header,
 * 2 id + !important). NE TOUCHE PAS la bascule menu/burger (la plage
 * menu texte reste >=922 ; <922 = burger Astra natif inchange), ni le
 * sticky/blur (PHASE2-HEADER-STICKY), ni les animations.
 *
 * 3 retouches CLIENT (apparence du menu texte uniquement) :
 *
 * (1) COMPACITE + ALIGNEMENT DES 2 LIGNES.
 *     Diag (CDP /qui-suis-je/) : la grille V7 4 col max-content +
 *     justify-content:flex-end => R1 (3 items 308/309/358, col 1-3)
 *     et R2 (4 items 311/312/1766/313, col 1-4) ont des bords DROITS
 *     DIFFERENTS (ex @1280 : R1 finit a 1035, R2 a 1135 ; gauche 553
 *     vs 580) => 2 lignes mal alignees + ensemble plus large.
 *     FIX : on RE-PIN R1 sur les colonnes 2/3/4 (au lieu de 1/2/3) =>
 *     R1 et R2 partagent le MEME bord droit (toutes deux calees a
 *     droite, a cote du logo) ET les colonnes sont coherentes entre
 *     les 2 rangees (col2 sous col2, etc.) => 2 lignes alignees,
 *     ensemble plus etroit. La garantie 2 lignes (grille 4 col x 2
 *     rangees, 7 items) est INTACTE : R2 garde ses 4 cellules, R1 en
 *     occupe 3 (col 2-4) ; aucune 3e rangee possible (7 items / 4 col).
 *     + column-gap RESSERRE (clamp plus petit) pour compacite.
 *
 * (2) ERASBOLD A TOUTE LA PLAGE DU MENU TEXTE (>=922).
 *     Diag : 922-1023 = Inter (la regle ~L2696 .main-header-menu a
 *     {font-family:var(--jb-body)!important} gagne) ; >=1024 = ErasBold
 *     (regle @media min-1024 ~L808). On force ErasBold des 922 (idem
 *     desktop), specificite #masthead #ast-desktop-header (0,3,x)+!imp
 *     qui bat la regle Inter (0,1,1).
 *
 * (3) CENTRAGE VERTICAL menu<->logo. Diag : deja vCenterDelta=0 a
 *     toutes les largeurs menu texte (922->1280). On RE-AFFIRME
 *     align-items:center (defensif), sans toucher au layout below-logo
 *     ni au sticky.
 * ============================================================ */
@media (min-width: 922px) {
    /* (2) ErasBold sur les liens du menu texte (bat la regle Inter L2696) */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item > a,
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item > a.menu-link,
    #masthead #ast-desktop-header .ast-primary-header-bar ul#ast-hf-menu-1 > li.menu-item > a,
    #masthead #ast-desktop-header .ast-primary-header-bar ul#ast-hf-menu-1 > li.menu-item > a.menu-link {
        font-family: var(--jb-eras), 'Signika', Georgia, serif !important;
        font-style: normal !important;
        font-weight: 700 !important;
    }

    /* (3) Centrage vertical menu<->logo (defensif, deja a 0). */
    #masthead #ast-desktop-header .ast-builder-grid-row,
    #masthead #ast-desktop-header .ast-builder-grid-row-has-sides {
        align-items: center !important;
    }
    #masthead #ast-desktop-header .site-header-primary-section-left,
    #masthead #ast-desktop-header .site-header-primary-section-right {
        align-self: center !important;
    }

    /* (1) Compacite : column-gap resserre (vs clamp V6 0.15->0.95rem). */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu,
    #masthead #ast-desktop-header .ast-primary-header-bar .main-navigation ul.main-header-menu,
    #masthead #ast-desktop-header .ast-primary-header-bar ul#ast-hf-menu-1 {
        column-gap: clamp(0.10rem, -0.25rem + 0.55vw, 0.55rem) !important;
        align-content: center !important;
    }
    /* (1) Padding horizontal des liens resserre (compacite). */
    #masthead #ast-desktop-header .ast-primary-header-bar .menu-item > a,
    #masthead #ast-desktop-header .ast-primary-header-bar .menu-item > a.menu-link {
        padding-left: 0.34rem !important;
        padding-right: 0.34rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* (1) ALIGNEMENT 2 LIGNES : R1 (3 items) re-pinnee sur colonnes
       2/3/4 => meme bord droit que R2 (4 items, col 1-4) + colonnes
       coherentes. R2 inchangee. Garantie 2 lignes intacte. */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-308 {
        grid-row: 1 !important; grid-column: 2 !important; }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-309 {
        grid-row: 1 !important; grid-column: 3 !important; }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-358 {
        grid-row: 1 !important; grid-column: 4 !important; }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-311 {
        grid-row: 2 !important; grid-column: 1 !important; }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-312 {
        grid-row: 2 !important; grid-column: 2 !important; }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-1766 {
        grid-row: 2 !important; grid-column: 3 !important; }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-313 {
        grid-row: 2 !important; grid-column: 4 !important; }
}
/* === FIN JB-MENU-REFINE-ALIGN === */

/* === JB-MENU-EQUAL-ROWS (2026-05-20) — 2 LIGNES MEME LARGEUR =======
 * ------------------------------------------------------------
 * Demande client : les 2 lignes du menu beside-logo (>=922) doivent
 * avoir EXACTEMENT la meme largeur (memes bords GAUCHE *et* DROIT) ;
 * les items repartis pour remplir cette largeur.
 *
 * MECANISME RETENU : on REVIENT du CSS GRID (V6/V7/REFINE-ALIGN) au
 * FLEX-REPARTI a LARGEUR FIXE.
 *   - Le <ul> repasse en display:flex; flex-wrap:wrap.
 *   - width = W fixe (clamp fluide) calibre par MESURE : W >= largeur
 *     intrinseque de la rangee la + large (R1 = 308/309/358 avec
 *     icones SVG ~397px @922) et <= espace dispo a droite du logo
 *     (~535px @922). W = clamp(500px, 380px + 13vw, 660px).
 *   - justify-content:space-between => CHAQUE rangee distribue ses
 *     items sur TOUTE la largeur W : 1er item flush-gauche, dernier
 *     flush-droite, sur R1 (3 items) ET R2 (4 items) => memes bords
 *     gauche+droite => MEME LARGEUR.
 *   - margin-left:auto sur le <ul> => W reste cale a droite (beside-logo).
 *
 * GARANTIE "JAMAIS 3 LIGNES" :
 *   (a) separateur li#307 flex:0 0 100% => force le wrap APRES le 3e
 *       item visible (308/309/358 ordres 1-3, 307 ordre 4, puis
 *       311/312/1766/313 ordres 5-8) ;
 *   (b) items white-space:nowrap; flex:0 0 auto (jamais de wrap interne,
 *       jamais de shrink qui pousserait a la ligne) ;
 *   (c) W >= intrinseque R1 a la police courante (mesure CDP balayage
 *       922..1600) => R1 ne wrap jamais ; R2 (366px @922 < R1) tient a
 *       fortiori. => EXACTEMENT 2 rangees a toute largeur >=922.
 *
 * On NEUTRALISE explicitement les pins grid (grid-row/grid-column:auto)
 * poses par V6/V7/REFINE-ALIGN, et on re-impose display:flex (bat le
 * display:grid de ces blocs car emis APRES, meme/plus forte specificite).
 *
 * A PRESERVE (intact) : ErasBold (REFINE-ALIGN (2)), icones camera/plume,
 * centrage vertical (REFINE-ALIGN (3)), bascule burger/texte (>=922 only),
 * sticky+blur (PHASE2-HEADER-STICKY). Ce bloc ne touche QUE la
 * repartition horizontale des items dans les 2 lignes.
 *
 * IDEMPOTENT : marqueur JB-MENU-EQUAL-ROWS. Specificite
 * #masthead #ast-desktop-header (0,3,x) + !important, emis EN DERNIER.
 * <922 hors @media => burger Astra natif intact.
 * ================================================================ */
@media (min-width: 922px) {
    /* (A) <ul> : retour en FLEX-REPARTI largeur fixe W, cale a droite. */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu,
    #masthead #ast-desktop-header .ast-primary-header-bar .main-navigation ul.main-header-menu,
    #masthead #ast-desktop-header .ast-primary-header-bar ul#ast-hf-menu-1 {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-content: center !important;
        align-items: center !important;
        width: clamp(500px, 380px + 13vw, 660px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        /* annule les proprietes grid heritees de V6/V7 */
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-auto-flow: row !important;
        grid-auto-rows: auto !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
    }
    /* (B) separateur li#307 : flex-basis 100% => wrap apres le 3e item. */
    #masthead #ast-desktop-header .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;
        grid-row: auto !important;
        grid-column: auto !important;
    }
    /* (C) items : nowrap + pas de shrink + neutralisation pins grid.
       Ordres: 308=1 309=2 358=3 (307=4 sep) 311=5 312=6 1766=7 313=8. */
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-308 { order: 1 !important; flex: 0 0 auto !important; white-space: nowrap !important; grid-row: auto !important; grid-column: auto !important; }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-309 { order: 2 !important; flex: 0 0 auto !important; white-space: nowrap !important; grid-row: auto !important; grid-column: auto !important; }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-358 { order: 3 !important; flex: 0 0 auto !important; white-space: nowrap !important; grid-row: auto !important; grid-column: auto !important; }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-311 { order: 5 !important; flex: 0 0 auto !important; white-space: nowrap !important; grid-row: auto !important; grid-column: auto !important; }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-312 { order: 6 !important; flex: 0 0 auto !important; white-space: nowrap !important; grid-row: auto !important; grid-column: auto !important; }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-1766 { order: 7 !important; flex: 0 0 auto !important; white-space: nowrap !important; grid-row: auto !important; grid-column: auto !important; }
    #masthead #ast-desktop-header .ast-primary-header-bar .main-header-menu > li.menu-item-313 { order: 8 !important; flex: 0 0 auto !important; white-space: nowrap !important; grid-row: auto !important; grid-column: auto !important; }
}
/* === FIN JB-MENU-EQUAL-ROWS === */
/* === JB-HEADER-SPACER (2026-05-21) : element HTML central = espaceur INVISIBLE a largeur responsive (gere l'ecart logo<->menu). Masque en mobile. === */
@media (min-width: 922px) {
    #masthead .ast-header-html-1 {
        flex: 0 0 auto !important;
        width: clamp(0px, 12vw - 105px, 160px) !important; /* ecart /2 : ~0 a 922 -> ~125 a 1920 -> cap 160 */
        min-width: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
    #masthead .ast-header-html-1 .ast-builder-html-element,
    #masthead .ast-header-html-1 * {
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
    }
}
@media (max-width: 921.98px) {
    #masthead .ast-header-html-1 { display: none !important; }
}
/* === FIN JB-HEADER-SPACER === */