:root {
 --primary-color: #22c55e; /* Vert Forêt */
 --primary-dark: #16a34a; /* Un vert plus foncé */
 --secondary-color: #fbbf24; /* Jaune moutarde pour accent */
 --text-dark: #222222;
 --text-light: #444444;
 --text-muted: #666666;
 --bg-light: #f5f5f4; /* Sable Clair */
 --bg-white: #ffffff;
 --bg-dark: #3f3f46; /* Gris Anthracite */
 --border-color: #e5e7eb;
 --shadow-sm: 0 4px 10px rgba(0,0,0,0.05);
 --shadow-md: 0 8px 20px rgba(0,0,0,0.1);
 --shadow-lg: 0 12px 30px rgba(0,0,0,0.15);
 --radius-sm: 8px;
 --radius-md: 12px;
 --radius-lg: 16px;
 --transition: all 0.3s ease-in-out;
 --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

 /* Gradient Flow specific */
 --gradient-start: #6a11cb;
 --gradient-mid: #2575fc;
 --gradient-end: #4949e2;
 --glass-bg: rgba(255, 255, 255, 0.15);
 --glass-border: rgba(255, 255, 255, 0.3);
}

/* Base Reset & Typography */
*, *::before, *::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

html {
 scroll-behavior: smooth;
}

body {
 font-family: var(--font-main);
 font-size: 16px;
 line-height: 1.6;
 color: var(--text-dark);
 background: var(--bg-white);
 -webkit-font-smoothing: antialiased;
 overflow-x: hidden; /* Prevent horizontal scroll */
}

h1, h2, h3, h4, h5, h6 {
 font-weight: 700;
 line-height: 1.2;
 color: var(--text-dark);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }

a {
 color: var(--primary-color);
 text-decoration: none;
 transition: var(--transition);
}

a:hover {
 color: var(--primary-dark);
}

/* Global Centering & Section Structure */
.container, .section-inner, .page-container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 16px; /* Mobile default */
}

@media (min-width: 768px) {
 .container, .section-inner, .page-container {
 padding: 0 24px;
 }
}

section {
 padding: clamp(48px, 8vw, 96px) 0;
 position: relative;
 z-index: 1;
}

section.light {
 background: var(--bg-light);
}

section.dark {
 background: var(--bg-dark);
 color: #f5f5f5;
}

.section-header {
 text-align: center;
 max-width: 700px;
 margin: 0 auto clamp(30px, 5vw, 60px);
}

.section-label {
 display: inline-block;
 background: var(--primary-color);
 color: white;
 padding: 6px 16px;
 border-radius: 20px;
 font-size: 0.85rem;
 font-weight: 600;
 margin-bottom: 16px;
}

.section-title {
 font-size: clamp(1.8rem, 4vw, 2.5rem);
 font-weight: 700;
 margin-bottom: 16px;
 color: inherit;
}

.section-subtitle {
 font-size: 1.1rem;
 color: var(--text-muted);
 line-height: 1.6;
}
.dark .section-subtitle, .dark .section-title {
 color: #e0e0e0;
}
.dark .section-label {
 background: var(--secondary-color);
}

/* Header */
.header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 1000;
 background: rgba(255, 255, 255, 0.1); /* Transparent over hero */
 backdrop-filter: blur(10px);
 box-shadow: none; /* No shadow initially */
 transition: var(--transition);
}

.header.scrolled {
 background: rgba(255, 255, 255, 0.95);
 box-shadow: var(--shadow-sm);
}

.nav {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 20px;
 height: 70px;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.nav-logo {
 font-size: 1.5rem;
 font-weight: 700;
 color: white; /* White initially over dark hero */
 transition: var(--transition);
}

.header.scrolled .nav-logo {
 color: var(--text-dark); /* Dark when scrolled */
}

.nav-links {
 display: none; /* Hidden by default on mobile */
 gap: 32px;
 list-style: none;
}

@media (min-width: 768px) {
 .nav-links {
 display: flex;
 }
}

.nav-links a {
 font-weight: 500;
 color: white; /* White initially */
 padding: 8px 0;
 position: relative;
}

.header.scrolled .nav-links a {
 color: var(--text-dark); /* Dark when scrolled */
}

.nav-links a::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 0;
 height: 2px;
 background: white; /* White for hero */
 transition: var(--transition);
}

.header.scrolled .nav-links a::after {
 background: var(--primary-color); /* Primary color when scrolled */
}

.nav-links a:hover::after,
.nav-links a.active::after {
 width: 100%;
}

/* Mobile menu button */
.nav-toggle {
 display: block; /* Visible by default on mobile */
 background: none;
 border: none;
 cursor: pointer;
 padding: 8px;
 z-index: 1001; /* Ensure it's above other content when open */
}

@media (min-width: 768px) {
 .nav-toggle {
 display: none; /* Hidden on larger screens */
 }
}

.nav-toggle span {
 display: block;
 width: 24px;
 height: 2px;
 background: white; /* White initially */
 margin: 6px 0;
 transition: var(--transition);
}

.header.scrolled .nav-toggle span {
 background: var(--text-dark); /* Dark when scrolled */
}

.nav-links.active {
 display: flex !important; /* Important to override mobile hidden */

 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(255, 255, 255, 0.85); /* Glass-effect menu panel */
 backdrop-filter: blur(15px);
 flex-direction: column;
 padding: 100px 20px 20px;
 gap: 24px;
 align-items: center;
 justify-content: flex-start;
 color: var(--text-dark);
}

