/* Ski25 — feuille de base unique du site (charte « Chalet » v4), 8 octobre 2026.
   Remplace site.css, site-dark.css, site-light.css, club-dark.css, club-light.css, header.css (ancien) et public.css : six feuilles, trois jeux de variables, 430 couleurs en dur.
   Couleurs, rayon, ombre, polices : variables --s25-* de s25-variables.css, rien d'autre. Le theme (soir / jour) se regle par <html data-theme>, plus par un echange de feuille.
   Les regles propres a l'en-tete et au pied sont dans s25-cadre.css ; celles des articles et du magazine dans leurs feuilles. Les regles de mise en page d'origine sont gardees telles quelles. */

/* ---- socle ---- */
*{box-sizing:border-box}
html{color-scheme:dark}
html[data-theme="light"],html.theme-light{color-scheme:light}
body{margin:0;padding:16px;background:var(--s25-fond);color:var(--s25-texte);font-family:var(--s25-serif);font-size:1rem;line-height:1.5}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,legend{color:var(--s25-texte);letter-spacing:0}
h1{font-family:var(--s25-serif);font-weight:700;line-height:1.1;margin:0 0 12px}
h2,h3,legend{font-family:var(--s25-etroit);font-weight:700;line-height:1.15}
legend{border-left:3px solid var(--s25-bois);padding:0 8px}
a{color:var(--s25-bois);text-decoration:none}
a:hover,a:focus-visible{color:var(--s25-texte);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
p a,li a,dd a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--s25-bois);outline-offset:2px}
.muted{color:var(--s25-discret)}
small{color:inherit}

/* ---- conteneurs et cartes ---- */
.wrap{max-width:1100px;margin:0 auto}
.container{max-width:1100px;margin:16px auto;padding:0 12px}
.card,fieldset{background:var(--s25-surface);border:1px solid var(--s25-filet);border-radius:var(--s25-rayon);padding:16px;margin-bottom:16px}
.card img{border-radius:0}
.home-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.grid.two{grid-template-columns:1fr 1fr}
.split{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-bottom:12px}
.flags{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.flag{display:flex;align-items:center;gap:6px}
.actions{display:flex;gap:12px;justify-content:flex-end;margin-top:12px}
.icons{display:flex;gap:8px;font-size:18px}
.icons img.em{width:18px;height:18px;vertical-align:middle;display:inline-block}
.brand{display:flex;align-items:center;min-width:140px}
.tools{display:flex;align-items:center;gap:8px}
.butler-topline-host{max-width:1100px;margin:0 auto 12px;padding:0 16px}

/* ---- formulaires ---- */
label{display:block;font:600 .82rem/1.3 var(--s25-etroit);letter-spacing:.06em;text-transform:uppercase;color:var(--s25-discret);margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=date],input[type=number],input[type=time],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--s25-filet-fort);border-radius:var(--s25-rayon);background:var(--s25-fond);color:var(--s25-texte);font:inherit}
input::placeholder,textarea::placeholder{color:var(--s25-discret)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--s25-bois);outline-offset:1px;border-color:var(--s25-bois)}

