/*
 * Habillage visuel Biba's Collections, en complément des réglages natifs
 * Blocksy (Customizer). Toute règle ici doit rester indépendante du contenu
 * (aucun produit, texte ou image codé en dur) — voir CLAUDE_RULES.md.
 */

/* Fiche produit : le bloc UGS/Catégorie (.product_meta) n'a pas de réglage
 * typographique dédié dans le Customizer Blocksy (contrairement au titre,
 * au prix, aux miettes de pain...). On le rend discret pour qu'il ne
 * concurrence pas visuellement le prix et le CTA, conformément à la
 * direction éditoriale (informations techniques secondaires, pas mises en avant). */
.entry-summary .product_meta {
	font-size: 12px;
	color: var(--theme-text-color);
	opacity: 0.55;
	letter-spacing: 0.02em;
}

/* Header : logo de marque réel (image, réglé nativement via Personnaliser
 * → Identité du site → Logo, remplaçable sans développeur). Blocksy ne
 * propose pas de contrôle natif dédié à la hauteur du logo : on la borne
 * ici pour garder un header léger, le ratio de l'image est conservé.
 * Le logo actuel est un lockup horizontal large (ratio ~3:1) : sa largeur
 * suit sa hauteur. Entre 1000px et 1279px, l'espacement du menu principal
 * se resserre brusquement (comportement natif Blocksy) et laisse trop peu
 * de marge pour agrandir le logo sans chevaucher le menu — la taille y est
 * volontairement conservée. Au-delà de 1280px (largeur de référence du
 * site), la marge disponible est large : le logo y est nettement agrandi. */
#header .site-logo-container,
#header .site-logo-container img.default-logo {
	max-height: none;
	height: auto;
}
#header .site-logo-container img.default-logo {
	max-height: 150px;
	width: auto;
}
@media (max-width: 1279.98px) {
	#header .site-logo-container img.default-logo {
		max-height: 112px;
	}
}
@media (max-width: 999.98px) {
	#header .site-logo-container img.default-logo {
		max-height: 80px;
	}
}

/* Grilles produits (boutique, catégorie, sections "Nos parures") : le CTA
 * natif WooCommerce (Ajouter au panier / Lire la suite, relabellisé "Voir
 * la parure" via functions.php) est redessiné en lien discret plutôt qu'en
 * bouton plein, pour rester cohérent avec la direction éditoriale des cartes. */
[data-products] .product .button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	color: var(--theme-palette-color-1);
	padding: 0;
	min-height: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	border-radius: 0;
}
[data-products] .product .button::after {
	content: "\2192";
	transition: transform 0.15s ease;
}
[data-products] .product .button:hover {
	background: none;
	color: var(--theme-palette-color-2);
}
[data-products] .product .button:hover::after {
	transform: translateX(3px);
}

/* Fiche produit : liste compacte des attributs réels (Taille, Matière,
 * Couleur, Nombre de pièces...), plus lisible qu'un simple onglet. */
.biba-attributes-summary {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 24px;
	border-top: 1px solid var(--theme-border-color);
	border-bottom: 1px solid var(--theme-border-color);
	padding: 18px 0;
}
.biba-attributes-summary li {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.biba-attributes-summary__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--theme-text-color);
	opacity: 0.55;
}
.biba-attributes-summary__value {
	font-size: 15px;
	color: var(--theme-text-color);
}

/* Boutique / catégorie : badge "Épuisé" moins abrupt (radius léger au lieu
 * d'un rectangle plein, cohérent avec le radius 6px du design system). */
