/* ============================================================
   TIFLIS — Restaurant Géorgien, Montpellier
   Variant D — « Tavern Fresco » : chapitres cinématiques,
   fresques de supra en plein cadre, filets d'or, Playfair Display.
   ============================================================ */

:root{
  --wine:#4A121A;
  --wine-deep:#3a0d13;
  --black:#100C0B;
  --black-soft:#171110;
  --gold:#E0C088;
  --gold-soft:#c9a877;
  --gold-dim:rgba(224,192,136,.32);
  --parchment:#F0E2C4;
  --scarlet:#CC2125;
  --font-display:'Playfair Display', Georgia, serif;
  --font-body:'Source Serif 4', Georgia, serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}

body{
  background:var(--black);
  color:var(--parchment);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* film grain over everything, very quiet */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:900;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

::selection{background:var(--wine);color:var(--parchment);}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* logo.png ships with a transparent background (pre-processed) */
.logo-blend{}

/* ---------- ornamental frame + shared type ---------- */
.frame{
  display:inline-block;
  padding:.55em 1.6em;
  border-top:1px solid var(--gold-soft);
  border-bottom:1px solid var(--gold-soft);
  position:relative;
}
.frame::before,
.frame::after{
  content:"";
  position:absolute;
  left:50%;
  width:5px;height:5px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--gold-soft);
}
.frame::before{top:-3px;}
.frame::after{bottom:-3px;}

.chapter-num{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--gold);
  font-size:.95rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  margin-bottom:1.1rem;
  display:block;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}

.chapter-title{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  color:var(--gold);
  line-height:1.08;
  text-shadow:0 4px 24px rgba(0,0,0,.55);
}

.georgian-tag{
  font-family:var(--font-display);
  color:var(--gold-soft);
  font-size:.95rem;
  letter-spacing:.08em;
  opacity:.8;
}

/* gold hairline rule with diamond */
.rule{
  width:120px;height:1px;
  margin:2rem auto;
  background:linear-gradient(to right, transparent, var(--gold-soft), transparent);
  position:relative;
}
.rule::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:5px;height:5px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--gold-soft);
}

