/* =========================================================
   Les Jardins de Lutz Crespin — Shared charter (source-aligned)
   ========================================================= */
:root {
  --nav-h: 116px;
  --primary: #370f00;
  --primary-container: #591e00;
  --primary-dark: #3d1400;
  --secondary: #9d3d5c;
  --secondary-container: #fe8aab;
  --accent: #e20079;
  --accent-deep: #c20065;
  --surface: #f8f9fb;
  --surface-container: #eceef0;
  --surface-container-high: #e7e8ea;
  --surface-container-highest: #e1e3e5;
  --surface-container-low: #f2f4f6;
  --on-surface: #191c1e;
  --on-surface-variant: #54433c;
  --outline-variant: #dac1b8;
  --white: #ffffff;
  --ease: cubic-bezier(.2,.7,.2,1);
  --wrap: 1440px;
}

*, ::before, ::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100vw; }
body {
  background: var(--surface);
  color: var(--on-surface);
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .headline {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0;
}
p { margin: 0 0 1rem; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }
/* Hide icon text until the ligature font is loaded to avoid flash-of-text */
html:not(.fonts-ready) .material-symbols-outlined { visibility: hidden; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

/* ============ NAV (sticky 88px, mega-menus) ============ */
.site-nav {
  background: var(--primary-container);
  box-shadow: 0 4px 40px rgba(55,15,0,0.04);
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
}
.site-nav .nav-inner {
  display: flex; justify-content: space-between; align-items: center;
  height: 100%; padding: 0 clamp(1.25rem, 4vw, 3rem);
  max-width: var(--wrap); margin: 0 auto;
  position: relative;
}
.nav-brand {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; text-transform: uppercase;
  color: var(--white); font-size: 1.5rem;
  letter-spacing: -0.025em; text-decoration: none;
}
.nav-items {
  display: none; gap: 2rem; align-items: center;
  height: 100%;
}
@media (min-width: 1024px) { .nav-items { display: flex; } }
.nav-item {
  position: relative;
  padding: 1.5rem 0;
  display: flex; align-items: center; gap: 0.25rem;
  font-family: 'Work Sans', sans-serif;
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.85rem; font-weight: 500;
  color: rgba(255,255,255,0.9); text-decoration: none;
  transition: all 0.3s var(--ease);
  cursor: pointer;
}
.nav-item:hover { color: var(--accent); transform: scale(1.02); }
.nav-item.active { color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: calc(1.5rem - 2px); }
.nav-item .caret { font-size: 1rem; transition: transform 0.3s var(--ease); }
.nav-item:hover .caret { transform: rotate(180deg); }

.mega {
  position: fixed; left: 0; right: 0; top: var(--nav-h); width: 100vw;
  background: var(--primary-dark); color: var(--white);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.3s var(--ease);
  box-shadow: 0 30px 60px rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.1);
  z-index: 60;
}
.nav-item-wrap:hover .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: 2.5rem clamp(1.5rem, 4vw, 3rem);
  display: grid; grid-template-columns: 1fr 2fr; gap: 3rem;
}
.mega-title-col { border-right: 1px solid rgba(255,255,255,0.1); padding-right: 2rem; }
.mega-title-col h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.5rem; color: var(--accent);
  margin-bottom: 1rem;
}
.mega-title-col p { color: rgba(255,255,255,0.7); font-size: 0.85rem; line-height: 1.6; }
.mega-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.mega-links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.mega-links a, .mega-links .group-label { display: flex; align-items: flex-start; gap: 0.5rem; text-decoration: none; color: rgba(255,255,255,0.85); font-size: 0.9rem; transition: color 0.25s var(--ease); }
.mega-links a:hover { color: var(--accent); }
.mega-links .arrow { color: var(--accent); font-weight: 700; line-height: 1; margin-top: 2px; }
.mega-links .sub {
  font-size: 0.72rem; color: rgba(255,255,255,0.5); margin-top: 0.25rem;
  display: flex; flex-direction: column; gap: 0.2rem;
}

