/* Courrier : trois colonnes (boîtes, messages, lecture), comme une messagerie de bureau. Jetons de poste.source.html. */
@keyframes tourne { to { transform: rotate(360deg); } }
.tourne .i { animation: tourne .9s linear infinite; }
.d-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--rouge); color: #fff; font-size: 11px; font-weight: 750; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--dock-lisere); font-variant-numeric: tabular-nums; pointer-events: none; }

.c-app { flex: 1; display: flex; min-width: 0; --c-liste: #fffdf9; --c-page: #ffffff; --c-choix: rgba(36,78,97,.12); --c-neuf: #2f6177; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-app { --c-liste: #0f2e3b; --c-page: #0c2733; --c-choix: rgba(225,196,148,.15); --c-neuf: #e1c494; } }
:root[data-theme="dark"] .c-app { --c-liste: #0f2e3b; --c-page: #0c2733; --c-choix: rgba(225,196,148,.15); --c-neuf: #e1c494; }
.c-side { width: 214px; isolation: isolate; background: var(--surface-2); }
.c-side .s-item { position: relative; transition: background .14s; }
.c-side .s-item.sel { background: none; }
.c-side .s-item.sel::before { content: ""; position: absolute; inset: 0; border-radius: 7px; background: var(--selection); z-index: -1; }
.c-side .s-item .compte.fort { color: var(--texte); font-weight: 750; }
.c-side .c-bas { margin-top: auto; padding: 8px 4px 2px; display: grid; gap: 6px; }
.c-side .c-alerte { font-size: 12px; color: var(--rouge); line-height: 1.35; padding: 0 5px; }
.c-side .c-releve { font-size: 11.5px; color: var(--leger); padding: 0 5px; }

.c-liste { width: 338px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--trait); background: var(--c-liste); min-height: 0; }
.c-liste-tete { padding: 12px 14px 8px; display: grid; gap: 8px; border-bottom: 1px solid var(--trait); }
.c-liste-tete h3 { margin: 0; font: 400 25px/1.1 var(--titre); display: flex; align-items: baseline; gap: 8px; }
.c-liste-tete h3 small { font: 600 12px Manrope, system-ui, sans-serif; color: var(--leger); }
.c-cherche { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 10px; background: var(--surface-3); color: var(--leger); }
.c-cherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--texte); font: inherit; font-size: 13px; }
.c-msgs { flex: 1; overflow: auto; overscroll-behavior: contain; }
.c-msg { position: relative; display: grid; gap: 2px; width: 100%; text-align: left; padding: 10px 14px 11px 54px; border-bottom: 1px solid var(--trait); transition: background .14s; }
.c-msg:hover { background: var(--survol); }
.c-msg.sel { background: var(--c-choix); box-shadow: inset 3px 0 0 var(--bleu); }
.c-msg .c-point { position: absolute; left: 5px; top: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-neuf); opacity: 0; }
.c-msg.non-lu .c-point { opacity: 1; }
.c-msg.sel .c-point { opacity: 0; }
.c-msg > .c-avatar { position: absolute; left: 16px; top: 12px; width: 28px; height: 28px; font-size: 11px; transition: opacity .12s; }
.c-l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.c-de { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 500; color: var(--doux); }
.c-msg.non-lu .c-de { font-weight: 750; color: var(--texte); }
.c-l1 time { flex: none; font-size: 11.5px; color: var(--leger); font-variant-numeric: tabular-nums; }
.c-objet { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--doux); }
.c-msg.non-lu .c-objet { font-weight: 650; color: var(--texte); }
.c-msg.non-lu time { color: var(--c-neuf); font-weight: 650; }
.c-apercu { font-size: 12.5px; color: var(--leger); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-icones { position: absolute; right: 12px; bottom: 11px; display: flex; gap: 4px; color: var(--leger); }
.c-icones .suivi { color: var(--ambre); }
.c-plus { padding: 12px; text-align: center; font-size: 12px; color: var(--leger); }

.c-lecture { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--c-page); container-type: inline-size; }
@container (max-width: 760px) { .c-actions .court .lib { display: none; } .c-actions .court { width: 30px; padding: 0; } }
.c-actions { flex: none; display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--trait); }
.c-retour { display: none; }
@media (max-width: 760px) { .c-retour { display: inline-flex; } }
.c-actions .sep { width: 1px; height: 18px; background: var(--trait-fort); margin: 0 4px; }
.c-actions .btn { background: transparent; font-weight: 600; color: var(--doux); }
.c-actions .btn:hover { background: var(--survol); color: var(--texte); }
.c-actions .btn[data-a="repondre"] { color: var(--texte); }
.c-actions .btn[data-a="supprimer"]:hover { background: var(--rouge-pale); color: var(--rouge); }
.c-actions .fin { margin-left: auto; }
.c-entete { flex: none; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; padding: 16px 20px 12px; align-items: start; }
.c-avatar { grid-row: span 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 750; font-size: 15px; color: #fff; background: var(--c, var(--bleu)); }
.c-entete .c-exp { font-size: 15px; font-weight: 750; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-entete .c-exp small { font-weight: 500; color: var(--doux); font-size: 12.5px; margin-left: 6px; }
.c-entete time { font-size: 12px; color: var(--leger); white-space: nowrap; }
.c-entete .c-sujet { grid-column: 2 / 4; font-size: 14px; font-weight: 650; }
.c-entete .c-dest { grid-column: 2 / 4; font-size: 12.5px; color: var(--doux); }
.c-pieces { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 12px; }
.c-piece { display: inline-flex; align-items: center; gap: 8px; max-width: 420px; padding: 6px 6px 6px 10px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--trait); font-size: 12.5px; }
.c-piece .nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.c-piece small { color: var(--leger); white-space: nowrap; }
.c-piece .btn { height: 24px; padding: 0 8px; font-size: 11.5px; }
.c-bandeau { flex: none; display: flex; align-items: center; gap: 10px; margin: 0 20px 10px; padding: 7px 10px; border-radius: 10px; background: var(--ambre-pale); color: var(--texte); font-size: 12.5px; }
.c-bandeau .btn { margin-left: auto; height: 24px; }
.c-sceau { flex: none; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--vert); color: #fff; align-self: center; }
.c-sceau .i { stroke-width: 3; }
.c-verifie { flex: none; display: flex; align-items: center; gap: 7px; margin: 0 20px 10px; padding: 6px 10px; border-radius: 10px; background: var(--vert-pale); font-size: 12.5px; min-width: 0; }
.c-verifie b { color: var(--vert); font-weight: 750; }
.c-verifie span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texte); }
.c-alerte-msg li.tete { font-weight: 650; }
.c-alerte-msg { align-items: flex-start; background: var(--ambre-pale); }
.c-alerte-msg .i { flex: none; margin-top: 2px; color: var(--ambre); }
.c-alerte-msg ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; min-width: 0; }
.c-alerte-msg.grave { background: var(--rouge-pale); box-shadow: inset 3px 0 0 var(--rouge); }
.c-alerte-msg.grave .i { color: var(--rouge); }
.c-alerte-msg.grave li:first-child { font-weight: 650; }
.c-papier { flex: 1; min-height: 0; margin: 0 12px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--trait); overflow: hidden; }
.c-papier iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

