/* #SYTLE_ID / .STYLE_CLASS*/
/* ============================== GENERAL ==============================*/
/* ascenseurs */
::-webkit-scrollbar {
  width: 0px;height:0px;
}

:root{
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  
	--bgcolor_site:#FCFCFF;
	--color_site:#000000;
	--bgcolor_top:#000060;	/*#C0F0FF;*/
	
	--color_top:#FFFFFF;
	--bgcolor_bottom:#0000c0;
	--color_bottom:#FFFFFF;
	
	--bgcolor_ligtit:#C0F0FF;
	--color_ligtit:#000000;


	
	--color_to: #FFFFc0;	/*#FFFFc0 - FFc0c0;*/
	--color_po: #60C0FF;
	--color_ok: #c0FFc0;
	--color_ko: #FFc0c0;
	--color_na: #c0c0c0;
	
	/*status*/
	--color_status_ok: 		#60FF60;	/*vert vif*/
	--color_status_warn: 	#FFF060;	/*orange*/
	--color_status_ko: 		#FF6060;	/*rouge*/
	--color_status_na: 		#c0c0c0;	/*gris*/
	/*boutons*/
	--color_btn_ok: 		#60C0FF;	/*bleu*/
	--color_btn_warn: 		#FFFFC0;	/*jaune*/
	--color_btn_ko: 		#c0c0c0;	/*gris*/
	/*select et input:*/
	--color_sel_ok: 		#C0FFC0;	/*vert pâle*/
	--color_sel_po: 		#60C0FF;	/*bleu*/
	--color_sel_warn: 		#FFFFC0;	/*jaune*/
	--color_sel_ko: 		#FFc0c0;	/*rouge pâle*/
	--color_sel_na: 		#c0c0c0;	/*gris*/
	
	--POPUP_CADRE_width:800px;
	--taille_BTN_L:150px;
	--taille_BTN_M:100px;
	--taille_BTN_S:75px;
	--taille_BTN_STATUS:80px;
	--taille_BTN_NEXT:40px;

}
*{
	/*margin:0px;
	padding:0px;*/
	box-sizing: border-box;
	vertical-align:middle;
}
sup{vertical-align: super;}

@font-face {
  font-family: 'AR DARLING';	/*traits autour - titre Captain BOLEOR*/
  src: url('font_ar_darling.ttf');
  font-display: swap;
}
@font-face {  
  font-family: 'STENCIL_NEW'; /*très verticale*/
  src: url('font_stencil_style_new.ttf');
  font-display: swap;
}
@font-face {
  font-family: 'WOODCUTTER';	/*fun*/
  src: url('font_woodcutter-army-stencil.ttf');
  font-display: swap;
}

@font-face {
  font-family: 'STENCIL';	/*découpes pochoirs - titres H1/H2*/
  src: url('font_Stencil_Regular.ttf');
  font-display: swap;
}

body{
	margin:0px;
	/*text-align:center;*/
	font-size:40px;
    font-family: "Din", "Helvetica-Neue", "Helvetica", Arial, sans-serif;
}

h1 {		/* titre principal page*/
    font-size: 200px;
	margin-top:0px;
	margin-bottom:0px;
}


h2 {
    font-size: 160px;
	margin-top:0px;
	margin-bottom:0px;
}

h3 {		/* Premier niveau de titre dans les pages (exemple: "Daily news") */
	font-size: 120px;
	margin-top:0px;
	margin-bottom:0px;
}	
h4 {		/* Second niveau de titre dans les pages (exemple: "Ocean state (last day)" */
	font-size: 80px ;
	margin-top:0px;
	margin-bottom:0px;
}
h5 {		/* non-utilisé */
	font-size: 60px; 
	margin-top:0px;
	margin-bottom:0px;
	text-transform:uppercase;
	font-weight:normal;
	
}

/* ============================== PAGE - GLOBAL ==============================*/


#SITE_CONTENEUR
{
	display:block;
	position:relative;
	width:980px; 
	min-height:480px;
	background:var(--bgcolor_site);
	color:var(--color_site);
	margin:auto;
	width:1000px; /*calc(1000px - 20px);	/*retirer padding&border*/
}
#SITE_TOP_ET_LIGNE_TITRE{
	display:block;
	width:100%;
	background:var(--bgcolor_top);
	color: #FFFFFF !important;
	filter:drop-shadow(0px 4px 2px #00006080);
	/*padding:5px;*/
	border-bottom:1px solid #000000;
}
#SITE_TOP
{
	display:block;
	position:relative;
	width:100%;
	height:110px;
	z-index:100;
	overflow-x:hidden;
	overflow-y:hidden;
	/*margin-bottom:10px;*/
}
#SITE_TOP>.CONTENT
{
	position:absolute;
	Top:5px;
	white-space: nowrap;/*évite retours ligne*/
}
#SITE_TOP>.CONTENT.LEFT 	/*aligné à gauche, centré verticalement - absolute donc n'influe pas sur dimension de son conteneur*/
{
	text-align:left;
	left:10px;
}

#SITE_TOP>.CONTENT.LEFT .BTN
{
	margin-left:10px;
	margin-right:10px;
}
#SITE_TOP>.CONTENT.RIGHT 	/*aligné à droite, centré verticalement - absolute donc n'influe pas sur dimension de son conteneur*/
{
	text-align:right;
	right:10px;
}
#btn_usr{
	color:white;font-weight:bold;font-size:15px;line-height:140px;
}
#SITE_PAGETITLE
{
	display:block;
	width:100%;
	
	height:110px;
	color: #FFFFFF !important;
    font-size: 60px;
	padding-top:10px;
	padding-bottom:10px;
}
#SITE_CONTENT
{
	min-height:900px;
	/*padding:0px;*/
	/*border:1px solid red;*/
	width:calc(100% - 0px);	/*retirer padding&border*/
	overflow-x:hidden;
	overflow-y:auto;
	/*height:900px;*/
	text-align:center;
	/*padding-top:10px;*/
	padding-bottom:50px;
}

#div_pic_zoom{
	width:100%;height:100%;position:fixed;top:0px;left:0px;background:rgba(200,200,200,0.8);z-index:500;cursor:zoom-out;
	display:none;
}

