/*
Theme Name: PRISME Amiens
Theme URI: https://prisme-amiens.fr
Author: Association PRISME Amiens
Author URI: https://prisme-amiens.fr
Description: Thème officiel de l'association PRISME Amiens. Charte graphique alignée sur le logo (dégradé vert → bleu → violet → magenta → corail), fond sombre, police Poppins auto-hébergée. Pensé pour cohabiter avec les plugins PRISME Amiens (Urgences, Programmes & FAQ, Sensibilisation, Portraits, Partenaires) sans en dépendre : chaque section de la page d'accueil et le menu de repli s'activent automatiquement si le plugin correspondant est actif.
Version: 1.0.2
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: prisme-amiens-theme
License: GPLv2 or later

-----------------------------------------------------------------------
NOTE D'ARCHITECTURE
-----------------------------------------------------------------------
Ce thème définit ses propres variables CSS --prisme-* (mêmes valeurs et
mêmes noms que celles du plugin « PRISME Amiens — Urgences »). C'est un
choix délibéré : un thème ne doit jamais dépendre du fonctionnement d'un
plugin précis pour s'afficher correctement — sinon, désactiver le
plugin casserait visuellement le site. En gardant les mêmes noms de
variables, le contenu généré par le plugin (pages d'urgence, FAQ,
programmes) hérite automatiquement des bonnes couleurs, que ce soit ce
fichier ou celui du plugin qui les définit en premier — sans conflit,
et sans dépendance obligatoire dans un sens ou dans l'autre.
-----------------------------------------------------------------------
*/

/* ==========================================================================
   Police — Poppins auto-hébergée (voir note RGPD dans le plugin)
   ========================================================================== */

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

/* ==========================================================================
   Tokens — palette extraite du logo
   ========================================================================== */

: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: "Poppins PRISME", "Helvetica Neue", Arial, sans-serif;
	--prisme-radius: 18px;
	--prisme-radius-pill: 999px;
	--prisme-container: 1180px;
}

/* ==========================================================================
   Reset minimal + base
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--prisme-fond);
	color: var(--prisme-texte);
	font-family: var(--prisme-font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

.prisme-container {
	max-width: var(--prisme-container);
	margin: 0 auto;
	padding: 0 24px;
}

/* Bouton pilule blanc — identique à celui du plugin */
.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: #FFFFFF;
	color: #17171A;
	border: none;
	border-radius: var(--prisme-radius-pill);
	padding: 13px 22px;
	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: #17171A;
}
.prisme-btn-pill:active {
	transform: translateY(0);
	opacity: 0.8;
}

/* Bouton contour (variante secondaire, dégradé du logo au survol) */
.prisme-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--prisme-font);
	font-weight: 600;
	font-size: 15px;
	background: transparent;
	color: var(--prisme-texte);
	border: 1px solid var(--prisme-bordure);
	border-radius: var(--prisme-radius-pill);
	padding: 12px 22px;
	text-decoration: none;
	transition: border-color 0.12s ease;
}
.prisme-btn-outline:hover,
.prisme-btn-outline:focus-visible {
	border-color: var(--prisme-texte);
}

/* Carte sombre partagée */
.prisme-card {
	background: var(--prisme-fond-carte);
	border: 1px solid var(--prisme-bordure);
	border-radius: var(--prisme-radius);
}

/* ==========================================================================
   Header / navigation
   ========================================================================== */

.prisme-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--prisme-fond);
	border-bottom: 1px solid var(--prisme-bordure);
}

.prisme-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
}

.prisme-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: var(--prisme-texte);
}

.prisme-brand-logo {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex: none;
}
.prisme-brand-logo img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	padding: 4px;
}

.prisme-brand-name {
	font-weight: 700;
	font-size: 18px;
}

.prisme-nav ul {
	list-style: none;
	display: flex;
	gap: 34px;
	margin: 0;
	padding: 0;
}
.prisme-nav a {
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	color: var(--prisme-texte);
	opacity: 0.9;
}
.prisme-nav a:hover,
.prisme-nav a:focus-visible {
	opacity: 1;
}

.prisme-nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--prisme-bordure);
	border-radius: 10px;
	width: 42px;
	height: 42px;
	color: var(--prisme-texte);
	font-size: 20px;
	cursor: pointer;
}

/* ==========================================================================
   Hero (page d'accueil)
   ========================================================================== */

.prisme-hero {
	padding: 96px 24px 64px;
}
.prisme-hero-inner {
	max-width: 760px;
}
.prisme-hero h1 {
	font-size: 52px;
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 24px;
	letter-spacing: -0.01em;
}
.prisme-hero p {
	font-size: 18px;
	line-height: 1.6;
	color: var(--prisme-texte-att);
	margin: 0 0 36px;
	max-width: 620px;
}

.prisme-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ==========================================================================
   Section générique / contenu de page
   ========================================================================== */

.prisme-section {
	padding: 56px 24px;
}
.prisme-section--alt {
	background: var(--prisme-fond-carte, #201F24);
	border-top: 1px solid var(--prisme-bordure, #34333B);
	border-bottom: 1px solid var(--prisme-bordure, #34333B);
}
.prisme-section h2 {
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 12px;
}
.prisme-section .prisme-section-intro {
	color: var(--prisme-texte-att);
	max-width: 620px;
	margin: 0 0 32px;
}

.prisme-page-content {
	max-width: 760px;
	margin: 0 auto;
	padding: 64px 24px;
}
.prisme-page-content h1 {
	font-size: 36px;
	font-weight: 700;
	margin: 0 0 28px;
}
.prisme-page-content p,
.prisme-page-content li {
	color: var(--prisme-texte-att);
	font-size: 16px;
	line-height: 1.7;
}
.prisme-page-content a {
	color: var(--prisme-bleu);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.prisme-footer {
	border-top: 1px solid var(--prisme-bordure);
	padding: 40px 24px;
	margin-top: 48px;
}
.prisme-footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.prisme-footer-name {
	font-weight: 700;
}
.prisme-footer-meta {
	color: var(--prisme-texte-att);
	font-size: 13px;
}
.prisme-footer-links {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.prisme-footer-links a {
	color: var(--prisme-texte-att);
	text-decoration: none;
	font-size: 14px;
}
.prisme-footer-links a:hover { color: var(--prisme-texte); }

/* Liseré dégradé (clin d'œil au logo), utilisé en haut du footer */
.prisme-footer-strip {
	height: 3px;
	background: linear-gradient(90deg, var(--prisme-vert), var(--prisme-bleu) 30%, var(--prisme-violet) 55%, var(--prisme-magenta) 78%, var(--prisme-corail));
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 720px) {
	.prisme-nav { display: none; }
	.prisme-nav.is-open { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--prisme-fond); border-bottom: 1px solid var(--prisme-bordure); padding: 12px 24px 20px; }
	.prisme-nav.is-open ul { flex-direction: column; gap: 18px; }
	.prisme-nav-toggle { display: block; }
	.prisme-hero h1 { font-size: 36px; }
	.prisme-hero { padding: 56px 24px 40px; }
}