/**
 * 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;
}

/* Pied de page toujours EN BAS, même sur une page courte (recherche sans
   résultat, page fine…) : sans ça il remonte au milieu de l'écran et laisse une
   grande zone vide sous lui. On étire l'enveloppe FSE sur la hauteur de la
   fenêtre et on laisse le contenu prendre le reste.
   La hauteur de la barre d'admin est retirée, sinon la page déborde de quelques
   pixels et gagne une barre de défilement pour rien quand on est connecté. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}
.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* 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;
	/* …et de l'air EN BAS : sans ça, le dernier bloc de la page touche le pied de
	   page (flagrant sur une recherche sans résultat, où le champ de recherche est
	   le dernier élément et se retrouve à cheval sur le footer). */
	padding-bottom: clamp(32px, 6vw, 72px) !important;
}

/* Fil d'Ariane : il collait à ce qui suit (catégories, titre, galerie produit) —
   marge nulle, comme tous les blocs Woo posés à la suite. */
.wc-block-breadcrumbs,
.woocommerce-breadcrumb {
	margin-bottom: clamp(12px, 2.2vw, 22px);
}

/* Recherche sans résultat : un peu d'air entre « Aucun produit ne correspond… »
   et le champ qui suit. (La marge basse du bloc, elle, est inutile : la mise en
   page du thème la remet à zéro, et le padding du main ci-dessus fait le travail
   — 72 px mesurés entre le champ et le pied de page.) */
.wp-block-woocommerce-product-collection-no-results > p {
	margin-bottom: 14px;
}

/* 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;
	}
}

/* Recherche produit (bloc Recherche dans la navigation, variante « icône seule »).
   Le dépliement au clic est natif (WordPress) : on ne fait ici que l'habiller en
   élément de menu — bouton transparent, à la couleur du texte — et BORNER la
   largeur du champ déplié, pour que l'en-tête reste sur une seule ligne. */
.forge-product-search {
	display: flex;
	align-items: center;
	position: relative;
	/* Largeur figée à celle de l'icône : quand le champ se déplie il sort du flux
	   (voir plus bas), et sans cette largeur la place de l'icône se refermerait
	   d'un coup — les liens du menu sauteraient à chaque ouverture. */
	flex: 0 0 30px;
	width: 30px;
	justify-content: flex-end;
}

/* Champ DÉPLIÉ : en surimpression, aligné à droite, au-dessus du menu.
   Dans le flux, ses ~190 px poussaient le bloc marque et le titre de la boutique
   passait sous le logo — l'en-tête gagnait une ligne à chaque recherche. En
   sortant du flux, il ne déplace plus rien : il recouvre les liens le temps de
   la saisie, puis se referme. */
.forge-product-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
	padding-left: 4px;
	/* Hors du flux, le conteneur n'a plus de largeur à hériter : on la lui donne,
	   sinon il se réduit à l'icône et le champ devient inutilisable. */
	width: 260px;
	max-width: min(60vw, 320px);
}
.forge-product-search .wp-block-search__button {
	background: transparent !important;
	border: 0 !important;
	color: currentColor !important;
	padding: 4px !important;
	min-width: 0;
	cursor: pointer;
}
.forge-product-search .wp-block-search__button svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}
.forge-product-search .wp-block-search__input {
	width: 100%;
	padding: 4px 10px;
	border: 1px solid var(--wp--preset--color--secondary, #e0d8cc);
	border-radius: 999px;
	background: #fff;
	font-size: 15px;
}

/* Menu déplié (accordéon mobile) : la recherche occupe toute la largeur, sous les
   liens. C'est là qu'elle vit sur petit écran — jamais à côté du panier, qui
   n'a déjà pas de place (cf. le verrouillage sur une ligne plus haut). */
.wp-block-navigation__responsive-container.is-menu-open .forge-product-search {
	/* 0 0 auto : sans ça le bloc s'étire sur toute la hauteur libre de la colonne
	   et la recherche se retrouve plaquée en bas, détachée des liens. */
	flex: 0 0 auto;
	width: min(320px, 82vw);
	justify-content: center;
	margin-top: 4px;
}
/* Dans l'accordéon, rien à recouvrir : le champ reprend sa place dans le flux. */
.wp-block-navigation__responsive-container.is-menu-open .forge-product-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
	position: static;
	transform: none;
	box-shadow: none;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .forge-product-search .wp-block-search__inside-wrapper {
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .forge-product-search .wp-block-search__input {
	width: 100%;
	max-width: none;
	font-size: 16px; /* < 16px : iOS zoome sur le champ à la mise au point. */
}

/* 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;
	}
}