/*
Theme Name:     Moda Clem
Theme URI:
Description:    Storefront child theme.
Author:         Moda Clem
Author URI:
Template:       storefront
Version:        0.1.0
*/

/* ==========================================================================
   Polices auto-hébergées (RGPD — aucun appel à Google Fonts CDN)
   Fraunces : titres uniquement. Inter : tout le reste, y compris les CTA.
   Sous-ensemble latin uniquement (couvre le français en entier).
   ========================================================================== */

@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/fraunces-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/fraunces-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/inter-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/inter-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/inter-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/inter-700.woff2') format('woff2');
}

/* ==========================================================================
   Palette — Décisions verrouillées §2. Neutre-dominant, rose en accent
   uniquement. #ED709A n'est jamais utilisé comme couleur de texte ou de
   fond de bouton (échoue WCAG AA, 2,84:1) — réservé aux badges/décor sur
   fond clair avec texte sombre au-dessus, ou aux traits/bordures.
   ========================================================================== */

:root {
	--moda-color-bg: #FFFFFF;
	--moda-color-text: #1A1A1A;
	--moda-color-accent: #ED709A;      /* badges / décor uniquement, jamais en texte ni en fond de bouton */
	--moda-color-accent-pale: #FACAD6; /* lavis de section, jamais en fond global */
	--moda-color-cta: #B0326A;         /* CTA + liens : seule teinte rose qui passe l'AA sur blanc (5,98:1) */

	--moda-font-heading: 'Fraunces', Georgia, serif;
	--moda-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   Typographie de base
   ========================================================================== */

body,
button,
input,
select,
textarea {
	font-family: var(--moda-font-body);
	font-size: 16px;
	color: var(--moda-color-text);
	background-color: var(--moda-color-bg);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--moda-font-heading);
	font-weight: 600;
}

/* ==========================================================================
   Utilitaires réutilisables — badges (fiche produit / vignette catalogue,
   cf. R1-2 §5). Fond accent, texte sombre : contraste conforme.
   ========================================================================== */

.moda-badge {
	display: inline-block;
	font-family: var(--moda-font-body);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 4px;
	background-color: var(--moda-color-accent);
	color: var(--moda-color-text);
}

.moda-badge--pale {
	background-color: var(--moda-color-accent-pale);
}

/* Badge pourcentage promo (vignette catalogue) - fond couleur CTA pour
   ressortir immediatement au milieu des autres badges pales (retour
   gerants 27/08/2026 : le badge texte "Promo !" par defaut, sans couleur
   et place sous le libelle, ne se voyait pas assez vite). */
.moda-badge--promo {
	background-color: var(--moda-color-cta);
	color: #FFFFFF;
}

.moda-section-wash {
	background-color: var(--moda-color-accent-pale);
}

/* ==========================================================================
   R1-2 — Gabarit fiche produit (machine à 3 états)
   ========================================================================== */

/* CTA générique — bouton foncé, jamais le rose d'accent brut (Décisions §2) */
.moda-cta,
.single_add_to_cart_button,
.moda-sticky-bar__cta {
	background-color: var(--moda-color-cta) !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 4px;
	font-weight: 600;
}

/* Variante grande taille — CTA hero + mur nouveautes (retour gerants
   15/08/2026, 2e passe : deux gros CTA de pleine section). */
.moda-cta--lg {
	display: inline-block;
	padding: 16px 40px !important;
	font-size: 16px;
	letter-spacing: 0.02em;
}

/* Badges en overlay sur la photo produit */
.moda-badges {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.moda-badges--single {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
}

.woocommerce div.product div.images {
	position: relative;
}

.moda-badges--loop {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
}

ul.products li.product {
	position: relative;
}

/* Bloc "Indisponible pour le moment" (états en attente / vendu) */
.moda-unavailable {
	background-color: var(--moda-color-accent-pale);
	border-radius: 6px;
	padding: 16px 18px;
	margin: 12px 0;
}

.moda-unavailable__label {
	font-weight: 700;
	margin: 0 0 6px;
	color: var(--moda-color-text);
}

.moda-unavailable__detail {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
}

.moda-unavailable__form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.moda-unavailable__form input[type="email"] {
	flex: 1;
	min-width: 180px;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.moda-unavailable__note {
	font-size: 12px;
	opacity: 0.7;
	margin: 0;
}

/* Réassurance sous le bouton d'achat */
.moda-reassurance {
	list-style: none;
	margin: 14px 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.6;
}

.moda-reassurance li {
	padding-left: 20px;
	position: relative;
}

.moda-reassurance li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--moda-color-cta);
	font-weight: 700;
}

/* Attributs (taille, catégorie, couleur, composition) */
.moda-attributes {
	list-style: none;
	margin: 16px 0;
	padding: 16px 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	font-size: 14px;
	line-height: 1.8;
}

.moda-size-guide-open {
	color: var(--moda-color-cta);
	text-decoration: underline;
}

/* Cross-sell "Vous aimerez aussi" */
.moda-cross-sell {
	margin-top: 40px;
}

/* .moda-catalog-banner : deplace dans le CSS additionnel du bloc lui-meme
   (page Boutique, retour gerants 17/08/2026). */

/* Modale guide des tailles */
.moda-modal[hidden] {
	display: none;
}

.moda-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.moda-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(26, 26, 26, 0.6);
}

.moda-modal__panel {
	position: relative;
	background: #FFFFFF;
	max-width: 560px;
	width: 90%;
	max-height: 80vh;
	overflow-y: auto;
	border-radius: 8px;
	padding: 32px 24px 24px;
}

.moda-modal__close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: var(--moda-color-text);
}

/* Onglets natifs Woo en accordéon léger (description repliable) */
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-direction: column;
	list-style: none;
	padding: 0;
	margin: 24px 0 0;
	border-bottom: none;
}

.woocommerce-tabs ul.tabs li {
	border: 1px solid #eee;
	border-radius: 4px;
	margin-bottom: 4px;
}

.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 16px;
	font-weight: 600;
	text-decoration: none;
	color: var(--moda-color-text);
}

.woocommerce-Tabs-panel {
	padding: 4px 16px 16px;
}

/* Barre d'achat collante — mobile uniquement */
.moda-sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99998;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #FFFFFF;
	border-top: 1px solid #eee;
	padding: 10px 16px;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

.moda-sticky-bar--visible {
	display: flex;
}

.moda-sticky-bar__cta {
	padding: 10px 18px;
	border-radius: 4px;
}

@media (min-width: 768px) {
	.moda-sticky-bar {
		display: none !important;
	}
}

/* ==========================================================================
   R1 — Grille catalogue : colonnes responsives + vignettes jamais recadrées.
   Remplace le systeme flottant de Storefront par une grille CSS pour un
   controle direct des colonnes (evite un combat de specificite avec le CSS
   coeur). Vignette en 4:5 + object-fit:contain : aucune photo n'est jamais
   coupee, quel que soit son format source (portrait long ou carre).
   ========================================================================== */

ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 12px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

@media (min-width: 480px) {
	ul.products {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px 20px;
	}
}

ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

/* Storefront pose un clearfix ::before/::after (content:"";display:table)
   pense pour son ancien systeme en flottants - une fois le parent passe en
   display:grid, ces pseudo-elements deviennent de vraies cases de grille et
   decalent tous les produits d'un cran (trouve en session le 13/08/2026). */
ul.products::before,
ul.products::after {
	display: none !important;
}

ul.products li.product a img {
	aspect-ratio: 4 / 5;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 4px;
}

/* ==========================================================================
   R1 — Tailles disponibles sur la vignette grille
   ========================================================================== */

.moda-loop-image-wrap {
	position: relative;
}

.moda-loop-sizes {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 8px 8px 7px;
	background: linear-gradient(to top, rgba(255, 255, 255, 0.96) 55%, rgba(255, 255, 255, 0));
}

.moda-loop-sizes__item {
	flex: 0 0 auto;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1;
	border: 1px solid #bbb;
	border-radius: 4px;
	padding: 3px 6px;
	background-color: #fff;
	color: var(--moda-color-text);
}

/* ==========================================================================
   R1 — Filtres boutique (categorie / couleur / taille / prix)
   ========================================================================== */

.moda-filters {
	margin: 0 0 20px;
}

.moda-filters__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 12px 16px;
	font-family: var(--moda-font-body);
	font-size: 14px;
	color: var(--moda-color-text);
	cursor: pointer;
}

.moda-filters__toggle-icon {
	display: inline-flex;
	color: var(--moda-color-text);
}

.moda-filters__toggle-label {
	font-weight: 600;
	letter-spacing: 0.02em;
}

.moda-filters__toggle-count {
	margin-left: auto;
	opacity: 0.55;
	font-size: 13px;
}

/* Sidebar filtres : cachee sur mobile, tout passe par la modale
   "Filtrer / Trier" (retour gerants 15/08/2026). */
.moda-filters__panel {
	display: none;
}

.moda-filter-widget {
	flex: 1 1 180px;
	min-width: 150px;
}

.moda-filter-widget + .moda-filter-widget {
	margin-top: 28px;
}

.moda-filter-widget__title {
	font-family: var(--moda-font-body);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	margin: 0 0 10px;
	color: var(--moda-color-text);
	opacity: 0.65;
}

.moda-filter-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 14px;
}

.moda-filter-widget a {
	color: var(--moda-color-text);
	text-decoration: none;
}

/* Toutes les cases de filtre (categorie/couleur/taille) sont de vraies
   checkbox HTML pour permettre la multi-selection - rien ne navigue au clic,
   seul le bouton "Filtrer" applique la combinaison (retour gerants
   15/08/2026, avant : un clic = navigation immediate, impossible de
   combiner plusieurs filtres). L'input reste dans le DOM (accessibilite,
   focus clavier) mais visuellement invisible, son propre habillage (case,
   pilule ou pastille) porte l'etat coché. */
