/* =========================
   restaurant-page (look luxe, sobre)
   ========================= */

/* base spacing */
.restaurant-page .container { max-width: 100%; margin: 0 auto; padding: 64px 20px; }
@media (min-width: 1200px){ .restaurant-page .container { padding-left: 6rem; padding-right: 6rem; } }

/* Titres */
.restaurant-page h1, .restaurant-page h2, .restaurant-page h3 {
  font-family: 'Avenir', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text);
}
.restaurant-page h2 { font-size: 2.5rem; margin: 0 0 1.25rem;}
.restaurant-page h3 { font-size: 1.8rem; margin: 1.5rem 0 .5rem;}

/* =========================
   HERO full-bleed
   ========================= */
/* HERO centré au milieu de l'image */
.hero {
  position: relative;
  min-height: 82vh;
  display: grid;
  place-items: center; /* centre vertical + horizontal */
  text-align: center;
}

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

.hero__inner {
  position: relative;
  z-index: 1;
  padding: 20px;
}

.hero__inner h1 {
  font-size: clamp(28px, 5vw, 56px);
  margin: 0 0 .5rem;
  letter-spacing: .08em;
  color: white;
}

.hero__inner p {
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
  color: white;
}


/* =========================
   INTRO (video + texte)
   ========================= */
.place.container,
.table.container,
.toile.container,
.ambition.container,
.reservation.container {
  width: 100%;
  display: flex;
  gap: 7rem; 
  align-items: center; 
}

.perso.container{ 
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7rem; 
  align-items: center; 
}

.perso.container>div{
  display: flex; 
  gap: 7rem; 
  align-items: center; 
  width: 100%;
}
/* @media (max-width: 900px){ .intro.container{ grid-template-columns: 1fr; gap: 28px; } } */

.place .place-maps,
.table .table-img,
.toile .toile-img,
.perso .perso-img,
.ambition .ambition-img,
.reservation .reservation-img{
  width: 50%;
}

.table .table-img img,
.toile .toile-img img,
.perso .perso-img img,
.ambition .ambition-img img,
.reservation .reservation-img img{
  width: 100%; height: 75vh; display: block;
  object-fit: cover;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
}

.place .place-maps iframe{
    width: 100%; height: 500px; display: block;
    border:0;
    box-shadow: 0 12px 40px rgba(0,0,0,.08);
}

.place .place-texte,
.table .table-texte,
.toile .toile-texte,
.perso .perso-texte,
.ambition .ambition-texte,
.reservation .reservation-texte{
  width: 50%;
  display: flex;
  flex-direction: column;
}

.place .place-texte img,
.table .table-texte img,
.toile .toile-texte img,
.perso .perso-texte img,
.ambition .ambition-texte img,
.reservation .reservation-texte img{
  height: 100%;
  max-height: 400px;
  object-fit: cover;
  width: 100%;
}


.restaurant-page .place p,
.place .place-texte p,
.table .table-texte p,
.toile .toile-texte p,
.perso .perso-texte p,
.ambition .ambition-texte p,
.reservation .reservation-texte p{
  color: #6e756f; 
  margin: .75rem 0; 
  font-size: 1.2rem;
  letter-spacing: 0.4px;
}

.reservation .reservation-texte li{
  color: #6e756f; 
  margin: .75rem 0; 
  font-size: 1.2rem;
  letter-spacing: 0.4px;
}

.restaurant-page .btn{ 
  margin-top: .5rem; 
  width: fit-content;
  font-size: 1.4rem;
}

/* =========================
   BLOC PROMESSE (texte + image)
   ========================= */
.infos.container{ display: grid; gap: 28px; }
.infos > h2{ text-align: center; color: #808680; }
.infos > div{
  display: grid; 
  grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center;
}
@media (max-width: 900px){ .infos > div{ grid-template-columns: 1fr; gap: 24px; } }

.infos .texte{
  display: flex; flex-direction: column; gap: 12px;
  width: 75%;
}

.infos img{
  width:100%; height:auto; display:block;
  padding-right: 7rem;
}

/* micro-anim sur les images (subtile) */
.infos img, .intro img{
  transform: translateZ(0);
  transition: transform .6s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease;
}
.infos img:hover, .intro img:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
}

/* =========================
   ACCESSIBILITÉ / MOTION
   ========================= */
@media (prefers-reduced-motion: reduce){
  .restaurant-page .btn, .infos img, .intro img { transition: none; }
}

/* un poil plus d’air sous le footer */
.site-footer { margin-top: 24px; }




/* Carousel artistes */
.tt-carousel{ position:relative; display:block; margin:20px 0 40px; align-items:center; }
.tt-carousel__viewport{ overflow:hidden; }
.tt-carousel__track{
  display:flex;
  gap:14px;
  padding:12px 6px;
  margin:0;
  list-style:none;
  transition: transform .45s cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}
.tt-carousel__slide{ flex:0 0 auto; width:250px; display:flex; align-items:flex-start; justify-content:center; }
.tt-artist{ display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none; color:inherit; width:100%; }
.tt-artist__thumb{ width:100%; height:400px; display:block; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.06); background:#0b0b0b; }
.tt-artist__thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .35s ease; }
.tt-artist__name{ margin-top:10px; font-weight:700; font-size:13px; line-height:1.1; }

/* Hover / focus */
.tt-artist:focus, .tt-artist:hover{ transform:translateY(-6px); }
.tt-artist:focus .tt-artist__thumb, .tt-artist:hover .tt-artist__thumb img{ transform:scale(1.03); }

/* Nav buttons */
.tt-carousel__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.5); color:#fff; border:0; padding:8px 12px;
  border-radius:5px; cursor:pointer; z-index:5;
}
.tt-carousel__prev{ left:6px; }
.tt-carousel__next{ right:6px; }

