/* ==========================================================================
   MYA COSMETIC · Design system appliqué au thème Blocksy (+ Blocksy Pro)
   Version 1.0 · refonte myacosmetic.fr
   --------------------------------------------------------------------------
   OÙ LE COLLER
   - Recommandé : style.css du thème enfant « Blocksy Child » (mis en cache,
     versionnable). Sinon : Apparence → Personnaliser → CSS additionnel.
   - Charger APRÈS les réglages du Customizer (c'est le cas dans les deux
     emplacements ci-dessus).

   PRINCIPES
   - Mobile first. Points de rupture alignés sur Blocksy :
     tablette ≥ 690px, desktop ≥ 1000px.
   - Le Customizer reste la source des couleurs et des typographies
     (voir blocksy-settings.md). Ce fichier ajoute les composants de marque
     et réaffirme quelques variables Blocksy pour éviter les écarts.
   - Polices : AUCUN @import ni lien vers fonts.googleapis.com. Bodoni Moda
     et Jost sont téléchargées et servies depuis le serveur par l'extension
     Blocksy Pro « Local Google Fonts » (procédure : blocksy-settings.md §2).
   - Couleurs : l'or (#B08D57) n'est JAMAIS utilisé pour du texte sur fond
     clair (contraste 2,9:1). Il est réservé aux filets, pastilles et au
     texte sur fond noir (6,2:1). Le taupe (#7A7064) est autorisé pour les
     petits textes sur ivoire/blanc (4,6:1) mais pas sur sable (3,9:1).
   - Animations : uniquement si prefers-reduced-motion = no-preference.
   - !important : utilisé à un seul endroit (bloc « Mouvement réduit », §19),
     justifié sur place.
   - Sélecteurs marqués (VÉRIF) : markup Blocksy 2.x / WooCommerce à
     contrôler à l'inspecteur après activation des modules concernés.

   SOMMAIRE
    1. Jetons (variables)          10. Badges
    2. Base & typographie          11. Jauges (.mya-meter)
    3. Focus & accessibilité       12. Fil d'Ariane
    4. Boutons                     13. Formulaires
    5. Sections & mises en page    14. Mini-panier (off-canvas)
    6. Hero (bloc Couverture)      15. Barre d'achat mobile (Floating Cart)
    7. Cartes, tuiles, étapes      16. En-tête, méga-menu, pied de page
    8. Cartes produit (boutique)   17. Accordéons (FAQ, onglets produit)
    9. Fiche produit               18. Composants MYA Core · 19. Mouvement
   ========================================================================== */


/* 1. JETONS ================================================================
   Noms alignés sur l'extension MYA Core (--mya-ivory, --mya-black…) pour
   un seul jeu de variables. Chaque couleur pointe vers la palette globale
   Blocksy (voir mapping dans blocksy-settings.md §1), avec repli HEX.
   « html:root » (au lieu de « :root ») : MYA Core imprime son CSS en pied de
   page et redéfinit certaines variables sur :root ; la spécificité plus
   forte garantit que ces jetons restent la référence. */
