body {
  margin: 0px;
  height: 95vh; 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;      
  cursor: none;      
}

.cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: white;
    mix-blend-mode: difference;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
}



.lien-ref {
  color: green;
}




.citationIndex {
    width: 400px;
    padding: 10px 10px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    position: absolute;
    height: auto;       /* allows height to grow with content */
    white-space: pre-wrap; /* preserves line breaks */
    overflow-wrap: break-word; /* wrap long words */


        /* Default textarea font style */
    font-size: 16px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
    font-family: "Garamond", "Times New Roman", serif;
    left: 600px; top: 2315px;
    z-index: 1001;
}


/* ************************************* */
/* ************************************ */
/* *********************************** */

/* invisible trigger points */
.marker {
    height: 1px;
}

/* Container for scrollytelling images */
.imagesScrolly {
    position: fixed;     /* anchor to viewport */
    width: 100%;         /* full viewport width */
    height: 100%;        /* full viewport height */
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 1000;
}

/* All images positioned absolutely inside viewport */
.imagesScrolly img {
    position: fixed;     /* fix each image independently */
    width: 150px;        /* adjust size as needed */
    opacity: 0;          /* hidden by default */
    transition: opacity 0.2s ease;
}

/* Four corners, slightly inset from edges */
#img1 { top: 16%; left: 27%; }        /* top-left */
#img2 { top: 32%; left: 27%; }       /* top-right */
#img3 { top: 50%; left: 27%; }     /* bottom-left */
#img4 { top: 66%; left: 27%; }    /* bottom-right */
#img5 { top: 16%; left: 27%; }    /* bottom-right */
#img6 { top: 16%; left: 27%; }    /* bottom-right */
#img7 { top: 40%; left: 27%; }    /* bottom-right */

/* ************************************* */
/* ************************************ */
/* *********************************** */



.imageFond {     
    top: 0;
    left: 0;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -10;     
}




#gif {
    display: none;
    width: 200px;
    height: auto;
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

#gif:hover {
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.6); 
    transform: translate(-50%, -50%) scale(1);       /* mettre échelle à 1.01+ pour animation pop*/
}



/* ************************************* */
/* ************************************ */
/* *********************************** */

h1, h2, h3, h4 {
  margin: 0;
  text-align: center;
  z-index: 1001;
  position: fixed;

  background: #111;
  color: lightgray;
  padding: 0.5vh 0.4vw;

  font-size: clamp(1rem, 2vw, 24px); /* responsive */
  font-family: sans-serif;
  text-decoration: underline;
}

/* Position responsive */
h1 { 
  left: 5vw; 
  top: 5vh; 
}

h2 { 
  right: 5vw; 
  top: 5vh; 
}

h3 { 
  left: 5vw; 
  bottom: 5vh; 
}

h4 { 
  right: 5vw; 
  bottom: 5vh; 
}


/* ************************************* */
/* ************************************ */
/* *********************************** */







/*.milieuEcriture {          
  position: absolute;
  font-size: 1.5em;
  text-align: left;
  color: white;
  mix-blend-mode: difference;

  padding: 20px 40px;  
  width: 50vw;   
}*/


/*.milieuEcriture {          
  position: absolute;

  font-size: clamp(1rem, 2vw, 1.5rem); 

  text-align: left;
  color: white;
  mix-blend-mode: difference;

  padding: clamp(10px, 2vw, 20px) clamp(20px, 3vw, 40px);
  width: clamp(280px, 50vw, 800px);
}*/



.milieuEcriture {          
  position: absolute;
  top: 50%;
  left: 65%;
  transform: translateX(-50%);
  margin-top: 100px; 
  font-size: clamp(1rem, 2vw, 24px); /* responsive */
  text-align: left;
  color: #111;

  background-color: white;  
  padding: 80px 80px 20px 20px;
  border: 1px solid #ccc;
  border-radius: 3px;     
    box-shadow: 2px 2px 8px rgba(0,0,0,0.25);

  width: 50vw;           

}







.plusGrand{
    font-size: 1.7em;
    font-family: "Apple Chancery";
}


.italique{
    font-style: italic;

}








.colophon{
font-size: 1.5em;
  color: white;
  width: 50vw;  
    padding: 100px 100px;
        margin-left: auto;  
}