/* ================= HEADER ================= */
header.site-head{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:9px 44px;
  background:linear-gradient(to bottom, rgba(16,12,11,.65) 0%, rgba(16,12,11,0) 100%);
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
header.site-head.scrolled{
  background:rgba(16,12,11,.94);
  box-shadow:0 1px 0 var(--gold-dim), 0 10px 30px rgba(0,0,0,.45);
}
header .logo-link img{
  height:66px;
  width:auto;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
header nav.main-nav{display:flex;gap:2.4rem;align-items:center;}
header nav.main-nav a{
  font-family:var(--font-display);
  font-size:1.06rem;
  letter-spacing:.05em;
  color:var(--parchment);
  position:relative;
  padding-bottom:4px;
}
header nav.main-nav a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0;height:1px;
  background:var(--gold);
  transition:width .25s var(--ease);
}
header nav.main-nav a:hover::after{width:100%;}

.head-right{display:flex;align-items:center;gap:1.6rem;}

.lang-switch{
  display:flex;
  gap:.15rem;
  font-family:var(--font-display);
  font-size:.74rem;
  letter-spacing:.08em;
}
.lang-switch span,
.lang-switch a{
  padding:.25rem .45rem;
}
.lang-switch .active{
  color:var(--gold);
  border-bottom:1px solid var(--gold);
}
.lang-switch .soon{
  color:var(--parchment);
  opacity:.38;
  cursor:default;
}

.btn{
  font-family:var(--font-display);
  font-size:.95rem;
  letter-spacing:.04em;
  padding:.9rem 2rem;
  border-radius:2px;
  display:inline-block;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  border:1px solid transparent;
  text-align:center;
}
.btn-solid{
  background:var(--gold);
  color:var(--wine-deep);
  font-weight:600;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}
.btn-solid:hover{background:#eccf9c;transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.45);}
.btn-outline{
  border-color:var(--gold-soft);
  color:var(--parchment);
  background:rgba(16,12,11,.35);
}
.btn-outline:hover{border-color:var(--gold);background:rgba(224,192,136,.1);}
.btn-head{padding:.55rem 1.3rem;font-size:.85rem;}

@media (max-width:1080px){
  header nav.main-nav{display:none;}
}
@media (max-width:640px){
  header.site-head{padding:10px 16px;}
  header .logo-link img{height:44px;}
  .btn-head{display:none;}
}

/* ================= SCENE / CHAPTER SYSTEM =================
   Fresques plein cadre. La toile respire : plus de voile sombre
   uniforme — des dégradés localisés et des panneaux contenus. */
.scene{
  position:relative;
  min-height:100vh;
  width:100%;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:130px 24px 110px;
}
.scene-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.scene-bg img{
  width:100%;height:100%;
  object-fit:cover;
}
/* localized readability veils — never a flat dark wash */
.scene .veil{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.scene .veil-top{
  background:linear-gradient(to bottom, rgba(16,12,11,.55) 0%, rgba(16,12,11,0) 18%);
}
.scene .veil-bottom{
  background:linear-gradient(to top, rgba(16,12,11,.82) 0%, rgba(16,12,11,0) 26%);
}
.scene .veil-vignette{
  box-shadow:inset 0 0 180px rgba(16,12,11,.55);
}
.scene .scene-content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1180px;
  margin:0 auto;
}

/* contained text panel — the art stays visible around it */
.panel{
  background:rgba(16,12,11,.78);
  border:1px solid var(--gold-dim);
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 0 0 4px rgba(16,12,11,.35);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  position:relative;
}
.panel::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(224,192,136,.18);
  pointer-events:none;
}

/* ---- CHAPITRE I — hero ---- */
#chapitre-i{
  align-items:stretch;
}
#chapitre-i .scene-bg img{
  object-position:64% 14%;
}
/* headline lives on the dark left field of the painting; the
   gradient is local to that side so the khachapuri still glows */
#chapitre-i .veil-hero{
  background:linear-gradient(97deg,
    rgba(16,12,11,.92) 0%,
    rgba(16,12,11,.78) 26%,
    rgba(16,12,11,.42) 46%,
    rgba(16,12,11,.06) 66%,
    rgba(16,12,11,0) 78%);
}
#chapitre-i .scene-content{
  display:flex;
  align-items:center;
}
.hero-inner{
  max-width:600px;
  text-align:left;
  padding:2rem 0;
}
.hero-wordmark{
  height:150px;
  width:auto;
  margin:0 0 1.6rem -14px;
  filter:drop-shadow(0 6px 28px rgba(0,0,0,.65));
}
.hero-title{
  font-size:clamp(2.7rem, 5.4vw, 4.7rem);
  margin-bottom:1.4rem;
}
.hero-blurb{
  font-family:var(--font-body);
  color:var(--parchment);
  font-size:1.13rem;
  line-height:1.75;
  max-width:480px;
  margin:0 0 2.4rem;
  text-shadow:0 2px 14px rgba(0,0,0,.75);
}
.hero-blurb strong{color:var(--gold);font-weight:600;}

.cta-row{
  display:flex;
  gap:1.1rem;
  flex-wrap:wrap;
}

.scroll-cue{
  position:absolute;
  bottom:30px;left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:.65;
}
.scroll-cue .line{
  width:1px;height:38px;
  background:linear-gradient(to bottom, var(--gold-soft), transparent);
}
.scroll-cue span{
  font-family:var(--font-display);
  font-style:italic;
  font-size:.72rem;
  letter-spacing:.15em;
  color:var(--gold-soft);
  text-transform:uppercase;
}
@media (prefers-reduced-motion: no-preference){
  .scroll-cue .line{
    animation:cue 2.6s var(--ease) infinite;
    transform-origin:top;
  }
  @keyframes cue{
    0%{transform:scaleY(0);}
    45%{transform:scaleY(1);}
    100%{transform:scaleY(1);opacity:0;}
  }
}

