/* --- HEADER EN OVERLAY SUR LE HERO --- */
header.theme-header,
.theme-header,
[data-area-theme-header] {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  width: 100%;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 9999; /* au-dessus du hero */
}
/* Supprime tout l'espace ajouté par le thème en haut de page */
html, body { margin: 0 !important; padding: 0 !important; }
.theme-content-area,
.theme-pages-full-stretch,
.theme-content-area .theme-pages-full-stretch:first-child,
.theme-content-area > section:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* --- HERO PLEIN ÉCRAN SANS BORD EN HAUT --- */
.gb-hero {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh;             /* plein écran */
  width: 100%;
  overflow: hidden;               /* coupe ce qui dépasse */
  background-size: cover !important;     /* si fond de section */
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* Tout le contenu du hero passe au-dessus de l'image absolue */
.gb-hero > * { position: relative; z-index: 1; }

/* Cas 1 : image du hero = élément <img> avec classe gb-hero-img */
.gb-hero .gb-hero-img {
  position: absolute !important;
  inset: 0;                       /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;              /* couvre tout l'écran */
  z-index: 0;                     /* derrière le texte du hero */
  pointer-events: none;           /* clics passent au contenu */
}

/* Cas 2 : image du hero = élément image sans classe (fallback) */
.gb-hero img,
.gb-hero [data-element-type="image"] img {
  /* S’applique seulement si tu n'as pas pu mettre gb-hero-img */
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Option : si le header recouvre le titre, décale légèrement le contenu du hero
   (décommente et ajuste la valeur si besoin) */
/*
:root { --gb-header-height: 72px; }
.gb-hero { padding-top: var(--gb-header-height); }
*/
/* ===== Réglages rapides ===== */
:root{
  /* Opacité du voile sur l'image du hero (0 = rien, 0.15 = léger, 0.35 = foncé) */
  --gb-hero-overlay: 0.5;
  /* Hauteur approx. du header pour le scroll d'ancre propre */
  --gb-header-h: 50px;
}

/* ===== Header fixe sans animation, overlay sur le hero ===== */
header.theme-header,
.theme-header,
[data-area-theme-header]{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100%;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 9999;
  /* coupe tout effet/animation du thème */
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* Pas d'espace en haut de page */
html, body{ margin:0 !important; padding:0 !important; }
/* Ancre qui ne passe pas sous le header */
html{ scroll-padding-top: var(--gb-header-h); }

/* ===== Hero plein écran ===== */
.gb-hero{
  position: relative;
  min-height: 100vh;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* on neutralise un éventuel overlay du thème */
.gb-hero::before{ background: transparent !important; }

/* Notre voile contrôlable par variable */
.gb-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--gb-hero-overlay));
  z-index: 0;
  pointer-events: none;
}

/* Image du hero en absolu derrière le contenu */
.gb-hero .gb-hero-img{
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* sous le voile et le contenu */
}

/* Contenu du hero au-dessus */
.gb-hero > *{ position: relative; z-index: 1; }

/*------------------------------------------------------------------------------------------------------------*/
/* ===================== NAV BAR ===================== */
/*------------------------------------------------------------------------------------------------------------*/
/* Overlay sur le hero, pas sticky, pas d'animation */
header.theme-header,
.theme-header,
[data-area-theme-header]{
  position: absolute !important;
  top: 0; left: 0; right: 0; width: 100%;
  background: transparent !important;
  border: 0 !important; box-shadow: none !important;
  transform: none !important; transition: none !important; animation: none !important;
  z-index: 9999;
}
/* Neutralise toute variante sticky forcée par le thème */
.theme-header.is-sticky, .theme-header.sticky, .theme-header.fixed,
.is-sticky .theme-header, .sticky .theme-header, .fixed .theme-header,
.zs-sticky .theme-header, .zs-sticky,
header[style*="position: fixed"], header[style*="position:sticky"]{
  position: absolute !important;
}
html{ scroll-padding-top: 0 !important; }
/*------------------------------------------------------------------------------------------------------------*/
/* ===================== LOGO DANS LE HERO ===================== */
/*------------------------------------------------------------------------------------------------------------*/
/* AJOUT DANS LE BUILDER : insère un widget Image (ton logo) dans le slide
   et donne-lui la classe: gb-hero-logo                                   */
:root{ --gb-header-h:80px; }  /* ajuste selon la hauteur de ta nav */

.theme-banner .zphero-slide{ position: relative; } /* contexte pour l'absolu */

.theme-banner img.gb-hero-logo,
.theme-banner .gb-hero-logo img{      /* marche si la classe est sur l'image ou son conteneur */
  position: absolute !important;
  left: 50%; transform: translateX(-50%);
  top: calc(var(--gb-header-h) + 16px);   /* descends/monte le logo ici */
  width: clamp(120px, 18vw, 240px);
  z-index: 50;                            /* au-dessus du voile du slide */
  pointer-events: none;
  display: block; height: auto;
}

/* Si par erreur la classe est posée sur une colonne/box, on annule ses contraintes */
.theme-banner .gb-hero-logo[data-element-type="column"],
.theme-banner .gb-hero-logo.zpcol{
  position: static !important; width:auto !important; transform:none !important;
}

/* (Optionnel) éclaircir légèrement le voile du slide, sans le supprimer */
.theme-banner .zpbanner-style::after{
  background-color: rgba(0,0,0,0.15) !important;
}
/*------------------------------------------------------------------------------------------------------------*/
/* ===== ÉTIQUETTES (pills) 100% statiques dans le hero pour mettre en avant les titres du positionnement GB ===== */
/*------------------------------------------------------------------------------------------------------------*/

/* conteneur des 3 étiquettes (optionnel) */
.gb-pills{ display:flex !important; justify-content:center; gap:16px; flex-wrap:wrap; }

/* style unique — compact — jamais étiré */
.gb-pill,
.gb-pills :is(a,button,[role="button"]).gb-pill{
  position:relative !important;
  display:inline-flex !important;
  align-items:center; justify-content:center;
  gap:10px;

  height:38px;
  padding:0 14px !important;
  white-space:nowrap;
  width:auto !important; min-width:0 !important; flex:0 0 auto !important;
  box-sizing:border-box;

  font-size:15px; font-weight:600; line-height:1;
  color:#5b4337 !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.16) !important;
  border-radius:9999px !important;
  box-shadow:0 1px 3px rgba(0,0,0,.06) !important;

  /* zéro interaction */
  cursor:default !important;
  pointer-events:none !important;               /* bloque hover/clic/focus */
  text-decoration:none !important;

  /* coupe TOUT effet/anim, même hérités */
  transition:none !important; animation:none !important;
  transform:none !important; filter:none !important;
  outline:0 !important;
  -webkit-tap-highlight-color:transparent;
  -webkit-appearance:none; appearance:none;

  overflow:hidden !important; background-clip:padding-box !important;
}

/* même rendu pour tous les pseudo-états */
.gb-pill:link,
.gb-pill:visited,
.gb-pill:hover,
.gb-pill:focus,
.gb-pill:active,
.gb-pill:focus-visible{
  color:#5b4337 !important; background:#fff !important;
  border:1px solid rgba(0,0,0,.16) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.06) !important;
}

