/* CSS Document */
/* Dupont SA 2025 */
/* Author: eev | aae */

@import url("animate.css");
@import url("mobile-menu.css");

:root {
    --cassiopeia-color-primary: #0083C3;
    --cassiopeia-color-link: #0C5275;
    --link-color: #0C5275;
    --link-color-rgb: 12, 82, 117;
    --cassiopeia-color-hover: #0C5275;
    --link-hover-color: #0C5275;
    --link-hover-color-rgb: 12, 82, 117;
    --gris: #F1F0ED;
}

/* Basics */
body {background-color: #FBFAF6}
h1, h2, h3, h4, p, a {
font-family: "indivisible", sans-serif;
font-weight: 200;
font-style: normal;
}
h1, h2, h3 {margin-bottom: 25px}
a {text-decoration: none !important}
a:hover {color: black !important}
.lead {
margin: 0 10vw;
text-align: center;
}
.lead p {
font-size: 20px !important;
line-height: 30px!important;
}
.lead h4 {margin-top:25px}
.bold {font-weight:600}
ul li {
font-family: "indivisible", sans-serif;
font-weight: 400;
margin-bottom: 5px;
}

/* Menu */
.cap {text-transform:capitalize}

/* Buttons */
.btn-primary:hover {
color: white !important;
}

/* Cookie Banner */
.cc_div .c-bn {font-size:12px !important}

/* Spacing */
.top100 {margin-top:100px}
.bottom100 {margin-bottom:100px}
.top100 {margin-top:50px}
.bottom50 {margin-bottom:50px}

/* Container Title */
.container-bottom-a h1 {text-align:center}
.container-bottom-b h1 {text-align:center}
.map h1 {text-align:center}

/* Top Logo */
.top-logo{
width: 220px;
height: 117.8px;
border-radius: 17px;
position: fixed;
top: 15px;
left: 5vw;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.25);
transition: transform 0.5S ease;
}
.top-logo:hover {transform: scale(110%)}

/* Call-to-action Top */
.top-banner {
position: fixed;
top:0;
left:0;
width: 100%;
background-color: var(--cassiopeia-color-primary);
}

.top-call {
background-color: var(--cassiopeia-color-primary);
font-size: 16px;
font-family: "indivisible", sans-serif;
font-weight: 400;
font-style: normal;
text-align: center;
padding: 8px 25px;
}
.top-call:hover {
cursor: pointer;
background-color: var(--cassiopeia-color-link);
}
.top-call a {
color: white !important;
text-decoration: none !important;
text-align: center;
}
.top-call i {
font-size: 20px;
margin-right: 10px;
}

/* Intros */
.video-container {
position: relative;
width: 100%;
height: 70vh; /* pleine hauteur de l'écran */
overflow: hidden;
}
.video-container video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: 100vh;
z-index: 0;
transform: translate(-50%, -50%);
object-fit: cover;
}
.video-container-content {
position: relative;
z-index: 1;
color: white;
padding-top: 60vh;
text-align: center;
}
.intro {
height: 70vh;
position: relative;
}

/* Teasers Gallery */
.ba-image, .ba-caption {border-radius: 15px !important; box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.25);}
.ba-caption-content h3 {font-weight: 200 !important}

/* Columns */
.gapright {padding-right: 100px}
.gapleft {padding-left: 100px}

/* Call to Action */
.call-to-action {
font-size: 40px;
font-weight: 400;
color: var(--cassiopeia-color-primary);
text-align: center;
}
.picto-call {
width:80px;
height: 80px;
border-radius: 50%;
font-size: 40px;
line-height: 80px;
background-color: var(--cassiopeia-color-primary);
color: white;
text-align: center;
margin-right: 25px;
}

/* portrait */
.image-container {
position: relative;
width: 100%;
height: 160px;
aspect-ratio: 1 / 1; /* carré responsive */
overflow: hidden;
border-radius: 15px;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.25);
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
/*height: 100%;*/
object-fit: cover;
transition: opacity 0.3s ease-in-out;
border-radius: 12px;
}
.image-base {
z-index: 1;
opacity: 1;
}
.image-hover {
z-index: 2;
opacity: 0;
}
.image-container:hover .image-hover {
opacity: 1;
}

/* Smartslider */
.image {
display: block;
width: 100%;
height: auto;
border-radius: 15px;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.25);
}
.n2-ss-slider .n2-ss-slide-background {
border-radius: 15px;
pointer-events: none;
}

/* e-tec */
.e-tec {
background-color: #F1F0ED;
padding: 50px;
}
.flexbox-etec {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 50px;
justify-content: flex-start;
align-items: flex-end;
}
.flexbox-etec > div:first-child {width: 60%}
.flexbox-etec > div:last-child {width: 35%}
.container-etec {position: relative; width: 100%; margin-top: 25px; overflow: hidden; padding-top: 72%; border-radius:15px}
.iframe-etec {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none}

/* Partenaires */
.flexbox-partner {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 50px;
}
.flexbox-partner > div {
width: 180px;
}
.flexbox-partner > div img {
width: 100%;
}

/* Footer */
.footer {
margin-top: -23px;
padding-top: 50px;
}

/* Signature */
.signature, .signature-mobile {padding: 15px 0}
.signature {display:block}
.signature-mobile {display:none; margin-bottom: 85px; margin-left: 10px;}

/* Visform  */
.asterix-ancor, .vis_mandatory, .form-check-label {display: none}
#modvisform141rgpdlbl {display: block !important}
.field {background-color: #FBFAF6}
.col-1 {display:none !important}
.error {color: white !important}
#field4 {color:var(--body-color) !important}

/* Mediaqueries */
@media screen and (max-width: 767px){
.desktop {display: none}
.mobile {display: block}
.signature {display:none}
.signature-mobile {display:block}
.video-container {height: 50vh}
.container-banner .banner-overlay {height: 50vh}
.phone-button {left: 25px; top: calc(100vh - 85px) !important}
.mail-button {right: calc(50vw - 30px) !important; top: calc(100vh - 85px) !important}
.mobilemenuck-bar-button {top: calc(100vh - 85px)!important}
.mobilemenuck-button {top: calc(100vh - 85px) !important; right: 25px !important}
.mobilemenuck-itemwrap {margin-top: -30px !important}
.flexbox-intro > div {font-size: 1.5rem}
.mobilemenuck-item-text {font-size: 18px; line-height: 30px !important}
.video-container-content {padding-top: 30vh}
.e-tec {padding: 50px 20px}
.flexbox-etec > div:first-child {width: 100%}
.flexbox-etec > div:last-child {width: 100%}
.container-etec {position: relative; width: 100%; margin-top: 25px; overflow: hidden; padding-top: 110%; border-radius:15px}
.gapright, .gapleft {padding:0}
.cc-trigger-icon {display:none !important}
}
@media screen and (min-width:768px) and (max-width:1024px) {
.top-logo {top:50px !important}
}
@media screen and (min-width: 768px) {
.mobile {display: none}
.desktop {display: block}
.top-logo {z-index: 10} 
}