/**
 * ECLORAY — FONDATIONS UI
 *
 * PÉRIMÈTRE DE CE FICHIER EN PHASE 4.2 : uniquement les fondations HTML de
 * base (reset léger, body, headings, liens, focus générique). Les
 * composants complexes (Button, Card, FormField, Badge, Accordion,
 * Pagination, Filter, Search, Navigation, Icon, Price) sont explicitement
 * hors périmètre de cette phase (Phase 4.2, section 4) — ils seront
 * ajoutés à ce fichier (ou scindés si le volume le justifie) en Phase 4.3.
 */

/* ---- Reset léger ---- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var(--color-ivory);
	color: var(--color-black);
	font: var(--text-body);
	-webkit-font-smoothing: antialiased;
	/* FINITION 2026-09-09 (QA build 1.6.7), point 16 : filet de
	   sécurité global contre tout débordement horizontal de texte
	   (ex. "Foire aux questions" sur Contact, déjà PASS en l'état
	   mais vérifié à toutes les largeurs demandées) — n'affecte pas
	   la césure normale des mots, agit uniquement si un mot isolé
	   dépasse la largeur du conteneur. */
	overflow-wrap: break-word;
}
html {
	overflow-x: hidden;
}

/* ---- Titres ---- */
h1 { font: var(--text-h1); font-family: var(--font-heading); margin: 0 0 var(--space-3) 0; }
h2 { font: var(--text-h2); font-family: var(--font-heading); margin: 0 0 var(--space-3) 0; }
h3 { font: var(--text-h3); margin: 0 0 var(--space-2) 0; }

/* ---- Paragraphes et listes ---- */
p { margin: 0 0 var(--space-3) 0; }
ul, ol { margin: 0 0 var(--space-3) 0; padding-left: var(--space-3); }

/* ---- Citations (DA-UI, Brand System §3.6 : interligne ≥150%) ---- */
blockquote {
	font: var(--text-quote);
	margin: var(--space-5) 0;
	padding-left: var(--space-3);
	border-left: var(--border-width-hairline) solid var(--border-opacity-20);
}

/* ---- Liens (comportement de base ; variantes de composant en Phase 4.3) ---- */
a {
	color: var(--color-black);
	text-decoration: underline;
	text-underline-offset: 2px;
}
a:hover {
	color: var(--color-champagne);
}

/* ---- Images ---- */
img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ---- Séparateurs ---- */
hr {
	border: none;
	border-top: var(--border-width-hairline) solid var(--border-opacity-8);
	margin: var(--space-6) 0;
}

/* ---- Focus générique (Technical Lock, section Focus) ----
 * :focus-visible plutôt que :focus, pour n'afficher l'anneau qu'à la
 * navigation clavier, sans l'imposer au clic souris. Les composants avec
 * un traitement de focus dédié (ex. champ de formulaire, 1,5px Or
 * Champagne) surchargeront cette règle générique en Phase 4.3.
 */
:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

/* ---- Sélection de texte ----
 * NON DOCUMENTÉ par le Brand System / Technical Lock — aucune valeur
 * n'est inventée ici ; le comportement natif du navigateur s'applique.
 */


/* ==========================================================================
   COMPOSANTS — Phase 4.3
   Chaque règle ci-dessous consomme exclusivement les tokens définis dans
   brand/secondary/functional/system.tokens.css. Aucune valeur codée en
   dur ne remplace un token existant (section 36 du prompt Phase 4.3).
   ========================================================================== */

/* ---- BUTTON (Niveau 1) ----
 * Primary = style par défaut de core/button, déjà câblé dans theme.json
 * (styles.elements.button). Secondary et Text sont les variantes
 * enregistrées via inc/blocks/style-variations.php (is-style-secondary,
 * is-style-text) — ciblées ici par leur classe native Gutenberg.
 */
.wp-block-button.is-style-secondary .wp-block-button__link {
	background: transparent;
	color: var(--color-black);
	border: var(--border-width-hairline) solid var(--color-black);
	border-radius: var(--radius-md);
	font: var(--text-interface);
	padding-inline: var(--space-4);
	height: 48px;
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover {
	border-color: var(--color-champagne);
	color: var(--color-champagne);
}
.wp-block-button.is-style-secondary .wp-block-button__link:active {
	border-color: var(--color-dark-gold);
	color: var(--color-dark-gold);
}

.wp-block-button.is-style-text .wp-block-button__link {
	background: none;
	border: none;
	color: var(--color-black);
	text-decoration: underline;
	font: var(--text-interface);
	padding: 0;
}
.wp-block-button.is-style-text .wp-block-button__link:hover {
	color: var(--color-champagne);
}

/* Règle de gouvernance rappelée en commentaire (section 13 du prompt) :
 * un seul .wp-block-button (Primary, style par défaut) est destiné à
 * apparaître par section — contrôle éditorial/QA, pas une contrainte
 * technique imposable en CSS pur. */

/* ---- BADGE (Niveau 2) ---- */
.ecloray-badge {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding-inline: 10px;
	border-radius: var(--radius-sm);
	font: 400 11px var(--font-body); /* corrigé de 500 (inexistant en Liberation Sans) — GOV-TYPO-001 */
	line-height: 1;
}
.ecloray-badge--new {
	background: var(--color-black);
	color: var(--color-ivory);
}
.ecloray-badge--promo {
	background: transparent;
	border: var(--border-width-hairline) solid var(--color-dark-gold);
	color: var(--color-dark-gold);
}

/* ---- PRICE (Niveau 2) ---- */
.ecloray-price {
	font: var(--text-price);
	color: var(--color-black);
}
.ecloray-price--promo {
	color: var(--color-dark-gold);
}
.ecloray-price__old {
	font: var(--text-price);
	opacity: 0.45;
	text-decoration: line-through;
	margin-inline-start: var(--space-1);
}

/* ---- FORMFIELD (Niveau 2) ---- */
.ecloray-form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-bottom: var(--space-3);
}
.form-field-label {
	font: var(--text-interface);
}
.form-field {
	height: 48px;
	padding-inline: var(--space-2);
	border: var(--border-width-hairline) solid var(--border-opacity-25);
	border-radius: var(--radius-md);
	background: var(--color-white);
	font: var(--text-body);
	font-size: 15px;
	color: var(--color-black);
}
textarea.form-field {
	height: auto;
	min-height: 128px;
	padding-block: var(--space-2);
}
/* FINITION 2026-09-08 : le <select> utilisait déjà .form-field (bordure,
   hauteur, radius identiques aux autres champs) mais conservait la
   flèche native du système d'exploitation, contribuant à l'aspect
   "HTML natif" signalé. Chevron personnalisé cohérent avec la palette
   (Or Foncé), appearance retirée. */
select.form-field {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A8783A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-2) center;
	padding-inline-end: var(--space-5, 32px);
}
.form-field:focus-visible {
	border: var(--border-width-focus-field) solid var(--color-champagne);
	outline: none; /* évite la double bordure avec le focus générique (section 30 du prompt) */
}
.form-field--error {
	border-color: var(--color-error);
}
.form-field--success {
	border-color: var(--color-success);
}
.form-field:disabled {
	background: var(--border-opacity-8);
	color: rgba(26, 26, 24, 0.45);
	cursor: not-allowed;
}
.ecloray-form-field__description {
	font: var(--text-caption);
	color: rgba(26, 26, 24, 0.65);
	margin: 0;
}
.ecloray-form-field__message {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font: var(--text-caption);
	margin: 0;
}
.ecloray-form-field__message--error {
	color: var(--color-error);
}
.ecloray-form-field__message--success {
	color: var(--color-success);
}

/* ---- CARD (Niveau 3) ---- */
.card {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	background: var(--color-ivory);
	border: var(--border-width-hairline) solid var(--border-opacity-12);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-none);
	padding: var(--space-3);
}
.card__image {
	overflow: hidden;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-2);
}
.card__image--product { aspect-ratio: 3 / 4; }
.card__image--article { aspect-ratio: 16 / 9; }
.card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--motion-card-image);
}
.card:hover .card__image img {
	transform: scale(1.02); /* zoom 1.02 maximum, déjà verrouillé */
}
.card__title {
	font: var(--text-card-title);
	margin: 0;
}
.card__title a {
	color: var(--color-black);
	text-decoration: none;
}
.card__title a:hover {
	color: var(--color-champagne);
}
.card__description {
	font: var(--text-body);
	margin: 0;
}
.card__meta {
	font: var(--text-metadata);
	color: rgba(26, 26, 24, 0.65);
	margin: 0;
}
.card:hover {
	border-color: var(--color-champagne);
}
.card:focus-within {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}
@media (prefers-reduced-motion: reduce) {
	.card:hover .card__image img {
		transform: none; /* suppression du zoom, cohérent avec system.tokens.css */
	}
}

