@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0');

body {
background-color: #f2f2f2;
font-family: 'Montserrat', sans-serif;
font-size: 17px;
color: #333;
margin: 0;
line-height: 30px;
}
a {
color: #333;
text-decoration: none;
}

#separation {
width: 100%;
height: 1px;
background-color: #ccc;
margin-top: 30px;
margin-bottom: 30px;
}

#erreur_404 {
text-align: center;
font-size: 100px;
text-transform: uppercase;
font-weight: bold;
line-height: 100px;
}
#erreur_404 span {
font-size: 40px;
}

small span {
font-size: 13px !important;
vertical-align: middle;
}

#ico_header {
float: right;
margin-right: 30px;
border: #fff solid 1px;
padding: 10px;
border-radius: 300px;
margin-top: 30px;
}

#ico_header a {
color: #fff;
}
#ico_header span {
vertical-align: middle;
}


#bandeau_titre {
width: 100%;
height: 150px;
text-align: center;
background-image: url('../images/header-titre.jpg');
background-size: cover;
background-position: center center;
margin-top: -20px;
}
.blur_bandeau_titre {
background: rgba(255, 255, 255, 0.2); 
backdrop-filter: blur(8px);
height: 150px;
}

#bandeau_titre h1 {
padding-top: 60px;
color:#fff;
font-size: 30px;
}


#box_home_pre_log ul li {
list-style: none;
margin-left: -40px;
line-height: 30px;
vertical-align: top;
}


#box_home_pre_log .btn {
padding: 15px;
}


li > span { 
float: left;
margin-right: 5px;
clear: both;
}

#checkbox_perso {
display: inline-block;
margin-bottom: 0px;
margin-top: 20px;
}
#checkbox_perso label {
float:left;
text-align:center;
position:relative;
cursor:pointer;
vertical-align: top;
}
#checkbox_perso label span {
color:#FFF;
line-height:30px;
height:auto;
padding:5px 15px 5px 15px;
display:block;
transition:all .2s ease;
background-color: #3a80c8;
opacity:0.4;
margin-right: 2px;
}
#checkbox_perso label input {
display:none
}
#checkbox_perso label input:checked + span {
opacity: 1;
}
#checkbox_perso anonyme {
float: left; 
margin-right: 10px;
}


.txt_votes_vert {
color: #4ABD92;
}
.txt_votes_rouge {
color: #F04345;
}

#votes_vert {
margin-bottom: 0px;
margin-top: 20px;
}
#votes_vert label {
float:left;
text-align:center;
position:relative;
cursor:pointer;
vertical-align: top;
}

#votes_vert label span ico {
vertical-align: text-bottom;
margin-left: 10px;
}

#votes_rouge label span ico {
vertical-align: text-top;
margin-left: 10px;
}


#votes_vert label span {
color: #fff;
line-height: 30px;
height: auto;
padding: 15px 35px 15px 35px;
display: block;
transition: all .2s ease;
background-color: #4ABD92;
opacity: 0.4;
margin-right: 5px;
}
#votes_vert label input {
display:none
}
#votes_vert label input:checked + span {
opacity: 1;
}


#votes_rouge {
margin-bottom: 0px;
margin-top: 20px;
}
#votes_rouge label {
float:left;
text-align:center;
position:relative;
cursor:pointer;
vertical-align: top;
}
#votes_rouge label span {
color: #fff;
line-height: 30px;
height: auto;
padding: 15px 35px 15px 35px;
display: block;
transition: all .2s ease;
background-color: #F04345;
opacity: 0.4;
margin-right: 5px;
}
#votes_rouge label input {
display:none
}
#votes_rouge label input:checked + span {
opacity: 1;
}

#votes_vert ico, #votes_rouge ico {
display: inline;
vertical-align: sub;
margin-right: 10px;
}
#afficher_avatar_votes {
width: 40px;
height: 40px;
margin-top: 3px;
margin-bottom: 3px;
border-radius: 100%;
display: inline-table;
vertical-align: middle;
margin-left: 10px;
margin-right: 20px;
}

