@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');

.league-spartan-regular {
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

/*------Base------*/

body{
    background: #B63342;
    background: linear-gradient(1deg,rgba(182, 51, 66, 1) 40%, rgba(255, 242, 99, 1) 100%);
    background-size: cover;
    background-repeat:no-repeat;
    background-attachment: fixed;
    min-height: 100%;
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
}

main {
  flex: 1;
}

html{
    margin-top: 0px !important;
}

.page-accueil{

    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    height: 100%;
    bottom: 0;

}

a{
    text-decoration: none;
    font-family: "League Spartan";
    font-weight: 500;
}

p{
    font-family: "League Spartan";
    font-weight: 500;
}
strong{
    font-family: "League Spartan";
}

li{
    font-family: "League Spartan";
    font-weight: 500;
}

h3{
    font-family: "League Spartan";
}


button{
    font-family: "League Spartan";
    font-weight: 500;
}

.bg-animation{
    position: fixed;
    width: 100vw;
    bottom: -1vh;
    z-index: -2;
   
}

.flex-row{
    display: flex;
    flex-direction: row;
}

/*------Menu Principal------*/

.menu-principal{

    margin-top: 50px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-menu-principal{

    background-color: rgba(255, 255, 255, 0.86);
    height: 20vh;
    width: 30vw;
    color: rgb(0, 0, 0);
    border-radius: 5%;
    border-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 4vw;
}

.icone-img{
    height: 12vh;
    width: auto;
    margin-bottom: 5%;
}


/*------Accès rapide------*/

.acces-rapide{
    margin-top: 3vh;
    margin-bottom: 2vh;
    background-color: white;
    padding: 2vw;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: end;
    height: auto;
    width: 70vw;

}

.flex-acces-rapide{
    display: flex;
    flex-direction: row;
    gap: 1vw;
    margin-bottom: 1vh;
}

.btn-acces-rapide{
    height: 15vh;
    width: 22vw;
    color: rgb(0, 0, 0);
    border-radius: 10px;
    border-width: 0;
    font-size: 2vh;
}

.btn-fr-en{
    background-color: white;
    border-color: black;
    border-width: 2px;
    height: 4vh;
    width: 20vw;
    border-radius: 5px;
    font-size: 2vh;
}

#commerces{
    background-color: #E85858;
}

#marees{
    background-color: #7B9CD8;
}

#sentiers{
    background-color: #94945E;
}

.icone-img-acces-rapide{
    height: 10vh;
    width: auto;
    margin-bottom: 5%;
}

.titre-acces-rapide{
    margin-top: 0;
    margin-bottom: 1vh;
    font-family: "League Spartan";
    font-weight: 500;
    font-size: 3vh;
}

/*------Loisirs------*/

.titre-loisirs{
    font-family: "League Spartan";
    font-weight: 500;
    margin-bottom: 5vh;
    font-size: 5vh;
}

/* ——— BARRE D’ACTIONS ——— */

.barre-actions {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center; 
  padding: 1.5vh;
  box-sizing: border-box;
}

.btn-retour {
  width: 10vh;
  height: 9vh;
  background: #ffffff;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: black;
  font-size: 3vh;
  font-weight: 600;
}

/* ——— BARRE D’ACTIONS AJUSTÉE ——— */


.actions-droite {
  background: #ffffff;
  border-radius: 15px;
  padding-right: 4vw;
  gap: 1vw;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 9vh;         
  box-sizing: border-box;
}


.btn-lang {
  background: #ffffff;
  border: 2px solid #000;
  border-radius: 14px;
  padding: 0 1.8vw;
  height: 5.5vh;    
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.8vh;       
  margin-left: 5vw;
  margin-right: 4vw; 
}

.btn-ico {
  width: 6.8vh;           
  height: 6.8vh;
  border-radius: 10px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.btn-ico img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}



.btn-ico img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  pointer-events: none;
}

