/* ============================= 1. VARIABLES & ROOT ============================= */
:root {
    --primary-color: #f3d1c9;
    --secondary-color: #d6d1c4;
    --accent-color: #b6ced0;
    --text-dark: #2c3e50;
    --text-light: #6c757d;
    --white: #ffffff;
    --black: #000000;
    --shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    --header-bg: #f3d1c9;
    --page-bg: #f3d1c9; }

/* ============================= 2. RESET & UTILITAIRES GLOBAUX ============================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'DM Sans', sans-serif; color: var(--text-dark); line-height: 1.6; background: var(--page-bg); }

h1, h2, h3, h4, h5, h6 { font-family: 'Lexend', cursive; }

#container,
.container { width: 70vw; min-width: 320px; max-width: 1200px; margin-left: auto; margin-right: auto; padding: 0 1.5rem; }

#large-container,
.large-container { width: 92vw; min-width: 320px; max-width: 1200px; margin-left: auto; margin-right: auto; padding: 0 1.5rem; }

/* ============================= 3. LAYOUT GENERAL ============================= */
.grid { display: grid; gap: 2rem; }

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

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

.flex { display: flex; flex-direction: row; gap: 2rem }

/* ============================= 4. NAVIGATION / HEADER ============================= */
.footer { width: 100%; min-width: 0; left: 0; right: 0; margin: 0; position: relative; background-color: var(--black); color: var(--white); padding: 50px 0 20px; box-shadow: none; z-index: 150; }

.e-font-icon-svg{ font-size: 1.2em; width: 1.2em; fill: var(--white); }

.side-image-fixed { z-index: 1; }

/* ========== HEADER NAVBAR CLEAN ========== */
.navbar { width: 100%; position: fixed; top: 0; left: 0; right: 0; background: var(--header-bg); box-shadow: var(--shadow); z-index: 1000; padding: 2rem 0; display: flex; justify-content: center; }

.container-wide { width: 90vw; max-width: 1600px; margin: 0 auto; padding: 0 1.5rem; display: flex; justify-content: space-between; align-items: center; }

.navbar-brand { display: flex; align-items: center; gap: 1rem; }

.navbar-logo { width: 120px; height: 120px; object-fit: contain; display: block; }

.nav-menu { display: flex; list-style: none; gap: 2rem; align-items: center; margin: 0; padding: 0; }

.nav-link { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--text-dark); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.02em; transition: color 0.3s; }

.nav-link:hover,
.nav-link.active { color: var(--text-dark); }

.nav-toggle { display: none; background: none; border: none; font-size: 2rem; cursor: pointer; }

@media (max-width: 768px) {
    .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--white); flex-direction: column; padding: 1rem; box-shadow: var(--shadow); z-index: 3001; }

    .nav-menu.active { display: flex; }

    .nav-toggle { display: block; }

    .container,
    .home-central-content,
    .section { padding-left: 5vw; padding-right: 5vw; }

    .section-title,
    .home-main-title { font-size: 1.5rem; margin-bottom: 0.75rem; }

    .btn,
    .btn-primary,
    .btn-secondary { font-size: 0.95rem; padding: 0.6rem 1.1rem; }

    .grid,
    .grid-2,
    .grid-3 { gap: 1rem; }

    .card { margin-bottom: 1.2rem; padding: 1.2rem 0.8rem; }

    .section { padding-top: 30px; padding-bottom: 30px; }

    .home-about-list { gap: 0.5rem; margin-bottom: 1rem; }

    .nav-link.active,
    .nav-link.active-white { background: none; color: var(--text-dark) !important; font-weight: 600; border: none; padding-left: 0; } }

/* ============================= 5. BOUTONS & FORMULAIRES ============================= */
.btn,
.btn-primary,
.btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border: 2px solid var(--white) !important; border-radius: 8px; font-family: inherit; font-size: 1rem;
 font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s; text-decoration: none; background: var(--white) !important; color: var(--text-dark) !important; }

.btn-outline { background: transparent !important; border: 2px solid var(--white) !important; color: var(--text-dark) !important; }

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover { background: var(--primary-color) !important; color: var(--text-dark) !important; border: 2px solid var(--primary-color) !important; opacity: 1; }

/* ============================= 6. COMPOSANTS REUTILISABLES ============================= */
.card { background: var(--white); border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); padding: 2rem 1.5rem; margin-bottom: 2rem; }

.card-body { padding: 0; }

/* ============================= 7. SECTIONS PRINCIPALES ============================= */
.section { padding: 60px 0; }

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

.section-title { text-align: center; font-size: 2.5rem; margin-bottom: 1rem; }

