.desktop-only_2 {
  display: none;
}

@media (min-width: 992px) {
  .desktop-only_2 {
    display: block;
  }
}



.bottom-nav .nav-item {
    color: #777777; /* icônes inactives */
}

.bottom-nav .nav-item.active {
    color: #33CCCC; /* couleur iOS moderne */
    transform: scale(1.1);
}

.bottom-nav .nav-item.active .fa {
    color: #33CCCC;
}


/* --- CONTAINER GLOBAL --- */
.success-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* --- BOÎTE CENTRALE --- */
.success-box {
    background: #ffffff;
    width: 100%;
    max-width: 420px;
    text-align: center;
    padding: 30px 20px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.4s ease;
}

/* --- ICONE CHECK --- */
.big-check {
    font-size: 70px;
    color: #00c851; /* Vert élégant */
    margin-bottom: 10px;
    animation: pop 0.5s ease forwards;
}

/* --- TITRE & TEXTE --- */
.success-box h2 {
    margin: 10px 0;
    font-size: 22px;
    color: #333;
}
.success-box p {
    color: #555;
    font-size: 16px;
    margin-bottom: 25px;
}

/* --- BOUTON --- */
.btn-annonces {
    display: inline-block;
    background: #33CCCC;
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}
.btn-annonces:hover {
    background: #22a8a8;
}

/* --- ANIMATION DU CHECK --- */
@keyframes pop {
    0% { transform: scale(0) rotate(0deg); }
    60% { transform: scale(1.2) rotate(15deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Bloc contenant les deux boutons */
.mobile-auth-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 1px;
  background: transparent;
}

/* Bouton inscription */
.btn-inscription {
  flex: 1;
  text-align: center;
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  background: #33CCCC; /* couleur principale du site */
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: 0.15s;
}

.btn-inscription:hover {
  opacity: 0.9;
}

/* Bouton connexion */
.btn-connexion {
  flex: 1;
  text-align: center;
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  background: #0A3D62; /* bleu nuit moderne et compatible avec #33CCCC */
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: 0.15s;
}

.btn-connexion:hover {
  opacity: 0.9;
}

/* Spécial mobile uniquement */
@media (min-width: 768px) {
  .mobile-auth-buttons {
    
  }
}





.notification_ajout_annonce  img{  
	width: 75;
	height :75px;
	margin-top :20px;
	display :block;
}   
.notification_ajout_annonce  h3{ 
		font-size: 22px;
	font-weight: 400;
}

/* barre top *//* Barre fixe en haut */
.top-bar {
   display : none;
}
/* FIN .....barre top *//* Barre fixe en haut */










/* file d'arriane */
.raproche_mobile_favoris {
	display :none ;
}


.section_breadcrumb {
 width:100% ;margin-top :0px;
	height:90px;
	z-index: 999;
	padding-left :0px;
	padding-top :0px;
	background-color:rgb(237, 240, 240); 
	display :block;
	
}
.breadcrumb {
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin: 0px 0;margin-top :0px;
}

.breadcrumb ol {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.breadcrumb ol li {
    display: flex;
    align-items: center;
}

.breadcrumb ol li + li::before {
    content: "›"; /* Séparateur */
    margin: 0 5px;
    color: #33CCCC;
    font-weight: 400;
}

.breadcrumb ol li a {
    color: #33CCCC;
    text-decoration: none;
    transition: 0.3s;
}

.breadcrumb ol li a:hover {
    text-decoration: none;
}

.breadcrumb ol li.active {
    color: #777;
    font-weight: 400;
}

/* Responsive mobile */
@media (max-width: 480px) {
    .breadcrumb {
        font-size: 13px;
    }
    .breadcrumb ol li a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100px;
        display: inline-block;
        vertical-align: bottom;
    }
}

/* HEADER */
.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 25px;
	 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 999;
}

/* LEFT PART */
.nav-left {
    display: flex;
    align-items: center;
    gap: 60px; /* distance logo -> ajouter */
}

.logo {
    color: #33CCCC;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
}
.logo img 
{
width: 172px;
	height :55px;
	margin-top:3px;
	margin-left:3px;
	padding-bottom :5px ;
	padding-top :5px ;
}

/* ADD BUTTON */
.add-btn {
    background: #33CCCC;
    color: #fff;
    padding: 11px 18px;
    border-radius: 10px;
    text-decoration: none;
    display: flex;
    gap: 6px;
    font-weight: bold;
    align-items: center;
}
.add-btn,
.add-btn span,
.add-btn i {
    text-decoration: none !important;color: #fff;
}
.add-btn:hover {
    background: #279999;
}

 

/* RIGHT MENUS */
.nav-right {
    display: flex;
    align-items: center;
    gap: 75px;
}

/* GENERIC MENU ITEM */
.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
    text-decoration: none;
    font-size: 13px;
}

.icon-wrapper {
    position: relative;
    font-size: 20px;
}

/* BADGES DESKTOP */
.badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background: red;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 50%;
    font-weight: bold;
}

/* AVATAR */
.avatar-btn {
    background: none;
    border: none;
    cursor: pointer;
}

.avatar-wrapper {
    position: relative;
    width: 32px;
    height: 32px;
}

.avatar-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* BADGE ONLINE */
.online-badge {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    background: #00cc44;
    border-radius: 50%;
    border: 2px solid #fff;
}

/* BADGE ONLINE */ 

.favoris-badge {
    position: absolute;
    bottom: 19px;margin-left :20px;
    right: -4px;
	margin-top :3px;
    width: 10px;
	margin-bottom :-5px;
    height: 10px;
    background: red;
    border-radius: 50%;
    border: 2px solid #fff;
}

.messages-badge {
    position: absolute;
    bottom: 25px;margin-left :-8px;
    right: -1px;
    width: 10px;
	margin-bottom :-5px;
    height: 10px;
    background: red;
    border-radius: 50%;
    border: 2px solid #fff;
}

/* DESKTOP ONLY */
.desk-only {
    display: flex;
}

/* MOBILE ONLY */
.mobile-right {
    display: none;
}

/* MENU MOBILE */
.mobile-menu {
    display: none;
    flex-direction: column;
    background: #fff;
    border-top: 2px solid #33CCCC;
    padding: 12px 0;
}

.mobile-item {
    padding: 14px 18px;
    border-bottom: 1px solid #eee;
    position: relative;
    font-size: 16px;
    color: #333;
    text-decoration: none;
}

.mobile-item i {
    margin-right: 8px;
    color: #33CCCC;
}

/* MINI BADGE MOBILE */
.mobile-badge {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    background: red;
    color: #fff;
    padding: 2px 6px;
    border-radius: 25px;
    font-size: 11px;
}

.user_connecter img{
border: 2px solid #33CCCC;
}


/* RESPONSIVE */
@media (max-width: 768px) {
	
	.user_connecter img{
border: 2px solid #33CCCC;
}

.icon-wrapper {
    position: relative;
    font-size: 27px;
	margin-top :3px;
	margin-left :-22px !important;
	color:#777;
}
    .nav-right {
        gap: 25px;
		margin-left :-46px !important;
    }

.nofi_mobile {
    display :none;
 }
	
	/* HEADER */
.top-nav {
  
    padding: 5px 17px;
	height: 70px;
	 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    
}

    .add-btn {
        display: none;
    }

    .desk-only {
        display: none;
    }

    .mobile-right {
        display: flex;
    }

    .nav-right {
        gap: 20px;
    }
	
		.logo img {
	width: 150px;
	height :42px;
	margin-top:0px;
	margin-left :0px ;
	padding-bottom :0px ;
	padding-top :0px ;
}

.avatar-wrapper {
    position: relative;
    width: 34px;
    height: 34px;
}

.avatar-wrapper img {
    width: 95%;
    height: 95%;
    border-radius: 50%;
}


}





.section_navigation {
 width:100% ;margin-top :60px;
	height:200px;
	z-index: 999;
	padding-left :10px;
	padding-top :15px;
	background-color:rgb(237, 240, 240); 
	
}

 
.section_navigation_annonce {
 width:100% ;margin-top :0px;
	height:90px;
	z-index: 999;
	padding-left :10px;
	padding-top :15px;
	background-color:rgb(237, 240, 240);  
	
}
.flt_mobile_wrap {
    display: flex;
    gap: 8px;
    padding: 10px;
    margin: 0 auto;
}

.flt_box_m {
    flex: 1;
}

.flt_select_m {
    width: 100%;
    padding: 10px 8px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 14px;
    color: #333;
    font-family: "Font Awesome 6 Pro", Arial;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="16" height="16" fill="%2333CCCC" xmlns="http://www.w3.org/2000/svg"><path d="M4 6l4 4 4-4z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

.flt_select_m option {
    padding: 6px;
    font-family: "Font Awesome 6 Pro", Arial;
}

.flt_select_m option[disabled] {
    font-weight: bold;
    color: #aaa !important;
}



/* ----------- CONTAINER ----------- */
.section_header_profil {
	margin-top : 20px;
}

.profile-photo {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
	padding-left :25px;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    border-radius: 0px;
    margin-bottom: 20px;
	margin-top : -20px;
}

/* ----------- AVATAR ----------- */
.profile-photo img {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #33CCCC;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ----------- TEXTE ----------- */
.profile-text h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #222;
}

.profile-text p {
    margin: 3px 0;
    color: #555;
    font-size: 14px;
    line-height: 1.4;
}

/* ----------- ACTIONS (boutons) ----------- */
.profile-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
}

.profile-actions .btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: 0.2s ease;
    font-weight: 600;
}

/* Bouton “Suivre” */
.btn-follow {
    background: #33CCCC;
    color: #fff;
}
.btn-follow:hover {
    background: #2ab5b5;
}

/* Bouton “Avis” */
.btn-avis {
    background: #f1f1f1;
    color: #333;
}
.btn-avis:hover {
    background: #e4e4e4;
}

/* Bouton “Contact” */
.btn-contact {
    background: #ffffff;
    border: 1px solid #33CCCC;
    color: #33CCCC;
}
.btn-contact:hover {
    background: #e7fafa;
}

/* ----------- RESPONSIVE ----------- */
@media (max-width: 600px) {
    .profile-photo {
        flex-direction: column;
        text-align: center;
    }

    .profile-photo img {
        margin-bottom: 10px;
    }

    .profile-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
}















.badge {
    background-color: red;
    color: white;
    padding: 3px 7px;
    border-radius: 50%;
    font-size: 12px;
    display: inline-block;
    min-width: 20px;
    text-align: center;
}
.menu-link {
    font-size: 18px;
    text-decoration: none;
    color: black;
}

