@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Mulish:wght@300;400;500;600;700&display=swap');

:root {
  /* Design Tokens Schmidt */
  --sch-red: #E30613;
  --sch-red-dark: #B80510;
  --sch-charcoal: #34393B;
  --sch-charcoal-deep: #232728;
  --sch-beige: #EDE4DD;
  --sch-beige-soft: #F6F1ED;
  --sch-blue: #004F9F;

  /* Neutres */
  --grey-700: #5A6062;
  --grey-500: #8A9092;
  --grey-400: #A8ADAF;
  --grey-300: #D9DBDC;
  --grey-200: #E6E8E9;
  --grey-100: #F5F6F6;

  /* Rôles sémantiques */
  --text-strong: #34393B;
  --text-body: #5A6062;
  --text-muted: #8A9092;
  --surface-page: #FFFFFF;
  --surface-soft: #F5F6F6;
  --surface-warm: #EDE4DD;
  --surface-warm-soft: #F6F1ED;
  --surface-dark: #34393B;
  --action-primary-bg: #E30613;
  --action-secondary-bg: #34393B;
  --border-hairline: #D9DBDC;
  --border-accent: #E30613;

  /* Typographie */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Mulish', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing (Base 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Transitions */
  --duration-fast: 200ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
}

/* Reset & Baseline */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--text-body);
  background-color: var(--surface-page);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* Container */
.container {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.container-narrow {
  width: 100%;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* Typography Hierarchy */
h1, h2, h3, h4, .font-heading {
  color: var(--text-strong);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.25;
}

h1, .fs-h1 {
  font-size: 2.5rem; /* 40px */
  margin-bottom: var(--space-6);
  letter-spacing: -0.01em;
}

h2, .fs-h2 {
  font-size: 2.125rem; /* 34px */
  margin-top: var(--space-12);
  margin-bottom: var(--space-6);
  letter-spacing: -0.01em;
}

h3, .fs-h3 {
  font-size: 1.5rem; /* 24px */
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
  font-weight: 400;
}

h4, .fs-h4 {
  font-size: 1.25rem; /* 20px */
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.fs-display {
  font-family: var(--font-serif);
  font-size: 2.75rem; /* 44px */
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.35;
  font-weight: 400;
}

.fs-lead {
  font-size: 1.125rem; /* 18px */
  line-height: 1.65;
  font-weight: 300;
  color: var(--text-body);
}

.fs-overline {
  font-size: 0.6875rem; /* 11px */
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--space-2);
}

p {
  margin-bottom: var(--space-4);
  max-width: 75ch;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Editorial Links (ArrowLink Schmidt) */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-strong);
  border-bottom: 2px solid var(--sch-red);
  padding-bottom: 4px;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
  cursor: pointer;
}

.arrow-link span.arrow {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-out);
  color: var(--sch-red);
}

.arrow-link:hover {
  color: var(--sch-red);
}

.arrow-link:hover span.arrow {
  transform: translateX(4px);
}

/* Buttons (Rayon 0px partout selon Design System) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 16px 32px;
  font-family: var(--font-sans);
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border: 1px solid transparent;
  border-radius: 0px; /* Zero radius partout */
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
  text-align: center;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--sch-red);
  color: #FFFFFF;
  border-color: var(--sch-red);
}

.btn-primary:hover {
  background-color: var(--sch-red-dark);
  border-color: var(--sch-red-dark);
}

.btn-secondary {
  background-color: var(--sch-charcoal);
  color: #FFFFFF;
  border-color: var(--sch-charcoal);
}

.btn-secondary:hover {
  background-color: var(--sch-charcoal-deep);
  border-color: var(--sch-charcoal-deep);
}

.btn-outline {
  background-color: transparent;
  color: var(--sch-charcoal);
  border-color: var(--sch-charcoal);
}

.btn-outline:hover {
  background-color: var(--sch-charcoal);
  color: #FFFFFF;
}

.btn-outline-white {
  background-color: transparent;
  color: #FFFFFF;
  border-color: #FFFFFF;
}

.btn-outline-white:hover {
  background-color: #FFFFFF;
  color: var(--sch-charcoal);
}

/* Top PromoBar */
.promobar {
  background-color: var(--sch-beige-soft);
  color: var(--sch-charcoal);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-hairline);
  text-align: center;
}