#pic_zoomed_container{
	border:none;	/*border:1px solid black;*/
	scroll-snap-type: x mandatory;	/*mandatory proximity*/
	overflow-x:auto;
	overflow-y:auto;
	white-space: nowrap;
	margin:auto;
	padding-right:0px;
	border:none;
	width:100%;
	height:100%;
	position:absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align:center;
}
#img_close_zoom_pic{
	position:absolute;
	z-index:200;
	
	top:2%;right:30px;
	height:6%;width:auto;
}
#pic_zoomed{
	display:inline-block;
	max-width:150%;max-height:95%;
	position:absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
#pic_zoomed2{
	display:inline-block;
	max-width:110%;max-height:90%;
	position:absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);	
}
#HOMEPAGE
{
	margin-top:10px;
	text-align:left;padding-left:100px;
}
#HOMEPAGE .BTN{
	margin-bottom:5px;
	--height:150px;
}
#PAGE_USER_CHOICE .BTN{
	margin-top:5px;margin-bottom:5px;
	--height:150px;--width:600px;
}

#PAGE_USER_CHOICE .USR_PWD{
	width:600px;
}
.LIGNE{
	display:block;
	width:100%;
	margin-top:20px;
	margin-bottom:20px;
	text-align:center;
}

.LIGNE.TITRE
{
	margin-top:0px;
	text-align:center;
	font-weight:bold;
	padding-top:10px;
	padding-bottom:10px;
	font-size:60px;
	background:var(--bgcolor_ligtit);
	color:var(--color_ligtit);
	/*border-top:1px solid black;*/
	border-bottom:1px solid black;
	z-index:35;
	margin-bottom:0px;
}


.LIGNE.TITRE .BTN
{
	--height:70px;
}

#BLOC_POPUPTIK .BTN{
	--height:50px;
}
#BLOC_POPUPTIK_1{
	display:inline-block;vertical-align:top;text-align:left;padding-left:20px;font-size:35px;
}

.LIGNE.BTOP{border-top:solid 1px black;}

.CADRE_ROND{	/*  */
	border-radius:5px;border:solid;border-width:1px;border-color:rgb(0,0,0);
	background:#D0D0D0;
	font-size: 30px; 
}


.GAUCHE_H200{		/*photo activité */
	width:30%;margin:0px;padding:0px;height:200px;
	display:inline-block;
	border:0px;
	vertical-align:middle;
	text-align:center;
	overflow:hidden;
}

.DROITE{		/* description activité */
	width:68%;margin:0px;padding:1%;
	display:inline-block;
	border:0px;
	font-size: 30px; 
	vertical-align:top;
	text-align:left;
}


/* ============================== BOUTONS BTN ==============================*/
.BTN{
	--height_def:100px;
	--width_def:100px;
	--height_calc:var(--height, var(--width, var(--height_def)));

	--width_calc:var(--width, auto);
	--border_radius_def:0.1;
	--border_radius_calc:calc(var(--border-radius, var(--border_radius_def)) * var(--hw_min));
	
	--min_width:var(--width, var(--height_calc));
	min-width:var(--min_width);
	--hw_min:min(var(--height_calc), var(--min_width));
	
	Position: relative;
	display: inline-block;
	border:1px solid #00000050;
	border-top:1px solid #000000C0;
	border-right:1px solid #000000C0;
	border-bottom:1px solid #000000FF;
	border-left:1px solid #000000FF;
	vertical-align:middle;
	width:var(--width_calc);
	height:var(--height_calc);
	border-radius:var(--border_radius_calc);
	
	text-align:center;
	font-weight:bold;
	white-space: nowrap;/*évite retours ligne*/
	margin:0px;/*margin-bottom:5px;margin-top:5px;*/
	font-size:calc(var(--height_calc) / (1 + var(--nb_lignes,1)));
	line-height:calc(var(--height_calc) / (0.1 + var(--nb_lignes,1)));
	color:#000000;
	
	
	/*var(--img_src);*/
	background-image: var(--img);
	background-position: center;
	background-repeat: no-repeat;
	--img_ratio_def:0.8;
	--img_ratio_calc:var(--img_ratio, var(--img_ratio_def));
	--image_size:calc(var(--hw_min) * var(--img_ratio_calc));
	background-size:  var(--image_size) auto; /*largeur hauteur - pb images verticales*/
	--3d:max(calc(calc(var(--hw_min) - var(--image_size))/2 /4), var(--hw_min)/50);/*mouvement quand clic =1/4 de l'espace libre à coté image, min = hw/50*/
	
	--padding_left_right:max(var(--3d), calc(var(--height_calc) /5));
	padding-left:var(--padding_left_right);
	padding-right:var(--padding_left_right);
	padding-top:var(--3d)	;
	padding-bottom:var(--3d);
	
	
	vertical-align:middle;
	
}
.BTN.ROND{
	--border_radius_def:0.5;
	--img_ratio_def:0.7;
}
.BTN:has(span.out){
	--width_calc:var(--min_width);
}

.BTN:has(span)
{
	text-align:left;
}
.BTN.inactif:before{
	content:"";
	position:absolute;top:0px;left:0px;width:100%;height:100%;background:#00000050;
	border-radius:var(--border_radius_calc);
}
.BTN:not(.inactif):not(.flat)
{
	box-shadow: inset -6px 6px 10px 0px #ffffff90
	, inset 4px -4px 10px 0px #00000090
	,  -3px 3px 3px 0px #00000060 ;
	cursor:pointer;
}
.BTN:not(.inactif):not(.flat):hover{
	box-shadow: inset -6px 6px 10px 0px #ffffff90
	, inset 4px -4px 10px 0px #00000090
	,  -3px 3px 3px 0px #00000060 
	,0px 0px 10px 0px #FFFF00,0px 0px 10px 0px #FFFF00;
	
}

.BTN:has(span:not(.out))
{
	background-position-x:  calc(var(--padding_left_right) / 2);
	background-position-y:  center;
}
.BTN:not(.inactif):not(.flat):active, .BTN:not(.inactif):not(.flat).choisi{
box-shadow: inset -2px 2px 10px 0px #303030FF,0px 0px 10px 0px #FFFF00;
  
  
	padding-left:calc(var(--padding_left_right) - var(--3d));
	padding-right:calc(var(--padding_left_right) + var(--3d));
	padding-top:calc(2* var(--3d));
	padding-bottom:0px;
	
	background-position-x:  calc(50% - var(--3d));
	background-position-y:  calc(50% + var(--3d));	/*pb avec images non carrées*/
	
	
}
.BTN:has(span:not(.out)):not(.inactif):not(.flat):active, .BTN:has(span:not(.out)):not(.inactif):not(.flat).choisi
{
	background-position-x:  calc(var(--padding_left_right) / 2 - var(--3d));
	background-position-y:  calc(50% + var(--3d));
}

