/* --- BASE --- */
body {
    background: #1f3a2d;
    font-family: Georgia, serif;
    margin: 0;
    min-height: 100vh;
}

.banner img {
    width: 100%;
    height: 300px !important; /* Une hauteur moyenne pour voir le bâtiment */
    object-fit: cover !important;
    object-position: center 35%; /* 25% c'est le "juste milieu" entre le ciel et le milieu */
    border-radius: 20px;
    border: 3px solid #faf599;
}
/* --- BANNIÈRE --- */
.banner {
    position: relative;
}

h1 {
    /* ... tes autres styles (size, position, etc.) ... */
    color: white; /* La couleur de l'intérieur des lettres (par exemple blanc) */
    font-size: 80px;
    color: #d4b24a;
    font-family: "Sugar", cursive; /* Vérifie si la police Sugar est chargée */
    text-shadow: 2px 2px 6px rgba(0,0,0,0.5);
    position: absolute;
padding:10px;
width:100%;    
left: 20px;
    top: 20px;
    margin: 0;
}

h2 {
    font-size: 42px;
    color: #1f3a2d;
    position: absolute;
    right: 80px;
    bottom: 40px;
    text-align: right;
    text-shadow: 1px 1px 0 #d4b24a, -1px -1px 0 #d4b24a, 1px -1px 0 #d4b24a, -1px 1px 0 #d4b24a;
}

/* --- CONTENEUR ET PRÉSENTATION --- */
.container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.accueil {
    display: block; /* On repasse en block pour mieux gérer les positions */
    width: 100%;
    padding-bottom: 50px;
}

.presentation {
    color: #d4b24a;
    width: 100%;
    max-width: 700px;
    margin: 20px auto;
    font-family: "Harrington", serif;
    text-align: center;
}

.texte-accueil {
    line-height: 1.4;
    font-size: 21px;
}

.invitation {
    font-size: 26px;
    margin: 30px 0;
    color: #d4b24a;
}

/* --- CARTE ET DOCUMENTS --- */
.carte-lieu img {
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 20px auto;
    border-radius: 10px;
    border: 3px solid #d4b24a;
    transition: 0.3s;
}

.carte-lieu img:hover {
    transform: scale(1.02);
    box-shadow: 0 0 15px #f5c76b;
}

.categories {
    clear: both;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
    width: 100%;
}

.categories a {
    text-decoration: none;
    color: #d4b24a;
    font-size: 20px;
    border: 1px solid transparent;
    padding: 5px 10px;
}

@keyframes tombe {
    0% { transform: translateY(-20px) rotate(0deg); }
    100% { transform: translateY(100vh) rotate(360deg); }
}

.documents h3 {
    color: #d4b24a;
    font-size: 15px;
    margin: 0 0 5px 0;
    font-family: Comic Sans MS;
}

.documents select {
    font-family: Comis Sans MS;
    font-size: 15px;
    width: 100%;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
}

/* LE BLOC "ESPACE ADHÉRENTES" */
.documents {
    font-family: Comis Sans MS;
    position: absolute !important;
    right: -260px;
    top: 0px !important;  
    width: 180px;          
    z-index: 1000;          
    background: rgba(31, 58, 45, 0.9); 
    padding: 15px;
    border-radius: 15px;
    border: 2px solid #d4b24a;
    text-align: center;
}

/* Uniquement pour le bouton Espace Adhérentes */
.documents a, .btn-adherentes {
    font-family: "Comic Sans MS", "Comic Sans", cursive !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    display: block !important; /* Pour qu'il prenne bien toute la place */
    text-align: center !important;
}


/* LE BOUTON CALENDRIER */
.btn-calendrier {
    position: absolute !important;
    right: -260px;           
    top: 125px !important; 
    width: 180px;          
    display: block !important;
    z-index: 1000;         
    background-color: #1f3a2d;
    color: #d4b24a;
    border: 2px solid #d4b24a;
    padding: 15px;
    font-family: Comic Sans MS;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 10px;
    transition: 0.3s;
}


/* LE BOUTON TUTO */
.btn-tuto {
    position: absolute !important;
    right: -260px;           
    top: 195px !important; 
    width: 180px;          
    display: flex !important;
    flex-direction: column;
    align-items: center;
    z-index: 1000;         
    background-color: #1f3a2d;
    color: #d4b24a;
    border: 2px solid #d4b24a;
    padding: 15px;
    font-family: Comic Sans MS;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 10px;
    transition: 0.3s;
}


