/* ============================================================================
   Kekchoz — site vitrine v4 · « La soirée »
   Le site se lit comme le film : une soirée au bar, racontée heure par heure.
   Sources d'inspiration (pas d'autres sites web) : les horodatages des films de
   Wong Kar-wai, les intertitres du cinéma muet, les génériques de Saul Bass,
   « Nighthawks » de Hopper (un bar éclairé dans la nuit), la lampe de banquier
   verte et le guéridon de bistrot en marbre cerclé de laiton du film Kekchoz.
   Pour les bars, la page passe au JOUR : « le lendemain matin », le papier, le
   ticket de caisse.
   Deux polices seulement : Cormorant Garamond (titres) et Jost (texte).
   ========================================================================== */

:root {
  /* La nuit */
  --nuit:      #120D09;           /* palette Kekchoz : Nuit */
  --nuit-2:    #1D1511;           /* Brun */
  --nuit-3:    #1e1710;
  --fumee:     rgba(243, 233, 214, .08);
  --trait:     rgba(243, 233, 214, .14);
  /* La lumière */
  --creme:     #F6EBDD;           /* Crème */
  --creme-2:   #d9ccb4;
  --gris:      #a8997f;
  --ambre:     #E0A05A;           /* Doré */
  --ambre-2:   #f2c48a;
  --cuivre:    #DE6A35;           /* Orange Kekchoz */
  --cuivre-dk: #A8501E;
  --lampe:     #2C4327;           /* Vert bouteille : la lampe de banquier */
  --lampe-lt:  #5c7c4d;
  --laiton:    #DE9A57;           /* Cuivre */
  /* Le jour (Pour les bars) */
  --papier:    #f6efe2;
  --papier-2:  #ece1cd;
  --encre:     #1D1511;
  --encre-2:   #6b5440;
  --rouge:     #b03a2e;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --large: 1180px;
  --rayon: 18px;
  /* Lumière de la lampe : suit la souris (site.js) ; centrée par défaut. */
  --lx: 50%; --ly: 30%;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--nuit); color: var(--creme);
  font: 400 1.05rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--ambre-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--creme); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.05; margin: 0 0 .5em; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--ambre); outline-offset: 3px; }
::selection { background: var(--cuivre); color: var(--creme); }
.wrap { width: min(var(--large), 100% - clamp(32px, 8vw, 96px)); margin-inline: auto; }
.etroit { max-width: 46rem; }
.centre { text-align: center; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Le grain de pellicule, par-dessus tout, très léger. */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-4%, 3%); } 66% { transform: translate(3%, -5%); } 100% { transform: translate(-2%, 2%); } }

/* La lampe : un halo chaud qui suit la souris sur les sections de nuit. */
.lampe { position: relative; isolation: isolate; }
.lampe::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 420px at var(--lx) var(--ly), rgba(232, 162, 90, .13), transparent 70%);
  transition: background .2s linear;
}

/* Le bokeh des bouteilles du comptoir (fond des sections de nuit). */
.bokeh { position: relative; isolation: isolate; }
.bokeh::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .55;
  background:
    radial-gradient(14px 14px at 8% 12%, rgba(242,196,138,.45), transparent 70%),
    radial-gradient(22px 22px at 19% 6%, rgba(242,196,138,.25), transparent 70%),
    radial-gradient(10px 10px at 33% 15%, rgba(242,196,138,.4), transparent 70%),
    radial-gradient(26px 26px at 47% 7%, rgba(243,233,214,.18), transparent 70%),
    radial-gradient(12px 12px at 61% 13%, rgba(242,196,138,.4), transparent 70%),
    radial-gradient(18px 18px at 74% 5%, rgba(242,196,138,.3), transparent 70%),
    radial-gradient(9px 9px at 86% 14%, rgba(243,233,214,.35), transparent 70%),
    radial-gradient(20px 20px at 95% 8%, rgba(242,196,138,.22), transparent 70%);
}

