:root {
  --bg: #fff9f3;
  --accent: #7a4b2f;
  --accent-2: #ffb86b;
  --muted: #6b6b6b;
  --card: #fff;
  --radius: 10px;
  --max-width: 1100px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, system-ui, Arial, sans-serif;
  color: #222;
  background: linear-gradient(180deg, var(--bg), #fff);
  text-align: center;
}

/* Header: logo left, nav center, actions right */
.site-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.95);
  z-index: 100;
}

.site-logo-left {
  height: 64px;
  width: auto;
  display: block;
  object-fit: contain;
  border-radius: 6px;
  margin: 0;
  align-self: center;
}
.top-actions {
  justify-self: end;
}
.main-nav {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
}
.main-nav a {
  color: #333;
  text-decoration: none;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.main-nav a[aria-current="page"] {
  background: var(--accent-2);
  color: #fff;
}

/* Responsive global */
@media (max-width: 1200px) {
  .formules-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 900px) {
  .site-header {
    padding: 12px 18px;
  }
  .header-inner {
    flex-direction: column;
    gap: 12px;
  }
  .main-nav {
    order: 3;
    flex-direction: column;
    gap: 8px;
  }
  .formules-grid {
    grid-template-columns: 1fr;
  }
  .practical-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .big-map {
    height: 320px;
  }
  .hero-content {
    padding: 18px 12px;
  }
}

@media (max-width: 600px) {
  .sandwiches-list, .quiches-list, .pizzas-list {
    font-size: 0.95em;
  }
  .footer-brown-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .map-addresses {
    flex-direction: column;
    gap: 12px;
  }
}

/* Section contact CTA */
.contact-cta {
  background: linear-gradient(135deg, #f4f1eb 0%, #e8dcc6 100%);
  padding: 48px 18px;
  text-align: center;
  margin: 48px 0 0 0;
}
.contact-cta h2 {
  color: var(--accent);
  margin-bottom: 18px;
  font-size: 1.8rem;
}
.btn.large {
  font-size: 1.25em;
  padding: 16px 32px;
}

/* ...existing code... */

/* --- HERO PLEIN ÉCRAN, BORD À BORD --- */
.hero {
  position: relative;
  width: 100vw;
  margin: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}

/* Image visible en entier */
.hero-img {
  width: 100vw;
  height: auto;        /* Définir une hauteur fixe */
  display: block;
  object-fit: contain;
  background: #f7efe6;
}

/* Overlay sombre avec progression pour mobile */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* Overlay plus fort sur tablette pour améliorer la lisibilité */
@media (max-width: 768px) {
  .hero-overlay {
    background: rgba(0, 0, 0, 0.5);
  }
}

/* Overlay encore plus fort sur mobile pour garantir la lisibilité */
@media (max-width: 480px) {
  .hero-overlay {
    background: rgba(0, 0, 0, 0.65);
  }
}

/* Contenu centré mais texte en haut */
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;           /* le texte vers le haut */
  align-items: center;
  text-align: center;
  color: #fff;
  padding-top: clamp(36px, 15vh, 160px); /* ↑ remonter ici les textes */
  padding-left: 18px;
  padding-right: 18px;
}

/* --- TITRES ET TEXTES AGRANDIS --- */
.hero-content h1.brand-title {
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}

.hero-content p.brand-subtitle {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 300;
  margin-bottom: 0.8rem;
}

.hero-content h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 500;
  margin-top: 0.4rem;
  line-height: 1.3;
}