.nav-cta {
  background: var(--accent); color: var(--white);
  padding: 0.7rem 2rem; border-radius: 9999px;
  font-weight: 700; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  text-decoration: none;
  transition: all 0.3s var(--ease);
  box-shadow: 0 8px 20px rgba(226,0,121,0.2);
}
.nav-cta:hover { background: var(--accent-deep); transform: scale(1.03); }
.nav-right { display: flex; align-items: center; gap: 1rem; }
.nav-cta.mobile-hide { display: none; }
@media (min-width: 768px) { .nav-cta.mobile-hide { display: inline-flex; } }
.nav-burger {
  background: transparent; border: none; color: var(--white);
  cursor: pointer; padding: 0.5rem;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.3s var(--ease);
}
.nav-burger:hover { color: var(--accent); }
.nav-burger .material-symbols-outlined { font-size: 2rem; }

/* Sidebar */
.sidebar-overlay {
  position: fixed; inset: 0; background: rgba(55,15,0,0.8); backdrop-filter: blur(4px);
  z-index: 80; opacity: 0; visibility: hidden; transition: all 0.3s var(--ease);
}
.sidebar-overlay.open { opacity: 1; visibility: visible; }
.sidebar {
  position: fixed; top: 0; right: 0; height: 100%;
  width: min(450px, 90vw);
  background: var(--primary-dark); color: var(--white);
  z-index: 90; transform: translateX(100%); transition: transform 0.3s var(--ease);
  display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(0,0,0,0.3);
}
.sidebar.open { transform: translateX(0); }
.sidebar-head {
  padding: 2.5rem; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-head .title {
  font-family: 'Oswald', sans-serif; font-size: 1.5rem; text-transform: uppercase; font-weight: 700;
}
.sidebar-close {
  background: rgba(255,255,255,0.1); border: none; color: var(--white);
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; transition: all 0.3s var(--ease);
}
.sidebar-close:hover { background: rgba(255,255,255,0.2); color: var(--accent); }
.sidebar-body { padding: 2.5rem; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2.5rem; }
.sidebar-mobile-nav { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 2rem; }
@media (min-width: 1024px) { .sidebar-mobile-nav { display: none; } }
.sidebar-mobile-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.sidebar-mobile-nav a {
  font-family: 'Oswald', sans-serif; font-size: 0.85rem; text-transform: uppercase; font-weight: 700;
  color: rgba(255,255,255,0.9); text-decoration: none; letter-spacing: 0.15em;
}
.sidebar-mobile-nav a:hover { color: var(--accent); }
.sidebar-section h4 {
  font-family: 'Oswald', sans-serif; font-size: 0.85rem; letter-spacing: 0.15em;
  color: var(--accent); margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.sidebar-contacts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-contacts li { display: flex; align-items: flex-start; gap: 1.1rem; color: rgba(255,255,255,0.8); font-size: 0.9rem; line-height: 1.55; }
.sidebar-contacts li a { display: inline-block; padding: 0.15rem 0; }
.sidebar-contacts .ic { background: rgba(226,0,121,0.1); color: var(--accent); padding: 0.5rem; border-radius: 50%; flex-shrink: 0; }
.sidebar-contacts .name { display: block; font-family: 'Oswald', sans-serif; font-weight: 700; color: var(--white); font-size: 0.85rem; letter-spacing: 0.1em; margin-bottom: 0.3rem; }
.sidebar-socials { display: flex; gap: 0.85rem; margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); }
.sidebar-socials a {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: var(--white);
  display: grid; place-items: center; transition: all 0.3s var(--ease);
}
.sidebar-socials a:hover { background: var(--accent); transform: scale(1.08); }
.sidebar-socials svg { width: 18px; height: 18px; fill: currentColor; }

/* ============ HERO (interior) ============ */
.page-hero {
  position: relative;
  min-height: 280px;
  padding: 4rem 0 3rem;
  background: var(--primary-container);
  color: var(--white);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
}
.page-hero .wrap { position: relative; z-index: 1; width: 100%; }
.crumbs {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.6); margin-bottom: 1.5rem;
}
.crumbs a { color: var(--accent); text-decoration: none; }
h1, h2, h3 { text-wrap: balance; }
.page-hero h1 {
  font-size: clamp(2.5rem, 5vw, 5.18rem);
  line-height: 0.95;
  max-width: none;
  margin-bottom: 0;
}
.page-hero .lede {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  color: rgba(255,255,255,0.9);
  max-width: 60ch;
  line-height: 1.5;
}

