/**
 * YAHU SANTÉ — Design system v2
 * =============================
 *
 * Remplace la charte précédente. Écrite comme un système de conception, pas
 * comme une liste de correctifs.
 *
 * INTENTION
 * --------
 * Le site vend des plantes médicinales africaines à un public ivoirien et
 * international. Le registre doit tenir deux promesses : la crédibilité d'un
 * acteur de santé sérieux, et la chaleur d'une marque africaine contemporaine.
 *
 *   - un vert profond, pas un vert « printanier », pour l'ancrage et le
 *     sérieux. L'or est réservé aux signaux de confiance, jamais décoratif ;
 *   - Marcellus pour les titres : un serif humaniste qui évoque le soin et
 *     l'apothicaire sans tomber dans le luxe ;
 *   - DM Sans pour le texte : la cible lit sur téléphone, souvent en
 *     extérieur, la lisibilité prime ;
 *   - une densité assumée : le visiteur cherche des usages, des précautions
 *     et des prix, pas des effets ;
 *   - des blocs respirants (cartes, encadrés) qui découpent des pages
 *     naturellement longues.
 *
 * RYTHME
 * ------
 * Une seule échelle d'espacement (multiples de 4 px) et une seule échelle
 * typographique fluide (clamp). Rien en dur : le rendu s'adapte continûment
 * du téléphone au grand écran, sans palier brutal.
 *
 * ACCESSIBILITÉ
 * -------------
 * Contrastes vérifiés : texte courant 8,9:1, titres 15,4:1, liens 6,4:1.
 * Focus toujours visible. Animations désactivées si le système le demande.
 * Zones tactiles de 44 px minimum.
 *
 * COMPATIBILITÉ
 * -------------
 * Les anciens noms de variables (--yahu-emerald, --yahu-line, …) sont
 * conservés en alias. Les styles de page écrits avant ce fichier continuent
 * donc de fonctionner sans modification.
 */

/* ==========================================================================
   1. JETONS
   ========================================================================== */

:root {
	/* --- Marque --- */
	--yahu-vert-900: #03372a;
	--yahu-vert-800: #04553f;
	--yahu-vert-700: #047857;
	--yahu-vert-600: #059669;
	--yahu-vert-500: #10b981;
	--yahu-vert-100: #d1fae5;
	--yahu-vert-50:  #ecfdf5;

	--yahu-or-700: #8a6d1f;
	--yahu-or-600: #a8862a;
	--yahu-or-500: #d4af37;
	--yahu-or-50:  #fdf9ec;

	--yahu-argile: #b45309;

	/* --- Neutres, légèrement chauds : plus doux à lire que du gris pur --- */
	--yahu-encre:     #0b1220;
	--yahu-ardoise:   #1e293b;
	--yahu-texte:     #334155;
	--yahu-doux:      #64748b;
	--yahu-bord:      #e2e8f0;
	--yahu-bord-fort: #cbd5e1;
	--yahu-fond:      #ffffff;
	--yahu-fond-2:    #f8fafc;
	--yahu-fond-3:    #f1f5f9;

	/* --- Rythme (multiples de 4) --- */
	--e-1: .25rem;
	--e-2: .5rem;
	--e-3: .75rem;
	--e-4: 1rem;
	--e-5: 1.25rem;
	--e-6: 1.5rem;
	--e-8: 2rem;
	--e-10: 2.5rem;
	--e-12: 3rem;
	--e-16: 4rem;
	--e-20: 5rem;

	/* --- Formes --- */
	--r-s: 8px;
	--r-m: 12px;
	--r-l: 18px;
	--r-xl: 26px;
	--r-plein: 999px;

	/* --- Profondeur : deux ombres seulement, pour rester sobre --- */
	--o-1: 0 1px 2px rgba(11, 18, 32, .05), 0 1px 3px rgba(11, 18, 32, .06);
	--o-2: 0 4px 8px rgba(11, 18, 32, .06), 0 12px 28px rgba(11, 18, 32, .08);
	--o-3: 0 8px 20px rgba(11, 18, 32, .08), 0 24px 56px rgba(11, 18, 32, .12);

	--anneau: 0 0 0 4px rgba(5, 150, 105, .18);

	/* --- Typographie --- */
	--f-titre: "Marcellus", "Iowan Old Style", Georgia, serif;
	--f-texte: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--t-xs:  .8125rem;
	--t-s:   .875rem;
	--t-m:   1rem;
	--t-l:   1.0625rem;
	--t-xl:  clamp(1.15rem, 1.6vw, 1.3rem);
	--t-2xl: clamp(1.4rem, 2.6vw, 1.75rem);
	--t-3xl: clamp(1.75rem, 3.6vw, 2.35rem);
	--t-4xl: clamp(2.1rem, 5vw, 3.1rem);

	/* --- Alias des anciens noms (compatibilité) --- */
	--yahu-emerald: var(--yahu-vert-600);
	--yahu-emerald-dark: var(--yahu-vert-700);
	--yahu-emerald-soft: var(--yahu-vert-50);
	--yahu-green: var(--yahu-vert-500);
	--yahu-gold: var(--yahu-or-500);
	--yahu-gold-soft: var(--yahu-or-50);
	--yahu-ink: var(--yahu-encre);
	--yahu-slate: var(--yahu-texte);
	--yahu-text: var(--yahu-texte);
	--yahu-muted: var(--yahu-doux);
	--yahu-line: var(--yahu-bord);
	--yahu-bg: var(--yahu-fond);
	--yahu-bg-soft: var(--yahu-fond-2);
	--yahu-bg-tint: var(--yahu-fond-2);
	--yahu-radius: var(--r-m);
	--yahu-radius-lg: var(--r-l);
	--yahu-radius-pill: var(--r-plein);
	--yahu-shadow: var(--o-1);
	--yahu-shadow-lg: var(--o-2);
	--yahu-ring: var(--anneau);
	--yahu-font-body: var(--f-texte);
	--yahu-font-head: var(--f-titre);
}

