/* ============================================================
   CAFÉ INTERVIEW — les panneaux sous le comptoir, version 2
   Aplats pleins qui se recouvrent, serif éditorial, beaucoup de vide.
   ============================================================ */

/* ---------- L'histoire : la bande des couvertures ---------- */

/* Le magazine d'Andy Warhol a donné son nom à la maison, et sept de ses
   couvertures sont encadrées sur le mur du bar. Elles ouvrent la
   section en défilant vers la droite, sans fin, sur le vert du mur.
   Le défilement est tenu par le script et non par une animation CSS :
   il fallait pouvoir le RALENTIR quand la souris entre dans la bande,
   et une durée d'animation ne se change pas en douceur. */
.bande{
  position:relative;overflow:hidden;
  padding:clamp(22px,3vw,44px) 0 clamp(26px,3.4vw,52px);
  background:var(--mint);
  cursor:default;
}
.bande-piste{
  display:flex;align-items:flex-end;
  gap:clamp(20px,2.6vw,44px);
  width:max-content;
  will-change:transform;
}
.couv{
  margin:0;flex:none;
  width:clamp(104px,11vw,168px);
  padding:clamp(4px,.5vw,7px);
  background:#4B3527;
  box-shadow:0 12px 24px rgba(6,36,27,.22),0 2px 4px rgba(6,36,27,.3);
}
.couv:nth-child(odd){transform:rotate(-.7deg)}
.couv:nth-child(even){transform:rotate(.6deg)}
.couv img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}

/* La lueur des réglettes qui éclairent le mur par en dessous, comme au
   bar. Elle passe par dessus la bande sans jamais gêner la lecture,
   puisqu'il n'y a pas de texte dedans. */
