/*
 * L'en-tête conscient de l'univers — 28/09/2026.
 *
 * Chargée PARTOUT, contrairement à univers.css : l'en-tête existe sur toutes
 * les pages, et le bandeau réserve ses 10 px même sur le socle commun.
 *
 * AUCUNE POLICE N'EST CHARGÉE ICI. Cinzel et Raleway viennent de
 * assets/polices-locales.css, servies depuis ce thème. Le site ne fait aucun
 * appel externe — la maquette en chargeait depuis Google, le site jamais.
 *
 * LE PRINCIPE, ET SA CORRECTION DU 28/09 AU SOIR
 *
 * Premier diagnostic : « ce n'est pas la distance entre les deux couleurs qui
 * manque, c'est leur surface ». À moitié vrai. La surface manquait — un filet
 * de 5 px ne porte pas une couleur — mais la mesure a montré autre chose :
 *
 *     or   #c8a84b  saturation 53,2 %
 *     bleu #6d9cbc  saturation 37,1 %   <- le coupable
 *
 * Sur un fond sombre, un bleu à 37 % ne lit pas comme du bleu : il lit comme un
 * gris bleuté. Les deux teintes étaient pourtant à 159° l'une de l'autre.
 * Ce n'était donc ni la teinte ni seulement la surface, c'était la SATURATION.
 *
 * Le bleu est passé à #4fa3d4 — 60,7 %, soit +24 points, teinte 202° : la
 * famille est conservée. L'or ne bouge pas.
 *
 * Trois leviers appliqués ensemble : bandeau de 10 px, fond de barre décalé
 * vers l'accent, et liséré coloré sur l'entrée dormante du sélecteur.
 *
 * ⚠️ TOUT CE BLOC EST RENDU HORS ELEMENTOR, et ce n'est pas un détail.
 *
 * Premier essai : la sous-marque était un widget HTML dans le modèle 339, pour
 * obtenir le verrouillage avec le logo. Elle affichait « Tarots & Oracles » sur
 * TOUTES les pages, y compris côté psychique. Le shortcode était juste — le
 * coupable était `_elementor_element_cache`, qui met en cache le rendu du
 * MODÈLE et le réutilise partout. Le cache n'est désactivable que globalement.
 *
 * LA RÈGLE : ce qui varie par page ne vit pas dans un modèle Elementor partagé
 * et mis en cache. Le modèle 339 ne garde donc que la navigation et le panier.
 */

:root {
	--st-b-encre:        #14121c;
	--st-b-texte:        #e6e1d6;
	--st-b-doux:         #a49db0;
	--st-b-bord:         #675c91;   /* 3:1 — le jeton des bordures cliquables */

	/* Accent par défaut : l'or. Un univers non reconnu dégrade vers l'or,
	   jamais vers une couleur absente. */
	--st-b-accent:       #c8a84b;
	--st-b-accent-clair: #e0c870;

	/* Le fond neutre du socle commun. Les deux fonds teintes vivent sur les
	   classes d'univers : seule la BARRE est teintee, la ou la nuance se voit.
	   Sur toute la page elle se perdait — 1,009:1 de contraste mutuel. */
	--st-b-nuit:         #14121c;
}

/* -------------------------------------------------------------------------
 * LA BARRE — variante B
 * ------------------------------------------------------------------------- */
.st-barre {
	/* ⚠️ LES 10 PX SONT TOUJOURS RÉSERVÉS, y compris sur le socle commun où la
	   couleur est transparente : le bandeau garde son sens, et rien ne saute de
	   10 px au changement de page. Décision du 28/09.
	   5 px ne suffisaient pas — un filet aussi fin ne porte pas une couleur. */
	border-top: 10px solid transparent;
	background-color: var(--st-b-nuit);
	width: 100%;
	box-sizing: border-box;
}

.st-barre--tarots {
	border-top-color: #c8a84b;
	background-color: #1b1710;          /* un cran vers l'or */
	--st-b-accent: #c8a84b;
	--st-b-accent-clair: #e0c870;
}

.st-barre--psychique {
	border-top-color: #4fa3d4;
	background-color: #0e1620;          /* un cran vers le bleu */
	--st-b-accent: #4fa3d4;
	--st-b-accent-clair: #8fc9ea;
}

/* Le socle commun garde l'encre neutre et la réserve transparente. */
.st-barre--commun {
	border-top-color: transparent;
	background-color: var(--st-b-nuit);
}

/* L'intérieur : verrouillage à gauche, sélecteur à droite. */
.st-barre-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	max-width: 68rem;
	margin: 0 auto;
	padding: .6rem 1rem;
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * LE VERROUILLAGE LOGO + SOUS-MARQUE
 * ------------------------------------------------------------------------- */
.st-marque-lien {
	display: flex;
	align-items: center;
	gap: .7rem;
	text-decoration: none;
	min-width: 0;
}

.st-marque-logo {
	display: block;
	width: auto;
	height: auto;
	max-height: 2.4rem;
	flex: none;
}

.st-marque {
	display: block;
	line-height: 1.15;
	min-width: 0;
}

.st-marque-nom {
	display: block;
	font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--st-b-texte);
}

/* Le socle commun : « SPIRITUM TRAINING » sur UNE ligne, sans sous-marque.
   Réserver le verrouillage à deux lignes aux univers rend l'entrée dans un
   univers perceptible. Décision du 28/09. */
