/* #region ALLL */

/* #region FONTS */
/* stacks globales */
@font-face {
  font-family: DINdong;
  src: url("fonts/DINdong.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --ff-body: "Roboto Condensed", Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ff-ui:   Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ff-title:"DINdong","Roboto Condensed", Arial, sans-serif;
}


/* #endregion */

/* #region AUTRES */

.credit {
  font-size: calc(1.3*((1vw + 0.5vh)/1.618));

  margin-top: calc(5px + 0.5rem + 0.5em) ;
  z-index: 10;
  font-family: DINdong;
}

.protocole-titre {
  font-size: calc(1.618*(1vw + 0.5vh)) ;
  font-family: DINdong;

  margin: 0;
  padding: 0;
}

.protocole-corps {
  font-size: calc(1vw + 0.5vh) ;
   font-family: Roboto;

}

.extrait-titre {
  font-size: calc(1.618*(1vw + 0.5vh)) ;
  font-family: DINdong;
}

.extrait {
  font-size: calc(1vw + 0.5vh) ;
  font-family: DINdong;
  line-height: calc(1.25vw + 0.75vh);
}

.context {
  font-size: calc(1vw + 0.5vh) ;
  font-family: Roboto;
}

.intro {
  font-size: calc(1vw + 0.5vh) ;
  font-family: Roboto;
  font-weight: bold;
  font-style: italic;

  text-align: right; 
}

.lien {
  font-size: calc(1vw + 0.5vh) ;
  font-family: DINdong;
}

.trait {
  width: calc(6vw + 3vh) ;           
  border: none;          
  border-top: calc(5px + 0.05vw + 0.05vh) solid black; 
  margin: 10px 0;    

}



/* #endregion */

/* #region BEFORE */
body {

}


:root{
  --spacer: clamp(24px, 4vh, 64px); /* marge de confort quand un projet est ouvert */
}

.allproject{
  display: flex;
  flex-direction: column;
  gap: calc(1.618*(1.618*(1vw + 0.5vh)));
  min-height: 100vh;

  /* État "tout fermé" → centré au milieu */
  justify-content: center;
  align-items: center;
}

/* Dès qu’au moins UNE section n’a plus .is-hidden */
.allproject:has(section:not(.is-hidden)){
  /* on repasse à un flux normal en haut + on étire horizontalement 
  justify-content: flex-start;
  align-items: stretch;*/

  /* espace en haut pour éviter l’effet "collé" du premier titre */
  padding-top: var(--spacer);
}

/* Optionnel : petite marge supplémentaire sous le premier titre */
.allproject:has(section:not(.is-hidden)) .initialspace{
  margin-top: var(--spacer);
}


/* #endregion */




/* #endregion */


/* #region HOME */

.is-hidden { display: none; }

.HOME {
  display: grid;
  grid-template-columns: 1fr;
  padding-top: calc(3vw + 3vh);
  padding-left: 5rem;
  padding-right: 5rem;
  row-gap: calc(1.5vw + 1.5vh);
} 

.PROJET {
  font-size: calc(1.618*(1.618*(1vw + 0.5vh))) ;
  font-family: DINdong;

  padding: 0;
  transition: transform 0.3s ease;

  text-align: center;      /* centre les lignes */
  text-wrap: balance;      /* équilibre les retours à la ligne (super utile pour titres) */
  line-height: 1.1;        /* un peu plus compact pour un look titre */
  max-width: 90ch;         /* optionnel : évite les lignes trop longues */
  margin: 0 auto;          /* centre le bloc lui-même */
}

.PROJET:hover {
  transform: scale(1.05);
  transform: translateX(calc(0.5vw + 0.5vh));
  cursor: pointer;
  font-weight: 1000; /* 600 is semi-bold, between normal (400) and bold (700) */
}



/* #endregion */

/* #region PROJET1 LIASONS VEGETALES */



.p1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: calc(1.618*(1vw + 0.5vh)) ;
}


/* #region slide1 */

