@import url(https://db.onlinewebfonts.com/c/9d25ea5c587d0f9d470aa9a3634735ea?family=ETmoudles);
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
:root {
--cta-color: #0000006c;
/* --light-bg : hsl(0, 0%, 95%); */
--light-bg : #efefe9;
--neutral-clr:hsl(0, 0%, 100%);
--primary: #e48c27a0;
--secondary :#616161;
--accent:#fa8108;
/* --mesure-clr: #1a7a8b79; */
--mesure-clr: var(--fc-dark);
--gap:1.25rem;
--fc-dark:rgba(0,0,0,.6);
--darkner: hsl(0,0%,10%);
--main-font:'Work Sans', system-ui, 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
--font-size-normal: clamp(1.1em, 1em + 0.2174vw, 1.3em);
--font-size-big:clamp(2.2em, 2.0em + 1.7658vw, 3.2em);
--step--2: clamp(.5em, 0.6em + 0.08vw, .9em);
--step--1: clamp(.8em, 0.7em + 0.1087vw, 1em);
--step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.45rem);
--step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
--step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
--step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
--step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
--step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
--fw-normal : 300;
--fw-light:100;
--fw-bold:400;
--fw-black:700;

}/* init */
*, *::before,*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
    
}

@font-face {
    font-family: "ETmoudles";
    src: url("../FONTS/Web Fonts/9d25ea5c587d0f9d470aa9a3634735ea.eot");
    src: url("../FONTS/Web Fonts/9d25ea5c587d0f9d470aa9a3634735ea.eot?#iefix")format("embedded-opentype"),
    url("../FONTS/Web Fonts/9d25ea5c587d0f9d470aa9a3634735ea.woff2")format("woff2"),
    url("../FONTS/Web Fonts/9d25ea5c587d0f9d470aa9a3634735ea.woff")format("woff"),
    url("../FONTS/Web Fonts/9d25ea5c587d0f9d470aa9a3634735ea.ttf")format("truetype"),
    url("../FONTS/Web Fonts/9d25ea5c587d0f9d470aa9a3634735ea.svg#ETmoudles")format("svg");
    font-style: normal;
}

  
html {
    color-scheme: light;
    font-family: var(--main-font);
    scroll-behavior: smooth;
    text-rendering: geometricPrecision;
    margin:0;
    padding:0;
}
body {
    background-color: var(--light-bg);
    font-family: var(--main-font);
    font-size: var(--font-size-normal);
    font-weight: var(--fw-normal);
    line-height: 1.5;
    margin:0;
    padding: 0;
    text-wrap: balance;
    text-justify: auto;
   
   

}
/* scroll animation */
.scroll-animation {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  
  .scroll-animation.visible {
    opacity: 1;
    transform: translateY(0);
  }
  
/*   .menu-sticky.sticking {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    Ajoute d'autres styles nécessaires pour le menu sticky 
  } */
/* hero */

.hero {
    width:100%;
    min-height:min(100%,100svh);
}
.hero>.hero-logo {
    width:100%;
    min-height:calc(100svh - 138px);
    object-fit: cover;
   
   
    
}
.hero .wrapper-hero {
    top:4svh;
    left:var(--gap);
    position:absolute;
    display:block;
    padding:calc(4*var(--gap));

    
}

.hero .container {

    background-color: rgba(0,0,0,0.2);
    color:white;
    backdrop-filter: blur(2px);
    padding:calc(var(--gap)*2);
    font-size: var(--step-1);
    font-family: var(--main-font);
    /* outline:0.5px solid black; */
    max-width:50svw;
   
}
.hero .container h2 {
    font-size: var(--step-2);
}
.hero .container h3 {
    font-size: var(--step-1);
}
.hero .container h1,h5 {
    font-family: var(--main-font);
    font-weight: var(--fw-bold);
}
.hero .container h1 {
    font-weight: var(--fw-bold);
    text-wrap:balance;
    line-height: 1.1;
    font-size: var(--step-3);
    margin-bottom:var(--gap);
}
.hero .container h5 {
    font-size: var(--step-1);
}
.bt-cta {
    display:flex;
   
    font-size: var(--font-size-normal);
    font-weight: var(--fw-normal);
    padding-inline:var(--gap);
   
    background-color: var(--accent);
    border: none;
    border-radius: 3px;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-property: all!important;
    transition-property: all!important;
  
    align-items:center;
    justify-content: center;
    line-height: 1;
    color:white;
    backdrop-filter: blur(5px);
}
.bt-cta .form-submit {
    display:flex;
    font-size: var(--font-size-normal);
    font-weight: var(--fw-normal);
    padding-inline:var(--gap);
    background-color: var(--accent);
    border: none;
    border-radius: 3px;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-property: all!important;
    transition-property: all!important;
    align-items:center;
    justify-content: center;
    line-height: 1;
    color:white;
    backdrop-filter: blur(5px);
}
.hero .bt-cta {
    display:flex;
    position:absolute;
   /*  outline:0.5px solid white; */
    margin-top:var(--gap);
    box-shadow:0px 2px 18px 0px rgba(0,0,0,0.3);
    font-size: var(--font-size-normal);
   
    padding-bottom: var(--gap);
    padding-inline:var(--gap);
    padding-top:var(--gap);
    border-radius: 3px;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-property: all!important;
    transition-property: all!important;
    max-width:300px;
    align-items:center;
    justify-content: center;
    line-height: 1;

}
.bt-cta:after,.hero .bt-cta:after {
    font-family: "ETmoudles";
    font-size:var(--step-4);
    content: "\35";
    opacity: 0;
    margin-left: -1em;
    margin-bottom:0;
    -webkit-transition: all .2s;
    transition: all .2s;
    /* -webkit-font-feature-settings: "kern" off;
    font-feature-settings: "kern" off; */
    text-shadow: none;
   
}
.bt-cta:hover,.hero .bt-cta:hover {
   color:white;
}
.bt-cta:hover:after,.hero .bt-cta:hover:after {
    opacity:1;
    margin-left: var(--gap);
 
}
.main-text {
    padding-block:var(--gap);
    padding-left:var(--gap);
    line-height: 1.6;
}
.main-text h1 {
    font-size: var(--font-size-big);
    font-weight:var(--fw-normal);
    line-height: 1.1;
    padding-bottom:var(--gap);
}
.main-text >* h2,h3{
    font-size: var(--step-3);
    line-height: 1.1;
    padding-bottom:calc(2*var(--gap));
    font-weight: var(--fw-bold)!important;
  
}
.main-text article{
   display:grid;
   grid-template-columns: repeat(2,1fr);
   gap:var(--gap);

}
.main {
    min-height:calc(100svh - 370px);
}
.main p {
    max-width:60%;
    padding-block:var(--gap);
    margin-inline: auto;
}
.main h1, h2 {
    max-width:60%;
    padding-block:var(--gap);
    margin-inline: auto;
}
.main h1  {
    font-size: var(--font-size-big);
    font-weight :var(--fw-normal);
    padding-bottom:var(--gap);
}
.encadree {
 width:100%;
 padding-block:calc(2*var(--gap));
 background-color: var(--neutral-clr);
 min-height:50svh;
}
.wrapper {
    display:grid;
    width:100%;
    grid-template-columns: repeat(2,1fr);
    gap:var(--gap);
   
    

}
iframe {
       max-width:100%;
        position: relative;
        padding: 0; 
      

}
iframe[Style] {
    width:100%;
    aspect-ratio:16 /9;
}
iframe>*>#player {
   
    aspect-ratio: 16 / 9!important;
}
.html5-video-player{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    outline: 0;
    font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
    color: #eee;
    text-align: left;
    direction: ltr;
    font-size: 11px;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: manipulation;
}
.gauche {
    grid-column: 1;
    grid-row: 1/3;
    width:100%;
    display:flex;
    align-items: center;
    justify-content:space-around;
    padding-inline:calc(4*var(--gap));
}
.droite {
    grid-column: 2;
    background-color: white;
    padding:calc(2*var(--gap));
    padding-bottom : calc(3*var(--gap));
    margin-bottom:calc(2*var(--gap));
    width:100%;
    border-radius: .3em;
  

    
}
.droite>*{
    max-width:60ch;
}
.droite p, .droite-simple p, .gauche-simple p {
    padding-bottom: var(--gap);

}
.gauche_simple {
    grid-column: 1;
   justify-content: center;
    display:flex;
    flex-direction: column;
    align-items: end;
    padding-inline:calc(4*var(--gap));
    width:100%;
    text-wrap:balance;
    min-height : 30svh;
 
    
   
   
}
.gauche_simple h3 {
    max-width:80%;
    text-wrap:balance!important;
}
.gauche_simple p {
    align-self: end; 
    max-width:80%;
    text-wrap:wrap!important;
}

