:root{--red:#dc2626;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--soft:#f8fafc}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font:15px/1.55 Inter,system-ui,sans-serif}a{color:inherit;text-decoration:none}header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px max(22px,calc((100% - 960px)/2));background:#fffffff2;border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}.brand{display:flex;align-items:center;gap:9px;font-weight:700}.brand img{width:28px}nav{display:flex;gap:18px;color:var(--muted);font-size:13px}.button{display:inline-block;border:0;border-radius:999px;background:var(--red);color:#fff;padding:12px 20px;font:600 14px inherit;cursor:pointer}.small{padding:8px 13px;font-size:12px}.hero,section{max-width:960px;margin:auto;padding:76px 22px}.hero{display:grid;grid-template-columns:1fr 280px;gap:50px;min-height:480px;align-items:center}.eyebrow{margin:0 0 8px;color:#0e7490;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}h1{max-width:600px;font-size:clamp(34px,6vw,58px);line-height:1.04;margin:0 0 20px}h1 em{display:block;color:var(--red);font-style:normal}.lead,.sub{max-width:580px;color:var(--muted);font-size:16px;margin:0 0 25px}h2{font-size:29px;margin:0 0 8px}.tickets{height:270px;position:relative;background:#1f2124;border-radius:25px}.tickets i{position:absolute;width:170px;padding:34px 18px;border-radius:9px;color:#fff;font-style:normal;font-size:28px;font-weight:800;box-shadow:0 10px 24px #0005}.tickets i:nth-child(1){background:#2563b9;top:25px;left:15px;transform:rotate(-8deg)}.tickets i:nth-child(2){background:#ee922d;top:93px;left:90px;transform:rotate(7deg)}.tickets i:nth-child(3){background:#43a452;top:160px;left:25px;transform:rotate(-3deg)}section{border-top:1px solid var(--line)}.card{max-width:600px;margin-top:25px;padding:22px;border:1px solid var(--line);border-radius:14px;box-shadow:0 5px 18px #0f172a0a}label{display:block;margin:14px 0 6px;color:var(--muted);font-size:13px}input,select{display:block;width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font:inherit}form .button{width:100%;margin-top:18px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:25px}.grid article,details{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}h3{font-size:16px;margin:0 0 5px}.grid p,details p{margin:0;color:var(--muted)}details{margin-top:10px}summary{cursor:pointer;font-weight:600}#result{margin-top:15px;color:#15803d}#result:empty{display:none}#result[data-tone=ko]{color:#b91c1c}#result[data-tone=ok]{color:#15803d}footer{padding:28px 22px;text-align:center;color:var(--muted);border-top:1px solid var(--line);background:var(--soft)}@media(max-width:650px){header nav,header .small{display:none}.hero{grid-template-columns:1fr;padding-top:48px}.tickets{height:220px}.grid{grid-template-columns:1fr}section{padding:48px 22px}}.help{margin:6px 0 0;color:var(--muted);font-size:12px}.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.hp label,.hp input{margin:0}.turnstile-slot{max-width:300px;margin-top:16px}.turnstile-slot:empty{display:none}.button:disabled{opacity:.65;cursor:progress}input[aria-invalid=true]{border-color:#b91c1c;background:#fff5f5}.confirm{max-width:600px;margin:12vh auto 60px;padding:26px;border:1px solid var(--line);border-radius:14px}.confirm h1{font-size:26px;margin:0 0 12px}.confirm-errors{margin:0 0 18px;padding-left:18px;color:#b91c1c}.confirm .button{margin-top:8px}
@media(max-width:650px){header{flex-wrap:wrap}header nav{display:flex;order:3;width:100%;justify-content:space-between;gap:10px}header .small{display:none}.confirm{margin-top:40px}}

/* ---- Hero éditorial : diagonale sombre + cartes ---- */
.hero{
  position:relative;
  max-width:none;
  margin:0;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
  min-height:clamp(560px,76vh,780px);
  padding:72px clamp(24px,4vw,70px) 84px clamp(24px,6.5vw,118px);
  overflow:hidden;
  border-top:0;
  background:#fff;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(112deg,#9fa1a5 0%,#6a6c70 24%,#333538 56%,#121416 88%);
  clip-path:polygon(18% 0,30% .4%,32.4% 1.9%,33.7% 4.6%,34.4% 8.6%,100% 100%,100% 0);
}
.hero>div{position:relative;z-index:1;max-width:640px}
.hero .eyebrow{color:#be123c;letter-spacing:.16em;margin-bottom:14px}
.hero h1{
  font-size:clamp(36px,4.3vw,62px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.05;
  color:#18181b;
  margin-bottom:22px;
}
.hero h1 em{font-weight:800}
.hero .lead{
  max-width:34em;
  margin-bottom:34px;
  color:#52525b;
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.5;
}
.hero .button{
  padding:15px 34px;
  font-size:15px;
  font-weight:700;
  box-shadow:0 10px 24px #dc262640;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.hero .button:hover{background:#b91c1c;transform:translateY(-2px);box-shadow:0 14px 28px #dc26264d}

.tickets{
  position:relative;
  z-index:1;
  justify-self:end;
  width:100%;
  max-width:470px;
  height:452px;
  margin-right:-34px;
  background:none;
  border-radius:0;
}
.tickets i{
  --c:#2b64b9;
  position:absolute;
  width:252px;
  height:148px;
  padding:0 0 15px 17px;
  display:flex;
  align-items:flex-end;
  border-radius:12px;
  overflow:hidden;
  background-color:#fff;
  background-image:
    radial-gradient(circle at 34px 26px,#e11b22 0 9px,transparent 9.6px),
    radial-gradient(circle at 32px 26px,#fff 0 4.2px,transparent 4.8px),
    linear-gradient(var(--c) 0 0);
  background-repeat:no-repeat;
  background-size:auto,auto,100% 61%;
  background-position:0 0,0 0,left bottom;
  box-shadow:0 20px 44px #00000052,0 2px 3px #0000001f;
  color:#fff;
  font-style:normal;
  font-size:38px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
}
.tickets i::before{
  content:"RECHARGE";
  position:absolute;
  left:17px;
  bottom:57px;
  z-index:2;
  font-size:12px;
  font-weight:800;
  letter-spacing:.07em;
}
.tickets i::after{
  content:"PRIX\A DE LA\A RECHARGE";
  white-space:pre;
  position:absolute;
  top:39%;
  right:0;
  bottom:0;
  width:76px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#3a3e46;
  background:color-mix(in srgb,var(--c) 70%,#0b0d10);
  clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);
  font-size:7.5px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:.03em;
}
.tickets i:nth-child(1){--c:#2b64b9;top:0;left:-6px;transform:rotate(-11deg);z-index:1}
.tickets i:nth-child(2){--c:#ee922d;top:126px;right:-30px;transform:rotate(8deg);z-index:2}
.tickets i:nth-child(3){--c:#43a452;top:292px;left:16px;transform:rotate(-4deg);z-index:3}

@media(min-width:1500px){
  .tickets{max-width:540px;height:570px;margin-right:-30px}
  .tickets i{width:290px;height:170px;font-size:44px;padding:0 0 17px 19px}
  .tickets i::before{left:19px;bottom:66px;font-size:13px}
  .tickets i::after{width:86px;font-size:8px}
  .tickets i:nth-child(1){top:0;left:-6px}
  .tickets i:nth-child(2){top:186px;right:-38px}
  .tickets i:nth-child(3){top:392px;left:22px}
}
@media(max-width:1200px){
  .tickets{max-width:400px;height:394px;margin-right:-8px}
  .tickets i{width:214px;height:126px;font-size:32px;padding:0 0 13px 15px}
  .tickets i::before{left:15px;bottom:48px;font-size:10px}
  .tickets i::after{width:64px;font-size:6.5px}
  .tickets i:nth-child(1){top:0;left:-6px}
  .tickets i:nth-child(2){top:108px;right:-24px}
  .tickets i:nth-child(3){top:258px;left:20px}
}
@media(max-width:820px){
  .hero{
    grid-template-columns:1fr;
    min-height:0;
    padding:44px 22px 52px;
    gap:34px;
  }
  .hero::before{clip-path:polygon(0 64%,100% 48%,100% 100%,0 100%);background:linear-gradient(190deg,#9fa1a5 0%,#595b5f 26%,#1a1c1e 70%)}
  .hero h1{font-size:clamp(30px,8.6vw,42px)}
  .hero .lead{margin-bottom:26px;max-width:84%}
  .tickets{justify-self:center;max-width:330px;height:316px;margin-right:0;margin-top:14px}
  .tickets i{width:176px;height:104px;font-size:27px;padding:0 0 11px 13px}
  .tickets i::before{left:13px;bottom:41px;font-size:9px}
  .tickets i::after{width:52px;font-size:5.5px}
  .tickets i:nth-child(1){top:0;left:0}
  .tickets i:nth-child(2){top:76px;right:0}
  .tickets i:nth-child(3){top:190px;left:24px}
}
@media(max-width:400px){
  .tickets{max-width:290px;height:286px}
  .tickets i{width:154px;height:92px;font-size:23px}
  .tickets i::before{bottom:36px;font-size:8px}
  .tickets i:nth-child(2){top:66px}
  .tickets i:nth-child(3){top:152px;left:18px}
}

/* Case à cocher « Masquer le code » */
.card .mask-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  margin:8px 0 0;
  color:var(--muted);
  font-size:12.5px;
  cursor:pointer;
  user-select:none;
}
.card .mask-toggle:hover{color:var(--ink)}
.card .mask-toggle input{
  flex:none;
  width:15px;
  height:15px;
  margin:0;
  padding:0;
  border-radius:4px;
  accent-color:var(--red);
  cursor:pointer;
}
.card .mask-toggle input:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* ---- Formulaire : mise en forme moderne ---- */
#ticket-form.card{
  max-width:660px;
  margin-top:28px;
  padding:26px;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "type amount"
    "email email"
    "code code"
    "help toggle";
  gap:18px;
  border:1px solid #e9eaf0;
  border-radius:20px;
  background:#fff;
  box-shadow:0 1px 2px #0f172a0a,0 30px 65px -42px #0f172a4d;
}
#ticket-form label{
  display:block;
  margin:0;
  color:#3f3f46;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.02em;
}
#ticket-form label[for=type]{grid-area:type}
#ticket-form label[for=amount]{grid-area:amount}
#ticket-form label[for=email]{grid-area:email}
#ticket-form label[for=code]{grid-area:code}
#ticket-form input,#ticket-form select{
  width:100%;
  margin-top:7px;
  padding:13px 14px;
  border:1px solid #e4e4e7;
  border-radius:12px;
  background:#f8fafc;
  color:var(--ink);
  font:inherit;
  font-size:14.5px;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
#ticket-form input:hover,#ticket-form select:hover{border-color:#d4d4d8}
#ticket-form input:focus,#ticket-form select:focus{
  outline:none;
  border-color:var(--red);
  background:#fff;
  box-shadow:0 0 0 4px #dc26261a;
}
#ticket-form input::placeholder{color:#a1a1aa}
#ticket-form input[aria-invalid=true]{
  border-color:#dc2626;
  background:#fff7f7;
  box-shadow:0 0 0 4px #dc262614;
}
#ticket-form select{
  appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  cursor:pointer;
}
#ticket-form .help{
  grid-area:help;
  grid-column:1/-1;
  padding-right:150px;
  margin:0;
  align-self:center;
  color:#71717a;
  font-size:12px;
  line-height:1.45;
}
#ticket-form .mask-toggle{
  grid-row:4;
  grid-column:2;
  justify-self:end;
  align-self:center;
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  color:#52525b;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0;
  cursor:pointer;
  user-select:none;
}
#ticket-form .mask-toggle:hover{color:var(--ink)}
#ticket-form .mask-toggle input{
  appearance:none;
  position:relative;
  flex:none;
  width:36px;
  height:20px;
  margin:0;
  padding:0;
  border:0;
  border-radius:999px;
  background:#d4d4d8;
  cursor:pointer;
  transition:background .18s ease;
}
#ticket-form .mask-toggle input::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px #0f172a40;
  transition:transform .18s ease;
}
#ticket-form .mask-toggle input:checked{background:var(--red);box-shadow:none}
#ticket-form .mask-toggle input:checked::after{transform:translateX(16px)}
#ticket-form .mask-toggle input:focus-visible{outline:2px solid var(--red);outline-offset:2px}
#ticket-form .turnstile-slot{grid-column:1/-1;margin-top:0}
#ticket-form button[type=submit]{
  grid-column:1/-1;
  margin-top:10px;
  padding:14px;
  border-radius:12px;
  background:linear-gradient(#ef4444,#dc2626);
  font-size:15px;
  font-weight:700;
  box-shadow:0 14px 26px -14px #dc2626cc;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
#ticket-form button[type=submit]:hover:not(:disabled){
  background:linear-gradient(#f04a4a,#c81e1e);
  transform:translateY(-1px);
  box-shadow:0 18px 30px -14px #dc2626d9;
}
#ticket-form button[type=submit]:active:not(:disabled){transform:translateY(0)}
#result{
  grid-column:1/-1;
  margin-top:0;
  padding:13px 15px;
  border-radius:12px;
  background:#f0fdf4;
  border:1px solid #bbf7d0;
  font-size:13.5px;
  line-height:1.45;
}
#result:empty{display:none;border:0}
#result[data-tone=ko]{background:#fef2f2;border-color:#fecaca}
@media(max-width:650px){
  #ticket-form.card{
    grid-template-columns:1fr;
    grid-template-areas:"type" "amount" "email" "code" "help" "toggle";
    padding:18px;
    border-radius:16px;
    gap:16px;
  }
  #ticket-form .help{padding-right:0}
  #ticket-form .mask-toggle{grid-area:toggle;justify-self:start}
}