/* Améliore la lisibilité sur fond photo */
.hero-content h1,
.hero-content h2,
.hero-content p {
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

/* Text-shadow renforcé sur tablette */
@media (max-width: 768px) {
  .hero-content h1,
  .hero-content h2,
  .hero-content p {
    text-shadow: 
      0 2px 4px rgba(0, 0, 0, 0.8),
      0 4px 8px rgba(0, 0, 0, 0.6);
  }
}

/* Solution drastique pour mobile : fond semi-transparent sur texte */
@media (max-width: 480px) {
  /* Réduire le padding-top pour plus d'espace */
  .hero-content {
    padding-top: clamp(20px, 8vh, 60px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 80px !important; /* Plus d'espace en bas pour éviter le débordement */
  }
  
  /* Tailles de police drastiquement réduites pour mobile */
  .hero-content h1.brand-title {
    font-size: clamp(1.4rem, 4vw, 2.2rem) !important;
    line-height: 1.2 !important;
    background: rgba(0, 0, 0, 0.6);
    padding: 10px 16px;
    border-radius: 8px;
    margin: 6px 0 !important;
    word-wrap: break-word;
    hyphens: auto;
  }
  
  .hero-content h2 {
    font-size: clamp(1.1rem, 3vw, 1.6rem) !important;
    line-height: 1.3 !important;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 14px;
    border-radius: 6px;
    margin: 6px 0 !important;
    word-wrap: break-word;
    hyphens: auto;
  }
  
  .hero-content p {
    font-size: clamp(0.9rem, 2.5vw, 1.2rem) !important;
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 12px;
    border-radius: 6px;
    margin: 4px 0;
  }
  
  /* Text-shadow renforcé */
  .hero-content h1,
  .hero-content h2,
  .hero-content p {
    text-shadow: 
      0 1px 2px rgba(0, 0, 0, 0.9),
      0 2px 4px rgba(0, 0, 0, 0.8),
      0 4px 8px rgba(0, 0, 0, 0.7);
  }
}

/* Pour les très petits écrans (iPhone SE, etc.) */
@media (max-width: 375px) {
  .hero-content {
    padding-top: clamp(15px, 6vh, 40px) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  .hero-content h1.brand-title {
    font-size: clamp(1.2rem, 4vw, 1.8rem) !important;
    padding: 8px 12px;
    margin: 4px 0 !important;
  }
  
  .hero-content h2 {
    font-size: clamp(1rem, 3vw, 1.4rem) !important;
    padding: 6px 10px;
    margin: 4px 0 !important;
  }
  
  .hero-content p {
    font-size: clamp(0.85rem, 2.5vw, 1.1rem) !important;
    padding: 4px 8px;
  }
}

/* --- BOUTON TOUT EN BAS --- */
.hero-content .btn.primary {
  position: absolute;
  bottom: 40px;                          /* distance du bas de l'image */
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  padding: 12px 28px;
  background: #e6a056;
  border: none;
  color: #fff;
  text-shadow: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: background 0.3s ease;
}

.hero-content .btn.primary:hover {
  background: #f0b26b;
}

/* --- Mobile : ajuste l'espacement haut --- */
@media (max-width: 800px) {
  .hero-content {
    padding-top: clamp(20px, 12vh, 80px);
  }
  .hero-content .btn.primary {
    bottom: 20px;
  }
}

/* ...existing code... */
.map {
  width: 100%;
  height: 260px;
  border-radius: 10px;
}

/* Responsive hero */
@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .hero-image {
    height: 180px;
    margin-top: 12px;
  }
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: #fff;
  background: var(--muted);
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: center;
  margin: 4px 2px;
  transition: background 0.2s;
}
.btn.primary {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.btn.call {
  background: linear-gradient(90deg, #2b9fc9, #1b6fb0);
}
.btn.contact {
  background: linear-gradient(90deg, #7b6af3, #6b3be0);
  margin-bottom: 12px;
}

/* Grid / Cards */
.featured, .products {
  max-width: var(--max-width);
  margin: 20px auto;
  padding: 10px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

/* Boulangerie : 3 produits par ligne, bien centré */
.bakery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  justify-content: center;
  margin: 0 auto;
  max-width: 1050px;
}
@media (max-width: 1100px) {
  .bakery-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
  }
}
@media (max-width: 700px) {
  .bakery-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
}

.card {
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  transition: transform .3s;
}
.card:hover img {
  transform: scale(1.03);
}
.card-body {
  padding: 12px;
}
.card-body h4 {
  margin: 0 0 6px;
  color: var(--accent);
}
.card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-top: 1px solid #f0f0f0;
}
.card .badge {
  display: inline-block;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #fff;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.small {
  font-size: 0.9rem;
  color: var(--muted);
}

/* Practical section */
.practical {
  max-width: var(--max-width);
  margin: 22px auto;
  padding: 12px;
}
.practical-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 16px;
  align-items: center;       /* centrer verticalement la carte et l'encart info */
  justify-content: center;   /* centrer la grille horizontalement */
}
.practical-info {
  background: var(--card);
  padding: 14px;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.04);
  text-align: left;          /* aligner le contenu à gauche */
}
.practical-info h2 {
  margin-top: 0;
  color: var(--accent);
  text-align: left;
}
.practical-info ul {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  text-align: left;
}
.practical-info li {
  padding: 6px 0;
  color: var(--muted);
}

.practical-map .map {
  width: 100%;
  height: 260px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal {
  background: #fff;
  border-radius: 12px;
  max-width: 520px;
  width: 94%;
  padding: 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  text-align: center;
}
.modal h3 {
  margin-top: 0;
  color: var(--accent);
}
.modal .actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}
.input-row {
  display: flex;
  gap: 8px;
}
.input-row input, textarea {
  flex: 1;
  padding: 8px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}
textarea {
  width: 100%;
  min-height: 110px;
}
.call-number {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent-2);
}

