/* Gastinel Mail — thème clair « Hors sentier » (papier de carte, courbes de niveau, jaune balisage, Inter). */
:root {
  color-scheme: light;
  /* Toutes les couleurs passent par ces variables : le theme sombre n'a qu'a les redefinir. */
  --fond: #fbfaf7;            /* papier de carte */
  --fond-doux: #f6f4ee;       /* rail, groupes */
  --fond-eleve: #fffefb;      /* champs, cartes posees sur le fond */
  --gris-leger: #efece4;
  --texte: #141414;
  --texte-doux: #2a2a2a;
  --gris: #6b6b6b;
  --bord: #e4e0d6;            /* couleur des courbes de niveau */
  --bord-fort: #cfc9bb;
  --courbes: #e4e0d6;         /* traits du fond (courbes de niveau) */
  --courbes-opacite: .7;
  --marque: #f2c230;          /* jaune balisage : non lu, action principale */
  --marque-fonce: #d9a90f;
  --marque-survol: #f6cd48;
  --sur-marque: #141414;      /* texte pose sur le jaune */
  --balise-rouge: #c43b2b;
  --focus: #141414;
  --alerte: #8a1c1c;
  --alerte-fond: #fbeeea;
  --attention-fond: #fbf0c8;
  --survol: #f3f0e8;
  --selection: #efece4;
  --barre-fond: rgba(251,250,247,.96);
  --voile: rgba(20,20,20,.25);
  --toast-fond: #141414;
  --toast-texte: #fbfaf7;
  --toast-bord: #555;
  --toast-survol: #333;
  --rail: 216px;
  --liste: 400px;
}

