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: none;
  aspect-ratio: 800 / 451;
  margin: 0 auto;
  overflow: hidden;
}

.bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.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: 4%;
  right: 2.75%;
  width: 6.5%;
  height: auto;
}

.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: absolute;
  top: 5%;
  right: 3%;
  width: 12%;

  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: 0;
  padding: 0;
  clear: both;
}

.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;
}

.titre-nouvelles {
  display: block;
  width: 100%;


  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: 2em;
  font-family:'Times New Roman', Times, serif;
  color: #00FF1A;
  font-size: 2.3em;
  font-style: italic;
  
  

}

#annee {
  font-size: 0.75em;
  font-style: normal;
}

.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;


}

#droite {
  text-align: right;
}

.blanc {
  margin-top: 30%;
}


/* 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;

}

#resume-gauche {
  text-align: left;
  margin-bottom: 0;
  margin-top:2vw;
}

#resume-droite {
  text-align: right;
  margin-top: 2vw;
  margin-bottom: 0%;
}

.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; 
}

#paysage {
  width: auto;
  max-height: none;
  height: 90%;
  margin-top : -17.5%;
  margin-left: -20%;
  margin-right: 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;

}



.mentions {
  font-size: 0.7em;
}





/* =========================================
   RESPONSIVE — COLLECTIF FOURCHEFOLIES
========================================= */

:root {
  --vert: #00FF1A;
  --padding-page: clamp(16px, 4vw, 64px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--vert) white;
  scrollbar-width: thin;
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: clip;
}

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

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

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

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

/* Évite que le lecteur audio déborde. */
.chapelloise audio {
  display: block;
  max-width: 100%;
}

/* =========================================
   TABLETTES
========================================= */

@media (min-width: 769px) and (max-width: 1024px) {
  .logo {
    width: 68%;
  }

  .le-collectif {
    width: 19%;
  }

  .les-archives {
    width: 14%;
  }

  .les-projets {
    width: 16%;
  }

  .nouvelles {
    width: 25%;
  }

  .chapelloise {
    max-width: 30%;
  }

  .chapelloise audio {
    width: 100%;
  }
}

/* =========================================
   MOBILES
========================================= */

@media (max-width: 768px) {
  html {
    font-size: 16px;
  }

  body {
    overflow-x: clip;
  }

  /*
    Le décor devient un fond qui remplit l'écran.
    Les éléments de navigation passent dans le flux
    pour pouvoir s'empiler verticalement.
  */

  .scene {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
    overflow: hidden;
    background: #fff;
  }

  .bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .stage {
    position: relative;
    inset: auto;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(18px, 4vh, 32px);
    padding: 72px 20px 32px;
  }

  /*
    Annule les coordonnées de la composition desktop.
  */

  .logo,
  .le-collectif,
  .les-archives,
  .les-projets,
  .nouvelles,
  .chapelloise,
  .poitevin {
    position: relative;
    inset: auto;
    transform: none;
    margin: 0;
    height: auto;
  }

  .logo,
  .le-collectif,
  .les-archives,
  .les-projets,
  .nouvelles {
    display: block;
    flex: 0 0 auto;
  }

  .logo {
    order: 1;
    width: min(90%, 440px);
    align-self: flex-start;
  }

  .le-collectif {
    order: 2;
    width: min(68%, 300px);
  }

  .les-archives {
    order: 3;
    width: min(65%, 280px);
  }

  .les-projets {
    order: 4;
    width: min(72%, 310px);
  }

  .nouvelles {
    order: 5;
    width: min(95%, 400px);
  }

  .chapelloise {
    order: 6;
    width: min(100%, 360px);
    margin-top: 8px;
  }

  .chapelloise audio {
    width: 100%;
  }

  .poitevin {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 46px;
  }

  .stage a {
    max-width: 100%;
  }

  .stage a img {
    width: 100%;
    height: auto;
  }

  .stage a:focus-visible {
    outline: 2px solid var(--vert);
    outline-offset: 5px;
  }
}

/* =========================================
   PETITS TÉLÉPHONES
========================================= */

@media (max-width: 380px) {
  .stage {
    gap: 20px;
    padding: 68px 14px 24px;
  }

  .logo {
    width: 88%;
  }

  .le-collectif,
  .les-archives,
  .les-projets {
    width: 75%;
  }

  .nouvelles {
    width: 100%;
  }

  .poitevin {
    width: 38px;
    top: 12px;
    right: 12px;
  }
}

