/*
	style.css — Habillage naturo de NaturoSève (surcharge de Prologue / main.css)
	Chargé APRÈS main.css. Tout le CSS custom du projet est centralisé ici.
	Règles : rem (sauf borders), dvh (jamais vh), zéro style inline, icônes FA solid.
*/

/* ==========================================================================
   0. Polices locales (auto-hébergées, zéro requête externe)
   Remplacent les 3 @import Google/FA supprimés (main.css + style.css).
   - Source Sans Pro : corps de texte (poids réellement utilisés : 300, 600 + 300 italique)
   - Cormorant Garamond : titres (500, 600)
   - Font Awesome 5 : sous-ensemble local des 16 icônes du site (voir map plus bas)
   Sous-ensemble « latin » (couvre les accents FR). font-display: swap (texte)
   / block (icônes, évite le flash de carré).
   ========================================================================== */

/* Source Sans Pro */
@font-face {
	font-family: "Source Sans Pro";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/source-sans-300.woff2") format("woff2");
}
@font-face {
	font-family: "Source Sans Pro";
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/source-sans-300-italic.woff2") format("woff2");
}
@font-face {
	font-family: "Source Sans Pro";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/source-sans-600.woff2") format("woff2");
}

/* Cormorant Garamond */
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/cormorant-500.woff2") format("woff2");
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/cormorant-600.woff2") format("woff2");
}

/* Font Awesome 5 — sous-ensemble local (la mécanique .icon reste dans main.css) */
@font-face {
	font-family: "Font Awesome 5 Free";
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url("../webfonts/fa-solid-900-subset.woff2?v=64") format("woff2");
}
@font-face {
	font-family: "Font Awesome 5 Brands";
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url("../webfonts/fa-brands-400-subset.woff2") format("woff2");
}

/* Map des 19 icônes utilisées (remplace la map de ~1500 icônes de FA complet).
   Toute nouvelle icône FA employée dans le HTML doit être ajoutée ici
   ET son glyphe ajouté au subset de police (fa-solid-900-subset.woff2). */
.fa-check:before          { content: "\f00c"; }
.fa-leaf:before           { content: "\f06c"; }
.fa-arrow-right:before    { content: "\f061"; }
.fa-eye:before            { content: "\f06e"; }
.fa-hands:before          { content: "\f4c2"; }
.fa-dumbbell:before       { content: "\f44b"; }
.fa-star:before           { content: "\f005"; }
.fa-quote-left:before     { content: "\f10d"; }
.fa-quote-right:before    { content: "\f10e"; }
.fa-map-marker-alt:before { content: "\f3c5"; }
.fa-phone:before          { content: "\f095"; }
.fa-envelope:before       { content: "\f0e0"; }
.fa-info-circle:before    { content: "\f05a"; }
.fa-home:before           { content: "\f015"; }
.fa-heart:before          { content: "\f004"; }
.fa-spa:before            { content: "\f5bb"; }
.fa-heartbeat:before      { content: "\f21e"; }
.fa-newspaper:before      { content: "\f1ea"; }
.fa-facebook-f:before     { content: "\f39e"; }

/* ==========================================================================
   1. Palette
   ========================================================================== */

:root {
	--creme:        #faf6ee; /* fond de base */
	--creme-2:      #f4eee2; /* fond section alterné */
	--sauge:        #7d9b76; /* accent principal (vert sauge) */
	--sauge-fonce:  #45573f; /* sidebar, titres, footer */
	--terracotta:   #c67b5b; /* accent chaud / CTA / hover */
	--terracotta-2: #b06a4b; /* hover foncé du CTA */
	--bois:         #8a6d54; /* brun discret */
	--texte:        #3f463b; /* texte courant */
	--texte-clair:  #6d7367; /* texte secondaire */
	--ombre:        0 0.5rem 1.5rem rgba(69, 87, 63, 0.12);
}

/* ==========================================================================
   2. Typographie
   ========================================================================== */

body,
#main {
	color: var(--texte);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--sauge-fonce);
}

#main header h1,
#main header h2,
.carte h3,
.temoignage cite {
	font-family: "Cormorant Garamond", Georgia, serif;
}

#main header h1,
#main header h2 {
	font-size: 2.5rem;
	line-height: 1.15;
	letter-spacing: 0;
	font-weight: 600;
}

/* Espace sous le titre des sous-pages (h1) : évite qu'il colle à la phrase d'intro */
#main header h1 {
	margin-bottom: 1.25rem;
}