/* Chaque item = 1 ligne : icône + texte */
.site-footer-brown {
  background: #7a4b2f;
  color: #fff;
  padding: 54px 0 28px 0;
  font-size: 1.13em;
  margin-top: 48px;
}
.footer-brown-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 64px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto 24px auto;
}
.footer-brown-col {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 240px;
  max-width: 320px;
  padding: 10px 0;
}
.footer-brown-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #a06b44;
  border-radius: 50%;
  margin-right: 8px;
}
.footer-brown-icon svg {
  display: block;
  margin: auto;
}
.footer-brown-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.footer-brown-col a {
  color: #ffe6c7;
  text-decoration: underline;
  word-break: break-all;
}
.footer-brown-col strong {
  color: #ffb86b;
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.footer-brown-bottom {
  text-align: center;
  color: #ffe6c7;
  font-size: 1em;
  margin-top: 28px;
  letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .footer-brown-grid {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .footer-brown-col {
    justify-content: flex-start;
    min-width: 0;
    max-width: 100%;
  }
  
  /* Footer rows responsive - forcer l'alignement vertical */
  .footer-brown-grid div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 24px !important;
    align-items: center !important;
  }
  
  .footer-brown-grid div[style*="flex: 1"] {
    text-align: center !important;
    max-width: 300px !important;
    width: 100% !important;
  }
  
  /* Forcer l'alignement des colonnes individuelles */
  .footer-brown-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
}

/* Media queries pour tablettes */
@media (max-width: 768px) {
  .footer-brown-grid div[style*="gap: 60px"] {
    gap: 30px !important;
  }
  
  .footer-brown-grid div[style*="max-width: 1200px"] {
    max-width: 100% !important;
    padding: 0 20px !important;
  }
  
  /* Assurer l'alignement centré sur tablette */
  .footer-brown-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .footer-brown-col {
    width: 100% !important;
    max-width: 400px !important;
    text-align: center !important;
  }
}

/* Media queries pour téléphones */
@media (max-width: 480px) {
  .footer-brown-grid div[style*="flex: 1"] {
    margin-bottom: 20px;
  }
  
  .footer-brown-title {
    font-size: 1.1rem !important;
    margin-bottom: 12px !important;
  }
  
  .footer-brown-info {
    font-size: 0.95rem !important;
  }
  
  /* Alignement strict en colonnes sur mobile */
  .footer-brown-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }
  
  .footer-brown-grid > div {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .footer-brown-col {
    width: 100% !important;
    max-width: 280px !important;
    margin-bottom: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* Accessibility focus */
a:focus, button:focus, input:focus, textarea:focus {
  outline: 3px solid rgba(123,75,47,0.15);
  outline-offset: 2px;
}

/* Responsive practical section */
@media (max-width: 900px) {
  .practical-grid {
    grid-template-columns: 1fr;
  }
  .practical-map .map {
    height: 220px;
  }
}

.footer-infos {
  text-align: center;
  font-size: 0.98em;
  color: var(--muted);
}
.footer-infos a {
  color: var(--accent);
  text-decoration: underline;
}
.footer-infos p {
  margin: 4px 0;
}

.pastry-list-section {
  max-width: 600px;
  margin: 32px auto 24px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 18px 24px;
}
.pastry-list-section h2 {
  color: var(--accent);
  margin-top: 0;
}
.pastry-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pastry-list li {
  padding: 6px 0;
  border-bottom: 1px solid #f2f2f2;
  color: var(--muted);
  font-size: 1.05em;
}
.pastry-list li:last-child {
  border-bottom: none;
}

.viennoiseries-section {
  max-width: 900px;
  margin: 32px auto 24px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 18px 24px;
}
.viennoiseries-section h2 {
  color: var(--accent);
  margin-top: 0;
}
.viennoiseries-grid {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
}
.viennoiseries-block {
  flex: 1 1 320px;
  min-width: 260px;
}
.viennoiseries-block h3 {
  color: var(--accent-2);
  margin-bottom: 10px;
}
.viennoiseries-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.viennoiseries-list li {
  padding: 6px 0;
  border-bottom: 1px solid #f2f2f2;
  color: var(--muted);
  font-size: 1.05em;
}
.viennoiseries-list li:last-child {
  border-bottom: none;
}
@media (max-width: 700px) {
  .viennoiseries-grid {
    flex-direction: column;
    gap: 18px;
  }
}

.sandwiches-section, .quiches-section {
  max-width: 700px;
  margin: 32px auto 24px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 18px 24px;
}

.sandwiches-img, .quiches-img {
  width: 100%;
  max-width: 340px;
  height: auto;
  border-radius: 10px;
  margin: 12px auto 18px auto;
  display: block;
}

.sandwiches-list {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--muted);
  font-size: 1.08em;
}
.sandwiches-list li {
  padding: 6px 0;
  border-bottom: 1px solid #f2f2f2;
  text-align: center;
}
.sandwiches-list li:last-child {
  border-bottom: none;
}

/* Quiches & Pizzas côte à côte */
.quiches-pizzas-grid {
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-top: 18px;
  flex-wrap: wrap;
}
.quiches-pizzas-grid > div {
  min-width: 180px;
}
.quiches-pizzas-grid h3 {
  color: var(--accent-2);
  margin-bottom: 8px;
  text-align: center;
}
.quiches-list, .pizzas-list {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--muted);
  font-size: 1.08em;
}
.quiches-list li, .pizzas-list li {
  padding: 6px 0;
  border-bottom: 1px solid #f2f2f2;
  text-align: center;
}
.quiches-list li:last-child, .pizzas-list li:last-child {
  border-bottom: none;
}

@media (max-width: 700px) {
  .quiches-pizzas-grid {
    flex-direction: column;
    gap: 18px;
    align-items: center;
  }
}

.formules-section {
  max-width: 1100px;
  margin: 36px auto 24px auto;
  padding: 0 12px;
}
.formules-section h2 {
  color: var(--accent);
  margin-bottom: 24px;
}
.formules-grid {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}
.formule-card {
  flex: 1 1 220px;
  min-width: 220px;
  max-width: 260px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  padding: 18px 16px 14px 16px;
  text-align: center;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.formule-card h3 {
  margin: 0 0 8px 0;
  font-size: 1.18em;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.formule-prix {
  font-size: 1.25em;
  font-weight: 700;
  margin-bottom: 10px;
}
.formule-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.formule-card li {
  padding: 5px 0;
  color: var(--muted);
  font-size: 1em;
  border-bottom: 1px solid #f2f2f2;
}
.formule-card li:last-child {
  border-bottom: none;
}

/* Couleurs spécifiques */
.formule-orange {
  border-top: 6px solid #ffb86b;
}
.formule-rouge {
  border-top: 6px solid #e74c3c;
}
.formule-bleue {
  border-top: 6px solid #3498db;
}
.formule-verte {
  border-top: 6px solid #27ae60;
}

@media (max-width: 900px) {
  .formules-grid {
    flex-direction: column;
    gap: 18px;
    align-items: center;
  }
}

.special-breads-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 380px;
  margin: 64px 0 64px 0;
}

.special-breads-card {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.09);
  padding: 38px 32px;
  text-align: center;
}

.special-breads-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.special-breads-list li {
  padding: 14px 0;
  border-bottom: 1px solid #f2f2f2;
  color: var(--muted);
  font-size: 1.18em;
  list-style-type: none;
}
.special-breads-list li:last-child {
  border-bottom: none;
}
.special-breads-list {
  list-style: none;
}
.special-breads-list li::marker {
  content: "";
}
/* Augmente la taille du titre Pains Spéciaux dans la card */
.special-breads-card h4 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}