.badge_home {
    background-color: red;
    color: red;
	height :11px;
	width :11px;
	   border-radius: 50%;
	   margin-top :10px;
	   margin-left :5px;
    font-size: 12px;
    display: inline-block;
	position :absolute;text-align: center;
				overflow: hidden;
			overflow-wrap: break-word;
			overflow-x: hidden;
			overflow-y: hidden;
			 border: 2px solid #fff;
     
}



	.annonce_add,.annonce_add_2 
	{
		display : none;
	}


.section_home
{
	width: 100%;
	height : auto; 
	background: linear-gradient(to bottom, #f8ffff 0%, #f4f4f9 55%);
margin-top : 0px;
padding-bottom  : 30px; 	
}

/* ======= SERVICE CLIENT ======= */
.service-client {
	margin-top : 30px; 	
	margin-bottom :30px;
	background-color :#E9EEF1;
	padding-bottom :20px !important;
	padding-top :20px !important;
	margin-left : 30px;
	margin-right :30px;
	border-radius :20px;
	text-align:center;
	min-height :505px !important;
}
.service-client h2 {
color:#777;
margin-top :15px;
padding-top :25px !important;
font-family: 'Inter', sans-serif;
  font-weight: 600;
}
.service-client p.intro {
    max-width:700px;
    margin:auto;
    font-size:18px;
    color:#777;
	font-family: 'Inter', sans-serif;
    margin-bottom:40px;
}
.contact-grid {
    display:flex; justify-content:center; flex-wrap:wrap; gap:30px;
}
.contact-box {
    background:white;
    width:230px;
    padding:25px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
    transition:0.4s;
    transform:translateY(30px);
    opacity:0;
}
.contact-box i {
    font-size:45px;
    color:#33CCCC;
    margin-bottom:15px;
    transition:0.4s;
}
.contact-box h3,p {
    color:#777;
}
.contact-box:hover {
    transform:translateY(-10px) scale(1.06);
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
	text-decoration : none;
}
.contact-box:hover i { color:#28a4a4; }

/* ===== Steps ===== */
.steps { display:flex; flex-wrap:wrap; justify-content:center; gap:40px; }
.step {
    background:white; padding:30px; border-radius:20px; flex:1 1 220px; max-width:250px;
    text-align:center; box-shadow:0 10px 25px rgba(0,0,0,0.1); transform:translateY(30px); opacity:0;
    transition:0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.step i { font-size:3em; margin-bottom:20px; color:#777; transition:0.5s; }
.step h3 { margin-bottom:15px; font-size:1.2em;  font-weight: 600; }
.step p { font-size:0.98em; color:#555; }
.step:hover i { transform: rotate(20deg) scale(1.2); color:#777; }




/* ===== Témoignages (Parallax + 3 blocs + fond bleu clair) ===== */
.testimonials-section {
    background:#E6FAFA; /* couleur harmonisée avec #33CCCC */
    background-attachment: fixed; /* PARALLAX */
    background-size: cover;
    background-position: center;
    position:relative;
	min-height :505px !important;
		padding-bottom :20px;
	padding-top :20px;
	margin-bottom :35px !important;
}
.testimonials-section h2
{
	margin-top : 30px; 	
	padding-top  : 10px;
	 color :#777;
	 font-family: 'Inter', sans-serif;
	padding-bottom : 30px;
		text-align : center;
		font-weight: 600;
}

.testimonials {
    display:flex; justify-content:center; gap:40px; flex-wrap:wrap; position:relative;
}

.testimonial {
    background:white; padding:30px; width:280px; border-radius:20px; box-shadow:0 10px 25px rgba(0,0,0,0.1);
    display:flex; flex-direction:column; align-items:center; text-align:center;
    transform:translateY(40px); opacity:0; transition:0.8s ease-out;
}
.testimonial:nth-child(1) { transform:translateY(-20px); }
.testimonial:nth-child(2) { transform:translateY(20px); }
.testimonial:nth-child(3) { transform:translateY(-10px); }

.testimonial img {
    width:80px; height:80px; border-radius:50%; object-fit:cover; margin-bottom:15px;
    border:4px solid #33CCCC;
}
.testimonial p { font-size:0.95em; color:#555; margin-bottom:10px; }
.testimonial h4 { margin-top:5px; margin-bottom:10px; color:#1f8f8f; }
.testimonial a {
    display:inline-block; margin-top:10px; padding:8px 20px; background:#33CCCC; color:white; border-radius:50px; font-size:0.9em;
    transition:0.3s;
}
.testimonial a:hover { background:#1f8f8f; }



/* ===== Reasons ===== */
.reasons { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
.reason {
    background:white; padding:25px; border-radius:20px; flex:1 1 220px; max-width:250px; text-align:center;
    box-shadow:0 5px 20px rgba(0,0,0,0.1); transform:translateY(30px); opacity:0; transition:0.6s ease-out;
}
.reason i { font-size:2.5em; margin-bottom:15px; color:#33CCCC; transition:0.4s; }
.reason:hover i { transform: scale(1.3) rotate(-10deg); color:#28a4a4; }
.reason h4 { margin-bottom:10px; }
.reason p { font-size:0.9em; color:#555; }



/* ===== Categories ===== */
.categories { display:flex; flex-wrap:wrap; justify-content:center; gap:25px; text-align:center; }
.category {
    background:white; padding:25px; border-radius:20px; width:150px;  transition:0.5s; cursor:pointer;
    transform:translateY(20px); opacity:0;box-shadow:0 5px 20px rgba(0,0,0,0.1);
}
.category i { font-size:2.5em; margin-bottom:10px; transition:0.5s; color:#33CCCC;}
.category:hover { transform:translateY(-10px) scale(1.05); background:#33CCCC; color:white; }
.category:hover i { color:white; text-decoration : none; }
.categories a:hover  { color:white; text-decoration : none;}
.categories a  { color:#555; text-decoration : none;font-size:16px;}

#categories
{
	margin-top : 30px; 	
	margin-bottom :30px;
}
#categories h2
{
	margin-top : 30px; 	
	padding-top  : 30px;
	 color :#777;
	font-family: 'Inter', sans-serif;
	padding-bottom : 30px;
	text-align : center;
  font-weight: 600;
}

#steps
{
	margin-top : 130px; 	
	margin-bottom :	100px;
	background-color :#F1E9DE;
	padding-bottom :20px;
	padding-top :20px;
	margin-left : 30px;
	margin-right :30px;
	border-radius :20px;
	min-height :505px !important;
}
#steps h2
{
	margin-top : 30px; 	
	padding-top  : 30px;
	 color :#777;
	 font-family: 'Inter', sans-serif;
	padding-bottom : 30px;
		text-align : center;
		font-weight: 600;
	 
}





/* ===== Hero Section ===== */
.hero {
    display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; height:70vh;
    background: rgba(36, 34, 36, 0.68); /* overlay sombre */
    color:white; overflow:hidden; position:relative;
}
.hero::before {
    content:""; position:absolute; top:0; left:0; width:100%; height:100%;
 
    opacity:0.2; z-index:0;
}
.hero h1 {
    font-size:2.8em; margin-bottom:20px; position:relative; z-index:1;
    animation: floatText 3s ease-in-out infinite alternate;
	margin-top :-15px;
}
.hero p {
    font-size:1.3em; margin-bottom:30px; z-index:1; animation: fadeUp 1s ease 0.5s forwards; opacity:0; color:white;
}
.hero button {
    padding:15px 60px; margin:5px; border:none; border-radius:50px; background:#33CCCC; color:white; font-size:1em;
    cursor:pointer; transition:0.4s; z-index:1; position:relative;
	width :250px;
	margin-top :10px;
}
/* Smooth scroll */
body {
    scroll-behavior: smooth;
}



/* Boutons hero avec href */ 
.hero-button {
    display:inline-block;
    padding:15px 35px;
    margin:5px;
    border:none;
    border-radius:10px;
    background:#33CCCC;
    color:white;
	width :250px;
    font-size:1.3em;
    text-align:center;
    cursor:pointer;
    transition:0.4s;
    text-decoration:none;
}
.post_btn {
    color:#33CCCC;
	background:#fff;
}

.hero-button:hover {
    background:#28a4a4;
    color:white;
	text-decoration : none;
}

.hero-button a :hover {
     color:white;
	 text-decoration : none;
}

/* Animations hero (inchangées) */
@keyframes floatText { 0%{transform:translateY(0px);} 100%{transform:translateY(-10px);} }
@keyframes fadeUp { 0%{opacity:0; transform:translateY(20px);} 100%{opacity:1; transform:translateY(0);} }

.hero img {
	position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:0.2; z-index:0;"
}



/* Hero Animations */
@keyframes floatText { 0%{transform:translateY(0px);} 100%{transform:translateY(-10px);} }
@keyframes fadeUp { 0%{opacity:0; transform:translateY(20px);} 100%{opacity:1; transform:translateY(0);} }

















.count_favoris_mobile_user 
{
	color: #33CCCC; margin-left :17px; 
	margin-top : -24px; font-family: "Roboto", sans-serif;
	position : absolute;    font-size: 84px;
	 background: #33CCCC;
    border-radius: 50%;
	padding-left : 4px;
	height : 7px;
	padding-right : 2px;padding-top : 2px;
	 border: 1px solid #fff;		  
}

/* === connexion / inscription ===  */ 
 .section_connexion  {
margin-top: 90px;
margin-bottom: 30px;
}
 .label_connexion  {

		 font-weight : 400;
		 padding-top :0px;
}
.label_connexion a {
		color :#33CCCC;		
}
.boutton_onnexion  {

		background-color :#33CCCC;
		margin-top :-27px;
		border : none;
		color :#fff;
		width: 100%;
		border-radius: .5rem;
		 padding-top: 7px; 
 padding-bottom: 7px;
 font-size: 15px;
 float : center ;
 margin-left : 0px;
}
.boutton_onnexion a :hover{

		background-color :#33CCCC;
		text-decoration : none;
		
}



/* === GENERALE ===  */ 
 .col-sm-9  {
  min-height: autopx;
  max-height: auto;
margin-bottom: -40px;
 margin-left: 7px;
padding-bottom: 0px;
}

/* === 0 MENU ===  */
.nav {
 
float : right ;
margin-left :0px  ; 
}
.navbar-inverse
{
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.20);
}
.navbar-inverse .nav > li.dropdown > a:hover
{
 color: #33CCCC;
}
.navbar-inverse .nav > li.dropdown > a
{
	font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #777;
    padding: 0 20px;
    transition: 0.3s;
height: 50px;
line-height: 50px;
display: block;
padding-bottom: 0px;
padding-left: 7px;
padding-right: 10px;
padding-top: 3px;
text-decoration-style: solid;
}
.navbar .nav >
li.dropdown.open.active > a:hover,
.navbar .nav > li.dropdown.open > a
{
 color: #cf0000;
} 
.menu-fixed-top 
{
  position:fixed
}

ul.nav
{
margin-left: 17px;
} 

.postadd {
   padding-top: 12px; 
   float : right;
   margin-left: 0px;margin-right: 15px;
 
}
.postadd a{
   margin-bottom: 310px; 
 background-color: #33CCCC;
 padding-top: 11px; 
 padding-bottom: 11px;
 padding-left: 4px;
padding-right: 10px;
color: #fff;
font-weight: 600;
border-radius:10px;
font-family: "Roboto", sans-serif;  
}
.postadd span
{
	font-size: 14px;
} 
.postadd a:hover{ 
color: #fff;
text-decoration : none;
 background:#28a4a4;
}
.dropdown span
{	
	
	color: #777;font-size: 16px;
	margin-top : 5px;
	padding-left :5px;
}

.dropdown i
{
	color: #33CCCC;
	font-size: 22px;
	margin-top :15px;
	padding-top :2px;
}  
.navbar-toggle 
{
 color: #222;
 background-color: #33CCCC;
}
.navbar-toggle:hover{background-color:#33CCCC;}
.navbar .nav > li.dropdown > a
{
	font-size: 14px;
font-weight: 700;
height: 50px;
line-height: 50px;
font-weight: 700;
display: block;
padding-bottom: 0px;
padding-left: 13px;
padding-right: 13px;
padding-top: 0px;
text-decoration-style: solid;	
}
.navbar {
 
 border-bottom : none ;
}

.menu11  a:active {
	 color: #555;
 background-color: #E7E7E7;
}

/*-- le css de la partie image du logo masolo21 et le menu1 --*/
.navbar-header img 
{
width: 172px;
	height :55px;
	margin-top:3px;
	margin-left:3px;
	padding-bottom :5px ;
	padding-top :5px ;
}
/*  Dropdown menu*/
.navbar-header 
.navbar-toggle .icon-bar {
    background-color: #fff;
}
.nav.navbar-nav > li:hover > ul.sub-menu{
  display: block;
  -webkit-animation: fadeInUp 400ms;
  -moz-animation: fadeInUp 400ms;
  -ms-animation: fadeInUp 400ms;
  -o-animation: fadeInUp 400ms;
  animation: fadeInUp 400ms;
}
ul.sub-menu {
	position: absolute;
	top: 30px;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	list-style: none;
	padding: 0;
	margin: 0;
	width: 220px;
	-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
	display: none;
	z-index: 999;
}
.dropdown ul.sub-menu li .active{
  color: #FDB45E;
  padding-left: 0;
}
.navbar-nav li ul.sub-menu li{
  padding: 10px 20px 0 ;
}
.navbar-nav li ul.sub-menu li:last-child{
  padding-bottom: 20px;
}
.navbar-nav li ul.sub-menu li a{
  color: #fff;
}
.navbar-nav li ul.sub-menu li a:hover{
    color: #FDB45E;
}

.fa-angle-down{
  padding-left: 5px; 
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
  
.menu_mobile_abonnement {
  display : none; 
}
.fa {

width: 28px;
    height: 28px;
	text-align: center;
}
/* === FIN MENU ===  */ 

/* === 1 Slider ===  */
 .espace_slider 
 {
	margin-top : 419px;
 }
 .col-xs-recherche_annonces_home img 
 {
	width: 100%;
	height:340px;
	object-position : center;
	object-fit : cover;
 }
 .col-xs-recherche_annonces_home 
 {
	width:100% ;height:270px;	
	float:left;
	margin-left :0px;
	margin-left: 0px;  
	margin-right: 0px; 
	margin-top: -359px;
	margin-bottom: 32px;font-family: "Roboto", sans-serif;
 }
 .editor_recherche_annonces 
 {
	position:absolute;
	opacity :1222;
	background:rgba(36, 34, 36, 0.68);
	width: 100%; margin-right: 10px; 
	height : 340px ; margin-top: -340px;font-family: "Roboto", sans-serif;
 }
 .section-intro .main-text .sub-title 
 {
  font-size: 14px;
  color: #fff;
  padding: 15px 0;
  line-height: 24px;
  text-transform: capitalize;
  margin-bottom: 15px;
 }
  .sub_title_annonce span 
 {
	color: #33CCCC; 
	font-weight: 400;
	font-family: "Tw Cen MT", sans-serif;
	padding-right :2px;
	font-size: 1.3em;
 }
  .sub_title_annonce p 
  {
	color: #fff;
	font-size: 1.3em;
	font-weight: 400;
	border: none;
	display: block;
	outline: none;
	text-align : center;
	margin-top:0px;
	width: 100%;
	font-family: "Roboto", sans-serif;
 }
  .sub_title_annonce {
	color: #fff;
	border: none;
	display: block;
	padding: 6px 30px;
	outline: none;
	text-align : center;
	margin-top:45px;
	width: 100%;
	font-family: "Roboto", sans-serif;
}
 .sub_title_annonce h2 {
	color: #fff;
	font-size: 2.2em;
	font-weight: 500;
	border: none;
	display: block;
	padding: 6px 30px;
	outline: none;
	text-align : center;
	margin-top:0px;
	width: 100%;
	font-family: "Roboto", sans-serif;
}
 .sub_title_annonce_mobile 
 {
	display: none;
 }
 .search-bar 
 {
	background: rgba(151, 151, 151, 0.33);
	padding: 14px;
	height: 10%;
	margin-bottom: 15px;
    margin-bottom: 15px;
	margin-left: 5px;
	margin-right: 5px;
    border-top-left-radius:3.9rem;
	border-bottom-right-radius: 3.9rem;
	padding: 20px;
 }
  .bouton_recherche
{
 margin-left: 0px;  
 margin-right: 10px; 
 margin-top: 0px; margin-bottom: 0px;
 width: 4%; 
 
 float : right;
 position : absolute;
 
}
.recherche_annonces input[type="select"] 
 {
	color: #fff;
	font-size: 0.875em;
	font-weight: 300;
	border: none;
	display: block;
	padding: 6px 30px;
	outline: none;
	background: #cf0000;
	text-transform:uppercase;
	margin-top:0.5em;
	width: 100%;font-family: "Roboto", sans-serif;
 }
 .form_type_annonce
{
 margin-left: 0px;  
 margin-right: 10px; 
 margin-top: 0px; margin-bottom: 12px;
 width: 100%; 
 float : left;
 text-align : left;color:#33CCCC ;
}
 .form_select
{
 margin-left: 0px;  
 margin-right: 10px; 
 margin-top: 0px; margin-bottom: 0px;
 width: 28%; 
 text-align : center;
 float : left;
} 

 /* === FIN Slider === */
 
/* === 2. MAINCONTEN === */
.section_carte_home img 
{
	width: 75%;
	height :440px;
	display :block;
	margin-left :106px;
	margin-top :0px;
}
.section_carte_home 
{ 
	width: 100%;
	height :530px;
	margin-top :17px;
	display :block;
	margin-left :0px;	
}
  .categorie_mobile 
  {
	display : none;
  }
/* === FIN MAINCONTEN === */

/* === 3. SIDEBAR HOME === */
.user_info input, select, textarea {
  background: #F0F0E9;
  border:0;
  color: #696763;
  padding: 5px;
  width: 100%;
  border-radius: 0;
  resize: none
}


.left-sidebar  
{
 color:#8d9090;
  min-height: auto;
  max-height: auto; 
margin-bottom: -40px;
margin-top: 60px;
padding-bottom: 20px;
 font-family: "Roboto", sans-serif;
} 
.list-group21  
{
 margin-left: 10px;  
 margin-right: 40px; 
 margin-top: -45px; margin-bottom:10px;
 width: 34%; 
  float : left;    
  font-family: "Roboto", sans-serif;
 
}
.list-group21 a:hover 
{
	 
position:relative;
display:block;
padding:1px 1px;
margin-bottom:-1px;
border: none;
font-size: 1.5rem;
font-weight: 500;
text-decoration: none;
    text-align: right;
	color: #33CCCC;
	line-height:22px;
}
.list_regions {
position:relative;
display:block;
padding:1px 1px;
margin-bottom:-1px;
border: none;
font-size: 1.4rem;
font-weight: 500;
text-decoration: none;
text-align: right;
color: #777;
margin-top :15px;
line-height:22px;
}

.list_regions a:hover {
	 
 
	color: #33CCCC;
	 
}
.list-group21_right  
{
 margin-left: 10px;  
 margin-right: 40px; 
 margin-top: -45px; margin-bottom: 10px;
 width: 34%; 
  font-family: "Roboto", sans-serif;
 float : right;
 
}
.list-group21_right a:hover {
	 
position:relative;
display:block;
padding:1px 1px;
margin-bottom:-1px;
border: none;
font-size: 1.5rem;
font-weight: 500;
text-decoration: none;
    text-align: right;
	color: #33CCCC;
	line-height:22px;
}
  .tri_annonce_121 select{
    margin-left :0px; 
	 padding-left :5px; padding-right :5px;  margin-right :0px; 
	 padding-top :0px; margin-bottom :0px;
 width:100%;
 text-align : center; cursor: pointer;
 text-decoration : none;
 list-style: none;
	font-family: "Nanum Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	color:#777;
	font-size: 15px;background-color: #fff;
	text-decoration:none; 
 
}
 .tri_annonce_121 {
    width:100% ;margin-top :5px;
    background-color: #fff ;
    
 border-radius : 5px;
   display :block;
 margin-left :0px;
 padding-top :7px;
 text-align : center;
 margin-bottom : 25px;
 padding-bottom :7px;
 float : left; cursor: pointer;
 margin-right : 15px;border: 1px solid #DADADA;
  
}


 .tri_annonce_121_categorie {
    width:100% ;margin-top :5px;
    background-color: #fff ;
    
 border-radius : 5px;
   display :block;
 margin-left :0px;
 padding-top :7px;
 text-align : center;
 margin-bottom : 25px;
 padding-bottom :7px;
 float : left; cursor: pointer;
 margin-right : 15px;border: 1px solid #33CCCC;
  
}
  .tri_annonce_121_categorie select{
    margin-left :0px; 
	 padding-left :5px; padding-right :5px;  margin-right :0px; 
	 padding-top :0px; margin-bottom :0px;
 width:100%;
 text-align : center; cursor: pointer;
 text-decoration : none;
 list-style: none;
	font-family: "Nanum Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	color:#777;
	font-size: 15px;background-color: #fff;
	text-decoration:none; 
 
}
/* === FIN SIDEBAR HOME === */

 /* === 4. FOOTER === */
 .footer-blurb
 {
	color: rgb(127, 127, 127);
	background-color: rgb(34, 34, 34) ;
	border-top: 4px solid #33CCCC;
}
.footer-blurb li  {
	 margin-left:0px;
	  list-style: none;
	  line-height :26px;
	  
}
.small-print{
	 color: rgb(127, 127, 127);
 background-color: #222;  
 padding-bottom : 1px; 
 padding-top : 18px;
 border-top: 1px solid rgb(130, 130, 130);
margin-bottom : -82px ;
}

.small-print a {
 color: rgb(221, 221, 221);
}
.small-print a:hover {
	color:#fff; 
}
.footer_a a {
  font-size: 15px;
}

/**-le css de la partie qui affiche les infos des cookies--*/
.info_cookies21 {
	margin-top: 80px;
	margin-bottom: -80px;
padding-bottom: -68px;



background-color: rgb(255, 252, 228);


bottom: 0px;
color: rgb(0, 0, 0);
font-family: Arial, Helvetica, sans-serif;

font-size: 12px;


font-weight: 400;
left: 0px;
min-height :35px;
 
padding-left: 8px;
padding-top: 8px;
padding-right: 8px;

width: 100%;
z-index: 99999;

}


.info_cookies21 button{
  
    color: black;
    border: none;
    
    margin-left: 0px;
    cursor: pointer;
    font-weight: bold;color: #33CCCC;
}

.info_cookies21 a:hover {color: #33CCCC; text-decoration-line: inline;}

.info_cookies21 p{
	margin-top: 4px;
margin-bottom: -4px;
}
 
/* === FIN FOOTER === */

 
 /* === LOADER === */
    #loader {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2000;
      transition: opacity 0.6s ease, visibility 0.6s ease;
    }

    #loader.hidden {
      opacity: 0;
      visibility: hidden;
    }

    .spinner {
      width: 60px;
      height: 60px;
      border: 6px solid #ddd;
      border-top: 6px solid #33CCCC;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }
	
	/* === FIN Slider === */





#accept-cookies {
	margin-top: 0px;
	margin-right: 50px;
margin-bottom: -4px;
font-size: 12px;
  display : inline;
 padding-left  : 6px;
padding-right  : 6px; 
background: #33CCCC; 
display : inline-block ;
color: #fff;
 border-radius: 8px;
}


.categorie_mobile_categorie {
    width:40% ;margin-top :0px;
    background-color: #fff ;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
 border-radius : 5px;
   display :block;
 margin-left :0px;
 padding-top :7px;
 text-align : center;
 margin-bottom : 25px;
 padding-bottom :7px;
  
}
  .select_mobile select{
    margin-left :0px; 
	 padding-left :0px; padding-right :0px;  margin-right :0px; 
	 padding-top :0px; margin-bottom :0px;
 width:100%;
 text-align : center;
 text-decoration : none;
 list-style: none;
	font-family: "Nanum Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	color:#202021;
	font-size: 14px;background-color: #fff;
	text-decoration:none;
}


.lazy {
    opacity: 0;border-radius: .5rem;
    transform: scale(0.9);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.lazy.loaded {
    opacity: 1;
    transform: scale(1);
}

/* Barre de navigation en bas */
.bottom-nav {
    display: none;
}
.separateur_menu{
    display: none;
}

.count_favoris_mobile 
{
	color: #33CCCC; margin-left :19px; 
	margin-top : -34px; font-family: "Roboto", sans-serif;
	position : absolute;    font-size: 84px;
	 background: #33CCCC;
    border-radius: 50%;
	padding-left : 4px;
	height : 7px;
	padding-right : 2px;padding-top : 2px;
	 border: 1px solid #fff; 	  
}


/* Style du formulaire */
.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    max-width: 1000px;
    margin: 20px auto;
}

/* Style des groupes */
.filter-group {
    display: flex;
    flex-direction: column;
}

/* Style des labels */
.filter-group label {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

/* Style des select */
.filter-group select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    background: #fff;
    transition: all 0.3s;
}

.filter-group select:focus {
    border-color: #007bff;
    outline: none;
}

/* Style du bouton */
.filter-button {
    padding: 10px 15px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.filter-button:hover {
    background: #0056b3;
}

.cookie-banner button {
    background-color: #f8b400;
    color: black;
    border: none;
    padding: 10px 20px;
    margin-left: 10px;
    cursor: pointer;
    font-weight: bold;
}

.cookie-banner button:hover {
    background-color: #d99600;
}
 .sub_titre_cat_annonce_21 a
{
	margin-left : 11px;
 color: #777;
  width: 100%;
  margin-top :5px;
}
.sub_titre_cat_annonce_21 a:hover {
	
 
	color:#33CCCC; 
}


.menu5_mobile {
 
  display : none;
	 
   margin-left :  11px;
  padding-top : 100px;width: 100%;
 
}

.menu5_mobile a {
 
  display : block;
  display : none;
  font-family: "Roboto", sans-serif;
  font-size: 1.1em;
  margin-top : 0px;
  margin-left : 10px;
  width: 100%;
   
}

.fa-check{
	 color: #33CCCC;
}


.modal,.modal-dialog, .modal-sm,.fade {
 
 background : transparent;
 opacity :2;font-weight: 400;
   
}
.menu4_mobile {
 
  display : none;
   
}

.menu3_mobile {
 
  display : none;
 
}
.menu2_mobile  {
 display : none;
   
}

	.slider_detail_mobile   
		{
			 display : none;
		}
		.slider_detail_mobile img 
		{
			 display : none;
		}
		.sld_mobile  
		{
			 display : none;
		}
		
	
	
	.postadd_21 a 
		{
			 display : none;
		}
		
 
  .header_top {
 
  display : none;
   
}

.menu2_mobile {
 
  display : none;
  
}
 .post_mobile {
  display : none; 
}

 .form_boutton
{ 
 margin-left: 2px;  
 margin-right:0px; 
 margin-top: 0px; margin-bottom: 0px;
 width: 12%; 
 float : left;
 
} 
 .form_boutton button 
{
 margin-left: 2px;  
 margin-right:0px; 
 margin-top: 0px; margin-bottom: 0px;
 
 float : left; background: #33CCCC; color: #fff; border: 1px solid #33CCCC;
 
}


.list_regions2 {
	 
position:relative;
display:block;
padding:1px 1px;
margin-bottom:-1px;
border: none;
font-size: 1.4rem;
font-weight: 600;
text-decoration: none;
    text-align: left;
	color: #777;
	line-height:22px;
	width: 100%;
}

.list_regions2_right {
	 
position:relative;
display:block;
padding:1px 1px;
margin-bottom:-1px;
border: none;
font-size: 1.4rem;
font-weight: 600;
text-decoration: none;
    text-align: right;
	color: #777;
	line-height:22px;
	width: 100%;
}
.list-group21_2 
{ 
 width: 48%;  
 
}


.list-group21_right_2 
{
 width: 48%; 
 
  float : right;
 
 
 
}

.section_carte_home_afrique { 
	 
	width: 80%;margin-left :100px;
	height :540px;
	float:center;
	margin-top :-30px;
	display :block;
		
	
}

.section_carte_home_afrique img {

	width: 90%;
	height :470px;
	display :block;
	margin-left :125px;
	margin-top :5px;
	
}


.liste_pays {
    width: 100%;display :block;
}


.liste_pays a{display :block;
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
	float : right;
	line-height: 27px;
	color:#4183d7;
}

 .container1  {
 background-color:rgb(237, 240, 240);  
 
}


/*====================================================
      responsive design mobile
    ====================================================*/
 
/*-- resplus responsive-design de la partie Dernieres videos @media all and (min-device-width: 280px) and (max-device-width: 480px)  --*/  

@media all and (min-width: 280px) and (max-width: 460px)  
{		 
    /* === LOADER === */
    #loader {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2000;
      transition: opacity 0.6s ease, visibility 0.6s ease;
    }

    #loader.hidden {
      opacity: 0;
      visibility: hidden;
    }

    .spinner {
      width: 60px;
      height: 60px;
      border: 6px solid #ddd;
      border-top: 6px solid #33CCCC;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

 




		 
.dropdown  
{
	color: #33CCCC;
	font-size: 22px;
	margin-top :0px;
	margin-left :-20px;
	padding-top :-25px;
	padding-right :5px;

	
	
	 
} 

.dropdown li  
{
	color: #33CCCC;
	font-size: 22px;
	margin-top :0px;
	margin-left :0px;
	padding-top :-525px;
	background: #33CCCC;
	 
} 
 
		
	
	.footer-blurb{
		 color: rgb(127, 127, 127);
		
 background-color: rgb(34, 34, 34) ;
	border-top: 1px solid #33CCCC;
	
	}
	.small-print{
	 color: #222;
  background-color:rgb(237, 240, 240);    
 padding-bottom : 30px; 
 padding-top : 10px;
 border-top: 1px solid #33CCCC;
	margin-bottom : -82px ;
	 width: 100%; 
}

.small-print a {
	 color: #222;
	  
}
.small-print a:hover {
	 color: #222;
	 text-decoration : none;
}



.separateur_menu {
    display: flex;
	
}
/* Barre de navigation en bas */
.bottom-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #ddd;
    height: 56px;
	padding: 0 16px;
	
}

/* Élément de navigation */
.nav-item {
    text-decoration: none;
    color: #777;
    text-align: center;
    font-size: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Icônes */
.nav-item .icon {
    font-size: 21px;
    position: relative;
	  width: 24px;
  height: 24px;
}
/* Badge de notification */
.badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background: red;
    color: white;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    padding: 3px 6px;
}

/* Icône active */
.nav-item.active {
   
}
	
	
	
	
		.col-xs-22 
		{
			width:100% ;
			float:left;
		}
		
		
		.editor_videos_image img  
		{
			width: 100%; 
			height :120px;
			 
		 
		}
		
		.editor_videos a  
		{
			color: rgb(48, 48, 48);
			font-weight: bold;
			text-decoration:none;
 
			display: block;
			text-align: left;
			width:89%;
	 
			line-height: 21px;
			min-height: 60px;
			max-height: 60px;
	 
	
			box-sizing: border-box;
 
			color: rgb(48, 48, 48);
 
 
 
 
			margin-bottom: 8px;
			margin-left: 10px;
			margin-right: 10px;
			margin-top: 0px;
			max-height: 36.4px;
			overflow: hidden;
			overflow-wrap: break-word;
			overflow-x: hidden;
			overflow-y: hidden;

 
			box-sizing: border-box;
			color: rgb(48, 48, 48);
			font-family: "Roboto", sans-serif;
			font-size: 12px;
			font-weight: 700;
 
			margin-bottom: 8px;
 
			margin-top: 0px;
 
			overflow: hidden;
			overflow-wrap: break-word;
			overflow-x: hidden;
			overflow-y: hidden;
		} 
		
		
		
		
	 
		
		/*-- responsive-design de la partie details de l'article --*/
		.singlepage img 
		{
			float: none;
			width:60%;
			height:138px;
			margin-left : 15px ;
			margin-right :5px ;
		}

		.col-sm-4 
		{
			margin-left : auto ;
			margin-right : auto ;
			width:93% ;
		}

		.col-sm-4 img 
		{
			width: 99%;
			height :130px;
		}


		
		/*-- le responsive de la partie qui affiche les categories de cours.... --*/
		.col_cat_cours 
		{
			margin-left : -10px ;
			margin-bottom : -40px ;
			width:31.64444444444444% ;
			margin-bottom : 15px ;
			float:left ;
			width:93% ;
		}

		.col_cat_cours img 
		{
			width: 99%;
			height :130px;
		}

		.editor_cat_cours a  
		{
			color:#202021; 
			font-size: 0.95em;
			font-weight: bold;
			text-decoration:none;
			margin:8px 0;
			display: block;
			text-align: left;
			width:100%;
			margin-bottom : 4px ;
		}

		.editor_cat_cours p  
		{
			font-size: 0.90em;
			font-weight: bold;
			margin: 0px 0;
			text-align: left;
			margin-bottom : -14px ;
		}

		.editor_cat_cours a:hover 
		{
			color:#cf0000;
		}


	
		/*-- le responsive de la partie toutes les annonces  --*/
		.media_news
		{ 
			background-color: #fff ;
			border-bottom :1px solid rgb(239, 239, 239) ;
			 border-top :0px solid rgb(239, 239, 239) ;
			border-left :0px solid rgb(239, 239, 239) ;
			margin-bottom : 10px  ;height : 155px ;
			margin-left : 0px;
			margin-right : 7px;
			border: 1px solid rgb(239, 239, 239) ;
			padding-left :5px;
			padding-top :5px;
			padding-bottom :5px;
		}
		
		
		.auteur_annonce_2 {
	margin-top : 95px;
 float : left;
 position : absolute ;
 margin-left : 54px;color: black; 
  font-family: "Roboto", sans-serif;
  padding-bottom : 5px;
   font-weight: 400;
   color: black;font-size : 11px;
   
}

.auteur_annonce_2 img {
	float: left;
	width: 20%;
	width: 13px;  
    height: 13px; margin-right : 4px;
	margin-top : 2px;
}
.auteur_annonce_2 span {
	 margin-left : -4px;
	 color: #33CCCC; 
}
 
.auteur_annonce {
	margin-top : 95px;
 float : left;
 position : absolute ;
 margin-left : 54px;color: black; 
  font-family: "Roboto", sans-serif;
  padding-bottom : 5px;
   font-weight: 400;
   color: #4d4d4d; font-size : 11px;

}

.auteur_annonce img {
	float: left;
	width: 20%;
	width: 13px;  
    height: 13px; margin-right : 4px;
	margin-top : 2px;
}
.auteur_annonce span {
	 margin-left : -4px;
	 color: #33CCCC; 
}

		
		
		.media-left  
		{
			background: transparent ;
			width:48%;
			height : 150px;
			margin-top :0px;
			margin-bottom :0px;
			
 
		}
		
		.media-body h6 {
	
		width:110%; 
 position : absolute ;
	
float : left ;
color:#4d4d4d;
margin-left: 0px;
font-size:11px;
margin-top  :82px;		
margin-bottom  :12px;	
 text-align: left;
display :block ;
min-height:10px;
font-family: "Nanum Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 400;

text-decoration-style: solid ;
}
  
.etat_produit {
 color: #4d4d4d; 
 font-family: "Roboto", sans-serif;
 font-weight: 300;
 display : black;
 margin-left : 5px;
 margin-right : 25px;
 position : absolute;
 font-size: 11px;width: 90px;
}
		
		.media-heading h2  {
	
	font-size: 14px;
	font-weight: 500;
	font-family: "Roboto", sans-serif;
	margin: 0px 0;
	overflow-wrap: break-word;
	text-align: left;
	width: 99%;
	 
	
	 
}

.media-heading a  {
	font-family: "Roboto", sans-serif;
	width: 99%;
	 overflow-wrap: break-word;
	color:#222;
	font-size: 14px;
	font-weight: 600;
	padding-right :5px;
	padding-bottom :5px;
	text-decoration:none;
	margin:5px 0;
	display: block;
	text-align: left;
	float: left;
	min-height : 37px;
	max-height : auto;
	 
	
}
.media-heading a:hover {
	
 
	color:#33CCCC; 
}
.media-heading h2 :hover {
	
 
	color:#33CCCC; 
}
.media-heading {
	width:80%;
	overflow-wrap: break-word;
	
	
}
		
 		 
		.media-body h9
		{
			padding: 5px 8px; 
			float : right ;
			color:#33CCCC; 
			margin-left: 10px;
			margin-right: 10px;
			font-size:15px;
			margin-top  :14px;	
			margin-bottom  :9px;	
			
			display :block ;
			min-height:10px;
			font-family: "Roboto", sans-serif;
			font-weight: 700;
			line-height: 18px;
			text-decoration-style: solid ;
			border-radius :30px;
			
			display : none ;
		}
		
		 
		
		.media-body h11 
		{
 
			padding: 0px 20px;
			float : left ;
			color:#000; 
			margin-left: 10px;
			font-size:10px;
			margin-top  :14px;	
			margin-bottom  :9px;	
 
			 
 
			display :block ;
			min-height:10px;
			font-family: "Nanum Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
			font-weight: 400;
			line-height: 18px;
			text-decoration-style: solid ;
			border-radius :30px; 			
		}  
		
		
		
	

		.media-body h7 
		{
			float : left ;
			color: #33CCCC ;
			margin-left: 10px;
			font-size:10px;
			margin-top  :4px;	
			padding-top  :5px;
			padding-bottom  :10px;
			display :block ;
			min-height:10px;
			font-family: "Roboto", sans-serif;
			font-weight: 700;
			line-height: 18px;
			text-decoration-style: solid ;

			 
		}
		
		.media-body h5 
		{
			font-family: "Nanum Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
			float : left ;
			color:#4d4d4d;
			font-weight: 400;
			margin-left: 3px;
			margin-right: 15px;
			font-size:10px;
			margin-top  :-6px;	
			display :block ;
			min-height:10px;
		}
		
		
		
		.media-body h12 
		{
			font-family: "Nanum Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
			float : right ;
			color:#33CCCC;
			font-weight: 400;
			margin-left: 10px;
			margin-right: 10px;
			font-size:10px;
			margin-top  :-5px;	
			display :block ;
			min-height:10px;
		}
		
		
		
		
		.media-body h2 a 
		{
			width:97%;
			margin-left: 10px;	
			margin-bottom  :-5px;	
			margin-top  :-5px;	
			font-size:11px;
		}
		
		
		
		
		
		
		
		
		
 
		
		
		
		
		
		
		.annonce_like   
		{ 
			padding-right: 10px;
			 height :auto ;
			padding-left: 1px;
			padding-bottom: 10px;padding-top: 12px;
			float : right ;
			color:#33CCCC; 
			margin-left: 100px;
			margin-right: 0px;
			font-size:12px;
			margin-top  :14px;	
			margin-bottom  :9px;	
			display :block ;
			position : absolute ;
			min-height:10px;
			font-family: "Roboto", sans-serif;
			font-weight: 700;
			line-height: 18px;
			text-decoration-style: solid ;
			border-radius :30px;
			display : none  ;			
		}

		.annonce_like :hover   
		{
			color:#fff; 
		}

		.annonce_like a :hover   
		{ 
			color:#33CCCC;
		}

		.annonce_like a 
		{ 
			padding-right: 2px;
			padding-left: 10px;
			padding-bottom: 7px;padding-top: 9px; 
			background-color: #e9ecef; border-radius :30px;font-size:9px;
			display : none  ;	
		 	
		}
		
		.annonce_like_mobil21   
		{
			padding-right: 0px;
			padding-left: 0px;
			padding-bottom: 0px;padding-top: 0px;
			float : right ;
			color:#33CCCC; 
			margin-left: 10px;
			margin-right: 10px;
			margin-top  :-14px;	
			margin-bottom  :0px;	
			display :block ;
			min-height:10px;
			font-family: "Roboto", sans-serif;
			font-weight: 700;
			line-height: 18px;
			text-decoration-style: solid ;
			border-radius :30px;	
		}
		.annonce_like_mobil21 span 
		{ 
			padding-right: 7px;
			padding-left: 5px;
			padding-bottom: 1px;padding-top: 0px;
			border-radius :30px; 
			color:#33CCCC;
		 
		}
 
		.annonce_like_mobil21 a 
		{ 
			 
			margin-top  :-14px;
			color: #33CCCC;
		   font-size:12px;
			padding-right: 0px;
			
			padding-left: 0px;
			padding-bottom: 0px; 
		}

		
	 
		
		 
		 
 
		
		
		 
		 
		 /**-le responsive de la partie recherche mobile --*/
		 .postadd_mobile 
		 {
			padding-top: 12px;
			margin-top: -38px; 
			margin-left: 0px;margin-right: 15px;
			width:100%;
		 }
		
		.postadd_mobile a
		{
			margin-bottom: 310px; 
			background-color: #33CCCC;
			padding-top: 13px; 
			padding-bottom: 13px;
			padding-left: 43px;
			margin-left: 18px;
			padding-right: 48px;
			color: #fff;
			border-radius: .5rem;
			width:100%;
		}
		
		 .post_mobile {
 
  display : inline;text-decoration : none;
  
   
}
 
		
		.recherche_avance_mobile {
 
   padding-top: 12px; 
   margin-left: 0px;margin-right: 15px;
 
}
.recherche_avance_mobile a{
   margin-bottom: 310px; 
 background-color: #fff;
 padding-top: 13px; 
 padding-bottom: 13px;
 padding-left: 53px;
padding-right: 48px;
color: #FF6600;
border: 1px solid #FF6600;
 border-radius: .5rem;
 margin-left: 18px;
  
}
.recherche_avance_mobile :hover
{
  
color: #FF6600;
text-decoration : none;
 
  
}


.post_mobile :hover
{
	text-decoration : none;
 }




 /**-le responsive de la partie carte  et region--*/
.section_carte_home { 
	 
	width: 100%;
	height :276px;
	margin-top :-20px;
	display :block;
	display : none;
		margin-left :0px;
		padding-right :3px;margin-bottom :20px;
		
	
}

.section_carte_home img {

	display : none;
	width: 100%;
	height :276px;
	display :block;
	margin-left :-1px;
	margin-top :20px;
		
	
	
}


.list-group21  
{
 margin-left: 17px;  
 margin-right: 40px; 
 margin-top: -15px; margin-bottom:10px;
 width: 29%; 
  float : left;
  display :none;
 
}
.list_regions {
	 
position:relative;
display:block;
padding:1px 1px;
margin-bottom:-1px;
border: none;
font-size: 1.4rem;
font-weight: 600;
text-decoration: none;
    text-align: left;
	color: #4183d7;
	line-height:22px;
}

.list-group21_right  
{
 margin-left: 18px;  
 margin-right: 40px; 
 margin-top: -15px;
  margin-bottom: 10px;
 width: 29%; 
  display :none;
 float : right;
 
}
.list-group21_right a:hover {
	 
position:relative;
display:block;
padding:1px 1px;
margin-bottom:-1px;
border: none;
font-size: 1.4rem;
font-weight: 600;
text-decoration: none;
    text-align: left;
	color: #33CCCC;
	line-height:22px;
}

.list-group21 a:hover {
	 
position:relative;
display:block;
padding:1px 1px;
margin-bottom:-1px;
border: none;
font-size: 1.4rem;
font-weight: 600;
text-decoration: none;
    text-align: left;
	color: #33CCCC;
	line-height:22px;
}

		
 
	


		
		
		 
		 
		 
		 
		 /**-le responsive de la partie recherche --*/
		  .form_select
{
 margin-left: 0px;  
 margin-right: 10px; 
 margin-top: 10px; margin-bottom: 0px;
 width: 100%; 
 
 float : left;
 
}

 .form_boutton button 
{
 margin-left: 2px;  
 margin-right:0px; 
 margin-top: 7px; margin-bottom: 0px;
 
 
 float : left; background: #33CCCC; color: #fff; border: 1px solid #33CCCC;
 
 
}

 .form_boutton   
{
	 width:99%; 
	 margin-left: 0px;  
 margin-right:22px; 
  
 
}
 .bouton_recherche
{
 margin-left: 0px;  
 margin-right: 10px; 
 margin-top: 0px; margin-bottom: 0px;
 width: 34%; 
 
 float : right;
 position : absolute;
 
}

.search-bar {
  background: rgba(151, 151, 151, 0.33);
  padding: 14px;
   height: 10%;
  margin-bottom: 15px;
   margin-bottom: 15px;
  margin-left: 5px;
  margin-right: 5px;
}

 .sub_title_annonce {
	color: #fff;
	font-size: 0.9em;
	font-weight: 500;
	border: none;
	display: none;
	padding: 6px 30px;
	outline: none;
	text-align : center;
	 
	 
	margin-top:1px;
	width: 100%;
}

 .sub_title_annonce {
	color: #fff;
	font-size: 0.9em;
	font-weight: 500;
	border: none;
	display: none;
	padding: 6px 30px;
	outline: none;
	text-align : center;
	margin-top:1px;
	width: 100%;
}


 .sub_title_annonce_mobile {
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	border: none;
	font-family: "Roboto", sans-serif;
	display: block;
	padding: 6px 30px;
	outline: none;
	text-align : center;
	margin-top:15px;
	width: 100%;
}





		 
		 

		/**-le responsive de la partie publicité (ads) home horrizonatl --*/
		.col-md-12
		{
			background:#224;
			width: 100%;
			height :75px;
			margin-top :-60px;	
		}

		.section-row img 
		{
			width: 100%;
			height :75px;
		}


		/**-le css responsive de la partie principale, ici cree juste pour arranger la marge du haut soit margin-top --*/
		.col-sm-9 
		{
			margin-top :10px;
	
		}	


		/**-le css responsive de la partie col-sm-9 et left-sidebar   --*/
		.col-sm-9  
		{
			 
			color:#8d9090;
			height :auto;
			margin-bottom: -40px;
			padding-bottom: 0px;
			   
		}


		.container1  
		{
			background: transparent; 

		}

		.left-sidebar  
		{
			 
			color:#8d9090;
			height :auto;
			margin-bottom: -40px;
			margin-top: 0px;
			padding-bottom: 25px;
			margin-bottom: 30px;
			 
			background-color: transparent;
		}
		
		
		/*-- le responsive de la partie compteur reponses du forum --*/
		.compteur_reponse  
		{
			width:0% ;
 
			display :none ;
		}
		
		.compteur_reponse_mobile  
		{
			width:17% ;
 
			display :block ;
				 
	 
	float:right ;
	text-align : center ;
	color :#4BB92F;  
	font-size: 10px;
	margin-top : 69px ;
	line-height : 1px ;
		}
		
		
 
		
 
		
		
		

.section_cat_annonces
{
  margin-top: -70px;
  padding-top: 20px;
    padding-bottom: 0px;
 background-color:rgb(237, 240, 240);  
 
}


.liste_cat_annonce
{
 margin-left: 0px;  
 margin-right: 8px; 
 margin-top: -25px; margin-bottom: 0px;
 width: 100%; 
 
 float : left;
 text-align : left;
 
}
 
 

 
 .titre_cat_annonce
{
	
	color: #4183d7;
	
	transition: all,.3s;
padding: 0;
cursor: pointer;
border: none;
background:
transparent;
font-weight: bold;
margin-top: 22px; 
width: 95%; 
 margin-left: 20px;
 
 
 
}


 .sub_titre_cat_annonce a
{
	
 color: #4183d7;
	
	transition: all,.3s;
padding: 0;
cursor: pointer;
border: none;
background:
transparent;
font-weight: 200;
text-decoration : none;     
    
      margin-left: -20px;  
    
    -webkit-text-size-adjust: 100%;
	
	list-style-type: none;
	
}



 
  .sub_titre_cat_annonce  
  {
		line-height: 13px;
  }
  






		/*-- le responsive de la recherche home et recherche... --*/
	.col-xs-recherche_annonces {
				width:100% ;height:270px;	
		float:left;
		margin-left :0px;
		 margin-left: 0px;  
 margin-right: 0px; 
 margin-top: -34.5px;
  margin-bottom: 32px;
 
	}
	
	
		.col-xs-recherche_annonces_home {
				width:100% ;height:270px;	
		float:left;
		margin-left :0px;
		 margin-left: 0px;  
 margin-right: 0px; 
 margin-top: -359px;
  margin-bottom: 32px;
  font-family: "Roboto", sans-serif;
 
	}
	
	
	.col-xs-recherche_annonces_home {
				width:100% ;height:400px;	
		float:left;
		 background-color: #cfff ;
		margin-left :0px;
		 margin-left: 0px;  
 margin-right: 0px; 
 margin-top: -420px;
  margin-bottom: 32px;font-family: "Roboto", sans-serif;
 
	}
	
	.col-xs-recherche_annonces_home img {
		width: 100%;
		height:400px;
object-position : center;
	object-fit : content;		
}


 


  .section_cat_annonces {
 
  display : none;
  
   
}

 

/*-- le responsive de la partie icone pour les menu mobile--*/
.fa-user {   
color :#777; 
font-weight: 60;
margin-top : 18px;
margin-bottom : 15px;
margin-left :0px;
font-size: 25px;	
}
.editor_recherche_annonces21 {
	position:absolute;
	background:#33CCCC;
width: 100%; margin-right: 0px; 
height : 265px ; margin-top: 35px;
  border-top-left-radius:3.9rem;
  border-bottom-right-radius: 3.9rem;
  display : none ;
}

.search-bar21 {
  background:#FFF;
  padding: 20px;
   height: 8%;
   width: 100%;
   margin-left : 0px;
   margin-right : 5px;
  margin-bottom: 15px;
  margin-top: 10px;
  border-top-left-radius:3.9rem;
  border-bottom-right-radius: 3.9rem;
}
 
 
 .section_fil_dariane121 { 
	 
 
		margin-bottom :0px;
		margin-top :-134px;
		 
	
}

.editor_recherche_annonces21_mobile {
 
 
display : block ;
 
	
}




.recherche_avance {
 
   padding-top: 0px; 
   margin-left: 0px;margin-right: 15px;
 
}
.recherche_avance a{
   margin-bottom: 310px; 
 background-color: #fff;
 padding-top: 3px; 
 padding-bottom: 3px;
 padding-left: 13px;
padding-right: 18px;
color: #FF6600;
border: 1px solid #FF6600;
 border-radius: .5rem;
  
}
.recherche_avance :hover{
  
color: #FF6600;
text-decoration : none;
 
  
}



 
 




  .user21 img {
width:32px ;height:32px;
border-radius:55px;
float : right;
margin-left : 10px;
margin-top : -40px;
display : block ;
position : absolute;
border:1px solid #33CCCC ;
}

  .user21_mobile img {
width:28px ;height:28px;
border-radius:55px;
float : left;
margin-left : -35px;
 
margin-top : 35px;
 
 
border:1px solid #33CCCC ;
}

  .user21_mobile  {
 
margin-left : -10px;
 
}

.count_favoris 
{
	color: #cf0000;  
	font-size: 12px;
	position :block;
	border-radius: .5rem;
	margin-left :50px;
	margin-top :-35px;
	height :10px;
	padding-bottom :0px;	  
}
.count_messages 
{
	color: #cf0000;  
	font-size: 12px;
	position :block;
	border-radius: .5rem;
	margin-left :60px;
	margin-top :-8px;
	height :10px;
	padding-bottom :0px;	  
} 


	
	 .tri_annonces {
   width:96% ;
   float :left;
   padding-top :7px; margin-bottom :-50px;
   padding-left :0px;
padding-right :5px;   margin-right :5px;display: inline;margin-top :-66px;
    background-color: #fff ;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
 border-radius : 5px;
   display :block;
 margin-left :0px;
  position :absolute;
}
		
		.tri_annonces2 {
   width:100% ;
   float :left;
    
   border-radius: 5px;
    margin-left :5px;
	margin-right :14px;
    border : none;
   padding-top :0px; padding-bottom :7px;font-family: "Roboto", sans-serif; 
}
  .tri_annonces2 a{
    margin-left :0px;
	    
	 padding-left :10px; padding-right :10px;  margin-right :0px; 
	 padding-top :1px; margin-bottom :15px;
 width:100%;
	font-family: "Nanum Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	color:#202021;
	font-size: 16px;
	text-decoration:none;
 
}

 .tri_annonces3 a{
    
	font-size: 16px;color:#202021;
	 
 
}
 .tri_annonces3 {
 width:24% ;
   float :left;
   background-color: #fff ;
   border-radius: 5px;
    margin-left :5px;
	padding-left :5px;
	margin-right :10px;
    border : none;
	float :right;font-size: 16px;
   padding-top :0px; padding-bottom :7px;font-family: "Roboto", sans-serif;
  
   
}

	
	
		
		.logo_masolo21_mobile img {

	width: 115px;
	height :33px;
	margin-top:7px;
	padding-bottom :3px ;
	padding-top :5px ;
 
	margin-left : 13px ;
	float : left;
}
.navbar-header img {
	width: 150px;
	height :52px;
	margin-top:-7px;
	margin-left :18px ;
	padding-bottom :6px ;
	padding-top :5px ;
}
.navbar-header img:hover{
	text-decoration: none;
	
}
		.postadd_21 a
		{
			margin-bottom: 0px; 
			background-color: #fff;
		 font-family: "Roboto", sans-serif;
			margin-top: 15px; 
			color: #33CCCC;
			border-radius: .5rem;
			margin-left : -13px;
			width:110%;
			display : block;
		}
		.postadd_21 a :hover
		{
			text-decoration : none;
		}
.postadd {
	
   padding-top: 0px; 
   margin-left: 0px;margin-right: 15px;
	display : none;
}





.postadd a{
   margin-bottom: 310px; 
 background-color: #33CCCC;
 padding-top: 5px; 
 padding-bottom: 5px;
 padding-left: 13px;
padding-right: 18px;
color: #fff;
 border-radius: .5rem;display : none;
  
}
 
.postadd :hover{
  
color: #fff;
text-decoration : none;
 
  
}
		.nav {
 
float : left ;
margin-left :0px  ; 
}

 
	.slider_detail_mobile {
 
 
margin-left :-40px  ; 
height: 225px;
    width:128% ;display : block;
 border-radius : 8px;
	margin-top  : 52px;overflow-wrap: break-word;
	margin-bottom : 20px;margin-bottom :30px;
	 
}

	




/**-le css de la partie qui affiche les infos des cookies--*/
 

.info_cookies21 {

	margin-top: -150px;
	margin-bottom: 0px;
padding-bottom: 8px;
padding-top: 8px;
min-height  : 80px;
position : relative;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255, 252, 228);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-size: auto auto;
border-top-color: rgb(234, 227, 169);
border-top-style: solid;
border-top-width: 1px;
bottom: 0px;


color: rgb(0, 0, 0);
font-family: Arial, Helvetica, sans-serif;
font-feature-settings: normal;
font-kerning: auto;
font-language-override: normal;
font-size: 12px;
font-size-adjust: none;
font-stretch: 100%;
font-style: normal;
font-variant: normal;
font-variant-alternates: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-variant-position: normal;
font-weight: 400;
left: 0px;
 
 
padding-left: 8px;
padding-right: 8px;
 
 

élément
this.style
 
text-align: center;
 
width: 100%;
z-index: 99999;
}


.info_cookies21 a{

	margin-top: 80px;
	 
	margin-bottom: -80px;
padding-bottom: -68px;



background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255, 252, 228);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-size: auto auto;
border-top-color: rgb(234, 227, 169);
border-top-style: solid;
border-top-width: 1px;
bottom: 0px;

text-decoration-line: none;
color: #33CCCC;
font-family: Arial, Helvetica, sans-serif;
font-feature-settings: normal;
font-kerning: auto;
font-language-override: normal;
font-size: 13px;
font-size-adjust: none;
font-stretch: 100%;
font-style: normal;
font-variant: normal;
font-variant-alternates: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-variant-position: normal;
font-weight: 500;
left: 10px;
 
 
padding-left: 8px;
padding-right: 8px;
 
 
 
 
text-align: center;
 
width: 100%;
z-index: 99999;
}

#accept-cookies {
	margin-top: 20px;
	margin-right: 20px;
margin-bottom: -4px;
font-size: 11px;
  display : inline;
 padding-left  : 6px;
padding-right  : 6px; 
background: #33CCCC; 
color: #fff;
 border-radius: 8px;
}

.info_cookies21 a:hover {color: #33CCCC; text-decoration-line: inline;}

.info_cookies21 p{
	margin-top: 4px;
margin-bottom: -4px;
}


.center-block {
	display : none;
}
 .recherche_annonces input[type="select"] 
 {
	color: #fff;
	font-size: 12px;
	font-weight: 300;
	border: none;
	display: block;
	padding: 6px 30px;
	outline: none;
	background: #cf0000;
	text-transform:uppercase;
	margin-top:0.5em;
	width: 100%;
	font-family: "Roboto", sans-serif;
}
  .form_type_annonce
{
 margin-left: 0px;  
 margin-right: 10px; 
 margin-top: 0px; margin-bottom: 12px;
 width: 100%; 
 font-family: "Roboto", sans-serif;
 float : left;
 text-align : left;color:#33CCCC ;
 
}
.form_select input[type="select"] 
{
  
 font-size: 12px;
 
 
}
.sld_mobile  
		{
			 display : block;
			 	object-position : center;
			 object-fit : cover;
		}
		  
		  
		
		.categorie_mobile  {
  display : inline;
     padding-top: -12px; 
   margin-left: 0px;margin-right: 15px;
    margin-left: 0px;   
}
 .select_mobile  
 { 
	color: #222;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid #DADADA;
	display: block;
	height :45px;
	background: #fff;
	margin-top:10px;
	width: 97.5%;
	border-radius :5px;
	text-align : center;
	font-family: "Roboto", sans-serif;
}
 .sub_title_annonce_mobile span {
	color: #33CCCC; 
	font-weight: 700;
 
		word-spacing: 5px;
	font-family: "Roboto", sans-serif;
	padding-right :2px;
}
  .sub_title_annonce_mobile em {
	color: #fff; 
	font-weight: 500;
	word-spacing: 5px;
	font-style: normal;
	font-family: "Roboto", sans-serif;
	 
}


.menu2_mobile {
 
  display : inline;
  
   margin-left :  13px;
  padding-top : 100px;
 
}
.menu2_mobile a {
 
  display : block;
  display : inline;
  font-family: "Roboto", sans-serif;
  font-size: 1.1em;
  margin-top : 0px;
  margin-left : -1px;
   
  
 
}

.menu4_mobile {
 
  display : inline;
 
   margin-left :  18px;
  padding-top : 100px;width: 100%;
 
}

.menu4_mobile a {
 
  display : block;
  display : inline;
  font-family: "Roboto", sans-serif;
  font-size: 1.1em;
  margin-top : 0px;
  margin-left : 0px;
  width: 100%;
   
}






.menu_mobile_abonnement {
 
  display : inline;
	 
   margin-left :  85px;
   padding-right : 15px;
  padding-top : 100px;width: 100%;
 color: #777;
}

.menu_mobile_abonnement a {
 
  display : block;
  display : inline;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  margin-top : 0px;
  margin-left : 10px;
  width: 100%;
  color: #777; 
   
}


.menu5_mobile {
 
  display : inline;
   margin-left :  151px;
  padding-top : 100px;width: 100%;
 color: #777; 
}

.menu5_mobile a {
  display : block;
  display : inline;
  font-family: "Roboto", sans-serif;
  font-size: 1.6em;
  margin-top : 0px;
  margin-left : 10px;
  width: 100%;
  color: #777; 
   
}

.menu5_mobile img {
 
  width: 25px;
   height: 32px;
   margin-left :7px;
   border-radius:55px;
}

 

.menu3_mobile {
 
  display : inline;
 
   margin-left :  9px;
  padding-top : 100px;width: 100%;
 
}

.menu3_mobile a {
 
  display : block;
  display : inline;
  font-family: "Roboto", sans-serif;
  font-size: 1.1em;
  margin-top : 0px;
  margin-left : 10px;
  width: 100%;
   
}

.count_favoris_mobile 
{
	color: #33CCCC; margin-left :19.9px; 
	margin-top : -35px; font-family: "Roboto", sans-serif;
	position : absolute;    font-size: 8px;
	 background: #33CCCC;
	     border: 1px solid #fff;
    border-radius: 50%;
	padding-left : 3px;
	padding-right : 2px;padding-top : 1px;
	 
		  
}  
.count_favoris_mobile_2 
{
	color: #33CCCC; margin-left :19.9px; 
	margin-top : -28px; font-family: "Roboto", sans-serif;
	position : absolute;    font-size: 35px;
	 background: #33CCCC;
	     border: 1px solid #fff;
    border-radius: 50%;
	padding-left : -1px;
	height : 7px;
	width   :7px;
	padding-right : 3px;padding-top : 3px;
	 
		  
}

.statut_connecter 
{
	color: #33CCCC; margin-left :19px; 
	margin-top : -6px; font-family: "Roboto", sans-serif;
	position : absolute;    font-size: 4px;
	 background: #33CCCC; 
	 border: 1px solid #fff;
    border-radius: 50%;
	padding-left : 2px;
	padding-right : 1px;
	padding-top : 1px;
 
 
		  
}


.raproche_mobile 
{
	 
	margin-top : -112px; 

	margin-bottom :-25px;
height :52px;	
display : block ;
	 background: transparent;
    
		  
}

 #infopratique21  
 {
	width: 100%; margin-left: -3px; background-color: transparent;
	border: 1px solid #fff;
	height : 225px;
	margin-top : 32px;
	display  : block ;
border-radius: .5rem;
	padding-top :  3px;
	padding-bottom :  5px;
	padding-left :  4px;
	padding-right :  3px;
	 
	
}
#infopratique21  img{
width: 100%; 
margin-top:-5px ;
height : 210px;
display  : block ;border-radius: 10px;
object-position : center;
object-fit : contain; 
background: transparent;		 
}
.carousel-inner img {
	width: 100%; margin-left: -11px;
	 padding-bottom :10px;
	height : 210px;border-radius: 10px;
	border-radius :8px;
		  object-position : center;
			 object-fit : contain;
}

.carousel-control {
 color :#33CCCC;
  margin-top : 85px;
 
}
.br_mobile {
display : block;
}



.tri_annonce {
 display  : none;
}
.separateur_pour_vous {
 display  : block;
}

.raproche_top {
 margin-top : -10px;
}
.copyright2 {
 padding-bottom : 7px;
 margin-top : -5px;
}

 .tri_annonce_121,.tri_annonce_121_categorie {
    display : none;
}



		
		
		
		 .col-md-4 {
            margin-left :7px;
			margin-right :7px;
        }
		 .espace_repousse_footer {
            margin-bottom :65px;
        }
		
		
		
		
		
		
		
		
		
		
.section_home
{
	width: 100%;
	height : auto; 
background: linear-gradient(to bottom, #f8ffff 0%, #f4f4f9 80%);
margin-top : 0px;
padding-bottom  : 30px; 	
}

/* ===== Steps ===== */
#steps
{
	margin-top : 150px; 	
	margin-bottom :150px;
	background-color :#F1E9DE;
	padding-bottom :40px;
	margin-left : 7px;
	margin-right :7px;
	border-radius :20px;
	padding-top :7px !important;
	min-height :auto !important;
}
#steps h2
{
	margin-top : 10px; 	
	padding-top  : 7px !important;
	 color :#777;
	 font-family: "Roboto", sans-serif;
	padding-bottom : 30px;
		text-align : center;
	 
}
.steps { display:flex; flex-wrap:wrap; justify-content:center; gap:25px; }
.step {
    background:white; padding:30px; border-radius:20px; flex:1 1 220px; max-width:320px;
    text-align:center; box-shadow:0 0px 0px rgba(0,0,0,0.1); transform:translateY(30px); opacity:0;
    transition:0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.step i { font-size:3em; margin-bottom:20px; color:#777; transition:0.5s; }
.step h3 { margin-bottom:15px; font-size:1.2em;font-weight: 600; }
.step p { font-size:0.95em; color:#555; }
.step:hover i { transform: rotate(20deg) scale(1.2); color:#777; }



/* ===== Témoignages (Parallax + 3 blocs + fond bleu clair) ===== */
.testimonials-section {
    background:#E6FAFA; /* couleur harmonisée avec #33CCCC */
    background-attachment: fixed; /* PARALLAX */
    background-size: cover;
    background-position: center;
    position:relative;
	min-height :505px !important;
		padding-bottom :20px;
	padding-top :20px;
	margin-bottom :35px !important;
}
.testimonials-section h2
{
	margin-top : 0px; 	
	padding-top  : 10px;
	 color :#777;
	 font-family: 'Inter', sans-serif;
	padding-bottom : 30px;
		text-align : center;
		font-weight: 600;
		font-size: 24px;
}

.testimonials {
    display:flex; justify-content:center; gap:20px; flex-wrap:wrap; position:relative;
}

.testimonial {
    background:white; padding:30px; width:320px; border-radius:20px; box-shadow:0 0px 0px rgba(0,0,0,0.1);
    display:flex; flex-direction:column; align-items:center; text-align:center;
    transform:translateY(40px); opacity:0; transition:0.8s ease-out;
}
.testimonial:nth-child(1) { transform:translateY(-20px); }
.testimonial:nth-child(2) { transform:translateY(20px); }
.testimonial:nth-child(3) { transform:translateY(-10px); }

.testimonial img {
    width:80px; height:80px; border-radius:50%; object-fit:cover; margin-bottom:15px;
    border:4px solid #33CCCC;
}
.testimonial p { font-size:0.99em; color:#555; margin-bottom:10px; }
.testimonial h4 { margin-top:5px; margin-bottom:10px; color:#1f8f8f; }
.testimonial a {
    display:inline-block; margin-top:10px; padding:8px 20px; background:#33CCCC; color:white; border-radius:50px; font-size:0.9em;
    transition:0.3s;
}
.testimonial a:hover { background:#1f8f8f; }




/* ===== Reasons ===== */
.reasons { display:flex; flex-wrap:wrap; justify-content:center; gap:25px; }
.reason {
    background:white; padding:25px; border-radius:20px; flex:1 1 220px; max-width:150px; text-align:center;
    box-shadow:0 0px 0px rgba(0,0,0,0.1); transform:translateY(30px); opacity:0; transition:0.6s ease-out;
}
.reason i { font-size:2.5em; margin-bottom:15px; color:#33CCCC; transition:0.4s; }
.reason:hover i { transform: scale(1.3) rotate(-10deg); color:#28a4a4; }
.reason h4 { margin-bottom:10px; }
.reason p { font-size:0.9em; color:#555; }







/* ===== Categories ===== */
.categories { display:flex; flex-wrap:wrap; justify-content:center; gap:25px; text-align:center; }
.category {
    background:white; padding:25px; border-radius:20px; width:150px; transition:0.5s; cursor:pointer;
    transform:translateY(20px); opacity:0;box-shadow:0 5px 20px rgba(0,0,0,0.1);
}
.category i { font-size:2.5em; margin-bottom:10px; transition:0.5s; color:#33CCCC;}
.category:hover { transform:translateY(-10px) scale(1.05); background:#33CCCC; color:white; }
.category:hover i { color:white; }

#categories
{
	margin-top : 30px; 	
	margin-bottom :30px;
}
#categories h2
{
	margin-top : -20px; 	
	padding-top  : 30px;
	 color :#777;
	 font-size: 24px;
	 font-family: "Inter", sans-serif;
	padding-bottom : 30px;
	text-align : center;
 
}

#steps
{
	margin-top : 30px; 	
	margin-bottom :30px;
}
#steps h2
{
	margin-top : 30px; 	
	padding-top  : 30px;
	 color :#777;
	 font-size: 24px;
	 font-family: "Inter", sans-serif;
	padding-bottom : 30px;
		text-align : center;
	 
}





/* ===== Hero Section ===== */
.hero {
    display:flex; flex-direction:column; justify-content:left; align-items:center; text-align:left; height:52vh;
    background: rgba(36, 34, 36, 0.68); /* overlay sombre */
    color:white; overflow:hidden; position:relative;
}
.hero::before {
    content:""; position:absolute; top:0; left:0; width:100%; height:100%;
 
    opacity:0.2; z-index:0;
}
.hero h1 {
    font-size:2.4em; margin-bottom:20px; position:relative; z-index:1;padding-right :10px;
    animation: floatText 3s ease-in-out infinite alternate;
	margin-top :65px;margin-left :20px;font-family: "Roboto", sans-serif;line-height:50px;
}
.hero p {
    font-size:1.3em; padding-right :10px; margin-bottom:30px;margin-left :20px; z-index:1; animation: fadeUp 1s ease 0.5s forwards; opacity:0;
}
.hero button {
    padding:15px 60px; margin:5px; border:none; border-radius:50px; background:#33CCCC; color:white; font-size:1em;
    cursor:pointer; transition:0.4s; z-index:1; position:relative;
	width :250px;
	margin-top :10px;
}
/* Smooth scroll */
body {
    scroll-behavior: smooth;
}

/* Boutons hero avec href */
.hero-button {
    display:none;
    padding:15px 35px;
    margin:5px;
    border:none;
	margin-top :15px;
    border-radius:50px;
    background:#33CCCC;
    color:white;
	width :250px;
    font-size:1.3em;
    text-align:center;
    cursor:pointer;
    transition:0.4s;
    text-decoration:none;
}

.hero-button:hover {
    background:#28a4a4;
    color:white;
	text-decoration : none;
}

.hero-button a :hover {
     color:white;
	 text-decoration : none;
}

/* Animations hero (inchangées) */
@keyframes floatText { 0%{transform:translateY(0px);} 100%{transform:translateY(-10px);} }
@keyframes fadeUp { 0%{opacity:0; transform:translateY(20px);} 100%{opacity:1; transform:translateY(0);} }

.hero button:hover { transform: scale(1.1); background:#28a4a4; }

.hero img {
	position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:0.2; z-index:0;"
}



/* Hero Animations */
@keyframes floatText { 0%{transform:translateY(0px);} 100%{transform:translateY(-10px);} }
@keyframes fadeUp { 0%{opacity:0; transform:translateY(20px);} 100%{opacity:1; transform:translateY(0);} }



/* ======= SERVICE CLIENT ======= */
.service-client {
    text-align:center;
		margin-top :40px;	
	margin-bottom :20px;
	background-color :#E9EEF1;
	padding-bottom :40px;
	padding-top :10px;
	margin-left : 7px;
	margin-right :7px;
	border-radius :20px;
	text-align:center;
}

.service-client h2 {
color:#777;
margin-top :5px;
font-weight: 600;
font-size:24px;
font-family: 'Inter', sans-serif;
}

.contact-box h3 {
 font-size:22px;
}
.service-client p.intro {
    max-width:700px;
    margin:auto;
    font-size:16px;
    color:#555;
    margin-bottom:40px;
}
.contact-grid {
    display:flex; justify-content:center; flex-wrap:wrap; gap:30px;
}
.contact-box {
    background:white;
    width:150px;
    padding:10px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
    transition:0.4s;
    transform:translateY(30px);
    opacity:0;
}
.contact-box i {
    font-size:37px;
    color:#33CCCC;
    margin-bottom:-5px;
	margin-top : 10px;
    transition:0.4s;
}
.contact-box:hover {
    transform:translateY(-10px) scale(1.06);
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
}
.contact-box:hover i { color:#28a4a4; }


 /* === connexion / inscription ===  */ 
 .section_connexion  {padding-top: -10px;margin-bottom: -10px;}
 

	.annonce_add 
	{
		display:flex;
		justify-content: center;
		width: 100%;
		padding-bottom :5px;
	}
	.annonce_add a {
    display:inline-block;
    padding:15px 35px;
    margin:5px;
    border:none;
	margin-top :25px;
    border-radius:10px;
    background:#33CCCC;
    color:white;
	width :280px;
    font-size:1.3em;
    text-align:center;
    cursor:pointer;
    transition:0.4s;
    text-decoration:none;
}
	.annonce_add_2 
	{
		display:flex;
		justify-content: center;
		width: 100%;
		margin-bottom : 40px;
		padding-bottom :45px;
	}
	.annonce_add_2 a {
    display:inline-block;
    padding:15px 35px;
    margin:5px;
    border:none;
	margin-top :25px;
    border-radius:10px;
    background:#ffff;
    color:#33CCCC;
	width :280px;
    font-size:1.3em;
    text-align:center;
    cursor:pointer;
    transition:0.4s;
    text-decoration:none;
	border: 1px solid #33CCCC;
}


.section_navigation_annonce {
 width:100% ;margin-top :0px;
	height: 65px;
	z-index: 999;
	position : fixed;
	padding-left :10px;
	padding-right :10px;
	padding-top :0px;
	margin-bottom :10px;
	padding-bottom :12px;
	background: transparent;
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.20);
}

.notification_ajout_annonce  img{ 
	 
	width: 100px;
	height :100px;
	margin-top :-10px;
	display :block;
	margin-bottom :10px;
}   


.notification_ajout_annonce  h3{ 
		font-size: 14px;
		padding-left : 10px;
		padding-right : 13px;
	font-weight: 400;
}

 
 /* barre top *//* Barre fixe en haut */
.top-bar {
    position: fixed;
    top: 0;
	display :block;
    left: 0;
    width: 100%;
    padding: 10px 17px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    color: #222;
	height :70px;
    z-index: 9999;
	font-family: 'Inter', sans-serif;
  font-weight: 400;
}

/* Bouton retour */
.back-btn {
    background: none;
    color: #222;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 0.3s;
}

.back-btn:hover {

}

/* Titre dynamique */
.page-title {
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nofi_mobile {
    display :block;
 }
 /* file d'arriane */

.section_breadcrumb {
	display :none !important;
}


.raproche_mobile_favoris {
	margin-top : -55px !important;	
	display :block !important;
}


 
 
 }