/*
Theme Name: Budo Club Cergy
Theme URI: https://budoclubcergy.com/
Author: Budo Club Cergy
Description: Thème de blocs (Full Site Editing) du Budo Club Cergy — Judo, Jiu-Jitsu, MMA, Karaté Kyokushinkaï, Taïso et Chanbara. En-tête, pied de page, gabarits, couleurs et typographies se modifient depuis Apparence > Éditeur, sans écrire une ligne de code.
Version: 5.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: budoclubcergy
Tags: block-templates, full-site-editing, sports, one-column, custom-colors, custom-menu, editor-style, block-patterns
*/

/* ==========================================================================
   Ce fichier ne contient QUE ce que theme.json et les réglages de blocs
   ne savent pas produire : décors en pseudo-éléments, textures, et
   quelques correctifs. Les couleurs, tailles, polices et espacements
   sont dans theme.json — ne les redéfinissez pas ici.

   Sommaire
   1.  Compatibilité avec l'ancien contenu
   2.  Réglages de base
   3.  Ceinture (séparateur signature)
   4.  En-tête
   5.  Navigation
   6.  Hero de la page d'accueil
   7.  Sur-titre « eyebrow »
   8.  Cartes : disciplines, valeurs, dojos, tarifs
   9.  Bandeaux : chiffres, appel à l'action, information
   10. Tableaux d'horaires
   11. Boutons
   12. Formulaire de contact
   13. Accessibilité
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Compatibilité avec l'ancien contenu
   --------------------------------------------------------------------------
   Le contenu des pages saisi avant la refonte utilise encore des classes
   du thème 4 et la couleur « vivid-red » de la palette d'usine de WordPress.
   Ce bloc les fait fonctionner à l'identique pendant la transition.

   À SUPPRIMER une fois les pages nettoyées (voir le guide de reprise) —
   MAIS DEUX EXCEPTIONS, à conserver dans tous les cas :
     • .lede         : utilisée par le hero d'accueil livré avec le thème
     • .dojo-address : utilisée par les compositions « carte dojo »,
                       « section dojos » et « horaires d'un dojo »
   Les supprimer dépouillerait de leur style des compositions neuves.
   -------------------------------------------------------------------------- */

/* L'ancien contenu pointe vers un rouge qui n'est pas celui du club (#cf2e2e).
   On le redirige vers le vrai rouge : les 22 blocs concernés se corrigent
   d'eux-mêmes, sans toucher au contenu. */
:root {
	--wp--preset--color--vivid-red: var(--wp--preset--color--bcc-rouge);
}
.has-vivid-red-color { color: var(--wp--preset--color--bcc-rouge) !important; }
.has-vivid-red-background-color { background-color: var(--wp--preset--color--bcc-rouge) !important; }

/* Anciennes classes de taille de titre, encore présentes dans les pages. */
.h-xl { font-size: var(--wp--preset--font-size--titre-xl); text-transform: uppercase; }
.h-lg { font-size: var(--wp--preset--font-size--titre-l); text-transform: uppercase; }
.h-md { font-size: var(--wp--preset--font-size--titre-m); text-transform: uppercase; }
.lede {
	font-size: var(--wp--preset--font-size--lede);
	color: var(--wp--preset--color--bcc-gris-texte);
	max-width: 640px;
}
/* Sur fond sombre, le chapô doit rester lisible.
   Corrige un défaut de contraste du thème 4 (3,94:1 sur fond noir). */
.has-bcc-noir-background-color .lede,
.bcc-hero .lede { color: var(--wp--preset--color--bcc-gris-clair); max-width: 640px; }

/* Adresse de dojo rendue par un bloc Paragraphe. */
.dojo-address {
	font-style: normal;
	color: var(--wp--preset--color--bcc-gris-texte);
	font-size: 14.5px;
	margin: 0 0 14px;
	display: block;
}


/* --------------------------------------------------------------------------
   2. Réglages de base
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

/* L'en-tête est collant : sans cette ligne, tout lien d'ancre amène la cible
   sous l'en-tête. Doit valoir la hauteur de l'en-tête + une marge. */