#afficher_avatar_votes img {
width: 120px;
height: 120px;
}

ul.votes li {
list-style: none;
margin-left: -40px;
border-bottom: #3a80c8 dotted 2px;
vertical-align: middle;
line-height: 60px;
}

ul.votes li ico { font-size: 25px; }

#total_pour {
background-color: #4ABD92;
width: 100px;
height: 100px;
color: #fff;
font-size: 45px;
display: inline-block;
vertical-align: top;
text-align: center;
line-height: 85px;
border-radius: 100%;
}
#total_pour span, #total_contre span {
font-size: 15px;
margin-top: -55px;
display: block;
}

#total_contre {
background-color: #F04345;
width: 100px;
height: 100px;
color: #fff;
font-size: 45px;
display: inline-block;
vertical-align: top;
text-align: center;
line-height: 85px;
border-radius: 100%;
}

.pour {
background-color: #4ABD92;
color: #fff;
}
.contre {
background-color: #F04345;
color: #fff;
}



.btn_vote {
background-color: #3a80c8;
color: #fff;
border-radius: 3px;
padding: 19px 35px 19px 35px;
border: 0px;
line-height: normal;
font-family: 'Montserrat', sans-serif;
font-size: 17px;
cursor: pointer;
margin-left: 40px;
}

.btn_vote:hover {
opacity: 0.8;
}

.btn_vote span { 
vertical-align: bottom;
margin-right: 5px;
}





.input_txt {
width: 90%;
padding: 10px;
border: #ccc solid 1px;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 17px;
}

.textarea {
width: 100%;
height: 200px;
padding: 10px;
border: #ccc solid 1px;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 17px;
}

.select {
width: 92%;
-webkit-appearance: none; 
-moz-appearance: none;
appearance:none;
text-indent: 0.01px;
padding: 10px;
border:#CCC solid 1px;
background:url(../images/select-arrow.png) no-repeat 98% center;
color:#333333;
border-radius:3px;
background-color:#fff;
font-family: 'Montserrat', sans-serif;
font-size: 17px;
}

.btn {
background-color: #3a80c8;
color: #fff;
border-radius: 3px;
padding: 15px 25px 15px 25px;
border: 0px;
line-height: normal;
font-family: 'Montserrat', sans-serif;
font-size: 17px;
cursor: pointer;
}

.btn:hover {
opacity: 0.8;
}

.btn span { 
vertical-align: bottom;
margin-right: 5px;
}

.btn_mini {
background-color: #3a80c8;
color: #fff;
border-radius: 3px;
padding: 5px 10px 5px 10px;
border: 0px;
line-height: normal;
font-family: 'Montserrat', sans-serif;
font-size: 17px;
cursor: pointer;
}


.btn_rouge {
background-color: #ec5555 !important;
color: #fff !important;
border-radius: 3px;
padding: 15px 25px 15px 25px;
border: 0px;
line-height: normal;
font-family: 'Montserrat', sans-serif;
font-size: 17px;
cursor: pointer;
}
.btn_vert {
background-color: #85d97c !important;
color: #fff !important;
border-radius: 3px;
padding: 15px 25px 15px 25px;
border: 0px;
line-height: normal;
font-family: 'Montserrat', sans-serif;
font-size: 17px;
cursor: pointer;
}
a.btn_rouge, a.btn_vert { 
text-decoration: none;
color: #fff !important;
font-weight: bold;
}

#valide {
background-color:#bcf6b6;
color:#333333;
padding-top:8px;
padding-bottom:8px;
text-indent:10px;
width:100%;
border:#9ade93 solid 1px;
margin-bottom:30px;
}
#alerte {
background-color:#ec5555;
color:#fff;
padding-top:8px;
padding-bottom:8px;
text-indent:10px;
width:100%;
border:#d93d3d solid 1px;
margin-bottom:30px;
}


