/* /public_html/askclub-kwango.com/assets/css/style.css - Styles personnalisés (Minimaliste) */

/* --- Variables CSS --- */
:root {
    /* Palette de couleurs */
    --color-primary: #6b45f1; /* Violet */
    --color-secondary: #8a63f2; /* Violet plus clair */
    --color-accent: #45a2f1; /* Bleu */
    --color-text-dark: #212529; /* Texte foncé */
    --color-text-muted: #6c757d; /* Texte muted (pour textes secondaires sur fonds clairs) */
    --color-background-light: #f8f9fa; /* Fond léger (pour sections claires) */
    --color-white: #fff; /* Blanc */
    --color-grey-dark: #343a40; /* Gris très foncé (comme bg-dark de Bootstrap) */
    --color-grey-medium: #6c757d; /* Gris moyen (comme bg-secondary de Bootstrap) */


    /* Dégradé principal (Adapté à votre palette) */
    /* Remplacer par des couleurs qui correspondent à votre thème si ROUGE n'est pas souhaité */
    --gradient-start: var(--color-primary); /* Ex: Utiliser la couleur primaire */
    --gradient-end: var(--color-accent); /* Ex: Utiliser la couleur accent */
    --gradient-main: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
    --gradient-reversed: linear-gradient(to left, var(--gradient-start), var(--gradient-end));
    /* Exemple de dégradé violet-bleu : */
    /* --gradient-main: linear-gradient(to right, #6b45f1, #45a2f1); */


    /* Typographie - Utilisation de Poppins pour tout */
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
    --font-heading: 'Poppins', sans-serif; /* Poppins pour les titres */
    --font-body: 'Poppins', sans-serif;    /* Poppins pour le corps du texte */

    /* Espacement */
    --spacing-section-vertical: 80px; /* Padding vertical des sections sur desktop */
    --spacing-card-padding: 20px; /* Padding à l'intérieur des cartes */
}

/* --- Styles Généraux --- */
html, body {
    height: 100%; /* Essentiel pour le sticky footer basé sur la hauteur de la vue */
    margin: 0;
    padding: 0; /* Assurer qu'il n'y a pas de padding par défaut qui fausse la hauteur */
    box-sizing: border-box; /* Inclure padding et border dans la taille des éléments */
}
*, *::before, *::after {
    box-sizing: inherit; /* Appliquer box-sizing à tous les éléments */
}


body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--color-text-dark);
    background-color: var(--color-white); /* Fond blanc par défaut pour le contenu */
    overflow-x: hidden; /* Empêche le débordement horizontal */
    scroll-behavior: smooth; /* Défilement doux pour les liens internes */

    /* STICKY FOOTER avec Flexbox */
    display: flex;
    flex-direction: column; /* Organise les enfants (nav, wrapper contenu, footer) en colonne */
    min-height: 100vh; /* Assure que le corps prend au moins toute la hauteur de la vue */
}

/* Le wrapper qui contient tout le contenu variable de la page */
.site-content-wrapper {
    flex-grow: 1; /* Permet à ce wrapper de prendre tout l'espace disponible, poussant le footer vers le bas */
    /* Le padding-top de 65px est déjà géré par la div ajoutée après la navbar dans header.php */
}


h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-dark); /* Titres sombres par défaut sur fond clair */
    margin-bottom: 0.5em;
    line-height: 1.2;
    font-weight: 700; /* Poppins Bold */
    text-transform: none; /* Désactive la transformation en majuscules par défaut */
}

/* Style spécifique pour les titres de section (override les styles généraux si nécessaire) */
.section-heading {
    font-size: 2rem; /* Ajuster la taille */
    font-weight: 700;
    text-transform: uppercase; /* Titres de section en majuscules */
    letter-spacing: 1.5px; /* Espacement pour les titres en majuscules */
    margin-bottom: calc(var( --spacing-section-vertical) / 6); /* Moins d'espace après le titre */
    position: relative;
    padding-bottom: 15px; /* Espace pour la ligne du bas */
}

