/* The Call — blocs de vente de la landing : avant/après, répertoire qui vend, rareté, formulaire du rappel, questions. */
.v-btn { display: inline-flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 30px; border: 0; border-radius: 99px; background: var(--gold); color: #141210; font: 400 clamp(22px, 2vw, 28px)/1 "Anton"; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .3s, transform .3s var(--ease); }
.v-btn:hover, .v-btn:focus-visible { background: var(--cream); transform: translateY(-2px); }
.v-btn span { transition: transform .3s var(--ease); }
.v-btn:hover span { transform: translateX(4px); }
.v-ico { display: block; width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 5. avant / après ---------- */
.versus { position: relative; padding: var(--s-section) var(--gutter); background: #090807; }
.versus__k { margin: 0 0 var(--s-2); color: #E1261C; }
.versus__t { margin: 0 0 var(--s-6); max-width: 16ch; font: 400 var(--t-l)/.92 "Anton"; text-transform: uppercase; }
.versus__t em { color: var(--gold); }
.versus__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.versus__col { padding: var(--s-5) var(--s-4); border: 1px solid var(--line); border-radius: 6px; }
.versus__col--sans { background: linear-gradient(180deg, rgba(225, 38, 28, .08), transparent 70%); }
.versus__col--avec { border-color: rgba(227, 164, 58, .55); background: linear-gradient(180deg, rgba(227, 164, 58, .14), transparent 70%); }
.versus__lab { margin: 0 0 var(--s-4); letter-spacing: .16em; text-transform: uppercase; }
.versus__col--sans .versus__lab { color: #E1261C; }
.versus__col--avec .versus__lab { color: var(--gold); }
.versus__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.versus__list li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-2); align-items: center; font: 400 clamp(22px, 2vw, 32px)/1.05 "Anton"; text-transform: uppercase; }
.versus__col--sans li { color: rgba(255, 248, 234, .82); }   /* V6-A · colonne de gauche plus claire (AA) */
.versus__col--sans .v-ico { color: #E1261C; }
.versus__col--avec .v-ico { color: var(--gold); stroke-width: 3; }

/* ---------- 8. répertoire : le titre qui vend, les artistes qui défilent ---------- */
.setlist { overflow: hidden; row-gap: var(--s-5); }
.setlist .v-marquee { flex: 0 0 auto; align-self: flex-start; display: flex; width: max-content; margin: 0 0 0 calc(var(--gutter) * -1); animation: marquee 48s linear infinite; }
.setlist .setlist__paper { margin-top: var(--s-4); }
.v-marquee p { margin: 0; padding-right: .4em; white-space: nowrap; font: 400 clamp(40px, 6vw, 96px)/1 "Anton"; text-transform: uppercase; color: rgba(227, 164, 58, .35); }   /* 8.3 · or 35 %, pas brun éteint */
@keyframes marquee { to { transform: translateX(-50%); } }
.setlist__head { flex: 0 0 100%; text-align: center; margin-bottom: var(--s-3); }
.setlist__kk { margin: 0 0 var(--s-2); color: var(--gold); }
.setlist__big { margin: 0 auto; max-width: 18ch; font: 400 var(--t-l)/.92 "Anton"; text-transform: uppercase; }
.setlist__big em { color: var(--gold); }
/* 8.6 · sous le bouton : demander un titre (le formulaire a un champ morceau) */
.setlist__ask { flex: 0 0 100%; margin: calc(var(--s-5) * -1 + 6px) 0 0; text-align: center; }
.setlist__ask a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-decoration-color: rgba(227, 164, 58, .6); text-underline-offset: 4px; transition: color .3s; }
.setlist__ask a:hover, .setlist__ask a:focus-visible { color: var(--gold); }

/* ---------- 9. affiche : la rareté ---------- */
.poster__rare { margin: var(--s-6) auto 0; max-width: 24ch; font: italic 400 clamp(26px, 2.8vw, 42px)/1.15 "Serif"; color: var(--ink); }
.poster__rare em { color: #5A3510; white-space: nowrap; }   /* 9.9 · brun : le rouge sur or manquait de contraste */

/* ---------- 10. le rappel : le formulaire sur scène ---------- */
.rappel__sub { margin-bottom: var(--s-5); }
.booking { width: min(1100px, 100%); margin: 0 auto; padding: clamp(22px, 4vw, 56px); background: #F4EEDF; color: #141210; border-radius: 6px; text-align: left; box-shadow: 14px 16px 0 rgba(0, 0, 0, .55); scroll-margin-top: 90px; }
.rappel__alt { margin: var(--s-5) 0 0; color: rgba(255, 248, 234, .82); letter-spacing: .1em; text-transform: uppercase; }
.rappel__tel { color: var(--gold); text-underline-offset: 4px; white-space: nowrap; }
.rappel__tel:hover, .rappel__tel:focus-visible { color: var(--cream); }

.v-form__grid { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: var(--s-6); align-items: start; }
.v-ticket { position: sticky; top: 90px; padding: 26px 24px; background: #141210; color: var(--cream); border-radius: 6px; transform: rotate(-1.5deg); box-shadow: 10px 12px 0 rgba(20, 18, 16, .18); }
.v-ticket::before, .v-ticket::after { content: ""; position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: #F4EEDF; }
.v-ticket::before { left: -11px; } .v-ticket::after { right: -11px; }
.v-ticket__k { margin: 0; color: var(--gold); }
.v-ticket__line { display: none; }   /* V6 · bandeau d'une ligne : mobile, étapes 2 à 4 */
.v-ticket__t { margin: 6px 0 18px; font: 400 52px/1 "Anton"; text-transform: uppercase; }
.v-ticket dl { margin: 0; display: grid; gap: 10px; border-top: 1px dashed rgba(255, 248, 234, .3); padding-top: 14px; }
.v-ticket dl div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: baseline; }
.v-ticket dt { color: rgba(255, 248, 234, .6); }
.v-ticket dd { margin: 0; font: 400 20px/1.1 "Anton"; text-transform: uppercase; }
.v-ticket dd.is-new { animation: stamp .5s var(--ease); color: var(--gold); }
@keyframes stamp { from { transform: scale(1.4); opacity: 0; } }
.v-ticket__foot { margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed rgba(255, 248, 234, .3); color: rgba(255, 248, 234, .7); }
.v-ticket__stamp { display: inline-block; margin: 16px 0 0; padding: 6px 12px; border: 3px solid #E1261C; border-radius: 4px; color: #E1261C; font-size: 22px; white-space: nowrap; letter-spacing: .04em; text-transform: uppercase; transform: rotate(-6deg); animation: stamp-in .45s var(--ease) both; }
.v-ticket__stamp[hidden] { display: none; }   /* le tampon n'apparaît qu'à l'envoi */
/* V6 · 16.3 le musicien qui a envoyé le lien signe le ticket */
.v-ticket__de { margin: 6px 0 0; color: rgba(255, 248, 234, .78); }
/* V6 · 16.1 page d'un musicien : « Christine vous invite », son affiche au-dessus du micro (créée par vente.js) */
.hero > .invite { position: absolute; z-index: 3; left: var(--gutter); top: clamp(96px, 15vh, 150px); width: clamp(220px, 22vw, 340px); margin: 0; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.invite figcaption { margin: 0 0 14px; color: var(--gold); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.invite figcaption b { font-weight: 500; color: var(--cream); }
.invite__a { padding: 5px; background: var(--cream); border-radius: 2px; transform: rotate(-3deg); box-shadow: 0 1px 1px rgba(0, 0, 0, .35), 0 14px 26px -10px rgba(0, 0, 0, .75), 0 30px 60px -24px rgba(0, 0, 0, .8); }
.invite__a img { display: block; width: 100%; height: auto; }
.invite__go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 10px; color: var(--cream); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 248, 234, .4); }
.invite__go:hover, .invite__go:focus-visible { color: var(--gold); }
.hero > .invite.is-gone { opacity: 0; transform: translateY(-16px); pointer-events: none; }
@media (min-width: 761px) and (max-width: 900px) { .hero > .invite { top: 88px; width: 170px; } .invite figcaption { margin-bottom: 10px; font-size: 11px; letter-spacing: .1em; } }   /* tablette debout : à gauche de « En concert » */
@media (max-width: 760px) {
  .hero > .invite { top: 74px; right: var(--gutter); width: auto; display: grid; grid-template-columns: 116px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; }
  .invite__a { grid-row: 1 / 3; grid-column: 1; padding: 3px; }
  .invite figcaption { grid-column: 2; align-self: end; margin: 0; font-size: 11px; letter-spacing: .1em; }
  .invite__go { grid-column: 2; align-self: start; min-height: 32px; margin: 0; font-size: 11px; }
}
@keyframes stamp-in { from { transform: rotate(-6deg) scale(2.2); opacity: 0; } }

.v-steps-form { min-height: 400px; display: flex; flex-direction: column; }
.v-steps-form [hidden] { display: none !important; }   /* le style des boutons ne doit pas l'emporter sur hidden */
.v-progress { display: flex; align-items: center; gap: 14px; margin-bottom: var(--s-4); color: rgba(20, 18, 16, .66); }
.v-progress i { flex: 1; height: 4px; background: rgba(20, 18, 16, .12); border-radius: 4px; overflow: hidden; }
.v-progress b { display: block; height: 100%; width: 25%; background: #141210; transition: width .5s var(--ease); }
.v-q { margin: 0; padding: 0; border: 0; min-width: 0; }
.v-q__t { padding: 0; margin: 0 0 var(--s-3); font: 400 clamp(32px, 3.4vw, 52px)/1 "Anton"; text-transform: uppercase; }
/* V6 · dernière étape : « Dernière question » au-dessus, Serge en petite photo ronde */
.v-q__lg { display: flex; align-items: center; gap: 16px; }
.v-q__serge { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; filter: var(--grade); box-shadow: 0 0 0 2px #F4EEDF, 0 0 0 4px var(--gold); }
.v-q__k { display: block; margin: 0 0 6px; color: #8A5A16; font-size: 12px; letter-spacing: .14em; }
.v-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.v-chips label { position: relative; cursor: pointer; }
.v-chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.v-chips span { display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; border: 1.5px solid #141210; border-radius: 99px; font: 500 15px/1 "Mono", monospace; letter-spacing: .04em; text-transform: uppercase; transition: background .2s, color .2s; }
.v-chips label:hover span { background: rgba(20, 18, 16, .08); }
.v-chips input:checked + span { background: #141210; color: var(--gold); }
.v-chips input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }   /* V6 · focus or : le rouge reste à l'erreur */
.v-field { display: grid; gap: 6px; margin-bottom: 16px; max-width: 480px; }
.v-field input { min-height: 56px; padding: 0 16px; border: 1.5px solid #141210; border-radius: 6px; background: #FFFBF1; color: #141210; font: 400 18px/1 "Mono", monospace; }
.v-field input:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.v-check { display: flex; gap: 10px; align-items: center; min-height: 44px; margin: -6px 0 16px; cursor: pointer; }
.v-check input { width: 22px; height: 22px; accent-color: #141210; }
.v-err { margin: 0 0 12px; color: #9E2A1F; }
.v-btn--full { width: 100%; max-width: 480px; justify-content: center; margin-top: 8px; background: #141210; color: var(--gold); }
.v-btn--full:hover, .v-btn--full:focus-visible { background: #9E2A1F; color: var(--cream); }
.v-privacy { margin: 12px 0 0; color: rgba(20, 18, 16, .62); }
.v-nav { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: var(--s-4); }
.v-back { min-height: 44px; border: 0; background: none; color: #141210; cursor: pointer; padding: 0; }
.v-next { margin-left: auto; background: #141210; color: var(--gold); min-height: 56px; font-size: 22px; }
.v-next:hover, .v-next:focus-visible { background: #9E2A1F; color: var(--cream); }
.v-next:focus-visible, .v-btn--full:focus-visible, .v-back:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.v-done p { font: italic 400 24px/1.3 "Serif"; margin: 0 0 var(--s-3); }
.v-done .v-q__t { font: 400 clamp(32px, 3.4vw, 52px)/1 "Anton"; }
.v-link { color: #141210; }

/* ---------- 11. questions ---------- */
.faq { max-width: 980px; margin: 0 auto; padding: var(--s-section) var(--gutter); }
.faq__t { margin: 0 0 var(--s-4); font: 400 var(--t-l)/.92 "Anton"; text-transform: uppercase; }
.faq__t em { color: var(--gold); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font: 400 clamp(22px, 2vw, 30px)/1.1 "Anton"; text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary { align-items: center; }
/* V6 · le « + » dans une cible ronde de 44 px */
.faq summary::after { content: ""; flex: none; width: 44px; height: 44px; margin: -6px 0; box-sizing: border-box; border: 1px solid var(--line); border-radius: 50%;
  background: linear-gradient(var(--gold), var(--gold)) center / 14px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 2px 14px no-repeat; transition: transform .4s var(--ease), border-color .3s, background-color .3s; }
.faq summary:hover::after { border-color: var(--gold); background-color: rgba(227, 164, 58, .08); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details.is-closing summary::after { transform: none; }
.faq details p { margin: 0 0 22px; font: italic 400 22px/1.35 "Serif"; color: rgba(255, 248, 234, .85); }

/* apparitions */
.v-in { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.v-in.is-in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .versus__cols { grid-template-columns: 1fr; }
  .v-form__grid { grid-template-columns: 1fr; gap: var(--s-3); }
  /* sur mobile, la question d'abord : le ticket se replie en bandeau */
  .v-ticket { position: relative; top: 0; padding: 12px 16px; transform: none; box-shadow: 6px 6px 0 rgba(20, 18, 16, .18); }
  .v-ticket::before, .v-ticket::after, .v-ticket__t, .v-ticket__foot { display: none; }
  .v-ticket__k { margin-bottom: 8px; }
  .v-ticket dl { grid-template-columns: 1fr 1fr; gap: 6px 14px; padding-top: 8px; }
  .v-ticket dl div { grid-template-columns: 1fr; gap: 2px; }   /* correction V7 · l'intitulé au-dessus : toute la largeur pour la valeur, plus de « 1 SEPTEMBRE … » */
  .v-ticket dd { position: relative; font-size: 16px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .v-ticket__stamp { margin-top: 10px; font-size: 16px; transform: rotate(-3deg); animation-name: stamp-in-m; }
  @keyframes stamp-in-m { from { transform: rotate(-3deg) scale(2); opacity: 0; } }
  .v-progress { margin-bottom: var(--s-3); }
  /* V6 · étapes 2 à 4 : le ticket se réduit en bandeau collant d'une ligne, sous l'en-tête */
  .booking:is([data-step="2"], [data-step="3"], [data-step="4"]) .v-ticket { position: sticky; top: 72px; z-index: 3; padding: 10px 16px; box-shadow: 6px 6px 0 rgba(20, 18, 16, .18), 0 0 0 12px #F4EEDF; transition: top .35s var(--ease); }   /* le liseré crème cache ce qui passe dessous */
  body:has(.bar.is-hidden) .booking .v-ticket { top: 10px; }
  .booking:is([data-step="2"], [data-step="3"], [data-step="4"]) :is(.v-ticket__k, .v-ticket dl) { display: none; }
  .booking:is([data-step="2"], [data-step="3"], [data-step="4"]) .v-ticket__line { display: block; margin: 0; font: 400 18px/1.2 "Anton"; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .v-ticket__line::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 10px 0 0; vertical-align: .18em; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(227, 164, 58, .8); }
}
@media (max-width: 760px) {
  .versus__col { padding: var(--s-3) var(--s-2) var(--s-3) var(--s-3); }   /* V6-A · cartes resserrées */
  .booking { padding: 20px 16px; box-shadow: 8px 10px 0 rgba(0, 0, 0, .55); }
  .v-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .v-chips span { width: 100%; justify-content: center; text-align: center; min-height: 56px; padding: 6px 8px; font-size: 12px; line-height: 1.2; }
  .v-q__t { font-size: 30px; }
  .v-steps-form { min-height: 0; }
  .v-btn--full { font-size: 22px; }
  .rappel__alt { font-size: 11px; line-height: 1.8; }
  .rappel__tel { display: block; margin-top: 4px; font-size: 13px; }
  .v-q__t { font-size: 26px; }
  .v-q__serge { width: 52px; height: 52px; }
  .v-q__lg { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .setlist .v-marquee { animation: none; }
  .v-in { opacity: 1; transform: none; transition: none; }
  .v-ticket dd.is-new, .v-ticket__stamp { animation: none; }
}

/* ---------- landing P0+P1 (01/11) ---------- */
/* P0-2 · le formulaire visible dès l'arrivée au rappel */
.rappel { padding-top: 110px; padding-bottom: 80px; justify-content: flex-start; }
.rappel__k { margin-bottom: 14px; }
.rappel__t { font-size: clamp(72px, 9.4vw, 160px); }
.rappel__sub { margin: 16px 0 28px; font-size: clamp(20px, 1.9vw, 28px); }
/* P0-5/6 · l'affiche demande une date, la rareté passe avant */
.poster__rare { margin: var(--s-3) auto var(--s-5); font-size: clamp(30px, 3.4vw, 52px); }
.poster__soon { font-size: clamp(44px, 5.6vw, 88px); line-height: .95; }
.poster__go { display: inline-flex; align-items: center; min-height: 52px; margin: 22px 0 0; padding: 0 26px; border-radius: 99px; background: #141210; color: var(--gold); font: 400 22px/1 "Anton"; letter-spacing: .02em; transition: background .3s, color .3s; }
.poster__frame:hover .poster__go, .poster__frame:focus-within .poster__go { background: #9E2A1F; color: var(--cream); }
/* P0-8 · ce qu'on vend, lisible sous le nom */
.hero__pitch b { display: block; font: italic 400 clamp(28px, 2.7vw, 44px)/1 "Serif"; letter-spacing: 0; text-transform: none; color: var(--gold); }   /* V6-A · la promesse, plus grande, sur deux lignes */
/* P0-9 · avant / après en gros */
.versus__list li { grid-template-columns: 56px 1fr; font-size: clamp(26px, 2.6vw, 42px); }
.versus .v-ico { width: 56px; height: 56px; }
/* V6-A · des phrases, pas des slogans : bas-de-casse, une ligne chacune */
.versus__list li { grid-template-columns: 44px 1fr; font-size: clamp(21px, 1.95vw, 30px); line-height: 1.15; text-transform: none; letter-spacing: .01em; }
.versus .v-ico { width: 44px; height: 44px; }
.versus__list li.v-in { transition-duration: .8s; }
/* V7 · la date : saisie masquée JJ / MM / AAAA, papier crème, petit agenda or (plus de champ natif gris) */
.v-date input[data-date-mask] { width: 100%; padding-right: 52px; font-size: 20px; letter-spacing: .06em; font-variant-numeric: tabular-nums;
  background: #FFFBF1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M15 4v8M33 4v8M7 10h34v32H7zM7 19h34' fill='none' stroke='%23A06A1C' stroke-width='3.4' stroke-linejoin='round'/%3E%3C/svg%3E") right 18px center / 20px no-repeat; }
.v-date input[data-date-mask]::placeholder { color: rgba(20, 18, 16, .4); letter-spacing: .06em; }
.v-date input[data-date-mask][aria-invalid="true"] { border-color: #B5362A; box-shadow: 0 0 0 3px rgba(181, 54, 42, .18); }
/* P0-12 · le numéro sous le formulaire se lit */
.rappel__alt { font-size: 14px; }
.rappel__tel { font-size: 18px; }
/* V7 · le morceau : un champ papier qui déplie une liste nuit et or (radios natives, plus de <select> gris) */
.v-song__btn { display: flex; align-items: center; width: 100%; min-height: 56px; padding: 0 52px 0 16px; border: 1.5px solid #141210; border-radius: 6px; color: #141210; font: 400 17px/1.2 "Mono", monospace; text-align: left; cursor: pointer;
  background: #FFFBF1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23141210' stroke-width='2.4'/%3E%3C/svg%3E") right 16px center / 20px no-repeat; transition: background-color .2s, color .2s; }
.v-song__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-song__btn:hover { background-color: #FFF4DC; }
.v-song__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.v-song.is-open .v-song__btn { background-color: #141210; color: var(--gold); border-radius: 6px 6px 0 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 15l6-6 6 6' fill='none' stroke='%23E3A43A' stroke-width='2.4'/%3E%3C/svg%3E"); }
.v-song__list { margin-top: -6px; max-height: 296px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1.5px solid #141210; border-top: 0; border-radius: 0 0 6px 6px; background: #141210;
  scrollbar-width: thin; scrollbar-color: rgba(227, 164, 58, .55) transparent; box-shadow: 0 18px 30px -18px rgba(20, 18, 16, .7); }
.v-song__list label { position: relative; display: block; cursor: pointer; }
.v-song__list input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.v-song__list span { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 12px; border-radius: 4px; color: var(--cream); font: 400 15px/1.25 "Mono", monospace; transition: background-color .15s, color .15s; }
.v-song__list span::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(227, 164, 58, .55); transition: background-color .15s, box-shadow .15s; }
.v-song__list i { margin-left: auto; padding-left: 8px; color: rgba(255, 248, 234, .5); font-size: 11px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; text-align: right; }
.v-song__list label:hover span { background: rgba(227, 164, 58, .12); }
.v-song__list input:checked + span { color: var(--gold); }
.v-song__list input:checked + span::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(227, 164, 58, .22); }
.v-song__list input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (max-width: 760px) { .v-song__list i { display: none; } .v-song__list { max-height: 264px; } }
/* V7 · remplissage automatique de Chrome : le champ garde son papier crème (pas de blanc ni de bleu) */
.v-field input:-webkit-autofill, .v-field input:-webkit-autofill:hover, .v-field input:-webkit-autofill:focus, .v-field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #FFFBF1 inset; box-shadow: 0 0 0 1000px #FFFBF1 inset; -webkit-text-fill-color: #141210; caret-color: #141210;
  transition: background-color 9999s ease-out 0s; }
.v-field input:autofill { box-shadow: 0 0 0 1000px #FFFBF1 inset; -webkit-text-fill-color: #141210; caret-color: #141210; }
.v-field input[aria-invalid="true"]:-webkit-autofill { box-shadow: 0 0 0 1000px #FFFBF1 inset, 0 0 0 3px rgba(181, 54, 42, .18); }
/* P1-27 · quatre étapes nommées */
.v-progress { flex-wrap: wrap; gap: 10px 14px; }
.v-dots { display: flex; gap: 6px; flex: 0 0 100%; margin: 0; padding: 0; list-style: none; }
.v-dots li { flex: 1; padding: 6px 0; border-radius: 99px; text-align: center; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(20, 18, 16, .5); background: rgba(20, 18, 16, .06); transition: background .3s, color .3s; }
.v-dots li.is-done { color: rgba(20, 18, 16, .8); background: rgba(227, 164, 58, .35); }
.v-dots li.is-on { color: var(--gold); background: #141210; }
.v-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.v-ticket__k { overflow-wrap: anywhere; }
.v-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* P1-26 · fin : deux liens empilés */
.v-done .v-link { display: block; width: fit-content; margin-top: 10px; }
.v-done button.v-link { padding: 0; border: 0; background: none; color: inherit; font-size: 12px; line-height: 18px; text-align: left; text-decoration: underline; cursor: pointer; display: flex; align-items: flex-start; }   /* comme les liens voisins : .mono non hérité, texte en haut de la zone de 44 px */
.v-done button.v-link[hidden] { display: none; }
/* P1-28 · « Réserver » s'allume en or après l'affiche */
body[data-zone="dates"] .bar__nav .bar__book, body[data-zone="rappel"] .bar__nav .bar__book { background: var(--gold); border-color: var(--gold); color: #141210; }
/* P1-30 · FAQ : questions à gauche, Serge à droite */
.faq { max-width: 1180px; }
.faq__grid { display: grid; grid-template-columns: 1fr 400px; gap: var(--s-6); align-items: stretch; }
.faq__list { align-self: start; }
/* V6 · la carte de Serge à la hauteur de la liste : photo plus grande à gauche, le bouton en bas */
.faq__card { display: grid; grid-template-columns: 132px 1fr; grid-template-rows: 1fr auto; gap: 20px 22px; padding: var(--s-3); border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 248, 234, .04); text-align: left; }
.faq__card img { display: block; width: 132px; height: 100%; min-height: 165px; object-fit: cover; object-position: 50% 20%; border-radius: 6px; filter: grayscale(1) contrast(1.1); }
.faq__card-txt { align-self: center; }
.faq__card .faq__card-go { grid-column: 1 / -1; }
.faq__card-k { margin: 0 0 8px; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
.faq__card-t { margin: 0; font: 400 clamp(26px, 2.2vw, 34px)/1 "Anton"; text-transform: uppercase; }
.faq__card-t em { color: var(--gold); font-style: normal; }
.faq__card-go { width: 100%; justify-content: center; font-size: 17px; white-space: nowrap; }
.faq__card-go .bar__phone { width: 18px; height: 18px; }
@media (min-width: 901px) {
  .faq__t { white-space: nowrap; font-size: min(var(--t-l), 5.4vw); }   /* V6 · le titre sur une ligne */
}
@media (max-width: 900px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__card { grid-template-columns: 104px 1fr; }
  .faq__card img { width: 104px; min-height: 130px; }
}
/* P0-10 · répertoire mobile : 5 titres par set, puis tout */
.setlist__more { display: none; }
@media (max-width: 760px) {
  .rappel { padding-top: 96px; }
  .rappel__t { font-size: clamp(60px, 18vw, 96px); }
  .rappel__alt { font-size: 13px; }
  .rappel__tel { font-size: 17px; }
  .poster__soon { font-size: clamp(40px, 12vw, 60px); }
  .poster__go { font-size: 19px; min-height: 48px; padding: 0 20px; }
  .versus__list li { grid-template-columns: 30px 1fr; gap: 12px; font-size: clamp(19px, 5.2vw, 23px); }
  .versus__list { gap: var(--s-2); }
  .versus .v-ico { width: 30px; height: 30px; }
  .hero__pitch b { font-size: clamp(24px, 6.8vw, 30px); }
  @media (max-height: 720px) { .hero__pitch b { font-size: 22px; } }
  .v-dots li { font-size: 10px; letter-spacing: .08em; }
  .setlist:not(.is-open) .setlist__list--rep li:nth-child(n+6) { display: none; }
  .setlist__more { display: block; margin: var(--s-3) auto 0; min-height: 48px; padding: 0 22px; border: 1.5px solid #141210; border-radius: 99px; background: transparent; color: #141210; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
  /* P0-13 · le bouton d'appel se range avec la barre */
  .bar.is-hidden .bar__call { opacity: 0; transform: translateY(-12px); pointer-events: none; box-shadow: none; }
}
/* l'affiche tient dans l'écran du bureau */
@media (min-width: 761px) {
  .poster__rare { max-width: 44ch; margin: var(--s-2) auto var(--s-4); font-size: clamp(24px, 2.4vw, 38px); }
  .poster__soon { font-size: clamp(40px, 4.4vw, 70px); }
  .poster__go { margin-top: 16px; }
}

/* ---------- landing P2 (01/11) ---------- */
/* 36 · « lundi matin » souligné à la main */
.manifest__text em { position: relative; display: inline-block; }
.scribble { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .3em; overflow: visible; pointer-events: none; }
.scribble path { fill: none; stroke: var(--gold); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
/* 37-38 · le rideau rouge glisse, « sans » s'éteint, « avec » s'allume */
.versus__col { position: relative; overflow: hidden; }
.versus.is-armed .versus__col { transition: opacity .9s var(--ease), filter .9s var(--ease), box-shadow 1s var(--ease); }
.versus.is-armed .versus__col--avec::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, #6E1A12, #9E2A1F 60%, #B5362A); transform-origin: right; transition: transform .7s cubic-bezier(.76, 0, .24, 1) .05s; }
.versus.is-lit .versus__col--avec::after { transform: scaleX(0); }
.versus.is-lit .versus__col--sans { opacity: .8; filter: grayscale(.8); }   /* V6-A · éteinte, mais lisible */
.versus.is-lit .versus__col--avec { box-shadow: 0 0 60px rgba(227, 164, 58, .22), inset 0 0 0 1px rgba(227, 164, 58, .6); }
/* 53 · titres mot à mot */
.wd { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em .1em .2em 0; margin: -.16em -.1em -.2em 0; }
.wd > span { display: inline-block; }
/* 39 · l'artiste du titre survolé, en ombre derrière la feuille */
.setlist__paper::after { content: attr(data-ghost); position: absolute; inset: auto 0 38% 0; z-index: 0; pointer-events: none; text-align: center; font: 400 clamp(60px, 8vw, 130px)/.9 "Anton"; text-transform: uppercase; color: rgba(20, 18, 16, .07); transition: opacity .3s; white-space: nowrap; overflow: hidden; }
.setlist__paper > :not(.poster__tape) { position: relative; z-index: 1; }
/* 42 · le scotch se décolle, la carte se soulève */
.poster__tape { transition: transform .5s var(--ease); transform-origin: 85% 50%; }
.poster__frame:hover .poster__tape { transform: rotate(-7deg) translateY(-5px) scaleY(1.05); }
.poster__frame { transition: box-shadow .4s var(--ease); }
/* 45 · le ticket s'imprime ligne par ligne */
.v-ticket.is-print dl div, .v-ticket.is-print .v-ticket__foot { clip-path: inset(0 100% 0 0); transition: clip-path .5s steps(14); }
.v-ticket.is-printed dl div, .v-ticket.is-printed .v-ticket__foot { clip-path: inset(0 0 0 0); }
.v-ticket.is-printed dl div:nth-child(2) { transition-delay: .2s; }
.v-ticket.is-printed dl div:nth-child(3) { transition-delay: .4s; }
.v-ticket.is-printed dl div:nth-child(4) { transition-delay: .6s; }
.v-ticket.is-printed .v-ticket__foot { transition-delay: .85s; }
/* 47 · feuillets à l'envoi */
.booking { position: relative; }
.v-confetti { position: absolute; z-index: 5; width: 14px; height: 18px; margin: -9px 0 0 -7px; background: #FFFBF1; border: 1px solid rgba(20, 18, 16, .25); background-image: repeating-linear-gradient(0deg, transparent 0 4px, rgba(20, 18, 16, .25) 4px 5px); pointer-events: none; }
.v-confetti.is-gold { background-color: var(--gold); }
/* 50 · le son allumé, les portraits prennent la couleur */
.band__portraits img { transition: opacity .5s var(--ease), transform 1.2s var(--ease), top .9s var(--ease), filter .8s var(--ease); }
body.is-live .band__portraits img.is-on { filter: contrast(1.05) saturate(1.1); }
/* 60 · le micro gravé du pied s'allume */
.foot__sign svg { transition: filter .4s, transform .4s var(--ease); }
.foot__sign:hover svg, .foot:hover .foot__sign svg { filter: drop-shadow(0 0 8px rgba(227, 164, 58, .9)); transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) {
  .v-ticket.is-print dl div, .v-ticket.is-print .v-ticket__foot { clip-path: none; }
  .versus.is-armed .versus__col--avec::after { display: none; }
}

/* ---------- landing P3 (01/11) ---------- */
/* 67 · champ fautif */
.v-field input[aria-invalid="true"] { border-color: #B5362A; box-shadow: 0 0 0 3px rgba(181, 54, 42, .18); }
/* 70 · petits textes en contraste AA */
.v-dots li { color: rgba(20, 18, 16, .66); }
.v-progress { color: rgba(20, 18, 16, .74); }
/* 71 · cibles tactiles de 44 px */
.v-back { min-height: 44px; padding: 0 12px; }
.v-link { display: inline-flex; align-items: center; min-height: 44px; }
.faq summary { min-height: 44px; }
.band__portraits picture { display: contents; }
/* 69 · sans JavaScript : le numéro de Serge à la place du formulaire */
.v-noscript { margin: 0; font: 400 clamp(24px, 2.4vw, 34px)/1.2 "Anton"; text-transform: uppercase; }
.v-noscript a { color: #9E2A1F; }

/* ---------- lot 1 (top 10, 01/11) ---------- */
/* A2 · la grille : une légende accompagne l'ouverture */
.grille__cap { position: absolute; right: var(--gutter); bottom: calc(6vh + 10px); z-index: 2; margin: 0; color: var(--cream); letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(14, 12, 10, .9); }
.grille__cap::before { content: ""; display: inline-block; width: 28px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--gold); }
@media (max-width: 760px) { .grille__cap { right: auto; left: var(--gutter); bottom: auto; top: 104px; font-size: 11px; } }

/* A3 · le manifeste : plein écran, la salle derrière la phrase */
.manifest { max-width: none; min-height: 100svh; padding: var(--s-8) var(--gutter); display: flex; flex-direction: column; justify-content: center; isolation: isolate; overflow: hidden; }
.manifest__text { position: relative; width: 100%; max-width: 1500px; margin: 0 auto; text-shadow: 0 2px 30px rgba(14, 12, 10, .55); }
.manifest__bg { position: absolute; inset: -8% 0; z-index: -2; pointer-events: none; }
/* V6-A · la salle plus claire, étalonnée or */
.manifest__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.12); filter: grayscale(1) sepia(.85) saturate(2.1) hue-rotate(-12deg) brightness(.8) contrast(1.08); }
.manifest__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night) 4%, rgba(14, 12, 10, .3) 26%, rgba(14, 12, 10, .26) 66%, #090807 94%), radial-gradient(80% 70% at 30% 50%, rgba(14, 12, 10, .5), transparent 75%); }
.manifest__text .w { opacity: .3; }
/* V6-A · kicker : l'heure où l'on en parle */
.manifest__k { position: relative; width: 100%; max-width: 1500px; margin: 0 auto var(--s-3); color: var(--gold); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(14, 12, 10, .8); }
.manifest__k::before { content: ""; display: inline-block; width: 28px; height: 1px; margin-right: 12px; vertical-align: middle; background: currentColor; }
/* V6-A · karaoké : le mot se remplit de gauche à droite (position du fond pilotée par main.js) ; l'ombre passe en filtre, sinon elle salit le remplissage */
.manifest.is-karaoke .manifest__text { text-shadow: none; filter: drop-shadow(0 2px 16px rgba(14, 12, 10, .7)); }
.manifest.is-karaoke .manifest__text .w { opacity: 1; padding: .16em .08em .06em 0; margin: -.16em -.08em -.06em 0; color: transparent; background: linear-gradient(90deg, var(--cream) 47%, rgba(255, 248, 234, .2) 53%) 100% 0 / 220% 100% no-repeat; -webkit-background-clip: text; background-clip: text; }
.manifest.is-karaoke .manifest__text em .w { background-image: linear-gradient(90deg, var(--gold) 47%, rgba(227, 164, 58, .26) 53%); }
@media (min-width: 761px) {
  /* V6-A · bureau : la phrase occupe 80 % de la largeur */
  .manifest__k, .manifest__text { max-width: 80vw; }
  .manifest__text { font-size: clamp(52px, 8.9vw, 180px); }
}

/* groupe : la ligne de partage juste sous le cercle du projecteur du dernier prénom (0,78 × min(32vmax, 470 px)), puis plus de vide */
@media (max-width: 900px), (max-width: 1024px) and (orientation: portrait) {
  .band { padding-bottom: var(--s-6); }
  .band .partage { margin-top: calc(.78 * min(32vmax, 470px) - .44 * var(--t-xl) + 6px); }
}
@media (max-width: 760px) { .band { padding-bottom: var(--s-2); } }   /* 6.10 · moins de vide avant « En direct » */

/* A7 · l'affiche : une invitation à remplir, un seul bouton or */
.poster__fill { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin: 22px auto 14px; max-width: 420px; color: rgba(20, 18, 16, .7); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.poster__fill i { flex: 1 1 0; min-width: 48px; height: 0; border-bottom: 2px dashed rgba(20, 18, 16, .45); transform: translateY(-3px); }
.poster__fill .poster__fill-l { flex-grow: 1.6; }
/* 9.2 · les blancs s'écrivent à la main (main.js, hors animations réduites) ; le « à » s'efface, chaque exemple porte sa préposition */
.poster__fill i { position: relative; }
.poster__fill i b { position: absolute; left: -12px; right: -12px; bottom: 4px; font: italic 400 clamp(20px, 1.9vw, 25px)/1 "Serif"; letter-spacing: 0; text-transform: none; text-align: center; white-space: nowrap; color: #141210; transform: rotate(-2deg); clip-path: inset(-30% 100% -30% -6%); }
.poster__fill.is-writing > span:nth-of-type(2) { visibility: hidden; }
/* 9.3 · la carte qui vole vers le formulaire */
.poster__ghost { position: fixed; z-index: 45; box-sizing: border-box; margin: 0; pointer-events: none; text-align: center; color: var(--ink); }
.poster__go, .poster__frame .poster__go { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; margin: 22px 0 0; padding: 0 32px; border-radius: 99px; background: var(--gold); color: #141210; border: 2px solid #141210; box-shadow: 4px 5px 0 #141210; font: 400 clamp(22px, 2vw, 28px)/1 "Anton"; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s; }
.poster__go::after { content: ""; position: absolute; inset: 0; }   /* toute la carte mène au formulaire */
.poster__frame:hover .poster__go, .poster__frame:focus-within .poster__go { background: var(--gold); color: #141210; transform: translate(-2px, -2px); box-shadow: 6px 7px 0 #141210; }
.poster__go:focus-visible { outline: 3px solid #141210; outline-offset: 4px; }
.poster__go span { transition: transform .3s var(--ease); }
.poster__frame:hover .poster__go span { transform: translateX(4px); }
.poster__frame { cursor: pointer; }
@media (max-width: 760px) {
  .poster__go, .poster__frame .poster__go { min-height: 56px; padding: 0 24px; font-size: 21px; }
  .poster__fill { font-size: 12px; }
}

/* vides sous le formulaire et sous la FAQ */
.rappel { padding-bottom: var(--s-8); }
.faq { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.v-steps-form { min-height: 360px; }
@media (max-width: 760px) {
  .rappel { padding-bottom: var(--s-6); }
  .faq { padding-top: var(--s-6); padding-bottom: var(--s-5); }
  .v-steps-form { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .manifest__bg { inset: 0; }
  .poster__go, .poster__go span { transition: none; }
}

/* ---------- lot 2 (top 10, 01/11) ---------- */
/* 1 · Sans / Avec : face-à-face « une playlist » contre « The Call » (visuel seul) */
.versus__cols { grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; }
.versus__who { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.versus__name { margin: 0; font: 400 var(--t-m)/.9 "Anton"; text-transform: uppercase; letter-spacing: .005em; white-space: nowrap; }
.versus__col--sans .versus__name { color: rgba(255, 248, 234, .62); }
.versus__col--avec .versus__name { color: var(--gold); text-shadow: 0 0 28px rgba(227, 164, 58, .45); }
.versus__col--avec .versus__who { border-bottom-color: rgba(227, 164, 58, .45); }
/* le vu-mètre : plat d'un côté, vivant de l'autre */
.versus__eq { display: flex; align-items: flex-end; gap: 4px; height: 44px; flex: none; }
.versus__eq i { width: 5px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: 50% 100%; }
.versus__col--sans .versus__eq { color: rgba(255, 248, 234, .22); }
.versus__col--sans .versus__eq i { transform: scaleY(.07); }
.versus__col--avec .versus__eq { color: var(--gold); filter: drop-shadow(0 0 8px rgba(227, 164, 58, .55)); }
/* V7 B4 · sans le son : une respiration lente et discrète ; avec le son, main.js le fait jouer sur le vrai spectre (.is-reactive) */
.versus__col--avec .versus__eq i { transform: scaleY(.55); animation: vu 1.5s ease-in-out infinite alternate; }
.versus__col--avec .versus__eq i:nth-child(3n) { animation-duration: 1.15s; animation-delay: -.5s; }
.versus__col--avec .versus__eq i:nth-child(3n+1) { animation-duration: 1.35s; animation-delay: -1s; }
.versus__col--avec .versus__eq i:nth-child(4n+2) { animation-duration: 1.05s; animation-delay: -.66s; }
.versus__col--avec .versus__eq i:nth-child(5n) { animation-duration: 1.75s; animation-delay: -.2s; }
@keyframes vu { from { transform: scaleY(.28); } to { transform: scaleY(.88); } }
.versus.is-reactive .versus__col--avec .versus__eq i { animation: none; transition: none; will-change: transform; }
/* V6-A · l'égaliseur de « The Call » reste plat sous le rideau, puis démarre d'un coup à l'entrée de la carte (visuel seul) */
.versus.is-armed:not(.is-lit) .versus__col--avec .versus__eq i { animation: none; transform: scaleY(.07); }
.versus.is-lit .versus__col--avec .versus__eq { transform-origin: 50% 100%; animation: eq-kick .9s cubic-bezier(.2, 1.4, .4, 1) .55s both; }
@keyframes eq-kick { 0% { transform: scaleY(.1); } 35% { transform: scaleY(1.45); } 100% { transform: scaleY(1); } }
/* le « VS » de l'affiche de match, à cheval sur les deux cartes */
.versus__vs { position: relative; z-index: 3; align-self: center; display: grid; place-items: center; width: 92px; height: 92px; margin: 0 -34px; border-radius: 50%; background: #090807; border: 2px solid var(--gold); color: var(--gold); font-size: 34px; letter-spacing: .04em; box-shadow: 0 0 0 8px #090807, 0 0 40px rgba(227, 164, 58, .3); }
/* V6-A · le « VS » frappe à l'arrivée : il tombe, écrase, et une onde or part du rond */
.versus__vs::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; pointer-events: none; }
.versus.is-armed:not(.is-lit) .versus__vs { transform: scale(2.4); opacity: 0; }
.versus.is-lit .versus__vs { animation: vs-hit .55s cubic-bezier(.5, 0, .75, 0) .15s both, vs-glow 1.4s ease-out .7s; }
.versus.is-lit .versus__vs::after { animation: vs-wave .9s cubic-bezier(.16, 1, .3, 1) .7s both; }
.versus.is-lit .versus__cols { animation: vs-shake .4s linear .7s both; }
@keyframes vs-hit { 0% { transform: scale(2.4) rotate(-12deg); opacity: 0; } 70% { transform: scale(.88) rotate(2deg); opacity: 1; } 85% { transform: scale(1.08); } 100% { transform: none; opacity: 1; } }
@keyframes vs-glow { 0% { color: #FFF8EA; text-shadow: 0 0 24px rgba(255, 214, 140, 1); box-shadow: 0 0 0 8px #090807, 0 0 90px rgba(227, 164, 58, .9); } 100% { color: var(--gold); text-shadow: none; box-shadow: 0 0 0 8px #090807, 0 0 40px rgba(227, 164, 58, .3); } }
@keyframes vs-wave { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; border-width: 1px; } }
@keyframes vs-shake { 0%, 100% { transform: none; } 20% { transform: translate(-4px, 2px); } 45% { transform: translate(3px, -2px); } 70% { transform: translate(-2px, 1px); } }
@media (max-width: 900px) {
  .versus__cols { grid-template-columns: 1fr; }
  .versus__vs { justify-self: center; width: 64px; height: 64px; margin: -26px 0; font-size: 24px; box-shadow: 0 0 0 6px #090807; }
}
@media (max-width: 760px) {
  .versus__who { margin-bottom: var(--s-3); padding-bottom: var(--s-2); }
  .versus__eq { height: 30px; gap: 3px; }
  .versus__eq i { width: 4px; }
  .versus__col--sans .versus__eq i:nth-child(n+11), .versus__col--avec .versus__eq i:nth-child(n+11) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .versus__col--avec .versus__eq i { animation: none; }
  .versus__col--avec .versus__eq i:nth-child(odd) { transform: scaleY(.8); }
  .versus__col--avec .versus__eq i:nth-child(3n) { transform: scaleY(.45); }
  .versus__col--avec .versus__eq i:nth-child(4n+2) { transform: scaleY(1); }
}

/* 2 · un seul bouton or par écran (body.gold-on et .is-quiet posés par main.js) */
body.gold-on .bar__call { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
body.gold-on .bar__call:hover, body.gold-on .bar__call:focus-visible { background: var(--cream); color: #141210; box-shadow: none; }
html body.gold-on .bar__nav .bar__book { background: transparent; border-color: currentColor; color: var(--gold); }
html body.gold-on.on-gold .bar__nav .bar__book { color: var(--ink); }
.setlist__cta.is-quiet, .faq__card-go.is-quiet, .sound.is-quiet { background: transparent; color: var(--gold) !important; box-shadow: inset 0 0 0 1.5px currentColor; }
@media (min-width: 761px) {
  /* au rappel, « Réserver » est l'or de la barre : la pastille passe en contour */
  body[data-zone="rappel"] .bar__call { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
}

/* 5 · navigation : la pastille au bord droit de la grille, jamais sur un titre ni à côté d'un autre or */
@media (min-width: 761px) {
  .bar__call { order: 9; }
}
body.gold-on .bar.is-hidden .bar__call, body.title-near .bar.is-hidden .bar__call, body[data-zone="rappel"] .bar.is-hidden .bar__call { opacity: 0; transform: translateY(-12px); pointer-events: none; box-shadow: none; }
@media (max-width: 760px) {
  .dock { padding: 12px 18px; font-size: 18px; }
  body.gold-on .dock.is-on { transform: translateY(calc(100% + 24px)); }
}

/* 3 · le rappel sur l'échelle commune (affiche = --t-xl) */
.rappel__t { font-size: var(--t-xl); }

/* 4 · même étalonnage pour la photo de Serge */
.faq__card img { filter: var(--grade); }

/* 6 · vides resserrés : sous Sans / Avec, et entre le répertoire et l'affiche */
.versus { padding-bottom: var(--s-8); }
.band { padding-top: clamp(64px, 8vw, 112px); }
.setlist { padding-bottom: var(--s-8); }
.dates { padding-top: clamp(64px, 8vw, 112px); }
@media (min-width: 761px) { .dates { padding-bottom: var(--s-6); } }   /* 9.5 · plus de bande or vide sous la carte */

/* ---------- lot 3 · faites tourner l'affiche : six affiches en pile, un seul bouton or qui suit celle du dessus ---------- */
.tourne { position: relative; padding: var(--s-section) var(--gutter) clamp(72px, 9vw, 128px); text-align: center; overflow: clip;
  background: radial-gradient(ellipse 60% 48% at 50% 60%, rgba(227, 164, 58, .12), rgba(227, 164, 58, 0) 72%), var(--night); }
.tourne__k { margin: 0 0 var(--s-2); color: var(--gold); }
.tourne__t { margin: 0; font: 400 var(--t-l)/.92 "Anton"; text-transform: uppercase; letter-spacing: -.005em; }
.tourne__t em { color: var(--gold); font-size: 1.04em; }
.tourne__sub { margin: var(--s-2) auto 0; max-width: 40ch; text-wrap: balance; font: 400 clamp(20px, 2vw, 28px)/1.2 "Serif"; font-style: italic; color: var(--muted); }
/* la pile : du papier crème, de travers, une vraie ombre portée */
/* isolation : les ombres des affiches restent sous le compteur et le bouton */
.pile { position: relative; z-index: 0; isolation: isolate; width: min(640px, 100% - 24px, max(300px, (100svh - 420px) * 1.87)); aspect-ratio: 1224 / 654; margin: clamp(40px, 4.4vw, 64px) auto 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline-offset: 18px; border-radius: 2px; }
.pile:active { cursor: grabbing; }
@property --hint { syntax: "<number>"; inherits: false; initial-value: 0; }
.pile__a { --d: 0; --k: 1; --drag: 0; --dy: 0; --rot: 0; position: absolute; inset: 0; margin: 0; padding: clamp(5px, 1%, 12px); background: var(--cream); border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .35), 0 14px 26px -10px rgba(0, 0, 0, .75), 0 34px 70px -24px rgba(0, 0, 0, .8);
  transform: translate(calc((var(--drag) + var(--hint) * var(--hk, 1)) * 1px + (var(--d) - var(--c0, 0)) * 3px), calc(var(--dy) * 1px + (var(--d) - var(--c0, 0)) * 4px)) rotate(calc(var(--r) * var(--k) + var(--rot) * 1deg + var(--hint) * var(--hk, 1) * .08deg + var(--j, 0deg)));
  transition: transform .5s var(--ease); will-change: transform; }
.pile__a.is-top { --k: .3; }
.pile__a.is-drag { transition: none; }
.pile__a.is-out { transform: translate(calc(var(--dir, 1) * 112%), -5%) rotate(calc(var(--dir, 1) * 15deg)); transition: transform .33s cubic-bezier(.55, 0, .8, .2); }
/* V6 · lancée : elle garde l'élan du geste et ralentit en sortant ; sans élan, elle revient avec un rebond */
.pile__a.is-fling { transform: translate(calc(var(--fx) * 1px), calc(var(--fy) * 1px)) rotate(calc(var(--fr) * 1deg)); transition: transform var(--ft, .4s) cubic-bezier(.2, .7, .35, 1); }
.pile__a.is-spring { transition: transform .65s cubic-bezier(.34, 1.56, .64, 1); }
/* V6 · à l'arrivée, l'affiche du dessus s'écarte seule une fois : « ça se glisse » */
.pile__a.is-hint { animation: pile-hint 1.5s cubic-bezier(.45, 0, .25, 1) both; }
@keyframes pile-hint { 0% { --hint: 0; } 32% { --hint: -64; } 58% { --hint: 16; } 78% { --hint: -5; } 100% { --hint: 0; } }
.pile__a img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(calc(1 - var(--d) * .08)); -webkit-user-drag: none; }
/* grain du papier, sur la photo comme sur la marge */
.pile__a::after { content: ""; position: absolute; inset: 0; background: var(--paper); background-size: 160px; mix-blend-mode: multiply; opacity: .5; pointer-events: none; }
/* le tampon : imprimé en biais après un partage réussi */
.pile__tampon { position: absolute; z-index: 1; right: 7%; bottom: 12%; padding: .12em .4em .06em; border: .09em solid #E1261C; border-radius: .12em; color: #E1261C; background: rgba(14, 12, 10, .28);
  font-size: clamp(22px, 5.2vw, 60px); line-height: 1; white-space: nowrap; pointer-events: none; opacity: 0; transform: rotate(-14deg); box-shadow: inset 0 0 0 .04em rgba(225, 38, 28, .5); }
.pile__a.is-stamped .pile__tampon { opacity: .94; animation: tampon .42s var(--ease) both; }
@keyframes tampon { 0% { opacity: 0; transform: rotate(-14deg) scale(2.3); } 60% { opacity: .94; transform: rotate(-14deg) scale(.94); } 100% { opacity: .94; transform: rotate(-14deg) scale(1); } }
.pile__n, .tourne__go { position: relative; z-index: 1; }
.pile__n { display: flex; justify-content: center; align-items: center; gap: var(--s-3); margin: clamp(28px, 3vw, 40px) 0 0; color: var(--cream); }
.pile__who b { font-weight: 500; color: var(--gold); }
.pile__swipe { color: var(--muted); }
.tourne__go { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 60px; max-width: 100%; margin: var(--s-3) 0 0; padding: 0 30px; border: 0; border-radius: 99px; background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1.5px currentColor;   /* V6 · contour or : le plein or reste au pied */
  font: 400 clamp(20px, 2vw, 28px)/1.05 "Anton"; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; transition: background .3s, color .3s, box-shadow .3s, transform .3s var(--ease); }
.tourne__go:hover, .tourne__go:focus-visible { background: var(--cream); color: #141210; box-shadow: none; transform: translateY(-2px); }
.tourne__go.is-quiet { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1.5px currentColor; }
.tourne__go.is-quiet:hover, .tourne__go.is-quiet:focus-visible { background: var(--cream); color: #141210; box-shadow: none; }
@media (max-width: 760px) {
  .tourne__go { padding: 0 22px; font-size: 19px; }
  .pile { width: calc(100% - 16px); }
  .pile__n { gap: var(--s-2); }
}
@media (prefers-reduced-motion: reduce) {
  .pile__a, .pile__a.is-out, .pile__a.is-fling, .pile__a.is-spring { transition: none; }
  .pile__a.is-hint { animation: none; }
  .pile__a.is-stamped .pile__tampon { animation: none; }
  .pile { cursor: pointer; }
}

/* ---------- V7 lot C · matières et micro-mouvements ---------- */
.scribble path { stroke-dasharray: 1 1.1; }
/* C1 · grands titres : chaque ligne monte depuis son masque (main.js) ; le masque s'ouvre une fois les lignes posées */
.lns { display: flex; flex-direction: column; }   /* flex : les marges négatives des lignes ne fusionnent pas, la hauteur du titre ne change pas */
.ln { display: block; overflow: clip; padding: .32em .25em .2em; margin: -.32em -.25em -.2em; }   /* correction V7 : le masque contient les accents de l'Anton (É, À), les jambages et la pente de l'italique */
/* départ : la ligne entière sous son masque (hauteur + marges internes + 2 px) : aucun accent ne flotte avant la montée ; --k : 1 caché → 0 posé (main.js) */
.ln__in { display: block; transform: translateY(calc(var(--k, 0) * (100% + .52em + 2px))); }
.is-free .ln { overflow: visible; }

/* C2 · « Pause » devient un coup de tampon : encre rouge irrégulière (masque de bruit), arrive une fois avec un impact sec, la feuille tressaille */
.setlist__pause { --sr: 175deg; position: relative; padding: 12px 7px; border: 3px solid currentColor; border-radius: 5px; color: #A8261C; font-size: 15px; letter-spacing: .32em; line-height: 1;
  transform: rotate(var(--sr)); mix-blend-mode: multiply; opacity: .9;
  -webkit-mask: var(--ink-mask) 0 0 / 90px 90px; mask: var(--ink-mask) 0 0 / 90px 90px; }
:root { --ink-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -5.2 3.35'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23i)'/%3E%3C/svg%3E"); }
.setlist__pause.is-armed { opacity: 0; transform: rotate(calc(var(--sr) + 7deg)) scale(1.6); }
.setlist__pause.is-stamped { animation: pause-stamp .42s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes pause-stamp { 0% { opacity: 0; transform: rotate(calc(var(--sr) + 7deg)) scale(1.6); } 35% { opacity: .9; } 100% { opacity: .9; transform: rotate(var(--sr)) scale(1); } }
.setlist__paper.is-hit { animation: paper-hit .3s linear .13s; }
@keyframes paper-hit { 0%, 100% { translate: 0 0; } 20% { translate: 1.6px 1.2px; } 45% { translate: -1.4px -.6px; } 70% { translate: .8px .4px; } 85% { translate: -.4px 0; } }
@media (max-width: 760px) {
  .setlist__pause { --sr: -4deg; justify-self: center; margin: 6px 0; padding: 6px 14px 5px; border: 3px solid currentColor; border-block: 3px solid currentColor; font-size: 15px; }
}

/* C3 · coches au feutre : un trait plein, un halo d'encre qui a bu le papier, un bord un peu tremblé */
.setlist__tick { width: 34px; height: 26px; margin-top: -15px; mix-blend-mode: multiply; }
.setlist__tick path { stroke: #A3241B; stroke-width: 3.1; filter: url(#feutre); stroke-dasharray: 1 1.1; }   /* 1 1.1 : pas de point rouge (trait de longueur nulle à bout rond) sur une coche pas encore tracée */
.setlist__tick path.bleed { stroke: rgba(163, 36, 27, .22); stroke-width: 5.6; filter: none; }

/* C4 · scotch gaffer : bords courts déchirés, trame tissée, translucide, ombre fine qui suit la déchirure */
.poster__tape { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; filter: drop-shadow(0 1px 1.2px rgba(0, 0, 0, .28)) drop-shadow(0 3px 5px rgba(0, 0, 0, .12)); }
.poster__tape::before { content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(110, 92, 60, .07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(110, 92, 60, .06) 0 1px, transparent 1px 2.5px),
    linear-gradient(176deg, rgba(255, 255, 255, .3), transparent 40%),
    linear-gradient(180deg, rgba(246, 238, 216, .8), rgba(226, 214, 184, .74));
  clip-path: polygon(0% 6%, 3.2% 0%, 96.6% 0%, 98.4% 14%, 96.4% 27%, 99.2% 41%, 97% 55%, 100% 68%, 97.6% 83%, 99.3% 100%, 2.4% 100%, 4.4% 88%, 1.4% 74%, 3.8% 60%, .6% 46%, 3.2% 31%, .4% 18%); }

/* C5 + C7 · le billet : papier masqué (vraies encoches + rangée de perforations sur la ligne du talon), filet doré à chaud, reflet qui glisse */
.v-ticket { --py: calc(100% - 52px); --sx: -40; background: transparent; box-shadow: none; filter: drop-shadow(10px 12px 0 rgba(20, 18, 16, .18)); isolation: isolate; }
.v-ticket::before, .v-ticket::after { display: block; content: ""; position: absolute; inset: 0; top: 0; left: 0; right: 0; width: auto; height: auto; margin: 0; border-radius: inherit; pointer-events: none; }
.v-ticket::before { z-index: -1; background: #141210; }
.v-ticket.has-perf::before {
  -webkit-mask: radial-gradient(circle at 0 var(--py), #0000 10.5px, #000 11px), radial-gradient(circle at 100% var(--py), #0000 10.5px, #000 11px), radial-gradient(circle at 50% var(--py), #0000 2.3px, #000 2.9px) 0 0 / 11px 100% repeat-x;
  -webkit-mask-composite: source-in, source-in;
  mask: radial-gradient(circle at 0 var(--py), #0000 10.5px, #000 11px), radial-gradient(circle at 100% var(--py), #0000 10.5px, #000 11px), radial-gradient(circle at 50% var(--py), #0000 2.3px, #000 2.9px) 0 0 / 11px 100% repeat-x;
  mask-composite: intersect, intersect; }
/* le filet : un anneau de 1,5 px, doré pâle au repos ; la bande claire suit --sx (souris, ou balayage à chaque étape) */
.v-ticket::after { z-index: 2; padding: 1.5px;
  background: linear-gradient(115deg, rgba(227, 164, 58, .3) calc(var(--sx) * 1% - 22%), rgba(255, 233, 184, .95) calc(var(--sx) * 1%), rgba(227, 164, 58, .3) calc(var(--sx) * 1% + 22%));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.v-ticket.has-perf::after {
  -webkit-mask: radial-gradient(circle at 0 var(--py), #0000 10.5px, #000 11px), radial-gradient(circle at 100% var(--py), #0000 10.5px, #000 11px), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: source-in, source-in, xor;
  mask: radial-gradient(circle at 0 var(--py), #0000 10.5px, #000 11px) intersect, radial-gradient(circle at 100% var(--py), #0000 10.5px, #000 11px) intersect, linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.v-ticket.has-perf .v-ticket__foot { border-top-color: transparent; }   /* les trous remplacent les pointillés */
@media (max-width: 900px) { .v-ticket.has-perf dl { border-top-color: transparent; } }
.v-ticket__t { background: linear-gradient(115deg, var(--cream) calc(var(--sx) * 1% - 16%), #F3C774 calc(var(--sx) * 1% - 5%), #FFF4D6 calc(var(--sx) * 1%), #D9962F calc(var(--sx) * 1% + 6%), var(--cream) calc(var(--sx) * 1% + 17%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 900px) {
  .v-ticket { filter: drop-shadow(6px 6px 0 rgba(20, 18, 16, .18)); box-shadow: none; }
  .v-ticket::before, .v-ticket::after { display: block; }
  .booking:is([data-step="2"], [data-step="3"], [data-step="4"]) .v-ticket { filter: none; }
}

/* C6 · rouleau : l'ancienne valeur monte et s'efface, la nouvelle arrive par le bas */
.v-ticket dd { position: relative; }
.v-ticket dd > span { display: inline; }
.v-ticket dd.is-roll > span { display: inline-block; max-width: 100%; vertical-align: top; animation: roll-in .28s cubic-bezier(.2, .8, .2, 1) both; }
.v-ticket dd.is-roll::before { content: attr(data-old); position: absolute; left: 0; top: 0; max-width: 100%; overflow: hidden; white-space: nowrap; color: var(--cream); pointer-events: none; animation: roll-out .28s cubic-bezier(.4, 0, .6, 1) both; }
.v-ticket dd.is-rolled.is-new { animation: none; }   /* le rouleau remplace le coup d'échelle ; l'or de la nouvelle valeur reste */
@keyframes roll-in { from { transform: translateY(12px); opacity: 0; } }
@keyframes roll-out { to { transform: translateY(-12px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .setlist__pause.is-armed, .setlist__pause.is-stamped { opacity: .9; transform: rotate(var(--sr)); animation: none; }
  .setlist__paper.is-hit { animation: none; }
  .v-ticket dd.is-roll > span, .v-ticket dd.is-roll::before { animation: none; }
  .v-ticket dd.is-roll::before { display: none; }
}

/* C8 · ressort : les affiches du dessous remontent d'un cran avec un rebond (léger dépassement), chacune avec son inclinaison */
.pile__a.is-rise { transition: transform .72s cubic-bezier(.3, 1.5, .5, 1); }
/* C10 · mobile : la pile est centrée (le décalage des affiches du dessous est réparti des deux côtés), assez étroite pour que les coins inclinés
   restent dans l'écran, et l'invitation à glisser bouge moins loin (l'affiche ne sort plus à gauche) */
@media (max-width: 760px) {
  .pile { width: calc(100% - 40px); }
  .pile__a { --c0: 2.5; --hk: .28; }
}
@media (prefers-reduced-motion: reduce) { .pile__a.is-rise { transition: none; } }

/* C11 · lueur de briquet dans le pied : ambre chaud, sous le texte (rien ne se lit ni ne se clique moins bien), une flamme qui vacille de 2 à 4 % */
.foot__flame { position: absolute; left: 0; top: 0; z-index: -1; width: 560px; height: 560px; margin: -280px 0 0 -280px; pointer-events: none;
  translate: var(--fx, 50%) var(--fy, 50%); opacity: 0; transition: opacity .6s var(--ease); mix-blend-mode: screen; }
.foot__flame::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 110, .26), rgba(240, 140, 48, .12) 42%, rgba(200, 96, 24, .04) 68%, transparent); }
.foot__flame.is-on { opacity: 1; }
.foot__flame.is-on::before { animation: flame-size 1.9s ease-in-out infinite alternate, flame-lum 1.3s ease-in-out infinite alternate; }
@keyframes flame-size { 0% { scale: 1; } 23% { scale: 1.028; } 41% { scale: .985; } 66% { scale: 1.035; } 100% { scale: .99; } }
@keyframes flame-lum { 0% { opacity: 1; } 30% { opacity: .965; } 55% { opacity: 1; } 80% { opacity: .97; } 100% { opacity: .985; } }
.foot__flame.is-still { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
.foot__flame.is-still.is-on { opacity: .7; }
.foot__flame.is-still.is-on::before { animation: flame-size 2.6s ease-in-out infinite alternate; }
body.in-foot .glow { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .foot__flame.is-on::before { animation: none; } }

/* ===================== V8 lot E · finitions ===================== */
/* E33 · carte « 06 Vous » : un filet d'or fin (plus vif en haut, là où tombe la lumière) et un projecteur qui balaie lentement la scène vide.
   Le faisceau ne bouge qu'au transform (aucune repeinte) ; il passe au-dessus du filet et du titre : ils s'allument à son passage. */
.shot__ask { position: relative; isolation: isolate; border-color: transparent; }
.shot__ask::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; padding: 1px; border-radius: inherit;
  background: linear-gradient(180deg, rgba(247, 212, 140, .9), rgba(227, 164, 58, .42) 32%, rgba(227, 164, 58, .22) 68%, rgba(227, 164, 58, .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); transition: opacity .5s var(--ease); opacity: .85; }
.shot__ask:hover::after, .shot__ask:focus-visible::after { opacity: 1; }
.shot__ask::before { content: ""; position: absolute; top: 0; bottom: 0; left: -10%; width: 120%; z-index: 3; pointer-events: none;
  background:
    radial-gradient(12% 5% at 50% 0%, rgba(255, 240, 205, .16), transparent 75%),
    radial-gradient(28% 7% at 50% 93%, rgba(255, 226, 160, .2), transparent 72%),
    conic-gradient(from 162deg at 50% -6%, transparent 0deg, rgba(255, 232, 180, .035) 8deg, rgba(255, 238, 200, .085) 18deg, rgba(255, 232, 180, .035) 28deg, transparent 36deg);
  transform: translateX(-27%); animation: ask-beam 16s cubic-bezier(.45, 0, .55, 1) infinite alternate; will-change: transform; }
@keyframes ask-beam { to { transform: translateX(27%); } }
@media (prefers-reduced-motion: reduce) { .shot__ask::before { animation: none; transform: translateX(-12%); } }

/* E34 · pied : les grands rayons tournent très lentement ; au survol du bouton « Réserver », un halo d'or s'ouvre derrière lui et le logo s'éclaire */
.foot__logo::before { animation-duration: 200s; }
.foot__logo .foot__rays { transition: filter .8s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .foot__go { position: relative; isolation: isolate; }
  .foot__go::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 560px; height: 240px; margin: -120px 0 0 -280px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 206, 122, .44), rgba(227, 164, 58, .2) 46%, rgba(227, 164, 58, .06) 72%, transparent);
    opacity: 0; transform: scale(.3, .5); transition: opacity .5s var(--ease), transform 1.1s var(--ease); }
  .foot__go:has(.foot__book:hover, .foot__book:focus-visible)::before { opacity: 1; transform: none; }
  .foot:has(.foot__book:hover, .foot__book:focus-visible) .foot__rays { filter: brightness(1.35) drop-shadow(0 0 10px rgba(227, 164, 58, .45)); }
}
@media (prefers-reduced-motion: reduce) { .foot__go::before { transform: none; transition: opacity .4s linear; } }

/* E35 · crédit YOKR : l'encart reste sobre ; au survol il s'éclaire de l'intérieur et la flèche glisse */
.yokr { position: relative; isolation: isolate; overflow: hidden; transition: border-color .5s var(--ease), color .4s, background .4s, box-shadow .6s var(--ease); }
.yokr::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 160% at 18% 50%, rgba(227, 164, 58, .14), transparent 62%), radial-gradient(60% 140% at 88% 50%, rgba(227, 164, 58, .1), transparent 70%);
  opacity: 0; transition: opacity .6s var(--ease); }
.yokr__arr { display: inline-block; transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .yokr:hover, .yokr:focus-visible { box-shadow: 0 0 22px -8px rgba(227, 164, 58, .45); }
  .yokr:hover::before, .yokr:focus-visible::before { opacity: 1; }
  .yokr:hover .yokr__arr, .yokr:focus-visible .yokr__arr { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) { .yokr__arr { transition: none; } }

/* E39 · répertoire : la ligne survolée passe à l'or (feuille dorée sur le papier, lisible) ; le morceau qui joue reste doré, avec un petit égaliseur */
.setlist__list--rep li b { background: linear-gradient(100deg, #7A4D10, #A8721F 34%, #C99036 50%, #A8721F 66%, #7A4D10); -webkit-background-clip: text; background-clip: text; transition: color .35s var(--ease); }
.setlist__list--rep li > .mono:first-child { transition: color .35s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .setlist__list--rep li:hover b { color: transparent; }
  .setlist__list--rep li:hover > .mono:first-child { color: #A8721F; }
}
.setlist__list--rep li.is-playing b { color: transparent; }
.setlist__list--rep li.is-playing > .mono:first-child { color: #A8721F; }
.setlist__eq { display: inline-flex; align-items: flex-end; gap: 2px; height: .7em; align-self: center; }
.setlist__list--rep li .setlist__eq i { flex: none; padding: 0; width: 3px; height: 100%; border-radius: 1px; background: #B07A22; transform-origin: 50% 100%; animation: rep-eq calc(var(--beat, .5s) * 1) ease-in-out infinite alternate; }
.setlist__list--rep li .setlist__eq i:nth-child(2) { animation-duration: calc(var(--beat, .5s) * .74); animation-delay: -.2s; }
.setlist__list--rep li .setlist__eq i:nth-child(3) { animation-duration: calc(var(--beat, .5s) * 1.27); animation-delay: -.35s; }
@keyframes rep-eq { 0% { transform: scaleY(.25); } 100% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .setlist__list--rep li .setlist__eq i { animation: none; } .setlist__list--rep li .setlist__eq i:nth-child(1) { transform: scaleY(.5); } .setlist__list--rep li .setlist__eq i:nth-child(3) { transform: scaleY(.7); } }

/* ---------- V8 lot F ---------- */
/* 40 · l'affiche : un mois imprimé ; une seule case s'allume en or (vraie date > date du visiteur > une case qui respire) */
.cal { width: min(100%, 300px); margin: 20px auto 6px; color: var(--ink); text-align: center; }
.cal__m { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; padding-bottom: 7px; border-bottom: 2px solid var(--ink); font: 400 24px/1 "Anton"; text-transform: uppercase; letter-spacing: .01em; }
.cal__m small { font: 400 10px/1 "Mono", monospace; letter-spacing: .16em; color: rgba(20, 18, 16, .62); }
.cal.is-vous .cal__m small, .cal.is-vraie .cal__m small { color: #5A3510; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); list-style: none; margin: 0; padding: 0; }
.cal__dow { margin-bottom: 5px; font-size: 10px; letter-spacing: .1em; color: rgba(20, 18, 16, .55); }
.cal__grid { border-top: 1px solid rgba(20, 18, 16, .3); border-left: 1px solid rgba(20, 18, 16, .3); }
.cal__grid li { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-right: 1px solid rgba(20, 18, 16, .3); border-bottom: 1px solid rgba(20, 18, 16, .3); font: 400 15px/1 "Anton"; color: rgba(20, 18, 16, .4); }
.cal__grid li:empty { background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(20, 18, 16, .06) 5px 6px); }
/* la case : une pastille or posée de travers, comme un autocollant sur l'affiche */
.cal__grid li.is-on { z-index: 1; color: var(--ink); font-size: 19px; background: var(--gold); box-shadow: 0 0 0 2px var(--ink), 3px 4px 0 2px var(--ink), 0 0 26px 6px rgba(227, 164, 58, .55); transform: rotate(-4deg) scale(1.16); }
.cal.is-attente li.is-on { animation: cal-souffle 3.2s ease-in-out infinite alternate; }
@keyframes cal-souffle {
  from { background: rgba(227, 164, 58, .22); box-shadow: 0 0 0 2px rgba(20, 18, 16, .35), 3px 4px 0 2px rgba(20, 18, 16, 0), 0 0 0 0 rgba(227, 164, 58, 0); }
  to { background: var(--gold); box-shadow: 0 0 0 2px var(--ink), 3px 4px 0 2px var(--ink), 0 0 26px 6px rgba(227, 164, 58, .55); }
}
.cal.is-pose li.is-on { animation: cal-pose .55s cubic-bezier(.34, 1.56, .64, 1) both; }   /* une date saisie : la pastille se colle */
@keyframes cal-pose { from { transform: rotate(-14deg) scale(1.9); opacity: 0; } }
@media (min-width: 900px) {
  .poster__frame.has-cal { display: grid; grid-template-columns: minmax(0, 1fr) 248px; column-gap: clamp(28px, 4vw, 48px); align-items: center; max-width: 860px; padding-left: clamp(32px, 4vw, 52px); padding-right: clamp(32px, 4vw, 52px); }
  .poster__frame.has-cal > :not(.cal):not(.poster__tape) { grid-column: 1; }
  .poster__frame.has-cal .poster__go { justify-self: center; }
  .poster__frame.has-cal .cal { grid-column: 2; grid-row: 1 / span 4; width: 100%; margin: 0; }
  .poster__frame.has-cal .poster__soon { font-size: clamp(44px, 4.6vw, 72px); }
}
@media (prefers-reduced-motion: reduce) { .cal.is-attente li.is-on, .cal.is-pose li.is-on { animation: none; } }

/* 41 · la console : les numéros de voie roulent comme sur une table de mixage, puis s'éclairent au niveau de la voie */
.odo { display: inline-flex; vertical-align: top; }
.odo__r { display: inline-block; height: 1.25em; overflow: hidden; }
.odo__s { display: block; will-change: transform; }
.odo__s i { display: block; height: 1.25em; line-height: 1.25em; font-style: normal; text-align: center; }
.band.has-sound .band__list li > span.mono { color: color-mix(in srgb, var(--gold) calc(var(--lvl, 0) * 100%), var(--muted)); text-shadow: 0 0 calc(var(--lvl, 0) * 14px) rgba(227, 164, 58, calc(var(--lvl, 0) * .8)); }
.band.has-sound .band__list li.is-lit > span.mono, .band.has-sound .band__list li.is-solo > span.mono { color: var(--gold); }

/* 42 · la promesse : le fond passe du noir à l'or au fil des mots ; le texte passe à l'encre quand l'or domine (contraste AA gros texte ≥ 3:1 à chaque instant) */
.manifest__or { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--or-a, 0);
  background: var(--paper), linear-gradient(180deg, var(--gold-deep), var(--gold) 20%, var(--gold) 82%, var(--gold-deep)); background-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); }
.manifest.is-or .manifest__text { filter: none; }
.manifest.is-or .manifest__bg { opacity: .35; }   /* sous l'or allumé, la salle n'est plus qu'un filigrane : l'encre garde son contraste */
.manifest.is-karaoke.is-or .manifest__text .w { background-image: linear-gradient(90deg, var(--ink) 47%, rgba(20, 18, 16, .22) 53%); }
.manifest.is-karaoke.is-or .manifest__text em .w { background-image: linear-gradient(90deg, #4A2A0B 47%, rgba(74, 42, 11, .24) 53%); }
.manifest.is-or .manifest__k { color: var(--ink); text-shadow: none; }
.manifest.is-or .scribble path { stroke: #4A2A0B; }

/* 43 · une seule échelle, une seule grille (contrôle du 02/11) : trois tailles de titres — affiche --t-xl, section --t-l, petit titre --t-m —
   et un seul bord gauche, la gouttière (--gutter), pour toutes les sections alignées à gauche */
.manifest__text, .manifest .manifest__text { font-size: var(--t-xl); }   /* était 8,4-8,9 vw (128 px au bureau, 51 au téléphone) : la promesse plein écran est une affiche */
@media (min-width: 761px) { .manifest__k, .manifest__text { max-width: none; } }   /* était 80 vw centré : bord à 144 px, hors grille */
.poster__title, .dates .poster__title { font-size: var(--t-xl); }   /* était 8,6 vw (124 px) : c'est l'affiche */
@media (max-width: 760px) { .poster__title { font-size: var(--t-xl); } }
@media (min-width: 901px) { .faq__t { font-size: var(--t-m); } }   /* était 5,4 vw (78 px) : petit titre, toujours sur une ligne */
.faq { max-width: none; }   /* était 1 180 px centré : bord à 170 px, hors grille */
.poster__soon, .poster__frame.has-cal .poster__soon { font-size: var(--t-m); text-wrap: balance; }   /* était 5,6 vw (80 px) */
.poster__frame.has-cal .poster__fill { width: 100%; }   /* dans la grille de la carte, la ligne « Le … à … » garde sa largeur */
@media (max-width: 899px) { .cal { width: min(100%, 264px); } }
/* V8 F · vraies dates sur téléphone : des billets en ligne (date à gauche, lieu à droite), pas trois affiches empilées sur un écran */
@media (max-width: 760px) {
  .gigs { flex-direction: column; align-items: center; gap: 10px; margin-bottom: var(--s-4); }
  .gig { width: min(100%, 340px); grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: center; padding: 10px 14px; text-align: left; box-shadow: 4px 5px 0 rgba(20, 18, 16, .9); }
  .gig time { grid-row: 1 / span 2; font-size: 22px; padding-right: 14px; border-right: 2px dashed rgba(20, 18, 16, .35); }
  .gig b { font-size: 16px; }
}
.gig-last span { white-space: nowrap; }

/* ---------- V9 lot G2 (02/11) ---------- */
/* 6 · soundcheck du chargement : un VU-mètre à aiguille, à l'encre sur l'or, à la place des baguettes ; la zone rouge s'allume à la crête */
.loader__vu { position: absolute; top: 0; left: 50%; width: clamp(170px, 17vw, 260px); height: auto; translate: -50% 0; overflow: visible; opacity: 0; visibility: hidden; }
.loader__vu .vu__face { fill: rgba(255, 236, 190, .34); stroke: var(--ink); stroke-width: 1.3; }
.loader__vu .vu__arc { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.loader__vu .vu__arc--red { stroke: #9E2A1F; stroke-width: 4.2; }
.loader__vu .vu__ticks line { stroke: var(--ink); stroke-width: 1.1; }
.loader__vu .vu__ticks .vu__red { stroke: #9E2A1F; stroke-width: 1.4; }
.loader__vu text { font: 500 7px/1 "Mono", monospace; fill: var(--ink); text-anchor: middle; }
.loader__vu text.vu__red { fill: #9E2A1F; }
.loader__vu .vu__vu { font: 400 12px/1 "Anton", sans-serif; letter-spacing: .06em; }
.loader__vu .vu__needle { stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.loader__vu .vu__pin { fill: var(--ink); }
.loader__vu .vu__lamp { fill: rgba(20, 18, 16, .28); transition: fill .08s; }
.loader.is-peak .vu__lamp { fill: #E1261C; filter: drop-shadow(0 0 3px #ff5a3c); }
.loader.is-peak .vu__arc--red { stroke: #C4321F; }
@media (max-width: 760px) { .loader__vu { width: 44vw; top: 0; } }

/* 7 · « lundi matin. » : le feutre suit le défilement (main.js : strokeDashoffset piloté) — la pointe qui accroche le papier */
.manifest__text .scribble path { stroke-width: 3.6; }

/* 8 · « Lundi, 9 h 02 » : réveil à clapets (le texte lu reste .sr) */
.flipk { display: inline-flex; align-items: center; vertical-align: middle; }
.flap { position: relative; display: inline-block; width: 1.18em; height: 1.62em; margin: 0 .06em; font-size: 1.75em; letter-spacing: 0; color: var(--gold); perspective: 9em; vertical-align: middle; text-shadow: none; }
.flap > span { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; backface-visibility: hidden; }
.flap__u, .flap__fu { top: 0; border-radius: .16em .16em 0 0; background: linear-gradient(180deg, #2A241D, #1C1814); transform-origin: 50% 100%; }
.flap__d, .flap__fd { bottom: 0; border-radius: 0 0 .16em .16em; background: linear-gradient(180deg, #17130F, #0F0C0A); transform-origin: 50% 0; box-shadow: 0 .12em .2em rgba(0, 0, 0, .45); }
.flap__fu, .flap__fd { z-index: 2; visibility: hidden; }
.flap b { display: block; height: 1.62em; line-height: 1.62em; text-align: center; font-weight: 500; }
.flap__d b, .flap__fd b { margin-top: -.81em; }
.flap::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; background: rgba(0, 0, 0, .7); box-shadow: 0 1px 0 rgba(255, 248, 234, .06); }
.flipk__sep { margin: 0 .1em 0 .3em; }
.flipk > .flap:first-child { margin-left: .3em; }
@media (max-width: 760px) { .flap { font-size: 1.5em; } }
.manifest.is-or .flap { color: var(--gold); }

/* 9 · « Une playlist » : terne, désaturée, typo presque éteinte (contraste ≥ 4,5:1 gardé pour la liste, ≥ 3:1 pour le gros nom) */
.versus__col--sans { filter: grayscale(1); }
.versus__col--sans .versus__name { color: rgba(255, 248, 234, .4); transition: color .9s var(--ease); }
.versus__col--sans li { color: rgba(255, 248, 234, .56); transition: color .9s var(--ease); }
.versus__col--sans .v-ico { color: rgba(255, 248, 234, .3); }
.versus__col--sans .versus__eq { color: rgba(255, 248, 234, .14); }
.versus.is-lit .versus__col--sans { opacity: 1; filter: grayscale(1) contrast(.92); }
.versus.is-lit .versus__col--sans .versus__name { color: rgba(255, 248, 234, .36); }

/* 10 · « Cinq voix » : plus de halo flou qui mange les épaules ; un tirage de chambre noire, bords brûlés (filtre #tc-burn posé par main.js),
   bord net, ombre portée dure, posé un peu de travers */
.band__portraits img { box-shadow: 18px 22px 0 rgba(0, 0, 0, .62); rotate: -1.2deg; }
.band__portraits img[data-portrait="serge"] { rotate: .9deg; }
.band__portraits img[data-portrait="alain"] { rotate: -.6deg; }
.band__portraits img[data-portrait="lionel"] { rotate: 1.1deg; }
.band__portraits.has-burn img { filter: url(#tc-burn) grayscale(1) sepia(.55) saturate(1.6) hue-rotate(-10deg) contrast(1.1) brightness(.98); }
body.is-live .band__portraits.has-burn img.is-on { filter: url(#tc-burn) contrast(1.05) saturate(1.1); }
/* téléphone : le tirage passe derrière les prénoms ; plus sombre tant que le son est coupé, les noms restent lisibles */
@media (max-width: 760px) { .band__portraits img { box-shadow: 10px 13px 0 rgba(0, 0, 0, .62); } .band__portraits.has-burn img { filter: url(#tc-burn) grayscale(1) sepia(.55) saturate(1.6) hue-rotate(-10deg) contrast(1.05) brightness(.7); } }
/* 4 et 10 · définitions de filtres SVG posées par main.js : hors du flux */
.shock-defs, .burn-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
/* V9 · signature du studio sous l'écran de fin : petit texte gris sous un filet (le partage reste la seule action) */
.v-done .v-done__yokr { margin: var(--s-3) 0 0; padding-top: 12px; border-top: 1px solid rgba(20, 18, 16, .14); font: 400 11px/1.4 "Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.v-done__yokr a { color: rgba(20, 18, 16, .62); text-decoration: none; transition: color .3s; }
.v-done__yokr a:hover, .v-done__yokr a:focus-visible { color: #141210; text-decoration: underline; text-underline-offset: 3px; }