/* Charte de marque — variables CSS centralisées (H.7).
   Chargée sur tout le site public. Les autres CSS (moteur, home, shop,
   site-header, site-footer) référencent ces variables.

   Source : CLAUDE.md §"Identité visuelle". Ne pas dupliquer ailleurs. */

:root {
	/* Couleurs */
	--apa-bleu:          #1b3a6b;
	--apa-bleu-clair:    #2f5fa3;
	--apa-bleu-fonce:    #0f1e2f;
	--apa-corail:        #ef5a4c;
	--apa-corail-fonce:  #d8412f;
	/* Orange chaud APA — utilisé pour le CTA « Personnaliser » et le
	   gradient des pastilles brand. Plus chaud / moins rouge que le
	   corail, pour distinguer l'action « entrer dans le moteur ». */
	--apa-orange:        #f7864a;
	--apa-orange-fonce:  #e36a2e;
	--apa-vert:          #1e9e6a;
	--apa-jaune:         #f6c453;
	--apa-papier:        #f4f1ea;
	--apa-carte:         #ffffff;
	/* Gris bleuté neutre — fond des vignettes produit (cadre autour
	   des images) ET de la sidebar des filtres boutique, pour que
	   les deux zones aient exactement la même teinte. */
	--apa-vignette-bg:   #eef0f4;
	--apa-texte:         #14202d;
	--apa-texte-doux:    #5b6675;
	--apa-borure-douce:  rgba(0,0,0,.06);

	/* Polices — display et menu convergent sur Poppins (cohérence d'identité).
	   Conserver les deux variables permet une éventuelle divergence future. */
	--apa-font-display:  'Poppins', 'Inter', system-ui, sans-serif;
	--apa-font-body:     'Inter', system-ui, -apple-system, sans-serif;
	--apa-font-menu:     'Poppins', 'Inter', system-ui, sans-serif;

	/* Espacements */
	--apa-radius-sm: 8px;
	--apa-radius:    12px;
	--apa-radius-lg: 16px;

	/* Ombres */
	--apa-shadow-sm:  0 1px 3px rgba(0,0,0,.04);
	--apa-shadow:     0 4px 14px rgba(0,0,0,.08);
	--apa-shadow-lg:  0 10px 30px rgba(0,0,0,.12);
}

/* ---- Focus accessible globalement ---- */

:focus-visible {
	outline: 2px solid var(--apa-bleu-clair);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Boutons & links WC : focus ring marque */
.woocommerce button:focus-visible,
.woocommerce .button:focus-visible,
.woocommerce a.button:focus-visible {
	outline: 2px solid var(--apa-bleu-clair);
	outline-offset: 2px;
	box-shadow: none;
}

/* ---- Boutons WC à la marque ---- */

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart-form .button,
.woocommerce-checkout button.button {
	background: var(--apa-corail) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--apa-radius) !important;
	font-family: var(--apa-font-body) !important;
	font-weight: 700 !important;
	padding: 12px 22px !important;
	box-shadow: 0 2px 6px rgba(239,90,76,.30);
	min-height: 44px;
	text-shadow: none !important;
}
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--apa-corail-fonce) !important;
}

