:root{
  --ink:#062018;
  --ink-2:#0A3325;
  --navy:#0A2547;
  --cream:#FFF6E8;
  --mute:rgba(255,246,232,.66);
  --orange:#F26522;
  --cyan:#23B0E8;
  --yellow:#FBB41C;
  --pink:#EF3D7A;
  --leaf:#8CC63F;
  --poster:url("/assets/img/poster-2026.jpg");
  --display:"Fredoka","Trebuchet MS",sans-serif;
  --script:"Caveat Brush","Comic Sans MS",cursive;
  --body:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{position:relative;margin:0;background:var(--ink);color:var(--cream);font-family:var(--body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-x:clip;overflow-wrap:break-word}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(circle at 20% 8%,rgba(140,198,63,.16),transparent 45%),
                   radial-gradient(circle at 88% 72%,rgba(35,176,232,.12),transparent 50%)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

.wrap{max-width:1400px;margin:0 auto;padding-inline:var(--pad);position:relative;z-index:1}
.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--leaf);margin:0 0 14px}
/* Titres à contour.

   -webkit-text-stroke centre le trait sur le bord des lettres : la moitié de
   l'épaisseur ronge l'intérieur du glyphe, ce qui rend le titre baveux.
   paint-order:stroke fill corrigerait, mais on ne peut pas s'y fier :
   @supports répond « oui » dès que la propriété est RECONNUE — or c'est une
   propriété SVG que les navigateurs connaissent bien avant de savoir
   l'appliquer au texte HTML. La détection mentait, et le défaut persistait.

   On abandonne donc le tracé au profit d'un contour composé d'ombres portées,
   en em pour rester proportionnel. Même rendu partout, aucune détection. */
.outline{font-family:var(--display);font-weight:700;color:var(--cream);
  text-transform:uppercase;line-height:.9;letter-spacing:-.01em;margin:0;
  text-shadow:-0.0579em -0.004em 0 var(--navy),-0.0579em 0.004em 0 var(--navy),-0.0567em -0.0121em 0 var(--navy),-0.0567em 0.0121em 0 var(--navy),-0.0545em -0.0198em 0 var(--navy),-0.0545em 0.0198em 0 var(--navy),-0.0512em -0.0272em 0 var(--navy),-0.0512em 0.0272em 0 var(--navy),-0.0469em -0.0341em 0 var(--navy),-0.0469em 0.0341em 0 var(--navy),-0.0417em -0.0403em 0 var(--navy),-0.0417em 0.0403em 0 var(--navy),-0.0357em -0.0457em 0 var(--navy),-0.0357em 0.0457em 0 var(--navy),-0.029em -0.0502em 0 var(--navy),-0.029em 0.0502em 0 var(--navy),-0.028em 0.0em 0 var(--navy),-0.0269em -0.0079em 0 var(--navy),-0.0269em 0.0079em 0 var(--navy),-0.0236em -0.0151em 0 var(--navy),-0.0236em 0.0151em 0 var(--navy),-0.0217em -0.0538em 0 var(--navy),-0.0217em 0.0538em 0 var(--navy),-0.0183em -0.0212em 0 var(--navy),-0.0183em 0.0212em 0 var(--navy),-0.014em -0.0563em 0 var(--navy),-0.014em 0.0563em 0 var(--navy),-0.0116em -0.0255em 0 var(--navy),-0.0116em 0.0255em 0 var(--navy),-0.0061em -0.0577em 0 var(--navy),-0.0061em 0.0577em 0 var(--navy),-0.004em -0.0277em 0 var(--navy),-0.004em 0.0277em 0 var(--navy),0.002em -0.058em 0 var(--navy),0.002em 0.058em 0 var(--navy),0.004em -0.0277em 0 var(--navy),0.004em 0.0277em 0 var(--navy),0.0101em -0.0571em 0 var(--navy),0.0101em 0.0571em 0 var(--navy),0.0116em -0.0255em 0 var(--navy),0.0116em 0.0255em 0 var(--navy),0.0179em -0.0552em 0 var(--navy),0.0179em 0.0552em 0 var(--navy),0.0183em -0.0212em 0 var(--navy),0.0183em 0.0212em 0 var(--navy),0.0236em -0.0151em 0 var(--navy),0.0236em 0.0151em 0 var(--navy),0.0254em -0.0521em 0 var(--navy),0.0254em 0.0521em 0 var(--navy),0.0269em -0.0079em 0 var(--navy),0.0269em 0.0079em 0 var(--navy),0.028em 0.0em 0 var(--navy),0.0324em -0.0481em 0 var(--navy),0.0324em 0.0481em 0 var(--navy),0.0388em -0.0431em 0 var(--navy),0.0388em 0.0431em 0 var(--navy),0.0444em -0.0373em 0 var(--navy),0.0444em 0.0373em 0 var(--navy),0.0492em -0.0307em 0 var(--navy),0.0492em 0.0307em 0 var(--navy),0.053em -0.0236em 0 var(--navy),0.053em 0.0236em 0 var(--navy),0.0558em -0.016em 0 var(--navy),0.0558em 0.016em 0 var(--navy),0.0574em -0.0081em 0 var(--navy),0.0574em 0.0081em 0 var(--navy),0.058em 0.0em 0 var(--navy)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);
  font-weight:700;font-size:.86rem;letter-spacing:.07em;text-transform:uppercase;
  padding:16px 28px;border-radius:100px;border:3px solid var(--navy);
  background:var(--orange);color:#fff;box-shadow:0 6px 0 var(--navy);cursor:pointer;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease}
.btn:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--navy)}
.btn:active{transform:translateY(6px);box-shadow:0 0 0 var(--navy)}
.btn--ghost{background:transparent;color:var(--cream);border-color:rgba(255,246,232,.35);box-shadow:none}
.btn--ghost:hover{background:rgba(255,246,232,.1);transform:none;border-color:var(--cream)}
.btn--yellow{background:var(--yellow);color:var(--navy)}
.btn--c{background:var(--c);color:var(--navy)}

/* ---------- barre du haut ---------- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(6,32,24,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,246,232,.1)}
.topbar__in{display:flex;align-items:center;gap:24px;min-height:66px;max-width:1400px;margin:0 auto;padding-inline:var(--pad)}
.logo{font-family:var(--display);font-weight:700;font-size:1.05rem;text-transform:uppercase;
  display:flex;align-items:center;gap:9px}
.logo .logo__num{background:var(--orange);color:#fff;border-radius:100px;padding:2px 9px;font-size:.78rem}
.topnav{margin-left:auto;display:flex;gap:28px;font-size:.82rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase}
.topnav a{padding-bottom:3px;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
.topnav a:hover{border-color:var(--yellow);color:var(--yellow)}
.topbar .btn{padding:11px 20px;font-size:.76rem;box-shadow:0 4px 0 var(--navy)}
@media(max-width:900px){.topnav{display:none}}

/* ---------- sandwich, tiroir et barre basse ---------- */
.burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;
  cursor:pointer;padding:0;border-radius:50%;flex-direction:column;align-items:center;
  justify-content:center;gap:5.5px;transition:background .22s ease}