/* supprime les surcouches utilisées par le thème pour le hover */
.gb-pill::before, .gb-pill::after,
.gb-pill *::before, .gb-pill *::after{
  content:none !important; display:none !important;
}

/* icônes compactes, figées */
.gb-pill svg, .gb-pill i, .gb-pill .zs-icon{
  width:16px; height:16px; flex:0 0 16px;
  color:currentColor; fill:currentColor; stroke:currentColor;
  transition:none !important;
}

/* anti-étirement si Zoho met des colonnes autour */
.gb-pills > [data-element-type="column"]{ flex:0 0 auto !important; width:auto !important; max-width:none !important; }
.gb-pills > [data-element-type="column"] > *{ width:auto !important; }

/* mobile un poil plus fin */
@media (max-width:480px){
  .gb-pill{ height:36px; padding:0 12px !important; font-size:14px; }
  .gb-pill svg, .gb-pill i, .gb-pill .zs-icon{ width:15px; height:15px; }
}
/*------------------------------------------------------------------------------------------------------------*/
/* ===============================
   SECTION .gb-gallery : CADRE images
   =============================== */
/*------------------------------------------------------------------------------------------------------------*/
:root{
  --gb-frame-max: 1200px;      /* largeur visuelle du cadre */
  --gb-frame-gutter: 56px;     /* marge latérale du cadre */
  --gb-frame-radius: 40px;     /* arrondi du cadre */
  --gb-frame-cream: #F3E9DD;   /* couleur du cadre */
}

.gb-gallery{
  position:relative !important;
  background:transparent !important;
  padding:28px 0 36px !important;
  overflow:visible !important;
}

/* fond + ombre du cadre, derrière le contenu */
.gb-gallery::before{
  content:"";
  position:absolute; inset:0 auto 0 50%;
  transform:translateX(-50%);
  width:min(var(--gb-frame-max), calc(100% - var(--gb-frame-gutter)));
  background:var(--gb-frame-cream);
  border-radius:var(--gb-frame-radius);
  box-shadow:0 24px 60px rgba(0,0,0,.18);
  z-index:0;
  pointer-events:none; /* ne bloque jamais les clics */
}