html:root {
	/* Couleurs de marque */
	--mya-ivory: var(--theme-palette-color-7, #FAF8F4); /* ivoire : fond du site */
	--mya-white: var(--theme-palette-color-8, #FFFFFF); /* blanc : surfaces */
	--mya-sand: var(--theme-palette-color-6, #EEE7DB);  /* sable : fonds doux, cartes produit */
	--mya-black: var(--theme-palette-color-1, #111010); /* noir : texte, boutons */
	--mya-taupe: #7A7064; /* taupe : textes secondaires, survols (4,57:1 sur ivoire) */
	--mya-gold: var(--theme-palette-color-9, #B08D57);  /* or : accent décoratif */

	/* Couleurs fonctionnelles (hors marque, messages uniquement) */
	--mya-error: #8C2F2B;   /* 7,4:1 sur ivoire */
	--mya-success: #2F5D46; /* 7,0:1 sur ivoire */

	/* Rôles */
	--mya-text: var(--mya-black);
	--mya-muted: var(--mya-taupe);
	--mya-line: var(--mya-sand);
	--mya-field-line: var(--mya-taupe); /* ≥ 3:1 pour les bordures de champs */

	/* Typographies (noms tels qu'enregistrés par Local Google Fonts) */
	--mya-font-display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
	--mya-font-text: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;

	/* Échelle typographique fluide (mobile → desktop) */
	--mya-fs-xs: 0.75rem;                                    /* 12px */
	--mya-fs-sm: 0.875rem;                                   /* 14px */
	--mya-fs-base: 1rem;                                     /* 16px */
	--mya-fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--mya-fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	--mya-fs-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
	--mya-fs-h1: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
	--mya-fs-display: clamp(2.75rem, 1.7rem + 4.6vw, 5.5rem);
	--mya-tracking-caps: 0.14em;
	--mya-tracking-eyebrow: 0.18em;

	/* Espacements */
	--mya-gutter: 16px;
	--mya-gap: 1rem;
	--mya-grid-gap: 1rem;
	--mya-section-y: clamp(3.5rem, 2.4rem + 5vw, 7.5rem);
	--mya-section-y-tight: clamp(1.5rem, 1rem + 2vw, 2.5rem);

	/* Formes */
	--mya-radius: 2px;
	--mya-tap: 48px;
	--mya-focus: 0 0 0 2px var(--mya-ivory), 0 0 0 4px var(--mya-black);

	/* Mouvement */
	--mya-dur: 200ms;
	--mya-ease: cubic-bezier(0.2, 0.6, 0.2, 1);

	/* Variables Blocksy réaffirmées (mêmes valeurs que le Customizer) (VÉRIF) */
	--theme-button-min-height: 48px;
	--theme-button-border-radius: 2px;
	--theme-button-text-initial-color: var(--mya-ivory);
	--theme-button-text-hover-color: var(--mya-black);
	--theme-button-background-initial-color: var(--mya-black);
	--theme-button-background-hover-color: var(--mya-gold);
	--theme-form-field-height: 48px;
	--theme-form-field-border-radius: 2px;
	--theme-form-field-border-initial-color: var(--mya-field-line);
	--theme-form-field-border-focus-color: var(--mya-black);
	--theme-form-field-background-initial-color: var(--mya-white);
	--theme-form-field-background-focus-color: var(--mya-white);
}

@media (min-width: 690px) {
	html:root {
		--mya-gutter: 24px;
		--mya-grid-gap: 1.5rem;
	}
}

@media (min-width: 1000px) {
	html:root {
		--mya-gutter: 32px;
		--mya-grid-gap: 2rem;
	}
}


/* 2. BASE & TYPOGRAPHIE ==================================================== */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3 {
	font-family: var(--mya-font-display);
	font-weight: 400;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* H4–H6 en Jost : Bodoni Moda perd ses déliés sous 20px */
h4, h5, h6 {
	font-family: var(--mya-font-text);
	font-weight: 500;
}

h5, h6 {
	text-transform: uppercase;
	letter-spacing: var(--mya-tracking-caps);
}

p, li {
	text-wrap: pretty;
}

::selection {
	background: var(--mya-black);
	color: var(--mya-ivory);
}

/* Liens de contenu : soulignement fin et lisible */
.entry-content a:not(.wp-element-button, .wp-block-button__link, .button) {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Classes de texte réutilisables (blocs Titre / Paragraphe) */
.mya-eyebrow {
	margin: 0 0 0.75rem;
	font-family: var(--mya-font-text);
	font-size: var(--mya-fs-xs);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: var(--mya-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--mya-muted);
}

.mya-eyebrow::before {
	content: "";
	display: inline-block;
	width: 1.5rem;
	height: 1px;
	margin-inline-end: 0.75rem;
	vertical-align: middle;
	background: var(--mya-gold);
}

.mya-display {
	font-size: var(--mya-fs-display);
	line-height: 1.02;
	letter-spacing: -0.015em;
}

.mya-title {
	font-size: var(--mya-fs-h2);
	line-height: 1.12;
	margin-block: 0 1rem;
}

.mya-tagline {
	font-family: var(--mya-font-display);
	font-style: italic;
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	line-height: 1.3;
}

.mya-lead {
	font-size: var(--mya-fs-lead);
	line-height: 1.6;
	max-width: 38rem;
}

.mya-note {
	font-size: var(--mya-fs-xs);
	line-height: 1.5;
	color: var(--mya-muted);
}

.mya-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--mya-tap);
	font-size: var(--mya-fs-xs);
	font-weight: 500;
	letter-spacing: var(--mya-tracking-caps);
	text-transform: uppercase;
	color: var(--mya-black);
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

.mya-placeholder {
	padding: 1rem;
	border: 1px dashed var(--mya-taupe);
	border-radius: var(--mya-radius);
	font-size: var(--mya-fs-sm);
	color: var(--mya-black);
	background: var(--mya-white);
}

.mya-sr-only,
.mya-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


/* 3. FOCUS & ACCESSIBILITÉ ================================================= */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--mya-black);
	outline-offset: 3px;
}

:where(.mya-section--noir, .mya-hero) :focus-visible {
	outline-color: var(--mya-ivory);
}


/* 4. BOUTONS ===============================================================
   48px de haut, coins 2px, majuscules espacées. Primaire : noir → or au
   survol (texte noir, 6,2:1). Contour : bloc Bouton, style « Contour ». */
.wp-element-button,
.wp-block-button__link,
.button,
.ct-button,
.single_add_to_cart_button,
.wc-block-components-button:not(.is-link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: var(--mya-tap);
	padding: 0.75rem 1.75rem;
	border-radius: var(--mya-radius);
	font-family: var(--mya-font-text);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--mya-tracking-caps);
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
}

/* Contour (style natif Gutenberg « is-style-outline ») */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid currentColor;
	background: transparent;
	color: var(--mya-black);
}

/* Clair : bouton ivoire pour fonds noirs et photos */
.wp-block-button.mya-btn-light > .wp-block-button__link {
	background: var(--mya-ivory);
	color: var(--mya-black);
}

.mya-section--noir .wp-block-button.is-style-outline > .wp-block-button__link,
.mya-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--mya-ivory);
}