.section-subtitle { text-align: center; font-size: 1.125rem; color: var(--text-light); margin-bottom: 3rem; }

/* ============================= 8. FOOTER ============================= */
.footer-content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; max-width: 1400px; margin: 0 auto 2rem auto; justify-items: center; }

.footer-block { align-items: flex-start;}

.footer-title { text-align: center; color: var(--accent-color); font-size: 1.5rem; font-weight: 600; margin-bottom: 1.5rem; letter-spacing: 0.02em; }

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

.footer-links li { display: flex; align-items: center; gap: 0.5rem; color: var(--white); font-size: 1rem; margin-bottom: 0.7rem; }

.footer-links a { color: inherit; text-decoration: none; transition: color 0.2s; }

.footer-links a:hover { color: #b6ced0; }

.footer-icon { font-size: 1.2em; color: #b6ced0; margin-right: 0.5em; }

/* Style groupé pour toutes les icônes du footer */
.footer-title .material-symbols-outlined,
.footer-links .material-symbols-outlined,
.social-links .material-symbols-outlined { color: var(--white); font-size: 1.3em; vertical-align: middle; transition: color 0.3s; }

/* Hover accentué pour les icônes de réseaux sociaux */
.social-links a:hover .material-symbols-outlined { color: var(--primary-color); }

.social-links { display: flex; gap: 1rem; margin-top: 1rem; }

/* ============================= 9. PAGES SPECIFIQUES & BLOCS ============================= */ Navigation */
.navbar-brand { font-family: inherit, cursive; font-size: 1.5rem; color: var(--primary-color); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; height: 100%; }

.navbar-logo { width: 120px; height: 120px; object-fit: contain; display: block; margin: 0; padding: 0; }

.nav-menu { display: flex; list-style: none; gap: 2rem; }

.nav-link { text-decoration: none; color: var(--text-dark); font-weight: 500; transition: color 0.3s ease; display: flex; align-items: center; gap: 0.25rem; }

.nav-link:hover,
.nav-link.active { color: var(--text-dark); }

.nav-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border: none; border-radius: 8px; font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
 transition: background 0.2s, color 0.2s; text-decoration: none; }

.btn-primary { background: var(--white) !important; color: var(--text-dark) !important; border: 2px solid var(--white) !important; }

.btn-secondary { background: var(--white) !important; color: var(--text-dark) !important; border: 2px solid var(--white) !important; }

.btn-outline { background: transparent !important; border: 2px solid var(--white) !important; color: var(--text-dark) !important; }

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover { background: var(--primary-color) !important; color: var(--text-dark) !important; border: 2px solid var(--primary-color) !important; opacity: 1; }

/* Cards */
.card { background: var(--white); border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); padding: 2rem 1.5rem; margin-bottom: 2rem; }

.card-body { padding: 0; }

/* ========================= MAIN SECTION (ex-HERO) ========================= */


/* Sections */
.section { padding: 60px 0; }

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

.section-title { text-align: center; font-size: 2.5rem; margin-bottom: 1rem; }

.section-subtitle { text-align: center; font-size: 1.125rem; color: var(--text-light); margin-bottom: 3rem; }

/* Grid */
.grid { display: grid; gap: 2rem; }

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

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

/* Footer */
.footer-grid { display: unset !important; grid-template-columns: unset !important; gap: unset !important; margin-bottom: unset !important; align-items: unset !important; }

/* Responsive */
@media (max-width: 768px) {
    .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--white); flex-direction: column; padding: 1rem; box-shadow: var(--shadow); }

    .nav-menu.active { display: flex; }

    .nav-toggle { display: block; }

    .main-title { font-size: 2rem; }

    .section-title { font-size: 2rem; }

    .grid-3,
    .grid-2 { grid-template-columns: 1fr; }

    .footer-content { grid-template-columns: 1fr; gap: 0.7rem; justify-items: stretch; text-align: center; }

    .footer-block { margin-bottom: 0.7rem; }

    .footer-links .material-symbols-outlined,
    .footer-title .material-symbols-outlined,
    .footer-block .material-symbols-outlined { display: none !important; }

    .footer-title { font-size: 1.1rem; }

    .footer-links li { font-size: 0.95rem; }

    /* Contacts en 2 colonnes */
    .footer-block:last-child .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.2rem; }

    .footer-block:last-child .footer-links li { flex: 0 1 45%; text-align: left; justify-content: flex-start; margin-bottom: 0.3rem; } }

/* ============================================= */
/* Utility Classes - Classes utilitaires globales */
/* ============================================= */

/* --- Flex & Grille --- */
.d-flex, .flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0; }

