/* ============================================================================
 * style-custom.css — Child theme Prime FSE / LPO Vendée
 *
 * Ce fichier ne contient QUE les règles qu'on ne peut pas exprimer via
 * theme.json ou les blocs natifs. Chaque bloc est précédé d'un commentaire
 * justifiant pourquoi on ne passe pas par les voies natives.
 * ========================================================================== */


/* --- Wide size fluide : cap à 1600px sur grand écran, 90vw fluide -----------
 * Pourquoi du CSS : theme.json a `wideSize: "1600px"` fixe (pour stabilité
 * de l'UI Mise en page du Site Editor, qui n'accepte pas proprement un
 * `clamp()` dans son input — risque d'écrasement par le slider). On surcharge
 * ici la variable CSS générée à partir de theme.json pour avoir un
 * comportement adaptatif :
 *   - viewport ≥ 1882 px : 1600 px (cap)
 *   - viewport 1294 – 1882 px : 85vw fluide (~15 % de marge totale)
 *   - viewport ≤ 1294 px : 1100 px (cappé par viewport en pratique)
 * Sur MacBook 14" (viewport ~1512 px) : ~1285 px, marges ~113 px / côté.
 * Sur Full HD (1920 px) : 1600 px capé, marges ~160 px / côté.
 * Sur 27" 4K (2560 px) : 1600 px capé, marges ~480 px / côté.
 * -------------------------------------------------------------------------- */
:root {
	--wp--style--global--wide-size: clamp(1100px, 85vw, 1600px);
}

/* --- Content size élargi sur grand écran -----------------------------------
 * Le contentSize (largeur des paragraphes, titres et textes courants) reste
 * à 760 px par défaut (theme.json) — confort de lecture standard avec ~80
 * caractères par ligne. Sur très grand écran, on l'élargit progressivement
 * pour ne pas avoir d'énormes marges vides autour d'une bande de texte fine.
 *
 * Le contentSize reste à 760 px sous 1700 px de viewport (laptop, MacBook
 * 14", écran standard) pour préserver la lecture confort. Au-delà :
 *   - 1700–2200 px : 900 px
 *   - ≥ 2200 px : 1000 px
 * On reste sous 1100 px max — au-delà, la lecture devient inconfortable.
 * -------------------------------------------------------------------------- */
@media (min-width: 1700px) {
	:root {
		--wp--style--global--content-size: 900px;
	}
}
@media (min-width: 2200px) {
	:root {
		--wp--style--global--content-size: 1000px;
	}
}


/* --- Header pill : overlay au-dessus du hero ---------------------------------
 * Pourquoi du CSS ici : theme.json n'expose ni `position` ni `z-index`.
 * Sans ces propriétés, le hero qui a un `margin-top` négatif viendrait
 * passer PAR-DESSUS le header (puisqu'il vient après dans le DOM).
 * On ancre donc le wrapper template-part `<header class="wp-block-template-part">`
 * (généré automatiquement par WP autour de parts/header.html) avec un
 * `position: relative` + z-index élevé pour qu'il reste visible au-dessus
 * du hero. C'est le comportement Landscape : le pill flotte, le hero plein
 * écran passe en arrière-plan.
 * -------------------------------------------------------------------------- */
header.wp-block-template-part {
	position: relative;
	z-index: 20;
}


/* === Glassmorphisme — block styles « glass » et « glass-dark » ==============
 * Pourquoi du CSS ici : theme.json n'expose pas la propriété backdrop-filter
 * (flou d'arrière-plan). C'est l'unique recours pour obtenir l'effet « verre
 * dépoli ». On enregistre deux block styles via register_block_style() dans
 * functions.php (sur core/group, core/cover, core/column, core/columns) puis
 * on attache ces règles CSS via la classe générée par Gutenberg.
 *
 * Usage en éditeur : Styles → sélectionner « Verre » ou « Verre sombre ».
 *
 * Notes :
 *  - `!important` sur le background pour neutraliser un backgroundColor preset
 *    qui serait défini sur le bloc (Gutenberg sérialise sa propre couleur).
 *  - `border` reste subtil pour ne pas casser l'effet vitré.
 *  - `saturate(180%)` ravive les couleurs du fond filtré (sinon ça lave trop).
 *  - Sur navigateurs sans support backdrop-filter (vieux Firefox), le rendu
 *    retombe sur un fond semi-transparent simple — acceptable.
 * -------------------------------------------------------------------------- */
