:root{--bg:#f1f4ef;--card:#fff;--ink:#12251a;--mute:#5b6e62;--green:#0b3d21;--grass:#1f7a45;--line:#d6dfd8;--y:#f2c200;--red:#b3261e;color-scheme:light}
@media(prefers-color-scheme:dark){:root{--bg:#0b130e;--card:#14211a;--ink:#e8f0ea;--mute:#9db2a4;--grass:#3aa565;--line:#26402f;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-padding-top:70px}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:16px/1.55 Barlow,system-ui,sans-serif;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
header{position:sticky;top:0;z-index:5;background:var(--green);color:#fff;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:3px solid var(--y)}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brand b{display:block;font:800 21px/1 'Barlow Condensed',sans-serif;letter-spacing:.03em}
.brand small{opacity:.75;font-size:12.5px}
main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:16px}
footer{text-align:center;padding:20px;font-size:14px;color:var(--mute)}
a{color:var(--grass)}
h2{font:800 28px/1.1 'Barlow Condensed',sans-serif;margin:6px 0 12px;letter-spacing:.01em}
/* Accueil */
.hero{position:relative;overflow:hidden;background:var(--green);color:#fff;border-radius:14px;padding:30px 22px 26px;margin-bottom:16px}
.hero:before{content:"";position:absolute;right:-70px;top:50%;width:260px;height:260px;margin-top:-130px;border:3px solid #ffffff26;border-radius:50%}
.hero:after{content:"";position:absolute;right:59px;top:0;bottom:0;width:3px;background:#ffffff26}
.hero>*{position:relative;z-index:1}
.hero h1{font:800 clamp(36px,9vw,56px)/.98 'Barlow Condensed',sans-serif;margin:0 0 12px;max-width:12em}
.hero p{margin:0 0 18px;max-width:32em;opacity:.88;font-size:17px}
.hero .btn{margin:0 8px 0 0}
.hero .btn.sec{color:#fff;border-color:#ffffff66}
.steps{display:grid;gap:10px;margin:0 0 16px;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px 12px 54px;position:relative}
.steps li:before{content:counter(s);position:absolute;left:12px;top:10px;width:30px;height:30px;border-radius:50%;background:var(--y);color:#1a1500;font:800 18px/30px 'Barlow Condensed',sans-serif;text-align:center}
.steps b{display:block}
/* Contenu */
nav{display:flex;gap:2px;border-bottom:2px solid var(--line);margin-bottom:16px;overflow-x:auto}
nav button{background:none;border:0;padding:11px 14px;font:600 15px Barlow,sans-serif;color:var(--mute);border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer;white-space:nowrap}
nav button.on{color:var(--ink);border-color:var(--y)}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.card.match{border-left:5px solid var(--grass)}
.row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.date{font:700 21px/1.2 'Barlow Condensed',sans-serif;text-transform:capitalize}
.tag{display:inline-block;background:var(--grass);color:#fff;border-radius:4px;padding:0 8px;font-weight:600;font-size:14px;margin:0 6px 2px 0}
.tag.f{background:var(--mute)}
.mute{color:var(--mute);font-size:14px}
label{display:block;font-weight:600;font-size:14px;margin:10px 0 4px}
input,select,textarea{width:100%;padding:11px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:inherit}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.btn{background:var(--y);color:#1a1500;border:0;border-radius:8px;padding:11px 18px;font:700 15px Barlow,sans-serif;cursor:pointer;margin-top:12px;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(1.06)}
.btn.sec{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.no{background:transparent;color:var(--red);border:1px solid var(--red)}
.btn.sm{padding:7px 13px;margin:0}
.btn:disabled{opacity:.5;cursor:wait}
header .btn{margin:0}
:focus-visible{outline:3px solid var(--y);outline-offset:2px}
.msg{padding:10px 12px;border-radius:8px;margin:10px 0;background:#fff1b8;color:#3a3000}
.err{background:#fde3e1;color:#7a1510}
.st{font-weight:600}.st.accepted{color:var(--grass)}.st.declined{color:var(--red)}
.empty{text-align:center;color:var(--mute);padding:28px 8px}
.day{font:700 15px 'Barlow Condensed',sans-serif;color:var(--mute);margin:18px 2px 8px;letter-spacing:.04em}
@media(max-width:480px){.hero:after,.hero:before{opacity:.5}.grid{grid-template-columns:1fr}.row{flex-direction:column}.row>.btn{width:100%}}
@media(prefers-reduced-motion:no-preference){.hero{animation:in .5s ease-out}@keyframes in{from{opacity:0;transform:translateY(6px)}}}