/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* front — single stylesheet. Tokens as variables: light by default, dark by
   system preference or explicit choice (data-theme on <html>). */

:root {
  --bg: #F6F6F8; --surface: #FFFFFF; --hover: #F1F1F4; --border: #E4E4EA;
  --text: #16161B; --text2: #555561; --text3: #686874;
  --accent: #3B5BDB; --accent-ink: #FFFFFF; --accent-soft: #EDF1FF;
  --flag: #C2410C; --chip: #F1F1F4;
  --flottant: #FFFFFF; --voile: rgb(22 22 27 / 0.18); --voile-fort: rgb(22 22 27 / 0.42);
  --ombre: 0 24px 64px rgb(15 15 25 / 0.22), 0 2px 6px rgb(15 15 25 / 0.1);
  /* Classic's nine colors (ZmOrganizer), each readable on the light background. --sarcelle is not one: it says
     « free » or « accepted ». */
  --bleu: #3B5BDB; --cyan: #0E7490; --vert: #15803D; --violet: #6D28D9; --rouge: #DC2626;
  --jaune: #CA8A04; --rose: #BE185D; --gris: #6B7280; --orange: #EA580C; --sarcelle: #0F766E;
  --rayon: 8px; --police: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E0E11; --surface: #16161B; --hover: #1E1E24; --border: #2A2A32;
    --text: #EDEDF1; --text2: #B0B0BB; --text3: #9696A2;
    --accent: #8EA2FF; --accent-ink: #0E0E11; --accent-soft: #1D2340;
    --flag: #FB923C; --chip: #22222A;
    --flottant: #202027; --voile: rgb(0 0 0 / 0.62); --voile-fort: rgb(0 0 0 / 0.66);
    --ombre: 0 24px 64px rgb(0 0 0 / 0.6), 0 0 0 1px #34343E;
    --bleu: #8EA2FF; --cyan: #22D3EE; --vert: #4ADE80; --violet: #A78BFA; --rouge: #F87171;
    --jaune: #FACC15; --rose: #F472B6; --gris: #9CA3AF; --orange: #FB923C; --sarcelle: #2DD4BF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E0E11; --surface: #16161B; --hover: #1E1E24; --border: #2A2A32;
  --text: #EDEDF1; --text2: #B0B0BB; --text3: #9696A2;
  --accent: #8EA2FF; --accent-ink: #0E0E11; --accent-soft: #1D2340;
  --flag: #FB923C; --chip: #22222A;
  --flottant: #202027; --voile: rgb(0 0 0 / 0.62); --voile-fort: rgb(0 0 0 / 0.66);
  --ombre: 0 24px 64px rgb(0 0 0 / 0.6), 0 0 0 1px #34343E;
  --bleu: #8EA2FF; --cyan: #22D3EE; --vert: #4ADE80; --violet: #A78BFA; --rouge: #F87171;
  --jaune: #FACC15; --rose: #F472B6; --gris: #9CA3AF; --orange: #FB923C; --sarcelle: #2DD4BF;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { font: 400 14px/1.45 var(--police); color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(:focus-visible) { border-radius: 6px; } /* only where nothing else sets a radius */
/* A field often fills a scrolling container, which would cut off a ring drawn outside it. */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]):focus-visible,
select:focus-visible, textarea:focus-visible { outline-offset: -1px; }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { flex: none; }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 20px; padding: 0 5px;
  border-radius: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--text3); font: 500 11px var(--mono); }

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

/* Top bar */
.barre { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.marque { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.modules { display: flex; gap: 2px; margin-right: 8px; }
.module { padding: 6px 12px; border-radius: var(--rayon); color: var(--text2); font-size: 13.5px; font-weight: 500; }
.module:hover { background: var(--hover); color: var(--text); }
.module.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.logo { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.recherche { flex: 1 1 360px; max-width: 640px; position: relative; display: flex; align-items: center; }
.recherche .ico { position: absolute; left: 12px; color: var(--text3); width: 16px; height: 16px; }
.recherche input { flex: 1; min-width: 0; height: 38px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); padding: 0 72px 0 38px; font: inherit; }
.recherche .touches { position: absolute; right: 10px; display: flex; gap: 4px; }
.outils { display: flex; align-items: center; gap: 4px; margin-left: auto; }

/* Boutons */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--rayon); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: 500 13px var(--police); cursor: pointer; }
.btn:hover { background: var(--hover); }
.btn-accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn-accent:hover { background: var(--accent); filter: brightness(1.06); }
.btn-danger { background: var(--rose); color: var(--accent-ink); border-color: transparent; }
.btn-danger:hover { background: var(--rose); filter: brightness(1.06); }
.btn-accent kbd { background: transparent; color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-ink) 40%, transparent); }
.ibtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--rayon); border: 0; background: transparent; color: var(--text2); cursor: pointer; }
.ibtn:hover { background: var(--hover); color: var(--text); }

/* Body: three panes that stack on a small screen */
.corps { flex: 1; display: flex; flex-wrap: wrap; min-height: 0; }
.lateral { flex: 0 0 248px; min-width: 0; padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border); }
.lateral-nav { display: flex; flex-direction: column; gap: 2px; }
.quota { margin-top: auto; padding: 14px 10px 4px; font-size: 12px; color: var(--text3); }
.quota progress { display: block; width: 100%; height: 4px; margin-bottom: 8px; border: 0; border-radius: 2px; overflow: hidden; background: var(--chip); appearance: none; }
.quota progress::-webkit-progress-bar { background: var(--chip); }
.quota progress::-webkit-progress-value { background: var(--accent); }
.quota progress::-moz-progress-bar { background: var(--accent); }
.filtres { display: flex; gap: 6px; }
.filtres .chip:hover { background: var(--hover); }
.chip.on { background: var(--accent-soft); color: var(--accent); }
.nouveau { height: 42px; justify-content: space-between; margin-bottom: 14px; }
.nouveau span { flex: 1; }
.nav { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: var(--rayon); color: var(--text2); font-size: 13.5px; }
.nav:hover { background: var(--hover); color: var(--text); }
.nav.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-ligne { position: relative; display: flex; min-width: 0; }
.nav-ligne .nav { flex: 1; min-width: 0; }
.nav-plus { position: absolute; top: 3px; right: 4px; width: 28px; height: 28px; opacity: 0; }
.nav-ligne:hover .nav-plus, .nav-plus:focus-visible { opacity: 1; }
.nav-ligne:has(.nav-plus):hover .compte { visibility: hidden; }
@media (hover: none) { .nav-plus { opacity: 0.7; } .nav-ligne:has(.nav-plus) .nav { padding-right: 36px; } }
.nav-repli { position: absolute; top: 3px; right: 4px; width: 28px; height: 28px; }
.nav-repli .ico { width: 12px; height: 12px; transition: transform 0.12s ease; }
.nav-repli[aria-expanded="false"] .ico { transform: rotate(-90deg); }
.nav-ligne:has(.nav-repli) .nav, .corbeille-tete .nav { padding-right: 36px; }
.corbeille-tete { position: relative; }
.corbeille-tete:has(.nav-repli) .nav { padding-right: 64px; }
.nav-vider { position: absolute; top: 3px; right: 4px; width: 28px; height: 28px; }
.nav-vider .ico { width: 15px; height: 15px; }
.corbeille-tete:has(.nav-repli) .nav-vider { right: 32px; }
.nav-ligne:has(.nav-repli) .nav-plus { right: 32px; }
@media (hover: none) { .nav-ligne:has(.nav-repli) .nav { padding-right: 64px; } }
.nav .compte { font-size: 12px; }
.titre-section { margin: 18px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); }
.pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--text3); flex: none; }
.c-bleu { background: var(--bleu); } .c-cyan { background: var(--cyan); } .c-vert { background: var(--vert); }
.c-violet { background: var(--violet); } .c-rouge { background: var(--rouge); } .c-jaune { background: var(--jaune); }
.c-rose { background: var(--rose); } .c-gris { background: var(--gris); } .c-orange { background: var(--orange); }
.c-sarcelle { background: var(--sarcelle); }
/* A free color, drawn as is: the fill of an SVG takes it, the page allowing no inline style. */
svg.pastille { background: none; overflow: hidden; }

