/*
Theme Name: Have a Nice Day
Theme URI: https://www.haveaniceday.be
Author: Have a Nice Day
Description: Thème vitrine sur mesure pour Have a Nice Day, cabinet de conseil ERP et CRM établi en Belgique. Charte graphique TEMESTO (vert bouteille, Calibri). Contenu entièrement géré dans l’éditeur de pages, avec styles de blocs et motifs aux couleurs de la charte.
Version: 3.3.1
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: haveaniceday
*/

/* ==========================================================================
   Polices — charte TEMESTO : Calibri / Calibri Light.
   Calibri est utilisée si elle est installée sur l'appareil (Windows, Office).
   Sinon, Carlito prend le relais : police libre (SIL OFL) aux mêmes métriques
   que Calibri, hébergée sur le serveur du site (aucun appel à un tiers, RGPD).
   ========================================================================== */

@font-face {
	font-family: "HAND Calibri";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local("Calibri"), url("assets/fonts/carlito-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "HAND Calibri";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local("Calibri"), url("assets/fonts/carlito-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "HAND Calibri";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local("Calibri Bold"), local("Calibri-Bold"), url("assets/fonts/carlito-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "HAND Calibri";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local("Calibri Bold"), local("Calibri-Bold"), url("assets/fonts/carlito-latin-ext-700-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "HAND Calibri";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: local("Calibri Italic"), local("Calibri-Italic"), url("assets/fonts/carlito-latin-400-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Jetons — palette TEMESTO verrouillée (aucune autre couleur)
   ========================================================================== */

:root {
	--vert: #1b5e47;          /* Bottle Green : couleur héroïne */
	--vert-profond: #0f4632;  /* Deep Green : survols, pied de page */
	--menthe: #e8f1ed;        /* Mint Light : surfaces douces */
	--menthe-bord: #d8e0dc;   /* Mint Border : bordures de cartes */
	--charbon: #1a1a1a;       /* Charcoal : texte */
	--gris: #5c6b66;          /* Muted Grey : légendes, texte secondaire */
	--blanc: #ffffff;
	--sable: #d4a574;         /* Sand : accent unique (soleil, surtitres sur fond sombre) */

	/* États de formulaire : couleurs sémantiques du design system web TEMESTO */
	--danger: #b5341f;
	--succes: #1f8a55;

	--police: "HAND Calibri", Calibri, Carlito, "Segoe UI", system-ui, sans-serif;
	--police-titre: "Calibri Light", "HAND Calibri", Calibri, Carlito, "Segoe UI", system-ui, sans-serif;

	--conteneur: 72rem;
	--marge: clamp(1.25rem, 4vw, 2.5rem);
	--espace-section: clamp(4rem, 9vw, 7rem);
	--rayon: 12px;
	--rayon-bouton: 8px;
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

body {
	margin: 0;
	font-family: var(--police);
	font-size: 1.1875rem;
	line-height: 1.55;
	color: var(--charbon);
	background: var(--blanc);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
	margin: 0 0 0.55em;
	font-family: var(--police-titre);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.4rem, 5.2vw, 3.75rem);
}

h2 {
	font-size: clamp(1.9rem, 3.6vw, 2.75rem);
}

h3 {
	font-size: 1.4rem;
	line-height: 1.2;
}

p {
	margin: 0 0 1em;
	max-width: 68ch;
	text-wrap: pretty;
}

ul,
ol {
	padding-left: 1.25em;
}

a {
	color: var(--vert);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--vert-profond);
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 3px solid var(--vert);
	outline-offset: 3px;
	border-radius: 2px;
}

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

.conteneur {
	width: 100%;
	max-width: calc(var(--conteneur) + 2 * var(--marge));
	margin-inline: auto;
	padding-inline: var(--marge);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.lien-evitement {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--vert);
	color: var(--blanc);
	font-weight: 700;
	border-radius: 0 0 var(--rayon-bouton) var(--rayon-bouton);
}

.lien-evitement:focus {
	top: 0;
	color: var(--blanc);
}

/* Surfaces sombres (accueil, appel final, pied de page) */
.sombre {
	color: var(--blanc);
}

.sombre :focus-visible {
	outline-color: var(--sable);
}

/* ==========================================================================
   Surtitre (kicker) — signature TEMESTO
   Style de paragraphe « Surtitre » dans l'éditeur.
   ========================================================================== */

.kicker,
.is-style-hand-kicker {
	display: block;
	margin: 0 0 0.9rem;
	color: var(--vert);
	font-family: var(--police);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* Sur vert bouteille, le sable n'atteint le contraste AA qu'en « grand texte »
   (19 px gras minimum) : le surtitre y est donc un peu plus grand. */
:is(.is-style-hand-hero, .is-style-hand-section-verte, .is-style-hand-carte-verte) .is-style-hand-kicker {
	color: var(--sable);
	font-size: 1.1875rem;
	letter-spacing: 0.12em;
}

/* ==========================================================================
   Logos (images téléversées : Apparence > Personnaliser > Identité du site)
   ========================================================================== */

.logo {
	display: inline-block;
	flex: none;
	line-height: 0;
}

.logo__image {
	display: block;
	width: auto;
	height: clamp(3rem, 5vw, 4rem);
}

.logo--pied .logo__image {
	height: clamp(3.25rem, 6vw, 4.5rem);
}

.logo-vertical {
	display: block;
	width: min(14rem, 55%);
	height: auto;
	margin-top: 2.5rem;
}

/* ==========================================================================
   En-tête et navigation
   ========================================================================== */

.entete {
	background: var(--blanc);
	border-bottom: 1px solid var(--menthe-bord);
}

.entete__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	padding-block: 0.85rem;
}

.nav__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__liste a {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	color: var(--charbon);
	font-size: 1.1rem;
	text-decoration: none;
}

.nav__liste a:hover {
	background: var(--menthe);
	color: var(--vert-profond);
}

/* Élément actif : pastille menthe, comme la navigation de l'application TEMESTO */
.nav__liste a[aria-current="page"],
.nav__liste .current-menu-item > a {
	background: var(--menthe);
	color: var(--vert);
	font-weight: 700;
}

/* Bouton « Menu » : masqué sur grand écran */
.nav-bouton {
	display: none;
}

/* --- Grand écran : le menu est toujours visible, aligné à droite --- */
@media (min-width: 60rem) {
	.nav__liste {
		margin-right: -0.9rem;
	}
}

/* --- Mobile et tablette : bouton « Menu » et liste déroulante --- */
@media (max-width: 59.99rem) {
	/* Bouton hamburger : carré de 48 px, confortable au doigt */
	.js .nav-bouton {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 3rem;
		height: 3rem;
		padding: 0;
		border: 1.5px solid var(--menthe-bord);
		border-radius: var(--rayon-bouton);
		background: var(--blanc);
		color: var(--vert-profond);
		cursor: pointer;
	}

	.nav-bouton:hover {
		background: var(--menthe);
	}

	.nav-bouton[aria-expanded="true"] {
		border-color: var(--menthe);
		background: var(--menthe);
	}

	.nav-bouton__icone--fermer,
	.nav-bouton[aria-expanded="true"] .nav-bouton__icone--ouvrir {
		display: none;
	}

	.nav-bouton[aria-expanded="true"] .nav-bouton__icone--fermer {
		display: block;
	}

	/* La liste passe sous le logo et le bouton, sur toute la largeur */
	.nav {
		flex-basis: 100%;
	}

	.js .nav:not(.est-ouverte) {
		display: none;
	}

	.nav__liste {
		flex-direction: column;
		gap: 0;
		padding-bottom: 0.5rem;
	}

	.nav__liste li + li {
		border-top: 1px solid var(--menthe-bord);
	}

	.nav__liste a {
		display: block;
		padding: 0.85rem 0.75rem;
		border-radius: var(--rayon-bouton);
	}
}

/* ==========================================================================
   Boutons
   ========================================================================== */

.bouton,
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.1rem;
	padding: 0.7rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--rayon-bouton);
	background: var(--vert);
	color: var(--blanc);
	font: inherit;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bouton:hover,
.wp-block-button .wp-block-button__link:hover {
	background: var(--vert-profond);
	color: var(--blanc);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--vert);
	background: transparent;
	color: var(--vert);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--menthe);
	color: var(--vert-profond);
}

