/* ==========================================================================
   BLOOD KIDZ

   Deux règles de tenue :
   1. Le violet est une ENCRE, pas de l'air ambiant. Le fond reste noir ;
      le violet ne sert qu'au logo, aux accents et aux commandes.
   2. Aucune lueur diffuse sans source. La seule lumière de la page vient
      d'un projecteur de scène, et elle est dirigée.
   ========================================================================== */

:root{
  /* Fonds — noirs neutres, sans dominante violette */
  --void:   #08070A;
  --panel:  #0E0C12;
  --panel-2:#141118;

  /* L'encre violette du logo */
  --violet: #8B2FE8;
  --neon:   #B24DFF;
  --pale:   #D9B8FF;

  /* Texte — gris neutres */
  --ink:    #F2EDF7;
  --ash:    #8B8494;
  --dim:    #565061;

  --line:   rgba(240,235,250,.11);
  --line-2: rgba(240,235,250,.22);

  --head: "Archivo", "Arial Narrow", sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gut:  clamp(20px, 5vw, 68px);
  --maxw: 1280px;

  --bar-h: 0px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; }

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:var(--bar-h);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

:focus-visible{ outline:2px solid var(--neon); outline-offset:3px; }

.skip{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--neon); color:#0A0612;
  padding:10px 16px; font-weight:700;
}
.skip:focus{ top:16px; }

.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* --- Typographie ----------------------------------------------------------
   Les titres sont CONDENSÉS : c'est ce qui donne la densité d'une affiche
   plutôt que la respiration d'une page de logiciel.                       */

.h2{
  font-family:var(--head);
  font-weight:900;
  font-stretch:74%;
  font-size:clamp(34px, 5.6vw, 72px);
  line-height:.86;
  letter-spacing:-.025em;
  text-transform:uppercase;
  margin:8px 0 0;
}

.label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--neon);
  margin:0;
}

.head{ margin-bottom:clamp(30px, 4vw, 54px); }
.head--sub{
  margin-top:clamp(56px, 8vw, 100px);
  margin-bottom:20px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}

/* ==========================================================================
   Fond global : noir neutre + grain. Rien d'autre.
   ========================================================================== */

.atmos{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  background:var(--void);
}

