/* MD Studio — thème enfant Kadence : polices, palette, finitions */

/* ---------------------------------------------- Polices auto-hébergées */
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/jost-400.woff2") format("woff2");
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/jost-500.woff2") format("woff2");
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/jost-600.woff2") format("woff2");
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-500.woff2") format("woff2");
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-600.woff2") format("woff2");
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-700.woff2") format("woff2");
}

/* ---------------------------------------------- Variables Kadence : palette + typo */
:root {
	--global-body-font-family: "Jost", sans-serif !important;
	--global-heading-font-family: "Cormorant Garamond", serif !important;

	--global-palette1: #c9a66b !important; /* accent principal (était bleu) */
	--global-palette2: #a9854f !important; /* accent secondaire / hover */
	--global-palette3: #3a2e2a !important; /* texte fort / titres */
	--global-palette4: #4a3a34 !important;
	--global-palette5: #6b5d56 !important; /* texte courant */
	--global-palette6: #a89890 !important; /* texte discret */
	--global-palette7: #ede1d3 !important; /* fond beige */
	--global-palette8: #faf6f0 !important; /* fond crème */
	--global-palette9: #ffffff !important;
}

body {
	color: var(--global-palette5);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	color: var(--global-palette3);
}

html {
	scroll-behavior: smooth;
}

/* ---------------------------------------------- Header collant + flou */
.site-header {
	position: sticky !important;
	top: 0 !important;
	z-index: 200 !important;
	background: rgba(250, 246, 240, 0.9) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 4px 20px rgba(58, 46, 42, 0.06);
}

/* ---------------------------------------------- Boutons CTA dans le menu */
.menu-cta {
	margin-left: 12px !important;
}