@media (hover: hover) {
	.wp-block-button.is-style-outline > .wp-block-button__link:hover {
		background: var(--mya-black);
		border-color: var(--mya-black);
		color: var(--mya-ivory);
	}

	.wp-block-button.mya-btn-light > .wp-block-button__link:hover,
	.mya-section--noir .wp-block-button.is-style-outline > .wp-block-button__link:hover,
	.mya-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover {
		background: var(--mya-gold);
		border-color: var(--mya-gold);
		color: var(--mya-black);
	}
}

/* Mobile : boutons des sections en pleine largeur (cible tactile, lisibilité) */
@media (max-width: 689.98px) {
	.mya-section .wp-block-buttons > .wp-block-button,
	.mya-hero .wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
	}

	.mya-section .wp-block-buttons > .wp-block-button > .wp-block-button__link,
	.mya-hero .wp-block-buttons > .wp-block-button > .wp-block-button__link {
		width: 100%;
	}
}


/* 5. SECTIONS & MISES EN PAGE ==============================================
   Chaque section d'accueil = bloc Groupe pleine largeur + classe
   « mya-section » + une variante de fond. */
.mya-section {
	padding-block: var(--mya-section-y);
	padding-inline: var(--mya-gutter);
	background: var(--mya-ivory);
	color: var(--mya-text);
}

.entry-content > :is(.mya-section, .mya-hero, .mya-trustbar) {
	margin-block: 0;
}

.mya-section--tight {
	padding-block: var(--mya-section-y-tight);
}

.mya-section--blanc {
	background: var(--mya-white);
}

.mya-section--sable {
	background: var(--mya-sand);
	--mya-muted: var(--mya-black); /* taupe < 4,5:1 sur sable */
}

.mya-section--noir {
	background: var(--mya-black);
	color: var(--mya-ivory);
	--mya-muted: var(--mya-sand);
}

.mya-section--noir :is(h1, h2, h3, h4, h5, h6),
.mya-section--noir a:not(.wp-block-button__link) {
	color: var(--mya-ivory);
}