/* ============ REASSURANCE STRIP ============ */
.reassurance {
  background: var(--primary);
  color: var(--white);
  padding: 4rem 0;
  position: relative; overflow: hidden;
}
.reassurance-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2rem; text-align: center;
}
@media (max-width: 800px) { .reassurance-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
@media (max-width: 500px) { .reassurance-grid { grid-template-columns: 1fr; gap: 2rem; } }
.reas-item .material-symbols-outlined {
  font-size: 3rem; line-height: 1; color: var(--accent);
  margin-bottom: 1rem; display: block;
}
.reas-item h3 { font-size: 1.5rem; margin-bottom: 0.3rem; letter-spacing: -0.02em; }
.reas-item p { color: rgba(255,255,255,0.7); font-size: 0.95rem; margin: 0; }

/* ============ SECTIONS ============ */
.section { padding: 6rem 0; }
.section-title {
  font-size: clamp(2.25rem, 4vw, 3.125rem);
  color: var(--primary);
  text-wrap: balance;
  letter-spacing: -0.025em;
  line-height: 0.95;
}
.section-title.on-dark { color: var(--white); }
.section-title.center { text-align: center; }
.section-title-bar {
  width: 96px; height: 4px; background: var(--accent);
  margin-top: 1rem; margin-bottom: 2rem;
}
.section-title.center + .section-title-bar { margin-left: auto; margin-right: auto; }
.section-intro {
  max-width: 60ch;
  color: var(--on-surface-variant);
  font-size: 1.05rem;
}

/* ============ PLACEHOLDERS ============ */
.ph {
  position: relative;
  background: var(--surface-container-high);
  overflow: hidden;
  display: grid; place-items: center;
  border-radius: 0.5rem;
}
.ph::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 18px, rgba(55,15,0,0.05) 18px 19px);
}
.ph .ph-label {
  position: relative; z-index: 1;
  font-family: ui-monospace, 'SF Mono', 'Consolas', monospace;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-surface-variant);
  padding: 0.5rem 0.9rem;
  background: var(--surface);
  border: 1px solid rgba(55,15,0,0.1);
  border-radius: 4px;
}
.ph-bark { background: var(--primary-container); }
.ph-bark::before { background-image: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,0.06) 18px 19px); }
.ph-bark .ph-label { background: var(--primary); color: #fff; border-color: rgba(255,255,255,0.15); }
.ph-accent { background: var(--accent); }
.ph-accent::before { background-image: repeating-linear-gradient(135deg, transparent 0 18px, rgba(55,15,0,0.08) 18px 19px); }
.ph-accent .ph-label { background: var(--accent-deep); color: #fff; border-color: rgba(255,255,255,0.25); }
.ph-secondary { background: var(--secondary); }
.ph-secondary .ph-label { background: #7a2e47; color: #fff; border-color: rgba(255,255,255,0.25); }
.ph.ph-img { background: #f4ece4; }
.ph.ph-img::before { display: none; }
.ph.ph-img .ph-label { display: none; }
.ph.ph-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph.ph-img.contain img { object-fit: contain; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 1rem 2.5rem; border-radius: 9999px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 700; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.15em;
  text-decoration: none; border: none; cursor: pointer;
  transition: all 0.3s var(--ease);
  line-height: 1;
}
.btn-accent {
  background: var(--accent); color: var(--white);
  box-shadow: 0 10px 24px rgba(226,0,121,0.25);
}
.btn-accent:hover { background: var(--accent-deep); transform: scale(1.03); }
.btn-primary {
  background: var(--primary-container); color: var(--white);
}
.btn-primary:hover { background: var(--primary); transform: scale(1.03); }
.btn-white {
  background: var(--white); color: var(--primary);
}
.btn-white:hover { background: var(--surface-container); transform: scale(1.03); }
.btn-white-accent {
  background: var(--white); color: var(--accent);
}
.btn-white-accent:hover { transform: scale(1.03); }
.btn-outline {
  background: transparent; color: var(--white);
  border: 2px solid var(--white);
}
.btn-outline:hover { background: var(--white); color: var(--primary); }

/* ============ ICON CARD ============ */
.icon-card {
  background: var(--surface-container-high);
  padding: 2rem;
  border-radius: 0.5rem;
  display: flex; flex-direction: column;
  height: 100%;
  transition: all 0.3s var(--ease);
}
.icon-card:hover {
  background: var(--white);
  box-shadow: 0 20px 40px rgba(55,15,0,0.08);
  transform: translateY(-4px);
}
.icon-card .material-symbols-outlined {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 1.5rem;
  display: block;
}
.icon-card h3 { font-size: 1.25rem; color: var(--primary); margin-bottom: 1rem; }
.icon-card p { color: var(--on-surface-variant); font-size: 0.875rem; flex-grow: 1; }
.icon-card .card-link {
  margin-top: 1rem;
  font-weight: 700; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--primary); text-decoration: none;
}
.icon-card .card-link:hover { color: var(--accent); }

/* ============ CTA BAND ============ */
.cta-band {
  background: var(--primary);
  color: var(--white);
  padding: 6rem 0;
  position: relative; overflow: hidden;
}
.cta-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
}
@media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr; } }
.cta-band h2 {
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  line-height: 0.9;
  text-wrap: balance;
  color: var(--white);
  margin-bottom: 1rem;
}
.eyebrow {
  display: inline-block;
  background: rgba(226,0,121,0.15);
  border-left: 4px solid var(--accent);
  padding: 0.6rem 1rem;
  color: var(--secondary-container);
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em;
  font-weight: 700;
  margin-bottom: 1rem;
}
.cta-band p { color: rgba(255,255,255,0.85); font-size: 1.1rem; max-width: 55ch; }
.check-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.check-list li {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.5rem 0; font-size: 0.98rem;
}
.check-list .material-symbols-outlined {
  color: var(--accent); font-size: 1.5rem;
  font-variation-settings: 'FILL' 1;
}

