/*
Theme Name: ChaussureFit
Theme URI: https://chaussurefit.fr/
Author: Loïc Martin
Author URI:
Description: Thème Full Site Editing de ChaussureFit, repris à l'identique du site Elementor (design system dans theme-settings.json / theme-styles.json, fiches produit par le bloc « chaussurefit/produit »). Construit sur la base FSE Éclaireur Web 1.5.0.
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chaussurefit
*/

/* =========================================================================
   CSS global du thème.
   La majorité des styles vient du design system (theme-*.json).
   Ici on ne met que le CSS qui n'est pas gérable par le JSON.
   Rappel : le CSS spécifique à un bloc va dans assets/css/core-<bloc>.css

   ⚠️ Une partie de ce fichier REPREND le « CSS additionnel » du site Elementor
   (Personnaliser → CSS additionnel, rattaché à l'ancien thème enfant, donc perdu
   au changement de thème). Source : docs/audit-elementor/css-additionnel-theme-enfant.css.
   Les noms de classes du contenu (bk-blue-title, bk-underline-blue, underline-link…)
   sont CONSERVÉS tels quels : le contenu converti les porte déjà.
   ========================================================================= */

/* Boîte « bordure incluse » partout, comme le thème Hello du site d'origine : une
   marge interne ne doit pas élargir un bloc au-delà de sa colonne (les vignettes
   « Découvrir d'autres articles » débordaient de 10 px de chaque côté). */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Reset du thème Hello (reset.css), celui de tout le site d'origine.
   Marges : là où aucune disposition de blocs ne les fixe (contenu d'un bloc Média et texte,
   champs riches des fiches produit, commentaires…), sans quoi ces paragraphes prenaient les
   16 px du navigateur dessus et dessous. Spécificité nulle : les dispositions (flux, flex)
   et les règles ciblées passent devant. */
:where(p) {
	margin-block: 0 0.9rem;
}

:where(h1, h2, h3, h4, h5, h6) {
	margin-block: 0.5rem 1rem;
}

:where(ul, ol, dl) {
	margin-block: 0;
}

