:root{
  --paper:#fffced;
  --ink:#000;
  --grid:rgba(29,29,27,.46);
  --red:#ff0a0a;
  --ease:cubic-bezier(.22,.74,.22,1);
  --event-transition:920ms;
  /* Épaisseur des filets de fond, doublée le 11 septembre 2026 à la demande de
     Bastien (1px à l'origine). Une seule valeur pour les verticales de la
     grille ET les horizontales mobiles, sinon les deux systèmes divergent. */
  --grid-line:2px;
  --grid-cols:5;
  --grid-rows:5;
  --display-font:"Plaak 41 Ultracondensed Bold","WMZZXA+Plaak-41-UltracondensedBold","Plaak 41 Ultracondensed","Plaak 41","Arial Narrow",Impact,sans-serif;
  --condensed-font:"GT America Condensed Bold","GT America Condensed","Arial Narrow",Arial,sans-serif;
  --event-title-top:10%;
  --event-lineup-top:46%;
  --event-date-top:55%;
  --utility-row:69%;
  --crown-row:82%;
}
@font-face{
  font-family:"Plaak 41 Ultracondensed Bold";
  /* ⚠️ `?v=` sur les URL : le fichier Plaak a été RECOMPOSÉ le 17 septembre 2026
     (ajout des À Â Ä majuscules) en gardant le même nom. Sans version dans
     l'URL, un visiteur déjà venu garderait l'ancien fichier, donc un À en Arial
     au milieu d'un titre. Incrémenter à chaque modification du .woff2.
     Les local() d'abord : qui a la fonte installée ne télécharge rien. */
  src:local("Plaak 41 Ultracondensed Bold"),
      local("Plaak-41-UltracondensedBold"),
      local("WMZZXA+Plaak-41-UltracondensedBold"),
      url("assets/fonts/plaak41-ultracondensed-bold.woff2?v=2") format("woff2"),
      url("assets/fonts/plaak41-ultracondensed-bold.woff?v=2") format("woff");
  font-style:normal;
  font-weight:700;
  /* block, pas swap : le titre porte toute la composition. Avec swap, l'arrivée
     tardive de la fonte le ferait sauter d'Arial large à l'ultracondensé sous
     les yeux du visiteur. 8 Ko depuis le même serveur, l'attente est invisible. */
  font-display:block;
}

@font-face{
  font-family:"GT America Condensed Bold";
  /* Fonte de marque du Drive Braconnier (identité phase 2). Vraie livraison de
     fonderie : 460 glyphes, latin complet. Elle porte tout sauf le titre —
     plateau, date, TICKETS, manifeste, adresse — qui retombaient sur Arial
     Narrow avant le 11 septembre 2026. */
  src:local("GT America Condensed Bold"),
      local("GTAmerica-CondensedBold"),
      url("assets/fonts/gt-america-condensed-bold.woff2") format("woff2"),
      url("assets/fonts/gt-america-condensed-bold.woff") format("woff");
  font-style:normal;
  font-weight:700;
  font-display:block;
}


*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--paper)}
body{overflow:hidden;color:var(--ink);font-family:var(--condensed-font)}
img{display:block;max-width:100%;height:auto;user-select:none;-webkit-user-drag:none}
a{color:inherit}

/* L'attribut hidden ne suffit pas ici : la règle [hidden]{display:none} du
   navigateur a la même spécificité que .ticket{display:grid} ou que les
   .event-kicker-text{position:absolute}, et les styles d'auteur l'emportent sur
   ceux du navigateur. Sans ces deux lignes, un élément marqué hidden resterait
   visible. Utile dès qu'une fiche n'a pas encore de billetterie. */
.ticket[hidden],
.event-kicker-text[hidden]{display:none!important}
button{font:inherit;color:inherit}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* --------------------------------------------------------------------------
   Canvas + grille
   -------------------------------------------------------------------------- */
.landing{
  position:relative;
  width:100vw;
  height:100vh;
  height:100dvh;
  min-height:520px;
  overflow:hidden;
  isolation:isolate;
  background:var(--paper);
  overscroll-behavior:none;
  touch-action:pan-x pan-y;
}
.grid{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right,transparent calc(100% - var(--grid-line)),var(--grid) calc(100% - var(--grid-line))),
    linear-gradient(to bottom,transparent calc(100% - var(--grid-line)),var(--grid) calc(100% - var(--grid-line)));
  background-size:calc(100% / var(--grid-cols)) 100%,100% calc(100% / var(--grid-rows));
  background-repeat:repeat-x,repeat-y;
}

/* --------------------------------------------------------------------------
   Transition entre événements
   Le filet rouge s’ouvre en plein écran, affiche la couronne noire, puis
   se referme proprement en filet sur l’axe central de la grille.
   -------------------------------------------------------------------------- */
