/*
Theme Name: CATSS
Theme URI: https://reseau-catss.fr
Author: Twixtech
Description: Thème de blocs sur mesure pour le CATSS — Comité Associatif des Troubles du Sommeil Stéphanois. Palette et typographie relevées dans le rapport d'activité 2025. Polices auto-hébergées (aucun appel externe, conforme RGPD), contrastes vérifiés AA.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: catss
Tags: block-patterns, full-site-editing, accessibility-ready, one-column
*/

/* -----------------------------------------------------------------------------
 * L'essentiel du design vit dans theme.json. Ce fichier ne porte que ce qui ne
 * s'y exprime pas : les composants signature de la charte et les règles
 * d'accessibilité.
 * -------------------------------------------------------------------------- */


/* =============================================================================
 * 1. LA BARRE — motif signature de la charte
 * =============================================================================
 * Dans le rapport d'activité, une barre bleu-gris traverse le titre de
 * couverture, souligne chaque titre de page et ferme la quatrième de
 * couverture. C'est l'élément graphique le plus reconnaissable du document.
 *
 * Réalisée en background-image plutôt qu'en pseudo-élément : un background est
 * peint derrière le texte par nature, sans z-index négatif — qui casserait dès
 * que le titre est posé sur un conteneur ayant lui-même un fond.
 */
.catss-titre-barre {
	background-image: linear-gradient(
		var(--wp--preset--color--trait),
		var(--wp--preset--color--trait)
	);
	background-repeat: no-repeat;
	background-size: 100% 0.16em;
	background-position: 0 82%;
	padding-inline: 1.25em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Sur un fond sombre, le bleu-gris disparaît : on passe à l'or. */
.has-encre-background-color .catss-titre-barre,
.has-marque-background-color .catss-titre-barre {
	background-image: linear-gradient(
		var(--wp--preset--color--signal-or),
		var(--wp--preset--color--signal-or)
	);
}

/* Séparateur reprenant la barre pleine largeur (4e de couverture). */
.wp-block-separator.is-style-catss-barre {
	height: 0.75rem;
	border: 0;
	background-color: var(--wp--preset--color--trait);
	opacity: 1;
	max-width: none;
	width: 100%;
}


/* =============================================================================
 * 2. CARTOUCHES ET PASTILLES
 * =============================================================================
 * Le rapport empile trois formes arrondies : la pilule de rubrique (rayon égal
 * à la moitié de la hauteur), le cartouche de section (rayon fixe généreux) et
 * le badge d'angle ancré au bord de page.
 */
.catss-pilule {
	display: inline-block;
	padding: 0.45em 1.4em;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.35;
}

.catss-cartouche {
	border-radius: 18px;
	padding: var(--wp--preset--spacing--50);
}

/* Badge ancré au bord droit, comme le bandeau « RAPPORT D'ACTIVITÉ CATSS-2025 ». */
.catss-badge-angle {
	display: inline-block;
	padding: 0.6em 1.6em;
	border-start-start-radius: 999px;
	border-end-start-radius: 999px;
	background-color: var(--wp--preset--color--surface-chrome);
	color: var(--wp--preset--color--encre);
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Gros chiffre de section sur disque, débordant de la marge (pages 10 à 14). */
.catss-chiffre {
	display: inline-grid;
	place-items: center;
	inline-size: 2.6em;
	block-size: 2.6em;
	border-radius: 50%;
	background-color: var(--wp--preset--color--signal-or);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--marque);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1;
}


/* =============================================================================
 * 3. ACCESSIBILITÉ
 * ============================================================================= */

/*
 * Garde-fou de contraste.
 *
 * Le document imprimé pose du texte blanc sur le bleu-gris #7D96B2 (page 12 :
 * « Conférences sommeil », les pastilles de légende, l'étiquette « 1500
 * PERSONNES »). Le rapport plafonne à 2,2:1, très en deçà des 4,5:1 exigés.
 * À l'écran on bascule sur le bleu nuit, qui atteint 5,8:1 sur ce même fond.
 * Même raisonnement pour l'or, l'orange et le rose, qui ne portent pas de
 * texte blanc.
 */
.has-trait-background-color,
.has-signal-or-background-color,
.has-signal-orange-background-color,
.has-signal-rose-background-color,
.has-signal-lune-background-color,
.has-signal-lavande-background-color,
.has-surface-froide-background-color {
	color: var(--wp--preset--color--encre);
}

/* Focus visible et homogène — jamais supprimé. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--marque);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Sur fond sombre, l'or se détache mieux que le bleu. */
.has-encre-background-color :where(a, button, summary):focus-visible {
	outline-color: var(--wp--preset--color--signal-or);
}

/* Lien d'évitement (WordPress l'injecte pour les thèmes de blocs). */
.skip-link.screen-reader-text {
	position: absolute;
	top: -100px;
	left: 0.5rem;
	z-index: 999999;
	padding: 0.85rem 1.4rem;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--encre);
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	text-decoration: none;
	border-radius: 0 0 6px 6px;
	transition: top 0.15s ease;
}
.skip-link.screen-reader-text:focus {
	top: 0;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
}