/* Respect des préférences d'accessibilité. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}



/* =========================================
   MENU RESPONSIVE
========================================= */

/* Navigation desktop : conserve le positionnement
   des éléments illustrés existants. */

.menu-nav {
  display: contents;
}

.menu-toggle {
  display: none;
}

/* =========================================
   MENU MOBILE
========================================= */

@media (max-width: 768px) {

  .menu {
    position: sticky;
    top: 0;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 62px;
    padding: 10px 16px;
    box-sizing: border-box;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    background: white;
    border-bottom: 2px solid #00FF1A;
    z-index: 1000;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 42px;
    padding: 8px 14px;

    background: white;
    color: black;
    border: 2px solid #00FF1A;
    border-radius: 6px;

    font-family: "Courier New", Courier, monospace;
    font-size: 1rem;
    cursor: pointer;
  }

  .menu-toggle:focus-visible {
    outline: 2px solid black;
    outline-offset: 3px;
  }

  .menu-toggle-icon {
    color: #00FF1A;
    font-size: 1.35rem;
    line-height: 1;
  }

  /* La navigation se déplie sous le bouton. */

  .menu-nav {
    display: none;
    flex: 0 0 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 12px 0 18px;
  }

  .menu-nav.is-open {
    display: flex;
  }

  /* Annule les coordonnées fixes du desktop. */

  .menu-nav .accueil-bd,
  .menu-nav .le-collectif-bd,
  .menu-nav .les-projets-bd,
  .menu-nav .nouvelles-bd,
  .menu-nav .archives-bd,
  .menu-nav .jhau-bd {
    position: relative;
    inset: auto;
    top: auto;
    left: auto;
    right: auto;

    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;

    transform: none;
  }

  .menu-nav > div > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
  }

  .menu-nav > div > a > img {
    width: auto;
    max-width: min(85%, 280px);
    max-height: 55px;
    object-fit: contain;
    margin: auto;
  }

  .menu-nav .accueil-bd img {
    max-width: 46px;
    max-height: 46px;
  }

  /* Sur mobile, les sous-menus sont visibles
     lorsque la navigation principale est ouverte. */

  .menu-nav .sous-menu {
    position: static;
    inset: auto;

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

    width: 100%;
    margin: 12px 0 0;
    padding: 16px;

    background: #fff;
    border: 1px solid #00FF1A;
    border-radius: 8px;
    box-shadow: 3px 3px 0 #00FF1A;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .menu-nav .sous-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px;
  }

  .menu-nav .sous-menu img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 44px;
    margin: auto;
    object-fit: contain;
  }

  .menu-nav .sous-menu a:hover img {
    transform: scale(1.03);
  }

  /* Le retour en haut reste accessible. */

  .menu .retour {
    position: fixed;
    top: auto;
    right: 14px;
    bottom: 14px;
    left: auto;

    width: 42px;
    margin: 0;
    z-index: 1100;
  }

  .menu .retour img {
    width: 100%;
    height: auto;
  }
}

/* =========================================
   TRÈS PETITS ÉCRANS
========================================= */

@media (max-width: 380px) {
  .menu {
    padding-inline: 10px;
  }

  .menu-nav {
    gap: 14px;
  }

  .menu-nav .sous-menu {
    padding: 12px;
  }
}



/* =========================================
   BOUTONS-IMAGES RESPONSIVE
========================================= */

:root {
  --vert: #00FF1A;
}

/* Toutes les images restent dans leur conteneur */

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

a img {
  transition: transform 0.25s ease;
  transform-origin: center;
}

/* Animation au survol sur ordinateur */

@media (hover: hover) and (pointer: fine) {
  .sommaire a:hover img,
  .stage a:hover img,
  .menu a:hover img,
  .footer-contact a:hover img {
    animation: shake 0.35s ease-in-out;
  }
}

/* Accessibilité au clavier */

a:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 5px;
}

/* =========================================
   SOMMAIRE ILLUSTRÉ
========================================= */

.sommaire {
  width: 100%;
  box-sizing: border-box;
}

.sommaire-haut,
.sommaire-bas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(12px, 3vw, 45px);
}

.sommaire-haut > a,
.sommaire-bas > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.sommaire-haut figure,
.sommaire-bas figure {
  position: relative;
  inset: auto;
  left: auto;
  transform: none;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 260px;
  height: auto;

  margin: 0;
}

.sommaire-haut figure img,
.sommaire-bas figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* =========================================
   BOUTONS DU PIED DE PAGE
========================================= */