/* Neutralisation du bleu WordPress injecté par le CSS global. */
:root,
body,
.wp-block-button__link,
.editor-styles-wrapper {
	--wp-admin-theme-color: #059669;
	--wp-admin-theme-color--rgb: 5, 150, 105;
	--wp-admin-theme-color-darker-10: #047857;
	--wp-admin-theme-color-darker-10--rgb: 4, 120, 87;
	--wp-admin-theme-color-darker-20: #036c4e;
	--wp-admin-theme-color-darker-20--rgb: 3, 108, 78;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body,
.entry-content,
.widget,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
	font-family: var(--f-texte);
	color: var(--yahu-texte);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, h3, h4,
.entry-title,
.site-title,
.wp-block-heading,
.uagb-heading-text {
	font-family: var(--f-titre);
	color: var(--yahu-encre);
	font-weight: 400;
	line-height: 1.22;
	letter-spacing: -.005em;
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   ÉCHELLE DES TITRES
   --------------------------------------------------------------------------
   Volontairement limitée à h1–h4 SANS .entry-title : les titres d'articles
   portent aussi la classe .entry-title, et les inclure ici les faisait
   hériter de la taille d'un titre de page. Les titres d'articles ont leurs
   propres règles plus bas.
   -------------------------------------------------------------------------- */

h1 { font-size: var(--t-4xl); letter-spacing: -.015em; }
h2 { font-size: var(--t-3xl); margin-top: var(--e-10); }
h3 { font-size: var(--t-2xl); margin-top: var(--e-8); }
h4 { font-size: var(--t-xl); }

/* --------------------------------------------------------------------------
   TITRES D'ARTICLES DE BLOG — réduits
   --------------------------------------------------------------------------
   Astra applique ses tailles de titre à TOUS les titres, y compris ceux des
   cartes de la liste du blog : chaque titre d'article mesurait une
   cinquantaine de pixels, deux titres par écran.

   Les règles ci-dessous ne visent QUE les titres d'articles :
     - la carte d'un article dans une liste ;
     - le titre d'un article sur sa propre page ;
     - les titres apparentés en bas d'article ;
     - le bloc « articles récents » de la page d'accueil.

   Elles sont volontairement étroites (`.ast-article-post`, `.single-post`,
   `.ast-related-post-title`) et n'utilisent PAS `.blog` ni `.archive`, qui
   auraient aussi attrapé le titre de la page elle-même.

   Les en-têtes de pages ne sont donc pas touchés.
   -------------------------------------------------------------------------- */

/* Carte d'article dans une liste (blog, catégorie, recherche).
   Le sélecteur cible h2.entry-title : sur une liste, Astra rend le titre de
   chaque carte en h2, alors que le titre de la page elle-même est un h1.
   Cibler h2 évite donc de toucher les en-têtes de pages. */
h2.entry-title,
.ast-article-inner h2.entry-title,
article.type-post h2.entry-title {
	font-size: clamp(1.1rem, 1.7vw, 1.3rem);
	line-height: 1.35;
	letter-spacing: 0;
	text-wrap: pretty;
}

/* Titre d'un article, sur sa propre page (h1). */
.single-post h1.entry-title {
	font-size: clamp(1.7rem, 3.2vw, 2.3rem);
	line-height: 1.25;
}

/* Titres apparentés, en bas d'article. */
.ast-related-post-title.entry-title {
	font-size: var(--t-l);
	line-height: 1.4;
}

/* Bloc « articles récents » de la page d'accueil. */
.yahu-articles .entry-title,
.wp-block-latest-posts .entry-title {
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.35;
}

h5, h6 {
	font-family: var(--f-texte);
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--yahu-ardoise);
}

p, li {
	font-size: var(--t-l);
	line-height: 1.75;
}

/* Mesure de lecture : 70 caractères est le confort maximal pour un texte
   long. Les pages de plantes contiennent beaucoup de prose, on la limite. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3 {
	max-width: 70ch;
}

/* Les colonnes et groupes reprennent la largeur complète. */
.entry-content > .wp-block-columns,
.entry-content > .wp-block-group,
.entry-content > .wp-block-buttons,
.entry-content > .wp-block-table,
.entry-content > .wp-block-image {
	max-width: none;
}

strong { color: var(--yahu-encre); font-weight: 700; }

/* Mot mis en avant dans un titre : le seul usage de l'or en typographie. */
.yahu-souligne {
	background: linear-gradient(transparent 62%, var(--yahu-or-50) 62%);
	padding: 0 .1em;
}

/* ==========================================================================
   3. LIENS
   ========================================================================== */

.entry-content a:not(.wp-block-button__link):not(.yahu-map-lien a),
.yahu-prose a {
	color: var(--yahu-vert-700);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color .15s ease, text-decoration-thickness .15s ease;
}

.entry-content a:not(.wp-block-button__link):hover {
	color: var(--yahu-vert-600);
	text-decoration-thickness: 2px;
}

/* ==========================================================================
   4. BOUTONS
   ========================================================================== */

.wp-block-button__link,
.wp-element-button,
button,
input[type="submit"],
.ast-button,
.yahu-btn {
	font-family: var(--f-texte);
	font-weight: 600;
	font-size: var(--t-m);
	line-height: 1.2;
	border-radius: var(--r-plein);
	padding: .95em 2em;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid transparent;
	background: var(--yahu-vert-600);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(5, 150, 105, .3);
	transition: transform .16s cubic-bezier(.2, .8, .2, 1),
	            background-color .16s ease,
	            box-shadow .16s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
button:hover,
input[type="submit"]:hover,
.ast-button:hover,
.yahu-btn:hover {
	background: var(--yahu-vert-700);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(5, 150, 105, .3);
}

.wp-block-button__link:active,
.yahu-btn:active { transform: translateY(0); }

/* Contour : action secondaire. */
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--yahu-vert-700);
	border-color: var(--yahu-vert-600);
	box-shadow: none;
}