@media (max-width:820px){
  /* on a phone the clear space is the bottom of the frame */
  #chapitre-i{align-items:flex-end;padding-bottom:120px;}
  #chapitre-i .scene-bg img{object-position:58% 30%;}
  #chapitre-i .veil-hero{
    background:linear-gradient(to top,
      rgba(16,12,11,.94) 0%,
      rgba(16,12,11,.8) 34%,
      rgba(16,12,11,.35) 58%,
      rgba(16,12,11,0) 78%);
  }
  .hero-inner{max-width:100%;}
  .hero-wordmark{height:104px;margin-left:-10px;}
}

/* ---- CHAPITRE II — la table ---- */
#chapitre-ii{
  padding-top:140px;
  padding-bottom:120px;
}
#chapitre-ii .scene-content{
  max-width:680px;
  text-align:center;
}
#chapitre-ii .veil-ii{
  background:
    linear-gradient(to bottom, rgba(16,12,11,.5) 0%, rgba(16,12,11,0) 20%),
    linear-gradient(to top, rgba(16,12,11,.62) 0%, rgba(16,12,11,0) 34%);
}

.ledger{
  margin-top:2.4rem;
  padding:2.4rem 2.2rem 2rem;
  text-align:left;
}
.ledger-item{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.9rem;
  padding:.9rem 0;
  border-bottom:1px dotted rgba(224,192,136,.28);
  transition:padding-left .3s var(--ease);
}
.ledger-item:hover{padding-left:.45rem;}
.ledger-item:last-of-type{border-bottom:none;}
.ledger-name{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  color:var(--gold);
  font-size:1.12rem;
  white-space:nowrap;
}
.ledger-desc{
  font-family:var(--font-body);
  font-size:.86rem;
  color:var(--parchment);
  opacity:.72;
  flex:1;
  padding:0 .8rem;
}
.ledger-price{
  font-family:var(--font-display);
  color:var(--parchment);
  font-size:1.02rem;
  white-space:nowrap;
}
.ledger-note{
  margin-top:1.4rem;
  font-size:.82rem;
  font-style:italic;
  opacity:.6;
  text-align:center;
}
.ledger-cta{
  margin-top:1.5rem;
  text-align:center;
}

@media (max-width:640px){
  .ledger{padding:1.7rem 1.2rem 1.4rem;}
  .ledger-item{flex-wrap:wrap;row-gap:.15rem;}
  .ledger-desc{flex-basis:100%;order:3;padding:0;font-size:.82rem;}
  .ledger-name{white-space:normal;}
}

/* ---- LES ICÔNES — triptyque de fresques ---- */
#icones{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(74,18,26,.35) 0%, rgba(16,12,11,0) 60%),
    var(--black);
  padding:110px 24px;
  text-align:center;
}
.triptych{
  max-width:1060px;
  margin:3rem auto 0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2.2rem;
}
.icon-frame{
  position:relative;
}
.icon-frame .art{
  border:1px solid var(--gold-dim);
  outline:1px solid rgba(224,192,136,.14);
  outline-offset:7px;
  padding:10px;
  background:linear-gradient(160deg, #1c1512, #0d0a09);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.icon-frame:hover .art{
  transform:translateY(-6px);
  box-shadow:0 34px 70px rgba(0,0,0,.65);
}
.icon-frame img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  filter:saturate(.98);
}
.icon-frame figcaption{
  margin-top:1.1rem;
  font-family:var(--font-display);
  font-style:italic;
  color:var(--gold);
  font-size:1.06rem;
  letter-spacing:.04em;
}
.icon-frame figcaption small{
  display:block;
  font-size:.78rem;
  color:var(--parchment);
  opacity:.6;
  letter-spacing:.02em;
  margin-top:.2rem;
}
@media (max-width:760px){
  .triptych{grid-template-columns:1fr;max-width:420px;gap:2.6rem;}
}