/* Boutons secondaires (alt) en bleu */
.woocommerce a.button.alt,
.woocommerce button.alt {
	background: var(--apa-bleu) !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.alt:hover {
	background: var(--apa-bleu-clair) !important;
}

/* ---- Liens : couleur de marque ---- */

.woocommerce a {
	color: var(--apa-bleu-clair);
}
.woocommerce a:hover {
	color: var(--apa-bleu);
}

/* Liens dans le contenu (the_content) public */
body:not(.apa-is-home) main.wp-block-group a,
body:not(.apa-is-home) .entry-content a {
	color: var(--apa-bleu-clair);
}

/* ---- Titres de pages publiques ---- */

body:not(.apa-is-home) .wp-block-post-title,
body:not(.apa-is-home) .entry-title,
.wp-block-post-title a,
.woocommerce-products-header__title {
	font-family: var(--apa-font-display) !important;
	color: var(--apa-bleu) !important;
}

/* ---- Forms WC à la marque ---- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-cart-form input,
.woocommerce-checkout input,
.woocommerce-checkout select {
	border-radius: var(--apa-radius-sm) !important;
	border: 1px solid rgba(0,0,0,.12) !important;
	padding: 11px 12px !important;
	font-family: var(--apa-font-body) !important;
	font-size: 1rem !important;
	min-height: 44px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--apa-bleu-clair) !important;
	box-shadow: 0 0 0 3px rgba(47,95,163,.18) !important;
	outline: 0 !important;
}

/* ---- Notices WC ---- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--apa-papier) !important;
	border-top: 3px solid var(--apa-bleu) !important;
	color: var(--apa-texte) !important;
	border-radius: var(--apa-radius);
	font-family: var(--apa-font-body);
}
.woocommerce-message::before {
	color: var(--apa-vert);
}
.woocommerce-error {
	border-top-color: var(--apa-corail) !important;
}
.woocommerce-error::before {
	color: var(--apa-corail);
}

/* ---- Tables WC (panier, mes commandes) ---- */

.woocommerce-cart-form table,
.woocommerce-orders-table,
.shop_table {
	border-radius: var(--apa-radius) !important;
	overflow: hidden;
	border: 1px solid var(--apa-borure-douce) !important;
}
.woocommerce-cart-form table th,
.shop_table th {
	background: var(--apa-papier) !important;
	color: var(--apa-bleu) !important;
	font-family: var(--apa-font-display);
}

/* Vignette substituée par l'aperçu n8n (panier, mini-panier, checkout,
   mes commandes). Cadrée comme une vignette WC standard. */
.apa-cart-item-thumb {
	display: block;
	width: 80px;
	height: 80px;
	max-width: 100%;
	object-fit: contain;
	background: var(--apa-papier, #f4f1ea);
	/* Angles droits : c'est l'aperçu d'une affiche imprimée,
	   l'image rendue dans le panier respecte le format réel. */
	border-radius: 0;
	border: 1px solid var(--apa-borure-douce, rgba(0,0,0,.08));
}

/* Méta apa (Projet, Piste choisie, Format) sur les lignes du panier.
   WC rend chaque entrée comme <dl class="variation"><dt>Clé:</dt><dd>Valeur</dd></dl>
   ce qui par défaut empile les paires sur 2 lignes. On les met côte
   à côte pour économiser l'espace et clarifier "Format: A4". */
.woocommerce-cart-form .variation,
.woocommerce-checkout-review-order .variation,
.woocommerce-order-overview .variation,
.woocommerce-MyAccount-orders .variation,
.shop_table .variation,
.cart_item .variation {
	margin: 4px 0 0;
	font-size: .88em;
	line-height: 1.35;
}
.woocommerce-cart-form .variation dt,
.woocommerce-cart-form .variation dd,
.woocommerce-checkout-review-order .variation dt,
.woocommerce-checkout-review-order .variation dd,
.woocommerce-order-overview .variation dt,
.woocommerce-order-overview .variation dd,
.woocommerce-MyAccount-orders .variation dt,
.woocommerce-MyAccount-orders .variation dd,
.shop_table .variation dt,
.shop_table .variation dd,
.cart_item .variation dt,
.cart_item .variation dd {
	display: inline;
	margin: 0;
	padding: 0;
}
.woocommerce-cart-form .variation dt,
.woocommerce-checkout-review-order .variation dt,
.woocommerce-order-overview .variation dt,
.woocommerce-MyAccount-orders .variation dt,
.shop_table .variation dt,
.cart_item .variation dt {
	font-weight: 600;
	color: var(--apa-bleu, #1b3a6b);
	margin-right: 4px;
}
.woocommerce-cart-form .variation dd::after,
.woocommerce-checkout-review-order .variation dd::after,
.woocommerce-order-overview .variation dd::after,
.woocommerce-MyAccount-orders .variation dd::after,
.shop_table .variation dd::after,
.cart_item .variation dd::after {
	content: "";
	display: block;
	margin-bottom: 2px;
}
.woocommerce-cart-form .variation dd p,
.woocommerce-checkout-review-order .variation dd p,
.woocommerce-order-overview .variation dd p,
.woocommerce-MyAccount-orders .variation dd p,
.shop_table .variation dd p,
.cart_item .variation dd p {
	display: inline;
	margin: 0;
}

/* ---- Mon compte : navigation ---- */

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.woocommerce-MyAccount-navigation li {
	margin: 0 0 4px;
}
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--apa-radius-sm);
	color: var(--apa-texte);
	text-decoration: none;
	background: var(--apa-papier);
	min-height: 44px;
	display: flex;
	align-items: center;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.is-active a:link,
.woocommerce-MyAccount-navigation li.is-active a:visited,
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li a:hover:visited {
	background: var(--apa-bleu);
	/* !important : bat la couleur de lien "visité" du thème (l'onglet actif
	   pointe vers la page courante → lien visité bleu qui masquait le #fff). */
	color: #fff !important;
	text-decoration: none;
}

/* ---- Pages "comment-ca-marche" / "contact" / légales ---- */

body.page main .wp-block-post-title,
body.page main .wp-block-post-content > h1:first-child {
	font-family: var(--apa-font-display);
	color: var(--apa-bleu);
}
body.page main .wp-block-post-content h2,
body.page main .wp-block-post-content h3 {
	font-family: var(--apa-font-display);
	color: var(--apa-bleu);
}

body.page main .wp-block-post-content {
	font-family: var(--apa-font-body);
}

/* Lede courant sur les pages standard */
body.page main .wp-block-post-content .apa-lede {
	font-size: 1.05rem;
	color: var(--apa-texte-doux);
	border-left: 3px solid var(--apa-corail);
	padding: 4px 0 4px 14px;
	margin: 16px 0 22px;
}

/* ---- Boutons noirs par défaut Twenty Twenty-Five → corail ---- */

main .wp-block-button .wp-block-button__link,
main .wp-element-button {
	background: var(--apa-corail) !important;
	color: #fff !important;
	border-radius: var(--apa-radius) !important;
	padding: 12px 22px !important;
	font-family: var(--apa-font-body) !important;
	font-weight: 700 !important;
}

/* ---- Petits raffinements responsive ---- */

@media (max-width: 480px) {
	body { font-size: 16px; }
}

/* ---- Print friendly ---- */

@media print {
	.apa-site-header,
	.apa-site-footer,
	.apa-contact-topbar,
	.apa-cookie-banner { display: none !important; }
}