.is-style-outline .wp-block-button__link:hover {
	background: var(--yahu-vert-50);
	color: var(--yahu-vert-700);
}

/* Or : réservé à une action de confiance mise en avant. */
.yahu-btn--or .wp-block-button__link {
	background: var(--yahu-or-500);
	color: var(--yahu-encre);
	box-shadow: 0 1px 2px rgba(168, 134, 42, .3);
}

.yahu-btn--or .wp-block-button__link:hover {
	background: var(--yahu-or-600);
	color: var(--yahu-encre);
}

/* ==========================================================================
   5. CARTES
   ========================================================================== */

.yahu-card {
	background: var(--yahu-fond);
	border: 1px solid var(--yahu-bord);
	border-radius: var(--r-l);
	padding: var(--e-6) var(--e-6) var(--e-8);
	box-shadow: var(--o-1);
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease,
	            border-color .2s ease;
}

.yahu-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--o-2);
	border-color: var(--yahu-vert-100);
}

.yahu-card h3 {
	margin: var(--e-2) 0 var(--e-3);
	font-size: var(--t-2xl);
}

.yahu-card p:last-child { margin-bottom: 0; }

/* Liseré de marque en haut de carte : repère visuel discret. */
.yahu-card--marque { border-top: 3px solid var(--yahu-vert-600); }
.yahu-card--or { border-top: 3px solid var(--yahu-or-500); }

/* ==========================================================================
   6. ENCADRÉS
   ========================================================================== */

.yahu-note,
.yahu-callout {
	background: var(--yahu-vert-50);
	border-left: 4px solid var(--yahu-vert-600);
	border-radius: var(--r-m);
	padding: var(--e-5) var(--e-6);
	margin: var(--e-8) 0;
}

.yahu-note p:last-child,
.yahu-callout p:last-child { margin-bottom: 0; }

/* Avertissement santé : l'or signale l'information à ne pas manquer. */
.yahu-disclaimer {
	background: var(--yahu-or-50);
	border-left: 4px solid var(--yahu-or-500);
	border-radius: var(--r-m);
	padding: var(--e-5) var(--e-6);
	margin: var(--e-8) 0;
	font-size: var(--t-s);
	color: var(--yahu-ardoise);
	line-height: 1.7;
}

.yahu-disclaimer p { font-size: var(--t-s); }

/* Mise en avant forte : une seule par page, pour rester efficace. */
.yahu-mise-avant {
	background: linear-gradient(135deg, var(--yahu-vert-800) 0%, var(--yahu-vert-600) 100%);
	color: #fff;
	border-radius: var(--r-xl);
	padding: var(--e-10) var(--e-8);
	margin: var(--e-10) 0;
	text-align: center;
}