/* LE BOUTON PHOTO */
.btn-photo {
    position: absolute !important;
    right: -260px;           
    top: 265px !important; 
    width: 180px;          
    display: flex !important;
    flex-direction: column;
    align-items: center;
    z-index: 1000;         
    background-color: #1f3a2d;
    color: #d4b24a;
    border: 2px solid #d4b24a;
    padding: 15px;
    font-family: Comic Sans MS;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 10px;
    transition: 0.3s;
}

/* LE BOUTON PRESSE */
.btn-presse {
    position: absolute !important;
    right: -260px;           
    top: 335px !important; 
    width: 180px;          
    display: flex !important;
    flex-direction: column;
    align-items: center;
    z-index: 1000;         
    background-color: #1f3a2d;
    color: #d4b24a;
    border: 2px solid #d4b24a;
    padding: 15px;
    font-family: Comic Sans MS;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 10px;
    transition: 0.3s;
}



/* Petit effet au survol pour faire pro */
.btn-calendrier:hover,
    background-color: #d4b24a;
}

.admin-bricole {
    font-family: Comic Sans MS !important;
    font-size: 10px !important; 
    color: #af8f2c !important;
    opacity: 0.5;
    text-align: center;
    margin-top: 10px;
    display: block;
}
/* Il devient un peu plus lisible quand on passe dessus */
.admin-bricole:hover {
    opacity: 0.8;
}



/*.btn-calendrier:hover, .btn-visite:hover, .categories a:hover {
    /* On remplace l'image du chariot par celle d'une pelote */
    cursor: url('https://cdn-icons-png.flaticon.com/32/3082/3082045.png'), auto !important;
    text-decoration: underline !important;/* /* Garde le souligné */
}

/*.btn-calendrier:hover, .btn-visite:hover, .categories a:hover, .documents a:hover {
    /* Le curseur devient une pelote avec des aiguilles */
    cursor: url('https://cdn-icons-png.flaticon.com/32/814/814140.png'), auto !important;
    text-decoration: underline !important;/*
}


.btn-calendrier:hover, .categories a:hover, .documents a:hover {
    /* Nouvelle tentative avec un dessin ultra-simplifié */
    cursor: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHRleHQgeT0iMjQiIGZvbnQtc2l6ZT0iMjQiPuDwn6anPC90ZXh0Pjwvc3ZnPg=="), pointer !important;
    text-decoration: underline !important;
}

/* --- 2. LE CODE POUR MOBILE (Ne s'applique QUE sur petit écran) --- */
@media screen and (max-width: 600px) {
    body {
        padding-top: 50px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Sur mobile, on annule la position de droite pour les mettre en colonne */
    .documents, .calendrier, .visiteurs {
        position: static !important;
        margin: 10px auto !important;
        right: auto !important; /* Annule le placement PC */
    }
}


@media screen and (max-width: 600px) {
    /* On cible la page d'accueil spécifiquement si elle a une structure légère */
    body {
        min-height: 100vh; /* Force la page à faire toute la hauteur de l'écran */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centre tout le contenu verticalement */
        align-items: center;    /* Centre tout horizontalement */
        padding: 20px;
        margin: 0;
    }

    /* On s'assure que les boutons ne se chevauchent pas */
    .documents, .calendrier, .visiteurs {
        margin: 10px 0 !important;
        position: static !important; /* Annule les placements bizarres */
    }
}    
    .documents, .calendrier {
        margin-top: 20px; /* Donne un peu d'air entre les boutons sur mobile */
    }
}

/* On simplifie : on enlève le chariot et on met la petite main */
.btn-calendrier:hover, 
.btn-visite:hover, 
.categories a:hover, 
.documents a:hover {
    cursor: pointer !important; /* La petite main classique et efficace */
    text-decoration: underline !important; /* Le joli souligné */
}
/* On change le curseur pour une pelote avec aiguilles */
.btn-calendrier:hover, 
.btn-visite:hover, 
.categories a:hover, 
.documents a:hover {
    cursor: url('https://img.icons8.com/ios-filled/32/yarn.png'), pointer !important;
    text-decoration: underline !important;
}