.moda-filter-checkbox__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Catégorie : liste compacte, simple et classe (poids normal, pas de
   soulignement - le gras souligné faisait "bizarre", retour gerants
   15/08/2026). Grille 2 colonnes pour gagner de la place plutot qu'une
   longue colonne verticale. */
.moda-filter-list-compact {
	display: grid;
	grid-template-columns: repeat(2, auto);
	column-gap: 20px;
	row-gap: 10px;
}

.moda-filter-list-compact li {
	margin: 0;
}

.moda-filter-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 13px;
}

.moda-filter-checkbox__box {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background-color: #fff;
}

/* Case cochee : se remplit en rose accent - jamais la teinte CTA, reservee
   au bouton "Filtrer" lui-meme (retour gerants 15/08/2026). */
.moda-filter-checkbox:has(.moda-filter-checkbox__input:checked) .moda-filter-checkbox__box {
	background-color: var(--moda-color-accent);
	border-color: var(--moda-color-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%231A1A1A' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.moda-filter-checkbox:hover .moda-filter-checkbox__box {
	border-color: var(--moda-color-accent);
}

.moda-filter-checkbox__text {
	font-weight: 400;
}

.moda-filter-list-compact__count {
	font-weight: 400;
	opacity: 0.5;
	font-size: 11px;
	text-decoration: none;
}

/* Taille : pilules (Categorie utilise le style case a cocher ci-dessus).
   Rectangle a coins legerement arrondis plutot que pilule ronde (retour
   gerants 15/08/2026). Coche = tout le fond se remplit en rose accent. */
.moda-filter-pills,
.moda-filter-widget ul.woocommerce-widget-layered-nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.moda-filter-pills li,
.moda-filter-widget ul.woocommerce-widget-layered-nav-list li {
	margin: 0;
}

.moda-filter-pill,
.moda-filter-widget ul.woocommerce-widget-layered-nav-list a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 7px 14px;
	font-size: 13px;
	white-space: nowrap;
	cursor: pointer;
}

.moda-filter-pill:hover,
.moda-filter-widget ul.woocommerce-widget-layered-nav-list a:hover {
	border-color: var(--moda-color-accent);
}

.moda-filter-pill:has(.moda-filter-checkbox__input:checked) {
	background-color: var(--moda-color-accent);
	border-color: var(--moda-color-accent);
}

.moda-filter-pills__count,
.moda-filter-widget .count {
	opacity: 0.5;
	font-size: 11px;
}

/* Couleur : pastilles maison (voir moda_clem_color_filter_list). Largeur
   plafonnee pour former une petite grille homogene avec les autres blocs de
   filtre plutot qu'une seule longue ligne (retour gerants 15/08/2026). Coche
   = anneau rose accent autour de la pastille (un remplissage plein n'aurait
   pas de sens, la pastille porte deja sa propre couleur). */
.moda-filter-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 220px;
	padding-top: 2px;
}

.moda-filter-swatches li {
	margin: 0;
}

/* Juste la pastille, sans le nom en dessous (visuel suffisant, nom dispo au
   survol via l'attribut title - demande gerants 14/08/2026). */
.moda-filter-swatch {
	display: block;
	cursor: pointer;
}

.moda-filter-swatches__dot {
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.moda-filter-swatch:has(.moda-filter-checkbox__input:checked) .moda-filter-swatches__dot {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--moda-color-accent);
}

.moda-filter-swatches__label {
	display: none;
}

@media (min-width: 768px) {
	.moda-filters__toggle {
		display: none;
	}

	/* Sidebar gauche fixe sur desktop (maquette gerants 13/08/2026) - vrai
	   flexbox sur un wrapper maison plutot qu'un flottant : ul.products est
	   en display:grid, et un flottant n'est PAS fiable pour se faire
	   contourner par un bloc qui etablit son propre contexte de mise en
	   forme (grid/flex) - la specif laisse ca au choix du navigateur, Chrome
	   choisit de le pousser en dessous plutot qu'a cote. En dessous de
	   768px on garde la barre repliable pleine largeur empilee normalement.
	   ========================================================================== */
	.moda-shop-layout {
		display: flex;
		align-items: flex-start;
		gap: 32px;
	}

	.moda-filters {
		flex: 0 0 230px;
		width: 230px;
	}

	.moda-shop-content {
		flex: 1 1 auto;
		min-width: 0;
	}

	.moda-filters__panel {
		display: block !important;
		max-height: none;
		overflow: visible;
	}

	.moda-filter-widget {
		flex: none;
		width: 100%;
		margin-bottom: 30px;
	}

	.moda-filter-widget:last-child {
		margin-bottom: 0;
	}

	/* Sort de la contrainte de largeur native Storefront (retour gerants
	   16/08/2026 : sur un ecran large, la grille boutique s'arretait vers
	   ~1064px - ".col-full { max-width: 66.4989em }", pensee a l'origine
	   pour un usage classique en colonne de texte - laissant une bande
	   vide sur le reste de l'ecran, verifie sur capture d'ecran a 1879px de
	   large). Meme technique de "sortie de conteneur" deja utilisee pour le
	   hero et le rayon Blouses (width:100vw + marges negatives) plutot
	   qu'un max-width global sur .col-full, qui aurait aussi elargi les
	   pages de texte (mentions legales, CGV) au risque de lignes de lecture
	   trop longues - la portee reste volontairement ciblee aux blocs
	   "grille produits", ou plus grand sert vraiment l'UX. */
	.moda-shop-layout {
		width: 100vw;
		margin-left: calc(-50vw + 50%);
		margin-right: calc(-50vw + 50%);
		padding-left: 40px;
		padding-right: 40px;
		box-sizing: border-box;
	}

	/* Avec la grille qui a maintenant beaucoup plus de largeur a disposition,
	   3 colonnes fixes rendraient les cartes demesurees - une 4e colonne au
	   -dela de 1500px garde des cartes photo a une taille confortable plutot
	   que gigantesque. */
	@media (min-width: 1500px) {
		.moda-shop-content ul.products {
			grid-template-columns: repeat(4, 1fr) !important;
		}
	}
}

/* ==========================================================================
   R1 — Barre de tri (native Storefront) : mise aux couleurs de la marque,
   et Storefront l'affiche par defaut en double (haut ET bas de la grille,
   meme chose pour la pagination) - on ne garde que le tri en haut et la
   pagination en bas (retour gerants 14/08/2026).
   ========================================================================== */

.woocommerce-ordering select.orderby {
	appearance: none;
	border: 1px solid #ccc;
	border-radius: 999px;
	padding: 8px 32px 8px 16px;
	font-family: var(--moda-font-body);
	font-size: 13px;
	background-color: #fff;
	color: var(--moda-color-text);
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231A1A1A'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.storefront-sorting {
	margin-bottom: 20px;
}

/* Haut : pas de pagination (deja en bas, pas besoin des deux). */
.moda-shop-content > .storefront-sorting .woocommerce-pagination {
	display: none;
}

/* Bas : pas de tri ni de compteur, juste la pagination. */
.moda-shop-layout ~ .storefront-sorting .woocommerce-ordering,
.moda-shop-layout ~ .storefront-sorting .woocommerce-result-count {
	display: none;
}

/* Sur mobile, la barre de tri native affichee en ligne au-dessus de la
   grille faisait "bizarre" a cet endroit - remplacee par le bouton
   "Filtrer / Trier" qui ouvre la modale (celle-ci reprend un tri natif a
   elle, cf. woocommerce_catalog_ordering() dans moda_clem_shop_filters).
   Des 768px la barre native du haut reste affichee normalement (retour
   gerants 15/08/2026). */
@media (max-width: 767px) {
	.moda-shop-content > .storefront-sorting .woocommerce-ordering,
	.moda-shop-content > .storefront-sorting .woocommerce-result-count {
		display: none;
	}
}

/* ==========================================================================
   R1 — Modale "Filtrer / Trier" (mobile uniquement, cf. moda_clem_shop_filters)
   ========================================================================== */

.moda-modal__panel--filters {
	max-width: 420px;
	width: 92%;
	max-height: 88vh;
	text-align: left;
	padding: 24px 22px;
}

.moda-filters-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.moda-filters-modal__title {
	font-family: var(--moda-font-heading);
	font-size: 19px;
	margin: 0;
}

.moda-modal__panel--filters .moda-filter-widget {
	margin-bottom: 26px;
	padding-bottom: 26px;
	border-bottom: 1px solid #eee;
}

.moda-modal__panel--filters .moda-filter-widget:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.moda-modal__panel--filters .woocommerce-ordering {
	width: 100%;
}

.moda-modal__panel--filters .woocommerce-ordering select.orderby {
	width: 100%;
}

.moda-modal__panel--filters .price_slider_wrapper {
	margin-top: 6px;
}

/* Marge en bas pour ne jamais passer sous la barre "Filtrer" fixe qui
   apparait des qu'une case est cochee (retour gerants 15/08/2026). */
.moda-modal__panel--filters {
	padding-bottom: 90px;
}

/* Bouton "Filtrer" statique en bas de la sidebar desktop - pas besoin d'etre
   fixe/collant, la colonne n'est pas independamment scrollable. */
.moda-filters-apply--static {
	display: block;
	width: 100%;
	padding: 12px;
	font-size: 14px;
}

