/* ============================================================
   TECHNO BOOKING — Formulaire de waitlist
   Tout est préfixé .tb-wl : le bloc peut être collé dans une page
   existante sans risque de collision de styles.
   ============================================================ */
.tb-wl{
    --black:#000; --steel-950:#0A0C11; --steel-900:#0D0F15; --steel-800:#12151D; --steel-700:#1B202A;
    --alu:#B4BBC3; --alu-dim:#6B737C; --white:#F2F5F8; --ph:#5C646D;
    --violet:#7C3AED; --violet-hot:#9F67FF; --vert:#7FE3A1; --rouge:#FF5C5C;
    --hair:rgba(154,163,172,.16); --hair-strong:rgba(154,163,172,.36);
    --pad:clamp(20px,5vw,64px); --form-pad:clamp(22px,3vw,40px);
    font-family:"Archivo",system-ui,-apple-system,sans-serif;
    color:var(--white);background:var(--steel-950);
    padding:clamp(32px,7vw,96px) var(--pad);
    min-height:100vh;line-height:1.55;
}
.tb-wl *{box-sizing:border-box}
.tb-wl__in{max-width:1180px;margin:0 auto;
    display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:start}
/* descend la colonne de gauche pour que "Candidature" soit à la hauteur du texte "DJ" :
   bordure du form (1) + padding du form + bordure des onglets (1) + padding de l'onglet (18)
   + demi-ligne "DJ" (18.85/2) − demi-ligne "Candidature" (24.8/2) ≈ padding du form + 17px */
.tb-wl__side{padding-top:calc(var(--form-pad) + 17px)}

.tb-wl__mark{font-size:1rem;font-weight:800;font-stretch:87%;
    letter-spacing:.26em;text-transform:uppercase;color:var(--violet);margin:0 0 20px}
.tb-wl h2{font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(2rem,4.6vw,3.6rem);
    line-height:.9;letter-spacing:-.01em;margin:0 0 26px;min-height:1.8em;   /* 2 lignes réservées : pas de saut pendant la frappe */
    position:relative;isolation:isolate;animation:tbwl-pulse-txt 3.2s ease-in-out infinite}
/* machine à écrire : le texte lu par les lecteurs d'écran reste fixe */
.tb-wl__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tb-wl__type{white-space:pre-line}
.tb-wl__caret{display:inline-block;width:.09em;height:.78em;margin-left:.07em;vertical-align:baseline;
    background:var(--white);box-shadow:0 0 12px rgba(255,255,255,.7);animation:tbwl-blink 1s steps(1) infinite}
.tb-wl h2.frappe .tb-wl__caret{animation:none}
@keyframes tbwl-blink{50%{opacity:0}}
/* aura blanche qui respire derrière le titre */
.tb-wl h2::before{content:"";position:absolute;inset:-35% -25%;z-index:-1;pointer-events:none;
    background:radial-gradient(ellipse at 45% 50%,rgba(255,255,255,.17),rgba(255,255,255,.05) 45%,transparent 70%);
    filter:blur(18px);animation:tbwl-pulse-aura 3.2s ease-in-out infinite}
@keyframes tbwl-pulse-txt{
    0%,100%{text-shadow:0 0 14px rgba(255,255,255,.18)}
    50%{text-shadow:0 0 30px rgba(255,255,255,.5),0 0 60px rgba(255,255,255,.18)}
}
@keyframes tbwl-pulse-aura{
    0%,100%{opacity:.55;transform:scale(.96)}
    50%{opacity:1;transform:scale(1.05)}
}

/* logo sous le texte d'intro. LogoWhite3.svg fait 2048×2048 mais le dessin est entre
   y=302 et y=1398 (au-dessus du centre) : on recadre une fenêtre de 1200 px de haut
   qui démarre à y=250 → object-position 250 / (2048 − 1200) ≈ 29.5 %.
   --decal le pousse un peu vers la gauche pour qu'il tombe sous le texte ; c'est un
   décalage (right) et pas une marge, car le logo remplit presque toute la colonne. */
.tb-wl__logo-box{--w:clamp(260px,34vw,480px);--decal:clamp(0px,2.5vw,32px);
    width:var(--w);max-width:100%;margin:clamp(32px,5vw,56px) auto 0;
    position:relative;right:var(--decal);isolation:isolate}
.tb-wl__logo{display:block;width:100%;height:auto;
    aspect-ratio:2048/1200;object-fit:cover;object-position:50% 29.5%}

