/* ============================================================
   Page d'accueil — Comptoir Bruyère
   Styles spécifiques à la page, scopés à .page-accueil
   ============================================================ */

.page-accueil {
  --page-gap: var(--space-lg);
}

/* ---------- 1. Hero : comptoir ouvert et menu du jour ---------- */
.hero-comptoir {
  position: relative;
  background-color: var(--color-brun-profond);
  overflow: hidden;
  border-bottom: 4px solid var(--color-moutarde);
}

.hero-comptoir__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-comptoir__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  filter: saturate(0.85) sepia(0.08) contrast(0.95) brightness(0.9);
}

.hero-comptoir__contenu {
  position: relative;
  z-index: 1;
  min-height: 70vh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: end;
  padding-block: var(--space-3xl) var(--space-4xl);
}

.hero-comptoir__texte {
  grid-column: 1 / span 6;
  align-self: center;
  color: var(--color-craie);
  padding-block: var(--space-2xl);
}

.hero-comptoir__titre {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-craie);
  max-width: 20ch;
  margin-block-end: var(--space-lg);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.hero-comptoir__chapo {
  font-size: var(--text-body-large);
  line-height: var(--leading-body-large);
  color: var(--color-craie);
  max-width: 65ch;
  margin-block-end: 0;
}

.hero-comptoir__menu {
  grid-column: 8 / span 4;
  align-self: end;
  margin-bottom: var(--space-2xl);
  min-width: 0;
}

.ardoise-menu {
  background-color: var(--color-craie);
  border: 1px solid var(--color-brun-15);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  color: var(--color-brun-profond);
  max-width: 30ch;
  margin-left: auto;
}

.ardoise-menu__titre {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-h3);
  color: var(--color-brun-profond);
  margin-block-end: var(--space-md);
}

.ardoise-menu__liste {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
}

.ardoise-menu__plat {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--color-brun-10);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.ardoise-menu__plat:last-child {
  border-bottom: none;
}

.ardoise-menu__nom {
  font-family: var(--font-heading);
  font-weight: 600;
  min-width: 0;
}

.ardoise-menu__points {
  flex: 1;
  border-bottom: 2px dotted var(--color-brun-20);
  transform: translateY(-4px);
  min-width: var(--space-md);
}

.ardoise-menu__prix {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ardoise-menu__mention {
  font-size: var(--text-small);
  color: var(--color-mauve);
  margin: 0;
}

/* ---------- 2. La philosophie du comptoir ---------- */
.section--philosophie {
  background-color: var(--color-oat);
  border-top: 1px solid var(--color-brun-15);
}

.philosophie__grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-2xl);
  align-items: start;
}

.philosophie__texte {
  grid-column: 1 / span 7;
  min-width: 0;
}

.philosophie__paragraphes p {
  max-width: 65ch;
  margin-block-end: var(--space-md);
}

.philosophie__paragraphes p:last-child {
  margin-block-end: 0;
}

.philosophie__citation {
  grid-column: 9 / span 4;
  margin-block-start: var(--space-2xl);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-body-large);
  line-height: var(--leading-body-large);
  color: var(--color-brun-profond);
  border-inline-start: 4px solid var(--color-moutarde);
  padding-inline-start: var(--space-lg);
  max-width: 50ch;
}

.philosophie__citation p {
  margin-block-end: var(--space-sm);
}

.philosophie__auteur {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-small);
  color: var(--color-mauve);
}

/* ---------- 3. Les spécialités du chef ---------- */
.section--specialites {
  background-color: var(--color-brun-profond);
}

.section__titre--craie {
  color: var(--color-craie);
}

.specialites__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-block-start: var(--space-2xl);
}

.carte-specialite {
  background-color: var(--color-craie);
  border: 1px solid var(--color-brun-15);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  color: var(--color-brun-profond);
  min-width: 0;
  transition: border-color var(--transition-fast);
}

.carte-specialite:hover {
  border-color: var(--color-brun-30);
}

.carte-specialite__titre {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-h3);
  color: var(--color-brun-profond);
  margin-block-end: var(--space-sm);
}

.carte-specialite__texte {
  max-width: 45ch;
  margin: 0;
}

