/*
 * All the style sheets for cards
 * I use the BEM naming convention : .bloc__element--modificateur
 * Author : Lyne Armand
 */

/************      SUMMARY    ************/
/****  5. FULL CARD                   ****/
/****  5. OUTLINE CARD                ****/
/****  6. BASIC CARD                  ****/
/****  7. HORIZONTAL CARD             ****/

/**** FULL CARD ****/
.card-title{font-size: 1.25rem;line-height: 1.2em;font-family: 'Source Serif Pro'!important;    text-align: center;}

.full-card__blue{height: 250px;width:300px;background-color: var(--blue);padding: 10px;}
.full-card__orange{height: 250px;width: 300px;background-color: var(--orange);padding: 10px;}
.full-card__white{height: 250px;width: 300px;background-color: white;padding: 10px;}
.full-card__header{position: relative;margin-bottom: 15px;z-index: 5;}
.full-card__header .number{position: absolute;align-items: center;display: flex;}
.full-card__header .number .full-card__h6 {font-family: 'Source Serif Pro' !important;font-size: 40px !important;}
.full-card__blue .full-card__header .number .full-card__h6, .full-card__blue .full-card__content {color: white;}

.full-card__white .full-card__header .number .full-card__h6, .full-card__white .full-card__content {color: var(--orange);}
.full-card__white .full-card__content {text-align:right;}
.full-card__blue .full-card__content p {color:white !important;}
.full-card__orange .full-card__header .number .full-card__h6, .full-card__orange .full-card__content  {color: var(--blue);}
.full-card__content {margin-top: 50px;}
.fullIcon-card__orange {width: 300px;height: 140px;;display: inline-block;background-color: var(--orange);margin-top: 50px;text-align:center;}
.fullIcon-card__orange .fullIcon-card__header i {font-size: 30px;padding: 10px;border: 2px solid var(--orange);border-radius: 50%;margin-top: -25px;margin-bottom: 10px;background-color: white; color:var(--blue)}
.fullIcon-card__orange .fullIcon-card__content .full-card__h4{text-transform: uppercase;}
.fullIcon-card__orange:hover .fullIcon-card__header i { border: 2px solid var(--blue);color: var(--orange);}
.fullIcon-card__orange:hover { background-color: white;border: 2px solid var(--blue);}
.fullIcon-card__orange:hover .fullIcon-card__content .full-card__h4 {color: var(--orange) !important;}

.full-card__clearBlue{background-color:rgba(29, 91, 125, 0.5);padding: 30px; width: 50%;}
.full-card__clearBlue h2,.full-card__clearBlue p {color:white;}
.full-card__clearBlue p{text-align:left; padding: 40px;}

.full-card__green{height: 250px;width:250px;background: linear-gradient(to bottom right, var(--darkgreen),  var(--lightgreen));padding: 10px; border-radius:15px;margin-bottom:15px;}
.full-card__green .simpleTxt p {font-size: 24px !important;line-height: 30px; text-align:center; color:white;}
.full-card__green .card__content h4, .full-card__green .card__content p {text-align:left;}
.full-card__green .card__content p {color:white !important;}
.full-card__green .card__content h4 {color:black !important; margin-bottom:20px;}

.full-card__withImage{height:200px; width:300px;padding: 10px;}
.full-card__withImage .full-card__header {position: relative;margin-bottom: 15px;z-index: 5; height:150px;}
.full-card__withImage .full-card__header .number{position: absolute;top: -10px;align-items: center;display: flex;}
.full-card__withImage .full-card__header .number h6 {font-family: 'Source Serif Pro';font-size: 40px;}
.full-card__withImage .full-card__header .image {height: 100%;}
.full-card__withImage .full-card__header .image img{height: 100%;}
.full-card__withImage .full-card__content {margin-top:0px;}

.full-card__withIcon{padding: 10px;height: 250px;max-width: 300px;min-width: 220px;}
.full-card__withIcon .full-card__header {position: relative;margin-bottom: 15px;z-index: 5; height:50%;}
.full-card__withIcon .full-card__header .icon {height: 80%;}
.full-card__withIcon .full-card__header .icon i{font-size:60px; color: var(--blue);}
.full-card__withIcon .full-card__header .title h3{color: var(--blue);text-transform: uppercase;}
.full-card__withIcon .full-card__content {margin-top:0px; height:50%; padding:10px;}

.card-clear{border:none;background:none;}
.card-clear img {margin: auto;}
.card-clear  .card-title{height: 50px;color: var(--orange);}
.card-clear .card-body p{text-align: left;}