.mya-section--noir .mya-eyebrow {
	color: var(--mya-gold); /* 6,2:1 sur noir */
}

/* En-tête de section centré */
.mya-section__head {
	max-width: 40rem;
	margin-inline: auto;
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	text-align: center;
}

.mya-section__head .mya-lead {
	margin-inline: auto;
}

.mya-section__foot {
	margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.mya-section__head .wp-block-buttons,
.wp-block-buttons.mya-center {
	justify-content: center;
}

/* Section préparée mais masquée tant que son contenu réel n'existe pas
   (avant/après sans vraies photos, newsletter sans formulaire). Retirer la
   classe « mya-hidden » du bloc Groupe pour l'afficher. */
.wp-block-group.mya-hidden,
.mya-hidden {
	display: none;
}

/* Grilles (bloc Groupe + classe). Mobile : 1 colonne ; --4 : 2 colonnes. */
.wp-block-group.mya-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mya-grid-gap);
}

.wp-block-group.mya-grid > * {
	margin-block: 0;
	max-width: none;
}

.wp-block-group.mya-grid--4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1000px) {
	.wp-block-group.mya-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wp-block-group.mya-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Colonnes texte + image */
.wp-block-columns.mya-split {
	gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}

.mya-split .wp-block-image {
	margin: 0;
	aspect-ratio: 4 / 5;
	background: var(--mya-sand);
}

.mya-split .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}


/* 6. HERO (bloc Couverture + classe « mya-hero ») ========================== */
.wp-block-cover.mya-hero {
	min-height: min(88svh, 760px);
	padding: var(--mya-section-y) var(--mya-gutter);
	align-items: flex-end;
	background-color: var(--mya-black); /* repli si l'image ne charge pas */
	color: var(--mya-ivory);
}

.mya-hero .wp-block-cover__inner-container {
	color: var(--mya-ivory);
}

.mya-hero :is(h1, h2, p) {
	color: var(--mya-ivory);
}

.mya-hero .mya-eyebrow {
	color: var(--mya-ivory);
}

.mya-hero .mya-lead {
	max-width: 34rem;
}

@media (min-width: 1000px) {
	.wp-block-cover.mya-hero {
		align-items: center;
	}
}


/* 7. CARTES, TUILES, ÉTAPES ================================================ */
.mya-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
	background: var(--mya-white);
	border: 1px solid var(--mya-line);
	border-radius: var(--mya-radius);
	box-shadow: none;
}

.wp-block-group.mya-card > * {
	margin-block: 0;
}

.mya-card h3 {
	font-size: var(--mya-fs-h3);
	line-height: 1.2;
}

.mya-card .wp-block-buttons {
	margin-top: auto;
	padding-top: 0.5rem;
}

.mya-section--blanc .mya-card {
	background: var(--mya-ivory);
}

/* Tuile catégorie : toute la carte est cliquable via le lien du titre */
.mya-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.wp-block-group.mya-tile > * {
	margin-block: 0;
}

.mya-tile .wp-block-image {
	margin: 0 0 0.5rem;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--mya-sand);
	border-radius: var(--mya-radius);
}

.mya-tile .wp-block-image img {
	width: 100%;
	height: 100%;
	padding: 10%;
	object-fit: contain;
	mix-blend-mode: multiply; /* fond blanc des packshots fondu dans le sable */
}

.mya-tile h3 {
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
	line-height: 1.2;
}

.mya-tile h3 a {
	color: inherit;
	text-decoration: none;
}

.mya-tile h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mya-tile p {
	font-size: var(--mya-fs-sm);
	color: var(--mya-muted);
}

@media (hover: hover) {
	.mya-tile:hover h3 a {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
	}
}

/* Étapes de routine numérotées (compteur CSS décoratif) */
.mya-steps {
	counter-reset: mya-step;
}

.mya-step {
	counter-increment: mya-step;
}

.mya-step::before {
	content: counter(mya-step, decimal-leading-zero);
	display: block;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--mya-gold);
	font-family: var(--mya-font-display);
	font-size: 2.5rem;
	line-height: 1;
	color: var(--mya-black);
}