.footer-contact a {
  display: block;
  width: 100%;
}

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

/* =========================================
   TABLETTES
========================================= */

@media (max-width: 1024px) {

  .sommaire {
    margin-top: 0;
    padding: 3vw;
  }

  .sommaire-haut,
  .sommaire-bas {
    gap: 20px;
  }

  .sommaire-haut figure,
  .sommaire-bas figure {
    max-width: 220px;
  }

  .footer-bas {
    gap: 30px;
  }

  .footer-contact {
    max-width: 300px;
  }
}

/* =========================================
   MOBILES
========================================= */

@media (max-width: 768px) {

  .sommaire {
    margin: 0;
    padding: 8vw 5vw;
  }

  .sommaire-haut,
  .sommaire-bas {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    margin: 0;
  }

  .sommaire-haut > a,
  .sommaire-bas > a {
    width: 100%;
    min-height: 65px;
  }

  .sommaire-haut figure,
  .sommaire-bas figure {
    width: min(75%, 300px);
    max-width: 300px;
    margin: 0 auto;
  }

  /* Boutons plus faciles à toucher */

  .sommaire a,
  .footer-contact a {
    -webkit-tap-highlight-color: #00FF1A33;
  }

  .sommaire a img {
    transition: transform 0.2s ease;
  }

  .sommaire a:active img {
    transform: scale(0.97);
  }

  /* Contact et réseaux sociaux */

  .footer-bas {
    flex-direction: column;
    align-items: center;
    gap: 35px;
  }

  .footer-contact {
    width: 100%;
    max-width: 350px;
    align-items: center;
  }

  .footer-contact .nous-ecrire,
  .footer-contact .insta {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }

  .mentions {
    width: 100%;
    overflow-wrap: anywhere;
  }
}

/* =========================================
   PETITS MOBILES
========================================= */

@media (max-width: 380px) {

  .sommaire {
    padding: 8vw 3vw;
  }

  .sommaire-haut,
  .sommaire-bas {
    gap: 24px;
  }

  .sommaire-haut figure,
  .sommaire-bas figure {
    width: 85%;
  }

  .footer-contact .nous-ecrire,
  .footer-contact .insta {
    max-width: 260px;
  }
}

/* Respect des préférences d'animation */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* =========================================
   PAGE LES ENCOUVICIUNS
   Recentrage des trois boutons
========================================= */

/* Conteneur général */

.sommaire:has(.fada-som) {
  width: 100%;
  margin-top: 0;
  padding: 2rem 0 3rem;
  box-sizing: border-box;
}

/* Première rangée : Le fada et La tada */

.sommaire:has(.fada-som) .sommaire-haut {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(2rem, 7vw, 7rem);

  width: min(100%, 850px);
  margin: 0 auto;
  padding: 0 3%;
  box-sizing: border-box;
}

/* Deuxième rangée : Les créations */

.sommaire:has(.fada-som) .sommaire-bas {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  margin: 3rem auto 0;
  padding: 0;
}

/* Liens cliquables */

.sommaire:has(.fada-som) .sommaire-haut > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
}

/* Neutralisation des anciennes positions absolues */

.sommaire:has(.fada-som) .fada-som,
.sommaire:has(.fada-som) .tada-som,
.sommaire:has(.fada-som) .crea-som {
  position: relative;
  inset: auto;
  transform: none;

  display: flex;
  justify-content: center;
  align-items: center;

  height: auto;
  margin: 0;
}

/* Taille homogène des deux premiers boutons */

.sommaire:has(.fada-som) .fada-som,
.sommaire:has(.fada-som) .tada-som {
  width: min(100%, 300px);
}

/* Bouton inférieur, un peu plus large */

.sommaire:has(.fada-som) .crea-som {
  width: min(55%, 400px);
}

/* Images proportionnelles */

.sommaire:has(.fada-som) .fada-som img,
.sommaire:has(.fada-som) .tada-som img,
.sommaire:has(.fada-som) .crea-som img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* =========================================
   TABLETTES
========================================= */

@media (max-width: 768px) {
  .sommaire:has(.fada-som) {
    padding: 1rem 0 2rem;
  }

  .sommaire:has(.fada-som) .sommaire-haut {
    gap: 1.5rem;
    padding: 0 5%;
  }

  .sommaire:has(.fada-som) .fada-som,
  .sommaire:has(.fada-som) .tada-som {
    width: min(100%, 240px);
  }

  .sommaire:has(.fada-som) .sommaire-bas {
    margin-top: 2rem;
  }

  .sommaire:has(.fada-som) .crea-som {
    width: min(75%, 340px);
  }
}