.section-heading::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 4px; /* Épaisseur de la ligne */
    width: 70px; /* Largeur de la ligne */
    background: var(--gradient-main); /* Ligne avec le dégradé */
    border-radius: 2px;
}


/* Ajustement des marges pour les sections Bootstrap py-5 */
/* Appliquer ce padding aux sections principales de contenu */
section.py-5 {
    padding-top: var(--spacing-section-vertical);
    padding-bottom: var(--spacing-section-vertical);
}

/* Fond Gradient pour certaines sections */
.custom-bg-gradient {
    background: var(--gradient-main);
    color: var(--color-white); /* Texte blanc sur fond coloré */
}
.custom-bg-gradient h1, .custom-bg-gradient h2, .custom-bg-gradient h3, .custom-bg-gradient h4, .custom-bg-gradient h5, .custom-bg-gradient h6 { color: var(--color-white); } /* S'assurer que les titres sont blancs */
.custom-bg-gradient .text-muted { color: rgba(255, 255, 255, 0.8) !important; } /* Muted blanc sur fond coloré */


.custom-bg-gradient-reversed {
    background: var(--gradient-reversed);
    color: var(--color-white);
}
.custom-bg-gradient-reversed h1, .custom-bg-gradient-reversed h2, .custom-bg-gradient-reversed h3, .custom-bg-gradient-reversed h4, .custom-bg-gradient-reversed h5, .custom-bg-gradient-reversed h6 { color: var(--color-white); }
.custom-bg-gradient-reversed .text-muted { color: rgba(255, 255, 255, 0.8) !important; }


/* --- Styles de la Barre de Navigation Publique (Minimaliste) --- */
.navbar-minimalist {
    padding-top: 15px; /* Padding vertical ajusté */
    padding-bottom: 15px; /* Padding vertical ajusté */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--color-white); /* Fond blanc par défaut */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Ombre légère */
    z-index: 1030; /* Assure que la navbar est au-dessus du contenu */
}

.navbar-minimalist.scrolled {
    /* Styles quand la navbar est scrollée (ex: si elle devient opaque ou change d'ombre) */
    background-color: var(--color-white); /* Reste blanc opaque */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); /* Ombre plus marquée */
}

.navbar-minimalist .navbar-brand {
    font-family: var(--font-heading);
    font-size: 1.7rem; /* Taille de police du brand ajustée */
    font-weight: 700;
    color: var(--color-text-dark) !important; /* Couleur sombre */
}

/* Style pour le Logo dans la Navbar Brand (Responsive) */
.navbar-minimalist .navbar-brand img {
    height: 45px; /* Hauteur par défaut pour mobile (ajustez 45px si besoin) */
    width: auto; /* Conserver le ratio d'aspect */
    transition: height 0.3s ease; /* Animation douce lors du changement de taille */
}

/* Ajuster la hauteur du logo pour les écrans plus larges (à partir du breakpoint 'lg' de Bootstrap) */
@media (min-width: 992px) { /* Pour les écrans de 992px de large et plus */
    .navbar-minimalist .navbar-brand img {
        height: 60px; /* Hauteur souhaitée sur desktop */
    }
}

.navbar-minimalist .navbar-nav .nav-link {
    color: var(--color-text-dark) !important; /* Liens sombres */
    font-weight: 500; /* Poppins Medium */
    transition: color 0.3s ease;
    text-transform: none; /* Retire la transformation en majuscules */
    margin-left: 15px; /* Espacement entre les liens (utilisez margin-left au lieu de margin-right pour le dernier lien) */
    font-family: var(--font-body);
}
.navbar-minimalist .navbar-nav .nav-item:first-child .nav-link {
    margin-left: 0; /* Pas de marge à gauche pour le premier lien */
}


.navbar-minimalist .navbar-nav .nav-link:hover,
.navbar-minimalist .navbar-nav .nav-link.active {
    color: var(--color-primary) !important; /* Couleur primaire (violet) au survol et actif */
}