/* surbrillance du texte "TECHNO BOOKING" (entre 69.8 % et 96 % de la hauteur du cadre ;
   le dessin s'arrête à 63.4 %, d'où la découpe à 66.5 % qui absorbe le flou),
   au même rythme que l'aura du titre :
   ::before = aura blanche diffuse derrière le texte
   ::after  = copie floutée du logo, découpée pour ne garder que le texte → lueur collée aux lettres.
   Le background reprend exactement le recadrage de l'<img> (même position 50 % 29.5 %). */
.tb-wl__logo-box::before{content:"";position:absolute;left:4%;right:4%;top:60%;bottom:-8%;z-index:-1;
    pointer-events:none;filter:blur(16px);
    background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.2),rgba(255,255,255,.06) 45%,transparent 70%);
    animation:tbwl-pulse-aura 3.2s ease-in-out infinite}
.tb-wl__logo-box::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:url("LogoWhite3.svg") 50% 29.5% / 100% auto no-repeat;
    clip-path:inset(66.5% 0 0 0);filter:blur(7px);
    animation:tbwl-pulse-glow 3.2s ease-in-out infinite}
@keyframes tbwl-pulse-glow{
    0%,100%{opacity:.3}
    50%{opacity:.95}
}

/* Glitch — toutes les 4 s, une courte décharge RGB qui découpe le logo */
.tb-wl__logo--glitch{animation:tbwl-logo-glitch 4s steps(1,end) infinite}
@keyframes tbwl-logo-glitch{
    0%,86%,93%,100%{transform:none;filter:none;clip-path:inset(0)}
    87%{transform:translate(-4px,1px);clip-path:inset(12% 0 52% 0);
        filter:drop-shadow(-3px 0 rgba(255,40,90,.9)) drop-shadow(3px 0 rgba(0,230,255,.9))}
    88.5%{transform:translate(4px,-1px);clip-path:inset(58% 0 6% 0);
        filter:drop-shadow(3px 0 rgba(255,40,90,.9)) drop-shadow(-3px 0 rgba(0,230,255,.9))}
    90%{transform:translate(-2px,0);clip-path:inset(28% 0 30% 0);
        filter:drop-shadow(-2px 0 rgba(255,40,90,.9)) drop-shadow(2px 0 rgba(0,230,255,.9))}
    91.5%{transform:translate(2px,1px);clip-path:inset(0);
        filter:drop-shadow(2px 0 rgba(255,40,90,.7)) drop-shadow(-2px 0 rgba(0,230,255,.7))}
}

.tb-wl__lede{color:var(--alu);max-width:44ch;margin:0;font-size:1.08rem;line-height:1.75;text-align:justify}

/* ---------------- formulaire ---------------- */
.tb-wl__form{border:1px solid var(--hair);background:var(--black);padding:var(--form-pad)}
.tb-wl__roles{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);
    border:1px solid var(--hair);margin-bottom:34px}
.tb-wl__role{background:var(--steel-900);border:0;padding:18px 10px;cursor:pointer;color:var(--alu);
    font:inherit;font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;transition:.18s}
.tb-wl__role:hover{color:var(--white)}
.tb-wl__role[aria-selected="true"]{background:var(--violet);color:var(--black)}

.tb-wl__grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tb-wl__f{margin-bottom:20px}
.tb-wl__f label{display:block;font-size:.688rem;font-weight:700;font-stretch:87%;letter-spacing:.18em;
    text-transform:uppercase;color:var(--white);margin-bottom:12px}
.tb-wl__f label em{font-style:normal;color:var(--violet)}
.tb-wl__f label i{font-style:normal;font-weight:500;color:var(--alu)}
.tb-wl__f input,.tb-wl__f textarea,.tb-wl__f select{
    width:100%;background:var(--steel-900);border:1px solid var(--hair);color:var(--white);
    padding:14px 16px;font:inherit;font-size:.94rem;border-radius:0;transition:border-color .2s,box-shadow .2s;
}
.tb-wl__f input::placeholder,.tb-wl__f textarea::placeholder{color:var(--ph);font-style:italic}
.tb-wl__f select{appearance:none;cursor:pointer;padding-right:42px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235C646D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;background-size:14px}
.tb-wl__f select:invalid{color:var(--ph);font-style:italic}
.tb-wl__f select optgroup{color:var(--violet-hot);background:var(--steel-900);font-style:normal;font-weight:800}
.tb-wl__f select option{color:var(--white);background:var(--steel-900);font-style:normal;font-weight:400}
.tb-wl__f input:focus,.tb-wl__f textarea:focus,.tb-wl__f select:focus{outline:none;border-color:var(--violet);
    box-shadow:0 0 0 3px rgba(124,58,237,.18)}
