/* =============================================================
   APE Les Phoenix – composants du thème (charte « le trait et l'aplat »)
   Les jetons viennent de theme.json (--wp--preset--… et --wp--custom--…) ;
   ce fichier reprend les composants de la charte validée (maquette v0.5,
   design/apercu/charte.css), adaptés au balisage des blocs WordPress.
   Les composants utilisent les rôles de couleur (--c-fond, --c-texte…) et
   non les couleurs nommées, pour que le mode sombre (ape-phoenix-sombre.css,
   site seulement) n'ait qu'à changer les rôles. Les couleurs nommées restent
   pour ce qui ne change jamais : orange et encre des boutons, plaque blanche
   du logo, pied de page.
   Chargé sur le site et dans l'éditeur (toujours en clair).
   ============================================================= */

/* ---------- Alias courts des jetons ---------- */
:root {
	--c-orange: var(--wp--preset--color--orange);
	--c-encre: var(--wp--preset--color--encre);
	--c-blanc: var(--wp--preset--color--blanc);
	--c-creme: var(--wp--preset--color--creme);
	--c-peche: var(--wp--preset--color--peche);
	--c-braise: var(--wp--preset--color--braise);
	--c-taupe: var(--wp--preset--color--taupe);
	--c-lin: var(--wp--preset--color--lin);
	--c-sable: var(--wp--preset--color--sable);
	--c-orange-soutenu: var(--wp--custom--couleur--orange-soutenu);
	--c-braise-foncee: var(--wp--custom--couleur--braise-foncee);
	--c-info: var(--wp--custom--couleur--info);
	--c-info-fond: var(--wp--custom--couleur--info-fond);

	/* Rôles de couleur (valeurs claires : theme.json, custom.role) */
	--c-fond: var(--wp--custom--role--fond);
	--c-fond-doux: var(--wp--custom--role--fond-doux);
	--c-fond-accent: var(--wp--custom--role--fond-accent);
	--c-surface: var(--wp--custom--role--surface);
	--c-texte: var(--wp--custom--role--texte);
	--c-texte-doux: var(--wp--custom--role--texte-doux);
	--c-accent: var(--wp--custom--role--accent);
	--c-accent-fort: var(--wp--custom--role--accent-fort);
	--c-filet: var(--wp--custom--role--filet);
	--c-contour: var(--wp--custom--role--contour);
	--c-focus: var(--wp--custom--role--focus);
	--c-saisie-fond: var(--wp--custom--role--saisie-fond);
	--c-saisie-bord: var(--wp--custom--role--saisie-bord);
	--c-pied-fond: var(--wp--custom--role--pied-fond);
	--c-erreur: var(--wp--custom--role--erreur);
	--c-erreur-fond: var(--wp--custom--role--erreur-fond);
	--c-succes: var(--wp--custom--role--succes);
	--c-succes-fond: var(--wp--custom--role--succes-fond);
	--c-desactive-texte: var(--wp--custom--role--desactive-texte);
	--c-desactive-fond: var(--wp--custom--role--desactive-fond);
	--c-desactive-bord: var(--wp--custom--role--desactive-bord);

	--f-titres: var(--wp--preset--font-family--literata);
	--f-texte: var(--wp--preset--font-family--fira-sans);
	--t-h3: var(--wp--custom--taille--titre-3);
	--t-h4: var(--wp--custom--taille--titre-4);
	--t-chapo: var(--wp--custom--taille--chapo);
	--t-petit: var(--wp--custom--taille--petit);
	--t-surtitre: var(--wp--custom--taille--surtitre);

	--e-1: var(--wp--custom--espace--1);
	--e-2: var(--wp--custom--espace--2);
	--e-3: var(--wp--custom--espace--3);
	--e-4: var(--wp--custom--espace--4);
	--e-5: var(--wp--custom--espace--5);
	--e-6: var(--wp--custom--espace--6);
	--e-7: var(--wp--custom--espace--7);
	--l-marge: var(--wp--custom--marge);

	--r-petit: var(--wp--custom--rayon--petit);
	--r-moyen: var(--wp--custom--rayon--moyen);
	--r-grand: var(--wp--custom--rayon--grand);
	--r-pilule: var(--wp--custom--rayon--pilule);

	--trait: 2px solid var(--c-contour);       /* boutons secondaires, bouton Menu, étapes */
	--trait-encre: 2px solid var(--c-encre);   /* éléments orange : toujours cernés d'encre */
	--focus-couleur: var(--c-focus);
	--ombre-survol: var(--wp--custom--role--ombre);
	--logo-plaque: 0;                          /* 1 en mode sombre : plaque blanche sous le logo de l'en-tête */
}