.about-card {
  background: var(--card);
  padding: 18px 18px 18px 18px;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.04);
  text-align: left;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.about-card h2 {
  margin-top: 0;
  color: var(--accent);
  text-align: left;
}
.about-card p {
  text-align: justify;
  color: var(--muted);
  margin-bottom: 0;
  font-size: 1.04em;
}
@media (max-width: 900px) {
  .practical-grid {
    grid-template-columns: 1fr;
  }
  .about-card {
    max-width: 100%;
    margin-top: 18px;
  }
}

/* ...existing code... */
.big-map-section {
  max-width: 1600px;
  margin: 0 auto 32px auto;
  padding: 0 2vw; /* Marge sur les côtés */
  text-align: center;
  background: #faf7f3;
  position: relative;
  z-index: 1;
}

.leaflet-container {
  z-index: 0 !important;
}

.big-map {
  width: 100%;
  height: 600px;
  border-top: 4px solid #d9c5a1;
  border-bottom: 4px solid #d9c5a1;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.09);
  margin-bottom: 18px;
  position: relative; /* S'assure qu'elle reste dans le flux */
  z-index: 1;
}
@media (max-width: 800px) {
  .big-map {
    height: 320px;
  }
  .big-map-section {
    padding: 0 4vw;
  }
}


/* Page contact */
.contact-hero {
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('images/contact-bg.jpg');
  background-size: cover;
  background-position: center;
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 48px 18px;
  color: #fff;
}