/* Espace sous les sous-titres de contenu (h2 « Pour qui ? », « Pour quoi ? »…)
   pour qu'ils ne collent pas à leurs vignettes. Couvre les 4 sous-pages. */
#main .container > h2 {
	margin-bottom: 1.25rem;
}

#main > section p {
	line-height: 1.75;
}

.section-intro {
	max-width: 40rem;
	margin: 0 auto 1rem auto;
	color: var(--texte-clair);
}

/* ==========================================================================
   3. Sidebar (#header)
   ========================================================================== */

#header {
	background-color: var(--sauge-fonce);
	text-align: center;
}

#logo {
	text-align: center;
}

/* Portrait rond dans la sidebar (remplace l'avatar 48px)
   #logo pour battre la spécificité de Prologue (#logo .image) qui met
   la photo en position:absolute en mode off-canvas → superposition. */
#logo .portrait-avatar {
	position: relative;
	display: block;
	width: 8.5rem;
	height: 8.5rem;
	margin: 0 auto 1rem auto;
	border-radius: 50%;
	overflow: hidden;
	border: 0.25rem solid rgba(255, 255, 255, 0.85);
	box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.25);
}

	.portrait-avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 30%;
	}

/* Portrait couronné de lierre (PNG transparent : anneau blanc + lierre inclus).
   Pas de masque rond ni bordure, sinon le lierre serait rogné. */
#logo .portrait-lierre {
	position: relative; /* bat le position:absolute de Prologue (#logo .image) */
	display: block;
	width: 10.5rem;
	margin: 0 auto 0.5rem auto;
}

	.portrait-lierre img {
		display: block;
		width: 100%;
		height: auto;
	}

#logo h1 {
	color: #fff;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.9rem;
	letter-spacing: 0.05rem;
}

#logo p {
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.5;
}

/* Menu : icônes lisibles sur fond vert */
#nav ul li a {
	position: relative; /* ancre le trait de clic fugace (::after) */
	color: rgba(255, 255, 255, 0.7);
	/* Fondu du sélecteur (voir scroll-spy dans naturo.js). */
	transition: background-color 0.2s ease, color 0.2s ease;
}

	#nav ul li a span:before {
		color: rgba(255, 255, 255, 0.45);
		transition: color 0.2s ease;
	}

	#nav ul li a:hover {
		color: #fff;
	}

	#nav ul li a.active {
		background: rgba(0, 0, 0, 0.18);
		color: #fff;
	}

		#nav ul li a.active span:before {
			color: var(--terracotta);
		}

	/* Pendant un scroll (clic menu OU molette) : le sélecteur s'efface en fondu.
	   Il réapparaît sur la bonne section quand le scroll est terminé (naturo.js). */
	#nav.nav-scrolling ul li a.active {
		background: transparent;
		color: rgba(255, 255, 255, 0.7);
	}

		#nav.nav-scrolling ul li a.active span:before {
			color: rgba(255, 255, 255, 0.45);
		}

	/* Signal de clic fugace : un trait terracotta sous l'item cliqué apparaît puis
	   s'efface (animation one-shot, retirée en JS). Purement déclenché au clic → ne
	   suit pas le scroll, donc aucune cascade possible. */
	#nav ul li a.nav-clic::after {
		content: '';
		position: absolute;
		left: 1.5rem;
		right: 1.5rem;
		bottom: 0.5rem;
		height: 0.125rem;
		border-radius: 1px;
		background-color: var(--terracotta);
		animation: nav-clic-flash 0.55s ease forwards;
	}

	@keyframes nav-clic-flash {
		0%   { opacity: 0; }
		30%  { opacity: 1; }
		100% { opacity: 0; }
	}

#header .icons a {
	color: rgba(255, 255, 255, 0.6);
}

	#header .icons a:hover {
		color: #fff;
	}

/* Bouton burger (mobile) : fond noir pour bien ressortir sur le hero. */
#headerToggle .toggle:before {
	background: #000;
}

/* ==========================================================================
   4. Sections & fonds
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   HERO — VALEURS D'ORIGINE (avant retouche lisibilité, à restaurer pour tout annuler) :
     • Voile UNIQUE tous écrans (pas de distinction mobile/desktop), en dégradé :
         linear-gradient(rgba(50, 63, 45, 0.55), rgba(50, 63, 45, 0.65))
     • AUCUN voile desktop spécifique (supprimer le background-image du @media ≥737px)
     • AUCUN contour/ombre sur le texte du hero (supprimer les règles text-stroke/text-shadow
       sur `#main > section.one h2.alt, #main > section.one p`)
   ÉTAT ACTUEL : voile 0.30 (mobile) / 0.50 (desktop) uniformes + contour+ombre sur le texte.
   ───────────────────────────────────────────────────────────────────────── */