.out-of-stock-badge, .onsale {
	border-radius: 4px;
	letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------
 * Homepage : hero immersif plein écran. L'image de fond est définie en
 * style inline directement dans le contenu de la page (voir la page
 * Accueil), pas ici : une URL d'image ne doit jamais être codée en dur
 * dans un fichier CSS du thème (non administrable, non compatible avec
 * un changement de domaine en production). Ce bloc ne gère que la mise
 * en page. La classe native WordPress "alignfull" (posée dans le contenu
 * de la page) gère déjà la largeur 100vw ; sans elle, le système de mise
 * en page de WordPress plafonne tout bloc à 1280px (`is-layout-constrained`). */
.biba-hero {
	position: relative;
	min-height: 76vh;
	background-size: cover;
	background-position: center 38%;
	display: flex;
	align-items: center;
	margin-bottom: 70px;
}
/* Voile dégradé sur toute la largeur du hero (pas seulement derrière le
 * texte) : aucun bord de "boîte" visible, transition progressive sur une
 * large portion de la photo plutôt qu'un panneau localisé. */
.biba-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(20, 16, 14, 0.58) 0%, rgba(20, 16, 14, 0.4) 22%, rgba(20, 16, 14, 0.12) 48%, rgba(20, 16, 14, 0) 68%);
	pointer-events: none;
}
.biba-hero__content {
	position: relative;
	z-index: 2;
	max-width: 460px;
	margin-left: 8%;
	padding: 44px 40px;
}
.biba-hero__content h1 {
	color: #ffffff;
	font-family: Fraunces, serif;
	font-weight: 700;
	font-size: 58px;
	line-height: 1.1;
	margin: 0 0 20px;
}
.biba-hero__content p {
	color: #ffffff;
	font-size: 18px;
	line-height: 1.6;
	margin: 0 0 30px;
	opacity: 0.95;
}
.biba-hero__cta {
	display: inline-block;
	background: var(--theme-palette-color-1);
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 15px 32px;
	border-radius: 6px;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.biba-hero__cta:hover {
	background: var(--theme-palette-color-2);
	color: #ffffff;
}
@media (max-width: 689.98px) {
	.biba-hero {
		min-height: 62vh;
		background-position: center 30%;
		align-items: flex-end;
		margin-bottom: 50px;
	}
	.biba-hero__content {
		max-width: none;
		margin: 0;
		width: 100%;
		padding: 32px 24px 44px;
	}
	.biba-hero::before {
		background: linear-gradient(0deg, rgba(20, 16, 14, 0.68) 25%, rgba(20, 16, 14, 0) 85%);
	}
	.biba-hero__content h1 {
		font-size: 38px;
	}
	.biba-hero__content p {
		font-size: 16px;
	}
}

/* ------------------------------------------------------------------
 * Homepage : section éditoriale de type magazine — grande photographie
 * et bloc de texte décalé, plutôt qu'un module Média/Texte 50/50 classique.
 * ------------------------------------------------------------------ */
.biba-editorial {
	max-width: 1280px;
	margin: 0 auto 90px;
	padding: 0 40px;
	display: grid;
	grid-template-columns: 60% 1fr;
	gap: 6%;
}
.biba-editorial__image {
	margin: 0;
}
.biba-editorial__image img {
	width: 100%;
	height: 560px;
	object-fit: cover;
	display: block;
}
.biba-editorial__text {
	margin-top: 18%;
}
.biba-editorial__text h2 {
	font-family: Fraunces, serif;
	font-weight: 700;
	font-size: 30px;
	color: var(--theme-palette-color-4);
	margin: 0 0 18px;
}
.biba-editorial__text p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--theme-text-color);
	margin: 0;
}
@media (max-width: 689.98px) {
	.biba-editorial {
		grid-template-columns: 1fr;
		padding: 0 24px;
		margin-bottom: 60px;
		gap: 24px;
	}
	.biba-editorial__image img {
		height: 380px;
	}
	.biba-editorial__text {
		margin-top: 0;
	}
}

/* ------------------------------------------------------------------
 * Homepage : lookbook éditorial (grande image + deux images secondaires,
 * ratios différents). Remplace l'ancien second bloc Média/Texte "tissus".
 * Les 4 photos sont administrables depuis la médiathèque (Homepage
 * Lookbook 1-4), rien n'est lié à un produit ou une catégorie précise.
 * ------------------------------------------------------------------ */
.biba-lookbook {
	max-width: 1280px;
	margin: 0 auto 90px;
	padding: 0 40px;
}
.biba-lookbook__eyebrow {
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--theme-palette-color-1);
	margin: 0 0 24px;
}
.biba-lookbook__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	grid-template-rows: repeat(2, 1fr);
	gap: 20px;
	height: 620px;
}
.biba-lookbook__big {
	grid-row: 1 / 3;
	margin: 0;
	min-height: 0;
	min-width: 0;
	overflow: hidden;
}
.biba-lookbook__secondary {
	margin: 0;
	min-height: 0;
	min-width: 0;
	overflow: hidden;
}
.biba-lookbook__grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.biba-lookbook__caption {
	max-width: 560px;
	margin: 28px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--theme-text-color);
	opacity: 0.85;
}
@media (max-width: 689.98px) {
	.biba-lookbook {
		padding: 0 24px;
		margin-bottom: 60px;
	}
	.biba-lookbook__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		height: auto;
	}
	.biba-lookbook__big {
		grid-row: auto;
		grid-column: 1 / 3;
	}
	.biba-lookbook__big img {
		height: 320px;
	}
	.biba-lookbook__secondary img {
		height: 200px;
	}
}