/* =========================================
   PETITS MOBILES
========================================= */

@media (max-width: 480px) {
  .sommaire:has(.fada-som) .sommaire-haut {
    gap: 1rem;
    padding: 0 3%;
  }

  .sommaire:has(.fada-som) .fada-som,
  .sommaire:has(.fada-som) .tada-som {
    width: 100%;
  }

  .sommaire:has(.fada-som) .sommaire-bas {
    margin-top: 1.5rem;
  }

  .sommaire:has(.fada-som) .crea-som {
    width: 85%;
  }
}



/* Équilibrer le bouton Lés criaciuns */

.sommaire:has(.fada-som) .crea-som {
  width: min(100%, 300px);
  max-width: 300px;
  margin: 0 auto;
}

.sommaire:has(.fada-som) .crea-som img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Tablettes et mobiles */

@media (max-width: 768px) {
  .sommaire:has(.fada-som) .crea-som {
    width: min(100%, 240px);
    max-width: 240px;
  }
}

@media (max-width: 480px) {
  .sommaire:has(.fada-som) .crea-som {
    width: min(85%, 240px);
    max-width: 240px;
  }
}



/* =========================================
   MENU MOBILE : HIÉRARCHIE VISUELLE
========================================= */

@media (max-width: 768px) {

  /* Navigation générale */
  .menu-nav {
    gap: 22px;
    padding: 16px 0;
  }

  /* RUBRIQUES PRINCIPALES */
  .menu-nav > .accueil-bd,
  .menu-nav > .le-collectif-bd,
  .menu-nav > .les-projets-bd,
  .menu-nav > .nouvelles-bd,
  .menu-nav > .archives-bd,
  .menu-nav > .jhau-bd {
    width: 100%;
  }

  .menu-nav > .accueil-bd > a,
  .menu-nav > .le-collectif-bd > a,
  .menu-nav > .les-projets-bd > a,
  .menu-nav > .nouvelles-bd > a,
  .menu-nav > .archives-bd > a,
  .menu-nav > .jhau-bd > a {
    min-height: 48px;
    padding: 5px 0;
  }

  .menu-nav > .le-collectif-bd > a > img,
  .menu-nav > .les-projets-bd > a > img,
  .menu-nav > .nouvelles-bd > a > img,
  .menu-nav > .archives-bd > a > img {
    max-width: min(78%, 250px);
    max-height: 48px;
  }

  /* Accueil : icône plus petite */
  .menu-nav > .accueil-bd > a > img {
    max-width: 38px;
    max-height: 38px;
  }

  /* SOUS-MENUS : conteneurs plus compacts */
  .menu-nav .sous-menu {
    gap: 8px;
    margin-top: 8px;
    padding: 12px 10px;

    border: 1px solid #00FF1A;
    border-radius: 8px;
    box-shadow: 2px 2px 0 #00FF1A;
    background: #fff;
  }

  /* Chaque sous-rubrique prend moins de place */
  .menu-nav .sous-menu a {
    width: 100%;
    min-height: 32px;
    padding: 3px 0;
  }

  /* Illustrations des sous-rubriques */
  .menu-nav .sous-menu img {
    width: auto;
    max-width: 65%;
    max-height: 30px;
    object-fit: contain;
    margin: auto;
  }

  /* Supprime les effets de dimensionnement hérités */
  .menu-nav .sous-menu .btn-histoire,
  .menu-nav .sous-menu .btn-projet,
  .menu-nav .sous-menu .btn-encouv,
  .menu-nav .sous-menu .btn-equipe,
  .menu-nav .sous-menu .btn-terr,
  .menu-nav .sous-menu .btn-peyis,
  .menu-nav .sous-menu .btn-manif,
  .menu-nav .sous-menu .btn-praech,
  .menu-nav .sous-menu .btn-soutien,
  .menu-nav .sous-menu .btn-acots,
  .menu-nav .sous-menu .btn-fada,
  .menu-nav .sous-menu .btn-tada,
  .menu-nav .sous-menu .btn-crea {
    width: 100%;
    margin: 0;
  }
}

/* Très petits téléphones */
@media (max-width: 380px) {

  .menu-nav {
    gap: 16px;
  }

  .menu-nav .sous-menu {
    gap: 6px;
    padding: 10px 8px;
  }

  .menu-nav .sous-menu img {
    max-width: 70%;
    max-height: 27px;
  }
}

