/**
 * Feuille de base du thème Forge des Artisans-Créateurs.
 * Complète theme.json pour quelques réglages globaux non couverts par les presets.
 */

:where(body) {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Garde-fou : empêche un thème/Divi parent de forcer les titres en MAJUSCULES. */
:where(h1, h2, h3, h4, h5, h6) {
	text-transform: none;
}

/* Gabarit toile : pleine largeur, sans contrainte de contentSize. */
.forge-toile {
	min-height: 100vh;
}

/* Liens d'évitement / focus visibles (a11y). */
:where(a):focus-visible,
:where(button):focus-visible {
	outline: 2px solid #8b5a3c;
	outline-offset: 2px;
}

/* ======================================================================== */
/* Barre de pied de page commune (shortcode forge_createurs_footer_bar)      */
/* ======================================================================== */

.forge-createurs-footer-bar {
	text-align: center;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--wp--preset--color--secondary, #c8b8a8);
}

/* Texte centré simple. Les séparateurs (· et —) sont des caractères insécables
   posés en PHP ( · ) → jamais d'orphelin, et ça tient sur une ligne
   tant qu'il y a la place. */
.forge-createurs-footer-bar__legal {
	margin: 0 0 8px;
}

.forge-createurs-footer-bar__legal a,
.forge-createurs-footer-bar__copy a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.forge-createurs-footer-bar__legal a:hover,
.forge-createurs-footer-bar__copy a:hover {
	color: var(--wp--preset--color--base-2, #fff);
}

.forge-createurs-footer-bar__copy {
	margin: 0;
}

/* ======================================================================== */
/* Menu mobile (overlay du bloc Navigation) — plein écran, centré, fluide.   */
/* Corrige l'alignement à droite hérité (items coupés hors écran).           */
/* ======================================================================== */

/* ======================================================================== */
/* En-tête collant + compact au scroll (logo masqué).                         */
/* ======================================================================== */

/* Sticky sur le WRAPPER template-part (header.wp-block-template-part) : c'est
   lui qui est dans le flux ; .forge-header (le group interne) n'a pas de marge
   de défilement, donc sticky dessus ne « colle » pas. */
header.wp-block-template-part {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	z-index: 999;
	/* Le wrapper sticky n'a pas de fond (seul le groupe interne .forge-header en
	   a un) : au scroll, le contenu défilait sous ses bords transparents (effet
	   « header transparent qui recouvre »). On rend la barre opaque sur toute sa
	   largeur. */
	background-color: var(--wp--preset--color--base-2, #fff);
}
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) {
	.admin-bar header.wp-block-template-part { top: 46px; }
}

.forge-header {
	transition: padding 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

/* Supprime l'espace (block-gap de wp-site-blocks) entre le contenu et le footer
   / le header — sinon un liseré de fond apparaît au-dessus du pied de page. */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > main.forge-vitrine,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}
main.forge-vitrine { margin: 0 !important; }

.forge-header .wp-block-site-logo {
	transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
	max-height: 80px;
	overflow: hidden;
}

.forge-header.is-scrolled {
	padding-top: 0.45rem !important;
	padding-bottom: 0.45rem !important;
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
}
.forge-header.is-scrolled .wp-block-site-logo {
	max-height: 0;
	opacity: 0;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* !important : le bloc Navigation impose justify-content:right (header) + des
   conteneurs intermédiaires (close/dialog) qui décalent tout. On reprend la
   main sur TOUTE la structure de l'overlay pour un plein écran centré. */
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	width: 100vw !important;
	height: 100% !important;
	min-height: 100dvh !important;
	padding: 0 !important;
	background-color: var(--wp--preset--color--base, #fff) !important;
	color: var(--wp--preset--color--contrast, #1a1a1a) !important;
	z-index: 100000 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	animation: forge-menu-fade 0.22s ease;
}

@keyframes forge-menu-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Les wrappers internes prennent toute la place et centrent leur contenu. */
.is-menu-open .wp-block-navigation__responsive-close,
.is-menu-open .wp-block-navigation__responsive-dialog,
.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.is-menu-open .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: clamp(1.1rem, 4vw, 1.9rem) !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Logo de la marque en haut du menu (visuel ; « Accueil » assure le lien). */
.is-menu-open .wp-block-navigation__container::before {
	content: "";
	display: block;
	width: clamp(64px, 18vw, 96px);
	height: clamp(64px, 18vw, 96px);
	margin: 0 auto clamp(14px, 5vw, 26px);
	background: var(--forge-logo, none) center / contain no-repeat;
}

.is-menu-open .wp-block-navigation-item {
	justify-content: center !important;
	text-align: center !important;
	width: auto !important;
}

.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: clamp(1.6rem, 6vw, 2.3rem) !important;
	line-height: 1.15;
	padding: 0 !important;
}

/* Bouton fermeture : ancré au coin haut-droite de l'écran (pas du dialog). */
.is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed !important;
	top: clamp(18px, 5vw, 30px) !important;
	right: clamp(18px, 5vw, 30px) !important;
	z-index: 100001 !important;
}
.wp-block-navigation__responsive-container-open svg,
.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 30px !important;
	height: 30px !important;
	fill: currentColor !important;
}

/* ======================================================================== */
/* Page produit unique — esprit artisan-créateur, animée.                    */
/* (Carrousel/zoom/lightbox déjà fournis par la galerie WooCommerce.)        */
/* ======================================================================== */

.woocommerce div.product {
	margin-top: clamp(18px, 4vw, 40px);
}

/* Mise en page : galerie + résumé aérés. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	margin-bottom: 2rem;
}

/* Galerie : visuels arrondis, transitions douces. */
.woocommerce div.product div.images img {
	border-radius: 14px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
}
.woocommerce div.product div.images .flex-control-thumbs li {
	padding: 6px;
}
.woocommerce div.product div.images .flex-control-thumbs img {
	border-radius: 10px;
	transition: opacity .2s ease, transform .2s ease;
	opacity: .7;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover {
	opacity: 1;
	transform: translateY(-2px);
}

/* Titre + prix dans la typo/charte. */
.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--heading, inherit);
	line-height: 1.1;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--wp--preset--color--primary, #8b5a3c);
	font-size: 1.5rem;
	font-weight: 600;
}