/* le contenu passe au-dessus */
.gb-gallery > *{ position:relative; z-index:1; }

/* neutralise les ornements du thème dans cette section */
.gb-gallery :is(h1,h2){ background:none !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; }
.gb-gallery :is(h1,h2)::before,
.gb-gallery :is(h1,h2)::after{ content:none !important; }
.gb-gallery [class*="section"],
.gb-gallery [class*="container"],
.gb-gallery .zsg-section-bg,
.gb-gallery .zsite-section-bg{ background:transparent !important; overflow:visible !important; }

/* petite ligne discrète (~60px) au-dessus des filtres */
.gb-gallery .gb-tabs::before{
  content:""; width:60px; height:2px; border-radius:2px;
  background:rgba(0,0,0,.12);
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
}

/* ===============================
   CARROUSEL #gb-gallery (centre)
   =============================== */
#gb-gallery{
  --maxw: 940px;                      /* largeur du carrousel */
  --gap: 16px;
  --big-h: clamp(210px, 34vh, 360px); /* hauteur image principale */
  --sm-h: calc((var(--big-h) - var(--gap))/2); /* 2 petites = 1 grande */
  --ink:#5b4636; --ink-soft:#8a725f; --accent:#874C22;

  max-width:var(--maxw) !important;
  margin:0 auto !important;
  padding:0 12px !important;
  position:relative !important;
}

/* grille 1 grande + 2 petites (hauteurs imposées) */
#gb-gallery .gb-view{ position:relative; overflow:visible; }
#gb-gallery .gb-compo{
  display:grid; gap:var(--gap);
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
}
#gb-gallery .gb-hero{ grid-column:1; grid-row:1 / span 2; height:var(--big-h); position:relative; min-height:0; }
#gb-gallery .gb-tile.t1{ grid-column:2; grid-row:1; height:var(--sm-h); min-height:0; }
#gb-gallery .gb-tile.t2{ grid-column:2; grid-row:2; height:var(--sm-h); min-height:0; }

/* cartes + images */
#gb-gallery figure{
  margin:0; overflow:hidden; border-radius:16px; background:#f7f3ef;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
#gb-gallery figure img{ width:100%; height:100%; object-fit:cover; display:block; }

/* pas d’assombrissement du visuel principal */
#gb-gallery .gb-hero::before,
#gb-gallery .gb-hero::after{ content:none !important; }
#gb-gallery .gb-hero img{ filter:none !important; opacity:1 !important; mix-blend-mode:normal !important; }

/* CTA */
#gb-gallery .gb-cta{
  position:absolute; right:12px; bottom:12px;
  display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
  padding:.6rem .95rem; border-radius:999px; font-weight:600;
  box-shadow:0 6px 14px rgba(0,0,0,.15); z-index:5; height:auto; line-height:1.1;
}

/* flèches */
#gb-gallery .gb-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:1px solid #e4dcd5;
  background:#fff; color:var(--ink); font-size:24px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.10); z-index:6;
}
#gb-gallery .gb-left{ left:8px; }  #gb-gallery .gb-right{ right:8px; }

/* dots */
#gb-gallery .gb-dots{ display:flex; gap:8px; justify-content:center; margin-top:12px; }
#gb-gallery .gb-dots .dot{ width:6px; height:6px; border-radius:50%; background:#cdbfb1; }
#gb-gallery .gb-dots .dot.is-active{ background:#5b4636; }

/* mobile */
@media (max-width:700px){
  #gb-gallery .gb-compo{ grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  #gb-gallery .gb-tile.t1, #gb-gallery .gb-tile.t2{ grid-column:1; }
  #gb-gallery .gb-left{ left:6px; }  #gb-gallery .gb-right{ right:6px; }
}
/*------------------------------------------------------------------------------------------------------------*/
/* ===============================
   FILTRES (onglets "pills") du carroussel
   =============================== */
/*------------------------------------------------------------------------------------------------------------*/
#gb-gallery .gb-tabs{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:10px; margin:8px 0 18px; position:relative;
}
#gb-gallery .gb-filter-label{
  font-size:.82rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft); margin-right:2px;
}
#gb-gallery .gb-chip{
  background:#fff !important; color:var(--ink) !important;
  border:1px solid #e6ddd5 !important;
  padding:.5rem .9rem !important; border-radius:999px !important;
  font-weight:700 !important;
  box-shadow:0 4px 10px rgba(0,0,0,.06) !important;
  transition:box-shadow .2s, transform .2s !important;
  border-bottom:none !important;
}
#gb-gallery .gb-chip:hover{ box-shadow:0 8px 18px rgba(0,0,0,.10) !important; transform:translateY(-1px); }
#gb-gallery .gb-chip.active{
  background:var(--accent) !important; color:#fff !important; border-color:transparent !important;
  box-shadow:0 8px 18px rgba(135,76,34,.25) !important;
}