.moda-filters__actions {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Lien "Reinitialiser les filtres" (retour gerants 16/08/2026) - simple
   lien texte plutot qu'un second bouton plein, pour rester secondaire
   visuellement face a "Filtrer". N'existe dans le HTML que s'il y a
   reellement un filtre actif (calcule cote serveur, cf. PHP). */
.moda-filters-reset {
	display: block;
	text-align: center;
	font-family: var(--moda-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--moda-color-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	opacity: 0.75;
}

.moda-filters-reset:hover {
	opacity: 1;
	color: var(--moda-color-cta);
}

.moda-filters-reset--modal {
	margin-top: 20px;
}

/* Bouton "Filtrer" mobile : reste fixe en bas de l'ECRAN (pas juste du
   panneau) pendant le scroll, n'apparait que si au moins une case est cochee
   (retour gerants 15/08/2026 - avant, il fallait scroller jusqu'en bas pour
   valider). */
.moda-filters-apply-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100001;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	background-color: #fff;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}

.moda-filters-apply-bar[hidden] {
	display: none;
}

.moda-filters-apply-bar__btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px;
	font-size: 15px;
}

.moda-filters-apply-bar__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.25);
	font-size: 12px;
}

/* ==========================================================================
   R1 — Vignette grille : espacements resserres, alignement gauche, bouton
   plus discret (retour gerants 14/08/2026).
   ========================================================================== */

ul.products li.product,
ul.products li.product .woocommerce-loop-product__link {
	text-align: left !important;
}

ul.products li.product h2.woocommerce-loop-product__title {
	margin: 10px 0 2px !important;
	padding: 0 !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
}

ul.products li.product .price {
	display: block !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-size: 15px !important;
}

/* Prix barre/reduit colores sur la vignette catalogue (retour gerants
   27/08/2026 : sans couleur, la reduction ne se voyait pas assez vite).
   Prix initial grise (WooCommerce le met a opacite 0.5 par defaut, pas
   assez marque), prix reduit en gras couleur CTA pour ressortir. */
ul.products li.product .price del {
	color: #999999 !important;
	opacity: 1 !important;
}

ul.products li.product .price ins {
	color: var(--moda-color-cta) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

ul.products li.product .button.add_to_cart_button {
	display: inline-block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 9px 20px !important;
	font-size: 13px !important;
	border-radius: 4px !important;
}

/* ==========================================================================
   R1 — Boutons de taille (fiche produit + pop-up rapide grille), remplacent
   le menu deroulant natif "Choisir une option" (retour gerants 14/08/2026).
   ========================================================================== */

.moda-size-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0;
}

.moda-size-btn {
	min-width: 48px;
	padding: 10px 14px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background-color: #fff;
	font-family: var(--moda-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--moda-color-text);
	cursor: pointer;
}

.moda-size-btn:hover {
	border-color: var(--moda-color-cta);
}

.moda-size-btn--active {
	border-color: var(--moda-color-cta);
	background-color: var(--moda-color-cta);
	color: #fff;
}

.moda-modal__panel-body h3 {
	margin: 0 0 4px;
	font-size: 17px;
}

/* ==========================================================================
   R1 — Merchandising : remise par paliers
   ========================================================================== */

.moda-discount-tiers {
	font-size: 14px;
	line-height: 1.6;
	margin: 4px 0 12px;
	color: var(--moda-color-text);
}

.moda-discount-progress {
	background-color: var(--moda-color-accent-pale);
	border-radius: 6px;
	padding: 10px 14px;
	margin-bottom: 16px;
	font-size: 14px;
}

.moda-discount-progress p {
	margin: 0;
}

/* ==========================================================================
   R1 — Logo header (image reelle plutot que le texte "Moda Clem" genere par
   le theme, retour gerants 15/08/2026). Le logo doit dominer visuellement le
   header, pas les liens de nav (retour gerants 15/08/2026) - agrandi en
   consequence. Le fichier source (carre, beaucoup de marge blanche) n'est
   pas retouche, seul l'affichage est contraint.
   ========================================================================== */

/* !important necessaire : le style.css du theme PARENT Storefront (fichier
   distinct du notre malgre le meme nom) contient deja une regle plus
   specifique ciblant ".custom-logo-link img" (avec le tag "img" en plus,
   donc plus specifique qu'un simple ".custom-logo") qui gagnait sinon,
   quel que soit l'ordre de chargement (constate en testant en conditions
   reelles). */
.site-branding .custom-logo,
.site-header .custom-logo-link img {
	max-width: 100px !important;
	max-height: 100px !important;
	width: auto !important;
}

@media (min-width: 768px) {
	.site-branding .custom-logo,
	.site-header .custom-logo-link img {
		max-width: 140px !important;
		max-height: 140px !important;
	}
}

/* ==========================================================================
   R1 — Chantier charte graphique : elements natifs WooCommerce/Storefront
   (icone panier, mini-panier, boutons panier/checkout) — retour gerants
   15/08/2026.
   ========================================================================== */

/* Icone panier header : panier generique -> sac shopping (esprit boutique
   mode). Simple changement de glyphe Font Awesome (deja charge par
   Storefront pour cette icone, cf. .cart-contents::after natif) - pas
   besoin d'un nouveau SVG. "\f290" = fa-shopping-bag (solid). */
.site-header-cart .cart-contents {
	position: relative !important;
}

.site-header-cart .cart-contents::after {
	content: "\f290" !important;
	color: var(--moda-color-text);
}

/* Texte "X articles" retire au profit du badge rond (cf. JS
   moda_clem_cart_badge_script) - redondant sinon. */
.site-header-cart .count {
	display: none !important;
}

.moda-cart-badge {
	position: absolute;
	/* .cart-contents porte ~26px de padding vertical natif (toute la hauteur
	   du header est cliquable) - l'icone est centree DANS cette boite, pas
	   collee a son bord haut, d'ou ce decalage plutot qu'un simple "top:0". */
	top: 22px;
	right: -2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background-color: var(--moda-color-accent);
	color: var(--moda-color-text);
	font-family: var(--moda-font-body);
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.moda-cart-badge[hidden] {
	display: none;
}

/* Boutons "Valider la commande" / "Commander" (panier, mini-panier, tunnel
   de commande) : natifs en noir par defaut (styles Storefront pour les
   boutons WooCommerce Blocks, classes differentes des anciens templates -
   pas couverts par la regle CTA generale deja en place). Alignement sur la
   couleur CTA #B0326A du reste du site. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.woocommerce-mini-cart__buttons .button.checkout,
.moda-mini-cart-shop-cta {
	background-color: var(--moda-color-cta) !important;
	color: #FFFFFF !important;
	border-color: var(--moda-color-cta) !important;
	border-radius: 4px !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.woocommerce-mini-cart__buttons .button.checkout:hover,
.moda-mini-cart-shop-cta:hover {
	background-color: var(--moda-color-text) !important;
	border-color: var(--moda-color-text) !important;
}

/* Mini-panier (dropdown au clic sur l'icone) : sobriete/coherence avec le
   reste du site plutot que le style natif brut. */
.widget_shopping_cart .woocommerce-mini-cart__total {
	font-family: var(--moda-font-body);
	font-weight: 700;
	border-top: 1px solid #eee;
	padding-top: 10px;
}

.widget_shopping_cart .woocommerce-mini-cart-item {
	font-family: var(--moda-font-body);
}

.widget_shopping_cart .woocommerce-mini-cart__buttons .button {
	border-radius: 4px !important;
}

.widget_shopping_cart .quantity {
	color: var(--moda-color-text);
	opacity: 0.7;
}

/* Ouverture au clic (pas seulement au survol, inutilisable au doigt sur
   mobile - retour gerants 15/08/2026) : le JS (functions.php,
   moda_clem_header_search_toggle_script) bascule ".focus" sur
   .site-header-cart au clic - la classe native que Storefront utilise deja
   pour son etat ouvert - donc tout le CSS de positionnement/hauteur du
   panier deroulant (regles parentes ".site-header-cart:hover
   .widget_shopping_cart, .focus .widget_shopping_cart { left:0;
   display:block }" etc.) s'applique tel quel, sans reimplementation ici. */

/* ==========================================================================
   R1 — Barre de recherche header : style natif WooCommerce (gris plat) ->
   style maison, cohérent avec les autres champs du site (retour gerants
   15/08/2026).
   ========================================================================== */

.site-search .widget_product_search form {
	position: relative;
}

.site-search input.search-field {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 999px;
	padding: 9px 16px 9px 38px;
	font-family: var(--moda-font-body);
	font-size: 14px;
	color: var(--moda-color-text);
}

.site-search input.search-field:focus {
	outline: none;
	border-color: var(--moda-color-accent);
}

.site-search .woocommerce-product-search::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 50%;
	width: 14px;
	height: 14px;
	transform: translateY(-50%);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='5.5' stroke='%231A1A1A' stroke-width='1.3'/%3E%3Cline x1='11' y1='11' x2='15' y2='15' stroke='%231A1A1A' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	pointer-events: none;
	opacity: 0.55;
}

.site-search button[type="submit"] {
	display: none;
}

/* ==========================================================================
   R1 — Pied de page maison : colonnes regroupees, moyens de paiement,
   newsletter, credit BCE (retour gerants 15/08/2026, chantier charte
   graphique). Remplace le widget nav_menu a plat + le credit natif
   "Built with WooCommerce".
   ========================================================================== */

.site-footer {
	background-color: #fff;
	border-top: 1px solid #eee;
}

/* Sur mobile, un footer tout blanc en simple liste empilee se lisait comme
   une continuation de la page plutot qu'une section a part (retour gerants
   15/08/2026 - "ça fait pas trop footer"). Une teinte + des separateurs
   entre groupes suffisent a le distinguer, sans toucher au desktop qui
   fonctionne deja bien. */
