/***************************************************************
NS
Php.css

marges et padding :

vertical:
chaque élément se sépare de celui situé juste au-dessus avec un margin-top
le dernier est séparé par un padding-bottom du parent

horizontal:
on utilise les margin des deux cotés (si on utilise wa_page padding => déborde du viewport)
***************************************************************/

:root {
 --bleu-af: #051039;
 --vert-to: #66d76e;
}

*{
 margin:0;
 padding:0;
 font-family:"verdana";
 font-size:18px;
}

body{
 height:100%;
}

html{
 height:100%;
}

a, button, label{
 display:inline-block; 
 border:0; 
 background-color:transparent;
}

a[target="_blank"]:after {
 font-family: 'FontAwesome';
 content: " \f08e";
 font-size:0.7em;
}

h1{
 margin-top:0.8em;
 text-align:center;
 font-size:1.2em;
 font-weight:bold;
}

h2, h3{
 margin-top:0.8em;
 margin-left:0.76em;/*0.6/1.05*/
 margin-right:0.76em;/*0.6/1.05*/
 text-align:left;
 font-size:1.05em;
 font-weight:bold;
 color:white;
}

h3{ /* h2 avec item_form */
 margin-left:1.52em;/*0.6/1.05*/
 margin-right:1.52em;/*0.6/1.05*/
}

hr{
 margin-top:0.8em;
 margin-left:0.8em;
 margin-right:0.8em;
}

li{
 margin-top:0.5em;
 margin-left:1em;
}

li li{
 margin-top:0.5em;
 margin-left:-0.5em;
}

li li:first-child{
 margin-top:0;
}

ol,ul{
 padding-top:0.5em; /* pas de texte entre <ol> et premier <li> */
 margin-left:1.6em;
 margin-right:0.8em;
}

p{
 padding-top:0.8em;
 margin-left:1.6em;
 margin-right:1.6em;
} 

small,sup{
  display:inline-block;
 font-size:10px;
 line-height:1.2em;
}

.wa_over{
 overflow: scroll;
 margin:auto;
 text-align:center;
 padding:1em;
}

/****************
ED (debug) et WST (traduction avec wst)
****************/

.ed{
 background-color:orange;
 word-wrap: break-word;
 max-width:70%;
}

.ed ul{
 margin-left:1em;
}

.wst_to_translate{
 background-color:black;
 color:yellow;
 padding:0.2em 0.6em 0.2em 0.6em;
 text-decoration:none; 
}

.wst_to_translate:hover{
 color:black;
 background-color:yellow;
}

.coul_orange{
 color:orange;
}

/*********************************************************************
WA_PAGE
**********************************************************************/

#wa_page{
 overflow:auto; /* sinon ne touche pas le haut mais plante scrolltop*/
 width:100%; 
 height:100%;
 max-width:600px;
 margin:auto;
 background-color:var(--bleu-af);
 color:white;
 padding-bottom:1.6em;
 position:relative; /*pour wa_menu_main_v */

 /* sinon pas de "momentum" style scrolling sur ipad */
 overflow-y: scroll; /* has to be scroll, not auto */
 -webkit-overflow-scrolling: touch;
 
 overflow-x:hidden;
}

/*********************************************************************
WA_MENU_H
**********************************************************************/

.wa_menu_form,
.wa_menu_h{
 padding-top:0.8em;
 margin-left:0.8em;
 margin-right:0.8em;
 text-align: center;
}

.wa_menu_form{
 margin-top:1.6em;
}

.wa_menu_form .wa_bouton, .wa_menu_form .wa_bouton_2, .wa_menu_form label, .wa_menu_form .wa_bouton_selected,
.wa_menu_form .wa_bouton_desactive,
.wa_menu_form .wa_menu_sous_contener
.wa_menu_h .wa_bouton, .wa_menu_h .wa_bouton_2, .wa_menu_h label, .wa_menu_h .wa_bouton_selected,
.wa_menu_h .wa_bouton_desactive,
.wa_menu_h button, .wa_menu_h a,/* si non pas pris en compte */
.wa_menu_h .wa_menu_sous_contener
{
 margin:auto;
 margin-left:0.4em;
 margin-right:0.4em;
}

