html {
  scroll-behavior: smooth;
  scrollbar-color: #00FF1A white;
  scrollbar-width: thin;
}

body {
  position: relative;
  margin: 0;
  overflow-x: hidden;
 

}

/* ==================================
TYPO GÉNÉRALE
=====================================
*/

a:link {
  color:#00FF1A ;
}

a:visited {
  color: #00FF1A;
}

a:focus {
  border-bottom: 1px solid;
  background: #bae498;
}

a:hover {
  border-bottom: 1px solid;
  background: #cdfeaa8a;
}

a:active {
  background: #26530152;
  color: #cdfeaa;
}

.vert {
  color:#00FF1A ;;
}

.time-vert {
  color: #00FF1A;
  font-family: 'Times New Roman', Times, serif;
  font: 2em;
  border-top: 15%;
  border-bottom: 15%;
}








/* ==================================
INDEX
=====================================
*/

/*proportions image bg*/

img {
  max-width: 100%;
  height: auto;
  display: block;
}



.scene {
  position: relative;
  width: 100%;
  max-width: 1909px;
  margin: 0 auto;
}


.bg {
  display: block;
  width: 100%;
  height: auto;
}

.stage {
  position: absolute;
  inset: 0;
}


/* boutons */

.logo {
  position: absolute;
  top: 62%;
  left: 1%;
  width: 70%;
  height: auto;
}

.le-collectif {
  position: absolute;
  top: 16%;
  left: 48%;
  transform: translate(-50%, -50%); 
  width: 18%;
  height: auto;
  transition: all 0.5s ease;
}

.les-archives {
  position: absolute;
  top: 39%; 
  left: 21%;
  transform: translate(-50%, -50%) rotate(-90deg); 
  width: 13%;
  height: auto;
  transition: all 0.5s ease;
}

.les-projets {
  position: absolute;
  top: 64%; /*21*/
  left: 72%;
  transform: translate(-50%, -50%) rotate(-3deg); 
  width: 14%;
  height: auto;
  transition: all 0.5s ease;
}

.nouvelles {
  position: absolute;
  top: 30%;
  left:84%;
  transform: translate(-50%, -50%);
  width: 25%;
  height: auto;


}

.poitevin {
  position:absolute;
  top: 5%;
  right: 5%;
  width: 3%;
}

.chapelloise {
  position:absolute;
  top: 36%;
  left:83%;
  transform: translate(-50%, -50%);
  width: 14%;
  height: auto;

}











/*========================================================================================================================
PAGE 
=========================================================================================================================*/

.page {
  /*margin-top:8vw;*/
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  overflow:visible;
  z-index: 1;

}


/* menu horizontal haut ........................................... */

.menu {
  position: fixed;

  top: 0;
  left: 0;
  width: 100%;
  height: 130px;      
  background: white;
  border-bottom: solid 2px #00FF1A;
  z-index: 3;
}


.accueil-bd {
  position: fixed;
  top: 5%;
  left: 5%;

  width: 4%;
  transform: none;
  z-index: 4;
}

.le-collectif-bd {
  position: fixed;
  top: 6%;
  left: 15%;

  width: 12%;
  transform: none;
  z-index: 10;
}

.les-projets-bd {
  position: fixed;
  top: 6%;
  left: 28.5%;

 
  width: 15.5%;
  transform: none;
  z-index: 4;
}

.nouvelles-bd {
  position: fixed;
  top: 6%;
  left: 46%;

  width: 27%;
  transform: none;
  z-index: 4;
}

.archives-bd {
  position: fixed;
  top: 6%;
  left: 75%;

  width: 12%;
  transform: none;
  z-index: 4;
}

.poitevin-bd {
  position: fixed;
  top: 5%;
  right: 3%;
  width: 6%;
  transform: none;
  z-index: 4;
}

.jhau-bd {
  position: fixed;
  top: 5%;
  right: 3%;
  width: 4%;
  transform: none;
  z-index: 4;
}

/* =====================================================
   SOUS-MENU LE COLLECTIF
===================================================== */


.le-collectif-bd {
    position: fixed;
    padding-bottom: 20px;
}

.le-collectif-bd::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 20px;
}