.tb-wl__f textarea{resize:vertical;min-height:124px;display:block}
.tb-wl__f[data-erreur] input,.tb-wl__f[data-erreur] textarea,.tb-wl__f[data-erreur] select{border-color:var(--rouge)}
.tb-wl__err{display:none;margin-top:7px;font-size:.78rem;color:var(--rouge)}
.tb-wl__f[data-erreur] .tb-wl__err{display:block}
.tb-wl__cond{display:none}
.tb-wl__cond.on{display:block}

/* case CGU — annule le style des labels/inputs de champ ci-dessus */
.tb-wl__f .tb-wl__check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;margin:4px 0 0;
    font-size:.84rem;font-weight:400;font-stretch:100%;letter-spacing:normal;text-transform:none;color:var(--alu)}
.tb-wl__f .tb-wl__check input{appearance:none;width:19px;height:19px;flex:none;margin:2px 0 0;padding:0;
    border:1px solid var(--hair-strong);background:var(--steel-900);cursor:pointer;transition:.18s}
.tb-wl__f .tb-wl__check input:checked{background:var(--violet);border-color:var(--violet);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
    background-size:13px;background-position:center;background-repeat:no-repeat}
.tb-wl__f .tb-wl__check input:focus-visible{outline:2px solid var(--violet);outline-offset:2px;box-shadow:none}
.tb-wl__check a{color:var(--violet-hot)}
.tb-wl__f[data-erreur] .tb-wl__check input{border-color:var(--rouge)}

.tb-wl__pot{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.tb-wl__foot{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:30px}
.tb-wl__btn{
    display:inline-flex;align-items:center;justify-content:center;gap:11px;min-width:min(305px,100%);
    padding:18px 40px;background:var(--violet);color:var(--black);
    border:1px solid var(--violet);font:inherit;font-weight:800;font-size:.84rem;letter-spacing:.06em;
    text-transform:uppercase;cursor:pointer;transition:.18s;
}
.tb-wl__btn:hover:not(:disabled){background:var(--violet-hot);border-color:var(--violet-hot);
    transform:translateY(-2px);box-shadow:0 16px 40px -20px rgba(124,58,237,1)}
.tb-wl__btn:disabled{opacity:.55;cursor:progress;transform:none}
.tb-wl__btn .tb-wl__spin{width:14px;height:14px;border:2px solid rgba(0,0,0,.3);
    border-top-color:var(--black);border-radius:50%;display:none;animation:tbwl-spin .7s linear infinite}
.tb-wl__btn.charge .tb-wl__spin{display:block}
@keyframes tbwl-spin{to{transform:rotate(360deg)}}
.tb-wl__legal{font-size:.72rem;color:var(--alu);margin:0}

.tb-wl__msg{display:none;margin-top:24px;padding:20px 22px;border:1px solid var(--hair-strong);font-size:.92rem}
.tb-wl__msg.on{display:block}
.tb-wl__msg.ok{border-color:var(--vert);background:rgba(127,227,161,.07)}
.tb-wl__msg.ok b{color:var(--vert)}
.tb-wl__msg.ko{border-color:var(--rouge);background:rgba(255,92,92,.07)}
.tb-wl__msg.ko b{color:var(--rouge)}
.tb-wl__msg p{margin:6px 0 0;color:var(--alu)}

@media (max-width:900px){
    .tb-wl__in{grid-template-columns:1fr}
    /* tablette + mobile : le logo remonte à droite de "Candidature" + titre,
       le texte d'intro passe dessous sur toute la largeur */
    .tb-wl__side{padding-top:0;display:grid;grid-template-columns:minmax(0,1fr) auto;
        column-gap:clamp(12px,3vw,28px);align-items:center}
    .tb-wl__mark{grid-column:1;grid-row:1}
    .tb-wl h2{grid-column:1;grid-row:2;margin-bottom:0}
    .tb-wl__logo-box{--decal:0px;--w:clamp(110px,28vw,240px);grid-column:2;grid-row:1 / 3;margin:0}
    .tb-wl__lede{grid-column:1 / -1;grid-row:3;max-width:none;margin-top:26px}
}
@media (max-width:560px){
    .tb-wl__grid2{grid-template-columns:1fr;gap:0}
    /* à côté du logo, les phrases longues passent sur 3 lignes : on réserve la place
       pour que le logo et le formulaire ne sautent pas pendant la frappe */
    .tb-wl h2{min-height:2.7em;font-size:clamp(1.6rem,7.5vw,1.85rem)}   /* titre un peu plus petit sur mobile (32px → ~28px) */
}
@media (prefers-reduced-motion:reduce){
    .tb-wl *,.tb-wl *::before,.tb-wl *::after{transition:none!important;animation:none!important}
    .tb-wl__caret{display:none}
}

/* la page de démonstration seulement — à retirer si vous intégrez le bloc */
body{margin:0;background:#0A0C11}