/* Styles généraux */

html, body {
    height: 100%;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
}
/* Accueil */
main .ACC {
    height: 100vh; /* occupe toute la hauteur de la page */
    display: flex;
    justify-content: center;
    align-items: center;
}
.Bienvenue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5em;  
    padding: 2em 3em;
    text-align: center;
    flex-wrap: wrap; /* permet de passer à la ligne si nécessaire */
    background-image: url("../img/accueil.jpg");
    background-size: cover;
    background-position: center center;
    color: white;

       /* arrondir uniquement les coins du bas */
    border-bottom-left-radius: 90px;   /* coin inférieur gauche */
    border-bottom-right-radius: 90px;  /* coin inférieur droit */
    overflow: hidden;                  /* pour que l'image respecte le border-radius */

}

/* Media query pour petits écrans */
@media (max-width: 600px) {
    .Bienvenue {
        flex-direction: column; /* logo au-dessus du texte */
        gap: 1em;
    }

    .Bienvenue img.logo {
        width: 120px; /* réduit la taille du logo sur mobile */
    }

    .Bienvenue h1 {
        font-size: 1.5em; /* ajuste la taille du texte */
    }
}
.LOGO {
    width: 400px; /* ajustable */
    height: auto; /* conserve les proportions */
    border-radius: 10px;
}
/*------------------------------------------------------------------------*/
.boutons {
    display: flex;       /* aligne les boutons horizontalement */
    gap: 2em;            /* espace entre les boutons */
    justify-content: center; /* centre les boutons sur la page */
    margin-top: 2em;     /* espace au-dessus */
    margin-bottom: 2em;     /* espace en dessous */
    flex-wrap: wrap; /* permet de passer à la ligne si besoin */
}

.Bouton {
    padding: 1.2em 5em;       /* taille des boutons */
    width: 10em;
    white-space: nowrap;
    font-size: 1.2em;           /* taille du texte */
    font-weight: bold;
    color: white;
    text-decoration: none;
    background-color: #1e1e1e;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.Bouton:hover {
    background-color: #ffcc00; /* couleur au survol */
}
/*------------------------------------------------------------------------*/
.actus-section{
    margin-top: 6em;
}
.actus-container-scroll {
    display: flex;
    gap: 3em;
    overflow-x: auto;
    padding-right: 1em;
    padding-left: 1em;
    padding-bottom: 2em;
    padding-top: 1em;

    margin-bottom: 3em;
}

.actu {
    min-width: 50%;
    flex-shrink: 0;
    height: 350px;
    border: 2px solid #ccc;
    border-radius: 12px;
    display: flex;
    flex-direction: column;    /* important : empile le contenu verticalement */
    justify-content: flex-end;
    color: white;
    text-decoration: none;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden; /* important pour éviter que le texte dépasse */
    position: relative;
}

.actu:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.actu-content {
    background: rgba(192,57,43,1);
    width: 100%;
    padding: 1em;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    box-sizing: border-box;   /* pour que padding soit inclus */
    overflow-wrap: break-word; /* pour couper les mots trop longs */
    white-space: normal; /* pour forcer le retour à la ligne */
}

.full-text {
    display: none; /* texte complet caché par défaut */
    margin-top: 0.5em;
    font-size: 0.95em;
    width: 100%; 
    white-space: normal;      /* permet le retour à la ligne */
    word-wrap: break-word;    /* coupe les mots trop longs */
    box-sizing: border-box
}
/*---------------------------------------*/
h3 {
    font-weight: 400;
}
.short-text {
    font-weight: 700;
    font-size: 1.2em;
}
/*------------------------------------------------------------------------*/
.adresse {
    margin: 2em;
    font-family: Arial, Helvetica, sans-serif;
    color: #1e1e1e;
    line-height: 1.6em;
    max-width: 72.3em; 
    margin: 0 auto;
    background-color: #f0f0f0; /* gris clair */
    border-radius: 12px;       /* bords arrondis */
    padding: 2em;            /* augmente l’espace interne */
    margin-bottom: 2em;

}
.adresse h1{
    margin-bottom: 1em;
    font-size: 2em;
}
.adresse h2{
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-size: 1.4em;
}
.adresse a{
    color: #1e1e1e;
    text-decoration: none;
    font-weight: bold;
}
.adresse a:hover{
    color: #ffcc00;
}
.ctr {
    text-align: center;
}
.map-container {
    display: flex;
    justify-content: center;
}
.map {
    width: 100%;   /* largeur contrôlée et centrée */
    height: 30em;
    border: 0;
    border-radius: 12px;
}
/* Fin de Accueil */
/* debut de CLUB */
.nouvelle-inscription {
    text-align: center;
    margin: 2em 0;
}

.nouvelle-inscription a {
    display: inline-block;
    padding: 0.8em 1.5em;
    background-color: rgba(192,57,43,1);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    transition: background-color 0.3s;
}