/* 1 grille et colonnes */
.grid-p1s1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding-left: 5rem;
  padding-right: 5rem;
  column-gap: 2vw;
}

.col-p1s1-1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* background-color: seagreen;*/
}

.col-p1s1-2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* background-color: seagreen;*/
}

.col-p1s1-3 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* background-color: seagreen;*/
}


/* 2 blocks et elements */
.media-block-p1s1 {
  display: block;
  width: 100%;
}

.placeholder-p1s1 {
  aspect-ratio: 1 / 1;
  width: 100%;
  background-color: black;
}


.text-block-p1s1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: white;
  padding: 0;
  margin-top: calc(1.299*(1vw + 0.5vh));
  gap: 0;
}



/* #endregion */


/* #region slide2 */

/* 1 grille et colonnes */
.grid-p1s2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding-bottom: 5rem;
  padding-left: 5rem;
  padding-right: 5rem;
  column-gap: 2vw;
}

.col-p1s2-1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20vw;
}

.col-p1s2-2 {
  display: flex;
}

.col-p1s2-3 {
  display: flex;
}


/* 2 blocks et elements */
.media-block-p1s2-1 {
  display: flex;
  flex-direction: column;
  gap: 2vw;
  position: relative;
  width: 100%;
}

.media-block-p1s2-2 {
  display: block;
  position: relative;
  width: 100%;
}

.text-block-p1s2 {
  gap: 0;
}



/* #endregion */

/* #endregion */


/* #region P2 PAENSER */


.p2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 1 grille et colonnes */
.grid-p2 {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  padding-left: 5rem;
  padding-right: 5rem;
  column-gap: 5vw;
}
.col-p2-1 {
  display: flex;
  flex-direction: column; 
  justify-content: flex-start;
  gap: 2vw;
}
.col-p2-2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2vw;
}

/* 2 blocks et elements */
.media-block-p2 {
  display: block;
  width: 100%;
  
}
.placeholder-p2 {
  aspect-ratio: 1 / 1;
  width: 100%;
  background-color: black;
}
.credit-p2 {
  text-align: right;
  margin-left: auto;
}
.text-block-p2 {
  text-align: right;  /* Aligne tout le texte à droite */
}

/* Si besoin de contrôle plus fin sur certains éléments */
.protocole-titre-p2 {
  text-align: right;  /* Aligne tout le texte à droite */
  }

.protocole-corps-p2 {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;

  }

.lien-p2 {
  text-align: right;
  font-size: 1.1rem;
  text-decoration: underline;
  color: inherit; /* garde la couleur du texte parent */
  cursor: pointer;
}


/* #endregion */


/* #region P3 DES NORMES AUX MORNES : MARRONNER EN SOI. */

/* 1 grille et colonnes */
.grid-p3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-left: 5rem;
  padding-right: 5rem;
  column-gap: 2vw;
}

.grid-p3-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;

}

.col-p3-1 {
  display: flex;
  flex-direction: column; 
  justify-content: flex-start;
  gap: 2vw;
}



.col-p3-2 {
  display: flex;
  flex-direction: column; 
  justify-content: flex-start;
  gap: 2vw;
}

/* 2 blocks et elements */
.text-block-p3-1 {
  display: flex;
  flex-direction: column;
  flex: 1;       /* occupe toute la hauteur dispo dans la colonne */
  min-height: 0; /* très important en contexte grid */
}
.text-block-p3-2 {
}


.text-block-p3-3 {
  display: flex;
  flex-direction: column;
  gap: 2vw;
}

.intro-p3 {
  margin-left: 15%;
  margin-bottom:calc(  1vw + 0.5vh) ;
    display: flex;
  flex-direction: column; 
  justify-content: flex-start;
}
.autre-corps {
}
.biblio {
}
.media-block-p3 {
  display: flex;
  flex-direction: row;
  gap: 2vw;
  width: 100%;
}

.credit-p3 {
text-align: right;
}

.biblio-p3 {
margin-top: auto;
}