.c-accueil { margin: auto; width: min(420px, 90%); display: grid; gap: 14px; padding: 24px 0; }
.c-accueil .logo { width: 34px; height: 48px; color: var(--texte); justify-self: center; }
.c-accueil h2 { margin: 0; text-align: center; font: 400 32px/1.1 var(--titre); }
.c-accueil p { margin: 0; text-align: center; color: var(--doux); font-size: 13px; }
.c-accueil.carte { --c-carte: #ffffff; --c-champ: #fcfaf5; width: min(400px, calc(100% - 32px)); gap: 18px; padding: 34px 32px 30px; border-radius: 22px; background: var(--c-carte); box-shadow: var(--ombre-fen-in); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-accueil.carte { --c-carte: #113240; --c-champ: #0c2733; } }
:root[data-theme="dark"] .c-accueil.carte { --c-carte: #113240; --c-champ: #0c2733; }
.c-accueil.carte .logo { width: 30px; height: 43px; }
.c-accueil.carte h2 { font-size: 30px; margin-bottom: 4px; }
.c-accueil.carte .c-form { gap: 14px; }
.c-accueil.carte .c-form label { gap: 6px; font-size: 13px; font-weight: 600; }
.c-accueil.carte .champ-texte { height: 44px; padding: 0 14px; border-radius: 12px; background: var(--c-champ); font-size: 15px; color: var(--texte); }
.c-accueil.carte .champ-texte::placeholder { color: var(--leger); }
.c-accueil.carte .erreur:empty { display: none; }
.c-accueil.carte .actions { margin-top: 2px; }
.c-accueil.carte .actions .btn { flex: 1; height: 44px; border-radius: 12px; font-size: 14.5px; }
.c-form { display: grid; gap: 8px; }
.c-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 650; color: var(--doux); }
.c-form .rang { display: grid; grid-template-columns: 1fr 86px 118px; gap: 6px; }
.c-form select.champ-texte { padding: 0 6px; }
.c-form .erreur { color: var(--rouge); font-size: 12.5px; font-weight: 650; }
.c-form .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.c-lien { color: var(--bleu); font-size: 12.5px; font-weight: 650; justify-self: start; }

.c-comptes { flex: 1; display: flex; min-width: 0; }
.c-comptes .reg { flex: 1; overflow: auto; padding: 22px 28px; display: grid; align-content: start; gap: 14px; }
.c-comptes h2 { margin: 0; font: 400 28px/1.1 var(--titre); }
.c-sig { min-height: 90px; max-height: 220px; overflow: auto; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--trait-fort); background: #fff; color: #1f2a30; outline: none; font: 14px/1.45 Carlito, Calibri, Arial, sans-serif; }
.c-sig:focus { border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-pale); }
.c-mini-outils { display: flex; gap: 4px; }
.c-mini-outils .btn { height: 26px; min-width: 28px; padding: 0 8px; }

