/* =====================================================================
   Cremagest — HOME v2 « sérénité éprouvée » (2026-10-05)
   Chargée sur la page d'accueil seulement (functions.php). Le contenu est
   généré par migration/01-home.py et posé par migration/23-home-v2.py.
   Hooks stables : classes cg-* (jamais d'ID de post, jamais metadata.name).
   ===================================================================== */

:root {
	--cg-ivory: #fbf7f0;
	--cg-sand: #f3eadc;
	--cg-line: #e6dccb;
	--cg-ink: #1e1e1e;
	--cg-muted: #5c564e;   /* 7:1 sur ivoire */
	--cg-ember: #a85a05;   /* orange profond : 4.9:1 sur ivoire (lisible même en petit) */
	--cg-radius-xl: 28px;
}

/* Sections pleine largeur jointives (pas de bande blanche entre deux fonds) */
.home .entry-content > .alignfull { margin-block: 0 !important; }
.is-style-cg-cta h2 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }

/* Titres de section : plus d'ampleur que le preset x-large */
.is-style-cg-proof h2,
.is-style-cg-europe h2,
.is-style-cg-why h2,
.is-style-cremagest-capabilities h2,
.is-style-cg-cta h2 {
	font-size: clamp(32px, 3.6vw, 46px) !important;
	line-height: 1.12;
}

/* ---------------------------------------------------------------------
   1. HERO — texte | photo + écran produit + preuve flottante
   --------------------------------------------------------------------- */
.is-style-cremagest-dark:has(.cg-hero-cols) {
	background:
		radial-gradient(55% 70% at 88% 28%, rgba(245, 146, 11, 0.16), transparent 62%),
		radial-gradient(40% 50% at 8% 95%, rgba(245, 169, 59, 0.08), transparent 70%),
		linear-gradient(135deg, #232325 0%, #2a2622 100%);
}
/* Neutralise le cadre décoratif de l'ancien hero (reskin.css §12) */
.is-style-cremagest-dark .cg-hero-cols > .wp-block-column:last-child::before { display: none !important; }

.cg-hero-cols h2 {
	font-size: clamp(38px, 4.6vw, 60px) !important;
	line-height: 1.06;
	font-weight: 500;
	margin-bottom: 0.45em;
}
.cg-hero-cols h2 em { color: var(--wp--preset--color--brand-light); }
.cg-hero-cols .has-medium-font-size:not(.is-style-cremagest-badge) {
	font-size: 18px !important;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82) !important;
	max-width: 52ch;
}

.cg-hero-media {
	position: relative;
	padding: 34px 0 64px 0;
}
/* Fenêtre applicative : vidéo du produit (poster = planning réel d'Uccle) */
.cg-hero-app {
	position: relative;
	z-index: 1;
	margin: 0 0 0 40px !important;
	padding-top: 30px;                 /* barre de fenêtre */
	background: #f4f1ec;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.cg-hero-app::before {                  /* les 3 pastilles de fenêtre */
	content: "";
	position: absolute;
	top: 11px;
	left: 16px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #e46a5e;
	box-shadow: 15px 0 0 #e8b34b, 30px 0 0 #6cc070;
}
.cg-hero-app video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: left top;
	background: #fff;
}
/* Carte « agenda » en surimpression (profondeur, 2e preuve produit) */
.cg-hero-card {
	position: absolute !important;
	z-index: 2;
	left: 0;
	bottom: 0;
	width: 38%;
	margin: 0 !important;
}
.cg-hero-card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: left top;
	border-radius: 12px;
	border: 5px solid #fff;
	box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
	background: #fff;
}
/* La preuve forte, visible dès l'arrivée */
.is-style-cremagest-dark p.cg-hero-chip {
	z-index: 3;
	position: absolute;
	top: 0;
	right: -10px;
	margin: 0;
	padding: 11px 18px 11px 40px;
	background: #fff;
	color: var(--cg-ink) !important;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}
.cg-hero-chip::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 50%;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--wp--preset--color--positive);
	box-shadow: 0 0 0 5px rgba(46, 158, 106, 0.18);
	transform: translateY(-50%);
}

/* ---------------------------------------------------------------------
   2. PREUVES — chiffres serif en grand + carte des sites clients
   --------------------------------------------------------------------- */