/* ---------- Pictogrammes au trait (d'après Feather, licence MIT, © Cole Bemis) ---------- */
/* Masques CSS : la couleur vient du texte. Dans un contenu, classe ape-icone-<nom>. */
:root {
	--ape-icone-groupe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
	--ape-icone-sac: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
	--ape-icone-cadeau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v10H4V12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cpath d='M12 22V7M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
	--ape-icone-coeur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
	--ape-icone-horloge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
	--ape-icone-calendrier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
	--ape-icone-lieu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--ape-icone-courriel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E");
	--ape-icone-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
	--ape-icone-ecole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");
	--ape-icone-valide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='M22 4L12 14.01l-3-3'/%3E%3C/svg%3E");
	--ape-icone-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
	--ape-icone-fleche-retour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E");
	--ape-icone-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E");
	--ape-icone-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E");
	--ape-image-coeur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F6A64A' stroke='%23181717' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E"); /* cœur orange cerné d'encre */
}
.ape-icone-groupe { --ape-icone: var(--ape-icone-groupe); }
.ape-icone-sac { --ape-icone: var(--ape-icone-sac); }
.ape-icone-cadeau { --ape-icone: var(--ape-icone-cadeau); }
.ape-icone-coeur { --ape-icone: var(--ape-icone-coeur); }
.ape-icone-horloge { --ape-icone: var(--ape-icone-horloge); }
.ape-icone-calendrier { --ape-icone: var(--ape-icone-calendrier); }
.ape-icone-lieu { --ape-icone: var(--ape-icone-lieu); }
.ape-icone-courriel { --ape-icone: var(--ape-icone-courriel); }
.ape-icone-info { --ape-icone: var(--ape-icone-info); }
.ape-icone-ecole { --ape-icone: var(--ape-icone-ecole); }
.ape-icone-valide { --ape-icone: var(--ape-icone-valide); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
strong, b { font-weight: 600; }
::selection { background: var(--c-peche); color: var(--c-encre); }

a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

/* Focus clavier : contour encre (blanc cassé en sombre) ; orange sur le pied de page */
:focus-visible { outline: 3px solid var(--focus-couleur); outline-offset: 2px; border-radius: 2px; }

h4 { font-weight: 600; }

.insecable { white-space: nowrap; }

/* Styles de paragraphe proposés aux rédacteurs */
.is-style-surtitre {
	color: var(--c-accent);
	font-size: var(--t-surtitre);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.is-style-chapo { font-size: var(--t-chapo); line-height: 1.5; }
.is-style-petit { color: var(--c-texte-doux); font-size: var(--t-petit); line-height: 1.5; }

/* Pictogramme générique : masque SVG en couleur du texte (classes ape-icone-…) */
.ape-picto,
.ape-infos > li::before,
.ape-renvoi::before,
.ape-lien-fleche a::after,
.ape-lien-retour::before,
.ape-date::before,
.ape-inscription__annonce::before {
	content: "";
	display: inline-block;
	flex: none;
	width: 1.25em;
	height: 1.25em;
	background-color: currentColor;
	-webkit-mask: var(--ape-icone) center / contain no-repeat;
	mask: var(--ape-icone) center / contain no-repeat;
}
svg.ape-picto { background: none; -webkit-mask: none; mask: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.25em; }

/* ---------- Mise en page générale ---------- */
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Section : bande pleine largeur, contenu sur 75 rem ou sur la largeur de lecture */
.ape-section { padding-block: var(--e-7); }
.ape-section--creme { background: var(--c-fond-doux); }
.ape-section--suite { padding-block-start: 0; }
.ape-section > h2:not(:first-child),
.wp-block-post-content > h2:not(:first-child),
.ape-section > .wp-block-heading + .wp-block-group { margin-block-start: var(--e-6); }
.ape-section > h3:not(:first-child),
.wp-block-post-content > h3:not(:first-child) { margin-block-start: var(--e-5); }

/* En-tête de page : fond crème, titre et chapô */
.ape-hero { padding-block: var(--e-5) var(--e-6); background: var(--c-fond-doux); }
.ape-hero > :first-child { margin-block-start: 0; }
.ape-hero .wp-block-post-title { margin-block: 0; }
.ape-chapo { margin-block: var(--e-4) 0; font-size: var(--t-chapo); line-height: 1.5; }
@media (min-width: 56rem) {
	.ape-hero { padding-block: var(--e-7); }
}

/* ---------- En-tête du site ---------- */
.ape-entete { position: relative; z-index: 10; background: var(--c-fond); border-bottom: 1px solid var(--c-filet); }
.ape-entete__interieur { gap: var(--e-5); padding-block: var(--e-3); }
.ape-entete__actions { gap: var(--e-3); }
@media (max-width: 29.99rem) {
	.ape-entete__interieur { gap: var(--e-3); }
}

/* Logo : fichier officiel, jamais recadré ; le filet gris d'export est masqué
   à l'affichage (deux dernières lignes de pixels), sans modifier le fichier.
   En mode sombre, il se pose sur une plaque blanche dont la marge vaut un
   huitième de sa largeur, et son contour de focus passe autour de la plaque :
   - mobile et tablette : logo de 88 px (72 px sous 360 px de large, faute de place) ;
   - ordinateur : logo de 104 px, pour que logo et plaque (130 px) prennent la
     place du logo seul en clair (128 px) et que le menu tienne sur une ligne. */
.wp-block-site-logo img { clip-path: inset(0 0 calc(200% / 562) 0); }
.ape-entete .wp-block-site-logo { flex: none; padding: calc(var(--logo-plaque) * 11px); background: rgb(255 255 255 / var(--logo-plaque)); border-radius: calc(var(--logo-plaque) * 11px); }
.ape-entete .wp-block-site-logo img { width: 88px; height: auto; }
.ape-entete .custom-logo-link:focus-visible { outline-offset: calc(var(--logo-plaque) * 11px + 2px); }
@media (max-width: 22.49rem) {
	.ape-entete .wp-block-site-logo { padding: calc(var(--logo-plaque) * 9px); border-radius: calc(var(--logo-plaque) * 9px); }
	.ape-entete .wp-block-site-logo img { width: calc(88px - var(--logo-plaque) * 16px); }
	.ape-entete .custom-logo-link:focus-visible { outline-offset: calc(var(--logo-plaque) * 9px + 2px); }
}
@media (min-width: 64rem) {
	.ape-entete__interieur { padding-block: var(--e-5); }
	.ape-entete .wp-block-site-logo { padding: calc(var(--logo-plaque) * 13px); border-radius: calc(var(--logo-plaque) * 13px); }
	.ape-entete .wp-block-site-logo img { width: calc(128px - var(--logo-plaque) * 24px); }
	.ape-entete .custom-logo-link:focus-visible { outline-offset: calc(var(--logo-plaque) * 13px + 2px); }
}

/* Navigation : liens couleur du texte, page en cours soulignée en braise (orange en sombre) */
.ape-nav { font-size: 1rem; font-weight: 600; }
.ape-nav .wp-block-navigation__container { gap: var(--e-5); align-items: center; }
.ape-nav .wp-block-navigation-item__content { color: var(--c-texte); text-decoration: none; padding-block: var(--e-2); }
.ape-nav .wp-block-navigation-item__content:hover { text-decoration: underline 3px var(--c-orange); text-underline-offset: 0.4em; }
.ape-nav .current-menu-item > .wp-block-navigation-item__content { text-decoration: underline 3px var(--c-accent); text-underline-offset: 0.4em; }

/* « Donner un coup de main » : lien du menu présenté en bouton principal */
.ape-nav .ape-nav-cta > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding: 0.625rem 1.5rem;
	background: var(--c-orange);
	color: var(--c-encre);
	border: var(--trait-encre);
	border-radius: var(--r-pilule);
	line-height: 1.2;
}
.ape-nav .ape-nav-cta > .wp-block-navigation-item__content:hover { background: var(--c-orange-soutenu); text-decoration: none; }
.ape-nav .ape-nav-cta.current-menu-item > .wp-block-navigation-item__content { text-decoration: none; box-shadow: inset 0 -4px 0 var(--c-braise); }
.ape-nav .ape-nav-cta > .wp-block-navigation-item__content:focus-visible { outline-offset: 3px; border-radius: var(--r-pilule); }

/* Boutons « Menu » et « Fermer » : pilule cernée d'encre */
.ape-nav .wp-block-navigation__responsive-container-open,
.ape-nav .wp-block-navigation__responsive-container-close {
	align-items: center;
	gap: var(--e-2);
	min-height: 3rem;
	padding: 0.5rem 1.125rem;
	background: var(--c-surface);
	color: var(--c-texte);
	border: var(--trait);
	border-radius: var(--r-pilule);
	font-family: var(--f-texte);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1;
}
.ape-nav .wp-block-navigation__responsive-container-open::before { content: ""; width: 1.25em; height: 1.25em; background: currentColor; -webkit-mask: var(--ape-icone-menu) center / contain no-repeat; mask: var(--ape-icone-menu) center / contain no-repeat; }
.ape-nav .wp-block-navigation__responsive-container-open:hover,
.ape-nav .wp-block-navigation__responsive-container-close:hover { background: var(--c-fond-accent); }
.ape-nav .wp-block-navigation__responsive-container-open:focus-visible,
.ape-nav .wp-block-navigation__responsive-container-close:focus-visible { outline: 3px solid var(--focus-couleur); outline-offset: 3px; border-radius: var(--r-pilule); }

/* Menu ouvert (mobile et tablette) : grandes zones à toucher. Fond et texte
   suivent le mode : la règle doit l'emporter sur le blanc imposé par WordPress
   (.wp-block-navigation:not(.has-background) … :not(.disable-default-overlay)). */
.ape-nav .wp-block-navigation__responsive-container.is-menu-open { padding: var(--e-4) var(--l-marge) var(--e-6); }
.ape-entete .ape-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { background-color: var(--c-fond); color: var(--c-texte); }
.ape-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: var(--e-6); }
.ape-nav .is-menu-open .wp-block-navigation__container { width: 100%; gap: 0; align-items: stretch; }
.ape-nav .is-menu-open .wp-block-navigation-item { width: 100%; }
.ape-nav .is-menu-open .wp-block-navigation-item:not(.ape-nav-cta) > .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding-block: 0.875rem;
	border-bottom: 1px solid var(--c-filet);
	font-size: 1.125rem;
}
.ape-nav .is-menu-open .ape-nav-cta { margin-top: var(--e-5); }
.ape-nav .is-menu-open .ape-nav-cta > .wp-block-navigation-item__content { justify-content: center; }
/* WordPress retire les marges intérieures des liens du menu ouvert : le bouton les retrouve. */
.ape-entete .ape-nav.wp-block-navigation .is-menu-open .ape-nav-cta > .wp-block-navigation-item__content.wp-block-navigation-item__content { padding-inline: 1.5rem; }