/* Header & Nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-hairline);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-symbol {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--sch-charcoal);
}

.logo-dots {
  display: inline-flex;
  gap: 3px;
}

.logo-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.dot-red { background-color: var(--sch-red); }
.dot-charcoal { background-color: var(--sch-charcoal); }
.dot-blue { background-color: var(--sch-blue); }

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}

.nav-link {
  font-size: 0.8125rem; /* 13px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sch-charcoal);
  padding: 8px 0;
  position: relative;
  transition: color var(--duration-fast) ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: var(--sch-red);
  transition: width var(--duration-fast) ease;
}

.nav-link:hover {
  color: var(--sch-red);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--sch-charcoal);
  cursor: pointer;
}

/* Scrim Hero Overlay Schmidt */
.hero-scrim {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  overflow: hidden;
}

.hero-scrim::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 39, 40, 0.4) 0%, rgba(35, 39, 40, 0.85) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.hero-content h1, .hero-content .fs-display {
  color: #FFFFFF;
}

.hero-content .fs-lead {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-6);
}

/* Sections & Layouts */
.section {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.section-tight {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.section-bg-soft {
  background-color: var(--surface-soft);
}

.section-bg-warm {
  background-color: var(--surface-warm);
}

.section-bg-warm-soft {
  background-color: var(--surface-warm-soft);
}

.section-bg-dark {
  background-color: var(--surface-dark);
  color: #FFFFFF;
}

.section-bg-dark h1, .section-bg-dark h2, .section-bg-dark h3, .section-bg-dark h4 {
  color: #FFFFFF;
}

.section-bg-dark p {
  color: rgba(255, 255, 255, 0.8);
}

.section-header {
  margin-bottom: var(--space-12);
}

.section-header.text-center {
  text-align: center;
}

.section-header.text-center p {
  margin-left: auto;
  margin-right: auto;
}

/* Schmidt Cards (Pas d'ombre, pas de bordure, pas de fond : juste photo + texte) */
.schmidt-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-fast) ease;
}

.schmidt-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--grey-200);
}

.schmidt-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.schmidt-card:hover .schmidt-card-image img {
  transform: scale(1.04);
}

.schmidt-card-body {
  padding-top: var(--space-4);
}

.schmidt-card-title {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--sch-charcoal);
  margin-bottom: var(--space-2);
}

.schmidt-card-text {
  font-size: 0.9375rem;
  color: var(--grey-700);
  margin-bottom: var(--space-3);
}

/* Grids */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

/* Split Section Z-Pattern */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.split-grid.reverse > *:first-child {
  order: 2;
}

.split-image {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Reassurance Strip (Rangée de 4) */
.reassurance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.reassurance-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.reassurance-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sch-charcoal);
  flex-shrink: 0;
  color: var(--sch-charcoal);
}

.reassurance-title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sch-charcoal);
  margin-bottom: 2px;
}

.reassurance-desc {
  font-size: 0.8125rem;
  color: var(--grey-700);
}

/* Stats Block Schmidt */
.stat-block {
  text-align: center;
}

.stat-number {
  font-family: var(--font-sans);
  font-size: 3.5rem;
  font-weight: 300;
  color: var(--sch-charcoal);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--grey-500);
  font-weight: 600;
}

/* Landes Interactive Map & City Selector */
.map-container {
  background-color: var(--surface-soft);
  border: 1px solid var(--border-hairline);
  padding: var(--space-8);
}

.alphabet-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-6);
  justify-content: center;
}

.letter-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  background-color: #FFFFFF;
  border: 1px solid var(--border-hairline);
  color: var(--sch-charcoal);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
}

.letter-btn:hover, .letter-btn.active {
  background-color: var(--sch-red);
  color: #FFFFFF;
  border-color: var(--sch-red);
}

.search-box-schmidt {
  position: relative;
  max-width: 600px;
  margin: 0 auto var(--space-8) auto;
  display: flex;
}

.search-box-schmidt input {
  width: 100%;
  padding: 16px 20px;
  font-family: var(--font-sans);
  font-size: 1rem;
  border: 1px solid var(--sch-charcoal);
  border-radius: 2px; /* 2px pour inputs */
  background-color: #FFFFFF;
  color: var(--sch-charcoal);
  outline: none;
}

.search-box-schmidt input:focus {
  border-color: var(--sch-red);
  box-shadow: 0 0 0 1px var(--sch-red);
}

.villes-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 8px;
}

