/*
 * main.css — feuille de style globale du thème ME-IN Studio.
 *
 * Phase 1 : placeholder. Les styles de sections/blocs, les variables CSS custom
 * (--mein-shadow-card, formes organiques, animations meinFloat/meinBreathe) et le
 * respect de prefers-reduced-motion seront ajoutés au fur et à mesure des blocs.
 *
 * Les tokens de couleur/typo/espacement sont gérés par theme.json
 * (variables --wp--preset--*). Ce fichier ne contient que ce qui dépasse theme.json.
 */

/* ============================================================================
 * RÈGLE DE CHARTE — LE COUPLE SAUGE / CRÈME NE PASSE PAS EN TEXTE.
 * ============================================================================
 *
 * À LIRE AVANT D'ÉCRIRE UNE COULEUR DE TEXTE SAUGE OU CRÈME. Ce n'est pas une
 * préférence esthétique, c'est une mesure.
 *
 *   sauge #6B7A58 et crème #FBF7EF donnent 4,32:1, DANS LES DEUX SENS.
 *   Le seuil AA du texte normal est 4,5:1. Ce couple échoue donc, toujours.
 *   Sur le sable #F6F0E6 c'est pire encore : 4,07:1.
 *
 * La maquette utilise pourtant ce couple partout. LE REPRENDRE TEL QUEL EST UNE
 * ERREUR, et c'est le réflexe qu'il faut couper : la bonne teinte visuelle n'est
 * pas la bonne teinte lisible. Les deux jetons ci-dessous existent pour ça.
 *
 *   --mein-texte-sur-sauge   → texte posé SUR un fond sauge (bouton, badge, puce)
 *                              blanc pur : 4,62:1 sur sauge, 5,98:1 sur sauge-fonce
 *
 *   --mein-sauge-sur-clair   → texte sauge posé SUR un fond clair (lien, prix, flèche)
 *                              sauge-fonce : 5,60:1 sur crème, 5,28:1 sur sable,
 *                              4,87:1 sur sable-fonce
 *
 * SEUILS, pour mémoire : 4,5:1 en texte normal ; 3:1 seulement si le texte est
 * GRAND, c'est-à-dire >= 24 px, ou >= 18,66 px ET en graisse 700. Une graisse 600
 * à 23 px reste du texte normal, le raccourci « c'est gros, ça passe » est faux.
 * 3:1 aussi pour le non-textuel (bordures de champ, anneaux de focus, icônes
 * porteuses de sens) au titre de WCAG 1.4.11.
 *
 * CE QUI N'EST PAS CONCERNÉ : le décoratif pur (une flèche « → » en aria-hidden
 * doublant un libellé écrit à côté, un filet, une orbe) n'a pas de seuil. Inutile
 * de l'assombrir. En pratique ces flèches héritent de la couleur de leur lien et
 * suivent donc le correctif sans qu'on ait à les viser.
 *
 * ----------------------------------------------------------------------------
 * LE PIÈGE DU SURVOL, qui a déjà coûté deux libellés entièrement invisibles.
 * ----------------------------------------------------------------------------
 * theme.json génère une règle globale :
 *
 *   :root :where( a:where( :not( .wp-element-button ) ):hover ) { color: sauge-fonce }
 *
 * « :where() » ne compte pas dans la spécificité : elle pèse (0,1,0), exactement
 * comme un sélecteur de classe simple. À égalité, c'est l'ordre de chargement qui
 * tranche, et il tranche en faveur du global. Conséquence mesurée sur
 * .mein-hero__bouton--principal et .mein-row__lien : au survol le texte passait à
 * sauge-fonce sur un fond lui aussi sauge-fonce, soit 1,00:1. Les boutons
 * devenaient des pastilles vides, sur la page d'accueil comme sur les pages de
 * prestations.
 *
 * DONC : tout lien <a> stylé en bouton DOIT redéclarer sa couleur de texte dans sa
 * règle « :hover, :focus-visible », qui pèse (0,2,0) et l'emporte. Ce n'est jamais
 * une redondance.
 *
 * Vérifier un survol se fait transitions neutralisées : lues pendant la
 * transition de 0,25 s, les valeurs calculées renvoient encore l'état de départ et
 * le défaut passe inaperçu.
 * ========================================================================= */

:root {

	/* Texte sur fond sauge. Blanc pur, jamais la crème. */
	--mein-texte-sur-sauge: #ffffff;

	/* Texte sauge sur fond clair (crème, sable). Sauge foncé, jamais le sauge. */
	--mein-sauge-sur-clair: var(--wp--preset--color--sauge-fonce);
}

/*
 * Accessibilité : masquage visuel sans masquage pour les lecteurs d'écran.
 *
 * Classe standard WordPress (« screen-reader-text ») : retire l'élément du flux
 * visuel tout en le laissant lisible par les technologies d'assistance. Sert à
 * poser des titres de structure (H1 → H2 → H3) invisibles à l'écran mais présents
 * pour la navigation par titres (correctif hiérarchie des titres, page Tarifs).
 */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Accessibilité : focus clavier visible sur les boutons natifs (core/button).
 *
 * Les blocs custom définissent chacun leur :focus-visible ; les boutons natifs
 * (.wp-block-button__link, ex. CTA « Découvrir les prestations », « Tous les
 * articles » de l'accueil) ne reposaient que sur l'anneau par défaut du
 * navigateur, peu visible sur le fond sauge. On pose un anneau cohérent avec le
 * reste du site (WCAG 2.4.7).
 */
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--sauge-fonce);
	outline-offset: 3px;
}

/*
 * Scroll-reveal (fondu-montée des sections au défilement) — global à tout le site.
 *
 * La classe .mein-reveal est posée par assets/js/reveal.js UNIQUEMENT quand le JS
 * s'exécute (et hors prefers-reduced-motion). État de base = VISIBLE : sans JS ou
 * sous reduced-motion, aucune de ces règles ne masque le contenu.
 */
.mein-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	will-change: opacity, transform;
}

.mein-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* Ceinture de sécurité : si la classe était présente sous reduced-motion, on
   n'anime pas et on garde le contenu visible. */
@media (prefers-reduced-motion: reduce) {
	.mein-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}