.wa_menu_form hr,
.wa_menu_h hr{
 margin-top:0.8em;
}

/*********************************************************************
WA_MENU_L
**********************************************************************/

.wa_menu_l{
 padding-top:0.4em;/*margin-top ne marche pas*/
 margin-left:0.4em;
 margin-right:1em; // pastille
}

.wa_menu_l label{
 margin-left:0.4em;
}

/*********************************************************************
WA_MENU_V
**********************************************************************/

.wa_menu_v{
 padding-top:0.4em;/*margin-top ne marche pas*/
 margin-left:auto;
 margin-right:auto;
 text-align: center;
}

.wa_menu_v .wa_bouton,.wa_menu_v .wa_bouton_desactive{
 margin-top:0.4em;
}

/*********************************************************************
WA_MENU_SOUS
**********************************************************************/

.wa_menu_sous_contener{
 display:inline-block;
}

.wa_menu_sous_contener .wa_bouton,.wa_menu_sous_contener .wa_bouton_desactive{
 margin:0;
}

.wa_menu_sous{
 display:none;
 position:absolute;
 z-index:1;/*top niveau (si item ajouté après le menu)*/
 border-top:1px solid white;/*pour haut du bouton du haut*/
}

.wa_menu_sous .wa_bouton,.wa_menu_sous .wa_bouton_desactive{
 display:block;
 background-image:none;
 border:1px solid white;
 border-top:0;
 text-align:left;
 border-radius:0;
/*  width:100%; */
}

.wa_menu_sous button{
 width:100%;
}

.wa_menu_sous .wa_bouton:hover{
 border:0;
}

/*********************************************************************
WA_MENU_MAIN
**********************************************************************/

#wa_menu_main{
 text-align:left;
 min-height:2em;
}

#wa_menu_main .wa_bouton{
 margin-left:0;
/*  margin-right:0.8em; */
}

#wa_menu_main_sous_menu_contener{
 position:absolute;
 right:0.4em;
}

#wa_menu_main #wa_menu_main_sous_menu_bouton,
#wa_menu_main #wa_menu_main_sous_menu_contener .wa_bouton{
 margin:0;
}

#wa_menu_main_sous_menu_contener .wa_menu_sous{
 position:absolute;
 right:0;
 width:15em;
}

/*********************************************************************
WA_BOUTON
**********************************************************************/

.wa_bouton, .wa_bouton_droite, .wa_bouton_selected, .wa_bouton_desactive
,.wa_bouton_2,.g-recaptcha
{
 padding-top:0.3em;
 padding-bottom:0.4em;
 padding-left:0.7em;
 padding-right:0.7em;
 text-decoration:none;
 background-color:var(--bleu-af);
 color:white;
 min-width:1em;
 position:relative;/*pour wa_pastille*/
 border: 2px solid white;
 border-radius:0.25em;
 /* text-align : center supprimé pour faqrp (WaBoiteMasquee) */
}

.wa_bouton:hover, .wa_bouton_droite:hover, .wa_bouton_selected:hover,.g-recaptcha:hover{
 color:var(--bleu-af);
 background-color:white;
 border: 2px solid var(--bleu-af);
}

.wa_bouton_desactive{
 color:gray;
}

.wa_boite .wa_bouton_desactive{
 background-color:white;
}

.wa_boite .wa_bouton_desactive:hover{
 background-color:var(--bleu-af);
}

.wa_bouton_selected{
 background-color:DarkTurquoise;
}

.wa_bouton img, .wa_bouton_2 img, .wa_bouton_desactive img{
 vertical-align:-0.3em;
 margin-right:0.5em;
}

/*********************************************************************
WA_BOUTON_2 
**********************************************************************/

.wa_bouton_2{
 border:0;
 padding-top:0.1em;
 padding-bottom:0.2em;
 padding-left:0.5em;
 padding-right:0.5em;
 border-radius:0.12em;
 position:relative;/*pour wa_pastille*/
 color:white;
 text-decoration:underline;
}

.wa_boite .wa_bouton_2{
 text-decoration:underline;
}

.wa_menu_h .wa_bouton_2, .wa_menu_l .wa_bouton_2{
 text-decoration:none;
 text-decoration:underline;
}

.wa_bouton_2:hover{
 background-color:white;
 color:var(--bleu-af);
}