.is-style-glass,
.is-style-glass-dark {
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	        backdrop-filter: blur(14px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: var(--wp--preset--shadow--sm);
}

/* Verre clair — utile sur fond image lumineux ou sur fond clair général */
.is-style-glass {
	background-color: rgba(255, 255, 255, 0.55) !important;
}

/* Verre sombre — utile sur fond image foncé ou sur section colorée
   (bleu LPO, par exemple). Texte forcé en clair pour rester lisible.
   Pour les descendants H1-H6 et liens, on doit utiliser `!important`
   sinon les règles `styles.elements.h1` du theme.json (qui imposent
   color = lpo-ink) gagnent la spécificité. */
.is-style-glass-dark {
	background-color: rgba(25, 25, 25, 0.45) !important;
	color: var(--wp--preset--color--lpo-paper);
	border-color: rgba(255, 255, 255, 0.08);
}
.is-style-glass-dark,
.is-style-glass-dark :is(p, li, span, strong, em, a, h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--lpo-paper) !important;
}


/* --- Glass appliqué à core/button -------------------------------------------
 * Particularité du bloc Button : la classe `is-style-X` est posée sur le
 * wrapper `<div class="wp-block-button">`, pas sur le `<a class="wp-block-button__link">`
 * qui porte le visuel (background, padding, radius). Il faut donc :
 *  1. neutraliser les règles globales `.is-style-glass*` sur le wrapper
 *     (sinon il hérite d'une bordure et d'un blur invisibles mais qui
 *     peuvent générer un fantôme de stacking context)
 *  2. réappliquer l'effet glass sur le `__link` lui-même
 * -------------------------------------------------------------------------- */
.wp-block-button.is-style-glass,
.wp-block-button.is-style-glass-dark {
	-webkit-backdrop-filter: none;
	        backdrop-filter: none;
	border: none;
	box-shadow: none;
	background-color: transparent !important;
}

.wp-block-button.is-style-glass > .wp-block-button__link,
.wp-block-button.is-style-glass-dark > .wp-block-button__link {
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	        backdrop-filter: blur(14px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: var(--wp--preset--shadow--sm);
}

.wp-block-button.is-style-glass > .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.55) !important;
}

.wp-block-button.is-style-glass-dark > .wp-block-button__link {
	background-color: rgba(25, 25, 25, 0.45) !important;
	color: var(--wp--preset--color--lpo-paper) !important;
	border-color: rgba(255, 255, 255, 0.18);
}


/* === Block styles « section avec fond illustré » ============================
 * Trois variantes pour remplacer le fond crème uni des sections alternées :
 *   - section-topo        : motif SVG topographique tileable (lignes ondulées)
 *   - section-carte-rouge : photo "carte rouge" (médiathèque ID 175) opacifiée
 *   - section-carte-papier: photo "cartes papier" (médiathèque ID 176) opacifiée
 *
 * Pour les 2 photos : on superpose l'image via un pseudo-élément ::before en
 * `position:absolute; opacity: 0.12` plutôt que `background-image` direct
 * sur le bloc — c'est le seul moyen d'avoir un vrai contrôle d'opacité sur
 * l'image (les blend-modes donnent des résultats imprévisibles selon le
 * fichier source). `isolation: isolate` crée un stacking context pour que
 * le z-index négatif du pseudo reste contenu, et `overflow: hidden` évite
 * que l'image dépasse sur les sections voisines.
 * -------------------------------------------------------------------------- */

/* Base commune : isolation + overflow pour les sections à fond illustré */
.is-style-section-carte-rouge,
.is-style-section-carte-papier {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--wp--preset--color--lpo-warm-50);
}

.is-style-section-carte-rouge::before,
.is-style-section-carte-papier::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.12;
	pointer-events: none;
}

/* Carte rouge — fichier dans le theme (assets/images/patterns/carte-rouge.jpg).
   Pour changer l'image : remplacer le fichier en gardant le même nom. */
.is-style-section-carte-rouge::before {
	background-image: url('images/patterns/carte-rouge.jpg');
}

/* Cartes papier — fichier dans le theme (assets/images/patterns/carte-papier.jpg). */
.is-style-section-carte-papier::before {
	background-image: url('images/patterns/carte-papier.jpg');
}

/* Motif topographique — fichier vectoriel SVG du theme, répété en tile.
   Couleur de fond `lpo-warm-50` pour rester dans l'esprit crème mais
   avec un motif ondulé qui évoque les courbes de niveau d'une carte. */
