/*
Theme Name: SAFE Child (Astra)
Template: astra
Description: Child theme SAFE — identite visuelle inspiree des standards B2B internationaux (Option A++). Palette et sections distinctives ci-dessous.
Version: 0.1.5
*/

/* ============================================================
   BRAND TOKENS SAFE — extraits du logo vectoriel officiel (logo safe.ai,
   recu 2026-07-02). Rouge #E42320 + noir riche #1D1D1B, identite
   confirmee par la carte de visite (panneaux rouges / dos noir).
   ============================================================ */
:root {
	--safe-color-primary: #1D1D1B;      /* noir riche du logo */
	--safe-color-primary-dark: #000000;
	--safe-color-accent: #E42320;       /* rouge SAFE officiel */
	--safe-color-accent-dark: #B81A18;
	--safe-color-bg-light: #F7F6F5;
	--safe-color-text: #1D1D1B;
	--safe-color-white: #FFFFFF;
	/* System-font stack — no external CDN call (Core Web Vitals / LCP). Self-host
	   Inter/Manrope via @font-face once brand kit confirms final typography. */
	--safe-font-heading: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--safe-font-body: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--safe-radius: 6px;
}

/* ============================================================
   HERO — section distinctive #1
   ============================================================ */
.safe-hero {
	background-image:
		linear-gradient(135deg, rgba(29, 29, 27, 0.82) 0%, rgba(0, 0, 0, 0.9) 100%),
		var(--safe-hero-bg-url, none);
	background-color: var(--safe-color-primary-dark);
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
	color: var(--safe-color-white);
	padding: 96px 24px;
	text-align: center;
}
.safe-hero h1 {
	font-family: var(--safe-font-heading);
	font-weight: 800;
	font-size: clamp(28px, 5vw, 48px);
	margin-bottom: 16px;
	color: var(--safe-color-white) !important;
}
.safe-hero p.safe-hero-subtitle {
	font-family: var(--safe-font-body);
	font-size: clamp(16px, 2vw, 20px);
	max-width: 640px;
	margin: 0 auto 32px;
	opacity: 0.9;
	color: var(--safe-color-white) !important;
}
.safe-hero .safe-cta,
.safe-product-of-week .safe-cta {
	display: inline-block;
	background: var(--safe-color-accent);
	color: var(--safe-color-white) !important;
	padding: 14px 32px;
	border-radius: var(--safe-radius);
	font-weight: 700;
	text-decoration: none !important;
	transition: background 0.2s ease;
}
.safe-product-of-week h3 a {
	color: var(--safe-color-text);
	text-decoration: none;
}
.safe-product-of-week h3 a:hover {
	color: var(--safe-color-accent);
}
.safe-hero .safe-cta:hover {
	background: var(--safe-color-accent-dark);
}

/* ============================================================
   BRAND CAROUSEL — section distinctive #2 (style sitec-idf.com "marques distribuees")
   Par défaut une grille statique ; le défilement en boucle s'y ajoute plus bas, seulement si le
   visiteur accepte les animations et que rien n'a le focus clavier dans le bandeau.
   ============================================================ */
.safe-brand-carousel {
	background: var(--safe-color-white);
	padding: 40px 0;
	text-align: center;
	border-top: 1px solid #E5E9EE;
	border-bottom: 1px solid #E5E9EE;
}
.safe-brand-carousel .safe-brand-carousel-title {
	font-family: var(--safe-font-body);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #8A97A6;
	margin-bottom: 24px;
	padding: 0 24px;
}
.safe-brand-carousel .safe-brand-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 32px 56px;
	margin: 0;
	padding: 0 24px;
	list-style: none;
}
.safe-brand-carousel .safe-brand-logos[aria-hidden="true"] {
	display: none;
}
.safe-brand-carousel .safe-brand-logos li {
	display: flex;
	flex-shrink: 0;
	margin: 0;
}
.safe-brand-carousel .safe-brand-logos a {
	display: flex;
	border-radius: 4px;
}
.safe-brand-carousel .safe-brand-logos a:focus-visible {
	outline: 2px solid var(--safe-color-primary);
	outline-offset: 6px;
}
.safe-brand-carousel .safe-brand-logos img {
	display: block;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: opacity 0.2s ease, filter 0.2s ease;
}
.safe-brand-carousel .safe-brand-logos li:hover img,
.safe-brand-carousel .safe-brand-logos a:focus-visible img {
	filter: grayscale(0%);
	opacity: 1;
}
/* Grille sur téléphone : deux colonnes, un logo trop large rétrécit à sa case (sinon presque un logo par
   ligne, 700 px de haut). */