.contenant_home_pre_log {
background-image: url("../images/header.jpg");
background-size: cover;
width: 100%;
min-height: 120vh;
background-color: #333;
}

#header_home_pre_log {
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
background-color: #333;
color: #fff;
text-align: center;
}
#contenant_header_home_pre_log {
width: 1200px;
height: auto;
margin-left: auto;
margin-right: auto;
}

#contenant {
width: 1200px;
margin-left: auto;
margin-right: auto;
}
#contenant h1 { margin-top: 45px; }

#listing_docs_home {
width: 1200px;
margin-left: auto;
margin-right: auto;
margin-bottom: 60px;
}
#vign_docs {
padding: 10px;
background-color: #3a80c8;
margin-right: 10px;
border-radius: 3px;
font-size: 14px;
max-width: 200px;
display: inline;
color: #fff;
}
#vign_docs span { 
vertical-align: text-bottom;
font-size: 25px;
}


#col2 {
width: 45%;
display: inline-block;
vertical-align: top;
}

#box_home_pre_log {
background-color: #fff;
padding: 20px;
width: 40%;
display: inline-block;
vertical-align: top;
margin-top: 20%;
border-radius: 3px;
margin-right: 30px;
height: 375px;
}
#box_home_pre_log ul {
margin-bottom: 60px;
}

#form_home_pre_log {
background-color: #fff;
padding: 20px;
width: 90%;
display: inline-block;
vertical-align: top;
margin-top: 60px;
border-radius: 3px;
margin-right: 30px;
} 

#listing {
width: 95%;
background-color: #fff;
margin-top: 20px;
padding: 20px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.46); 
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
}
#listing_inner {
display: inline-block;
vertical-align: top;
min-width: 250px;
margin-right: 30px;
}
#listing_inner img { text-align: center; }
#listing_inner picto {
vertical-align: text-bottom;
}

#listing_img img {
max-width: 350px !important;
max-height: 250px !important;
}

#details_actu {
text-align: justify;
}
#details_actu h1 { text-align: left; font-size: 30px; }

#details_actu img {
margin-top: 40px;
max-width: 1200px !important;
max-height: 600px !important;
}

#pagination {
margin-bottom:60px;
margin-top: 40px;
}
a.pagination { 
background-color:#3a80c8;
padding-left:5px;
padding-right:5px;
color:#fff !important;
text-decoration:none !important;
display: inline-block;
padding: 10px;
width: 25px;
text-align: center;
font-weight: bold;
border-radius: 3px;
}
a.pagination:hover {
opacity: 0.8;
}

a.pagination_encours {
background-color:#333;
padding-left:5px;
padding-right:5px;
color:#fff !important;
text-decoration:none !important;
display: inline-block;
padding: 10px;
width: 25px;
text-align: center;
font-weight: bold;
border-radius: 3px;
}


#form {
background-color: #fff;
padding: 20px;
width: 100%;
display: inline-block;
vertical-align: top;
margin-top: 30px;
border-radius: 3px;
height: auto;
margin-left: auto;
margin-right: auto;
}

#form h2 span {
vertical-align: text-bottom;
font-size: 30px;
}

ul.details_actus li {
list-style: none;
margin-left: -40px;
display: inline-block;
margin-right: 80px;
}


ul.details_actus li #afficher_avatar {
width: 70px;
height: 70px;
background-size: cover;
border-radius: 100%;
display: inline-block;
vertical-align: middle;
}

#separation_details_actu {
height: 2px;
margin-top: 30px;
margin-bottom: 30px;
border-bottom: #ccc dotted 2px;
}
#separation_details_actu_vertical {
width: 2px;
height: 50px;
background-color: #ccc;
margin: 30px auto;
}

ul.commentaires li {
list-style: none;
margin-left: -40px;
display: inline-block;
margin-right: 80px;
}

#listing_commentaires {
background-color: #fff;
padding: 20px;
width: 100%;
margin-bottom: 30px;
border-radius: 3px;
height: auto;
margin-left: auto;
margin-right: auto;
transition: 0.5s;
}

