/**
 * GuiTrans — styles du thème.
 *
 * Les couleurs, polices, espacements et ombres viennent tous de theme.json et
 * sont consommés ici sous forme de variables CSS. Aucune valeur de couleur ou
 * de police n'est écrite en dur : changer la charte se fait dans theme.json,
 * et ce fichier suit.
 *
 * Sommaire
 *   1. Réglages de base
 *   2. Boutons
 *   3. En-tête
 *   4. Héros
 *   5. Sections et titres
 *   6. Cartes et styles de blocs
 *   7. Coordonnées et compteurs
 *   8. Formulaires
 *   9. Pied de page
 *  10. Animations
 */

/* ============================================================ 1. Réglages */

:root {
	--gt-ring: 0 0 0 3px rgba( 63, 124, 191, 0.35 );
	--gt-radius: 6px;
}

html {
	scroll-behavior: smooth;
	/* L'en-tête collant recouvrirait la cible d'une ancre sans cette marge. */
	scroll-padding-top: calc( var( --wp--custom--header-height ) + 1.5rem );
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Une seule règle de focus, visible sur fond clair comme sur fond navy. */
:where( a, button, input, select, textarea, [tabindex] ):focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
	border-radius: 2px;
}

.gt-icon {
	flex: none;
	display: block;
}

/* Réservé aux lecteurs d'écran. */
.gt-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

/* ============================================================= 2. Boutons */

.gt-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 1rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var( --gt-radius );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var( --wp--custom--transition--base ),
		border-color var( --wp--custom--transition--base ),
		color var( --wp--custom--transition--base ),
		transform var( --wp--custom--transition--base );
}

.gt-btn:hover {
	transform: translateY( -1px );
	text-decoration: none;
}

.gt-btn--primary {
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

.gt-btn--primary:hover {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
}

.gt-btn--ghost {
	background: transparent;
	border-color: currentColor;
	color: var( --wp--preset--color--base );
}

.gt-btn--ghost:hover {
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--primary );
}

.gt-btn--signal {
	background: var( --wp--preset--color--signal );
	color: var( --wp--preset--color--contrast );
}

.gt-btn--signal:hover {
	background: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--base );
}

/* ============================================================= 3. En-tête */

.gt-topbar {
	background: var( --wp--preset--color--primary-dark );
	color: rgba( 255, 255, 255, 0.82 );
	font-size: var( --wp--preset--font-size--x-small );
}

.gt-topbar a {
	color: inherit;
	text-decoration: none;
}

.gt-topbar a:hover {
	color: var( --wp--preset--color--base );
	text-decoration: underline;
}

.gt-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var( --wp--preset--color--base );
	border-bottom: 1px solid var( --wp--preset--color--line );
	transition: box-shadow var( --wp--custom--transition--base );
}

.gt-header.is-scrolled {
	box-shadow: var( --wp--preset--shadow--card );
}

.gt-header .wp-block-site-logo img {
	height: auto;
	max-height: 46px;
	width: auto;
}

/* Navigation : soulignement qui se déploie depuis la gauche. */
.gt-header .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.5rem;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	color: var( --wp--preset--color--primary );
	text-decoration: none;
}

.gt-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var( --wp--preset--color--accent );
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform var( --wp--custom--transition--base );
}

.gt-header .wp-block-navigation-item__content:hover::after,
.gt-header .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX( 1 );
}

/* =============================================================== 4. Héros */

.gt-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.gt-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid rgba( 255, 255, 255, 0.28 );
	border-radius: 999px;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.92 );
}

/* Bande diagonale discrète, rappel du sillage du logo. */
.gt-hero::after {
	content: "";
	position: absolute;
	right: -12%;
	bottom: -40%;
	width: 55%;
	aspect-ratio: 1;
	background: radial-gradient( circle at 50% 50%, rgba( 63, 124, 191, 0.35 ), transparent 62% );
	z-index: -1;
	pointer-events: none;
}

/* ================================================ 5. Sections et titres */

.gt-eyebrow {
	display: block;
	margin-bottom: 0.75rem;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent );
}

