/* ========================================================================
 * Club Sport — Design system (base.css)
 *
 * Tokens : couleurs, espacements, typographie, breakpoints.
 * Mode clair par défaut, mode sombre via [data-theme="dark"] sur <html>.
 *
 * Toutes les valeurs sont en CSS custom properties pour qu'un site enfant
 * puisse les surcharger en une ligne.
 * ======================================================================== */

/* ----------------------------------------------------------------------
 * 1. Custom properties (tokens) — mode CLAIR (par défaut)
 * ---------------------------------------------------------------------- */

:root {
	/* Couleurs principales — neutres pour démarrer, surchargeables par site */
	--cspt-bg:                #ffffff;
	--cspt-bg-secondary:      #f6f7f9;
	--cspt-bg-tertiary:       #eceef2;
	--cspt-bg-elevated:       #ffffff;

	--cspt-text-primary:      #1a1d22;
	--cspt-text-secondary:    #4a5159;
	--cspt-text-tertiary:     #6b7177;
	--cspt-text-muted:        #9aa0a6;
	--cspt-text-inverse:      #ffffff;

	--cspt-border:            #dde1e7;
	--cspt-border-strong:     #c3c9d1;

	/* Accent : surchargé par --cspt-page-accent (injecté par le thème selon
	 * la page courante : couleur de la discipline/activité). */
	--cspt-accent:            #1f4d8f;
	--cspt-accent-hover:      #163a6e;
	--cspt-accent-fg:         #ffffff;
	--cspt-page-accent:       var(--cspt-accent); /* écrasable par <style> dans le head */

	/* Sémantique */
	--cspt-success:           #2e7d4f;
	--cspt-warning:           #c47a00;
	--cspt-danger:            #c0392b;

	/* Ombres (mode clair uniquement, plus visibles) */
	--cspt-shadow-sm:         0 1px 2px rgba(0,0,0,.05);
	--cspt-shadow:            0 2px 8px rgba(0,0,0,.08);
	--cspt-shadow-lg:         0 8px 24px rgba(0,0,0,.10);

	/* Typographie */
	--cspt-font-sans:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	--cspt-font-display:      var(--cspt-font-sans);
	--cspt-font-mono:         ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--cspt-text-xs:           0.75rem;     /* 12px */
	--cspt-text-sm:           0.875rem;    /* 14px */
	--cspt-text-base:         1rem;        /* 16px */
	--cspt-text-lg:           1.125rem;    /* 18px */
	--cspt-text-xl:           1.25rem;     /* 20px */
	--cspt-text-2xl:          1.5rem;      /* 24px */
	--cspt-text-3xl:          1.875rem;    /* 30px */
	--cspt-text-4xl:          2.25rem;     /* 36px */
	--cspt-text-5xl:          3rem;        /* 48px */

	--cspt-line-tight:        1.2;
	--cspt-line-normal:       1.5;
	--cspt-line-relaxed:      1.7;

	/* Espacement (8px scale) */
	--cspt-space-1:           0.25rem;     /* 4px  */
	--cspt-space-2:           0.5rem;      /* 8px  */
	--cspt-space-3:           0.75rem;     /* 12px */
	--cspt-space-4:           1rem;        /* 16px */
	--cspt-space-5:           1.5rem;      /* 24px */
	--cspt-space-6:           2rem;        /* 32px */
	--cspt-space-7:           3rem;        /* 48px */
	--cspt-space-8:           4rem;        /* 64px */

	/* Layout — le container occupe 90% de la largeur du viewport (cf. .cspt-container)
	 * mais plafonne à --cspt-container-max sur les très grands écrans pour préserver
	 * la lisibilité (sinon les lignes de texte deviennent trop longues). */
	--cspt-container-max:     1800px;
	--cspt-container-padding: var(--cspt-space-4);
	--cspt-header-height:     72px;

	/* Borders & rayons */
	--cspt-radius-sm:         4px;
	--cspt-radius:            8px;
	--cspt-radius-lg:         12px;
	--cspt-radius-xl:         16px;
	--cspt-radius-full:       9999px;

	/* Transitions */
	--cspt-trans:             150ms ease;
	--cspt-trans-slow:        300ms ease;

	/* Z-index ladder */
	--cspt-z-header:          100;
	--cspt-z-modal:           1000;
	--cspt-z-toast:           2000;
}

/* ----------------------------------------------------------------------
 * 2. Mode SOMBRE — overrides via data-theme="dark"
 * ---------------------------------------------------------------------- */

[data-theme="dark"] {
	--cspt-bg:                #16181c;
	--cspt-bg-secondary:      #1f2127;
	--cspt-bg-tertiary:       #292c33;
	--cspt-bg-elevated:       #22252c;

	--cspt-text-primary:      #e8eaed;
	--cspt-text-secondary:    #b4bac1;
	--cspt-text-tertiary:     #8b9097;
	--cspt-text-muted:        #6b7177;
	--cspt-text-inverse:      #16181c;

	--cspt-border:            #34373e;
	--cspt-border-strong:     #484c54;

	--cspt-accent:            #5b8de0;       /* éclairci pour contraste sur fond sombre */
	--cspt-accent-hover:      #7ba3e8;
	--cspt-accent-fg:         #ffffff;

	--cspt-success:           #4caf7c;
	--cspt-warning:           #e5a04e;
	--cspt-danger:            #e57363;

	/* Ombres : quasi-invisibles en sombre, on s'appuie plutôt sur les bordures */
	--cspt-shadow-sm:         0 1px 2px rgba(0,0,0,.4);
	--cspt-shadow:            0 2px 8px rgba(0,0,0,.5);
	--cspt-shadow-lg:         0 8px 24px rgba(0,0,0,.6);
}