.nav-links.active a {
 color: var(--text-dark);
 font-size: 1.2rem;
}
.nav-links.active a::after {
 background: var(--primary-color);
}

/* Buttons */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 14px 28px;
 font-size: 1rem;
 font-weight: 600;
 border-radius: var(--radius-md);
 cursor: pointer;
 transition: var(--transition);
 border: none;
 text-decoration: none;
 min-height: 44px; /* Ensure touch target */
}

.btn-primary {
 background: var(--primary-color);
 color: white;
 box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
 background: var(--primary-dark);
 transform: translateY(-2px);
 box-shadow: var(--shadow-md);
}

.btn-secondary {
 background: transparent;
 color: var(--primary-color);
 border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
 background: var(--primary-color);
 color: white;
}

.btn-outline-white {
 background: rgba(255, 255, 255, 0.2);
 color: white;
 border: 2px solid rgba(255, 255, 255, 0.5);
 backdrop-filter: blur(5px);
}

.btn-outline-white:hover {
 background: rgba(255, 255, 255, 0.4);
 border-color: white;
 color: white;
}
/* Glassmorphism CTA Button */
.cta-glass-btn {
 background: rgba(255, 255, 255, 0.15); /* Glassmorphism background */
 border: 1px solid rgba(255, 255, 255, 0.3);
 backdrop-filter: blur(10px);
 color: white;
 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.cta-glass-btn:hover {
 background: rgba(255, 255, 255, 0.25);
 border-color: rgba(255, 255, 255, 0.5);
 transform: translateY(-3px);
 box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}

/* Image Rules */
img {
 max-width: 100%;
 height: auto;
 display: block;
 object-fit: cover;
 image-rendering: -webkit-optimize-contrast; /* For sharpness */
}

/* HERO */
.page-hero {
 position: relative;
 min-height: 80vh;
 max-height: 90vh; /* STRICT Limit */
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 padding: 100px 0; /* Adjust for header */
 background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-mid) 50%, var(--gradient-end) 100%);
 background-size: 200% 200%;
 animation: gradientFlow 10s ease infinite alternate;
}

@keyframes gradientFlow {
 0% { background-position: 0% 50%; }
 100% { background-position: 100% 50%; }
}

.hero-inner {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 20px;
 position: relative;
 z-index: 2; /* Above elements, below header */
}

.hero-copy {
 max-width: 800px;
}

.hero-copy h1 {
 color: white;
 text-shadow: 0 4px 8px rgba(0,0,0,0.3);
 margin-bottom: 24px;
}

.hero-copy p {
 color: rgba(255, 255, 255, 0.9);
 margin-bottom: 32px;
 font-size: clamp(1rem, 2vw, 1.25rem);
}

.hero-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
 justify-content: center;
 margin-bottom: 32px;
}

.tag-pills {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 10px;
 margin-top: 20px;
}

