/* TEST */
body{
  font-family: Rand, sans-serif;
  letter-spacing: 0;

  margin: 0;

  --white: #F2F2F2;
  --black: #0F0F0F;
  --blue: #5F95F0;
  --green: #177F38;
  --pink: #FF8AC9;

  --background-color: var(--white);
  --color: var(--black);
  --inverted-background-color: var(--black);
  --inverted-color: var(--white);

  --border-width: 2px;
  --gap: 24px;
  --image-border-radius: 20px;

}

@media (min-width: 821px){
  .hide-desktop{
    display: none !important;
  }
}

@media (max-width: 820px){
  body{
    --border-width: 1px;
  }
  .hide-mobile{
    display: none !important;
  }
}

@font-face {
  font-family: "Panochiffre";
  src: url("/assets/fonts/panochiffre/panochiffre.eot");
  src: url("/assets/fonts/panochiffre/panochiffre.eot?#iefix") format("embedded-opentype"),
       url("/assets/fonts/panochiffre/panochiffre.woff2") format("woff2"),
       url("/assets/fonts/panochiffre/panochiffre.woff") format("woff"),
       url("/assets/fonts/panochiffre/panochiffre.ttf") format("truetype"),
       url("/assets/fonts/panochiffre/panochiffre.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

a{
  color: inherit;
}

p,
.texte > p{
  margin-top: 0;
  line-height: 1.5;
}

h1, .h1, .h1 > p{
  margin: 0;
  font-weight: 500;
  font-size: 96px;
  line-height: 96px;
}

h2, .h2, .h2 > p{
  margin: 0;
  font-weight: 500;
  font-size: 64px;
  line-height: 64px;
}

h3, .h3, .h3 > p{
  margin: 0;
  font-weight: 500;
  font-size: 42px;
  line-height: 48px;
}

h4, .h4, .h4 > p{
  margin: 0;
  font-weight: 500;
  font-size: 28px;
  line-height: 32px;
}

.b1,
.b1 > p,
.caption{
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
}

.b2,
.b2 > p{
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.caption-small{
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
}

@media (max-width: 820px){
  h1, .h1, .h1 > p{
    font-size: 40px;
    line-height: 44px;
  }
  h2, .h2, .h2 > p{
    font-size: 30px;
    line-height: 32px;
  }
  h3, .h3, .h3 > p{
    font-size: 24px;
    line-height: 26px;
  }
  h4, .h4, .h4 > p{
    font-size: 20px;
    font-size: 22px;
  }
  .b1,
  .b1 > p, 
  .caption{
    font-size: 16px;
    line-height: 18px;
  }
  .b2,
  .b2 > p{
    font-size: 14px;
    line-height: 20px;
  }
  .caption-small{
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
  }
}

header,
footer{
  background-color: var(--black);
  color: var(--white);
  display: flex;
  padding: 0 var(--gap) calc( var(--gap) * 3 );
  justify-content: center;
}

@media (max-width: 820px){
  header,
  footer{
    padding: 0 calc( var(--gap) / 3 ) var(--gap);
  }
}

header .container{
  border-bottom: solid var(--border-width) var(--white);
  max-width: 1920px;
  width: 100%;
  padding: 0 0 var(--gap);
}

header .container > *{
  padding-top: var(--gap);
}

header .nav-logo{
  display: flex;
  align-items: center;
}

header .container .nav-logo{
  float: left;
  height: 44px;
  margin-right: calc( var(--gap) * 2 );
}

header a{
  text-decoration: none;
}

header .container > nav{
  display: flex;
  align-items: center;
  gap: calc( var(--gap) * 2 );
  width: fit-content;
}

header nav > ul > li{
  display: flex;
  position: relative;
}

header nav > ul > li > a{
  white-space: nowrap;
  padding: 13px 0;
}

header nav > ul{
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  gap: calc( var(--gap) * 2 );
}


header nav .has-children{
  z-index: 5;
}

header nav .has-children::after{
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_3127_3960' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='10' height='10'%3E%3Crect y='10' width='10' height='10' transform='rotate(-90 0 10)' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_3127_3960)'%3E%3Cpath d='M9.1884 3.48835L4.99996 7.68262L0.811523 3.48835L1.70829 2.59158L4.99996 5.88324L8.29163 2.59158L9.1884 3.48835Z' fill='%23F2F2F2'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  width: 14px;
  padding-left: 4px;
  cursor: pointer;
  position: relative;
  z-index: 5;
}


header nav .has-children > ul{
  color: var(--black);        
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);

  background-color: var(--white);
  padding: calc( var(--gap) * .75);
  gap: var(--gap);
  border-radius: 20px;
  border: none;
  list-style: none;
  box-shadow: 0px 0px 0px 100vmax rgba(0,0,0,.5);
  width: 180px;
  opacity: 0;
  transition-behavior: allow-discrete;
  transition-property: display opacity;
  transition-duration: 500ms;
}

header nav .has-children > a{
  position: relative;
  z-index: 10;
}

header nav .has-children:hover > ul,
header nav .has-children a:focus + ul{
  display: flex;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

header .utils{
  display: flex;
  float: right;
  gap: calc( var(--gap) / 2 );
}

.search-toggle.open{
  background-color: transparent;
  display: flex;
  align-items: center;
  border: none;
  cursor: pointer;
  anchor-name: --search-button;
  padding: 0;
}

#search{
  --color: var(--black);
  --background-color: var(--white);
  flex-direction: column;
  align-items: end;
  margin: 0;
  inset: auto;
  border-radius: 20px;
  border: none;
  padding: var(--gap);
  width: min(100%, 440px);

  position: absolute;
  position-anchor: --search-button;
  top: anchor(bottom);
  justify-self: anchor-center;
  box-shadow: 0px 0px 0px 100vmax rgba(0,0,0,.5);

  opacity: 0;
  transition-behavior: allow-discrete;
  transition-property: display opacity;
  transition-duration: 500ms;
}

#search:popover-open{
  display: flex;
  opacity: 1;
  @starting-style {
    opacity: 0;
  }
}

#search .close{
position: absolute;
top: 16px;
right: 16px;
z-index: 10;
}

#search form{
  display: flex;
  flex-direction: column;
  align-items: end;
  padding-top: var(--gap);
  gap: 10px;
  margin: 0;
  width: 100%;
}

#search .field,
#search input{
  width: 100%;
}

#search label{
  display: block;
}

#search button{
  background-color: transparent;
  padding: 0;
  border: none;
  cursor: pointer;
}

