/* ==========================================================================
   PERSO — perso.css — HABILLAGE DU HUB D'ORGANISATION PERSONNELLE
   --------------------------------------------------------------------------
   Style dérivé de la charte v9 d'INVprod (fond sombre, coins droits, cadres
   fins, pas d'ombre ni de dégradé) MAIS avec UN accent chaud (ambre) : c'est le
   repère visuel qui dit « tu es dans ton espace PERSO, pas dans le pro ».
   Aucune ressource externe (police système) : rien à télécharger, zéro traqueur.
   ========================================================================== */
:root {
  --noir: #0d0d0f;         /* fond général */
  --panel: #16161a;        /* fond des cartes/panneaux */
  --gris-fonce: #202027;   /* survols, zones secondaires */
  --gris-moyen: #7a7a84;   /* textes secondaires, libellés discrets */
  --gris-clair: #dcdce2;   /* texte principal */
  --blanc: #ffffff;        /* titres, éléments actifs */
  --accent: #e0a458;       /* AMBRE : l'accent perso (liens actifs, focus, boutons) */
  --accent-soft: #3a2f1e;  /* fond tamisé de l'accent */
  --ok: #7dd87d;           /* vert fonctionnel : fait / réussi */
  --warn: #f2c94c;         /* jaune : en attente / à faire */
  --err: #ff6b6b;          /* rouge : erreur / urgent */
  --bord: #2b2b33;         /* couleur des cadres fins */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--noir);
  color: var(--gris-clair);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
}
a { color: var(--blanc); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--blanc); font-weight: 700; }

.shell { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- Barre du haut (lanceur d'apps, façon Odoo) ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--noir); border-bottom: 1px solid var(--bord); }
.bar { display: flex; align-items: center; gap: 14px; padding: 12px 28px; }
.home { display: inline-flex; color: var(--gris-clair); }
.home svg { width: 20px; height: 20px; }
.home:hover { color: var(--accent); }
.wordmark { font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.85rem; color: var(--blanc); }
.wordmark:hover { text-decoration: none; color: var(--accent); }
.wordmark .dot { color: var(--accent); }
.sep { color: var(--gris-moyen); }
.appname { color: var(--blanc); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.appname.muted { color: var(--gris-moyen); }
.spacer { flex: 1; }
.utility { display: flex; gap: 18px; align-items: center; }
.utility a { color: var(--gris-moyen); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.utility a:hover { color: var(--accent); text-decoration: none; }
.subbar { display: flex; gap: 2px; padding: 0 28px; border-top: 1px solid #1a1a1f; overflow-x: auto; }
.tab { padding: 11px 15px; white-space: nowrap; color: var(--gris-clair); font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 2px solid transparent; }
.tab:hover { color: var(--accent); text-decoration: none; }
.tab.active { color: var(--blanc); border-bottom-color: var(--accent); }

/* Burger (mobile). */
.burger { display: none; background: none; border: 0; color: var(--gris-clair); cursor: pointer; padding: 4px; }
.burger svg { width: 24px; height: 24px; }
.burger .ico-close { display: none; }

/* ---------- Zone de contenu ---------- */
.main { padding: 30px 28px 60px; max-width: 1180px; margin: 0 auto; width: 100%; }
.main--wide { max-width: none; }
.page-title { font-size: 1.35rem; margin-bottom: 4px; }
.page-sub { color: var(--gris-moyen); font-size: 0.82rem; margin-bottom: 26px; }

/* ---------- Lanceur (grille de tuiles) ---------- */
.launcher-cat { display: flex; align-items: center; gap: 9px; margin: 4px 0 12px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gris-moyen); }
.launcher-cat .cat-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.launcher { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; margin-bottom: 34px; }
.app-tile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 26px 14px; border: 1px solid var(--bord); background: var(--panel); color: var(--gris-clair); transition: border-color .12s, color .12s; }
.app-tile .tile-dot { position: absolute; top: 9px; right: 9px; width: 6px; height: 6px; border-radius: 50%; opacity: 0.8; }
.app-tile:hover { border-color: var(--accent); color: var(--blanc); text-decoration: none; }
.app-tile .ico { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--bord); }
.app-tile:hover .ico { border-color: var(--accent); }
.app-tile .ico svg { width: 24px; height: 24px; }
.app-tile .app-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blanc); }
.app-tile .app-desc { font-size: 0.66rem; color: var(--gris-moyen); letter-spacing: 0.03em; }