.st-marque--seule .st-marque-nom { letter-spacing: .12em; }

.st-marque-sous {
	display: block;
	margin-top: .15rem;
	font-family: 'Raleway', 'Segoe UI', system-ui, sans-serif;
	font-weight: 500;
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--st-b-accent-clair);
}

/* -------------------------------------------------------------------------
 * LE SÉLECTEUR
 *
 * Les DEUX entrées sont toujours présentes : c'est ce qui fait savoir qu'un
 * second univers existe. L'active est pleine, la dormante est cerclée.
 * ------------------------------------------------------------------------- */
.st-sel {
	display: flex;
	gap: .3rem;
	justify-content: flex-end;
	align-items: stretch;
	flex: none;
	font-family: 'Raleway', 'Segoe UI', system-ui, sans-serif;
}

.st-sel-e {
	display: inline-flex;
	align-items: center;
	font-size: .6875rem;
	font-weight: 500;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
	padding: .34rem .75rem;
	border: 1px solid var(--st-b-bord);
	border-radius: 2px;
	color: var(--st-b-doux);
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

/* ⚠️ L'ENTRÉE DORMANTE PORTE SA PROPRE COULEUR, PAS DU GRIS.
 *
 * C'est le détail qui change le plus : les DEUX univers deviennent visibles en
 * même temps, chacun dans sa teinte. Avec un liséré gris, la page ne montrait
 * qu'un univers — l'autre existait sans se signaler.
 *
 * La couleur suit l'univers de L'ENTRÉE, jamais celui de la page. La hiérarchie
 * reste portée par le remplissage : l'active est pleine, la dormante cerclée.
 */
.st-sel-e--tarots:not(.est-actif)    { border-color: #c8a84b; color: #e0c870; }
.st-sel-e--psychique:not(.est-actif) { border-color: #4fa3d4; color: #8fc9ea; }

.st-sel-e--tarots:not(.est-actif):hover,
.st-sel-e--tarots:not(.est-actif):focus-visible    { border-color: #e0c870; color: #e0c870; }
.st-sel-e--psychique:not(.est-actif):hover,
.st-sel-e--psychique:not(.est-actif):focus-visible { border-color: #8fc9ea; color: #8fc9ea; }

.st-sel-e:focus-visible { outline: 2px solid var(--st-b-accent-clair); outline-offset: 2px; }

/* L'entrée active prend la teinte de SON univers, pas de celle de la page :
   ainsi la dormante garde sa propre couleur au survol. */
.st-sel-e.est-actif {
	font-weight: 600;
	border-color: transparent;
	color: #14121c;
}

.st-sel-e--tarots.est-actif          { background-color: #c8a84b; }   /* 6,6:1 */
.st-sel-e--psychique.est-actif       { background-color: #4fa3d4; }   /* 6,64:1 */
.st-sel-e.est-actif:hover,
.st-sel-e.est-actif:focus-visible    { color: #14121c; }
.st-sel-e--tarots.est-actif:hover    { background-color: #e0c870; }
.st-sel-e--psychique.est-actif:hover { background-color: #8fc9ea; }

/* Le libellé court n'existe que sur les écrans vraiment étroits. */
.st-sel-court { display: none; }

/* -------------------------------------------------------------------------
 * ⚠️ SOUS 480 PX : LES DEUX ENTRÉES S'EMPILENT, ELLES NE S'ABRÈGENT PAS.
 *
 * Décision du 28/09 : pas d'abréviation. Libellés entiers sur ordinateur et
 * jusqu'à 480 px, empilés en dessous. Le libellé court ne sert qu'aux écrans
 * très étroits, et c'est « Psychique », jamais « Dév. psychique ».
 * ------------------------------------------------------------------------- */
@media (max-width: 30rem) {
	.st-barre-in {
		flex-direction: column;
		align-items: stretch;
		gap: .6rem;
		padding: .6rem .75rem;
	}
	.st-marque-lien { justify-content: flex-start; }
	.st-sel {
		flex-direction: column;
		align-items: stretch;
		gap: .25rem;
	}
	.st-sel-e { justify-content: center; }
}

@media (max-width: 22rem) {
	.st-sel-long  { display: none; }
	.st-sel-court { display: inline; }
}

/* -------------------------------------------------------------------------
 * LA TYPOGRAPHIE DIFFÉRENCIÉE
 *
 * Mêmes familles, deux traitements, et seulement sur les INTERTITRES. Les h1 et
 * le corps restent identiques : c'est le socle de marque, et les différencier
 * ferait deux sites.
 *
 * Les graisses demandées restent dans les bornes des polices variables déjà
 * hébergées — Cinzel 400-700, Raleway 300-600. Aucun fichier à ajouter.
 * ------------------------------------------------------------------------- */

/* Tarots & Oracles : Cinzel, large et espacé, registre classique. */
body.st-univers-tarots .stu-lies-type,
body.st-univers-tarots .st-intertitre {
	font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
	font-weight: 600;
	font-size: .9375rem;
	letter-spacing: .06em;
	text-transform: none;
}

/* Développement psychique : Raleway en capitales espacées, registre du
   protocole — net, ordonné, sans ornement. */
body.st-univers-psychique .stu-lies-type,
body.st-univers-psychique .st-intertitre {
	font-family: 'Raleway', 'Segoe UI', system-ui, sans-serif;
	font-weight: 600;
	font-size: .75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
	.st-sel-e { transition: none !important; }
}