:root {
  --primary-accent: #007bff;
  --primary-accent-light: #007bff2a;
  --primary-accent-2: #003c71;
  --primary-accent-3: #ee7624;
  --primary-accent-4: #008738;
  --secondary-hr: #dcdfe4;
  --secondary-white: #ffffff;
  --secondary-bg: #f2f5f8;
  --secondary-bg-green: #2BC46B;

  --font-primary: #4f5a62;

  --v-space-3xs: 4px;
  --v-space-2xs: 8px;
  --v-space-xs: 12px;
  --v-space-s: 16px;
  --v-space-m: 24px;
  --v-space-l: 32px;
  --v-space-xl: 40px;
  --v-space-2xl: 60px;
  --v-space-3xl: 80px;
  --v-space-4xl: 100px;

  --size-xs: 12px;
  --size-s: 14px;
  --size-reg: 16px;
  --size-m: 20px;
  --size-l: 28px;
  --size-xl: 34px;
  --size-2xl: 44px;

  --line-h-100: 16px;
  --line-h-140: 20px;

  --transition-slow: 0.5s;
  --transition-fast: 0.2s;
}

@media (width < 768px) {
  :root {
    --v-space-m: 20px;
    --v-space-l: 24px;
    --v-space-xl: 28px;
    --v-space-2xl: 32px;
    --v-space-3xl: 40px;
    --v-space-4xl: 50px;
    --v-space-6xl: 80px;

    --size-m: 18px;
    --size-l: 20px;
    --size-xl: 24px;
    --size-2xl: 26px;
  }
}

html {
  scroll-behavior: smooth;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

/* On cache le bouton radio natif */
.custom-radio {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/* On crée notre propre cercle : FOND BLANC, BORDURE BLEUE */
.custom-radio-item label::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: var(--v-space-2xs);
  border-radius: 50%;
  border: 2px solid #DCDFE4;
  background-color: var(--secondary-white);
  vertical-align: middle;
  transition: all 150ms ease-in-out;
}

.custom-radio-item label:hover::before {
  border-color: var(--primary-accent-darker, var(--primary-accent));
  box-shadow: 0 0 0 2px rgba(0, 70, 124, 0.2); /* Remplacez par votre variable de couleur RGBA si besoin */
}

.custom-input-item input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 50%;
  border: 2px solid var(--primary-accent);
  background-color: var(--secondary-white);
  cursor: pointer;
  transition: all 150ms ease-in-out;
}

.custom-input-item input[type="radio"]:checked {
  background-color: var(--primary-accent);
  box-shadow: inset 0 0 0 3px var(--secondary-white);
}

.custom-input-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: url('/assets/nimg/icons/uncheck-square.svg') no-repeat center center;
    background-size: contain;
    cursor: pointer;
}

.custom-input-item input[type="checkbox"]:checked {
    background: url('/assets/nimg/icons/blue-check-square.svg') no-repeat center center;
    background-size: contain;
}

/* Style quand le bouton est coché : POINT BLEU */
.custom-radio:checked + label::before {
  background-color: var(--secondary-white); /* Le fond reste BLANC */
  border-color: var(--primary-accent); /* La bordure reste BLEUE */
  box-shadow: inset 0 0 0 3px var(--primary-accent); /* Le point devient BLEU */
}

/* Style de focus pour l'accessibilité */
.custom-radio:focus + label::before {
  outline: 2px solid var(--primary-accent);
  outline-offset: 2px;
}