/* PAGES PARTICULIÈRES — identité graphique historique conservée.
   Accueil, autoportraits, infos, About, mentions.
   Les éditions sont exclusivement dans editions.css. */


     /* 1 — ÉCRAN D’ENTRÉE : logo centré sur fond noir. */
.containerIndex00 {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-height: 100vh;
      background-color: #000;
    }

    .containerIndex00 img a {
       position: absolute;
       }  
      .containerIndex00 img {
         width: 60%;
       }
  
    .containerIndex00 a{
      text-decoration: none;
      text-transform: uppercase;  
      z-index: 99;
      color:#000;
      text-align: center;
      font-family: 'Faune', sans-serif ;
      font-weight: bold;
      font-size: 100px;
      line-height: 69px;
    }    

      .containerIndex00  span {
      text-transform: capitalize;  
      font-size: 90px;
      font-family: 'Faune', sans-serif ;
      font-style: italic;
      color:#000;
    }

    .margin-2025 {
      margin-top: 3%;
    }

 /* 2 — ACCUEIL : mots animés, navigation périphérique dans style.css. */
#ice {
  background-color: #000;
  height: 200vh;
 font-family: 'Faune', sans-serif ;
 font-weight: 900;
 font-style: normal;
 text-align: center;
}

#rotate-words div {
  position: fixed;
 opacity:0;
 overflow:hidden;
 left:10vw;
 width:80vw;
  animation: rotate-word 30s linear infinite 0s;
 }

#rotate-words {
 color: white;
 max-width:400px;   
  margin:auto;  
 padding: 20% 0;
 font-size: 4.2em;
 font-family: 'Faune', sans-serif ;
 font-weight: 500;
}

@media screen and (max-width: 600px) {
  #rotate-words {
    font-size: 2.7em;
    padding: 40% 0;

  }
}
@media screen and (max-width: 375px) {
  #rotate-words {
    font-size: 2em;
 
  }
}

#rotate-words span{
  font-weight: normal;
}

@keyframes rotate-word {
    0% { opacity: 0;  transform: translateX(0);filter:blur(5px);transform:scale(1)}
    3% { opacity: 1;  transform: translateX(0);filter:blur(0px);transform:scale(1)}
    12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}
    16% { opacity: 0; transform: translateX(0);filter:blur(5px);transform:scale(1.2)}
    80% { opacity: 0}
    100% { opacity: 0}
}

  #rotate-words div:nth-child(2) { animation-delay: 4s}
#rotate-words div:nth-child(3) { animation-delay: 8s}
#rotate-words div:nth-child(4) { animation-delay: 12s}
#rotate-words div:nth-child(5) { animation-delay: 16s}
#rotate-words div:nth-child(6) { animation-delay: 20s}
#rotate-words div:nth-child(7) { animation-delay: 24s}
#rotate-words div:nth-child(8) { animation-delay: 28s}  

  /* 3 — AUTOPORTRAITS : mosaïque de liens vers les archives. */
.flex-container {
     display: flex;
    flex-wrap: wrap;
    background-color: black;
    justify-content: space-between;   }

    @media screen and (max-width: 1000px) {
      .flex-container{
        justify-content: space-around;
      }
    }

    .flex-container a{
      text-decoration: none;
      color: #fff;
    }
  .flex-container > div {
    width: 15%;
    margin: 30px;
    text-align: center;
    flex-wrap: wrap;
    }

  .lettre{
    font-family: 'Faune', sans-serif ;
    font-weight: 100;
    font-size: 100px;
    color: #fff;
  }

  .lettre img {
    width: 60%;
    padding: 18px 0px 0px 0px;
}

  .para {
    text-transform: uppercase;
    line-height: 33px;
    font-family: 'Faune', sans-serif ;
    font-weight: 100;
    font-size: 20px;
    color: #fff;
  }

  .para p {
    text-align:center; 
   
  }
  .para span {
    font-size: 25px;
    font-weight: bold;
    text-align: center;
  }

  @media screen and (max-width: 650px) {
    .flex-container{
      justify-content: space-around;
    }
    .flex-container > div {
      width: 20%;
        margin: 35px; 
       }
      .lettre{
        font-size: 60px;
       }
       .para {
         line-height: 30px;
         font-size: 15px;
       }
       .para span {
        font-size: 15px;
      }
      .lettre img {
        width: 40%;
        padding: 10px 0px 0px 0px;
    }
    
}