.is-style-section-topo {
	background-color: var(--wp--preset--color--lpo-warm-50);
	background-image: url('images/patterns/topographie.svg');
	background-repeat: repeat;
	background-size: 240px 120px;
}


/* === Block style « Oiseau — Pie-grièche (gauche) » =========================
 * Ajoute une 2e couche d'illustration PNG transparente PAR-DESSUS l'image
 * background du Cover existant. Utile pour superposer une silhouette
 * d'oiseau "détourée" sur un hero qui a déjà une photo de fond.
 *
 * Mécanique :
 *  - Pseudo-élément `::before` du Cover, position absolute, inset 0
 *  - `background-image` = illustration PNG transparente
 *  - `background-size: contain` + position `left bottom` pour caler en bas-gauche
 *  - z-index intermédiaire : au-dessus de l'image principale et de l'overlay,
 *    EN-DESSOUS de l'inner-container (pour ne pas masquer le H1/boutons)
 *  - `pointer-events: none` pour ne pas bloquer les clics du contenu
 *
 * Pour ajouter d'autres oiseaux plus tard : dupliquer le bloc en changeant
 * juste le `background-image` (ex. `oiseau-mesange-gauche`, etc.).
 * -------------------------------------------------------------------------- */
.wp-block-cover.is-style-oiseau-piaf-gauche,
.wp-block-group.is-style-oiseau-piaf-gauche {
	position: relative;
}

/* Force le contenu à passer au-dessus du pseudo-élément */
.wp-block-cover.is-style-oiseau-piaf-gauche > .wp-block-cover__inner-container,
.wp-block-group.is-style-oiseau-piaf-gauche > * {
	position: relative;
	z-index: 3;
}

/* Pseudo-élément qui porte l'illustration superposée.
   `mix-blend-mode: luminosity` fait que l'illustration affiche uniquement
   sa luminosité, en empruntant la teinte et la saturation du fond — donc
   le piaf se "fond" dans les couleurs de l'image background. */
.wp-block-cover.is-style-oiseau-piaf-gauche::before,
.wp-block-group.is-style-oiseau-piaf-gauche::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	top: 0;
	width: 50%;
	background-image: url('images/oiseau-piaf-grieche.png');
	background-size: contain;
	background-position: left bottom;
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 2;
	mix-blend-mode: luminosity;
}

/* Sur mobile, on cache l'illustration pour ne pas encombrer le contenu */
@media (max-width: 781px) {
	.wp-block-cover.is-style-oiseau-piaf-gauche::before,
	.wp-block-group.is-style-oiseau-piaf-gauche::before {
		display: none;
	}
}


/* === Sous-menus simples du bloc Navigation =================================
 * Pourquoi du CSS : WP n'expose pas dans le panneau de bloc Navigation les
 * propriétés visuelles (radius, marge top, ombre) du conteneur des sous-menus
 * déroulants. On les surcharge ici pour reproduire le look "rectangle flottant
 * arrondi" de Landscape — cohérent avec le header pill au-dessus.
 *
 * Périmètre : sous-menus simples gérés par WP core
 * (`.wp-block-navigation__submenu-container`). Les mega menus Ollie Menu
 * Designer ont leur propre conteneur et ne sont pas affectés.
 *
 * Spécificité : on doit DÉPASSER la spécificité du parent Prime FSE qui pose
 * son propre style sur le sélecteur
 *   `.wp-block-navigation .has-child .wp-block-navigation__submenu-container`
 * (3 classes = 0,3,0) avec :
 *   - border-radius: 0 0 6px 6px (dropdown "attaché" au parent)
 *   - box-shadow plus diffuse
 *   - padding asymétrique 10px 0 0 10px
 *
 * On ne peut pas s'aligner sur 3 classes : Prime FSE charge en réalité DEUX
 * feuilles (`prime-fse-parent` ET `prime-fse-style` auto-chargée par WP),
 * et `prime-fse-style` arrive APRÈS notre `primefsechild-custom` dans le
 * `<head>` — donc en égalité de spécificité, le parent gagne par ordre.
 * Solution : passer à 4 classes (`.wp-block-navigation-item.has-child`
 * compte 2 classes sur le même élément).
 *
 * Choix esthétiques :
 *  - radius 12px partout : flotte vraiment, look pill arrondi.
 *  - shadow `card` : ombre douce mais bien visible.
 *  - margin-top 8px : détache du parent (sinon il colle, look daté).
 *  - padding 8px symétrique : annule le `10px 0 0 10px` du parent.
 *  - background blanc opaque : lisibilité maximale.
 *  - hover : background lpo-warm-50 + texte lpo-blue, comme Landscape.
 * -------------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--lpo-paper);
	border: 1px solid var(--wp--preset--color--lpo-warm-100);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--lg);
	padding: 8px;
	margin-top: 20px;
	/* Min-width généreux : les libellés du menu LPO sont parfois longs
	   (« OFFRE D'EMPLOIS, STAGES ET SERVICES CIVIQUES » mesuré à 413px
	   en non-wrap) et en uppercase 15px + letter-spacing 0.04em, ils
	   s'enroulent vite. 360px laisse ~316px utiles après padding interne
	   (container 8+8 + content 14+14) : les libellés courts/moyens
	   passent sur 1 ligne, les plus longs tiennent en 2 lignes avec de
	   l'air. Le bloc Navigation core n'expose aucun réglage de largeur
	   de sous-menu dans Gutenberg — d'où le CSS. */
	min-width: 360px;
	/* Le sous-menu doit flotter au-dessus du hero plein écran qui suit le
	   header. Le header pill a z-index 20 (cf. règle plus haut), on monte
	   le sous-menu au-dessus de tout stacking context concurrent. */
	z-index: 50;
}