/* ==================================
   ACCUEIL — VERSION MOBILE
================================== */

@media (max-width: 768px) {

  .scene {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 600px;
    overflow: hidden;
  }

  .bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

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

  /* Logo en bas, bien visible */
  .logo {
    position: absolute;
    top: auto;
    bottom: 4%;
    left: 3%;
    width: 92.5%;
    margin: 0;
    z-index: 2;
  }

  /* Boutons regroupés en haut à droite */
  .le-collectif,
  .les-projets,
  .nouvelles,
  .les-archives {
    position: absolute;
    left: auto;
    right: 4%;
    height: auto;
    margin: 0;
    transform: none;
    opacity: 0.85;
    z-index: 3;
  }

  .le-collectif {
    top: 5%;
    width: 29%;
  }

  .les-projets {
    top: 14%;
    width: 25%;
  }

  .nouvelles {
    top: 23%;
    width: 55%;
  }

  .les-archives {
    top: 33%;
    width: 30%;
  }

  .le-collectif:hover,
  .les-projets:hover,
  .nouvelles:hover,
  .les-archives:hover {
    opacity: 1;
    transform: none;
  }

  /* Bouton de langue */
  .poitevin {
    position: absolute;
    top: 2%;
    right: 2%;
    left: auto;
    width: 32px;
    z-index: 4;
  }

  /* Lecteur audio plus compact */
  .chapelloise {
    position: absolute;
    top: 43%;
    right: 4%;
    left: auto;
    width: 48%;
    margin: 0;
    transform: none;
    z-index: 3;
  }

  .chapelloise audio {
    width: 100%;
  }
}

@media (min-width: 769px) {
  html,
  body {
    margin: 0;
    min-height: 100%;
    background: #000;
  }

  .scene {
    width: 100%;
    max-width: none;
  }

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


/* ==================================
   BOUTON POITEVIN — ACCUEIL MOBILE
================================== */

@media (max-width: 768px) {
  .accueil .poitevin {
    display: block;
    position: absolute;
    top: 3%;
    left: 4%;
    right: auto;
    width: 40px;
    z-index: 10;
  }

  .accueil .poitevin img {
    display: block;
    width: 100%;
    height: auto;
  }
}



/* =========================================
   BOUTON POITEVIN — PAGES INTÉRIEURES
========================================= */

@media (max-width: 768px) {

  body:not(.accueil) .menu {
    position: sticky;
    top: 0;
  }

  body:not(.accueil) .poitevin-bd {
    display: block;
    position: fixed;
    top: 12px;
    right: 15px;
    left: auto;
    width: 40px;
    z-index: 1001;
  }

  body:not(.accueil) .poitevin-bd img {
    display: block;
    width: 100%;
    height: auto;
  }

  
}




/* Bouton poitevin visible en permanence */
.bouton-poitevin {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 1001;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;
}

.bouton-fr {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 1001;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;
}

.bouton-poitevin img {
  display: block;
  width: 90%;
  height: auto;
  object-fit: contain;
}

.bouton-fr img {
  display: block;
  width: 97%;
  height: auto;
  object-fit: contain;
}


/* Le bouton Menu reste à gauche */
.menu-toggle {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 1002;
}

/* Sur ordinateur, on conserve également le bouton visible */
@media (min-width: 769px) {
  .bouton-poitevin {

  top: 5%;
  right: 3%;
  width: 4%;
  }

  .bouton-fr {

  top: 5.5%;
  right: 2%;
  width: 7%;
  }
}



/* Images intégrées au corps du texte */
.article figure.bloc-img-left,
.article figure.bloc-img-right {
  box-sizing: border-box;
  max-width: 100%;
}

.article figure.bloc-img-left img,
.article figure.bloc-img-right img {
  display: block;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* Version mobile */
@media (max-width: 768px) {

  .article figure.bloc-img-left,
  .article figure.bloc-img-right {
    float: none;
    clear: both;

    width: 100%;
    max-width: 100%;

    margin: 1.5rem auto;
    padding: 0;

    text-align: center;
  }

  .article figure.bloc-img-left img,
  .article figure.bloc-img-right img {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;

    margin: 0 auto;
    object-fit: contain;
  }

  .article figure.bloc-img-left figcaption,
  .article figure.bloc-img-right figcaption {
    max-width: 100%;
    margin: 0.5rem auto 0;
    padding: 0 0.25rem;

    box-sizing: border-box;
    text-align: center;
    overflow-wrap: anywhere;
  }
}