:root{
    --marge : 20px;
    --couleur1 : #3789c0 ;
    --largeur-page : 1280px;
    --largeur-page-ecran-pc-standard : 720px;
}
@keyframes effet_vertical {
    0% {
    transform: translateY(-100%);
    }
    100% {
    transform: translateY(0);
    }
}
body {
    margin: 0px; 
    padding: 0px;
    font-family : arial ;
    background: #ebf3f9;
    line-height: 150% ;
}
.droite {
    position:absolute;
    right:0px;
}
.centrer {  
    margin : 0 auto ; 
}
.gauche {  
    text-align : left ; 
}
.centrer_vertical {
    /* centrer verticalement */
    display:flex;   
    align-items:center;
}

.hautdepage {
    position:fixed;
    width:100%;
    top:0px;
    z-index:1;
}
.entete {
    height : 100px ;
    background: var(--couleur1) ;

    font-size:28px;
    color:white;

    /* centrer verticalement */
    display:flex;
    align-items:center;
    /* centrer horizontalement */
    text-align: center;
}
.entete-element {
    padding-left : 10px ;
    padding-right : 10px ;
}

#entete-slogan {
    font-size: 20px;
}
#entete-rdv {
    font-size: 18px;
}
#entete-rdv a {
    color : white ;
    text-decoration : none ;
}
.menu_horizontal {
    background: white ;
    height: 50px ;
    border-bottom : solid 1px #e7f4fc ;	
}

.menu_horizontal li {
    font-size: 18px;
    padding-left : 10px;
    padding-right: 10px;
    display : inline ;
}

.menu_horizontal a {
    color : gray ;
    text-decoration : none ;
}

.decaler_v {
    height : 150px ;
}

.cadre {
    width : var(--largeur-page) ;
    background : white ;
    margin-top: var(--marge);
    padding : var(--marge) ;
    border-radius: 10px;
    box-shadow: 2px 4px 2px 2px #e0e8ed;
}
.cadre a {
    color : gray ;
    font-size : 20px;
    font-weight : bold ;
}

.sous-cadre {
    background : white ;
    padding : var(--marge) ;
    border-radius: 10px;

}

.basdepage {
    margin-top: var(--marge);
    background: #3789c0 ;
    padding : var(--marge) ;
    text-align : center ;
    color : white ;
}

.basdepage a {
    color : white ;
    text-decoration: none;
}
.praticien {
    display : inline-block ;
    width : 42%;
    background : #eef4f8 ;
    text-align : center ;
    padding-left: var(--marge) ;
    padding-right: var(--marge) ;
}

.colonne {
    margin-top: var(--marge);
    margin-left: var(--marge);
    display : inline-block ;
    width : 42%;
    background : white ;
    text-align : left ;
    vertical-align:top;
    padding-left: var(--marge) ;
    padding-right: var(--marge) ;
}
.colonne img {
    width:100%;
}

.praticien_photo {
    text-align : center ;
}

.contact_colonne {
    margin-top: var(--marge);
    margin-left: var(--marge);
    display : inline-block ;
    width : 30%;
    background : white ;
    vertical-align : top ;
}

.contact_colonne a {
    font-size : 16px;
    font-weight: normal;
}

.bouton {
    display : inline-block ;
    background : var(--couleur1) ;
    padding : 10px ;
    border-radius: 10px;
    color:white;
}

.bouton a {
    color : white ;
    text-decoration : none ;
    font-size : 16px ;
    font-weight : normal ;
}

img {
    vertical-align : middle ;
}
/* hack pour éviter que l'ancre ne soit pas au top:0px (caché par l'entête en position fixed) */
#cabinet_infirmier:before  { display: block; content: " "; margin-top: -250px; height: 250px; visibility: hidden; }
#equipe_infirmier:before   { display: block; content: " "; margin-top: -200px; height: 200px; visibility: hidden; }
#contact_infirmier:before  { display: block; content: " "; margin-top: -190px; height: 190px; visibility: hidden; }
/* fin hack ancre */