/* WP core (feuille `wp-block-navigation`) réimpose `min-width: 200px` sur le
 * sous-menu, mais UNIQUEMENT dans ses états visibles — au survol (desktop)
 * et à l'ouverture au clic (toggle `aria-expanded="true"`) — via deux
 * sélecteurs à spécificité (0,5,0). C'est précisément au moment où le menu
 * s'affiche que notre `min-width` de base (0,4,0, ci-dessus) se fait écraser :
 * on ne voit jamais le 360px. On repasse devant en montant à (0,6,0) — on
 * reprend les mêmes états visibles en ajoutant `.wp-block-navigation-item`
 * (une classe de plus, sur le même <li>). Si une future version de core
 * change ces sélecteurs, c'est ici qu'il faudra réaligner. */
.wp-block-navigation .wp-block-navigation-item.has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	min-width: 360px;
}

/* Le thème parent Prime FSE ajoute un séparateur 1px gris sous chaque LI
 * du sous-menu via `.wp-block-navigation .has-child li::after` (position
 * absolute, bottom 0, left/right 20px, bg rgba(14,14,14,0.2)). Cette
 * border colle visuellement au bg du hover (le `__content` du hover prend
 * toute la hauteur du LI). On la supprime — le rythme visuel des items
 * est déjà donné par leur padding + le hover crème, et le séparateur
 * apparaîtrait aussi sous le dernier item (moche). */
.wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item::after,
.wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container li::after {
	display: none;
}

/* Pont invisible entre l'item parent et le sous-menu.
 * Sans ce pont, quand la souris descend du label parent vers le sous-menu,
 * elle traverse les 20px de `margin-top` qui sont HORS de la bounding box
 * du LI parent → le `:hover` se perd → le sous-menu se referme avant que
 * la souris ne l'atteigne. Le ::before couvre exactement cette zone, en
 * tant que descendant du sous-menu (lui-même descendant du LI parent),
 * il maintient le `:hover` actif sur toute la chaîne.
 * IMPORTANT : la `height` du pont doit toujours égaler le `margin-top` du
 * sous-menu. Si tu changes l'un, change l'autre. */
.wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;
	height: 20px;
	/* Pas de background : le pont reste invisible, on veut seulement
	   capturer le pointeur. */
}

/* Items du sous-menu : padding confortable + radius interne pour que le hover
   reste dans le rectangle arrondi (sinon le hover déborde aux coins). */
.wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 14px;
	border-radius: 8px;
	color: var(--wp--preset--color--lpo-ink);
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Le `__content` est en `display: flex` (pour aligner le chevron à droite
 * sur les items qui ont un sous-sous-menu). Conséquence : `text-wrap` posé
 * sur lui ne s'applique PAS au texte des enfants. Le texte réel est dans
 * `.wp-block-navigation-item__label` (span enfant du <a>), c'est là qu'il
 * faut équilibrer le wrapping.
 *
 * `text-wrap: balance` répartit les mots harmonieusement quand le libellé
 * wrap — au lieu d'une ligne 1 longue et une ligne 2 courte, on obtient
 * deux lignes de longueur proche. Supporté Chrome 114+, Safari 17.4+,
 * Firefox 121+. Fallback gracieux : wrapping classique. */
.wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	text-wrap: balance;
}

.wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background-color: var(--wp--preset--color--lpo-warm-50);
	color: var(--wp--preset--color--lpo-blue);
}

/* Sous-sous-menu (niveau 3+) : on remonte légèrement et on décale à droite
   pour ne pas chevaucher le parent. WP positionne déjà en absolute, on
   ajuste uniquement margin-top et l'offset latéral. */
.wp-block-navigation .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	margin-top: -8px;
	margin-left: 4px;
}

/* Chevron d'ouverture du sous-menu : un poil d'espace pour ne pas qu'il
   colle au libellé. */
.wp-block-navigation .wp-block-navigation__submenu-icon {
	padding-left: 4px;
}


/* === Bascule hamburger anticipée (≤ 1023px) ================================
 * Problème : la barre de menu (6 entrées + logo + bouton « Mon espace »)
 * a besoin d'environ 1468px pour tenir sur une seule ligne. Avec le pill en
 * `clamp(1100px, 85vw, 1600px)`, elle ne tient inline qu'au-dessus de
 * ~1700px de viewport → en dessous, elle wrappe sur plusieurs lignes.
 *
 * Le hamburger natif de WP (overlay plein écran) ne s'active lui qu'en
 * dessous de 600px, via deux règles core dans `@media (min-width: 600px)` :
 *   - cache le bouton hamburger : `.…-open:not(.always-shown)`            (0,2,0)
 *   - affiche le menu inline : `.…container:not(.hidden-by-default):not(.is-menu-open)` (0,3,0)
 *
 * On relève ce seuil à 1024px : sur tablette + mobile on bascule sur
 * l'overlay (qui supprime tout wrap), au-dessus de 1024px la barre inline
 * reste. On surcharge les deux règles core dans la plage 600 → 1023.98px,
 * sans `!important`, en dépassant leur spécificité. L'état `.is-menu-open`
 * n'est jamais ciblé → l'overlay s'ouvre normalement au clic à ces largeurs
 * (vérifié : le mécanisme overlay n'est pas borné par un min-width).
 * -------------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1023.98px) {
	/* Réafficher le bouton hamburger (0,3,0 > core 0,2,0). */
	.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	/* Masquer le menu inline tant qu'il n'est pas ouvert en overlay
	   (0,5,0 > core 0,3,0). */
	.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}


/* === Aplatissement des sous-menus dans l'overlay mobile ====================
 * Dans l'overlay plein écran (`.is-menu-open`), nos sous-menus héritent du
 * style « carte flottante » conçu pour le dropdown desktop (radius, ombre,
 * min-width 360, marge top + pont ::before) — empilés dans l'overlay, ça
 * donne des cartes incohérentes. On les remet à plat : pleine largeur, pas
 * d'ombre/bordure/radius, légère indentation pour matérialiser la hiérarchie.
 *
 * Spécificité : on préfixe par `.wp-block-navigation` pour atteindre (0,6,0)
 * et, placé après, ce bloc gagne aussi sur l'override min-width (0,6,0) du
 * dropdown desktop, qui pourrait sinon réimposer 360px sur les sous-menus
 * dont le toggle est `aria-expanded="true"` dans l'overlay. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	position: static;
	box-shadow: none;
	border: none;
	border-radius: 0;
	background: transparent;
	min-width: 0;
	margin-top: 0;
	padding: 0 0 0 12px;
}
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container::before {
	display: none; /* pas de pont invisible dans l'overlay */
}


/* === MON ESPACE (plugin elito-mon-espace) =================================
 * Habillage des onglets (bloc elito/nav), de la zone de rendu (elito/outlet),
 * des formulaires et des messages. 100% tokens theme.json LPO : aucune valeur
 * en dur (couleurs/espacements/ombres/radius viennent des presets du child).
 * Le plugin reste sans présentation ; tout le style vit ici, côté thème. */