/* ---- ACCORDION (Niveau 3) ----
 * Construit sur l'élément HTML natif <details>/<summary> — nativement
 * accessible au clavier et aux technologies d'assistance, sans ARIA
 * manuel requis. Voir assets/js/modules/accordion.js pour le filet de
 * sécurité d'exclusivité sur navigateurs anciens.
 */
.ecloray-accordion-item {
	border-bottom: var(--border-width-hairline) solid var(--border-opacity-8);
}
.ecloray-accordion-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--space-2);
	font: var(--text-emphasis-sm);
	cursor: pointer;
	list-style: none; /* masque le triangle natif par défaut du navigateur */
}
.ecloray-accordion-item summary::-webkit-details-marker {
	display: none; /* équivalent Safari/Chrome de list-style: none sur summary */
}
.ecloray-accordion-item summary .ecloray-accordion__chevron {
	transition: transform var(--motion-accordion);
}
.ecloray-accordion-item[open] summary .ecloray-accordion__chevron {
	transform: rotate(180deg);
}
.ecloray-accordion-item summary:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}
.ecloray-accordion__content {
	padding-block-end: var(--space-3);
	font: var(--text-utility);
}

/* ---- SEARCH (Niveau 4) ---- */
.wp-block-search.is-style-ecloray .wp-block-search__input {
	height: 48px;
	border: var(--border-width-hairline) solid var(--border-opacity-25);
	border-radius: var(--radius-md);
	background: var(--color-white);
	font: var(--text-body);
	font-size: 15px;
	padding-inline: var(--space-2);
}
.wp-block-search.is-style-ecloray .wp-block-search__input:focus-visible {
	border: var(--border-width-focus-field) solid var(--color-champagne);
	outline: none;
}
.wp-block-search.is-style-ecloray .wp-block-search__button {
	background: var(--color-black);
	color: var(--color-ivory);
	border-radius: var(--radius-md);
	border: none;
	padding-inline: var(--space-3);
}
.wp-block-search.is-style-ecloray .wp-block-search__button:hover {
	background: var(--color-champagne);
	color: var(--color-black);
}
.ecloray-search-empty-state,
.ecloray-empty-state--editorial {
	text-align: center;
	padding: var(--space-6) var(--space-3);
	font: var(--text-body);
	color: rgba(26, 26, 24, 0.65);
}

/* FINITION 2026-09-08 : état vide éditorial du Blog — distinct du
   message technique générique, sans inventer d'article. */
.ecloray-blog-empty-state {
	text-align: center;
	padding: var(--space-7, 64px) var(--space-4, 24px);
	max-width: 520px;
	margin: 0 auto;
}
.ecloray-blog-empty-state__eyebrow {
	color: var(--color-dark-gold);
}
.ecloray-blog-empty-state__title {
	font: var(--text-h2);
	margin-bottom: var(--space-3, 16px);
}

/* ---- FILTER (Niveau 4) ---- */
.filter-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	height: 32px;
	padding-inline: var(--space-2);
	border: var(--border-width-hairline) solid var(--border-opacity-20);
	border-radius: var(--radius-sm);
	background: transparent;
	font: var(--text-utility);
	color: var(--color-black);
	cursor: pointer;
}
.filter-chip--active,
.filter-chip[aria-pressed="true"] {
	border-color: var(--color-champagne);
	color: var(--color-champagne);
}
.filter-chip__remove {
	display: inline-flex;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	margin: -10px; /* compense visuellement la zone cliquable 44×44 sans agrandir le chip */
}
.ecloray-filter-reset {
	font: var(--text-utility);
	text-decoration: underline;
	background: none;
	border: none;
	color: var(--color-black);
	cursor: pointer;
}

/* ---- PAGINATION (Niveau 4) ---- */
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers span,
.ecloray-grid-section .page-numbers,
nav.navigation .page-numbers,
.woocommerce-pagination .page-numbers {
	/* AJOUT Phase 4.6.9 : .woocommerce-pagination (liste des commandes,
	   My Account) n'héritait pas de cette règle — même token, aucune
	   nouvelle valeur, simple extension du sélecteur existant. */
	font: var(--text-utility);
	margin-inline: 12px; /* 24px entre chiffres */
	color: var(--color-black);
	text-decoration: none;
}
.wp-block-query-pagination-numbers .page-numbers.current,
.page-numbers.current {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.page-numbers.prev,
.page-numbers.next {
	font: var(--text-interface);
	text-decoration: underline;
	color: var(--color-black);
}
.wp-block-query-pagination-previous.disabled,
.wp-block-query-pagination-next.disabled {
	opacity: 0.30;
	pointer-events: none;
}

/* ---- NAVIGATION (Niveau 4) ---- */
.ecloray-nav {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	height: 88px;
}
.ecloray-nav li {
	/* Correctif Phase 5 : items_wrap='%3$s' retire le <ul> englobant
	   mais WordPress conserve chaque item dans un <li> individuel
	   (comportement par défaut du Walker) — ces <li> orphelins
	   affichaient leur puce native de navigateur faute de reset. */
	list-style: none;
	margin: 0;
}
@media (max-width: 767px) {
	.ecloray-nav { height: 64px; }
	/* Correctif diagnostic 2026-09-08 : le menu plat (.ecloray-nav > li)
	   n'était jamais masqué sous 768px — il s'affichait donc en plus du
	   bouton hamburger, jamais à sa place, d'où le menu horizontal étalé
	   avec puces et retours à la ligne observés. Seul le bouton
	   hamburger doit rester visible ; le menu plat se réserve au
	   desktop, .ecloray-mobile-menu (sibling, non affecté par ce
	   sélecteur) prend le relais au clic. */
	.ecloray-nav > li {
		display: none;
	}
}
.ecloray-nav__item {
	font: var(--text-interface);
	color: var(--color-black);
	text-decoration: none;
}
.ecloray-nav__item:hover {
	color: var(--color-champagne);
}
.ecloray-nav__item[aria-current="page"] {
	border-bottom: 2px solid var(--color-champagne);
}
.ecloray-menu-toggle {
	display: none;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
}
@media (max-width: 767px) {
	.ecloray-menu-toggle { display: inline-flex; }
}
.ecloray-mobile-menu {
	background: var(--color-ivory);
}
.ecloray-mobile-menu[hidden] {
	display: none;
}
.ecloray-mobile-menu .ecloray-nav__item {
	display: block;
	margin-block: var(--space-2); /* 32px minimum entre entrées mobiles */
}
.ecloray-mobile-menu li {
	/* CORRECTIF 2026-09-12 : les <a class="ecloray-nav__item"> étaient
	   bien stylés, mais les <li> qui les entourent (générés par
	   wp_nav_menu(), sans <ul> englobant — items_wrap:"%3$s")
	   conservaient le list-style par défaut du navigateur, jamais
	   réinitialisé — d'où les puces visibles devant chaque lien du
	   panneau mobile. */
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- SKIP LINK (Phase 4.5, correctif OD-009) ----
 * Réutilise le système de focus générique déjà verrouillé
 * (--focus-ring, --focus-offset, :focus-visible) — aucun nouveau
 * système de focus créé. Tokens de couleur/radius/espacement déjà
 * existants uniquement, aucune nouvelle valeur.
 */
.ecloray-skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-2);
	z-index: 1000; /* passe au-dessus du header pour ne jamais être coupé par un overflow */
	background: var(--color-black);
	color: var(--color-ivory);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	text-decoration: none;
	font: var(--text-interface);
	transition: top var(--motion-fade);
}
.ecloray-skip-link:focus-visible {
	top: var(--space-2);
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}
@media (prefers-reduced-motion: reduce) {
	.ecloray-skip-link {
		transition: none; /* cohérent avec la règle générique déjà verrouillée (system.tokens.css) */
	}
}

/* FINITION 2026-09-08 (QA build 1.6.2) — .button-primary était utilisée
   dans le HTML (bouton "Envoyer le message" du formulaire Contact,
   bouton "Ajouter au panier") mais jamais définie en CSS : elle
   s'affichait donc avec le style natif du navigateur, exactement le
   symptôme signalé. Définition alignée sur le style déjà existant
   (.woocommerce .button ci-dessous et le bouton primaire Gutenberg),
   aucun nouveau design créé. */
