/* ==========================================================================
   L'Instant T · bar à bières et cave, 2 rue Racine, Nîmes
   Maquette Timy Studio.

   DA lue sur leurs vrais assets :
   - le pétrole profond et le corail viennent de la couverture de leur
     carnet « Nos Cartes » (photos p01 / p07)
   - l'ambre vient de leurs bières (p04), le bois de leurs tables
   - le vert feuille vient des cubes de l'arbre au milieu de la salle (p06)
   - l'emblème reprend le T et l'éventail de fanions de leur enseigne (p00)
   ========================================================================== */

:root {
  /* Palette */
  --color-bg:           #FAF3E6;  /* crème, le fond du carnet et des murs */
  --color-bg-warm:      #F2E6CF;  /* crème plus chaud, bandes secondaires */
  --color-surface:      #FFFCF5;  /* cartes posées sur le crème */
  --color-deep:         #0E4A52;  /* pétrole, sections sombres */
  --color-ink:          #241F1A;  /* titres */
  --color-text:         #3D362D;  /* corps */
  --color-text-muted:   #6E6152;  /* secondaire (AA sur le crème : 5,4:1) */
  --color-accent:       #D9861F;  /* ambre bière, couleur d'action */
  --color-coral:        #DE5B44;  /* corail du carnet */
  --color-leaf:         #4E9E3C;  /* vert des cubes de l'arbre */

  /* Déclinaisons lisibles des mêmes teintes. L'ambre et le corail sont beaux
     en aplat mais trop clairs en petit texte : ces deux variantes tiennent
     le AA, l'une sur le crème, l'autre sur le pétrole. */
  --color-accent-ink:   #9C5B0C;  /* ambre foncé, petit texte sur crème */
  --color-accent-light: #E9A445;  /* ambre clair, petit texte sur pétrole */
  --color-coral-ink:    #B03A24;  /* corail foncé, petit texte sur crème */
  --color-border:       rgba(36, 31, 26, 0.14);
  --color-border-light: rgba(247, 234, 211, 0.22);

  /* Typographie : un serif chaud pour le temps qui passe, un sans humaniste
     pour le reste. Aucune requête externe, tout est en pile système. */
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --font-body:    "Trebuchet MS", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  /* Espacements */
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  4rem;
  --space-2xl: 8rem;

  /* Rayons */
  --radius-sm:   6px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-full: 9999px;

  /* Transitions */
  --t-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 0.3s  cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.6s  cubic-bezier(0.4, 0, 0.2, 1);

  --wrap: 1200px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-ink); margin: 0; line-height: 1.05; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--space-lg); }

/* ---------- Vocabulaire commun ---------- */
.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-coral-ink);
  margin-bottom: var(--space-md);
}
.eyebrow-light { color: var(--color-accent-light); }

.div-fan { display: block; width: 84px; height: 11px; color: var(--color-accent); margin-bottom: var(--space-md); opacity: 0.9; }

.sec-head { max-width: 640px; margin-bottom: var(--space-xl); }
.sec-head h2, .cave-text h2, .venir-info h2, .avis-head h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 700; }
.sec-head p { margin-top: var(--space-md); color: var(--color-text-muted); font-size: 1.05rem; }
.lede { font-size: 1.08rem; color: var(--color-text); margin-top: var(--space-md); }

.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.95em 1.6em;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.95rem; font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn-main { background: var(--color-accent); color: var(--color-ink); }
/* Au survol l'ambre bascule sur le pétrole : assombrir l'ambre en gardant un
   texte lisible dessus est impossible, l'inversion règle le contraste et fait
   un plus joli geste. */
