/* ==========================================================
   Sel Noir — restaurant FICTIF
   Site de démonstration réalisé par Clic Local.
   Ambiance immersive : photos plein cadre très contrastées,
   grandes typographies, beaucoup de vide, navigation minimale.
   Mobile d'abord : les règles de base visent le téléphone.
   ========================================================== */

:root {
  color-scheme: dark;

  /* 1. « Boutons & accents » : boutons importants et textes mis en avant */
  --accent: #c8a46a;            /* laiton */
  --accent-sombre: #8a6a33;     /* même teinte, pour un fond clair */
  --accent-texte: var(--accent);
  --bouton: var(--accent);
  --sur-bouton: #141210;

  /* 2. « Fond » : couleur du fond du site uniquement */
  --fond: #0f0e0d;              /* charbon */
  --fond-2: #191715;            /* surfaces */
  --ligne: rgba(255, 255, 255, .12);
  --encre: #f4efe8;             /* titres */
  --texte: #cfc7bd;
  --discret: #8f877e;

  /* Assombrissement neutre des photos (jamais coloré) */
  --noir: 0, 0, 0;

  --titres: "Fraunces", Georgia, "Times New Roman", serif;
  --police: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --largeur: 1320px;
  --gouttiere: 20px;
  --entete: 116px;              /* hauteur de l'en-tête fixe sur téléphone (deux lignes) */
}
@media (min-width: 900px) { :root { --gouttiere: 56px; --entete: 84px; } }