.bande::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  pointer-events:none;
  background:linear-gradient(to top,
    color-mix(in srgb,#FFE9AE 26%,transparent) 0%,transparent 100%);
}

/* ---------- L'histoire : la scène qui se fige ---------- */

/* Par défaut, sans script, les six échanges sont une liste, lisible de
   bout en bout. C'est le script qui pose .anime et transforme la liste
   en scène immobile où ils se relaient. Rien ne dépend donc du
   JavaScript pour être lu. */

.scene{padding-top:clamp(30px,5vw,70px)}
.pin{
  width:var(--shell);margin-inline:auto;
  display:grid;gap:clamp(38px,5vw,72px);
}

.ech{margin:0;display:grid;gap:clamp(12px,1.6vw,20px);max-width:62ch}
.ech .spk{margin:0}
.ech-q{margin:0;color:var(--fg);max-width:22ch}
.ech-r{margin:0}

.horloge{margin:0 auto clamp(20px,3vw,40px);width:min(100%,620px);position:relative}
.horloge img{width:100%;height:auto;display:block}
.aig{position:absolute;inset:0;width:100%;height:100%}
.aig polygon,.aig ellipse{fill:url(#fer);stroke:rgba(12,10,4,.55);stroke-width:2}
.aig-c{fill:#3B341F}
.aig-g{filter:drop-shadow(4px 6px 5px rgba(0,0,0,.5))}

.voile{display:none}
.an{display:none}
.heure{
  font:700 11px/1 var(--mono);letter-spacing:.3em;
  color:var(--fg-faint);margin:0;text-align:center;
}
.cadre{margin:0 auto;width:min(46vw,240px)}
.cadre img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}

/* ---------- La même scène, une fois figée ---------- */

.story.anime .scene{
  /* Une hauteur par échange, plus une fenêtre pour tenir jusqu'au bout */
  height:calc(6 * 86svh + 100svh);
  padding-top:0;
}
.story.anime .pin{
  position:sticky;top:0;
  height:100svh;overflow:hidden;
  width:100%;margin:0;gap:0;
  display:block;
  background:#0C1A16;

  /* Le gros plan. La boîte de l'horloge est posée en entier, à une
     échelle telle que le CADRAN remplisse la hauteur ; le boîtier sort
     donc largement du cadre de chaque côté, et c'est voulu : on est
     entré dans l'objet. Les fractions viennent de l'image elle même,
     1556 sur 735, cadran centré en (881, 321), demi axes 188 et 205.
     La borne en vw évite qu'un écran étroit ne coupe le cadran. */
  --boite-h:min(147svh,184vw);
  --boite-w:calc(var(--boite-h) * 2.1170);
  --cadran-h:calc(var(--boite-h) * .5578);
}

.story.anime .horloge{
  position:absolute;z-index:0;margin:0;
  width:var(--boite-w);height:var(--boite-h);
  left:calc(50% - var(--boite-w) * .56619);
  top:calc(50% - var(--boite-h) * .43673);
}
.story.anime .horloge img{width:100%;height:100%}
.story.anime .aig polygon,
.story.anime .aig ellipse{stroke-width:1.2}

/* Le voile. La fonte est sombre, mais elle porte des rivets clairs et
   un liseré de cuivre : sans voile, une lettre pouvait tomber dessus.
   Il est plus dense en haut et en bas, là où vivent les textes, et
   laisse le cadran respirer au milieu. */
.story.anime .voile{
  display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(6,20,16,.82) 0%,rgba(6,20,16,.46) 26%,
      rgba(6,20,16,.30) 50%,
      rgba(6,20,16,.58) 76%,rgba(6,20,16,.86) 100%),
    radial-gradient(78% 62% at 50% 48%,transparent 30%,rgba(6,20,16,.42) 100%);
}

/* L'année, très grande, derrière la question. C'est le récit rendu
   visible : les chiffres roulent d'une question à l'autre comme un
   compteur, et se taisent quand l'histoire arrive à aujourd'hui. */
.story.anime .an{
  display:flex;justify-content:center;align-items:center;
  position:absolute;left:0;right:0;top:50%;z-index:2;
  /* Remontee : la question passe devant le bas des chiffres, ce qui les
     ancre derriere elle, mais les deux tiers du haut restent lisibles.
     Centree, l annee disparaissait entierement sous le texte. */
  transform:translateY(-115%);
  margin:0;pointer-events:none;
  font-family:var(--display);
  font-size:clamp(110px,27svh,310px);
  line-height:.82;
  color:rgba(242,237,225,.17);
  opacity:0;transition:opacity .6s var(--ease);
}
.story.anime .an.on{opacity:1}
.an-c{display:block;overflow:hidden;height:.82em;width:.56em}
.an-r{
  display:block;
  transform:translateY(calc(var(--d,0) * -10%));
  transition:transform .9s var(--ease-io);
}
.an-r span{display:block;height:.82em;text-align:center}

.story.anime .heure{
  position:absolute;left:var(--gut);bottom:clamp(20px,4svh,44px);z-index:4;
  color:rgba(242,237,225,.62);text-align:left;
}

.story.anime .cadre{
  position:absolute;z-index:4;margin:0;
  right:var(--gut);bottom:clamp(20px,4svh,44px);
  width:clamp(96px,13svh,158px);
  padding:clamp(4px,.5vw,8px);
  background:#4B3527;
  box-shadow:0 16px 32px rgba(0,0,0,.42),0 2px 5px rgba(0,0,0,.4);
  transform:rotate(-1.4deg);
}
.story.anime .cadre img{
  opacity:0;transition:opacity .5s var(--ease);
  background:var(--ink-deep);
}
.story.anime .cadre img.on{opacity:1}

.story.anime .echanges{position:absolute;inset:0;z-index:3}
.story.anime .ech{
  position:absolute;inset:0;
  width:var(--shell);margin-inline:auto;max-width:none;
  display:grid;
  grid-template-rows:1fr auto auto 1fr;
  justify-items:center;text-align:center;
  gap:0;
  pointer-events:none;
}
.story.anime .ech-haut{
  grid-row:2;
  display:grid;gap:clamp(10px,1.4vw,18px);justify-items:center;
}
.story.anime .ech-bas{
  grid-row:3;
  padding-top:clamp(18px,3.4svh,44px);
  max-width:46ch;
}
.story.anime .ech .spk{color:rgba(242,237,225,.72)}
.story.anime .ech .spk::before{background:var(--neon);opacity:1}
.story.anime .ech-q{
  max-width:18ch;color:var(--cream);
  font-size:clamp(38px,7.4svh,96px);
  text-shadow:0 2px 18px rgba(6,20,16,.55);
}
.story.anime .ech-r{
  color:rgba(242,237,225,.90);
  font-size:clamp(16px,1.35vw,21px);
  text-shadow:0 1px 12px rgba(6,20,16,.6);
}

/* La conversation : la question arrive d'un côté, un temps, puis la
   réponse arrive de l'autre. On doit sentir quelqu'un qui répond, pas
   un paragraphe qui apparait. */
.story.anime .ech-haut,
.story.anime .ech-bas{
  opacity:0;
  transition:opacity .5s var(--ease),transform .72s var(--ease);
}
.story.anime .ech-haut{transform:translate3d(-46px,0,0)}
.story.anime .ech-bas{transform:translate3d(46px,0,0)}
.story.anime .ech.on .ech-haut{opacity:1;transform:none}
.story.anime .ech.on .ech-bas{
  opacity:1;transform:none;
  transition-delay:.2s,.2s;
}

@media (max-width:620px){
  .story.anime .scene{height:calc(6 * 92svh + 100svh)}
  .story.anime .ech-haut{transform:translate3d(-24px,0,0)}
  .story.anime .ech-bas{transform:translate3d(24px,0,0)}
  .story.anime .an{font-size:clamp(96px,22svh,200px)}
  .story.anime .cadre{width:clamp(78px,11svh,110px)}
}

/* ---------- Figures ---------- */

.story-side{display:grid;gap:clamp(26px,3.4vw,50px);align-content:start;position:sticky;top:clamp(90px,12vh,140px)}
@media (max-width:980px){.story-side{position:static}}

.fig{margin:0}
.fig-img{
  position:relative;overflow:hidden;border-radius:4px;
  background:var(--ink-deep);
}
.fig-img img{width:100%;height:auto;display:block}
.fig figcaption{
  font:400 12px/1.5 var(--mono);letter-spacing:.05em;
  color:var(--fg-soft);margin-top:13px;
}

/* ---------- Infos pratiques, sur l'aplat crème ---------- */

/* Six informations, six pavés de tailles inégales. Les horaires
   prennent le double parce que c'est ce qu'on vient chercher ; le
   téléphone et l'Instagram tiennent dans un carré. Trois pavés sont
   posés sur une matière de la maison, le zinc du comptoir, la mosaïque
   du sol, les carreaux de la façade : la page ne dit rien de plus, elle
   le dit avec le bâtiment. */

.pave{
  display:grid;gap:clamp(9px,1vw,16px);
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0;
  padding-top:clamp(34px,4.4vw,64px);
}
.pav{
  position:relative;overflow:hidden;
  margin:0;border-radius:4px;
  padding:clamp(20px,2.3vw,36px);
  min-height:clamp(128px,13vw,190px);
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(14px,1.6vw,24px);
  background:color-mix(in srgb,var(--ink) 5%,transparent);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.pav--horaires{grid-column:1 / 3;grid-row:1 / 3}
.pav--adresse,.pav--etage,.pav--concerts{grid-column:span 2}

/* Le halo qui suit le curseur. Il ne colore rien, il éclaire : sur un
   aplat crème comme sur une matière, la cellule survolée se détache
   sans changer de teinte. */
.pav::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(210px circle at var(--px,50%) var(--py,50%),
    rgba(255,255,255,.30),transparent 72%);
  opacity:0;transition:opacity .45s var(--ease);
}
.pav:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(11,21,18,.13)}
.pav:hover::after{opacity:1}

/* Les pavés en matière. L'image est en fond, le voile la calme, et le
   texte passe en crème. Le voile n'est pas décoratif : mesuré au pire
   pixel, le texte tombait sous le seuil sans lui. */
.pav--mat{
  background:var(--ink-deep);
  color:var(--cream);
}
/* Le voile est la premiere couche du fond, pas un element de plus :
   il n est pas decoratif, mesure au pire pixel le texte tombait sous le
   seuil sans lui. Les matieres sombres, zinc et mosaique, en demandent
   moins que les carreaux de facade, qui sont clairs. */
.pav--mat::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-color:var(--ink-deep);
  background-image:linear-gradient(rgba(6,14,12,.62),rgba(6,14,12,.62));
  transform:scale(1.04);
  transition:transform 1.1s var(--ease);
}
/* Les chemins d'images vivent ICI et non dans une variable posée sur la
   balise : une url() portée par une variable est résolue depuis la
   feuille qui l'utilise, donc depuis /assets/, ce qui donnait
   /assets/assets/ et un 404 sur les trois matières.

   Chaque matière a son voile propre, mesuré et non choisi. Le zinc est
   déjà sombre. La mosaïque porte des bandes chaudes très claires sous
   lesquelles l'adresse disparaissait. Les carreaux de façade, eux, ne
   sont PAS assombris : les noircir les rendait gris, alors que c'est
   leur couleur qui fait tout l'intérêt du mur. Ils reçoivent un voile
   crème, et le texte y reste en encre. */
