/* ============================================================================
 * Mon espace — habillage des blocs et formulaires du plugin.
 *
 * HISTORIQUE / POURQUOI ICI : ce style vivait à l'origine dans le child theme
 * LPO Vendée (primefsechild/assets/style-custom.css), écrit en presets
 * theme.json LPO (--wp--preset--color--lpo-*, fonts lpo/sora). Résultat : sur
 * tout AUTRE site (ex. La Levée de la Loire), les blocs rendaient sans aucun
 * style. Rapatrié dans le plugin (2026-06) et réécrit en TOKENS NEUTRES.
 *
 * FONCTIONNEMENT : toutes les valeurs passent par des variables --mespace-*
 * définies ci-dessous avec des défauts sobres (gris/ardoise lisibles partout).
 * Chaque site mappe sa charte en ~10 lignes dans le CSS de SON child theme :
 *
 *   :root {
 *     --mespace-accent: var(--wp--preset--color--primary);
 *     --mespace-font-ui: "Source Sans 3", sans-serif;
 *     … (voir la liste des tokens ci-dessous)
 *   }
 *
 * Chargement : handle « mespace-ui » référencé par les block.json (style +
 * editorStyle) → enfilé seulement quand un bloc du plugin est rendu ; les
 * shortcodes l'enfilent aussi explicitement (voir class-mespace-blocks.php).
 * ========================================================================== */

:root {
	/* ── Couleurs ─────────────────────────────────────────────────────── */
	--mespace-accent: #3a5e7e;        /* accent principal : onglet actif, liens, boutons */
	--mespace-accent-2: #b06030;      /* accent secondaire : onglets admin, CTA alternatif */
	--mespace-ink: #1f2428;           /* texte principal */
	--mespace-paper: #ffffff;         /* fond des cartes */
	--mespace-soft: #f5f5f2;          /* fond doux (panneau de section) */
	--mespace-line: #e4e2dd;          /* bordures + fonds de puces */
	--mespace-line-strong: #b9b4ab;   /* bordures appuyées (pointillés éditeur) */
	--mespace-muted: #6b6b66;         /* texte secondaire */

	/* ── Typographies (inherit = celles du thème par défaut) ─────────── */
	--mespace-font-heading: inherit;  /* titres (cartes, connexion) */
	--mespace-font-ui: inherit;       /* libellés, onglets, boutons */

	/* ── Tailles de texte ─────────────────────────────────────────────── */
	--mespace-fs-small: 0.875rem;
	--mespace-fs-normal: 1rem;
	--mespace-fs-medium: 1.125rem;
	--mespace-fs-large: 1.375rem;
	--mespace-fs-big: 1.75rem;

	/* ── Espacements ──────────────────────────────────────────────────── */
	--mespace-sp-small: 0.75rem;
	--mespace-sp-normal: 1.25rem;
	--mespace-sp-medium: 1.75rem;
	--mespace-sp-large: 2.5rem;
	--mespace-sp-section: 4rem;

	/* ── Ombres ───────────────────────────────────────────────────────── */
	--mespace-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
	--mespace-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.10);
	--mespace-shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.12);
	--mespace-shadow-card: 0 6px 22px rgba(0, 0, 0, 0.06);
	--mespace-shadow-panel: 0 10px 34px rgba(0, 0, 0, 0.08);
	--mespace-shadow-pill: 0 2px 8px rgba(0, 0, 0, 0.08);
	--mespace-shadow-glow: 0 0 0 3px color-mix(in srgb, var(--mespace-accent) 22%, transparent);
}

/* 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(--mespace-sp-small);
	margin-bottom: var(--mespace-sp-small);
}
.mespace-bar__left {
	display: flex;
	align-items: center;
	gap: var(--mespace-sp-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(--mespace-font-ui);
	font-weight: 600;
	font-size: var(--mespace-fs-small);
	text-decoration: none;
	color: var(--mespace-muted);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.mespace-bar__home:hover,
.mespace-bar__logout:hover {
	color: var(--mespace-accent);
	background: var(--mespace-soft);
}
/* Bouton admin : bordé accent pour le distinguer comme une action. */
.mespace-bar__admin {
	border: 1px solid var(--mespace-accent);
	color: var(--mespace-accent);
}
.mespace-bar__admin:hover {
	background: var(--mespace-accent);
	color: var(--mespace-paper);
}
.mespace-bar .mespace-ic { flex: none; }

