/*
Theme Name: Tous en cœur (FSE)
Theme URI: https://tousencoeur.fr
Author: JBK Agency
Author URI: https://jbkagency.fr
Description: Thème de blocs (Full Site Editing) pour l'association Tous en Cœur. Le système de design vient d'Automatic.css : theme.json ne fait que mapper les tokens ACSS sur les presets WordPress, il ne redéfinit aucune valeur. Conçu pour servir de base réutilisable aux sites suivants.
Version: 0.1.1
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tousencoeur-fse
Tags: full-site-editing, block-patterns, accessibility-ready
*/

/* ==========================================================================
   Ce fichier ne contient QUE ce que theme.json ne sait pas exprimer : le hero,
   l'en-tête et le pied de page. Tout le reste (couleurs, espacements,
   typographie) passe par les presets de theme.json, qui pointent eux-mêmes sur
   les tokens ACSS. Aucune valeur d'espacement en dur ici.

   Valeurs relevées sur le rendu de production avant suppression de Bricks.
   ========================================================================== */

/* --- Police de texte ----------------------------------------------------
   Déclarée ici pour la même raison que la manuscrite : les @font-face émis par
   WordPress depuis theme.json sont bien servis dans la page mais ne s'appliquent
   pas. Sans ces déclarations, tout le site retombait sur la police système —
   plus étroite qu'Open Sans d'environ 15 %, ce qui se voit surtout sur le menu.
   ----------------------------------------------------------------------- */