/* Le grain fixe : la texture qui manque à toute page générée. */
.atmos__grain{
  position:absolute; inset:0;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Le décor du hero : un projecteur de scène, pas une nébuleuse
   ========================================================================== */

.scene{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  /* la lueur basse de la ville : c'est elle qui détache les silhouettes */
  background:linear-gradient(to top, rgba(139,47,232,.15) 0%, rgba(90,30,150,.06) 18%, transparent 38%);
}

/* Le faisceau descend d'un point précis, hors cadre en haut à gauche.
   Il a des bords nets, donc une source — c'est ce qui le distingue d'un halo. */
.scene__horizon{
  position:absolute; top:-24%; left:-8%;
  width:80%; height:150%;
  background:linear-gradient(178deg,
    rgba(217,184,255,.11) 0%,
    rgba(139,47,232,.075) 36%,
    transparent 68%);
  clip-path:polygon(30% 0%, 47% 0%, 100% 100%, 2% 100%);
  filter:blur(28px);
}

.scene__beam{
  position:absolute; top:-20%; left:-3%;
  width:46%; height:132%;
  background:linear-gradient(180deg, rgba(233,213,255,.12), transparent 60%);
  clip-path:polygon(42% 0%, 53% 0%, 97% 100%, 10% 100%);
  filter:blur(10px);
  transform-origin:50% 0;
  animation:balance 19s ease-in-out infinite alternate;
}
@keyframes balance{ from{ transform:rotate(-1.6deg);} to{ transform:rotate(1.6deg);} }

.scene__city{
  position:absolute; left:-4%; width:112%;
  display:block;
}
.scene__city path{ fill:currentColor; }

.scene__city--far{
  height:30%; bottom:12%;
  color:#191325; opacity:.95;
  transform:translateX(calc(var(--px,0) * -14px));
}
.scene__city--near{
  height:27%; bottom:0;
  color:#0B0910;
  transform:translateX(calc(var(--px,0) * -30px));
}

.scene__fog{
  position:absolute; left:0; right:0; bottom:0; height:40%;
  background:linear-gradient(to top, var(--void) 2%, rgba(8,7,10,.5) 38%, transparent 74%);
}

/* ==========================================================================
   Écran d'ouverture
   ========================================================================== */

.splash{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  background:var(--void);
  transition:opacity .6s ease, visibility .6s;
}
.splash--out{ opacity:0; visibility:hidden; }
.splash__logo{
  width:min(56vw, 420px);
  animation:ignite 1.4s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes ignite{
  0%   { filter:brightness(.12) saturate(.25); }
  36%  { filter:brightness(1.7) saturate(1.3); }
  50%  { filter:brightness(.4)  saturate(.7); }
  64%  { filter:brightness(1.4) saturate(1.2); }
  100% { filter:brightness(1)   saturate(1); }
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:24px;
  padding:14px var(--gut);
  border-bottom:1px solid transparent;
  transition:background .25s, border-color .25s;
}
.nav--stuck{
  background:rgba(8,7,10,.86);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}

.nav__mark img{ height:38px; width:auto; }

.nav__links{
  display:flex; gap:clamp(14px, 2.2vw, 34px);
  margin-inline:auto;
  font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
}
.nav__links a{
  color:var(--ash);
  padding:5px 0;
  border-bottom:2px solid transparent;
  transition:color .18s, border-color .18s;
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a.is-active{ color:var(--ink); border-bottom-color:var(--neon); }

.nav__social{ display:flex; gap:14px; align-items:center; }

.ico{
  width:18px; height:18px;
  color:var(--dim);
  transition:color .18s;
}
.nav__social a:hover .ico,
.foot__social a:hover .ico{ color:var(--neon); }

.burger{
  display:none;
  width:38px; height:34px;
  background:none; border:1px solid var(--line-2);
  cursor:pointer; padding:0;
}
.burger span{
  display:block; width:15px; height:1.5px; margin:4px auto;
  background:var(--ink); transition:transform .22s;
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(2.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-2.75px) rotate(-45deg); }

.drawer{
  position:fixed; inset:63px 0 auto; z-index:99;
  background:rgba(10,9,13,.97);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  padding:20px var(--gut) 28px;
}
.drawer nav{ display:grid; }
.drawer nav a{
  font-family:var(--head);
  font-weight:900; font-stretch:78%;
  font-size:30px; text-transform:uppercase; letter-spacing:-.02em;
  padding:8px 0;
  border-bottom:1px solid var(--line);
}
.drawer__social{ display:flex; gap:20px; margin-top:22px; }

/* ==========================================================================
   Hero — calé à gauche, le logo déborde
   ========================================================================== */

.hero{
  position:relative; z-index:1;
  isolation:isolate;
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center;
  padding:clamp(118px, 15vh, 168px) var(--gut) clamp(70px, 9vh, 100px);
  width:100%;
}
/* Le contenu du hero passe au-dessus du décor. */
.hero > :not(.scene){ position:relative; z-index:1; }
.hero__eyebrow,
.chrome,
.hero__accroche,
.hero__intro,
.hero__cta{
  width:100%;
  max-width:calc(var(--maxw) - var(--gut));
  margin-inline:auto;
}

.hero__eyebrow{
  font-size:11px; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--ash);
  margin:0 0 clamp(18px, 3vh, 32px);
  padding-left:2px;
}

/* Le logo chrome. Il déborde volontairement à droite : un objet cadré,
   pas une vignette posée au centre. */
.chrome{
  position:relative;
  width:min(100%, 900px);
  margin-inline:0 auto;
  --mx:38%; --my:44%;
}
.chrome__h1{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); margin:0;
}
.chrome__base{
  width:100%;
  filter:brightness(.72) saturate(.92);
}
.chrome__spec{
  position:absolute; inset:0;
  width:100%;
  filter:brightness(2.5) saturate(1.45) contrast(1.12);
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(32% 52% at var(--mx) var(--my),
    #000 0%, rgba(0,0,0,.6) 40%, transparent 78%);
  mask-image:radial-gradient(32% 52% at var(--mx) var(--my),
    #000 0%, rgba(0,0,0,.6) 40%, transparent 78%);
  pointer-events:none;
}

.hero__accroche{
  margin-inline:auto;
  font-family:var(--head);
  font-weight:900; font-stretch:76%;
  font-size:clamp(24px, 3.4vw, 44px);
  line-height:.94;
  letter-spacing:-.02em; text-transform:uppercase;
  margin:clamp(22px, 3.5vh, 40px) 0 0;
  max-width:18ch;
}
.hero__intro{
  color:var(--ash);
  max-width:40ch;
  margin:12px 0 0;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(24px, 3.5vh, 36px); }

.hero__scroll{
  position:absolute; bottom:26px; left:var(--gut);
  width:1px; height:48px;
  background:var(--line);
  overflow:hidden;
}
.hero__scroll span{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent, var(--neon));
  animation:drop 2.6s ease-in-out infinite;
}
@keyframes drop{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(100%);} }

/* ==========================================================================
   Commandes — des aplats, pas des pilules à dégradé
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 26px;
  border:1px solid transparent;
  font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  cursor:pointer;
  transition:transform .12s, box-shadow .12s, background .18s, color .18s, border-color .18s;
}
.btn:active{ transform:translate(0,0); box-shadow:none; }

.btn--primary{
  background:var(--violet);
  color:#FFF;
}
.btn--primary:hover{
  background:var(--neon);
  transform:translate(-3px,-3px);
  box-shadow:5px 5px 0 rgba(139,47,232,.35);
}

.btn--ghost{
  border-color:var(--line-2);
  color:var(--ink);
}
.btn--ghost:hover{
  border-color:var(--neon);
  color:var(--neon);
  transform:translate(-3px,-3px);
  box-shadow:5px 5px 0 rgba(139,47,232,.22);
}

.btn__ico{ font-size:9px; }

/* ==========================================================================
   Bandeau défilant
   ========================================================================== */

.marquee{
  position:relative; z-index:1;
  overflow:hidden;
  border-block:1px solid var(--line);
  padding:12px 0;
  display:flex;
}
.marquee__track{
  display:flex; gap:34px;
  white-space:nowrap;
  animation:slide 40s linear infinite;
  padding-right:34px;
}
.marquee__track b{
  font-family:var(--head);
  font-weight:900; font-stretch:80%;
  font-size:clamp(13px, 1.5vw, 17px);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
}
.marquee__track b:nth-child(even){ color:var(--violet); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ==========================================================================
   Sections
   ========================================================================== */

.section{
  position:relative; z-index:1;
  padding-block:clamp(58px, 7.5vw, 102px);
}
/* Une seule section change de fond, et elle le fait franchement. */
.section--alt{
  background:var(--panel);
  border-block:1px solid var(--line);
}

/* ==========================================================================
   Dernier single — un bandeau, pas une carte
   ========================================================================== */

.feature{
  display:grid;
  grid-template-columns:minmax(0, 260px) minmax(0, 1fr);
  gap:clamp(22px, 4vw, 56px);
  align-items:center;
  padding:clamp(20px, 3vw, 34px) 0;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--line);
}

.feature__cover{
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--panel-2);
}
.feature__cover > img{ width:100%; height:100%; object-fit:cover; }