/* Nouveau message */
.r-app { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--surface); }
.r-champ { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 40px; border-bottom: 1px solid var(--trait); position: relative; }
.r-champ > span { width: 44px; flex: none; font-size: 12.5px; color: var(--leger); }
.r-champ input, .r-champ select { flex: 1; min-width: 0; height: 38px; border: 0; outline: 0; background: none; color: var(--texte); font: inherit; font-size: 13.5px; }
.r-champ .btn { height: 24px; font-size: 11.5px; background: transparent; color: var(--leger); }
.r-sugg { position: absolute; left: 60px; top: 38px; z-index: 5; min-width: 300px; max-width: calc(100% - 80px); padding: 4px; border-radius: 12px; background: var(--verre-fort); box-shadow: var(--ombre-fen-in); display: grid; }
.r-sugg button { display: grid; text-align: left; padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.r-sugg button small { color: var(--doux); font-size: 11.5px; }
.r-sugg button.sel, .r-sugg button:hover { background: var(--selection); }
.r-outils { flex: none; display: flex; align-items: center; gap: 2px; padding: 6px 12px; border-bottom: 1px solid var(--trait); }
.r-outils .btn { background: transparent; min-width: 30px; padding: 0 8px; }
.r-outils .btn:hover { background: var(--survol); }
.r-outils .sep { width: 1px; height: 16px; background: var(--trait-fort); margin: 0 4px; }
.r-corps { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px; outline: none; background: #fff; color: #1f2a30; font: 11pt/1.45 Carlito, Calibri, Arial, sans-serif; }
.r-corps blockquote { margin: 10px 0 0; padding-left: 12px; border-left: 3px solid #c9c2b4; color: #4a5559; }
.r-corps .signature { color: #4a5559; }
.r-pieces { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px; border-top: 1px solid var(--trait); }
.r-pieces:empty { display: none; }
.r-pieces .c-piece { padding-right: 4px; }
.r-pied { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--trait); }
.r-pied .erreur { color: var(--rouge); font-size: 12.5px; font-weight: 650; flex: 1; }
.r-pied .etat { color: var(--leger); font-size: 12px; flex: 1; }
.r-pied .btn-p { min-width: 110px; }
.r-choix { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.r-choix .panneau { width: min(560px, 92%); max-height: 80%; display: flex; flex-direction: column; border-radius: 16px; background: var(--surface); box-shadow: var(--ombre-fen); overflow: hidden; }
.r-choix .tete { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--trait); }
.r-choix .tete b { flex: 1; }
.r-choix .corps { overflow: auto; padding: 6px; display: grid; }
.r-choix .corps button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; text-align: left; font-size: 13px; }
.r-choix .corps button:hover { background: var(--survol); }
.r-choix .corps small { margin-left: auto; color: var(--leger); }

/* Discussions, épinglés, connexion Microsoft / Google */
.c-bascule { margin-left: auto; font: 700 11.5px/1.4 Manrope, system-ui, sans-serif; letter-spacing: 0; color: var(--leger); padding: 3px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--trait-fort); }
.c-msg .c-apercu { padding-right: 20px; }
.c-bascule.on { color: var(--bleu); background: var(--bleu-pale); box-shadow: none; }
.c-nb { position: absolute; right: 12px; top: 11px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-3); color: var(--doux); font-size: 11px; font-weight: 750; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.c-msg .c-nb + time, .c-msg:has(.c-nb) time { margin-right: 26px; }
.c-section { display: flex; align-items: center; gap: 6px; padding: 10px 14px 4px; font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--leger); }
.c-fil { flex: none; max-height: 32%; overflow-y: auto; display: grid; gap: 1px; margin: 8px 20px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--trait); }
.c-carte { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 4px 10px; padding: 9px 12px; text-align: left; background: var(--surface-2); }
.c-carte:hover { background: var(--surface-3); }
.c-carte b { font-weight: 650; white-space: nowrap; }
.c-carte.non-lu b { font-weight: 800; }
.c-carte time { grid-column: 4; font-size: 12px; color: var(--leger); }
.c-carte .c-apercu { display: block; grid-column: 2 / 5; color: var(--doux); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-carte .c-avatar { grid-row: span 2; }
.c-carte .suivi { color: var(--ambre); }
.c-avatar.petit { width: 26px; height: 26px; font-size: 10.5px; }
.c-oauth { height: 40px; font-size: 14px; }
.c-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--doux); font-size: 12.5px; }