.wa_boite .wa_bouton_2{
 background-color:white;
 color:var(--bleu-af);
 text-decoration:underline;
}

.wa_boite .wa_bouton_2:hover{
 background-color:var(--bleu-af);
 color:white;
}

.wa_boite table tr td .wa_bouton_2{
 background-color:WhiteSmoke;
}

/*********************************************************************
wa_menu_sous dans boite
**********************************************************************/
.wa_boite .wa_menu_sous .wa_bouton_2
{
 text-align: left;
 background-color:var(--bleu-af);
 color:white;
}

.wa_boite .wa_menu_h .wa_menu_sous .wa_bouton_2:hover
{
 background-color:white;
 color:var(--bleu-af);
}

/*********************************************************************
WA_BOUTON_GC
**********************************************************************/

@font-face{
 font-family:"Roboto-Medium";
 src: url("Roboto-Medium.ttf");
}

.wa_bouton_gc{
 font-family:"Roboto-Medium";
 background-color:#4285F4;
 text-decoration:none;
 color:white;
 padding-top:0.095em;
 padding-bottom:0.1em;
 padding-left:0.12em;
 padding-right:1em;
 border-radius:0.15em;
}

.wa_bouton_gc:hover{
 background-color:#5295FF;
} 

.wa_bouton_gc img{
 vertical-align:middle;
 padding-right:1em;
}

.gc_sign_in{
 height:1em;
}

/*********************************************************************
WA_PASTILLE 
**********************************************************************/

.wa_pastille{
 display:inline-block;
 position:absolute;
 top:-0.5em;
 right:-0.5em;
 min-width:1.3em;
 padding:0.1em;
 border-radius:1em; 
 background-color:orange;
 color:white;
 text-align:center;
 font-size:small;
}

.p_pastille{
 position:relative;/*pour wa_pastille*/
}

.p_pastille .wa_pastille{
 top:-0.3em;
 right:-1.5em;
}

.pastille{ /*pour aide mettre dans un texte*/
 display:inline-block;
 min-width:1.25em;
 padding-bottom:0.1em;
 border-radius:1em; 
 background-color:orange;
 color:white;
 text-align:center;
 font-size:small;
}

#wa_menu_main_v .wa_pastille{
 top:0;
 right:1.5em;
}

.wa_bouton_2 .wa_pastille{
 top:-1.3;
 right:-0.9em;
}

.wa_item_form label{
 position:relative;/*pour wa_pastille*/
}

.wa_item_form label .wa_pastille{
 top:-1.3;
 right:-1.2em;
}

.wa_pastille_orange{
 display:inline-block;
 position:relative;
 top:-0.5em;
 min-width:1.25em;
 padding-bottom:0.1em;
 border-radius:1em; 
 background-color:orange;
 color:white;
 text-align:center;
 font-size:small;
}

/******************************************************************************
WA_BOITE
*******************************************************************************/

.wa_boite{
 margin-top:0.8em;/*! si modifié => maj marges dans .wa_mes */
 margin-left:0.8em;
 margin-right:0.8em;
 border-radius:0.15em;
 background-color:White;
 color:var(--bleu-af);
 text-align:left;
 padding-bottom:0.8em;
 overflow: auto;
}

.wa_boite h1{
 padding-top:0.8em;/*margin-top ne marche pas*/
}

.wa_boite h2, .wa_boite h3{
 padding-top:0.8em;/*margin-top ne marche pas*/
 color:var(--bleu-af);
}

.wa_boite p{
 margin-left:0.8em;
 margin-right:0.8em;
} 

.wa_boite .wa_bouton{
 border-color:var(--bleu-af);
}

.wa_boite .wa_mes_err{
 margin-bottom:-0.8em;
 padding:0.8em;
 border-radius:0.15em;
 background-color:orange;
}

.wa_boite table{
 background-color:WhiteSmoke;
 margin:auto;
 margin-top:0.8em;
 padding:10.5em;
 border-collapse:collapse; 
}

.wa_boite td{
 padding:0.2em 0.3em;
}

.wa_boite table table{
 padding:0.1em;
 margin:0;
}

.wa_boite table td, .wa_boite table th{
 padding:0.1em 0.3em;
}

