/*
Theme Name: Vieux-Mazel
Theme URI: https://preview.vieux-mazel.ch
Description: Theme du site de l'association scoute Vieux-Mazel.
Author: Vieux-Mazel
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: vm-theme
*/

/*
 * Feuille globale du thème : tokens dérivés (variables --vm-*), structure de
 * section, en-tête, pied de page et en-tête de page. Le reste de la présentation
 * est segmenté et chargé à la demande (voir functions.php) :
 *   - assets/css/accueil.css   : composants de la page d'accueil (front page) ;
 *   - assets/css/etapes.css    : bloc vm/etapes (là où il est présent) ;
 *   - assets/css/chiffres.css  : bloc vm/chiffres (là où il est présent) ;
 *   - assets/css/formulaire.css: formulaires et popup (tout le site).
 *
 * Les variables courtes ci-dessous pointent vers les presets de theme.json, pour
 * garder une seule source de vérité des couleurs.
 */

/*
 * Jeu d'icônes Tabler, auto-hébergé (aucune dépendance CDN, propre côté protection
 * des données). La police porte tous les glyphes ; on les invoque par leur codepoint
 * (voir assets/css/accueil.css). Déclaré ici plutôt que dans une feuille de composant
 * pour être disponible côté site comme dans le canevas de l'éditeur (add_editor_style).
 */
@font-face {
	font-family: "tabler-icons";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/tabler-icons.woff2") format("woff2");
}

:root {
	--vm-green: var(--wp--preset--color--primary);
	--vm-greend: var(--wp--preset--color--primary-dark);
	--vm-amber: var(--wp--preset--color--accent);
	--vm-terra: var(--wp--preset--color--secondary);
	--vm-cool: var(--wp--preset--color--cool);
	--vm-sand: var(--wp--preset--color--base);
	--vm-line: var(--wp--preset--color--line);
	--vm-paper: var(--wp--preset--color--surface);
	--vm-muted: var(--wp--preset--color--muted);
	--vm-ink: var(--wp--preset--color--contrast);

	/*
	 * Teintes fonctionnelles dérivées (pas des couleurs de marque, donc hors palette de l'éditeur) : texte clair posé
	 * sur un fond vert sombre. Une seule source, réutilisée par le Schéma 3 et le pied de page.
	 */
	--vm-ondark: color-mix(in srgb, var(--vm-paper) 72%, var(--vm-green));
	--vm-ondark-muted: color-mix(in srgb, var(--vm-paper) 55%, var(--vm-green));
	/* Idem sur le bandeau terracotta (Schéma 4) : sable atténué. */
	--vm-onterra-muted: color-mix(in srgb, var(--vm-sand) 78%, transparent);

	/*
	 * Échelle de texte des composants. Le contenu rédigé suit les tailles de
	 * theme.json (corps à 1rem, presets « Intro », « Sous-titre »…) ; ces trois
	 * tokens couvrent le texte fonctionnel des cartes et blocs (corps, libellés,
	 * chapeaux) pour qu'il soit identique partout, au lieu de tailles en dur qui
	 * divergent d'un composant à l'autre. Les tailles d'affichage (héros, chiffres,
	 * titres, devises manuscrites) restent propres à chaque composant.
	 */
	--vm-text-meta: 0.8125rem;    /* 13px : libellés, âges, dates, rôles */
	--vm-text-support: 0.9375rem; /* 15px : corps des cartes et composants */
	--vm-text-lead: 1.1875rem;    /* 19px : chapeau d'une section ou d'une page */
}

/*
 * Rôles contextuels des surfaces (--vm-ctx-*). Doctrine complète dans
 * docs/architecture.md (« Stratégie CSS »).
 *
 * Un bloc posé sur une bande consomme des rôles plutôt qu'une couleur figée, pour
 * suivre le fond : --vm-ctx-muted et --vm-ctx-accent (texte de la surface), et pour
 * une carte claire --vm-ctx-card / --vm-ctx-card-border / --vm-ctx-on-card. Un schéma
 * définit ces rôles pour son sous-arbre : « initial » sur fond clair (repli sur la
 * couleur de marque), teintes claires sur fond sombre. Les titres n'utilisent pas ces
 * rôles ; elements.heading a été retiré de theme.json pour qu'ils héritent du texte de
 * leur surface, sans règle descendante franchissant la frontière d'une carte.
 */