.is-style-cg-proof {
	background:
		radial-gradient(45% 60% at 92% 50%, rgba(245, 169, 59, 0.12), transparent 70%),
		var(--cg-ivory);
	border-top: 1px solid #efe5d5;
}
.cg-lead {
	color: var(--cg-muted) !important;
	font-size: 19px !important;
	line-height: 1.6;
	max-width: 56ch;
}
.cg-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 34px 30px;
}
.cg-stat {
	border-top: 1px solid var(--cg-line);
	padding-top: 16px;
}
.cg-stat h3 {
	font-family: var(--cg-serif);
	font-weight: 500;
	font-size: clamp(40px, 4.2vw, 56px) !important;
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0 0 10px;
	color: var(--cg-ink);
	white-space: nowrap;
}
.cg-stat.cremagest-stat-proof h3 { color: var(--cg-ember); }
.cg-stat p {
	margin: 0;
	color: var(--cg-muted) !important;
	font-size: 15px !important;
	line-height: 1.45;
}
.cg-proof-map { margin: 0 !important; }
.cg-proof-map img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 24px 40px rgba(90, 60, 20, 0.14));
}

/* ---------------------------------------------------------------------
   2b. AMBITION EUROPÉENNE — bande sombre chaude entre preuves et fonctionnalités
   --------------------------------------------------------------------- */
.is-style-cg-europe {
	background:
		radial-gradient(50% 80% at 90% 10%, rgba(245, 146, 11, 0.18), transparent 65%),
		linear-gradient(135deg, #24201c 0%, #2e2924 100%);
	color: #fff;
}
.is-style-cg-europe h2 { color: #fff; }
.is-style-cg-europe .cg-lead { color: rgba(255, 255, 255, 0.82) !important; }
.is-style-cg-europe .is-style-cremagest-eyebrow { color: var(--wp--preset--color--brand-light) !important; }
.cg-eu-label {
	margin: 26px 0 10px !important;
	color: rgba(255, 255, 255, 0.6) !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px !important;
}
.cg-lang-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.is-style-cg-europe a.cg-lang-chip {
	display: inline-block;
	padding: 9px 16px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	color: #fff !important;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}
.is-style-cg-europe a.cg-lang-chip:hover,
.is-style-cg-europe a.cg-lang-chip:focus-visible {
	background: rgba(245, 146, 11, 0.16);
	border-color: var(--wp--preset--color--brand-light);
}

/* ---------------------------------------------------------------------
   3. CAPABILITIES — inchangé (reskin.css), simple respiration
   --------------------------------------------------------------------- */
.is-style-cremagest-capabilities .cremagest-pillar-desc { font-size: 15px; line-height: 1.55; }

/* ---------------------------------------------------------------------
   4. POURQUOI — photo | 4 engagements numérotés
   --------------------------------------------------------------------- */
.is-style-cg-why {
	background: linear-gradient(180deg, #ffffff 0%, var(--cg-sand) 100%);
}
.cg-why-cols { align-items: stretch !important; }
.cg-why-photo { margin: 0 !important; height: 100%; }
.cg-why-photo img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 540px;
	object-fit: cover;
	object-position: 90% 62%;   /* collines au matin : horizon + prairie fleurie */
	border-radius: var(--cg-radius-xl);
	box-shadow: 0 24px 60px rgba(70, 50, 20, 0.18);
}
.cg-why-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 38px 44px;
}
.cg-why-item {
	border-top: 1px solid #e0d2bc;
	padding-top: 18px;
}
.cg-why-num {
	font-family: var(--cg-serif);
	font-style: italic;
	font-size: 24px;
	line-height: 1;
	color: var(--cg-ember);
	margin: 0 0 12px !important;
}
.cg-why-item h3 {
	font-size: 20px !important;
	line-height: 1.3;
	margin: 0 0 8px;
}
.cg-why-desc {
	margin: 0;
	color: var(--cg-muted) !important;
	font-size: 16px !important;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------
   5. CTA — pleine largeur sur photo (aube sur les collines)
   --------------------------------------------------------------------- */
.is-style-cg-cta {
	background:
		linear-gradient(180deg, rgba(22, 17, 12, 0.28) 0%, rgba(22, 17, 12, 0.5) 45%, rgba(22, 17, 12, 0.72) 100%),
		url("../img/photos/aube-collines.webp") center 30% / cover no-repeat;
	padding-top: clamp(80px, 10vw, 140px) !important;
	padding-bottom: clamp(80px, 10vw, 140px) !important;
}
.is-style-cg-cta h2 { color: #fff; }
.is-style-cg-cta p { color: rgba(255, 255, 255, 0.86); }
.is-style-cg-cta .cremagest-fineprint { color: rgba(255, 255, 255, 0.72) !important; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.cg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cg-why-list { grid-template-columns: 1fr; }
}
@media (max-width: 781px) {
	.cg-hero-media { padding: 30px 0 48px 0; margin-top: 12px; }
	.cg-hero-app { margin-left: 18px !important; }
	.cg-hero-card { width: 46%; }
	.is-style-cremagest-dark p.cg-hero-chip { top: 14px; right: 10px; font-size: 13px; }
	.cg-why-photo { height: auto; }
	.cg-why-photo img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
	.cg-stat h3 { font-size: 44px !important; }
	.cg-proof-map img { max-width: 420px; margin: 0 auto; }
}