/* --- Styles du Hamburger Menu (.navbar-toggler) --- */
.navbar-minimalist .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.1); /* Bordure légère */
    /* Assurez-vous que l'icône elle-même a une bonne couleur */
}

.navbar-minimalist .navbar-toggler-icon {
    /* Le style de l'icône est généralement un background-image SVG */
    /* On peut le modifier pour changer sa couleur si le style par défaut de Bootstrap ne convient pas */
    /* Exemple pour rendre l'icône en couleur texte sombre */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3csvg%3e");
    /* La valeur rgba(33, 37, 41, 0.75) correspond à var(--color-text-dark) avec une opacité */
    /* Si vous utilisez une couleur primaire violette : */
    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28107, 69, 241, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); */

}

/* --- Styles de la Section Hero Minimaliste (avec Carousel de fond) --- */
.hero-section-minimal {
    position: relative; /* Essentiel pour positionner les enfants absolument par rapport à cette section */
    width: 100%;
    min-height: 85vh; /* Définit la hauteur minimale de la section Hero (85% de la vue) */
    display: flex; /* Utiliser flexbox pour centrer le contenu principal verticalement */
    align-items: center; /* Centrer les éléments enfants sur l'axe vertical */
    justify-content: center; /* Centrer les éléments enfants sur l'axe horizontal si besoin */
    text-align: center; /* Centrer le texte à l'intérieur du conteneur de texte */
    overflow: hidden; /* Important pour cacher toute partie des images du carousel qui dépasserait */
}

/* Styles pour que le carousel et ses éléments remplissent la section Hero et soient en arrière-plan */
/* Ces éléments doivent être positionnés absolument par rapport à .hero-section-minimal */
.hero-section-minimal .carousel,
.hero-section-minimal .carousel-inner,
.hero-section-minimal .carousel-item {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%; /* Doivent prendre toute la hauteur de .hero-section-minimal */
}

.hero-section-minimal .carousel-item img {
   width: 100%;
   height: 100%; /* L'image prend 100% de la taille de son conteneur (.carousel-item) */
   object-fit: cover; /* Important pour que l'image couvre la zone sans se déformer */
   z-index: 0; /* S'assure qu'il est tout au fond */
   position: relative; /* Nécessaire pour que z-index fonctionne */
}


/* Overlay pour le gradient - S'assurer qu'il est au-dessus du carousel */
.hero-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Utilise le dégradé "noir léger" choisi */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)); /* Opacité réduite à 0.3 */
    z-index: 1; /* Entre le carousel (0) et le contenu (2) */
}

/* Contenu Hero (Titre, sous-titre, boutons) - Positionnement ABSOLU et centrage précis */
.hero-section-minimal .container {
   position: relative; /* Changer de absolute à relative. Le parent .hero-section-minimal est flexbox et centre déjà le contenu. */
   /* top: 50%; // Plus nécessaire avec flexbox sur le parent */
   /* left: 50%; // Plus nécessaire avec flexbox sur le parent */
   /* transform: translate(-50%, -50%); // Plus nécessaire avec flexbox sur le parent */
   z-index: 2; /* S'assure qu'il est au premier plan */
   width: 100%; /* Important pour que le container prenne la largeur complète et que le padding Bootstrap s'applique */
   max-width: 960px; /* Optionnel: limite la largeur maximale pour une meilleure lisibilité sur de très grands écrans */
   /* Les paddings horizontaux de Bootstrap (.container) assurent déjà un espace sur les côtés */
    padding-left: 15px; /* Ajouter padding si besoin en plus de Bootstrap */
    padding-right: 15px; /* Ajouter padding si besoin en plus de Bootstrap */
}

/* Ajustement pour le centrage flexbox sur le conteneur texte si nécessaire */
/* Si le contenu n'est pas centré dans le .container, ajoutez ceci */
/* .hero-section-minimal .container > * { margin-left: auto; margin-right: auto; } */