/* Homepage : bande de réassurance, composition icône + libellé avec fines
 * séparations verticales entre les trois messages déjà validés. Icônes =
 * assets fournis par l'utilisateur (image native, pas de SVG recréé). */
.biba-reassurance__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	color: var(--theme-palette-color-1);
}
.biba-reassurance__icon {
	display: block;
	width: 66px;
	height: 66px;
	object-fit: contain;
}
.biba-reassurance__item + .biba-reassurance__item {
	border-left: 1px solid rgba(43, 36, 32, 0.12);
}
@media (max-width: 689.98px) {
	.biba-reassurance__icon {
		width: 56px;
		height: 56px;
	}
	.biba-reassurance__item + .biba-reassurance__item {
		border-left: none;
		border-top: 1px solid rgba(43, 36, 32, 0.12);
		padding-top: 24px;
		margin-top: 4px;
	}
}

/* Footer : bloc de marque (logo rond d'origine, distinct du logo horizontal
 * du header — image native WordPress dans un widget de la zone "brand-row",
 * administrable depuis Apparence → Widgets). Taille volontairement modeste :
 * une signature de marque en clôture de page, pas un second logo principal. */
#footer [data-row="brand"] {
	padding-top: 64px;
	padding-bottom: 14px;
}
.biba-footer-brand-logo {
	margin: 0 auto;
}
.biba-footer-brand-logo img {
	width: 112px;
	height: 112px;
	opacity: 0.92;
}
@media (max-width: 689.98px) {
	#footer [data-row="brand"] {
		padding-top: 48px;
		padding-bottom: 8px;
	}
	.biba-footer-brand-logo img {
		width: 88px;
		height: 88px;
	}
}

/* ------------------------------------------------------------------
 * Séparateur éditorial : illustration aiguille et fil fournie par
 * l'utilisateur (image native, pas de SVG recréé). Utilisé avec
 * parcimonie entre deux ou trois sections de la homepage pour marquer une
 * respiration, jamais comme simple ornement.
 * ------------------------------------------------------------------ */
.biba-divider {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 14px auto 48px;
	opacity: 0.75;
}
.biba-divider img {
	width: 270px;
	height: auto;
}
@media (max-width: 689.98px) {
	.biba-divider {
		margin: 8px auto 34px;
	}
	.biba-divider img {
		width: 200px;
	}
}

/* Marqueurs éditoriaux : petite ligne de signature avant l'eyebrow
 * "Inspirations Biba's" et au-dessus du titre "Confectionnée avec soin",
 * pour un rendu plus revue de style que gabarit de thème. */
.biba-lookbook__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
}
.biba-lookbook__eyebrow::before {
	content: "";
	display: block;
	width: 26px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}
.biba-editorial__text h2 {
	position: relative;
	padding-top: 20px;
}
.biba-editorial__text h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 36px;
	height: 1px;
	background: var(--theme-palette-color-1);
	opacity: 0.65;
}

/* Boutique : allège la présentation des éléments WooCommerce natifs
 * (nombre de résultats, tri) pour rester cohérent avec le ton éditorial
 * du reste du site, sans toucher à leur fonctionnement natif. */
.woocommerce-result-count {
	opacity: 0.6;
}
.woocommerce-ordering select.orderby {
	border: none;
	border-bottom: 1px solid rgba(43, 36, 32, 0.25);
	border-radius: 0;
	background-color: transparent;
	padding: 4px 22px 4px 2px;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--theme-text-color);
	box-shadow: none;
}
.woocommerce-ordering select.orderby:focus {
	border-bottom-color: var(--theme-palette-color-1);
	outline: none;
	box-shadow: none;
}

/* Fiche produit : même signature discrète (filet fin) au-dessus de "Nos
 * engagements", pour la cohérence avec le reste du site ; petit motif de
 * clôture sous le bloc de résumé, pour éviter que la colonne de texte ne
 * se termine sur du vide non intentionnel face à une galerie plus haute. */
