/* ============================================================
   Salamandre Blanche — CSS spécifique
   (la charte de base est dans theme.json ; ici seulement ce que
   les blocs natifs ne couvrent pas : cartes SVG "usages",
   étapes, encart CTA, bandes de sections, header/footer.)
   ============================================================ */

/* ============================================================
   JETONS PARTAGÉS — système d'image
   Toutes les photos du site passent par ces valeurs.
   Modifier ici = modifier partout.
   ============================================================ */
:root{
  --sb-img-radius:10px;
  --sb-img-border:1px solid rgba(30,33,64,.09);
  --sb-img-shadow:0 2px 10px rgba(30,33,64,.06);
  --sb-img-shadow-hover:0 12px 28px rgba(30,33,64,.15);
  /* harmonisation colorimétrique : photos de sources et d'époques
     différentes (téléphone, anciennes compressions). Volontairement
     imperceptible à l'unité, lisible en série. */
  --sb-img-tune:saturate(1.04) contrast(1.02);
  --sb-img-ease:cubic-bezier(.2,.6,.2,1);
}

/* --- Header FIXE (fiable partout) + compensation de hauteur --- */
.wp-site-blocks,.wp-site-blocks > *,.is-root-container,main{overflow:visible}
.wp-site-blocks{padding-top:92px}
html{scroll-padding-top:72px}
@media (max-width:560px){.wp-site-blocks{padding-top:78px}}

/* ============================================================
   HEADER (fixe : logo · menu · téléphone · bouton Devis)
   + filet pinceau décoratif en bas
   ============================================================ */
.sb-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:#fff}
.sb-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:url(../img/header-brush.webp) left bottom/100% 100% no-repeat;pointer-events:none}
.sb-bar{max-width:var(--wp--style--global--wide-size,1200px);margin-inline:auto;
  padding:1.35rem clamp(1rem,4vw,2rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}

/* logo */
.sb-logo{display:flex;align-items:center;line-height:0}
.sb-logo img,.sb-logo .custom-logo{height:48px;width:auto;display:block}

/* actions : menu + téléphone + bouton */
.sb-actions{display:flex;align-items:center;gap:clamp(.8rem,1.8vw,1.6rem)}
/* neutralise le block-gap "flow" WP qui pousse les enfants vers le bas */
.sb-bar,.sb-actions{--wp--style--block-gap:0}
.sb-bar>*,.sb-actions>*{margin-block:0 !important;margin-top:0 !important}
.sb-actions .wp-block-navigation{align-items:center}
.sb-actions .wp-block-buttons{margin:0;display:flex;align-items:center}
.sb-cta-wrap{margin:0}

/* navigation */
.sb-nav .wp-block-navigation__container{gap:clamp(.5rem,1.3vw,1.3rem);align-items:center}
.sb-nav a{color:var(--wp--preset--color--navy);font-weight:600;text-decoration:none}
.sb-nav a:hover,.sb-nav a:focus-visible{color:var(--wp--preset--color--bleu)}
.sb-nav .current-menu-item>a{color:var(--wp--preset--color--bleu)}
.sb-nav .wp-block-navigation__submenu-container{
  background:#fff;border:1px solid var(--wp--preset--color--bord);
  border-radius:6px;box-shadow:0 10px 26px rgba(30,33,64,.12);padding:.35rem;min-width:220px}
.sb-nav .wp-block-navigation__submenu-container a{padding:.5rem .7rem;border-radius:4px}
.sb-nav .wp-block-navigation__submenu-container a:hover{background:var(--wp--preset--color--surface)}

/* téléphone cliquable */
.sb-phone{display:inline-flex;align-items:center;align-self:center;gap:.4rem;line-height:1;
  color:var(--wp--preset--color--navy);font-weight:700;text-decoration:none;white-space:nowrap}
.sb-phone:hover,.sb-phone:focus-visible{color:var(--wp--preset--color--bleu)}
.sb-phone-ico{width:18px;height:18px;flex:none}

/* bouton Devis */
.sb-cta .wp-block-button__link{background:var(--wp--preset--color--bleu);color:#fff;
  border-radius:4px;padding:.6rem 1.2rem;font-weight:700;white-space:nowrap;line-height:1.2}
.sb-cta .wp-block-button__link:hover,
.sb-cta .wp-block-button__link:focus-visible{background:var(--wp--preset--color--navy)}

/* responsive : menu burger, téléphone en icône seule, bouton conservé */
@media (max-width:900px){
  .sb-logo img,.sb-logo .custom-logo{height:42px}
  .sb-actions{gap:.7rem}
}
@media (max-width:560px){
  .sb-phone-num{display:none}          /* garde l'icône téléphone seule */
  .sb-cta .wp-block-button__link{padding:.55rem .9rem;font-size:.9rem}
}

/* Menu burger déplié : trait de pinceau vertical décoratif à gauche */
.sb-nav .wp-block-navigation__responsive-container.is-menu-open{position:relative}
.sb-nav .wp-block-navigation__responsive-container.is-menu-open::before{
  content:"";position:absolute;top:80px;bottom:40px;left:20px;width:16px;
  background:url(../img/menu-brush.webp) center/100% 100% no-repeat;pointer-events:none}
/* wrappers de l'overlay : tout aligné à droite */
.sb-nav .wp-block-navigation__responsive-container.is-menu-open,
.sb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.sb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog{
  align-items:flex-end !important}
.sb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close{
  width:100% !important;max-width:none !important;margin:0 !important}
/* CLÉ : donner une largeur au dialog, sinon "flex-end" n'a pas de place pour pousser à droite */
.sb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog{
  width:100% !important}
/* items du menu calés à DROITE (forçage multi-niveaux) */
.sb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  width:100% !important;margin:0 !important;padding-right:clamp(1.4rem,7vw,3.5rem) !important;padding-left:0 !important}
.sb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  width:100% !important;align-items:flex-end !important;text-align:right !important}
.sb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.sb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  justify-content:flex-end !important;text-align:right !important;width:auto}
.sb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
  align-items:flex-end !important;text-align:right !important;
  background:#fff !important;border:1px solid var(--wp--preset--color--bord) !important;
  border-radius:10px !important;box-shadow:0 8px 22px rgba(30,33,64,.10) !important;
  margin-left:52px !important}
@media (max-width:560px){
  .sb-nav .wp-block-navigation__responsive-container.is-menu-open::before{left:14px;width:13px}
}
/* Menu burger ouvert : ne garder que l'overlay natif. */
.sb-header:has(.wp-block-navigation__responsive-container.is-menu-open) .sb-logo,
.sb-header:has(.wp-block-navigation__responsive-container.is-menu-open) .sb-phone,
.sb-header:has(.wp-block-navigation__responsive-container.is-menu-open) .sb-cta-wrap,
.sb-header:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open{
  display:none !important}

/* Sécurité "paysage court" (WCAG Reflow) : header compact si l'écran est bas */
@media (max-height:450px){
  .sb-bar{padding-block:.5rem}
  .sb-logo img,.sb-logo .custom-logo{height:36px}
  .wp-site-blocks{padding-top:60px}
}

/* ============================================================
   FOOTER (marque + signature · 4 colonnes · barre légale)
   + coup de pinceau décoratif en haut
   ============================================================ */
.sb-footer{background:var(--wp--preset--color--base);position:relative}
.sb-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:60px;
  background:url(../img/footer-brush.webp) left top/100% 100% no-repeat;pointer-events:none}
.sb-foot-inner{position:relative;max-width:var(--wp--style--global--wide-size,1200px);margin-inline:auto;
  padding:calc(clamp(1.4rem,3vw,2.2rem) + 46px) clamp(1rem,4vw,2rem) 1.4rem}

/* marque + signature */
.sb-foot-brand{margin-bottom:2.4rem;max-width:560px}
.sb-foot-brand img,.sb-foot-brand .custom-logo{height:58px;width:auto}
.sb-foot-signature{color:var(--wp--preset--color--muted);font-style:italic;font-size:1rem;margin:.7rem 0 0}

/* colonnes */
.sb-foot-cols{gap:clamp(1.6rem,4vw,3rem)}
.sb-foot-cols h3{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--wp--preset--color--navy);margin:0 0 1rem;padding-bottom:.55rem;position:relative}
.sb-foot-cols h3::after{content:"";position:absolute;left:0;bottom:0;
  width:28px;height:2px;background:var(--wp--preset--color--bleu)}
.sb-foot-cols a{color:var(--wp--preset--color--navy);text-decoration:none;transition:color .15s}
.sb-foot-cols a:hover,.sb-foot-cols a:focus-visible{color:var(--wp--preset--color--bleu)}
.sb-foot-cols ul{list-style:none;margin:0;padding:0;line-height:2.05}
.sb-foot-cols p{line-height:1.9;margin:0;color:var(--wp--preset--color--muted)}
.sb-foot-cols p a{color:var(--wp--preset--color--navy)}
.sb-foot-cols a,.sb-foot-cols p{font-size:.94rem}

