/* core/css/form.css */


/* =========================
   FORMULAIRES - MÉCANIQUE (CORE)
   ========================= */

/* =========================
   CHAMPS INPUTS DE BASE
   ========================= */
   input[type="text"],
   input[type="email"],
   input[type="tel"],
   input[type="url"],
   input[type="password"],
   input[type="number"],
   input[type="date"],
   input[type="datetime-local"],
   input[type="time"],
   input[type="month"],
   input[type="week"],
   input[type="search"],
   input[type="color"],
   input[type="range"],
   textarea,
   select {
     padding: var(--form-input-padding-y) var(--form-input-padding-x);
     font-size: var(--form-input-font-size);
     border-radius: var(--form-input-border-radius);
     border: var(--form-input-border-width) solid var(--form-input-border);
     background: var(--form-input-bg);
     color: var(--form-input-color);
     transition: var(--form-input-transition);
     box-sizing: border-box !important;
   }
   
   input[type="text"]:hover,
   input[type="email"]:hover,
   input[type="tel"]:hover,
   input[type="url"]:hover,
   input[type="password"]:hover,
   input[type="number"]:hover,
   input[type="date"]:hover,
   input[type="datetime-local"]:hover,
   input[type="time"]:hover,
   input[type="month"]:hover,
   input[type="week"]:hover,
   input[type="search"]:hover,
   input[type="color"]:hover,
   input[type="range"]:hover,
   textarea:hover,
   select:hover,
   input[type="text"]:focus,
   input[type="email"]:focus,
   input[type="tel"]:focus,
   input[type="url"]:focus,
   input[type="password"]:focus,
   input[type="number"]:focus,
   input[type="date"]:focus,
   input[type="datetime-local"]:focus,
   input[type="time"]:focus,
   input[type="month"]:focus,
   input[type="week"]:focus,
   input[type="search"]:focus,
   input[type="color"]:focus,
   input[type="range"]:focus,
   textarea:focus,
   select:focus {
     border-color: var(--form-input-border-focus);
     background: var(--form-input-bg-focus);
     box-shadow: var(--form-input-shadow-focus);
     outline: none;
   }
   
   /* =========================
      STRUCTURE FORMULAIRE
      ========================= */
   .form_container {
     width: 100%;
     display: flow-root;
   }
   
   .form_field {
     position: relative;
     margin-bottom: var(--form-field-margin-bottom);
     width: 100%;
   }
   
   .form_field_floating {
     position: relative;
     margin-bottom: var(--form-field-margin-bottom);
     padding-top: var(--form-field-floating-padding-top);
   }
   
   /* =========================
      LABELS FLOTTANTS (100% CSS)
      ========================= */
   .form_label_floating {
     position: absolute;
     left: var(--form-label-floating-left);
     top: var(--form-label-floating-top);
     pointer-events: none;
     color: var(--form-label-floating-color);
     font-size: var(--form-label-floating-font-size);
     transition: var(--form-label-floating-transition);
     background: var(--form-label-floating-bg);
     border-radius: var(--form-label-floating-border-radius);
     z-index: 1;
     line-height: 1;
   }
   
   /* Label actif (focus ou valeur présente) */
   .form_field_floating input:focus ~ .form_label_floating,
   .form_field_floating input:not(:placeholder-shown) ~ .form_label_floating,
   .form_field_floating textarea:focus ~ .form_label_floating,
   .form_field_floating textarea:not(:placeholder-shown) ~ .form_label_floating,
   .form_field_floating select:focus ~ .form_label_floating,
   .form_field_floating select:not([value=""]) ~ .form_label_floating,
   .form_field_floating input[type="date"]:not([value=""]) ~ .form_label_floating,
   .form_field_floating input[type="time"]:not([value=""]) ~ .form_label_floating,
   .form_field_floating input[type="datetime-local"]:not([value=""]) ~ .form_label_floating,
   .form_field_floating input[type="month"]:not([value=""]) ~ .form_label_floating,
   .form_field_floating input[type="week"]:not([value=""]) ~ .form_label_floating {
     top: var(--form-label-floating-active-top);
     left: var(--form-label-floating-active-left);
     font-size: var(--form-label-floating-active-font-size);
     color: var(--form-label-floating-active-color);
     background: var(--form-label-floating-active-bg);
     padding: var(--form-label-floating-active-padding);
     transform: translateY(0);
   }
   
   /* Label radio en mode floating : toujours en haut, style identique à date/select */
   .form_label_floating_static {
     top: var(--form-label-floating-active-top) !important;
     left: var(--form-label-floating-active-left) !important;
     font-size: var(--form-label-floating-active-font-size) !important;
     color: var(--form-label-floating-active-color) !important;
     background: var(--form-label-floating-active-bg) !important;
     padding: var(--form-label-floating-active-padding) !important;
     transform: translateY(0) !important;
     transition: none !important;
   }
   
   /* Padding uniforme pour tous les champs avec label flottant */
   .form_field_floating input,
   .form_field_floating textarea,
   .form_field_floating select {
     padding-top: var(--form-input-floating-padding-top);
     padding-bottom: var(--form-input-floating-padding-bottom);
   }
   
   /* =========================
      LAYOUT STANDARD (Label à gauche)
      ========================= */
   .form_field_standard {
     display: flex;
     align-items: center;
     gap: var(--form-layout-standard-gap);
   }
   
   .form_label_standard {
     min-width: var(--form-label-standard-min-width);
     font-size: var(--form-label-standard-font-size);
     color: var(--form-label-standard-color);
     text-align: left;
     flex-shrink: 0;
   }
   
   /* Champs texte : prennent tout l'espace restant */
   .form_field_standard input[type="text"],
   .form_field_standard input[type="email"],
   .form_field_standard input[type="tel"],
   .form_field_standard input[type="url"],
   .form_field_standard input[type="password"],
   .form_field_standard input[type="search"],
   .form_field_standard textarea {
     flex: 1;
   }
   
   /* Champs avec largeur native : width auto (pas de flex) */
   .form_field_standard input[type="number"] {
     width: auto;
     max-width: var(--form-input-number-max-width);
   }
   .form_field_standard input[type="date"],
   .form_field_standard input[type="datetime-local"],
   .form_field_standard input[type="time"],
   .form_field_standard input[type="month"],
   .form_field_standard input[type="week"],
   .form_field_standard input[type="color"],
   .form_field_standard input[type="range"],
   .form_field_standard select {
     width: auto;
   }
   
   /* =========================
      LAYOUT STACKED (Label au-dessus)
      ========================= */
   .form_field_stacked {
     display: flex;
     flex-direction: column;
   }
   
   .form_label_stacked {
     font-size: var(--form-label-stacked-font-size);
     color: var(--form-label-stacked-color);
     margin-bottom: var(--form-label-stacked-margin-bottom);
     font-weight: var(--form-label-stacked-font-weight);
   }
   
   /* Champs texte : width 100% */
   .form_field_stacked input[type="text"],
   .form_field_stacked input[type="email"],
   .form_field_stacked input[type="tel"],
   .form_field_stacked input[type="url"],
   .form_field_stacked input[type="password"],
   .form_field_stacked input[type="search"],
   .form_field_stacked textarea {
     width: 100%;
   }
   
   /* Champs avec largeur native : width auto */
   .form_field_stacked input[type="number"] {
     width: auto;
     max-width: var(--form-input-number-max-width);
   }
   .form_field_stacked input[type="date"],
   .form_field_stacked input[type="datetime-local"],
   .form_field_stacked input[type="time"],
   .form_field_stacked input[type="month"],
   .form_field_stacked input[type="week"],
   .form_field_stacked input[type="color"],
   .form_field_stacked input[type="range"],
   .form_field_stacked select {
     width: auto;
   }
   
   /* =========================
      SECTIONS
      ========================= */
   .form_section {
     margin: var(--form-section-margin);
     padding-bottom: var(--form-section-padding-bottom);
     border-bottom: var(--form-section-border-width) solid var(--form-section-border);
   }
   
   .form_section_title {
     font-size: var(--form-section-title-font-size);
     font-weight: var(--form-section-title-font-weight);
     color: var(--form-section-title-color);
     margin: 0;
   }
   
   /* =========================
      GROUPES INLINE
      ========================= */
   .form_group_inline {
     display: flex;
     align-items: center;
     gap: var(--form-group-inline-gap);
     margin-bottom: var(--form-group-inline-margin-bottom);
     flex-wrap: wrap;
   }
   
   .form_group_label {
     font-size: var(--form-group-label-font-size);
     font-weight: var(--form-group-label-font-weight);
     color: var(--form-group-label-color);
     margin-right: var(--form-group-label-margin-right);
     min-width: var(--form-group-label-min-width);
   }
   
   .form_group_fields {
     display: flex;
     align-items: center;
     gap: var(--form-group-fields-gap);
     flex: 1;
     flex-wrap: wrap;
   }
   
   .form_group_separator {
     color: var(--form-group-separator-color);
     font-size: var(--form-group-separator-font-size);
   }
   


  /* =========================
     GROUPES INLINE - STYLES CHAMPS
     ========================= */
     .form_group_inline .form_field,
     .form_group_inline .form_field_floating,
     .form_group_inline .form_field.form_field_floating {
       margin-bottom: 0;
       width: auto;
       flex-grow: 0;
       flex-shrink: 1;
       flex-basis: auto;
     }

  /* Champs texte dans groupe inline : prennent l'espace disponible */
  .form_group_inline .form_field input[type="text"],
  .form_group_inline .form_field input[type="email"],
  .form_group_inline .form_field input[type="tel"],
  .form_group_inline .form_field input[type="url"],
  .form_group_inline .form_field input[type="password"],
  .form_group_inline .form_field input[type="search"],
  .form_group_inline .form_field textarea,
  .form_group_inline .form_field_floating input[type="text"],
  .form_group_inline .form_field_floating input[type="email"],
  .form_group_inline .form_field_floating input[type="tel"],
  .form_group_inline .form_field_floating input[type="url"],
  .form_group_inline .form_field_floating input[type="password"],
  .form_group_inline .form_field_floating input[type="search"],
  .form_group_inline .form_field_floating textarea {
    width: 100%; /* 100% de leur conteneur .form_field, pas de la page */
  }

  /* Champs avec largeur native dans groupe inline */
  .form_group_inline .form_field input[type="number"],
  .form_group_inline .form_field_floating input[type="number"] {
    width: auto;
    max-width: var(--form-input-number-max-width);
  }

  .form_group_inline .form_field input[type="date"],
  .form_group_inline .form_field input[type="datetime-local"],
  .form_group_inline .form_field input[type="time"],
  .form_group_inline .form_field input[type="month"],
  .form_group_inline .form_field input[type="week"],
  .form_group_inline .form_field input[type="color"],
  .form_group_inline .form_field input[type="range"],
  .form_group_inline .form_field select,
  .form_group_inline .form_field_floating input[type="date"],
  .form_group_inline .form_field_floating input[type="datetime-local"],
  .form_group_inline .form_field_floating input[type="time"],
  .form_group_inline .form_field_floating input[type="month"],
  .form_group_inline .form_field_floating input[type="week"],
  .form_group_inline .form_field_floating input[type="color"],
  .form_group_inline .form_field_floating input[type="range"],
  .form_group_inline .form_field_floating select {
    width: auto;
  }

  /* Select avec texte long : troncature avec ellipsis */
    .form_field select,
    .form_field_floating select {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      max-width: 100%;
    }
    /* Blocs imbriqués dans form_group_inline : pas de marge qui perturbe l'alignement flex */
    .form_group_inline > .form_block {
      margin-bottom: 0;
      margin-top: 0;
    }
   /* =========================
      GROUPES GRID
      ========================= */
   .form_group_grid {
     display: grid;
     gap: var(--form-group-grid-gap);
     margin-bottom: var(--form-group-grid-margin-bottom);
   }
   
   .form_group_label_grid {
     grid-column: 1 / -1;
     font-size: var(--form-group-label-grid-font-size);
     font-weight: var(--form-group-label-grid-font-weight);
     color: var(--form-group-label-grid-color);
     margin-bottom: var(--form-group-label-grid-margin-bottom);
   }
   
   .form_group_grid .form_field {
     margin-bottom: 0;
   }
   
   /* =========================
      CHECKBOX ET RADIO
      ========================= */
   .form_radio_group {
     display: flex;
     gap: var(--form-radio-group-gap);
     flex-wrap: wrap;
   }
   
   .form_radio_item {
     display: flex;
     align-items: center;
     gap: var(--form-radio-item-gap);
   }
   
   .form_radio_item input[type="radio"] {
     width: auto;
     margin: 0;
   }
   
   .form_radio_item label {
     margin: 0;
     font-weight: normal;
     cursor: pointer;
   }
   
   .form_field input[type="checkbox"] + label {
     margin-left: var(--form-checkbox-label-margin-left);
     font-weight: normal;
     cursor: pointer;
   }

   
  /* =========================
     BLOCS FORMULAIRES
     ========================= */
  .form_block {
    margin-bottom: var(--form-block-margin-bottom);
  }
  
  .form_block_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--form-block-header-margin-bottom);
  }
  
  .form_block_title {
    font-size: var(--form-block-title-font-size);
    font-weight: var(--form-block-title-font-weight);
    color: var(--form-block-title-color);
    margin: 0;
  }
  
  
  .form_block_content {
    transition: var(--form-block-content-transition);
    overflow: hidden;
  }
 
/* =========================
   TEXTAREA AUTO-RESIZE
   ========================= */
   textarea {
        resize: vertical;
        overflow-y: auto;
        max-height: 300px;
    }

/* =========================
  RESPONSIVE MOBILE
========================= */
@media (max-width: 768px) {
  textarea {
      max-height: 180px;
  }
}