/* Bouton ajouter au panier : pastille, plein, animé. */
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
	border-radius: 999px !important;
	padding: 14px 30px !important;
	background: var(--wp--preset--color--primary, #8b5a3c) !important;
	color: var(--wp--preset--color--base, #fff) !important;
	letter-spacing: .02em;
	transition: transform .2s ease, box-shadow .2s ease;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(139, 90, 60, 0.28);
}

/* Onglets description/avis : sobres, soulignement charte. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom: 2px solid var(--wp--preset--color--primary, #8b5a3c);
}

/* Apparition douce du résumé au chargement. */
.woocommerce div.product div.summary {
	animation: forge-prod-in .5s ease both;
}
@keyframes forge-prod-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Bloc de personnalisation (front) : un peu d'air autour (le style interne est
   déjà géré par le plugin Connecteur). */
.forge-createurs-cust-front {
	margin: 1.4rem 0;
}

/* Produits similaires / ventes croisées : de l'air sous la section pour qu'elle
   ne colle pas au footer (le bouton « Ajouter au panier » touchait le footer). */
.woocommerce .related.products,
.woocommerce .upsells.products,
.woocommerce-page .related.products,
.woocommerce-page .upsells.products {
	margin-bottom: 4rem;
}
/* Filet de sécurité : marge basse sur la zone produit avant le footer. */
.woocommerce div.product {
	margin-bottom: 3rem;
}

/* ======================================================================== */
/* Paiement par lien (order-pay), checkout, panier, compte.                  */
/* Le header est collant ; sur ces pages (souvent en gabarit pleine largeur  */
/* sans marge), le contenu et l'avis WooCommerce « paiement de commande »    */
/* venaient se glisser SOUS le header → impression de header transparent qui */
/* recouvre la commande. On garantit un fond opaque + un dégagement net.     */
/* ======================================================================== */
body.woocommerce-checkout main,
body.woocommerce-account main,
body.woocommerce-cart main,
body.woocommerce-page main {
	padding-top: clamp(28px, 5vw, 56px) !important;
}

/* Header COHÉRENT sur TOUTES les pages : fond BLANC opaque + une seule ligne
   (logo/titre à gauche, menu + panier à droite).
   Avant : la boutique (pages WooCommerce) forçait un fond crème (base-2) et les
   styles WC compactaient l'en-tête sur 1 ligne, tandis que les autres pages
   restaient blanches mais passaient les icônes à la 2e ligne. On uniformise. */
