/* HYROX 100 POURCENT — 17 & 18 octobre 2026 */
:root{
  --cream:#F4F1E6; --ink:#111111; --yellow:#F4D300;
  --grey:#6B6B63; --line:#DCD7C6; --white:#fff;
  --ok:#0E6B45; --warn:#9A3412;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:0 16px}

/* ---------- typographie ---------- */
h1,h2,h3{font-family:"Anton",Impact,"Arial Narrow",sans-serif; font-weight:400;
  letter-spacing:.01em; line-height:1.03; text-transform:uppercase; margin:0}
h1{font-size:clamp(2.1rem,7vw,4.2rem)}
h2{font-size:clamp(1.5rem,4vw,2.4rem)}
h3{font-size:clamp(1.05rem,2.4vw,1.35rem)}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.kicker{font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--grey); margin:0 0 10px}
.lead{font-size:1.08rem; max-width:62ch}
.muted{color:var(--grey)}
.small{font-size:.9rem}

/* ---------- barre de nav ---------- */
header.nav{position:sticky; top:0; z-index:50; background:var(--ink); color:var(--white)}
.nav-in{max-width:var(--max); margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:14px}
.nav-logo{display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto}
.nav-logo img{height:38px; width:auto}
.nav-logo span{font-family:"Anton",sans-serif; font-size:.95rem; line-height:1;
  letter-spacing:.02em; text-transform:uppercase}
.nav-links{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap}
.nav-links a{font-family:"IBM Plex Mono",monospace; font-size:.76rem; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none; color:#D9D9D2;
  padding:8px 11px; border-radius:6px}
.nav-links a:hover{background:#262626; color:var(--white)}
.nav-links a[aria-current="page"]{background:var(--yellow); color:var(--ink); font-weight:600}
@media(max-width:640px){
  .nav-in{flex-wrap:wrap; gap:8px}
  .nav-links{margin-left:0; width:100%; justify-content:flex-start;
    overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px}
  .nav-links a{white-space:nowrap}
  .nav-logo span{font-size:.85rem}
}

/* ---------- hero ---------- */
.hero{background:var(--ink); color:var(--white); padding:52px 0 60px; text-align:center}
.hero img.mark{height:132px; width:auto; margin:0 auto 22px}
.hero h1{color:var(--white)}
.hero h1 em{font-style:normal; color:var(--yellow)}
.hero .dates{font-family:"IBM Plex Mono",monospace; font-size:clamp(.85rem,2.4vw,1.05rem);
  letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); margin:16px 0 6px}