.droite_simple {
    grid-column: 2;
    padding:var(--gap);
    margin-left:var(--gap);
    max-width:80%;
    min-height : 30svh;
 
}
.gauche_simple img, .droite_simple img {
    width:100%;
    min-height:100%;
    object-fit:contain;
}
/* .hero .bt-cta,.hero .bt-cta:after {
    transition: all 300ms ease 0ms;
} */
.menu {
    padding-top:var(--gap);
    background-color: var(--neutral-clr);
    min-height: 100px;
    font-size: var(--step--2)!important;
    font-weight: var(--fw-bold);
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content:center;
    width:100%;
    padding-inline:min(200px,15%);
    padding-block: var(--gap);
  
}
navigation-bar {
    display:grid;
    grid-template-columns:  repeat(auto-fit,minmax(0,1fr));
    place-items: center;
    width: 100%;
    height: 100%;
    padding-top:.5rem;
    color:var(--fc-dark);
}
.menu-mobile {
    /* background-color: hsla(181, 40%, 52%, 0.29); */
    display:none;
    position:fixed;
    height:100px;
    width:100dvw;
    grid-template-columns: repeat(4,1fr);
    align-content: end;
    justify-items: center;
    bottom:0;
    z-index: 1010;
   
    
  }
 
ul {
   display:grid;
   grid-template-columns: 1fr 1fr  ;
   place-items: center;
   text-align: center;
   gap:var(--gap);
   
}
li {
    position:relative;
    text-decoration: none;
    list-style: none;
    padding-inline:1rem;
    
}
li :has(+.sub-menu):after{
    font-family: "ETmoudles";
    content: "3";
    font-size: var(--font-size-normal);
    position: absolute;
    right: -var(--gap);
    font-weight: 800;
}
.logo {
   
    max-height:80px;
    overflow: clip;
    display: grid;
    place-content: center;
    width:100%;
}
img {
    max-width:100%;
    display:block;
    object-fit: contain;
    max-height: 60px;
}
.main-index {
    z-index:1;
}
section {
    min-height:100%;
    display: grid;
    place-items:center;
}
.intro {
    background: url("http://www.dmum.eu/xtremscreen/IMAGES/corron-ceiling-intro-e1634827723922.png") 50% 50% no-repeat;
    object-fit:fill;
    width:100%;
    min-height:calc(100svh - 100px)!important;
    margin-bottom:3rem;
}
.cartouche{
    color:white;
    position:absolute;
    max-width:100%;
    width:minmax(50%,1000px);
    bottom: 20svh;
    top:calc(100px + 20svh);
    background-color: hsl(from var(--darkner) h s l /0.65);
    padding-inline:3rem;
    padding-block:5rem;
    border-radius:.5rem;
    
}
h2.section-title {
    font-family: var(--main-font);
    font-size: var(--step-3);
    font-weight: 100;
}
h3,h4 {
    font-family: var(--main-font);
    font-weight: 100;
}
h3{
    font-size: var(--step-2);
    padding-block:2rem
}
h4 {
    font-size: var(--step-1);
    font-weight: 400;
    padding-block:1rem;
}
.light {
    color:white;
}
.listeur{
    font-family: var(--main-font);
    font-weight: 100;
    font-size: var(--font-size-normal);
    display: block;
    padding-block:0.5rem;
    padding-inline:1rem;

}
.listeur:before {
    content:">";
    padding-inline:1rem;
}
.menu-sticky{
    position:relative;
    display:flex;
    flex:1;
    justify-content: space-around;
    background-color: var(--secondary);
    transition: background-color 300ms linear;
    height:60px;
    width:100svw;
    
}
.menu-menu_sticky_toiles-container, .menu-menu_sticky_chassis-container{
    display:flex;
    position:static;
    margin-top:calc(2*var(--gap));

   
}
.nav-secondary {
    display:grid;
    max-width:70svw;
    width:minmax(80%,700px);
    grid-template-columns: 1fr 1fr  1fr 1fr ;
}
.sub-menu{
    display:none;
    position:absolute;
    min-width:320px;
    background-color: white;
    padding: var(--gap);
    text-align: left;
    left:calc(-1*var(--gap));
    border-radius: .3em;
    z-index:9999;
  


}
.sub-menu li {
    width:100%;
    font-size: var(--step-0);
    margin-block:var(--gap);
    padding-bottom: var(--gap);
    border-bottom: .5px dotted var(--darkner);
}
.sub-menu li:after {
    font-family: "ETmoudles";
    font-size:var(--step-0);
    content: "\35";
    opacity: 0;
    margin-left:-1em;
    margin-bottom:0;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.sub-menu li:hover:after {
    opacity: 1;
    margin-left:0em;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.menu-sticky-item {
    font-family: var(--main-font);
    font-weight: 200;
    font-size: var(--step-0);
    display: block;
    color:white;
}
.menu-item {
    font-family: var(--main-font);
    font-weight: var(--fw-bold);
    font-size: var(--step-0);
    display: block;
    color:var(--fc-dark);
}
.menu-item:hover>.sub-menu {
    display:flex;
    flex-direction: column;
    width:auto;
    font-size: var(--step--2);
}
.menu-sticky.sticking {
    background-color: hsl(from var(--darkner) h s l /1);
    top:0;
    position:fixed;
    width:100%;
    z-index: 1000;
    height: 80px /* S'assurer qu'il garde sa hauteur */
}
a{
   color:inherit;
    text-decoration: none;
}
a:hover {
  color:var(--fc-dark);
    text-decoration: none;
    font-weight: 400;
}

.menu-item-checkbox {
    display:none;
}
/* Style de base pour les containers */



.menu-deroulant {
    height: 0;
    overflow: hidden; /* Pour éviter que le contenu soit visible avant l'animation */
    transition: all 0.3s linear; /* Animation de la hauteur en 0.3s de manière linéaire */
    background-color: white;
    z-index:-1;
   
}

.menu-deroulant.show {

    height: 55svh;
    z-index:-1;
  
}

/* Styliser les labels comme des éléments de menu */
/* Styliser le label pour qu'il soit cliquable et aligné correctement */
.menu-item-label {
    cursor: pointer;
    display: inline-block;
    width: 100%;  /* Ajustez la largeur si nécessaire */
    height: auto;  /* Ajustez la hauteur si nécessaire */
    background-color: transparent;
    vertical-align: middle;
    margin-right: 5px; /* Espacement à droite si besoin */
    user-select: none; /* Empêche la sélection de texte */
    -webkit-user-select: none; /* Pour les navigateurs Webkit (Chrome, Safari) */
    -moz-user-select: none; /* Pour les navigateurs Mozilla (Firefox) */
    -ms-user-select: none; /* Pour Internet Explorer/Edge */
}
::after,::before {
    font-family: "ETmoudles";
}
.menu-item-label::after {
    font-family: "ETmoudles"; /* Nom de la police */
    content: "3"; /* Le caractère ou l'icône pour la flèche */
    font-size: var(--step-1); /* Taille de la police */
    position: absolute; /* Positionnement absolu */
    right: -var(--gap); /* Distance du bord droit */
    top: 65%; /* Alignement vertical centré */
    transform: translateY(-50%) var(--arrow-transform, rotate(0deg)); /* Rotation dynamique */
    font-weight: 800; /* Poids de la police */
    transition: transform 0.3s linear; /* Transition de la rotation */
}

.menu-item-label.show::after {
    transform: translateY(-50%) rotate(180deg); /* Rotation de 180° */
}
.wrapper-hero, .bt-cta {
    transition: transform 0.3s linear, opacity 0.3s linear;
}

.wrapper-hero.slide-down, .bt-cta.slide-down {
    transform: translateY(50svh);
    opacity: 0; /* Facultatif : pour rendre l'élément invisible après le déplacement */
}
/* Ajoutez cette règle pour forcer le rendu du contenu */

.mini-card-row {
    display:flex;
    width:100%;
    flex-grow: 1;
    padding-inline:calc(2*var(--gap));
    /* margin-block:var(--gap); */
    max-height: 25%;
    gap:var(--gap);
   
}
.mini-card-row .mini-card a {
    all: initial;
    display:block;
    cursor: pointer;
    overflow: hidden;

}
.mini-card-row .mini-card a>img {
    scale:1;
    cursor: pointer;
    transition: all 0.1s ease-in;
 
 }
.mini-card-row .mini-card a:hover>img {
   scale:1.1;
   cursor: pointer;
   transition: all 0.1s ease-in;

}
.mini-card-row .mini-card a:hover>h4 {
    color:hsl(from var(--darkner) h s l /0.65);
    transition: all 0.2s ease-in;
 
 }
.mini-card-row :last-child {
    margin-right:auto;
}
.mini-card-row :first-child {
    width:30svw;
    display:flex;
    flex-direction:column;
    padding-block:0;
   
}
.mini-card-row h3 {
    padding-top:calc(2*var(--gap));
    padding-bottom:var(--gap);
    font-size: var(--step-0);
    text-align: right;
    font-weight: var(--fw-black)!important;
    width:100%!important;
}
.mini-card-row p {
    text-align: right;
    width:100%!important;
    line-height: 1.2;
}
.subcategory-description {
    max-width:60%;
    text-align: end!important;
    margin-left:auto;
    margin-right:0!important;
}
.mini-card-row .mini-card {
        /* background-color: hsl(from var(--darkner) h s l /0.05); */
       max-width:100px;
       max-height: 65%;
        text-align: center;

        padding:0;
        flex-grow: 1;
        /* border-radius: 0.5rem; */
        /* border: 0.5px solid hsl(from var(--darkner) h s l /0.65); */
    
}
.elements-compatibles h1 {
    font-size: var(--font-size-big);
    font-weight: var(--fw-normal);
    padding-block:calc(5*var(--gap));
}
.mini-card-row .mini-card-compatible {
    background-color:none;
    margin: var(--gap);
    margin-block:calc(.5*var(--gap));
    max-width:150px;
  height:100%;
    text-align: center;
    max-height: 100%;
    padding:0;
    flex-grow: 1;
    /* border-radius: 0.5rem; */
    /* border: 0.5px solid hsl(from var(--darkner) h s l /0.65); */

}

.mini-card-row .mini-card-compatible img,.mini-card-row .mini-card img {
    width:100%;
    max-height:100%;
    object-fit:contain;
    margin-top:0;
    margin-inline:auto;
    cursor:pointer;
    clip-path: content-box;;
   
} 
.mini-card-row .mini-card-compatible h4 {
    font-size: var(--step-0);
    text-wrap: balance;
    max-width:100%;
    padding-block: var(--gap);
    line-height:1.2;
    position:relative;
    margin-top:var(--gap);
 
}
.mini-card-row .mini-card h4 {
    font-size: var(--step--1);
    text-wrap: balance;
    max-width:100%;
    text-align: center;
    margin-top:calc(-.75*var(--gap));
    /* padding-block: calc(.5*var(--gap)); */

   
   /*  bottom:var(--gap); */
}
#toiles_container, #chassis_container {
    
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    z-index:-1;
}


.chapeau_section {
    max-width:60%;
    padding-block:calc(10*var(--gap));
    text-wrap: balance;
}
.chapeau_section h2 {
    padding-block:calc(2*var(--gap));
    font-size: var(--font-size-big);
    line-height: 1.1;
    font-weight:var(--fw-normal);
    margin-right:auto;
    margin-left:0;
    max-width: 60%;
}
.card_container {
    width:100%;
    display :flex;
    gap:calc(3*var(--gap));
    flex-wrap: wrap;
    align-items: stretch; 
    justify-content: space-evenly;
    margin-bottom:calc(4*var(--gap));

}
.card {
    flex:1;
    display :flex;
    flex-direction: column;
    padding-bottom:calc(2*var(--gap));
    justify-items: start;
    background-color: white;
   
}
.card h3, .card p {
    padding-inline: calc(2*var(--gap));
}
.image_card {
width:100%;
object-fit: contain;
max-height:100%;
}

.chapeau {
    text-justify:inter-word;
    font-size: var(--step-0);
    width:min(100%- 4rem,75ch);
    padding-block-start : 13em;
    padding-inline: 2rem;
    padding-block-end: 8em;
    /* padding-inline: 4em; */
    grid-column: 1 /3 ;
    grid-row: 1 ;
    font-family: var(--main-font);
}
.presentation {
    display :flex;
    flex-direction: column;
}
.chapeau h2 {
    font-size: var(--step-3);
    padding-bottom: 2rem;
    font-weight: 200;
}
.chapeau p {
    font-size: var(--step-0);
    line-height: 1.6;
    font-weight: 300;
    text-wrap: balance;
   
}

.mini-card {
    position: relative;
    display: inline-block;
    /* Autres styles pour la mini carte */
}

.mini-card-link {
    text-decoration: none; /* Supprime le soulignement du lien */
    color: inherit; /* Utilise la couleur du texte de la mini carte */
    width: 100%!important;
    height: 70%;
}
.mini-card-compatible-link {
    text-decoration: none; /* Supprime le soulignement du lien */
    color: inherit; /* Utilise la couleur du texte de la mini carte */
    width: 100%!important;
    height: 90%;
    display:grid;
}

.mini-card img {
    width:100%;
    max-height:100%;
    object-fit: contain;
    clip-path: rect(0,0,100%,55%);
}

.mini-card h4 {
    margin: 0;
    /* Autres styles pour le titre */
}
.cards {
    display:flex;
    gap:2rem;
    width:100%;
    justify-content: space-around;
    padding-block-end: 8em;
    flex-wrap: wrap;
}
.legende {
    padding-top:var(--gap);
}
/* .mini-card img{
    max-height: 100%!important;
    padding-bottom: 1rem;
   border-radius: 0.5rem; 
} */
.col_one {
    grid-column: 1;
}
.col_two {
    grid-column: 2;
}
.col_three {
    grid-column: 3;
}

.big-card-black {
    background-color: black;
    width:100%;
    padding-inline-start: 1rem;
    grid-column: 1 / 4;
    color:white;
    columns :2;
}
.big-card-black h2{
 font-size: var(--step-4);
 font-weight: 100;
 padding: 4rem;
 text-wrap: balance;
}
.white {
    background-color: white!important;
}
.big-card-black p {
    font-weight: 100;
    font-size: var(--step-1);
    line-height: 1.6;
    padding-inline: 4rem;
    width :60ch;
    text-wrap: balance;
    
}
.img_droite {
    max-height:60%;
}
.img_gauche {
    max-height:60%;
}
.big-card-white {
    background-color:white;
    width:100%;
    padding-inline-start: 1rem;
    grid-column: 1 / 4;
    color:black;
    columns :2;
    place-items: center;
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    padding-block:calc(4*var(--gap));
}
.big-card-white .text-block {
    grid-row: 1;
    grid-column: 2;
}
.big-card-white .text-block h2{
    font-size: var(--step-4);
    font-weight: 100;
    padding: 4rem;
   
}
.big-card-white .text-block  p {
    font-weight: 200;
    font-size: var(--step-1);
    line-height: 1.6;
    padding-inline: 4rem;
    width :60ch;
}
.petite_image{
    max-height:50dvh;
}
#toiles {
    padding-block: 12rem;
    font-weight: 200;
    font-family: var(--main-font);
    display: flex;
    flex-direction: column;
    gap:2rem;

    background-color: white;


}
#toiles h2 {
    font-weight: 200;
    font-size: var(--step-4);
    grid-row: 1;
    grid-column: 1;
   
}
#toiles p {
    font-weight: 200;
    font-size: var(--step-1);
}
.card-toile {
    
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    max-width:70ch;
    padding: 1em;
    place-items: center;


}
#personnalite {
    min-height:50svh;
    padding:calc(4*var(--gap));
    background-color: white;
    display: flex;
}
.descriptif {
   max-width:60%;
    text-wrap: balance;
    padding-right:calc(4*var(--gap));
   
}
.descriptif_clair {
    flex:1;
    max-width:40%;
    text-wrap: balance;
    padding-inline: calc(2*var(--gap));
 }