.btn-ico-commerce { background: #E85858; }
.btn-ico-plage    { background: #7B9CD8; }
.btn-ico-marche   { background: #94945E; }

/*------Randonnées------*/

.carte-randonnees{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.carte-randonnees img{
    max-width: 95%;
    height: auto;
    max-height: 30vh;
    object-fit: contain;
    border-radius: 22px;
    margin-bottom: 1vh;
}

.titre-randonnees{
  font-size: 3.2vh; 
  text-align: center;
  margin-top: 1vh;
  margin-bottom: 1vh;
  font-family: "League Spartan";
  font-weight: 500;
}

.texte-randonnees{
    font-size: 2vh; 
    line-height: 1;
    margin-bottom: 1vh;
    margin-top: 0vh;
    text-align: center;
}

/*------Yoga/Taïchi------*/
.page-yogataichi{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    bottom: 0;
}

.titre-yogataichi{
    font-family: "League Spartan";
    font-weight: 500;
    margin-top: 2vh;
    margin-bottom: 3vh;
    font-size: 5vh;
    text-align: center;
}

.bloc-yogataichi{
  background: rgba(255, 255, 255, 0.86); 
  border-radius: 20px 20px 0px 0px;
  padding: 1vh 1vw;
  width: 85vw;
  max-height: 35vh;
  overflow-y: auto;
}

.texte-yogataichi{
  font-size: 2.5vh; 
  line-height: 1;
  margin-bottom: 2.2vh;
  text-align: center;
}

.flex-btn-yogataichi{
    width: 87vw;
    height:8vh;
    margin: 0;
    display: flex;
    flex-direction: row;
}

.flex-btn-yogataichi a{
    width: 50%;
    height: 100%;
}

.btn-yogataichi{
    background: rgba(255, 255, 255, 0.86); 
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 2.5vh;
}

#btn-yoga{
    border-width: 2px 1px 0 0;
    border-radius: 0 0 0 20px;
}

#btn-taichi{
    border-width: 2px 0 0 1px;  
    border-radius: 0 0 20px 0;
}

/*------Pêche------*/

.btn-peche{
    background: rgba(255, 255, 255, 0.86); 
    width: 100%;
    height: 100%;
    margin: 0;
    border-width: 2px 0 0 0;
    font-size: 2.5vh;
    border-radius: 0 0 20px 20px;
}

.conteneur-btn-pêche{
    width: 87vw;
    height:8vh;
    margin: 0;
    display: flex;
    flex-direction: row;
}

.conteneur-btn-pêche a{
    width: 100%;
    height: 100%;
}

.texte-peche-bold{
    font-size: 2.5vh; 
    line-height: 1;
    margin-bottom: 2.2vh;
    text-align: center;
    font-weight: bold;
}

.sous-titre-peche{
    font-family: "League Spartan";
    font-weight: 500;
    margin-top: 2vh;
    margin-bottom: 3vh;
    font-size: 3vh;
}

/*------Mini-Jeux------*/

.page-minijeux{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    height: 100%;
    bottom: 0;
}

.menu-minijeux{
    margin-top: 0px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3vw;
    margin-bottom: 5vh;
}

.titre-minijeux{
    font-family: "League Spartan";
    font-weight: 500;
    margin-bottom: 0vh;
    font-size: 5vh;
}

.btn-minijeux{
    background-color: rgba(255, 255, 255, 0.86);
    height: 40vh;
    width: 42vw;
    color: rgb(0, 0, 0);
    border-radius: 5%;
    border-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 4vw;
}

.minijeux-img{
    height: 25vh;
    width: auto;
    margin-bottom: 5%;
}

/*------Biodiversité------*/
.page-biodiversite{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    bottom: 0;
}

.titre-biodiversite{
    font-family: "League Spartan";
    font-weight: 500;
    margin-bottom: 0vh;
    font-size: 5vh;
}

.menu-biodiversite{
    margin-top: 0px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10vw;
    margin-bottom: 5vh;
}

.btn-biodiversite{
    background-color: rgba(255, 255, 255, 0.86);
    height: 25vh;
    width: 35vw;
    color: rgb(0, 0, 0);
    border-radius: 5%;
    border-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 4vw;
}

.biodiversite-img{
    height: 15vh;
    width: auto;
    margin-bottom: 5%;
}

/*------Concours photos------*/
.menu-concours{
    margin-top: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10vw;
    margin-bottom: 5vh;
    justify-content: center;
    align-content: center;
}

.btn-concours{
    background-color: rgba(255, 255, 255, 0.86);
    height: 10vh;
    width: 85vw;
    color: rgb(0, 0, 0);
    border-radius: 15px;
    border-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 6vw;
    font-weight: 400;
}

/*------Infos du village------*/
.logo-infos{
    height: 25vh;
    width: auto;
    object-fit:contain;
    margin-bottom: 2vh;
}

.texte-infos{
    font-size: 2.5vh; 
    line-height: 1;
    margin-bottom: 2.2vh;
    text-align: center;
    font-weight: 400;
}

.bloc-infos{
    background: rgba(255, 255, 255, 0.86); 
    border-radius: 20px 20px 20px 20px;
    padding: 1vh 1vw;
    width: 85vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.conteneur-btn-site{
    width: 100%;
    height:5vh;
    margin-top: 3vh;
    margin-bottom: 0vh ;
}

.lien-site{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.btn-site{
    background: rgba(255, 255, 255, 0.86); 
    width: 50%;
    height: 100%;
    margin: 0;
    font-size: 2.5vh;
    border-radius: 10px 10px 10px 10px;
    border-width: 1px;
}

/*------Histoire Individuelle------*/

.img-histoire-ind{
    width: 60%;
    height: auto;
    max-height: 20vh ;
    object-fit: cover;
    
}

.bloc-histoire-ind {
  background: rgba(255, 255, 255, 0.86); 
  border-radius: 20px;
  padding: 3vh 4vw;
  width: 85vw;

  flex-direction: column;
  justify-content: center;
  align-items: center;

  margin-top: auto;
  margin-bottom: auto;

 
}

.texte-img-histoire-ind{
  font-size: 1vh; 
  line-height: 1;
  margin-bottom: 2.2vh;
  text-align: center;
  width: 70%;
  margin-top: 0.5vh;
  margin-bottom: 1vh;
}

.texte-histoire-ind{
  font-size: 1.6vh; 
  line-height: 1;
  margin-bottom: 2.2vh;
  text-align: center;
  margin-top: 0;
  margin-bottom: 1vh;
}

/*------Yoga/Taïchi sur la plage------*/

.texte-plage{
    font-size: 2vh; 
  line-height: 1;
  margin-bottom: 2.2vh;
  text-align: center;
}

/*------Postures Yoga/Taïchi------*/
.bloc-posture{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.86); 
    border-radius: 20px 20px 0px 0px;
    padding: 1vh 1vw;
    width: 85vw;
}

.img-posture{
    max-width: 80vw;
    height: auto;
    border-radius: 20px;
    margin-top: 2vh;
    margin-bottom: 2vh;
    max-height: 22vh;
    
}

.texte-posture{
    font-size: 2vh; 
    line-height: 1;
    margin-bottom: 0vh;
    margin-top: 0;
    text-align: center;

}

/*------Infos pêche-------*/

.bloc-infospeche{
    background: rgba(255, 255, 255, 0.86); 
    border-radius: 20px 20px 0px 0px;
    padding: 1vh 3vw;
    width: 81vw;
    font-size: 2vh;
    text-align:left;
    display: flex;
    flex-direction: column;
    max-height: 43vh;
    overflow-y: auto;
}
.bloc-infospeche p{
    margin-top: 0.5vh;
    margin-bottom: 0.5vh;
}

/*------Pêche - Poissons------*/
.img-poisson{
    width: 60vw;
    height: auto;
    border-radius: 20px;
    margin-top: 1vh;
    margin-bottom: 1vh;
    margin-left: auto;
    margin-right: auto;
}

/*------Photos------*/
.img-photo{
    max-width: 80vw;
    max-height: 35vh;
    height: auto;
    margin-top: 2vh;
    margin-bottom: 2vh;
}

.container-btn-photos{
    display: flex;
    flex-direction: row;
    margin-top: 2vh;
    gap: 1vw;
}
.btn-photos{
    width: 10vh;
    height: 4vh;
    background: #ffffff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: black;
    font-size: 3vh;
    font-weight: 600;
}

.titre-photos{
    font-family: "League Spartan";
    font-weight: 500;
    margin-top: 2vh;
    margin-bottom: 3vh;
    font-size: 4vh;
    text-align: center;
}

.nom-photographe {
    font-size: 4vh; 
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    font-family: "League Spartan";
    font-weight: 500;
}

/*-------Biodiversité------*/

.menu-oiseaux{

    margin-top: 50px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-menu-oiseaux{

    background-color: rgba(255, 255, 255, 0.86);
    height: 10vh;
    width: 15vw;
    color: rgb(0, 0, 0);
    border-radius: 5%;
    border-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 4vw;
}

.icone-oiseaux{
    height: 8vh;
    width: auto;
    max-width: 12vw;
    margin-bottom: 5%;
    object-fit: cover;
}

.img-espece{
    height: 20vh;
}

.bloc-espece {
  background: rgba(255, 255, 255, 0.86); 
  border-radius: 20px 20px 0px 0px;
  padding: 1vh 1vw;
  width: 85vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;

}

.popup{
    display: block;
}

/*------Activités locales------*/

.description-activite{
  font-size: 2vh; 
  line-height: 1;
  margin-bottom: 1vh;
  text-align: center;
}



/*------footer------*/

footer{
    background-color: white;
    min-height: 8vh;
}

.footer-flex{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20vw;
}

.logo-img{
    height: auto;
    width: 15vw;
}