/* =============================================================================
   OH ! GRILL — feuille de style unique du site.
   Mobile-first. Aucune dépendance externe (police système, pas de framework).
   ============================================================================= */

/* --- Réinitialisation minimale ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; border: 0; background: none; cursor: pointer; }
address { font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* --- Palette et échelle --------------------------------------------------- */
:root {
  --rouge:        #c21f26;
  --rouge-fonce:  #8f1418;
  --rouge-clair:  #e6484d;
  --noir:         #14100f;
  --noir-doux:    #201a18;
  --creme:        #faf6ee;
  --creme-fonce:  #f0e8d8;
  --texte:        #241d1a;
  --texte-clair:  #6b5f57;
  --bordure:      #e5dcc9;

  --font-titre: Georgia, 'Times New Roman', serif;
  --font-corps: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --rayon: 14px;
  --ombre: 0 12px 30px -12px rgba(20, 16, 15, 0.35);
  /* Ombre des cartes : un liseré net très léger, puis une diffusion large. */
  --ombre-douce: 0 1px 2px rgba(20, 16, 15, 0.04), 0 18px 32px -22px rgba(20, 16, 15, 0.3);
  --largeur-max: 1180px;
}

html {
  font-family: var(--font-corps);
  color: var(--texte);
  background: var(--creme);
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: var(--font-titre);
  line-height: 1.15;
  color: var(--noir);
}
h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700; margin-bottom: 0.9rem; }
h3 { font-size: 1.15rem; font-weight: 700; }

p + p { margin-top: 1rem; }

/* Règle de mise en page : un texte qui n'a pas d'image à côté de lui occupe
   toute la largeur de son conteneur. Les textes accompagnés d'une image sont
   déjà limités par la largeur de leur colonne (.grille-2, cartes, pied).
   Ne pas réintroduire de max-width sur les paragraphes pleine largeur. */

.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lien-evitement {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--rouge);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.lien-evitement:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--rouge-clair);
  outline-offset: 2px;
}

/* --- Boutons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
}
.btn--rouge { background: var(--rouge); color: #fff; }
.btn--rouge:hover { background: var(--rouge-fonce); }
.btn--contour { background: transparent; color: var(--creme); border: 2px solid var(--creme); }
.btn--contour:hover { background: rgba(250, 246, 238, 0.12); }
.btn--noir { background: var(--noir); color: var(--creme); }
.btn--noir:hover { background: var(--noir-doux); }
.btn:hover { transform: translateY(-1px); }

.groupe-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* --- En-tête / navigation ---------------------------------------------- */
.entete {
  background: var(--noir);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 18px rgba(0,0,0,0.25);
  padding-top: 12px;
  padding-bottom: 12px;
}
.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 74px;
}

/* Pastilles Facebook/WhatsApp flottantes, fixées au viewport, visibles sur
   toutes les pages. */
