/**
Theme Name: astra-child
Author: Carton
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/


:root {
	--publication_height: 150px;
	--blue_mascotte: #1D2F56;
	--light_blue_mascotte: #365292;
	--lighter_blue_mascotte: #4662A2;
	--orange_mascotte: #FF9C4A;
	--dark_orange_mascotte: #DE7F31;
	--red_mascotte: #d22027;
	--black_mascotte: #221f21;	

	--shadow_mascotte: 0px 0px 10px #c6c6c6;
}


.main-horizontal-container {

	height: 300px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;

}

.main-horizontal-displayer {

	padding-top: 6px;
	padding-bottom: 6px;

}

.main-horizontal-displayer ul {

	width: 100%;
	height: 100%;
	display: flex;
	gap: 4vw;
	overflow-x: scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  margin: 0 !important;

}

.horizontal-displayer-item {

	list-style-type: none;
	background-color: #eeeeee;
	border: 1px solid black;
	padding: 20px;
	flex: 0 0 20%;
	scroll-snap-align: center;
	z-index: 1;

}

.horizontal-displayer-item:nth-child(even) {
	background-color: cyan;
}

/*.main-horizontal-container::before {
	content: "";
	width: 110%;
	height: 100%;
	position: absolute;
	background-color: #365292;
	top: 0;
	left: 0;
	transform: rotate(-3deg) translateY(85%);
	transform-origin: bottom;
}*/







#annonce-main-container {
	width: 100%;
	height: 100%;
	border: 5px solid red;
}

#full-screen-carousel-container:before {
	content: "";
	width: 100vw;
	height: 100vh;
	background-color: black;
	opacity: 0.7;
}


.splide__slide img {
	width: 100%;
	height: 80%;
}

.splide__slide {
  opacity: 0.6;
}

.splide__slide.is-active {
  opacity: 1;
}

/* =====================================================

					CONNEXION / INSCRIPTION

   ===================================================== */



.password_toggle_container {
	display: flex;
	font-size: 0.8rem;
	gap: 10px;
}

.password_toggle_container input {
	width: 25px;
	cursor: pointer;
}


.login_form_container, .signin_form_container  {
	background-color: #fff;
	border-radius: 14px;
	padding: 50px;
	border: 1px solid lightgrey;
	text-align: center;
}

.login_form_container form > *, .signin_form_container form > * {
	/*margin-bottom: 20px;
	margin-top: 20px;*/
}

.confirmation_pin_input {
	border: 1px solid black !important;
	border-radius: 0px !important;
	box-shadow: 0px !important;
	width: 1.5em !important;
	font-size: 1.5em !important;
	text-align: center;
	padding: 0px !important;
	transition: all 0.5s;
}


/* =====================================================

					MAIN.PHP

   ===================================================== */



 .publication_finder {
 		width: 100%;
 		display: flex;
 		flex-wrap: nowrap;
 }

 .publication_finder * {
 		height: 100% !important;
 		line-height: 1 !important;
 }

 .publication_finder input {
 		background-color: rgba(240,240,240,0.6);
 		color: white;
 }

 .publication_finder:hover input {
 		background-color: rgba(255, 255, 255, 1.0);
 		color: black;
 }


 .publication_finder input::placeholder {
 	color: white;
 }


 .publication_finder:hover input::placeholder {
 	color: lightgrey;
 }


.annonce-filter-extended-container {
	/*background-color: #F4F4F7;*/
	padding: 15px;
}

.annonce-filter-extended-container input {
	box-shadow: 0px 0px 5px lightgrey;
}

.annonce-filter-extended-container button {
	position: sticky;
}

/* ====================================== */
/*ACCUEIL*/
/* ====================================== */

footer ul{
	padding-left: 0 !important;
}

