@font-face{font-family:"Archivo Black";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/archivo-black-latin-400-normal.woff2") format("woff2")}

@font-face{font-family:"Montserrat";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/montserrat-latin-400-normal.woff2") format("woff2")}

@font-face{font-family:"Montserrat";font-weight:600;font-style:normal;font-display:swap;src:url("../assets/fonts/montserrat-latin-600-normal.woff2") format("woff2")}

@font-face{font-family:"Montserrat";font-weight:700;font-style:normal;font-display:swap;src:url("../assets/fonts/montserrat-latin-700-normal.woff2") format("woff2")}

/* Polices de secours aux mêmes proportions que les vraies (mesurées sur les fichiers .woff2) :
   le texte ne « saute » pas au chargement quand la vraie police arrive. */
@font-face{font-family:"Archivo Black Fallback";src:local("Arial Black"),local("ArialMT-Black");ascent-override:88%;descent-override:21%;line-gap-override:0%}
@font-face{font-family:"Montserrat Fallback";src:local("Arial"),local("Helvetica");size-adjust:107.8%;ascent-override:90%;descent-override:23.2%;line-gap-override:0%}

/* ---------- 2. Charte : couleurs relevées sur CHARTE_TND.pdf ---------- */
:root{
  --violet:#4226b6;
  --navy:#00006e;
  --lav:#956aff;
  --cyan:#269ab6;
  --pink:#b6269a;

  /* Thème violet foncé (permanent) — remplace le fond beige.
     Ancienne palette claire conservée juste en dessous, au cas où :
       --page:#fffcf7; --card:#ede5de; --ink:#000; --muted:rgba(0,0,0,.72);
       --wm:#4226b6; --sh-tekno:rgba(0,0,0,.30); --sh-wm:#000;
       --panel:#00006e; --accent:#4226b6; --line:rgba(0,0,0,.16); */
  --page:#0b0722;
  --card:#150d3b;
  --ink:#fff;
  --muted:rgba(255,255,255,.72);

  --wm:#956aff;
  --sh-tekno:rgba(149,106,255,.55);
  --sh-wm:#4226b6;

  --panel:#4226b6;
  --accent:#956aff;
  --line:rgba(255,255,255,.14);

  /* Dégradé du titre (identique au « Never Dies » du hero) */
  --gradient-title:linear-gradient(105deg,#fff 4%,#c1b1ff 28%,#956aff 58%,#b6269a 95%);
  --bracket:#956aff;
  --gradient-card:linear-gradient(100deg,#d9ccff 0%,#956aff 46%,#d54fc0 100%);

  /* ---------- Identité visuelle TND ---------- */
  --gradient-tnd:linear-gradient(120deg,var(--violet),var(--lav),var(--pink));

  --glow-violet:0 0 28px rgba(66,38,182,.28);
  --glow-lav:0 0 30px rgba(149,106,255,.30);

  --badge:var(--badge-white);
  --badge-white:url("../assets/img/badge-white.webp");

  --display:"Archivo Black","Archivo Black Fallback","Arial Black",Impact,sans-serif;
  --text:"Montserrat","Montserrat Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;

  --pad:clamp(20px,4vw,56px);
  --logo:clamp(48px,5vw,64px); /* même taille que .top .badge, utilisée par le menu plein écran */

  color-scheme:dark;
  box-sizing:border-box;

  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

:root[data-theme="dark"]{
  --page:#050424;
  --card:#101040;
  --ink:#fff;
  --muted:rgba(255,255,255,.76);

  --wm:#956aff;
  --sh-tekno:rgba(149,106,255,.55);
  --sh-wm:#4226b6;

  --panel:#4226b6;
  --accent:#956aff;
  --line:rgba(255,255,255,.2);

  --badge:var(--badge-white);
  color-scheme:dark;
}

/* ---------- 3. Base ---------- */
*,
*::before,
*::after{
  box-sizing:inherit
}

html{
  scroll-padding-top:env(safe-area-inset-top,0px)
}

@media (prefers-reduced-motion:no-preference){
  html{
      scroll-behavior:smooth
    }
}

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--text);
  font-size:1.0625rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden
}

img,
svg{
  max-width:100%
}

a{
  color:inherit
}

:focus-visible{
  outline:3px solid var(--pink);
  outline-offset:3px;
  border-radius:6px
}

.container{
  width:100%;
  max-width:1280px;
  margin-inline:auto;
  padding-inline:var(--pad)
}

.badge{
  display:block;
  aspect-ratio:1/1;
  background:var(--badge) center/100% 100% no-repeat;
  border-radius:50%
}

/* ---------- 4. Accueil ---------- */
.top{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;

  padding:clamp(12px,1.8vw,22px) var(--pad);

  background:rgba(255,252,247,.035);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  border-bottom:1px solid rgba(255,255,255,.06);

  transition:
    padding .35s ease,
    background-color .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.top.is-scrolled{
  padding-top:10px;
  padding-bottom:10px;

  background:rgba(255,252,247,.92);

  border-bottom-color:rgba(66,38,182,.12);

  box-shadow:
    0 10px 35px rgba(0,0,0,.08),
    0 0 30px rgba(66,38,182,.06);
}

.top .badge{
  width:clamp(48px,5vw,64px);

  transition:
    transform .35s ease,
    filter .35s ease;

  filter:drop-shadow(0 0 0 rgba(66,38,182,0));
}

.top .brand{
  display:flex;
  align-items:center;
  flex:none;
}

.top .brand:hover .badge{
  transform:rotate(-4deg) scale(1.04);
  filter:drop-shadow(0 0 12px rgba(66,38,182,.28));
}

/* Ce bloc ".top nav ..." stylait l'ancien menu horizontal dans le header.
   Le header ne contient plus de <nav> (voir partials/header.html) : la
   navigation est maintenant le menu plein écran ".tnd-menu" (section 9).
   Conservé ici sans suppression, au cas où on reviendrait à un menu inline. */
.top nav{
  display:flex;
  align-items:center;
  gap:clamp(12px,2.4vw,32px);
  flex-wrap:wrap;
}

.top nav a{
  position:relative;

  font-weight:700;
  text-decoration:none;
  font-size:.92rem;
  letter-spacing:.01em;
  text-transform:uppercase;

  padding:8px 2px;

  border-bottom:0;

  transition:
    color .25s ease,
    transform .25s ease,
    text-shadow .25s ease;
}

.top nav a::after{
  content:"";

  position:absolute;
  left:0;
  right:0;
  bottom:0;

  height:2px;
  border-radius:999px;

  background:var(--gradient-tnd);

  transform:scaleX(0);
  transform-origin:center;

  transition:transform .25s ease;
}

.top nav a:hover{
  transform:translateY(-1px);
  text-shadow:0 0 12px rgba(182,38,154,.24);
}

.top nav a:hover::after{
  transform:scaleX(1);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:clamp(640px,100svh,960px);
  display:flex;
  align-items:center;
  padding:clamp(128px,15vh,168px) 0 clamp(64px,9vh,112px);
  overflow:hidden
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-block;
  font-family:var(--text);
  font-weight:700;
  font-size:1rem;
  text-decoration:none;
  padding:.9em 1.5em;
  border-radius:999px;
  border:2px solid var(--ink);
  transition:
    transform .2s ease,
    background-color .2s ease,
    box-shadow .2s ease
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--glow-violet)
}

/* Bouton principal : gradient TND */
.btn-solid{
  background:var(--gradient-tnd);
  border-color:transparent;
  color:#fff
}

.btn-solid:hover{
  background:var(--gradient-tnd);
  border-color:transparent;
  box-shadow:var(--glow-lav);
  transform:translateY(-3px)
}

.btn-line{
  background:transparent;
  color:var(--ink)
}

.btn-line:hover{
  background:var(--card)
}

.btn-cyan{
  background:#fff;
  border-color:#fff;
  color:var(--page)
}

.btn-cyan:hover{
  background:var(--lav);
  border-color:var(--lav)
}

.track{
  display:flex;
  width:max-content;
  animation:tick 80s linear infinite
}

.track span{
  display:inline-flex;
  align-items:center;
  gap:.9em;
  padding-right:.9em;
  font-family:var(--display);
  font-size:clamp(1.5rem,3.4vw,2.6rem);
  text-transform:uppercase;
  white-space:nowrap
}

.track svg{
  width:.8em;
  height:.8em;
  flex:none
}

.track svg.c{
  fill:var(--cyan)
}

.track svg.p{
  fill:var(--pink)
}

@keyframes tick{
  to{
    transform:translateX(-50%)
  }
}

h2{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.92;
  margin:0;
  letter-spacing:-.02em;
  font-size:clamp(2.4rem,6.5vw,5.6rem)
}

/* Exceptions : titres blancs sur fonds colorés */
.rejoindre h2{
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  color:#fff
}

/* ---------- Agenda ---------- */
.agenda-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:clamp(28px,4vw,52px)
}

.squiggle{
  width:clamp(130px,20vw,260px);
  aspect-ratio:620/255;
  background:url("../assets/img/decor/squiggle.webp") center/contain no-repeat;
  flex:none
}

/* ---------- Rejoindre ---------- */
.rejoindre{
  background:var(--gradient-tnd);
  color:#fff;
  border-radius:clamp(24px,3.4vw,44px);
  padding:clamp(32px,6vw,88px);
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 20px 55px rgba(66,38,182,.28)
}

.rejoindre h2,
.rejoindre p,
.rejoindre .btn{
  position:relative;
  z-index:2
}

.rejoindre h2{
  max-width:14ch;
  margin-bottom:.45em
}

.rejoindre p{
  max-width:42ch;
  margin:0 0 1.8em;
  font-size:1.12rem
}

/* ---------- Chaîne 3D dynamique ---------- */
.chain{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:auto
}

.chain canvas{
  display:block;
  width:100%!important;
  height:100%!important
}

/* ---------- Footer ---------- */
footer{
  margin-top:clamp(36px,7vw,96px);
  padding:clamp(42px,7vw,80px) 0 28px;
  color:#fff;
  background:var(--navy);
  border-top:6px solid var(--violet)
}

.footer-grid{
  display:grid;
  grid-template-columns:minmax(220px,1.15fr) minmax(240px,1fr) minmax(200px,.8fr);
  gap:clamp(28px,6vw,88px)
}

.footer-brand{display:flex;align-items:flex-start;gap:16px}

.footer-brand .badge{width:68px;flex:none;background-image:var(--badge-white)}

.footer-brand .tnd{font-family:var(--display);font-size:1.5rem;line-height:1;text-shadow:.06em .06em 0 var(--sh-wm)}

.footer-brand p,
.footer-contact p{margin:.7em 0 0;color:rgba(255,255,255,.76);font-size:.9rem}

.footer-column h2{margin:0 0 14px;font-family:var(--text);font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a99aff}

.footer-column nav{display:grid;grid-template-columns:repeat(2,max-content);gap:6px 28px;font-size:.88rem}

.footer-column nav a,
.footer-bottom a{font-weight:700;text-decoration:none}

.footer-column nav a:hover,
.footer-bottom a:hover{color:#8fe4f1;text-decoration:underline;text-underline-offset:4px}

.socials{display:flex!important;flex-wrap:wrap;gap:10px!important}

.socials a{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;font-size:.82rem}

.socials svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}

.socials svg path{fill:currentColor;stroke:none}

.socials .social-dot{fill:currentColor;stroke:none}

.footer-bottom{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:22px;border-top:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.68);font-size:.82rem}

.footer-bottom nav{display:flex;flex-wrap:wrap;gap:18px}

/* ---------- 7. Étoiles 3D (calque fixe, au-dessus de la page) ---------- */
#stage{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none
}