/* Barre au-dessus des onglets : Tableau de bord (gauche) + Déconnexion (droite). */
.mespace-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--small);
	margin-bottom: var(--wp--preset--spacing--small);
}
.mespace-bar__left {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--small);
	flex-wrap: wrap;
}
.mespace-bar__home,
.mespace-bar__admin,
.mespace-bar__logout {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	color: var(--wp--preset--color--lpo-warm-700);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.mespace-bar__home:hover,
.mespace-bar__logout:hover {
	color: var(--wp--preset--color--lpo-blue);
	background: var(--wp--preset--color--lpo-warm-50);
}
/* Bouton admin : bordé bleu pour le distinguer comme une action. */
.mespace-bar__admin {
	border: 1px solid var(--wp--preset--color--lpo-blue);
	color: var(--wp--preset--color--lpo-blue);
}
.mespace-bar__admin:hover {
	background: var(--wp--preset--color--lpo-blue);
	color: var(--wp--preset--color--lpo-paper);
}
.mespace-bar .mespace-ic { flex: none; }

/* Onglets : pills horizontales scrollables, actif = bleu LPO plein. */
.mespace-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--small);
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--normal);
	padding: 0;
}
.mespace-nav__item { margin: 0; }
.mespace-tab {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--wp--preset--color--lpo-warm-100);
	color: var(--wp--preset--color--lpo-ink);
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.mespace-tab:hover,
.mespace-tab:focus-visible {
	background: var(--wp--preset--color--lpo-warm-50);
	box-shadow: var(--wp--preset--shadow--pill);
}
.mespace-tab.is-active {
	background: var(--wp--preset--color--lpo-blue);
	color: var(--wp--preset--color--lpo-paper);
	box-shadow: var(--wp--preset--shadow--glow-blue);
}

/* Onglets réservés aux gestionnaires/admins : teinte orange pour distinguer
 * d'un coup d'œil ce qui s'adresse aux admins (vs aux membres).
 * Ajouter ici le slug de tout nouvel onglet admin (classe mespace-tab--{slug}). */
.mespace-tab--documents,
.mespace-tab--admin-benevolat {
	color: var(--wp--preset--color--lpo-orange);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--lpo-orange);
}
.mespace-tab--documents:hover,
.mespace-tab--documents:focus-visible,
.mespace-tab--admin-benevolat:hover,
.mespace-tab--admin-benevolat:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--lpo-orange) 14%, var(--wp--preset--color--lpo-warm-50));
}
.mespace-tab--documents.is-active,
.mespace-tab--admin-benevolat.is-active {
	background: var(--wp--preset--color--lpo-orange);
	color: var(--wp--preset--color--lpo-paper);
	box-shadow: none;
}

/* Conteneur dashboard : padding vertical (insensible au margin-collapsing du
 * thème) pour garantir l'air en haut et en bas, sans coller header/footer. */
.mespace-dashboard {
	padding-block: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--section-tight);
}

/* Zone de rendu de la section courante : panneau crème qui porte des cartes. */
.mespace-outlet {
	background: var(--wp--preset--color--lpo-warm-50);
	border-radius: 16px;
	box-shadow: var(--wp--preset--shadow--card);
	padding: var(--wp--preset--spacing--medium);
}

/* Accueil rendu « nu » : pas de panneau crème, la page gère ses propres fonds. */
.mespace-outlet--bare {
	background: none;
	box-shadow: none;
	padding: 0;
}

/* Carte blanche posée sur le panneau crème (ex. « Mon profil », « Mes infos »). */
.mespace-card {
	background: var(--wp--preset--color--lpo-paper);
	border-radius: 14px;
	box-shadow: var(--wp--preset--shadow--sm);
	padding: var(--wp--preset--spacing--normal);
}
.mespace-card + .mespace-card { margin-top: var(--wp--preset--spacing--medium); }
.mespace-card > :first-child { margin-top: 0; }
.mespace-card > :last-child { margin-bottom: 0; }
.mespace-card h2 { margin-bottom: var(--wp--preset--spacing--small); }

/* Grille de cartes vers les sections (bloc « Cartes de l'espace »). */
.mespace-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--medium);
}
/* Espace entre le message de bienvenue (carte) et la grille de cartes. */
.mespace-card + .mespace-cards,
.wp-block-group + .mespace-cards {
	margin-top: var(--wp--preset--spacing--normal);
}