/* ---- boutons : plein en bois, ou contour ---- */
.btn,.btn-primary,.btn--primary,.btn.primary{display:inline-block;padding:10px 16px;border:1px solid transparent;border-radius:var(--s25-rayon);background:var(--s25-bois);color:var(--s25-sur-bois);
  font:700 1rem/1.2 var(--s25-etroit);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn:hover,.btn-primary:hover,.btn--primary:hover{color:var(--s25-sur-bois);text-decoration:none;outline:1px solid var(--s25-texte);outline-offset:2px}
.btn.secondary,.btn-secondary{display:inline-block;padding:10px 16px;border:1px solid var(--s25-filet-fort);border-radius:var(--s25-rayon);background:transparent;color:var(--s25-texte);
  font:700 1rem/1.2 var(--s25-etroit);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn.secondary:hover,.btn-secondary:hover{border-color:var(--s25-bois);color:var(--s25-texte);text-decoration:none;outline:0}
.btn-sm,.btn.small,.btn.sm{padding:6px 10px;font-size:.88rem}
table.tbl .btn.small{padding:6px 10px}

/* ---- tableaux : en-tetes en Barlow, capitales, discrets ; filets horizontaux ---- */
.tbl{width:100%;border-collapse:collapse;background:transparent;border:0;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid var(--s25-filet);text-align:left;font-size:.94rem}
.tbl th,table thead th{background:var(--s25-fond-2);color:var(--s25-discret);font:600 .82rem/1.2 var(--s25-etroit);letter-spacing:.08em;text-transform:uppercase}
.tbl tr:nth-child(even) td{background:var(--s25-surface)}
.tl,.tbl th.tl,.tbl td.tl{text-align:left !important}

/* ---- messages : la couleur d'etat, sans aplat (reussite, attention, erreur = piquet) ---- */
.alert{position:relative;padding:.75rem 1rem;margin:.75rem 0;border:1px solid var(--s25-filet-fort);border-radius:var(--s25-rayon);background:var(--s25-surface);color:var(--s25-texte);font-size:.95rem;line-height:1.4}
.alert.error,.alert-error,.alertred{border-color:var(--s25-piquet);color:var(--s25-piquet)}
.alert-success,.alertgreen{border-color:var(--s25-ok);color:var(--s25-ok)}
.alert-warning,.alertorange{border-color:var(--s25-attention);color:var(--s25-attention)}
.alert.notice,.alert-info,.alertblue{border-color:var(--s25-glace);color:var(--s25-texte)}
.alert .close{position:absolute;top:.35rem;right:.5rem;background:transparent;border:0;font-size:1.1rem;cursor:pointer;color:inherit;opacity:.7}
.alert .close:hover{opacity:1}

/* ---- etiquettes ---- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border:1px solid var(--s25-filet-fort);border-radius:var(--s25-rayon);background:transparent}
.badge .em{font-size:16px}
.pill{display:inline-block;font:600 .76rem/1 var(--s25-etroit);letter-spacing:.06em;padding:.22rem .4rem;border:1px solid currentColor;border-radius:var(--s25-rayon);vertical-align:baseline;margin-left:.35rem;white-space:nowrap}
.pill--status{text-transform:uppercase;margin-left:.25rem}
/* etats d'une course (charte v4, § 2) : le seul aplat rouge est « en direct » ; les autres s'ecrivent en couleur, sans fond ; plus de clignotement */
.pill--live{background:var(--s25-piquet);border-color:var(--s25-piquet);color:var(--s25-sur-bois)}
.pill--sl{color:var(--s25-ok)}
.pill--post{color:var(--s25-attention)}
.pill--cancelled{color:var(--s25-piquet)}
.pill--tr{color:var(--s25-discret)}

/* ---- fenetres, tiroirs : ce qui flotte au-dessus de la page porte la seule ombre du site ---- */
dialog,.s25-dialog,.modal,.s25-auth-modal .auth-modal__panel{background:var(--s25-surface);color:var(--s25-texte);border:1px solid var(--s25-filet);border-radius:var(--s25-rayon);box-shadow:var(--s25-ombre)}
dialog .muted,.s25-dialog .muted{color:var(--s25-discret)}
dialog::backdrop{background:var(--s25-voile)}
.s25-auth-modal{z-index:130000}
: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(--s25-surface) !important;color:inherit !important;overflow:auto !important;display:block !important;opacity:1 !important;
  transform:translateX(0) !important;transition:transform .25s ease !important;box-shadow:var(--s25-ombre)}
html:not(.drawer-open) #s25-drawer.s25-drawer{transform:translateX(100%) !important;pointer-events:none !important}
#s25-drawer .card{margin:12px}
#s25-drawer .s25-drawer__head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:inherit;border-bottom:1px solid var(--s25-filet)}
#s25-drawer .s25-drawer__head h2{margin:0;font-size:1.1rem;letter-spacing:.04em;text-transform:uppercase}
#s25-drawer .s25-drawer__close{border:1px solid var(--s25-filet-fort);background:transparent;color:inherit;border-radius:var(--s25-rayon);padding:6px 12px;font:700 .94rem/1.2 var(--s25-etroit);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
/* languette pour rouvrir le volet de l'accueil : visible seulement quand il est ferme */
#s25-drawer-toggle.s25-drawer__toggle{position:fixed !important;top:var(--header-h) !important;right:0 !important;z-index:2100 !important;width:auto !important;height:auto !important;display:grid !important;place-items:center !important;
  padding:10px 8px !important;line-height:1 !important;border:0 !important;border-radius:var(--s25-rayon) 0 0 var(--s25-rayon) !important;writing-mode:vertical-rl;background:var(--s25-bois) !important;color:var(--s25-sur-bois) !important;
  font:700 .94rem/1 var(--s25-etroit);letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--s25-ombre);cursor:pointer}