:where(button, input, optgroup, select, textarea) {
	margin: 0;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

/* Tableaux : règles du reset de Hello, recopiées AVEC leurs sélecteurs d'origine. Leur
   spécificité décide face au bloc Tableau du cœur et à TablePress, comme en ligne : le cœur
   garde ses filets et marges internes (.wp-block-table td), Hello impose texte à 0,9 em,
   interligne 1,5, lignes impaires grisées et filet d'en-tête (sélecteurs plus précis). */
table {
	width: 100%;
	margin-block-end: 15px;
	border-collapse: collapse;
	border-spacing: 0;
	background-color: transparent;
	font-size: 0.9em;
}

table td,
table th {
	padding: 15px;
	border: 1px solid hsl(0deg 0% 50% / 50.2%);
	line-height: 1.5;
	vertical-align: top;
}

table th {
	font-weight: 700;
}

table tfoot th,
table thead th {
	font-size: 1em;
}

table caption + thead tr:first-child td,
table caption + thead tr:first-child th,
table colgroup + thead tr:first-child td,
table colgroup + thead tr:first-child th,
table thead:first-child tr:first-child td,
table thead:first-child tr:first-child th {
	border-block-start: 1px solid hsl(0deg 0% 50% / 50.2%);
}

table tbody > tr:nth-child(odd) > td,
table tbody > tr:nth-child(odd) > th {
	background-color: hsl(0deg 0% 50% / 7.1%);
}

table tbody tr:hover > td,
table tbody tr:hover > th {
	background-color: hsl(0deg 0% 50% / 10.2%);
}

table tbody + tbody {
	border-block-start: 2px solid hsl(0deg 0% 50% / 50.2%);
}

table table td,
table table th {
	padding: 7px;
	line-height: 1.3;
}

table table th {
	font-weight: 400;
}

/* Coller les sections principales entre elles (le blockGap gère les enfants,
   pas les sections face à face) — en-tête, contenu et pied de page compris :
   l'écart de 20 px de la racine s'ajoutait aux 30 px d'origine du pied. */
.wp-site-blocks > *,
.entry-content > .wp-block-group {
	margin-block-start: 0;
}

/* =========================================================================
   Accessibilité — focus visible sur tous les éléments interactifs.
   ========================================================================= */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Ancres : le menu reste collé en haut sur bureau, la cible ne doit pas
   passer dessous (reprise du réglage « menu anchor » d'Elementor). */
html {
	scroll-padding-top: 44px;
}

.ancre {
	scroll-margin-top: 1em;
}

/* Un lien sans adresse ne s'affiche pas (règle du site d'origine) : un bouton
   de boutique dont le lien n'est pas renseigné disparaît au lieu de mener nulle part. */
a:not([href]) {
	display: none !important;
}

/* =========================================================================
   Titres « bandeau » et « surligné » — formats de texte du thème
   (Bandeau / Surligné dans la barre d'outils de l'éditeur).
   ========================================================================= */
.bk-blue-title {
	padding: 5px 10px;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	width: fit-content;
}

/* Titre à deux bandeaux ou plus (lignes séparées par un retour) : à l'interligne 1 des titres,
   chaque bandeau (hauteur du texte 1,2 em + 5 px de chaque côté) recouvrait le bas de la ligne
   du dessus — défaut du site d'origine, corrigé (écart volontaire, journal du 19/09). Interligne
   des bandeaux = leur hauteur moins 2 px : ils se touchent (sans filet blanc entre eux, arrondis
   compris, dans leur marge intérieure de 5 px) sans recouvrir de texte. */
:is(h1, h2, h3, h4, h5, h6, p):has(> .bk-blue-title ~ .bk-blue-title) > .bk-blue-title {
	line-height: calc(1.2em + 8px);
}

/* Même défaut, généralisé à la demande de Loïc (22/09) : un bandeau suivi d'une accroche
   (« Nike Metcon 9 » + « La chaussure préférée… ») ou un bandeau qui passe à la ligne
   (« Variations chaussures CrossFit : / Femmes et Hommes ») recouvrait la ligne voisine de 11 px
   — mesuré à l'identique sur le site d'origine. Le bandeau reçoit l'interligne de sa hauteur
   (ses lignes se touchent, comme deux bandeaux empilés) et le reste du titre un interligne
   normal de 1,2 : l'accroche ne colle plus au bandeau. */
/* `!important` : le titre converti porte l'interligne du widget Elementor en style en ligne
   (`style="line-height:1"`), qu'une règle de feuille ne surpasse pas autrement. */
:is(h1, h2, h3, h4, h5, h6, p):has(> .bk-blue-title) {
	line-height: 1.2 !important;
}

:is(h1, h2, h3, h4, h5, h6, p):has(> .bk-blue-title) > .bk-blue-title {
	line-height: calc(1.2em + 8px);
}

/* Le bandeau est un élément EN LIGNE : sa marge intérieure de 10 px s'ajoute à chaque fragment de
   ligne, et `width: fit-content` n'a aucun effet sur lui. Sur un titre long affiché pleine largeur,
   la dernière ligne dépassait donc l'écran de 2 px et faisait défiler la page latéralement sur
   téléphone (mesuré le 24/09 à 390 px : « Variations chaussures CrossFit : Hommes et Femmes »).
   On réserve la place du bandeau DANS la ligne plutôt que de la lui ajouter après. */
:is(h1, h2, h3, h4, h5, h6, p):has(> .bk-blue-title) {
	padding-inline-end: 10px;
}

/* Surligné : un trait épais SOUS le texte, pas un fond derrière. Hérité d'Elementor, le dégradé
   couvrait 40 % de la hauteur de la ligne, soit le bas des lettres elles-mêmes : la lecture en
   pâtissait (retour de Loïc, 24/09). La bande est désormais mesurée en `em` depuis le bas — elle
   suit la taille du titre — et n'occupe que la zone des jambages, sous la ligne de base. */
.bk-underline-blue {
	padding: 0 10px 4px;
	color: var(--wp--preset--color--contrast);
	background: linear-gradient(to top, var(--wp--custom--color--surligne) 0.34em, transparent 0.34em);
}

/* =========================================================================
   Typographies du kit Elementor — hauteurs de ligne.
   Un titre Elementor (widget « Titre ») a l'interligne 1 ; le convertisseur
   l'écrit sur chaque titre repris. La taille « Géant » n'existe que pour
   ces titres : interligne 1 par défaut.
   ⚠️ Les pages en ligne servies par WP Rocket montrent 1,5 : leur CSS allégé
   date d'un ancien kit (variable d'interligne supprimée depuis). Le rendu de
   référence est le rendu brut (`?rendu=brut`), celui de l'éditeur Elementor.
   ========================================================================= */
.has-xxxl-font-size {
	line-height: 1;
}

/* Tailles par palier, comme les typographies globales du kit Elementor :
   bureau ≥ 1 025 px, tablette 768–1 024 px, mobile < 768 px. Pas de typographie
   fluide (theme-settings.json) : entre deux paliers, elle s'écartait de 1 à 3 px
   des tailles d'origine. Les slugs ne changent pas, seules leurs valeurs. */
@media (width < 1025px) {
	:root {
		--wp--preset--font-size--xl: 1.375rem;   /* 22 px */
		--wp--preset--font-size--xxl: 1.8125rem; /* 29 px */
		--wp--preset--font-size--xxxl: 2.25rem;  /* 36 px */
	}
}

@media (width < 768px) {
	:root {
		--wp--preset--font-size--l: 1.125rem;    /* 18 px */
		--wp--preset--font-size--xl: 1.25rem;    /* 20 px */
		--wp--preset--font-size--xxl: 1.625rem;  /* 26 px */
		--wp--preset--font-size--xxxl: 2rem;     /* 32 px */
	}
}

/* =========================================================================
   Contenu des articles (modèle « Article » d'origine) : marges du thème Hello,
   H2 en bandeau, liens gras soulignés rose sombre. Porté par la classe
   `contenu-article` du bloc Contenu (templates/singular.html : articles, pages
   sans Elementor, fiches chaussure). Mesures à 1 280 px et 375 px,
   docs/01-design-system.md.
   Le bloc Contenu y est en disposition « flux », pas « contrainte » : une mise
   en page contrainte centre chaque enfant (marges auto), donc aussi le bandeau
   H2 en largeur ajustée, qui était aligné à gauche.
   ========================================================================= */
/* ⚠️ Préfixe à deux classes : le cœur retire la marge basse du dernier enfant d'une
   disposition « flux » (`:root :where(.is-layout-flow) > :last-child`, 0,2,0) ; le
   widget d'origine la gardait, et `flow-root` la garde dans le bloc au lieu de la
   laisser se fondre dans l'écart suivant (15 px de moins avant « Découvrir… »). */
.wp-block-post-content.contenu-article {
	display: flow-root;
}

/* Marges du thème Hello par élément (la disposition « flux » les remplace toutes par
   son écart) : paragraphes 0 / 0,9 rem, blocs <div> (Média et texte, groupes, fiches
   produit) aucune — le Média et texte gardait sinon 14 px de trop avant le titre suivant. */
.wp-block-post-content.contenu-article > * {
	margin-block: 0;
}

.wp-block-post-content.contenu-article > p {
	margin-block: 0 0.9rem;
}

/* Listes sans marge (reset du thème Hello) : le paragraphe qui précède porte l'écart. */
.wp-block-post-content.contenu-article > :is(ul, ol) {
	margin-block: 0;
}

.wp-block-post-content.contenu-article > :is(h1, h2, h3, h4, h5, h6) {
	margin-block: 0.5rem 1rem;
	line-height: var(--wp--custom--line-height--tight);
}

.wp-block-post-content.contenu-article > :is(.wp-block-image, figure) {
	margin-block: 0 1em;
}

.wp-block-post-content.contenu-article h2 {
	margin-block: 40px 20px;
	padding: 5px 10px;
	width: fit-content;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Légendes : 16 px italique #333 (theme-styles.json), 8 px au-dessus, 16 px dessous. */
.contenu-article figcaption {
	margin-block: 8px 16px;
}

/* Boutons de la boîte d'article (bloc Fiche produit, ex-code court [chaussure]) exclus :
   le thème enfant d'origine les soustrayait à cette règle par des !important. */
/* Colonnes de texte des pages converties (`texte-riche`) : un lien sans la classe `underline-link`
   prenait la couleur de lien du thème — bleu nuit, sans soulignement, sur un texte noir — et
   devenait invisible (« chaussures Reebok » sur la page meilleures, retour de Loïc du 26/09 ;
   31 liens dans ce cas). Tout lien de texte courant a désormais l'allure d'un lien. */
.contenu-article a:not(.wp-block-button__link, .bouton-femme, .bouton-homme),
.underline-link a,
.texte-riche:not(.underline-white-link) a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--tertiary);
	font-weight: var(--wp--custom--font-weight--bold);
	text-decoration: underline;
}

.underline-white-link a {
	color: var(--wp--preset--color--base);
	font-weight: var(--wp--custom--font-weight--bold);
	text-decoration: underline;
}

/* Survol des liens de texte (22/09, demande de Loïc — absent du site d'origine) : le texte passe
   au bleu nuit, le soulignement garde la couleur du lien et s'épaissit. Deux tons : on voit que
   le lien réagit sans perdre son identité. */
.contenu-article a:not(.wp-block-button__link, .bouton-femme, .bouton-homme),
.underline-link a,
.texte-riche:not(.underline-white-link) a:not(.wp-block-button__link),
.underline-white-link a {
	transition: color 0.15s linear;
}

.contenu-article a:not(.wp-block-button__link, .bouton-femme, .bouton-homme):is(:hover, :focus-visible),
.underline-link a:is(:hover, :focus-visible),
.texte-riche:not(.underline-white-link) a:not(.wp-block-button__link):is(:hover, :focus-visible) {
	color: var(--wp--preset--color--contrast);
	text-decoration-color: var(--wp--preset--color--tertiary);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

/* Sur un fond bleu nuit (`has-contrast-background-color` : conclusions des pages hommes / femmes),
   le survol ci-dessus rendait le lien de la couleur du fond, donc invisible (retour de Loïc du
   29/09). Le texte passe au blanc ; le soulignement rose épaissi reste le signal du survol. */
.has-contrast-background-color :is(.texte-riche:not(.underline-white-link), .underline-link) a:not(.wp-block-button__link):is(:hover, :focus-visible) {
	color: var(--wp--preset--color--base);
}

/* Encadré sombre DANS un article (« modèles remplacés » des comparatifs, 29/09) : la règle des liens
   d'article, plus spécifique, les repeignait en rose sur fond bleu. Ils restent blancs, au repos
   comme au survol. */
.contenu-article .underline-white-link a:not(.wp-block-button__link),
.contenu-article .underline-white-link a:not(.wp-block-button__link):is(:hover, :focus-visible) {
	color: var(--wp--preset--color--base);
}

/* Liens blancs sur fond sombre : le soulignement passe au rose clair. */
.underline-white-link a:is(:hover, :focus-visible) {
	text-decoration-color: var(--wp--preset--color--secondary);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.contenu-article a,
	.underline-link a,
	.underline-white-link a {
		transition: none;
	}
}

.remove-indent-list ul,
ul.remove-indent-list {
	padding-left: 15px;
}

/* =========================================================================
   Boutons — l'effet « enfoncé » : au survol, le bouton glisse sur son ombre
   décalée (5 px, 4 px), l'ombre s'efface (theme-styles.json).
   ========================================================================= */
.wp-element-button,
.wp-block-button__link,
.wpcf7-submit {
	transition: var(--wp--custom--bouton--transition);
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.wpcf7-submit:hover {
	transform: var(--wp--custom--bouton--enfoncement);
}

/* =========================================================================
   Titre du site — texte en dégradé (en-tête), chevauché par le logo.
   ========================================================================= */
.titre-site,
.titre-site a {
	display: inline-block;
	background-image: linear-gradient(to right, var(--wp--custom--color--titre-site-debut), var(--wp--custom--color--titre-site-debut), var(--wp--custom--color--titre-site-fin), var(--wp--custom--color--titre-site-fin));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-decoration: none;
}

.titre-site {
	padding: 0 14px;
}

/* La marge verticale appartient au LIEN, pas au paragraphe : sinon le nom du site n'offre que
   20 px de haut à cliquer sur téléphone, alors que son paragraphe en occupe 48 (mesuré le 24/09).
   Rien ne bouge à l'écran — la marge est la même, elle est juste cliquable. */
.titre-site a {
	padding: 14px 0;
}

/* =========================================================================
   En-tête (Theme Builder #93) — mesuré : 190 px sur bureau, logo 80 × 109,
   titre chevauchant le logo de 40 px, barre de menu de 46 px à 144 px.
   Sur bureau, seule la barre de menu reste collée en haut (l'en-tête colle
   avec un décalage négatif de 144 px) ; sur mobile, tout l'en-tête colle.
   ========================================================================= */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: -144px;
	z-index: 50;
}

.entete {
	align-items: center;
}

.entete__marque {
	flex-basis: auto;
}

/* ⚠️ Sélecteurs à deux classes : la mise en page flex du cœur remet à zéro les
   marges des enfants (`body .is-layout-flex > *`), ce qui annulait le chevauchement. */
.entete .entete__logo {
	position: relative;
	z-index: 1;
	margin: 0 -40px 25px 0;
}

.entete .titre-site {
	position: relative;
	z-index: 10;
	margin: 0;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 24px;
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: 1;
}

.entete > .entete__menu {
	flex-basis: 100%;
}

/* Tablette (mesuré à 900 px) : 178 px — écart de 10 px entre les rangées, barre
   de menu de 56 px (5 px au-dessus et au-dessous) à 122 px, seule collée. */
@media (768px <= width < 1025px) {
	.wp-site-blocks > header.wp-block-template-part {
		top: -122px;
	}

	.wp-block-group.entete {
		gap: 10px;
	}

	.entete .entete__logo {
		margin: 0 -40px 20px 0;
	}

	.entete__logo img {
		inline-size: 60px;
		block-size: auto;
	}

	.entete .titre-site {
		font-size: 22px;
	}

	/* `>` : le bloc Navigation recopie sa classe sur sa liste intérieure. */
	.entete > .entete__menu {
		padding-block: 5px;
	}
}

@media (width < 768px) {
	.wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}

	.wp-block-group.entete {
		flex-wrap: nowrap;
		justify-content: space-around;
		gap: 10px;
	}

	.entete .entete__logo {
		margin: 0 -30px 15px 0;
	}

	.entete__logo img {
		inline-size: 50px;
		block-size: auto;
	}

	.entete .titre-site {
		font-size: 20px;
	}

	.entete > .entete__menu {
		flex-basis: auto;
	}
}

/* =========================================================================
   Pieds de page (Theme Builder #368 général, #98 accueil).
   ========================================================================= */
.pied__barre {
	align-items: center;
}

.pied__mention {
	margin: 0;
	line-height: 1;
}

.pied--accueil .newsletter {
	max-inline-size: 400px;
	margin-inline: auto !important;
}

/* Interligne 1 : un widget Titre d'Elementor (mesuré sur le rendu brut ; le CSS allégé de
   WP Rocket, figé sur un ancien kit, montrait 1,5). */
.newsletter__titre {
	margin: 0 0 15px;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: 1;
}

@media (width < 768px) {
	.pied__barre {
		justify-content: center;
	}
}

/* =========================================================================
   Vignettes d'articles (« Découvrir d'autres articles », 404) : portrait 2:3,
   fond gris clair pendant le chargement, comme le widget d'origine.
   ========================================================================= */
.vignette-article {
	margin-block: 0;
	background-color: var(--wp--custom--color--fond-vignette);
	transition: var(--wp--custom--bouton--transition);
}

/* Survol (ou lien atteint au clavier) : la couverture se soulève et laisse l'ombre décalée
   des boutons du site à sa place — le geste inverse de l'enfoncement des boutons, même durée.
   Ajout validé par Loïc le 19/09 (absent du site d'origine). */
.vignette-article:is(:hover, :has(a:focus-visible)) {
	transform: translate(-4px, -5px);
	box-shadow: 4px 5px 0 0 rgb(2 79 245 / 30%);
}

/* Marges latérales de 10 px du widget d'origine. En CSS : la Boucle de requête
   n'a pas de réglage d'espacement (l'éditeur retirerait un style écrit dans le
   balisage à la première sauvegarde). */
.articles-lies__liste {
	padding-inline: 10px;
}

/* =========================================================================
   Articles et guides : sommaire et encadré auteur (22/09, demande de Loïc).
   Articles (templates/single.html) — sur ordinateur (> 1 024 px), le texte
   garde ses 800 px et une colonne de 300 px se colle sous la barre de menu ;
   sur tablette et mobile, sommaire repliable en tête et encadré auteur en fin
   (visibilité par écran native de WordPress 7.1, réglée dans le modèle).
   Guides (templates/modele-guide.html) — pleine largeur : sommaire repliable en
   tête, encadré auteur en fin.
   ========================================================================= */
@media (width > 1024px) {
	.article__grille {
		display: grid;
		grid-template-columns: minmax(0, 800px) 300px;
		gap: 40px;
		justify-content: space-between;
		align-items: start;
	}

	/* La colonne occupe toute la hauteur de l'article : l'encadré auteur, en tête, défile avec la
	   page ; le sommaire, dessous, se colle sous la barre de menu (46 px + 24 px). Toute la colonne
	   collante coupait le bas de l'encadré sur un écran de 800 px de haut (mesuré). Un sommaire
	   plus haut que l'écran défile de lui-même. */
	.article__cote {
		align-self: stretch;
	}

	.article__cote .sommaire {
		position: sticky;
		top: 70px;
		max-block-size: calc(100vh - 90px);
		overflow-y: auto;
		scrollbar-width: thin;
	}
}

/* Un titre atteint par le sommaire s'arrête sous le menu collant (46 px sur ordinateur, tout
   l'en-tête de 93 px sur mobile) : mêmes valeurs que le seuil de blocks/sommaire/vue.js. */
.contenu-article :is(h2, h3),
.page-guide :is(h2, h3) {
	scroll-margin-top: 120px;
}

@media (width > 1024px) {
	.contenu-article :is(h2, h3),
	.page-guide :is(h2, h3) {
		scroll-margin-top: 80px;
	}
}

.encadre-auteur__surtitre {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--primary);
	font-size: 13px;
	font-weight: var(--wp--custom--font-weight--semibold);
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.encadre-auteur__nom {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--primary);
	font-size: 20px;
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: 1.2;
}