.burger:hover{background:rgba(255,246,232,.09)}
.burger span{display:block;width:24px;height:2.5px;border-radius:2px;background:var(--cream);
  transition:transform .32s cubic-bezier(.2,.8,.3,1),opacity .18s ease .06s,background .22s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.scrim{position:fixed;inset:0;z-index:80;background:rgba(3,14,10,.7);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.scrim.on{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(84vw,330px);
  background:var(--ink-2);border-left:3px solid var(--navy);
  padding:22px 24px calc(24px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:8px;
  transform:translateX(100%);transition:transform .34s cubic-bezier(.2,.8,.3,1);
  box-shadow:-24px 0 60px rgba(0,0,0,.5);overflow-y:auto;visibility:hidden;
}
.drawer.on{transform:none;visibility:visible}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.drawer__mark{font-family:var(--display);font-weight:700;font-size:1rem;text-transform:uppercase;
  display:flex;align-items:center;gap:8px}
.drawer__mark .logo__num{background:var(--orange);color:#fff;border-radius:100px;padding:2px 9px;font-size:.76rem}
.drawer__close{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,246,232,.22);
  background:transparent;color:var(--cream);display:grid;place-items:center;cursor:pointer;
  transition:border-color .2s,background .2s}
.drawer__close:hover{border-color:var(--cream);background:rgba(255,246,232,.07)}
.drawer__nav{display:flex;flex-direction:column}
.drawer__nav a{font-family:var(--display);font-weight:600;font-size:1.35rem;text-transform:uppercase;
  padding:15px 0;border-bottom:2px solid rgba(255,246,232,.12);transition:color .2s,padding-left .2s}
.drawer__nav a:hover{color:var(--yellow);padding-left:6px}
.drawer__cta{margin-top:22px;justify-content:center;white-space:nowrap;
  font-size:.76rem;letter-spacing:.05em;padding:15px 16px}
.drawer__foot{margin:18px 0 0;font-size:.84rem;color:var(--mute);line-height:1.5}

.dock{display:none;position:fixed;left:0;right:0;bottom:0;z-index:75;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(6,32,24,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,246,232,.14)}
.dock .btn{width:100%;padding:15px 16px;font-size:clamp(.74rem,3.4vw,.86rem);
  letter-spacing:.05em;white-space:nowrap;box-shadow:0 4px 0 var(--navy)}
.dock .btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--navy)}

@media(max-width:900px){
  .topbar .btn{display:none}
  .burger{display:flex}
  .dock{display:block}
  body{padding-bottom:84px}
}
body.locked{overflow:hidden}

/* ---------- héros accueil ---------- */
.hero{position:relative;padding:clamp(48px,7vw,86px) 0 clamp(60px,8vw,100px);overflow:hidden}
.hero__glow{position:absolute;inset:-16% -10% auto -10%;height:130%;z-index:0;
  background-image:var(--poster);background-size:cover;background-position:center 26%;
  filter:blur(64px) saturate(1.7) brightness(.72);opacity:.55;transform:scale(1.15)}
.hero__veil{position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(6,32,24,.55),rgba(6,32,24,.86) 62%,var(--ink))}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(3.2rem,9.2vw,6.6rem);margin-bottom:22px}
.hero h1 .l2{display:block;font-family:var(--script);font-weight:400;text-transform:none;
  font-size:1.06em;line-height:.9;margin-left:.06em;
  transform:rotate(-2.4deg);transform-origin:left center}

.hero__lede{max-width:44ch;font-size:1.06rem;color:rgba(255,246,232,.86);margin:0 0 30px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:34px 0 0;padding:0}
.facts li{display:flex;flex-direction:column;gap:2px}
.facts span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--leaf);font-weight:700}
.facts b{font-family:var(--display);font-weight:600;font-size:1.08rem}
.hero__art{position:relative;justify-self:center;width:min(100%,392px)}
.poster{aspect-ratio:660/887;border-radius:22px;border:4px solid var(--navy);
  background-image:var(--poster);background-size:cover;background-position:center;
  box-shadow:0 26px 60px rgba(0,0,0,.5);transform:rotate(-2.6deg);
  transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.hero__art:hover .poster{transform:rotate(0) scale(1.02)}
.tape{position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-3deg);z-index:3;
  background:var(--yellow);color:var(--navy);font-family:var(--display);font-weight:600;font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 20px;border:3px solid var(--navy);
  border-radius:100px;white-space:nowrap}
.eye{position:absolute;right:-34px;bottom:34px;width:124px;height:124px;z-index:4;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.45))}
@media(max-width:980px){
  .hero__in{grid-template-columns:1fr}
  .hero__art{order:-1;width:min(74%,300px)}
  .eye{width:96px;height:96px;right:-18px;bottom:18px}
}

/* ---------- feuillage en parallaxe ---------- */
.leaves{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip}
.leaves--hero{z-index:1;overflow:visible}
.leaf--h1{left:-4%;bottom:-5%;width:clamp(155px,23vw,315px);color:var(--leaf);opacity:.3;rotate:-18deg}
.leaf--h2{right:-3%;top:-5%;width:clamp(125px,18vw,250px);color:var(--cyan);opacity:.2;rotate:24deg}
.leaf--h1 .leaf__in{animation-duration:12s}
.leaf--h2 .leaf__in{animation-duration:16s;animation-direction:alternate-reverse}
.leaf{position:absolute;display:block;will-change:transform;line-height:0}
.leaf__in{display:block;width:100%;height:auto;aspect-ratio:200/240;transform-origin:50% 10%;
  animation:sway 13s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-3.5deg)}to{transform:rotate(3.5deg)}}
@media(max-width:760px){
  .leaf{filter:none!important}
}

/* ---------- bandeau ---------- */
.strip{background:var(--orange);border-block:4px solid var(--navy);overflow:hidden;padding:11px 0;position:relative;z-index:1}
.strip__track{display:flex;gap:34px;width:max-content;animation:slide 34s linear infinite}
.strip span{font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:.05em;
  text-transform:uppercase;color:#fff;display:flex;align-items:center;gap:34px;white-space:nowrap}
.strip i{color:var(--navy);font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.section{padding:clamp(64px,9vw,120px) 0;position:relative;z-index:1;overflow-x:clip}
.section--alt{background:rgba(10,51,37,.82);
  background:color-mix(in srgb,var(--ink-2) 82%,transparent)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,52px)}
.head h2{font-size:clamp(2.3rem,6vw,4.2rem)}
.head p{margin:0;max-width:34ch;color:var(--mute);font-size:.98rem}

/* ---------- line-up ---------- */
.lineup{border-top:2px solid rgba(255,246,232,.16)}
.act{display:grid;grid-template-columns:104px 1fr auto auto;gap:24px;align-items:center;
  padding:20px 18px;border-bottom:2px solid rgba(255,246,232,.16);border-radius:16px;
  transition:background .22s ease,padding-left .22s ease}
.act:hover,.act:focus-visible{background:var(--c);padding-left:28px;outline-offset:-3px}
.act__time{font-weight:700;font-size:.94rem;letter-spacing:.04em;color:var(--c);transition:color .22s}
.act__name{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.7rem,4.4vw,3.1rem);line-height:1;letter-spacing:-.015em;margin:0}
.act__tag{font-size:.86rem;color:var(--mute);letter-spacing:.05em;text-transform:uppercase;
  font-weight:500;transition:color .22s}