.wa_boite th{
 border-bottom:1px solid;
}

.wa_boite tr.total td{
 border-top:1px solid var(--bleu-af);
}

.wa_boite code{
 background-color:#e3e9e7;
 color:#505050;
 display:inline-block;
 padding:1em;
 font-family:courier; 
}

/*********************************************************************
WA_ITEMFORM
*********************************************************************/

.wa_item_form{
 padding-top:1.6em;
 margin-left:1.6em;
 margin-right:1.6em;
}

.wa_item_form input, 
.wa_item_form select, 
.wa_item_form textarea,
.wa_item_form .wa_item_form_aff,
.wa_item_form .item_form_nom_ville
{

 /* sinon textarea dépasse de la div wa_item_form */
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 
 margin-top:0.2em;
 padding-top:0.1em;
 padding-bottom:0.2em;
 padding-left:0.2em;
 padding-right:0.2em;
 border-radius:0.15em;
 width:100%;
}

.wa_item_form .wa_item_form_err input, 
.wa_item_form .wa_item_form_err select,
.wa_item_form .wa_item_form_err textarea{
 background-color:orange;
}

.wa_item_form_checkbox{
 display:inline;
}

.wa_item_form .input_heure{ 
 width:6em;
 margin-top:0.5em;
 margin-right:1em;
}

.wa_item_form textarea{
 width:100%;
}

.wa_item_form select{
// -webkit-appearance: none; /* safari (OS) */
 max-width:100%;
 overflow:hidden;
}

.wa_item_form .wa_item_form_bouton{
 margin-left:0.5em;
 display:inline-block;
}

.wa_item_form .wa_item_form_aff,
.wa_item_form .item_form_nom_ville
{
 background-color:#e3e9e7;
 color:#505050;
 min-height:1em;
 text-align:left;
 overflow:scroll;
}

.wa_item_form .wa_input_check_box{
 margin-top:0;
 margin-right:0.5em;
 width:1.3em;
 padding:0;
 font-weight:bold;
 color:black;
 text-align:center;
}

/*********************************************************************
WA_INFO
*********************************************************************/

.wa_info, .wa_info_checkbox{
 font-style:italic; 
 color:lightgray;
}

.wa_info_checkbox{
 margin-left:2em;
}

.wa_boite .wa_info{
 color:gray;
}

/*********************************************************************
WA_PARAMETRES_OPTION
*********************************************************************/
.wa_parametre_option_active,.wa_parametre_option_desactive{
 display:block;
 color:dimgray;
 background-color:lightgray;
 margin-left:1.2em;
 margin-top:1.2em;
 padding:0.2em 0.4em;
 border-radius:0.15em;
/* text-decoration:underline; */
}

.wa_parametre_option_active{
 background-color:lime;
 color:var(--bleu-af);
}

/****************
WAMAIL
*****************/

#wamail_boite{
 display:none;
}

#wamail_bouton_ok{
 display:none;
}

/*********************************************************************
WA_NEW
*********************************************************************/
.wa_new{
 margin-top:-1.6em; 
 position:relative;
 top:1.6em;
 left:0em;
}

/*********************************************************************
WA_PC
*********************************************************************/
.wa_pc{
 text-align:center;
}

/*********************************************************************
WA_RED
*********************************************************************/
.wa_red{
 margin-left:0.5em;
 padding:0em 0.5em;
 border-radius:0.5em; 
 background-color:red;
 color:white;
 text-align:center;
}

/*********************************************************************
NS 
**********************************************************************/

/*index***************/

#logo_index{
 width:85%;
 display: block;
 margin:auto;
 margin-top:4em;
 padding-bottom:2em;
}

/*présentation***************/

.pres_img{
 text-align:center;
 padding-top:4em;
}

.pres_h2{
 text-align:center;
}

.pres_p{
 text-align:center;
 padding-bottom:3em;
}

.pres_p b{
}

/*main****************/

#logo_main{
 max-height:2em;
}

#wa_boite_tempo{
 display:none;
}

.wa_boite_option_ctn{
/*  background-color:lightblue; */
 padding:0.15em;
 border-radius:0.15em;
}

