/* ===========================================================================
   Crimzie · Concours GTA 6 + PS5 — DA hero (verre, espace, rouge)
   Base : legal.css
   =========================================================================== */
:root{ --crimzie-blue:59,134,255; --sp:201,245,40; --ps:0,112,240; }
html{overflow-x:clip}

.site-header nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px)}
.hnav{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px)}
.hnav a{font-family:var(--font-ui);font-size:.8rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(241,241,241,.7);text-decoration:none;white-space:nowrap;transition:color .2s}
.hnav a:hover,.hnav a.is-active{color:#fff}
@media(max-width:860px){.hnav{display:none}}
a{color:rgb(var(--sp))}
a:hover{color:#e2ff6a}
.site-header .brand,.site-header .back-link,.site-footer .f-brand{color:#fff}

main.cc{position:relative;z-index:1;width:min(1120px,calc(100% - 44px));margin:0 auto;padding:clamp(20px,3.5vh,44px) 0 30px}

/* ---------- DÉCOR DE FOND : horizon néon « sortie de GTA 6 » ---------- */
.vice{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* soleil couchant */
.vice .sun{position:absolute;left:50%;bottom:16vh;transform:translateX(-50%);
  width:min(52vw,620px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,196,120,.5),rgba(255,84,140,.34) 42%,rgba(150,44,160,.18) 66%,transparent 74%);
  filter:blur(6px);animation:viceSun 14s ease-in-out infinite}
@keyframes viceSun{0%,100%{opacity:.72;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.05)}}
/* halo d'horizon */
.vice .horizon{position:absolute;left:-10%;right:-10%;bottom:0;height:44vh;
  background:linear-gradient(180deg,transparent,rgba(214,58,132,.20) 42%,rgba(255,110,60,.20) 74%,rgba(6,4,10,.9));
  filter:blur(2px)}
/* grille de perspective */
.vice .grid-h{position:absolute;left:-20%;right:-20%;bottom:0;height:30vh;opacity:.3;
  background-image:repeating-linear-gradient(90deg,rgba(255,120,190,.5) 0 1px,transparent 1px 76px);
  transform:perspective(320px) rotateX(72deg);transform-origin:bottom center;
  mask-image:linear-gradient(180deg,transparent,#000 60%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 60%)}
/* nappes néon latérales */
.vice .glow-l,.vice .glow-r{position:absolute;top:-10%;width:46vw;height:80vh;filter:blur(70px);opacity:.42}
.vice .glow-l{left:-16vw;background:radial-gradient(circle,rgba(168,58,214,.5),transparent 68%)}
.vice .glow-r{right:-16vw;background:radial-gradient(circle,rgba(0,112,240,.42),transparent 68%)}
@media(prefers-reduced-motion:reduce){.vice .sun{animation:none}}
.prize-veil{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(78% 58% at 50% 34%,rgba(4,5,8,.34),rgba(4,5,8,.8) 76%)}

/* ---------- HERO ---------- */
.cc-hero{text-align:center;padding:clamp(18px,3.5vh,44px) 0 clamp(16px,2.6vh,30px)}
.cc-eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--muted);font-size:.74rem;
  font-weight:800;letter-spacing:.3em;text-transform:uppercase;margin:0 0 18px}
.cc-eyebrow::before,.cc-eyebrow::after{content:"";width:26px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(241,241,241,.5),transparent)}
.cc-hero h1{margin:0 auto 14px;max-width:17ch;font-family:var(--font-display);
  font-size:clamp(2.7rem,6.4vw,5.4rem);font-weight:800;line-height:.9;
  text-transform:uppercase;letter-spacing:-.03em;color:#fff;text-wrap:balance;
  text-shadow:0 20px 70px rgba(0,0,0,.7)}
.cc-hero h1 .dot{color:var(--red)}
.cc-hero .lead{margin:0 auto;max-width:54ch;color:rgba(241,241,241,.84);
  font-size:clamp(1.04rem,1.5vw,1.26rem);font-weight:500;line-height:1.55}

/* bandeau « sortie de GTA 6 » */
.launch-tag{display:inline-flex;align-items:center;gap:11px;margin:0 0 20px;padding:9px 20px;
  border-radius:var(--r-pill);border:1px solid rgba(232,74,160,.5);
  background:linear-gradient(120deg,rgba(214,58,132,.22),rgba(255,120,60,.16));
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 30px rgba(214,58,132,.22);
  font-family:var(--font-display);font-size:.7rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:#ffd9ec;
  /* align\u00e9 sur le groupe logo + PS5, lui-m\u00eame recentr\u00e9 optiquement */
  transform:translateX(-9%)}
@media(max-width:640px){.launch-tag{transform:translateX(-6%)}}
.launch-tag .lt-dot{width:7px;height:7px;border-radius:50%;background:#ff5aa0;
  box-shadow:0 0 12px rgba(255,90,160,.95);animation:pulse 1.6s ease-in-out infinite}

/* logo GTA 6 en pièce maîtresse du hero, avec néon + PS5 en arrière-plan */
.gta-stage{position:relative;width:min(560px,86vw);margin:clamp(6px,2vh,18px) auto clamp(16px,3vh,30px);
  display:grid;place-items:center;
  /* la PS5 déborde à droite : on recentre optiquement l'ensemble sous le titre */
  transform:translateX(-9%)}
/* PS5 derrière, décalée sur le côté */
.gta-stage .stage-ps5{position:absolute;right:-22%;bottom:-16%;z-index:0;width:62%;height:auto;
  opacity:1;filter:drop-shadow(0 22px 50px rgba(0,0,0,.75)) drop-shadow(0 0 44px rgba(var(--ps),.45));
  animation:ps5Float 13s ease-in-out infinite}
@keyframes ps5Float{0%,100%{transform:translateY(0) rotate(1.5deg)}50%{transform:translateY(-14px) rotate(-1deg)}}
/* halo bleu PlayStation derrière la console */
.gta-stage::before{content:"";position:absolute;right:-20%;bottom:-12%;width:60%;height:76%;z-index:0;
  border-radius:50%;filter:blur(38px);
  background:radial-gradient(circle,rgba(var(--ps),.55),transparent 70%)}

.gta-neon{position:relative;z-index:1;display:block;width:min(400px,62vw);margin:0 auto}
/* éclairage d'ambiance derrière le logo — lumière de scène, pas de contour tracé */
.gta-neon::before{content:"";position:absolute;left:-18%;right:-18%;top:-14%;bottom:-6%;z-index:0;
  border-radius:50%;filter:blur(46px);opacity:.55;
  background:radial-gradient(58% 62% at 44% 46%,rgba(232,74,160,.42),rgba(140,70,220,.22) 52%,transparent 72%)}
.gta-neon .gta-art{position:relative;z-index:1;display:block;width:100%;height:auto;
  filter:drop-shadow(0 18px 38px rgba(0,0,0,.66))}
/* liseré néon sur « grand theft auto » — tube qui frémit légèrement */
.gta-neon .neon-word{position:absolute;inset:0;width:100%;height:auto;z-index:2;pointer-events:none;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.85))
         drop-shadow(0 0 4px rgba(255,140,200,.4));
  animation:neonBreathe 6.5s ease-in-out infinite}