.yahu-mise-avant h2,
.yahu-mise-avant h3 { color: #fff; margin-top: 0; }
.yahu-mise-avant p { color: rgba(255, 255, 255, .92); }
.yahu-mise-avant a:not(.wp-block-button__link) { color: #fff; }

/* ==========================================================================
   6bis. COMPOSANTS DE PAGE (prestations, étapes, bandeaux)
   ========================================================================== */

/* Bandeau d'introduction : dégradé de marque, sans photo de stock. */
.yahu-bandeau {
	background: linear-gradient(135deg, var(--yahu-vert-800) 0%, var(--yahu-vert-600) 100%);
	border-radius: var(--r-xl);
	padding: var(--e-16) var(--e-6);
	margin: 0 0 var(--e-8);
	text-align: center;
}

.yahu-bandeau h1,
.yahu-bandeau h2 {
	color: #fff;
	margin: 0 0 var(--e-4);
}

.yahu-bandeau .yahu-lead {
	color: rgba(255, 255, 255, .93);
	max-width: 660px;
	margin: 0 auto var(--e-8);
}

.yahu-bandeau .yahu-badge {
	background: rgba(255, 255, 255, .16);
	color: #fff;
	border-color: rgba(255, 255, 255, .28);
}

.yahu-bandeau .wp-block-buttons { justify-content: center; }

/* Section de page : rythme vertical constant entre les blocs. */
.yahu-section { margin: 0 0 var(--e-16); }
.yahu-section > h2 { margin-top: 0; }

.yahu-section--soft {
	background: var(--yahu-fond-2);
	border-radius: var(--r-xl);
	padding: var(--e-12) var(--e-8);
}

.yahu-section--note {
	background: var(--yahu-or-50);
	border: 1px solid rgba(212, 175, 55, .28);
	border-radius: var(--r-xl);
	padding: var(--e-12) var(--e-8);
}

/* Numéro d'ordre : repère visuel, pas une décoration. */
.yahu-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--r-m);
	background: var(--yahu-vert-50);
	color: var(--yahu-vert-700);
	border: 1px solid var(--yahu-vert-100);
	font-family: var(--f-titre);
	font-size: 1.15rem;
	line-height: 1;
	margin-bottom: var(--e-2);
}

.yahu-num--or {
	background: var(--yahu-or-50);
	color: var(--yahu-or-700);
	border-color: rgba(212, 175, 55, .35);
}

/* Prestation détaillée : bloc aéré, séparé du suivant. */
.yahu-prestation {
	border-top: 1px solid var(--yahu-bord);
	padding-top: var(--e-10);
	margin: 0 0 var(--e-10);
}

.yahu-prestation:first-of-type { border-top: 0; padding-top: 0; }

.yahu-prestation h3 {
	margin: 0 0 var(--e-4);
	font-size: var(--t-2xl);
}

.yahu-prestation > p:first-of-type {
	font-size: var(--t-l);
	color: var(--yahu-ardoise);
}

.yahu-prestation .yahu-note { margin-bottom: 0; }

/* Liste à puces cochées : pour les prestations et les garanties. */
.yahu-liste-check {
	list-style: none;
	padding-left: 0;
	margin: var(--e-5) 0;
}

.yahu-liste-check li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: var(--e-3);
	line-height: 1.65;
}

.yahu-liste-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .42em;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: var(--yahu-vert-50);
	border: 1px solid var(--yahu-vert-100);
}

.yahu-liste-check li::after {
	content: "";
	position: absolute;
	left: .36rem;
	top: .62em;
	width: .32rem;
	height: .58rem;
	border: solid var(--yahu-vert-600);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.yahu-liste-check li::marker { content: none; }

/* ==========================================================================
   7. BADGES ET SIGNAUX DE CONFIANCE
   ========================================================================== */

.yahu-badge {
	display: inline-block;
	padding: .3rem .75rem;
	border-radius: var(--r-plein);
	font-family: var(--f-texte);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	background: var(--yahu-vert-50);
	color: var(--yahu-vert-700);
	border: 1px solid var(--yahu-vert-100);
}

.yahu-badge--or {
	background: var(--yahu-or-50);
	color: var(--yahu-or-700);
	border-color: rgba(212, 175, 55, .35);
}

.yahu-badge--neutre {
	background: var(--yahu-fond-3);
	color: var(--yahu-doux);
	border-color: var(--yahu-bord);
}

/* Bandeau de confiance : paiement, livraison, conseil. */
.yahu-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2) var(--e-6);
	justify-content: center;
	align-items: center;
	padding: var(--e-4) var(--e-6);
	background: var(--yahu-fond-2);
	border: 1px solid var(--yahu-bord);
	border-radius: var(--r-plein);
	margin: var(--e-6) 0;
	font-size: var(--t-s);
	font-weight: 500;
	color: var(--yahu-ardoise);
}

.yahu-trust p {
	font-size: var(--t-s);
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

/* ==========================================================================
   8. TABLEAUX
   ========================================================================== */

.entry-content table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: var(--e-8) 0;
	font-size: var(--t-m);
	border: 1px solid var(--yahu-bord);
	border-radius: var(--r-m);
	overflow: hidden;
}

.entry-content th {
	background: var(--yahu-vert-50);
	color: var(--yahu-encre);
	font-family: var(--f-texte);
	font-weight: 700;
	text-align: left;
	padding: var(--e-3) var(--e-4);
	font-size: var(--t-s);
	letter-spacing: .02em;
	text-transform: uppercase;
}

.entry-content td {
	padding: var(--e-3) var(--e-4);
	border-top: 1px solid var(--yahu-bord);
	vertical-align: top;
}

.entry-content tbody tr:nth-child(even) { background: var(--yahu-fond-2); }

/* ==========================================================================
   9. FORMULAIRES
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
	font-family: var(--f-texte);
	font-size: var(--t-m);
	color: var(--yahu-encre);
	background: var(--yahu-fond);
	border: 1.5px solid var(--yahu-bord-fort);
	border-radius: var(--r-m);
	padding: .8rem 1rem;
	width: 100%;
	min-height: 44px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--yahu-vert-600);
	box-shadow: var(--anneau);
}

::placeholder { color: var(--yahu-doux); opacity: 1; }

label {
	font-size: var(--t-s);
	font-weight: 600;
	color: var(--yahu-ardoise);
	margin-bottom: var(--e-1);
	display: block;
}

/* ==========================================================================
   10. CARTES PRODUITS
   ========================================================================== */