#listing_commentaires:hover {
background-color: #fafafa;
transition: 0.5s;
}


/* UPLOAD AVATARS */
.avatar-upload {
  position: relative;
  max-width: 205px;
  margin-top: 50px;
}
.avatar-upload .avatar-edit {
  position: absolute;
  left: 25px;
  z-index: 1;
  top: 10px;
}
.avatar-upload .avatar-edit input {
  display: none;
}
.avatar-upload .avatar-edit input + label {
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-bottom: 0;
  border-radius: 100%;
  background: #FFFFFF;
  cursor: pointer;
  font-weight: normal;
  transition: all 0.2s ease-in-out;
  border: 2px solid #f2f2f2;
/*  margin-left: -32px;*/
  margin-left: 10px;
}
.avatar-upload .avatar-edit input + label:hover {
  background: #f1f1f1;
  border-color: #d6d6d6;
}
.avatar-upload .avatar-edit input + label:after {
  content: "\f040";
  font-family: 'FontAwesome';;
  color: #3a80c8;
  position: absolute;
  top: 5px;
  left: -32px;
  right: 0;
  text-align: center;
  margin: auto;
  margin-left: 42px;
}
.avatar-upload .avatar-preview {
  width: 120px;
  height: 120px;
  position: relative;
  border-radius: 100%;
  border: 2px solid #f2f2f2;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  margin-left: auto;
  margin-right: auto;
}
.avatar-upload .avatar-preview > div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#afficher_avatar {
width: 250px;
height: 250px;
margin-top: 30px;
margin-bottom: 30px;
}

#afficher_avatar img {
width: 120px;
height: 120px;
}

#avatar_commentaires {
width: 100px;
height: 100px;
margin-top: 30px;
margin-bottom: 30px;
border-radius: 100%;
vertical-align: middle;
display: inline-block;
}

/* Début accordeon */
.listing_accordeon {
width: 100%;
margin: 0 auto;
overflow: hidden;
list-style: none;
padding: 0;
}

.listing_accordeon input { display: none; }

.accordeon {
width: 100%;
color: #fff;
overflow: hidden;
border-top: 1px solid #D2D9E2;
}

#accordeon_label {
line-height:50px;
padding-left:10px;
padding-bottom: 15px;
padding-top: 15px;
font-size: 25px;
color: #3a80c8;
font-weight: bold;
cursor: pointer;
transition: 0.5s;
}

#accordeon_label:hover {
color: #000;
}
#accordeon_label span { 
float: right; 
padding-right: 10px;
font-size: 25px;
}
#accordeon_label span:after {
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
content: "";
}

.contenu_accordeon {
height: 0px;
color: #333;
background-color: #fff;
padding-left: 10px;
transition: 0.5s;
}

.contenu_accordeon span {
font-size: 40px;
display: inline;
vertical-align: middle;
}

.listing_accordeon input:checked ~ #accordeon_label {
color: #3a80c8;
}

.listing_accordeon input:checked ~ .contenu_accordeon {
height: auto;
padding-bottom: 20px;
transition: 0.5s;
border:#f2f2f2 solid 2px;
padding: 20px;
}

.listing_accordeon input:checked ~ #accordeon_label span {
transform: rotate(180deg);
transition: 0.2s;
color: #000;
}

.listing_accordeon input:checked ~ #accordeon_label span:after {
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
content: "";
transition: 1s;
}

liste_docs { 
border-bottom: #3a80c8 dotted 1px;
line-height: 45px;
width: 100%;
display: inline-table;
background-color: #fff;
margin-bottom: 10px;
padding: 5px;
}
liste_docs ico { vertical-align: middle; }
/* Fin accordeon */

#section_home {
width: 100%;
background-color: #f2f2f2 !important;
padding: 40px 0px;
margin-bottom: 30px;
margin-top: 0px;

}