@media (max-width: 767px) {
	.site-footer {
		background-color: #FAF6F2;
		border-top: 1px solid #EADFD5;
	}

	.moda-footer__column {
		padding-top: 20px;
		border-top: 1px solid #EADFD5;
	}

	.moda-footer__column:first-child {
		padding-top: 0;
		border-top: none;
	}
}

.moda-footer {
	padding: 48px 0 8px;
}

/* Mobile : une seule colonne empilee, plus lisible qu'une grille serree sur
   petit ecran (retour gerants 15/08/2026). */
.moda-footer__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin-bottom: 32px;
}

.moda-footer__column-title {
	font-family: var(--moda-font-heading);
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 14px;
	color: var(--moda-color-text);
}

.moda-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.moda-footer__list a {
	font-family: var(--moda-font-body);
	font-size: 14px;
	color: var(--moda-color-text);
	text-decoration: none;
}

.moda-footer__list a:hover {
	color: var(--moda-color-accent);
	text-decoration: underline;
}

/* Newsletter : meme schema que le formulaire "indicatif" existant
   (input + bouton + note), avec la case de consentement RGPD en plus. */
.moda-footer-newsletter {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.moda-footer-newsletter__input {
	width: 100%;
	max-width: 280px;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: var(--moda-font-body);
	font-size: 14px;
}

.moda-footer-newsletter__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-family: var(--moda-font-body);
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.85;
	cursor: pointer;
}

.moda-footer-newsletter__consent input {
	margin-top: 2px;
	accent-color: var(--moda-color-accent);
}

.moda-footer-newsletter__submit {
	align-self: flex-start;
	padding: 10px 20px;
	font-size: 14px;
}

.moda-footer-newsletter__note {
	font-size: 11px;
	opacity: 0.6;
	margin: 10px 0 0;
}

.moda-footer-newsletter__success {
	font-size: 13px;
	font-weight: 600;
	color: #0a7a3d;
	margin: 0;
}

.moda-footer__payments {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 24px;
	border-top: 1px solid #eee;
}

.moda-footer__payments-label {
	font-family: var(--moda-font-body);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.55;
	margin-right: 4px;
}

.moda-footer__payments img {
	display: block;
	height: 22px;
	width: auto;
}

.site-info {
	font-family: var(--moda-font-body);
	font-size: 12px;
	text-align: center;
	padding: 20px 0;
	border-top: 1px solid #eee;
	opacity: 0.7;
}

.site-info a {
	color: var(--moda-color-text);
}

.site-info a:hover {
	color: var(--moda-color-accent);
}

@media (min-width: 768px) {
	.moda-footer__columns {
		grid-template-columns: repeat(5, 1fr);
		gap: 24px;
	}
}

/* ==========================================================================
   R1 — Bandeau d'annonce tout en haut du site (retour gerants 15/08/2026,
   2e passe) : au-dessus meme du header, sur toutes les pages (branche sur
   wp_body_open cote PHP, pas un shortcode de page). Reprend le contenu de
   l'ancien bandeau reassurance de la home (.moda-home-reassurance,
   toujours dans le code mais plus appele) dans une version plus compacte.
   ========================================================================== */
.moda-top-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 24px;
	background-color: var(--moda-color-accent-pale);
	color: var(--moda-color-text);
	font-family: var(--moda-font-body);
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	padding: 7px 16px;
}

@media (min-width: 600px) {
	.moda-top-bar {
		font-size: 13px;
	}
}

/* "Paiement securise Bancontact" retire du bandeau mobile uniquement
   (retour gerants 15/08/2026, 3e passe) : sur les ecrans etroits, les 3
   items passaient sur 2 lignes, alourdissant le tout premier ecran vu par
   la visiteuse. Les deux items gardes (Click & Collect gratuit, Livraison
   gratuite) sont les arguments qui pesent le plus sur la decision d'achat
   a ce stade (avant meme d'avoir vu le catalogue) ; la reassurance paiement
   securise reste pertinente mais compte davantage au moment du checkout
   qu'en tout premier ecran - desktop, ou la place ne manque pas, inchange. */
@media (max-width: 599px) {
	.moda-top-bar__payment {
		display: none;
	}
}

/* ==========================================================================
   R1 — Sections page d'accueil (retour gerants 15/08/2026)
   ========================================================================== */

/* Format compact toujours horizontal, meme sur mobile (3 tuiles cote a
   cote) - retour gerants 15/08/2026, remplace l'empilement vertical. */
.moda-home-reassurance {
	display: flex;
	justify-content: center;
	gap: 6px;
	max-width: 760px;
	margin: 0 auto;
	padding: 20px 12px;
}

.moda-home-reassurance__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
	font-family: var(--moda-font-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--moda-color-text);
}

.moda-home-reassurance__item svg {
	flex: 0 0 auto;
	color: var(--moda-color-cta);
}

/* Marge haute positive : une valeur negative ici faisait chevaucher les
   boutons "Ajouter au panier" des produits juste au-dessus sur mobile
   (retour gerants 15/08/2026). */
.moda-home-see-all {
	text-align: center;
	margin: 20px 0 12px;
}

.moda-home-see-all a {
	font-family: var(--moda-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--moda-color-text);
	text-decoration: none;
	border-bottom: 1px solid var(--moda-color-text);
	padding-bottom: 2px;
}

.moda-home-see-all a:hover {
	color: var(--moda-color-cta);
	border-color: var(--moda-color-cta);
}

/* .moda-home-rarity : deplace dans le CSS additionnel du bloc lui-meme
   (retour gerants 17/08/2026, chantier reprenabilite - editable au meme
   endroit que le contenu plutot que perdu ici). */

.moda-home-tiles {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	padding: 8px 24px 40px;
	max-width: 900px;
	margin: 0 auto;
}

.moda-home-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 220px;
	border-radius: 6px;
	background-color: var(--moda-color-accent-pale);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	text-decoration: none;
}

.moda-home-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(26, 26, 26, 0.55), rgba(26, 26, 26, 0) 55%);
}

.moda-home-tile__label {
	position: relative;
	z-index: 1;
	padding: 18px;
	font-family: var(--moda-font-heading);
	font-size: 20px;
	font-weight: 600;
	color: #fff;
}

/* .moda-home-cc et .moda-home-about : deplaces dans le CSS additionnel de
   leur bloc respectif (retour gerants 17/08/2026, chantier reprenabilite). */