.cta-card{width:100%;}
.cta-card__header{position: relative;cursor: pointer;z-index: 5;}
.cta-card__header .cta-card__image img{width: 100%; object-fit: cover;}
#blue-page .cta-card__header .subtitle, #page .cta-card__header .subtitle,#green-page .cta-card__header .subtitle,#brown-page .cta-card__header .subtitle {position: absolute;top: 20px;padding: 0 10px 0 10px;left:-5px;}
#blue-page .cta-card__header .subtitle, #page .cta-card__header .subtitle{background: var(--orange);}
#green-page .cta-card__header .subtitle{background: var(--lightgreen);}
#brown-page .cta-card__header .subtitle {background: var(--lightbrown);}
#blue-page .cta-card__header .subtitle h6, #page .cta-card__header .subtitle h6{text-transform: uppercase;color:var(--blue);}
#green-page .cta-card__header .subtitle h6 {text-transform: uppercase; color:white;}
#blue-page .bg_cta, #page .bg_cta {background-color: var(--blue);}
#green-page .bg_cta {background-color: var(--darkgreen);}
#brown-page .bg_cta {background-color: var(--brown);}
#brown-page .cta-card__header .subtitle h6{text-transform: uppercase; color:var(--brown);}

#cta-conseiller .cta-card {height: 280px;}
#cta-conseiller .cta-card .cta-card__image  {height: 280px;}
#cta-atelier .cta-card {height: 120px;margin-bottom: 40px;}
#cta-contact .cta-card {height: 120px;}
#cta-atelier .cta-card .cta-card__image , #cta-contact .cta-card .cta-card__image {height: 120px;}

.mini-card .cta-card__image img{height: 200px !important;}
.card__blue .subtitle {background:var(--blue) !important;}

/**** OUTLINE CARD ****/
.outline-card__blue, .outline-card__orange{height: auto;margin-bottom: 20px;background-color: white;padding:10px;}
.outline-card__header{position: relative;margin-bottom: 15px;z-index: 5;}
.outline-card__header .category{position: absolute;top: -30px;align-items: center;display: flex;padding-left: 20px;padding-right: 20px;background-color:white;}
.outline-card__header .image img{width: 100%;}
.outline-card__header .category h4{text-transform: uppercase;}
.outline-card__header .category i{margin-right: 10px;}
.outline-card__image img{padding: 15px;}
.outline-card__blue{border: solid 3px var(--blue);}
.outline-card__blue .outline-card__content p, .outline-card__blue .outline-card__header .category h4, .outline-card__blue .outline-card__header .category i{color:var(--blue) !important;}
.outline-card__orange{border: solid 3px var(--orange);}
.outline-card__orange .outline-card__content p,.outline-card__orange .outline-card__header .category h4,.outline-card__orange .outline-card__header .category i {color:var(--orange) !important;}
.outlineIcon-card__orange {width: 300px;height: 140px;display: inline-block;background-color: white;border: 2px solid var(--orange);color: var(--blue);margin-top: 50px;text-align:center;}
.outlineIcon-card__orange .outlineIcon-card__header i {font-size: 30px;padding: 10px;border: 2px solid var(--orange);border-radius: 50%;margin-top: -25px;margin-bottom: 10px;background-color: white;}

/**** BASIC CARD ****/
.basic-card__blue, .basic-card__orange {padding: 10px;height: 500px;}
.basic-card__blue .basic-card__content h2, .basic-card__blue .basic-card__content p{color: var(--blue);}
.basic-card__orange .basic-card__content h2, .basic-card__orange .basic-card__content p{color: var(--orange);}
.basic-card__content {display: inline-flex; padding-top: 10px;}
.basic-card__content p {width:80%}
.basic-card__content h2 {width:20%}

/**** SPECIFIC CARD ****/
.testimonial-card {border: 2px solid var(--blue);padding: 10px; height:200px}
.testimonial-card__footer {display: flex;align-items: center;position:absolute;bottom:10px;width:100%}
.testimonial-card__footer .testimonial-p{text-align: left;color: var(--blue);font-size: 1.5rem;line-height: 1.2em;font-family: 'Source Serif Pro'!important;}

.testimonial-card__sylvo {padding: 20px; height:200px; background: linear-gradient(to bottom right, var(--darkgreen),  var(--lightgreen)); border-radius:20px;margin-bottom: 20px;}
.testimonial-card__sylvo .testimonial-card__content {height:100%;}
.testimonial-card__sylvo .testimonial-card__content p, .testimonial-card__sylvo .testimonial-card__footer p {color:white;}
.testimonial-card__sylvo .testimonial-card__footer {position: absolute; right:10%;}