/* ---------- Thème sombre « Hors sentier » (option ; le clair reste le défaut) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --fond: #121210;
  --fond-doux: #181816;
  --fond-eleve: #1e1d1a;
  --gris-leger: #2a2923;
  --texte: #f1efe8;
  --texte-doux: #d6d3c8;
  --gris: #a8a498;
  --bord: #33312a;
  --bord-fort: #4a473e;
  --courbes: #3a382f;
  --courbes-opacite: .55;
  --marque-survol: #f6cd48;
  --focus: #f2c230;
  --balise-rouge: #e2604f;
  --alerte: #f4b0a6;
  --alerte-fond: #3b1b17;
  --attention-fond: #3a3110;
  --survol: #1f1e1a;
  --selection: #2a2820;
  --barre-fond: rgba(18,18,16,.96);
  --voile: rgba(0,0,0,.65);
  --toast-fond: #f1efe8;
  --toast-texte: #141414;
  --toast-bord: #8a867a;
  --toast-survol: #dedbd0;
}
/* Mails HTML : toujours clairs (leur rendu n'est pas pensé pour le sombre), posés dans un cadre. */
:root[data-theme="dark"] .mail-corps iframe { background: #fff; border: 1px solid var(--bord-fort); border-top: 3px solid var(--marque); }
/* Fenêtre Paramètres */
.reglage { border: 0; display: grid; gap: 4px; margin-bottom: 16px; }
.reglage legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.reglage label { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.reglage input { accent-color: var(--marque-fonce); width: 18px; height: 18px; }
.reglage small { color: var(--gris); font-size: 13px; }
.reglage .gris { color: var(--gris); font-size: 13px; margin-top: 6px; min-height: 1.5em; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background: var(--fond);
  color: var(--texte);
  font: 400 14px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 1px solid var(--bord); padding: 8px 14px; cursor: pointer; border-radius: 0; }
button:hover { border-color: var(--bord-fort); background: var(--survol); }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
input, textarea { font: inherit; color: inherit; background: var(--fond-eleve); border: 1px solid var(--bord-fort); padding: 10px 12px; border-radius: 0; width: 100%; }
kbd { font: 500 11px/1 Inter, system-ui, sans-serif; border: 1px solid var(--bord-fort); padding: 2px 5px; background: var(--fond-eleve); }
.doux { color: var(--gris); }
.lien { border: 0; padding: 4px 0; color: var(--texte-doux); text-align: left; }
.lien:hover { background: none; color: var(--texte); text-decoration: underline; }
.btn-plein { background: var(--marque); color: var(--sur-marque); border-color: var(--marque-fonce); font-weight: 700; box-shadow: inset 0 -3px 0 var(--marque-fonce); }
.btn-plein:hover { background: var(--marque-survol); border-color: var(--marque-fonce); }
.danger { color: var(--alerte); }
.danger:hover { background: var(--alerte-fond); border-color: var(--alerte); }
.erreur { color: var(--alerte); background: var(--alerte-fond); padding: 8px 10px; }

.logo { white-space: nowrap; font-weight: 800; font-size: 1.05rem; letter-spacing: -.03em; display: flex; align-items: center; gap: 10px; }
.logo b span { color: var(--marque-fonce); }
.balise { display: inline-block; flex: none; width: 18px; height: 6px; background: var(--fond-eleve); border: 1px solid var(--bord-fort); box-shadow: 0 6px 0 var(--balise-rouge); margin-bottom: 6px; }
.coord { font: 500 11px/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.ico { width: 1em; height: 1em; flex: none; vertical-align: -.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.courbes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; color: var(--courbes); opacity: var(--courbes-opacite); }
.courbes path { fill: none; stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; }

/* ---------- Connexion ---------- */
.connexion { position: relative; overflow: hidden; min-height: 100%; display: grid; place-items: center; background: var(--fond); padding: 24px 16px; }
.connexion-carte { position: relative; z-index: 1; width: 100%; max-width: 380px; background: var(--fond-eleve); border: 1px solid var(--bord); border-top: 4px solid var(--marque); padding: 36px 32px 32px; display: grid; gap: 20px; }
.connexion-carte .accroche { color: var(--texte-doux); margin-top: -8px; }
.connexion-carte label { display: grid; gap: 6px; font-weight: 500; color: var(--texte-doux); }
.connexion-carte .btn-plein { padding: 10px; }

/* ---------- Trois zones ---------- */
.app { display: grid; grid-template-columns: var(--rail) var(--liste) 1fr; height: 100vh; height: 100dvh; }

/* 1. Dossiers */
.rail { border-right: 1px solid var(--bord); background: var(--fond-doux); display: flex; flex-direction: column; padding: 28px 14px 18px; min-height: 0; }
.rail .logo { padding: 0 10px 28px; }
#dossiers { list-style: none; overflow-y: auto; flex: 1; }
#dossiers li button { width: 100%; display: flex; justify-content: space-between; align-items: baseline; border: 0; border-left: 2px solid transparent; padding: 9px 10px; text-align: left; font-weight: 500; color: var(--texte-doux); }
#dossiers li button:hover { background: var(--survol); }
#dossiers li button.actif { border-left-color: var(--marque); color: var(--texte); background: var(--fond-eleve); font-weight: 700; }
#dossiers .compteur { font-size: 12px; color: var(--sur-marque); background: var(--marque); font-weight: 700; padding: 0 7px; min-width: 20px; text-align: center; line-height: 1.6; }
#dossiers .sous { padding-left: 22px; font-weight: 400; }
#dossiers .titre-groupe { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); padding: 16px 10px 4px; }
.rail-bas { border-top: 1px solid var(--bord); padding: 12px 10px 0; display: grid; gap: 2px; }
.compte { font-size: 12px; color: var(--gris); margin-bottom: 6px; overflow-wrap: anywhere; }

/* 2. Liste */
.liste { border-right: 1px solid var(--bord); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.liste-tete { padding: 26px 20px 0; display: grid; gap: 16px; border-bottom: 1px solid var(--bord); }
.liste-titre { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.liste-titre h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.filtres { display: flex; gap: 0; margin: 0 -20px; padding: 0 20px; }
.filtres button { border: 0; border-bottom: 2px solid transparent; padding: 8px 10px; color: var(--gris); font-weight: 500; }
.filtres button:hover { background: none; color: var(--texte); }
.filtres button.actif { color: var(--texte); border-bottom-color: var(--marque-fonce); font-weight: 700; }
.messages { overflow-y: auto; flex: 1; outline: none; }
.jour { position: sticky; top: 0; z-index: 1; background: var(--fond); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); padding: 18px 20px 6px; }
.ligne { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 13px 20px 14px 17px; border-left: 3px solid transparent; border-bottom: 1px solid var(--gris-leger); cursor: pointer; }
.ligne:hover { background: var(--survol); }
.ligne.choisie { background: var(--selection); border-left-color: var(--texte); }
.ligne .qui { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne .quand { font-size: 12px; color: var(--gris); }
.ligne .sujet { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texte-doux); }
.ligne .apercu { grid-column: 1 / -1; font-size: 13px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne.nonlu .qui, .ligne.nonlu .sujet { font-weight: 700; color: var(--texte); }
.ligne.nonlu { border-left-color: var(--marque); }
.ligne.nonlu.choisie { border-left-color: var(--texte); }
.ligne .marques { font-size: 11px; color: var(--gris); }

/* Le groupe « Notifications » : les mails automatiques (LinkedIn, newsletters…) repliés en une seule ligne */
.groupe-notif { border-bottom: 1px solid var(--bord); background: var(--fond-doux); }
.groupe-notif > button { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; padding: 14px 20px; text-align: left; }
.groupe-notif > button:hover { background: var(--survol); }
.groupe-notif .titre { font-weight: 600; }
.groupe-notif .detail { font-size: 12px; color: var(--gris); }
.groupe-notif .lignes { background: var(--fond); }
.liste-etat { padding: 10px 20px; font-size: 12px; color: var(--gris); border-top: 1px solid var(--bord); }

/* 3. Lecture */
.lecture { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; overflow: hidden; }
.vide { position: relative; z-index: 1; margin: auto; text-align: center; display: grid; gap: 10px; justify-items: center; color: var(--texte-doux); }
.vide .gros { font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; color: var(--texte); }
.mail, .redaction { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.mail { overflow-y: auto; }
.mail-haut { padding: 36px 48px 22px; border-bottom: 1px solid var(--gris-leger); }
.mail-haut h2 { font-size: 1.6rem; line-height: 1.25; font-weight: 800; letter-spacing: -.03em; margin-bottom: 18px; }
.mail-meta { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.m-de { font-weight: 600; }
.m-de .adresse { font-weight: 400; color: var(--gris); }
.m-date { white-space: nowrap; font-size: 13px; }
.bandeau { margin-top: 16px; padding: 10px 14px; border-left: 3px solid var(--marque); background: var(--attention-fond); font-size: 13px; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.bandeau button { padding: 4px 10px; background: var(--fond-eleve); }
.retour { display: none; margin-bottom: 12px; align-items: center; gap: 6px; }
.mail-corps { padding: 28px 48px; flex: 1 0 auto; }
.mail-corps iframe { width: 100%; border: 0; display: block; min-height: 120px; }
.mail-corps pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.pieces { padding: 0 48px 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.pieces button { font-size: 13px; display: grid; text-align: left; max-width: 240px; }
.pieces .taille { color: var(--gris); font-size: 12px; }

.rapide { margin: 12px 48px 28px; border: 1px solid var(--bord-fort); background: var(--fond-eleve); }
.rapide textarea { border: 0; resize: vertical; min-height: 52px; }
.rapide-bas { display: flex; justify-content: space-between; align-items: center; padding: 6px 6px 6px 10px; border-top: 1px solid var(--gris-leger); font-size: 12px; }

.actions { position: sticky; bottom: 0; display: flex; gap: 6px; align-items: center; padding: 14px 48px; background: var(--barre-fond); border-top: 1px solid var(--bord); overflow-x: auto; }
.actions button { white-space: nowrap; flex: none; }
@media (max-width: 1400px) { .actions [data-action="tous"], .actions [data-action="spam"] { display: none; } }
.actions .sep { flex: 1; }

/* Écriture : dans la zone de lecture, pas dans une petite fenêtre */
.redaction { overflow-y: auto; }
.red-haut { padding: 36px 48px 16px; }
.red-haut h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; }
.champ { display: grid; grid-template-columns: 64px 1fr; align-items: center; border-bottom: 1px solid var(--gris-leger); margin: 0 48px; }
.champ span { color: var(--gris); font-weight: 500; }
.champ input { border: 0; padding: 14px 0; background: transparent; }
.champ input:focus-visible { outline: 0; }
.champ:focus-within { border-bottom-color: var(--marque-fonce); }
.w-texte { flex: 1; min-height: 260px; border: 0; padding: 24px 48px; resize: none; line-height: 1.7; background: transparent; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--toast-fond); color: var(--toast-texte); padding: 12px 18px; z-index: 10; display: flex; gap: 14px; align-items: center; }
.toast button { color: var(--toast-texte); border-color: var(--toast-bord); padding: 3px 10px; }
.toast button:hover { background: var(--toast-survol); }

dialog { margin: auto; background: var(--fond-eleve); color: var(--texte); border: 1px solid var(--bord-fort); border-top: 4px solid var(--marque); padding: 28px; max-width: 420px; width: calc(100% - 32px); }
dialog::backdrop { background: var(--voile); }
dialog h3 { margin-bottom: 16px; font-weight: 800; letter-spacing: -.02em; }
dialog table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
dialog td { padding: 6px 0; border-bottom: 1px solid var(--gris-leger); }

.barre-mobile { display: none; }

/* ---------- Écran moyen : la liste rétrécit ---------- */
@media (max-width: 1180px) { :root { --rail: 184px; --liste: 340px; } .mail-haut, .mail-corps, .red-haut, .w-texte, .actions { padding-left: 28px; padding-right: 28px; } .pieces { padding: 0 28px 12px; } .rapide { margin: 12px 28px 24px; } .champ { margin: 0 28px; } }

/* ---------- Téléphone : une zone à la fois, actions en bas ---------- */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .rail, .liste, .lecture { grid-row: 1; grid-column: 1; border: 0; }
  .rail { display: none; }
  .app.vue-dossiers .rail { display: flex; }
  .app.vue-dossiers .liste, .app.vue-dossiers .lecture { display: none; }
  .lecture { display: none; }
  .app.vue-lecture .lecture { display: flex; }
  .app.vue-lecture .liste, .app.vue-lecture .barre-mobile { display: none; }
  .vide { display: none; }
  .retour { display: inline-block; }
  .liste-titre .btn-plein { display: none; }
  .mail-haut, .mail-corps, .red-haut, .w-texte { padding-left: 18px; padding-right: 18px; }
  .mail-haut, .red-haut { padding-top: 22px; }
  .mail-haut h2, .red-haut h2 { font-size: 1.35rem; }
  .pieces { padding: 0 18px 12px; }
  .rapide { margin: 12px 18px 20px; }
  .champ { margin: 0 18px; }
  .liste-tete { padding: 20px 18px 0; }
  .filtres { margin: 0 -18px; padding: 0 18px; }
  .rail { padding-top: 24px; }
  .rail-bas button, #dossiers li button, .filtres button { min-height: 44px; }
  .actions { padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); gap: 6px; }
  .actions button { padding: 11px 9px; font-size: 13px; }
  .actions [data-action="tous"], .actions [data-action="spam"], .actions [data-action="nonlu"] { display: none; }
  .actions .sep { display: none; }
  .actions button { flex: 1; }
  .mail-meta { flex-direction: column; gap: 4px; }
  .barre-mobile { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bord); background: var(--fond); grid-row: 2; }
  .barre-mobile button { padding: 12px; min-height: 44px; }
  .ligne { padding: 14px 18px 15px 15px; }
  .jour, .liste-etat { padding-left: 18px; padding-right: 18px; }
  .groupe-notif > button { padding-left: 18px; padding-right: 18px; }
  input, textarea { font-size: 16px; }
}

/* Pièces jointes : réception (vignettes) et écriture (liste + retrait) */
.pieces { flex-direction: column; gap: 10px; }
.pieces-titre { font-size: 12px; font-weight: 600; color: var(--gris); letter-spacing: .04em; text-transform: uppercase; }
.pieces-liste, .joints { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pieces .pj { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; width: 260px; max-width: 100%; padding: 8px 12px 8px 8px; background: var(--fond-eleve); }
.pj .vignette { grid-row: 1 / 3; width: 56px; height: 56px; display: grid; place-items: center; background: var(--fond-doux); border: 1px solid var(--bord); overflow: hidden; }
.pj .vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj .ext { font-size: 11px; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; }
.pj-nom { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.joints { margin: 12px 48px 0; }
.joint { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px; border: 1px solid var(--bord); background: var(--fond-eleve); font-size: 13px; max-width: 100%; }
.joint-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.joint .taille { color: var(--gris); font-size: 12px; flex: none; }
.joint-retrait { padding: 4px 10px; font-size: 12px; flex: none; }
.joint.en-cours { color: var(--gris); padding: 8px 12px; }
#w-erreur { margin: 12px 48px 0; border-left-color: var(--balise-rouge); background: var(--alerte-fond); color: var(--alerte); }
.bouton-fichier { position: relative; display: inline-block; border: 1px solid var(--bord); padding: 8px 14px; cursor: pointer; white-space: nowrap; flex: none; }
.bouton-fichier:hover { border-color: var(--bord-fort); background: var(--survol); }
.bouton-fichier input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; font-size: 0; }
.bouton-fichier:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
.limite { font-size: 12px; white-space: nowrap; }
.redaction.depot { outline: 2px dashed var(--marque-fonce); outline-offset: -8px; background: var(--survol); }
@media (max-width: 1400px) { .limite { display: none; } }
@media (max-width: 1180px) { .joints, #w-erreur { margin-left: 28px; margin-right: 28px; } }
@media (max-width: 760px) {
  .joints, #w-erreur { margin-left: 18px; margin-right: 18px; }
  .pieces-liste li, .joints li { width: 100%; }
  .pieces .pj { width: 100%; }
  .joint { width: 100%; }
  .joint-nom { flex: 1; }
  .joint-retrait { min-height: 44px; padding: 8px 14px; }
  .bouton-fichier { flex: 1; text-align: center; padding: 11px 9px; font-size: 13px; min-height: 44px; }
  .limite { display: none; }
}

/* Brouillons : barre d'écriture, retour à la ligne sur téléphone */
#w-etat { font-size: 12px; }
@media (max-width: 760px) {
  .redaction .actions { flex-wrap: wrap; }
  .redaction .actions > button, .redaction .actions > .bouton-fichier { flex: 1 1 40%; }
  .redaction .actions > .btn-plein { flex: 1 1 100%; }
  .redaction #w-etat { flex: 1 1 100%; }
}

/* Signatures */
.signatures { gap: 8px; }
.signatures .gris { margin: 0 0 4px; }
.sig { border: 1px solid var(--bord); background: var(--fond); padding: 10px; display: grid; gap: 8px; margin-bottom: 8px; }
.sig-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sig-tete button { padding: 4px 10px; font-size: 12px; }
.sig-texte { resize: vertical; font: inherit; line-height: 1.5; }
.sig-defaut { min-height: 36px; }
#d-parametres { max-height: calc(100dvh - 32px); overflow-y: auto; }
.choix-sig { display: inline-flex; align-items: center; gap: 6px; }
.choix-sig select { font: inherit; color: inherit; background: var(--fond-eleve); border: 1px solid var(--bord-fort); padding: 8px 8px; border-radius: 0; max-width: 150px; }
@media (max-width: 760px) { .redaction .actions > .choix-sig { flex: 1 1 100%; justify-content: space-between; } .choix-sig select { min-height: 44px; max-width: none; flex: 1; } .sig-tete button { min-height: 44px; } }
.reglage .sig input.sig-nom { width: 100%; height: auto; }

/* Recherche : filtres, surlignage, suite */
.rech-ligne { display: flex; gap: 8px; }
.rech-ligne input { flex: 1; min-width: 0; }
.rech-ligne button { flex: none; }
.rech-avancee { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 12px; }
.rech-avancee label { display: grid; gap: 4px; font-size: 12px; color: var(--gris); font-weight: 500; min-width: 0; }
.rech-avancee label.pleine, .rech-avancee button.pleine { grid-column: 1 / -1; }
.rech-avancee select { font: inherit; color: inherit; background: var(--fond-eleve); border: 1px solid var(--bord-fort); padding: 10px 8px; border-radius: 0; width: 100%; }
.rech-avancee input[type="date"] { padding: 8px 10px; }
mark { background: var(--marque); color: var(--sur-marque); padding: 0 1px; }
.suite { padding: 14px 20px; text-align: center; }
.suite button { width: 100%; }
@media (max-width: 760px) { .rech-ligne button, .suite button, .rech-avancee button { min-height: 44px; } .rech-avancee { max-height: 38dvh; overflow-y: auto; } .rech-avancee input, .rech-avancee select { min-height: 44px; } .suite { padding: 14px 18px; } }

/* Dossiers : arbre, dépôt, gestion, menu Déplacer */
#dossiers li button.cible { background: var(--attention-fond); border-left-color: var(--marque-fonce); outline: 2px dashed var(--marque-fonce); outline-offset: -3px; }
.ligne.glisse { opacity: .45; }
.ligne[draggable="true"] { cursor: grab; }
#d-dossiers { max-width: 560px; max-height: calc(100dvh - 32px); overflow-y: auto; }
#d-dossiers > .doux { margin: -8px 0 12px; font-size: 13px; }
.dos-liste, .dep-liste { list-style: none; display: grid; margin-bottom: 16px; }
.dos-ligne { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--gris-leger); }
.dos-haut { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; min-width: 0; }
.dos-nom { font-weight: 600; overflow-wrap: anywhere; }
.dos-nom small { font-weight: 400; }
.dos-compte { font-size: 12px; white-space: nowrap; }
.dos-actions { display: flex; gap: 6px; }
.dos-actions button { padding: 4px 10px; font-size: 12px; }
.dos-actions button:disabled, .dep-liste button:disabled { opacity: .5; cursor: not-allowed; }
.dos-renom { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.dos-renom input { flex: 1 1 140px; min-width: 0; }
.dos-nouveau { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; margin-bottom: 16px; padding-top: 12px; }
.dos-nouveau label { display: grid; gap: 4px; font-size: 12px; color: var(--gris); font-weight: 500; min-width: 0; }
.dos-nouveau select { font: inherit; color: inherit; background: var(--fond-eleve); border: 1px solid var(--bord-fort); padding: 10px 8px; border-radius: 0; width: 100%; }
.dos-nouveau .btn-plein { grid-column: 1 / -1; }
#d-dossiers .bandeau { margin: 0 0 12px; }
.dep-liste button { width: 100%; display: flex; justify-content: space-between; text-align: left; border-width: 0 0 1px; padding: 12px 14px; }
.dep-liste { max-height: 50dvh; overflow-y: auto; border: 1px solid var(--bord); }
#dep-sujet { margin: -8px 0 12px; overflow-wrap: anywhere; }
.mail .actions { flex-wrap: wrap; }
@media (max-width: 760px) {
  .dos-actions button, .dos-nouveau .btn-plein, #d-dossiers form button, .dos-renom button { min-height: 44px; }
  .dos-nouveau { grid-template-columns: 1fr; }
  .dos-nouveau input, .dos-nouveau select { min-height: 44px; }
  .dep-liste button { min-height: 48px; }
  .mail .actions button { flex: 1 1 28%; }
}

/* ---------- Clavier : curseur de la liste ---------- */
.ligne.curseur { background: var(--survol); box-shadow: inset 0 0 0 1px var(--bord-fort); }
.ligne.choisie.curseur { background: var(--selection); }

/* ---------- Balayage tactile (téléphone) : droite = archiver, gauche = supprimer ---------- */
.glisse-boite { position: relative; overflow: hidden; }
.glisse-boite > .ligne { position: relative; background: var(--fond); touch-action: pan-y; }
.glisse-boite > .ligne.choisie { background: var(--selection); }
.fond-glisse { position: absolute; inset: 0; display: none; align-items: center; font-weight: 700; padding: 0 20px; }
.fond-glisse.archiver { justify-content: flex-start; background: var(--marque); color: var(--sur-marque); }
.fond-glisse.supprimer { justify-content: flex-end; background: var(--alerte-bloc); color: var(--sur-alerte-bloc); }
.glisse-boite[data-sens="archiver"] .fond-glisse.archiver, .glisse-boite[data-sens="supprimer"] .fond-glisse.supprimer { display: flex; }
.glisse-boite.seuil .fond-glisse { filter: brightness(.94); text-decoration: underline; }
.glisse-en-cours > .ligne { box-shadow: 0 0 12px rgba(0,0,0,.18); }
@media (min-width: 761px) { .fond-glisse { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .glisse-boite > .ligne { transition: none !important; } }

/* ---------- Téléphone : passe complète (375 et 414 px) ---------- */
.plus-actions, .envoyer-haut { display: none; }
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  .app { height: var(--vh, 100dvh); transform: translateY(var(--vt, 0px)); }
  /* Cibles tactiles : 44 px minimum partout */
  button, select, .bouton-fichier, .reglage label, .dos-actions button, .sig-tete button, .toast button, .bandeau button, .pieces .pj, .groupe-notif > button { min-height: 44px; }
  button:not(.btn-plein):not(.lien) { min-width: 44px; }
  .lien { min-height: 44px; display: inline-flex; align-items: center; }
  .rail-bas .lien { width: 100%; }
  input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), textarea:not(.w-texte) { min-height: 44px; }
  .reglage input[type="radio"], .reglage input[type="checkbox"] { width: 24px; height: 24px; }
  .liste-titre .btn-plein { display: none; }
  .evitement { display: none; }
  /* Barre d'actions de lecture : 4 actions + « ⋯ », le reste se déplie */
  .mail .actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 44px; gap: 6px; overflow: visible; }
  .mail .actions button { padding: 11px 2px; font-size: 13px; flex: none; }
  .mail .actions .sep { display: none; }
  .mail .actions [data-action="repondre"] { order: 1; } .mail .actions [data-action="archiver"] { order: 2; }
  .mail .actions [data-action="deplacer"] { order: 3; } .mail .actions [data-action="supprimer"] { order: 4; }
  .mail .actions .plus-actions { display: block; order: 5; padding: 0; font-size: 20px; font-weight: 700; }
  .mail .actions [data-action="tous"], .mail .actions [data-action="transferer"], .mail .actions [data-action="nonlu"], .mail .actions [data-action="spam"] { display: none; }
  .mail .actions.plus-ouvert [data-action="tous"], .mail .actions.plus-ouvert [data-action="transferer"], .mail .actions.plus-ouvert [data-action="nonlu"], .mail .actions.plus-ouvert [data-action="spam"] { display: block; grid-column: span 2; order: 6; white-space: normal; }
  .mail .actions.plus-ouvert .plus-actions { background: var(--selection); }
  /* Écriture plein écran : Envoyer en haut, hors de portée du clavier virtuel */
  .redaction { position: fixed; inset: 0; z-index: 5; background: var(--fond); height: var(--vh, 100dvh); transform: translateY(var(--vt, 0px)); }
  .red-haut { position: sticky; top: 0; z-index: 2; background: var(--fond); display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 10px 18px 8px; border-bottom: 1px solid var(--bord); }
  .red-haut h2 { grid-column: 1 / -1; grid-row: 2; font-size: 1.15rem; margin-top: 4px; }
  .red-haut .retour { margin-bottom: 0; }
  .envoyer-haut { display: block; grid-row: 1; grid-column: 2; padding: 10px 22px; }
  .w-texte { min-height: 40dvh; }
  .redaction .actions { position: static; }
  .toast { left: 12px; right: 12px; transform: none; bottom: calc(76px + env(safe-area-inset-bottom)); justify-content: space-between; }
  .rapide-bas button { min-height: 44px; }
  .pieces .pj { grid-template-columns: 56px 1fr; }
  dialog { max-height: calc(100dvh - 24px); overflow-y: auto; padding: 22px 18px; }
  dialog table, .mail-corps pre, .m-de, #m-a { overflow-wrap: anywhere; }
  .mail-corps { overflow-x: auto; max-width: 100vw; }
}

/* ---------- Accessibilité ---------- */
:root { --bord-champ: #8a8577; --alerte-bloc: #8a1c1c; --sur-alerte-bloc: #ffffff; --focus-sur-marque: #141414; }
:root[data-theme="dark"] { --bord-champ: #8a867a; --alerte-bloc: #f4b0a6; --sur-alerte-bloc: #1a0a08; }
input, textarea, select, .sig-texte { border-color: var(--bord-champ); }
input::placeholder, textarea::placeholder { color: var(--gris); opacity: 1; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .ligne:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; box-shadow: none; }
.btn-plein:focus-visible { outline-color: var(--focus-sur-marque); outline-offset: -4px; }
:root[data-theme="dark"] .btn-plein:focus-visible { outline-color: var(--focus-sur-marque); }
#m-sujet:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.champ input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.evitement { position: absolute; left: 8px; top: -60px; z-index: 20; background: var(--fond-eleve); color: var(--texte); border: 2px solid var(--focus); padding: 10px 14px; }
.evitement:focus { top: 8px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media (forced-colors: active) { .ligne.curseur, .ligne.choisie { outline: 2px solid Highlight; } .btn-plein { border: 2px solid ButtonText; } }

/* Carnet, groupes, modèles */
.b-profs { font-weight: 700; color: var(--texte); }
.suggest { display: grid; margin: 0 48px; border-bottom: 1px solid var(--gris-leger); }
.suggest .sugg { display: flex; justify-content: space-between; gap: 12px; align-items: center; text-align: left; border: 0; border-top: 1px solid var(--gris-leger); padding: 10px 8px; min-height: 40px; background: var(--fond-eleve); }
.suggest .sugg small { color: var(--gris); }
.mod-champ { display: grid !important; gap: 4px; font-size: 13px; color: var(--gris); min-height: 0 !important; }
.mod-champ select, .mod-champ textarea, .sig select { font: inherit; color: var(--texte); background: var(--fond-eleve); border: 1px solid var(--bord-champ, var(--bord-fort)); padding: 8px; border-radius: 0; width: 100%; }
.reglage-case { margin-top: 8px; }
#d-carnet { max-width: 520px; }
#d-carnet h4 { margin: 16px 0 8px; }
.car-fichier { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.contact, .contact-nouveau { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.contact-nouveau { margin-top: 12px; }
.contact-nouveau .btn-plein { grid-column: 1 / -1; }
.contact input, .contact-nouveau input { min-width: 0; border: 1px solid var(--bord-champ, var(--bord-fort)); padding: 8px; background: var(--fond-eleve); }
@media (max-width: 1180px) { .suggest { margin: 0 28px; } }
@media (max-width: 760px) {
  .suggest { margin: 0 18px; } .suggest .sugg { min-height: 44px; }
  .contact, .contact-nouveau { grid-template-columns: 1fr; }
  #d-carnet button, #d-carnet .bouton-fichier, #d-carnet input, #d-parametres #mod-liste button, #d-parametres #mod-ajouter, #d-parametres #b-carnet, .mod-champ select { min-height: 44px; }
  .reglage-case { min-height: 44px; }
}