.BTN>*{	/*tous enfants de BTN*/
	/*padding:1px;*/
}


.BTN[data-info]:not([data-info=""])::after{
	content:attr(data-info);
	position:absolute;
	--taille_bulle:calc(var(--hw_min) /4);
	font-weight:bold;
	white-space: nowrap;/*évite retours ligne*/
	overflow:hidden;
	
	color:#000000;
	
	text-align:center;
	
	font-family: Consolas, monaco, monospace;
	font-size:var(--taille_bulle);
	line-height:var(--taille_bulle);
	height:var(--taille_bulle);
	width:var(--taille_bulle);
	border-radius:calc(var(--taille_bulle) * 0.5);
	border:1px solid red;
	background:#FFFF00;
	top: calc(var(--hw_min) / -20);
	left:calc(var(--hw_min) / -20);	

	box-shadow: inset -3px 3px 5px 0px #ffffff90
	, inset 2px -2px 5px 0px #00000090
	,  -2px 2px 2px 0px #00000060 ;
}
.BTN p,.BTN span{		/*================> RETIRER p*/
	position:relative;
	/*Border:1px solid red;*/
	font-weight:bold;
	white-space: nowrap;/*évite retours ligne*/
	margin:0px;
	/*overflow:hidden;*/
	font-size:calc(var(--height_calc) / (1 + var(--nb_lignes,1)));
	/*line-height:calc(var(--height_calc) / (1 + var(--nb_lignes,1)));*/
	line-height:var(--height_calc);
	color:#000000;
	    top:50%;
		transform: translate(0%,-50%)
}
.BTN p{	/*texte à côté*/
	/*Border:1px solid red;*/
	
	text-align:center;
	left:50%;Top:50%;
	transform: translate(-50%,-50%);
	width:calc(100% - 10px);
	color:#000000;
}
.BTN span{	/*texte à droite image*/
	/*Border:1px solid red;*/
	text-align:left;
	
	/*margin-left:calc(var(--hw_min)*9/10 - calc(var(--height_calc) /5));*/
	margin-left:calc(var(--image_size) - var(--padding_left_right) / 2 );
	display:inline-block;
}
.BTN span.out{	/*texte à droite image*/
	/*Border:1px solid red;*/
	text-align:left;
	
	/*margin-left:calc(var(--hw_min)*9/10 - calc(var(--height_calc) /5));*/
	margin-left:calc(var(--min_width) );
	display:inline-block;
}
.BTN:not(:has(img)) span{
	
	/*margin-left:0px;*/
}


