/* ============================================================
   DESIGN SYSTEM — variables uniques, à personnaliser par client.
   Règle : AUCUNE couleur/taille en dur dans le reste du CSS.
   ============================================================ */
:root {
  /* Couleurs (call client 29/07/2026 : brun croûte de pain, fond crème, accent doré)
     Contrastes vérifiés (WCAG) :
     - texte #3A2414 sur fond #FAF5EC ≈ 12,9:1 (AA/AAA)
     - texte-secondaire #6B4F35 sur fond #FAF5EC ≈ 6,9:1 (AA)
     - primaire-contraste #FAF5EC sur primaire #5C3A21 ≈ 9,3:1 (AA)
     - accent #C89B3C : décoratif uniquement (bordures, icônes, éléments UI
       sur fond primaire ≈ 3,9:1) — JAMAIS en couleur de texte sur fond clair. */
  --couleur-fond: #FAF5EC;
  --couleur-texte: #3A2414;
  --couleur-texte-secondaire: #6B4F35;
  --couleur-primaire: #5C3A21;
  --couleur-primaire-contraste: #FAF5EC;
  --couleur-accent: #C89B3C;
  --couleur-surface: #F3EADA;
  --couleur-bordure: #E2D5BE;
  /* Erreur formulaire : rouge brique dans la gamme chaude —
     sur fond #FAF5EC ≈ 7,6:1, sur surface #F3EADA ≈ 6,9:1 (AA) */
  --couleur-erreur: #8C2F1F;

  /* Typographie : simple, lisible, un peu ronde — pile système, pas de police externe (CSP) */
  --police-titres: "Segoe UI Rounded", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-texte: system-ui, -apple-system, "Segoe UI", sans-serif;
  --taille-base: 1rem;
  --taille-petite: 0.875rem;
  --echelle: 1.25;

  /* Espacements */
  --espace-xs: 0.25rem;
  --espace-s: 0.5rem;
  --espace-m: 1rem;
  --espace-l: 2rem;
  --espace-xl: 4rem;

  /* Divers */
  --rayon: 0.5rem;
  --largeur-max: 72rem;
  --largeur-texte: 40rem;
  --largeur-min-carte: 16rem;
  --epaisseur-accent: 4px;
  --epaisseur-focus: 2px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: var(--taille-base);
  color: var(--couleur-texte);
  background: var(--couleur-fond);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--police-titres);
  line-height: 1.2;
}

/* ---------- Header / navigation ---------- */
.site-header {
  border-bottom: 1px solid var(--couleur-bordure);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espace-m);
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: var(--espace-m) var(--espace-l);
}

.nav-logo {
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: calc(var(--taille-base) * var(--echelle));
  color: var(--couleur-texte);
  text-decoration: none;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  font-size: calc(var(--taille-base) * var(--echelle) * var(--echelle));
  padding: var(--espace-xs) var(--espace-s);
  cursor: pointer;
}

.nav-menu {
  display: flex;
  gap: var(--espace-l);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  color: var(--couleur-texte);
  text-decoration: none;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  color: var(--couleur-primaire);
}

.nav-menu a[aria-current="page"] {
  color: var(--couleur-primaire);
  font-weight: 600;
  border-bottom: var(--epaisseur-focus) solid var(--couleur-accent);
}

/* ---------- Sections ---------- */
.hero {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: var(--espace-xl) var(--espace-l);
  text-align: center;
}

.hero h1 {
  font-size: calc(var(--taille-base) * var(--echelle) * var(--echelle) * var(--echelle));
  margin: 0 0 var(--espace-m);
}

.hero p {
  color: var(--couleur-texte-secondaire);
  max-width: var(--largeur-texte);
  margin: 0 auto;
}

.bouton {
  display: inline-block;
  margin-top: var(--espace-l);
  padding: var(--espace-s) var(--espace-l);
  background: var(--couleur-primaire);
  color: var(--couleur-primaire-contraste);
  border: none;
  border-radius: var(--rayon);
  text-decoration: none;
  font-family: var(--police-titres);
  font-size: var(--taille-base);
  font-weight: 600;
  cursor: pointer;
}

.bouton:hover,
.bouton:focus-visible {
  background: var(--couleur-texte);
}

