:root {
  --main-color: #A595FF;
  --main-color-sub: #8540fc;

  --black-color: #06050c;
  --second-color: #A0F0FF;

  --swiper-pagination-bullet-width : 12px;
  --swiper-pagination-bullet-height : 12px;
--green : #17C3B2;
--red : #fc7f9c;

}

form { transition: opacity 0.25s;}
form.loading { pointer-events: none; opacity: 0.5;}
form.loading .buttons a {  pointer-events: none; }
form.loading .buttons a.submitter {  color:transparent; }
form.loading .buttons a.submitter:before { width: 100%; transition: opacity 0.2s; background-image: url(../images/loader.gif); background-position: center center; background-repeat: no-repeat; background-size: 2.4em; opacity: 1;}


form p.legende { opacity: 0.6; margin-top: 3rem;}

.error_form { color: #fc7f9c; font-weight: 600; font-size: 1rem; margin: 1rem 0;}



@font-face {
    font-family: 'Maison Neue';
    src: url('../fonts/MaisonNeue-Bold.woff2') format('woff2'),
        url('../fonts/MaisonNeue-Bold.woff') format('woff');
    font-weight: 700;
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Maison Neue';
    src: url('../fonts/MaisonNeue-Medium.woff2') format('woff2'),
        url('../fonts/MaisonNeue-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Maison Neue';
    src: url('../fonts/MaisonNeue-Light.woff2') format('woff2'),
        url('../fonts/MaisonNeue-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

#content { padding-top: 2rem;}
a { cursor: pointer; -moz-user-drag: none; }
#header { position: absolute; top: 0; left: 0; width: 100%; font-size: 0.72rem; }
#header .logo { font-family: "fatfrank", sans-serif; font-weight: 400; font-size: 1.3rem; display: block; color: #FFF; text-decoration: none; white-space: nowrap; letter-spacing: 0.045em;}

.center { margin-left: auto; margin-right: auto; max-width: 1200px;}
.center.large {   max-width: 1640px; }


#header .center { display: flex; gap:1rem; align-items: center;}
#header menu a { color: #FFF; text-decoration: none;}
#header menu { margin: 0; padding: 0; display: flex; gap:0; margin-left: auto; position: relative; line-height: 2.4em;height: 2.4em; transition: opacity 0.2s;}
#header menu a { position: relative; z-index: 2; padding: 0 1em; border-radius: 0; }
#header menu span.hover { position: absolute; width: 0; height: 100%; border-radius: 2em; background: #5718CE88;  backdrop-filter: blur(8px);  top: 0; transition: none; }
/* #header menu a:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0; margin: 0;  border-radius: 2em; } */
#header menu a:hover { z-index: 2;}

/* On n'active l'animation qu'après init */
#header menu.ready span.hover  {
  transition: left 0.35s ease, width 0.35s ease, opacity 0.35s;
}


#search-btn { width: 2.4em; height: 2.4em; margin-left: 0.6em; margin-right: -1rem;   margin-left: 0; box-sizing: border-box; padding: 0 !important; background: #A0F0FF no-repeat center center url(../images/search.svg); background-size: contain; transition: background-color 0.2s; border-radius: 100% !important; z-index: 10; user-select: none;}
.openSearch a#search-btn { /* background-color: #5718CE88; */ opacity: 1; pointer-events: fill; background-color: #06050c; background-image: url(../images/close-search.svg);}

.openSearch #header menu a { pointer-events: none; opacity: 0;}


.openSearch #header menu .hover { display:none; }




/* Optionnel : respect du reduced motion */
@media (prefers-reduced-motion: reduce) {
 #header menu.ready .hover { transition: none; }
}


html {
  scroll-behavior: smooth;
}

#footer { margin-top: 8rem; font-size: 0.75rem;} 
#footer p.menu { display: flex; gap: 1rem;}


a { color: #FFF; text-decoration: underline; text-underline-offset: 0.05em; text-decoration-thickness: 1px; text-decoration-color: #FFF0; transition: text-underline-offset 0.25s , text-decoration-color 0.25s;}
a:hover { text-decoration-color: #FFF; text-underline-offset: 0.25em; }




.text a {  text-decoration-color: #FFF; text-underline-offset: 0.22em; }
.text a:hover {  text-decoration-color: #FFF0; text-underline-offset: 0.05em; }




#main-form { margin: 3.5rem auto 0 auto; position: relative; z-index: 101; display: block; height: 2.8rem; padding: 0 0.3rem; box-sizing: border-box; background: #5718CE88; backdrop-filter: blur(18px); display: flex; 
  align-items: center; border-radius: 1.4rem; gap: 0; transition: border-radius 0.1s;}
#main-form p.buttons { margin: 0 0 0 auto; font-size: 0.75rem; word-wrap: normal; white-space: nowrap;}

#main-form.focus {  border-bottom-left-radius: 0;  border-bottom-right-radius: 0;}


#main-form input { flex: 1; background: transparent; color: #FFF; width: 5%;  font-size:0.9rem; font-family: 'Maison Neue' , Arial, Helvetica, sans-serif; padding: 0.6em 0.5em; border: none; outline: none;}
#main-form.full input { display: none;}
#main-form input::placeholder { color: #FFF4;}



    .checkEncart {text-align: left; font-size: 66%; line-height: 130%; margin: 1.5rem 0 2rem 0; font-weight: 300;}
.checkEncart .wrap { position: relative; margin: 0.2rem !important; padding-left: 1.5rem;  }

.checkEncart input { position: absolute; left: 0; top: -0.1em;}




.field:focus { border-color: #FFF;}
.field { background: transparent; transition: border-color 0.2s; margin: 0; color: #FFF; box-sizing: border-box; display: block; width: 100%; line-height: 120%; border: 2px solid #FFF7; border-radius: 1.5em;  font-size:0.8rem; font-family: 'Maison Neue' , Arial, Helvetica, sans-serif; padding: 0.8em 0.8em;  outline: none; }
.field::placeholder { color: #FFFA;}
textarea.field { height: 12em; resize: none;}

p.flex-form { display: flex; gap: 0.6rem;}
form p { margin: 0.6rem 0;}

#main-form.focus + #suggestions-content { pointer-events: fill; opacity: 1;}
#main-form.focus + #suggestions-content  #suggestions-list {  opacity: 1;}

#suggestions-content, #main-form , .center.small  { max-width: 1060px;}
#suggestions-content { position: relative; z-index: 502; pointer-events: none; margin: 0 auto 4rem auto;}

#suggestions-list {
      max-height: 16.5em;
    overflow: auto;
    border-radius: 0 0 1rem 1rem;
    padding: 0.8rem;
    display: flex;
    position: absolute; top: 100%; left: 0; width: 100%; box-sizing: border-box;
    background: #5718CE88; backdrop-filter: blur(18px); 
    gap: 2rem;
    border-top: 1px solid #FFF2;
     transition: opacity 0.1s; opacity: 0;
  }




#suggestions-list::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    background: #0000;
}

#suggestions-list::-webkit-scrollbar-thumb {
    background: #AB92F9;
    -webkit-border-radius: 1ex;
    border: 3px solid #7945E7;
    border-width: 2px 3px;
    opacity: 0.5;
}
#suggestions-list::-webkit-scrollbar-thumb:before { content: ""; background: #000; position: absolute;}

#suggestions-list::-webkit-scrollbar-corner {
    background: #0000;
}

  #suggestions-list h3 { font-size: 100%; margin: 0 0 0.4rem 0; font-weight: 700; font-size: 0.6rem; font-family: 'Maison Neue' , Arial, Helvetica, sans-serif;  }

#suggestions-list .column { width: 45%;  width: calc(50% - 20px);  padding: 0; margin: 0;}
#suggestions-list .column + .column { margin-left: auto;}

#suggestions-list .column:first-child ul {    }

#suggestions-list ul {
  list-style: none;
  margin: 0; padding: 0 0 0.2rem 0;

}


#suggestions-list ul li a.active { background: #FFFD;  border-radius: 0.2rem; color: #5718CE; opacity: 1; }
#suggestions-list ul li a.active mark {  color: #5718CE;  }
#suggestions-list ul li { margin: 0 0; page-break-inside: avoid;  line-height: 120%;  }


  #suggestions-list a {
    transition: all 0.2s;
    padding:0.15em 0.2em;
    color: inherit;
    text-decoration: none;
    color: #FFF;
    font-weight: 500;
    white-space: nowrap;
     overflow: hidden; 
     text-overflow: ellipsis;
     max-width: 100%;
     box-sizing: border-box;
     display: inline-block;
     margin: -0.2em;
    
     opacity: 0.5;
  }

  #suggestions-list a:hover {
    color: #FFF;
    opacity: 1;
  }
  mark {
    background: none;
    border-radius: 0;
    padding: 0;
    color:#FFF;
    transition: all 0.2s;
  }


.tag-container { display: flex;  max-width: 60%; max-width: calc(100% - 12rem); gap: 0; transition: width 0.2s;}

#main-form.full .tag-container { max-width: calc(100% - 6rem);}







.openSearch #sub-search { opacity: 1;  margin-right: 0; }
.openSearch #sub-search , .openSearch #sub-search a { pointer-events: fill;}

#sub-search , #sub-search a {  pointer-events: none;  }


#sub-search { position: absolute;  width: 80vw; width: calc(100vw - 7rem); right: 2.5rem; max-width: 32rem; opacity: 0; transition: opacity 0.1s ease, margin-right 0.2s ease; margin-right: -1.5rem;}



#sub-form { margin: 4rem auto 0 auto; position: relative; z-index: 101; display: block; height: 3em; padding: 0 0.3em; box-sizing: border-box; background: #5718CE88; backdrop-filter: blur(18px); display: flex; 
  align-items: center; border-radius: 1.5em; gap: 0; transition: border-radius 0.1s;}
#sub-form p.buttons { margin: 0 0 0 auto; font-size: 0.8em; word-wrap: normal; white-space: nowrap;}

#sub-form.focus {  border-bottom-left-radius: 0;  border-bottom-right-radius: 0;}


#sub-form input { flex: 1; background: transparent; color: #FFF; width: 5%;  font-size:0.9em; font-family: 'Maison Neue' , Arial, Helvetica, sans-serif; padding: 0.6em 0.5em; border: none; outline: none;}
#sub-form.full input { display: none;}
#sub-form input::placeholder { color: #FFF4;}


#sub-form.focus + #sub-suggestions-content { pointer-events: fill; opacity: 1;}
#sub-form.focus + #sub-suggestions-content  #sub-suggestions-list {  opacity: 1;}

#sub-suggestions-content, #sub-form , .center.small  { max-width: 1060px;}
#sub-suggestions-content { position: relative; z-index: 502; pointer-events: none; margin: 0 auto 4rem auto;}

#sub-suggestions-list {
    max-height: 19.2em;
    overflow: auto;
    border-radius: 0 0 1rem 1rem;
    padding: 0.8rem;
    display: flex;
    position: absolute; top: 100%; left: 0; width: 100%; box-sizing: border-box;
    background: #5718CE88; backdrop-filter: blur(18px); 
    gap: 2rem;
    border-top: 1px solid #FFF2;
     transition: opacity 0.1s; opacity: 0;
  }




