/* ==========================================================================
   CORRECTIONS CSS - Cavac Theme v6
   Ce fichier contient les corrections critiques et ajustements finaux
   ========================================================================== */

/* ==========================================================================
   1. CORRECTIONS GLOBALES
   ========================================================================== */

html, body {
	max-width: 100vw;
	overflow-x: hidden;
}

body {
	width: 100%;
	box-sizing: border-box;
	background: #fff;
}

.site-content,
.container {
	max-width: 100%;
	overflow-x: hidden;
}

/* ==========================================================================
   2. MEGA MENU Z-INDEX FIX - CRITIQUE
   Force le header et mega-menu AU-DESSUS de TOUT le contenu
   ========================================================================== */

/* 
 * SOLUTION: Le mega menu doit être en position FIXED avec z-index très élevé
 * pour s'afficher au-dessus de tout, indépendamment du stacking context du header.
 * On retire isolation:isolate qui emprisonnait le menu.
 */

/* Header doit être au-dessus de tout SAUF la barre admin WordPress */
body .site-header,
html body .site-header,
.site-header {
	z-index: 99998 !important; /* Sous la barre admin WP (99999) */
	background: #fff;
}

/* Quand pas de barre admin, z-index max */
body:not(.admin-bar) .site-header {
	z-index: 999999 !important;
}

/* Header sticky = fixed */
.site-header.is-sticky {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
}

/* WordPress admin bar ajustement */
body.admin-bar .site-header.is-sticky {
	top: 32px !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header.is-sticky {
		top: 46px !important;
	}
}

/* ==========================================================================
   MEGA MENU - POSITION FIXED POUR SORTIR DU HEADER
   ========================================================================== */