.contact-hero-content {
  flex: 1;
  max-width: 500px;
  margin-right: 48px;
}

.contact-hero h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 32px;
  color: #fff;
}

.contact-info-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.contact-icon {
  font-size: 2rem;
  background: #d4a574;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-form-container {
  flex: 1;
  max-width: 600px;
}

.contact-form {
  background: rgba(255,255,255,0.95);
  padding: 32px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.form-row {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
}

.form-group {
  flex: 1;
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  color: #d4a574;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 14px;
  border: none;
  border-bottom: 2px solid #d4a574;
  background: transparent;
  color: #333;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-bottom-color: #b8956a;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #999;
}

.btn-submit {
  background: #d4a574;
  color: #fff;
  border: none;
  padding: 16px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-submit:hover {
  background: #b8956a;
}

@media (max-width: 900px) {
  .contact-hero {
    flex-direction: column;
    text-align: center;
  }
  .contact-hero-content {
    margin-right: 0;
    margin-bottom: 32px;
  }
  .contact-hero h1 {
    font-size: 2.2rem;
  }
  .form-row {
    flex-direction: column;
    gap: 0;
  }
}

/* ...existing code... */

/* ====== NAV BURGER (MOBILE & TABLETTE <900px) ====== */
.nav-toggle {
  display: none;
  background: var(--accent, #c7812f);
  color:#fff;
  border:none;
  padding:10px 14px;
  font-size:1.35rem;
  line-height:1;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
}
.nav-toggle:focus-visible {
  outline:3px solid var(--accent, #c7812f);
  outline-offset:2px;
}

@media (max-width: 899px) {
  .site-header {
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    padding:12px 18px;
  }
  .nav-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .main-nav {
    order: 3;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    background:#2b2b2b;
    padding:14px 18px 18px;
    border-radius:10px;
    display:none;
  }
  .main-nav a {
    width:100%;
    padding:8px 4px;
  }
  body.nav-open .main-nav {
    display:flex;
    animation: navFade .25s ease;
  }
  @keyframes navFade {
    from {opacity:0; transform:translateY(-6px);}
    to {opacity:1; transform:translateY(0);}
  }
}

/* ===== Desktop (>=900px) ===== */
@media (min-width:900px){
  .main-nav { display:flex; }
  body.nav-open .main-nav { display:flex; }
  .nav-toggle { display:none; }
}

/* Amélioration état actif/hover sur fond sombre */
.main-nav a[aria-current="page"] {
  background: var(--accent, #c7812f);
  color:#fff;
  border-radius:6px;
  padding:8px 14px;
  font-weight:600;
}
.main-nav a:hover {
  color:#fff;
}

/* Accessibilité fermeture via ESC (visuel optionnel) */
body.nav-open .nav-toggle {
  background: var(--accent, #c7812f);
}

/* ...existing code... */

/* === HEADER + NAV (OVERRIDE) === */
.site-header {
  display:flex;
  align-items:center;
  gap:40px;
  padding:14px 28px;
  border-bottom:1px solid #eee;
  position:sticky;
  top:0;
  background:rgba(255,255,255,0.95);
  z-index:100;
}
.site-logo-left {
  max-height:72px;
  width:auto;
  flex:0 0 auto;
}
.main-nav {
  display:flex;
  gap:24px;
  align-items:center;
  flex:1 1 auto;
  justify-content:center;
}
.top-actions {
  display:flex;
  gap:14px;
  align-items:center;
  flex:0 0 auto;
}
.nav-toggle {
  display:none;
  background:var(--accent,#c7812f);
  color:#fff;
  border:none;
  padding:10px 16px;
  font-size:1.4rem;
  line-height:1;
  border-radius:6px;
  cursor:pointer;
  flex:0 0 auto;
  font-weight:600;
}

/* Lien actif (override) */
.main-nav a[aria-current="page"] {
  background:var(--accent,#c7812f);
  color:#fff !important;
  padding:8px 16px;
  border-radius:6px;
  font-weight:600;
}

/* Hover cohérent */
.main-nav a:hover {
  background:rgba(0,0,0,0.06);
}

/* ===== Tablet & Mobile (<900px) ===== */
@media (max-width:899px){
  .site-header {
    flex-wrap:wrap;
    gap:16px;
    padding:12px 18px;
  }
  .top-actions { order:3; margin-left:auto; }
  .nav-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    order:5;
    margin-left:auto;
  }
  .main-nav {
    order:4;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:8px;
    background:#222;
    padding:16px 18px 20px;
    border-radius:12px;
    display:none;
  }
  .main-nav a {
    width:100%;
    padding:8px 4px;
    color:#eee;
  }
  .main-nav a:hover {
    background:#333;
    color:#fff;
  }
  .main-nav a[aria-current="page"] {
    background:var(--accent,#c7812f);
    color:#fff;
  }
  body.nav-open .main-nav { display:flex; animation:navFade .25s ease; }
  @keyframes navFade {
    from { opacity:0; transform:translateY(-6px); }
    to { opacity:1; transform:translateY(0); }
  }
}

/* ===== Desktop (>=900px) ===== */
@media (min-width:900px){
  .main-nav { display:flex; }
  body.nav-open .main-nav { display:flex; }
  .nav-toggle { display:none; }
}

/* Focus accessibilité */
.nav-toggle:focus-visible,
.main-nav a:focus-visible,
.btn:focus-visible {
  outline:3px solid var(--accent,#c7812f);
  outline-offset:2px;
  border-radius:6px;
}

/* === Footer inline icon first-line alignment === */
.site-footer-brown .footer-brown-col {
  align-items: flex-start;              /* icône en haut, pas centré verticalement */
  gap: 12px;
}

.site-footer-brown .footer-brown-icon {
  margin-top: 4px;                      /* ajuste la position pour aligner avec la 1ère ligne */
  width: 32px;
  height: 32px;
  background: var(--accent-2, #ffb86b);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-footer-brown .footer-brown-icon svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.site-footer-brown .footer-brown-info {
  display: block;
  line-height: 1.45;
  font-size: 0.95rem;
  padding: 0;
  margin: 0;
}

/* Mettre le libellé (strong) sur la même ligne que la donnée */
.site-footer-brown .footer-brown-info strong {
  display: inline;
  margin-right: 8px;
  font-size: 0.95rem;
  color: var(--accent-2, #ffb86b);
}

/* Supprime le saut de ligne immédiatement après le <strong> existant dans le HTML */
.site-footer-brown .footer-brown-info br:first-of-type {
  display: none;
}

/* Liens propres */
.site-footer-brown .footer-brown-info a {
  text-decoration: none;
  color: #ffeacf;
  border-bottom: 1px solid rgba(255,234,207,0.4);
  padding-bottom: 1px;
}
.site-footer-brown .footer-brown-info a:hover {
  border-bottom-color: transparent;
}

/* Mobile : conserve l’alignement */
@media (max-width: 600px) {
  .site-footer-brown .footer-brown-col {
    width: 100%;
  }
}

/* --- Use distinct icons for each column (1=adresse, 2=téléphone, 3=email, 4=horaires) --- */
/* hide any inline SVGs if present, we use CSS background icons */
.site-footer-brown .footer-brown-icon svg { display: none; }

/* Address icon (223 Rue ...) */
.site-footer-brown .footer-brown-col:nth-child(1) .footer-brown-icon {
  background-color: var(--accent-2, #ffb86b);
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23fff'%20d='M12%202C8.13%202%205%205.13%205%209c0%205.25%207%2013%207%2013s7-7.75%207-13c0-3.87-3.13-7-7-7zm0%209.5A2.5%202.5%200%201%201%2012%206a2.5%202.5%200%200%201%200%205.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  margin-top: 6px;
}

/* Phone icon (04 37 70 67 02) */
.site-footer-brown .footer-brown-col:nth-child(2) .footer-brown-icon {
  background-color: var(--accent-2, #ffb86b);
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23fff'%20d='M6.62%2010.79a15.05%2015.05%200%200%200%206.59%206.59l2.2-2.2a1%201%200%200%201%201.01-.24c1.12.37%202.33.57%203.57.57a1%201%200%200%201%201%201V20a1%201%200%200%201-1%201C10.07%2021%203%2013.93%203%205a1%201%200%200%201%201-1h2.5a1%201%200%200%201%201%201c0%201.24.2%202.45.57%203.57.14.35.03.75-.24%201.02l-2.2%202.2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  margin-top: 2px;
}

/* Email icon (patrick.achard@setepi.fr) */
.site-footer-brown .footer-brown-col:nth-child(3) .footer-brown-icon {
  background-color: var(--accent-2, #ffb86b);
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23fff'%20d='M20%204H4c-1.11%200-2%20.89-2%202v12c0%201.11.89%202%202%202h16c1.11%200%202-.89%202-2V6c0-1.11-.89-2-2-2zm0%204l-8%205-8-5V6l8%205%208-5v2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 14px;
  margin-top: 2px;
}

/* Clock icon (horaires Lun–Sam / Dim) */
.site-footer-brown .footer-brown-col:nth-child(4) .footer-brown-icon {
  background-color: var(--accent-2, #ffb86b);
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23fff'%20d='M12%202a10%2010%200%201%200%2010%2010A10%2010%200%200%200%2012%202zm1%2011V7h-2v6h6v-2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  margin-top: 2px;
}

/* --- Alignement horizontal icône + texte --- */
.footer-brown-col {
  display: flex;
  flex-direction: row;      /* Icône à gauche, texte à droite */
  align-items: flex-start;  /* Aligne en haut du texte */
  gap: 12px;                /* Espace entre icône et texte */
  margin-bottom: 14px;
}

/* Ajustement visuel des icônes */
.footer-brown-icon {
  width: 32px;
  height: 32px;
  background: var(--accent-2, #ffb86b);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;          /* Pour que ça colle bien à la 1re ligne */
  flex-shrink: 0;           /* Empêche l'icône de se déformer */
}

/* Texte à côté des icônes */
.footer-brown-info {
  line-height: 1.5;
  color: #fff;
}
.footer-brown-info a {
  color: #ffeacf;
  text-decoration: underline;
}

/* === Footer avec titres en haut + icônes alignées === */
.footer-brown-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 80px;
  justify-content: center;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto 32px;
}

.footer-brown-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 240px;
  max-width: 300px;
  text-align: left;
}

.footer-brown-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-2, #ffb86b);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--accent-2, #ffb86b);
  padding-bottom: 6px;
}

.footer-brown-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 4px;
}

.footer-brown-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-2, #ffb86b);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px; /* aligne avec la première ligne de texte */
}

.footer-brown-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: #fff;
}

.footer-brown-info {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #ffeacf;
  word-break: break-word;
}

.footer-brown-info a {
  color: #ffeacf;
  text-decoration: underline;
  text-decoration-color: rgba(255, 234, 207, 0.5);
}

.footer-brown-info a:hover {
  text-decoration-color: #ffeacf;
}

/* Responsive */
@media (max-width: 980px) {
  .footer-brown-grid {
    gap: 36px 60px;
  }
}

@media (max-width: 640px) {
  .footer-brown-grid {
    gap: 28px 40px;
    justify-content: flex-start;
  }
  
  .footer-brown-col {
    min-width: 100%;
    max-width: 100%;
  }
  
  .footer-brown-title {
    font-size: 1rem;
  }
}


/* ===== HERO SECTION OPTIMISÉE ===== */
.hero {
  position: relative;
  width: 100vw;
  margin: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  min-height: 60vh;
}

/* Image complète et responsive */
.hero-img {
  width: 100vw;
  height: auto;
  min-height: 60vh;
  display: block;
  object-fit: contain;
  object-position: center;
  background: #f7efe6;
}

/* Overlay adaptatif pour lisibilité */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0, 0, 0, 0.2) 0%, 
    rgba(0, 0, 0, 0.4) 30%, 
    rgba(0, 0, 0, 0.6) 70%, 
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
}

/* Contenu parfaitement lisible */
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  padding: 20px;
  z-index: 2;
}

/* Titres avec ombres pour lisibilité maximale */
.hero-content h1.brand-title {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
  line-height: 1.1;
  text-shadow: 
    2px 2px 4px rgba(0,0,0,0.8),
    0 0 10px rgba(0,0,0,0.5);
  backdrop-filter: blur(1px);
}

.hero-content h2 {
  font-size: clamp(1.2rem, 2.8vw, 2rem);
  font-weight: 400;
  margin-bottom: 1.5rem;
  line-height: 1.3;
  text-shadow: 
    1px 1px 3px rgba(0,0,0,0.8),
    0 0 8px rgba(0,0,0,0.4);
  max-width: 900px;
}

.hero-content p.brand-subtitle {
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  font-weight: 300;
  margin-bottom: 1.5rem;
  line-height: 1.4;
  text-shadow: 
    1px 1px 3px rgba(0,0,0,0.8),
    0 0 6px rgba(0,0,0,0.4);
  max-width: 800px;
  padding: 0 10px;
}

/* Boutons dans le hero */
.hero-content .btn {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  padding: clamp(12px, 2vw, 16px) clamp(24px, 4vw, 32px);
  margin-top: 10px;
  text-shadow: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  backdrop-filter: blur(2px);
}

/* ===== RESPONSIVE HERO - TOUTES TAILLES ===== */

/* Desktop large (1400px+) */
@media (min-width: 1400px) {
  .hero {
    min-height: 70vh;
  }
  .hero-img {
    min-height: 70vh;
  }
  .hero-content {
    padding: 40px;
  }
}

/* Desktop standard (1024px - 1399px) */
@media (min-width: 1024px) and (max-width: 1399px) {
  .hero {
    min-height: 65vh;
  }
  .hero-img {
    min-height: 65vh;
  }
  .hero-content {
    padding: 30px;
  }
}

/* Tablette (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero {
    min-height: 55vh;
  }
  .hero-img {
    min-height: 55vh;
  }
  .hero-content {
    padding: 20px 15px;
  }
  .hero-content h1.brand-title {
    margin-bottom: 0.8rem;
  }
  .hero-content h2 {
    margin-bottom: 1.2rem;
  }
}

/* Mobile large (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
  .hero {
    min-height: 50vh;
  }
  .hero-img {
    min-height: 50vh;
  }
  .hero-content {
    padding: 16px 12px;
  }
  .hero-overlay {
    background: linear-gradient(
      rgba(0, 0, 0, 0.3) 0%, 
      rgba(0, 0, 0, 0.5) 40%, 
      rgba(0, 0, 0, 0.7) 60%, 
      rgba(0, 0, 0, 0.4) 100%
    );
  }
}

/* Mobile (320px - 480px) */
@media (max-width: 480px) {
  .hero {
    min-height: 45vh;
  }
  .hero-img {
    min-height: 45vh;
  }
  .hero-content {
    padding: 12px 8px;
  }
  .hero-content h1.brand-title {
    margin-bottom: 0.6rem;
  }
  .hero-content h2 {
    margin-bottom: 1rem;
  }
  .hero-content p.brand-subtitle {
    margin-bottom: 1.2rem;
    padding: 0 5px;
  }
  .hero-overlay {
    background: linear-gradient(
      rgba(0, 0, 0, 0.4) 0%, 
      rgba(0, 0, 0, 0.6) 30%, 
      rgba(0, 0, 0, 0.8) 70%, 
      rgba(0, 0, 0, 0.5) 100%
    );
  }
}

/* Très petit mobile (jusqu'à 320px) */
@media (max-width: 320px) {
  .hero {
    min-height: 40vh;
  }
  .hero-img {
    min-height: 40vh;
  }
  .hero-content {
    padding: 10px 6px;
  }
}

/* ===== FOOTER OPTIMISÉ ===== */
.site-footer-brown {
  background: #6d3f26;
  color: #fff;
  padding: 50px 20px 25px 20px;
  margin-top: 40px;
}

.footer-brown-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* Lignes du footer */
.footer-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  gap: 60px;
  flex-wrap: wrap;
}

.footer-col {
  flex: 1;
  min-width: 200px;
  max-width: 350px;
  text-align: center;
}

.footer-brown-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 16px;
  position: relative;
  padding-bottom: 8px;
  display: inline-block;
  color: #d4af37;
}

.footer-brown-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #d4af37;
}

.footer-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.footer-icon {
  width: 32px;
  height: 32px;
  background-color: #d4af37;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.footer-icon svg {
  width: 16px;
  height: 16px;
  fill: #6d3f26;
}

.footer-info {
  color: #fff;
  line-height: 1.4;
  font-size: 0.95rem;
}

.footer-info a {
  color: #f4e4bc;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-info a:hover {
  color: #d4af37;
  text-decoration: underline;
}

.footer-brown-bottom {
  text-align: center;
  color: #f4e4bc;
  font-size: 0.9rem;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #8d5a3a;
}

/* Footer responsive */
@media (max-width: 900px) {
  .footer-row {
    flex-direction: column;
    gap: 30px;
    align-items: center;
  }
  
  .footer-col {
    max-width: 300px;
  }
}

@media (max-width: 768px) {
  .site-footer-brown {
    padding: 40px 15px 20px 15px;
  }
  
  .footer-brown-grid {
    gap: 30px;
  }
  
  .footer-row {
    gap: 25px;
  }
  
  .footer-brown-title {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .site-footer-brown {
    padding: 30px 10px 15px 10px;
  }
  
  .footer-brown-grid {
    gap: 25px;
  }
  
  .footer-row {
    gap: 20px;
  }
  
  .footer-col {
    min-width: 180px;
  }
  
  .footer-brown-title {
    font-size: 1rem;
    margin-bottom: 12px;
  }
  
  .footer-icon {
    width: 28px;
    height: 28px;
  }
  
  .footer-icon svg {
    width: 14px;
    height: 14px;
  }
  
  .footer-info {
    font-size: 0.9rem;
  }
  
  .footer-item {
    gap: 10px;
  }
}