/* ================================================
   HARMONIZE.CSS - diploma.africa v2
   Chargé EN DERNIER pour corriger les incohérences
   entre les fichiers CSS du thème.
   
   PROBLÈMES CORRIGÉS :
   1. Borders : 3 épaisseurs différentes → unifié 1.5px
   2. Couleurs hardcodées → variables CSS
   3. Bouton Réinitialiser : gradient → outline secondaire
   4. Hover/focus : effets incohérents → unifiés
   5. Selects : styles conflictuels → harmonisés
   6. Containers desktop : marges incohérentes
   ================================================ */



/* ========================================
   1. TOKENS — Source unique de vérité
   ======================================== */
:root {
  /* Borders */
  --input-border-width: 1.5px;
  --input-border-color: var(--gray-200);
  --input-border: var(--input-border-width) solid var(--input-border-color);
  --input-radius: 0.75rem;
  --input-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.1);
  
  /* Buttons */
  --btn-primary-bg: linear-gradient(135deg, var(--primary) 0%, var(--cyan) 100%);
  --btn-primary-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
  --btn-primary-shadow-hover: 0 6px 20px rgba(37, 99, 235, 0.35);
  --btn-secondary-bg: white;
  --btn-secondary-color: var(--gray-500);
  --btn-secondary-border: var(--input-border-width) solid var(--gray-300);
  --btn-radius: 0.75rem;
}

/* ========================================
   2. SELECTS — Style uniforme partout
   Override filters.css, search.css, diploma.css
   ======================================== */

.views-exposed-form .form-item label {
    display: none;
}

.etablissement-section .views-exposed-form.bef-exposed-form .form-item label {
    display: none;
}

/* Base : tous les selects dans les formulaires exposés */
.views-exposed-form select {
  border: var(--input-border) !important;
  border-radius: var(--input-radius) !important;
  font-size: 0.9375rem !important;
  padding: 0.75rem 2.5rem 0.75rem 0.875rem !important;
  background-color: white !important;
  color: var(--gray-700) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 1rem !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

/* Hover sur select */
.views-exposed-form select:hover {
  border-color: var(--gray-300) !important;
}

/* Focus sur select */
.views-exposed-form select:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: var(--input-focus-ring) !important;
  background-color: white !important;
}

/* Homepage : selects dans le formulaire hero */
.homepage-search-form select {
  border: var(--input-border) !important;
  border-radius: var(--input-radius) !important;
}

.homepage-search-form select:hover {
  border-color: var(--primary) !important;
  box-shadow: var(--input-focus-ring) !important;
}

.homepage-search-form select:focus {
  border-color: var(--primary) !important;
  box-shadow: var(--input-focus-ring) !important;
}

/* Desktop sidebar : selects dans la filters-card */
@media (min-width: 1024px) {
  .filters-card .views-exposed-form select {
    /*background-color: var(--gray-50) !important;*/
    border: var(--input-border) !important;
  }

  .filters-card .views-exposed-form select:hover {
   /* border-color: var(--gray-300) !important;
    background-color: var(--gray-50) !important;*/
  border-color: var(--primary) !important;
  box-shadow: var(--input-focus-ring) !important;
}
  }

  .filters-card .views-exposed-form select:focus {
    background-color: white !important;
    border-color: var(--primary) !important;
    box-shadow: var(--input-focus-ring) !important;
  }
}

/* Mobile drawer : selects */
@media (max-width: 1023px) {
  .formations-sidebar select {
    border: var(--input-border) !important;
    border-radius: 0.625rem !important;
  }
}

/* ========================================
   3. INPUTS TEXT/SEARCH — Style uniforme
   ======================================== */
.views-exposed-form input[type="text"],
.views-exposed-form input[type="search"] {
  border: var(--input-border) !important;
  border-radius: var(--input-radius) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.views-exposed-form input[type="text"]:focus,
.views-exposed-form input[type="search"]:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: var(--input-focus-ring) !important;
}

/* ========================================
   4. BOUTON PRINCIPAL (Affiche tes résultats)
   Style uniforme partout
   ======================================== */
.views-exposed-form .form-actions input[type="submit"]:first-of-type,
.views-exposed-form .form-actions input[value="Appliquer"],
.views-exposed-form .form-actions input[value="Affiche tes résultats"],
.views-exposed-form .form-actions button[type="submit"] {
  background: var(--btn-primary-bg) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: var(--btn-primary-shadow) !important;
  padding: 0.8125rem 1.25rem !important;
 /* width: 100% !important;*/
}

.etablissements-filters .views-exposed-form .form-actions input[value="Appliquer"] {
  display: none !important;
}