.reseaux-flottants {
  position: fixed;
  top: 50%;
  right: 1.25rem;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.reseaux-flottants a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #1877f2;
  color: #fff;
  box-shadow: var(--ombre);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.reseaux-flottants a:hover { transform: scale(1.05); box-shadow: var(--ombre-douce); }
.reseaux-flottants svg { width: 32px; height: 32px; fill: currentColor; stroke: none; }
.reseaux-flottants__whatsapp { background: #25d366; }

/* Logo du client, lettrage compris. Il est fourni sur fond noir, identique à
   celui de la barre et du pied : il s'y fond sans détourage. */
.logo {
  display: block;
  flex-shrink: 0;
}
.logo img { width: auto; height: 52px; }
.logo--pied { display: block; margin-bottom: 1rem; }
.logo--pied img { height: 64px; }

.menu-bascule {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
}
.menu-bascule__trait {
  display: block;
  height: 2px;
  background: var(--creme);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-bascule[aria-expanded="true"] .menu-bascule__trait:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-bascule[aria-expanded="true"] .menu-bascule__trait:nth-child(2) { opacity: 0; }
.menu-bascule[aria-expanded="true"] .menu-bascule__trait:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-principale {
  position: fixed;
  inset: 74px 0 0 0;
  background: var(--noir);
  padding: 1.5rem 1.25rem 2rem;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  overflow-y: auto;
}
.nav-principale.ouvert {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.nav-principale ul { display: flex; flex-direction: column; gap: 0.3rem; }
/* :not(.btn) — le bouton téléphone du menu devient un vrai lien <a> une fois le
   numéro révélé. Sans cette exclusion, les règles de liens du menu (plus
   spécifiques que .btn) reprenaient la main : la pastille passait en
   display:block et le numéro se retrouvait sous l'icône. */
.nav-principale a:not(.btn) {
  display: block;
  color: var(--creme);
  font-weight: 600;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid rgba(250,246,238,0.1);
  font-size: 1.05rem;
}
.nav-principale a.actif { color: var(--rouge-clair); }
.nav-principale__cta { margin-top: 1.25rem; justify-content: center; padding-left: 1.85rem; padding-right: 1.85rem; }

@media (min-width: 860px) {
  .menu-bascule { display: none; }
  .nav-principale {
    position: static;
    inset: auto;
    background: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    overflow: visible;
  }
  .nav-principale ul { flex-direction: row; gap: 1.6rem; }
  .nav-principale a:not(.btn) { border-bottom: 0; padding: 0.4rem 0.1rem; position: relative; }
  .nav-principale a.actif::after,
  .nav-principale a:not(.btn):hover::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 2px;
    background: var(--rouge-clair);
  }
  .nav-principale__cta { margin-top: 0; }
}

/* --- Sections génériques ------------------------------------------------ */
main { display: block; }

.section {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.section--sombre {
  background: var(--noir);
  color: var(--creme);
}
.section--sombre h1, .section--sombre h2, .section--sombre h3 { color: var(--creme); }
.section--creme-fonce { background: var(--creme-fonce); }

.entete-page {
  background: var(--noir);
  color: var(--creme);
  padding: clamp(2.5rem, 8vw, 5.5rem) 0 clamp(2rem, 6vw, 3.5rem);
}
.entete-page h1 { color: var(--creme); }

/* En-tête illustré : même principe que le héros de l'accueil, en plus court.
   Le voile est plus soutenu car ces en-têtes portent un chapeau en petit corps
   par-dessus la photo. */
.entete-page--image {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 8vw, 5rem) clamp(2.5rem, 6vw, 3.5rem);
}
.entete-page--image picture,
.entete-page--image img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.entete-page--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20,16,15,0.72) 0%, rgba(20,16,15,0.66) 45%, rgba(20,16,15,0.84) 100%);
}
/* En mobile, le chapeau occupe presque toute la hauteur du bandeau : le voile
   est renforcé pour garder un texte parfaitement lisible. */
@media (max-width: 640px) {
  .entete-page--image::after {
    background: linear-gradient(180deg, rgba(20,16,15,0.8) 0%, rgba(20,16,15,0.76) 50%, rgba(20,16,15,0.88) 100%);
  }
}
.entete-page--image > .conteneur { position: relative; z-index: 2; }
.entete-page--image h1 { text-shadow: 0 2px 18px rgba(0,0,0,0.45); }
.entete-page--image .liseret,
.entete-page--image p.chapeau { text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
.entete-page .liseret { color: var(--rouge-clair); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.8rem; display: block; margin-bottom: 0.75rem; }
.entete-page p.chapeau { color: var(--creme-fonce); font-size: 1.1rem; margin-top: 1rem; }

.grille-2 {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 860px) {
  .grille-2 { grid-template-columns: 1.05fr 0.95fr; }
  .grille-2--inverse { direction: rtl; }
  .grille-2--inverse > * { direction: ltr; }
}

.image-cadre {
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
  background: var(--creme-fonce);
}
.image-cadre img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Hero (accueil) ------------------------------------------------------ */
.hero {
  position: relative;
  color: var(--creme);
  min-height: min(88vh, 720px);
  display: flex;
  align-items: center;
}
.hero picture, .hero img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Le texte étant centré, le voile est renforcé au milieu de l'image : sans
     cela le liséré rouge et le chapeau tombent sur les zones claires du mur. */
  background: linear-gradient(180deg, rgba(20,16,15,0.42) 0%, rgba(20,16,15,0.62) 40%, rgba(20,16,15,0.68) 65%, rgba(20,16,15,0.9) 100%);
  z-index: 1;
}
/* Bloc de texte centré verticalement : autant d'espace au-dessus qu'en dessous.
   Le padding identique en haut et en bas garde cette symétrie quand la hauteur
   du héros est contrainte par le contenu (petits écrans, paysage). */