.encadre-auteur__bio,
.encadre-auteur__lien {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

.encadre-auteur__lien a {
	color: var(--wp--preset--color--tertiary);
	font-weight: var(--wp--custom--font-weight--bold);
	text-decoration: underline;
	transition: color 0.15s linear;
}

.encadre-auteur__lien a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--contrast);
	text-decoration-color: var(--wp--preset--color--tertiary);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

.encadre-auteur__logo img {
	block-size: auto;
}

/* Guide : l'encadré garde la largeur de lecture des articles. */
.page-guide__auteur .encadre-auteur {
	max-inline-size: 800px;
	margin-inline: auto;
}

/* Section « Découvrir d'autres articles » : sur tablette et mobile, le conteneur
   d'origine prenait 100 px au-dessus et 50 px en dessous (vignettes : liste-vignettes). */
@media (width < 1025px) {
	.articles-lies {
		padding: 100px 10px 50px;
	}
}

/* Espace de 20 px sous la vignette : réglage par défaut du widget Publications (vignette au-dessus
   du titre), même quand le titre est masqué. Le thème enfant d'origine l'annulait par `list-article`
   — classe conservée à la conversion, elle distingue les listes de l'accueil et des articles liés
   (sans espace) de celles du blog (avec). */
.liste-vignettes .wp-block-post-template > li {
	margin-block-end: 20px;
}