.act__go{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,246,232,.3);
  display:grid;place-items:center;flex:none;transition:transform .22s ease,border-color .22s,background .22s}
.act:hover .act__go{background:var(--navy);border-color:var(--navy);transform:translateX(4px)}
.act:hover .act__go svg{color:var(--cream)}
.act--head .act__name{font-size:clamp(2.2rem,7vw,4.6rem)}
.act:hover .act__time,.act:hover .act__tag{color:rgba(10,37,71,.78)}
.act:hover .act__name{color:var(--navy)}
@media(max-width:760px){
  .act{grid-template-columns:1fr auto;grid-template-areas:"time go" "name name" "tag tag";gap:6px 12px;padding:18px 14px}
  .act__time{grid-area:time}.act__name{grid-area:name}.act__tag{grid-area:tag}.act__go{grid-area:go}
}

/* ---------- cartes / billets ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.card{background:rgba(13,58,42,.93);border:2px solid rgba(255,246,232,.14);border-radius:22px;
  padding:26px 24px;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.card:hover{transform:translateY(-5px);border-color:var(--c);background:rgba(18,72,52,.96)}
.card__ico{width:42px;height:42px;border-radius:12px;background:var(--c);display:grid;place-items:center;
  margin-bottom:16px;color:var(--navy)}
.card h3{font-family:var(--display);font-weight:600;font-size:1.22rem;margin:0 0 8px;text-transform:uppercase}
.card p{margin:0;font-size:.95rem;color:var(--mute)}
.card a,.foot li a,.legal li a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.card a{color:var(--cream)}
.card a:hover,.foot li a:hover{color:var(--yellow)}
.card ul{margin:12px 0 0;padding-left:16px;font-size:.9rem;color:var(--mute)}
.card li{margin-bottom:7px}
.card li b{color:var(--cream);font-weight:700}
.tickets{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.tk{border-radius:24px;padding:30px 26px;border:3px solid var(--navy);background:var(--cream);
  color:var(--navy);display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 0 var(--navy)}
.tk--hl{background:var(--yellow)}
.tk__label{font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
.tk__price{font-family:var(--display);font-weight:700;font-size:3.2rem;line-height:1;margin:6px 0 2px}
.tk__price small{font-size:1.1rem;font-weight:600}
.tk p{margin:0;font-size:.92rem;opacity:.78}
.tk .btn{margin-top:20px;background:var(--navy);color:var(--cream);box-shadow:0 5px 0 rgba(10,37,71,.35)}
.note{margin-top:22px;font-size:.86rem;color:rgba(255,246,232,.5)}

/* ---------- page artiste ---------- */
.back{display:inline-flex;align-items:center;gap:9px;font-size:.86rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:26px;transition:color .2s}
.back:hover{color:var(--cream)}
.ap{padding:clamp(34px,5vw,60px) 0 clamp(60px,8vw,100px);position:relative;z-index:1;overflow-x:clip}
.ap__hero{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(26px,4vw,56px);align-items:center}
.shot{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:3/2;
  border:3px solid var(--navy);
  background:linear-gradient(160deg,var(--c),rgba(6,32,24,.9));
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 55%,transparent),rgba(6,32,24,.9));
  box-shadow:0 26px 60px rgba(0,0,0,.5);display:grid;place-items:center;text-align:center;padding:24px}
.shot[data-photo]{background-size:cover;background-position:center}
.shot__ph{display:grid;gap:10px;justify-items:center;color:rgba(255,246,232,.85)}
.shot__ph b{font-family:var(--display);font-weight:600;font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em}
.shot__ph span{font-size:.82rem;color:rgba(255,246,232,.6);max-width:24ch}
.shot__ph svg{opacity:.8}
.credit{margin:10px 2px 0;font-size:.74rem;color:rgba(255,246,232,.45);letter-spacing:.03em}
.ap h1{font-size:clamp(2.8rem,8vw,5.4rem);margin-bottom:18px}
.pills{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 22px;padding:0;list-style:none}
.pill{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;
  border-radius:100px;border:2px solid rgba(255,246,232,.24);color:var(--mute)}
.pill--c{background:var(--c);border-color:var(--c);color:var(--navy)}
.pill--tag{color:var(--navy)}
.ap__txt{color:rgba(255,246,232,.84);margin:0 0 14px;max-width:52ch}
.ap__intro{font-size:1.24rem;line-height:1.45;color:var(--cream);max-width:42ch;margin:0 0 34px;
  padding-left:20px;border-left:4px solid var(--c)}
@media(max-width:920px){.ap__hero{grid-template-columns:1fr}}

.ap__body{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(26px,4vw,52px);
  margin-top:clamp(48px,6vw,84px);align-items:start}
@media(max-width:920px){.ap__body{grid-template-columns:1fr}}
.block + .block{margin-top:clamp(38px,5vw,60px)}
.block h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.5rem;
  letter-spacing:-.01em;margin:0 0 16px;display:flex;align-items:center;gap:12px}
.block h2::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--c);flex:none}
.block p{color:rgba(255,246,232,.82);margin:0 0 14px}
.player{border-radius:16px;overflow:hidden;border:3px solid var(--navy);background:#12100f}
.player iframe{display:block;width:100%;height:152px;border:0}
.player--video{aspect-ratio:16/9}
.player--video iframe{height:100%}
.hint{font-size:.8rem;color:rgba(255,246,232,.45);margin:10px 0 0}
.side{background:rgba(13,58,42,.93);border:2px solid rgba(255,246,232,.14);border-radius:22px;padding:26px 24px;
  position:sticky;top:96px}
.side h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:1.02rem;
  letter-spacing:.05em;margin:0 0 16px;color:var(--c)}
.spec{display:flex;justify-content:space-between;gap:16px;padding:11px 0;font-size:.92rem;
  border-bottom:1px solid rgba(255,246,232,.12)}
.spec:last-of-type{border-bottom:0}
.spec span{color:var(--mute)}
.spec b{font-family:var(--display);font-weight:600}
.links{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;
  border-radius:14px;border:2px solid rgba(255,246,232,.16);background:rgba(6,32,24,.55);font-size:.92rem;font-weight:500;
  transition:border-color .2s,background .2s,transform .2s}
.link:hover{border-color:var(--c);background:rgba(18,72,52,.9);transform:translateX(3px)}
.link svg{opacity:.6;flex:none}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(48px,6vw,80px)}
.pg{border:2px solid rgba(255,246,232,.16);border-radius:20px;padding:20px 24px;background:rgba(6,32,24,.5);
  transition:border-color .2s,background .2s}
.pg:hover{border-color:var(--pc);background:rgba(18,72,52,.85)}
.pg span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);margin-bottom:6px}
.pg b{font-family:var(--display);font-weight:600;font-size:1.35rem;text-transform:uppercase}
.pg--next{text-align:right}
.pg--off{opacity:.35;pointer-events:none}
@media(max-width:600px){.pager{grid-template-columns:1fr}}