#main > section.one {
	background-color: var(--sauge-fonce);
	background-image:
		linear-gradient(rgba(50, 63, 45, 0.30), rgba(50, 63, 45, 0.30)), /* voile mobile (origine : 0.55→0.65) */
		url("../../images/accueil-mobile.webp"); /* mobile : image 1080px allégée (LCP). Desktop surcharge en 1600px ci-dessous. */
	background-size: cover;
	background-position: center center;
}

	#main > section.one.cover {
		padding: 8em 0;
	}

	/* Desktop + tablette (md) : hero plein écran → la section suivante reste sous
	   la ligne de flottaison. min-height en dvh (règle projet) + contenu centré.
	   (sm ≤736px a la même règle dans le bloc Responsive.) */
	@media screen and (min-width: 737px) {

		#main > section.one {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 100dvh;
			/* Desktop : ciel clair plus présent derrière le texte → voile un peu plus appuyé
			   que sur mobile (0.30). Le mobile reste inchangé (cadrage plus sombre). */
			background-image:
				linear-gradient(rgba(50, 63, 45, 0.50), rgba(50, 63, 45, 0.50)),
				url("../../images/accueil.webp");
		}

	}

	#main > section.one h2.alt {
		color: #fff;
	}

	#main > section.one p {
		color: rgba(255, 255, 255, 0.92);
	}

	/* TEST contour des lettres : fin liseré sombre autour du texte (photo non touchée).
	   paint-order = le contour passe derrière le remplissage → lettres nettes. */
	#main > section.one h2.alt,
	#main > section.one p {
		-webkit-text-stroke: 1.2px rgba(0, 0, 0, 0.9);
		paint-order: stroke fill;
		text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.9), 0 0.12rem 0.3rem rgba(0, 0, 0, 0.7);
	}

#main > section.two   { background-color: var(--creme); }
#main > section.three { background-color: var(--creme-2); }
#main > section.four  { background-color: var(--creme); }

/* Image "featured" (Qui suis-je) */
.image.featured {
	max-width: 34rem;
	margin: 0 auto 2.5rem auto;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: var(--ombre);
}

	.image.featured img {
		width: 100%;
		display: block;
	}

/* Repères / diplômes */
.reperes {
	list-style: none;
	padding: 0;
	margin: 1.5rem auto 0 auto;
	width: fit-content;
	max-width: 34rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
}

	.reperes li {
		padding: 0;
		color: var(--texte);
		font-weight: 600;
	}

	.reperes .icon {
		color: var(--sauge);
		margin-right: 0.4rem;
	}

/* Pied des sous-pages : bouton RDV + bouton retour, empilés et aérés */
.actions-presta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin-top: 2.5rem;
}

/* Bouton retour : contour vert lisible sur fond clair (le style .alt de Prologue,
   dégradé blanc, est illisible ici). */
.actions-presta .button.alt {
	background-image: none;
	background-color: transparent;
	color: var(--sauge-fonce) !important; /* bat le color:#fff !important de Prologue */
	box-shadow: inset 0 0 0 2px var(--sauge-fonce);
	text-shadow: none;
}

	.actions-presta .button.alt:hover {
		background-color: var(--sauge-fonce);
		color: #fff !important;
		box-shadow: inset 0 0 0 2px var(--sauge-fonce);
	}

/* ==========================================================================
   5. Cartes "Accompagnements"
   ========================================================================== */

.cartes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 2.5rem 0 2rem 0;
	text-align: center;
}