.hero__contenu {
  position: relative;
  z-index: 2;
  padding-block: 3.25rem;
}
.hero__liseret {
  display: inline-block;
  color: var(--rouge-clair);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 1rem;
}
.hero .hero__liseret { text-shadow: 0 1px 12px rgba(0,0,0,0.55); }
.hero h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.45); }
.hero p.chapeau { color: var(--creme-fonce); font-size: 1.05rem; margin-top: 1.1rem; text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
.hero .groupe-btn { margin-top: 1.75rem; }

/* --- Points forts / highlights ------------------------------------------ */
.mise-en-avant {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .mise-en-avant { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .mise-en-avant { grid-template-columns: repeat(6, 1fr); } }

.carte-avantage {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 18px;
  padding: 1.6rem 1.2rem;
  text-align: center;
  box-shadow: var(--ombre-douce);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.carte-avantage:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(20, 16, 15, 0.05), 0 22px 38px -22px rgba(20, 16, 15, 0.32);
}
.carte-avantage__icone { margin: 0 auto 0.9rem; }
.carte-avantage h3 { font-size: 1rem; font-weight: 400; letter-spacing: 0.01em; margin-bottom: 0.3rem; }
.carte-avantage p { color: var(--texte-clair); font-size: 0.92rem; }

/* Pastille d'icône commune aux cartes et aux fiches : rond crème et trait
   rouge profond de la charte. Elle remplace les disques rouges pleins, trop
   saturés à côté des cartes blanches. */
.carte-avantage__icone,
.carte-prestation__icone,
.ligne-fiche__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: #f7efe4;
  color: var(--rouge-fonce);
}

/* --- Grilles de cartes (prestations, événementiel, saisons) ------------- */
.grille-cartes {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .grille-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grille-cartes--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 980px) { .grille-cartes--3 { grid-template-columns: repeat(3, 1fr); } }

/* Vignettes compactes (types d'événements) : même langage que les cartes
   vitrine — blanc, coins arrondis, ombre douce, icône dans un rond crème —
   mais sans visuel, pour rester légères dans une colonne. */
.carte-prestation {
  background: #fff;
  border-radius: 18px;
  padding: 1.5rem 1.35rem;
  border: 1px solid var(--bordure);
  box-shadow: 0 1px 2px rgba(20, 16, 15, 0.04), 0 14px 26px -20px rgba(20, 16, 15, 0.26);
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.carte-prestation:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(20, 16, 15, 0.05), 0 22px 38px -22px rgba(20, 16, 15, 0.32);
}
.carte-prestation__icone { margin-bottom: 0.9rem; }
.carte-prestation h3 { font-size: 1.05rem; font-weight: 400; letter-spacing: 0.01em; margin-bottom: 0.35rem; }
.carte-prestation p { margin: 0; color: var(--texte-clair); font-size: 0.95rem; }

/* --- Cartes de saison (page Carte) ---------------------------------------
   Vraies « cartes de restaurant » : visuel de saison, filet gravé, titre en
   serif. Les teintes prolongent la palette du site (crème, bordure, rouge) ;
   chaque saison n'apporte qu'une nuance naturelle, jamais un bloc de couleur.
   Cartes volontairement étroites et grille resserrée : l'air autour d'elles
   fait partie du dessin. */
.cartes-saison {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: 1fr;
  max-width: 64rem;
  margin: 3.25rem auto 0;
}
@media (min-width: 900px) { .cartes-saison { grid-template-columns: repeat(3, 1fr); } }

/* Même composant pour les quatre prestations traiteur : 1 colonne, puis 2,
   puis 4 sur grand écran, dans une grille resserrée et centrée. */
.cartes-prestation {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  max-width: 70rem;
  margin: 3.25rem auto 0;
}
@media (min-width: 560px)  { .cartes-prestation { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cartes-prestation { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } }

/* Mention de disponibilité de la carte : à conserver en permanence sous la
   grille. Pleine largeur, centrée sous les cartes, ton discret. */
.cartes-saison__mention {
  margin-top: 2rem;
  text-align: center;
  color: var(--texte-clair);
  font-size: 0.95rem;
}

.carte-vitrine {
  --vitrine-fond:  var(--creme-fonce);
  --vitrine-trait: var(--texte-clair);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--ombre-douce);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.carte-vitrine:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(20, 16, 15, 0.05), 0 26px 44px -24px rgba(20, 16, 15, 0.36);
}
.carte-vitrine--printemps { --vitrine-fond: #eef1e7; --vitrine-trait: #6a7a58; }
.carte-vitrine--ete       { --vitrine-fond: #f9f0de; --vitrine-trait: #ac7a2b; }
.carte-vitrine--automne   { --vitrine-fond: #f7e8e2; --vitrine-trait: var(--rouge-fonce); }
/* Prestations traiteur : une seule teinte pour les quatre cartes — la série
   se lit comme un ensemble, la différence vient de l'illustration. */
.carte-vitrine--prestation { --vitrine-fond: #f7efe4; --vitrine-trait: var(--rouge-fonce); }
.carte-vitrine--prestation h3 { font-size: 1.2rem; }

.carte-vitrine__visuel {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--vitrine-fond);
  color: var(--vitrine-trait);
  border-bottom: 1px solid var(--bordure);
}
/* Sur une carte pleine largeur (mobile), un visuel en 4/3 mangerait l'écran. */
@media (max-width: 639px) { .carte-vitrine__visuel { aspect-ratio: 16 / 10; } }

.carte-vitrine__visuel picture,
.carte-vitrine__visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-vitrine__illustration { width: 62%; height: auto; }

.carte-vitrine__corps {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  flex: 1;
  padding: 1.6rem 1.5rem 1.75rem;
}
.carte-vitrine__surtitre {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--vitrine-trait);
}
.carte-vitrine h3 {
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.carte-vitrine__filet {
  width: 34px;
  height: 1px;
  background: var(--vitrine-trait);
  opacity: 0.5;
  margin: 0.25rem 0 0.4rem;
}
.carte-vitrine__note { color: var(--texte-clair); font-size: 0.95rem; }
.carte-vitrine .btn--vitrine { margin-top: auto; }

.btn--vitrine {
  background: transparent;
  color: var(--vitrine-trait);
  border: 1.5px solid currentColor;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.6rem 1.35rem;
  margin-top: 1.35rem;
}
.btn--vitrine:hover { background: var(--vitrine-trait); color: #fff; border-color: var(--vitrine-trait); }

/* Entre 640 et 900 px, trois colonnes seraient trop étroites et deux
   laisseraient une carte orpheline : les cartes passent en format paysage,
   visuel à gauche, empilées sur une seule colonne. */
@media (min-width: 640px) and (max-width: 899px) {
  .cartes-saison { gap: 1.5rem; max-width: 44rem; }
  .carte-vitrine { flex-direction: row; }
  .carte-vitrine__visuel {
    flex: 0 0 38%;
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: 1px solid var(--bordure);
  }
  .carte-vitrine__corps { align-items: flex-start; text-align: left; padding: 1.6rem 1.75rem; }
  .carte-vitrine__filet { margin-left: 0; }
  .carte-vitrine .btn--vitrine { margin-top: 1.25rem; }
}

/* --- Galerie photo (soirées à thème, ambiance) -------------------------- */
.galerie {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .galerie { grid-template-columns: repeat(4, 1fr); } }
.galerie figure {
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
  background: var(--creme-fonce);
  aspect-ratio: 1 / 1;
}
.galerie img { width: 100%; height: 100%; object-fit: cover; }
.galerie figcaption { display: none; }

/* --- Bandeau CTA --------------------------------------------------------- */
/* Photo en fond fixe (immobile au défilement), voile sombre pour que le texte
   reste lisible par-dessus — même principe que l'en-tête illustré des pages. */
.bandeau-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media (max-width: 720px) { .bandeau-cta { background-attachment: scroll; } }
.bandeau-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,16,15,0.72) 0%, rgba(20,16,15,0.66) 45%, rgba(20,16,15,0.84) 100%);
}
.bandeau-cta > .conteneur { position: relative; z-index: 1; }
.bandeau-cta h2, .bandeau-cta h3 { text-shadow: 0 2px 18px rgba(0,0,0,0.45); }
.bandeau-cta .groupe-btn { justify-content: center; margin-top: 1.75rem; }
.bandeau-cta p.chapeau { color: var(--creme-fonce); text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
.bandeau-cta h3 { margin-top: 2.25rem; margin-bottom: 0.6rem; }

/* --- Bannière statut (Nos événements en construction) ------------------- */
.statut-construction {
  background: #fff;
  border: 2px dashed var(--rouge);
  border-radius: var(--rayon);
  padding: 2.5rem 1.75rem;
  text-align: center;
}
.statut-construction__icone { display: flex; justify-content: center; margin-bottom: 1rem; }

/* --- Contact -------------------------------------------------------------- */
.fiche-contact {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 18px;
  padding: 2rem 1.9rem;
  box-shadow: var(--ombre-douce);
}
.fiche-contact h2 { font-size: 1.5rem; font-weight: 400; letter-spacing: 0.01em; margin-bottom: 0; }
.fiche-contact dl { display: grid; margin-top: 1.5rem; }

/* Une ligne = icône cerclée à gauche, intitulé puis valeur à droite.
   dt et dd restent enfants directs du <div> de la <dl> (grille nommée). */
.ligne-fiche {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icone cle" "icone valeur";
  align-items: center;
  gap: 0.15rem 0.95rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--bordure);
}
.ligne-fiche:first-child { border-top: 0; padding-top: 0; }
.ligne-fiche:last-child { padding-bottom: 0; }
.ligne-fiche__icone { grid-area: icone; }
.ligne-fiche dt {
  grid-area: cle;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-clair);
}
.ligne-fiche dd { grid-area: valeur; margin: 0; font-size: 1.05rem; font-weight: 600; }
.ligne-fiche dd .btn { margin-top: 0.35rem; }

.fiche-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bordure);
}
.fiche-contact__intro { color: var(--texte-clair); margin: 0.6rem 0 1.5rem; }