/* Style « Blanc (sur fond vert) » */
.wp-block-button.is-style-hand-blanc .wp-block-button__link {
	background: var(--blanc);
	color: var(--vert-profond);
}

.wp-block-button.is-style-hand-blanc .wp-block-button__link:hover {
	background: var(--menthe);
	color: var(--vert-profond);
}

/* Style « Lien simple » */
.wp-block-button.is-style-hand-lien .wp-block-button__link {
	min-height: 0;
	padding-inline: 0;
	background: transparent;
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.wp-block-button.is-style-hand-lien .wp-block-button__link:hover {
	background: transparent;
	color: inherit;
	text-decoration-thickness: 2px;
}

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
}

/* ==========================================================================
   Contenu des pages (éditeur de blocs)
   Les sections (bandeau, en-tête, sections, document) occupent toute la
   largeur ; tout autre bloc posé directement dans la page reste centré.
   ========================================================================== */

.contenu-page > :not(.is-style-hand-hero, .is-style-hand-entete, .is-style-hand-section, .is-style-hand-section-menthe, .is-style-hand-section-verte, .is-style-hand-document) {
	max-width: calc(var(--conteneur) + 2 * var(--marge));
	margin-inline: auto;
	padding-inline: var(--marge);
}

.contenu-page > :not(.is-style-hand-hero, .is-style-hand-entete, .is-style-hand-section, .is-style-hand-section-menthe, .is-style-hand-section-verte, .is-style-hand-document):first-child {
	margin-top: var(--espace-section);
}