.button-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-black);
	color: var(--color-ivory);
	border: none;
	border-radius: var(--radius-md);
	font: var(--text-interface);
	padding-inline: var(--space-4);
	height: 48px;
	cursor: pointer;
}
.button-primary:hover {
	background: var(--color-champagne);
	color: var(--color-black);
}
.button-primary:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

/* ---- CONTACT FORM (Phase 4.6.2) ----
 * Conteneur uniquement — chaque champ reste .ecloray-form-field
 * (Phase 4.3), aucun nouveau design de champ créé.
 */
.ecloray-contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-block: var(--space-4);
	padding: var(--space-4, 24px);
	background: var(--color-ivory);
	border: var(--border-width-hairline) solid var(--border-opacity-8);
	border-radius: var(--radius-lg);
}
.ecloray-contact-form .button-primary {
	align-self: flex-start;
	margin-top: var(--space-2, 8px);
}
.ecloray-contact-subheading {
	margin-top: var(--space-5, 32px);
}
@media (max-width: 767px) {
	.ecloray-contact-form {
		padding: var(--space-3, 16px);
	}
	.ecloray-contact-form .button-primary {
		align-self: stretch;
	}
}

/* ==========================================================================
   PATTERNS / COMPOSITIONS — Phase 4.4
   Grille max 4 colonnes desktop (Technical Lock, section Grille) — aucune
   nouvelle valeur de spacing/radius/couleur introduite ici.
   ========================================================================== */

.ecloray-grid-section {
	margin-block: var(--space-6);
}
.ecloray-grid-section h2 {
	margin-bottom: var(--space-4);
}

.ecloray-grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(4, 1fr); /* plafond verrouillé : jamais >4 colonnes desktop */
}
@media (max-width: 1023px) {
	.ecloray-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.ecloray-grid { grid-template-columns: 1fr; }
}

/* ---- FAQ SECTION ---- */
.ecloray-faq-section {
	max-width: 680px; /* largeur de texte éditorial déjà verrouillée */
	margin-inline: auto;
}
.ecloray-faq-section > p {
	margin-bottom: var(--space-4);
}

/* ---- NEWSLETTER ---- */
.ecloray-newsletter {
	max-width: 680px;
	margin-inline: auto;
	text-align: center;
}
.ecloray-newsletter__eyebrow {
	font: var(--text-caption);
	margin-bottom: var(--space-1);
}
.ecloray-newsletter__form {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
	margin-top: var(--space-3);
}
.ecloray-newsletter__form .ecloray-form-field {
	flex: 1;
	margin-bottom: 0;
}
/* FINITION 2026-09-09 (QA build 1.6.7), point 7 : champ email
   newsletter légèrement moins haut que le standard site (48px),
   tout en restant confortable au toucher (44px, conforme aux
   recommandations d'accessibilité tactile). Scopé à ce composant
   uniquement — le Contact et les autres formulaires du site
   conservent leur hauteur standard de 48px, inchangée. */
.ecloray-newsletter__form .form-field {
	height: 44px;
}
@media (max-width: 767px) {
	.ecloray-newsletter__form {
		flex-direction: column;
		align-items: stretch; /* champ pleine largeur mobile, déjà verrouillé */
	}
}

/* ---- CATALOG CONTROLS ---- */
.ecloray-catalog-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}
.ecloray-catalog-controls__count {
	font: var(--text-utility);
	color: rgba(26, 26, 24, 0.65);
	margin: 0;
}

/* ==========================================================================
   WOOCOMMERCE BRIDGE — Phase 4.6.8
   Défaut réel identifié à l'audit : aucun style n'existait pour les pages
   natives WooCommerce (Panier, Checkout, Compte, messages système),
   laissant le CSS générique de WooCommerce s'appliquer (neutralisé par
   ailleurs, inc/setup.php). Ce pont réutilise EXCLUSIVEMENT les tokens
   déjà verrouillés — aucune nouvelle couleur, aucun nouveau radius,
   aucun nouveau composant. Cible les classes natives stables de
   WooCommerce, jamais recréées.
   ========================================================================== */

/* ---- Boutons natifs WooCommerce (panier, checkout, compte) ----
 * WooCommerce utilise sa propre classe .button par défaut sur ses
 * formulaires natifs (mettre à jour le panier, passer la commande...).
 * Alignée sur .button-primary (Phase 4.3) sans dupliquer sa définition.
 */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--color-black);
	color: var(--color-ivory);
	border: none;
	border-radius: var(--radius-md);
	font: var(--text-interface);
	padding: var(--space-2) var(--space-4);
	height: 48px;
	cursor: pointer;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--color-champagne);
	color: var(--color-black);
}
.woocommerce .button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}
.woocommerce .button.disabled,
.woocommerce .button:disabled {
	background: rgba(26, 26, 24, 0.30);
	color: rgba(248, 246, 241, 0.60);
	cursor: not-allowed;
}

/* ---- Panier et tableaux de commande (table.shop_table) ---- */
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font: var(--text-body);
	margin-block: var(--space-4);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--space-2);
	border-bottom: var(--border-width-hairline) solid var(--border-opacity-10);
	text-align: left;
}
.woocommerce table.shop_table th {
	font: var(--text-interface);
}

/* ---- Champs de formulaire (Checkout, Compte) ----
 * Réutilise .form-field (Phase 4.3) plutôt qu'un nouveau design de champ.
 */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"] {
	height: 48px;
	padding-inline: var(--space-2);
	border: var(--border-width-hairline) solid var(--border-opacity-25);
	border-radius: var(--radius-md);
	background: var(--color-white);
	font: var(--text-body);
	font-size: 15px;
	width: 100%;
}
.woocommerce form .form-row textarea {
	height: auto;
	min-height: 96px;
	padding-block: var(--space-2);
}
.woocommerce form .form-row label {
	display: block;
	font: var(--text-interface);
	margin-bottom: var(--space-1);
}
.woocommerce form .form-row input:focus-visible,
.woocommerce form .form-row select:focus-visible,
.woocommerce form .form-row textarea:focus-visible {
	border: var(--border-width-focus-field) solid var(--color-champagne);
	outline: none;
}

/* ---- Résumé de commande (Checkout, Merci) ---- */
.woocommerce-checkout-review-order,
.woocommerce-order-details {
	border: var(--border-width-hairline) solid var(--border-opacity-12);
	border-radius: var(--radius-md);
	padding: var(--space-3);
}

/* ---- Messages système natifs (Success/Warning/Error) ----
 * Couleurs fonctionnelles déjà verrouillées, jamais utilisées comme
 * décoration — toujours accompagnées d'un texte explicite natif
 * WooCommerce. Aucune icône ajoutée ici : WooCommerce ne fournit pas de
 * point d'accroche natif pour insérer notre sprite sans surcharge JS,
 * qui n'est pas justifiée pour un simple bandeau de notice.
 */
.woocommerce-message {
	background: rgba(55, 41, 27, 0.08); /* dérivé de --color-success à faible opacité, pas une nouvelle couleur */
	border-left: 3px solid var(--color-success);
	color: var(--color-black);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	list-style: none;
	margin-bottom: var(--space-3);
}
.woocommerce-error {
	background: rgba(180, 84, 58, 0.08);
	border-left: 3px solid var(--color-error);
	color: var(--color-black);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	list-style: none;
	margin-bottom: var(--space-3);
}
.woocommerce-info {
	background: rgba(192, 138, 62, 0.08);
	border-left: 3px solid var(--color-warning);
	color: var(--color-black);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	list-style: none;
	margin-bottom: var(--space-3);
}

/* ---- Compte client (My Account) ---- */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-MyAccount-navigation li {
	margin-bottom: var(--space-1);
}
.woocommerce-MyAccount-navigation a {
	font: var(--text-interface);
	color: var(--color-black);
	text-decoration: underline;
}
.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--color-champagne);
}

/* ---- BREADCRUMBS (Phase 4.5) ----
 * Finition 2026-09-08 : rendus plus discrets (taille réduite, opacité
 * plus faible, soulignement retiré des liens) — pure retouche visuelle,
 * aucune information supprimée, structure sémantique inchangée. */
