/*
Theme Name: ATSERV Clim Solaire
Theme URI: https://atserv-clim-solaire.fr
Author: L'Étoile du Web
Description: Thème bloc (FSE) sur-mesure pour ATSERV Clim Solaire — climatisation & solaire photovoltaïque en PACA et Occitanie. Identité 100 % bleue, module Réalisations.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: atserv-clim-fse
*/

/* ============================================================
   Aides transverses
   ============================================================ */
:root {
	--acs-line: rgba(20, 31, 71, 0.13);
	--acs-shadow: 0 1px 2px rgba(20, 31, 71, 0.06), 0 14px 30px -14px rgba(20, 31, 71, 0.22);
	--acs-radius: 16px;
}

body {
	-webkit-font-smoothing: antialiased;
}

/* Libellé technique en mono (surtitres) */
.acs-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}

/* Signature « spectre » bleu roi → azur */
.acs-spectrum {
	display: block;
	height: 3px;
	width: 56px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--royal), var(--wp--preset--color--azure-light));
}

.acs-sec-head {
	max-width: 44rem;
}
.acs-sec-head .acs-eyebrow + h2,
.acs-sec-head h2 {
	margin-top: 0.6rem;
}
.acs-lead {
	font-size: 1.12rem;
	color: var(--wp--preset--color--ink-soft);
}

/* Puces / tags mono */
.acs-tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	padding: 0.32rem 0.7rem;
	border-radius: 99px;
	border: 1px solid var(--acs-line);
	color: var(--wp--preset--color--ink-soft);
	white-space: nowrap;
}

:where(.wp-block-button__link):focus-visible,
a:focus-visible {
	outline: 2.5px solid var(--wp--preset--color--azure);
	outline-offset: 3px;
}

/* ============================================================
   En-tête
   ============================================================ */
.acs-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--wp--preset--color--ground) 86%, transparent);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--acs-line);
}
.acs-header .wp-block-site-logo img {
	width: 150px;
	height: auto;
}
.acs-nav {
	font-weight: 600;
}
.acs-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink-soft);
}
.acs-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--ink);
}
.acs-phone {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	font-size: 0.92rem;
	margin: 0;
}
.acs-phone a { color: var(--wp--preset--color--ink); text-decoration: none; }

/* ============================================================
   Hero
   ============================================================ */
.acs-hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(90% 120% at 88% -10%, rgba(28, 121, 198, 0.55), transparent 55%),
		radial-gradient(70% 90% at 3% 105%, rgba(40, 62, 143, 0.5), transparent 60%),
		linear-gradient(160deg, var(--wp--preset--color--navy), #0c1330);
}
.acs-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 42px);
	pointer-events: none;
}
.acs-hero > * { position: relative; z-index: 1; }
.acs-hero .acs-eyebrow { color: rgba(233, 240, 248, 0.8); }
.acs-hero h1 { color: #fff; }
.acs-hero h1 .acs-cool { color: var(--wp--preset--color--azure-light); }
.acs-hero h1 .acs-warm { color: #86c4f4; }
.acs-hero .acs-lead { color: rgba(233, 240, 248, 0.82); }
.acs-hero .acs-trust {
	color: rgba(233, 240, 248, 0.82);
	font-size: 0.92rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-top: 1.4rem;
}
.acs-hero .acs-trust strong { color: #fff; }
.acs-stars { color: var(--wp--preset--color--azure-light); letter-spacing: 2px; }

/* Jauges « instrument » */
.acs-gauge {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--acs-radius);
	padding: 1.4rem 1.5rem;
}
.acs-gauge .acs-gauge__lbl {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(233, 240, 248, 0.78);
	margin: 0;
}
.acs-gauge .acs-gauge__val {
	font-weight: 800;
	font-size: 2.6rem;
	line-height: 1;
	margin: 0.5rem 0 0.3rem;
	color: var(--wp--preset--color--azure-light);
	font-variant-numeric: tabular-nums;
}
.acs-gauge .acs-gauge__sub {
	font-size: 0.88rem;
	color: rgba(233, 240, 248, 0.78);
	margin: 0;
}

/* ============================================================
   Deux pôles
   ============================================================ */
.acs-pole {
	border: 1px solid var(--acs-line);
	border-radius: var(--acs-radius);
	overflow: hidden;
	background: var(--wp--preset--color--white);
	box-shadow: var(--acs-shadow);
	height: 100%;
}
.acs-pole__media {
	min-height: 180px;
	position: relative;
}
.acs-pole--clim .acs-pole__media {
	background:
		radial-gradient(120% 90% at 82% 8%, rgba(255, 255, 255, 0.22), transparent 60%),
		repeating-linear-gradient(116deg, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px 24px),
		linear-gradient(140deg, #3550ad, #182a5e);
}
.acs-pole--solar .acs-pole__media {
	background-color: #131f47;
	background-image:
		radial-gradient(90% 70% at 15% 10%, rgba(92, 176, 240, 0.38), transparent 55%),
		repeating-linear-gradient(0deg, rgba(150, 175, 235, 0.2) 0 1px, transparent 1px 30px),
		repeating-linear-gradient(90deg, rgba(150, 175, 235, 0.2) 0 1px, transparent 1px 44px),
		linear-gradient(140deg, #1e2e69, #0c1330);
}
.acs-pole__kicker {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0;
}
.acs-pole--clim .acs-pole__kicker { color: var(--wp--preset--color--azure); }
.acs-pole--solar .acs-pole__kicker { color: var(--wp--preset--color--royal); }
.acs-pole__link { font-weight: 700; text-decoration: none; }

/* ============================================================
   Pourquoi + marques
   ============================================================ */
.acs-why-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--acs-line);
	border-radius: var(--acs-radius);
	height: 100%;
}
.acs-why-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--azure);
	font-weight: 700;
	margin: 0;
}
.acs-brands {
	border-top: 1px solid var(--acs-line);
}
.acs-brands p {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	letter-spacing: 0.12em;
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink-soft);
	text-transform: uppercase;
	margin: 0;
	opacity: 0.85;
}