/* ============ FINAL CTA ============ */
.final-cta {
  background: var(--primary-container);
  color: var(--white);
  padding: 6rem 0;
  text-align: center;
}
.final-cta h2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.95;
  text-wrap: balance;
  color: var(--white); margin-bottom: 2rem;
}
.final-cta p { font-size: 1.2rem; color: rgba(255,255,255,0.8); max-width: 60ch; margin: 0 auto 3rem; }
.final-cta-row { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }

/* ============ FOOTER ============ */
.site-footer {
  background: var(--primary-dark);
  color: var(--white);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 3rem;
  padding: 5rem clamp(1.25rem, 4vw, 3rem);
  max-width: var(--wrap);
  margin: 0 auto;
}
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; padding: 3rem clamp(1.25rem,4vw,3rem); } }
.foot-brand .mark {
  font-family: 'Oswald', sans-serif;
  font-size: 1.25rem; text-transform: uppercase; font-weight: 700;
  letter-spacing: -0.01em; margin-bottom: 1rem;
  line-height: 1.1;
}
.foot-brand p { color: rgba(255,255,255,0.7); font-size: 0.875rem; line-height: 1.6; }
.site-footer h4 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.125rem; letter-spacing: 0.02em;
  margin-bottom: 1.5rem; color: var(--white);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.site-footer li { font-size: 0.875rem; color: rgba(255,255,255,0.7); display: flex; gap: 0.5rem; align-items: flex-start; }
