#page {
  margin: 0 5% 0 5%;
}

h1 {
  font-size: 1.2rem;
  text-align: center;
  font-weight: bold;
  margin: 8px 0 8px 0;
}

/* strucutre d'une reference */
.reference { 
/*  width: 92vw; */
  display: grid;
  grid-template-columns:   1fr;
  /*grid-template-rows:      ;*/
  grid-template-areas:     "texte"
                           "img";
  margin-top: 30px;
  align-items: center;
  justify-content: center;
}

/* partie texte */
.reftexte {  
  padding: 0 5% 10px 5%;
  background-color: #ebeff2;  
}

.reference h2 {
  margin-top: 5px;
  font-size: 1.2rem;
  color: black
}


.reference h3 {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--color_ne_darkblue);
  font-weight: bold;
}

.reference .refdesc {
  margin-top: 10px;
  font-size: 0.8rem;
  color: black;
  line-height: 1.1rem;
  text-align: justify;
}

.refdesc li { 
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 0.8rem;
}

/* partie image */
.reference .refimg {
  margin-top: 10px;
  text-align: center;
}

.reference .refimg img {
  max-height: 50svh;
  max-width: 80%;
}


@keyframes reveal {
	from {
		opacity: 0;
		clip-path: inset(30% 15% 30% 15%);
	}
	to {
		opacity: 1;
		clip-path: inset(0% 0% 0% 0%);
	}
}

.reference .refimg img {
	/* Create View Timeline */
	view-timeline-name: --revealing-image;
	view-timeline-axis: block;

	/* Attach animation, linked to the  View Timeline */
	animation: linear reveal both;
	animation-timeline: --revealing-image;

	/* Tweak range when effect should run
     entry 0 exit 100% : commence quand haut image entre sur ecran , finit quand bas image sort ecran 
     entry 0 entry 100% : commence quand haut image entre sur ecran , finit quand bas image entre ecran 
     entry 25% entry 100% : commence quand 25% du haut image entre sur ecran , finit quand bas image entre ecran 
     contain 0% contain 100% : commence quand bas image entre sur ecran , finit quand haut image sort ecran 
     https://scroll-driven-animations.style/tools/view-timeline/ranges/#range-start-name=entry&range-start-percentage=0&range-end-name=contain&range-end-percentage=100&view-timeline-axis=block&view-timeline-inset=0&subject-size=smaller&subject-animation=reveal&interactivity=clicktodrag&show-areas=yes&show-fromto=yes&show-labels=yes
	*/
  animation-range: entry 0% entry 100%;
}



/* styles surchargés selon format ecran
--------------------------------------*/
html {
    /* par defaut , devrait etre surchargé par definitions suivantes */
    font-size: 3px;
}

.height1 {
   height: calc(100svh - 62px);
}

/* Smartphone Portrait */
@media screen and (max-width: 599px) {
    html {
    /* font selon taille écran (svh pour taille sans barre navigateur */
    font-size: 18px;
    }
}

/* Smartphone paysage */
@media screen and (max-height: 599px) and (orientation: landscape){
    html {
        font-size: 20px;
    }

    .height1 {
         height: 800px;
    }
}

/* Tablette Portrait */
@media screen and (min-width: 600px) and (max-width: 1023px) and (orientation: portrait) {
    html {
    /* font selon taille écran (svh pour taille sans barre navigateur */
    font-size: 2.5vh;
    }
}

/* Tablette landscape */
@media screen and (min-width: 600px) and (max-width: 1023px) and (min-height: 600px) and (orientation: landscape) {
    html {
    /* font selon taille écran (svh pour taille sans barre navigateur */
    font-size: 2.5vh;
    }
}


/* ordinateur */
@media screen and (min-width: 1024px) {
    html {
        font-size: 20px;
    } 

    .reference {  
       display: grid;
       grid-template-columns:   1fr 1fr;
       grid-template-areas:     "texte" "img";
       margin-top: 30px;
       align-items: center;
       justify-content: center;
    }
    
    .reftexte {  
      height: 100%
    }

    .reference .refimg img {
        max-width: 40vw;
    }
}