.nouvelle-inscription a:hover {
    background-color: #1e1e1e;
}

.monclubpage {
    padding: 1.5em;          /* espace entre le contenu et la bordure */
  /*  background-image: url('../img/bois.jpg'); */
    background-size: cover;       /* l'image couvre toute la zone */
    background-position: center;  /* centre l'image */
    background-repeat: no-repeat; /* évite la répétition */
}

#avis-nv {
    background-color:rgba(192,57,43,1);
    color: white;
}


/* Fin de CLUB */
/*debut arbitre*/
/*(coper collé de "adresse" en haut, mais avec un nom différent)*/
/*(utiliser adresse pour des div avec des liens clickable et div  et divrouge pour des div avec un bouton)*/
.div {
    margin: 2em;
    font-family: Arial, Helvetica, sans-serif;
    color: #1e1e1e;
    line-height: 1.6em;
    max-width: 72.3em; 
    margin: 0 auto;
    background-color: #f0f0f0; /* gris clair */
    border-radius: 12px;       /* bords arrondis */
    padding: 2em;            /* augmente l’espace interne */
    margin-bottom: 2em;
    margin-top: 2em;

}
.div h1{
    margin-bottom: 1em;
    font-size: 2em;
}
.div h2{
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-size: 1.4em;
}
.div a{
    color: #white;
    text-decoration: none;
    font-weight: bold;
}

.div p{
    margin-bottom: 2em;
}

.lien{
    color: #1e1e1e;
    text-decoration: none;
    font-weight: bold;
}

.lienco{
      color: #1e1e1e;
    text-decoration: none;
    font-weight: bold;
}

.lienco:hover{
    color: #ffcc00;
}

.lien:hover{
    color: #ffcc00;
}
/*pareil en rouge : */
.divrouge {
        margin: 2em;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6em;
    max-width: 72.3em; 
    margin: 0 auto;
    border-radius: 12px;       /* bords arrondis */
    padding: 2em;            /* augmente l’espace interne */
    margin-bottom: 2em;
    margin-top: 2em;

    background-color:rgba(192,57,43,1);
    color: white;
}

.divrouge h1{
    margin-bottom: 1em;
    font-size: 2em;
}
.divrouge h2{
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-size: 1.4em;
}
.divrouge a{
    color: #white;
    text-decoration: none;
    font-weight: bold;
}

.divrouge p{
    margin-bottom: 2em;
}

.divrouge .Bouton{
    color: #1e1e1e;
    background-color: #f0f0f0; /* gris clair */
}

.divrouge .Bouton:hover {
    background-color: #ffcc00; /* couleur au survol */
}

.divrouge .lien{
    color: white;
}

.divrouge .lien:hover{
    color: #ffcc00; /* couleur au survol */
}
/*fin arbitre*/
/*___________________________________________________________________________________________*/
/*début RIL*/
.membre {
  display: flex;
  align-items: center; /* aligne verticalement */
  gap: 15vw; /* espace entre image et texte */
}

.membre img {
  width: 150px; /* taille de l'image */
}

.texte {
  flex: 1; /* prend tout l’espace restant */
  display: flex;

  /*justify-content: center;*/
  align-items: center;
}

.nom{
    font-size: 2em;
}
/*fin RIL*/
/*-----------------------------------------------------------------*/
/*debut document*/
.menu {
    display: flex;       /* aligne les boutons horizontalement */
    gap: 2em;            /* espace entre les boutons */
    justify-content: center; /* centre les boutons sur la page */
    margin-top: 2em;     /* espace au-dessus */
    margin-bottom: 2em;     /* espace en dessous */
    flex-wrap: wrap; /* permet de passer à la ligne si besoin */
}

.doc {
    padding: 1.2em 5em;       /* taille des boutons */
    width: 10em;
    white-space: nowrap;
    font-size: 1.2em;           /* taille du texte */
    font-weight: bold;
    color: white;
    text-decoration: none;
    background-color: rgba(192,57,43,1);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;

   justify-content: center; 
}
.doc:hover {
    background-color: #ffcc00; /* couleur au survol */
}

.doc::before {
    content: "📄 ";
}
/*fin document*/
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------ */
/*debut calendrier*/
.calendriers {
    display: flex;
    flex-direction: column; /* les met les uns sous les autres */
    gap: 10px; /* espace entre les boutons */
    padding: 1em;
}

.semaine {
     padding: 1.2em 5em;       /* taille des boutons */
    width: 10em;
    white-space: nowrap;
    font-size: 1.2em;           /* taille du texte */
    font-weight: bold;
    color: white;
    text-decoration: none;
    color: #1e1e1e;
    background-color: #f0f0f0; /* gris clair */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;

    display: flex;
    align-items: center;   /* centre verticalement */
    justify-content: flex-start; /* aligne à gauche */
    gap: 10px;             /* espace entre icône et texte */
    width: 95%;
    padding: 15px;
}