/* 1. Boutons & accents */
:root[data-accent="cuivre"] { --accent: #d4926b; --accent-sombre: #9a5634; }
:root[data-accent="ivoire"] { --accent: #e9e1d1; --accent-sombre: #4f4840; }
:root[data-accent="sauge"]  { --accent: #a6c1a2; --accent-sombre: #4c6948; }
:root[data-accent="vin"]    { --accent: #cf8a97; --accent-sombre: #8a3c4b; }

/* 2. Fond */
:root[data-fond="bordeaux"]  { --fond: #240b12; --fond-2: #33121b; }
:root[data-fond="bouteille"] { --fond: #0b1a14; --fond-2: #13261e; }
:root[data-fond="encre"]     { --fond: #0b1222; --fond-2: #141d31; }
:root[data-fond="chocolat"]  { --fond: #1e140e; --fond-2: #2b1e16; }
:root[data-fond="creme"] {
  color-scheme: light;
  --fond: #f2ece2; --fond-2: #e8dfd1; --ligne: rgba(0, 0, 0, .13);
  --encre: #17130f; --texte: #3f3731; --discret: #6f655c;
  --accent-texte: var(--accent-sombre); --bouton: var(--accent-sombre); --sur-bouton: #fff;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + 24px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0; font-family: var(--police); font-size: 1.0625rem; line-height: 1.7;
  color: var(--texte); background: var(--fond); -webkit-font-smoothing: antialiased;
  transition: background-color .45s ease, color .45s ease;
}
body.menu-ouvert { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-texte); text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--accent-texte); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--titres); color: var(--encre); font-weight: 500; line-height: .98; letter-spacing: -0.03em; margin: 0 0 .45em; font-optical-sizing: auto; }
h1 { font-size: clamp(3.4rem, 16vw, 10.5rem); font-weight: 600; }
h2 { font-size: clamp(2.6rem, 11vw, 6.4rem); }
h3 { font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.05; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 300; color: var(--accent-texte); }
p { margin: 0 0 1.1em; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding-inline: var(--gouttiere); }
.lien-evitement { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--bouton); color: var(--sur-bouton); padding: .6rem 1rem; }
.lien-evitement:focus { left: 12px; top: 12px; }

.surtitre { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--accent-texte); margin-bottom: 1.4rem; }

/* ---------- Filigrane DÉMO : gris, discret ---------- */
body::after {
  content: "DÉMO"; position: fixed; inset: 0; z-index: 400; pointer-events: none; user-select: none;
  display: grid; place-items: center;
  font-family: var(--police); font-weight: 800; letter-spacing: .25em;
  font-size: clamp(4.5rem, 24vw, 16rem);
  color: rgba(140, 140, 140, .11);
  transform: rotate(-22deg);
}

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .8rem 1.5rem; border: 1px solid transparent; border-radius: 0;
  font: inherit; font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .25s, color .25s, border-color .25s;
}
.bouton-plein { background: var(--bouton); color: var(--sur-bouton); border-color: var(--bouton); }
.bouton-plein:hover { background: var(--encre); border-color: var(--encre); color: var(--fond); }
.bouton-ligne { color: var(--encre); border-color: var(--accent-texte); background: transparent; }
.bouton-ligne:hover { background: var(--accent-texte); color: var(--fond); }
.bouton-photo { color: #fff; border-color: rgba(255, 255, 255, .7); }
.bouton-photo:hover { background: #fff; color: #111; border-color: #fff; }
.lien-fleche { display: inline-flex; align-items: center; gap: .9rem; font-weight: 700; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--encre); text-decoration: none; }
.lien-fleche::after { content: "→"; font-size: 1.2rem; color: var(--accent-texte); transition: transform .25s; }
.lien-fleche:hover::after { transform: translateX(6px); }

/* ---------- Sélecteurs de couleurs (en haut, à droite) ---------- */
.couleurs { background: #000; color: #d9d4cc; font-size: .72rem; }
.couleurs .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 1.3rem; padding-block: 4px; }
.selecteur { display: inline-flex; align-items: center; }
.selecteur-libelle { font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-right: .4rem; white-space: nowrap; color: #bdb6ac; }
.choix-couleur { width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.choix-couleur::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); transition: transform .15s; }
.choix-couleur:hover::before { transform: scale(1.15); }
.choix-couleur[aria-pressed="true"]::before { box-shadow: 0 0 0 2px #000, 0 0 0 3.5px #fff; transform: scale(1.1); }
@media (max-width: 379px) { .couleurs .conteneur { justify-content: center; } .selecteur-libelle { letter-spacing: .08em; } .choix-couleur { width: 27px; } }
@media (min-width: 560px) { .selecteur + .selecteur { padding-left: 1.3rem; border-left: 1px solid rgba(255, 255, 255, .22); } }

/* ---------- En-tête fixe : logo, téléphone, deux boutons, menu ---------- */
.entete { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--fond) 94%, transparent); border-bottom: 1px solid var(--ligne); transition: background-color .45s; }
@supports (backdrop-filter: blur(1px)) { .entete { background: color-mix(in srgb, var(--fond) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } }
.entete .conteneur { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .4rem .6rem; padding-block: 8px; }
.logo { font-family: var(--titres); font-style: italic; font-weight: 600; font-size: 1.65rem; letter-spacing: -0.02em; line-height: 1; color: var(--encre); text-decoration: none; white-space: nowrap; }
.logo span { color: var(--accent-texte); }
.telephone { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding-inline: .3rem; color: var(--encre); font-weight: 700; font-size: .9rem; letter-spacing: .04em; text-decoration: none; white-space: nowrap; }
.telephone svg { width: 18px; height: 18px; fill: var(--accent-texte); flex-shrink: 0; }
.telephone:hover { color: var(--accent-texte); }
.menu-bouton { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: none; border: 1px solid var(--ligne); color: var(--encre); cursor: pointer; }
.menu-bouton i { display: grid; gap: 6px; width: 20px; }
.menu-bouton i::before, .menu-bouton i::after { content: ""; height: 1.5px; background: currentColor; }
.actions-entete { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.actions-entete .bouton { min-height: 44px; padding: .5rem .6rem; font-size: .7rem; letter-spacing: .1em; }
@media (max-width: 359px) { .telephone .numero { display: none; } .logo { font-size: 1.45rem; } }
@media (min-width: 900px) {
  .entete .conteneur { grid-template-columns: auto 1fr auto auto; gap: 1.6rem; min-height: var(--entete); padding-block: 0; }
  .telephone { justify-self: end; }
  .menu-bouton { order: 5; }
  .actions-entete { grid-column: auto; display: flex; gap: .6rem; }
  .actions-entete .bouton { min-height: 46px; padding: .6rem 1.2rem; font-size: .74rem; letter-spacing: .14em; }
  .logo { font-size: 1.9rem; }
}

/* Navigation plein écran */
.navigation { position: fixed; inset: 0; z-index: 200; background: var(--fond); display: flex; flex-direction: column; padding: 24px var(--gouttiere) 40px; overflow-y: auto; }
.navigation[hidden] { display: none; }
.navigation-haut { display: flex; justify-content: space-between; align-items: center; min-height: 52px; }
.navigation-fermer { min-height: 44px; background: none; border: 0; color: var(--encre); font: inherit; font-weight: 700; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.navigation ul { list-style: none; margin: auto 0; padding: 48px 0; }
.navigation li + li { border-top: 1px solid var(--ligne); }
.navigation ul a { display: flex; align-items: baseline; gap: 1rem; padding: .35rem 0; font-family: var(--titres); font-size: clamp(2.6rem, 12vw, 6rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; color: var(--encre); text-decoration: none; }
.navigation ul a small { font-family: var(--police); font-size: .75rem; font-weight: 700; letter-spacing: .2em; color: var(--accent-texte); }
.navigation ul a:hover, .navigation ul a[aria-current="page"] { font-style: italic; color: var(--accent-texte); }
.navigation-pied { display: grid; gap: .3rem; font-size: .95rem; color: var(--discret); }
.navigation-pied a { color: var(--encre); font-weight: 700; text-decoration: none; }

/* ---------- Grand plan d'ouverture ---------- */
.ouverture { position: relative; min-height: calc(100svh - var(--entete) - 46px); display: flex; align-items: flex-end; overflow: hidden; background: #000; }
.ouverture picture, .ouverture > img { position: absolute; inset: 0; }
.ouverture img { width: 100%; height: 100%; object-fit: cover; }
.ouverture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--noir), .15) 0%, rgba(var(--noir), .3) 35%, rgba(var(--noir), .78) 62%, rgba(var(--noir), .92) 100%); }
.ouverture .conteneur { position: relative; z-index: 1; padding-block: 120px 56px; }
.ouverture h1 { color: #fff; max-width: 9ch; margin-bottom: .3em; }
.ouverture h1 em { color: var(--accent); }
.ouverture .accroche { color: rgba(255, 255, 255, .88); font-size: clamp(1.05rem, 3.6vw, 1.3rem); max-width: 34ch; margin-bottom: 0; }
.ouverture .surtitre { color: var(--accent); }
@media (min-width: 900px) {
  .ouverture { min-height: calc(100vh - var(--entete) - 40px); }
  .ouverture::after { background: linear-gradient(90deg, rgba(var(--noir), .88) 0%, rgba(var(--noir), .62) 42%, rgba(var(--noir), .1) 80%), linear-gradient(180deg, transparent 55%, rgba(var(--noir), .6) 100%); }
  .ouverture .conteneur { padding-block: 160px 96px; }
}

/* Bandeau photo des pages intérieures */
.plan { position: relative; min-height: 62vh; min-height: 62svh; display: flex; align-items: flex-end; overflow: hidden; background: #000; }
.plan > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--noir), .2) 0%, rgba(var(--noir), .25) 45%, rgba(var(--noir), .85) 100%); }
.plan .conteneur { position: relative; z-index: 1; padding-block: 96px 48px; }
.plan h1 { color: #fff; font-size: clamp(3.2rem, 15vw, 8.5rem); }
.plan h1 em { color: var(--accent); }
.plan .surtitre { color: var(--accent); }
.plan p { color: rgba(255, 255, 255, .86); max-width: 44ch; margin: 0; font-size: 1.08rem; }
@media (min-width: 900px) { .plan .conteneur { padding-block: 140px 72px; } }

/* ---------- Sections ---------- */
.section { padding-block: 112px; }
@media (min-width: 900px) { .section { padding-block: 184px; } }
.section-surface { background: var(--fond-2); transition: background-color .45s; }

/* Grande déclaration au milieu du vide */
.declaration p { font-family: var(--titres); font-weight: 400; font-size: clamp(2rem, 8vw, 4.6rem); line-height: 1.08; letter-spacing: -0.025em; color: var(--encre); max-width: 18ch; margin: 0; }
.declaration p em { font-style: italic; font-weight: 300; color: var(--accent-texte); }
.declaration p.signature { margin-top: 3rem; font-family: var(--police); font-size: .95rem; font-weight: 400; line-height: 1.7; letter-spacing: 0; color: var(--discret); max-width: 46ch; }

/* Plats en grand */
.plats { display: grid; gap: 112px; }
.plat { display: grid; gap: 28px; }
.plat-image { overflow: hidden; background: #000; aspect-ratio: 4 / 5; margin-inline: calc(var(--gouttiere) * -1); }
.plat-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s ease; }
.plat:hover .plat-image img { transform: scale(1.03); }
.plat-texte .numero { font-family: var(--titres); font-style: italic; font-size: 1rem; color: var(--accent-texte); }
.plat-texte h3 { font-size: clamp(2.2rem, 9vw, 4.4rem); margin: .25em 0 .35em; }
.plat-texte p { max-width: 38ch; }
.plat-texte .prix { font-family: var(--titres); font-size: clamp(2.6rem, 10vw, 5rem); font-weight: 300; color: var(--encre); line-height: 1; margin: 1.2rem 0 0; }
.plat-texte .prix span { font-size: .4em; color: var(--accent-texte); margin-left: .2em; }
@media (min-width: 900px) {
  .plats { gap: 200px; }
  .plat { grid-template-columns: 7fr 5fr; gap: 96px; align-items: end; }
  .plat-image { margin: 0; aspect-ratio: 5 / 6; }
  .plat:nth-child(even) .plat-image { order: 2; }
}
.suite { margin-top: 112px; display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: center; }

/* Photo plein cadre avec légende */
.plein-cadre { position: relative; margin: 0; background: #000; }
.plein-cadre img { width: 100%; height: 78vh; height: 78svh; min-height: 420px; object-fit: cover; }
.plein-cadre figcaption { padding: 1rem var(--gouttiere) 0; font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--discret); background: var(--fond); }

/* Bloc final : réserver */
.final { text-align: left; }
.final h2 { max-width: 11ch; }
.final p { max-width: 42ch; font-size: 1.1rem; }
.final .boutons { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.5rem; }
.final .infos { margin-top: 4rem; display: grid; gap: 2rem; padding-top: 2rem; border-top: 1px solid var(--ligne); }
.final .infos h3 { font-family: var(--police); font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-texte); margin-bottom: .6rem; }
.final .infos p { margin: 0; color: var(--encre); font-size: 1.05rem; }
.final .infos a { color: var(--encre); font-weight: 700; text-decoration: none; }
@media (min-width: 760px) { .final .infos { grid-template-columns: repeat(3, 1fr); } }

/* ---------- La carte ---------- */
.onglets { position: sticky; top: var(--entete); z-index: 50; background: var(--fond); border-bottom: 1px solid var(--ligne); transition: background-color .45s; }
.onglets ul { list-style: none; margin: 0 auto; padding: 0 var(--gouttiere); max-width: var(--largeur); display: flex; gap: 1.6rem; overflow-x: auto; scrollbar-width: none; }
.onglets ul::-webkit-scrollbar { display: none; }
.onglets a { display: block; padding: 1rem 0; white-space: nowrap; font-weight: 700; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--discret); text-decoration: none; }
.onglets a:hover { color: var(--accent-texte); }