header .utils .cta{
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  gap: var(--border-width);
}

header .utils .cta .libelle{
  padding: 13px 12px 13px 16px;
}

header .utils .cta .icone{
  display: grid;
  place-items: center;
  padding: 0 16px 0 12px;
}

header .utils .cta.principal > span{
  background-color: var(--white);
  color: var(--black);
}

.mobile-header{
  padding: calc( var(--gap) / 3 ) calc( var(--gap) / 3 ) calc( var(--gap) * 2 );
  gap: var(--gap);
}

.mobile-header .nav-logo{
  flex-grow: 1;
}

.mobile-header .cta{
  background-color: var(--white);
  padding: 10px;
  border-radius: 20px;
}

.mobile-header > [aria-controls="main-menu"]{
  background-color: transparent;
  padding: 0;
  border: none;
}

@media (max-width: 820px){
  .mobile-header{
    display: flex;
    justify-content: end;
    width: 100%;
  }
  header .container{
    color: var(--black);
    box-sizing: border-box;
    border-bottom: none;
  }
  #main-menu{
    position: fixed;
    top: 0;
    bottom:0;
    width: 100%;
    left: 0;
    transform: translateX(100%);
    transition: 500ms;
    z-index: 100;
    overscroll-behavior: contain;
  }
  #main-menu > .close-menu{
    background-color: transparent;
    position: absolute;
    top: calc( var(--gap) / 3 );
    right: calc( var(--gap) / 3 );
    padding: 0;
    border: none;
  }
  .mobile-header:has( > [aria-controls="main-menu"][aria-expanded="true"] ) + #main-menu{
    transform: translateX(0%);
  }
  body:has([aria-controls="main-menu"][aria-expanded="true"]){
    overflow-y: hidden;
  }
  #main-menu{
    background-color: var(--white);
    display: grid;
    grid-template-rows: calc( var(--gap) * 4 ) auto 1fr auto auto;
    padding: 0 calc( var(--gap) / 3 * 2 );
  }
  #main-menu .nav-logo{
    align-items: start;
    padding-top: calc( var(--gap) / 3 * 2 );
    height: auto;
    grid-row: 1;
  }
  #main-menu .nav-logo svg path,
  #main-menu .search-toggle.open svg path{
    fill: var(--black);
  }
  #main-menu .utils{
    margin-bottom: calc( var(--gap) * 2 );
  }
  #main-menu .utils .cta{
    display: none;
  }
  #main-menu .search-toggle.open{
    color: #0F0F0F;
    font-size: 14px;
    line-height: 20px;
    margin: -10px; 
  }
  #main-menu #search{
    height: auto;
    bottom: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    top: calc( anchor(top) - ( var(--gap) / 4 ) );
    width: 100%;
  }
  #main-menu #search{
    padding: 0 calc( var(--gap) / 3 * 2 );
  }
  #main-menu #search form{
    align-items: start;
    gap: var(--gap);
    padding-top: 0;
  }
  #main-menu > nav,
  #main-menu .mobile-cta{
    align-items: start;
    font-size: 30px;
    font-weight: 500;
    line-height: 32px;
  }

  #main-menu > nav{
    padding-top: 0;
    position: relative;
    width: 100%;
  }
  #main-menu > nav ul{
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
  }
  #main-menu nav > ul::before{
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_2887_23692)"><mask id="mask0_2887_23692" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-4" y="-4" width="28" height="28"><rect width="26.6667" height="26.6667" transform="matrix(-1 0 0 1 23.333 -3.33398)" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_2887_23692)"><path d="M4.85856 10.8327H18.333V9.16602H4.85856L11.1877 2.83685L9.99967 1.66602L1.66634 9.99935L9.99967 18.3327L11.1877 17.1618L4.85856 10.8327Z" fill="%230F0F0F"/></g></g><defs><clipPath id="clip0_2887_23692"><rect width="20" height="20" fill="white"/></clipPath></defs></svg>');
    background-position: 0 0%;
    background-repeat: no-repeat;
    content: "Retour";
    font-size: 14px;
    line-height: 20px;
    padding-left: 30px;
    position: absolute;
    height: 68px;
    bottom: 100%;
    background-color: var(--white);
    width: 100%;
    opacity: 0;
    transition: 500ms;
  }
  #main-menu > nav ul li{
    position: static;
  }
  #main-menu > nav ul li a{
    padding: 0;
    width: 100%;
  }
  #main-menu nav .has-children::after{
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.16205 1.1532L15.0083 9.99945L6.16205 18.8457L4.98247 17.6661L12.6491 9.99945L4.98247 2.33279L6.16205 1.1532Z" fill="%230F0F0F"/></svg>');
  }
  header nav .has-children > ul{
    padding: 0;
    border-radius: 0;;
    box-shadow: none;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    transform: translateX(0);
    opacity: 0;
  }
  #main-menu .has-children:hover > ul, #main-menu .has-children > a:focus + ul,
  #main-menu nav > ul:has( .has-children:hover > ul, .has-children > a:focus + ul )::before 
  {
    opacity: 1;
    @starting-style {
      opacity: 0;
    }
  }
  #main-menu  nav ~ *{
    opacity: 1;
    transition: 500ms;
  }
  #main-menu  nav:has( .has-children:hover, .has-children > a:focus ) ~ *{
    opacity: 0;
  }
  #main-menu .lang-switcher{
    padding-bottom: var(--gap);
  }
  #main-menu .mobile-cta{
    list-style-type: none;
    margin: 0 calc( calc( var(--gap) / -3 * 2 ) );
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--border-width);
  }
  #main-menu .mobile-cta a{
    background-color: var(--black);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gap) calc( var(--gap) / 3 * 2 );
  }
  #main-menu .mobile-cta path{
    fill: var(--white);
  }
  #main-menu .mobile-cta [target="_blank"] svg{
    transform: rotate(-45deg);
  }
}

section{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--gap);
}

section{
  background-color: var(--background-color);
  color: var(--color);
}

section .container,
footer .container{
  box-sizing: border-box;
  max-width: 1920px;
  padding: var(--gap) var(--gap) calc(var(--gap) * 5);
  width: 100%;
  border-left: solid var(--border-width) var(--color); 
  border-right: solid var(--border-width) var(--color); 
}

@media (max-width: 820px){
  section{
    padding: 0 calc( var(--gap) / 3 );
  }
  section .container,
  footer .container{
    padding: calc( var(--gap) / 3 * 2 ) calc(var(--gap) / 3) calc(var(--gap) * 2);
  }
  .container > hr{
    display: none;
  }
}

