/* ─────────────────────────────────────────────────────────────
   Nappe — le vichy de la guinguette.

   Une idée : la nappe à carreaux. Le carreau est tissé avec la
   couleur du commerçant (deux voiles croisés, comme un vrai
   vichy), et il revient partout en rubans de 8 px : sous
   l'en-tête, sous le héros, sur le pied. Cartes blanches à
   ourlet piqué, serif de bal populaire.
   ───────────────────────────────────────────────────────────── */

:root {
  --encre: #2b1d1a;
  --encre-2: #6e5a52;
  --papier: #fffdfa;
  --papier-2: #faf3ee;
  --blanc: #ffffff;
  --trait: #e9ded6;
  --menthe: #0d6b46;
  --display: 'Yeseva One', Georgia, serif;
  --texte: 'Mulish', system-ui, sans-serif;

  /* Le fil du vichy : la teinte du client, deux fois voilée. */
  --th-fil: color-mix(in srgb, var(--accent) 13%, transparent);
  --th-fil-clair: color-mix(in srgb, var(--accent) 8%, transparent);
  --th-carreau:
    repeating-linear-gradient(90deg, var(--th-fil) 0 7px, rgba(0, 0, 0, 0) 7px 14px),
    repeating-linear-gradient(0deg, var(--th-fil) 0 7px, rgba(0, 0, 0, 0) 7px 14px);
}

body { font-size: 1.0625rem; }

h1, h2 { letter-spacing: 0; }
h2 { font-size: clamp(1.45rem, 3.8vw, 1.95rem); }
h3 { font-weight: 800; }

.sur-titre { letter-spacing: 0.15em; font-size: 0.7rem; }

/* Nappe complète sur la section alternée, tissée très clair. */
.sec--creme {
  background-color: color-mix(in srgb, var(--accent) 5%, #fffdfa);
  background-image: var(--th-carreau);
  border-block: 1px solid var(--trait);
}

/* ── En-tête et son ruban de nappe ─────────────────────────── */
.tete {
  background-color: var(--blanc);
  background-image: var(--th-carreau);
  background-size: 14px 8px, 14px 8px;
  background-repeat: repeat-x, repeat-x;
  background-position: bottom left, bottom left;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, #e9ded6);
}
.tete__nom { font-size: 1.15rem; }
.tete__tel { border-radius: 4px; }

/* ── Héros ─────────────────────────────────────────────────── */
.heros {
  border-bottom: 8px solid color-mix(in srgb, var(--accent) 16%, #ffffff);
}
.heros__img::after {
  background: linear-gradient(to top,
    rgba(32, 18, 14, 0.9) 0%, rgba(32, 18, 14, 0.3) 60%, rgba(32, 18, 14, 0.4) 100%);
}
/* Sans photo : la nappe entière, dans la couleur du commerçant. */
.heros--sans {
  background-color: var(--accent);
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 22px, rgba(0, 0, 0, 0) 22px 44px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0 22px, rgba(0, 0, 0, 0) 22px 44px);
}
.heros__sous { opacity: 1; color: #f7ece7; }

/* ── Boutons : coins carrés adoucis, comme un carton de menu ── */
.bt { border-radius: 4px; }
.bt--clair { background: #fff; }
.bt--clair:hover { background: var(--papier-2); }

/* ── Cartes : ourlet piqué, double filet ───────────────────── */
.services {
  border-radius: 5px;
  border-color: var(--trait);
  background: var(--papier-2);
}
.service { padding: 1.35rem 1.3rem; }
.service h3 { margin-bottom: 0.35rem; }
.service p { color: var(--encre-2); }

.info-carte {
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, #e9ded6);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px color-mix(in srgb, var(--accent) 14%, #ffffff);
  padding: 1.5rem 1.45rem;
}
.info-carte h3 { font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
.horaires-liste li { border-top: 1px solid var(--trait); }
.horaires-liste .auj {
  background: color-mix(in srgb, var(--accent) 10%, #ffffff);
  padding-inline: 0.6rem;
  margin-inline: -0.6rem;
}

.avis-carte {
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, #e9ded6);
  border-left: 1px solid color-mix(in srgb, var(--accent) 28%, #e9ded6);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px color-mix(in srgb, var(--accent) 14%, #ffffff);
  padding: 1.35rem 1.4rem;
}
.avis-carte b { color: var(--encre-2); }
.etoiles { color: #e0921f; }

.galerie img { border-radius: 5px; }

/* ── Pied : la nappe repliée sur la tranche ────────────────── */
.pied-site {
  background-color: #2b1d1a;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 7px, rgba(0, 0, 0, 0) 7px 14px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0 7px, rgba(0, 0, 0, 0) 7px 14px);
  background-size: 14px 8px, 14px 8px;
  background-repeat: repeat-x, repeat-x;
  background-position: top left, top left;
  color: #e6ddd4;
  border-top: 8px solid color-mix(in srgb, var(--accent) 55%, #2b1d1a);
}
.pied-site strong { color: #fff; font-family: var(--display); font-weight: 400; font-size: 1.05rem; }