/* Filet court sous les titres de section. */
.gt-underline > h2::after,
.gt-underline > h3::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 1rem;
	background: var( --wp--preset--color--accent );
	border-radius: 2px;
}

.gt-underline.has-text-align-center > h2::after,
.gt-underline.has-text-align-center > h3::after {
	margin-inline: auto;
}

/* ================================== 6. Cartes et styles de blocs */

.wp-block-group.is-style-guitrans-card {
	position: relative;
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gt-radius );
	box-shadow: var( --wp--preset--shadow--card );
	transition: box-shadow var( --wp--custom--transition--base ),
		transform var( --wp--custom--transition--base ),
		border-color var( --wp--custom--transition--base );
}

.wp-block-group.is-style-guitrans-card:hover {
	transform: translateY( -4px );
	border-color: var( --wp--preset--color--accent );
	box-shadow: var( --wp--preset--shadow--lift );
}

/* Liseré qui se remplit au survol, sur le bord supérieur. */
.wp-block-group.is-style-guitrans-card::before {
	content: "";
	position: absolute;
	inset-inline: -1px;
	top: -1px;
	height: 3px;
	background: var( --wp--preset--color--accent );
	border-radius: var( --gt-radius ) var( --gt-radius ) 0 0;
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform var( --wp--custom--transition--base );
}

.wp-block-group.is-style-guitrans-card:hover::before {
	transform: scaleX( 1 );
}

.wp-block-group.is-style-guitrans-panel {
	background: var( --wp--preset--color--primary );
	color: rgba( 255, 255, 255, 0.88 );
	border-radius: var( --gt-radius );
}

.wp-block-group.is-style-guitrans-panel :is( h1, h2, h3, h4, h5 ) {
	color: var( --wp--preset--color--base );
}

.wp-block-group.is-style-guitrans-panel h6 {
	color: var( --wp--preset--color--accent-soft );
}

/* Pastille d'icône des cartes de service. */
.gt-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var( --gt-radius );
	background: var( --wp--preset--color--accent-soft );
	color: var( --wp--preset--color--primary );
	transition: background-color var( --wp--custom--transition--base ),
		color var( --wp--custom--transition--base );
}

.is-style-guitrans-card:hover .gt-badge {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
}

.is-style-guitrans-panel .gt-badge {
	background: rgba( 255, 255, 255, 0.12 );
	color: var( --wp--preset--color--base );
}

/* Liste à coches, pour les arguments et les inclus. */
.wp-block-list.is-style-guitrans-check {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-guitrans-check li {
	position: relative;
	padding-inline-start: 2rem;
	margin-block-end: 0.75rem;
}

.wp-block-list.is-style-guitrans-check li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.45em;
	width: 1.05rem;
	height: 0.55rem;
	border-inline-start: 2px solid var( --wp--preset--color--accent );
	border-block-end: 2px solid var( --wp--preset--color--accent );
	transform: rotate( -45deg );
}

/* Image au coin biseauté : écho discret à la découpe du logo. */
.wp-block-image.is-style-guitrans-notch img {
	clip-path: polygon( 0 0, 100% 0, 100% calc( 100% - 44px ), calc( 100% - 44px ) 100%, 0 100% );
	border-radius: var( --gt-radius );
}

/* Colonnes séparées par un filet vertical. */
.wp-block-columns.is-style-guitrans-dividers > .wp-block-column + .wp-block-column {
	border-inline-start: 1px solid var( --wp--preset--color--line );
	padding-inline-start: var( --wp--preset--spacing--30 );
}

@media ( max-width: 781px ) {
	.wp-block-columns.is-style-guitrans-dividers > .wp-block-column + .wp-block-column {
		border-inline-start: 0;
		padding-inline-start: 0;
		border-block-start: 1px solid var( --wp--preset--color--line );
		padding-block-start: var( --wp--preset--spacing--30 );
	}
}

/* ============================== 7. Coordonnées et compteurs */

.gt-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var( --wp--preset--spacing--20 );
}

.gt-contact--row {
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: var( --wp--preset--spacing--30 );
}

.gt-contact__item {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
}

.gt-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: var( --gt-radius );
	background: var( --wp--preset--color--accent-soft );
	color: var( --wp--preset--color--primary );
}

