/*
	Theme Name: cactus-theme
	Description: Thème réalisé par l'Agence Cactus
	Author: Agence Cactus
	Author URI: https://agence-cactus.fr/
	Version: 1.0.0
	Tags: agence, cactus, theme
	Text Domain: cactus_theme
*/

.actu-date-desktop {
    background: rgb(0 0 0 / 69%);
}

[name="Retourner en haut de page"] {
	z-index: 20 !important;
}

/*** OFFRE PEDAGOGIQUE ***/
.single-offres-pedagogiques aside {
    display: none;
}
.single-offres-pedagogiques #singleMain {
    max-width: 1400px;
    margin: auto!important;
}
article.offres-pedagogiques {
    max-width: 1400px;
    margin: auto;
    width: 100%;
    padding: 70px 60px;
}

.offre_pedago-main_infos{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.offre_pedago-main_infos *{
    margin-bottom: 0!important;
}
.offre_pedago-titre{
	font-size:40px;
}
.offre_pedago-sub {
    font-size: 14px;
    font-weight: 300;
}

.offre_pedago-themes {
    font-weight: 700;
    font-size: 25px;
    position:relative;
}
.offre_pedago-themes:after {
    height: 5px;
    width:80px;
    position:absolute;
    content:"";
    left:0px;
    bottom:-5px;
}

.offre_pedago-intro {
    margin-top: 50px;
    display: flex;
    gap: 30px 40px;
}
.offre_pedago-presentation, .offre_pedago-img, .offre_pedago-img-mobile {
    min-width: calc(50% - 20px);
}
.offre_pedago-img-mobile{
	display:none;
}
.offre_pedago-img {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.offre_pedago-img img{
width:100%;
}

.offre_pedago-presentation {
    font-size: 22Px;
    line-height: normal;
}
.offre_pedago-presentation *{
	margin-bottom:0;
}
.offre_pedago-contenu {
    margin-top: 50Px;
    display: flex;
    gap: 50px;
}
.offre_pedago-programme {
    min-width: calc(100% - 450px);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.offre_pedago-right{
	min-width: 400px;
    position: sticky;
    top: 10px;
    height: fit-content;
}
h2.titre-programme {
    font-size: 20px;
	font-weight:700;
    margin-top:20px;
    margin-bottom: 15px;
}
.programme-item-dtl{
	display: flex;
    flex-direction:column;
    gap: 10px;
 }
.programme-item-row {
    display: flex;
    gap: 20px;
}
.programme-item-dtl * {
    margin-bottom: 0;
}
.programme-item-activite-long {
    width: 100%;
}
.programme-item-horaire {
    display: flex;
    align-items: start;
    padding: 2px 6px;
    height: fit-content;
    line-height: normal;
    color: white;
}
.offre_pedago-details {
	margin-top: 20px;
	gap: 20px;
    display: flex;
    flex-direction: column;
}
.offre_pedago-infos{
    padding: 15px;
    color:white;
    border:1px solid white;
}
.offre_pedago-infos {
    display: flex;
    gap: 20px;
}
.icon-dtl {
    width: 40px;
    display: flex;
}
.offre-info-right {
    width: calc(100% - 60px);
}
.offre_pedago-infos * {
    margin-bottom: 0;
}
.icon-dtl svg{
    max-width: 40px;
    fill: white;
    margin-bottom: 10px;
    display: flex;
    max-height: 35px;
}
.lieux-offre-pedago {
    list-style: none;
    padding: 0;
}

@media screen and (max-width:992px){
    article.offres-pedagogiques {
        padding: 60px 40px;
    }
    .offre_pedago-contenu {
        flex-direction: column-reverse;
        gap: 40px;
        margin-top: 40Px;
    }
    .offre_pedago-right {
        position: relative;
        top: unset;
    }
    .offre_pedago-img {
        display: none;
    }
    .offre_pedago-img-mobile {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }
    .offre_pedago-intro {
        margin-top: 40px;
    	width: 100%;
    }
    .offre_pedago-intro.unflexColonne {
        flex-wrap: wrap;
    }
    .unflexColonne .offre_pedago-img-mobile img{
    	width:calc(50% - 10px);
    }
    .offre_pedago-details {
        grid-template-columns: 1fr 1fr;
        display: grid;
        gap: 20px;
    }
    .offre_pedago-presentation, h2.titre-programme  {
        font-size: 20Px;
	}
}

@media screen and (max-width:767px){
    article.offres-pedagogiques {
        padding: 50px 20px;
    }
    .offre_pedago-intro {
        flex-direction: column;
        margin-top: 30px;
		gap:30px;
    }
    .offre_pedago-titre {
        font-size: 30px;
    }
    .offre_pedago-themes {
   		font-size: 22px;
	}
    .offre_pedago-presentation, h2.titre-programme {
        font-size: 18Px;
    }
    .offre_pedago-contenu {
        flex-direction: column-reverse;
        gap: 20px;
        margin-top: 20Px;
    }
    .titre-programme {
        margin-top: 30px;
    }
    .offre_pedago-details {
        grid-template-columns: 1fr;
    }
	.offre_pedago-right{
		min-width:100%;
	}
    
    .unflexColonne .offre_pedago-img-mobile img {
        width: calc(50% - 10px);
    }
}
@media screen and (max-width:600px){
    .unflexColonne .offre_pedago-img-mobile img{
    	width:100%;
    }
}
@media screen and (max-width:380px){
    .programme-item-row {
        flex-direction: column;
        align-items: start;
        gap: 10px;
    }
}

/* Couleurs par themes : art, culture */
.theme-arts .offre_pedago-sub .sep, .theme-culture .offre_pedago-sub .sep,
.theme-arts .offre_pedago-themes, .theme-culture .offre_pedago-themes{
    color: #E70070;
}
.theme-arts .offre_pedago-themes:after, .theme-culture .offre_pedago-themes:after,
.theme-arts .offre_pedago-infos, .theme-culture .offre_pedago-infos{
	/*background: #E70070;*/
    border-color: #E70070;
    color: black;
}
.theme-arts .programme-item-horaire, .theme-culture .programme-item-horaire{
	background: #E70070;
}
.theme-arts .icon-dtl svg, .theme-culture .icon-dtl svg{
	fill:#E70070;
}

/* Couleurs par themes : histoire, citoyennete, education-civique, patrimoine */
.theme-histoire .offre_pedago-sub .sep, .theme-citoyennete .offre_pedago-sub .sep, .theme-education-civique .offre_pedago-sub .sep, .theme-patrimoine .offre_pedago-sub .sep,
.theme-histoire .offre_pedago-themes, .theme-citoyennete .offre_pedago-themes, .theme-education-civique .offre_pedago-themes, .theme-patrimoine .offre_pedago-themes {
    color: #C75821;
}
.theme-histoire .offre_pedago-themes:after, .theme-citoyennete .offre_pedago-themes:after, .theme-education-civique .offre_pedago-themes:after, .theme-patrimoine .offre_pedago-themes:after,
.theme-histoire .offre_pedago-infos, .theme-citoyennete .offre_pedago-infos, .theme-education-civique .offre_pedago-infos, .theme-patrimoine .offre_pedago-infos{
	/*background: #C75821;*/
    border-color: #C75821;
    color: black;
}
.theme-histoire .programme-item-horaire, .theme-citoyennete .programme-item-horaire, .theme-education-civique .programme-item-horaire, .theme-patrimoine .programme-item-horaire{
	background: #C75821;
}
.theme-histoire .icon-dtl svg, .theme-citoyennete .icon-dtl svg,theme-education-civique .icon-dtl svg{
	fill:#C75821;
}

/* Couleurs par themes : nature, biodiversite  */
.theme-nature .offre_pedago-sub .sep, .theme-biodiversite .offre_pedago-sub .sep,
.theme-nature .offre_pedago-themes, .theme-biodiversite .offre_pedago-themes{
    color: #A4C42B;
}
.theme-nature .offre_pedago-themes:after, .theme-biodiversite .offre_pedago-themes:after,
.theme-nature .offre_pedago-infos, .theme-biodiversite .offre_pedago-infos{
	/*background: #A4C42B;*/
    border-color: #A4C42B;
    color: black;
}
.theme-nature .programme-item-horaire, .theme-biodiversite .programme-item-horaire{
	background: #A4C42B;
}
.theme-nature .icon-dtl svg, .theme-biodiversite .icon-dtl svg{
	fill:#A4C42B;
}

/* Couleurs par themes : sport, bien-etre, sante,  */
.theme-sport .offre_pedago-sub .sep, .theme-bien-etre .offre_pedago-sub .sep, .theme-sante .offre_pedago-sub .sep, 
.theme-sport .offre_pedago-themes, .theme-bien-etre .offre_pedago-themes, .theme-sante .offre_pedago-themes{
    color: #1C4965;
}
.theme-sport .offre_pedago-themes:after, .theme-bien-etre .offre_pedago-themes:after, .theme-sante .offre_pedago-themes:after,
.theme-sport .offre_pedago-infos, .theme-bien-etre .offre_pedago-infos, .theme-sante .offre_pedago-infos{
	/*background: #1C4965;*/
    border-color: #1C4965;
    color: black;
}
.theme-sport .programme-item-horaire, .theme-bien-etre .programme-item-horaire, .theme-sante .programme-item-horaire{
	background: #1C4965;
}
.theme-sport .icon-dtl svg, .theme-bien-etre .icon-dtl svg, .theme-sante  .icon-dtl svg{
	fill:#1C4965;
}


/*** OFFRE PEDAGOGIQUE : archive ***/
.post-type-archive-offres-pedagogiques aside {
    display: none;
}
.post-type-archive-offres-pedagogiques  #singleMain {
    max-width: 1400px;
    margin: auto!important;
    padding: 70px 60px;
}
.page-h2-bis{
font-size: 40px;
}
.offres-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    margin: 50px 0;
}
.offre-card {
    background: #EDEFEC;
    display: flex;
    flex-direction: column;
    height: auto;
}
.offres-grid .offre-card img{
	width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
}
.card-offre-pedago-infos{
	padding:30px 20px;
    height:100%;
}
.card-offre-pedago-themes {
    background: white;
    padding: 2px 8px;
    width: fit-content;
    border-radius: 10px;
    margin-bottom: 10px!important;
    background: #84539A;
    color: white;
}
.card-offre-pedago-categories {
    color: #84539A;
}
.offre-pedago-title{
	font-size:24px;
}
.card-offre-pedago-dtls {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.card-offre-pedago-dtls p {
    margin-bottom: 0;
}

.card-offre-pedago-prix, .card-offre-pedago-ville, .card-offre-pedago-niveaux {
    font-weight: 300;
}
.card-offre-more{
	display: flex;
    width: fit-content;
    margin-top: 15px;
    padding: 8px 30px;
    background: transparent;
    border: 2px solid #155276;
    color: #155276;
    border-radius: 10px;
    font-weight: 700;
    transition:0.3s ease-in-out;
}
.card-offre-more:hover{
	background: #155276;
    border: 2px solid #155276;
    color: white;
}
@media screen and (max-width:992px){
    .post-type-archive-offres-pedagogiques  #singleMain {
        padding: 60px 40px;
    }
}
@media screen and (max-width:767px){
    .post-type-archive-offres-pedagogiques  #singleMain {
        padding: 50px 20px;
    }
}