ul.products li.product {
	border: 1px solid var(--yahu-bord);
	border-radius: var(--r-l);
	overflow: hidden;
	background: var(--yahu-fond);
	box-shadow: var(--o-1);
	transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease;
	display: flex;
	flex-direction: column;
	padding-bottom: var(--e-4);
}

ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--o-2);
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--f-titre);
	font-size: var(--t-xl);
	line-height: 1.3;
	color: var(--yahu-encre);
	padding: var(--e-4) var(--e-4) var(--e-2);
	margin: 0;
}

ul.products li.product .price {
	color: var(--yahu-vert-700);
	font-weight: 700;
	font-size: var(--t-l);
	padding: 0 var(--e-4);
	margin: var(--e-2) 0;
}

ul.products li.product .button,
ul.products li.product .add_to_cart_button {
	margin: auto var(--e-4) 0;
	width: calc(100% - 2rem);
	text-align: center;
}

/* ==========================================================================
   11. STRUCTURE DE PAGE
   ========================================================================== */

.entry-header { margin-bottom: var(--e-8); }

.entry-content hr,
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--yahu-bord);
	margin: var(--e-12) 0;
}

.entry-content blockquote,
.wp-block-quote {
	border-left: 4px solid var(--yahu-vert-600);
	background: var(--yahu-fond-2);
	border-radius: var(--r-m);
	padding: var(--e-5) var(--e-6);
	margin: var(--e-8) 0;
	font-style: normal;
	color: var(--yahu-ardoise);
}

.entry-content blockquote p { font-size: var(--t-l); }

.entry-content img:not(.custom-logo):not(.emoji) {
	border-radius: var(--r-m);
}

.entry-content ul:not(.wp-block-list) li::marker,
.entry-content .wp-block-list li::marker {
	color: var(--yahu-vert-600);
	font-weight: 700;
}

/* Colonnes : espacement constant, empilement net sur mobile. */
.wp-block-columns { gap: var(--e-8); }

/* ==========================================================================
   12. OVERRIDES SPECTRA (bleu WordPress)
   ========================================================================== */

.uagb-highlight,
.wp-block-uagb-advanced-heading .uagb-highlight {
	background: var(--yahu-vert-50) !important;
	color: var(--yahu-vert-700) !important;
	-webkit-text-fill-color: var(--yahu-vert-700) !important;
	padding: .04em .22em;
	border-radius: 4px;
}