.BTN.JAUNE		{background-color: #FFFFC0 ;color:#000000;}	.BTN.JAUNE>*	{color:#000000;}
.BTN.BLEU		{background-color: #60C0FF ;color:#000000;}	.BTN.BLEU>*		{color:#000000;}
.BTN.BLEU_PO	{background-color: #60C0FF ;color:#000000;}	.BTN.BLEU_PO>*	{color:#000000;}	/*#c0F0FF*/
.BTN.VERT		{background-color: #C0FFC0 ;color:#000000;}	.BTN.VERT>*		{color:#000000;}
.BTN.VERT_VIF	{background-color: #00FF00 ;color:#000000;}	.BTN.VERT_VIF>*	{color:#000000;}
.BTN.ROUGE		{background-color: #FFc0c0 ;color:#000000;}	.BTN.ROUGE>*	{color:#000000;}
.BTN.GRIS		{background-color: #c0c0c0 ;color:#000000;}	.BTN.GRIS>*		{color:#000000;}


.BTN 								{background-color:var(--color_btn_ok)}	/*couleur par défaut du bouton si pas défini*/
.BTN[data-btn_status='warn']  		{background-color:var(--color_btn_warn)}
.BTN[data-btn_status='ko']  		{background-color:var(--color_btn_ko)}


.BTN.STATUS 							{background-color:var(--color_status_ok)}
.BTN.STATUS[data-btn_status='warn']  	{background-color:var(--color_status_warn)}
.BTN.STATUS[data-btn_status='na']  		{background-color:var(--color_status_na)}
.BTN.STATUS[data-btn_status='ko']  		{background-color:var(--color_status_ko)}


/* ============================== BLOC AVEC CONTENU AFFICHÉ/MASQUÉ ==============================*/

.BLOC{
	display:block;position:relative;
	border:1px solid black;
	border-bottom:1px solid #000000;
	border-top:1px solid #000000;
}
.BLOC .TITRE{
	--height_titre:50px;
	min-height:var(--height_titre);
	display:block;position:relative;
	text-align:left;
	padding:5px;
	padding-left:20px;
	padding-right:20px;
	background: var(--bgcolor_ligtit);
	font-size:40px;
}

.BLOC .TITRE .BTN{
	--height:50px;
}

.BLOC .CONTENT{
	display:block;
	padding:5px;
	border-top:1px solid black;
}

.BLOC.content_hidden{
	border-bottom:5px solid #00000030;
}
.BLOC.content_hidden .CONTENT{
	display:none;
	}
	
.BLOC .BTN.openclose{
	position:absolute;
	--img:var(--img_hide, url('img/btn_in/arrow_up.png'));
	top:50%;transform: translate(0%,-50%);
	right:calc(0.1 * var(--height_titre));
	
	--height:calc(0.8 * var(--height_titre));
}
.BLOC.content_hidden .BTN.openclose{
	--img:var(--img_open, url('img/btn_in/arrow_bottom.png'));
}




/* ============================== POPUP & WAIT ==============================*/

#IMG_WAIT_GOTOURL{		/* quand clique sur lien ou onclick>go_to_url */
	position:absolute;
	top:50%;left:50%;
	transform: translate(-50%,-50%);
	display:none
}

.POPUP_OUT{		/* popup - fond */
	position:fixed;padding:0px;
	top:0px;left:0px;width:100%;height:100%;
	background:rgba(100, 100, 100, 0.9);
	border:solid;border-width:1px;border-color:rgb(0,0,0);
	z-index:999;
	display:none;

}
#POPUP_IMGCLOSE{		/* popup image pour fermer (croix en haut à droite) */
	position:absolute;
	top:30px;right:30px;
	width:100px;
}

#POPUP_CADRE{		/* popup - fenêtre de contenu */
	position:absolute;
	left:50%;top:50%;
	transform: translate(-50%,-50%);
	padding:100px;
	/*
	top:200px;left:5%;
	width:90%;
	padding-top:50px;padding-bottom:50px;*/
	margin:auto;
	background:#FFFFFF;
	border-radius:10px;border:solid;border-width:1px;border-color:rgb(0,0,0);
	text-align:center;
}
#POPUP_CONTENT{		/* popup - fenêtre de contenu */
	width:90%;
	margin-left:5%;
}



/* ============================== GMM_CHOICE ==============================*/

.HOME_GMM_CONTENEUR{
	position:relative;
	display:inline-block;
}
.HOME_GMM_CONTENEUR img{
	width:480px; height:auto;aspect-ratio:1.65;
	object-fit:cover;
	border-radius: 40px 10px 40px 10px;
	border:2px solid #000000;
	margin:4px;
}
.HOME_GMM_CONTENEUR:hover img{
	box-shadow: 0 0 10px #000060;
}

.GMM_ACT_CONTENEUR{
	position:relative;
	display:inline-block;
}
.GMM_ACT_CONTENEUR img{
	left:calc(50% + 5px);
	width:320px;
	height:auto;
	aspect-ratio:1.2;
	/*height:345px;*/
	object-fit:cover;
	border-radius: 40px 10px 40px 10px;
	border:2px solid #000000;
	margin:4px;
}
.GMM_ACT_CONTENEUR:hover img{
	box-shadow: 0 0 10px #000060;
}
.HOME_GMM_TITLE{
	position:absolute;
	top:10px;
	left:calc(50% + 5px);
	transform: translate(-50%,0%);
	width:100%;
	text-decoration:none;
	text-shadow:#FFFFFF 0px 0 5px, #FFFFFF 0px 0 20px, #FFFFFF 0px 0 25px, #FFFFFF 0px 0 30px, #FFFFFF 0px 0 35px, #FFFFFF 0px 0 40px;
	opacity:0.9;
	color:#0000B0;
	font-family: AR DARLING;
	font-family: STENCIL,ARIAL BLACK;
    
	width:90%;
	font-size:30px;
}
.HOME_GMM_PRICING{
	position:absolute;bottom:10px;
	font-weight:bold;
	color:#A00000;
	text-shadow:#FFFFFF 0px 0 2px, #FFFFFF 0px 0 5px, #FFFFFF 0px 0 7px, #FFFFFF 0px 0 9px, #FFFFFF 0px 0 12px;

	left:50%;
	transform: translate(-50%,0%);
	font-size:30px;
	white-space: nowrap;
}


.GMM_ACT_LOCATION, .GMM_ACT_INCLUDED, .GMM_ACT_PRICING{
	position:absolute;bottom:8px;
	font-size:20px;font-weight:bold;
	color:#A00000;
	text-shadow:#FFFFFF 0px 0 2px, #FFFFFF 0px 0 5px, #FFFFFF 0px 0 7px, #FFFFFF 0px 0 9px, #FFFFFF 0px 0 12px;
	text-align:left;
	line-height:1.3em;
}
.GMM_ACT_LOCATION{
	left:10px;
}
.GMM_ACT_PRICING{
	right:15px;
	text-align:right;
}

.GMM_ACT_PRICING::after{
	content:"\00a0\00a0";
}
.GMM_ACT_INCLUDED{
	font-size:30px;
	color:#00F000;
	text-shadow:#000000 0px 0 2px, #300030 0px 0 5px, #300030 0px 0 7px, #300030 0px 0 9px, #300030 0px 0 12px;
	/*
	left:50%;
	transform: translate(-50%,0%);
	bottom:8px;
	*/
	right:0px;
	bottom:100%;
}


/* ============================== FORMS ==============================*/


input[type="radio"].CNF, input[type="checkbox"].CNF {
  display: none;
}
input[type="radio"].CNF + label, input[type="checkbox"].CNF + label {
  padding:0px;
  padding-left:20px;padding-right:20px;
  margin-bottom:5px;margin-top:5px;margin-left:5px;margin-right:5px;
  border-radius:5px;border:solid;border-width:1px;border-color:rgb(0,0,0);
  background:#909090;
  display:inline-block;
  vertical-align:middle;
  
}

input[type="radio"].CNF:checked +label, input[type="checkbox"].CNF:checked + label {
  background:#90FF90;
}


.cnf_multi, .cnf_multi_sel{
  padding:0px;
  padding-left:20px;padding-right:20px;
  margin-bottom:5px;margin-top:5px;margin-left:5px;margin-right:5px;
  border-radius:5px;border:solid;border-width:1px;border-color:rgb(0,0,0);
  background:#909090;
  display:inline-block;
  vertical-align:middle;
  
  font-size:30px;
  line-height:1.5;
  height:75px;
}

.cnf_multi_sel{
  background:#90FF90;
}

input, select, textarea {	/* commun à tous les champs input (text, password, ...) + slect (menu déroulant) et textarea */
  background:#FFFFFF;
  border:solid;border-width:1px;border-color:rgb(0,0,0);
  font-size:35px;
  /*font-family:'Courier New', monospace;*/
  height:75px;
  margin:5px;
}
input:invalid, select.nowcom:invalid, textarea:invalid {	/* fond jaune, texte en gras */
  background:#FFA0A0;
}
input:focus, select.nowcom:focus, textarea:focus {	/* fond jaune, texte en gras */
  background:#FFFFA0;
  font-weight:bold;
}

input[type="number"]:disabled {
  background:#C0C0C0;
}
input:disabled {
  background:#C0C0C0;
}
input[type="password"].USR_PWD {
  width:80%;
  
}
input[type="tel"].CNF_TEL {
  /*width:400px;*/
}
input[type="number"].CNF_VAL {
  width:150px;
  text-align:right;
}
input[type="date"].CNF_DAT {
  width:300px;
}
input[type="time"].CNF_TIM {
  width:200px;
}


input[type="number"].PAY_VAL_OLD {
  width:130px;
  text-align:right;
  font-size:50px;
  height:70px;
  margin-bottom:10px;
}
input[type="number"].PAY_VAL {
  width:220px;/*width:120px;*/
  height:80px;
  text-align:right;
  font-size:50px;
  margin-right:30px;
}
input[type="number"].SEARCH_TIK {
  width:400px;
  height:80px;
  text-align:right;
  font-size:70px;
  margin-right:20px;
}
input[type="text"].LOG_TXT {
  width:90%;
  /*height:50px;*/
  font-size:30px;
  margin:5px;
}

select.nowcom {	/*menu déroulant, pour les % pay/com */
	width: 120px;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;	/* pas de flêche */
	text-align:right;
}

textarea {
  font-size:30px;
  width:700px; height:auto;
}



/* ============================== CALENDAR ==============================*/





/* ============================== CONF TIK ==============================*/






.BLOC .selected_value 	{display:inline-block;font-weight:bold;}
/*.BLOC .bloc_status 		{background-color:var(--color_to);}*/
.BLOC[data-bloc_status='ok']	.bloc_status  		{background-color:var(--color_status_ok)}
.BLOC[data-bloc_status='to']	.bloc_status  		{background-color:var(--color_status_warn)}
.BLOC[data-bloc_status='ko']	.bloc_status  		{background-color:var(--color_status_ko)}
.BLOC[data-bloc_status='na']	.bloc_status  		{background-color:var(--color_status_na)}



/*body:not(:has(.SELECT_SRC.choisi)) #BLOC_DAT  {display:none;}*/
#INPUT_DATE 		{background-color:var(--color_sel_warn)}
#INPUT_DATE.possible.choisi	{background-color:var(--color_sel_ok)}
.BTN.BTN_DAT 	{background-color:var(--color_btn_warn)}
.BTN.BTN_DAT.possible 	{background-color:var(--color_btn_ok)}

#INPUT_DATE.blr_pas_possible.choisi 		{background-color:var(--color_sel_ko)}
#INPUT_DATE.blr_un_peu_possible.choisi 		{background-color:var(--color_sel_warn)}
#INPUT_DATE.blr_possible.choisi 		{background-color:var(--color_sel_ok)}
.BTN_DAT.blr.blr_pas_possible 		{background-color:var(--color_btn_ko)}
.BTN_DAT.blr.blr_un_peu_possible 		{background-color:var(--color_btn_warn)}
.BTN_DAT.blr.blr_possible 		{background-color:var(--color_btn_ok)}


#BLOC_DUR 		{}
#BLOC_DUR:not(:has(.BTN.BTN_DUR.possible)){display:none;}	/*aucun bouton possible*/
#BLOC_DUR:not(:has(.BTN.BTN_DUR.possible:not(.choisi))):has(.BTN.BTN_DUR.possible.choisi){display:none;} /*un seul bouton possible, déja choisi*/

.BTN.BTN_DUR 		{background-color:var(--color_btn_ok	);}	
.BTN.BTN_DUR:not(.possible)	{display:none;}
/*.BTN.BTN_DUR.possible	{background-color:var(--color_btn_ok)}*/
/*#BLOC_DUR:has(.BTN.BTN_DUR.possible.choisi) .BTN.BTN_DUR.possible:not(.choisi):not(.blr) {background-color:var(--color_btn_ok)}*/


.BTN.BTN_DUR.blr.blr_pas_possible 		{background-color:var(--color_btn_ko);}
.BTN.BTN_DUR.blr.blr_un_peu_possible 	{background-color:var(--color_btn_warn);}
.BTN.BTN_DUR.blr.blr_possible 			{background-color:var(--color_btn_ok);}




#BLOC_TIME 		{}
body:has(.BTN.BTN_DUR.possible):not(:has(.BTN.BTN_DUR.possible.choisi)) #BLOC_TIME  {display:none;}	/*s'il faut choisir DUR*/
body:has(#INPUT_DATE):not(:has(#INPUT_DATE.choisi)) #BLOC_TIME  {display:none;}	/*s'il faut choisir DATE*/

#INPUT_TIME 	{background-color:var(--color_sel_warn)}
body:has(.BTN.BTN_TIME.possible.choisi) #INPUT_TIME:not(.blr)  {background-color:var(--color_sel_ok)}

.BTN.BTN_TIME 			{background-color:var(--color_btn_ok);}
.BTN.BTN_TIME:not(.possible)	{display:none;}
/*
#BLOC_TIME:has(.BTN.BTN_TIME.possible.choisi) .BTN.BTN_TIME.possible:not(.choisi):not(.blr.boarding_ko):not(.blr.boarding_moy):not(.blr.boarding_ok) {background-color:var(--color_po)}
*/

.BTN.BTN_TIME.possible.blr.boarding_moy {background-color:var(--color_btn_warn);}
.BTN.BTN_TIME.possible.blr.boarding_ok 	{background-color:var(--color_btn_ok);}


#INPUT_TIME.boarding_ko 	{background-color:var(--color_sel_warn) ;}
#INPUT_TIME.boarding_moy 	{background-color:var(--color_sel_warn) ;}
#INPUT_TIME.boarding_ok 	{background-color:var(--color_sel_ok) ;}


.SELECT_SRC:not(.choisi) 		{background-color:var(--color_sel_warn)}
.SELECT_SRC.choisi	{background-color:var(--color_sel_ok)}	/* + TO,OK,KO */
#BLOC_SRC:has(.SELECT_SRC.choisi) .SELECT_SRC:not(.choisi) {background-color:var(--color_sel_po)}

.BTN.BTN_SRC 	{background-color:var(--color_btn_warn)}
.BTN.BTN_SRC.choisi	{background-color:var(--color_btn_ok)}
#BLOC_SRC:has(.SELECT_SRC.choisi) .BTN.BTN_SRC:not(.choisi) {background-color:var(--color_btn_ok)}



/*body:has(.BTN.BTN_TIME.possible):not(:has(.BTN.BTN_TIME.possible.choisi)):not(:has(.BTN.BTN_TIME.blr.choisi)) #BLOC_OPT  {display:none;}*/
#BLOC_OPT:not(:has(.OPT.possible))	{display:none;}

#BLOC_OPT .OPT_TITRE	{display:block;padding:5px;height:60px;font-weight:bold}
#BLOC_OPT .OPT 			{display:block;padding:5px;height:60px;}
/*
#BLOC_OPT .OPT.possible				{background-color:var(--color_sel_po)}
#BLOC_OPT .OPT.possible.choisi 		{background-color:var(--color_sel_ok)}
*/
#BLOC_OPT .OPT:not(.possible) 	{display:none;}

/*
#BLOC_OPT .OPT_TITRE .bloc_printed 	{display:inline-block;width:200px;vertical-align:middle;}
#BLOC_OPT .OPT .bloc_printed 		{display:inline-block;width:200px;vertical-align:middle;}
*/
#BLOC_OPT .bloc_printed 		{display:inline-block;vertical-align:middle;height:100%;}
#BLOC_OPT .bloc_printed:nth-of-type(1) 		{width:600px;text-align:left;}
#BLOC_OPT .bloc_printed:nth-of-type(2) 		{width:300px;text-align:right;}



#BLOC_OPT .bloc_printed select{margin:0px;width:100%;height:100%;text-align:left;}
#BLOC_OPT .bloc_printed input{margin:0px;width:100%;height:100%;font-size:50%;text-align:left;}

#BLOC_OPT:has(.OPT.opt_base.possible):not(:has(.OPT.opt_base.possible.choisi)) .OPT.opt_base select  {background-color:var(--color_sel_warn) !important;}



/*#BLOC_OPT:has(.OPT.opt_base.possible):not(:has(.OPT.opt_base.possible.choisi)) .OPT.opt_base.possible {background-color:var(--color_sel_warn);}*/







.BTN.BTN_MOINS_PLUS {background-color:var(--color_btn_ok)}
				.BTN_MOINS_PLUS.inactif	{background-color:var(--color_btn_ko)}
/*
.TO		{background-color:#FFFFc0;}
.PO		{background-color:#c0F0FF;}	
.OK		{background-color:#c0FFc0;}
.KO		{background-color:#FFc0c0;}
.NA 	{background-color:#c0c0c0;}
*/





/* ANCIENNES PAGES */



.bouton {		/* Boutons*/

	cursor:pointer;
	padding:10px 10px 10px 10px;
	margin:10px;
	font-weight:bold;
	font-size:40px;
	color:rgb(0,0,0);
	border:solid;
	border-width:2px;
	border-color:rgb(144,240,255);
	border-color:#005050;
	border-radius:5px;
	background:rgb(48, 192, 255);
        line-height:100%;
	text-align:center;
}

.bouton:hover, .bouton_p:hover{		/* Boutons du menu (survolé) */
	background:rgb(144,240,255);
}

.div_popup{		/* popup - fond */
	position:fixed;padding:0px;
	top:0px;left:0px;width:100%;height:100%;
	background:rgba(100, 100, 100, 0.9);
	border:solid;border-width:1px;border-color:rgb(0,0,0);
	z-index:999;
	display:none;

}
.img_close_popup{		/* popup image pour fermer (croix en haut à droite) */
	position:absolute;
	top:30px;right:30px;
	width:100px;
}

.div_popup_cadre{		/* popup - fenêtre de contenu */
	position:absolute;
	/*top:200px;*/
	min-width:800px;max-width:90%;
	
	top:50%;left:50%;transform: translate(-50%,-50%);
	padding:50px;
	padding-left:20px;padding-right:20px;
	margin:auto;
	background:#FFFFFF;
	border-radius:10px;border:solid;border-width:1px;border-color:rgb(0,0,0);
	text-align:center;
}
.div_popup_content{		/* popup - fenêtre de contenu */
	/*width:90%;*/
	margin:0%;
}


.TAB_OPT{	/*liste de boutons - actions possibles VIEW_TICK*/
	width:100%;
	border-spacing: 0px 10px;
	font-size:30px;
}

.TAB_OPT tr:has(.BTN:not(.inactif):not(.STATUS)){
	cursor:pointer;
}
.TAB_OPT tr td{
	padding-right:10px;padding-left:10px;
}
.TAB_OPT tr td:first-child{
	text-align:center;
	width:180px;
}
.TAB_OPT tr td:last-child{
	text-align:left;
	width:calc(100% - 180px);
}


.TAB_TIKL{
	display:inline-block;
	font-size:30px;
	border-collapse : collapse;
}

.TAB_TIKL tr td{
	padding-right:10px;padding-left:10px;
}
.TAB_TIKL tr td:first-child{
	background:#F0FFFF;
	text-align:left;
	width:100%;/*la deuxième colonne prendra d'abord sa place pour éviter retours à la ligne, puis la première colonne prend le reste*/
}
.TAB_TIKL tr td:last-child{
	background:#E0EFEF;
	text-align:right;
	white-space: nowrap;
}

/* lignes du ticket (dans VIEW_TICKET) */
.TIKL_LINE{	
	display:flex;
	font-size:30px;
	vertical-align:middle;
	border-bottom:solid 1px #FFA0A0;
}
.TIKL_TXT{	
	background:#F0FFFF;
	padding-left:50px;
	width:70%;
	text-indent:-40px;
	text-align:left;
}
.TIKL_TOT{	
	background:#E0EfEf;
	padding-right:10px;
	width:30%;
	text-align:right;
	vertical-align:middle;
}

.GAUCHE_H200{		/*photo activité */
	width:30%;margin:0px;padding:0px;height:200px;
	display:inline-block;
	border:0px;
	vertical-align:middle;
	text-align:center;
	overflow:hidden;
}

.DROITE{		/* description activité */
	width:68%;margin:0px;padding:1%;
	display:inline-block;
	border:0px;
	font-size: 30px; 
	vertical-align:top;
}

.GAUCHE20{		
	width:20%;margin:0px;padding:0px;
	display:inline-block;
	border:0px;
	vertical-align:top;
	text-align:center;
	overflow:hidden;
}

.DROITE78{		
	width:78%;margin:0px;padding:1%;
	display:inline-block;
	border:0px;
	font-size: 30px; 
	vertical-align:top;
}

/* lignes des tableaux de listes de tickets dans page HOME + liste actions dans VIEW_TICKET */
.trtik{
	height:60px;
}
.trtik:first-child {
	font-weight:bold;
	background: #C0F0FF;
}
.trtik:nth-child(even) {	/* lignes paires */
	background: #FFFFFF;
}
.trtik:nth-child(odd) {	/* lignes impaires */
	background: #E0E0E0;
}

.trtik:not(:first-child) td:nth-child(1) {width:10%;}
.trtik:not(:first-child) td:nth-child(2) {width:30%;}
.trtik:not(:first-child) td:nth-child(3) {width:10%;}
.trtik:not(:first-child) td:nth-child(4) {width:25%;word-break: break-all;}
.trtik:not(:first-child) td:nth-child(5) {width:15%;}
.trtik:not(:first-child) td:nth-child(6) {width:10%;}
.trtik .BTN{
	--height:50px;
}
.trlig:first-child {
	font-weight:bold;
	background: #C0F0FF;
}

.trlig:nth-child(even) {	/* lignes paires */
	background: #FFFFFF;
}
.trlig:nth-child(odd) {	/* lignes impaires */
	background: #E0E0E0;
}

/* tableau avec sélection possible des lignes (invoicing/balancing)*/

.trsel_tit {
	font-weight:bold;
	background: #C0F0FF;
}
.trsel_selected {	
	background: #C0FFC0;
}
.trsel_unselected {	
	background: #FFC0C0;
}

/* ANCIENNES PAGES - FIN*/









/*ACTDET_PUCES */

#BLOC_ACT_TAB tr td:first-child{
	vertical-align:top;padding-right:5px;
	width:300px;
}
#BLOC_ACT_TAB tr td:last-child{
	vertical-align:top;padding-right:5px;
	width:700px;
}

#BLOC_ACT_IMG
{
	width:100%;
	object-fit: cover;aspect-ratio: 4/3;display:inline-block;vertical-align:top;border:1px solid black;border-radius:16px 4px 16px 4px
}
.ACTDET_PUCES{
	margin-left:0px;margin-right:10px;
	width:calc(100% - 20px);
}
.ACTDET_PUCES > ul{
	display:inline-block;
	margin-top:5px;
	margin-bottom:5px;
  margin-left:-5px;
	text-align:left;
	column-count: 2;column-gap: 5px;column-rule:dotted 1px black;
}
.ACTDET_PUCES > ul > li{
	font-size:32px;font-weight:bold;color:#000060;break-inside: avoid;
	line-height:1.1em;
  margin-left:50px;
}
.ACTDET_PUCES > ul > li > ul {
  margin-left:-30px;break-inside: avoid;margin-bottom:00px;list-style-type:disc;
}
.ACTDET_PUCES > ul > li > ul > li {
	font-size:20px;
	color:#000000;font-weight:normal;
	line-height:1em;
}
.ACTDET_PUCES > ul > li:first-of-type, .ACTDET_PUCES > ul > li:first-of-type > ul > li{	/* pricing+pricingdet*/
	color:#C00000;
}
.ACTDET_PUCES > ul > li:first-of-type > ul > li{	/* pricingdet*/
	font-size:24px;
	font-weight:bold;
}



.ACTDET_PUCES> ul > li > a .IMG_WHATSAPP, .ACTDET_PUCES> ul > li > a .IMG_MAIL, .ACTDET_PUCES> ul > li > a .IMG_TEL{
	height:80px;
	width:80px;
}




.ACTDET_PUCES > ul > li > ul > li.MORE, .ACTDET_PUCES > ul > li:first-of-type > ul > li.MORE{
	
	font-weight:normal;list-style-type:none;
	font-size:21px;margin-left:-5px;
}
.ACTDET_PUCES > ul > li > ul > li.MORE::before, .ACTDET_PUCES > ul > li:first-of-type > ul > li.MORE::before{
	content:"· ";
	font-weight:bold;
}

/*ACTDET_PUCES - fin*/



.ACT_COMSHORT{
	display:inline-block;
	margin-top:10px;
	margin-bottom:5px;
	font-size:24px;
	text-align:left;
	font-weight:bold;
	font-style:italic;
	width:95%;
	line-height:1em;
}
.ACT_COMLONG{
	display:inline-block;
	margin-top:10px;
	font-size:18px;
	text-align:justify;
	width:95%;
	line-height:1em;
}

/* 		CHECKBOX_BUTON */
.checkbox_button{
  height: 0;
  width: 0;margin:0;
  visibility: hidden;
}
.checkbox_button + label{
	display:inline-block;
  cursor: pointer;
  text-indent: -9999px;
  --hcalc:var(--height, 50px);
  height:var(--height, 50px);
  width:var(--width, calc(2 * var(--hcalc)));
  background: #C0C0C0;
  border-radius: 100px;
  position: relative;
}

.checkbox_button  + label:after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(var(--hcalc) - 10px);
  height: calc(var(--hcalc) - 10px);
  background: #fff;
  border-radius: calc(var(--hcalc) /2);
  transition: 0.3s;
}

.checkbox_button:checked + label {
  background: #30C030;
}

.checkbox_button:checked + label:after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

.checkbox_button + label:active:after {
  width: calc(var(--hcalc) * 1.2);
}


/* 		CHECKBOX_BUTON - fin */

/* CHOIX LANGUE */
.radio_lang{
  height: 0;
  width: 0;margin:0;
  visibility: hidden;
}

.radio_lang + label{
	display:inline-block;
  cursor: pointer;
	background-image: var(--img);
	background-repeat: no-repeat;
	background-size:cover;
	width:75px;height:75px;
	border-radius:50%;	
	margin-right:5px;
}
.radio_lang:checked + label{
	filter:drop-shadow(0px 0px 5px #FFFF00F0);
}
.radio_lang:not(:checked) + label{
	--taux_gris:100%;
	-webkit-filter: grayscale(var(--taux_gris)); /* Chrome, Safari, Opera */
	filter: grayscale(var(--taux_gris)); /* Firefox */ 
}
/* CHOIX LANGUE - fin*/

/*INTL-TEL-INPUT*/

.iti__flag {background-image: url("intl-tel-input-18.0.0/build/img/flags@2x.png") !important;}
.iti__selected-dial-code{width:90px;text-align:center;}	/*préfixe tel à côté drapeau*/
.iti__country-list{max-height:800px !important;}



#iti_input_info{
	position:relative;
	display:inline-block;
	font-weight:bold;
	/*white-space: nowrap;/*évite retours ligne*/
	color:#000000;
	text-align:left;
	font-size:30px;
	height:50px;
	width:auto;
	
}
/*INTL-TEL-INPUT - fin*/






.CADRE_PIC_DEFIL, .CADRE_PIC_DEFIL2, .CADRE_PIC_DEFIL3{
	border:none;	/*border:1px solid black;*/
	scroll-snap-type: x mandatory;	/*mandatory proximity*/
	overflow-x:auto;
	overflow-y:hidden;
	white-space: nowrap;
	margin:auto;
	padding-right:0px;
}

.CADRE_PIC_DEFIL img, .CADRE_PIC_DEFIL3 img{
	object-fit: cover;
	scroll-snap-align:start;
	border:1px solid black;
	max-height:50%;
	max-width:100%;
	aspect-ratio:auto;
	border-radius: 0px;
	margin-right:5px;
	margin-top:25%;
}
.CADRE_PIC_DEFIL2, .CADRE_PIC_DEFIL3{
	border:none;
	height:100%;
	width:100%;
	display:inline-block;
}
#ZOOM_PIC_DEFIL_BACK{
	position:fixed;z-index:200;background:#C0C0C0C0;
	top:0px;left:0px;
	height:100%;
	width:100%;
}
.CADRE_PIC_DEFIL{
	position:absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width:100%;
	height:100%;
}
.FA_ICON{
	vertical-align:top;
	font-size:1em;
	/*transform: translate(0%,0px);*/
	transform: translate(0%,0.1em);
}