html { scroll-padding-top: 100px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

img { max-width: 100%; height: auto; }


/* --------------------------------------------------------------------------
   3. Ceinture — le séparateur signature du club
   --------------------------------------------------------------------------
   S'applique au bloc « Séparateur » via le style « Ceinture ».
   Dans l'éditeur : insérer un Séparateur, puis onglet Styles > Ceinture.
   -------------------------------------------------------------------------- */

/* Les deux :not() sont indispensables. Le CSS du cœur contient
   .wp-block-separator:not(.is-style-wide):not(.is-style-dots){width:100px}
   avec une spécificité de (0,3,0) : sans eux, la ceinture ferait 100 px de large. */
.wp-block-separator.is-style-bcc-ceinture:not(.is-style-wide):not(.is-style-dots),
.belt-divider {
	position: relative;
	width: 100%;
	height: 26px;
	border: 0;
	border-top: 3px solid var(--wp--preset--color--bcc-noir);
	border-bottom: 3px solid var(--wp--preset--color--bcc-noir);
	background-color: var(--wp--preset--color--bcc-blanc);
	background-image: repeating-linear-gradient(
		90deg,
		var(--wp--preset--color--bcc-noir) 0 10px,
		transparent 10px 20px
	);
	background-size: 20px 100%;
	background-position: 0 4px;
	background-repeat: repeat-x;
	opacity: 1;
	margin: 0;
	max-width: none;
}

.wp-block-separator.is-style-bcc-ceinture:not(.is-style-wide):not(.is-style-dots)::after,
.belt-divider::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	background: var(--wp--preset--color--bcc-rouge);
	border: 3px solid var(--wp--preset--color--bcc-noir);
	border-radius: 50%;
}


/* --------------------------------------------------------------------------
   4. En-tête
   -------------------------------------------------------------------------- */

/* Le collage en haut de page est géré ici, et non par le réglage « Position »
   du bloc : ce réglage n'est pas enregistré dans le markup mais appliqué au
   rendu par une classe générée, de même spécificité que .bcc-header. Les deux
   se contrediraient selon l'ordre des feuilles. Une seule source, donc.
   position: sticky suffit aussi à positionner la pastille ::after ci-dessous. */
.bcc-header {
	position: sticky;
	top: 0;
	border-bottom: 3px solid var(--wp--preset--color--bcc-rouge);
	z-index: 100;
}

/* La petite pastille rouge centrée sous la barre. */
.bcc-header::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	transform: translateX(-50%);
	width: 11px;
	height: 11px;
	background: var(--wp--preset--color--bcc-rouge);
	border: 2px solid var(--wp--preset--color--bcc-noir);
	border-radius: 50%;
	pointer-events: none;
}

.bcc-header .wp-block-site-logo img {
	height: 52px;
	width: auto;
	border-radius: 50%;
}


/* --------------------------------------------------------------------------
   5. Navigation
   --------------------------------------------------------------------------
   Le bloc Navigation gère nativement le bouton hamburger, le piège de focus,
   la touche Échap et l'attribut aria-current. Rien de tout cela n'est à
   réécrire : on ne fait qu'habiller.
   -------------------------------------------------------------------------- */

/* Soulignement de la page courante — enfin fonctionnel, le bloc Navigation
   posant aria-current, ce que l'ancien menu PHP ne faisait pas. */
.bcc-header .wp-block-navigation-item > a[aria-current="page"] {
	position: relative;
	color: var(--wp--preset--color--bcc-rouge);
}
.bcc-header .wp-block-navigation-item > a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 2px;
	background: var(--wp--preset--color--bcc-rouge);
}

/* Menu plein écran sur mobile : fond noir, liens espacés. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--bcc-noir) !important;
	color: var(--wp--preset--color--bcc-blanc) !important;
	padding: 24px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a {
	font-size: 19px;
	padding: 14px 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	display: block;
	width: 100%;
}


/* --------------------------------------------------------------------------
   6. Hero de la page d'accueil
   --------------------------------------------------------------------------
   La trame « tatami » et le cercle rouge ne sont pas reproductibles avec les
   réglages de Gutenberg : ils restent ici. Tout le reste (textes, boutons,
   chiffres) est éditable dans la page.
   -------------------------------------------------------------------------- */