.uagb-highlight::selection {
	background: var(--yahu-vert-600) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

::selection { background: var(--yahu-vert-600); color: #fff; }

/* ==========================================================================
   13. WOOCOMMERCE
   ========================================================================== */

.woocommerce-info,
.woocommerce-message {
	border-top-color: var(--yahu-vert-600);
	background: var(--yahu-vert-50);
	color: var(--yahu-encre);
	border-radius: var(--r-m);
}

.woocommerce-info::before,
.woocommerce-message::before { color: var(--yahu-vert-600); }

.woocommerce-error { border-top-color: var(--yahu-argile); }

.woocommerce-breadcrumb { font-size: var(--t-s); color: var(--yahu-doux); }

/* ==========================================================================
   14. EN-TÊTE ET PIED DE PAGE
   ========================================================================== */

.ast-menu-toggle,
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item.current-menu-item > .menu-link {
	color: var(--yahu-vert-700);
}

.custom-logo { border-radius: var(--r-s); }
.wpyahu-switcher img { border-radius: 3px; }

/* ==========================================================================
   15. ACCESSIBILITÉ
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
.wp-block-button__link:focus-visible {
	outline: none;
	box-shadow: var(--anneau);
}

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

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   16. RESPONSIVE ET MOBILE
   ==========================================================================
   Le site est consulté majoritairement sur téléphone, en Côte d'Ivoire et
   dans la diaspora. Chaque règle ci-dessous corrige un défaut réellement
   visible sur un écran étroit, pas un défaut théorique.
   ========================================================================== */

/* ==========================================================================
   17. CIBLES TACTILES — pied de page, contacts, réseaux sociaux
   ==========================================================================
   Mesuré à 360 px : les liens du pied de page occupent 21 à 29 px de haut,
   les icônes de réseaux sociaux 38 px, et les liens de contact 22 px. En
   dessous de 40 px, le pouce du visiteur rate régulièrement sa cible.
   ========================================================================== */

/* --- Liens du pied de page -------------------------------------------------
   Le pied de page est parcouru au pouce, sans possibilité de se corriger
   d'un geste. On leur donne une zone de contact confortable. */
.wp-site-blocks > footer a[href],
.wp-site-blocks > footer .wp-block-social-links a,
.wp-site-blocks > footer .wp-block-navigation-item a,
.footer-widgets a[href],
.site-footer a[href],
.wp-block-template-part[class*="footer"] a[href] {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 8px 6px;
}

/* Les icônes de réseaux sociaux : la zone cliquable est le carré lui-même. */
.wp-block-social-links a,
.wp-social-link,
.wp-block-social-links .wp-social-link-anchor {
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --- Liens de contact et de coordonnées -------------------------------------
   Téléphone, e-mail, WhatsApp : ce sont souvent les seuls moyens de joindre
   le site. Une zone trop petite est un client perdu. */
.wp-block-columns a[href^="tel:"],
.wp-block-columns a[href^="mailto:"],
.wp-block-columns a[href*="wa.me"],
.wp-block-columns a[href*="whatsapp"],
.entry-content a[href^="tel:"],
.entry-content a[href^="mailto:"],
.entry-content a[href*="wa.me"],
.entry-content a[href*="whatsapp"] {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 8px 4px;
}

/* --- Le pied de page du thème Astra (hors blocs) --------------------------- */
.site-footer .ast-footer-copyright a,
.ast-footer-copyright a,
#ast-footer .ast-footer-site-data a,
.footer-adv-overlay .ast-footer-adv a,
.site-footer ul.menu a,
.site-footer .widget a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 6px 4px;
}

/* --- Le sélecteur de langue : douze liens côte à côte ----------------------
   Le plugin de traduction place sa liste en bas à droite. Chaque lien est une
   ligne de 29 px : trop juste pour le pouce. On la remonte à 44 px et on
   évite que la liste ne se referme trop vite au passage de la souris. */
.wplng-switcher a[href],
.wplng-language,
.wplng-languages a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 8px 10px;
}

.wplng-switcher {
	padding: 6px;
	border-radius: var(--r-m);
}

.wplng-switcher .wplng-languages {
	max-height: none;
}

/* --- Catégories de produits et légendes courtes ------------------------------ */
.product-categories a,
.ast-woocommerce-product-category,
.wc-block-product-category-list-item a,
.wc-block-product-category-list a,
.ast-loop-product__category,
.woocommerce-loop-category__title {
	font-size: 14px !important;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Les étiquettes de catégorie au-dessus d'un produit. */
.ast-woo-product-category,
.wc-block-components-product-category-list-item a,
li.product .ast-woo-product-category a {
	min-height: 44px;
	padding: 4px 0;
}

/* --- Liens de produit et « Lire la suite » ----------------------------------
   Les cartes de produits n'ont pas de classe propre : leur zone cliquable
   est le titre lui-même. On leur donne une hauteur confortable sans changer
   leur apparence. */
.wc-block-product-template a[href^*="produit"],
.wc-block-components-product-title a,
.wc-block-components-product-name,
.woocommerce ul.products li.product a[href*="/produit/"],
.astra-cart-drawer .wc-block-components-product-name a,
.wp-block-woocommerce-product-template a[href*="/produit/"] {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 8px 0;
	font-size: 14px !important;
}

/* « Lire la suite » des articles récents. */
.wp-block-latest-posts__read-more,
.wp-block-latest-posts li a.wp-block-latest-posts__read-more,
.entry-summary a.read-more,
.ast-read-more {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 10px 4px;
	font-size: 14px !important;
}

/* --- Les liens de catégories de la boutique (sans classe) -------------------
   Sur la page Boutique, les noms de catégories sont des liens nus. On les
   cible par leur place dans la liste des catégories. */
.wc-block-product-categories a,
.woocommerce .product-categories a,
.wp-block-woocommerce-product-categories a,
.product-categories a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 8px 4px;
	font-size: 14px !important;
}

/* --- Métadonnées des articles du blog ---------------------------------------
   Sur la page Blog, chaque carte affiche la catégorie, l'auteur et la date :
   trois liens par carte, à 17 px de haut. Sur téléphone, ce sont des cibles
   impossibles à viser au pouce. On les remonte.

   Les classes réelles du thème Astra, mesurées dans le HTML produit :
     <div class="entry-meta">
       <span class="posted-on">…</span>
       <span class="ast-taxonomy-container cat-links default"><a …>
       <span class="posted-by vcard author"><a …>
*/
.entry-meta a,
.entry-meta .cat-links a,
.entry-meta .ast-taxonomy-container a,
.entry-meta .posted-by a,
.entry-meta .byline a,
.entry-meta .posted-on a,
.entry-meta .ast-taxonomy-container a[href],
.entry-header .entry-meta a,
.ast-blog-meta-container a,
.ast-blog-meta-container .entry-meta a,
.ast-separate-meta-items a,
.entry-meta span a,
article .entry-meta a,
.ast-article-post .entry-meta a,
.ast-article-single .entry-meta a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 10px 4px;
	font-size: 14px !important;
}

/* La date d'un article, quand elle est un lien. */
.entry-meta .posted-on a,
.entry-meta time a,
a.entry-date,
.entry-meta .published a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 10px 4px;
	font-size: 14px !important;
}

/* --- Le bouton « Lire : » des extraits ------------------------------------- */
.wp-block-latest-posts__post-excerpt a,
.wp-block-latest-posts__read-more,
.entry-content .wp-block-latest-posts__read-more,
a.wp-block-latest-posts__read-more,
.wp-block-latest-posts li > a:last-child {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 10px 4px;
	font-size: 14px !important;
}

/* Le titre d'un article dans une liste : c'est le lien principal. */
.entry-title a,
.wp-block-latest-posts__post-title a,
.ast-blog-single-element a,
h2.entry-title a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 8px 0;
}