/* coupe toute grosse ligne horizontale que le thème pourrait ajouter */
.gb-gallery .section-divider,
.gb-gallery .z-divider,
.gb-gallery [style*="border-top"]{ border-top:none !important; }
/* ====== GB – Nettoyage des lignes parasites ====== */
/* Couper toute grande ligne séparatrice ajoutée par le thème */
.gb-gallery hr,
.gb-gallery [role="separator"],
.gb-gallery .section-divider,
.gb-gallery .z-divider,
.gb-gallery [class*="divider"],
.gb-gallery [style*="border-top"]{
  display:none !important;
  border:0 !important;
  height:0 !important;
}

/* Si tu ne veux PAS la petite ligne de 60px au-dessus des filtres, dé-commente : */
/* #gb-gallery .gb-tabs::before{ content:none !important; } */

/* ====== GB – Garder seulement le cadre de SECTION, pas de cadre sur les images ====== */
#gb-gallery figure{
  background:transparent !important;
  box-shadow:none !important;          /* enlève l’ombre autour des images */
}
#gb-gallery .gb-hero,
#gb-gallery .gb-tile{
  border-radius:14px !important;       /* coins doux seulement */
  overflow:hidden !important;
}

/* ====== GB – Images moins “zoomées” (recadrage plus doux) ====== */
#gb-gallery figure img{
  object-fit:cover !important;         /* conserve le plein cadre */
  object-position:50% 50% !important;  /* centre proprement (évite les coupes bizarres) */
}
/* — Option : pour voir 100% de la photo (avec bandes latérales), utilise CONTAIN :
#gb-gallery figure img{ object-fit:contain !important; background:#f6f1ec !important; }
*/

/* ====== GB – Galerie un peu plus haute (aspect plus carré) ====== */
#gb-gallery{
  --big-h: clamp(260px, 42vh, 500px) !important; /* ↑ augmente la hauteur de la grande image */
  --sm-h: calc((var(--big-h) - var(--gap)) / 2) !important;
}
/* ========== GB — PATCH RAPIDE ========== */

/* 0) Titre/desc qui chevauchent : on redonne de l'air au carrousel */
.gb-gallery #gb-gallery{ margin-top:16px !important; }

/* 1) Supprimer TOUT séparateur imposé par le thème dans cette section */
.gb-gallery hr,
.gb-gallery [role="separator"],
.gb-gallery .section-divider,
.gb-gallery .z-divider,
.gb-gallery [class*="divider"],
.gb-gallery [style*="border-top"]{
  display:none !important;
  border:0 !important;
  height:0 !important;
}

/* 2) Garder UNIQUEMENT le cadre de la SECTION (fond crème),
      supprimer le cadre/ombre/radius autour du carrousel */
.gb-gallery > div:not(#gb-gallery),
.gb-gallery > div:not(#gb-gallery) > div{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
}

/* 3) Pas d'ombre/fond sur les cartes images */
#gb-gallery figure{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}
#gb-gallery .gb-hero,
#gb-gallery .gb-tile{
  border-radius:14px !important;
  overflow:hidden !important;
}

/* 4) Voir les images ENTIERES (pas coupées) */
#gb-gallery figure img{
  object-fit:contain !important;       /* <= montre 100% de la photo */
  object-position:center !important;
  background:#f6f1ec !important;       /* petite teinte derrière si bandes */
}
/* (Si tu préfères recadrer plein cadre : remets object-fit:cover) */

/* 5) Hauteur réellement appliquée (et un peu plus carrée) */
#gb-gallery{
  --big-h: clamp(300px, 42vh, 460px) !important;  /* ↑ augmente à volonté */
  --sm-h: calc((var(--big-h) - var(--gap)) / 2) !important;
}
#gb-gallery .gb-hero{ height:var(--big-h) !important; }
#gb-gallery .gb-tile.t1,
#gb-gallery .gb-tile.t2{ height:var(--sm-h) !important; }

/* 6) Petite ligne décorative que tu ne veux pas ? on la coupe aussi */
#gb-gallery .gb-tabs::before{ content:none !important; }
/* === GB — correctifs galerie === */

/* 1) Hauteur un peu plus carrée (grande image) */
#gb-gallery{
  --big-h: clamp(260px, 42vh, 420px) !important;
  --sm-h: calc((var(--big-h) - var(--gap)) / 2) !important;
}

/* 2) Titre + description : jamais superposés */
.gb-gallery h1{
  margin: 0 0 12px !important;
  line-height: 1.2 !important;
}
.gb-gallery h1 + *{           /* le paragraphe sous le H1 */
  margin-top: 8px !important;
}

