/*.container{
  border: 3px solid green;
  padding: 2px;
}
header{
  border: 2px solid red;
  padding: 3px;
}

#header{
  border: 1px solid black;
  padding: 2px;
}
*/

body {
  font-family: Quicksand, sans-serif;
  margin: 0px;
  background: whitesmoke;
}

strong {
  font-weight: bold;
}

h1 {
  color: rgb(5, 156, 210);
  font-size: 1.5em;
  text-transform: capitalize;
  text-align: center;
}

h2 {
  color: rgb(5, 156, 210);
  font-size: 1.3em;
  text-transform: capitalize;
  text-align: center;
}

h3 {
  color: rgb(5, 156, 210);
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
}

p{
  margin: 5px;
}

#deconnexion{
  display: block;
  position: fixed;
  width: 46px;
  height: 46px;
  border-radius: 50px;
  border: none;
  top: 0;
  right: 0;
  background-image: url(../img/format/deconnection.png);
  background-position: center;
  z-index: 15;
}

#deconnexion:hover{
  cursor: pointer;
}

.container {
  max-width: 64rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  z-index: -2;
}

.logo {
  width: 50px;
  font-size: 50px;
  vertical-align: middle;
  display: block;
}

.warning {
  color: red;
  font-size: 1.5em;
  margin: auto;
}

/*aligner verticalement les symboles*/
.material-icons {
  vertical-align: middle;
}

/*style vignette : ombre floutée noire à droite et bas,  coins arrondis*/
.vignette {
  padding: 2px;
  box-shadow: 8px 9px 10px #333333;
  max-width: 500px;
  /*border: solid 1px black;*/
  border-radius: 20.0px;
  background-color: whitesmoke;
  margin: 10px;
  display: inline-flex;
  flex-direction: column;
  text-align: left;
  justify-content: flex-start;
  align-items: center;
}

img.vignette {
  box-shadow: 0px 0px 0px white;
  padding: 0px;
}

img.vignette:hover {
  cursor: pointer;
  position: relative;
  box-shadow: 8px 9px 10px #333333;
  top: 2px;
  left: 2px;
}

/**************************
      sections
**************************/
.accroche{
  position: relative;
  padding: 0 20px;
}

article{
  position: relative;
}
.modif{
  display: block;
    width: 25px;
    height: 25px;
    /* padding-left: 30px; */
    background-image: url(../img/format/sharp_create_black_small.png);
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    background-position: center;
    background-color: rgb(5, 156, 210);
    color: rgba(5, 156, 210,0);/*rend le texte transparent pour ne pas voir la valeur*/
    position: absolute;
    bottom: 0px;
    right: 0px;
    border-radius: 50px;
}
/*décale le bouton de modif dans le div d'infos*/
#infos .modif{
  bottom: 25px;
  right: 25px;
}

.modif:hover{
  cursor: pointer;
}
/*Nous mettons un padding top pour tenir compte du menu*/
#equipe, #soin, #implant, #plan{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 65px;
  background-attachment: fixed;
  min-height: 100vh;
  width: 90%;
  margin: auto;
}

#equipe .articles, #soin .articles, #implant .articles, #plan .articles {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

/*taille max des colonnes flex*/
#equipe article, #soin article, #implant article, #plan article {
  flex-basis: 30%;
}

figure {
  margin: 5px;
  text-align: center;
/*border:solid 1px green;*/
}

#photo .articles{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /*border: solid 4px red;*/
}

#photo .articles article{
/*  border: solid 2px blue;*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

section#photo figcaption {
  color: white;
  background-color: #C1BFB1;
  margin: 0px 30px;
  border-radius: 15px;
  padding: 5px;
}

section#photo img {
  max-width: 300px;
  min-width: 150px;
}

/*Un fond légèrement différent d'une section à l'autre
.container section:nth-child(odd){
  background-color: #CECECE;
}
.container section:nth-child(even){
  background-color: #C1BFB1;
}*/

#googleMap iframe {
  width:400px;
  height:300px;
}

/*****************************
    liens
*****************************/
/* liens externes*/
a[target="_blank"]::after {
  content: url(../img/format/lien_externe.png);
}


/*Lien top*/
a#gotop {
  display: block;
  width: 30px;
  height: 30px;
  background-image: url(../img/format/upwards-arrow.png);
  background-repeat: no-repeat;
  position: fixed;
  bottom: 25px;
  right: 20px;
}

footer {
  width: 100%;
}

/*****************************************
              petits écrans
******************************************/
@media screen and (max-width: 655px) {
  section#cabinet img {
    Width: 95%;
  }

  /*Affichons ts ls articles ls uns sous ls autres*/
  /*.articles {
        flex-direction: column;
    }*/
  /*taille max des colonnes flex*/
  #equipe article, #soin article, #implant article, #plan article {
    flex-basis: 100%;
  }
}