/* ----------------------------------------------------------------------
 * 3. Reset / normalize léger
 * ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--cspt-font-sans);
	font-size: var(--cspt-text-base);
	line-height: var(--cspt-line-relaxed);
	color: var(--cspt-text-primary);
	background-color: var(--cspt-bg);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

img, video, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

button {
	font-family: inherit;
	cursor: pointer;
}

a {
	color: var(--cspt-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color var(--cspt-trans);
}
a:hover, a:focus {
	color: var(--cspt-accent-hover);
}

/* Focus visible : visible mais discret. */
:focus-visible {
	outline: 2px solid var(--cspt-accent);
	outline-offset: 2px;
	border-radius: var(--cspt-radius-sm);
}

/* ----------------------------------------------------------------------
 * 4. Typographie
 * ---------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cspt-font-display);
	line-height: var(--cspt-line-tight);
	margin: 0 0 var(--cspt-space-4);
	color: var(--cspt-text-primary);
	font-weight: 600;
}
h1 { font-size: var(--cspt-text-4xl); }
h2 { font-size: var(--cspt-text-3xl); }
h3 { font-size: var(--cspt-text-2xl); }
h4 { font-size: var(--cspt-text-xl); }
h5 { font-size: var(--cspt-text-lg); }
h6 { font-size: var(--cspt-text-base); }

@media (max-width: 640px) {
	h1 { font-size: var(--cspt-text-3xl); }
	h2 { font-size: var(--cspt-text-2xl); }
	h3 { font-size: var(--cspt-text-xl); }
}

p, ul, ol, dl, blockquote, pre {
	margin: 0 0 var(--cspt-space-4);
}

ul, ol { padding-left: var(--cspt-space-6); }

blockquote {
	padding-left: var(--cspt-space-4);
	border-left: 4px solid var(--cspt-accent);
	color: var(--cspt-text-secondary);
	font-style: italic;
}

code, kbd, samp, pre {
	font-family: var(--cspt-font-mono);
	font-size: 0.95em;
}
pre {
	background: var(--cspt-bg-secondary);
	padding: var(--cspt-space-4);
	border-radius: var(--cspt-radius);
	overflow-x: auto;
}

hr {
	border: 0;
	border-top: 1px solid var(--cspt-border);
	margin: var(--cspt-space-6) 0;
}

/* ----------------------------------------------------------------------
 * 5. Helpers / utilities
 * ---------------------------------------------------------------------- */

.cspt-container {
	width: 100%;
	max-width: var(--cspt-container-max);
	margin: 0 auto;
	padding-left: var(--cspt-container-padding);
	padding-right: var(--cspt-container-padding);
}

/* Sur desktop, on ramène le container à 90% du viewport pour laisser
 * respirer sur les côtés tout en récupérant la place perdue avec
 * l'ancien plafond à 1200px. Sur mobile, on garde 100% + padding
 * pour ne pas perdre d'espace utile. */
@media (min-width: 1024px) {
	.cspt-container {
		width: 90%;
	}
}

.cspt-button {
	display: inline-block;
	padding: var(--cspt-space-3) var(--cspt-space-5);
	background-color: var(--cspt-accent);
	color: var(--cspt-accent-fg);
	border: 1px solid var(--cspt-accent);
	border-radius: var(--cspt-radius);
	text-decoration: none;
	font-weight: 500;
	font-size: var(--cspt-text-base);
	transition: background-color var(--cspt-trans), border-color var(--cspt-trans);
	line-height: 1.2;
}
.cspt-button:hover,
.cspt-button:focus {
	background-color: var(--cspt-accent-hover);
	border-color: var(--cspt-accent-hover);
	color: var(--cspt-accent-fg);
}
.cspt-button--ghost {
	background-color: transparent;
	color: var(--cspt-accent);
}
.cspt-button--ghost:hover,
.cspt-button--ghost:focus {
	background-color: var(--cspt-bg-secondary);
	color: var(--cspt-accent);
}

.cspt-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--cspt-z-modal);
	padding: var(--cspt-space-2) var(--cspt-space-4);
	background: var(--cspt-accent);
	color: var(--cspt-accent-fg);
	text-decoration: none;
}
.cspt-skip-link:focus {
	left: var(--cspt-space-4);
	top: var(--cspt-space-4);
}

/* Variante "screen-reader-text" standard WordPress, déclarée ici pour ne pas dépendre de l'admin */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: var(--cspt-bg);
	clip: auto;
	clip-path: none;
	color: var(--cspt-text-primary);
	display: block;
	font-size: var(--cspt-text-base);
	font-weight: 500;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: var(--cspt-space-3) var(--cspt-space-4);
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: var(--cspt-z-modal);
}

/* ----------------------------------------------------------------------
 * 6. Structure principale
 * ---------------------------------------------------------------------- */

.cspt-main {
	flex: 1 0 auto;
	padding: var(--cspt-space-6) 0;
}
.cspt-main:focus { outline: none; }

@media (max-width: 640px) {
	.cspt-main { padding: var(--cspt-space-4) 0; }
}
