/*
Theme Name: Loun'Art Création
Theme URI: https://www.lounart.fr
Author: Osis Conseil pour Loun'Art Création
Description: Thème boutique de Loun'Art Création — charte « C bis » (sable, blush, écume, corail), cartes produits au format portrait 4:5, compatible WooCommerce, polices hébergées localement (RGPD).
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
Version: 0.7.1
License: GNU General Public License v2 or later
Text Domain: lounart
*/

/* Les réglages visuels sont dans theme.json. Ici : seulement ce que theme.json ne sait pas faire. */

/* Photos produits : cadre portrait 4:5 ; la photo s'y loge entière, sans recadrage */
.wc-block-components-product-image,
.wp-block-woocommerce-product-image {
	background: #F4F1EC; /* fond neutre : se fond avec les photos sur fond clair */
	border-radius: 18px;
	overflow: hidden;
}
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img {
	aspect-ratio: 4 / 5;
	object-fit: contain; /* le bijou entier reste visible, jamais rogné */
	width: 100%;
	height: auto;
}

/* Fiche produit : photo principale entière, sans zoom */
.wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery__image img {
	object-fit: contain;
	background: #F4F1EC;
	border-radius: 18px;
}

/* Le prix est la seule information en corail dans une carte */
.wc-block-components-product-price,
.wp-block-woocommerce-product-price {
	color: var(--wp--preset--color--corail-profond);
	font-weight: 600;
}

/* Badge « Personnalisable » (étiquette produit) */
.lounart-badge {
	display: inline-block;
	padding: 0.2em 0.75em;
	border-radius: 999px;
	background: var(--wp--preset--color--ecume);
	color: var(--wp--preset--color--anthracite);
	font-size: var(--wp--preset--font-size--small);
}

/* Encadré légal sous le bouton d'achat */
.lounart-mention {
	margin-top: 1rem;
	padding: 0.9rem 1.1rem;
	border-left: 3px solid var(--wp--preset--color--rose-poudre);
	background: #fff;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--taupe);
	line-height: 1.5;
}

/* Bouton « Commander par message » du mode vitrine */
.lounart-commande {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.85em 1.6em;
	border-radius: 999px;
	background: var(--wp--preset--color--corail-profond);
	color: #fff !important;
	font-family: var(--wp--preset--font-family--quicksand);
	font-weight: 600;
	text-decoration: none;
}
.lounart-commande:hover { background: var(--wp--preset--color--corail-fonce); }

:where(a, button, input, select, textarea, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--corail-profond);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* Titres toujours droits */
h1, h2, h3, h4, h5, h6, .wp-block-post-title, .wp-block-site-title { font-style: normal; }
h1 em, h2 em, h3 em, h1 i, h2 i, h3 i { font-style: normal; }

/* ===== En-tête : marque centrée, menu sur sa propre ligne (ordinateur) ===== */
.lounart-entete {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "gauche marque droite" "nav nav nav";
	align-items: center;
	max-width: 1240px;
	margin-inline: auto !important;
	padding: 1.1rem clamp(1.1rem, 4vw, 2.5rem) 0;
	row-gap: 1rem;
}
.lounart-entete > * { margin: 0 !important; }
.lounart-entete .e-gauche { grid-area: gauche; }
.lounart-entete .e-marque { grid-area: marque; text-align: center; }
.lounart-entete .e-droite { grid-area: droite; gap: 0.6rem; }
.lounart-entete .e-nav {
	grid-area: nav;
	border-top: 1px solid var(--wp--preset--color--sable);
	border-bottom: 1px solid var(--wp--preset--color--sable);
	padding-block: 0.15rem;
}
.lounart-entete .wp-block-site-title { font-size: 1.15rem; letter-spacing: 0.02em; }
.lounart-entete .wp-block-site-title a { color: var(--wp--preset--color--anthracite); text-decoration: none; }

/* Liens du menu : capitales espacées, soulignement corail au survol et sur la page active */
.lounart-entete .e-nav .wp-block-navigation__container { gap: clamp(1rem, 2.2vw, 2.4rem); }
/* « Personnalisable » se distingue des familles : couleur corail */
.lounart-entete .e-nav .e-perso > .wp-block-navigation-item__content { color: var(--wp--preset--color--corail-profond); }
.lounart-entete .e-nav .wp-block-navigation-item__content {
	display: inline-block;
	padding: 0.85rem 0 0.75rem;
	font-family: var(--wp--preset--font-family--quicksand);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--anthracite);
	border-bottom: 2px solid transparent;
	text-decoration: none;
}
.lounart-entete .e-nav .wp-block-navigation-item__content:hover,
.lounart-entete .e-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--corail-profond);
	border-bottom-color: var(--wp--preset--color--corail-profond);
}