.grid .container{
  display: grid;
  column-gap: var(--gap);
}

@media (min-width: 821px){
  .grid .container{
    grid-template-columns: 1fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 1fr;
  }
}

.blue{
  --background-color: var(--blue);
  --color: var(--black);
  --inverted-background-color: var(--black);
  --inverted-color: var(--blue);
}

.pink{
  --background-color: var(--pink);
  --color: var(--black);
  --inverted-background-color: var(--black);
  --inverted-color: var(--pink);
}

.black{
  --background-color: var(--black);
  --color: var(--white);
  --inverted-background-color: var(--white);
  --inverted-color: var(--black);
}

.green{
  --background-color: var(--green);
  --color: var(--white);
  --inverted-background-color: var(--white);
  --inverted-color: var(--green);
}

.texte :last-child{
  margin-bottom: 0;
}

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

section.page-header .container{
  padding-top: 0;
  padding-bottom: var(--gap);
  min-height: 134px;
  grid-template-rows: auto 1fr;
}

section.page-header .surtitre{
  margin-bottom: calc( var(--gap) / 3 * 2 );
}

@media (min-width: 821px){
  section.page-header .container{
    min-height: 264px;
  }
  section.page-header .surtitre{
    grid-column: 1 / span 12;
    margin-bottom: var(--gap);
  }

  section.page-header h1{
    grid-column: 1 / span 12;
  }
}

/* ---------- SECTION ---------- */

@media (min-width: 821px){
  section.section > .container > .surtitre{
    grid-column: 1 / span 15;
  }
  
  section.section > .container > .titre{
    grid-column: 1 / span 11;
  }

  section.section.horizontal > .container > .texte{
    grid-column: 13 / 16;
  }
  
  section.section.hasText.hasButton > .container > hr,
  section.section.horizontal.hasText.hasButton > .container > .texte{
    grid-row: span 2;
  }
  
  section.section.vertical.hasText.hasButton > .container .bouton{
    grid-column-start: 9;
  }
  
  section.section.horizontal > .container > hr{
    grid-column: 12 / span 1;
  }
  
  section.section.vertical > .container .texte{
    grid-column: 9 / 16;
  }
  
  section.section.vertical > .container > hr{
    grid-column: 8 / span 1;
  }

  section.section > .container > .bouton{
    grid-column-end: span 7;
  }

  section.section.vertical.hasText > .container > .titre{
    margin-bottom: calc( var(--gap) * 5 );
  }

  section.section.horizontal .container > .titre{
    padding-right: 80px;
  }

  section.section > .container > .surtitre{
    margin-bottom: calc( var(--gap) * 5 );
  }
}

@media (max-width: 820px){
  section.section > .container{
    padding-right: var(--gap);
  }
  section.section.horizontal > .container > .texte{
    order: 1;
  }
  section.section.vertical > .container > .titre,
  section.section.horizontal:not(.hasButton) > .container > .titre,
  section.section.horizontal.hasButton > .container > .bouton,
  section.section > .container > .surtitre{
    margin-bottom: calc( var(--gap) * 2 );
  }
}

section.section:not(.hasText) > .container > hr{
  display: none;
}

section.section.hasText > .container > hr{
  background-color: var(--color);
  border: none;
  width: 100%;
  margin: 0;
}

section.section > .container > .bouton{
  margin-top: 24px;
}

/* ---------- TEXTE 50/50 ---------- */

@media (max-width: 820px){
  section.texte5050 > .container{
    padding-right: var(--gap);
  }
  section.texte5050 .sousTitre{
    padding-bottom: calc( var(--gap) / 3 * 2 );
  }
  section.texte5050 .texte:not(:last-child){
    padding-bottom: calc( var(--gap) * 2 );
  }
}

@media (min-width: 821px){
  section.texte5050 .sousTitre{
    grid-column: 1 / span 5;
  }

  section.texte5050 .sousTitre span{
    position: sticky;
    top: var(--gap);
    bottom: var(--gap);
  }
  section.texte5050 hr{
    background-color: var(--color);
    color: var(--color);
    border: none;
    margin: 0;
    grid-column: 8 / span 1;
  }
  
  section.texte5050 .texte{
    grid-column: 9 / span 7;
  }
  
  section.texte5050 .texte:not(:last-child){
    padding-bottom: calc( var(--gap) * 5 );
  }
}


/* ---------- TEXTE-IMAGE ---------- */

section.texte-image .image{
  object-fit: cover;
  border-radius: 20px;
  height: auto;
  width: 100%;
}

section.texte-image hr{
  background-color: var(--color);
  color: var(--color);
  border: none;
  margin: 0;
}

section.texte-image .content{
  display: flex;
  gap: 24px;
  flex-direction: column;
  padding-right: 48px;
}

section.texte-image .content h3{
  flex-grow: 1;
}
@media (max-width: 820px){
  section.texte-image .image{
    margin-bottom: var(--gap);
    height: auto;
  }
}

@media (min-width: 821px){
  section.texte-image .image{
    border-radius: 32px;
    grid-column: 1 / span 5;
  }
  section.texte-image .content{
    grid-column: 9 / span 7;
  }
  section.texte-image > .container > hr{
    grid-column: 8;
  }
}

/* ---------- EQUIPE ---------- */

section.equipe .membre{
  display: flex;
  align-items: start;
  flex-direction: column;
  padding-top: calc( var(--gap) * 2 );
}

section.equipe .membre:nth-of-type(1),
section.equipe .membre:nth-of-type(2){
  padding-top: 0;
}

section.equipe hr{
  background-color: var(--color);
  border: none;
  width: 100%;
  margin: 0;
}

section.equipe .membre .photo{
  border-radius: var(--image-border-radius);
  aspect-ratio: .75;
  object-fit: cover;
  margin-bottom: var(--gap);
  width: 100%;
}

section.equipe .membre .nom,
section.equipe .membre .poste{
  margin-bottom: 8px;
}

section.equipe .membre .telephone{
  text-decoration: none;
}

section.equipe .membre .courriel{
  hyphens: auto;
}

section.equipe .membre hr{
  background-color: transparent;
  color: transparent;
  flex-grow: 1;
  min-height: 40px;
}

