/* CSS IOLCE */

/* styles Uniformisation for browser*/

@import 'normalize.css';

/* ======================================================== */
/* ==================|  VISUAL STYLE   |=================== */
/* ======================================================== */

/* ———————————————————————————————————————————————————————— */
/* ——————————————————————— VAR.CSS ———————————————————————— */
/* ———————————————————————————————————————————————————————— */

:root{
  --color-second-bis:#6685a0;



  --color-bg-header:#356A98;

  --color-font-header: #FFF;


}

[data-theme="light"]{

  --color-bg-body:transparent;

  --color-first: #000;

  --color-second: #356A98;

  --color-thirth: #EFDCB9;
  --color-thirth--offset: #E9CF9E;
  --color-grey: #6D6D6D;

  --color-links-shadow: rgb(218, 218, 218);
  --color-links-shadow-hover: rgb(228, 228, 228);
}

/* —————————————————————————————————–——————————————————————— */
/* ——————————————————————— DARKMODE ———————————————————————— */
/* ——————————————————————————————————————————–—————————————— */

[data-theme="dark"]{

  --color-bg-body:#000;

  --color-first: #FFF;

  --color-second: #669BCA;

  --color-thirth: #E9CF9E;
  --color-thirth--offset: #EFDCB9;
  --color-grey: #7F7F7F;

  --color-links-shadow: rgb(83, 83, 83);
  --color-links-shadow-hover: rgb(64, 64, 64);
}

[data-theme="dark"] .switch-dm{
  background-image: url(../images/switch_dm/bouton_lightmode.svg)
  }
  



/* ———————————————————————————————————————————————————————— */
/* ——————————————————————— GENERAL ———————————————————————— */
/* ———————————————————————————————————————————————————————— */



body{
  
  font-family: 'Encode Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--color-first);
  background-color: var(--color-bg-body);

}

header{
  background-color:var(--color-bg-header);
}


.footer-element__myname{
  text-decoration: none;
  color: inherit;
}

.links{
  text-decoration:none;
  color:inherit;
  font-weight: inherit;
  box-shadow:inset 0 -2px var(--color-thirth) ;
  transition: 0.5s;
  text-shadow: -1px 1px 1px var(--color-links-shadow);
}
  .links:hover{
    box-shadow:inset 0 -13px var(--color-thirth--offset) ;
    transition: 0.5s;
    text-shadow: -1px 1.5px 1px var(--color-links-shadow-hover)
  }

  .links:focus{
    box-shadow:inset 0 -13px var(--color-thirth--offset) ;
    transition: 0.5s;
    text-shadow: -1px 1.5px 1px var(--color-links-shadow-hover)
  }

  .links:active{
    box-shadow:inset 0 13px var(--color-thirth--offset) ;
    transition: 0.5s;
    text-shadow: -1px 1.5px 1px var(--color-links-shadow-hover)
  }

  .links:visited{
    text-decoration:none;
    color:var(--color-grey);
    font-weight: inherit;
    box-shadow:inset 0 13px var(--color-thirth--offset);
    transition: 0.5s;
    text-shadow: -1px 1.5px 1px var(--color-links-shadow-hover)
  }

.my-friend-br{
  display:block;
}

/* .text{} */

.text--up  {
  color:var(--color-second);
  font-weight: 600;
}

.text--cross-out{
  text-decoration: line-through;
}

.caption{
  text-align: right;
  font-weight: 300;
  margin-bottom: 25.6px;
}

.switch-dm{
  width:58px;
  height:21.31px;
  padding: 0;
  background-color: transparent;
  border: none;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-image: url(../images/switch_dm/bouton_darkmode.svg);
  background-repeat: no-repeat;
}

  .switch-dm:hover{
    cursor: pointer;
  }


/* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* - - - - - - - - - - - - TITLE - - - - - - - - - - - -  */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */



.title{

  font-family: 'Ubuntu Mono', monospace;
  font-weight: 700;

   /* défault value h3 */
  font-size:22px;
  line-height: 1.3;

}

  .title--logo{

    font-size: 35px; 
    line-height: 1.18;
    color:var(--color-font-header);
    text-align: right;
    margin:0;
    
  }

    .title--logo a{

      text-decoration: none;
      color: inherit;
        
    }

  .title--small{
    font-size: 18px;
    line-height: 1.18;
    font-weight: 500;
    color: var(--color-font-header);

  }
  
  .title--italic{
    font-style: italic;
  }

  .title--light-color{
    font-weight: 400;
    color:var(--color-second);
  }

  .title--h2{
    font-size: 49px;
  }

  .title--h2 +p{
    font-size: 25px;
    line-height: 25.6px;
    color:var(--color-second);
  }

      /* TITLE DECORATIONS == H2 == */
      .deco-h2--big{
        position:relative;
      }
      .deco-h2--big:before{
        content:"";
        display:block;
        width:21.4px;
        height:25.6px;
        background-color:var(--color-second);
        
        position: absolute;
        bottom: 0;
        left: -47px;
      }

      .deco-h2--small{
        position:relative;
      }
      .deco-h2--small:after{
        content:"";
        display:block;
        width:15.4px;
        height:25.6px;
        background-color:var(--color-second);
        
        position: absolute;
        bottom: 0;
        left: -88.2px;
      }
  
      /* TITLE DECORATIONS == H3 == */
      .deco-h3{
        position:relative;
      }
      .deco-h3:after{
        content:"";
        display:block;
        width:9.4px;
        height:25.6px;
        background-color:var(--color-second);
        
        position: absolute;
        bottom: 0;
        right: -35px;
      }

  .title--h4 {
    font-size: 20px;

  }
            /* TITLE DECORATIONS == H4 == */
            .deco-h4{
              position:relative;
            }
            .deco-h4:after{
              content:"";
              display:block;
              width:11.4px;
              height:21.6px;
              border: solid 2px var(--color-second);
              
              
              position: absolute;
              bottom: 0;
              left: -41px;
            }

  .title--h5{
    font-size: 18px;

  }

      /* TITLE DECORATIONS == H5 == */
      .deco-h5--big{
        position:relative;
      }
      .deco-h5--big:before{
        content:"";
        display:block;
        width:18.8px;
        height:20.6px;
        border: solid 1px var(--color-second);
        
        position: absolute;
        bottom: 0;
        left: -47px;
      }

      .deco-h5--small{
        position:relative;
      }
      .deco-h5--small:after{
        content:"";
        display:block;
        width:13px;
        height:20.6px;
        border: solid 1px var(--color-second);
        
        position: absolute;
        bottom: 0;
        left: -88.2px;
      }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* - - - - - - - - - - - NAV & LI  - - - - - - - - - - -  */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */


.burger-menu{

  width:58px;
  height:51px;
  padding: 0;
  background-color: transparent;
  border: none;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-image: url(../images/burgerMenu.svg);


}

  .burger-menu:hover{
    cursor: pointer;
  }

  .burger-menu:active{
    background-image: url(../images/burgerMenu-active.svg);    
  }


body[data-menu] .menu__list--primary-nav{
  display:flex;
}

body[data-menu] .burger-menu{
  background-image: url(../images/burgerMenu-off.svg); 
}

/* .menu{} */

  .menu__list{
    margin: 0;
    padding:0;
    list-style: none;
    display:flex;
    flex-direction: column;

  }

    /* principal navigation specifications */
    .menu__list--primary-nav{
      display:none;
      background-color: #356A98;
    }

  .menu__el{
    font-weight: 600;

  }


    .menu__el a{
      text-decoration: none;
    }

    .menu__el--primary-nav{
        margin:25.6px 0 25.6px 0;
    }

      .menu__el--primary-nav a{
        color:#FFF;
        padding-bottom:9px;
      }

          .menu__el--primary-nav a:hover{
            border-bottom: 2px solid #FFF;
          }

          .menu__el--primary-nav a:focus{
            border-bottom: 2px solid #FFF;
          }

          .menu__el--primary-nav a:active{
            border-bottom: 2px solid var(--color-thirth);
          }
        .menu__el--here-im a{
          border-bottom: 2px solid var(--color-thirth);
        }

    /* .menu__el--secondary-nav {} */

      .menu__el--secondary-nav a{
        color:var(--color-second);
      }

        .menu__el--secondary-nav a:hover{
          border-bottom: 2px solid var(--color-second);
        }

        .menu__el--secondary-nav a:focus{
          border-bottom: 2px solid var(--color-second);
        }

        .menu__el--secondary-nav a:active{
          border-bottom: 2px solid var(--color-thirth);
        }
        
        .menu__el--secondary-nav a:visited{
          color: var(--color-grey);
        }

.list{
  margin:0;
  padding:0;
}
  .list__el{
    list-style-image: url(../images/puceliste.svg);
    margin-bottom: 25.6px;
  
  }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* - - - - - - - - - - - - IMAGES  - - - - - - - - - - -  */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

.logo{
  width: 51.28px;
  height:51.28px;
}

  /* Logo DWM */

  .logo__DWM--fontColor{
    fill: var(--color-first);
  }

  .logo__DWM--aplatColor{
    fill:#F4CE2D;
  }

.illu{
  width: 246.9px;
  height:auto;  
}
  .illu__shadow{
    box-shadow: 0 0 1em rgb(102, 102, 102 , 0.5);
  }

.video{
  width:100%;
  height:100%;
  border:none;
}