.ville-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background-color: #FFFFFF;
  border: 1px solid var(--border-hairline);
  font-size: 0.875rem;
  color: var(--sch-charcoal);
  transition: all var(--duration-fast) ease;
}

.ville-tag:hover {
  border-color: var(--sch-red);
  color: var(--sch-red);
  background-color: var(--sch-beige-soft);
}

.ville-tag .zip {
  font-size: 0.75rem;
  color: var(--grey-500);
}

/* Form Controls Schmidt (Rayon 2px) */
.form-group {
  margin-bottom: var(--space-6);
}

.form-label {
  display: block;
  font-size: 0.6875rem; /* 11px */
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--sch-charcoal);
  margin-bottom: var(--space-2);
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 14px 18px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  border: 1px solid var(--border-hairline);
  border-radius: 2px;
  background-color: #FFFFFF;
  color: var(--sch-charcoal);
  outline: none;
  transition: border-color var(--duration-fast) ease;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--sch-charcoal);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* Breadcrumbs */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grey-500);
  margin-bottom: var(--space-6);
}

.breadcrumb a {
  color: var(--grey-700);
}

.breadcrumb a:hover {
  color: var(--sch-red);
}

.breadcrumb .sep {
  color: var(--grey-400);
}

/* Article / Guide Content */
.article-body {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--grey-700);
}

.article-body h2 {
  font-size: 1.875rem;
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--sch-beige);
}

.article-body h3 {
  font-size: 1.375rem;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--sch-charcoal);
}

.article-body ul, .article-body ol {
  margin-bottom: var(--space-6);
  padding-left: var(--space-6);
}

.article-body li {
  margin-bottom: var(--space-2);
}

.article-body blockquote {
  border-left: 3px solid var(--sch-red);
  padding: var(--space-4) var(--space-6);
  background-color: var(--sch-beige-soft);
  font-style: italic;
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: 0.9375rem;
}

.price-table th, .price-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--grey-300);
}

.price-table th {
  background-color: var(--surface-soft);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--sch-charcoal);
}

/* Footer Schmidt (Pied Anthracite) */
.site-footer {
  background-color: var(--sch-charcoal);
  color: #FFFFFF;
  padding-top: var(--space-24);
  padding-bottom: var(--space-12);
  border-top: 1px solid var(--sch-charcoal-deep);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.footer-brand .logo-symbol {
  color: #FFFFFF;
  margin-bottom: var(--space-4);
}

.footer-col-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--grey-400);
  margin-bottom: var(--space-6);
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: var(--space-3);
}

.footer-links a {
  font-size: 0.875rem;
  color: var(--grey-300);
  transition: color var(--duration-fast) ease;
}

.footer-links a:hover {
  color: var(--sch-red);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--grey-400);
}

/* Animations Reveal on Scroll */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Media Queries Mobile Responsive */
@media (max-width: 992px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(1, 1fr); }
  .split-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .split-grid.reverse > *:first-child { order: unset; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .reassurance-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}

@media (max-width: 600px) {
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .nav-menu { display: none; }
  .mobile-menu-btn { display: block; }
  .header-inner { height: 70px; }
  .fs-display { font-size: 2rem; }
  h1, .fs-h1 { font-size: 1.875rem; }
  h2, .fs-h2 { font-size: 1.5rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .reassurance-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: var(--space-4); text-align: center; }
}

/* ==========================================================================
   MENU RESPONSIVE
   Desktop (>=993px) : menu centre.   <=992px : menu burger.
   ========================================================================== */