.cover-fallback{
  position:absolute; inset:0;
  display:grid; grid-template-columns:minmax(0,1fr); place-items:center;
  padding:15%;
  background:var(--panel-2);
}
.cover-fallback img{ width:100%; height:100%; object-fit:contain; opacity:.9; }
.feature__cover > img:not([hidden]) ~ .cover-fallback{ display:none; }

.explicit{
  position:absolute; right:10px; bottom:10px;
  width:20px; height:20px;
  display:grid; place-items:center;
  background:var(--ash); color:#0A0612;
  font-size:11px; font-weight:700;
}

.feature__title{
  font-family:var(--head);
  font-weight:900; font-stretch:74%;
  font-size:clamp(36px, 6.5vw, 86px);
  line-height:.85; letter-spacing:-.03em; text-transform:uppercase;
  margin:6px 0 22px;
}

.feature__player{ display:flex; align-items:center; gap:16px; margin-bottom:24px; }

.playpad{
  flex:none;
  width:50px; height:50px;
  display:grid; place-items:center;
  border:1px solid var(--line-2);
  background:none;
  cursor:pointer;
  transition:background .18s, border-color .18s, color .18s;
}
.playpad:hover{ background:var(--violet); border-color:var(--violet); color:#FFF; }
.playpad__ico{ font-size:13px; line-height:1; margin-left:2px; }
.playpad.is-playing .playpad__ico{ margin-left:0; }

.wave{ flex:1; min-width:0; width:100%; height:50px; display:block; }
.wave--bar{ height:30px; }

.feature__links{ display:flex; flex-wrap:wrap; gap:8px; }

.plat{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px;
  border:1px solid var(--line);
  font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ash);
  transition:color .18s, border-color .18s, background .18s;
}
.plat:hover{ color:#FFF; border-color:var(--violet); background:var(--violet); }
.plat:hover .ico{ color:#FFF; }
.plat .ico{ width:14px; height:14px; color:currentColor; }

/* ==========================================================================
   Discographie — une liste numérotée. Pas de pochettes fantômes.
   ========================================================================== */

.tracks{ border-top:1px solid var(--line); }

.tr{
  display:grid;
  grid-template-columns:3.5ch minmax(0,1fr) auto auto;
  align-items:baseline;
  gap:14px clamp(14px, 2vw, 26px);
  width:100%;
  padding:clamp(13px, 1.8vw, 20px) 6px;
  text-align:left;
  background:none; border:0;
  border-bottom:1px solid var(--line);
  transition:background .18s, padding-left .18s;
}
button.tr{ cursor:pointer; }
button.tr:hover{ background:rgba(178,77,255,.06); padding-left:16px; }
button.tr:hover .tr__t{ color:var(--neon); }

.tr__n{
  font-size:12px; font-weight:700;
  color:var(--dim);
  font-variant-numeric:tabular-nums;
}
.tr__t{
  font-family:var(--head);
  font-weight:900; font-stretch:80%;
  font-size:clamp(19px, 2.6vw, 30px);
  line-height:1.02;
  text-transform:uppercase; letter-spacing:-.02em;
  transition:color .18s;
}
.tr__type{
  font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim);
}
.tr__y{
  font-size:12px; font-weight:600;
  color:var(--ash);
  font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   Le groupe
   ========================================================================== */

.about{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:clamp(28px, 5vw, 80px);
  align-items:start;
}
.about__text p{
  font-size:clamp(16px, 1.6vw, 18px);
  color:#B5AEC1;
  margin:0 0 16px;
  max-width:58ch;
}
.about__text p:first-child{
  color:var(--ink);
  font-size:clamp(19px, 2.3vw, 26px);
  line-height:1.36;
  font-family:var(--head);
  font-weight:600; font-stretch:92%;
}

.about__facts{ margin:0; border-top:1px solid var(--line); }
.about__facts div{
  display:flex; justify-content:space-between; gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.about__facts dt{
  font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim);
}
.about__facts dd{ margin:0; font-size:13px; font-weight:600; text-align:right; }

.members{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:clamp(10px, 1.4vw, 16px);
  margin-top:clamp(36px, 6vw, 64px);
}
.member{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--panel-2);
}
.member > img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.3) brightness(.78);
  transition:filter .4s, transform .5s;
}
.member:hover > img{ filter:grayscale(0) contrast(1.05) brightness(.98); transform:scale(1.03); }
.member__silhouette{
  position:absolute; inset:0;
  display:grid; grid-template-columns:minmax(0,1fr); place-items:center;
  padding:24%; opacity:.16;
}
.member__silhouette img{ width:100%; height:100%; object-fit:contain; }
.member__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 14px 13px;
  background:linear-gradient(to top, rgba(8,7,10,.95), transparent);
}
.member__nom{
  font-family:var(--head);
  font-weight:900; font-stretch:80%;
  font-size:19px; text-transform:uppercase; letter-spacing:-.015em;
  margin:0;
}
.member__role{
  font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--neon);
  margin:2px 0 0;
}