/* ---------- page histoire ---------- */
.hi{padding:clamp(40px,6vw,74px) 0 clamp(60px,8vw,100px);position:relative;z-index:1;overflow-x:clip}
.hi__top{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(26px,4vw,54px);align-items:center}
.hi h1{font-size:clamp(2.6rem,7.4vw,5rem);margin-bottom:20px}
.hi__lede{font-size:1.08rem;color:rgba(255,246,232,.86);max-width:48ch;margin:0 0 18px}
.hi p{color:rgba(255,246,232,.82)}
.emblem{display:grid;place-items:center;gap:14px;padding:26px;border-radius:24px;
  border:2px solid rgba(255,246,232,.14);background:rgba(0,0,0,.6);text-align:center}
.emblem img{width:min(100%,210px);border-radius:12px}
.emblem span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
@media(max-width:900px){.hi__top{grid-template-columns:1fr}}

.hi__h2{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.6rem,3.6vw,2.4rem);letter-spacing:-.01em;margin:clamp(48px,6vw,84px) 0 8px}
.hi__sub{margin:0 0 26px;color:var(--mute);font-size:.96rem;max-width:52ch}

/* frise des éditions : liane au centre, éditions de part et d'autre */
.frise{position:relative;margin-top:8px}
.frise__fil{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.tige{vector-effect:non-scaling-stroke}
.tige--fond{stroke:rgba(6,45,30,.95);stroke-width:8}
.tige--clair{stroke:rgba(140,198,63,.75);stroke-width:4}
.tige__feuilles path{transition:opacity .5s ease}

.ed{position:relative;z-index:1;width:calc(50% - 18px);margin-bottom:22px}
.ed:nth-of-type(odd){margin-left:0}
.ed:nth-of-type(even){margin-left:calc(50% + 18px)}
.ed:last-child{margin-bottom:0}
.ed.rise{transform:none}
.ed.rise .ed__carte{transform:translateY(18px)}
.ed.rise.in .ed__carte{transform:none}

.ed__noeud{position:absolute;top:26px;width:14px;height:14px;border-radius:50%;
  background:var(--c);
  box-shadow:0 0 0 4px rgba(6,32,24,.9);
  box-shadow:0 0 0 4px rgba(6,32,24,.9),0 0 0 6px color-mix(in srgb,var(--c) 45%,transparent);
  transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.ed:nth-of-type(odd) .ed__noeud{right:-25px}
.ed:nth-of-type(even) .ed__noeud{left:-25px}
.ed:hover .ed__noeud{transform:scale(1.25)}

.ed__carte{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:18px;
  border:2px solid rgba(255,246,232,.14);background:rgba(13,58,42,.93);
  transition:border-color .24s,transform .5s cubic-bezier(.2,.7,.3,1)}
.ed:hover .ed__carte{border-color:var(--c)}
.ed__aff{width:100%;max-height:230px;object-fit:contain;border-radius:8px;
  background:#04120C;padding:6px;box-shadow:0 6px 14px rgba(0,0,0,.45)}
.ed__txt{display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start;text-align:left}
.ed__num{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--c);text-transform:uppercase;line-height:1.1}
.ed__date{font-size:.63rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.ed__line{font-size:.78rem;line-height:1.4;color:rgba(255,246,232,.84);margin-top:2px}
.ed--now .ed__carte{border-color:var(--yellow)}
.ed--void .ed__carte{border-style:dashed;background:rgba(13,58,42,.6);padding:20px 14px}
.ed--void .ed__num{font-size:1.4rem}

@media(min-width:620px){
  .ed{width:min(calc(50% - 46px),360px);margin-bottom:30px}
  .ed:nth-of-type(even){margin-left:calc(50% + 46px)}
  .ed:nth-of-type(odd) .ed__noeud{right:-53px}
  .ed:nth-of-type(even) .ed__noeud{left:-53px}
  .ed__carte{padding:16px;gap:12px}
  .ed__aff{max-height:none;height:auto;padding:0}
  .ed__num{font-size:1.15rem}
  .ed__date{font-size:.7rem}
  .ed__line{font-size:.88rem}
}
@media(min-width:1000px){
  .ed{width:min(calc(50% - 70px),400px);margin-bottom:40px}
  .ed:nth-of-type(even){margin-left:calc(50% + 70px)}
  .ed:nth-of-type(odd) .ed__noeud{right:-77px}
  .ed:nth-of-type(even) .ed__noeud{left:-77px}
  .ed__carte{padding:20px;gap:14px}
}

.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:18px}
.key{border:2px solid rgba(255,246,232,.14);border-radius:20px;padding:22px 22px 24px;
  background:rgba(13,58,42,.93);transition:border-color .22s,transform .22s}
.key:hover{border-color:var(--c);transform:translateY(-4px)}
.key b{display:block;font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--c);line-height:1}
.key span{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:8px 0 10px}
.key p{margin:0;font-size:.92rem}


/* ---------- pages légales ---------- */
.legal{padding:clamp(34px,5vw,64px) 0 clamp(60px,8vw,100px);position:relative;z-index:1;overflow-x:clip}
.legal__in{max-width:74ch}
.legal h1{font-size:clamp(2.2rem,6vw,3.6rem);margin-bottom:10px}
.legal__maj{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 34px}
.legal h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.25rem;
  letter-spacing:-.01em;margin:38px 0 12px;color:var(--leaf)}
.legal p,.legal li{color:rgba(255,246,232,.84);font-size:.98rem}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 14px;padding-left:20px}
.legal li{margin-bottom:7px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--yellow)}

/* ---------- bandeau cookies ---------- */
/* Le bouton « Gérer les cookies » vit dans le pied de page ; le bandeau
   s'affiche donc par-dessus lui. Or les deux fonds sombres ne contrastent qu'à
   1,11:1 : sans repère fort, on croit que le clic n'a rien fait. D'où une
   bordure vive et un mouvement d'apparition, qui signalent le changement même
   quand les couleurs se ressemblent. */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
  padding:14px var(--pad) calc(14px + env(safe-area-inset-bottom));
  background:rgba(6,32,24,.985);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:3px solid var(--orange);box-shadow:0 -18px 44px rgba(0,0,0,.6)}
