/* =========================================================================
 * tokens.css — design system portail-education.fr
 * Variables CSS chargées sur tout le site. La mise en page vit dans .pe-page
 * (scope) pour ne PAS polluer les pages Astra/Spectra non migrées.
 * Palette relevée sur la page de référence (stage / cours particuliers).
 * ====================================================================== */

:root {
	/* Palette */
	--pe-ink:        #0F2235; /* bleu nuit, texte fort / fonds sombres */
	--pe-ink-soft:   #33465a; /* texte secondaire */
	--pe-muted:      #6b7785; /* texte muté, légendes */
	--pe-hairline:   #e7ddca; /* filets */
	--pe-cream:      #F6EFE3; /* fond crème principal */
	--pe-paper:      #fbf7ef; /* fond clair alterné */
	--pe-white:      #ffffff;
	--pe-accent:     #E8825A; /* orange de marque */
	--pe-accent-deep:#d76a41;
	--pe-accent-wash:#f7d9c9; /* surlignage orange pâle */

	/* Typographie */
	--pe-serif: 'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif;
	--pe-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--pe-mono:  'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	/* Rayons & ombres */
	--pe-radius:      14px;
	--pe-radius-sm:   8px;
	--pe-shadow-soft: 0 2px 10px rgba(15, 34, 53, .06);
	--pe-shadow-pop:  0 12px 34px rgba(15, 34, 53, .12);

	/* Rythme de section */
	--pe-section-y:   120px;
	--pe-section-y-s: 80px;
	--pe-inner:       1180px;
}

/* Conteneur racine (scope). Rien ne s'applique hors de .pe-page. */
.pe-page {
	color: var(--pe-ink);
	background: var(--pe-cream);
	font-family: var(--pe-sans);
	font-size: 18px;
	line-height: 1.6;
}

.pe-inner { max-width: var(--pe-inner); margin: 0 auto; padding: 0 24px; }
.pe-section { padding: var(--pe-section-y) 0; }
.pe-section--tight { padding: var(--pe-section-y-s) 0; }

.pe-page h1, .pe-page h2, .pe-page h3 { font-family: var(--pe-serif); color: var(--pe-ink); line-height: 1.1; }
.pe-page h1 { font-size: 72px; font-weight: 600; }
.pe-page h2 { font-size: 50px; font-weight: 600; }
.pe-page h3 { font-size: 28px; font-weight: 600; }

/* Eyebrow (petite étiquette au-dessus d'un titre) */
.pe-eyebrow {
	font-family: var(--pe-mono);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 13px;
	color: var(--pe-accent-deep);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.pe-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pe-accent); }

/* Surlignage orange pâle sous un mot */
.pe-mark { background: linear-gradient(transparent 62%, var(--pe-accent-wash) 62%); }

/* Boutons */
.pe-btn {
	display: inline-block;
	font-family: var(--pe-sans);
	font-weight: 600;
	font-size: 16px;
	padding: 14px 26px;
	border-radius: var(--pe-radius-sm);
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.pe-btn--primary { background: var(--pe-accent); color: var(--pe-white); }
.pe-btn--primary:hover { background: var(--pe-accent-deep); }
.pe-btn--ghost { background: transparent; color: var(--pe-ink); border: 1px solid var(--pe-ink); }
.pe-btn--ghost:hover { background: var(--pe-ink); color: var(--pe-white); }
.pe-btn--link { padding: 0; color: var(--pe-accent-deep); text-decoration: underline; }

/* Filet & placeholder image */
.pe-hr { border: 0; border-top: 1px solid var(--pe-hairline); margin: 0; }
.pe-img { display: block; max-width: 100%; height: auto; border-radius: var(--pe-radius); }
.pe-img-ph {
	background: var(--pe-paper);
	border: 1px dashed var(--pe-hairline);
	border-radius: var(--pe-radius);
	font-family: var(--pe-mono);
	color: var(--pe-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	text-align: center;
	padding: 20px;
}