/*
    Styles CSS pages web vCards.
*/

/*--------------------------------------------------------------------------------------------------------------*/
/*--    DEFINITION DES BANNIÈRES ET BANDEAUX DE L'APPLICATION                                                                       
/*--
/*--    Dans la première version, ne contient que le bandeau de navigation de la page d'accueil 
/*--    e
/*--    
/**/

/* BANDEAU DE NAVIGATION - PAGE D'ACCUEIL*/
.vhead-home { box-sizing:border-box; height:152px; width:100%; padding-top:20px; background-color:#fff;  }
.vhead-home * { box-sizing:border-box; }
.vhead-home-box   { width:100%; max-width:760px; margin:0 auto; display:flex; display:-ms-flexbox; justify-content: space-around; -ms-flex-pack:distribute; flex-wrap: nowrap; -ms-flex-wrap: nowrap; }

/* Affichage des éléments contenu dans le bandeau */
.vhead-home-item  {position:relative; width:140px;  }
.vhead-home-item:last-child  {  margin-right:0;    }
.vhead-home-item[data-item-selected] .vhead-home-item-image { border:2px solid #666; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; }
.vhead-home-item[data-no-item] .vhead-home-subtext {display:none;}
/* Ajustement des textes de chaque élément du bandeau */
.vhead-home-text  {display:block; line-height:19px; font-size:16px; color:#333; margin-top:10px; text-align:center; white-space:nowrap;  }
.vhead-home-subtext  {display:block; line-height:14px; font-size:12px; color:#333; margin-top:2px; text-align:center; white-space:nowrap;  }
/* Ajout de la puce à la gauche du texte principale */
.vhead-home-item-text { text-align:center;}
.vhead-home-text { position:relative;display:inline-block;  }
.vhead-home-item:not([data-no-item]) .vhead-home-text:before { content:""; position:absolute; top:calc(50% - 3.5px); left:-13.5px;  width: 7px; height: 7px; background: #fff; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
 
/* Ajustement des images SVG de chaque élément du bandeau */
.vhead-home-item-image {display:flex; display:-ms-flexbox; align-content:center; align-items:center; -ms-flex-align: center;height:70px; width:70px; margin-left:auto; margin-right:auto; border:none; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; background:#f7f7f7;}
.vhead-home-item-image  svg { width:35px; height:35px; margin:auto; }
.vhead-home-item-active  { position:absolute; margin-bottom:2px; }
.vhead-home-item-active svg { width:140px; height:8px; margin:4px auto 0 auto; }

/* Ajustement responsive */
@media screen and ( max-width: 768px ) {
    .vhead-home {  height:119px; padding-top:15px  }
    .vhead-home-box {  width:540px;  }
    .vhead-home-item-image { height:50px; width:50px;}
    .vhead-home-item-image  svg { width:23px; height:23px;  }
    .vhead-home-item-active { display:none; }
    .vhead-home-text  { line-height:16px; font-size:14px; margin-top:10px;}
    .vhead-home-subtext  { line-height:10px; font-size:9px; margin-top:5px;}
}
@media screen and ( max-width: 540px ) {
    .vhead-home {  height:165px; padding-top:10px;  }
    .vhead-home-box {  flex-wrap:wrap; -ms-flex-wrap: nowrap; width:320px; justify-content:flex-start; -ms-flex-pack:start; }
    .vhead-home-item  {padding-bottom:12px; width:33.33%;  }
    .vhead-home-item-image { height:35px; width:35px;}
    .vhead-home-item-image  svg { width:22px; height:22px;  }
    .vhead-home-text  { line-height:14px; font-size:12px; margin-top:5px;}
    .vhead-home-subtext  { margin-top:2px;}
}