.descriptif h1 {
    font-size: var(--font-size-big);
    font-weight:var(--fw-normal);
    line-height: 1.2;
    padding-block:var(--gap);
}
.descriptif_clair h1 {
    font-size: var(--font-size-big);
    font-weight:var(--fw-normal);
    line-height: 1.2;
    padding-block:var(--gap);
}
.descriptif p,.descriptif_clair p {
    padding-block:var(--gap);
}

.images {
    display:flex;
    flex-wrap: wrap;
    gap:var(--gap);
    
}
.caracteristiques_num{
   flex:1;
    display:flex;
    flex-direction: column;
    gap:var(--gap);
}
.caracteristiques_num h4 {
    padding-block: 0;
    font-size: var(--step--2);
}
.barre {
    background:hsl(from var(--darkner) h s l /0.1);
    height:20px;
   
}
.mesure {
    width:0;
    height:20px;
    background-color: var(--primary);
    overflow: hidden; /* Pour éviter le débordement si le contenu est plus large */
}
#noire {
    min-height:50svh;
    background-color: black;
    color:white;
    display:flex;
    padding:calc(4*var(--gap));
    /* flex-wrap:wrap; */
   
    
}
#blanche {
    min-height:50svh;
    background-color:white;
    color:black;
    display:flex;
    justify-content: center;
    flex-wrap:wrap-reverse;
    
}
/* comparateur d'image avant / apres *****************************************************/
#image-wrapper {
    display:flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    width:1260px;
    height:709px;
   cursor:pointer;
   background: white
}

