/* Casaliège – Palette & UI tokens */
:root{
  --color-primary:#0B5D3B;
  --color-primary-hover:#095236;
  --color-primary-pressed:#07452D;

  --color-secondary:#A56E3A;
  --color-accent:#2B8C9E;

  --color-bg:#F7F4EF;
  --color-text:#1B1B1B;
  --color-border:#E6E0D8;

  --radius:12px;
  --shadow:0 6px 18px rgba(0,0,0,.08);
  --focus-ring: 0 0 0 3px rgba(43,140,158,.35);
}

/* Components */
.topbar{
  background: var(--color-bg);
  color: var(--color-text);
  font-size:.92rem;
  padding:.5rem .75rem;
  text-align:center;
  border-bottom:1px solid var(--color-border);
}

.button-primary, .single_add_to_cart_button{
  background:var(--color-primary);
  color:#fff;
  border:none;
  border-radius:var(--radius);
  padding:.9rem 1.2rem;
  font-weight:600;
  box-shadow:var(--shadow);
}
.button-primary:hover, .single_add_to_cart_button:hover{ background:var(--color-primary-hover); }
.button-primary:active, .single_add_to_cart_button:active{ background:var(--color-primary-pressed); }
.button-primary:focus-visible, .single_add_to_cart_button:focus-visible{ outline:none; box-shadow:var(--focus-ring); }

.pdp-rassurance{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:1rem 1.2rem;
  margin:1rem 0;
}
.pdp-rassurance h3{ margin:.2rem 0 .6rem; font-size:1.05rem; }
.pdp-rassurance li{ margin:.25rem 0; }

a{ color:var(--color-primary); }
a:hover{ text-decoration:underline; }

.badge{
  display:inline-block;
  background:var(--color-accent);
  color:#fff;
  padding:.25rem .5rem;
  border-radius:999px;
  font-size:.8rem;
}
/* --- Cartes valeurs Casaliège --- */
.card-valeur {
  background-color: #faf9f5;
  border: 1px solid #e5e2dc;
  border-radius: 10px;
  padding: 24px 20px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  color: #2e2e2e;
  font-family: 'Inter', system-ui, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  transition: all 0.25s ease;
}

/* --- Titre de chaque carte --- */
.card-valeur .titre {
  font-family: 'Fertigo Pro', serif;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 12px;
}

/* --- Effet au survol --- */
.card-valeur:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .card-valeur {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    min-height: auto;
    padding: 20px 16px;
  }
  .card-valeur .titre {   font-size: 15px;
  }
}
/* --- Section Notre histoire --- */
.section-histoire {
  max-width: 900px;
  margin: 0 auto;
  background-color: #f5f1ea;
  padding: 60px 24px;
  border-radius: 8px;
  border: 1px solid #e5e2dc;
}

/* Titre "Notre histoire" */
.section-histoire .histoire-titre {
  font-family: 'Fertigo Pro', serif;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b6256;
  margin: 0 0 24px 0;
  text-align: left;
}

/* Paragraphes */
.section-histoire .histoire-paragraphe {
  font-family: 'Inter', system-ui, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.8;
  font-weight: 400;
  color: #2e2e2e;
  text-align: justify;
  margin: 0 0 24px 0;
}

/* Dernier paragraphe sans marge basse */
.section-histoire .histoire-paragraphe:last-of-type {
  margin-bottom: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .section-histoire {
    padding: 40px 20px;
    border-radius: 6px;
  }

  .section-histoire .histoire-titre {
    font-size: 16px;
    text-align: center;
  }

  .section-histoire .histoire-paragraphe {
    font-size: 16px;
    line-height: 1.7;
    text-align: justify;
  }
}
.section-histoire { outline: 2px solid red !important; }
/* Hauteur générale de l'en-tête desktop */
.header-main { min-height: 115px; }

/* Menu desktop plus lisible */
.header-nav > li > a {
  font-size: 18px;
  font-weight: 600;
  padding: 18px 14px;
  letter-spacing: .2px;
}

/* État actif discret */
.header-nav > li.current-menu-item > a,
.header-nav > li.current-page-ancestor > a {
  border-bottom: 2px solid #111;
}

