/* ═══════════════════════════════════════════════════════════════
   ADAPTIA — mobile.css
   Améliorations RESPONSIVE mobile UNIQUEMENT.
   Tout est sous @media (max-width: …) : le desktop/tablette large
   n'est jamais affecté. Chargé après le <style> de chaque page pour
   que les surcharges l'emportent (à spécificité égale, la dernière
   règle gagne ; !important réservé aux styles inline à neutraliser).
   ═══════════════════════════════════════════════════════════════ */

/* ── Garde-fous globaux ───────────────────────────────────────── */
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Conteneurs de contenu : padding réduit */
  .page-body { padding: 14px 12px 72px !important; }

  /* Toute grille « système » repasse en une colonne */
  .grid-2, .grid-3, .grid-auto { grid-template-columns: 1fr !important; }

  /* Grilles inline (modales, etc.) en 2 colonnes → 1 colonne */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Cartes : autorise un scroll horizontal interne (tableaux larges) */
  .cards-grid { grid-template-columns: 1fr !important; }

  /* Grilles spécifiques par page */
  .meta-grid, .set-grid, .fle-subj-grid, .home-grid,
  .db-stats, .rc-stats { grid-template-columns: 1fr !important; }
  .home-grid { padding: 16px !important; }

  /* Tableau élèves (classes) : scroll horizontal */
  .main { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.t { min-width: 540px; }

  /* Pas de double hamburger si roles.js est chargé */
  .a-header:has(.a-nav-toggle) .a-menu-btn { display: none !important; }
}

/* ── Header : hamburger + compactage ──────────────────────────── */
.a-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  width: 34px; height: 34px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  align-items: center; justify-content: center;
  padding: 0;
}
.a-menu-btn.active { background: rgba(255,255,255,.14); }

/* Sur desktop : masquer le toggle hamburger (roles.js l'affiche toujours) */
@media (min-width: 769px) {
  .a-nav-toggle { display: none !important; }
}

@media (max-width: 768px) {
  .a-menu-btn { display: flex; }
  .a-nav-toggle { display: flex !important; align-items: center; justify-content: center; }
  .a-header { gap: 8px !important; padding: 0 12px !important; }
  /* La frise d'étapes du header est redondante avec la barre workflow */
  .a-steps { display: none !important; }
  .a-logo { font-size: 18px !important; }
  .a-logo small { display: none !important; }
  .a-header-right { gap: 6px !important; margin-left: auto; }
  .a-user-name { display: none !important; }
  .a-user-chip { padding: 3px 6px !important; gap: 4px !important; }
  .a-lang { gap: 2px !important; }
  .a-lang-btn { padding: 2px 5px !important; font-size: 10px !important; }
  .a-settings-btn, .a-notif-btn { width: 30px !important; height: 30px !important; font-size: 14px !important; }

  /* Fallback menu déroulant pour pages avec ancien roles.js inline (sans drawer) */
  #a-sidenav[style*="display:none"].open,
  #a-sidenav[style*="display: none"].open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 56px; left: 0; right: 0;
    background: var(--ink, #1c1b2e);
    padding: 8px;
    gap: 2px;
    z-index: 199;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
    border-top: 1px solid rgba(255,255,255,.1);
    transform: none !important;
  }
  #a-sidenav[style*="display:none"].open .a-nav-item,
  #a-sidenav[style*="display: none"].open .a-nav-item {
    color: rgba(255,255,255,.85);
    padding: 12px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
  }
}

/* Sur très petits écrans, on allège encore le header */
@media (max-width: 400px) {
  .role-badge { display: none !important; }
  .a-logout-btn { display: none !important; } /* déconnexion possible via menu/Paramètres */
}