.ecloray-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	list-style: none;
	margin: 0 0 var(--space-2) 0;
	padding: 0;
	font: 400 12px var(--font-body);
	color: rgba(26, 26, 24, 0.42);
}
.ecloray-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-inline-start: var(--space-1);
	color: rgba(26, 26, 24, 0.25);
}
.ecloray-breadcrumbs a {
	color: rgba(26, 26, 24, 0.42);
	text-decoration: none;
}
.ecloray-breadcrumbs a:hover {
	color: var(--color-champagne);
	text-decoration: underline;
}
.ecloray-breadcrumbs [aria-current="page"] {
	color: rgba(26, 26, 24, 0.6);
}

/* ---- BOOK HERO (Phase 4.5) ----
 * Couverture = média dynamique uniquement (GOV-EDITORIAL-001) : aucune
 * couleur de secondary.tokens.css n'apparaît dans ce bloc.
 */
.ecloray-book-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
	margin-block: var(--space-6);
}
@media (max-width: 767px) {
	.ecloray-book-hero { grid-template-columns: 1fr; }
}
.ecloray-book-hero__cover img {
	width: 100%;
	border-radius: var(--radius-md);
}
.ecloray-book-hero__content h1 {
	margin-top: var(--space-2);
}
.ecloray-book-hero__author a {
	color: rgba(26, 26, 24, 0.65);
	text-decoration: underline;
}
.ecloray-book-hero__price {
	font: var(--text-price);
	margin-block: var(--space-3);
}
.ecloray-book-hero__price .price del { opacity: 0.45; }
.ecloray-book-hero__price .price ins { color: var(--color-dark-gold); text-decoration: none; }

/* ---- Corrections Phase 4.6.4 ---- */
.ecloray-book-hero__collection {
	font: var(--text-caption);
	margin: 0 0 var(--space-1) 0;
}
.ecloray-book-hero__collection a {
	color: rgba(26, 26, 24, 0.65);
	text-decoration: underline;
}
.ecloray-book-hero__collection a:hover {
	color: var(--color-champagne);
}
.ecloray-book-hero__availability {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font: var(--text-utility);
	color: var(--color-warning);
	margin: 0;
}

/* ==========================================================================
   HEADER LOGO — Phase 4.7.2A
   Intégration du Master Logo Web validé (DA-2026-LOGO-MASTER-01),
   remplace core/site-title. Largeur = 120px, valeur documentée telle
   quelle (Brand System §1.5 « Web — logo complet : 120px de largeur »,
   seuil minimal explicite, appliquée ici comme valeur fixe pour ne pas
   inventer une taille "idéale" non spécifiée). Aucun comportement
   sticky ajouté — absent de tout le Header actuel, hors périmètre de
   cette intégration (voir registre de gouvernance).
   ========================================================================== */
.ecloray-header-logo {
	display: inline-flex;
	align-items: center;
}
.ecloray-header-logo__img {
	width: 120px;
	height: auto;
	display: block;
}
.ecloray-header-logo:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

/* ==========================================================================
   FOOTER LOGO — Phase 4.7.2A
   Logo_blanc_complet.svg (Option B validée DG/DA) — asset officiel déjà
   composé (symbole + nom + signature), fond Noir ECLORAY existant,
   version blanche exclusive sur fond sombre (Brand System §1.6).
   Largeur = 120px, même valeur documentée que le Header (§1.5, "Web —
   logo complet"), hauteur dérivée du ratio natif du viewBox (551,05 ×
   359,55) — aucune taille inventée hors de ce calcul proportionnel.
   ========================================================================== */
.ecloray-footer-logo {
	margin-bottom: var(--space-4);
}
@media (max-width: 767px) {
	/* FINITION 2026-09-09 (QA build 1.6.7), point 8 : espacement
	   vertical légèrement resserré entre logo/copyright/liens légaux
	   en mobile — zones tactiles des liens (déjà --space-1 de
	   padding-block, correctif 1.6.4) non réduites davantage,
	   lisibilité conservée. */
	.ecloray-footer-logo {
		margin-bottom: var(--space-3, 24px);
	}
	.ecloray-footer-copyright {
		margin-top: var(--space-2, 8px);
	}
}
.ecloray-footer-logo__img {
	width: 120px;
	height: auto;
	display: block;
}

/* FINITION 2026-09-08 : séparateurs des liens légaux du footer,
   attachés en CSS à chaque lien (voir footer-block.php) — ne peuvent
   jamais apparaître seuls, ni avant le premier lien, ni après le
   dernier, ni isolés sur leur propre ligne en cas de retour à la
   ligne responsive. */
/* FINITION 2026-09-08 (QA build 1.6.2) — Le correctif précédent
   (séparateur en ::after texte " · ") ne résolvait pas la cause
   réelle : un pseudo-élément de contenu texte reste un nœud inline
   distinct, capable de se replier sur sa propre ligne à une frontière
   de wrap, exactement comme le texte concaténé qu'il remplaçait.
   CORRECTION DÉFINITIVE : le séparateur devient une bordure gauche —
   partie du modèle de boîte du lien lui-même, physiquement impossible
   à isoler sur sa propre ligne. Le conteneur passe en flex avec wrap :
   chaque lien (bordure incluse) est un item atomique. */
.ecloray-footer-legal-links {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
}
.ecloray-footer-legal-links a {
	/* FINITION 2026-09-08 (QA build 1.6.3) : couleur explicite ajoutée
	   par prudence défensive — test d'exécution réelle du PHP confirme
	   que le texte de chaque lien est toujours présent dans le HTML
	   généré (jamais de bordure sans texte), mais aucune couleur
	   n'était explicitement fixée sur ces liens spécifiques
	   auparavant (héritage implicite du contexte). Élimine toute
	   ambiguïté d'héritage sans changer le comportement visuel prévu. */
	color: var(--color-ivory);
}
.ecloray-footer-legal-links a:hover {
	color: var(--color-champagne);
}
.ecloray-footer-legal-links a:not(:first-child) {
	border-inline-start: 1px solid rgba(248, 246, 241, 0.35);
	padding-inline-start: var(--space-2, 8px);
	margin-inline-start: var(--space-2, 8px);
}

/* FINITION 2026-09-08 (QA build 1.6.4) — point 5 : respiration mobile
   du bloc copyright/liens légaux. Aucune règle de line-height ni de
   marge n'existait sur .ecloray-footer-copyright ; sur mobile, où le
   texte et les 3 liens se replient sur plusieurs lignes (flex-wrap),
   l'absence d'interlignage et d'espacement vertical donnait un bloc
   visuellement serré. Structure fonctionnelle et logique de
   séparateur (bordure, jamais isolable — cf. correctif 1.6.2)
   strictement inchangées : uniquement line-height, gap et marges. */
.ecloray-footer-copyright {
	line-height: 1.7;
}
@media (max-width: 767px) {
	.ecloray-footer-legal-links {
		/* FINITION 2026-09-08 (QA build 1.6.6), point 4 : empilement
		   vertical explicite plutôt qu'un simple retour à la ligne
		   dépendant du flex-wrap — comportement garanti et prévisible
		   quelle que soit la largeur exacte du texte des 3 liens,
		   conformément à la consigne DG ("préférer un empilement
		   vertical propre plutôt que de forcer leur maintien sur une
		   seule ligne"). column-gap devient inutile en colonne, retiré ;
		   row-gap conservé pour l'espacement vertical entre liens. */
		flex-direction: column;
		align-items: flex-start;
		row-gap: var(--space-2, 8px);
		margin-top: var(--space-2, 8px);
	}
	.ecloray-footer-legal-links a:not(:first-child) {
		border-inline-start: none;
		padding-inline-start: 0;
		margin-inline-start: 0;
	}
	.ecloray-footer-legal-links a {
		padding-block: var(--space-1, 4px);
	}
}