@media (min-width: 600px) {
	.moda-home-reassurance {
		gap: 40px;
		padding: 28px 24px;
	}

	.moda-home-reassurance__item {
		flex-direction: row;
		font-size: 14px;
	}

	.moda-home-tiles {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Espace natif Storefront entre le header et le contenu de page, beaucoup
   trop genereux une fois verifie en conditions reelles (retour gerants
   15/08/2026, 3e passe : "y'a tellement d'espace blanc que le contenu
   demarre a la moitie du telephone") - #masthead porte nativement ~26px de
   padding haut/bas ET ~68px de margin-bottom, jamais remis en question
   depuis la refonte du header. Resserre ici, sur desktop comme mobile (la
   consigne visait explicitement les deux cette fois), sans toucher a
   l'alignement interne du header lui-meme (deja valide separement). */
#masthead {
	padding: 10px 0 !important;
	margin-bottom: 12px !important;
}

/* ==========================================================================
   R1 — Header mobile en une seule ligne (retour gerants 15/08/2026) : burger
   -> recherche -> logo (centre, agrandi) -> compte -> panier, deplaces en
   JS dans .moda-mobile-bar (cf. moda_clem_header_search_toggle_script) sous
   le seuil mobile - desktop garde le flux natif Storefront (float), non
   modifie.
   ========================================================================== */

@media (max-width: 767px) {
	#masthead .skip-link {
		display: none;
	}

	/* Ligne compacte mobile (retour gerants 15/08/2026, reconstruction
	   complete) : burger + recherche | logo | compte + panier, dans un seul
	   conteneur flex (.moda-mobile-bar) que le JS remplit en y deplacant les
	   vrais elements (cf. moda_clem_header_search_toggle_script) - plus de
	   display:contents/CSS Grid multi-niveaux (mecanisme trop fragile,
	   verifie correct en apparence mais casse en conditions reelles sur
	   telephone a deux reprises). */
	.moda-mobile-bar {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 14px 16px;
	}

	/* flex:1 sur les deux groupes plutot qu'un simple "justify-content:
	   space-between" sur 3 elements de tailles differentes : sans ca, le
	   logo ne se centre que si les deux groupes d'icones pesent exactement
	   le meme poids visuel, ce qui n'est pas le cas (compte+panier vs
	   burger+recherche) - le logo derivait visiblement hors du centre
	   (retour gerants 15/08/2026, capture d'ecran a l'appui). Avec flex:1
	   des deux cotes, chaque groupe occupe la meme largeur quel que soit son
	   contenu, et le logo (flex:0 0 auto, entre les deux) tombe pile au
	   centre. */
	.moda-mobile-bar__group {
		display: flex;
		align-items: center;
		flex: 1 1 0;
		gap: 22px;
	}

	.moda-mobile-bar__group--right {
		justify-content: flex-end;
	}

	/* width:auto necessaire : une regle native Storefront (".site-branding")
	   impose "width: calc(100% - 120px)" (pensee pour son emplacement
	   d'origine, une nav desktop flottante) - dans notre groupe flex mobile,
	   "100%" se resolvait contre les 368px de largeur utile de la barre,
	   donnant 248px de large a une boite qui ne contient qu'un logo de
	   ~100px. Cette largeur fantome poussait tout le reste (logo visuel
	   decale, groupe de droite pousse hors de la marge de 16px jusqu'a
	   deborder de l'ecran) - cause racine commune aux 3 bugs constates par
	   les gerants (logo pas centre, panier trop pres du bord) une fois
	   verifie en conditions reelles. */
	.moda-mobile-bar .site-branding {
		flex: 0 0 auto;
		width: auto !important;
		float: none !important;
		margin: 0;
	}

	/* width:auto necessaire : une regle native Storefront (".woocommerce-active
	   .site-header .site-header-cart") impose "width: 21.7391%" a l'icone
	   panier, pensee pour son emplacement d'origine (cote d'une nav flottante
	   de largeur connue). Place dans notre groupe flex mobile (largeur
	   intrinseque, pas de conteneur de reference fixe pour resoudre un
	   pourcentage), ce pourcentage se resolvait a 0 - le panier existait dans
	   le DOM mais occupait 0x0px, invisible (bug constate en conditions
	   reelles). */
	.moda-mobile-bar .moda-header-account,
	.moda-mobile-bar .site-header-cart.menu {
		float: none !important;
		width: auto !important;
		margin: 0 !important;
	}

	/* Icones agrandies + cibles de clic plus genereuses (retour gerants
	   15/08/2026 : "vraiment agrandis pas mal et espace bien pour que ce
	   soit bien cliquable sur mobile") - uniquement dans ce contexte mobile,
	   desktop non touche. Le bouton lui-meme (32px) est plus grand que le
	   SVG affiche (26px) pour laisser une marge de tolerance au clic autour
	   du dessin. */
	.moda-mobile-bar #site-navigation-menu-toggle.menu-toggle,
	.moda-mobile-bar .moda-header-search-toggle,
	.moda-mobile-bar .moda-header-account {
		width: 32px !important;
		height: 32px !important;
	}

	.moda-mobile-bar #site-navigation-menu-toggle.menu-toggle svg,
	.moda-mobile-bar .moda-header-search-toggle svg,
	.moda-mobile-bar .moda-header-account svg {
		width: 26px;
		height: 26px;
	}

	/* Cause racine reelle du panier invisible sur mobile (trouvee en
	   inspectant les regles calculees en conditions reelles - le
	   width:21.7391% natif n'etait pas la vraie cause) : woocommerce.css
	   (le CSS du plugin, pas Storefront) masque ".cart-contents" par defaut
	   sans media query, et ne le reaffiche que dans son propre
	   "@media (min-width:768px)" - WooCommerce part du principe que le theme
	   fournit un autre acces au panier sur mobile. Storefront le fait via sa
	   "handheld footer bar", que nous avons volontairement retiree tot dans
	   le projet (pied de page mobile custom a la place) sans jamais
	   redonner l'affichage a ce lien - bug latent depuis, jamais repere avant
	   un vrai test a largeur mobile reelle. */
	.site-header-cart .cart-contents {
		display: block !important;
	}

	/* Glyphe panier natif remplace par un SVG en data-URI CSS (pas une
	   injection JS) : le point de code prive "\f290" (::after natif, cense
	   afficher un sac Font Awesome) ne s'affichait pas dans la bonne police
	   d'icones une fois verifie en conditions reelles - glyphe de repli
	   affiche a la place (retour gerants 15/08/2026 : "petit logo bizarre").
	   Un premier correctif injectait un <svg> en JS, mais wc-cart-fragments.js
	   (meme cause que le bug du mini-panier corrige plus haut) remplace le
	   HTML de ".cart-contents" par du contenu frais peu apres le chargement
	   de la page et efface tout enfant injecte manuellement - un data-URI en
	   arriere-plan CSS survit puisqu'il ne depend d'aucun element DOM.
	   Uniquement en contexte mobile - desktop non touche. */
	.moda-mobile-bar .site-header-cart .cart-contents::after {
		content: "" !important;
		display: block;
		width: 26px;
		height: 26px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7h10l-.8 9.3a1 1 0 0 1-1 .9H6.8a1 1 0 0 1-1-.9L5 7z' stroke='%231A1A1A' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M7.2 7V5.2a2.8 2.8 0 0 1 5.6 0V7' stroke='%231A1A1A' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
		background-size: contain;
		background-repeat: no-repeat;
	}

	.moda-mobile-bar .site-header-cart .cart-contents {
		display: flex !important;
		align-items: center;
		justify-content: center;
		padding: 0 !important;
		height: 32px;
	}

	/* Le badge rond etait positionne pour le padding vertical natif
	   (~26px) de .cart-contents, retire juste au-dessus pour la version
	   mobile compacte - recale sur le coin superieur droit du glyphe
	   agrandi (26px, retour gerants 15/08/2026 : "aggrandis pas mal"). */
	.moda-mobile-bar .moda-cart-badge {
		top: -2px;
		right: -6px;
	}

	/* Meme cause racine que ci-dessus, pour le panneau du mini-panier
	   lui-meme cette fois : tout le mecanisme de positionnement +
	   affichage au ".focus" (cf. woocommerce.css) vit dans le
	   "@media (min-width:768px)" natif - rien ne l'affiche en dessous.
	   On rejoue l'equivalent ici, en position:fixed par rapport au viewport
	   (plutot que relatif a .site-header-cart, trop etroit et colle au bord
	   droit pour porter un panneau de ~300px) avec une gouttiere de 16px de
	   chaque cote, coherente avec le reste des marges mobiles. */
	.site-header-cart .widget_shopping_cart {
		position: fixed;
		top: 142px;
		left: 16px;
		right: 16px;
		width: auto;
		max-height: 70vh;
		overflow-y: auto;
		z-index: 999999;
		/* Fond plein necessaire : le widget est nativement transparent (la
		   "carte" blanche du mini-panier desktop vient elle aussi du meme
		   bloc "@media (min-width:768px)" contourne ci-dessus) - sans ca le
		   panneau se melangeait au contenu de la page derriere lui (bug
		   constate en conditions reelles). */
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
		padding: 16px;
	}

	.site-header-cart.focus .widget_shopping_cart {
		display: block;
	}

	/* Le sous-total ("75,00 €") a cote de l'icone panier tient en une ligne
	   sur desktop mais casse en 3 lignes une fois coince dans le groupe
	   compact mobile (bug constate en conditions reelles) - masque ici
	   uniquement, l'icone + le badge rond suffisent sur mobile. */
	.moda-mobile-bar .site-header-cart .cart-contents .amount {
		display: none;
	}

	/* Le conteneur d'origine (.col-full) ne garde plus que le formulaire de
	   recherche une fois son icone de bascule deplacee dans la barre - lui
	   redonner le meme gouttiere horizontale que la barre pour un alignement
	   coherent (il n'est plus "aplati", c'est a nouveau une vraie boite). */
	.site-header .col-full {
		padding: 0 16px;
	}

	/* Le menu deroulant (ouvert via le burger) : pleine largeur, sous la
	   barre compacte. Visibilite geree par NOTRE classe (.moda-nav-open sur
	   #masthead, cf. JS) plutot que la classe native ".toggled" de
	   Storefront - le mecanisme natif jonglait avec un second rendu
	   "handheld-navigation" concurrent et n'ouvrait plus rien de fiable une
	   fois nos conteneurs remanies (bug constate en conditions reelles,
	   retour gerants 15/08/2026). */
	#site-navigation .primary-navigation {
		display: none;
		padding: 0 16px;
	}

	.site-header.moda-nav-open #site-navigation .primary-navigation {
		display: block;
	}

	/* Meme cause racine que le lien panier et le mini-panier plus haut :
	   ".site-search { display:none }" est natif et inconditionnel
	   (woocommerce/storefront), leur "display:block" n'existe que dans
	   "@media (min-width:768px)" - en dessous, rien ne montre le champ meme
	   une fois deplie via max-height (bug constate en conditions reelles,
	   le champ recherche ne s'affichait jamais sur telephone). */
	.site-header.moda-search-open .site-search {
		display: block !important;
	}

	/* Rendu alternatif "handheld" de Storefront (liste dupliquee) : jamais
	   utilise, on pilote un seul menu deroulant nous-memes (ci-dessus). */
	#site-navigation .handheld-navigation {
		display: none !important;
	}
}

/* Page active dans le menu (retour gerants 16/08/2026) : Storefront ajoute
   nativement la classe "current-menu-item" au bon endroit, mais son style
   par defaut passe le lien en gris clair (#5B5B5B) - PLUS PALE que les
   liens normaux (#1A1A1A, quasi noir), donc moins visible au lieu de plus
   visible une fois compare cote a cote (bug constate en conditions
   reelles : "c'est legerement grise mais on voit pas trop"). Remplace par
   un style qui ressort vraiment : couleur d'accent + gras + soulignement.
   S'applique aussi bien au menu desktop qu'au menu mobile deroulant (meme
   liste de liens, #site-navigation .primary-navigation dans les deux cas).
   "current-menu-ancestor"/"current_page_ancestor" couvrent le cas d'une
   sous-page (ex. categorie boutique) dont le parent doit rester en
   surbrillance. */
#site-navigation .current-menu-item > a,
#site-navigation .current_page_item > a,
#site-navigation .current-menu-ancestor > a,
#site-navigation .current_page_ancestor > a {
	color: var(--moda-color-cta) !important;
	font-weight: 700 !important;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ==========================================================================
   R1 — Header desktop sur une seule ligne (retour gerants 16/08/2026) :
   logo -> menu (5 pages) -> recherche -> compte -> panier. Storefront
   imbrique nativement logo+recherche dans .col-full (1re ligne) et
   menu+compte+panier dans .storefront-primary-navigation (2e ligne, mise en
   page par flottement CSS) - deux conteneurs distincts, impossibles a
   fusionner proprement en CSS seul sans casser leur logique interne. Meme
   demarche que le regroupement mobile (.moda-mobile-bar) : le JS deplace
   les vrais noeuds dans .moda-desktop-bar (cf.
   moda_clem_header_search_toggle_script), qui prend le relais en tant que
   conteneur flex unique.
   ========================================================================== */