/* Réseaux sociaux — pastilles d'icônes (colonne Contact) */
.sb-foot-social{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.sb-foot-social a{display:inline-flex !important;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;padding:0 !important;
  background:#fff;border:1px solid var(--wp--preset--color--bord);
  color:var(--wp--preset--color--navy);
  transition:background .15s,border-color .15s,color .15s,transform .15s}
.sb-foot-social a:hover,.sb-foot-social a:focus-visible{
  background:var(--wp--preset--color--bleu);border-color:var(--wp--preset--color--bleu);
  color:#fff;transform:translateY(-2px)}
.sb-foot-social svg{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){
  .sb-foot-social a:hover{transform:none}
}

/* barre légale */
.sb-foot-legal{border-top:1px solid var(--wp--preset--color--bord);
  margin-top:2.6rem;padding-top:1.2rem;font-size:.82rem;line-height:1.8;
  color:var(--wp--preset--color--muted)}
.sb-foot-legal a{color:var(--wp--preset--color--muted);text-decoration:underline;text-underline-offset:2px}
.sb-foot-legal a:hover{color:var(--wp--preset--color--bleu)}
.sb-foot-legal .sb-credit{opacity:1} /* opacité retirée : contraste AA */

/* responsive : 4 -> 2 -> 1 colonnes */
@media (max-width:900px){.sb-foot-cols{flex-wrap:wrap}.sb-foot-cols .wp-block-column{flex-basis:calc(50% - 1rem)!important}}
@media (max-width:560px){.sb-foot-cols .wp-block-column{flex-basis:100%!important}}

/* ============================================================
   SECTIONS — bandes jointives, titres, échelle typographique
   ============================================================ */
.sb-sec,.sb-cta-box{margin-block:0}
.sb-sec{padding-block:clamp(2rem,5vw,3.4rem)}   /* ← ajuste l'air haut/bas ici */

/* filet magenta à gauche des titres de section */
.sb-sec h2.wp-block-heading{position:relative;padding-left:14px;font-size:1.15rem;font-weight:600}
.sb-sec h2.wp-block-heading::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;
  width:3px;border-radius:2px;background:var(--wp--preset--color--magenta)}
.sb-sec h3.wp-block-heading{font-size:1rem;font-weight:600;margin-top:1.4rem}
.sb-sec p,.sb-chapo{font-size:1rem}

/* ============================================================
   CARTES (bénéfices, usages)
   ============================================================ */
.sb-cards{--wp--style--block-gap:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.2rem 0}
.sb-cards>*{margin:0}
.sb-card{background:linear-gradient(180deg,#ffffff,#fbfcfe);border:1px solid var(--wp--preset--color--bord);
  border-radius:14px;padding:1.1rem 1.2rem;
  box-shadow:0 1px 2px rgba(30,33,64,.05),0 6px 16px rgba(30,33,64,.06);
  transition:transform .18s ease,box-shadow .18s ease}
.sb-card:hover{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(30,33,64,.06),0 14px 30px rgba(30,33,64,.12)}
.sb-card :where(h3,h4,strong.sb-t){display:block;margin:0 0 .25rem;font-size:1.02rem;
  color:var(--wp--preset--color--navy);font-weight:700}
.sb-card p{margin:0;font-size:.9rem;color:var(--wp--preset--color--muted)}
.sb-usages{grid-template-columns:repeat(3,1fr)}
.sb-usages:has(.sb-card:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)} /* 4 cartes -> 2x2 */
@media (max-width:760px){.sb-cards,.sb-usages{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.sb-cards{grid-template-columns:1fr}}

/* variantes de grille */
.sb-cards.sb-cards-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:560px){.sb-cards.sb-cards-2{grid-template-columns:1fr}}
.sb-cards.sb-cards-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.sb-cards.sb-cards-3{grid-template-columns:1fr}}
.sb-cards.sb-cards-2x2{grid-template-columns:repeat(2,1fr)}
@media (max-width:520px){.sb-cards.sb-cards-2x2{grid-template-columns:1fr}}