/* --- Les boutons « Ajouter au panier » des cartes --------------------------- */
.wc-block-components-product-button__button,
.ast-loop-product__link,
.ast-card-action-wrap a,
.ast-wc-product-category-list-item a,
.woocommerce ul.products li.product .button,
.wp-block-woocommerce-product-template .wc-block-components-product-button__button,
a.wp-block-button__link[href*="add-to-cart"],
.wp-block-button__link[href*="add-to-cart"],
.wc-block-components-product-button a,
.wc-block-components-product-button__link {
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	font-size: 14px !important;
}

/* --- Liens de navigation du pied de page et du contenu ---------------------
   Règle de repli pour tout lien interne du contenu et du pied de page. */
.wp-block-group a[href^="https://yahusante.com/"],
.wp-block-columns a[href^="https://yahusante.com/"],
.wp-site-blocks a[href^="https://yahusante.com/"] {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 8px 4px;
}

/* Les liens de pagination. */
.pagination a,
.nav-links a,
.wp-block-query-pagination a,
.ast-pagination a {
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 12px;
}

/* --- Les boutons « Ajouter au panier » des cartes --------------------------- */
.wc-block-components-product-button__button,
.ast-loop-product__link,
.ast-card-action-wrap a,
.ast-wc-product-category-list-item a,
.woocommerce ul.products li.product .button,
.wp-block-woocommerce-product-template .wc-block-components-product-button__button,
a.wp-block-button__link[href*="add-to-cart"],
.wp-block-button__link[href*="add-to-cart"] {
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	font-size: 14px !important;
}

/* --- Aucun débordement horizontal -----------------------------------------
   Cause la plus fréquente d'une page mobile « cassée » : un élément plus
   large que l'écran, qui force un défilement horizontal sur toute la page.
   Ces deux règles sont le filet de sécurité général. */
html, body { max-width: 100%; overflow-x: hidden; }

img, video, iframe, svg, table, pre {
	max-width: 100%;
}

img, video { height: auto; }

/* Les mots très longs (URLs, noms de produits) ne doivent pas élargir la page. */
p, li, h1, h2, h3, h4, a { overflow-wrap: break-word; }

/* --- Tableaux : défilement propre -----------------------------------------
   Un tableau de plus de trois colonnes ne peut pas tenir sur 360 px. Plutôt
   que de l'écraser jusqu'à l'illisible, on le laisse défiler horizontalement
   à l'intérieur de son cadre — la page, elle, ne défile pas. */
.entry-content .wp-block-table,
.entry-content figure.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.entry-content .wp-block-table table,
.entry-content figure.wp-block-table table {
	min-width: 480px;
	border-collapse: collapse;
}

/* Repère visuel : le tableau est défilable. */
.entry-content .wp-block-table::-webkit-scrollbar { height: 6px; }
.entry-content .wp-block-table::-webkit-scrollbar-thumb {
	background: var(--yahu-vert-100);
	border-radius: 3px;
}

/* --- Images : jamais plus hautes que l'écran ------------------------------ */
.entry-content img:not(.custom-logo) {
	max-height: 80vh;
	object-fit: cover;
}