.pav--zinc::before    { background-image:linear-gradient(rgba(6,14,12,.60),rgba(6,14,12,.60)),url('img/mat/zinc.jpg') }
.pav--mosaique::before{ background-image:linear-gradient(rgba(6,14,12,.68),rgba(6,14,12,.68)),url('img/mat/mosaique.jpg') }
.pav--carreaux::before{ background-image:linear-gradient(rgba(242,237,225,.52),rgba(242,237,225,.52)),url('img/mat/carreaux.jpg') }
.pav--mat::before{ background-position:center; background-size:cover; background-repeat:no-repeat }
.pav--mat:hover::before{transform:scale(1.09)}
.pav--mat > *{position:relative;z-index:1}
/* Classe doublee : la regle generale .pav dd vient plus loin dans la
   feuille et, a specificite egale, elle gagnait. L adresse ressortait
   donc en encre sur la mosaique sombre, invisible. */
.pav.pav--mat dd,.pav.pav--mat dd a{color:var(--cream)}
.pav.pav--mat dd a{border-bottom-color:rgba(242,237,225,.4)}

/* Le pavé clair garde l'encre du panneau : c'est le voile qui est crème,
   pas le texte. */
.pav--clair{background:var(--cream);color:var(--fg)}
.pav--clair dt{color:var(--fg)}
.pav--clair dt::before{background:var(--accent)}
.pav.pav--mat.pav--clair dd,.pav.pav--mat.pav--clair dd a{color:var(--fg)}
.pav--clair dd a{border-bottom-color:var(--rule)}