/* Assurez-vous que les styles spécifiques au texte dans le hero sont corrects (couleur, etc.) */
.hero-section-minimal h1 {
    color: var(--color-white); /* Doit être blanc pour être visible sur le fond sombre/coloré */
    font-size: 3.8rem; /* Exemple de taille sur desktop */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}
.hero-section-minimal .lead {
    color: rgba(255, 255, 255, 0.9); /* Un blanc légèrement transparent pour le sous-titre */
    font-size: 1.6rem; /* Exemple de taille sur desktop */
    margin-bottom: 30px;
    font-weight: 400;
}

/* Styles pour les Boutons de la Section Hero */
/* Cibler tous les boutons à l'intérieur de la section hero */
.hero-section-minimal .btn {
    /* Styles de base pour tous les boutons Hero */
    font-size: 1.1rem; /* Taille de police par défaut, ajustée pour le responsive plus tard */
    padding: 12px 25px; /* Padding par défaut, ajusté pour le responsive plus tard */
    border-width: 2px; /* Épaisseur de bordure constante */
    font-weight: 600; /* Poids de police légèrement plus marqué (Poppins 600) */
    transition: all 0.3s ease; /* Transition douce pour tous les changements */
    border-radius: .5rem; /* Rayon de bordure Bootstrap par défaut */
    text-transform: uppercase; /* Optionnel: texte en majuscules pour un look "call to action" */
    letter-spacing: 1px; /* Optionnel: espacement des lettres */
}

/* Style spécifique pour le bouton "Prochains Matchs" (Outline Blanc par défaut) */
.hero-section-minimal .btn-outline-light {
    color: var(--color-white); /* Texte blanc */
    border-color: var(--color-white); /* Bordure blanche */
    background-color: transparent; /* Fond transparent */
}
.hero-section-minimal .btn-outline-light:hover {
    background-color: var(--color-white); /* Fond blanc au survol */
    color: var(--color-primary); /* Texte violet au survol (adaptez si vous préférez une autre couleur) */
    border-color: var(--color-white); /* Bordure blanche au survol */
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2); /* Ombre légère au survol */
}

/* Style spécifique pour le bouton "Dernières Actus" (Custom Outline - par défaut Blanc sur Hero) */
/* Redéfinissons custom-btn-outline-dark dans ce contexte (Hero) */
.hero-section-minimal .custom-btn-outline-dark {
     color: var(--color-white); /* Texte blanc par défaut sur Hero */
     border-color: var(--color-white); /* Bordure blanche par défaut sur Hero */
     background-color: transparent; /* Fond transparent */

     /* Si vous voulez que ce bouton soit un peu différent, exemple : fond subtil */
     /* background-color: rgba(255, 255, 255, 0.1); */
}

.hero-section-minimal .custom-btn-outline-dark:hover {
    background-color: var(--color-primary); /* Fond violet au survol (adaptez si vous préférez une autre couleur) */
    color: var(--color-white); /* Texte blanc au survol */
    border-color: var(--color-primary); /* Bordure violette au survol */
     box-shadow: 0 4px 10px rgba(107, 69, 241, 0.3); /* Ombre violette au survol */
}


/* Styles pour les indicateurs et contrôles du carousel (si vous voulez les personnaliser) */
/* Les contrôles et indicateurs Bootstrap par défaut sont stylés en blanc/gris clair.
   Si vous voulez les adapter, ajoutez des règles ici, par exemple: */
 .hero-section-minimal .carousel-control-prev,
 .hero-section-minimal .carousel-control-next,
 .hero-section-minimal .carousel-indicators {
      z-index: 3; /* Assurez-vous qu'ils sont cliquables au-dessus du contenu (z-index 2) */
 }
 /* Exemple pour les indicateurs */
 /* .hero-section-minimal .carousel-indicators button {
      background-color: rgba(var(--color-primary), 0.7); // Indicateurs semi-transparents de couleur primaire
      border: 1px solid var(--color-white);
 }
 .hero-section-minimal .carousel-indicators button.active {
       background-color: var(--color-primary); // Indicateur actif de couleur primaire opaque
 } */