#section_home h2 {
color: #3a80c8;
}
#contenant_section_home {
width: 1200px;
margin-left: auto;
margin-right: auto;
}

#listing_albums {
background-color: #fff;
width: 100%;
padding-top:20px;
padding-bottom: 20px;
}

#listing_actu_home {
display: inline-block;
vertical-align: top;
width: 300px;
min-height: 460px;
padding: 20px;
background-color: #fff;
margin-right: 30px;
}
#listing_actu_home img {
max-width: 250px !important;
max-height: 200px !important;
margin-left: auto;
margin-right: auto;
}

ul.infos_auteurs_home li {
list-style: none;
margin-left: -40px;
display: block;
margin-right: 0px;
font-size: 15px;
line-height: 40px;
}


#afficher_avatar_home {
width: 250px;
height: 250px;
margin-top: 30px;
margin-bottom: 30px;
}

#afficher_avatar_home img {
width: 120px;
height: 120px;
}

ul.infos_auteurs_home li #afficher_avatar_home {
width: 50px;
height: 50px;
background-size: cover;
border-radius: 100%;
display: inline-block;
vertical-align: middle;
margin-bottom: 6px;
}
ul.infos_auteurs_home li span { 
margin-top: 10px;
}

/* #prix_annonce { display: none; } */


#upload_img_liste {
display: inline-block;
margin-right: 30px;
vertical-align: top;
}

input[type=file] {
display: none;
}

#box_upload {
max-width: 300px;
display: block;
font-size: 18px;
margin-right: 10px;
vertical-align: middle;
margin-bottom: 20px;
text-align: center;
}



#box_upload img {
max-width: 100px !important;
max-height: 100px !important;
}

#passer_annonce #box_upload span  {
border: #3a80c8 dashed 2px;
text-align: center;
padding: 20px;
font-size: 60px;
border-radius: 10px;
background-color: #fff;
cursor: pointer;
width: 100px;
height: 100px;
color: #c1c1c1;
}


#box_upload span:hover { 
opacity: 0.5; 
cursor: pointer;
}

#vign_offre {
background-color: #E9C48A;
color: #fff;
padding: 5px 10px 5px 10px;
border-radius: 5px;
font-size: 13px;
width: 65px;
font-weight: bold;
text-align: center;
float: right;
}
#vign_vend {
background-color:#8887B5;
color: #fff;
padding: 5px 10px 5px 10px;
border-radius: 5px;
font-size: 13px;
width: 65px;
font-weight: bold;
text-align: center;
float: right;
}
#vign_recherche {
background-color: #51C2C2;
color: #fff;
padding: 5px 10px 5px 10px;
border-radius: 5px;
font-size: 13px;
width: 75px;
font-weight: bold;
text-align: center;
float: right;
}


#vign_offre_details {
background-color: #E9C48A;
color: #fff;
padding: 5px 10px 5px 10px;
border-radius: 5px;
font-size: 13px;
width: 65px;
font-weight: bold;
text-align: center;
margin-top: 50px;
}
#vign_vend_details {
background-color:#8887B5;
color: #fff;
padding: 5px 10px 5px 10px;
border-radius: 5px;
font-size: 13px;
width: 65px;
font-weight: bold;
text-align: center;
margin-top: 50px;
}
#vign_recherche_details {
background-color: #51C2C2;
color: #fff;
padding: 5px 10px 5px 10px;
border-radius: 5px;
font-size: 13px;
width: 75px;
font-weight: bold;
text-align: center;
margin-top: 50px;
}


.txt_vert {
color: #85d97c;
}
.txt_rouge {
color: #ec5555;
}
#listing_inner a ico {
font-size: 45px;
float: left;
margin-right: 30px;
}
ul.listing_annonces li {
list-style: none;
margin-left: -40px;
line-height: 45px;
}
ul.listing_annonces li span  {
line-height: 35px;
}
ul.listing_annonces li h2 { line-height: 30px; }
#listing_inner_contenant {
width: 620px;
}