.liste-vignettes.list-article .wp-block-post-template > li,
.articles-lies__liste .wp-block-post-template > li {
	margin-block-end: 0;
}

/* Listes de vignettes (widget Publications d'Elementor, image seule) : 3 par ligne, 2 sur
   tablette, 1 sur mobile — classe `liste-vignettes` de la Boucle de requête (articles liés,
   accueil). Sur mobile, la couverture reste entière (2:3), à 70 % de la largeur et centrée, comme
   sur la page 404 : le bandeau 2:1 d'origine coupait le titre des couvertures (amélioration
   validée par Loïc le 19/09, écart volontaire à l'étalon). */
@media (768px <= width < 1025px) {
	.liste-vignettes .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Page 404 : trois vignettes par ligne jusqu'à la tablette ; sur mobile, une par
   ligne, à 70 % de la largeur et centrée (réglages mobiles du widget d'origine). */
@media (width < 768px) {
	.page-404 .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.page-404 .vignette-article {
		inline-size: 70%;
		margin-inline: auto;
	}
}

@media (width < 768px) {
	.liste-vignettes .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.liste-vignettes .vignette-article {
		inline-size: 70%;
		margin-inline: auto;
	}
}

/* =========================================================================
   Archives et recherche (ancien archive.php du thème Hello) : un article par
   ligne — titre 32 px, image pleine largeur plafonnée à 500 px (recadrée),
   extrait. Mesuré à 1 280 px : titre, 16 px, image, 7 px (ligne de base sous
   l'image en ligne d'origine), extrait, 0,9 rem, article suivant.
   La fin « […] » de l'extrait d'origine : classes/class-archives.php.
   Titres à l'interligne 1,2 du thème Hello (réglage des modèles). ⚠️ Les pages
   de catégorie en ligne affichent 1,5 : leur CSS allégé par WP Rocket date d'une
   ancienne version du kit Elementor (variable d'interligne supprimée depuis) ;
   la recherche, non mise en cache, montre le rendu réel.
   ========================================================================= */
.archive-articles__titre {
	margin-block: 0 16px;
}

.archive-articles__liste .wp-block-post-template > li {
	margin-block: 0;
}

.archive-articles__liste .wp-block-post-title {
	margin-block: 0 16px;
}

.archive-articles__liste .wp-block-post-featured-image {
	margin-block: 0 7px;
}

.archive-articles__liste .wp-block-post-featured-image img {
	inline-size: 100%;
	max-block-size: 500px;
	object-fit: cover;
}

.archive-articles__liste .wp-block-post-excerpt {
	margin-block: 0 0.9rem;
}

.archive-articles__liste .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Colonne et hauteur d'image par palier, comme le thème Hello :
   1 140 px dès 1 200 px, 800 px dès 992, 600 px dès 768, 500 px dès 576, puis
   pleine largeur ; image plafonnée à 500, puis 400 (< 992 px), puis 300 (< 576 px). */
@media (width < 1200px) {
	.archive-articles > .alignwide {
		max-width: 800px;
	}
}

@media (width < 992px) {
	.archive-articles > .alignwide {
		max-width: 600px;
	}

	.archive-articles__liste .wp-block-post-featured-image img {
		max-block-size: 400px;
	}
}

@media (width < 768px) {
	.archive-articles > .alignwide {
		max-width: 500px;
	}
}

@media (width < 576px) {
	.archive-articles > .alignwide {
		max-width: none;
	}

	/* Hello : le titre de page prend 10 px de marge intérieure de chaque côté, en plus de
	   ceux de la colonne (mesuré : texte à 20 px du bord à 375 px). */
	.archive-articles__titre {
		padding-inline: 10px;
	}

	.archive-articles__liste .wp-block-post-featured-image img {
		max-block-size: 300px;
	}
}

/* =========================================================================
   Reprise Elementor — pages converties (bin/convertir-elementor.js).
   Ce que les blocs natifs n'expriment pas : les marges du texte du thème Hello, et
   les quelques réglages par palier sans équivalent natif (voir plus bas). Les
   autres sont des réglages par écran de WordPress 7.1, dans le contenu.
   `!important` seulement contre un style en ligne écrit par le bloc (marges).
   ========================================================================= */

/* Widget « Éditeur de texte » : paragraphes à 0,9 rem, listes sans marge, titres
   0,5 / 1 rem ; le dernier enfant garde sa marge, dans le bloc (widget = boîte). */
.wp-block-group.texte-riche {
	display: flow-root;
}

.wp-block-group.texte-riche > * {
	margin-block: 0 0.9rem;
}

.wp-block-group.texte-riche > :is(ul, ol, .texte-riche__ligne) {
	margin-block: 0;
}

/* Widget à marge basse saisie : la marge du dernier paragraphe s'y fondait. */
.wp-block-group.texte-riche--marge-fondue > :last-child {
	margin-block-end: 0;
}

.wp-block-group.texte-riche > :is(h1, h2, h3, h4, h5, h6) {
	margin-block: 0.5rem 1rem;
	line-height: var(--wp--custom--line-height--tight);
}

/* Un élément de conteneur Elementor peut rétrécir sous la largeur de son contenu
   (`min-width: 0`) : sans cela, une liste à longs mots élargit sa colonne. */
.page-convertie .is-layout-flex > * {
	min-inline-size: 0;
}

/* Alignement d'un élément dans sa rangée (« align-self » d'Elementor). */
.fse-aligne-haut { align-self: flex-start; }
.fse-aligne-centre { align-self: center; }
.fse-aligne-bas { align-self: flex-end; }
.fse-aligne-etire { align-self: stretch; }

/* Répartitions que la disposition flex du bloc Groupe ne propose pas. */
.wp-block-group.fse-repartition-autour {
	justify-content: space-around;
}

.wp-block-group.fse-repartition-egale {
	justify-content: space-evenly;
}

/* Widget Image : image centrée dans sa boîte, sauf alignement saisi. */
.wp-block-image.image-elementor {
	text-align: center;
}

.wp-block-image.image-elementor--gauche {
	text-align: left;
}

.wp-block-image.image-elementor--droite {
	text-align: right;
}

/* Image à la hauteur de sa rangée (hauteur 100 % d'Elementor), cadrage. */
.fse-image-hauteur-pleine {
	align-self: stretch;
}

.fse-image-hauteur-pleine img {
	block-size: 100%;
	object-fit: cover;
}

.fse-cadrage-center-left img {
	object-position: center left;
}

/* Largeur d'un élément dans une colonne (flex vertical) : `inline-size` — un `flex-basis`
   y fixerait la hauteur. Les paliers (fse-largeur-tablette-*) la remplacent plus bas. */
.is-vertical > .fse-largeur-30 { inline-size: 30%; }
.is-vertical > .fse-largeur-70 { inline-size: 70%; }

/* Icône SVG blanche (couleur « base » du widget Icône d'Elementor, qui colorait le dessin). */
.icone-reprise--blanche img {
	filter: brightness(0) invert(1);
}

/* Logos des marques (icônes liées) : légère mise en avant au survol ou au clavier. Ajout
   validé par Loïc le 19/09 (absent du site d'origine). */
.wp-block-image.icone-reprise img {
	transition: var(--wp--custom--bouton--transition);
}

.wp-block-image.icone-reprise a:is(:hover, :focus-visible) img {
	transform: scale(1.1);
}

/* Widget Icône : l'icône était une boîte en ligne posée sur la ligne de base de son
   conteneur (interligne 24 px) — 7 px de jambage sous une icône de 150 px (mesuré). Même
   mécanisme ici, au lieu du `vertical-align: bottom` des images du cœur. */
.wp-block-image.icone-reprise img {
	vertical-align: baseline;
}

/* Couverture sans hauteur minimale saisie : la hauteur de son contenu (le cœur impose
   430 px). Un palier peut en fixer une (réglage par écran natif). */
.wp-block-cover.fse-hauteur-contenu {
	min-height: 0;
}

/* Réglages par écran : ceux qui ont un équivalent natif (marges, écarts, répartition, retour à
   la ligne, largeurs dans une rangée, visibilité) sont écrits par le convertisseur en styles
   natifs de WordPress 7.1 (`style['@tablet']`, `style['@mobile']`, `metadata.blockVisibility` ;
   points de rupture de theme-settings.json : 767 / 1 024 px), modifiables dans l'éditeur. Restent
   ici ceux qui n'en ont pas : voile d'une couverture, largeur dans une colonne, ordre. La tablette
   d'Elementor valant aussi pour le mobile, ces règles-ci portent sur « < 1 025 px ». */
@media (width < 1025px) {
	/* Opacité du voile d'une couverture par palier (le cœur l'écrit en classe, 0,4,0). */
	.wp-block-cover.fse-voile-tablette-30 > .wp-block-cover__background { opacity: 0.3 !important; }

	/* Largeur de palier dans une colonne (flex vertical) : `inline-size` (un `flex-basis` y
	   fixerait la hauteur ; dans une rangée, c'est un réglage natif). */
	.is-vertical > .fse-largeur-tablette-100 { inline-size: 100%; }
	.is-vertical > .fse-largeur-tablette-80 { inline-size: 80%; }
	.is-vertical > .fse-largeur-tablette-65 { inline-size: 65%; }
	.is-vertical > .fse-largeur-tablette-30 { inline-size: 30%; }
	.is-vertical > .fse-largeur-tablette-40-10 { inline-size: calc(40% - 10px); }

	.fse-ordre-tablette-debut { order: -1; }
	.fse-ordre-tablette-1 { order: 1; }
	.fse-ordre-tablette-2 { order: 2; }
	.fse-ordre-tablette-fin { order: 99; }
}

@media (width < 768px) {
	.wp-block-cover.fse-voile-mobile-60 > .wp-block-cover__background { opacity: 0.6 !important; }

	.is-vertical > .fse-largeur-mobile-100 { inline-size: 100%; }

	.fse-ordre-mobile-debut { order: -1; }
	.fse-ordre-mobile-1 { order: 1; }
	.fse-ordre-mobile-2 { order: 2; }
	.fse-ordre-mobile-fin { order: 99; }
}

/* Retour à la ligne par écran d'une rangée qui ne passe pas à la ligne au bureau : WordPress 7.1
   n'écrit pas ce « wrap » ; classes/class-responsive.php pose ces classes au rendu. Mêmes plages
   que les réglages par écran du cœur. */
@media (767px < width <= 1024px) {
	.is-layout-flex.fse-retour-tablette { flex-wrap: wrap; }
}

@media (width <= 767px) {
	.is-layout-flex.fse-retour-mobile { flex-wrap: wrap; }
}

/* =========================================================================
   Tableaux TablePress (extension conservée). Ce que Hello ajoutait à leur habillage
   (0,9 em, interligne 1,5, filet d'en-tête) vient des règles de tableau du haut de fichier.
   ========================================================================= */
/* Conteneur DataTables : 1rem dessous (feuille de TablePress). Les dispositions de blocs
   annulent la marge de leurs enfants directs (flex : toutes ; flux : celle du bas) —
   sélecteur à deux classes pour passer devant `.is-layout-flex > :is(*, div)`. */
:is(.is-layout-flex, .is-layout-flow, .is-layout-constrained) > .dt-container {
	margin-block-end: 1rem;
}


/* =========================================================================
   FAQ (accordéon imbriqué d'Elementor → Accordéon natif, classe `faq`).
   Mesuré (rendu brut) : titre h3 Figtree 16 px / 1,2, semi-gras, marine ;
   entête 10 px, icône « plus » / « moins » de Font Awesome 5 à gauche (15 px,
   marine, bleu sombre une fois ouverte ou au survol), panneau à filet gris
   de 1 px et 10 px de marge interne, éléments collés.
   ========================================================================= */
.wp-block-accordion.faq {
	--faq-icone-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E");
	--faq-icone-moins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E");
}

.wp-block-accordion.faq > .wp-block-accordion-item {
	margin-block: 0;
}

.wp-block-accordion.faq .wp-block-accordion-heading {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 1rem;
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: 1.2;
}

.wp-block-accordion.faq .wp-block-accordion-heading__toggle {
	gap: 10px;
	padding: 10px;
}

.wp-block-accordion.faq .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

.wp-block-accordion.faq .wp-block-accordion-heading__toggle-icon {
	flex: none;
	inline-size: 13px;
	block-size: 15px;
	margin: 0;
	background-color: currentColor;
	color: var(--wp--preset--color--contrast);
	font-size: 0;
	-webkit-mask: var(--faq-icone-plus) center / contain no-repeat;
	mask: var(--faq-icone-plus) center / contain no-repeat;
}

/* « moins » une fois ouvert — sans la rotation de 45° que le cœur applique au « + ». */
.wp-block-accordion.faq .is-open .wp-block-accordion-heading__toggle-icon {
	-webkit-mask-image: var(--faq-icone-moins);
	mask-image: var(--faq-icone-moins);
	transform: none;
}

.wp-block-accordion.faq :is(.is-open, .wp-block-accordion-heading__toggle:hover) .wp-block-accordion-heading__toggle-icon {
	color: var(--wp--preset--color--accent);
}

/* Panneau collé à son titre : l'élément d'accordéon est un flux, dont l'écart
   par défaut (20 px) s'ajoutait au-dessus du panneau. */
.wp-block-accordion.faq .wp-block-accordion-panel {
	margin-block-start: 0;
	padding: 10px;
	border: 1px solid #d5d8dc;
	color: var(--wp--preset--color--contrast);
}

/* Galerie (Elementor Pro) : 2 colonnes sous 768 px — le cœur ne passe à 2 que
   sous 600 px. */
@media (width < 768px) {
	.wp-block-gallery.galerie-reprise.has-nested-images figure.wp-block-image:not(#individual-image) {
		inline-size: calc(50% - var(--wp--style--unstable-gallery-gap, 10px) / 2);
	}
}

/* =========================================================================
   Formes en biais (reprise des « shape dividers » tilt / opacity-tilt).
   Classes posées sur un Groupe :
     fse-biais-haut / fse-biais-bas          forme en haut / en bas
     fse-biais-fin                           hauteur 20 px (50 px par défaut)
     fse-biais-opacite                       variante à trois opacités (404)
     fse-biais-bleu / fse-biais-gris         couleur des formes (blanc par défaut)
     fse-biais-haut-gris, fse-biais-bas-bleu… couleur d'une seule forme (couleurs différentes)
     fse-biais-inverse                       forme retournée (« negative »)
   ========================================================================= */
.fse-biais-haut,
.fse-biais-bas {
	--fse-biais-couleur: var(--wp--preset--color--base);
	--fse-biais-hauteur: 50px;
	--fse-biais-forme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,6V0h1000v100L0,6z'/%3E%3C/svg%3E");
	position: relative;
}

.fse-biais-opacite {
	--fse-biais-forme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2600 131.1' preserveAspectRatio='none'%3E%3Cpath d='M0 0L2600 0 2600 69.1 0 0z'/%3E%3Cpath opacity='0.5' d='M0 0L2600 0 2600 69.1 0 69.1z'/%3E%3Cpath opacity='0.25' d='M2600 0L0 0 0 130.1 2600 69.1z'/%3E%3C/svg%3E");
}

.fse-biais-fin { --fse-biais-hauteur: 20px; }
.fse-biais-bleu { --fse-biais-couleur: var(--wp--preset--color--primary); }
.fse-biais-gris { --fse-biais-couleur: var(--wp--preset--color--neutral); }
.fse-biais-haut-bleu { --fse-biais-couleur-haut: var(--wp--preset--color--primary); }
.fse-biais-haut-gris { --fse-biais-couleur-haut: var(--wp--preset--color--neutral); }
.fse-biais-bas-bleu { --fse-biais-couleur-bas: var(--wp--preset--color--primary); }
.fse-biais-bas-gris { --fse-biais-couleur-bas: var(--wp--preset--color--neutral); }

.fse-biais-haut::before,
.fse-biais-bas::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	block-size: var(--fse-biais-hauteur);
	background-color: var(--fse-biais-couleur);
	-webkit-mask: var(--fse-biais-forme) center / 100% 100% no-repeat;
	mask: var(--fse-biais-forme) center / 100% 100% no-repeat;
	pointer-events: none;
}

.fse-biais-haut::before {
	inset-block-start: -1px;
	background-color: var(--fse-biais-couleur-haut, var(--fse-biais-couleur));
}

.fse-biais-bas::after {
	inset-block-end: -1px;
	background-color: var(--fse-biais-couleur-bas, var(--fse-biais-couleur));
	transform: rotate(180deg);
}

.fse-biais-inverse.fse-biais-haut::before { transform: rotate(180deg); }
.fse-biais-inverse.fse-biais-bas::after { transform: none; }

/* =========================================================================
   Pastille « retour en haut » (chevron fixe, en bas à droite).
   `href="#top"` suffit : le fragment « top » est géré nativement.
   ========================================================================= */
/* Mesuré en ligne : pastille blanche de 50 × 56 px (l'icône de 50 px et la ligne
   de base sous elle), coins de 10 px, à 20 px des bords. */
.fse-backtotop {
	position: fixed;
	inset-block-end: 20px;
	inset-inline-end: 20px;
	z-index: 20;
	display: block;
	inline-size: 50px;
	block-size: 56px;
	border-radius: 10px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: opacity 0.3s;
}

.fse-backtotop svg {
	display: block;
	inline-size: 50px;
	block-size: 50px;
	fill: currentColor;
}

/* Masqué en haut de page (effet « opacité au défilement » d'origine) : la classe
   est posée par assets/js/retour-haut.js. Sans script, le chevron reste visible —
   un thème de blocs ne pose pas de classe `no-js` sur laquelle s'appuyer. */
.fse-backtotop.est-cache {
	opacity: 0;
	pointer-events: none;
}

/* =========================================================================
   Commentaires — titres au style H3 du site.
   ========================================================================= */
.wp-block-comments-title,
.comment-reply-title {
	padding-bottom: 20px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: var(--wp--custom--font-weight--semibold);
}

/* =========================================================================
   Extensions conservées : FAQ de SEOPress, formulaires Contact Form 7.
   ========================================================================= */
/* Question : un <button>. Le kit Elementor habillait TOUS les <button> comme ses boutons
   (fond bleu, Barlow 18 px, filet de 2 px) ; les styles d'élément « bouton » du thème ne
   visent que les blocs Bouton : l'habillage est repris ici. Puis le CSS additionnel
   d'origine : sans ombre ni arrondi, 20 px dessous. */
.wpseopress-accordion-button {
	display: inline-block;
	margin-bottom: 20px;
	padding: 0.75rem 1.25rem 0.95rem;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 0 !important;
	background-color: var(--wp--preset--color--primary);
	box-shadow: none !important;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--tertiary);
	font-size: 1.125rem;
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: 1.5;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: all 0.3s;

	&:hover,
	&:focus {
		border-color: var(--wp--custom--color--primary-hover);
		background-color: var(--wp--custom--color--primary-hover);
	}
}

