/*********** GLOBAL (SOS) ***********/

html {
  --scroll-behavior: smooth;
  scroll-behavior: smooth;
}

body {
  margin: 0px;
}

.global {
  width: 30%;
}

.Masquer {
  display: none !important;
}

.lien {
  color: var(--bleu-70);
  text-decoration: underline;
  font-weight: 500;
}

.lien:hover {
  color: var(--bleu-50);
  cursor: pointer;
}

/*********** ANCRES ***********/

.ancre {
  position: absolute;
  height: 10px;
  display: block;
}

/*********** CONTAINERS ***********/
.ctn-90 {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1300px;
}

.ctn-77 {
  width: 77%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1110px;
}

/*********** TEXTES ***********/
p,
a,
li,
input,
label,
textarea,
select,
button {
  font-family: "Strawford", Lato, Arial !important;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  line-height: 1.3;
}

i {
  font-family: "Strawford", Lato, Arial !important;
  font-weight: 400;
  font-style: oblique;
  font-size: 15px;
  line-height: 1.3;
}

a {
  font-weight: 500;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: Apparat !important;
  font-style: normal;
  font-weight: 600;
  margin-top: 0px;
  color: var(--bleu-80);
}

h1 {
  font-size: 45px;
  line-height: 1.3;
}

h2 {
  font-size: 35px;
  line-height: 1.2;
}

h3 {
  font-size: 25px;
}

h4 {
  font-size: 15px;
}

h5 {
  font-size: 14px;
  line-height: 1.3;
}

@media (max-width: 1000px) {
  h1 {
    font-size: 35px;
    line-height: 1.3;
  }

  h2 {
    font-size: 25px;
    line-height: 1.2;
  }

  h3 {
    font-size: 20px;
  }
  p,
  a,
  li {
    font-size: 14px;
  }
}

.searchbar {
  padding: 8px 10px 8px 10px;
  border-radius: 4px;
  border: 1px solid #b0b9bd;
  color: #b0b9bd;
  background-image: url("/icons/Icon_Loupe_gris.svg");
  background-repeat: no-repeat;
  background-position-x: 95%;
  background-position-y: 50%;
  background-size: 22px;
}

.searchbar:focus {
  color: var(--bleu-70);
  border: 1px solid var(--bleu-70);
  font-weight: 600;
}

/*********** INFOBULLES ***********/

.infobulle {
  width: 15px;
  position: relative;
  top: 2px;
  padding-left: 5px;
}

.infobulle:hover {
  cursor: pointer;
}

/*********** FAQS ***********/

.FAQ a {
  color: var(--vert-100);
}

.FAQ a:hover {
  color: var(--vert-50);
}

.FAQ .accordeon {
  margin-bottom: 10px;
}

#FAQ-CA .accordeon {
  margin-bottom: 0px;
}

#searchbar-FAQ {
  margin-bottom: 20px;
  min-width: 200px;
}

.accordeon {
  background-color: var(--vert-0);
  border-radius: 10px;
  width: 100%;
}

.accordeon:hover {
  cursor: pointer;
}

.accordeon-container {
  padding: 10px 20px 10px 20px;
}

.accordeon.gris {
  background-color: #fafafa;
}

.accordeon p {
  color: var(--vert-100);
}

.accordeon img {
  max-width: 100%;
}

.accordeon .en-tete {
  display: flex;
  align-items: center;
}