.rubrique { padding-block: 96px 0; }
.rubrique:last-of-type { padding-bottom: 96px; }
@media (min-width: 900px) { .rubrique { padding-block: 152px 0; } .rubrique:last-of-type { padding-bottom: 152px; } }
.rubrique-tete { display: grid; gap: .4rem; margin-bottom: 48px; }
.rubrique-tete h2 { margin: 0; }
.rubrique-tete p { color: var(--discret); max-width: 46ch; margin: 0; }
@media (min-width: 900px) { .rubrique-tete { grid-template-columns: 1fr 1fr; align-items: end; margin-bottom: 72px; } }
.mets { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); }
.mets li { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1.5rem; padding: 1.6rem 0; border-bottom: 1px solid var(--ligne); }
.mets .nom { font-family: var(--titres); font-size: clamp(1.45rem, 5.5vw, 2.1rem); font-weight: 500; letter-spacing: -0.015em; color: var(--encre); line-height: 1.15; }
.mets .prix { font-family: var(--titres); font-size: clamp(1.45rem, 5.5vw, 2.1rem); font-weight: 300; color: var(--accent-texte); white-space: nowrap; line-height: 1.15; }
.mets .desc { grid-column: 1 / -1; color: var(--discret); font-size: .97rem; max-width: 60ch; }
.mets .marque { font-family: var(--police); font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-texte); border: 1px solid currentColor; padding: .15rem .45rem; margin-left: .6rem; vertical-align: middle; white-space: nowrap; }
@media (min-width: 900px) { .mets { columns: 1; } .mets li { grid-template-columns: 1fr auto; padding: 2rem 0; } }
.photo-rubrique { margin: 96px calc(var(--gouttiere) * -1) 0; background: #000; }
.photo-rubrique img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 900px) { .photo-rubrique { margin: 152px 0 0; } .photo-rubrique img { aspect-ratio: 21 / 9; } }
.note { font-size: .88rem; color: var(--discret); max-width: 60ch; }