.forge-header {
	background-color: #ffffff !important;
}
.forge-header > .wp-block-group {
	flex-wrap: nowrap !important;
	gap: 12px;
}
/* Le bloc logo + titre peut rétrécir plutôt que de pousser les icônes à la ligne. */
.forge-header > .wp-block-group > .wp-block-group:first-child {
	flex: 0 1 auto;
	min-width: 0;
}
/* Le groupe d'icônes (menu + compte + panier) garde le flex-wrap:wrap par défaut
   du bloc Groupe : sur mobile, dès qu'il manquait quelques pixels, le panier
   passait tout seul à la 2e ligne. On le verrouille sur UNE ligne et on
   l'empêche de rétrécir ; c'est le bloc marque (logo + titre) qui absorbe. */
.forge-header > .wp-block-group > .wp-block-group:last-child {
	flex: 0 0 auto !important;
	flex-wrap: nowrap !important;
}
.forge-header > .wp-block-group > .wp-block-group:last-child > * {
	flex: 0 0 auto !important;
}

/* Mobile : écarts resserrés et logo compact, pour que le trio menu/compte/panier
   tienne à droite ET que le titre reste à côté du logo (même sur 360 px). */
@media (max-width: 600px) {
	.forge-header > .wp-block-group,
	.forge-header > .wp-block-group > .wp-block-group {
		gap: 10px !important;
	}
	.forge-header .wp-block-site-logo img,
	.forge-header img.custom-logo {
		width: 52px !important;
		height: auto !important;
	}
	/* Le titre reste À CÔTÉ du logo (il se replie sur 2 lignes si besoin) plutôt
	   que de passer sous lui : en-tête plus bas et mieux équilibré. */
	.forge-header > .wp-block-group > .wp-block-group:first-child {
		flex-wrap: nowrap !important;
	}
	.forge-header .wp-block-site-title {
		min-width: 0;
		line-height: 1.25;
	}
}

/* Si WooCommerce imprime ses avis tout en haut, on les dégage du header. */
body.woocommerce-checkout .woocommerce-notices-wrapper,
body.woocommerce-page .woocommerce-notices-wrapper {
	margin-top: 0;
}

/* ======================================================================== */
/* Blog : article + archive.                                                 */
/* ======================================================================== */

/* Images de contenu : jamais de débordement. */
.wp-block-post-content img,
.entry-content img,
main .wp-block-image img,
main figure img {
	max-width: 100%;
	height: auto;
}

/* Bloc auteur (shortcode [forge_createurs_author_box]).
   On utilise la paire base/contrast (contraste garanti par WordPress, quelle que
   soit la charte de l'artisan) plutôt que « surface » qui peut être foncée et
   produire un texte foncé sur fond foncé. Couleurs de texte explicites. */
.forge-author {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin: 2.5rem 0 0;
	padding: 22px 24px;
	background: var(--wp--preset--color--base, #faf7f1);
	color: var(--wp--preset--color--contrast, #2e2a25);
	border: 1px solid var(--wp--preset--color--secondary, #e0d8cc);
	border-radius: 12px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.forge-author__pic {
	flex: 0 0 auto;
}
.forge-author__avatar,
.forge-author img.avatar {
	border-radius: 50% !important;
	width: 72px;
	height: 72px;
	object-fit: cover;
	display: block;
}
.forge-author__eyebrow {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--contrast, #2e2a25);
	opacity: 0.65;
	margin-bottom: 2px;
}
.forge-author__name {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #2e2a25);
	margin-bottom: 4px;
}
.forge-author__bio {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast, #2e2a25);
}
.forge-author__bio p {
	margin: 0;
}

/* Carte produit insérée sous un paragraphe d'article (image cliquable). */
.forge-product-card {
	margin: 1.2rem auto;
	max-width: 340px;
	text-align: center;
}
.forge-product-card a {
	display: inline-block;
	text-decoration: none;
	color: inherit;
}
.forge-product-card img {
	border-radius: 10px;
	max-width: 100%;
	height: auto;
	display: block;
}
.forge-product-card figcaption {
	margin-top: 8px;
	font-size: 0.92rem;
	font-weight: 600;
}

/* Archive blog : carte image à gauche, contenu à droite, responsive. */
.forge-archive-card .wp-block-post-featured-image {
	flex: 0 0 auto;
	margin: 0;
}
.forge-archive-card .wp-block-post-featured-image img {
	border-radius: 8px;
	object-fit: cover;
}
.forge-archive-card .wp-block-post-title {
	margin-top: 0;
}
@media (max-width: 600px) {
	.forge-archive-card {
		flex-wrap: wrap !important;
	}
	.forge-archive-card .wp-block-post-featured-image,
	.forge-archive-card .wp-block-post-featured-image img {
		width: 100% !important;
		height: auto !important;
	}
}