/* ============================================================
   Réalisations (grille + filtres)
   ============================================================ */
.acs-filters { flex-wrap: wrap; }
.acs-filter .wp-block-button__link,
.acs-filter {
	font-weight: 600;
	font-size: 0.92rem;
	padding: 0.5rem 1.05rem;
	border-radius: 99px;
	border: 1.5px solid var(--acs-line);
	background: transparent;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}
.acs-filter:hover { color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink-soft); }
.acs-filter.is-active {
	background: var(--wp--preset--color--navy);
	color: #fff;
	border-color: var(--wp--preset--color--navy);
}

.acs-rea-card {
	border: 1px solid var(--acs-line);
	border-radius: var(--acs-radius);
	overflow: hidden;
	background: var(--wp--preset--color--white);
	box-shadow: var(--acs-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	height: 100%;
}
.acs-rea-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(20, 31, 71, 0.35); }
.acs-rea-media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	/* Placeholder branché tant qu'il n'y a pas de photo client */
	background:
		radial-gradient(90% 70% at 15% 10%, rgba(92, 176, 240, 0.35), transparent 55%),
		linear-gradient(140deg, #1e2e69, #0c1330);
}
.acs-rea-media .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}
.acs-rea-media .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.acs-rea-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
	padding: 0.3rem 0.6rem;
	border-radius: 6px;
	background: var(--wp--preset--color--royal);
	color: #fff;
}
.acs-rea-badge a { color: #fff; text-decoration: none; }
.acs-rea-loc {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--azure);
	font-weight: 600;
	margin: 0;
}
.acs-rea-loc a { text-decoration: none; }

/* ============================================================
   Avis
   ============================================================ */
.acs-avis-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--acs-line);
	border-radius: var(--acs-radius);
	height: 100%;
}
.acs-avis-card .acs-quote { margin: 0; font-size: 1.02rem; }
.acs-avis-who {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}

/* ============================================================
   Zone d'intervention
   ============================================================ */
.acs-zone-tags { flex-wrap: wrap; }
.acs-zone-tags .acs-tag { font-size: 0.85rem; padding: 0.45rem 0.9rem; }
.acs-zone-tags .acs-tag.is-hot {
	border-color: var(--wp--preset--color--azure);
	color: var(--wp--preset--color--azure);
}

/* ============================================================
   CTA final
   ============================================================ */
.acs-cta {
	color: #fff;
	background:
		radial-gradient(80% 130% at 90% 0%, rgba(28, 121, 198, 0.5), transparent 55%),
		linear-gradient(150deg, var(--wp--preset--color--navy), #0c1330);
	text-align: center;
}
.acs-cta h2 { color: #fff; }
.acs-cta .acs-lead { color: rgba(233, 240, 248, 0.82); }
.acs-cta .acs-phone-lg {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	font-size: 1.05rem;
	color: #fff;
	text-decoration: none;
}

/* ============================================================
   Pied de page
   ============================================================ */
.acs-footer {
	color: rgba(233, 240, 248, 0.78);
	background: #0c1330;
}
.acs-footer .wp-block-site-logo img {
	width: 168px;
	height: auto;
	filter: brightness(0) invert(1);
}
.acs-footer h2, .acs-footer h3, .acs-footer strong { color: #fff; }
.acs-footer .acs-foot-col-title {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	font-weight: 700;
	margin: 0 0 0.6rem;
}
.acs-footer a { color: rgba(233, 240, 248, 0.78); text-decoration: none; }
.acs-footer a:hover { color: #fff; }
.acs-foot-legal {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.82rem;
}

/* ============================================================
   Pages internes (contenu Divi encore présent = à migrer)
   ============================================================ */
.acs-page-content { padding-block: var(--wp--preset--spacing--60); }

/* ============================================================
   Réductions de mouvement
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.acs-rea-card { transition: none; }
}