/* ---------- Galerie ---------- */
.galerie { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; gap: 8px; }
.galerie figure { margin: 0; }
.galerie button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: zoom-in; overflow: hidden; }
.galerie img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform 1s ease; }
.galerie button:hover img { transform: scale(1.04); }
.galerie .grande { grid-column: 1 / -1; }
.galerie .grande img { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .galerie { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .galerie .grande { grid-column: span 2; grid-row: span 2; }
  .galerie .grande img { aspect-ratio: auto; }
  .galerie .haute { grid-row: span 2; }
}
.visionneuse { padding: 0; border: 0; background: transparent; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; }
.visionneuse::backdrop { background: rgba(0, 0, 0, .94); }
.visionneuse[open] { display: grid; place-items: center; }
.visionneuse img { max-width: 94vw; max-height: 82vh; width: auto; }
.visionneuse p { color: #ddd; text-align: center; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; margin: 1rem 0 0; }
.visionneuse-fermer { position: fixed; top: 14px; right: 14px; min-height: 44px; padding: 0 1rem; background: none; border: 1px solid rgba(255, 255, 255, .5); color: #fff; font: inherit; font-weight: 700; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }

/* ---------- Notre histoire ---------- */
.chapitres { display: grid; gap: 112px; }
.chapitre { display: grid; gap: 32px; }
.chapitre-image { margin-inline: calc(var(--gouttiere) * -1); background: #000; }
.chapitre-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.chapitre .numero { font-family: var(--titres); font-style: italic; color: var(--accent-texte); font-size: 1rem; }
.chapitre h2 { font-size: clamp(2.4rem, 10vw, 5rem); margin-top: .2em; }
.chapitre p { max-width: 46ch; }
@media (min-width: 900px) {
  .chapitres { gap: 200px; }
  .chapitre { grid-template-columns: 1fr 1fr; gap: 104px; align-items: center; }
  .chapitre-image { margin: 0; }
  .chapitre-image img { aspect-ratio: 4 / 5; }
  .chapitre:nth-child(even) .chapitre-image { order: 2; }
}
.valeurs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--ligne); }
.valeurs li { padding: 2rem 0; border-bottom: 1px solid var(--ligne); }
.valeurs strong { display: block; font-family: var(--titres); font-weight: 500; font-size: clamp(1.6rem, 6vw, 2.4rem); color: var(--encre); line-height: 1.1; margin-bottom: .5rem; }
@media (min-width: 900px) { .valeurs { grid-template-columns: repeat(3, 1fr); column-gap: 56px; } }

/* ---------- Contact ---------- */
.contact-grille { display: grid; gap: 80px; }
@media (min-width: 1000px) { .contact-grille { grid-template-columns: 5fr 6fr; gap: 112px; } }
.grand-tel { display: inline-block; font-family: var(--titres); font-size: clamp(2.4rem, 11vw, 4.6rem); font-weight: 400; letter-spacing: -0.02em; color: var(--encre); text-decoration: none; line-height: 1; margin: .2em 0 .6em; white-space: nowrap; }
.grand-tel:hover { color: var(--accent-texte); }
.coordonnees { display: grid; gap: 2.4rem; }
.coordonnees h2 { font-family: var(--police); font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-texte); margin-bottom: .6rem; }
.coordonnees p { margin: 0; color: var(--encre); font-size: 1.1rem; }
.horaires { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.5rem; color: var(--encre); }
.horaires dd { margin: 0; text-align: right; }
.horaires .ferme { color: var(--discret); }

.formulaire { background: var(--fond-2); padding: 40px 22px; transition: background-color .45s; }
@media (min-width: 900px) { .formulaire { padding: 64px 56px; } }
.formulaire h2 { font-size: clamp(2.4rem, 9vw, 3.6rem); }
.champ { margin-bottom: 1.5rem; }
.champ label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--texte); margin-bottom: .5rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--encre); background: transparent;
  border: 0; border-bottom: 1px solid var(--discret); border-radius: 0; padding: .6rem 0; min-height: 48px;
}
.champ select option { background: var(--fond-2); color: var(--encre); }
.champ textarea { min-height: 96px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--accent-texte); }
.champs-duo { display: grid; gap: 0 1.5rem; }
@media (min-width: 600px) { .champs-duo { grid-template-columns: 1fr 1fr; } }
.formulaire .bouton { width: 100%; margin-top: .5rem; }
.message-demo { margin: 1.4rem 0 0; padding: 1rem 1.2rem; border-left: 2px solid var(--accent-texte); background: var(--fond); color: var(--encre); font-size: .95rem; }

.carte { margin-top: 112px; }
@media (min-width: 900px) { .carte { margin-top: 184px; } }
.carte-ville { height: 420px; background: var(--fond-2); z-index: 0; }
@media (min-width: 900px) { .carte-ville { height: 560px; } }
.carte p { font-size: .82rem; color: var(--discret); margin: .9rem 0 0; }
.leaflet-container { font-family: var(--police); }

/* ---------- Pied de page ---------- */
.pied { border-top: 1px solid var(--ligne); padding-block: 96px 40px; }
.pied .conteneur { display: grid; gap: 48px; }
.pied .logo { font-size: clamp(3rem, 14vw, 7rem); display: inline-block; margin-bottom: .2em; }
.pied h2 { font-family: var(--police); font-size: .72rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-texte); margin-bottom: .8rem; }
.pied p { margin: 0; }
.pied a { color: var(--encre); text-decoration: none; }
.pied a:hover { color: var(--accent-texte); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pied-bas { grid-column: 1 / -1; border-top: 1px solid var(--ligne); padding-top: 28px; font-size: .8rem; color: var(--discret); }
@media (min-width: 900px) { .pied .conteneur { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; } .pied-marque { grid-column: 1 / -1; } }