/* Articles du journal (bloc Derniers articles, classe « mya-posts ») */
.mya-posts.wp-block-latest-posts {
	padding: 0;
}

.mya-posts .wp-block-latest-posts__featured-image {
	margin-bottom: 1rem;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--mya-sand);
}

.mya-posts .wp-block-latest-posts__featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mya-posts .wp-block-latest-posts__post-title {
	font-family: var(--mya-font-display);
	font-size: 1.375rem;
	line-height: 1.25;
	color: var(--mya-black);
	text-decoration: none;
}


/* 8. CARTES PRODUIT (boutique, catégories, [products], blocs Woo) ==========
   Image 4:5 sur fond sable, sans ombre. Le ratio 4/5 se règle aussi dans le
   Customizer (Product Archives → Card Options → Product Image) : Blocksy
   l'écrit en ligne sur l'image, le CSS ne fait que le confirmer. (VÉRIF) */
[data-products] .product,
.wc-block-product,
.wc-block-grid__product {
	background: transparent;
	border: 0;
	box-shadow: none;
	text-align: start;
}

[data-products] .product .ct-media-container,
.wc-block-components-product-image,
.wc-block-grid__product-image {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--mya-sand);
	border-radius: var(--mya-radius);
	box-shadow: none;
}

[data-products] .product .ct-media-container img,
.wc-block-components-product-image img,
.wc-block-grid__product-image img {
	width: 100%;
	height: 100%;
	padding: 8%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

[data-products] .woocommerce-loop-product__title,
.wc-block-components-product-name,
.wc-block-grid__product-title {
	margin-top: 0.75rem;
	font-family: var(--mya-font-text);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mya-black);
}

[data-products] .price,
.wc-block-components-product-price {
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--mya-black);
}

[data-products] .price del,
.wc-block-components-product-price del {
	color: var(--mya-taupe);
}

[data-products] .price ins,
.wc-block-components-product-price ins {
	text-decoration: none;
}

/* Bouton de carte : contour pleine largeur, compact sur mobile */
[data-products] .product .button,
.wc-block-components-product-button .wp-block-button__link {
	width: 100%;
	padding-inline: 0.5rem;
	border: 1px solid var(--mya-black);
	background: transparent;
	color: var(--mya-black);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	white-space: normal;
}

@media (hover: hover) {
	[data-products] .product .button:hover,
	.wc-block-components-product-button .wp-block-button__link:hover {
		background: var(--mya-black);
		color: var(--mya-ivory);
	}
}

@media (min-width: 690px) {
	[data-products] .product .button,
	.wc-block-components-product-button .wp-block-button__link {
		font-size: 0.8125rem;
		letter-spacing: var(--mya-tracking-caps);
	}
}

/* Étoiles : noir (l'or est trop clair pour un élément informatif) */
.star-rating,
.wc-block-components-product-rating__stars {
	color: var(--mya-black);
}

/* Sélection d'accueil [products ids=…] : 2 colonnes mobile, 4 desktop */
.mya-products ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mya-grid-gap);
	margin: 0;
	padding: 0;
}

@media (min-width: 1000px) {
	.mya-products ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}


/* 9. FICHE PRODUIT ========================================================= */
.single-product .product_title {
	font-size: var(--mya-fs-h1);
	line-height: 1.08;
	margin-bottom: 0.5rem;
}

.single-product .summary .price,
.single-product .entry-summary .price {
	font-size: 1.375rem;
	font-weight: 400;
	color: var(--mya-black);
}

.single-product .woocommerce-product-details__short-description {
	color: var(--mya-black);
}

.single-product .woocommerce-product-gallery .ct-media-container,
.single-product .woocommerce-product-gallery__image {
	background: var(--mya-sand);
}

.single-product .woocommerce-product-gallery img {
	mix-blend-mode: multiply;
}

.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 12rem;
}

.quantity,
.quantity .qty {
	min-height: var(--mya-tap);
}