.site-footer li .material-symbols-outlined { color: var(--accent); font-size: 1rem; margin-top: 0.15rem; }
.site-footer a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.25s var(--ease); }
.site-footer a:hover { color: var(--white); }
.foot-socials { display: flex; gap: 1rem; margin-top: 1.5rem; }
.foot-socials a {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: grid; place-items: center;
  transition: background 0.3s var(--ease);
}
.foot-socials a:hover { background: rgba(255,255,255,0.2); }
.foot-socials svg { width: 18px; height: 18px; fill: var(--white); }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 2rem clamp(1.25rem, 4vw, 3rem);
  text-align: center;
  font-size: 0.875rem; color: rgba(255,255,255,0.5);
}
.foot-bottom a { color: inherit; text-decoration: none; transition: color 0.25s var(--ease); }
.foot-bottom a:hover { color: var(--white); }

/* ============ TWEAKS PANEL ============ */
#tweaks-panel {
  position: fixed; bottom: 1rem; right: 1rem;
  background: var(--primary); color: var(--white);
  padding: 1.25rem; border-radius: 0.75rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  z-index: 200; width: 280px; display: none;
  font-size: 0.85rem;
}
#tweaks-panel.open { display: block; }
#tweaks-panel h4 {
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.75rem; color: var(--accent);
  margin: 0 0 1rem;
  font-family: 'Oswald', sans-serif;
}
#tweaks-panel label { display: block; margin-bottom: 1rem; font-size: 0.8rem; opacity: 0.85; }
#tweaks-panel .swatches { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
#tweaks-panel .sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
#tweaks-panel .sw.active { border-color: var(--white); }

/* =========================================================
   RESPONSIVE PASS — tablette & mobile
   ========================================================= */

