/* ============================================================
   AMANN! — Resto & Bar, Vannes
   Feuille de styles
   Charte : rouge #D4310F · noir #1E1D22 · beige #CAB5AD
   ============================================================ */

/* ════════════════════════════════════════════════════════
   AMANN! — CHARTE GRAPHIQUE
   Rouge  #D4310F   Noir  #1E1D22   Beige  #CAB5AD
   Titres SignPartner (logo) · Sous-titres & textes Montserrat
   ════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --red:        #D4310F;
  --red-dark:   #A8250A;
  --red-light:  #E8563A;
  --red-pale:   #FBEAE6;
  --black:      #1E1D22;
  --black-soft: #2A292F;
  --beige:      #CAB5AD;
  --beige-pale: #F0E7E3;
  --cream:      #F8F5F3;
  --cream-dark: #EDE3DE;
  --white:      #ffffff;
  --text:       #1E1D22;
  --text-light: #6E655F;
  --font-sans:  'Montserrat', sans-serif;
  --transition: 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--text);
  overflow-x: hidden;
  cursor: default;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 3px; }

::selection { background: var(--red); color: var(--white); }

/* ── CURSOR ── */
.cursor {
  width: 10px; height: 10px;
  background: var(--red);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.15s ease, opacity 0.3s;
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 1.5px solid var(--red);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s, height 0.3s, opacity 0.3s;
}
@media (hover: none) { .cursor, .cursor-ring { display: none; } }

/* ── PICTO FILIGRANE (charte : "à la coupe, opacité 15%") ── */
.picto-watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.15;
  z-index: 0;
}
.picto-watermark.subtle { opacity: 0.07; }

/* ── NAVIGATION ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1.4rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}
nav.scrolled {
  background: rgba(248, 245, 243, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 0.85rem 3rem;
  box-shadow: 0 1px 20px rgba(30,29,34,0.08);
}
.nav-logo { display: block; position: relative; height: 42px; }
.nav-logo img {
  height: 42px; width: auto;
  transition: opacity 0.4s ease;
}
.nav-logo .logo-dark { position: absolute; top: 0; left: 0; opacity: 0; }
nav.scrolled .nav-logo .logo-light { opacity: 0; }
nav.scrolled .nav-logo .logo-dark  { opacity: 1; }

.nav-links { display: flex; gap: 2.4rem; align-items: center; }
.nav-links a {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  transition: color 0.3s;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 1.5px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }
nav.scrolled .nav-links a { color: var(--text); }
.nav-links a:hover { color: var(--red-light); }
nav.scrolled .nav-links a:hover { color: var(--red); }

.nav-cta {
  background: var(--red);
  color: var(--white) !important;
  padding: 0.62rem 1.5rem;
  border-radius: 100px;
  font-weight: 700 !important;
  transition: background 0.3s, transform 0.2s !important;
}
.nav-cta:hover { background: var(--red-dark); transform: translateY(-1px); }
.nav-cta::after { display: none !important; }

.burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.burger span { display: block; width: 24px; height: 2px; background: var(--white); transition: 0.3s; }
nav.scrolled .burger span { background: var(--black); }

.mobile-nav {
  display: none;
  position: fixed; inset: 0;
  background: var(--black);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  overflow: hidden;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--white);
  z-index: 2;
}
.mobile-nav a:hover { color: var(--red-light); }
.mobile-nav-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  font-size: 1.8rem; color: var(--white);
  cursor: pointer; background: none; border: none; z-index: 3;
}

/* ── HERO ── */
#hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--black);
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 25% 40%, rgba(212,49,15,0.28) 0%, transparent 58%),
    radial-gradient(ellipse at 78% 75%, rgba(202,181,173,0.10) 0%, transparent 55%),
    linear-gradient(165deg, #1E1D22 0%, #2A2226 45%, #1A1519 100%);
}
/* Photo de fond — décommenter dans img/ puis ajouter la classe .has-photo au body */
body.has-photo .hero-bg {
  background-image:
    linear-gradient(to bottom, rgba(30,29,34,0.72) 0%, rgba(30,29,34,0.5) 45%, rgba(30,29,34,0.88) 100%),
    url('../img/hero.jpg');
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 8s ease-out;
}
body.has-photo .hero-bg.loaded { transform: scale(1); }

.hero-grain {
  position: absolute; inset: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}
.hero-picto {
  position: absolute;
  right: -6vw; bottom: -10vh;
  width: 46vw; max-width: 620px;
  opacity: 0.09;
  pointer-events: none;
}
.hero-content {
  position: relative; z-index: 3;
  text-align: center;
  color: var(--white);
  padding: 0 2rem;
}
.hero-logo {
  width: min(560px, 78vw);
  margin: 0 auto 2rem;
  opacity: 0;
  transform: translateY(28px);
  animation: fadeUp 1s 0.3s forwards ease;
}
.hero-tagline {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--beige);
  margin-bottom: 1.6rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s 0.6s forwards ease;
}
.hero-sub {
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.9);
  margin-bottom: 2.6rem;
  opacity: 0;
  animation: fadeUp 0.8s 0.85s forwards ease;
}
.hero-sub .sep { color: var(--red); margin: 0 0.35rem; }
.hero-actions {
  display: flex; gap: 1rem;
  justify-content: center; flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.8s 1.05s forwards ease;
}
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.92rem 2.2rem;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
  border: none;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--red); color: var(--white); box-shadow: 0 4px 22px rgba(212,49,15,0.38); }