.wpseopress-faq-question {
	margin: 0;
	color: var(--wp--preset--color--base) !important;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 16px !important;
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: 1.2;
	text-align: start;
	white-space: normal;
}

/* ---- Contact Form 7 (lettre d'information, page Contact) ----
   Champs et bouton tels que les rendaient le thème Hello et le kit Elementor :
   paragraphes à 0,9 rem, champs pleine largeur (8 × 16 px, filet gris foncé,
   interligne 1,5), bouton d'envoi au style des boutons du site — le bouton de
   CF7 est un `input`, que les styles d'élément « bouton » ne couvrent pas. */
.wpcf7 form p {
	margin-block: 0 0.9rem;
}

.wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], textarea, select) {
	inline-size: 100%;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--custom--color--bordure-champ);
	border-radius: 3px;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	transition: all 0.3s;
}

.wpcf7 input[type="checkbox"] {
	margin: 0;
}

.wpcf7 .wpcf7-submit {
	position: relative;
	padding: 0.75rem 1.25rem 0.95rem;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--s);
	background-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--decalee);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--tertiary);
	font-size: 1.125rem;
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: 1.5;
	cursor: pointer;
}

.wpcf7 .wpcf7-submit:hover {
	border-color: var(--wp--custom--color--primary-hover);
	background-color: var(--wp--custom--color--primary-hover);
	box-shadow: none;
}