/* ==========================================================================
   STICKY HEADER — Phase 4.7.2A, révisé FINITION 2026-09-08
   Brand System §7.5 : « Site web — en-tête : ... en-tête fixe (sticky) »
   — exigence normative, autorisation DG explicite.

   CAUSE RACINE confirmée du défaut mobile (logo/hamburger superposés au
   contenu, contenu parfois au-dessus du header) : .ecloray-home-closing-
   band (bandeau de clôture Accueil, ecloray/home-closing-band) est
   déclaré `position:relative` SANS z-index — cela ne crée PAS de
   nouveau contexte d'empilement. Ses enfants directs (`img` z-index:1,
   `.wp-block-cover__inner-container` z-index:2, voir da-v2-editorial-
   blocks.php) se retrouvaient donc comparés au NIVEAU RACINE de la
   page — en concurrence directe avec le Header sticky (z-index:1). Dès
   que ce bandeau croisait le Header pendant le scroll, son contenu
   interne (z-index:2) passait AU-DESSUS du Header (z-index:1),
   produisant exactement les superpositions/inversions signalées.
   Corrigé ici en isolant ce bandeau dans son propre contexte
   d'empilement (isolation: isolate) : ses z-index internes ne peuvent
   plus jamais s'échapper vers la racine.

   En complément, décision explicite prise conformément à l'option de
   repli proposée par la DG ("si le sticky n'apporte pas de valeur ou
   provoque le défaut, privilégier une solution mobile plus simple et
   robuste") : le comportement sticky est désormais RÉSERVÉ AU DESKTOP
   (≥768px), où aucun défaut n'a été signalé. En mobile, le Header
   redevient un élément statique normal du flux — élimine strictement
   toute la catégorie de bugs de superposition liés au sticky sur
   mobile, sans avoir à traiter chaque manifestation une par une.
   Desktop conserve le comportement normatif du Brand System §7.5.

   Fond ivoire explicite ajouté par prudence supplémentaire : garantit
   que le Header occulte visuellement tout contenu qui défile derrière
   lui, même dans un scénario d'empilement non prévu.
   ========================================================================== */
header.wp-block-template-part {
	background-color: var(--color-ivory);
	/* FINITION 2026-09-09 (QA build 1.6.7) : reset défensif de toute
	   marge héritée par défaut (bloc racine du gabarit) pouvant
	   contribuer à la hauteur perçue du header mobile. */
	margin: 0;
}
@media (min-width: 768px) {
	header.wp-block-template-part {
		position: sticky;
		top: 0;
		z-index: 100;
	}
}

/* FINITION 2026-09-08 (QA build 1.6.2) — CAUSE RACINE du Header mobile
   cassé : header.wp-block-template-part > .wp-block-group (conteneur
   direct du logo + de la nav) n'avait jamais reçu de mise en page
   flex/grid. Le logo (.ecloray-header-logo, inline-flex) et la
   navigation (.ecloray-nav, display:flex mais BLOCK-LEVEL en tant
   qu'élément) s'empilaient donc verticalement selon le flux par
   défaut des blocs WordPress, séparés par le gap de bloc par défaut
   (--wp--style--block-gap) — d'où l'écart massif, le hamburger
   "flottant" loin du logo, et la hauteur excessive du Header (somme
   de deux lignes au lieu d'une seule). Un seul correctif au niveau du
   composant global, pas de règle page par page. */
header.wp-block-template-part > .wp-block-group {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3, 16px);
	padding-block: var(--space-3, 16px);
	min-height: 0;
}
.ecloray-nav {
	flex-shrink: 0;
}
@media (max-width: 767px) {
	header.wp-block-template-part > .wp-block-group {
		/* FINITION 2026-09-09 (QA build 1.6.7), point 3 : header mobile
		   encore trop haut. Le padding-block était --space-2 (16px
		   réels du token, soit 32px cumulés haut+bas) — réduit à
		   --space-1 (8px, 16px cumulés). Structure, position du logo/
		   hamburger et dimensions du logo strictement inchangées :
		   seul l'espacement du conteneur est réduit, comme demandé. */
		padding-block: var(--space-1, 4px);
	}
	/* Point 5 de la QA : logo mobile trop petit -> agrandi (120px ->
	   152px), ratio intrinsèque préservé (width seule, height:auto
	   déjà en place sur .ecloray-header-logo__img), tout en gardant
	   une marge de sécurité pour le hamburger via flex-shrink:0
	   ci-dessus et justify-content:space-between sur le conteneur. */
	.ecloray-header-logo__img {
		width: 152px;
	}
}

/* Isolation du bandeau de clôture — voir explication ci-dessus. */
.ecloray-home-closing-band {
	isolation: isolate;
	margin: 0;
	line-height: 0;
}
.ecloray-home-closing-band img {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   DA-V2-2026-FINAL — Sections éditoriales enrichies de l'Accueil
   Enrichissement visuel validé par la Direction Générale (GO DA V2).
   Couleurs : palette principale + secondaires déjà exposées via
   theme.json (secondary-night-blue sur core/group, secondary-binding-
   bordeaux sur core/quote) — aucune nouvelle couleur introduite ici.
   ========================================================================== */

/* FINITION 2026-09-10 (QA build 1.6.9), section 7, décision DG :
   section "Nos livres" enrichie d'une vraie composition à deux
   colonnes (texte + nouveau visuel), remplace la version texte seul
   du build 1.6.7/1.6.8. */
.ecloray-home-teaser {
	display: flex;
	flex-direction: column;
	padding-block: var(--space-6, 64px);
	gap: var(--space-5, 32px);
}
.ecloray-home-teaser__text h2 {
	margin-bottom: var(--space-3, 16px);
}
.ecloray-home-teaser__text p {
	margin-bottom: var(--space-3, 16px);
}
.ecloray-home-teaser__media {
	margin: 0;
}
.ecloray-home-teaser__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}
@media (max-width: 767px) {
	.ecloray-home-teaser {
		padding-block: var(--space-5, 48px);
	}
}
@media (min-width: 1024px) {
	.ecloray-home-teaser {
		flex-direction: row-reverse;
		align-items: center;
		gap: var(--space-6, 64px);
	}
	.ecloray-home-teaser__text {
		flex: 0 0 48%;
		max-width: 48%;
	}
	.ecloray-home-teaser__media {
		flex: 0 0 46%;
		max-width: 46%;
	}
}

/* FINITION 2026-09-10 (QA build 1.6.9), section 6 : Hero restructuré
   en vraie composition scindée sur desktop — texte à gauche, femme
   visible à droite (image 16:9 recadrée en portrait via object-fit
   dans un conteneur plus haut que large, pour garder le visage/le
   regard bien cadrés plutôt qu'une bande large et basse). Mobile :
   empilement texte -> image, ordre déjà correct, inchangé. */
/* CORRECTIF GLOBAL 2026-09-10 (recette réelle mobile + desktop) :
   abandon complet de la grille 50/50 "texte | image" — la recette a
   montré qu'elle n'était plus adaptée au format 16:9 de l'image
   principale (colonne à 42% forçant une hauteur d'image très
   réduite). Nouvelle architecture, identique en logique sur toutes
   les largeurs : IMAGE PANORAMIQUE en ouverture, CONTENU ÉDITORIAL
   en dessous. Seule la largeur du bloc texte et son alignement
   changent entre mobile et desktop. */
.ecloray-hero-accueil {
	display: flex;
	flex-direction: column;
}
.ecloray-hero-accueil__media {
	margin: 0 0 var(--space-5, 32px);
	/* CORRECTIF 2026-09-11 (recette réelle desktop, 2e passe) :
	   le breakout en pleine largeur de viewport (width:100vw) du
	   correctif précédent allait trop loin — la recette demande une
	   "ouverture éditoriale premium", pas une bannière bord à bord,
	   ET un alignement partagé avec le bloc texte (actuellement deux
	   compositions visuellement distinctes : image centrée dans le
	   viewport, texte aligné sur le conteneur <main>).
	   CAUSE de l'étroitesse précédente (avant le correctif d'hier) :
	   l'image était contrainte à 42% dans une grille 2 colonnes,
	   déjà supprimée. CAUSE du désalignement actuel : le breakout
	   sortait l'image de <main> (conteneur constrained, 1440px,
	   theme.json) alors que le texte y restait.
	   CORRECTION : plus aucun breakout. L'image reste dans le même
	   conteneur <main> que le texte (width:100% de ce conteneur) —
	   les deux partagent donc naturellement le même bord gauche. */
	width: 100%;
}
.ecloray-hero-accueil__media img {
	display: block;
	width: 100%;
	height: auto;
	/* CORRECTIF 2026-09-11 (recette réelle, capture desktop) : la
	   combinaison précédente width:100% + max-height:70vh +
	   object-fit:contain créait un bug réel — sur les écrans où la
	   hauteur naturelle (largeur du conteneur × 9/16) dépassait 70vh,
	   max-height forçait une boîte plus large que haute par rapport
	   au ratio 16:9 réel, et object-fit:contain "letterboxait" alors
	   l'image horizontalement à l'intérieur : la largeur affichée du
	   VISUEL devenait bien inférieure à la largeur réelle du
	   conteneur (~925px constatés pour un conteneur à ~1450px),
	   laissant de l'ivoire visible des deux côtés — cause exacte du
	   défaut signalé.
	   CORRECTION : max-height et object-fit retirés. À 1440px de
	   large, le ratio 16:9 naturel donne ~810px de haut — déjà
	   raisonnable, aucun plafond n'est nécessaire. Largeur et hauteur
	   suivent uniquement width:100%/height:auto, sans aucun risque
	   de conflit. */
}
.ecloray-hero-accueil__text {
	margin-bottom: 0;
}
@media (min-width: 1024px) {
	.ecloray-hero-accueil__media {
		/* Marge identique au mobile (32px) — voir correctif du tour
		   précédent, non remis en cause ici. */
		margin-bottom: var(--space-5, 32px);
	}
	.ecloray-hero-accueil__media img {
		max-height: 62vh;
	}
	.ecloray-hero-accueil__text {
		/* Mesure de lecture éditoriale maîtrisée, alignée à gauche —
		   ni pleine largeur, ni colonne étroite artificielle. Pas de
		   grille : le CTA et le paragraphe restent proches du texte
		   plutôt que dispersés dans une large zone vide à droite. */
		max-width: 640px;
		text-align: left;
	}
}