/* ---- CHAPITRE VI — la cave ---- */
#chapitre-vi .scene-bg img{object-position:center 38%;}
#chapitre-vi .veil-iii{
  background:
    linear-gradient(to bottom, rgba(16,12,11,.5) 0%, rgba(16,12,11,0) 16%),
    linear-gradient(to top, rgba(58,13,19,.55) 0%, rgba(16,12,11,0) 30%);
}
.cave-panel{
  max-width:520px;
  padding:2.8rem 2.6rem 2.4rem;
  text-align:center;
}
.cave-eyebrow{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--scarlet);
  letter-spacing:.06em;
  font-size:1.05rem;
  margin-bottom:.6rem;
}
.cave-body{
  font-size:1.04rem;
  line-height:1.8;
  color:var(--parchment);
  margin-top:1.4rem;
  text-align:left;
}
.cave-body strong{color:var(--gold);font-weight:600;}
.cave-list{
  margin-top:1.8rem;
  border-top:1px solid rgba(224,192,136,.25);
  padding-top:.4rem;
  text-align:left;
}
.cave-item{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  padding:.7rem 0;
  border-bottom:1px dotted rgba(224,192,136,.22);
}
.cave-item:last-child{border-bottom:none;}
.cave-item .n{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--gold);
  font-size:.99rem;
}
.cave-item .p{
  font-size:.85rem;
  opacity:.85;
  white-space:nowrap;
  font-family:var(--font-display);
}
@media (max-width:900px){
  .cave-panel{padding:2.2rem 1.5rem 1.9rem;}
}

/* ---- CHAPITRE IV — la ville, pellicule ---- */
#chapitre-iv{
  background:var(--black);
  padding:110px 0 0;
}
#chapitre-iv .chapter-head{
  text-align:center;
  padding:0 24px;
  margin-bottom:3.2rem;
}
.filmstrip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2px;
  background:var(--wine-deep);
}
.film-frame{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  margin:0;
}
.film-frame img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease), filter .7s var(--ease);
  filter:saturate(.9) contrast(1.02) sepia(.08);
}
.film-frame:hover img{transform:scale(1.05);filter:saturate(1.04) contrast(1.04) sepia(0);}
.film-frame figcaption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:1rem 1.1rem .85rem;
  background:linear-gradient(to top, rgba(16,12,11,.9), transparent);
  font-family:var(--font-display);
  font-style:italic;
  font-size:.94rem;
  color:var(--gold);
  letter-spacing:.02em;
}
@media (max-width:900px){
  .filmstrip{grid-template-columns:repeat(2, 1fr);}
}

/* ---- LA MAISON — entracte ---- */
#maison{
  background:linear-gradient(180deg, var(--black) 0%, #150e0d 50%, var(--black) 100%);
  padding:110px 24px;
  text-align:center;
}
.maison-inner{max-width:640px;margin:0 auto;}
.maison-inner p{
  font-size:1.06rem;
  line-height:1.85;
  opacity:.92;
}
.maison-inner p + p{margin-top:1.4rem;}
.maison-inner p strong{color:var(--gold);font-weight:600;}

