@charset "UTF-8";
/*!http://my-regieconcept.com/*/
/* ===== VARIABLES GLOBALES ===== */
:root {
	--space-xs: clamp(0.5rem, 1vw, 1rem);
	--space-s:  clamp(1rem, 2vw, 2rem);
	--space-m:  clamp(2rem, 4vw, 4rem);
	--space-l:  clamp(4rem, 6vw, 8rem);
	--space-xl: clamp(6rem, 8vw, 12rem);
	--max-width: 1200px;
	--bg-color: #f4f4f4;
	--bg-color-second:#ffffff;
	--bg-color-invert:#000000;
	--text-color: #000000;
	--text-color-invert: #ffffff;
	--accent-color: #000000;
	--back-reference:#f4f4f4 url(/images/mrc-shadow-light.jpg) center center;
}
[data-theme="dark"] {
	--bg-color: #1d1d1d;
	--bg-color-second:#000000;
	--bg-color-invert:#ffffff;
	--text-color: #ffffff;
	--text-color-invert: #000000;
	--accent-color: #ffffff;
	--back-reference:#000 url(/images/mrc-shadow-dark.jpg) center center;
}
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}ul,li{list-style-type: none;}
/*!guillements*/q:before{content:open-quote}q:after{content:close-quote}*:lang(fr)>*{quotes:"\00AB\00A0" "\00A0\00BB"}*:lang(en)>*{quotes:"\201C" "\201D"}
/*!outdated*/#outdated{width:100%;padding:10px 0 10px 0;font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:14px;color:#fff;background-color:#f25648}#outdated a,#outdated a:visited{color:#fff;text-decoration:underline}#outdated a:hover{color:#fff}
/* EU Cookies */.divascookies{display:none;position:fixed;left:0;bottom:0;width:100%;z-index:999999;background:#fff;background: rgba(255,255,255,1)}.divascookies>.divascookies-banner-container{position:relative;padding:2rem;overflow:hidden;text-align:center;font-weight:normal}.divascookies p.divascookies-banner-text{position:relative;font-size:1em;line-height:1.325;display:inline-block;padding:0 0 .8em 0;font-weight:500}span.divascookies-policy-link a{white-space:nowrap;color:#1d1d1d; text-decoration:underline;opacity: .8; transition:opacity .3s ease 0s}span.divascookies-policy-link a:hover{opacity:1}.divascookies-banner-container>.divascookies-accept-button-container{display:block}.divascookies-accept-button-container>.divascookies-accept-button-text{display:inline-block;font-size:1em;line-height:1;cursor:pointer;background: rgba(66,75,61,1);color:#fff;padding:.317em 1.317em;-moz-border-radius:1em;-webkit-border-radius:1em;border-radius:1em;transition:background-color .3s ease 0s}.divascookies-accept-button-container>.divascookies-accept-button-text:hover{background:rgba(66,75,61,.8)}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */*,*:after,*::before{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}.clearfix:before,.clearfix:after{display:table;content:" "}.clearfix:after{clear:both}
html{font-size:100%;height:100%;scroll-behavior:smooth}
.wf-loading body{font-family:Arial, Helvetica, sans-serif}
body{width:100%;height:100%;font-family: "Gantari", sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal;line-height:1.325;background: var(--bg-color-second);color:var(--text-color)}
header{width:100%;height:4em;background: rgba(255,255,255,0);padding: 0 5%}
#content{background: var(--bg-color);transition: background 0.3s, color 0.3s;}

body.frontpage #tarteaucitronIcon {background-color:#000 !important;color:#fff !important;border:none !important;border-radius:100%;opacity: .5;transition:opacity .3s linear;width: 50px;height:50px;display: flex;align-items: center;justify-content: center;}
body.frontpage .tarteaucitronIconBottomLeft {bottom: 10px !important;left: 10px !important}
body.frontpage .tarteaucitronIconBottomLeft #tarteaucitronManager {border-radius: 0 !important}

body.frontpage #tarteaucitronIcon #tarteaucitronManager {cursor:pointer;display: inline-block;padding:8px;border:none}
body.frontpage #tarteaucitronIcon #tarteaucitronManager img {max-width:100%;width:100%;height:auto}
body.frontpage #tarteaucitronIcon:hover{opacity:1}
body.frontpage #tarteaucitronIcon span {display:none !important}

body.frontpage #tarteaucitronAlertBig {
  position: fixed !important;
  left: 10px !important;
  width: 280px !important; /* ou ce que tu veux */
  height: 35vh !important; /* la hauteur s’adapte au contenu */
  background-color: #fff !important;
  color: #000 !important;
  border-radius: 25px !important;
  padding: 1rem !important;
  box-shadow: 4px 0 12px rgba(0,0,0,.2) !important;
}
body.frontpage .tarteaucitronAlertBigBottom {bottom:10px !important}
body.frontpage #tarteaucitronDisclaimerAlert{color: #000 !important}
body.frontpage #tarteaucitronPrivacyUrl{display: block !important; color: #000 !important; width: 100%; text-align: center}
body.frontpage #tarteaucitronDisclaimerAlert{margin: 0 0 1rem 0 !important}