.is-style-guitrans-panel .gt-contact__icon,
.gt-footer .gt-contact__icon {
	background: rgba( 255, 255, 255, 0.1 );
	color: var( --wp--preset--color--base );
}

.gt-contact__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.gt-contact__label {
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent );
}

.gt-footer .gt-contact__label {
	color: var( --wp--preset--color--accent-soft );
}

.gt-contact__value {
	font-weight: 500;
	overflow-wrap: anywhere;
}

.gt-contact__value a {
	color: inherit;
	text-decoration: none;
}

.gt-contact__value a:hover {
	text-decoration: underline;
}

.gt-counter {
	text-align: center;
}

.gt-counter__value {
	display: block;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xx-large );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var( --wp--preset--color--accent );
	/* Les chiffres gardent la même largeur pendant l'animation, sinon la
	   ligne tressaute à chaque incrément. */
	font-variant-numeric: tabular-nums;
}

.gt-counter__suffix {
	font-size: 0.6em;
	vertical-align: super;
	margin-inline-start: 0.1em;
}

.gt-counter__label {
	display: block;
	margin-top: 0.6rem;
	font-size: var( --wp--preset--font-size--small );
	color: inherit;
	opacity: 0.85;
}

/* ========================================================= 8. Formulaires */

.gt-form {
	max-width: 100%;
}

.gt-form__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--30 );
}

@media ( max-width: 600px ) {
	.gt-form__grid {
		grid-template-columns: 1fr;
	}
}

/* Seuls les champs vraiment longs occupent toute la largeur. L'e-mail reste
   sur une demi-colonne : mis en pleine largeur, il rompait l'alternance des
   paires et désalignait tous les champs suivants. */
.gt-form__grid .gt-field--textarea {
	grid-column: 1 / -1;
}

.gt-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
}

.gt-field__label {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	color: var( --wp--preset--color--primary );
}

.gt-field__required {
	color: var( --wp--preset--color--accent );
}

.gt-field__control {
	width: 100%;
	/* Indispensable : sans border-box, width:100% désigne la seule zone de
	   contenu, et le rembourrage (0.9rem) plus la bordure s'ajoutent par-dessus.
	   Le champ dépassait alors sa cellule de grille d'une trentaine de pixels et
	   venait toucher son voisin de rangée. Les <select> n'étaient pas touchés,
	   les navigateurs les mettant déjà en border-box — d'où un défaut visible
	   sur certaines paires seulement. */
	box-sizing: border-box;
	padding: 0.8rem 0.9rem;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--medium );
	color: var( --wp--preset--color--contrast );
	background: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gt-radius );
	transition: border-color var( --wp--custom--transition--base ),
		box-shadow var( --wp--custom--transition--base );
}

.gt-field__control:focus {
	outline: none;
	border-color: var( --wp--preset--color--accent );
	box-shadow: var( --gt-ring );
}

.gt-field.is-invalid .gt-field__control {
	border-color: #C0392B;
}

.gt-field__error {
	font-size: var( --wp--preset--font-size--small );
	color: #C0392B;
}

textarea.gt-field__control {
	resize: vertical;
	min-height: 8rem;
}

/* Le champ appât ne doit être vu ni par l'œil ni par un lecteur d'écran,
   mais rester rempli par un robot : on le sort du flux sans display:none,
   que certains robots savent détecter. */
.gt-form__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gt-form__legal {
	margin-block: var( --wp--preset--spacing--20 ) 0;
	font-size: var( --wp--preset--font-size--x-small );
	color: var( --wp--preset--color--muted );
}

.gt-form__actions {
	margin-block-start: var( --wp--preset--spacing--20 );
}

.gt-form-off {
	padding: var( --wp--preset--spacing--40 );
	background: var( --wp--preset--color--accent-soft );
	border-radius: var( --gt-radius );
	border-inline-start: 3px solid var( --wp--preset--color--accent );
}

.gt-form-off__title {
	margin: 0 0 0.6rem;
	font-size: var( --wp--preset--font-size--large );
	color: var( --wp--preset--color--primary );
}

.gt-form-off__text {
	margin: 0 0 var( --wp--preset--spacing--30 );
	max-width: 38rem;
}

