/**
 * API Poker Isséenne — habillage de la fiche produit simple
 * (galerie, résumé, onglets, produits similaires)
 *
 * À enregistrer dans : votre-theme-enfant/assets/css/api-product.css
 * Chargé uniquement sur la fiche produit via inc/enqueue.php.
 */

:root{
	--api-blue-900:#162b68;
	--api-blue-800:#203b8a;
	--api-cream:#f5f5f5;
	--api-ink:#2c2c2c;
	--api-brass:#6d7f9c;
	--api-brass-soft:rgba(32,59,138,.10);
	--api-muted:#4a4a4a;
	--api-error:#8b2635;
}

/* ---------- Neutralise la grille "Boutique" sur la fiche produit ----------
 * api-shop.css transforme article.col-md-12 en grille à 2 colonnes
 * (260px menu + contenu) sur TOUTES les pages .woocommerce-page, y compris
 * la fiche produit — qui n'a pourtant pas de menu de catégories à côté.
 * On revient ici à une mise en page normale, propre à cette page.
 */
.woocommerce-page.single-product .page-area article.col-md-12{
	display:block !important;
}

/* ---------- Fil d'Ariane ---------- */
.woocommerce-breadcrumb{
	font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
	font-size:13px;
	color:var(--api-muted);
	margin:0 0 20px;
}
.woocommerce-breadcrumb a{
	color:var(--api-muted);
	text-decoration:none;
	border-bottom:1px solid transparent;
	transition:border-color .15s ease,color .15s ease;
}
.woocommerce-breadcrumb a:hover{
	color:var(--api-blue-800);
	border-color:var(--api-brass);
}

/* ---------- Conteneur général ---------- */
.api-product{
	font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
	color:var(--api-ink);
}
.api-product *{box-sizing:border-box;}

/* ---------- Galerie + résumé, côte à côte ----------
 * La photo ne doit jamais dépasser ~30% de la largeur : le résumé (titre,
 * prix, options, panier) a besoin de bien plus de place que la galerie.
 * Ce ratio est conservé jusqu'aux petits écrans (voir media query mobile
 * plus bas) — la photo se réduit en taille, elle ne repasse jamais en
 * pleine largeur au-dessus du texte.
 */
.api-product__inner{
	display:grid;
	grid-template-columns:minmax(180px,30%) minmax(0,1fr);
	gap:28px;
	align-items:start;
	margin-bottom:8px;
}
@media (max-width:1100px){
	.api-product__inner{
		grid-template-columns:minmax(160px,34%) minmax(0,1fr);
		gap:20px;
	}
}
@media (max-width:600px){
	.api-product__inner{
		grid-template-columns:minmax(110px,32%) minmax(0,1fr);
		gap:14px;
	}
}

/* ---------- Galerie d'images WooCommerce ---------- */
.api-product__inner .woocommerce-product-gallery{
	position:relative;
	width:100% !important;
	max-width:none !important;
}
/* IMPORTANT : overflow:hidden va UNIQUEMENT sur .flex-viewport (juste
 * l'image), jamais sur .woocommerce-product-gallery__wrapper — les
 * vignettes (.flex-control-thumbs) sont un enfant DIRECT de ce wrapper,
 * au même niveau que .flex-viewport, pas seulement en dessous visuellement.
 * Mettre overflow:hidden sur le wrapper les rognait purement et simplement. */
.woocommerce-product-gallery .flex-viewport{
	border-radius:20px;
	overflow:hidden;
	background:#ffffff;
	border:1px solid rgba(32,59,138,.08);
}
.woocommerce-product-gallery__wrapper{
	overflow:visible;
}
.woocommerce-product-gallery__image img{
	width:100%;
	height:auto;
	display:block;
	object-fit:contain;
	background:#ffffff;
}
/* Bandeau de vignettes : une seule ligne qui défile horizontalement
 * (au lieu d'une grille qui s'étale sur plusieurs lignes).
 * !important partout ici : une autre règle CSS (thème/plugin) impose du
 * flex-wrap:wrap avec la même spécificité que la nôtre, et gagne le
 * conflit selon l'ordre de chargement — d'où le retour en grille malgré
 * ce bloc. Confirmé par inspection : aucun style en ligne posé par le JS
 * de la galerie, donc le conflit est bien côté CSS, pas JS.
 *
 * padding-inline et scroll-snap-align:center (au lieu de start) : marge
 * de respiration à gauche/droite égale à la moitié de la largeur du
 * bandeau moins la moitié d'une vignette, pour que N'IMPORTE QUELLE
 * vignette — y compris la toute première ou la toute dernière — puisse
 * venir se caler au centre du bandeau, jamais collée à un bord.
 */