@media (min-width: 821px){

  section.equipe .surtitre{
    padding-bottom: calc( var(--gap) * 2 );
    grid-column: 1 / span 15;
  }

  section.equipe .membre{
    grid-column-end: span 3;
    padding-top: calc( var(--gap) * 2 );
  }

  section.equipe .membre:nth-of-type(3),
  section.equipe .membre:nth-of-type(4){
    padding-top: 0;
  }

  section.equipe .membre:nth-of-type(4n) + hr{
    display: none;
  }

}

@media (max-width: 820px){

  section.equipe .surtitre{
    padding-bottom: var(--gap);
    grid-column: 1 / span 3;
  }
  
  section.equipe .container{
    display: grid;
    grid-template-columns: 1fr var(--border-width) 1fr;
    column-gap: calc( var(--gap) / 3 );
  }

  section.equipe .membre{
    padding-top: var(--gap);
  }

  section.equipe .membre:nth-of-type(2n + 1) + hr{
    display: block;
  }

  section.equipe .membre hr{
    min-height: 16px;;
  }
    
}

/* ---------- TIROIRS ---------- */

section.tiroirs .tabs{
  display: flex;
  flex-direction: column;
}

section.tiroirs .tabs .tab{
  display: flex;
  border-bottom: solid var(--border-width) var(--color);
  flex-direction: column;
}

section.tiroirs .tabs .tab > input{
  position: absolute;
  opacity: 0;
  z-index: -1;
}

section.tiroirs .tabs .tab > label{
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gap) 0;
}

section.tiroirs .tabs .tab > label .tab-icon{
  margin-left: var(--gap);
  min-width: 22px;
  transform: rotate(0deg);
  transition: transform 500ms;
}

section.tiroirs .tabs .tab > label .tab-icon path{
  fill: var(--color);
}

section.tiroirs .tabs .tab .tab-content{
  display: grid;
  grid-template-rows: 0fr;
  padding-bottom: 0;
  transition: 500ms;
}

section.tiroirs .tabs .tab .tab-content .texte{
  max-width: 820px;
  overflow: hidden;
}

section.tiroirs .tabs .tab > input:checked ~ .tab-content{
  grid-template-rows: 1fr;
  padding: var(--gap) 0 calc( var(--gap) * 2 );
}

section.tiroirs .tabs .tab > input:checked + label .tab-icon{
  transform: rotate(180deg);
}

section.tiroirs .tabs .tab > input:not(:checked) + label:hover .tab-icon{
  transform: rotate(90deg);
}

@media (min-width: 821px){
  section.tiroirs .surtitre{
    grid-column: 1 / span 3;
  }
  
  section.tiroirs .surtitre span{
    position: sticky;
    top: var(--gap);
    bottom: var(--gap);
  }
  
  section.tiroirs .tabs{
    grid-column: 5 / span 11;
  }

  section.tiroirs .tabs .tab:first-child > label{
    padding-top: 0;
  }
}

@media (max-width: 820px){
  section.tiroirs .surtitre{
    margin-bottom: var(--gap);
  }
}

/* ---------- FICHIERS ---------- */


section.fichiers hr{
  border: none;
  background-color: var(--color);
  height: auto;
  margin: 0;
  width: 100%;
}

section.fichiers .tile {
  display: grid;
  text-decoration: none;;
  overflow: hidden;  /* NEW */
  min-width: 0;
}

section.fichiers .tile > [aria-hidden="true"]{
  --color: var(--inverted-color);
  --background-color: var(--inverted-background-color);
  color: var(--inverted-color);
  background-color: var(--inverted-background-color);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 500ms;
}

section.fichiers .tile:hover > [aria-hidden="true"]{
  clip-path: inset(0 0 0 0);
}

section.fichiers .tile > span{
  display: grid;
  grid-template: 1fr auto / 1fr auto;
  gap: calc( var(--gap) * .8 ) var(--gap);
  background-color: var(--background-color);
  grid-row: 1;
  grid-column: 1;
  padding: var(--gap);
}

section.fichiers .tile .filetype{
  align-self: start;
  justify-self: end;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 50px;
  border: solid var(--color) var(--border-width);  
}


section.fichiers .tile .texte{
  align-self: end;
}

section.fichiers .tile .download-arrow :is(path, rect){
  fill: var(--color);
}

@media (min-width: 821px){

  section.fichiers .container > .surtitre{
    grid-column: 1 / span 3;
  }

  section.fichiers .container > .surtitre span{
    position: sticky;
    top: var(--gap);
    bottom: var(--gap);
  }

  section.fichiers .container > .tiles{
    display: grid;
    border-left: solid var(--border-width) var(--color);
    grid-template-columns: minmax(0, 1fr) var(--border-width) minmax(0, 1fr) var(--border-width) minmax(0, 1fr) var(--border-width)  minmax(0, 1fr) var(--border-width)  minmax(0, 1fr) var(--border-width) minmax(0, 1fr);
    grid-column: 4 / span 12;
    row-gap: 96px;
    margin-top: calc( var(--gap) * -1 );
    margin-right: calc( var(--gap) * -1 );
    min-height: 0;  /* NEW */
    min-width: 0;
  }


  section.fichiers .tile {
    grid-column: span 5;
    min-height: 290px;
  }

  section.fichiers .tile:nth-of-type(even) + hr{
    display: none;
  }

}

@media (max-width: 820px){

  section.fichiers .container > .surtitre{
    padding-bottom: 16px;
    border-bottom: solid var(--border-width) var(--color);
  }
  
  section.fichiers hr{
    height: var(--border-width);
  }

  section.fichiers .tile{
    margin: 0 calc( var(--gap) / -3 );
  }

  section.fichiers .tile > span{
    padding: 16px calc( var(--gap) / 3 );
  }
}


/* ---------- IMAGE PLEINE LARGEUR ---------- */

section.imagePleineLargeur img{
  margin-top: calc( var(--gap) * 2 );
  border-radius: 32px;
  width: 100%;
}

/* ---------- MULTI-COLONNES ---------- */


section.multicol .titre-section{
  margin-bottom: var(--gap);
}

section.multicol hr{
  background-color: var(--color);
  border: none;
  margin: 0;
  width: 100%;
}

section.multicol .colonne .bouton{
  margin-top: var(--gap);
}

@media (min-width: 821px){
  section.multicol .container{
    row-gap: var(--gap);
  }
  
  section.multicol .surtitre,
  section.multicol .titre-section{
    grid-column: 1 / span 15;
  }

  section.multicol .surtitre{
    margin-bottom: calc( var(--gap) * 4 );
  }

  section.multicol .colonne{
    min-height: 270px;
    grid-column-end: span 3;
  }

  section.multicol .colonne .surtitre{
    margin-bottom: var(--gap);
  }

  section.multicol hr:nth-of-type(3n + 4){
    grid-column-start: 4;
  }

  section.multicol hr:last-child{
    display: none;
  }
}