.image-before, .image-after {
    width:100%;
    height:auto;
    position:absolute;
    background-size: contain;
   
}
.image-before {
    width:100%;
    height:100%
}
.image-after {
    width:50%;
    height:100%;
}
.slider{
    height:100%;
    position:absolute;
    width:100%;
}
.slider input {
    width:100%;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    background: none;
  
   
}
.slider input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height:709px;
    width:3px;
    background: none;
    z-index:100;
    cursor: col-resize;
    outline: none;

}
.slider .drag-line {
    width:3px;
    height:709px;
    position:absolute;
    /* background: red; */
    left:49.85%;
    pointer-events: none;
   
}
.slider .drag-line::before, .slider .drag-line::after {
    position:absolute;
    content:"";
    width:100%;
    height:330px;
    background: var(--accent);
  

}
.slider .drag-line::before {
    top:0;
}
.slider .drag-line::after {
    bottom: -3px;
    height:333px;
}
.slider .drag-line span {
    height:49px;
    width:49px;
    border:3px solid var(--accent);
    position:absolute;
    top:50%;
    left:50%;
    border-radius: 50%;
    transform: translate(-50%,-50%);
   
}
.slider .drag-line span::after, .slider .drag-line span::before {
    position:absolute;
    content:"";
    top:50%;
    border: 10px solid transparent;
    border-bottom-width:0px;
    border-right-width:0px;
    transform: translate(-50%,-50%) rotate(45deg);
   
}
.slider .drag-line span::before {
    left:35%;
    border-left-color:var(--accent);


    
}
.slider .drag-line span::after {
    left:65%;
    border-top-color:var(--accent);

}
/***************************************************************************************/
#claire {
    min-height:50svh;
    background-color: hsl(from var(--darkner) h s l /0.1);
    display:flex;
    flex-wrap:wrap-reverse;
    padding:calc(4*var(--gap));
    justify-content: center;
    
}
#claire .images img, #claire img {
    width:100%;
   
    max-height:100%;
    flex:1;
}
#claire .images  {
    max-width:min(60svw, 100%);
    flex:0 0 100%;
}
#noire .images img, #blanche .images img, #blanche .image-comparator , #noire img, #blanche img {
    
    max-width:min(60svw, 100%);
    max-height:min(50svh,100%);
    flex:1 1 100%;
}