@media (min-width: 768px) {
	.moda-desktop-bar {
		display: flex;
		align-items: center;
		gap: 28px;
		/* Gouttiere laterale (retour gerants 16/08/2026, 2e passe) : le panier
		   touchait litteralement le bord droit de l'ecran (0 padding
		   horizontal jusqu'ici) - la barre reste pleine largeur (pas de
		   max-width, coherent avec le reste du site, cf. Journal §9.9octies),
		   juste avec un peu d'air de chaque cote plutot que le contenu collé
		   au bord. */
		padding: 4px 40px;
	}

	/* Neutralise le flottement + les largeurs natives de chaque element
	   (pensees pour leur emplacement d'origine sur 2 lignes, notamment
	   ".site-branding { width:calc(100% - 120px); float:left }" et
	   ".site-header-cart { width:21.7391%; float:right }" deja rencontrees
	   lors du chantier mobile) - sans ca, places cote a cote dans un meme
	   conteneur flex, elles se marchent dessus ou s'ecrasent a une largeur
	   incoherente (memes bugs que sur mobile, cf. §9.9ter du Journal). */
	.moda-desktop-bar .site-branding,
	.moda-desktop-bar #site-navigation,
	.moda-desktop-bar .site-search,
	.moda-desktop-bar .moda-header-account,
	.moda-desktop-bar .site-header-cart {
		float: none !important;
		width: auto !important;
		margin: 0 !important;
	}

	.moda-desktop-bar .site-branding {
		flex: 0 0 auto;
	}

	.moda-desktop-bar #site-navigation {
		flex: 0 0 auto;
	}

	/* Recherche : largeur fixe raisonnable plutot que de s'etirer, pousse
	   le reste (compte, panier) vers la droite via la marge auto qui suit
	   immediatement sur le premier des deux. */
	.moda-desktop-bar .site-search {
		flex: 0 0 auto;
		width: 220px;
		margin-left: auto !important;
	}

	.moda-desktop-bar .moda-header-account {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
	}

	.moda-desktop-bar .site-header-cart {
		flex: 0 0 auto;
	}

	/* Meme cause racine que le correctif mobile deja en place plus haut
	   (§9.9ter, ligne ~1726) : la regle native Storefront
	   ".site-header-cart .widget_shopping_cart{width:100%}" se resout
	   maintenant contre ".site-header-cart" (largeur:auto, reduite a
	   l'icone seule sur desktop, regle juste au-dessus) au lieu de la nav
	   flottante d'origine que Storefront avait en tete - le mini-panier
	   s'ecrase a ~40px de large, texte empile lettre par lettre (bug
	   constate en conditions reelles, capture d'ecran a l'appui,
	   18/08/2026).
	   Bug introduit par le premier correctif (retour gerants, 2e capture
	   d'ecran) : la regle etait posee sur ".site-header-cart
	   .widget_shopping_cart" sans condition ":hover"/".focus", alors que
	   Storefront masque nativement ce panneau via "left:-999em" (pas
	   "display:none") et ne le revele qu'au survol via "left:0" - notre
	   "left:auto !important" ecrasait ce "left:-999em" en permanence, quel
	   que soit le survol, rendant le panneau visible en continu et
	   impossible a fermer. Corrige en scopant la regle aux memes
	   selecteurs ":hover"/".focus" que Storefront utilise pour reveler le
	   panneau - l'etat cache (left:-999em) natif n'est plus touche.
	   "max-height"/"overflow-y" ajoutes en meme temps : la meme cause
	   (panneau visible en continu) provoquait aussi un chevauchement
	   visuel quand plusieurs articles etaient au panier (repere sur la
	   meme capture d'ecran). */
	.moda-desktop-bar .site-header-cart:hover .widget_shopping_cart,
	.moda-desktop-bar .site-header-cart.focus .widget_shopping_cart {
		width: 340px !important;
		left: auto !important;
		right: 0 !important;
		max-height: 70vh;
		overflow-y: auto;
	}

	/* Icones compte/panier legerement agrandies (retour gerants 16/08/2026).
	   Le SVG du compte est rendu en dur en PHP (attributs width/height
	   fixes) - le redimensionner en CSS ici, comme deja fait pour la barre
	   mobile, evite de dupliquer le gabarit PHP pour desktop et mobile. */
	.moda-desktop-bar .moda-header-account svg {
		width: 28px;
		height: 28px;
	}

	/* Glyphe panier desktop : meme cause que sur mobile (cf. §9.9ter) - le
	   point de code prive natif "\f290" ne resout pas vers la bonne police
	   d'icones, glyphe de repli invisible/errone. Remplace par le meme SVG
	   en data-URI que la version mobile (trait fonce ici, le header desktop
	   restant sur fond blanc). */
	.moda-desktop-bar .site-header-cart .cart-contents::after {
		content: "" !important;
		display: block;
		width: 28px;
		height: 28px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7h10l-.8 9.3a1 1 0 0 1-1 .9H6.8a1 1 0 0 1-1-.9L5 7z' stroke='%231A1A1A' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M7.2 7V5.2a2.8 2.8 0 0 1 5.6 0V7' stroke='%231A1A1A' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
		background-size: contain;
		background-repeat: no-repeat;
	}

	.moda-desktop-bar .site-header-cart .cart-contents {
		display: flex !important;
		align-items: center;
		padding: 0 !important;
		height: 36px;
	}

	/* Sous-total en euros a cote de l'icone panier : retire du header desktop
	   (retour gerants 16/08/2026, 2e passe - "on doit juste voir la bulle
	   rose avec le nombre de produits dedans"). Meme choix deja fait cote
	   mobile (cf. §9.9ter). */
	.moda-desktop-bar .site-header-cart .cart-contents .amount {
		display: none;
	}

	.moda-desktop-bar .moda-cart-badge {
		top: -6px;
		right: -8px;
	}
}

/* Bouton burger : icone seule (le texte "Menu" natif de Storefront reste
   présent pour les lecteurs d'ecran mais visuellement masque) - plus
   compact et coherent avec les icones recherche/compte/panier a cote
   (retour gerants 15/08/2026 : le texte visible cassait l'alignement). */
/* font-size:0 plutot que text-indent:-9999px : le texte natif "Menu" est
   ainsi masque sans deplacer/rogner le SVG injecte en JS (le texte etant du
   contenu en ligne, un text-indent l'aurait pousse hors-cadre lui aussi -
   bug constate en conditions reelles). */
#site-navigation-menu-toggle.menu-toggle {
	max-width: none !important;
	width: 22px;
	height: 22px;
	padding: 0 !important;
	overflow: hidden;
	font-size: 0;
	float: none !important;
	color: var(--moda-color-text);
	/* Une regle generique de bouton (bordure = couleur du texte, pensee pour
	   d'autres boutons du site) s'appliquait aussi a ce bouton natif Storefront
	   (qui a par defaut une bordure transparente, donc invisible jusque-la) -
	   rendait un cadre plein autour des 3 barres, ressemblant a un "compteur"
	   ou une pastille non voulue (retour gerants 15/08/2026, capture d'ecran
	   a l'appui). */
	border: none !important;
}

/* Les 3 barres natives de Storefront (::before/::after/span::before,
   positionnees en "left:1em") restaient dessinees en parallele du SVG
   injecte en JS - repositionnees a l'extreme bord par le font-size:0
   ci-dessus (1em = 0) plutot que disparaitre, donnant un icone "dedouble"
   (retour gerants 15/08/2026, capture d'ecran a l'appui). Supprimees ici
   pour ne garder que le SVG. */
#site-navigation-menu-toggle.menu-toggle::before,
#site-navigation-menu-toggle.menu-toggle::after,
#site-navigation-menu-toggle.menu-toggle span::before {
	content: none !important;
	display: none !important;
}

/* display:flex uniquement sous le seuil mobile (pas !important, pas hors
   media query) : au-dela, la regle native Storefront ".menu-toggle {
   display:none }" (@media min-width:768px) doit continuer a s'appliquer -
   sinon le burger reste visible sur desktop, ou il n'a pas sa place. */
@media (max-width: 767px) {
	#site-navigation-menu-toggle.menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* Icone "Mon compte" du header : meme gabarit que les icones panier/filtre
   deja en place. Sur desktop, Storefront place nav (float:left) et panier
   (float:right) sans prevoir de 3e element entre les deux - le compte
   suit le meme flottement a droite, avant le panier dans le HTML donc a
   sa gauche a l'affichage (retour gerants 15/08/2026 : sans ca le compte
   retombait seul sur sa propre ligne). */
.moda-header-account {
	display: inline-flex;
	align-items: center;
	color: var(--moda-color-text);
	float: right;
	margin: 1.5em 0 0 1.5em;
}

/* Recherche mobile : icone seule par defaut, le champ ne tiendrait pas dans
   une ligne compacte a 5 elements. Un clic deplie le champ en pleine largeur
   sur sa propre ligne, juste sous la ligne compacte (retour gerants
   15/08/2026). Anime sur max-height plutot que display, pour la transition. */