/* Filtre */
.filtre-offres-pedago {
    background: #84539A;
    border-radius: 25px;
    display: flex;
    flex-wrap:wrap;
    gap: 20px 30px;
    justify-content: center;
    padding: 30px;
    margin-top: 50px ;
}
.filtre-offres-pedago *{
	color:white;
}


.filtre-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}
/*
#filtre-themes, #filtre-niveaux{
	width:calc(50% - 15px);
}*/
#filtre-mots, #filtre-ville, #filtre-dates{
	width:calc(33% - 20px);
}
#filtre-rayon{
	width:calc(34% - 190px);
}
#filtre-prix{
	width:140px;
}
#filtre-themes, #filtre-categories{
	width:calc(40% - 20px);
}
#filtre-niveaux{
	width:calc(20% - 20px);
}
#filtre-dates, #filtre-prix label {
	display: flex;
    flex-direction: row;
    gap:10px;
	
	align-items: anchor-center;
}
#filtre-prix label:last-child{
	margin-bottom:0!important;
}
#filtre-dates input{
	-webkit-appearance: none;
}
 #filtre-prix input[type="checkbox"] {
    height: 30Px;
    width: 30Px;
}
.filtre-date-col, .filtre-date-col input {
    width: 100%;
}
.filtre-date-col{
	align-items: center;
    display: flex;
    flex-direction: column;
 }
