﻿
h1 {
    margin-left:0%;
    margin-top:40px;
    margin-bottom:0px;
}
h3 {
    position:relative;
    margin-top:0px;
    margin-left:3%;
    color:#333333;
    font-size:1.8em;
    font-weight:bold;
}

/* HEADER */

#section_header {
    margin-left:auto;
    margin-right:auto;
    margin-top:-10px;
    width:1450px;
    display:flex;
    flex-direction:column;
    }

#progressbar_contain {
    display:flex;
    justify-content:center;
}
#progressbar {
    position:relative;
    width:600px;
    height:65px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}


.progressbar_item{
    position:relative;
    width:44px;
    height:44px;
    border-radius:22px;
    background-color:var(--mprouge);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:2.0em;
    font-weight:bold;
    color:#ffffff;
}

.progressbar_item_select{
    position:relative;
    width:44px;
    height:44px;
    border-radius:22px;
    background-color:var(--mpbleu);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:2.0em;
    font-weight:bold;
    color:#ffffff;
}

.progressbar_item_label {
    position:absolute;
    top:50px;
    width:100px;
    left:-28px;
    text-align:center;
    font-size:0.55em;
    color:var(--mpbleu);
}

.progressbar_ligne {
    position:relative;
    width:calc(50% - 44px);
    height:2px;
    background-color:var(--mprouge);
}


/* SECTION CARTE: Recherche et liste des agences */

#section_carte {
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    width:1450px;
    display:flex;
    height:700px;
}

.carte_agence {
    width:36%;
    padding:1%;
    overflow-y:scroll;
    overflow-x:hidden;
}

#recherche {
    margin-top:-10px;
    width:100%;
    display:flex;
}
.recherche_icone {
    width:100px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.recherche_contain {
    width:calc(100% - 40px);
    display:flex;
    flex-direction:column;
}
.recherche_label {
    width:100%;
    font-size:1.5em;
    font-weight:bold;
    color:#333333;
    }
.recherche_input {
    width:100%;
    display:flex;
    align-items:center;
    }
.recherche_input_label {
    width:200px;
    font-size:1.4em;
    color:#333333;
    }
.recherche_input_input {
       }
.recherche_input_search {
    margin-left:5px;
    margin-top:9px;
    width:50px;
    height:50px;
}

.carte_agence_item {
    width:94%;
    padding:3%;
    }
.carte_agence_libelle {
    font-size:1.5em;
    font-weight:bold;
    color:#333333;
    margin-bottom:5px;
}
.carte_agence_adresse {
    font-size:1.3em;
    color:#333333;
    margin-bottom:5px;
}
.carte_agence_telmail {
    font-size:1.3em;
    color:#333333;
    margin-bottom:5px;
    display:flex;
}
.carte_agence_activite {
    width:100%;
    display:flex;
    align-items:center;
        }
.carte_agence_activite_icone {
    width:40%;
    display:flex;
}
.carte_agence_activite_icone_item {
    width:38px;
    height:38px;
    margin-right:5px;
    background-color:#ffffff;
    border-radius:19px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.carte_agence_activite_texte {
    position:relative;
    width:60%;
    display:flex;
    flex-wrap:wrap;
     }
.carte_agence_activite_texte_item {
    font-size:1.4em;
    color:#333333;
    font-weight:bold;
    margin-right:10px;
}
.carte_agence_choisir {
    margin-left:10%;
    margin-top:10px;
    width:80%;
    height:36px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.5em;
    color:#ffffff;
    background-color:var(--mpbleu);
    border-radius:6px;
    }
.carte_agence_choisir:hover {
    cursor:pointer;
    background-color: var(--mpbleuover);
    color:#ffffff;
}


/* SECTION CARTE: MAP */

.carte_map {
    width:60%;
    height:700px;
}

.maps-container {
    padding-top:20px;
    width:100%;
    height:100%;
   
}

.leaflet-popup-pane .leaflet-popup .leaflet-popup-content-wrapper {
  z-index: -1;
  position: relative;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: var(--mpbleu);
  border-radius: 6px;
}
.leaflet-popup-pane .leaflet-popup .leaflet-popup-content-wrapper .leaflet-popup-content {
  width: 240px !important;
}

.custom-popup-maps {
}

h4 {
    font-size:1.2em;
    font-weight:bold;
    color:#ffffff;
    margin-bottom:5px;
}
.map_adresse {
    font-size:1.1em;
    font-weight:normal;
    color:#ffffff;
}
.map_agence_choisir {
    margin-left:5%;
    margin-top:10px;
    width:90%;
    height:30px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.1em;
    color:var(--mpbleu);
    background-color:#ffffff;
    border-radius:6px;
    }
.map_agence_choisir:hover {
    cursor:pointer;
    background-color: var(--mpfondgris);
}


/* SECTION DONNEES */
#section_donnees {
    margin-left:auto;
    margin-right:auto;
    margin-top:-20x;
    width:1450px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}

#donnees {
    width:40%;
    padding:2% 5% 2% 5%;
    display:flex;
    flex-direction:column;
        }

.donnees_block50 {
    width:380px;
    display:flex;
    justify-content:space-between;
}
.donnees_block {
    width:100%;
    display:flex;
    flex-direction:column;
}

.donnees_label {
    width:100%;
     margin-top:15px;
    font-size:1.3em;
    font-weight:bold;
    color:#333333;
}
.donnees_input {
    width:100%;
    margin-bottom:5px;
      }
.bouton_retour {
    margin-top:20px;
    width:180px;
    height:40px;
    background-color:var(--mpfondgris);
    border-radius:6px;
    font-size:1.8em;
    color:var(--mpbleu);
    display:flex;
    justify-content:center;
    align-items:center;
}
.bouton_retour:hover {
    cursor:pointer;
    background-color:#efefef;
}
.bouton_suivant:hover {
    cursor:pointer;
    background-color:var(--mpbleuover);
}

.bouton_suivant {
    margin-top:20px;
    width:180px;
    height:40px;
    background-color:var(--mpbleu);
    border-radius:6px;
    font-size:1.8em;
    color:#ffffff;
    display:flex;
    justify-content:center;
    align-items:center;
}

#membre {
    width:33%;
    padding-left:5%;
    padding-right:3%;
    background-color:var(--mpfondgris);
    height:auto;
    min-height:600px;
}
.membre_login:hover {
    cursor:pointer;
    background-color:var(--mprougeover);
}

.membre_commentaire {
    margin-top:30px; 
    font-size: 1.4em;
     color: #333333;
}

.membre_argument {
    position:relative;
    margin-top:20px;
    width:95%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.membre_argument_texte {
     font-size: 1.6em;
     font-weight:bold;
     color: #333333;
}
.membre_argument_items {
    width:100%;
    display:flex;
    flex-wrap:wrap;
}
.membre_argument_item {
    width:50%;
    margin-top:20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.membre_argument_item_picto {
    width:100%;
    max-height:30px;
    margin-bottom:10px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.membre_argument_item_texte {
     font-size: 1.6em;
     font-weight:bold;
     color: #333333;
}

@media (max-width: 1530px) {
    #section_header, #section_carte, #section_donnees {left:0.5%;width:99%;flex-wrap:wrap}
}

@media (max-width: 1000px) {
    #section_carte {height:auto}
   .carte_agence {width:99%;overflow:hidden}
   .carte_map {width:99%}
   #donnees {width:99%}
   #membre {width:99%;margin-top:40px;}
  
}

@media (max-width: 700px) {
     #progressbar {width:80%}
}