/* Placeholder d'aperçu des blocs dynamiques dans l'éditeur. */
.mespace-editor-ph {
	border: 1px dashed var(--wp--preset--color--lpo-warm-300, #a8a095);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--normal);
	text-align: center;
	background: var(--wp--preset--color--lpo-warm-50, #f7f4ee);
}
.mespace-editor-ph__title {
	display: block;
	font-family: var(--wp--preset--font-family--lpo);
	font-size: var(--wp--preset--font-size--medium);
}
.mespace-editor-ph__desc {
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--lpo-warm-700);
}
.mespace-section-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--wp--preset--color--lpo-paper);
	border-radius: 14px;
	border-top: 3px solid var(--wp--preset--color--lpo-blue);
	box-shadow: var(--wp--preset--shadow--card);
	padding: var(--wp--preset--spacing--normal);
	text-decoration: none;
	color: var(--wp--preset--color--lpo-ink);
	transition: box-shadow 0.15s ease, transform 0.05s ease;
}
.mespace-section-card:hover {
	box-shadow: var(--wp--preset--shadow--lg);
	transform: translateY(-2px);
}
.mespace-section-card__title {
	font-family: var(--wp--preset--font-family--lpo);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.15;
}
.mespace-section-card__desc {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--lpo-warm-700);
}
.mespace-section-card__more {
	margin-top: auto;
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--lpo-blue);
}
.mespace-section-card__more::after { content: " →"; }

/* Formulaires : champs empilés, libellés en Sora. */
.mespace-form { margin: 0; }
.mespace-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 var(--wp--preset--spacing--medium);
}
.mespace-field > label,
.mespace-field > legend {
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}
.mespace-form input[type="text"],
.mespace-form input[type="email"],
.mespace-form input[type="password"] {
	width: 100%;
	max-width: 460px;
	padding: 10px 14px;
	border: 1px solid var(--wp--preset--color--lpo-warm-100);
	border-radius: 10px;
	background: var(--wp--preset--color--lpo-paper);
	font-size: var(--wp--preset--font-size--normal);
}
.mespace-form input:focus {
	outline: none;
	border-color: var(--wp--preset--color--lpo-blue);
	box-shadow: var(--wp--preset--shadow--glow-blue);
}
.mespace-hint {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--lpo-warm-700);
}
.mespace-optin,
.mespace-form fieldset {
	border: 1px solid var(--wp--preset--color--lpo-warm-100);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--medium);
}
.mespace-radio { display: block; margin: 4px 0; }

/* Boutons des formulaires du plugin : pill conforme au thème (comme core/button). */
.mespace-actions .wp-element-button {
	display: inline-block;
	border: 0;
	border-radius: 999px;
	padding: 14px 28px;
	background: var(--wp--preset--color--lpo-blue);
	color: var(--wp--preset--color--lpo-paper);
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--normal);
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.mespace-actions .wp-element-button:hover {
	background: var(--wp--preset--color--lpo-ink);
	box-shadow: var(--wp--preset--shadow--md);
}
.mespace-actions .wp-element-button:active { transform: translateY(1px); }

/* Conseil mot de passe robuste (page réinitialisation). */
.mespace-pw-tip {
	background: var(--wp--preset--color--lpo-warm-100);
	border-radius: 10px;
	padding: 10px 14px;
	margin: 0 0 var(--wp--preset--spacing--medium);
}

/* === Connexion : message de bienvenue + carte habillant wp_login_form ====== */
.mespace-login {
	max-width: 440px;
	margin-inline: auto;
	/* L'air vertical est porté par .mespace-dashboard (padding, anti-collapsing). */
}
/* Avec panneau de bienvenue : passage en deux colonnes, plus large. */
.mespace-login.has-welcome { max-width: 980px; }
.mespace-login__layout {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--wp--preset--spacing--normal);
}
.mespace-login.has-welcome .mespace-login__card,
.mespace-login.has-welcome .mespace-login__welcome {
	flex: 1 1 360px;
}

/* Panneau de bienvenue : bloc bleu LPO, texte clair. */
.mespace-login__welcome {
	background: var(--wp--preset--color--lpo-blue);
	color: var(--wp--preset--color--lpo-paper);
	border-radius: 18px;
	box-shadow: var(--wp--preset--shadow--panel);
	padding: var(--wp--preset--spacing--large);
}
.mespace-login__welcome > :first-child { margin-top: 0; }
.mespace-login__welcome > :last-child { margin-bottom: 0; }
.mespace-login__welcome strong {
	font-family: var(--wp--preset--font-family--lpo);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	display: inline-block;
	margin-bottom: 4px;
}
.mespace-login__welcome a {
	color: var(--wp--preset--color--lpo-paper);
	text-decoration: underline;
}
.mespace-login__card {
	background: var(--wp--preset--color--lpo-paper);
	border-radius: 18px;
	border-top: 4px solid var(--wp--preset--color--lpo-blue);
	box-shadow: var(--wp--preset--shadow--panel);
	padding: var(--wp--preset--spacing--large);
}
.mespace-login__title {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--lpo);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--big);
	color: var(--wp--preset--color--lpo-ink);
}
.mespace-login__intro {
	margin: 0 0 var(--wp--preset--spacing--normal);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--lpo-warm-700);
}