.woocommerce-product-gallery .flex-control-thumbs{
	display:flex !important;
	flex-wrap:nowrap !important;
	overflow-x:auto !important;
	overflow-y:hidden !important;
	gap:10px !important;
	margin:0 !important;
	padding:2px calc(50% - 36px) !important;
	list-style:none !important;
	scroll-snap-type:x mandatory;
	scroll-padding-inline:calc(50% - 36px);
	scrollbar-width:thin;
	scrollbar-color:var(--api-brass-soft) transparent;
	-webkit-overflow-scrolling:touch;
	max-width:100%;
}
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar{
	height:6px;
}
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb{
	background:var(--api-brass-soft);
	border-radius:999px;
}
.woocommerce-product-gallery .flex-control-thumbs li{
	flex:0 0 auto !important;
	width:72px !important;
	height:72px !important;
	margin:0 !important;
	scroll-snap-align:center;
}
.woocommerce-product-gallery .flex-control-thumbs img{
	width:100% !important;
	height:100% !important;
	object-fit:cover;
	border-radius:10px;
	border:1.5px solid transparent;
	cursor:pointer;
	transition:border-color .15s ease,opacity .15s ease;
	opacity:.75;
}
.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active{
	border-color:var(--api-brass);
	opacity:1;
}
.woocommerce-product-gallery__trigger{
	background:var(--api-cream);
	border-radius:50%;
	width:38px;
	height:38px;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 4px 10px rgba(22,43,104,.18);
}

/* ---------- Résumé (titre, note, prix, description courte, panier) ----------
 * !important nécessaire : le thème parent définit .woocommerce div.product
 * div.summary { float:right; width:48%; } avec une spécificité CSS plus
 * forte que la nôtre (règle vue avec #content dans certains contextes,
 * qui bat nos classes) — sans ça, cette règle peut reprendre la main.
 */
.api-product .summary.entry-summary{
	width:100% !important;
	max-width:none !important;
	float:none !important;
	clear:none !important;
}
.api-product .summary.entry-summary > .product_title{
	font-family:'Fraunces',Georgia,serif;
	font-weight:600;
	font-size:32px;
	line-height:1.2;
	color:var(--api-blue-900);
	margin:0 0 12px;
}
.api-product .woocommerce-product-rating{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0 0 16px;
}
.api-product .star-rating{
	color:var(--api-brass);
	font-size:15px;
}
.api-product .woocommerce-review-link{
	font-size:13px;
	color:var(--api-muted);
	text-decoration:underline;
	text-underline-offset:3px;
}
.api-product .price{
	font-family:'IBM Plex Mono',ui-monospace,monospace;
	font-size:26px;
	font-weight:600;
	color:var(--api-blue-800);
	margin:0 0 18px;
	display:block;
}
.api-product .price del{
	font-size:17px;
	color:var(--api-muted);
	opacity:.8;
	margin-right:10px;
}
.api-product .price ins{
	text-decoration:none;
	color:var(--api-brass);
}
.api-product .woocommerce-product-details__short-description{
	font-size:15px;
	line-height:1.65;
	color:var(--api-ink);
	margin-bottom:22px;
}
.api-product .woocommerce-product-details__short-description p{
	margin:0 0 10px;
}
.api-product .api-product__full-description{
	font-size:15px;
	line-height:1.65;
	color:var(--api-ink);
	margin-bottom:22px;
}
.api-product .api-product__full-description p{
	margin:0 0 12px;
}
.api-product .api-product__full-description ul,
.api-product .api-product__full-description ol{
	margin:0 0 12px;
	padding-left:20px;
}
.api-product .api-product__full-description li{
	margin-bottom:4px;
}
.api-product .api-product__full-description h2,
.api-product .api-product__full-description h3,
.api-product .api-product__full-description h4{
	font-family:'Fraunces',Georgia,serif;
	color:var(--api-blue-900);
	margin:18px 0 8px;
	line-height:1.3;
}
.api-product .api-product__full-description strong{
	color:var(--api-blue-800);
}

/* Statut de stock */
.api-product p.stock{
	display:inline-block;
	font-size:12.5px;
	font-weight:600;
	border-radius:999px;
	padding:5px 14px;
	margin:0 0 18px;
}
.api-product p.stock.in-stock{
	background:var(--api-brass-soft);
	color:var(--api-blue-800);
}
.api-product p.stock.out-of-stock{
	background:rgba(139,38,53,.08);
	color:var(--api-error);
}

