/* Réinitialisation de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.style-alex-brush {
        font-family: 'Alex Brush', cursive;  
        color: #77918A; 
        line-height: 1.5;
}
.style-roboto {
        font-family: 'Roboto', sans-serif; 
        color: #77918A; 
        line-height: 1.5;
}


.taille-28 {
    font-size: 28px; 
}
.taille-24 {
    font-size: 24px; 
}
.taille-20 {
    font-size: 20px; 
}
.taille-18 {
    font-size: 18px; 
}
.taille-16 {
    font-size: 16px; 
}
.taille-14 {
    font-size: 14px; 
}
.taille-12 {
    font-size: 12px; 
}
.taille-10 {
    font-size: 10px; 
}

/* Styles généraux pour le corps de la page */
body {
    font-family: 'Roboto', sans-serif; 
    background-color: #FAFAF5;
    color: #77918A; 
    text-align: center;
    padding: 20px; /* Ajout d'un peu d'espace autour du contenu */
}

/* Conteneur principal pour centrer le contenu et limiter la largeur sur de grands écrans */
.container {
    max-width: 1200px; /* Limiter la largeur maximale sur un grand écran */
    margin: 0 auto; /* Centrer le conteneur */
    width: 100%; /* S'assurer qu'il prend toute la largeur disponible */
}


/* --- Logo et Image d'en-tête --- */
.logo-area {
    display: flex;     /* 1. Active le mode Flexbox sur le conteneur */
    justify-content: center;    /* 2. Centre les éléments enfants horizontalement sur l'axe principal (X) */
    align-items: center;/* Optionnel : Centre les éléments enfants verticalement sur l'axe secondaire (Y) */
}

.margin-logo-2{
    padding: 1px;
    margin-top: 2px;
}

.margin-logo-30{
    padding: 10px;
    margin-top: 5px;
}

/* Pour une image qui s'adapte à l'écran */
.image-fluide {
    max-width: 100%; /* L'image ne dépassera jamais la largeur de son parent */
    height: auto;    /* Maintient toujours les proportions */
}

/* Styles de base pour rendre les images responsives */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Pour éviter l'espace sous les images */
}

/* Conteneur principal utilisant Flexbox */
.texte-avec-images {
    display: flex; /* Active Flexbox */
    justify-content: center;  /* Centre les éléments horizontalement dans le conteneur */
    align-items: center; /* Centre les éléments verticalement (utile si les images ont des hauteurs différentes) */
    gap: 5px;     /* Ajoute un peu d'espace entre les éléments */
    max-width: 1048px;     /* Limite la largeur du conteneur pour éviter qu'il ne s'étire trop sur de grands écrans */ 
    margin: 2px auto;  /* Centre le conteneur principal sur la page */
    padding: 2px;     /* Optionnel : ajoute un peu de rembourrage interne */
}

/* Style pour le bloc de texte */
.text-content {
    /* Le texte peut prendre l'espace restant */
    display: flex; 
    flex-grow: 1; 
    justify-content: center;
    align-items: center;
    padding: 0 5px; /* Un peu de padding à gauche et à droite du texte */
}

.div-ul-li{
    display: flex; 
    flex-grow: 1; 
    max-width: 1100px; 
    justify-content: center;
}


.text-content h2 {
    font-size: 2em;
}

.text-content p {
    font-size: 1.1em;
}

/* Styles pour les images latérales (optionnel, pour ajuster leur taille) */
.side-image {
    width: 30px; /* Exemple : Largeur fixe pour les images latérales */
    height: auto;
    /* Ou vous pouvez utiliser max-width: 15%; pour qu'elles s'adaptent */
}


/* --- QR Codes Section --- */
.social-qrcodes {
    display: flex;
    justify-content: center; /* Centrer les éléments */
    gap: 40px; /* Espacement entre les QR codes */
    margin-top: 40px;
    padding: 0 10px; /* Petit padding pour éviter de coller les bords sur mobile */
}

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

.qrcode-image {
    width: 90px; /* Taille par défaut des QR codes */
    height: auto;
    transition: transform 0.3s ease;
}

.qrcode-item a:hover .qrcode-image {
    transform: scale(1.05); /* Effet au survol */
}

.qrcode-item p {
    margin-top: 10px;
}

/* --- Gestion des ID --- */
#section1 {
    margin-bottom: 20px; 
}
#section2 {
    text-align: center;
}
#section2a {
    margin-bottom: 20px; 
    text-align: left;
}
#section3 {
    margin-bottom: 20px; 
}

#section4 {
    margin-top: 20px; 
}


/* CSS : Appliqué à la balise <ul> (la liste entière) */
ul {
/* 1. Retire la marge extérieure par défaut de la liste */
margin: 0; 
padding-left: 1em; 
list-style-position: inside; 
}
ul.aligne-gauche {
    margin: 0; /* Supprime la marge extérieure (espace autour de la liste) */
    padding-left: 0;    /* Supprime la marge intérieure (espace qui décale les puces) */  
    list-style-position: inside;     /* Force l'affichage de la puce à l'intérieur de la zone de contenu       pour qu'elle ne soit pas coupée si on met padding: 0. */
    list-style-type: disc; /* Indique le style de puce à utiliser (ici, un disque) */
}

/* CSS : Pour coller la puce au texte à l'intérieur de l'élément li */
li {
/* Assurez-vous qu'il n'y a pas de marge ou padding par défaut sur les éléments de liste individuels */
margin: 0;
padding: 0;
}

/* --- Responsive Design avec Media Queries --- */


@media (max-width: 600px) {
    .main-title {
        font-size: 2em;
    }

    .subtitle {
        font-size: 1em;
    }
    
    .construction-message, .follow-message {
        font-size: 1.2em;
        margin-top: 30px;
    }

    .social-qrcodes {
        display: flex;
        flex-direction: row; 
        align-items: center;
        gap: 10px; /* Espacement vertical entre les éléments */
    }

    .qrcode-image {
        width: 60px;  /*Réduire légèrement la taille sur mobile */
    }
}

/* Pour les très petits écrans, ajuster encore */
@media (max-width: 350px) {
    .qrcode-image {
        width: 10px;
    }
}

@media (max-width: 768px) {
    .texte-avec-images {
        flex-direction: column; /* Les éléments s'empilent verticalement */
        gap: 5px;
    }
    .side-image {
        height: 5px;
        width: 5px; /* Réduit la taille des images latérales sur mobile */
    }

    .social-qrcodes {
        display: flex;
        flex-direction: row; 
        align-items: center;
        gap: 10px; /* Espacement vertical entre les éléments */
    }
}

@media (max-width: 480px) {
    .side-image {
        display: none; /* Cache les images latérales sur les très petits écrans si elles prennent trop de place */
    }
    .texte-avec-images {
        gap: 0; /* Pas d'espace si les images sont cachées */
        padding: 10px;
    }
}