.contenu-page > :not(.is-style-hand-hero, .is-style-hand-entete, .is-style-hand-section, .is-style-hand-section-menthe, .is-style-hand-section-verte, .is-style-hand-document):last-child {
	margin-bottom: var(--espace-section);
}

:is(.is-style-hand-hero, .is-style-hand-entete, .is-style-hand-section, .is-style-hand-section-menthe, .is-style-hand-section-verte, .is-style-hand-document) > .wp-block-group__inner-container {
	max-width: calc(var(--conteneur) + 2 * var(--marge));
	margin-inline: auto;
	padding-inline: var(--marge);
}

:is(.is-style-hand-section, .is-style-hand-section-menthe, .is-style-hand-section-verte, .is-style-hand-document) {
	padding-block: var(--espace-section);
}

/* Pas de marge sous le dernier élément d'un conteneur */
:is(.wp-block-group__inner-container, .wp-block-column) > :last-child {
	margin-bottom: 0;
}

.is-style-hand-section-menthe {
	background: var(--menthe);
}

.is-style-hand-section-verte {
	background: var(--vert);
}

/* Surfaces vertes : texte clair */
:is(.is-style-hand-hero, .is-style-hand-section-verte, .is-style-hand-carte-verte) {
	color: var(--blanc);
}

:is(.is-style-hand-hero, .is-style-hand-section-verte, .is-style-hand-carte-verte) :is(h1, h2, h3) {
	color: var(--blanc);
}

:is(.is-style-hand-hero, .is-style-hand-section-verte, .is-style-hand-carte-verte) p:not(.is-style-hand-kicker) {
	color: var(--menthe);
}

:is(.is-style-hand-hero, .is-style-hand-section-verte, .is-style-hand-carte-verte) a:not(.wp-block-button__link) {
	color: var(--blanc);
}

:is(.is-style-hand-hero, .is-style-hand-section-verte, .is-style-hand-carte-verte) :focus-visible {
	outline-color: var(--sable);
}

/* Paragraphes : « Introduction » et « Chapeau » */
.is-style-hand-intro {
	max-width: 50ch;
	font-size: clamp(1.2rem, 1.7vw, 1.35rem);
	line-height: 1.45;
}

