/* =====================================================================
   TOTO BWA : page d'accueil
   On se promène dans le hangar : mur en lambris (logo + tireuses),
   comptoir turquoise (mode d'emploi), parpaings verts (le hangar),
   mur rouge (la scène), parpaings violets (infos), fond noir (pied).
   ===================================================================== */

/* ---------- HERO : le logo peint sur le lambris ---------- */
.hero {
  position: relative;
  padding: calc(var(--h-toit) + clamp(26px, 4.2vw, 60px)) 0 clamp(10px, 2vw, 24px);
  text-align: center;
}
.hero h1 { font-weight: inherit; }
.hero__mot {
  width: min(880px, 92%);
  margin-inline: auto;
  overflow: visible;
}
.hero__mot .w-ext { fill: var(--plum); stroke: var(--encre); stroke-width: 22; stroke-linejoin: round; }
.hero__mot .w-face { fill: var(--jaune); stroke: var(--encre); stroke-width: 18; stroke-linejoin: round; paint-order: stroke; }
.hero__accroche {
  display: block;
  max-width: 30ch;
  text-wrap: balance;
  margin: clamp(14px, 1.6vw, 22px) auto 0;
  font-weight: 600;
  font-size: clamp(1.35rem, 1rem + 1.55vw, 2.25rem);
  line-height: 1.12;
  color: var(--encre);
}
.hero__lieu {
  margin: 8px 0 0;
  font-family: var(--f-main);
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.7rem);
  line-height: 1.2;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 16px;
  margin-top: clamp(20px, 2.4vw, 30px);
}
.hero__statut { margin: 18px 0 0; }
@media (min-width: 761px) { .hero__statut { display: none; } }

/* le nom est peint sur le lambris : les rainures des planches passent sur les lettres */
.hero h1 { position: relative; }
.hero h1::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(180deg,
      transparent 0 calc(var(--planche) - 5px),
      rgba(70, 8, 64, .55) calc(var(--planche) - 5px) calc(var(--planche) - 2px),
      rgba(255, 255, 255, .5) calc(var(--planche) - 2px) var(--planche)),
    url("../img/textures/grain-bois.png");
  background-size: auto, 384px 96px;
  background-position: 0 var(--decalage, 0px), 0 var(--decalage, 0px);
  -webkit-mask: url("../img/logo/wordmark.svg") center / contain no-repeat;
  mask: url("../img/logo/wordmark.svg") center / contain no-repeat;
  mix-blend-mode: multiply;
  opacity: .75;
}

