/* CSS Document for Demierre Deschenaux 2025 */

@import 'mediaqueries.css';
@import 'hamburger.css';
@import 'animate.css';

/* Colors */
:root {
--red:#db071f;
}

/* Styles */
html, body {width: 100%;  overflow-x: hidden;}
ul, ol, p, h1, h2, h3, a, a:hover {
font-family: lato, sans-serif;
font-weight: 300;
font-style: normal;
}
h1, h2, h3 {text-transform: uppercase}
h1 {margin-bottom: 25px}
h2 {margin-bottom: 15px}
a {text-decoration: none!important; font-weight:700}
a:hover {text-decoration: none!important; font-weight: 700}
.light {font-weight:200 !important}
.italic {
font-family: lato, sans-serif;
font-weight: 300;
font-style: italic;
}
.bold {
font-family: lato, sans-serif;
font-weight: 700;
font-style: normal;
}
.bold-italic {
font-family: lato, sans-serif;
font-weight: 700;
font-style: italic;
}

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

/* Top Banner */
.container-topbar {
width: 100%;
background-color: white;
position: fixed;
}
.flexbox-top-banner {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
padding: 25px 0;
}
.logo {width: 250px}
.logo img {width: 100%}
.call-to-action {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-start;
color: black;
}
.call-to-action a {
color: var(--red);
text-decoration: none;
font-weight: 700 !important;
}
.call-to-action a:hover {color: var(--red) !important}
.call-1 {
padding-right:25px;
border-right: solid 1px var(--red);
height: 50px;
width: 400px;
}
.call-2 {
padding: 0 25px;
border-right: solid 1px var(--red);
height: 50px;
}
.call-3 {padding-left: 25px}
.call-4 {}
.call {
color: var(--red);
font-size: 30px;
margin-right: 15px;
float: left;
}
.marquee {
overflow: hidden;
white-space: nowrap;
position: relative;
background-color: var(--red);
padding: 0 50px;
}
.marquee__track {
display: flex;
width: max-content;
animation: marquee-seamless 16s linear infinite;
}
.marquee__group {
display: inline-flex;
align-items: center;
}

.marquee__group span {
display: inline-block;
padding-right: 2rem;
font-weight: 600;
}
@keyframes marquee-seamless {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pause au survol (optionnel) */
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}
/* Intros */
.video-container {
margin-top: 165px;
position: relative;
width: 100%;
height: 70vh;
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;
}
.intro {
margin-top: 165px;
height: 70vh;
position: relative;
}
.intro-content {
width: 100%;
position: relative;
z-index: 1;
height: 70vh;
}
.intro-title {
position: absolute;
right: 0;
top: 25vh;
width: 550px;
background-color: var(--red);
color: white;
padding: 50px 25px;
text-align: left;
}
.intro-title span {font-weight:900}
.container-banner .banner-overlay .overlay {padding:0 !important;}
.container-banner .banner-overlay {background-attachment: inherit}

/* Button */
.btn-light:hover {
background-color:black !important;
color:white;
border-color:black}

/* Teaser */
.picto {margin-bottom: 15px}
.teaser {
text-align: center;
margin-bottom: 50px;
}
.teaser h3::after {
content: "";
display: block;
width: 100px;
height: 1px;
background: black;
margin: 20px auto;
}
.teaser h3:hover {color:var(--red)}
.teaser h3:hover::after {width:150px; background: var(--red)}

/* Box */
.red-box {
background-color: var(--red);
padding: 25px;
color: white;
}
.grey-box {
background-color: #F1F0ED;
padding: 25px;
color: black;
}

/* Actualités */
.btn-secondary {
--btn-color: var(--btncolor);
--btn-bg: var(--btnbg);
--btn-border-color: var(--btnbg);
--btn-hover-color: var(--btncolorh);
--btn-hover-bg: var(--btnbgh);
--btn-hover-border-color: var(--btnbgh);
--btn-active-color: var(--btncolorh);
--btn-active-bg: var(--btnbgh);
--btn-active-border-color: var(--btnbgh);
--btn-disabled-color: var(--btncolor);
--btn-disabled-bg: var(--btnbg);
--btn-disabled-border-color: var(--btnbg);
background-color: var(--btn-bg);
border-color:var(--btn-bg)
}
.btn-secondary:hover, .btn-primary:focus {
background-color: var(--btn-hover-bg);
border-color:var(--btn-hover-bg)
}
.btn-secondary:focus-visible {
outline: 2px solid var(--btn-hover-bg);
outline-offset: 2px;
box-shadow: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;
color: black;
}
.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}

/* 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}
.justify-content-center {justify-content: flex-start !important}

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