/* --- Styles des Cartes (Minimaliste) --- */
.card {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.card-body { padding: var(--spacing-card-padding); }


/* --- Styles Spécifiques aux Sections (Minimaliste) --- */
/* Match Card */
.match-card-minimal .team-logo-minimal {
    width: 45px; height: 45px;
    object-fit: contain;
}
.match-card-minimal .score {
    font-family: var(--font-heading); /* Poppins pour les scores */
    font-size: 2.5rem;
    font-weight: 700;
}
.match-card-minimal .score.win { color: #28a745; }
.match-card-minimal .score.lose { color: #dc3545; }
.match-card-minimal .score.draw { color: #ffc107; }


/* About Image */
.about-img-minimal { border-radius: 8px; }

/* Founder Card */
.founder-card-minimal .founder-img-minimal {
    width: 100px; height: 100px;
    object-fit: cover;
    border: 3px solid var(--color-primary); /* Bordure avec la couleur primaire (violet) */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Standings Table */
.standings-card-minimal { border: 1px solid #e0e0e0; }
.standings-table-minimal { margin-bottom: 0; }
.standings-table-minimal th, .standings-table-minimal td {
    vertical-align: middle;
    border-top: 1px solid #e9ecef;
    padding: 12px 15px;
}
.standings-table-minimal tbody tr:first-child th,
.standings-table-minimal tbody tr:first-child td { border-top: none; }
.standings-table-minimal thead th { border-bottom: 2px solid #dee2e6; }

.standings-table-minimal .top-position {
    /* Fond légèrement accentué pour le premier */
    background-color: rgba(var(--color-accent), 0.1); /* Utilise la couleur accent (bleu) */
    font-weight: 700;
}
.standings-table-minimal .team-logo-minimal {
    width: 25px; height: 25px;
    object-fit: contain;
}

/* Gallery Item */
.gallery-img-minimal {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.gallery-img-minimal:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* News Card */
.news-card-minimal .card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* Testimonial Card */
.testimonial-card {
    border: 1px solid #e0e0e0;
    border-left: 4px solid var(--color-primary); /* Bordure avec la couleur primaire (violet) */
    border-radius: 8px;
    padding: 15px;
    background-color: var(--color-white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.testimonial-card blockquote { margin-bottom: 0; }
.testimonial-card blockquote p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text-dark);
}
.testimonial-card blockquote footer {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Contact Form */
.contact-form-minimal .form-label {
    font-weight: 500;
    color: var(--color-text-dark);
}
.contact-form-minimal .form-control {
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 10px 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-form-minimal .form-control:focus {
    border-color: var(--color-primary); /* Bordure focus avec la couleur primaire (violet) */
    box-shadow: 0 0 0 0.25rem rgba(107, 69, 241, 0.25); /* Ombre focus avec la couleur primaire */
}


/* --- Styles du Footer Publique (Minimaliste) --- */
/* Le footer est positionné automatiquement grâce au sticky footer Flexbox */
.site-footer { /* Utilise .site-footer comme dans le HTML corrigé */
    background-color: var(--color-grey-medium); /* Utilise la couleur grise moyenne */
    color: var(--color-light); /* text-light est une classe Bootstrap, pas une variable CSS */
    font-size: 0.9rem;
    /* padding-top/bottom gérés par py-5 dans le HTML */
    /* border-top: 1px solid #eee; */ /* Optionnel: bordure supérieure */
    flex-shrink: 0; /* Empêche le footer de rétrécir si le contenu est très long */
}

.site-footer .social-icons .social-icon {
    color: var(--color-white); /* Icônes blanches sur fond sombre */
    font-size: 1.4rem;
    margin: 0 10px;
    transition: color 0.3s ease;
}
.site-footer .social-icons .social-icon:hover { color: var(--color-primary); } /* Survol avec la couleur primaire (violet) */

.site-footer a {
    color: var(--color-light); /* Liens clairs sur fond sombre */
    text-decoration: none;
    transition: color 0.3s ease;
}
.site-footer a:hover { color: var(--color-primary); } /* Survol avec la couleur primaire (violet) */

/* Correction spécifique pour les liens du footer si text-light n'est pas assez fort */
.site-footer .text-light { color: var(--color-white) !important; } /* S'assurer que text-light est bien blanc */


/* --- Responsivité (Media Queries) --- */

/* Ajustements pour les tablettes et mobiles (écrans < 992px) */
@media (max-width: 991.98px) {
    :root { --spacing-section-vertical: 50px; }

    h1 { font-size: 2rem; } /* Ajuster la taille */
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
     .section-heading { font-size: 1.8rem; } /* Ajuster la taille */

    /* Ajustements pour la section Hero sur les tablettes */
    .hero-section-minimal { min-height: 70vh; }
    .hero-section-minimal h1 { font-size: 3rem; }
    .hero-section-minimal .lead { font-size: 1.3rem; margin-bottom: 2rem;}


    /* Ajustements pour la Navbar sur mobile */
    .navbar-minimalist .navbar-nav .nav-link { margin-left: 0; text-align: center; } /* Pas de marge gauche, centré dans le collapse */
    .navbar-minimalist .navbar-nav { margin-top: 10px; } /* Marge au-dessus des liens dans le menu déplié */
    .navbar-minimalist .navbar-toggler { margin-right: 0; } /* Pas de marge à droite pour le toggler */

     /* Si vous avez un bouton ou lien Admin dans la navbar */
    .navbar-minimalist .navbar-nav .nav-item .btn {
        width: 80%; /* Bouton Admin prend 80% de la largeur */
        margin: 5px auto !important; /* Centre le bouton et ajoute de l'espace */
        display: block; /* Le bouton devient un bloc */
        text-align: center;
    }

     /* Ajustement des colonnes du Footer sur Tablette si besoin */
     .site-footer .col-sm-6 { margin-bottom: 30px; } /* Ajuster l'espace entre les colonnes empilées sur 'sm' */
}

/* Ajustements pour les petits mobiles (écrans < 576px) */
@media (max-width: 575.98px) {
    :root { --spacing-section-vertical: 40px; }

    h1 { font-size: 1.8rem; } /* Ajuster la taille */
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.3rem; }
     .section-heading { font-size: 1.6rem; } /* Ajuster la taille */


    /* Ajustements pour la section Hero sur les petits mobiles */
    .hero-section-minimal { min-height: 60vh; }
    .hero-section-minimal h1 { font-size: 2.5rem; /* Ajuster la taille */ letter-spacing: 1px; }
    .hero-section-minimal .lead { font-size: 1.1rem; /* Ajuster la taille */ margin-bottom: 20px;}

    /* Ajustements des boutons Hero sur les très petits écrans (déjà géré en partie par les classes Bootstrap d-grid gap-3) */
    .hero-section-minimal .btn {
        font-size: 1rem; /* Réduire la taille de police */
        padding: 10px 20px; /* Réduire le padding */
         /* width: 100%; */ /* Déjà fait par d-grid */
        text-align: center;
    }
     /* Le gap (espace) entre les boutons est déjà géré par la classe gap-3 sur le parent d-grid */
     .hero-section-minimal .gap-3 { gap: 10px; } /* Réduire le gap si nécessaire */


     /* Ajustement des colonnes du Footer sur Mobile (elles sont déjà en col-12 et empilées) */
     .site-footer .col-12.mb-4 { margin-bottom: 20px; } /* Réduire l'espace entre les colonnes */
     .site-footer .social-icons .social-icon { font-size: 1.3rem; margin: 0 8px; }
     .site-footer .footer-links a { margin: 0 8px; }


}

/* Styles pour les animations AOS */
/* AOS gère la plupart des styles, ceci assure une transition douce */
[data-aos] {
    transition-property: opacity, transform;
}