.carte {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: #fff;
	border: 1px solid rgba(69, 87, 63, 0.08);
	border-radius: 0.9rem;
	padding: 2rem 1.5rem;
	box-shadow: var(--ombre);
	color: inherit;
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

	.carte:hover {
		transform: translateY(-0.4rem);
		box-shadow: 0 1rem 2rem rgba(69, 87, 63, 0.18);
	}

.carte-icone {
	display: inline-flex;
	align-self: center;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	margin-bottom: 1.1rem;
	border-radius: 50%;
	background: var(--sauge);
	color: #fff;
	font-size: 1.6rem;
	transition: background 0.3s ease;
}

	.carte:hover .carte-icone {
		background: var(--terracotta);
	}

.carte h3 {
	font-size: 1.5rem;
	margin-bottom: 0.6rem;
}

.carte p {
	color: var(--texte-clair);
	font-size: 0.95rem;
	margin: 0;
}

/* Lien "En savoir plus" calé en bas de carte */
.carte-savoir {
	margin-top: auto;
	padding-top: 1.1rem;
	color: var(--terracotta);
	font-weight: 600;
	font-size: 0.9rem;
}

	.carte-savoir .icon {
		margin-left: 0.35rem;
		transition: transform 0.3s ease;
	}

	.carte:hover .carte-savoir {
		color: var(--terracotta-2);
	}

	.carte:hover .carte-savoir .icon {
		transform: translateX(0.3rem);
	}

/* ==========================================================================
   Actualités (page actualite.php)
   ========================================================================== */

.actus {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 22rem));
	justify-content: center;
	gap: 1.5rem;
	margin: 2.5rem 0 2rem 0;
}

.actu-carte {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(69, 87, 63, 0.08);
	border-radius: 0.9rem;
	overflow: hidden;
	box-shadow: var(--ombre);
}

.actu-carte-img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.actu-corps {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	text-align: left;
}

.actu-date {
	margin-bottom: 0.5rem;
	color: var(--terracotta);
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.actu-carte h2 {
	font-size: 1.4rem;
	margin-bottom: 0.6rem;
}

.actu-texte {
	margin: 0;
	color: var(--texte-clair);
	font-size: 0.95rem;
	line-height: 1.65;
	white-space: pre-line; /* préserve les retours à la ligne saisis par l'admin */
}

/* Aucune actu publiée : message par défaut (personnalisable depuis l'admin) */
.actu-vide {
	max-width: 34rem;
	margin: 3rem auto;
	padding: 2.5rem 2rem;
	text-align: center;
	background: #fff;
	border: 1px solid rgba(69, 87, 63, 0.08);
	border-radius: 0.9rem;
	box-shadow: var(--ombre);
	color: var(--texte-clair);
}

	.actu-vide .icon {
		display: block;
		margin-bottom: 1rem;
		color: var(--sauge);
		font-size: 2.2rem;
	}

	.actu-vide p {
		margin: 0;
		font-size: 1.05rem;
	}

/* Domaines (chips) */
.chips {
	list-style: none;
	padding: 0;
	margin: 0 auto 1.5rem auto;
	max-width: 46rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
}

	.chips li {
		padding: 0.4rem 1rem;
		background: rgba(125, 155, 118, 0.15);
		color: var(--sauge-fonce);
		border-radius: 2rem;
		font-size: 0.85rem;
		font-weight: 600;
	}

	.chips small {
		font-weight: 400;
		color: var(--texte-clair);
	}

/* Note tarifs */
.tarif-note {
	max-width: 44rem;
	margin: 0 auto;
	padding: 1rem 1.25rem;
	background: #fff;
	border-left: 0.25rem solid var(--terracotta);
	border-radius: 0.5rem;
	color: var(--texte-clair);
	font-size: 0.95rem;
	text-align: left;
}

	.tarif-note .icon {
		color: var(--terracotta);
		margin-right: 0.4rem;
	}

	/* Ligne discrète « mutuelle » sous les tarifs (source : partials/tarif.php) */
	.tarif-mutuelle {
		display: block;
		margin-top: 0.7rem;
		padding-top: 0.7rem;
		border-top: 1px solid rgba(125, 155, 118, 0.25);
		font-size: 0.85rem;
		color: var(--texte-clair);
	}

		.tarif-mutuelle .icon {
			color: var(--sauge);
			margin-right: 0.4rem;
		}

/* ==========================================================================
   6. Témoignages
   ========================================================================== */

.etoiles .icon {
	color: #e0a83e;
	font-size: 0.9rem;
	margin: 0 0.05rem;
}

.temoignages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.5rem;
	margin-top: 2.5rem;
	text-align: left;
}

.temoignage {
	position: relative;
	background: #fff;
	border-radius: 0.9rem;
	padding: 2rem 1.75rem 1.5rem 1.75rem;
	box-shadow: var(--ombre);
	margin: 0;
}

	.temoignage > .icon.fa-quote-left {
		color: var(--sauge);
		font-size: 1.5rem;
		opacity: 0.5;
		margin-bottom: 0.75rem;
		display: block;
	}

	.temoignage p {
		font-style: italic;
		color: var(--texte);
		margin-bottom: 1rem;
	}

	.temoignage cite {
		font-style: normal;
		font-weight: 600;
		font-size: 1.15rem;
		color: var(--sauge-fonce);
	}