/* =============================================================================
 * 4. CONFORT DE LECTURE
 * ============================================================================= */

h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/*
 * Le rapport aligne à droite des paragraphes entiers (page 5, colonne de
 * droite). Cette symétrie fonctionne sur une double page imprimée ; à l'écran
 * elle rend le bord gauche irrégulier et la lecture pénible, en particulier
 * pour les lecteurs dyslexiques. On la neutralise sous 782 px, où les colonnes
 * s'empilent de toute façon.
 */
@media (max-width: 781px) {
	.wp-block-column .has-text-align-right { text-align: left; }
}

/* Les tableaux larges défilent dans leur propre conteneur, jamais la page. */
.wp-block-table { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* =============================================================================
 * 5. ESPACE ADHÉRENT — écran de connexion
 * =============================================================================
 * Composant absent du document imprimé : un formulaire n'existe pas sur un A4.
 * Il est donc inventé, mais en cohérence stricte avec la charte — surface
 * teintée, encre unique, rayons généreux, aucune ombre.
 *
 * Seule entorse assumée à la règle « aucune bordure » : les champs de saisie.
 * Sans filet, un champ sur fond teinté ne se distingue pas de son conteneur et
 * devient invisible. La bordure est donc fonctionnelle, pas décorative.
 */
.catss-acces-refuse {
	max-inline-size: 26rem;
	margin-inline: auto;
	margin-block: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50);
	border-radius: 18px;
	background-color: var(--wp--preset--color--surface-1);
	text-align: center;
}

.catss-acces-refuse__message {
	margin-block-end: var(--wp--preset--spacing--50);
}

.catss-acces-refuse__titre {
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.25;
	margin-block-end: var(--wp--preset--spacing--30);
	/* Encre sur surface-1 : 16,4:1. Le rouge d'alerte n'existe pas dans la
	   charte — le poids typographique porte l'avertissement à sa place. */
	color: var(--wp--preset--color--encre);
}

/* --- Formulaire --- */
.catss-acces-refuse .login-username,
.catss-acces-refuse .login-password {
	margin-block-end: var(--wp--preset--spacing--30);
	text-align: start;
}

.catss-acces-refuse label {
	display: block;
	margin-block-end: 0.35rem;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--encre);
}

.catss-acces-refuse input[type="text"],
.catss-acces-refuse input[type="password"] {
	inline-size: 100%;
	padding: 0.7rem 0.9rem;
	border: 2px solid var(--wp--preset--color--trait);
	border-radius: 8px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--encre);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
}

.catss-acces-refuse input[type="text"]:focus,
.catss-acces-refuse input[type="password"]:focus {
	border-color: var(--wp--preset--color--marque);
}

.catss-acces-refuse .login-remember {
	margin-block-end: var(--wp--preset--spacing--40);
	text-align: start;
}

.catss-acces-refuse .login-remember label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-family: var(--wp--preset--font-family--texte);
}

