/* Reset
-------------------------------------------------- */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
*, *:before, *:after{margin:0;padding:0;border:0;box-sizing:border-box}
*{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}

:root {
   --padding-one: 6px;
   --padding-two: 12px;
   --padding-three: 24px;
}

@font-face {
   font-family: 'PracticalGrotesk';
   src: url('../fonts/PracticalGrotesk-Book.woff2') format('woff2'),
      url('../fonts/PracticalGrotesk-Book.woff') format('woff');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'PracticalGrotesk';
   src: url('../fonts/PracticalGrotesk-BookItalic.woff2') format('woff2'),
      url('../fonts/PracticalGrotesk-BookItalic.woff') format('woff');
   font-weight: 400;
   font-style: italic;
   font-display: swap;
}

/* Réglages
-------------------------------------------------- */
img{display:block;width:100%;height:auto}
ul,li{list-style: none}
em{font-style: italic;}
u{margin-top:2em;text-decoration:underline;text-underline-offset: 3px;text-decoration-thickness: 1px;}
video{width:100%;height:auto}

/* Grid
-------------------------------------------------- */
.gridlayout{z-index: -2;padding:0 var(--padding-two);position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-flow: row wrap;align-items: flex-start;}
.gridlayout span{width:calc(100% / 12 - var(--padding-three));margin:0 var(--padding-two);height:100%;background:red;opacity:.1;display:none}
.gridlayout.active span{display: inline-block}