/* respiration lente + deux courtes faiblesses, en fondu (jamais de coupure nette) */
@keyframes neonBreathe{
  0%{opacity:.9}
  18%{opacity:1}
  34%{opacity:.82}
  38%{opacity:.97}
  52%{opacity:1}
  66%{opacity:.86}
  70%{opacity:1}
  84%{opacity:.93}
  100%{opacity:.9}}
/* la lumière d'ambiance respire avec le tube */
.gta-neon::before{animation:ambientBreathe 6.5s ease-in-out infinite}
@keyframes ambientBreathe{
  0%{opacity:.36}
  34%{opacity:.28}
  52%{opacity:.42}
  66%{opacity:.3}
  100%{opacity:.36}}
/* reflet au sol — finition produit */
.gta-neon .gta-reflect{position:absolute;left:0;right:0;top:100%;width:100%;height:auto;z-index:0;
  transform:scaleY(-1);opacity:.13;filter:blur(3px) saturate(.8);
  mask-image:linear-gradient(180deg,transparent 42%,#000 96%);
  -webkit-mask-image:linear-gradient(180deg,transparent 42%,#000 96%);pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .gta-stage .stage-ps5,.gta-neon .neon-word,.gta-neon::before{animation:none}
}

/* ---------- FEU D'ARTIFICE D'ARRIVÉE ---------- */
#fxCanvas{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:1;
  transition:opacity .85s ease;mix-blend-mode:screen}
#fxCanvas.done{opacity:0}
@media(max-width:640px){
  .gta-stage{transform:translateX(-6%)}
  .gta-stage .stage-ps5{right:-14%;bottom:-18%;width:52%}
}

/* ---------- LOT UNIQUE ---------- */
.lot{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:clamp(18px,3vw,40px);margin:clamp(24px,4vh,38px) 0 0;padding:clamp(22px,3vw,38px);
  border-radius:var(--r-lg);overflow:hidden;text-align:left;
  border:1px solid rgba(232,74,160,.4);background:var(--glass);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  box-shadow:0 34px 80px rgba(0,0,0,.55),0 0 66px rgba(214,58,132,.16),inset 0 1px 0 var(--glass-hi)}
.lot::before{content:"";position:absolute;inset:1px 1px auto 1px;height:46%;border-radius:inherit;
  pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent)}