.catss-acces-refuse .login-submit input[type="submit"],
.catss-acces-refuse .wp-element-button {
	display: inline-block;
	inline-size: 100%;
	/*
	 * Indispensable sur le <a>, et seulement sur lui : les navigateurs posent
	 * `border-box` d'office sur les champs de formulaire, mais laissent les
	 * liens en `content-box`. Sans cette ligne, `inline-size: 100%` s'applique
	 * au seul contenu et le padding s'ajoute par-dessus — le bouton « Adhérer »
	 * dépassait son conteneur de 48 px (2 × 1,5 rem) et paraissait décentré,
	 * alors que le bouton « Se connecter » juste au-dessus, lui, tombait juste.
	 */
	box-sizing: border-box;
	padding: 0.8rem 1.5rem;
	border: 0;
	border-radius: 6px;
	background-color: var(--wp--preset--color--marque);
	color: var(--wp--preset--color--base);   /* blanc sur #0D3C9C : 9,80:1 */
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.catss-acces-refuse .login-submit input[type="submit"]:hover,
.catss-acces-refuse .wp-element-button:hover {
	background-color: var(--wp--preset--color--encre);
}

.catss-acces-refuse__oubli {
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

/* --- Appel à adhérer, séparé par la barre signature --- */
.catss-acces-refuse__adherer {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 3px solid var(--wp--preset--color--trait);
}

.catss-acces-refuse__adherer p {
	margin-block-end: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

@media (max-width: 480px) {
	.catss-acces-refuse {
		padding: var(--wp--preset--spacing--40);
		border-radius: 12px;
	}
}


/* =============================================================================
 * 6. FORMULAIRES — Contact Form 7
 * =============================================================================
 * Même grammaire que l'écran de connexion (§5) : champ blanc, filet `trait`,
 * rayon 8 px, libellé en Roboto Condensed capitales. CF7 produit son propre
 * balisage, d'où la reprise des sélecteurs plutôt qu'un partage de classes.
 */
.catss-formulaire .wpcf7 label {
	display: block;
	margin-block-end: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--encre);
}

.catss-formulaire .wpcf7-form-control-wrap {
	display: block;
	margin-block-start: 0.35rem;
}

.catss-formulaire input[type="text"],
.catss-formulaire input[type="email"],
.catss-formulaire input[type="tel"],
.catss-formulaire input[type="url"],
.catss-formulaire input[type="date"],
.catss-formulaire select,
.catss-formulaire textarea {
	inline-size: 100%;
	padding: 0.7rem 0.9rem;
	border: 2px solid var(--wp--preset--color--trait);
	border-radius: 8px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--encre);
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.catss-formulaire textarea {
	min-block-size: 9rem;
	resize: vertical;
}

.catss-formulaire :is(input, select, textarea):focus {
	border-color: var(--wp--preset--color--marque);
}

.catss-formulaire .wpcf7-submit {
	inline-size: 100%;
	margin-block-start: var(--wp--preset--spacing--30);
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 6px;
	background-color: var(--wp--preset--color--marque);
	color: var(--wp--preset--color--base);   /* 9,80:1 */
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	cursor: pointer;
}

.catss-formulaire .wpcf7-submit:hover {
	background-color: var(--wp--preset--color--encre);
}

/*
 * Messages d'erreur et de confirmation.
 *
 * CF7 les affiche en rouge, couleur absente de la charte. On reste dans la
 * palette : terre cuite pour l'erreur (5,05:1 sur blanc, la seule couleur
 * chaude de la charte qui passe AA), bleu de marque pour le succès. La couleur
 * ne porte jamais l'information seule — CF7 ajoute `role="alert"` sur ces
 * blocs, et le texte dit explicitement ce qui ne va pas.
 */
.catss-formulaire .wpcf7-not-valid-tip {
	margin-block-start: 0.4rem;
	color: var(--wp--preset--color--encre-chaude);
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.catss-formulaire :is(input, select, textarea).wpcf7-not-valid {
	border-color: var(--wp--preset--color--encre-chaude);
}

.catss-formulaire .wpcf7-response-output {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: var(--wp--preset--spacing--30);
	border: 2px solid var(--wp--preset--color--encre-chaude);
	border-radius: 8px;
	color: var(--wp--preset--color--encre);
	font-size: var(--wp--preset--font-size--small);
}

.catss-formulaire .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--marque);
}

/* Champ anti-robot de CF7 : masqué sans jamais être annoncé aux lecteurs d'écran. */
.catss-formulaire .wpcf7-spinner {
	margin-inline-start: 0.75rem;
}


/* =============================================================================
 * 7. CONSENTEMENT RGPD
 * =============================================================================
 * La règle §6 met tous les libellés de champ en capitales Roboto Condensed.
 * Appliquée au consentement, elle produirait deux phrases en capitales :
 * illisible, et contraire à l'exigence d'une information « claire et
 * compréhensible ». Le libellé d'acceptation reprend donc la typographie
 * courante.
 */
.catss-formulaire .wpcf7-acceptance .wpcf7-list-item-label,
.catss-formulaire .wpcf7-acceptance label {
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.6;
}

.catss-formulaire .wpcf7-acceptance {
	display: block;
	margin-block: var(--wp--preset--spacing--40);
}

.catss-formulaire .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.catss-formulaire .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	cursor: pointer;
}