/* --- Alignement --- */
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.text-center { text-align: center; }

/* --- Espacement (Gaps) --- */
.gap-1 { gap: 0.75rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2.5rem; }

/* --- Marges --- */
.mt-3 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.75rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.margin-bottom-1 { margin-bottom: 0.75rem; }
.margin-bottom-2 { margin-bottom: 1.5rem; }
.margin-top-2 { margin-top: 1.5rem; }

/* --- Largeurs minimales --- */
.min-width-280 { min-width: 280px; }
.min-width-260 { min-width: 260px; }

/* --- Icônes --- */
.material-symbols-outlined { vertical-align: middle; color: var(--black);}


/* === Landing Page / Hero Section === */
.landing-section { position: relative; width: 100%; height: 70vh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background: var (--secondary-color, #f3f3f3); overflow: hidden; }

.landing-image-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 1; }

.landing-image { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }

.landing-bottom-elements { position: relative; z-index: 2; margin-bottom: 2rem; display: flex; justify-content: center; align-items: center; }

/* === Blocs d'accueil === */
.home-bloc { padding: 60px 0 40px 0; background: var(--white); }

.home-bloc-boutons { background: var(--primary-color, #f3d1c9); }

.home-bloc-equipe { background: var(--section-light-bg, #f8f8f8); }

/* === Cartes équipe === */
.equipe-card { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.equipe-photo { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; background: var(--secondary-color, #d6d1c4); margin-bottom: 1rem; }

.equipe-poste { color: var(--text-light); font-size: 1rem; margin-top: 0.5rem; }

@media (max-width: 900px) {
    .landing-section { height: 40vh; }

    .grid-3 { grid-template-columns: 1fr; } }

/* ============================= CORRECTIONS & FIXES GLOBAUX ============================= */

.navbar { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.navbar-brand { align-items: center; display: flex; height: 100%; }

.container-wide { width: 90vw; max-width: 1600px; margin-left: auto; margin-right: auto; padding: 0 1.5rem; }

.main-with-margin { margin-top: 80px; }

.slider-container,
.slider-dots { pointer-events: auto; }

.nav-link.active-white { color: var(--white) !important; }

.with-header-offset { margin-top: 120px; }

.hidden { display: none !important; }

.invisible { visibility: hidden !important; }

.border-primary { border: 2px solid var(--primary-color); }

.text-primary { color: var(--primary-color); }

.text-light { color: var(--text-light); }

.font-size-xl { font-size: 3rem; }

.font-size-lg { font-size: 1.25rem; }

.font-size-md { font-size: 1.125rem; }

.font-size-sm { font-size: 0.875rem; }

.bg-gradient-primary { background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); color: var(--white); }

.rounded-25 { border-radius: 25px; }

.circle-100 { width: 100px; height: 100px; border-radius: 50%; }

.center-flex { display: flex; align-items: center; justify-content: center; }

.mx-auto { margin: 0 auto; }

.line-through { text-decoration: line-through; }

.btn-white-outline { border-color: var(--white); color: var(--white); }

.mb-1-5 { margin-bottom: 1.5rem; }

.mb-1 { margin-bottom: 1rem; }

.mb-0-5 { margin-bottom: 0.5rem; }

.mr-1 { margin-right: 1rem; }

.fw-bold { font-weight: bold; }

.maxw-600 { max-width: 600px; margin: 0 auto; }

.maxw-500 { max-width: 500px; margin: 0 auto; }

.maxw-900 { max-width: 900px; margin: 0 auto; }

.border-none { border: none; }

.overflow-hidden { overflow: hidden; }

.maxw-780 { max-width: 780px; }

.minw-288 { min-width: 288px; }

.center-text { text-align: center; }

.flex { display: flex; }

.gap-2 { gap: 2rem; }

.align-center { align-items: center; }

.justify-center { justify-content: center; }

.margin-bottom-3 { margin-bottom: 3rem; }

.margin-top-3 { margin-top: 3rem; }

.nav-link.active,
.nav-link.active-white { font-weight: bold; color: var(--text-dark) !important; text-decoration: none; }

.nav-link.active span,
.nav-link.active-white span { border-bottom: 3px solid var(--primary-color); padding-bottom: 2px; border-radius: 2px; background: none; }

@media (max-width: 600px) {
    .home-cta-buttons { flex-direction: column; gap: 0.7rem; align-items: stretch; }

    .home-cta-buttons .btn { width: 100%; min-width: 120px; font-size: 1rem; padding: 0.7rem 0.5rem; justify-content: center; }

    .btn .material-symbols-outlined { display: none !important; } }