/*#pointer_div
{
	border: solid;
    max-width: 100vw;
    max-height: 80vh;
}

#ag_photo
{
	max-width: 100%;
	max-height:80vh;
}*/

td{
	vertical-align : middle;
	text-align : center;
	}
	
table{
	margin:auto;
	border-collapse:collapse;
}

td {
    border: 1px solid #333;
	
	padding:5px;
}

#image-container {
  width: 95vw;
  height: 55vh;
  overflow: hidden;
}

#ag_photo {
  max-width: 100%;
  max-height:100%;
  height: auto;
}

.circleRef {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: blue;
}

.circleMes {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: red;
}

.line {
  position: absolute;
  height: 1px;
  background-color: black;
  transform-origin: left center;
}

#loupe-container {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  /*visibility: hidden;*/
}

#loupe-container::before {
  content: "";
  width: 2px;
  height: 60%;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
}

#loupe-container::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: red;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

#loupe-container.hidden {
  display:none;
}

  body{
    background-color:#5a5a5a;
    font-family: 'Montserrat';
    width:auto;
	background-size: cover;
	display: grid;
	align-items: center;
	justify-content: center;
	/*background: url(https://wallpapers.com/images/featured/5xvepms9fbbi0bmh.jpg) no-repeat;*/
	background:url(fond.jpg) no-repeat;
	background-size: cover;
  }

  h1{
      
    font-size: 40px;
    line-height: 45px;
    font-weight: 700;
    letter-spacing: -4px;
    text-align: left;
    color: #000000;
  }
  label
{
    display: block;
	width: 100px; /* Cette largeur sert d’exemple, vous pouvez la modifier si vous voulez. */
	float: left;
	margin-top:10px;
}
input, select
{
    margin:10px;
}
@media (max-width: 640px) {
	* {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body {
		width: auto;
		margin: 10px;
		padding: 10px;
		background-attachment: fixed;
	}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images */

	img {
		height: auto;
	}
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	
	/* masquer/afficher les éléments  */

	.u-mobile {          display: block;          display: revert !important; /* affichage des éléments */        }        .u-no-mobile {          display: none !important; /* masquage des éléments */        }
	
	/* Un message personnalisé */

	body:before {
		/*content: "Version mobile du site";*/
		display: block;
		text-align: center;
		font-style: italic;
		color: 
#777;
	}
}
.logo
{
    max-height:60px;
}

.fondboite{

    background-color:red;
    padding:5px;
    background: inherit;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-top:10px;
    padding:15px;
}