/* Base Styles */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #ffffff; /* Fond de page blanc */
    color: #333;
    display: flex; /* Utilisation de Flexbox pour centrer le contenu */
    justify-content: center; /* Centre horizontalement */
    align-items: flex-start; /* Aligne le contenu en haut au départ, sera centré verticalement sur les petits écrans */
    min-height: 100vh; /* La hauteur minimale est de 100% de la hauteur de la fenêtre */
    overflow-x: hidden; /* Empêche le défilement horizontal */
}

.content-wrapper {
    width: 90%; /* Prend 90% de la largeur disponible */
    max-width: 800px; /* Largeur maximale du contenu */
    padding: 20px;
    text-align: center; /* Centre le texte et l'image à l'intérieur de ce conteneur */
    box-sizing: border-box; /* Inclut le padding dans la largeur/hauteur totale */
}

.responsive-image {
    max-width: 100%; /* L'image ne dépassera jamais la largeur de son conteneur */
    height: auto; /* Maintient le ratio d'aspect de l'image */
    display: block; /* Supprime l'espace sous l'image souvent causé par le `display: inline` par défaut */
    margin: 0 auto 20px auto; /* Centre l'image horizontalement et ajoute de l'espace en dessous */
    /*border-radius: 8px; /* Bords légèrement arrondis pour l'image */
   /* box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Ombre légère pour l'image */
}

h1 {
    font-size: 2.5em; /* Taille de police pour le titre */
    margin-bottom: 15px; /* Espace sous le titre */
    color: #0056b3; /* Couleur bleue pour le titre */
}

p {
    font-size: 1.1em; /* Taille de police pour les paragraphes */
    line-height: 1.6; /* Hauteur de ligne pour une meilleure lisibilité */
    margin-bottom: 10px; /* Espace sous chaque paragraphe */
    max-width: 700px; /* Largeur maximale pour le texte pour éviter des lignes trop longues */
    margin-left: auto;
    margin-right: auto; /* Centre le paragraphe si sa largeur est inférieure à max-width */
}

/* Media Query pour les petits écrans (mobiles) */
@media (max-width: 768px) {
    .content-wrapper {
        width: 95%; /* Prend un peu plus de largeur sur les petits écrans */
        padding: 15px;
    }

    h1 {
        font-size: 2em; /* Réduit la taille du titre */
    }

    p {
        font-size: 1em; /* Réduit la taille du texte */
    }

    body {
        align-items: center; /* Centre verticalement le contenu sur les petits écrans */
        padding: 20px 0; /* Ajoute un peu de padding vertical pour éviter que le contenu ne touche les bords */
    }
}

/* Media Query pour les très petits écrans */
@media (max-width: 480px) {
    h1 {
        font-size: 1.8em;
    }

    p {
        font-size: 0.95em;
    }
}