/* --- style.css --- */
:root {
    --color-bg: #F8FAFC;
    --color-dark: #0F172A;
    --color-green: #00E676;
    --color-text-main: #334155;
    --color-text-light: #94A3B8;
	--color-primary: #004d40; /* Bleu Marine/Anthracite foncé (Fiabilité) */
    --font-main: 'Inter', sans-serif;
    --font-title: 'Montserrat', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-main);
    background-color: var(--color-bg);
    color: var(--color-text-main);
    line-height: 1.6;
}

h1, h2, h3 { font-family: var(--font-title); color: var(--color-dark); font-weight: 700; }
a { text-decoration: none; transition: 0.3s; color: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* --- LOGO IMAGE --- */

/* Le conteneur du lien */
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* L'image elle-même */
.logo-img {
    height: 150px; /* Ajustez cette valeur selon la hauteur souhaitée (40px à 60px est standard) */
    width: auto;  /* Garde les proportions de l'image */
    object-fit: contain; /* S'assure que le logo ne soit jamais déformé */
}

/* Mobile : on réduit un peu le logo sur téléphone */
@media (max-width: 768px) {
    .logo-img {
        height: 100px;
    }
}

/* BOUTONS */
.btn { display: inline-block; padding: 12px 28px; border-radius: 50px; font-weight: 600; cursor: pointer; text-align: center; }
.btn-primary { background: var(--color-green); color: var(--color-dark); border: 2px solid var(--color-green); }
.btn-primary:hover { background: transparent; color: var(--color-green); }
.btn-outline { border: 2px solid #fff; color: #fff; }
.btn-outline:hover { background: #fff; color: var(--color-dark); }

/* HEADER */
header { background: var(--color-dark); padding: 1rem 0; position: sticky; top: 0; z-index: 1000; }
.header-inner { display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: var(--font-title); font-size: 1.6rem; font-weight: 800; color: #fff; }
.logo span { color: var(--color-green); }
.nav-links { display: flex; gap: 2rem; }
.nav-links a { color: #cbd5e1; font-weight: 500; }
.nav-links a:hover, .nav-links a.active { color: var(--color-green); }

/* HERO GLOBAL */
.hero {
    background-size: cover; background-position: center;
    color: white; display: flex; align-items: center; justify-content: center; text-align: center;
}
.hero-home { height: 70vh; background-image: linear-gradient(rgba(15,23,42,0.8), rgba(15,23,42,0.8)), url('img/solaire.jpg'); }
.hero-page { height: 50vh; margin-bottom: 0rem; } /* Pour les sous-pages */

.hero h1 { color: white; font-size: 3rem; margin-bottom: 1rem; }
.hero p { font-size: 1.2rem; color: #cbd5e1; max-width: 700px; margin: 0 auto 2rem; }

/* CONTENU SPECIFIQUE PAGE */

.split-text { flex: 1; }
.split-image { flex: 1; height: 400px; background-size: cover; background-position: center; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.split-text h2 { font-size: 2.2rem; margin-bottom: 1rem; }
.split-text ul { margin-top: 1.5rem; list-style: none; }
.split-text li { margin-bottom: 0.5rem; padding-left: 20px; border-left: 3px solid var(--color-green); }

/* SERVICES HOME */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; padding: 4rem 0; }
.card { background: white; padding: 2rem; border-radius: 20px; border: 1px solid #e2e8f0; transition: 0.3s; }
.card:hover { transform: translateY(-5px); border-color: var(--color-green); }
.card h3 { margin: 1rem 0; }
.card a { color: var(--color-dark); font-weight: 700; display: inline-block; margin-top: 1rem; }
.faq{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* --- Services Phares --- */
.services {
    padding: 10px 0;
    text-align: center;
}


/* FOOTER */
footer { background: #020617; color: #94A3B8; padding: 4rem 0; font-size: 0.9rem; text-align: center; }

@media (max-width: 768px) {
    .nav-links { display: none; }
    .split-layout, .split-layout:nth-child(even) { flex-direction: column; }
    .hero h1 { font-size: 2rem; }
}

/* --- CONTENU ALTERNÉ --- */

/* Conteneur global pour espacer les blocs */
.section-content {
    padding: 0rem 0;
	padding-bottom : 4rem;
    display: flex;
    flex-direction: column;
    gap: 3rem; /* Espace entre chaque section */
}

/* Style de base pour chaque bloc */
.split-layout {
    display: flex;
    align-items: center;
    
    padding: 3rem;       /* Important : Espace interne pour que le texte ne colle pas aux bords */
    border-radius: 24px; /* Bords bien arrondis (Moderne) */
    transition: transform 0.3s ease;
}

/* --- LOGIQUE D'ALTERNANCE --- */

/* 1. LES IMPAIRS (1er, 3ème...) : Fond BLANC type "Carte" */
.split-layout:nth-child(odd) {
    background-color: #FFFFFF; /*background-color: transparent; /* Se fond dans le gris clair du site */
    box-shadow: 0 10px 40px rgba(0,0,0,0.03); /* Ombre très douce pour le relief */
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 2. LES PAIRS (2ème, 4ème...) : Fond TRANSPARENT (Gris du site) + Inversion sens */
.split-layout:nth-child(even) {
    background-color: #f1f5f9; /*background-color: transparent; /* Se fond dans le gris clair du site */
	box-shadow: 0 10px 40px rgba(0,0,0,0.03); /* Ombre très douce pour le relief */
	border: 1px solid rgba(255, 255, 255, 0.5);
    flex-direction: row-reverse;   /* Met l'image à gauche automatiquement */
}

/* --- MOBILE --- */
@media (max-width: 900px) {
    .split-layout {
        flex-direction: column !important; /* Force l'affichage vertical sur mobile */
        gap: 2rem;
        padding: 2rem;
    }
    
    /* On enlève l'inversion sur mobile pour garder Image en haut / Texte en bas partout */
    .split-layout:nth-child(even) {
        flex-direction: column !important;
    }
}

/* --- FOOTER --- */
footer {
    background: #020617; /* Fond presque noir */
    color: #94A3B8;      /* Texte gris lisible */
    padding: 4rem 0 2rem;
    font-size: 0.95rem;
    border-top: 1px solid rgba(255,255,255,0.05); /* Ligne subtile en haut */
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Colonnes responsives */
    gap: 3rem;
    margin-bottom: 3rem;
}

/* Style des colonnes */
.footer-col h4 {
    color: #fff;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.footer-tagline {
    margin-top: 1rem;
    max-width: 300px;
    line-height: 1.6;
}

/* Liens (Solutions) */
.footer-links li { margin-bottom: 0.8rem; }
.footer-links a { color: #94A3B8; transition: 0.3s; }
.footer-links a:hover { color: var(--color-green); padding-left: 5px; } /* Petit mouvement au survol */

/* Liste Contact */
.contact-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}
.contact-list a { color: #fff; font-weight: 500; }
.contact-list a:hover { color: var(--color-green); text-decoration: underline; }

/* Barre du bas */
.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
}
.footer-bottom a { color: #94A3B8; text-decoration: underline; }
.footer-bottom a:hover { color: #fff; }

/* --- ANIMATION FLASH (Via Classe) --- */

/* On garde les keyframes tels quels */
@keyframes highlight-pulse {
    0% {
        background-color: rgba(0, 230, 118, 0.2);
        box-shadow: 0 0 30px rgba(0, 230, 118, 0.4);
        transform: scale(1.02);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
        transform: scale(1);
    }
}

/* On remplace #contact:target par une classe .flash-active */
.flash-active {
    animation: highlight-pulse 2s ease-out forwards;
    border-radius: 16px;
    position: relative; /* Pour que le z-index fonctionne si besoin */
}


/* --- ACCORDÉON HISTOIRE --- */

.split-layout2 {
    /* On garde le style de la "boîte" globale */
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    overflow: hidden; /* Important pour l'animation */
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

/* 1. LE HEADER (Titre) */
.accordion-header {
    padding: 2rem 3rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    transition: background 0.3s;
}

.accordion-header:hover {
    background: #f1f5f9; /* Gris très clair au survol */
}

.accordion-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--color-dark);
}

.accordion-header .icon {
    font-size: 2rem;
    color: var(--color-green);
    font-weight: 300;
    transition: transform 0.3s ease;
}

/* 2. LE CONTENU (Caché par défaut) */
.accordion-content {
    max-height: 0; /* Hauteur 0 = caché */
    overflow: hidden;
    transition: max-height 0.5s ease-out; /* Animation fluide */
}

.accordion-body {
    padding: 3rem 3rem 3rem 3rem; /* Marges internes une fois ouvert */
    display: flex;
    align-items: center;
    gap: 4rem;
}

/* --- CLASSE ACTIVE (Quand c'est ouvert) --- */
.split-layout2.active .accordion-header .icon {
    transform: rotate(45deg); /* Le + devient une croix */
}

.split-layout2.active .accordion-content {
    max-height: 1000px; /* On autorise une grande hauteur pour afficher le contenu */
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .accordion-body {
        flex-direction: column-reverse; /* Image en haut, texte en bas */
        padding: 0 1.5rem 1.5rem 1.5rem;
        gap: 2rem;
    }
    .accordion-header {
        padding: 1.5rem;
    }
}


/* =========================================
   VERSION MOBILE (SMARTPHONE < 768px)
   ========================================= */

@media (max-width: 768px) {

    /* --- 1. GLOBAL & TEXTES --- */
    body {
        font-size: 16px; /* Taille de base lisible */
    }
    
    h1 {
        font-size: 2.2rem !important; /* Titres moins gros */
        line-height: 1.2;
    }

    h2 {
        font-size: 1.8rem !important;
    }

    .container {
        padding: 0 1.5rem; /* Marges latérales plus petites */
        width: 100%;
    }

    /* --- 2. IMAGES (Le point critique) --- */
    img {
        max-width: 100%; /* L'image ne dépassera jamais la largeur de l'écran */
        height: auto;    /* La hauteur s'adapte pour ne pas déformer */
    }

    /* --- 3. LE MENU (HEADER) --- */
    /* On transforme le menu horizontal en colonne verticale */
    
    
	
	.header-inner .nav-links.active {
		right: 0 !important; /* Le !important force l'affichage */
		visibility: visible;
		opacity: 1;
	}

    .logo-link img {
        height: 40px; /* Logo un peu plus petit */
    }

    .nav-links {
        flex-direction: column; /* Les liens les uns sous les autres */
        width: 100%;
        text-align: center;
        gap: 1rem;
        background: rgba(255,255,255,0.05); /* Petit fond pour distinguer le menu */
        padding: 1rem;
        border-radius: 12px;
    }

    .nav-links li {
        margin: 0;
        width: 100%;
    }

    .nav-links a {
        display: block; /* Zone de clic plus large pour le doigt */
        padding: 0.5rem;
    }

    /* Le bouton "Contact" prend toute la largeur */
    header .btn {
        width: 100%; 
        display: block;
        text-align: center;
        margin-top: 0.5rem;
    }

    /* --- 4. SECTIONS "SPLIT-LAYOUT" (Histoire, Batteries...) --- */
    /* On passe de "Gauche/Droite" à "Haut/Bas" */
    
    .split-layout, 
    .split-layout:nth-child(even), 
    .split-layout:nth-child(odd) {
        flex-direction: column !important; /* Force l'empilement vertical */
        height: auto; /* La hauteur s'adapte au contenu */
        padding: 0;   /* On gère le padding dans les enfants */
        overflow: hidden; /* Sécurité */
    }

    /* L'image prend toute la largeur en haut */
    .split-image {
        width: 100%;
        height: 250px; /* Hauteur fixe pour l'image sur mobile */
        min-height: 250px;
    }

    /* Le texte en dessous */
    .split-text {
        width: 100%;
        padding: 2rem 1.5rem; /* Espace autour du texte */
    }

    /* --- 5. ACCORDÉON (Page Histoire) --- */
    .accordion-body {
        flex-direction: column-reverse; /* Texte en bas, Image en haut */
        gap: 1.5rem;
        padding: 0 1.5rem 2rem 1.5rem;
    }

    /* --- 6. FOOTER --- */
    .footer-grid {
        grid-template-columns: 1fr; /* Une seule colonne */
        gap: 2rem;
        text-align: center;
    }
    
    .contact-list li {
        justify-content: center; /* Centre les icônes contact */
    }
}

/* --- BLOC IMAGE + TEXTE CENTRÉ --- */
.image-text-block {
    display: flex;          /* Active le mode Flexbox */
    align-items: center;    /* LE SECRET : Centre verticalement le texte par rapport à l'image */
    gap: 2rem;              /* Espace entre l'image et le texte */
    margin: 2rem 0;         /* Espace autour du bloc global */
}

/* Gestion de l'image */
.img-side {
    width: 250px;           /* Largeur fixe pour l'image (ajustez selon vos besoins) */
    height: auto;           /* Garde les proportions */
    flex-shrink: 0;         /* Empêche l'image de s'écraser si le texte est long */
}

/* Gestion du texte */
.text-side h3 {
    margin-bottom: 0.5rem;
    color: var(--color-dark);
}

.text-side p {
    margin: 0;
    color: #64748b;
}

/* --- VERSION MOBILE --- */
@media (max-width: 768px) {
    .image-text-block {
        flex-direction: column; /* Empile les éléments verticalement */
        text-align: center;     /* Centre le texte */
        gap: 1rem;
    }
    
    .img-side {
        width: 120px; /* Un peu plus petit sur mobile */
    }
}
/* --- LE BOUTON BURGER (Caché sur PC, Visible sur Mobile) --- */
.hamburger {
    display: none; /* Caché par défaut sur PC */
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #fff; /* Couleur des barres (blanc sur fond sombre) */
    border-radius: 2px;
    transition: 0.3s;
}

/* =========================================
   VERSION MOBILE (SMARTPHONE < 768px)
   ========================================= */
@media (max-width: 768px) {

    /* --- 1. BOUTON BURGER --- */
    .hamburger {
        display: flex; /* On le rend visible */
        z-index: 2000; /* Très haut pour être toujours cliquable */
    }

    /* Animation de la croix */
    .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

    /* --- 2. LE MENU MOBILE (PANNEAU LATÉRAL) --- */
    .nav-links {
        display: flex;          /* Important : Flex pour aligner le contenu */
        position: fixed;        /* Fixé à l'écran */
        top: 0;
        right: -100%;           /* Caché à droite par défaut */
        width: 75%;             /* Largeur du panneau */
        height: 100vh;          /* Toute la hauteur */
        background-color: #0f172a; /* Fond sombre */
        flex-direction: column; /* Vertical */
        align-items: center;
        justify-content: center;
        transition: right 0.4s ease; /* Animation fluide */
        z-index: 1500;          /* Juste en dessous du bouton burger (2000) */
        padding-top: 60px;
        box-shadow: -5px 0 20px rgba(0,0,0,0.5); /* Ombre portée */
    }

    /* --- 3. L'ÉTAT OUVERT --- */
    /* C'est cette classe que le JS ajoute */
    .nav-links.active {
        right: 0 !important; /* On ramène le menu sur l'écran */
    }

    /* Style des liens */
    .nav-links ul {
        flex-direction: column;
        width: 100%;
        padding: 0;
    }

    .nav-links li {
        margin: 1.5rem 0;
        text-align: center;
    }

    .nav-links a {
        font-size: 1.2rem;
        color: #fff;
        display: block;
    }

    /* Correction Header */
    .header-inner {
        justify-content: space-between; /* Ecarte le logo et le burger */
        align-items: center;
        padding: 1rem;
    }
}

/* --- Bande de Confiance --- */
.trust-bar {
    background-color: var(--color-primary);
    color: white;
    padding: 10px 0;
    text-align: center;
    font-size: 0.9rem;
}

/* Nouvelles règles pour aligner l'icône et le texte */
.trust-content {
    /* Utilisation de Flexbox pour l'alignement horizontal */
    display: flex; 
    align-items: center; /* Centrage vertical des éléments */
    justify-content: center; /* Centrage horizontal du groupe entier */
}

/* Style de l'icône pour la rendre petite et espacée */
.trust-icon {
   
    height: 60px;
    margin-right: 20px; /* Espacement entre l'icône et le texte */
    /* Vous pouvez ajouter un filtre pour la faire apparaître en blanc si l'image source est noire */
    /*filter: invert(100%);*/ 
}

/* Ajustement du paragraphe pour le centrage */
.trust-content p {
    margin: 0; /* Suppression des marges par défaut du paragraphe */
}

/* --- CTA Calculateur --- */
.cta-calculator {
    background-color: var(--color-bg-light);
    text-align: center;
    padding: 60px 20px;
    margin-top: 40px;
}

.cta-calculator h2 {
    color: var(--color-primary);
    font-size: 2rem;
}

.cta-calculator p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

/* --- Styles spécifiques au Calculateur --- */
.calculator-section {
    padding: 80px 0;
    background-color: white;
    text-align: center;
}

.calculator-section h2 {
    color: var(--color-primary);
    font-size: 2.5rem;
}

.intro-calc {
    font-size: 1.1rem;
    margin-bottom: 40px;
    color: #666;
}

.calculator-form {
    max-width: 600px;
    margin: 0 auto 30px;
    padding: 30px;
    background-color: var(--color-bg-light);
    border-radius: 12px;
    text-align: left;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

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

.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-primary);
}

.calculator-form input[type="number"],
.calculator-form input[type="text"],
.calculator-form input[type="email"],
.calculator-form input[type="tel"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 1rem;
}

.radio-group label {
    display: inline-block;
    margin-right: 20px;
    font-weight: 400;
}

.btn-full-width {
    width: 100%;
    margin-top: 20px;
}

/* --- Résultat --- */
.result-box {
    max-width: 600px;
    margin: 40px auto;
    padding: 30px;
    border: 3px solid var(--color-secondary);
    border-radius: 12px;
    background-color: #e6fff0; /* Fond très clair pour démarquer */
}

.result-box h3 {
    color: var(--color-primary);
    font-size: 1.8rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.estimation-value {
    font-size: 3rem;
    color: var(--color-primary);
    font-weight: 900;
    margin: 10px 0 20px 0;
}

.highlight {
    color: var(--color-secondary);
    font-weight: 700;
}

.hidden {
    display: none;
}
/* --- CARROUSEL PROJETS --- */
.projects-section {
    padding: 0rem 0;
    background: #0f172a; /* Fond sombre pour faire ressortir les photos */
    color: white;
    text-align: center;
}

.section-title { margin-bottom: 2rem; font-size: 2rem; color: var(--color-secondary);}

.carousel-container {
    width: 100%;
    overflow: hidden; /* Cache la barre de scroll moche */
}

.carousel-track {
    display: flex;
    gap: 20px;
    padding: 20px 50px; /* Marge interne pour ne pas coller aux bords */
    overflow-x: auto;   /* Active le scroll horizontal */
    scroll-snap-type: x mandatory; /* Force l'arrêt sur une image */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Fluidité sur iOS */
}

/* Cache la barre de défilement (Scrollbar) */
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track { -ms-overflow-style: none; scrollbar-width: none; }

/* --- CARTES PROJET --- */
.project-card {
    flex: 0 0 500px; /* Largeur fixe de chaque carte */
    height: 400px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    scroll-snap-align: center; /* L'image s'arrête au centre */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* Effet au survol souris */
.project-card:hover {
    transform: scale(1.05); /* Grossit légèrement */
    z-index: 10;
    box-shadow: 0 15px 30px rgba(34, 197, 94, 0.4); /* Ombre verte */
}

.card-img {
    width: 100%; height: 100%;
    object-fit: cover; /* Remplit tout l'espace sans déformer */
    transition: 0.3s;
}

/* Overlay sombre avec le titre */
.card-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    padding: 20px;
    transform: translateY(10px);
    transition: 0.3s;
}

.card-overlay h3 { margin: 0; font-size: 1.2rem; }
.btn-see { 
    font-size: 0.9rem; color: #22c55e; opacity: 0; transition: 0.3s; 
    display: block; margin-top: 5px; font-weight: bold;
}

/* Animation au survol */
.project-card:hover .card-overlay { padding-bottom: 30px; }
.project-card:hover .btn-see { opacity: 1; }
.hidden-details { display: none; } /* On cache les détails dans la carte */


/* --- MODALE (POPUP DÉTAIL) --- */
.modal {
    display: none; /* Caché par défaut */
    position: fixed; z-index: 2000;
    left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.8); /* Fond noir transparent */
    align-items: center; justify-content: center;
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: #1e293b;
    width: 90%; max-width: 1000px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn { from {transform: scale(0.8); opacity:0;} to {transform: scale(1); opacity:1;} }

.modal-body { display: flex; flex-direction: row; }

#modal-img {
    width: 80%; height: 400px; object-fit: cover;
}

.modal-text { padding: 40px; width: 50%; text-align: left; }
.modal-text h2 { color: #22c55e; margin-top: 0; }
.modal-text ul { padding-left: 20px; color: #cbd5e1; line-height: 1.8; }

.close-modal {
    position: absolute; top: 15px; right: 20px;
    color: white; font-size: 40px; font-weight: bold;
    cursor: pointer; z-index: 10;
}

/* RESPONSIVE MODALE (Mobile) */
@media (max-width: 768px) {
    .modal-body { flex-direction: column; }
    #modal-img { width: 100%; height: 200px; }
    .modal-text { width: 100%; padding: 20px; }
    .project-card { height: 350px; flex: 0 0 260px; } /* Cartes plus petites */
}

/* Container Principal */
.projects-section {
    background: #0f172a;
    padding: 3rem 0;
    color: white;
    text-align: center;
    overflow: hidden; /* Empêche le dépassement horizontal global */
}

.slider-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 450px; /* Hauteur fixe pour le slider */
}

/* Zone Masque */
.slider-container {
    width: 100%;
    overflow: hidden; /* Cache ce qui dépasse */
    padding: 20px 0;
}

/* La Piste qui bouge */
.slider-track {
    display: flex;
    gap: 0; /* On gère l'espacement via le padding des cartes */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Mouvement fluide */
    cursor: grab;
}

/* Les Cartes */
.project-card {
    min-width: 33.33%; /* 3 cartes visibles par défaut sur PC */
    height: 350px;
    position: relative;
    transition: all 0.5s ease;
    opacity: 0.4;       /* Sombre par défaut */
    transform: scale(0.8); /* Petit par défaut */
    padding: 0 15px;    /* Espace entre les images */
    box-sizing: border-box;
}

.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* État ACTIF (Au centre) */
.project-card.active {
    opacity: 1;
    transform: scale(1.1); /* Zoom sur l'image centrale */
    z-index: 10;
}

.project-card.active img {
    box-shadow: 0 15px 30px rgba(34, 197, 94, 0.5); /* Lueur verte */
    border: 2px solid #22c55e;
}

/* Infos Texte (visible seulement sur l'active) */
.card-infos {
    position: absolute; bottom: 20px; left: 0; right: 0;
    opacity: 0; transition: 0.3s;
    pointer-events: none;
}
.project-card.active .card-infos { opacity: 1; pointer-events: auto; }
.card-infos h3 { margin: 0; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.card-infos p { color: #22c55e; font-weight: bold; margin: 5px 0 0; }

/* BOUTONS FLÈCHES */
.nav-btn {
    background: rgba(255,255,255,0.1);
    color: white;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 50%;
    z-index: 20;
    transition: 0.2s;
}
.nav-btn:hover { background: #22c55e; color: #0f172a; }

/* MOBILE */
@media (max-width: 768px) {
    .project-card { min-width: 70%; } /* Sur mobile, une grosse image au centre */
    .slider-wrapper { height: 400px; }
    .project-card.active { transform: scale(1.05); }
    .nav-btn { position: absolute; top: 50%; transform: translateY(-50%); }
    .prev-btn { left: 10px; }
    .next-btn { right: 10px; }
}