@media (max-width:900px){
  .top nav{
      gap:14px
    }
}

@media (max-width:520px){
  .top nav a{
      font-size:.9rem
    }

  .agenda-head .squiggle{
      display:none
    }
}

@media (prefers-reduced-motion:reduce){
  .track{
      animation:none
    }
}

@media (max-width:760px){
  .top{
      position:fixed;
      top:0;
      left:0;
      right:0;
      background:rgba(255,252,247,.55); /* était rgba(10,10,14,.3) : bandeau gris sur fond crème */
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      padding-bottom:12px
    }

  .top .badge{
      width:52px
    }

  .hero{
      min-height:auto;
      padding-top:clamp(116px,18vh,156px);
      padding-bottom:clamp(58px,10vh,96px)
    }

  .footer-grid{grid-template-columns:1fr;gap:34px}

  .footer-bottom{align-items:flex-start;flex-direction:column}
}

/* =====================================================================
   9. Menu plein écran (design repris du projet tekno-never-dies_2)
   Bouton ".tnd-toggle" toujours visible en haut à droite, ouvre le menu
   plein écran ".tnd-menu". Logique JS : initMenu() dans js/partials.js.
   ===================================================================== */
.tnd-toggle{
  position:fixed;z-index:1001;
  top:calc(clamp(14px,2.4vw,28px) + var(--logo)/2 - 23px + env(safe-area-inset-top,0px));
  right:var(--pad);
  display:flex;align-items:center;gap:10px;
  padding:10px 20px;border-radius:999px;cursor:pointer;
  background:var(--navy);color:#fff;border:2px solid var(--pink);
  font:700 1rem var(--text);
  box-shadow:.18em .18em 0 var(--pink);
  transition:background-color .2s,color .2s,box-shadow .2s,transform .2s;
}