/* usages : icône dans une pastille colorée */
.sb-usages .sb-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55rem}
.sb-usages .sb-ico{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:#F5FAFF;box-shadow:0 2px 6px rgba(30,33,64,.10)}
.sb-usages .sb-ico svg{width:26px;height:26px;fill:none;stroke:#0554C7;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.sb-usages .sb-card:nth-child(6n+1) .sb-ico{background:#E7F0FF}.sb-usages .sb-card:nth-child(6n+1) .sb-ico svg{stroke:#0060F0}
.sb-usages .sb-card:nth-child(6n+2) .sb-ico{background:#FCEBEA}.sb-usages .sb-card:nth-child(6n+2) .sb-ico svg{stroke:#E05C5C}
.sb-usages .sb-card:nth-child(6n+3) .sb-ico{background:#E4F6EA}.sb-usages .sb-card:nth-child(6n+3) .sb-ico svg{stroke:#24A866}
.sb-usages .sb-card:nth-child(6n+4) .sb-ico{background:#E4F5FB}.sb-usages .sb-card:nth-child(6n+4) .sb-ico svg{stroke:#1D9CC4}
.sb-usages .sb-card:nth-child(6n+5) .sb-ico{background:#FBF6D9}.sb-usages .sb-card:nth-child(6n+5) .sb-ico svg{stroke:#B59500}
.sb-usages .sb-card:nth-child(6n)   .sb-ico{background:#FBEAFA}.sb-usages .sb-card:nth-child(6n)   .sb-ico svg{stroke:#D451CE}

/* ============================================================
   GAMMES DE RÉSINE (Béton ciré) — liste de définitions
   Deux colonnes, compact. Le vrai nuancier est chez DMR Concept.
   ============================================================ */
.sb-gammelist{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:.7rem 1.2rem;
  margin:1.2rem 0;font-size:.9rem}
.sb-gammelist dt{font-weight:700;color:var(--wp--preset--color--navy);white-space:nowrap}
.sb-gammelist dd{margin:0;color:var(--wp--preset--color--muted);line-height:1.5}
.sb-gammelist dd span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;
  font-weight:700;color:var(--wp--preset--color--bleu)}
@media (max-width:760px){.sb-gammelist{grid-template-columns:auto 1fr}}

/* ============================================================
   SECTION 2 COLONNES — texte + photo
   Casse le rythme des grilles de cartes.
   ============================================================ */
.sb-split{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(1.4rem,4vw,2.6rem);
  align-items:center;margin:1.2rem 0 0}
.sb-split figure{margin:0}
.sb-split img{width:100%;height:auto;display:block;
  border-radius:var(--sb-img-radius);border:var(--sb-img-border);
  box-shadow:var(--sb-img-shadow);filter:var(--sb-img-tune)}
.sb-split figcaption{margin-top:.5rem;font-size:.78rem;line-height:1.45;text-align:center;
  color:var(--wp--preset--color--muted)}
@media (max-width:760px){.sb-split{grid-template-columns:1fr}}

/* Variante : photo à gauche. Alterne le rythme quand deux splits se suivent.
   Sur mobile (une colonne), le texte reste en premier : pas d'inversion. */
.sb-split--rev{grid-template-columns:1fr 1.2fr}
@media (min-width:761px){.sb-split--rev figure{order:-1}}

/* ============================================================
   HERO BANNIÈRE (image de fond + voile dégradé + texte blanc)
   ============================================================ */
.sb-hero-banner{min-height:clamp(440px,54vh,560px) !important}
.sb-hero-banner h1{color:#fff;font-size:clamp(1.7rem,4.4vw,2.15rem);font-weight:600;
  line-height:1.2;letter-spacing:-.01em}
.sb-hero-banner .sb-eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;font-weight:700;
  color:#E06AD9;margin:0 0 .4rem}   /* rose éclairci AA : 5.37:1 sur navy */   /* rose clair sur fond sombre */
.sb-hero-banner .sb-lead{color:#E6EBF3;font-size:1.1rem;margin:.2rem 0 1rem}
/* voile en dégradé (plus premium qu'un aplat) */
.sb-hero-banner .wp-block-cover__background{
  background:linear-gradient(180deg,rgba(30,33,64,.30) 0%,rgba(30,33,64,.50) 52%,rgba(30,33,64,.80) 100%) !important;
  opacity:1 !important}
/* révélation douce de l'image au chargement */
@keyframes sb-hero-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.sb-hero-banner .wp-block-cover__image-background{animation:sb-hero-zoom 1.5s ease-out both;
  will-change:transform;border-radius:0}
/* le conteneur interne garde tout dans la colonne de contenu */
.sb-hero-banner .wp-block-cover__inner-container{text-align:left;margin-inline:auto;
  max-width:var(--wp--style--global--content-size,760px)}
.sb-hero-banner .wp-block-cover__inner-container > *{margin-left:0;margin-right:0}
/* badge + boutons alignés à gauche */
.sb-hero-banner .wp-block-buttons{justify-content:flex-start;margin-inline:0}
.sb-hero-banner .sb-badge{display:inline-flex;align-items:center;gap:.4rem;background:#E7F1FE;
  color:var(--wp--preset--color--bleu);font-size:.78rem;font-weight:500;padding:.35rem .8rem;
  border-radius:20px;margin:.6rem 0 0 0}
/* bouton secondaire sur fond sombre → blanc, pas bleu */
.sb-hero-banner .wp-block-button.is-style-outline .wp-block-button__link{
  color:#fff;border:1.5px solid rgba(255,255,255,.75);background:transparent;
  transition:background .18s var(--sb-img-ease),border-color .18s,color .18s}
.sb-hero-banner .wp-block-button.is-style-outline .wp-block-button__link:hover,
.sb-hero-banner .wp-block-button.is-style-outline .wp-block-button__link:focus-visible{
  background:#fff;border-color:#fff;color:var(--wp--preset--color--navy)}
.sb-hero-banner .wp-block-button.is-style-outline .wp-block-button__link:focus-visible{
  outline:2px solid #fff;outline-offset:3px}

/* Hero compact (pages galerie) */
.sb-hero-short{min-height:clamp(440px,54vh,560px) !important}
.sb-hero-short h1{font-size:clamp(1.7rem,4.4vw,2.15rem)}

/* ============================================================
   TRUSTBAR — barre de confiance "à cheval" sur le hero
   La section porte .sb-sec-trust : padding-haut FIXE non nul
   (empêche le margin-collapse), et la marge négative de la barre
   le dépasse pour remonter sur le hero.
   ← RÉGLAGE : marge plus négative = monte plus.
   ============================================================ */
.sb-sec-trust{padding-top:2.5rem !important}
.sb-trustbar{position:relative;z-index:3;margin:-4rem auto 1.4rem !important;max-width:660px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem .9rem;
  background:#fff;border:1px solid var(--wp--preset--color--bord);border-radius:12px;
  box-shadow:0 10px 26px rgba(30,33,64,.12);padding:.85rem 1.2rem}
.sb-trustbar > span{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;
  font-weight:600;color:var(--wp--preset--color--navy)}
.sb-trustbar > span::before{content:"✓";color:var(--wp--preset--color--bleu);font-weight:700}
.sb-trustbar a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:560px){.sb-trustbar{margin-top:-3.4rem !important;width:calc(100% - 1.6rem)}}

/* ============================================================
   ENCARTS (callouts) — style "étiquette". 4 variantes.
   ============================================================ */
.sb-callout{position:relative;border-radius:12px;padding:1.5rem 1.15rem .95rem;margin:1.6rem 0 1.3rem;
  border:1px solid var(--wp--preset--color--bord);background:#EEF5FE}
.sb-callout .sb-callout-t{position:absolute;top:-13px;left:16px;color:#fff;
  font-family:"Poppins",sans-serif;font-weight:600;font-size:.78rem;padding:.3rem .8rem;border-radius:20px;
  display:inline-flex;align-items:center;gap:.35rem;background:var(--wp--preset--color--bleu);
  box-shadow:0 4px 10px rgba(30,33,64,.18)}
.sb-callout p{margin:.3rem 0;font-size:.92rem;line-height:1.55;color:var(--wp--preset--color--contrast)}
.sb-callout p:first-of-type{margin-top:0}
.sb-callout p:last-child{margin-bottom:0}
.sb-callout--info{background:#E7F0FE}
.sb-callout--info .sb-callout-t{background:var(--wp--preset--color--bleu)}
.sb-callout--tip{background:#E3F6EC}
.sb-callout--tip .sb-callout-t{background:var(--wp--preset--color--menthe)}
.sb-callout--warn{background:#FBF3DD}
.sb-callout--warn .sb-callout-t{background:var(--wp--preset--color--or)}
.sb-callout--david{background:#FBEAF9}
.sb-callout--david .sb-callout-t{background:var(--wp--preset--color--magenta)}
.sb-callout--david p{font-style:italic}
@media (max-width:560px){.sb-callout{padding:1.1rem .9rem .9rem}}

/* encart engagements (callout bleu clair) */
.sb-pcallout{position:relative;background:#E7F1FE;border:1px solid var(--wp--preset--color--bord);
  border-radius:14px;padding:1.3rem 1.4rem;margin-top:1.4rem}
.sb-pcallout :where(h2,h3){margin:0 0 .5rem}
.sb-pcallout p{margin:0}

/* Pastille salamandre en coin haut-droite — callouts + encart engagements */
.sb-callout::after,
.sb-pcallout::after{content:"";position:absolute;top:-13px;right:14px;width:36px;height:36px;
  border-radius:50%;background:#fff center/22px 22px no-repeat;
  background-image:url(../img/favicon/favicon.svg);
  border:1px solid var(--wp--preset--color--bord);box-shadow:0 4px 10px rgba(30,33,64,.15)}

/* ============================================================
   CITATIONS, LISTES, PETITS ÉLÉMENTS
   ============================================================ */
.sb-pull{border-left:3px solid var(--wp--preset--color--bleu);padding:.1rem 0 .1rem 1rem;margin:1.3rem 0;
  font-style:italic;color:var(--wp--preset--color--navy);font-size:1.06rem}

.sb-check{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.45rem}
.sb-check li{position:relative;padding-left:1.6rem}
.sb-check li::before{content:"✓";position:absolute;left:0;top:0;color:var(--wp--preset--color--bleu);font-weight:700}

/* Petite légende / note — contraste AA (5,1:1 sur blanc) */
.sb-capnote{font-size:.82rem;color:#6B7280;margin-top:.5rem}
.sb-capnote a{color:#6B7280;text-decoration:underline;text-underline-offset:2px}
.sb-capnote a:hover{color:var(--wp--preset--color--bleu)}

/* Fil d'ariane — version normale (pages sans bannière) */
.sb-crumb{font-size:.82rem;color:var(--wp--preset--color--muted);margin:0 0 1rem}
.sb-crumb a{color:var(--wp--preset--color--muted);text-decoration:none}
.sb-crumb a:hover{color:var(--wp--preset--color--bleu)}
.sb-crumb-sep{opacity:.5;margin:0 .15rem}
/* Fil d'ariane en surimpression sur le hero bannière */
.sb-hero-banner .sb-crumb{margin:0 0 .7rem;font-size:.8rem;color:#D7DEEA}
.sb-hero-banner .sb-crumb a{color:#D7DEEA}
.sb-hero-banner .sb-crumb a:hover{color:#fff}
.sb-hero-banner .sb-crumb [aria-current]{color:#fff;font-weight:600}

/* ============================================================
   FAQ (blocs Détails natifs)
   ============================================================ */
.wp-block-details{border:1px solid var(--wp--preset--color--bord);border-radius:10px;
  padding:.4rem 1rem;margin:.5rem 0;background:#fff}
.wp-block-details summary{font-weight:700;color:var(--wp--preset--color--navy);cursor:pointer;
  min-height:44px;display:flex;align-items:center;padding-block:.65rem}
.wp-block-details p{color:var(--wp--preset--color--muted);margin:.3rem 0 .6rem}
/* Renvoi vers la FAQ complète, en fin de FAQ de page */
.sb-faqmore{margin-top:1.2rem;font-size:.9rem;color:var(--wp--preset--color--muted)}
.sb-faqmore a{color:var(--wp--preset--color--bleu);font-weight:600;
  text-decoration:underline;text-underline-offset:2px}
.sb-faqmore a:hover,.sb-faqmore a:focus-visible{color:var(--wp--preset--color--navy)}

/* Page FAQ — groupes thématiques */
.sb-faqgroup-t{display:flex;align-items:center;gap:.7rem;margin:2rem 0 .9rem;
  font-family:"Poppins",sans-serif;font-size:1rem;font-weight:600;
  color:var(--wp--preset--color--navy)}
.sb-faqgroup-t:first-of-type{margin-top:1rem}
.sb-faqgroup-t::before{content:"";width:26px;height:2px;border-radius:2px;
  background:var(--wp--preset--color--bleu);flex:none}

/* ============================================================
   RÉASSURANCE — engagements factuels, avant le CTA final
   Aucune promesse chiffrée non vérifiable : que du confirmé.
   ============================================================ */
.sb-reassure{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.75rem}
.sb-reassure li{position:relative;padding-left:1.75rem;line-height:1.55;
  color:var(--wp--preset--color--muted)}
.sb-reassure li strong{color:var(--wp--preset--color--navy);font-weight:700}
.sb-reassure li::before{content:"";position:absolute;left:.1rem;top:.45em;
  width:.85rem;height:.45rem;
  border-left:2px solid var(--wp--preset--color--menthe);
  border-bottom:2px solid var(--wp--preset--color--menthe);
  transform:rotate(-45deg)}
@media (min-width:48em){.sb-reassure{grid-template-columns:1fr 1fr;gap:.9rem 2.4rem}}

/* ============================================================
   BANDEAU CTA de fin — bande pleine largeur bleu clair
   ============================================================ */
.sb-cta-box{background:#E7F1FE;border-top:2px solid #CFE0F7;
  padding:2.4rem clamp(1.2rem,4vw,2.6rem);text-align:center}
.sb-cta-box > *{max-width:760px;margin-inline:auto}
.sb-cta-box :where(h2,h3){color:var(--wp--preset--color--bleu);font-size:1.15rem;font-weight:700;margin:0 0 .4rem}
.sb-cta-box p{color:var(--wp--preset--color--muted);margin:0 0 1rem}
.sb-cta-box .wp-block-buttons{justify-content:center}
/* pas de filet magenta sur le CTA */
.sb-cta-box h2.wp-block-heading{padding-left:0}
.sb-cta-box h2.wp-block-heading::before{display:none}

/* ============================================================
   ÉTAPES "SALAMANDRE" — rangée reliée par un filet
   ============================================================ */
.sb-steps-sala{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1rem;position:relative;margin:1.2rem 0}
.sb-steps-sala .sb-step{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:.5rem;
  font-weight:600;font-size:.95rem;color:var(--wp--preset--color--navy)}
.sb-steps-sala .sb-sala{width:52px;height:52px;display:inline-flex;color:var(--wp--preset--color--bleu)}
.sb-steps-sala .sb-sala svg{width:100%;height:100%;transform:rotate(90deg)}
/* Une seule couleur, vitalité par dégradé d'opacité (100 / 85 / 70 / 55 %) */
.sb-steps-sala .sb-step:nth-child(1) .sb-sala{opacity:1}
.sb-steps-sala .sb-step:nth-child(2) .sb-sala{opacity:.85}
.sb-steps-sala .sb-step:nth-child(3) .sb-sala{opacity:.70}
.sb-steps-sala .sb-step:nth-child(4) .sb-sala{opacity:.55}
.sb-steps-sala::before{content:"";position:absolute;top:26px;left:12.5%;right:12.5%;
  height:1px;background:var(--wp--preset--color--bord);z-index:0}
@media (max-width:560px){
  .sb-steps-sala{grid-template-columns:1fr 1fr}
  .sb-steps-sala::before{display:none}
}

/* ============================================================
   ÉTAPES DE CHANTIER en vraies photos (Béton ciré, Plâtrerie)
   C'est un récit : pas de lightbox, juste l'harmonisation.
   ============================================================ */
.sb-steps-photo{display:grid;grid-template-columns:1fr;gap:.8rem;margin:1.2rem 0 0}
.sb-stepcard{margin:0;border:1px solid var(--wp--preset--color--bord);border-radius:12px;
  overflow:hidden;background:#fff;box-shadow:var(--sb-img-shadow);display:flex;flex-direction:column;
  transition:box-shadow .35s var(--sb-img-ease)}
.sb-stepcard:hover{box-shadow:var(--sb-img-shadow-hover)}
.sb-stepcard img{width:100%;height:150px;object-fit:cover;display:block;
  border-radius:0;filter:var(--sb-img-tune)}
.sb-stepcard figcaption{padding:.7rem .8rem .85rem;text-align:left}
.sb-stepnum{display:block;font-family:"Poppins",sans-serif;font-weight:700;font-size:.75rem;
  color:var(--wp--preset--color--magenta)}
.sb-stepcard b{display:block;font-weight:600;font-size:.9rem;color:var(--wp--preset--color--navy);margin-top:.1rem}
.sb-stepcard figcaption span:last-child{display:block;font-size:.8rem;color:var(--wp--preset--color--muted);
  margin-top:.2rem;line-height:1.45}
@media (min-width:600px){.sb-steps-photo{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){
  .sb-steps-photo{grid-template-columns:repeat(4,1fr)}
  .sb-stepcard img{height:130px}
  .sb-steps-5{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1100px){
  .sb-steps-5{grid-template-columns:repeat(5,1fr)}
  .sb-steps-5 .sb-stepcard img{height:120px}
}

/* ============================================================
   BANDE CITATION sur matière (cover pleine largeur)
   ============================================================ */
.sb-quote-band{min-height:clamp(220px,30vw,340px);margin-block:0 !important}
.sb-quote-band .wp-block-cover__inner-container{max-width:820px}
.sb-quote-band .wp-block-cover__image-background{border-radius:0}
.sb-quote-band .sb-quote{color:#fff;font-family:"Poppins",sans-serif;
  font-size:clamp(1.1rem,2.4vw,1.5rem);line-height:1.4;font-weight:500;text-align:center;margin:0}

/* ============================================================
   IMAGE ISOLÉE dans le flux d'un texte
   ============================================================ */
.wp-block-image img{border-radius:var(--sb-img-radius);filter:var(--sb-img-tune)}
.wp-block-image figcaption{font-size:.78rem;line-height:1.45;color:var(--wp--preset--color--muted);
  text-align:center;margin-top:.5rem}

/* ============================================================
   AMBIANCE MURS (page Béton ciré)
   Galerie native (lightbox + srcset conservés), forcée en grille :
   grande photo 2×2 à gauche, deux vignettes empilées à droite.
   ⚠️ À ne pas confondre avec .sb-bento (page Réalisations).
   ============================================================ */
.sb-ambiance.wp-block-gallery.has-nested-images{
  display:grid !important;grid-template-columns:1fr;gap:1rem;margin:1.6rem 0}
.sb-ambiance.wp-block-gallery.has-nested-images figure.wp-block-image{
  width:100% !important;max-width:none !important;flex:none !important;margin:0;
  display:block;background:none;overflow:visible;min-height:0}
.sb-ambiance.wp-block-gallery.has-nested-images figure.wp-block-image img{
  width:100% !important;max-width:none !important;height:100% !important;
  object-fit:cover;display:block;
  border-radius:var(--sb-img-radius);border:var(--sb-img-border);
  box-shadow:var(--sb-img-shadow);filter:var(--sb-img-tune);
  transition:box-shadow .4s var(--sb-img-ease)}
.sb-ambiance figure.wp-block-image:hover img,
.sb-ambiance figure.wp-block-image:focus-within img{
  box-shadow:var(--sb-img-shadow-hover)}
/* pas de légende sur ces photos d'ambiance */
.sb-ambiance.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{display:none}
@media (max-width:47.99em){
  .sb-ambiance.wp-block-gallery.has-nested-images figure.wp-block-image img{
    height:clamp(200px,44vw,300px) !important}
}
@media (min-width:48em){
  .sb-ambiance.wp-block-gallery.has-nested-images{
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(2,minmax(0,1fr));
    aspect-ratio:3/2}
  .sb-ambiance figure.wp-block-image:nth-child(1){grid-column:1 / span 2;grid-row:1 / span 2}
  .sb-ambiance figure.wp-block-image:nth-child(2){grid-column:3;grid-row:1}
  .sb-ambiance figure.wp-block-image:nth-child(3){grid-column:3;grid-row:2}
}

/* ============================================================
   MURS EN BÉTON CIRÉ (page Béton ciré)
   Ce ne sont pas des échantillons de nuancier : ce sont des
   chantiers réels. Carré + repère de teinte dessous.
   Au survol, l'échantillon s'avance et les voisins reculent.
   Bloc Galerie natif → lightbox + srcset conservés.
   ============================================================ */
.sb-nuancier.wp-block-gallery.has-nested-images{
  display:grid !important;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:1.4rem 0;
  overflow:visible !important}
.sb-nuancier.wp-block-gallery.has-nested-images figure.wp-block-image{
  width:100% !important;max-width:none !important;flex:none !important;margin:0;
  display:block;background:none;overflow:visible;
  transition:transform .35s var(--sb-img-ease),opacity .35s var(--sb-img-ease)}
.sb-nuancier.wp-block-gallery.has-nested-images figure.wp-block-image img{
  width:100% !important;max-width:none !important;
  height:clamp(180px,20vw,260px) !important;
  object-fit:cover;display:block;
  border-radius:var(--sb-img-radius);border:var(--sb-img-border);
  box-shadow:var(--sb-img-shadow);filter:var(--sb-img-tune);
  transition:box-shadow .35s var(--sb-img-ease)}
/* repère de teinte : SOUS l'échantillon, jamais dessus */
.sb-nuancier.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{
  position:static !important;background:none !important;
  padding:.55rem 0 0 !important;margin:0;max-height:none !important;
  font-family:"Poppins",sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.02em;
  text-align:center;color:var(--wp--preset--color--muted);
  text-overflow:clip;white-space:normal;overflow:visible;
  transition:color .25s var(--sb-img-ease)}
/* les voisins reculent quand un échantillon est survolé */
.sb-nuancier:hover figure.wp-block-image{transform:scale(.96);opacity:.62}
.sb-nuancier figure.wp-block-image:hover,
.sb-nuancier figure.wp-block-image:focus-within{
  transform:scale(1.1) !important;opacity:1 !important;z-index:2;position:relative}
.sb-nuancier figure.wp-block-image:hover img,
.sb-nuancier figure.wp-block-image:focus-within img{
  box-shadow:0 12px 28px rgba(30,33,64,.22)}
.sb-nuancier figure.wp-block-image:hover figcaption,
.sb-nuancier figure.wp-block-image:focus-within figcaption{
  color:var(--wp--preset--color--navy) !important}
@media (max-width:760px){
  .sb-nuancier.wp-block-gallery.has-nested-images{grid-template-columns:repeat(2,1fr);gap:.9rem}
  .sb-nuancier.wp-block-gallery.has-nested-images figure.wp-block-image img{height:150px !important}
}

/* ============================================================
   GALERIE DE SCÈNE (bloc Galerie natif)
   ⚠️ Hauteur FIXE, pas d'aspect-ratio : combiné à flex, il peut
   calculer une hauteur nulle quand l'image source est carrée.
   Sélecteurs très spécifiques : le CSS de WP force sinon width:auto.
   ============================================================ */
.sb-gallery.wp-block-gallery.has-nested-images{
  display:grid !important;grid-template-columns:repeat(3,1fr);gap:1rem}
.sb-gallery.wp-block-gallery.has-nested-images figure.wp-block-image{
  width:100% !important;max-width:none !important;flex:none !important;margin:0;
  display:block;background:none;overflow:visible}
.sb-gallery.wp-block-gallery.has-nested-images figure.wp-block-image img{
  width:100% !important;max-width:none !important;
  height:clamp(200px,22vw,280px) !important;
  object-fit:cover;display:block;
  border-radius:var(--sb-img-radius);border:var(--sb-img-border);
  box-shadow:var(--sb-img-shadow);filter:var(--sb-img-tune);
  transition:transform .5s var(--sb-img-ease),box-shadow .5s var(--sb-img-ease)}
.sb-gallery figure.wp-block-image:hover img{
  transform:scale(1.02) translateY(-2px);box-shadow:var(--sb-img-shadow-hover)}
/* légende SOUS l'image (le natif WP la met en surimpression : on annule) */
.sb-gallery.wp-block-gallery.has-nested-images figure.wp-block-image figcaption{
  position:static !important;background:none !important;
  padding:.45rem 0 0 !important;margin:0;max-height:none !important;
  font-size:.78rem;line-height:1.45;text-align:center;
  color:var(--wp--preset--color--muted);
  text-overflow:clip;white-space:normal;overflow:visible}
@media (max-width:760px){.sb-gallery.wp-block-gallery.has-nested-images{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){
  .sb-gallery.wp-block-gallery.has-nested-images{grid-template-columns:1fr}
  .sb-gallery.wp-block-gallery.has-nested-images figure.wp-block-image img{height:240px !important}
}

/* ============================================================
   RÉALISATIONS — galerie bento (blocs Image natifs)
   Ici la légende RESTE en surimpression : c'est le principe du bento.
   ============================================================ */
/* Filtres */
.sb-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
.sb-filters button{border:1px solid var(--wp--preset--color--bord);background:#fff;
  border-radius:20px;padding:.4rem 1rem;min-height:44px;font-size:.85rem;font-weight:600;
  color:var(--wp--preset--color--navy);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.sb-filters button:hover{border-color:var(--wp--preset--color--bleu);color:var(--wp--preset--color--bleu)}
.sb-filters button[aria-pressed="true"]{background:var(--wp--preset--color--bleu);
  color:#fff;border-color:var(--wp--preset--color--bleu)}
.sb-filters button:focus-visible{outline:2px solid var(--wp--preset--color--bleu);outline-offset:2px}
@media (max-width:560px){
  /* défilement horizontal plutôt qu'un retour à la ligne chaotique */
  .sb-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:.2rem}
  .sb-filters::-webkit-scrollbar{display:none}
  .sb-filters button{flex:0 0 auto}
}

/* Grille : lignes de hauteur FIXE + remplissage dense = aucun trou */
.sb-bento{display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(104px,9.6vw,138px);gap:.8rem;grid-auto-flow:dense;margin:0}
/* tuile standard : 1 colonne × 2 lignes (~carré) */
.sb-bento .sb-tile{grid-column:span 1;grid-row:span 2;margin:0;position:relative;height:100%;
  border-radius:var(--sb-img-radius);overflow:hidden;border:var(--sb-img-border);
  box-shadow:var(--sb-img-shadow);transition:box-shadow .4s var(--sb-img-ease)}
.sb-bento .sb-tile:hover{box-shadow:var(--sb-img-shadow-hover)}
.sb-bento .sb-tile--big{grid-column:span 2;grid-row:span 4}   /* grand carré */
.sb-bento .sb-tile--wide{grid-column:span 2;grid-row:span 2}  /* paysage */
.sb-bento .sb-tile--tall{grid-column:span 1;grid-row:span 4}  /* portrait */
.sb-bento .sb-tile a{display:block;height:100%}
.sb-bento .sb-tile img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;
  filter:var(--sb-img-tune);transition:transform .6s var(--sb-img-ease)}
.sb-bento .sb-tile:hover img{transform:scale(1.05)}

/* Légende en surimpression + étiquette de catégorie (générée en CSS) */
.sb-bento .sb-tile figcaption{position:absolute;inset:auto 0 0 0;margin:0;padding:1.8rem .85rem .7rem;
  color:#fff;font-size:.85rem;font-weight:600;line-height:1.25;text-align:left;
  background:linear-gradient(transparent,rgba(18,33,64,.55) 45%,rgba(18,33,64,.88));
  opacity:.92;transition:opacity .3s var(--sb-img-ease)}
.sb-bento .sb-tile:hover figcaption{opacity:1}
.sb-bento .sb-tile figcaption::before{display:block;font-size:.64rem;text-transform:uppercase;
  letter-spacing:.05em;font-weight:700;opacity:.9;margin-bottom:.15rem}
.sb-bento .cat-beton figcaption::before{content:"Béton ciré"}
.sb-bento .cat-peinture figcaption::before{content:"Peinture décorative"}
.sb-bento .cat-papier-peint figcaption::before{content:"Papier peint"}
.sb-bento .cat-platrerie figcaption::before{content:"Plâtrerie"}
.sb-bento .cat-renovation figcaption::before{content:"Rénovation"}
.sb-bento .cat-video figcaption::before{content:"Vidéo"}

/* Puce ▶ sur les tuiles vidéo (composant en réserve — voir récap projet) */
.sb-bento .cat-video::after{content:"";position:absolute;top:50%;left:50%;width:54px;height:54px;
  transform:translate(-50%,-60%);border-radius:50%;background:rgba(255,255,255,.92) no-repeat center;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230060F0'%3E%3Cpath d='M9 7.5l8 4.5-8 4.5z'/%3E%3C/svg%3E");
  background-size:26px;box-shadow:0 6px 18px rgba(20,25,40,.35);pointer-events:none;transition:transform .25s}
.sb-bento .cat-video:hover::after{transform:translate(-50%,-60%) scale(1.08)}

/* Filtrage + « Afficher plus » (JS : sb-faq.js) */
.sb-bento .sb-tile[hidden]{display:none}

@media (max-width:900px){.sb-bento{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  .sb-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(92px,20vw,120px)}
  .sb-bento .sb-tile--big{grid-column:span 2;grid-row:span 4}
  .sb-bento .sb-tile--wide{grid-column:span 2;grid-row:span 2}
  .sb-bento .cat-video::after{width:44px;height:44px;background-size:22px}
}

/* ============================================================
   RÉALISATIONS — bouton « Afficher plus »
   Les tuiles .sb-more sont masquées au chargement par le JS
   (attribut hidden), pour alléger le DOM initial et le LCP.
   Sans JavaScript, tout s'affiche : rien n'est perdu.
   ============================================================ */
.sb-morewrap{display:flex;justify-content:center;margin:1.6rem 0 0}
.sb-morebtn{border:1px solid var(--wp--preset--color--bleu);background:#fff;
  color:var(--wp--preset--color--bleu);border-radius:24px;padding:.7rem 1.6rem;min-height:44px;
  font-family:"Poppins",sans-serif;font-weight:700;font-size:.9rem;cursor:pointer;
  transition:background .15s,color .15s}
.sb-morebtn:hover,.sb-morebtn:focus-visible{background:var(--wp--preset--color--bleu);color:#fff}
.sb-morebtn[hidden]{display:none}

/* ============================================================
   AVANT / APRÈS — deux photos côte à côte, étiquetées
   Le cerveau comprend instantanément. C'est l'argument le plus fort
   du béton ciré : la pose sur carrelage, sans démolition.
   ============================================================ */
.sb-ba{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.6rem 0 0}
.sb-ba-item{margin:0;position:relative}
.sb-ba-item img{width:100%;height:clamp(200px,26vw,320px);object-fit:cover;display:block;
  border-radius:var(--sb-img-radius);border:var(--sb-img-border);
  box-shadow:var(--sb-img-shadow);filter:var(--sb-img-tune)}
.sb-ba-item figcaption{margin-top:.6rem;font-size:.85rem;line-height:1.5;
  color:var(--wp--preset--color--muted)}
.sb-ba-tag{display:inline-block;margin-right:.4rem;padding:.15rem .6rem;border-radius:20px;
  font-family:"Poppins",sans-serif;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:#fff}
.sb-ba-tag--before{background:var(--wp--preset--color--muted)}
.sb-ba-tag--after{background:var(--wp--preset--color--menthe)}
@media (max-width:640px){
  .sb-ba{grid-template-columns:1fr;gap:1.4rem}
  .sb-ba-item img{height:clamp(220px,52vw,300px)}
}

/* ============================================================
   ZOOM CHANTIER — les étapes invisibles
   Ce ne sont pas des réalisations : c'est le travail. Pas de lightbox.
   ============================================================ */
.sb-zoom{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.4rem 0 0}
.sb-zoom figure{margin:0}
.sb-zoom img{width:100%;height:clamp(160px,16vw,200px);object-fit:cover;display:block;
  border-radius:var(--sb-img-radius);border:var(--sb-img-border);
  box-shadow:var(--sb-img-shadow);filter:var(--sb-img-tune);
  transition:box-shadow .4s var(--sb-img-ease)}
.sb-zoom figure:hover img{box-shadow:var(--sb-img-shadow-hover)}
.sb-zoom figcaption{margin-top:.5rem;font-size:.8rem;line-height:1.45;
  color:var(--wp--preset--color--muted)}
@media (max-width:760px){.sb-zoom{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.sb-zoom{grid-template-columns:1fr}}

/* ============================================================
   BANDEAU VIDÉO (chaîne YouTube)
   Pastille ▶ · titre + sous-titre empilés · lien à droite.
   ⚠️ .sb-vb-txt DOIT être en flex-column : sinon le <small>
   reste inline et se colle au titre.
   ============================================================ */
.sb-videobar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:#F5FAFF;
  border:1px solid var(--wp--preset--color--bord);border-radius:14px;
  padding:1.1rem 1.3rem;margin:1.6rem 0}
.sb-videobar .sb-vb-ico{width:42px;height:42px;border-radius:50%;flex:none;
  background:var(--wp--preset--color--bleu);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1rem;line-height:1}
.sb-videobar .sb-vb-txt{flex:1 1 220px;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.sb-videobar .sb-vb-txt b{display:block;color:var(--wp--preset--color--navy);
  font-family:"Poppins",sans-serif;font-weight:600;font-size:.98rem}
.sb-videobar .sb-vb-txt small{display:block;font-size:.85rem;line-height:1.45;
  color:var(--wp--preset--color--muted)}
.sb-videobar .sb-vb-link{flex:none;white-space:nowrap;
  color:var(--wp--preset--color--bleu);font-weight:700;font-size:.9rem;text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px}
.sb-videobar .sb-vb-link:hover,
.sb-videobar .sb-vb-link:focus-visible{text-decoration:underline}
@media (max-width:560px){
  .sb-videobar{gap:.8rem}
  .sb-videobar .sb-vb-link{white-space:normal}
}

/* ============================================================
   LIGHTBOX NATIF WP — habillage
   ============================================================ */
.wp-lightbox-overlay{background:rgba(18,21,42,.94)}
.wp-lightbox-overlay .close-button{color:#fff}
.wp-lightbox-overlay img{border-radius:0 !important;filter:none !important;border:0 !important}

/* ============================================================
   PAGE ACCUEIL
   ============================================================ */
/* Grille des 4 prestations */
.sb-presta{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin:1.4rem 0 0}
.sb-presta a{display:flex;flex-direction:column;gap:.5rem;text-decoration:none;
  background:linear-gradient(180deg,#ffffff,#fbfcfe);
  border:1px solid var(--wp--preset--color--bord);border-radius:14px;padding:1.3rem 1.4rem;
  box-shadow:0 1px 2px rgba(30,33,64,.05),0 6px 16px rgba(30,33,64,.06);
  transition:transform .2s var(--sb-img-ease),box-shadow .2s var(--sb-img-ease),border-color .2s}
.sb-presta a:hover,.sb-presta a:focus-visible{transform:translateY(-3px);
  border-color:var(--wp--preset--color--bleu);
  box-shadow:0 2px 4px rgba(30,33,64,.06),0 16px 34px rgba(30,33,64,.13)}
.sb-presta .sb-p-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;background:#E7F0FF}
.sb-presta .sb-p-ico svg{width:24px;height:24px;fill:none;stroke:var(--wp--preset--color--bleu);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sb-presta a:nth-child(2) .sb-p-ico{background:#E4F6EA}
.sb-presta a:nth-child(2) .sb-p-ico svg{stroke:var(--wp--preset--color--menthe)}
.sb-presta a:nth-child(3) .sb-p-ico{background:#E4F5FB}
.sb-presta a:nth-child(3) .sb-p-ico svg{stroke:var(--wp--preset--color--cyan)}
.sb-presta a:nth-child(4) .sb-p-ico{background:#FBEAFA}
.sb-presta a:nth-child(4) .sb-p-ico svg{stroke:var(--wp--preset--color--magenta)}
.sb-presta b{font-family:"Poppins",sans-serif;font-size:1.02rem;font-weight:600;
  color:var(--wp--preset--color--navy)}
.sb-presta p{margin:0;font-size:.9rem;line-height:1.5;color:var(--wp--preset--color--muted)}
.sb-presta .sb-p-more{margin-top:auto;padding-top:.6rem;font-size:.85rem;font-weight:700;
  color:var(--wp--preset--color--bleu)}
.sb-presta .sb-p-more::after{content:" →";transition:margin-left .2s}
.sb-presta a:hover .sb-p-more::after{margin-left:.2rem}
/* la carte Béton ciré porte un liseré : c'est la spécialité */
.sb-presta a.is-featured{border-color:var(--wp--preset--color--menthe);position:relative}
.sb-presta a.is-featured::before{content:"Ma spécialité";position:absolute;top:-10px;right:16px;
  background:var(--wp--preset--color--menthe);color:var(--wp--preset--color--navy);font-size:.68rem;font-weight:700;
  letter-spacing:.03em;padding:.22rem .7rem;border-radius:20px}
@media (max-width:760px){.sb-presta{grid-template-columns:1fr}}

/* Bloc "L'homme derrière l'entreprise" */
.sb-david{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,4vw,2.6rem);
  align-items:center;margin:1.2rem 0 0}
.sb-david img{width:clamp(160px,20vw,220px);aspect-ratio:1/1;object-fit:cover;object-position:center 25%;
  border-radius:50%;border:4px solid #fff;box-shadow:0 10px 30px rgba(30,33,64,.18);
  filter:var(--sb-img-tune)}
.sb-david .sb-d-txt p{margin:0 0 .8rem}
.sb-david .sb-d-txt p:last-child{margin-bottom:0}
.sb-david .sb-d-link{font-weight:700;color:var(--wp--preset--color--bleu);text-decoration:none}
.sb-david .sb-d-link:hover{text-decoration:underline}
.sb-david .sb-d-link::after{content:" →"}
@media (max-width:760px){
  .sb-david{grid-template-columns:1fr;justify-items:center;text-align:center}
  .sb-david img{width:150px}
}

/* Les prestations, en fin de guide — rappel discret.
   5 colonnes par défaut ; 4 quand le bloc n'a que 4 entrées (Réalisations). */
.sb-quatre{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem;margin:1.2rem 0 0}
.sb-quatre:has(a:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
.sb-quatre a{display:flex;align-items:center;justify-content:center;text-align:center;
  text-decoration:none;min-height:60px;
  background:#F5FAFF;border:1px solid var(--wp--preset--color--bord);border-radius:12px;
  padding:.8rem .5rem;font-weight:600;font-size:.82rem;line-height:1.3;
  color:var(--wp--preset--color--navy);transition:border-color .15s,color .15s}
.sb-quatre a:hover,.sb-quatre a:focus-visible{
  border-color:var(--wp--preset--color--bleu);color:var(--wp--preset--color--bleu)}
@media (max-width:900px){
  .sb-quatre,.sb-quatre:has(a:nth-child(4):last-child){grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .sb-quatre,.sb-quatre:has(a:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   PAGE CONTACT
   ============================================================ */
/* Grille : formulaire (large) + colonne contact direct */
.sb-contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(1.6rem,4vw,3rem);
  align-items:start;margin:1.4rem 0 0}
@media (max-width:900px){.sb-contact-grid{grid-template-columns:1fr}}

/* Cartes de la colonne de droite */
.sb-contact-card{background:#fff;border:1px solid var(--wp--preset--color--bord);
  border-radius:14px;padding:1.4rem 1.5rem;
  box-shadow:0 1px 2px rgba(30,33,64,.05),0 6px 16px rgba(30,33,64,.06)}
.sb-contact-card + .sb-contact-card{margin-top:1rem}
.sb-contact-card h3{font-family:"Poppins",sans-serif;font-size:.95rem;font-weight:600;
  color:var(--wp--preset--color--navy);margin:0 0 .9rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--wp--preset--color--bord)}

/* Lignes de contact (tél, mail, WhatsApp, Instagram) */
.sb-contact-line{display:flex;align-items:flex-start;gap:.75rem;padding:.55rem 0;
  min-height:44px;text-decoration:none;color:var(--wp--preset--color--navy)}
.sb-contact-line:hover .sb-cl-val,
.sb-contact-line:focus-visible .sb-cl-val{color:var(--wp--preset--color--bleu)}
.sb-contact-line svg{width:20px;height:20px;flex:none;margin-top:.15rem;
  color:var(--wp--preset--color--bleu)}
.sb-cl-txt{display:flex;flex-direction:column;line-height:1.35}
.sb-cl-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  color:var(--wp--preset--color--muted)}
.sb-cl-val{font-weight:600;font-size:1rem;transition:color .15s}
.sb-cl-note{font-size:.78rem;color:var(--wp--preset--color--muted);font-weight:400}

/* Horaires */
.sb-hours{list-style:none;margin:0;padding:0}
.sb-hours li{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;
  font-size:.88rem;border-bottom:1px dashed var(--wp--preset--color--bord)}
.sb-hours li:last-child{border-bottom:0}
.sb-hours b{font-weight:600;color:var(--wp--preset--color--navy)}
.sb-hours span{color:var(--wp--preset--color--muted)}


/* Zone d'intervention : texte d'introduction */
.sb-zone-txt{margin:0;font-size:.88rem;line-height:1.6;color:var(--wp--preset--color--muted)}
/* Zone d'intervention : pastilles de communes */
.sb-zone{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0 0}
.sb-zone span{background:#F5FAFF;border:1px solid var(--wp--preset--color--bord);
  border-radius:20px;padding:.35rem .85rem;font-size:.8rem;font-weight:500;
  color:var(--wp--preset--color--navy)}

/* ============================================================
   FLUENT FORMS — habillage aux couleurs du site
   Le plugin sort son propre markup : on le rhabille sans le casser.
   ============================================================ */
.sb-form .fluentform{margin:0}
.sb-form .ff-el-group{margin-bottom:1.15rem}
.sb-form .ff-el-input--label label{font-family:"Poppins",sans-serif;font-weight:600;
  font-size:.88rem;color:var(--wp--preset--color--navy);margin-bottom:.4rem;display:block}
.sb-form .ff-el-is-required.asterisk-right label:after{color:var(--wp--preset--color--corail)}

/* champs — 16px mini = pas de zoom auto sur iOS */
.sb-form input[type=text],.sb-form input[type=email],.sb-form input[type=tel],
.sb-form input[type=number],.sb-form select,.sb-form textarea{
  width:100%;font-size:16px;font-family:inherit;
  padding:.75rem .9rem;min-height:44px;
  background:#fff;color:var(--wp--preset--color--contrast);
  border:1px solid var(--wp--preset--color--bord);border-radius:10px;
  transition:border-color .15s,box-shadow .15s}
.sb-form textarea{min-height:150px;resize:vertical;line-height:1.55}
.sb-form input:focus,.sb-form select:focus,.sb-form textarea:focus{
  outline:none;border-color:var(--wp--preset--color--bleu);
  box-shadow:0 0 0 3px rgba(0,96,240,.13)}
.sb-form input::placeholder,.sb-form textarea::placeholder{color:#9AA0A6}

/* radios "Vous êtes" : en boutons, pas en petits ronds */
.sb-form .ff-el-form-check-inline{display:inline-flex;margin:0 .5rem .5rem 0}
.sb-form .ff-el-form-check label{position:relative;display:inline-flex;align-items:center;
  gap:.5rem;min-height:44px;padding:.5rem 1.1rem;cursor:pointer;
  background:#fff;border:1px solid var(--wp--preset--color--bord);border-radius:24px;
  font-weight:600;font-size:.9rem;color:var(--wp--preset--color--navy);
  transition:border-color .15s,background .15s,color .15s}
.sb-form .ff-el-form-check label:hover{border-color:var(--wp--preset--color--bleu)}
.sb-form .ff-el-form-check input:checked + label,
.sb-form .ff-el-form-check label:has(input:checked){
  background:var(--wp--preset--color--bleu);border-color:var(--wp--preset--color--bleu);color:#fff}
.sb-form .ff-el-form-check input:focus-visible + label{
  outline:2px solid var(--wp--preset--color--bleu);outline-offset:2px}

/* cases à cocher "Votre projet" */
.sb-form .ff_list_buttons .ff-el-form-check,
.sb-form .ff-el-group[data-type=checkbox] .ff-el-form-check{display:block;margin-bottom:.4rem}

/* consentement RGPD */
.sb-form .ff-el-group[data-name*=gdpr] label,
.sb-form .ff-el-tc label{font-weight:400;font-size:.85rem;line-height:1.5;
  color:var(--wp--preset--color--muted)}
.sb-form .ff-el-tc a{color:var(--wp--preset--color--bleu);text-underline-offset:2px}

/* bouton d'envoi */
.sb-form .ff-btn-submit{background:var(--wp--preset--color--bleu);color:#fff;
  border:none;border-radius:10px;padding:.85rem 2rem;min-height:48px;
  font-family:"Poppins",sans-serif;font-weight:700;font-size:1rem;cursor:pointer;width:auto;
  box-shadow:0 6px 18px rgba(0,96,240,.25);
  transition:background .15s,transform .15s,box-shadow .15s}
.sb-form .ff-btn-submit:hover{background:var(--wp--preset--color--navy);
  transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,33,64,.22)}
.sb-form .ff-btn-submit:focus-visible{outline:2px solid var(--wp--preset--color--navy);outline-offset:3px}

/* messages */
.sb-form .ff-el-is-error input,.sb-form .ff-el-is-error textarea,.sb-form .ff-el-is-error select{
  border-color:var(--wp--preset--color--corail)}
.sb-form .error-text,.sb-form .text-danger{color:var(--wp--preset--color--corail);
  font-size:.82rem;margin-top:.3rem}
.sb-form .ff-message-success{background:#E3F6EC;border:1px solid var(--wp--preset--color--menthe);
  border-radius:12px;padding:1.1rem 1.3rem;color:var(--wp--preset--color--contrast)}

/* ============================================================
   PAGE L'ARTISAN
   ============================================================ */
/* Ligne qualificatif (sous le nom) */
.sb-quali{font-family:"Poppins",sans-serif;font-weight:500;color:var(--wp--preset--color--magenta);margin:.2rem 0 .8rem}

/* Photos du parcours en colonnes : hauteur maîtrisée, proportions gardées */
.sb-parcimg{margin:0}
.sb-parcimg img{max-height:300px;width:auto;max-width:100%;margin-inline:auto;display:block;
  border-radius:var(--sb-img-radius);border:var(--sb-img-border);
  box-shadow:var(--sb-img-shadow);filter:var(--sb-img-tune)}
.sb-parcimg figcaption{text-align:center}

/* Rangée de 3 photos en bas de section Parcours.
   ← RÉGLAGE : la valeur 220px pilote la hauteur des vignettes. */
.sb-parcrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.6rem 0 0}
.sb-parcrow figure{margin:0}
.sb-parcrow img{width:100%;height:220px;object-fit:cover;object-position:center;display:block;
  border-radius:var(--sb-img-radius);border:var(--sb-img-border);
  box-shadow:var(--sb-img-shadow);filter:var(--sb-img-tune);
  transition:transform .4s var(--sb-img-ease),box-shadow .4s var(--sb-img-ease)}
.sb-parcrow figure:hover img{transform:translateY(-3px);box-shadow:var(--sb-img-shadow-hover)}
.sb-parcrow figcaption{margin-top:.5rem;font-size:.78rem;line-height:1.45;text-align:center;
  color:var(--wp--preset--color--muted)}
@media (max-width:760px){
  .sb-parcrow{grid-template-columns:1fr;gap:1.2rem}
  .sb-parcrow img{height:auto;max-height:300px;width:auto;max-width:100%;margin-inline:auto}
}

/* Bandeau "sur les routes" : route + camion détouré qui déborde légèrement.
   Réglages : `bottom` de .sb-van (débordement), 380px/24vw (hauteur de bande). */
.sb-vanband-wrap{overflow:visible;margin-block:0;padding:0}
.sb-vanband{position:relative;width:100%;overflow:visible;line-height:0}
.sb-vanband-road{display:block;width:100%;height:clamp(230px,24vw,380px);object-fit:cover;
  object-position:center 55%;border-radius:0;filter:none}
.sb-van{position:absolute;left:50%;bottom:-1.1rem;transform:translateX(-50%);
  width:clamp(190px,20vw,320px);height:auto;z-index:3;border-radius:0;
  filter:drop-shadow(0 12px 14px rgba(20,25,40,.30))}
.sb-vanafter{padding-top:clamp(2.4rem,5vw,3.6rem) !important;text-align:center}
.sb-vancap{font-family:"Poppins",sans-serif;font-weight:600;font-size:1.02rem;
  color:var(--wp--preset--color--navy);margin:0 0 1.1rem}
@media (max-width:560px){.sb-van{bottom:-.7rem;width:52%}}

/* Bande de faits / confiance centrée */
.sb-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.4rem;
  margin:1.4rem 0;font-size:.85rem;font-weight:600;color:var(--wp--preset--color--navy);text-align:center}
.sb-facts span{display:inline-flex;align-items:center;gap:.4rem}
.sb-facts span svg{width:17px;height:17px;flex:none;color:var(--wp--preset--color--bleu)}
.sb-facts a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.sb-facts a:hover,.sb-facts a:focus-visible{border-bottom-color:var(--wp--preset--color--bleu)}

/* Réseau BBE24-33 : logo + texte dans un seul lien (carte).
   Fond clair obligatoire : le logo est illisible sur navy. */
.sb-bbe{display:flex;flex-direction:column;align-items:center;gap:.8rem;max-width:280px;margin-inline:auto;
  padding:1.3rem 1.4rem;text-align:center;text-decoration:none;
  background:linear-gradient(180deg,#ffffff,#fbfcfe);
  border:1px solid var(--wp--preset--color--bord);border-radius:14px;
  box-shadow:0 1px 2px rgba(30,33,64,.05),0 6px 16px rgba(30,33,64,.06);
  transition:transform .2s var(--sb-img-ease),box-shadow .2s var(--sb-img-ease),border-color .2s}
.sb-bbe:hover,.sb-bbe:focus-visible{transform:translateY(-3px);border-color:var(--wp--preset--color--bleu);
  box-shadow:0 2px 4px rgba(30,33,64,.06),0 16px 34px rgba(30,33,64,.13)}
.sb-bbe img{display:block;width:200px;height:auto}
.sb-bbe > span{font-size:.9rem;font-weight:700;color:var(--wp--preset--color--bleu);
  text-decoration:underline;text-underline-offset:3px;text-wrap:balance}
.sb-bbe .sb-nowrap{white-space:nowrap}   /* « BBE24-33 » jamais coupé au tiret */

/* ============================================================
   PAGES LÉGALES — texte long, lisible, sobre
   ============================================================ */
.sb-legal{max-width:760px;margin-inline:auto}
.sb-legal h2{margin-top:2.2rem}
.sb-legal h2:first-of-type{margin-top:.5rem}
.sb-legal h3{margin-top:1.6rem}
.sb-legal p,.sb-legal li{line-height:1.75}
.sb-legal ul{padding-left:1.2rem;margin:.6rem 0}
.sb-legal li{margin-bottom:.35rem}

/* Fiche factuelle (identité, assurance, hébergeur) */
.sb-legal-id{background:#fff;border:1px solid var(--wp--preset--color--bord);
  border-radius:12px;padding:1.3rem 1.5rem;margin:1.2rem 0;box-shadow:var(--sb-img-shadow)}
.sb-legal-id dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.4rem}
.sb-legal-id dt{font-weight:600;color:var(--wp--preset--color--navy);font-size:.88rem}
.sb-legal-id dd{margin:0;color:var(--wp--preset--color--contrast);font-size:.88rem}
.sb-legal-id a{color:var(--wp--preset--color--bleu);text-underline-offset:2px}
@media (max-width:560px){
  .sb-legal-id dl{grid-template-columns:1fr;gap:.15rem}
  .sb-legal-id dt{margin-top:.6rem}
  .sb-legal-id dt:first-child{margin-top:0}
}

/* Date de mise à jour */
.sb-legal-maj{font-size:.82rem;color:var(--wp--preset--color--muted);
  padding-top:1.4rem;margin-top:2.4rem;border-top:1px solid var(--wp--preset--color--bord)}

/* ============================================================
   PLAN DU SITE
   ============================================================ */
.sb-sitemap{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin:1.2rem 0 0}
.sb-sitemap section{background:#fff;border:1px solid var(--wp--preset--color--bord);
  border-radius:14px;padding:1.3rem 1.5rem;box-shadow:var(--sb-img-shadow)}
.sb-sitemap h2{font-family:"Poppins",sans-serif;font-size:1rem;font-weight:600;
  color:var(--wp--preset--color--navy);margin:0 0 .9rem;padding-bottom:.55rem;
  border-bottom:1px solid var(--wp--preset--color--bord)}
.sb-sitemap ul{list-style:none;margin:0;padding:0}
.sb-sitemap li{padding:.35rem 0}
.sb-sitemap li a{color:var(--wp--preset--color--navy);text-decoration:none;
  font-weight:600;font-size:.94rem;display:inline-block;min-height:26px;transition:color .15s}
.sb-sitemap li a:hover,.sb-sitemap li a:focus-visible{color:var(--wp--preset--color--bleu)}
.sb-sitemap li small{display:block;font-size:.8rem;font-weight:400;
  color:var(--wp--preset--color--muted);line-height:1.4;margin-top:.1rem}
@media (max-width:760px){.sb-sitemap{grid-template-columns:1fr}}

/* ============================================================
   BOUTON "RETOUR EN HAUT" (site-wide)
   ============================================================ */
.sb-totop{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:900;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:var(--wp--preset--color--bleu);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(30,33,64,.22);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,visibility .2s,transform .2s,background .15s}
.sb-totop.show{opacity:1;visibility:visible;transform:translateY(0)}
.sb-totop:hover,.sb-totop:focus-visible{background:var(--wp--preset--color--navy)}

/* ============================================================
   MOBILE-FIRST & ACCESSIBILITÉ TACTILE
   Cible : zones tactiles ≥ 44 px (Opquast / WCAG 2.5.8),
   aucun débordement horizontal, lisibilité sur petit écran.
   ============================================================ */
/* Zones tactiles confortables (doigt = ~44 px) */
.wp-block-button__link{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.sb-foot a,.sb-nav a{display:inline-block;padding-block:.25rem}

/* Aucun débordement horizontal */
html,body{overflow-x:clip;max-width:100%}
img,svg,video{max-width:100%;height:auto}

/* Formulaires : 16 px mini = pas de zoom auto sur iOS */
input,select,textarea{font-size:16px}

/* Focus : aucun cadre au clic souris (annule le :focus de Twenty Twenty-Five)… */
:focus:not(:focus-visible){outline:none}

/* …cadre bleu conservé à la navigation clavier */
:where(a,button,summary,input,select,textarea):focus-visible{
  outline:2px solid var(--wp--preset--color--bleu);outline-offset:2px;border-radius:4px}

/* Texte réservé aux lecteurs d'écran (ex. « nouvelle fenêtre ») */
.screen-reader-text{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================
   MOUVEMENT RÉDUIT — tout se fige (prefers-reduced-motion)
   Un seul bloc, en fin de fichier : il doit gagner sur tout.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .sb-card,.sb-presta a,.sb-guide a,.sb-stepcard,.sb-totop,.sb-bbe,
  .sb-nuancier figure.wp-block-image,
  .sb-gallery figure.wp-block-image img,
  .sb-ambiance img,
  .sb-zoom img,
  .sb-parcrow img,.sb-bento .sb-tile img,.sb-bento .sb-tile figcaption,
  .sb-form .ff-btn-submit{transition:none}
  .sb-card:hover,.sb-presta a:hover,.sb-guide a:hover,.sb-bbe:hover,.sb-bbe:focus-visible,
  .sb-gallery figure.wp-block-image:hover img,
  .sb-parcrow figure:hover img,.sb-bento .sb-tile:hover img,
  .sb-form .ff-btn-submit:hover{transform:none}
  .sb-nuancier:hover figure.wp-block-image,
  .sb-nuancier figure.wp-block-image:hover{transform:none !important;opacity:1 !important}
  .sb-hero-banner .wp-block-cover__image-background{animation:none}
  .sb-totop{transition:opacity .2s,visibility .2s}
}
/* ============================================================
   AJOUTS — récap corrections (audit pré-mise en ligne)
   Séparateurs de texte, listes 2 colonnes, trustbar sur héros
   compact, harmonisation avant/après. Placés en fin de fichier.
   ============================================================ */

/* Trait fin entre les sous-parties d'un bloc de texte (réutilisable).
   Couleur navy à faible opacité : visible sur blanc ET sur #F5FAFF.
   Largeur = colonne de contenu (760px), centré — pas toute la page. */
.wp-block-separator.sb-rule{
  border:0 !important;
  border-top:1px solid rgba(30,33,64,.18) !important;
  width:100%;
  max-width:var(--wp--style--global--content-size,760px) !important;
  margin-inline:auto;height:0;
  margin-block:1.75rem;opacity:1 !important;background:none;
}

/* Listes sur 2 colonnes (ex. Zone d'intervention Accueil) */
.sb-cols2{columns:2;column-gap:2rem}
.sb-cols2 li{break-inside:avoid}
@media (max-width:480px){.sb-cols2{columns:1}}

/* Harmonisation : les héros .sb-hero-short adoptent la taille aérée
   du hero standard (page Peinture) + trustbar chevauchante identique */
main:has(.sb-hero-short) .sb-trustbar{margin-top:-4rem !important}
@media (max-width:560px){
  main:has(.sb-hero-short) .sb-trustbar{margin-top:-3.4rem !important}
}

/* Avant/après : même cadre 1:1 sur les deux vignettes */
.sb-ba-item img{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto}

/* Duo texte / image en découpe diagonale (ex. papier peint).
   Carte blanche, texte à gauche, motif à droite avec bord en biais.
   L'image reste décorative (aria-hidden dans le HTML). */
.sb-diag{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;
  margin:1.5rem 0;border-radius:var(--sb-img-radius);
  box-shadow:var(--sb-img-shadow);overflow:hidden;background:#fff;
}
.sb-diag__txt{
  padding:clamp(1rem,3vw,1.9rem);
  display:flex;flex-direction:column;justify-content:center;gap:.6rem;
}
.sb-diag__txt h3,.sb-diag__txt p{margin:0}
.sb-diag__img{
  min-height:230px;background-size:cover;background-position:center;
  clip-path:polygon(20% 0,100% 0,100% 100%,0% 100%); /* bord gauche en diagonale */
}
@media (max-width:640px){
  .sb-diag{grid-template-columns:1fr}
  .sb-diag__img{min-height:150px;clip-path:polygon(0 16%,100% 0,100% 100%,0 100%)}
}

/* =====================================================================
   À AJOUTER À LA FIN DE assets/css/main.css
   Avis clients — [sb_avis]
   ===================================================================== */
.sb-avis{max-width:var(--wp--style--global--wide-size,1200px);margin-inline:auto}

.sb-avis-head{text-align:center;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.sb-avis-head h2{margin:0 0 .5rem}
.sb-avis-note{margin:0;color:var(--wp--preset--color--muted);font-size:1.05rem}
.sb-avis-note strong{color:var(--wp--preset--color--navy)}

.sb-avis-stars{color:#846A05;letter-spacing:2px;line-height:1} /* or foncé AA : 5.19:1 sur blanc */

.sb-avis-grid{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(1rem,2.2vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}

.sb-avis-card{background:#fff;border:var(--sb-img-border);
  border-radius:var(--sb-img-radius);box-shadow:var(--sb-img-shadow);
  padding:clamp(1.3rem,2.2vw,1.7rem);
  display:flex;flex-direction:column;gap:.9rem;
  transition:box-shadow .35s var(--sb-img-ease),transform .35s var(--sb-img-ease)}
.sb-avis-card:hover{box-shadow:var(--sb-img-shadow-hover);transform:translateY(-2px)}
.sb-avis-card .sb-avis-stars{font-size:1.05rem}
.sb-avis-card blockquote{margin:0;font-size:1.02rem;line-height:1.6;
  color:var(--wp--preset--color--contrast)}
.sb-avis-meta{margin:auto 0 0;font-size:.9rem;color:var(--wp--preset--color--muted)}
.sb-avis-auteur{font-weight:700;color:var(--wp--preset--color--navy)}

.sb-avis-cta{display:flex;flex-wrap:wrap;justify-content:center;
  gap:.8rem 1.2rem;margin:clamp(1.6rem,3vw,2.4rem) 0 0}
.sb-avis-cta a{font-weight:700;text-decoration:none;padding:.7rem 1.3rem;
  border-radius:4px;line-height:1.2;
  transition:background .2s var(--sb-img-ease),color .2s,border-color .2s}
.sb-avis-cta .sb-avis-btn{background:var(--wp--preset--color--bleu);color:#fff}
.sb-avis-cta .sb-avis-btn:hover,
.sb-avis-cta .sb-avis-btn:focus-visible{background:var(--wp--preset--color--navy)}
.sb-avis-cta .sb-avis-link{color:var(--wp--preset--color--bleu);
  border:1px solid var(--wp--preset--color--bord)}
.sb-avis-cta .sb-avis-link:hover,
.sb-avis-cta .sb-avis-link:focus-visible{border-color:var(--wp--preset--color--bleu)}
.sb-avis-cta a:focus-visible{outline:2px solid var(--wp--preset--color--bleu);outline-offset:2px}

/* Texte réservé aux lecteurs d'écran */
.sb-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Badge « 5/5 sur Google » — footer ([sb_lien_avis]) */
.sb-foot-avis{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;
  padding:.5rem .85rem;border-radius:999px;text-decoration:none !important;
  background:#fff;border:1px solid var(--wp--preset--color--bord);
  font-size:.9rem;font-weight:700;color:var(--wp--preset--color--navy) !important;
  transition:border-color .15s,transform .15s}
.sb-foot-avis:hover,.sb-foot-avis:focus-visible{
  border-color:var(--wp--preset--color--bleu);transform:translateY(-2px)}
.sb-foot-avis:focus-visible{outline:2px solid var(--wp--preset--color--bleu);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.sb-foot-avis:hover{transform:none}}

/* Accès direct « Dégât des eaux » dans le header — pastille + goutte d'eau */
.sb-nav .sb-nav-degat > a{
  display:inline-flex;align-items:center;gap:.4rem;
  background:#E7F1FE;color:var(--wp--preset--color--navy) !important;
  border:1px solid var(--wp--preset--color--bleu);
  padding:.35rem .9rem;border-radius:20px;font-weight:700;
  transition:background .18s ease,border-color .18s ease}
.sb-nav .sb-nav-degat > a::before{
  content:"";width:13px;height:16px;flex:none;
  background-color:var(--wp--preset--color--bleu);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C12 2 5 10 5 15a7 7 0 0 0 14 0C19 10 12 2 12 2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C12 2 5 10 5 15a7 7 0 0 0 14 0C19 10 12 2 12 2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:background-color .18s ease}
.sb-nav .sb-nav-degat > a:hover,
.sb-nav .sb-nav-degat > a:focus-visible{
  background:var(--wp--preset--color--navy);color:#fff !important;
  border-color:var(--wp--preset--color--navy)}
.sb-nav .sb-nav-degat > a:hover::before,
.sb-nav .sb-nav-degat > a:focus-visible::before{background-color:#fff}

/* ============================================================
   GALERIE EN DÉFILEMENT HORIZONTAL (accueil : « Un aperçu de mon travail »)
   Classe à ajouter sur le bloc Galerie : sb-gallery--scroll
   Lightbox et légendes natives conservées. La vignette suivante
   dépasse à droite : elle signale qu'on peut faire défiler.
   Padding : laisse de l'air à l'ombre et au survol (sinon rognés).
   ============================================================ */
.sb-gallery--scroll.wp-block-gallery.has-nested-images{
  display:flex !important;flex-wrap:nowrap !important;gap:1rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding:.5rem .3rem 1.2rem;
  scrollbar-width:thin;
  scrollbar-color:var(--wp--preset--color--bleu) var(--wp--preset--color--bord)}
.sb-gallery--scroll.wp-block-gallery.has-nested-images figure.wp-block-image{
  flex:0 0 clamp(230px,28vw,320px) !important;width:auto !important;
  scroll-snap-align:start}
.sb-gallery--scroll.wp-block-gallery.has-nested-images figure.wp-block-image img{
  height:clamp(220px,24vw,300px) !important}
.sb-gallery--scroll::-webkit-scrollbar{height:8px}
.sb-gallery--scroll::-webkit-scrollbar-track{background:var(--wp--preset--color--bord);border-radius:8px}
.sb-gallery--scroll::-webkit-scrollbar-thumb{background:var(--wp--preset--color--bleu);border-radius:8px}
@media (max-width:560px){
  .sb-gallery--scroll.wp-block-gallery.has-nested-images figure.wp-block-image{flex-basis:78vw !important}
  .sb-gallery--scroll.wp-block-gallery.has-nested-images figure.wp-block-image img{height:240px !important}
}

/* ============================================================
   BÉNÉFICES — liste à puces-icônes sur 2 colonnes (accueil)
   Remplace les cartes : plus léger, même code couleur d'icônes.
   ============================================================ */
.sb-benef{list-style:none;margin:1.2rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2.4rem}
.sb-benef li{display:flex;align-items:center;gap:.8rem;margin:0;
  font-weight:600;color:var(--wp--preset--color--navy)}
.sb-benef .sb-ico{width:38px;height:38px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;background:#E7F0FF}
.sb-benef .sb-ico svg{width:21px;height:21px;fill:none;stroke:#0060F0;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.sb-benef li:nth-child(6n+2) .sb-ico{background:#FCEBEA}.sb-benef li:nth-child(6n+2) .sb-ico svg{stroke:#E05C5C}
.sb-benef li:nth-child(6n+3) .sb-ico{background:#E4F6EA}.sb-benef li:nth-child(6n+3) .sb-ico svg{stroke:#24A866}
.sb-benef li:nth-child(6n+4) .sb-ico{background:#E4F5FB}.sb-benef li:nth-child(6n+4) .sb-ico svg{stroke:#1D9CC4}
.sb-benef li:nth-child(6n+5) .sb-ico{background:#FBF6D9}.sb-benef li:nth-child(6n+5) .sb-ico svg{stroke:#B59500}
.sb-benef li:nth-child(6n)   .sb-ico{background:#FBEAFA}.sb-benef li:nth-child(6n)   .sb-ico svg{stroke:#D451CE}
@media (max-width:520px){.sb-benef{grid-template-columns:1fr}}