/**
 * Focus Média — Fondations graphiques (design tokens).
 *
 * Charte relevée sur les maquettes (`maquettes/`) :
 *   - accent principal turquoise #00C2B5 (teinte 175°) ;
 *   - accent secondaire vert anis #7CDE71 ;
 *   - surlignage jaune #F0E878 ; logo violet #B69EFF ;
 *   - fonds encre #1E1E1E / #0B0B0B ; surfaces blanches et crème #F9F4EC.
 *
 * Les valeurs restent une proposition à valider avec le Product Owner.
 *
 * Contraste (sur fond blanc #FFFFFF) :
 *   --color-ink          → 16,7:1
 *   --color-ink-soft     →  6,9:1
 *   --color-accent-text  →  5,3:1 (texte / liens)
 *   --color-accent       →  2,2:1 (fonds, décor — jamais du petit texte)
 *   --color-accent-strong→  3,3:1 (bordures, composants)
 *   --color-on-accent    →  8,8:1 sur turquoise (texte sur accent)
 */

:root {
	/* --- Charte de marque --- */
	--brand-teal: #00C2B5;         /* Accent principal (fonds, décor) */
	--brand-teal-strong: #009E94;  /* Accent composants (≥ 3:1) */
	--brand-teal-text: #00796F;    /* Accent texte / liens (≥ 4,5:1) */
	--brand-lime: #7CDE71;         /* Accent secondaire */
	--brand-yellow: #FFFF91;       /* Surlignage */
	--brand-purple: #B69EFF;       /* Logo */
	--brand-ink: #1E1E1E;
	--brand-ink-deep: #0B0B0B;

	/* --- Couleurs globales --- */
	--color-ink: #1E1E1E;          /* Texte et titres */
	--color-paper: #FFFFFF;        /* Fond général */
	--color-accent: var(--brand-teal);           /* Fonds, décor */
	--color-accent-strong: var(--brand-teal-strong); /* Composants, bordures */
	--color-accent-text: var(--brand-teal-text); /* Liens et texte accentué */
	--color-secondary: var(--brand-lime);
	--color-highlight: var(--brand-yellow);
	--color-logo: var(--brand-purple);
	--color-border: #D9D9D9;       /* Séparateurs et surfaces */

	/* --- Couleurs dérivées --- */
	--color-ink-soft: #5A5A5A;     /* Texte secondaire, chapô, métadonnées */
	--color-paper-alt: #F2F2EE;    /* Surfaces neutres */
	--color-paper-warm: #F9F4EC;   /* Surfaces crème */
	--color-mint: #D1F4F2;         /* Surfaces teintées turquoise */
	--color-border-strong: #919191;/* Bordures de champs (≥ 3:1) */
	--color-on-accent: #0B0B0B;    /* Texte sur accent clair */
	--color-focus-ring: #1D4ED8;   /* Anneau de focus clavier */
	--color-danger: #B00020;       /* Messages d'erreur */
	--color-success: #2E7D32;      /* Messages de validation */
	--color-warning: #B45309;      /* Avertissement textuel */
	--color-nav: #6D28D9;          /* Menu du haut : texte/lien violet lisible */
	--color-nav-bg: #B69EFF;       /* Menu du haut : fond violet (maquette) */
	--color-on-nav: #FFFFFF;       /* Menu du haut : texte (maquette) */

	/* --- Surfaces sombres --- */
	--color-surface-dark: #1E1E1E;
	--color-surface-dark-deep: #0B0B0B;
	--color-on-dark: #FFFFFF;
	--color-on-dark-soft: #D9D9D9;

	/* --- Couleurs de collection (accents lisibles) --- */
	--color-collection-standard: #00796F;
	--color-collection-culture: #8900E7;
	--color-collection-societe: #2B54F0;
	--color-collection-enquete: #94003D;

	/* --- Typographie --- */
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-heading: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
	/* Titres d'accroche (maquette Desktop-accueil) : grotesque noire italique,
	   en capitales. Polices système en attendant la police de marque validée. */
	--font-display: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--text-body: 1.125rem;      /* 18px sur desktop */
	--line-height-body: 1.7;
	--line-height-heading: 1.2;
	--line-height-tight: 1.35;

	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-md: 1rem;
	--text-lg: 1.375rem;
	--text-xl: 1.75rem;
	--text-2xl: 2.25rem;
	--text-3xl: 3rem;

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-bold: 700;

	/* --- Espacements (échelle 4 → 64) --- */
	--space-1: 0.25rem;   /*  4px */
	--space-2: 0.5rem;    /*  8px */
	--space-3: 0.75rem;   /* 12px */
	--space-4: 1rem;      /* 16px */
	--space-6: 1.5rem;    /* 24px */
	--space-8: 2rem;      /* 32px */
	--space-12: 3rem;     /* 48px */
	--space-16: 4rem;     /* 64px */

	/* --- Mise en page --- */
	--content-width: 72rem;   /* Largeur de mise en page (12 colonnes) */
	--reading-width: 44rem;   /* Largeur de lecture (65–75 caractères) */
	--gutter: var(--space-4);
	--gutter-lg: var(--space-6);

	/* --- Grilles --- */
	--grid-columns-mobile: 4;
	--grid-columns-desktop: 12;
	--grid-gap: var(--space-6);

	/* --- Composants --- */
	--radius-sm: 2px;
	--radius: 4px;
	--radius-lg: 8px;
	--radius-pill: 999px;

	--border-width: 1px;

	/* Cible tactile minimale (WCAG 2.2 – 2.5.8) */
	--tap-target: 2.75rem; /* 44px */

	--shadow-card: 0 1px 2px rgba(30, 30, 30, 0.06), 0 4px 12px rgba(30, 30, 30, 0.05);
	--shadow-raised: 0 2px 4px rgba(30, 30, 30, 0.08), 0 8px 24px rgba(30, 30, 30, 0.08);

	--transition-fast: 150ms ease;
	--transition: 250ms ease;

	/* --- Couleur d'accent de collection (surchargée par variante) --- */
	--collection-color: var(--color-accent-text);
}

/* Variantes de collection : exposées par focus_media_collection_style_attr(). */
.collection--standard { --collection-color: var(--color-collection-standard); }
.collection--culture  { --collection-color: var(--color-collection-culture); }
.collection--societe  { --collection-color: var(--color-collection-societe); }
.collection--enquete  { --collection-color: var(--color-collection-enquete); }

/* =========================================================================
 * Thème sombre — surfaces encre, accent turquoise lumineux.
 * S'applique via [data-theme="dark"] ou .surface-dark (sections, pied).
 * ========================================================================= */

[data-theme="dark"], .surface-dark {
	--color-ink: #FFFFFF;
	--color-ink-soft: #D9D9D9;
	--color-paper: #1E1E1E;
	--color-paper-alt: #2A2A2A;
	--color-border: #3C3C3C;
	--color-border-strong: #7A7A7A;
	--color-accent: #00C2B5;
	--color-accent-strong: #2EDDCF;
	--color-accent-text: #3FE0D3;
	--color-on-accent: #0B0B0B;
	--color-nav: #C4B5FD;
	--color-focus-ring: #7CDE71;
}

[data-theme="dark"] body,
body[data-theme="dark"] {
	background-color: var(--color-paper);
	color: var(--color-ink);
}

.surface-dark {
	background-color: var(--color-surface-dark);
	color: var(--color-on-dark);
}