.visite-card{
  max-width:940px;
  margin:0 auto;
  text-align:center;
}
.visite-grid{
  margin-top:3rem;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2.2rem;
  text-align:left;
}
.visite-block h3{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--gold);
  font-size:1.05rem;
  margin-bottom:.7rem;
  letter-spacing:.03em;
  padding-bottom:.55rem;
  border-bottom:1px solid rgba(224,192,136,.25);
}
.visite-block p{
  font-size:.97rem;
  color:var(--parchment);
  opacity:.9;
}
.visite-block a.tel{
  color:var(--gold);
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.2rem;
  white-space:nowrap;
}
.visite-block a.mail{
  font-size:.92rem;
  border-bottom:1px dotted var(--gold-dim);
}
.visite-block a.mail:hover,
.visite-block a.soc:hover{color:var(--gold);}
.visite-block a.soc{
  display:block;
  font-size:.95rem;
  padding:.15rem 0;
  transition:color .2s var(--ease);
}
.visite-note{
  display:block;
  font-size:.8rem;
  opacity:.6;
  margin-top:.5rem;
  font-style:italic;
}
.map-frame{
  margin-top:3.2rem;
  padding:9px;
  background:linear-gradient(160deg, #1c1512, #0d0a09);
  border:1px solid var(--gold-dim);
  outline:1px solid rgba(224,192,136,.14);
  outline-offset:6px;
  box-shadow:0 28px 70px rgba(0,0,0,.5);
}
.map-frame iframe{
  display:block;
  width:100%;
  height:380px;
  border:0;
  filter:grayscale(.35) sepia(.14) contrast(1.02);
}
@media (max-width:900px){
  .visite-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .visite-grid{grid-template-columns:1fr;gap:1.9rem;}
  .map-frame iframe{height:300px;}
}

/* ================= FOOTER ================= */
footer{
  background:var(--black);
  border-top:1px solid rgba(224,192,136,.2);
  padding:56px 24px 110px;
  text-align:center;
}
footer .foot-logo{
  height:58px;
  width:auto;
  margin:0 auto 1.3rem;
  opacity:.92;
}
footer .foot-addr{
  font-size:.9rem;
  color:var(--parchment);
  opacity:.72;
  line-height:1.9;
}
footer .foot-addr a:hover{color:var(--gold);}
footer .foot-links{
  margin-top:1.2rem;
  display:flex;
  gap:1.7rem;
  justify-content:center;
  flex-wrap:wrap;
  font-family:var(--font-display);
  font-size:.86rem;
}
footer .foot-links a{opacity:.8;transition:color .2s var(--ease), opacity .2s var(--ease);}
footer .foot-links a:hover{opacity:1;color:var(--gold);}
footer .foot-copy{
  margin-top:2.2rem;
  font-size:.72rem;
  opacity:.4;
  letter-spacing:.05em;
}

/* ================= MOBILE STICKY BAR ================= */
.mobile-bar{display:none;}
@media (max-width:768px){
  .mobile-bar{
    display:flex;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:200;
    background:rgba(58,13,19,.97);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    border-top:1px solid rgba(224,192,136,.4);
  }
  .mobile-bar a{
    flex:1;
    text-align:center;
    padding:15px 8px calc(15px + env(safe-area-inset-bottom, 0px));
    font-family:var(--font-display);
    font-size:.95rem;
    letter-spacing:.03em;
    color:var(--gold);
    border-right:1px solid rgba(224,192,136,.2);
  }
  .mobile-bar a:last-child{
    border-right:none;
    background:var(--gold);
    color:var(--wine-deep);
    font-weight:600;
  }
}

/* ================= MOTION : reveals ================= */
[data-reveal]{
  opacity:1;
  transform:none;
}
.js [data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d, 0ms);
}
.js [data-reveal].in{
  opacity:1;
  transform:none;
}

/* orchestrated hero entrance — transitions, so the final state is
   guaranteed even if the animation itself is skipped */
.js .hero-inner > *{
  opacity:0;
  transform:translateY(22px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.js .hero-inner > *:nth-child(1){transition-delay:.1s;}
.js .hero-inner > *:nth-child(2){transition-delay:.28s;}
.js .hero-inner > *:nth-child(3){transition-delay:.42s;}
.js .hero-inner > *:nth-child(4){transition-delay:.58s;}
.js .hero-inner > *:nth-child(5){transition-delay:.74s;}
.js.loaded .hero-inner > *{
  opacity:1;
  transform:none;
}
.js .scene-bg img{
  transform:scale(1.04);
  transition:transform 2.4s var(--ease);
}
.js.loaded #chapitre-i .scene-bg img{transform:scale(1);}

@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none;}
  .js .hero-inner > *{opacity:1;transform:none;transition:none !important;animation:none !important;}
  .js .scene-bg img{transform:none;transition:none;}
  .film-frame img, .icon-frame .art, .btn, .ledger-item{transition:none !important;}
}