@media (max-width: 767px) {
	.site-header .site-search {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s ease;
	}

	.site-header.moda-search-open .site-search {
		max-height: 60px;
		margin-top: 8px;
	}

	.site-header .site-search input.search-field {
		width: 100%;
	}

	/* !important : la regle ".moda-header-search-toggle { display:none }"
	   juste en dessous (hors media query, portee desktop) est plus bas dans
	   le fichier - a specificite egale, le CSS départage par ordre source,
	   pas par la presence d'une media query, donc cette regle-ci perdait
	   TOUJOURS face a la regle "display:none" qui suit, meme a largeur
	   mobile reelle (bug constate en conditions reelles - l'icone recherche
	   n'apparaissait jamais sur telephone malgre une regle apparemment
	   correcte). */
	.moda-header-search-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		background: none;
		border: none;
		padding: 0;
		color: var(--moda-color-text);
		cursor: pointer;
	}
}

.moda-header-search-toggle {
	display: none;
}

/* ==========================================================================
   R1 — Refonte accueil du 15/08/2026 : hero pilotable, slider categories,
   carrousels horizontaux (nouveautes + rayon Blouses).
   ========================================================================== */

/* Base commune a tous les defilements horizontaux (hero, categories,
   nouveautes, rayon thematique) - scroll-snap pour un ancrage propre au
   doigt sur mobile. */
.moda-carousel {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 4px 24px 12px;
	margin: 0 -24px;
	-webkit-overflow-scrolling: touch;
}

.moda-carousel::-webkit-scrollbar {
	height: 6px;
}

.moda-carousel::-webkit-scrollbar-thumb {
	background-color: var(--moda-color-accent-pale);
	border-radius: 999px;
}

.moda-home-section {
	padding: 8px 0 40px;
}

.moda-home-section__title {
	font-family: var(--moda-font-heading);
	font-size: 22px;
	text-align: center;
	margin: 0 0 20px;
	padding: 0 24px;
}

/* --- Hero plein ecran : le CSS propre au bloc (fond, calque, overlay,
   titre, sous-titre) vit desormais dans le CSS additionnel du bloc Groupe
   "moda-hero" lui-meme (retour gerants 17/08/2026, chantier reprenabilite) -
   voir la page d'accueil dans l'editeur de blocs. Seul .moda-home-header-overlay
   reste ici : c'est un wrapper cree dynamiquement en JS autour du header/
   bandeau (pas un enfant du bloc hero), donc hors de portee du CSS additionnel
   d'un bloc. */
.moda-home-header-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
}

/* Image desktop du hero (18/08/2026) : cette regle vivait a l'origine dans
   le CSS additionnel du bloc Groupe "moda-hero" lui-meme (cf. commentaire
   ci-dessus), imbriquee en "& .moda-hero__bg { ... }" a l'interieur d'un
   "@media (min-width: 900px)". Bug constate en conditions reelles
   (capture d'ecran a l'appui) : l'image desktop (img_homepage_1_desk.png,
   1672x941 paysage) s'affichait sur TOUS les ecrans, y compris mobile -
   verifie en inspectant le <style> reellement genere par WordPress pour ce
   bloc, qui ne contenait plus la media query englobante (elle disparaissait
   a la compilation), rendant la regle "!important" inconditionnelle. Cause
   probable : imbrication d'un "@media" a l'interieur d'un selecteur "&"
   dans le CSS additionnel d'un bloc, mal geree par le moteur de style de
   l'editeur de blocs sur cette version de WordPress - la meme ecriture
   fonctionne sans probleme dans une feuille de style classique comme
   celle-ci (@media utilise partout ailleurs dans ce fichier sans souci).
   Regle deplacee ici (retiree du bloc), meme seuil (900px) et meme fichier
   que l'original. En dessous de 900px, l'image par defaut du bloc
   (img_homepage_1.png, 941x1672 portrait, deja pensee pour le format
   mobile) redevient visible normalement. */
@media (min-width: 900px) {
	.moda-hero__bg {
		background-image: url('/wp-content/themes/storefront-child/images/img_homepage_1_desk.png') !important;
	}
}

/* Cadrage mobile (18/08/2026, retour gerants - capture d'ecran a l'appui) :
   une fois le bug ci-dessus corrige, le bon fichier (img_homepage_1.png,
   deja recadre en portrait pour le format mobile) s'affiche enfin - mais
   le "transform: scale(1.2)" + "background-position: top center" du bloc
   (regle commune aux deux formats, pensee a l'origine avec le fichier
   desktop en tete) le recadre quand meme trop serre une fois applique par
   dessus une image deja composee pour ce format. Zoom supplementaire
   retire sous ce seuil - desktop non touche (l'image desktop garde son
   zoom d'origine). Premier essai a "center center" : montrait le bas de
   l'image plutot que le haut (retour gerants, 2e capture d'ecran) - passe
   a "center top" pour prioriser le haut de l'image, coherent avec le
   sujet (visage/epaules) qui s'y trouve. */
@media (max-width: 899px) {
	.moda-hero__bg {
		transform: none !important;
		background-position: center top !important;
	}
}

/* --- Bloc categories façon Kiabi, 2e passe (retour gerants 15/08/2026) :
   fond blanc, titre en gras, motif repete "2 carres empiles + 1 grande
   image a droite de meme hauteur totale" (reference capture d'ecran Kiabi
   fournie), aussi grand que possible tout en restant propre. --- */

.moda-cat-grid-section {
	background-color: #fff;
	padding: 8px 0 40px;
}

.moda-cat-grid__title {
	font-family: var(--moda-font-heading);
	font-weight: 700;
	font-size: 24px;
	text-align: center;
	margin: 0 0 20px;
	padding: 0 24px;
}

.moda-cat-grid {
	align-items: flex-start;
	gap: 10px;
}

.moda-cat-grid__group {
	display: flex;
	flex: 0 0 auto;
	gap: 6px;
}

.moda-cat-grid__stack {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.moda-cat-grid__tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 8px;
	text-decoration: none;
	color: var(--moda-color-text);
	scroll-snap-align: start;
}

.moda-cat-grid__tile--sq {
	width: 150px;
	height: 150px;
}

/* Hauteur = 2 carres + le gap entre eux, largeur volontairement genereuse
   (retour gerants : "le plus grand possible tout en restant ui"). */
.moda-cat-grid__tile--tall {
	width: 150px;
	height: 306px;
}

.moda-cat-grid__image {
	position: absolute;
	inset: 0;
	background-color: var(--moda-color-accent-pale);
	background-size: cover;
	background-position: center;
}

.moda-cat-grid__label {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 1;
	padding: 6px 12px;
	border-radius: 999px;
	background-color: #fff;
	font-family: var(--moda-font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

@media (min-width: 600px) {
	.moda-cat-grid__tile--sq {
		width: 210px;
		height: 210px;
	}

	.moda-cat-grid__tile--tall {
		width: 210px;
		height: 426px;
	}
}

/* --- Carrousels produits (nouveautes + rayon thematique) : reutilise le
   gabarit natif WooCommerce (li.product), largeur fixe par carte au lieu
   de la grille habituelle. --- */

ul.products.moda-carousel-products {
	display: flex !important;
	gap: 14px;
	position: relative;
}

/* !important : les regles de grille de la boutique (ul.products avec
   plusieurs colonnes) ciblent le meme selecteur de base et l'emportaient
   sinon (retour gerants 15/08/2026 - cartes bien trop grandes sur mobile,
   le width:200px perdait face aux regles de la grille boutique). */
ul.products.moda-carousel-products li.product {
	flex: 0 0 auto !important;
	width: 200px !important;
	scroll-snap-align: start;
}

/* Mobile : ~2 cartes visibles a la fois, avec un apercu partiel de la 3e en
   bord de cadre pour signaler clairement que ça glisse (retour gerants
   15/08/2026). Base sur la largeur du conteneur plutot qu'une valeur fixe,
   pour rester juste quelle que soit la largeur exacte de l'ecran. */
@media (max-width: 767px) {
	ul.products.moda-carousel-products li.product {
		width: calc(46% - 7px) !important;
	}
}

/* Fleches de navigation desktop (retour gerants 15/08/2026 : "le scroll
   seul n'est pas assez intuitif"). Mobile s'appuie sur l'apercu partiel de
   carte plutot que des fleches, plus naturel au doigt. */
.moda-carousel-wrap {
	position: relative;
}

.moda-carousel-arrow {
	display: none;
}

@media (min-width: 768px) {
	.moda-carousel-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 40%;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background-color: #fff;
		border: 1px solid #eee;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		color: var(--moda-color-text);
		cursor: pointer;
		z-index: 2;
	}

	.moda-carousel-arrow:hover {
		color: var(--moda-color-cta);
	}

	/* A moitie sur le bord du conteneur, a moitie a l'exterieur (retour
	   gerants 15/08/2026, 2e passe) plutot que collees a l'interieur - vrai
	   pour tous les carrousels produits (nouveautes comme rayon thematique).
	   Decalage = -(largeur du bouton / 2). */
	.moda-carousel-arrow--prev {
		left: -18px;
	}

	.moda-carousel-arrow--next {
		right: -18px;
	}

	/* Sans ceci, le SVG (dimensionne seulement via ses attributs HTML
	   width/height, pas de CSS) s'ecrase a 0px de large en enfant flex -
	   bug constate en conditions reelles (fleches visibles mais vides,
	   chevron invisible). */
	.moda-carousel-arrow svg {
		width: 9px;
		height: 15px;
		flex-shrink: 0;
	}
}

/* --- Mur "Nos dernieres trouvailles" : tout le CSS (fond, voile, titre,
   sous-titre, grille de produits, CTA) vit desormais dans le CSS additionnel
   des blocs "moda-arrivals-wall" (Groupe) et "moda-arrivals-wall__grid"
   (Collection de produits) eux-memes (retour gerants 17/08/2026, chantier
   reprenabilite) - voir la page d'accueil dans l'editeur de blocs. --- */

/* --- Rayon thematique (ex. Blouses) : les images fournies servent de fond
   a tout le bloc, carrousel centre par-dessus (retour gerants 15/08/2026 -
   avant, l'image etait empilee au-dessus du carrousel comme une photo
   produit de plus). Simples arriere-plans decoratifs, pas grave si rognes
   sur les bords - background-size:cover assume ce recadrage. --- */

.moda-theme-section {
	position: relative;
	padding: 48px 0 40px;
	background-image: url('images/background-blouse-mobile.jpg');
	background-size: cover;
	background-position: center;
}

@media (min-width: 900px) {
	.moda-theme-section {
		background-image: url('images/background-blouse-desk.jpg');
		padding: 64px 0 48px;
	}
}

/* Voile blanc translucide pour garder le texte/les cartes lisibles quelle
   que soit la zone de la photo derriere (elle a des tons plus roses par
   endroits). */
.moda-theme-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(255, 255, 255, 0.55);
}