/* ==========================================================================
   7. Contact
   ========================================================================== */

.coordonnees {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.25rem;
}

	.coordonnees li {
		padding: 0;
		font-size: 1.05rem;
		line-height: 1.5;
	}

	.coordonnees .icon {
		color: var(--terracotta);
		margin-right: 0.6rem;
	}

	.coordonnees a {
		border: 0;
	}

	/* Icône WhatsApp en vraie couleur (SVG 2 tons) — seule icône colorée du site, pour
	   la reconnaissance immédiate. Couleurs centralisées ici (pas d'inline sur le SVG). */
	.ico-whatsapp {
		width: 1.4rem;
		height: 1.4rem;
		vertical-align: middle;
		margin-right: 0.45rem;
	}

		.ico-whatsapp .wa-bulle { fill: #25D366; }
		.ico-whatsapp .wa-phone { fill: #fff; }

	/* Variante « ligne de contact direct » en tête de contact.php : horizontale, centrée. */
	.coordonnees-contact {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1.75rem;
		margin: 1.25rem 0 0.5rem 0;
	}

.carte-map {
	border-radius: 0.9rem;
	overflow: hidden;
	box-shadow: var(--ombre);
	min-height: 18rem;
}

	.carte-map iframe {
		width: 100%;
		height: 100%;
		min-height: 18rem;
		border: 0;
		display: block;
	}

/* Cartes contact (cabinets + visio) : autant de colonnes que la largeur le permet →
   3 cartes en ligne sur desktop, et passage propre à 2 le jour où l'on retire Billère
   (auto-fit collapse les colonnes vides). Empilées en mobile (voir Responsive).
   Le bouton du bas est aligné grâce au flex-grow de l'adresse (hauteurs égales). */
.cabinets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
	gap: 1.5rem;
	width: 100%;
}

	.cabinet {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
		padding: 1.5rem 1.25rem;
		background-color: #fff;
		border-radius: 0.9rem;
		box-shadow: var(--ombre);
	}

		.cabinet-ville {
			margin: 0;
			font-size: 1.15rem;
			color: var(--sauge-fonce);
		}

			.cabinet-dept {
				color: var(--terracotta);
			}

		.cabinet-adresse {
			margin: 0;
			flex-grow: 1;
			font-size: 0.95rem;
			line-height: 1.5;
		}

			.cabinet-adresse .icon {
				color: var(--terracotta);
				margin-right: 0.4rem;
			}

		/* Réserver (plein) + Itinéraire (contour) côte à côte, compacts.
		   Se replient l'un sous l'autre si la carte devient trop étroite. */
		.cabinet-actions {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			gap: 0.6rem;
		}

			.cabinet-actions .button {
				padding: 0.55em 1.3em;
				font-size: 0.9rem;
			}

			/* QR itinéraire à côté du bouton — visible au bureau uniquement.
			   Masqué sur tactile (cf. @media (hover: none)) : inutile de scanner son propre écran. */
			.cabinet-qr {
				width: 3.5rem;
				height: auto;
				border-radius: 0.5rem;
			}

/* ==========================================================================
   8. Boutons
   ========================================================================== */

input[type="submit"],
input[type="button"],
button,
.button {
	background-color: var(--terracotta);
	border-radius: 0.4rem;
	letter-spacing: 0.03rem;
}

	input[type="submit"]:hover,
	.button:hover {
		background-color: var(--terracotta-2);
	}

	/* Bouton secondaire (contour clair sur le hero) */
	.button.alt {
		background-color: transparent;
		box-shadow: inset 0 0 0 0.125rem rgba(255, 255, 255, 0.85);
	}

		.button.alt:hover {
			background-color: rgba(255, 255, 255, 0.12);
		}

	/* Bouton secondaire sur fond clair (crème) : contour terracotta, sans fond plein.
	   (≠ .button.alt, qui est le contour BLANC du hero sombre.) Le color !important
	   bat le `color:#fff !important` de Prologue ; background-image:none retire l'overlay. */
	.button.contour {
		background-color: transparent;
		background-image: none;
		color: var(--terracotta) !important;
		box-shadow: inset 0 0 0 0.125rem var(--terracotta);
	}

		.button.contour:hover {
			background-color: var(--terracotta);
			color: #fff !important;
		}

/* Boutons du hero : flex + gap pour un espacement propre côte à côte (desktop)
   ET empilés (mobile) — sinon ils se collent car .button n'a aucune marge. */
#accueil footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
}