/* ---- CHAPITRE II — la supra (panel over feast fresco) ---- */
#chapitre-ii .scene-bg img{object-position:center 42%;}
#chapitre-ii .veil-vignette{box-shadow:inset 0 0 220px rgba(16,12,11,.6);}
.supra-panel{
  max-width:640px;
  margin:0 auto;
  padding:2.8rem 2.6rem 2.4rem;
  text-align:center;
}
.supra-body{
  font-size:1.05rem;
  line-height:1.85;
  color:var(--parchment);
  margin-top:1.3rem;
  text-align:left;
}
.supra-toast{
  margin-top:1.1rem;
  font-family:var(--font-display);
  font-style:italic;
  color:var(--gold);
  font-size:1.05rem;
  text-align:left;
}
.supra-details{
  display:flex;
  gap:1.4rem;
  justify-content:center;
  margin-top:2rem;
}
.supra-detail{
  width:180px;
}
.supra-detail picture,
.supra-detail img{
  border:1px solid var(--gold-dim);
  outline:1px solid rgba(224,192,136,.12);
  outline-offset:5px;
}
.supra-detail img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.supra-detail figcaption{
  margin-top:.7rem;
  font-family:var(--font-display);
  font-style:italic;
  font-size:.8rem;
  color:var(--gold-soft);
  text-align:center;
}
@media (max-width:640px){
  .supra-panel{padding:2rem 1.4rem 1.7rem;}
  .supra-details{gap:1rem;}
  .supra-detail{width:130px;}
}

/* ---- CHAPITRE III — le geste ---- */
#chapitre-iii{
  background:var(--black);
  padding:110px 24px;
}
#chapitre-iii .chapter-head{text-align:center;margin-bottom:3.6rem;}
.geste-wrap{max-width:1080px;margin:0 auto;}
.geste-row{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:3.4rem;
  align-items:center;
}
.geste-row + .geste-row{margin-top:5.5rem;}
.geste-flip{grid-template-columns:1fr 320px;}
.geste-flip .geste-figure{order:2;}
.geste-figure{
  border:1px solid var(--gold-dim);
  outline:1px solid rgba(224,192,136,.14);
  outline-offset:8px;
  padding:9px;
  background:linear-gradient(160deg, #1c1512, #0d0a09);
  box-shadow:0 26px 60px rgba(0,0,0,.55);
}
.geste-figure img{width:100%;object-fit:cover;}
.geste-copy{max-width:480px;}
.geste-num{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--scarlet);
  font-size:1.4rem;
  display:block;
  margin-bottom:.5rem;
}
.geste-copy h3{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  color:var(--gold);
  font-size:clamp(1.5rem, 2.6vw, 1.9rem);
  margin-bottom:1rem;
  line-height:1.2;
}
.geste-copy p{
  font-size:1rem;
  line-height:1.8;
  color:var(--parchment);
  opacity:.92;
}
.geste-law{
  margin-top:1rem;
  font-family:var(--font-display);
  font-style:italic;
  color:var(--gold-soft);
  opacity:1 !important;
}
@media (max-width:900px){
  .geste-row, .geste-flip{grid-template-columns:1fr;gap:2rem;}
  .geste-flip .geste-figure{order:0;}
  .geste-figure{max-width:300px;margin:0 auto;}
  .geste-row + .geste-row{margin-top:3.6rem;}
}

