/*!
Theme Name: amicale
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: amicale
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

amicale is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
        margin: 0 auto;
}

@font-face {
    font-family: 'robotobold';
    src: url('asset/img/font/roboto-bold-webfont.woff2') format('woff2'),
         url('asset/img/font/roboto-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotoregular';
    src: url('asset/img/font/roboto-regular-webfont.woff2') format('woff2'),
         url('asset/img/font/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'enriquetabold';
    src: url('asset/img/font/enriqueta-bold-webfont.woff2') format('woff2'),
         url('asset/img/font/enriqueta-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'enriquetaregular';
    src: url('asset/img/font/enriqueta-regular-webfont.woff2') format('woff2'),
         url('asset/img/font/enriqueta-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'alataregular';
    src: url('alata-regular-webfont.woff2') format('woff2'),
         url('alata-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

h1{
    font-family: 'alataregular';
    font-size: 3rem;
}

h2{
    font-family: 'alataregular';
        font-size: 2rem;
        margin: 0 auto;
        margin-top: 2rem;
        margin-bottom: 2rem;
}

 h3 {
    font-family: 'enriquetabold';
}


a {
    color: #000000;
    font-family: 'robotobold';
    font-size: 20px;
    /* text-decoration: none;
    transition: all .4s; */
}

p {
    font-family: 'robotoregular';
        font-size: 18px;
        margin: 0 auto;

}

.tablepress {
    font-size: 1.5rem;
}

/* .tableau{
    margin: 3rem;
} */

.tableau table,
table.event-table {
    width: 100%;
    border-collapse: collapse;
    margin: 3rem;
}

.tableau-r{
    overflow-x:auto;
    margin: 0 auto;
    margin-top: 2rem;
    margin-bottom: 2rem;



}
table {
  border-collapse: collapse;
}


.tableau-r table th,
.tableau-r table td,
.tableau table th,
.tableau table td,
table.event-table th,
table.event-table td {
    border: 3px solid #ccc;
    padding: 6px 10px;
    text-align: center;
}





.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}


.wrap2 {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 10px;
}

/* #home{background-color: #70AD47; } */



/* HEADER */


/* Le header général */
 #header {
    position: relative;
    overflow-x: hidden;
    z-index: 1;              /* au-dessus des images */
    color:#000;           
}

/* Les 4 images en fond */
.header-bg {
    position: absolute;
    display: flex;
    inset: 0;
    z-index: -1;           
}

.header-bg img {
    width: 25%;
    height: 75%;
    object-fit: cover;
    opacity: 0.25;           /* ajustable */
    filter: grayscale(20%);  /* optionnel */
}


.titre {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 10;
}

.logo {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.logo img {
    width: 200px;
    height: auto;
    padding: 2rem 0;
}

/* #header .menu{
    display: flex;
    position: relative;
    z-index: 20;

}

#header .menu li{

    gap: 2rem;
    list-style: none;
    margin-bottom: 2rem;
}

#header nav {
    margin-top: 10rem;
}

#header nav li a {
    transition: color 3s;
} */




.marron a { background-color: #8B5A2B; }
.jaune a { background-color: #f1c40f; }
.rouge a { background-color: #e74c3c; }
.vert a { background-color: #27ae60; }
.bleu a { background-color: #3498db; }



/* conteneur de tuiles */
ul.menu {
    display: flex;
    gap: 30px;                 /* espace entre les tuiles */
    justify-content: center;   /* centre */
    padding: 0;
    list-style: none;
}

/* chaque tuile */
ul.menu li {
    flex: 1 1 200px;            /* flexible jusqu’à ~200px min */
    max-width: 180px;           /* limite la largeur pour garder 1–2 lignes */
    height: 50px;              /* hauteur uniforme */
    /* background: #000000;         couleur de fond personnalisée */

    text-align: center;
    transition: transform 1s;
}

/* le lien en pleine tuile */
ul.menu li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50%;
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    padding: 10px;
    border-radius: 20px;
}

/* hover / focus */
ul.menu li:hover,
ul.menu li:focus-within {
    transform: scale(1.3);
}




/* home */

#home{
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Wrap spécifique à home */

#home {
    margin: 0 auto;          /* centre le conteneur */
    text-align: center;      /* centre tout le texte à l’intérieur */
    display: block;          /* plus besoin de flex ici */
}

/* Paragraphe centré et lisible */
#home p {
    max-width: 700px;        /* limite la largeur du texte */
    margin: 0 auto;          /* centre le bloc <p> */
    text-align: center;      /* centre le texte à l’intérieur */
}

#home .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* affiche toute l'image */
  object-position: center center; /* centre le sujet */
  background-color: #000; /* couleur des bandes vides */
  display: block;
}



#home .wrap2 .splide__slide {
  height: 300px; /* hauteur fixe du slider, adapte si besoin */
    margin: 2rem;
}

#home .wrap2 .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* pour garder toute l'image */
  object-position: center center; /* recentre les portraits */
  background-color: #000; /* couleur des bandes pour portrait */
  display: block;
}

/* #atelierfond{
    background-color: rgba(139, 90, 43, 0.25);
    backdrop-filter: grayscale(20%);
} */

/* #badmintonfond{
    background-color: rgba(241, 196, 15, 0.25); 
    filter: grayscale(20%); 
} */


/*footer*/

#colophon.wrap nav{
    display: flex;
    justify-content: center;
}



#colophon.wrap .menu li a{
    color: #000;
    background-color: aliceblue;


}

/* #colophon .facebook{
   background-color: #0866FF;
    
} */

/* #colophon .whatsapp{
   background-color: #25D366; 
} */




#colophon.wrap .menu {
    display: flex;
    flex-wrap: wrap;           /* autorise 2e ligne si pas assez de place */
    gap: 30px;                 /* espace entre les tuiles */
    justify-content: center;   /* centre */
    padding: 0;
    list-style: none;
}

#colophon.wrap .menu li a {
    color: #000;
    background-color: aliceblue;
    display: flex;              /* permet d'aligner l'icône au centre */
    align-items: center;        /* centrage vertical */
    height: 40px;               /* même hauteur pour tous les liens */
    padding: 0 15px;            /* espace intérieur */
}

li .facebook a {
   background-color: #0866FF;

}

li .whatsapp a {
   background-color: #25D366; 
}



#colophon.wrap .menu li a img {
    height: 100%;               /* l'image remplit la hauteur du lien */
    width: auto;                /* respecte les proportions */
    display: block;
}







@media screen and (max-width: 1100px) {}



@media screen and (max-width: 768px) {

       .menu{
            flex-wrap: wrap;

        }
        #header h1{
            font-size: 1.5rem;
            margin-top: -.8rem;;

        }

        .logo img {
    width: 100px;
        padding: 1rem 0 0;
  
}

 
    }
@media (max-width: 480px) {
  /* .menu li {
    flex: 1 1 100%; 
  } */
}