/* ===== S25 site.css — rationalisé (thème + header + drawer) ===== */

/* ---- Thème: variables de base ---- */
:root{ color-scheme:light; --bg:#ffffff; --fg:#111; --muted:#667; }
html[data-theme="dark"]{ color-scheme:dark; --bg:#0f1115; --fg:#f2f4f8; --muted:#9aa4af; }
body{ background:var(--bg); color:var(--fg); }
.muted{ color:var(--muted); }

/* ---- Images: anti-débordement sûr ---- */
img{ max-width:100%; height:auto; display:block; }

/* ---- Boutons sobres ---- */
.btn{ display:inline-block; text-decoration:none; font-weight:600; border-radius:10px; padding:.38rem .65rem; border:1px solid transparent }
.btn--primary{ background: var(--btn-bg,#4080ff); color:#fff; border-color: transparent }
.btn--outline{ background: transparent; border-color: var(--border,#3a4a5a) }
.btn--ghost{ background: transparent; border-color: transparent }
.btn:hover{ filter: brightness(1.03) }
.btn-sm{ padding:.24rem .48rem; font-size:.85rem; line-height:1.2; border-radius:.28rem; }

/* ---- Container & cartes ---- */
.container{max-width:1100px;margin:16px auto;padding:0 12px}
.card{background:var(--card-bg,rgba(0,0,0,.05)); padding:12px; border-radius:.6rem}
.card img{ border-radius:8px }

/* ---- Thumbs & illustrations ---- */
.img-thumb{ width:450px; max-width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px }
.img-illustration{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px }

/* ---- Header public (logo / nav / tools) ---- */
.site-header{ position:sticky; top:0; z-index:100; background:var(--bg); border-bottom:1px solid rgba(0,0,0,.12) }
html[data-theme=dark] .site-header{ border-bottom-color: rgba(255,255,255,.08) }
.site-header .wrap{ display:flex; align-items:center; gap:16px; padding:10px 16px }

.brand{ display:flex; align-items:center; min-width:140px }
.brand__link{ display:inline-flex; align-items:center; gap:8px; text-decoration:none }

/* Deux balises <img> dans le header : .logo--light et .logo--dark */
.logo{ height:28px; display:none }
body[data-theme="light"] .logo--light{ display:inline-block }
body[data-theme="dark"]  .logo--dark{  display:inline-block }

/* ---- Main nav ---- */
.main-nav{ display:flex; gap:14px; align-items:center; flex:1 1 auto }
.main-nav a{ text-decoration:none; font-weight:600; opacity:.95 }
.main-nav a:hover{ text-decoration:underline }

/* ---- Tools (lang + thème + auth) ---- */
.tools{ display:flex; align-items:center; gap:8px }

/* ---- Grille Home 2/3 — 1/3 ---- */
.home-grid{ display:grid; grid-template-columns: 2fr 1fr; gap:20px; align-items:start }
@media (max-width: 980px){ .home-grid{ grid-template-columns: 1fr } }

/* === Drawer — version unique & stable === */
:root{ --header-h:64px; --drawer-w:480px; }
#s25-drawer.s25-drawer{
  position: fixed !important;
  top: var(--header-h) !important;
  right: 0 !important;
  z-index: 2000 !important;

  width: var(--drawer-w) !important;
  max-width: min(92vw, 560px) !important;
  height: calc(100dvh - var(--header-h)) !important;

  background: var(--card, #fff) !important;
  color: inherit !important;
  overflow: auto !important;
  display: block !important;
  opacity: 1 !important;

  transform: translateX(0) !important;
  transition: transform .25s ease !important;
  box-shadow:-2px 0 10px rgba(0,0,0,.15);
}
html:not(.drawer-open) #s25-drawer.s25-drawer{
  transform: translateX(100%) !important;
  pointer-events: none !important;
}
#s25-drawer .card{ margin:12px; }

#s25-drawer-toggle.s25-drawer__toggle{
  position: fixed !important;
  top: var(--header-h) !important;
  right: 8px !important;
  z-index: 2100 !important;
  width: 36px !important; height: 36px !important;
  display: grid !important; place-items: center !important;
  line-height:1 !important; border-radius:8px !important;
}

/* Responsive: drawer un peu plus étroit */
@media (max-width: 1100px){ :root{ --drawer-w: 380px } }
@media (max-width: 860px){
  :root{ --drawer-w: 340px; --header-h:56px }
  .home-grid{ grid-template-columns:1fr }
}

/* ---- Magazine (extraits essentiels) ---- */
.mag-layout{ display:grid; grid-template-columns: 2fr 1fr; gap:16px }
@media (max-width:980px){ .mag-layout{ grid-template-columns:1fr } }
.mag-feature{ display:grid; grid-template-columns:1.15fr 1fr; gap:14px; align-items:start; border-radius:.75rem; margin-bottom:14px }
.mag-imgwrap{ display:block; border-radius:.6rem; overflow:hidden }
.mag-h2{ font-size:1.25rem; line-height:1.2; margin:0 }
.mag-sub{ opacity:.95; font-weight:600; margin:.15rem 0 }
.mag-teaser{ opacity:.88; margin:.15rem 0 }
.photo-cap{ font-size:.9em; color:var(--muted); margin:.35rem 0 0 }

.reaction-fis a {
  color: var(--c-accent, #4da3ff);
  text-decoration: underline;
}
.reaction-fis a:hover {
  color: var(--c-accent-hover, #7bbcff);
}

/* ---- Tables génériques (light/dark sûres) ---- */
.table-wrap{ border:1px solid var(--hairline,#e3e5e8); border-radius:10px; overflow:hidden; margin-top:.75rem }
table.s25-table{ width:100%; border-collapse:collapse; font-size:.97rem }
table.s25-table th, table.s25-table td{ padding:.55rem .6rem; border-bottom:1px solid var(--hairline,#e3e5e8) }
@media (prefers-color-scheme:dark){
  .table-wrap{ border-color: var(--hairline,#2a2d30) }
  table.s25-table th, table.s25-table td{ border-bottom-color: var(--hairline,#2a2d30) }
}

/* Left-align helper used in tables */
.tl { text-align: left !important; }
/* Force left align inside tables */
.tbl th.tl,
.tbl td.tl {
  text-align: left !important;
}


/* Tiny inline pill for "TR" */
.pill {
  display: inline-block;
  font-size: .72rem;
  line-height: 1;
  padding: .18rem .38rem;
  border-radius: 999px;
  vertical-align: baseline;
  margin-left: .35rem;
  white-space: nowrap;
}
.pill--tr {
  border: 1px solid var(--c-accent, #7aa2ff);
  color: var(--c-accent, #7aa2ff);
  background: transparent;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ────────────────────────────────────────────────
   Race status pills (results/calendar widgets)
   ──────────────────────────────────────────────── */

.pill--status {
  display: inline-block;
  font-size: .72rem;
  line-height: 1;
  padding: .25rem .45rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .02em;
  margin-left: .25rem;
  text-transform: uppercase;
}

/* Startlist available (SL) – bright green lemon */
.pill--sl {
  background: #9fff63;
  color: #082000;
}

/* Live now – blinking orange/red light */
.pill--live {
  background: #ff5533;
  color: #fff;
  animation: pulseLive 1s infinite alternate ease-in-out;
}
@keyframes pulseLive {
  0%   { box-shadow: 0 0 0px 0 rgba(255,85,51,0.7); opacity: 1; }
  100% { box-shadow: 0 0 8px 4px rgba(255,85,51,0.3); opacity: 0.7; }
}

/* Postponed – soft amber */
.pill--post {
  background: #ffd366;
  color: #302000;
}

/* Cancelled – neutral gray with red border */
.pill--cancelled {
  border: 1px solid #e05a5a;
  color: #e05a5a;
  background: transparent;
}

/* ───────────────────────────────
   Boutons génériques
   ─────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease;
  line-height: 1.2;
}

.btn-primary {
  border: none;
  color: #fff;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Secondary buttons (structure) */
.btn-secondary {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease;
  line-height: 1.2;
  border: 1px solid transparent;
}
.btn-secondary:hover {
  transform: translateY(-1px);
}

/* ===== FIN ===== */
/* === Club login drawer (namespaced) =============================== */
.club-login-drawer { position: fixed; inset: 0; display: none; z-index: 1500; }
.club-login-drawer.is-open { display: block; }
.club-login__overlay { position:absolute; inset:0; background: rgba(0,0,0,.35); }
.club-login__panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(420px, 96vw);
  background: var(--bg, #111);
  color: var(--fg, #eee);
  padding: .75rem;
  box-shadow: -6px 0 16px rgba(0,0,0,.35);
  overflow: auto;
}
.club-login__close { float:right; }
.club-login__body { margin-top: 2rem; outline: none; }
/* Body toggle is isolated — won’t collide with your site’s drawer */
.club-login-open body { overflow: hidden; }
/* z-index overrides (login over main drawer) */
.club-login-drawer{z-index:50000!important}
.club-login__overlay{z-index:50001!important}
.club-login__panel{z-index:50002!important}