.ct-product-additional-info .ct-module-title {
	position: relative;
	padding-top: 16px;
	display: inline-block;
}
.ct-product-additional-info .ct-module-title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 28px;
	height: 1px;
	background: var(--theme-palette-color-1);
	opacity: 0.65;
}
.biba-divider--product {
	justify-content: flex-start;
	margin: 40px 0 0;
}
.biba-divider--product img {
	width: 215px;
}
@media (max-width: 689.98px) {
	.biba-divider--product img {
		width: 175px;
	}
}

/* ------------------------------------------------------------------
 * Pages de contenu éditorial (À propos, Livraison & échanges, FAQ,
 * Contact) : colonne de lecture unique, même vocabulaire visuel que la
 * homepage (Fraunces pour les titres, filet fin en signature, tons du
 * design system), sans photographie dédiée pour ces pages-ci.
 * ------------------------------------------------------------------ */
.biba-page-content {
	max-width: 760px;
	margin: 0 auto;
	padding: 56px 40px 100px;
}
.biba-page-content__lede {
	font-family: Fraunces, serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.25;
	color: var(--theme-palette-color-4);
	margin: 0 0 28px;
}
.biba-page-content__intro {
	font-size: 18px;
	line-height: 1.75;
	color: var(--theme-text-color);
	margin: 0 0 8px;
}
.biba-section {
	margin-top: 64px;
}
.biba-section__title {
	position: relative;
	padding-top: 20px;
	font-family: Fraunces, serif;
	font-weight: 700;
	font-size: 24px;
	color: var(--theme-palette-color-4);
	margin: 0 0 16px;
}
.biba-section__title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 36px;
	height: 1px;
	background: var(--theme-palette-color-1);
	opacity: 0.65;
}
.biba-section p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--theme-text-color);
	margin: 0 0 18px;
}
.biba-section ul {
	margin: 0 0 18px;
	padding-left: 20px;
}
.biba-section li {
	font-size: 16px;
	line-height: 1.75;
	color: var(--theme-text-color);
	margin-bottom: 6px;
}
.biba-subsection {
	margin-top: 32px;
	padding-left: 20px;
	border-left: 2px solid rgba(184, 107, 91, 0.25);
}
.biba-subsection__title {
	font-size: 17px;
	font-weight: 600;
	color: var(--theme-palette-color-4);
	margin: 0 0 10px;
}
.biba-subsection p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--theme-text-color);
	margin: 0;
}
@media (max-width: 689.98px) {
	.biba-page-content {
		padding: 40px 24px 72px;
	}
	.biba-page-content__lede {
		font-size: 26px;
	}
	.biba-page-content__intro {
		font-size: 16px;
	}
	.biba-section {
		margin-top: 48px;
	}
	.biba-section__title {
		font-size: 21px;
	}
}

/* Encart Instagram : rappel discret du canal officiel, utilisé sur
 * Livraison/FAQ/Contact — même palette que la bande de réassurance
 * homepage, jamais de logo Instagram coloré (icône ronde neutre). */
.biba-instagram-block {
	margin-top: 40px;
	padding: 32px;
	background: var(--theme-palette-color-6);
	text-align: center;
}
.biba-instagram-block__title {
	font-family: Fraunces, serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--theme-palette-color-4);
	margin: 0 0 10px;
}
.biba-instagram-block__handle {
	font-size: 16px;
	color: var(--theme-palette-color-1);
	margin: 0 0 20px;
}
.biba-instagram-block__cta {
	display: inline-block;
	background: var(--theme-palette-color-1);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 13px 28px;
	border-radius: 6px;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.biba-instagram-block__cta:hover {
	background: var(--theme-palette-color-2);
	color: #ffffff;
}
@media (max-width: 689.98px) {
	.biba-instagram-block {
		padding: 28px 20px;
	}
}

/* FAQ : accordéon natif (élément HTML <details>/<summary>, core/details
 * de Gutenberg) — aucun JS custom, comportement natif du navigateur. */
.biba-faq {
	margin-top: 8px;
}
.biba-faq details {
	border-bottom: 1px solid rgba(43, 36, 32, 0.12);
	padding: 20px 0;
}
.biba-faq details:first-child {
	border-top: 1px solid rgba(43, 36, 32, 0.12);
}
.biba-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: Fraunces, serif;
	font-weight: 600;
	font-size: 17px;
	color: var(--theme-palette-color-4);
}
.biba-faq summary::-webkit-details-marker {
	display: none;
}
.biba-faq summary::after {
	content: "+";
	flex-shrink: 0;
	font-size: 22px;
	font-weight: 400;
	color: var(--theme-palette-color-1);
	transition: transform 0.2s ease;
}
.biba-faq details[open] summary::after {
	transform: rotate(45deg);
}
.biba-faq details > *:not(summary) {
	margin-top: 14px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--theme-text-color);
}
.biba-faq details p {
	margin: 0 0 12px;
}
.biba-faq details p:last-child {
	margin-bottom: 0;
}
@media (max-width: 689.98px) {
	.biba-faq summary {
		font-size: 16px;
	}
}