.cookie.on{display:block;animation:cookie-monte .3s cubic-bezier(.22,.9,.3,1)}
@keyframes cookie-monte{from{transform:translateY(100%);opacity:.4}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.cookie.on{animation:none}}
.cookie__in{max-width:1400px;margin:0 auto;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.cookie__txt{flex:1 1 280px;min-width:0;margin:0;font-size:.86rem;line-height:1.5;color:var(--mute)}
.cookie__txt a{text-decoration:underline;text-underline-offset:2px;color:var(--cream)}
.cookie__btns{display:flex;gap:10px;flex-wrap:nowrap;flex:none}
.cookie .btn{padding:11px 20px;font-size:.72rem;border-width:2px;box-shadow:0 3px 0 var(--navy)}
.cookie .btn:hover{transform:translateY(2px);box-shadow:0 1px 0 var(--navy)}
.cookie .btn--ghost{box-shadow:none}
@media(max-width:620px){
  .cookie__in{gap:10px}
  .cookie__btns{width:100%}
  .cookie .btn{flex:1}
}
body.cookie-open .dock{display:none}

/* ---------- contenu tiers bloqué ---------- */
.embed-block{border:2px dashed rgba(255,246,232,.3);border-radius:16px;padding:24px;
  background:rgba(13,58,42,.93);display:grid;gap:10px;justify-items:start}
.embed-block b{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.embed-block p{margin:0;font-size:.88rem;color:var(--mute);max-width:52ch}
.embed-block__act{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:4px}
.embed-block .btn{padding:12px 20px;font-size:.76rem}
.embed-always{background:none;border:0;color:var(--mute);font:inherit;font-size:.84rem;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 2px}
.embed-always:hover{color:var(--cream)}
.embed-block__note{margin:0;font-size:.8rem;color:rgba(255,246,232,.45)}

/* ---------- grands écrans ---------- */
@media(min-width:1500px){
  body{font-size:18px}
  .wrap{max-width:1520px}
  .topbar__in,.cookie__in{max-width:1520px}
}

/* ---------- finitions ordinateur ---------- */
@media(hover:hover) and (min-width:981px){
  .topnav a{position:relative;border-bottom:0}
  .topnav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:3px;
    background:var(--yellow);border-radius:2px;transition:right .28s cubic-bezier(.2,.8,.3,1)}
  .topnav a:hover::after{right:0}
  .act__name{transition:transform .26s cubic-bezier(.2,.8,.3,1),color .22s}
  .act:hover .act__name{transform:translateX(6px)}
  .tk{transition:transform .24s cubic-bezier(.2,.8,.3,1),box-shadow .24s}
  .tk:hover{transform:translateY(-6px);box-shadow:0 15px 0 var(--navy)}
  .pg{transition:border-color .2s,background .2s,transform .24s cubic-bezier(.2,.8,.3,1)}
  .pg:hover{transform:translateY(-4px)}
  .ed__aff img{transition:transform .45s cubic-bezier(.2,.8,.3,1)}
  .ed:hover .ed__aff img{transform:scale(1.07) rotate(-1.5deg)}
  .shot{transition:transform .4s cubic-bezier(.2,.8,.3,1)}
  .shot:hover{transform:scale(1.015)}
  .link{transition:border-color .2s,background .2s,transform .24s cubic-bezier(.2,.8,.3,1)}
}

/* ---------- pied ---------- */
.foot{background:rgba(10,37,71,.9);
  background:color-mix(in srgb,var(--navy) 90%,transparent);padding:clamp(48px,6vw,76px) 0 34px;position:relative;z-index:1;overflow-x:clip}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.foot h4{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:.92rem;
  letter-spacing:.1em;margin:0 0 14px;color:var(--yellow)}
.foot ul{list-style:none;margin:0;padding:0;font-size:.95rem;color:rgba(255,246,232,.8)}
.foot li{margin-bottom:9px}
.foot a:hover{color:var(--yellow)}
.foot__big{font-size:clamp(1.6rem,3.4vw,2.4rem);margin:0 0 12px}
#cookie-open{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
#cookie-open:hover{color:var(--yellow)}
.foot__bottom{margin-top:46px;padding-top:20px;border-top:1px solid rgba(255,246,232,.16);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:rgba(255,246,232,.55)}
@media(max-width:760px){.foot__grid{grid-template-columns:1fr}}

.rise{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .leaf__in,.strip__track,.dot::after{animation:none!important}
  .rise{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* images réelles dans le héros et les fiches (visibles des moteurs) */
.poster img,.shot img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.shot img{position:absolute;inset:0}

/* ---------- visionneuse d'affiches ---------- */
.ed__aff,[data-agrandir]{cursor:zoom-in}
/* l'affiche de l'accueil est inclinée et se redresse au survol : sans contour
   explicite, le focus clavier s'y perdait contre le bord sombre du cadre */
.poster img[data-agrandir]:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.ed__aff:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* La visionneuse reste dans le flux (display:flex) même fermée : sans layout,
   impossible de mesurer la taille finale de l'image, donc impossible de la
   faire grandir depuis la vignette. visibility:hidden la retire de l'ordre de
   tabulation, pointer-events:none l'empêche de capter le moindre clic.
   Le flou d'arrière-plan n'est posé qu'à l'ouverture : appliqué en permanence,
   il coûte du GPU sur toutes les pages, y compris pendant le défilement. */
.visio{position:fixed;inset:0;z-index:200;display:flex;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);
  background:rgba(6,32,24,.94);
  visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .26s ease,visibility 0s linear .26s}
.visio.on{visibility:visible;opacity:1;pointer-events:auto;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:opacity .26s ease,visibility 0s}
body.visio-open{overflow:hidden}

.visio__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;
  max-width:min(100%,860px);max-height:100%}
.visio__img{display:block;border-radius:12px;border:3px solid var(--navy);
  background:var(--ink-2);box-shadow:0 18px 50px rgba(0,0,0,.55);
  max-height:min(72vh,var(--visio-max,72vh));width:auto;object-fit:contain;
  transform-origin:center center;
  transition:transform .4s cubic-bezier(.2,.8,.3,1)}
/* posée par le JS le temps d'un aller : l'image part de la vignette cliquée */
.visio__img.saut{transition:none}
/* changement d'affiche par les flèches : court fondu, sans déplacement */
@keyframes visio-echange{from{opacity:.35}to{opacity:1}}
.visio__img.echange{animation:visio-echange .22s ease}

.visio__cap{margin:0;text-align:center;color:var(--cream);font-family:var(--body);max-width:62ch;
  opacity:0;transform:translateY(12px);
  transition:opacity .3s ease .1s,transform .3s ease .1s}
.visio.on .visio__cap{opacity:1;transform:none}
.visio__num{display:block;font-family:var(--display);font-weight:700;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.02em}
.visio__date{display:block;font-size:.84rem;color:var(--mute);margin-top:2px}
.visio__line{display:block;font-size:.86rem;color:var(--mute);margin-top:8px;line-height:1.5}

.visio__rond{position:absolute;width:52px;height:52px;padding:0;border-radius:100px;
  border:3px solid var(--navy);background:var(--cream);color:var(--navy);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 5px 0 var(--navy);transition:transform .14s ease,box-shadow .14s ease}
.visio__rond:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--navy)}
.visio__rond:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.visio__rond[hidden]{display:none}
.visio__fermer{top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px)}
.visio__prec{left:clamp(8px,2vw,28px);top:50%;margin-top:-26px}
.visio__suiv{right:clamp(8px,2vw,28px);top:50%;margin-top:-26px}

.visio__compte{position:absolute;bottom:clamp(12px,3vw,26px);left:50%;transform:translateX(-50%);
  font-family:var(--body);font-size:.78rem;letter-spacing:.14em;color:var(--mute)}