/* l'oiseau qui tape le bois : toc toc toc */
.oiseau {
  position: relative;
  width: min(280px, 56vw);
  margin: clamp(-4px, -.4vw, 0px) auto 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: 0;
  padding: 0;
  display: block;
}
.mascotte { width: 100%; height: auto; overflow: visible; }
.mascotte .m-sil { fill: var(--nuit); stroke: #f7c6ee; stroke-width: 12; stroke-linejoin: round; paint-order: stroke; }
.mascotte .m-det { fill: #120e24; }
.mascotte .m-tongue { fill: #b57be8; }
.mascotte .m-glasses { fill: #86e3ec; }
.mascotte .m-lens { fill: #e85ad6; }
.mascotte .m-zig { fill: #fff; }
.mascotte .tete { transform-box: fill-box; transform-origin: 30% 95%; }
.oiseau.toc .tete { animation: tape .46s cubic-bezier(.35, .1, .3, 1) 3; }
@keyframes tape {
  0% { transform: rotate(0) translate(0, 0); }
  42% { transform: rotate(7deg) translate(2.6%, 1%); }
  55% { transform: rotate(7.5deg) translate(3%, 1.2%); }
  100% { transform: rotate(0) translate(0, 0); }
}
.toc-mot {
  position: absolute;
  left: 100%;
  top: 4%;
  font-family: var(--f-main);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem);
  line-height: 1;
  color: var(--encre);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.toc-mot:nth-of-type(2) { top: 20%; left: 104%; }
.toc-mot:nth-of-type(3) { top: 36%; left: 99%; }
.oiseau.toc .toc-mot { animation: toc-mot .95s ease-out forwards; }
.oiseau.toc .toc-mot:nth-of-type(1) { animation-delay: .2s; }
.oiseau.toc .toc-mot:nth-of-type(2) { animation-delay: .66s; }
.oiseau.toc .toc-mot:nth-of-type(3) { animation-delay: 1.12s; }
@keyframes toc-mot {
  0% { opacity: 0; transform: translate(-8px, 6px) scale(.6) rotate(-6deg); }
  18% { opacity: 1; transform: translate(0, 0) scale(1.12) rotate(-6deg); }
  100% { opacity: 0; transform: translate(16px, -26px) scale(1) rotate(4deg); }
}
.copeau {
  position: absolute;
  left: 98%;
  top: 30%;
  width: 7px; height: 4px;
  background: var(--soley);
  border: 1.5px solid var(--encre);
  border-radius: 1px;
  opacity: 0;
  pointer-events: none;
}
.oiseau.toc .copeau { animation: copeau .6s ease-out forwards; }
.oiseau.toc .copeau:nth-of-type(1) { --dx: 26px; --dy: -22px; animation-delay: .22s; }
.oiseau.toc .copeau:nth-of-type(2) { --dx: 34px; --dy: 10px; animation-delay: .68s; }
.oiseau.toc .copeau:nth-of-type(3) { --dx: 20px; --dy: -34px; animation-delay: 1.14s; }
@keyframes copeau {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(160deg); }
}

/* ---------- LES TIREUSES ---------- */
.tireuses { position: relative; padding-top: clamp(30px, 5vw, 64px); }
.tireuses__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 18px clamp(28px, 5vw, 72px);
  align-items: end;
}
.tireuses__intro .creole { font-size: var(--t-creole); }
.tireuses__intro p { margin: 0; }
.tireuses__texte p + p { margin-top: .7em; }
.consigne {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px !important;
  font-family: var(--f-main);
  font-size: 1.35rem;
  line-height: 1.1;
}
.consigne svg { width: 46px; height: 46px; flex: none; }
@media (max-width: 860px) {
  .tireuses__intro { grid-template-columns: 1fr; }
}

.mur {
  --col: calc((min(100vw, 1500px) - 2 * var(--gouttiere)) / 8.62);
  --gap: clamp(10px, 1.1vw, 18px);
  --h-acier: calc(var(--col) * 1.68);
  position: relative;
  margin-top: clamp(34px, 4.5vw, 60px);
}
.mur__defile {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* place pour l'étiquette agrandie au survol */
  padding-top: calc(var(--col) * .7);
  margin-top: calc(var(--col) * -.7);
}
.mur__defile::-webkit-scrollbar { display: none; }
.mur__rangee {
  display: flex;
  justify-content: center;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0 var(--gouttiere);
  list-style: none;
}
.biere {
  position: relative;
  width: var(--col);
  flex: none;
  display: flex;
  flex-direction: column;
  scroll-snap-align: center;
}
.biere--eau { width: calc(var(--col) * .62); }

/* l'étiquette, comme les panneaux en plastique alvéolé du bar */
.etiquette {
  --c: #1e4fd8;
  --t: var(--jaune);
  --st: #8fe3f7;
  position: relative;
  z-index: 1;
  margin: 0 calc(var(--gap) / 2);
  aspect-ratio: 5 / 7;
  padding: 7% 7.5% 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: calc(var(--col) * .068);
  color: var(--t);
  background-color: var(--c);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 4px);
  border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(27, 18, 48, .6), 5px 7px 0 rgba(27, 18, 48, .3);
  transform-origin: 50% 100%;
  transition: transform .28s cubic-bezier(.3, .7, .25, 1.25), box-shadow .28s;
}
.etiquette::before, .etiquette::after {
  /* les deux vis */
  content: "";
  position: absolute;
  top: 2.6%;
  width: .32em; height: .32em;
  border-radius: 50%;
  background: rgba(27, 18, 48, .45);
}
.etiquette::before { left: 4%; }
.etiquette::after { right: 4%; }
.etiquette__logo { width: 48%; margin-bottom: 5%; }
.etiquette__houblon { display: block; width: 40%; margin: 2% 0 5%; }
.etiquette__houblon svg { width: 100%; height: auto; }
.etiquette__nom {
  font-weight: 700;
  font-size: 2.15em;
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--t);
  text-shadow: -.06em -.06em 0 var(--encre), .06em -.06em 0 var(--encre), -.06em .06em 0 var(--encre), .06em .06em 0 var(--encre), -.04em .1em 0 var(--encre);
}
.etiquette__marque {
  font-family: var(--f-main);
  font-size: 2.2em;
  line-height: 1;
  margin: .2em 0 .25em;
  color: #23365f;
}
.etiquette__style {
  margin: .35em 0 0;
  font-weight: 500;
  font-size: .78em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--st);
  text-shadow: 0 .06em 0 var(--encre), .05em 0 0 var(--encre), -.05em 0 0 var(--encre), 0 -.05em 0 var(--encre);
}
.etiquette__degre {
  display: flex;
  align-items: center;
  gap: .4em;
  margin: .45em 0 0;
  font-weight: 500;
  font-size: 1em;
  line-height: 1;
}
.profil {
  width: 100%;
  margin: auto 0 0;
  display: grid;
  gap: .32em;
}
.profil div {
  display: grid;
  grid-template-columns: 4.6em 1fr;
  align-items: center;
  gap: .4em;
}
.profil dt {
  font-weight: 600;
  font-size: .74em;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 0 .07em 0 var(--encre), .06em 0 0 var(--encre), -.06em 0 0 var(--encre), 0 -.06em 0 var(--encre);
}
.profil dd { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .18em; height: .62em; }
.profil dd span { border: .09em solid rgba(255, 255, 255, .92); border-radius: 1px; }
.profil dd span.on {
  background: var(--cyan) repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 1px, transparent 1px 3px);
}
.etiquette__notes {
  margin: .55em 0 0;
  font-weight: 500;
  font-size: .8em;
  line-height: 1.15;
  text-shadow: 0 .07em 0 var(--encre), .06em 0 0 var(--encre), -.06em 0 0 var(--encre), 0 -.06em 0 var(--encre);
}
.etiquette__sans {
  margin: auto 0 0;
  padding: .3em .6em;
  font-weight: 600;
  font-size: .9em;
  text-transform: uppercase;
  color: var(--c);
  background: var(--t);
  border-radius: .3em;
}
.etiquette--claire { --st: #1f56c5; }
.etiquette--claire .etiquette__nom { text-shadow: .04em .08em 0 rgba(27, 18, 48, .35); }
.etiquette--claire .etiquette__style { text-shadow: none; }
.etiquette--claire .profil dt { color: #135a2b; text-shadow: none; }
.etiquette--claire .etiquette__notes { color: #135a2b; text-shadow: none; }
.etiquette--claire .profil dd span { border-color: #1e7f3f; }
.etiquette--claire::before, .etiquette--claire::after { background: rgba(27, 18, 48, .25); }

/* le panneau d'acier, les écrans et les robinets */
.tireuse {
  position: relative;
  height: var(--h-acier);
  margin-top: calc(var(--col) * .17);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--col) * .09);
  background-color: #b7bec5;
  background-image:
    url("../img/textures/acier.png"),
    linear-gradient(180deg, rgba(211, 91, 198, .32), rgba(211, 91, 198, 0) 30%),
    linear-gradient(180deg, #eef1f3 0%, #bfc6cc 34%, #dfe3e6 58%, #a5adb4 100%);
  background-size: 256px 64px, auto, auto;
  border-top: 3px solid var(--encre);
}
.biere:first-child .tireuse { border-left: 3px solid var(--encre); border-top-left-radius: 12px; }
.biere:last-child .tireuse { border-right: 3px solid var(--encre); border-top-right-radius: 12px; }
.ecran {
  width: min(64%, 132px);
  aspect-ratio: 16 / 10.5;
  padding: 4%;
  background: #17131c;
  border-radius: 6px;
  box-shadow: 0 3px 0 rgba(27, 18, 48, .45);
  position: relative;
}
.ecran__vitre {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .12em;
  overflow: hidden;
  font-size: min(calc(var(--col) * .062), 12px);
  line-height: 1.05;
  text-align: center;
  color: #fff;
  background: linear-gradient(160deg, #5be291, var(--ecran) 60%, #3fbb70);
  border-radius: 3px;
}
.ecran__marque { font-weight: 700; font-size: .78em; color: var(--jaune); letter-spacing: .04em; }
.ecran__nom { font-weight: 700; font-size: 1.05em; text-transform: uppercase; }
.ecran__msg { font-size: .82em; }
.ecran__cl { font-weight: 700; font-size: 1.25em; display: none; }
.biere.en-service .ecran__cl, .biere.servie .ecran__cl { display: block; }
.biere.en-service .ecran__nom, .biere.servie .ecran__nom { display: none; }
.ecran__carte {
  position: absolute;
  right: -18%;
  top: -24%;
  width: 46%;
  aspect-ratio: 1.586;
  background: var(--lambris);
  border: 2px solid var(--encre);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--encre);
  opacity: 0;
  transform: translate(60%, -40%) rotate(18deg);
  transition: transform .35s cubic-bezier(.3, .7, .3, 1.1), opacity .2s;
  pointer-events: none;
}
.ecran__carte::after {
  content: "";
  position: absolute;
  left: 14%; top: 26%;
  width: 22%; height: 32%;
  background: var(--jaune);
  border: 1.5px solid var(--encre);
  border-radius: 2px;
}
.biere.en-service .ecran__carte { opacity: 1; transform: translate(0, 0) rotate(-8deg); }

.robinet {
  position: relative;
  z-index: 2;
  width: min(30%, 56px);
  margin-top: calc(var(--col) * .04);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.robinet svg { width: 100%; height: auto; overflow: visible; }
.robinet .manche { transform-box: view-box; transform-origin: 30px 31px; transition: transform .28s cubic-bezier(.3, .7, .3, 1.2); }
.robinet:hover .manche { transform: rotate(9deg); }
.biere.en-service .robinet .manche { transform: rotate(32deg); }
.robinet:focus-visible { border-radius: 10px; }

.poste { position: relative; flex: 1; width: 100%; }
.plateau {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18px;
  background:
    radial-gradient(circle, #24222b 0 1.9px, transparent 2.3px) 0 0 / 8px 8px,
    linear-gradient(180deg, #c9cfd4, #8e959c);
  border-top: 2px solid rgba(27, 18, 48, .55);
}
.verre {
  position: absolute;
  bottom: 13px;
  left: 50%;
  z-index: 1;
  width: min(29%, 54px);
  transform: translate(-50%, 0);
  opacity: 0;
  transition: opacity .25s, transform .3s cubic-bezier(.3, .7, .3, 1.2);
}
.verre svg { width: 100%; height: auto; overflow: visible; }
.biere.en-service .verre, .biere.servie .verre { opacity: 1; }
.verre .liquide { fill: var(--liquide, #f2d27c); }
.verre .verre__logo { opacity: .94; }
.verre .mousse { fill: var(--mousse, #fffaf0); }
.verre .bulle { fill: rgba(255, 255, 255, .7); opacity: 0; }
.biere.en-service .verre .bulle, .biere.servie .verre .bulle { animation: bulle 1.4s linear infinite; }
.verre .bulle:nth-of-type(2) { animation-delay: -.5s !important; }
.verre .bulle:nth-of-type(3) { animation-delay: -.95s !important; }
.verre .bulle:nth-of-type(4) { animation-delay: -.25s !important; }
@keyframes bulle {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-46px); }
}
.jet {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 5px;
  margin-left: -2.5px;
  bottom: 18px;
  z-index: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .45), transparent 45%), var(--liquide, #f2d27c);
  border-radius: 3px;
  transform-origin: 50% 0;
  transform: scaleY(0);
  transition: transform .18s ease-in;
}
.biere.verse .jet { transform: scaleY(1); }
.biere.coupe .jet { transform-origin: 50% 100%; transform: scaleY(0); transition: transform .2s ease-out; }

/* étiquette mise en avant quand on la survole ou qu'on la sert */
@media (min-width: 1280px) {
  .mur { margin-top: calc(var(--col) * .62); }
  .etiquette { transform-origin: 50% 78%; }
}
@media (min-width: 1280px) and (hover: hover) {
  .biere:hover .etiquette, .biere.servie .etiquette, .biere.en-service .etiquette {
    transform: translateY(-3%) scale(1.4);
    z-index: 6;
    box-shadow: 0 0 0 2px var(--encre), 6px 10px 0 rgba(27, 18, 48, .45);
    transition-delay: .05s;
  }
}
@media (min-width: 1280px) and (hover: none) {
  .biere.servie .etiquette, .biere.en-service .etiquette {
    transform: translateY(-3%) scale(1.4);
    z-index: 6;
  }
}

/* l'eau, gratuite */
.badge-eau {
  margin: auto calc(var(--gap) / 2) 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  font-size: calc(var(--col) * .068);
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #4fa3ff, #1d57c9 70%);
  border: .22em solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--encre), 4px 5px 0 rgba(27, 18, 48, .3);
}
.badge-eau b { display: block; font-weight: 700; font-size: 1.25em; text-transform: uppercase; line-height: 1; }
.badge-eau span { display: block; font-size: .85em; line-height: 1.1; margin-top: .2em; }
.biere--eau .etiquette-vide { flex: 1; }

/* le dessus du comptoir */
.comptoir-bord {
  height: 30px;
  background-color: #8c4a26;
  background-image:
    url("../img/textures/grain-bois.png"),
    linear-gradient(180deg, #c27a47 0 4px, #a35a2f 4px 60%, #7a3c1c 100%);
  background-size: 384px 96px, auto;
  border-top: 3px solid var(--encre);
  border-bottom: 3px solid var(--encre);
  box-shadow: 0 6px 0 rgba(27, 18, 48, .18);
  position: relative;
  z-index: 2;
}

.tireuses__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  padding: 26px 0 30px;
}
.tireuses__pied p { margin: 0; max-width: 52ch; }

/* tablette : le mur défile */
@media (max-width: 1279px) {
  .mur { --col: 186px; --h-acier: 270px; }
  .mur__defile { scroll-snap-type: x proximity; scroll-padding-inline: var(--gouttiere); }
  .mur__rangee { justify-content: flex-start; }
}
/* téléphone : une tireuse par écran */
@media (max-width: 760px) {
  .mur { --col: 62vw; --h-acier: 282px; --gap: 12px; }
  .mur__defile { scroll-snap-type: x mandatory; }
  .mur__rangee { padding-inline: 19vw; }
  .biere--eau { width: 46vw; }
  .ecran { width: 128px; }
  .ecran__vitre { font-size: 12px; }
  .robinet { width: 58px; }
  .verre { width: 56px; }
}
.mur__nav {
  display: none;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
@media (max-width: 1279px) { .mur__nav { display: flex; } }
.mur__nav button {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--blanc);
  border: 3px solid var(--encre);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--encre);
  cursor: pointer;
}
.mur__nav button svg { width: 22px; height: 22px; }
.mur__nav button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--encre); }

/* ---------- MODE D'EMPLOI : sur la façade turquoise du comptoir ---------- */
.mode { padding: clamp(56px, 8vw, 110px) 0 clamp(64px, 9vw, 120px); }
.mode__tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px clamp(28px, 5vw, 72px);
  align-items: end;
}
.mode__tete p { margin: 0; }
@media (max-width: 860px) { .mode__tete { grid-template-columns: 1fr; } }
.etapes-bloc { position: relative; margin-top: clamp(40px, 5vw, 64px); padding-top: 58px; }
.etapes {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
}
.etapes__rail {
  position: absolute;
  top: 22px;
  left: 10%;
  right: 10%;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--encre) 0 12px, transparent 12px 21px);
}
.carte-toto {
  --p: 0;
  position: absolute;
  top: 2px;
  left: calc(10% + var(--p) * 80%);
  width: 72px;
  aspect-ratio: 1.586;
  transform: translateX(-50%) rotate(-5deg);
  background: var(--lambris);
  border: 3px solid var(--encre);
  border-radius: 8px;
  box-shadow: 3px 3px 0 var(--encre);
  overflow: hidden;
}
.carte-toto img { position: absolute; right: 4%; top: 10%; width: 54%; }
.carte-toto::before {
  content: "";
  position: absolute;
  left: 11%; top: 22%;
  width: 22%; height: 30%;
  background: var(--jaune);
  border: 2px solid var(--encre);
  border-radius: 3px;
}
.carte-toto::after {
  content: "";
  position: absolute;
  left: 11%; right: 11%; bottom: 14%;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--encre) 0 6px, transparent 6px 9px);
  opacity: .55;
}
.etape { position: relative; text-align: center; }
.etape__peinture {
  --planche: 38px;
  position: relative;
  aspect-ratio: 240 / 196;
  border: 3px solid var(--encre);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 5px 5px 0 var(--encre);
  transition: transform .3s cubic-bezier(.3, .7, .3, 1.2);
}
.etape__peinture svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.etape__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin: -24px auto 10px;
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1;
  background: var(--jaune);
  border: 3px solid var(--encre);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--encre);
}
.etape h3 { font-weight: 600; font-size: clamp(1.08rem, .95rem + .4vw, 1.3rem); line-height: 1.15; }
.etape .creole { font-size: clamp(1.2rem, 1rem + .5vw, 1.45rem); }
.etape.active .etape__peinture { transform: translateY(-6px) rotate(-1deg); }
.mode__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: clamp(40px, 5vw, 60px) 0 0;
  padding: 0;
  list-style: none;
}
.mode__notes li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--blanc);
  border: 3px solid var(--encre);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--encre);
  font-weight: 500;
  line-height: 1.25;
}
.mode__notes svg { width: 26px; height: 26px; flex: none; }

