body { margin:0; font-family: Arial, sans-serif;}
/* Menu page index*/
#menu, #mena { position: relative; top:0; width: 100%;left: 0; margin-bottom: 10px; padding:10px 0; /*background-color: #333;*/ z-index:9999; font-size: 20px; color:#fff}
#menu button { margin-right: 10px; padding: 5px 10px; }

h2 { margin-top: 50px;}

.titre { font-weight: bold;}

button[type="submit"], .bouty, .boutyGris {background-color: #a62315; color:#fff; letter-spacing: 0.5px; width: 150px; border-color: #eee; border-radius: 5px; cursor:pointer; margin:0 auto; padding:3px;  }
.boutyGris {background-color: #999; width: 200px;}
button[type="submit"]:hover, .bouty:hover { color:#ccc;  }

button { cursor: pointer;}

/**/
.barrer { position: sticky; left: 0; top:0; width: 100%;  z-index: 9999; color:#fff;padding:5px; overflow: hidden }
.barre { padding:10px; overflow: hidden}

.service { margin: 0 auto; width: 60%;}

.cacher { display:block} /* pour le menu Téléphone */
.cacherlescommentaires { display: none}
#resultatsdepart, #resultatslieu_rdv, #resultatschauffeur, #resultatsclient { position: absolute; color:#000; background: #eee;width: 200px;}

input { width: 100%;}

textarea { max-height: 130px; max-width: 1000px; width: 100%;}

.leunp, .leuCar { float:left; width: 10%; padding:5px 2px; overflow: hidden;}

.groupi { float:left; width: 300px;} /* background-color: violet;*/

.btn-toggle { font-style: italic; cursor:pointer;}
.btn-toggleAA { cursor:pointer; width: 200px; font-weight: bold; background-color: #eee; padding:2px 5px; text-align: center; border-radius: 3px}

.plus { width: 20%;} .plusc { width: 25%;} .plusa { width: 50%;} .plusaa { width: 60%;}
.plusb { width: 33%;} .plusbmoins { width: 15%;} .moins { width: 5%} .moinsb {width:7%}
 label { font-style: italic; color:#999;}
/**/
.ltr-R { float:left; width:30%;} /* pour Liste et recherche*/
#liste { margin-top: 0;}
/*.lister-ok { float:left; width:10%; background: #eee; border:1px solid #ccc; padding:5px 5px;} */
.lign-liste-ok {clear: both; margin-bottom: 130px; } /* hauteur des lignes ??? */

/* SERVICE */
.grosTitre { float:left; width: 50%; font-size: 24px; font-weight: bold; margin:10px 20px; }
.nomDecon { float:right; width: 50%; text-align: right; font-weight: bold; color:#000; font-size: 16px; }

/* dans modifier pour la recherche auto-tlete list-style: none;*/
.suggestions, .suggast {padding-left: 20px;margin: 0;
    position: absolute; width: 200px; background: #eee; cursor: pointer; font-size: 20px; z-index:999;}
.suggestions li:hover, .suggast li:hover {background: #fff;}

/* TITRE des jours et dates */
.lesdates { width:100%; background: #00ff00; padding:5px 0; font-size:24px; text-align: center; font-weight: bold }

/* pour Depart - Lieu RDV...*/
.lessoustitres { padding: 5px; margin-bottom:5px; background-color:#333; color:#fff; font-size:20px;  height: 30px; }

.colon { float:left; width: 10%; padding: 5px; text-align:center }
#mena .colonRetour { float:left; }
.colonActu { float:left;}
.colonInput { float:left; width: 15%;}
/* LES lignes en dessous */
.leslignes { padding: 5px; margin-bottom:5px; height: 30px; }
/*.pasdechauffeur1 { color:#999; font-style: italic;}*/

/* le compteur */
.compT { position:fixed; top:30px; right:10px;color:#fff; background:#333333;font-size:18px; padding:2px 5px; border-radius:3px; z-index: 9999}

/* couleur des villages*/
.Violet, .ee, .Jaune, .Orange, .Bleu { padding: 5px;}
.Aucun { background-color:none;}   .Violet { background-color: #ec6cec;} 
.Rouge { background-color: #f14949; color:#fff} .Jaune { background-color: #f2f46b;}
.Orange { background-color: #ebb747;} .Bleu { background-color: #93beff;}

/* ALERTE ENRG */
.message, .messageAffi { position:absolute; top: 53px; width: 147px; right: 10px; background: #f00;
    color: white; padding: 12px 20px; border-radius: 5px; opacity: 1; z-index: 9999; transition: opacity 0.3s; display: none;}
.message.show { opacity: 1;}

.btglobe { cursor:pointer}

.separHaut { width: 100%; clear: both; height: 20px; background-color: #eee}
.ligneseparation { width: 100%; clear: both; height: 5px; background-color: #eee}
.separPetit { width: 100%; height: 20px; clear: both; }

/* ############  MODALE */
.modalBB{ display: none;   position: fixed;   z-index: 999999;  left: 0;
  top: 0;  width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5);}

.modal-content {background-color: #fff; margin: 10% auto;  padding: 20px; border-radius: 8px;
  width: 90%;  max-width: 1300px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); overflow: hidden;}

.close { color: #aaa;  float: right;  font-size: 28px;  font-weight: bold;cursor: pointer; }
.close:hover {  color: black; }

/* */
@media (max-width: 992px) { 
.colon { font-size: 18px }  .service { width: 90%;}
#liste { margin-top: 0;}
}
@media (max-width: 579px) { .leuCar { width: 20%;} .service { width: 98%; padding:10px}
.nomDecon { width: 90%;}  .grosTitre { width: 80%; }
    #liste { margin-top: 30px;}  .compT { top:100px}
/* #menTel {display: block; }*/
    .leslignes button {position:relative; width: 100%; clear: both; }
.cacher { display:none} /* pour le menu Téléphone */
.lesdates {  width: 100%; height:20px; font-size:18px;clear: both;  } 
.colonInput {width: 70%; }
.leunp, .colon {  width: 100%;clear: both;  } 
}