.sous-menu {
    top: calc(100% + 15px);
}

.le-collectif-bd .sous-menu {
    position: absolute;

    top: 65%;      
    left: 0;

    margin-top: 15px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;

    background: white;
    border: 2px solid #00FF1A;
    border-radius: 12px;
    box-shadow: 4px 4px 0 #00FF1A;
    padding: 18px;
    padding-left: 30px;
    padding-right: 30px;

    opacity: 0;
    visibility: hidden;

    transition: opacity .25s;
    pointer-events: none;

    z-index: 100;
}

.le-collectif-bd:hover .sous-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.le-collectif-bd .sous-menu img {transition: transform .2s;}

.le-collectif-bd .sous-menu img {
    transition: transform .2s ease;
    transform-origin: center;
}

.le-collectif-bd .sous-menu a:hover img {transform: scale(1.05);}
.le-collectif-bd .sous-menu {transform: translateY(-10px);}
.le-collectif-bd:hover .sous-menu {transform: translateY(0);}

.btn-histoire {width: 100%;}
.btn-projet {width: 100%;}
.btn-encouv {width: 135%;}
.btn-equipe {width: 90%;}
.btn-terr {width: 135%; margin-top: -7%;}
.btn-peyis {width: 90%;}
.btn-manif {width: 130%;}
.btn-praech {width: 140%;}
.btn-soutien {width: 130%;}
.btn-acots {width: 110%;}

/* =====================================================
   SOUS-MENU LES PROJETS
===================================================== */


.les-projets-bd {
    position: fixed;
    padding-bottom: 20px;
}

.les-projets-bd::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 20px;
}

.sous-menu {
    top: calc(100% + 15px);
}

.les-projets-bd .sous-menu {
    position: absolute;

    top: 65%;      
    left: 0;

    margin-top: 15px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;

    background: white;
    border: 2px solid #00FF1A;
    border-radius: 12px;
    box-shadow: 4px 4px 0 #00FF1A;
    padding: 18px;
    padding-left: 35px;
    padding-right: 35px;

    opacity: 0;
    visibility: hidden;

    transition: opacity .25s;
    pointer-events: none;

    z-index: 100;
}

.les-projets-bd:hover .sous-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.les-projets-bd .sous-menu img {transition: transform .2s;}

.les-projets-bd .sous-menu img {
    transition: transform .2s ease;
    transform-origin: center;
}

.les-projets-bd .sous-menu a:hover img {transform: scale(1.05);}
.les-projets-bd .sous-menu {transform: translateY(-10px);}
.les-projets-bd:hover .sous-menu {transform: translateY(0);}

.btn-fada {width: 90%;}
.btn-tada {width: 90%;}
.btn-crea {width: 130%;}


/* animations des boutons ........................................... */