@media (max-width: 820px){
  section.multicol .container > .surtitre{
    margin-bottom: calc( var(--gap) * 2 );
  }

  section.multicol .colonne{
    border-top: solid var(--border-width) var(--color);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: calc( var(--gap) / 3 * 2 ) 0;
  }
  section.multicol .colonne .texte,
  section.multicol .colonne .bouton{
    grid-column: 2;
  }
  section.multicol .colonne:has(.texte):not(:has(.surtitre)) :is(.texte, .bouton),
  section.multicol .colonne:has(.surtitre):not(:has(.texte)) :is(.surtitre, .bouton){
    grid-column: 1 / span 2;
  }
  section.multicol .colonne .bouton{
    margin-top: calc( var(--gap) / 3 );
  }
}

/* ---------- CHIFFRE IMPORTANT ---------- */

section.chiffreImportant .surtitre{
  margin-bottom: calc( var(--gap) * 5 );
}

section.chiffreImportant .texte{
  font-weight: 500;
  font-size: 200px;
  line-height: 200px;
}

@media (max-width: 820px){
  section.chiffreImportant .texte{
    font-size: 80px;
    line-height: 80px;
  }
}

/* ---------- MAILLAGE ---------- */

section.maillage .container{
  padding-top: calc( var(--gap) * 2 );
  padding-bottom: calc( var(--gap) * 2 );
  row-gap: calc( var(--gap) / 3 );
}

section.maillage .maille{
  border-radius: var(--gap);
  background-color: var(--color);
  color: var(--background-color);
  padding: var(--gap);
  text-decoration: none;
  display: grid;
  grid-template-columns: 0 1fr calc(64px + var(--gap));
  overflow: hidden;
  transition: 500ms;
}

section.maillage .maille:hover{
  grid-template-columns: calc(64px + var(--gap)) 1fr 0;
}

section.maillage .maille .arrow,
section.maillage .maille .titre{
  align-self: center;
}

section.maillage .maille .texte{
  grid-row: 2;
  grid-column: 1 / span 3;
  align-self: end;
}

section.maillage .maille .arrow{
  transition: 500ms;
}

section.maillage .maille:not(:hover) .arrow:first-child{
  translate: -150%;
}

section.maillage .maille .arrow:last-child{
  justify-self: end;
  grid-row: 1;
  grid-column: 3;
}

section.maillage .maille:hover .arrow:last-child{
  translate: 150%;
}

section.maillage .maille[target="_blank"] .arrow{
  transform: rotate(-45deg);
}

section.maillage .maille .arrow path{
  fill: var(--background-color)
}


@media (min-width: 821px){
  section.maillage .container{
    padding: var(--gap);
  }

  section.maillage .maille{
    grid-column-end: span 7;
  }

  section.maillage .maille .texte{
    margin-top: calc( var(--gap) * 2.5 );
  }

  section.maillage .maille:nth-child(2){
    margin-left: -11px;
    grid-column-start: 9;
  }
  
  section.maillage .maille:first-child:not(:only-child){
    margin-right: -11px;
  }
  
  section.maillage .maille:only-child{
    grid-column-end: span 15;
  }
}

@media (max-width: 820px){
  section.maillage .maille{
    row-gap: calc( var(--gap) / 3 );
    padding: var(--gap) calc(var(--gap) / 3 * 2);
    grid-template-columns: 0 1fr calc(48px + var(--gap));
  }
  section.maillage .maille:hover{
    grid-template-columns: calc(48px + var(--gap)) 1fr 0;
  }
  section.maillage .maille .titre{
    grid-row: 1;
    grid-column: 1 / span 3;
  }
  section.maillage .maille .arrow{
    height: 48px;
    width: 48px;
    grid-row: 3 !important;
  }
}

/* ---------- SUJETS ---------- */

section.sujets > .container{
  row-gap: calc( var(--gap) * 2);
}

section.sujets .liens .lien{
  display: grid;;
  text-decoration: none;
  border-bottom: solid var(--border-width) var(--color);
  overflow: hidden;
}


section.sujets .liens .lien:first-child{
  border-top: solid var(--border-width) var(--color);
}

section.sujets .liens .lien[target="_blank"] .arrow{
  rotate: -45deg;
}

section.sujets .liens .lien .arrow path{
  fill: var(--color);
}

section.sujets .liens .lien > [aria-hidden="true"]{
  background-color: var(--inverted-background-color);
  color: var(--inverted-color);
}

section.sujets .lien > [aria-hidden="true"]{
  --color: var(--inverted-color);
  --background-color: var(--inverted-background-color);
  color: var(--inverted-color);
  background-color: var(--inverted-background-color);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 500ms;
}

section.sujets .lien:hover > [aria-hidden="true"]{
  clip-path: inset(0 0 0 0);
}

section.sujets .liens .lien .arrow:first-child{
  padding: 0 var(--gap);
  translate: -100%;
  transition: 500ms;
}

section.sujets .liens .lien:hover .arrow:first-child{
  translate: 0%;
}

section.sujets .liens .lien .arrow:last-child{
  padding-left: calc(var(--gap) * 2);
}

section.sujets .liens .lien > span{
  display: grid;
  align-items: center;
  grid-row: 1;
  grid-column: 1;
  padding: var(--gap) 0;
  grid-template-columns: 0 1fr calc(64px + var(--gap) * 2);
  transition: 500ms;
}

section.sujets .liens .lien .titre{
  padding-right: var(--gap);
}

section.sujets .liens .lien > span > *{
  overflow: hidden;
  min-width: 0;
}

section.sujets .liens .lien:hover > span{
  grid-template-columns: calc(64px + var(--gap) * 2) 1fr 0;
}

@media (min-width: 821px){
  section.sujets .surtitre{
    margin-bottom: calc( var(--gap) * 5);
    grid-column: 1 / span 15;
  }

  section.sujets .texte{
    grid-column: 1 / span 7;
  }

  section.sujets .liens{
    grid-column: 9 / span 7;
  }
}

@media (max-width: 820px){
  section.sujets .liens .lien > span{
    grid-template-columns: 0 1fr calc(48px + var(--gap) * 2);
    padding: var(--gap) calc( var(--gap) / 3 );
  }
  section.sujets .liens .lien:hover > span{
    grid-template-columns: calc(48px + var(--gap) * 2) 1fr 0;
  }
  section.sujets .liens .lien .arrow{
    width: 48px;
    height: 48px;
  }
  section.sujets .liens .lien .arrow:first-child{
    padding: 0 calc( var(--gap) * 2) 0 0;
  }
}