.lot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(72% 120% at 88% 30%,rgba(0,112,240,.16),transparent 60%)}
.lot>*{position:relative;z-index:1}
.lot-visual{display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,1.4vw,18px)}
.lot-visual img{display:block;filter:drop-shadow(0 16px 40px rgba(0,0,0,.6))}
.lot-visual .v-ps5{width:clamp(112px,15vw,190px);height:auto}
.lot-txt{display:grid;gap:9px}
.lot-k{display:inline-flex;align-items:center;gap:9px;font-size:.64rem;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:#ff8fc4}
.lot-txt h2{margin:0;font-family:var(--font-display);font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:800;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;color:#fff}
.lot-txt p{margin:0;color:rgba(241,241,241,.72);font-size:.96rem;font-weight:500;line-height:1.5;max-width:44ch}
.lot-items{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.lot-items span{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:var(--r-pill);
  font-size:.72rem;font-weight:800;letter-spacing:.06em;color:#fff;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07)}
.lot-items span::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff5aa0;
  box-shadow:0 0 9px rgba(255,90,160,.9)}
.lot-items span.ps::before{background:rgb(var(--ps));box-shadow:0 0 9px rgba(var(--ps),.9)}
.lot-one{position:absolute;top:clamp(14px,2vw,20px);right:clamp(14px,2vw,22px);z-index:2;
  padding:6px 14px;border-radius:var(--r-pill);font-family:var(--font-display);font-size:.6rem;
  font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#ffd9ec;
  border:1px solid rgba(232,74,160,.5);background:rgba(214,58,132,.18)}
@media(max-width:760px){
  .lot{grid-template-columns:1fr;text-align:center;padding-top:clamp(40px,7vw,52px)}
  .lot-txt{justify-items:center}
  .lot-items{justify-content:center}
  .lot-txt p{max-width:none}
}

/* ---------- COMPTE À REBOURS ---------- */
.countdown{margin:clamp(22px,4vh,36px) 0 0;padding:clamp(18px,2.4vw,26px);border-radius:var(--r-lg);
  border:1px solid rgba(var(--red-soft),.38);background:var(--glass);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 44px rgba(var(--red-soft),.12),inset 0 1px 0 var(--glass-hi)}
.cd-k{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 16px;
  font-family:var(--font-display);font-size:.68rem;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(241,241,241,.7)}
.cd-k .dotpulse{width:8px;height:8px;border-radius:50%;background:var(--red);
  box-shadow:0 0 12px rgba(var(--red-soft),.9);animation:pulse 1.6s ease-in-out infinite}
.cd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,14px)}
.cd-cell{padding:clamp(12px,1.6vw,18px) 8px;border-radius:var(--r-md);text-align:center;
  border:1px solid rgba(255,255,255,.1);background:rgba(6,7,10,.55)}
.cd-cell b{display:block;font-family:var(--font-display);font-size:clamp(1.7rem,4.2vw,2.7rem);font-weight:800;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cd-cell span{display:block;margin-top:6px;font-size:.6rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(241,241,241,.5)}
.cd-dates{margin:14px 0 0;text-align:center;color:rgba(241,241,241,.6);font-size:.84rem;font-weight:600}
.cd-dates b{color:#fff}

/* ---------- SECTIONS ---------- */
.cc-section{margin-top:clamp(42px,7vh,86px)}
.cc-section.first{margin-top:clamp(26px,4.5vh,46px)}
.sec-eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--muted);font-size:.7rem;
  font-weight:800;letter-spacing:.32em;text-transform:uppercase;margin:0 0 14px}
.sec-eyebrow::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--red),transparent)}
.cc-section h2{margin:0 0 12px;font-family:var(--font-display);font-size:clamp(2rem,4vw,3.1rem);
  font-weight:800;line-height:.96;text-transform:uppercase;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.cc-section h2 i{font-style:normal;color:var(--red)}
.cc-section .sec-text{max-width:58ch;color:rgba(241,241,241,.74);font-size:1.04rem;font-weight:500;line-height:1.55}
.cc-section .sec-text a{color:rgb(var(--sp));text-decoration:none;border-bottom:1px solid rgba(var(--sp),.4)}

/* ---------- BARÈME DE TICKETS ---------- */
.tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px);margin-top:clamp(24px,4vw,36px)}
.tk{position:relative;padding:clamp(20px,2.4vw,28px);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--glass-brd);background:var(--glass);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);box-shadow:var(--shadow-glass);
  transition:transform .32s cubic-bezier(.16,.84,.24,1),border-color .3s,box-shadow .3s}