/*
 * Case à cocher agrandie : la case native fait environ 13 px, sous la cible
 * tactile confortable. On la porte à 1,5 rem sans la remplacer par un faux
 * contrôle — le coche natif reste accessible au clavier et aux technologies
 * d'assistance, ce qu'un pseudo-élément perdrait.
 */
.catss-formulaire .wpcf7-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	margin-block-start: 0.1rem;
	accent-color: var(--wp--preset--color--marque);
	cursor: pointer;
}

/* =============================================================================
 * 8. MENTION D'INFORMATION — bloc Détails
 * ============================================================================= */
.catss-mention-rgpd {
	padding: var(--wp--preset--spacing--40);
	border-radius: 12px;
	background-color: var(--wp--preset--color--surface-4);
}

.catss-mention-rgpd > summary {
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--encre);
	cursor: pointer;
}

.catss-mention-rgpd > summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--marque);
	outline-offset: 3px;
	border-radius: 3px;
}

.catss-mention-rgpd p {
	margin-block-start: var(--wp--preset--spacing--30);
}

.catss-mention-rgpd p:first-of-type {
	margin-block-start: var(--wp--preset--spacing--40);
}

/*
 * Mention « obligatoire » du consentement.
 *
 * L'information est portée par le texte lui-même, pas par un `::after` en CSS :
 * un contenu généré n'est pas restitué de façon fiable par les lecteurs
 * d'écran, et disparaîtrait si la feuille de style ne chargeait pas. Le style
 * ci-dessous ne fait que la mettre en évidence.
 *
 * Terre cuite sur crème : 4,7:1, au-dessus du seuil AA. C'est la seule couleur
 * chaude de la charte qui passe — la charte n'a pas de rouge d'alerte.
 */
.catss-formulaire .catss-obligatoire {
	display: block;
	margin-block-start: 0.3rem;
	color: var(--wp--preset--color--encre-chaude);
	font-weight: 700;
}


/* =============================================================================
 * 9. ÉTAT DE CONNEXION — bloc « compte » de l'en-tête
 * =============================================================================
 * Placé dans l'en-tête plutôt qu'en pied de page : l'état de connexion doit se
 * lire sans faire défiler, et rester visible en mobile sans ouvrir le menu.
 */
.catss-compte {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	white-space: nowrap;
}

.catss-compte__nom {
	display: flex;
	flex-direction: column;
	color: var(--wp--preset--color--base);
}

/* « Connecté·e : » n'est qu'une étiquette — le nom porte l'information. */
.catss-compte__salutation {
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--trait);
}

.catss-compte__nom strong {
	font-weight: 700;
	letter-spacing: 0.01em;
}

.catss-compte__lien {
	padding: 0.45em 1em;
	border: 2px solid var(--wp--preset--color--trait);
	border-radius: 999px;
	color: var(--wp--preset--color--base);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.catss-compte__lien:hover,
.catss-compte__lien:focus-visible {
	border-color: var(--wp--preset--color--signal-lune);
	color: var(--wp--preset--color--signal-lune);
}

/*
 * Connexion : bouton plein, c'est l'action attendue d'un visiteur.
 * Jaune lune et encre : 14,84:1 — et c'est le seul endroit du site où le jaune
 * de marque porte du texte, ce que la charte autorise puisque l'encre est
 * posée dessus et non l'inverse.
 */
.catss-compte__lien--primaire {
	border-color: var(--wp--preset--color--signal-lune);
	background-color: var(--wp--preset--color--signal-lune);
	color: var(--wp--preset--color--encre);
}

.catss-compte__lien--primaire:hover,
.catss-compte__lien--primaire:focus-visible {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--encre);
}

