/* ---------------------------------- */
/* Variables
/* ---------------------------------- */
@import "_commonVars.scss";

/*		_____________________________________________________________________________
		| modaleGenne																|
		|		------------------------------------------------------------|		|
		|	  	| popupGene										    		|		|
		|		|		|-------------------------------------------|		|		|
		|		|		|	zonePageModales							|		|		|
		|		|		|		____________________________		|		|		|
		|		|		|		|     zoneTitreModales   1 	|		|		|		|
		|		|		|		|                          	|		|		|		|
		|		|		|		|--------------------------	|		|		|		|
		|		|		|		|     zoneMsgModale      2 	|		|		|		|
		|		|		|		|--------------------------	|		|		|		|
		|		|		|		|		|   				|		|		|		|
		|		|		|		|		|					|		|		|		|
		|		|		|		|		|	Formulaire	 3 	|		|		|		|
		|		|		|		|		|					|		|		|		|
		|		|		|		|boite  |					|		|		|		|
		|		|		|		|aide(1)|					|		|		|		|
		|		|		|		|		|                   |		|		|		|
		|		|		|		|		|                   |		|		|		|
		|		|		|		|		|	Validate 	 4	|		|		|		|
		|		|		|		|		|                   |		|		|		|
		|		|		|		|---------------------------|	    |		|		|
		|		|		| 											|		|		|
		|		|		|-------------------------------------------|		|		|
		|		|															|		|
		|		|___________________________________________________________|		|
		|																		    |
		|___________________________________________________________________________|
*/



// ------------------------------------------------------ //
// Modales generiques
// ------------------------------------------------------ //
#modaleGene{
	display: block;
	z-index: 20;
	max-width: 98%;
	max-height: 99.9%;
	top: 10px;
	left: 10px;
	margin:auto;
	height:95vh;
}

.popupGene {
	vertical-align:top;
	display: block;
	background: rgb(254,254,243);
	background: linear-gradient(0deg, rgba(254,254,243,1) 40%, rgba(246,238,149,1) 71%, rgba(252,182,30,1) 95%, rgba(221,24,10,1) 99%);
	padding: 2px;
	border: 10px solid #FAFAFA;
	position: relative;
	margin: 5px auto;
	box-shadow: 0px 0px 20px #000;
	overflow: visible;
	resize:both;
	border-radius: 10px;
	z-index:0;
	top:15px;
	width: 100%;
	max-width: 100%;
	max-height: 99%;
	height:99%;
	margin:auto;
}

#zonePageModales {
	display: grid;
	grid-template-columns: 25% 75%;
	grid-gap:4px;
	padding:4px;
	overflow:visible;
}


// ------------------------------------------------------ //
// Titres des pages
// ------------------------------------------------------ //
#zoneTitreModales {
	grid-column: 1 / span 2;
	grid-row: 1;
	padding-top:5px;
	opacity:1;
	border:1px solid lightgrey;
	border-radius: 7px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	height:50px;
	position:relative;
	width:100%;
}

/* garder les sauts de ligne pour le responsive */
.btn_close {
	position: absolute !important; /* Positionnement absolu par rapport au parent */
	top: 6px;
	right: 7px;

	z-index: 11;
	padding:8px;
	//border: 2px solid;
	border-radius: 50%; /* Forme ronde */
	display: flex; /* Utilisation du Flexbox pour centrer l'icône */
	justify-content: center; /* Centrer horizontalement */
	align-items: center; /* Centrer verticalement */
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}


// ------------------------------------------------------ //
// zone Message
// ------------------------------------------------------ //
#zoneMsgModale{
	grid-column: 1 / span 2;
	grid-row:2;
	display:block;
	border-radius: 7px;
	border:1px solid lightgrey;
	padding:4px;
	overflow:visible;
}


// ------------------------------------------------------ //
// Boite aide - colonne 1
// ------------------------------------------------------ //
#boiteAide, #previewImage {
	grid-column: 1;
	grid-row:3 / span 4;
	overflow:hidden;
	height:98%;/* compenser l'ombre en hauteur */
	border:1px solid lightgrey;
	border-radius: 7px;
	margin-right:5px;
	resize:both;
	max-width:99.8%;
}

#boiteAide:hover {opacity:1;}

#boiteAide:hover .popupAide{
	height:100%;
	opacity:1;
}

.popupAide {
	display:block;
	left:3px;
	overflow:hidden;
	bottom:0px;
	height:0px;
	color:#999493;
	font-size:14px;
	text-align:left;
	padding:2px;
	margin:2px;
	transition: all 1s;
	border-radius: 7px;
	max-width:99.8%;
}

.popupAide p{ 
	padding:3px;
	font-size:17px;
	line-height:1em;
}

.popupAide img{ 
	padding:3px;
}

// ------------------------------------------------------ //
// Formulaire
// ------------------------------------------------------ //
#zoneFormModales {
	grid-column: 2;
	grid-row: 3;
	padding:7px;
	//min-height:50%;
	width:100%;
}

// ------------------------------------------------------ //
// Validation
//  ------------------------------------------------------ //
#zoneValidateModales{
	grid-column: 2;
	grid-row: 4;
	display:block;
	border-radius: 7px;
	padding:3px;
	width: 100%; /* S'assure que la div occupe toute la largeur disponible */
  height: 100%; /* S'assure que la div occupe toute la hauteur disponible */
	overflow: hidden;
}

#zoneValidateModales iframe {
	width: 100%;  /* Occupe toute la largeur de son conteneur */
	height: 73vh; /* Occupe toute la hauteur de son conteneur */
	border: none;
	padding:0px;
	transform: scale(0.9, 0.9); /* Si tu veux réduire la taille de l'iframe à 70% */
	object-fit: contain;  /* Cela permet de redimensionner sans déformer l'iframe */
}

.catalogIframe {
	transform: scale(0.80);
	margin:auto;
	margin-top:0px;
	height:310px;
	width:100%;
}