.tk::before{content:"";position:absolute;inset:1px 1px auto 1px;height:48%;border-radius:inherit;
  pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent)}
.tk:hover{transform:translateY(-5px);border-color:rgba(var(--red-soft),.45);
  box-shadow:0 32px 70px rgba(0,0,0,.5),0 0 42px rgba(var(--red-soft),.14),inset 0 1px 0 var(--glass-hi)}
.tk>*{position:relative}
.tk-n{display:inline-flex;align-items:baseline;gap:6px;margin:0 0 12px}
.tk-n b{font-family:var(--font-display);font-size:clamp(2.2rem,4.6vw,3rem);font-weight:800;line-height:.9;
  color:rgb(var(--red-soft));letter-spacing:-.03em;text-shadow:0 0 30px rgba(var(--red-soft),.45)}
.tk-n span{font-family:var(--font-display);font-size:.68rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(241,241,241,.6)}
.tk h3{margin:0 0 8px;font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:#fff;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.2}
.tk p{margin:0;color:rgba(241,241,241,.7);font-size:.92rem;font-weight:500;line-height:1.5}
.tk .tk-tag{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:6px 13px;
  border-radius:var(--r-pill);font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.tk.dep .tk-tag{color:rgb(var(--sp));border:1px solid rgba(var(--sp),.4);background:rgba(var(--sp),.1)}
.tk.par .tk-tag{color:rgba(90,160,255,.95);border:1px solid rgba(var(--ps),.4);background:rgba(var(--ps),.12)}
.tk.fil .tk-tag{color:rgba(241,241,241,.8);border:1px solid var(--glass-brd);background:rgba(255,255,255,.06)}
@media(max-width:860px){.tickets{grid-template-columns:1fr}}

/* exemples de conversion */
.examples{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(18px,2.6vh,24px)}
.ex{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:var(--r-pill);
  border:1px solid var(--glass-brd);background:var(--glass-soft);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);box-shadow:inset 0 1px 0 var(--glass-hi)}
.ex .eu{font-family:var(--font-display);font-size:.92rem;font-weight:800;color:#fff}
.ex .ea{color:rgba(241,241,241,.4);font-size:.8rem}
.ex .et{font-family:var(--font-display);font-size:.92rem;font-weight:800;color:rgb(var(--sp))}

/* ---------- CALCULATEUR ---------- */
.calc{margin-top:clamp(22px,3.4vh,32px);padding:clamp(20px,2.6vw,30px);border-radius:var(--r-lg);
  border:1px solid var(--glass-brd);background:var(--glass);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);box-shadow:0 20px 50px rgba(0,0,0,.42),inset 0 1px 0 var(--glass-hi)}
.calc-k{font-size:.64rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.calc-row{display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap}
.calc-in{display:flex;align-items:center;gap:10px}
.calc-in button{width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--glass-brd);
  background:var(--glass-soft);color:#fff;font-size:1.2rem;font-weight:700;cursor:pointer;transition:border-color .2s}
.calc-in button:hover{border-color:rgba(255,255,255,.4)}
.calc-in .cv{min-width:118px;text-align:center;padding:9px 14px;border-radius:var(--r-md);
  border:1px solid var(--glass-brd);background:rgba(8,9,13,.5)}
.calc-in .cv span{display:block;font-size:.54rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(241,241,241,.5)}
.calc-in .cv b{font-family:var(--font-display);font-size:1.3rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.calc-arrow{color:rgba(241,241,241,.35);font-size:1.2rem}
.calc-out{display:flex;align-items:center;gap:12px;padding:11px 20px;border-radius:var(--r-pill);
  border:1px solid rgba(var(--sp),.45);background:rgba(var(--sp),.1);box-shadow:0 0 26px rgba(var(--sp),.14)}
.calc-out b{font-family:var(--font-display);font-size:1.7rem;font-weight:800;color:rgb(var(--sp));
  font-variant-numeric:tabular-nums;line-height:1}
.calc-out span{font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(241,241,241,.7)}
.calc-note{margin:14px 0 0;color:rgba(241,241,241,.45);font-size:.82rem;font-weight:500}

/* ---------- FORMULAIRE ---------- */
.cc-form-wrap{display:grid;grid-template-columns:1.3fr .85fr;gap:clamp(20px,2.4vw,30px);
  align-items:start;margin-top:clamp(24px,4vw,38px)}
.cc-card{position:relative;padding:clamp(24px,3vw,38px);border:1px solid var(--glass-brd);
  border-radius:var(--r-lg);background:var(--glass);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);box-shadow:var(--shadow-glass);overflow:hidden}
.cc-card::before{content:"";position:absolute;inset:1px 1px auto 1px;height:110px;border-radius:inherit;
  pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent)}
.cc-card>*{position:relative}

.field{display:grid;gap:9px;margin:0 0 18px}
.field label{font-family:var(--font-display);font-size:.76rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(241,241,241,.86)}
.field label em{font-style:normal;color:rgba(241,241,241,.45);font-weight:600;letter-spacing:0;text-transform:none}
.field input[type=email],.field input[type=text],.field input[type=number],.field select{width:100%;min-height:54px;
  padding:0 17px;border-radius:var(--r-md);border:1px solid var(--glass-brd);background:rgba(8,9,13,.55);
  color:#fff;font:inherit;font-size:1.01rem;transition:border-color .2s,box-shadow .2s,background .2s}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(241,241,241,.5) 50%),linear-gradient(135deg,rgba(241,241,241,.5) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field input::placeholder{color:rgba(241,241,241,.34)}
.field input:focus,.field select:focus{outline:none;border-color:rgba(var(--red-soft),.6);
  background-color:rgba(8,9,13,.75);box-shadow:0 0 0 3px rgba(var(--red-soft),.18)}
.field .hint{color:rgba(241,241,241,.45);font-size:.8rem;font-weight:500}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,18px)}
@media(max-width:560px){.field-2{grid-template-columns:1fr}}
/* champ parrain révélé conditionnellement */
.field.cond{display:none}
.field.cond.show{display:grid}

