/* ==========================================================================
   PRISME AMIENS — Design tokens & composants de base
   Palette extraite directement du logo (dégradé vert → bleu → violet →
   magenta → corail, étincelle or). Fond sombre, texte blanc, boutons
   pilule blancs — conforme à la direction artistique déjà en place sur
   le site (cf. page d'accueil).

   Police : Lexend, auto-hébergée (fichiers .woff2 dans ../fonts/) plutôt
   que chargée depuis Google Fonts — évite l'envoi de l'IP des visiteurs
   à un tiers, cohérent avec la posture RGPD déjà affichée par PRISME
   pour l'application PRISME Amiens.
   ========================================================================== */

@font-face {
	font-family: "Lexend PRISME";
	src: url("../fonts/lexend-v26-latin-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Lexend PRISME";
	src: url("../fonts/lexend-v26-latin-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Lexend PRISME";
	src: url("../fonts/lexend-v26-latin-700.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

:root {
	--prisme-fond: #17171A;
	--prisme-fond-carte: #201F24;
	--prisme-bordure: #34333B;
	--prisme-texte: #FFFFFF;
	--prisme-texte-att: #A9A9B4;

	--prisme-vert: #2ECC71;
	--prisme-bleu: #2F8FE0;
	--prisme-violet: #7B5CF0;
	--prisme-magenta: #E14FA0;
	--prisme-corail: #F0653C;
	--prisme-or: #F5A623;

	--prisme-font: "Lexend PRISME", sans-serif;
	--prisme-radius: 28px;      /* cartes, tuiles, blocs (était 26 px dans le thème, 18 px dans les plugins) */
	--prisme-action-fond: #FFFFFF;   /* boutons principaux, filtres actifs (recolorés par Octobre/Noël) */
	--prisme-action-texte: #17171A;
	--prisme-radius-s: 14px;    /* champs, badges, petits blocs */
	--prisme-radius-pill: 999px;

	/* Échelle typographique (rem) : 14 px minimum, jamais en dessous */
	--prisme-t-xs: 0.875rem;
	--prisme-t-s: 1rem;
	--prisme-t-m: 1.125rem;
	--prisme-t-l: 1.375rem;
	--prisme-t-xl: 1.75rem;
	--prisme-t-2xl: 2.25rem;

	/* Espacements (échelle de 8) */
	--prisme-e1: 4px;
	--prisme-e2: 8px;
	--prisme-e3: 16px;
	--prisme-e4: 24px;
	--prisme-e5: 32px;
	--prisme-e6: 48px;
	--prisme-e7: 64px;
}

/* Composant carte sombre partagé (crise, FAQ, programmes) — même langage que
   les tuiles de la page d'accueil : grand rayon, filet, léger reflet intérieur. */
.prisme-card {
	font-family: var(--prisme-font, "Lexend PRISME", sans-serif);
	background: var(--prisme-fond-carte, #201F24) !important;
	color: var(--prisme-texte, #FFFFFF) !important;
	border: 1px solid var(--prisme-bordure, #34333B);
	border-radius: var(--prisme-radius, 28px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Règles communes à tout composant PRISME */
:where([class*="prisme-"]) {
	overflow-wrap: break-word; /* un long mot ou une adresse ne dépasse jamais d'une carte */
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--prisme-or, #F5A623);
	outline-offset: 3px;
}

/* Bouton pilule blanc — identique au style des CTA de la page d'accueil */
.prisme-btn-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--prisme-font);
	font-weight: 600;
	font-size: 15px;
	background: var(--prisme-action-fond, #FFFFFF);
	color: var(--prisme-action-texte, #17171A);
	border: none;
	border-radius: var(--prisme-radius-pill);
	min-height: 48px;
	padding: 12px 24px;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.12s ease, opacity 0.12s ease;
}
.prisme-btn-pill:hover,
.prisme-btn-pill:focus-visible {
	opacity: 0.9;
	transform: translateY(-1px);
	color: var(--prisme-action-texte, #17171A);
}
.prisme-btn-pill:active {
	transform: translateY(0);
	opacity: 0.8;
}

/* Variante pleine largeur (boutons d'action sur mobile) */
.prisme-btn-pill--block {
	display: flex;
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.prisme-btn-pill { transition: none; }
}

/* Responsive commun (mobile d'abord, 320 px minimum). Jeu de seuils unique du projet : 480 / 640 / 768 / 1024.
   Un composant PRISME ne dépasse jamais de son conteneur, même sous un autre thème que celui de PRISME
   (qui pose déjà img { max-width: 100% }). :where() : spécificité nulle, n'écrase rien. */
:where([class*="prisme-"]) :where(img, video, iframe, svg) { max-width: 100%; }
:where(.prisme-card) { min-width: 0; }