/* Mention des communes desservies, sous la fiche. */
.note-zones {
  margin-top: 2.5rem;
  text-align: center;
  color: var(--texte-clair);
  font-size: 0.95rem;
}

/* --- Pied de page --------------------------------------------------------- */
.pied {
  background: var(--noir);
  color: var(--creme-fonce);
  padding: 3.5rem 0 1.5rem;
}
.pied__grille {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .pied__grille { grid-template-columns: 1.3fr 1fr 1fr; } }
.pied h2 { color: var(--creme); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.9rem; }
.pied a:hover { color: var(--rouge-clair); }
.pied address, .pied p { color: var(--creme-fonce); font-size: 0.95rem; }
.pied__reseau { display: inline-block; margin-top: 0.75rem; font-weight: 600; color: var(--creme-fonce); }
.pied__liens li { margin-bottom: 0.5rem; }
/* Dernière ligne : copyright, SIRET et signature d'agence puis liens légaux,
   le tout centré et regroupé (liens séparés par une barre verticale posée en
   CSS pour qu'un lecteur d'écran ne l'énonce pas). */
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  row-gap: 0.5rem;
  column-gap: 0.9rem;
  margin-top: 2.5rem;
  font-size: 0.78rem;
  color: var(--creme-fonce);
}

/* vertical-align: middle est indispensable : la ligne de base d'un inline-flex
   est celle de son premier élément — ici l'image, qui n'en a pas. Sans cela le
   logo et son libellé remontent par rapport au texte qui les précède. */