.gt-form-off__mail {
	margin: 0 0 var( --wp--preset--spacing--30 );
}

.gt-form-off__mail a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var( --wp--preset--font-family--display );
	font-weight: 700;
	font-size: clamp( 1.05rem, 2.6vw, 1.45rem );
	color: var( --wp--preset--color--primary );
	text-decoration: none;
	overflow-wrap: anywhere;
}

.gt-form-off__mail a:hover,
.gt-form-off__mail a:focus-visible {
	color: var( --wp--preset--color--accent );
	text-decoration: underline;
}

.gt-form-off__mail svg {
	flex: none;
	color: var( --wp--preset--color--accent );
}

.gt-form-off__actions {
	margin: 0 0 var( --wp--preset--spacing--20 );
}

.gt-form-off__alt {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--muted );
}

.gt-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem 1.15rem;
	margin-block-end: var( --wp--preset--spacing--30 );
	border-radius: var( --gt-radius );
	border-inline-start: 3px solid;
	font-size: var( --wp--preset--font-size--small );
}

.gt-notice:focus {
	outline: none;
}

.gt-notice--success {
	background: var( --wp--preset--color--accent-soft );
	border-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--primary );
}

.gt-notice--error {
	background: #FDECEA;
	border-color: #C0392B;
	color: #8A2A1F;
}

/* ====================================================== 9. Pied de page */

.gt-footer {
	background: var( --wp--preset--color--primary-dark );
	color: rgba( 255, 255, 255, 0.78 );
}

.gt-footer :is( h1, h2, h3, h4, h5, h6 ) {
	color: var( --wp--preset--color--base );
}

.gt-footer a {
	color: rgba( 255, 255, 255, 0.78 );
	text-decoration: none;
}

.gt-footer a:hover {
	color: var( --wp--preset--color--base );
	text-decoration: underline;
}

.gt-footer .wp-block-navigation {
	gap: 0.5rem 1.5rem;
}

.gt-footer__legal {
	border-top: 1px solid rgba( 255, 255, 255, 0.12 );
	font-size: var( --wp--preset--font-size--x-small );
	color: rgba( 255, 255, 255, 0.6 );
}

/* ========================================================= 10. Animations */

.gt-reveal {
	opacity: 0;
	transform: translateY( 18px );
	transition: opacity 640ms ease, transform 640ms cubic-bezier( 0.2, 0, 0.2, 1 );
}

.gt-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.gt-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.gt-btn:hover,
	.is-style-guitrans-card:hover {
		transform: none;
	}
}

/* ======================================== 11. Rythme des sections pleine largeur */

/* Les blocs racines du gabarit (en-tête, contenu, pied) ne prennent pas
   d'écart entre eux : chaque section porte son propre rembourrage vertical,
   et un blockGap y insérerait une bande vide entre deux fonds pleine largeur. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Même raison à l'intérieur du contenu principal. */
main.wp-block-group > * + * {
	margin-block-start: 0;
}

/* ================================================== 12. Adaptation mobile */

@media ( max-width: 781px ) {
	/* Le bouton de devis quitte l'en-tête : à cette largeur il poussait la
	   rangée au-delà du viewport et provoquait un débordement horizontal de
	   toute la page. L'appel à l'action reste présent dès le héros, juste
	   en dessous. */
	.gt-header .wp-block-buttons {
		display: none;
	}

	/* La barre supérieure passe sur deux lignes plutôt que de s'étirer. */
	.gt-topbar .wp-block-group {
		row-gap: 0.35rem;
	}

	/* Le libellé d'activité est redondant avec le héros sur petit écran. */
	.gt-topbar > .wp-block-group > .wp-block-paragraph:first-child,
	.gt-topbar > .wp-block-group > p:first-child {
		display: none;
	}

	/* Le titre d'accueil descend d'un cran pour tenir en quatre lignes. */
	.gt-hero h1 {
		font-size: clamp( 2rem, 9vw, 2.75rem );
	}

	/* Les pastilles d'icône et leur texte se serrent. */
	.gt-badge {
		width: 48px;
		height: 48px;
	}
}