.tag-pills span {
 background: rgba(255, 255, 255, 0.1);
 border: 1px solid rgba(255, 255, 255, 0.2);
 backdrop-filter: blur(5px);
 border-radius: 20px;
 padding: 8px 16px;
 font-size: 0.9rem;
 color: rgba(255, 255, 255, 0.9);
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.hero-visual {
 display: none; /* Hide visual for this hero style */
}

/* Glassmorphism card on gradient background (Intro Section) */
.intro-section-glass {
 background: linear-gradient(135deg, #a770ef 0%, #cf8bf3 50%, #fbc2eb 100%);
 color: var(--text-dark);
 padding: clamp(60px, 10vw, 120px) 0;
 text-align: center;
}

.intro-content-glass {
 background: var(--glass-bg);
 border: 1px solid var(--glass-border);
 backdrop-filter: blur(15px);
 border-radius: var(--radius-lg);
 padding: 40px;
 max-width: 900px;
 margin: 0 auto;
 box-shadow: var(--shadow-lg);
 color: white; /* Text color over glass */
}
.intro-content-glass h2 {
 color: white;
}

.intro-content-glass .section-label {
 background: rgba(255,255,255,0.2);
 color: white;
}
.intro-content-glass p {
 color: rgba(255,255,255,0.9);
}

/* Features Display: Glassmorphism cards with blur effects and gradient borders */
.cards-grid {
 display: grid;
 grid-template-columns: repeat(1, 1fr); /* Mobile default */
 gap: 24px;
 max-width: 1200px;
 margin: 0 auto;
}

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

@media (min-width: 1024px) {
 .cards-grid {
 grid-template-columns: repeat(3, 1fr);
 }
}

.card {
 background: var(--glass-bg);
 border: 1px solid var(--glass-border);
 backdrop-filter: blur(10px);
 border-radius: var(--radius-lg);
 padding: 28px;
 box-shadow: 0 4px 30px rgba(0,0,0,0.1);
 transition: var(--transition);
 display: flex;
 flex-direction: column;
 overflow: hidden;
 position: relative;
 color: white; /* Text color inside glass cards */
}

.card h3 {
 font-size: 1.25rem;
 font-weight: 700;
 margin-bottom: 12px;
 color: white;
}

.card p {
 color: rgba(255, 255, 255, 0.8);
 line-height: 1.6;
 margin-bottom: 16px;
 flex-grow: 1;
}
.card svg {
 color: var(--secondary-color);
 font-size: 2.5rem;
 margin-bottom: 15px;
}

.card:hover {
 transform: translateY(-8px) scale(1.02);
 box-shadow: 0 8px 40px rgba(0,0,0,0.2);
 border-color: rgba(255, 255, 255, 0.5);
}

.card-button {
 display: inline-block;
 padding: 12px 24px;
 border: 2px solid rgba(255,255,255,0.5);
 border-radius: 8px;
 color: white;
 font-weight: 600;
 text-decoration: none;
 text-align: center;
 transition: all 0.3s ease;
 align-self: flex-start;
 background: rgba(255,255,255,0.1);
}

.card-button:hover {
 background: rgba(255,255,255,0.3);
 color: white;
 border-color: white;
}

/* Stats section - using glassmorphism styling */
.stats-highlight {
 display: flex;
 flex-direction: column;
 gap: 40px;
 background: linear-gradient(160deg, var(--bg-dark) 0%, #1a1a2e 100%);
 color: white;
 border-radius: var(--radius-lg);
 padding: 40px;
 box-shadow: var(--shadow-lg);
 margin-top: 40px;
 text-align: center;
}

@media (min-width: 768px) {
 .stats-highlight {
 flex-direction: row;
 text-align: left;
 gap: 60px;
 }
 .stats-numbers {
 flex-direction: row !important;
 }
}

.highlight-list {
 list-style: none;
 padding: 0;
 flex: 1;
}

.highlight-list li {
 margin-bottom: 15px;
 font-size: 1.1rem;
 font-weight: 500;
 color: rgba(255, 255, 255, 0.9);
}
.highlight-list li:last-child {
 margin-bottom: 0;
}

.stats-numbers {
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 gap: 20px;
}

.stat-number {
 font-size: clamp(2rem, 5vw, 3.5rem);
 font-weight: 700;
 color: var(--secondary-color);
 line-height: 1;
}

.stat-caption {
 font-size: 1rem;
 color: rgba(255, 255, 255, 0.7);
 margin-top: 5px;
}

/* Media object */
.media-object {
 display: flex;
 flex-direction: column;
 gap: 40px;
 align-items: center;
}

@media (min-width: 768px) {
 .media-object {
 flex-direction: row;
 text-align: left;
 }
 .media-object:nth-of-type(even) {
 flex-direction: row-reverse;
 }
 .media-copy, .media-visual {
 flex: 1;
 }
}

.media-copy ul {
 list-style: none;
 padding: 0;
 margin-top: 20px;
}

.media-copy ul li {
 position: relative;
 padding-left: 30px;
 margin-bottom: 10px;
 color: var(--text-light);
}

.media-copy ul li::before {
 content: '';
 position: absolute;
 left: 0;
 color: var(--primary-color);
 font-weight: 700;
 font-size: 1.2rem;
}

.media-visual img {
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-md);
 max-height: 450px;
 height: auto;
 width: 100%;
}

.cta-buttons {
 display: flex;
 flex-wrap: wrap;
 gap: 15px;
 margin-top: 30px;
}

/* Timeline/Process steps */
.timeline {
 display: flex;
 flex-direction: column;
 gap: 30px;
 margin-top: 40px;
 position: relative;
 max-width: 800px;
 margin-left: auto;
 margin-right: auto;
}

.timeline-step {
 background: white;
 border-radius: var(--radius-md);
 padding: 25px;
 box-shadow: var(--shadow-sm);
 position: relative;
 border-left: 4px solid var(--primary-color);
}

.timeline-step h3 {
 font-size: 1.15rem;
 margin-bottom: 10px;
 color: var(--primary-color);
}

.timeline-step p {
 color: var(--text-light);
 font-size: 0.95rem;
}

/* Contact/CTA form section */
.form-card {
 background: var(--glass-bg);
 border: 1px solid var(--glass-border);
 backdrop-filter: blur(10px);
 border-radius: var(--radius-lg);
 padding: 40px;
 max-width: 700px;
 margin: 0 auto;
 box-shadow: var(--shadow-lg);
}

.form-group {
 margin-bottom: 20px;
}

.form-label {
 display: block;
 font-weight: 500;
 margin-bottom: 8px;
 color: white; /* label color for glass form */
}

.form-control {
 width: 100%;
 padding: 14px 18px;
 font-size: 1rem;
 border: 1px solid rgba(255,255,255,0.4); /* Glass form border */
 border-radius: var(--radius-md);
 transition: var(--transition);
 background: rgba(255,255,255,0.1); /* Glass form background */
 color: white;
 min-height: 44px; /* Touch target */
}

.form-control::placeholder {
 color: rgba(255,255,255,0.7);
}

.form-control:focus {
 outline: none;
 border-color: var(--primary-color);
 box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
 background: rgba(255,255,255,0.2);
}

textarea.form-control {
 resize: vertical;
 min-height: 140px;
}

.form-grid.two-columns {
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
}

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

.submit-button {
 width: 100%;
 padding: 15px 30px;
 font-size: 1.1rem;
 font-weight: 600;
 border-radius: var(--radius-md);
 cursor: pointer;
 transition: var(--transition);
 border: none;
 background: var(--primary-color);
 color: white;
 box-shadow: var(--shadow-md);
 min-height: 44px;
}

.submit-button:hover {
 background: var(--primary-dark);
 box-shadow: var(--shadow-lg);
 transform: translateY(-2px);
}

.checkbox-group {
 display: flex;
 align-items: center;
 gap: 10px;
 font-size: 0.9rem;
 color: rgba(255,255,255,0.9);
}

.checkbox-group input[type="checkbox"] {
 width: 20px;
 height: 20px;
 flex-shrink: 0;
 border: 1px solid rgba(255,255,255,0.5);
 border-radius: 4px;
 background: rgba(255,255,255,0.1);
 -webkit-appearance: none;
 appearance: none;
 cursor: pointer;
 transition: var(--transition);
}

.checkbox-group input[type="checkbox"]:checked {
 background: var(--primary-color);
 border-color: var(--primary-color);
}

.checkbox-group input[type="checkbox"]:checked::before {
 content: '';
 display: block;
 color: white;
 text-align: center;
 line-height: 18px;
 font-size: 14px;
}

.checkbox-group a {
 color: var(--secondary-color);
 text-decoration: underline;
}

.checkbox-group a:hover {
 color: white;
}

/* Footer - Dark with gradient accent */
.footer {
 background: linear-gradient(135deg, var(--bg-dark) 0%, #1a1a2e 100%);
 color: #e0e0e0;
 padding: 60px 0 30px;
 margin-top: clamp(60px, 10vw, 100px);
 position: relative;
 overflow: hidden;
}

/* Wave shape divider from content */
.footer::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 50px; /* Adjust height of wave */
 background: #f5f5f4; /* Match light section background or create a wave PNG */
 clip-path: ellipse(120% 100% at 50% 100%); /* Example wave effect */
 background: var(--bg-white); /* Match content background */
 z-index: 10;
 transform: translateY(-99%); /* Pull it up to sit on top edge */
}

/* Alternative wave divider */
.wave-divider {
 width: 100%;
 height: 70px;
 background-color: var(--bg-white);
 position: relative;
 top: 0;
 left: 0;
 transform: translateY(1px); /* To account for potential sub-pixel rendering issues */
 display: block;
 z-index: 10;
}
.wave-divider::before {
 content: '';
 position: absolute;
 width: 100%;
 height: 70px;
 background-color: var(--bg-dark); /* Color of the footer */
 border-top-left-radius: 50% 100%;
 border-top-right-radius: 50% 100%;
 transform: translateY(-80%); /* adjust to control wave height */
}

.footer-container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 20px;
}

.footer-grid {
 display: grid;
 grid-template-columns: 1fr; /* Mobile default */
 gap: 40px;
 margin-bottom: 40px;
}

@media (min-width: 768px) {
 .footer-grid {
 grid-template-columns: 2fr 1fr 1fr 1.5fr;
 }
}

.footer-brand {
 max-width: 280px;
}

@media (max-width: 767px) {
 .footer-brand {
 max-width: 100%;
 text-align: center;
 }
}

.footer-logo {
 font-size: 1.5rem;
 font-weight: 700;
 color: white;
 margin-bottom: 16px;
 display: block;
}

.footer-description {
 font-size: 0.9rem;
 line-height: 1.6;
 color: #a0a0a0;
 margin-bottom: 20px;
}

.footer-heading {
 font-size: 1rem;
 font-weight: 600;
 color: white;
 margin-bottom: 20px;
 text-transform: uppercase;
 letter-spacing: 1px;
}

@media (max-width: 767px) {
 .footer-heading {
 text-align: center;
 }
}

.footer-links {
 list-style: none;
 padding: 0;
 margin: 0;
}

.footer-links li {
 margin-bottom: 12px;
}

.footer-links a {
 color: #a0a0a0;
 text-decoration: none;
 font-size: 0.9rem;
 transition: color 0.2s ease;
}

.footer-links a:hover {
 color: white;
}

@media (max-width: 767px) {
 .footer-links {
 text-align: center;
 }
}

.footer-contact-item {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 margin-bottom: 16px;
 font-size: 0.9rem;
 color: #a0a0a0;
}

.footer-contact-item svg {
 width: 18px;
 height: 18px;
 flex-shrink: 0;
 margin-top: 2px;
 color: var(--primary-color);
}

@media (max-width: 767px) {
 .footer-contact-item {
 justify-content: center;
 }
}

.footer-social {
 display: flex;
 gap: 12px;
 margin-top: 20px;
}

@media (max-width: 767px) {
 .footer-social {
 justify-content: center;
 }
}

/* Glass-effect social icons */
.footer-social a {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: rgba(255,255,255,0.1); /* Glass effect */
 border: 1px solid rgba(255,255,255,0.2);
 backdrop-filter: blur(5px);
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 transition: var(--transition);
 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.footer-social a:hover {
 background: var(--primary-color);
 border-color: var(--primary-color);
 transform: translateY(-3px) scale(1.05); /* Slight lift */
 color: white;
 box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.footer-social svg {
 width: 20px;
 height: 20px;
 color: white;
}

.footer-divider {
 height: 1px;
 background: rgba(255,255,255,0.1);
 margin: 30px 0;
}

.footer-bottom {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 gap: 16px;
}

@media (max-width: 767px) {
 .footer-bottom {
 flex-direction: column;
 text-align: center;
 }
}

.footer-copyright {
 font-size: 0.85rem;
 color: #707070;
}

.footer-legal-links {
 display: flex;
 gap: 24px;
}

@media (max-width: 767px) {
 .footer-legal-links {
 flex-direction: column;
 gap: 8px;
 margin-top: 10px;
 }
}

.footer-legal-links a {
 font-size: 0.85rem;
 color: #707070;
 text-decoration: none;
 transition: color 0.2s;
}

.footer-legal-links a:hover {
 color: white;
}

/* Cookie Banner */
#cookie-banner {
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 background-color: rgba(63, 63, 70, 0.95); /* Dark background from palette */
 backdrop-filter: blur(8px);
 color: white;
 padding: 20px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: center;
 gap: 20px;
 z-index: 10000;
 box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
 font-size: 0.9rem;
}

#cookie-banner p {
 margin: 0;
}

#cookie-banner a {
 color: var(--primary-color);
 text-decoration: underline;
}