/* Signature de clôture (À propos, Contact) — reprend le ton discret déjà
 * utilisé pour la légende du lookbook homepage. */
.biba-signature {
	margin-top: 56px;
	text-align: center;
	font-size: 14px;
	letter-spacing: 0.03em;
	color: var(--theme-text-color);
	opacity: 0.75;
}
.biba-signature strong {
	display: block;
	font-family: Fraunces, serif;
	font-size: 16px;
	color: var(--theme-palette-color-4);
	opacity: 1;
	margin-bottom: 4px;
}

/* CTA catalogue (bas de page À propos) — même style que les boutons
 * outline déjà utilisés sur la homepage. */
.biba-page-cta {
	margin-top: 48px;
	text-align: center;
}

/* Homepage : rappel Instagram discret, intégré entre deux sections
 * existantes plutôt qu'en bloc supplémentaire imposant. */
.biba-instagram-line {
	max-width: 1280px;
	margin: 0 auto 90px;
	padding: 0 40px;
	text-align: center;
}
.biba-instagram-line a {
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--theme-palette-color-1);
	text-decoration: none;
	border-bottom: 1px solid rgba(184, 107, 91, 0.35);
	padding-bottom: 2px;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.biba-instagram-line a:hover {
	color: var(--theme-palette-color-2);
	border-color: var(--theme-palette-color-2);
}
@media (max-width: 689.98px) {
	.biba-instagram-line {
		margin-bottom: 60px;
	}
}

/* Footer : lien discret vers le compte Instagram (texte, à côté de
 * l'icône native du bloc "socials"), même gabarit que les liens de
 * navigation du footer. */
.biba-footer-instagram {
	display: block;
	text-align: center;
	font-size: 13px;
	letter-spacing: 0.02em;
}
.biba-footer-instagram a {
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
}
.biba-footer-instagram a:hover {
	opacity: 1;
	color: var(--theme-palette-color-1);
}

/* Checkout (2026-09-07) : boutique livrant uniquement en Algerie
 * (`woocommerce_allowed_countries` deja restreint a DZ) — le champ Pays
 * garde donc toujours la meme unique valeur (DZ) qu'il soit affiche ou non ;
 * le masquer ne change rien a la logique de soumission (etat React/Store
 * API, pas un attribut HTML brut), seulement a l'affichage. */
.wc-block-components-address-form__country {
	display: none;
}

/* Checkout (2026-09-07, renforce le meme jour) : Biba's Collections
 * n'utilise qu'une adresse de livraison — masquage INCONDITIONNEL de tout
 * ce qui pourrait mener a une facturation separee, sans dependre d'un etat
 * "coche par defaut" fragile (une session anterieure, un etat React
 * restaure ou un checkout precedemment commence pourrait avoir enregistre
 * la case decochee) :
 * - la case native "Utiliser la meme adresse pour la facturation" elle-meme
 *   (le client ne doit jamais voir l'option) ;
 * - `.wc-block-checkout__billing-fields`, le bloc de formulaire de
 *   facturation complet que WooCommerce ne rend dans le DOM QUE si cette
 *   case venait a etre decochee (verifie en conditions reelles : absent du
 *   DOM par defaut, present et rempli des la case decochee) — masque ici
 *   quel que soit l'etat interne, donc jamais visible dans aucun cas.
 * La coherence des DONNEES (billing_* = shipping_*) est garantie
 * separement, cote JS (assets/js/checkout-billing-sync.js) et cote serveur
 * (functions.php, hook Store API sur la commande) — cf. commentaires
 * associes. */
.wc-block-checkout__use-address-for-billing,
.wc-block-checkout__billing-fields {
	display: none;
}