/* FINITION 2026-09-08 (QA build 1.6.6) : les règles .ecloray-home-
   about-teaser__link et .ecloray-about-teaser__text (ancienne section
   Bleu Nuit avec citation dupliquée depuis À propos) sont retirées ici
   — la section a été entièrement remplacée par .ecloray-home-editorial
   (voir plus bas), markup et classes différents. Aucune règle
   obsolète laissée dans la feuille de style : pas de risque d'espace
   vide résiduel provenant de l'ancien composant. */

/* FINITION 2026-09-10 (QA build 1.6.9), section 10 : bandeau simplifié
   en <figure><img>, la logique min-height/isolation liée à l'ancien
   wp:block-cover (image positionnée en absolute) n'a plus lieu d'être
   — l'image dicte sa propre hauteur naturellement. Règle conservée
   vide de sens retirée. */

/* FINITION 2026-09-10 (QA build 1.6.9), section 8, décision DG :
   nouvelle section "Un chemin pour chaque saison de votre vie" — 3
   cartes légères, sans photographie ni CTA. Puce ronde en dégradé Or
   (déjà utilisé ailleurs sur le site, aucune nouvelle couleur),
   bordure fine, fond Ivoire très légèrement distinct pour un effet de
   carte sobre. */
.ecloray-home-seasons {
	/* CORRECTIF 2026-09-12 : réduction supplémentaire demandée avant
	   cette section et après les cartes. padding-top réduit de 32px
	   à 16px (nouveau cumul avant : 64 Nos livres, protégée + 24
	   marge globale + 16 = 104px). padding-bottom réduit de 64px à
	   32px, symétrique au top (nouveau cumul après : 32 + 24 marge
	   globale + 32 section institutionnelle = 88px). Contenu, cartes,
	   images, textes : strictement inchangés. */
	padding-top: var(--space-2, 16px);
	padding-bottom: var(--space-4, 32px);
}
.ecloray-home-seasons__intro {
	max-width: 640px;
	margin: 0 auto var(--space-5, 32px);
	text-align: center;
}
.ecloray-home-seasons__intro h2 {
	margin-bottom: var(--space-2, 8px);
}
.ecloray-home-seasons__grid {
	display: grid;
	/* CORRECTIF 2026-09-10 (recette réelle) — cause identifiée : aucun
	   align-items n'était défini sur cette grille ; la valeur par
	   défaut de CSS Grid est "stretch", qui étire chaque carte à la
	   hauteur de la plus haute de sa ligne. Les cartes n'ayant ni
	   flex-grow ni contenu extensible, l'excédent se traduisait par un
	   vide sous le texte de la carte la plus courte. align-items:start
	   fait que chaque carte prend sa hauteur naturelle (image + titre
	   + texte + padding), sans étirement forcé — conforme à la
	   consigne "les cartes n'ont pas besoin d'avoir exactement la
	   même hauteur". */
	align-items: start;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4, 24px);
}
@media (min-width: 1024px) {
	.ecloray-home-seasons__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	/* Point 14 : à 2 colonnes, la 3e carte (toujours "Rayonner", ce
	   nombre de cartes étant fixe) se retrouve seule sur sa ligne,
	   alignée à gauche avec un vide à droite. Centrée et contrainte à
	   la largeur d'une colonne plutôt que laissée orpheline ou
	   étirée en pleine largeur — solution la plus équilibrée, sans
	   étirement vertical. */
	.ecloray-home-seasons__card:nth-child(3) {
		grid-column: 1 / -1;
		max-width: calc(50% - (var(--space-4, 24px) / 2));
		margin-inline: auto;
	}
}
.ecloray-home-seasons__card {
	/* VALIDATION DG 2026-09-10 : les 3 cartes intègrent désormais un
	   visuel (Option A : image -> titre -> texte). Padding conservé
	   sur le texte uniquement (l'image touche les bords de la carte
	   pour un rendu éditorial, pas encadrée comme un e-commerce).
	   overflow:hidden nécessaire pour que le rayon de la carte
	   s'applique aussi à l'image. */
	overflow: hidden;
	border: var(--border-width-hairline) solid var(--border-opacity-8);
	border-radius: var(--radius-lg);
	background: var(--color-ivory);
	text-align: center;
	display: flex;
	flex-direction: column;
}
.ecloray-home-seasons__media {
	margin: 0;
}
.ecloray-home-seasons__media img {
	display: block;
	width: 100%;
	height: auto;
	/* Ratio identique aux 3 cartes : le fichier source est déjà 4:3
	   (1448x1086) sur les trois images, aucun recadrage nécessaire —
	   width:100%/height:auto suffit à garantir un rendu identique. */
}
.ecloray-home-seasons__card h3,
.ecloray-home-seasons__card p {
	padding-inline: var(--space-4, 24px);
}
.ecloray-home-seasons__card h3 {
	margin-top: var(--space-3, 16px);
}
.ecloray-home-seasons__card p {
	margin-bottom: var(--space-4, 24px);
	/* Pas de grand vide sous le texte (consigne DG) : la carte
	   s'arrête juste après le texte, aucune hauteur minimale forcée. */
}
.ecloray-home-seasons__card p {
	color: rgba(26, 26, 24, 0.75);
}
@media (max-width: 767px) {
	.ecloray-home-seasons {
		/* CORRECTIF 2026-09-12 : réduction proportionnelle, même
		   logique que le desktop (division par deux de chaque côté :
		   32->16px avant, 64->32px après, soit -50%). Mobile suit
		   donc la même proportion : 48px -> 24px avant ET après.
		   Contenu, cartes, grille : inchangés. */
		padding-top: var(--space-3, 24px);
		padding-bottom: var(--space-3, 24px);
	}
	.ecloray-home-seasons__grid {
		grid-template-columns: 1fr;
		gap: var(--space-3, 16px);
	}
}

/* FINITION 2026-09-08 (QA build 1.6.6) — Nouvelle section éditoriale
   "ECLORAY, plus qu'une marque éditoriale" (remplace l'ancienne
   section Bleu Nuit avec citation dupliquée). Section purement
   typographique : fond Ivoire (déjà le fond par défaut, aucune
   couleur de fond posée volontairement), pas d'image. Largeur de
   lecture maîtrisée (mesure éditoriale ~640px, cohérente avec les
   autres blocs de texte du site), centrée, respiration verticale
   généreuse pour un rendu de page éditoriale plutôt que de landing
   commerciale. Bouton : classe .wp-block-button par défaut =
   variante Primary déjà existante, aucune nouvelle variante créée. */
.ecloray-home-editorial {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
	/* CORRECTIF 2026-09-10 (recette réelle) : encore signalée comme
	   ayant "trop d'espace ivoire autour du contenu" après une
	   première réduction (64px -> 48px, build 1.6.9 initial).
	   Réduite une nouvelle fois à --space-4 (32px) desktop — la
	   section garde son filet doré, son surtitre, son titre, sa
	   citation et son CTA strictement inchangés ; seul l'espace vide
	   au-dessus et en dessous du bloc de texte est resserré. */
	padding-block: var(--space-4, 32px);
}
.ecloray-home-editorial::before {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	margin: 0 auto var(--space-3, 16px);
	background: linear-gradient(90deg, var(--color-light-gold), var(--color-dark-gold));
}
.ecloray-home-editorial__eyebrow {
	color: var(--color-champagne);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: var(--space-2, 8px);
}
.ecloray-home-editorial h2 {
	margin-bottom: var(--space-4, 24px);
}
.ecloray-home-editorial p {
	margin-bottom: var(--space-3, 16px);
}
.ecloray-home-editorial .wp-block-buttons {
	justify-content: center;
	margin-top: var(--space-4, 24px);
}
@media (max-width: 767px) {
	.ecloray-home-editorial {
		/* Compactage mobile complémentaire, même logique que ci-dessus
		   (32px -> 24px). */
		padding-block: var(--space-3, 24px);
	}
}