.btn-primary:hover { background: var(--red-dark); box-shadow: 0 8px 32px rgba(212,49,15,0.5); }
.btn-outline { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.55); }
.btn-outline:hover { background: rgba(255,255,255,0.09); border-color: var(--white); }

.hero-scroll {
  position: absolute; bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  animation: fadeUp 1s 1.5s both;
  z-index: 3;
}
.scroll-line {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, var(--red), transparent);
  animation: scrollPulse 1.8s infinite;
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes scrollPulse {
  0%, 100% { opacity: 0.35; transform: scaleY(0.8); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ── MARQUEE ── */
.marquee-band {
  background: var(--red);
  color: var(--white);
  padding: 0.85rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track { display: inline-flex; gap: 2.6rem; animation: marquee 26s linear infinite; }
.marquee-track span {
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  flex-shrink: 0;
}
.marquee-track .dot { color: rgba(255,255,255,0.5); font-size: 0.9rem; letter-spacing: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── SECTIONS COMMONS ── */
section { padding: 7rem 0; position: relative; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 2; }
.section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
}
.section-title {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--black);
  font-variant: small-caps;
}
.section-title em { font-style: italic; color: var(--red); font-variant: normal; }
.divider { width: 52px; height: 3px; background: var(--red); margin: 1.4rem 0; }

/* ── CONCEPT ── */
#concept { background: var(--cream); overflow: hidden; }
#concept .picto-watermark { left: -7vw; top: 8%; width: 30vw; max-width: 380px; }
.concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5.5rem; align-items: center; }
.concept-text p { font-size: 1rem; line-height: 1.85; color: var(--text-light); margin-bottom: 1.4rem; }
.concept-text p strong { color: var(--text); font-weight: 700; }
.concept-image-wrap { position: relative; }
.concept-img {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 200px 200px 6px 6px;
  background:
    radial-gradient(ellipse at 35% 25%, rgba(212,49,15,0.22) 0%, transparent 60%),
    linear-gradient(165deg, #2A292F 0%, #1E1D22 55%, #151418 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
body.has-photo .concept-img {
  background-image: url('../img/concept.jpg');
  background-size: cover; background-position: center;
}
.concept-img img { width: 52%; opacity: 0.9; }
body.has-photo .concept-img img { display: none; }
.concept-badge {
  position: absolute;
  bottom: -1.4rem; left: -1.4rem;
  width: 132px; height: 132px;
  background: var(--red);
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 1rem;
  box-shadow: 0 8px 30px rgba(212,49,15,0.4);
}
.concept-badge span:first-child {
  font-size: 1.7rem; font-weight: 900; color: var(--white); line-height: 1;
}
.concept-badge span:last-child {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.85); margin-top: 0.3rem;
}

/* ── GALLERY ── */
#gallery { background: var(--black); overflow: hidden; padding: 4.5rem 0; }
.gallery-intro {
  padding: 0 3rem 2.4rem;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem;
}
.gallery-intro .section-title { color: var(--white); }
.gallery-intro .section-label { color: var(--beige); }
.gallery-scroll {
  display: flex; gap: 1rem;
  overflow-x: auto;
  padding: 0 3rem 1rem;
  scrollbar-width: none;
  cursor: grab;
}
.gallery-scroll:active { cursor: grabbing; }
.gallery-scroll::-webkit-scrollbar { display: none; }
.gallery-item {
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
  margin: 0;
  background: #2A292F;
}
.gallery-item:nth-child(1) { width: 420px; height: 500px; }
.gallery-item:nth-child(2) { width: 300px; height: 500px; }
.gallery-item:nth-child(3) { width: 460px; height: 500px; }
.gallery-item:nth-child(4) { width: 340px; height: 500px; }
.gallery-item:nth-child(5) { width: 390px; height: 500px; }
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.gallery-item:hover img { transform: scale(1.04); }
/* Voile bas : garde le libellé lisible quelle que soit la photo */
.gallery-item::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(20,19,23,0.85) 0%, rgba(20,19,23,0.35) 45%, transparent 100%);
  pointer-events: none;
}
.tile-label {
  position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem;
  z-index: 2;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  text-align: left;
}
/* Tuiles cliquables : renvoient vers la page de carte correspondante */
button.gallery-item {
  border: none; padding: 0;
  font-family: var(--font-sans);
  cursor: pointer;
  display: block;
  -webkit-tap-highlight-color: transparent;
}
.gallery-item.is-link .tile-label { bottom: 2.7rem; }
.tile-cta {
  position: absolute; bottom: 1.3rem; left: 1.5rem; right: 1.5rem;
  z-index: 2;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--red-light);
  text-align: left;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.gallery-item.is-link:hover .tile-cta,