/* Sous-menu « Bijoux » : carte claire, liens en casse normale */
.lounart-entete .e-nav .wp-block-navigation__submenu-container {
	min-width: 230px !important;
	padding: 0.6rem 0 !important;
	border: 1px solid var(--wp--preset--color--sable) !important;
	border-radius: 16px;
	background: #fff !important;
	box-shadow: 0 12px 32px rgba(46, 42, 39, 0.08);
}
.lounart-entete .e-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1.3rem;
	border: 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.95rem;
	font-weight: 500;
}
.lounart-entete .e-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--blush); }

/* Téléphone : marque à gauche, recherche + menu à droite, une seule ligne */
@media (max-width: 781px) {
	.lounart-entete {
		grid-template-columns: 1fr auto auto;
		grid-template-areas: "marque droite nav";
		padding-bottom: 0.9rem;
		column-gap: 0.4rem;
	}
	.lounart-entete .e-gauche { display: none; }
	.lounart-entete .e-marque { flex-direction: row !important; justify-content: flex-start !important; gap: 0.6rem; text-align: left; }
	.lounart-entete .e-marque .wp-block-site-logo img { width: 44px !important; }
	.lounart-entete .e-nav { border: 0; padding: 0; }
	.lounart-entete .e-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: 1.1rem; text-transform: none; letter-spacing: 0; padding: 0.4rem 0; border: 0;
	}
}

/* ===== Guide des tailles ===== */
.lounart-calc { margin: 2rem 0; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 24px; background: var(--wp--preset--color--ecume); }
.lounart-calc__titre { margin: 0 0 1rem; font-family: var(--wp--preset--font-family--quicksand); font-weight: 700; font-size: 1.25rem; }
.lounart-calc__onglets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 16px; background: #fff; }
.lounart-calc__onglets button { min-height: 44px; border: 0; border-radius: 12px; background: none; font: 600 0.95rem var(--wp--preset--font-family--quicksand); color: var(--wp--preset--color--anthracite); cursor: pointer; }
.lounart-calc__onglets button[aria-selected="true"] { background: var(--wp--preset--color--corail-profond); color: #fff; }
.lounart-calc__champ { display: block; margin-top: 1.1rem; font-weight: 600; }
.lounart-calc__champ input { display: block; width: 100%; max-width: 280px; min-height: 50px; margin-top: 0.4rem; padding: 0 1rem; border: 1px solid var(--wp--preset--color--sable); border-radius: 14px; background: #fff; font: inherit; font-size: 1.15rem; }
.lounart-calc__resultat { margin-top: 1rem; padding: 1rem 1.2rem; border-radius: 16px; background: #fff; line-height: 1.55; }
.lounart-calc__resultat ul { margin: 0.4rem 0; padding-left: 1.2rem; }
.lounart-tableau table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.lounart-tableau th { text-align: left; font-family: var(--wp--preset--font-family--quicksand); background: var(--wp--preset--color--blush); }
.lounart-tableau th, .lounart-tableau td { padding: 0.6rem 0.9rem; border: 0 !important; }
.lounart-tableau.is-style-stripes tbody tr:nth-child(odd) { background: #fff; }
.lounart-tableau.is-style-stripes tbody tr:nth-child(even) { background: transparent; }
@media (max-width: 480px) { .lounart-calc__onglets { grid-template-columns: repeat(2, 1fr); } }

/* Recherche de l'en-tête : simple icône (et non un gros bouton corail) */
.lounart-entete .wp-block-search__button.has-icon,
.lounart-entete .wp-block-search__button {
	background: transparent !important;
	color: var(--wp--preset--color--anthracite) !important;
	border: 0 !important;
	border-radius: 50% !important;
	padding: 8px !important;
	min-width: 0;
	box-shadow: none !important;
}
.lounart-entete .wp-block-search__button:hover { background: var(--wp--preset--color--blush) !important; }
.lounart-entete .wp-block-search__button svg { width: 22px; height: 22px; fill: currentColor; }
.lounart-entete .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--sable);
	border-radius: 999px;
	padding: 0.45rem 0.9rem;
	background: #fff;
}
.lounart-entete .wp-block-search__inside-wrapper { border: 0 !important; padding: 0 !important; background: none !important; }

/* Lien discret vers l'Atelier, en pied de page */
footer a[href="/atelier/"] { color: var(--wp--preset--color--taupe); text-decoration: underline; text-underline-offset: 2px; }

/* Accueil : photo d'ouverture au format paysage, hauteur maîtrisée */
.wp-block-columns.alignwide .wp-block-image img[style*="aspect-ratio:4/3"] { max-height: 560px; width: 100%; }