@import url('https://fonts.googleapis.com/css2?family=Caudex:ital,wght@0,400;0,700;1,400;1,700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

/* Variable collection */
:root {
  --neutres-blanc: #ffffff;
  --neutres-gris-gris-100: #d2d6e1;
  --neutres-gris-gris-200: #b6bbca;
  --neutres-gris-gris-300: #99a0b3;
  --neutres-gris-gris-400: #838ba1;
  --neutres-gris-gris-50: #f0f2f5;
  --neutres-gris-gris-500: #6e7790;
  --neutres-gris-gris-600: #60697f;
  --neutres-gris-gris-700: #4e5568;
  --neutres-gris-gris-800: #3e4352;
  --neutres-gris-gris-900: #2b2f3b;
  --primary-primary-100: #b3dfd4;
  --primary-primary-200: #83cbb9;
  --primary-primary-300: #53b69e;
  --primary-primary-400: #32a68b;
  --primary-primary-50: #e0f2ee;
  --primary-primary-500: #199678;
  --primary-primary-600-base: #16896c;
  --primary-primary-700: #12795d;
  --primary-primary-800: #0b6950;
  --primary-primary-900: #034d35;
  --sémantique-bleu-50: #e3f2fd;
  --sémantique-bleu-500: #2194f3;
  --sémantique-bleu-700: #1a75d2;
  --sémantique-bleu-900: #1045a1;
  --sémantique-orange-200: #fccd85;
  --sémantique-orange-50: #fef3e1;
  --sémantique-orange-800: #e97016;
  --sémantique-rouge-50: #fdebee;
  --sémantique-rouge-500: #ec433a;
  --sémantique-rouge-900: #af2021;
  --sémantique-vert-50: #e0f3f1;
  --sémantique-vert-500: #019c8a;
  --gutter: 20px;
  --width: 1280px;
  --col12: var(--width);
}

@media (max-width: 1280px) {
  .col12 {
    width: 100%;
  }
  :root {
    --width: 100%;
  }
}

h1,
h2,
h3,
h4,
.subtitle {
  font-family: "Caudex", serif;
}

input, p, span, label, button, select, textarea, option {
  font-family: 'Mulish', sans-serif;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0px;
}

h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0px;
}

h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0px;
}

h4 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.02em;
}

.col12 {
  width: var(--col12);
  margin: 0 auto;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

.rred {
  color: var(--sémantique-rouge-500)!important;
}

.ggreen {
  color: var(--sémantique-vert-500)!important;
}

.rouge {
  border: 0!important;
  border-bottom: 3px solid var(--sémantique-rouge-500)!important;
}

.vert {
  border: 0!important;
  border-bottom: 3px solid var(--sémantique-vert-500)!important;
}

.erreur {
  color: var(--sémantique-rouge-500)!important;
}

.error {
  color: var(--sémantique-rouge-500)!important;
}



.primary-button {
  background-color: var(--primary-primary-600-base);
  color: var(--neutres-blanc)!important;
  font-size: 16px!important;
  font-weight: 600;
  font-family: 'Mulish', sans-serif;
  padding: 10px 16px;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  border: none;
}

.primary-button.alert {
  background-color: var(--sémantique-rouge-500);
  color: var(--neutres-blanc);
}

.primary-button.jaune {
  background-color: #F9B01F;
  color: var(--neutres-gris-gris-900)!important;
}

.primary-button svg {
  width: 24px;
  height: 24px;
  color: var(--neutres-blanc);
}

.primary-button.jaune svg {
  color: var(--neutres-gris-gris-900);
}

.primary-button:hover {
  background-color: var(--primary-primary-700);
}

.primary-button.alert:hover {
  background-color: var(--sémantique-rouge-900);
}

.primary-button.jaune:hover {
  background-color: #F78E1B;
}


.primary-button.disabled {
  background-color: var(--neutres-gris-gris-50);
  color: var(--neutres-gris-gris-500);
  cursor: not-allowed;
}

.secondary-button {
  background-color: var(--neutres-blanc);
  color: var(--primary-primary-600-base);
  font-size: 16px;
  font-weight: 600;
  font-family: 'Mulish', sans-serif;
  padding: 10px 16px;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  /* align-self: stretch; */
  border: 1px solid var(--neutres-gris-gris-500);
}

.secondary-button svg {
  width: 24px;
  height: 24px;
  color: var(--primary-primary-600-base);
}

.secondary-button:hover {
  background-color: var(--primary-primary-50);
}

.secondary-button.disabled {
  background-color: var(--neutres-gris-gris-50);
  cursor: not-allowed;
}

.secondary-button.disabled span, .secondary-button.disabled svg {
  opacity: 0.38;
}

.tertiary-button {
  background-color: transparent;
  color: var(--primary-primary-600-base);
  font-size: 16px;
  font-weight: 600;
  font-family: 'Mulish', sans-serif;
  padding: 10px 24px;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  align-self: stretch;
}

.tertiary-button:hover {
  background-color: var(--primary-primary-50);
}

.icon-button {
  display: flex;
  align-items: center;
  padding: 8px;
  color: var(--neutres-gris-gris-500);
  /* background-color: var(--primary-primary-50); */
  border-radius: 50%; /* Changé de 50px à 50% pour un cercle parfait */
  cursor: pointer;
  gap: 8px;
  width: 24px;
  height: 24px; /* Assurez-vous que la hauteur est définie */
  aspect-ratio: 1; /* Force un ratio 1:1 pour garantir un cercle */
}

.icon-button:hover {
  background-color: var(--primary-primary-50);
  color: var(--primary-primary-600-base);
}

.icon-button.alert:hover {
  background-color: var(--sémantique-rouge-50);
  color: var(--sémantique-rouge-500);
}