/* ==========================================================================
   8b. Formulaire de contact (contact.php)
   Réutilise le style de champ de base de Prologue (main.css) ; on ne fait
   qu'ajouter la mise en page, les labels et recolorer le focus (turquoise → sauge).
   ========================================================================== */

/* Petite feuille décorative après le titre « Écrivez-moi » (hérite la couleur du titre). */
.titre-feuille {
	font-size: 0.7em;
	margin-left: 0.4rem;
}

.formulaire-contact {
	max-width: 40rem;
	margin: 0 auto;
}

	.formulaire-contact label {
		display: block;
		margin-bottom: 0.4rem;
		color: var(--sauge-fonce);
		font-weight: 600;
	}

	.formulaire-contact input[type="text"],
	.formulaire-contact input[type="email"],
	.formulaire-contact textarea {
		margin-bottom: 1rem;
		color: var(--sauge-fonce); /* texte saisi lisible (Prologue le mettait en gris pâle #888) */
		font-weight: 600;          /* Prologue mettait 300 (trop fin) ; seul 300/600 sont chargés (subset perf) */
	}

	/* Halo de focus recoloré (Prologue le posait en turquoise #8ebebc). */
	.formulaire-contact input:focus,
	.formulaire-contact textarea:focus {
		box-shadow: 0 0 0 0.125rem var(--sauge);
	}

	.formulaire-contact .requis {
		color: var(--terracotta);
	}

	/* Case RGPD : case + texte alignés, pas en bloc pleine largeur. */
	.formulaire-contact .consentement {
		display: flex;
		align-items: flex-start;
		gap: 0.6rem;
		font-weight: 400;
		margin-bottom: 1rem;
	}

		.formulaire-contact .consentement input[type="checkbox"] {
			appearance: auto;
			-webkit-appearance: checkbox;
			width: 1.4rem;
			height: 1.4rem;
			margin-top: 0.15rem;
			flex-shrink: 0;
			accent-color: var(--sauge);
			/* Anneau pour garantir le contraste de la case (vide) sur fond crème */
			box-shadow: 0 0 0 0.0625rem var(--sauge);
			border-radius: 0.15rem;
			cursor: pointer;
		}

	.formulaire-contact .formulaire-actions {
		text-align: center;
	}

	/* Honeypot : invisible pour l'humain, présent pour les robots. */
	.hp-champ {
		position: absolute;
		left: -9999px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	/* Erreur sous un champ */
	.formulaire-contact .erreur-champ {
		display: block;
		margin: -1.1rem 0 1.25rem 0;
		color: var(--terracotta);
		font-size: 0.85rem;
	}

/* ── Formulaire contact : 2 étapes ───────────────────────────────────────
   Étape 1 = portrait + choix du lieu ; étape 2 = les champs.
   Progressive enhancement : SANS JS, les 2 étapes s'affichent (formulaire
   simple, le lieu reste obligatoire côté serveur). Le JS (naturo.js) ajoute
   .form-js et ne montre qu'une étape à la fois. */

/* Portrait lierre en tête de l'étape 1 (réduit pour gagner de la hauteur) */
.portrait-contact {
	display: block;
	width: 8.5rem;
	max-width: 45%;
	margin: 0.25rem auto 1.25rem auto;
}

	.portrait-contact img {
		display: block;
		width: 100%;
		height: auto;
	}

/* Avec JS : une seule étape visible à la fois */
.form-js .etape {
	display: none;
}

	.form-js .etape.etape--visible {
		display: block;
		animation: etape-apparait 0.45s ease both;
	}

@keyframes etape-apparait {
	from { opacity: 0; transform: translateY(0.75rem); }
	to   { opacity: 1; transform: none; }
}

/* Question de l'étape 1 */
.etape-question {
	text-align: center;
	font-size: 1.15rem;
	margin-bottom: 1.25rem;
}

/* Grille 2×2 : ligne 1 = St-André | Billère (choix) ; ligne 2 = En visio | Voir sur la carte (action). */
.choix-lieu {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
	margin: 0 auto 0.5rem auto;
	max-width: 36rem;
}

	.lieu-option {
		cursor: pointer;
		display: block;
	}

		/* radio masqué visuellement, toujours accessible au clavier */
		.lieu-option input {
			position: absolute;
			width: 1px;
			height: 1px;
			opacity: 0;
		}

	/* Cabinets (Saint-André, Billère) : pastille PLEINE terracotta, texte blanc. */
	.lieu-pastille {
		display: block;
		padding: 0.85rem 1.4rem;
		border: 0.125rem solid var(--terracotta);
		border-radius: 2rem;
		background-color: var(--terracotta);
		color: #fff;
		font-weight: 600;
		text-align: center;
		transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
	}

	.lieu-option input:hover + .lieu-pastille,
	.lieu-option input:focus-visible + .lieu-pastille {
		background-color: var(--terracotta-2);
		border-color: var(--terracotta-2);
	}

	.lieu-option input:focus-visible + .lieu-pastille {
		outline: 0.125rem solid var(--sauge-fonce);
		outline-offset: 0.125rem;
	}

	.lieu-option input:checked + .lieu-pastille {
		background-color: var(--terracotta-2);
		border-color: var(--terracotta-2);
		box-shadow: 0 0 0 0.2rem rgba(198, 123, 91, 0.35); /* halo de sélection */
	}

	/* « En visio » : CONTOUR terracotta seul, texte terracotta (variante « secondaire »).
	   Placé APRÈS les règles de base (même spécificité) → l'ordre l'emporte. */
	.lieu-pastille--visio {
		background-color: transparent;
		color: var(--terracotta);
	}

	.lieu-option input:hover + .lieu-pastille--visio,
	.lieu-option input:focus-visible + .lieu-pastille--visio {
		background-color: rgba(198, 123, 91, 0.12); /* var(--terracotta) à 12 % */
		border-color: var(--terracotta);
		color: var(--terracotta);
	}

	.lieu-option input:checked + .lieu-pastille--visio {
		background-color: var(--terracotta);
		border-color: var(--terracotta);
		color: #fff;
	}

/* Bouton « Voir sur la carte » : ACTION (déplie l'accordéon), pas un choix de lieu.
   Contour terracotta plein (comme « En visio ») + marqueur pour le distinguer. */
.lieu-carte {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.85rem 1.4rem;
	border: 0.125rem solid var(--terracotta);
	border-radius: 2rem;
	background: transparent;
	background-image: none;                 /* retire l'overlay Prologue sur les <button> */
	color: var(--terracotta) !important;    /* bat le color:#fff !important de Prologue */
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

	.lieu-carte .icon {
		margin: 0;
	}

	.lieu-carte:hover,
	.lieu-carte:focus-visible {
		background-color: rgba(198, 123, 91, 0.10); /* var(--terracotta) à 10 % */
	}

	.lieu-carte:focus-visible {
		outline: 0.125rem solid var(--terracotta);
		outline-offset: 0.125rem;
	}

	.lieu-carte[aria-expanded="true"] {
		background-color: var(--terracotta);
		color: #fff !important;
	}

/* Accordéon adresses des cabinets. Sans JS → visible (fallback + SEO).
   Avec JS (.form-js) → replié, ouvert par le bouton « Voir sur la carte ». */
.cabinets-accordeon {
	margin-top: 1.25rem;
}

	.form-js .cabinets-accordeon {
		max-height: 0;
		margin-top: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease;
	}

	.form-js .cabinets-accordeon.ouvert {
		max-height: 80rem;
		margin-top: 1.25rem;
		opacity: 1;
	}

/* Ligne « Lieu : … ‹ Changer » en tête de l'étape 2 (JS uniquement) */
.lieu-choisi {
	display: none;
	text-align: center;
	margin-bottom: 1.25rem;
	color: var(--sauge-fonce);
}

	.form-js .lieu-choisi {
		display: block;
	}

	.changer-lieu {
		margin-left: 0.5rem;
		font-size: 0.9rem;
		white-space: nowrap;
	}

/* Mobile : boutons empilés (grille sur 1 colonne) */
@media (max-width: 30rem) {
	.choix-lieu {
		grid-template-columns: 1fr;
	}
}

/* Tactile : pas de survol persistant → on rétablit l'état au repos. */
@media (hover: none) {
	/* Cabinets : plein terracotta au repos (pas d'assombrissement au toucher). */
	.lieu-option input:hover + .lieu-pastille {
		background-color: var(--terracotta);
		border-color: var(--terracotta);
	}

		.lieu-option input:checked:hover + .lieu-pastille {
			background-color: var(--terracotta-2);
			border-color: var(--terracotta-2);
		}

	/* Visio : contour au repos. */
	.lieu-option input:hover + .lieu-pastille--visio {
		background-color: transparent;
	}

		.lieu-option input:checked:hover + .lieu-pastille--visio {
			background-color: var(--terracotta);
			border-color: var(--terracotta);
		}

	/* Bouton carte : contour au repos, plein si ouvert. */
	.lieu-carte:hover {
		background-color: transparent;
	}

		.lieu-carte[aria-expanded="true"]:hover {
			background-color: var(--terracotta);
		}
}

/* Mouvement réduit : pas d'animation d'apparition d'étape ni d'accordéon */
@media (prefers-reduced-motion: reduce) {
	.form-js .etape.etape--visible {
		animation: none;
	}

	.form-js .cabinets-accordeon {
		transition: none;
	}
}

/* Bandeau de message (succès / erreur) au-dessus du formulaire */
.form-message {
	max-width: 40rem;
	margin: 0 auto 1.5rem auto;
	padding: 1rem 1.25rem;
	border-radius: 0.4rem;
	color: var(--sauge-fonce);
}

	.form-message.succes {
		background-color: rgba(125, 155, 118, 0.15);
		border-left: 0.25rem solid var(--sauge);
	}

	.form-message.erreur {
		background-color: rgba(198, 123, 91, 0.12);
		border-left: 0.25rem solid var(--terracotta);
	}

/* ==========================================================================
   9. Footer
   ========================================================================== */

#footer {
	background-color: var(--sauge-fonce);
	color: rgba(255, 255, 255, 0.8);
}

	/* Avertissement santé (footer, toutes pages) */
	.footer-avertissement {
		max-width: 46rem;
		margin: 0 auto 1.5rem auto;
		font-size: 0.8rem;
		line-height: 1.6;
		color: rgba(255, 255, 255, 0.5);
	}

	#footer .icons a {
		color: rgba(255, 255, 255, 0.7);
	}

		#footer .icons a:hover {
			color: #fff;
		}

	#footer .copyright li {
		color: rgba(255, 255, 255, 0.6);
	}

		#footer .copyright a {
			color: rgba(255, 255, 255, 0.85);
		}

	/* Partenaires / présence externe (citation SEO discrète). */
	#footer .partenaires {
		list-style: none;
		padding: 0;
		margin: 0 auto 1.25rem auto;
		font-size: 0.8rem;
		color: rgba(255, 255, 255, 0.5);
	}

		#footer .partenaires a {
			color: rgba(255, 255, 255, 0.75);
		}