.drop{position:relative;display:grid;place-items:center;gap:9px;padding:clamp(22px,3vw,32px);
  border-radius:var(--r-md);border:1.5px dashed rgba(255,255,255,.22);background:rgba(8,9,13,.42);
  text-align:center;cursor:pointer;transition:border-color .25s,background .25s,transform .25s}
.drop:hover{border-color:rgba(var(--red-soft),.6);background:rgba(8,9,13,.6)}
.drop.over{border-color:rgb(var(--red-soft));background:rgba(var(--red-soft),.1);transform:scale(1.01)}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop .di{width:38px;height:38px;stroke:rgba(241,241,241,.5);fill:none;stroke-width:1.8}
.drop .dt{font-family:var(--font-display);font-size:.9rem;font-weight:700;color:#fff}
.drop .ds{color:rgba(241,241,241,.5);font-size:.8rem;font-weight:500}
.drop.filled{border-style:solid;border-color:rgba(var(--sp),.55);background:rgba(var(--sp),.08)}
.drop.filled .dt{color:rgb(var(--sp))}
.preview{display:none;margin:14px 0 0;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--glass-brd);background:rgba(6,7,10,.6)}
.preview.show{display:block}
.preview img{width:100%;max-height:250px;object-fit:contain;display:block}
.preview .pv-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;
  border-top:1px solid rgba(255,255,255,.08)}