.tarifs-card {box-shadow: 0 0 10px 1px var(--blue);border-radius: 10px;}
.tarifs-card__title h4 {margin-top: 10px;font-family: 'Raleway' !important;font-weight: bold;}
.tarifs-card__content { display: inline-block; vertical-align: top;text-align: center; /*height: 240px; align-items:center;*/}

#tarif_cpf .tarifs-card__content, #tarif_pole .tarifs-card__content{display: flex;align-items: center;justify-content: center;}

.coach-card__blue{background-color: var(--blue);display: flex;justify-content: center;align-items: center;text-align: left;padding: 9px;height: 235px;}
.coach-card__blue p{color:white;}
.coach-card__blue ul{margin:0px !important; color:white;padding: 0px;}
.coach-card__orange{background-color: var(--orange);display: flex;justify-content: center;align-items: center;text-align: left;padding: 9px;height: 235px;}
.coach-card__orange p{color:var(--blue);}
.coach-card__lightOrange{background-color: var(--lightOrange);display: flex;justify-content: center;align-items: center;text-align: left;padding: 9px;height: 235px;}
.coach-card__lightOrange p{color:var(--blue);}

.atelier-card {display: flex;flex: 1 1 auto;border-bottom: 2px solid var(--orange);padding-bottom: 10px;}
.atelier-card__body .row{margin: 0px;}
.atelier-card-image .atelier-card__img{ width: 100%;height: 90vh;display: flex;justify-content: center;align-items: center;}
.atelier-card__img img{ transition: transform .1s; width:150px; height:auto; padding:10px;} 
.atelier-card__img img:hover{-ms-transform: scale(1.5) translateX(20%); /* IE 9 */-webkit-transform: scale(1.5) translateX(20%); /* Safari 3-8 */transform: scale(1.5) translateX(20%);width: 300px;z-index: 1;}

.lieu-figureCarousel{position: relative;}
.lieu-figureCarousel img{width: 80%;-webkit-transform: scale(1);transform: scale(1);-webkit-transition: .3s ease-in-out;transition: .3s ease-in-out;}
.lieu-figureCarousel figcaption{position: absolute;bottom: 0;left: 0;width: 100%;background-color:rgba(29, 91, 125, 0.8); text-align:left;padding:30px; height:20%}
.lieu-figureCarousel figcaption h3{text-align:left; transform:uppercase; color:var(--orange);margin: 0px; margin-bottom: 10px;}
.lieu-figureCarousel figcaption p{text-align:left;color:white;}

.img-card{width:100%;}
.img-card__header{position: relative;cursor: pointer;z-index: 5;}
.img-card__header .img-card__title{position: absolute;top: 20px;background: var(--orange);padding: 0 10px 0 10px;left:-5px;}
.img-card__header .img-card__image img{width: 100%;}
.img-card__header .img-card__title h6{text-transform: uppercase; color:var(--blue);}

.sylvo-card_withImage{max-width: 400px; min-height: 540px; background: linear-gradient(to bottom right, var(--darkgreen), var(--lightgreen));border-radius: 15px; margin-bottom:10px;}
.sylvo-card_withImage .card__header{position: relative; z-index: 5;}
.sylvo-card_withImage .card__header img {border-top-left-radius: 15px 15px;border-top-right-radius: 15px 15px;width: 100%;height: 280px;object-fit: cover;}
.sylvo-card_withImage .card__content {padding: 15px;}
.sylvo-card_withImage .card__content h3 {text-transform: uppercase; color:black !important; text-align:center !important; margin-bottom: 15px;}
.sylvo-card_withImage .card__content p {text-align:left; margin-bottom: 15px;color: white;}
.sylvo-card_withImage .card__footer {text-align:right;}
.sylvo-card_withImage .card__footer i {color: black;font-size: 40px;}

.training-card .category{position: absolute;top: -10px;left: 10px;background: white;padding: 0 10px 0 10px;}
.training-card__title{text-transform: uppercase;}

/**** HORIZONTAL CARD ****/
.horizontal-card__media img{width: 150px;}

.horizontal-card__blue, .horizontal-card__orange{width: 100%;height: 200px;}
.horizontal-card__blue{border: 2px solid var(--blue);}
.horizontal-card__blue .horizontal-card__content h2, .horizontal-card__blue .horizontal-card__content p{color:var(--blue);text-align:left;}
.horizontal-card__blue  .horizontal-card__dot i {color: var(--blue);}