.cookie-buttons {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
 justify-content: center;
}

.cookie-buttons button {
 padding: 10px 20px;
 border-radius: var(--radius-sm);
 cursor: pointer;
 font-weight: 600;
 transition: var(--transition);
 border: none;
}

#accept-cookies {
 background-color: var(--primary-color);
 color: white;
}

#accept-cookies:hover {
 background-color: var(--primary-dark);
}

#decline-cookies {
 background-color: transparent;
 color: var(--primary-color);
 border: 1px solid var(--primary-color);
}

#decline-cookies:hover {
 background-color: var(--primary-color);
 color: white;
}

@media (min-width: 768px) {
 #cookie-banner {
 flex-direction: row;
 padding: 15px 30px;
 }
 #cookie-banner p {
 flex-grow: 1;
 max-width: 70%;
 }
}

/* Image specific styles */
.card img {
 width: 100%;
 height: 200px;
 object-fit: cover;
 border-radius: var(--radius-sm);
 margin-bottom: 20px;
}

.media-visual img {
 max-height: 400px;
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-md);
}

.process-step img {
 width: 100px;
 height: 100px;
 object-fit: cover;
 border-radius: 50%;
 margin-bottom: 20px;
 box-shadow: var(--shadow-sm);
}

/* Timeline/Process styling */
.timeline {
 display: flex;
 flex-direction: column;
 position: relative;
 padding: 0 20px;
}

