:root
{
    --color1: 190;
    --color2:30;
    --sat: 50%;

    /* Thème clair */
    --color_xxl:0%;;
    --color_xl:15%;
    --color_l:30%;
    --color_m:50%;
    --color_s:70%;
    --color_xs:85%;
    --color_xxs:100%;
}
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
font-size: 16px;
scroll-behavior: smooth;
}

/* -------------------------------- Les fonds ----------------- */
.bg_xxl{
   background-color: hsl(var(--color1),var(--sat),var(--color_xxl)); 
}
.bg_xl{
   background-color: hsl(var(--color1),var(--sat),var(--color_xl)); 
}
.bg_l{
   background-color: hsl(var(--color1),var(--sat),var(--color_l)); 
}
.bg_m{
   background-color: hsl(var(--color1),var(--sat),var(--color_m)); 
}
.bg_s{
   background-color: hsl(var(--color1),var(--sat),var(--color_s)); 
}
.bg_xs{
   background-color: hsl(var(--color1),var(--sat),var(--color_xs)); 
}
.bg_xxs{
   background-color: hsl(var(--color1),var(--sat),var(--color_xxs)); 
}
.bg2_xxl{
   background-color: hsl(var(--color2),var(--sat),var(--color_xxl)); 
}
.bg2_xl{
   background-color: hsl(var(--color2),var(--sat),var(--color_xl)); 
}
.bg2_l{
   background-color: hsl(var(--color2),var(--sat),var(--color_l)); 
}
.bg2_m{
   background-color: hsl(var(--color2),var(--sat),var(--color_m)); 
}
.bg2_s{
   background-color: hsl(var(--color2),var(--sat),var(--color_s)); 
}
.bg2_xs{
   background-color: hsl(var(--color2),var(--sat),var(--color_xs)); 
}
.bg2_xxs{
   background-color: hsl(var(--color2),var(--sat),var(--color_xxs)); 
}
/* -------------------------------- Les couleurs ----------------- */
.c1_xxl{
color: hsl(var(--color1),var(--sat),var(--color_xxl));
}
.c1_xl{
color: hsl(var(--color1),var(--sat),var(--color_xl));
}
.c1_l{
color: hsl(var(--color1),var(--sat),var(--color_l));
}
.c1_m{
color: hsl(var(--color1),var(--sat),var(--color_m));
}
.c1_s{
color: hsl(var(--color1),var(--sat),var(--color_s));
}
.c1_xs{
color: hsl(var(--color1),var(--sat),var(--color_xs));
}
.c1_xxs{
color: hsl(var(--color1),var(--sat),var(--color_xxs));
}

.c2_xxl{
color: hsl(var(--color2),var(--sat),var(--color_xxl));
}
.c2_xl{
color: hsl(var(--color2),var(--sat),var(--color_xl));
}
.c2_l{
color: hsl(var(--color2),var(--sat),var(--color_l));
}
.c2_m{
color: hsl(var(--color2),var(--sat),var(--color_m));
}
.c2_s{
color: hsl(var(--color2),var(--sat),var(--color_s));
}
.c2_xs{
color: hsl(var(--color2),var(--sat),var(--color_xs));
}
.c2_xxs{
color: hsl(var(--color2),var(--sat),var(--color_xxs));
}



/* ------------------------------ Les bordures---------------- */
.bd-none{
  border: none;
}
.bd_lt
{
border: 2px solid hsl(var(--color1),var(--sat),var(--color_l));
}
.bd_dk
{
border: 2px solid hsl(var(--color1),var(--sat),var(--color_s));
}
.bd-1
{
border: 1px solid hsl(var(--color1),var(--sat), var(--color_s));
}
.souligne
{
border-bottom: 1px solid hsl(var(--color1),var(--sat),var(--color_s));
}
.pills{
border-radius: 20%/50%;
}

/*  -----------------------les ombres------------------------ */
/*  -----------------------les box shadow------------------------ */
.bxs_xxl{
    box-shadow: 0px 0px 10px 5px hsl(var(--color1),var(--sat),var(--color_xxl));
}
.bxs_xl{
    box-shadow: 0px 0px 10px 5px hsl(var(--color1),var(--sat),var(--color_xl));
}
.bxs_s{
    box-shadow: 0px 0px 10px 5px hsl(var(--color1),var(--sat),var(--color_s));
}