.categories a {
    position: relative;
    text-decoration: none !important;
}
.categories a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    background-color: #d4b24a;
    transition: all 0.3s ease;
}
.categories a:hover::after {
    width: 100%;
    left: 0;
}


.documents {
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4) !important;
}


.club img:hover, 
.banner img:hover {
    filter: brightness(1.1) !important; /* S'illumine au survol */
    transform: scale(1.02) !important;  /* Petit zoom très discret */

/* 3. LA LUMIÈRE : Les photos s'éclairent quand on passe dessus */
.club img, 
.banner img {
    transition: filter 0.4s ease, transform 0.4s ease !important;
    filter: brightness(0.9); /* Un poil plus sombre au repos */


/* 1. Remonter le footer (bas de page) sur l'accueil */
footer, .footer {
    margin-top: -40px !important; /* Réduit l'espace au-dessus du footer */
    padding-top: -10px !important; /* Réduit l'espace intérieur haut */
}

/* 1. Force le footer à remonter vers le contenu */
footer, .footer {
    margin-top: -40px !important; 
}

/* 2. Aspire les catégories vers le haut */
.categories, .footer-categories {
    margin-top: -30px !important;
}

/* Remonter les mentions tout en bas de la page */
.mentions, .copyright, .bas-page {
    margin-top: -30px !important; /* Aspire vers le haut */
    padding-bottom: 20px !important; /* Garde une petite marge propre avec le bord de l'écran */
    text-align: center; /* Pour que ce soit bien propre au milieu */
}

@media only screen and (max-width: 600px) {
    body {
        padding-top: 30px; /* Un peu plus d'espace sur mobile */
    }
}


/* On remplace le chariot par la pelote et les aiguilles */
.btn-calendrier:hover::before, 
.btn-visite:hover::before,
.documents a:hover::before {
    content: "🧶" !important; /* La pelote de laine */
    /* OU tu peux mettre "🧵" pour le fil ou "🥢" pour symboliser les aiguilles */
    position: absolute;
    left: 10px;
    font-size: 20px;
}

/* Si tu veux des aiguilles à droite en même temps */
.btn-calendrier:hover::after, 
.btn-visite:hover::after,
.documents a:hover::after {
    content: "🥢" !important; /* Symbolise les aiguilles */
    position: absolute;
    right: 10px;
    font-size: 20px;
}

/* 1. On supprime l'ancien symbole (le chariot) */
.btn-calendrier::before, 
.btn-visite::before, 
.documents a::before,
button::before {
    content: "" !important; /* On vide ce qu'il y avait avant */
}

/* 2. On installe la pelote de laine au survol */
.btn-calendrier:hover::before, 
.btn-visite:hover::before, 
.documents a:hover::before,
button:hover::before {
    
: "🧶" !important; /* Voici ta pelote ! */
    margin-right: 10px;
    display: inline-block;
    transition: all 0.3s;
}


/* STYLE COMMUN AUX BOUTONS */
.btn-tuto, .btn-photo {
    width: 180px;          
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #1f3a2d;
    color: #d4b24a;
    border: 2px solid #d4b24a;
    padding: 15px;
    font-family: Comic Sans MS;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 10px;
    transition: 0.3s;
    margin: 10px auto; /* Centré par défaut sur mobile */
}

/* POSITION SUR ORDINATEUR (Écrans larges) */
@media (min-width: 900px) {
    .btn-tuto {
        position: absolute;
        left: 20px; /* On le place à 20px du bord gauche */
        top: 35px;
    }
    .btn-photo {
        position: absolute;
        left: 20px;
        top: 150px;
    }
}

/* BLOC DE REMPLACEMENT TOTAL POUR MOBILE */
@media screen and (max-width: 800px) {
    
    /* 1. On réinitialise de force le bouton TUTO */
    .btn-tuto {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        margin: 20px auto !important; /* Le centre horizontalement */
        display: flex !important;
        width: 80% !important; /* S'adapte à la largeur du téléphone */
        max-width: 250px !important;
    }


    /* 3. On empêche le site de déborder à cause d'un parent trop large */
    body, html {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* 4. On force les conteneurs à ne pas cacher les boutons */
    div, section, main {
        position: static !important;
        overflow: visible !important;
    }
}