/* ------------------------------------------------------------------
  Bizzet Contact Form – Notion-like Minimal UI
  Version complète & optimisée
------------------------------------------------------------------ */

.bizzet-contact-form {
  --ba-gap: 12px;
  --ba-col-span: 1;
  --ba-accent: #004968;
  --ba-accent-dark: #00374e;
  --ba-field-bg: #ffffff;
  --ba-text: #1f2937;
  --ba-muted: #6b7280;
  --ba-border: rgba(15, 23, 42, 0.12);
}

.bizzet-contact-form__wrap {
  display: grid;
  gap: var(--ba-gap);
}

/* -------------------------------------------------------------
   TITRE & DESCRIPTION
------------------------------------------------------------- */
.bizzet-contact-form__title {
  margin: 0 0 6px;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ba-text);
}

.bizzet-contact-form__desc {
  margin: 0 0 14px;
  color: var(--ba-muted);
  font-size: .95rem;
  line-height: 1.5;
}

/* -------------------------------------------------------------
   GRID DES CHAMPS
------------------------------------------------------------- */
.bizzet-contact-form__row {
  display: grid;
  gap: var(--ba-gap);
  grid-template-columns: repeat(var(--ba-col-span), minmax(0, 1fr));
}

.bizzet-contact-form__field {
  grid-column: span var(--ba-field-span, 1);
}

/* -------------------------------------------------------------
   LABELS
------------------------------------------------------------- */
.bizzet-contact-form label {
  display: block;
  font-weight: 500;
  color: var(--ba-text);
  margin-bottom: 6px;
  font-size: .9rem;
}

/* Aide accessibilité */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 1px, 1px);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------
   INPUTS / TEXTAREA / SELECT
------------------------------------------------------------- */
.bizzet-contact-form input[type="text"],
.bizzet-contact-form input[type="email"],
.bizzet-contact-form input[type="tel"],
.bizzet-contact-form input[type="url"],
.bizzet-contact-form input[type="number"],
.bizzet-contact-form input[type="date"],
.bizzet-contact-form textarea,
.bizzet-contact-form select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--ba-border);
  background: var(--ba-field-bg);
  color: var(--ba-text);
  font-size: .95rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.bizzet-contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* Focus */
.bizzet-contact-form input:focus,
.bizzet-contact-form textarea:focus,
.bizzet-contact-form select:focus {
  border-color: var(--ba-accent);
  background-color: #f8f9ff;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.12);
}

/* Erreur */
.bizzet-contact-form [aria-invalid="true"] {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* -------------------------------------------------------------
   SELECT
------------------------------------------------------------- */
.bizzet-contact-form select {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' stroke='%236b7280' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  appearance: none;
}

/* -------------------------------------------------------------
   RADIO CUSTOM
------------------------------------------------------------- */
.bizzet-contact-form__radio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.bizzet-contact-form__radio input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--ba-accent);
}

/* -------------------------------------------------------------
   CHECKBOX CUSTOM
------------------------------------------------------------- */



/* -------------------------------------------------------------
   FIELDSET (RADIO GROUP)
------------------------------------------------------------- */
.bizzet-contact-form__group {
  border: none;
  padding: 0;
  margin: 0;
}

.bizzet-contact-form__group legend {
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--ba-text);
}

/* -------------------------------------------------------------
   CHECKBOX CUSTOM - Compatible avec les 2 structures
------------------------------------------------------------- */

/* Structure 1 : Label qui englobe l'input (checkbox simple) */
.bizzet-contact-form__checkbox.bizzet-contact-form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  user-select: none;
  font-size: .9rem;
  font-weight: 400;
  color: var(--ba-text);
  line-height: 1.5;
}

/* Input checkbox caché mais accessible */
.bizzet-contact-form__check-input {
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid var(--ba-border);
  border-radius: 4px;
  background: var(--ba-field-bg);
  cursor: pointer;
  position: relative;
  transition: all .2s ease;
  margin: 2px 0 0 0;
  flex-shrink: 0;
}

/* Hover */
.bizzet-contact-form__check-input:hover {
  border-color: var(--ba-accent);
  background: #f8f9ff;
}

