/* ==========================================================================
   1. STRUCTURE PRINCIPALE (Alignement des 3 champs du haut)
   ========================================================================== */

/* Conteneur principal en Flexbox pour gérer l'alignement global */
form, .container-parent {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important; /* Permet aux blocs du bas de passer à la ligne */
  gap: 24px !important;
  width: 100% !important;
  align-items: center;
}

/* Configuration des 3 blocs de saisie du haut (Même largeur) */
form .js-form-item:not([class*="closed-months"]),
.form-group {
  flex: 1 1 calc(30.333% - 24px) !important; /* Répartition stricte en 3 colonnes */
  min-width: 250px !important;                 /* Évite que les champs soient trop écrasés */
  display: flex !important;
  flex-direction: column !important;
}

/* Ligne de séparation verticale grise entre les 3 blocs de saisie */
form .js-form-item:not([class*="closed-months"]):not(:nth-child(3)),
.form-group:not(:last-child) {
  border-right: 1px solid #eef2f5 !important;
  padding-right: 24px !important;
}

/* Forcer le bloc des Mois et le bouton à prendre 100% de la largeur en dessous */
#edit-closed-months--wrapper,
#edit-actions {
  flex: 0 0 100% !important;
  width: 100% !important;
  margin-top: 20px !important;
}


/* ==========================================================================
   2. GRAPHISME DES CHAMPS DE SAISIE (Haut du formulaire)
   ========================================================================== */

/* Étiquettes (Textes en haut des champs) */
form label {
  font-family: sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #7c828d !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  letter-spacing: 0.5px !important;
}

/* Champs de saisie (Inputs arrondis) */
form input[type="text"],
form input {
  font-family: sans-serif !important;
  font-size: 15px !important;
  font-weight: bold !important;
  color: #1a1f2c !important;
  padding: 12px 16px !important;
  border: 1px solid #dcdfe6 !important;
  border-radius: 10px !important;
  background-color: #ffffff !important;
  outline: none !important;
}

/* Texte explicatif sous les champs */
form p, .help-text {
  font-family: sans-serif !important;
  font-size: 11px !important;
  color: #8c93a1 !important;
  margin-top: 6px !important;
  line-height: 1.4 !important;
}


/* ==========================================================================
   3. ZONE MULTI-SÉLECTION : MOIS FERMÉS (Correction visuelle Checkbox)
   ========================================================================== */

/* Titre de la section "MOIS FERMÉS" */
#edit-closed-months--wrapper legend {
  border: none !important;
  padding: 0 !important;
}

#edit-closed-months--wrapper .fieldset__label {
  font-family: sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #718096 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Conteneur de la grille (les 12 mois répartis en 4 colonnes) */
#edit-closed-months.form-checkboxes {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-top: 15px !important;
}

/* Style de chaque badge de mois */
#edit-closed-months .js-form-item.form-type--checkbox {
  display: flex !important;
  align-items: center !important;
  padding: 14px 16px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background-color: #ffffff !important;
  cursor: pointer !important;
  margin: 0 !important;
  position: relative !important; /* Permet un positionnement interne correct */
}

/* ULTRA-IMPORTANT : Forcer la réapparition de la case à cocher standard et son état coché */
#edit-closed-months .js-form-item.form-type--checkbox input[type="checkbox"] {
  appearance: checkbox !important;         /* Force l'aspect natif du navigateur */
  -webkit-appearance: checkbox !important; /* Compatibilité Safari/Chrome */
  -moz-appearance: checkbox !important;    /* Compatibilité Firefox */
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;             /* Annule les masquages absolute de Drupal */
  width: 16px !important;
  height: 16px !important;
  margin: 10px 10px 0 0 !important;           /* Espace de 10px à droite de la case */
  cursor: pointer !important;
}

/* Supprimer les anciens artifices graphiques de Drupal qui cachent ou dupliquent le visuel */
#edit-closed-months .js-form-item.form-type--checkbox input[type="checkbox"]::before,
#edit-closed-months .js-form-item.form-type--checkbox input[type="checkbox"]::after,
#edit-closed-months .js-form-item.form-type--checkbox::before,
#edit-closed-months .js-form-item.form-type--checkbox::after {
  display: none !important;
  content: none !important;
}

/* Nom du mois à côté de la case */
#edit-closed-months .form-item__label.option {
  font-family: sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #4a5568 !important;
  margin: 0 !important; /* Reset des marges pour s'aligner avec le nouveau margin du input */
  cursor: pointer !important;
  display: inline-block !important;
}

/* ÉTAT COCHÉ : Teinte de fond subtile sur le bloc pour confirmer la sélection */
#edit-closed-months .js-form-item.form-type--checkbox:has(input:checked) {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}

/* Ajustement du texte quand coché */
#edit-closed-months .js-form-item.form-type--checkbox:has(input:checked) .form-item__label.option {
  font-weight: 600 !important;
  color: #1a1f2c !important;
}



/* ==========================================================================
   4. ZONE ACTIONS (Bouton Enregistrer)
   ========================================================================== */

#edit-actions {
  display: block !important;
}
#edit-submit {
  background-color: var(--color-blue-900) !important;
  color: var(--color-white) !important;
  border: 2px solid var(--color-blue-900) !important;
}
/* ==========================================================================
   5. RESPONSIVE DESIGN (Adaptation Tablettes & Mobiles)
   ========================================================================== */

/* Tablettes : Grille des mois passe à 2 colonnes */
@media (max-width: 1024px) {
  #edit-closed-months.form-checkboxes {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Smartphones : Tout s'empile verticalement sur une colonne */
@media (max-width: 768px) {
  form, .container-parent {
    flex-direction: column !important;
  }

  /* Les 3 blocs du haut passent à 100% de largeur */
  form .js-form-item:not([class*="closed-months"]),
  .form-group {
    flex: 1 1 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #eef2f5 !important;
    padding-right: 0 !important;
    padding-bottom: 16px !important;
  }

  /* Grille des mois passe à 1 seule colonne */
  #edit-closed-months.form-checkboxes {
    grid-template-columns: 1fr !important;
  }
}