/* style.css Sigisbert Renardet TP le petit commerce */

* {
	font-family: 'Open Sans', Arial, sans-serif;
	
}	
.contenu-page{
	padding-top: 60px;
	background-color: #eae8e2;
}

li {
    font-size: 20px;
    
} 


.footer{
background-color: #525252;
padding-bottom: 10px;
}

.footer_ul_amrc li a:hover{ color:#fff; text-decoration:none;}
.fleft { float:left;}
.padding-right { padding-right:10px; }

.footer_ul2_amrc {margin:0px; list-style-type:none; padding:0px;}
.footer_ul2_amrc li p { display:table; }
.footer_ul2_amrc li a:hover { text-decoration:none;}
.footer_ul2_amrc li i { margin-top:5px;}

.bottom_border { border-bottom:1px solid #323f45; padding-bottom:20px;}
.foote_bottom_ul_amrc {
	list-style-type:none;
	padding:0px;
	display:table;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
}
.foote_bottom_ul_amrc li { display:inline;}
.foote_bottom_ul_amrc li a { color:#999; margin:0 12px;}

.social_footer_ul { display:table; margin:15px auto 0 auto; list-style-type:none;  }
.social_footer_ul li { padding-left:20px; padding-top:10px; float:left; }
.social_footer_ul li a { color:#CCC; border:1px solid #CCC; padding:8px;border-radius:50%;}
.social_footer_ul li i {  width:20px; height:20px; text-align:center;}


#couleur-fond{
	padding-top: 20px;   
	padding-bottom: 30px;
	background-color: #adadad;
}

.text-center > a{
	color: #212529;
}

/* slide image index */

.diapo{
  position: relative;
  overflow: hidden;
}

#nav-droite, #nav-gauche{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 3em;
}

#nav-droite{
  right: 20px;
}
#nav-gauche{
  left: 20px;
}

.elements{
  display: flex;
  transition: 1s linear;
}

.element{
  flex: 1 0 100%;
  position: relative;
}

.element > img{
  width: 100%;
}

.caption{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: rgba(255,255,255,0.4);
  padding: 30px;
}
.titre-site, .titre-collection, .titre-homme, .titre-femme{
font-family: 'Meie Script', cursive; 
text-align: center;
padding:15px 15px;
}

/* catégorie homme et femme */

.categorie {
  background-color:#fff;		
  width: 80%;
  /* min-width: 200px; */
  max-width: 1000px;
  margin: 20px auto;
  padding:10px;
  box-sizing: border-box;
}
h1{
  padding:0 20px;
}
p{
  text-align:justify;
}
.textes-index{
  display : flex;
}
.colonne{
  width:50%;
  padding:20px;
  box-sizing: border-box;
}
@media screen and (max-width: 768px){
  body {
    width:100%;
    min-width: 0px;
  }
  .colonne{
    width: 100%;
  }		
  .textes-index{
    display : block;
  }
}

.titre-h2{
  text-align: center;
}

.page-standard{
margin: 400px;
}

#icontenu{
text-align: center;
}

.page-standard-media{
margin: 60px;
}

#icontenu-text, #text-cat-femme{
text-align: justify;
margin:20px;
}

#mentions{
  text-align: center;
}

.h4-coach{
font-style: italic;
}
.font-prix{
font-size: 18px;

}
/* Categorie homme & femme  */
/* .card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 3;
  }
  @include media-breakpoint-only(xl) {
    column-count: 3;
  }
} */


/* Avis clients */

/* Par défaut, une étoile est en gris,
   avec un padding et un curseur en forme de main. */
   .fa-star {
    color: gray;
    cursor: pointer;
    padding: 0.0625rem;
  }
  /* Si elle porte en plus la classe '.gold', elle sera en jaune. */
  .fa-star.gold {
    color: crimson;
  }
  
  /* Le parent global '.rating' positionne le groupe des étoiles et le lien en colonne */
  .rating {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
    /* Le groupe '.stars' positionne les étoiles
       les unes à côté des autres sans espacements. */
    .stars {
      display: inline-flex;
      justify-content: center;
      font-size: 1em;
    }
  
    /**
     * Et là opère la magie du ':hover' !
     */
  
    /* A l'état :hover sur le parent '.rating',
       on force TOUTES les étoiles à passer en jaune. */
    .stars:hover .fa-star {
      color: crimson;
    }
    /* Et si la souris survole une étoile en particulier,
       on sélectionne toutes les étoiles qui sont APRÈS celle-ci
       grâce à l'opérateur '~' et on les force en GRIS */
    .stars .fa-star:hover ~ .fa-star {
      color: gray;
    }
  
  /******************************************************************/
  /* style pour la démo */
  html { margin-top: 2em; text-align: center; font-family: 'Droid Sans', sans-serif; font-size: 1.4rem; }
  a { color: crimson; font-weight: 600; transition: all 0.8s cubic-bezier(.14,1.36,.5,.88); display: inline-block; }
  a:hover { transform: scale(1.3) }
  /******************************************************************/


.titre-article{
text-align: center;
font-style: italic;
}

/* avis client tableau */
table,
td {
    border: 1px solid #333;
}

thead,
tfoot {
    background-color: #333;
    color: #fff;
}

.avis{
text-align: center;

}
table{
margin: 0 auto;
}

#note  {
margin: 40px 0px;
}

/* panier */
.font-panier{
font-size: 26px;
}

.presentation{
margin: 0 80px 80px 80px;

}

.presentation{

  float:left;
}

.film{
margin:20px;

}