/* ==========================================================================
   Dates
   ========================================================================== */

.dates{ border-top:2px solid var(--ink); }

.date{
  display:grid;
  grid-template-columns:96px minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(14px, 3vw, 44px);
  padding:clamp(16px, 2.4vw, 26px) 6px;
  border-bottom:1px solid var(--line);
  transition:background .18s, padding-left .18s;
}
.date:hover{ background:rgba(178,77,255,.06); padding-left:16px; }

.date__d{
  font-family:var(--head);
  font-weight:900; font-stretch:82%;
  line-height:.9; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.date__jour{ display:block; font-size:clamp(30px, 3.6vw, 44px); letter-spacing:-.04em; }
.date__mois{
  display:block; font-size:10px; letter-spacing:.24em;
  color:var(--neon); margin-top:5px;
}

.date__ville{
  font-family:var(--head);
  font-weight:900; font-stretch:76%;
  font-size:clamp(22px, 3.4vw, 42px);
  text-transform:uppercase; letter-spacing:-.025em;
  line-height:1;
  margin:0;
}
.date__salle{
  font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ash);
  margin:5px 0 0;
}

.tag{
  flex:none;
  padding:10px 18px;
  font-size:10px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  white-space:nowrap;
}
.tag--billets{
  background:var(--violet); color:#FFF;
  transition:background .18s, transform .12s;
}
.tag--billets:hover{ background:var(--neon); transform:translate(-2px,-2px); }
.tag--complet{ border:1px solid var(--line-2); color:var(--dim); }
.tag--annonce{ border:1px solid var(--line-2); color:var(--ash); }