/* ---------- Cartes / panneaux ---------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card { border: 1px solid var(--bord); background: var(--panel); padding: 18px 18px; }
.card h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gris-moyen); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.card h2 a { font-size: 0.68rem; color: var(--accent); font-weight: 600; }
.card h2 a:hover { text-decoration: none; }

/* ---------- Listes de tâches / lignes ---------- */
.row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid #1c1c22; }
.row:last-child { border-bottom: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .t-title { color: var(--gris-clair); }
.row .t-title.done { color: var(--gris-moyen); text-decoration: line-through; }
.row .t-meta { font-size: 0.7rem; color: var(--gris-moyen); margin-top: 2px; }
.empty { color: var(--gris-moyen); font-size: 0.82rem; padding: 14px 0; }

/* Cases à cocher stylées (boutons de complétion). */
.tick { width: 20px; height: 20px; border: 1px solid var(--bord); background: none; cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.tick:hover { border-color: var(--accent); }
.tick svg { width: 13px; height: 13px; color: var(--ok); visibility: hidden; }
.tick.on { border-color: var(--ok); }
.tick.on svg { visibility: visible; }

/* ---------- Badges ---------- */
.badge { display: inline-block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border: 1px solid var(--bord); color: var(--gris-moyen); }
.badge.haute { color: var(--err); border-color: var(--err); }
.badge.basse { color: var(--gris-moyen); }
.badge.today { color: var(--accent); border-color: var(--accent); }
.badge.late { color: var(--err); border-color: var(--err); }

/* ---------- Formulaires ---------- */
label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gris-moyen); margin: 12px 0 5px; }
input[type=text], input[type=password], input[type=date], input[type=datetime-local], input[type=email],
select, textarea {
  width: 100%; background: var(--noir); border: 1px solid var(--bord); color: var(--gris-clair);
  padding: 9px 10px; font: inherit; font-size: 0.86rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; min-height: 90px; }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field-row > div { flex: 1; min-width: 150px; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--bord); color: var(--gris-clair); padding: 9px 15px; font: inherit; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; }