/* Le menu complet ne s'affiche qu'à partir de 1 280 px (le menu natif bascule à 600 px) */
@media (min-width: 600px) and (max-width: 79.98rem) {
	.ape-entete .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-flex; }
	.ape-entete .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* ---------- Boutons ---------- */
.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; text-align: center; }
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible { outline-color: var(--focus-couleur); border-radius: var(--r-pilule); }
.wp-block-button__link:active { transform: translateY(1px); }
/* Bouton principal : orange, texte et trait encre dans les deux modes (réglé dans theme.json).
   Bouton secondaire : couleurs du mode (blanc et encre en clair). */
.wp-block-button.is-style-secondaire .wp-block-button__link { background: var(--c-surface); color: var(--c-texte); border-color: var(--c-contour); }
.wp-block-button.is-style-secondaire .wp-block-button__link:hover { background: var(--c-fond-accent); }
.wp-block-buttons { gap: var(--e-3); }

/* Lien fléché (« Tout l'agenda → ») et lien de retour (« ← Toutes les actualités ») */
.ape-lien-fleche { font-weight: 600; }
.ape-lien-fleche a { display: inline-flex; align-items: center; gap: var(--e-2); }
.ape-lien-fleche a::after { --ape-icone: var(--ape-icone-fleche); transition: transform 0.15s ease; }
.ape-lien-fleche a:hover::after { transform: translateX(3px); }
.ape-retour { margin-block: 0 var(--e-5); }
.ape-lien-retour { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 600; }
.ape-lien-retour::before { --ape-icone: var(--ape-icone-fleche-retour); transition: transform 0.15s ease; }
.ape-lien-retour:hover::before { transform: translateX(-3px); }

