/* ===== Page-owned styles for Accueil ===== */

.home-main {
  display: block;
}

/* Boutons génériques de page */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--espace-l);
  font-family: var(--font-body);
  font-size: var(--text-bouton);
  font-weight: 600;
  letter-spacing: var(--tracking-bouton);
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--radius-2);
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn--primary {
  background-color: var(--terre-cuite-douce);
  color: var(--creme);
  border: none;
}

.btn--primary:hover {
  background-color: #a55a3e;
  color: var(--creme);
}

.btn--secondary {
  background-color: transparent;
  color: var(--brun-tres-sombre);
  border: 1px solid var(--brun-tres-sombre);
}

.btn--secondary:hover {
  border-color: var(--ardoise-profonde);
  color: var(--ardoise-profonde);
}

/* ===== 1. Hero ===== */
.hero {
  position: relative;
  background-color: var(--pierre-claire);
  overflow: hidden;
}

.hero__media {
  position: relative;
  width: 100%;
}

.hero__panoramic {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 0;
}

.hero__vertical {
  display: none;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(36, 28, 23, 0.4) 0%, rgba(36, 28, 23, 0) 40%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--container-text-max);
  margin-inline: auto;
  padding: var(--espace-l) var(--gutter-mobile) var(--espace-xl);
  margin-top: calc(-1 * var(--espace-xl));
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
  align-items: flex-start;
}

.hero__title {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
  color: var(--creme);
  margin: 0;
  max-width: 20ch;
}

.hero__intro {
  font-size: var(--text-corps);
  line-height: var(--leading-corps);
  color: var(--pierre-claire);
  max-width: 62ch;
  margin: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-s);
  margin-top: var(--espace-xs);
}

@media (min-width: 768px) {
  .hero__content {
    padding-inline: var(--gutter-tablet);
  }
}

@media (min-width: 1024px) {
  .hero__content {
    padding-inline: var(--gutter-desktop);
  }

  .hero__vertical {
    display: block;
    position: absolute;
    right: var(--gutter-desktop);
    bottom: var(--espace-xl);
    width: 280px;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 0;
    box-shadow: var(--shadow-floating);
    z-index: 2;
  }
}

@media (max-width: 767px) {
  .hero__panoramic {
    aspect-ratio: 4 / 3;
  }

  .hero__content {
    margin-top: 0;
    padding-top: var(--espace-l);
  }

  .hero__vertical {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 0;
    margin-top: var(--espace-s);
  }
}

/* ===== 2. Restaurant ===== */
.restaurant {
  background-color: var(--pierre-claire);
  padding-block: var(--espace-2xl);
}

.restaurant__inner {
  display: flex;
  flex-direction: column;
  gap: var(--espace-l);
}

.restaurant__panoramic {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 0;
}

.restaurant__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-l);
}

.restaurant__copy {
  min-width: 0;
}

.restaurant__heading {
  margin-block-end: var(--espace-m);
}

.restaurant__copy p {
  max-width: 62ch;
}

.restaurant__windows {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-l);
}

.vertical-window {
  margin: 0;
  min-width: 0;
}

.vertical-window img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 0;
}

.vertical-window figcaption {
  margin-top: var(--espace-xs);
  max-width: 42ch;
}

@media (min-width: 768px) {
  .restaurant__grid {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }

  .restaurant__windows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espace-m);
  }
}

@media (max-width: 767px) {
  .restaurant__panoramic {
    aspect-ratio: 4 / 3;
  }
}

/* ===== 3. Cuisine ===== */
.cuisine {
  padding-block: var(--espace-2xl);
}

.cuisine__inner {
  display: block;
}

.cuisine__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-l);
}

.cuisine__media {
  min-width: 0;
}

.cuisine__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
}

.cuisine__copy {
  min-width: 0;
}

.cuisine__heading {
  margin-block-end: var(--espace-m);
}

.cuisine__copy p {
  max-width: 62ch;
}

@media (min-width: 768px) {
  .cuisine__grid {
    grid-template-columns: 7fr 5fr;
    align-items: center;
  }
}

/* ===== 4. La Carte ===== */
.carte {
  background-color: var(--pierre-claire);
  padding-block: var(--espace-2xl);
}

.carte__inner {
  display: flex;
  flex-direction: column;
  gap: var(--espace-l);
}

.carte__heading {
  margin: 0;
}