.filtre-submit {
    width: 100%;
    justify-content: center;
    display: flex;
    margin: 10px 0;
}

.filtre-submit button {
    padding: 10px 30px;
    background: #FEC131;
    border-color: #FEC131;
    color: black;
    border-radius: 15px;
    font-weight: 700;
}
.filtre-choices{
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.filtre-choices label {
    display: flex;
    gap: 10px;
    align-items: center;
}
.filtre-item>label, .filtre-date-col>label {
    display: block;
    font-weight: bold;
    color: white;
}
.filtre-item input {
    border: 1px solid #84539A;
    border-radius: 15px;
    font-weight: 700;
    color: #84539A;
    text-align: center;
    padding: 9px;
    width:100%;
}
.filtre-offres-pedago select{
	color: #84539A!important;
	padding: 9px 18px;
    width:100%;
	border-radius: 15px;
}
#filtre-themes input, #filtre-niveaux input{
	height: 20px;
    width: 20px;
}
.filtre-choices input, .filtre-choices input::placeholder, 
#filtre-dates input, #filtre-dates input::placeholder,
.filtre-offres-pedago select, .filtre-offres-pedago option{
	color: #84539A !important;
}
.filtre-offres-pedago select {
  -webkit-appearance: none; /* Safari / iOS */
  -moz-appearance: none;    /* Firefox */
  appearance: none;
}