/* Header transparent sur hero : texte blanc + légère ombre, pas de voile */
.has-transparent .header-main { background: transparent; }
.is-transparent .header-nav > li > a,
.is-transparent .nav-right .icon-plain {
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* Quand on scrolle et que le header devient solide (si tu en mets un jour) */
.stuck .header-nav > li > a { color: #111 !important; }

/* Mobile / tablette : un cran plus petit */
@media (max-width: 1024px){
  .header-nav > li > a { font-size: 16px; padding: 14px 12px; }
}
/* — Corriger la "bande grise" en haut — */

/* 1) Fond du header non transparent (choisis la couleur) */
.site-header, .header, .header-wrapper, header#header, .ux-header {
  background: #FFFFFF;           /* ou #0F5132 ou var(--sand) si tu préfères */
}

/* 2) Compense la barre d’admin WordPress quand le header est fixed/sticky */
body.admin-bar .site-header,
body.admin-bar .header,
body.admin-bar header#header,
body.admin-bar .header-wrapper,
body.admin-bar .ux-header {
  top: 32px;
}
@media (max-width: 782px){
  body.admin-bar .site-header,
  body.admin-bar .header,
  body.admin-bar header#header,
  body.admin-bar .header-wrapper,
  body.admin-bar .ux-header {
    top: 46px;
  }
}

/* 3) Évite tout débordement lié aux sections en 100vw */
html { overflow-x: hidden; }
html, body { background:#FFFFFF; }  /* optionnel, si ton thème met un gris par défaut */
/* Header solide */
.ux-header, .site-header, header#header, .header, .header-wrapper {
  background:#fff;
  z-index: 1000;
}

/* 1) Supprime la marge du premier bloc après le header */
body > header + * { margin-top:0 !important; }
body > .ux-header + * { margin-top:0 !important; }
body > .site-header + * { margin-top:0 !important; }

/* Sécurité sur wrappers fréquents */
#main, .page-wrapper, .content-area, .site-content { margin-top:0 !important; }

/* 2) Si la marge persiste, casse la “collapse” côté header */
.ux-header, .site-header, header#header {
  padding-top:1px;         /* crée un contexte, empêche la marge de remonter */
  margin-top:-1px;         /* annule l’effet visuel */
}

/* 3) Admin-bar + header sticky (sinon bande résiduelle) */
body.admin-bar .ux-header.is-sticky,
body.admin-bar .site-header.is-sticky,
body.admin-bar header#header.is-sticky { top:32px; }
@media (max-width:782px){
  body.admin-bar .ux-header.is-sticky,
  body.admin-bar .site-header.is-sticky,
  body.admin-bar header#header.is-sticky { top:46px; }
}

/* 4) Évite un débordement horizontal qui révèle le fond en haut */
html, body { overflow-x:hidden; }
/* --- Garde le site tel quel, corrige juste la “bande” --- */

/* 0) Ne pas forcer le fond global en blanc */
html, body { background: transparent !important; overflow-x: hidden; }

/* 1) Header opaque (uniquement le header) */
.ux-header, #header { background:#fff !important; }
.ux-header .header-bg, #header .header-bg { background:#fff !important; }

/* 2) Empêche le margin-collapsing sous le header */
.ux-header, #header { padding-top:1px; margin-top:-1px; }

/* 3) Premier bloc: pas de marge haute qui remonte */
.ux-header + * , #header + * ,
#main > :first-child,
.page-wrapper > :first-child,
.content-area > :first-child,
#content > :first-child { margin-top:0 !important; }

/* 4) Top-bar: visible si contenu, sinon cachée sans créer de bande */
.header-top:empty, .top-bar:empty { display:none !important; }
.header-top:not(:empty), .top-bar:not(:empty) { display:block !important; background:transparent !important; }
/* ===== RESET des essais précédents sur le HERO ===== */
section[role="banner"]::before{ height:0 !important; }                 /* supprime le spacer */
section[role="banner"] > div{ padding-top:0 !important; margin-top:0 !important; }