.btn:hover { border-color: var(--accent); color: var(--blanc); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #1a1206; }
.btn-primary:hover { background: #ecb974; color: #1a1206; }
.btn-sm { padding: 6px 10px; font-size: 0.7rem; }
.btn-danger:hover { border-color: var(--err); color: var(--err); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }

/* ---------- Messages flash ---------- */
.flash { padding: 11px 15px; margin-bottom: 20px; border: 1px solid var(--bord); font-size: 0.85rem; }
.flash.ok { border-color: var(--ok); color: var(--ok); }
.flash.err { border-color: var(--err); color: var(--err); }

/* ---------- Barre d'actions / filtres ---------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.toolbar .spacer { flex: 1; }
.chip { display: inline-block; padding: 6px 12px; border: 1px solid var(--bord); color: var(--gris-moyen); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.chip.active, .chip:hover { border-color: var(--accent); color: var(--blanc); text-decoration: none; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-box { width: 100%; max-width: 340px; border: 1px solid var(--bord); background: var(--panel); padding: 30px 26px; }
.login-box h1 { font-size: 1.1rem; text-align: center; margin-bottom: 4px; }
.login-box h1 .dot { color: var(--accent); }
.login-box .tag { text-align: center; color: var(--gris-moyen); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 22px; }

/* ---------- Notes en grille ---------- */
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.note-card { border: 1px solid var(--bord); background: var(--panel); padding: 15px; display: flex; flex-direction: column; gap: 8px; }
.note-card.pin { border-color: var(--accent-soft); }
.note-card .n-title { font-weight: 700; color: var(--blanc); font-size: 0.9rem; }
.note-card .n-body { font-size: 0.8rem; color: var(--gris-clair); white-space: pre-wrap; max-height: 160px; overflow: hidden; }
.note-card .n-meta { font-size: 0.66rem; color: var(--gris-moyen); margin-top: auto; display: flex; justify-content: space-between; }

/* ---------- Calendrier (vue mois) ---------- */
.cal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cal-head h2 { font-size: 1rem; text-transform: capitalize; }
.cal-head .spacer { flex: 1; }
.cal-nav { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--bord); color: var(--gris-clair); }
.cal-nav:hover { border-color: var(--accent); color: var(--blanc); text-decoration: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--bord); border: 1px solid var(--bord); }
.cal-dow { background: var(--noir); color: var(--gris-moyen); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; text-align: center; padding: 7px 0; }
.cal-cell { background: var(--panel); min-height: 96px; padding: 6px 6px 8px; display: flex; flex-direction: column; gap: 3px; }
.cal-cell.out { background: #101014; }
.cal-cell .cal-num { font-size: 0.72rem; color: var(--gris-moyen); align-self: flex-end; }
.cal-cell.today { outline: 1px solid var(--accent); outline-offset: -1px; }
.cal-cell.today .cal-num { color: var(--accent); font-weight: 700; }
.cal-ev { display: block; font-size: 0.68rem; color: var(--gris-clair); background: var(--gris-fonce); border-left: 3px solid var(--accent); padding: 2px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev:hover { color: var(--blanc); text-decoration: none; background: #26262e; }
.cal-add { align-self: flex-start; margin-top: auto; color: var(--gris-moyen); font-size: 0.9rem; line-height: 1; opacity: 0; }
.cal-cell:hover .cal-add { opacity: 1; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 0; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--gris-moyen); }
.cal-legend .dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
@media (max-width: 640px) {
  .cal-cell { min-height: 62px; }
  .cal-ev { font-size: 0; padding: 3px; border-left-width: 6px; }
}

/* ==========================================================================
   WEBMAIL 3 PANNEAUX (dossiers · liste · aperçu réel)
   ========================================================================== */
.mail3 { display: flex; border: 1px solid var(--bord); height: calc(100vh - 168px); min-height: 540px; overflow: hidden; }
/* Col 1 : actions + dossiers + comptes */
.mc1 { width: 214px; flex: none; border-right: 1px solid var(--bord); padding: 12px 10px; overflow-y: auto; background: var(--panel); }
.mc1 .btn { width: 100%; justify-content: center; margin-bottom: 12px; }
.msec { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gris-moyen); margin: 16px 6px 6px; }
.mnav { display: block; padding: 8px 10px; font-size: 0.8rem; color: var(--gris-clair); border-left: 2px solid transparent; }
.mnav:hover { background: var(--gris-fonce); text-decoration: none; color: var(--blanc); }
.mnav.on { border-left-color: var(--accent); color: var(--blanc); background: var(--gris-fonce); }
.mnav .ct { float: right; color: var(--gris-moyen); font-size: 0.72rem; }
.mnav .cdot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }
/* Col 2 : liste des messages */
.mc2 { width: 372px; flex: none; border-right: 1px solid var(--bord); overflow-y: auto; display: flex; flex-direction: column; }
.msearch { padding: 10px; border-bottom: 1px solid var(--bord); position: sticky; top: 0; background: var(--noir); z-index: 2; display: flex; gap: 6px; }
.msearch input { flex: 1; }
.mitem { display: block; padding: 11px 13px; border-bottom: 1px solid #1c1c22; color: inherit; }
.mitem:hover { background: var(--gris-fonce); text-decoration: none; }
.mitem.on { background: var(--accent-soft); border-left: 2px solid var(--accent); padding-left: 11px; }
.mitem .mtop { display: flex; align-items: baseline; gap: 8px; }
.mitem .mfrom { font-size: 0.79rem; color: var(--gris-clair); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mitem .mdate { font-size: 0.66rem; color: var(--gris-moyen); flex: none; }
.mitem .msub { font-size: 0.82rem; color: var(--gris-clair); margin: 2px 0 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mitem.unseen .msub, .mitem.unseen .mfrom { font-weight: 700; color: var(--blanc); }
.mitem .mdot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.mitem .mex { font-size: 0.71rem; color: var(--gris-moyen); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Col 3 : aperçu réel */
.mc3 { flex: 1; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; }
.mprev-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--gris-moyen); font-size: 0.85rem; padding: 30px; text-align: center; }
.mprev-head { padding: 16px 22px; border-bottom: 1px solid var(--bord); flex: none; }
.mprev-head h2 { font-size: 1rem; color: var(--blanc); text-transform: none; letter-spacing: 0; margin-bottom: 8px; }
.mprev-body { flex: 1; min-height: 0; }
.mprev-body iframe { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.mprev-text { padding: 18px 22px; white-space: pre-wrap; font-size: 0.9rem; line-height: 1.6; }
.mprev-actions { padding: 12px 22px; border-bottom: 1px solid var(--bord); display: flex; gap: 8px; flex: none; flex-wrap: wrap; }
.mprev-compose { padding: 18px 22px; }
@media (max-width: 900px) {
  .mail3 { flex-direction: column; height: auto; }
  .mc1 { width: auto; border-right: 0; border-bottom: 1px solid var(--bord); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  .mc1 .btn { width: auto; margin-bottom: 0; }
  .msec { width: 100%; margin: 6px 6px 2px; }
  .mnav { display: inline-block; border: 1px solid var(--bord); border-left-width: 2px; padding: 6px 10px; }
  .mnav .ct { float: none; margin-left: 5px; }
  .mc2 { width: auto; border-right: 0; border-bottom: 1px solid var(--bord); max-height: 44vh; }
  .mc3 { min-height: 60vh; }
  .mprev-body iframe { min-height: 60vh; }
}

/* ---------- Divers ---------- */
.kbd { font-family: ui-monospace, Menlo, monospace; background: var(--noir); border: 1px solid var(--bord); padding: 2px 6px; font-size: 0.8rem; color: var(--accent); word-break: break-all; }
.muted { color: var(--gris-moyen); }
hr { border: 0; border-top: 1px solid var(--bord); margin: 20px 0; }

/* ==========================================================================
   MODALE DE DÉTAIL (pop-up « carte ») — partagée par notes, candidatures…
   Markup dans inc/footer.php, comportement dans perso.js.
   ========================================================================== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, 0.72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.modal-backdrop[hidden] { display: none; }
.modal-panel {
  position: relative; width: 100%; max-width: 680px;
  background: var(--panel); border: 1px solid var(--bord);
  padding: 26px 26px 30px; margin: auto;
}
.modal-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; line-height: 1;
  background: none; border: 1px solid var(--bord); color: var(--gris-clair);
  cursor: pointer; font-size: 0.95rem;
}
.modal-close:hover { border-color: var(--accent); color: var(--blanc); }
.modal-body { color: var(--gris-clair); }
/* Empêche le défilement de l'arrière-plan quand une modale est ouverte. */
body.modal-open { overflow: hidden; }

/* --- Contenu type « fiche » à l'intérieur de la modale --- */
.sheet-title { font-size: 1.15rem; color: var(--blanc); margin-bottom: 4px; padding-right: 30px; }
.sheet-sub { font-size: 0.78rem; color: var(--gris-moyen); margin-bottom: 18px; }
.sheet-body { white-space: pre-wrap; font-size: 0.9rem; line-height: 1.6; color: var(--gris-clair); }
/* Grille clé → valeur pour détailler une candidature. */
.sheet-grid { display: grid; grid-template-columns: 150px 1fr; gap: 7px 16px; margin: 6px 0 4px; font-size: 0.86rem; }
.sheet-grid dt { color: var(--gris-moyen); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 2px; }
.sheet-grid dd { color: var(--gris-clair); white-space: pre-wrap; }
.sheet-sec { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--bord); }
.sheet-sec h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gris-moyen); margin-bottom: 10px; }
@media (max-width: 560px) { .sheet-grid { grid-template-columns: 1fr; gap: 2px 0; } .sheet-grid dt { padding-top: 8px; } }

/* ==========================================================================
   APP CANDIDATURES — grille de cartes + badges de résultat
   ========================================================================== */
.cand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cand-card {
  position: relative; border: 1px solid var(--bord); background: var(--panel);
  padding: 15px 15px 13px; display: flex; flex-direction: column; gap: 8px;
  cursor: pointer; transition: border-color .12s;
}
.cand-card:hover { border-color: var(--accent); }
.cand-card.pin { border-left: 3px solid var(--accent); }
.cand-card .c-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cand-card .c-firme { font-weight: 700; color: var(--blanc); font-size: 0.95rem; }
.cand-card .c-date { font-size: 0.66rem; color: var(--gris-moyen); flex: none; }
.cand-card .c-poste { font-size: 0.82rem; color: var(--gris-clair); }
.cand-card .c-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.cand-card .c-lieu { font-size: 0.7rem; color: var(--gris-moyen); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Barre d'actions rapides de la carte (n'ouvre pas la modale). */
.cand-card .c-actions { display: flex; gap: 5px; flex: none; }
.cand-card .c-actions .btn { padding: 3px 8px; font-size: 0.7rem; }
.cand-card .c-atts { font-size: 0.66rem; color: var(--gris-moyen); }

/* Pastilles de résultat / statut (reprennent la sémantique de couleur du hub). */
.res-badge { display: inline-block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border: 1px solid var(--bord); color: var(--gris-moyen); }
.res-badge.attente    { color: var(--gris-moyen); }
.res-badge.en_suspens { color: var(--warn); border-color: var(--warn); }
.res-badge.engagement { color: var(--ok); border-color: var(--ok); }
.res-badge.refus      { color: var(--err); border-color: var(--err); }
.res-badge.entretien  { color: var(--accent); border-color: var(--accent); }

/* Formulaire de saisie en sections (calqué sur travail.swiss). */
.form-sec { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--bord); }
.form-sec:first-of-type { border-top: 0; padding-top: 0; }
.form-sec > .sec-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gris-moyen); margin-bottom: 10px; font-weight: 700; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 6px; }
.check-row label { display: inline-flex; align-items: center; gap: 8px; margin: 0; text-transform: none; letter-spacing: 0; font-size: 0.86rem; color: var(--gris-clair); cursor: pointer; }
.check-row input[type=checkbox], .check-row input[type=radio] { width: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 780px) {
  .bar { padding: 12px 16px; }
  .subbar { padding: 0 16px; }
  .main { padding: 22px 16px 50px; }
  .burger { display: inline-flex; }
  .utility { display: none; position: absolute; top: 100%; right: 0; left: 0; flex-direction: column; gap: 0; background: var(--panel); border-bottom: 1px solid var(--bord); }
  .top.open .utility { display: flex; }
  .utility a { padding: 13px 20px; border-top: 1px solid var(--bord); }
  .modal-backdrop { padding: 16px 10px; }
  .modal-panel { padding: 22px 18px 26px; }
}