.bxs_xs{
    box-shadow: 0px 0px 10px 5px hsl(var(--color1),var(--sat),var(--color_xs));
}
.ombre_lt
{
box-shadow: 0px 0px 10px 5px hsl(var(--color1),var(--sat),var(--color_xl));
}
.ombre_dk
{
box-shadow: 0px 0px 20px 10px hsl(var(--color1),var(--sat),var(--color_xs));
}
.ombreTXT1_lt{
    text-shadow: 0 0 14px  hsl(var(--color1),var(--sat),var(--color_xxs)),0 0 14px  hsl(var(--color1),var(--sat),var(--color_xxs));
}
.ombreTXT2_lt{
    text-shadow: 0 0 10px hsl(var(--color2),var(--sat),var(--color_xs)), 0 0 10px hsl(var(--color2),var(--sat),var(--color_s)), 0 0 10px hsl(var(--color2),var(--sat),var(--color_m));
}
.ombreTXT1_dk{
    text-shadow: 0 0 10px hsl(var(--color1),var(--sat),var(--color_xl)), 0 0 10px hsl(var(--color1),var(--sat),var(--color_l)), 0 0 10px hsl(var(--color1),var(--sat),var(--color_m));
}
.ombreTXT2_dk{
    text-shadow: 0 0 10px hsl(var(--color2),var(--sat),var(--color_xl)), 0 0 10px hsl(var(--color2),var(--sat),var(--color_l)), 0 0 10px hsl(var(--color2),var(--sat),var(--color_m));
}

/* -------------------------- Les tailles d'icones ------------------- */

.icone_xs {
  height: 1rem;
  width: 1rem;
}

.icone_s {
  height: 1.5rem;
  width: 1.5rem;
}

.icone {
    text-align: center;
    vertical-align: middle;
  width: 2rem;
}

.icone_l {
     text-align: center;
    vertical-align: middle;
  width: 3rem;
}

.icone_xl {
  height: 4rem;
  width: 4rem;
}

.icone_xxl {
  height: 5rem;
  width: 5rem;
}
@media screen and (max-width:960px) {
  .icone_xxl {
    width: 2rem;
    height: 2rem;
    margin: 0.4rem;
  }
}

/* ------------------------------- les SVG / images---------------------------*/

.svg_xxs {
    vertical-align: middle;
    stroke-width: 0;
    filter: drop-shadow(0px 0px 6px hsl(var(--color2),var(--sat),var(--color_xxs)));
}
.svg_xxl {
    vertical-align: middle;
    stroke-width: 0;
    filter: drop-shadow(0px 0px 6px hsl(var(--color1),var(--sat),var(--color_xxl)));
}

.svg_success {
  vertical-align: middle;
  color:green;
 filter: drop-shadow(0px 0px 6px hsl(var(--color1),var(--sat),var(--xlclair)));
}
.svg_danger{
  vertical-align: middle;
  color: red;
 filter: drop-shadow(0px 0px 6px hsl(var(--color1),var(--sat),var(--xlclair)));
}
button > svg,
a > svg{
  margin-right: 10px;
  transition: color .5s ease;
}

.imgDL4{
    min-width: 300px;
    width:50vw;
}
.imgDL4 img{
    max-width:100%;
    max-height: 100%;
}
/* ------------------------------- les boutons ---------------------------*/

.btn-principal{ /* = .ombreTXT1_lt */
    padding:0.5rem;
    text-decoration: none;
    text-align: center;
}
.btn-secondaire
{
    padding:0.5rem;
    text-decoration: none;
}

.btn-ico{
    vertical-align: middle;
    height:auto;
    width:auto;
    margin:0;
    padding:0;
    background: transparent;
    border:none;
}
.btn-ico svg{
   outline: none;
   text-decoration: none;
   cursor: default;
 
}

