/**
 * Socle couleur — rampe « T4 », dérivée du turquoise historique #5ebaa9.
 *
 * Le gros du travail se fait DANS LES RÉGLAGES FLATSOME (Customizer), pas ici :
 * le thème génère un `#custom-css` en ligne qui pose --fs-color-primary et
 * --fs-color-secondary à la racine, et tous ses composants en découlent.
 * Écraser ça en CSS reviendrait à se battre en spécificité contre une balise
 * <style> en ligne, qui gagne toujours à spécificité égale.
 *
 * Réglages posés (préprod, 2026-10-07) :
 *   color_primary   #5ebaa9 -> #1C6B5C   boutons, 5,9:1 avec du blanc
 *   color_secondary #f58e8e -> #A8403D   actions secondaires, 5,2:1
 *   color_links     #3e8268 -> #10564A   liens, 7,6:1
 *   nav_position_bg #5ebaa9 -> #BFE0D8   bandeau clair, encre foncée dessus
 *   footer_1/2_bg   #5ebaa9 -> #1C6B5C   le pied portait du blanc à 2,31:1
 * Valeurs d'origine sauvegardées : ~/tmp-maelia-sync/thememods-avant-T4.json
 *
 * Ce fichier ne garde que ce que Flatsome n'exprime pas.
 * Direction : .impeccable/surfaces/wp-content-themes-flatsome-child.md
 */

:root {
	/* Rampe turquoise */
	--maelia-ink:          #0E3B33; /* titres, texte fort — 13:1 sur blanc */
	--maelia-teal-600:     #1C6B5C; /* surfaces à texte blanc — 5,9:1 */
	--maelia-teal-500:     #10564A; /* liens sur fond clair — 7,6:1 */
	--maelia-teal-300:     #BFE0D8; /* bandeau clair */
	--maelia-teal-200:     #E2F0EB; /* bandes secondaires */
	--maelia-teal-100:     #F4FAF8; /* fond de page */
	--maelia-teal-decor:   #5EBAA9; /* HISTORIQUE — filets et aplats seulement,
	                                   jamais sous du texte blanc */

	/* Neutres */
	--maelia-surface:      #ffffff;
	--maelia-muted:        #4A635B; /* texte secondaire — 6,4:1 sur blanc */
	--maelia-hairline:     #D4E7E1;

	/* Accent — dérivé du corail historique #f58e8e */
	--maelia-stamp:        #A8403D; /* date « prêt le », alertes — 5,2:1 */

	--maelia-radius:       3px;
	--maelia-rule:         2px;
}

/* ---------------------------------------------------------------------------
 * Ce que le Customizer ne couvre pas
 * ------------------------------------------------------------------------- */

/* État actif du menu : il était marqué par du #ffeb00 sur turquoise, soit
   1,89:1. Sur le bandeau clair, on le marque par un soulignement — une forme,
   pas une couleur, donc lisible quel que soit le fond. */
.header-bottom .nav > li.active > a,
.header-bottom .nav > li.current-menu-item > a {
	box-shadow: inset 0 -2px 0 0 var(--maelia-ink);
}

/* « Ajouter au panier » est l'action principale du site. Flatsome la mappe sur
   sa couleur secondaire, ce qui la peignait en rouge sombre — une couleur
   d'alerte pour un geste d'achat, et une deuxième couleur pour l'action que la
   grille catalogue affiche déjà en turquoise. Une action, une couleur. */
.single_add_to_cart_button,
.single_add_to_cart_button.button.alt {
	background-color: var(--maelia-teal-600);
	border-color: var(--maelia-teal-600);
	color: #ffffff;
}

.single_add_to_cart_button:hover,
.single_add_to_cart_button.button.alt:hover {
	background-color: var(--maelia-ink);
	border-color: var(--maelia-ink);
}

/* Prix : #777 plafonnait à 4,48:1, juste sous le seuil AA. */
.woocommerce-Price-amount,
.price,
span.amount {
	color: var(--maelia-ink);
}

del,
del span.amount {
	color: var(--maelia-muted);
}

/* Texte secondaire : #898f92 était à 3,28:1 et #18b394 à 2,65:1.
   On exclut les boutons : .is-small sert aussi de classe de taille sur eux,
   et repeindre leur libellé le posait en gris sur un aplat de couleur. */
.breadcrumbs,
.woocommerce-result-count,
p.is-small:not(.button),
span.is-smaller:not(.button) {
	color: var(--maelia-muted);
}

/* Onglets inactifs de la fiche produit : Flatsome les sert en rgba(74,74,74,.85),
   soit 2,37:1 — on ne lit plus « Avis (24) » alors que c'est la preuve la plus
   forte du site. */
.product-tabs > li:not(.active) > a,
.tabbed-content .nav-tabs > li:not(.active) > a {
	color: var(--maelia-muted);
	opacity: 1;
}

/* Champs PPOM : le plugin arrive avec sa propre palette — un rouge pur #FF0000
   pour l'astérisque obligatoire et un bleu Bootstrap #007BFF pour le sélecteur
   de tissu. Deux couleurs étrangères à la marque, toutes deux sous le seuil. */
.show_required {
	color: var(--maelia-stamp);
}

.dd-select .dd-selected,
.ppom-wrapper .dd-selected {
	color: var(--maelia-ink);
}

/* Compteur de votes des avis : #18b394 était à 2,65:1. */
.cr-voting-upvote-count,
.cr-voting-downvote-count {
	color: var(--maelia-muted);
}

/* ---------------------------------------------------------------------------
 * Surfaces dessinées par le navigateur
 *
 * Sélection, curseur, anneau de focus, ascenseur : livrés par défaut, ils
 * n'appartiennent à aucun système de design tant qu'on ne les habille pas.
 * ------------------------------------------------------------------------- */

::selection {
	background-color: var(--maelia-teal-300);
	color: var(--maelia-ink);
}

:focus-visible {
	outline: 3px solid var(--maelia-teal-600);
	outline-offset: 2px;
}

a {
	text-underline-offset: 0.18em;
}

hr,
.is-divider {
	background-color: var(--maelia-hairline);
}

html {
	accent-color: var(--maelia-teal-600);
	caret-color: var(--maelia-ink);
	scrollbar-color: var(--maelia-teal-decor) var(--maelia-teal-100);
}