Liens
-------------------------------------------------- */
a{color:#ccc;text-decoration:none;outline:0}
a:hover, a.active{color:#000;}
main a{color:#ccc;text-decoration:none;}
main a:hover{color:black;}

/* Site
-------------------------------------------------- */
html{width:100%;min-height:100%}
body{width:100%;min-height:100%;background:#fff;color:#000000;overflow-x:hidden;;font-family:'PracticalGrotesk', Arial, sans-serif;letter-spacing: .0125em;}
body, h1, h2, h3, h4{line-height:var(--padding-three);font-size:18px}
body{display: -webkit-flex;display: flex;-webkit-flex-flow: column wrap;flex-flow: column wrap;}

/* Header
-------------------------------------------------- */
header{position:fixed;background:white;top:0;left:0;z-index:999;width:100%;transition:top .25s ease}
header.active{top:-72px}
header > div{display:grid;grid-template-columns: repeat(12, 1fr);;gap: var(--padding-three);width:100%;padding:0 var(--padding-three)}
header h1{padding:var(--padding-two) 0;display: flex;flex-flow: row wrap;justify-content:flex-start;grid-column: 2 / span 2;}
header h1 a{padding:var(--padding-two) 0;text-decoration: none}
header ul{padding:var(--padding-two) 0;flex:1;display: grid;grid-template-columns:repeat(4, auto);grid-column: 4 / span 8;gap: var(--padding-three);justify-content: end;}
header ul li{padding:var(--padding-two) 0;display: flex;flex-flow: row wrap;justify-items:end}
header ul li a{color:#ccc;text-decoration:none}
header ul li a:hover, header ul li a.active{color:black;}

header .lang{justify-content: flex-end;grid-column: 12 / span 1;padding:var(--padding-two) 0;display: flex;flex-flow: row wrap;width:auto;gap:var(--padding-one)}
header .lang a, header .lang span{padding:var(--padding-two) 0;}
header .lang span{padding:var(--padding-two) 0;}
header .lang a{color:#ccc;text-decoration:none}
header .lang a:hover, header .lang a.active{color:black;}
header .lang a.active{display:none}

.teaser.container {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   gap: var(--gap);
   padding: 0 var(--padding-two);
}

ul.teaser {
   grid-column: 2 / span 10;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--gap);
}

ul.teaser li {
   padding: var(--padding-two);
   display: flex;
   flex-flow: column nowrap;
}
ul.teaser li figcaption{margin-top:var(--padding-one);line-height:18px;font-size:14px}


/* Headings
-------------------------------------------------- */
h1, h2, h3, h4{font-size:inherit;line-height:inherit;display:inline-block;width:100%;}
h1 a, h2 a, h3 a, h4 a{color:inherit;}


/* Main
-------------------------------------------------- */
main{margin:82px 0;width: 100%;padding:0;display: flex;flex-flow:column nowrap}
main section{padding:var(--padding-two);display: grid;grid-template-columns: repeat(12, 1fr);}
main section .column{grid-column: span var(--span);}
main section .column .block{padding:var(--padding-two);}
main section .column .block-type-text p+p{margin-bottom:1em}
main section .column .block-type-text p:last-child{margin-bottom:0}
main section .column .block-type-text p+p{margin-bottom:1em}

main section .column .block-type-text ol {
    counter-reset: foo;margin-bottom: 1em;
    display: table;padding-left:calc((100% / 8) * 3 + var(--padding-two));
}

main section .column .block-type-text ol > li {
    counter-increment: foo;
    display: table-row;line-height: 16px;
font-size: 12px;
}

main section .column .block-type-text ol > li::before {
    content: counter(foo) ".";
    display: table-cell;width:calc(var(--padding-two) * 3);
    text-align: left;
   -moz-font-feature-settings: "tnum";
-webkit-font-feature-settings: "tnum";
font-feature-settings: "tnum";
}


main section .column .block-type-image figcaption{margin-top:var(--padding-one);line-height:16px;font-size:12px}


nav{margin-top: 1em;
  padding: var(--padding-two);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
nav div{padding: var(--padding-two);}
nav div a{display: inline-flex;flex-flow:row nowrap;gap: var(--padding-two)}
nav div:nth-child(1){grid-column: 2 /span 2;}
nav div:nth-child(2){grid-column: 4 /span 6;text-align:center;line-height: 18px;
font-size: 14px;}
nav div:nth-child(3){grid-column: 7 /span 9;grid-column: 10 /span 2;
text-align: right;}


/* Table
-------------------------------------------------- */
table{width:100%;border-collapse:collapse;border:0;}
table td{vertical-align:top;}
table td:first-child{width:calc((100% / 6) *1.0275);padding-right:var(--padding-three);  font-variant-numeric: tabular-nums;
   -moz-font-feature-settings: "tnum";
   -webkit-font-feature-settings: "tnum";
   font-feature-settings: "tnum";}
table h2{margin-top:2em;text-decoration:underline;text-underline-offset: 3px;text-decoration-thickness: 1px;}
main section .column .block-type-table:first-of-type h2{margin:0}

/* Lazyload
-------------------------------------------------- */
.lazyload, .lazyloading {opacity: 0;}
.lazyloaded {opacity: 1;-webkit-transition: opacity .25s;-o-transition: opacity .25s;transition: opacity .25s;}

/* Swup.js
-------------------------------------------------- */
.transition-fade {-webkit-transition: opacity .25s ease;-o-transition: opacity .25s ease;transition: opacity .25s ease;opacity: 1;}
html.is-animating .transition-fade {opacity: 0;}


.togglemenu, .menumobile{display:none}
/*--------------------------------------
-   MEDIA QUERIES
---------------------------------------*/
@media only screen and (max-width:1440px){
   :root {
      --padding-one: 5.75px;
      --padding-two: 11.5px;
      --padding-three: 23px;
   }
   body, h1, h2, h3, h4{line-height:var(--padding-three);font-size:17px}

   table td:first-child{width:calc((100% / 8) *1.025);}
   main{margin:80px 0;}
   main section .column.has-text {
     grid-column: 3 /span 8;
   }
}
@media only screen and (max-width:1080px){




}

@media only screen and (max-width:680px){

:root {
   --padding-one: 5.75px;
   --padding-two: 11.5px;
   --padding-three: 21px;
}
    body, h1, h2, h3, h4{line-height:var(--padding-three);font-size:15px}
   
   main section .column .block {
  padding: var(--padding-one);
}
   main section {
  padding:var(--padding-two);
}
   header.active {
  top: -55.5px;
}
   main {
  margin: 55.5px 0;
}
   header h1 a {
      padding: var(--padding-one) 0;}
   
   li.lang{margin-top:1em}
   li.lang.active{display:none}
   
   .togglemenu{grid-column: 9 / span 6;display: flex;
flex-flow: column nowrap;
justify-content: center;
align-content: flex-end;
align-items: flex-end;}
   .togglemenu .burger{display: flex;flex-flow:column nowrap}
   .togglemenu .burger .open{display:none}
   .menumobile{padding:0 calc(var(--padding-two) + var(--padding-one)) var(--padding-two);display:block;z-index: 9999;position:fixed;background:white;width:100%;border-bottom:1px solid;top:-200px;transition: top .25s ease}
   .menumobile.active{top:54px}
   header ul li{padding-bottom:0;}
   
   .menumobile a{color:black;text-decoration: none}
   header {
  z-index: 99999
}
   
   
   header > div {
  background: white;
  z-index: 99999;
  position: relative;padding: 0 calc(var(--padding-two) + var(--padding-one));
}
   

   main section .column {
  grid-column:  1 /span 12;
}
   header ul, header .lang{display: none}
   main section .column.has-text {
  grid-column: 1 /span 12;
}
   .teaser.container {
  padding: 0 var(--padding-one);
}
   header h1 {
  padding: var(--padding-two) 0;
  grid-column: 1 / span 6;
}
   
   table td:first-child {
  min-width: calc((100% / 8) *1.025);width: calc((100% / 6) *1.0275);
}
   
ul.teaser {
   grid-column: 1 / span 12;grid-template-columns: repeat(1, 1fr);}
   
   main section .column .block-type-text ol {
    counter-reset: foo;margin-bottom: 1em;
    display: table;padding-left:calc((100% / 8) * 1 + var(--padding-two));
}

   nav div:nth-child(1) {
  grid-column: 1 /span 6;
}
   nav div:nth-child(3) {
  
      grid-column: 7 /span 12;order:2}
   nav div:nth-child(2) {
  grid-column: 1 /span 12;
  text-align: center;
  order: 3;
}
   
   
   

}