@font-face {
	font-family: 'Playfair Display SC Bold';
	src: url('PlayfairDisplaySC-Bold.ttf')format('truetype');
}

@font-face {
	font-family: 'Times New Roman';
	src: url('Times_New_Roman.ttf')format('truetype');
}

@font-face {
	font-family: 'Open Sans Regular';
	src: url('OpenSans-Regular.ttf')format('truetype');
}

html, body {
	margin: 0;
	padding: 0;
	font-family: 'Open Sans Regular', verdana, sans-serif;
	background: url(fond4.jpg);
	background-attachment: fixed;
	font-size: 100%;
}

#page {
	text-align:justify;
	line-height:1.5em;
	margin-left: 15%; 
	margin-right: 15%; 
	margin-top: 80px;
   	font-size: 1.1em;
	}

#retour {
    	position: fixed;
    	right: 0px;
    	top: 50%;
    	width: auto;
	line-height: 1em;
    	background-color: #b6b6b6;
    	text-align: right;
    	padding: 0.3em;
	padding-left: 0.5em;
    	border-radius: 3em 0.5em 0.5em 3em;
}

h2 {
	font-family: 'Playfair Display SC bold', 'Times New Roman', serif;
	font-size: 1.5em;
	font-weight: normal;
	margin: 0;
}

h3 {
	font-family: 'Playfair Display SC bold', 'Times New Roman', serif;
	font-size: 1.15em;
	font-weight: normal;
	margin: 0;
}

a:link {
	color: red;
}

li {
	margin-left: 3%;
}

.gallery-container {
    display: flex; /* Utiliser Flexbox pour les ensembles */
    flex-direction: column; /* Disposer les ensembles en colonne */
    align-items: flex-start; /* Aligne les éléments à gauche */
}

.image-container { display:flex; align-items:center; width:100%; position:relative; pointer-events:none; overflow:visible; }

.thumb { position: relative; pointer-events: auto; } /* wrapper non-replaced */
.thumb img { width:150px; display:block; transition: opacity .25s ease; }

.thumb img:hover { opacity: 0; } /* cache la miniature durant l'affichage central */

/* ::after sur le figure (wrapper) — c'est ici que l'on crée l'image fixe centrée */
.thumb::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(.1);
  opacity: 0;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 12px 12px 30px rgba(0,0,0,.45);
}

/* on injecte l'image via content:url() — chaque figure a sa classe pour fournir la bonne URL */
.thumb-amin::after {
  content: url("Amin_STROUGO.jpg");
}
.thumb-strat::after {
  content: url("stratigraphie.jpg");
}

/* au hover sur l'image (ou sur le figure), on affiche l'overlay centré */
.thumb:hover::after,
.thumb:focus-within::after {
  opacity: 1;
  transform: translate(-50%,-50%) scale(3); /* ajuster le scale selon besoin */
}
.image3 {
    width: 150px; /* Taille de l'image */
    transition: transform 1s ease, margin-left 1s ease; /* Animation */
    box-shadow: 8px 8px 10px #807a7a;
    pointer-events: auto; /* Assurez-vous que l'image capte les événements */
}

.image-container:hover .image3 {
    transform: scale(6); /* Agrandissement au survol */
    margin-left: 30vw; /* Décalage vers la droite au survol */
    box-shadow: 8px 8px 10px #807a7a;
    position: relative;
    z-index: 10;
}

.text {
    margin-left: 20px; /* Espace entre l'image et le texte */
    font-size: 1em; /* Ajustez la taille du texte selon vos besoins */
    pointer-events: none; /* Le texte ne capte pas les événements de la souris */
}

figcaption {
	font-family: 'Times New Roman', serif; 
	font-size: 1em; 
	font-style: italic;
	text-align: center;
}
.note {
	color: red;
	font-size: 0.7em;
}

.info a:link {
	color: black;
	text-decoration: none;
}

.info a:hover {
	color: #218700;
}

/*infobulle*/

.info {
    color: #000;
    cursor: pointer;
    text-align: left;
}

.info:hover {z-index:2;}

.info span {display: none}

.info:hover span
{
    position: absolute;
    display:block;
    z-index: 2000;
    width: 30%;
    margin-left: 10%;
    padding: 0.5em;
    border-radius: 8px;
    border-left:6px solid red;
    background-color: #e3e3e3;
    cursor: default;
}
/*
* 
*
*
*
*/
@media screen and (max-width: 980px) {

   #page {
	text-align:justify;
	line-height:1.2em;
	margin-left: 3%; 
	margin-right: 3%; 
	margin-top: 3em;
   	font-size: 0.9em;
   }
   h2 {
	font-family: 'Playfair Display SC bold', 'Times New Roman', serif;
	font-size: 1.5em;
	font-weight: normal;
	margin: 0;
   }

   h3 {
	font-family: 'Playfair Display SC bold', 'Times New Roman', serif;
	font-size: 1.05em;
	font-weight: normal;
	margin: 0;
   }

   .info {
	font-size: 1.5em;
	line-height: 1.5em;
   }

   .info:hover span
   {
	position: absolute;
	display:block;
	width: 60%;
	z-index: 2000;
   }
   .image {
    width: 100px;
   }
   .image-container:hover .image {
    transform: scale(4.3); /* Agrandissement au survol */
    margin-left: 100%;
   }
   .image1 {
    width: 100px;
   }
   .image-container:hover .image1 {
    transform: scale(4.3); /* Agrandissement au survol */
    margin-left: 100%;
   }
   .image2 {
    width: 100px;
   }
   .image-container:hover .image2 {
    transform: scale(4.3); /* Agrandissement au survol */
    margin-left: 100%;
   }
   .image3 {
    width: 100px;
   }
   .image-container:hover .image3 {
    transform: scale(4.3); /* Agrandissement au survol */
    margin-left: 100%;
   }
}