.acc_header .cptannonce{
	color: white;
	text-align: center;
	font-size: x-large;
	text-shadow: 1px 1px rgba(0, 0, 0, 1);
/*	background: rgba(0, 0, 0, 0.2);*/
  width: fit-content !important;
} 
.counter {
/*	font-size: 80px;*/
	font-weight: bold;
	opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.counter--visible {
  opacity: 1;
  transform: translateY(0);
}

.caroussel_container{
	position: relative;
/*	overflow-x: hidden;*/
}
.accueil_body{
	overflow-x: hidden
}

.publication_container {
	overflow-y: hidden;
	overflow-x: scroll;
	scrollbar-width: none;
	width: 100%;
	display: flex;
  flex-wrap: nowrap;
	gap: 25px;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
/*	transition: all 0.5s;*/
	
}

.publication {
	
	border: 1px solid #d6d6d6;
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.5s;
	width: 200px;
	min-height: 300px;
	text-decoration: none !important;
	color: var(--blue_mascotte);
	font-size: 14px;
	flex: 0 0 auto;
	scroll-snap-align: center;
}

.publication:hover {
	color: var(--blue_mascotte);
	border: 1px solid var(--blue_mascotte);
}

.publication img {
	width: 100%;
	height: 130px;
}

.publication-title {
	word-wrap: break-word;
/*	font-weight: bold;*/
}

.publication_desc{
	margin-top: 10px;
	margin-left: 10px;
}

.publication-info {

    display: flex;
    justify-content: space-evenly;  
    flex-direction: column;  
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 10px;
    gap: 5px;
    color: #85878b;

  }

 .publication-prix{
 	font-size: 18px;
/* 	font-weight: bold;*/
 }

 a {
 	text-decoration: none !important;
 }

 .pub-nav button.pub-prev, .pub-nav button.pub-next{
	height: 60px;
	width: 60px;
	border-radius: 50%;
	background: #fff !important;
	position: absolute;
	z-index: 4;
	box-shadow: 0 0 12px rgba(0,0,0,0.1);
	color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
 }

 .pub-nav button.pub-prev {
  left: -25px;
}
 .pub-nav button.pub-next {
  right: -25px;
}
.pub-nav button.pub-prev::before {
  transform: rotate(180deg);
}

.pub-nav button.pub-prev::before, .pub-nav button.pub-next::before {
  background-image: url("/wp-content/themes/astra-child/ressources/chevron-droit.png");
  background-size: 25px 25px;
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  height: 60px;
  width: 60px;
  position: absolute;
  top: 0;
  text-align: center;
  line-height: 60px;
  left: 0;
}
.caroussel_container .pub-nav {
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  z-index: 10;
}
/* ====================================== */

.close {
  position: relative;
  width: 32px;
  height: 32px;
  opacity: 0.3;
  transition: all 0.5s;
}

.close:hover {
  opacity: 1;
}

.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: '';
  height: 33px;
  width: 2px;
  background-color: #333;
}

.close:before {
  transform: rotate(45deg);
}

.close:after {
  transform: rotate(-45deg);
}

.close:hover {
	transform: rotate(-180deg);
	cursor: pointer;
}


/* HTML: <div class="loader"></div> */
.loader {
  width: 60px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side,#000 90%,#0000);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: l3 1s infinite linear;
}
@keyframes l3 {
    20%{background-position:0%   0%, 50%  50%,100%  50%}
    40%{background-position:0% 100%, 50%   0%,100%  50%}
    60%{background-position:0%  50%, 50% 100%,100%   0%}
    80%{background-position:0%  50%, 50%  50%,100% 100%}
}


/* =====================================================

					PROFIL

   ===================================================== */



.profil-displayer-container {
	border-bottom: 1px solid lightgrey;
	display: flex;
	justify-content: start;
}


.profil-navigation-button {
	display: flex;
	justify-content:space-around;
	padding-inline: 20px;
	border-inline: 1px solid lightgrey;
}

.profil-navigation-button:hover {

	background-color: lightgrey;
	cursor: pointer;

}

.profil-navigation-button.active {
	background-color: red;
}


.profil-section-container {
	width: 100%;
	max-width: 100%;
	max-height: 650px;
	padding: 50px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	grid-template-rows: 150px;
	grid-gap: 50px;
	overflow-y: scroll;
	grid-auto-flow: row;
}

@media only screen and (max-width: 992px) {
	.profil-section-container {
		grid-template-columns: auto !important;
	}
}



.profil-section-container .item {
	height: 150px;
}

.profil-section-container .item:hover {
	box-shadow: 0px 0px 15px grey;
}

/* =====================================================
	=====================================================
	=====================================================
	=====================================================

					PROFIL
   =====================================================
   =====================================================
   =====================================================
   ===================================================== */


:root {
	--profil-buttons: 150px; 
}

@media only screen and (max-width: 992px) {
	.profil-sections-manager {
		margin-top: 20px;
		display: flex;
		justify-content: start;
		width: 100%;
		white-space: nowrap;
		overflow-x: scroll;
	}
}


.profil-sections-manager {
	margin-top: 20px;
	display: flex;
	justify-content: start;
	width: 100%;
	white-space: nowrap;
}

.profil-sections-manager .section-button {
	min-width: 150px;
	height: 70px;
	podding-inline: 5px;
	border: 1px solid black !important;
	background-color: transparent;
	transform-origin: bottom;
	color: black;
	border-radius: 12px;
}


