* {
	  box-sizing: border-box;
	}

 
	.column {
	  float: left;
	  width: 110px;
	  height: 180px;
	  padding: 8px;
	}

	/* The Modal (background) */
	.modal {
	  display: none;
	  position: fixed;
	  z-index: 1;
	  padding-top: 25px;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  overflow: auto;
	  background-color: #222222;
	}

	/* Modal Content */
	.modal-content {
	  position: relative;
	  background-color: #222222;
	  margin: auto;
	  padding: 2;
	  width: 95%;
	  height:auto;
	  max-width: 90%;
	}

	/* The Close Button */
	.close {
	  color: white;
	  /* position: absolute; */
	  position: fixed;
	  top: 30px;
	  right: 40px;
	  font-size: 50px;
	  font-weight: bold;
	}

	.close:hover,
	.close:focus {
	  color: #999;
	  text-decoration: none;
	  cursor: pointer;
	}

	.mySlides {
	  display: none;
	}

	.cursor {
	  cursor: pointer;
	}
   
	/* Number text (1/3 etc) */
	.numbertext {
	  color: #f2f2f2;
	  font-size: 12px;
	  padding: 8px 12px;
	  position: absolute;
	  top: 0;
	}

	img {
	  margin-bottom: 0px;
	}

	.caption-container {
	  text-align: center;
	  /* background-color: #262626; */
	  padding: 2px 16px;
	  color: white;
	}

	.picture {
	  opacity: 0.8;
	}

	.active,
	.picture:hover {
	  opacity: 1;
	}

	img.hover-shadow {
	  transition: 0.3s;
	}

	.hover-shadow:hover {
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}

	.myButton {
		box-shadow: 0px 0px 0px 2px #9fb4f2;
		background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
		background-color:#7892c2;
		border-radius:10px;
		border:1px solid #4e6096;
		display:inline-block;
		cursor:pointer;
		color:#ffffff;
		font-family:Arial;
		font-size:14px;
		padding:8px 15px;
		text-decoration:none;
		text-shadow:0px 1px 0px #283966;
	}
	.myButton:hover {
		background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
		background-color:#476e9e;
	}
	.myButton:active {
		position:relative;
		top:2px;
	}
 					
	.myButtonVert {
		border: 0;
		line-height: normal;
		padding: 8px 15px;
		font-size: 1rem;
		text-align: center;
		color: #fff;
		cursor:pointer;
		text-shadow: 1px 1px 2px #000;
		border-radius: 10px;
		background-color: rgba(0,180, 0, 1);
		background-image: linear-gradient(to top left,rgba(0, 0, 0, .2),rgba(0, 0, 0, .2) 30%,rgba(0, 0, 0, 0));
		box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),inset -2px -2px 3px rgba(0, 0, 0, .6);
	}
	.myButtonVert:hover {
		background-image: linear-gradient(to top left,rgba(0, 0, 0, 0),rgba(0, 0, 0, .2) 30%,rgba(0, 0, 0, .2));
		background-color: rgba(0,210, 0, 1);
	}
	.myButtonVert:active {
		position:relative;
		top:2px;
		
	}
		
	.myButtonBlanc {
		border:  0;
		line-height: normal;
		padding:  8px  15px;
		font-size:  1rem;
		cursor:pointer;
		text-align: center;
		color: #000; /* Texte en noir pour contraste */
		font-weight: bold;
		text-shadow:  1px  1px  1px #fff; /* Ombre de texte blanche */
		border-radius:  10px;
		background-color: rgba(255,  255,  255,  1); /* Fond blanc */
		background-image: linear-gradient(to top left, rgba(240,  240,  240,  1), rgba(255,  255,  255,  1)  30%, rgba(180,  180,  180,  0.8)); /* Dégradé blanc vers gris clair */
		box-shadow: inset  2px  2px  3px rgba(0,  0,  0, .2), inset -2px -2px  3px rgba(50,  50,  50, .2), 0px 2px 4px rgba(0, 0, 0, 0.2); /* Ombres internes pour contraste */
	}
	.myButtonBlanc:hover {
		background-image: linear-gradient(to top left, rgba(180,  180,  180,  0.8), rgba(255,  255,  255,  1)  30%, rgba(240,  240,  240,  1)); /* Dégradé inversé lors du survol */
		background-color: rgba(255,  255,  255,  1);
	}
	.myButtonBlanc:active {
		position: relative;
		top:  2px;
	}

		
	#myDiv .swal2-container {
		position:relative;
		height:140px;
		width:300px;
	
	}

	.tooltip {
	  text-decoration:none;
	  position:relative;
	}
 
	.tooltip span {
	  display:none;
	  -moz-border-radius:6px;
	  -webkit-border-radius:6px;
	  border-radius:6px;
	  color:black;
	  background:white; 
	  width:200px;
	}
 
	.tooltip span img {
	  float:center;
	  margin:0px 8px 8px 0;
	}
 
	.tooltip:hover span {
	  display:block;
	  position:absolute;
	  top:0;
	  left:0;
	  z-index:1000;
	  width:350px;
	  max-width:300px;
	  min-height:128px;
	  border:1px solid black;
	  margin-top:12px;
	  margin-left:32px;
	  overflow:hidden;
	  padding:8px;
	}
	
	body{
    font-family:Arial, Helvetica, sans-serif; 
    font-size:13px;
	}
	.info, .success, .warning, .error, .validation {
		border: 1px solid;
		margin: 10px 0px;
		padding:15px 10px 15px 50px;
		background-repeat: no-repeat;
		background-position: 10px center;
		max-width: fit-content;
		width: 100%;
		background-size: 31px 31px;
		border-radius: 10px;
	}
	.info {
		color: #00529B;
		background-color: #BDE5F8;
		background-image: url('img/info.png');
		
	}
	.success {
		color: #4F8A10;
		background-color: #DFF2BF;
		background-image:url('img/success.png');
	}
	.warning {
		color: #9F6000;
		background-color: #FEEFB3;
		background-image: url('img/warning.png');
	}
	.error {
		color: #D8000C;
		background-color: #FFBABA;
		background-image: url('img/error.png');
	}