@media(max-width:620px){
  .visio__rond{width:44px;height:44px}
  .visio__prec{top:auto;bottom:clamp(12px,3vw,26px);margin-top:0;left:clamp(16px,6vw,40px)}
  .visio__suiv{top:auto;bottom:clamp(12px,3vw,26px);margin-top:0;right:clamp(16px,6vw,40px)}
  .visio__img{max-height:58vh}
  .visio__line{display:none}
}
@media(prefers-reduced-motion:reduce){
  .visio__rond{transition:none}
  /* le fondu du fond reste : c'est le déplacement qui gêne, pas l'apparition */
  .visio__img{transition:none}
  .visio__img.echange{animation:none}
  .visio__cap{transition:opacity .2s ease;transform:none}
}




/* ---------- bandeau d'après-festival (cashless, remerciements) ----------
   Placé sous l'en-tête plutôt qu'en position fixe : l'information est
   temporaire et ne doit pas masquer le contenu en permanence. */
/* Jaune plutôt qu'orange : c'est la couleur d'accent du site, elle porte déjà
   l'édition en cours, et le texte navy dessus tient un contraste franc. Un
   aplat orange saturé sous un en-tête vert sombre écrasait tout le reste. */
/* Fixé en haut, AU-DESSUS de l'en-tête collant (z-index 60) : l'information
   est datée et doit rester lisible où qu'on soit dans la page. L'en-tête et
   le corps sont décalés de --apres-h, mesurée en JS puisqu'elle dépend du
   texte et de la largeur d'écran. Sans ce décalage, le bandeau recouvrirait
   la barre de navigation. */
.apres{position:fixed;top:0;left:0;right:0;z-index:70;
  background:var(--yellow);color:var(--navy);border-bottom:3px solid var(--navy);
  box-shadow:0 6px 22px rgba(0,0,0,.28)}
body{padding-top:var(--apres-h,0px)}
.topbar{top:var(--apres-h,0px)}
/* Les ancres doivent s'arrêter sous les deux barres. Viser [id] et non
   :target : cette dernière ne s'applique qu'à la cible d'un lien, pas à un
   défilement déclenché autrement, et le titre passait alors sous l'en-tête. */
main [id]{scroll-margin-top:calc(var(--apres-h,0px) + 82px)}
.apres__in{max-width:1400px;margin:0 auto;padding:14px var(--pad);
  display:flex;align-items:center;gap:12px 22px;flex-wrap:wrap;
  font-family:var(--body);font-size:1rem;line-height:1.5}
.apres__txt{flex:1 1 320px;min-width:0}
.apres__in b{font-weight:700}
/* Une seule action mise en avant. Le second lien reste un lien : deux boutons
   côte à côte ne se hiérarchisent pas et le lecteur ne sait plus lequel suivre. */
.apres__cta{flex:none;display:inline-flex;align-items:center;gap:7px;
  padding:10px 20px;border-radius:100px;border:2px solid var(--navy);
  background:var(--navy);color:var(--cream);font-family:var(--display);
  font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap;
  transition:transform .14s ease,background .14s ease}
.apres__cta:hover{transform:translateY(-1px);background:#123a6d;color:var(--cream)}
.apres__lien{flex:none;color:var(--navy);font-weight:600;font-size:.95rem;
  white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.apres__lien:hover{text-decoration-thickness:2px}
.apres :focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:4px}
@media(max-width:620px){
  .apres__in{gap:10px 14px;padding:12px var(--pad);font-size:.92rem}
  .apres__cta,.apres__lien{flex:1 1 auto;justify-content:center;text-align:center}
  /* Le bandeau est fixe : chaque ligne gagnée est de l'écran rendu au
     contenu. Cette phrase est agréable mais pas nécessaire — l'essentiel
     est le crédit restant et la date limite. */
  .apres__long{display:none}
}
@media(prefers-reduced-motion:reduce){.apres__cta{transition:none}}

/* ---------- remboursement cashless ----------
   Encadré crème sur fond sombre : l'information est utile et datée, elle doit
   se repérer d'un coup d'œil sans crier comme le bandeau du haut. */
.cash{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,52px);
  align-items:center;background:var(--cream);color:var(--navy);
  border:3px solid var(--navy);border-radius:26px;
  padding:clamp(24px,3.4vw,40px);box-shadow:0 10px 0 var(--navy)}
.cash .eyebrow{color:#2C7A4B}
.cash h2{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,2.2rem);margin:0 0 14px;line-height:1.05}
.cash p{margin:0 0 12px;font-size:.98rem;color:rgba(10,37,71,.85);max-width:52ch}
.cash b{font-weight:700;color:var(--navy)}
.cash .btn{margin-top:8px;background:var(--navy);color:var(--cream);
  box-shadow:0 6px 0 rgba(10,37,71,.35)}
.cash__merci{font-family:var(--script);font-size:1.5rem;color:var(--navy);
  margin:16px 0 0!important;transform:rotate(-1.2deg);display:inline-block}
.cash__qr{margin:0;text-align:center;flex:none}
.cash__qr img{display:block;width:clamp(140px,17vw,190px);height:auto;
  border:3px solid var(--navy);border-radius:14px;background:#fff}
.cash__qr figcaption{margin-top:10px;font-family:var(--script);
  font-size:1.05rem;color:rgba(10,37,71,.7)}
/* En colonne latérale, la carte garde texte et QR côte à côte : elle est
   assez large pour les deux. Le texte reste aligné à gauche — centré sur
   cinq lignes, chaque début de ligne se cherche. */
.cote .cash{gap:clamp(20px,2.4vw,36px);text-align:left}
.cote .cash p{max-width:none}
.cote .cash__qr img{width:clamp(140px,13vw,170px)}
@media(max-width:760px){
  .cash{grid-template-columns:1fr;justify-items:center;text-align:center}
  .cash p{margin-inline:auto}
}

/* ---------- galerie de l'édition ---------- */
/* Mise en colonnes plutôt qu'en grille : la moitié des photos sont en portrait
   et l'autre en paysage. Une grille à cases égales les recadrait toutes en 3/2,
   ce qui coupait les portraits en pleine tête. Ici chaque image garde sa forme
   et les colonnes se remplissent à hauteur libre. */
.galerie{columns:4 250px;column-gap:14px}
.galerie__item{break-inside:avoid;margin:0 0 14px;border-radius:14px;overflow:hidden;
  border:3px solid var(--navy);background:var(--ink-2);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
  transition:transform .35s cubic-bezier(.2,.8,.3,1)}
/* Photos très légèrement de travers, comme posées à la main. L'angle alterne
   sur trois valeurs pour qu'aucun motif régulier ne se lise dans la grille. */
.galerie__item:nth-child(3n+1){transform:rotate(-.7deg)}
.galerie__item:nth-child(3n+2){transform:rotate(.55deg)}
.galerie__item:nth-child(3n+3){transform:rotate(-.25deg)}
.galerie__item:hover{transform:rotate(0) scale(1.012);position:relative;z-index:2}
.galerie__item img{display:block;width:100%;height:auto;
  transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.galerie__item:hover img{transform:scale(1.03)}
@media(max-width:520px){
  .galerie{columns:2 140px;column-gap:10px}
  .galerie__item{margin-bottom:10px;border-width:2px;border-radius:11px}
}
@media(prefers-reduced-motion:reduce){
  .galerie__item,.galerie__item img{transition:none;transform:none}
  .galerie__item:hover,.galerie__item:hover img{transform:none}
}
/* Repli : 161 photos font dix-neuf écrans de défilement. Le repli est posé
   PAR LE JAVASCRIPT, jamais dans le HTML — sans script, la galerie doit
   rester entièrement visible plutôt que tronquée sans moyen de la dérouler. */
.galerie--repliee .galerie__item:nth-child(n+49){display:none}
.galerie-plus{display:flex;justify-content:center;margin-top:24px}
.credit-photo + .galerie-plus{margin-top:16px}

/* crédit du photographe, sous la galerie */
.credit-photo{margin:22px 0 0;font-size:.88rem;color:var(--mute);text-align:center}
.credit-photo a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}
.credit-photo a:hover{color:var(--yellow)}
#galerie-attente{grid-column:1/-1;text-align:center;padding:44px 16px;
  border:2px dashed rgba(255,246,232,.2);border-radius:20px;
  background:rgba(13,58,42,.5);color:var(--mute);margin:0}