#sub-suggestions-list::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    background: #0000;
}

#sub-suggestions-list::-webkit-scrollbar-thumb {
    background: #AB92F9;
    -webkit-border-radius: 1ex;
    border: 3px solid #7945E7;
    border-width: 2px 3px;
    opacity: 0.5;
}
#sub-suggestions-list::-webkit-scrollbar-thumb:before { content: ""; background: #000; position: absolute;}

#sub-suggestions-list::-webkit-scrollbar-corner {
    background: #0000;
}

  #sub-suggestions-list h3 { font-size: 100%; margin: 0 0 0.4rem 0; font-weight: 700; font-size: 0.6rem; font-family: 'Maison Neue' , Arial, Helvetica, sans-serif;  }

#sub-suggestions-list .column { width: 45%; width: calc(50% - 20px); padding: 0; margin: 0;}
#sub-suggestions-list .column + .column { margin-left: auto;}


#sub-suggestions-list .column:first-child ul {    }

#sub-suggestions-list ul {
  list-style: none;
  margin: 0; padding: 0 0 0.2rem 0;

}


#sub-suggestions-list ul li a.active { background: #FFFD;  border-radius: 0.2rem; color: #5718CE; opacity: 1; }
#sub-suggestions-list ul li a.active mark {  color: #5718CE;  }
#sub-suggestions-list ul li { margin: 0 0; page-break-inside: avoid; line-height: 120%; }


  #sub-suggestions-list a {
    transition: all 0.2s;
    padding: 0.15em 0.2em;
    color: inherit;
    text-decoration: none;
    color: #FFF;
    font-weight: 500;
    white-space: nowrap;
     overflow: hidden; 
     text-overflow: ellipsis;
     max-width: 100%;
     box-sizing: border-box;
     display: inline-block;
     margin: 0 0 0 -0.2em;
     opacity: 0.5;
     margin: -0.2em;
  }

  #sub-suggestions-list a:hover {
    color: #FFF;
    opacity: 1;
  }



  #sub-form span.tag + span.tag:before {  width: 1.3rem;}
#sub-form span.tag + span.tag { margin-left: 1.3rem;}
#sub-form.full .tag-container { max-width: calc(100% - 6.5em);}

#sub-form span.tag { font-size: 0.9em; margin-left: 0.2em; }


.tag-container { display: flex;  max-width: 60%; max-width: calc(100% - 13em); gap: 0; transition: width 0.2s;}

#main-form.full .tag-container { max-width: calc(100% - 6rem);}


