.horizontal-card__orange{border: 2px solid var(--orange);}
.horizontal-card__orange .horizontal-card__content h2, .horizontal-card__orange .horizontal-card__content p{color:var(--orange)!important; text-align:left;}
.horizontal-card__orange  .horizontal-card__dot i {color: var(--orange);}

.horizontal-card__left .horizontal-card__content, .horizontal-card__right .horizontal-card__content {position: relative;z-index: 5;}

.horizontal-card__left .horizontal-card__content h2 { position: absolute;left: 130px;top:-5px;}
.horizontal-card__left .horizontal-card__content p { position: absolute;width: 180px;left: 130px;top:55px}
.horizontal-card__left .horizontal-card__dot {position: relative;z-index: 5;}
.horizontal-card__left .horizontal-card__dot i {position: absolute;left: 130px;top:140px;font-size: 20px;}
.horizontal-card__left .horizontal-card__media {left: 10px;position: absolute;display: flex;height: 200px;align-items: center;}

.horizontal-card__right .horizontal-card__content h2 {position: absolute;top: -5px;left: 15px;}
.horizontal-card__right .horizontal-card__content p {position: absolute;left: 10px;width: 180px;top: 55px;}
.horizontal-card__right .horizontal-card__dot {position: relative;z-index: 5;}
.horizontal-card__right .horizontal-card__dot i {position: absolute;left: 15px;top: 140px;font-size: 20px;}
.horizontal-card__right .horizontal-card__media {right: 10px;position: absolute;display: flex;height:200px;align-items: center;}

.border-HDB__lightgreen{border-top: 3px solid var(--lightgreen);border-bottom: 3px solid var(--lightgreen);border-right: 3px solid var(--lightgreen);border-top-right-radius: 4px;border-bottom-right-radius: 4px;}

/**** ****/
.card__blue .card-body{background-color:var(--blue);}
.card__blue h5 {color:white; min-height:50px;}

/************  Mobile: <768px  ************/
@media (max-width:767px){
	.full-card__blue, .full-card__orange{border: solid 2px white;}
	.full-card__blue, .full-card__orange {height: 100%;width: 100%;}
	.coach-card__blue,.coach-card__orange, .coach-card__lightOrange{height:100% !important;}
	.atelier-card {display: block;}
	.card-clear__img { height: 90px;width: 90px;}
	.card-clear__body h5 {height: 20px;}
	.full-card__clearBlue {padding: 10px;width: 80%;}
	#piece-quetigny-mobile .card-clear__body p {color:white;}
	#piece-quetigny-mobile .card-clear__img {height: auto;}
	.full-card__withIcon {height: 220px;width: 220px;}
	#cta-conseiller .cta-card .cta-card__image  {height: 120px;margin-bottom: 40px;}
	#cta-conseiller .cta-card {height: 160px;}
}

/************  Tablette en mode portrait: 768px - 820px ************/
@media (min-width:768px) and (max-width: 821px){
	#coach3_row1 .coach-card__orange, #coach3_row1 .coach-card__lightOrange, #coach3_row2 .coach-card__orange, #coach3_row2 .coach-card__lightOrange{height:340px !important;}
	.full-card__withIcon {height: 220px;width: 220px;}
	#cta-conseiller .cta-card .cta-card__image  {height: 120px;margin-bottom: 40px;}
	#cta-conseiller .cta-card {height: 160px;}
	.full-card__green .simpleTxt p {font-size:18px;}
}

/************  Entre deux: 822px - 990px ************/
@media (min-width:822px) and (max-width: 990px){
	#cta-conseiller .cta-card .cta-card__image  {height: 120px;margin-bottom: 40px;}
	#cta-conseiller .cta-card {height: 160px;}
	.full-card__green .simpleTxt p {font-size:18px;}
}

/************  Tablette en mode paysage: 822px - 1200px ************/
@media (min-width:822px) and (max-width: 1200px){
	.deontologie .full-card__blue, .deontologie .full-card__white{width: 200px;}
	#coach3 .coach-card__orange,#coach3 .coach-card__lightOrange{height:340px !important;}
	.full-card__withIcon {height: 220px;width: 220px;}
	.benefSylvo-card_textbox::after{right:-60px;}
	.benefSylvo-card,.benefSylvo-card_img {height: 420px;}
}

/************  Ordinateur portable ************/
@media (min-width:1201px) and (max-width: 1600px){
	.tarifs-card{width:100%;height:300px}
}

/************  Très grand écran ************/
@media (min-width:1601px){
	.tarifs-card{width:100%;height:300px}
}