.pied__signature a {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 0.45rem;
  color: var(--creme-fonce);
  padding-block: 3px;
}
.pied__signature a img { width: 104px; flex: none; }
.pied__signature a span { text-decoration: underline; text-underline-offset: 2px; }
.pied__signature a:hover { color: var(--rouge-clair); }
/* Le groupe ne devient insécable qu'au-delà de 900 px : en dessous, il doit
   pouvoir se replier sans déborder de l'écran. */
@media (min-width: 900px) { .pied__signature { white-space: nowrap; } }

.pied__legal ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1rem; }
.pied__legal li + li::before {
  content: "|";
  margin-right: 1rem;
  color: rgba(250, 246, 238, 0.32);
}
.pied__legal a {
  display: inline-block;
  padding-block: 3px;
  color: var(--creme-fonce);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pied__legal a:hover { color: var(--rouge-clair); }

/* --- Page 404 -------------------------------------------------------------- */
.page-404 {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.25rem;
}
.page-404__code {
  font-family: var(--font-titre);
  font-size: clamp(4rem, 14vw, 8rem);
  color: var(--rouge);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.page-404 .groupe-btn { justify-content: center; margin-top: 2rem; }

/* --- Recherches associées (maillage interne), en encart défilant du pied -- */
.pied__recherches {
  max-height: 110px;
  overflow-y: auto;
  scrollbar-width: thin;
  font-size: 0.85rem;
  line-height: 1.7;
  padding-right: 0.5rem;
}
.recherches__lien { color: var(--creme-fonce); }
.recherches__lien:hover { color: var(--creme); }

/* --- Contact masqué (téléphone / e-mail) --------------------------------- */
.masque-contact { cursor: pointer; }

/* --- Pages légales (Mentions légales, Politique de confidentialité) ------ */
/* Ligne « libellé + bouton » : un bouton laissé dans un paragraphe est plus
   haut que l'interligne et vient chevaucher la ligne voisine. En flex, chaque
   ligne réserve sa propre hauteur et le libellé reste centré sur le bouton. */
.ligne-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}
.ligne-contact + .ligne-contact { margin-top: 0.75rem; }

.page-legale h2 { margin-top: 2.25rem; font-size: 1.25rem; }
.page-legale h2:first-child { margin-top: 0; }
.page-legale p { color: var(--texte-clair); }
.page-legale__maj { margin-top: 3rem; font-size: 0.85rem; font-style: italic; }

/* Blocs numérotés séparés par un filet, comme sur un document administratif. */
.bloc-legal {
  border-top: 1px solid var(--bordure);
  margin-top: 2.75rem;
  padding-top: 2.25rem;
}
.bloc-legal:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.bloc-legal h2 { margin-top: 0; margin-bottom: 1.4rem; }

/* Champs étiquetés (raison sociale, adresse, SIRET…) sur deux colonnes. */
.fiches-legales {
  display: grid;
  gap: 1.35rem 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .fiches-legales { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.champ-legal dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rouge);
}
.champ-legal dd { margin: 0.35rem 0 0; }

/* Contact masqué en version discrète : petite pastille sobre tant que la valeur
   n'est pas révélée, simple lien souligné ensuite (le sélecteur d'élément
   distingue le <button> du <a> créé au clic). */
button.lien-masque,
a.lien-masque {
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
button.lien-masque:hover,
a.lien-masque:hover { color: var(--rouge-clair); }
button.lien-masque svg,
a.lien-masque svg { display: none; }

/* --- Formulaire de contact ------------------------------------------------ */
/* Le formulaire vit désormais dans une .fiche-contact (carte déjà stylée) :
   pas de carte propre ici, seulement la mise en forme des champs. */
.form-contact__champ { margin-bottom: 1.25rem; }
.form-contact__champ label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}
.form-contact__champ input,
.form-contact__champ textarea {
  width: 100%;
  font: inherit;
  padding: 0.75rem 1rem;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  background: var(--creme);
  color: var(--texte);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-contact__champ input:focus,
.form-contact__champ textarea:focus {
  outline: none;
  border-color: var(--rouge);
  box-shadow: 0 0 0 3px rgba(194, 31, 38, 0.18);
}
.form-contact__champ textarea { resize: vertical; min-height: 8rem; }
.form-contact__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-contact__message {
  padding: 1rem 1.25rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  font-weight: 600;
}
.form-contact__message--succes { background: #e6f4ea; color: #1e6b3a; }
.form-contact__message--erreur { background: #fbe9e7; color: #b3261e; }