/* Mentions réglementaires / précautions sous la fiche */
.mya-precautions {
	padding: 1rem 1.25rem;
	border-inline-start: 2px solid var(--mya-black);
	background: var(--mya-white);
	font-size: var(--mya-fs-sm);
}


/* 10. BADGES =============================================================== */
.onsale,
.out-of-stock-badge,
.mya-badge {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0.25rem 0.625rem;
	border-radius: var(--mya-radius);
	font-family: var(--mya-font-text);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	box-shadow: none;
}

.onsale,
.mya-badge {
	background: var(--mya-black);
	color: var(--mya-ivory);
}

.out-of-stock-badge {
	background: var(--mya-taupe);
	color: var(--mya-ivory); /* 4,6:1 */
}

.mya-badge--or {
	background: var(--mya-gold);
	color: var(--mya-black); /* 6,2:1 */
}

.mya-badge--sable {
	background: var(--mya-sand);
	color: var(--mya-black);
}

.mya-badge--contour {
	background: transparent;
	border: 1px solid var(--mya-black);
	color: var(--mya-black);
}

.mya-badge--pro {
	background: var(--mya-black);
	color: var(--mya-gold);
}


/* 11. JAUGES ===============================================================
   Markup MYA Core : .mya-meter > .mya-meter__label + .mya-meter__dots >
   .mya-meter__dot(.is-on). Bordure noire pour un contraste ≥ 3:1, remplissage
   or. Les valeurs doivent venir des données techniques de la marque
   ([À CONFIRMER] tant qu'elles ne sont pas sourcées). */
.mya-meter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.5rem;
	border-bottom: 1px solid var(--mya-line);
}

.mya-meter__label {
	font-size: var(--mya-fs-sm);
}

.mya-meter .mya-meter__dot {
	border-color: var(--mya-black);
}

.mya-meter .mya-meter__dot.is-on {
	background: var(--mya-gold);
}


/* 12. FIL D'ARIANE ========================================================= */
.ct-breadcrumbs,
.woocommerce-breadcrumb,
.rank-math-breadcrumb {
	font-size: var(--mya-fs-xs);
	line-height: 1.6;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mya-taupe);
}

.ct-breadcrumbs a,
.woocommerce-breadcrumb a,
.rank-math-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.ct-breadcrumbs .last-item,
.ct-breadcrumbs [aria-current="page"] {
	color: var(--mya-black);
}

@media (hover: hover) {
	.ct-breadcrumbs a:hover,
	.woocommerce-breadcrumb a:hover,
	.rank-math-breadcrumb a:hover {
		color: var(--mya-black);
		text-decoration: underline;
		text-underline-offset: 0.25em;
	}
}


/* 13. FORMULAIRES ==========================================================
   Hauteur 48px, bordure taupe (≥ 3:1), coins 2px. Taille 16px minimum pour
   éviter le zoom automatique d'iOS. Les variables Blocksy (§1) font le reste. */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"], [type="color"], [type="file"]), select, textarea) {
	font-size: max(16px, 1rem);
}

input[type="checkbox"],
input[type="radio"] {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--mya-black);
}

label,
.wc-block-components-checkbox__label {
	font-size: var(--mya-fs-sm);
}

::placeholder {
	color: var(--mya-taupe);
	opacity: 1;
}

.woocommerce form .form-row .required {
	color: var(--mya-error);
	text-decoration: none;
}

/* Blocs Panier / Commande WooCommerce */
.wc-block-components-text-input input,
.wc-block-components-combobox .components-combobox-control__input,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea {
	border-color: var(--mya-field-line);
	border-radius: var(--mya-radius);
	background-color: var(--mya-white);
}

/* Messages : couleur + libellé + filet (jamais la couleur seule) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border: 0;
	border-inline-start: 2px solid var(--mya-black);
	border-radius: var(--mya-radius);
	background: var(--mya-white);
	color: var(--mya-black);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	border-inline-start-color: var(--mya-error);
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	border-inline-start-color: var(--mya-success);
}

/* Formulaire newsletter (conteneur générique de l'extension choisie) */
.mya-newsletter form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

@media (min-width: 690px) {
	.mya-newsletter form {
		flex-flow: row wrap;
	}

	.mya-newsletter form input[type="email"] {
		flex: 1 1 16rem;
	}
}