.nav-burger{
  display:none;
  width:44px; height:44px; padding:10px;
  background:none; border:0; color:inherit; cursor:pointer;
  flex-direction:column; justify-content:space-between; align-items:stretch;
  flex:0 0 auto;
}
.nav-burger span{
  display:block; width:100%; height:2px; border-radius:2px;
  background:currentColor;
  transition:transform .25s ease, opacity .2s ease;
}
.nav-burger.is-active span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav-burger.is-active span:nth-child(2){ opacity:0; }
.nav-burger.is-active span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* --- Desktop : menu centre sur la page, CTA a droite --- */
@media (min-width:993px){
  .site-header .header-inner{ position:relative; gap:1.5rem; }
  .site-header .header-inner > nav{ position:absolute; left:50%; transform:translateX(-50%); }
}
/* --- Tablette / mobile --- */
@media (max-width:992px){
  .nav-burger{ display:flex; }
  .header-actions .btn{ display:none; }
  .site-header .js-nav-panel{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:#FFFFFF;
    padding:.5rem 1.25rem 1.5rem;
    border-top:1px solid var(--border-hairline);
    box-shadow:0 16px 32px rgba(0,0,0,.14);
    max-height:calc(100vh - 70px); overflow-y:auto;
  }
  .site-header .js-nav-panel.is-open{ display:block; }
  .js-nav-panel .nav-menu{ display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .js-nav-panel .nav-menu li{ width:100%; }
  .js-nav-panel .nav-link{ display:block; padding:.9rem 0;
    border-bottom:1px solid var(--border-hairline); }
}


/* ==========================================================================
   CORRECTIFS RESPONSIVE
   Les boutons a libelle long (majuscules + interlettrage) mesuraient
   jusqu a 410px de large dans une fenetre de 375px.
   ========================================================================== */
@media (max-width:992px){
  .btn{ max-width:100%; white-space:normal; text-align:center;
        overflow-wrap:anywhere; line-height:1.3; }
  img{ max-width:100%; height:auto; }
  table{ display:block; width:100%; overflow-x:auto; }
}


/* ==========================================================================
   CORRECTIFS RESPONSIVE — GRILLES EN STYLE INLINE
   De nombreux blocs utilisent style="display:grid; grid-template-columns:..."
   directement dans le HTML. Ces grilles ne se repliaient jamais et
   provoquaient un defilement horizontal en tablette et en mobile.
   Le !important est necessaire pour l emporter sur l attribut style.
   ========================================================================== */
@media (max-width:992px){
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  [style*="grid-column"]{ grid-column:1 / -1 !important; }
  img{ max-width:100%; height:auto; }
  table{ max-width:100%; }
}

/* ==========================================================================
   RESPONSIVE — DEBORDEMENT HORIZONTAL (ajoute le 2026-08-05)
   Le contenu debordait a droite sur mobile. body{overflow-x:hidden} masquait
   le probleme : le contenu etait COUPE au lieu d'etre ramene dans l'ecran.
   Trois causes, corrigees ci-dessous. Meme correctif que sur landes-terrasses.
   ========================================================================== */

@media (max-width:992px){
  /* 1. Une piste `1fr` a un minimum AUTOMATIQUE de min-content : un enfant
        large (tableau, image, mot long) elargit la piste, donc la grille,
        donc toute la page. minmax(0,1fr) supprime ce plancher implicite. */
  [style*="grid-template-columns"]{ grid-template-columns:minmax(0,1fr) !important; }
  [style*="grid-template-columns"] > *{ min-width:0; }
  [style*="grid-column"]{ grid-column:1 / -1 !important; }

  /* 2. Meme logique pour les rangees flex ecrites en style inline.
        flex-wrap:wrap est sans effet tant que les elements tiennent : cette
        regle ne change rien aux mises en page deja correctes. */
  [style*="display: flex"], [style*="display:flex"]{ flex-wrap:wrap; }
  .footer-bottom, .footer-bottom > div{ flex-wrap:wrap; }
  /* Un element flex a min-width:auto : il ne peut pas descendre sous sa
     largeur mini de contenu et deborde donc son conteneur. Constate sur la
     page contact de samuel-magne.fr : cartes de 315 px dans un bloc de 288. */
  [style*="display: flex"] > *, [style*="display:flex"] > *{ min-width:0; }

  /* 3. Un tableau ne peut pas descendre sous la largeur mini de ses colonnes :
        il defile dans son propre cadre plutot que d'elargir la page.
        Au-dessus de 992 px il reste un vrai tableau. Pas de white-space:nowrap
        ici, cela triplerait la longueur du defilement. */
  table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* Filet de securite : rien de remplacable ne depasse son conteneur, et les
   mots tres longs reviennent a la ligne au lieu de pousser la page. */
img, svg, video, canvas, embed, object{ max-width:100%; }
body{ overflow-wrap:break-word; }

/* ==========================================================================
   TABLEAUX EMPILES SUR PETIT ECRAN (ajoute le 2026-08-05)
   Le defilement horizontal fonctionnait, mais rien ne l'indiquait : sur un
   telephone on ne devine pas qu'il faut faire glisser un tableau, et la
   moitie des colonnes restait invisible en pratique.
   Sous 768 px chaque ligne devient donc une fiche : l'intitule de colonne est
   repris devant chaque valeur via l'attribut data-label pose sur les <td>.
   Plus rien n'est cache, et il n'y a plus rien a faire glisser.
   Les valeurs de repli des var() permettent au bloc de fonctionner quelle que
   soit la palette du site.
   ========================================================================== */
@media (max-width:767px){
  .table-empilable{
    display:block;
    overflow-x:visible;      /* annule le cadre defilant : inutile ici */
    background:none;
    border-collapse:separate;
    border-spacing:0;
  }

  /* L'en-tete sort de l'ecran mais reste lu par les lecteurs d'ecran :
     les valeurs sont deja etiquetees une a une juste en dessous. */
  .table-empilable thead{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
  }

  .table-empilable tbody{ display:block; }

  .table-empilable tr{
    display:block;
    margin-bottom:1rem;
    border:1px solid var(--color-border, var(--bordure, #e3ded7));
    border-radius:var(--radius-sm, 8px);
    overflow:hidden;
    background:var(--color-white, var(--blanc, #fff));
  }
  .table-empilable tr:last-child{ margin-bottom:0; }

  .table-empilable td{
    display:flex;
    align-items:baseline;
    gap:.9rem;
    width:auto;
    padding:.65rem .9rem;
    border:0;
    border-bottom:1px solid var(--color-border, var(--bordure, #e3ded7));
    font-size:.92rem;
  }
  .table-empilable td:last-child{ border-bottom:0; }

  /* L'intitule de colonne, repris devant la valeur */
  .table-empilable td::before{
    content:attr(data-label);
    flex:0 0 40%;
    font-weight:700;
    font-size:.82rem;
    line-height:1.35;
    color:var(--color-primary-dark, var(--color-primary, var(--noir, #333)));
  }

  /* Premiere cellule = identifiant de la ligne : mise en avant comme un titre */
  .table-empilable td:first-child{
    background:var(--color-primary-light, rgba(0,0,0,.035));
    font-weight:700;
  }
}

/* ==========================================================================
   POP-UP DE RAPPEL (pages communes)
   Reprise de cloture-jardin-landes.fr, adaptee a la palette de ce site :
   angles droits et rouge Schmidt plutot que le vert/terracotta d'origine.
   ========================================================================== */
.popup-devis{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  padding:1.25rem;
  opacity:0; transition:opacity .25s ease;
}
.popup-devis.is-open{ opacity:1; }
.popup-devis[hidden]{ display:none; }
/* Tant que .is-open n'est pas posee, la pop-up est a opacity:0 mais occupe
   tout l'ecran : sans ceci elle capte les clics et la page parait figee.
   Defaut constate sur landes-terrasses, present dans la brique d'origine. */
.popup-devis:not(.is-open){ pointer-events:none; }
.popup-devis.is-open{ pointer-events:auto; }

.popup-devis-fond{
  position:absolute; inset:0;
  background:rgba(35,39,40,.66);
  backdrop-filter:blur(3px);
}

.popup-devis-boite{
  position:relative;
  width:100%; max-width:470px;
  max-height:calc(100vh - 2.5rem);
  overflow-y:auto;
  background:#FFFFFF;
  border:1px solid var(--border-hairline);
  box-shadow:0 28px 70px rgba(35,39,40,.42);
  transform:translateY(18px) scale(.98);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.popup-devis.is-open .popup-devis-boite{ transform:none; }

.popup-devis-fermer{
  position:absolute; top:.5rem; right:.6rem; z-index:2;
  width:34px; height:34px;
  background:rgba(255,255,255,.18); color:#FFFFFF;
  border:0;
  font-size:1.6rem; line-height:1; cursor:pointer;
  transition:background .2s ease;
}
.popup-devis-fermer:hover{ background:rgba(255,255,255,.34); }

.popup-devis-entete{
  background:var(--sch-charcoal);
  color:#FFFFFF;
  padding:1.6rem 1.75rem 1.4rem;
}
.popup-devis-tag{
  display:inline-block;
  background:var(--sch-red);
  color:#FFFFFF;
  font-size:.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em;
  padding:.25rem .6rem;
  margin-bottom:.7rem;
}
.popup-devis-entete h2{
  color:#FFFFFF; font-size:1.4rem; line-height:1.25; margin:0 0 .45rem;
}
.popup-devis-entete p{ color:var(--grey-300); font-size:.9rem; margin:0; }

.popup-devis-corps{ padding:1.5rem 1.75rem 1.75rem; }
.popup-devis-ligne{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.85rem; }
.popup-devis-champ{ margin-bottom:.85rem; }
.popup-devis-champ label{
  display:block; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--sch-charcoal); margin-bottom:.3rem;
}
.popup-devis-champ input,
.popup-devis-champ select{
  width:100%; padding:.7rem .8rem;
  border:1px solid var(--border-hairline);
  font-family:inherit; font-size:1rem; color:var(--text-body);
  background:#FFFFFF; transition:border-color .2s ease;
}
.popup-devis-champ input:focus,
.popup-devis-champ select:focus{
  outline:none; border-color:var(--sch-red);
  box-shadow:0 0 0 3px rgba(227,6,19,.14);
}

.popup-devis-erreur{
  display:none;
  background:#F8D7DA; color:#721C24;
  border-left:3px solid var(--sch-red);
  padding:.6rem .75rem; font-size:.85rem; font-weight:600;
  margin-bottom:.85rem;
}
.popup-devis-erreur.is-visible{ display:block; }

.popup-devis-envoi{ width:100%; margin-top:.3rem; }
.popup-devis-envoi:disabled{ opacity:.65; cursor:wait; transform:none; }

.popup-devis-mentions{
  font-size:.74rem; color:var(--grey-500);
  text-align:center; margin:.9rem 0 0; line-height:1.4;
}
.popup-devis-mentions a{ color:var(--grey-500); text-decoration:underline; }

.popup-devis-merci{ padding:2.5rem 1.75rem; text-align:center; }
.popup-devis-coche{
  width:62px; height:62px; margin:0 auto 1.1rem;
  background:#D4EDDA; color:#155724;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; font-weight:700;
}
.popup-devis-merci h3{ margin-bottom:.6rem; }
.popup-devis-merci p{ margin-bottom:1.4rem; }

@media (max-width:520px){
  .popup-devis{ padding:0; align-items:flex-end; }
  /* Pas de decalage vertical sur petit ecran : si les transitions sont
     desactivees, le translateY resterait applique et rognerait le bas. */
  .popup-devis-boite{ max-width:none; max-height:92vh; transform:none; border:0; }
  .popup-devis-entete{ padding:1.35rem 1.25rem 1.15rem; }
  .popup-devis-entete h2{ font-size:1.2rem; }
  .popup-devis-corps{ padding:1.25rem; }
  .popup-devis-ligne{ grid-template-columns:minmax(0,1fr); gap:0; }
}

@media (prefers-reduced-motion: reduce){
  .popup-devis, .popup-devis-boite, .popup-devis-fermer{ transition:none; }
  .popup-devis-boite{ transform:none; }
}

/* ==========================================================================
   CONTENU REVELE AU DEFILEMENT — REPLI SANS JAVASCRIPT
   .reveal-on-scroll part a opacity:0 et n'est revele que par un
   IntersectionObserver. Sans JavaScript (ou si le script echoue), 13 blocs
   restaient definitivement invisibles. La classe `js` est posee sur <html>
   avant le rendu : sans elle, le contenu s'affiche normalement.
   ========================================================================== */
html:not(.js) .reveal-on-scroll{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal-on-scroll{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   FORMULAIRES SUR MOBILE — PAS DE ZOOM AUTOMATIQUE
   Les champs etaient a 0.9375rem (15 px). Sous 16 px, iOS Safari zoome
   automatiquement la page des qu'on tape dans un champ, et n'en ressort pas
   seul : la mise en page parait cassee. 16 px est le seuil exact.
   Les cibles tactiles passent aussi a 48 px de haut minimum.
   ========================================================================== */
@media (max-width:992px){
  .form-input, .form-select, .form-textarea,
  .popup-devis-champ input, .popup-devis-champ select{
    font-size:16px;
    min-height:48px;
  }
  .form-textarea{ min-height:120px; }
  .btn{ min-height:48px; }
}

/* ==========================================================================
   MENU BURGER — ACCES AU DEVIS ET AU TELEPHONE
   Sous 992 px, `.header-actions .btn{display:none}` masque le bouton
   « PRENDRE RDV » et le menu ne proposait aucun equivalent : sur mobile et
   tablette, aucun acces direct au devis depuis l'en-tete. Ces deux entrees
   n'existent que dans le menu deroulant.
   ========================================================================== */
@media (min-width:993px){
  .nav-cta-mobile, .nav-tel-mobile{ display:none !important; }
}
@media (max-width:992px){
  .js-nav-panel .nav-tel-mobile{
    color:var(--sch-red);
    font-size:1.05rem; font-weight:700; letter-spacing:.06em;
    text-align:center;
  }
  .js-nav-panel .nav-cta-mobile{
    background:var(--sch-red); color:#FFFFFF;
    text-align:center; border-bottom:0;
    margin-top:.6rem; padding:1rem;
    min-height:48px;
  }
  .js-nav-panel .nav-cta-mobile:hover{ background:var(--sch-red-dark); }
}

/* ==========================================================================
   MENU DESKTOP — FIN DU CHEVAUCHEMENT LOGO / MENU
   Le menu etait centre par `position:absolute; left:50%`, donc hors flux :
   rien n'empechait « COMMUNES (40) » de passer sous le logo. Mesure a
   1280 px : chevauchement de 19 px. Meme bug et meme correctif que sur
   cloture-jardin — une grille 1fr auto 1fr reserve trois zones qui ne
   peuvent plus se croiser.
   ========================================================================== */
@media (min-width:993px){
  .site-header .header-inner{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:1.5rem;
    position:static;
  }
  .site-header .header-inner > .brand-logo{ justify-self:start; }
  .site-header .header-inner > nav{
    position:static; left:auto; transform:none;
    justify-self:center;
  }
  .site-header .header-inner > .header-actions{ justify-self:end; }
  .site-header .nav-menu{ flex-wrap:nowrap; }
}

/* ==========================================================================
   SEUIL DE BASCULE DU MENU : 992 -> 1199 px
   Le menu desktop s'activait des 993 px, mais logo + 5 entrees + bouton
   « PRENDRE RDV » demandent ~1050 px : entre 993 et 1199, le bouton sortait
   de l'ecran (28 px de debordement mesures a 1000 px). On reste donc en mode
   burger jusqu'a 1199 px. Meme correctif que sur cloture-jardin.
   ========================================================================== */
@media (min-width:993px) and (max-width:1199px){
  .site-header .header-inner{
    display:flex;
    justify-content:space-between;
    position:relative;
  }
  .nav-burger{ display:flex; }
  .header-actions .btn{ display:none; }

  .site-header .js-nav-panel{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    transform:none; justify-self:auto;
    background:#FFFFFF;
    padding:.5rem 1.25rem 1.5rem;
    border-top:1px solid var(--border-hairline);
    box-shadow:0 16px 32px rgba(0,0,0,.14);
    max-height:calc(100vh - 70px); overflow-y:auto;
  }
  .site-header .js-nav-panel.is-open{ display:block; }
  .js-nav-panel .nav-menu{ display:flex; flex-direction:column; align-items:stretch; gap:0; flex-wrap:wrap; }
  .js-nav-panel .nav-menu li{ width:100%; }
  .js-nav-panel .nav-link{ display:block; padding:.9rem 0;
    border-bottom:1px solid var(--border-hairline); }

  /* Les deux entrees reservees au menu deroulant redeviennent visibles */
  .nav-cta-mobile, .nav-tel-mobile{ display:block !important; }
  .js-nav-panel .nav-tel-mobile{
    color:var(--sch-red); font-size:1.05rem; font-weight:700;
    letter-spacing:.06em; text-align:center;
  }
  .js-nav-panel .nav-cta-mobile{
    background:var(--sch-red); color:#FFFFFF;
    text-align:center; border-bottom:0;
    margin-top:.6rem; padding:1rem; min-height:48px;
  }
}

/* ==========================================================================
   CARTE DEPARTEMENTALE DES 327 COMMUNES  (etape 6, 2026-08-05)
   Portee de cloture-jardin-landes.fr, adaptee a la palette de ce site :
   angles droits, gris anthracite et rouge au lieu du vert/terracotta.
   ========================================================================== */
.lm-wrap{
  position:relative;
  background:linear-gradient(160deg,#F7F5F0 0%,#EFEDE6 100%);
  border:1px solid var(--border-hairline);
  padding:1rem;
  overflow:hidden;
}
.landes-map{
  display:block; width:100%; height:auto;
  max-height:560px; overflow:visible;
}

/* --- Communes --- */
.lm-sector{ cursor:pointer; outline:none; }
.lm-commune{
  fill:var(--lm-fill,#4E7C4A);
  stroke:rgba(255,255,255,.30);
  stroke-width:.6; stroke-linejoin:round;
  transition:fill .25s ease, opacity .25s ease;
}
.lm-sector:hover .lm-commune,
.lm-sector:focus-visible .lm-commune{
  fill:color-mix(in srgb, var(--lm-fill) 82%, #FFFFFF);
  stroke:rgba(255,255,255,.65); stroke-width:.8;
}
.landes-map.has-selection .lm-sector .lm-commune{ opacity:.28; }
.landes-map.has-selection .lm-sector.is-selected .lm-commune{
  opacity:1; stroke:rgba(255,255,255,.75); stroke-width:.9;
}

/* --- Reperes de villes --- */
.lm-pins{ pointer-events:none; }
.lm-pin{ pointer-events:auto; cursor:pointer; outline:none; }
.lm-pin-halo{ fill:#FFFFFF; opacity:.35; transition:opacity .2s ease; }
.lm-pin-dot{ fill:#FFFFFF; stroke:var(--sch-charcoal-deep); stroke-width:2; transition:fill .2s ease; }
.lm-pin-label{
  font-family:var(--font-sans); font-size:15px; font-weight:700;
  text-anchor:middle; fill:var(--sch-charcoal-deep);
  paint-order:stroke; stroke:rgba(255,255,255,.92);
  stroke-width:4; stroke-linejoin:round; pointer-events:none;
}
.lm-pin:hover .lm-pin-halo, .lm-pin:focus-visible .lm-pin-halo{ opacity:.9; }
.lm-pin:hover .lm-pin-dot, .lm-pin:focus-visible .lm-pin-dot{ fill:var(--sch-red); }

.lm-ocean-label{
  font-family:var(--font-sans); font-size:15px; font-weight:600;
  letter-spacing:.22em; fill:#7FA3B3; text-anchor:middle;
}

/* --- Infobulle --- */
.lm-tooltip{
  position:absolute; z-index:20; display:none;
  padding:.45rem .7rem;
  background:var(--sch-charcoal-deep); color:#FFFFFF;
  font-size:.82rem; font-weight:600; line-height:1.3;
  white-space:nowrap; pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transform:translate(-50%,-135%);
}
.lm-tooltip.is-visible{ display:block; }
.lm-tooltip small{ display:block; font-weight:500; opacity:.72; font-size:.74rem; }

/* --- Legende cliquable --- */
.lm-legend{ display:flex; flex-direction:column; gap:.35rem; }
.lm-legend-item{
  display:flex; align-items:center; gap:.6rem;
  width:100%; padding:.6rem .7rem; min-height:44px;
  background:#FFFFFF; border:1px solid var(--border-hairline);
  font-family:inherit; font-size:.86rem; font-weight:600;
  color:var(--sch-charcoal); text-align:left; cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.lm-legend-item:hover{ border-color:var(--sch-charcoal); }
.lm-legend-item.active{
  border-color:var(--sch-charcoal); background:var(--sch-charcoal); color:#FFFFFF;
}
.lm-legend-puce{
  flex:0 0 auto; width:14px; height:14px;
  background:var(--lm-fill,#34393B);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.lm-legend-puce-all{
  background:linear-gradient(135deg,#E0A469 0%,#D05A3F 30%,#4E7C4A 65%,#1E513F 100%);
}
.lm-legend-nom{ flex:1 1 auto; line-height:1.25; }
.lm-legend-nb{
  flex:0 0 auto; background:var(--grey-100);
  border-radius:20px; padding:.1rem .5rem;
  font-size:.75rem; font-weight:800; color:var(--sch-charcoal);
}
.lm-legend-item.active .lm-legend-nb{ background:rgba(255,255,255,.2); color:#FFFFFF; }

.lm-grid{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--space-6); align-items:start; }

@media (max-width:992px){
  .lm-grid{ grid-template-columns:minmax(0,1fr); }
  .landes-map{ max-height:none; }
  .lm-pin-label{ font-size:19px; stroke-width:5; }
  .lm-ocean-label{ font-size:19px; }
  /* Les marges empilees (conteneur + carte) mangeaient la largeur utile. */
  .lm-wrap{ padding:.5rem; }
}