/* Garde-fou : aucun élément ne doit créer de défilement horizontal. Les causes
   sont corrigées en amont ; cette règle évite qu'un contenu inséré plus tard
   (tableau large, image hors gabarit) ne casse la mise en page mobile. */
body {
	overflow-x: clip;
}

/* ============================================= 13. Cartes illustrées */

.gt-card {
	overflow: hidden;           /* l'image suit les coins arrondis de la carte */
	display: flex;
	flex-direction: column;
}

.gt-card__media {
	margin: 0;
	overflow: hidden;
	/* Le bloc image de WordPress se dimensionne sur son contenu : sans
	   display:block et width:100%, la figure reste à la largeur intrinsèque
	   de l'image et laisse des marges blanches de part et d'autre. */
	display: block;
	width: 100%;
}

.gt-card__media a {
	display: block;
}

.gt-card__media img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: transform 600ms cubic-bezier( 0.2, 0, 0.2, 1 );
}

.gt-card:hover .gt-card__media img {
	transform: scale( 1.045 );
}

.gt-card__body {
	position: relative;
	flex: 1;
}

/* La pastille chevauche le bas de l'image : elle relie l'illustration au
   texte, au lieu de flotter seule dans le corps de la carte. */
.gt-badge--float {
	position: absolute;
	top: 0;
	transform: translateY( -50% );
	box-shadow: 0 4px 14px rgba( 14, 28, 41, 0.18 );
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--accent );
}

.gt-card:hover .gt-badge--float {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
}

/* Le titre se cale juste sous la pastille : plus bas, la pastille paraissait
   détachée de la carte plutôt que rattachée au titre qu'elle annonce. */
.gt-card__body > h3:first-of-type {
	margin-top: 0.85rem !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.gt-card__media img,
	.gt-card:hover .gt-card__media img {
		transition: none;
		transform: none;
	}
}

/* ================================= 14. Corrections d'espacement et de contraste */

/* Les rangées du formulaire respiraient trop peu : l'étiquette d'une rangée
   venait presque toucher le champ de la rangée précédente, et les paires ne se
   lisaient plus comme des paires. L'écart vertical est désormais franchement
   plus grand que l'écart étiquette / champ. */
.gt-form__grid {
	row-gap: var( --wp--preset--spacing--30 );
}

/* Un titre suivi directement de la liste de coordonnées : sans marge, le
   libellé « TÉLÉPHONE » se collait au titre. */
:is( h1, h2, h3, h4, h5, h6 ) + .gt-contact {
	margin-block-start: var( --wp--preset--spacing--30 );
}

/* Sur un panneau navy, un bouton navy est invisible. On l'inverse. */
.is-style-guitrans-panel .wp-block-button:not( .is-style-outline ) .wp-block-button__link {
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--primary );
}

.is-style-guitrans-panel .wp-block-button:not( .is-style-outline ) .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--signal );
	color: var( --wp--preset--color--contrast );
}


/* Message intermédiaire : la demande est enregistrée mais la notification
   n'est pas partie. Ni un succès, ni un échec — le visiteur doit pouvoir
   décider d'appeler. */
.gt-notice--warning {
	background: #FFF6E5;
	border-color: var( --wp--preset--color--signal );
	color: #7A5200;
}

/* ==================================== 15. Téléphone avec indicatif pays */

/* L'indicatif s'affiche dans le même cadre que le champ, comme s'il n'en
   faisait qu'un — mais il n'est ni saisissable ni soumis : il vient du pays
   choisi, et c'est le serveur qui compose le numéro final. */
.gt-tel {
	display: flex;
	align-items: stretch;
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --gt-radius );
	background: var( --wp--preset--color--base );
	overflow: hidden;
	transition: border-color var( --wp--custom--transition--base ),
		box-shadow var( --wp--custom--transition--base );
}

.gt-tel:focus-within {
	border-color: var( --wp--preset--color--accent );
	box-shadow: var( --gt-ring );
}