/* 14. MINI-PANIER (tiroir off-canvas Blocksy Pro) (VÉRIF) ================== */
#woo-cart-panel .ct-panel-inner {
	background: var(--mya-ivory);
}

.woocommerce-mini-cart {
	margin: 0;
	padding: 0;
}

.woocommerce-mini-cart-item {
	padding-block: 1rem;
	border-bottom: 1px solid var(--mya-line);
}

.woocommerce-mini-cart-item img {
	width: 72px;
	height: auto;
	aspect-ratio: 4 / 5;
	padding: 6px;
	object-fit: contain;
	background: var(--mya-sand);
	border-radius: var(--mya-radius);
}

.woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding-block: 1rem;
	border-top: 1px solid var(--mya-black);
	font-weight: 500;
}

.woocommerce-mini-cart__buttons {
	display: grid;
	gap: 0.5rem;
	margin: 0;
}

.woocommerce-mini-cart__buttons .button {
	width: 100%;
}

.woocommerce-mini-cart__buttons .button:not(.checkout) {
	border: 1px solid var(--mya-black);
	background: transparent;
	color: var(--mya-black);
}

.woocommerce-mini-cart__empty-message {
	padding-block: 2rem;
	font-family: var(--mya-font-display);
	font-size: 1.25rem;
	text-align: center;
}

/* Pastille du panier dans l'en-tête : or sur noir ou noir sur or */
.ct-header-cart .ct-dynamic-count-cart {
	background: var(--mya-gold);
	color: var(--mya-black);
}


/* 15. BARRE D'ACHAT MOBILE ================================================
   Module Blocksy Pro « Floating Cart » (Shop Extra), position bas.
   .mya-buybar = même rendu si une barre est fournie par une extension. */
.ct-floating-bar,
.mya-buybar {
	background: var(--mya-ivory);
	border-top: 1px solid var(--mya-line);
	box-shadow: none;
}

.ct-floating-bar .price,
.mya-buybar .price {
	font-weight: 500;
	color: var(--mya-black);
}

@media (max-width: 689.98px) {
	.ct-floating-bar,
	.mya-buybar {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.ct-floating-bar .single_add_to_cart_button,
	.ct-floating-bar .button,
	.mya-buybar .button {
		flex: 1 1 auto;
		min-height: var(--mya-tap);
	}

	/* Le pied de page ne doit pas passer sous la barre fixe */
	.single-product :is(.ct-footer, #footer) {
		padding-bottom: calc(72px + env(safe-area-inset-bottom));
	}
}


/* 16. EN-TÊTE, MÉGA-MENU, PIED DE PAGE ===================================== */

/* Bandeau de réassurance (élément « Text » de la ligne haute) */
.mya-announce {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
}

.mya-announce a {
	color: inherit;
}

/* Titres de colonnes du méga-menu : ajouter la classe CSS « mya-menu-heading »
   à l'élément de menu (Apparence → Menus → Options de l'écran → Classes CSS) */
.mya-menu-heading > a,
.mya-menu-heading > .ct-menu-link {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--mya-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--mya-taupe);
}

/* Tuile image du méga-menu (bloc de contenu Blocksy) */
.mya-mega-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
	background: var(--mya-sand);
	border-radius: var(--mya-radius);
}

.wp-block-group.mya-mega-tile > * {
	margin-block: 0;
}

.mya-mega-tile .wp-block-image {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.mya-mega-tile .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.mya-mega-tile .mya-eyebrow {
	color: var(--mya-black);
}

/* Pied de page (fond noir réglé dans le Customizer) (VÉRIF) */
.ct-footer {
	font-size: var(--mya-fs-sm);
}

.ct-footer .widget-title,
.ct-footer .wp-block-heading {
	font-family: var(--mya-font-text);
	font-size: var(--mya-fs-xs);
	font-weight: 500;
	letter-spacing: var(--mya-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--mya-black);
}

.ct-footer .menu a,
.ct-footer .widget_nav_menu a {
	display: inline-block;
	padding-block: 0.375rem; /* cible tactile ≥ 24px + espacement */
	text-decoration: none;
}


/* 17. ACCORDÉONS (FAQ en bloc Détails, onglets produit en accordéon) ======= */
.wp-block-details {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--mya-line);
}