.titre1 {
    font-size : 26px;
    font-weight: bold;
    color : gray ;
}
.titre2 {
    font-size : 18px;
    font-weight: bold;
    color : gray ;
}
.label {
    font-weight: bold;
    color : gray ;
}

.champ {
    color : gray ;
}
.formulaire {
    width:calc(var(--largeur-page) - 600px);
    text-align : center;
    margin-left:auto ;
    margin-right:auto;
    line-height:25px;
    color:gray;		
    padding : 20px;	
    padding-top : 40px;
    padding-bottom : 60px;	
    background: white;
    border : solid 1px gray ;
    box-shadow: 2px 4px 2px 2px #e0e8ed;
}

.formulaire a {
    color : gray ;
    font-size : 16px;
    font-weight : normal ;
    text-decoration: none ;
}

.formulaire input[type="text"], input[type="tel"], input[type='email'],  input[type='date'],  input[type='time'],  input[type='password'],  input[type='submit']{
    position: relative;         
    border: 1px solid gray; 
    height: 40px; 
    width: 330px;     
    border-radius: 5px;
    margin-top : 10px;
    margin-bottom : 10px;    
}
.formulaire textarea {
    position: relative;         
    border: 1px solid gray; 
    height: 100px; 
    width: 330px; 
    border-radius: 5px;   
    margin-top : 10px;
    margin-bottom : 10px; 
}    
#map { 
    height:400px;
    z-index:0;
}

#menu-mobile {
        visibility:visible;  
        display: none ;		
}
#menu-mobile img {
    cursor : pointer ;
}


#menu-mobile-detail {  

    position : fixed ;
    visibility:visible;
    display : none ;   
    width : 100% ;
    height : 100% ;
    top : 100px ;
    left: 0px;
    z-index : 10 ;

    text-align:center;
    font-size:16px;	
    line-height: 40px;
    background:#eef4f8;

    animation: 1s ease-out 0s 1 effet_vertical;  /* effet au chargement */
}
#menu-mobile-detail ul {
    margin-left: 0;
    padding-left: 0;
}



#menu-mobile-detail li:hover {
    display:block ;
    visibility:visible;
    width:100%;
    background:rgba(255, 255, 255, 0.5);	
}

#menu-mobile-detail a {
    text-decoration : none ;
    color : var(--couleur1) ;
}
@media screen and (max-width: 1400px) {
    .cadre {
        width:90%;
        margin-left:auto ;
        margin-right:auto;
        padding-left : 20px;			
        padding-right : 0px;	
    }

    .contact_colonne {
        display : inline-block ;
        background : white ;
        font-size : 14px;
    }

    #menu-mobile-detail {  
        visibility:visible; 
        display : none ;   
    }
}

@media screen and (max-width: 930px) {
    .cadre {
        width:90%;
        margin-left:auto ;
        margin-right:auto;
        padding-left : 20px;			
        padding-right : 10px;	
    }
    .colonne {
        width: 90%;            
    }
    .praticien {
        display : block ;
        width : 90%;
        background : #eef4f8 ;
        text-align : center ;
        padding-left: var(--marge) ;
        padding-right: var(--marge) ;
    }
    .contact_colonne {
        display : block ;
        background : white ;
        font-size : 16px;
        width:90%;
    }

    .formulaire {
        width:90%;
    }

    #menu-mobile-detail {  
        visibility:visible; 
        display : none ;   
    }
}
@media screen and (max-width: 640px) {
    .menu_horizontal {
        visibility:visible;  
        display: none ;	
    }

    #entete-telephone {
        visibility:visible;  
        display: none ;		
    }

    #menu-mobile {
        visibility:visible;  
        display: block ;		
    }

    #menu-mobile-detail {  
        visibility:visible; 
        display : none ;   
    }

    .cadre {
        width:90%;
        margin-left:auto ;
        margin-right:auto;
        padding-left : 20px;			
        padding-right : 10px;	
    }

    .colonne {
        margin-left:auto ;
        margin-right:auto;
        padding-left : 0px;			
        padding-right : 10px;
        display : block ;		
        width : 100%;
    }

    .decaler_v {
        height : 100px ;
    }
    .entete {
        font-size:20px;
    }
}