/* 3) On retire le “deuxième cadre” (fond/ombre autour du carrousel) */
.gb-gallery #gb-gallery,
.gb-gallery .gb-view,
.gb-gallery .gb-compo{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 4) Images : on revient comme avant (remplissent sans bandes) */
#gb-gallery figure img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;   /* = recadrage propre */
}

/* 5) Petite ligne de séparation indésirable : on la neutralise au cas où */
.gb-gallery hr,
.gb-gallery .section-divider,
.gb-gallery .z-divider,
.gb-gallery [style*="border-top"]{
  border: 0 !important;
  height: 0 !important;
  box-shadow: none !important;
}
/*------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------------------*/
/* Taille des cartes (colonne) */
.gb-savoirfaire .gb-cards-row > *{
  flex: 1 1 320px;            /* largeur cible par carte */
  max-width: 420px;           /* empêche d’être trop large */
}
/* Responsive */
@media (max-width: 960px){
  .gb-savoirfaire .gb-cards-row > *{ flex-basis: 46%; }
}
@media (max-width: 640px){
  .gb-savoirfaire .gb-cards-row > *{ flex-basis: 100%; }
}
/* DEBUG: vérifie qu'on cible la bonne section (tu dois voir un liseré) */
.gb-savoirfaire{ outline:2px dashed #00bfa5 !important; }
/* --- OPTION 1 : tu as bien pu mettre la classe sur la rangée des 3 cartes --- */
.gb-savoirfaire .gb-cards-row{
  max-width:1200px; margin:0 auto; padding-inline:clamp(12px,4vw,32px);
  display:flex !important; justify-content:center; align-items:stretch;
  gap:28px; flex-wrap:wrap;
}
.gb-savoirfaire .gb-cards-row > *{
  flex:1 1 320px; max-width:420px;
}
/* Neutralise les colonnes/float du thème dans cette rangée */
.gb-savoirfaire .gb-cards-row > *{
  float:none !important; width:auto !important; max-width:420px !important;
}
/* --- OPTION 2 (fallback) : si tu n'as PAS pu mettre gb-cards-row --- */
/* On attrape automatiquement la première rangée de la section qui a >= 3 enfants. */
.gb-savoirfaire :where(.row,.zs-row,.theme-row,[class*="row"]):has(> *:nth-child(3)){
  max-width:1200px; margin:0 auto; padding-inline:clamp(12px,4vw,32px);
  display:flex !important; justify-content:center; align-items:stretch;
  gap:28px; flex-wrap:wrap;
}
.gb-savoirfaire :where(.row,.zs-row,.theme-row,[class*="row"]):has(> *:nth-child(3)) > *{
  flex:1 1 320px; max-width:420px; float:none !important; width:auto !important;
}
/* Responsive */
@media (max-width:960px){
  .gb-savoirfaire .gb-cards-row > *,
  .gb-savoirfaire :where(.row,.zs-row,.theme-row,[class*="row"]):has(> *:nth-child(3)) > *{
    flex-basis:46%;
  }
}
@media (max-width:640px){
  .gb-savoirfaire .gb-cards-row > *,
  .gb-savoirfaire :where(.row,.zs-row,.theme-row,[class*="row"]):has(> *:nth-child(3)) > *{
    flex-basis:100%;
  }
}
/* ================= PUCE → FLÈCHE (SAVOIR-FAIRE) ================= */
/* Mets la classe .gb-savoirfaire sur la section des 3 cartes */
:root{
  --gb-bullet-color:#5A8B6A;
  --gb-bullet-size:18px;
  --gb-bullet-gap:12px;
}
.gb-savoirfaire p,
.gb-savoirfaire ul,
.gb-savoirfaire li{ text-align:left !important; }

.gb-savoirfaire ul{ list-style:none; margin:0; padding:0; }

.gb-savoirfaire li{
  display:flex; align-items:flex-start; gap:var(--gb-bullet-gap);
  margin:12px 0;
}
.gb-savoirfaire li::before{
  content:"";
  flex:0 0 var(--gb-bullet-size);
  height:var(--gb-bullet-size);
  margin-top:4px;
  background:var(--gb-bullet-color);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12h12m-6-6 6 6-6 6" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12h12m-6-6 6 6-6 6" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
}
@media (max-width:480px){
  :root{ --gb-bullet-size:20px; }
}
/* Centre la section et limite la largeur utile */
.gb-savoirfaire .gb-cards-row{
  max-width: 1200px;          /* ajuste: 1000–1280 */
  margin: 0 auto;             /* centre dans la page */
  padding-inline: clamp(12px,4vw,32px);
  
  /* remplace la mise en page thème par un flex centré */
  display: flex !important;
  justify-content: center;    /* cartes centrées */
  align-items: stretch;
  gap: 28px;
  flex-wrap: wrap;
}
/* Contrainte + centrage de la rangée qui porte la classe gb-cards-row */
.gb-cards-row{
  box-sizing:border-box;
  max-width:1200px !important;      /* largeur utile de la zone cartes */
  margin-left:auto !important;
  margin-right:auto !important;
  padding-inline:clamp(12px,4vw,32px);
  display:flex !important;          /* on remplace la grille du thème */
  justify-content:center !important;
  align-items:stretch !important;
  gap:28px !important;
  flex-wrap:wrap !important;
}
/* Neutralise les largeurs/float imposés par le thème sur les colonnes */
.gb-cards-row > [data-element-type="column"]{
  float:none !important;
  width:auto !important;
  max-width:420px !important;       /* largeur max d'une carte */
  flex:1 1 320px !important;        /* largeur cible d'une carte */
}
/* Assure que le contenu de chaque carte remplit la hauteur */
.gb-cards-row > [data-element-type="column"] > .zpdefault-section,
.gb-cards-row > [data-element-type="column"] > *{
  height:100%;
}
/* Responsive */
@media (max-width:960px){
  .gb-cards-row > [data-element-type="column"]{ flex-basis:46% !important; }
}
@media (max-width:640px){
  .gb-cards-row > [data-element-type="column"]{ flex-basis:100% !important; }
}
/* Centre la RANGÉE des cartes quoi qu'il arrive */
.gb-cards{
  /* largeur bornée et centrée */
  width: min(1200px, 100%) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-inline: clamp(16px,4vw,32px);

  /* grille 3 colonnes */
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:28px;
  justify-content:center;   /* centre la grille si elle est plus étroite */
  justify-items:stretch;
}
/* ====== Mise en page de la rangée ====== */
.gb-cards{
  max-width:1200px; margin:0 auto;
  display:grid !important; gap:28px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
@media (max-width:960px){ .gb-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .gb-cards{ grid-template-columns:1fr; } }

/* ====== Carte (coins carrés, contenu centré en haut, liste à gauche) ====== */
:root{
  --card-radius:0px;          /* 0 = coins carrés ; mets 8px si tu veux un léger arrondi */
  --card-pad:26px;
  --card-border: rgba(0,0,0,.10);
  --card-shadow: 0 10px 24px rgba(0,0,0,.08);
  --text-soft:#6c5a4d;        /* texte “secondaire” */
}
.gb-card{
  background:#fff; border:1px solid var(--card-border);
  border-radius:var(--card-radius); box-shadow:var(--card-shadow);
  padding:var(--card-pad); height:100%;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;           /* titre + icône centrés */
}
.gb-card h3, .gb-card h4{ margin:12px 0 10px; font-weight:700; }

/* Premier petit paragraphe de la carte = style distinct */
.gb-card p:first-of-type{
  color:var(--text-soft); font-size:16px; line-height:1.5;
  margin:8px 0 12px;
}

/* La liste reste à gauche (lisibilité) */
.gb-card ul{ width:100%; margin-top:8px; text-align:left; }

/* (si tu utilises mes flèches vertes ailleurs, ça marche aussi ici) */

.gb-savoirfaire .gb-lead{
  text-align:center !important;
  max-width:200ch;
  margin:0 auto 28px;
  font-size:clamp(16px,1.6vw,18px);
  line-height:1.6;
  color:#6c5a4d;
}
/* Centre la “description” + tout son contenu */
.gb-savoirfaire .gb-lead,
.gb-savoirfaire .gb-lead p,
.gb-savoirfaire .gb-lead *{
  text-align:center !important;
}

/* Optionnel : style propre façon sous-titre */
.gb-savoirfaire .gb-lead{
  display:inline-block;              /* se réduit à la largeur du texte */
  margin:0 auto 18px;                /* centre le bloc */
  font-size:clamp(18px,1.4vw,24px);
  line-height:1.35;
  color:#6f6f6f;
  border-bottom:1px solid #4a463f;   /* petit soulignement sous le texte */
  padding-bottom:8px;
}
/* Responsive */
@media (max-width:960px){ .gb-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .gb-cards{ grid-template-columns:1fr; } }

/* Neutralise les offsets/marges inline que Zoho peut injecter */
.gb-cards[style*="inset-inline-start"],
.gb-cards[style*="left"]{
  left:0 !important; inset-inline-start:0 !important;
}
.gb-cards[style*="margin-inline-start"]{ margin-inline-start:auto !important; }

/* Chaque colonne n'étire rien et centre la CARTE à l'intérieur */
.gb-cards > [data-element-type="column"]{
  display:flex !important;
  justify-content:center;   /* place la carte au centre de la cellule */
  align-items:stretch;
}
.gb-cards > [data-element-type="column"] > *{
  flex:0 1 auto !important; /* la carte garde sa largeur naturelle */
  width:100%;               /* ou 100% si tu veux qu’elle remplisse la colonne */
}
/* ================== SAVOIR-FAIRE — +large +aéré ================== */

/* largeur utile de la rangée + plus d’espace entre cartes */
.gb-savoirfaire .gb-cards,
.gb-savoirfaire .gb-cards-row{
  max-width: 1380px !important;                /* avant ~1200 */
  padding-inline: clamp(16px, 3vw, 40px) !important;
  gap: 40px !important;                         /* espace horizontal/vertical */
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ----- Variante GRID (.gb-cards) ----- */
.gb-savoirfaire .gb-cards{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(420px, 1fr)) !important; /* cartes plus larges */
  justify-content:center !important; /* centre la grille si elle est plus étroite */
}
@media (max-width: 1200px){
  .gb-savoirfaire .gb-cards{ grid-template-columns: repeat(2, minmax(380px, 1fr)) !important; }
}
@media (max-width: 760px){
  .gb-savoirfaire .gb-cards{ grid-template-columns: 1fr !important; }
}

/* ----- Variante FLEX (.gb-cards-row) ----- */
.gb-savoirfaire .gb-cards-row{
  display:flex !important; justify-content:center !important; align-items:stretch !important;
  flex-wrap:wrap !important;
}
.gb-savoirfaire .gb-cards-row > [data-element-type="column"]{
  float:none !important; width:auto !important;
  flex: 1 1 420px !important;                   /* largeur cible */
  max-width: 520px !important;                  /* peut s’étaler assez large */
}
@media (max-width: 1120px){
  .gb-savoirfaire .gb-cards-row > [data-element-type="column"]{ flex-basis:48% !important; }
}
@media (max-width: 760px){
  .gb-savoirfaire .gb-cards-row > [data-element-type="column"]{ flex-basis:100% !important; }
}

/* ----- Respiration à l’intérieur des cartes ----- */
.gb-savoirfaire .gb-card{
  padding: 34px 30px !important;                /* + marge intérieure */
  box-shadow: 0 14px 28px rgba(0,0,0,.10) !important;
}
.gb-savoirfaire .gb-card h3,
.gb-savoirfaire .gb-card h4{ margin: 6px 0 10px !important; }
.gb-savoirfaire .gb-card ul{ margin-top: 14px !important; }
.gb-savoirfaire .gb-card li{ margin: 8px 0 !important; }  /* espace entre points */
/* ================== SAVOIR-FAIRE — RELIEF + ICÔNES UNIFORMES ================== */
:root{
  /* couleur douce et chaleureuse pour les pictos */
  --gb-icon: #B79B6A;            /* or doux ; change si tu veux plus/moins chaud */
  --gb-shadow-1: 0 10px 22px rgba(0,0,0,.10);
  --gb-shadow-2: 0 28px 44px rgba(0,0,0,.16);
  --gb-shadow-3: 0 2px 0 rgba(255,255,255,.6) inset;
}

/* ——— RELIEF marqué (sans baver en dehors des coins arrondis) ——— */
.gb-savoirfaire .gb-card{
  position: relative;
  background: #fff;
  /* ombre “locale” + une grande ombre portée (drop-shadow) pour le relief */
  box-shadow: var(--gb-shadow-1), var(--gb-shadow-3) !important;
  filter: drop-shadow(var(--gb-shadow-2));   /* suit bien le border-radius */
  border-radius: 18px !important;
  padding: 34px 30px !important;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.gb-savoirfaire .gb-card:hover{
  transform: translateY(-2px);
  /* un peu plus d’ombre au survol */
  filter: drop-shadow(0 34px 60px rgba(0,0,0,.20));
  box-shadow: 0 12px 26px rgba(0,0,0,.12), var(--gb-shadow-3) !important;
}

/* ——— Harmonisation couleur des icônes ——— */
/* 1) Si tes pictos sont des SVG inline → on force fill/stroke */
.gb-savoirfaire .gb-card svg [fill],
.gb-savoirfaire .gb-card svg path,
.gb-savoirfaire .gb-card svg circle,
.gb-savoirfaire .gb-card svg rect{
  fill: var(--gb-icon) !important;
  stroke: var(--gb-icon) !important;
}

/* 2) Si ce sont des <img> (PNG/SVG) → on les teinte avec filter */
.gb-savoirfaire .gb-card img[class*="icon"],
.gb-savoirfaire .gb-card img[alt*="icon"],
.gb-savoirfaire .gb-card img[alt*="icone"],
.gb-savoirfaire .gb-card img[alt*="icône"]{
  /* convertit en “monochrome” doré doux */
  filter: brightness(0) saturate(100%)
          sepia(18%) saturate(400%) hue-rotate(10deg)
          brightness(0.95) contrast(1.05);
  /* petit gabarit cohérent si besoin */
  width: 56px; height: auto; display:block; margin: 0 auto 6px;
}

/* Option : cercle de fond très léger derrière l'icône (look premium) */
.gb-savoirfaire .gb-card .gb-ico-wrap{
  width: 64px; height: 64px; margin: 0 auto 8px;
  border-radius: 999px;
  background: linear-gradient(#f5f1e7, #eee7d8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 6px 14px rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center;
}
.gb-savoirfaire .gb-card .gb-ico-wrap > svg,
.gb-savoirfaire .gb-card .gb-ico-wrap > img{ width: 34px; height: 34px; }

/* ——— Un peu plus d’air entre les cartes ——— */
.gb-savoirfaire .gb-cards,
.gb-savoirfaire .gb-cards-row{
  max-width: 1380px !important;
  gap: 40px !important;
}
.gb-savoirfaire .gb-cards{
  grid-template-columns: repeat(3, minmax(420px,1fr)) !important;
}
@media (max-width:1200px){
  .gb-savoirfaire .gb-cards{ grid-template-columns:repeat(2,minmax(380px,1fr)) !important; }
}
@media (max-width:760px){
  .gb-savoirfaire .gb-cards{ grid-template-columns:1fr !important; }
}
/* Supprimer tout liseré de debug sur la section */
.gb-savoirfaire { border: 0 !important; outline: 0 !important; box-shadow: none !important; }

/* Conserver un focus visible pour l’accessibilité */
.gb-savoirfaire :focus { outline: 2px solid #7B5F4E; outline-offset: 3px; }
/*------------------------------------------------------------------------------------------------------------*/
/* ====== Bloc “preuves social, labels & engagements” — carte unique, minimal & noble ====== */
/*------------------------------------------------------------------------------------------------------------*/
:root{
  --ink:        #5b4636;              /* texte principal */
  --ink-soft:   #8a725f;              /* texte secondaire */
  --cream:      #ffffff;              /* fond de la carte */
  --border:     #efe7df;              /* fin liseré */
  --shadow:     0 16px 44px rgba(0,0,0,.10), 0 3px 12px rgba(0,0,0,.06);
  --r:          28px;                 /* arrondi de la carte */
}

/* Carte unique (pas de double cadre) */
.gb-proof{
  max-width: 940px;
  margin: 0 auto 56px;
  padding: clamp(20px, 3.2vw, 32px) clamp(18px, 3.6vw, 36px);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  text-align: center;
  position: relative;
  isolation: isolate;                 /* ombre propre */
}

/* Neutralise tout cadre/fond interne que le thème pourrait injecter */
.gb-proof .zsg-section-bg,
.gb-proof .zsite-section-bg,
.gb-proof [class*="card"],
.gb-proof [class*="panel"],
.gb-proof [class*="wrap"],
.gb-proof [class*="wrapper"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.gb-proof hr{ display:none !important; }

/* Titre + filet discret */
.gb-proof > h2{
  margin: 0 0 14px;
  color: var(--ink);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .01em;
}
.gb-proof > h2::after{
  content:"";
  display:block;
  width:72px; height:2px; border-radius:2px;
  margin:10px auto 0;
  background:#cbb4a3;
}

/* Liste des deux labels */
.gb-proof-list{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap: clamp(28px, 6vw, 72px);
  margin-top:6px;
}

.gb-proof-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:var(--ink);
}

/* Logos nets, non déformés */
.gb-proof-item img{
  height: clamp(54px, 7.2vw, 72px);
  width:auto;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 0 0 transparent); /* coupe toute ombre héritée */
}

/* Légendes */
.gb-proof-item figcaption{
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink);
}

/* Mobile */
@media (max-width:600px){
  .gb-proof{ padding:18px 18px 22px; }
  .gb-proof-item img{ height:56px; }
  .gb-proof-list{ gap:22px; }
}
/* Phrase sous le titre */
.gb-proof .gb-proof-desc{
  margin: 6px 0 22px;          /* espace entre le titre et les logos */
  color: var(--ink-soft);       /* texte doux */
  font-weight: 500;
  line-height: 1.5;
}
/* >>> AJOUT : agrandir uniquement le logo Artisan */
.gb-proof-item.is-artisan img{
  height: clamp(72px, 9vw, 110px);  /* plus grand que 54–72px */
  width: auto;
}

/* Harmoniser l’espacement si besoin */
.gb-proof-item.is-artisan { gap: 12px; }

/* Mobile */
@media (max-width:600px){
  .gb-proof-item.is-artisan img{ height: 72px; }  /* + grand que 56px mobile */
}