/* Message de retour de Contact Form 7 (« votre message a bien été envoyé », erreurs de saisie).
   L'ancien thème enfant le masquait après un envoi réussi : le visiteur n'avait aucune confirmation.
   Rétabli le 23/09/2026 à la demande de Loïc, et habillé aux couleurs du thème. */
.wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	border: 2px solid var(--wp--preset--color--contrast);
	padding: 12px 16px;
	font-size: 15px;
	line-height: 21px;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #1f7a45;
	background-color: #eaf6ef;
	color: #14532d;
}

.wpcf7 form:is(.invalid, .unaccepted, .payment-required) .wpcf7-response-output {
	border-color: #b32d2e;
	background-color: #fdecec;
	color: #8a1f1f;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: #b32d2e;
	background-color: #fdecec;
	color: #8a1f1f;
}

/* ---- Formulaires des pages Contact et À propos ----
   Ils remplacent deux formulaires Elementor : Contact Form 7 apporte le fonctionnement, ces règles
   l'apparence d'origine, mesurée sur le rendu en ligne (champs de 40 px en 15/21, 10 px entre les
   champs, zone de texte de 96 px, bouton pleine largeur de 49 px). Classe posée par le code court
   (`html_class`), pour ne pas toucher au formulaire de la lettre d'information. */