.gallery-item.is-link:focus-visible .tile-cta { opacity: 1; transform: none; }
.gallery-item.is-link:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
/* Sur écran tactile, pas de survol : le libellé d'action reste visible */
@media (hover: none) {
  .gallery-item.is-link .tile-cta { opacity: 1; transform: none; }
}
.gallery-hint {
  text-align: center; margin-top: 1.4rem;
  font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.25);
}


/* ── PAGES ORIGINALES ── */
#pages { background: var(--cream); overflow: hidden; padding: 6rem 0 5rem; }
.pages-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: start;
  margin-bottom: 4rem;
}
.pages-title {
  font-size: clamp(2.6rem, 7.5vw, 6rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--black);
  text-transform: uppercase;
}
.pages-intro {
  max-width: 300px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-light);
  padding-top: 0.6rem;
}
.pages-intro strong { color: var(--black); font-weight: 600; }

.pages-rail {
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  padding: 2rem 0 1.5rem;
  scrollbar-width: none;
  cursor: grab;
  align-items: flex-end;
}
.pages-rail:active { cursor: grabbing; }
.pages-rail::-webkit-scrollbar { display: none; }

.page-card {
  flex-shrink: 0;
  width: 250px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.page-card-shot {
  position: relative;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 6px 26px rgba(30,29,34,0.13);
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease;
}
.page-card:nth-child(odd)  .page-card-shot { transform: rotate(-1.4deg); }
.page-card:nth-child(even) .page-card-shot { transform: rotate(1.1deg); }
.page-card:hover .page-card-shot,
.page-card:focus-visible .page-card-shot {
  transform: rotate(0deg) translateY(-10px);
  box-shadow: 0 18px 46px rgba(30,29,34,0.22);
}
.page-card:focus-visible { outline: none; }
.page-card:focus-visible .page-card-shot { outline: 3px solid var(--red); outline-offset: 4px; }
.page-card-shot img { width: 100%; height: auto; display: block; }
.page-num {
  position: absolute;
  top: 0; left: 0;
  background: var(--red);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.32rem 0.6rem;
  z-index: 2;
}
.page-zoom {
  position: absolute;
  inset: 0;
  background: rgba(212,49,15,0.88);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.page-card:hover .page-zoom, .page-card:focus-visible .page-zoom { opacity: 1; }
.page-card-label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--black);
}
.pages-hint {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-light);
  opacity: 0.55;
}
.pages-legal {
  margin-top: 3.5rem;
  padding: 1.5rem 1.8rem;
  background: var(--beige-pale);
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.75;
  color: var(--text-light);
}
.pages-legal p + p { margin-top: 0.6rem; }
.pages-legal strong { color: var(--black); font-weight: 700; }

/* ── VISIONNEUSE (lightbox) ── */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(20,19,23,0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.5rem 1rem 5.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#lightbox.open { opacity: 1; pointer-events: all; }
.lb-stage {
  position: relative;
  max-width: 100%;
  /* hauteur explicite : sans elle, le max-height de l'image
     se resout contre une hauteur indefinie et la page deborde */
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-img {
  max-width: min(880px, 92vw);
  max-height: 100%;
  width: auto; height: auto;
  border-radius: 4px;
  box-shadow: 0 20px 70px rgba(0,0,0,0.55);
  background: var(--white);
  transform: scale(0.96);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease;
}
#lightbox.open .lb-img { transform: scale(1); }
.lb-img.swapping { opacity: 0; }
.lb-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 1.2rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--white);
}
.lb-caption {
  display: flex; align-items: center; gap: 0.9rem;
  font-size: 0.76rem; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.lb-caption .lb-count {
  font-weight: 600; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.45);
}
.lb-actions { display: flex; align-items: center; gap: 0.6rem; }
.lb-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  color: var(--white);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
  font-family: var(--font-sans);
}
.lb-btn:hover { background: var(--red); border-color: var(--red); transform: scale(1.06); }
.lb-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  font-size: 1.4rem;
  z-index: 3;
}
.lb-nav.prev { left: 1.2rem; }
.lb-nav.next { right: 1.2rem; }
.lb-nav:hover { transform: translateY(-50%) scale(1.06); }
.lb-thumbs {
  position: absolute;
  bottom: 1.1rem; left: 0; right: 0;
  display: flex; justify-content: center; gap: 0.5rem;
  padding: 0 1rem;
  flex-wrap: wrap;
}
.lb-thumb {
  width: 34px; height: 46px;
  border-radius: 2px;
  border: 1.5px solid rgba(255,255,255,0.25);
  background-size: cover; background-position: top center;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.25s, border-color 0.25s, transform 0.25s;
  padding: 0;
}
.lb-thumb:hover { opacity: 0.85; transform: translateY(-2px); }
.lb-thumb.active { opacity: 1; border-color: var(--red); }