/* ---------- Bandes de section sur fond surface (spécialités, contact) ---------- */
.specialites,
.contact-bande {
  background: var(--couleur-surface);
  border-top: 1px solid var(--couleur-bordure);
  border-bottom: 1px solid var(--couleur-bordure);
}

.specialites-inner,
.contact-inner {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: var(--espace-xl) var(--espace-l);
}

.specialites h2,
.contact-bande h2 {
  font-size: calc(var(--taille-base) * var(--echelle) * var(--echelle));
  margin: 0 0 var(--espace-l);
}

/* ---------- Spécialités ---------- */
.specialites h2 {
  text-align: center;
}

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--largeur-min-carte), 1fr));
  gap: var(--espace-l);
  list-style: none;
  margin: 0;
  padding: 0;
}

.carte {
  background: var(--couleur-fond);
  border: 1px solid var(--couleur-bordure);
  border-top: var(--epaisseur-accent) solid var(--couleur-accent);
  border-radius: var(--rayon);
  padding: var(--espace-l);
  text-align: center;
}

.carte-icone {
  display: block;
  font-size: calc(var(--taille-base) * var(--echelle) * var(--echelle) * var(--echelle));
  margin-bottom: var(--espace-s);
}

.carte h3 {
  margin: 0 0 var(--espace-s);
}

.carte p {
  margin: 0;
  color: var(--couleur-texte-secondaire);
  font-size: var(--taille-petite);
}

/* ---------- Contact & horaires ---------- */
.contact-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--largeur-min-carte), 1fr));
  gap: var(--espace-xl);
}

/* <address> sans italique par défaut (partagé contact + footer) */
.contact-adresse,
.site-footer address {
  font-style: normal;
}

.contact-adresse {
  margin-bottom: var(--espace-l);
}

.contact-adresse p {
  margin: 0 0 var(--espace-s);
}

.contact-adresse a,
.site-footer a {
  color: var(--couleur-primaire);
}

.horaires {
  width: 100%;
  border-collapse: collapse;
}

.horaires th,
.horaires td {
  text-align: left;
  padding: var(--espace-s) var(--espace-m) var(--espace-s) 0;
  border-bottom: 1px solid var(--couleur-bordure);
}

.horaires td {
  color: var(--couleur-texte-secondaire);
}

/* ---------- Formulaire de contact ---------- */
.formulaire {
  display: grid;
  gap: var(--espace-m);
}

.champ label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--espace-xs);
}

.champ input,
.champ textarea {
  width: 100%;
  padding: var(--espace-s);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font: inherit;
}

.champ input:focus-visible,
.champ textarea:focus-visible {
  outline: var(--epaisseur-focus) solid var(--couleur-primaire);
  outline-offset: var(--epaisseur-focus);
}

.champ textarea {
  resize: vertical;
}

.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"] {
  border-color: var(--couleur-erreur);
}

.champ-erreur {
  margin: var(--espace-xs) 0 0;
  color: var(--couleur-erreur);
  font-size: var(--taille-petite);
}

.champ-erreur:empty {
  display: none;
}

/* Honeypot anti-spam : champ invisible pour les humains, rempli par les robots */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire .bouton {
  justify-self: start;
  margin-top: 0;
}

.formulaire-statut {
  margin: 0;
  font-weight: 600;
}

.formulaire-statut:empty {
  display: none;
}

.formulaire-statut.succes {
  color: var(--couleur-primaire);
}

.formulaire-statut.erreur {
  color: var(--couleur-erreur);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--couleur-bordure);
  text-align: center;
  padding: var(--espace-l);
  color: var(--couleur-texte-secondaire);
  font-size: var(--taille-petite);
}

.site-footer p {
  margin: 0 0 var(--espace-xs);
}

.site-footer p:last-child {
  margin-bottom: 0;
}

/* ---------- Mobile ---------- */
@media (max-width: 48rem) {
  .nav-toggle {
    display: block;
  }

  .nav-menu {
    display: none;
    flex-direction: column;
    gap: var(--espace-m);
    width: 100%;
    padding: var(--espace-m) 0;
  }

  .nav-menu.ouvert {
    display: flex;
  }
}