.is-style-vm-schema-1,
.is-style-vm-schema-2 {
	--vm-ctx-muted: initial;
	--vm-ctx-accent: initial;
}

.is-style-vm-schema-3 {
	--vm-ctx-muted: var(--vm-ondark);
	--vm-ctx-accent: var(--vm-amber);
}

.is-style-vm-schema-4 {
	--vm-ctx-muted: var(--vm-onterra-muted);
	--vm-ctx-accent: var(--vm-sand);
}

/*
 * Une carte est une surface claire par défaut : elle réamorce les rôles de texte à sa
 * frontière (:where, spécificité nulle) pour ne pas hériter des teintes de la bande.
 * Un schéma posé sur la carte (spécificité de classe) l'emporte et la recolore. Toute
 * nouvelle surface « carte » s'ajoute à cette liste.
 */
:where(.vm-person, .vm-event, .vm-card, .vm-carte, .is-style-vm-polaroid, .vm-form, .vm-direct) {
	--vm-ctx-muted: initial;
	--vm-ctx-accent: initial;
}

/*
 * Corps d'une surface « carte » : une taille unique, pour qu'un paragraphe (composant
 * rendu ou bloc natif, comme les cartes d'encadrement) ne détonne pas à côté d'un
 * autre. Les libellés internes passent en --vm-text-meta dans chaque feuille. Règle à
 * spécificité nulle : un composant peut hausser un élément précis (titre) au besoin.
 */
:where(.vm-card, .vm-person, .vm-event, .vm-carte) {
	font-size: var(--vm-text-support);
}

/*
 * Réserve en permanence la place de l'ascenseur : quand une modale verrouille le
 * défilement (overflow: hidden), la page ne saute pas latéralement.
 */
html {
	scrollbar-gutter: stable;
}

/*
 * Défilement doux natif pour la navigation par ancres (liens internes) : porté
 * par le CSS plutôt que par du JavaScript, il respecte
 * scroll-margin-top et se dégrade en saut instantané. Coupé si l'utilisateur
 * préfère un mouvement réduit.
 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * Section : bande pleine largeur au contenu centré. La structure est portée par
 * le bloc vm/section ; le hero (bloc cover) réutilise la classe .vm-section pour
 * le même rythme vertical. Le fond et les couleurs viennent des « styles de
 * section » (theme.json, dossier styles/) ; ici, seulement le rythme et la largeur.
 */
.vm-section {
	padding: 48px 0;
	margin: 0;
}

/*
 * L'écart de bloc par défaut de WordPress (« :root :where(.is-layout-constrained)
 * > * », marge de 1.5rem) a la même spécificité que « .vm-section ». Côté site,
 * style.css est chargé après et l'emporte (sections jointives) ; dans l'éditeur,
 * l'ordre s'inverse et un écart réapparaît entre les sections. On double la
 * classe pour gagner en spécificité (sans !important) : même rendu partout.
 */
.vm-section.vm-section {
	margin-block: 0;
}

.vm-wrap {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 28px;
}

/* Rythme vertical à l'intérieur d'un bloc Section (équivalent au blockGap). */
.wp-block-vm-section .vm-wrap > * + * {
	margin-block-start: var(--wp--style--block-gap, 1.5rem);
}

/*
 * Le conteneur .vm-wrap ne porte pas les classes de flux de WordPress, donc le
 * reset de marge du premier et du dernier enfant ne s'applique pas ici : la
 * marge par défaut du navigateur sur <p> (le .vm-kick) et sur les titres
 * fuirait en haut et en bas de section. On la neutralise pour que le rythme
 * reparte du seul padding de section.
 */
.wp-block-vm-section .vm-wrap > :first-child {
	margin-block-start: 0;
}

.wp-block-vm-section .vm-wrap > :last-child {
	margin-block-end: 0;
}

/* En-tête : logo « scouts Vieux-Mazel », l'accent manuscrit reprend le gras du logo. */
.vm-logo {
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
}

