/* --- HERO SECTION --- */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60px 0 40px 0;
    gap: 50px;
}

.hero-content { flex: 1; padding-left: 80px; }

.app-header {
    display: flex; align-items: center; gap: 20px; margin-bottom: 20px;
}

.app-icon-large {
    width: 80px; height: 80px;
    border-radius: 18px;
    /* Si tu as une icône image, remplace le SVG par <img src="..."> */
    background: linear-gradient(135deg, var(--accent), #005f87);
    display: flex; align-items: center; justify-content: center;
}
.app-icon-large svg { width: 40px; height: 40px; fill: white; }

.hero h1 { font-size: 2.5rem; line-height: 1.2; }

/* Conteneur pour aligner les boutons */
.hero-btns {
    display: flex;
    gap: 10px;
    margin: 25px 0 10px 0;
    flex-wrap: nowrap; /* Empêche le saut de ligne sur desktop/tablette */
}

/* Style de base des boutons modifié */
.btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px 10px 16px; /* Haut Droite Bas Gauche */
    border-radius: 8px;
    background-color: var(--accent);
    color: white;
    font-weight: bold;
    font-size: 0.95rem;
    line-height: 1;
    white-space: nowrap;
}

/* L'icône */
.btn-download .material-icons {
    font-size: 20px !important;
    line-height: 1;
    display: flex;
    align-items: center;
    /* On retire le transform si on a ajusté le padding du bouton */
}

/* Le texte */
.btn-download span {
    padding-top: 2px;
    display: flex;
    align-items: center; /* Aligne le texte et le small sur le même centre */
    line-height: 1;
}

/* Le poids du fichier */
.btn-download span small, 
.btn-download small {
    font-size: 0.75rem !important; 
    font-weight: normal !important;
    margin-left: 5px;
    opacity: 0.8;
}

/* Style secondaire pour le bouton "Version en ligne" */
.btn-outline {
    background-color: transparent;
    border: 2px solid var(--accent);
    color: var(--accent);
}

.btn-outline:hover {
    background-color: var(--accent);
    color: white;
}

/* Alignement des icônes */
.material-icons {
    font-size: 20px;
}

/* Ajustement Mobile */
@media (max-width: 480px) {
    .hero-btns {
        flex-direction: column; /* Boutons l'un sur l'autre sur petit téléphone */
    }
    .btn-download {
        justify-content: center; /* Centre le contenu en mobile */
    }
}
.btn-download:hover { background-color: var(--accent-hover); }
.asterix {font-size: 0.5em; font-style: italic; }
/* IMAGE MOCKUP */
.hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
}
/* Style pour ton image importée */
.hero-visual img {
    max-width: 250px; /* Limite la largeur pour pas que ça explose */
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6)); /* Ombre portée jolie */
}

/* --- SECTIONS COMMUNES --- */
.section-title {
    font-size: 1.8rem; margin-bottom: 20px; color: #fff;
    border-left: 4px solid var(--accent); padding-left: 15px;
}


section.about p, .feature-list { padding-left: 20px; }
.sub-title { font-weight: bold; font-size: 1.1em; padding-left: 10px; }
.about { padding: 40px 0; max-width: 800px; }
.feature-list li { margin-bottom: 8px; position: relative; padding-left: 25px; }
.feature-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--accent); }

/* --- SCREENSHOTS --- */
.screenshots-container {
    display: flex; gap: 15px; overflow-x: auto; padding-bottom: 20px;
}
.screenshot-item {
    flex: 0 0 180px; border-radius: 10px; overflow: hidden;
}
/* Style de la Lightbox */
.lightbox {
    display: none; /* Caché par défaut */
    position: fixed;
    z-index: 2000;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
}

.lightbox-content {
    max-width: 90%;
    max-height: 85vh;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.close-lightbox {
    position: absolute;
    top: 20px; right: 30px;
    color: white;
    font-size: 40px;
    cursor: pointer;
}

.lightbox-nav {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.lightbox-nav button {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    font-size: 30px;
    padding: 15px;
    cursor: pointer;
    border-radius: 50%;
}
.lightbox-nav button:hover { background: var(--accent); }
/* =========================================
   RESPONSIVE (MOBILE & TABLETTE)
   ========================================= */
@media (max-width: 768px) {

    /* HERO SECTION MOBILE */
    .hero {
        flex-direction: column; /* Empile verticalement */
        text-align: center;
        gap: 30px;
        padding-top: 30px;
    }

    .hero-content { order: 1; padding-left: 0; } /* Texte en premier */
    .hero-visual  { order: 2; margin-top: 20px; } /* Image en dessous */

    .app-header {
        flex-direction: column;
        justify-content: center;
    }

    .hero h1 { font-size: 2rem; }
    
    /* Ajustements divers */
    .container { padding: 0 15px; }
    .hero-visual img { max-width: 80%; margin: 0 auto; }
    section.about p, .feature-list { padding-left: 5px; }