.btn-main:hover { background: var(--color-deep); color: #F7EAD3; transform: translateY(-2px); }
.btn-ghost { border-color: var(--color-ink); color: var(--color-ink); }
.btn-ghost:hover { background: var(--color-ink); color: var(--color-bg); transform: translateY(-2px); }
.btn .arr { transition: transform var(--t-fast); }
.btn:hover .arr { transform: translateX(4px); }

/* Note Google : étoiles partielles par calque clippé. 4,5/5 = 90%. */
.note { display: flex; align-items: center; gap: 0.7em; flex-wrap: wrap; }
.stars { position: relative; display: inline-block; font-size: 1.15rem; letter-spacing: 0.1em; line-height: 1; }
.stars-base { color: rgba(36, 31, 26, 0.2); }
.stars-fill {
  position: absolute; inset: 0;
  overflow: hidden; white-space: nowrap;
  color: var(--color-accent);
}
.note-txt { font-size: 0.95rem; color: var(--color-text-muted); }
.note-txt strong { color: var(--color-ink); font-size: 1.02rem; }
.note-light .stars-base { color: var(--color-border-light); }
.note-light .note-txt { color: rgba(247, 234, 211, 0.72); }
.note-light .note-txt strong { color: #F7EAD3; }
.note-light .note-txt a { color: inherit; }

/* Révélation à l'entrée */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------- Marqueur de maquette ---------- */
.pitch {
  position: relative; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 0.6em;
  background: var(--color-ink); color: #EFE3CE;
  font-size: 0.78rem; letter-spacing: 0.02em;
  padding: 0.65em var(--space-md);
  text-align: center;
}
.pitch-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex: none; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 243, 230, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base), background var(--t-base);
}
.nav.scrolled { border-bottom-color: var(--color-border); background: rgba(250, 243, 230, 0.96); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); height: 74px; }
.brand { display: inline-flex; align-items: center; gap: 0.6em; text-decoration: none; }
.brand-mark { width: 36px; height: 36px; flex: none; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; color: var(--color-ink); letter-spacing: -0.02em; }
.nav-links { display: flex; gap: var(--space-lg); }
.nav-links a {
  position: relative;
  text-decoration: none; font-size: 0.92rem; font-weight: 500; color: var(--color-text);
  padding: 0.3em 0;
  transition: color var(--t-fast);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-base);
}
.nav-links a:hover { color: var(--color-ink); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-tel { display: flex; flex-direction: column; text-decoration: none; text-align: right; line-height: 1.2; }
.nav-tel-label { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.nav-tel-num { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--color-ink); }
.nav-tel:hover .nav-tel-num { color: var(--color-accent-ink); }

/* ---------- Hero éditorial ---------- */
.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem); overflow: hidden; }
.hero-in {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 {
  font-size: clamp(3rem, 7.4vw, 5.6rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.hero h1 em {
  font-style: italic;
  color: var(--color-deep);
  position: relative;
}
/* Le trait sous « pause » : un coup de pinceau, pas un surlignage */
.hero h1 em::after {
  content: ""; position: absolute; left: 0.02em; right: 0.12em; bottom: 0.06em;
  height: 0.09em; border-radius: var(--radius-full);
  background: var(--color-accent);
  opacity: 0.85;
}
.hero-lede { margin-top: var(--space-lg); font-size: 1.12rem; max-width: 46ch; color: var(--color-text); }
.hero .note { margin-top: var(--space-lg); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); }

.hero-media { position: relative; }
.rays {
  position: absolute;
  width: 150%; height: auto; aspect-ratio: 1;
  top: 50%; left: 52%;
  transform: translate(-50%, -50%);
  color: var(--color-accent);
  opacity: 0.13;
  pointer-events: none;
}
.shot { position: relative; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot-main {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 26px 60px -22px rgba(36, 31, 26, 0.45);
  cursor: zoom-in;
  rotate: 1.4deg;
}
.shot-main figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.4em 1.2em 1em;
  background: linear-gradient(to top, rgba(20, 15, 10, 0.72), transparent);
  color: #F7EAD3;
  font-size: 0.82rem; letter-spacing: 0.04em;
}
.shot-inset {
  position: absolute;
  left: -6%; bottom: -9%;
  width: 38%;
  aspect-ratio: 1 / 1.2;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 6px solid var(--color-bg);
  box-shadow: 0 16px 34px -12px rgba(36, 31, 26, 0.5);
  cursor: zoom-in;
  rotate: -3.2deg;
}
.shot-main, .shot-inset { transition: rotate var(--t-slow), transform var(--t-slow); }
.shot-main:hover { rotate: 0.4deg; transform: translateY(-4px); }
.shot-inset:hover { rotate: -1.2deg; transform: translateY(-4px); }

/* ---------- Bande de faits ---------- */
.faits { background: var(--color-deep); color: #F7EAD3; }
.faits-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.fait { padding: clamp(1.6rem, 3vw, 2.4rem) var(--space-md); text-align: center; border-left: 1px solid var(--color-border-light); }
.fait:first-child { border-left: 0; }
.fait strong { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: #F7EAD3; letter-spacing: -0.02em; }
.fait span { display: block; margin-top: 0.35em; font-size: 0.82rem; color: rgba(247, 234, 211, 0.72); }

/* ---------- La maison ---------- */
.maison { padding: var(--space-2xl) 0; }
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.carte {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex; flex-direction: column;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.carte:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -22px rgba(36, 31, 26, 0.4); border-color: rgba(217, 134, 31, 0.5); }
.carte-k { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--color-accent-ink); letter-spacing: 0.06em; }
.carte h3 { margin-top: var(--space-sm); font-size: 1.6rem; font-weight: 700; }
.carte p { margin-top: 0.6em; margin-bottom: var(--space-lg); font-size: 0.98rem; color: var(--color-text-muted); }
.carte-img {
  /* Les textes des trois cartes n'ont pas la même longueur : les photos
     s'alignent quand même en bas. */
  margin-top: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: zoom-in;
}
.carte-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.carte-img:hover img { transform: scale(1.05); }

/* ---------- La cave ---------- */
.cave { background: var(--color-bg-warm); padding: var(--space-2xl) 0; }
.cave-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.cave-photo {
  aspect-ratio: 4 / 3.2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 26px 60px -26px rgba(36, 31, 26, 0.5);
  cursor: zoom-in;
}
.cave-photo img { width: 100%; height: 100%; object-fit: cover; }
.puces { margin-top: var(--space-lg); display: grid; gap: 0.7em; }
.puces li { position: relative; padding-left: 1.7em; font-size: 0.98rem; }
.puces li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--color-leaf);
  rotate: 45deg;
}
.lien-fort {
  display: inline-flex; align-items: center; gap: 0.4em;
  margin-top: var(--space-lg);
  font-weight: 700; font-size: 0.95rem;
  color: var(--color-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 0.2em;
  transition: color var(--t-fast), gap var(--t-fast);
}
.lien-fort:hover { color: var(--color-accent-ink); gap: 0.7em; }

/* ---------- Bande photo ---------- */
.bande { overflow: hidden; }
.bande-img { height: clamp(260px, 42vw, 460px); overflow: hidden; cursor: zoom-in; }
.bande-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Images en parallaxe ----------
   Elles se déplacent de ±5% de leur hauteur dans un cadre qui, lui, ne bouge
   pas. Il leur faut de la marge en haut ET en bas, sinon le cadre se vide sur
   un bord en fin de course. 116% de hauteur remontée de 8% couvre toute la
   course, et le cadrage reste correct même sans JavaScript. */
.shot-main img[data-parallax],
.cave-photo img[data-parallax],
.bande-img img[data-parallax] {
  position: relative;
  top: -8%;
  height: 116%;
  will-change: transform;
}

/* ---------- Avis ---------- */
.avis { background: var(--color-deep); color: rgba(247, 234, 211, 0.86); padding: var(--space-2xl) 0; }
.avis h2 { color: #F7EAD3; }
.avis-head { max-width: 640px; margin-bottom: var(--space-xl); }
.avis-head .div-fan { color: var(--color-coral); }
.avis-head .note { margin-top: var(--space-lg); }
.avis-note { margin-top: 0.8em; font-size: 0.84rem; color: rgba(247, 234, 211, 0.72); }
.avis blockquote {
  background: rgba(247, 234, 211, 0.05);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.avis blockquote p { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.6; color: #F7EAD3; font-style: italic; }
.avis blockquote cite {
  display: block; margin-top: var(--space-md);
  font-style: normal; font-size: 0.85rem; font-weight: 700; color: rgba(247, 234, 211, 0.9);
}
.avis blockquote cite span { display: block; font-weight: 400; font-size: 0.76rem; color: rgba(247, 234, 211, 0.7); margin-top: 0.15em; }
/* L'avis le plus riche passe en tête, marqué d'un filet ambre. */
.avis .avis-star { margin-bottom: var(--space-lg); border-left: 4px solid var(--color-accent); }
.avis .avis-star p { font-size: clamp(1.05rem, 1.7vw, 1.3rem); }
.avis-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }

/* ---------- Venir ---------- */
.venir { padding: var(--space-2xl) 0; }
.venir-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.venir-tel {
  display: inline-block;
  margin-top: var(--space-lg);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  color: var(--color-deep);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: color var(--t-fast);
}
.venir-tel:hover { color: var(--color-accent-ink); }
.venir-meta { margin: var(--space-lg) 0 0; display: grid; gap: var(--space-md); }
.venir-meta > div { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.venir-meta dt { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); padding-top: 0.25em; }
.venir-meta dd { margin: 0; font-size: 0.98rem; }
.venir-liens { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-lg); }
.lien-ext { font-size: 0.9rem; font-weight: 700; color: var(--color-deep); text-decoration: none; border-bottom: 2px solid var(--color-border); padding-bottom: 0.2em; transition: border-color var(--t-fast), color var(--t-fast); }
.lien-ext:hover { color: var(--color-accent-ink); border-bottom-color: var(--color-accent); }

.venir-photo { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; cursor: zoom-in; }
.venir-photo img { width: 100%; height: 100%; object-fit: cover; }
.semaine {
  margin-top: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
}
.semaine li { display: flex; justify-content: space-between; gap: var(--space-md); padding: 0.55em 0; font-size: 0.92rem; border-bottom: 1px solid var(--color-border); }
.semaine li:last-child { border-bottom: 0; }
.semaine li span:first-child { color: var(--color-text-muted); }
.semaine li span:last-child { font-weight: 700; color: var(--color-ink); }

/* ---------- Footer ---------- */
.foot { background: var(--color-ink); color: rgba(239, 227, 206, 0.7); padding: var(--space-xl) 0 var(--space-lg); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.foot-brand { display: flex; align-items: center; gap: 0.7em; }
.foot-brand .brand-mark { width: 38px; height: 38px; }
.foot-brand strong { display: block; font-family: var(--font-display); font-size: 1.1rem; color: #EFE3CE; }
.foot-brand span { font-size: 0.82rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); }
.foot-links a { font-size: 0.88rem; text-decoration: none; transition: color var(--t-fast); }
.foot-links a:hover { color: var(--color-accent); }
.foot-cred { width: 100%; padding-top: var(--space-lg); border-top: 1px solid rgba(239, 227, 206, 0.14); font-size: 0.78rem; color: rgba(239, 227, 206, 0.6); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  background: rgba(20, 15, 10, 0.94);
  padding: var(--space-lg);
}
.lightbox.open { display: flex; }
.lb-img { max-width: min(1100px, 92vw); max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); }
.lb-close, .lb-nav {
  position: absolute;
  background: none; border: 0; cursor: pointer;
  color: #F7EAD3; font-size: 2.4rem; line-height: 1;
  padding: 0.3em 0.5em;
  transition: color var(--t-fast), transform var(--t-fast);
}
.lb-close { top: 0.4em; right: 0.6em; font-size: 2.8rem; }
.lb-prev { left: 0.3em; }
.lb-next { right: 0.3em; }
.lb-close:hover, .lb-nav:hover { color: var(--color-accent); transform: scale(1.15); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-media { margin-top: var(--space-xl); max-width: 520px; }
  .shot-inset { width: 33%; left: auto; right: -4%; bottom: -7%; }
  .rays { width: 130%; }
  .cave-grid, .venir-grid { grid-template-columns: 1fr; }
  .cave-photo { order: 2; }
  .trois { grid-template-columns: 1fr; }
  .carte { flex-direction: column; }
  .carte-img { aspect-ratio: 16 / 9; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { padding: 0 var(--space-md); }
  .nav-links { display: none; }
  .nav-in { height: 66px; }
  .maison, .cave, .avis, .venir { padding: clamp(3.5rem, 12vw, 5rem) 0; }
  .faits-in { grid-template-columns: repeat(2, 1fr); }
  .fait { border-left: 0; border-top: 1px solid var(--color-border-light); }
  .fait:nth-child(1), .fait:nth-child(2) { border-top: 0; }
  .fait:nth-child(even) { border-left: 1px solid var(--color-border-light); }
  .avis-grid { grid-template-columns: 1fr; }
  .venir-meta > div { grid-template-columns: 1fr; gap: 0.2em; }
  .hero-cta { gap: 0.7rem; }
  .btn { padding: 0.9em 1.3em; font-size: 0.9rem; }
  .lb-close, .lb-nav { font-size: 2rem; }
}

@media (max-width: 420px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .shot-inset { width: 40%; }
}

/* ==========================================================================
   Accessibilité : si l'utilisateur ne veut pas d'animation, il n'en a aucune.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .shot-main, .shot-inset { rotate: 0deg; }
}