.TAB_EDIT_TIKL{
	width:100%;
	font-size:30px;
}

.TAB_EDIT_TIKL.GLOB{
	width:auto;margin:auto;
	text-align:left;border:1px solid #606060;border-radius:5px;background:#F0F0F0;padding:5px;
}
.TAB_EDIT_TIKL.GLOB select, .TAB_EDIT_TIKL.GLOB input{
	height:45px;
}
.TAB_EDIT_TIKL tr.TITRE		{font-weight:bold;}
.TAB_EDIT_TIKL tr td.typ	{width:100px;}
.TAB_EDIT_TIKL tr td.lib	{width:400px;}
.TAB_EDIT_TIKL tr td.qtt	{width:60px;}
.TAB_EDIT_TIKL tr td.pri	{width:80px;}
.TAB_EDIT_TIKL tr td.tot	{width:100px;}
.TAB_EDIT_TIKL tr td.min	{width:20px;}	.TAB_EDIT_TIKL tr td.min .val	{font-size:60%;}
.TAB_EDIT_TIKL tr td.max	{width:20px;}	.TAB_EDIT_TIKL tr td.max .val	{font-size:60%;}
.TAB_EDIT_TIKL tr td.now	{width:70px;}	.TAB_EDIT_TIKL tr td.now .val	{font-size:60%;}
.TAB_EDIT_TIKL tr td.com	{width:70px;}	.TAB_EDIT_TIKL tr td.com .val	{font-size:60%;}