html.drawer-open #s25-drawer-toggle.s25-drawer__toggle{display:none !important}

/* ---- anciens blocs encore employes dans des textes en base ---- */
.encadre{float:right;width:min(42%,300px);margin:.2em 0 1em 1.4em;padding:14px 16px;background:var(--s25-surface);border-top:3px solid var(--s25-bois);border-radius:var(--s25-rayon);font-size:.94em;line-height:1.45}
.encadre ul{margin:.4em 0;padding-left:1.1em}.encadre p{margin:.5em 0 0}.encadre strong:first-child{display:block;margin-bottom:.2em}
.reaction-fis a{color:var(--s25-bois);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.reaction-fis a:hover{color:var(--s25-texte)}

/* ---- petits ecrans ---- */
@media (max-width:1100px){ :root{--drawer-w:380px} }
@media (max-width:980px){ .home-grid{grid-template-columns:1fr} }
@media (max-width:860px){ :root{--drawer-w:340px;--header-h:56px} }
@media (max-width:700px){
  body{padding:8px !important}
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* calendrier : chaque ligne devient une carte (date et lieu, puis discipline, genre, circuit, infos, statut) */
  .cal-tbl thead{display:none}
  .cal-tbl,.cal-tbl tbody{display:block;width:100%}
  .cal-tbl tr{display:grid;grid-template-columns:auto auto auto 1fr auto;grid-template-areas:"date venue venue venue venue" "disc gender circuit status info";gap:4px 10px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--s25-filet)}
  .cal-tbl td{display:block;padding:0 !important;border:0 !important;text-align:left !important;background:transparent !important}
  .cal-tbl .cal-date{grid-area:date;font-weight:700;white-space:nowrap}
  .cal-tbl .cal-venue{grid-area:venue;font-weight:600}
  .cal-tbl .cal-disc{grid-area:disc}.cal-tbl .cal-gender{grid-area:gender}.cal-tbl .cal-circuit{grid-area:circuit;color:var(--s25-discret)}
  .cal-tbl .cal-status{grid-area:status}.cal-tbl .cal-info{grid-area:info;justify-self:end}
  .cal-tbl .cal-startlist-link{display:inline-block;margin:2px 0 0 !important}
  /* les autres tableaux defilent dans leur propre largeur au lieu d'elargir la page */
  main table:not(.cal-tbl):not(.sl-table){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:640px){ .encadre{float:none;width:auto;margin:0 0 1em} }
@media (max-width:600px){ :root{--drawer-w:100vw} #s25-drawer.s25-drawer{max-width:100vw !important} }

/* bouton « fiche » des tableaux (calendrier, resultats) : style minimal en attendant le dossard dessine du lot « Donnees » (regression relevee par la redaction
   le 08/10 : sans les anciennes feuilles, le bouton prenait le style du navigateur). Cible de 44 px. */
.b.b-info{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px;background:transparent;border:1px solid var(--s25-bois-filet);
  border-radius:var(--s25-rayon);color:var(--s25-bois);font:inherit;line-height:1;cursor:pointer}
.b.b-info:hover{border-color:var(--s25-bois);color:var(--s25-texte)}
.b.b-info:focus-visible{outline:2px solid var(--s25-bois);outline-offset:2px}