@font-face {
	font-family: "Open Sans";
	src: url("assets/fonts/OpenSans-300.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Open Sans";
	src: url("assets/fonts/OpenSans-400.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Open Sans";
	src: url("assets/fonts/OpenSans-700.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Open Sans";
	src: url("assets/fonts/OpenSans-800.woff") format("woff");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* --- Police manuscrite du hero ----------------------------------------
   Déclarée ici et pas seulement dans theme.json : la déclaration émise par
   WordPress était bien servie dans la page, et le hero retombait pourtant sur
   le générique `cursive` — qui vaut Comic Sans MS sur Windows. Vérifié par
   capture, et vérifié aussi qu'en page isolée le fichier se charge et s'affiche
   correctement : le problème venait de l'émission, pas de la police.
   ----------------------------------------------------------------------- */
@font-face {
	font-family: "Dancing Script";
	src: url("assets/fonts/DancingScript-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}

/* --- Base de l'unité rem ------------------------------------------------
   ⚠️ Règle la plus structurante de ce fichier.

   Toute l'échelle d'Automatic.css est calibrée pour **1 rem = 10 px** : ACSS
   définit `--root-font-size: 62.5%` dans automatic.css, mais ne l'applique
   nulle part — il attend que le thème le fasse. En production c'est Bricks qui
   posait `html { font-size: var(--root-font-size) }`, en ligne dans le HTML ;
   la règle est donc partie avec lui.

   Sans elle, 1 rem vaut 16 px et **tous les tokens ACSS valent 1,6 fois leur
   valeur prévue** : --text-m à 28,8 px au lieu de 18, --space-l à 72 px au lieu
   de 45, --content-width à 2048 px au lieu de 1280 — d'où des titres trop
   grands, des espacements trop larges et des max-width en --width-* sans effet.
   ----------------------------------------------------------------------- */
html {
	font-size: var(--root-font-size, 62.5%);
}

/* --- Teintes de fond, page par page -------------------------------------
   Relevées une à une sur la production, où chaque page porte un voile de
   couleur translucide sur fond blanc (élément `section` du gabarit Bricks).
   Ce ne sont pas des tokens ACSS mais des teintes posées à la main : réunies
   ici pour n'avoir qu'un endroit à modifier.

   `/mentions-legales/` et `/nos-actualites/` n'en ont pas en production :
   elles restent sur le fond blanc, et c'est voulu, pas un oubli.
   ----------------------------------------------------------------------- */
/* --- Couleurs ajustées pour l'accessibilité -----------------------------
   Le rose de production (#fe3e7b) donne 2,5:1 sur le fond violet de la page
   Croquis et 2,8:1 sur le rose de la page Réunions — sous le seuil de 3:1 que
   demande déjà le GRAND texte, donc illisible pour une partie des visiteurs.
   Même teinte, luminosité abaissée : 3,4 à 4,6:1 selon le fond, le seuil des
   titres est tenu partout. Ce n'est pas un token ACSS parce que l'échelle n'en
   propose pas d'intermédiaire : --secondary-dark (#7f0129) vire au bordeaux.
   ----------------------------------------------------------------------- */
:root {
	--tec-titre: #e9014b;
	--tec-titre-clair: #fe9ebf;

	--tec-fond-accueil: var(--primary-ultra-light);
	--tec-fond-vert: hsla(119, 100%, 65%, 0.23);
	--tec-fond-violet: hsla(268, 100%, 65%, 0.22);
	--tec-fond-jaune: hsla(55, 100%, 65%, 0.3);
	--tec-fond-rose: hsla(346, 100%, 65%, 0.16);
}

body.home {
	background-color: var(--tec-fond-accueil);
}

body.tec-page-activites,
body.tec-page-adhesion,
body.tec-page-partenaires {
	background-color: var(--tec-fond-vert);
}

body.tec-page-croquis {
	background-color: var(--tec-fond-violet);
}

body.tec-page-historique {
	background-color: var(--tec-fond-jaune);
}

body.tec-page-reunions {
	background-color: var(--tec-fond-rose);
}

/* --- Hero de l'accueil ---------------------------------------------------
   ⚠️ En production, le hero et l'en-tête sont UN SEUL élément (#brxe-bacf03
   porte à la fois .brxe-section et .fr-header-alpha). Le
   `background-color: var(--bg-light)` de .fr-header-alpha existe bien, mais il
   passe SOUS l'image de fond : il ne se voit jamais. Un premier essai en avait
   fait une barre grise séparée au-dessus du hero — l'écart ne se voyait pas au
   curl, seulement à l'écran.
   ----------------------------------------------------------------------- */
.tec-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding: var(--space-m) var(--gutter);
	background-color: var(--bg-light);
	background-image: url("assets/img/coeur-de-main.jpg");
	background-size: cover;
	background-position: center;
}

/* Voile sombre. Bricks l'avait en ::before, on garde ::before pour laisser
   ::after disponible. */
.tec-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(var(--black-trans-40), var(--black-trans-40));
	pointer-events: none;
}

.tec-hero > * {
	position: relative; /* au-dessus du voile */
}

/* --- Largeur et débordement --------------------------------------------
   Le hero et l'en-tête sont pleine largeur, mais leur CONTENU doit s'aligner
   sur la largeur de contenu du site, comme en production : le logo à gauche et
   la navigation à droite tombent alors sur les mêmes verticales que les cartes.
   Sans ça la barre prenait toute la largeur et la navigation débordait à droite.
   `min-width: 0` sur la navigation : un enfant de flex refuse de rétrécir sous
   sa taille de contenu par défaut, ce qui pousse la barre hors de l'écran.
   ----------------------------------------------------------------------- */
.tec-hero,
.tec-header {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.tec-hero__bar,
.tec-header__inner {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
}

.tec-hero__bar > .wp-block-navigation,
.tec-header__inner > .wp-block-navigation {
	min-width: 0;
}

/* --- Marque : logo + nom, à gauche -------------------------------------- */
.tec-hero__logo img,
.tec-header__logo img {
	width: var(--width-xs);
	max-width: 100%;
	height: auto;
}

/* Sur les pages internes le nom n'est plus un titre — il précédait le <h1> de
   la page — mais il doit garder son rang visuel. */
.tec-hero__titre,
.tec-header__titre {
	margin: 0;
	font-size: var(--h2);
	font-weight: 700;
	line-height: 1.1;
}

/* Le rose de marque ne donne que 2,6:1 sur le bleu de l'en-tête, sous le seuil
   même pour du grand texte. Même teinte éclaircie : 4,6:1. */
.tec-hero__titre a,
.tec-header__titre a {
	color: var(--tec-titre-clair);
	text-decoration: none;
}

.tec-hero__marque,
.tec-header__marque {
	min-width: 0;
}

/* --- Navigation --------------------------------------------------------- */
/* Sur le hero, les liens passent sur l'image : ils sont blancs. Sur l'en-tête
   standard des pages internes, le fond est clair et la couleur de lien du
   thème convient. */
.tec-hero .wp-block-navigation .wp-block-navigation-item__content,
.tec-hero .wp-block-navigation .wp-block-navigation-item__content:hover,
.tec-hero .wp-block-navigation .wp-block-navigation-item__content:focus,
.tec-header .wp-block-navigation .wp-block-navigation-item__content,
.tec-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.tec-header .wp-block-navigation .wp-block-navigation-item__content:focus {
	color: var(--white);
}

.tec-hero .wp-block-navigation .wp-block-navigation-item__content,
.tec-header .wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 600;
	font-size: var(--text-s);
	text-decoration: none;
}

.tec-hero .wp-block-navigation .current-menu-item .wp-block-navigation-item__content,
.tec-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* --- En-tête des pages internes ----------------------------------------
   Ici le fond clair se voit : il n'y a pas d'image par-dessus.
   ----------------------------------------------------------------------- */
.tec-header {
	padding: var(--space-m) var(--gutter);
	background-color: var(--primary-dark);
}

/* --- Accroche manuscrite ------------------------------------------------ */
/* `padding-inline: 0` n'est pas décoratif : en disposition « contraint »,
   WordPress ajoute la classe `has-global-padding` au groupe, qui lui applique
   une gouttière de chaque côté. Sur un conteneur de var(--width-m), cela
   retirait 120 px de largeur utile et faisait passer l'accroche de trois à
   quatre lignes. */
/* L'accroche occupe toute la hauteur restante sous la barre et s'y centre.
   Positionnée par le conteneur et non par une marge : WordPress remet à zéro
   les marges des blocs avec une règle de même spécificité que celles du thème,
   et comme les styles globaux sont imprimés APRÈS la feuille du thème, ils
   gagnent — un margin-top sur ce groupe restait sans effet. */
.tec-hero__accroche {
	flex: 1;
	display: grid;
	place-content: center;
	width: var(--width-m);
	max-width: 100%;
	padding-inline: 0;
	padding-block-start: var(--section-space-s);
	margin-inline: auto;
}

.tec-hero__baseline {
	margin: 0;
	color: var(--white);
	font-family: "Dancing Script", cursive;
	font-size: var(--text-xxl);
	line-height: 2;
	text-align: center;
}

/* Le hero ne s'affiche qu'en première page de la boucle : WordPress pose la
   classe « paged » sur toutes les vues paginées. Remplace la condition de
   gabarit Bricks, qui ne savait pas lire la chaîne de requête. */
body.paged .tec-hero {
	min-height: 0;
	background-image: none;
}

body.paged .tec-hero::before {
	content: none;
}

body.paged .tec-hero__accroche {
	display: none;
}

/* --- Pied de page ------------------------------------------------------
   Valeurs relevées sur le pied de page de production (composant
   .fr-footer-kilo). Le fond est var(--primary-dark), pas le bleu nuit
   var(--base) : c'est #brxe-6038ac qui le pose.

   Les quatre couleurs de titre de colonne ne sont PAS des tokens ACSS : ce sont
   des accents posés à la main dans Bricks. Relevés tels quels et rassemblés ici
   en propriétés locales, pour qu'il n'y ait qu'un endroit à changer.
   ----------------------------------------------------------------------- */
.tec-footer {
	/* Teintes de production éclaircies : sur le bleu du pied de page, les
	   valeurs d'origine donnaient 2,6:1 (Contactez nous) et 2,7:1 (Dons), sous
	   le seuil même pour du grand texte. Même teinte, 4,5:1 atteint. */
	/* Titres : teintes de production éclaircies, car sur le bleu du pied de page
	   les valeurs d'origine donnaient 2,6:1 (Contactez nous) et 2,7:1 (Dons),
	   sous le seuil même pour du grand texte. Même teinte, 4,5:1 atteint. */
	--tec-contact: #fe9ebf;
	--tec-adhesion: #5cd333;
	--tec-dons: #fea494;
	--tec-padlet: #ffff15;

	/* Filets des codes QR : teintes vives d'origine conservées. Un filet n'est
	   pas du texte et n'est pas soumis au même seuil ; l'éclaircir ferait perdre
	   le repère de couleur sans rien gagner en lisibilité. */
	--tec-dons-filet: #fe4f2e;
	--tec-padlet-filet: #ffff15;

	padding-block: var(--section-space-s);
	padding-inline: var(--gutter);
	background-color: var(--primary-dark);
	color: var(--white);
}

.tec-footer a {
	color: var(--white);
}

.tec-footer a:hover,
.tec-footer a:focus-visible {
	color: var(--primary-light);
}

/* --- Identité ----------------------------------------------------------- */
.tec-footer__identite {
	gap: var(--space-l);
	align-items: center;
	margin-bottom: var(--section-space-xs);
}

.tec-footer__identite .wp-block-site-logo img {
	width: var(--width-xs);
	max-width: 100%;
	height: auto;
}

.tec-footer__nom {
	margin: 0;
	color: var(--white);
}

.tec-footer__courriel a {
	text-decoration: none;
}

.tec-footer__adresse,
.tec-footer__courriel {
	margin: 0;
	font-size: var(--text-m);
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
	color: var(--white-trans-90);
}

/* --- Titres de colonne -------------------------------------------------- */
.tec-footer .tec-footer__corps > .wp-block-column,
.tec-footer .tec-footer__liens > .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
}

/* WordPress garde sa classe `is-layout-flow` sur les colonnes et pose une marge
   entre enfants successifs — laquelle s'AJOUTE au `gap` du conteneur flex. C'est
   l'espace fantôme qui restait sous les titres sans que rien ne l'explique.
   L'espacement est désormais piloté par le seul `gap`. */
.tec-footer .tec-footer__corps > .wp-block-column > *,
.tec-footer .tec-footer__liens > .wp-block-column > * {
	margin-block: 0;
}

/* Le lien autour d'un code QR reste en ligne par défaut : son conteneur garde
   alors la place d'une descendante sous l'image, ce qui ajoute une dizaine de
   pixels sous le titre sans que rien ne l'explique dans le CSS. */
.tec-footer .tec-media-lien {
	display: block;
	line-height: 0;
}

/* Boîte de titre resserrée : l'interligne par défaut ajoutait lui aussi de
   l'espace sous les lettres. */
.tec-footer .tec-footer__titre {
	margin: 0;
	line-height: 1;
}

/* La colonne de droite empile trois blocs — codes QR, réseaux, mentions — et les
   répartit sur TOUTE la hauteur de la rangée, laquelle est donnée par la colonne
   du formulaire. « Suivez-nous » tombe ainsi à mi-chemin, au niveau du bas du
   champ message, comme en production, et suit tout seul si la hauteur du
   formulaire change. Un écart fixe aurait demandé d'être recalculé à chaque
   retouche du formulaire. */
.tec-footer .tec-footer__corps > .tec-footer__droite {
	justify-content: space-between;
	gap: var(--space-l);
}

/* L'écart vient du gap, plus de la marge : sinon les deux s'additionnent et les
   colonnes se désalignent. */
.tec-footer__titre--contact  { color: var(--tec-contact); }
.tec-footer__titre--adhesion { color: var(--tec-adhesion); }
.tec-footer__titre--dons     { color: var(--tec-dons); }
.tec-footer__titre--padlet   { color: var(--tec-padlet); }
.tec-footer__titre--reseaux  { color: #6bc3fb; margin-block-end: 0; }

/* --- Codes QR ----------------------------------------------------------- */
.tec-footer .tec-media {
	display: block;
	width: 150px;
	max-width: 100%;
	height: auto;
}

.tec-footer .tec-qr--dons {
	border: 4px solid var(--tec-dons-filet);
}

.tec-footer .tec-qr--padlet {
	border: 4px solid var(--tec-padlet-filet);
}

.tec-footer .tec-helloasso {
	width: 40px;
	border-radius: 50%;
}

/* --- Formulaire --------------------------------------------------------- */
/* La production n'affiche pas les libellés, seulement des indications dans les
   champs. On masque les libellés VISUELLEMENT au lieu de les supprimer : un
   champ qui n'a qu'un placeholder n'a pas de nom accessible, et l'indication
   disparaît dès qu'on commence à saisir. */
.tec-footer .kb-adv-form-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 80 % d'une colonne à 40 % : la largeur relevée sur la référence. Exprimée en
   relatif à dessein — un token --width-* dépend de --content-width, donc de la
   base rem, que ce site ne fixe nulle part. */
.tec-footer .kb-advanced-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	width: 100%;
	max-width: var(--width-m);
	margin: 0;
}

/* Spécificité volontairement élevée : Kadence pose ses propres règles sur
   .kb-field depuis une feuille chargée avant celle du thème, et son CSS
   dynamique `kadence_blocks_css-inline` passe même après les styles globaux. */
.tec-footer .kb-advanced-form .kb-field,
.tec-footer .kb-advanced-form textarea.kb-field {
	width: 100%;
	padding-block: var(--space-s);
	padding-inline: var(--space-s);
	border: 0;
	border-radius: var(--radius);
	background-color: var(--white);
	color: var(--text-dark);
	font-family: inherit;
	font-size: var(--text-m);
	line-height: 1.2;
}

.tec-footer .kb-field::placeholder {
	color: var(--black-trans-40);
	opacity: 1;
}

.tec-footer .kb-field:focus-visible {
	outline: 2px solid var(--primary-light);
	outline-offset: 2px;
}

.tec-footer .kb-textarea-field {
	min-height: 7em;
	resize: vertical;
}

/* Bouton : fond très sombre et filet blanc, comme en production
   (#brxe-ce4981 pose var(--primary-ultra-dark)). */
.tec-footer .kb-adv-form-submit-button {
	padding: var(--btn-padding-block) var(--space-l);
	border: 1px solid var(--white);
	border-radius: var(--radius);
	background-color: var(--primary-ultra-dark);
	color: var(--white);
	font-size: var(--text-m);
	cursor: pointer;
}

.tec-footer .kb-adv-form-submit-button:hover,
.tec-footer .kb-adv-form-submit-button:focus-visible {
	background-color: var(--white);
	color: var(--primary-ultra-dark);
}

/* Messages de confirmation et d'erreur du formulaire.
   Kadence colore les siens par variables — `.kb-adv-form-success` vaut
   `color: var(--kb-form-success-color, #2b6cb0)`, un bleu prévu pour un fond
   clair. Sur le bleu foncé du pied de page, ce bleu sur bleu donnait 1,2:1 :
   le message était là mais illisible. On redéfinit les variables du plugin
   plutôt que d'écraser ses règles — c'est le point d'entrée qu'il expose, et
   ça couvre du même coup le message d'erreur. */
.tec-footer .wp-block-kadence-advanced-form {
	--kb-form-success-color: var(--white);
	--kb-form-success-background: var(--white-trans-10);
	--kb-form-error-color: var(--white);
	--kb-form-error-background: #be001b;
}

/* Blanc sur le voile clair du succès : 6,8:1. Blanc sur le rouge d'erreur :
   6,5:1. Le fond reste porté par les variables ci-dessus, pour que le succès
   et l'erreur ne se confondent pas. */
.tec-footer .kb-adv-form-message {
	padding: var(--space-xs);
	border-radius: var(--radius);
	font-size: var(--text-s);
}

/* --- Réseaux et mentions ------------------------------------------------ */
/* Les réseaux et la ligne de mentions vivent dans la COLONNE DE DROITE, sous
   les trois colonnes de liens — comme en production, où ils s'alignent sur
   « Adhésion » et non sur le bord gauche du pied de page. */
.tec-footer__droite {
	display: flex;
	flex-direction: column;
	gap: var(--section-space-xs);
}

.tec-footer__liens {
	margin-bottom: 0;
}

.tec-footer__reseaux {
	gap: var(--space-l);
	margin-top: 0;
	width: 100%;
}

.tec-footer__reseaux .tec-footer__titre {
	margin-block-end: 0;
}

/* Petit texte : var(--white-trans-60) ne donnait que 3,6:1, sous le seuil de
   4,5:1 exigé hors grand texte. Le blanc plein monte à 8,8:1. */
.tec-footer__bas {
	width: 100%;
	margin-top: 0;
	padding-top: var(--space-m);
	border-top: 1px solid var(--white-trans-20);
	font-size: var(--text-s);
	color: var(--white);
}

.tec-footer__bas a {
	color: var(--white);
	text-decoration: none;
}

.tec-footer__bas a:hover,
.tec-footer__bas a:focus-visible {
	color: var(--white);
}

/* --- Points de rupture -------------------------------------------------
   Alignés sur les points de rupture ACSS (1281 / 993 / 769 / 480), pas sur
   ceux de Bricks (478 / 767) : c'est le cadre du projet.
   ⚠️ Fidélité : en dessous de 480 px, Bricks faisait REMONTER la baseline de
   --text-xl à --text-xxl. C'est probablement une erreur du builder plutôt
   qu'une intention. Reproduit tel quel pour l'instant — à trancher.
   --------------------------------------------------------------------- */
@media (max-width: 769px) {
	.tec-hero__baseline {
		font-size: var(--text-xl);
	}

	.tec-hero__accroche {
		width: 100%;
		margin-top: var(--section-space-xs);
	}
}

@media (max-width: 480px) {
	.tec-hero {
		min-height: 60vh;
	}

	.tec-hero__baseline {
		font-size: var(--text-xxl);
	}
}

/* ===== DÉBUT DU BLOC REPLIÉ DEPUIS LES STYLES GLOBAUX ===== */
/* Vidé le 2026-10-07. Il contenait le premier habillage du formulaire de pied
   de page (champs translucides, texte blanc, bouton bordeaux), replié avant que
   la référence de production soit connue. Étant en FIN de fichier, il écrasait
   silencieusement la section « Pied de page » plus haut : c'est ce qui donnait
   un champ texte illisible et un bouton de la mauvaise couleur.

   ⚠️ Leçon sur la boucle : `pull` AJOUTE, il ne remplace rien. Quand on réécrit
   un composant déjà replié, il faut purger ses anciennes règles ici, sinon les
   anciennes gagnent. */
/* ===== FIN DU BLOC REPLIÉ ===== */

/* --- Galerie de la page « Croquis » -------------------------------------
   Reprise des réglages de l'élément `image-gallery` de Bricks : filet blanc de
   12 px et format 2/3. Le bloc natif de WordPress recadre déjà les vignettes à
   hauteur égale ; le format force le même rapport qu'en production.
   ----------------------------------------------------------------------- */
.tec-galerie.wp-block-gallery img {
	border: 12px solid var(--white);
	aspect-ratio: 2 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* --- Largeur de contenu des pages internes ------------------------------
   La production contraint le conteneur des pages internes à `60ch` — une
   mesure de lisibilité, pas une largeur de grille. Deux exceptions relevées :
   `/mentions-legales/` tient en var(--width-l), et `/croquis/` garde toute la
   largeur pour sa galerie.

   On redéfinit `--wp--style--global--content-size` au lieu de poser un
   max-width : c'est la propriété que la disposition « contraint » de WordPress
   consulte, donc le mécanisme natif continue de s'appliquer — alignements
   larges et pleine largeur compris.
   ----------------------------------------------------------------------- */
/* ⚠️ La mesure se pose sur le CONTENEUR, pas sur la propriété héritée.
   `ch` est relatif à la taille de police de l'élément qui l'utilise : passée en
   `--wp--style--global--content-size`, la valeur `60ch` était recalculée sur
   chaque enfant — environ 550 px sur un paragraphe à 18 px, mais près de
   1400 px sur un titre à 47 px, qui s'étalait donc sur toute la largeur. Posée
   une fois sur le `main`, elle vaut la même chose pour tout ce qu'il contient.

   Les gouttières s'ajoutent à la mesure pour que la colonne de texte fasse
   réellement 60ch, le `main` portant déjà `has-global-padding`. */
.tec-contenu {
	max-width: calc(60ch + 2 * var(--gutter));
	margin-inline: auto;
	--wp--style--global--content-size: 100%;
	--wp--style--global--wide-size: 100%;
}

body.tec-page-mentions-legales .tec-contenu {
	max-width: calc(var(--width-l) + 2 * var(--gutter));
}

/* Deux pages gardent toute la largeur : « Croquis » pour sa galerie, et
   « Nos actualités » qui est une page d'archive — une grille de cartes sur
   trois colonnes, qu'une colonne de lecture à 60ch écraserait. En production
   elles n'ont d'ailleurs pas de conteneur restreint. */
body.tec-page-croquis .tec-contenu,
body.tec-page-nos-actualites .tec-contenu {
	max-width: calc(var(--content-width) + 2 * var(--gutter));
}

/* --- Bouton de menu ------------------------------------------------------
   Le mot à côté de l'icône : une icône seule suppose connue une convention
   graphique et offre une cible plus petite. Le libellé agrandit la zone
   cliquable autant qu'il éclaire la fonction.
   ----------------------------------------------------------------------- */
/* ⚠️ Ne JAMAIS poser `display` ici : WordPress masque ce bouton au-delà de
   600 px avec une règle de spécificité plus faible, et un `display: flex` du
   thème la gagnait — le hamburger s'affichait alors aussi sur grand écran, en
   plus du menu horizontal. On ne règle que l'apparence ; la visibilité reste à
   WordPress.

   Sans fond ni bordure, le libellé et l'icône doivent porter seuls le
   contraste : blanc sur le bleu de l'en-tête (8,8:1) et sur le voile sombre du
   hero. */
.tec-hero .wp-block-navigation__responsive-container-open,
.tec-header .wp-block-navigation__responsive-container-open {
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs);
	color: var(--white);
	font-weight: 600;
	font-size: var(--text-s);
}

.tec-hero .wp-block-navigation__responsive-container-open:hover,
.tec-header .wp-block-navigation__responsive-container-open:hover,
.tec-hero .wp-block-navigation__responsive-container-open:focus-visible,
.tec-header .wp-block-navigation__responsive-container-open:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* --- Menu déployé --------------------------------------------------------
   Le fond et la couleur du texte sont posés par les attributs du bloc
   (`overlayBackgroundColor` / `overlayTextColor`) : c'est le mécanisme natif,
   et il passe devant les règles du thème — un fond blanc par défaut rendait le
   menu illisible, blanc sur blanc.

   Ici on ne règle que l'alignement et les tailles : entrées au fer à gauche,
   plus grandes, avec de l'air entre elles pour la précision du doigt.
   ----------------------------------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--space-l) var(--gutter);
	padding-block-start: calc(var(--space-l) + env(safe-area-inset-top, 0px));
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	/* La liste commence SOUS le bouton de fermeture, qui est positionné en
	   absolu : décalage du bouton + sa hauteur de cible + un intervalle. Calculé
	   plutôt qu'estimé — une valeur approchée faisait chevaucher la croix et la
	   première entrée. */
	padding-top: calc(var(--space-l) + 44px + var(--space-m) + env(safe-area-inset-top, 0px));
}

/* L'en-tête aligne la navigation à droite — c'est ce qu'on veut sur grand
   écran. Le menu déployé, lui, se lit au fer à gauche : la règle de disposition
   du bloc doit être annulée sur le conteneur ET sur chaque entrée, car elle
   porte à la fois sur l'alignement du conteneur et sur le texte. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open ul {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: var(--space-m);
	width: 100%;
	text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open li {
	width: 100%;
	text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding-block: var(--space-xs);
	color: var(--white);
	font-size: var(--text-l);
	text-align: left;
	text-decoration: none;
}

.wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* Le bouton de fermeture est positionné en absolu par WordPress, tout en haut
   à droite : sur un téléphone il se retrouvait collé au bord, à portée de la
   barre d'état. On le descend, et on tient compte des zones sûres de l'écran
   pour les appareils à encoche. Une cible d'au moins 44 px, comme le veut la
   règle sur les commandes tactiles. */
.wp-block-navigation__responsive-container-close {
	top: calc(var(--space-l) + env(safe-area-inset-top, 0px));
	right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
	min-width: 44px;
	min-height: 44px;
	padding: var(--space-xs);
	color: var(--white);
}

.wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

/* --- En-tête en petite largeur -------------------------------------------
   Le bloc de marque ne pouvait pas passer à la ligne et débordait de l'écran :
   le bouton de menu se retrouvait hors cadre, et toute la page héritait d'un
   défilement horizontal qui tronquait les textes. Logo et nom rétrécissent, et
   la marque peut se replier.
   ----------------------------------------------------------------------- */
@media (max-width: 769px) {
	.tec-hero__bar,
	.tec-header__inner {
		gap: var(--space-s);
	}

	.tec-hero__marque,
	.tec-header__marque {
		flex-wrap: wrap;
		min-width: 0;
		gap: var(--space-xs);
	}

	/* Le logo rétrécit un peu. Le nom, lui, GRANDIT : sur petit écran il doit
	   tenir le même rang que les titres de contenu, qui montent à --h1. */
	.tec-hero__logo img,
	.tec-header__logo img {
		width: 96px;
	}

	.tec-hero__titre,
	.tec-header__titre {
		font-size: var(--h1);
	}

	/* Quand la marque occupe toute la ligne, le bouton passe en dessous : on le
	   renvoie à droite pour qu'il reste là où l'œil le cherche. */
	.tec-hero__bar > .wp-block-navigation,
	.tec-header__inner > .wp-block-navigation {
		margin-inline-start: auto;
	}
}

/* --- Accessibilité transverse -------------------------------------------
   Deux garanties que le thème doit porter lui-même.
   ----------------------------------------------------------------------- */

/* Un contour de focus visible partout, y compris sur les fonds sombres : le
   double trait blanc puis sombre tient sur n'importe quel arrière-plan. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--white);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--primary-ultra-dark);
	border-radius: 2px;
}

/* Respect du réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Cibles tactiles d'au moins 24 px, comme le demande le critère « taille de
   cible minimale ». */
.wp-block-navigation .wp-block-navigation-item__content,
.tec-footer a,
.wp-block-social-link a {
	min-height: 24px;
}

/* Texte réservé aux technologies d'assistance : présent dans le document, hors
   de l'écran. `clip-path` plutôt que `display: none`, qui le retirerait aussi
   de l'arbre d'accessibilité. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

/* --- Zones sûres de l'écran ---------------------------------------------
   `viewport-fit=cover` laisse le contenu s'étendre sous l'encoche et sous la
   barre de gestes. Les bandeaux pleine largeur doivent donc écarter leurs
   contenus des bords physiques, sans quoi le logo passe sous l'encoche en
   paysage et la ligne de mentions sous la barre de gestes.
   ----------------------------------------------------------------------- */
.tec-hero,
.tec-header {
	padding-inline: calc(var(--gutter) + env(safe-area-inset-left, 0px))
	                calc(var(--gutter) + env(safe-area-inset-right, 0px));
	padding-block-start: calc(var(--space-m) + env(safe-area-inset-top, 0px));
}

.tec-footer {
	padding-inline: calc(var(--gutter) + env(safe-area-inset-left, 0px))
	                calc(var(--gutter) + env(safe-area-inset-right, 0px));
	padding-block-end: calc(var(--section-space-s) + env(safe-area-inset-bottom, 0px));
}