/* ==========================================================================
   1. BASES ET FOND D'ÉCRAN (BG3)
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
    /* Couleur de secours sombre */
    background-color: #1a1a1a; 
    /* Ton image de fond */
    background-image: url('image/bg3.webp');
    background-position: center;
    background-attachment: fixed; /* L'image reste fixe au scroll */
    background-size: cover;
    background-repeat: no-repeat;
    
    /* Empêche le scroll horizontal parasite */
    overflow-x: hidden; 
}

main {
    flex: 1; /* Pousse le footer en bas de page */
}

/* ==========================================================================
   2. STRUCTURE DES SECTIONS (PC)
   ========================================================================== */
.presentation,
.bertilleSiteCap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px; /* Espace entre texte et image */
    max-width: 1200px;
    margin: 60px auto; 
    padding: 20px;
    width: 100%;
}

/* --- LES IMAGES DE PROJET --- */
.presentation img,
.ImageBertilleSite {
    width: 100%;
    max-width: 450px; /* Taille sur grand écran */
    height: auto;
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.8);
    border: 1px solid greenyellow;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.presentation img:hover,
.ImageBertilleSite:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(173, 255, 47, 0.4);
}

/* --- LES BLOCS DE TEXTE (TRANSPARENCE) --- */
.divTextPresentation,
.divTextSiteBertille {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px;
    border-radius: 25px;
    width: 100%;
    max-width: 650px;
    
    /* EFFET GLASSMORPHISM (Transparence + Flou) */
    background-color: rgba(51, 51, 51, 0.85); /* Gris #333 à 85% d'opacité */
    backdrop-filter: blur(10px); /* Floute le fond BG3 derrière la div */
    -webkit-backdrop-filter: blur(10px); /* Pour Safari */
    
    border: 1px solid rgba(173, 255, 47, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* --- CONTENU TEXTUEL --- */
p {
    color: white;
    font-family: "Orbitron", sans-serif;
    letter-spacing: 2px;
    line-height: 1.7; /* Plus d'espace entre les lignes pour la lisibilité */
    font-size: 1rem;
}

span {
    color: greenyellow;
    font-weight: bold;
}

.h1Presentation,
.h1SiteBertille {
    font-family: "Bruno Ace SC", sans-serif;
    color: greenyellow;
    text-align: center;
    margin-bottom: 25px;
    font-size: 2rem;
    
}

.legendeBordeaux,
.legendeImageBertilleSite {
    text-align: center;
    font-family: "Megrim", system-ui;
    color: white;
    margin-top: 15px;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* ==========================================================================
   3. RESPONSIVE DESIGN (Le cœur de l'adaptation)
   ========================================================================== */

/* --- TABLETTES (Moins de 1024px) --- */
@media screen and (max-width: 1024px) {
    .presentation,
    .bertilleSiteCap {
        gap: 30px;
        padding: 40px;
    }

    .divTextPresentation,
    .divTextSiteBertille {
        padding: 35px;
    }
}

/* --- PETITES TABLETTES & MOBILES LARGES (Moins de 900px) --- */
@media screen and (max-width: 900px) {
    .presentation,
    .bertilleSiteCap {
        flex-direction: column-reverse; /* Texte en haut, Image en bas */
        text-align: center;
        margin: 40px auto;
    }

    .presentation img,
    .ImageBertilleSite {
        max-width: 400px; /* L'image s'adapte à la largeur mobile */
        margin: 0 auto;
    }

    .divTextPresentation,
    .divTextSiteBertille {
        max-width: 100%; /* Le bloc texte prend toute la largeur */
    }
}

/* --- SMARTPHONES (Moins de 480px) --- */
@media screen and (max-width: 480px) {
    .presentation,
    .bertilleSiteCap {
        padding: 15px;
        margin: 20px auto;
    }

    .divTextPresentation,
    .divTextSiteBertille {
        padding: 25px 15px; /* Moins de padding interne pour gagner de la place */
    }

    .h1Presentation,
    .h1SiteBertille {
        font-size: 1.8rem;
        letter-spacing: 2px;
    }

    p {
        font-size: 0.9rem;
        letter-spacing: 1px;
        line-height: 1.5;
    }

    .presentation img,
    .ImageBertilleSite {
        max-width: 100%; /* L'image utilise tout l'écran disponible */
    }
}