.liste { flex: 1 1 412px; max-width: 460px; min-width: 0; border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; }
.liste-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.liste-tete h1 { min-width: 0; margin: 0; overflow: hidden; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
.liste-tete .filtres { flex: none; }
/* The order of the list: a native menu, invisible over its icon, which opens the system's list. */
.tri { display: flex; flex: none; margin-left: -6px; }
.tri-bouton { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: var(--text2); cursor: pointer; }
.tri-bouton:hover { background: var(--hover); }
.tri-bouton.on { background: var(--accent-soft); color: var(--accent); }
.tri-bouton:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.tri-bouton svg { width: 16px; height: 16px; }
.tri-bouton select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; font-size: 16px; cursor: pointer; }
.lignes { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.ligne { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.ligne:hover { background: var(--hover); }
.ligne.sel { background: var(--accent-soft); }
.ligne-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ligne-haut, .ligne-bas { display: flex; align-items: center; gap: 8px; }
.de, .objet, .extrait { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.de { flex: 1; min-width: 0; font-weight: 500; }
.objet { font-size: 13.5px; font-weight: 500; }
.nonlu .de, .nonlu .objet { font-weight: 700; }
.extrait { flex: 1; min-width: 0; font-size: 13px; color: var(--text2); }
.date { font-size: 12px; color: var(--text3); white-space: nowrap; }
.nb { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--chip); color: var(--text2); font-size: 11px; font-weight: 500; }
.i-pj, .i-suivi { display: inline-flex; color: var(--text3); }
.i-pj .ico, .i-suivi .ico { width: 14px; height: 14px; }
.i-suivi { color: var(--flag); }
/* Priority in the list, as Classic's column: only where the class of service offers it. */
.i-priorite, .m-priorite { display: none; }
body[data-priorite] .i-priorite { display: inline-flex; color: var(--rose); font-weight: 700; font-size: 13px; line-height: 1; }
body[data-priorite] .i-priorite.i-basse { color: var(--text3); }
body[data-priorite] .m-priorite { display: inline; }
.point { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.vide { padding: 40px 16px; text-align: center; color: var(--text3); }

.av { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  font-weight: 600; font-size: 13px; background: var(--accent-soft); color: var(--accent); }
.av-c0 { background: light-dark(#DCE4FF, #232C55); color: light-dark(#2F4AC0, #A9B8FF); }
.av-c1 { background: light-dark(#FFEDD5, #43281A); color: light-dark(#9A3412, #FDBA74); }
.av-c2 { background: light-dark(#CCFBF1, #133A36); color: light-dark(#115E59, #5EEAD4); }
.av-c3 { background: light-dark(#E5E7EB, #2A2C33); color: light-dark(#374151, #D1D5DB); }
.av-c4 { background: light-dark(#EDE9FE, #2E2550); color: light-dark(#5B21B6, #C4B5FD); }
.av-c5 { background: light-dark(#FEF9C3, #3B3214); color: light-dark(#854D0E, #FDE68A); }
.av-c6 { background: light-dark(#FCE7F3, #45203A); color: light-dark(#9D174D, #F9A8D4); }
.av-c7 { background: light-dark(#E0F2FE, #15334A); color: light-dark(#075985, #7DD3FC); }
.av-grand { width: 40px; height: 40px; }
.av-moi { width: 32px; height: 32px; margin-left: 6px; }

/* Lecture */
.lecture { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; background: var(--surface); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 10px 20px; border-bottom: 1px solid var(--border); }
.espace { flex: 1; }
.fil { padding: 28px 40px 24px; display: flex; flex-direction: column; gap: 14px; max-width: 860px; }
.fil h2 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; }
.fil-info { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.btn-leger { height: 28px; padding: 0 8px; border-color: transparent; background: none; color: var(--text2); }
.tout-deplier { display: none; margin-left: auto; }
.js .tout-deplier { display: inline-flex; }
.msg + .msg { border-top: 1px solid var(--border); }
.msg-tete { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none; }
.msg-tete::-webkit-details-marker { display: none; }
.msg-qui { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.msg-qui strong { font-weight: 500; }
.msg-nouveau .msg-qui strong { font-weight: 700; }
.msg-tete time { flex: none; margin-left: auto; }
.msg-extrait { flex: 1 1 0; min-width: 0; color: var(--text3); font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.msg[open] .msg-extrait, .msg:not([open]) .msg-email { display: none; }
.msg-contenu { padding: 0 0 20px; display: flex; flex-direction: column; gap: 16px; }
.msg-dest { margin: 0; }
.msg-pixels { margin: 0; } /* the tracking pixels taken out: a line, no more */
/* A name of the reading pane opens the menu of its address: it reads as text, until hovered. */
button.adresse { display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; border-radius: 3px; }
button.adresse:hover { text-decoration: underline; }
button.adresse:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lien { color: var(--accent); text-decoration: underline; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--chip); color: var(--text2); font-size: 12px; font-weight: 500; }
.chip.chip-priorite { background: color-mix(in srgb, var(--rose) 16%, transparent); color: var(--rose); }
.entete { display: flex; align-items: center; gap: 12px; }
.qui { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qui strong { font-weight: 600; }
.discret { color: var(--text3); font-size: 13px; }
.secondaire { color: var(--text2); font-size: 13px; }
.texte { font-size: 15px; line-height: 1.65; display: flex; flex-direction: column; gap: 12px; }
.texte p { margin: 0; white-space: pre-line; }
.pjs { display: flex; flex-wrap: wrap; gap: 10px; }
.pjs-tout { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.pj-retirer { display: contents; }
.pjs-tout .lien-fin { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.pjs-tout svg { width: 15px; height: 15px; }
.pj { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; min-width: 220px; }
.pj-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pj-nom { font-size: 13px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ext { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; background: var(--chip); color: var(--text2); }
.ext-PDF { background: #FEE2E2; color: #991B1B; } .ext-XLS { background: #DCFCE7; color: #166534; } .ext-DOC { background: #DBEAFE; color: #1E40AF; }
.accueil { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text3); padding: 40px; text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .ligne, .nav, .btn, .ibtn { transition: background-color 0.12s ease; }
}

/* ⌘K palette: native dialog box (focus trapped, Escape and backdrop handled by the browser) */
.palette { width: min(680px, calc(100vw - 32px)); margin: 12vh auto auto; padding: 0; border: 0; border-radius: 16px;
  background: var(--flottant); color: var(--text); box-shadow: var(--ombre); overflow: hidden; }
.palette::backdrop { background: var(--voile-fort); }
.palette:not([data-mode=""]) .pied-recherche, .palette[data-mode=""] .pied-choix { display: none; }
dialog:focus, .lecture:focus { outline: none; }
.palette-champ { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.palette-champ .ico { color: var(--text3); width: 20px; height: 20px; }
.palette-champ input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font: 500 17px var(--police); }
.palette-resultats { max-height: 60vh; overflow-y: auto; padding: 6px 8px 8px; }
.palette .sec { padding: 12px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); }
.it { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent;
  color: var(--text); font: 400 14px var(--police); text-align: left; cursor: pointer; }
.it:hover { background: var(--hover); }
.it.actif { background: var(--accent-soft); }
.it .ico { color: var(--text2); }
.it-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.it-titre { font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.it-detail { font-size: 13px; color: var(--text2); }
.av-petit { width: 32px; height: 32px; font-size: 12px; }
mark { background: color-mix(in srgb, #F59E0B 38%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.it.actif::after { content: "↵"; flex: none; min-width: 18px; height: 20px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--text3); font: 500 11px/18px var(--mono); text-align: center; }
.it-touches { flex: none; display: inline-flex; gap: 4px; }
.it-pastille { flex: none; width: 18px; display: flex; justify-content: center; }
.palette-vide { padding: 28px 12px; text-align: center; color: var(--text3); }
.palette-pied { display: flex; align-items: center; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--border); background: var(--bg); font-size: 12px; color: var(--text3); }
.palette-pied span { display: inline-flex; align-items: center; gap: 4px; }

/* Actions and HTML body */
.ibtn.actif { color: var(--flag); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px;
  background: var(--accent-soft); color: var(--text2); font-size: 13px; }
.bandeau .btn { margin-left: auto; height: 30px; }
.bandeau-accuse p, p.bandeau-accuse { margin: 0; }
.bandeau-accuse .regle-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.bandeau-accuse .regle-actions .btn { margin-left: 0; }
.bandeau-absence p { margin: 0; }
.bandeau-absence .regle-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bandeau-absence .regle-actions .btn { margin-left: 0; }
.corps-html { display: block; width: 100%; border: 0; border-radius: 10px; background: transparent; }
/* The sheet is there before its content: without a background, the panel stays dark while loading,
   then switches abruptly to gray. A body without a sheet waits for its document: see guetterCorps. */
.corps-html.feuille { background: #FFFFFF; }
.js .corps-html:not(.feuille):not(.pret) { visibility: hidden; }
/* A mail that imposes its colors stays readable in dark, without punching a hole in the screen. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feuille { filter: brightness(0.74); } }
:root[data-theme="dark"] .feuille { filter: brightness(0.74); }
.cite > summary { display: inline-block; padding: 0 10px; border-radius: 999px; background: var(--chip); color: var(--text2); font-size: 12px; line-height: 22px; cursor: pointer; list-style: none; }
.cite > summary::-webkit-details-marker { display: none; }
.cite[open] > summary { margin-bottom: 10px; }
.cite-texte { display: flex; flex-direction: column; gap: 10px; padding-left: 12px; border-left: 3px solid var(--border); color: var(--text2); font-size: 14px; }
.cite-texte p { margin: 0; white-space: pre-line; }
a.pj-texte:hover .pj-nom { text-decoration: underline; }
.pj-vue { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

/* Attachment viewer, beside the message: the list steps aside to leave it room. */
.visionneuse { flex: 1.25 1 0; min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--border); background: var(--bg); outline: none; }
.visionneuse[hidden] { display: none; }
.vis-tete { flex: none; display: flex; align-items: center; gap: 2px; height: 56px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.vis-tete .ext { flex: none; width: 30px; height: 30px; margin-right: 10px; font-size: 9.5px; }
.vis-titre { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.vis-nom { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vis-pos { font: 500 11.5px var(--mono); }
.vis-pos:empty { display: none; }
.vis-sep { flex: none; width: 1px; height: 20px; margin: 0 6px; background: var(--border); }
.vis-tete .ibtn:disabled { opacity: 0.35; cursor: default; }
.vis-tete .ibtn[hidden] { display: none; }
.vis-corps { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 24px; }
.visionneuse[data-genre="pdf"] .vis-corps, .visionneuse[data-genre="bureau"] .vis-corps { padding: 0; overflow: hidden; }
.vis-pdf { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); opacity: 0; transition: opacity 0.18s ease-out; }
.vis-pdf.pret { opacity: 1; }
.vis-image { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; background: #FFFFFF;
  box-shadow: 0 1px 2px rgb(15 15 25 / 0.08), 0 8px 24px rgb(15 15 25 / 0.12); cursor: zoom-in; }
.vis-reelle { align-items: flex-start; justify-content: flex-start; }
.visionneuse[data-genre="texte"] .vis-corps { display: block; padding: 16px; }
.visionneuse[data-genre="texte"] .vis-etat { margin: 48px auto 0; }
.vis-texte { min-height: 100%; box-sizing: border-box; }
.vis-coupe { margin: 10px 2px 0; }
.vis-reelle .vis-image { max-width: none; max-height: none; cursor: zoom-out; }
.vis-etat { position: relative; z-index: 1; margin: 0; max-width: 32em; color: var(--text2); font-size: 14px; line-height: 1.6; text-align: center; }
.vis-etat[hidden] { display: none; }
.vis-etat .btn { margin-top: 12px; }
.vis-etat.en-cours::before { content: ""; display: block; width: 26px; height: 26px; margin: 0 auto 14px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent); animation: vis-tourne 0.8s linear infinite; }
@keyframes vis-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vis-etat.en-cours::before { animation-duration: 2.4s; } .vis-pdf { transition: none; } }
.visionneuse.plein-ecran { border-left: 0; }
@media (min-width: 761px) {
  .avec-visionneuse .liste { display: none; }
  .avec-visionneuse .lecture { flex: 1 1 0; min-width: 380px; }
  .avec-visionneuse .fil { padding-left: 28px; padding-right: 28px; }
}
@media (min-width: 761px) and (max-width: 1280px) { .avec-visionneuse .lateral { display: none; } }
@media (max-width: 760px) {
  .visionneuse { position: fixed; inset: 0; z-index: 30; border-left: 0; }
  .vis-tete { padding-left: 12px; }
  /* Printing from a phone goes through the downloaded file: the name keeps the room. */
  .vis-tete .ext, .vis-tete [data-vis="plein-ecran"], .vis-tete [data-vis="imprimer"], .vis-sep { display: none; }
}
.annonce { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
  padding: 10px 16px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 13.5px; box-shadow: 0 8px 24px rgb(15 15 25 / 0.28); }
/* Only what is being sent dims. htmx marks a request's source, and scripted requests name <body>:
   a bare descendant rule would light every hover-only button of the page. */
.htmx-request.ibtn, form.htmx-request .ibtn { opacity: 0.5; }

/* Dossiers personnels : retrait par niveau */
.nav.prof-1 { padding-left: 26px; } .nav.prof-2 { padding-left: 42px; } .nav.prof-3, .nav.prof-4, .nav.prof-5 { padding-left: 58px; }
.outils form { display: contents; }

/* Quick reply */
.rapide { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.rapide label { font-size: 12px; color: var(--text3); }
.rapide textarea { width: 100%; min-height: 44px; border: 0; background: transparent; color: var(--text); font: 400 14px var(--police); resize: vertical; outline: none; }
.rapide-pied { display: flex; align-items: center; gap: 8px; }

/* Compose: panel above the inbox */
.voile { position: fixed; inset: 0; z-index: 10; background: var(--voile); }
.redaction { position: fixed; z-index: 12; top: 80px; right: 32px; bottom: 32px; width: min(760px, calc(100vw - 64px)); display: flex; flex-direction: column;
  border-radius: 16px; background: var(--flottant); box-shadow: var(--ombre); overflow: hidden; }
.redaction.plein { top: 16px; right: 16px; bottom: 16px; width: calc(100vw - 32px); }
.redaction.reduite { top: auto; bottom: 0; right: 32px; width: 360px; border-radius: 12px 12px 0 0; }
.redaction.reduite .r-replie, .redaction.reduite #r-etat { display: none; }
.r-replie { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.r-tete { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--border); }
.r-tete h1 { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.r-tete #r-etat { font-size: 12px; white-space: nowrap; }
.fld { position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 4px 20px; border-bottom: 1px solid var(--border); }
.fld label { flex: none; width: 44px; font-size: 13px; color: var(--text3); }
.rcps { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rcps input { flex: 1; min-width: 120px; height: 28px; border: 0; outline: none; background: transparent; color: var(--text); font: 400 14px var(--police); }
.rcp { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 2px 0 3px; border-radius: 999px; background: var(--chip); font-size: 13px; }
.rcp-nom { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rcp .ibtn { width: 20px; height: 20px; }
.rcp .ico { width: 12px; height: 12px; }
.av-xs { width: 22px; height: 22px; font-size: 10px; }
.lien-fin { border: 0; background: none; padding: 4px; color: var(--text3); font: 400 13px var(--police); cursor: pointer; }
.lien-fin:hover { color: var(--text); }
.sugs { position: absolute; left: 74px; top: calc(100% - 2px); z-index: 2; width: min(380px, calc(100% - 94px)); padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--flottant); box-shadow: var(--ombre); }
.ev-participants { position: relative; display: flex; flex-direction: column; }
.ev-participants .sugs { left: 0; top: calc(100% + 2px); width: 100%; box-sizing: border-box; }
.ev-offerts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 6px 0 0; font-size: 13px; }
.ev-offerts .lien-fin { color: var(--accent); }
.ev-ecrire { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ev-pjs { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.ev-pjs li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ev-pjs a { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.ev-pjs .ext { flex: none; width: 28px; height: 28px; font-size: 9px; }
.ev-pjs-form { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.ev-pjs .secondaire { font-weight: 400; color: var(--text3); }
.ev-pjs-titre { font-size: 13px; font-weight: 600; color: var(--text2); }
.ev-joindre { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); cursor: pointer; }
.ev-joindre svg { width: 14px; height: 14px; }
.ev-pjs-form:has([data-joindre]:focus-visible) .ev-joindre { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ev-pjs-form input.masque[data-joindre] { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; } /* the forms' inputs are full width */
.fiche-pjs { margin-top: 16px; }
.agenda > .bandeau-haut { margin: 0 16px 8px; }
.sug { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 400 13.5px var(--police); text-align: left; cursor: pointer; }
.sug strong { font-weight: 600; }
.sug:hover, .sug[aria-selected="true"] { background: var(--accent-soft); }
.sug[aria-selected="true"]::after { content: "↵"; flex: none; min-width: 18px; height: 20px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--text3); font: 500 11px/18px var(--mono); text-align: center; }
.r-objet { flex: 1; min-width: 0; height: 36px; border: 0; outline: none; background: transparent; color: var(--text); font: 600 15px var(--police); }
.r-zone { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; overflow-y: auto; }
.r-zone.survol { outline: 2px dashed var(--accent); outline-offset: -8px; }
/* The editor is a frame of its own (docs/editeur-html.md): it fills the text area and scrolls itself. */
.r-cadre { display: block; flex: 1 1 auto; width: 100%; min-height: 220px; border: 0; background: transparent; }
.r-cadre[hidden] { display: none; }
/* An account colour that is not a neutral black: the text is written on a sheet, as it is read. */
.r-cadre.feuille { background: #FFFFFF; border-radius: 8px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .r-cadre.feuille { filter: brightness(0.74); } }
:root[data-theme="dark"] .r-cadre.feuille { filter: brightness(0.74); }
.r-sans-js { width: 100%; font: inherit; background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 8px; }
/* Plain text is written as it will be read: fixed width, rows as typed, no wrapping of its own. */
.r-brut { flex: 1 0 auto; width: 100%; min-height: 240px; box-sizing: border-box; padding: 0; border: 0; outline: none; resize: vertical;
  background: transparent; color: var(--text); font: 14px/1.55 var(--mono); tab-size: 8; white-space: pre-wrap; }
.r-format { height: 30px; padding: 0 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: 500 13px var(--police); }
/* The formatting bar, Classic's (docs/editeur-html.md). It wraps on a narrow panel; on a phone, the
   first tools show, and the rest behind « Plus ». */
.r-outils { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 12px; border-top: 1px solid var(--border); }
.r-outils[hidden] { display: none; }
.r-outils .ibtn { width: 30px; height: 30px; }
.r-outils .ico { width: 16px; height: 16px; }
.r-outils .ibtn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.r-choix { height: 30px; max-width: 128px; padding: 0 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: 500 12.5px var(--police); }
.r-taille { max-width: 76px; }
.r-trait { width: 1px; height: 18px; margin: 0 4px; background: var(--border); }
.r-plus { display: none; }
.r-palette { position: absolute; bottom: calc(100% + 6px); left: 12px; z-index: 3; display: grid; grid-template-columns: repeat(8, 24px); gap: 6px; padding: 10px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--flottant); box-shadow: var(--ombre); }
.r-palette[hidden] { display: none; }
.r-tableau { position: absolute; bottom: calc(100% + 6px); left: 12px; z-index: 3; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--flottant); box-shadow: var(--ombre); }
.r-tableau[hidden], .r-tableau [hidden] { display: none; }
.r-grille { display: grid; grid-template-columns: repeat(8, 20px); gap: 3px; }
.r-case { width: 20px; height: 20px; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); cursor: pointer; }
.r-case.on { background: var(--accent-soft); border-color: var(--accent); }
.r-grille-taille { margin: 8px 0 0; font-size: 12.5px; color: var(--text2); text-align: center; }
.r-tableau-actions { display: flex; flex-direction: column; min-width: 220px; }
.r-tableau-actions button { padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 400 13.5px var(--police); text-align: left; cursor: pointer; }
.r-tableau-actions button:hover, .r-tableau-actions button:focus-visible { background: var(--hover); }
.r-tableau-actions button[data-tableau$="-moins"] { color: var(--rose); }
.r-source { flex: 1 0 auto; width: 100%; min-height: 240px; box-sizing: border-box; padding: 10px; border: 1px solid var(--border); border-radius: 8px; resize: vertical;
  background: var(--surface); color: var(--text); font: 12.5px/1.5 var(--mono); }
.r-source[hidden] { display: none; }
.r-outils .ibtn:disabled, .r-outils select:disabled { opacity: .35; cursor: default; }
.r-lien { position: absolute; bottom: calc(100% + 6px); left: 12px; z-index: 3; width: min(320px, calc(100% - 24px)); box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--flottant); box-shadow: var(--ombre); }
.r-lien[hidden] { display: none; }
.r-lien label { font-size: 12px; color: var(--text3); }
.r-lien input { height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: 400 14px var(--police); }
.r-lien-actions { display: flex; gap: 8px; margin-top: 8px; }
.r-lien-actions [hidden] { display: none; }
.teinte { width: 24px; height: 24px; padding: 0; border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: 6px; cursor: pointer; }
.teinte:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.teinte-defaut { grid-column: 1 / -1; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 500 13px var(--police); text-align: left; padding: 0 6px; cursor: pointer; }
.teinte-defaut:hover { background: var(--hover); }
.teinte[data-teinte="#000000"] { background: #000000; } .teinte[data-teinte="#666666"] { background: #666666; }
.teinte[data-teinte="#cc0000"] { background: #cc0000; } .teinte[data-teinte="#e67700"] { background: #e67700; }
.teinte[data-teinte="#2e7d32"] { background: #2e7d32; } .teinte[data-teinte="#00838f"] { background: #00838f; }
.teinte[data-teinte="#1565c0"] { background: #1565c0; } .teinte[data-teinte="#6a1b9a"] { background: #6a1b9a; }
.teinte[data-teinte="#ffffff"] { background: #ffffff; } .teinte[data-teinte="#cccccc"] { background: #cccccc; }
.teinte[data-teinte="#f8bbd0"] { background: #f8bbd0; } .teinte[data-teinte="#ffe0b2"] { background: #ffe0b2; }
.teinte[data-teinte="#ffff00"] { background: #ffff00; } .teinte[data-teinte="#c8e6c9"] { background: #c8e6c9; }
.teinte[data-teinte="#bbdefb"] { background: #bbdefb; } .teinte[data-teinte="#e1bee7"] { background: #e1bee7; }
.r-pieces { display: flex; flex-wrap: wrap; gap: 10px; }
.piece { width: 280px; min-width: 0; }
.piece progress { display: block; width: 100%; height: 4px; border: 0; border-radius: 2px; overflow: hidden; appearance: none; background: var(--chip); }
.piece progress::-webkit-progress-bar { background: var(--chip); }
.piece progress::-webkit-progress-value { background: var(--accent); }
.piece progress::-moz-progress-bar { background: var(--accent); }
/* A filter applied to a folder: the bar, the counts, the buttons on one row. */
.filtrage p { margin: 0 0 4px; }
.filtrage [data-filtrage-etat]:empty { display: none; }
.filtrage progress:not([hidden]) { display: block; width: 100%; height: 6px; margin-top: 12px; border: 0; border-radius: 3px; overflow: hidden; appearance: none; background: var(--chip); }
.filtrage progress::-webkit-progress-bar { background: var(--chip); }
.filtrage progress::-webkit-progress-value { background: var(--accent); }
.filtrage progress::-moz-progress-bar { background: var(--accent); }
.filtrage-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.carte .filtrage-boutons .btn { margin-top: 0; }
.depot { flex: 1; min-width: 200px; min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed var(--border); border-radius: 10px; color: var(--text3); font-size: 13px; cursor: pointer; }
.depot .ico { width: 16px; height: 16px; }
.r-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 12px 16px; border-top: 1px solid var(--border); }
.envoi { position: relative; display: flex; border-radius: 10px; }
.envoyer, .programmer { height: 40px; border: 0; background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.envoyer { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 10px 0 0 10px; font: 600 14px var(--police); }
.envoyer kbd { background: transparent; color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-ink) 40%, transparent); }
.programmer { width: 36px; border-left: 1px solid color-mix(in srgb, var(--accent-ink) 30%, transparent); border-radius: 0 10px 10px 0; display: inline-flex; align-items: center; justify-content: center; }
.programmer .ico { width: 14px; height: 14px; }
.menu-envoi { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 3; width: 260px; display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--flottant); box-shadow: var(--ombre); }
.menu-envoi button { padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 400 13.5px var(--police); text-align: left; cursor: pointer; }
.menu-envoi button:hover { background: var(--hover); }
.menu-envoi button kbd { float: right; margin-left: 8px; color: var(--text3); font: 400 12px var(--police); }
.menu-envoi .menu-sep { width: 100%; margin: 2px 0; border: 0; border-top: 1px solid var(--border); }
.menu-envoi label { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; font-size: 12px; color: var(--text3); }
.menu-envoi input { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 4px; }
.r-sep { width: 10px; }
.r-rappel { font-size: 12px; }
.r-accuse { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 12.5px; color: var(--text2); white-space: nowrap; cursor: pointer; }
.r-priorite { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 12.5px; color: var(--text2); white-space: nowrap; }
.r-priorite select { height: 26px; padding: 0 6px; font-size: 12.5px; }
.r-saut { display: none; }
.r-brouillon { display: inline-flex; gap: 4px; margin-left: auto; } /* the draft's own actions go to a new row together */
.annonce button { border: 0; background: none; color: inherit; font: 600 13.5px var(--police); text-decoration: underline; cursor: pointer; }
@media (max-width: 720px) {
  .redaction, .redaction.plein { inset: 0; width: auto; border-radius: 0; }
  .redaction.reduite { inset: auto 0 0 0; width: auto; }
  .r-rappel { display: none; }
  /* Two rows: sending and attaching, then the options with the draft's own actions. */
  .r-saut { display: block; flex-basis: 100%; height: 0; }
  .envoyer kbd { display: none; } /* no keyboard to use it with */
  .r-sep { width: 4px; }
  .r-accuse { margin-left: 2px; }
  .r-priorite { margin-left: 10px; }
  .r-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .r-outils { padding: 4px 8px; }
  .r-outils .ibtn { width: 40px; height: 40px; }
  .r-outils:not(.tout) .r-sec { display: none; }
  .r-plus { display: inline-flex; }
  .r-outils.tout .r-plus { color: var(--accent); }
}
@media (max-width: 359px) { .r-pied { padding: 10px 8px; } }

/* Connexion */
.page-connexion { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 16px; }
.connexion { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.marque-grande { width: auto; font-size: 20px; }
.pied-connexion { margin: 0; text-align: center; }
.pied-connexion code { font: 12px ui-monospace, Menlo, Consolas, monospace; }
.marque-grande .logo { width: 36px; height: 36px; border-radius: 10px; font-size: 18px; }
.carte { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 28px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.carte h1 { margin: 0 0 12px; font-size: 18px; letter-spacing: -0.01em; }
.carte label { font-size: 13px; font-weight: 600; color: var(--text2); margin-top: 6px; }
.carte input { height: 40px; border: 1px solid var(--border); border-radius: var(--rayon); background: var(--surface); color: var(--text); padding: 0 12px; font: inherit; }
.carte .btn { justify-content: center; height: 40px; margin-top: 16px; }
.erreur { margin: 0 0 4px; padding: 10px 12px; border-radius: var(--rayon); background: color-mix(in srgb, var(--rose) 12%, transparent); color: var(--text); font-size: 13px; }

.titre-dossiers { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.titre-dossiers .ibtn { width: 24px; height: 24px; }
.titre-dossiers .ico { width: 14px; height: 14px; }
.titre-repli { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.titre-repli:hover { color: var(--text2); }
.titre-dossiers .titre-repli .ico { width: 11px; height: 11px; transition: transform 0.12s ease; }
.titre-repli[aria-expanded="false"] .ico { transform: rotate(-90deg); }
.section-repli { display: flex; flex-direction: column; gap: 2px; }
#section-agenda-corbeille .nav-plus, #section-corbeille .nav-plus { opacity: 0.7; }
#section-agenda-corbeille .nav, #section-corbeille .nav { padding-right: 36px; }
:root[data-replie~="agenda-corbeille"] #section-agenda-corbeille, :root[data-replie~="corbeille"] #section-corbeille, :root[data-replie~="dossiers"] #section-dossiers, :root[data-replie~="partages"] #section-partages, :root[data-replie~="etiquettes"] #section-etiquettes,
:root[data-replie~="carnets"] #section-carnets, :root[data-replie~="agendas"] #section-agendas, :root[data-replie~="listes"] #section-listes { display: none; }
/* A bar, not a dot: the dot of the row means « non lu ». */
.ligne-bas .pastille { width: 10px; height: 6px; border-radius: 2px; }
.nouveau-sec { width: 100%; margin-top: 6px; justify-content: center; }
.chip-bouton { border: 0; font-family: inherit; cursor: pointer; }
.filtre-liste { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.filtre-liste input { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--rayon); background: var(--surface); color: var(--text); font: inherit; box-sizing: border-box; }
.ligne-contact { align-items: center; }
/* Tasks */
.ajout-tache { position: relative; margin: 8px 12px; }
.ajout-tache > svg { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--text3); pointer-events: none; }
.ajout-tache input[type="text"] { width: 100%; box-sizing: border-box; height: 36px; padding: 0 12px 0 32px; border: 1px solid var(--border); border-radius: var(--rayon); background: transparent; color: var(--text); font: inherit; font-size: 14px; }
.ajout-tache input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.groupe-tache { padding: 12px 16px 4px; color: var(--text3); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.groupe-tache.en-retard, .t-date.en-retard, .fiche-champs .en-retard { color: var(--rose); }
.ligne-tache { display: flex; align-items: stretch; min-width: 0; }
.ligne-tache .ligne { flex: 1; min-width: 0; padding-left: 8px; }
.ligne-tache:has(.ligne.sel) { background: var(--accent-soft); }
.ligne-tache .ligne.sel { background: transparent; }
/* A task's tick for the selection sits in the row, before the one that completes it. */
.ligne-tache .coche { position: static; flex: none; align-self: center; margin: 0 0 0 12px; }
.ligne-tache .coche + .coche-tache { margin-left: 10px; }
.ligne-tache:has(.coche:checked) { background: var(--accent-soft); }
.ligne-tache:has(.coche:checked) .ligne { background: transparent; }
.form-contact select { width: 100%; box-sizing: border-box; height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--rayon); background: var(--surface); color: var(--text); font: inherit; }
.form-contact .ligne-case input { width: auto; }
.form-tache .form-ligne > div { min-width: 0; }
.coche-tache { flex: none; align-self: center; display: grid; place-items: center; width: 20px; height: 20px; margin-left: 14px; padding: 0; border: 1.5px solid var(--text3); border-radius: 50%; background: transparent; color: transparent; cursor: pointer; }
.coche-tache svg { width: 12px; height: 12px; }
.coche-tache:hover { border-color: var(--accent); color: var(--accent); }
.ligne-tache.faite .coche-tache { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.ligne-tache.faite .de, .tache-faite { color: var(--text3); text-decoration: line-through; }
.t-importante { display: inline-flex; color: var(--flag); }
.t-importante svg { width: 13px; height: 13px; }
.lignes-taches .ligne-bas, :root[data-densite="compacte"] .lignes-taches .ligne-bas { display: flex; gap: 8px; font-size: 12.5px; }
.fiche-tache h2 { overflow-wrap: anywhere; }
.t-date { color: var(--text2); }
.av svg { width: 16px; height: 16px; }
.fiche { padding: 24px 28px; overflow-y: auto; }
.fiche-tete { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.fiche-tete h2 { margin: 0; font-size: 22px; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.fiche-tete p { margin: 2px 0 0; }
.av-grand { width: 64px; height: 64px; font-size: 22px; flex: none; }
.av-photo { object-fit: cover; background: var(--surface2, transparent); }
.photo-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0; }
.av-grand svg { width: 28px; height: 28px; }
.fiche-champs { display: grid; grid-template-columns: 140px 1fr; gap: 10px 16px; margin: 0; }
.fiche-champs dt { color: var(--text3); font-size: 13px; }
.fiche-champs dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fiche-champs .notes { white-space: pre-wrap; }
.membres { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.membres li { display: flex; align-items: center; gap: 10px; }
.form-contact { display: flex; flex-direction: column; gap: 8px; max-width: 620px; padding: 24px 28px; overflow-y: auto; }
.form-contact h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.form-contact label { font-size: 13px; font-weight: 600; color: var(--text2); }
.form-contact input, .form-contact textarea { width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--rayon); background: var(--surface); color: var(--text); font: inherit; }
.form-ligne { display: flex; gap: 12px; }
.form-ligne > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.form-plus { display: flex; flex-direction: column; }
.form-plus[open] > summary { margin-bottom: 8px; }
.form-plus > summary { color: var(--accent); cursor: pointer; font-size: 13px; }
.form-plus > :not(summary) { display: block; margin-bottom: 8px; }
.form-plus .form-ligne { display: flex; }
.champs-liste { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.form-plus > .champs-liste { display: flex; }
.champs-liste > legend { margin-bottom: 0; padding: 0; font-size: 13px; font-weight: 600; color: var(--text2); }
.champ-ligne { display: flex; gap: 8px; align-items: center; }
.form-contact .champ-ligne select { width: auto; flex: 0 0 150px; }
.champ-ligne > input { flex: 1; min-width: 0; }
.champ-ligne .retirer-champ { flex: none; width: 28px; height: 28px; }
.champ-adresse { display: grid; grid-template-columns: 1fr 28px; gap: 8px; align-items: start; padding-top: 8px; border-top: 1px solid var(--border); }
.champ-adresse > :not(.retirer-champ) { grid-column: 1; }
.champ-adresse > .retirer-champ { grid-column: 2; grid-row: 1; }
.form-contact .champ-adresse select { width: 150px; }
.champs-liste > .lien-fin { align-self: flex-start; }
.form-plus > .ligne-case { display: inline-flex; }
.rep-date, .rep-nombre, .rep-jours { display: none; margin: 8px 0 0; padding: 0; border: 0; }
.rep-jours legend { margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--text2); }
.rep-jours .ligne-case { margin-right: 12px; }
.rep > .secondaire { margin: 8px 0 0; font-size: 13px; }
.ev-form[data-frequence=""] .rep { display: none; }
.ev-form[data-fin="date"] .rep-date { display: block; }
.ev-form[data-fin="nombre"] .rep-nombre { display: block; }
.ev-form[data-frequence="JOU"] .rep-jours { display: block; }
.mini-titre { display: flex; align-items: center; justify-content: space-between; }
.mini-titre .ibtn { width: 24px; height: 24px; }
.bandeau-haut { margin: 12px 16px 0; }
@media (max-width: 760px) { .fiche { padding: 16px; } .fiche-champs { grid-template-columns: 1fr; gap: 2px 0; } .fiche-champs dd { margin-bottom: 10px; } .form-contact { padding: 16px; } .form-ligne { flex-direction: column; gap: 8px; } }
/* On a wide screen, each column scrolls on its own: the page itself never moves. Otherwise,
   the detail opened from the bottom of a long list is displayed far above, out of view. */
@media (min-width: 761px) {
  .app { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .corps { flex-wrap: nowrap; overflow: hidden; }
  .lateral { overflow-y: auto; }
  .liste { min-height: 0; }
  .lignes { flex: 1; min-height: 0; }
  .lecture { min-height: 0; overflow-y: auto; }
  .lecture > .actions { position: sticky; top: 0; z-index: 2; flex: none; background: var(--surface); }
}
.agenda { flex: 1 1 0; min-width: 0; height: calc(100vh - 59px); display: flex; flex-direction: column; background: var(--surface); }
.ag-barre { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.ag-barre h1 { min-width: 0; margin: 0 0 0 8px; overflow: hidden; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }
.ag-suivant svg { transform: rotate(180deg); }
.ag-modes { display: flex; gap: 4px; flex: none; }
.ag-modes .mode-court { display: none; }
@media (min-width: 761px) and (max-width: 1180px) {
  .ag-modes .mode-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ag-modes .mode-court { display: inline; }
}
.ag-tetes, .ag-entiers, .ag-corps { display: grid; }
.ag-n1 { grid-template-columns: 56px minmax(0, 1fr); }
.ag-n2 { grid-template-columns: 56px repeat(2, minmax(0, 1fr)); }
.ag-n3 { grid-template-columns: 56px repeat(3, minmax(0, 1fr)); }
.ag-n4 { grid-template-columns: 56px repeat(4, minmax(0, 1fr)); }
.ag-n5 { grid-template-columns: 56px repeat(5, minmax(0, 1fr)); }
.ag-n6 { grid-template-columns: 56px repeat(6, minmax(0, 1fr)); }
.ag-n7 { grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.ag-tetes { padding-right: var(--ag-defile, 0); border-bottom: 1px solid var(--border); }
.ag-tete { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 8px 0; color: var(--text2); font-size: 12.5px; }
.ag-tete strong { font-size: 17px; font-weight: 600; color: var(--text); }
.ag-tete.auj, .ag-tete.auj strong { color: var(--accent); }
.ag-entiers { padding-right: var(--ag-defile, 0); border-bottom: 1px solid var(--border); }
.ag-marge { color: var(--text3); font-size: 11px; text-align: right; padding: 4px 8px 0 0; }
.ag-entiers, .ag-mois { -webkit-user-select: none; user-select: none; }
.ag-entier { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 26px; padding: 2px 2px 8px; border-left: 1px solid var(--border); }
.ag-entier.ag-choisie, .ag-case.ag-choisie { background: var(--accent-soft); }
.ag-corps { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; }
.ag-heure { position: relative; height: 48px; box-sizing: border-box; }
.ag-heure span { position: absolute; top: -8px; right: 8px; color: var(--text3); font-size: 11px; }
.ag-heure:first-child span { display: none; }
.ag-jour { position: relative; height: 1152px; border-left: 1px solid var(--border); -webkit-user-select: none; user-select: none;
  background-image: repeating-linear-gradient(to bottom, var(--border) 0, var(--border) 1px, transparent 1px, transparent 48px); }
.ag-jour.auj { background-color: color-mix(in srgb, var(--accent) 4%, transparent); }
/* Outside the working hours (agenda.js): under the events, the hour lines still showing. */
.ag-hors { position: absolute; left: 0; right: 0; z-index: 0; background: color-mix(in srgb, var(--text) 5%, transparent); pointer-events: none; }
.ag-maintenant { position: absolute; left: 0; right: 0; z-index: 3; height: 2px; background: var(--rose); pointer-events: none; }
.ev { display: block; box-sizing: border-box; min-width: 0; margin: 0; padding: 2px 6px; overflow: hidden; border: 0; border-left: 3px solid var(--ev); border-radius: 5px; background: color-mix(in srgb, var(--ev) 16%, var(--surface)); color: var(--text); font: 500 12px/1.3 var(--police); text-align: left; cursor: pointer; }
.ev:hover { background: color-mix(in srgb, var(--ev) 26%, var(--surface)); }
.ev.c-bleu { --ev: var(--bleu); } .ev.c-cyan { --ev: var(--cyan); } .ev.c-vert { --ev: var(--vert); }
.ev.c-violet { --ev: var(--violet); } .ev.c-rouge { --ev: var(--rouge); } .ev.c-jaune { --ev: var(--jaune); }
.ev.c-rose { --ev: var(--rose); } .ev.c-gris { --ev: var(--gris); } .ev.c-orange { --ev: var(--orange); }
.ev { --ev: var(--accent); }
.ag-jour .ev { position: absolute; z-index: 2; touch-action: none; }
.ev strong { display: block; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ev span { display: block; overflow: hidden; color: var(--text2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ev-attente { background: transparent; border-style: dashed; border-width: 1px 1px 1px 3px; border-color: var(--ev); }
.ev-entier, .ev-mois { width: 100%; white-space: nowrap; text-overflow: ellipsis; }
/* Guests: after the time, small, never before the title; a short block hides its second line. */
.ev .ev-invites, .ag-ligne .ev-invites { display: inline-flex; vertical-align: -2px; margin: 0 2px 0 4px; color: var(--text2); overflow: visible; }
.ev-entier .ev-invites, .ev-mois .ev-invites { margin: 0 4px 0 0; }
.ev .ev-invites .ico, .ag-ligne .ev-invites .ico { width: 12px; height: 12px; }
.ev.ev-court .ev-invites .ico { display: none; }
.ev-mois span { display: inline; }
.ev-provisoire { border-left-style: dashed; opacity: .85; }
.ev-refuse { opacity: .5; text-decoration: line-through; }
.ev-poignee { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; cursor: ns-resize; }
.ev-ombre { position: absolute; left: 2px; right: 4px; z-index: 3; padding: 2px 6px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); font-size: 12px; pointer-events: none; }
.ag-mois { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.ag-mois-tete, .ag-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ag-mois-tete span { padding: 6px 8px; color: var(--text3); font-size: 12px; }
.ag-semaine { flex: 1; min-height: 92px; border-top: 1px solid var(--border); }
.ag-case { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 4px; border-left: 1px solid var(--border); }
/* The week's number (zimbraPrefShowCalendarWeek), in the corner of its first day. */
.ag-sem { position: absolute; top: 5px; right: 6px; color: var(--text3); font-size: 10.5px; }
.ag-case:first-child { border-left: 0; }
.ag-case.hors { background: color-mix(in srgb, var(--text3) 6%, transparent); }
.ag-case.hors .ag-num { color: var(--text3); }
.ag-num { align-self: flex-start; min-width: 22px; padding: 1px 4px; border-radius: 999px; color: var(--text2); font-size: 12px; text-align: center; }
.ag-case.auj .ag-num { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.ag-reste { color: var(--text3); font-size: 11px; padding-left: 4px; }
.ag-liste { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px 24px; }
.ag-liste-jour h2 { margin: 16px 0 6px; color: var(--text2); font-size: 13px; font-weight: 600; }
.ag-liste-jour h2.auj { color: var(--accent); }
.ag-ligne { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: var(--rayon); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ag-ligne:hover { background: var(--hover); }
.ag-ligne-heure { flex: none; width: 58px; color: var(--text2); font-size: 13px; }
.ag-ligne-titre { min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.mini { margin: 12px 0 4px; font-size: 12px; }
.mini.semaines .mini-grille { grid-template-columns: 1.8em repeat(7, 1fr); }
.mini-sem { align-self: center; color: var(--text3); font-size: 10px; }
.mini-titre { padding: 0 6px 6px; color: var(--text2); font-weight: 600; }
.mini-grille { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.mini-grille > span { color: var(--text3); font-size: 11px; }
.mini-jour { padding: 3px 0; border-radius: 999px; color: var(--text2); }
.mini-jour:hover { background: var(--hover); }
.mini-jour.hors { color: var(--text3); }
.mini-jour.auj { color: var(--accent); font-weight: 700; }
.mini-jour.on { background: var(--accent-soft); color: var(--accent); }
.mini-jour.occupe { color: var(--text); font-weight: 700; } /* a displayed calendar has an event that day */
.mini-jour.survol { box-shadow: inset 0 0 0 2px var(--accent); } /* a mail dragged over the day */
.mini-courrier { margin: 8px 12px 4px; }
.mini-aide { margin: 6px 6px 0; color: var(--text3); font-size: 11px; line-height: 1.3; }
.ag-coche { cursor: pointer; }
.ag-coche input { flex: none; margin: 0; accent-color: var(--accent); }
.ev-fiche { display: flex; flex-direction: column; gap: 10px; }
.ev-fiche p { margin: 0; }
.ev-reponses { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.reponse-mot { flex-basis: 100%; }
.reponse-mot textarea { width: 100%; box-sizing: border-box; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--rayon); background: var(--surface); color: var(--text); font: inherit; resize: vertical; }
.reponse-mot textarea:disabled { opacity: 0.5; }
.refus-partage > p { margin: 6px 0; }
.refus-partage > .btn { margin-top: 6px; }
/* The padding leaves room for the focus ring of checkboxes and buttons: this form scrolls, and clips. */
.ev-form { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 120px); margin: -4px; padding: 4px; overflow-y: auto; }
.ev-form label:not(.ligne-case) { font-size: 13px; font-weight: 600; color: var(--text2); }
.ev-form input:not([type="checkbox"]), .ev-form textarea, .ev-form select { width: 100%; box-sizing: border-box; min-height: 38px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--rayon); background: var(--surface); color: var(--text); font: inherit; }
.ev-form [hidden] { display: none; }
.ev-dispos-btn { align-self: flex-start; color: var(--accent); }
/* The planner: a day by half-hours, a row a person, scrolled sideways on a narrow screen. */
.planif { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.planif-tete { display: flex; align-items: center; gap: 8px; }
.planif-tete strong { font-size: 13.5px; }
.planif-grille { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--rayon); }
.planif-table { border-collapse: collapse; font-size: 12px; }
.planif-table th { padding: 4px 8px; font-weight: 500; text-align: left; white-space: nowrap; }
.planif-table thead th { color: var(--text3); font-weight: 400; border-left: 1px solid var(--border); }
.planif-table tbody th { position: sticky; left: 0; z-index: 1; max-width: 14em; background: var(--surface); border-right: 1px solid var(--border); }
.planif-qui { display: flex; align-items: center; gap: 6px; min-width: 0; }
.planif-qui .acces-nom { overflow: hidden; text-overflow: ellipsis; }
.planif-detail { display: block; font-size: 11px; }
.planif-tous th { font-weight: 600; }
.pc { width: 14px; min-width: 14px; height: 26px; padding: 0; border-top: 1px solid var(--border); }
.pc:nth-child(odd) { border-right: 1px solid var(--border); }
.pc button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.pc button:hover, .pc button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pc-libre { background: color-mix(in srgb, var(--sarcelle) 14%, transparent); }
.pc-occupe { background: color-mix(in srgb, var(--rose) 55%, transparent); }
.pc-provisoire { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--rose) 45%, transparent) 0 3px, transparent 3px 6px); }
.pc-absent { background: color-mix(in srgb, var(--violet) 55%, transparent); }
.pc-inconnu { background: repeating-linear-gradient(135deg, var(--chip) 0 3px, transparent 3px 6px); }
.pc-choisi { box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
.planif-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font-size: 11.5px; color: var(--text3); }
.planif-legende span { display: inline-block; width: 12px; height: 12px; margin-left: 6px; border-radius: 3px; border: 1px solid var(--border); }
.planif-suggestions ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
/* Rooms and equipment of an event */
.ev-ressources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.ev-ressources-titre { font-size: 13px; font-weight: 600; color: var(--text2); }
.ev-choisies { display: contents; margin: 0; padding: 0; list-style: none; }
.ev-ressources > .lien-fin { color: var(--accent); }
.ev-recherche-ressources { flex-basis: 100%; min-width: 0; max-width: 100%; }
.ev-recherche-ressources:empty { display: none; }
.ev-recherche { box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--rayon); }
.ev-recherche-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.ev-recherche-champs > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ev-recherche > .btn { align-self: flex-start; }
.ev-trouvees { margin-top: 4px; }
.ev-trouvees li { flex-wrap: wrap; }
.ev-trouvees .acces-nom { flex: 1 1 180px; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.ev-trouvees .btn { height: 30px; }
.ev-conflits { margin: 6px 0; padding-left: 18px; }
.ev-form .erreur .btn { margin-top: 4px; }
.ev-ressources-fiche { margin: 0; padding: 0; list-style: none; }
.invitation { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--accent-soft); }
.invitation-tete { display: flex; gap: 10px; color: var(--accent); }
.invitation-tete strong { color: var(--text); }
.invitation-tete p { margin: 2px 0 0; }
.invitation-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.reponse-etat { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.reponse-etat svg { width: 14px; height: 14px; }
.reponse-AC { background: color-mix(in srgb, var(--sarcelle) 16%, transparent); color: var(--sarcelle); }
.reponse-TE { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); }
.reponse-DE { background: color-mix(in srgb, var(--rose) 16%, transparent); color: var(--rose); }
@media (max-width: 760px) {
  .ag-barre { flex-wrap: wrap; padding: 8px 12px; }
  .ag-barre .btn kbd, .ag-barre h1 { display: none; }
  .agenda { height: calc(100vh - 190px); }
  .ag-n2 { grid-template-columns: 34px repeat(2, minmax(0, 1fr)); }
  .ag-n3 { grid-template-columns: 34px repeat(3, minmax(0, 1fr)); }
  .ag-n4 { grid-template-columns: 34px repeat(4, minmax(0, 1fr)); }
  .ag-n5 { grid-template-columns: 34px repeat(5, minmax(0, 1fr)); }
  .ag-n6 { grid-template-columns: 34px repeat(6, minmax(0, 1fr)); }
  .ag-n7 { grid-template-columns: 34px repeat(7, minmax(0, 1fr)); }
  .ag-n1 { grid-template-columns: 34px minmax(0, 1fr); }
  .ag-tete { flex-direction: column; align-items: center; gap: 0; font-size: 11px; }
  .ag-heure span { right: 3px; font-size: 10px; }
  .ev { padding: 2px 3px; }
  .ag-liste { padding: 4px 12px 12px; }
  .ag-case { padding: 2px; }
  .ev-mois span, .ev-mois .ev-invites { display: none; }
}
.fil-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip-retirer { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: -4px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text3); cursor: pointer; }
.chip-retirer:hover { background: var(--hover); color: var(--text); }
.chip-retirer svg { width: 12px; height: 12px; }
.pastilles { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.pastilles:empty { display: none; }
.element-tags { margin-top: 6px; }
.chip-ajout { border: 1px dashed var(--border); background: none; color: var(--text3); font-family: inherit; cursor: pointer; }
.chip-ajout:hover { background: var(--hover); color: var(--text); }
.chip-ajout svg { width: 13px; height: 13px; }

/* Compact density */
:root[data-densite="compacte"] .ligne { padding: 8px 16px; }
:root[data-densite="compacte"] .ligne .av { width: 28px; height: 28px; font-size: 11px; }
:root[data-densite="compacte"] .ligne-bas { display: none; }
:root[data-densite="compacte"] .coche { top: 12px; left: 21px; }

/* Message tools */
/* Tools of a search: the form opens under its button, the title keeps its place. */
.recherche-outils { position: relative; flex: none; display: flex; align-items: center; gap: 6px; }
.recherche-outils summary { list-style: none; cursor: pointer; }
.recherche-outils summary::-webkit-details-marker { display: none; }
.recherche-outils details[open] > form, .recherche-outils details[open] > .recherche-panneau { position: absolute; top: calc(100% + 6px); right: 0; z-index: 5;
  display: flex; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--ombre); }
.recherche-outils input[name="nom"] { min-width: 0; width: 13em; }
/* A saved search's name, query and place: one line each, the fields aligned. */
.recherche-outils details[open] > .recherche-panneau { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 6px; align-items: center; width: min(30em, 80vw); }
.recherche-panneau form { display: contents; }
.recherche-panneau label { color: var(--text2); font-size: 13px; }
.recherche-outils .recherche-panneau input, .recherche-outils .recherche-panneau select { width: 100%; min-width: 0; box-sizing: border-box; }
/* The filters of a search's results: switches, then menus that open under their chip. */
.filtres-recherche { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.filtres-recherche .chip:hover { background: var(--hover); }
.menu-filtre { position: relative; }
.menu-filtre summary { list-style: none; cursor: pointer; }
.menu-filtre summary::-webkit-details-marker { display: none; }
.menu-filtre summary svg { width: 12px; height: 12px; margin-right: -3px; }
.menu-filtre-liste { position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; min-width: 190px; max-height: min(320px, 60vh); overflow: auto;
  margin: 0; padding: 6px; list-style: none; border: 1px solid var(--border); border-radius: 12px; background: var(--flottant); box-shadow: var(--ombre); }
.menu-filtre-liste a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--text); font-size: 13px; text-decoration: none; white-space: nowrap; }
.menu-filtre-liste a:hover, .menu-filtre-liste a:focus-visible { background: var(--hover); }
.menu-filtre-liste a.on { color: var(--accent); font-weight: 600; }
.msg-outils { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.msg-outils .lien-fin { font-size: 12px; }
/* A message's other actions, under « Plus ». */
.plus-msg { position: relative; display: inline-block; }
.plus-msg-menu { position: absolute; top: 100%; left: 0; z-index: 45; display: flex; flex-direction: column; align-items: stretch; min-width: 220px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--flottant); box-shadow: var(--ombre); }
.plus-msg-menu[hidden] { display: none; }
.plus-msg-menu .lien-fin { padding: 8px 10px; border-radius: 8px; text-align: left; color: var(--text); font-size: 13px; }
.plus-msg-menu .lien-fin:hover, .plus-msg-menu .lien-fin:focus-visible { background: var(--hover); }
.rediriger-confirmation, .rediriger-saisie { display: flex; flex-direction: column; gap: 10px; }
.rediriger-confirmation[hidden], .rediriger-saisie[hidden] { display: none; }
.rediriger-liste { margin: 0; padding-left: 20px; font-size: 14px; overflow-wrap: anywhere; }
.msg-propre { display: contents; }
/* A thread of one message: the bar at the top already acts on it. */
.msgs > .msg:only-child .msg-propre { display: none; }
.petit-dialogue { width: min(420px, calc(100vw - 32px)); padding: 20px; border: 0; border-radius: 14px; background: var(--flottant); color: var(--text); box-shadow: var(--ombre); }
.petit-dialogue::backdrop { background: var(--voile-fort); }
.petit-dialogue form { display: flex; flex-direction: column; gap: 10px; }
.petit-dialogue .dialogue-texte { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.petit-dialogue .erreur { margin: 0; }
.petit-dialogue .confirme { margin: 0; }
.case-dialogue { display: flex; align-items: center; gap: 8px; color: var(--text2); font-size: 13px; }
.case-dialogue input { margin: 0; accent-color: var(--accent); }
.partage-externe { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--rayon); background: color-mix(in srgb, var(--orange) 12%, transparent); }
.partage-externe p { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
/* A public folder: what it opens, and its addresses, long, cut anywhere. */
.partage-public { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--rayon); background: var(--chip); }
.partage-public p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.liens-publics { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.liens-publics li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.liens-publics a { overflow-wrap: anywhere; }
.dialogue-large { width: min(520px, calc(100vw - 32px)); overflow-y: auto; scrollbar-gutter: stable; }
/* Réponse automatique: the message for the outside, shown when one is sent to it. */
.absence-exterieur { display: flex; flex-direction: column; gap: 6px; }
.absence-exterieur[hidden] { display: none; }
#absence-carte:has(input[name=journee]:checked) .absence-heure { display: none; }
.heures-travail { display: flex; flex-direction: column; gap: 6px; }
/* What new events start with: the two lists side by side, the calendar under them, all full width. */
.reglages fieldset.agenda-nouveaux { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
.agenda-nouveaux select { width: 100%; min-width: 0; box-sizing: border-box; }
.agenda-nouveaux .form-ligne > div { gap: 6px; }
.ajout-expediteurs { display: flex; align-items: center; gap: 8px; }
.transfert-adresses { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.ajout-expediteurs input[type="text"] { flex: 1; min-width: 0; margin: 0; }
.carte .ajout-expediteurs .btn { margin-top: 0; }
.delegue .regle-texte { flex-basis: 200px; }
.delegue .chip svg { width: 12px; height: 12px; }
.ajout-delegue { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.ajout-delegue .btn { align-self: flex-start; }
.ajout-delegue fieldset { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; padding: 0; border: 0; }
.ajout-delegue legend { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text2); }
.jour-travail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.jour-travail .ligne-case { min-width: 120px; }
.jour-heures { display: inline-flex; align-items: center; gap: 6px; }
/* The composer's address book: a search, its results, and for each address À, Cc, Cci. */
.r-carnet-ouvrir { display: inline-flex; align-items: center; }
.r-carnet-ouvrir svg { width: 15px; height: 15px; }
.r-carnet { width: min(560px, calc(100vw - 32px)); height: min(620px, calc(100vh - 48px)); flex-direction: column; gap: 12px; }
.r-carnet[open] { display: flex; }
.r-carnet-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.r-carnet-tete .dialogue-titre { margin: 0; }
.r-carnet-recherche { display: flex; gap: 8px; }
.r-carnet-recherche input { flex: 1; min-width: 0; }
.r-carnet-recherche select { flex: 0 1 40%; min-width: 0; }
.r-carnet-resultats { flex: 1; min-height: 0; margin: 0 -8px; overflow-y: auto; }
.r-carnet-ligne { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.r-carnet-ligne:hover { background: var(--hover); }
.r-carnet-ligne .it-texte { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.r-carnet-ligne .it-texte > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-carnet-boutons { display: flex; flex: none; gap: 2px; }
.r-carnet-boutons .btn { height: 30px; padding: 0 8px; }
.r-carnet-boutons .btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.r-carnet-suite { display: block; margin: 6px auto; }
.r-carnet-vide { padding: 8px; }
.r-carnet-etat { min-height: 1.4em; margin: 0; }
@media (max-width: 520px) {
  .r-carnet-recherche { flex-direction: column; }
  .r-carnet-recherche input, .r-carnet-recherche select { flex: none; }
}
/* The forgotten attachment: three choices on one line; on a phone, one above the other, the
   main one on top. */
#r-oubli { width: min(480px, calc(100vw - 32px)); }
#r-oubli .dialogue-titre { margin: 0 0 8px; }
#r-oubli .rapide-pied { margin-top: 16px; }
#r-oubli .btn { white-space: nowrap; }
@media (max-width: 520px) {
  #r-oubli .rapide-pied { flex-direction: column-reverse; align-items: stretch; }
  #r-oubli .btn { height: 40px; justify-content: center; }
}
.dialogue-large .form-ligne > div { min-width: 0; }
.dialogue-large .form-ligne input, .dialogue-large .form-ligne select { width: 100%; min-width: 0; box-sizing: border-box; }
#partage-contenu form { display: flex; flex-direction: column; gap: 10px; }
.dialogue-titre { margin: 0 0 4px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.petit-dialogue select { height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--rayon); background: var(--surface); color: var(--text); font: inherit; }
.acces { display: flex; flex-direction: column; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
.acces li { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.acces-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recu { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.recu:first-of-type { border-top: 0; }
.recu-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.r-de { flex: 1; min-width: 0; height: 28px; border: 0; background: transparent; color: var(--text); font: inherit; }
.petit-dialogue label { font-size: 13px; font-weight: 600; color: var(--text2); }
.petit-dialogue input:not([type="hidden"], [type="checkbox"], [type="radio"]) { height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--rayon); background: var(--surface); color: var(--text); font: inherit; }
#partage-mot { width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--rayon); background: var(--surface); color: var(--text); font: inherit; resize: vertical; }

/* Settings */
.page-reglages { min-height: 100vh; }
.reglages { max-width: 1040px; margin: 0 auto; padding: 16px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.reglages-corps { display: flex; flex-direction: column; gap: 16px; }
.reglages-nav { display: flex; gap: 4px; overflow-x: auto; }
.reglages-nav a { display: flex; flex: none; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; color: var(--text2); font-size: 14px; text-decoration: none; white-space: nowrap; }
.reglages-nav a:hover { background: var(--accent-soft); color: var(--text); }
.reglages-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.reglages-nav .ico { flex: none; width: 16px; height: 16px; }
.reglages-articles { display: flex; flex: 1; flex-direction: column; gap: 16px; min-width: 0; }
.reglages-retour { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; color: var(--text2); font-size: 14px; text-decoration: none; }
.reglages-retour .ico { width: 16px; height: 16px; }
@media (min-width: 760px) {
  .reglages-corps { flex-direction: row; align-items: flex-start; gap: 24px; }
  .reglages-nav { position: sticky; top: 16px; flex: 0 0 230px; flex-direction: column; overflow: visible; }
}
.reglages-tete { display: flex; align-items: center; gap: 8px; }
.reglages-tete h1 { margin: 0; font-size: 22px; letter-spacing: -0.015em; }
.reglages .carte { gap: 10px; padding: 20px; scroll-margin-top: 56px; }
.reglages-articles > .confirme, .reglages-articles > .erreur { position: sticky; top: 8px; z-index: 5; }
.reglages .carte h2 { margin: 0 0 4px; font-size: 15px; }
.aide h3 { margin: 16px 0 0; font-size: 13px; font-weight: 600; color: var(--text2); }
.aide p { margin: 0; line-height: 1.6; }
.aide code { font: 12.5px ui-monospace, Menlo, Consolas, monospace; color: var(--text); overflow-wrap: anywhere; }
.aide-touches { display: grid; grid-template-columns: 176px 1fr; gap: 8px 16px; margin: 0; align-items: baseline; font-size: 13.5px; }
.aide-touches dt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.aide-touches dd { margin: 0; }
@media (max-width: 720px) { .aide-touches { grid-template-columns: 112px 1fr; } }
.aide-criteres { width: 100%; border-collapse: collapse; font-size: 13.5px; }
@media (min-width: 381px) { .aide-criteres code { overflow-wrap: normal; } }
.aide-criteres th { color: var(--text2); font-size: 12px; font-weight: 600; text-align: left; }
.aide-criteres th, .aide-criteres td { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--border); vertical-align: baseline; }
.reglages fieldset { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; border: 0; }
.reglages legend { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text2); }
.reglages fieldset label, .ligne-case { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 400; color: var(--text); }
.reglages fieldset input { accent-color: var(--accent); }
.reglages .choix-dossiers { flex-direction: column; flex-wrap: nowrap; gap: 6px; max-height: 220px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.reglages .choix-dossiers input { height: auto; }
.choix-dossiers .prof-1 { padding-left: 18px; } .choix-dossiers .prof-2 { padding-left: 36px; } .choix-dossiers .prof-3, .choix-dossiers .prof-4, .choix-dossiers .prof-5 { padding-left: 54px; }
.reglages textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--rayon); background: var(--surface); color: var(--text); font: inherit; resize: vertical; }
.reglages .btn { align-self: flex-start; justify-content: center; }
.dates { display: flex; flex-wrap: wrap; gap: 12px; }
.dates label { display: flex; flex-direction: column; gap: 4px; }
.regle { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; }
.regle.eteinte .regle-texte { opacity: .55; }
.regle-texte { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.regle-actions { display: inline-flex; align-items: center; gap: 2px; }
.regle-actions .btn { height: 32px; margin: 0; }
.regle-actions .ibtn:disabled { opacity: .35; cursor: default; }
.regle-actions form { display: contents; }
.regle-onglets { display: flex; gap: 6px; }
.regle-alerte { color: var(--err, #c0392b); font-size: 13px; font-weight: 600; }
.regle-extrait { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sig-outils { display: flex; gap: 2px; }
.sig-outils[hidden], .sig-texte[hidden] { display: none; }
.sig-texte { min-height: 140px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--rayon); background: var(--surface); color: var(--text); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.sig-texte:focus-visible { outline-offset: -1px; }
.sig-texte p { margin: 0 0 8px; }
.reglages select { height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--rayon); background: var(--surface); color: var(--text); font: inherit; }
/* Importer/Exporter */
.reglages select#export-dossier, .reglages select#import-dossier { width: 100%; max-width: 460px; min-width: 0; }
.reglages fieldset.archive-colonne, .reglages fieldset.carnet-saisie { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
.archive-avance > summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.archive-avance-corps { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.archive-avance-corps .form-ligne { max-width: 460px; }
.archive-avance-corps .form-ligne input { width: 100%; min-width: 0; box-sizing: border-box; }
.archive-avance-corps input[type="search"] { max-width: 460px; }
.archive-reset { margin: 0; }
/* Outside a fieldset, a card's label is a field's title: these two are choices. */
.archive-avance-corps > .ligne-case, .archive-reset .ligne-case { font-weight: 400; color: var(--text); }
.archive-reset .ligne-case { align-items: flex-start; }
.archive-reset input { margin-top: 3px; }
.archive-etat:empty { display: none; }
.archive-avertissements { margin: 0; padding-left: 18px; max-height: 240px; overflow-y: auto; font-size: 13px; overflow-wrap: anywhere; }
.reglages input[type="file"] { height: auto; padding: 8px 0; border: 0; background: none; }
.comptes-ajout, .compte-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.compte-etat:empty, .compte-test[hidden] { display: none; }
.compte-test { margin: 0; }
[data-compte-externe] .form-ligne { max-width: 460px; }
[data-compte-externe] .form-ligne > div > * { width: 100%; min-width: 0; box-sizing: border-box; }
/* Outside a fieldset, a card's label is a field's title: these are choices. */
[data-compte-externe] .ligne-case, .carte .ligne-case:has(input[name="corbeille"]) { font-weight: 400; color: var(--text); align-items: flex-start; }
[data-compte-externe] .ligne-case input, .carte .ligne-case input[name="corbeille"] { flex: none; height: auto; margin-top: 3px; }
.conds { display: flex; flex-direction: column; gap: 6px; }
.cond { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cond select, .cond input { flex: 1 1 130px; min-width: 0; }
.cond .ibtn { flex: 0 0 32px; }
.cond .cond-sujet, .cond .cond-entete, .cond .cond-partie, .cond .cond-casse { display: none; }
.cond[data-champ="carnet"] .cond-sujet, .cond[data-champ="entete"] .cond-entete { display: block; }
.cond[data-champ="de"] .cond-partie, .cond[data-champ="a"] .cond-partie, .cond[data-champ="cc"] .cond-partie,
.cond[data-champ="dest"] .cond-partie, .cond[data-champ="cci"] .cond-partie { display: block; }
.cond:is([data-champ="de"], [data-champ="a"], [data-champ="cc"], [data-champ="dest"], [data-champ="cci"], [data-champ="objet"], [data-champ="entete"], [data-champ="corps"]):not([data-sans-valeur]) .cond-casse { display: block; }
.cond[data-sans-valeur] .cond-valeur { display: none; }
.ibtn.arme { width: auto; padding: 0 8px; color: var(--err, #c0392b); font-size: 13px; font-weight: 600; }
.confirme { margin: 0; padding: 10px 12px; border-radius: var(--rayon); background: color-mix(in srgb, var(--sarcelle) 14%, transparent); font-size: 13px; }
@media print { .barre, .lateral, .liste, .actions, .rapide { display: none !important; } }

/* Multiple selection */
.lignes li { position: relative; }
.lignes a.ligne[data-conv] { -webkit-user-select: none; user-select: none; } /* Maj-clic selects rows, not text */
.coche { position: absolute; z-index: 2; left: 25px; top: 23px; width: 18px; height: 18px; margin: 0; opacity: 0; accent-color: var(--accent); cursor: pointer; }
.ligne-lu { position: absolute; z-index: 2; right: 10px; bottom: 8px; width: 28px; height: 28px; background: var(--surface); opacity: 0; }
li:hover > .ligne-lu, .ligne-lu:focus-visible { opacity: 1; }
:root[data-densite="compacte"] .ligne-lu { bottom: 3px; }
.ligne-archiver { right: 42px; }
@media (hover: none) { .ligne-lu { display: none; } }
.ligne-dossier { flex: none; max-width: 40%; padding: 0 6px; overflow: hidden; border-radius: 999px; background: var(--chip); color: var(--text2); font-size: 11px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
li:hover > .coche, .coche:checked, .coche:focus-visible, .lignes.choix .coche { opacity: 1; }
li:hover > .coche + .ligne .av, li:has(.coche:checked) .av, .lignes.choix .av { opacity: 0; }
li:has(.coche:checked) .ligne { background: var(--accent-soft); }
/* Files: the box takes the place of the kind's badge. */
li:hover > .coche + .ligne .ext, li:has(.coche:checked) .ext, .lignes.choix .ext { opacity: 0; }
.liste { position: relative; }
.lot { position: absolute; inset: 0 0 auto 0; z-index: 3; display: flex; align-items: center; gap: 2px; min-height: 53px; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--accent-soft); container-type: inline-size; }
.lot-nb { padding: 0 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.lot-court { display: none; }
@container (max-width: 500px) { .lot-long { display: none; } .lot-court { display: inline; } } /* a narrow list: « 5 sél. » on one line */
.plus { padding: 16px; text-align: center; font-size: 13px; color: var(--text3); }
.nav.survol { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.titre-dossiers.survol { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; background: var(--accent-soft); }
/* What follows the pointer in a drag: it must leave the target readable. Off-screen until then. */
.fantome { position: fixed; top: -100px; left: 0; max-width: 220px; padding: 2px 10px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--accent) 40%, transparent); color: #FFFFFF; font: 600 12px/1.6 var(--police); text-overflow: ellipsis; white-space: nowrap; }

/* Mobile: a separate layout, not a shrunken desktop */
.tiroir-btn, .titre-mobile, .fab, .onglets, .tiroir-voile, .chip-mobile, .retour, .lateral-pied { display: none; }
@media (hover: none) { .coche { display: none; } }
@media (max-width: 720px) {
  .ibtn { width: 44px; height: 44px; }
  .barre { gap: 10px 4px; padding: 14px 16px 10px; border-bottom: 0; }
  .marque, .modules, .recherche .touches, .outils .ibtn, .outils form { display: none; }
  .tiroir-btn { display: inline-flex; margin-left: -10px; }
  .titre-mobile { display: block; flex: 1; min-width: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .outils { margin-left: 0; }
  .av-moi { width: 34px; height: 34px; font-size: 12px; margin-left: 0; }
  .recherche { order: 3; flex: 1 1 100%; max-width: none; }
  .recherche input { height: 42px; border: 0; border-radius: 12px; background: var(--chip); padding-right: 12px; }
  .corps { display: block; }

  /* Folders: a drawer */
  .lateral { position: fixed; inset: 0 auto 0 0; z-index: 9; width: min(300px, 84vw); padding: 16px 12px; background: var(--surface); border-right: 1px solid var(--border);
    overflow-y: auto; transform: translateX(-100%); }
  .lateral.ouverte { transform: none; box-shadow: 0 24px 64px rgb(15 15 25 / 0.3); }
  .tiroir-voile.ouverte { display: block; position: fixed; inset: 0; z-index: 8; background: rgb(22 22 27 / 0.42); }
  .lateral .nouveau { display: none; }
  .nav { height: 44px; }
  .lateral-pied { display: flex; gap: 4px; padding-top: 8px; }
  .lateral-pied form { display: contents; }

  /* Liste */
  .liste { max-width: none; border-right: 0; }
  .liste-tete { padding: 0 16px 10px; }
  .liste-tete h1 { display: none; }
  .chip-mobile { display: inline-flex; }
  .chip-bureau { display: none; }
  .filtres { gap: 8px; }
  .filtres .chip { height: 30px; padding: 0 12px; font-size: 13px; }
  .filtres .chip.on { font-weight: 600; }
  .lignes { overflow: visible; padding-bottom: 96px; }
  .lignes li { position: relative; overflow: hidden; }
  .lignes li.glisse { background: #0F766E; }
  .lignes li.glisse::after { content: "Archiver"; position: absolute; top: 50%; right: 22px; transform: translateY(-50%); color: #FFFFFF; font-size: 13px; font-weight: 600; }
  .ligne { position: relative; z-index: 1; background: var(--surface); touch-action: pan-y; }
  .ligne .av { width: 40px; height: 40px; }
  .nonlu .date { color: var(--accent); font-weight: 600; }

  /* An open conversation takes the whole screen */
  .lecture { display: none; }
  .corps:has(#lecture .fil, #lecture .fiche, #lecture .form-contact, #lecture .editeur-texte) .lecture { display: flex; }
  .corps:has(#lecture .fil, #lecture .fiche, #lecture .form-contact, #lecture .editeur-texte) .liste, .app:has(#lecture .fil, #lecture .fiche, #lecture .form-contact, #lecture .editeur-texte) .barre, .app:has(#lecture .fil, #lecture .fiche, #lecture .form-contact, #lecture .editeur-texte) .fab, .app:has(#lecture .fil, #lecture .fiche, #lecture .form-contact, #lecture .editeur-texte) .onglets { display: none; }
  .retour { display: inline-flex; order: 0; margin-left: -10px; }
  .lecture { min-height: 100vh; }
  .actions { position: sticky; top: 0; z-index: 2; gap: 0; padding: 4px 16px 8px; background: var(--surface); }
  .actions .espace { display: none; }
  .actions .ibtn { order: 1; width: 44px; }
  .actions .btn { order: 2; flex: 1 1 auto; justify-content: center; min-width: max-content; height: 36px; margin: 4px 2px 0; padding: 0 8px; white-space: nowrap; }
  .actions .btn kbd, .actions .btn .ico, .tout-deplier kbd, .rapide-pied .discret { display: none; }
  .fil { padding: 20px 16px; }
  .msg-extrait, .msg-email { display: none; }
  .msg-tete time { font-size: 12px; white-space: nowrap; }

  .fab { position: fixed; right: 18px; bottom: 92px; z-index: 5; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 18px;
    background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 35%, transparent); }
  .fab .ico { width: 22px; height: 22px; }
  .annonce { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .onglets { position: fixed; inset: auto 0 0 0; z-index: 5; display: flex; padding-bottom: env(safe-area-inset-bottom, 0); border-top: 1px solid var(--border); background: var(--surface); }
  .onglet { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; color: var(--text3); font: 500 11px var(--police); }
  .onglet.on { color: var(--accent); }
  .onglet[aria-disabled="true"] { opacity: 0.5; }
}

/* Fichiers */
.creer-documents { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.creer-documents .btn { flex: 1 1 calc(33% - 6px); justify-content: center; padding-inline: 4px; font-size: 12px; }
.lignes-fichiers .ligne { align-items: center; }
.lignes-fichiers .ext { flex: none; width: 36px; height: 36px; font-size: 10px; }
#liste-fichiers { position: relative; }
.depot-voile { position: absolute; inset: 8px; z-index: 3; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; border: 2px dashed var(--accent); border-radius: 14px; background: var(--accent-soft); color: var(--text); font-size: 14px; font-weight: 600; text-align: center; pointer-events: none; }
#liste-fichiers.depot-actif .depot-voile { display: flex; }
.nav.survol-depot { background: var(--accent-soft); color: var(--text); }
.fiche-fichier { display: flex; flex-direction: column; gap: 16px; padding: 24px 40px; }
.fiche-fichier-tete { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fiche-fichier-tete h2 { margin: 0; font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.fiche-fichier-tete p { margin: 2px 0 0; }
.fiche-fichier .reponse-etat { align-self: flex-start; margin: 0; }
.apercu-fichier { display: block; max-width: 100%; max-height: 60vh; border-radius: var(--rayon); object-fit: contain; align-self: flex-start; }
.apercu-pdf { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: var(--rayon); background: #FFFFFF; }
/* Text files on their page: plain text as stored, Markdown set like a document. */
.apercu-texte { margin: 0; padding: 16px 20px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--rayon); background: var(--chip);
  color: var(--text); font: 13.5px/1.55 var(--mono); tab-size: 4; white-space: pre-wrap; overflow-wrap: anywhere; }
.apercu-md { max-width: 46em; color: var(--text); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.apercu-md > :first-child { margin-top: 0; }
.apercu-md h1, .apercu-md h2, .apercu-md h3, .apercu-md h4, .apercu-md h5, .apercu-md h6 { margin: 1.4em 0 0.5em; line-height: 1.3; }
.apercu-md h1 { font-size: 1.6em; } .apercu-md h2 { font-size: 1.3em; } .apercu-md h3 { font-size: 1.1em; }
.apercu-md h1, .apercu-md h2 { padding-bottom: 0.25em; border-bottom: 1px solid var(--border); }
.apercu-md p, .apercu-md ul, .apercu-md ol, .apercu-md blockquote, .apercu-md pre, .apercu-md table { margin: 0 0 0.9em; }
.apercu-md ul, .apercu-md ol { padding-left: 1.6em; }
.apercu-md li > ul, .apercu-md li > ol { margin-bottom: 0; }
.apercu-md li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.4em; }
.apercu-md input[type="checkbox"] { margin: 0 0.4em 0 0; vertical-align: -1px; }
.apercu-md a { color: var(--accent); }
/* A misleading link (liens.go) shows the site it really leads to, as in a mail. */
.apercu-md a[data-ailleurs]::after { content: "→ " attr(data-ailleurs); display: inline-block; margin: 0 0 0 .35em; padding: 0 .4em;
  border-radius: 4px; background: #FFF1C2; color: #5C4300; font: 600 12px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  white-space: nowrap; }
.apercu-md code { padding: 0.1em 0.35em; border-radius: 5px; background: var(--chip); font: 0.9em var(--mono); }
.apercu-md pre { padding: 12px 16px; overflow-x: auto; border-radius: var(--rayon); background: var(--chip); }
.apercu-md pre code { padding: 0; background: none; font-size: 13px; line-height: 1.5; }
.apercu-md blockquote { padding: 0 0 0 1em; border-left: 3px solid var(--border); color: var(--text2); }
.apercu-md hr { height: 0; margin: 1.5em 0; border: 0; border-top: 1px solid var(--border); }
.apercu-md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.apercu-md th, .apercu-md td { padding: 6px 12px; border: 1px solid var(--border); }
.apercu-md th { background: var(--chip); font-weight: 600; }
.apercu-md td[align="center"], .apercu-md th[align="center"] { text-align: center; }
.apercu-md td[align="right"], .apercu-md th[align="right"] { text-align: right; }

/* Text editor: the file as it is stored, fixed width, lines as typed. */
.editeur-texte { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.editeur-texte .ext { flex: none; width: 28px; height: 28px; margin-left: 6px; font-size: 9px; }
.editeur-texte-nom { min-width: 0; margin: 0 0 0 6px; overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.editeur-texte-etat { margin-right: 6px; font-size: 13px; }
.editeur-texte-probleme { align-self: flex-start; margin: 12px 40px 0; border-radius: 10px; background: var(--chip); color: var(--text); font-weight: 500; }
.editeur-texte-zone { flex: 1; width: 100%; min-height: 50vh; box-sizing: border-box; margin: 0; padding: 20px 40px; border: 0; outline: none; resize: none;
  background: transparent; color: var(--text); font: 14px/1.55 var(--mono); tab-size: 4; white-space: pre-wrap; overflow-wrap: anywhere; }
.versions h3 { margin: 0 0 6px; font-size: 13px; color: var(--text2); }
.versions ul { margin: 0; padding: 0; list-style: none; }
.versions li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); }
.version-supprimer { display: flex; margin: 0; }
.version-note { color: var(--text); font-size: 13.5px; white-space: pre-line; overflow-wrap: anywhere; }
#version-note textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.version-texte { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 1px; }
.version-texte .secondaire { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .fiche-fichier { padding: 16px; }
  .editeur-texte-zone { padding: 16px; }
  .editeur-texte .fichier-actions > * { order: 0; } /* back, name, version, save: as written */
  .editeur-texte .fichier-actions .editeur-texte-nom { flex: 1; }
  .editeur-texte .fichier-actions .btn { flex: none; }
  .editeur-texte-probleme { margin: 12px 16px 0; }
  .lignes-fichiers { padding-bottom: 76px; } /* room for the round upload button */
  .versions .btn { min-height: 40px; }
  .fichier-actions .lib { display: none; }
  .fichier-actions .btn .ico { display: block; } /* icons carry the label on a phone */
}

/* Document editor */
.page-editor { margin: 0; }
.editor-frame { position: fixed; inset: 0; }
.editor-error { position: fixed; top: 24px; left: 24px; right: 24px; margin: 0; }

/* Security settings */
.carte .case { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.carte .case input { width: 16px; height: 16px; padding: 0; }
.repli-securite summary { cursor: pointer; color: var(--text2); font-size: 13px; }
.repli-securite form { margin-top: 8px; }
.ligne-securite { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.regles-mdp { margin: 0; padding-left: 20px; font-size: 13px; }
.ligne-securite input { width: 100%; max-width: 320px; }
.qr { width: 216px; height: 216px; align-self: center; border-radius: var(--rayon); background: #fff; }
.qr path { fill: #000; }
.secret code { user-select: all; overflow-wrap: anywhere; }
.codes { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 16px; }
.codes code { user-select: all; }

/* Calendar and task reminders: above the page, in a corner, below the dialogs. */
.rappels { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: min(380px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
.rappels[hidden] { display: none; }
/* While a message is being written, its panel keeps the front: the reminders step to the left, where
   a wide screen leaves room, above the veil and under the panel. */
body:has(.redaction:not(.reduite)) .rappels { left: 16px; right: auto; z-index: 11; }
/* A form in the reading pane keeps its buttons, bottom right: the reminders step to the left too. */
@media (min-width: 721px) { body:has(#lecture .form-contact) .rappels { left: 16px; right: auto; } }
/* And a form ends with room for them (--rappels-h, set by front.js): on a phone, where they span the
   bottom, its buttons scroll out from under them. */
.form-contact { padding-bottom: calc(24px + var(--rappels-h, 0px)); }
.rappel { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: start; }
.rappel + .rappel { border-top: 1px solid var(--border); padding-top: 10px; }
.rappel-icone { color: var(--accent); padding-top: 2px; }
.rappel-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rappel-texte a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.rappel-texte a:hover { text-decoration: underline; }
.rappel-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rappel-actions select { font: inherit; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; height: 30px; padding: 0 6px; }
.rappel-actions .btn, .rappels-tous .btn { height: 30px; }
.rappels-tous { display: flex; justify-content: flex-end; }
/* On a phone, the top holds the actions of what is read, and the bottom of the list its tabs and the
   button to write: reminders sit just above them, and at the very bottom while reading, where
   those two are gone. */
@media (max-width: 720px) {
  .rappels { left: 8px; right: 8px; bottom: calc(160px + env(safe-area-inset-bottom, 0px)); width: auto; }
  body:has(#lecture .fil, #lecture .fiche, #lecture .form-contact, #lecture .editeur-texte) .rappels { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}
/* The shares given (Réglages › Partages): the actions on the right, Retirer folding its question
   open below them. */
.donne { flex-wrap: wrap; }
.donne-actions { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 6px; }
.donne-actions form { margin: 0; }
.repli-retrait summary { list-style: none; cursor: pointer; }
.repli-retrait summary::-webkit-details-marker { display: none; }
.repli-retrait[open] { flex-basis: 100%; }
.retrait { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; max-width: 420px; }
.retrait p { margin: 0; }
.retrait textarea { width: 100%; }
/* What the composer says before writing (a file's link): a discreet line above the fields. */
.r-avis { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text2); font-size: 13px; }
.r-avis svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
/* The file's bar keeps one row in a narrow reading pane: Télécharger and Nouvelle version keep
   their arrows and titles, Modifier and Envoyer their words. */
.fichier-actions { container-type: inline-size; }
@container (max-width: 860px) { .fichier-actions .lib-repli { display: none; } }
/* A distribution list's record (listes.go): its members, and the owner's form to add some. */
.fiche-liste h3 { margin: 18px 0 6px; font-size: 13px; color: var(--text2); }
.fiche-liste .membres li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fiche-liste .membres form { margin: 0; }
.liste-ajout { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 16px; max-width: 420px; }
.liste-ajout textarea { width: 100%; }
/* A page of one form (the calendar subscription): the card in the middle, its fields one under the other. */
.page-simple { flex: 1; min-width: 0; overflow: auto; padding: 24px 16px; }
.abonnement { display: flex; flex-direction: column; gap: 8px; max-width: 560px; margin: 0 auto; }
.abonnement h1 { margin: 0 0 4px; font-size: 18px; }
.abonnement p { margin: 0 0 6px; }
.abonnement input[type="url"], .abonnement input[name="nom"] { width: 100%; box-sizing: border-box; }
/* The card over an address (front.js, carte_personne.go). */
.carte-personne { position: absolute; z-index: 60; width: 300px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-size: 13.5px; }
.carte-personne-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.carte-personne-tete > div { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.carte-personne-champs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin: 0 0 8px; }
.carte-personne-champs dt { color: var(--text2); }
.carte-personne-champs dd { margin: 0; overflow-wrap: anywhere; }
.carte-personne-champs .notes { white-space: pre-line; }