/* ---------- GRILLE DE LIENS ---------- */

section.grilleDeLiens .container{
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}


section.grilleDeLiens .lien{
  display: grid;
  grid-template-rows: 1fr;
  place-items: stretch;
  grid-column: span 3;
  text-decoration: none;
  margin: 0 calc( var(--border-width) * -1 );
}

section.grilleDeLiens .lien > span{
  justify-self: stretch;
  display: grid;
  grid-template-columns: 0px 1fr calc(64px + var(--gap));
  overflow: hidden;
  row-gap: calc( var(--gap) * 5);
  transition: 500ms;
  text-decoration: none;;
  align-items: center;
  padding: var(--gap);
  grid-column: 1;
  grid-row: 1;
}

section.grilleDeLiens .lien > span[aria-hidden="true"]{
  --color: var(--inverted-color);
  --background-color: var(--inverted-background-color);
  color: var(--inverted-color);
  background-color: var(--inverted-background-color);
  clip-path: inset(0 100% 0 0);
  transition: 500ms;
}

section.grilleDeLiens .lien:hover > [aria-hidden="true"]{
  clip-path: inset(0 0 0 0);
}

section.grilleDeLiens .lien .arrow path{
  fill: var(--color);
}

section.grilleDeLiens .lien:hover > span{
  grid-template-columns: calc(64px + var(--gap)) 1fr 0px;
}

section.grilleDeLiens .lien .titre{
  padding-right: var(--gap);
}

section.grilleDeLiens .lien .arrow:last-child{
  padding-left: var(--gap);
}

section.grilleDeLiens .lien .arrow:first-child{
  translate: -150%;
  grid-row: 2;
  grid-column: 1;
  transition: 500ms;
}

section.grilleDeLiens .lien:hover .arrow:first-child{
  translate: 0%;
}

section.grilleDeLiens .lien .surtitre{
  grid-row: 1;
  grid-column: span 3;
}

section.grilleDeLiens hr{
  background-color: var(--color);
  border: none;
  margin: var(--gap) 0;
}

section.grilleDeLiens hr:nth-of-type(4n){
  display: none;
}

@media (max-width: 1300px) and (min-width: 821px){
  section.grilleDeLiens .lien{
    grid-column: span 7;
  }

  section.grilleDeLiens hr:nth-of-type(2n){
    display: none;
  }
}

@media (max-width: 820px){
  section.grilleDeLiens .lien{
    margin-bottom: calc(var(--border-width) * -1);
  }
  section.grilleDeLiens .lien > span{
    grid-template-columns: 0px 1fr calc(48px + var(--gap));
    row-gap: calc( var(--gap) * 2);
    padding: calc( var(--gap) / 3 * 2 ) calc( var(--gap) / 3 );
  }
  section.grilleDeLiens hr{
    display: block;
    height: var(--border-width);
    grid-column: span 3;
    margin: 0 calc( var(--gap) / 3 ) calc(var(--border-width) * -1);
  }
  section.grilleDeLiens .arrow{
    width: 48px;
    height: 48px;
  }
  section.grilleDeLiens .lien .titre{
    align-self: end;
  }
  section.grilleDeLiens hr:nth-of-type(4n){
    display: block;
  }

  section.grilleDeLiens .lien:hover > span{
    grid-template-columns: calc(48px + var(--gap)) 1fr 0px;
  }
}

/* ---------- LISTE À NUMÉROS ---------- */

section.listeANumeros > ol{
  row-gap: 80px;
  list-style-type: none;
  margin-bottom: 0;
  margin-top: 0;
}

section.listeANumeros > ol > li{
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}

section.listeANumeros > ol > li > sup{
  font-family: 'Panochiffre';
  font-size: 105px;
  font-size: 30cqw;
  margin-bottom: var(--gap);
}

section.listeANumeros > ol > li > div > :last-child{
  margin-bottom: 0;
}

@media (min-width: 821px){

  section.listeANumeros > ol > li{
    grid-column-end: span 3;
  }
  section.listeANumeros > ol > li > sup{
    font-size: 70cqw;
  }
  
  section.listeANumeros > ol > li:nth-of-type(4n + 2){
    grid-column-start: 5;
  }
  
  section.listeANumeros > ol > li:nth-of-type(4n + 3){
    grid-column-start: 9;
  }
  
  section.listeANumeros > ol > li:nth-of-type(4n + 4){
    grid-column-start: 13;
  }
}

@media (max-width: 820px){
  section.listeANumeros > .container{
    padding-right: calc( var(--gap) * 2 );
  }
}

/* ---------- SECTION FORMULAIRE ---------- */

@media (min-width: 821px){
  section.formulaire > .container > .texte{
    grid-column: 1 / span 5;
  }

  section.formulaire > .container > .fui-i{
    grid-column: 9 / span 7;
  }
  /* ---------- SECTION TEXTE ---------- */
  section.texte > .container > .texte{
    grid-column: 1 / span 9;
  }
}

@media (max-width: 820px){
  section.formulaire > .container{
    row-gap: var(--gap);
  }
}


/* ---------- BOUTON ---------- */

.bouton{
  --arrow-size: 60px;
}

.bouton .btn{
  align-items: stretch;
  border-radius: 50px;
  overflow: hidden;
  display: inline-grid;
  grid-template-columns: 0px 1fr var(--arrow-size);
  text-decoration: none;
  transition: 500ms;
}

.bouton .btn:hover{
  grid-template-columns: var(--arrow-size) 1fr 0px;
}

.bouton .bouton-label{
  font-size: 16px;
  line-height: 24px;
  padding: 13px 16px 13px 20px;
}

.bouton .bouton-arrow:first-child{
  margin-right: 2px;
}

.bouton .bouton-arrow:last-child{
  margin-left: 2px;
}

.bouton .btn > *{
  color: var(--background-color);
  background-color: var(--color);
}

.bouton .bouton-arrow{
  display: grid;
  place-items: center;
  overflow: hidden;
}

.bouton .bouton-arrow svg path{
  fill: var(--background-color);
}

.bouton .btn[target="_blank"] .bouton-arrow svg{
  transform: rotate(-45deg);
}

.bouton .btn.asset .bouton-arrow:first-child svg{
  margin-right: -3px;
}