/* 
.wa_boite_option{
 width:100%;
}

.wa_boite_option_tr{
 background-color:white;
}

.wa_boite_option_img{
 width:40%;
 text-align:center;
}

.wa_boite_option_img img{
 height:7em;
 max-width:7em;
}

.wa_boite_option_txt{
 height:9em;
 width:60%;
 vertical-align:center;
 text-align:center;
}
 */

.wa_boite_option{
/*  background-color:LightBlue; */
 width:100%;
 text-align:center;
 padding-top:0.7em;
}

.wa_boite_option img{
}

/*paramètres_photo***************/

#img_photo{
 display:none; 
}

#canvas_photo{
 display:none;
 margin:auto;
 margin-top:0.8em;
 background-color:LightBlue;
}

#canvas_photo_2{
 display:block;
 margin:auto;
 margin-top:0.8em;
 background-color:LightBlue;
}

#img_loading{
 display:none;
}

.img_centree{
 margin-top:0.8em;
 text-align:center;
}

.img_gauche{
 float:left;
 margin-top:0.8em;
 margin-left:0.8em;
 margin-right:0.8em;
 overflow:hidden;/* pour le border-radius */
}

.img_option{
 padding-top:0.8em;
 text-align:center;
}

/*bonads_maj***************/

.wa_item_form .item_form_nom_ville{ /* et aussi wa_item_form_aff */
 margin-right:1em;
 width:15em;
 display:inline-block;
}

/*bonplan****************/
.bonplan{
 border-top-left-radius:0.15em;
 border-top-right-radius:0.15em;
 padding-bottom:0.8em;
 padding-left:0.8em;
 padding-right:0.8em;
 background-color:orange;
 overflow:hidden;/* pour que margin-top du h2 soit pris en compte*/
}

#wa_page .bonplan h2{/* si pas #wa_page text-align et color ne marchent pas*/
 display:block;/*pour pouvoir centrer*/
 margin-top:0.4em;
 text-align:center;
 background-color:orange;
 color:var(--bleu-af);
}

.bonplan .wa_bouton_2{
 background-color:orange;
}

/*messages***************/

.boite_mes_user, .boite_mes_autre{
 float: right;
 width:70%;
 margin-top:0.8em;
 margin-right:0.8em;
 border-radius:0.15em;
 padding:1em;
 background-color:LightBlue;
 color:#333333;
}

.boite_mes_autre{
 float: left;
 margin-left:0.8em;
 border-radius:0.15em;
 background-color:Wheat;
 color:#333333;
}

#wa_page .boite_mes h1, #wa_page .boite_mes_user h1, #wa_page .boite_mes_autre h1{
 text-align:left;
 font-size:0.8em;
 margin-top:-0.5em;
 margin-bottom:1em;
 margin-left:-0.5em;
 font-weight:lighter;
}

#wa_page .boite_mes h1{
 color:DarkTurquoise;
}

.boite_mes .texte{
 padding:0.5em;
 background-color:lightgray;
}

/*planning_maj***************/

.wa_item_form .item_form_code_ville{ 
 width:3em;
 margin-top:0.5em;
 margin-right:1em;
}

/* paie ***************/

.paie_bulletin table{
 background-color:white;
 border-collapse:collapse;
 border: 2px solid black;
// margin:0 0.8em 0 0.8em;
}

.paie_bulletin table td{
 border-left: 2px solid black;
 border-right: 2px solid black;
 text-align:right;
 padding-top:0.3em;
 padding-bottom:0.3em;
 line-height:0.9em;
}

/* cf. small tout en haut
.paie_bulletin table td small, .paie_ep4 table td small{
 font-size:10px;
}
 */

.paie_bulletin td:first-child{
 text-align: left;
}

.paie_bulletin table td:nth-child(2){
 text-align:left;
}

.paie_bulletin table th{
 color:white;
 background-color:var(--bleu-af);
 font-weight:normal;
 text-align:center;
 padding:0.2em;
}

.paie_ep4{
 overflow: auto;
}

.paie_ep4 table{
 padding:0;
 border:1pt solid var(--bleu-af);
} 

.paie_ep4 td, .paie_ep4 a, .paie_ep4 b, .paie_ep4 b u, .paie_ep4 th, .paie_ep4 span, .paie_ep4 button{
 font-size:14px;
 text-align:right;
 white-space: nowrap;
}

