/* ═══════════════════════════════════════════════════════════════════════════
   Espace staff : commun à staff.html, staff-absences.html et
   staff-gestion-absences.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cartes du tableau de bord ── */
.st-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }

.st-carte {
    position: relative;
    display: block;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 1.35rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

a.st-carte:hover { border-color: var(--primary-color); transform: translateY(-2px); }
.st-carte.disabled { opacity: 0.6; cursor: default; }

.st-icone {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
    margin-bottom: 1rem; background: rgba(76, 141, 255, 0.14); color: var(--primary-color);
}
.st-icone .material-symbols-outlined { font-size: 1.5rem; }
.st-icone.rouge { background: rgba(239, 68, 68, 0.14); color: #f87171; }
.st-icone.or    { background: rgba(241, 196, 15, 0.14); color: #f1c40f; }

.st-carte h3 { font-size: 1.02rem; font-weight: 800; margin-bottom: 0.3rem; }
.st-carte p { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.55; }

.st-badge {
    position: absolute; top: 1rem; right: 1rem;
    font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.25rem 0.5rem; border-radius: 6px;
    background: rgba(255, 255, 255, 0.07); color: var(--text-secondary);
}
.st-badge.accent { background: rgba(76, 141, 255, 0.18); color: var(--primary-color); }

/* ── Carte de grade ── */
.st-grade {
    display: flex; align-items: center; gap: 0.9rem;
    background: linear-gradient(135deg, rgba(76, 141, 255, 0.14), rgba(90, 200, 250, 0.1));
    border: 1px solid rgba(76, 141, 255, 0.35);
    border-radius: 18px; padding: 1.3rem; margin-bottom: 1.75rem;
}
.st-grade-icone {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none;
    background: rgba(76, 141, 255, 0.18); color: var(--primary-color);
}
.st-grade-nom { font-weight: 900; font-size: 1.05rem; }
.st-grade-sous { font-size: 0.84rem; color: var(--text-secondary); margin-top: 0.15rem; }

/* Utilisé aussi hors carte de dashboard (ex. bandeau générique). */
.st-avis {
    display: flex; align-items: flex-start; gap: 0.9rem;
    background: linear-gradient(135deg, rgba(76, 141, 255, 0.14), rgba(90, 200, 250, 0.1));
    border: 1px solid rgba(76, 141, 255, 0.35);
    border-radius: 18px; padding: 1.3rem; margin-bottom: 1.75rem;
}
.st-avis .material-symbols-outlined { color: var(--primary-color); font-size: 1.6rem; flex: none; }
.st-avis-titre { font-weight: 900; font-size: 1rem; margin-bottom: 0.3rem; }
.st-avis p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.65; }

/* ── Refus d'accès ── */
.st-refus { text-align: center; padding: 4rem 1rem; color: var(--text-secondary); }
.st-refus .material-symbols-outlined { font-size: 3rem; opacity: 0.5; display: block; margin-bottom: 0.8rem; }
.st-refus h2 { font-size: 1.2rem; font-weight: 900; color: var(--text-primary); margin-bottom: 0.5rem; }
.st-refus p { line-height: 1.65; max-width: 48ch; margin: 0 auto 1.2rem; }
.st-refus a {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.7rem 1.2rem; border-radius: 12px; text-decoration: none;
    background: var(--gradient-primary); color: #fff; font-weight: 800; font-size: 0.9rem;
}

/* ── Pastille de statut (absences) ── */
.st-pastille {
    display: inline-flex; align-items: center; gap: 0.35rem;
    margin-top: 0.7rem; font-size: 0.72rem; font-weight: 800;
    padding: 0.28rem 0.6rem; border-radius: 999px;
    background: rgba(255, 255, 255, 0.06); color: var(--text-secondary);
}
.st-pastille.attente  { background: rgba(241, 196, 15, 0.16); color: #f1c40f; }
.st-pastille.acceptee { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.st-pastille.refusee  { background: rgba(239, 68, 68, 0.16); color: #f87171; }
.st-pastille.terminee { background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); }

/* ── Types de sanction (signalements) : une couleur par type plutôt que
   trois types sur quatre en gris, illisibles au premier coup d'œil. ── */
.st-pastille.ban   { background: rgba(239, 68, 68, 0.16); color: #f87171; }
.st-pastille.kick  { background: rgba(249, 115, 22, 0.16); color: #fb923c; }
.st-pastille.mute  { background: rgba(90, 200, 250, 0.16); color: #8fbaff; }
.st-pastille.warn  { background: rgba(241, 196, 15, 0.16); color: #f1c40f; }
.st-pastille.autre { background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); }

/* ── Formulaire de demande / édition d'absence ── */
.st-form {
    display: flex; flex-direction: column; gap: 0.85rem;
    background: var(--background-secondary); border: 1px solid var(--border-color);
    border-radius: 18px; padding: 1.3rem; margin-bottom: 1.5rem;
}
.st-champ { display: flex; flex-direction: column; gap: 0.3rem; }
.st-champ label { font-size: 0.78rem; font-weight: 700; color: var(--text-secondary); }
.st-champ input, .st-champ textarea, .st-champ select {
    font-family: inherit; font-size: 0.88rem; padding: 0.6rem 0.75rem; border-radius: 10px;
    background: var(--background-card); border: 1px solid var(--border-color); color: var(--text-primary);
}
.st-champ textarea { resize: vertical; line-height: 1.55; }
.st-champ input:focus, .st-champ textarea:focus, .st-champ select:focus { outline: none; border-color: var(--primary-color); }
.st-champ select option { background: var(--background-secondary); color: var(--text-primary); }
.st-form-err { font-size: 0.82rem; color: #f87171; font-weight: 600; }
.st-form-actions { display: flex; gap: 0.6rem; }

.st-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    cursor: pointer; font-family: inherit; font-size: 0.86rem; font-weight: 700;
    padding: 0.62rem 1.05rem; border: none; border-radius: 12px;
    background: var(--gradient-primary); color: #fff; text-decoration: none;
}
.st-btn:disabled { opacity: 0.55; cursor: default; }
.st-btn.secondaire { background: var(--background-card); color: var(--text-secondary); border: 1px solid var(--border-color); }
.st-btn.danger { background: rgba(239, 68, 68, 0.9); }

/* ── Liste des demandes ── */
.st-demande {
    background: var(--background-secondary); border: 1px solid var(--border-color);
    border-radius: 16px; padding: 1.1rem 1.2rem; margin-bottom: 0.9rem;
}
.st-demande-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.st-demande-duree { font-weight: 800; font-size: 0.96rem; }
.st-demande-raison { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.6; margin-top: 0.5rem; white-space: pre-wrap; }
.st-demande-meta { font-size: 0.76rem; color: var(--text-secondary); margin-top: 0.6rem; }
.st-demande-actions { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.st-demande-refus { font-size: 0.84rem; color: #f87171; margin-top: 0.5rem; }

.st-vide { text-align: center; padding: 3rem 1rem; color: var(--text-secondary); }
.st-vide .material-symbols-outlined { font-size: 2.6rem; opacity: 0.5; display: block; margin-bottom: 0.6rem; }

/* ── Onglets (vue d'ensemble / à traiter, casier, etc.) ── */
.st-onglets { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.st-onglet {
    display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
    padding: 0.55rem 1rem; border-radius: 999px; font-family: inherit;
    font-size: 0.84rem; font-weight: 700;
    background: var(--background-secondary); border: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.st-onglet:hover { color: var(--text-primary); border-color: var(--primary-color); }
.st-onglet.active { background: var(--gradient-primary); border-color: transparent; color: #fff; }
.st-onglet .gw-compte {
    font-size: 0.7rem; font-weight: 800; padding: 0.1rem 0.4rem; border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
}

/* ── Recherche ── */
.st-recherche {
    display: flex; align-items: center; gap: 0.5rem; max-width: 420px;
    padding: 0.6rem 0.9rem; border-radius: 12px; margin-bottom: 1.2rem;
    background: var(--background-secondary); border: 1px solid var(--border-color);
}
.st-recherche:focus-within { border-color: var(--primary-color); }
.st-recherche .material-symbols-outlined { color: var(--text-secondary); font-size: 1.1rem; }
.st-recherche input {
    flex: 1; min-width: 0; border: none; background: none; outline: none;
    font-family: inherit; font-size: 0.88rem; color: var(--text-primary);
}

/* ── Titre de groupe (effectif : catégorie › sous-catégorie) ── */
.st-groupe-titre {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--text-secondary); margin: 1.1rem 0 0.5rem;
}
.st-groupe-titre:first-child { margin-top: 0; }
.st-groupe-titre .gw-compte {
    font-size: 0.68rem; font-weight: 800; padding: 0.08rem 0.4rem; border-radius: 6px;
    background: var(--background-secondary); border: 1px solid var(--border-color);
}

/* ── Ligne compacte (effectif, boutique, giveaways) ── */
.st-ligne {
    display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
    background: var(--background-secondary); border: 1px solid var(--border-color);
    border-radius: 14px; padding: 0.85rem 1.05rem; margin-bottom: 0.6rem;
}
.st-ligne-corps { flex: 1; min-width: 180px; }
.st-ligne-titre { font-weight: 800; font-size: 0.92rem; }
.st-ligne-sous { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.15rem; }
.st-ligne-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.st-ligne input[type="number"], .st-ligne input[type="text"] {
    font-family: inherit; font-size: 0.86rem; padding: 0.45rem 0.6rem; border-radius: 9px;
    background: var(--background-card); border: 1px solid var(--border-color); color: var(--text-primary);
    width: 110px;
}
.st-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; }

/* ── Panneau modal centré (édition, historique, nouveau signalement…) ── */
.st-modal-fond {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); z-index: 9999;
    display: flex; align-items: center; justify-content: center; padding: 1.5rem;
    overflow: hidden;
    animation: stFondApparait 0.2s ease both;
}
.st-modal {
    background: var(--background-secondary); border: 1px solid var(--border-color);
    border-radius: 18px; padding: 1.4rem; width: 100%; max-width: 560px;
    max-height: calc(100dvh - 3rem); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    /* `backwards` et non `both` : un transform laissé en place ferait de la modale le repère des éléments fixed (liste déroulante décalée). */
    animation: stModalApparait 0.22s cubic-bezier(.2,.8,.3,1.1) backwards;
}
.st-modal-fond.st-fermeture { animation: stFondApparait 0.16s ease reverse both; }
.st-modal-fond.st-fermeture .st-modal { animation: stModalApparait 0.16s ease reverse both; }
@keyframes stFondApparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes stModalApparait {
    from { opacity: 0; transform: scale(0.94) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .st-modal-fond, .st-modal, .st-modal-fond.st-fermeture, .st-modal-fond.st-fermeture .st-modal { animation: none; }
}

/* ── Recherche d'un membre à dropdown (documents staff/RP, etc.) ── */
.doc-search-wrap { position: relative; max-width: 420px; }
.doc-results {
    display: none; position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; z-index: 20;
    background: var(--background-secondary); border: 1px solid var(--border-color); border-radius: 12px;
    max-height: 300px; overflow-y: auto; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.doc-results.show { display: block; }
.doc-result {
    display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.55rem 0.7rem; border: none;
    background: none; cursor: pointer; font-family: inherit; text-align: left; color: var(--text-primary);
}
.doc-result:hover { background: var(--background-card-hover); }
.doc-result img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.doc-result-sub { color: var(--text-secondary); font-size: 0.78rem; }
.doc-result-vide { padding: 0.7rem; color: var(--text-secondary); font-size: 0.84rem; }

/* ── Vue « Documents d'un membre » (assets/js/documents-viewer.js) : ──
   type → liste → détail, à la place de tout afficher d'un coup. */
.docv-cible-tete { display: flex; align-items: center; gap: 0.7rem; margin: 1.4rem 0 1rem; }
.docv-cible-tete img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.docv-cible-tete h2 { font-size: 1.05rem; font-weight: 900; }

.docv-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.6rem; margin-bottom: 1.3rem; }
.docv-type {
    display: flex; align-items: center; gap: 0.55rem; cursor: pointer; text-align: left;
    padding: 0.65rem 0.8rem; border-radius: 12px; font-family: inherit;
    background: var(--background-secondary); border: 1px solid var(--border-color); color: var(--text-primary);
}
.docv-type:hover { border-color: var(--primary-color); }
.docv-type.active { border-color: var(--primary-color); background: rgba(76, 141, 255, 0.1); }
.docv-type.vide { color: var(--text-secondary); opacity: 0.65; }
.docv-type .material-symbols-outlined { font-size: 1.15rem; flex: none; }
.docv-type span:not(.material-symbols-outlined):not(.docv-type-badge) { flex: 1; font-size: 0.84rem; font-weight: 700; }
.docv-type-badge {
    flex: none; min-width: 1.4rem; text-align: center; font-size: 0.72rem; font-weight: 800;
    padding: 0.1rem 0.4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--text-secondary);
}
.docv-type.active .docv-type-badge { background: rgba(76, 141, 255, 0.25); color: var(--primary-color); }

.docv-invite { text-align: center; padding: 2.6rem 1rem; color: var(--text-secondary); }
.docv-invite .material-symbols-outlined { font-size: 2.4rem; opacity: 0.5; display: block; margin-bottom: 0.6rem; }
.docv-invite p { max-width: 42ch; margin: 0 auto; line-height: 1.6; }

.docv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; }
.docv-carte {
    display: flex; flex-direction: column; gap: 0.5rem; cursor: pointer; text-align: left;
    background: var(--background-secondary); border: 1px solid var(--border-color); border-radius: 14px;
    padding: 0.6rem; font-family: inherit;
}
.docv-carte:hover { border-color: var(--primary-color); }
.docv-carte img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 9px; background: var(--background-card); }
.docv-carte-nom { font-size: 0.82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.docv-detail { max-width: 460px; }
.docv-detail-img {
    width: 100%; max-height: 340px; object-fit: contain; border-radius: 12px;
    background: var(--background-card); cursor: zoom-in; display: block;
}
.docv-detail-meta { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.8rem; margin-top: 1rem; font-size: 0.85rem; }
.docv-detail-meta dt { color: var(--text-secondary); font-weight: 700; }
.docv-detail-meta dd { color: var(--text-primary); }

/* ── Zone glisser-déposer (documents-viewer.js) ── */
.docv-drop {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    padding: 1.4rem 1rem; border-radius: 12px; border: 1.5px dashed var(--border-color);
    background: var(--background-card); cursor: pointer; text-align: center; transition: border-color 0.15s ease, background 0.15s ease;
}
.docv-drop:hover, .docv-drop.survol { border-color: var(--primary-color); background: rgba(76, 141, 255, 0.06); }
.docv-drop .material-symbols-outlined { font-size: 1.6rem; color: var(--text-secondary); pointer-events: none; }
.docv-drop-texte { font-size: 0.82rem; color: var(--text-secondary); pointer-events: none; }
.docv-drop input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

/* ── Vmail (assets/js/vmail-viewer.js) : coquille façon Gmail ── */
.vm-shell{
    display:flex; background:linear-gradient(180deg, var(--background-secondary), var(--background-card) 140%);
    border:1px solid var(--border-color); border-radius:18px; overflow:hidden; min-height:64vh;
    box-shadow:0 18px 40px -20px rgba(0,0,0,.45);
}
.vm-rail{
    width:250px; flex:none; padding:1.3rem 1rem; border-right:1px solid var(--border-color);
    display:flex; flex-direction:column; gap:.25rem; background:var(--background-secondary);
}
.vm-rail-titre{
    display:flex; align-items:center; gap:.5rem; font-weight:900; font-size:1rem; margin-bottom:1.1rem;
    color:var(--text-primary);
}
.vm-rail-titre .material-symbols-outlined{
    font-size:1.3rem; color:#fff; background:linear-gradient(135deg, var(--primary-color), #5ac8fa);
    width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
}
.vm-compose-btn{
    display:flex; align-items:center; gap:.5rem; justify-content:center; padding:.9rem 1rem;
    border-radius:14px; background:linear-gradient(135deg, var(--primary-color), #5ac8fa); color:#fff;
    font-weight:800; font-size:.88rem; border:none; cursor:pointer; margin-bottom:1.3rem;
    box-shadow:0 8px 20px -8px rgba(76, 141, 255,.6); transition:transform .15s ease, box-shadow .15s ease;
}
.vm-compose-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(76, 141, 255,.75); }
.vm-compose-btn:active{ transform:translateY(0); }
.vm-folder{
    display:flex; align-items:center; gap:.7rem; padding:.65rem .9rem; border-radius:12px;
    font-size:.85rem; font-weight:700; color:var(--text-secondary); cursor:pointer; border:none;
    background:transparent; text-align:left; width:100%; font-family:inherit; transition:background .12s ease, color .12s ease;
}
.vm-folder .material-symbols-outlined{ font-size:1.15rem; }
.vm-folder:hover{ background:var(--background-card); color:var(--text-primary); }
.vm-folder.active{
    background:rgba(76, 141, 255,.14); color:var(--primary-color);
    box-shadow:inset 3px 0 0 var(--primary-color);
}
.vm-folder-count{
    margin-left:auto; font-size:.7rem; font-weight:900; background:var(--primary-color); color:#fff;
    min-width:20px; height:20px; padding:0 .4rem; border-radius:999px; display:grid; place-items:center;
}

.vm-main{ flex:1; min-width:0; display:flex; flex-direction:column; background:var(--background-card); }
.vm-toolbar{
    display:flex; align-items:center; gap:.7rem; padding:.9rem 1.3rem; border-bottom:1px solid var(--border-color);
    min-height:24px; font-size:.9rem; color:var(--text-primary); font-weight:800;
}
.vm-toolbar-recherche{
    flex:1; display:flex; align-items:center; gap:.4rem; max-width:300px; padding:.4rem .8rem;
    border-radius:999px; background:var(--background-secondary); border:1px solid var(--border-color);
}
.vm-toolbar-recherche input{ flex:1; border:none; background:none; outline:none; color:var(--text-primary); font-size:.8rem; font-family:inherit; }
.vm-toolbar-recherche .material-symbols-outlined{ font-size:1rem; color:var(--text-secondary); }

.vm-liste{ display:flex; flex-direction:column; overflow-y:auto; padding:.6rem; gap:.35rem; }
.vm-row{
    display:flex; align-items:center; gap:.8rem; padding:.7rem .9rem; border-radius:14px;
    border:1px solid transparent; cursor:pointer; font-size:.84rem; background:var(--background-card);
    transition:background .12s ease, border-color .12s ease, transform .12s ease;
}
.vm-row:hover{ border-color:var(--border-color); background:var(--background-secondary); transform:translateX(2px); }
.vm-row.non-lu{ background:rgba(76, 141, 255,.07); }
.vm-row-check{ flex:none; width:16px; height:16px; accent-color:var(--primary-color); }
.vm-row-avatar{
    flex:none; width:36px; height:36px; border-radius:50%; object-fit:cover; background:var(--background-secondary);
    box-shadow:0 0 0 2px transparent;
}
.vm-row.non-lu .vm-row-avatar{ box-shadow:0 0 0 2px var(--primary-color); }
.vm-row-icone{ display:none; }
.vm-row-de{
    flex:none; width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-secondary);
    font-weight:600;
}
.vm-row.non-lu .vm-row-de{ font-weight:800; color:var(--text-primary); }
.vm-row-corps{ flex:1; min-width:0; display:flex; gap:.5rem; overflow:hidden; white-space:nowrap; align-items:baseline; }
.vm-row-sujet{ flex:none; color:var(--text-secondary); }
.vm-row.non-lu .vm-row-sujet{ font-weight:800; color:var(--text-primary); }
.vm-row-apercu{ color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; }
.vm-row-date{ flex:none; font-size:.74rem; color:var(--text-secondary); width:64px; text-align:right; }
.vm-row-dest{
    font-size:.68rem; color:var(--text-secondary); flex:none; font-weight:700; background:var(--background-secondary);
    padding:.15rem .5rem; border-radius:999px;
}

.vm-detail{ padding:1.6rem 1.8rem; overflow-y:auto; }
.vm-detail-retour{
    display:inline-flex; align-items:center; gap:.3rem; color:var(--text-secondary); font-size:.85rem;
    font-weight:700; cursor:pointer; background:none; border:none; font-family:inherit; padding:0; margin-bottom:1.3rem;
    transition:gap .12s ease;
}
.vm-detail-retour:hover{ color:var(--primary-color); gap:.5rem; }
.vm-detail-tete{
    display:flex; align-items:center; gap:.9rem; padding-bottom:1.2rem; border-bottom:1px solid var(--border-color);
}
.vm-detail-avatar{
    width:48px; height:48px; border-radius:50%; object-fit:cover; background:var(--background-secondary); flex:none;
    box-shadow:0 0 0 3px var(--background-card), 0 0 0 4px var(--border-color);
}
.vm-detail-sujet{ font-size:1.25rem; font-weight:900; }
.vm-detail-meta{ font-size:.82rem; color:var(--text-secondary); margin-top:.2rem; }
.vm-detail-corps{
    font-size:.94rem; line-height:1.7; white-space:pre-wrap; margin:1.4rem 0; padding:1.1rem 1.3rem;
    background:var(--background-secondary); border-radius:14px; border:1px solid var(--border-color);
}
.vm-detail-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.vm-supprime{ font-style:italic; color:var(--text-secondary); }

.vm-vide{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem;
    flex:1; padding:3.5rem 1rem; text-align:center; color:var(--text-secondary); }
.vm-vide-icone{
    width:76px; height:76px; border-radius:50%; display:grid; place-items:center;
    background:linear-gradient(135deg, rgba(76, 141, 255,.16), rgba(90, 200, 250,.1));
}
.vm-vide-icone .material-symbols-outlined{ font-size:2.4rem; color:var(--primary-color); }
.vm-vide h4{ font-size:1rem; font-weight:800; color:var(--text-primary); margin:0; }
.vm-vide p{ font-size:.85rem; margin:0; max-width:280px; }

/* Composer : destinataires par recherche + puces, comme un vrai "À :" plutôt
   qu'une case à cocher par membre du staff (qui ne passait plus à l'échelle
   maintenant que le Vmail est ouvert à toute la communauté). */
.vm-dest-wrap{ position:relative; }
.vm-dest-puces{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.4rem; }
.vm-dest-puce{
    display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .3rem .25rem .5rem; border-radius:999px;
    background:var(--background-card); border:1px solid var(--border-color); font-size:.78rem; font-weight:600;
}
.vm-dest-puce img{ width:18px; height:18px; border-radius:50%; object-fit:cover; }
.vm-dest-puce button{ background:none; border:none; color:var(--text-secondary); cursor:pointer; display:grid; place-items:center; padding:0; }
.vm-dest-puce button .material-symbols-outlined{ font-size:1rem; }
.vm-dest-resultats{
    display:none; position:absolute; top:calc(100% + .3rem); left:0; right:0; z-index:20;
    background:var(--background-secondary); border:1px solid var(--border-color); border-radius:10px;
    max-height:220px; overflow-y:auto; box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.vm-dest-resultats.show{ display:block; }

@media (max-width:760px){
    .vm-shell{ flex-direction:column; }
    .vm-rail{ width:auto; flex-direction:row; overflow-x:auto; border-right:none; border-bottom:1px solid var(--border-color); gap:.5rem; }
    .vm-compose-btn{ margin-bottom:0; flex:none; }
    .vm-folder{ flex:none; width:auto; white-space:nowrap; }
    .vm-row-de{ width:96px; }
    .vm-toolbar-recherche{ display:none; }
}

/* ── Écran squelette : remplace le spinner seul pendant les chargements longs ── */
.st-skel-msg { display: flex; align-items: center; gap: .6rem; color: var(--text-secondary); font-size: .88rem; margin-bottom: 1rem; }
.st-skel-msg .material-symbols-outlined { font-size: 1.2rem; animation: stSkelTourne 1.2s linear infinite; }
@keyframes stSkelTourne { to { transform: rotate(360deg); } }
.st-skel-carte { border: 1px solid var(--border-color); border-radius: 12px; background: var(--background-card); padding: 1rem; margin-bottom: .8rem; }
.st-skel-ligne, .st-skel-img, .st-skel-rond {
  background: linear-gradient(90deg, rgba(128,128,128,.12) 25%, rgba(128,128,128,.25) 50%, rgba(128,128,128,.12) 75%);
  background-size: 200% 100%; animation: stSkelBrille 1.3s ease-in-out infinite; border-radius: 6px;
}
.st-skel-ligne { height: .8rem; margin-bottom: .55rem; }
.st-skel-rond { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.st-skel-img { width: 150px; height: 95px; border-radius: 8px; }
.st-skel-tete { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.st-skel-images { display: flex; gap: .6rem; margin-top: .6rem; }
@keyframes stSkelBrille { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.st-alerte-carte { color: #f59e0b; font-size: .8rem; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); border-radius: 8px; padding: .55rem .8rem; margin-top: .7rem; }

/* Document dont l'image n'a pas été enregistrée (image_url vide en base) */
.docv-sans-image{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;min-height:120px;padding:1rem;text-align:center;font-size:.8rem;color:var(--text-secondary);background:var(--background-secondary);border-radius:8px}
.docv-sans-image .material-symbols-outlined{font-size:1.8rem;opacity:.6}