.semaine::before {
    content: "📄 ";
}

.semaine:hover {
    background-color: #ffcc00; /* couleur au survol */
}

/*fin calendrier*/
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------ */
/*          -----------            images              ------------*/

#couperil {
    background-image: url("../img/couperilsombre.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#papier {
    background-image: url("../img/papier.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#listing {
    background-image: url("../img/sallesombre.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#intro {
    background-image: url("../img/football3.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#bibli {
    background-image: url("../img/bibliothèque.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#lois {
    background-image: url("../img/arbitre.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#rapport {
    background-image: url("../img/football1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#perma {
    background-image: url("../img/football2.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#regle {
    background-image: url("../img/arbitre2.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#ref {
    background-image: url("../img/ballon2sombre.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#cours {
    background-image: url("../img/ballon1sombre.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------ */
/* Barre de navigation-HEADER */

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8em 2em;
    background-color: #1e1e1e; /*pour le rouge ril : rgba(192,57,43,1)*/
    color: black;
}
.logo-container {
    display: flex;
    align-items: center;
    gap: 0.7em;
    background: white;
    padding: 0.5em 1.5em; /* espace accru */
    border-radius: 60px;
    overflow: hidden;
    border: 10px solid transparent; /* bordure invisible */
}
.logo-container a {
    display: flex;
    align-items: center;
}
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit; /* conserve la couleur héritée */
}
.logo {
    width: 80px;
    height: auto;
    background: #fff;
    border-radius: 10px;
    object-fit: cover;
}
.site-title {
    font-size: 1.4em;
    font-weight: bold;
    margin-left: 0.7em;
}
.nav-links a:first-child {
    padding-left: 1.2rem; /* espace entre l'ovale et le premier lien */
    border-left: 10px solid transparent; /* bordure invisible à gauche */
}
.nav-links a {
    font-weight: bold;
    text-transform: uppercase;
        color: white;
    text-decoration: none;
    font-size: 1em;
    transition: 0.3s;
}
.nav-links {
    display: flex;
    gap: 1.5em;
}
.nav-links a:hover {
    color: #ffcc00;
}
@media (max-width: 700px) {
    .navbar {
        flex-direction: column;
        gap: 1em;
    }
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1em;
    }
}
/* FIN de la Barre de navigation-HEADER */

/* DEBUT du FOOTER */

.footer {
    background-color: #1e1e1e; /*pour le rouge ril : rgba(192,57,43,1)*/
    color: black;
    padding: 2em 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5em;
}

.footer-brand .logo-container {
    padding: 0.5em 1.5em;
    border-radius: 60px;
    overflow: hidden;
    border: 10px solid transparent;
}

.footer-links {
    display: flex;
    gap: 2em;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-links a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #ffcc00;
}

.footer-copy {
    font-size: 0.9em;
    opacity: 0.8;
    color: white;
}
/* FIN du FOOTER */

/* DEBUT de page contact */
body .CONTACT{
    padding: 200px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.contact-page {
    margin-top: 4em;
    margin-bottom: 4em;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-info {
    background-color: #f0f0f0; /* gris clair */
    padding: 2em 3em;
    border-radius: 15px;
    max-width: 50em;

}

.contact-info h1 {
    text-align: center;
    margin-bottom: 1.5em;
    font-size: 2em;
    color: #1e1e1e;
}

.contact-info p {
    margin-bottom: 1em;
    line-height: 1.5em;
    font-size: 1em;
}

.contact-info a {
    color: #1e1e1e;
    text-decoration: none;
    font-weight: bold;
}

.contact-info a:hover {
    color: #ffcc00;
}
/* FIN de page contact */

/* DEBUT de page Mentions légales */
body .MENTION{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.disclaimer-page {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em 0;
}

.disclaimer-info {
    background-color: #f0f0f0; /* gris clair */
    padding: 2em 3em;
    border-radius: 15px;
    max-width: 50em;

}

.disclaimer-info h1 {
    text-align: center;
    margin-bottom: 1.5em;
    font-size: 2em;
    color: #1e1e1e;
}

.disclaimer-info h2 {
    margin-top: 2em;
    margin-bottom: 1em;
    color: #1e1e1e;
}

.disclaimer-info p {
    margin-bottom: 1em;
    line-height: 1.5em;
    font-size: 1em;
}

.disclaimer-info a {
    color: #1e1e1e;
    text-decoration: none;
    font-weight: bold;
}

.disclaimer-info a:hover {
    color: #ffcc00;
}
/*---------------------------------------------------------*/
/*         -----------  nom de page en jaune  ------           */

#calendrier{
    color: #ffcc00;
}

#inscription{
    color: #ffcc00;
}

#resultat{
    color: #ffcc00;
}

#arbitrage{
    color: #ffcc00;
}

#ril{
    color: #ffcc00;
}

#document{
    color: #ffcc00;
}