/* ==========================================================================
   10. Pages légales
   ========================================================================== */

.contenu-legal {
	max-width: 48rem;
	margin: 0 auto;
	text-align: left;
}

	.contenu-legal h2 {
		font-size: 1.4rem;
		margin: 2rem 0 0.5rem 0;
	}

	.contenu-legal p,
	.contenu-legal li {
		color: var(--texte-clair);
	}

	.contenu-legal a {
		color: var(--terracotta);
	}

/* ==========================================================================
   11. Reveal au scroll (piloté par assets/js/naturo.js)
   La classe .reveal-on est posée sur <html> par le JS : sans JS (ou en
   mouvement réduit), rien n'est caché.
   ========================================================================== */

.reveal-on .reveal {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* ==========================================================================
   12. Responsive
   ========================================================================== */

/* Cartes : 2 colonnes en tablette (6 cartes = 3 rangées de 2) */
@media screen and (max-width: 980px) {

	/* Hero : remonter le bloc texte+boutons sur tablette/mobile.
	   Prologue prévoyait ~5em ici, mais notre override 8em (section 4) le figeait. */
	#main > section.one.cover {
		padding: 4em 0;
	}

	.cartes {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media screen and (max-width: 736px) {

	/* Mobile (sm) : hero plein écran comme desktop. min-height (grandit si le
	   contenu dépasse) + centrage vertical. dvh gère la barre d'URL mobile. */
	#main > section.one {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100dvh;
	}

	#main header h1,
	#main header h2 {
		font-size: 2rem;
	}

	/* Cartes : empilées en mobile */
	.cartes {
		grid-template-columns: 1fr;
	}

	.cabinets {
		grid-template-columns: 1fr;
	}

	.coordonnees {
		text-align: center;
	}

	.tarif-note {
		text-align: center;
	}

}

/* Pas d'effet de survol sur tactile */
@media (hover: none) {

	/* QR itinéraire : inutile sur mobile/tablette (on ne scanne pas son propre écran). */
	.cabinet-qr {
		display: none;
	}

	.carte:hover {
		transform: none;
		box-shadow: var(--ombre);
	}

	.carte:hover .carte-icone {
		background: var(--sauge);
	}

}