.wpcf7 .formulaire-contact p {
	margin-block: 0 10px;
}

/* Ligne du bouton : `line-height: 0` pour que la ligne ne réserve plus la place des jambages, et
   indicateur d'envoi de Contact Form 7 (la roue) sorti du flux — sinon ils ajoutaient 31 px sous
   le bouton, absents du formulaire d'origine. */
.wpcf7 .formulaire-contact .formulaire__envoi {
	position: relative;
	margin-block-end: 0;
	line-height: 0;
}

.wpcf7 .formulaire-contact .wpcf7-spinner {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 50%;
}

.wpcf7 .formulaire-contact :is(input[type="text"], input[type="email"], textarea) {
	border-color: #69727d; /* filet des champs du kit Elementor (mesuré) */
	font-size: 15px;
	line-height: 21px;
}

.wpcf7 .formulaire-contact :is(input[type="text"], input[type="email"]) {
	block-size: 40px; /* hauteur du champ d'origine, à l'unité près */
}

/* `vertical-align: top` : posée sur la ligne de base, la zone de texte réserve sous elle la place
   des jambages (7 px mesurés) et décalait le bouton d'autant. */
.wpcf7 .formulaire-contact textarea {
	block-size: 96px;
	padding: 5px 14px;
	vertical-align: top;
}

.wpcf7 .formulaire-contact .wpcf7-submit {
	inline-size: 100%;
	padding: 12px 20px;
	line-height: 21px;
	vertical-align: top;
}

/* Lettre d'information (pied de page de l'accueil) — CSS additionnel d'origine. */
.form-newsletter input:not([type="submit"]) {
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background-color: transparent;
}

.form-newsletter input::placeholder {
	color: var(--wp--preset--color--contrast) !important;
}

.form-newsletter .wpcf7-list-item.last {
	margin-left: 0;
	font-size: 10px;
}

/* =========================================================================
   Mouvement réduit (réglage du système) : aucun déplacement au survol — les
   couleurs et les ombres gardent le repère visuel.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.wpcf7-submit:hover,
	.vignette-article:is(:hover, :has(a:focus-visible)),
	.wp-block-image.icone-reprise a:is(:hover, :focus-visible) img {
		transform: none;
	}
}