/* Dossiers, sélection, réglages */
.c-case { position: absolute; left: 22px; top: 18px; width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; color: transparent; box-shadow: inset 0 0 0 1.5px var(--trait-fort); background: var(--surface); opacity: 0; transition: opacity .12s; }
.c-msg:hover .c-case, .c-msg.coche .c-case, .c-msg:focus-visible .c-case { opacity: 1; }
.c-msg:hover > .c-avatar, .c-msg.coche > .c-avatar, .c-msg:focus-visible > .c-avatar { opacity: 0; }
.c-msg.coche { background: var(--selection); }
.c-msg.coche .c-case { background: var(--bleu); color: var(--sur-accent); box-shadow: none; }
.c-msg[draggable="true"] { -webkit-user-drag: element; }
.c-side .s-item.c-depot { background: var(--bleu-pale); box-shadow: inset 0 0 0 1.5px var(--bleu); }
.c-plus-dossier { color: var(--leger); font-size: 12.5px; }
.c-selection { margin: auto; display: grid; justify-items: center; gap: 12px; color: var(--leger); padding: 20px; text-align: center; }
.c-selection h4 { margin: 0; font: 400 25px/1.1 var(--titre); color: var(--texte); }
.c-selection .c-lien { justify-self: center; }
.c-sel-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.c-invit { background: var(--bleu-pale); flex-wrap: wrap; }
.c-invit span { flex: 1 1 200px; min-width: 0; }
.c-invit .btn { margin-left: 0; height: 26px; }
.r-depot { outline: 2px dashed var(--bleu); outline-offset: -8px; }
#cc-plus { display: grid; gap: 10px; }
#cc-plus h3 { margin: 18px 0 0; font: 400 22px/1.1 var(--titre); }
#cc-plus .c-note { text-align: left; }
.c-acts { display: flex; justify-content: flex-end; gap: 8px; }
.rang2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.c-aire { height: 86px; padding: 8px 10px; resize: vertical; font: inherit; }
.c-form .c-case-l { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texte); font-weight: 500; }
.c-regle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); font-size: 13px; }
.c-regle .champ-texte { width: auto; flex: 1 1 130px; min-width: 110px; }
.c-import { padding: 6px 2px; }
.c-import b { font-weight: 650; }
.c-import small { display: block; color: var(--doux); }
.c-fichier { justify-self: start; cursor: pointer; }
@media (max-width: 760px) { .c-case { display: none; } .c-msg:hover > .c-avatar { opacity: 1; } }

/* Filtres rapides, catégories, aide */
.c-filtres { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 0 2px; }
.c-filtre { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--doux); box-shadow: inset 0 0 0 1px var(--trait-fort); }
.c-filtre:hover { color: var(--texte); background: var(--survol); }
.c-filtre.on { color: var(--sur-accent); background: var(--bleu); box-shadow: none; }
.c-filtre i, .c-cat { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.c-cat { align-self: center; }
.c-aide dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 13px; }
.c-aide dt { font: 600 12px var(--mono); color: var(--doux); white-space: nowrap; }
.c-aide dd { margin: 0; }
.c-msgs { position: relative; }
.c-msg.glisse { background: var(--c-liste); z-index: 1; }
.c-geste { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 0 22px; font-size: 13px; font-weight: 650; color: #fff; background: var(--leger); }
.c-geste.archive { justify-content: flex-end; }
.c-geste.archive.pret { background: var(--vert); }
.c-geste.lu.pret { background: var(--bleu-vif); }