.empty{
  padding:44px 6px;
  border-bottom:1px solid var(--line);
  color:var(--ash);
}
.empty strong{
  display:block;
  font-family:var(--head);
  font-weight:900; font-stretch:76%;
  font-size:clamp(24px, 4vw, 40px);
  text-transform:uppercase; letter-spacing:-.025em;
  color:var(--ink);
  margin-bottom:8px;
}

/* ==========================================================================
   Boutique
   ========================================================================== */

.shop{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:clamp(10px, 1.4vw, 18px);
}
.item{
  background:var(--panel-2);
  transition:background .2s;
}
.item:hover{ background:#1A1522; }
.item__img{
  aspect-ratio:1;
  display:grid; grid-template-columns:minmax(0,1fr); place-items:center;
  padding:17%;
  overflow:hidden;
}
.item__img > img{ width:100%; height:100%; object-fit:contain; opacity:.9; }
.item__img > img.is-photo{ object-fit:cover; opacity:1; }
.item__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:12px 14px 14px;
  border-top:1px solid var(--line);
}
.item__nom{
  font-family:var(--head);
  font-weight:900; font-stretch:80%;
  font-size:15px; text-transform:uppercase; letter-spacing:-.01em;
  margin:0;
}
.item__prix{ font-size:13px; font-weight:700; color:var(--neon); }

.shop__cta{ margin-top:clamp(24px, 4vw, 40px); }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(28px, 5vw, 80px);
  align-items:start;
}