/* Champs du formulaire natif (#loginform) */
.mespace-login #loginform p { margin: 0 0 var(--wp--preset--spacing--medium); }
.mespace-login #loginform label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--lpo-ink);
}
.mespace-login #loginform input.input,
.mespace-login #loginform input[type="text"],
.mespace-login #loginform input[type="password"] {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--wp--preset--color--lpo-warm-100);
	border-radius: 10px;
	background: var(--wp--preset--color--lpo-warm-50);
	font-size: var(--wp--preset--font-size--normal);
	box-sizing: border-box;
}
.mespace-login #loginform input.input:focus,
.mespace-login #loginform input[type="password"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--lpo-blue);
	background: var(--wp--preset--color--lpo-paper);
	box-shadow: var(--wp--preset--shadow--glow-blue);
}

/* « Se souvenir de moi » : case + libellé en ligne, discret */
.mespace-login #loginform .login-remember label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	color: var(--wp--preset--color--lpo-warm-700);
}
.mespace-login #loginform .login-remember input { margin: 0; }

/* Bouton : pill bleu LPO pleine largeur */
.mespace-login #loginform .login-submit { margin-bottom: 0; }
.mespace-login #loginform #wp-submit {
	width: 100%;
	padding: 13px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--lpo-blue);
	color: var(--wp--preset--color--lpo-paper);
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--normal);
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.mespace-login #loginform #wp-submit:hover {
	background: var(--wp--preset--color--lpo-ink);
	box-shadow: var(--wp--preset--shadow--md);
}
.mespace-login #loginform #wp-submit:active { transform: translateY(1px); }

/* Lien mot de passe oublié, centré et discret */
.mespace-lostpassword {
	margin: var(--wp--preset--spacing--medium) 0 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
}

/* CTA inscription sous le formulaire de connexion */
.mespace-login__register {
	margin-top: var(--wp--preset--spacing--medium);
	padding-top: var(--wp--preset--spacing--medium);
	border-top: 1px solid var(--wp--preset--color--lpo-warm-100);
	text-align: center;
}
.mespace-login__register p {
	margin: 0 0 var(--wp--preset--spacing--small);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--lpo-warm-700);
}
.mespace-btn-secondary {
	display: inline-block;
	padding: 11px 24px;
	border-radius: 999px;
	background: var(--wp--preset--color--lpo-orange);
	color: var(--wp--preset--color--lpo-paper);
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.mespace-btn-secondary:hover { background: var(--wp--preset--color--lpo-ink); }

/* === Inscription ========================================================== */
.mespace-register {
	max-width: 640px;
	margin-inline: auto;
	background: var(--wp--preset--color--lpo-warm-50);
	border-radius: 18px;
	border-top: 4px solid var(--wp--preset--color--lpo-blue);
	box-shadow: var(--wp--preset--shadow--panel);
	padding: var(--wp--preset--spacing--large);
}
.mespace-register__title {
	margin: 0 0 var(--wp--preset--spacing--normal);
	font-family: var(--wp--preset--font-family--lpo);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--big);
	color: var(--wp--preset--color--lpo-ink);
}
.mespace-register__back {
	margin: var(--wp--preset--spacing--normal) 0 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
}

/* Honeypot : invisible pour les humains, présent pour les bots. */
.mespace-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Messages (PRG). */
.mespace-notice {
	margin: 0 0 var(--wp--preset--spacing--normal);
	padding: 12px 18px;
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--small);
}
.mespace-notice--success {
	background: rgba(0, 135, 205, 0.10);
	color: var(--wp--preset--color--lpo-warm-700);
}
.mespace-notice--error {
	background: rgba(245, 95, 25, 0.12);
	color: var(--wp--preset--color--lpo-warm-700);
}
.mespace-notice--info {
	background: var(--wp--preset--color--lpo-warm-100);
	color: var(--wp--preset--color--lpo-warm-700);
}