:is(.is-style-hand-section, .is-style-hand-section-menthe) .is-style-hand-intro {
	color: var(--gris);
}

.is-style-hand-chapeau {
	color: var(--vert);
	font-family: var(--police-titre);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2;
}

/* ==========================================================================
   Bandeau d'accueil : le soleil se lève sur le vert bouteille
   ========================================================================== */

.is-style-hand-hero {
	position: relative;
	overflow: hidden;
	padding-top: clamp(3.5rem, 8vw, 6.5rem);
	padding-bottom: clamp(9rem, 14vw, 10.5rem);
	background: var(--vert);
}

.is-style-hand-hero > .wp-block-group__inner-container {
	position: relative;
	z-index: 1;
}

.is-style-hand-hero h1 {
	max-width: 13ch;
	margin-bottom: 0.4em;
	font-size: clamp(2.8rem, 7vw, 5.5rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
}

.is-style-hand-hero .is-style-hand-intro {
	max-width: 42ch;
	margin-bottom: 2.25rem;
}

.is-style-hand-hero::after {
	content: "";
	position: absolute;
	right: clamp(-5rem, 4vw, 7vw);
	bottom: 0;
	width: clamp(15rem, 40vw, 34rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--sable);
	transform: translateY(50%);
	animation: lever-du-soleil 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
}

@keyframes lever-du-soleil {
	from {
		transform: translateY(92%);
	}
	to {
		transform: translateY(50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-style-hand-hero::after {
		animation: none;
	}
}

/* ==========================================================================
   En-tête de page (menthe)
   ========================================================================== */

.is-style-hand-entete {
	padding-block: clamp(3rem, 6vw, 5rem);
	background: var(--menthe);
}

.is-style-hand-entete h1 {
	max-width: 20ch;
	margin-bottom: 0.4em;
}

/* ==========================================================================
   Colonnes
   ========================================================================== */

.contenu-page .wp-block-columns {
	gap: 1.5rem 4rem;
	margin-bottom: 0;
}

.contenu-page .wp-block-columns + * {
	margin-top: 3rem;
}

.is-style-hand-section-verte .wp-block-buttons {
	justify-content: flex-start;
}

@media (min-width: 782px) {
	.is-style-hand-section-verte .wp-block-column:last-child .wp-block-buttons {
		justify-content: flex-end;
	}
}

/* ==========================================================================
   Grille de cartes, cartes, encadré
   ========================================================================== */

.is-style-hand-grille {
	margin-top: 3rem;
}

.is-style-hand-grille:first-child {
	margin-top: 0;
}

.is-style-hand-grille > .wp-block-group__inner-container {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 44rem) {
	.is-style-hand-grille > .wp-block-group__inner-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.is-style-hand-grille > .wp-block-group__inner-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Un groupe sans style dans une grille sert de bloc d'introduction */
.is-style-hand-grille > .wp-block-group__inner-container > .wp-block-group:not([class*="is-style-"]) {
	padding: 0.5rem 1rem 1.5rem 0;
}

.is-style-hand-carte,
.is-style-hand-carte-verte {
	padding: 1.75rem;
	border: 1px solid var(--menthe-bord);
	border-radius: var(--rayon);
	background: var(--blanc);
}

.is-style-hand-carte h3,
.is-style-hand-carte-verte h3 {
	margin-bottom: 0.5rem;
}

.is-style-hand-carte p {
	color: var(--gris);
}

.is-style-hand-carte-verte {
	border-color: var(--vert);
	background: var(--vert);
}

.is-style-hand-encadre {
	padding: 2rem;
	border-radius: var(--rayon);
	background: var(--menthe);
}

.is-style-hand-document .is-style-hand-encadre {
	margin-bottom: 2.5rem;
	padding: 1rem 1.25rem;
	border-radius: var(--rayon-bouton);
}

.logo-contenu {
	display: block;
	width: min(14rem, 55%);
	height: auto;
	margin-top: 2.5rem;
}

/* ==========================================================================
   Liste « Étapes numérotées » : une vraie séquence, affichée en cartes
   ========================================================================== */

ol.is-style-hand-etapes {
	display: grid;
	gap: 1rem;
	margin: 3rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: etape;
}

@media (min-width: 44rem) {
	ol.is-style-hand-etapes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	ol.is-style-hand-etapes {
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	}
}

ol.is-style-hand-etapes > li {
	padding: 1.5rem;
	border: 1px solid var(--menthe-bord);
	border-radius: var(--rayon);
	background: var(--blanc);
	color: var(--gris);
	font-size: 1.1rem;
	counter-increment: etape;
}

ol.is-style-hand-etapes > li::before {
	content: counter(etape, decimal-leading-zero);
	display: block;
	margin-bottom: 1.25rem;
	color: var(--vert);
	font-family: var(--police-titre);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
}

/* Le texte en gras sert de titre à l'étape */
ol.is-style-hand-etapes > li strong {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--charbon);
	font-family: var(--police-titre);
	font-size: 1.4rem;
	line-height: 1.2;
}

ol.is-style-hand-etapes > li:last-child {
	border-color: var(--vert);
	background: var(--vert);
	color: var(--menthe);
}

ol.is-style-hand-etapes > li:last-child::before {
	color: var(--sable);
}

ol.is-style-hand-etapes > li:last-child strong {
	color: var(--blanc);
}

/* ==========================================================================
   Document avec sommaire (conditions générales, confidentialité)
   Le sommaire est généré automatiquement à partir des titres de niveau 2.
   ========================================================================== */

.is-style-hand-document > .wp-block-group__inner-container {
	display: grid;
	gap: 2.5rem 4rem;
}

@media (min-width: 62rem) {
	.is-style-hand-document > .wp-block-group__inner-container {
		grid-template-columns: 16rem minmax(0, 1fr);
	}

	.hand-sommaire {
		position: sticky;
		top: 2rem;
		align-self: start;
	}
}

.hand-sommaire ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1rem;
	line-height: 1.35;
}

.hand-sommaire li + li {
	margin-top: 0.45rem;
}

.hand-sommaire a {
	color: var(--charbon);
}

.hand-sommaire a:hover {
	color: var(--vert);
}

.hand-document__texte {
	max-width: 46rem;
}

/* Titres de section en vert bouteille, comme dans les documents TEMESTO */
.is-style-hand-document h2 {
	margin-top: 2.75rem;
	color: var(--vert);
	font-size: 1.55rem;
	scroll-margin-top: 1.5rem;
}

.is-style-hand-document :is(p, li):not(.is-style-hand-kicker, .hand-sommaire li) {
	font-size: 1.125rem;
	line-height: 1.6;
}

.is-style-hand-document li + li {
	margin-top: 0.4rem;
}

/* ==========================================================================
   Couleurs et tailles de la palette de l'éditeur
   ========================================================================== */

.has-vert-color { color: #1b5e47; }
.has-vert-profond-color { color: #0f4632; }
.has-menthe-color { color: #e8f1ed; }
.has-menthe-bord-color { color: #d8e0dc; }
.has-charbon-color { color: #1a1a1a; }
.has-gris-color { color: #5c6b66; }
.has-blanc-color { color: #ffffff; }
.has-sable-color { color: #d4a574; }

.has-vert-background-color { background-color: #1b5e47; }
.has-vert-profond-background-color { background-color: #0f4632; }
.has-menthe-background-color { background-color: #e8f1ed; }
.has-menthe-bord-background-color { background-color: #d8e0dc; }
.has-charbon-background-color { background-color: #1a1a1a; }
.has-gris-background-color { background-color: #5c6b66; }
.has-blanc-background-color { background-color: #ffffff; }
.has-sable-background-color { background-color: #d4a574; }

.has-petit-font-size { font-size: 1rem; }
.has-normal-font-size { font-size: 1.1875rem; }
.has-grand-font-size { font-size: 1.4375rem; }
.has-tres-grand-font-size { font-size: 1.875rem; }

/* ==========================================================================
   Contact
   ========================================================================== */

.formulaire {
	scroll-margin-top: 2rem;
}

.champs-duo {
	display: grid;
	gap: 0 1.5rem;
}

@media (min-width: 40rem) {
	.champs-duo {
		grid-template-columns: 1fr 1fr;
	}
}

.champ {
	margin-bottom: 1.5rem;
}

.champ label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 700;
}

.champ__option {
	font-weight: 400;
	color: var(--gris);
}

.champ input,
.champ select,
.champ textarea {
	display: block;
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1.5px solid var(--gris);
	border-radius: var(--rayon-bouton);
	background: var(--blanc);
	color: var(--charbon);
	font: inherit;
	font-size: 1.1rem;
	line-height: 1.4;
}

.champ textarea {
	min-height: 11rem;
	resize: vertical;
}

.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
	border-color: var(--vert);
	outline-offset: 1px;
}

.champ [aria-invalid="true"] {
	border-color: var(--danger);
	border-width: 2px;
}

.champ__erreur {
	margin: 0.4rem 0 0;
	color: var(--danger);
	font-size: 1rem;
	font-weight: 700;
}

.case {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.champ .case input {
	flex: none;
	width: 1.3rem;
	height: 1.3rem;
	margin: 0.2rem 0 0;
	padding: 0;
	accent-color: var(--vert);
}

.champ .case label {
	margin: 0;
	font-weight: 400;
}

.champ-piege {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.notice {
	margin-bottom: 2rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--menthe-bord);
	border-left-width: 5px;
	border-radius: var(--rayon-bouton);
}

.notice p {
	margin: 0;
}

.notice ul {
	margin: 0.5rem 0 0;
}

.notice--succes {
	border-left-color: var(--succes);
	background: var(--menthe);
}

.notice--erreur {
	border-color: var(--danger);
	background: var(--blanc);
}

.coordonnees {
	margin: 0;
}

.coordonnees dt {
	margin-top: 1.1rem;
	color: var(--gris);
	font-size: 1rem;
}

.coordonnees dt:first-child {
	margin-top: 0;
}

.coordonnees dd {
	margin: 0.1rem 0 0;
	font-weight: 700;
}

/* ==========================================================================
   Pied de page : le soleil se couche
   ========================================================================== */

.pied {
	position: relative;
	padding-block: 4rem 2rem;
	background: var(--vert-profond);
	color: var(--menthe);
}

.pied__soleil {
	position: absolute;
	right: 12%;
	bottom: 100%;
	width: 7rem;
	height: 3.5rem;
	border-radius: 7rem 7rem 0 0;
	background: var(--sable);
}

.pied a {
	color: var(--blanc);
}

.pied a:hover {
	color: var(--menthe);
}

.pied__grille {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 48rem) {
	.pied__grille {
		grid-template-columns: 1.3fr 1fr 1fr;
	}
}

/* Surtitres sable : contraste AA sur vert profond */
.pied__titre {
	margin-bottom: 0.9rem;
	color: var(--sable);
	font-family: var(--police);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.pied p,
.pied address {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	font-style: normal;
	line-height: 1.55;
}

.pied__slogan {
	margin-top: 1rem;
}

.pied ul {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 1.05rem;
}

.pied li + li {
	margin-top: 0.35rem;
}

.pied__bas {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(232, 241, 237, 0.2);
	font-size: 0.95rem;
}

.pied__bas p {
	margin: 0;
	max-width: none;
}

/* ==========================================================================
   Impression (utile pour les conditions générales)
   ========================================================================== */

@media print {
	.entete,
	.pied,
	.is-style-hand-section-verte,
	.hand-sommaire,
	.lien-evitement {
		display: none !important;
	}

	.is-style-hand-hero::after {
		display: none;
	}

	body {
		font-size: 11pt;
	}

	.is-style-hand-entete {
		padding: 0 0 1rem;
		background: none;
	}

	.is-style-hand-document > .wp-block-group__inner-container {
		display: block;
	}

	a {
		color: inherit;
	}
}