ul.details_annonces li {
list-style: none;
margin-left: -40px;
line-height: 45px;
display: inline-block;
vertical-align: top;
margin-right: 80px;
}
ul.details_annonces li span { line-height: 45px; }


ul.hashtags li {
display: inline-block;
vertical-align: top;
margin-right: 50px;
list-style: none;
margin-left: -40px;
margin-top: 10px;
}

ul.hashtags li a {
background-color: #333;
color: #fff;
padding: 8px 20px;
}


#afficher_avatar_annonces {
width: 40px;
height: 40px;
margin-top: 0px;
margin-bottom: 30px;
}

#afficher_avatar_annonces img {
width: 120px;
height: 120px;
}

ul.listing_annonces li #afficher_avatar_annonces {
width: 40px;
height: 40px;
background-size: cover;
border-radius: 100%;
display: inline-block;
vertical-align: middle;
margin-bottom: 6px;
}

ul.details_annonces li #afficher_avatar_annonces {
width: 40px;
height: 40px;
background-size: cover;
border-radius: 100%;
display: inline-block;
vertical-align: middle;
margin-bottom: 6px;
}

#photos_details_annonce {
display: inline-block;
vertical-align: top;
margin-right: 30px;
}
#photos_details_annonce img {
max-width: 360px;
max-height: 240px;
}

#form_annonce {
display: none;
margin-bottom: 30px;
border: #ccc dotted 2px;
background-color: #fff;
width: 96%;
padding: 20px;
}
#form_annonce textarea {
width: 95%;
}

#listing_photos {
margin-right: 30px;
background-color: #fff;
margin-bottom: 30px;
padding: 20px;
}
#listing_photos a {
display: inline-block;
vertical-align: middle;
}

#listing_photos img {
width: 200px !important;
height: 200px !important;
object-fit: cover;
margin-right: 30px;
}

#listing_photos_suite {
width: 200px;
height: 200px;
background-color: #000;
color: #fff;
text-align: center;
display: inline-block;
vertical-align: text-bottom;
}

#galerie {
width:  1200px;
margin-left: auto;
margin-right: auto;
}

.grille {
column-count: 3;
column-gap: 0;
}

.photo {
padding: 2px;
position: relative;
}

.photo img {
display: inline-block;
width: 100%;
height: auto;
vertical-align: top;
}

p span {
vertical-align: middle;
}

#listing_galerie_home {
display: inline-block;
vertical-align: top;
background-color: #fff;
margin-right: 30px;
border-right: #ccc dotted 2px;
padding-right: 5px
}

#listing_galerie_home img {
width: 300px !important;
height: 200px !important;
object-fit: cover;
margin-right: 30px;
}

#footer {
background-color: #333;
color: #fff;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
}
#contenant_footer {
width: 1200px;
margin-left: auto;
margin-right: auto;
}
#footer a { 
color: #fff;
font-size: 14px;
}

#footer img {
width: 40px;
height: auto;
vertical-align: middle;
margin-right:10px;
}

#footer_col {
display: inline-block;
vertical-align: middle;
margin-right: 30px;
min-width: 200px;
}

#img_rgpd {
margin-top: 40px;
margin-bottom: 20px;
}

ul.btn_annonces {
margin-bottom: 60px;
}
ul.btn_annonces li {
display: inline-block;
margin-left: -40px;
margin-right: 40px;
list-style: none;
}

#col2 {
width: 40%;
display: inline-block;
vertical-align: top;
margin-right: 110px;
text-align: justify;
}

#formulaire {
width: 100%;
padding: 20px;
background-color: #fff;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.46);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
margin-top: 40px;
}

#formulaire textarea {
width: 90%;
}
ul.contact {
margin-bottom: 40px;
}
ul.contact li {
list-style: none;
margin-left: -40px;
line-height: 30px;
border-bottom: #ccc dotted 2px;
}
ul.contact li:hover {
list-style: none;
margin-left: -40px;
line-height: 30px;
border-bottom: #ccc dotted 2px;
background-color: #fff;
}
ul.contact li span {
float: none;
display: inline;
vertical-align: middle;
margin-right: 10px;
margin-left: 30px;
}
ul.contact li ico {
float: none;
display: inline;
vertical-align: middle;
}