/* Le libelle prend la couleur du fond, et c est un trait qui porte le
   rouge. Mesure au pire pixel, le rouge plein tombait a 2,2 contre 1 sur
   le zinc et a 2,3 sur la mosaique : sur une photo il n y a pas de dose
   de rouge qui tienne le seuil sans noyer la matiere. Le meme parti que
   dans le hero, donc, et la page y gagne d etre coherente. */
.pav dt{
  display:flex;align-items:center;gap:.8em;
  font:700 clamp(9.5px,.72vw,11px)/1 var(--mono);
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--fg);margin:0;
}
.pav dt::before{
  content:"";flex:none;
  width:clamp(14px,1.8vw,24px);height:1px;
  background:var(--accent);
}
.pav--mat dt{color:var(--cream)}
.pav--mat dt::before{background:var(--neon)}
/* Le pave des carreaux porte les deux classes : il est en matiere, mais
   sa matiere est claire. Il lui faut donc plus de poids que la regle des
   matieres sombres, sinon son libelle sortait creme sur du creme. */
.pav--mat.pav--clair dt{color:var(--fg)}
.pav--mat.pav--clair dt::before{background:var(--accent)}
.pav dd{
  margin:0;
  font-size:clamp(15px,1.15vw,19px);
  line-height:1.5;color:var(--fg);
}
.pav dd a{
  color:var(--fg);text-decoration:none;
  border-bottom:1px solid var(--rule);
  transition:border-color var(--dur-fast) var(--ease);
}
.pav dd a:hover{border-color:currentColor}
.pav .hr{display:block}
.pav .hr b{font-weight:600}

/* Les horaires, en grand : c'est le pavé qu'on regarde. */
.pav--horaires dd{
  display:grid;gap:clamp(6px,.7vw,11px);
  font-size:clamp(16px,1.3vw,21px);
}
.pav--horaires .hr{color:rgba(242,237,225,.78)}
.pav--horaires .hr b{color:var(--cream)}

/* L'état du moment, calculé sur les mêmes horaires. Le point bat quand
   c'est ouvert et reste éteint quand ça ne l'est pas. */
.etat{
  display:flex;align-items:baseline;gap:.7em;
  margin:0 0 clamp(10px,1.2vw,18px);
  font:700 clamp(20px,2.6vw,42px)/1.1 var(--display);
  color:var(--cream);
}
.etat-p{
  flex:none;width:.34em;height:.34em;border-radius:50%;
  background:rgba(242,237,225,.32);
  align-self:center;
}
.etat.ouvert .etat-p{
  background:var(--neon);
  box-shadow:0 0 0 0 rgba(255,46,31,.55);
  animation:battement 2.6s var(--ease-io) infinite;
}
@keyframes battement{
  0%   {box-shadow:0 0 0 0 rgba(255,46,31,.5)}
  70%  {box-shadow:0 0 0 .8em rgba(255,46,31,0)}
  100% {box-shadow:0 0 0 0 rgba(255,46,31,0)}
}
.etat-t{font:inherit}
.etat-s{
  display:block;
  font:400 clamp(12px,.92vw,14px)/1.4 var(--mono);
  letter-spacing:.04em;
  color:rgba(242,237,225,.72);
  margin-top:.5em;
}
@media (prefers-reduced-motion:reduce){
  .etat.ouvert .etat-p{animation:none}
  .pav,.pav--mat::before{transition:none}
}

