/* ─────────────────────────────────────────────────────────────
   Marché — l'étal, le store et le cageot.

   Une idée : le matin sous la halle. Lumière blanche, kraft du
   papier d'emballage, et le lambrequin festonné du store qui
   pend sous l'en-tête et remonte sur le pied (demi-cercles en
   dégradé radial, aucune image). Titres en grotesque très gras,
   intitulés en étiquette kraft, cartes bordées comme un cageot.
   ───────────────────────────────────────────────────────────── */

:root {
  --encre: #23231e;
  --encre-2: #5f5c50;
  --papier: #fbfaf5;
  --papier-2: #f0ede1;
  --blanc: #ffffff;
  --trait: #d8d3bf;
  --menthe: #276b2c;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --texte: 'Figtree', system-ui, sans-serif;

  --th-kraft: #7a5a2c;
  --th-kraft-pale: #e7d9bd;
  --th-frais: #276b2c;
  --th-feston: 22px;
}

body { font-size: 1.0625rem; }

h1 { font-weight: 800; letter-spacing: -0.03em; }
h2 { font-weight: 800; letter-spacing: -0.025em; font-size: clamp(1.55rem, 4.2vw, 2.2rem); }
h3 { font-weight: 800; letter-spacing: -0.01em; }

/* L'étiquette kraft, épinglée au-dessus du titre. */
.sur-titre {
  display: inline-block;
  background: var(--th-kraft);
  color: #fff;
  border-radius: 3px;
  padding: 0.3rem 0.6rem 0.25rem;
  letter-spacing: 0.1em;
  font-size: 0.6875rem;
  margin-bottom: 0.8rem;
}

/* ── En-tête et son lambrequin ─────────────────────────────── */
.tete {
  background: var(--blanc);
  border-bottom: 3px solid var(--th-kraft);
}
.tete::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--th-feston));
  height: var(--th-feston);
  background-image: radial-gradient(circle at 50% 0,
    var(--th-kraft) 0 10.5px, rgba(0, 0, 0, 0) 11px);
  background-size: var(--th-feston) var(--th-feston);
  background-repeat: repeat-x;
  pointer-events: none;
}
.tete__nom { font-weight: 800; letter-spacing: -0.02em; font-size: 1.2rem; }
.tete__tel { border-radius: 4px; font-weight: 800; }

/* ── Héros ─────────────────────────────────────────────────── */
.heros__img { filter: saturate(1.08); }
.heros__img::after {
  background: linear-gradient(to top,
    rgba(20, 19, 14, 0.9) 0%, rgba(20, 19, 14, 0.25) 62%, rgba(20, 19, 14, 0.32) 100%);
}
/* Sans photo : le store baissé, rayé kraft. */
.heros--sans {
  background-color: var(--th-kraft);
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, 0.16) 0 26px, rgba(0, 0, 0, 0) 26px 52px);
}
.heros__txt h1 { text-wrap: balance; }
.heros__sous { opacity: 1; color: #f4f1e6; font-weight: 500; }
.ouvert { letter-spacing: 0.05em; }

/* ── Boutons ───────────────────────────────────────────────── */
.bt { border-radius: 4px; font-weight: 800; }
.bt--clair { background: #fff; }
.bt--clair:hover { background: var(--papier-2); }

/* ── Cageots : bordure franche, planche du bas plus épaisse ── */
.services {
  border-radius: 4px;
  border: 2px solid var(--trait);
  background: var(--papier-2);
  gap: 2px;
}
.service { padding: 1.35rem 1.3rem; }
.service h3 { margin-bottom: 0.35rem; }
.service p { color: var(--encre-2); }

.info-carte {
  border-radius: 4px;
  border: 2px solid var(--trait);
  border-bottom: 5px solid var(--th-kraft);
  padding: 1.4rem 1.35rem;
}
.info-carte h3 { font-family: var(--display); font-size: 1.15rem; }
.horaires-liste li { border-top: 1px solid var(--trait); padding: 0.45rem 0; }
.horaires-liste .auj .jour { color: var(--th-kraft); }
.horaires-liste .auj span:last-child {
  background: var(--th-kraft-pale);
  border-radius: 3px;
  padding: 0.05rem 0.45rem;
}
.coord a:hover { color: var(--th-frais); }

.avis-carte {
  border-radius: 4px;
  border: 2px solid var(--trait);
  border-left: 5px solid var(--th-frais);
  padding: 1.25rem 1.35rem;
}
.avis-carte b { color: var(--encre-2); }
.etoiles { color: #d98324; }

.galerie img { border-radius: 4px; border: 2px solid var(--trait); }

/* ── Pied : le lambrequin remonte ──────────────────────────── */
.pied-site {
  position: relative;
  background: #23231e;
  color: #e9e4d6;
  border-top: 3px solid var(--th-kraft);
  padding-top: 2.6rem;
}
.pied-site::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--th-feston));
  height: var(--th-feston);
  background-image: radial-gradient(circle at 50% 100%,
    var(--th-kraft) 0 10.5px, rgba(0, 0, 0, 0) 11px);
  background-size: var(--th-feston) var(--th-feston);
  background-repeat: repeat-x;
  pointer-events: none;
}
.pied-site strong { color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.pied-site a { color: #fff; }