/* =====================================================================
   Complements d'affichage — Outils Mont-Olivet
   Charge APRES style.css : ce fichier ne fait qu'ajouter ou corriger,
   il ne remplace jamais la feuille principale.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Bouton de retrait groupe (rouge, texte blanc lisible)
   --------------------------------------------------------------- */
.btn-retirer {
  background: #C8102E;
  color: #fff;
  border: none;
  margin-left: auto;
}
.btn-retirer:hover:not(:disabled) { background: #A50D25; }
.btn-retirer:disabled {
  background: #D8DDE2;
  color: #6B7580;
  cursor: not-allowed;
}

/* Barre de selection groupee */
.barre-groupe { flex-wrap: wrap; }

/* ---------------------------------------------------------------
   2. Tablettes et petits ecrans (<= 900 px)
   --------------------------------------------------------------- */
@media (max-width: 900px) {

  /* Barre du haut : le nom et les liens passent a la ligne proprement */
  .topbar {
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 10px 14px;
  }
  .topbar .user {
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 13px;
  }
  .topbar .brand { font-size: 16px; }

  /* Navigation d'administration : une seule ligne qui defile
     horizontalement, au lieu de s'empiler sur quatre rangs. */
  .adminnav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .adminnav a {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 13px;
    padding: 10px 12px;
  }

  /* Contenu : marges plus serrees */
  .wrap { padding-left: 14px; padding-right: 14px; }
  .wrap-fluid { padding-left: 10px; padding-right: 10px; }

  /* Formulaires en ligne : chaque champ prend la largeur */
  .ligne-form { flex-wrap: wrap; gap: 10px 14px; }
  .ligne-form label { flex: 1 1 180px; }

  /* Tableaux larges : defilement horizontal plutot que debordement */
  .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table thead th { white-space: nowrap; }

  /* Barre de selection : le bouton passe dessous, pleine largeur */
  .barre-groupe { gap: 10px; }
  .btn-retirer { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------
   3. Telephones (<= 560 px)
   --------------------------------------------------------------- */
@media (max-width: 560px) {

  .topbar { padding: 10px 12px; }
  .topbar .user { font-size: 12px; width: 100%; }

  .adminnav a { font-size: 12px; padding: 9px 10px; }

  h1 { font-size: 22px; }

  .wrap { padding-left: 12px; padding-right: 12px; }

  /* Le bloc de filtre occupe toute la largeur */
  .filtre-bloc { padding: 10px 12px !important; }
  .ligne-form label { flex: 1 1 100%; }
  .ligne-form select,
  .ligne-form input { width: 100%; box-sizing: border-box; }

  /* Tuiles de l'accueil : une par ligne */
  .tuiles { grid-template-columns: 1fr; }

  /* Statistiques du tableau de bord : deux par ligne */
  .stats { grid-template-columns: repeat(2, 1fr); }

  /* Cases a cocher : cible tactile plus large */
  .coche-eleve,
  #tout-cocher { transform: scale(1.2); }
  .table td, .table th { padding-top: 10px; padding-bottom: 10px; }
}

/* ---------------------------------------------------------------
   4. GNECA — vue eleve sur petit ecran
   Le libelle et son menu deroulant se superposent au lieu d'etre
   cote a cote : le texte garde toute la largeur, le menu aussi.
   --------------------------------------------------------------- */
@media (max-width: 900px) {

  /* En-tete de grille : titre puis boutons, en colonne */
  .grille-entete { flex-direction: column; align-items: stretch; gap: 12px; }

  /* Onglets de domaine : une ligne qui defile */
  .onglets-domaines {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .onglet-dom {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
    padding: 9px 12px;
  }

  /* Fiche eleve : pleine largeur */
  .fiche-eleve { max-width: 100%; }
  .domaine { padding: 14px 16px; }

  /* Chaque critere : libelle au-dessus, menu en dessous */
  .crit-ligne {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 0;
  }
  .crit-label { line-height: 1.35; }

  /* Le menu ne force plus une largeur minimale : il s'adapte */
  .crit-input-eleve {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
  }

  /* Boutons Precedent / Suivant : cote a cote, largeur egale */
  #prec, #suiv { flex: 1 1 auto; }
}