.preview .pv-name{color:rgba(241,241,241,.7);font-size:.82rem;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.preview .pv-del{background:none;border:0;cursor:pointer;color:#ff8e79;font-size:.72rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase}

.cc-check{display:flex;align-items:flex-start;gap:12px;margin:18px 0 20px;cursor:pointer}
.cc-check input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;
  border:1px solid var(--glass-brd);border-radius:6px;background:rgba(8,9,13,.6);cursor:pointer;
  display:grid;place-items:center;transition:border-color .2s}
.cc-check input::after{content:"";width:10px;height:10px;border-radius:3px;transform:scale(0);
  background:rgb(var(--red-soft));box-shadow:0 0 10px rgba(var(--red-soft),.7);transition:transform .18s}
.cc-check input:checked{border-color:rgba(var(--red-soft),.7)}
.cc-check input:checked::after{transform:scale(1)}
.cc-check span{color:rgba(241,241,241,.74);font-size:.9rem;font-weight:500;line-height:1.45}

.btn-red{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;
  padding:0 28px;border-radius:var(--r-pill);cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  color:#fff;border:1px solid rgba(var(--red-soft),.7);font-family:var(--font-display);font-size:.84rem;
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(180deg,rgb(var(--red-soft)),#b51c10);
  box-shadow:0 14px 34px rgba(var(--red-soft),.32),inset 0 1px 0 rgba(255,255,255,.32);
  transition:transform .22s,box-shadow .22s,filter .22s,opacity .22s}
.btn-red:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.07);
  box-shadow:0 0 44px rgba(var(--red-soft),.5)}
.btn-red:disabled{opacity:.45;cursor:not-allowed}
.btn-red::after{content:"";position:absolute;top:0;bottom:0;left:-34%;width:34%;z-index:2;pointer-events:none;
  transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  opacity:0;transition:opacity .2s}