.bcc-hero {
	position: relative;
	overflow: hidden;
	background-image:
		linear-gradient(180deg, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.92)),
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 34px),
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 34px),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 64px);
}

.bcc-hero::before {
	content: "";
	position: absolute;
	right: -120px;
	top: -120px;
	width: 480px;
	height: 480px;
	border: 90px solid var(--wp--preset--color--bcc-rouge);
	border-radius: 50%;
	opacity: 0.18;
	pointer-events: none;
}

.bcc-hero > * { position: relative; }

/* Le contenu du hero occupe 820 px et reste calé à gauche, comme dans la
   maquette d'origine. Sans cette règle, une mise en page « contenu centré »
   le centrerait dans les 1220 px. */
/* !important est nécessaire : la mise en page « contenu centré » du cœur pose
   margin-left/right: auto !important sur les enfants. Sans cela le hero serait
   centré dans les 1220 px au lieu d'être calé à gauche comme dans la maquette. */


/* Le filet rouge à gauche de chaque chiffre clé. */
.bcc-chiffre {
	border-left: 3px solid var(--wp--preset--color--bcc-rouge);
	padding-left: 14px;
}


/* --------------------------------------------------------------------------
   7. Sur-titre « eyebrow »
   --------------------------------------------------------------------------
   Style de bloc appliquable à un Paragraphe : onglet Styles > Sur-titre.
   -------------------------------------------------------------------------- */

.is-style-bcc-eyebrow,
.eyebrow {
	font-family: var(--wp--preset--font-family--accent);
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 14px;
	color: var(--wp--preset--color--bcc-rouge);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 0;
}

.is-style-bcc-eyebrow::before,
.eyebrow::before {
	content: "";
	width: 22px;
	height: 8px;
	display: inline-block;
	flex: none;
	border-radius: 1px;
	background-image: repeating-linear-gradient(
		135deg,
		var(--wp--preset--color--bcc-rouge) 0 4px,
		var(--wp--preset--color--bcc-noir) 4px 8px
	);
}

/* Sur fond noir, le galon doit rester visible. */
.has-bcc-noir-background-color .is-style-bcc-eyebrow::before,
.bcc-page-hero .eyebrow::before {
	background-image: repeating-linear-gradient(
		135deg,
		var(--wp--preset--color--bcc-rouge) 0 4px,
		var(--wp--preset--color--bcc-blanc) 4px 8px
	);
}


/* --------------------------------------------------------------------------
   8. Cartes
   --------------------------------------------------------------------------
   IMPORTANT : le nombre de colonnes n'est PAS défini ici. Il est piloté par
   le réglage « Grille > Auto > Largeur minimale de colonne » du bloc Groupe,
   qui se réorganise tout seul du grand écran au téléphone. Écrire
   grid-template-columns ici casserait ce comportement.
   -------------------------------------------------------------------------- */

/* Le fond noir qui transparaît entre les cartes et fait les filets. */
.bcc-grille-disciplines,
.practices { background-color: var(--wp--preset--color--bcc-noir); }

.bcc-grille-valeurs,
.values-grid { background-color: var(--wp--preset--color--bcc-gris-bordure); }

.bcc-grille-tarifs,
.pricing-grid { background-color: var(--wp--preset--color--bcc-gris-bordure); }

/* ---- Carte discipline ---- */
.bcc-carte-discipline,
.practice-card {
	position: relative;
	border-top: 4px solid transparent;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.bcc-carte-discipline::before,
.practice-card::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 30px;
	right: 30px;
	height: 1px;
	background-image: repeating-linear-gradient(90deg, rgba(10, 10, 10, 0.3) 0 6px, transparent 6px 12px);
}

.bcc-carte-discipline::after,
.practice-card::after {
	content: "";
	position: absolute;
	top: 40px;
	right: 30px;
	width: 22px;
	height: 8px;
	border-radius: 1px;
	opacity: 0.55;
	background-image: repeating-linear-gradient(
		135deg,
		var(--wp--preset--color--bcc-rouge) 0 4px,
		var(--wp--preset--color--bcc-noir) 4px 8px
	);
}

