/* ══════════════════════════════════════════════════════════════
   LettrePro Établissement — couche de finition UI (chargée en dernier)
   Direction : épuré & pro (Notion/Linear) + chaleureux (orange LettrePro).
   S'appuie sur les variables (--bg, --surface, --card, --border, --orange…)
   déjà définies dans chaque page + theme.css (jour/nuit).
   ══════════════════════════════════════════════════════════════ */

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { letter-spacing: -0.02em; }

/* ── Respiration ── */
.wrap { padding-top: 1.75rem; }
.section-title { margin-top: 2.25rem; letter-spacing: -0.01em; }

/* ── Boutons ── */
.btn {
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(0,0,0,.14);
  transition: transform .12s ease, box-shadow .15s ease, filter .12s ease;
  letter-spacing: 0;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232,105,42,.30); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.btn.ghost { box-shadow: none; }
.btn.ghost:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.10); }
.btn.danger, .btn.green { box-shadow: none; }

/* ── Cartes & lignes ── */
.card, .item, .role-card, .member-row, .file, .stat, .tile, .ann, .dev, .storage, .account-card {
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card:hover, .item:hover, .role-card:hover, .file:hover, .ann:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* ── Champs : anneau de focus net ── */
input, select, textarea { transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--orange-glow); }

/* ── Chips / badges ── */
.chip, .badge, .badge-soon { letter-spacing: 0; }

/* ── État vide (guidage : dis quoi faire) ── */
.empty {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.empty .e-ic { font-size: 2.6rem; line-height: 1; }
.empty .e-t { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.1rem; margin: .7rem 0 .35rem; }
.empty .e-d { color: var(--muted); font-size: .92rem; max-width: 440px; margin: 0 auto 1.2rem; line-height: 1.55; }

/* ── Bandeau d'aide / prochaine étape ── */
.hint {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--orange-glow);
  border: 1px solid rgba(232,105,42,.28);
  color: var(--text);
  border-radius: 12px; padding: .85rem 1.1rem;
  font-size: .9rem; line-height: 1.5; margin-bottom: 1.5rem;
}
.hint .h-ic { font-size: 1.15rem; line-height: 1.3; }
.hint b { font-weight: 700; }

/* ── En-tête de page un poil plus aéré ── */
.page-header { margin-bottom: 1.75rem; }
.page-header h1 { line-height: 1.15; }
.page-header p { line-height: 1.5; max-width: 640px; }

/* ══ Menu mobile ☰ (drawer commun établissement) — injecté par etab-menu.js ══ */
.etab-menu-toggle { display: none; }
.etab-drawer-overlay { display: none; }
.etab-drawer { display: none; }
.etab-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: .2rem .35rem .65rem; margin-bottom: .35rem; border-bottom: 1px solid var(--border); }
.etab-drawer-title { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--text); }
.etab-drawer-close { background: none; border: none; color: var(--muted); font-size: 1.25rem; cursor: pointer; line-height: 1; padding: .2rem .4rem; }
.etab-drawer-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .6rem .8rem .3rem; }
.etab-drawer-item { display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left; background: none; border: none; color: var(--text); text-decoration: none; font-family: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; padding: .7rem .8rem; border-radius: 10px; }
.etab-drawer-item:hover { background: var(--card); }
.etab-drawer-item.current { background: var(--orange-glow); color: var(--orange); }

@media (max-width: 768px) {
  .etab-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; color: var(--text);
    font-size: 1.5rem; line-height: 1; cursor: pointer;
    padding: .1rem .4rem; border-radius: 8px; order: -1;
  }
  .etab-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 900; }
  body.etab-drawer-open .etab-drawer-overlay { display: block; }
  .etab-drawer {
    display: flex; flex-direction: column; gap: .12rem;
    position: fixed; top: 0; left: 0; height: 100dvh;
    width: 82%; max-width: 320px;
    background: var(--surface); border-right: 1px solid var(--border);
    box-shadow: 10px 0 30px rgba(0,0,0,.3);
    z-index: 950; overflow-y: auto; padding: .75rem .8rem 2rem;
    transform: translateX(-100%); transition: transform .25s ease;
  }
  body.etab-drawer-open .etab-drawer { transform: translateX(0); }
}