.btn-red:hover:not(:disabled)::after{opacity:1;animation:ccSheen .85s cubic-bezier(.2,.7,.3,1)}
@keyframes ccSheen{from{left:-34%}to{left:120%}}
@media(prefers-reduced-motion:reduce){.btn-red::after{display:none}}
.form-msg{margin:14px 0 0;min-height:20px;font-size:.88rem;font-weight:600;color:rgba(241,241,241,.55)}
.form-msg.err{color:#ff8e79}
.form-msg.ok{color:rgb(var(--sp))}
.cc-note{margin:14px 0 0;color:rgba(241,241,241,.48);font-size:.83rem;font-weight:500;line-height:1.5}
/* estimation de tickets dans le formulaire */
.tk-est{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px;
  padding:13px 18px;border-radius:var(--r-md);border:1px solid rgba(var(--sp),.35);background:rgba(var(--sp),.08)}
.tk-est .tke{font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(241,241,241,.65)}
.tk-est .tkv{font-family:var(--font-display);font-size:1.3rem;font-weight:800;color:rgb(var(--sp));font-variant-numeric:tabular-nums}

/* aside */
.cc-aside{display:grid;gap:16px}
.sp-card{position:relative;display:grid;gap:14px;padding:clamp(20px,2.4vw,28px);border-radius:var(--r-lg);
  overflow:hidden;border:1px solid rgba(var(--sp),.42);background:var(--glass);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  box-shadow:0 24px 58px rgba(0,0,0,.5),0 0 44px rgba(var(--sp),.12),inset 0 1px 0 var(--glass-hi)}
.sp-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(80% 130% at 10% 22%,rgba(var(--sp),.16),transparent 62%)}
.sp-card>*{position:relative;z-index:1}
.sp-logo{display:grid;place-items:center;width:104px;height:56px;padding:10px 14px;border-radius:14px;
  border:1px solid rgba(var(--sp),.4);background:linear-gradient(150deg,rgba(var(--sp),.14),rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.sp-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.sp-card .sk{font-size:.62rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--sp),.95)}
.sp-card strong{font-family:var(--font-display);font-size:1.14rem;font-weight:800;color:#fff;line-height:1.14}
.sp-card p{margin:0;color:rgba(241,241,241,.68);font-size:.88rem;font-weight:500;line-height:1.5}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 22px;
  border-radius:var(--r-pill);text-decoration:none;color:#0a0d02;border:1px solid rgba(var(--sp),.8);
  font-family:var(--font-display);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(180deg,rgb(var(--sp)),#a9cf22);
  box-shadow:0 12px 28px rgba(var(--sp),.24),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .22s,filter .22s,box-shadow .22s}
.sp-btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 0 40px rgba(var(--sp),.4);color:#0a0d02}

.info-card{padding:clamp(18px,2.2vw,24px);border-radius:var(--r-lg);border:1px solid var(--glass-brd);
  background:var(--glass-soft);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:0 18px 44px rgba(0,0,0,.4),inset 0 1px 0 var(--glass-hi)}
.info-card .ik{font-size:.62rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 9px}
.info-card strong{display:block;font-family:var(--font-display);font-size:1.06rem;font-weight:700;color:#fff;
  line-height:1.22;margin:0 0 7px}
.info-card p{margin:0;color:rgba(241,241,241,.7);font-size:.88rem;font-weight:500;line-height:1.5}

/* ---------- TUTO ---------- */
.tuto{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px);margin-top:clamp(24px,4vw,36px)}
.tt{position:relative;padding:clamp(20px,2.4vw,26px);border-radius:var(--r-lg);
  border:1px solid var(--glass-brd);background:var(--glass-soft);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);box-shadow:0 18px 44px rgba(0,0,0,.4),inset 0 1px 0 var(--glass-hi)}
.tt .tt-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  margin:0 0 13px;font-family:var(--font-display);font-size:.8rem;font-weight:800;color:#fff;
  border:1px solid rgba(var(--red-soft),.6);background:rgba(var(--red-soft),.18)}