.tnd-toggle:hover{transform:translate(-2px,-2px);box-shadow:.3em .3em 0 var(--pink)}

.tnd-toggle[aria-expanded="true"]{background:var(--pink);color:var(--navy);box-shadow:none;transform:none}

.tnd-toggle:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* Mini égaliseur : quatre rythmes et niveaux différents, comme un vu-mètre. */
.tnd-eq{display:inline-flex;align-items:flex-end;gap:3px;height:16px}

.tnd-eq span{display:block;width:3px;border-radius:2px;transform-origin:bottom;will-change:transform}

.tnd-eq span:nth-child(1){height:62%;animation:tnd-level-1 2.1s linear -.9s infinite}

.tnd-eq span:nth-child(2){height:92%;animation:tnd-level-2 2.75s linear -1.5s infinite}

.tnd-eq span:nth-child(3){height:74%;animation:tnd-level-3 2.3s linear -.5s infinite}

.tnd-eq span:nth-child(4){height:100%;animation:tnd-level-4 2.9s linear -1.8s infinite}

@keyframes tnd-level-1{
  0%,100%{transform:scaleY(.22);background-color:#58df82}
  24%{transform:scaleY(.52);background-color:#a8dc50}
  48%{transform:scaleY(.86);background-color:#f0cb3c}
  68%{transform:scaleY(1.28);background-color:#ef4943}
  84%{transform:scaleY(.76);background-color:#ff9d36}
}

@keyframes tnd-level-2{
  0%,100%{transform:scaleY(.3);background-color:#58df82}
  19%{transform:scaleY(.74);background-color:#b4df4c}
  43%{transform:scaleY(1.12);background-color:#f4bd37}
  61%{transform:scaleY(1.38);background-color:#ed403f}
  82%{transform:scaleY(.8);background-color:#ff9c35}
}

@keyframes tnd-level-3{
  0%,100%{transform:scaleY(.18);background-color:#58df82}
  31%{transform:scaleY(.64);background-color:#b1df4d}
  51%{transform:scaleY(.98);background-color:#f2c13a}
  73%{transform:scaleY(1.32);background-color:#ed403f}
  89%{transform:scaleY(.7);background-color:#ffa037}
}

@keyframes tnd-level-4{
  0%,100%{transform:scaleY(.26);background-color:#58df82}
  17%{transform:scaleY(.6);background-color:#a8dc50}
  42%{transform:scaleY(.94);background-color:#f0c83b}
  64%{transform:scaleY(1.24);background-color:#ef4943}
  81%{transform:scaleY(.68);background-color:#ff9d36}
}

/* Le menu plein écran */
.tnd-menu{
  position:fixed;inset:0;z-index:1000;
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--logo) + 64px + env(safe-area-inset-top,0px)) var(--pad) calc(32px + env(safe-area-inset-bottom,0px));
  background:var(--navy);color:#fff;
  visibility:hidden;opacity:0;
  transition:opacity .25s,visibility 0s .25s;
}

.tnd-menu.is-open{visibility:visible;opacity:1;transition:opacity .25s}

/* Logo blanc à la même place que celui du header */
.tnd-menu-badge{
  position:absolute;
  top:calc(clamp(14px,2.4vw,28px) + env(safe-area-inset-top,0px));left:var(--pad);
  width:var(--logo);background-image:var(--badge-white);
}

.tnd-links{list-style:none;margin:0;padding:0}

.tnd-links li{opacity:0;transform:translateY(24px);transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1)}

.tnd-menu.is-open .tnd-links li{opacity:1;transform:none;transition-delay:calc(var(--i) * 55ms + 80ms)}

/* Les liens : lettres en contour, qui se remplissent en rose au survol */
.tnd-links a{
  display:inline-flex;align-items:center;gap:.3em;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.2rem,min(10vw,10.5vh),6.2rem);line-height:1.02;letter-spacing:-.005em;
  text-decoration:none;
  color:transparent;-webkit-text-stroke:2px #fff;
  transition:color .18s,-webkit-text-stroke-color .18s,transform .18s,text-shadow .18s;
}

.tnd-links a:hover,
.tnd-links a:focus-visible{
  color:var(--pink);-webkit-text-stroke-color:var(--pink);
  text-shadow:.045em .045em 0 var(--violet);
  transform:translateX(.1em);outline:none;
}

/* Page actuelle = le morceau "en cours de lecture" : lettres pleines + égaliseur.
   La classe .active est posée par markActiveLink() dans js/partials.js. */
.tnd-links a.active{color:#fff;-webkit-text-stroke-color:#fff;text-shadow:.045em .045em 0 var(--violet)}

.tnd-links a.active:hover{color:var(--pink);-webkit-text-stroke-color:var(--pink)}

.tnd-links .tnd-eq{height:.5em;gap:.07em}

.tnd-links .tnd-eq span{width:.08em}

.tnd-menu-foot{margin:0;color:var(--lav);font-weight:600;line-height:1.6}

.tnd-menu-foot a{color:#fff}

.tnd-menu-foot a:hover{color:var(--pink)}

.tnd-menu-foot a:focus-visible{outline-color:var(--cyan)}

/* Bas du menu : coordonnées + choix de la langue (FR / DE / EN) */
.tnd-menu-bottom{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px}

.tnd-lang{display:inline-flex;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.3);border-radius:999px}

.tnd-lang button{
  min-width:48px;min-height:40px;padding:0 14px;border:0;border-radius:999px;
  background:transparent;color:#fff;font:inherit;font-weight:700;font-size:.85rem;letter-spacing:.12em;
  cursor:pointer;transition:background .2s,color .2s;
}

.tnd-lang button:hover{color:var(--pink)}

.tnd-lang button[aria-pressed="true"]{background:#fff;color:var(--navy)}

.tnd-lang button:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* Choix de la langue dans le bandeau du haut, juste avant le bouton Menu :
   le bouton Menu suit le bandeau (au lieu d'être fixé seul) pour qu'ils restent alignés. */
.top .tnd-lang{margin-left:auto;background:rgba(11,7,34,.55);flex-shrink:0}

.top .tnd-toggle{position:relative;top:auto;right:auto;flex-shrink:0}

@media (max-width:760px){
  .top{gap:10px}

  .top .tnd-lang{gap:2px;padding:3px}

  .top .tnd-lang button{min-width:34px;min-height:34px;padding:0 6px;font-size:.75rem;letter-spacing:.06em}
}

/* Traduction en cours (js/i18n/i18n.js) : la page reste masquée un instant pour ne pas
   afficher le français puis l'allemand ou l'anglais. */
html.i18n-pending body{visibility:hidden}

/* Pages légales traduites : rappel que la version française fait foi */
.legal-lang-note{margin-top:1em!important;font-size:.9rem!important;font-style:italic}

/* Colonne de droite du menu : prochaine soirée + Instagram (ordinateur uniquement) */
.tnd-menu-side{display:none}

@media (min-width:1100px) and (hover:hover){
  .tnd-menu-side{
    position:absolute;right:var(--pad);top:50%;
    display:grid;gap:18px;width:clamp(240px,22vw,320px);
    opacity:0;transform:translate(24px,-50%);
    transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .tnd-menu.is-open .tnd-menu-side{opacity:1;transform:translate(0,-50%);transition-delay:.3s}
  .tnd-next{display:grid;gap:12px}
  .tnd-next[hidden]{display:none}
  .tnd-next__eyebrow{margin:0;color:var(--lav);font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
  .tnd-next__card{display:grid;gap:6px;color:#fff;text-decoration:none}
  .tnd-next__card img{
    width:100%;max-height:48vh;aspect-ratio:4/5;object-fit:cover;border-radius:14px;
    border:1px solid rgba(255,255,255,.2);
    transition:transform .3s ease,box-shadow .3s ease;
  }
  .tnd-next__card:hover img{transform:translateY(-4px);box-shadow:.4em .4em 0 var(--violet)}
  .tnd-next__title{margin-top:6px;font-family:var(--display);font-size:1.7rem;line-height:1;text-transform:uppercase}
  .tnd-next__card:hover .tnd-next__title{color:var(--pink)}
  .tnd-next__when{color:rgba(255,255,255,.7);font-size:.9rem}
  .tnd-next__ticket,
  .tnd-menu-insta{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:.75em 1.2em;border-radius:999px;
    font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
    white-space:nowrap;transition:background .2s,color .2s,border-color .2s;
  }
  .tnd-next__ticket{background:#fff;color:var(--navy)}
  .tnd-next__ticket:hover{background:var(--pink);color:#fff}
  .tnd-menu-insta{border:1px solid rgba(255,255,255,.35);color:#fff}
  .tnd-menu-insta:hover{border-color:var(--pink);color:var(--pink)}
  .tnd-menu-insta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
  .tnd-menu-insta .social-dot{fill:currentColor;stroke:none}
}

body.tnd-lock{overflow:hidden}

.team-modal{z-index:1100}

@media (max-width:520px){
  .tnd-toggle{padding:8px 16px}

  .tnd-links a{-webkit-text-stroke-width:1.5px}
}

@supports not (-webkit-text-stroke:1px){
  .tnd-links a{color:#fff}
}

@media (prefers-reduced-motion:reduce){
  .tnd-eq span{animation:none!important;transform:none!important}

  .tnd-links li,
  .tnd-menu-side,
  .tnd-menu,
  .tnd-links a,
  .tnd-toggle{transition:none!important}

  .tnd-links li{transform:none}
}

/* ---------- Corrections visuelles (septembre 2026) ---------- */
/* Menu ouvert : le bouton "Fermer" passait sous le menu plein écran
   (même z-index, menu placé après dans la page) et devenait invisible.
   Le menu passe sous le header, et le header devient transparent pendant
   que le menu est ouvert pour laisser voir le logo blanc du menu. */
.tnd-menu{z-index:999}

body.tnd-lock .top{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;box-shadow:none}

body.tnd-lock .top .brand{visibility:hidden}
/* Menu ouvert : la barre du haut laisse passer les clics vers le logo du menu (lien vers l'accueil),
   seuls ses boutons (langue, Fermer) restent cliquables. */
body.tnd-lock .top{pointer-events:none}
body.tnd-lock .top :is(.tnd-lang,.tnd-toggle){pointer-events:auto}

/* Bandeau défilant incliné : 1 px de défilement horizontal parasite. */
body{overflow-x:clip}

/* =====================================================================
   10. Nouvelle home TND — hero éditorial + grille immersive
   ===================================================================== */
.home-page{
  --home-bg:#08051b;
  --page:#08051b;
  --ink:#fff;
  --muted:rgba(255,255,255,.70);
  --badge:var(--badge-white);
  color-scheme:dark;
  --home-bg-2:#0c0830;
  background:
    radial-gradient(circle at 80% 10%, rgba(149,106,255,.10), transparent 30%),
    var(--home-bg);
  color:#fff;
}

.home-page .top{
  background:linear-gradient(to bottom, rgba(8,5,27,.90), rgba(8,5,27,.26));
  border-bottom-color:rgba(255,255,255,.06);
}

.home-page .top.is-scrolled{
  background:rgba(8,5,27,.78);
  border-bottom-color:rgba(149,106,255,.18);
  box-shadow:0 12px 38px rgba(0,0,0,.28);
}

.home-page footer{
  margin-top:0;
  background:#050312;
  border-top:1px solid rgba(149,106,255,.24);
}

.hero--home{
  min-height:100svh;
  height:clamp(700px, 100svh, 980px);
  max-height:none;
  padding:0;
  isolation:isolate;
  background:#060412;
}

.hero-photo,
.hero-photo-shade,
.hero-vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.hero-photo{
  z-index:0;
  background-image:url('../assets/img/events/soiree1.webp');
  background-position:center 42%;
  background-size:cover;
  transform:scale(1.07);
  filter:saturate(.88) contrast(1.04) brightness(.54);
  animation:home-photo-drift 9s cubic-bezier(.2,.65,.25,1) both;
}

.hero-photo-shade{
  z-index:1;
  background:
    linear-gradient(90deg, rgba(7,4,20,.84) 0%, rgba(7,4,20,.42) 46%, rgba(7,4,20,.65) 100%),
    linear-gradient(180deg, rgba(7,4,20,.72) 0%, rgba(7,4,20,.08) 38%, rgba(7,4,20,.84) 100%);
}

.hero-vignette{
  z-index:1;
  background:radial-gradient(circle at 50% 45%, transparent 0%, rgba(4,2,15,.16) 48%, rgba(4,2,15,.74) 100%);
}

.home-page #stage{
  z-index:2;
  opacity:.96;
}

.hero-content{
  position:relative;
  z-index:5;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:clamp(120px, 14vh, 150px);
  padding-bottom:clamp(90px, 11vh, 120px);
}

.hero-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:clamp(22px,3vh,36px);
  color:rgba(255,255,255,.82);
  font-size:.74rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.18em;
}

.hero-kicker i{
  width:38px;
  height:1px;
  background:linear-gradient(90deg,var(--lav),var(--pink));
  box-shadow:0 0 18px rgba(149,106,255,.50);
}

.home-lockup{
  margin:0;
  max-width:1150px;
  text-transform:uppercase;
  font-family:var(--display);
  font-weight:400;
  line-height:.82;
  letter-spacing:-.035em;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.24));
}

.home-lockup__line{
  display:block;
  font-size:clamp(4.5rem, 13vw, 10.5rem);
}

.home-lockup__line--white{
  color:#fff;
  text-shadow:.035em .035em 0 rgba(66,38,182,.65);
}

.home-lockup__line--gradient{
  background:linear-gradient(105deg,#fff 4%,#c1b1ff 28%,#956aff 58%,#b6269a 95%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size:180% 100%;
  animation:home-gradient-shift 8s ease-in-out infinite alternate;
}

.hero-bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:36px;
  margin-top:clamp(34px,8vh,74px);
  max-width:1060px;
}

.hero-copy{
  max-width:520px;
  color:rgba(255,255,255,.72);
  font-size:1.02rem;
}

.hero-copy p{margin:0 0 .9em}

.hero-copy p:last-child{margin-bottom:0}

.hero-copy .hero-lead{
  color:#fff;
  font-weight:700;
  font-size:clamp(1.12rem,2vw,1.38rem);
  line-height:1.35;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  flex:none;
}

.btn-hero-line{
  color:#fff;
  border-color:rgba(255,255,255,.52);
  background:rgba(8,5,27,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.btn-hero-line:hover{
  color:#fff;
  background:rgba(255,255,255,.10);
  border-color:#fff;
}

.hero-scroll{
  position:absolute;
  left:50%;
  bottom:24px;
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  transform:translateX(-50%);
  color:rgba(255,255,255,.68);
  font-size:.68rem;
  font-style:italic;
  letter-spacing:.14em;
  text-transform:lowercase;
}

.hero-scroll i{
  width:1px;
  height:36px;
  background:linear-gradient(to bottom,rgba(255,255,255,.72),transparent);
}

.hero-glow{
  position:absolute;
  z-index:2;
  width:clamp(180px,28vw,360px);
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(65px);
  pointer-events:none;
  opacity:.22;
  mix-blend-mode:screen;
}

.hero-glow--one{right:4%; top:14%; background:var(--lav)}

.hero-glow--two{left:4%; bottom:8%; background:var(--pink)}

.eyebrow{
  margin:0 0 14px;
  color:var(--lav);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.home-contact h2{
  font-family:var(--display);
  font-size:clamp(2.65rem,6.5vw,6.2rem);
  line-height:.88;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:0;
  color:#fff;
}

.home-contact h2 span{
  background:var(--gradient-tnd);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.home-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:rgba(255,255,255,.10);
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}

.home-card{
  position:relative;
  display:block;
  min-height:440px;
  overflow:hidden;
  background:#0a071f;
  text-decoration:none;
  isolation:isolate;
}

.home-card__media,
.home-card__shade{
  position:absolute;
  inset:0;
}

.home-card__media{
  z-index:0;
  background-position:center;
  background-size:cover;
  transform:scale(1.045);
  filter:saturate(.84) contrast(1.04) brightness(.64);
  transition:transform .8s cubic-bezier(.22,1,.36,1), filter .8s ease;
}

.home-card__shade{
  z-index:1;
  background:linear-gradient(180deg,rgba(4,2,14,.08) 16%, rgba(4,2,14,.20) 38%, rgba(4,2,14,.92) 100%);
  transition:background .5s ease;
}

.home-card__body{
  position:relative;
  z-index:2;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(28px,4vw,56px);
}

.home-card__meta{
  margin:0 0 18px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.18em;
  color:rgba(255,255,255,.72);
  text-transform:uppercase;
}

.home-card h2{
  margin:0;
  max-width:11ch;
  font-family:var(--display);
  font-weight:700; /* même rendu qu'avec l'ancien <h3> */
  font-size:clamp(2.8rem,5.1vw,5.6rem);
  line-height:.86;
  letter-spacing:-.03em;
  text-transform:uppercase;
  color:#fff;
}

.home-card h2 span{
  background:var(--gradient-tnd);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.home-card__link{
  margin-top:26px;
  color:rgba(255,255,255,.82);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  transition:color .25s ease,transform .25s ease;
}

.home-card:hover .home-card__media,
.home-card:focus-visible .home-card__media{
  transform:scale(1);
  filter:saturate(1) contrast(1.05) brightness(.76);
}

.home-card:hover .home-card__shade,
.home-card:focus-visible .home-card__shade{
  background:linear-gradient(180deg,rgba(4,2,14,.05) 12%,rgba(4,2,14,.08) 30%,rgba(4,2,14,.88) 100%);
}

.home-card:hover .home-card__link,
.home-card:focus-visible .home-card__link{
  color:#fff;
  transform:translateX(4px);
}

.home-contact{
  padding-block:clamp(74px,10vw,136px);
  background:
    radial-gradient(circle at 88% 42%, rgba(182,38,154,.15), transparent 25%),
    linear-gradient(180deg, #120b38 0%, #0d0828 55%, #070419 100%);
}

.home-contact__inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:36px;
}

.home-contact h2{max-width:10ch}

@keyframes home-photo-drift{
  from{transform:scale(1.07)}
  to{transform:scale(1.01)}
}

@keyframes home-gradient-shift{
  from{background-position:0% 50%}
  to{background-position:100% 50%}
}

@media (max-width:900px){
  .hero-bottom,
  .home-contact__inner{
      align-items:flex-start;
      flex-direction:column;
    }

  .hero-bottom{margin-top:48px}

  .hero-content{justify-content:center}

  .home-card{min-height:400px}
}

@media (max-width:640px){
  .hero--home{
      height:100svh;
      min-height:660px;
    }

  .hero-photo{
      background-position:58% center;
      filter:saturate(.82) contrast(1.02) brightness(.44);
    }

  .hero-kicker{
      font-size:.62rem;
      letter-spacing:.12em;
      flex-wrap:wrap;
    }

  .home-lockup__line{font-size:clamp(4rem,17vw,6rem)}

  .hero-copy{font-size:.93rem;max-width:32rem}

  .hero-actions{width:100%}

  .hero-actions .btn{flex:1 1 auto;text-align:center}

  .home-grid{grid-template-columns:1fr}

  .home-card{grid-column:auto;min-height:410px}

  .home-card__body{padding:28px}

  .home-card h2{font-size:clamp(2.6rem,12vw,4rem)}

  .hero-scroll{bottom:17px}
}

@media (prefers-reduced-motion:reduce){
  .hero-photo,
  .home-lockup__line--gradient{
      animation:none;
    }

  .hero-photo{transform:scale(1.01)}
}

/* =====================================================================
   11. Thème violet foncé × structure « Beam »
   Reprend la structure du template Beam (grille de cartes-liens à fines
   lignes, coins de viseur, titres à dernière ligne remplie) avec la charte
   TND. Regroupé ici pour être facile à relire, à ajuster ou à annuler.
   ===================================================================== */
/* 11.1 Fond, header et footer identiques sur toutes les pages */
body{
  background:
    radial-gradient(circle at 88% 2%, rgba(149,106,255,.14), transparent 34%),
    radial-gradient(circle at 2% 58%, rgba(182,38,154,.09), transparent 30%),
    var(--page);
}

.home-page{
  --page:#0b0722;
  --home-bg:#0b0722;
  --home-bg-2:#0f0930;
  background:
    radial-gradient(circle at 88% 2%, rgba(149,106,255,.14), transparent 34%),
    radial-gradient(circle at 2% 58%, rgba(182,38,154,.09), transparent 30%),
    var(--page);
}

.top,
.home-page .top{
  background:linear-gradient(to bottom, rgba(11,7,34,.94), rgba(11,7,34,.38));
  border-bottom:1px solid rgba(255,255,255,.06);
}

.top.is-scrolled,
.home-page .top.is-scrolled{
  background:rgba(11,7,34,.84);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom-color:rgba(149,106,255,.22);
  box-shadow:0 12px 38px rgba(0,0,0,.28);
}

footer,
.home-page footer{
  position:relative;
  overflow:hidden;
  background:#070419;
  border-top:1px solid rgba(149,106,255,.26);
}

.home-grid{overflow:hidden}

main{position:relative;overflow-x:clip}

/* 11.2 Images décoratives chromées (à gauche / à droite des sections) */
.decor{
  position:absolute;
  z-index:1;
  max-width:none;
  height:auto;
  pointer-events:none;
  user-select:none;
  transform:rotate(var(--rot,0deg));
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.5));
}

.decor--float{animation:decor-float 7s ease-in-out infinite}

@keyframes decor-float{
  0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}
  50%{transform:translateY(-12px) rotate(var(--rot,0deg))}
}

@media (prefers-reduced-motion:reduce){
  .decor--float{animation:none}
}

/* Accueil : décor du hero et des sections */
.hero--home .decor-thorn{
  width:clamp(220px,28vw,440px);
  right:-3vw;
  top:19%;
  --rot:-8deg;
  z-index:3;
  opacity:.94;
}

.hero--home .decor-star-pair{
  width:clamp(54px,6vw,92px);
  left:4.5%;
  bottom:15%;
  z-index:3;
  opacity:.9;
}

.home-grid .decor-l{width:clamp(72px,9vw,140px);left:-2.2vw;top:44%;--rot:-14deg;z-index:4;opacity:.95}

.home-grid .decor-r{width:clamp(90px,11vw,170px);right:-2.6vw;top:12%;--rot:10deg;z-index:4;opacity:.95}

.home-contact{position:relative;overflow:hidden}

/* Accueil — bandeau « Prochaine soirée » sous le hero (rempli par js/pages/accueil.js) */
.home-next{
  border-top:1px solid var(--line);
  background:linear-gradient(100deg,rgba(66,38,182,.38) 0%,rgba(182,38,154,.16) 100%),var(--page);
}
.home-next__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:24px 40px;
  padding-block:clamp(32px,4vw,52px);
}
.home-next h2{
  margin:.25em 0 .3em;
  font-size:clamp(2rem,4.6vw,3.6rem);line-height:.95;
}
.home-next h2 a{color:#fff;text-decoration:none}
.home-next h2 a:hover{color:var(--lav)}
.home-next__price{margin:.35em 0 0;color:var(--muted)}
.home-next__actions{display:flex;flex-wrap:wrap;gap:12px}
/* Compte à rebours : chiffres en contour, comme les numéros du line-up */
.countdown{display:grid;gap:8px}
@media (min-width:900px){
  .home-next__inner:has(.countdown:not([hidden])){display:grid;grid-template-columns:1fr auto;align-items:center}
  .home-next__inner .countdown{grid-column:2;grid-row:1 / span 2;justify-items:end}
}
.countdown[hidden]{display:none}
.countdown__label{margin:0;color:var(--lav);font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.countdown__units{display:flex;gap:clamp(10px,1.6vw,20px)}
.countdown__units span{display:grid;justify-items:center;gap:4px;min-width:2.2ch}
.countdown__units b{
  font-family:var(--display);font-weight:400;font-variant-numeric:tabular-nums;
  font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px #fff;
}
.countdown__units span:first-child b{color:#fff;text-shadow:.05em .05em 0 var(--violet)}
.countdown__units small{color:var(--muted);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.countdown__live{display:none}
.countdown.is-live .countdown__label,
.countdown.is-live .countdown__units{display:none}
.countdown.is-live .countdown__live{
  display:inline-flex;align-items:center;gap:12px;margin:0;
  font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem);text-transform:uppercase;color:var(--pink);
}
.countdown__live span{width:14px;height:14px;border-radius:50%;background:var(--pink);box-shadow:0 0 18px var(--pink);animation:live-pulse 1.4s ease-in-out infinite}
@keyframes live-pulse{50%{opacity:.25;transform:scale(.7)}}
@supports not (-webkit-text-stroke:1px){.countdown__units b{color:#fff}}
@media (prefers-reduced-motion:reduce){.countdown__live span{animation:none}}
@media (max-width:640px){
  .home-next__actions{width:100%}
  .home-next__actions .btn{flex:1 1 100%;text-align:center}
}

.home-contact .decor-hollow{width:clamp(70px,9vw,140px);right:16%;top:14%;--rot:14deg;opacity:.9}

footer .decor-chain{width:clamp(90px,10vw,150px);right:var(--pad);bottom:-6px;--rot:6deg;opacity:.5}

/* 11.3 Accueil : grille de cartes-liens aux couleurs de la charte */
.home-grid{
  position:relative;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(340px,30vw);
  background:var(--line);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.home-card{
  grid-column:auto;
  min-height:0;
  height:100%;
  background:linear-gradient(155deg,#1a1050 0%,#0e0830 62%,#0b0722 100%);
}

.home-card__media{
  opacity:.5;
  transform:scale(1.05);
  filter:saturate(.85) contrast(1.05) brightness(.72);
  transition:opacity .45s ease,transform .9s cubic-bezier(.22,1,.36,1),filter .6s ease;
}

.home-card__shade{
  opacity:1;
  background:linear-gradient(180deg,rgba(66,38,182,.34) 0%,rgba(11,7,34,.12) 42%,rgba(11,7,34,.92) 100%);
}

.home-card__body{
  justify-content:flex-start;
  padding:clamp(28px,3.2vw,52px);
}

.home-card h2{
  max-width:12ch;
  font-size:clamp(2.3rem,4.2vw,4.9rem);
  line-height:.9;
  letter-spacing:-.03em;
  color:#fff;
  filter:drop-shadow(.035em .035em 0 rgba(66,38,182,.7));
}

.home-card h2 span{
  display:block;
  background-image:var(--gradient-card);
  background-size:100% 100%;
  background-position:0% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:none;
}

.home-card__meta{
  order:2;
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:auto;
  margin-bottom:0;
  color:#c1b1ff;
  font-size:.72rem;
  letter-spacing:.2em;
}

.home-card__meta::before{
  content:"";
  width:28px;
  height:1px;
  background:linear-gradient(90deg,var(--lav),var(--pink));
}

.home-card__link{
  position:absolute;
  right:clamp(22px,3vw,44px);
  bottom:clamp(22px,3vw,44px);
  margin:0;
  padding:.7em 1.15em;
  opacity:1;
  transform:none;
  color:#fff;
  font-size:.72rem;
  letter-spacing:.14em;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  background:rgba(11,7,34,.55);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}

.home-card:hover .home-card__media,
.home-card:focus-visible .home-card__media{
  opacity:.95;
  transform:scale(1);
  filter:saturate(1) contrast(1.05) brightness(.82);
}

.home-card:hover h2,
.home-card:focus-visible h2{color:#fff;text-shadow:none}

.home-card:hover h2 span,
.home-card:focus-visible h2 span{
  background-image:var(--gradient-card);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.home-card:hover .home-card__meta,
.home-card:focus-visible .home-card__meta{color:#fff}

.home-card:hover .home-card__link,
.home-card:focus-visible .home-card__link{
  opacity:1;
  transform:translateX(4px);
  background:linear-gradient(120deg,var(--violet),var(--pink));
  border-color:transparent;
}

/* Coins de viseur (comme le template) : discrets au repos, roses au survol */
.home-card{--bracket:var(--lav)}

.home-card::after{
  content:"";
  position:absolute;
  inset:12px;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(var(--bracket),var(--bracket)) 0 0/16px 1px,
    linear-gradient(var(--bracket),var(--bracket)) 0 0/1px 16px,
    linear-gradient(var(--bracket),var(--bracket)) 100% 0/16px 1px,
    linear-gradient(var(--bracket),var(--bracket)) 100% 0/1px 16px,
    linear-gradient(var(--bracket),var(--bracket)) 0 100%/16px 1px,
    linear-gradient(var(--bracket),var(--bracket)) 0 100%/1px 16px,
    linear-gradient(var(--bracket),var(--bracket)) 100% 100%/16px 1px,
    linear-gradient(var(--bracket),var(--bracket)) 100% 100%/1px 16px;
  background-repeat:no-repeat;
  opacity:.5;
  transition:opacity .3s ease;
}

.home-card:hover,
.home-card:focus-visible{--bracket:#e05cc8}

.home-card:hover::after,
.home-card:focus-visible::after{opacity:1}

@media (max-width:900px){
  .home-grid{grid-auto-rows:minmax(350px,48vw)}
}

@media (max-width:640px){
  .home-grid{grid-template-columns:1fr;grid-auto-rows:minmax(360px,78vw)}

  .home-card{min-height:0;height:100%}

  .home-card h2{font-size:clamp(2.4rem,11vw,3.6rem)}

  .home-card__link{position:static;order:3;margin-top:14px;align-self:flex-start}

  .home-card:hover .home-card__link,
  .home-card:focus-visible .home-card__link{transform:none}

  .hero--home .decor-thorn{width:190px;right:-52px;top:10%;opacity:.7}

  .hero--home .decor-star-pair{left:6%;bottom:19%;opacity:.75}

  .home-grid .decor-l,
  .home-grid .decor-r{opacity:.85}

  .home-contact .decor-hollow{right:6%;top:5%;opacity:.55}

  footer .decor-chain{display:none}
}

@media (hover:none){
  .home-card__media{opacity:.62}
}

.hero--home::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:clamp(120px, 18vh, 240px);
  z-index:3;
  pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--page) 92%);
}

/* Cartes sombres par défaut : la photo reste en léger fond, et s'allume au survol */
.home-card__media{
  opacity:.55;
  transform:scale(1.05);
  filter:saturate(.9) contrast(1.05) brightness(.85);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
}

.home-card__shade{
  opacity:1;
  background-image:linear-gradient(to bottom, rgba(11,7,34,.72) 0%, rgba(18,11,56,.78) 100%);
  background-size:100% 220%;
  background-repeat:no-repeat;
  transition:opacity .5s ease, background-position .5s ease;
}

.home-grid > a.home-card:nth-of-type(-n+2) .home-card__shade{background-position:0 0%}

.home-grid > a.home-card:nth-of-type(n+3) .home-card__shade{background-position:0 100%}

.home-card h2,
.home-card h2 span{
  background-image:var(--card-image);
  background-size:cover;
  background-position:center;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:none;
  text-shadow:none;
  transition:background-image .4s ease, color .4s ease;
}

.home-card:hover .home-card__media,
.home-card:focus-visible .home-card__media{
  opacity:1;
  transform:scale(1);
}

.home-card:hover .home-card__shade,
.home-card:focus-visible .home-card__shade{
  opacity:1;
  background:linear-gradient(180deg, rgba(11,7,34,.12) 0%, rgba(11,7,34,.06) 45%, rgba(11,7,34,.82) 100%);
}

.home-card:hover h2,
.home-card:focus-visible h2{
  background-image:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:#fff;

  filter:drop-shadow(.035em .035em 0 rgba(66,38,182,.7));
}

.home-card:hover h2 span,
.home-card:focus-visible h2 span{
  background-image:var(--gradient-card);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:none;
}

.home-grid{border-top:none}

/* ---------- 14. Titres des cartes : seule la 1ère ligne visible au repos ---------- */
.home-card h2{
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:#fff;
  filter:drop-shadow(.035em .035em 0 rgba(66,38,182,.7));
}

.home-card h2 span{
  display:block;
  opacity:0;
  transform:translateY(6px);
  background-image:var(--gradient-card);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:none;
  transition:opacity .4s ease, transform .4s ease;
}

.home-card:hover h2 span,
.home-card:focus-visible h2 span{
  opacity:1;
  transform:translateY(0);
}

/* Lien d'évitement : visible uniquement au clavier */
.skip-link{
  position:fixed;
  left:12px;
  top:-80px;
  z-index:2000;
  padding:10px 16px;
  border-radius:8px;
  background:#fff;
  color:#120b38;
  font-weight:700;
  text-decoration:none;
  transition:top .15s;
}

.skip-link:focus{top:calc(12px + env(safe-area-inset-top,0px))}

/* Texte lu par les lecteurs d'écran, invisible à l'écran */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* L'attribut hidden l'emporte toujours (champs du formulaire, listes filtrées…) */
[hidden]{display:none!important}

/* ---------- Stabilité au chargement (Lighthouse : CLS) ----------
   Une grande partie du contenu est ajoutée par JavaScript (fiches soirées, galerie, FAQ, artistes) :
   sans hauteur minimale, le pied de page s'affiche d'abord en haut puis « saute » vers le bas. */
main{min-height:100svh}