@media (max-width:900px){
  .pave{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pav--horaires{grid-column:1 / 3;grid-row:auto}
  .pav--adresse,.pav--etage,.pav--concerts{grid-column:span 2}
}
@media (max-width:560px){
  .pave{grid-template-columns:1fr}
  .pav--horaires,.pav--adresse,.pav--etage,.pav--concerts,
  .pav--tel,.pav--insta{grid-column:1 / -1}
}

/* ---------- Nous trouver ---------- */

.find-grid{
  display:grid;gap:clamp(30px,4vw,72px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:start;padding-top:clamp(36px,4.6vw,70px);
}
@media (max-width:900px){.find-grid{grid-template-columns:1fr}}

.map{
  width:100%;height:auto;display:block;
  background:var(--ink-deep);border:1px solid var(--rule);border-radius:4px;
}
.map .blk rect{fill:#0E1B17;stroke:var(--rule);stroke-width:1}
.map .road path{stroke:var(--ink-deep);stroke-width:26;fill:none;stroke-linecap:square}
.map .lbl text{font:700 11px var(--mono);letter-spacing:.18em;fill:var(--fg-soft)}
.map .lbl .dim{fill:var(--fg-faint);letter-spacing:.14em}
.map .pin .dot{fill:var(--neon)}
.map .pin .halo{
  fill:none;stroke:var(--neon);stroke-width:1.5;transform-origin:center;
  animation:ping 4s var(--ease-io) infinite;animation-delay:-1.1s;
}
@keyframes ping{0%,100%{opacity:.7;transform:scale(.42)}55%{opacity:0;transform:scale(1)}}
.map .pin-l{font:700 13px var(--mono);fill:var(--neon)}

.map-note{font:400 12.5px/1.55 var(--mono);color:var(--fg-soft);margin:15px 0 0;max-width:46ch}

.find-side{display:grid;gap:clamp(18px,2.4vw,30px);align-content:start}
.find-addr{margin:0;color:var(--fg)}
.find-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}

/* ---------- Le pied et l'enseigne ---------- */

.foot{padding:clamp(56px,8vw,120px) 0 clamp(36px,4.4vw,64px)}
.foot-in{display:grid;gap:clamp(36px,5vw,70px)}
.foot-mark{display:grid;justify-items:start;gap:14px}

.neon-hold{
  appearance:none;background:none;border:0;padding:6px 0;cursor:pointer;display:block;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
}
/* L'enseigne du pied part éteinte : un tube de verre gris, sans courant.
   C'est l'appui long qui l'allume, et la couleur monte avec la lueur. */
.mark-lg{
  width:clamp(190px,28vw,380px);
  --glow:0;
  color:color-mix(in srgb,var(--neon) calc(clamp(0,var(--glow),1) * 100%),#4E3B39);
  transition:--glow .5s var(--ease),color .5s var(--ease),filter .5s var(--ease);
}
@property --glow{syntax:'<number>';inherits:true;initial-value:0}

.neon-help{
  font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-faint);margin:0;transition:opacity var(--dur-fast) var(--ease);
}
.neon-hold.done + .neon-help{opacity:0}

.neon-out{
  font:400 13px/1.5 var(--mono);color:var(--neon);margin:0;
  opacity:0;transform:translateY(6px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.neon-out.on{opacity:1;transform:none}

.foot-cols{
  display:grid;gap:clamp(12px,1.6vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  padding-top:clamp(26px,3.2vw,44px);border-top:1px solid var(--rule);
}
.foot-cols p{margin:0;font:400 14px/1.6 var(--mono);color:var(--fg-soft)}
.foot-cols a{
  color:var(--fg);text-decoration:none;border-bottom:1px solid var(--rule);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.foot-cols a:hover{color:var(--neon);border-color:var(--neon)}

.foot-fine{margin:0;font:400 11.5px/1.6 var(--mono);color:var(--fg-faint);max-width:64ch}

@media (prefers-reduced-motion:reduce){
  .map .pin .halo{animation:none;opacity:.55;transform:scale(.7)}
  .mark.steady,.mark.strike{animation:none;opacity:1}
}