/* ── VISIONNEUSE sur mobile et tablette ──────────────────────
   Une page de carte fait 1750 px de haut : reduite pour tenir
   dans un ecran de telephone, elle serait illisible. On la
   affiche donc en pleine largeur et on defile pour la lire
   (le pincer-pour-zoomer reste disponible).
   Les barres et fleches passent en position fixe pour rester
   accessibles pendant le defilement.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #lightbox {
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 4rem 0.6rem 4.4rem;
  }
  .lb-stage { height: auto; width: 100%; }
  .lb-img {
    max-width: 100%;
    width: 100%;
    max-height: none;
    height: auto;
  }
  .lb-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    padding: 0.8rem 1rem;
    background: linear-gradient(to bottom, rgba(20,19,23,0.95), rgba(20,19,23,0.6) 70%, transparent);
    z-index: 4;
  }
  .lb-caption { font-size: 0.68rem; letter-spacing: 0.14em; gap: 0.6rem; }
  .lb-btn { width: 38px; height: 38px; }
  .lb-nav {
    position: fixed;
    top: auto; bottom: 0.55rem;
    transform: none;
    width: 42px; height: 42px;
    font-size: 1.2rem;
    z-index: 5;
  }
  .lb-nav.prev { left: 0.6rem; }
  .lb-nav.next { right: 0.6rem; }
  .lb-nav:hover { transform: none; }
  .lb-thumbs {
    position: fixed;
    bottom: 0.7rem; left: 3.6rem; right: 3.6rem;
    padding: 0;
    gap: 0.35rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    z-index: 4;
  }
  .lb-thumbs::-webkit-scrollbar { display: none; }
  .lb-thumb { width: 26px; height: 34px; flex-shrink: 0; }
}

/* ── HIGHLIGHT (Menu Amann) ── */
#highlight {
  background: var(--red);
  color: var(--white);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
#highlight .picto-watermark {
  right: -5vw; top: -12%;
  width: 34vw; max-width: 430px;
  opacity: 0.13;
}
.highlight-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }
.highlight-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--white); color: var(--red);
  padding: 0.42rem 1.1rem; border-radius: 100px;
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.highlight-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900; line-height: 1.08;
  font-variant: small-caps;
  margin-bottom: 1.2rem;
}
.highlight-title em { font-style: italic; font-variant: normal; }
.highlight-desc { font-size: 0.98rem; line-height: 1.8; color: rgba(255,255,255,0.88); margin-bottom: 1.4rem; }
.highlight-desc strong { color: var(--white); font-weight: 700; }
.highlight-menu {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 16px;
  padding: 2.2rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.highlight-menu .hm-price {
  font-size: 3.4rem; font-weight: 900; line-height: 1;
  text-align: center; margin-bottom: 0.3rem;
}
.highlight-menu .hm-label {
  text-align: center; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); margin-bottom: 1.8rem;
}
.hm-course { padding: 0.9rem 0; border-bottom: 1px solid rgba(255,255,255,0.18); }
.hm-course:last-of-type { border-bottom: none; }
.hm-course-label {
  font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); margin-bottom: 0.35rem;
}
.hm-course-text { font-size: 0.87rem; line-height: 1.6; }
.hm-course-text .or {
  display: block; font-style: italic;
  color: rgba(255,255,255,0.55); font-size: 0.8rem; margin: 0.25rem 0;
}

/* ── INFOS ── */
#infos { background: var(--cream); }
.infos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: start; }
.hours-table { width: 100%; border-collapse: collapse; margin-top: 1.4rem; }
.hours-table tr { border-bottom: 1px solid var(--cream-dark); }
.hours-table td { padding: 0.78rem 0; font-size: 0.87rem; }
.hours-table td:first-child { font-weight: 700; color: var(--black); width: 120px; }
.hours-table td:last-child { color: var(--text-light); }
.hours-table tr.today td { color: var(--red); }
.hours-table tr.today td:first-child { font-weight: 800; }
.hours-note { margin-top: 0.9rem; font-size: 0.76rem; font-style: italic; color: var(--text-light); }
.address-block {
  margin-top: 2rem; padding: 1.4rem;
  background: var(--beige-pale);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.address-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.87rem;
  color: var(--text);
}
.address-item a:hover { color: var(--red); }
.address-item .icon {
  width: 38px; height: 38px;
  background: var(--red);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  line-height: 0;
}
.address-item .icon svg {
  width: 18px; height: 18px;
  display: block;
}
/* Le texte se centre sur la pastille, qu'il tienne sur une ou deux lignes */
.address-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 38px;
  line-height: 1.5;
}
.map-wrap {
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 40px rgba(30,29,34,0.12);
  aspect-ratio: 4/3;
}
.map-wrap iframe { width: 100%; height: 100%; border: none; }

