/* Hygie Race 4 — feuille de style partagée (Accueil / Accès anticipé / Leaderboard) */
:root{
  --blue:#1800AD; --white:#fff;
  --soft:rgba(255,255,255,.66); --soft2:rgba(255,255,255,.44); --hair:rgba(255,255,255,.26);
  --fill:rgba(255,255,255,.07);
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--blue);}
body{font-family:'Archivo',Helvetica,Arial,sans-serif;color:var(--white);-webkit-font-smoothing:antialiased;
  position:relative;min-height:100vh;background-color:var(--blue);
  background-image:repeating-linear-gradient(48deg,rgba(255,255,255,.035) 0 1.5px,transparent 1.5px 11px);}

/* Cadre à repères — non flottant */
.frame{position:absolute;top:13px;left:13px;right:13px;bottom:13px;border:2px solid rgba(255,255,255,.4);border-radius:5px;pointer-events:none;z-index:8;}
.frame i{position:absolute;width:16px;height:16px;}
.frame i::before,.frame i::after{content:'';position:absolute;background:#fff;}
.frame i::before{width:16px;height:2px;top:-1px;} .frame i::after{height:16px;width:2px;left:-1px;}
.frame .tl{top:-2px;left:-2px;} .frame .tr{top:-2px;right:-2px;transform:scaleX(-1);}
.frame .bl{bottom:-2px;left:-2px;transform:scaleY(-1);} .frame .br{bottom:-2px;right:-2px;transform:scale(-1);}

/* Menu de navigation entre pages (collant) */
.nav{position:sticky;top:0;z-index:20;background:var(--blue);border-bottom:1.5px solid var(--hair);}
.nav ul{display:flex;justify-content:space-between;align-items:center;max-width:560px;margin:0 auto;padding:15px 24px;list-style:none;}
.nav a{font-weight:900;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--soft2);text-decoration:none;transition:color .15s;white-space:nowrap;}
.nav a:hover,.nav a.active{color:#fff;}
.nav a.active{border-bottom:2px solid #fff;padding-bottom:3px;}

.wrap{max-width:580px;margin:0 auto;padding:40px 28px 80px;position:relative;z-index:2;}

/* Hero */
.logo-wrap{margin:6px auto 34px;text-align:center;}
.logo{display:block;width:340px;max-width:88%;margin:0 auto;}
.hero{text-align:center;}
.stamp{display:inline-block;font-family:'Permanent Marker',cursive;font-size:14px;letter-spacing:1px;color:#fff;
  border:2px solid #fff;border-radius:10px;padding:5px 14px;transform:rotate(-4deg);margin:0 0 22px;opacity:.92;}
.kicker{margin:0 0 16px;font-weight:800;font-size:11px;letter-spacing:6px;color:var(--soft);text-transform:uppercase;}
h1{margin:0;font-weight:900;font-style:italic;font-size:clamp(46px,14vw,76px);line-height:.86;text-transform:uppercase;letter-spacing:-2px;}
.scribble{display:block;width:min(300px,78%);height:16px;margin:8px auto 0;overflow:visible;}
.scribble path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;}
.meta{display:flex;justify-content:center;align-items:center;white-space:nowrap;flex-wrap:wrap;margin:28px 0 0;
  font-weight:800;font-size:clamp(11px,3.1vw,14px);letter-spacing:1px;text-transform:uppercase;}
.meta .slash{color:var(--soft2);margin:0 .6em;font-style:italic;font-weight:900;}
.cta{display:inline-block;background:#fff;color:var(--blue);border-radius:999px;padding:19px 34px;
  font-weight:900;font-style:italic;font-size:16px;text-transform:uppercase;letter-spacing:.5px;text-decoration:none;
  box-shadow:0 14px 34px rgba(0,0,0,.30);transition:transform .12s,box-shadow .12s;border:0;cursor:pointer;font-family:'Archivo';}
.cta:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.36);}
.cta .arrow{margin-left:9px;font-style:normal;font-weight:800;display:inline-block;}
.cta-wrap{margin:30px 0 12px;text-align:center;}
.presale{margin:0;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--soft);text-align:center;}
.presale b{color:#fff;}
.limit{margin:44px 0 18px;text-align:center;font-family:'Permanent Marker',cursive;font-size:clamp(38px,12.5vw,64px);line-height:.92;
  text-transform:uppercase;color:#fff;transform:rotate(-2.5deg);text-shadow:4px 4px 0 rgba(255,255,255,.20);}

hr.sep{border:0;border-top:2px solid var(--hair);margin:56px 0;}

.sec{display:flex;align-items:center;gap:12px;margin:0 0 24px;}
.sec .num{font-style:italic;font-weight:900;font-size:14px;border:2px solid #fff;border-radius:7px;padding:3px 9px;line-height:1;}
.sec .lbl{font-weight:900;font-size:14px;letter-spacing:3px;text-transform:uppercase;}
.sec::after{content:'';flex:1;height:2px;background:var(--hair);}
.intro{margin:0 0 28px;font-size:15.5px;line-height:1.7;color:var(--soft);}
.intro strong{color:#fff;font-weight:800;}

.stats{display:flex;gap:12px;margin:0 0 30px;}
.stat{flex:1;border:2px solid var(--hair);border-radius:14px;padding:18px 8px;text-align:center;}
.stat b{display:block;font-weight:900;font-style:italic;font-size:clamp(20px,6vw,26px);line-height:1;}
.stat span{display:block;margin-top:7px;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--soft2);}

.wod{list-style:none;padding:0;margin:0;}
.wod li{display:flex;align-items:center;gap:16px;padding:17px 2px;border-bottom:1.5px solid var(--hair);}
.wod li:first-child{border-top:1.5px solid var(--hair);}
.wod .rep{font-weight:900;font-style:italic;font-size:20px;min-width:78px;letter-spacing:-.5px;}
.wod .mv{font-weight:600;font-size:15px;line-height:1.35;}
.callout{border-left:4px solid #fff;background:rgba(255,255,255,.10);border-radius:10px;padding:17px 19px;margin:24px 0 0;
  font-size:13.5px;font-weight:600;line-height:1.6;}
.callout b{font-weight:900;font-style:italic;}

.cats{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:430px){.cats{grid-template-columns:1fr;}}
.cat{border:2px solid var(--hair);border-radius:15px;padding:19px 17px;transition:transform .15s,border-color .15s,background .15s;}
.cat:hover{transform:translateY(-3px);border-color:#fff;background:var(--fill);}
.cat .code{font-weight:900;font-style:italic;font-size:23px;letter-spacing:-.5px;}
.cat .tag{display:inline-block;margin-left:7px;font-size:9.5px;font-weight:900;letter-spacing:1px;text-transform:uppercase;
  border:1.5px solid var(--soft2);border-radius:999px;padding:2px 8px;vertical-align:middle;color:var(--soft);}
.cat .tag.pro{border-color:#fff;color:#fff;}
.cat .desc{margin:9px 0 0;font-size:12.5px;line-height:1.5;color:var(--soft);}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:2px 0 0;border-radius:12px;}
table{border-collapse:collapse;width:100%;min-width:472px;}
th,td{padding:14px 12px;text-align:center;border-bottom:1.5px solid var(--hair);font-size:14px;white-space:nowrap;}
th{font-weight:900;text-transform:uppercase;letter-spacing:.8px;font-size:10.5px;color:var(--soft);}
th:first-child,td:first-child{text-align:left;}
td.c{font-weight:900;font-style:italic;font-size:15px;}
tbody tr:last-child td{border-bottom:0;}
.tnote{margin:14px 2px 0;font-size:12px;color:var(--soft2);line-height:1.6;}

input[type=text],input[type=email],input[type=tel]{width:100%;border:1.6px solid var(--hair);border-radius:12px;padding:16px;
  font:inherit;font-size:15px;font-weight:600;color:#fff;background:var(--fill);transition:border-color .15s,background .15s;}
input::placeholder{font-weight:500;color:rgba(255,255,255,.5);}
input:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.15);}
input:-webkit-autofill{-webkit-text-fill-color:#fff;transition:background-color 9999s;}
.field{margin:0 0 12px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:430px){.grid2{grid-template-columns:1fr;}}

.btn{display:block;text-align:center;width:100%;border:0;background:#fff;color:var(--blue);border-radius:999px;padding:20px 24px;
  margin-top:18px;font-family:'Archivo';font-weight:900;font-style:italic;font-size:16px;line-height:1.15;text-transform:uppercase;
  letter-spacing:.5px;cursor:pointer;box-shadow:0 14px 34px rgba(0,0,0,.30);transition:transform .12s,box-shadow .12s;}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.36);}
.btn:disabled{opacity:.55;box-shadow:none;cursor:default;transform:none;}
.btn .arrow{margin-left:8px;font-style:normal;font-weight:800;display:inline-block;}
.note{margin:18px 4px 0;font-size:12px;color:var(--soft2);line-height:1.7;text-align:center;}

.banner{display:none;border-left:4px solid #fff;background:rgba(255,255,255,.12);color:#fff;border-radius:10px;
  padding:15px 17px;font-size:13.5px;font-weight:700;line-height:1.5;margin:8px 0 4px;}
.banner.show{display:block;}

.hide{display:none;}
.thanks{text-align:center;padding:14px 0;}
.thanks h1{font-size:clamp(44px,13vw,64px);margin:0 0 16px;}
.thanks .sub{margin:0 auto 28px;max-width:430px;font-size:15.5px;line-height:1.6;color:var(--soft);}
.recap{border:2px solid var(--hair);border-radius:14px;padding:22px;margin:0 0 8px;font-size:14.5px;line-height:1.9;text-align:center;}
.recap .big{display:block;font-weight:900;font-style:italic;font-size:19px;text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px;}

/* Bloc « bientôt » (leaderboard) */
.soon{text-align:center;padding:30px 0 10px;}
.soon .badge{display:inline-block;font-family:'Permanent Marker',cursive;font-size:15px;letter-spacing:1px;color:#fff;
  border:2px solid #fff;border-radius:12px;padding:7px 18px;transform:rotate(-3deg);margin:0 0 26px;}
.soon h1{font-size:clamp(40px,12vw,60px);margin:0 0 18px;}
.soon p{margin:0 auto;max-width:420px;font-size:15.5px;line-height:1.7;color:var(--soft);}

.foot{text-align:center;padding:56px 22px 6px;font-size:12px;line-height:1.7;color:var(--soft2);}
.foot a{color:#fff;text-decoration:none;font-weight:700;border-bottom:1.5px solid var(--hair);}

/* Sélecteur de division + champs inscription */
.divisions{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:0 0 6px;}
.divopt{position:relative;display:block;border:2px solid var(--hair);border-radius:14px;padding:16px 15px;cursor:pointer;transition:border-color .15s,background .15s,transform .12s;}
.divopt input{position:absolute;opacity:0;width:0;height:0;}
.divopt .dn{display:block;font-weight:900;font-style:italic;font-size:18px;letter-spacing:-.3px;}
.divopt .dp{display:block;margin-top:5px;font-size:12px;font-weight:700;color:var(--soft);letter-spacing:.3px;}
.divopt:hover{border-color:var(--soft);}
.divopt.on{border-color:#fff;background:var(--fill);}
.divopt:has(input:checked){border-color:#fff;background:var(--fill);}
select{width:100%;border:1.6px solid var(--hair);border-radius:12px;padding:16px;font:inherit;font-size:15px;font-weight:600;color:#fff;
  background-color:var(--fill);appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;}
select:focus{outline:none;border-color:#fff;}
select:invalid{color:rgba(255,255,255,.5);}
select option{color:#111;background:#fff;}
input[type=date]{width:100%;border:1.6px solid var(--hair);border-radius:12px;padding:16px;font:inherit;font-size:15px;font-weight:600;
  color:#fff;background:var(--fill);color-scheme:dark;transition:border-color .15s,background .15s;}
input[type=date]:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.15);}
.athlete{border:2px solid var(--hair);border-radius:16px;padding:18px 16px;margin:0 0 14px;}
.athlete .ah{font-weight:900;font-style:italic;font-size:15px;text-transform:uppercase;letter-spacing:1px;margin:0 0 14px;color:#fff;}
.rules{border:2px solid var(--hair);border-radius:14px;padding:18px;margin:6px 0 4px;}
.rules.err{border-color:#fff;background:rgba(255,255,255,.10);}
.rules label{display:flex;gap:14px;cursor:pointer;align-items:flex-start;}
.rules input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:#fff;cursor:pointer;}
.rules .txt{font-size:13px;line-height:1.55;color:var(--soft);}
.rules .txt a{color:#fff;font-weight:700;}
.price-tag{text-align:center;margin:4px 0 0;font-weight:900;font-style:italic;font-size:15px;letter-spacing:.5px;}

/* ══ Animations (coupées si prefers-reduced-motion) ══ */
@media (prefers-reduced-motion: no-preference){
  body{animation:drift 26s linear infinite;}
  @keyframes drift{from{background-position:0 0;}to{background-position:190px 0;}}
  .anim{opacity:0;transform:translateY(20px);animation:rise .8s cubic-bezier(.18,.7,.2,1) forwards;}
  @keyframes rise{to{opacity:1;transform:none;}}
  .logo{animation:float 5.5s ease-in-out .9s infinite;}
  @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
  .stamp{animation:wob 3.4s ease-in-out infinite;}
  @keyframes wob{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(-1.5deg);}}
  .limit{animation:limitpulse 2.6s ease-in-out infinite;}
  @keyframes limitpulse{0%,100%{transform:rotate(-2.5deg) scale(1);}50%{transform:rotate(-2.5deg) scale(1.05);}}
  .scribble path{stroke-dasharray:330;stroke-dashoffset:330;animation:draw 1s ease .95s forwards;}
  @keyframes draw{to{stroke-dashoffset:0;}}
  .cta .arrow,.btn .arrow{animation:nudge 1.5s ease-in-out infinite;}
  @keyframes nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(5px);}}
  body.js-anim .reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .65s cubic-bezier(.18,.7,.2,1);}
  body.js-anim .reveal.in{opacity:1;transform:none;}
  body.js-anim .reveal .wod li{opacity:0;transform:translateX(-12px);transition:opacity .5s ease,transform .5s ease;}
  body.js-anim .reveal.in .wod li{opacity:1;transform:none;}
  body.js-anim .reveal.in .wod li:nth-child(1){transition-delay:.05s;}
  body.js-anim .reveal.in .wod li:nth-child(2){transition-delay:.11s;}
  body.js-anim .reveal.in .wod li:nth-child(3){transition-delay:.17s;}
  body.js-anim .reveal.in .wod li:nth-child(4){transition-delay:.23s;}
  body.js-anim .reveal.in .wod li:nth-child(5){transition-delay:.29s;}
  body.js-anim .reveal.in .wod li:nth-child(6){transition-delay:.35s;}
  body.js-anim .reveal.in .wod li:nth-child(7){transition-delay:.41s;}
  body.js-anim .reveal.in .wod li:nth-child(8){transition-delay:.47s;}
  body.js-anim .reveal .cat{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;}
  body.js-anim .reveal.in .cat{opacity:1;transform:none;}
  body.js-anim .reveal.in .cat:nth-child(2){transition-delay:.07s;}
  body.js-anim .reveal.in .cat:nth-child(3){transition-delay:.14s;}
  body.js-anim .reveal.in .cat:nth-child(4){transition-delay:.21s;}
  body.js-anim .reveal.in .cat:nth-child(5){transition-delay:.28s;}
}