.carte__card {
  padding: var(--espace-l);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-floating);
  display: flex;
  flex-direction: column;
  gap: var(--espace-l);
  max-width: var(--container-text-max);
  width: 100%;
}

.carte__item {
  padding-top: var(--espace-m);
  border-top: var(--border-separation);
}

.carte__item:first-child {
  padding-top: 0;
  border-top: none;
}

.carte__item-title {
  margin-block-end: var(--espace-s);
}

.carte__item-desc {
  margin: 0;
  max-width: 62ch;
}

.carte__link {
  margin: 0;
}

.carte__link a {
  color: var(--ardoise-profonde);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.carte__link a:hover {
  text-decoration-thickness: 2px;
}

/* ===== 5. Assiettes ===== */
.assiettes {
  padding-block: var(--espace-2xl);
}

.assiettes__inner {
  display: flex;
  flex-direction: column;
  gap: var(--espace-l);
}

.assiettes__heading {
  margin: 0;
}

.assiettes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-l);
}

.assiette-card {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
}

.assiette-card img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 0;
}

.assiette-card figcaption {
  font-size: var(--text-legende);
  line-height: var(--leading-legende);
  color: var(--ardoise-profonde);
  max-width: 42ch;
}

.assiette-card p {
  margin: 0;
  max-width: 62ch;
}

@media (min-width: 768px) {
  .assiettes__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espace-m);
  }
}

@media (max-width: 767px) {
  .assiette-card img {
    aspect-ratio: 3 / 4;
  }
}

/* ===== 6. Intérieur ===== */
.interieur {
  background-color: var(--pierre-claire);
  padding-block: var(--espace-2xl);
}

.interieur__inner {
  display: flex;
  flex-direction: column;
  gap: var(--espace-l);
}

.interieur__panoramic {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 0;
}

.interieur__copy {
  max-width: var(--container-text-max);
}

.interieur__heading {
  margin-block-end: var(--espace-m);
}

.interieur__copy p {
  max-width: 62ch;
}

@media (max-width: 767px) {
  .interieur__panoramic {
    aspect-ratio: 4 / 3;
  }
}

/* ===== 7. L’Expérience du Soir ===== */
.soiree {
  padding-block: var(--espace-2xl);
}

.soiree__inner {
  display: flex;
  flex-direction: column;
  gap: var(--espace-l);
}

.soiree__heading {
  margin: 0;
}

.soiree__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-l);
}

.soiree__step {
  min-width: 0;
  padding-top: var(--espace-m);
  border-top: var(--border-separation);
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
}

.soiree__number {
  font-family: var(--font-body);
  font-size: var(--text-surtitre);
  font-weight: 600;
  letter-spacing: var(--tracking-surtitre);
  text-transform: uppercase;
  color: var(--ardoise-profonde);
}

.soiree__step-title {
  margin: 0;
}

.soiree__step p {
  margin: 0;
  max-width: 62ch;
}

@media (min-width: 768px) {
  .soiree__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espace-m);
  }
}

/* ===== 8. Poker Offline ===== */
.poker-offline {
  padding-block: var(--espace-2xl);
}

.poker-offline__inner {
  max-width: var(--container-text-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
}

.poker-offline__age {
  color: var(--pierre-claire);
}

.poker-offline__heading {
  color: var(--creme);
  margin: 0;
}

.poker-offline__inner p {
  color: var(--pierre-claire);
  max-width: 62ch;
  margin: 0;
}

.poker-offline__inner a {
  color: var(--pierre-claire);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.poker-offline__inner a:hover {
  text-decoration-thickness: 2px;
}

/* ===== 9. Poker Room ===== */
.poker-room {
  background-color: var(--pierre-claire);
  padding-block: var(--espace-2xl);
}

.poker-room__inner {
  display: block;
}

.poker-room__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-l);
}

.poker-room__copy {
  min-width: 0;
}

.poker-room__heading {
  margin-block-end: var(--espace-m);
}

.poker-room__copy p {
  max-width: 62ch;
}

.poker-room__copy a {
  color: var(--ardoise-profonde);
}

.poker-room__media {
  min-width: 0;
}

.poker-room__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
}

@media (min-width: 768px) {
  .poker-room__grid {
    grid-template-columns: 5fr 7fr;
    align-items: center;
  }
}