/* ---------- 4. Les plats de saison ---------- */
.section--plats-saison {
  background-color: var(--color-oat);
  border-top: 2px solid var(--color-moutarde);
}

.plats-saison__intro {
  max-width: 65ch;
  margin-block-end: var(--space-2xl);
}

.plats-saison__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xl);
}

.plats-saison__colonne {
  min-width: 0;
}

.liste-plats {
  list-style: none;
  padding: 0;
  margin: 0;
}

.liste-plats__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-brun-10);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.liste-plats__item:last-child {
  border-bottom: none;
}

.liste-plats__nom {
  font-family: var(--font-heading);
  font-weight: 600;
  max-width: 30ch;
  min-width: 0;
}

.liste-plats__points {
  flex: 1;
  border-bottom: 2px dotted var(--color-brun-20);
  transform: translateY(-4px);
  min-width: var(--space-md);
}

.liste-plats__prix {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- 5. Les vins et apéritifs ---------- */
.section--vins {
  background-color: var(--color-vert-bouteille);
}

.vins__grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-2xl);
  align-items: start;
}

.vins__texte {
  grid-column: 1 / span 6;
  min-width: 0;
}

.vins__texte p {
  max-width: 65ch;
  margin-block-end: var(--space-md);
}

.vins__texte p:last-child {
  margin-block-end: 0;
}

.vins__liste {
  grid-column: 8 / span 5;
  min-width: 0;
}

.vins__sous-titre {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-h3);
  color: var(--color-craie);
  margin-block-end: var(--space-md);
}

.liste-vins {
  list-style: none;
  padding: 0;
  margin: 0;
}

.liste-vins__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding-block: var(--space-sm);
  border-bottom: 1px solid rgba(244, 237, 224, 0.2);
  color: var(--color-craie);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.liste-vins__item:last-child {
  border-bottom: none;
}

.liste-vins__nom {
  font-family: var(--font-heading);
  font-weight: 600;
  max-width: 30ch;
  min-width: 0;
}

.liste-vins__points {
  flex: 1;
  border-bottom: 2px dotted rgba(244, 237, 224, 0.35);
  transform: translateY(-4px);
  min-width: var(--space-md);
}

.liste-vins__prix {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- 6. Tables communes et dîners de groupe ---------- */
.section--tables-communes {
  background-color: var(--color-oat);
}

.tables-communes__grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-2xl);
  align-items: start;
}

.tables-communes__texte {
  grid-column: 1 / span 6;
  min-width: 0;
}

.tables-communes__texte > p {
  max-width: 65ch;
  margin-block-end: var(--space-md);
}

.tables-communes__info {
  max-width: 50ch;
  margin-block-start: var(--space-lg);
}

.tables-communes__figure {
  grid-column: 8 / span 5;
  margin: 0;
  min-width: 0;
}

.tables-communes__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--color-brun-10);
  border-radius: var(--radius-image);
}

.tables-communes__figure figcaption {
  margin-block-start: var(--space-xs);
}

/* ---------- 7. Soirées poker en présentiel ---------- */
.section--poker {
  background-color: var(--color-brun-profond);
}

.poker__grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-2xl);
  align-items: start;
}

.poker__figure {
  grid-column: 1 / span 5;
  margin: 0;
  min-width: 0;
}

.poker__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--color-brun-10);
  border-radius: var(--radius-image);
}

.poker__figure figcaption {
  color: var(--color-craie);
  margin-block-start: var(--space-xs);
}

.poker__texte {
  grid-column: 7 / span 6;
  min-width: 0;
}

.poker__texte > p {
  max-width: 65ch;
  margin-block-end: var(--space-md);
}

.poker__etapes {
  list-style: none;
  counter-reset: poker-etape;
  padding: 0;
  margin: 0 0 var(--space-md);
  max-width: 50ch;
}

.poker__etapes li {
  counter-increment: poker-etape;
  position: relative;
  padding-inline-start: var(--space-2xl);
  padding-block: var(--space-xs);
  color: var(--color-craie);
}

.poker__etapes li::before {
  content: counter(poker-etape);
  position: absolute;
  left: 0;
  top: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-moutarde);
}