body.frontpage #tarteaucitronAlertBig #tarteaucitronPersonalize2 {background: #000;color: #fff;cursor: pointer;display: inline-block;font-size: 16px !important;line-height: 1.2;padding: 5px 16px;text-decoration: none;margin-left: 7px;border-radius: 15px;}
body.frontpage #tarteaucitronAlertBig .tarteaucitronDeny {background:#fff !important;color:#000;border: 1px solid #000;border-radius: 15px;line-height: 1.2;padding:5px 16px}
body.frontpage #tarteaucitronAlertBig #tarteaucitronCloseAlert{font-size: 14px; background:#fff !important;color:#000;border: 1px solid #000 !important;border-radius: 15px;line-height: 1.2;padding:5px 16px;margin: 1rem 0 1rem 0 !important}

.header--fixed{position:fixed;z-index:8;left:0;top:0}
.headroom{transition:all .50s ease-in-out;will-change:transform}
.headroom--pinned{transform:translateY(0)}
.headroom--unpinned{transform:translateY(-100%)}
.headroom--top{background: #000;background: rgba(0,0,0,0)}
.headroom--not-top{background: #000; background: rgba(0,0,0,.8)}
/* Hero */
#hero{width:100%;height:60vh;position:relative;background: #1d1d1d url(/images/mrc-logo.webp) center center no-repeat;background-size:3%}

@media only screen and (max-width:768px){
	header{padding:0 1em}
	#hero{height:60vh;background-size:10%}
	#content{height: auto; padding: 0 0 5em 0 !important}
}
@media only screen and (min-width: 1024px) {
    header{height:5em}
    #hero{height:95%}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
	header{height:5em}
    #hero{height:95%}
}
@media only screen and (min-device-width :768px) and (max-device-width :1024px) and (orientation :landscape){
	header{height:5em}
    #hero{height:95%}
}

/*Page accueil*/
.hero-video{position: relative;width: 100%; height: 100% !important;overflow: hidden;z-index: 2;}
.hero-swipper{width: 100%; height: 100% !important;}
.hero-video video{position: absolute;top: 0;left: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;-o-object-position: center;object-position: center;z-index: 9}
/* Hide Play button + controls on iOS */
video::-webkit-media-controls {display:none !important;}

.story {position: absolute;width:100%;height:100%;bottom:0;left:0;z-index:11;text-align:center;background:linear-gradient(to top, rgba(0,0,0,.3), rgba(0,0,0,0))}
.story{display:flex;flex-direction:column;justify-content:space-around}
.story-end{align-items:center;justify-content:flex-end;padding: 0 0 8% 0;}
.story-start{align-items:center;justify-content:flex-start;}
.story-center{align-items:center;justify-content:center}

@media only screen and (max-width:768px){
	.story-end{padding: 0 0 5em 0}
	.story-start{padding: 0 0 5em 0}
    .tag{padding:0 0 .325em 0;font-size:1.5em}
	.tag-small{width:100%;padding: 0 0 2em 0; text-align: center; margin-right:0}
    .tag-small img{width:180px;height: auto; margin: 0 auto 2em auto}

}
@media only screen and (min-width: 1024px) {
    .tag{width:80%;min-width:535px}
    .line1,.line2,.line3{opacity:0;display:block;animation: slideout 2s 0s forwards;animation-timing-function: ease-out}
    .line1{animation-delay:1s}.line2{animation-delay:1s}.line3{animation-delay:1.5s}
}
@keyframes slideout{0%{opacity:0;transform:translateY(25px);}40%,100%{opacity:1;transform:translateY(0px);}}

/* Typo & bouton */
h1{font-size:.825rem;margin:0;padding:0 0 .325em 0;line-height:1.2;font-style:400; text-transform: uppercase}
h2{font-size:4rem;color:#000;font-weight:800;margin:0 0 .325em 0;padding:0;line-height:1.1}
h3{font-size:1.5em;color:#fff;font-weight:800;margin:0;padding:0;line-height:1.1;text-transform:uppercase}
h4{font-size:1em;font-weight:normal;line-height:1.1;margin: 0; padding: 0}

p{font-size:1em;font-weight:400;line-height:1.5;margin:0;padding:0}
.item-page p{margin-bottom: 1rem; line-height: 23px}

@media only screen and (max-width:768px){
}

.navigation a{display:inline-block;padding:0 .325em;color:#fff;opacity:1}
.navigation a:hover{opacity:.8}

a{margin:0;padding:0;text-decoration:none;}
a.link-orange,a.krousel{color:#000}
button{border:none;cursor:pointer}
a.button,button.button{text-align: center; margin: 0 auto;padding:.313em 1em}
.button-book{font-size:1.325em;background:#424b3d;color:#fff !important;border-radius:20px}

.button-menu{background: #000;color: #fff !important;padding:.313em 1em;border-radius: 20px}
.item-page a{color:#1d1d1d; font-weight:700}
.item-page a:hover{color:#000}

.legal a,.navigation a{transition:opacity .3s linear}
.swiper-button-prev,.swiper-button-next{transition:color .3s linear}
a:active,a:hover{outline-width:0px}a:active,a:hover,a:focus{outline-style:none}a:focus{outline-width:medium}


#head- .logo img {height:100%;max-height:3.325em;width: auto;display:block;opacity:1;transition:all .3s linear}
#head- .logo img:hover{transform: scale(1.05);opacity:.8}

/*Menu*/
.dropbtn {display:none;}
.dropdown-content a{font-size: 1em;font-style:normal;font-weight:normal;display:inline;color:#fff;padding:0 .825em;margin:0 .225rem;opacity:1}
.dropdown-content a.noancre{padding:0 .125em;margin:0 .225rem}
.dropdown-content a:hover{opacity:.8}
#theme-toggle{color:#fff;background:none;border:none;cursor:pointer;transition:transform 0.3s;margin-left:.225rem}
#theme-toggle:hover{transform: scale(1.2)}
/* Desktop - menu inline */
@media only screen and (min-width: 769px) {
	.dropbtn {display:none;}
	.dropdown-content { display: block !important; position: static; box-shadow: none; background: transparent; }
	.dropdown-content a { display: inline-block; }
}


/* Mobile - dropdown */
@media only screen and (max-width: 768px) {
	#head- .logo img {max-height:3em}
	.dropbtn .svg-inline--fa{font-size: 2em}
	.dropbtn {display: block;background-color: #000;color: #fff;padding: .325em;border: none;cursor: pointer;}
  .dropdown-content {
    display: none;
    position: absolute;
    right: 5%;
    background-color: #000;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 12;
    min-width: 160px;
    width: max-content;
	opacity:0;transition:all .3s linear
  }
	.dropdown-content.open {display: block;opacity:1}
	.dropdown-content.open a{display: block;padding:1em !important;margin:0 !important;color:#fff;}
	.dropdown-content.open a.noancre{display:none;padding:.5em 1em !important;margin:0 !important}
	.dropdown-content.open a:hover{background-color:rgba(255,255,255,.2)}
}


/* CLASS */
.text-right{text-align: right}
.text-left{text-align: left}
.justify{text-align: justify}
.clear{clear: both}
.text-center{text-align: center}
.italic{font-style: italic}
.upper{text-transform: uppercase}
.small{font-size: 81.3%;line-height:125.0%}
.large{font-size:125.0%}
.rotate{transform: rotate(-10deg)}

.responsive{max-width:100%;width:100%;height:auto}

.text-shadow{text-shadow: 2px 2px 4px #1d1d1d000;}
.box-shadow{box-shadow:0 0 .75em rgba(57,58,60,.5)}

.flex{display:flex;flex-direction: row;flex-wrap:nowrap;justify-content: space-between;}
.flex-align-v{align-items: center;}

.hidden{display: none}
.rwd-block{display:block}
.rwd-line{display:inline}
.milieu{margin: 0 5%}
.margin-X1{margin-top: .5em}
.margin-X2{margin-top: 1em}
.margin-X3{margin-top: 1.5em}
.margin-X4{margin-top: 2em}
.margin-bX2{margin-bottom: 1em}
.margin-bX3{margin-bottom: 1.5em}
.padding-x1{padding: .5em}
.padding-x2{padding: 1em}
.padding-X3{padding-top: 1.5em}

.by-tel:link,.by-tel:visited,.by-tel:hover,.tel-ws:link,.tel-ws:visited,.tel-ws:hover,.events{pointer-events: auto;cursor: pointer}

/*Signature*/
.svg-inline--fa.fa-mrc{font-size:2rem;color:var(--text-color);opacity:.2}

@media only screen and (max-width: 768px) {
	.milieu{margin: 0}
	.margin-top-m2{margin-top:2em}
	.rwd-block{display:block}
}
@media only screen and (min-width: 1024px) {
	.by-tel:link,.by-tel:visited,.by-tel:hover,.tel-ws:link,.tel-ws:visited,.tel-ws:hover,.events{pointer-events:none;cursor:default;}
    .left{float: left}.right{float: right}
    .border-right{border-right: 1px solid #424b3d}
    .padding-right{padding:0 4em 0 0}
    .padding-left{padding:0 0 0 4em}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
    .left{float: left}.right{float: right}
}
@media only screen and (min-device-width :768px) and (max-device-width :1024px) and (orientation :landscape){
    .left{float: left}.right{float: right}
}


/*Colonne*/
.row{margin:0 auto}.col-90{width:90%;max-width:1200px}
.col-90{padding-left: 0; padding-right:0}
.col-100{width:100%}


@media only screen and (max-width: 768px) {
	.milieu{margin: 0}
}
@media only screen and (min-width: 1024px) {
	.col-10{width: 10%}.col-15{width: 15%}.col-20{width:20%}.col-22{width:22%}.col-23{width:23%}.col-25{width:25%}.col-30{width:30%}.col-33{width:33.3333333%}.col-35{width:35%}.col-45{width:45%}.col-40{width:40%}.col-50{width:50%}.col-55{width:55%}.col-60{width:60%}.col-65{width:65%}.col-70{width:70%}.col-74{width:74%}.col-75{width:75%}.col-80{width:80%}.col-85{width:85%}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
	.col-10{width: 10%}.col-15{width: 15%}.col-20{width:20%}.col-22{width:22%}.col-23{width:23%}.col-25{width:25%}.col-30{width:30%}.col-33{width:33.3333333%}.col-35{width:35%}.col-45{width:45%}.col-40{width:40%}.col-50{width:50%}.col-55{width:55%}.col-60{width:60%}.col-65{width:65%}.col-70{width:70%}.col-74{width:74%}.col-75{width:75%}.col-80{width:80%}.col-85{width:85%}
}
@media only screen and (min-device-width :768px) and (max-device-width :1024px) and (orientation :landscape){
	.col-10{width: 10%}.col-15{width: 15%}.col-20{width:20%}.col-22{width:22%}.col-23{width:23%}.col-25{width:25%}.col-30{width:30%}.col-33{width:33.3333333%}.col-35{width:35%}.col-45{width:45%}.col-40{width:40%}.col-50{width:50%}.col-55{width:55%}.col-60{width:60%}.col-65{width:65%}.col-70{width:70%}.col-74{width:74%}.col-75{width:75%}.col-80{width:80%}.col-85{width:85%}
}

.svg-mrc{
  color: #e6007e !important; /* change la couleur ici */
  width: 150px;
  height: auto;
}

/*  OVERLAY */
.overlay {position: fixed;top: 0;left: 0;z-index: 8;width: 100%;height: 100%;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;background-color: transparent;opacity: 0;visibility: hidden;}
.overlay.show {opacity: 0.8;visibility: visible}

.swipper-content{position: relative}
.swiper{width:100%;height:100%}

@media only screen and (max-width:768px){
.swipper-content .col-90{width:100%}
.swipper-content .details{padding: 5% 5% 0 5%}
}

@media only screen and (min-width: 1024px) {
	.swipper-about .cover img.responsive{max-width:100%;width:378.667px;height:auto}
}


.swipper-home h2{color:#fff; text-transform: uppercase;margin-top:.325rem !important;text-shadow: 2px 2px 0px rgba(0,0,0,.4)}
/* état initial */
.swipper-home h2,.swipper-home .logo-tag {opacity: 0;transform: translateY(30px)}
/* classe animée */
.animate-logo {animation: fadeInUp 0.8s ease forwards;animation-delay: 0.2s;}
.animate-title {animation: fadeInUp 0.8s ease forwards;animation-delay: 0.6s;}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.swipper-home .swiper-button-next,.swipper-home .swiper-button-prev {opacity: 0;transform: translateY(20px);animation: fadeSlideUp 0.8s ease forwards;animation-delay: 1.2s;}
@keyframes fadeSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@media only screen and (max-width:768px){
	.swipper-home .logo-tag img{width: 180px; height: auto}
	.swipper-home h2{font-size:2rem}

}

.swipper-home .slide-1{background:url(/images/production_x1.webp) center center;background-size:cover}
.swipper-home .slide-2{background:url(/images/regie_x1.webp) center center;background-size:cover}
.swipper-home .slide-3{background:url(/images/fabrication_x1.webp) center center;background-size:cover}
.swipper-home .slide-4{background:url(/images/audiovisuel_x1.webp) center center;background-size:cover}

@media only screen and (min-width: 1024px) {
	.swipper-home .slide-1{background:url(/images/production.webp) center center;background-size:cover}
	.swipper-home .slide-2{background:url(/images/regie.webp) center center;background-size:cover}
	.swipper-home .slide-3{background:url(/images/fabrication.webp) center center;background-size:cover}
	.swipper-home .slide-4{background:url(/images/audiovisuel.webp) center center;background-size:cover}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
	.swipper-home .slide-1{background:url(/images/production.webp) center center;background-size:cover}
	.swipper-home .slide-2{background:url(/images/regie.webp) center center;background-size:cover}
	.swipper-home .slide-3{background:url(/images/fabrication.webp) center center;background-size:cover}
	.swipper-home .slide-4{background:url(/images/audiovisuel.webp) center center;background-size:cover}
}
@media only screen and (min-device-width :768px) and (max-device-width :1024px) and (orientation :landscape){
	.swipper-home .slide-1{background:url(/images/production.webp) center center;background-size:cover}
	.swipper-home .slide-2{background:url(/images/regie.webp) center center;background-size:cover}
	.swipper-home .slide-3{background:url(/images/fabrication.webp) center center;background-size:cover}
	.swipper-home .slide-4{background:url(/images/audiovisuel.webp) center center;background-size:cover}
}

.swipper-home .swiper-button-prev,.swipper-home .swiper-button-next{color:#fff;font-size:1.5em;cursor:pointer;}
.swipper-home .swiper-button-prev:hover,.swipper-home .swiper-button-next:hover{color:#fff}
.swipper-home .swiper-pagination{margin: 0 1em}
.swipper-home .swiper-pagination .swiper-pagination-bullet{background:#fff;opacity:.5}
.swipper-home .swiper-pagination .swiper-pagination-bullet-active{background:#fff;opacity:1}


.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

/* Animation activée */
.animate-on-scroll.inview {
  opacity: 1;
  transform: none;
}

/* Variantes */
.fade-up    { transform: translateY(30px); }
.fade-left  { transform: translateX(-30px); }
.fade-right { transform: translateX(30px); }
.zoom-in    { transform: scale(0.95); }

@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .animate-on-scroll.inview {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

#about,#expertises,#references,#realisations,#contact{height:auto;transform:translateZ(0);}
#expertises{will-change:transform}

/*A Propos*/
#about,#legal{padding-block: var(--space-xl);}
#about h1{color:var(--text-color)}
#about h2{color:var(--text-color);position: relative; padding: 0 0 2rem 0}
#about h2::before{content:"";background:var(--text-color);position:absolute;width:1em;height:.1em;bottom:0;left:0;border-radius:5px}
.about-title{padding: var(--space-s);}
.about-text{padding: var(--space-s);}
.logo-container {width: 100%;height: auto;display: flex;justify-content: center;align-items: center;position: relative;}
.svg-wrapper {width: 100%;height: auto;aspect-ratio: 474.6 / 346.6;position: relative;}
.logo-container svg {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.logo-stroke {stroke: var(--text-color);fill: none;stroke-width: 2;stroke-dasharray: 1500;stroke-dashoffset: 1500;transition: stroke-dashoffset 2s ease;}
.logo-stroke.visible {stroke-dashoffset: 0;}
.logo-fill {fill: var(--text-color);stroke: none;opacity: 0;transition: opacity 0.6s ease;}
.logo-fill.visible {opacity:1}
.sharer{width: 100%; margin-top: 2rem; text-align: center}
.apropos p{text-align: justify}

@media only screen and (max-width:768px){
	#about h2{font-size: 2.5rem; letter-spacing:-0.05em;}
	#about .flex{flex-direction:column}
	.logo-container{margin: 2rem 0 1rem 0}
	.svg-wrapper{width: 50%}
	
}

/*Legals*/
#legal h1{text-align: center; font-size: 2em; color:var(--text-color); margin-bottom: 2em !important}
#legal h2{font-size: 1.325em;color:var(--text-color) !important;}
#legal h2:not(:first-child){margin:2em 0 0 0 !important}
#legal p{text-align: justify}
#legal a{text-decoration:underline}

/*Video*/
#expertises{padding-block: var(--space-xl);background: var(--bg-color-second);transition:background 0.3s, color 0.3s}
#expertises h2{font-size:3rem;color:var(--text-color);font-weight:700;margin:1rem 0 3rem 0;padding:0;line-height:1}

.video-section{width:100%;max-width:1200px; margin: 0 auto}
.video-block{position:relative;width:100%;height:40vh;background:#000;overflow:hidden;opacity:0;transform:translateY(30px);transition: opacity 1.2s ease,transform 1.2s ease;outline:none;margin-bottom:1rem;will-change: transform}
/* Le bouton est caché par défaut */
.video-toggle {position: absolute;bottom: 1rem;right: 1rem;z-index: 4;background: rgba(0,0,0,0.6);color:#fff;border: none;border-radius: 50%;padding: 0.6rem 0.8rem;font-size: 1.2rem;cursor: pointer;opacity: 0;pointer-events: none;transition: opacity 0.3s}
/* Affichage au survol (desktop) */
.video-block:hover .video-toggle{opacity:1;pointer-events:auto}
/* Affichage au focus/tap (mobile accessible) */
.video-block:focus-within .video-toggle{opacity:1;pointer-events:auto}
.video-block.visible{opacity:1;transform:translateY(0)}
.video-block video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1;object-position:center center}	
.video-block .video-overlay{position:absolute;inset:0;background: rgba(0, 0, 0, .6);transition:background 0.5s ease;z-index:2}
.video-block.is-playing .video-overlay{background:rgba(0,0,0,.3)}
.video-content{position:relative;z-index:3;color:#fff;text-align:center;top:50%;left:50%;transform: translate(-50%, -50%);padding:2rem; width: 100%; max-width: 800px;box-sizing: border-box;}	
.video-block .video-content h3{font-size:2.325rem;font-weight:800;color:#fff}
.video-block .video-content h3{position:relative;padding:0 0 2rem 0 !important;margin-bottom:1rem}
.video-block .video-content h3::before{content:"";background:#fff;position:absolute;width:1em;height:.1em;bottom:0;left:50%;transform:translate(-50%, -50%);border-radius:5px}
.video-block .video-content p{}
	
@media (max-width: 768px) {
	.video-block{height:60vh}
	.video-block video{object-position:center top}
	.video-content{}
}

/* SECTION REFERENCES */
#references {padding-block: var(--space-xl);background: #f4f4f4}
@media only screen and (min-width: 1024px) {
	#references {padding-block: var(--space-xl);background:var(--back-reference);background-size:cover;background-attachment: fixed}

}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
}
@media only screen and (min-device-width :768px) and (max-device-width :1024px) and (orientation :landscape){
}
#references h2{font-size:3rem;color:var(--text-color);font-weight:700;margin:1rem 0 1rem 0;padding:0;line-height:1}
#references p{margin-bottom: 3rem;color:var(--text-color)}

.references .swiper-wrapper-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	position: relative}

.references .swiper {
  width: 100%;
  background: #fff;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.references .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(100%);
  background: #fff;
  transition: filter 0.4s ease-in-out;
}

.references .swiper-slide img {
  max-width: 100%;
  max-height: 130px;
}

.references .swiper-slide:hover {
  cursor: pointer;
  filter: grayscale(0%);
}

@media (max-width: 768px){
	.references .swiper-wrapper-container {
	width: 90% !important;
	max-width: 90 !important;
	margin: 0 auto;
	}
  .references .swiper-slide img {
    max-width: 100%;
    max-height: 200px;
  }
}

.references .swiper-pagination .swiper-pagination-bullet {background:#000;opacity:.2}
.references .swiper-pagination .swiper-pagination-bullet-active{background:#000;opacity:.5;}
.references .swiper-button-prev,.references .swiper-button-next{display: none}
.references .swiper-button-prev,.references .swiper-button-next{position:absolute;top:50%;transform: translateY(0);color:rgba(0,0,0,.2);font-size: 2em;cursor: pointer;z-index:10}
.references .swiper-button-prev{left:-2em}
.references .swiper-button-next{right:-2em;}
.references .swiper-button-prev:hover,.references .swiper-button-next:hover{color:rgba(0,0,0,.5)}
.references .swiper-pagination-control{width:100%;text-align: center; position: absolute; padding: 1rem 0}
.references .swiper-pagination {width:100%;margin: 0 auto}

@media only screen and (min-width: 1300px) {
	.references .swiper-button-prev,.references .swiper-button-next{display: block}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
	.references .swiper-button-prev,.references .swiper-button-next{display: block}
}
@media only screen and (min-device-width :768px) and (max-device-width :1024px) and (orientation :landscape){
	.references .swiper-button-prev,.references .swiper-button-next{display: block}
}



/*Operations*/
#realisations{padding-block: var(--space-xl);background: var(--bg-color-second);transition:background 0.3s, color 0.3s}
#realisations h2{font-size:3rem;color:var(--text-color);font-weight:700;margin:1rem 0 3rem 0;padding:0;line-height:1}

.grid-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* Forcé à 4 colonnes */
	/*grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));*/
	gap:0;
	padding:0;
	background: #000;
	perspective: 1200px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
		}
		
@media (max-width: 1024px) {
  .grid-gallery {grid-template-columns: repeat(2, 1fr); /* Tablette : 2 colonnes */}
}

@media (max-width: 768px) {
  .grid-gallery {
    grid-template-columns: 1fr; /* Mobile : 1 colonne */
  }
}

.grid-item {
	position: relative;
	/*aspect-ratio: 16 / 9;*/
  overflow: hidden;
  background: #000;
	perspective: 1000px; /* à tester, entre 600 et 1200 */
  backface-visibility: hidden;
  touch-action: manipulation; /* améliore l'expérience tactile */
	transition: transform 0.2s ease; /* 3D */
  transform-style: preserve-3d; /* 3D */
  will-change: transform; /* 3D */
	cursor:crosshair}
.grid-item:hover {outline:2px solid #fff;outline-offset:-2px;z-index:1}	
.grid-item:hover::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 30px rgba(255,255,255,0.1);pointer-events:none}
.grid-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s ease, filter 0.3s ease}
.grid-item:hover img,.grid-item:focus-within img,.grid-item:has(:focus) img{transform:scale(1.05);filter:brightness(1.1) grayscale(30%) blur(1px)}
.grid-overlay{position:absolute;inset:0;backdrop-filter:blur(4px);background:rgba(0,0,0,0.4);display:flex;justify-content:center;align-items:center;text-align:center;padding:1rem;opacity:0;transition:opacity 0.4s ease;pointer-events:none}
.grid-item:hover .grid-overlay,.grid-item:focus-within .grid-overlay,.grid-item:has(:focus) .grid-overlay {opacity:1;pointer-events:auto}
.grid-overlay .grid-text{transform:translateY(20px);opacity:0;transition:all 0.4s ease}
.grid-item:hover .grid-text,.grid-item:focus-within .grid-text,.grid-item:has(:focus) .grid-text{transform:translateY(0);opacity:1}
.grid-inner{transform-style:preserve-3d;transition:transform 0.3s ease, box-shadow 0.3s ease;will-change:transform;backface-visibility:hidden;height:100%}
.grid-item:hover .grid-inner{transform:scale(1.03)}
		
.grid-text h3{padding:0 2rem}
.grid-text p{color:#fff;padding:0 1rem .125rem 0}

.sharer-text{margin-top: 4rem}
.sharer-text p{font-style:italic;opacity:.8}

/*RSForm*/
/*Operations*/
#contact{padding-block: var(--space-xl);background: var(--bg-color);transition:background 0.3s, color 0.3s;}
#contact .getintouch_intro{text-align: center}
#contact .getintouch_intro h2{font-size:3rem;color:var(--text-color);font-weight:700;margin:1rem 0 .325rem 0;padding:0;line-height:1}

#flip {height:45px;line-height:45px;overflow:hidden;margin-bottom:2rem}

#flip > div > div {
  color:var(--text-color);
	font-size: 110%;
  padding:0 1rem;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
	font-weight: 700; text-transform: uppercase;will-change: transform
}

#flip div:first-child {
  animation: show 6s linear infinite;
}

#flip div div {
  background:var(--bg-color);
}
#flip div:first-child div {
  background:var(--bg-color);
}
#flip div:last-child div {
  background:var(--bg-color);
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

.formResponsive{margin-top:.825em}
.formHidden{position:absolute;left:-20000px;top:-20000px;opacity:0}
.formNoError{display:none}
.formField{display:block;overflow:auto}
.formClr{clear:both;display:block}
sup.formRequired{padding-left:3px;opacity: .5;font-size: 70%;}
div.formCaption{display:block;float:left;width:25%;min-height:12px}
.formResponsive .formHorizontal .hide{display:none}

.rsform-block.rsform-block-lastname,.rsform-block.rsform-block-firstname,.rsform-block.rsform-block-email,.rsform-block.rsform-block-comments{position:relative;padding: 1em 1em 2em 1em}
.rsform-block-lastname label,.rsform-block-firstname label,.rsform-block-email label,.rsform-block-comments label{position: absolute;top:2.2em;left:1.875em;width:auto;color:#000;opacity:1;line-height:1;pointer-events:none;transition: all .3s linear}

form.formResponsive input[type=text]:focus + label{top: -.1em;color: #777777}
form.formResponsive input[type=text]:not(:placeholder-shown) + label {top: -.1em;color: #777777;opacity:1}
form.formResponsive input[type=text]:focus:valid + label {top: -.1em;color:#777777;opacity:1}
form.formResponsive textarea:focus + label{top: -.1em;color: #777777;opacity:1}
form.formResponsive textarea:not(:placeholder-shown) + label {top: -.1em;color: #777777;opacity:1}
form.formResponsive textarea:focus:valid + label {top: -.1em; color: #777777;opacity:1}
.formResponsive .formHorizontal .formControls{width:100%;margin:0;padding:0}
.formResponsive .formHorizontal p.formDescription{display:none}
.formResponsive .formHorizontal .formValidation,.formResponsive .formHorizontal .input-append,.formResponsive .formHorizontal .input-prepend,.formResponsive .formHorizontal .uneditable-input,.formResponsive .formHorizontal input,.formResponsive .formHorizontal select,.formResponsive .formHorizontal textarea{border:none;outline:0}
.formResponsive input,.formResponsive textarea{width:100%; box-sizing: border-box;display: inline-block;}
.formResponsive input[type=text],
.formResponsive input[type=number],
.formResponsive input[type=email],
.formResponsive input[type=tel],
.formResponsive input[type=url],
.formResponsive input[type=password],
.formResponsive select{color: #777777;height:3em;padding:.250em .625em;line-height:3em;background:#fff;box-shadow: rgba(149, 157, 165, .1) 0px 8px 24px; border-radius: 5px;}
.formResponsive .formHorizontal textarea{color:#777777;min-height:144px;padding:.250em .625em;background:#fff;resize:none;box-shadow: rgba(149, 157, 165, .1) 0px 8px 24px;border-radius: 5px;}


.rsform-block.rsform-block-sujet{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start}
@media only screen and (max-width: 768px){
	.rsform-block.rsform-block-sujet{flex-direction:column}
}

.rsform-block.rsform-block-sujet{overflow:hidden; margin-top:1em;margin-bottom:2em}
/* Cache les cases à cocher */
.rsform-block.rsform-block-sujet .rsform-checkbox{display:none}

/* Style normal des labels */
.rsform-block.rsform-block-sujet label {line-height: 3em; height: 3em;
    background-color:#fff;
	color: #777777;
    padding: 0 .8em;
    border-radius: 4px;
    margin: 0 .325em;
    cursor: pointer;
    display: inline-block;
    transition: background-color 0.3s ease;
	box-shadow: rgba(149, 157, 165, .1) 0px 8px 24px;
}

.rsform-block.rsform-block-sujet label:hover {
    background-color:#dcdcdc;
}

.rsform-block.rsform-block-sujet label.formControlLabel {
    background-color:transparent !important;
}

/* Style quand sélectionné (via classe JS) */
.rsform-block.rsform-block-sujet label.checked {
    background-color: #000;
    color: #fff;
}

.rsform-block.rsform-block-sujet label.rsform-error {background:#a0333c;color: #fff}
.rsform-block.rsform-block-sujet label.rsform-error.checked {background:#007bff}

@media only screen and (max-width: 768px){
	#contact .flex{flex-direction: column;}
	.getintouch_intro{padding-top:2em}
	.getintouch{padding-bottom:6em}
	.formResponsive{margin-top:1em}
	.rsform-block {padding: 1em 0}
}

.formResponsive .rsform-block-firstname input[type=text]{text-transform: uppercase}
.formResponsive input[type=radio],.formResponsive input[type=checkbox]{margin:5px 5px 0 0;line-height:normal;cursor:pointer;padding-left:18px;float:left}
.formResponsive input[type=file],.formResponsive select{height:28px;line-height:28px}
.formResponsive select{width:280px;border:1px solid #d3d3d3}
.formResponsive select.rsform-select-box-small{width:70px}
.formResponsive select[multiple],.formResponsive select[size]{height:auto}
.formResponsive input[type=file]:focus,.formResponsive input[type=radio]:focus,.formResponsive input[type=checkbox]:focus,.formResponsive select:focus{outline:#333 dotted thin;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}
.formResponsive button[type=reset],
.formResponsive button[type=button],
.formResponsive button[type=submit],
.formResponsive input[type=reset],
.formResponsive input[type=button],
.formResponsive input[type=submit]{border:none;height:40px;line-height:40px;text-align:center;vertical-align:middle;cursor:pointer}
.formResponsive button[type=reset]:focus,
.formResponsive button[type=button]:focus,
.formResponsive button[type=submit]:focus,
.formResponsive input[type=reset]:focus,
.formResponsive input[type=button]:focus,
.formResponsive input[type=submit]:focus{outline:#333 dotted thin;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}

.formResponsive button[type=submit],.formResponsive input[type=submit]{font-size:.875rem;letter-spacing:.0625rem;line-height:1;font-weight:600;text-transform: uppercase;padding:1em 3em;margin:0 auto;background-color:#1d1d1d;color:#fff;transition:background .3s linear;-webkit-box-shadow: 0 .500rem .375rem -.375rem rgba(142,142,142,.3);box-shadow: 0 .500rem .375rem -.375rem rgba(142,142,142,.3)}
.formResponsive button[type=submit]:hover,.formResponsive input[type=submit]:hover{background:#1d1d1d;color:#fff}
.formResponsive .formError{color:#a0333c;padding:0;vertical-align:middle;font-size:13px;font-weight:300;margin:3px 0;height:18px;display:block}
.formResponsive input.rsform-error,.formResponsive select.rsform-error,.formResponsive textarea.rsform-error{color:#a0333c;font-weight:600;border-color:#a0333c}
.formResponsive textarea.rsform-error {background:rgba(255,255,255,1)}


.formResponsive label.rsform-error{color:#a0333c}
form.formResponsive input[type=text]:focus + label.rsform-error{color:#a0333c}
form.formResponsive input[type=text]:not(:placeholder-shown) + label.rsform-error {color:#a0333c}

form.formResponsive textarea:focus + label.rsform-error{color:#a0333c}
form.formResponsive textarea:not(:placeholder-shown) + label.rsform-error {color:#a0333c}



.formResponsive input.rsform-error:focus,.formResponsive select.rsform-error:focus,.formResponsive textarea.rsform-error:focus{border-color:#a0333c}

.frameborder{border: 1px solid #a7755b;margin: 1em}
.frameborder div.formControlLabel{color:#a7755b;padding:0 0 0 .225em}

.rsform-block-reCaptcha{margin: 1rem 0 2rem 0}
#g-recaptcha-29,#g-recaptcha-38{display:inline-block}
p.alert{color:#a0333c}

.rsform-block-legals{margin-bottom: 1rem}
.rsform-block-legals p{font-size: .875em;color: #1d1d1d;margin-bottom: .525rem}

span.formValidation,p.formDescription{display: none}
.formRed{display: inline-block;color:#fff;font-weight:normal;background:#a0333c; border-radius:1.250rem;padding: .125rem 1rem;margin: 0 0 1.525rem 1rem;}
.formError{color:#a0333c;font-weight:300;font-size:10px}

.formRed{-webkit-animation:fadeDiv 2s;-moz-animation:fadeDiv 2s;-ms-animation:fadeDiv 2s;-o-animation:fadeDiv 2s;animation:fadeDiv 2s}
@keyframes fadeDiv {from { opacity: 0; }to   { opacity: 1; }}
@-moz-keyframes fadeDiv {from { opacity: 0; }to   { opacity: 1; }}
@-webkit-keyframes fadeDiv {from { opacity: 0; }to   { opacity: 1; }}
.grecaptcha-badge { visibility: hidden; }


.thanks{padding:2em 0}
.thanks,.thanks h2{color:#000 !important}


/* Style général pour le wrapper */
.rsform-block-friendlycaptcha{width:100%;max-width:350px;margin:0 auto;margin-bottom: 1em; text-align: left !important}
.frc-captcha{display:block;min-height:80px !important;}


/*Operations*/
#footer{padding-block: var(--space-xl);background:#000;color:#fff}
#footer a{color: #fff;}
#footer .flex{align-items:center}
#footer p.footer_title{position:relative;font-weight:600;padding-bottom:1em;margin-bottom:1em}
#footer p.footer_title:nth-of-type(2){margin-top:1.75em}
#footer p.footer_title::before{content:"";background:#fff;position:absolute;width:1.875em;height:.1em;bottom:0;left:0;border-radius:5px}
#footer .logo_signature{margin-top:2em}


#footer .div-address{margin-top: 2em}
#footer .follow {margin-top: 2em; margin-bottom: 3em}
#footer .follow a{display: inline-block; margin: 0 .325em;}
#footer .follow .svg-inline--fa{font-size: 2em}
#footer .follow p{margin-top:1.75em}


@media only screen and (max-width: 768px){
	#footer .flex{flex-direction: column;}
}

#footer .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}