/* En-tête de section : titre (et sous-titre) à gauche, lien fléché à droite */
.ape-entete-section {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--e-3) var(--e-5);
	margin-block-end: var(--e-6);
}
.ape-entete-section > * { margin-block: 0; }
.ape-entete-section h2 { margin: 0; }
.ape-entete-section .wp-block-group > * + * { margin-block-start: var(--e-2); }

/* ---------- Points (idées côte à côte, avec pictogramme) ---------- */
.ape-points {
	display: grid;
	gap: var(--e-6) var(--e-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	margin-block-end: var(--e-5);
}
.ape-points > * { margin-block: 0; }
.ape-point { position: relative; padding-top: calc(3.5rem + var(--e-3)); }
.ape-point::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3.5rem;
	height: 3.5rem;
	background: var(--c-fond-accent);
	border-radius: 50%;
}
.ape-point::after {
	content: "";
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	width: 1.75rem;
	height: 1.75rem;
	background: var(--c-texte);
	-webkit-mask: var(--ape-icone) center / contain no-repeat;
	mask: var(--ape-icone) center / contain no-repeat;
}
.ape-point h3 { margin-block: 0 var(--e-2); }
.ape-point > * + * { margin-block-start: var(--e-2); }

/* Deux équipes (page « APE et représentants élus ») : présentations l'une sous l'autre,
   visuel à côté ; le bloc Colonnes empile le tout sur mobile. */
.ape-equipes { gap: var(--e-6); }
.ape-equipes > .wp-block-column > * { margin-block: 0; }
.ape-equipes > .wp-block-column > * + * { margin-block-start: var(--e-6); }
.ape-equipes .wp-block-image img { border: 1px solid var(--c-filet); border-radius: var(--r-moyen); }
.ape-equipes a[href^="mailto:"] { overflow-wrap: anywhere; }

/* ---------- Renvoi vers une page d'explication (toute la boîte cliquable) ---------- */
.ape-renvoi {
	--ape-icone: var(--ape-icone-info);
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--e-3);
	max-width: 42rem;
	margin-block-start: var(--e-6);
	padding: var(--e-4) var(--e-5);
	background: var(--c-surface);
	border: 1px solid var(--c-filet);
	border-radius: var(--r-moyen);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* L'encadré se range dans un groupe « ape-renvoi-conteneur ». Enfant direct de la
   section (mise en page « contrainte »), ce groupe suit la colonne de contenu ;
   l'encadré y garde la largeur de son texte (42rem au plus), calé à gauche. */
.ape-renvoi-conteneur { margin-block-start: var(--e-6); }
.ape-renvoi-conteneur > .ape-renvoi { margin-block-start: 0; }
.ape-renvoi::before { grid-row: span 2; margin-top: 0.2em; color: var(--c-accent); }
.ape-renvoi > * { grid-column: 2; margin-block: 0; }
.ape-renvoi > * + * { margin-block-start: var(--e-1); }
.ape-renvoi__lien { font-weight: 600; }
.ape-renvoi__lien a::after { content: ""; position: absolute; inset: 0; }
.ape-renvoi__lien a:focus-visible { outline: none; }
.ape-renvoi:hover { border-color: var(--c-orange); box-shadow: var(--ombre-survol); }
.ape-renvoi:focus-within { outline: 3px solid var(--focus-couleur); outline-offset: 3px; }

/* ---------- Appel au bénévolat : bandeau orange, ou encadré pêche ---------- */
/* Le bandeau orange est un « îlot clair » : il garde les couleurs claires dans
   les deux modes (texte, liens, cartes de missions, étapes, boutons, focus),
   car il redéclare les rôles pour son contenu. L'encadré doux suit le mode. */
.ape-appel {
	display: grid;
	gap: var(--e-5);
	padding: var(--e-6) var(--e-5);
	background: var(--c-orange);
	color: var(--c-texte);
	border-radius: var(--r-grand);
}
.ape-appel:not(.ape-appel--douce) {
	--c-fond: var(--c-blanc);
	--c-fond-doux: var(--c-creme);
	--c-fond-accent: var(--c-peche);
	--c-surface: var(--c-blanc);
	--c-texte: var(--c-encre);
	--c-texte-doux: var(--c-taupe);
	--c-accent: var(--c-braise);
	--c-accent-fort: var(--c-braise-foncee);
	--c-filet: var(--c-lin);
	--c-contour: var(--c-encre);
	--c-focus: var(--c-encre);
	--trait: 2px solid var(--c-encre);
	--focus-couleur: var(--c-encre);
}
.ape-appel > * { margin-block: 0; }
.ape-appel .is-style-surtitre,
.ape-appel a:not(.wp-block-button__link) { color: var(--c-texte); }
.ape-appel h2 { margin-block: var(--e-2) var(--e-3); }
.ape-appel__texte > * { margin-block: 0; }
.ape-appel__texte > * + * { margin-block-start: var(--e-3); }
.ape-appel__texte > .wp-block-buttons,
.ape-appel__texte > .is-style-etapes + * { margin-block-start: var(--e-5); }
.ape-appel--douce { background: var(--c-fond-accent); }
.ape-appel--douce .is-style-surtitre { color: var(--c-accent); }
/* Sur l'orange, le seul bouton autorisé est le secondaire (blanc) */
.ape-appel:not(.ape-appel--douce) .wp-block-button__link { background: var(--c-blanc); color: var(--c-encre); border-color: var(--c-encre); }
.ape-appel:not(.ape-appel--douce) .wp-block-button__link:hover { background: var(--c-peche); }
@media (min-width: 56rem) {
	.ape-appel { grid-template-columns: 1.15fr 1fr; align-items: center; column-gap: var(--e-6); padding: var(--e-7) var(--e-6); }
	.ape-appel--douce { grid-template-columns: 1fr auto; padding: var(--e-6); }
}