.accordeon .contenu {
  padding-right: 20px;
  visibility: visible;
  opacity: 1;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.accordeon.close .contenu {
  visibility: hidden;
  opacity: 0;
  display: none;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.accordeon .col-1 {
  width: 90%;
}

.accordeon .col-1 h4 {
  font-size: 15px;
  margin-bottom: 0px;
  font-weight: 500;
  color: var(--vert-100);
}

.accordeon .col-2 {
  width: 10% !important;
  display: flex;
  justify-content: end;
}

.accordeon .col-2 img {
  width: 24px;
}

.accordeon .col-2 img:hover {
  cursor: pointer;
}

.accordeon-FAQ.open {
  border-radius: 14px;
}

/*********** CLASS COULEUR ***********/

:root {
  --bleu-10: #c6dcff;
  --bleu-30: #85b1f7;
  --bleu-50: #5493f7;
  --bleu-70: #0a5adb;
  --bleu-80: #0a2c7a;
  --bleu-100: #051c54;
  --bleu-110: #04112f;

  --jaune-0: #fff7de;
  --jaune-25: #ffecb0;
  --jaune-50: #f8cc46;
  --jaune-75: #d3a008;
  --jaune-100: #a17800;
  --jaune-110: #775b09;

  --orange-0: #ffede3;
  --orange-25: #ffba96;
  --orange-50: #f77129;
  --orange-75: #b64e17;
  --orange-100: #823004;
  --orange-1100: #632503;

  --vert-0: #dff7ea;
  --vert-25: #c4f5da;
  --vert-50: #52d59d;
  --vert-75: #3bab6f;
  --vert-100: #185e38;
  --vert-110: #12492b;

  --rouge: #ff4d4d;
}

.blanc {
  color: white !important;
}

.b10 {
  color: var(--bleu-10) !important;
}

.b30 {
  color: var(--bleu-30) !important;
}

.b50 {
  color: var(--bleu-50) !important;
}

.b70 {
  color: var(--bleu-70) !important;
}

.b80 {
  color: var(--bleu-80) !important;
}

.b100 {
  color: var(--bleu-100);
}

.b110 {
  color: var(--bleu-110);
}

.j50 {
  color: var(--jaune-50) !important;
}

.j75 {
  color: var(--jaune-75) !important;
}

.j100 {
  color: var(--jaune-100) !important;
}

.j110 {
  color: var(--jaune-110) !important;
}

.v50 {
  color: var(--vert-50) !important;
}

.v75 {
  color: var(--vert-75) !important;
}

.v100 {
  color: var(--vert-100) !important;
}

.v110 {
  color: var(--vert-110) !important;
}

.o50 {
  color: var(--orange-50) !important;
}

.o75 {
  color: var(--orange-75) !important;
}

.o100 {
  color: var(--orange-100) !important;
}

.o110 {
  color: var(--orange-110) !important;
}

.rouge {
  color: var(--rouge);
}

/*********** BOUTONS ***********/

.switch {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 32px;
  cursor: pointer;
  overflow: hidden;
}

.switch-bloc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background-color: #f9fbff;
  border-radius: 6px;
  flex-wrap: nowrap;
}

.switch input {
  position: absolute;
  top: -30px;
  left: -30px;
  width: 0;
  height: 0;
}

.switch input + span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #e8e9ea;
  border-radius: 20px;
}

input.blocage + span {
  background: var(--vert-50) !important;
}

.switch input:checked + span {
  background: var(--vert-50);
}

input.blocage:checked + span {
  background: red !important;
}

.switch input + span:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 5px;
  width: 23px;
  height: 23px;
  background: white;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: all 0.5s;
}

.switch input:checked + span:before {
  left: 30px;
}

.filtre {
  font-weight: 500;
}

.filtre:hover {
  cursor: pointer;
}

.btn-lien {
  padding: 10px 18px;
  background-color: #f5f5f5;
  border-radius: 4px;
  font-weight: 500;
  border: none;
}

.btn-lien:hover {
  background-color: #e0e0e0;
  cursor: pointer;
}

.btn-lien::before {
  font-family: "ETmodules";
  content: url("/icons/Icon_Lien.svg");
  padding-right: 5px;
  position: relative;
  top: 3px;
}

.btn {
  display: inline-block !important;
  text-decoration: none !important;
  color: var(--bleu-70);
  border: 1px solid var(--bleu-70);
  border-radius: 8px;
  padding: 8px 20px 8px 20px;
  background-color: transparent;
  font-weight: 500;
}

.btn:hover,
.btn.actif {
  background-color: var(--bleu-70);
  color: white;
  cursor: pointer;
}

.petit-btn {
  padding: 3px 16px 3px 16px !important;
  line-height: 1.6;
}

.btn-add:hover {
  cursor: pointer;
}

.btn-add.inactif {
  color: #e0e0e0;
  border: 1px solid #e0e0e0;
  cursor: not-allowed;
  pointer-events: none;
}

input.inactif {
  color: gray !important;
  pointer-events: none;
}

.btn.telecharger::before {
  content: url("/icons/Icon_Telechargement_Bleu-70.svg");
  width: 13px;
  display: inline-block;
  margin-right: 5px;
}

.btn-blanc.telecharger::before {
  content: url("/icons/Icon_Telechargement_Blanc.svg");
}

.btn.telecharger:hover::before {
  content: url("/icons/Icon_Telechargement_Blanc.svg");
  width: 13px;
  display: inline-block;
  margin-right: 5px;
}

.btn-blanc.telecharger:hover::before {
  content: url("/icons/Icon_Telechargement_Bleu-70.svg");
}