/* Onglets : pills horizontales, actif = accent plein. */
.mespace-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mespace-sp-small);
	list-style: none;
	margin: 0 0 var(--mespace-sp-normal);
	padding: 0;
}
.mespace-nav__item { margin: 0; }
.mespace-tab {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--mespace-line);
	color: var(--mespace-ink);
	font-family: var(--mespace-font-ui);
	font-weight: 600;
	font-size: var(--mespace-fs-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(--mespace-soft);
	box-shadow: var(--mespace-shadow-pill);
}
.mespace-tab.is-active {
	background: var(--mespace-accent);
	color: var(--mespace-paper);
	box-shadow: var(--mespace-shadow-glow);
}

/* Onglets « gestionnaire » : teinte accent-2 pour distinguer d'un coup d'œil
 * ce qui s'adresse aux admins (vs aux membres). OPT-IN PAR SITE : la classe
 * `mespace-tab--manager` n'est posée que sur les slugs déclarés via le filtre
 * `mespace_manager_tab_slugs` (vide par défaut) — plus aucun slug codé en dur
 * ici (l'ancien ciblage --documents/--admin-benevolat imposait le look LPO à
 * tous les sites). */
.mespace-tab--manager {
	color: var(--mespace-accent-2);
	box-shadow: inset 0 0 0 1px var(--mespace-accent-2);
}
.mespace-tab--manager:hover,
.mespace-tab--manager:focus-visible {
	background: color-mix(in srgb, var(--mespace-accent-2) 14%, var(--mespace-soft));
}
.mespace-tab--manager.is-active {
	background: var(--mespace-accent-2);
	color: var(--mespace-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(--mespace-sp-medium) var(--mespace-sp-section);
}

/* Zone de rendu de la section courante : panneau doux qui porte des cartes. */
.mespace-outlet {
	background: var(--mespace-soft);
	border-radius: 16px;
	box-shadow: var(--mespace-shadow-card);
	padding: var(--mespace-sp-medium);
}

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

/* Carte posée sur le panneau doux (ex. « Mon profil », « Mes infos »). */
.mespace-card {
	background: var(--mespace-paper);
	border-radius: 14px;
	box-shadow: var(--mespace-shadow-sm);
	padding: var(--mespace-sp-normal);
}
.mespace-card + .mespace-card { margin-top: var(--mespace-sp-medium); }
.mespace-card > :first-child { margin-top: 0; }
.mespace-card > :last-child { margin-bottom: 0; }
.mespace-card h2 { margin-bottom: var(--mespace-sp-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(--mespace-sp-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(--mespace-sp-normal);
}

/* Placeholder d'aperçu des blocs dynamiques dans l'éditeur. */
.mespace-editor-ph {
	border: 1px dashed var(--mespace-line-strong);
	border-radius: 12px;
	padding: var(--mespace-sp-normal);
	text-align: center;
	background: var(--mespace-soft);
}
.mespace-editor-ph__title {
	display: block;
	font-family: var(--mespace-font-heading);
	font-size: var(--mespace-fs-medium);
}
.mespace-editor-ph__desc {
	margin: 6px 0 0;
	font-size: var(--mespace-fs-small);
	color: var(--mespace-muted);
}

/* Carte-lien vers une section (grille de l'accueil). */
.mespace-section-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--mespace-paper);
	border-radius: 14px;
	border-top: 3px solid var(--mespace-accent);
	box-shadow: var(--mespace-shadow-card);
	padding: var(--mespace-sp-normal);
	text-decoration: none;
	color: var(--mespace-ink);
	transition: box-shadow 0.15s ease, transform 0.05s ease;
}
.mespace-section-card:hover {
	box-shadow: var(--mespace-shadow-lg);
	transform: translateY(-2px);
}
.mespace-section-card__title {
	font-family: var(--mespace-font-heading);
	font-weight: 700;
	font-size: var(--mespace-fs-large);
	line-height: 1.15;
}
.mespace-section-card__desc {
	font-size: var(--mespace-fs-small);
	color: var(--mespace-muted);
}
.mespace-section-card__more {
	margin-top: auto;
	font-family: var(--mespace-font-ui);
	font-weight: 600;
	font-size: var(--mespace-fs-small);
	color: var(--mespace-accent);
}
.mespace-section-card__more::after { content: " →"; }

/* Formulaires : champs empilés, libellés en font UI. */
.mespace-form { margin: 0; }
.mespace-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 var(--mespace-sp-medium);
}
.mespace-field > label,
.mespace-field > legend {
	font-family: var(--mespace-font-ui);
	font-weight: 600;
	font-size: var(--mespace-fs-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(--mespace-line);
	border-radius: 10px;
	background: var(--mespace-paper);
	font-size: var(--mespace-fs-normal);
}
.mespace-form input:focus {
	outline: none;
	border-color: var(--mespace-accent);
	box-shadow: var(--mespace-shadow-glow);
}
.mespace-hint {
	font-size: var(--mespace-fs-small);
	color: var(--mespace-muted);
}
.mespace-optin,
.mespace-form fieldset {
	border: 1px solid var(--mespace-line);
	border-radius: 12px;
	padding: var(--mespace-sp-medium);
}
.mespace-radio { display: block; margin: 4px 0; }

/* Boutons des formulaires du plugin : pill accent (comme core/button). */
.mespace-actions .wp-element-button {
	display: inline-block;
	border: 0;
	border-radius: 999px;
	padding: 14px 28px;
	background: var(--mespace-accent);
	color: var(--mespace-paper);
	font-family: var(--mespace-font-ui);
	font-weight: 700;
	font-size: var(--mespace-fs-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(--mespace-ink);
	box-shadow: var(--mespace-shadow-md);
}
.mespace-actions .wp-element-button:active { transform: translateY(1px); }

/* Conseil mot de passe robuste (page réinitialisation). */
.mespace-pw-tip {
	background: var(--mespace-line);
	border-radius: 10px;
	padding: 10px 14px;
	margin: 0 0 var(--mespace-sp-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(--mespace-sp-normal);
}
.mespace-login.has-welcome .mespace-login__card,
.mespace-login.has-welcome .mespace-login__welcome {
	flex: 1 1 360px;
}

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

/* Champs du formulaire natif (#loginform) */
.mespace-login #loginform p { margin: 0 0 var(--mespace-sp-medium); }
.mespace-login #loginform label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--mespace-font-ui);
	font-weight: 600;
	font-size: var(--mespace-fs-small);
	color: var(--mespace-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(--mespace-line);
	border-radius: 10px;
	background: var(--mespace-soft);
	font-size: var(--mespace-fs-normal);
	box-sizing: border-box;
}
.mespace-login #loginform input.input:focus,
.mespace-login #loginform input[type="password"]:focus {
	outline: none;
	border-color: var(--mespace-accent);
	background: var(--mespace-paper);
	box-shadow: var(--mespace-shadow-glow);
}

/* « 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(--mespace-muted);
}
.mespace-login #loginform .login-remember input { margin: 0; }

/* Bouton : pill accent 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(--mespace-accent);
	color: var(--mespace-paper);
	font-family: var(--mespace-font-ui);
	font-weight: 700;
	font-size: var(--mespace-fs-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(--mespace-ink);
	box-shadow: var(--mespace-shadow-md);
}
.mespace-login #loginform #wp-submit:active { transform: translateY(1px); }

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

/* CTA inscription sous le formulaire de connexion */
.mespace-login__register {
	margin-top: var(--mespace-sp-medium);
	padding-top: var(--mespace-sp-medium);
	border-top: 1px solid var(--mespace-line);
	text-align: center;
}
.mespace-login__register p {
	margin: 0 0 var(--mespace-sp-small);
	font-size: var(--mespace-fs-small);
	color: var(--mespace-muted);
}
.mespace-btn-secondary {
	display: inline-block;
	padding: 11px 24px;
	border-radius: 999px;
	background: var(--mespace-accent-2);
	color: var(--mespace-paper);
	font-family: var(--mespace-font-ui);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.mespace-btn-secondary:hover { background: var(--mespace-ink); }

/* === Inscription ========================================================== */
.mespace-register {
	max-width: 640px;
	margin-inline: auto;
	background: var(--mespace-soft);
	border-radius: 18px;
	border-top: 4px solid var(--mespace-accent);
	box-shadow: var(--mespace-shadow-panel);
	padding: var(--mespace-sp-large);
}
.mespace-register__title {
	margin: 0 0 var(--mespace-sp-normal);
	font-family: var(--mespace-font-heading);
	font-weight: 900;
	font-size: var(--mespace-fs-big);
	color: var(--mespace-ink);
}
.mespace-register__back {
	margin: var(--mespace-sp-normal) 0 0;
	text-align: center;
	font-size: var(--mespace-fs-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(--mespace-sp-normal);
	padding: 12px 18px;
	border-radius: 10px;
	font-size: var(--mespace-fs-small);
}
.mespace-notice--success {
	background: color-mix(in srgb, var(--mespace-accent) 10%, transparent);
	color: var(--mespace-muted);
}
.mespace-notice--error {
	background: color-mix(in srgb, var(--mespace-accent-2) 12%, transparent);
	color: var(--mespace-muted);
}
.mespace-notice--info {
	background: var(--mespace-line);
	color: var(--mespace-muted);
}