.timeline::before {
 content: '';
 position: absolute;
 left: 30px;
 top: 0;
 bottom: 0;
 width: 2px;
 background-color: rgba(0,0,0,0.1);
}

.timeline-step {
 position: relative;
 padding: 20px;
 margin-bottom: 20px;
 background: var(--bg-white);
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-sm);
 margin-left: 50px;
 z-index: 1;
}

.timeline-step::before {
 content: '';
 position: absolute;
 left: -20px;
 top: 25px;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background-color: var(--primary-color);
 border: 2px solid white;
 box-shadow: 0 0 0 2px var(--primary-color);
 transform: translateX(-50%);
 z-index: 2;
}

.timeline-step h3 {
 color: var(--primary-color);
 margin-bottom: 5px;
}

/* Form validation styles */
.input-error {
 border-color: #dc2626 !important;
 box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.field-error {
 color: #dc2626;
 font-size: 0.85rem;
 margin-top: 4px;
 animation: fadeIn 0.3s ease;
}

.form-success {
 animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
 from { opacity: 0; transform: translateY(-10px); }
 to { opacity: 1; transform: translateY(0); }
}

/* Loading spinner for submit button */
.spinner {
 display: inline-block;
 width: 16px;
 height: 16px;
 border: 2px solid rgba(255,255,255,0.3);
 border-radius: 50%;
 border-top-color: #fff;
 animation: spin 0.8s linear infinite;
 margin-right: 8px;
 vertical-align: middle;
}

@keyframes spin {
 to { transform: rotate(360deg); }
}

button[disabled], input[type="submit"][disabled] {
 opacity: 0.7;
 cursor: not-allowed;
}

.map-container {
 width: 100%;
 height: 450px;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 margin: 40px auto;
}

.map-container iframe {
 width: 100%;
 height: 100%;
 border: none;
}

@media (max-width: 768px) {
 .map-container {
 height: 350px;
 border-radius: 8px;
 }
}

/* Floating shapes for hero */
.hero-shapes {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 overflow: hidden;
 pointer-events: none;
}

.shape {
 position: absolute;
 background: rgba(255, 255, 255, 0.05); /* Lighter glass effect */
 border-radius: 50%;
 animation: floatAndFade 15s infinite ease-in-out alternate;
 filter: blur(5px);
}

.shape:nth-child(1) { width: 100px; height: 100px; top: 10%; left: 15%; animation-delay: 0s; }
.shape:nth-child(2) { width: 150px; height: 150px; top: 20%; right: 10%; animation-delay: 2s; }
.shape:nth-child(3) { width: 80px; height: 80px; bottom: 5%; left: 30%; animation-delay: 4s; }
.shape:nth-child(4) { width: 120px; height: 120px; bottom: 15%; right: 20%; animation-delay: 6s; }
.shape:nth-child(5) { width: 90px; height: 90px; top: 5%; left: 40%; animation-delay: 8s;}
.shape:nth-child(6) { width: 110px; height: 110px; top: 30%; left: 5%; animation-delay: 10s;}
.shape:nth-child(7) { width: 70px; height: 70px; bottom: 25%; right: 5%; animation-delay: 12s;}

@keyframes floatAndFade {
 0% { transform: translateY(0) scale(1); opacity: 0.7; }
 50% { transform: translateY(-20px) scale(1.1); opacity: 1; }
 100% { transform: translateY(0) scale(1); opacity: 0.7; }
}

/* Wave dividers between sections */
.section-wave-top {
 position: relative;
 width: 100%;
 height: 50px; /* Height of the wave */
 margin-top: -1px; /* Overlap to remove gaps */
 background: var(--bg-white); /* Color of the section below */
 z-index: 2; /* Place above previous section */
}

.section-wave-top::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: var(--bg-light); /* Color of the section above */
 clip-path: ellipse(150% 100% at 50% 0%); /* Top wave */
 transform: translateY(-99%); /* Adjust to position wave */
}