.trait-p3 {
margin-top: auto;
}

.footer-p3 {
  margin-top: auto;            /* pousse ce bloc en bas */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;                  /* espace entre trait et crédit */
}

.placeholder-p3 {
  aspect-ratio: 1 / 1;
  width: 50%;  /* Chaque placeholder prend la moitié de l'espace */
  background-color: black;
  text-align: right;
}

.lien-p3 {
text-align: right;
}

/* #endregion */


/* #region P4 ECOLE COMME CAISSE D RESONNANCE */

/* 1 grille et colonnes */
.grid-p4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

  padding-left: 5rem;
  padding-right: 5rem;
  column-gap: 2vw;
}

.col-p4-1 {
  gap: calc(  1vw + 0.5vh) ;
}
.col-p4-2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2vw;
 
}
.col-p4-3 {
    display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2vw;
}

/* 2 blocks et elements */
.media-block-p4-1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2vw;
    }

.placeholder-p4-1 {
  aspect-ratio: 6 / 4;

  background-color: black;
  }

.placeholder-p4-2 {
  aspect-ratio: 6 / 4;

  background-color: black;
}

.text-block-p4-1 {
}


.intro-p4 {
margin-top: calc(1vw + 0.5vh) ;
}

.context-p4 {
margin-top: calc(1vw + 0.5vh) ;
}

.autre-corps {
}
.lien-p4 {
  text-align: right;
  margin-top: calc(1vw + 0.5vh) ;
}
.text-block-p4-2 {
}
.protocole-corps-p4 {
  margin-top: calc(1vw + 0.5vh) ;
}

.credit-p4 {
  text-align: right;
}

/* #endregion */


/* #region P5 GESTES POSSIBLES */

/* 1 grille et colonnes */
.grid-p5 {
  display: grid;
  grid-template-columns: 0.3fr 0.3fr 0.6fr;
  padding-left: 5rem;
  padding-right: 5rem;
  column-gap: 2vw;
}

.col-p5-1 {
  z-index: 1;
  
}
.col-p5-2 {
  margin-left: -5vw ;
  z-index: 0;
}

.col-p5-2 {
}

/* 2 blocks et elements */
.media-block-p5-1 {
  margin-top: calc(20px + 10vw + 12vh) ;
}

.placeholder-p5-1 {
  aspect-ratio: 3.33 / 6.33;
  background-color: rgb(211, 196, 196);
}
.placeholder-p5-2 {
  aspect-ratio: 4 / 5;
  background-color: black;
}



.text-block-p5-1 {
}

.context-p5 {
  margin-left: calc(5vw + 1vh) ;
}
.intro-p5{
margin-top: calc(1vw + 0.5vh);
}

.context-p5 {
  margin-top: calc(1vw + 0.5vh);
}

.protocole-corps-p5{
  margin-top: calc(1vw + 0.5vh);
}




/* #endregion */


/* #region P6 LES MARGES FORCÉES */

/* 1 grille et colonnes */
.grid-p6 {
  display: grid;
  grid-template-columns: 0.35fr 0.5fr ;
  padding-left: 5rem;
  padding-right: 5rem;
  column-gap: calc(20px + 6vw + 4vh);
}


.col-p6-1 {
}
.col-p6-2 {
}

/* 2 blocks et elements */
.media-block-p6 {


}
.placeholder-p6 {
  aspect-ratio: 4 / 4;
  background-color: black;
}

.credit-p6 {
text-align: right;
}


.autre-corps {
}
.text-block-p6-1 {
}
.media-block-p6-2 {
}
.placeholder-p6-2 {
}

.context-p6 {
  margin-top: calc(2vw + 1vh);
  justify-content: baseline;
}

.placeholder-p6-2 {
}

.placeholder-p6-2 {
}


/* Justification harmonisée pour les textes longs */
.context-p6,
.extrait-p6,
.protocole-corps-p6 {
  text-align: justify;          /* aligne des 2 côtés */
  text-align-last: left;        /* dernière ligne non justifiée (évite l'effet étiré) */
  hyphens: auto;                /* césure automatique */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  /* optionnel : un poil d'espace pour un gris plus régulier */
  /* word-spacing: 0.02em; */
}