@media (max-width: 600px) {
	.safe-brand-carousel .safe-brand-logos {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-items: center;
		gap: 28px 24px;
	}
	.safe-brand-carousel .safe-brand-logos img {
		max-width: 100%;
		height: auto;
	}
}
/* Défilement en boucle : la piste porte la liste deux fois et glisse de -50 % ; la copie arrive alors
   exactement là où l'original commençait (aucune couture). Pause au survol. Pendant la navigation au
   clavier dans le bandeau, retour à la grille : le logo qui a le focus pourrait sinon se trouver à gauche
   de la bande visible, là où aucun défilement ne peut le ramener. Sans :has() (vieux navigateurs), la
   règle entière est ignorée et la grille reste affichée. */
@media (prefers-reduced-motion: no-preference) {
	.safe-brand-carousel:not(:has(:focus-visible)) .safe-brand-marquee {
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
		mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	}
	.safe-brand-carousel:not(:has(:focus-visible)) .safe-brand-track {
		display: flex;
		width: max-content;
		animation: safe-brand-scroll 45s linear infinite;
	}
	.safe-brand-carousel:not(:has(:focus-visible)) .safe-brand-logos { /* les deux listes, copie comprise */
		display: flex;
		flex-wrap: nowrap;
		gap: 56px;
		padding: 0 56px 0 0; /* = gap : même écart entre la dernière marque et la copie qu'entre deux marques */
	}
	.safe-brand-carousel:not(:has(:focus-visible)) .safe-brand-logos img {
		max-width: none;
	}
	.safe-brand-carousel:hover .safe-brand-track {
		animation-play-state: paused;
	}
}
@keyframes safe-brand-scroll {
	to {
		transform: translateX(-50%);
	}
}

/* ============================================================
   PRODUCT CARDS — section distinctive #3 (restyle WooCommerce loop item)
   ============================================================ */
ul.products li.product {
	border: 1px solid #E5E9EE;
	border-radius: var(--safe-radius);
	padding: 16px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	background: var(--safe-color-white);
}
ul.products li.product:hover {
	box-shadow: 0 8px 24px rgba(15, 42, 74, 0.08);
	transform: translateY(-2px);
}
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--safe-font-heading);
	font-weight: 700;
	color: var(--safe-color-text);
}
ul.products li.product .price {
	color: var(--safe-color-accent);
	font-weight: 700;
}
ul.products li.product .button {
	background: var(--safe-color-accent) !important;
	color: var(--safe-color-white) !important;
	border-radius: var(--safe-radius) !important;
}
ul.products li.product .button:hover {
	background: var(--safe-color-accent-dark) !important;
}

/* ============================================================
   PRODUIT DE LA SEMAINE — widget (voir mu-plugins/safe-product-of-week.php)
   ============================================================ */
.safe-product-of-week {
	display: flex;
	align-items: center;
	gap: 24px;
	background: var(--safe-color-bg-light);
	border: 2px solid var(--safe-color-accent);
	border-radius: var(--safe-radius);
	padding: 24px;
	margin: 32px 0;
	text-align: left;
}
.safe-product-of-week .safe-potw-image {
	flex: 0 0 180px;
	max-width: 180px;
}
.safe-product-of-week .safe-potw-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--safe-radius);
	background: var(--safe-color-white);
}
.safe-product-of-week .safe-potw-body {
	flex: 1 1 auto;
	min-width: 0;
}
@media (max-width: 640px) {
	.safe-product-of-week {
		flex-direction: column;
		align-items: flex-start;
	}
	.safe-product-of-week .safe-potw-image {
		flex-basis: auto;
		width: 100%;
		max-width: 240px;
	}
}
.safe-product-of-week .safe-potw-label {
	display: inline-block;
	background: var(--safe-color-accent);
	color: var(--safe-color-white);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 12px;
}

/* ============================================================
   ANNUAIRE INSTALLATEURS — voir mu-plugins/safe-custom-post-types.php
   ============================================================ */