/* FINITION 2026-09-08 : rythme de l'Accueil — espacement vertical
   cohérent entre les grandes sections (Hero, teasers, bandeau,
   Newsletter). Pas de nouvelle couleur de fond alternée (contrainte
   DG : aucune nouvelle couleur) — le rythme vient de l'espacement et
   de l'alternance déjà existante texte/image/bandeau sombre. */
/* CORRECTIF 2026-09-10 (QA build 1.6.9, validation DG) : la marge
   globale entre sections (introduite en 1.6.9 à 64px/48px)
   s'additionnait au padding-block propre de chaque section
   (48-64px), créant jusqu'à ~192px d'écart cumulé entre deux
   sections sur desktop. Réduite à son rôle de complément léger
   (32px desktop / 24px mobile) — le padding interne de chaque
   section, qui porte l'essentiel de la respiration éditoriale,
   reste strictement inchangé. */
/* CORRECTIF 2026-09-10 (recette réelle) : après un premier
   resserrement (96px -> 64px -> 32px sur les builds précédents),
   certains espacements entre sections restent perçus comme
   excessifs. Réduite une dernière fois à son rôle de connecteur léger
   (24px desktop / 16px mobile) — le padding interne de chaque
   section, qui porte l'essentiel de la respiration éditoriale, reste
   strictement inchangé (Nos livres notamment, protégée, non
   retouchée). */
/* CORRECTIF 2026-09-11 (capture desktop réelle) — cause élargie :
   .ecloray-hero-accueil (et les autres sections directes de <main>)
   ne portent elles-mêmes aucune largeur ni marge — tout reposait sur
   l'injection automatique par WordPress de la classe
   "is-layout-constrained" (déclarée dans le bloc <!-- wp:group
   {"layout":{"type":"constrained"}} --> de front-page.html), qui
   applique normalement max-width + centrage à chaque enfant direct.
   Ce mécanisme ne s'applique pas correctement ici (cohérent avec le
   message "bloc invalide" déjà observé sur l'aperçu de ce modèle
   précis dans l'Éditeur de site) — résultat : le contenu du Hero
   s'étend collé au bord gauche de l'écran, sans le retrait que le
   Header applique, lui, correctement.
   CORRECTION : contrainte explicite et autonome, qui ne dépend plus
   de ce mécanisme WordPress. Reprend la même valeur que theme.json
   (contentSize: 1440px) pour rester cohérente avec le Header et le
   reste du site. Scopée à l'Accueil (body.home) uniquement — n'af-
   fecte aucune autre page. */
/* CORRECTIF 2026-09-12 (recette réelle) : le même défaut structurel
   (aucune section directe de <main> ne porte de largeur/marge
   propre, le mécanisme automatique WordPress "is-layout-constrained"
   ne s'appliquant pas correctement sur ce site) touche en réalité
   TOUTES les pages, pas seulement l'Accueil — confirmé par capture
   sur À propos, Livres, Ressources, Blog, Boutique et Contact.
   Règle élargie à l'ensemble du site (retrait de la restriction
   body.home). La bannière florale (Accueil uniquement) reste exclue
   par précaution — cette classe n'existe de toute façon sur aucune
   autre page. */
main#main-content > *:not(.ecloray-home-closing-band) {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--space-3, 24px);
	box-sizing: border-box;
}

body.home main#main-content > * {
	margin-bottom: var(--space-3, 24px);
}
body.home main#main-content > *:last-child {
	margin-bottom: 0;
}
@media (max-width: 767px) {
	body.home main#main-content > * {
		margin-bottom: var(--space-2, 16px);
	}
}

/* Connexion des tokens typographiques fluides (clamp(), déjà définis
   dans brand.tokens.css) à l'ensemble du site en mobile — pas
   seulement la page À propos comme dans le correctif précédent. */
@media (max-width: 767px) {
	h1, .wp-block-post-title {
		font: var(--text-h1);
	}
	h2 {
		font: var(--text-h2);
	}
	h3 {
		font: var(--text-h3);
	}
}

/* Cadrages/hauteurs d'image mobile — cohérence globale : aucune image
   de contenu ne dépasse une hauteur de viewport raisonnable, évite
   qu'une image large domine tout l'écran sur mobile avant le texte. */
@media (max-width: 767px) {
	.wp-block-image img,
	.ecloray-hero-accueil__media img {
		max-height: 70vh;
		object-fit: cover;
	}
}
.ecloray-home-closing-band__tagline {
	/* FINITION 2026-09-10 (QA build 1.6.9) : règle conservée mais
	   inutilisée — la bannière florale n'a plus de texte superposé
	   ce build (décision DG, section 10). Non supprimée : réactivable
	   sans recréer de CSS si un texte HTML est validé plus tard. */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
}


/* ==========================================================================
   DA-V2-2026-FINAL — Page À propos (corrections validées DG)
   Or Foncé utilisé pour la hiérarchie décorative, en lieu et place de
   Bronze Encre (réservé exclusivement au rôle fonctionnel "Success",
   DA-UI-011 V2 — gouvernance non modifiée, décision DG confirmée).
   Aucune couleur non déjà validée par le Brand System n'est introduite.
   ========================================================================== */

/* Citation fondatrice — accent Bordeaux Reliure (DG-2026-BS-03),
   couleur posée via variable CSS directe plutôt qu'une classe
   utilitaire WordPress (cf. correctif du bug Bleu Nuit ci-dessus). */
.ecloray-quote-bordeaux {
	border-left-color: var(--color-secondary-binding-bordeaux);
	color: var(--color-secondary-binding-bordeaux);
}
.ecloray-quote-bordeaux cite {
	color: var(--color-dark-gold);
	font-style: normal;
}

/* Titres de section — filet dégradé Or Clair -> Or Foncé, déjà autorisé
   en Header (DA-V2-2026-FINAL section H), réutilisé ici à l'identique. */
.ecloray-about-page .ecloray-section-title {
	position: relative;
	padding-bottom: var(--space-3, 16px);
	margin-bottom: var(--space-4, 24px);
}
.ecloray-about-page .ecloray-section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 2px;
	background: linear-gradient(90deg, var(--color-light-gold), var(--color-dark-gold));
}

/* Légendes "Source : Constitution..." — recolorées en Or Foncé plutôt
   que le gris neutre par défaut, pour ancrer la légitimité du texte
   institutionnel dans le système chromatique de la marque. */
.ecloray-institutional-source {
	display: none;
}

.ecloray-about-page .ecloray-source-caption {
	color: var(--color-dark-gold);
}

/* FINITION 2026-09-08 : transformation en grille de cartes responsive
   (2 colonnes desktop, 1 colonne mobile) — demande DG explicite pour
   éviter la longue succession textuelle sur mobile. Contenu HTML
   totalement inchangé (toujours un <ul><li> classique) : uniquement
   du CSS Grid, aucune restructuration de balisage. */
.ecloray-about-page .ecloray-values-list {
	list-style: none;
	padding-left: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4, 24px);
	margin-top: var(--space-4, 24px);
}
.ecloray-about-page .ecloray-values-list li {
	position: relative;
	padding: var(--space-4, 24px) var(--space-4, 24px) var(--space-4, 24px) var(--space-5, 32px);
	border: var(--border-width-hairline) solid var(--border-opacity-8);
	border-radius: 2px;
	background: var(--color-ivory);
}
.ecloray-about-page .ecloray-values-list li::before {
	content: "";
	position: absolute;
	left: var(--space-3, 16px);
	top: var(--space-4, 24px);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-champagne);
}
.ecloray-about-page .ecloray-values-list li strong {
	display: block;
	margin-bottom: var(--space-1, 4px);
	color: var(--color-dark-gold);
}