.paie_ep4 button{
 text-decoration:underline; 
}

.paie_ep4 div{
 font-size:14px;
}

.paie_ep4 td:first-child{
 text-align: left;
}

.paie_ep4 td, .paie_ep4 th{
 border-right:1pt solid var(--bleu-af);
}

.paie_ep4 th{
 text-align:center;
}

.paie_ep4 tr:nth-child(odd){
 background-color:lightgray;
}

.paie_ep4 a{
 color:var(--bleu-af);
 text-decoration:underline;
}

/* tab_trajets *************************/

.tab_trajets table{
 border-collapse:collapse;
}

.tab_trajets th{
 padding:0.4em;
 border-bottom:2px solid;
}

.tab_trajets tr td{
 padding:0.4em;
}

.tab_trajets tr:nth-child(even){
 background-color:white;
}

/* planning *************************/

.plan_container{// pour avoir une marge mini avec les smartphones
 margin:0;
 padding-left:0.2em;
 padding-right:0.2em;
 text-align:left;
}

.plan_rot, .plan_sol, .plan_repos, .plan_ca, .plan_arret{
 margin:auto;
 margin-top:0.2em;
 margin-bottom:0;
 max-width:27em;
 border:1px solid darkgray;
 border-radius:0.2em;
}

.plan_jour{
 padding-top:0.3em;
 padding-bottom:0.3em;
 padding-right:1em;
 padding-left:1em;
}

.plan_texte{
 padding-top:0.5em;
 padding-bottom:0.5em;
 padding-right:1em;
 padding-left:1em;
}

.plan_rot .plan_jour{
 background-color:#4390d6;
 color:white;
}

.plan_rot .plan_texte{
 background-color:#6888af;
 color:white;
}

.plan_sol .plan_jour{
 background-color:#d96861;
 color:white;
}

.plan_sol .plan_texte{
 background-color:#f8dadc;
 color:#030502;
}

.plan_repos .plan_jour{
 background-color:#66C84D;
 color:white;
}

.plan_repos .plan_texte{
 background-color:white;
 color:#66C84D;
}

.plan_ca .plan_jour{
 background-color:#406539;
 color:white;
}

.plan_ca .plan_texte{
 background-color:white;
 color:#406539;
}

.plan_arret .plan_jour{
 background-color:#dfcb46;
 color:white;
}

.plan_arret .plan_texte{
 background-color:white;
 color:#dfcb46;
}

.plan_aujourd{
 display:inline-block; 
 background-color:red;
 color:white;
 padding-left:0.5em;
 padding-right:0.5em;
 border-radius:2em;
}

.plan_instruction{
 display:inline-block; 
 float: right;
}

.vsols_modrot_aj{
 color:blue;
}

.vsols_modrot_sup, .modrot_sup small{
 color:blue;
 text-decoration : line-through;
}

.plan_modrot_aj{
}

.plan_modrot_sup, .modrot_sup small{
 font-style : italic;
 color:darkgray;
}

/* jps *************************/

.jps_cdb_vol{
 overflow: auto;
}

.jps_cdb_vol{
 padding-top:0.5em;
 padding-bottom:0.5em;
}

.jps_cdb_vol table{
 background-color:whitesmoke;
 color:var(--bleu-af);
 border-collapse : collapse;
}

.jps_cdb_vol a, .jps_cdb_vol button{
 text-decoration:none;  
 color:var(--bleu-af);
 position:relative;/*pour wa_pastille*/
}

.jps_cdb_vol tr:nth-child(odd){
 background-color:lightgray;
}

.jps_cdb_vol table td{
 padding-top:0.5em;
 padding-bottom:0.5em;
 padding-left:0.5em;
 padding-right:0.5em;
 white-space: nowrap;
}

.jps_cdb_vol table tr td:first-child{
 padding-left:1em;
}

.jps_cdb_vol table tr td:nth-last-child(2){
 padding-right:1em;
 text-align:center;
}

.jps_cdb_vol table tr span{
 display:inline-block;
 min-width:1.25em;
 border-radius:1em; 
 background-color:red;
 color:white;
 text-align:center;
}

.jps_cdb_vol table .jps_cdb_sel{
 display:none;
}