/* ── RESERVATION ── */
#reservation { background: var(--black); color: var(--white); overflow: hidden; }
#reservation .picto-watermark { left: -8vw; bottom: -8%; width: 30vw; max-width: 380px; opacity: 0.06; }
.reservation-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.reservation-text .section-title { color: var(--white); }
.reservation-text .section-label { color: var(--beige); }
.reservation-text p { margin-top: 1.4rem; font-size: 0.96rem; line-height: 1.8; color: rgba(255,255,255,0.65); }
.resa-form {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 2.3rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.1rem; }
.form-group label {
  display: block; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-bottom: 0.45rem;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  padding: 0.82rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--white);
  transition: border-color 0.3s, background 0.3s;
  outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--red); background: rgba(255,255,255,0.1);
}
.form-group select option { background: var(--black); color: var(--white); }
.form-group textarea { resize: vertical; min-height: 76px; }
.form-submit { width: 100%; margin-top: 0.4rem; justify-content: center; }
.payment-note {
  margin-top: 0.9rem; text-align: center;
  font-size: 0.74rem; color: rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.form-status {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  line-height: 1.6;
  text-align: center;
  border-radius: 10px;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.form-status.ok, .form-status.warn, .form-status.error {
  padding: 0.85rem 1rem;
  max-height: 200px;
}
.form-status.ok    { background: rgba(75,122,68,0.18);  color: #A8D69F; border: 1px solid rgba(75,122,68,0.45); }
.form-status.warn  { background: rgba(212,49,15,0.14);  color: #F3B4A4; border: 1px solid rgba(212,49,15,0.4); }
.form-status.error { background: rgba(212,49,15,0.18);  color: #F3B4A4; border: 1px solid rgba(212,49,15,0.5); }
.form-status a { color: inherit; text-decoration: underline; font-weight: 700; }

/* ── INSTAGRAM ── */
#instagram { background: var(--cream-dark); padding: 5rem 0; text-align: center; }
.insta-handle { font-size: 1.6rem; font-weight: 800; color: var(--red); margin-bottom: 0.4rem; }
.insta-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem; margin: 2.4rem 0; border-radius: 12px; overflow: hidden;
}
.insta-item {
  aspect-ratio: 1;
  overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.insta-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.insta-item::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(212,49,15,0); transition: background 0.3s;
}
.insta-item:hover::after { background: rgba(212,49,15,0.25); }

/* ── AVIS GOOGLE ── */
#avis { background: var(--cream); overflow: hidden; padding: 6rem 0 5rem; }
#avis .picto-watermark { right: -8vw; top: 6%; width: 28vw; max-width: 340px; }
.avis-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
  margin-bottom: 3rem;
}
.avis-score { text-align: center; flex-shrink: 0; }
.avis-score-note {
  font-size: 3.4rem; font-weight: 900;
  color: var(--black); line-height: 1;
  display: flex; align-items: baseline; justify-content: center; gap: 0.15rem;
}
.avis-score-sur { font-size: 1.2rem; font-weight: 600; color: var(--text-light); }
.avis-etoiles {
  color: #FBBC05;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  margin: 0.35rem 0 0.5rem;
}
.avis-score-meta {
  font-size: 0.8rem; font-weight: 600;
  color: var(--text-light);
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
}
.avis-logo-g { width: 15px; height: 15px; display: block; }

.avis-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.2rem;
}
.avis-carte {
  background: var(--white);
  border-radius: 12px;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  box-shadow: 0 4px 18px rgba(30,29,34,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.avis-carte:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(30,29,34,0.1); }
.avis-carte-haut { display: flex; align-items: center; gap: 0.8rem; }
.avis-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--beige-pale);
}
.avis-avatar-lettre {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem;
  flex-shrink: 0;
}
.avis-auteur { font-size: 0.88rem; font-weight: 700; color: var(--black); line-height: 1.3; }
.avis-quand { font-size: 0.72rem; color: var(--text-light); }
.avis-note { color: #FBBC05; font-size: 0.9rem; letter-spacing: 0.1em; }
.avis-texte {
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--text-light);
  margin: 0;
}
.avis-texte.tronque { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.avis-plus {
  align-self: flex-start;
  background: none; border: none; padding: 0;
  font-family: var(--font-sans);
  font-size: 0.74rem; font-weight: 700;
  color: var(--red);
  cursor: pointer;
  letter-spacing: 0.04em;
}
.avis-plus:hover { text-decoration: underline; }

.avis-repli {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--beige-pale);
  border-radius: 12px;
}
.avis-repli p { font-size: 0.88rem; color: var(--text-light); margin-bottom: 1.4rem; }

.avis-pied { text-align: center; margin-top: 2.5rem; }
.avis-actions {
  display: flex; gap: 0.8rem;
  justify-content: center; align-items: center; flex-wrap: wrap;
}
.btn-ghost {
  background: transparent;
  color: var(--red);
  border: 1.5px solid var(--red);
}
.btn-ghost:hover { background: var(--red); color: var(--white); }
.avis-mention {
  margin-top: 1rem;
  font-size: 0.72rem;
  color: var(--text-light);
  opacity: 0.75;
}

@media (max-width: 900px) {
  #avis { padding: 4.5rem 0 4rem; }
  .avis-head { grid-template-columns: 1fr; gap: 2rem; }
  .avis-score { text-align: left; }
  .avis-score-note, .avis-score-meta { justify-content: flex-start; }
}

/* ── FOOTER ── */
footer { background: var(--black); color: rgba(255,255,255,0.6); padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4rem; margin-bottom: 2.6rem; }
.footer-logo-img { width: 190px; margin-bottom: 1.2rem; }
.footer-brand p { font-size: 0.83rem; line-height: 1.75; max-width: 300px; }
.footer-col h4 {
  font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--white); margin-bottom: 1.1rem;
}
.footer-col ul li { margin-bottom: 0.58rem; font-size: 0.83rem; }
.footer-col ul li a { transition: color 0.3s; }
.footer-col ul li a:hover { color: var(--red-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.09);
  padding-top: 1.4rem;
  display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; flex-wrap: wrap;
  font-size: 0.73rem;
}
.footer-social { display: flex; gap: 0.8rem; margin-top: 1.2rem; }
.social-btn {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.75);
  line-height: 0;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.social-btn svg { width: 17px; height: 17px; display: block; }