/* Dots */
.tt-carousel__dots{ display:flex; gap:8px; justify-content:center; margin-top:12px; }
.tt-carousel__dot{
  width:16px; height:16px; border-radius:50%; background: var(--color-accent); cursor:pointer; border: 1px solid var(--color-text);
}
.tt-carousel__dot.is-active{ background: var(--color-bg); }

/* Responsive: réduire largeur des slides */
@media (max-width:900px){
  .tt-carousel__slide{ width:110px; }
  .tt-artist__thumb{ height:88px; }
  .tt-carousel{ margin:16px 0 0px; }
}
@media (max-width:560px){
  .tt-carousel__slide{ width:86px; }
  .tt-artist__thumb{ height:72px; }
  .tt-carousel__nav{ padding:6px 8px; }
}


/* =========================
   Responsive : tablette & mobile
   ========================= */

/* -------------------------
   Tablette <= 900px
   ------------------------- */
@media (max-width: 900px) {

  .restaurant-page h2 {  margin: 1rem 0 .75rem; }
  .restaurant-page h3 { margin: 0 0 1rem; }
  /* container spacing */
  .restaurant-page .container { padding: 48px 18px; }

  /* HERO */
  .hero { min-height: 60vh; padding: 20px 12px; }
  .hero__inner h1 { font-size: clamp(24px, 7vw, 40px); }
  .hero__inner p { font-size: 16px; max-width: 560px; margin: 8px auto 0; }

  /* Sections stacked: place / table / toile / ambition / reservation */
  .place.container,
  .table.container,
  .toile.container,
  .ambition.container,
  .reservation.container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
    margin: 1.5rem 0;
  }

  /* Images / maps take full width, but smaller height */
  .place .place-maps,
  .table .table-img,
  .toile .toile-img,
  .perso .perso-img,
  .ambition .ambition-img,
  .reservation .reservation-img {
    width: 100%;
  }

  .table .table-img img,
  .toile .toile-img img,
  .perso .perso-img img,
  .ambition .ambition-img img,
  .reservation .reservation-img img {
    height: 42vh;
    max-height: 420px;
  }

  .place .place-maps iframe { height: 360px; }

  /* Texte blocks full width, increase readability */
  .place .place-texte,
  .table .table-texte,
  .toile .toile-texte,
  .perso .perso-texte,
  .ambition .ambition-texte,
  .reservation .reservation-texte {
    width: 100%;
    padding: 0;
  }

  /* perso section stacking */
  .perso.container > div { flex-direction: column; gap: 18px; }

  /* Buttons */
  .restaurant-page .btn {
    padding: 12px 16px;
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }

  /* infos block: use single column layout */
  .infos.container { gap: 20px; }
  .infos > div { grid-template-columns: 1fr; gap: 18px; }
  .infos .texte { width: 100%; }
  .infos img { padding-right: 0; max-height: 360px; }

  /* Carousel artists - show smaller slides */
  .tt-carousel__track { gap: 10px; padding: 10px 6px; }
  .tt-carousel__slide { width: 140px; }
  .tt-artist__thumb { height: 110px; }

  /* Nav buttons slightly reduced */
  .tt-carousel__nav { padding: 6px 8px; border-radius: 8px; }

  /* Minor spacing tweak for overall rhythm */
  .restaurant-page .container { gap: 0; }
}

/* -------------------------
   Mobile <= 560px
   ------------------------- */
@media (max-width: 560px) {
  /* container spacing */
  .restaurant-page .container { padding: 14px 14px; }

  /* HERO smaller and denser */
  .hero { min-height: 0; padding: 14px 10px; }
  .hero__inner h1 { font-size: clamp(20px, 9vw, 32px); }
  .hero__inner p { font-size: 14px; max-width: 100%; }

  /* Sections fully stacked */
  .place.container,
  .table.container,
  .toile.container,
  .ambition.container,
  .reservation.container,
  .perso.container {
    display: block;
  }

  /* Images reduced height to avoid too much scroll */
  .table .table-img img,
  .toile .toile-img img,
  .perso .perso-img img,
  .ambition .ambition-img img,
  .reservation .reservation-img img {
    height: 32vh;
    max-height: 320px;
  }

  .place .place-maps iframe { height: 260px; }

  /* perso layout: alternate image then text */
  .perso.container > div { display:flex; flex-direction:column-reverse; gap:12px; }

  /* Buttons full width */
  .restaurant-page .btn {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    text-align: center;
  }

  /* Infos */
  .infos > div { grid-template-columns: 1fr; gap: 14px; }
  .infos img { max-height: 240px; }

  /* Carousel artists: mobile friendly compact */
  .tt-carousel__track { gap: 8px; padding: 8px 6px; }
  .tt-carousel__slide { width: 92px; }
  .tt-artist__thumb { height: 72px; border-radius: 8px; }
  .tt-artist__name { font-size: 12px; margin-top:8px; }

  .tt-carousel__nav { display:none; } /* hide nav on very small screens to favor swipe */

  /* Ensure iframe and images responsive */
  img, iframe, video { max-width: 100%; height: auto; }

  /* Reduce hover animations on touch */
  .infos img, .intro img, .tt-artist__thumb img { transition: none; }

  /* Accessibility */
  .restaurant-page .btn, .tt-artist { min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,0.05); }

  /* Footer spacing tweak (if included in same stylesheet) */
  .site-footer { margin-top: 24px; padding-bottom: 32px; }
}

/* -------------------------
   Prefers reduced motion
   ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .infos img, .intro img, .tt-carousel__track, .tt-artist__thumb img, .hero__inner h1, .hero__inner p {
    transition: none !important;
    animation: none !important;
  }
}