.grid-sweep{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  background:var(--red);
  transform:scaleX(.0035);
  transform-origin:50% 50%;
  will-change:transform,opacity;
}
.grid-sweep__crown{
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(190px,19vw,340px);
  height:auto;
  translate:-50% -50%;
  opacity:0;
  transform:scale(.82);
  transform-origin:center;
  will-change:opacity,transform;
  filter:brightness(0);
}
.landing.is-sweeping-next .grid-sweep,
.landing.is-sweeping-prev .grid-sweep{animation:gridPanel var(--event-transition) var(--ease) both}
.landing.is-sweeping-next .grid-sweep__crown,
.landing.is-sweeping-prev .grid-sweep__crown{animation:gridCrown var(--event-transition) var(--ease) both}
.landing.is-sweeping-next .event-nav,
.landing.is-sweeping-prev .event-nav{opacity:0}

@keyframes gridPanel{
  0%{opacity:0;transform:scaleX(.0035)}
  7%{opacity:1;transform:scaleX(.0035)}
  31%{opacity:1;transform:scaleX(1)}
  62%{opacity:1;transform:scaleX(1)}
  84%{opacity:1;transform:scaleX(.0035)}
  94%{opacity:1;transform:scaleX(.0035)}
  100%{opacity:0;transform:scaleX(.0035)}
}
@keyframes gridCrown{
  0%,25%{opacity:0;transform:scale(.82)}
  38%{opacity:1;transform:scale(1)}
  58%{opacity:1;transform:scale(1)}
  70%{opacity:0;transform:scale(.94)}
  100%{opacity:0;transform:scale(.94)}
}

/* --------------------------------------------------------------------------
   Deck multi-événements
   -------------------------------------------------------------------------- */
.event-deck,.event-slide,.event-layout{position:absolute;inset:0}
.event-deck{z-index:2}
.event-slide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0,0,0);
  will-change:transform,opacity;
}
.event-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:2}
.event-slide.is-entering-next,.event-slide.is-entering-prev,.event-slide.is-leaving-next,.event-slide.is-leaving-prev{visibility:visible;z-index:3}
.event-slide.is-entering-next{animation:eventInNext var(--event-transition) var(--ease) both}
.event-slide.is-entering-prev{animation:eventInPrev var(--event-transition) var(--ease) both}
.event-slide.is-leaving-next{animation:eventOutNext var(--event-transition) var(--ease) both}
.event-slide.is-leaving-prev{animation:eventOutPrev var(--event-transition) var(--ease) both}
@keyframes eventInNext{0%,45%{opacity:0;transform:translate3d(1.4vw,0,0)}72%,100%{opacity:1;transform:none}}
@keyframes eventOutNext{0%,20%{opacity:1;transform:none}47%,100%{opacity:0;transform:translate3d(-1.4vw,0,0)}}
@keyframes eventInPrev{0%,45%{opacity:0;transform:translate3d(-1.4vw,0,0)}72%,100%{opacity:1;transform:none}}
@keyframes eventOutPrev{0%,20%{opacity:1;transform:none}47%,100%{opacity:0;transform:translate3d(1.4vw,0,0)}}

/* --------------------------------------------------------------------------
   Contenu éditable — desktop 5 × 5
   -------------------------------------------------------------------------- */
.event-kicker-text,
.event-title-text,
.event-date-text,
.manifesto-text,
.address-text,
.email-text{
  position:absolute;
  z-index:2;
  margin:0;
  color:var(--ink);
}

.event-kicker-text{
  left:50%;
  top:var(--event-lineup-top);
  width:min(64vw,1160px);
  translate:-50% 0;
  font-family:var(--condensed-font);
  font-size:clamp(24px,2.25vw,44px);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.025em;
  text-align:center;
  text-transform:uppercase;
  white-space:nowrap;
}
.event-kicker-text.event-kicker-text--lineup{
  width:92%;
  font-size:clamp(16px,1.65vw,32px);
  line-height:1;
  white-space:normal;
}

.event-title-text{
  left:50%;
  top:var(--event-title-top);
  width:96%;
  translate:-50% 0;
  font-family:var(--display-font);
  font-size:clamp(140px,min(18vw,24vh),340px);
  font-weight:700;
  line-height:.74;
  letter-spacing:-.022em;
  text-align:center;
  text-transform:uppercase;
  white-space:normal;
}
.event-title-text > .event-title-line{display:block}