.gt-tel__code {
	display: flex;
	align-items: center;
	padding: 0 0.75rem;
	flex: none;
	background: var( --wp--preset--color--accent-soft );
	border-inline-end: 1px solid var( --wp--preset--color--line );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	color: var( --wp--preset--color--primary );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Le champ perd sa propre bordure : c'est le conteneur qui la porte. */
.gt-tel .gt-field__control {
	border: 0;
	border-radius: 0;
	min-width: 0;
}

.gt-tel .gt-field__control:focus {
	box-shadow: none;
}

.gt-field.is-invalid .gt-tel {
	border-color: #C0392B;
}

/* Texte d'aide sous un champ. */
.gt-field__help {
	font-size: var( --wp--preset--font-size--x-small );
	color: var( --wp--preset--color--muted );
	line-height: 1.45;
}

/* La liste des pays est longue : on laisse le champ respirer. */
.gt-field--select select.gt-field__control {
	max-width: 100%;
}

/* ================================================ 16. Menu mobile */

/* Le bouton d'ouverture : un vrai repère, pas trois trous dans le blanc.
   Tout est cantonné au mobile : au-delà, WordPress masque ce bouton par un
   display:none qu'une règle non conditionnée écraserait — le hamburger
   réapparaîtrait alors sur grand écran, à côté du menu déployé. */
@media ( max-width: 599px ) {
	.gt-header .wp-block-navigation__responsive-container-open {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border-radius: var( --gt-radius );
		background: var( --wp--preset--color--accent-soft );
		color: var( --wp--preset--color--primary );
		transition: background-color var( --wp--custom--transition--base ),
			color var( --wp--custom--transition--base );
	}

	.gt-header .wp-block-navigation__responsive-container-open:hover {
		background: var( --wp--preset--color--primary );
		color: var( --wp--preset--color--base );
	}
}

/* Le panneau lui-même. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: linear-gradient( 165deg, var( --wp--preset--color--primary ) 0%, var( --wp--preset--color--primary-dark ) 100% );
	color: var( --wp--preset--color--base );
	padding: 0;
	/* L'encoche des téléphones récents mangerait le logo et le dernier lien. */
	padding-top: env( safe-area-inset-top );
	padding-bottom: env( safe-area-inset-bottom );
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0;
	width: 100%;
}

/* Bouton de fermeture, posé en haut à droite. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: calc( 1.15rem + env( safe-area-inset-top ) );
	right: 1.15rem;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.1 );
	color: var( --wp--preset--color--base );
	transition: background-color var( --wp--custom--transition--base );
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
	background: rgba( 255, 255, 255, 0.2 );
}

/* En-tête : le logo, pour que le panneau reste identifiable. */
.gt-menu__brand {
	padding: 1.5rem 1.25rem 1.25rem;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.12 );
}

.gt-menu__logo img {
	display: block;
	width: 170px;
	height: auto;
}

.gt-menu__wordmark {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* La liste des liens occupe l'espace disponible. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	padding: 0.5rem 1.25rem 1.25rem;
	gap: 0;
	flex: 1;
	align-items: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 0.95rem 0;
	width: 100%;
	color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	font-weight: 600;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.09 );
	text-decoration: none;
}

/* Le soulignement animé de l'en-tête n'a pas de sens ici. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var( --wp--preset--color--accent-soft );
}

/* Sous-menu : retrait et filet, pour qu'on voie d'un coup d'œil ce qui
   dépend de « Services » — à plat, les huit entrées se valaient toutes. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding-inline-start: 0.9rem;
	margin-inline-start: 0.15rem;
	border-inline-start: 2px solid var( --wp--preset--color--accent );
	background: transparent;
	border-radius: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 500;
	padding: 0.7rem 0;
	color: rgba( 255, 255, 255, 0.82 );
	border-bottom-color: rgba( 255, 255, 255, 0.06 );
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
	border-bottom: 0;
}

/* Pied du panneau : l'action et les coordonnées, à portée de pouce. */
.gt-menu__foot {
	margin-top: auto;
	padding: 1.25rem 1.25rem calc( 1.5rem + env( safe-area-inset-bottom ) );
	border-top: 1px solid rgba( 255, 255, 255, 0.12 );
	background: rgba( 0, 0, 0, 0.14 );
}

.gt-menu__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 1rem 1.5rem;
	border-radius: var( --gt-radius );
	background: var( --wp--preset--color--signal );
	color: var( --wp--preset--color--contrast );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	text-decoration: none;
}