@media (max-width: 767px) {
  .poker-room__media img {
    aspect-ratio: 3 / 4;
  }
}

/* ===== 10. Card Lounge ===== */
.card-lounge {
  padding-block: var(--espace-2xl);
}

.card-lounge__inner {
  display: flex;
  flex-direction: column;
  gap: var(--espace-l);
}

.card-lounge__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
}

.card-lounge__copy {
  max-width: var(--container-text-max);
}

.card-lounge__heading {
  color: var(--creme);
  margin-block-end: var(--espace-m);
}

.card-lounge__copy p {
  color: var(--pierre-claire);
  max-width: 62ch;
}

@media (max-width: 767px) {
  .card-lounge__image {
    aspect-ratio: 4 / 3;
  }
}

/* ===== 11. Tables de Poker ===== */
.tables-poker {
  background-color: var(--pierre-claire);
  padding-block: var(--espace-2xl);
}

.tables-poker__inner {
  display: block;
}

.tables-poker__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-l);
}

.tables-poker__media {
  min-width: 0;
}

.tables-poker__media img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 0;
}

.tables-poker__copy {
  min-width: 0;
}

.tables-poker__age {
  color: var(--ardoise-profonde);
}

.tables-poker__heading {
  margin-block-end: var(--espace-m);
}

.tables-poker__copy p {
  max-width: 62ch;
}

@media (min-width: 768px) {
  .tables-poker__grid {
    grid-template-columns: 5fr 7fr;
    align-items: center;
  }
}

@media (max-width: 767px) {
  .tables-poker__media img {
    aspect-ratio: 3 / 4;
  }
}

/* ===== 12. Restaurant & Poker ===== */
.restaurant-poker {
  padding-block: var(--espace-2xl);
}

.restaurant-poker__inner {
  display: flex;
  flex-direction: column;
  gap: var(--espace-l);
}

.restaurant-poker__panoramic {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 0;
}

.restaurant-poker__copy {
  max-width: var(--container-text-max);
}

.restaurant-poker__heading {
  margin-block-end: var(--espace-m);
}

.restaurant-poker__copy p {
  max-width: 62ch;
}

@media (max-width: 767px) {
  .restaurant-poker__panoramic {
    aspect-ratio: 4 / 3;
  }
}

/* ===== 13. Galerie ===== */
.galerie {
  background-color: var(--pierre-claire);
  padding-block: var(--espace-2xl);
}

.galerie__inner {
  display: flex;
  flex-direction: column;
  gap: var(--espace-l);
}

.galerie__heading {
  margin: 0;
}

.galerie__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-l);
}

.galerie__item {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
}

.galerie__item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
}

.galerie__item--wide img {
  aspect-ratio: 21 / 9;
}

.galerie__item figcaption {
  max-width: 42ch;
}

@media (min-width: 768px) {
  .galerie__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espace-m);
  }

  .galerie__item--wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .galerie__item--wide img {
    aspect-ratio: 4 / 3;
  }
}

/* ===== 14. Réservation ===== */
.reservation {
  padding-block: var(--espace-2xl);
}

.reservation__inner {
  max-width: var(--container-text-max);
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-m);
}

.reservation__heading {
  margin: 0;
}

.reservation__inner p {
  margin: 0;
  max-width: 62ch;
}

.reservation__inner .btn {
  margin-top: var(--espace-xs);
}

/* ===== 15. Contact ===== */
.contact-home {
  background-color: var(--pierre-claire);
  padding-block: var(--espace-2xl);
}

.contact-home__inner {
  max-width: var(--container-text-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
}

.contact-home__heading {
  margin: 0;
}

.contact-home__inner p {
  margin: 0;
  max-width: 62ch;
}

.contact-home__inner a {
  color: var(--ardoise-profonde);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.contact-home__inner a:hover {
  text-decoration-thickness: 2px;
}

/* ===== Responsive fine-tuning ===== */
@media (max-width: 767px) {
  .hero__actions {
    width: 100%;
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .restaurant__windows {
    grid-template-columns: 1fr;
  }

  .assiettes__grid {
    grid-template-columns: 1fr;
  }

  .soiree__steps {
    grid-template-columns: 1fr;
  }

  .galerie__grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero__vertical {
    display: block;
    position: static;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 0;
    margin-top: var(--espace-m);
  }

  .hero__content {
    margin-top: 0;
    padding-top: var(--espace-l);
  }
}