/* !important : WordPress génère .has-bcc-blanc-background-color{...!important}
   pour toute couleur de palette posée sur un bloc. Sans cela, seul le liseré
   rouge changerait au survol, pas le fond. */
.bcc-carte-discipline:hover,
.practice-card:hover {
	border-top-color: var(--wp--preset--color--bcc-rouge);
	background-color: var(--wp--preset--color--bcc-gris-fond) !important;
}

/* Le numéro d'ordre. Une règle plus générique du thème 4 l'écrasait :
   ici il retrouve le gris discret prévu à l'origine. */
.bcc-carte-discipline .bcc-num,
.practice-card .practice-card__num {
	font-family: var(--wp--preset--font-family--accent);
	color: var(--wp--preset--color--bcc-gris-texte);
	font-size: 15px;
	letter-spacing: 2px;
	display: block;
	margin-bottom: 14px;
}

/* ---- Carte valeur : la pastille de ceinture ---- */
.bcc-carte-valeur,
.value-item { position: relative; }

.bcc-carte-valeur::before,
.value-item::before {
	content: "";
	position: absolute;
	top: 26px;
	left: 26px;
	width: 44px;
	height: 12px;
	border-radius: 2px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
	background: var(--bcc-ceinture, var(--wp--preset--color--bcc-gris-bordure));
}

/* Repli pour l'ancien contenu, où la couleur dépendait de la position.
   Conservé pour que rien ne bouge avant le nettoyage des pages. */
.value-item:nth-child(1) { --bcc-ceinture: var(--wp--preset--color--bcc-ceinture-blanche); }
.value-item:nth-child(2) { --bcc-ceinture: var(--wp--preset--color--bcc-ceinture-jaune); }
.value-item:nth-child(3) { --bcc-ceinture: var(--wp--preset--color--bcc-ceinture-orange); }
.value-item:nth-child(4) { --bcc-ceinture: var(--wp--preset--color--bcc-ceinture-verte); }
.value-item:nth-child(5) { --bcc-ceinture: var(--wp--preset--color--bcc-ceinture-bleue); }
.value-item:nth-child(6) { --bcc-ceinture: var(--wp--preset--color--bcc-ceinture-marron); }
.value-item:nth-child(7) { --bcc-ceinture: var(--wp--preset--color--bcc-ceinture-noire); }
.value-item:nth-child(8) { --bcc-ceinture: var(--wp--preset--color--bcc-rouge); }

/* Choix explicite depuis l'onglet Styles du bloc. Écrit APRÈS le repli
   ci-dessus, donc il l'emporte : la couleur suit la valeur, plus la position.
   Ajouter, déplacer ou supprimer une valeur ne décale plus rien.
   Les 8 couleurs sont dans la palette de theme.json : elles se modifient
   depuis Apparence > Éditeur > Styles > Couleurs. */
.is-style-bcc-ceinture-blanche { --bcc-ceinture: var(--wp--preset--color--bcc-ceinture-blanche); }
.is-style-bcc-ceinture-jaune   { --bcc-ceinture: var(--wp--preset--color--bcc-ceinture-jaune); }
.is-style-bcc-ceinture-orange  { --bcc-ceinture: var(--wp--preset--color--bcc-ceinture-orange); }
.is-style-bcc-ceinture-verte   { --bcc-ceinture: var(--wp--preset--color--bcc-ceinture-verte); }
.is-style-bcc-ceinture-bleue   { --bcc-ceinture: var(--wp--preset--color--bcc-ceinture-bleue); }
.is-style-bcc-ceinture-marron  { --bcc-ceinture: var(--wp--preset--color--bcc-ceinture-marron); }
.is-style-bcc-ceinture-noire   { --bcc-ceinture: var(--wp--preset--color--bcc-ceinture-noire); }
.is-style-bcc-ceinture-rouge   { --bcc-ceinture: var(--wp--preset--color--bcc-rouge); }