.safe-installer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	margin: 32px 0;
}
.safe-installer-card {
	border: 1px solid #E5E9EE;
	border-radius: var(--safe-radius);
	padding: 20px;
	text-align: center;
}
.safe-installer-card img.safe-installer-photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 12px;
}
.safe-installer-card h3 {
	font-family: var(--safe-font-heading);
	margin-bottom: 4px;
}

/* ============================================================
   ICONES SOCIALES — [safe_social]
   ============================================================ */
.safe-social-icons {
	display: flex;
	gap: 16px;
	align-items: center;
	margin: 8px 0;
}
.safe-social-icons a {
	color: var(--safe-color-primary);
	display: inline-flex;
	transition: color 0.2s ease, transform 0.2s ease;
}
.safe-social-icons a:hover {
	color: var(--safe-color-accent);
	transform: translateY(-2px);
}

/* ============================================================
   PRE-FOOTER SAFE — fond noir, 3 colonnes
   ============================================================ */
.safe-prefooter {
	background: var(--safe-color-primary);
	color: #C9CDD2;
	padding: 48px 24px 40px;
}
.safe-prefooter-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 40px;
}
.safe-prefooter h4 {
	color: var(--safe-color-white);
	font-family: var(--safe-font-heading);
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 16px;
}
.safe-prefooter p {
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.6;
}
.safe-prefooter a {
	color: #C9CDD2;
	text-decoration: none;
}
.safe-prefooter a:hover {
	color: var(--safe-color-accent);
}
.safe-prefooter-brand img {
	margin-bottom: 16px;
	max-width: 180px;
	height: auto;
}
.safe-prefooter .safe-social-icons a {
	color: #C9CDD2;
}
.safe-prefooter .safe-social-icons a:hover {
	color: var(--safe-color-accent);
}
.safe-prefooter-legal {
	margin-top: 16px;
	font-size: 13px;
	opacity: 0.85;
}

/* ============================================================
   CARTE GOOGLE MAPS — responsive
   ============================================================ */
.safe-map {
	width: 100%;
	margin: 24px 0;
}
.safe-map iframe {
	width: 100%;
	height: 380px;
	border: 0;
	border-radius: var(--safe-radius);
}

/* ============================================================
   BANNIERE DE PAGE — images d'en-tete A propos / Services
   ============================================================ */
.safe-page-banner {
	margin: 0 0 32px;
}
.safe-page-banner img {
	width: 100%;
	height: auto;
	border-radius: var(--safe-radius);
	display: block;
}

/* ============================================================
   UNITÉ DE VENTE — « / m » après le prix des produits au mètre
   (filtre woocommerce_get_price_suffix dans functions.php)
   ============================================================ */
.safe-unit {
	font-size: 0.85em;
	font-weight: 400;
	opacity: 0.8;
}

/* ============================================================
   MÉDIAS PRODUIT — mention gamme, bouton PDF (mu-plugins/safe-product-media.php)
   ============================================================ */
.safe-media-caption {
	margin: 8px 0 0;
	font-size: 0.85em;
	font-style: italic;
	color: #6B6B69;
}
.safe-doc {
	margin: 12px 0 0;
}
.safe-doc-button {
	display: inline-block;
	padding: 10px 18px;
	border: 2px solid var(--safe-color-primary);
	border-radius: var(--safe-radius);
	color: var(--safe-color-primary);
	font-weight: 600;
	text-decoration: none;
}
.safe-doc-button:hover,
.safe-doc-button:focus {
	background: var(--safe-color-primary);
	color: var(--safe-color-white);
}

/* ============================================================
   CATÉGORIES BOUTIQUE — catégorie sélectionnée en rouge SAFE
   (widget WooCommerce « Catégories » de la sidebar gauche Astra ;
   le walker WooCommerce pose .current-cat sur la catégorie affichée
   et .current-cat-parent sur chacun de ses parents ; le walker
   WordPress natif utiliserait .current-cat-ancestor)
   ============================================================ */
.widget_product_categories .current-cat > a {
	color: var(--safe-color-accent);
	font-weight: 600;
}
.widget_product_categories .current-cat > a:hover,
.widget_product_categories .current-cat > a:focus {
	color: var(--safe-color-accent-dark);
}
/* Le chevron des sous-catégories (::before Astra, currentcolor) suit le rouge. */
.widget_product_categories ul.product-categories li.current-cat::before {
	border-color: var(--safe-color-accent);
}
/* Parents de la catégorie affichée : en gras seulement, pour lire le chemin. */
.widget_product_categories .current-cat-parent > a,
.widget_product_categories .current-cat-ancestor > a {
	font-weight: 600;
}
/* Retour visuel immédiat au clic, avant le chargement de la page. */
.widget_product_categories .product-categories a:active {
	color: var(--safe-color-accent);
}