.section-wave-bottom {
 position: relative;
 width: 100%;
 height: 50px; /* Height of the wave */
 margin-bottom: -1px; /* Overlap to remove gaps */
 background: var(--bg-light); /* Color of the section above */
 z-index: 2; /* Place above next section */
}

.section-wave-bottom::before {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: var(--bg-white); /* Color of the section below */
 clip-path: ellipse(150% 100% at 50% 100%); /* Bottom wave */
 transform: translateY(99%); /* Adjust to position wave */
}

/* Section with background image and gradient overlay */
.section-with-bg {
 background-size: cover;
 background-position: center;
 background-attachment: fixed;
 color: white;
 position: relative;
 z-index: 1;
}

.section-with-bg::before {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8));
 z-index: -1;
}

.section-with-bg h2, .section-with-bg p {
 color: white;
}

.section-with-bg .section-label {
 background: var(--primary-color);
}

/* Testimonials: floating quote bubbles */
.testimonial-card {
 background: var(--glass-bg);
 border: 1px solid var(--glass-border);
 backdrop-filter: blur(10px);
 border-radius: var(--radius-lg);
 padding: 30px;
 box-shadow: 0 4px 30px rgba(0,0,0,0.1);
 margin: 0 auto 30px;
 position: relative;
 color: white;
 text-align: center;
 overflow: hidden;
 animation: floatBounce 6s infinite ease-in-out;
 flex: 1; /* For consistent height in grid */
 display: flex;
 flex-direction: column;
}
.testimonial-card p {
 font-style: italic;
 font-size: 1.05rem;
 margin-bottom: 20px;
 color: rgba(255,255,255,0.9);
}
.testimonial-card .author-info {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 15px;
 margin-top: auto; /* Push to bottom */
}
.testimonial-card .author-info img {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 border: 3px solid var(--primary-color);
 flex-shrink: 0;
}
.testimonial-card .author-name {
 font-weight: 600;
 color: var(--secondary-color);
 margin-bottom: 5px;
}
.testimonial-card .author-title {
 font-size: 0.85rem;
 color: rgba(255,255,255,0.7);
}

/* Testimonial grid */
.testimonial-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 30px;
}
@media (min-width: 768px) {
 .testimonial-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}
@media (min-width: 1024px) {
 .testimonial-grid {
 grid-template-columns: repeat(3, 1fr);
 }
}

@keyframes floatBounce {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-10px); }
}

/* Image overlay for showcase */
.image-showcase-grid {
 display: grid;
 grid-template-columns: repeat(1, 1fr);
 gap: 20px;
}
@media (min-width: 600px) {
 .image-showcase-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}
@media (min-width: 992px) {
 .image-showcase-grid {
 grid-template-columns: repeat(3, 1fr);
 }
}

.showcase-item {
 position: relative;
 overflow: hidden;
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-md);
 cursor: pointer;
}

.showcase-item img {
 width: 100%;
 height: 250px;
 object-fit: cover;
 transition: transform 0.4s ease;
}

.showcase-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 padding: 20px;
 color: white;
 opacity: 0;
 transition: opacity 0.4s ease;
 text-align: left;
}

.showcase-item:hover img {
 transform: scale(1.05);
}

.showcase-item:hover .showcase-overlay {
 opacity: 1;
}

.showcase-overlay h3 {
 font-size: 1.3rem;
 color: white;
 margin-bottom: 5px;
}

.showcase-overlay p {
 font-size: 0.9rem;
 color: rgba(255,255,255,0.9);
}

/* About page team photos */
.team-grid {
 display: grid;
 grid-template-columns: repeat(1, 1fr);
 gap: 30px;
 justify-items: center;
}
@media (min-width: 600px) {
 .team-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}
@media (min-width: 992px) {
 .team-grid {
 grid-template-columns: repeat(3, 1fr);
 }
}

.team-member-card {
 background: white;
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-md);
 padding: 30px;
 text-align: center;
 transition: var(--transition);
 max-width: 350px;
}

.team-member-card:hover {
 transform: translateY(-8px);
 box-shadow: var(--shadow-lg);
}

.team-member-card img {
 width: 150px;
 height: 150px;
 border-radius: 50%;
 object-fit: cover;
 margin: 0 auto 20px;
 border: 4px solid var(--primary-color);
}

.team-member-card h3 {
 font-size: 1.25rem;
 margin-bottom: 8px;
 color: var(--text-dark);
}

.team-member-card .role {
 font-weight: 500;
 color: var(--primary-color);
 font-size: 0.95rem;
 margin-bottom: 15px;
}

