/***** banner *****/
.banner 							{ position: relative; border-radius: 30px; height: 600px; margin: 140px auto 0; width: 90vw; max-width: 1600px;}
.banner video                       { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 30px; z-index: 2; filter: brightness(0.8);}
.banner .shape                      { left: -740px; top: 310px;}
.banner .titre_main                 { position: absolute; left: 80px; bottom: 35px; color: #fff; z-index: 1; font-size: 25px; font-weight: 700; width: 70%; max-width: 795px; z-index: 2;}

@media (min-width:1201px) {
.banner .rs a:hover                 { background-color: #a68970;}
}


@media (max-width:1380px) {
.banner .rs                         { right: 40px;}
}

@media (max-width:1200px) {
.banner .titre_main                 { left: 40px;}

}
@media (max-width:1024px) {

}
@media (max-width:1000px) {
.banner                             { width: 100%; border-radius: 0; margin-top: 90px;}
.rs                                 { top: calc(50% - 80px); }
.banner video                       { border-radius: 0;}
}

@media (max-width:600px) {
.banner                             { height: auto;}
.banner video                       { height: 280px; position: static;}
.banner .rs                         { display: none;}
.banner .titre_main                 { position: static; font-size: 15px; line-height: 25px; color: #001b3c; width: 85vw; margin: 20px auto 0;}
.banner .shape                      { display: none;}
}





/***** intro *****/
.bloc_texte                          { max-width: 890px; margin: 95px auto;}
@media (max-width:1000px) {
.bloc_texte                          { margin: 95px 0;}
}
@media (max-width:600px) {
.bloc_texte                         { margin: 50px 0;}
}

.textMore                            { margin: 80px 0; display: none;}
.link-moins,
.link-plus                           { cursor: pointer;}
@media (max-width:600px) {
.textMore                            { margin: 50px 0;}
}


/***** services *****/
.services 							    { position: relative;}
.services .grid                         { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 80px; align-items: start; justify-content: center;}
.services .shape                        { top: 40px; left: calc(50% + 320px);}
.services .item                     	{ position: relative; display: grid; align-content: flex-end; border-radius: 20px; overflow: hidden; text-align: center; box-shadow: 0 0 40px 0 rgba(94,76,41,0.1);}
.services .item img                 	{ width: 100%; height: auto; object-fit: cover;}
.services .item .content                { background-color: #fff; padding: 40px 65px 25px;}
.services .sous_titre                   { margin-bottom: 15px;}
.services .arrow_link                   { display: grid; align-items: center; justify-content: center; height: 50px; }
.services .arrow_link:before            { content: url(../images/arrow_link.svg); display: block;}

.services .item:nth-child(3)        	{ margin-top: 210px;}
.services .item:nth-child(4)        	{ margin-top: -210px;}

.services .blockquote               	{ position: absolute; top: 0; right: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 60px; margin-top: -20px;}
.services .blockquote:last-child    	{ bottom: 0; left: 0;}
.services .blockquote p             	{ padding: 60px 0 0; background: url(../images/infini.svg) top center no-repeat; font-size: 20px; line-height: 35px; text-align: center; grid-area: 1 / 2;}

.services .last_block               	{ margin-top: -230px; display: block; position: static;}

.services .link_block               	{ display: block; width: 100px; height: 45px;margin: 0 auto; background: url(../images/arrow_red.svg) center no-repeat; }

@media (min-width:1200px) {
.services .item:hover .arrow_link:before{ transform: translateX(20px);}
}
@media (max-width:1200px) {
.services 							    { grid-gap: 40px;}
.services .item                     	{ min-height: 580px;}
.services .item:nth-child(3)        	{ margin-top: 200px;}
.services .item:nth-child(4)        	{ margin-top: -200px;}
.services .item .content                { padding-left: 40px; padding-right: 40px;}

.services .blockquote               	{ grid-gap: 40px; margin-top: 20px;}
.services .blockquote p             	{ font-size: 20px; line-height: 32px;}
.services .last_block               	{ margin-top: -160px;}
.services .last_block p             	{ font-size: 22px; line-height: 32px;}
}
@media (max-width:1000px) {
.services .grid 					    { grid-gap: 20px;}
.services .item                     	{ min-height: 440px; height: 100%; display: block;}
.services .item img                     { height: 245px; display: block;}
.services .item:nth-child(3)        	{ margin-top: 0;}
.services .item:nth-child(4)        	{ margin-top: 0;}
.services .item p                   	{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-bottom: 0;}
.services .blockquote               	{ position: relative; top: auto; right: auto; grid-column: span 2; display: block; margin: 20px 0 30px;}
.services .blockquote p             	{ padding-top: 50px; background-size: 56px auto;}
.services .last_block               	{ position: relative; top: auto; right: auto; grid-column: span 2; display: block; margin: 40px 0 0 0;}
}
@media (max-width:600px) {
.services .grid                        	{ margin: 30px 0 90px; grid-template-columns: 1fr; grid-gap: 20px;}
.services .item img                 	{ object-position: center top; height: 320px;}
.services .item                 	    { min-height: 0; box-shadow: none; border-radius: 10px;}
.services .item p,
.services .blockquote,
.services .last_block                   { display: none;}
.services .item .content                { padding: 0;}
.services .arrow_link                   { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 4;}
.services .item .sous_titre             { position: absolute; left: 0; bottom: 0; margin: 0; padding: 0 30px; color: #fff; bottom: 20px; width: 100%; text-align: left; z-index: 1; background: url(../images/arrow_link_light.svg) right 30px center no-repeat;}
.services .item:after                   { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 100px; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7));}
}

@media (max-width:400px) {
    .services .item .sous_titre  { padding-right: 80px;}
}

/***** services *****/
.produits                               { position: relative; background: url(../images/misterfloor_accueil_05.webp) center / cover no-repeat; background-attachment: fixed;}
.produits .content                      { background: #fff; max-width: 600px; padding: 70px 75px 75px;}
.produits .content p                    { margin-bottom: 30px;}
.produits li a                          { display: grid; align-items: center; width: 100%; position: relative; color: #003679; background: url(../images/arrow_link.svg) right 30px center no-repeat #f5f0e6; font: 500 16px/24px "Comfortaa"; height: 60px; padding: 0 105px 0 30px; border-radius: 5px; margin-top: 10px;}
@media (min-width:1200px) {
.produits li a:hover                    { background: url(../images/arrow_link_light.svg) right 30px center no-repeat #001b3c; color: #fff;}
}
@media (max-width:1200px) {
.produits                               { background-attachment: initial;}
.produits .content                      { padding: 40px;}
}
@media (max-width:1000px) {
.produits .content                      { max-width: initial;}
}
@media (max-width:600px) {
.produits                               { background: #fff; margin-bottom: 45px;}
.produits .content                      { padding: 0;}
.produits p                             { display: none;}
.produits .sous_titre                   { margin-bottom: 20px;}
.produits li a                          { font-size: 13px; padding-left: 20px; background-position: right 20px center;}
}


/***** infos *****/
.infos                                  { display: grid; grid-template-columns: 1fr 1fr; border-radius: 20px; background-color: #003679; margin-bottom: 95px;}
.infos .map                             { position: relative; height: 100%; overflow: hidden; border-radius: 0 20px 20px 0;}
.infos .map a                           { position: relative; display: block; width: 100%; height: 100%;}
.infos .map img                         { object-fit: cover; object-position: center bottom; width: 1000px; left: 50%; position: absolute; margin-left: -500px; bottom: 0;} 
.infos .map img.marker                  { bottom: 107px; left: 0; right: 0; margin: auto; width: auto;filter:drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px -1px 0 white);}
.infos .content                         { color: #fff; padding: 70px;}
.infos .content a                       { display: inline-block; vertical-align: top; color: #fff; padding-left: 30px;}
.infos .tel		                        { background: url("../images/tel.svg") 0 50% no-repeat; margin-top: 10px;}
.infos .email		                    { background: url("../images/email.svg") 0 50% no-repeat; margin-top: 10px;}
.infos .adresse	                        { background: url("../images/marker.svg") 0 2px no-repeat; margin-top: 20px;}
.horaire                                { position: relative; margin-top: 35px;}
.horaire .current span                  { font-weight: 600; font-size: 16px;}
.horaire .current                       { background-color: #fff; position: relative; color: #000; display: block; border-radius: 5px; padding: 15px 30px; cursor: pointer;}
.horaire .current.active:after          { transform: rotate(180deg) translateY(-50%);}
.horaire .current:after                 { content: url(../images/arrow_down.svg); display: block; line-height: 0; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); transform-origin: top;}
.horaire ul                             { position: absolute; top: 70px; left: 0; width: 100%; background: #fff; padding: 30px; color: #000; border-radius: 5px; display: none;}
.horaire li:not(:last-child)            { margin-bottom: 15px;}
@media (max-width:1200px) {
.infos .content                         { padding: 40px;}
}
@media (max-width:1000px) {
.infos                                  { grid-template-columns: 1fr;}
.infos .map                             { height: 380px; border-radius: 0 0 20px 20px;}
}
@media (max-width:600px) {
.infos                                  { border-radius: 0; overflow: initial; margin: 40px -7.5vw;}
.infos .content                         { order: 1; padding-bottom: 50px;}
.infos .map                             { border-radius: 0;}
.infos .map img                         { bottom: -50px;}
.infos .map img.marker                  { bottom: 55px;}
.horaire .current                       { padding-left: 20px; padding-right: 20px;}
.horaire .current:after                 { right: 20px;}
}


/***** référence ****/
.reference                              { background: url(../images/misterfloor_accueil_06.webp) center top repeat-x fixed; padding: 135px 0; background-size: cover; margin: 55px 0 100px;}
.reference .titre_main                  { color: #fff; margin-bottom: 33px;}
.reference .slider                      { margin: 0 -15px;}
.reference .slick-slide                 { margin: 0 15px; background-color: #fff; border-radius: 5px;}
.reference .slider img                  { width: 100%;}
.reference .slick-arrow                 { position: absolute; top: -70px;}
.reference .slick-next                  { right: 0;}
.reference .slick-prev                  { right: 55px;}
@media (max-width:1200px) {
.reference                              { background-attachment: initial;}
}

@media (max-width:1024px) {
.reference                              { margin: 50px 0;}
}
@media (max-width:600px) {
.reference                              { padding: 50px 0; margin: 0; background: #f5f0e6;}
.reference .slider                      { margin: 0 -7px;}
.reference .slick-slide                 { margin: 0 7px;}
.reference .slick-next                  { right:-10px}
.reference .slick-prev                  { right:45px}
}


/* catalogue */
.catalogue                              { display: grid; align-items: center; grid-template-columns: 1fr 1fr; gap: 80px; margin: 120px 0;}
.catalogue .item                        { display: grid; grid-template-columns: 240px auto; align-items: center;}
.catalogue .item .link                  { margin-top: 20px;}

@media (max-width:1024px) {
.catalogue                              { grid-template-columns: 1fr; gap: 40px; margin: 50px 0;}
}
@media (max-width:600px) {
.catalogue .item                        { grid-template-columns: 1fr;}
.catalogue .item img                    { width: 160px; margin-bottom: 20px;}
.catalogue .link                        { display: block; text-align: center;}
}