.TAB_EDIT_TIKL select, .TAB_EDIT_TIKL input	{
	font-size:30px;margin:0;width:100%;height:50px;
	-webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
	}
	
	
.TAB_EDIT_TIKL input:disabled {
  background:#C0C0C0;
}
.TAB_EDIT_TIKL select:disabled {
  background:#C0C0C0 !important;
}

.TAB_EDIT_TIKL tr.TOT				{font-weight:bold;}
.TAB_EDIT_TIKL tr.TOT	td			{padding-top:10px;}
.TAB_EDIT_TIKL tr.TOT	td:nth-of-type(2)			{text-align:right;padding-right:10px;}


/*retirer les fleches dans input number*/
/* Firefox */
input[type=number] {-moz-appearance: textfield;}
/* Chrome */
input::-webkit-inner-spin-button, .LIGOPTinput::-webkit-outer-spin-button { -webkit-appearance: none;margin:0;}
/* Opéra*/
input::-o-inner-spin-button,.LIGOPT input::-o-outer-spin-button { -o-appearance: none;margin:0;}


#CNF_CUST_WHATSAPP_img{
	vertical-align:middle;
	height:75px;
}
#CNF_CUST_WHATSAPP + label{
	--height:75px;--width:150px;
}

#PRIVATE_COM_NEW{
	width:600px;height:200px;
}
#BLOC_CLI_DET_CONTENT{
	column-count:1;
}
#BLOC_CLI_DET_CONTENT input[type="text"], #BLOC_CLI_DET_CONTENT input[type="email"], #BLOC_CLI_DET_CONTENT textarea{
	width:500px;
}

