/* 
   --------------------------------------------------------
   Styles de base et mise en page globale (Remplacement des BR)
   --------------------------------------------------------
*/

/* 1. Assure que le body prend toute la hauteur de l'écran et utilise Flexbox pour centrer son contenu */
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif; /* À remplacer par la police utilisée si elle est spécifique */
    color: #000; /* À remplacer par la couleur du texte si elle est spécifique */
    min-height: 100vh; /* Le body occupe au moins 100% de la hauteur visible de la fenêtre */
    display: flex; /* Active Flexbox sur le body */
    justify-content: center; /* Centre horizontalement le contenu principal (.container) */
    align-items: center; /* Centre verticalement le contenu principal (.container) */
    text-align: center; /* Centre le texte à l'intérieur des blocs */
    /* Supprimez toutes les anciennes règles "idGenerated" spécifiques au body ici si elles existent */
}

/* 2. Le conteneur principal qui structure la page (Header, Main, Footer) */
.container {
    width: 90%;
    max-width: 800px; /* Limite la largeur sur les grands écrans */
    display: flex;
    flex-direction: column; /* Organise les éléments (titre, image, contact) verticalement */
    gap: 3rem; /* Crée un espacement constant entre les sections (header, main, footer) */
    /* Remplace tous les sauts de ligne (<br>) que vous aviez avant */
}

/* 
   --------------------------------------------------------
   Styles spécifiques aux éléments
   --------------------------------------------------------
*/

/* 3. Le titre principal H1 (Ancien .CharOverride-2) */
.site-title {
    font-size: 3rem; /* Ajustez la taille selon votre design */
    font-family:"Avenir Black", sans-serif;
    margin: 0; /* Important pour ne pas avoir de marge par défaut qui perturbe le centrage Flexbox */
}

/* 4. L'image GIF */
.image-wrapper img.site-logo {
    max-width: 100%; /* S'assure que l'image ne dépasse pas la largeur du conteneur sur mobile */
    height: auto;
    /* Ajoutez ici les marges si vous avez besoin d'un espacement spécifique autour de l'image, 
       mais le 'gap' du .container gère déjà l'espace haut/bas */
}

/* 5. Les informations de contact (Ancien .CharOverride-1) */
.contact-info p {
    font-size: 0.8rem; /* Ajustez la taille selon votre design */
    font-family:"Avenir Book", sans-serif;
    line-height: 1.4;
    margin: 0;
}

/* Style des liens dans le footer */
.contact-info a {
    color: inherit; /* Les liens gardent la même couleur que le texte parent */
    font-family:"Avenir Book", sans-serif;
    text-decoration: none; /* Enlève le soulignement par défaut si vous ne le voulez pas */
}

.contact-info a:hover {
    text-decoration: underline; /* Ajoute un soulignement au survol */
}