/*
 * Mobile : le menu passe en hamburger, le bloc compte reste visible à côté.
 * On abrège l'étiquette plutôt que de masquer le bloc — connaître son état de
 * connexion compte davantage sur petit écran, où le menu est replié.
 */
@media (max-width: 600px) {
	.catss-compte {
		gap: 0.5rem;
		font-size: 0.78rem;
	}

	.catss-compte__salutation {
		display: none;
	}

	.catss-compte__lien {
		padding: 0.4em 0.75em;
	}
}


/* =============================================================================
 * 10. PAGE DE CONNEXION
 * =============================================================================
 * Réutilise le cartouche de l'écran de restriction (§5) : même composant, même
 * grammaire, un seul endroit à faire évoluer.
 */
.catss-connexion {
	text-align: center;
}

/*
 * Message d'erreur de connexion.
 *
 * La charte n'a pas de rouge d'alerte. Terre cuite sur crème (4,82:1, AA) tient
 * ce rôle, et le filet épais à gauche signale l'anomalie sans recourir à la
 * couleur seule. Le bloc porte `role="alert"` : il est annoncé dès son
 * apparition, sans que l'utilisateur ait à le chercher.
 */
.catss-connexion__erreur {
	margin-block-end: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	border-inline-start: 5px solid var(--wp--preset--color--encre-chaude);
	border-radius: 0 8px 8px 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--encre);
	font-weight: 600;
	text-align: start;
}

.catss-connexion .catss-acces-refuse__message {
	margin-block-end: var(--wp--preset--spacing--40);
}


/* =============================================================================
 * 11. MENU DE COMPTE (en-tête, utilisateur connecté)
 * ============================================================================= */
.catss-compte--menu {
	position: relative;
}

.catss-compte__declencheur {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35em 0.75em;
	border: 2px solid var(--wp--preset--color--trait);
	border-radius: 999px;
	cursor: pointer;
	list-style: none;
}

/* Safari affiche un triangle par défaut sur summary. */
.catss-compte__declencheur::-webkit-details-marker,
.catss-compte__declencheur::marker {
	display: none;
	content: "";
}

.catss-compte__declencheur:hover,
.catss-compte--menu[open] .catss-compte__declencheur {
	border-color: var(--wp--preset--color--signal-lune);
}

.catss-compte__chevron {
	inline-size: 0;
	block-size: 0;
	border-inline: 4px solid transparent;
	border-block-start: 5px solid currentColor;
	transition: transform 0.15s ease;
}

.catss-compte--menu[open] .catss-compte__chevron {
	transform: rotate(180deg);
}

.catss-compte__menu-contenu {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: calc(100% + 0.5rem);
	z-index: 50;
	min-inline-size: 15rem;
	padding: 0.5rem;
	border-radius: 12px;
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 10px 30px rgb(0 25 53 / 0.25);
	text-align: start;
}

.catss-compte__entete {
	margin: 0;
	padding: 0.5rem 0.75rem 0.75rem;
	border-block-end: 2px solid var(--wp--preset--color--surface-4);
	color: var(--wp--preset--color--encre);
	font-weight: 700;
	line-height: 1.3;
}

.catss-compte__entete span {
	display: block;
	margin-block-start: 0.15rem;
	color: var(--wp--preset--color--encre-froide);
	font-family: var(--wp--preset--font-family--texte);
	font-size: 0.8rem;
	font-weight: 400;
}

.catss-compte__menu-contenu ul {
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none;
}