.team-member-card p {
 font-size: 0.9rem;
 color: var(--text-muted);
 line-height: 1.5;
}
/* Partner/Certification Grid */
.partners-grid, .certifications-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
 gap: 30px;
 justify-items: center;
 margin-top: 40px;
 padding: 20px;
 background: var(--bg-light);
 border-radius: var(--radius-md);
}

.partner-logo img, .certification-logo img {
 width: auto;
 height: 60px;
 filter: grayscale(100%);
 opacity: 0.6;
 transition: var(--transition);
}

.partner-logo img:hover, .certification-logo img:hover {
 filter: grayscale(0%);
 opacity: 1;
}

.contact-info-grid {
 display: grid;
 grid-template-columns: repeat(1, 1fr);
 gap: 30px;
 margin-top: 40px;
}

@media (min-width: 768px) {
 .contact-info-grid {
 grid-template-columns: repeat(3, 1fr);
 }
}

.contact-info-item {
 background: var(--bg-white);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 padding: 30px;
 text-align: center;
 box-shadow: var(--shadow-sm);
 transition: var(--transition);
}

.contact-info-item:hover {
 transform: translateY(-5px);
 box-shadow: var(--shadow-md);
}

.contact-info-item svg {
 color: var(--primary-color);
 font-size: 2.5rem;
 margin-bottom: 15px;
}

.contact-info-item h3 {
 font-size: 1.2rem;
 margin-bottom: 10px;
}

.contact-info-item p {
 color: var(--text-light);
 font-size: 0.95rem;
}

.contact-info-item a {
 color: var(--text-light);
}

.contact-info-item a:hover {
 color: var(--primary-color);
}

/* Specific styles for legal pages */
.legal-content h2, .legal-content h3 {
 color: var(--text-dark);
 margin-top: clamp(30px, 4vw, 50px);
 margin-bottom: 15px;
}

.legal-content p, .legal-content ul, .legal-content ol {
 margin-bottom: 20px;
 color: var(--text-light);
}

.legal-content ul, .legal-content ol {
 padding-left: 25px;
}

.legal-content li {
 margin-bottom: 8px;
 color: var(--text-light);
}

.legal-content strong {
 font-weight: 600;
}

.legal-content table {
 width: 100%;
 border-collapse: collapse;
 margin-top: 20px;
 margin-bottom: 30px;
 border: 1px solid var(--border-color);
}

.legal-content th, .legal-content td {
 border: 1px solid var(--border-color);
 padding: 12px 15px;
 text-align: left;
 font-size: 0.95rem;
 color: var(--text-dark);
}

.legal-content th {
 background-color: var(--primary-color);
 color: white;
 font-weight: 600;
}

.legal-content tr:nth-child(even) {
 background-color: var(--bg-light);
}
.legal-content tr:hover {
 background-color: #eef1f4;
}

/* Disclaimer section in footer */
.disclaimer-section {
 background: rgba(0,0,0,0.2);
 border-radius: var(--radius-md);
 padding: 20px;
 margin-top: 20px;
 font-size: 0.85rem;
 color: #a0a0a0;
 text-align: left;
}

.disclaimer-section strong {
 color: white;
}
/* Global icons */
.icon {
 display: inline-block;
 width: 1em;
 height: 1em;
 stroke-width: 0;
 stroke: currentColor;
 fill: currentColor;
 vertical-align: middle;
}

/* Working Hours */
.footer-hours strong {
 color: white;
 font-weight: 600;
}
.footer-hours {
 font-size: 0.9rem;
 color: #a0a0a0;
 line-height: 1.8;
 margin-bottom: 20px;
}
.footer-hours svg {
 color: var(--primary-color);
 margin-right: 8px;
 vertical-align: middle;
}
.icon-clock {
 font-size: 1.1em;
 margin-top: -2px; /* Adjust vertical alignment */
}
.footer-contact-item.hours-item {
 align-items: center;
}
.footer-contact-item.hours-item svg {
 margin-top: 0;
}

.footer-contact-info-block {
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.footer-contact-info-block .footer-contact-item {
 margin-bottom: 0;
}
.footer-contact-info-block .footer-contact-item:last-child {
 margin-bottom: 16px; /* Restore margin for the last item in the block */
}

/* Showcase section header specific styling */
.section-header.dark .section-label {
 background-color: var(--secondary-color);
}
.section-header.dark .section-title,
.section-header.dark .section-subtitle {
 color: white; /* Ensure text is white over dark background */
}
/* Scroll animation for header */
body {
 padding-top: 70px; /* Space for fixed header */
}
.header-padding {
 height: 70px; /* Placeholder to prevent content jump */
}

/* Base styles for all image types */
.image-full-width {
 width: 100%;
 height: auto;
 margin-bottom: 2rem;
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-md);
}

.image-left, .image-right {
 width: 100%;
 height: auto;
 max-width: 500px; /* Constrain size */
 margin-bottom: 1.5rem;
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
 .image-left {
 float: left;
 margin-right: 2rem;
 margin-bottom: 1rem;
 }
 .image-right {
 float: right;
 margin-left: 2rem;
 margin-bottom: 1rem;
 }
}

.image-gallery {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 1.5rem;
 margin-bottom: 2rem;
}

.image-gallery img {
 width: 100%;
 height: 250px;
 object-fit: cover;
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-sm);
}