/* ── En-tête ──────────────────────────────────────────────────────────────── */
.entete { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .4s ease, backdrop-filter .4s ease; }
.entete.colle { background: rgba(13, 10, 7, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--fumee); }
.entete .wrap { display: flex; align-items: center; gap: 22px; min-height: 68px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo img { height: 26px; width: auto; }
.horloge {
  font: 500 .74rem/1 var(--sans); letter-spacing: .26em; color: var(--ambre); text-transform: uppercase;
  border: 1px solid rgba(232,162,90,.35); border-radius: 999px; padding: .55em .95em .5em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.menu { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); list-style: none; padding: 0; margin-block: 0; }
.menu a { color: var(--creme-2); text-decoration: none; font-size: .92rem; letter-spacing: .02em; position: relative; padding-block: 6px; }
.menu a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--ambre); transition: right .3s ease; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--creme); }
.menu a:hover::after, .menu a[aria-current="page"]::after { right: 0; }
.menu .cta a { color: var(--nuit); background: var(--ambre-2); border-radius: 999px; padding: .62em 1.15em; font-weight: 500; }
.menu .cta a::after { display: none; }
.menu .cta a:hover { background: var(--creme); color: var(--nuit); }
.burger { display: none; margin-left: auto; background: none; border: 0; padding: 12px; cursor: pointer; }
.burger span { display: block; width: 24px; height: 1.5px; background: var(--creme); margin: 6px 0; transition: transform .3s, opacity .3s; }
@media (max-width: 900px) {
  .horloge { display: none; }
  .burger { display: block; }
  .menu {
    position: fixed; inset: 68px 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(13,10,7,.97); padding: 12px 24px 26px; border-bottom: 1px solid var(--fumee);
    transform: translateY(-120%); transition: transform .35s ease; margin: 0;
  }
  .entete[data-ouvert="true"] .menu { transform: none; }
  .menu a { display: block; padding: 14px 0; font-size: 1.1rem; border-bottom: 1px solid var(--fumee); }
  .menu a::after { display: none; }
  .menu .cta a { text-align: center; margin-top: 16px; border: 0; padding: 1em; }
  .entete[data-ouvert="true"] .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .entete[data-ouvert="true"] .burger span:nth-child(2) { opacity: 0; }
  .entete[data-ouvert="true"] .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

/* ── Le film en ouverture (format cinéma) ─────────────────────────────────── */
.ecran { position: relative; min-height: 100svh; display: grid; place-items: center; background: #000; overflow: hidden; }
/* Téléphone en portrait : le film garde son format, sans grands aplats noirs autour. */
@media (orientation: portrait) { .ecran { min-height: 0; padding: 68px 0 76px; } }
.ecran .cadre { position: relative; width: min(100vw, 177.78svh); aspect-ratio: 16 / 9; }
/* Téléphone en portrait : la version verticale du film (9:16), à la hauteur de l'écran. */
@media (orientation: portrait) { .ecran .cadre { width: min(100vw, 56.25svh); aspect-ratio: 9 / 16; } }
.ecran .film, .ecran .affiche { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: #000; }
.ecran .affiche { z-index: 1; }
.ecran .affiche { object-fit: cover; }
.ecran .affiche[hidden] { display: none; }
.ecran-bas {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px clamp(16px, 4vw, 40px) 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
}
.ecran-bas .suite { font: 500 .72rem var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--creme-2); display: flex; align-items: center; gap: 12px; }
.ecran-bas .suite::before { content: ""; width: 1px; height: 34px; background: linear-gradient(var(--ambre), transparent); animation: descente 2.2s ease-in-out infinite; }
@keyframes descente { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.bouton-film {
  font: 500 .78rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--creme);
  background: rgba(13,10,7,.55); border: 1px solid rgba(243,233,214,.35); border-radius: 999px; padding: .85em 1.3em; cursor: pointer;
  display: inline-flex; align-items: center; gap: .7em; min-height: 44px;
}
.bouton-film:hover { border-color: var(--ambre); color: var(--ambre-2); }

/* ── Chapitres : l'heure, puis la scène ───────────────────────────────────── */
.chapitre { padding-block: clamp(90px, 14vw, 180px); overflow-x: clip; }
.heure {
  display: block; margin: 0 0 clamp(26px, 4vw, 44px);
  font: 500 .8rem/1.8 var(--sans); letter-spacing: .38em; text-transform: uppercase; color: var(--ambre);
}
/* Les filets de part et d'autre : en ligne, pour que le texte puisse passer à la ligne sur téléphone. */
.heure::after { content: ""; display: inline-block; vertical-align: middle; width: clamp(40px, 8vw, 120px); height: 1px; margin-left: 18px; background: linear-gradient(90deg, rgba(232,162,90,.6), transparent); }
.centre .heure::before { content: ""; display: inline-block; vertical-align: middle; width: clamp(40px, 8vw, 120px); height: 1px; margin-right: 18px; background: linear-gradient(270deg, rgba(232,162,90,.6), transparent); }
@media (max-width: 520px) { .heure { letter-spacing: .26em; } .heure::after, .centre .heure::before { display: none; } }
.heure b { font-weight: 500; color: var(--creme); letter-spacing: .3em; }

/* Les intertitres : la phrase seule, très grande. */
.intertitre { font-family: var(--serif); font-style: italic; font-weight: 500; line-height: 1.02; margin: 0;
  font-size: clamp(2.6rem, 8.2vw, 7rem); letter-spacing: -.01em; }
.intertitre .ambre { color: var(--ambre); }
.intertitre .petit { display: block; font-size: .42em; font-style: normal; font-family: var(--sans); font-weight: 300; letter-spacing: .02em; color: var(--creme-2); margin-top: .7em; line-height: 1.3; }
.titre { font-size: clamp(2.1rem, 5.2vw, 4.2rem); }
.titre em { color: var(--ambre); }
.chapo { font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: var(--creme-2); max-width: 42ch; }
.centre .chapo { margin-inline: auto; }
.ornement { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--laiton); margin: 26px 0; }
.ornement::before, .ornement::after { content: ""; width: 90px; height: 1px; background: linear-gradient(90deg, transparent, var(--laiton)); }
.ornement::after { transform: scaleX(-1); }

/* Le dialogue d'ouverture : « On fait quoi ? » — « On fait Kekchoz ? » */
.dialogue { display: grid; gap: clamp(8px, 2vw, 20px); }
.dialogue .replique { font-family: var(--serif); font-style: italic; font-size: clamp(2.4rem, 7.4vw, 6.2rem); line-height: 1; }
.dialogue .replique:nth-child(2) { justify-self: end; color: var(--ambre); }
.dialogue .didascalie { font: 300 .95rem var(--sans); color: var(--gris); letter-spacing: .04em; }

/* ── La table vue de dessus : le guéridon de marbre cerclé de laiton ───────── */
.table-scene { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
@media (max-width: 880px) { .table-scene { grid-template-columns: 1fr; } }
.gueridon { position: relative; aspect-ratio: 1; max-width: 520px; margin-inline: auto; width: 100%; }
.gueridon .plateau {
  position: absolute; inset: 6%; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 7px var(--laiton), 0 0 0 9px #6e5524, 0 40px 80px rgba(0,0,0,.6), 0 0 120px rgba(232,162,90,.14);
}
.gueridon .plateau img { width: 100%; height: 100%; object-fit: cover; }
.gueridon .halo { position: absolute; inset: -14%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232,162,90,.22), transparent 72%); }
.legende-table { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.legende-table li { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: baseline; }
.legende-table .n { font-family: var(--serif); font-style: italic; font-size: 2.2rem; color: var(--ambre); line-height: 1; }
.legende-table b { display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 600; line-height: 1.15; }
.legende-table span { color: var(--creme-2); font-size: .98rem; }

/* ── Au menu ce soir : la distribution, comme un générique ────────────────── */
.distribution { display: grid; gap: clamp(56px, 9vw, 110px); }
.role { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(26px, 5vw, 70px); align-items: center; }
.role:nth-child(even) { grid-template-columns: 1fr 1.15fr; }
.role:nth-child(even) .photogramme { order: 2; }
@media (max-width: 880px) { .role, .role:nth-child(even) { grid-template-columns: 1fr; } .role:nth-child(even) .photogramme { order: 0; } }
.photogramme { position: relative; margin: 0; background: #000; padding: 4.2% 0; border-radius: 4px; box-shadow: 0 30px 70px rgba(0,0,0,.6); }
.photogramme img { width: 100%; height: auto; aspect-ratio: 1024 / 600; object-fit: cover; }
.photogramme::before, .photogramme::after { /* perforations de pellicule */
  content: ""; position: absolute; left: 3%; right: 3%; height: 2.4%;
  background: repeating-linear-gradient(90deg, rgba(243,233,214,.22) 0 2.2%, transparent 2.2% 5%);
  border-radius: 1px;
}
.photogramme::before { top: 1%; }
.photogramme::after { bottom: 1%; }
.photogramme figcaption { position: absolute; right: 12px; bottom: 9%; font: 500 .66rem var(--sans); letter-spacing: .28em; color: rgba(243,233,214,.7); text-transform: uppercase; background: rgba(0,0,0,.55); padding: .4em .7em; }
.dans-le-role { font: 500 .78rem var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--gris); margin: 0 0 .8em; }
.role h3 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 600; margin: 0 0 .25em; line-height: .95; }
.role .replique { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.25; color: var(--ambre-2); margin: 0 0 .7em; }
.role .fiche { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .9rem; color: var(--creme-2); list-style: none; padding: 0; margin: 0; }
.role .fiche li { display: inline-flex; align-items: center; gap: 8px; }
.role .fiche li + li::before { content: "·"; color: var(--laiton); margin-right: 10px; }
.jetons { font-family: var(--serif); font-style: italic; color: var(--ambre); }

