/* ================================================================
   ID20 — charte graphique partagée (thème navy + or, dérivé du logo).
   Source unique pour toutes les pages. Adaptée de la maquette R&A/ID20.
   ================================================================ */
:root{
  /* palette (violet profond « navy » + or, sur fond crème) */
  --ra-navy:#2c2350; --ra-navy-900:#191231; --ra-navy-800:#221a41; --ra-navy-700:#2c2350;
  --ra-navy-600:#3c3168; --ra-navy-500:#514584; --ra-navy-400:#7269a3; --ra-navy-300:#a29ac4;
  --ra-navy-200:#d0cbe2; --ra-navy-100:#ebe9f3; --ra-navy-050:#f5f4f9;
  --ra-orange:#eab429; --ra-orange-700:#8f6a0a; --ra-orange-600:#c08f12; --ra-orange-500:#eab429;
  --ra-orange-400:#f3c74f; --ra-orange-300:#f8da85; --ra-orange-200:#fbe9ba; --ra-orange-100:#fdf3d8; --ra-orange-050:#fefaee;
  --ra-charcoal-900:#171224; --ra-charcoal-800:#262038; --ra-charcoal-700:#37304d; --ra-charcoal-600:#4c4562;
  --ra-charcoal-500:#655e79; --ra-charcoal-400:#8d879e; --ra-charcoal-300:#b8b4c5; --ra-charcoal-200:#d9d7e1; --ra-charcoal-100:#edecf2;
  --ra-cream:#f1f0f6; --ra-cream-deep:#e8e6f0; --ra-paper:#fafafd;
  --border-subtle:#e5e3ee; --border-default:#d9d6e4;

  --text-heading:#191231; --text-body:#37304d; --text-muted:#8d879e; --text-on-orange:#2c2350;
  --surface-page:#fafafd; --surface-card:#ffffff;

  --font-display:"Bricolage Grotesque", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body); color:var(--text-body); background:var(--ra-cream);
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
h1,h2,h3{font-family:var(--font-display); font-weight:800; margin:0; letter-spacing:-.02em; color:var(--ra-navy)}
a{color:var(--ra-navy); text-decoration:none}
a:hover{color:var(--ra-orange-600)}
::selection{background:var(--ra-orange-200)}
img{max-width:100%}
.wrap{max-width:1160px; margin:0 auto; padding:0 28px}
.mono{font-family:"DM Mono", ui-monospace, monospace}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@keyframes ra-spin{to{transform:rotate(360deg)}}
/* Mouvement réduit : on coupe les animations décoratives + transitions,
   mais on garde le spinner de chargement (.spin), qui reste un indicateur utile. */
@media (prefers-reduced-motion:reduce){ *:not(.spin){animation:none!important} *{transition:none!important} }

/* ---------- composants réutilisables (remplacent le design system) ---------- */
.eyebrow{display:inline-block; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--ra-navy)}
.eyebrow.orange{color:var(--ra-orange-600)} .eyebrow.muted{color:var(--text-muted)}
.eyebrow.rule::after{content:""; display:inline-block; width:34px; height:2px; background:currentColor; opacity:.4; margin-left:12px; vertical-align:middle}
.eyebrow.lead::before{content:""; display:inline-block; width:34px; height:2px; background:currentColor; opacity:.6; margin-right:12px; vertical-align:middle}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font:inherit; font-weight:700;
  font-size:15px; line-height:1; padding:0 22px; height:44px; border-radius:999px; border:1.5px solid transparent;
  background:var(--ra-navy); color:#fff; cursor:pointer; transition:.16s; text-decoration:none}
.btn:hover{background:var(--ra-navy-600); color:#fff}
.btn.lg{height:48px; padding:0 26px; font-size:16px}
.btn.sm{height:38px; padding:0 16px; font-size:13.5px}
.btn.orange{background:var(--ra-orange); color:var(--text-on-orange)} .btn.orange:hover{background:var(--ra-orange-400)}
.btn.outline{background:none; border-color:var(--border-default); color:var(--ra-navy)} .btn.outline:hover{background:var(--ra-navy-050)}
.btn.ghost{background:none; color:var(--text-muted)} .btn.ghost:hover{background:var(--ra-cream); color:var(--ra-navy)}
.btn.arrow::after{content:"→"; font-weight:600}
.btn svg{width:16px; height:16px; flex:none}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--ra-orange); outline-offset:2px}