/* Missions courtes, sur cartes blanches, avec le cœur orange cerné d'encre */
.ape-missions { display: grid; gap: var(--e-3); }
.ape-missions > * { margin-block: 0; }
.ape-mission {
	position: relative;
	padding: var(--e-3) var(--e-4) var(--e-3) calc(var(--e-4) + 1.25rem + var(--e-3));
	background: var(--c-surface);
	border-radius: var(--r-moyen);
}
.ape-mission::before {
	content: "";
	position: absolute;
	top: calc(var(--e-3) + 0.2em);
	left: var(--e-4);
	width: 1.25rem;
	height: 1.25rem;
	background: var(--ape-image-coeur) center / contain no-repeat;
}
.ape-mission > * { margin-block: 0; }
.ape-mission > * + * { margin-block-start: 0; }

/* Étapes numérotées : petit aplat blanc cerné d'encre */
.is-style-etapes { display: grid; gap: var(--e-2); margin-inline: 0; padding: 0; list-style: none; counter-reset: etape; }
.is-style-etapes > li { position: relative; min-height: 1.75rem; margin: 0; padding-left: calc(1.75rem + var(--e-3)); counter-increment: etape; }
.is-style-etapes > li::before {
	content: counter(etape);
	position: absolute;
	top: 0.05em;
	left: 0;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	background: var(--c-surface);
	border: var(--trait);
	border-radius: 50%;
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Encadré pêche glissé dans un texte (style de groupe proposé aux rédacteurs) */
.wp-block-group.is-style-encadre { padding: var(--e-5); background: var(--c-fond-accent); border-radius: var(--r-grand); }

/* ---------- Cartes d'actualité (bloc Requête) ---------- */
/* La grille s'adapte au nombre d'articles : 2 articles = 2 colonnes égales,
   3 ou plus = 3 colonnes ; les cartes gardent leur hauteur naturelle. */
.ape-cartes .wp-block-post-template {
	display: grid;
	gap: var(--e-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ape-cartes .wp-block-post-template > li { margin: 0; }
.ape-cartes .wp-block-post-template:has(> li:only-child) { grid-template-columns: minmax(0, 36rem); }
.ape-carte {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--c-surface);
	border: 1px solid var(--c-filet);
	border-radius: var(--r-moyen);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ape-carte > * { margin-block: 0; }
.ape-carte .wp-block-post-featured-image { margin: 0; aspect-ratio: 3 / 2; }
.ape-carte .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.ape-carte__corps { display: grid; gap: var(--e-2); padding: var(--e-5); }
.ape-carte__corps > * { margin-block: 0; }
.ape-carte .wp-block-post-title { font-family: var(--f-texte); font-size: var(--t-h4); font-weight: 600; line-height: 1.3; }
.ape-carte .wp-block-post-title a { color: var(--c-texte); text-decoration: none; }
.ape-carte .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.ape-carte .wp-block-post-title a:focus-visible { outline: none; }
.ape-carte .wp-block-post-excerpt__excerpt { margin: 0; }
.ape-carte:hover { border-color: var(--c-orange); box-shadow: var(--ombre-survol); }
.ape-carte:hover .wp-block-post-title a { text-decoration: underline 2px var(--c-accent); text-underline-offset: 0.18em; }
.ape-carte:focus-within { outline: 3px solid var(--focus-couleur); outline-offset: 3px; }
.ape-cartes .wp-block-query-pagination { margin-block-start: var(--e-6); gap: var(--e-4); font-weight: 600; }

/* Rubrique d'un article (texte, sans lien) */
.ape-rubrique {
	margin: 0;
	color: var(--c-accent);
	font-size: var(--t-surtitre);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------- Page d'article ---------- */
.ape-hero--article .ape-rubrique { margin-block-end: var(--e-2); }
/* Date d'une actualité, ou sa source quand la date exacte n'est pas connue */
.ape-date { --ape-icone: var(--ape-icone-calendrier); display: flex; align-items: center; gap: var(--e-2); margin: 0; color: var(--c-texte-doux); font-size: var(--t-petit); }
.ape-date--source { --ape-icone: var(--ape-icone-source); }
.ape-hero--article .ape-date { margin-block-start: var(--e-4); }
.ape-article { padding-block: var(--e-6) var(--e-7); }
.ape-article .wp-block-post-featured-image { margin-block: 0 var(--e-6); aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-moyen); }
.ape-article .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-post-content ul.wp-block-list:not([class*="ape-"]):not(.is-style-etapes) { padding-left: 1.25rem; }
.wp-block-post-content ul.wp-block-list:not([class*="ape-"]):not(.is-style-etapes) li::marker { color: var(--c-accent); }

/* ---------- Événements : pastille de date, cartes, fiche ---------- */
.ape-pastille {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	min-height: 4.75rem;
	margin: 0;
	padding: var(--e-2) 0;
	background: var(--c-orange);
	color: var(--c-encre);
	border: var(--trait-encre);
	border-radius: var(--r-petit);
	line-height: 1;
	text-align: center;
}
.ape-pastille__jour { font-family: var(--f-titres); font-size: 1.875rem; font-weight: 600; }
.ape-pastille__mois { margin-top: var(--e-1); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ape-pastille--grande { width: 5.25rem; min-height: 5.75rem; }
.ape-pastille--grande .ape-pastille__jour { font-size: 2.375rem; }
.ape-evenement--termine .ape-pastille,
.ape-pastille--terminee { background: var(--c-desactive-fond); border-color: var(--c-desactive-bord); color: var(--c-texte-doux); }

.ape-infos { display: grid; gap: var(--e-1); margin: 0; padding: 0; list-style: none; font-size: 1rem; }
.ape-infos > li { position: relative; margin: 0; padding-left: calc(1.25em + var(--e-2)); }
.ape-infos > li::before,
.ape-infos svg { position: absolute; top: 0.2em; left: 0; width: 1.25em; height: 1.25em; }
.ape-infos > li:not([class*="ape-icone-"])::before { display: none; }

/* Carte d'événement (agenda, prochaine occasion) */
.ape-liste-evenements { display: grid; gap: var(--e-4); max-width: 42rem; margin: 0; padding: 0; list-style: none; }
.ape-liste-evenements > li { margin: 0; }
.ape-evenement {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--e-4);
	padding: var(--e-5);
	background: var(--c-surface);
	border: 1px solid var(--c-filet);
	border-radius: var(--r-moyen);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ape-evenement__corps { display: grid; gap: var(--e-2); min-width: 0; }
.ape-evenement__titre { margin: 0; font-family: var(--f-texte); font-size: var(--t-h4); font-weight: 600; line-height: 1.3; }
.ape-evenement__titre a { color: var(--c-texte); text-decoration: none; }
.ape-evenement__titre a::after { content: ""; position: absolute; inset: 0; }
.ape-evenement__titre a:focus-visible { outline: none; }
.ape-evenement:hover { border-color: var(--c-orange); box-shadow: var(--ombre-survol); }
.ape-evenement:hover .ape-evenement__titre a { text-decoration: underline 2px var(--c-accent); text-underline-offset: 0.18em; }
.ape-evenement:focus-within { outline: 3px solid var(--focus-couleur); outline-offset: 3px; }
/* Le bouton d'aide reste cliquable au-dessus du lien étendu de la carte */
.ape-evenement__aide { position: relative; z-index: 1; margin: var(--e-2) 0 0; }
.ape-agenda__suite, .ape-agenda__vide { margin-block: var(--e-5) 0; }

/* Prochain rendez-vous, mis en avant dans l'accroche de l'accueil */
.ape-prochain {
	display: grid;
	gap: var(--e-4);
	padding: var(--e-5);
	background: var(--c-surface);
	border: 1px solid var(--c-filet);
	border-radius: var(--r-grand);
}
.ape-prochain > * { margin: 0; }
/* La carte mesure sa propre largeur (requête de conteneur) : la disposition suit la
   place réellement disponible, quelle que soit la largeur de l'écran. */
.ape-prochain { container-type: inline-size; }
/* Carte large : la pastille à gauche, le titre puis la date et le lieu à côté. */
.ape-prochain__evenement {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	grid-template-areas: "pastille titre" "pastille infos";
	align-items: start;
	column-gap: var(--e-4);
	row-gap: var(--e-2);
}
.ape-prochain__evenement > .ape-pastille { grid-area: pastille; }
.ape-prochain__evenement > .ape-infos { grid-area: infos; }
.ape-prochain__titre { grid-area: titre; margin: 0; font-family: var(--f-texte); font-size: var(--t-h4); font-weight: 600; line-height: 1.3; }
/* Carte étroite (téléphone) : la pastille et le titre côte à côte, puis la date et le
   lieu sur toute la largeur de la carte, pour qu'ils se lisent d'une traite. */
@container (max-width: 24rem) {
	.ape-prochain__evenement { grid-template-rows: auto auto; grid-template-areas: "pastille titre" "infos infos"; align-items: center; row-gap: var(--e-3); }
}
/* Très petits écrans (moins de 360 px) : marge intérieure réduite, pour que la date
   tienne sur une ligne sans réduire le texte. */
@media (max-width: 22.49rem) {
	.ape-prochain { padding: var(--e-4); }
}
.ape-prochain__titre a { color: var(--c-texte); text-decoration: none; }
.ape-prochain__titre a:hover { text-decoration: underline 2px var(--c-accent); text-underline-offset: 0.18em; }
.ape-prochain__vide { margin: 0; }
.ape-prochain__suite { padding-top: var(--e-4); border-top: 1px solid var(--c-filet); }
.ape-prochain__suite > p { margin: 0 0 var(--e-2); color: var(--c-texte-doux); font-size: var(--t-petit); font-weight: 600; }
.ape-prochain .ape-surtitre { margin: 0; }

/* Fiche d'événement */
.ape-fiche { display: flex; align-items: center; gap: var(--e-4); margin-block-end: var(--e-5); }
.ape-fiche h1 { margin: 0; }
.ape-fiche .ape-surtitre { margin: 0 0 var(--e-1); }
.ape-fiche__infos { gap: var(--e-2); font-size: var(--wp--custom--taille--texte); }
.ape-termine { display: inline-block; margin-block: var(--e-4) 0; padding: 0.0625rem 0.625rem; background: var(--c-desactive-fond); color: var(--c-texte-doux); border-radius: var(--r-pilule); font-size: 0.875rem; font-weight: 600; }
.ape-evenement-contenu > .ape-appel { margin-block-start: var(--e-6); }

/* Inscriptions ouvertes (fiche, agenda, prochain rendez-vous) : étiquette verte cochée,
   puis le bouton vers la page d'inscription saisie dans l'événement. */
.ape-inscription { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); }
.ape-inscription > * { margin: 0; }
.ape-inscription__annonce {
	--ape-icone: var(--ape-icone-valide);
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	padding: 0.25rem 0.75rem;
	background: var(--c-succes-fond);
	color: var(--c-succes);
	border-radius: var(--r-pilule);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}
.ape-fiche__infos + .ape-inscription { margin-block-start: var(--e-5); }
/* Dans l'agenda, le bouton reste cliquable au-dessus du lien étendu de la carte */
.ape-evenement .ape-inscription { position: relative; z-index: 1; margin-block-start: var(--e-2); }

/* Surtitre rendu par les blocs du site */
.ape-surtitre {
	color: var(--c-accent);
	font-size: var(--t-surtitre);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------- Accueil : accroche, prochain rendez-vous, boutons ---------- */
/* Mobile : accroche, rendez-vous, puis boutons. Ordinateur : rendez-vous à droite. */
.ape-hero__grille { display: grid; gap: var(--e-5); grid-template-areas: "texte" "prochain" "actions"; }
.ape-hero__grille > * { margin-block: 0; }
.ape-hero__texte { grid-area: texte; }
.ape-hero__texte > * { margin-block: 0; }
.ape-hero__texte > * + * { margin-block-start: var(--e-4); }
.ape-hero__texte h1 { margin-block-start: var(--e-2); }
.ape-hero__grille > .ape-prochain { grid-area: prochain; }
.ape-hero__grille > .wp-block-buttons { grid-area: actions; }
@media (min-width: 56rem) {
	.ape-hero__grille { grid-template-columns: 1.1fr 1fr; grid-template-areas: "texte prochain" "actions prochain"; column-gap: var(--e-6); }
	.ape-hero__texte { align-self: end; }
	.ape-hero__grille > .wp-block-buttons { align-self: start; }
	.ape-hero__grille > .ape-prochain { align-self: center; }
}

/* ---------- Équipe : le bureau (prénom et fonction), puis les autres membres ---------- */
.ape-equipe {
	display: grid;
	gap: var(--e-3);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
	margin-block-end: var(--e-4);
}
.ape-equipe > * { margin-block: 0; }
.ape-membre { display: grid; gap: var(--e-1); align-content: start; padding: var(--e-4); background: var(--c-surface); border: 1px solid var(--c-filet); border-radius: var(--r-moyen); }
.ape-membre > * { margin: 0; }
.ape-membre__nom { font-size: 1.125rem; font-weight: 600; }
.ape-membre__role { color: var(--c-texte-doux); font-size: var(--t-petit); }

/* Sources citées en bas de page */
.ape-sources { padding-left: 1.25rem; color: var(--c-texte-doux); font-size: var(--t-petit); }
.ape-sources > li + li { margin-top: var(--e-1); }

/* Colonnes (page Contact) : intertitres plus petits */
.wp-block-columns h2 { font-size: var(--t-h3); }
.wp-block-column > h2:not(:first-child) { margin-block-start: var(--e-6); }

/* ---------- Liens vers les réseaux sociaux et adresse e-mail ---------- */
.ape-reseaux { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); margin: 0; padding: 0; list-style: none; }
.ape-reseaux > li { margin: 0; }
.ape-reseaux a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 2.75rem; font-weight: 600; }
.ape-reseaux svg { width: 1.375rem; height: 1.375rem; }
.ape-reseaux--pile { flex-direction: column; gap: 0; }
.ape-courriel { display: flex; align-items: center; gap: var(--e-2); }
.ape-courriel svg { flex: none; width: 1.25em; height: 1.25em; }

/* ---------- Formulaire ---------- */
.ape-formulaire { display: grid; gap: var(--e-5); max-width: 36rem; padding: var(--e-5); background: var(--c-surface); border: 1px solid var(--c-filet); border-radius: var(--r-moyen); }
.ape-formulaire > * { margin: 0; }
.ape-formulaire__titre { margin: 0; font-size: var(--t-h3); }
.ape-champ { display: grid; gap: var(--e-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.ape-champ > label { padding: 0; font-weight: 600; }
.ape-champ__mention { color: var(--c-texte-doux); font-weight: 400; }
.ape-champ__aide { margin: 0; color: var(--c-texte-doux); font-size: var(--t-petit); }
.ape-champ__erreur { margin: 0; color: var(--c-erreur); font-size: var(--t-petit); font-weight: 600; }
.ape-saisie {
	width: 100%;
	min-height: 3rem;
	padding: 0.625rem 0.875rem;
	background: var(--c-saisie-fond);
	color: var(--c-texte);
	border: 2px solid var(--c-saisie-bord);
	border-radius: var(--r-petit);
	font: inherit;
	line-height: 1.4;
}
textarea.ape-saisie { min-height: 8rem; resize: vertical; }
.ape-saisie:hover { border-color: var(--c-contour); }
.ape-saisie:focus-visible { border-color: var(--c-contour); outline-offset: 2px; border-radius: var(--r-petit); }
.ape-saisie[aria-invalid="true"] { border-color: var(--c-erreur); }
.ape-choix { display: flex; align-items: flex-start; gap: var(--e-3); }
.ape-choix input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.15rem 0 0; accent-color: var(--c-accent); }
.ape-formulaire__envoyer { justify-self: start; cursor: pointer; }
/* Champ piège pour les robots : hors de l'écran, ignoré des lecteurs d'écran */
.ape-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Messages (confirmation, erreurs) */
.ape-message { display: grid; gap: var(--e-1); padding: var(--e-4) var(--e-5); border-left: 6px solid currentColor; border-radius: var(--r-petit); }
.ape-message > * { margin: 0; color: var(--c-texte); }
.ape-message__titre { color: inherit; font-weight: 600; }
.ape-message ul { padding-left: 1.25rem; }
.ape-message a { color: inherit; }
.ape-message--succes { background: var(--c-succes-fond); color: var(--c-succes); }
.ape-message--erreur { background: var(--c-erreur-fond); color: var(--c-erreur); }
.ape-message--succes .ape-message__titre { color: var(--c-succes); }
.ape-message--erreur .ape-message__titre { color: var(--c-erreur); }

/* ---------- Pied de page ---------- */
/* Fond encre en clair, plus sombre que la page en mode sombre (avec un filet en
   haut) ; textes, liens et focus identiques dans les deux modes. */
.ape-pied { --focus-couleur: var(--c-orange); padding-block: var(--e-7) var(--e-5); background: var(--c-pied-fond); color: var(--c-blanc); box-shadow: var(--pied-separation, none); }
.ape-pied a:not(.wp-block-button__link) { color: var(--c-orange); }
.ape-pied a:not(.wp-block-button__link):hover { color: var(--c-blanc); }
.ape-pied__grille { display: grid; gap: var(--e-6); }
.ape-pied__grille > * { margin-block: 0; }
.ape-pied__grille > * > * { margin-block: 0; }
.ape-pied__grille > * > * + * { margin-block-start: var(--e-3); }
.ape-pied .wp-block-site-logo { width: max-content; padding: 14px; background: var(--c-blanc); border-radius: 14px; }
.ape-pied .wp-block-site-logo img { width: 112px; height: auto; }
/* Focus : contour autour de la plaque, sur le fond encre (orange sur la plaque blanche : 2:1 seulement) */
.ape-pied .wp-block-site-logo a:focus-visible { outline: none; }
.ape-pied .wp-block-site-logo:focus-within { outline: 3px solid var(--focus-couleur); outline-offset: 3px; }
.ape-pied__texte { color: var(--c-sable); }
.ape-pied__titre { color: var(--c-sable); font-size: var(--t-surtitre); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.ape-pied__liens { display: grid; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.ape-pied .wp-block-navigation { font-size: inherit; font-weight: 400; }
.ape-pied .wp-block-navigation .wp-block-navigation__container { gap: var(--e-2); align-items: flex-start; }
.ape-pied .wp-block-navigation .wp-block-navigation-item__content { padding: 0; color: var(--c-orange); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.ape-pied .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--c-blanc); text-decoration-thickness: 2px; }
.ape-pied__bas .wp-block-navigation .wp-block-navigation__container { gap: var(--e-1) var(--e-3); }
.ape-pied__liens > li { margin: 0; }
.ape-pied__bas {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--e-3) var(--e-5);
	margin-block-start: var(--e-6);
	padding-top: var(--e-5);
	border-top: 1px solid rgb(255 255 255 / 0.2);
	color: var(--c-sable);
	font-size: var(--t-petit);
}
.ape-pied__bas > * { margin: 0; }
.ape-pied__bas .ape-pied__liens { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); }
@media (min-width: 56rem) {
	.ape-pied__grille { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

/* ---------- Bouton « Apparence » : automatique, clair ou sombre ---------- */
/* Masqué tant que le script ne l'a pas activé (sans JavaScript, le site suit
   l'appareil). Sur petit écran, seul le pictogramme reste visible. */
.ape-apparence { position: relative; flex: none; }
.ape-apparence__bouton {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	min-height: 3rem;
	padding: 0.5rem 1.125rem;
	background: var(--c-surface);
	color: var(--c-texte);
	border: var(--trait);
	border-radius: var(--r-pilule);
	font-family: var(--f-texte);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}
.ape-apparence__bouton:hover { background: var(--c-fond-accent); }
.ape-apparence__bouton:focus-visible { outline-offset: 3px; border-radius: var(--r-pilule); }
.ape-apparence__bouton svg { flex: none; width: 1.25em; height: 1.25em; }
.ape-apparence__bouton[hidden],
.ape-apparence__choix[hidden] { display: none; }
.ape-apparence__choix {
	position: absolute;
	top: calc(100% + var(--e-2));
	right: 0;
	z-index: 20;
	width: max-content;
	min-width: 15rem;
	max-width: calc(100vw - 2 * var(--l-marge));
	padding: var(--e-4);
	background: var(--c-surface);
	color: var(--c-texte);
	border: 1px solid var(--c-filet);
	border-radius: var(--r-moyen);
	box-shadow: var(--ombre-survol);
}
.ape-apparence__choix fieldset { display: grid; gap: var(--e-1); min-width: 0; margin: 0; padding: 0; border: 0; }
.ape-apparence__choix legend { margin-bottom: var(--e-2); padding: 0; font-weight: 600; }
.ape-apparence__option { display: flex; align-items: center; gap: var(--e-3); min-height: 2.75rem; padding: var(--e-1) var(--e-2); border-radius: var(--r-petit); cursor: pointer; }
.ape-apparence__option:hover { background: var(--c-fond-accent); }
.ape-apparence__option input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--c-accent); }
.ape-apparence__aide { display: block; color: var(--c-texte-doux); font-size: var(--t-petit); }
@media (max-width: 29.99rem) {
	.ape-apparence__bouton { padding-inline: 0.75rem; }
	.ape-apparence__libelle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* ---------- Impression : toujours en clair, sans les commandes d'affichage ---------- */
@media print {
	.ape-apparence { display: none !important; }
}

/* ---------- Accessibilité et éditeur ---------- */
/* Texte lu par les lecteurs d'écran, invisible à l'écran, sauf quand il reçoit le focus */
.screen-reader-text:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
/* Lien « Aller au contenu » (WordPress) : visible au focus, aux couleurs du site */
a.skip-link.screen-reader-text:focus { background: var(--c-surface); color: var(--c-texte); font-weight: 600; border-radius: var(--r-petit); box-shadow: var(--ombre-survol); }
/* Dans l'éditeur seulement : place d'un bloc rempli automatiquement */
.ape-substitut {
	margin: 0;
	padding: var(--e-4);
	background: var(--c-blanc);
	border: 2px dashed var(--c-sable);
	border-radius: var(--r-petit);
	color: var(--c-taupe);
	font-size: var(--t-petit);
}
.ape-hero__grille > .wp-block-ape-prochain-evenement { grid-area: prochain; }
@media (min-width: 56rem) {
	.ape-hero__grille > .wp-block-ape-prochain-evenement { align-self: center; }
}

/* ---------- Page introuvable ---------- */
.ape-introuvable .wp-block-buttons { margin-block-start: var(--e-5); }

/* ---------- Mouvements réduits ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}