/* ---- Carte dojo ---- */
.bcc-carte-dojo,
.dojo-card { border-left: 4px solid var(--wp--preset--color--bcc-rouge); }

/* ---- Carte tarif ---- */
.bcc-carte-tarif,
.price-card { position: relative; }

.bcc-carte-tarif .bcc-montant,
.price-card .price-card__amount {
	font-family: var(--wp--preset--font-family--titre);
	font-size: 40px;
	color: var(--wp--preset--color--bcc-rouge);
	margin: 10px 0;
	line-height: 1.05;
}
.bcc-carte-tarif .bcc-montant span,
.price-card .price-card__amount span {
	font-family: var(--wp--preset--font-family--texte);
	font-size: 14px;
	color: var(--wp--preset--color--bcc-gris-texte);
}

/* L'étiquette qui déborde en haut à gauche de la carte. */
.bcc-etiquette,
.price-card__tag {
	position: absolute;
	top: -13px;
	left: 24px;
	background: var(--wp--preset--color--bcc-rouge);
	color: var(--wp--preset--color--bcc-blanc);
	font-family: var(--wp--preset--font-family--accent);
	font-size: 12px;
	letter-spacing: 1.5px;
	padding: 4px 12px;
	text-transform: uppercase;
	margin: 0;
}


/* --------------------------------------------------------------------------
   9. Bandeaux
   -------------------------------------------------------------------------- */

/* Séparateurs verticaux entre les chiffres clés. */
.bcc-bandeau-chiffres .bcc-stat { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.bcc-bandeau-chiffres .bcc-stat:first-child { border-left: none; }

/* Ancien bandeau produit par le code court [bcc_stats]. */
.stats .stat { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.stats .stat:first-child { border-left: none; }

/* ---- Pied de page ----
   Les liens du site sont rouges et soulignés (theme.json). Sur le fond noir du
   pied de page, cela serait illisible : ils reprennent ici le gris clair de
   l'ancien thème, et passent au rouge au survol. */
.bcc-footer a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--bcc-gris-clair);
	text-decoration: none;
}
.bcc-footer a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--bcc-rouge);
	text-decoration: underline;
}

/* La liste des dojos est une liste d'adresses, pas une énumération à puces. */
.bcc-footer .wp-block-list { list-style: none; }

/* Le filet au-dessus de la ligne de mentions. La couleur est ici plutôt que
   dans le bloc : un rgba n'a pas sa place dans une partie de modèle. */
.bcc-footer-bas { border-top-color: rgba(255, 255, 255, 0.12); }

.info-band,
.bcc-encart {
	background: var(--wp--preset--color--bcc-gris-fond);
	border-left: 4px solid var(--wp--preset--color--bcc-rouge);
	padding: 26px 30px;
}


/* --------------------------------------------------------------------------
   10. Tableaux d'horaires
   --------------------------------------------------------------------------
   Style appliqué via le style de bloc « Horaires » du bloc Tableau.
   -------------------------------------------------------------------------- */

.wp-block-table.is-style-bcc-horaires table,
.wp-block-table.schedule-table table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table.is-style-bcc-horaires th,
.wp-block-table.schedule-table th {
	text-align: left;
	font-family: var(--wp--preset--font-family--accent);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	color: var(--wp--preset--color--bcc-blanc);
	background: var(--wp--preset--color--bcc-noir);
	padding: 12px 16px;
	border: 0;
}

.wp-block-table.is-style-bcc-horaires td,
.wp-block-table.schedule-table td {
	padding: 14px 16px;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--bcc-gris-bordure);
	font-size: 15.5px;
}

.wp-block-table.is-style-bcc-horaires tr:nth-child(even) td,
.wp-block-table.schedule-table tr:nth-child(even) td {
	background: var(--wp--preset--color--bcc-gris-fond);
}

.wp-block-table.is-style-bcc-horaires td:first-child,
.wp-block-table.schedule-table td:first-child { font-weight: 600; }

.wp-block-table.is-style-bcc-horaires td:last-child,
.wp-block-table.schedule-table td:last-child {
	color: var(--wp--preset--color--bcc-rouge);
	font-weight: 600;
	white-space: nowrap;
}