.entry-content > .wp-block-details + .wp-block-details {
	margin-top: 0;
}

.wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--mya-tap);
	padding-block: 1rem;
	font-weight: 500;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

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

.wp-block-details > summary::after {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
}

.wp-block-details[open] > summary::after {
	background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}

.wp-block-details > :not(summary) {
	margin-top: 0;
	padding-bottom: 1rem;
}

/* Onglets WooCommerce (Blocksy : Product Tabs → Accordion) (VÉRIF) */
.woocommerce-tabs .tabs a,
.woocommerce-tabs .ct-accordion-heading {
	min-height: var(--mya-tap);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: var(--mya-tracking-caps);
	text-transform: uppercase;
}


/* 18. COMPOSANTS MYA CORE (harmonisation) =================================
   L'extension fournit son CSS (imprimé en pied de page, donc APRÈS ce
   fichier) : sélecteurs préfixés par le conteneur pour l'emporter. */
:is(.mya-quiz, .mya-routine) .mya-btn {
	min-height: var(--mya-tap);
	font-family: var(--mya-font-text);
	letter-spacing: var(--mya-tracking-caps);
	text-transform: uppercase;
}

.mya-quiz .mya-quiz__title,
.mya-routine .mya-routine__title,
.mya-quiz .mya-result__name {
	font-family: var(--mya-font-display);
	font-weight: 400;
}

.mya-trustbar {
	padding-inline: var(--mya-gutter);
	background: var(--mya-white);
	border-bottom: 1px solid var(--mya-line);
}

.mya-trust .mya-icon {
	flex: none;
	color: var(--mya-black);
}

.mya-ba .mya-ba__caption {
	font-size: var(--mya-fs-xs);
}


/* 19. MOUVEMENT ============================================================
   Transitions déclarées uniquement si l'utilisateur les accepte. */
@media (prefers-reduced-motion: no-preference) {
	html:focus-within {
		scroll-behavior: smooth;
	}

	.wp-element-button,
	.wp-block-button__link,
	.button,
	.mya-btn,
	.ct-breadcrumbs a,
	[data-products] .product .button {
		transition:
			background-color var(--mya-dur) var(--mya-ease),
			border-color var(--mya-dur) var(--mya-ease),
			color var(--mya-dur) var(--mya-ease);
	}

	.mya-tile .wp-block-image img,
	[data-products] .product .ct-media-container img {
		transition: transform 400ms var(--mya-ease);
	}

	@media (hover: hover) {
		.mya-tile:hover .wp-block-image img,
		[data-products] .product:hover .ct-media-container img {
			transform: scale(1.03);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	/* !important NÉCESSAIRE (seul usage du fichier) : neutralise les
	   animations natives de Blocksy (révélation du méga-menu, tiroirs
	   off-canvas, en-tête collant, apparition des cartes), de WooCommerce et
	   des blocs, déclarées avec des sélecteurs plus spécifiques que « * ».
	   Motif recommandé pour le critère WCAG 2.3.3. */
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Recette du 16/10/2026 : focus visible sur la bannière promo, tableaux lisibles sur mobile. */
.mya-promo-banner :focus-visible {
	outline-color: #FAF8F4;
}

@media (max-width: 689.98px) {
	.wp-block-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.wp-block-table table {
		min-width: 640px;
		font-size: .875rem;
	}
	.wp-block-table :is(th, td):first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background: var(--mya-ivory, #FAF8F4);
	}
}

/* Marque blanche : visuel des packagings « TON LOGO » recadré sur mobile pour garder les inscriptions lisibles. */
@media (max-width: 689.98px) {
	.mya-page-visual img.wp-image-1090,
	.mya-mb .wp-block-media-text__media img {
		aspect-ratio: 1 / 1;
		object-fit: cover;
		object-position: 8% 60%;
		width: 100%;
		height: auto;
	}
}