.illu__xp--5{
  display:none;
}


/* ======================================================== */
/* =====================|  LAYOUT   |====================== */
/* ======================================================== */

.container{
  
  max-width: 375px;
  margin: 0 auto 0 auto;


}




/* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* - - - - - - - - - - - - HEADER  - - - - - - - - - - -  */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */


  .container__header{
    
    margin: 0 25.6px 0 25.6px;
    display:grid ;
    grid-template-rows: repeat(4,25.6px);
    grid-template-columns: 58.4px 151.4px 63.4px;
    grid-column-gap:25.6px;
    align-items: center;

  }

.menu{
  grid-column: 1/-1;
}

.button__burger{
  grid-column: 1 ;
  grid-row: 2 / 4;
  align-self: start;
}  

.title--logo{
  grid-column: 2 ;
  grid-row: 1 / span 4;
  
}

.logo{
  grid-column: 3;
  grid-row: 2 / span 2;
  justify-self: center;
}

.menu__list--primary-nav{

  padding: 0 0px 25.6px 0px;
  
  z-index: 10;
  position: relative;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* - - - - - - - - - - - -  MAIN - - - - - - - - - - - -  */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */


/* -------------- IMAGES -------------*/

.illu{
  grid-column: 2/ span 2 ;
  margin-bottom: 25.6px;
  margin-top:25.6px;
}



/* -------------- GENERAL -------------*/

.container__main{
  margin:0 25.6px 51.2px 25.6px;
  
}

section{
  margin-bottom: 25.6px;
}

.container__content{

  display:grid;
  grid-template-columns: 15.4px 21.4px 200.4px 9.4px;
  grid-column-gap:25.6px;
}

p{
  margin-bottom: 25.6px;
  margin-top: 25.6px;
}

/* -------------- H2 BLOCK -------------*/

/* .container__content--h2{} */

.container__content--h2 h2{
  grid-column: 2 / -1;
  margin-top:102.4px;
  margin-bottom: 25.6px;
}

.container__content--h2 p{
  grid-column: 3;
  margin-top:25.6px;
  margin-bottom: 76.8px;
  
}

/* -------------- INTRO BLOCK -------------*/

.container__content--intro{

  grid-template-columns: 15.4px 247.4px 9.4px;

}


.container__content--intro  > p{
  grid-column: 1 / -1;
  margin-bottom: 25.6px;
}


/* -------------- H3 BLOCKS -------------*/

/* .container__content--h3{} */

  .container__content--h3 h3{
    grid-column: 1 / span 3;
    margin:102.4px 0 25.6px 0;
  }

  .container__content--h3 p{
    grid-column: 1 / -1;
    margin-bottom: 25.6px;
    margin-top: 25.6px;
  }
  .container__content--h3 a{
    grid-column: 1 / -1;
    margin-bottom: 25.6px;
    margin-top: 25.6px;
  }

  .container__content--h3 h3.ui-kit{
    margin-top: 21.2px;

  }
  .container__content--h3 h4{
    grid-column: 2/ span 2;

  }
  .container__content--h3 h5{
    grid-column: 3/ span 2;

  }

  .container__content--h3 p.center{
    grid-column: 2/ span 2 ;
    text-align: center;
  }  

  .container__content--h3 iframe{
    grid-column: 1/ -1;
    height: 168px;
  }

  .container__content--h3 ul{
    grid-column: 2 /-1;
  }

  .container__content--h3 .caption{
    grid-column: 2 / -1;
  }

/* -------------- H4 BLOCKS -------------*/

/* .container__content--h4{} */

  .container__content--h4 h4{
    grid-column: 2/ span 2;
    margin: 51.2px 0 25.6px 0;
  }

  .container__content--h4 .illu{
    grid-column: 2/ span 2;
  }

  .container__content--h4 p{
    grid-column: 2/ span 2;
  }

  .container__content--h4 ul{
    grid-column: 2 /-1;
  }

/* -------------- H5 BLOCKS -------------*/

/* .container__content--h5{} */

.container__content--h5 h5{
  grid-column: 3/ span 2;
  margin:0;
}
.container__content--h5 ul{
  margin-top: 25.6px;
  grid-column: 2/ span 2;
}
.container__content--h5 p{
  grid-column: 2/ span 2;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* - - - - - - - - - - - - FOOTER  - - - - - - - - - - -  */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

.container__footer{
    
  margin: 76.8px 25.6px 0 25.6px;
  display:grid ;
  grid-template-rows: repeat(5,25.6px);
  grid-template-columns: 58.4px 123.4px 90.4px;
  grid-column-gap:25.6px;
  align-items: center;

}

.menu__list--secondary-nav{

  grid-column: 3;
  grid-row: 2 / span 3;
}

.footer-element__myname{
  grid-column: 1/ span 2;
  grid-row: 3;
}

.footer-element__dwm{
  grid-column: 1/ span 2;
  grid-row: 4;
}

.footer-element__switch-dm{
  grid-column: 1;
  grid-row: 1;
}

    /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
    /* - - - - - - - - - - - - UI-Kit  - - - - - - - - - - -  */
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

    .container__footer--specimen{
      grid-column: 1/ -1;
      margin: 2px 0 2px 0;
      border: solid 2px var(--color-second)
    }

    .container__content--h3 ul.list__ui-kit {
      grid-column: 1 /span 2;
      grid-row: 1/ -1;
      align-self: center;
      margin-top: 32.4px;
    }
    .table--ui-kit{
      grid-column: 1/ span -1;
    }

    td{
      padding-left: 16px;
    }

    .text--bold-ui-kit{
      font-weight: 600;
    }

    .title--regular{
      font-weight:500;
    }

    .header-specimen{
      background-color:var(--color-bg-header);

      grid-column: 1 / -1;
      margin: 2px 0 2px 0;
    }

    .link__primary-nav--specimen{
      color:#FFF;
      padding-bottom:9px;
    }

    .link__primary-nav--hover {
      border-bottom: 2px solid #FFF;
    }

    .link__primary-nav--active{
      border-bottom: 2px solid var(--color-thirth);
    }

    .container__header--specimen {
      margin: 0;
      grid-template-rows:auto;
    }

    .menu__list--primary-nav-specimen{
      display:flex;
    }


    .link__secondary-nav--specimen{
      color:var(--color-second);
    }

    .link__secondary-nav--hover{
        border-bottom: 2px solid var(--color-second);
      }

      .link__secondary-nav--active{
        border-bottom: 2px solid var(--color-thirth);
      }
      
      .link__secondary-nav--visited{
        color: var(--color-grey);
      }

    .links__specimen{
      text-decoration:none;
      color:inherit;
      font-weight: inherit;
      box-shadow:inset 0 -2px var(--color-thirth) ;
      text-shadow: -1px 1px 1px var(--color-links-shadow);
    }
      .links__specimen--hover{
        text-decoration:none;
        color:inherit;
        font-weight: inherit;
        box-shadow:inset 0 -13px var(--color-thirth--offset) ;
        text-shadow: -1px 1.5px 1px var(--color-links-shadow-hover);
      }
    
      .links__specimen--active{
        text-decoration:none;
        color:inherit;
        font-weight: inherit;
        box-shadow:inset 0 13px var(--color-thirth--offset) ;
        transition: 0.5s;
        text-shadow: -1px 1.5px 1px var(--color-links-shadow-hover)
      }

      .links__specimen--visited{
        text-decoration:none;
        color:var(--color-grey) ;
        font-weight: inherit;
        box-shadow:inset 0 -2px var(--color-thirth) ;
        text-shadow: -1px 1px 1px var(--color-links-shadow);
      }

      .container__content--h3 h2{
        grid-column: 2 / -1;
        margin-top:0px;
        margin-bottom: 25.6px;
      }
      
      .container__content--h3 .paragraph--h2{
        grid-column: 3;
        margin-top:25.6px;
        margin-bottom: 25.6px;
        
      }

/* ———————————————————————————————————————————————————————— */
/* ———————————————————————————————————————————————————————— */
/* ———————————————————————————————————————————————————————— */
/* ——————————————————————— TABLET  ———————————————————————— */
/* ———————————————————————————————————————————————————————— */
/* ———————————————————————————————————————————————————————— */
/* ———————————————————————————————————————————————————————— */

@media (min-width: 768px){
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
  /* - - - - - - - - - - - - TITLE - - - - - - - - - - - -  */
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */



  .title{

    font-family: 'Ubuntu Mono', monospace;
    font-weight: 700;

    /* défault value h3 */
    font-size:28px;
    line-height: 1.3;

  }

  .title--h2{
    font-size: 61px;
  }

  .title--h2 +p{
    font-size: 31px;
    line-height: 31px;
    color:var(--color-second);
  }

  .title--h4 {
    font-size: 22px;

  }

  .title--h5{
    font-size: 20px;

  }

  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
  /* - - - - - - - - - - - - IMAGES  - - - - - - - - - - -  */
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

  .logo{
    width: 69.8px;
    height:69.8px;
  }

  .illu{
    width: 362.4px;
    height:auto;  
  }
  


  /* ======================================================== */
  /* =====================|  LAYOUT   |====================== */
  /* ======================================================== */

  .container{
    
    max-width: 768px;
    margin: 0 auto 0 auto;

  }
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
  /* - - - - - - - - - - - - HEADER  - - - - - - - - - - -  */
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */


  .container__header{
    
    margin: 0 51px 0 51px;

    display:grid ;
    grid-template-rows: repeat(5,25.6px);
    grid-template-columns: 117px 179.4px 29.4px 172.4px 65.4px;
    grid-column-gap:25.6px;
    align-items: center;

  }  

  .menu{
    grid-column: 1/ span 2;
    grid-row: 3;
  }

  .title--logo{
    grid-column: 4 ;
    grid-row: 2 / span 3;
    
  }

  .logo{
    grid-column: 5;
    grid-row: 1 / -1;
    justify-self: center;
  }

  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
  /* - - - - - - - - - - - NAV & LI  - - - - - - - - - - -  */
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

  .burger-menu{
    display:none;
  }
  

  .menu__list--primary-nav{
    background-color: transparent;

    display:flex;
    flex-direction: row;
    margin: 0 ;
    padding:0;
  }

  .menu__el--primary-nav{
    margin: 0 auto 0 0;
  }

    .menu__el--primary-nav a{
      padding-bottom:11px ;
    }

    .menu__el--secondary-nav a{
      padding-bottom:4px ;
    }


    .list__el{
      margin-bottom: 32.4px;
    }
 /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
  /* - - - - - - - - - - - -  MAIN - - - - - - - - - - - -  */
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */


  /* -------------- IMAGES -------------*/

  .illu{
    grid-column: 3/ span 4 ;
    margin-bottom: 25.6px;
    margin-top:25.6px;
  }



  /* -------------- GENERAL -------------*/

  .container__main{
    margin:0 51px 51.2px 51px;
    
  }

  section{
    margin-bottom: 25.6px;
  }

  .container__content{

    display:grid;
    grid-template-columns: 95.8px 9.4px 13.4px 18.4px 23.4px 240.4px 117.4px;
    grid-column-gap:25.6px;
  }

  p{
    margin-bottom: 25.6px;
    margin-top: 25.6px;
  }

  /* -------------- H2 BLOCK -------------*/

  /* .container__content--h2{} */

  .container__content--h2 h2{
    grid-column: 3 / 7 ;
    margin-top:102.4px;
    margin-bottom: 25.6px;
  }

  .container__content--h2 p{
    grid-column: 5 / span 2;
    margin-top:25.6px;
    margin-bottom: 76.8px;
    
  }

  /* -------------- INTRO BLOCK -------------*/

  .container__content--intro{

    grid-template-columns: 95.8px 9.4px 13.4px 18.4px 23.4px 240.4px 117.4px;

  }


  .container__content--intro  > p{
    grid-column: 2/ span 5;
    margin-bottom: 25.6px;
  }


  /* -------------- H3 BLOCKS -------------*/

  /* .container__content--h3{} */

    .container__content--h3 h3{
      grid-column: 2 / span 5;
      margin:102.4px 0 25.6px 0;
    }

    .container__content--h3 p{
      grid-column: 2/ span 5;
      margin-bottom: 25.6px;
      margin-top: 25.6px;
    }
    .container__content--h3 a{
      grid-column: 1 / -1;
      margin-bottom: 25.6px;
      margin-top: 25.6px;
    }

    .container__content--h3 h3.ui-kit{
      margin-top: 21.2px;

    }
    .container__content--h3 h4{
      grid-column: 3 / span 4;

    }
    .container__content--h3 h5{
      grid-column: 3/ span 2;

    }

    .container__content--h3 p.center{
      grid-column: 2/ span 5;
      text-align: center;
    }  

    .container__content--h3 iframe{
      grid-column: 2/ -2;
      height: 224px;
    }

    .container__content--h3 ul{
      grid-column: 5 / span 2;
    }

    .container__content--h3 .caption{
      grid-column: 6;
    }

  /* -------------- H4 BLOCKS -------------*/

  /* .container__content--h4{} */

    .container__content--h4 h4{
      grid-column: 3/ span 4;
      margin: 51.2px 0 25.6px 0;
    }

    .container__content--h4 .illu{
      grid-column: 3/ span 4;
    }

    .container__content--h4 p{
      grid-column: 3/ span 4;
    }

    .container__content--h4 ul{
      grid-column: 4/ span 3 ;
    }

  /* -------------- H5 BLOCKS -------------*/

  /* .container__content--h5{} */

  .container__content--h5 h5{
    grid-column: 4/ span 2;
    margin:0;
  }
  .container__content--h5 ul{
    margin-top: 25.6px;
    grid-column: 4/ span 3;
  }
  .container__content--h5 p{
    grid-column: 4/ span 3;
  }

  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
  /* - - - - - - - - - - - -  FOOTER - - - - - - - - - - - -  */
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
    
  .container__footer{
    
    margin: 76.8px 51.2px 0 51.2px;
    display:grid ;
    grid-template-rows: repeat(5,25.6px);
    grid-template-columns: 117px 179.4px 29.4px 172.4px 65.4px;
    grid-column-gap:25.6px;
    align-items: center;
  
  }
  
  .menu__list--secondary-nav{
  
    grid-column: 4 / -1;
    grid-row: 3;
    flex-direction:row;
  }
  .menu__el--secondary-nav{
    margin-left:auto;
    margin-right:25.6px;
  }
  
  .footer-element__myname{
    grid-column: 1/ span 2;
    grid-row: 3;

  }
  
  .footer-element__dwm{
    grid-column: 1/ span 2;
    grid-row: 4;
  }
  
  .footer-element__switch-dm{
    grid-column: 1;
    grid-row: 1;
  }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
    /* - - - - - - - - - - - - UI-Kit  - - - - - - - - - - -  */
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
    .container__footer--specimen{
      margin: 2px 0 2px 0;
    }

    .table--ui-kit{
      grid-column: 2/ span 5;
    }

    td{
      padding-left: 18px;
    }

    .illu--center{
      grid-column: 3/ span 4;
    }

    .container__content--h3 h2{
      grid-column: 3/ span 4;
      margin-top:32.4px;
      margin-bottom: 32.4px;
    }
  
    .container__content--h3 p.paragraph--h2{
      grid-column: 4 / span 3 ;
      margin-top:32.4px;
      margin-bottom: 32.4px;
      
    }

    .container__header--specimen {
      margin: 0;

    }

    .container__content--h3 h3.ui-kit{
      margin-top: 64.8px;

    }

    .container__content--h3 h4{
      grid-column: 3/ span 4;

    }
    .container__content--h3 h5{
      grid-column: 4/ span 4;

    }

    .container__content--h3 p.caption__ui-kit{
      grid-column: 11 / span 2;
      margin-bottom:32.4px;
    }
    .container__content--h3 p.caption__ui-kit--left{
      grid-column: 3 / span 7;
      justify-self: start;
    }
    .container__content--h3 p.caption__ui-kit--center{
      grid-column: 11 / span 2;
    }


}



/* ———————————————————————————————————————————————————————— */
/* ———————————————————————————————————————————————————————— */
/* ———————————————————————————————————————————————————————— */
/* ——————————————————————— DESKTOP ———————————————————————— */
/* ———————————————————————————————————————————————————————— */
/* ———————————————————————————————————————————————————————— */
/* ———————————————————————————————————————————————————————— */

@media (min-width: 1280px){
  /* ———————————————————————————————————————————————————————— */
  /* ——————————————————————— GENERAL ———————————————————————— */
  /* ———————————————————————————————————————————————————————— */

  .container{
    box-shadow: 0 .3em 1em rgb(102, 102, 102 , 0.5);
  }
  body[data-theme="dark"] .container{
    box-shadow: 0 .3em 2em rgba(233, 207, 158, 0.24);
  }

  body{
    
    font-family: 'Encode Sans', sans-serif;
    font-size: 18px;
    line-height: 1.8;
    font-weight: 400;
    color: var(--color-first);
    background-color: var(--color-bg-body);

  }

  .title{
    /* défault value h3 */
    font-size:35px;
    line-height: 1.4;
  }

    .title--logo{

      font-size: 55px; 
      line-height: 1.18;

    }

    .title--small{
      font-size: 25px;
    }

    .title--h2{
      font-size: 86px;
    }

      .title--h2 +p{
        font-size: 55px;
        line-height: 55px;
     }

        .deco-h2--big:before{
          width:83.6px;
          height:64.8px;

          bottom: 0;
          left: -185px;
        }

        .deco-h2--small:after{
          width:50.6px;
          height:64.8px;
          
          bottom: 0;
          left: -317.2px;
        }
  
        .deco-h3:after{
          width:87.6px;
          height:32.4px;
          right: -443px;
        }
    
     .title--h4 {
      font-size: 28px;
      line-height: 1.18;
  
    }

      .deco-h4:after{
        width:39.8px;
        height:30.4px;
        left: -120px;
      }

    .title--h5{
      font-size: 22px;
    }

    .deco-h5--big:before{

      width:26.8px;
      height:28.6px;

      left: -61px;
    }

    .deco-h5--small:after{

      width: 20.8px;
      height:28.6px;

      left: -116.2px;
    }
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
  /* - - - - - - - - - - - NAV & LI  - - - - - - - - - - -  */
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

  .burger-menu{
    display:none;
  }
  

  .menu__list--primary-nav{
    background-color: transparent;

    display:flex;
    flex-direction: row;
    margin: 0 ;
    padding:0;
  }

  .menu__el--primary-nav{
    margin: 0 auto 0 32.4px;
  }

    .menu__el--primary-nav a{
      padding-bottom:11px ;
    }

    .menu__el--secondary-nav a{
      padding-bottom:4px ;
    }


    .list__el{
      margin-bottom: 32.4px;
    }


  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
  /* - - - - - - - - - - - - IMAGES  - - - - - - - - - - -  */
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

  .logo{
    width: 115.28px;
    height: 115.28px;
  }

  .illu{
    width: 394px;
    height:auto;  
  }

    .illu--small{
      width: 320px;
      height:auto;
    }



  /* ======================================================== */
  /* =====================|  LAYOUT   |====================== */
  /* ======================================================== */

  .container{
    
    max-width: 1280px;
    margin: 0 auto 0 auto;

  }

  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
  /* - - - - - - - - - - - - HEADER  - - - - - - - - - - -  */
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */


  .container__header{
    
    margin: 0 97.2px 0 97.2px;

    display:grid ;
    grid-template-rows: repeat(5,32.4px);
    grid-template-columns: 184.8px 290.6px 130.6px 245.6px 104.6px;
    grid-column-gap:32.4px;
    align-items: center;

  }  

  .menu{
    grid-column: 1/ span 2;
    grid-row: 3;
  }

  .title--logo{
    grid-column: 4 ;
    grid-row: 2 / span 3;
    
  }

  .logo{
    grid-column: 5;
    grid-row: 1 / -1;
    justify-self: center;
  }


  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
  /* - - - - - - - - - - - -  MAIN   - - - - - - - - - - -  */
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

  /* -------------- GENERAL -------------*/

  .container__main{
    margin: 0 97.2px 0 97.2px;
    
  }

  section{
    margin-bottom: 32.4px;
  }

  .container__content{

    display:grid;
    grid-template-columns: 48.8px 2.6px 6.6px 11.6px 16.6px 22.6px 28.6px 36.6px 130.6px 63.6px 74.6px 87.6px 166.6px ;
    grid-column-gap:32.4px;
  }

  p{
    margin-bottom: 32.4px;
    margin-top: 32.4px;
  }

  .illu{
    align-self: center;
  }

  /* -------------- H2 BLOCK -------------*/

  .container__content--h2{
    grid-template-columns: 83.8px 50.6px 16.6px 22.6px 28.6px 36.6px 226.6px 74.6px 87.6px 166.6px ;
  }

  .container__content--h2 h2{
    grid-column: 5 / span 4;
    margin-top:129.6px;
    margin-bottom: 32.4px;
  }

  .container__content--h2 p{
    grid-column: 7 / span 3 ;
    margin-top:32.4px;
    margin-bottom: 97.2px;
    
  }

  /* -------------- INTRO BLOCK -------------*/

  .container__content--intro{

    grid-template-columns: 83.6px 447.6px 63.6px 393.6px ;

  }


  .container__content--intro  > p{
    grid-column: 2 ;
    margin-bottom: 32.4px;
    
  }

  .container__content--intro .illu{
    grid-column: 4;
    grid-row: 1 / span 3;
    align-self: center ;
  }

  /* -------------- H3 BLOCKS -------------*/

  /* .container__content--h3{} */



    .container__content--h3 h3{
      grid-column: 3 / span 7;
      margin: 129px.6px 0 32.4px 0;
    }
    
    .container__content--h3 p.justify--right{
      grid-column: 10 / -1;
      margin-bottom: 32.4px;
      margin-top: 32.4px;
    }

    .container__content--h3 a{
      grid-column: 7 / span 5;
      margin-bottom: 32.4px;
      margin-top: 32.4px;
    }

    .container__content--h3 p.justify--center{
      grid-column: 7 / span 5;
      margin-bottom: 32.4px;
      margin-top: 32.4px;
    }
    
    .container__content--h3 p.justify--left{
      grid-column: 2 / span 8;
      margin-bottom: 32.4px;
      margin-top: 32.4px;
    }

    .container__content--h3 .illu.justify--left{
      grid-column: 2 / 7;
      margin-bottom: 32.4px;
      margin-top: 32.4px
    }

    .container__content--h3 .illu.justify--right{
      grid-column: 11 / span 2;
      margin-bottom: 32.4px;
      margin-top: 32.4px;
    }

    .container__content--h3 .illu.justify--center{
      grid-column: 7 / span 4;
      margin-bottom: 32.4px;
      margin-top: 32.4px;
      justify-self: center;
    }



    .container__content--h3 p.center{
      text-align: center;
    }  

    .container__content--h3 iframe{
      margin-top:32.4px;
      grid-column: 4/ -2; 
      height: 406px;
    }

    .container__content--h3 ul{
      grid-column: 7 /span 3;
      margin-top:32.4px;
    }

    .container__content--h3 .caption{
      grid-column: 11 / span 2;
    }

    .container__content--h3 .caption--left{
      grid-column: 3 / span 7;
      justify-self: start;
    }

        /* LAYOUT SPECIFIC */
        .p__xp--3{
          align-self:end;
          grid-row:2;
        }
        .p__xp--4{
          grid-row:3;
        }
        .p__xp--5{
          grid-row:4;
        }
        /*
        .p__xp--8{
         
          grid-row:2;
          align-self:center;
        }*/
        .illu__xp--3{
          grid-row:4;
        }

        .illu__xp--5{
          display:block;
          width: 109px;
          height: auto;
          grid-column:4;
        }
        .illu__xp--4{
          z-index: 20;
        }

/* -------------- H4 BLOCKS -------------*/

  .container__content--h4{
    margin-bottom:32.4px;

  }

    .container__content--h4 h4{
      grid-column: 5/ span 6;
      margin: 64.8px 0 32.4px 0;
    }

    .container__content--h4 p.justify--left{
      grid-column: 2 / span 8;
    }

    .container__content--h4 p.justify--center{
      grid-column: 7 / span 5;
    }

    .container__content--h4 p.justify--right{
      grid-column: 10 / -1;
    }

    .container__content--h4 p.paragraph--under{
      margin-top:0;
    }


    .container__content--h4 .illu.justify--left{
      grid-column: 2/ span 2;
    }

    .container__content--h4 .illu.justify--right{
      grid-column: 11/ span 3;
    }
    .container__content--h4 ul{
      grid-column: 3 / span 7;
      margin-top:32.4px
    }

    .container__content--h4 ul.list--right{
      grid-column: 10 /-1;
    }

    .container__content--h4 ul.list--center{
      grid-column: 9 / span 3;
    }

    /* -------------- H5 BLOCKS -------------*/

  /* .container__content--h5{} */

  .container__content--h5 h5{
    grid-column: 8/ span 4;
    margin:0;
  }
  .container__content--h5 ul{
    margin-top: 32.4px;
    grid-column: 7/ span 6;
  }
  .container__content--h5 p{
    margin-top: 32.4px;
    grid-column: 7/ span 6;
}

  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
  /* - - - - - - - - - - - - FOOTER  - - - - - - - - - - -  */
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

  .switch-dm{
    width:88px;
    height:32.31px;
    padding: 0;
    background-color: transparent;
    border: none;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-image: url(../images/switch_dm/bouton_darkmode.svg);
    background-repeat: no-repeat;
  }

  .container__footer{
    
    margin: 97.2px 97.2px 0 97.2px;

    display:grid ;
    grid-template-rows: repeat(5,32.4px);
    grid-template-columns: 184.8px 290.6px 130.6px 245.6px 104.6px;
    grid-column-gap:32.4px;
    align-items: center;

  }

  .menu__list--secondary-nav{

    grid-column: 4 / -1;
    grid-row:4;
    flex-direction:row;
  }

  .menu__el--secondary-nav{
    margin-left:auto;
    margin-right:32.4px;
  }

  .footer-element__myname{
    grid-column: 1;
    grid-row: 3;
  }

  .footer-element__dwm{
    grid-column: 1;
    grid-row: 4;
  }

  .footer-element__switch-dm{
    grid-column: 1;
    grid-row: 1 ;
  }

    /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
    /* - - - - - - - - - - - - UI-Kit  - - - - - - - - - - -  */
    /* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
    .container__footer--specimen{
      margin: 2px 0 2px 0;
    }

    .table--ui-kit{
      grid-column: 6/ span 5;
    }

    td{
      padding-left: 18px;
    }

    .illu--center{
      grid-column: 7/ span 5;
    }

    .container__content--h3 h2{
      grid-column: 7/ span 5;
      margin-top:32.4px;
      margin-bottom: 32.4px;
    }
  
    .container__content--h3 p.paragraph--h2{
      grid-column: 9 / span 2 ;
      margin-top:32.4px;
      margin-bottom: 32.4px;
      
    }

    .container__header--specimen {
      margin: 0;

    }

    .container__content--h3 h3.ui-kit{
      margin-top: 64.8px;

    }

    .container__content--h3 h4{
      grid-column: 5/ span 6;

    }
    .container__content--h3 h5{
      grid-column: 8/ span 4;

    }

    .container__content--h3 p.caption__ui-kit{
      grid-column: 11 / span 2;
      margin-bottom:32.4px;
    }
    .container__content--h3 p.caption__ui-kit--left{
      grid-column: 3 / span 7;
      justify-self: start;
    }
    .container__content--h3 p.caption__ui-kit--center{
      grid-column: 11 / span 2;
    }
}