.btn.off {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn.supprimer {
  background-color: red;
  border-color: red;
  color: white;
}

/*------- Boutons BLANCS -------*/

.btn-blanc {
  background-color: transparent;
  color: white !important;
  border: 1px solid white !important;
}

.btn-blanc:hover,
.btn-blanc.actif {
  background-color: white !important;
  color: var(--bleu-70) !important;
}

/*------- Boutons BLEUS 80 -------*/
.btn-b80 {
  background-color: var(--bleu-80);
  color: white !important;
  border: 1px solid var(--bleu-80) !important;
}

.btn-b80:hover {
  background-color: var(--bleu-80) !important;
  color: white !important;
  border: 1px solid var(--bleu-80) !important;
}

/*------- Boutons BLEUS 70 -------*/
.btn-b70 {
  background-color: transparent;
  color: var(--bleu-70) !important;
  border: 1px solid var(--bleu-70) !important;
}

.btn-b70:hover {
  background-color: var(--bleu-70) !important;
  color: white !important;
  border: 1px solid var(--bleu-70) !important;
}

.btn-b70_2 {
  background-color: var(--bleu-70) !important;
  color: white !important;
  border: 1px solid var(--bleu-70) !important;
}

.btn-b70_2:hover {
  background-color: transparent !important;
  color: var(--bleu-70) !important;
  border: 1px solid var(--bleu-70) !important;
}

/*------- Boutons VERTS -------*/
.btn-v50_2 {
  background-color: var(--vert-50);
  color: var(--vert-100);
  border: 1px solid var(--vert-50);
}

.btn-v50_2:hover {
  background-color: var(--bleu-70);
  color: white;
  border: 1px solid var(--bleu-70);
}

/*------- Boutons JAUNES -------*/
.btn-j100 {
  background-color: transparent;
  color: var(--jaune-100);
  border: 1px solid var(--jaune-100);
}

.btn-j100:hover {
  background-color: var(--jaune-100);
  color: white;
  border: 1px solid var(--jaune-100);
}

.btn-j110 {
  background-color: transparent;
  color: var(--jaune-110);
  border: 1px solid var(--jaune-110);
}

.btn-j110:hover {
  background-color: var(--jaune-110);
  color: white;
  border: 1px solid var(--jaune-110);
}

/*------- Boutons ORANGES -------*/
.btn-o50 {
  background-color: transparent;
  color: var(--orange-50);
  border: 1px solid var(--orange-50);
}

.btn-o50:hover {
  background-color: var(--orange-50);
  color: white;
}

/*********** BOUTONS FILTRES ***********/
.btn.filtre,
.btn.onglet {
  border-radius: 99px;
}

.filtre-V1 .btn-filtre {
  display: inline-block;
  background-color: #f9fbff;
  padding: 11px 25px;
  border-radius: 3px;
  transition: all 0.2s ease-in-out;
}

.filtre-V1 .btn-filtre:hover {
  cursor: pointer;
}

.filtre-V1.actif .btn-filtre,
.filtre-V1 .btn-filtre:hover {
  background-color: var(--bleu-70);
  color: white;
  transition: all 0.2s ease-in-out;
}

.filtre-V1.actif .type-filtre::after,
.filtre-V1 .btn-filtre:hover .type-filtre::after {
  content: url("../icons/Icon_Fleche-sous-menu_Blanc.svg");
}

.filtre-V1.actif .type-filtre::after {
  transform: rotate(180deg);
  padding-right: 13px;
  padding-left: 0px;
}

.filtre-V1 .type-filtre::after {
  font-family: "ETmodules";
  content: url("../icons/Icon_Fleche-sous-menu_Noir.svg");
  padding-left: 13px;
  width: 10px;
  display: inline-block;
}

.filtre-V1 .type-filtre {
  margin: 0px;
}

.filtre-V1 .titre-filtre {
  font-weight: 600;
}

.filtre-V1.actif .liste-filtre {
  opacity: 1;
  visibility: visible;
  transition: all 0.2s ease-in-out;
}

.filtre-V1 .liste-filtre {
  font-size: 16px;
  font-weight: bold;
  z-index: 4;
  position: absolute;
  background-color: white;
  padding: 10px 10px 10px 25px;
  border-radius: 0px 0px 4px 4px;
  opacity: 0;
  visibility: hidden;
  min-width: 151px;
  transition: all 0.2s ease-in-out;
}

.filtre-V1 .liste-filtre ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.filtre-V1 .liste-filtre .filtre.actif {
  color: var(--bleu-70);
}

.filtre-V1 .liste-filtre li:hover a {
  color: var(--bleu-70);
  cursor: pointer;
}

/*********** PAGINATION ***********/

.pagination {
  display: flex;
  gap: 10px;
  justify-content: end;
  align-items: center;
  margin-top: 20px;
}

.pagination p {
  margin: 0px;
}

.lien-page {
  border: none;
}

.pagination a,
.pagination button {
  text-decoration: none;
  background-color: #f5f5f5;
  color: #404b52;
  padding: 10px 18px;
  border-radius: 8px;
  display: inline-block;
}

.pagination a:hover,
.pagination button:hover {
  cursor: pointer;
}

.pagination a:hover,
.pagination a.active,
.pagination button:hover,
.pagination button.active {
  background-color: var(--bleu-70);
  color: white;
}

.pagination a.disabled,
.pagination button.disabled {
  opacity: 0.15;
  pointer-events: none;
  border: 1px dotted;
}

/*********** RESPONSIF VIDÉO YOUTUBE ***********/

.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.video-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

/*********** LISTES À PUCES ***********/

ul.fleches {
  padding: 0px 0px 0px 15px;
  display: flex;
  flex-direction: column;
  list-style: none;
}

ul.fleches li::before {
  content: "➜";
  font-size: 15px;
  position: relative;
  margin-right: 7px;
}

ul.vert li::before {
  color: var(--vert-50);
}

ul.jaune li::before {
  color: var(--jaune-50);
}

ul.orange li::before {
  color: var(--orange-50);
}

/*********** FONTS ***********/

@font-face {
  font-family: "Strawford";
  src: url("../fonts/Strawford/ttf/Strawford-Regular.ttf") format("truetype"),
    url("../fonts/Strawford/otf/Strawford-Regular.otf") format("opentype"),
    url("../fonts/Strawford/woff/Strawford-Regular.woff") format("woff");
  font-stretch: normal;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Strawford";
  src: url("../fonts/Strawford/ttf/Strawford-Medium.ttf") format("truetype"),
    url("../fonts/Strawford/otf/Strawford-Medium.otf") format("opentype"),
    url("../fonts/Strawford/woff/Strawford-Medium.woff") format("woff");
  font-stretch: normal;
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Apparat";
  src: url("https://use.typekit.net/af/12eaf6/00000000000000007735ed03/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
      format("woff2"),
    url("https://use.typekit.net/af/12eaf6/00000000000000007735ed03/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
      format("woff"),
    url("https://use.typekit.net/af/12eaf6/00000000000000007735ed03/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
      format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

@font-face {
  font-family: "Apparat";
  src: url("https://use.typekit.net/af/c7a9e9/00000000000000007735ed0c/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3")
      format("woff2"),
    url("https://use.typekit.net/af/c7a9e9/00000000000000007735ed0c/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3")
      format("woff"),
    url("https://use.typekit.net/af/c7a9e9/00000000000000007735ed0c/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3")
      format("opentype");
  font-display: auto;
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
}

@font-face {
  font-family: "Apparat";
  src: url("https://use.typekit.net/af/53931d/00000000000000007735ed01/30/l?subset_id=2&fvd=n5&v=3")
      format("woff2"),
    url("https://use.typekit.net/af/53931d/00000000000000007735ed01/30/d?subset_id=2&fvd=n5&v=3")
      format("woff"),
    url("https://use.typekit.net/af/53931d/00000000000000007735ed01/30/a?subset_id=2&fvd=n5&v=3")
      format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
}

@font-face {
  font-family: "Apparat";
  src: url("https://use.typekit.net/af/cf4d7b/00000000000000007735ed09/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3")
      format("woff2"),
    url("https://use.typekit.net/af/cf4d7b/00000000000000007735ed09/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3")
      format("woff"),
    url("https://use.typekit.net/af/cf4d7b/00000000000000007735ed09/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3")
      format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
}

@font-face {
  font-family: "Apparat";
  src: url("https://use.typekit.net/af/d87630/00000000000000007735ed0b/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
      format("woff2"),
    url("https://use.typekit.net/af/d87630/00000000000000007735ed0b/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
      format("woff"),
    url("https://use.typekit.net/af/d87630/00000000000000007735ed0b/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
      format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}

@font-face {
  font-family: "Apparat";
  src: url("https://use.typekit.net/af/4314ba/00000000000000007735ed06/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3")
      format("woff2"),
    url("https://use.typekit.net/af/4314ba/00000000000000007735ed06/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3")
      format("woff"),
    url("https://use.typekit.net/af/4314ba/00000000000000007735ed06/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3")
      format("opentype");
  font-display: auto;
  font-style: italic;
  font-weight: 700;
  font-stretch: normal;
}