@keyframes shake {
  0%   { transform: translateX(0) rotate(0deg); }
  15%  { transform: translateX(-2px) rotate(-2deg); }
  30%  { transform: translateX(2px) rotate(2deg); }
  45%  { transform: translateX(-2px) rotate(-2deg); }
  60%  { transform: translateX(2px) rotate(2deg); }
  75%  { transform: translateX(-1px) rotate(-1deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

.menu > div > a:hover img {
    animation: shake .35s ease-in-out;
}

.sommaire a img {
  transition: transform 0.2s ease;
  transform-origin: center;
}
.sommaire a:hover img {
  animation: shake 0.35s ease-in-out;
}

.stage a:hover img {
  animation: shake 0.35s ease-in-out;
}



/* bouton retour en haut ........................................... */

.retour {
  position: fixed;
  bottom: 5%;
  right: 3%;
  width: 4%;
  z-index: 6;
  transition: bottom .35s ease;
}

/* =====================================================
  SOMMAIRES 
===================================================== */

.sommaire {
  margin-top: -22%;
  padding: 0;
}

.sommaire-bas {
  margin-top: 10%;
  margin-bottom: 25%;
}

/* le collectif ........................................... */

.histoire-som {
  position:absolute;
  left:25%;
  transform: translate(-50%, -50%);
  width: 15%;
  height: auto;
}

.projet-som {
  position:absolute;
  left:47%;
  transform: translate(-50%, -50%);
  width: 15%;
  height: auto;
}


.encouv-som {
  position:absolute;
  left:47%;
  transform: translate(-50%, -50%);
  width: 20%;
  height: auto;
}


.equipe-som {
  position:absolute;
  left:70%;
  transform: translate(-50%, -50%);
  width: 15%;
  height: auto;
}

.echipe-som {
  position:absolute;
  left:70%;
  transform: translate(-50%, -50%);
  width: 14%;
  height: auto;
}

.terr-som {
  position:absolute;
  left:20%;
  transform: translate(-50%, -50%);
  width: 20%;
  height: auto;
}


.peyis-som {
  position:absolute;
  left:20%;
  transform: translate(-50%, -50%);
  width: 15%;
  height: auto;
}

.manifeste-som {
  position:absolute;
  left:47%;
  transform: translate(-50%, -50%);
  width: 19%;
  height: auto;
}

.praech-som {
  position:absolute;
  left:47%;
  transform: translate(-50%, -50%);
  width: 23%;
  height: auto;
}


.soutien-som {
  position:absolute;
  left:75%;
  transform: translate(-50%, -50%);
  width: 19%;
  height: auto;
}

.acots-som {
  position:absolute;
  left:75%;
  transform: translate(-50%, -50%);
  width: 19%;
  height: auto;
}

/* Les projets ...............................................*/

.fada-som {
  position:absolute;
  left:25%;
  transform: translate(-50%, -50%);
  width: 15%;
  height: auto;
}

.tada-som {
  position:absolute;
  left:70%;
  transform: translate(-50%, -50%);
  width: 15%;
  height: auto;
}

.crea-som {
  position:absolute;
  left:47%;
  transform: translate(-50%, -50%);
  width: 25%;
  height: auto;
}


/* corps de page........................................... */

.titre {
  display: block;
  width: 90%;


  background-color: white;
  margin:12% auto 5%; /* permet de centrer l'image*/

  text-align: center;
}

.st-histoire {
  display: block;
  width: 75%;
  height: auto;
  margin: 10% auto 10%;
}

.st-projet {
  display: block;
  width: 65%;
  height: auto;
  margin: 10% auto 10%;
}

.st-presentations {
  display: block;
  width: 75%;
  height: auto;
  margin: 15% auto 10%;
}

.st-kekole {
  display: block;
  width: 50%;
  height: auto;
  margin: 15% auto 10%;
}



/* mise en forme du texte ............................................................*/

.article {
  padding: 20vw;
  padding-top: 7%;
  padding-bottom: 5%;
  background-color: white;
  overflow: visible;
  z-index: 1;
  text-align: left;
  font-family:'Courier New', Courier, monospace;
  color:black;
  font-size: 1.25em;


}

.petit {
  font-size: 1em;
}


.grand {
  text-align: right;
  margin-right: -10vw;
  margin-left: 2vw;
  margin-bottom: 7vw;
  font-family:'Times New Roman', Times, serif;
  color: #00FF1A;
  font-size: 2.3em;
  font-style: italic;
  

}

.grandgrand {
  text-align: right;
  margin-right: -10vw;
  margin-left: 2vw;
  margin-bottom: 7vw;
  font-family:'Times New Roman', Times, serif;
  color: #00FF1A;
  font-size: 3.3em;
  font-style: italic;
  

}


.grand-maj {
  text-align: right;
  margin-right: -10vw;
  margin-left: 2vw;
  margin-bottom: 10vw;
  font-family:'Times New Roman', Times, serif;
  color: #00FF1A;
  font-size: 2.3em;
  font-style: italic;
  

}


.sous-titre {
  text-align: left;
  margin-top: 5vw;
  font-family:'Times New Roman', Times, serif;
  color: #00FF1A;
  font-size: 2em;
  font-style: italic;


}

/* citations ...................................................*/

.cit-left {
  text-align: center;
  margin:10%;
  margin-right: 15vw;
  margin-left: -10vw;
  margin-bottom: 5vw;
  font-family:'Times New Roman', Times, serif;
  color: #00FF1A;
  font-size: 1.8em;
  font-variant-ligatures: normal;

}

.cit-left-petit {
  text-align: left;
  margin:15%;
  margin-right: 15vw;
  margin-left: -15vw;
  margin-bottom: 5vw;
  font-family:'Times New Roman', Times, serif;
  color: #00FF1A;
  font-size: 1em;
  font-variant-ligatures:historical-ligatures;

}

.cit-right {
  text-align: center;
  margin:10%;
  margin-right: -10vw;
  margin-left: 15vw;
  margin-bottom: 5vw;
  font-family: Lora, serif;
  color: #00FF1A;
  font-size: 1.7em;
  font-variant-ligatures: normal;

}

span.petit {
  font-size: 0.5em;
}

.right-align {
  text-align: right;
  margin : auto;
  font-family:'Times New Roman', Times, serif;
  color: #00FF1A;
  font-size: 1em;
  font-variant-ligatures:historical-ligatures;
  margin-right: 15vw;
}

/*=====================================================================
IMAGES
==========================================================================*/


figure {
  margin-top: 15%;
  margin-bottom: 15%;
}

/* images ........................................*/

.img-left {
  width: 90%;
  max-width: none;
  margin-left: -15%;
  height: auto;
  display: block;
}

.img-right {
  width: 90%;
  max-width: none;
  margin-left: 10vw;
  margin-right: -30vw;
  height: auto;
  transform: translateX(2vw);
  display: block;
}

.img-ctr {
  display: block;
  width: 100vw;
  max-width: none;
  height: auto;



  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);


}

.feu {
text-align: center;
border:#00FF1A;
height: auto;
width: 30%;
margin: 30% auto 0 auto; 
}


/* légendes ........................................*/

.legende-left {
  margin-top: 1em;
  width: 100%;
  max-width: none;
  margin-left: -15%;
  text-align: left;
  font-size: 0.8em;
  font-style: italic;

  color: #666;
} 


.legende-right {
  margin-top: 1em;
  margin-left: 12vw;
  margin-right: -15vw;

  text-align: left;

  font-size: 0.8em;
  font-style: italic;

  color: #666;
}






/*=====================================================================
MEMBRES DE L'ÉQUIPE
==========================================================================*/


.st-equipe {
  display: block;
  width: 60%;
  height: auto;
  margin: 15% auto 0;
}


.equipe {
  z-index: 3;
  margin-top:2.5vw;
 margin-left: -20vw;
  margin-right:-20vw;
}


.membre-left {
  text-align: center;
  height: auto;
  /*padding:3%;
  padding-top:0%;*/
 margin-top:3.5vw;
  margin-left: 15vw;
  margin-right:15vw;/*30*/
  display: grid;
  grid-template-areas: "image texte";
  grid-template-columns: 1fr 3fr;
  gap:0;

}

.membre-right {
  text-align: center;
  height: auto;
  /*padding:3%;
  padding-top:0%;*/
  margin-top:3.5vw;
  margin-left: 15vw; /*22*/
  margin-right:15vw;
  display: grid;
  grid-template-areas: "texte image";
  grid-template-columns: 3fr 1fr;
  gap:4vw;

}

.photo-membre {
grid-area: image;
width: 75%;
padding-top: 3vw;

}


.text-left{
  grid-area: texte;
  /*margin-right: -15vw;*/
  text-align: left;

}

.text-right{
  grid-area: texte;
  /*margin-right: -15vw;*/
  text-align: right;

}

.nom {
  font-size: 1.8em;
  color: #00FF1A;
  font-family: 'Times New Roman', Times, serif;
}

.desc {
background-color: #66676837;
padding : 3%;
padding-top:0.1%;
}





/*==================================================================
SOUTIENS 
========================================================================*/

.st-soutiens {
  display: block;
  width: 200%;
  height: auto;
  margin: 45% auto 5%;
}

.full-width {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.partenaires {
  display: block;
  width: 75vw;
  margin: 5% auto 10%;
}

.text-ctr {

  text-align: center;/*
  margin-bottom: 35%;*/

}


.times {
  font-family: 'Times New Roman', Times, serif;
  font-size: 1.3em;
}


/*========================================================================
BOUTONS CONTACT
==========================================================================*/

.contact {
  display: flex;
  flex-direction: column; /* éléments l'un sous l'autre */
  align-items: center;    /* centrage horizontal */
  justify-content: center;

  gap: 3vw;               /* espace entre les deux */
  margin: 10vw auto 0;
  width: 100%;
}

.nous-ecrire {
  display: absolute;
  width: 15%;
  height: auto;
  margin:auto;
  right: 5%;

  
}

.insta {
  display: block;
  width: 75vh;
  height: auto;
}


/*========================================================================
MANIFESTE
==========================================================================*/


.intro {  
  margin-top: 20vh;
  margin-bottom: 25vh;

}

.petites-majuscules {
  font-variant: small-caps;
}

.signature {  
  margin-top: 20vh;
  text-align: right;

}

.fleur {
text-align: center;
height: 10%;
width: auto;
margin:15% auto 5% auto; 
}




/*========================================================================
LE FADA
==========================================================================*/

.illus-papillon {
  position: absolute;
  left: 5vw;
  top : 10vw;
  width: 5vw;
  height: auto;
}

.illus-oiseau {
  position: absolute;
  left: 5vw;


  width: 10vw;
  height: auto;
}

.illus-poule {
  position: absolute;
  right: 5vw;
  width: 120px;
  height: auto;
}

.lien-ctr {
  text-align: center;
  margin-top: 8%;
}

.img-oiseau {
  width: 100%;
  max-width: none;
  margin-top: 15%;
  margin-bottom: 15%;
  margin-left: -35%;
  height: auto;
  display: block;
}

.img-dolce {
  width: 95%;
  max-width: none;
  margin-top: 15%;

  margin-left: 10vw;
  margin-right: -30vw;
  height: auto;
  transform: translateX(2vw);
  display: block;
}

/*========================================================================
PIED DE PAGE
==========================================================================*/

.ruban-vert {
  width: 100%;
  height: 5vh;  
  background:#00FF1A;

}


footer {
  padding: 3vh;
  padding-top: 8vh;
  background: #dedede;
  font-family: 'Courier New', Courier, monospace;
}

.footer-bas {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 4rem;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px; /* espace entre les deux boutons */
}

.mentions {
  flex: 1;
  font-size: 0.7em;
}
.nous-ecrire {
    width: 180px;
}

.insta {width: 280px;}

.nous-ecrire img,
.insta img {
    width: 100%;
    height: auto;
    transition: transform .2s ease;
}

.nous-ecrire:hover img,
.insta:hover img {
    transform: rotate(-2deg) scale(1.05);
}

footer {/*
  position: relative;*/
  z-index: 5;

  padding: 3vh;
  padding-top: 10vh;
  font-size: 1.25em;

  font-family:'Courier New', Courier, monospace;


  background-color: #dedede;
/*
  border-top: 1vh solid #00FF1A; */
}



.mentions {
  font-size: 0.7em;
}



/* Trouver comment enlever la mise en forme auto des liens en bleu souligné ---> noir non souligné ?
...............................*/

/*

.insta {
  grid-area: insta;
}

.contact {
  grid-area: contact;
}

.plan {
  grid-area: plan;
  border-right-color: #b41e00;
}





*/
@media (max-width: 768px) {
.stage {
    width: 100%;
    aspect-ratio: 1909 / 1078;
    position: relative;
  }

  footer {
    margin-top: 40px;
  }

  .bg {
    object-fit: cover;
  }

  .poitevin {
    top: 5%;
    left: 5%;
    width: 10vw;
  }

  .logo {
    top: 35%;
    left: 5%;
    width: 80vw;
  }

  .le-manifeste {
    top: 150%;
    left: 75%;
    width: 40vw;
    transform: translate(-50%, -50%);
  }

  .fourchefiere {
   transform: translate(-50%, -50%) rotate(-15deg);
    top: 220%;
    left: 87.5%;
    width: 25vw;
  }

  .merci {
    top: 345%;
    left: 92%;
    width: 25vw;
    transform: translate(-50%, -50%) rotate(-5deg);
  }

  .chapelloise {
    transform: translate(-50%, -50%) rotate(-90deg);
    top: 310%;
    left: 15%;
    width: 30vw;
  }









}