/* Formulaire d'ajout au panier */
.api-product form.cart{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:14px;
	margin-bottom:22px;
}
.api-product .quantity{
	margin:0;
}
.api-product .quantity .qty{
	width:76px;
	height:52px;
	border:1px solid rgba(32,59,138,.18);
	border-radius:12px;
	text-align:center;
	font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
	font-size:15px;
	font-weight:600;
	color:var(--api-ink);
}
.api-product .quantity .qty:focus{
	outline:none;
	border-color:var(--api-brass);
	box-shadow:0 0 0 3px var(--api-brass-soft);
}
.api-product button.single_add_to_cart_button{
	background:var(--api-blue-900) !important;
	color:var(--api-cream) !important;
	border:1px solid var(--api-blue-900) !important;
	border-radius:999px !important;
	padding:15px 32px !important;
	font-size:15px !important;
	font-weight:600 !important;
	font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif !important;
	text-transform:none !important;
	letter-spacing:0 !important;
	box-shadow:none !important;
	transition:background .15s ease,color .15s ease,border-color .15s ease;
	flex:1 1 auto;
}
.api-product button.single_add_to_cart_button:hover{
	background:var(--api-brass) !important;
	border-color:var(--api-brass) !important;
	color:var(--api-blue-900) !important;
}
.api-product button.single_add_to_cart_button.disabled{
	opacity:.5;
	cursor:not-allowed;
}

/* Variations (menus déroulants) */
.api-product table.variations{
	width:100%;
	margin-bottom:16px;
}
.api-product table.variations td{
	padding:6px 0;
}
.api-product table.variations select{
	width:100%;
	border:1px solid rgba(32,59,138,.18);
	border-radius:10px;
	padding:10px 14px;
	font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
}
.api-product a.reset_variations{
	font-size:12.5px;
	color:var(--api-muted);
	text-decoration:underline;
}
.api-product table.variations td.value{
	width:auto !important;
}
.api-product table.variations th.label{
	font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
	font-weight:600;
	color:var(--api-blue-800);
	text-align:left;
	padding:10px 0 4px;
}
.api-product table.variations .woo-selected-variation-item-name{
	font-weight:400;
	color:var(--api-muted);
}

/* Options de personnalisation (broderie) — plugin "Variation Swatches for
 * WooCommerce". D'après l'inspecteur, les vraies classes générées sont
 * .variable-items-wrapper / .variable-item / .variable-item-contents /
 * .variable-item-span (PAS .woo-variation-swatches, qui n'existe pas dans
 * le HTML — c'est ce qui empêchait le précédent correctif de s'appliquer).
 * Le style "wvs-style-squared" du plugin force une case carrée à taille
 * fixe, pensée pour des pastilles de couleur, pas pour du texte long :
 * on repasse en largeur libre avec retour à la ligne propre à l'intérieur.
 */
.api-product .variable-items-wrapper{
	display:flex !important;
	flex-wrap:wrap !important;
	gap:8px !important;
	list-style:none;
	margin:0 0 18px !important;
	padding:0 !important;
}
.api-product .variable-items-wrapper .variable-item{
	width:auto !important;
	height:auto !important;
	min-width:44px !important;
	min-height:44px !important;
	margin:0 !important;
	padding:0 !important;
	background:var(--api-cream) !important;
	border:1.5px solid rgba(32,59,138,.18) !important;
	border-radius:10px !important;
	overflow:visible !important;
	cursor:pointer;
	transition:border-color .15s ease,background .15s ease;
}
.api-product .variable-items-wrapper .variable-item:hover{
	border-color:var(--api-blue-800) !important;
}
/* Sélectionné : vert (couleur principale de la charte), pas doré. */
.api-product .variable-items-wrapper .variable-item.selected,
.api-product .variable-items-wrapper .variable-item[aria-checked="true"]{
	border-color:var(--api-blue-900) !important;
	background:var(--api-blue-900) !important;
}
.api-product .variable-items-wrapper .variable-item.selected .variable-item-span,
.api-product .variable-items-wrapper .variable-item[aria-checked="true"] .variable-item-span{
	color:var(--api-cream) !important;
}
.api-product .variable-items-wrapper .variable-item.disabled,
.api-product .variable-items-wrapper .variable-item[aria-disabled="true"]{
	opacity:.4 !important;
	cursor:not-allowed;
}
.api-product .variable-items-wrapper .variable-item .variable-item-contents{
	display:flex !important;
	align-items:center;
	justify-content:center;
	width:auto !important;
	height:auto !important;
	padding:9px 14px !important;
}
.api-product .variable-items-wrapper .variable-item-span{
	position:static !important;
	white-space:normal !important;
	overflow-wrap:break-word;
	text-align:center;
	line-height:1.3;
	font-size:12.5px;
	font-weight:600;
	color:var(--api-ink);
	padding:0 !important;
	max-width:170px;
	transition:color .15s ease;
}