/* Page hero 2-col layout used on sub-pages (blog, production…) */
.page-hero .layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: 3rem; align-items: start; }
.page-hero .rule { display: none; }
@media (max-width: 900px) {
  .page-hero .layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* TABLETTE (≤1024px) */
@media (max-width: 1024px) {
  .page-hero { padding: 3.5rem 0 3rem; min-height: auto; }
  :root { --nav-h: 106px; }
  .nav-brand { font-size: 1.15rem; }
  .section { padding: 4rem 0; }
  .cta-band, .final-cta { padding: 4.5rem 0; }
}

/* MOBILE (≤768px) */
@media (max-width: 768px) {
  :root { --nav-h: 99px; }
  body { font-size: 15px; }
  .page-hero { padding: 2.5rem 0 2.5rem; }
  .page-hero h1 { font-size: clamp(2rem, 8vw, 2.75rem); }
  .section { padding: 3rem 0; }
  .section-title { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .cta-band, .final-cta { padding: 3.5rem 0; }
  .reassurance { padding: 2.5rem 0; }
  .reas-item .material-symbols-outlined { font-size: 2.25rem; }
  .reas-item h3 { font-size: 1.2rem; }
  .btn { padding: 0.85rem 1.75rem; font-size: 0.85rem; letter-spacing: 0.12em; }
  .hero-ctas .btn { padding: 1rem 1.75rem; font-size: 0.9rem; }
  .sidebar-head, .sidebar-body { padding: 1.75rem; }
  .sidebar-body { gap: 2rem; }
  .foot-grid { grid-template-columns: 1fr; gap: 2.5rem; padding: 2.5rem 1.5rem; }
  .foot-bottom { padding: 1.5rem 1rem; font-size: 0.78rem; line-height: 1.8; }
  .mega { display: none !important; }
  .nav-burger .material-symbols-outlined { font-size: 1.75rem; }
  #tweaks-panel { width: calc(100vw - 2rem); right: 1rem; bottom: 1rem; }
}

/* SMALL MOBILE (≤480px) */
@media (max-width: 480px) {
  .page-hero h1 { font-size: 2rem; line-height: 1; }
  .page-hero .lede { font-size: 1rem; }
  .section-title { font-size: 1.75rem; }
  .crumbs { font-size: 0.68rem; letter-spacing: 0.15em; }
  .nav-brand { font-size: 1rem; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
  .foot-grid { padding: 2rem 1.25rem; }
  .site-footer h4 { font-size: 1rem; margin-bottom: 1rem; }
}


/* WP parity reset: neutralise wrappers, garde le rendu maquette. */
.site-main{display:block;margin:0;padding:0;width:100%;max-width:none;}
body.pepiniere-gutenberg-theme-active{margin:0;}

/* WP parasite reset P0 */
.site-main{display:block;margin:0!important;padding:0!important;width:100%;max-width:none;margin-block-start:0!important;margin-block-end:0!important;}
body.pepiniere-gutenberg-theme-active{margin:0;}
.site-main > *, .wp-block-pepiniere-crespin-source-restored, .wp-block-pepiniere-crespin-maquette-section, .pepiniere-page, .pepiniere-page > *, .pepiniere-page section{margin-block-start:0!important;margin-block-end:0!important;}
.pepiniere-page a,#site-footer a,#site-nav a{min-height:0!important;}
#site-footer .footer-links a,#site-footer .footer-bottom a,#site-footer li a:not(.social-link){display:inline!important;height:auto!important;}
#site-footer .socials a,#site-footer a.social-link{display:inline-flex!important;min-height:44px!important;}
#site-nav .material-symbols-outlined,#site-footer .material-symbols-outlined,.material-symbols-outlined{font-family:'Material Symbols Outlined'!important;text-transform:none!important;letter-spacing:normal!important;line-height:1!important;font-feature-settings:'liga'!important;}

/* COM MAKER 2026-05-19 : on retire les marges latérales natives du <figure>
   (UA = 1em 40px) qui rendaient l'image de couverture trop petite sur mobile.
   Le .wrap interne gère déjà max-width + padding (cf. seo-blocks.css). */
.article-cover { margin: 1em 0; }

/* PEP-LOGO v9 — logo SVG (Personnaliser > Logo) dans header + footer.
   Hauteur du header pilotée par --nav-h ; le logo est centré vertical
   → l'espace (--nav-h − hauteur logo)/2 fait le padding haut/bas
   automatiquement (desktop ~13px, iPad ~12px, mobile ~12px). Fonds
   sombres header #591e00 / footer #3d1400 → logo blanc visible.
   Fallback wordmark texte si aucun logo (source.js).
   Header : 90px desktop / 82px iPad (≤1024) / 75px mobile (≤768).
   Footer : 120px / 130px mobile (≤768). */
.nav-brand.has-logo { display: inline-flex; align-items: center; line-height: 0; padding: 0; }
.nav-brand .nav-logo { height: 90px; width: auto; max-width: 320px; display: block; }
.foot-brand.has-logo .foot-logo { height: 120px; width: auto; max-width: 340px; display: block; margin-bottom: 1.25rem; }
@media (max-width: 1024px) { .nav-brand .nav-logo { height: 82px; } }
@media (max-width: 768px)  { .nav-brand .nav-logo { height: 75px; } .foot-brand.has-logo .foot-logo { height: 130px; } }

/* ============================================================
   PEP-LOTSEPT-2026 — footer 5 colonnes (colonne « Vente de matériaux »)
   + méga-menu Vente de matériaux resserré. Appliqué le 2026-09-10.
   ============================================================ */
@media (min-width: 1260px) {
  .foot-grid { grid-template-columns: 1fr 1.05fr 1.3fr 0.8fr 0.7fr; gap: 1.75rem; }
}
.foot-grid .foot-brand.has-logo .foot-logo { max-width: 100%; }
@media (min-width: 801px) and (max-width: 1259px) {
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-grid .foot-brand { grid-column: 1 / -1; }
}
@media (min-width: 769px) and (max-width: 800px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid .foot-brand { grid-column: 1 / -1; }
}
/* sous 768px : retour a la regle d origine (une seule colonne, ligne 546) */
.mega[data-menu="materiaux"] .mega-links { gap: 1rem; }