.bouton .btn.asset .bouton-arrow:last-child svg{
  margin-left: -3px;
}

.bouton .btn.asset .bouton-arrow svg{
  transform: rotate(90deg);
}

@media (max-width: 820px){
  .bouton{
    --arrow-size: 45px;
  }
  .bouton .bouton-label{
    font-size: 14px;
    line-height: 20px;
    padding: 10px 10px 10px 20px;
  }
  .bouton .bouton-arrow svg{
    width: 20px;
    height: 20px;
  }
}

/* ---------- ACCUEIL ---------- */

.accueil-header{
  padding-bottom: var(--gap);
}

.accueil-header + section .container{
  padding-top: 0;
}

.accueil-header > *{
  box-sizing: border-box;
  width: 100%;
  padding: 0;
}

.accueil-header .logo-full-width{
  max-width: 1920px;
  height:auto;
  width: 100%;
  margin-bottom: var(--gap);
}

.accueil-header .container-heading{
  animation: accueilHeading 1s reverse ease-in-out;
  border: 0;
  margin: 0 calc( var(--gap) * -1 ) var(--gap);
  min-height: calc( var(--gap) * 9.5 );
  padding: 0;
  max-width: calc(1920px + var(--gap) * 2 );
  width: calc(100% + var(--gap) * 2);
  grid-template-columns: 0fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 0fr; /* 17 columns */
}

.accueil-header .container-heading h1{
  overflow: hidden;
  white-space: nowrap;
  grid-column: 3 / span 7;
}

.accueil-header .container-heading hr{
  display: block;
  border: none;
  width: 100%;
  margin: 0;
  background-color: var(--white);
}

.accueil-header .container-heading hr:nth-of-type(1){
  grid-column: 2;
}

.accueil-header .container-heading hr:nth-of-type(3){
  grid-column: 14;
}

.accueil-header .container-heading hr:nth-of-type(4){
  grid-column: 16;
}

.accueil-header .container-heading hr:nth-of-type(5){
  grid-column: 18;
}

section .hero-container{
  background-image: url(/assets/images/hero-bg.png);
  background-position: center;
  background-size: cover;
  border: none;
  border-radius: 32px;
  padding: 0;
  overflow: hidden;
}

#hero{
  display: block;
  width: 100%;
  aspect-ratio: 2.32;
  transform: scale(1.01);
}

.hero-container dotlottie-player{
  scale: 1.01;
}

@media(max-width: 820px){
  .accueil-header .container-heading{
    --gap: 8px;
    min-height: 100px;
  }
  .accueil-header .container-heading h1{
    grid-column: 3 / span 9;
    font-size: 14px;
    line-height: 16px;
  }
  .accueil-header .container-heading hr:nth-of-type(3){
    display: none;
  }
  #hero{
    margin: 0 -52.5%;
    width: 205%;
  }
}

@keyframes accueilHeading{
  from{
    padding-left: 0 !important;
    gap: var(--gap);
    grid-template-columns: 0fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 1fr var(--border-width) 0fr; /* 17 columns */
  }
  to{
    padding-left: var(--gap) !important;
    gap: 0;
    grid-template-columns: 0fr var(--border-width) 0fr var(--border-width) 0fr var(--border-width) 0fr var(--border-width) 0fr var(--border-width) 0fr var(--border-width) 0fr var(--border-width) 0fr var(--border-width) 0fr var(--border-width) 1fr; /* 17 columns */
  }
}

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

footer{
  padding-bottom: 0;;
}

footer .container{
  padding-bottom: var(--gap);
}

footer .coordonnes .courriel{
  padding-top: calc( var(--gap) / 2 );
}

footer .coordonnes .adresse{
  padding-top: calc( var(--gap) * 2 );
}

footer .newsletter h4{
  margin-bottom: var(--gap);
}

footer .newsletter .fui-i{
  --fui-field-gutter: 10px;
}