#filtre-ville .filtre-choices{
	position:relative;
}
#liste-villes{
    position: absolute;
    z-index: 1000;
    display: none;
    left:2px;
    right:2px;
    bottom:10px;
    background:white;
    transform: translateY(100%);
    padding:10px 20px;
    border-radius: 0 0 8px 8px;
}

#liste-villes .suggestion{
	color:#84539A;
    cursor:pointer;
}
#liste-villes .suggestion:hover{
	color:#b480cb;
}

.aucune-offre-pedago {
    margin: 30px auto;
    text-align: center;
    font-size: 20px;
}
@media screen and (max-width:1200px){
    .filtre-item{
		width:100%!important;
    }

    .offres-grid{
    	grid-template-columns: 1fr 1fr;
    }
    .offre-pedago-title {
        font-size: 22px;
    }
	#filtre-prix {
		order: 1;
	}
	.filtre-submit {
		order: 2;
	}
}
@media screen and (max-width:767px){
    .filtre-choices, #filtre-dates {
        gap: 3px 20px;
        flex-wrap: wrap;
    }
    
    .filtre-date-col {
    	width:fit-content;
        min-width: calc(50% - 10px);
    }
    .offres-grid{
    	grid-template-columns: 1fr ;
    }
    .card-offre-pedago-infos {
        padding: 20px;
    }
    .offre-pedago-title {
        font-size: 20px;
    }
    .filtre-submit button{
    	width:100%;
    }
}
@media screen and (max-width:600px){
	.filtre-date-col, .filtre-date-col input {
    	min-width:100%;
        width:100%;
    }
    .flatpickr-input {
      width: 100%!important;
    }
}