/* ---------- les cinq peintures du mur, redessinées ----------
   Au repos, chaque peinture montre la même scène que sur le mur du bar.
   Quand son étape est active (.joue), la scène se joue en boucle. */
.etape__peinture .e-verbe {
  font-family: var(--f-main);
  font-size: 31px;
  letter-spacing: 1px;
  text-anchor: middle;
  stroke-width: 2.8px;
  stroke-linejoin: round;
  paint-order: stroke;
}
.e1-sym text, .e1-carte, .e1-eclat, .e2-q text, .e2-bulles circle, .e4-jet, .e5-bulles circle { transform-box: fill-box; }

/* 1. Créditez : l'argent file dans la carte */
.e1-sym text { transform-origin: center; }
.e1-carte { transform-origin: center; }
.e1-eclat { opacity: 0; transform-origin: center; }
.joue .e1-traits { animation: e1-flux .55s linear infinite; }
.joue .e1-sym text { animation: e1-vole 2.8s cubic-bezier(.55, 0, .75, .3) infinite both; }
.joue .e1-carte { animation: e1-bump 2.8s ease-out infinite; }
.joue .e1-eclat { animation: e1-eclat 2.8s ease-out infinite; }
@keyframes e1-flux { to { stroke-dashoffset: -8; } }
@keyframes e1-vole {
  0%, 10% { transform: translate(0, 0) scale(1); opacity: 1; }
  44% { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: .35; }
  46% { transform: translate(var(--dx), var(--dy)) scale(.25); opacity: 0; }
  47%, 74% { transform: translate(0, 0) scale(.4); opacity: 0; }
  90%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes e1-bump {
  0%, 43% { transform: scale(1); }
  46% { transform: scale(1.07); }
  51%, 55% { transform: scale(1); }
  58.5% { transform: scale(1.07); }
  63%, 68% { transform: scale(1); }
  71% { transform: scale(1.07); }
  76%, 80% { transform: scale(1); }
  83.5% { transform: scale(1.09); }
  89%, 100% { transform: scale(1); }
}
@keyframes e1-eclat {
  0%, 82% { opacity: 0; transform: scale(.3) rotate(0); }
  87% { opacity: 1; transform: scale(1.2) rotate(30deg); }
  97%, 100% { opacity: 0; transform: scale(.5) rotate(60deg); }
}

/* 2. Choisissez : les questions sautillent, la bière change de couleur */
.e2-biere { fill: var(--biere, #f2b630); transition: fill .45s ease; }
.e2-mousse { fill: var(--mousse, #fffaf3); transition: fill .45s ease; }
.e2-q text { transform-origin: 50% 85%; }
.e2-bulles circle { opacity: 0; }
.joue .e2-q text { animation: e2-q 1.3s ease-in-out infinite; }
.joue .e2-bulles circle { animation: e2-bulle 1.7s linear infinite; }
.joue .e2-bulles circle:nth-child(2) { animation-delay: .55s; }
.joue .e2-bulles circle:nth-child(3) { animation-delay: 1.1s; }
@keyframes e2-q {
  0%, 100% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-7px) rotate(-7deg); }
  62% { transform: translateY(0) rotate(5deg); }
}
@keyframes e2-bulle {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: .9; }
  100% { transform: translateY(-62px); opacity: 0; }
}

/* 3. Déposez : la carte glisse sur le lecteur, l'écran se réveille */
.e3-ecran { fill: #2f9be6; }
.e3-txt { fill: #fffaf3; }
.e3-flash { opacity: 0; pointer-events: none; }
.joue .e3-carte { animation: e3-carte 3s cubic-bezier(.25, .75, .35, 1) infinite; }
.joue .e3-fleche { animation: e3-fleche 3s ease-in-out infinite; }
.joue .e3-ecran { animation: e3-ecran 3s ease infinite; }
.joue .e3-txt { animation: e3-txt 3s ease infinite; }
.joue .e3-flash { animation: e3-flash 3s ease-out infinite; }
@keyframes e3-carte {
  0% { transform: translate(78px, 0); opacity: 0; }
  8% { opacity: 1; }
  33% { transform: translate(-4px, 0); }
  39%, 82% { transform: translate(0, 0); opacity: 1; }
  92%, 100% { transform: translate(0, -8px); opacity: 0; }
}
@keyframes e3-fleche {
  0%, 100% { transform: translateX(0); opacity: 1; }
  14% { transform: translateX(-9px); }
  28% { transform: translateX(0); }
  40%, 84% { opacity: .2; }
}
@keyframes e3-ecran {
  0%, 36% { fill: #1f4f78; }
  41%, 88% { fill: #47cf7e; }
  96%, 100% { fill: #1f4f78; }
}
@keyframes e3-txt {
  0%, 36% { fill: #7fa6c6; }
  41%, 88% { fill: #11331f; }
  96%, 100% { fill: #7fa6c6; }
}
@keyframes e3-flash {
  0%, 38% { opacity: 0; }
  41% { opacity: .8; }
  56%, 100% { opacity: 0; }
}

/* 4. Servez-vous : on tire la manette vers soi, la bière coule */
.etape__peinture .e4-manette { transform-box: view-box; transform-origin: 0 0; }
.e4-jet { transform-origin: 50% 0; transform: scaleY(0); }
.etape.joue .e4-manette { animation: e4-manette 3s cubic-bezier(.5, 0, .3, 1) infinite; }
.joue .e4-jet { animation: e4-jet 3s linear infinite; }
.joue .e4-goutte { animation: e4-goutte 3s ease-in infinite; }
.joue .e4-fleche { animation: e4-fleche 3s ease-in-out infinite; }
.joue .e4-vibre { animation: e4-vibre 3s linear infinite; }
@keyframes e4-manette {
  0%, 8% { transform: rotate(0); }
  22%, 64% { transform: rotate(26deg); }
  76%, 100% { transform: rotate(0); }
}
@keyframes e4-jet {
  0%, 21% { transform: scaleY(0); }
  27%, 63% { transform: scaleY(1); }
  69%, 100% { transform: scaleY(0); }
}
@keyframes e4-goutte {
  0% { opacity: 0; transform: translateY(-6px); }
  6%, 18% { opacity: 1; transform: translateY(0); }
  21%, 71% { opacity: 0; transform: translateY(0); }
  76% { opacity: 1; transform: translateY(-5px); }
  86% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(16px); }
}
@keyframes e4-fleche {
  0%, 30%, 100% { transform: translateX(0); }
  12% { transform: translateX(9px); }
}
@keyframes e4-vibre {
  0%, 10%, 26%, 100% { opacity: 1; }
  14%, 22% { opacity: 0; }
  64%, 76% { opacity: 0; }
  80% { opacity: 1; }
}

/* 5. Sirotez : le toto bwa lève le verre, la bière descend */
.etape__peinture .e5-main { transform-box: view-box; transform-origin: 0 0; transform: rotate(-30deg); }
.e5-niveau { transform: translateY(8px); }
.e5-bulles circle, .e5-glou { opacity: 0; }
.etape.joue .e5-main { animation: e5-main 3.4s cubic-bezier(.45, 0, .3, 1) infinite; }
.joue .e5-niveau { animation: e5-niveau 3.4s ease-in-out infinite; }
.joue .e5-glou { animation: e5-glou 3.4s ease infinite; }
.joue .e5-bulles circle { animation: e2-bulle 1.1s linear infinite; }
.joue .e5-bulles circle:nth-child(2) { animation-delay: .5s; }
@keyframes e5-main {
  0%, 6% { transform: rotate(-6deg); }
  26%, 64% { transform: rotate(-40deg); }
  84%, 100% { transform: rotate(-6deg); }
}
@keyframes e5-niveau {
  0%, 26% { transform: translateY(0); }
  64%, 84% { transform: translateY(26px); }
  97%, 100% { transform: translateY(0); }
}
@keyframes e5-glou {
  0%, 30% { opacity: 0; transform: translateY(4px); }
  38%, 58% { opacity: 1; transform: translateY(0); }
  68%, 100% { opacity: 0; transform: translateY(-6px); }
}
@media (max-width: 860px) {
  .etapes-bloc { padding-top: 0; }
  .etapes {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 6px var(--gouttiere) 14px;
    margin-inline: calc(-1 * var(--gouttiere));
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: none;
  }
  .etapes::-webkit-scrollbar { display: none; }
  .etape { scroll-snap-align: start; }
  .etapes__rail, .carte-toto { display: none; }
}

/* ---------- LE HANGAR : parpaings verts ---------- */
.hangar { padding: clamp(64px, 9vw, 120px) 0; border-top: 10px solid var(--soley); box-shadow: inset 0 3px 0 var(--encre); color: var(--encre); }
.hangar__tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px clamp(28px, 5vw, 72px);
  align-items: end;
}
.hangar__tete p { margin: 0; font-weight: 500; }
.puces { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.puces li {
  padding: 6px 13px 7px;
  font-weight: 500;
  color: var(--encre);
  background: var(--soley);
  border: 2.5px solid var(--encre);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--encre);
}
@media (max-width: 860px) { .hangar__tete { grid-template-columns: 1fr; } }
.galerie {
  margin-top: clamp(36px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: clamp(300px, 34vw, 470px) clamp(220px, 23vw, 320px);
  gap: clamp(12px, 1.6vw, 22px);
}
.cadre {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--encre);
  border: 9px solid var(--soley);
  outline: 3px solid var(--encre);
  outline-offset: 0;
  box-shadow: 6px 6px 0 rgba(27, 18, 48, .55);
}
.cadre img, .cadre video { width: 100%; height: 100%; object-fit: cover; }
.cadre figcaption {
  position: absolute;
  left: 10px; bottom: 10px;
  padding: 4px 11px 5px;
  font-family: var(--f-main);
  font-size: 1.2rem;
  line-height: 1.1;
  color: var(--encre);
  background: var(--blanc);
  border: 2.5px solid var(--encre);
  border-radius: 6px;
  transform: rotate(-2deg);
}
.g-vue { grid-column: 1 / span 6; }
.g-video { grid-column: 7 / span 3; }
.g-fle { grid-column: 10 / span 3; }
.g-bar { grid-column: 1 / span 5; }
.g-billard { grid-column: 6 / span 4; }
.g-moby { grid-column: 10 / span 3; }
.g-video video { background: #222; }
.video-pause {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  color: var(--encre);
  background: var(--blanc);
  border: 2.5px solid var(--encre);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--encre);
  cursor: pointer;
}
.video-pause svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .galerie {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: 46vw;
  }
  .g-vue { grid-column: 1 / -1; }
  .g-video { grid-column: 1; grid-row: span 2; }
  .g-fle { grid-column: 2; grid-row: span 1; }
  .g-bar { grid-column: 2; }
  .g-billard { grid-column: 1 / -1; }
  .g-moby { grid-column: 1 / -1; }
  .cadre { border-width: 7px; }
  .cadre figcaption { font-size: 1.05rem; left: 6px; bottom: 6px; }
}

/* ---------- SUR SCÈNE : le mur rouge sous le projecteur ---------- */
.scene {
  position: relative;
  padding: clamp(64px, 8vw, 104px) 0;
  color: var(--blanc);
  border-top: 10px solid var(--soley);
  box-shadow: inset 0 3px 0 var(--encre);
}
.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 48% 62% at 70% 40%, rgba(255, 64, 120, .55), rgba(255, 64, 120, 0) 70%), linear-gradient(180deg, rgba(27, 18, 48, .25), rgba(27, 18, 48, 0) 30%);
  pointer-events: none;
}
.scene > .conteneur {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.scene__texte p { max-width: 46ch; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.scene__texte .titre-panneau { margin-bottom: 18px; }
.agenda { margin: 22px 0 26px; padding: 0; list-style: none; display: grid; gap: 10px; }
.agenda li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-items: center;
  padding: 12px 16px;
  color: var(--encre);
  background: var(--blanc);
  border: 3px solid var(--encre);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--encre);
}
.agenda time {
  grid-row: span 2;
  display: grid;
  place-items: center;
  min-width: 64px;
  padding: 6px 8px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  background: var(--jaune);
  border: 2.5px solid var(--encre);
  border-radius: 8px;
}
.agenda time b { display: block; font-size: 1.6rem; }
.agenda time span { display: block; font-size: .85rem; text-transform: uppercase; }
.agenda strong { font-size: 1.15rem; line-height: 1.15; }
.agenda .vide {
  display: block;
  font-family: var(--f-main);
  font-size: 1.3rem;
  line-height: 1.2;
}
.scene__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.scene__tel { margin-top: 18px; }
.scene__tel a { color: var(--blanc); font-weight: 600; text-decoration-color: var(--jaune); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.scene__visuels {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
}
.affiche {
  margin: 0;
  box-shadow: 8px 8px 0 rgba(27, 18, 48, .55);
}
.affiche img { width: 100%; }
.affiche--1 { transform: rotate(-2.5deg); }
.scene__visuels .cadre { aspect-ratio: 3 / 2; }
.scene__visuels figcaption { font-size: 1.1rem; }
@media (max-width: 900px) {
  .scene > .conteneur { grid-template-columns: 1fr; }
}

/* ---------- INFOS : parpaings violets et l'affiche rouge ---------- */
.infos {
  padding: clamp(64px, 9vw, 120px) 0;
  color: var(--blanc);
  border-top: 10px solid var(--soley);
  box-shadow: inset 0 3px 0 var(--encre);
}
.infos > .conteneur {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.affiche-horaires {
  position: relative;
  padding: 12px;
  background: var(--blanc);
  box-shadow: 8px 8px 0 rgba(27, 18, 48, .5);
  transform: rotate(-1.2deg);
}
.affiche-horaires__fond {
  padding: clamp(20px, 3vw, 34px) clamp(16px, 2.6vw, 32px) clamp(22px, 3vw, 34px);
  background: radial-gradient(ellipse at 50% 30%, #d8382f, #b8261f 75%);
  text-align: center;
  color: var(--jaune);
}
.affiche-horaires__logo { width: 34%; margin: 0 auto 10px; }
.affiche-horaires h2 {
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem);
  line-height: 1;
  text-transform: uppercase;
  text-shadow: -2px -2px 0 #5a0d0d, 2px -2px 0 #5a0d0d, -2px 2px 0 #5a0d0d, 2px 2px 0 #5a0d0d, -3px 4px 0 #5a0d0d;
  margin-bottom: 16px;
}
.jours { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.jours li {
  position: relative;
  display: flex;
  justify-content: center;
  gap: .5em;
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  line-height: 1.3;
  text-transform: uppercase;
  text-shadow: -1.5px -1.5px 0 #5a0d0d, 1.5px -1.5px 0 #5a0d0d, -1.5px 1.5px 0 #5a0d0d, 1.5px 1.5px 0 #5a0d0d, -2px 3px 0 #5a0d0d;
}
.jours li.ferme { opacity: .75; }
.jours li.aujourdhui { color: var(--blanc); }
.jours li.aujourdhui::before {
  content: "";
  position: absolute;
  left: calc(50% - 7.6em);
  top: 50%;
  width: 1.5em; height: 1em;
  transform: translateY(-50%) rotate(-6deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Cpath d='M2 13c8-1 18-1 28-1M22 4l9 8-9 8' fill='none' stroke='%23fffaf3' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.affiche-horaires__note {
  margin: 18px 0 0;
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  text-shadow: -1px -1px 0 #5a0d0d, 1px -1px 0 #5a0d0d, -1px 1px 0 #5a0d0d, 1px 1px 0 #5a0d0d;
}
.infos__acces .titre-panneau { margin-bottom: 18px; }
.adresse { font-style: normal; font-size: 1.3rem; line-height: 1.35; margin-bottom: 18px; }
.adresse strong { display: block; font-weight: 600; font-size: 1.45rem; color: var(--jaune); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.plan {
  position: relative;
  margin-top: 24px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 3px solid var(--encre);
  border-radius: 14px;
  box-shadow: 6px 6px 0 rgba(27, 18, 48, .55);
  background-color: #2b2350;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 28px 28px;
}
.plan iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.plan__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.plan__voile {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: end center;
  padding-bottom: 22px !important;
  justify-items: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
}
.plan__voile p { margin: 0; font-family: var(--f-main); font-size: 1.25rem; color: var(--blanc); }
.plan__voile small { font-size: .85rem; opacity: .8; max-width: 40ch; }
.contact { margin-top: 30px; display: grid; gap: 10px; }
.contact h3 { font-weight: 600; font-size: 1.3rem; color: var(--jaune); }
.contact a { color: var(--blanc); font-weight: 500; font-size: 1.15rem; }
.contact .ligne { display: flex; align-items: center; gap: 10px; }
.contact svg { width: 24px; height: 24px; flex: none; }
@media (max-width: 900px) {
  .infos > .conteneur { grid-template-columns: 1fr; }
  .affiche-horaires { max-width: 440px; margin-inline: auto; width: 100%; }
}