.extrait-p6 {
margin-top: calc(1vw + 1vh);
text-indent: 10ch;          /* ≈ deux « caractères » d’indent */
hanging-punctuation: first; /* laisse le guillemet “pendre” proprement (Safari/Chromium récents) */
}


.lien-p6 {
margin-top: calc(1vw + 1vh);
text-align: right;
}


/* #endregion */

/* #region P7 HIER ET C EST DEJA DEMAIN  */
/* #region P7S1 */

/* 1 grille et colonnes */
.grid-p7 {
  display: grid;
  grid-template-columns: 0.5fr 0.5fr ;
  padding-left: 5rem;
  padding-right: 5rem;
  column-gap: 2vw;
}

.col-p7-1 {
}

.col-p7-2 {
}

/* 2 blocks et elements */
.media-block-p7-1 {
}
.placeholder-p7-1 {
  aspect-ratio: 4 / 4;
  background-color: black;
}


.placeholder-p7-2 {
  aspect-ratio: 4 / 4;
  background-color: black;
}

.text-block-p7-1 {
  display: grid;
  grid-template-columns: 0.4fr 0.6fr ;
}

.credit-p2-2 {
 text-align: right;
}


.context-p7 {
 margin-top: calc(2vw + 1vh);
}

/* #endregion */





/* #region P8 NOUS SOMMES LE PAYSAGE */

/* 1 grille et colonnes */
.grid-p8-1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding-left: 5rem;
  padding-right: 5rem;
  column-gap: 2vw;
}


.col-p8 {
  display: flex;
  flex-direction: column;
  gap:2vw;
}


/* 2 blocks et elements */
.credit-p8-1 {
margin-left: 5rem;
}


.placeholder-p8-1 {
  aspect-ratio: 1 / 1;
  width: 100%;  
  background-color: black;
}

.row-p8-1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding-left: 5rem;
  padding-right: 5rem;
  column-gap: 2vw;
}

.placeholder-p8-2 {
  aspect-ratio: 1 / 1;
  width: 100%;  
  background-color: black;
}

.credit-p8-2 {
text-align: right;
}

.row-p8-2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  padding-left: 5rem;
  padding-right: 5rem;
  column-gap: 2vw;
}

.grid-p8-2 {
  display: grid;
  grid-template-rows: 1fr 1fr ;
 
}

.text-block-p8{
  display: flex;
  flex-direction: column;
  gap:2vw;

}

.credit-p8-3{
margin-top: auto;
}

.credit-p8-3{
margin-top: auto;
}

.credit-p8-3{
margin-top: auto;
}
/* #endregion */


/* #region P9 NYAZE */

.grid-p9{
display: grid;
grid-template-columns: 1fr 1fr ;
padding-left: 5rem;
padding-right: 5rem;
column-gap: 6vw;
}

.placeholder-p9{
  aspect-ratio: 1 / 1;
  width: 100%;  
  background-color: black;
   margin-top: calc(2vw + 1vh);
}

.credit-p9{
text-align: right;
}



.trait-p9 {
 margin-top: calc(4vw + 2vh); /* Keeping the smaller margin value */
}

.extrait-p9 {
 text-indent: 10ch;          /* ≈ deux « caractères » d'indent */
 hanging-punctuation: first;}

.protocole-corps-p9 {
 margin-top: calc(2vw + 1vh);
 margin-right: 25%;
}

.protocole-titre-p9 {
 margin-top: calc(2vw + 1vh);
}
/* #endregion */

[class*="placeholder"] {
  position: relative;
  overflow: hidden;
}

[class*="placeholder"] img {
  position: absolute;
  width: 110%;
  height: 110%;
  top: -5%;
  left: -5%;
  object-fit: cover;
  will-change: transform;
  transition: transform 0.1s linear;
}