/* Métadonnées (SKU, catégories, étiquettes) */
.api-product .product_meta{
	font-size:13px;
	color:var(--api-muted);
	border-top:1px solid rgba(32,59,138,.08);
	padding-top:16px;
	display:flex;
	flex-direction:column;
	gap:4px;
}
.api-product .product_meta > span{
	display:block;
}
.api-product .product_meta a{
	color:var(--api-blue-800);
	text-decoration:none;
	border-bottom:1px solid var(--api-brass-soft);
}
.api-product .product_meta a:hover{
	border-color:var(--api-brass);
}

/* ---------- Zone pleine largeur : taille, personnalisation, panier ----------
 * Contient woocommerce_template_single_add_to_cart() (Taille, Avant, Manche
 * droite, Arrière, quantité, bouton) et woocommerce_template_single_meta()
 * (UGS, catégories) — déplacés hors du résumé (voir content-single-product.php)
 * pour prendre toute la largeur sous la photo + résumé plutôt que d'être
 * coincés dans la colonne de droite.
 */
.api-product__options{
	margin-top:32px;
	padding-top:28px;
	border-top:1px solid rgba(32,59,138,.08);
}

/* ---------- Zone pleine largeur : onglets, ventes croisées, produits similaires ---------- */
.api-product__extra{
	margin-top:44px;
}

/* Onglets (description longue, informations complémentaires, avis) */
.api-product__extra .woocommerce-tabs{
	max-width:860px;
}
.api-product__extra ul.tabs{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	list-style:none;
	margin:0 0 22px;
	padding:0;
	border-bottom:1px solid rgba(32,59,138,.1);
}
.api-product__extra ul.tabs li{
	margin:0;
}
.api-product__extra ul.tabs li a{
	display:inline-block;
	padding:12px 18px;
	font-size:14px;
	font-weight:600;
	color:var(--api-muted);
	text-decoration:none;
	border-radius:12px 12px 0 0;
	transition:background .15s ease,color .15s ease;
}
.api-product__extra ul.tabs li a:hover{
	color:var(--api-blue-800);
	background:var(--api-brass-soft);
}
.api-product__extra ul.tabs li.active a{
	color:var(--api-blue-900);
	background:var(--api-brass-soft);
}
.api-product__extra .woocommerce-Tabs-panel{
	font-size:15px;
	line-height:1.7;
	color:var(--api-ink);
}
.api-product__extra .woocommerce-Tabs-panel h2{
	font-family:'Fraunces',Georgia,serif;
	font-weight:600;
	color:var(--api-blue-900);
	font-size:20px;
	margin:0 0 14px;
}
.api-product__extra table.shop_attributes{
	width:100%;
	border-collapse:collapse;
	margin-top:6px;
}
.api-product__extra table.shop_attributes th,
.api-product__extra table.shop_attributes td{
	padding:10px 14px;
	border:1px solid rgba(32,59,138,.08);
	font-size:14px;
}
.api-product__extra table.shop_attributes th{
	background:var(--api-brass-soft);
	color:var(--api-blue-800);
	font-weight:600;
	text-align:left;
	width:220px;
}

/* Onglet "Informations" (UGS, catégories, étiquettes, marque) */
.api-product__extra .product_meta{
	list-style:none;
	margin:0;
	padding:0;
}
.api-product__extra .product_meta > span{
	display:block;
	margin-bottom:10px;
	font-size:14.5px;
}
.api-product__extra .product_meta > span:last-child{
	margin-bottom:0;
}
.api-product__extra .product_meta a{
	color:var(--api-blue-800);
	text-decoration:underline;
	text-underline-offset:2px;
}