/* Les images de fond des blocs « cover » gardent leur cadrage. */
.wp-block-cover__image-background {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* --- Cibles tactiles ------------------------------------------------------
   Apple et Google recommandent 44 px minimum. En dessous, le visiteur rate
   son clic — particulièrement gênant pour « Ajouter au panier ».

   Pourquoi trois sélecteurs par élément : Astra définit ces hauteurs avec
   deux classes sur un élément ancêtre (par exemple
   « .main-header-bar-navigation .main-header-menu a »). Un sélecteur à une
   seule classe perd toujours contre ça, aussi charge-t-on en dernier. Il faut
   donc dépasser cette spécificité, d'où la répétition du sélecteur sur
   lui-même, qui la triple sans toucher au reste de la page. */
.ast-main-header-bar-navigation .main-header-menu a,
.ast-main-header-bar-navigation .main-header-menu .menu-link,
.ast-desktop .main-header-menu > .menu-item > .menu-link,
.site-header .main-header-menu a,
.main-header-menu a[href],
.ast-mobile-header-wrap .main-header-menu a {
	min-height: 44px;
	padding-top: 12px;
	padding-bottom: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ast-menu-toggle,
.menu-toggle,
.ast-button-wrap .menu-toggle {
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-button__link,
.wp-element-button,
.ast-loop-product__link,
.ast-card-action-wrap a,
button[type="submit"],
input[type="submit"],
.ast-loop-product__link a,
.ast-woo-shop-product-outer-wrap a {
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
}

/* Le logo : sa zone cliquable est le texte lui-même. */
.site-title a,
.custom-logo-link,
.site-branding .site-title a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Le sélecteur de langue. */
.wpyahu-switcher,
.wpyahu-switcher a,
.wpml-ls-item a {
	min-height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
}

/* Le tiroir panier, une fois ouvert. */
.astra-cart-drawer.is-open .astra-cart-drawer-close {
	min-height: 44px;
	min-width: 44px;
}

/* Liens dans un paragraphe : on ne les force pas à 44 px (cela casserait la
   lecture), mais on leur donne une zone de contact suffisante. */
.entry-content p a,
.entry-content li a {
	padding: 2px 4px;
}

/* --- Textes trop petits sur téléphone -------------------------------------
   Ces tailles proviennent du thème et des plugins ; sur un écran de 360 px,
   10 px sont franchement illisibles. On remonte à 14 px minimum, sans
   toucher à la taille des titres ni à celle des tableaux. */
.site-description,
.site-branding .site-description {
	font-size: 14px !important;
	line-height: 1.4;
}

/* Le nom d'auteur et la date d'un article. */
.author-name,
.entry-meta .author-name,
.published,
.entry-meta .posted-on,
.entry-meta time {
	font-size: 14px !important;
}

/* Boutons de produits : la zone de texte reste petite. */
.ast-loop-product__link,
.ast-card-action-wrap a,
.wc-block-components-product-button__button {
	font-size: 14px !important;
}

/* Bandeau de consentement du plugin de cookies : ses textes sont à 12 px. */
.cmplz-message,
.cmplz-link,
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-link {
	font-size: 14px !important;
	line-height: 1.5;
}

/* Les catégories de produits et les légendes courtes. */
.product-categories a,
.ast-woocommerce-product-category,
.wc-block-product-category-list-item a {
	font-size: 14px !important;
}

/* --- Champs de formulaire : 16 px minimum --------------------------------
   En dessous de 16 px, iOS zoome automatiquement au focus et le visiteur
   se retrouve avec la page agrandie. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea,
.srfm-input,
.srfm-select,
.srfm-textarea {
	font-size: 16px !important;
	min-height: 44px;
	width: 100%;
	max-width: 100%;
}

textarea { min-height: 120px; }

/* --- Espacement : plus serré sur petit écran ------------------------------ */
@media (max-width: 921px) {
	:root {
		--e-16: 3rem;
		--e-20: 3.5rem;
	}
}

@media (max-width: 781px) {
	.wp-block-columns { gap: var(--e-6); }
	.yahu-trust { border-radius: var(--r-m); }
	.yahu-mise-avant { padding: var(--e-8) var(--e-5); border-radius: var(--r-l); }

	/* Les colonnes s'empilent : c'est le comportement attendu, on s'assure
	   qu'elles le font bien et qu'elles prennent toute la largeur. */
	.wp-block-columns { flex-wrap: wrap; }
	.wp-block-column { flex-basis: 100% !important; min-width: 100%; }

	/* Les grilles de produits passent à deux colonnes, pas une : une seule
	   colonne obligerait à faire défiler sans fin. */
	.wp-block-woocommerce-product-collection .wc-block-product-template,
	ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: var(--e-4) !important;
	}

	/* Les marges négatives des blocs larges sont neutralisées. */
	.alignwide, .alignfull { margin-left: 0 !important; margin-right: 0 !important; }

	/* Le titre d'un bandeau reste lisible sans occuper tout l'écran. */
	.yahu-bandeau { padding: var(--e-10) var(--e-5); border-radius: var(--r-l); }
}

@media (max-width: 544px) {
	:root {
		--t-4xl: 1.9rem;
		--t-3xl: 1.6rem;
		--e-12: 2.25rem;
	}

	body { font-size: 16px; }
	.yahu-card { padding: var(--e-5); }
	p, li { font-size: var(--t-m); }
	.entry-content table { font-size: var(--t-s); }

	/* Titres : plus compacts, sans descendre sous 22 px pour un h1. */
	h1 { font-size: 1.7rem; }
	h2 { font-size: 1.4rem; }
	h3 { font-size: 1.2rem; }

	/* Les boutons prennent toute la largeur : plus faciles à viser au pouce. */
	.wp-block-buttons { flex-direction: column; gap: var(--e-3); }
	.wp-block-button, .wp-block-button__link { width: 100%; }

	/* Espacement vertical réduit, le pouce fatigue. */
	.yahu-section { margin-bottom: var(--e-10); }
	.yahu-prestation { padding-top: var(--e-8); margin-bottom: var(--e-8); }

	/* Une seule colonne pour les produits : l'image est plus grande, donc
	   plus lisible, et le prix reste visible sans zoomer. */
	.wp-block-woocommerce-product-collection .wc-block-product-template,
	ul.products {
		grid-template-columns: 1fr !important;
	}

	/* Le bandeau de confiance s'empile proprement. */
	.yahu-trust { flex-direction: column; align-items: flex-start; }

	/* Les tableaux restent défilables, jamais écrasés. */
	.entry-content .wp-block-table table { min-width: 420px; }
}

/* --- Très petits écrans (iPhone SE, 320 px) -------------------------------- */
@media (max-width: 380px) {
	h1 { font-size: 1.5rem; }
	h2 { font-size: 1.3rem; }
	.yahu-bandeau { padding: var(--e-8) var(--e-4); }
	.yahu-card { padding: var(--e-4); }
}

/* --- Orientation paysage sur téléphone ------------------------------------- */
@media (max-width: 921px) and (orientation: landscape) {
	.entry-content img:not(.custom-logo) { max-height: 60vh; }
}

/* --- Impression ------------------------------------------------------------ */
@media print {
	.yahu-bandeau, .yahu-mise-avant, .wp-block-buttons,
	.ast-menu-toggle, nav, .yahu-trust { display: none !important; }
	body { color: #000; background: #fff; }
	a::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}