/* ---------- bloc encadré de liane (page souvenir) ----------
   Même tige et même feuillage que la frise de /a-propos/ : le tracé est
   calculé par tracerLiane() dans site.js, qui suit le périmètre du bloc.
   Le SVG déborde de 8 px de chaque côté — valeur en dur, accordée à la
   constante `marge` du script. */
.liane{position:relative;text-align:center;
  padding:clamp(30px,5vw,56px) clamp(22px,4vw,54px)}
.liane__fil{position:absolute;left:-8px;top:-8px;
  width:calc(100% + 16px);height:calc(100% + 16px);
  overflow:visible;pointer-events:none;z-index:0}
.liane__in{position:relative;z-index:1;max-width:54ch;margin:0 auto}
.liane__in p{margin:0 auto 14px;color:rgba(255,246,232,.84)}
.liane__in .btn{margin-top:18px}
/* le ruban jaune de l'accueil, posé à cheval sur la liane */
.liane .tape{top:-15px}

/* Le mot manuscrit, comme « est dans l'pré » sur l'accueil : c'est ce qui
   rend le remerciement chaleureux plutôt qu'administratif. Le composant est
   celui du héros, ici centré au lieu d'être aligné à gauche. */
.merci{font-size:clamp(3rem,8.6vw,5.8rem);margin-bottom:14px;line-height:.92}
.merci .l2{display:block;font-family:var(--script);font-weight:400;text-transform:none;
  font-size:1.02em;line-height:.92;color:var(--yellow);
  transform:rotate(-2.2deg);transform-origin:center}
/* signature, légèrement de travers comme une vraie */
.signe{font-family:var(--script);font-size:clamp(1.25rem,3vw,1.8rem);
  color:var(--yellow);margin-top:24px!important;display:inline-block;
  transform:rotate(-1.6deg)}

/* la liane se dessine quand le bloc entre dans le champ, comme la frise */
.liane__fil .tige{stroke-dasharray:var(--long);stroke-dashoffset:var(--long)}
.liane--prete.in .tige{stroke-dashoffset:0;
  transition:stroke-dashoffset 1.8s cubic-bezier(.3,.8,.4,1)}
.liane__fil .tige__feuilles path{transition:opacity .5s ease}
.liane--prete.in .tige__feuilles path{opacity:.9;
  transition-delay:calc(560ms + var(--i,0) * 24ms)}
@media(prefers-reduced-motion:reduce){
  .liane--prete .tige{stroke-dashoffset:0;transition:none}
  .liane--prete .tige__feuilles path{opacity:.9;transition:none;transition-delay:0s}
}

/* ---------- la nuit, heure par heure ----------
   Le récit de la soirée : c'est ce dont les gens se souviennent, et cela
   donne à la page un contenu propre au lieu d'un simple message de merci. */
/* Le déroulé de la nuit et le tirage des bénévoles se répondent : seule, la
   frise laissait la moitié droite de l'écran vide. */
/* Vis-à-vis réservé aux écrans qui ont la place pour les deux : en dessous de
   1150 px, la carte réduisait la frise à moins de 300 px et les noms de
   groupes se tassaient. Elle passe alors en pleine largeur, sous la frise. */
.duo{display:grid;gap:34px}
@media(min-width:1150px){
  .duo{grid-template-columns:minmax(0,1fr) minmax(0,640px);
    gap:clamp(30px,3.4vw,52px);align-items:start}
}
.solo{max-width:660px}
.hi__h2--serre{margin-top:0}
/* colonne de droite : la carte cashless, puis la photo quand elle arrivera */
.cote{display:grid;gap:26px}
.cote .benev{max-width:none;margin-top:8px}
/* la bascule en une colonne est portée par la règle min-width:1150px ci-dessus */
@media(max-width:1149px){
  .cote .benev{max-width:620px;margin-inline:auto}
}

/* alignée à gauche comme son titre : centrée, elle décrochait du reste */
.nuit{list-style:none;margin:0;padding:0;position:relative;max-width:620px}
.nuit::before{content:"";position:absolute;left:75px;top:20px;bottom:24px;width:3px;
  border-radius:2px;background:rgba(140,198,63,.28)}
.nuit li{position:relative;display:grid;grid-template-columns:62px 1fr;
  gap:0 34px;align-items:baseline;padding:13px 0}
.nuit__h{font-family:var(--display);font-weight:600;font-size:1rem;
  text-align:right;color:var(--c);white-space:nowrap}
.nuit__pt{position:absolute;left:69px;top:19px;width:15px;height:15px;border-radius:50%;
  background:var(--c);box-shadow:0 0 0 4px var(--ink)}
.nuit__n{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.1;color:var(--cream)}
.nuit__s{display:block;font-size:.82rem;color:var(--mute);margin-top:3px}
.nuit a{display:block}
.nuit a:hover .nuit__n{color:var(--c)}
.nuit li:last-child .nuit__n{font-family:var(--script);text-transform:none;
  font-weight:400;font-size:1.5rem;color:var(--mute)}
@media(max-width:560px){
  /* la pastille doit commencer APRÈS la fin de l'heure : à 41 px elle
     recouvrait le dernier chiffre, « 17h15 » se lisait « 17h1 ». */
  .nuit::before{left:57px}
  .nuit li{grid-template-columns:48px 1fr;gap:0 22px;padding:11px 0}
  .nuit__pt{left:52px;width:13px;height:13px;top:17px}
  .nuit__h{font-size:.82rem}
}

/* ---------- photo des bénévoles, en tirage posé ----------
   Un tirage papier légèrement de travers, retenu par un bout de ruban : le
   détail artisanal qui distingue une page souvenir d'une page d'annonce. */
.benev{margin:clamp(34px,5vw,56px) auto 0;max-width:640px;
  background:var(--cream);padding:14px 14px 18px;border-radius:4px;
  box-shadow:0 24px 54px rgba(0,0,0,.55);transform:rotate(-1.5deg)}