/* ==========================================================================
   TITRE SUR UNE SEULE LIGNE (22 octobre 2026, demandé par Bastien)
   ==========================================================================
   Un titre d'un seul mot — Lescop, André Borbé — occupait la hauteur d'UNE
   ligne dans un bloc dessiné pour deux, et paraissait tout petit à côté des
   fiches à deux lignes.

   `font-size:1.74em` est relatif au corps du PARENT : le titre d'une ligne
   grandit donc automatiquement, quelle que soit la media query qui s'applique
   au parent, sans avoir à redéclarer la valeur partout.

   ⚠️ Le coefficient est 1.74 et NON 2. Le calcul théorique donne 2 (deux lignes
   d'interligne .74 = 1.48em, qu'une ligne de 2em reproduit), mais mesuré dans
   le navigateur, 2em donnait une encre de 312px contre 279px pour deux lignes :
   une ligne unique est centrée dans sa boîte et déborde donc des deux côtés,
   là où la première de deux lignes est calée en haut. À 2em le titre venait
   buter dans le plateau et ne laissait que 7px sous le compteur. 1.74 aligne
   l'encre sur celle des fiches à deux lignes.

   La largeur reste gérée par `fitEventTitles()` dans script.js, qui réduit le
   parent si le mot est trop long — l'enfant suit, puisqu'il est en em.
   -------------------------------------------------------------------------- */
.event-title-text > .event-title-line:only-child{font-size:1.74em}
.mobile-title-break{display:none}

/* Date volontairement plus contenue : elle garde un vide optique comparable
   au-dessus (artiste) et en dessous (TICKETS), sans casser l’axe de grille. */
.event-date-text{
  left:50%;
  top:var(--event-date-top);
  translate:-50% 0;
  font-family:var(--condensed-font);
  font-size:clamp(46px,4.8vw,92px);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.04em;
  white-space:nowrap;
}

.ticket{
  position:absolute;
  z-index:5;
  left:50%;
  top:var(--utility-row);
  translate:-50% -50%;
  width:clamp(150px,11.45vw,220px);
  height:clamp(54px,7.5vh,82px);
  display:grid;
  place-items:center;
  overflow:hidden;
  border:2px solid var(--ink);
  background-color:var(--red);
  background-image:linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;
  background-position:top;
  background-size:100% 0%;
  color:var(--ink);
  text-decoration:none;
  font-family:var(--condensed-font);
  font-size:clamp(28px,2.2vw,42px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.045em;
  text-transform:uppercase;
  transition:background-size .52s var(--ease),color .32s ease .12s;
}
.ticket span{position:relative;z-index:1;transition:transform .38s var(--ease)}
.ticket:hover,.ticket:focus-visible{background-size:100% 100%;color:var(--red)}
.ticket:hover span,.ticket:focus-visible span{transform:translateY(1px)}
.ticket:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.ticket:active span{transform:translateY(2px) scale(.97)}

.event-bottom-stack{display:contents}
.manifesto-text{
  left:2.344%;
  top:var(--utility-row);
  translate:0 -50%;
  width:min(24.22vw,465px);
  padding:clamp(8px,.68vw,13px) clamp(8px,.55vw,11px);
  border:1.5px solid var(--ink);
  font-family:var(--condensed-font);
  font-size:clamp(11px,.8vw,16px);
  font-weight:700;
  line-height:1.02;
  text-align:center;
}
.partner-media{
  position:absolute;
  z-index:2;
  right:2.083%;
  top:var(--utility-row);
  translate:0 -50%;
  width:min(15.1vw,290px);
}
.crown-media{
  position:absolute;
  z-index:2;
  left:50%;
  top:var(--crown-row);
  translate:-50% 0;
  width:min(12.76vw,245px);
}
.footer{position:absolute;inset:0;z-index:3;pointer-events:none}
.address-text,.email-text{
  bottom:3.35%;
  font-family:var(--condensed-font);
  font-size:clamp(17px,1.25vw,24px);
  font-weight:700;
  line-height:.95;
  letter-spacing:-.025em;
  text-transform:uppercase;
  white-space:nowrap;
}
.address-text{left:2.7%}
.email-text{right:2.7%;pointer-events:auto}
.email-text a{text-decoration:none}
.email-text a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s var(--ease);
}
.email-text a:hover::after,.email-text a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.email-text a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* --------------------------------------------------------------------------
   Navigation discrète, centrée au-dessus de la composition
   -------------------------------------------------------------------------- */
