html{
transition: all 0.3s ease;
overflow: auto;
height: 100%;
}
html.smooth-scrolling {
/* Activer le défilement en douceur uniquement lorsque la classe "smooth-scrolling" est présente */
scroll-behavior: auto;
}
body {
background: #171717;
color: #ffffff;
font-family: 'Bebas Neue', sans-serif;
text-align: center;
max-width: 100%;
max-height: 100%;
padding: 0;
margin: 0;
font-family: 'Lato' , 'Secular One' , sans-serif;
font-size: 100%;
}/*
.product-gradient{ background-image: linear-gradient(to bottom, #1D2327, #3F4243);
}*/
h1 {
text-align: center;
letter-spacing: 1px;
word-spacing: 0.15em;
font-size: 3vw;
line-height: 1.2;
font-family: 'Lato' , sans-serif;
}
p{
color: #ffffff;
font-family: 'Lato' , sans-serif;
}
/*
button {
display: inline-block;
background-color: #fbc103;
border:none;
color: #000000;
text-align: center;
font-size: 12px;
width: 180px;
height: 30px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
cursor: pointer;
border-radius: 20px;
}*/
button{
background-color: transparent;
border-radius: 0;
border: none;
}
hr{
border: 1px solid #fbc103;
margin :0;
}
header{
/*background-color: #111111;*/
}
.ogmios-detail{
background-color: #000;
}
/*----------------------cookies---------------------*/
#cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background-color: #f0f0f0;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
z-index: 9999;
}
.banner-content {
display: inline-block;
vertical-align: middle;
margin-right: 20px;
max-width: 80%;
}
.banner-content p{
color: #000000;
}
.banner-buttons {
display: inline-block;
vertical-align: middle;
}
.banner-buttons button {
margin-left: 10px;
padding: 5px 10px;
border: none;
border-radius: 3px;
font-size: 16px;
cursor: pointer;
margin: 2px;
}
.banner-buttons button:hover {
background-color: #ddd;
}
/*----------------------End cookies---------------------*/
/*---------------------Langues----------------------*/
.flag2{
position: relative;
}
.flag2 a{
position: absolute;
top: -105px;
right: 158px;
}
/* Style général du sélecteur de langue */
.language-selector {
display: inline-block;
margin-right: 10px; /* Marge entre le sélecteur de langue et d'autres éléments */
font-family: Arial, sans-serif;
}
/* Style du sélecteur de langue (menu déroulant) */
.language-selector select {
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
/* Style du bouton de soumission (Changer la langue) */
.language-selector input[type="submit"] {
padding: 5px 10px;
background-color: #007bff; /* Couleur du bouton */
color: #fff; /* Couleur du texte du bouton */
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
/* Style des options du menu déroulant */
.language-selector select option {
font-size: 16px;
}
/* Style des options sélectionnées (actives) du menu déroulant */
.language-selector select option:checked {
background-color: #007bff; /* Couleur de fond pour l'option sélectionnée */
color: #fff; /* Couleur du texte pour l'option sélectionnée */
}
/*--------------------fin langues---------------------*/
/*----------------------topbar---------------------*/
.top-bar{
width: 100%;
height: auto;
background-image: linear-gradient(to right, #171717, #fbc103 50%, #171717);
display: flex;
}
.deco{
padding: 10px;
background-color: #fbc103;
}
.deco a{
font-weight: bold;
}
.size-top-bar{
width: 1200px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
justify-content: space-around;
}
.size-top-bar p{
font-size: 13px;
}
.size-top-bar a{
font-size: 13px;
margin-top: 12px;
}
.position-button{
padding-top: 5px;
width: 200px;
display: inline-block;
background-color: #fbc103;
border:none;
color: #000000;
text-align: center;
font-size: 12px;
width: 180px;
height: 30px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
cursor: pointer;
border-radius: 20px;
}
.text-topb{
color: #ffffff;
font-weight: bold;
}
.text-topb-tel{
color: #ffffff;
font-weight: bold;
}
.text-topb-mail{
color: #ffffff;
font-weight: bold;
}
.text-topb i{
font-weight: bold;
}
.top-bar a{
text-decoration: none;
color: #ffffff;
}
.top-bar .text-topb img{
vertical-align: middle;
}
.top-bar a:hover{
color: #fbc103;
}
.top-bar-phone{
display: none;
}
.en-flag{
display: none;
}
/*-----------------------/topbar---------------------*/
/*------------------------*navbar--------------------*/
.block{
max-width: 1440px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-left: auto;
margin-right: auto;
justify-content: space-around;
}
/*-----------------fil d'ariane-----------*/
.breadcrumb {
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
float: left;
}
.breadcrumb li {
display: inline-block;
margin-right: 5px;
}
.breadcrumb li::before{
content: "|";
color: #ffffff;
padding-right: 10px;
}
.product-container .breadcrumb li::before{
content: "|";
color: #ffffff;
padding-right: 10px;
}
.breadcrumb li a {
color: #ffffff;
text-decoration: none;
}
.breadcrumb li:last-child {
color: #555;
}
.arianne{
margin-left: 10px;
height: 30px;
}
/*--------------end fil d'ariane-----------*/
.wave {
position: relative;
background-image: url("../img/vague.svg");
background-repeat: repeat-x;
height: 100px;
}
#toggle+label{
margin:0;
width:45px;
display:grid;
grid-template-rows: repeat(3,10px);
row-gap:.2rem;
}
#toggle+label span{
background-color: #ffffff;
border-radius: 20px;
height: 2px;
}
#toggle:checked+label span{
grid-area: 2/1;
}
#toggle:checked+label span:nth-child(2){
opacity: 0;
}
#toggle:checked+label span:first-of-type{
transform:rotate(45deg)
}
#toggle:checked+label span:last-of-type{
transform:rotate(-45deg);
}
.navbar{
width: 100%;
height: 15px;
}
#toggle {
display: none;
}
/**
Hamburger
**/
.hamburger {
position: absolute;
top: 4.2em;
right: 2%;
margin-left: -2em;
margin-top: -20px;
width: 2em;
height: 45px;
z-index: 60000;
cursor: pointer;
}
/**
Nav Styles
**/
.nav {
position: fixed;
width: 100%;
height: 100%;
/*background: linear-gradient(to right, #000000, #525252);*/
background-image: url("../img/nav-background.webp");
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
top: -100%; left: 0; right: 0; bottom: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;
transform: scale(0);
z-index: 50000;
overflow: auto;
}
.nav-wrapper {
position: relative;
overflow: hidden;
overflow-y: auto;
height: 100%;
display:flex;
flex-direction:row;
}
nav {
text-align: left;
flex-direction:row;
word-spacing:5px;
padding-top : 100px;
width: auto;
margin-right: 50px;
}
nav a {
position: relative;
text-decoration: none;
color: #fbc103;
font-size: 22px;
display: inline-block;
margin-top: 1.25em;
transition: color 0.2s ease-in-out;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
font-weight: bolder;
}
nav > ul{
display: flex;
height: var(--hauteur-menu);
}
nav ul{
list-style-type: none;
width: 100%;
}
nav > ul > li{
position: relative;
height: 100%;
flex: 1;
}
li a {
text-decoration: none;
}
.logo-ev{
width: 100%;
text-align: left;
padding-left: 2%;
background-color: #171717
}
#logo-first{
max-width: 300px;
margin-top: 30px ;
}
.sous-menu {
padding:0;
}
.sous-menu > li > a {
font-size: 2vw;
display: inline-block;
cursor: pointer;
margin:0;
padding-top: 5px;
color: #ffffff;
font-family: 'Bebas Neue', sans-serif;
}
.sous-menu-box{
padding: 0;
}
.sous-menu-box > li > a {
font-size: 17px;
display: inline-block;
cursor: pointer;
margin:0;
padding-top: 5px;
color: #000000;
}
.sous-menu > li > a:hover{
color:#fbc103 ;
}
.flex-menu{
display: flex;
}
.flex-menu-02{
display: flex;
justify-content: space-between;
}
nav a:before {
content: '';
background-color: white;
left: -0.5em;
transition: all 0.2s ease-in-out;
}
nav a:hover {
color: white;
}
nav a:hover:before {
height: 100%;
}
.nav-text-box{
color: #000000;
line-height: 65px;
text-align: center;
margin: 20px;
}
.box > a{
text-align: center;
}
.nav-ajust-box{
padding: 0;
max-width: 240px;
height: 70px;
background-color: #fbc103;
border-radius: 10px;
margin: 10px;
width: 240px;
}
.nav-ajust-box :hover{
border-radius: 10px;
width: 240px;
height: 70px;
background-color: #ffffff;
}
.trait_dessous{
color: #627184;
width : 150px;
margin-left: 20px;
margin-bottom: 30px;
}
.box-cat{
margin-top: 40px;
}
#nav-logo{
margin-top: -50px;
position: absolute;
width: 36%;
height: 70px;
background-image: url("../img/nav-logo.webp");
background-repeat: no-repeat;
margin-left: 56px;
}
/**
Animations
**/
#toggle:checked + .hamburger .top-bun {
transform: rotate(-45deg);
margin-top: 25px;
}
#toggle:checked + .hamburger .bottom-bun {
opacity: 0;
transform: rotate(45deg);
}
#toggle:checked + .hamburger .meat {
transform: rotate(45deg);
margin-top: -4.5px;
}
#toggle:checked + .hamburger + .nav {
top: 0;
transform: scale(1);
}
/***************endnavbar******************/
/****************slider************************/
main{
width: 100%;
margin: auto;
}
.diapo{
position: relative;
overflow: hidden;
}
#nav-droite, #nav-gauche{
position: absolute;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 3em;
}
#nav-droite{
right: 20px;
}
#nav-gauche{
left: 20px;
}
.elements{
display: flex;
transition: 1s linear;
}
.element{
flex: 1 0 100%;
position: relative;
background-image: url(../img/slider-01.webp);
width: 100%;
background-size: cover;
}
.element h2{
font-size: 40px;
margin: 35px 0 5px 0;
}
.element p{
font-size: 20px;
margin: 0;
}
.element > a > img{
width: 100%;
}
.caption{
position: absolute;
top: 0%;
margin-top: 20px;
left: 50%;
transform: translateX(-50%);
width: 100%;
}
.caption02{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
margin-left: 90px;
margin-bottom: 50px;
}
.caption h2{
font-size: 4vw;
text-align: center;
color: #ffffff;
margin: 0;
font-family: 'Lato';
}
.caption h3{
font-size: 2vw;
color: #fbc103;
margin: 0;
margin-top: 15px;
}
.caption h4{
color: #111111;
font-size: 2vw;
margin-bottom: 0;
font-family: 'Secular One', sans-serif;
}
.mif{
max-width: 15%;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
}
.mif-flag{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.mif-blue{
height: 5px;
width: 33%;
background-color: blue;
}
.mif-white{
height: 5px;
width: 33%;
background-color: rgb(255, 255, 255);
}
.mif-red{
height: 5px;
width: 33%;
background-color: rgb(255, 0, 0);
}
.mif p{
color: #ffffff;
}
.caption02 h2{
font-size: 5vw;
text-align: left;
text-decoration: underline;
font-style: italic;
color: #ffffff;
}
.caption p {
font-size: 1.5vw;
text-align: center;
margin-top: 5px;
}
.element a{
text-decoration: none;
}
.more-products{
width: 1000px;
margin-top: -5px;
}
/******************end slider*****************/
/******************flag***********************/
.flag{
width: 70%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 20px;
justify-content: center;
}
.flagblue{
background-color: #0b4c93;
width: 33%;
height: 3px;
}
.flagwhite{
background-color: #ffffff;
width: 33%;
height: 3px;
}
.flagred{
background-color: red;
width: 33%;
height: 3px;
}
.flag p{
text-align: center;
}
/***************endflag**********************/
/*******************scroll*********************/
.mouse-wrap{
display:inline-block;
position:sticky;
width: 100%;
height: 130px;
}
.mouse p {
font-family: "Raleway", sans-serif;
letter-spacing: 12px;
font-size:14px;
color: #fbc103;
animation:nudgeText 5.5s ease-out infinite;
position:absolute;
left:50%;
top:90px;
transform:translateX(-50%) translateY(0);
margin-left:6px;
}
.mouse {
width: 48px;
margin: 0 auto;
}
.mouse:after {
content: '';
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 25px solid #fbc103;
background-repeat: no-repeat;
width: 25px;
height: 25px;
animation: trackBallSlide 5.5s linear infinite;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transform:translateY(20px);
background-position: center;
margin-top: 1px;
}
.mouse .frame {
width: 100%;
z-index: 1;
}
.mouse .frame path {
fill: none;
stroke: #fbc103;
stroke-width: 3;
opacity:0.5;
}
.mouse .Animate-Draw {
fill: none;
stroke: #FFFFFF;
stroke-width: 3;
fill-opacity: 1;
}
.mouse .mouse-left .Animate-Draw {
animation: DrawLine 5.5s ease-out infinite;
}
.mouse .mouse-right .Animate-Draw {
animation: DrawLineBack 5.5s ease-out infinite;
}
/*Keyframes*/
@keyframes DrawLine {
0% {
stroke-dashOffset: 0;
stroke-dasharray: 120;
stroke-opacity:1;
}
22% {
stroke-dashOffset: 0;
stroke-dasharray: 120;
stroke-opacity:1;
}
38%{
stroke-dashOffset: 125;
stroke-dasharray: 120;
stroke-opacity:1;
}
38.1%{
stroke-dashOffset: 0;
stroke-dasharray: 120;
stroke-opacity:0;
}
48%{
stroke-dashOffset: 0;
stroke-dasharray: 120;
stroke-opacity:1;
}
64%{
stroke-dashOffset: 125;
stroke-dasharray: 120;
stroke-opacity:1;
}
64.1%{
stroke-dashOffset: 0;
stroke-dasharray: 120;
stroke-opacity:0;
}
74%{
stroke-dashOffset: 0;
stroke-dasharray: 120;
stroke-opacity:1;
}
90%{
stroke-opacity:1;
stroke-dashOffset: 125;
stroke-dasharray: 120;
}
90.1%{
stroke-dashOffset: 0;
stroke-dasharray: 120;
stroke-opacity:0;
}
}
@keyframes DrawLineBack {
0% {
stroke-dashOffset: 0;
stroke-dasharray: 120;
stroke-opacity:1;
}
22% {
stroke-dashOffset: 0;
stroke-dasharray: 120;
stroke-opacity:1;
}
38%{
stroke-dashOffset: -114;
stroke-dasharray: 120;
stroke-opacity:1;
}
38.1%{
stroke-dashOffset: 0;
stroke-dasharray: 120;
stroke-opacity:0;
}
48%{
stroke-dashOffset: 0;
stroke-dasharray: 120;
stroke-opacity:1;
}
64%{
stroke-dashOffset: -114;
stroke-dasharray: 120;
stroke-opacity:1;
}
64.1%{
stroke-dashOffset: 0;
stroke-dasharray: 120;
stroke-opacity:0;
}
74%{
stroke-dashOffset: 0;
stroke-dasharray: 120;
stroke-opacity:1;
}
90%{
stroke-opacity:1;
stroke-dashOffset: -114;
stroke-dasharray: 120;
}
90.1%{
stroke-dashOffset: 0;
stroke-dasharray: 120;
stroke-opacity:0;
}
}
@keyframes nudgeMouse {
0% {
transform: translateY(0) translateX(-50%);
}
22% {
transform: translateY(0px) translateX(-50%);
}
38%{
transform: translateY(9px) translateX(-50%);
}
48%{
transform: translateY(0px) translateX(-50%);
}
64%{
transform: translateY(9px) translateX(-50%);
}
74%{
transform: translateY(0px) translateX(-50%);
}
90%{
transform: translateY(9px) translateX(-50%);
}
}
/*Text*/
@keyframes nudgeText {
0% {
transform: translateY(0) translateX(-50%) scaleY(1);
opacity:1;
}
22% {
transform: translateY(0px) translateX(-50%) scaleY(1);
opacity:1;
}
38%{
transform: translateY(5px) translateX(-50%) scaleY(0.9);
opacity:0.5;
}
48%{
transform: translateY(0px) translateX(-50%) scaleY(1);
opacity:1;
}
64%{
transform: translateY(5px) translateX(-50%) scaleY(0.9);
opacity:0.5;
}
74%{
transform: translateY(0px) translateX(-50%) scaleY(1);
opacity:1;
}
90%{
transform: translateY(5px) translateX(-50%) scaleY(0.9);
opacity:0.5;
}
}
/*Mouse wheel*/
@keyframes trackBallSlide {
0% {
transform:translateY(20px)
scale(1);
opacity:1;
}
22% {
transform:translateY(20px)
scale(1);
opacity:1;
}
26%{
transform:translateY(30px)
scale(0.9);
opacity:1;
}
34%{
transform:translateY(55px)
scale(0.1);
opacity:0;
}
41%{
transform:translateY(30px)
scale(0);
opacity:0.3;
}
48%{
transform:translateY(20px)
scale(1);
opacity:1;
}
52%{
transform:translateY(30px)
scale(0.9);
opacity:1;
}
60%{
transform:translateY(55px)
scale(0.1);
opacity:0;
}
67%{
transform:translateY(30px)
scale(0);
opacity:0.3;
}
74%{
transform:translateY(20px)
scale(1);
opacity:1;
}
78%{
transform:translateY(30px)
scale(0.9);
opacity:1;
}
86%{
transform:translateY(55px)
scale(0.1);
opacity:0;
}
93%{
transform:translateY(30px)
scale(0);
opacity:0.3;
}
100%{
transform:translateY(20px)
scale(1);
opacity:1;
}
}
/*******************end scroll*****************/
/******************button**********************/
.bouton-color{
background-color: #fbc103;
cursor: pointer;
}
/******************defense et securite*********/
.button-product{
background-color: #fbc103;
border:none;
color: #000000;
font-size: 16px;
font-weight: bold;
width: 100%;
height: 30px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
cursor: pointer;
position: absolute;
left: 50%;
transform: translateX(-50%);
padding: 5px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
bottom: 0;
}
.box-def-sec{
background-image: url("../img/background-hexagone.webp");
background-repeat: no-repeat;
background-size: contain;
margin: -50px 10px 0 10px;
}
.text-background{
max-width:100%;
height: auto;
color:#fbc103;
padding-bottom: 50px;
}
.text-background h2{
color: #ffffff;
margin: 50px 0 0 0;
}
.second-text-background{
margin-top: 40px;
background-color: #ffffff;
position: relative;
display: inline-block;
width: 99%;
}
.second-text-background:before{
content: " ";
background: #ffffff;
position: absolute;
top:0;
left:10px;
right:-10px;
bottom:0;
z-index: -1;
transform: skewX(-15deg);
}
.second-text-background h2{
margin: 0;
padding: 10px;
color: #000000;
}
.titre02{
background-color: #ffffff;
color: #222222;
margin-top: 50px;
font-size: 30px;
}
.new-product{
height: auto;
background-color: #222;
width: 467px;
margin-top: 30px;
border-radius: 20px;
position: relative;
}
.new-1{
max-width: 450px;
height: 275px;
margin: 0 auto;
margin-top: 25px;
}
.new-1 img{
max-width: 100%;
max-height: 100%;
position: relative;
top: 50%;
transform: translateY(-50%);
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
}
.new-text{
max-width: 450px;
margin: 0 auto;
padding: 10px;
}
.new-text h2{
font-size: 17px;
}
.new-text button{
border-radius: 5px;
width: 100%;
}
.flex-container-product{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
max-width: 1440px;
margin-left: auto;
margin-right: auto;
}
.container-product{
width: 305px;
height: 550px;
background-color: #222222;
padding: 10px 10px 0 10px;
}
.container-product:before{
background-color: #222222;
filter: blur(1px);
}
.box-border{
border: solid 2px #424242;
width: 100%;
height: 300px;
background: radial-gradient(#525355, #000000);
}
.flex-container-product-vs{
display: flex;
flex-direction: column;
max-width: 100%;
}
.container-product-vs{
width: 900px;
height: 550px;
margin-left: auto;
margin-right: auto;
}
.box-border-vs{
border: solid 2px #424242;
width: 100%;
height: 250px;
background: radial-gradient(#525355, #000000);
}
.container-product-be{
width: 200px;
height: 350px;
margin: 20px;
}
.box-be{
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
}
.container-product-be .button-product button{
border-radius:5px;
margin: 0;
width: 100%;
}
.container-product hr{
margin-bottom: 10px;
width: 100%;
background-color: #fbc103;
}
.container-product .button-product{
margin-top: 10px;
}
.container-product .button-product button{
border-radius:5px;
margin: 0;
width: 100%;
}
.pictures {
width: 130px;
height: 195px;
position: relative;
display: inline-block;
}
.pictures .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.pictures:hover .img-top {
display: inline;
}
.compagnonsrx{
background-image: url('../img/compagnonsrxferme.webp');
background-repeat: no-repeat;
width: 195px;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.compagnonsrx:hover{
background-image: url('../img/compagnonsrxouvert.webp');
}
.raidlighting{
background-image: url('../img/raidlighting_eteint.webp');
background-repeat: no-repeat;
width: 300px;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.raidlighting:hover{
background-image: url('../img/raidlighting_allume.webp');
}
.raidview{
background-image: url('../img/raidview_eteint.webp');
background-repeat: no-repeat;
width: 300px;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.raidview:hover{
background-image: url('../img/raidview_allume.webp');
}
.box-border img{
max-width: 100%;
max-height: 100%;
position: relative;
top: 50%;
transform: translateY(-50%);
display: block;
margin-left: auto;
margin-right: auto;
}
.footer{
width: 100%;
height: 300px;
background-color: #1d2327;
margin-top: 50px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
}
.footer h4{
font-size: 25px;
text-align: left;
color: #fbc103;
margin: 0;
margin-top: 20px;
}
.footer ul {
padding-left: 0;
}
.footer li{
list-style: none;
color: #ffffff;
text-align: left;
line-height: 30px;
text-decoration: none;
}
.footer li a{
color: #ffffff;
}
.footer li a:hover{
color: #fbc103;
}
.footer-pdf{
width: 130px;
height: 170px;
background-color: #fbc103;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.footer-bar{
width: 100%;
height: 40px;
background-color: #111111;
font-size: 12px;
}
.footer-sub-copyright-left{
left: 0;
top: 50%;
position: relative;
transform: translateY(-50%);
}
.footer-sub-list-right {
padding: 0;
margin: 0;
list-style: none;
position: relative;
top: 50%;
transform: translateY(-50%);
right: 0;
margin-right: 50px;
}
.footer-sub-item {
display: inline;
margin: 0 0 0 20px;
margin-left: 20px;
}
.footer-contact a button{
background-color: #111111;
color: #fbc103;
}
.new {
max-width: 1440px;
margin-left: auto;
margin-right: auto;
justify-content: space-around;
}
/*--------------------------pages-produits-----------------------*/
/*--------------------------deep---------------------------------*/
.deep{
position: relative;
left: 50%;
transform: translateY(-50%);
}
.deep h2{
color: #fff;
font-size: 5em;
position: absolute;
transform: translate(-50%, -50%);
}
.deep h2:nth-child(1){
color: transparent;
-webkit-text-stroke: 2px #03a9f4;
}
.deep h2:nth-child(2){
color: #03a9f4;
animation: animate 4s ease-in-out infinite;
}
@keyframes animate{
0%,
100%{
clip-path: polygon(
0% 45%,
16% 44%,
33% 50%,
54% 60%,
70% 61%,
84% 59%,
100% 52%,
100% 100%,
0% 100%
);
}
50%{
clip-path: polygon(
0% 60%,
15% 65%,
34% 66%,
51% 62%,
67% 50%,
84% 45%,
100% 46%,
100% 100%,
0% 100%
);
}
}
.ip69{
width: 100%;
height: 180px;
}
/*-------------------------end-deep------------------------------*/
.fa-solid{
margin: 0 5px 0 5px;
}
.shortcut{
width: 100px;
display: flex;
flex-direction: row;
padding-top: 15px;
}
.shortcut input{
background-color: #fbc103;
border: none;
width: 139px;
text-align: center;
cursor: pointer;
margin-right: 20px;
height: 20px;
text-decoration: none;
}
.shortcut a{
text-decoration: none;
border: none;
}
.shortcut button{
height: 22px;
width: 600px;
border: none;
margin: 0;
}
#tableau3{
display: none;
width: 100%;
border-collapse: collapse;
margin: auto;
max-width: 1200px;
padding: 5px;
width: 100%;
box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
animation: float 5s infinite;
}
#togg1 input{
width: 100%;
background-color: #fbc103;
border: none;
text-align: left;
cursor: pointer;
font-family: 'Lato', sans-serif;
top: 50%;
position: relative;
transform: translateY(-50%);
height: 35px;
font-weight: bold;
}
#togg1{
width: 1200px;
margin-left: auto;
margin-right: auto;
color: #000000;
text-align: left;
font-weight: bold;
cursor: pointer;
margin-bottom: 30px;
margin-top: 50px;
}
#tableau2{
display: none;
width: 100%;
border-collapse: collapse;
margin: auto;
max-width: 1200px;
padding: 5px;
width: 100%;
box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
animation: float 5s infinite;
}
#togg1-mob input{
width: 100%;
background-color: #fbc103;
border: none;
text-align: left;
cursor: pointer;
font-family: 'Lato', sans-serif;
top: 50%;
position: relative;
transform: translateY(-50%);
height: 35px;
font-weight: bold;
}
#togg1-mob{
width: 1200px;
margin-left: auto;
margin-right: auto;
color: #000000;
text-align: left;
font-weight: bold;
cursor: pointer;
margin-bottom: 30px;
margin-top: 50px;
display: none;
}
#togg1-pc input{
width: 100%;
background-color: #fbc103;
border: none;
text-align: left;
cursor: pointer;
font-family: 'Lato', sans-serif;
top: 50%;
position: relative;
transform: translateY(-50%);
height: 35px;
font-weight: bold;
}
#togg1-pc{
width: 1200px;
margin-left: auto;
margin-right: auto;
color: #000000;
text-align: left;
font-weight: bold;
cursor: pointer;
margin-bottom: 30px;
margin-top: 50px;
}
#faq {
max-width: 1200px;
margin: auto;
text-align: center;
background-color: #fbc103;
height: 25px;
}
section.faq {
padding-top: 2em;
padding-bottom: 3em;
}
.equal-width th, .equal-width td {
width: 20%; /* Vous pouvez ajuster cette valeur en fonction de la mise en page souhaitée */
padding: 8px; /* Ajoutez un espacement intérieur pour améliorer la lisibilité */
text-align: left; /* Aligner le texte à gauche */
}
#faq ul {
text-align: left;
}
.transition, p, ul li i:before, ul li i:after {
transition: all 0.3s;
}
#faq .no-select, #faq h2 {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
user-select: none;
}
#faq h1 {
color: #000;
margin-bottom: 30px;
margin-top: 0;
}
#faq h2 {
color: #000;
text-align: left;
text-transform: none;
display: block;
margin: 0;
cursor: pointer;
transition: .2s;
margin-left: 7px;
font-size: 13px;
font-weight: lighter;
margin-top: 4px;
}
#faq p {
color: #ffffff;
text-align: left;
font-family: 'hm_light', sans-serif;
font-size: 14px;
line-height: 1.45;
position: relative;
overflow: hidden;
max-height: 250px;
will-change: max-height;
contain: layout;
display: inline-block;
opacity: 1;
transform: translate(0, 0);
margin-top: 5px;
margin-bottom: 15px;
padding: 0 50px 0 15px;
transition: .3s opacity, .6s max-height;
hyphens: auto;
z-index: 2;
margin-top: 20px;
}
#faq ul {
list-style: none;
perspective: 900;
padding: 0;
margin: 0;
}
#faq ul li {
position: relative;
overflow: hidden;
padding: 0;
margin: 0;
/*padding-bottom: 4px;*/
/*padding-top: 18px;*/
box-shadow: 0 3px 10px -2px rgba(0,0,0,0.1);
-webkit-tap-highlight-color: transparent;
}
#faq ul li + li {
margin-top: 15px;
}
#faq ul li:last-of-type {
padding-bottom: 0;
}
#faq ul li i {
position: absolute;
transform: translate(-6px, 0);
margin-top: 8px;
margin-left: 17px;
}
#faq ul li i:before, ul li i:after {
content: "";
position: absolute;
background-color: #000000;
width: 3px;
height: 9px;
}
#faq ul li i:before {
transform: translate(-2px, 0) rotate(45deg);
}
#faq ul li i:after {
transform: translate(2px, 0) rotate(-45deg);
}
#faq ul li input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
touch-action: manipulation;
}
#faq ul li input[type=checkbox]:checked ~ h2 {
color: #000;
}
#faq ul li input[type=checkbox]:checked ~ p {
/*margin-top: 0;*/
max-height: 0;
transition: .3s;
opacity: 0;
/*transform: translate(0, 50%);*/
}
#faq ul li input[type=checkbox]:checked ~ i:before {
transform: translate(2px, 0) rotate(45deg);
}
#faq ul li input[type=checkbox]:checked ~ i:after {
transform: translate(-2px, 0) rotate(-45deg);
}
.product-container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
.carateristiques ul{
list-style-type: none;
}
.carateristiques li{
line-height: 25px;
position: relative;
padding: 0 0 4px 24px;
text-align: left;
list-style-type: none;
}
.carateristiques li::before{
content: "";
position: absolute;
display: block;
top: 0.75em;
left: 0;
width: 12px;
height: 2px;
background: #fbc103;
transition: .3s;
}
.container-picture{
width: 467px;
height: 457px;
background-image: url("../img/RL/img-ref.jpg");
background-repeat: no-repeat;
border: 2px solid #fbc103;
border-radius: 15px;
margin-top: 43px;
}
.container-picture-box img{
vertical-align: middle;
}
.container-text{
width: 600px;
height: 565px;
z-index: 10;
}
.container-text h1{
color: #fbc103;
text-align: left;
font-family: 'Fjalla One' , sans-serif;
margin: 20px 0px 0px 0px;
font-size: 100px;
float: left;
width: 100%;
}
.container-text h2{
color: #ffffff;
text-align: left;
font-size: 20px;
}
.container-text p{
color: #ffffff;
text-align: left;
font-family: 'Lato' , sans-serif;
width: 600px;
}
.sts-container-text{
width: 600px;
height: 565px;
z-index: 10;
}
.sts-container-text h1{
color: #fbc103;
text-align: left;
font-family: 'Fjalla One' , sans-serif;
margin: 20px 0px 0px 0px;
font-size: 43px;
float: left;
width: 100%;
}
.sts-container-text h2{
color: #ffffff;
text-align: left;
font-size: 20px;
}
.sts-container-text p{
color: #ffffff;
text-align: left;
font-family: 'Lato' , sans-serif;
width: 600px;
}
.bt-contact{
width: 100%;
text-align: left;
}
.bt-contact button{
width: 600px ;
}
.container-choice{
margin-top: 50px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.container-choice p{
width: 100%;
font-size: 30px;
color: #fbc103;
}
.container-choice-box{
width: 1200px;
height: 100px;
border: solid #fbc103;
}
.container-choice-text{
width: 100%;
}
div.table-title {
display: block;
margin: auto;
max-width: 600px;
padding:5px;
width: 100%;
}
.table-title h3 {
color: #fafafa;
font-size: 30px;
font-weight: 400;
font-style:normal;
font-family: "Roboto", helvetica, arial, sans-serif;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
text-transform:uppercase;
}
/*** Table Styles **/
.table-fill {
border-collapse: collapse;
height: 320px;
margin: auto;
max-width: 1200px;
padding:5px;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}
th {
color:#fbc103;
font-size:23px;
font-weight: bold;
padding:24px;
text-align:left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
vertical-align:middle;
}
tr {
border-bottom: 1px solid #fbc103;
color:#ffffff;
font-size:16px;
font-weight:normal;
text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
tr:hover td {
background:#fbc103;
color:#000000;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
}
tr:last-child td:first-child {
border-bottom-left-radius:3px;
}
tr:last-child td:last-child {
border-bottom-right-radius:3px;
}
td {
padding:20px;
text-align:left;
vertical-align:middle;
font-weight:300;
font-size:15px;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
}
th.text-left {
text-align: center;
}
th.text-center {
text-align: center;
}
th.text-right {
text-align: right;
}
td.text-left {
text-align: center;
width: 17%;
}
td.text-center {
text-align: center;
}
td.text-right {
text-align: right;
}
/*-----------------------end-pages-produits-----------------------*/
/*-------------------------Compagnon SRX---------------------------*/
.srx-container-text{
width: 600px;
height: auto;
z-index: 10;
}
.srx-container-text h1{
color: #fbc103;
text-align: left;
font-family: 'Fjalla One' , sans-serif;
margin: 20px 0px 0px 0px;
font-size: 85.5px;
float: left;
width: 100%;
}
.srx-container-text h2{
text-align: left;
font-size: 20px;
}
.srx-container-text p{
text-align: left;
}
.bty-srx {
font-size: 71px;
color: #fbc103;
margin: 0;
padding: 0;
text-align: left;
letter-spacing: 3px;
letter-spacing: 29.5px;
}
.bty1-srx {
font-size: 34px;
color: #ffffff;
margin: 0;
padding: 0;
text-align: left;
margin-top: -20px;
letter-spacing: 2px;
}
.btw-srx {
font-size: 63px;
color: #fbc103;
margin: 0;
padding: 0;
text-align: left;
margin-top: -20px;
letter-spacing: 22px;
}
.container-picture-srx {
width: 600px;
height: 560px;
background-image: url("../img/SRX/srx-plongeur.webp");
background-repeat: no-repeat;
margin-left: 5px;
}
.container-picture-srx-en {
width: 600px;
height: 560px;
background-image: url("../img/SRX/srx-plongeur-en.png");
background-repeat: no-repeat;
margin-left: 5px;
}
.srx-accus-general{
width: 100%;
height: auto;
background-color: #222;
}
.srx-accus{
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.srx-accus-flex{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.srx-accus-moyen h4{
font-size: 2vw;
margin: 60px;
text-align: center;
}
.srx-accus img{
}
/*----------------------End Compagnon SRX---------------------------*/
/*-----------------------pages-RL-produits-----------------------*/
#image-container {
position: relative;
width: 75%;
max-width: 1200px;
height: 350px;
overflow: hidden;
margin: 0 auto;
margin-bottom: 50px;
}
.top-image, .bottom-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: opacity 0.02s ease-in-out;
}
.bottom-image {
opacity: 0;
}
.rl-01{
width: 100%;
height: 800px;
background-color: #000;
margin-top: 100px;
}
.big-text{
}
.bty{
font-size: 50.2px;
color: #fbc103;
margin: 0;
padding: 0;
text-align: left;
}
.btw{
font-size: 66.3px;
color: #ffffff;
margin: 0;
padding: 0;
text-align:left;
margin-top: -20px;
}
.bty1{
font-size: 49.1px;
color: #fbc103;
margin: 0;
padding: 0;
text-align: left;
margin-top: -20px;
}
.rl-text-01{
width: 1200px;
display: flex;
flex-direction: row;
text-align: center;
font-size: 40px;
margin: 0;
padding: 0;
}
.rl-title-01{
font-size: 5vw;
margin-top: 60px;
}
.rl-title-01 h3{
margin: 0;
padding: 0;
color: #fbc103;
}
.carre-y-1{
width: 37px;
height: 130px;
background-color: #fbc103;
margin-top: 10px;
}
.carre-y-2{
width: 100%;
height: 130px;
background-color: #fbc103;
margin-top: 10px;
}
.three-text{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 600px;
}
.container-words {
max-width: 1200px;
width: 75%;
margin: 0 auto;
height: 360px;
margin-top: 40px;
}
.container-words h4{
font-size: 3vw;
color: #fbc103;
}
.words {
display: flex;
justify-content: space-between;
align-items: center;
}
.word {
font-size: 30px;
font-weight: bold;
padding: 20px;
border-radius: 5px;
cursor: pointer;
color: #ffffff;
}
.word:hover {
color: #fbc103;
}
.images {
position: relative;
}
.images img {
max-width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.images img:first-child {
opacity: 1;
}
.images img:nth-child(2) {
z-index: 1;
}
.images img:nth-child(3) {
z-index: 2;
}
.images img:nth-child(4) {
z-index: 3;
}
.images img:nth-child(5) {
z-index: 4;
}
.word:hover + .images img {
opacity: 0;
}
.word:hover + .images img:nth-child(2) {
opacity: 1;
}
.word:hover + .images img:nth-child(3) {
opacity: 1;
}
.word:hover + .images img:nth-child(4) {
opacity: 1;
}
.word:hover + .images img:nth-child(5) {
opacity: 1;
}
.bloc-shields{
width: 100%;
height: auto;
}
.bloc-shields h1{
margin-top: 0;
}
.bloc-shields h4{
font-size: 3vw;
color: #fbc103;
margin: 20px;
margin-top:
40px;
}
.shields{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
max-width: 1200px;
height: auto;
justify-content: center;
margin: 0 auto;
}
.shields img{
height: auto;
}
.gros-titre{
font-size: 12vw;
color: #ffffff;
text-align: center;
}
.rl-troisquart img{
width: 60%;
}
.url1{
width: 100%;
height: auto;
background-color: #111111;
}
.url1-b{
margin: 0 auto;
}
.url1-text{
}
.url1-text h4{
font-size: 90px;
color: #fbc103;
margin: 0;
padding-top: 50px;
margin-bottom: 20px;
}
.url1-text p{
font-size: 30px;
font-style: italic;
margin-top: 15px;
margin-bottom: 50px;
margin-left: 15px;
}
.url-flex{
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
justify-content: space-evenly;
margin: 15px;
border-radius: 20px;
border: 2px solid #fbc103;
margin: 20px auto;
}
.url1-product-image{
display: flex;
flex-direction: column;
width: 300px;
margin: 0 auto;
background-color: #ffffff;
border-radius: 20px;
}
.url1-image-rlurl{
}
.uaf{
background-image: url("../img/Label.webp");
width: 160px;
height: 160px;
background-repeat: no-repeat;
margin-left: 76%;
margin-top: 346px;
}
.uaf-en{
background-image: url("../img/Label_en.png");
width: 160px;
height: 160px;
background-repeat: no-repeat;
margin-left: 76%;
margin-top: 346px;
}
.url1-c{
text-align: left;
}
.url1-c h4{
font-size: 15px;
}
.url1-c i{
font-size: 30px;
}
.lbi{
width: 100%;
height: auto;
}
.lbi-flex{
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
justify-content: space-evenly;
margin: 15px;
border-radius: 20px;
border: 2px solid #fbc103;
margin: 20px auto;
}
.lbi-img{
width: 100%;
height: auto;
}
.lbi-img-02{
height: 480px;
background-image: url("../img/RL/lbi1.png");
background-repeat: no-repeat;
background-size: cover;
}
.lbi-b{
margin: 0 auto;
}
.lbi-text{
}
.lbi-text h4{
font-size: 90px;
color: #fbc103;
margin: 0;
padding-top: 30px;
}
.lbi-text p{
font-size: 30px;
font-style: italic;
margin-top: 6px;
margin-bottom: 50px;
}
.b2li{
width: 100%;
height: auto;
background-color: #111111;
}
.b2li-b{
max-width: 1200px;
margin: 0 auto;
}
.b2li-img{
width: 100%;
height: auto;
}
.b2li-img-02{
height: 480px;
background-image: url("../img/RL/b2li.png");
background-repeat: no-repeat;
background-size: cover;
}
.b2li-text{
}
.pe23br{
vertical-align:middle;
}
.pe23br img{
background-color: #ffffff;
border-radius: 20px;
}
.b2li-text h4{
font-size: 90px;
color: #fbc103;
margin: 0;
padding-top: 30px;
}
.b2li-text p{
font-size: 30px;
font-style: italic;
margin-top: 6px;
margin-bottom: 50px;
}
.rl-photo-02 {
width: 100%;
height: auto;
}
.rl-photo-02 h4{
font-size: 2.5vw;
color: #fbc103;
max-width: 1200px;
margin: 50px auto;
}
.rl-photo-02 img{
width: 100%;
margin-top: 35px;
}
.active-word {
color: #fbc103;
}
.arrow {
width: 0;
height: 0;
border-top: 20px solid #ffffff;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
animation: blink 1s linear infinite;
margin-left: 100px;
}
.arrow.active-arrow {
/* Styles pour la flèche lorsque active */
position: absolute;
top: -30px; /* Ajustez cette valeur selon votre besoin */
left: 50%;
transform: translateX(-50%);
/* ... */
}
.hidden{
display: none;
}
.arrow:hover {
animation: none;
opacity: 1; /* Rend l'élément complètement opaque lorsqu'il est survolé */
}
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.datasheet{
margin-top: 20px;
color: #fbc103;
}
.datasheet button{
margin-top: 20px;
color: #fbc103;
font-size: 30px;
cursor: pointer;
}
.datasheet button:hover{
color: #ffffff;
}
/*-----------------------end-pages-RL-produits-----------------------*/
.onglet {
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.onglet-titre {
background-color: #fbc103;
padding: 10px;
cursor: pointer;
color: #000;
text-align: left;
font-size: 13px;
}
.onglet-contenu {
display: none;
padding: 10px;
text-align: left;
}
#image-container-sts {
position: relative;
width: 100%;
max-width: 1200px;
height: auto;
overflow: hidden;
margin: 0 auto;
height: 600px;
margin-top: 50px;
}
/*----------------------------sts---------------------------------*/
.big-text-sts{
}
.bty-sts{
font-size: 33.8px;
color: #fbc103;
margin: 0;
padding: 0;
text-align: left;
margin-top: 4px;
}
.btw-sts{
font-size: 55.7px;
color: #ffffff;
margin: 0;
padding: 0;
text-align:left;
margin-top: -6px;
}
.bty1-sts{
font-size: 55px;
color: #fbc103;
margin: 0;
padding: 0;
text-align: left;
margin-top: -13px;
}
.bty-sts-en{
font-size: 27.8px;
color: #fbc103;
margin: 0;
padding: 0;
text-align: left;
margin-top: 4px;
}
.btw-sts-en{
font-size: 47.7px;
color: #ffffff;
margin: 0;
padding: 0;
text-align:left;
margin-top: -6px;
}
.bty1-sts-en{
font-size: 71px;
color: #fbc103;
margin: 0;
padding: 0;
text-align: left;
margin-top: -13px;
}
.sts-title-01{
font-size: 5vw;
margin-top: 40px;
}
.sts-title-01 h3{
margin-left: 20px;
margin-right: 20px;
padding: 0;
margin: 0;
}
.sts-title-01 h4{
font-size: 3vw;
color: #fbc103;
padding-top: 2%;
margin: 0;
margin-bottom: 30px;
}
.sts-video{
width: 100%;
height: auto;
background-color: #000000;
}
.sts-video h4{
font-size: 3vw;
color: #fbc103;
padding-top: 5%;
margin: 0;
margin-bottom: 40px;
}
.bloc-sts{
width: 100%;
height: auto;
background-image: url("../img/STS/sts-helice.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.bloc-sts h1{
margin-top: 0;
}
.bloc-sts h4{
font-size: 3vw;
color: #fbc103;
margin: 20px;
}
.container-picture-sts{
width: 280px;
height: 570px;
background-image: url("../img/STS/sts-perso.png");
background-repeat: no-repeat;
}
.srx-light img {
width: 287px;
}
.srx-light h4{
font-size: 3vw;
color: #fbc103;
margin: 20px;
}
.srx-accessoires{
width: 100%;
height: auto;
background-color: #111111;
}
/*---------------------------end-sts------------------------------*/
/*---------------------------Alligator---------------------------*/
.container-picture-alli{
width: 450px;
height:460px;
background-image: url("../img/be/alliunder.png");
background-repeat: no-repeat;
border-radius: 20px;
border: 2px solid #fbc103
}
.bty-alli{
font-size: 31.8px;
color: #fbc103;
margin: 0;
margin-top: 0px;
padding: 0;
text-align: left;
margin-top: 4px;
}
.btw-alli{
font-size: 49.5px;
color: #ffffff;
margin: 0;
margin-top: 0px;
padding: 0;
text-align: left;
margin-top: -6px;
}
.bty1-alli{
font-size: 60px;
color: #fbc103;
margin: 0;
margin-top: 0px;
padding: 0;
text-align: left;
margin-top: -13px;
}
.bty-alli-en{
font-size: 36.8px;
color: #fbc103;
margin: 0;
margin-top: 0px;
padding: 0;
text-align: left;
margin-top: 4px;
}
.btw-alli-en{
font-size: 59.5px;
color: #ffffff;
margin: 0;
margin-top: 0px;
padding: 0;
text-align: left;
margin-top: -6px;
}
.bty1-alli-en{
font-size: 39px;
color: #fbc103;
margin: 0;
margin-top: 0px;
padding: 0;
text-align: left;
margin-top: -13px;
}
.dotation{
text-align: left;
}
.approuv{
margin-bottom: 50px;
color: #fbc103;
}
.alli-title-01{
width: 100%;
}
.alli-title-01 h4{
font-size: 45px;
margin: 0;
}
.alli-title-01 p{
font-size: 25px;
max-width: 1000px;
margin: 0 auto;
margin-bottom: 50px;
}
.ensemble-alli{
display: flex;
margin: 0 auto;
justify-content: center;
flex-wrap: wrap;
}
.ensemble-alli-gat img{
background-color: #757575;
border-radius: 20px;
margin: 5px 5px 0px 5px;
}
.gat-flex{
border: 2px solid #fbc103;
border-radius: 20px;
margin: 20px;
}
/*------------------boucliers---------------------------*/
.flex-bmo{
display: flex;
max-width: 1440px;
flex-wrap: wrap;
justify-content: center;
border: 2px solid #fbc103;
border-radius: 20px;
margin-top: 20px;
}
.bmofrance{
margin: 15px;
}
.bmofrance img{
width: 210px;
}
.bty-bmofrance{
font-size: 59px;
color: #fbc103;
margin: 0;
padding: 0;
text-align: left;
letter-spacing: 3px;
}
.btw-bmofrance{
font-size: 44px;
color: #ffffff;
margin: 0;
margin-top: 0px;
margin-top: 0px;
padding: 0;
text-align: left;
margin-top: -20px;
}
.bty1-bmofrance{
font-size: 63px;
color: #fbc103;
margin: 0;
margin-top: 0px;
margin-top: 0px;
padding: 0;
text-align: left;
margin-top: -20px;
letter-spacing: 4.5px;
}
.bty-bmofrance-en{
font-size: 58px;
color: #fbc103;
margin: 0;
padding: 0;
text-align: left;
letter-spacing: 3px;
}
.btw-bmofrance-en{
font-size:31px;
color: #ffffff;
margin: 0;
margin-top: 0px;
margin-top: 0px;
padding: 0;
text-align: left;
margin-top: -20px;
}
.icone{
text-align: left;
}
.bmo02{
display: flex;
justify-content: center;
}
.bty1-bmofrance-en{
font-size: 81px;
color: #fbc103;
margin: 0;
margin-top: 0px;
margin-top: 0px;
padding: 0;
text-align: left;
margin-top: -20px;
letter-spacing: 4.5px;
}
/*---------------------------smd----------------------------------*/
.container-text-smd {
width: 600px;
height: 565px;
z-index: 10;
}
.container-text-smd h1 {
color: #fbc103;
text-align: left;
font-family: 'Fjalla One' , sans-serif;
margin: 20px 0px 0px 0px;
font-size: 75px;
float: left;
width: 100%;
}
.container-text-smd h2 {
color: #ffffff;
text-align: left;
font-size: 20px;
}
.container-text-smd p {
color: #ffffff;
text-align: left;
font-family: 'Lato' , sans-serif;
width: 600px;
}
.bty-smd{
font-size: 70.8px;
color: #fbc103;
margin: 0;
padding: 0;
text-align: left;
margin-top: -5px;
}
.bty-smd-en{
font-size: 69.8px;
color: #fbc103;
margin: 0;
padding: 0;
text-align: left;
margin-top: -5px;
}
.btw-smd{
font-size: 50.7px;
color: #ffffff;
margin: 0;
padding: 0;
text-align:left;
margin-top: -20px;
}
.btw-smd-en{
font-size: 49.7px;
color: #ffffff;
margin: 0;
padding: 0;
text-align:left;
margin-top: -20px;
}
.bty1-smd{
font-size: 49px;
color: #fbc103;
margin: 0;
padding: 0;
text-align: left;
margin-top: -20px;
}
.bty1-smd-en{
font-size: 38px;
color: #fbc103;
margin: 0;
padding: 0;
text-align: left;
margin-top: -10px;
}
.container-picture-smd{
width: 420px;
height: 460px;
background-image: url("../img/SMD/smd-01.png");
background-repeat: no-repeat;
border: 2px solid #fbc103;
border-radius: 15px;
margin-top: 43px;
}
.smd-title-01{
font-size: 5vw;
margin-top: 40px;
}
.smd-title-01 h3{
margin-left: 20px;
margin-right: 20px;
padding: 0;
margin: 10px;
}
.smd-title-01 h4{
font-size: 3vw;
color: #fbc103;
padding-top: 2%;
margin: 0;
margin-bottom: 30px;
}
.smd-title-01 img{
width: 70%;
height: auto;
border-radius: 20px;
}
.smd-title-01 p{
font-size: 20px;
width: 1200px;
margin: 0 auto;
margin-bottom: 30px;
}
.smd-explain h3{
font-size: 30px;
color: #ffffff;
}
.smd-explain-flex{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.smd-explain-flex img{
width: 450px;
}
.smd-explain-cam h3{
font-size: 30px;
color: #fbc103;
}
.smd-explain-cam h2{
font-size: 40px;
color: #ffffff;
}
.smd-explain-cam-flex{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.smd-explain-cam-flex img{
width: 300px;
}
.smd-explain-phone{
display: flex;
flex-direction: column;
}
.smd-video{
height: auto;
margin: auto;
}
.smd-video video{
border-radius: 20px;
width: 800px;
margin: 50px;
border: 2px solid #333;
}
.pince{
display: flex;
justify-content: center;
}
.pince img{
width: 350px;
margin: 10px;
border-radius: 20px;
}
.perche{
display: flex;
justify-content: center;
}
.perche img{
width: 250px;
margin: 10px;
border-radius: 20px;
}
.popup-info {
display: none;
position: absolute;
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(5px);
border: 2px solid rgba(255, 255, 255, 0.37);
padding: 15px;
z-index: 1;
border-radius: 20px;
margin-left: 0;
width: 300px;
margin-top: -70px;
}
.popup-info-xl {
display: none;
position: absolute;
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(5px);
border: 2px solid rgba(255, 255, 255, 0.37);
padding: 15px;
z-index: 1;
border-radius: 20px;
margin-right: 30px;
width: 300px;
margin-top: -70px;
}
.popup-info p{
color: #ffffff;
}
.trigger:hover + .popup-info {
display: block;
}
#image-container-sts h4{
font-size: 30px;
color: #fbc103;
z-index: 6;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #171717;
padding: 10px;
margin-top: -210px;
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(5px);
border: 2px solid rgba(255, 255, 255, 0.37);
width: 460px;
height: 130px;
}
/*----------------------------raid lighting ng---------------------*/
#confLink{
margin: 40px;
width: 440px;
margin-right: auto;
margin-left: auto;
}
#confLink a{
text-decoration: none;
font-size: 30px;
color: #fbc103;
padding: 20px;
border: 2px solid #fbc103;
border-radius: 15px;
}
#confLink a:hover{
color: #222222;
background-color: #fbc103;
}
.img-ogmios{
margin-top: 50px;
}
.img-ogmios img{
width: 70%;
margin-top: 30px;
}
.container-picture-rlng{
width: 467px;
height: 419px;
background-image: url("../img/RLNG/rl-ng-01.webp");
background-repeat: no-repeat;
margin-top: 43px;
border-radius: 15px;
border: 2px solid #fbc103;
}
.bty-rlng{
font-size: 59px;
color: #fbc103;
margin: 0;
padding: 0;
text-align: left;
letter-spacing: 3px;
}
.btw-rlng{
font-size: 50px;
color: #ffffff;
margin: 0;
margin-top: 0px;
padding: 0;
text-align: left;
margin-top: -20px;
}
.bty1-rlng{
font-size: 58px;
color: #fbc103;
margin: 0;
margin-top: 0px;
padding: 0;
text-align: left;
margin-top: -20px;
letter-spacing: 4.5px;
}
.bty-rlng-en{
font-size: 49px;
color: #fbc103;
margin: 0;
padding: 0;
text-align: left;
letter-spacing: 3px;
}
.btw-rlng-en{
font-size: 63px;
color: #ffffff;
margin: 0;
margin-top: 0px;
padding: 0;
text-align: left;
margin-top: -20px;
}
.bty1-rlng-en{
font-size: 55px;
color: #fbc103;
margin: 0;
margin-top: 0px;
padding: 0;
text-align: left;
margin-top: -20px;
letter-spacing: 4.5px;
}
.gammexl{
margin-right: 60px;
}
.RLNG-video video{
border-radius: 20px;
width: 800px;
margin: 50px;
border: 2px solid #333;
}
.pack-flex{
display: flex;
justify-content: space-evenly;
}
.pack-flex img{
height: 300px;
}
#image-container-rlng{
position: relative;
max-width: 1000px;
height: 620px;
overflow: hidden;
margin: 0 auto;
margin-bottom: 0px;
margin-bottom: 50px;
}
.top-image-rlng, .bottom-image-rlng {
position: absolute;
top: 0;
width: 80%;
transition: opacity 0.02s ease-in-out;
transform: translate(-50%);
}
.bottom-image-rlng {
opacity: 0;
}
.image-container-ngtest {
position: relative;
height: 100vh; /* Hauteur de l'écran */
overflow: hidden;
}
.image-container-ngtest img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0; /* Image masquée par défaut */
transition: opacity 0.5s ease-in-out; /* Transition de l'opacité */
}
.shields-rlng01{
margin-right: -80px;
z-index: 5;
}
.shields-rlng02{
}
.shields-rlng03{
margin-left: -80px;
}
.rlng-troisquart{
width: 1000px;
margin: 0 auto;
}
.rlng-troisquart img{
width: 50%;
}
.rlng-light-flex{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
}
.rlng-light h4{
font-size: 3vw;
color: #fbc103;
margin: 20px;
}
.rlng-light img{
width: 250px;
}
.rlng-picture-text{
margin: 20px 100px 20px 100px;
}
.rlng-picture-text p{
font-size: 50px;
margin: 0;
}
.bloc-shields-rlng{
width: 100%;
height: auto;
}
.bloc-shields-rlng h1{
margin-top: 0;
font-size: 10vw;
}
.bloc-shields-rlng h4{
font-size: 6vw;
color: #fbc103;
margin: 20px;
}
.rlng-container-text{
width: 600px;
height: auto;
z-index: 10;
text-align: left;
}
.rlng-container-text h2{
font-size: 20px;
}
.contact-color{
color: #fbc103;
text-decoration: none;
}
.rlng-container-text h1{
color: #fbc103;
text-align: left;
font-family: 'Fjalla One' , sans-serif;
margin: 20px 0px 0px 0px;
font-size: 50px;
float: left;
width: 100%;
}
.plus_ogmios{
font-size: 30px;
margin-top: 100px;
}
.ogmios{
width: 100%;
height: auto;
background-color: #111111;
}
.rlng-ogmios{
background-color: #fbc103;
margin: 5px;
border-radius: 10px;
width: 13%;
cursor: pointer;
position: relative;
}
.rlng-ogmios-ir{
background-color: #fbc103;
margin: 5px;
border-radius: 10px;
width: 13%;
cursor: pointer;
position: relative;
}
.rlng-ogmios-ir img{
width: 50%;
}
.rlng-ogmios-ir p{
color: #000000;
font-weight: bold;
margin: 10px 0 0 0 ;
height: 40px;
}
.rlng-ogmios img{
width: 100%;
margin: 0 0 10px 0;
}
.rlng-ogmios p{
color: #000000;
font-weight: bold;
margin: 10px 0 0 0;
height: 40px;
}
.detail-ogmios{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
padding: 20px;
}
/* Styles pour la fenêtre modale */
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 45%;
height: 70%;
background-color: #000000;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
border-radius: 20px;
border: 5px solid #fbc103;
}
.modal-ir {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
height: 70%;
background-color: #000000;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
border-radius: 20px;
border: 5px solid #fbc103;
}
.modal-content {
max-width: 80%;
max-height: 80%;
}
.modal-content img {
max-width: 100%;
max-height: 100%;
margin-top: -70px;
background-color: #7d7d7d;
border-radius: 20px;
margin: 20px;
}
.close-modal {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
cursor: pointer;
color: #ffffff;
}
.close-modal-img {
position: absolute;
top: 10px;
right: 10px;
width: 24px;
height: 24px;
cursor: pointer;
}
.modal-caption{
font-size: 30px;
color: #fbc103;
margin: 0;
}
.modal-caption p{
margin: 0;
}
.led-6-ogmios{
font-size: 35px;
margin-top: 50px;
}
.ogmios-image{
width:1200px;
margin-top: 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin: auto;
}
.flex_ogmios{
display: flex;
flex-direction: column;
margin: 10px;
}
.flex_ogmios img{
margin: 30px;
}
.infra-6{
margin-top: 20px;
font-size: 30px;
}
.img-ir{
width: 18%;
margin-top: 5px;
}
.option-ir{
width: 600px;
height: 200px;
background-color: #222222;
margin: 0 auto;
margin-top: 30px;
border-radius: 20px;
}
.text_led_6{
width: 270px;
height: 150px;
border: 1px solid #ffffff;
border-radius: 20px;
margin: auto;
}
.text_led_6_ir{
width: 270px;
height: 150px;
border: 1px solid red;
border-radius: 20px;
margin:auto;
}
.text_led_6 h4{
margin: 5px;
}
.text_led_6 p{
margin: 5px;
}
.text_led_6_ir h4{
margin: 5px;
}
.text_led_6_ir p{
margin: 5px;
}
.datasheet_footer{
max-width: 1200px ;
margin: 0 auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 100%;
}
.datasheet_footer h2{
margin-top: 30px;
}
/*----------------------------end raid lighting ng------------------*/
.be{
max-width: 1250px;
}
.be h2{
color: #fbc103;
text-align: left;
}
.be li{
text-align: left;
font-weight: bold;
}
.article_be{
display: flex;
flex-wrap: wrap;
margin-bottom: 68px;
}
.article_be p{
max-width: 700px;
}
.article_be img{
width: 300px;
}
/*------------------------------bouclier mo/capture-----------------*/
.container-picture-bmoc {
width: 467px;
height: 419px;
background-image: url("../img/BMOC/bouclier_mo_ev.png");
background-repeat: no-repeat;
margin-left: 15px;
margin-top: 43px;
border-radius: 15px;
border: 2px solid #fbc103;
}
.container-picture-bmofrance{
width: 467px;
height: 419px;
background-image: url("../img/bouclier/bmo-france-02.png");
background-repeat: no-repeat;
margin-top: 43px;
border-radius: 15px;
border: 2px solid #fbc103;
}
.bmofrance-container-text h1{
color: #fbc103;
text-align: left;
font-family: 'Fjalla One' , sans-serif;
margin: 20px 0px 0px 0px;
font-size: 45px;
float: left;
width: 100%;
}
.bmofrance-container-text{
width: 600px;
height: auto;
z-index: 10;
text-align: left;
}
.bmofrance-container-text h2{
font-size: 20px;
}
.bty-bmofrance{
font-size: 58px;
color: #fbc103;
margin: 0;
padding: 0;
text-align: left;
letter-spacing: 3px;
}
.btw-bmofrance{
font-size: 44px;
color: #ffffff;
margin: 0;
margin-top: 0px;
margin-top: 0px;
padding: 0;
text-align: left;
margin-top: -20px;
}
.bty1-bmofrance{
font-size: 62px;
color: #fbc103;
margin: 0;
margin-top: 0px;
margin-top: 0px;
padding: 0;
text-align: left;
margin-top: -20px;
letter-spacing: 4.5px;
}
/*------------------------------end bouclier mo/capture-----------------*/
/*---------------------------endsavoirfaire-------------------------*/
/*--------------------------maintenance et sav---------------------*/
.sav{
max-width: 1200px;
margin: 0 auto;
}
.sav h1{
margin-bottom: 80px;
}
.sav h3{
text-align: left;
color: #fbc103;
margin: 10px;
}
.sav p{
text-align: left;
margin: 10px;
}
/*-----------------------end maintenance et sav---------------------*/
/*-------------------------nous decouvrir---------------------------*/
.mise-en-page{
max-width: 1200px;
margin: 0 auto;
}
.mise-en-page h2{
text-align: left;
}
.titre-nous-decouvrir{
text-align: left;
}
.titre-nous-decouvrir h1{
text-align: center;
margin-bottom: 90px;
}
.titre-nous-decouvrir h2{
color: #fbc103;
margin: 10px;
}
.titre-nous-decouvrir p{
margin: 10px;
}
.mise-en-page img{
max-width: 561px;
max-height: 261px;
margin: 20px;
}
/*-----------------------end nous decouvrir-------------------------*/
/*------------------------réference-------------------------------*/
.container-ref{
width: 100%;
margin-top: 80px;
}
.container-ref h2{
font-size: 3vw;
color: #fbc103;
}
.reference{
max-width: 1200px;
margin: 10px auto;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
border: 5px solid #fbc103;
background-color: #fff;
}
.reference img{
margin-top: 5px;
margin-bottom: 5px;
}
@media (max-width: 768px){
.container-ref h2{
font-size: 7vw;
}
.reference{
margin: 10px;
}
}
/*-----------------------end reference----------------------------*/
/*----------------------------Contact-----------------------------*/
.fondecran{
background-image: url(../img/background-contact.webp);
background-repeat: no-repeat;
background-size: auto;
}
.contact{
display: flex;
margin-left: auto;
margin-right: auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
margin-top: 20px;
}
.formulaire{
height: 700px;
text-align: left;
margin-left: 100px;
padding-left: 50px;
padding-right: 50px;
border-radius: 20px;
}
.formulaire h2{
font-size: 50px;
margin: 0;
filter: none;
opacity:1;
}
.formulaire h3{
font-size: 40px;
margin: 0;
filter: none;
opacity:1;
}
.info-contact{
width: 400px;
height: 670px;
background-color: #fbc103;
border-radius: 20px;
margin-right: 70px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.text-h2{
margin-top: 7px;
}
.input-group{
position: relative;
margin-top: 60px;
}
.input-flex{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.input-group input{
display: block;
padding: 10px;
border: none;
outline: none;
border-radius: 5px;
font: inherit;
margin: 0 30px 0 0;
width: 300px;
background-color: #000000;
opacity: 0.8;
color: #ffffff;
}
.input-group textarea{
display: block;
padding: 10px;
border: none;
outline: none;
border-radius: 5px;
font: inherit;
margin: 0 30px 0 0;
width: 650px;
height: 100px;
background-color: #000000;
opacity: 0.8;
color: #ffffff;
}
.input-group label{
position: absolute;
top: -30px;
display: inline-flex;
column-gap: 10px;
align-items: center;
transition: transform .25s;
opacity: .25;
}
/*.icon{
display: inline-flex;
opacity: 0;
}*/
.input-group input:focus+label{
transform: translateX(26px);
}
.input-group input:focus+label .icon{
opacity: 1;
transition-delay: .1s;
}
.input-group input::placeholder{
transition: opacity .25s;
}
.input-group input:focus::placeholder{
opacity: 0;
}
.input-group textarea:focus+label{
transform: translateX(26px);
}
.input-group textarea:focus+label .icon{
opacity: 1;
transition-delay: .1s;
}
.input-group textarea::placeholder{
transition: opacity .25s;
}
.input-group textarea:focus::placeholder{
opacity: 0;
}
input[type=submit]{
width: 180px;
height: 30px;
background-color: #fbc103;
margin-top: 50px;
border-radius: 5px;
border: none;
cursor: pointer;
}
input[type=submit]:hover{
background-color: #ffffff;
}
.info-contact h2{
color: #000000;
font-size: 50px;
margin: 0;
}
.info-contact p{
color: #000000;
}
.breadcrumb-contact{
width: 100%;
height: 20px;
}
.map{
max-width: 1200px;
margin: 20px auto;
border-radius: 20px;
border: solid 4px #fbc103;
}
iframe{
border-radius: 20px;
}
/*--------------------------End Contact---------------------------*/
/*--------------------------CGV---------------------------*/
.cgv{
max-width: 1200px;
margin: 0 auto;
}
.cgv h3{
text-align: left;
margin: 10px;
}
.cgv h6{
text-align: left;
margin: 10px;
font-size: 15px;
}
.cgv p{
margin: 10px;
text-align: left;
text-align: justify;
}
/*--------------------------End CGV---------------------------*/
@media(min-width: 1220px) and (max-width: 1440px){
.container-product{
width: 270px;
}
.new{
max-width: 1440px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-left: auto;
margin-right: auto;
justify-content: space-around;
}
.new-1{
width: 400px;
height: 225px;
}
.new-text{
width: 90%;
padding: 12px;
}
.new-product{
width: 30%;
}
.new-1{
width: 90%;
}
}
@media(min-width: 1024px) and (max-width: 1220px){
.new{
max-width: 1024px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-left: auto;
margin-right: auto;
justify-content: space-between;
}
.new-text{
width:100%;
}
.flex-container-product{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
}
.container-product {
width: 210px;
height: 550px;
}
.box-border {
height: 220px;
}
.new-text{
width: 90%;
}
.new-product{
width: 30%;
}
.new-1{
width: 90%;
}
.flag2 a{
position: absolute;
right: 66px;
}
}
/*-------------------tablette---------------------*/
@media(min-width: 768px) and (max-width: 1024px){
.map{
max-width: 1200px;
margin:30px;
}
.container-product {
width: 200px;
height: 550px;
margin: 20px;
}
.new{
max-width: 700px;
}
.new-product{
height: 216px;
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 10px 0 10px 0;
width: 700px;
}
.new-1{
width: 409px;
height: 197px;
}
.new-1 img{
max-width: 100%;
max-height: 100%;
position: relative;
top: 50%;
transform: translateY(-50%);
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
}
.new-text button{
border-radius: 5px;
width: 90%;
}
.new-text{
margin-right: 10px;
width: 400px;
}
.flex-container-product{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.container-product {
width: 285px;
height: 410px;
}
.box-border {
height: 177px;
}
.shields-rlng01{
z-index: 5;
width: 35%;
}
.shields-rlng02{
width: 64.5%;
}
.shields-rlng03{
width: 35%;
}
.flag2 a{
position: absolute;
right: 20px;
}
}
/****************fin tablette*******************/
/****************phone*******************/
@media screen and (max-width: 768px) {
.pack-flex img{
height: 270px;
}
#confLink a{
font-size: 20px;
}
.flex-menu{
flex-direction: column;
}
.flag2 a{
position: static;
}
.sous-menu > li > a {
font-size: 30px;
}
.map{
max-width: 300px;
margin:20px auto
}
.top-bar-phone{
display: none;
}
.logo-ev{
text-align: center;
}
.top-bar{
background-image: none;
}
.size-top-bar{
justify-content: center;
display: block;
}
.text-topb-tel{
display:none;
}
.text-topb-mail{
display:none;
}
#toggle+label {
margin: 0;
width: 45px;
display: grid;
grid-template-rows: repeat(3,10px);
row-gap: 0.2rem;
margin-right: auto;
margin-left: auto;
z-index: 600000;
margin-top: 10px;
}
#toggle+label span {
z-index: 60000;
}
h1{
font-size: 7vw;
}
.hamburger{
position: inherit;
z-index: 600000;
}
.hamburger-position{
width: 100%;
}
#logo-first{
margin-top: 70px;
}
#nav-logo {
padding-left: 0px;
background-image: url("../img/logo-ev.svg");
background-repeat: no-repeat;
left: 0;
right: 0;
margin: auto;
width: 90%;
top: 0;
margin-top: 30px;
}
.flex-menu-02{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.accordeon{
flex-direction: column;
display: flex;
width: 90%;
}
.trait_dessous{
width: 80%;
margin: auto;
}
.menu-title{
color: #ffffff;
font-weight: 600;
border-top: 1px #ebebeb solid;
cursor: pointer;
position: relative;
}
.menu-title:hover{
color: #fbc103;
}
.menu-title .number{
display: inline-block;
width: 40px;
line-height: 40px;
background: #f2f2f2;
text-align: center;
font-size: 18px;
color: #262626;
font-weight: 600;
margin-right: 18px;
}
.menu-title:after{
position: absolute;
height: 50px;
line-height: 50px;
top: 0;
right: 0;
font-size: 13px;
color: #262626;
font-family: FontAwesome;}
.menu-title.active:after{
content: "\f106";
color:#262626;
}
.accordeon-entry{
padding: 0 0 20px 20px;
display: none;
}
.accordeon.size-1 .menu-title{
font-size: 21px;
line-height: 40px;
text-transform: none;
padding: 13px 0;
margin-top: -1px;
width: 100%;
}
.accordeon.size-1 .menu-title:after{
line-height: 66px;
}
.accordeon.size-1 .accordeon-entry{
padding: 0px 0 55px 0;
}
#trait_dessous{
width: 100%;
margin-left:auto;
margin-bottom: auto;
}
.nav{
overflow: auto ;
}
nav{
text-align: center;
margin-right: 0px;
}
nav a{
}
nav > ul{
padding-left: 0px;
}
.nav-ajust-box{
width: 125px;
font-size: 15px;
}
.nav-ajust-box :hover{
border-radius: 10px;
width: 170px;
}
#slider{
margin-top: 20px;
}
.product-container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:normal;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
}
.shortcut{
width: 100%;
justify-content: center;
}
.shortcut a{
margin: 10px;
}
.shortcut button{
width: 100px;
}
.container-text{
width: 100%;
height: auto;
z-index: 10;
}
.container-text h1{
text-align: center;
font-size: 53px;
margin-top: 5px;
}
.container-text p{
width: 100%;
}
.container-text-smd p{
width: 100%;
}
.bt-contact button {
width: 100%;
}
.container-picture-sts{
margin-left: 35px;
}
#image-container-sts{
width: 100%;
height: 356px;
}
#image-container-sts img{
width: 100%;
}
.container-text-smd{
width: 100%;
}
.container-text-smd h1{
font-size: 10vw;
text-align: center;
margin-top: 12px;
}
.rl-troisquart-sts img{
width: 270px;
}
.rl-photo-02 h4 {
font-size: 6vw;
padding-top: 0%;
}
.sts-video h4 {
font-size: 6vw;
padding-top: 15px;
}
#maVideo{
width: 390px;
height: 220px;
margin: 0;
}
.smd-title-01 p{
width: 90%;
}
#confLink{
width: 90%;
}
.ogmios-image{
width: 90%;
}
.pack-flex{
flex-direction: column;
}
.pince{
flex-direction: column;
}
.perche{
flex-direction: column;
}
.gros-titre {
font-size: 12vw;
}
.bloc-sts h4 {
font-size: 6vw;
margin: 20px;
}
.sts-title-01 h3{
font-size: 12vw;
padding-top: 0%;
margin-bottom: 20px;
}
.sts-title-01 h4{
font-size: 6vw;
padding-top: 0%;
margin-bottom: 20px;
}
video{
max-width: 100%;
height: auto;
}
th{
font-size: 12px;
}
td{
font-size: 10px;
}
#togg1{
width: 100%;
}
.shields{
display: flex;
flex-direction: column;
}
.shields img{
width: 95%;
height: auto;
}
#image-container-sts h4{
font-size: 15px;
color: #fbc103;
margin-top: -128px;
width: 75%;
height: 70px;
}
.sts-title-01 p{
font-size: 12px;
width: 100%;
margin: 0 auto;
margin-top: 30px;
}
#image-container{
height: 70px;
}
.container-words h4 {
font-size: 6vw;
}
.word{
font-size: 10px;
}
.arrow{
margin: 0 auto;
}
.container-words{
height: 250px;
width: 95%;
}
.bloc-shields h4{
font-size: 6vw;
}
.new-product{
height: 476px;
margin: 5px auto;
}
.new-1{
height: 230px;
}
.diapo{
margin-top: 30px;
}
.element{
width: 100%;
border: solid 5px #fbc103;
background-image: none;
flex: auto;
}
.element h6{
font-size: 20px;
color: #fbc103;
margin: 5px 0px 5px 0;
}
.footer{
height: auto;
flex-direction: column;
}
.footer-contact{
text-align: center;
}
.footer h4 {
text-align: center;
}
.footer li {
text-align: center;
}
.flex-container-product {
flex-direction: column;
}
.container-product-be {
width:auto ;
height: auto;
}
.mif{
max-width: 35%;
margin-top: 35px;
}
.mif h4{
color: #ffffff;
}
.text-background h2{
font-size: 30px;
}
.sous-menu-box{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.nav-text-box{
margin: 10px;
line-height: 20px;
}
.formulaire{
width: 100%;
height: auto;
margin-left: 10px;
text-align: center;
}
.formulaire h2{
font-size: 25px;
}
.formulaire h3{
font-size: 20px;
}
.input-group textarea{
width: 90%;
}
.info-contact{
width:300px;
height: 570px;
margin: 50px auto 0 auto;
justify-content: center;
}
.container-picture{
width: 100%;
background-position: center;
margin-top: 20px;
}
.rl-title-01{
font-size: 10vw;
}
.images img{
width: 100%;
}
.lbi-img-02{
background-position: center;
height: 301px;
}
.b2li-img-02{
background-position: center;
height: 300px;
}
.pe23br img{
width: 95%;
}
.b2li-text h4{
font-size: 12vw;
margin-bottom: 20px;
}
.lbi-text h4{
font-size: 12vw;
margin-bottom: 20px;
}
.url1-text h4{
font-size: 12vw;
margin-bottom: 20px;
}
.shields-rlng01{
position: inherit ;
margin :0 auto
}
.shields-rlng02{
position: inherit;
margin :0 auto
}
.shields-rlng03{
position: inherit;
margin-left: 0px;
margin :0 auto
}
#image-container-rlng{
height: 360px;
}
.top-image-rlng, .bottom-image-rlng {
width: 130%;
}
.rlng-troisquart {
max-width: 100%;
}
.rlng-troisquart img {
width: 90%;
}
.rlng-light h4 {
font-size: 6vw;
color: #fbc103;
margin: 20px;
}
.rlng-picture-text p {
font-size: 8vw;
margin: 0;
}
.rlng-light img {
width: 100%;
}
.bloc-shields-rlng h1{
font-size: 9vw;
}
.rlng-container-text h1{
font-size:10vw;
text-align: center;
}
.srx-accessoires{
margin-top: auto;
}
.ogmios{
margin-top: auto;
}
.rlng-container-text{
width: 100%;
}
.three-text{
width: 100%;
}
.rlng-ogmios{
width: 40%;
}
.rlng-ogmios img{
width: 90%;
}
.srx-container-text h1 {
font-size: 45px;
}
#image-container-srx {
position: relative;
overflow: hidden;
height: 400px;
margin-bottom: 50px;
width: 95%;
}
.top-image-srx,
.bottom-image-srx {
position: absolute;
top: 0;
left: 0;
width: 100%; /* Ajuster la largeur à 100% pour s'adapter au conteneur */
opacity: 0; /* Masquer les images au départ */
transition: opacity 0.5s ease; /* Ajouter une transition pour l'animation */
}
.deep h2 {
font-size: 3.5em;
margin-left: 50%;
}
.deep{
left: 0%;
}
.deep h2:nth-child(1) {
-webkit-text-stroke: 0.8px #03a9f4;
}
.ip69{
height: 130px;
}
.srx-accus-moyen h4{
font-size: 6vw;
}
.shields-srx img{
width: 95%;
}
.bty-srx {
font-size: 70px;
color: #fbc103;
margin: 0;
padding: 0;
text-align: left;
letter-spacing: 3px;
letter-spacing: 27px;
}
.bty1-srx {
font-size: 34px;
color: #ffffff;
margin: 0;
margin-top: 0px;
padding: 0;
text-align: left;
margin-top: -20px;
letter-spacing: 2px;
}
.btw-srx {
font-size: 63px;
color: #fbc103;
margin: 0;
margin-top: 0px;
padding: 0;
text-align: left;
margin-top: -20px;
}
.three-text {
justify-content: center;
}
.carre-y-2{
width: 2%;
}
.carre-y-1{
width: 2%;
}
.element a img{
background-color: #000;
height: 280px;
opacity: 0;
}
.caption{
top: 4px
}
.caption h2{
font-size: 6vw;
margin: 0 auto;
}
.caption h3{
font-size: 5vw;
color: #fbc103;
}
.caption p{
font-size: 4vw;
}
.rlng-light-flex{
flex-wrap: wrap;
}
.flex_ogmios_mobile{
flex-wrap: nowrap;
display: flex;
justify-content: center;
}
.flex_ogmios_mobile img{
width: 40%;
}
.text_led_6{
width: 95%;
height: 150px;
}
.text_led_6_ir{
width: 95%;
height: 150px;
}
.rlng-ogmios{
width: 120px;
height: 200px;
}
.rlng-ogmios-ir{
width: 120px;
height: 200px;
}
.detail-ogmios{
padding: 0;
}
.url1-c{
text-align: center;
width: 40%;
}
.uaf{
margin: 0 auto;
}
.uaf_en{
margin: 0 auto;
}
.cgv{
width: auto;
}
.arianne{
margin-left: 10px;
}
.modal{
width: 90%;
}
.modal-ir{
width: 90%;
height: auto;
}
.modal-content img{
max-width: 46%;
margin: 5px;
}
#tableau1{
display: none;
width: 100%;
border-collapse: collapse;
margin: auto;
max-width: 1200px;
padding: 5px;
width: 100%;
box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
animation: float 5s infinite;
}
#tableau4{
display: none;
width: 100%;
border-collapse: collapse;
margin: auto;
padding: 5px;
width: 100%;
box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
animation: float 5s infinite;
}
#togg1-mob{
display: block;
width: 100%;
}
#togg1-pc{
display: none;
}
}
/***************slider***********************/
/*-----------------fin slider-------------*/
.container-product{
margin-left: auto;
margin-right: auto;
height: 445px;
margin-top: 20px;
margin-bottom: 20px;
}
.box-border{
height: 200px ;
}
@media only screen and (max-width: 480px) {
.text-slider{
margin-top: 33px;
}
.text-background{
margin-top: 80px;
}
.mouse p{
letter-spacing: 0px;
font-size: 18px;
}
#logo-first{
margin-top: 15px;
max-width: 250px;
}
#nav-logo{
margin-top: 7px;
}
#toggle + label{
margin-top: 33px;
row-gap: 0;
width: 30px;
}
.hamburger{
width: 2em;
position: absolute;
}
.top-bar-phone{
display: block;
}
.en-flag{
display: block;
margin-top: 82px;
}
nav{
padding-top: 0px;
}
}
/****************fin phone*******************/