/* Clearfix for floated images */
.clearfix::after {
 content: "";
 display: table;
 clear: both;
}

/* Specific image sizes and alt texts in French */

/* General Image Constraints */
section img:not(.avatar):not(.partner-logo):not(.client-logo):not(.footer-social img) {
 max-height: 400px;
}
.hero-visual img {
 max-height: 520px;
 width: auto;
}
.media-visual img {
 max-height: 350px;
}
.card img, .showcase-item img {
 height: 220px;
 max-height: 220px;
}
.partner-logo img, .certification-logo img {
 height: 60px;
 max-height: 60px;
 width: auto;
}

/* About page team photos - circular */
.team-member-card img {
 width: 150px;
 height: 150px;
 border-radius: 50%;
 object-fit: cover;
}
.testimonial-card img {
 width: 60px;
 height: 60px;
 border-radius: 50%;
}
/* Ensure consistent image alt texts are present on all images in French */

/* Ensure the floating shapes of the hero are above other background elements */
.page-hero .hero-shapes {
 z-index: 1;
}

.page-hero .hero-inner {
 z-index: 2; /* Main content should be above shapes */
}
form {
 padding: 0; /* Remove default form padding to match section-inner */
}
/* Responsive padding for form card, especially on mobile */
.form-card {
 padding: clamp(25px, 5vw, 40px);
}
/* Correct text contrast for form elements in glass form */
.form-card .form-group label {
 color: white; /* Ensure labels are white for contrast */
}
.form-card .form-control {
 color: white; /* Ensure input text is white */
}
.form-card .form-control::placeholder {
 color: rgba(255, 255, 255, 0.7); /* Lighter placeholder for visibility */
}
.form-card .checkbox-group label {
 color: white;
}
.form-card .field-error {
 color: #fca5a5; /* Lighter error message for dark background */
}
/* Specific text contrast for .intro-content-glass */
.intro-content-glass .section-title {
 color: white;
}

.intro-content-glass p {
 color: rgba(255, 255, 255, 0.9);
}

.intro-content-glass .section-label {
 color: white;
}

.section-label {
 text-transform: uppercase;
}
/* Apply gradient to showcase sections */
.showcase-section, .testimonials-section, .connect-section {
 background: linear-gradient(145deg, var(--gradient-start) 0%, var(--gradient-mid) 50%, var(--gradient-end) 100%);
 color: white;
}
.showcase-section .section-title, .showcase-section .section-subtitle, .showcase-section .section-label,
.testimonials-section .section-title, .testimonials-section .section-subtitle, .testimonials-section .section-label,
.connect-section .section-title, .connect-section .section-subtitle, .connect-section .section-label {
 color: white;
}
.showcase-section .section-label, .testimonials-section .section-label, .connect-section .section-label {
 background: var(--secondary-color);
}
.timeline-section{
 background: var(--bg-light);
}

.timeline::before {
 background-color: rgba(0,0,0,0.1); /* Ensure it's visible on light background */
}

/* Ensure text contrast for dark themed sections */
.dark-gradient-section .section-title,
.dark-gradient-section .section-subtitle,
.dark-gradient-section .section-label,
.dark-gradient-section .card h3,
.dark-gradient-section .card p,
.dark-gradient-section .card-meta,
.dark-gradient-section .media-copy h3,
.dark-gradient-section .media-copy p,
.dark-gradient-section .cta-buttons .btn,
.dark-gradient-section .highlight-list li,
.dark-gradient-section .stat-number,
.dark-gradient-section .stat-caption,
.dark-gradient-section .form-label,
.dark-gradient-section .form-control {
 color: WHITE !important;
}

.dark-gradient-section .section-label,
.dark-gradient-section .card-button {
 background-color: var(--secondary-color) !important;
 border-color: var(--secondary-color) !important;
 color: white !important;
}

.dark-gradient-section .btn-primary {
 background-color: var(--secondary-color) !important;
}

.dark-gradient-section .form-control {
 border-color: rgba(255,255,255,0.4) !important;
 background-color: rgba(255,255,255,0.1) !important;
}
.dark-gradient-section .form-control::placeholder {
 color: rgba(255,255,255,0.7) !important;
}

.dark-gradient-section {
 background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-mid) 50%, var(--gradient-end) 100%);
}

#scroll-progress {
 position: fixed;
 top: 0;
 left: 0;
 width: 0%;
 height: 4px;
 background-color: var(--secondary-color);
 z-index: 10001;
 transition: width 0.1s linear;
}
.footer-hours-block {
 margin-top: 20px;
 font-size: 0.9rem;
 color: #a0a0a0;
}

.footer-hours-block strong {
 color: white;
 display: block;
 margin-bottom: 5px;
}

.hours-item {
 margin-bottom: 0px !important;
}

.footer-contact-block {
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.footer-contact-block .footer-contact-item {
 margin-bottom: 0 !important; /* Reset individual item margins */
}
.footer-contact-block .footer-contact-item:last-child {
 margin-bottom: 0 !important; /* No extra margin for the very last contact item */
}
/* Ensure icons are correctly sized in the footer */
.footer-contact-item svg, .footer-hours-block svg {
 width: 18px;
 height: 18px;
 flex-shrink: 0;
 margin-top: 2px;
 color: var(--primary-color);
}
.footer-hours-block .footer-contact-item {
 align-items: flex-start; /* Align icon and text at the top */
}