.event-nav{
  position:absolute;
  z-index:12;
  left:50%;
  top:2.05%;
  translate:-50% 0;
  display:grid;
  grid-template-columns:28px auto 28px;
  align-items:center;
  gap:4px;
  opacity:.54;
  transition:opacity .25s ease;
}
.landing[data-event-count="1"] .event-nav{opacity:0;pointer-events:none}
.event-nav:hover,.event-nav:focus-within{opacity:1}
.event-nav__button{
  width:28px;
  height:28px;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:24px;
  font-weight:700;
  line-height:1;
  opacity:.72;
  transition:opacity .22s ease,color .22s ease,transform .24s var(--ease);
}
.event-nav__button:hover,.event-nav__button:focus-visible{color:var(--red);opacity:1;transform:scale(1.08)}
.event-nav__button:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.event-nav__count{min-width:52px;text-align:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.event-nav__count i{font-style:normal;opacity:.42;margin-inline:3px}
.event-nav__hint{display:none}

/* --------------------------------------------------------------------------
   Intro légère
   -------------------------------------------------------------------------- */
.entrance{opacity:0;will-change:transform,opacity;transition:opacity .66s ease,transform .82s var(--ease)}
.entrance-kicker{transform:translateY(-10px)}
/* ⚠️ Les insets VERTICAUX sont négatifs, et ce n'est pas un détail.
   Le titre est révélé par un clip-path qui balaie de gauche à droite. Avec
   `inset(0 …)`, la zone de découpe épouse la boîte du titre — or l'interligne
   .74 fait dépasser les lettres AU-DESSUS de cette boîte. Les accents des
   capitales (É, È, À) étaient donc coupés net : « ANDRÉ BORBÉ » s'affichait
   « ANDRE BORBE », et le À greffé dans la police le 17 septembre n'a jamais été
   visible. Les -50% élargissent la découpe en haut et en bas sans toucher au
   balayage horizontal, qui reste le seul inset animé. */
.entrance-hero{transform:translateY(-2vh);clip-path:inset(-50% 100% -50% 0);transition:opacity .62s ease,transform .88s var(--ease),clip-path 1.02s var(--ease)}
.entrance-date,.entrance-ticket{transform:translateY(12px)}
.entrance-left,.entrance-footer-left{transform:translateX(-16px)}
.entrance-right,.entrance-footer-right{transform:translateX(16px)}
.entrance-crown{transform:translateY(12px) scale(.96)}
.is-ready .event-slide.is-active .entrance{opacity:1;transform:none}
.is-ready .event-slide.is-active .entrance-hero{clip-path:inset(-50% 0 -50% 0)}
.is-ready .event-slide:not(.is-active) .entrance{opacity:1;transition:none;transform:none}
.is-ready .event-slide:not(.is-active) .entrance-hero{clip-path:none}

/* Plaak : le vrai fichier est ciblé par son nom. Sans webfont déclaré par le
   thème/WordPress, le fallback reste éditable et est resserré visuellement. */
.landing.needs-plaak-fallback .event-title-text{width:132%;transform:scaleX(.72);transform-origin:50% 0}
.landing.needs-plaak-fallback .entrance-hero{transform:translateY(-2vh) scaleX(.72)}
.is-ready .landing.needs-plaak-fallback .event-slide.is-active .entrance-hero,
.is-ready .landing.needs-plaak-fallback .event-slide:not(.is-active) .entrance-hero{transform:scaleX(.72)}
.landing.has-plaak .event-title-text{width:96%;transform:none}

/* ==========================================================================
   DÉGAGEMENT EN HAUT DU TITRE (22 octobre 2026)
   ==========================================================================
   Signalé par Bastien : « le haut est un peu coupé ». Mesuré avant correction,
   l'écart entre le bas du compteur « 01 / 08 » et le haut de l'encre du titre :
   10px à 1440×900, 6px à 1512×790, 4px à 1440×760, 2px à 1440×710, et carrément
   NÉGATIF (-7px) sous 620px de haut, où le titre passait au-dessus du compteur.

   POURQUOI. Le titre est en `line-height:.74` : son encre déborde d'environ 13%
   de son corps AU-DESSUS de sa propre boîte. `--event-title-top:10%` ne fait pas
   assez de pixels pour l'absorber dès que la fenêtre n'est plus très haute.
   L'auto-ajustement de script.js ne protège pas de ça, il ne corrige que la
   LARGEUR.

   CORRECTION. On descend le titre à 12% et on ramène son plafond de 24vh à
   21vh. Les deux vont ensemble : descendre sans réduire ferait buter le bas du
   titre dans le plateau à 46%. Résultat mesuré : au moins 30px de dégagement
   partout, de 520 à 1080px de haut, sans chevauchement en dessous.

   ⚠️ C'est un écart à la géométrie du graphiste : titre légèrement plus bas et
   plus petit sur grand écran. À lui faire valider.
   -------------------------------------------------------------------------- */
@media (min-width:761px){
  :root{--event-title-top:12%}
  .event-title-text{font-size:clamp(84px,min(18vw,21vh),340px)}
}

/* Desktop plus vertical : garde tous les éléments dans le viewport. */
@media (min-width:761px) and (max-aspect-ratio:3/2){
  :root{
    --event-title-top:9%;
    --event-lineup-top:37.5%;
    --event-date-top:46.5%;
    --utility-row:63%;
    --crown-row:77.5%;
  }
  .event-kicker-text{font-size:clamp(20px,1.8vw,34px)}
  .event-title-text{font-size:clamp(132px,min(18vw,18vh),280px);line-height:.74}
  .event-date-text{font-size:clamp(44px,4.65vw,84px)}
  .crown-media{width:min(12vw,21vh)}
}

/* --------------------------------------------------------------------------
   Mobile portrait : 2 × 6 et scroll naturel.
   La partie artiste/date/ticket est volontairement descendue vers le centre
   du premier écran ; les informations secondaires poursuivent la page.
   -------------------------------------------------------------------------- */
@media (max-width:760px) and (orientation:portrait){
  html,body{height:auto;min-height:100%}
  body{overflow-x:hidden;overflow-y:auto}
  :root{--grid-cols:2;--grid-rows:6}
  .landing{
    height:max(100dvh,1320px);
    min-height:1320px;
    overflow:hidden;
    overscroll-behavior-x:none;
    overscroll-behavior-y:auto;
    touch-action:pan-y;
  }

  .event-nav{
    top:2.7%;
    grid-template-columns:25px auto 25px;
    gap:2px;
    opacity:.48;
  }
  .event-nav__button{width:25px;height:26px;font-size:21px}
  .event-nav__count{min-width:48px;font-size:12px}

  .event-kicker-text{
    top:12.2%;
    width:90%;
    font-size:clamp(17px,5.2vw,23px);
    line-height:.96;
    white-space:normal;
  }
  .event-title-text{
    top:17.6%;
    width:98%;
    font-family:var(--display-font);
    font-size:clamp(120px,39vw,170px);
    line-height:.92;
    letter-spacing:-.024em;
    white-space:normal;
  }
  .mobile-title-break{display:none}
  .event-date-text{
    top:44.7%;
    font-size:clamp(38px,11.6vw,52px);
  }
  .ticket{
    top:55.8%;
    width:clamp(142px,39vw,164px);
    height:54px;
    font-size:clamp(26px,7.4vw,31px);
  }

  .event-bottom-stack{
    position:absolute;
    z-index:3;
    left:50%;
    top:71.7%;
    translate:-50% 0;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    padding:0 18px 40px;
  }
  .event-bottom-stack .manifesto-text,
  .event-bottom-stack .partner-media,
  .event-bottom-stack .crown-media,
  .event-bottom-stack .footer,
  .event-bottom-stack .address-text,
  .event-bottom-stack .email-text{
    position:static;
    inset:auto;
    translate:none;
  }
  .event-bottom-stack .manifesto-text{
    width:min(84vw,354px);
    padding:7px 8px;
    font-size:clamp(9.5px,2.65vw,11.5px);
    line-height:1.01;
  }
  .event-bottom-stack .partner-media{width:min(43vw,176px)}
  .event-bottom-stack .crown-media{width:min(30vw,124px)}
  .event-bottom-stack .footer{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    pointer-events:auto;
  }
  .event-bottom-stack .address-text,
  .event-bottom-stack .email-text{
    width:94%;
    text-align:center;
    white-space:normal;
    line-height:.98;
  }
  .event-bottom-stack .address-text{font-size:clamp(14px,3.9vw,17px)}
  .event-bottom-stack .email-text{font-size:clamp(14px,4.1vw,18px)}

  .event-bottom-stack .entrance{transform:translateY(8px)}
  .is-ready .event-slide.is-active .event-bottom-stack .entrance,
  .is-ready .event-slide:not(.is-active) .event-bottom-stack .entrance{transform:none}

  .landing.needs-plaak-fallback .event-title-text{width:132%;transform:scaleX(.72)}
  .landing.needs-plaak-fallback .entrance-hero{transform:translateY(-2vh) scaleX(.72)}
  .is-ready .landing.needs-plaak-fallback .event-slide.is-active .entrance-hero,
  .is-ready .landing.needs-plaak-fallback .event-slide:not(.is-active) .entrance-hero{transform:scaleX(.72)}
}

/* Très petit smartphone : conserve les mêmes rythmes mais évite le débordement. */
@media (max-width:380px) and (orientation:portrait){
  .landing{height:max(100dvh,1280px);min-height:1280px}
  .event-title-text{font-size:clamp(112px,37.5vw,145px);line-height:.92}
  .event-date-text{top:44.8%;font-size:clamp(36px,11.3vw,48px)}
  .ticket{top:55.8%;width:140px;height:50px;font-size:25px}
  .event-bottom-stack{top:71.8%;gap:18px}
}

/* Paysage mobile / petite tablette : composition compacte sans scroll forcé. */
@media (max-width:960px) and (max-height:560px) and (orientation:landscape){
  :root{--grid-cols:4;--grid-rows:4;--utility-row:69%}
  .event-nav{top:2.5%}
  .event-kicker-text{top:45%;width:90%;font-size:clamp(14px,2.1vw,20px);white-space:normal}
  .event-title-text{top:8%;width:96%;font-size:clamp(78px,min(13vw,20vh),136px);line-height:.76;white-space:normal}
  .mobile-title-break{display:none}
  .event-date-text{top:53%;font-size:clamp(38px,5.9vw,60px)}
  .ticket{width:132px;height:44px;font-size:24px}
  .manifesto-text{left:2.4%;width:min(28vw,285px);font-size:clamp(8px,1.35vw,11px)}
  .partner-media{right:2.4%;width:min(18vw,175px)}
  .crown-media{top:77%;width:min(12vw,116px)}
  .address-text{left:2.4%;bottom:2.8%;font-size:clamp(12px,1.75vw,17px)}
  .email-text{right:2.4%;bottom:2.8%;font-size:clamp(12px,1.75vw,17px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .grid-sweep{display:none!important}
  .entrance{opacity:1!important;clip-path:none!important;transform:none!important}
}

/* --------------------------------------------------------------------------
   Gutenberg
   1 .event-slide = 1 Group duplicable. Tous les textes/boutons restent natifs.
   -------------------------------------------------------------------------- */
.regina-event-deck .wp-block-group.event-slide,
.regina-event-deck .wp-block-group.event-layout{position:absolute;inset:0}
.regina-event-deck .wp-block-image.partner-media,
.regina-event-deck .wp-block-image.crown-media{margin:0}
.regina-event-deck .wp-block-image.partner-media img,
.regina-event-deck .wp-block-image.crown-media img{width:100%;height:auto}
.regina-event-deck .wp-block-heading.event-title-text{font-family:var(--display-font)!important}
.regina-event-deck .wp-block-buttons.ticket-wrap{
  position:absolute!important;
  z-index:5;
  left:50%;
  top:var(--utility-row);
  translate:-50% -50%;
  margin:0!important;
}
.regina-event-deck .ticket-wrap .wp-block-button__link{
  width:clamp(150px,11.45vw,220px);
  height:clamp(54px,7.5vh,82px);
  padding:0!important;
  border:2px solid var(--ink)!important;
  border-radius:0!important;
  display:grid;
  place-items:center;
  overflow:hidden;
  background-color:var(--red)!important;
  background-image:linear-gradient(var(--ink),var(--ink))!important;
  background-repeat:no-repeat!important;
  background-position:top!important;
  background-size:100% 0%!important;
  color:var(--ink)!important;
  font-family:var(--condensed-font);
  font-size:clamp(28px,2.2vw,42px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.045em;
  text-decoration:none!important;
  transition:background-size .52s var(--ease),color .32s ease .12s;
}
.regina-event-deck .ticket-wrap .wp-block-button__link:hover,
.regina-event-deck .ticket-wrap .wp-block-button__link:focus-visible{background-size:100% 100%!important;color:var(--red)!important}

@media (max-width:760px) and (orientation:portrait){
  .regina-event-deck .wp-block-buttons.ticket-wrap{top:56.6%}
  .regina-event-deck .ticket-wrap .wp-block-button__link{width:clamp(142px,39vw,164px);height:54px;font-size:clamp(26px,7.4vw,31px)}
}

/* ==========================================================================\n   RESPONSIVE V3 — uniquement mobile portrait\n   Desktop inchangé.\n   ========================================================================== */
.mobile-top-crown,
.mobile-rules{display:none}

@media (max-width:760px) and (orientation:portrait){
  :root{
    --mobile-page-min:1740px;
    --mobile-rule:rgba(29,29,27,.46);
  }

  .landing{
    height:max(100dvh,var(--mobile-page-min));
    min-height:var(--mobile-page-min);
  }

  /* Lignes horizontales explicites entre les blocs. La verticale de la grille
     d'origine reste intacte et ces règles utilisent exactement la même teinte. */
  .mobile-rules{
    display:block;
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
  }
  .mobile-rules i{
    position:absolute;
    left:0;
    width:100%;
    height:var(--grid-line);
    background:var(--mobile-rule);
  }
  .mobile-rules i:nth-child(1){top:8.8%}
  .mobile-rules i:nth-child(2){top:17.3%}
  .mobile-rules i:nth-child(3){top:25.2%}
  .mobile-rules i:nth-child(4){top:55.8%}
  .mobile-rules i:nth-child(5){top:66.7%}
  .mobile-rules i:nth-child(6){top:77.4%}

  /* Navigation → couronne → tournée : trois blocs distincts et centrés. */
  .event-nav{
    top:3.15%;
    opacity:.52;
  }
  .mobile-top-crown{
    display:block;
    position:absolute;
    z-index:3;
    left:50%;
    top:10.15%;
    translate:-50% 0;
    width:clamp(88px,25vw,112px);
    margin:0;
  }
  .mobile-top-crown img{width:100%;height:auto}

  .event-kicker-text{
    top:19.4%;
    width:92%;
    font-size:clamp(20px,5.9vw,27px);
    line-height:.96;
  }

  /* +40% environ par rapport à la passe précédente, avec un interligne assez
     généreux pour que deux lignes Plaak restent lisibles et non collées. */
  .event-title-text{
    top:27.1%;
    width:100%;
    font-size:clamp(168px,54.6vw,238px);
    line-height:.94;
    letter-spacing:-.024em;
  }

  .event-date-text{
    top:58.5%;
    font-size:clamp(43px,12.7vw,58px);
    line-height:.92;
  }

  .ticket{
    top:71.9%;
    width:clamp(160px,43vw,184px);
    height:58px;
    font-size:clamp(29px,8.1vw,35px);
  }

  /* Les informations secondaires commencent après le dernier séparateur.
     Elles restent volontairement sous le premier écran : scroll naturel. */
  .event-bottom-stack{
    top:80.1%;
    gap:18px;
    padding-bottom:46px;
  }
  .event-bottom-stack .manifesto-text{
    width:min(86vw,362px);
    font-size:clamp(10px,2.8vw,12px);
  }
  .event-bottom-stack .partner-media{width:min(45vw,184px)}
  .event-bottom-stack .crown-media{width:min(31vw,128px)}
  .event-bottom-stack .footer{gap:9px}
  .event-bottom-stack .address-text{font-size:clamp(14px,4.05vw,18px)}
  .event-bottom-stack .email-text{font-size:clamp(14px,4.15vw,18px)}

  /* Gutenberg : mêmes dimensions pour le bouton et le logo mobile. */
  .regina-event-deck .wp-block-image.mobile-top-crown{
    display:block;
    position:absolute;
    z-index:3;
    left:50%;
    top:10.15%;
    translate:-50% 0;
    width:clamp(88px,25vw,112px);
    margin:0!important;
  }
  .regina-event-deck .wp-block-image.mobile-top-crown img{width:100%;height:auto}
  .regina-event-deck .wp-block-buttons.ticket-wrap{top:71.9%}
  .regina-event-deck .ticket-wrap .wp-block-button__link{
    width:clamp(160px,43vw,184px);
    height:58px;
    font-size:clamp(29px,8.1vw,35px);
  }
}

@media (max-width:380px) and (orientation:portrait){
  :root{--mobile-page-min:1680px}
  .event-title-text{font-size:clamp(154px,52.5vw,205px);line-height:.95}
  .event-date-text{top:58.7%;font-size:clamp(40px,12vw,52px)}
  .ticket{top:71.9%;width:156px;height:54px;font-size:28px}
  .event-bottom-stack{top:80.2%;gap:17px}
  .regina-event-deck .wp-block-buttons.ticket-wrap{top:71.9%}
  .regina-event-deck .ticket-wrap .wp-block-button__link{width:156px;height:54px;font-size:28px}
}

/* Mobile : la grille conserve son axe vertical central, tandis que les
   séparateurs horizontaux sont ceux définis bloc par bloc ci-dessus. Cela
   évite les doubles traits lorsque les deux systèmes se superposent. */
@media (max-width:760px) and (orientation:portrait){
  .grid{
    background-image:linear-gradient(to right,transparent calc(100% - var(--grid-line)),var(--grid) calc(100% - var(--grid-line)));
    background-size:50% 100%;
    background-repeat:repeat-x;
  }
}

/* ==========================================================================
   RESPONSIVE V4 — premier écran mobile verrouillé sur le viewport
   Desktop inchangé.

   0–100dvh : navigation / couronne / tournée / artiste (2 cellules) /
              date / ticket.
   >100dvh   : informations secondaires au scroll.
   ========================================================================== */
@media (max-width:760px) and (orientation:portrait){
  :root{
    --mobile-footer-depth:430px;
    --mobile-rule:rgba(29,29,27,.46);
  }

  html,body{height:auto;min-height:100%}
  body{overflow-x:hidden;overflow-y:auto}

  .landing{
    height:calc(100dvh + var(--mobile-footer-depth));
    min-height:calc(100dvh + var(--mobile-footer-depth));
    overflow:hidden;
    touch-action:pan-y;
    overscroll-behavior-y:auto;
  }

  /* En mobile, la grille de fond garde uniquement l'axe vertical central.
     Toutes les horizontales sont positionnées explicitement ci-dessous. */
  .grid{
    background-image:linear-gradient(to right,transparent calc(100% - var(--grid-line)),var(--grid) calc(100% - var(--grid-line)));
    background-size:50% 100%;
    background-repeat:repeat-x;
  }

  .mobile-rules{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
  .mobile-rules i{position:absolute;left:0;width:100%;height:var(--grid-line);background:var(--mobile-rule)}

  /* Premier écran : deux cellules pour le titre, puis le plateau, la date
     et le bouton. */
  .mobile-rules i:nth-child(1){top:10dvh}
  .mobile-rules i:nth-child(2){top:22dvh}
  .mobile-rules i:nth-child(3){top:38dvh}
  .mobile-rules i:nth-child(4){top:54dvh}
  .mobile-rules i:nth-child(5){top:64dvh}
  .mobile-rules i:nth-child(6){top:76dvh}
  .mobile-rules i:nth-child(7){top:100dvh}

  /* Footer : la même logique continue après le fold, au scroll. */
  .mobile-rules i:nth-child(8){top:calc(100dvh + 112px)}
  .mobile-rules i:nth-child(9){top:calc(100dvh + 210px)}
  .mobile-rules i:nth-child(10){top:calc(100dvh + 312px)}
  .mobile-rules i:nth-child(11){top:calc(100dvh + 425px)}

  /* 01/02 : cellule 01 */
  .event-nav{
    top:5dvh;
    translate:-50% -50%;
    opacity:.52;
    grid-template-columns:25px auto 25px;
    gap:3px;
  }
  .event-nav__button{width:25px;height:26px;font-size:21px}
  .event-nav__count{min-width:50px;font-size:12px}

  /* Couronne : cellule 02 */
  .mobile-top-crown{
    display:block;
    position:absolute;
    z-index:3;
    left:50%;
    top:16dvh;
    translate:-50% -50%;
    width:clamp(84px,min(24vw,13dvh),112px);
    margin:0;
  }
  .mobile-top-crown img{width:100%;height:auto}

  /* Plateau Stand Up : cellule placée sous le titre. */
  .event-kicker-text{
    top:59dvh;
    translate:-50% -50%;
    width:94%;
    font-size:clamp(14px,min(4vw,2.5dvh),20px);
    line-height:.96;
    white-space:normal;
  }
  .event-kicker-text.event-kicker-text--lineup{
    width:94%;
    font-size:clamp(14px,min(4vw,2.5dvh),20px);
  }

  /* Artiste : cellules 03 + 04. Les deux lignes sont chacune centrées dans
     leur cellule, ce qui maintient un interligne régulier sur tous les écrans. */
  .event-title-text{
    top:22dvh;
    height:32dvh;
    translate:-50% 0;
    width:100%;
    display:grid;
    grid-template-rows:1fr 1fr;
    align-items:center;
    justify-items:center;
    font-size:clamp(132px,min(50vw,20dvh),190px);
    line-height:.76;
    letter-spacing:-.024em;
    white-space:normal;
    overflow:visible;
  }
  .event-title-text > .event-title-line{
    display:block;
    width:max-content;
    max-width:100%;
    align-self:center;
    justify-self:center;
  }
  /* Une ligne unique s'étend sur les deux rangées et se centre dedans. */
  .event-title-text > .event-title-line:only-child{grid-row:1 / -1}
  .mobile-title-break{display:none}

  /* Date : cellule 06 */
  .event-date-text{
    top:70dvh;
    translate:-50% -50%;
    font-size:clamp(38px,min(12.4vw,6.2dvh),58px);
    line-height:.9;
  }

  /* Ticket : cellule 07 */
  .ticket{
    top:88dvh;
    width:clamp(156px,min(43vw,22dvh),188px);
    height:clamp(52px,min(15vw,7.4dvh),60px);
    font-size:clamp(27px,min(8vw,4.4dvh),35px);
  }

  /* Tout ce qui est secondaire commence APRÈS le viewport. */
  .event-bottom-stack{
    top:calc(100dvh + 27px);
    gap:20px;
    padding:0 18px 34px;
  }
  .event-bottom-stack .manifesto-text{
    width:min(86vw,362px);
    padding:7px 8px;
    font-size:clamp(10px,2.8vw,12px);
    line-height:1.01;
  }
  .event-bottom-stack .partner-media{width:min(44vw,180px)}
  .event-bottom-stack .crown-media{width:min(30vw,124px)}
  .event-bottom-stack .footer{gap:9px}
  .event-bottom-stack .address-text{font-size:clamp(14px,4vw,18px)}
  .event-bottom-stack .email-text{font-size:clamp(14px,4.1vw,18px)}

  /* Gutenberg : même géométrie exacte. */
  .regina-event-deck .wp-block-image.mobile-top-crown{
    display:block;
    position:absolute;
    z-index:3;
    left:50%;
    top:16dvh;
    translate:-50% -50%;
    width:clamp(84px,min(24vw,13dvh),112px);
    margin:0!important;
  }
  .regina-event-deck .wp-block-image.mobile-top-crown img{width:100%;height:auto}
  .regina-event-deck .wp-block-buttons.ticket-wrap{top:88dvh}
  .regina-event-deck .ticket-wrap .wp-block-button__link{
    width:clamp(156px,min(43vw,22dvh),188px);
    height:clamp(52px,min(15vw,7.4dvh),60px);
    font-size:clamp(27px,min(8vw,4.4dvh),35px);
  }
}

/* Écrans très étroits : l'auto-fit JS garde le nom dans la largeur, tandis
   que la géométrie verticale reste strictement basée sur le viewport. */
@media (max-width:380px) and (orientation:portrait){
  .event-title-text{font-size:clamp(126px,min(49vw,19dvh),178px)}
  .event-kicker-text{font-size:clamp(16px,min(5.25vw,3.2dvh),22px)}
  .event-date-text{font-size:clamp(36px,min(12vw,6dvh),52px)}
  .ticket{width:152px;height:52px;font-size:27px}
  .regina-event-deck .ticket-wrap .wp-block-button__link{width:152px;height:52px;font-size:27px}
}