.hero .place{color:#B9B9B1; font-size:.95rem; margin:0}

/* compte à rebours */
.cd{display:flex; gap:10px; justify-content:center; margin:26px 0 4px; flex-wrap:wrap}
.cd div{background:#1D1D1D; border:1px solid #333; border-radius:10px;
  padding:10px 14px; min-width:74px}
.cd b{display:block; font-family:"Anton",sans-serif; font-size:1.7rem; line-height:1.1; color:var(--yellow)}
.cd span{font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:#9A9A92}

/* ---------- sections ---------- */
section{padding:52px 0; border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
section.dark{background:var(--ink); color:var(--white); border-top:0}
section.dark h2{color:var(--white)}
section.dark .kicker{color:var(--yellow)}
section.dark .muted{color:#A8A8A0}
.sec-head{margin-bottom:26px}

/* ---------- cartes ---------- */
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(186px,1fr))}
.card{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:20px}
.card h3{margin-bottom:8px}
.card p:last-child{margin-bottom:0}
section.dark .card{background:#1B1B1B; border-color:#333}
.card.accent{border-left:5px solid var(--yellow)}

/* ---------- boutons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; justify-content:center;
  background:var(--ink); color:var(--white); text-decoration:none;
  font-family:"IBM Plex Mono",monospace; font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600;
  padding:14px 22px; border-radius:10px; border:2px solid var(--ink); cursor:pointer}
.btn:hover{background:#000; border-color:#000}
.btn.y{background:var(--yellow); color:var(--ink); border-color:var(--yellow)}
.btn.y:hover{background:#E0C200; border-color:#E0C200}
.btn.ghost{background:transparent; color:var(--ink)}
section.dark .btn.ghost,.hero .btn.ghost{color:var(--white); border-color:var(--white)}
section.dark .btn.ghost:hover,.hero .btn.ghost:hover{background:#fff;color:var(--ink)}
.btn[disabled],.btn.off{opacity:.45; pointer-events:none}
.btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

/* ---------- listes ---------- */
ul.check{list-style:none; padding:0; margin:0}
ul.check li{position:relative; padding:7px 0 7px 30px; border-bottom:1px solid var(--line)}
ul.check li:last-child{border-bottom:0}
ul.check li::before{content:""; position:absolute; left:2px; top:15px;
  width:13px; height:13px; border:2px solid var(--ink); border-radius:3px}
ul.no li::before{border-color:var(--warn); background:var(--warn)}
ul.plain{margin:0; padding-left:20px}
ul.plain li{margin:5px 0}

/* ---------- tableaux horaires ---------- */
.tools{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px}
.tools input,.tools select{font:inherit; font-size:.95rem; padding:12px 14px;
  border:1px solid var(--line); border-radius:10px; background:var(--white); color:var(--ink)}
.tools input{flex:1 1 260px; min-width:0}
table{width:100%; border-collapse:collapse; background:var(--white);
  border:1px solid var(--line); border-radius:12px; overflow:hidden}
th{background:var(--ink); color:var(--white); text-align:left;
  font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; padding:11px 12px}
td{padding:11px 12px; border-top:1px solid var(--line); vertical-align:top}
tr:nth-child(even) td{background:#FBF9F2}
td.h{font-family:"IBM Plex Mono",monospace; font-weight:600; white-space:nowrap}
td.num{font-family:"Anton",sans-serif; font-size:1.15rem; line-height:1.2;
  font-variant-numeric:tabular-nums; white-space:nowrap; width:1%}
td.n{font-weight:600}
.tag{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.62rem;
  letter-spacing:.08em; text-transform:uppercase; padding:3px 8px;
  border-radius:999px; color:var(--white); white-space:nowrap}
mark{background:var(--yellow); color:var(--ink); padding:0 2px; border-radius:2px}
.empty{padding:26px; text-align:center; color:var(--grey)}
.tabs{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap}
.tabs button{font:inherit; font-family:"IBM Plex Mono",monospace; font-size:.76rem;
  letter-spacing:.1em; text-transform:uppercase; padding:11px 16px; cursor:pointer;
  background:var(--white); border:1px solid var(--line); border-radius:10px; color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--ink); color:var(--white); border-color:var(--ink)}
@media(max-width:560px){
  table,thead,tbody,tr,td{display:block; width:100%}
  thead{display:none}
  table{border:0; background:transparent}
  tr{background:var(--white); border:1px solid var(--line); border-radius:12px;
     margin-bottom:10px; padding:12px 14px}
  tr:nth-child(even) td{background:transparent}
  td{border:0; padding:3px 0}
  td::before{content:attr(data-l); display:block; font-family:"IBM Plex Mono",monospace;
    font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--grey)}
}

/* ---------- formulaire ---------- */
form.up{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:22px}
.field{margin-bottom:16px}
.field label{display:block; font-family:"IBM Plex Mono",monospace; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--grey); margin-bottom:6px}
.field input,.field select,.field textarea{width:100%; font:inherit; padding:12px 14px;
  border:1px solid var(--line); border-radius:10px; background:var(--cream); color:var(--ink)}
.field input[type=file]{padding:10px; background:var(--white)}
.field .hint{font-size:.83rem; color:var(--grey); margin-top:6px}
.hp{position:absolute; left:-9999px}

/* ---------- galerie photos ---------- */
.gal{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.gal a{display:block; border-radius:10px; overflow:hidden; border:1px solid var(--line);
  background:var(--white); aspect-ratio:1/1}
.gal img{width:100%; height:100%; object-fit:cover}

/* ---------- partenaires ---------- */
.parts{display:flex; gap:26px; flex-wrap:wrap; justify-content:center; align-items:center;
  margin-top:22px; max-width:880px; margin-left:auto; margin-right:auto}
.parts .p{background:var(--white); color:var(--ink); border:1px solid var(--line); border-radius:12px;
  padding:16px 22px; min-width:150px; min-height:116px; text-align:center;
  display:flex; align-items:center; justify-content:center}
.parts .p img{max-height:80px; max-width:200px; width:auto; height:auto;
  object-fit:contain; margin:0 auto; display:block}
.parts .p span{font-family:"IBM Plex Mono",monospace; font-size:.8rem}
.parts.principal .p{min-height:150px; padding:20px 28px}
.parts.principal .p img{max-height:110px; max-width:300px}

/* vidéo de reconnaissance du parcours */
.video{max-width:420px; margin:28px auto 0; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:#000; line-height:0;
  box-shadow:0 6px 28px rgba(0,0,0,.10)}
.video video{width:100%; height:auto; display:block; max-height:74vh}

/* bande des partenaires — défilement manuel */
.swipe{position:relative; margin-top:30px}
.swipe-rail{display:flex; gap:22px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:4px 2px 4px; scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch}
.swipe-rail::-webkit-scrollbar{display:none}
.swipe-rail:focus-visible{outline:2px solid var(--yellow); outline-offset:4px; border-radius:14px}
.swipe-rail .p{flex:0 0 auto; scroll-snap-align:center;
  background:var(--white); color:var(--ink); border:1px solid var(--line);
  border-radius:12px; padding:16px 22px; min-width:150px; min-height:116px;
  display:flex; align-items:center; justify-content:center}
.swipe-rail .p img{max-height:80px; max-width:200px; width:auto; height:auto;
  object-fit:contain; display:block}
.swipe-rail .p span{font-family:"IBM Plex Mono",monospace; font-size:.8rem}
.swipe-hint{text-align:center; margin-top:14px}
.swipe-nav{display:none}
@media (min-width:900px){
  .swipe-nav{display:flex; position:absolute; top:50%; transform:translateY(-50%);
    width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
    background:var(--white); color:var(--ink); align-items:center; justify-content:center;
    font-size:1.5rem; line-height:1; cursor:pointer; z-index:2; padding:0 0 3px;
    box-shadow:0 2px 10px rgba(0,0,0,.08)}
  .swipe-nav:hover:not(:disabled){border-color:var(--yellow)}
  .swipe-nav:disabled{opacity:.25; cursor:default; box-shadow:none}
  .swipe-nav.prev{left:-18px} .swipe-nav.next{right:-18px}
  .swipe.sans-debord .swipe-nav{display:none}
  .swipe.sans-debord ~ .swipe-hint, .swipe.sans-debord + .swipe-hint{display:none}
}

/* ---------- pied de page ---------- */
footer{background:var(--ink); color:#A8A8A0; padding:40px 0 28px; font-size:.9rem}
footer a{color:var(--yellow)}
footer .cols{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-bottom:24px}
footer h4{font-family:"Anton",sans-serif; font-weight:400; text-transform:uppercase;
  color:var(--white); font-size:.95rem; letter-spacing:.04em; margin:0 0 9px}
footer .bot{border-top:1px solid #2E2E2E; padding-top:16px; font-size:.8rem}

/* ---------- divers ---------- */
.note{background:#FFF8D6; border:1px solid #E8D97A; border-radius:12px; padding:14px 16px; font-size:.93rem}
.stat{text-align:center}
.stat b{display:block; font-family:"Anton",sans-serif; font-size:2.3rem; line-height:1.05}
.stat span{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--grey)}
section.dark .stat span{color:#9A9A92}
details.faq{background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; margin-bottom:10px}
details.faq summary{cursor:pointer; font-weight:600; list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"+ "; color:var(--grey); font-family:"IBM Plex Mono",monospace}
details.faq[open] summary::before{content:"– "}
details.faq p{margin:10px 0 0}

/* pastille bracelet (page horaires) */
.brac{display:inline-flex; align-items:center; gap:7px; font-family:"IBM Plex Mono",monospace;
  font-size:.78rem; font-weight:600; white-space:nowrap}
.brac i{width:13px; height:13px; border-radius:50%; display:inline-block; flex:0 0 auto;
  box-shadow:0 0 0 2px var(--white), 0 0 0 3px var(--line)}
/* bloc bracelets */
.bracelets{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:22px}
.bracelets .card{border-top:6px solid var(--ink); padding-top:16px}
.bracelets .card .brac{font-size:1rem; margin-bottom:8px}
.bracelets .card .brac i{width:18px; height:18px}
.bracelets .card .sled{font-family:"Anton",sans-serif; font-size:1.7rem; line-height:1; margin:6px 0 4px}

/* plan de la salle */
.plan-link{display:block; margin-top:26px; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  background:var(--white); box-shadow:0 6px 28px rgba(0,0,0,.10); line-height:0}
.plan-link img{width:100%; height:auto; display:block}

/* statut décharge — page horaires */
.dech{display:inline-block;font-size:.78rem;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap;line-height:1.5}
.dech.ok{background:#DCFCE7;color:#14532D}
.dech.ko{background:#FEE2E2;color:#991B1B}