@media only screen and (max-width:468px) {


#ico_header {
float: none;
margin-right: 5px;
border: #fff solid 1px;
padding: 10px;
border-radius: 300px;
margin-top: 0px;
margin-bottom: 50px;
display: inline-block;
}

#ico_header a {
font-size: 15px; 
}

.blur_bandeau_titre {
background: rgba(255, 255, 255, 0.2); 
backdrop-filter: blur(8px);
height: 150px;

}


#footer_col {
display: block;
vertical-align: middle;
margin-right: 0px;
min-width: 90%;
font-size: 14px;
margin-top: 20px;
}

#col2 {
width: 90%;
display: block;
vertical-align: baseline;
margin-right: auto;
margin-left: auto;
text-align: justify;
margin-bottom: 60px;
}
#formulaire {
width: 90%;
padding: 20px;
background-color: #fff;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.46);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
margin-top: 0px;
text-align: left;
}

ul.btn_annonces li {
display: block ruby;
margin-bottom: 30px;
list-style: none;
width: 100%;
}

#contenant_footer {
width: 90%;
}

#box_home_pre_log {
margin-bottom: 20px;
width: 90%;
height: auto;
margin-left: auto;
margin-right: auto;
}

#contenant_home_pre_log {
background-image: url("../images/header.jpg");
background-size: cover;
width: 100%;
background-color: #333;

}

#contenant_header_home_pre_log {
width: 90%;
height: auto;
margin-left: auto;
margin-right: auto;
}
#contenant_header_home_pre_log img {
width: 90%;
height: auto;
}

#contenant {
width: 90%;
margin-left: auto;
margin-right: auto;
padding-bottom: 30px;
}

#header_home_pre_log {
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
background-color: #333;
color: #fff;
text-align: center;
}

#form {
background-color: #fff;
padding: 20px;
width: 90%;
display: block;
vertical-align: top;
margin-top: 30px;
border-radius: 3px;
height: auto;
margin-left: auto;
margin-right: auto;
}

#details_actu img {
margin-top: 40px;
max-width:  100% !important;
max-height: auto !important;
}

#listing_commentaires {
width: 90%;
}

#contenant_section_home {
width: 100%;
margin-left: auto;
margin-right: auto;
}
#listing_actu_home {
display: block;
vertical-align: top;
width: 90%;
min-height: 460px;
padding: 20px;
background-color: #f2f2f2;
margin-right: 0px;
margin-bottom: 20px;
}
#listing_photos {
margin-right: 0px;
background-color: #fff;
margin-bottom: 30px;
padding: 20px;
}
#listing_galerie_home {
display: block;
vertical-align: top;
background-color: #fff;
margin-right: 0px;
border-right: 0px;
border-bottom: #ccc dotted 2px;
padding-right: 0px;
margin-bottom: 30px;
}


#listing_actu_home {
display: block;
vertical-align: top;
width: 90%;
min-height: 460px;
padding:20px;
background-color: #fff;
margin-right: auto;
margin-left: auto;
}

#section_home {
width: 100%;
background-color: #fff;
padding: 40px 0px;
margin-bottom: 30px;
margin-top: -15px;


}
#section_home h2 {
color: #3a80c8;
}
#contenant_section_home {
width: 90%;
margin-left: auto;
margin-right: auto;
}
#photos_details_annonce {
display: block;
vertical-align: top;
margin-right: 0px;
text-align: center;
}
#photos_details_annonce img {
width: 90%;
height: auto;
}

ul.details_annonces li {
list-style: none;
margin-left: -40px;
line-height: 45px;
display: block;
vertical-align: top;
margin-right: 0px;
}
ul.details_annonces li span { line-height: 45px; }
#afficher_avatar_annonces { 
float: left; 
margin-right: 10px;
}
ul.details_annonces li a {
line-height: 75px !important;
}