/* ---------- 8. Réservations et informations pratiques ---------- */
.section--reservation {
  background-color: var(--color-oat);
  border-top: 2px solid var(--color-moutarde);
}

.reservation__contenu {
  max-width: 600px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  align-items: center;
  text-align: center;
}

.reservation__info {
  width: 100%;
  text-align: left;
  max-width: 50ch;
}

.reservation__coordonnees {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
}

.reservation__coordonnees li {
  padding-block: var(--space-xs);
  font-variant-numeric: tabular-nums;
}

.reservation__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.reservation__lien {
  color: var(--color-mauve);
  text-decoration: underline;
  text-decoration-color: var(--color-moutarde);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--transition-fast);
}

.reservation__lien:hover,
.reservation__lien:focus-visible {
  text-decoration-thickness: 3px;
  color: var(--color-mauve);
}

/* ---------- Responsive ---------- */

/* Tablette */
@media (max-width: 1023px) and (min-width: 768px) {
  .hero-comptoir__contenu {
    min-height: 60vh;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-lg);
    align-items: end;
  }

  .hero-comptoir__texte {
    grid-column: 1 / span 4;
  }

  .hero-comptoir__menu {
    grid-column: 5 / span 2;
    margin-bottom: var(--space-xl);
  }

  .philosophie__grille {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-xl);
  }

  .philosophie__texte {
    grid-column: 1 / span 4;
  }

  .philosophie__citation {
    grid-column: 5 / span 2;
    margin-block-start: var(--space-xl);
  }

  .specialites__grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
  }

  .vins__grille {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-xl);
  }

  .vins__texte {
    grid-column: 1 / span 3;
  }

  .vins__liste {
    grid-column: 4 / span 3;
  }

  .tables-communes__grille {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-xl);
  }

  .tables-communes__texte {
    grid-column: 1 / span 3;
  }

  .tables-communes__figure {
    grid-column: 4 / span 3;
  }

  .poker__grille {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-xl);
  }

  .poker__figure {
    grid-column: 1 / span 3;
  }

  .poker__texte {
    grid-column: 4 / span 3;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .hero-comptoir__contenu {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding-block: var(--space-3xl) var(--space-3xl);
  }

  .hero-comptoir__media {
    position: relative;
    height: 50vh;
  }

  .hero-comptoir__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-comptoir__texte {
    grid-column: 1;
    padding-block: 0;
  }

  .hero-comptoir__titre {
    font-size: 2.25rem;
    line-height: 1.1;
    max-width: none;
  }

  .hero-comptoir__chapo {
    font-size: 1rem;
    line-height: 1.6;
    max-width: none;
  }

  .hero-comptoir__menu {
    grid-column: 1;
    margin-bottom: 0;
  }

  .ardoise-menu {
    max-width: none;
    margin-left: 0;
  }

  .philosophie__grille {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .philosophie__texte,
  .philosophie__citation {
    grid-column: 1;
  }

  .philosophie__citation {
    margin-block-start: 0;
  }

  .specialites__grille {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .plats-saison__grille {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .vins__grille {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .vins__texte,
  .vins__liste {
    grid-column: 1;
  }

  .tables-communes__grille {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .tables-communes__texte,
  .tables-communes__figure {
    grid-column: 1;
  }

  .poker__grille {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .poker__figure,
  .poker__texte {
    grid-column: 1;
  }

  .reservation__contenu {
    max-width: none;
    gap: var(--space-xl);
  }
}

/* Ajustements pour très petits écrans */
@media (max-width: 420px) {
  .hero-comptoir__titre {
    font-size: 2rem;
  }

  .ardoise-menu {
    padding: var(--space-md);
  }

  .carte-specialite {
    padding: var(--space-md);
  }

  .liste-plats__item,
  .liste-vins__item,
  .ardoise-menu__plat {
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-xs);
  }

  .liste-plats__points,
  .liste-vins__points,
  .ardoise-menu__points {
    display: none;
  }

  .liste-plats__prix,
  .liste-vins__prix,
  .ardoise-menu__prix {
    margin-left: auto;
  }
}