/* ===== Décalage propre du bloc texte par transform (n’affecte pas la photo) ===== */
:root{
  --hero-shift-d: 96px;   /* desktop: ajuste ±10px si besoin */
  --hero-shift-m: 72px;   /* mobile: ajuste ±6–10px si besoin */
}

section[role="banner"]{ position:relative; }
section[role="banner"] > div:first-child{
  position:relative; z-index:2;
  transform: translateY(var(--hero-shift-d)) !important;
}
@media (max-width:1023px){
  section[role="banner"] > div:first-child{
    transform: translateY(var(--hero-shift-m)) !important;
  }
}

/* L’image reste neutre */
section[role="banner"] picture,
section[role="banner"] img{ display:block; width:100%; height:auto; }

/* 2e phrase: une seule ligne en desktop, normal en mobile */
@media (min-width:1024px){
  section[role="banner"] p{ white-space:nowrap; }
}
@media (max-width:1023px){
  section[role="banner"] p{ white-space:normal; }
}
/* RESET des essais précédents sur le hero */
section[role="banner"]::before{ content:none !important; height:0 !important; }
section[role="banner"] > div{ transform:none !important; margin-top:0 !important; }

/* Hero: ne pas passer derrière l'image */
section[role="banner"]{ position:relative; }
section[role="banner"] > div{ position:relative; z-index:2; }
section[role="banner"] picture,
section[role="banner"] img{ position:relative; z-index:1; display:block; }

/* Décaler le TEXTE sous le header fixe, sans toucher la photo */
:root{
  --hero-extra-d: 60px;  /* desktop: ajuste ±10px */
  --hero-extra-m: 40px;  /* mobile:  ajuste ±6–10px */
}

/* ton div a un padding inline "40px 24px 16px" => on le remplace */
@media (min-width:1024px){
  section[role="banner"] > div{
    padding: calc(40px + var(--hero-extra-d)) 24px 16px !important;
  }
}
@media (max-width:1023px){
  section[role="banner"] > div{
    padding: calc(40px + var(--hero-extra-m)) 24px 16px !important;
  }
}

/* Phrase d'accroche: 1 ligne en desktop, normal en mobile */
@media (min-width:1024px){
  section[role="banner"] p{ white-space:nowrap; }
}
@media (max-width:1023px){
  section[role="banner"] p{ white-space:normal; }
}
/* Plus d'espace sous les boutons du hero pour qu'ils ne touchent pas l'image */
@media (min-width:1024px){
  section[role="banner"] > div{
    padding-bottom: 70px !important;  /* était 16px */
  }
}
@media (max-width:1023px){
  section[role="banner"] > div{
    padding-bottom: 28px !important;
  }
}

/* Séparateur de sécurité, au cas où un thème remet un margin négatif sur l'image */
section[role="banner"]::after{
  content:""; display:block; height:10px;
}
/* === POURQUOI CASALIÈGE — FIX MOBILE (≤900px) === */
@media (max-width:900px){

  /* 0) Pas d'overflow qui coupe les cartes */
  #uni-wrap, #uni-inner, .col-left, .intro-media, #eng-grid, #trust-grid,
  .row, .section, .container { overflow: visible !important; }

  /* 1) Intro en 1 colonne */
  #intro{ grid-template-columns: 1fr !important; gap: 22px !important; }

  /* 2) Visuel atelier = sans rognage, aligné en haut */
  .left-visual{ height: auto !important; }
  .left-visual img{
    width:100% !important;
    height:auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    display:block;
  }

  /* 3) Grilles “Nos engagements” et “Avantages clients” en 1 colonne */
  #eng-grid, #trust-grid{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap:22px !important;
    width:100% !important;
  }
  .card{
    min-height: unset !important;
    padding:18px 20px !important;
    box-sizing:border-box;
  }

  /* 4) Évite une largeur > viewport (scroll horizontal) */
  html, body{ overflow-x:hidden; }
  #uni-inner{ padding-left:16px !important; padding-right:16px !important; }
}
/* Forcer l’affichage de la carte Boxtal */
[id*="parcel"], [class*="parcel-point"], [class*="boxtal"] {
  height: 400px !important;
  max-height: none !important;
  display: block !important;
}