.gt-menu__cta:hover {
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--primary );
	text-decoration: none;
}

.gt-menu__contact {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.gt-menu__contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: var( --wp--preset--font-size--small );
	color: rgba( 255, 255, 255, 0.78 );
	line-height: 1.45;
}

.gt-menu__contact .gt-icon {
	margin-top: 0.15rem;
	color: var( --wp--preset--color--accent-soft );
}

.gt-menu__contact a {
	color: var( --wp--preset--color--base );
	text-decoration: none;
	font-weight: 500;
	overflow-wrap: anywhere;
}

.gt-menu__contact a:hover {
	text-decoration: underline;
}

/* Le panneau n'existe qu'en version mobile : sur grand écran, ces éléments
   ne doivent jamais apparaître dans la barre de navigation. */
.wp-block-navigation__responsive-container:not( .is-menu-open ) .gt-menu__brand,
.wp-block-navigation__responsive-container:not( .is-menu-open ) .gt-menu__foot {
	display: none;
}

/* Le menu de l'en-tête est aligné à droite ; dans le panneau mobile, cet
   alignement rend la lecture pénible et décale le logo. On repart à gauche,
   sur toute la largeur. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	justify-content: flex-start;
	text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-center {
	justify-content: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.gt-menu__brand {
	text-align: left;
}

/* Le conteneur du panneau est un flex en colonne : sans align-items explicite,
   il hérite de l'alignement en fin de ligne du menu d'en-tête, ce qui tasse le
   logo et le bloc de contact contre le bord droit au lieu de les étirer. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
}

.wp-block-navigation__responsive-container.is-menu-open .gt-menu__brand,
.wp-block-navigation__responsive-container.is-menu-open .gt-menu__foot {
	align-self: stretch;
	width: 100%;
	text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open .gt-menu__logo {
	display: inline-block;
}

/* Le sous-menu conserve le retrait prévu pour l'affichage en survol sur
   grand écran. Dans le panneau, il le décale d'une centaine de pixels et
   casse la lecture : on repart du bord, avec un retrait volontaire et mesuré. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	margin-inline: 0.15rem 0;
	padding-inline: 0.9rem 0;
	left: auto;
	right: auto;
	min-width: 0;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	padding-inline: 0;
}

/* L'élément parent d'un sous-menu est une colonne : son libellé en haut,
   ses enfants dessous, sans décalage horizontal supplémentaire. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
	flex-direction: column;
	align-items: stretch;
}

/* La liste de contacts du panneau est un <ul> à l'intérieur du bloc
   Navigation, dont la feuille de style impose `.wp-block-navigation ul
   { margin: 0 }` — plus spécifique que notre classe, qui était donc ignorée :
   le bouton de devis se retrouvait collé au numéro de téléphone.
   On passe par le rembourrage, que cette règle ne touche pas, et on ajoute un
   filet pour séparer franchement l'action des coordonnées. */
.wp-block-navigation__responsive-container.is-menu-open .gt-menu__contact {
	margin-top: 0;
	padding-top: 1.5rem;
	margin-inline: 0;
	border-top: 1px solid rgba( 255, 255, 255, 0.12 );
}

/* Widget anti-robot Turnstile, entre les champs et la mention légale. */
.gt-form__turnstile {
	margin-block: var( --wp--preset--spacing--20 ) 0;
	min-height: 65px;
}

/* Fil d'Ariane (Yoast) dans le bandeau de page : hérite de la couleur claire. */
.gt-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.gt-breadcrumb a:hover {
	text-decoration: underline;
}

.gt-breadcrumb .breadcrumb_last {
	font-weight: 500;
}

/* Réseaux sociaux du pied de page : icônes claires, zone de clic confortable. */
.gt-footer__social .wp-social-link a,
.gt-social .wp-social-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var( --gt-radius );
	background: rgba( 255, 255, 255, 0.08 );
	color: var( --wp--preset--color--base );
	transition: background-color var( --wp--custom--transition--base );
}

.gt-footer__social .wp-social-link a:hover,
.gt-social .wp-social-link a:hover {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
}