.social-btn:hover { border-color: var(--red); background: rgba(212,49,15,0.15); color: var(--white); }

/* ── CHATBOT ── */
#chatbot-btn {
  position: fixed; bottom: 2rem; right: 2rem;
  z-index: 500;
  width: 58px; height: 58px;
  background: var(--red);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(212,49,15,0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none; outline: none;
}
#chatbot-btn:hover { transform: scale(1.08); box-shadow: 0 12px 40px rgba(212,49,15,0.6); }
#chatbot-btn svg { width: 25px; height: 25px; fill: var(--white); }
.chatbot-pulse {
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--red-light);
  animation: pulsering 2s infinite;
}
@keyframes pulsering {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
#chatbot-panel {
  position: fixed; bottom: 6rem; right: 2rem;
  z-index: 500;
  width: 380px; max-height: 580px;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(30,29,34,0.2);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  opacity: 0; pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  transform-origin: bottom right;
}
#chatbot-panel.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; }
.chat-header {
  background: var(--red); color: var(--white);
  padding: 1.1rem 1.4rem;
  display: flex; align-items: center; gap: 0.9rem;
}
.chat-avatar {
  width: 42px; height: 42px;
  background: var(--white); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.chat-avatar img { width: 24px; }
.chat-header-info { flex: 1; }
.chat-header-name { font-size: 0.94rem; font-weight: 800; }
.chat-header-status {
  font-size: 0.7rem; color: rgba(255,255,255,0.8);
  display: flex; align-items: center; gap: 0.3rem;
}
.chat-header-status::before {
  content: ''; display: inline-block;
  width: 7px; height: 7px; background: #6bcf7f; border-radius: 50%;
}
.chat-close {
  background: none; border: none;
  color: rgba(255,255,255,0.75);
  cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 4px;
  transition: color 0.2s;
}
.chat-close:hover { color: var(--white); }
.chat-messages {
  flex: 1; overflow-y: auto;
  padding: 1.1rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  scrollbar-width: thin;
}
.chat-msg {
  max-width: 86%;
  padding: 0.72rem 1rem;
  border-radius: 14px;
  font-size: 0.85rem; line-height: 1.55;
  animation: msgAppear 0.3s ease;
}
@keyframes msgAppear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.msg-bot { background: var(--beige-pale); color: var(--text); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg-bot a { color: var(--red); font-weight: 700; }
.msg-user { background: var(--red); color: var(--white); border-bottom-right-radius: 4px; align-self: flex-end; }
.msg-typing {
  background: var(--beige-pale);
  border-bottom-left-radius: 4px; align-self: flex-start;
  display: flex; align-items: center; gap: 4px; padding: 0.8rem 1rem;
}
.typing-dot { width: 7px; height: 7px; background: var(--text-light); border-radius: 50%; animation: typingBounce 1.2s infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.chat-suggestions { padding: 0.4rem 1.1rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.chat-suggestion {
  padding: 0.38rem 0.85rem;
  background: var(--red-pale); color: var(--red-dark);
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 0.72rem; font-weight: 600;
  cursor: pointer; border: none;
  transition: background 0.2s, color 0.2s;
}
.chat-suggestion:hover { background: var(--red); color: var(--white); }
.chat-input-row { display: flex; gap: 0.5rem; padding: 0.9rem 1.1rem; border-top: 1px solid var(--cream-dark); }
.chat-input {
  flex: 1;
  border: 1.5px solid var(--cream-dark);
  border-radius: 100px;
  padding: 0.62rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  outline: none; color: var(--text);
  transition: border-color 0.3s;
  background: var(--cream);
}
.chat-input:focus { border-color: var(--red); }
.chat-send {
  width: 40px; height: 40px;
  background: var(--red); border: none; border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.3s;
}
.chat-send:hover { background: var(--red-dark); }
.chat-send svg { width: 16px; height: 16px; fill: var(--white); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  nav { padding: 1.1rem 1.5rem; }
  nav.scrolled { padding: 0.7rem 1.5rem; }
  .nav-links { display: none; }
  .burger { display: flex; }
  .nav-logo, .nav-logo img { height: 34px; }
  .concept-grid { grid-template-columns: 1fr; gap: 3rem; }
  .concept-image-wrap { order: -1; }
  .highlight-content { grid-template-columns: 1fr; gap: 2.5rem; }
  .infos-grid { grid-template-columns: 1fr; gap: 3rem; }
  .reservation-inner { grid-template-columns: 1fr; gap: 3rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .insta-grid .insta-item:nth-child(4), .insta-grid .insta-item:nth-child(5) { display: none; }
  section { padding: 5rem 0; }
  .form-row { grid-template-columns: 1fr; }
  .gallery-intro { padding: 0 1.5rem 2rem; flex-direction: column; align-items: flex-start; }
  .gallery-scroll { padding: 0 1.5rem 1rem; }
  #chatbot-panel { width: calc(100vw - 2rem); right: 1rem; bottom: 5rem; }
}
@media (max-width: 600px) {
  .menu-grid { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: repeat(2, 1fr); }
  .insta-grid .insta-item:nth-child(3), .insta-grid .insta-item:nth-child(4), .insta-grid .insta-item:nth-child(5) { display: none; }
  .gallery-item:nth-child(n) { width: 78vw; height: 400px; }
  .hero-logo { width: 86vw; }
}

/* ── PAGE MENTIONS LÉGALES ── */
.page-legale { background: var(--cream); }
.page-legale nav { background: rgba(248,245,243,0.97); }
.legale { padding: 8rem 0 4rem; }
.legale .container { max-width: 820px; }
.legale-titre {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 800;
  font-variant: small-caps;
  line-height: 1.1;
  color: var(--black);
  margin-bottom: 0.5rem;
}
.legale-maj {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-light);
  margin-bottom: 3rem;
}
.legale-bloc {
  padding: 0 0 2.4rem;
  margin-bottom: 2.4rem;
  border-bottom: 1px solid var(--cream-dark);
}
.legale-bloc:last-of-type { border-bottom: none; }
.legale-bloc h2 {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant: small-caps;
  letter-spacing: 0.03em;
  color: var(--red);
  margin-bottom: 1.1rem;
}
.legale-bloc h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--black);
  margin: 1.6rem 0 0.5rem;
}
.legale-bloc p {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--text-light);
  margin-bottom: 0.9rem;
}
.legale-bloc p strong { color: var(--black); font-weight: 700; }
.legale-bloc a { color: var(--red); text-decoration: underline; }
.legale-bloc a:hover { color: var(--red-dark); }

.legale-liste {
  display: grid;
  grid-template-columns: minmax(150px, 34%) 1fr;
  gap: 0.6rem 1.4rem;
  font-size: 0.88rem;
  line-height: 1.7;
}
.legale-liste dt { font-weight: 700; color: var(--black); }
.legale-liste dd { margin: 0; color: var(--text-light); }

/* Marqueur visuel des informations qu'il reste à fournir */
.a-completer {
  display: inline-block;
  background: #FFF3CD;
  border: 1px dashed #C9A227;
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #7A5C00;
}
.legale-note {
  font-size: 0.8rem !important;
  font-style: italic;
  opacity: 0.8;
}
.legale-retour { margin-top: 2.5rem; text-align: center; }

@media (max-width: 700px) {
  .legale { padding: 6.5rem 0 3rem; }
  .legale-liste { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .legale-liste dd { margin-bottom: 0.7rem; }
}

/* Jour de fermeture dans le tableau des horaires */
.hours-table td.ferme { color: var(--red) !important; font-style: italic; }
.hours-table td.ferme:first-child { font-weight: 700; }
/* Liste d'heures desactivee quand le jour est ferme ou non choisi */
#resaHeure:disabled { opacity: 0.55; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════
   CORRECTIFS MULTI-SUPPORTS
   ════════════════════════════════════════════════════════ */

/* L'attribut hidden doit primer sur nos regles display:.
   Sans ca, .avis-liste{display:grid} et .btn{display:inline-flex}
   ecrasent le display:none par defaut du navigateur, et les
   elements restent visibles alors qu'ils sont masques en JS. */
[hidden] { display: none !important; }

/* iOS Safari zoome automatiquement la page quand on tape dans un
   champ dont la police fait moins de 16px. On force donc 16px sur
   mobile pour les champs du formulaire — sans toucher au rendu
   sur ordinateur. */
/* Le test sur la largeur ne suffit pas : un iPad en paysage fait
   1180 a 1366px de large et retomberait sous les 16px. On ajoute
   donc un test sur le pointeur, vrai sur tout ecran tactile
   quelle que soit sa taille. */
@media (max-width: 1024px), (pointer: coarse) {
  .form-group input,
  .form-group select,
  .form-group textarea,
  .chat-input {
    font-size: 16px;
  }
}

/* Confort tactile : cibles d'au moins 44px de haut sur mobile
   (recommandation Apple et Google pour les elements interactifs) */
@media (hover: none) {
  .form-group input,
  .form-group select,
  .form-group textarea { min-height: 44px; }
  .btn { min-height: 44px; }
}

/* ════════════════════════════════════════════════════════
   BANDEAU PHOTOS DEFILANT

   Deux rangees qui glissent en continu, en sens inverse.
   L'illusion d'infini vient du doublage du contenu : la liste
   de photos est inseree DEUX FOIS bout a bout, et l'animation
   translate exactement de -50%, donc au moment ou elle boucle
   l'image affichee est identique — aucun saut visible.
   ════════════════════════════════════════════════════════ */
#bandeau { padding: 6rem 0 7rem; overflow: hidden; }

.bandeau-wrap {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bandeau-rangee {
  display: flex;
  /* Pas de `gap` ici, volontairement : l'espacement est porte par
     chaque vignette en margin-right. Avec `gap`, la rangee mesure
     2 series + 19 espacements, donc 50% de sa largeur ne tombe pas
     exactement sur une serie — il manque un demi-espacement, et la
     boucle saute de quelques pixels a chaque tour. Avec une marge
     par vignette, la largeur vaut exactement 2 series et -50%
     retombe au pixel pres. */
  width: max-content;              /* la rangee fait la largeur de son contenu */
  animation: bandeauDefile 60s linear infinite;
  will-change: transform;
}
.bandeau-rangee--inverse { animation-direction: reverse; }

@keyframes bandeauDefile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Au survol on ralentit fortement plutot que de figer net :
   moins brutal, et l'utilisateur peut detailler une photo. */
@media (hover: hover) {
  .bandeau-wrap:hover .bandeau-rangee { animation-duration: 200s; }
}

/* La largeur des vignettes est FIXEE en CSS, pas deduite des
   proportions de chaque photo. Raison : les photos sont en
   chargement differe, donc une image hors ecran n'a aucune
   dimension et la rangee serait trop courte au moment ou l'on
   calcule combien de series il faut pour remplir l'ecran — d'ou
   un vide dans le defilement. Avec des largeurs fixes la mise en
   page est connue d'avance, quel que soit l'etat du chargement.
   Trois largeurs en rotation donnent le rythme irregulier voulu. */
.bandeau-photo {
  flex: 0 0 auto;
  margin-right: 1rem;              /* l'espacement, cf. .bandeau-rangee */
  height: 260px;
  width: 320px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream-dark);
}
/* Les trois largeurs sont posees par le JS selon la position dans
   la serie, et non par nth-child : la rangee contient la serie
   deux fois, et il faut que les deux moitiés soient decoupees
   exactement pareil pour que le retour a -50% soit invisible.
   Un nth-child sur la rangee entiere ne le garantit pas. */
.bandeau-photo--etroite { width: 220px; }
.bandeau-photo--large   { width: 400px; }

.bandeau-photo img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1024px) {
  #bandeau { padding: 4.5rem 0 5rem; }
  .bandeau-photo { height: 180px; width: 230px; }
  .bandeau-photo--etroite { width: 155px; }
  .bandeau-photo--large   { width: 285px; }
  .bandeau-rangee { animation-duration: 45s; }
}
@media (max-width: 600px) {
  .bandeau-photo { height: 140px; width: 175px; }
  .bandeau-photo--etroite { width: 120px; }
  .bandeau-photo--large   { width: 215px; }
}

/* Reglage systeme « animations reduites » : on arrete le
   defilement et la rangee devient un simple bandeau que l'on
   fait glisser au doigt. */
@media (prefers-reduced-motion: reduce) {
  .bandeau-rangee {
    animation: none;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .bandeau-rangee::-webkit-scrollbar { display: none; }
}

/* ════════════════════════════════════════════════════════
   CHEVAUCHEMENT DATE / HEURE SUR SAFARI

   Sur Safari (iPhone, iPad, Mac), input[type=date] a une
   largeur intrinseque minimale bien plus grande que sur
   Chrome. Dans une grille, un element ne peut pas devenir
   plus etroit que son contenu minimal — la colonne Date
   depassait donc sa moitie et recouvrait le champ Heure.
   Chromium n'a pas ce probleme, ce qui rend le defaut
   invisible en test sur navigateur Chrome.

   Trois verrous, du plus general au plus cible.
   ════════════════════════════════════════════════════════ */

/* 1. Les colonnes ont le droit de devenir plus etroites que
      leur contenu. C'est ce que minmax(0, 1fr) autorise et
      que 1fr seul interdit. */
.form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 2. Meme autorisation sur les elements eux-memes, sinon la
      largeur minimale du champ prime encore. */
.form-row > .form-group { min-width: 0; }
.form-group input,
.form-group select,
.form-group textarea {
  min-width: 0;
  max-width: 100%;
}

/* 3. On neutralise l'habillage natif du champ date, qui porte
      cette largeur intrinseque. Le champ suit alors la largeur
      qu'on lui donne, comme les autres. */
.form-group input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}

/* Par securite, on empile Date et Heure jusqu'a 1024px : un
   champ date et son selecteur d'heure cote a cote sont a
   l'etroit sur toute tablette, quel que soit le navigateur. */
@media (max-width: 1024px) {
  .form-row { grid-template-columns: 1fr; }
}