.moda-theme-section__title,
.moda-theme-section__products {
	position: relative;
	z-index: 1;
}

.moda-theme-section__products .moda-carousel {
	padding-top: 0;
}

@media (min-width: 900px) {
	.moda-theme-section__products {
		max-width: 900px;
		margin: 0 auto;
	}

	.moda-theme-section__products .moda-carousel {
		justify-content: center;
	}
}

/* ==========================================================================
 * Mur "Destockage" homepage (session 28/08/2026, 3e passe). Fond degrade
 * "vin/rose" 100% CSS (plus de photo generee - ne correspondait pas a
 * l'ambiance de marque) : elegant et feminin tout en restant vif pour
 * attirer l'oeil. Halo radial doux derriere le titre + fin voile diagonal
 * façon soie pour la texture, sans surcharger visuellement les produits.
 * ========================================================================== */

.moda-destockage-section {
	position: relative;
	overflow: hidden;
	padding: 64px 24px 48px;
	text-align: center;
	background-color: #7A1F45;
	background-image:
		radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 42%),
		repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 2px, rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0) 34px),
		linear-gradient(135deg, #7A1F45 0%, #B0326A 48%, #E0819E 100%);
}

/* Mini-bloc continu par produit (retour gerants 27/08/2026, 2e passe) :
   titre + prix + bouton "Ajouter au panier" fondus en un seul bandeau sans
   coupure (2 chips blancs separes au 1er essai, pas assez lisible comme
   "bloc"). Le bouton reste dans SA couleur CTA (pas blanc) mais colle sans
   le moindre ecart au bandeau blanc au-dessus - element separe dans le DOM
   (frere du lien produit, pas un enfant), d'ou l'annulation explicite de sa
   marge/largeur par defaut pour qu'il se comporte comme la suite du bloc.
   Toujours rien derriere la photo elle-meme, qui reste pleine largeur. */
.moda-destockage-section .woocommerce-loop-product__title,
.moda-destockage-section .price {
	background-color: rgba(251, 234, 240, 0.95);
	padding-left: 10px !important;
	padding-right: 10px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.moda-destockage-section .woocommerce-loop-product__title {
	padding-top: 10px !important;
	margin-top: 0 !important;
}

.moda-destockage-section .price {
	padding-bottom: 10px !important;
	margin-bottom: 0 !important;
}

.moda-destockage-section .button.add_to_cart_button {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	border-radius: 0 0 8px 8px !important;
}

.moda-destockage__numbers {
	position: relative;
	z-index: 1;
	height: 90px;
	margin-bottom: 8px;
}

.moda-destockage__num {
	position: absolute;
	top: 0;
	font-family: var(--moda-font-heading);
	font-weight: 700;
	color: #FFFFFF;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	line-height: 1;
	white-space: nowrap;
}

.moda-destockage__num--xl {
	left: 50%;
	top: -6px;
	transform: translateX(-50%) rotate(-4deg);
	font-size: 56px;
}

.moda-destockage__num--lg {
	left: 18%;
	top: 22px;
	transform: rotate(6deg);
	font-size: 32px;
	opacity: 0.85;
}

.moda-destockage__num--md {
	right: 16%;
	top: 30px;
	transform: rotate(-8deg);
	font-size: 26px;
	opacity: 0.8;
}

.moda-destockage__num--tag {
	right: 8%;
	top: -4px;
	font-family: var(--moda-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background-color: rgba(255, 255, 255, 0.25);
	padding: 6px 14px;
	border-radius: 20px;
	text-shadow: none;
}

.moda-destockage__title {
	position: relative;
	z-index: 1;
	color: #FFFFFF;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	margin: 0 0 24px;
}

.moda-destockage__products {
	position: relative;
	z-index: 1;
}

.moda-destockage__products .moda-carousel {
	padding-top: 0;
}

.moda-destockage__cta {
	margin-top: 24px;
}

/* Vignettes agrandies (retour gerants 27/08/2026 : "on ne les voit pas assez
   bien") - le carrousel s'etend maintenant jusqu'aux bords de la section
   (donc de l'image de fond) au lieu d'etre recentre dans une colonne plus
   etroite, et chaque carte est plus large pour que la photo se voie mieux. */
.moda-destockage-section {
	margin-bottom: 32px;
}

.moda-destockage-section ul.products.moda-carousel-products li.product {
	width: 240px !important;
}

@media (max-width: 767px) {
	.moda-destockage-section ul.products.moda-carousel-products li.product {
		width: 62% !important;
	}
}

@media (min-width: 900px) {
	.moda-destockage__num--xl {
		font-size: 72px;
	}

	.moda-destockage__num--lg {
		font-size: 40px;
	}

	.moda-destockage__num--md {
		font-size: 32px;
	}
}

@media (max-width: 480px) {
	.moda-destockage__numbers {
		height: 70px;
	}

	.moda-destockage__num--xl {
		font-size: 40px;
	}

	.moda-destockage__num--lg {
		font-size: 22px;
		left: 10%;
	}

	.moda-destockage__num--md {
		font-size: 18px;
		right: 8%;
		top: 26px;
	}

	.moda-destockage__num--tag {
		display: none;
	}
}

/* ==========================================================================
 * R2 — Widget de selection de point relais Mondial Relay (plugin
 * WcMultiShipping). Reskin des couleurs par defaut du plugin (bleu
 * #2271b1) vers la charte du site, sans toucher aux fichiers du plugin.
 * ========================================================================== */
.wms_pickup_open_modal_mondial_relay,
.wms_pickup_open_modal_openstreetmap {
	background-color: var(--moda-color-bg);
	color: var(--moda-color-text);
	border: 1px solid var(--moda-color-cta);
	border-radius: 4px;
	padding: 10px 18px;
	font-weight: 600;
	cursor: pointer;
}

.wms_pickup_modal_address_search,
.wms_pickup_modal_listing_one_button_ship {
	background: var(--moda-color-cta) !important;
}

.wms_pickup_modal_address_search:hover,
.wms_pickup_modal_listing_one_button_ship:hover {
	background: #8c2854 !important; /* --moda-color-cta assombri ~15% */
}

.wms_pickup_modal_listing_one.wms_is_selected {
	border-color: var(--moda-color-cta) !important;
	background: var(--moda-color-accent-pale) !important;
	box-shadow: 0 0 0 2px rgba(176, 50, 106, 0.25) !important;
}

.wms_pickup_modal_listing_one:hover {
	border-color: var(--moda-color-cta) !important;
}

.wms_pickup_name {
	color: var(--moda-color-text) !important;
}

/* ==========================================================================
 * R2 — Panier : pas de mode de livraison choisi a ce stade, donc pas de
 * prix d'expedition affiche (uniquement au checkout, une fois le mode
 * reellement selectionne). Le controle de visibilite natif de l'editeur
 * ne suffit pas ici car ce bloc est rendu dynamiquement par WooCommerce -
 * masquage cible en CSS, scope a la page Panier uniquement (jamais au
 * Checkout, qui n'a pas la classe body .woocommerce-cart).
 * ========================================================================== */
body.woocommerce-cart .wc-block-components-totals-shipping {
	display: none !important;
}

/* ==========================================================================
 * R2 — Checkout : modes de livraison en cartes avec prix affiche comme un
 * badge (demande explicite du 18/08/2026, reference Zalando), plutot que
 * la liste de lignes radio par defaut de WooCommerce. Structure HTML
 * native du bloc de livraison conservee (juste habillage CSS) - aucune
 * modification de comportement, uniquement visuelle.
 * ========================================================================== */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option {
	position: relative;
	flex: 1 1 170px;
	padding: 22px 14px 16px;
	border: 1px solid #1A1A1A;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color .15s ease;
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-checked {
	border-color: #1A1A1A;
	background: var(--moda-color-accent-pale);
	box-shadow: none !important;
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control__input {
	position: absolute;
	top: 12px;
	right: 12px;
	margin: 0;
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-layout {
	display: flex;
	justify-content: center;
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control__label-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control__label {
	font-weight: 600;
	font-size: 14px;
	color: var(--moda-color-text);
	line-height: 1.3;
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control__secondary-label {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--moda-color-accent-pale);
	color: var(--moda-color-cta);
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
}

.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option-checked .wc-block-components-radio-control__secondary-label {
	background: var(--moda-color-cta);
	color: #fff;
}

@media (max-width: 480px) {
	.wc-block-components-shipping-rates-control .wc-block-components-radio-control {
		flex-wrap: nowrap;
		flex-direction: column;
	}

	.wc-block-components-shipping-rates-control .wc-block-components-radio-control__option {
		flex: 1 1 auto;
	}
}