footer .socials ul{
  gap: calc( var(--gap) / 3 );
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

footer hr{
  display: none;
  margin: 0;
  border: none;
  width: 100%;
  background-color: var(--color);
}

footer .links{
  display: flex;
  flex-direction: column;
}

@media (max-width: 820px){
  footer .logo{
    grid-row: 1;
    grid-column: 1;
  }

  footer .lang-switcher{
    justify-self: end;
    grid-row: 1;
    grid-column: 2;
  }
  
  footer .newsletter{
    margin: 80px 0 48px;
    grid-row: 2;
    grid-column: 1 / span 2;
  }
  
  footer .coordonnes{
    grid-row: 3;
    grid-column: 1 / span 2;
  }
  
  footer .socials{
    margin: 48px 0;
    grid-row: 4;
    grid-column: 1 / span 2;
  }
  
  footer .links{
    grid-row: 5;
    grid-column: 1 / span 2;
  }
  
  footer .copyright{
    margin-top: 8px;
    grid-row: 6;
    grid-column: 1 / span 2;
  }
}

@media (min-width: 821px){
  footer .logo,
  footer .coordonnes,
  footer .copyright{
    grid-column: 1 / span 7;
  }

  footer .coordonnes{
    align-self: end;
  }

  footer .copyright{
    align-self: end;
  }

  footer hr{
    display: block;
    grid-row: 1 / span 3;
  }

  footer hr:nth-of-type(1){
    grid-column: 8;
  }

  footer .newsletter{
    grid-column: 9 / span 5;
    grid-row: 1 / span 2;
  }

  footer .links{
    align-self: end;
    grid-column: 9 / span 5;
    grid-row: 3;
  }

  footer hr:nth-of-type(2){
    grid-column: 14;
  }

  footer .lang-switcher{
    grid-row: 1;
  }

  footer .lang-switcher,
  footer .socials{
    grid-column: 15;
  }

  footer .socials{
    grid-row: 3;
  }

  footer .socials ul{
    flex-direction: column;
  }
}

/* ---------- FORMS ---------- */


.fui-i{
  --fui-color: var(--color);
  --fui-font: inherit;

  --fui-primary-color: var(--color);
  --fui-primary-color-hover: var(--background-color);

  --fui-border: 0 solid transparent;
  --fui-border-radius: 0;
  --fui-border-color: color-mix(in srgb, var(--color), transparent 90%);
  --fui-focus-border-color: var(--color);
  --fui-focus-shadow: none;
  --fui-field-gutter: 30px;

  --fui-label-font-size: 18px;
  --fui-input-font-size: 18px;
  --fui-check-font-size: 18px;

  --fui-btn-font-size: 1rem;
  --fui-btn-padding: 0;
  --fui-btn-border: none;
  
  --fui-submit-btn-color: var(--background-color);
  --fui-submit-btn-bg-color: transparent;


  --fui-input-background-color: transparent;
  --fui-input-padding: 0 0 calc( var(--gap) / 3 );

  --fui-label-margin: 0;

  --fui-instructions-color: var(--color);
  --fui-instructions-font-size: 10px;
  
  --fui-select-bg-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.38399 7.40598L11.9995 18.0215L22.615 7.40598L21.1995 5.99048L11.9995 15.1905L2.79949 5.99048L1.38399 7.40598Z' fill='%230F0F0F'/%3E%3C/svg%3E%0A");
  
}

footer .fui-i{
  --color: var(--white;)
}

#search .field,
.fui-i .fui-field .fui-field-container{
  position: relative;
}

#search .field label,
.fui-i .fui-field .fui-field-container > .fui-label{
  color: color-mix(in srgb, var(--color), transparent 50%);
  position: relative;
  top: 0;
  left: 0;
  transform-origin: left center;
  transform: translateY(100%) scale(1);
  transition: 500ms;
}

.fui-i .fui-field .fui-field-container:has( textarea:not(:focus):placeholder-shown ) > .fui-label{
  top: 8px;
  left: 6px;
  transform: translateY(100%) scale(1);
}

#search .field:has( input:focus, input:not(:placeholder-shown) ) label,
.fui-i .fui-field .fui-field-container:has( input.fui-input:focus, input.fui-input:not(:placeholder-shown) ) > .fui-label,
.fui-i .fui-field .fui-field-container:has( textarea.fui-input:focus, textarea.fui-input:not(:placeholder-shown) ) > .fui-label,
.fui-i .fui-field .fui-field-container:not(:has( input, textarea )) > .fui-label {
  color: var(--color);
  transform: translateY(0%) scale(.5);
}

.fui-i .fui-select, .fui-i .fui-input{
  border-width: 0 0 var(--border-width) 0; 
  color: var(--color);
}

.fui-i textarea.fui-input{
  --fui-input-padding: 4px;
  border-radius: 4px;
  border-width: var(--border-width);
  min-height: calc(5em * var(--fui-input-line-height) + ( var(--fui-input-padding) * 2) + ( var(--border-width) * 2) );
}

.fui-i .fui-field.fui-type-agree .fui-checkbox .fui-checkbox-label{
  color: var(--color);
}

.fui-i .fui-field.fui-type-agree .fui-checkbox .fui-checkbox-label::before{
  background: transparent;
  box-shadow: none;
  border: solid 1px var(--color);
}

.fui-i .fui-field.fui-type-agree .fui-checkbox:has(input:checked) .fui-checkbox-label::before{
  border: solid 5px var(--color);
}

#search input{
  background-color: transparent;
  border-radius: 0;
  color: var(--color);
  padding: 0 0 calc( var(--gap) / 3 );
  border: none;
  outline: none;
  box-shadow: none;
  border-bottom: solid color-mix(in srgb, var(--color), transparent 75%) var(--border-width);
}

#search input:focus{
  background-color: transparent;
  border-radius: 0;
  border-bottom: solid color-mix(in srgb, var(--color), transparent 0%) var(--border-width);
}

.texte ol,
.texte ul{
  padding-left: 20px;
}

.texte ol li,
.texte ul li{
  margin-bottom: 8px;
}

.texte figure{
  margin-left: 0;
  margin-right: 0;
}

.texte img{
  border-radius: var(--image-border-radius);
  max-width: 100%;
  height: auto;
}

.lang-switcher{
  text-transform: capitalize;
}

/*
#search input,
.fui-i .fui-field .fui-field-container input.fui-input{
  background-color: transparent;
  border-radius: 0;
  color: var(--color);
  padding: .25rem 0;
  border: none;
  outline: none;
  box-shadow: none;
  border-bottom: solid color-mix(in srgb, var(--color), transparent 50%) 1px;
}

#search input:focus,
.fui-i .fui-field .fui-field-container input.fui-input:focus{
  background-color: transparent;
  border-radius: 0;
  border-bottom: solid color-mix(in srgb, var(--color), transparent 0%) 1px;
}


.fui-i .fui-submit.btn{
  padding: 0;
  background-color: transparent !important;
  border: none;
}

/*
.fui-i .fui-submit::before,
.fui-i .fui-submit::after{
  content: "";
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjE2OTMgMTFIMFY5SDE2LjE2OTNMOC41NzQzMyAxLjQwNUwxMCAwTDIwIDEwTDEwIDIwTDguNTc0MzMgMTguNTk1TDE2LjE2OTMgMTFaIiBmaWxsPSIjRjJGMkYyIi8+Cjwvc3ZnPgo=);
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

footer .fui-i .fui-submit::before,
footer .fui-i .fui-submit::after{
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjgwMiAxMy44NjA3TDE4LjQ4NzggMTMuMjEzMUgxNy41NDQ2TDAuMzc0MDIzIDEzLjIxMzFMMC4zNzQwMjMgMTAuNzg2NkwxNy41NDQ2IDEwLjc4NjZIMTguNDg3OEwxNy44MDIgMTAuMTM4OUwxMC4xNTg4IDIuOTIwMzFMMTEuOTk5IDEuMTgyMzFMMjMuNDUyOSAxMS45OTk4TDExLjk5OSAyMi44MTc0TDEwLjE1ODggMjEuMDc5NEwxNy44MDIgMTMuODYwN1oiIGZpbGw9IiMwRjBGMEYiIHN0cm9rZT0iI0YyRjJGMiIgc3Ryb2tlLXdpZHRoPSIwLjc1Ii8+Cjwvc3ZnPgo=);
}

.fui-i .fui-submit::before{
  background-position: calc(100% - 16px) center;
  border-right: solid var(--border-width) var(--background-color);
  margin-right: 16px;
}

.fui-i .fui-submit::after{
  background-position: 16px center;
  border-left: solid var(--border-width) var(--background-color);
  margin-left: 16px;
}

.fui-i .fui-submit{
  border: none;
  border-radius: 100px;
  display: grid;
  font-size: 1rem;
  grid-template-columns: 0 auto 60px;
  grid-template-rows: 50px;
  padding: 0;
  align-items: center;
  transition: 500ms;
}


.fui-i .fui-submit:hover{
  background-color: var(--color);
  color: var(--background-color);
  grid-template-columns: 60px auto 0;
}
  */