/* ============================================================
   FILTRES BOUTIQUE — sidebar gauche : filtres actifs, marque, prix
   (widgets WooCommerce classiques, disposés par
   tools/catalogue/wp/settings.php)
   ============================================================ */
/* Liste des marques : 49 marques sur /boutique/, hauteur bornée pour
   garder le filtre prix et les catégories à portée. */
.widget_layered_nav .woocommerce-widget-layered-nav-list {
	max-height: 300px;
	overflow-y: auto;
}
/* Marque cochée : même code que la catégorie sélectionnée. */
.widget_layered_nav .woocommerce-widget-layered-nav-list__item--chosen > a {
	color: var(--safe-color-accent);
	font-weight: 600;
}
.widget_layered_nav .woocommerce-widget-layered-nav-list__item--chosen > a::before {
	color: var(--safe-color-accent);
}
/* Filtres actifs : pastilles rouges, la croix WooCommerce en tête.
   « .widget » en plus pour passer devant les règles Astra/WooCommerce
   (.widget_layered_nav_filters ul li.chosen a : display block, couleur). */
.widget.widget_layered_nav_filters ul li {
	float: none;
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 0;
}
.widget.widget_layered_nav_filters ul li.chosen a {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid var(--safe-color-accent);
	border-radius: 999px;
	color: var(--safe-color-accent);
	font-size: 0.85em;
	font-weight: 600;
}
.widget.widget_layered_nav_filters ul li.chosen a::before {
	color: var(--safe-color-accent);
}
.widget.widget_layered_nav_filters ul li.chosen a:hover,
.widget.widget_layered_nav_filters ul li.chosen a:focus {
	background: var(--safe-color-accent);
	color: var(--safe-color-white);
}
.widget.widget_layered_nav_filters ul li.chosen a:hover::before,
.widget.widget_layered_nav_filters ul li.chosen a:focus::before {
	color: var(--safe-color-white);
}
/* Curseur de prix : plage retenue et poignées en rouge SAFE (Astra les
   peint en noir avec .woocommerce .widget_price_filter …, d'où .woocommerce.widget). */
.woocommerce.widget.widget_price_filter .ui-slider .ui-slider-range,
.woocommerce.widget.widget_price_filter .ui-slider .ui-slider-handle {
	background-color: var(--safe-color-accent);
}

/* ============================================================
   EN-TÊTE — menu principal + icônes compte et panier sur une ligne
   (icônes placées par tools/catalogue/wp/settings.php)
   ============================================================ */
/* Entre la bascule mobile d'Astra (921 px) et 1160 px, les 8 entrées à
   1em de marge (règle Astra .main-header-menu .menu-link) plus les deux
   icônes débordaient : « Contact » seul sur une 2e ligne jusqu'à ~1110 px
   (iPad 10,2" à l'horizontale : 1080 px), « Showroom » et « Contact » à
   1024 px. À 8 px, il reste 29 px de marge à 1024 px (mesuré), et ~38 px
   à 1161 px avec la marge Astra, pour les polices système qui varient
   d'un appareil à l'autre ; plus étroit que ~995 px, la ligne casse encore. */
@media (min-width: 922px) and (max-width: 1160px) {
	.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
		padding-left: 8px;
		padding-right: 8px;
	}
}
/* Icône « Mon compte » : Astra la dessine en noir à 18 px, à côté d'un
   panier et d'un burger rouges. Même rouge SAFE (la variable de couleur
   d'Astra n'est redéfinie que pour cette icône) et 22 px. */
.ast-header-account {
	--ast-global-color-2: var(--safe-color-accent);
}
.ast-header-account .ast-header-account-wrap .ast-header-account-type-icon .ahfb-svg-iconset svg {
	width: 22px;
	height: 22px;
}
/* Panneau panier (mobile, glissé depuis le bord) : la bulle WhatsApp
   (Social Chat, z-index 9999999) passait devant le bouton « Commander ».
   Astra pose .ast-mobile-cart-active sur <html> tant que le panneau est
   ouvert ; la bulle revient à sa fermeture. */
html.ast-mobile-cart-active .qlwapp__container {
	display: none;
}