/* Mega menu panels - FIXED avec z-index TRÈS élevé */
.mega-menu-panel,
.mega-menu-dropdown,
.site-header .mega-menu-panel,
.site-header .mega-menu-dropdown,
body .mega-menu-panel,
body .mega-menu-dropdown,
html body .mega-menu-panel {
	position: fixed !important;
	top: var(--header-height, 80px) !important;
	left: 0 !important;
	right: 0 !important;
	width: 100vw !important;
	z-index: 99999999 !important; /* Plus élevé que tout */
	background: #fff !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
	border-top: 1px solid var(--cavac-gris-100, #f3f4f6);
}

/* Ajustement avec header scrollé (réduit) */
.site-header.is-scrolled .mega-menu-panel,
.site-header.is-scrolled .mega-menu-dropdown {
	top: var(--header-height-scrolled, 64px) !important;
}

/* Ajustement avec admin bar */
body.admin-bar .mega-menu-panel,
body.admin-bar .mega-menu-dropdown {
	top: calc(var(--header-height, 80px) + 32px) !important;
}

body.admin-bar .site-header.is-scrolled .mega-menu-panel,
body.admin-bar .site-header.is-scrolled .mega-menu-dropdown {
	top: calc(var(--header-height-scrolled, 64px) + 32px) !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar .mega-menu-panel,
	body.admin-bar .mega-menu-dropdown {
		top: calc(var(--header-height, 80px) + 46px) !important;
	}
}

/* S'assurer que le mega menu est visible quand actif */
.mega-menu-item.is-active .mega-menu-panel,
.mega-menu-item:hover .mega-menu-panel,
.mega-menu-panel.is-visible,
.mega-menu-panel[aria-hidden="false"] {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* Sous-menus classiques (pas mega) */
.nav-menu--primary .sub-menu:not(.mega-menu-panel),
.mega-menu .sub-menu:not(.mega-menu-panel) {
	z-index: 99999998 !important;
	position: absolute !important;
	background: #fff !important;
}

/* FORCER tout le contenu main à être SOUS le header */
/* Réinitialiser les z-index pour éviter les conflits de stacking */
main,
main.site-content,
.site-content,
#main-content,
#content,
.page-content {
	position: relative !important;
	z-index: 1 !important;
}

/* Sections individuelles - pas de z-index qui créerait un stacking context */
article,
.hero,
.hero-fullscreen,
.cta-section,
.bg-gradient-primary,
.section,
section:not(.cta-section) {
	position: relative;
	z-index: auto !important;
}

/* Les blobs décoratifs ne doivent pas avoir de z-index élevé */
.blob {
	z-index: -1 !important;
}

/* Éviter que les sections avec animations créent des problèmes */
main section,
main .section,
main article {
	isolation: auto !important;
}

/* ==========================================================================
   SECTIONS FLUIDES - CHEVAUCHEMENT HARMONIEUX
   ========================================================================== */

/* 
 * OBJECTIF : Les sections se chevauchent avec des transitions fluides (vagues)
 * au lieu de créer des rectangles visibles.
 */

/* Hero - Plus de padding en bas pour le chevauchement */
.hero,
.hero-fullscreen {
	position: relative;
	z-index: 1;
	padding-bottom: 180px !important; /* Espace pour que la vague chevauche */
	margin-bottom: 0 !important;
}

/* ==========================================================================
   SECTION CHIFFRES CLÉS - Nouvelles vagues
   ========================================================================== */

.section-stats,
.section.section-stats {
	position: relative;
	z-index: 2;
	margin-top: -140px !important;
	padding-top: 60px !important;
	padding-bottom: 80px !important;
	color: var(--cavac-blanc, #fff);
	overflow: visible !important;
}

/* Vague du haut - chevauche le hero */
.section-wave-top-svg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 140px;
	transform: translateY(-99%);
	z-index: 2;
	pointer-events: none;
	overflow: visible;
}

.section-wave-top-svg svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Vague du bas - transition vers section suivante */
.section-wave-bottom-svg {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 80px;
	transform: translateY(99%);
	z-index: 2;
	pointer-events: none;
}

.section-wave-bottom-svg svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Blobs décoratifs des stats */
.blob-stats-1 {
	position: absolute;
	width: 400px;
	height: 400px;
	background: rgba(255, 255, 255, 0.05);
	top: -20%;
	right: -10%;
	border-radius: var(--radius-blob-1, 60% 40% 30% 70%);
	animation: blobMorph1 20s ease-in-out infinite;
	pointer-events: none;
}

.blob-stats-2 {
	position: absolute;
	width: 300px;
	height: 300px;
	background: rgba(255, 255, 255, 0.08);
	bottom: -15%;
	left: -5%;
	border-radius: var(--radius-blob-2, 40% 60% 70% 30%);
	animation: blobMorph2 25s ease-in-out infinite;
	pointer-events: none;
}

/* Stats grid */
.stats-grid {
	display: grid;
	gap: var(--space-8, 2rem);
	text-align: center;
}

.stats-grid.grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.stats-grid.grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
	.stats-grid.grid-3,
	.stats-grid.grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.stats-grid.grid-3,
	.stats-grid.grid-4 {
		grid-template-columns: 1fr;
	}
}

/* Stat cards dans section stats */
.section-stats .stat-card {
	background: transparent;
	padding: var(--space-6, 1.5rem);
}

.section-stats .stat-number {
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 700;
	color: var(--cavac-blanc, #fff);
	line-height: 1;
	margin-bottom: var(--space-2, 0.5rem);
}

.section-stats .stat-label {
	font-size: var(--text-sm, 0.875rem);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   SECTION APRÈS CHIFFRES CLÉS
   ========================================================================== */

/* Section Introduction - absorbe la vague du bas */
.section-stats + .section,
.section.section-stats + .section {
	position: relative;
	z-index: 3;
	margin-top: 40px !important; /* Laisse la vague visible */
	padding-top: var(--space-16, 4rem) !important;
}

/* ==========================================================================
   ESPACEMENTS HARMONIEUX
   ========================================================================== */

/* Sections standard - plus d'espace vertical */
.section {
	padding-top: var(--space-16, 4rem) !important;
	padding-bottom: var(--space-16, 4rem) !important;
}

/* Réduire si section suivante est colorée */
.section + .section.bg-cream,
.section + .section.bg-mint {
	margin-top: -40px;
}

/* Sections colorées - vague subtile en haut */
.section.bg-cream,
.section.bg-mint {
	position: relative;
}

.section.bg-cream::before,
.section.bg-mint::before {
	content: '';
	position: absolute;
	top: -40px;
	left: 0;
	right: 0;
	height: 80px;
	background: inherit;
	clip-path: ellipse(70% 60% at 50% 100%);
	z-index: -1;
}

/* Pas de scroll horizontal à cause des vagues */
body {
	overflow-x: hidden !important;
}

main.site-content {
	overflow-x: hidden !important;
	overflow-y: visible !important;
}

/* ==========================================================================
   3. FOOTER FIX - Suppression du bandeau vert
   ========================================================================== */

/* Le wrapper de page doit être blanc */
#page,
.site,
body {
	background: #fff !important;
}

/* SOLUTION : Zone blanche AVANT le footer via pseudo-élément */
.site-footer {
	position: relative !important;
	z-index: 10 !important;
	margin-top: 0 !important;
}

/* Créer une zone blanche au-dessus du footer */
.site-footer::before {
	content: '';
	position: absolute;
	top: -80px;
	left: 0;
	right: 0;
	height: 80px;
	background: #fff;
	z-index: -1;
}

/* La wave du footer DOIT avoir un fond blanc */
.footer-wave {
	background: #fff !important;
	position: relative;
	z-index: 1;
}

/* Supprimer le ::before de la wave (doublon) */
.footer-wave::before {
	display: none !important;
}

/* EXCEPTION : Quand CTA vert est juste avant le footer */
/* On ajoute une classe via JS ou on gère via le template */
.site-footer.footer-after-cta::before {
	display: none;
}

.site-footer.footer-after-cta .footer-wave {
	display: none !important;
}

/* Footer sans wave - suppression du bandeau vert */
.site-footer.footer-no-wave::before {
	display: none !important;
}

.site-footer.footer-no-wave {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.site-footer.footer-no-wave .footer-main {
	padding-top: var(--space-10, 2.5rem) !important;
}

/* CTA qui précède le footer - s'assurer qu'il colle */
.cta-section,
.cta-before-footer {
	margin-bottom: 0 !important;
	padding-bottom: var(--space-16, 4rem) !important;
	position: relative;
	z-index: 2 !important;
}

/* Quand on est sur la home, forcer le footer à coller */
body.home .site-footer::before,
body.page-template-front-page .site-footer::before {
	display: none;
}

body.home .footer-wave,
body.page-template-front-page .footer-wave {
	display: none !important;
}

/* ==========================================================================
   4. HOME PAGE - SUPPRESSION DES BANDES BLANCHES
   ========================================================================== */

/* Toutes les sections de la home doivent se coller */
body.home main.site-content,
body.page-template-front-page main.site-content {
	display: flex;
	flex-direction: column;
}

body.home section,
body.home .section,
body.page-template-front-page section,
body.page-template-front-page .section {
	margin: 0 !important;
	padding-top: 0;
	padding-bottom: 0;
}

/* Les sections avec background coloré gardent leur padding interne */
body.home .bg-gradient-primary,
body.home .bg-cream,
body.home .bg-mint,
body.home .bg-white,
body.home .cta-section,
body.page-template-front-page .bg-gradient-primary,
body.page-template-front-page .bg-cream,
body.page-template-front-page .bg-mint,
body.page-template-front-page .bg-white,
body.page-template-front-page .cta-section {
	padding-top: var(--space-16, 4rem) !important;
	padding-bottom: var(--space-16, 4rem) !important;
}

/* Hero ne doit pas avoir de marge */
body.home .hero,
body.home .hero-fullscreen,
body.page-template-front-page .hero,
body.page-template-front-page .hero-fullscreen {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* Section chiffres clés - coller au hero */
body.home .bg-gradient-primary,
body.page-template-front-page .bg-gradient-primary {
	margin-top: 0 !important;
}

/* Sections sans fond - ajouter fond blanc explicite */
body.home section:not([class*="bg-"]):not(.hero):not(.cta-section),
body.page-template-front-page section:not([class*="bg-"]):not(.hero):not(.cta-section) {
	background-color: #fff !important;
	padding-top: var(--space-16, 4rem) !important;
	padding-bottom: var(--space-16, 4rem) !important;
}

/* Supprimer les pseudo-éléments après le main sur la home */
body.home main.site-content::after,
body.page-template-front-page main.site-content::after {
	display: none !important;
}

/* ==========================================================================
   5. SECTION "5 PÔLES D'ACTIVITÉS" - CARDS ELEVATED
   ========================================================================== */

/* Cibler la section des pôles via une classe spécifique */
.poles-section,
.section-poles,
section[data-section="poles"] {
	background: #fff;
}

/* Grille des pôles */
.poles-grid,
.grid-poles {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-6, 1.5rem);
}

@media (max-width: 1200px) {
	.poles-grid,
	.grid-poles {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.poles-grid,
	.grid-poles {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.poles-grid,
	.grid-poles {
		grid-template-columns: 1fr;
	}
}

/* Cards des pôles - Style ELEVATED du design system */
.poles-grid .card,
.grid-poles .card,
.card-pole,
.pole-card {
	background: #fff;
	border-radius: var(--radius-xl, 16px);
	box-shadow: 
		0 4px 6px -1px rgba(0, 0, 0, 0.07),
		0 10px 15px -3px rgba(0, 0, 0, 0.08),
		0 20px 25px -5px rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.04);
	padding: 0;
	text-align: center;
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	position: relative;
	overflow: hidden;
}

.card-pole .card-body {
	padding: var(--space-8, 2rem) var(--space-6, 1.5rem);
}

.card-pole .card-text {
	color: var(--cavac-gris-600, #4b5563);
	font-size: var(--text-sm, 0.875rem);
	line-height: 1.5;
	margin-bottom: var(--space-4, 1rem);
}

.card-pole .badge {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: var(--space-3, 0.75rem);
}

/* Effet hover elevated */
.poles-grid .card:hover,
.grid-poles .card:hover,
.card-pole:hover,
.pole-card:hover {
	transform: translateY(-8px);
	box-shadow: 
		0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 25px 50px -12px rgba(0, 0, 0, 0.15),
		0 35px 60px -15px rgba(0, 0, 0, 0.1);
}

/* Icônes des pôles */
.poles-grid .feature-icon,
.grid-poles .feature-icon,
.card-pole .feature-icon,
.pole-card .feature-icon {
	width: 80px;
	height: 80px;
	border-radius: 60% 40% 70% 30%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto var(--space-5, 1.25rem);
	transition: transform 0.3s ease, border-radius 0.5s ease;
}

.poles-grid .card:hover .feature-icon,
.grid-poles .card:hover .feature-icon,
.card-pole:hover .feature-icon,
.pole-card:hover .feature-icon {
	transform: scale(1.1) rotate(5deg);
	border-radius: 40% 60% 30% 70%;
}

/* SVG en blanc */
.poles-grid .feature-icon svg,
.grid-poles .feature-icon svg,
.card-pole .feature-icon svg,
.pole-card .feature-icon svg {
	width: 36px;
	height: 36px;
	stroke: #fff;
	stroke-width: 1.5;
}

/* ==========================================================================
   6. PAGE THUMBNAIL CENTRAGE
   ========================================================================== */

.page-thumbnail,
.post-thumbnail,
.entry-thumbnail {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto var(--space-8, 2rem);
	max-width: 100%;
}

.page-thumbnail img,
.post-thumbnail img,
.entry-thumbnail img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-lg, 12px);
}

/* ==========================================================================
   7. ESPACEMENTS GÉNÉRAUX
   ========================================================================== */

/* Titres (hors home) */
body:not(.home):not(.page-template-front-page) h1,
body:not(.home):not(.page-template-front-page) h2,
body:not(.home):not(.page-template-front-page) h3,
body:not(.home):not(.page-template-front-page) h4,
body:not(.home):not(.page-template-front-page) h5,
body:not(.home):not(.page-template-front-page) h6 {
	margin-top: var(--space-8, 2rem);
	margin-bottom: var(--space-4, 1rem);
}

body:not(.home):not(.page-template-front-page) h1:first-child,
body:not(.home):not(.page-template-front-page) h2:first-child,
body:not(.home):not(.page-template-front-page) h3:first-child,
body:not(.home):not(.page-template-front-page) h4:first-child {
	margin-top: 0;
}

/* Sections (hors home) */
body:not(.home):not(.page-template-front-page) .section,
body:not(.home):not(.page-template-front-page) section {
	padding-top: var(--space-12, 3rem);
	padding-bottom: var(--space-12, 3rem);
}

/* Paragraphes */
p {
	margin-bottom: var(--space-4, 1rem);
}

p:last-child {
	margin-bottom: 0;
}

/* Listes */
ul, ol {
	margin-bottom: var(--space-4, 1rem);
	padding-left: var(--space-6, 1.5rem);
}

li {
	margin-bottom: var(--space-2, 0.5rem);
}

/* Page headers */
.page-header,
.entry-header {
	margin-bottom: var(--space-10, 2.5rem);
	padding-bottom: var(--space-6, 1.5rem);
	border-bottom: 1px solid var(--cavac-gris-200, #e5e7eb);
}

/* ==========================================================================
   8. PREVIEW WIDGET - Toggle au clic
   ========================================================================== */

/* Bouton flottant */
.cavac-preview-toggle {
	position: fixed !important;
	bottom: 20px !important;
	right: 20px !important;
	width: 50px !important;
	height: 50px !important;
	background: var(--cavac-vert-fonce, #006247) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	z-index: 9998 !important;
	box-shadow: 0 4px 15px rgba(0, 98, 71, 0.3) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 20px !important;
	transition: transform 0.2s, background 0.2s !important;
}

.cavac-preview-toggle:hover {
	transform: scale(1.1) !important;
	background: var(--cavac-vert-clair, #7aba49) !important;
}

.cavac-preview-toggle.is-active {
	background: var(--cavac-corail, #ed694b) !important;
}

/* Widget masqué par défaut */
#cavac-preview-widget {
	position: fixed !important;
	bottom: 80px !important;
	right: 20px !important;
	top: auto !important;
	left: auto !important;
	width: 320px !important;
	max-width: calc(100vw - 40px) !important;
	max-height: 60vh !important;
	overflow: auto !important;
	z-index: 9999 !important;
	background: #fff !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
	font-size: 13px !important;
	display: none !important;
	opacity: 0 !important;
	transform: translateY(20px) !important;
	transition: opacity 0.3s, transform 0.3s !important;
}

#cavac-preview-widget.is-visible {
	display: block !important;
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* Masquer bouton Publier problématique */
#cavac-preview-widget button[type="submit"],
#cavac-preview-widget .preview-publish {
	display: none !important;
}

/* ==========================================================================
   9. MOBILE MENU
   ========================================================================== */

.header-menu-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 1001;
}

@media (max-width: 1024px) {
	.header-menu-toggle {
		display: flex !important;
	}
	
	.mega-menu,
	.nav-menu--primary,
	.header-nav {
		display: none !important;
	}
	
	.mobile-menu.is-open {
		display: block !important;
	}
}

.header-menu-toggle .hamburger {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 24px;
	height: 18px;
}

.header-menu-toggle .hamburger-line {
	display: block;
	height: 2px;
	background-color: var(--cavac-vert-fonce, #006247);
	border-radius: 2px;
	transition: all 0.3s ease;
}

.mobile-menu {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 1000;
	overflow-y: auto;
	padding-top: 80px;
}

.mobile-menu.is-open {
	display: block;
	animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
	from { opacity: 0; transform: translateX(100%); }
	to { opacity: 1; transform: translateX(0); }
}

/* ==========================================================================
   10. MASQUER LE BREADCRUMB
   ========================================================================== */

nav.breadcrumb,
.breadcrumb {
	display: none !important;
}

/* ==========================================================================
   11. RESPONSIVE FIXES
   ========================================================================== */

@media (max-width: 768px) {
	.blob {
		display: none;
	}
	
	.section {
		padding: var(--space-10, 40px) 0;
	}
	
	.hero {
		min-height: 80vh;
	}
	
	.hero-title {
		font-size: var(--text-3xl, 1.875rem);
	}
	
	.grid-2,
	.grid-3,
	.grid-4,
	.grid-5 {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 480px) {
	.hero-title {
		font-size: var(--text-2xl, 1.5rem);
	}
	
	.btn-lg {
		padding: 12px 24px;
		font-size: 14px;
	}
}

/* ==========================================================================
   HOMEPAGE - STYLES ADDITIONNELS
   ========================================================================== */

/* CTA Section Grid */
.cta-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--space-12, 3rem);
	align-items: center;
}

@media (max-width: 900px) {
	.cta-grid {
		grid-template-columns: 1fr;
		text-align: center;
		gap: var(--space-8, 2rem);
	}
}

/* Section Header Flex (titre + bouton alignés) */
.section-header-flex {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: var(--space-6, 1.5rem);
	margin-bottom: var(--space-10, 2.5rem);
}

@media (max-width: 768px) {
	.section-header-flex {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Scroll Down Button */
.scroll-down {
	background: var(--cavac-vert-menthe, #a8d5ba);
	width: 50px;
	height: 50px;
	border-radius: var(--radius-blob-2, 60% 40% 70% 30%);
	border: none;
	cursor: pointer;
	color: var(--cavac-vert-fonce, #2d5a3d);
	transition: all var(--transition-base, 0.3s ease);
	display: flex;
	align-items: center;
	justify-content: center;
}

.scroll-down:hover {
	transform: translateY(4px);
	background: var(--cavac-vert-clair, #4a7c59);
	color: var(--cavac-blanc, #fff);
}

/* Testimonial Avatar Placeholder */
.testimonial-avatar-placeholder {
	background: var(--cavac-vert-clair, #4a7c59);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: var(--cavac-blanc, #fff);
	width: 60px;
	height: 60px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Hero Background Image */
.hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
}

.hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.2;
}

/* Bouton blanc pour CTA */
.btn-white {
	background: var(--cavac-blanc, #fff);
	color: var(--cavac-vert-fonce, #2d5a3d);
	border: none;
}

.btn-white:hover {
	background: var(--cavac-vert-menthe, #a8d5ba);
	color: var(--cavac-vert-fonce, #2d5a3d);
}

/* Bouton XL */
.btn-xl {
	padding: var(--space-4, 1rem) var(--space-8, 2rem);
	font-size: var(--text-lg, 1.125rem);
	min-width: 200px;
	justify-content: center;
}

/* Card Image Link */
.card-image {
	display: block;
	overflow: hidden;
}

.card-image img {
	transition: transform var(--transition-base, 0.3s ease);
}

.card:hover .card-image img {
	transform: scale(1.05);
}

/* ==========================================================================
   BADGES PUBLICATIONS
   ========================================================================== */

.badge-actualite {
	background: var(--cavac-vert-clair, #4a7c59);
	color: var(--cavac-blanc, #fff);
}

.badge-mag {
	background: var(--cavac-jaune, #d4a84b);
	color: var(--cavac-gris-900, #1a1a2e);
}

.badge-communique {
	background: var(--cavac-gris-600, #6b7280);
	color: var(--cavac-blanc, #fff);
}

.badge-numero {
	margin-left: 0.5em;
	opacity: 0.9;
}

.badge-filiere {
	background: var(--cavac-vert-menthe, #a8d5ba);
	color: var(--cavac-vert-fonce, #2d5a3d);
}

/* ==========================================================================
   SECTION S'INSTALLER AVEC CAVAC
   ========================================================================== */

.section-install {
	padding-top: var(--space-16, 4rem);
	padding-bottom: var(--space-16, 4rem);
}

.bg-gradient-subtle {
	background: linear-gradient(180deg, var(--cavac-blanc, #fff) 0%, var(--cavac-vert-menthe, #a8d5ba) 100%);
}

/* CTA Grid */
.install-cta-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6, 1.5rem);
	margin-bottom: var(--space-12, 3rem);
}

@media (max-width: 768px) {
	.install-cta-grid {
		grid-template-columns: 1fr;
	}
}

/* CTA Cards */
.install-cta-card {
	padding: var(--space-8, 2rem);
	border-radius: var(--radius-xl, 1rem);
	text-align: center;
	transition: transform var(--transition-base, 0.3s ease), box-shadow var(--transition-base, 0.3s ease);
}

.install-cta-card:hover {
	transform: translateY(-4px);
}

.install-cta-card-primary {
	background: linear-gradient(135deg, var(--cavac-vert-fonce, #2d5a3d) 0%, var(--cavac-vert-clair, #4a7c59) 100%);
	color: var(--cavac-blanc, #fff);
	box-shadow: 0 10px 40px rgba(45, 90, 61, 0.3);
}

.install-cta-card-primary:hover {
	box-shadow: 0 20px 60px rgba(45, 90, 61, 0.4);
}

.install-cta-card-secondary {
	background: var(--cavac-blanc, #fff);
	color: var(--cavac-gris-900, #1a1a2e);
	border: 2px solid var(--cavac-vert-clair, #4a7c59);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.install-cta-card-secondary:hover {
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.install-cta-icon {
	margin-bottom: var(--space-4, 1rem);
}

.install-cta-card-primary .install-cta-icon {
	color: var(--cavac-vert-menthe, #a8d5ba);
}

.install-cta-card-secondary .install-cta-icon {
	color: var(--cavac-vert-clair, #4a7c59);
}

.install-cta-card h3 {
	font-size: var(--text-xl, 1.25rem);
	font-weight: var(--font-bold, 700);
	margin-bottom: var(--space-3, 0.75rem);
}

.install-cta-card p {
	margin-bottom: var(--space-6, 1.5rem);
	opacity: 0.9;
	line-height: 1.6;
}

/* Offres de reprise */
.install-reprises {
	background: var(--cavac-blanc, #fff);
	border-radius: var(--radius-xl, 1rem);
	padding: var(--space-8, 2rem);
	margin-bottom: var(--space-10, 2.5rem);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.install-reprises-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-4, 1rem);
	margin-bottom: var(--space-6, 1.5rem);
	padding-bottom: var(--space-4, 1rem);
	border-bottom: 1px solid var(--cavac-gris-200, #e5e7eb);
}

.install-reprises-header h3 {
	display: flex;
	align-items: center;
	gap: var(--space-2, 0.5rem);
	font-size: var(--text-lg, 1.125rem);
	font-weight: var(--font-semibold, 600);
	color: var(--cavac-vert-fonce, #2d5a3d);
	margin: 0;
}

.install-reprises-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-4, 1rem);
}

/* Reprise Card */
.reprise-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-5, 1.25rem);
	background: var(--cavac-gris-50, #f9fafb);
	border-radius: var(--radius-lg, 0.75rem);
	border: 1px solid var(--cavac-gris-200, #e5e7eb);
	text-decoration: none;
	color: inherit;
	transition: all var(--transition-base, 0.3s ease);
}

.reprise-card:hover {
	border-color: var(--cavac-vert-clair, #4a7c59);
	background: var(--cavac-blanc, #fff);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.reprise-card-header {
	margin-bottom: var(--space-2, 0.5rem);
}

.reprise-card-title {
	font-size: var(--text-base, 1rem);
	font-weight: var(--font-semibold, 600);
	color: var(--cavac-gris-900, #1a1a2e);
	margin: 0 0 var(--space-3, 0.75rem);
	line-height: 1.4;
}

.reprise-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3, 0.75rem);
	margin-bottom: var(--space-3, 0.75rem);
}

.reprise-meta-item {
	display: flex;
	align-items: center;
	gap: var(--space-1, 0.25rem);
	font-size: var(--text-sm, 0.875rem);
	color: var(--cavac-gris-600, #6b7280);
}

.reprise-card-link {
	display: flex;
	align-items: center;
	gap: var(--space-1, 0.25rem);
	margin-top: auto;
	font-size: var(--text-sm, 0.875rem);
	font-weight: var(--font-medium, 500);
	color: var(--cavac-vert-clair, #4a7c59);
}

.reprise-card:hover .reprise-card-link {
	color: var(--cavac-vert-fonce, #2d5a3d);
}

/* Filières */
.install-filieres {
	text-align: center;
}

.install-filieres-title {
	font-size: var(--text-lg, 1.125rem);
	font-weight: var(--font-semibold, 600);
	color: var(--cavac-vert-fonce, #2d5a3d);
	margin-bottom: var(--space-6, 1.5rem);
}

.install-filieres-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3, 0.75rem);
}

/* Filière Tag */
.filiere-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2, 0.5rem);
	padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
	background: var(--cavac-blanc, #fff);
	border: 2px solid var(--filiere-color, var(--cavac-vert-clair));
	border-radius: var(--radius-full, 9999px);
	text-decoration: none;
	color: var(--cavac-gris-800, #374151);
	font-size: var(--text-sm, 0.875rem);
	font-weight: var(--font-medium, 500);
	transition: all var(--transition-base, 0.3s ease);
}

.filiere-tag:hover {
	background: var(--filiere-color, var(--cavac-vert-clair));
	color: var(--cavac-blanc, #fff);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.filiere-icon {
	font-size: 1.1em;
}

.filiere-count {
	background: var(--filiere-color, var(--cavac-vert-clair));
	color: var(--cavac-blanc, #fff);
	font-size: var(--text-xs, 0.75rem);
	padding: 2px 8px;
	border-radius: var(--radius-full, 9999px);
	font-weight: var(--font-semibold, 600);
}

.filiere-tag:hover .filiere-count {
	background: rgba(255, 255, 255, 0.3);
}