/* Avis clients */
.api-product__extra #reviews .comment-form input,
.api-product__extra #reviews .comment-form textarea{
	border:1px solid rgba(32,59,138,.18) !important;
	border-radius:10px !important;
	padding:10px 14px !important;
	font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
}
.api-product__extra #reviews .comment-form input:focus,
.api-product__extra #reviews .comment-form textarea:focus{
	border-color:var(--api-brass) !important;
	outline:none;
	box-shadow:0 0 0 3px var(--api-brass-soft);
}
.api-product__extra #reviews .comment-form #submit,
.api-product__extra #reviews p.stars a{
	color:var(--api-brass);
}
.api-product__extra #reviews .commentlist .comment_container{
	background:var(--api-cream);
	border-radius:14px;
	padding:18px 20px;
	margin-bottom:14px;
}
.api-product__extra #reviews .comment-reply-title,
.api-product__extra #reviews #comments h2{
	font-family:'Fraunces',Georgia,serif;
	font-weight:600;
	color:var(--api-blue-900);
}
.api-product__extra #reviews .comment-form input[type="submit"]{
	background:var(--api-blue-900);
	color:var(--api-cream);
	border:1px solid var(--api-blue-900);
	border-radius:999px;
	padding:12px 24px;
	font-weight:600;
	cursor:pointer;
	transition:background .15s ease,color .15s ease;
}
.api-product__extra #reviews .comment-form input[type="submit"]:hover{
	background:var(--api-brass);
	border-color:var(--api-brass);
	color:var(--api-blue-900);
}

/* Ventes croisées et produits similaires
 * Réutilise le même style de carte que la grille boutique (api-shop.css,
 * déjà chargé sur la fiche produit), on ne fait ici que le titre de section
 * et l'espacement entre les blocs.
 */
.api-product__extra .related,
.api-product__extra .upsells{
	margin-top:40px;
}
.api-product__extra .related > h2,
.api-product__extra .upsells > h2{
	font-family:'Fraunces',Georgia,serif;
	font-weight:600;
	font-size:22px;
	color:var(--api-blue-900);
	margin:0 0 18px;
}

/* ---------- Pop-up de zoom (fait maison) ----------
 * Remplace le comportement par défaut de WooCommerce (ouverture de l'image
 * en pleine page) : on intercepte le clic sur la loupe / l'image principale
 * en JS (voir woocommerce/content-single-product.php) et on affiche l'image
 * en grand dans cette fenêtre modale, par-dessus la page.
 */
.api-product-lightbox{
	position:fixed;
	inset:0;
	z-index:9999;
	display:none;
	align-items:center;
	justify-content:center;
	padding:24px;
	background:rgba(22,43,104,.88);
}
.api-product-lightbox.is-open{
	display:flex;
}
.api-product-lightbox__img{
	max-width:min(90vw,1100px);
	max-height:88vh;
	width:auto;
	height:auto;
	border-radius:16px;
	box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
	background:#ffffff;
}
.api-product-lightbox__close{
	position:absolute;
	top:22px;
	right:26px;
	width:44px;
	height:44px;
	border-radius:50%;
	border:none;
	background:var(--api-cream);
	color:var(--api-blue-900);
	font-size:22px;
	line-height:1;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.api-product-lightbox__close:hover{
	background:var(--api-brass);
}

/* ---------- Mobile ----------
 * La photo reste petite (~30% de la largeur, voir .api-product__inner
 * plus haut) au lieu de repasser en pleine largeur au-dessus du texte :
 * le résumé garde donc une colonne étroite ici aussi, d'où des tailles de
 * police et des espacements resserrés.
 */
@media (max-width:600px){
	.api-product .summary.entry-summary > .product_title{
		font-size:19px;
		line-height:1.25;
	}
	.api-product .price{
		font-size:17px;
	}
	.api-product .woocommerce-product-details__short-description{
		font-size:13.5px;
	}
	.api-product form.cart{
		flex-direction:column;
		align-items:stretch;
	}
	.api-product .quantity .qty{
		width:100%;
		height:46px;
	}
	.api-product button.single_add_to_cart_button{
		width:100%;
		padding:13px 22px !important;
	}
	.api-product table.variations th.label,
	.api-product table.variations td.value{
		display:block;
		width:100% !important;
	}
	.api-product table.variations tr{
		display:block;
		margin-bottom:6px;
	}
	.api-product .variable-items-wrapper .variable-item-span{
		font-size:11.5px;
		max-width:120px;
	}
	.api-product .variable-items-wrapper .variable-item .variable-item-contents{
		padding:7px 10px !important;
	}
	.woocommerce-product-gallery .flex-control-thumbs{
		padding:2px calc(50% - 20px) !important;
		scroll-padding-inline:calc(50% - 20px);
	}
	.woocommerce-product-gallery .flex-control-thumbs li{
		width:40px !important;
		height:40px !important;
	}
	.api-product__extra .woocommerce-tabs{
		max-width:none;
	}
	.api-product__extra ul.tabs{
		gap:4px;
	}
	.api-product__extra ul.tabs li a{
		padding:10px 12px;
		font-size:13px;
	}
	.api-product-lightbox__close{
		top:12px;
		right:14px;
	}
}