.tt h4{margin:0 0 7px;font-family:var(--font-display);font-size:1rem;font-weight:700;color:#fff;line-height:1.25}
.tt p{margin:0;color:rgba(241,241,241,.7);font-size:.88rem;font-weight:500;line-height:1.5}
.tt code{padding:2px 7px;border-radius:6px;font-family:var(--font-ui);font-size:.8rem;font-weight:700;
  color:rgb(var(--sp));background:rgba(var(--sp),.12);border:1px solid rgba(var(--sp),.28)}
.tt-shot{margin:13px 0 0;padding:10px 11px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.1);
  background:rgba(6,7,10,.62);display:grid;gap:6px}
.tt-shot .row{display:flex;align-items:center;gap:8px}
.tt-shot .bal{font-family:var(--font-display);font-size:.78rem;font-weight:800;color:#fff;
  padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.07)}
.tt-shot .sq{width:26px;height:26px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;
  border:1.5px solid rgba(var(--sp),.85);background:rgba(var(--sp),.12);box-shadow:0 0 14px rgba(var(--sp),.35)}
.tt-shot .sq svg{width:15px;height:15px;stroke:rgb(var(--sp));fill:none;stroke-width:2}
.tt-shot .item{padding:6px 10px;border-radius:7px;font-size:.76rem;font-weight:600;color:rgba(241,241,241,.6);
  background:rgba(255,255,255,.05)}
.tt-shot .item.on{color:rgb(var(--sp));background:rgba(var(--sp),.13);border:1px solid rgba(var(--sp),.32);font-weight:700}
.tt-shot .sel{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;border-radius:7px;
  font-size:.76rem;font-weight:600;color:rgba(241,241,241,.55);background:rgba(255,255,255,.05)}
.tt-shot .opt{padding:6px 11px;border-radius:7px;font-size:.76rem;font-weight:700;color:rgb(var(--sp));
  background:rgba(var(--sp),.13);border:1px solid rgba(var(--sp),.32)}
.tt-note{margin-top:clamp(16px,2.4vh,22px);padding:15px 20px;border-radius:var(--r-md);
  border:1px solid rgba(var(--crimzie-blue),.3);background:rgba(var(--crimzie-blue),.07);
  color:rgba(241,241,241,.76);font-size:.89rem;font-weight:500;line-height:1.55}
.tt-note b{color:#fff}

/* ---------- RÈGLES ---------- */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px);margin-top:clamp(24px,4vw,36px)}
@media(max-width:820px){.rules{grid-template-columns:1fr}.tuto{grid-template-columns:1fr}}
.rule-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.rule-list li{position:relative;padding-left:22px;color:rgba(241,241,241,.74);font-size:.92rem;
  font-weight:500;line-height:1.5}
.rule-list li::before{content:"";position:absolute;left:3px;top:.5em;width:7px;height:7px;border-radius:2px;
  background:rgb(var(--red-soft));box-shadow:0 0 10px rgba(var(--red-soft),.6);transform:rotate(45deg)}
.rule-list strong{color:#fff;font-weight:700}

.legal-strip{margin-top:clamp(26px,4vh,40px);padding:16px 22px;border-radius:var(--r-md);
  border:1px solid rgba(var(--red-soft),.3);background:rgba(var(--red-soft),.06);text-align:center;
  color:rgba(241,241,241,.72);font-size:.85rem;font-weight:500;line-height:1.55}
.legal-strip b{color:#fff}

@media(max-width:900px){.cc-form-wrap{grid-template-columns:1fr}}
@media(max-width:520px){main.cc{width:calc(100% - 28px)}.cd-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- révélations ---------- */
@media (prefers-reduced-motion:no-preference){
  html.reveal-on .rv{opacity:0;transform:translateY(38px) scale(.97);filter:blur(6px);
    transition:opacity .68s cubic-bezier(.16,.84,.24,1),transform .82s cubic-bezier(.16,.84,.24,1),filter .6s ease;
    transition-delay:calc(var(--rvi,0) * 72ms)}
  html.reveal-on .rv.is-in{opacity:1;transform:none;filter:none}
}