/***** ID & Class *****/
h2.chapo               { font: 400 clamp(1.3rem, 1.2407rem + 0.2593vw, 2rem)/2 var(--fontBody); }

.bloc-contact          { background: #ffffff; width: 100%; padding: 50px; text-align: center; margin: 0 auto; position: relative;}
.bloc-contact a        { color: #000000;}

.ul_list               { margin: 20px 0;}
.ul_list li            { position: relative; padding: 10px 0 10px 35px;}
.ul_list li:before     { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 12px; background: url("../images/li.svg") left top no-repeat;}

.col-4                  { display: grid; grid-template-columns:repeat(4,1fr); align-items: center; background: #ffffff40; text-align: center; padding: 10px 0; margin: var(--marginBloc);}
.col-4 li               { position: relative; padding: 0; border-right: 1px solid #000000;}
.col-4 li span          { width: 18px; height: 12px; background: url("../images/li.svg") 50% 50% no-repeat; display: inline-block; margin-right: 15px;}
.col-4 li:last-child    { border-right: none;}

.center                 { text-align: center;}

@media (max-width:1000px) {
    .col-4              { grid-template-columns:repeat(2,1fr); grid-gap: 10px 10px;  background: #ffffff00; text-align: left;}
    .col-4 li           { border-right: none;  background: #ffffff40; padding: 10px;}
}

@media (max-width:600px) {
    .bloc-contact            { padding: 40px 0;}
    .bloc-contact:before     { content: ''; width: 200vw; left: -50vw; height: 100%; top: 0; z-index: -1;  background: #ffffff; position: absolute;}
    .col-4                   { grid-template-columns:1fr;}
}

/***** Banner *****/ 
.banner             { width: 90vw; max-width: 1600px; position: relative; display: grid; grid-template-columns:auto 470px; align-items: center; }

.banner .photo img  { height: 660px; width: 100%; object-fit: cover;}

.banner .texte      { position: relative;}
.banner .texte>div  { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; background: #ffffff; border-top-right-radius: 80px; border-bottom-left-radius: 80px; padding: 60px 100px; width: 680px;}

@media (max-width:1200px) { 
    .banner                { grid-template-columns:auto 300px;}
    .banner .texte>div     { border-top-right-radius: 60px; border-bottom-left-radius: 60px; padding: 60px 80px; width: 640px;}
    .banner .photo img     { height: 550px;}
}

@media (max-width:1000px) { 
    .banner                { grid-template-columns:auto 200px;}
    .banner .texte>div     { border-top-right-radius: 40px; border-bottom-left-radius: 40px; padding: 50px 70px;}
}

@media (max-width:800px) {
    .banner                { grid-template-columns:1fr; width: 100%;} 
    .banner .photo         { height: 300px;}
    .banner .photo img     { height: 300px; width: 100%; object-fit: cover;}
    .banner .texte>div     { border-radius: 0; position: relative; width: 100%; top: 0; transform: none; padding: 30px 50px;}
}

/***** breadcrumb *****/
.breadcrumb							{ line-height: 0; position: relative; padding-bottom: 40px;}
.breadcrumb li 						{ display: inline-block; font-size: 10px; line-height: 20px; margin-right: 30px; letter-spacing: 0.8px; position: relative;}
.breadcrumb li:after				{ width: 1px; height: 9px; position: absolute; right: -15px; top: 6px; background: #000000; content: "";}
.breadcrumb li:last-child:after 	{ display: none;}
.breadcrumb li a 					{ color: #000000; text-transform: uppercase; letter-spacing: 1.2px;}
.breadcrumb li a.active 			{ color: #000000;}

@media (min-width:1201px) {
    .breadcrumb a:hover                 { color: #000000;}
}
@media (max-width:1200px) { 
    .breadcrumb							{ display: none;}
}



/***** bloc text *****/
.bloc_texte                         { margin: var(--marginBloc);}
.bloc_texte p                       { margin-bottom: 20px;}
.bloc_texte :last-child             { margin-bottom: 0;}


/***** info *****/
.info        { position: relative; font: 400 clamp(2rem, 1.7034rem + 1.2966vw, 3rem)/1.5 var(--fontTitre); margin-left: 200px; padding-top: 50px; display: block; text-align: left; margin-top: 120px; margin-bottom: 120px;}
.info:before { content: ''; position: absolute; left: 0; top: 0;  background: url("../images/quote.svg") 50% 50% no-repeat; width: 49px; height: 41px;}

@media (max-width:1000px) {
    .info     {  margin-left: 120px; margin-top: 80px; margin-bottom: 80px;}
}

@media (max-width:800px) {
    .info            {  margin-left: auto; margin-right: auto; width: 70vw; margin-top: 60px; margin-bottom: 60px;}
    .info:before     { background-size: 70%;}
}



/***** logo marques *****/
.logo-marque     { font-size: 0; line-height: 0; position: relative; display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-start; margin: 40px 0; justify-content: space-around;}
.logo-marque img { max-width: 200px; height: auto;}


/***** timeLine *****/
.bloc-timeline         { overflow: hidden; position: relative; margin: var(--marginBloc);}
.bloc-timeline:before  { content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: #000000; z-index: 1;}

.timeline-block        { width: calc(50% + 8px); display: flex; clear: both; position: relative;}

.timeline-block-right { float: right; justify-content: flex-end;}
.timeline-block-right:before { content: ''; width: 100px; height: 1px; background: #000000; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 9px; z-index: -1}
.timeline-block-left  { float: left; justify-content: flex-start;}
.timeline-block-left:before { content: ''; width: 100px; height: 1px; background: #000000; display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 9px; z-index: -1}

.timeline-content { width: 90%;  background: #ffffff; border-top-right-radius: 80px; border-bottom-left-radius: 80px; padding: 60px;}

@media (max-width:1200px) {
    .timeline-content { border-top-right-radius: 40px; border-bottom-left-radius: 40px; padding: 30px;}
}

@media (max-width:800px) {
    .bloc-timeline:before     { left: 8px;width: 2px;}  
    .timeline-block           { width: 100%; margin-bottom: 30px;}
    .timeline-block-right     { float: none;}
    .timeline-block-left      { float: none; direction: ltr; justify-content: flex-end;}
    
    .timeline-block-left:before     { content: ''; width: 100px; height: 1px; background: #000000; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 9px; z-index: -1}
}

@media (max-width:600px) {
    .timeline-content { border-top-right-radius: 20px; border-bottom-left-radius: 20px; padding: 20px;}
}


/***** Case *****/
.bloc-marques    { width: 90vw; max-width: 1600px; display: grid; grid-template-columns:repeat(3,1fr); align-items: center; position: relative; margin: var(--marginBloc); grid-gap: 60px 60px;}

.bloc-marques .item           { position: relative; font-size: 0; line-height: 0;}
.bloc-marques .item a         { position: relative; display: block;}
.bloc-marques .item a:after   { width: 100%; height: 40%; position: absolute; left: 0; bottom: 0; background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%); z-index: 5; content: "";}
.bloc-marques .item img       { max-width: 100%; width: 100%; height: auto;}
.bloc-marques .item h4        { color: #fff; margin: 0; position: absolute; left: 30px; bottom: 30px; width: calc(100% - 60px); z-index: 10;}
.bloc-marques .item h4:after  { width: 30px; height: 30px; position: absolute; border-radius: 50%; background: url("../images/arrow-slider.svg") 50% 50% no-repeat #ffffff; right: 0;  content: ""; }

.case 										{ width: 100%; height: 100vh; position: fixed; right: 0; top: 0; z-index: 900; display: none;}
.case .close_bg								{ width: 100%; height: 100%; background: #000000; position: absolute; left: 0; top: 0; z-index: 10; opacity: 0.85; cursor: url(../images/close.svg), auto;}
.case .infos								{ width: 50vw; height: 100%; background: #fff; position: absolute; top: 0;  z-index: 20;}
.case .infos .close 						{ position: absolute; top: 0; left: -60px; width: 60px; height: 60px; background: #2062af; background: #fff; cursor: pointer; z-index: 50;}
.case .infos .close:after					{ width: 100%; height: 100%; display: block; background: url(../images/plus.svg) 50% no-repeat; transform: rotate(-45deg); content: "";}
.case .infos .row							{ width: 100%; height: 100%; display: grid; align-items: start; overflow-y: auto; padding: 0 80px;}
.case .infos .row::-webkit-scrollbar:horizontal		{ display: none;}
.case .infos .row .wrap						{ padding: 60px 0;}
.case .infos .row .wrap	p                   { margin-bottom: 20px;}
.case .infos .row img.logo                  { max-width: 200%; margin: 0 auto 60px auto; display: block;}
.case .infos .row .sous_titre				{ margin-bottom: 10px;}


@media (max-width:1366px) {
    .bloc-marques     { grid-gap: 30px 30px;}
}

@media (max-width:1000px) {
    .bloc-marques     { grid-template-columns:repeat(2,1fr);}
}

@media (max-width:600px) {
    .bloc-marques     { grid-template-columns:1fr;}
}

/***** Slider photos marque *****/ 
.swiperMarque                        { margin-top: 60px; position: absolute; width: calc(50vw - 160px); overflow: hidden;}
.swiper-marque .swiper-slide         { display: flex; flex-direction: column;}
.swiper-marque .swiper-slide img     { display: block; width: 100%; max-width: 100%; height: auto; object-fit: cover;}

/*.swiper-marque .swiper-button-next:after { content: none;}
.swiper-marque .swiper-button-prev:after { content: none;}*/

/*.swiper-marque .swiper-button-next { width: 30px; height: 30px; position: absolute; border-radius: 50%; background: url("../images/arrow-slider.svg") 50% 50% no-repeat #ffffff; bottom: 30px; top: inherit; right: 30px}
.swiper-marque .swiper-button-prev { width: 30px; height: 30px; position: absolute; border-radius: 50%; background: url("../images/arrow-slider.svg") 50% 50% no-repeat #ffffff; transform: rotate(180deg); bottom: 30px; top: inherit; right: 70px; left: inherit;}*/


@media (max-width:1366px) { 
    .swiperMarque     { width: calc(60vw - 160px);}
}

@media (max-width:1200px) { 
    .swiperMarque     { width: calc(80vw - 160px);}
}

@media (max-width:1000px) { 
    .swiperMarque     { width: calc(90vw - 160px);}
}

@media (max-width:800px) { 
    .swiperMarque     { width: calc(90vw - 50px);}
}

/* open close animation */
.case .infos								{ right: -55vw; transition: right 500ms ease-in-out 150ms;}
.case .infos.active							{ right: 0; transition-delay: 400ms;}
.case .infos .row							{ opacity: 0; transition: opacity 400ms ease-in-out 0ms; display: block;}
.case .infos.active .row					{ opacity: 1; transition-delay: 800ms;}

@media (max-width:1400px) { 
.case .infos								{ width: 700px; right: -800px;}
}
@media (max-width:1200px) { 
.case .infos								{ width: 70vw; right: -80vw;}
.case .infos .row							{ padding: 0 5vw;}
}
@media (max-width:1000px) { 
.case .infos								{ width: 75vw; right: -85vw;}
}
@media (max-width:600px) { 
.case .close_bg								{ background: #fff;}
.case .infos								{ width: 100vw; right: -100vw; background: #000000; color: #fff;}
.case .infos .close 						{ left: 7.5vw; top: 7.5vw; width: 50px; height: 50px; }
.case .infos .row							{ padding: 0 7.5vw;}
.case .infos .row p br						{ display: none;}
}


/***** Parallax *****/
#parallax       { position: absolute; width: 100%; height: 100vh; max-width: 1600px; z-index: -1;}
.layer          { position: absolute; }
.layer.obj1     { margin-top: 100px; margin-left: calc(100% - 140px);}
.layer.obj2     { margin-top: 500px; margin-left: -200px;}
.layer.obj3     { margin-top: 900px; margin-left: calc(100% - 200px);}

/***** Swiper *****/
.swiperFooter     { margin: var(--marginBloc); }

.swiperFooter .swiper-slide     { display: flex; flex-direction: column;}
.swiperFooter .swiper-slide img { display: block; width: 100%; max-width: 100%; height: 540px; object-fit: cover;}

@media (max-width:1200px) {
    .swiperFooter .swiper-slide img { height: 400px;}
}

@media (max-width:800px) {
    .swiperFooter .swiper-slide img { height: 360px;}
}

@media (max-width:600px) {
    .swiperFooter .swiper-slide img { height: 330px;}
}

@media (max-width:400px) {
    .swiperFooter .swiper-slide img { height: 300px;}
}


/***** faq *****/
.show_hide                        	{ position: relative; margin: 25px 0; overflow: hidden;}
.show_hide .titre                 	{ position: relative; cursor: pointer; padding: 30px 50px 30px 30px;  overflow: hidden; transition: all 400ms ease-in-out; margin-bottom: 10px; background: #ffffff; display: block;}
.show_hide .titre:after          	{ width: 30px; height: 30px; background: url(../images/plus.svg) 50% no-repeat; border-radius: 50%; position: absolute; right: 25px; top: calc(50% + 7.5px); margin-top: -10px; content: ""; transform: translateY(-50%);}
.show_hide .titre.active   			{ transition: all 400ms ease-in-out; }
.show_hide .titre.active:after   	{ background: url("../images/moins.svg") 50% no-repeat;}
.show_hide .hide                  	{ padding: 30px 50px 30px 30px; display: none; }
.show_hide .hide p 					{ margin-bottom: 20px;}
.show_hide .hide :last-child 	 	{ margin-bottom: 0;}
.show_hide .item:last-child         { border-bottom: 0;}

@media (min-width:1201px) {

}
@media (max-width:1200px) {
    .show_hide .titre                 	{ padding: 30px 50px 30px 30px;}
    .show_hide .hide                  	{ padding: 0 50px 30px 30px;}
}
@media (max-width:700px) {
    .show_hide                        	{ margin: 15px 0;}
    .show_hide .titre                 	{ padding: 20px 60px 20px 15px;}
    .show_hide .hide                  	{ padding: 20px 20px 10px 20px;}
    .show_hide .titre:after             { background-size: 70%;}
}
@media (max-width:400px) {
    .show_hide .hide                  	{ padding: 20px 10px 10px 10px;}
}