/* ── Barre d'actions supérieure (titre + boutons) ─────────────── */
@media (max-width: 768px) {
  .top-bar {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .top-bar > div { width: 100%; }
  .top-bar [style*="display:flex"],
  .top-bar [style*="display: flex"] { flex-wrap: wrap; }
  .top-bar .btn { flex: 1 1 auto; }
}

/* ── Layouts 2 colonnes (sidebar + contenu) → empilés ─────────── */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .sidebar {
    max-height: 44vh;
    border-right: none !important;
    border-bottom: 1px solid var(--paper-3, #e3e0d8);
  }
  /* Autres layouts spécifiques 2-col éventuels */
  .bk-layout, .pg-layout, .ge-layout, .cmp-grid3,
  .grid { grid-template-columns: 1fr !important; }
  .edit-grid { grid-template-columns: 1fr !important; }
}

/* ── Tableaux larges : scroll horizontal au lieu de déborder ──── */
@media (max-width: 768px) {
  .card, .panel, .doc-content, .res-ex, .res-corrige { overflow-x: auto; }
  table { max-width: 100%; }
}

/* ── Modales : largeur quasi pleine, marges réduites ──────────── */
@media (max-width: 768px) {
  .modal, .modal-card, .dialog, [class*="-modal-card"], [class*="modal-content"] {
    max-width: 96vw !important;
    width: 96vw !important;
    margin: 0 auto;
  }
}

/* ── Onglets « process » en chevrons (même style que la frise workflow) ──
   Réutilisable sur toutes les pages du processus de génération d'un exercice
   (session, différenciation…) quand les onglets représentent des étapes. */
.proc-chevrons{display:flex;align-items:stretch;margin:0 0 18px;gap:0;}
.proc-chev{flex:1 1 0;min-width:0;position:relative;z-index:1;padding:11px 16px 11px 30px;
  color:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none;
  background:var(--c,var(--accent,#2d6a4f));opacity:.55;font-weight:700;font-size:13px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%,14px 50%);
  margin-left:-14px;transition:opacity .15s,filter .15s,transform .15s,z-index 0s;border:none;
  box-shadow:0 1px 3px rgba(28,27,46,.12);}
.proc-chev:first-child{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%);
  margin-left:0;border-radius:8px 0 0 8px;z-index:1;}
.proc-chev:nth-child(2){z-index:2;}
.proc-chev:nth-child(3){z-index:3;}
.proc-chev:nth-child(4){z-index:4;}
.proc-chev:nth-child(5){z-index:5;}
.proc-chev:last-child{border-radius:0 8px 8px 0;}
.proc-chev:hover{opacity:.88;z-index:20;}
.proc-chev.active{opacity:1;filter:brightness(1.05);transform:translateY(-1px);z-index:15;
  box-shadow:0 0 0 2px rgba(255,255,255,.55),0 0 0 4px var(--c,var(--accent,#2d6a4f)),0 2px 6px rgba(28,27,46,.15);}
.proc-chev.done{opacity:.88;}
.proc-chev .proc-n{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.28);
  font-size:11px;font-weight:800;flex-shrink:0;}
.proc-chev .proc-ico{font-size:15px;line-height:1;}
.proc-chev .proc-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:768px){
  .proc-chevrons{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:6px;filter:none;}
  .proc-chevrons::-webkit-scrollbar{display:none;}
  .proc-chev,.proc-chev:first-child,.proc-chev:last-child{
    clip-path:none;margin:0;border-radius:10px;flex:0 0 auto;padding:9px 13px;opacity:.6;box-shadow:none;transform:none;}
  .proc-chev.active{opacity:1;box-shadow:0 0 0 2px rgba(255,255,255,.55);transform:none;}
  .proc-chev .proc-lbl{display:none;}
  .proc-chev.active .proc-lbl{display:inline;}
}

/* ── Hero (accueil) ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero { padding: 32px 16px !important; }
  .hero h1 { font-size: 28px !important; }
  .hero-actions .btn { flex: 1 1 auto; }

  /* Chevrons accueil : empilés comme la barre workflow */
  .flow-chevrons { flex-direction: column !important; }
  .chev, .chev:first-child {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 50% 100%, 0 calc(100% - 16px)) !important;
    margin: 0 0 -8px 0 !important; border-radius: 0 !important; padding: 15px 20px 24px !important;
  }
  .chev:first-child { border-radius: 12px 12px 0 0 !important; }
  .chev:last-child { clip-path: none !important; border-radius: 0 0 12px 12px !important; padding-bottom: 16px !important; margin-bottom: 0 !important; }
}