/* ------------------------------- le menu ---------------------------*/
.navBar{
    display: flex;
    align-items: center;
    justify-content: space-between;    
    flex-wrap:nowrap;
    flex-direction: row;
    width:100vw;
}
.logo {
    width:20%;
    text-align: center;
    border-color: hsl(var(--color1),var(--sat),var(--color_xl));
    border-style:solid;
    padding:5px;
    margin:5px;
}
.logo img{
    width:4rem;
}
.navLinks{
    text-align: center;  
    list-style-type: none;
    height:calc(100vh - 84.71px);
    position:absolute;
    width:100%;
    top:100%;
    left:0;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content: space-between;  
    padding: 2rem;  
    margin:0;
    gap:1.5rem;
    transform: translateX(-100%);
    transition: transform 0.5s ease-in;
}

.navLinks li a{
    font-weight: 600;  
    font-size: 1rem;
    text-transform: capitalize;
    transition: color .5s ease;
}
.navLinks li a.active{
    cursor: default;
    pointer-events:none;
}
.navLinks li a:hover:not(.active),
 a svg:hover{
color: green;
}

a{
    text-decoration: none;
}
.outils{
    display: flex;
    align-items: center;
    justify-content: space-between;    
    flex-wrap:nowrap;
    flex-direction: row;
}
.hamburger{
    width:30px;
    height:30px;
    position:relative;
    display:flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.hamburger .bar{
    width:90%;
    height: 4px;
    position: absolute;
    border-radius: 18px;
}
.hamburger .bar:first-child{
    top:0;
}
.hamburger .bar:nth-child(2){
    top:50%;
    transform: translateY(-50%);
}
.hamburger .bar:last-child{
    bottom:0;
}
.hamburger.active .bar:first-child{
    top:50%;
    transform: translateY(-50%) rotate(-45deg);
}
.hamburger.active .bar:nth-child(2){
    opacity:0;
}
.hamburger.active .bar:last-child{
    bottom:50%;
    transform: translateY(50%) rotate(45deg);
}
.navLinks.active {
        transform: translateX(0);
}
@media (min-width:968px){
    .hamburger{
        display:none;
    }
.logo{
    width:200px;
}
.logo img{
    width:10rem;
}
    .navLinks{
        display:flex;
        flex-direction: row;
        transform: translateX(0);
        justify-content: space-between;    
        position: static;
        width:auto;
        height:auto;
        top:0;
    }
}





.li-none{
  list-style-type:none;
}

section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
 video{
    max-width: 100vw;
    width:100%;
        margin-bottom:10px;
}
@media (min-width:960px){
    section{
  flex-direction: row;
}
 video{
    min-width: 300px;
    width:30%;
    margin:10px;
}
}

.titre{
    font-size: 1.5em;
    font-weight: bolder;
    width:50%;
    text-wrap: unset;
    min-width: 300px;
    padding:1.5rem
}
.paragraf{
    font-size: 1em;
    width:40%;
    min-width: 300px;
    padding:1rem;
    margin-right:1rem;
}
.env{
width:100%;
height: 90vh;
display: flex;
align-items: center;
justify-content: space-evenly;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.S1{
clip-path: polygon(
            0% 0, 100% 0, 100% 70%, 0% 100%);
}
.S2{
clip-path: polygon(
            0% 30%, 100% 0, 100% 70%, 0% 100%);
}
.S3{
clip-path: polygon(
            0% 30%, 100% 0, 100% 100%, 0% 100%);
}
.unReveal{
    opacity: 0;
    transform: translateY(100px);
}
.reveal{
    opacity: 1;
    transform: translateY(0);
    transition: 2s cubic-bezier(.5,0,0,1);
}
.cadre{
    min-width: 370px;
    max-width: 30%;

}
.cadre img{
    width:100%;
}
.cadrevide{
    width: 30%;
    height:25px;
}

.cadreHead{
    text-align: center;
    padding:6px;
    border-radius:25px 25px 0 0;
}
.cadreBody{
    text-align: center;
    padding:50px 5px;
    opacity:.8;
    border-radius:0 0 25px 25px;

}
.cadreFoot{
    text-align: center;
    padding:6px;
    background-color: hsl(var(--color1),var(--sat),var(--xlfonce));
}
footer{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}