.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:4px 11px; border-radius:999px; background:var(--ra-navy-100); color:var(--ra-navy)}
.badge.orange{background:var(--ra-orange); color:var(--text-on-orange)}
.badge.navy{background:var(--ra-navy); color:#fff}
.badge.soft{background:var(--ra-navy-050); color:var(--ra-navy-500); text-transform:none; letter-spacing:0; font-weight:600}
.badge.sys{background:var(--ra-orange-100); color:var(--ra-orange-700); text-transform:uppercase; letter-spacing:.06em; border-radius:8px; font-weight:700}

.card{background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:18px; padding:24px;
  box-shadow:0 1px 2px rgba(4,22,52,.04), 0 8px 24px rgba(4,22,52,.05)}
.card.warm{background:var(--ra-orange-050); border-color:var(--ra-orange-200)}
.card.navy{background:var(--ra-navy); border-color:transparent; color:#fff}
.card.orange{background:var(--ra-orange); border-color:transparent; color:var(--text-on-orange)}

/* ---------- barre du haut (injectée par site.js) ---------- */
.topbar{position:sticky; top:0; z-index:60; background:rgba(250,250,253,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-subtle)}
.topbar .wrap{display:flex; align-items:center; gap:24px; padding:12px 28px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand .d20{width:44px; height:44px; color:var(--ra-navy); flex:none}
.brand .t b{display:block; font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--ra-navy); letter-spacing:-.01em; line-height:1.1}
.brand .t span{font-size:12.5px; color:var(--text-muted)}
.nav{margin-left:auto; display:flex; align-items:center; gap:24px}
.nav a.navlink{font-size:15px; font-weight:600; color:var(--ra-charcoal-700); text-decoration:none}
.nav a.navlink:hover,.nav a.navlink[aria-current="page"]{color:var(--ra-orange-600)}
#account-slot{display:flex; align-items:center}
@media (max-width:820px){ .nav a.navlink{display:none} }

/* ---------- hero accueil ---------- */
.hero{background:var(--ra-cream); overflow:hidden}
.hero .wrap{padding:76px 28px 72px; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
.hero h1{font-size:clamp(40px,5.2vw,64px); line-height:1.05; margin:20px 0 0; text-wrap:balance}
.hero .lead{font-size:19px; line-height:1.65; color:var(--text-body); margin:22px 0 0; max-width:54ch}
.hero .lead.sm{font-size:17px; margin-top:14px}
.hero b{color:var(--text-heading)}
.hero-actions{display:flex; align-items:center; gap:14px; margin-top:32px; flex-wrap:wrap}
.hero-visual{position:relative; display:flex; justify-content:center; align-items:center; min-height:360px}
.hero-visual .disc{position:absolute; width:380px; height:380px; border-radius:50%; background:var(--ra-navy)}
.hero-visual .d20{position:relative; width:280px; height:280px; color:#fff; filter:drop-shadow(0 18px 40px rgba(4,22,52,.25))}
@media (max-width:860px){ .hero .wrap{grid-template-columns:1fr; padding:52px 28px} .hero-visual{min-height:260px} .hero-visual .disc{width:280px;height:280px} .hero-visual .d20{width:200px;height:200px} }

/* ---------- bande de stats ---------- */
.stats{background:var(--ra-navy)}
.stats .wrap{padding:40px 28px; display:grid; grid-template-columns:repeat(3,1fr); gap:32px}
.stat .v{font-family:var(--font-display); font-weight:800; font-size:44px; line-height:1; color:#fff; letter-spacing:-.02em}
.stat .v span{color:var(--ra-orange); font-size:26px; margin-left:6px}
.stat .l{font-size:14px; color:var(--ra-navy-200); margin-top:8px; line-height:1.45}
@media (max-width:720px){ .stats .wrap{grid-template-columns:1fr; gap:22px} }

/* ---------- sections génériques ---------- */
.section{padding:84px 0}
.section.cream{background:var(--ra-cream)} .section.page{background:var(--surface-page)}
.sec-num{display:flex; align-items:baseline; gap:14px}
.sec-num .n{font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--ra-orange)}
.section h2{font-size:38px; line-height:1.1; margin:18px 0 0; text-wrap:balance}
.section .lead{font-size:17px; line-height:1.65; margin:14px 0 0; max-width:62ch; color:var(--text-body)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.split{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start}
.split.center{align-items:center}
@media (max-width:820px){ .grid-2,.grid-3,.split{grid-template-columns:1fr} }

.about-card h3,.tcard h3,.lieu-card h3{font-family:var(--font-display); font-weight:800}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}

.tcard{display:flex; flex-direction:column; gap:12px; min-height:230px}
.tcard h3{font-size:23px; color:var(--ra-navy); margin:4px 0 0}
.tcard p{font-size:16px; line-height:1.6; margin:0}
.tcard .lbl{margin-top:auto; font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--text-muted)}

.lieu-card{display:flex; flex-direction:column; gap:10px}
.lieu-card h3{font-size:26px; color:#fff; margin:6px 0 0}
.lieu-card p{font-size:16px; line-height:1.6; color:var(--ra-navy-200); margin:0}

.service{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--border-subtle); align-items:flex-start; text-align:left}
.service:last-child{border-bottom:0}
.service .ico{width:34px;height:34px;border-radius:9px;background:var(--ra-navy-100);color:var(--ra-navy);display:inline-flex;align-items:center;justify-content:center;flex:none}
.service b{display:block; font-size:16px; color:var(--text-heading)}
.service span{display:block; font-size:14.5px; color:var(--text-body); margin-top:2px}

/* ---------- contact / footer ---------- */
.contact{background:var(--ra-navy)}
.contact .wrap{padding:80px 28px; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
.contact h2{color:#fff}
.contact p{font-size:17px; line-height:1.65; color:var(--ra-navy-200); margin:16px 0 0; max-width:50ch}
.contact .actions{display:flex; align-items:center; gap:14px; margin-top:28px; flex-wrap:wrap}
.contact .link-out{display:inline-flex; align-items:center; height:48px; padding:0 26px; border:1.5px solid rgba(255,255,255,.5); border-radius:999px; color:#fff; font-size:16px; font-weight:600}
.contact .link-out:hover{background:rgba(255,255,255,.08); color:#fff}
@media (max-width:820px){ .contact .wrap{grid-template-columns:1fr} }

.foot{background:var(--ra-navy-900)}
.foot .wrap{display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:26px 28px; font-size:14px; color:var(--ra-navy-300)}
.foot .dot{width:10px;height:10px;border-radius:50%;background:var(--ra-orange);flex:none}
.foot nav{margin-left:auto; display:flex; gap:22px}
.foot nav a{color:var(--ra-navy-200); font-weight:600}

/* ---------- espace adhérent (header) ---------- */
.who{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ra-charcoal-700)}
.who .avatar{width:28px;height:28px}
.who button{font:inherit; font-size:12.5px; color:var(--text-muted); background:none; border:0; cursor:pointer; text-decoration:underline}
.avatar{width:23px;height:23px;border-radius:50%;background:var(--ra-navy-100);color:var(--ra-navy);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}

/* ================================================================
   PLANNING (page planning.html — rendu par planning.js)
   ================================================================ */
.plan-hero{background:var(--ra-cream); border-bottom:1px solid var(--border-subtle)}
.plan-hero .wrap{padding:56px 28px 44px; display:flex; align-items:flex-end; justify-content:space-between; gap:36px; flex-wrap:wrap}
.plan-hero .intro{max-width:620px}
.plan-hero h1{font-size:clamp(36px,4.4vw,52px); line-height:1.05; margin:18px 0 0}
.plan-hero p{font-size:17px; line-height:1.6; margin:16px 0 0}
.plan-hero b{color:var(--text-heading)}
.tally{background:var(--ra-navy); border-radius:18px; padding:22px 26px; text-align:center; min-width:170px}
.tally .num{font-family:var(--font-display); font-weight:800; font-size:62px; line-height:1; letter-spacing:-.03em; color:var(--ra-orange)}
.tally .lab{font-size:13.5px; color:var(--ra-navy-200); margin-top:8px; line-height:1.4}

.controls{background:var(--surface-page); border-bottom:1px solid var(--border-subtle); position:sticky; top:69px; z-index:40}
.controls .wrap{padding:14px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.filter{display:inline-flex; background:var(--ra-cream); border:1px solid var(--border-subtle); border-radius:999px; padding:3px}
.filter button{font:inherit; font-size:13.5px; font-weight:600; color:var(--text-muted); border:0; background:none; padding:7px 16px; border-radius:999px; cursor:pointer}
.filter button[aria-pressed="true"]{background:var(--ra-navy); color:#fff}
.filter button:focus-visible{outline:2px solid var(--ra-orange); outline-offset:2px}
.legend{display:flex; gap:18px; font-size:13.5px; color:var(--text-muted); flex-wrap:wrap}
.legend span{display:inline-flex; align-items:center; gap:7px}
.key{width:11px;height:11px;border-radius:3px}
.key.free{background:var(--ra-orange)} .key.taken{background:var(--ra-navy)} .key.lock{background:var(--ra-charcoal-300)}

.banner{display:none; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; font-size:14px; line-height:1.45; margin:0 0 18px}
.banner.show{display:flex}
.banner svg{width:17px;height:17px;flex:none}
.banner.info{background:var(--ra-orange-050); color:var(--ra-orange-700); border:1px solid var(--ra-orange-200)}
.banner.err{background:#fbeae6; color:#9a3b22; border:1px solid #f0c4b7}
.banner code{font-family:"DM Mono",monospace; font-size:12.5px; background:rgba(0,0,0,.05); padding:1px 5px; border-radius:4px}

.plan-main{background:var(--ra-cream)}
.plan-main .wrap{padding:30px 28px 70px}
.board{display:flex; flex-direction:column; gap:18px}
.skeleton{height:150px; border-radius:16px; background:linear-gradient(90deg,var(--surface-card),var(--ra-cream-deep),var(--surface-card)); background-size:200% 100%; animation:ra-sk 1.3s linear infinite; border:1px solid var(--border-subtle)}
@keyframes ra-sk{to{background-position:-200% 0}}

.session{background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(4,22,52,.04),0 8px 24px rgba(4,22,52,.05)}
.s-head{display:flex; align-items:center; gap:16px; padding:14px 20px; border-bottom:1px solid var(--border-subtle); background:var(--ra-paper)}
.date{flex:none; width:64px; text-align:center; background:var(--surface-card); border:1px solid var(--border-default); border-radius:10px; padding:7px 0; line-height:1}
.date .dow{font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em}
.date .day{font-family:var(--font-display); font-weight:800; font-size:24px; color:var(--ra-navy); display:block; margin:3px 0}
.date .mon{font-size:11px; color:var(--text-muted)}
.s-meta b{font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--text-heading)}
.s-meta .lieu{display:flex; align-items:center; gap:6px; font-size:14px; color:var(--text-muted); margin-top:3px}
.s-meta .lieu svg{width:14px;height:14px}
.s-free{margin-left:auto; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:5px 12px; border-radius:999px}
.s-free.has{background:var(--ra-orange-100); color:var(--ra-orange-700)}
.s-free.none{background:var(--ra-charcoal-100); color:var(--ra-charcoal-500)}

.tables{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border-subtle)}
@media (max-width:720px){ .tables{grid-template-columns:1fr} }
.tile{background:var(--surface-card); padding:16px 18px; display:flex; flex-direction:column; min-height:128px}
.tile .tlabel{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px}
.tile .tlabel b{color:var(--ra-navy)}
.tile .sys{font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--text-heading); line-height:1.25; margin-top:2px}
.tile .mj{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-body); margin-top:auto; padding-top:8px}
.tile .note{font-size:13px; color:var(--text-muted); margin-top:5px; line-height:1.4}
.tile.locked{background:var(--ra-paper)}
.tile.free{background:var(--ra-orange-050); box-shadow:inset 0 0 0 1.5px var(--ra-orange-200)}
.tile.free .hint{font-size:14.5px; color:var(--ra-orange-700); margin-bottom:auto}
.tile.na{opacity:.55}
.tag{display:inline-flex; align-items:center; gap:5px; align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-top:auto}
.tag svg{width:12px;height:12px}
.tag.lock{background:var(--ra-charcoal-100); color:var(--ra-charcoal-600)}
.tag.mine{background:var(--ra-orange-100); color:var(--ra-orange-700)}
.tag.taken{background:var(--ra-navy-100); color:var(--ra-navy)}
.btn.take{margin-top:14px}
.btn.free-out{background:none; border:0; color:var(--ra-orange-700); font-size:12.5px; font-weight:600; padding:6px 0 0; margin-top:6px; align-self:flex-start; text-decoration:underline; cursor:pointer; height:auto}
.plan-note{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-muted); padding:16px 4px 0}
.plan-note .dot{width:8px;height:8px;border-radius:50%;background:var(--ra-orange);flex:none}

/* ---------- modale (connexion + réservation) ---------- */
.overlay{position:fixed; inset:0; background:rgba(4,22,52,.5); display:none; align-items:center; justify-content:center; padding:20px; z-index:100}
.overlay.open{display:flex}
.modal{background:var(--surface-card); border-radius:18px; width:100%; max-width:480px; box-shadow:0 24px 70px rgba(4,22,52,.4); overflow:hidden auto; max-height:92vh}
.m-head{padding:24px 26px 0}
.m-head h3{font-size:22px; margin:12px 0 0}
.m-head p{margin:6px 0 0; font-size:14.5px; color:var(--text-muted)}
.m-body{padding:18px 26px 26px}
.chiprow{display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 20px}
.field{margin-bottom:14px}
.field label{display:block; font-size:14px; font-weight:700; color:var(--text-heading); margin-bottom:6px}
.field select,.field input{width:100%; font:inherit; font-size:15px; padding:10px 12px; border:1px solid var(--border-default); border-radius:10px; background:var(--surface-card); color:var(--text-heading)}
.field select:focus,.field input:focus{outline:2px solid var(--ra-orange); outline-offset:1px; border-color:var(--ra-orange)}
.field .err-msg{color:#9a3b22; font-size:12.5px; margin-top:6px; display:none}
.field .err-msg.show{display:block}
/* Menu système + bouton d'ajout (largeur totale conservée) */
.sys-row{display:flex; gap:8px; align-items:stretch}
.sys-row select,.sys-row input{flex:1; min-width:0}
.btn-add{flex:none; width:44px; border:1px solid var(--border-default); border-radius:10px; background:var(--ra-navy); color:#fff; font-size:20px; font-weight:700; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center}
.btn-add:hover{background:var(--ra-navy-600)}
.btn-add.ok{background:var(--ra-orange); color:var(--text-on-orange); border-color:transparent}
.btn-add.cancel{background:none; color:var(--text-muted)}
.btn-add:focus-visible{outline:2px solid var(--ra-orange); outline-offset:2px}
.m-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:6px}
.otp-input{letter-spacing:.5em; text-align:center; font-family:"DM Mono",monospace; font-size:22px!important}
.center{text-align:center; padding:40px 26px}
.center p{margin:14px 0 0; font-size:15px; color:var(--text-body)}
.center .sub{font-size:13px; color:var(--text-muted); margin-top:4px}
.spin{width:36px;height:36px;border:3px solid var(--ra-orange-100); border-top-color:var(--ra-orange); border-radius:50%; animation:ra-spin .8s linear infinite; margin:0 auto}
.tick{width:58px;height:58px;border-radius:50%;background:var(--ra-orange-100); color:var(--ra-orange-700); display:inline-flex; align-items:center; justify-content:center; font-size:28px; font-weight:700}
.discord{margin:20px 0 4px; text-align:left; border:1px solid var(--border-subtle); border-radius:12px; background:var(--ra-paper); padding:14px 16px}
.discord .dh{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-muted); margin-bottom:8px}
.discord .dh .d{width:8px;height:8px;border-radius:50%;background:#5865F2}
.discord .dm{font-size:14.5px; line-height:1.55; color:var(--text-body)}
.discord .dm b{color:var(--text-heading)}