.profil-sections-manager .section-button.active {
	background-color: lightblue !important;
}

@font-face { font-family: Vollda; src: url(https://dev.bourse.mascotte-assurances.fr/wp-content/themes/astra-child/fonts/Vollda-Bold.otf); font-weight: normal;}
@font-face { font-family: Intrigora; src: url(https://dev.bourse.mascotte-assurances.fr/wp-content/themes/astra-child/fonts/Intrigora-Medium-BF660e7d9f392b1.otf); font-weight: normal;}
@font-face { font-family: Roboto; src: url(https://dev.bourse.mascotte-assurances.fr/wp-content/themes/astra-child/fonts/Roboto-VariableFont_wdth,wght.ttf); font-weight: normal;}


.publication * {
	font-family: Roboto;
}

.header-slogan {
	font-family: Vollda;
	font-weight: bold;
}



.annonce-filter-extended-container {
	margin-top: 35px;
}

.filter-wrapper {
	margin-bottom: 40px;
  display: grid;
  align-items: center;

  & > * {
    grid-column: 1;
    grid-row: 1;
    font: 1.1rem Intrigora,sans-serif;
    color: black;
  }

  & input {
    position: relative;
    border: 1.5px solid lightgrey;
    border-radius: 0.25rem;
    /*outline: none;*/
    background-color: transparent;
    color: black;
    padding: 1rem;
    z-index: 0;
    transition: border-color 0.5s;

    &:focus { 
    	border-color: lightgreen;
    	border-style: solid;
    }

    &:focus ~ span, &:not(:placeholder-shown) ~ span {
      transform: translateY(-1.2rem) scale(0.75);
      padding: 0 0.25rem;
      color: grey;
    }
  }

  & span {
    width: max-content;
    background-color: white;
    margin-left: 1rem;
    color: lightgrey;
    transition: all 0.5s;
  }
}

.ajout_val_vehicule {

	display: none;

}

.disabled_val_vehicule {
	background-color: lightgrey;
}

.ajout_val_vehicule_label {

	text-decoration: underline;
	color: lightblue;
	cursor: pointer;

}

.profil-annonce-info {
	box-shadow: var(--shadow_mascotte);
}

.profil-annonce-info:hover {
	cursor: pointer;
}

.profil-vertical-navbar {

	list-style: none;

}

.profil-vertical-navbar div {

	border-bottom: 1px solid lightgrey;
	border-left: 1px solid lightgrey;
	padding: 15px;

}


.annonce-grid {

	display: grid;
	position: relative;
	grid-template-columns: repeat(4, 1fr);
	grid-template-areas: 
	"favorie favorie favorie image0"
	"favorie favorie favorie image1"
	"description description description image2"
	"description description description datas"
	"description description description datas";
	grid-template-rows: repeat(5, 200px);
	gap: 20px;

	& .annonce-favori {
		position: relative;
		grid-area: favorie;
		text-align: center;
		background-color: lightgrey;
	}

	& .annonce-image {
		display: flex;
		background-color: lightgrey;
		justify-content: center;
	}

	& .annonce-description {
		grid-area: description;

		& .description-grid {
			display: grid;
			position: relative;
			grid-template-columns: repeat(3, 1fr);
			grid-template-areas: 
			"marque couleur annee"
			"modele carburant km"
			"moteur transmission ct";
			grid-template-rows: repeat(3, minmax(1fr,200px));

			& .marque {
				grid-area: marque;
			}

			& .couleur {
				grid-area: couleur;
			}

			& .annee {
				grid-area: annee;
			}

			& .modele {
				grid-area: modele;
			}

			& .carburant {
				grid-area: carburant;
			}

			& .km {
				grid-area: km;
			}

			& .moteur {
				grid-area: moteur;
			}

			& .transmission {
				grid-area: transmission;
			}

			& .ct {
				grid-area: ct;
			}

		}

	}

	& .annonce-datas {
		grid-area: datas;
	}

	& .annonce-image0 {
		grid-area: image0;	
	}

	& .annonce-image1 {
		grid-area: image1;	
	}

	& .annonce-image2 {
		grid-area: image2;	
	}

}

@media only screen and (max-width: 860px) {
	.annonce-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas: 
		"favorie favorie favorie"
		"favorie favorie favorie"
		"description description description"
		"description description description"
		"description description description"
		"datas datas datas";
		grid-template-rows: repeat(6, auto);

		& .annonce-image {
			display: none;
		}

	}
}

.pointer {
	cursor: pointer;
}

.svg.active {
	fill: red;
}