/* Les notes deviennent cliquables (pop-up) : on le signale au survol. */
.note-card[data-modal] { cursor: pointer; }
.note-card[data-modal]:hover { border-color: var(--accent); }
.row.clickable[data-modal] { cursor: pointer; }
.row.clickable[data-modal]:hover { background: var(--gris-fonce); }

/* ==========================================================================
   PIÈCES JOINTES (vignettes) + APERÇU MÉDIA en modale
   ========================================================================== */
.att-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.att { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 96px; text-align: center; color: var(--gris-clair); }
.att:hover { text-decoration: none; color: var(--blanc); }
.att-vue, .att-ic { width: 96px; height: 96px; border: 1px solid var(--bord); background: var(--noir); }
.att-vue { object-fit: cover; }
.att-ic { display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.att:hover .att-vue, .att:hover .att-ic { border-color: var(--accent); }
.att-nom { font-size: 0.66rem; color: var(--gris-moyen); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 96px; }

/* Aperçu plein cadre dans la modale (lecture d'un PDF / d'une image). */
.modal-media { max-width: 100%; height: auto; display: block; margin: 0 auto; border: 1px solid var(--bord); }
.modal-media-frame { width: 100%; height: 72vh; border: 1px solid var(--bord); background: #fff; }

/* ==========================================================================
   MES RESSOURCES — grille de cartes (fichiers / liens / notes)
   ========================================================================== */
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.res-card { position: relative; border: 1px solid var(--bord); background: var(--panel); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 118px; transition: border-color .12s; }
.res-card.clickable { cursor: pointer; }
.res-card.clickable:hover { border-color: var(--accent); }
.res-card.pin { border-left: 3px solid var(--accent); }
.res-card .r-thumb { width: 100%; height: 116px; object-fit: cover; border: 1px solid var(--bord); background: var(--noir); }
.res-card .r-ic { font-size: 1.4rem; line-height: 1; }
.res-card .r-title { font-weight: 700; color: var(--blanc); font-size: 0.9rem; word-break: break-word; }
.res-card .r-title a { color: var(--blanc); }
.res-card .r-note { font-size: 0.74rem; color: var(--gris-clair); max-height: 58px; overflow: hidden; white-space: pre-wrap; }
.res-card .r-meta { font-size: 0.66rem; color: var(--gris-moyen); margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.res-card .r-actions { display: flex; gap: 5px; flex: none; }
.res-card .r-actions .btn { padding: 3px 8px; font-size: 0.7rem; }

/* ---------- Portfolio « Mon travail » sur le tableau de bord (2026-08-20) ----------
   Le portfolio est devenu une app du hub : ses derniers projets s'affichent ici
   comme les notes récentes. Vignettes en noir et blanc (elles retrouvent leurs
   couleurs au survol) pour ne pas voler la vedette au reste du tableau de bord. */
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.pf-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--bord); background: var(--noir); padding: 10px; }
.pf-card:hover { border-color: var(--accent); text-decoration: none; }
.pf-media { display: block; aspect-ratio: 16 / 10; background: #000; border: 1px solid var(--bord); overflow: hidden; }
.pf-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.pf-card:hover .pf-media img { filter: none; opacity: 1; }
.pf-title { color: var(--blanc); font-weight: 600; font-size: .82rem; line-height: 1.3; }
.pf-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .66rem; color: var(--gris-moyen); }