@charset "iso-8859-1";
/* CSS Document */

.material-icons {
	vertical-align: middle;
	min-width: 24px;
/*    max-width: 19px;*/
    overflow: hidden;
	}


/* ------------- Boite dialogue ----- */
.btnAnomalie,
.btnAssistance {background-color: #0004; color:#fff;
  padding: 5px 10px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid #fff4;
  text-decoration:none; 
 }
  
.btnTel {text-decoration:none; color:#fff}

.btnAnomalie:hover { cursor:pointer; color:#f60;background-color: #333;}
.btnAssistance:hover, btnTel:hover { color:#8dbf04; background-color: #333;}


/* ---------- boite message ------------------*/
.boiteModale {
	position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
   border: 2px solid #fff;
  background-color: #ececec;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 40px;
  margin: 20px;
  min-width: 300px;
}

.titreBoite {background-color: #888;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.corpBoite { padding: 20px;line-height: 120%;}
.piedBoite { padding: 5px;text-align: center;}

.texteIntro {margin-bottom: 10px; color: #555;}

.texteMessage { background-color:#fff; padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  height: 170px;
  width: 100%;
}

.btnOK, .btnAnnuler
{
	border-radius: 5px;
  margin: 5px;
  border: none;
  padding: 5px 10px;
  color: #fff;
  border: 1px solid #fff;
}

.btnOK:hover, .btnAnnuler:hover
{
	box-shadow: 0 0 6px #00000038;
  color: #fff;
}


.btnOK { background-color: yellowgreen;}
.btnAnnuler { background-color: orange;}



/* ------- inf0 bulle -----------------*/

.infoBulleIcone {font-size: 1.3rem;}

.infosBulle { color: #bbb; position:relative; cursor:pointer;   display: inline-block;}

.infosBulleTexte p { margin-bottom:5px !important;}

.infosBulle .infosBulleTexte { 
visibility: hidden;
font-size: 0.75rem;
width: 260px;
background-color: white;
color: #555;
text-align: left;
border-radius: 6px;
padding: 15px 20px;
position: absolute;
z-index: 10000;
top: 25px;
left:0;
margin-left: -20px;
opacity: 0;
transition: opacity 1s;
border: 1px solid #ccc;
box-shadow:1px 1px 10px rgba(0,0,0,0.2);
font-weight: normal !important;
  font-family: Arial, Helvetica, sans-serif ;
  line-height: 130%;
letter-spacing: normal;
	}
	
.infosBulle:hover .infosBulleTexte { visibility:visible; opacity:1;}


/* -- transfert fichier ---------------

/* barre progression transfert fichiers */
#reussite {
	/* [disabled]display: block; */
	/* [disabled]position: absolute; */
	/* [disabled]right: 80px; */
	/* [disabled]top: 140px; */
}
progress{
	/* [disabled]display: inline-block; */
	/* [disabled]height: 27px; */
	vertical-align: middle;
	/* [disabled]width: 100px; */
}
.cacheProgress{
	margin:-5000px;
}


/* index -----------------------   */


.btnLien {
	display:inline-block;
	text-decoration: none !important;
	color: #fff !important;
	font-weight: bold;
	background-color: #b80467;
	padding: 5px 15px;
	border-radius: 5px 10px;
}

.btnLien > span {
	vertical-align:text-top;
}

.btnLien:hover {
	text-decoration: none !important;
	color: #b80467 !important;
	background-color: #fff;
	border-radius: 5px 10px;
	box-shadow: 0px 0px 15px #0000004d;
	transition:all 0.25s ease-in
}

.btnVisu {
	padding: 10px 5px;
  margin: auto;
  display:block;
  margin-bottom:5px;
  border-radius: 5px;
  
  background-color: #fff;
  color: #444 !important;
  border: 2px solid #ddd;
}

.btnVisu:hover {
  background-color: #fff;
  color: #812460 !important;

  border: 2px solid #812460;
	border-radius: 0px;
	transition:all 0.75s
}



.ICOcarre {
  color: #b80467;
  background-color: #fff;
  border-radius: 5px;
  width: 32px;
  text-align: center;
  margin-right: 7px;
  margin-top: 10px;
	vertical-align: text-bottom;
}

.blocDetailFonction {
	margin-left: 0px;
	padding-left: 14px;
	margin-top: 21px;
	margin-bottom: 20px;
	font-size: 0.8em;
	border-radius: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-right: 15px;
	background-color: #ffffffc4;
	}

.blocDetailEtape {
	padding:15px;
	margin-left: 0px;
	
	border-left: 5px solid #9fb827;
	margin-top: 21px;
	margin-bottom: 20px;
	border-radius: 10px;
	background-color: #9fb827;
}
	.NumeroEtape {
			font-size: 3em;
		margin-top: 15px;
		letter-spacing: -3px;
		font-weight: bold;
		color: #ffffffb0;
		}
		
	.listeEtapes h5 {
		font-size: 1em;
		margin-bottom: 10px;
		font-family: Arial, Helvetica, sans-serif;
		color: #fff;
		margin-top: 16px;
		letter-spacing: 0.2px;
		}


/* ------- mobile ------- */
.mobileTel {
	position: relative;
	width: 300px;
    border-top: 15px solid #000;
    border-bottom: 15px solid #000;
    border-left: 10px solid #000;
    border-right: 10px solid #000;
    border-radius: 15px;
    margin: 20px auto;
/*transform: perspective(800px) rotateY(355deg) rotateX(11deg) rotateZ(6deg);*/
	box-shadow: 7px 7px 10px #00000038;
font-family: Arial, Helvetica, sans-serif !important;
	}

.mobileHeader { 
	background: linear-gradient(291deg,rgb(19 19 19), rgb(67 67 67), rgb(19 19 19));
	height: 35px;
	color:#ffffff8f; text-align:center;
	padding-top:7px;
}

.mobileFooter { 
	background: linear-gradient(291deg,rgb(19 19 19), rgb(67 67 67), rgb(19 19 19));
	height: 40px;
	color:#ffffff8f; text-align:center;
	padding-top:14px;
}
.mobileBoutonFooter {
border: 1px solid #fff4;
  color: #fdd96e;
  border-radius: 5px;
  padding: 4px;
  background-color: #0009;
  letter-spacing: 1px;
	}


.mobileCorp { 
	padding:0px;
	height: 450px;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #f4f4f4;

	scrollbar-color: #b5b5b5 #646464;
	scroll-behavior: smooth;
	scrollbar-width: thin;
}


.t1, .t2, .t3, .t4 {
	font-family: Arial, Helvetica, sans-serif !important;
}

.t1 {font-weight: normal;  font-size: 1.3em;}
.t2 {font-size: 1.5em;  font-weight: bold;  letter-spacing: -0.8px;}
.t3 {font-size: 1.3em;  font-weight: bold;  letter-spacing: -0.8px;}
.t4 {font-size: 1.2em;  font-weight: bold;  }

.mobileNomCuvee {
  border-bottom: 2px solid #c7ac65;
  margin-bottom: 4px;
  padding-bottom: 3px;
}

.mobileEnergie {
background-color: #fff;
  padding: 10px;
  border-radius: 50px;
  height: 90px;
  width: 90px;
  display: flex;
  align-items: center;
  margin: 10px auto;
  border: 2px solid #6eca00;
  color: #686868;
}

.mobileAlcool {
  color: #444;
}

.ligneCepage { margin-bottom:5px;}

.pourcent 
{ 
	font-weight: bold;
	width: 40px;
	display: inline-block;
	padding-right: 8px;
}

.barAssemblage {  width: 90%;  display: inline-block;  background-color: #dfdfdf;}
.barValeur {display: inline-flex;background-color: #c1973f ;vertical-align: middle; color: #fff;text-align: right;padding: 0 5px; }

.cepage {
width: 90%;
display: inline-block;
padding: 2px;
margin-right: 5px;
border-radius: 3px;}




/* bloc infos */
/* Animation pour afficher l'aide */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Animation pour masquer l'aide */
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#fenetreSaisie{box-shadow: 0 0 20px #fff; border: 1px solid #cbcbcb; margin: 15px 0; }

#blocInfos {
	transition: opacity 1s ease-in-out;
}

#btnAppelAide { position: absolute; right: 8px; top: 8px; opacity:0.7}
#btnAppelAide:hover { cursor:pointer; opacity:1}

.afficheAide { opacity:1; animation: fadeIn 1s ease-in-out;}
.masqueAide { opacity:0; animation: fadeOut 1s ease-in-out; display:none }



.blocInfos { 
	background-color:#fff; 
	padding:0px; 
	border: 1px solid #ccc; 
}

	.blocInfosEntete {background-color: #b8094e;color: #fff;padding: 10px; text-align:center}
	.blocInfosCorp {padding: 20px;}
	.blocInfosCorp p {padding: 0px;margin: 8px 0 !important;}
	.blocInfosCorp li {padding: 0px; margin-left:25px}
	.blocInfosPied {background-color: #555;color: #fff;padding: 10px; text-align:center}



.btnSuivant {width: auto !important; background-color: #84c009 !important ;color: #fff !important; border-radius: 5px !important; border: transparent !important;font-size: 1.5em !important; padding: 12px 25px !important; margin: 10px !important;}

.btnSuivant:hover {width: auto; background-color: yellowgreen !important;color: #fff; cursor:pointer;}

.btnPrec {
background-color: #bbb !important;
  color: #fff !important;
  border-radius: 5px !important;
  border: transparent !important;
  font-size: 1.5em !important;
padding: 10px 15px !important;
  margin: 10px !important;
	}
.btnPrec:hover {width: auto; background-color: yellowgreen !important;color: #fff; cursor:pointer;}


/* --- Fiche entreprise-- */



#nom.Obl { position:relative;}

#nom.Obl::after {
	content : "***";
	position: absolute;
  top: 0;
  right: 0;
}
/*
.checkChampOK,
.checkChampKO {
position: absolute;
margin-left: -35px;
display:inline-block;
font-size:1.4em;
right:6px;
text-align:right;
	
}
.ChampOK { color: yellowgreen; padding: 10px 5px; 	}
.ChampKO { color: red; padding: 7px 5px; }

.cacheProgress {
	display:none
}

.infosLabel {
font-size:0.7em;
position: absolute;
display: inline-block;
margin-left: 5px;
margin-top: -11px;
color: #444;
background-color: #fff;
}

.infosLabel::after,
.infosLabel::before {
	content: "-";
}

.label-file {
	cursor: pointer;
	background-color: #25a5c4;
	color:#fff !important;
	padding: 6px 10px;
	border-radius: 7px;
	display: block;
	border: 2px solid #25a5c4;
	margin-bottom: 10px;
}

.label-file:hover {
background-color: #fff;
color: #25a5c4 !important;

}

.zoneTransfert {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
background-color: #f4f4f4;
border-radius:3px;
}

#input {padding: 20px;
  border: 1px #8c8c8c dashed;
  background-color: #fff;
  display: flex;
}

.input-file {  display: none; }

.btnEnvoyer {
text-align: center;
background-color: yellowgreen;
padding: 10px;
color: #fff;
width: 60%;
margin: 40px auto;
cursor:pointer;
	}

.btnEnvoyer:hover { background-color:#a5e12c}

*/

#x_suivi {
font-size: 0.8em;
color: #777;
text-align: center;
line-height: 125%;
padding: 10px;
background-color: #f4f4f4;
	}

#zoneLabels {border: 1px solid #ccc;
  padding: 5px;
  margin-bottom: 10px;
  background-color: #f4f4f4;
  border-radius: 3px;
  justify-content: flex-start;
  display: flex;
}

.itemLabel {margin: 20px;align-self: normal;}
.nomLabel {font-size:0.8em; line-height: 120%;  text-align: left;color: #000;display: inline-block;  margin-left: -5px; width: 110px;}
.imageLabel {display: block; margin-bottom: 10px;}
.cursorPointer{ cursor:pointer; opacity:0.8;height: auto;  display: block;}
.cursorPointer:hover { cursor:pointer; opacity:1;}


/* --- Fiche cuvee -- */

/* AOC IGP*/
.labelSousTitre {padding:10px 0px 5px 0;display: block;}

/* Style pour le label sélectionné */
.radioSelect {
	background-color: #fff !important;
}


#chercherCepage {
	width:200px !important;
	padding:10px 20px !important;
			flex: 1;
		border: none;
		outline: none;
		margin-bottom:0;
		background-color:#fffe;
}

	.input-group {
		display: flex;
		align-items: center;
		padding: 5px;
		background-color: #00000012;
		margin-top: 10px;
		color: #777;
	}

	.material-icons {
		margin-right: 5px;
	}


/* ASSEMBLAGES */

#Xassemblage {background-color:#dddad6;}

.AssemblageFinal {
	background-color: #b0789b;
	padding: 5px;
}

.SupprCepage {
	color: #fff;
	margin-left: 10px;
}

.SupprCepage:hover {
  color: #c41503;
  opacity:1;
}


@media (max-width: 767px) {
  /* Styles sp�cifiques aux smartphones */
  .blocInfos { }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Styles sp�cifiques aux tablettes */
}


@media (min-width: 1024px) {
  /* Styles sp�cifiques aux ordinateurs de bureau */
.blocInfos { }  
  
  
}




/* --- rassurance footer ------------------ */
.rassurrance {text-align:center; font-size: 1.4em;line-height: 140%; padding:40px; background:radial-gradient(circle farthest-side at bottom center, #8c2d6a 0%, #5b063d 100%);}
.blocRecap {border: 1px solid #ccc;margin: 4%; padding:5%; background-color: #fff; font-size:0.8em;}
.blocRecap p {margin: 10px;font-size: 0.9em;line-height: 150%;}
.blocRecap h3 { color: #6c0837; margin:10px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; font-size:1.5em;}
.blocRecap H3 span  { color: #0009; font-size: 2em !important; margin-bottom: 10px; }
/* tableau composition ------------------ */
table.mentions { border-collapse: collapse; width: 100%; background-color: #fff; margin-bottom:0;}
table.mentions tr {}
table.mentions th { margin: 0px;padding: 10px;  background-color: #ccc0a8 !important;  color: #00000087;  border: 1px solid #fff;}
table.mentions td { height:55px; margin: 0px 5px 10px 5px 10px !important; line-height: normal;border-bottom: 1px solid #999999; padding: 5px 20px !important}
table td input { margin-bottom:0 !important;}
td.TDvaleur {  padding: 8px !important;}
.labelOptions {     width: 280px; display: inline-block;text-align: right;}

label {    color: #355277; }