#compatibles {
    height:auto;
    padding-block:calc(6*var(--gap));
}
.title {
    grid-column: 1;
    font-size: var(--font-size-normal);
    font-weight: 400;
}
.caracteristiques {
    grid-column: 1;
    font-size: var(--step--1);
    font-weight: 200;
}
.miniature {
    grid-column: 2;
    max-height: 100%;
}
#caracteristiques {
    font-family: var(--main-font);
    display: flex;
    flex-wrap: wrap;
   height:100%;
   padding-block-end: 12em;
   margin-block-start: calc(10*var(--gap));
   background-color: hsl(from var(--darkner) h s l /0.1);
    font-weight: 200;
    h2 {
        font-size: var(--step-5);
        font-weight: 200;
        padding: 2em;
        min-width:100svw;
        text-align: center;
      
    }
    p {
        columns:600px;
        gap:1em;
        padding-inline: 6em;
        line-height: 1.8;
        font-size: var(--step-0);
        b{
            font-weight: 500;
        }
        
        
    }
    border-top: 1px dotted black;
    border-bottom: 1px dotted black;
}

.list {
    display: inline-block;
    position:relative;
    font-size: var(--step--1);
    width: fit-content;
    padding-inline-start: 1.5rem;

}
.list:before {
    font-family:"ETmoudles";
    content:"E";
    font-size: var(--font-size-normal);
    position: absolute;
    left: 0;
    top: 5px;
    font-weight: 800;
}
footer {
    background-color: hsl(from var(--darkner) h s l /1);
    min-height: 100px;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    color:white;
    align-items:center;
    padding-inline: 20em;
    font-size: var(--step--1);
    width:100%;
    margin-top: calc(10*var(--gap));
    
}
.menu_footer {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
   
    
}
.menu-footer-container {
    width: 100%;
}
.menu_footer .menu-item{
    color:white;

}
.menu_footer .menu-item a:hover{
    color:var(--light-bg);

}
/*media queries */
@media (width < calc(600px * 3)) {
    :root {
        --gap:0.75rem;
    }

    body {
        font-size: var(--step-0);
    }
    h1,.hero .container h1 {
        font-size: var(--step-2);
    }
    h2,h3 {
        font-size: var(--step-1);
    }
    .hero .container p, p,.big-card-black p, .big-card-white p {
        font-size: var(--step-0);
    }
    li:has(+.sub-menu):after{
        font-family: "ETmoudles";/* Nom de la police */
        content: "3"; /* Le caractère ou l'icône pour la flèche */
        font-size: var(--step-0); /* Taille de la police, ajustez au besoin */
        position: absolute; /* Positionnement absolu */
        right: 10px; /* Distance du bord droit */
        top: 50%; /* Alignement vertical centré */
        transform: translateY(-50%); /* Centrage vertical exact */
        font-weight: 800; /* Poids de la police */
    }
   
    .mini-card-row {
        margin-bottom: calc(1*var(--gap));
    }
    .mini-card img {
        max-width:70px;
        max-height: 70px;
        clip-path: rectangle(0,0,100%,55%);

    }
    .mini-card-row .mini-card h4 {
        margin-top:calc(-.75*var(--gap));
    }
}
@media (width < calc(400px * 3)) {
    :root {
        --gap:0.5rem;
    }
    body {
        font-size: var(--step-0);
    }
    li:has(+.sub-menu):after{
        font-family: "ETmoudles";/* Nom de la police */
        content: "3"; /* Le caractère ou l'icône pour la flèche */
        font-size: var(--step-0); /* Taille de la police, ajustez au besoin */
        position: absolute; /* Positionnement absolu */
        right: 10px; /* Distance du bord droit */
        top: 50%; /* Alignement vertical centré */
        transform: translateY(-50%); /* Centrage vertical exact */
        font-weight: 800; /* Poids de la police */
    }
    h1, .hero .container h1 {
        font-size: var(--step-1);
    }
    h2,h3 {
        font-size: var(--step-0);
    }
    .hero .container p,p, .big-card-black p, .big-card-white p {
        font-size: var(--step-0);
    }
    .mini-card-row {
        margin-bottom: calc(2*var(--gap));
    }
    .mini-card img {
        width:50px;
        height: 50px;
        clip-path: rectangle(0,0,100%,55%);

    }
    .mini-card-row .mini-card h4 {
        margin-top:calc(-1*var(--gap));
    }
    #image-wrapper {
        display:flex;
        position: relative;
        overflow: hidden;
        align-items: center;
        width:900px;
        height:508px;
       cursor:pointer;
       background: white
    }
}
@media (max-width: 480px) {
    html{
        width: 100svw;
        line-height: 1;
    }
    body {
        font-size: var(--step--1); /* Réduire encore la taille de police */
        width:100svw;
    }
    #presentation {
        width:100svw;
    }
    .logo {
   
        max-height:40px;
        overflow: clip;
        display: grid;
        place-content: center;
        width:100%;
    }
    .menu{
        width:100svw;
    }
    .menu-deroulant {
       
        gap:2rem;
    }
    .menu-main_menu_left-container, .menu-main_menu_right-container{
        max-width: 100svw;
        margin-block:1rem;
    }
    .main-index{
        width:100svw;
     
    }
    .hero {
        display:flex;
        flex-wrap: wrap;
        width:100%;
    }
   .hero .wrapper-hero {
    top:0;
    left:0;
    display:flex;
        flex-direction:column;
        flex-wrap: wrap;
        width:100%;
        position: relative;
        padding:0!important;
      
    }
    .hero .container {
        display:flex;
        width:100%;
        flex-direction:column;
        flex-wrap: wrap;
        max-width:100%;
    }
    .hero .container h1 {
        font-size: var(--step-0); /* Ajuster la taille du titre */
    }
    .hero .container h2 {
        font-size: var(--step-0); /* Ajuster la taille du titre */
    }
    .hero .container h5 {
        font-size: var(--step--2); /* Ajuster la taille du titre */
        line-height: 1;
    }
    .hero .bt-cta {
        width:90svw;
        max-width:90svw;
        position: relative;
        margin-inline:auto;
      

    }
    .hero img, .hero>.hero-logo {
        width:100%;
        object-fit: cover;
        min-height:30svh;
    }
    .menu-sticky {
        display: none;
        flex-direction: column;
        align-items: center;
        height: fit-content;
        padding-block: 1rem;
    }
    .menu-sticky-item  {
       font-size: var(--step-0);
    }
    .big-card-white, .big-card-black {
        display:flex;
        flex-direction: column;
        max-width: 100svw;
        width:100svw;
        flex-wrap: wrap;
        padding-inline: 1rem;
        columns: 1;
    }
    .big-card-white .text-block h2, .big-card-black h2{
        font-size: var(--step-2);
        text-align: center;
        max-width: 100svw;
    }
    .big-card-white .text-block p, .big-card-black  p {
        font-size: var(--step-0);
        max-width: 80svw;
        text-align: center;
        padding-inline: 1rem;
        margin-inline:auto;
    }
    .text-block {
        display:flex;
        flex-direction: column;
        align-items: center;    
        max-width: 100%;
    }
    .mini-card-row {
        margin-bottom:0.5rem;
    }
    .mini-card-row :first-child {
      max-width: 30svw;
        display: flex;
        padding-block:0;
    }
    .subcategory-description {
        max-width:100%;
        font-size: var(--step--1);
    }
    .mini-card-row :last-child {
        margin-right: auto;
    }
    
    .mini-card-row .mini-card-compatible, .mini-card-row .mini-card {
        max-height: 80px;
        min-height:80px;
        width:55px;
    }
    .mini-card-row .mini-card h4, .mini-card-row .mini-card-compatible h4{
        font-size: var(--step--2);
        text-align: center;
        margin-inline:auto;
        margin-top:0;
        margin-bottom:0;
        padding-block: 0.2rem;
    }
    .main-text h1 {
        font-size: var(--font-size-big); /* Ajuster la taille du titre principal */
    }

    .menu-mobile {
        display: none; /* Afficher le menu mobile */
        flex-direction: column; /* Changer la direction du menu mobile */
    }

    .menu-footer {
        flex-direction: column; /* Changer la direction du menu footer */
    }
    .main-text article, .wrapper {
        display: grid;
        grid-template-columns: 1fr;
    }
    .gauche,.droite, .gauche_simple, .droite_simple, #claire, #noire, #blanche{
       grid-column: 1;
       padding:0!important;
       padding-inline:0.5rem!important;
       text-align: left;
       width:100%;
       max-width: 100%;
       margin-left:0;
       margin-right: 0;
       align-items: start;
       display: flex;
       flex-direction: column;
    }
    #claire, #noire, #blanche {
        padding-block: 2rem;
    }
    #noire .images img, #blanche .images img, #blanche .image-comparator, #noire img, #blanche img{
        max-width: 100%;
    }
    .descriptif_clair, .descriptif {
        padding-block: 2rem;
    }
    .gauche_simple p, .descriptif_clair, .descriptif {
        max-width: 100% ;
    }
    section {
        display:flex
    }
    .chapeau_section {
        max-width: 100%;
        padding-inline:1rem;
       text-justify:distribute-all-lines;
        font-size: var(--step-0);
    }
    .main p, .main span{
        margin-inline:auto;
        font-size: var(--step--0);
        text-align: left;
    }
    iframe {
        max-width: 90svw;
        position: relative;
        padding: 0;
        margin: 0;
        height:30svh;
        width:100svw;
        margin-inline:auto;
        transform-origin: 50% 50%;
       
    }
    .main-index iframe {
        transform: translateX(-17%);
    }
    .main-index .wrapper .gauche_simple iframe {
        transform: translateX(0);
    }
    .card_container {
        display:flex;
        flex-direction:column;
        width:100svw;
        max-width: 100svw;
        height: auto;
       
    }
    .card {
        max-width: 100%;
        padding:1rem;
        width: 100%;
    }
    
    .chapeau_section h2 {
      
        text-align: center;
        padding-inline:0.5rem;
        max-width: 100%;
    }
    #compatibles, #caracteristiques, #personnalite{
        max-width: 100svw;
        display:flex;
        flex-direction: column;
        align-items: center; 
        
    }
    #image-wrapper {
        display:flex;
        position: relative;
        overflow: hidden;
        align-items: center;
        width:360px;
        height:203px;
       cursor:pointer;
       background: white
    }
    .caracteristiques_num{
        width: 80svw;
    }
    #caracteristiques h2{
        text-align: center;
        padding-inline:0.5rem;
        max-width: 100%;
    }
    #caracteristiques p {
        max-width: 100svw;
        text-align: left;
        padding-inline:0.5rem;
        font-size: var(--step--1);

    }
    footer {
        flex-direction: column;
        padding-inline: 0!important;
        padding-block: 0!important;
        align-items: center;
        justify-content: center;
        text-align: center;

    }
    .menu-footer-container {
        
        max-width: 100svw;
        font-size: var(--step--1);
    }
    .menu_footer {
        padding: 1rem;
        gap: 0.5rem;
    }
    .menu-item {
        font-size:14px;
    }
    .wp-block-create-block-contact-form {
        padding: 1rem;
        width: 100svw;
        margin-left: 0;
        margin-right: 0;
    }
    .contact-info {
        padding-inline: 1rem;
        width:100svw;
    }
    #image-wrapper {
        position: relative;
        align-items: center;
        width:100svw;
        height:calc(100svw / 1.7777777777777777);
       cursor:pointer;
       background: white;
       margin-inline:auto;
       padding:1rem;
       margin-block:3rem;
    }
    
    .image-before, .image-after {
        width:100svw;
        height:calc(100svw / 1.7777777777777777);
        position:absolute;
       
    }
    .image-before {
        width:100svw;
        height:calc(100svw / 1.7777777777777777);
    }
    .image-after {
        width:50%;
        height:calc(100svw / 1.7777777777777777);
    }
    .slider{
        height:calc(100svw / 1.7777777777777777);
        position:absolute;
        width:100%;
    }
    .slider input {
        width:100%;
        -webkit-appearance: none;
        appearance: none;
        outline: none;
        background: none;
      
       
    }
    .slider input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        height:calc(100svw / 1.7777777777777777);
        width:3px;
        background: none;
        z-index:100;
        cursor: col-resize;
        outline: none;
    
    }
    .slider .drag-line {
        width:3px;
        height:calc(100svw / 1.7777777777777777);
        position:absolute;
        /* background: red; */
        left:49.85%;
        pointer-events: none;
       
    }
    .slider .drag-line::before, .slider .drag-line::after {
        position:absolute;
        content:"";
        width:100%;
        height:calc(100svw / (1.7777777777777777 * 2));
        background: var(--accent);
      
    
    }
    .slider .drag-line::before {
        top:0;
    }
    .slider .drag-line::after {
        bottom: -3px;
        height:calc(100svw / (1.7777777777777777 * 2));
    }
    .slider .drag-line span {
        height:49px;
        width:49px;
        border:3px solid var(--accent);
        position:absolute;
        top:50%;
        left:50%;
        border-radius: 50%;
        transform: translate(-50%,-50%);
       
    }
    .slider .drag-line span::after, .slider .drag-line span::before {
        position:absolute;
        content:"";
        top:50%;
        border: 10px solid transparent;
        border-bottom-width:0px;
        border-right-width:0px;
        transform: translate(-50%,-50%) rotate(45deg);
       
    }
    .slider .drag-line span::before {
        left:35%;
        border-left-color:var(--accent);
    
    
        
    }
    .slider .drag-line span::after {
        left:65%;
        border-top-color:var(--accent);
    
    }
}
img:is([sizes="auto" i], [sizes^="auto," i]) {
    contain-intrinsic-size: 100px 100px!important;
}
.dmum-contact-form {
    background-color:transparent;
    color: black;
    padding: 2rem;
    width: 100%;
    margin: 0 auto;
}
.contact-info {
	color:var(--fc-dark);
}
.dmum-contact-form .contact-info h2, .dmum-contact-form .contact-info p,.dmum-contact-form .form-container .contact-form-fields .form-group label  {
	color:var(--fc-dark);
}

.dmum-contact-form .form-container .contact-form-fields button {
	background:var(--accent);
	font-size:var(--step-1);
}