form span.tag { font-size: 0.9em;  text-align: center;  border: 1px solid #A0F0FF; margin-left: 0.3rem; display: flex; white-space: nowrap; font-weight: 300;
  position: relative; padding: 0 1.65em 0 0.6em; line-height: 1em; height: 2em; align-items: center; line-height: 1em; border-radius: 1rem; min-width: 4.5em; box-sizing: border-box; font-weight: 500; color: #A0F0FF; font-family: "fatfrank", sans-serif;}
form span.tag button { position: absolute; right: 0; width: 0.8em; height: 0.8em; top: 50%; margin: -0.4em 0.5em; border-radius: 100%; border: none; cursor: pointer; background: #A0F0FF00; transition: background-color 0.2s; font-size: 1em; }



form.nb_2 span.tag { max-width: 20em; }
form.nb_3 span.tag { max-width: 18em; }
form.nb_4 span.tag { max-width: 14em; }
form.nb_5 span.tag { max-width: 12em;  }

form span.tag span { text-overflow: ellipsis; overflow: hidden; display: block; white-space: nowrap;
  overflow: hidden; cursor: default; user-select: none; }



form span.tag button:hover { background: #A0F0FF; color: #06050c;}
form span.tag button:before {  content: ""; transition: background-color 0.2s;  background: #A0F0FF; mask: url(../images/cross.svg?v=2) no-repeat center center; mask-size: contain; font-weight: 500; position: absolute; top: 0; left: 0; margin: 0; width: 100%; height: 100%; border-radius: 100%; }
form span.tag button:hover:before { background: #000; }

form span.tag button:after {  content: "";  position: absolute;  top: 50%; left: 50%; margin: -0.8em; width: 1.6em; height: 1.6em; border-radius: 100%; }


form span.tag + span.tag:before { content: "VS"; position: absolute; right: 100%; width: 1.6rem; text-align: center; color: #FFF4; font-size: 66%; font-family: 'Maison Neue', sans-serif;}
form span.tag + span.tag { margin-left: 1.6rem;}



.st0 {
    fill: none;
    stroke: #ffffff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 0.2pt;
    opacity: 0.11;
}

canvas {
    display: block;
}

#blob {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 0;
    z-index: -1;
    transform: translateY(-50%);

}

#background {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    pointer-events: none;
    opacity: 0;
   background: no-repeat center top url(../images/topo-line.svg);
    background-size: cover; 
}



.category + p.buttons { margin-top: -2rem; margin-bottom: 3.5rem;}

.background svg {
    height: 100%;
}


#tooltip {
  position: fixed;
  padding: 0.5rem;
  min-width: 100px;
  background: #06050c;
  background: #06050cbb;
  backdrop-filter: blur(8px);
  color: #FFF;
  border-radius: 8px;
  font-size: 0.55rem;
  line-height: 130%;
  z-index: 9999;
  pointer-events: none; /* important pour ne pas bloquer la souris */
  display: none;
   color: #FFFD;
   font-weight: 300;
   opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  box-sizing: border-box;

  /* au départ invisible */
  display: none;
  /* white-space: nowrap; */
}


#header .center { position: relative;}
div.ariane {  height: 0; position: absolute; left: 0; top: 100%; margin-top: 0.5rem; z-index: 3; font-size: 0.6rem; color: #FFF; font-weight: 300; line-height: 140%;}
div.ariane p { position: absolute;}
div.ariane { color: #FFF8;}

.secteur p.small { opacity: 1; max-width: 50rem; font-size: 0.6rem; font-size: calc(0.4rem + 5px);  }

.filet a { text-decoration: none;}

p.small { font-size: 0.6rem; font-weight: 300; line-height: 140%;}
p.small a { white-space: nowrap;}
#tooltip.show {
  display: block;
  opacity: 1;
  transform: scale(1);
}




#tooltip .title { display: block; font-weight: 500; margin-top: 0.1em; font-size: 200%; line-height: 120%;  color: #FFF; line-height: 120%;}
#tooltip.warning { white-space: nowrap;   font-size: 0.5rem; }

html, body {margin: 0;  font-size: 25px; word-break: break-word;  -webkit-text-size-adjust: 100%;text-size-adjust: 100%;  }

html, body, input {     font-family: "Maison Neue", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:"wdth" 100; 
    color: #FFF;

}


strong { font-weight: bold;}





body { background:#956BFE; background: linear-gradient(0deg, #A595FF 0%, #8540fc 100%); background-attachment: fixed; padding: 0; margin: 0;}




#custom_synt_form { display: none;}
#custom_synt p.buttons { font-size: 66%; align-items: center; justify-content: center; margin-bottom: 0;}
#custom_synt h2 { margin-top: 0;}



#custom_synt.static {  opacity: 1; position: static; height: auto; z-index: 2; background:none;  backdrop-filter: none;}
#custom_synt.static  .scroller {  max-height: 1000000px; margin: 2.5rem -1rem; overflow: visible; }

#custom_synt.overlay , #banner { user-select: none; background:#956BFE; display: flex;  position: fixed; top: 0; left: 0; z-index: 100000; height: 100%; width: 100%; background: #8F5AFD; background: #8F5AFDBB; background: linear-gradient(0deg, #A595FFCC 0%, #8540fcCC 100%); background-attachment: fixed; backdrop-filter: blur(18px); padding:0 2rem; box-sizing: border-box; margin: 0;}







body.openCustom { overflow: hidden; }
#custom_synt.overlay { display: none; opacity: 0;}

body.openCustom  #custom_synt.overlay { display: flex; opacity: 1;  
    animation: fadeInFromNone 0.2s ease-out;
}







@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}






#banner { display: flex;  z-index: 200000; justify-content: center; align-items: center; padding: 1rem;}
#banner .banner p {margin: 0.5rem 0; font-weight: 700; text-align: center;  font-size: 1.1rem;}
#banner .banner p + p { font-size: 0.75rem; font-weight: 300;}
#banner .banner a { color: #06050c; text-decoration-color: #06050c; white-space: nowrap;}
#banner .banner a:hover {  text-decoration-color: #06050c00;}
#banner .banner { margin: auto; padding: 2rem; background: #FFF; color: #06050c; max-width: 800px; border-radius: 1rem; padding: 1px;}
#banner .banner .wrap { margin: 2rem;}
#custom_synt .wrap { flex: 1; margin:auto 0; width: 100%; }
#custom_synt .wrap .center {  }
#custom_synt .scroller { overflow: auto;  max-height: 600px; max-height: calc(100vh - 14rem); margin: 2.5rem -1rem; -webkit-overflow-scrolling: touch; }
#custom_synt ul { list-style: none; padding: 0; margin: 0 1rem; columns: 6; }
#custom_synt ul a { display: inline-block; transition: color 0.25s, border-color 0.25s, background-color 0.25s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; box-sizing: border-box; padding: 0.5em 0.8em; text-decoration: none;border: 1px solid #FFF; border-color: #FFF3;  border-radius: 2em; line-height: 1em; margin:0; }
#custom_synt ul a:hover { border-color: #FFF; }

#custom_synt ul a.actif {  border-color: #FFF;  color: #5718CE; background: #FFF; }

#custom_synt p.buttons a { transition: background-color 0.2s, opacity 0.2s;}
#custom_synt p.buttons a.disabled { opacity: 0.3; pointer-events: none; background-color: #FFF;}


#custom_synt ul li { line-height: 1em; font-size: 75%; margin: 0;}
 h1 , h2 , h3 , h4 , h5 ,  .h1 , .h2 , .h3 , .h4 , .h5 { font-family: "fatfrank", sans-serif; font-weight: 400; font-style: normal; margin: 1.5em  0 1em 0; margin-bottom: calc(0.8em + 0.4rem);}

 .fat { font-family: "fatfrank", sans-serif; }
 .fat.proxima , .proxima { font-family: "proxima-nova",  sans-serif;  }

.al-c { text-align: center;}
.intro { font-size: 1.1rem; font-weight: 500; line-height: 125%;}
.intro em { font-weight: 300; font-style: normal; font-size: 75%; margin-top: 0.2em; line-height: 125%; display: block;}




 h1 + .intro ,  .h1 + .intro { margin: -1.5rem 0 3rem 0;}

 

.colorized { color: #A0F0FF;}

h1 , .h1 { font-size: 3.6rem; line-height: 100%; }
h2 , .h2 { font-size: 1.6rem; line-height: 115%;}
h3 , .h3 { font-size: 1.6rem; line-height: 115%;}
h4 , .h4 { font-size: 1.2rem; line-height: 120%;}
h5 , .h5 { font-size: 1rem; line-height: 125%;}



h1.filet , h2.filet , h3.filet, h4.filet, h5.filet, h6.filet {
   margin-left: 2.8em; position: relative;
}





h1.filet:before , h2.filet:before , h3.filet:before, h4.filet:before, h5.filet:before, h6.filet:before {
  content:""; width: 2.4em; height: 1px; background: #f8f6fdaa; position: absolute; left: -2.8em; margin-top: 0.6em;
}



 h1 span.tag , h2 span.tag , h3 span.tag , h4 span.tag , h5 span.tag { display: block; color: #A0F0FF; font-size: 60%; font-family: "Maison Neue", sans-serif; font-weight: 700; line-height: 120%;}

.sans {  font-family: "Maison Neue", sans-serif; }

section { position: relative; margin: 8% 0; margin: calc(4rem + 5%) 0;}
.wrap { margin: 3rem;}

.wrap .wrap { margin: 2rem;}





.swiper { user-select: none; }
.swiper.rank.hasButton  {  padding-bottom: 5rem;  }
.swiper.rank  { padding-top: 0.6rem;   pointer-events: none;  padding-bottom: 2rem; }
.swiper.rank .swiper-slide { height: 90vh; max-height: 25rem; min-height: 15rem; width: 100%;  }
.swiper.rank a , .swiper.rank .swiper-pagination-bullet{ pointer-events: fill;}

.swiper.rank .swiper-slide ul { list-style: none; margin: 0; padding: 0;}
.swiper.rank .swiper-slide li {  width: 30%; max-width: 7.4rem; height: 100%; position: absolute; bottom: 0; border-radius: 1.2rem; background: #FFF; margin: 0; margin: 0; color: #06050c; box-shadow:0 0 1rem #0002; pointer-events: fill;}
.swiper.rank .swiper-slide li:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; margin: -0.6rem; padding: 0.6rem;  border-radius: 1.5rem;  }

.swiper.rank .swiper-slide li:nth-child(1) { left: 50%; transform: translateX(-50%);}
.swiper.rank .swiper-slide li:nth-child(2) { right: 50%; height: 82%;  transform: translateX(-55%); transform: translateX(calc(-50% - 0.8rem)); }
.swiper.rank .swiper-slide li:nth-child(3) { left: 50%; height: 70%;   transform: translateX(55%); transform: translateX(calc(50% + 0.8rem)); }



.swiper.rank .swiper-slide li img { display: block; pointer-events: fill; margin:1rem auto 0.5rem auto; width: auto; height: auto; max-width: 80%; max-width: calc(100% - 1.5rem); max-height: 3rem; padding: 0;}
.swiper.rank .swiper-slide  h3 , .swiper.rank .swiper-slide  p em  , .swiper.rank .swiper-slide  p strong  { font-family: "Maison Neue", sans-serif; position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box; padding:1.2rem 0.5rem; text-align: center; font-size: 0.8rem; font-weight: bold; margin: 0;}
.swiper.rank .swiper-slide  h3 { font-size: 0.5rem; position: relative; margin: 0; padding: 0; font-weight: 600; min-height: 4rem; display: flex; align-items: center;}
.swiper.rank .swiper-slide  h3 span { padding: 0 0; margin: 0 0.6rem; text-align: center; width: 100%; margin-top: -1rem; box-sizing: border-box; pointer-events: fill;}
.swiper.rank .swiper-slide li p  em {  bottom: 0; top: auto; font-style: normal; padding-top: 2.5em; }
.swiper.rank .swiper-slide  h3 a { display: block;  width: 100%; color: #06050c; text-decoration: none; pointer-events: none;}
.swiper.rank .swiper-slide  p strong { transform: translateY(-50%); font-weight: 400; font-size: 0.66rem; color: #AAA;  line-height: 140%; }

.swiper.rank .swiper-slide  p.less strong { color: var(--red);   }
.swiper.rank .swiper-slide  p.better strong { color: var(--green);   }





.swiper.rank .swiper-slide  p strong span.value.loaded { opacity: 1;}
.swiper.rank .swiper-slide  p strong span.value { color: #06050c; display: block; font-size: 1.8rem; margin-bottom: 0.2rem; margin-bottom: calc(0.1em + 0.1rem);  line-height: 100%;   white-space: nowrap;  transition: opacity 1.2s; opacity: 0;   }
.swiper.rank .swiper-slide  p strong span.value span { font-size: 45%;  display: inline-block; line-height: 100%;}
.swiper.rank .swiper-slide li:nth-child(1) p strong {  top:40%  }
.swiper.rank .swiper-slide li:nth-child(2) p strong { top:50%; }
.swiper.rank .swiper-slide li:nth-child(3) p strong { top: 60%; }

.swiper.rank .swiper-slide  p strong span.value {  
font-family: "proxima-nova",  sans-serif; 
letter-spacing: -0.02em;
}

.swiper.rank .swiper-slide  p strong span.value  sup.helper  {}


.swiper.rank .swiper-slide li:nth-child(1) p em:before { content: "N°1";}
.swiper.rank .swiper-slide li:nth-child(2) p em:before { content: "N°2";}
.swiper.rank .swiper-slide li:nth-child(3) p em:before { content: "N°3";}

.swiper.rank .swiper-slide p.buttons { position: absolute; left: 0; width: 100%; text-align: center; justify-content: center; bottom: -2.7rem; margin: 0;}

a.popup {text-decoration: none; }
a.popup:after { content: ""; position: absolute; width: 0.3em; height: 0.3em; background: no-repeat center center url(../images/new-tab.svg); background-size: contain; text-decoration: none; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
a.popup:hover:after { opacity:1; pointer-events: fill; }

.swiper.rank .swiper-slide li p  em { background: no-repeat center  0; background-size: 2em; } 

.swiper.rank .swiper-slide li:nth-child(1) p em  {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Ccircle cx='23' cy='23' r='23' fill='%23FFE782'/%3E%3Cg transform='translate(-10.24 2.241)'%3E%3Cpath d='M38.869,27.884A1.97,1.97,0,0,1,36.9,29.85H29.046a1.971,1.971,0,0,1,0-3.942H36.9A1.972,1.972,0,0,1,38.869,27.884Zm-.2,1.961H27.281a1.965,1.965,0,0,0,0,3.93H38.667a1.965,1.965,0,0,0,0-3.93ZM40.353,13.53a1.166,1.166,0,0,0-.644-1.991l-3.319-.488a1.18,1.18,0,0,1-.888-.634L34.018,7.41a1.163,1.163,0,0,0-2.089,0l-1.484,3.006a1.18,1.18,0,0,1-.888.634l-3.319.488a1.166,1.166,0,0,0-.644,1.991l2.391,2.343a1.163,1.163,0,0,1,.342,1.044l-.566,3.309a1.173,1.173,0,0,0,1.7,1.23l1.532-.81v3.309h3.963V20.646l1.532.81a1.173,1.173,0,0,0,1.7-1.23l-.566-3.309a1.162,1.162,0,0,1,.342-1.044Z' fill='%23fff' stroke='%23FFE782' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
}
.swiper.rank .swiper-slide li:nth-child(2) p em  {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Ccircle cx='23' cy='23' r='23' fill='%23d9d9d9'/%3E%3Cg transform='translate(-10.24 2.241)'%3E%3Cpath d='M38.869,27.884A1.97,1.97,0,0,1,36.9,29.85H29.046a1.971,1.971,0,0,1,0-3.942H36.9A1.972,1.972,0,0,1,38.869,27.884Zm-.2,1.961H27.281a1.965,1.965,0,0,0,0,3.93H38.667a1.965,1.965,0,0,0,0-3.93ZM40.353,13.53a1.166,1.166,0,0,0-.644-1.991l-3.319-.488a1.18,1.18,0,0,1-.888-.634L34.018,7.41a1.163,1.163,0,0,0-2.089,0l-1.484,3.006a1.18,1.18,0,0,1-.888.634l-3.319.488a1.166,1.166,0,0,0-.644,1.991l2.391,2.343a1.163,1.163,0,0,1,.342,1.044l-.566,3.309a1.173,1.173,0,0,0,1.7,1.23l1.532-.81v3.309h3.963V20.646l1.532.81a1.173,1.173,0,0,0,1.7-1.23l-.566-3.309a1.162,1.162,0,0,1,.342-1.044Z' fill='%23fff' stroke='%23d9d9d9' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
}

.swiper.rank .swiper-slide li:nth-child(3) p em  {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Ccircle cx='23' cy='23' r='23' fill='%23EBBA95'/%3E%3Cg transform='translate(-10.24 2.241)'%3E%3Cpath d='M38.869,27.884A1.97,1.97,0,0,1,36.9,29.85H29.046a1.971,1.971,0,0,1,0-3.942H36.9A1.972,1.972,0,0,1,38.869,27.884Zm-.2,1.961H27.281a1.965,1.965,0,0,0,0,3.93H38.667a1.965,1.965,0,0,0,0-3.93ZM40.353,13.53a1.166,1.166,0,0,0-.644-1.991l-3.319-.488a1.18,1.18,0,0,1-.888-.634L34.018,7.41a1.163,1.163,0,0,0-2.089,0l-1.484,3.006a1.18,1.18,0,0,1-.888.634l-3.319.488a1.166,1.166,0,0,0-.644,1.991l2.391,2.343a1.163,1.163,0,0,1,.342,1.044l-.566,3.309a1.173,1.173,0,0,0,1.7,1.23l1.532-.81v3.309h3.963V20.646l1.532.81a1.173,1.173,0,0,0,1.7-1.23l-.566-3.309a1.162,1.162,0,0,1,.342-1.044Z' fill='%23fff' stroke='%23EBBA95' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
}

.swiper.rank .pannel { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%;   opacity: 1; height: 14rem;}
.swiper.rank .pannel h2 { max-width: 14.5rem;}
.swiper.rank .pannel h1 { max-width: 14.5rem;}
p.buttons { font-weight: 700; font-size: 0.6rem; font-size: max(0.55rem, 11px);  display: flex; margin: 1rem 0; gap: 0.5rem;}

p.buttons a { padding: 0.9em 1.4em;  border-radius: 2em; line-height: 1.2em;  box-sizing: border-box; background: #A0F0FF; color: #06050c;display: flex;  /* ou flex */
  align-items: center;     font-size-adjust:none;  -moz-user-drag: none; overflow: hidden; 
  justify-content: center;  pointer-events: fill; cursor: pointer; text-decoration: none; text-align: center;  user-select: none; position: relative; transition: color 0.2s;  }
p.buttons a span { position: relative;}

p.buttons a:before { content: ""; position: absolute; top: 0; left: 0;  border-radius: 4em; background: #06050c; width: 30%; height: 100%; opacity: 0; transition: all 0.2s;  }

p.buttons a.sub { background-color: #5718CE44; box-shadow: 0 0 1.2em #5718CE44 inset;  color: #FFF;  backdrop-filter: blur(8px); padding: 0.6em 0.8em 0.5em 0.8em; font-size: 90%; opacity: 0.6; transition: opacity 0.2s;}
p.buttons a.sub:hover { opacity: 1;}


p.buttons a.white {  background: #FFF; color: #5718CE; transition: color 0.2s, background-color 0.2s;}
p.buttons a.white:hover { color: #FFF;}
p.buttons a.white.actif {  background: #5718CE; color: #FFF; transition-delay: 0.08s;}
p.buttons a.white:before {  background: #5718CE;   }




p.buttons a.multi { justify-content: left; text-align: left; border-radius: 3rem;}

p.buttons a.border , p.buttons a.border:hover {  background: transparent; color: #FFF; border: 2px solid #FFF; opacity: 0.7; transition: opacity 0.2s;}
p.buttons a.border:hover { opacity :1;}
p.buttons a.border:before { display:none;}


p.buttons a:hover { color: #FFF;}
p.buttons a:hover:before { opacity: 1; width: 100%;  border-radius: 2em;}



.anchor { position: absolute; margin-top: -5.5rem;}


.block-large { display: block;}


.col-sticky { padding-left: 33.33%; position: relative; }

.col-sticky .slides { margin-left: 1.5rem }

.col-sticky .column { position: absolute; left: 0; width: 33.33%; height: 100%;}


.col-sticky .column .sticky { margin-right: 1.5rem; top: 2rem; position: sticky; max-width: 17rem;}

.slides article { position: relative; padding: 1px; border: 1px solid #FFF; padding-bottom: 3.5rem; border-radius: 2rem; background: #A595FF;}
.slides article + article { background: #8A76FF; margin-top: -3.5rem;}
.slides article + article + article { background: #654AFF;}
.slides article:last-child { padding-bottom: 1px;}


.swiper.rank .pannel.fade {
  animation: fadeIn 0.5s ease;
}


.listing-societes { display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
  grid-auto-flow: column; /* Remplissage par colonnes */ 
  gap: 0 2rem;
  margin: 1.5rem 0;
  grid-template-rows: repeat(300, auto);
}



.listing-societes article.hidden { display: none;}
.listing-societes article { display: flex; gap:0 0.75em; margin: 0; position: relative; align-items: center; pointer-events: none; opacity: 0.35; transition: opacity 0.25s; break-inside: avoid;  height: 1.5em;}
.listing-societes article h3 { font-size: 1em; margin: 0; font-family: "Maison Neue", sans-serif; font-weight: 700;  line-height: 1.5em; white-space: nowrap; }
.listing-societes article .details { position: relative; width: 100%; height: 5em; pointer-events: none; transform:translateX(-0.75em);  opacity: 0; transition: opacity 0.25s, transform 0.2s; break-inside: avoid;  }
.listing-societes article a { color: #FFF; text-decoration: none; cursor: pointer; pointer-events: fill; }

.listing-societes article .details .elements {  position: absolute;  width: 100%;  top: 0; height: 5em;  break-inside: avoid;  }
.listing-societes article .details .elements div { display: flex; justify-content: right; gap: 0.75em; align-items: center; height: 5em;  break-inside: avoid;  }

.listing-societes article .details .elements img { height: auto; width: auto; max-height: 3.2em; max-width: 8em; min-width: 4em;  break-inside: avoid; background: #f8f6fd;  border: 0.75rem solid #f8f6fd; border-radius: 0.8rem;  }
.listing-societes article .details .elements .filet { width: 100%; height: 1px;  break-inside: avoid; background: #f8f6fdaa; }


.h4 + .category { margin-top: -1rem; }
.h4 + .category.is_ranks { margin-top: -0.5rem; }


.category { margin-bottom: 3.5rem;}


.listing-societes article:hover , .listing-societes article.hover:not(.matched):not(.hidden)  { opacity: 1; z-index: 2;}
.listing-societes article:hover .details , .listing-societes article.hover:not(.matched):not(.hidden) .details { opacity: 1; transform:translateX(0);}


.category.is_ranks .rank-line { position: relative; }
.h4 + .category.is_ranks .rank-line a:before { content: "";  position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0.6rem; margin: -0.6rem; border-radius: 0.6rem; z-index: 3; }
.category.is_ranks .rank-line span { padding-right: 2em; }

.category.is_ranks .rank-line:before { content: ""; background: #5718CEAA; position: absolute; top: 0; left: 0; width: 0; opacity: 0; height: 100%; padding: 0; border-radius: 0.7rem; transition: width 0.3s, opacity 0.4s; }
.category.is_ranks .rank-line:hover:before { width: 100%; opacity: 1; }
.rank-line.hidden { opacity: 0.3; font-size: 60%; pointer-events: none; /* filter: blur(2px); */ }


.category.is_ranks .rank-line { }
.category.is_ranks .rank-line:after { content: "";  pointer-events: none; background: #5718CE00 no-repeat center center url(../images/arrow-right-white.svg); position: absolute; /* top: 50%; margin-top: -0.9em; */ top:0.35rem; right: 0.3rem; width: 1.8em;  height: 1.8em; background-size: 0.9em;  border-radius:100%; 
  transition: right 0.15s;}
.category.is_ranks .rank-line:hover:after { right: -0.1em; transition-delay: 0.25s; }


.category.is_ranks .rank-line.hidden:after { display: none; }

.list-cat.has-slide { pointer-events: none;}
.list-cat h3 { font-size: 1em; margin: 0; font-family: "Maison Neue", sans-serif; font-weight: 700;  line-height: 1.5em; white-space: nowrap; display: flex; align-items: center; gap: 0.75rem;}

.list-cat h3 a { white-space: nowrap; opacity: 0.35; transition: opacity 0.25s; text-decoration: none; cursor: pointer; pointer-events: fill;}
.list-cat h3 a + span { display: block; width:100%; height: 1px; background: #f8f6fd; background: linear-gradient(90deg, #f8f6fdaa calc(100% - 6rem), #f8f6fd00 100%);  background: #f8f6fd; opacity: 0;  transition: transform 0.3s, opacity 0.4s; transform: translateX(-1rem); }
.list-cat h3 a:hover { white-space: nowrap; opacity: 1;}
.list-cat h3 a.actif, .list-cat h3 a.actif:hover { white-space: nowrap; opacity: 1;}
.list-cat h3 a.actif + span {  opacity: 1; transform: translateX(0);}


.list-cat.has-slide { padding-right: 16.75rem; position: relative;}


.list-cat.has-slide .swiper { position: absolute; right: 0;top: 0; height: 100%; width: 16rem; pointer-events: fill;}
.list-cat.has-slide .swiper .swiper-slide { width: 100%;}
.list-cat.has-slide .swiper p { margin: 0;}
.list-cat.has-slide .swiper p.fat { font-size: 2.8rem;  white-space: nowrap; line-height: 1em; margin-right: 0.5em;}
.list-cat.has-slide .swiper p.fat span { font-size: 45%; margin-left: 0.2em;}
.list-cat.has-slide .swiper p.fat span + span { margin-left: 0;}

.list-cat.has-slide .swiper .swiper-pagination { text-align: left;}

.list-cat.has-slide .adjust-margin { transition: margin 0.3s ease; padding-bottom: 0.5rem;}


.swiper .fat.to-fit {
  transition: opacity .3s ease;
  opacity: 1;
}
.swiper .fat.to-fit.is-updating {
  opacity: 0;
}

.swiper p.colorized {  line-height: 1.2em; max-width: 14em; }
.swiper p.colorized em { display: block; font-style: normal; font-size: 60%; font-weight: 400; margin-top: 0.4em; line-height: 1.2em; }

sup { line-height: 0;}
sup.helper { font-size: 1em; position: relative;  vertical-align: middle; cursor: help; box-sizing: border-box; margin-left: 0; line-height: 0;  height: 0.55em; width: 0; text-align: center; 
   text-indent: -225000px; position: relative; display: inline-block;  font-family: "Maison Neue", sans-serif; font-weight: 400; color: #FFF0; color: transparent; pointer-events: none;
   font-style: normal; transform: translateZ(0) translateY(-0.05em);  user-select: none; z-index: 5; }
   
sup.helper span { display: none;}


sup.helper { width: 0;}
sup.helper:before { content: ""; z-index: 2; margin-left: 0.25em;  pointer-events: fill; position: absolute; display: block; height: 0.55em;  width: 0.55em;  border-radius: 100%;   box-shadow: 0 0 0 1px #FFFA; background: #793ae5 no-repeat center center url(../images/help.svg); background-color: #8756F400; background-size: contain;  } 
sup.helper.warning:before { background: no-repeat center center url(../images/warning.svg); margin-left: 0.0em; height: 12px; width: 12px; box-shadow: none; border-radius: 2px;  margin-top: -0.25em; position: absolute;  }
sup.helper.warning {}


.nbt { opacity: 0.5; font-size: 0.6rem; margin: 1.5rem 0;}




@keyframes fadeIn {
  0% { opacity: 0; margin-top: 1.8rem; }
  100% { opacity: 1; margin-top: 0; }
}




.swiper-pagination-bullet {
    background: #FFF;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #A0F0FF;
}


.text ul {  margin: 1em 0; list-style: none; padding: 0; }

.text ul li { padding-left: 1.3em; margin: 0 0;   }
.text ul li:before { height: 1px; margin-top: 0.55em; width: 0.7em;  background: #f8f6fdaa; content: ""; margin-left: -1.3em; position: absolute; }



 p.align-from-list-title {  margin-left: 4.8rem; font-size: 1.1rem; line-height: 135%; font-weight: 500; max-width: 46em;}

ul.list-title { font-size: 2.4rem; font-family: "fatfrank", sans-serif; margin: 1.5rem 0 12rem 0; margin: 1.5rem 0; list-style: none; padding: 0; }

ul.list-title li { padding-left: 4.8rem; line-height: 1.1em; margin: 0.5em 0; margin-right: 1em; opacity: 0.25; transition:transform 0.5s, opacity 0.8s; transform: translateY(2rem); }
ul.list-title li:before { height: 1px; margin-top: 0.55em; width: 4.1rem;  background: #f8f6fdaa; content: ""; margin-left: -4.8rem; position: absolute; }
ul.list-title li.actif { opacity: 1;  transform: translateY(0);}


#form-contact p.buttons a { font-size: 0.75rem; display: block; text-align: center; min-width: 150px;}

h2 + p.rank-line.head , h3 + p.rank-line.head , h4 + p.rank-line.head { margin-top: -1.4rem;}



p.rank-line.head  { color: #FFFA; font-size: 60%; font-weight: 600; }


p.rank-line { display: flex;align-items: start; border: 0 solid #A595FF;  /* border-width: 1px 0; */ color: #FFFE;   -moz-user-drag: none; 
  margin: 0 0 -1px 0; font-size: 1rem; font-weight: 500; padding: 0.8em 0.6rem; padding: 0.7em 0.6rem; line-height: 1.1rem; position: relative; border-radius: 0.8rem; }
p.rank-line span { width: 100%; position: relative; padding: 0;  -moz-user-drag: none;  }

p.rank-line span + span.value { z-index:6}
p.rank-line span + span.value + span.value { z-index:5}
p.rank-line span + span.value + span.value + span.value { z-index:4}
p.rank-line span + span.value + span.value + span.value + span.value { z-index:3}
p.rank-line span + span.value + span.value + span.value + span.value + span.value { z-index:2}

p.rank-line span:first-child { width: 7rem;}

p.rank-line span.value { white-space: nowrap;  padding-left: 1rem; flex: 0 0 12%; max-width: 6.5rem; min-height: 1em; z-index: 2; }
p.rank-line span.diff { white-space: nowrap; width: 4rem; flex: 0 0 4rem; /* text-align: left !important; */ font-size: 70%; padding-left: 0.5rem; text-align: right; font-weight: 700; min-height: 1em; z-index: 1;}

p.rank-line.head span { margin-top: auto; line-height: 115%;}
p.rank-line.head span.value { white-space: normal;  display: flex; align-content:end; }

p.rank-line.head span.diff { font-size: 100%; font-weight: 600;}

p.rank-line.head span span.limiter { width: 100%; max-width: 6rem;}


p.rank-line .diff.less { color: #FFB0C2;  font-weight: 500; opacity: 1;  }
p.rank-line .diff.better {  color: #A3FFCC;  font-weight: 500; opacity: 1; }


p.rank-line:nth-child(even){
    background-color: #4500bc22; 
}

p.rank-line.disabled:nth-child(even){
    background-color: #4500bc11; 
}



#toScrollTop { position: fixed; bottom: 2.2rem; left: 0; width: 100%;  font-size: 1rem; height:2em; pointer-events: none; z-index: 100; opacity: 0; transition: opacity 0.3s;}
#toScrollTop .wrap { margin-top: 0; margin-bottom: 0;}
#toScrollTop .center { position: relative;}
#toScrollTop a { position: absolute; height: 2em; width:2em; transition: background-position 0.3s; background: #5718CEBB repeat-y 0 0 url(../images/arrow-top-white.svg); background-size: 2em; backdrop-filter: blur(18px);  border-radius: 100%; right: 0; }
#toScrollTop a:hover { background-position: 0 -2rem;}





#toScrollTop.open { opacity: 1;}
#toScrollTop.open a { pointer-events: fill;}
a + em.info { padding: 0.8em 0.6em 0.8em 2.4em; display: inline; line-height: 1.1em; border-radius: 0.6em; background: #EBBA95;background: #06050c;  background: #06050cbb; background-image: url(../images/rank-white.svg); 
  background-repeat: no-repeat; background-position: 0.55em center; background-size: 1.5em; backdrop-filter: blur(8px); color: #FFF; opacity: 0; font-size:0.55rem; font-style: normal; transition: all 0.25s; position: absolute; z-index: 6; 
  pointer-events: none; left: 0; margin-left: -0.2em; margin-top: -0.1em; top: 100%; backface-visibility: hidden; transform: translateZ(0); font-family: "Maison Neue", sans-serif; font-weight: 400;}

a + em.info.secteur {   background-image: url(../images/liste-secteurs.svg);}
a + em.info.societe {   background-image: url(../images/liste-societes.svg);}
a:hover + em.info { margin-top: 0.6em; opacity: 1; }

p.rank-line span.diff.right.disabled { font-size: 48% ;  color: #FFF6; font-weight: 400; }

 

p.rank-line.disabled , p.rank-line.disabled:hover { color: #FFFE; font-weight: 400; /* background: none; */ font-size: 80%; line-height: 110%; line-height: 0.9rem;}
p.rank-line.disabled span , p.rank-line.disabled a {  color: #FFF6; }
p.rank-line.disabled .helper { opacity: 0.6;}
p.rank-line span.right { text-align: right; margin-left: auto; margin-right: 0; justify-content: right;}
p.rank-line.disabled span.value { font-size: 60%; font-weight: 300;}


p.rank-line span.value.disabled { font-size: 60%;  color: #FFF6; }




p.rank-line sub.average { font-size: 45%; padding-top: 0; }
p.rank-line sub { position: absolute; top:100%; white-space:nowrap; left: 0; font-size: 55%; line-height: 100%; opacity: 0.6; font-weight: 500; padding-top: 0.1em;}
p.rank-line span.right sub { right: 0; left: auto;}

p.rank-line span.name {    flex: 1; }

p.rank-line span.light { font-weight: 300;}

p.rank-line a { color: #FFF; text-decoration: none;  -moz-user-drag: none; }

.cur-suffix { font-size: 60%; line-height: 0;}


.ranks { display: flex; flex-wrap: wrap; gap: 0.75rem;}
.ranks a { display: block; box-sizing: border-box; padding: 1.4rem; border-radius: 1rem; border: 1px solid #FFF5; transition: border-color 0.2s; width: 20%; width: calc(25% - 0.6rem); font-size: 80%; font-weight: 700; color: #FFF; text-decoration: none; }
.ranks a:hover { border-color: #FFF;}
 .ranks a span{ position: relative; display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 1.2em;
  min-height: calc(1.2em * 3);
  overflow: hidden;

}
 .ranks a em { font-weight: 300; font-size: 0;  display: none;}
 .ranks a strong { display: block; width: 2.2em; height: 2.2em; overflow: hidden; text-indent: -5000px; background: #FFF url(../images/arrow-right-black.svg) no-repeat center center; background-size: 1.4em; border-radius: 1.1em; margin:1em 0 -0.1em  -0.1em; transition: width 0.2s;}


 .filter-field { background: none; display: block; width: 100%; box-sizing: border-box; border: none; border: 2px solid #FFF; border-color: #FFF7; font-size: 0.8rem; padding:1em; border-radius: 2rem; outline: none; font-weight: 500; font-family: 'Maison Neue' , Arial, sans-serif; transition: border-color 0.2s;}
 .filter-field::placeholder { color: #FFF; opacity: 0.3;}
 .filter-field:focus { border-color: #FFF;}
 .ranks a.hidden {

   display: none;
}


form.center { margin-top: 3rem; margin-bottom: 4rem;}
.no-result {  font-size: 80%; width: 100%;}
.no-result.hidden { display: none;}
 .ranks .no-result { margin: 2rem 0; width: 100%;}


 .listing-societes .no-result {  position: absolute; left: 0; width: 100%; }


.swiper.rank.static .pannel h1 { margin-top: 1rem !important;}
.swiper.rank  span.selector { pointer-events: fill; font-size: 0.65rem; font-size: max(0.5rem, 11px);}
 
 span.selector { position: relative; user-select: none; transition: all 0.1s; display: inline-block; line-height: 1.2em; padding:0.9em 2.9em 0.9em 1.4em; text-align: left; border-radius: 1.5em; border: 1px solid #FFF5; font-size: max(0.7rem, 11px); background: #5718CE33; cursor: pointer; z-index: 500; font-weight: 500;}
 span.selector .values { position: absolute; transition: opacity 0.1s; pointer-events: none; opacity: 0; top: 0; left: -1px; top: 100%;  width: 100%; border: 1px solid #FFF; border-width: 0 1px 1px 1px;  background: #5718CEAA;   border-radius:0 0 0.8em 0.8em; overflow: hidden;  backdrop-filter: blur(8px);  }
  span.selector .values a { display: block; text-decoration: none; color: #FFFA;  box-sizing: border-box;  padding:0.8em 1em 0.8em 1.4em;  border-top: 1px solid #FFF3; font-size: 100%; }
/*  .ranks a:hover strong { width: 4.2em; } */

 span.selector:after { content: ""; position: absolute; right: 1em; pointer-events: none; height: 1em; width: 1em; top:50%; margin-top: -0.5em; background: no-repeat center center url(../images/arrow-bottom-white.svg); background-size: contain;  }


  span.selector .values a:hover { color: #FFF;}

 span.selector.open .values { opacity: 1; pointer-events: fill;}

 span.selector.open { border-color: #FFF; background-color: #5718CEAA; border-radius: 0.8em 0.8em 0 0;}


.intro.compare em { font-style: normal; font-size: 66%; display: inline-block; padding: 0 0.3em; opacity: 0.5; font-family: 'Maison Neue' , Arial, sans-serif; font-weight: 500; }


@keyframes change {
  from { background: white; }
  to   { background: lightblue; }
}



div.secteur { margin: 3rem 0; padding: 1px 0;}
.chiffres-cles {
  display: flex;
  gap: 2rem; 
    flex-wrap: wrap;
    margin: 2rem 0

}

.chiffres-cles p { margin: 0; line-height: 110%;}

.chiffres-cles .box {
       
  display: flex;
  flex-direction: column; 
      width: 22%;
      width: calc(25% - 1.5rem);

      width: 30%;
      width: calc(33.33% - 1.5rem);

}

.chiffres-cles  .box .intro {
  font-size: 1rem;
  flex: 1; 
  max-width: 13em; 
  display: flex; 
  align-items:end;        
}

.chiffres-cles  .box .legende {
  margin: 0.4rem 0; 
  font-size: 0.5rem; font-size: calc(0.15rem + 8px); opacity: 0.8; 
  font-weight: 400;
  line-height: 1.2em;
  height: 2.4em;
  margin-bottom: -1.2em;
}

.chiffres-cles  .box .legende.colorized {
  opacity: 1;
}

.chiffres-cles  .box .intro em { display: block; }

.chiffres-cles  .box .to-fit {
  font-size: 3rem;
  font-weight: bold;
  margin-top: auto; 
  white-space: nowrap;
  max-width: 18rem;
  line-height: 1em;
}

#sticky_rank.show { opacity: 1; pointer-events: fill;  top: 2rem;}
#sticky_rank { position: sticky; top: 3.5rem; z-index: 3; pointer-events: none; opacity: 0; margin-top: -12rem; margin-bottom: 3rem; transition: opacity 0.4s, top 0.5s;  }


#sticky_rank p.rank-line {  font-weight: 500; z-index: 2; }
#sticky_rank:before {  background: #793ae5; background: #8540fc no-repeat center top url(../images/topo-line.svg); background-size: cover; background-attachment: fixed; border-radius: 1rem; top: 0; width: 100%; content: ""; height: 100%; position:absolute; padding: 1rem 2rem; margin: -1rem -2rem; box-shadow: 0 0 0 2px #A595FF, 0 0.5rem 0.5rem #0006; }
/* 
p.rank-line.head { z-index: 5;}
p.rank-line.head span {   z-index: 5;  background: linear-gradient(0deg, #A595FF 0%, #8540fc 100%); background-attachment: fixed; }
p.rank-line.head span:before {  background: no-repeat center top url(../images/topo-line.svg); background-size: cover; background-attachment: fixed;  top: 0; width: 100%; content: ""; height: 100%; position:absolute;  }


p.rank-line.head span.name { opacity: 0;}

 */

.sticky_menu:before {  background: no-repeat center top url(../images/topo-line.svg); pointer-events: none; background-size: cover; background-attachment: fixed; border-radius: 1rem; top: 0; width: 100%; content: ""; height: 100%; padding: 0 1rem; margin: 0 -1rem; position:absolute;  }

.sticky_menu { position: sticky; top: 0; z-index: 10; margin: 1rem -0.5rem; margin-top: -1rem;  pointer-events: none; padding: 1.5rem 0.5rem 3rem 0.5rem; backdrop-filter: blur(8px); user-select: none; mask: repeat-x url(../images/mask-gradient.png?v=2) center bottom;    -webkit-user-drag: none; }
.sticky_menu p.buttons { justify-content: center; margin: 0 !important; user-select: none;  pointer-events: fill; position: relative;   -webkit-user-drag: none; flex-wrap: wrap; }
.sticky_menu p.buttons a { position: relative;  -webkit-user-drag: none; -moz-user-drag: none;}
.sticky_menu p.buttons:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  padding:1.8rem 1rem; margin: -2rem;}



/* #sticky_rank p.rank-line { color: #06050c; border-color: #EEE; font-weight: 600; }
#sticky_rank:before {  background: #FFF; border-radius: 1.2rem; top: 0; width: 100%; content: ""; height: 100%; position:absolute; padding: 1rem; margin: -1rem; box-shadow: 0 0.3rem 0.8rem #0004; }
 */

#sticky_rank p.rank-line:nth-child(odd){
    /* background-color: #0002;  */
}




  .share-box {
    display: flex;
    gap: .5em;
    flex-wrap: wrap;
    align-items: center;
        font-size: 0.6rem;
        margin:2rem 0 5rem 0;
        color: #FFF9;
  }

  .share-box .legende { display: none;}

  .share-btn.share-native {
    gap: .4em;
    align-items: center;
    padding: 0 0.7em;
    min-width: 2em;
    border-radius: 2rem;
    border: 1px solid #FFF;
    height:2.2em;
    text-decoration:none;
    /* font-family: "fatfrank", sans-serif; */
    cursor: pointer;
    transition: transform .05s ease, box-shadow .15s ease, background .15s ease, opacity 0.2s ease;
  }



.share-btn { opacity: 0.5; transition: opacity 0.2s ease;}
  .share-btn:hover{ opacity:1 }



  .share-btn:active { transform: translateY(1px); }


  .share-native { display:none; } /* s’affiche si navigator.share dispo */
  /* Petits accents de couleur (optionnels) */


  .share-box a.social { position: relative; width: 2em; height: 2em; background: #FFF;  justify-content: center; align-items: center; border-radius: 100%;  }
.share-box a.social span { display: none;}

.share-btn.share-native svg { transform: translateY(-0.1em); }
  .share-btn svg { height: 1.4em; width: 1.4em; }

    .share-x svg {  height: 1.2em; width: 1.2em; margin: auto; }

  .share-li svg {  height: 1.3em; width: 1.3em; }
  .share-box a.social.share-fb { display: none !important; font-size: 0; position: absolute; }

    .share-box a { display: none;}







@media (max-width: 1600px) {
  #background , #sticky_rank:before { background-size: 1600px auto; }
}

@media (max-width: 1600px) {
  html, body { font-size: 22px;}




#custom_synt ul { columns: 5; }



}

@media (max-width: 1400px) {
.ranks a {  width: calc(33.33% - 0.6rem);  }


form.nb_2 span.tag { max-width: 16rem; }
form.nb_3 span.tag { max-width: 14rem; }
form.nb_4 span.tag { max-width: 12rem; }
form.nb_5 span.tag { max-width: 10rem;  }

}



@media (max-width: 1300px) {
  html, body { font-size: 20px;}

.chiffres-cles .box {
      width: calc(33.33% - 1.5rem);
}





}

@media (max-width: 1180px) {
.swiper.rank .swiper-wrapper , .swiper.rank .swiper-pagination { padding-left: 8rem; }
}


@media (max-width: 1080px) {

#custom_synt ul { columns: 4; }
  html, body { font-size: 18px;}

.listing-societes article .details { display: none; }
.listing-societes article  { overflow: hidden;}
.listing-societes article h3 { overflow: hidden; text-overflow: ellipsis;}

.ranks a {  width: calc(50% - 0.6rem);  }


section {margin: 6% 0; margin: calc(3rem + 5%) 0;}

h1 , .h1 { font-size: 3.2rem; line-height: 100%; }

ul.list-title { font-size: 2.2rem; }


p.rank-line span:first-child {
  width: 5rem;
}
p.rank-line { font-size: 0.9rem; ;}
}


@media (max-width: 880px) {


  html, body { font-size: 17px; min-height: 100dvh;}

  sup.helper:after { content: "";  position: absolute; display: block; height: 24px;  width: 24px; margin: -12px calc(0.25em - 8px); top: 50%;   border-radius: 100%;  pointer-events: fill; } 
sup.helper.warning:after {  margin: -18px calc(0.25em - 12px);}

#header { font-size: 0.9rem; -webkit-text-size-adjust: 100%;text-size-adjust: 100%; }
#header menu { position: fixed; opacity: 0; pointer-events: none;  padding:0 0;  padding-top: 2rem;  z-index: 1500; flex-direction:column; flex-wrap: wrap; align-items: center; justify-content: center;  top: 0; left: 0; background:#956BFE; background: linear-gradient(0deg, #A595FF 0%, #8540fc 100%); background-attachment: fixed; width: 100%; height: 100vh;   height: 100dvh; border-radius: 0;}
#header menu a { display: block; text-align: center; position: relative;  font-size: 1.6rem; line-height: 1.2em; padding: 0.3em 0; font-family: "fatfrank", sans-serif; font-weight: 400;}
#header menu a:first-child { margin-top: auto;}

#header .logo { font-size: 1.7rem; z-index: 100000; transition: opacity 0.2s;}

.openSearch #header .logo {  pointer-events: none; opacity: 0;}

  body.menu-open #header menu { opacity: 1; pointer-events: fill;}


  #toggleMenu { position: absolute; right: -0.5rem; box-sizing: border-box; user-select: none; transition: opacity 0.1s; border: 1px solid transparent; margin-top: -0.15rem;  height: 2.1rem; width: 2.8rem; border-radius: 2rem; z-index: 10000; pointer-events: fill;}


  #toggleMenu span { position: absolute; width: 1.6rem; height: 3px; background: #FFF; border-radius: 0.3rem; left: 50%; margin: -1.5px -0.8rem; top: 0.7rem; transition: all 0.2s;}
  #toggleMenu span + span { top:50%;}
  #toggleMenu span + span { top: auto; bottom:0.7rem;  }

  body.menu-open #toggleMenu span  { background: #FFFFFF }

  .openSearch #toggleMenu { opacity: 0; pointer-events: none;   }

  body.menu-open { overflow: hidden;}


  body.menu-open #toggleMenu span:nth-child(1) { transform: rotate(45deg); top: 50%; }
  body.menu-open #toggleMenu span:nth-child(2) { transform: rotate(-45deg); bottom: 50%; }
  body.menu-open header .menu { opacity: 1; pointer-events: fill; transition: opacity 0.3s; }



#search-btn  { position: absolute; right: 3rem; margin-right: 0; transition: right 0.2s;}
#header menu .hover { display: none;}



.openSearch a#search-btn {  right: -0.4rem;}

#sub-search { width: calc(100vw - 5.2rem);}

#suggestions-list { max-height: 9rem;}
#sub-suggestions-list { max-height: 13rem;}


.chiffres-cles .box {
      width: calc(50% - 1.5rem);
}

section {margin: 4% 0; margin: calc(2rem + 5%) 0;}

.wrap { margin: 1.5rem;}

.wrap .wrap { margin: 1rem;}

.sticky_menu {  margin: -1rem -1.5rem; padding-left: 1.5rem;  padding-right: 1.5rem;   scroll-behavior: smooth;  overflow: auto; pointer-events: fill; }

.sticky_menu::before  { display: none;  }
.sticky_menu p.buttons:before  { display: none;  }
.sticky_menu p.buttons {  flex-wrap: nowrap; white-space: nowrap; display: block; margin: 0; padding: 0 0 0.5rem 0; font-size: 0.75rem; }
.sticky_menu p.buttons a { white-space: nowrap; display: inline-block; margin:0 0.5rem 0 0; }
.sticky_menu p.buttons a:last-child { margin-right: 1.5rem;}



.swiper.rank .swiper-wrapper , .swiper.rank .swiper-pagination { padding-left: 0; }
.swiper.rank .swiper-slide p.buttons { bottom: -4.2rem;}
.swiper.rank.hasButton { padding-bottom: 7.2rem;}

.swiper.rank .swiper-wrapper { padding-top: 13rem;}
.swiper.rank .swiper-slide li { width: 28%;}
.swiper.rank .pannel { top: auto; bottom: 32.5rem;margin-top: 0; position: absolute; height:auto; min-height: 6rem; text-align: center; transform: none; }
.swiper.rank .pannel h2 { max-width: 320px; margin-left: auto; margin-right: auto;  margin: 0 auto;}
.swiper.rank .pannel h1 { max-width: 320px; margin-left: auto; margin-right: auto;  margin: 0 auto;}
.swiper.rank p.buttons { justify-content: center;}

.list-cat h3 a + span { display: none;}
.listing-societes , .list-cat h3 { font-size: 1.3rem;}

.swiper.rank.static .swiper-wrapper { padding-top: 0;}
.swiper.rank.static .pannel { position: relative; bottom: auto; top: 0; height:auto; min-height: auto; padding-bottom: 1rem; }
.swiper.rank.static  {  padding-bottom: 1rem;}

.


@keyframes fadeIn {
  0% { opacity: 0; margin-bottom: -1.8rem; }
  100% { opacity: 1; margin-bottom: 0; }
}



h1 , .h1 { font-size: 2.6rem; line-height: 100%; }
h2 , .h2 { font-size: 1.8rem; line-height: 115%;}
h3 , .h3 { font-size: 1.8rem; line-height: 115%;}
h4 , .h4 { font-size: 1.3rem; line-height: 120%;}


p.rank-line span.value {  flex: 0 0 25%; max-width: 5.5rem;  }

 p.align-from-list-title {  margin-left: 4rem;}

ul.list-title { font-size: 2.2rem; }
ul.list-title li { padding-left: 4rem;  }
ul.list-title li:before { width: 3.4rem; margin-left: -4rem; }

.swiper.range { display: none;}
#content { padding-top: 3rem;}

p.rank-line span:first-child {
  width: 4rem;
}


.h4 + .category { margin-top: -0.5rem; }


p.flex-form { display: block;}
p.flex-form .field { margin: 0.6rem 0;}
#footer { background:#5718CE33; padding: 1px 0; backdrop-filter: blur(17px); margin-top: 5rem;}
#footer p.menu { display: block; margin: 3rem 0;}
#footer p.menu a { display: block; text-align: center;   margin: 0.2rem 0; padding: 1rem 0; font-size: 0.9rem; text-decoration: none; }
#footer p.menu a + a { border-top: 1px solid #FFF2;}
#custom_synt ul { columns: 3; }
}

@media (max-width: 500px) {
  .block-large { display: inline;}
  #custom_synt ul { columns: 2; }

#custom_synt h2 { text-align: left;}
#custom_synt p.buttons { justify-content: left;}
}




@media (max-height: 400px) {


#header menu a {   font-size: 6vh; line-height: 1em; }

}



@media (max-width: 1201px) {

p.rank-line span + span.value + span.value + span.value + span.value + span.value { display:none;}
.intro.compare span + em + span + em + span + em + span + em , .intro.compare span + em + span + em + span + em + span  + em + span  { display:none;}

}

@media (max-width: 901px) {

p.rank-line span + span.value + span.value + span.value + span.value { display:none;}

.intro.compare span + em + span + em + span + em , .intro.compare span + em + span + em + span + em + span  { display:none;}


}



@media (max-width: 601px) {

p.rank-line span + span.value + span.value + span.value { display:none;}

.intro.compare span + em + span + em , .intro.compare span + em + span + em + span  { display:none;}


}





@media (max-width: 600px) {
  html, body { font-size: 15px;}
  .chiffres-cles .box p.intro { max-width: 100%;}
.chiffres-cles .box {
      width: calc(100%);
}

 p.align-from-list-title {  margin-left: 3.5rem;}

ul.list-title { font-size: 1.8rem; }
ul.list-title li { padding-left: 3.5rem;  }
ul.list-title li:before { width: 2.8rem; margin-left: -3.5rem; }

#tooltip , #tooltip.warning {  font-size: 0.75rem; } 
p.rank-line { font-size: 0.9rem;}




p.buttons a { font-size: 0.75rem; }


.listing-societes.homePage article:nth-of-type(n + 20) { display: none;}

#custom_synt .scroller {  max-height: calc(100vh - 18rem);  }

}





@media (max-width: 400px) {
  html, body { font-size: 14px;}
#form-contact p.buttons a { width: 100%; padding-top: 1.2em; padding-bottom: 1.2em; }

}