/**
 * SecGram — base.css
 * Design tokens (custom properties) + fondations globales.
 *
 * Règles du module :
 * - aucun sélecteur lié à un ID généré par Divi ;
 * - spécificité minimale (:where) pour rester surchargeable
 *   par les réglages Divi de l'utilisateur.
 */

:root {
	/* ---- Couleurs -------------------------------------------------- */
	/* Identité SecGram : noir profond + or. Contrastes AA vérifiés
	   (voir docs/ACCESSIBILITY.md). L'or pur ne sert JAMAIS de couleur
	   de texte courant sur fond clair (contraste insuffisant) :
	   utiliser --sg-color-accent-strong sur fond clair. */
	--sg-color-ink: #10131a;            /* titres, texte sur or         */
	--sg-color-body: #3b4150;           /* texte courant                */
	--sg-color-muted: #667084;          /* texte secondaire             */
	--sg-color-accent: #f2b705;         /* or — CTA, accents sur sombre */
	--sg-color-accent-hover: #d9a504;   /* or profond (hover)           */
	--sg-color-accent-strong: #8a5a00;  /* or lisible sur fond clair    */
	--sg-color-accent-soft: #fdf3d0;    /* fonds de badge               */
	--sg-color-dark: #0c0d10;           /* fonds de sections sombres    */
	--sg-color-dark-panel: #14161b;     /* cartes sur fond sombre       */
	--sg-color-dark-border: #262a33;
	--sg-color-on-dark: #eceef2;        /* texte principal sur sombre   */
	--sg-color-on-dark-muted: #a8afbc;  /* texte secondaire sur sombre  */
	--sg-color-surface: #ffffff;
	--sg-color-surface-alt: #f5f6f8;    /* sections alternées           */
	--sg-color-border: #e4e7ec;
	--sg-color-success: #15803d;
	--sg-color-error: #b91c1c;
	--sg-color-focus: #b45309;          /* visible sur clair ET sombre  */

	/* Alias de compatibilité : les modules écrits contre l'ancienne
	   palette « primary » suivent automatiquement l'identité or. */
	--sg-color-primary: var(--sg-color-accent);
	--sg-color-primary-strong: var(--sg-color-accent-strong);
	--sg-color-primary-soft: var(--sg-color-accent-soft);

	/* ---- Espacement ------------------------------------------------ */
	--sg-space-2xs: 0.25rem;
	--sg-space-xs: 0.5rem;
	--sg-space-sm: 0.75rem;
	--sg-space-md: 1rem;
	--sg-space-lg: 1.5rem;
	--sg-space-xl: 2.5rem;
	--sg-space-2xl: 4rem;
	--sg-space-3xl: 6rem;

	/* ---- Typographie (tailles fluides via clamp) ------------------- */
	--sg-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--sg-font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas,
		"Liberation Mono", monospace;
	--sg-text-sm: 0.9375rem;
	--sg-text-base: 1rem;
	--sg-text-lg: 1.125rem;
	--sg-text-h1: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
	--sg-text-h2: clamp(1.6rem, 1.25rem + 1.4vw, 2.25rem);
	--sg-text-h3: clamp(1.3rem, 1.13rem + 0.7vw, 1.625rem);
	--sg-text-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
	--sg-leading-body: 1.7;
	--sg-leading-heading: 1.25;

	/* ---- Conteneurs ------------------------------------------------ */
	--sg-container: 1200px;
	--sg-container-wide: 1320px;
	--sg-container-text: 46rem; /* ~72 caractères par ligne             */

	/* ---- Bordures / rayons / ombres -------------------------------- */
	--sg-border: 1px solid var(--sg-color-border);
	--sg-radius-sm: 6px;
	--sg-radius-md: 10px;
	--sg-radius-lg: 16px;
	--sg-radius-full: 999px;
	--sg-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
	--sg-shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08);
	--sg-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);

	/* ---- Mouvement ------------------------------------------------- */
	--sg-transition-fast: 150ms ease;
	--sg-transition: 220ms ease;

	/* ---- Divers ---------------------------------------------------- */
	/* Décalage des ancres sous l'en-tête fixe Divi                     */
	--sg-anchor-offset: 110px;
	--sg-z-header: 100;
	--sg-z-overlay: 200;
	--sg-z-skiplink: 1000;
}

/* Garde-fou contre le défilement horizontal (rows/animations Divi qui
   débordent). `clip` préserve position:sticky, contrairement à hidden. */
:where(body) {
	overflow-x: clip;
}

/* Médias fluides par défaut : jamais plus larges que leur conteneur,
   ratio préservé grâce aux attributs width/height. */
:where(img, video, iframe, embed, object) {
	max-width: 100%;
}

:where(img) {
	height: auto;
}

/* Ancres : ne jamais disparaître sous l'en-tête fixe. */
:where([id]) {
	scroll-margin-top: var(--sg-anchor-offset);
}