.menu-cta > a {
	display: inline-flex !important;
	align-items: center;
	padding: 10px 24px !important;
	border-radius: 999px !important;
	font-size: 0.85rem !important;
	font-weight: 500;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ---------------------------------------------- Supprime l'espace blanc entre le header/footer et les sections pleine largeur (toutes les pages) */
.content-area {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.entry-content-wrap {
	padding: 0 !important;
}

.entry.single-entry {
	box-shadow: none !important;
}

/* #c9a66b/#a9854f fail 4.5:1 contrast with white text (WCAG AA) — darker bronze
   pair used here instead, wherever this gold gradient pairs with white text. */
.menu-cta-solid > a {
	background: linear-gradient(135deg, #6b5030, #4a3720) !important;
	color: #ffffff !important;
	box-shadow: 0 12px 30px rgba(58, 46, 42, 0.12);
}

.menu-cta-solid > a {
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.menu-cta-solid > a:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 38px rgba(58, 46, 42, 0.18);
	filter: brightness(0.92);
}

.menu-cta-outline > a {
	border: 1px solid var(--global-palette3);
	color: var(--global-palette3) !important;
	background: transparent !important;
}

.menu-cta-outline > a:hover {
	background: #6b5030 !important;
	border-color: #6b5030 !important;
	color: #ffffff !important;
}

/* Menu mobile (tiroir) : les CTA s'empilent verticalement mais gardaient le
   margin-left pensé pour l'espacement horizontal du menu desktop — sans
   marge verticale, "Carte cadeau" et "Prendre RDV" se touchaient/semblaient
   se chevaucher. */
.drawer-navigation .menu-cta {
	margin-left: 0 !important;
	margin-top: 16px !important;
}

/* Menu mobile (tiroir sombre) : le bouton "Carte cadeau" en contour brun foncé est illisible sur ce fond ; on l'éclaircit.
   Retour client : le contour semblait discontinu — Kadence applique par défaut une ligne de
   séparation entre liens du tiroir (border-bottom: 1px solid rgba(255,255,255,0.1), quasi
   invisible) via un sélecteur plus spécifique que le nôtre, qui écrasait donc uniquement le
   bas du contour. border-color seul (sans !important) perdait ce bras de fer sur ce côté ;
   le border complet en !important force les 4 côtés à rester identiques. */
.drawer-navigation .menu-cta-outline > a {
	border: 1.5px solid #ede1d3 !important;
	color: #ede1d3 !important;
}

.drawer-navigation .menu-cta-outline > a:hover {
	background: #ede1d3 !important;
	color: #3a2e2a !important;
}

/* ---------------------------------------------- Boutons de contenu (Gutenberg) */
.wp-block-button__link {
	border-radius: 999px !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	box-shadow: 0 12px 34px rgba(58, 46, 42, 0.09);
	font-weight: 500;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 45px rgba(58, 46, 42, 0.16);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link[style*="c9a66b"] {
	background: linear-gradient(135deg, #6b5030, #4a3720) !important;
}

/* Bouton plein (fond uni) : l'assombrissement au survol rend l'effet plus visible que le seul décalage/ombre */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	filter: brightness(0.92);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #6b5030 !important;
	color: #ffffff !important;
	border-color: #6b5030 !important;
	box-shadow: none;
}

.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link,
.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link {
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(6px);
}

/* Bouton contour à texte blanc (destiné à un fond sombre, quel que soit le conteneur : cover, carte
   brune...) : on inverse vers un bouton blanc plein au survol plutôt que de se fier à la classe du
   conteneur parent, pour ne pas en oublier un. Le "!important" sur les 3 propriétés est nécessaire
   pour qu'elles l'emportent ENSEMBLE sur la règle générique ci-dessus (sinon fond et texte peuvent
   venir de deux règles différentes et finir de la même teinte foncée, rendant le texte illisible). */
.wp-block-button.is-style-outline .wp-block-button__link[style*="color:#ffffff"]:hover {
	background: #ffffff !important;
	color: #3a2e2a !important;
	border-color: #ffffff !important;
}

/* ---------------------------------------------- Supprime tout espace/saut de couleur entre les sections pleine largeur */
.entry-content > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Accueil : section "Questions fréquentes" — contrairement aux autres sections
   de la page, elle n'a pas de fond de couleur qui l'enveloppe ; elle compte
   sur sa propre marge (80px) pour respirer. La règle ci-dessus, pensée pour
   les sections pleine largeur, écrasait aussi cette marge et collait le bloc
   à la section précédente. */
.entry-content > .wp-block-group:has(.wp-block-details) {
	margin-top: 80px !important;
	margin-bottom: 80px !important;
}

/* ---------------------------------------------- Page Tarifs : lignes de prix, l'espacement par défaut entre blocs (32px) s'ajoutait à leur propre padding et créait un espace excessif */
.entry-content .is-content-justification-space-between.is-layout-flex {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Le paragraphe de gauche (nom + sous-titre) gardait une marge basse par défaut (32px) que celui
   du prix (à droite) n'avait pas : l'alignement vertical "center" du flex en était faussé. */
.entry-content .is-content-justification-space-between.is-layout-flex > p {
	margin: 0 !important;
}

/* Page Tarifs (page-id-8) : lignes de prix et titres de catégories encore un peu trop espacés */
.page-id-8 .is-content-justification-space-between.is-layout-flex {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

.page-id-8 .entry-content h3.wp-block-heading {
	margin-top: 36px !important;
}

/* Page À propos (page-id-11) : colonne image (portrait, plus haute) vs colonne texte (plus courte) —
   l'alignement vertical "center" créait un grand vide au-dessus et en dessous du texte.
   Le align-items:flex-start seul ne suffit pas : Gutenberg pose aussi
   align-self:center sur CHAQUE colonne (classe is-vertically-aligned-center),
   qui prime sur le align-items du parent — il faut aussi le réinitialiser
   sur les colonnes elles-mêmes (mesuré : 173px d'écart réel malgré la règle
   sur le parent seul). */
.page-id-11 .wp-block-columns.are-vertically-aligned-center {
	align-items: flex-start !important;
}

.page-id-11 .wp-block-columns.are-vertically-aligned-center > .wp-block-column.is-vertically-aligned-center {
	align-self: flex-start !important;
}

/* Page Prestations (page-id-7) : retour client "disposé bizarrement, pas de
   logique". Deux causes :
   1) Même souci qu'À propos ci-dessus : align-self:center par colonne fait
      démarrer le texte plus bas que l'image dès que les deux n'ont pas
      exactement la même hauteur (ex. Cryolipolyse, ~23px d'écart mesuré) —
      les 3 sections n'étaient donc pas alignées entre elles.
   2) En dessous de 782px (repli WordPress des colonnes en une seule
      colonne), l'ordre suit le HTML : les 3 sections alternent texte-puis-
      image / image-puis-texte pour l'effet zigzag du desktop, ce qui donne
      un ordre de lecture incohérent une fois empilé. On force l'image
      systématiquement en premier, quel que soit son ordre dans le contenu. */
.page-id-7 .wp-block-columns.are-vertically-aligned-center {
	align-items: flex-start !important;
}

.page-id-7 .wp-block-columns.are-vertically-aligned-center > .wp-block-column.is-vertically-aligned-center {
	align-self: flex-start !important;
}

@media (max-width: 781px) {
	.page-id-7 .wp-block-columns > .wp-block-column:has(.wp-block-image) {
		order: -1;
	}
}

/* Page Carte cadeau (page-id-10), section "Comment ça marche" : la marge par
   défaut des blocs WordPress (~32px sous le gros chiffre + ~28px au-dessus du
   titre, qui se chevauchent en ~32px de vide) rendait les 3 étapes trop
   aérées pour un module aussi compact. Resserré à 4px de chaque côté. */
.page-id-10 .gc-step p:first-child {
	margin-bottom: 4px !important;
}

.page-id-10 .gc-step h3 {
	margin-top: 4px !important;
}

/* ---------------------------------------------- Cartes de soins (alignement + finitions) */
.wp-block-columns {
	align-items: stretch !important;
}

.wp-block-column {
	display: flex !important;
	flex-direction: column !important;
}

.wp-block-column > .wp-block-group.has-background {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 0 12px 34px rgba(58, 46, 42, 0.09);
	display: flex !important;
	flex-direction: column;
	width: 100%;
	flex: 1;
}

.wp-block-column > .wp-block-group.has-background:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 45px rgba(58, 46, 42, 0.14);
}

.wp-block-column > .wp-block-group.has-background .wp-block-image img {
	height: 220px;
	object-fit: cover;
	width: 100%;
}

/* WordPress enveloppe chaque groupe dans un .wp-block-group__inner-container :
   il faut propager le flex sur toute la chaîne pour que le bouton se pousse en bas. */
.wp-block-column > .wp-block-group.has-background > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.wp-block-column > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.wp-block-column > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block-group > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.wp-block-column > .wp-block-group.has-background .wp-block-buttons {
	margin-top: auto;
	padding-top: 14px;
}

/* ---------------------------------------------- FAQ (bloc Détails) */
.wp-block-details {
	border-bottom: 1px solid rgba(58, 46, 42, 0.12);
	padding: 4px 0;
}

.wp-block-details summary {
	cursor: pointer;
	padding: 18px 4px;
	font-family: "Cormorant Garamond", serif;
	font-size: 1.15rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	font-size: 1.4rem;
	color: var(--global-palette2);
	margin-left: 16px;
	flex-shrink: 0;
}

.wp-block-details[open] summary::after {
	content: "\2013";
}

/* ---------------------------------------------- Bandeau CTA final + hero */
.has-contrast-background-color.wp-block-group {
	background: linear-gradient(135deg, #3a2e2a, #4a3a34) !important;
}

.wp-block-cover .wp-block-cover__background.has-contrast-background-color {
	background: linear-gradient(120deg, rgba(30, 22, 20, 0.72), rgba(30, 22, 20, 0.42)) !important;
	opacity: 1 !important;
}

/* ---------------------------------------------- Formulaire de contact (Contact Form 7) */
.wpcf7-form p {
	margin-bottom: 16px;
}

.wpcf7-form label {
	display: block;
	font-size: 0.85rem;
	font-weight: 500;
	color: #3a2e2a;
	margin-bottom: 6px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	padding: 13px 15px;
	border-radius: 8px;
	border: 1.5px solid rgba(58, 46, 42, 0.16);
	background: #faf6f0;
	font-family: "Jost", sans-serif;
	font-size: 0.95rem;
	color: #3a2e2a;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: #c9a66b;
}

.wpcf7-form .gc-form-row-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 600px) {
	.wpcf7-form .gc-form-row-cols {
		grid-template-columns: 1fr;
	}
}

.gc-step {
	text-align: center;
}

.wpcf7-form textarea {
	min-height: 120px;
	resize: vertical;
}

.wpcf7-form .wpcf7-submit {
	background: linear-gradient(135deg, #6b5030, #4a3720);
	color: #ffffff;
	border: none;
	border-radius: 999px;
	padding: 13px 32px;
	font-family: "Jost", sans-serif;
	font-weight: 500;
	font-size: 0.95rem;
	cursor: pointer;
	box-shadow: 0 12px 34px rgba(58, 46, 42, 0.12);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7-form .wpcf7-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px rgba(58, 46, 42, 0.18);
}

/* ---------------------------------------------- Carte cadeau : paiement Stripe */
.gc-banner {
	border-radius: 12px;
	padding: 14px 18px;
	font-size: 0.9rem;
	margin-bottom: 20px;
	text-align: center;
}

.gc-banner-success {
	background: #e9f2e4;
	color: #3d5c33;
}

.gc-banner-cancel {
	background: #f6e9e4;
	color: #7a4632;
}

.gc-stripe-widget .gc-label {
	font-family: "Jost", sans-serif;
	font-size: 0.85rem;
	color: #6b5d56;
	margin: 0 0 8px;
	text-align: center;
}

.gc-amounts {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.gc-amount-btn {
	font-family: "Jost", sans-serif;
	font-size: 0.95rem;
	font-weight: 500;
	color: #3a2e2a;
	background: #ffffff;
	border: 1px solid #e5dcd0;
	border-radius: 999px;
	padding: 10px 24px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.gc-amount-btn:hover {
	border-color: #d9c3a0;
}

.gc-amount-btn.is-selected {
	background: #d9c3a0;
	border-color: #d9c3a0;
	color: #3a2e2a;
}

.gc-stripe-widget .gc-input {
	display: block;
	width: 100%;
	font-family: "Jost", sans-serif;
	font-size: 0.95rem;
	color: #3a2e2a;
	background: #ffffff;
	border: 1px solid #e5dcd0;
	border-radius: 10px;
	padding: 12px 16px;
	margin-bottom: 14px;
	box-sizing: border-box;
}

.gc-stripe-widget .gc-input:focus {
	outline: none;
	border-color: #d9c3a0;
}

.gc-stripe-widget textarea.gc-input {
	resize: vertical;
	min-height: 90px;
}

.gc-payment-element {
	margin-bottom: 16px;
}

/* Page Tarifs : grille de cartes pour l'épilation laser (même langage visuel
   que les cartes de packs), plus percutante que la simple liste de lignes. */
.tarifs-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
	margin-top: 20px;
}

.tarifs-card {
	background: #faf6f0;
	border: 1px solid #e0d6c8;
	border-radius: 14px;
	padding: 20px;
}

.tarifs-card-name {
	font-weight: 600;
	color: #3a2e2a;
	margin-bottom: 4px;
}

.tarifs-card-duration {
	color: #6b5d56;
	font-size: 0.82rem;
	margin-bottom: 14px;
}

.tarifs-card-price {
	color: #6b5030;
	font-size: 1.3rem;
	font-weight: 600;
}

/* Widget Amelia : note affichée dans la barre latérale quand un pack
   Cryolipolyse + Drainage est sélectionné (voir pack-note.js) */
.mdstudio-pack-note {
	font-size: 11px !important;
	font-style: italic !important;
	color: #6b5030 !important;
	margin: 2px 0 0 !important;
	line-height: 14px !important;
}

/* Page de confirmation Amelia : masque le numéro interne de rendez-vous
   (ex. "#7") — une cliente n'a pas à voir cette référence, et un chiffre bas
   n'est pas vendeur. Sélecteur sûr : c'est le seul <span> enfant direct de
   .am-fs__congrats-main (le bouton "Ajouter au calendrier" est une <div>). */
.am-fs__congrats-main > span {
	display: none !important;
}

.gc-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.85rem;
	color: #6b5d56;
	margin-bottom: 14px;
	cursor: pointer;
}

.gc-consent input {
	margin-top: 3px;
}

.gc-consent a {
	color: #6b5030;
	text-decoration: underline;
}

.gc-error {
	color: #b23b3b;
	font-size: 0.85rem;
	text-align: center;
	margin: 0 0 14px;
}

.gc-pay-button {
	display: block;
	width: 100%;
	background: linear-gradient(135deg, #6b5030, #4a3720);
	color: #ffffff;
	border: none;
	border-radius: 999px;
	padding: 13px 32px;
	font-family: "Jost", sans-serif;
	font-weight: 500;
	font-size: 0.95rem;
	cursor: pointer;
	box-shadow: 0 12px 34px rgba(58, 46, 42, 0.12);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gc-pay-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px rgba(58, 46, 42, 0.18);
}

.gc-pay-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* ---------------------------------------------- Logo : le texte du titre fait doublon avec le logo image */
.site-header .site-title,
.site-header .site-tagline {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.brand.has-logo-image {
	display: flex;
	align-items: center;
	height: 100%;
}

.custom-logo,
.custom-logo-link,
.custom-logo-link img {
	max-height: 78px !important;
	height: 100% !important;
	width: auto !important;
}

/* Desktop : le logo touchait quasiment le haut et le bas du header (0 padding
   par défaut chez Kadence pour un header de 80px avec un logo de 78px). On
   ajoute un peu d'air, comme c'est déjà le cas sur tablette/mobile ci-dessous. */
.site-header .container,
.site-header .site-header-row-container-inner {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

/* En-tête plus compact sur tablette/mobile, logo toujours sur toute la hauteur disponible.
   Retour client : à 60px/52px le logo laissait un vide visible au-dessus/en dessous — le
   header garde la même hauteur (92px, padding 6+6 inclus) de 1024px jusqu'au plus petit
   mobile, donc une seule valeur (80px, comme le ratio quasi plein du logo desktop) suffit
   pour les deux paliers au lieu de le réduire une seconde fois sous 600px. */
@media (max-width: 1024px) {
	.site-header .container,
	.site-header .site-header-row-container-inner {
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}

	.custom-logo,
	.custom-logo-link,
	.custom-logo-link img {
		max-height: 80px !important;
	}
}

/* ---------------------------------------------- Corrige le calcul "wide" de Kadence qui pousse le contenu à gauche */
.entry-content .alignwide {
	max-width: 1200px !important;
	width: calc(100% - 48px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (max-width: 600px) {
	.entry-content .alignwide {
		width: calc(100% - 32px) !important;
	}
}

/* ---------------------------------------------- Réduit l'espace vide ajouté par le widget Amelia */
#amelia-container {
	margin-bottom: 20px !important;
}

/* ---------------------------------------------- Personnalisation des couleurs du widget Amelia (palette du site)
   Beige clair (#d9c3a0) remplace l'ancien or saturé (#c9a66b) pour les fonds/remplissages ;
   un brun-doré plus soutenu (#8a6d3f) sert de couleur de texte lisible sur fond blanc.
   Portée sur :root en plus de #amelia-container car Element Plus téléporte ses menus déroulants
   (cascader, etc.) directement en enfants de <body>, hors de l'arbre DOM d'#amelia-container :
   un sélecteur scopé à #amelia-container ne les atteint donc jamais. */
:root,
#amelia-container {
	--am-c-primary: #d9c3a0 !important;
	--am-c-btn-prim: #d9c3a0 !important;
	--am-c-btn-prim-text: #3a2e2a !important;
	--am-c-btn-sec: #ede1d3 !important;
	--am-c-btn-sec-text: #3a2e2a !important;
	--am-c-main-bgr: #ffffff !important;
	--am-c-main-text: #6b5d56 !important;
	--am-c-main-heading-text: #3a2e2a !important;
	/* Retour client : le panneau latéral (étapes de réservation) était trop
	   sombre (--am-c-sb-bgr en ink #3a2e2a). Éclairci vers le beige du site ;
	   le texte passe donc du blanc à l'ink pour rester lisible sur ce fond clair. */
	--am-c-sb-bgr: #ede1d3 !important;
	--am-c-sb-text: #3a2e2a !important;
	--am-c-select-bgr: #faf6f0 !important;
	--am-c-input-bgr: #faf6f0 !important;
	--am-c-input-border: #e5dcd0 !important;
	--am-c-inp-bgr: #faf6f0 !important;
	--am-c-inp-border: #e5dcd0 !important;
	--am-c-dpicker-bgr: #faf6f0 !important;
	--am-c-dpicker-border: #e5dcd0 !important;
	--am-c-timeselect-bgr: #faf6f0 !important;
	--am-c-timeselect-option-bgr: #faf6f0 !important;
	--am-c-radio-bgr: #d9c3a0 !important;
	--am-c-checkbox-bgr-checked: #d9c3a0 !important;
	--am-brad-main: 10px !important;
	--am-brad-main-default: 999px !important;
	--am-font-family: "Jost", sans-serif !important;

	/* Toutes les variantes "primary/selected" trouvées dans le widget */
	--am-c-advs-item-selected: #8a6d3f !important;
	--am-c-csm-primary: #d9c3a0 !important;
	--am-c-fcil-primary: #d9c3a0 !important;
	--am-c-fcip-primary: #d9c3a0 !important;
	--am-c-fcis-primary: #d9c3a0 !important;
	--am-c-fcl-primary: #d9c3a0 !important;
	--am-c-pso-primary: #d9c3a0 !important;
	--am-c-pas-text: #3a2e2a !important;
	--am-c-ro-text: #3a2e2a !important;

	/* Element Plus (bibliothèque UI sous-jacente, utilisée par les menus déroulants) : couleur de base + teintes dérivées */
	--el-color-primary: #8a6d3f !important;
	--el-color-primary-light-3: rgb(173, 153, 121) !important;
	--el-color-primary-light-5: rgb(197, 182, 159) !important;
	--el-color-primary-light-7: rgb(220, 211, 197) !important;
	--el-color-primary-light-8: rgb(232, 226, 217) !important;
	--el-color-primary-light-9: rgb(243, 240, 236) !important;
	--el-color-primary-dark-2: #6e5731 !important;
	--el-datepicker-active-color: #8a6d3f !important;
	--el-datepicker-hover-text-color: #8a6d3f !important;
	--el-datepicker-inrange-bg-color: #f2ece0 !important;
	--el-datepicker-inrange-hover-bg-color: #ede1d3 !important;
	--el-switch-on-color: #d9c3a0 !important;
	--el-cascader-node-background-hover: #f7f0e4 !important;
	--el-button-outline-color: rgba(217, 195, 160, 0.5) !important;
	--el-pagination-hover-color: #8a6d3f !important;
}

/* Boutons (Continuer, etc.) : chaque bouton reçoit ses propres variables en style inline
   (posées par Vue sur l'élément lui-même), un override sur un ancêtre ne suffit pas — on cible
   directement la classe .am-button, présente sur ce même élément, avec !important. */
#amelia-container .am-button {
	--am-c-btn-first: #d9c3a0 !important;
	--am-c-btn-second: #3a2e2a !important;
	--am-c-btn-first-op80: rgba(217, 195, 160, 0.8) !important;
	--am-c-btn-first-op30: rgba(217, 195, 160, 0.35) !important;
	--am-c-btn-first-op20: rgba(217, 195, 160, 0.22) !important;
	--am-c-btn-first-darken30: #988971 !important;
}

/* Panneau latéral (étapes) : mêmes raisons qu'au-dessus — Vue recalcule
   --am-c-sb-text-op5/10/60 en style inline sur .am-fs-sb (toujours basées sur
   l'ancien blanc), donc l'override sur #amelia-container seul ne les atteint
   pas. On cible .am-fs-sb directement pour que "Prenez contact" et la bordure
   des puces d'étape restent lisibles sur le nouveau fond clair. */
#amelia-container .am-fs-sb {
	--am-c-sb-text-op5: rgba(58, 46, 42, 0.05) !important;
	--am-c-sb-text-op10: rgba(58, 46, 42, 0.12) !important;
	/* 0.6 (Amelia's own ratio) blended over the light beige only reaches ~3.4:1;
	   bumped to 0.75 so the "Prenez contact" label clears 4.5:1 (WCAG AA). */
	--am-c-sb-text-op60: rgba(58, 46, 42, 0.75) !important;
}

/* Liste déroulante "Sélectionnez le service" : prix + libellé sélectionné, en style inline eux aussi.
   Ce menu est téléporté par Element Plus en enfant direct de <body> (hors d'#amelia-container),
   donc pas de préfixe #amelia-container ici — la classe .am-adv-select__item suffit et n'existe
   nulle part ailleurs sur le site. */
.am-adv-select__item {
	--am-c-advs-item-price: #8a6d3f !important;
	--am-c-advs-item-price-op10: rgba(138, 109, 63, 0.1) !important;
	--am-c-advs-item-selected: #8a6d3f !important;
}

/* Barre de défilement du panneau de réservation, encore bleue par défaut */
#amelia-container .am-fs__main {
	--am-c-scroll-op30: rgba(58, 46, 42, 0.25) !important;
	--am-c-scroll-op10: rgba(58, 46, 42, 0.1) !important;
}

/* ---------------------------------------------- Récapitulatif / paiement : montant total, encore bleu par défaut (--am-c-pay-*, style inline sur .am-fs__payments-wrapper) */
#amelia-container .am-fs__payments-wrapper {
	--am-c-pay-primary: #3a2e2a !important;
	--am-c-pay-success: #6b8f5a !important;
}

/* Certains éléments Amelia utilisent des couleurs fixes plutôt que les variables : on force au cas par cas */
#amelia-container [class*="am-"][style*="265cf2" i],
#amelia-container [class*="am-"][style*="265CF2"] {
	background-color: #d9c3a0 !important;
}

/* Retour client : le fond du calendrier (étape "Date et heure") récupère la
   même couleur que la règle générique ci-dessus et ressort trop soutenu pour
   cette étape en particulier. Sélecteur renforcé (mêmes attributs + la classe
   du conteneur du calendrier) pour l'emporter sur la règle générique sans la
   modifier globalement — les autres éléments qui partagent cette détection
   du bleu par défaut d'Amelia gardent #d9c3a0. */
#amelia-container [class*="am-"][style*="265cf2" i].am-advsc__wrapper,
#amelia-container [class*="am-"][style*="265CF2"].am-advsc__wrapper {
	background-color: #faf6f0 !important;
}

#amelia-container .el-radio__input.is-checked .el-radio__inner,
#amelia-container .el-checkbox__input.is-checked .el-checkbox__inner,
#amelia-container .el-radio__input.is-checked + .el-radio__label,
#amelia-container .el-date-table td.current:not(.disabled) span,
#amelia-container .el-date-table td.today span,
#amelia-container .is-active {
	background-color: #d9c3a0 !important;
	border-color: #d9c3a0 !important;
	color: inherit;
}

#amelia-container a:not(.fc-daygrid-day-number) {
	background-color: transparent !important;
	color: #8a6d3f !important;
}

/* ---------------------------------------------- Calendrier "Date et heure" (FullCalendar / am-advsc) : le composant reçoit ses couleurs en style inline (variables --am-c-cal-*), toujours bleues par défaut. On les remplace ici (un !important en feuille de style l'emporte sur un style inline non-important). */
#amelia-container .am-advsc__wrapper,
#amelia-container .am-advsc {
	--am-c-cal-indicator: hidden !important;

	/* Jour disponible (par défaut) */
	--am-c-cal-init: #d9c3a0 !important;
	--am-c-cal-init-text: #8a6d3f !important;
	--am-c-cal-init-op10: rgba(217, 195, 160, 0.16) !important;
	--am-c-cal-init-op20: rgba(217, 195, 160, 0.25) !important;
	--am-c-cal-init-op30: rgba(217, 195, 160, 0.35) !important;
	--am-c-cal-init-op60: rgba(217, 195, 160, 0.6) !important;

	/* Jour / créneau sélectionné */
	--am-c-cal-selected: #3a2e2a !important;
	--am-c-cal-selected-text: #ffffff !important;
	--am-c-cal-selected-op80: rgba(58, 46, 42, 0.85) !important;

	/* Jour indisponible */
	--am-c-cal-disabled: rgba(107, 93, 86, 0.06) !important;
	--am-c-cal-disabled-text: #b3a89f !important;
	--am-c-cal-disabled-op10: rgba(107, 93, 86, 0.08) !important;
	--am-c-cal-disabled-op60: rgba(107, 93, 86, 0.3) !important;

	/* Forte / faible affluence (indicateur masqué, mais on neutralise quand même le bleu) */
	--am-c-cal-low: #d9c3a0 !important;
	--am-c-cal-low-text: #8a6d3f !important;
	--am-c-cal-low-op10: rgba(217, 195, 160, 0.16) !important;
	--am-c-cal-low-op20: rgba(217, 195, 160, 0.25) !important;
	--am-c-cal-low-op30: rgba(217, 195, 160, 0.35) !important;
	--am-c-cal-low-op60: rgba(217, 195, 160, 0.6) !important;
	--am-c-cal-low-op80: rgba(217, 195, 160, 0.75) !important;
	--am-c-cal-high: #d9c3a0 !important;
	--am-c-cal-high-text: #8a6d3f !important;
	--am-c-cal-high-op10: rgba(217, 195, 160, 0.16) !important;
	--am-c-cal-high-op20: rgba(217, 195, 160, 0.25) !important;
	--am-c-cal-high-op30: rgba(217, 195, 160, 0.35) !important;
	--am-c-cal-high-op60: rgba(217, 195, 160, 0.6) !important;
	--am-c-cal-high-op80: rgba(217, 195, 160, 0.75) !important;

	/* Créneau en liste d'attente */
	--am-c-cal-waiting: rgba(107, 93, 86, 0.06) !important;
	--am-c-cal-waiting-text: #6b5d56 !important;
	--am-c-cal-waiting-op40: rgba(107, 93, 86, 0.25) !important;
}

/* ---------------------------------------------- Icône du menu mobile (3 barres) trop petite */
@media (max-width: 1024px) {
	.menu-toggle-open {
		padding: 0.5em !important;
	}

	.menu-toggle-open .kadence-menu-svg,
	.menu-toggle-open svg {
		width: 30px !important;
		height: 30px !important;
	}
}