/* ---- CHAPITRE IV — la carte ---- */
.carte-section{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(74,18,26,.28) 0%, rgba(16,12,11,0) 55%),
    var(--black);
  padding:110px 24px 90px;
}
.carte-section .chapter-head{text-align:center;margin-bottom:3rem;}
.carte-intro{
  max-width:560px;
  margin:1rem auto 0;
  font-size:1rem;
  opacity:.78;
  line-height:1.7;
}
.carte-wrap{max-width:980px;margin:0 auto;}
.carte-group{margin-top:4.6rem;}
.carte-group:first-of-type{margin-top:0;}
.carte-group-head{
  display:flex;
  align-items:baseline;
  gap:1rem;
  margin-bottom:.3rem;
  border-bottom:1px solid rgba(224,192,136,.25);
  padding-bottom:.6rem;
}
.carte-group-head h3{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  color:var(--gold);
  font-size:clamp(1.4rem, 2.4vw, 1.8rem);
  white-space:nowrap;
}
.carte-group-note{
  font-size:.82rem;
  font-style:italic;
  color:var(--parchment);
  opacity:.62;
  white-space:nowrap;
}
.carte-split{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:2.8rem;
  align-items:start;
  margin-top:1.6rem;
}
.carte-split.flip{grid-template-columns:300px 1fr;}
.carte-split.flip .carte-rows{order:2;}
.carte-rows{margin-top:1.2rem;}
.carte-rows-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 2.4rem;
}
.crow{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:1.1rem;
  align-items:center;
  padding:.95rem 0;
  border-bottom:1px dotted rgba(224,192,136,.22);
}
.carte-rows-grid .crow{border-bottom:1px dotted rgba(224,192,136,.22);}
.crow.no-vig{grid-template-columns:1fr;}
.crow:last-child{border-bottom:none;}
.crow-vig{
  width:64px;height:64px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--gold-dim);
  flex-shrink:0;
}
.crow-vig img{width:100%;height:100%;object-fit:cover;}
.crow-line{
  display:flex;
  align-items:baseline;
  gap:.8rem;
}
.crow-name{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  color:var(--gold);
  font-size:1.08rem;
  white-space:nowrap;
}
.crow-dots{
  flex:1;
  min-width:16px;
  border-bottom:1px dotted rgba(224,192,136,.32);
  margin-bottom:5px;
}
.crow-price{
  font-family:var(--font-display);
  color:var(--parchment);
  font-size:.98rem;
  white-space:nowrap;
}
.crow-price em{
  font-family:var(--font-body);
  font-size:.72rem;
  font-style:italic;
  opacity:.7;
}
.crow-desc{
  margin-top:.25rem;
  font-size:.86rem;
  font-style:italic;
  color:var(--parchment);
  opacity:.68;
  line-height:1.6;
  max-width:56ch;
}
.carte-aside{margin:0;}
.carte-aside picture,
.carte-aside img{
  border:1px solid var(--gold-dim);
  outline:1px solid rgba(224,192,136,.12);
  outline-offset:6px;
}
.carte-aside img{width:100%;object-fit:cover;}
.carte-aside figcaption{
  margin-top:.8rem;
  font-family:var(--font-display);
  font-style:italic;
  font-size:.85rem;
  color:var(--gold-soft);
  text-align:center;
}
.carte-footnote{
  margin-top:4rem;
  text-align:center;
  padding-top:2.2rem;
  border-top:1px solid rgba(224,192,136,.2);
}
.carte-footnote p{
  font-size:.92rem;
  font-style:italic;
  opacity:.65;
  margin-bottom:1.2rem;
}
@media (max-width:900px){
  .carte-split, .carte-split.flip{grid-template-columns:1fr;gap:1.6rem;}
  .carte-split.flip .carte-aside{order:-1;}
  .carte-aside{max-width:320px;margin:0 auto;}
  .carte-rows-grid{grid-template-columns:1fr;}
  .carte-group{margin-top:3.4rem;}
}