.catss-compte__menu-contenu a {
	display: block;
	padding: 0.6rem 0.75rem;
	border-radius: 8px;
	color: var(--wp--preset--color--encre);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.catss-compte__menu-contenu a:hover,
.catss-compte__menu-contenu a:focus-visible {
	background-color: var(--wp--preset--color--surface-1);
}

/* La déconnexion est détachée du reste : c'est une action, pas une navigation. */
.catss-compte__sortie {
	margin-block-start: 0.4rem;
	padding-block-start: 0.4rem;
	border-block-start: 2px solid var(--wp--preset--color--surface-4);
}

.catss-compte__sortie a {
	color: var(--wp--preset--color--encre-chaude);
}

@media (max-width: 600px) {
	.catss-compte__menu-contenu {
		position: fixed;
		inset-inline: 0.75rem;
		inset-block-start: auto;
		min-inline-size: 0;
	}
}

/* =============================================================================
 * 12. PAGE « MON COMPTE »
 * ============================================================================= */
.catss-moncompte {
	max-inline-size: 34rem;
	margin-inline: auto;
}

.catss-moncompte__infos {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1.5rem;
	margin-block-end: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--40);
	border-radius: 12px;
	background-color: var(--wp--preset--color--surface-1);
}

.catss-moncompte__infos dt {
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.catss-moncompte__infos dd {
	margin: 0;
	word-break: break-word;
}

.catss-moncompte__form {
	padding: var(--wp--preset--spacing--50);
	border-radius: 18px;
	background-color: var(--wp--preset--color--surface-4);
}

.catss-moncompte__form h2 {
	margin-block-start: 0;
	font-size: var(--wp--preset--font-size--large);
	text-transform: uppercase;
}

.catss-moncompte__form label {
	display: block;
	margin-block-end: 0.35rem;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.catss-moncompte__form input[type="password"] {
	box-sizing: border-box;
	inline-size: 100%;
	padding: 0.7rem 0.9rem;
	border: 2px solid var(--wp--preset--color--trait);
	border-radius: 8px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--encre);
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--medium);
}

.catss-moncompte__form input[type="password"]:focus {
	border-color: var(--wp--preset--color--marque);
}

.catss-moncompte__aide {
	display: block;
	margin-block-start: 0.3rem;
	color: var(--wp--preset--color--encre-froide);
	font-size: var(--wp--preset--font-size--small);
}

.catss-moncompte__form button {
	box-sizing: border-box;
	inline-size: 100%;
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 6px;
	background-color: var(--wp--preset--color--marque);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	cursor: pointer;
}

.catss-moncompte__form button:hover {
	background-color: var(--wp--preset--color--encre);
}

/* Confirmation : même composant que l'erreur, filet au bleu de marque. */
.catss-connexion__erreur--succes {
	border-inline-start-color: var(--wp--preset--color--marque);
}

/*
 * Pied de la page « Mon compte » : sortie et, le cas échéant, accès à
 * l'administration. Détaché du formulaire par la barre signature — ce sont des
 * actions, pas la suite du formulaire.
 */
.catss-moncompte__sortie {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 3px solid var(--wp--preset--color--trait);
	text-align: center;
}

.catss-moncompte__sortie p {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.catss-moncompte__sortie p:last-child {
	margin-block-end: 0;
}

.catss-moncompte__lien-admin,
.catss-moncompte__deconnexion {
	box-sizing: border-box;
	display: inline-block;
	min-inline-size: 16rem;
	padding: 0.7rem 1.5rem;
	border: 2px solid currentColor;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
}

.catss-moncompte__lien-admin {
	color: var(--wp--preset--color--marque);
}

.catss-moncompte__lien-admin:hover,
.catss-moncompte__lien-admin:focus-visible {
	background-color: var(--wp--preset--color--marque);
	color: var(--wp--preset--color--base);   /* 9,80:1 */
}

/* Terre cuite : la seule couleur chaude de la charte qui passe AA (5,05:1). */
.catss-moncompte__deconnexion {
	color: var(--wp--preset--color--encre-chaude);
}

.catss-moncompte__deconnexion:hover,
.catss-moncompte__deconnexion:focus-visible {
	background-color: var(--wp--preset--color--encre-chaude);
	color: var(--wp--preset--color--base);   /* 5,05:1 */
}

/*
 * Le bouton « Adhérer » est enveloppé dans un <div> et non laissé nu : dans
 * l'écran de restriction, qui transite par `the_content`, `wpautop()` enrobe
 * un lien nu dans un <p> parasite — et y glisse un <br />. Le bouton y
 * paraissait alors plus haut et décalé par rapport au même bouton de la page
 * de connexion, rendue par un bloc et donc épargnée par wpautop.
 * Vérifié : un lien contenu dans un bloc passe intact.
 */
.catss-acces-refuse__bouton {
	margin: 0;
}