@layer components {
    select,
    input[type="date"],
    input[type="number"],
    input[type="password"],
    input[type="text"],
    input[type="url"],
    textarea {
        border: 1px solid var(--border-simple) !important; /* gray-300 */
        border-radius: 0.375rem !important;    /* rounded-md */
        background-color: var(--bg-card) !important;
        font-size: 0.75rem !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s ease-in-out, box-shadow 0.2s !important;
        color: var(--text-color) !important;
    }


    select:focus,
    input[type="date"]:focus,
    input[type="number"]:focus,
    input[type="password"]:focus,
    input[type="text"]:focus,
    input[type="url"]:focus,
    textarea:focus {
        outline: none !important;
        background-color: var(--bg-card)!important;
        border-color: var(--border-simple) !important;  /* blue-500 */
        box-shadow: 0 0 0 3px var(--env-ui-color-highlight-2) !important; /* ring */
    }

    form button[type="submit"],
    form input[type="submit"] {
        border: 1px solid var(--border-simple) !important; /* gray-300 */
        border-radius: 0.375rem !important;    /* rounded-md */
        background-color: var(--env-ui-color) !important;
        font-size: 1rem !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s ease-in-out, box-shadow 0.2s !important;
        color: white !important;
        margin: 10px 0 !important;
        padding:  0.5rem 1.25rem !important;
        justify-content: flex-end !important;
    }

    form button[type="submit"]:hover {
        background-color: var(--env-ui-color-light) !important; /* blue-600 */
    }

    form button[type="submit"]:focus,
    form input[type="submit"]:focus {
        outline: none !important;
        background-color: var(--env-ui-color-dark)!important;
        border-color: var(--border-simple) !important; /* blue-500 */
        box-shadow: 0 0 0 3px var(--env-ui-color-highlight-2) !important; /* ring */
    }


    form button[type="button"] {
        border: 1px solid gray ; /* gray-300 */
        border-radius: 0.375rem !important;    /* rounded-md */
        background-color: gray ;
        font-size: 1rem !important;
        box-sizing: border-box !important;
        transition: border-color 0.2s ease-in-out, box-shadow 0.2s !important;
        color: white ;
        margin: 10px 0 !important;
    }

    form label {
        display: block;
        font-weight: 600 !important;
        color: var(--text-color) !important; /* gray-700 */
        font-size: 0.95rem !important;
    }





  /* CHECKBOXES PERSONNALISÉES */
  input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    height: 1.55rem !important; /* 20px */
    width: 1.55rem !important;
    border: 2px solid var(--border-simple)!important;
    border-radius: 0.25rem !important; /* 4px */
    background-color: var(--bg-card)!important;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease-in-out;
  }

  input[type="checkbox"]:checked {
    background-color: var(--env-ui-color-highlight-1) !important;
    border-color: var(--border-simple) !important;
    border-radius: 0.25rem !important; /* réappliquer l'arrondi ici */
  }

}


/* RADIOS PERSONNALISÉS */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 1.25rem;
  width: 1.25rem;
  border: 2px solid var(--border-simple);
  border-radius: 9999px;
  background-color: var(--bg-card);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease-in-out;
}

input[type="radio"]:checked {
  border-color: var(--border-simple) !important;
  background-color: var(--env-ui-color-light) !important;
}