/* ---- CHAPITRE VI — cave grid (bottles) ---- */
.cave-grid{
  margin-top:3.4rem;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.8rem;
  align-items:end;
}
.cave-card{margin:0;}
.cave-card .pframe{
  border:1px solid var(--gold-dim);
  outline:1px solid rgba(224,192,136,.14);
  outline-offset:6px;
  padding:8px;
  background:linear-gradient(160deg, #1c1512, #0d0a09);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.cave-card img{width:100%;object-fit:cover;}
.cave-card figcaption{
  margin-top:0;
  padding:.85rem .7rem 1rem;
  background:rgba(16,12,11,.86);
  border:1px solid var(--gold-dim);
  border-top:0;
  text-align:center;
}
.cave-name{
  display:block;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  color:var(--gold);
  font-size:1rem;
  line-height:1.25;
}
.cave-type{
  display:block;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--parchment);
  opacity:.6;
  margin-top:.35rem;
}
.cave-sense{
  display:block;
  font-size:.82rem;
  font-style:italic;
  opacity:.75;
  margin-top:.35rem;
}
@media (max-width:900px){
  .cave-grid{grid-template-columns:repeat(2, 1fr);gap:1.4rem;}
}
@media (max-width:560px){
  .cave-grid{grid-template-columns:1fr;max-width:280px;margin-left:auto;margin-right:auto;}
}

/* ---- CHAPITRE VII — nos murs, mosaïque mixte ---- */
#chapitre-vii{
  background:var(--black);
  padding:110px 0 100px;
}
#chapitre-vii .chapter-head{
  text-align:center;
  padding:0 24px;
  margin-bottom:3.2rem;
}
.murs-mosaic{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
  columns:4;
  column-gap:1.2rem;
}
.murs-item{
  break-inside:avoid;
  margin:0 0 1.2rem;
  position:relative;
}
.murs-item img{
  width:100%;
  height:auto;
  display:block;
  filter:saturate(.92) brightness(.9);
  transition:filter .5s var(--ease), transform .6s var(--ease);
}
.murs-item:hover img{filter:saturate(1) brightness(1);transform:scale(1.02);}
.murs-item figcaption{
  margin-top:.6rem;
  font-family:var(--font-display);
  font-style:italic;
  font-size:.82rem;
  color:var(--gold-soft);
}
.murs-item.m-wide{
  column-span:all;
  margin-bottom:2.4rem;
}
@media (max-width:1024px){
  .murs-mosaic{columns:3;}
}
@media (max-width:760px){
  .murs-mosaic{columns:2;}
}

/* ---- LA MAISON — portrait + texte ---- */
#maison{text-align:left;}
.maison-wrap{
  max-width:980px;
  margin:0 auto;
  display:grid;
  grid-template-columns:320px 1fr;
  gap:3.6rem;
  align-items:center;
  text-align:left;
}
.maison-figure{
  border:1px solid var(--gold-dim);
  outline:1px solid rgba(224,192,136,.14);
  outline-offset:8px;
  padding:9px;
  background:linear-gradient(160deg, #1c1512, #0d0a09);
  box-shadow:0 26px 60px rgba(0,0,0,.55);
}
.maison-figure img{width:100%;object-fit:cover;}
.maison-inner{max-width:none;margin:0;}
.maison-inner .rule{margin:2rem 0;}
@media (max-width:900px){
  #maison{text-align:center;}
  .maison-wrap{grid-template-columns:1fr;gap:2.2rem;text-align:center;}
  .maison-figure{max-width:280px;margin:0 auto;}
  .maison-inner{text-align:center;}
}

/* responsive type scale */
@media (max-width:640px){
  .scene{padding:110px 18px 90px;}
  .chapter-title{font-size:clamp(2rem, 8.6vw, 2.7rem);}
  #chapitre-iv{padding-top:90px;}
  #icones, #maison{padding:90px 18px;}
}