.field{ margin-bottom:18px; }
.field label{
  display:block;
  font-size:10px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim);
  margin-bottom:7px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:12px 14px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:0;
  resize:vertical;
  transition:border-color .18s, background .18s;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--neon);
  background:var(--panel-2);
}
.field input:user-invalid,
.field textarea:user-invalid{ border-color:#E8467C; }
.field select{ appearance:none; cursor:pointer; }
.field select option{ background:#12091F; }

.form__note{ font-size:13px; color:var(--ash); margin:14px 0 0; min-height:1.4em; }

.contact__side{
  padding:clamp(20px, 3vw, 32px);
  border:1px solid var(--line);
  border-top:2px solid var(--neon);
}
.contact__side h3{
  font-family:var(--head);
  font-weight:900; font-stretch:80%;
  font-size:20px; text-transform:uppercase; letter-spacing:-.015em;
  margin:0 0 4px;
}
.contact__side p{ color:var(--ash); font-size:14px; margin:0 0 20px; }
.contact__side a.mail{
  display:block;
  font-size:15px; font-weight:600;
  color:var(--neon);
  word-break:break-all;
  padding:9px 0;
  border-bottom:1px solid var(--line);
  transition:color .18s, padding-left .18s;
}
.contact__side a.mail:hover{ color:var(--ink); padding-left:8px; }
.contact__side .btn{ margin-top:22px; }

/* ==========================================================================
   Pied de page
   ========================================================================== */

.foot{
  position:relative; z-index:1;
  border-top:1px solid var(--line);
  padding-block:clamp(34px, 5vw, 54px);
}
.foot__in{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(16px, 3vw, 40px);
}
.foot__mark img{ height:42px; width:auto; }
.foot__tag{
  font-size:10px; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--dim);
  text-align:center;
  margin:0;
}
.foot__social{ display:flex; gap:16px; }
.foot__legal{
  grid-column:1 / -1;
  font-size:11px; color:var(--dim);
  margin:24px 0 0;
  padding-top:20px;
  border-top:1px solid var(--line);
}

/* ==========================================================================
   Lecteur persistant
   ========================================================================== */

.bar{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:flex; align-items:center;
  gap:clamp(10px, 2vw, 20px);
  padding:9px clamp(12px, 3vw, 26px);
  padding-bottom:max(9px, env(safe-area-inset-bottom));
  background:rgba(10,9,13,.94);
  backdrop-filter:blur(18px);
  border-top:1px solid var(--line-2);
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.bar--on{ transform:translateY(0); }

.bar__play{
  flex:none;
  width:40px; height:40px;
  display:grid; place-items:center;
  border:0; cursor:pointer;
  background:var(--violet); color:#FFF;
  transition:background .18s;
}
.bar__play:hover{ background:var(--neon); }

.bar__meta{ flex:none; min-width:0; max-width:32vw; display:flex; flex-direction:column; }
.bar__title{
  font-family:var(--head);
  font-weight:900; font-stretch:82%;
  font-size:13px; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bar__sub{
  font-size:9px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim);
}

.bar__time{
  flex:none;
  font-size:12px; font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--ash);
}

.bar__close{
  flex:none; width:30px; height:30px;
  background:none; border:0; cursor:pointer;
  color:var(--dim); font-size:13px;
  transition:color .18s;
}
.bar__close:hover{ color:var(--ink); }

/* ==========================================================================
   Révélation au défilement
   ========================================================================== */

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px){
  .nav__links,
  .nav__social{ display:none; }
  .burger{ display:block; margin-left:auto; }

  .about,
  .contact{ grid-template-columns:1fr; }
}

@media (max-width: 760px){
  html{ scroll-padding-top:76px; }

  .chrome{ width:106%; margin-inline:-3% 0; }
  /* l'indicateur de défilement passerait sous les boutons */
  .hero__scroll{ display:none; }

  .feature{ grid-template-columns:1fr; }
  .feature__cover{ max-width:240px; }

  .tr{
    grid-template-columns:3.5ch minmax(0,1fr) auto;
    row-gap:4px;
  }
  .tr__type{ grid-column:2; }
  .tr__y{ grid-row:1; grid-column:3; }

  .date{ grid-template-columns:68px minmax(0,1fr); row-gap:12px; }
  .date .tag{ grid-column:2; justify-self:start; }

  .foot__in{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .foot__legal{ text-align:center; }

  .bar__time{ display:none; }
  .bar__meta{ max-width:40vw; }
}

@media (max-width: 460px){
  .wave{ display:none; }
  .bar__meta{ max-width:none; flex:1; }
}

/* ==========================================================================
   Mouvement réduit
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .marquee__track{ animation:none; }
}