/* Focus (accessibilité) */
.bizzet-contact-form__check-input:focus:checked {
  outline: none;
  background-color: var(--ba-accent);
  box-shadow: 0 0 0 3px rgba(0, 73, 104, 0.12);
}

/* État coché */
.bizzet-contact-form__check-input:checked {
  background: var(--ba-accent);
  border-color: var(--ba-accent);
}

/* Icône checkmark (✓) */
.bizzet-contact-form__check-input:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* État désactivé */
.bizzet-contact-form__check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* -------------------------------------------------------------
   GDPR CHECKBOX (Structure 2 : Label séparé)
------------------------------------------------------------- */
.bizzet-contact-form__gdpr {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid var(--ba-border);
}

.bizzet-contact-form__gdpr label {
  font-size: .9rem;
  font-weight: 400;
  color: var(--ba-text);
  line-height: 1.5;
  cursor: pointer;
  margin-bottom: 0;
  flex: 1;
}

.bizzet-contact-form__gdpr input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid var(--ba-border);
  border-radius: 4px;
  background: white;
  cursor: pointer;
  position: relative;
  transition: all .2s ease;
  margin-top: 2px;
  flex-shrink: 0;
}

.bizzet-contact-form__gdpr input[type="checkbox"]:hover {
  border-color: var(--ba-accent);
  background: #f8f9ff;
}

.bizzet-contact-form__gdpr input[type="checkbox"]:checked {
  background: var(--ba-accent);
  border-color: var(--ba-accent);
}

.bizzet-contact-form__gdpr input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* État erreur sur checkbox */
.bizzet-contact-form__check-input[aria-invalid="true"],
.bizzet-contact-form__gdpr input[aria-invalid="true"] {
  border-color: #dc2626;
}

/* Erreur message pour GDPR */
.bizzet-contact-form__gdpr + .bizzet-contact-form__error {
  margin-top: 4px;
}


/* -------------------------------------------------------------
   ERREURS / STATUT
------------------------------------------------------------- */
.bizzet-contact-form__error {
  font-size: .8rem;
  color: #dc2626;
  margin-top: 4px;
  display: block;
}

.bizzet-contact-form__message {
  font-size: .9rem;
  line-height: 1.4;
}

.bizzet-contact-form__message--error { color: #dc2626; }
.bizzet-contact-form__message--success { color: #16a34a; }

/* -------------------------------------------------------------
   BOUTON
------------------------------------------------------------- */
.bizzet-contact-form__actions {
  display: flex;
  gap: var(--ba-gap);
  align-items: center;
  margin-top: 2rem;
}

.bizzet-contact-form__submit {
  appearance: none;
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--ba-accent);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: background-color .2s ease, transform .05s ease, opacity .2s ease;
}

.bizzet-contact-form__submit:hover {
  background: var(--ba-accent-dark);
}

.bizzet-contact-form__submit:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.bizzet-contact-form__submit:active {
  transform: translateY(1px) scale(.995);
}

/* -------------------------------------------------------------
   HONEYPOT
------------------------------------------------------------- */
.bizzet-contact-form__hp {
  position: absolute !important;
  left: -9999px !important;
}


input[type="file"] {   
    padding: 10px;
    border: 2px dashed #c7c7c7;
    border-radius: 8px;
    background: #fafafa;
    width: 100%;
    cursor: pointer;
    transition: 0.25s ease;
}

/* Hover sur la zone */
input[type="file"]:hover {
    border-color: var(--ba-accent);
    background: #fff;
}

/* Style du bouton (Chrome/Edge/Firefox) */
input[type="file"]::file-selector-button {
    background: var(--ba-accent);
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    margin-right: 12px;
    cursor: pointer;
    transition: 0.25s ease;
    font-size: 14px;
}

/* Hover bouton */
input[type="file"]::file-selector-button:hover {
    background: var(--ba-accent);
}

/* Style pour Safari (fallback minimal) */
input[type="file"]::-webkit-file-upload-button {
    background: var(--ba-accent);
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
}