#VIEW_TICKET_GLOBAL{
	margin-top:10px;
	column-count:1;
}
#VIEW_TICKET_TOP{
	display:inline-block;vertical-align:top;text-align:left;padding-left:20px;font-size:35px;
}
#VIEW_TICKET_IMG{
	object-fit: cover;aspect-ratio: 4/3;display:inline-block;border:1px solid black;border-radius:16px 4px 16px 4px;
	width:240px;
	height:180px;
}
#VIEW_TICKET_DET_COM_CUST{
	column-count:2;column-gap: 5px;
}
#VIEW_TICKET_UL{
	--fa-li-width: 1.5em;--fa-li-margin:40px;margin-top:5px;margin-bottom:5px;text-align:left;
	font-size:30px;
}
#BLOC_OPTIONS_CONFC_TEXTAREA{
	width:90%;
}
#CADRE_PAY, #CADRE_PAY_BOARD {
	display:inline-block;min-width:80%;
	text-align:center;padding:10px;margin:auto;width:auto;
}
#CADRE_PAY .BTN, #CADRE_PAY_BOARD .BTN{
	margin-right:10px;
}
#TAB_HISTO{
	font-size:25px;width:100%;border:1px solid;
}
#VIEW_TICKET_CONTENT_COM, #VIEW_TICKET_CONTENT_CUST{
	text-align:left;font-size:30px;
}
#TAB_trtik{
	font-size:25px;
}
#PAGE_TIK_CHECK{
	column-count:1;
}

.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#textarea_tik
{
	color:#606060;
}