.benev::before{content:"";position:absolute;top:-14px;left:50%;
  transform:translateX(-50%) rotate(-2.5deg);width:118px;height:27px;
  background:rgba(251,180,28,.82);border-radius:2px;
  box-shadow:0 2px 7px rgba(0,0,0,.32)}
.benev{position:relative}
.benev figcaption{margin:14px 4px 0;text-align:center;
  font-family:var(--script);font-size:1.18rem;color:var(--navy)}
.benev img{display:block;width:100%;height:auto;border-radius:2px}
/* En attente de la vraie photo : une zone sobre à l'intérieur du tirage. Un
   aplat vert vif attirait davantage l'œil que le contenu de la page, alors
   qu'il ne marque qu'un emplacement à remplir. */
.benev__attente{aspect-ratio:3/2;display:grid;place-items:center;text-align:center;
  padding:24px;border-radius:2px;background:var(--ink-2)}
.benev__attente .shot__ph b{color:rgba(255,246,232,.86)}
@media(prefers-reduced-motion:reduce){.benev{transform:none}}

/* ---------- soirées de soutien (novembre 2026) ----------
   Deux cartes côte à côte, une par soir : la date et le genre d'abord, comme
   sur l'affiche, puis les DJs. Chaque DJ porte un id : c'est là que viendront
   se greffer bio, photos et vidéos. */
.poster--a4{aspect-ratio:560/792}
.soirs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:22px}
.soir{border:3px solid var(--navy);border-radius:26px;background:var(--cream);color:var(--navy);
  padding:clamp(24px,3.4vw,38px);box-shadow:0 10px 0 var(--navy);position:relative;overflow:hidden}
.soir::before{content:"";position:absolute;inset:0 0 auto;height:10px;background:var(--c)}
.soir__date{margin:0 0 6px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:rgba(10,37,71,.7)}
.soir__date b{display:block;font-family:var(--display);font-size:clamp(2rem,5vw,2.8rem);
  letter-spacing:-.01em;line-height:1;color:var(--navy)}
.soir__genre{display:inline-block;margin:14px 0 0;padding:8px 16px;border-radius:14px;
  background:var(--c);color:var(--navy);font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:clamp(1.25rem,2.8vw,1.6rem);line-height:1.05}
.soir__avec{margin:18px 0 4px;font-family:var(--script);font-size:1.3rem;color:rgba(10,37,71,.65)}
.soir__djs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.soir__djs b{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.35rem,3vw,1.75rem);line-height:1.05}
.soir__djs span{font-family:var(--script);font-size:1.15rem;color:rgba(10,37,71,.7)}
#programme .note{margin-top:28px}
/* Carte de la page souvenir : l'affiche prend la place du QR code. */
.cash__qr--affiche img{border-radius:10px;background:none}
.cash__qr--affiche a{display:block;transition:transform .2s ease}
.cash__qr--affiche a:hover{transform:rotate(-2deg) scale(1.03)}
/* Les deux soirs ne doivent jamais se confondre : vendredi en rose disco,
   comme les pavés de l'affiche ; samedi en nuit bleue, liseré cyan. */
.soir--disco{background:linear-gradient(150deg,#EF3D7A 0%,#C2186B 100%);color:var(--cream)}
.soir--disco::before{background:linear-gradient(90deg,#5ED0F5,#EF3D7A,#7B3FB8)}
.soir--techno{background:linear-gradient(160deg,#0A2547 0%,#06131F 100%);color:var(--cream);
  border-color:var(--cyan);box-shadow:0 10px 0 var(--cyan)}
.soir--techno::before{background:var(--cyan)}
.soir--disco .soir__date,.soir--techno .soir__date{color:rgba(255,246,232,.8)}
.soir--disco .soir__date b,.soir--techno .soir__date b{color:var(--cream)}
.soir--disco .soir__genre{background:var(--cream);color:#C2186B}
.soir--techno .soir__genre{background:var(--cyan);color:var(--navy)}
.soir__80{display:block;font-size:2.1em;line-height:.95;
  background:linear-gradient(180deg,#5ED0F5 10%,#EF3D7A 55%,#7B3FB8 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.soir--disco .soir__avec,.soir--techno .soir__avec,
.soir--disco .soir__djs span,.soir--techno .soir__djs span{color:rgba(255,246,232,.78)}
.soir[id]{scroll-margin-top:96px}

/* ---------- soirées de soutien : horaires et présentation des DJs ----------
   Dans les cartes du programme, chaque DJ porte son créneau et renvoie à sa
   présentation plus bas. Les présentations reprennent les couleurs des deux
   soirs : liseré rose pour le vendredi, cyan pour le samedi. */
.soir__h{display:block;font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,246,232,.72);margin-bottom:2px}
.soir__djs a{color:inherit;text-decoration:none}
.soir__djs a:hover b,.soir__djs a:focus-visible b{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}

.dj{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(22px,4vw,56px);align-items:start;
  padding:clamp(24px,3.4vw,40px);border-radius:26px;border:3px solid var(--c);
  background:rgba(6,19,31,.55);scroll-margin-top:96px}
.dj + .dj{margin-top:28px}
.dj--disco{--c:var(--pink)}
.dj--techno{--c:var(--cyan)}
.dj__quand{margin:0 0 6px;font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.dj__nom{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.9rem,4.4vw,2.8rem);line-height:1}
.dj__style{margin:8px 0 18px;font-family:var(--script);font-size:1.35rem;color:var(--mute)}
.dj__txt > p:not([class]){margin:0 0 14px;max-width:58ch;line-height:1.6;color:rgba(255,246,232,.86)}
.dj__txt a,.dj__media figcaption a{color:var(--c)}
.dj__media{margin:0}
.dj__media figcaption{margin-top:10px;font-size:.86rem;color:var(--mute)}
.dj__videos{display:grid;gap:26px}
.dj__lien{display:inline-block;margin-top:8px;font-size:.86rem;color:var(--c)}
.hfu{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:22px}
.hfu li{padding-top:18px;border-top:2px solid rgba(255,246,232,.14);scroll-margin-top:96px}
.hfu h4{margin:0 0 4px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.35rem}
.hfu p:not([class]){margin:0 0 12px;color:rgba(255,246,232,.8)}
@media(max-width:900px){.dj{grid-template-columns:1fr}}

.mercis{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.mercis li{padding:18px 22px;border-radius:18px;border:2px solid rgba(255,246,232,.14);
  background:rgba(13,58,42,.93);line-height:1.5}
.mercis b{color:var(--yellow)}

/* ---------- pages DJ (une par DJ, ouvertes depuis le programme) ---------- */
.dj-page{padding-top:clamp(36px,5vw,64px)}
.dj-page .back{margin-bottom:22px}
.dj-page .dj__nom{font-size:clamp(2.2rem,6vw,3.6rem)}
.hfu__nom{margin:0 0 4px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.35rem}
/* Les noms du programme ouvrent la page du DJ : une flèche le signale. */
.soir__djs a b::after{content:"→";display:inline-block;margin-left:.4em;font-size:.8em;transition:transform .2s ease}
.soir__djs a:hover b::after,.soir__djs a:focus-visible b::after{transform:translateX(4px)}
.soir__djs a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}