.vm-logo-accent {
	font-family: 'Indie Flower', cursive;
	color: var(--vm-terra);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1;
}

/* Le logo est un tout : pas de soulignement au survol du nom (bloc titre du site), pour un comportement cohérent
   avec le mot manuscrit « scouts » à sa gauche. */
.vm-logo a,
.vm-logo a:hover {
	text-decoration: none;
}

/* Accent manuscrit générique (devise du pied de page, etc.). */
.vm-hand {
	font-family: 'Indie Flower', cursive;
}

/* Intertitre manuscrit (« kick »), réutilisé par les formulaires et les sections. */
.vm-kick {
	font-family: 'Indie Flower', cursive;
	/* Accent terracotta sur fond clair ; ambre ou sable sur fond sombre (ctx-accent). */
	color: var(--vm-ctx-accent, var(--vm-terra));
	font-size: 30px;
	margin-bottom: 2px;
}

/* Pied de page (bandeau vert sombre) : texte clair dérivé, deux niveaux. */
.vm-foot-line {
	color: var(--vm-ondark);
}

.vm-foot-links {
	color: var(--vm-ondark-muted);
}

/*
 * En-tête de page : bandeau de titre porté par page.html, partagé par toutes les
 * pages (contact et pages rédigées par l'association). Le titre, en ambre, est
 * posé sur le bandeau vert profond. Pour lui donner de la présence sans virer au
 * hero d'accueil : un peu de profondeur (halo radial clair au sommet), un filet
 * manuscrit sous le titre, et un sous-titre facultatif tiré de l'extrait de la
 * page. La section de contenu qui suit peut reprendre le même schéma pour se
 * fondre avec le bandeau.
 */
.vm-page-header {
	position: relative;
	overflow: hidden;
	padding-block: 68px;
	/* Halo doux au sommet : un vert légèrement plus clair que le fond, pour éviter le bloc plat. */
	background-image: radial-gradient(
		120% 140% at 50% -20%,
		color-mix(in srgb, var(--vm-green) 55%, var(--vm-greend)) 0%,
		var(--vm-greend) 60%
	);
}

.vm-page-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 18px;
}

.vm-page-head h1 {
	color: var(--vm-amber);
	font-size: var(--wp--preset--font-size--huge, 3.375rem);
	margin: 0;
}

/*
 * Filet manuscrit sous le titre : petit trait ambre tracé à main levée (SVG en
 * fond), rappel des accents Indie Flower du site. Décoratif, donc aria-hidden par
 * nature (pseudo-élément).
 */
.vm-page-head h1::after {
	content: "";
	display: block;
	width: 132px;
	height: 12px;
	margin: 14px auto 0;
	background: no-repeat center / contain
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 12"><path d="M3 8c22-6 46-6 63-4 18 2 40 4 63-2" fill="none" stroke="%23F2A93B" stroke-width="3.5" stroke-linecap="round"/></svg>');
}

/*
 * Sous-titre facultatif (extrait de la page) : texte clair, mesure confortable.
 * Taille du chapeau (--vm-text-lead) : le preset « large » de theme.json est repris
 * par la typographie fluide de WordPress, trop gros pour un sous-titre.
 */
.vm-page-lead {
	max-width: 52ch;
	margin: 0;
	color: var(--vm-ondark);
	font-size: var(--vm-text-lead);
	line-height: 1.6;
}

/*
 * Introduction d'une section : le paragraphe atténué sous le titre, à la taille de
 * chapeau. Utilitaire global, utilisé par les compositions du thème.
 */
.vm-section-intro {
	max-width: 58ch;
	margin-left: auto;
	margin-right: auto;
	font-size: var(--vm-text-lead);
	color: var(--vm-ctx-muted, var(--vm-muted));
}

/*
 * Espacement racine : l'en-tête, le contenu et le pied de page se touchent.
 * Chaque section porte déjà son propre rythme vertical (.vm-section), donc pas
 * d'écart inter-blocs au niveau racine (sinon une bande de fond apparaît entre
 * l'en-tête et une section colorée, ou au-dessus du pied de page).
 */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
	margin-block-end: 0;
}