/* Sur téléphone le tableau défile horizontalement.
   tabindex et role sont posés par un petit script (voir functions.php) pour
   que cette zone soit atteignable au clavier : sans cela, la colonne
   « Horaires » est inaccessible, ce qui était le cas jusqu'ici. */
@media (max-width: 780px) {
	.wp-block-table.is-style-bcc-horaires,
	.wp-block-table.schedule-table {
		overflow-x: auto;
		display: block;
	}
	.wp-block-table.is-style-bcc-horaires table,
	.wp-block-table.schedule-table table { min-width: 520px; }
}

.wp-block-table[tabindex]:focus-visible {
	outline: 3px solid var(--wp--preset--color--bcc-rouge);
	outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   11. Boutons
   --------------------------------------------------------------------------
   Le bouton plein est réglé dans theme.json. Ici : la variante « contour »
   et le liseré pointillé qui apparaît au survol.
   -------------------------------------------------------------------------- */

.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border-width: 2px;
}

/* Contour clair, sur les fonds sombres et le bandeau rouge. */
.wp-block-button.is-style-bcc-contour-clair > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--bcc-blanc);
	border: 2px solid var(--wp--preset--color--bcc-blanc);
}
.wp-block-button.is-style-bcc-contour-clair > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--bcc-blanc);
	color: var(--wp--preset--color--bcc-noir);
	border-color: var(--wp--preset--color--bcc-blanc);
}

/* Contour foncé, sur les fonds clairs. */
.wp-block-button.is-style-bcc-contour-fonce > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--bcc-noir);
	border: 2px solid var(--wp--preset--color--bcc-noir);
}
.wp-block-button.is-style-bcc-contour-fonce > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--bcc-noir);
	color: var(--wp--preset--color--bcc-blanc);
}

.wp-block-button__link { transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); }


/* --------------------------------------------------------------------------
   12. Formulaire de contact
   --------------------------------------------------------------------------
   Aligne le formulaire Gutena Forms sur la charte. Les libellés, les champs
   et le message de confirmation se modifient dans l'éditeur de la page.
   -------------------------------------------------------------------------- */

.wp-block-gutena-forms {
	--wp--gutena-forms--input-focus-border-color: var(--wp--preset--color--bcc-rouge);
	--wp--gutena-forms--input-border-color: var(--wp--preset--color--bcc-gris-bordure);
}

.wp-block-gutena-forms .heading-input-label-gutena {
	font-family: var(--wp--preset--font-family--accent);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--bcc-encre);
}

.wp-block-gutena-forms .gutena-forms-field:focus {
	outline: 3px solid var(--wp--preset--color--bcc-rouge);
	outline-offset: 2px;
}

.wp-block-gutena-forms button,
.wp-block-gutena-forms input[type="submit"] {
	font-family: var(--wp--preset--font-family--accent);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 600;
	background: var(--wp--preset--color--bcc-rouge);
	color: var(--wp--preset--color--bcc-blanc);
	border: 2px solid var(--wp--preset--color--bcc-rouge);
	border-radius: 2px;
	padding: 14px 28px;
	cursor: pointer;
}
.wp-block-gutena-forms button:hover,
.wp-block-gutena-forms input[type="submit"]:hover {
	background: var(--wp--preset--color--bcc-rouge-fonce);
	border-color: var(--wp--preset--color--bcc-rouge-fonce);
}


/* --------------------------------------------------------------------------
   13. Accessibilité
   -------------------------------------------------------------------------- */

:focus-visible {
	outline: 3px solid var(--wp--preset--color--bcc-rouge);
	outline-offset: 2px;
}

/* Le lien d'évitement est généré par WordPress dans les thèmes de blocs.
   On ne fait que l'habiller pour qu'il soit visible une fois au clavier. */
.skip-link:focus {
	background-color: var(--wp--preset--color--bcc-blanc);
	color: var(--wp--preset--color--bcc-encre);
	font-family: var(--wp--preset--font-family--accent);
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 14px 22px;
	z-index: 1000;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}