@media (max-width: 767px) {
	.ecloray-about-page .ecloray-values-list {
		grid-template-columns: 1fr;
		/* FINITION 2026-09-08 (QA build 1.6.4) : gap réduit de
		   --space-2 (16px) à --space-1 (8px) — sur 10 cartes empilées,
		   économise ~72px de longueur de page cumulée sans toucher au
		   padding interne de chaque carte (lisibilité inchangée).
		   Mesure ciblée, pas de compactage agressif : contenu, taille
		   de texte et interlignage restent identiques. */
		gap: var(--space-1);
	}
	.ecloray-about-page .ecloray-values-list li {
		/* FINITION 2026-09-09 (QA build 1.6.7), point 10 : padding
		   vertical (haut/bas) resserré davantage à --space-1 (8px) —
		   demande DG explicite ("réduire les paddings verticaux
		   excessifs"). Padding horizontal droit conservé à --space-2
		   et indentation gauche à --space-3 pour la puce, texte et
		   titres strictement inchangés. */
		padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
	}
	.ecloray-about-page .ecloray-values-list li::before {
		/* CORRECTIF 2026-09-12 : la puce restait positionnée à
		   --space-3 (24px), exactement là où le padding gauche
		   (réduit au même --space-3 par le correctif 1.6.7 ci-dessus)
		   fait commencer le texte — d'où le chevauchement avec la
		   première lettre du titre. Repositionnée à --space-1 (8px),
		   nettement avant le texte, avec un dégagement visuel clair. */
		left: var(--space-1, 8px);
		top: var(--space-1);
	}
	.ecloray-about-page .ecloray-values-list li strong {
		font-size: 0.9375rem;
	}
	.ecloray-about-page .ecloray-values-list li {
		font-size: 0.9375rem;
		line-height: 1.5;
	}
}

/* FINITION 2026-09-08, retour DG : respiration mobile entre les
   grandes sections de la page À propos (Mission / Raison d'être /
   Vision / Valeurs / Auteure) — marges verticales renforcées,
   uniquement en mobile pour ne pas alourdir le desktop qui n'a pas
   été signalé comme problématique. Aucun texte modifié. */
@media (max-width: 767px) {
	.ecloray-about-page > .wp-block-heading,
	.ecloray-about-page h2.ecloray-section-title {
		margin-top: var(--space-6, 64px);
	}
	.ecloray-about-page .ecloray-source-caption {
		font-size: 0.8125rem;
		margin-top: var(--space-1, 4px);
		margin-bottom: var(--space-2, 8px);
	}
	.ecloray-about-page p {
		line-height: 1.65;
	}
}

/* FINITION 2026-09-08 — Différenciation Livres / Ressources
   Décision DG : les deux pages doivent se distinguer visuellement,
   conformément à leurs fonctions respectives (Livres = univers
   éditorial/reliure ; Ressources = outils pratiques). Usages strictement
   conformes aux rôles déjà validés (DG-2026-BS-03) : Bordeaux Reliure
   réservé aux citations/accents éditoriaux, Bleu Gris Aube réservé aux
   icônes/bordures — jamais en fond ni en texte courant. */
.ecloray-livres-page .ecloray-source-caption,
.ecloray-livres-page h2 {
	color: var(--color-secondary-binding-bordeaux);
}
.ecloray-livres-page .wp-block-button:not(.is-style-secondary) .wp-block-button__link {
	background: var(--color-secondary-binding-bordeaux);
}
.ecloray-livres-page .wp-block-button:not(.is-style-secondary) .wp-block-button__link:hover {
	background: var(--color-champagne);
	color: var(--color-black);
}

.ecloray-ressources-page h2 {
	border-left: 3px solid var(--color-secondary-dawn-blue-gray);
	padding-left: var(--space-3, 16px);
}
.ecloray-ressources-page .wp-block-column {
	border-top: var(--border-width-hairline) solid var(--color-secondary-dawn-blue-gray);
	padding-top: var(--space-4, 24px);
}
   Noir, sans toucher au bouton Primary global (Noir/Champagne, Technical
   Lock, utilisé sur tout le reste du site). Portée strictement limitée
   à cette page. */
.ecloray-about-page .wp-block-button:not(.is-style-secondary):not(.is-style-text) .wp-block-button__link {
	background: var(--color-champagne);
}
.ecloray-about-page .wp-block-button:not(.is-style-secondary):not(.is-style-text) .wp-block-button__link:hover {
	background: var(--color-dark-gold);
}
.ecloray-about-page .wp-block-button.is-style-secondary .wp-block-button__link {
	border-color: var(--color-dark-gold);
	color: var(--color-dark-gold);
}
.ecloray-about-page .wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background: var(--color-dark-gold);
	color: var(--color-ivory);
}

/* Carte auteure — structure réutilisable, une carte par auteur·e.
   Image explicitement marquée "placeholder" en commentaire HTML côté
   pattern ; aucun libellé visible sur la page ne l'attribue à qui que
   ce soit. */
.ecloray-authors {
	margin-top: var(--space-5, 32px);
}
.ecloray-author-card {
	gap: var(--wp--preset--spacing--5, 32px);
	align-items: flex-start;
}
.ecloray-author-card--text-only {
	max-width: 760px;
	padding-left: var(--space-4, 24px);
	border-left: 2px solid var(--color-champagne);
}
.ecloray-author-card--text-only .ecloray-author-name {
	margin-bottom: var(--space-3, 16px);
}

/* FINITION 2026-09-08 : composition éditoriale premium portrait + texte,
   activée automatiquement dès que assets/images/auteure-portrait.jpg
   existe (voir patterns/register-static-patterns.php). Portrait à
   gauche (proportions naturelles 4:5 préservées, jamais forcées en
   carré), texte à droite avec la même hiérarchie que la version
   texte seul. */
.ecloray-author-card--with-portrait {
	display: flex;
	align-items: flex-start;
	gap: var(--space-5, 32px);
}
.ecloray-author-card__portrait {
	flex: 0 0 34%;
	max-width: 34%;
	margin: 0;
}
.ecloray-author-card__portrait img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}
.ecloray-author-card__text {
	flex: 1 1 auto;
	padding-left: var(--space-4, 24px);
	border-left: 2px solid var(--color-champagne);
}
.ecloray-author-card--with-portrait .ecloray-author-name {
	margin-bottom: var(--space-3, 16px);
}
.ecloray-author-card--with-portrait .ecloray-author-card__text > p:first-of-type {
	font: var(--text-quote);
	color: var(--color-black);
}
.ecloray-author-card--with-portrait .ecloray-author-card__text > p {
	margin-bottom: var(--space-4, 24px);
}
/* Premier paragraphe mis en avant (chapeau) pour rompre la monotonie
   d'un bloc de texte long, notamment sur mobile. */
.ecloray-author-card--text-only > p:first-of-type {
	font: var(--text-quote);
	color: var(--color-black);
}
.ecloray-author-card--text-only > p {
	margin-bottom: var(--space-4, 24px);
}
.ecloray-author-name {
	margin-bottom: var(--space-2, 8px);
}
.ecloray-author-tagline {
	color: var(--color-dark-gold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-top: var(--space-4, 24px);
}

@media (max-width: 767px) {
	.ecloray-author-card {
		flex-direction: column;
	}
	.ecloray-author-card .wp-block-column {
		flex-basis: 100% !important;
	}

	.ecloray-author-card--text-only {
		padding-left: var(--space-3, 16px);
	}
	.ecloray-author-card--text-only > p:first-of-type {
		font-size: 1.125rem;
	}
	.ecloray-author-card--with-portrait {
		flex-direction: column;
	}
	.ecloray-author-card__portrait {
		/* FINITION 2026-09-09 (QA build 1.6.7), point 9 : portrait trop
		   petit en mobile (220px fixes). Passé à 75% de la largeur
		   disponible (cible DG : 70-80%), plafonné à 320px pour éviter
		   un agrandissement excessif sur les mobiles larges/tablettes
		   portrait. Fichier image, ratio et cadrage strictement
		   inchangés — uniquement la largeur d'affichage CSS. */
		flex-basis: auto;
		width: 75%;
		max-width: 320px;
		margin: 0 auto var(--space-4, 24px);
	}
	.ecloray-author-card__text {
		padding-left: var(--space-3, 16px);
	}
	.ecloray-author-card--with-portrait .ecloray-author-card__text > p:first-of-type {
		font-size: 1.125rem;
	}

	/* Titres H1/H2 : connexion aux tokens fluides déjà définis dans
	   brand.tokens.css (clamp()), jusque-là non branchés aux balises
	   réelles (theme.json utilisait une taille fixe globale). Aucune
	   nouvelle valeur : réutilisation de --text-h1/--text-h2 existants. */
	.ecloray-about-page h1,
	.ecloray-about-page .wp-block-post-title,
	h1.wp-block-post-title {
		font: var(--text-h1);
	}
	.ecloray-about-page h2 {
		font: var(--text-h2);
	}
}