/* ── Encore une ? Les chiffres, à la craie du tableau des scores ───────────── */
.addition { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--trait); }
.addition > div { padding: clamp(28px, 5vw, 54px) clamp(10px, 2vw, 26px); text-align: center; }
.addition > div + div { border-left: 1px solid var(--trait); }
.addition .chiffre { font-family: var(--serif); font-weight: 600; font-size: clamp(3rem, 7vw, 5.6rem); line-height: .9; color: var(--creme); }
.addition .chiffre small { font-size: .45em; color: var(--ambre); }
.addition .quoi { margin-top: .9rem; color: var(--creme-2); font-size: .95rem; max-width: 22ch; margin-inline: auto; }
@media (max-width: 680px) { .addition { grid-template-columns: 1fr; } .addition > div + div { border-left: 0; border-top: 1px solid var(--trait); } }
.en-direct { text-align: center; color: var(--creme-2); margin: 26px 0 0; }
.en-direct b { font-family: var(--serif); font-size: 1.5rem; color: var(--ambre); }
.point-vert { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #7fb35a; margin-right: .6em; vertical-align: middle; box-shadow: 0 0 12px #7fb35a; animation: battement 2s infinite; }
@keyframes battement { 50% { opacity: .45; } }

/* ── Dernière tournée : deux portes ───────────────────────────────────────── */
.portes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 28px); }
@media (max-width: 760px) { .portes { grid-template-columns: 1fr; } }
.porte {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 360px;
  padding: clamp(26px, 4vw, 42px); border-radius: var(--rayon); text-decoration: none; color: var(--creme); overflow: hidden;
  border: 1px solid var(--trait); background: var(--nuit-2); transition: transform .35s ease, border-color .35s ease;
}
.porte::before { content: ""; position: absolute; inset: 0; z-index: -1; transition: opacity .4s ease; opacity: .85; }
.porte.joueurs::before { background: radial-gradient(420px 300px at 80% 0%, rgba(92,124,77,.45), transparent 70%), linear-gradient(170deg, #1a1f14, var(--nuit)); }
.porte.bars::before { background: radial-gradient(420px 300px at 80% 0%, rgba(232,162,90,.4), transparent 70%), linear-gradient(170deg, #2a1c10, var(--nuit)); }
.porte:hover { transform: translateY(-6px); border-color: rgba(232,162,90,.5); color: var(--creme); }
.porte .qui { font: 500 .76rem var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--ambre); }
.porte h3 { font-size: clamp(2rem, 4vw, 3rem); margin: 0; }
.porte p { color: var(--creme-2); margin: 0; max-width: 34ch; }
.porte .aller { margin-top: 12px; font: 500 .82rem var(--sans); letter-spacing: .22em; text-transform: uppercase; display: inline-flex; gap: 10px; align-items: center; }
.porte .aller::after { content: "→"; transition: transform .3s ease; }
.porte:hover .aller::after { transform: translateX(6px); }

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 52px;
  font: 500 .86rem var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  color: var(--nuit); background: var(--ambre-2); border: 0; border-radius: 999px; padding: 1.05em 1.8em;
  box-shadow: 0 0 0 1px rgba(242,196,138,.4), 0 14px 40px rgba(232,162,90,.25); transition: background .25s, transform .2s;
}
.bouton:hover { background: var(--creme); color: var(--nuit); transform: translateY(-2px); }
.bouton.fantome { background: transparent; color: var(--creme); box-shadow: inset 0 0 0 1px var(--trait); }
.bouton.fantome:hover { box-shadow: inset 0 0 0 1px var(--ambre); color: var(--ambre-2); }
.bouton:disabled { opacity: .6; cursor: wait; transform: none; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; }
.centre .actions { justify-content: center; }

/* ── Générique de fin (pied de page) ──────────────────────────────────────── */
.generique { position: relative; background: #000; padding-block: clamp(90px, 12vw, 150px) 40px; text-align: center; overflow: hidden; }
.generique .credits { display: grid; gap: 30px; max-width: 34rem; margin: 0 auto; }
.generique .credit span { display: block; font: 500 .7rem var(--sans); letter-spacing: .36em; text-transform: uppercase; color: var(--gris); margin-bottom: .5em; }
.generique .credit b { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.2; color: var(--creme); }
.generique .credit a { color: var(--creme); text-decoration: none; border-bottom: 1px solid rgba(232,162,90,.5); }
.generique .credit a:hover { color: var(--ambre-2); }
.generique .fin { font-family: var(--serif); font-style: italic; font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--creme); margin: clamp(60px, 9vw, 110px) 0 18px; }
.generique .bas { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; font-size: .82rem; color: var(--gris); letter-spacing: .06em; }
.generique .bas a { color: var(--gris); }
.generique img.marque { height: clamp(64px, 9vw, 96px); width: auto; margin: 0 auto 50px; opacity: .9; }

/* ── Apparition au défilement ─────────────────────────────────────────────── */
.apparait { opacity: 0; transform: translateY(26px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.apparait.vu { opacity: 1; transform: none; }
.apparait.d1 { transition-delay: .12s; } .apparait.d2 { transition-delay: .24s; } .apparait.d3 { transition-delay: .36s; }
html:not(.js) .apparait { opacity: 1; transform: none; }

/* ── En-tête des pages intérieures ────────────────────────────────────────── */
.ouverture { padding-block: clamp(150px, 20vw, 230px) clamp(60px, 9vw, 110px); }
.ouverture .titre { max-width: 16ch; }
.ouverture.centre .titre { margin-inline: auto; }

/* ── La table : le découpage, plan par plan ───────────────────────────────── */
.decoupage { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: plan; }
@media (max-width: 900px) { .decoupage { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .decoupage { grid-template-columns: 1fr; } }
.decoupage li { border: 1px solid var(--trait); border-radius: 6px; padding: 22px 20px 24px; background: linear-gradient(170deg, var(--nuit-2), var(--nuit)); position: relative; }
.decoupage li::before { counter-increment: plan; content: "Plan " counter(plan); display: block; font: 500 .7rem var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--ambre); margin-bottom: 16px; }
.decoupage h3 { font-size: 1.9rem; margin: 0 0 .25em; }
.decoupage p { margin: 0; color: var(--creme-2); font-size: .97rem; }

/* La vidéo d'une vraie partie (retirée par vitrine.js tant qu'elle manque). */
.video-partie { margin: 0; background: #000; padding: 3.5% 0; border-radius: 4px; }
.video-partie video { width: 100%; }
.video-partie figcaption { text-align: center; font-family: var(--serif); font-style: italic; color: var(--creme-2); margin-top: 12px; }

/* ── Démo du quiz : l'écran de la table ───────────────────────────────────── */
.demo { max-width: 780px; margin: 0 auto; text-align: center; border-radius: 28px; padding: clamp(22px, 4vw, 42px);
  background: radial-gradient(600px 300px at 50% -10%, rgba(92,124,77,.28), transparent 70%), linear-gradient(180deg, #1b1611, #120e0a);
  box-shadow: 0 0 0 1px var(--trait), 0 0 0 10px #0a0806, 0 0 0 11px rgba(201,164,90,.4), 0 40px 90px rgba(0,0,0,.6); }
.demo-haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.demo-num { font: 500 .76rem var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ambre); }
.demo-score { font: 500 .74rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--creme-2); border: 1px solid var(--trait); border-radius: 999px; padding: .35em 1em; }
.demo-score b { font-family: var(--serif); font-size: 1.2rem; color: var(--ambre-2); letter-spacing: 0; margin-left: .3em; }
.demo-barre { height: 4px; border-radius: 4px; background: var(--fumee); overflow: hidden; margin-bottom: 24px; }
.demo-barre i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--lampe-lt), var(--ambre)); transform-origin: left center; }
.demo-q { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.15; margin: 0 0 24px; }
.demo-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .demo-choix { grid-template-columns: 1fr; } }
.demo-choix button { display: flex; align-items: center; gap: 14px; text-align: left; min-height: 64px; cursor: pointer;
  font: 400 1.05rem var(--sans); color: var(--creme); background: rgba(243,233,214,.04); border: 1px solid var(--trait);
  border-radius: 16px; padding: 10px 16px; transition: border-color .2s, background .2s, transform .12s; }
.demo-choix button:hover:not(:disabled) { border-color: var(--ambre); background: rgba(232,162,90,.08); }
.demo-choix button:active:not(:disabled) { transform: scale(.98); }
.demo-choix .l { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--ambre); border: 1px solid rgba(232,162,90,.45); }
.demo-choix button.bon { background: rgba(92,124,77,.35); border-color: #8fbf6c; }
.demo-choix button.bon .l { background: #6f9c52; color: var(--nuit); border-color: #6f9c52; }
.demo-choix button.faux { background: rgba(176,58,46,.28); border-color: #d1685b; }
.demo-choix button:disabled { cursor: default; }
.demo-expl { min-height: 1.6em; margin: 18px 0 0; color: var(--creme-2); font-size: .97rem; }
.demo-fin .num { font-family: var(--serif); font-weight: 600; font-size: 4.4rem; line-height: 1; color: var(--ambre-2); margin-top: .2em; }
.demo-fin h3 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin: .3em 0 .4em; }
.demo-fin .actions, .demo .actions { justify-content: center; margin-top: 22px; }
/* Les boutons que vitrine.js fabrique dans la démo. */
.demo .btn-table { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; font: 500 .86rem var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; cursor: pointer; color: var(--nuit); background: var(--ambre-2); border: 0; border-radius: 999px; padding: 1.05em 1.8em; }
.demo .btn-table:hover { background: var(--creme); }
.demo .btn.btn-ghost { display: inline-flex; align-items: center; min-height: 52px; font: 500 .86rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--creme); background: transparent; border: 1px solid var(--trait); border-radius: 999px; padding: 1.05em 1.6em; cursor: pointer; }
.demo .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* ── Où jouer : la France de nuit ─────────────────────────────────────────── */
.carte-nuit { position: relative; max-width: 820px; margin: 0 auto; }
.carte-nuit::before { content: ""; position: absolute; inset: 6%; z-index: 0; background: radial-gradient(closest-side, rgba(232,162,90,.12), transparent 75%); pointer-events: none; }
.map-panel { position: relative; z-index: 1; }
.france-map { width: 100%; height: auto; }
.france-map .land { fill: #17120c; stroke: rgba(201,164,90,.55); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)); }
.france-map .marker { cursor: pointer; outline: none; }
.france-map .marker-hit { fill: transparent; pointer-events: all; }
.france-map .marker-halo { fill: rgba(242,196,138,.3); animation: lumiere 2.6s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.france-map .marker-dot { fill: var(--ambre-2); stroke: #fff6e6; stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform .18s ease; filter: drop-shadow(0 0 8px rgba(242,196,138,.9)); }
.france-map .marker-ghost { fill: rgba(168,153,127,.45); transform-box: fill-box; transform-origin: center; transition: transform .18s ease; }
.france-map .marker:hover .marker-dot, .france-map .marker:focus-visible .marker-dot { transform: scale(1.3); }
.france-map .marker:hover .marker-ghost { transform: scale(1.22); }
.france-map .marker-label { font-family: var(--sans); font-weight: 500; font-size: 22px; fill: var(--creme); pointer-events: none; transition: opacity .35s ease; }
.france-map.is-zoomed .marker-label { opacity: 0; }
.france-map.is-zoomed .marker:not(.is-selected) { opacity: .22; }
.france-map .marker.is-selected .marker-dot { fill: #fff; }
@keyframes lumiere { 0% { transform: scale(.6); opacity: .9; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.map-hint { text-align: center; color: var(--gris); font-size: .9rem; margin-top: 12px; }
.map-reset { position: absolute; top: 16px; left: 16px; z-index: 2; border: 1px solid var(--trait); background: rgba(13,10,7,.8); color: var(--ambre-2);
  font: 500 .86rem var(--sans); padding: .6em 1.1em; border-radius: 999px; cursor: pointer; min-height: 44px; }
.map-reset:hover { border-color: var(--ambre); }

.loc-list, .loc-bars { display: grid; gap: 12px; }
.loc-item, .loc-bar { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 14px;
  background: rgba(243,233,214,.035); border: 1px solid var(--trait); color: var(--creme); }
.loc-item.clickable { cursor: pointer; transition: border-color .2s, transform .2s; }
.loc-item.clickable:hover, .loc-item.clickable:focus-visible { border-color: rgba(232,162,90,.55); transform: translateY(-2px); outline: none; }
.loc-item .pin, .loc-bar .pin, .loc-detail-head .pin { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--ambre-2); background: rgba(232,162,90,.12); }
.loc-item .ville { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; }
.loc-item .adr, .loc-bar .adr2, .loc-detail .dep { font-size: .92rem; color: var(--creme-2); }
.loc-badge { margin-left: auto; align-self: center; font: 500 .7rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #a9d38a; background: rgba(127,179,90,.14); padding: .35em .85em; border-radius: 999px; white-space: nowrap; }
.loc-badge-new { color: var(--nuit); background: var(--ambre-2); }
.loc-detail { animation: monte .4s ease both; }
.loc-detail-head { display: flex; gap: 16px; align-items: center; margin: 4px 0 18px; }
.loc-detail .ville-xl { font-family: var(--serif); font-weight: 600; font-size: clamp(1.8rem, 3.4vw, 2.4rem); line-height: 1.05; }
.loc-bar .nm { font-weight: 500; font-size: 1.05rem; }
.loc-bar .loc-mot { font-family: var(--serif); font-style: italic; color: var(--creme-2); margin-top: 8px; }
.loc-bar-badges { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; margin-left: auto; }
.loc-bar-badges .loc-badge { margin-left: 0; }
.loc-aller { margin-top: 12px; }
.loc-detail .btn, .loc-detail .btn-sm { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font: 500 .8rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--nuit); background: var(--ambre-2); border-radius: 999px; padding: .75em 1.3em; text-decoration: none; border: 0; cursor: pointer; }
.loc-detail .lead { color: var(--creme-2); }
@media (max-width: 560px) { .loc-bar { flex-wrap: wrap; } .loc-bar-badges { flex-direction: row; margin-left: 0; width: 100%; order: 3; } .loc-aller { width: 100%; justify-content: center; } }
@keyframes monte { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Le tableau des records (Quiz). */
.records { max-width: 620px; margin: 0 auto; list-style: none; padding: 0; counter-reset: rk; }
.records li { display: flex; align-items: center; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--trait); text-align: left; }
.records li::before { counter-increment: rk; content: counter(rk); flex: none; width: 42px; font-family: var(--serif); font-style: italic; font-size: 1.9rem; color: var(--gris); text-align: center; }
.records li:first-child::before { color: var(--ambre-2); }
.records .qui { flex: 1; min-width: 0; }
.records .qui b { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; }
.records .qui span { display: block; font-size: .85rem; color: var(--gris); }
.records .pts { font-family: var(--serif); font-weight: 600; font-size: 1.8rem; color: var(--ambre-2); white-space: nowrap; }
.records .pts small { font: 400 .75rem var(--sans); color: var(--gris); margin-left: .25em; }

/* ============================================================================
   LE JOUR — Pour les bars : « le lendemain matin »
   ========================================================================== */
body.jour { background: var(--papier); color: var(--encre); }
body.jour::after { opacity: .05; mix-blend-mode: multiply; }
body.jour .entete.colle { background: rgba(246,239,226,.88); border-bottom-color: rgba(42,28,16,.1); }
body.jour .menu a { color: var(--encre-2); }
body.jour .menu a:hover, body.jour .menu a[aria-current="page"] { color: var(--encre); }
body.jour .menu a::after { background: var(--cuivre); }
body.jour .menu .cta a { color: var(--papier); background: var(--encre); }
body.jour .menu .cta a:hover { background: var(--cuivre); color: var(--papier); }
body.jour .burger span { background: var(--encre); }
body.jour .horloge { color: var(--cuivre-dk); border-color: rgba(143,69,23,.35); }
@media (max-width: 900px) { body.jour .menu { background: rgba(246,239,226,.98); } body.jour .menu a { border-color: rgba(42,28,16,.1); } }
body.jour .heure { color: var(--cuivre-dk); }
body.jour .heure b { color: var(--encre); }
body.jour .heure::after, body.jour .centre .heure::before { background: linear-gradient(90deg, rgba(143,69,23,.5), transparent); }
body.jour .centre .heure::before { background: linear-gradient(270deg, rgba(143,69,23,.5), transparent); }
body.jour .titre em, body.jour .intertitre .ambre { color: var(--cuivre); }
body.jour .chapo { color: var(--encre-2); }
body.jour a { color: var(--cuivre-dk); }
body.jour .bouton { color: var(--papier); background: var(--encre); box-shadow: 0 14px 34px rgba(42,28,16,.2); }
body.jour .bouton:hover { background: var(--cuivre); color: var(--papier); }
body.jour .lampe::before { background: radial-gradient(600px 460px at var(--lx) var(--ly), rgba(255,236,200,.65), transparent 70%); }

/* Le ticket de caisse : ce que la table coûte au bar. */
.caisse { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
@media (max-width: 880px) { .caisse { grid-template-columns: 1fr; } }
.ticket {
  position: relative; max-width: 380px; margin-inline: auto; width: 100%; padding: 34px 30px 40px; color: #2b2116;
  background: #fffdf7; box-shadow: 0 26px 50px rgba(42,28,16,.18), 0 2px 0 rgba(42,28,16,.05);
  transform: rotate(-1.4deg); font-family: var(--sans); font-size: .95rem;
  -webkit-mask: radial-gradient(9px at 50% 100%, transparent 98%, #000) 0 100% / 18px 100% repeat-x;
          mask: radial-gradient(9px at 50% 100%, transparent 98%, #000) 0 100% / 18px 100% repeat-x;
}
.ticket .en-tete { text-align: center; border-bottom: 1px dashed rgba(43,33,22,.4); padding-bottom: 14px; margin-bottom: 14px; }
.ticket .en-tete b { display: block; font-family: var(--serif); font-size: 1.7rem; letter-spacing: .14em; }
.ticket .en-tete span { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: #7a6650; }
.ticket .ligne { display: flex; align-items: baseline; gap: 6px; padding: 7px 0; letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; }
.ticket .ligne::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted rgba(43,33,22,.45); transform: translateY(-4px); }
.ticket .ligne .prix { order: 2; font-variant-numeric: tabular-nums; font-weight: 500; }
.ticket .total { border-top: 1px dashed rgba(43,33,22,.4); margin-top: 10px; padding-top: 14px; font-size: 1rem; font-weight: 600; }
.ticket .gain { color: #3f6b2c; }
.ticket .merci { text-align: center; margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: 1.15rem; text-transform: none; letter-spacing: 0; }
.ticket .tampon {
  position: absolute; right: -16px; bottom: 30px; transform: rotate(-12deg); border: 2.5px solid var(--rouge); color: var(--rouge);
  font: 600 .7rem var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: .55em .8em; border-radius: 6px; opacity: .82; background: rgba(255,253,247,.4);
}

.atouts-jour { list-style: none; padding: 0; margin: 0; display: grid; gap: 26px; }
.atouts-jour li { display: grid; grid-template-columns: 70px 1fr; gap: 18px; align-items: baseline; border-bottom: 1px solid rgba(42,28,16,.12); padding-bottom: 22px; }
.atouts-jour .n { font-family: var(--serif); font-weight: 600; font-size: 2.2rem; color: var(--cuivre); line-height: 1; }
.atouts-jour b { display: block; font-family: var(--serif); font-size: 1.55rem; font-weight: 600; line-height: 1.15; margin-bottom: .2em; }
.atouts-jour span { color: var(--encre-2); }

.temoin { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(26px, 5vw, 60px); align-items: center; }
@media (max-width: 880px) { .temoin { grid-template-columns: 1fr; } }
.polaroid { margin: 0; background: #fff; padding: 14px 14px 56px; box-shadow: 0 22px 46px rgba(42,28,16,.18); transform: rotate(1.6deg); position: relative; }
.polaroid img { width: 100%; aspect-ratio: 1400 / 811; object-fit: cover; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--encre-2); }
.preuve { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.3; margin: 0; }
.preuve small { display: block; font: 500 .74rem var(--sans); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--cuivre-dk); margin-top: 1.1rem; }

/* Le formulaire : un bon de commande. */
.bon { max-width: 640px; margin: 0 auto; background: #fffdf7; border: 1px solid rgba(42,28,16,.14); border-radius: 6px; padding: clamp(24px, 4.5vw, 46px);
  box-shadow: 0 24px 60px rgba(42,28,16,.12); position: relative; }
.bon::before { content: "N° 0001"; position: absolute; top: 18px; right: 22px; font: 500 .7rem var(--sans); letter-spacing: .24em; color: var(--rouge); }
.field { margin-bottom: 20px; }
.field label { display: block; font: 500 .76rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--encre-2); margin-bottom: 8px; }
.field input { width: 100%; font: 400 1.05rem var(--sans); color: var(--encre); background: transparent; border: 0; border-bottom: 1.5px solid rgba(42,28,16,.3); padding: .55em 0; border-radius: 0; }
.field input:focus { outline: none; border-color: var(--cuivre); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field .facultatif { text-transform: none; letter-spacing: 0; color: #9a8670; font-weight: 400; }
.bon .bouton { width: 100%; margin-top: 10px; }
.piege { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-erreur { color: var(--rouge); text-align: center; min-height: 1.3em; margin: 12px 0 0; font-size: .95rem; }
.demande-note { text-align: center; color: #8a7660; font-size: .88rem; margin: 14px 0 0; }
.demande-ok { text-align: center; padding: 20px 0; }
.demande-ok h3 { font-size: 2.2rem; margin: .3em 0; }
.demande-ok p { color: var(--encre-2); margin: 0; }
.demande-ok .ornement { color: var(--cuivre); }

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.perdu { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px 20px 60px; }

/* ── Mouvement réduit : rien ne bouge ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .apparait { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}