@media screen and (max-width: 520px) {
  .flex-container{
    justify-content: space-around;
  }
  .flex-container > div {
    width: 16%;
      
     }
    .lettre{
      font-size: 50px;
     }
     .para {
       line-height: 20px;
       font-size: 10px;
     }
     .para span {
      font-size: 12px;
    }
    .lettre img {
      width: 70%;
   }
  
}

@media screen and (max-width: 450px) {
  .flex-container{
    justify-content: space-around;
  }
   .flex-container > div {
     width: 18%;
     margin: 25px
      }  
     
     .para {
       line-height: 15px;
       font-size: 10px;
     }
     .para span {
      font-size: 13px;
    }
    .lettre img {
      width: 50%;
   }
    
}

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

  .flex-container{
    justify-content: space-around;
  }
  .flex-container > div {
    width: 20%;
      }
     .lettre{
      font-size: 35px;
     }
     .para {
       line-height: 15px;
       font-size: 12px;
     }
     .para span {
      font-size: 9px;
    }
    .lettre img {
      width: 40%;
   }
    
}

  /* 4 — INFOS : billetterie, lieux, partenaires et réseaux. */
#infosPratiques {
     overflow: hidden;
    background-color: black;
  }

  #infosPratiques img {
  margin: auto;
   width: 12%;
   padding: 40px;
 }  

  #etoile {
    text-align: center;
    }   

#infosPratiques .icon{
 width: 5%;
  }

  @media screen and (max-width: 600px) {
    #infosPratiques .icon{
      width: 10%;  }
}

#icons {
  text-align: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  align-content: flex-start;
 }  
 
 @media screen and (max-width: 400px) {
  #icons{
    display: flex;}
     
  }

.titre__infos {
  font-size: 30px;
  text-align: center;
  color: white;
  font-family: 'Faune', sans-serif ;
  font-weight: 900;
  margin-top: 40px;
}

 #infosPratiques a{
text-decoration: none;
color:#fff;

 }

#infosPratiques p {
 font-size: 23px;
 text-align: center;
 color: white;
 font-family: 'Faune', sans-serif ;
 font-weight: 300;
 font-style: normal;
 padding: 0px 0px 15px 0px;
}
@media screen and (max-width: 400px) {
#infosPratiques p {
  padding: 10px;
}
     
  }

 .banniere-logo{
  width: 100% ;
  max-width: 900px;     
  margin: 0 auto !important;
  
}
.banniere-logo img{
  padding: 0 !important;
  display: block;
  width: 100% !important;          
  height: auto;          
 }

.mentions_link  a {
  text-decoration: none;
  color:#fff;
  font-size: 15px;
  }

.mentions_link   {
  padding: 50px 0 80px 0;

}

 /* 5 — ABOUT : le pliage est dans css/css_about et js/js_about/split.js. */
#about {
  position: fixed;
   background-color: #000;
  }

  #about img {
   padding: 10px;
   width: 12%;
 }    
 
#about span {   
  font-weight: bold;
}

 /* 6 — MENTIONS LÉGALES. */
#mentions  {
  font-family: 'Faune', sans-serif ;
  font-style: normal;
 }

 #mentions  {
   padding: 60px;
 }
#mentions h3 {
  padding: 10px;
}



/* 7 — AJUSTEMENTS RESPONSIVE COMMUNS AUX PAGES ÉDITORIALES.
   Les longues expressions restent dans leur tuile, sans masquer le débordement. */
@media (max-width: 650px) {
  .flex-container > div { min-width: 0; overflow-wrap: anywhere; }
  .para { font-size: 12px; line-height: 1.45; }
  .para span { font-size: 13px; }
  #mentions { padding: 28px 20px; overflow-wrap: anywhere; }
  #infosPratiques p { font-size: clamp(18px, 4.8vw, 23px); line-height: 1.4; padding-inline: 20px; }
}

/* Justification des textes éditoriaux sur tablette et mobile. */
@media (max-width: 1000px) {
  #infosPratiques p, #mentions p, .para p { text-align: justify; }
}

/* Les renseignements pratiques conservent leur présentation centrée. */
@media (max-width: 1000px) {
  #infosPratiques p { text-align: center; }
}