.views-exposed-form .form-actions input[type="submit"]:first-of-type:hover,
.views-exposed-form .form-actions input[value="Appliquer"]:hover,
.views-exposed-form .form-actions input[value="Affiche tes résultats"]:hover,
.views-exposed-form .form-actions button[type="submit"]:hover {
  box-shadow: var(--btn-primary-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

/* ========================================
   5. BOUTON RÉINITIALISER — Toujours secondaire
   JAMAIS gradient, toujours outline gris
   ======================================== */
.views-exposed-form input[value="Réinitialiser"],
.views-exposed-form input[value="Reset"],
.views-exposed-form .bef-reset-button,
.views-exposed-form .form-reset,
.formations-sidebar .form-actions input[value="Réinitialiser"],
.filters-card .form-actions input[value="Réinitialiser"] {
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-color) !important;
  border: var(--btn-secondary-border) !important;
  border-radius: var(--btn-radius) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  padding: 0.75rem 1.25rem !important;
  width: 100% !important;
  /* Pas de gradient ! */
  background-image: none !important;
}

.views-exposed-form input[value="Réinitialiser"]:hover,
.views-exposed-form input[value="Reset"]:hover,
.views-exposed-form .bef-reset-button:hover,
.views-exposed-form .form-reset:hover,
.formations-sidebar .form-actions input[value="Réinitialiser"]:hover,
.filters-card .form-actions input[value="Réinitialiser"]:hover {
  background: var(--gray-50) !important;
  border-color: var(--gray-400) !important;
  color: var(--gray-700) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ========================================
   6. HOMEPAGE — Masquer Réinitialiser
   (pas utile sur le hero)
   ======================================== */
.homepage-search-form input[value="Réinitialiser"],
.homepage-search-form .bef-reset-button,
.homepage-search-form .form-reset {
  display: none !important;
}

/* ========================================
   7. CUSTOM-SELECT — Harmoniser avec le rest
   ======================================== */
.custom-select-trigger {
  border: var(--input-border) !important;
  border-radius: var(--input-radius) !important;
}

.custom-select-trigger:hover,
.custom-select-trigger.active {
  border-color: var(--primary) !important;
  box-shadow: var(--input-focus-ring) !important;
}

/* ========================================
   8. BADGE FILTRE MOBILE — Améliorations
   Ne pas afficher "0", style plus discret
   ======================================== */
.filters-count {
  display: none;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  background: var(--primary);
  color: white;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: 9999px;
  align-items: center;
  justify-content: center;
}

.filters-count:not(:empty)[data-has-filters="true"] {
  display: inline-flex;
}

/* ========================================
   9. DESKTOP CONTAINERS — Uniformiser
   ======================================== */
@media (min-width: 1024px) {

  /* Sidebar filtres desktop : même style partout */
  .filters-card {
    background: white;
    border: var(--input-border);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  }

  /* Actions dans sidebar : empilées */
  .filters-card .views-exposed-form .form-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid var(--gray-100) !important;
  }

  /* Layout formations 2 colonnes */
  .formations-layout {
    display: grid !important;
    grid-template-columns: var(--desktop-sidebar-width, 320px) 1fr !important;
    gap: 2.5rem !important;
  }

  /* Sidebar sticky */
  .formations-sidebar {
    position: sticky !important;
    top: 80px !important;
    align-self: start !important;
  }
}

/* ========================================
   10. MOBILE DRAWER — Cohérence boutons
   ======================================== */
@media (max-width: 1023px) {

  /* Boutons empilés dans le drawer */
  .formations-sidebar .form-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  /* Principal en premier (via order) */
  .formations-sidebar .form-actions input[type="submit"]:first-of-type,
  .formations-sidebar .form-actions input[value="Appliquer"],
  .formations-sidebar .form-actions input[value="Affiche tes résultats"] {
    order: 1 !important;
  }

  /* Réinitialiser en second */
  .formations-sidebar .form-actions input[value="Réinitialiser"],
  .formations-sidebar .form-actions input[value="Reset"] {
    order: 2 !important;
  }
}

/* ========================================
   11. ETATS VIDES — Message sympathique
   ======================================== */
.view-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--gray-500);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ========================================
   12. PAGER / AFFICHER PLUS — Cohérence
   ======================================== */
.pager .button,
.pager__item a.button {
  background: white !important;
  color: var(--primary) !important;
  border: 2px solid var(--primary) !important;
  border-radius: var(--btn-radius) !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.pager .button:hover,
.pager__item a.button:hover {
  background: var(--primary) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

/* ========================================
   13. PRINT — Nettoyage pour debug
   ======================================== */
@media print {
  .bottom-nav,
  .filters-mobile-trigger,
  .filters-drawer-overlay {
    display: none !important;
  }
}

/* ========================================
   14. PAGES DETAIL — Largeurs coherentes
   ======================================== */

/* Le page-wrapper est flex → main-content shrink au contenu
   Forcer 100% width pour remplir le container */
.main-content {
  width: 100% !important;
}

/* Sections etablissement */
@media (min-width: 1024px) {
  .etablissement-detail__header {
    max-width: 1100px !important;
  }
  .etablissement-section {
    max-width: 1000px !important;
  }
}

/* Formation : sections */
@media (min-width: 1024px) {
  .formation-sections {
    max-width: 1000px !important;
  }
  .formation-detail .formation-cta {
    max-width: 1000px !important;
  }
}

/*
.etablissement-section.etablissement-formations .views-exposed-form.bef-exposed-form {
    background: white;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.etablissement-section.etablissement-formations .views-exposed-form.bef-exposed-formn .js-form-item {
    padding: 1rem 1.25rem;
}

.etablissement-section.etablissement-formations .views-exposed-form.bef-exposed-form .form-actions {
  display: flex;
  justify-content: center;
  padding: 1rem;
}


.etablissement-section.etablissement-formations .views-exposed-form.bef-exposed-form .button.form-submit {
  padding: 0.8125rem 5rem !important;
}*/