@font-face {
  font-family: 'Lato-Regulart';
  src: url('../clckk-fonts/Lato-Regular/Lato-Regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  --textes: 'Lato-Regular';
}

@font-face {
  font-family: 'Lato-Bold';
  src: url('../clckk-fonts/Lato/Lato-Bold.ttf') format('truetype');
  font-display: swap;
}

:root {
  --textes-strong: 'Lato-Bold';
}

@font-face {
  font-family: 'Lora-Bold';
  src: url('../clckk-fonts/Lora/Lora-Bold.ttf') format('truetype');
  font-display: swap;
}

:root {
  --titres: 'Lora-Bold';
}

@font-face {
  font-family: 'fredoka-one-';
  src: url('../clckk-fonts/Fredoka-One/fredoka-one-v13-latin-regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  --clickk-style: 'fredoka-one-';
}

body {
  padding-top:30px;
  font-family: var(--textes), i-sans-serif, system-ui, sans-serif;
  /* font-size: clamp(100%, 1rem + 2vw, 24px); */
  font-size: clamp(100%, 1rem + 2vw, 24px);
  /* line-height: 1.5; */
  color: #110777;
  background-color: #f9f9f9;
}

.mrgn-t-0 {
  margin-top: 0;
}

.mrgn-b-0 {
  margin-bottom: 0;
}

.mrgn-b-15 {
  margin-bottom: 15%;
}

.mrgn-25-0-25-0 {
  margin: 2.5em 0 2.5em 0;
}

.pddng-05 {
  padding: .5em;
}

.pddng-b-1 {
  padding-bottom: 1em;
}

section {
  margin-top: 1em;
}

h1, .h1, h2, .h2, h3, h4, h5, h6 {
  font-family: var(--titres), i-sans-serif, system-ui, sans-serif;
}

h1,
.h1 {
  font-size: clamp(100%, 2rem + 2vw, 65px);
  color: #474af1;
  text-transform: capitalize;
  display: block;
  margin-block-start: 2em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h2,
.h2 {
  font-size: clamp(75%, 1.5rem + 1.5vw, 48.75px);
}

h3 {
  font-size: clamp(60%, 1.2rem + 1.2vw, 39px);
}

h4 {
  font-size: clamp(50%, 1rem + 1vw, 32.5px);
}

h5 {
  font-size: clamp(42.5%, 0.85rem + 0.85vw, 27.63px);
}

h6 {
  font-size: clamp(37.5%, 0.75rem + 0.75vw, 24.38px);
}

img {
  max-width: 100%;
  height: auto;
}

.link,
a:link,
a:visited,
a:hover,
a:active {
  color:#fe7c6f
}

.lead {
  font-family: var(--textes-strong), i-sans-serif, system-ui, sans-serif;
  font-size: clamp(100%, 1.35rem + 2vw, 40px);
  color: #474af1;
}

strong {
  font-family: var(--textes-strong);
}

.clckk {
  font-family: var(--clickk-style);
  color: #110777;
}

ul.lead li {
  padding-bottom: .65em;
}

ul li::marker {
  color: #fe7c6f; /* Couleur des puces uniquement */
}

.pink {
  color: #fe7c6f;
}

.txt-center {
  text-align: center;
}

.txt-left {
  text-align: left;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cadre {
  position: relative;
  overflow: visible;
  outline: 2px solid #0e056e;
}

.cadre.outline:after {
  position: absolute;
  width: 100%;
  z-index: -1;
  content: "";
  display: block;
  height: 100%;
  top: .35em;
  left: .35em;
  background: #dee6fd;
}

.logo {
  width: 150px;
  height: auto;
}

amp-accordion>section>:first-child {
  margin-top: 1em;
  background-color: unset;
  border: none;
}

amp-accordion>section>:first-child:focus {
  outline-style: none;
}

button+button {
  margin-left: 1em;
}

fieldset {
  border: none;
}

label span,
input[type=submit] {
  display: block;
  margin-top: 1em;
}

textarea {
  width: 90%;
}

button,
input[type=text],
input[type=email],
input[type=submit],
textarea {
  padding: 0.45em;
  font-family: inherit;
  font-size: inherit;
}

button,
input[type=submit] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  font-family: var(--textes), i-sans-serif, system-ui, sans-serif;
  color: #ffffff;
  background-color: #474af1;
  cursor: pointer;
}

button:hover,
input[type=submit]:hover {
  background-color: #2a2785;
}

.linkedin {
  padding-right: .55em;
}

.linkedin span {
  padding: .015em .45em;
  background-color: #474af1;
  color: white;
  font-weight: bold;
}

/* .consentPopup {
  padding: .5em;
  background: hsla(0, 0%, 100%, 0.9);
}

#post-consent-ui {
  display: none;
} */

.navigation_wrapper {

  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding: 15px;
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95); /* Fond blanc avec 75% de transparence */
  border-bottom: #474af1 solid 2px;
}

#navigation {
  width: 37px;
  height: 26px;
  position: relative;
  cursor: pointer;
  outline: none;
}

.navigation_wrapper .logo {
  display: block;
  max-width: 100%; /* Ajuste si tu veux que l'image soit responsive */
  margin-left: auto;
  margin-right: 25px;
}

#navigation span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: #474af1;
  border-radius: 5px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .5s ease-in-out;
}

#navigation span:nth-child(1) {
  top: 0px;
  transform-origin: left center;
}

#navigation span:nth-child(2) {
  top: 13px;
  transform-origin: left center;
}

#navigation span:nth-child(3) {
  top: 26px;
  transform-origin: left center;
}

#navigation.now-active span:nth-child(1) {
  transform: rotate(45deg);
}

#navigation.now-active span:nth-child(2) {
  width: 0%;
  opacity: 0;
  transition: .1s;
}

#navigation.now-active span:nth-child(3) {
  transform: rotate(-45deg);
}

#nav-menu {
  position: fixed; /* Rend le menu fixe également */
  top: 0; /* Place le menu en haut de la page */
  left: 0;
  padding-top: 2%;
  transform: translateX(-100vw);
  opacity: 0;
  z-index: 9; /* Doit être inférieur à celui de la navigation_wrapper pour éviter les conflits de clic */
  transition: transform 0.5s ease, opacity 0.2s ease;
  background-color: #474af1;
}

#nav-menu.now-active {
  transform: translateX(0);
  opacity: 1;
}

#nav-menu.reverse-animation {
  transform: translateX(-100vw);
  opacity: 0;
  transition: transform 0.9s ease, opacity 0.6s ease;
}

.nav-list {
  padding: 45px 15px 0 15px;
  list-style-type: none;
  font-size: 1.35em;
}

.nav-list li {
  padding: 0 0 15px 0;
}

.nav-list li a {
  color: #f9f9f9;
}

@media (min-width: 1024px) {
  .content-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .content {
      max-width: 1024px;
  }

  hr {
      width: 4%;
      margin-left: 48%;
  }

  .flex-container {
      display: flex;
  }

  .flex-container.mrgn-t-0 {
      margin-top: 0;
  }

  .flex-child {
      width: 50%;
  }

  .cadre {
      outline: 4px solid #0e056e;
  }

  .cadre.outline:after {
      top: .65em;
      left: .65em;
  }

}

/* Cookie consent */
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.97);
  border-top: #0e056e 2px solid;
  padding-bottom: 5%;
  text-align: center;
}