#vign_offre_details {
background-color: #E9C48A;
color: #fff;
padding: 5px 10px 5px 10px;
border-radius: 5px;
font-size: 13px;
width: 90%;
font-weight: bold;
text-align: center;
margin-top: 50px;
}
#vign_vend_details {
background-color:#8887B5;
color: #fff;
padding: 5px 10px 5px 10px;
border-radius: 5px;
font-size: 13px;
width: 90%;
font-weight: bold;
text-align: center;
margin-top: 50px;
}
#vign_recherche_details {
background-color: #51C2C2;
color: #fff;
padding: 5px 10px 5px 10px;
border-radius: 5px;
font-size: 13px;
width: 90%;
font-weight: bold;
text-align: center;
margin-top: 50px;
}
#vign_recherche_details:before, #vign_offre_details:before, #vign_vend_details:before  {
content:"Type d'annonce : ";
}

#contenant h1 {
font-size: 20px;
}

#listing {
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: #fff;
margin-top: 20px;
padding: 20px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.46);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.20);
height: auto;
}
#listing_img img {
max-width: 100% !important;
max-height: 250px !important;
}

#listing_inner {
display: block;
vertical-align: top;
min-width: 100%;
margin-right: 30px;
}
#listing_inner img { text-align: center; }
#listing_inner h2 { font-size: 18px; }

.textarea {
width: 95%;
height: 200px;
padding: 10px;
border: #ccc solid 1px;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 17px;
}

#vign_offre {
background-color: #E9C48A;
color: #fff;
padding: 5px 10px 5px 10px;
border-radius: 5px;
font-size: 13px;
width: 95%;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
float: none;
}
#vign_offre:before, #vign_vend:before, #vign_recherche:before {
content: "Type d'annonce : ";
}
#vign_vend {
background-color:#8887B5;
color: #fff;
padding: 5px 10px 5px 10px;
border-radius: 5px;
font-size: 13px;
width: 95%;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
float: none;
}
#vign_recherche {
background-color: #51C2C2;
color: #fff;
padding: 5px 10px 5px 10px;
border-radius: 5px;
font-size: 13px;
width: 95%;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
float: none;
}

#listing_inner_contenant {
width: 90%;
}
#form_annonce {
display: none;
margin-bottom: 30px;
border: #ccc dotted 2px;
background-color: #fff;
width: 90%;
padding: 20px;
margin-left: auto;
margin-right: auto;
}
#listing_inner a ico {
font-size: 45px;
float: none;
margin-right: 30px;
}


#listing_photos {
margin-right: 30px;
background-color: #fff;
margin-bottom: 30px;
padding: 20px;
width: 90%;
}
#listing_photos a {
display: block;
vertical-align: middle;
}

#listing_photos img {
width: 100% !important;
height: 200px !important;
object-fit: cover;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;

}

#listing_photos_suite {
width: 200px;
height: 200px;
background-color: #000;
color: #fff;
text-align: center;
display: inline-block;
vertical-align: text-bottom;
}

#galerie {
width: 100%;
}
.grille {
column-count: 1;
column-gap: 0;
}

#listing_docs_home {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-bottom: 60px;
}
#photos_details_annonce img {
max-width: 100%;
max-height: auto;
}


#erreur_404 p {
text-align: center;
font-size: 50px !important;
text-transform: uppercase;
font-weight: bold;
line-height: 50px;
}

#erreur_404 p span {
font-size: 20px;
line-height: 1px !important;
}

#img_rgpd img {
width: 100% !important;
height: auto !important;
}

#votes_vert, #votes_rouge {
margin-bottom: 20px;
}


#votes_vert label, #votes_rouge label {
float: none;
}

#votes_vert label span, #votes_rouge label span { 
display: block;
color: #fff;
}

.btn_vote {
margin-left: 0px;
width: 100%;
}




}