:root {
  --ui: "Manrope", -apple-system, "Segoe UI", system-ui, sans-serif;
  --titre: "Instrument Serif", "Times New Roman", serif;
  --doc: "Lora", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.22,1,.36,1);
  --r-fen: 18px; --r-ctrl: 14px;
  --encre: #112f40;
  --bleu: #244e61; --bleu-vif: #2f6177; --sur-accent: #ffffff;
  --rouge: #a82e35; --rouge-pale: rgba(168,46,53,.11);
  --ambre: #80623d; --ambre-pale: rgba(171,139,88,.17);
  --vert: #2f7258; --vert-pale: rgba(47,114,88,.12);
  --bleu-pale: rgba(36,78,97,.1);
  --texte: #112f40; --doux: #586365; --leger: #8b9291;
  --surface: #fcfaf5; --surface-2: #f8f4ec; --surface-3: #efe9dc; --tete: #f8f4ec; --side: rgba(245,240,230,.92);
  --survol: rgba(17,47,64,.05); --selection: rgba(36,78,97,.11);
  --trait: rgba(17,47,64,.085); --trait-fort: #d9d1c2;
  --verre-fort: rgba(252,250,245,.93); --barre-verre: rgba(248,244,236,.74); --barre-texte: #112f40; --barre-survol: rgba(17,47,64,.08);
  --dock-verre: rgba(252,250,245,.62); --dock-lisere: rgba(255,255,255,.8); --cc-tuile: rgba(17,47,64,.05);
  --table-travail: #efe9dc; --focus: #244e61;
  --ombre-fen: 0 30px 80px -26px rgba(17,47,64,.42), 0 10px 26px -14px rgba(17,47,64,.2), 0 0 0 .5px rgba(17,47,64,.18);
  --ombre-fen-in: 0 18px 46px -24px rgba(17,47,64,.28), 0 0 0 .5px rgba(17,47,64,.14);
  --ciel-1: #fbf8f1; --ciel-2: #f5efe4; --ciel-3: #e9e0cf;
  --nuage-1: rgba(255,255,255,.85); --nuage-2: rgba(168,46,53,.06); --halo: rgba(255,253,247,.95);
  --arc: rgba(171,139,88,.5); --arc-op: 0; --sol: rgba(171,139,88,.08);
  --gravure: #112f40; --gravure-op: .55; --grain-op: .035;
  --verrou-texte: #112f40; --verrou-voile: rgba(248,244,236,.28); --v-btn: rgba(17,47,64,.07); --v-btn-lis: rgba(17,47,64,.16);
  --fond-base: #f8f4ec;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bleu: #e1c494; --bleu-vif: #ecd4aa; --sur-accent: #0a2b3c;
  --rouge: #e27a70; --rouge-pale: rgba(226,122,112,.16);
  --ambre: #e1c494; --ambre-pale: rgba(225,196,148,.16);
  --vert: #7fcfae; --vert-pale: rgba(127,207,174,.14);
  --bleu-pale: rgba(225,196,148,.14);
  --texte: #f3eee4; --doux: #a9bcbc; --leger: #6f8a8d;
  --surface: #0f2e3b; --surface-2: #0c2733; --surface-3: #16394a; --tete: #113240; --side: rgba(12,39,51,.92);
  --survol: rgba(248,244,236,.06); --selection: rgba(225,196,148,.16);
  --trait: rgba(248,244,236,.08); --trait-fort: rgba(248,244,236,.15);
  --verre-fort: rgba(14,44,57,.93); --barre-verre: rgba(8,32,44,.55); --barre-texte: #f3eee4; --barre-survol: rgba(248,244,236,.12);
  --dock-verre: rgba(10,38,50,.52); --dock-lisere: rgba(248,244,236,.14); --cc-tuile: rgba(248,244,236,.06);
  --table-travail: #0a2330; --focus: #e1c494;
  --ombre-fen: 0 34px 90px -22px rgba(0,8,14,.7), 0 0 0 .5px rgba(248,244,236,.1);
  --ombre-fen-in: 0 20px 50px -24px rgba(0,8,14,.55), 0 0 0 .5px rgba(248,244,236,.07);
  --ciel-1: #0a2b3c; --ciel-2: #0e3a4a; --ciel-3: #164e5b;
  --nuage-1: rgba(53,169,177,.2); --nuage-2: rgba(225,196,148,.09); --halo: rgba(225,196,148,.26);
  --arc: rgba(225,196,148,.62); --arc-op: 1; --sol: rgba(4,20,28,.42);
  --gravure: #e1c494; --gravure-op: .2; --grain-op: .05;
  --verrou-texte: #f8f4ec; --verrou-voile: rgba(6,24,34,.28); --v-btn: rgba(248,244,236,.14); --v-btn-lis: rgba(248,244,236,.32);
  --fond-base: #0a2b3c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bleu: #e1c494; --bleu-vif: #ecd4aa; --sur-accent: #0a2b3c;
  --rouge: #e27a70; --rouge-pale: rgba(226,122,112,.16);
  --ambre: #e1c494; --ambre-pale: rgba(225,196,148,.16);
  --vert: #7fcfae; --vert-pale: rgba(127,207,174,.14);
  --bleu-pale: rgba(225,196,148,.14);
  --texte: #f3eee4; --doux: #a9bcbc; --leger: #6f8a8d;
  --surface: #0f2e3b; --surface-2: #0c2733; --surface-3: #16394a; --tete: #113240; --side: rgba(12,39,51,.92);
  --survol: rgba(248,244,236,.06); --selection: rgba(225,196,148,.16);
  --trait: rgba(248,244,236,.08); --trait-fort: rgba(248,244,236,.15);
  --verre-fort: rgba(14,44,57,.93); --barre-verre: rgba(8,32,44,.55); --barre-texte: #f3eee4; --barre-survol: rgba(248,244,236,.12);
  --dock-verre: rgba(10,38,50,.52); --dock-lisere: rgba(248,244,236,.14); --cc-tuile: rgba(248,244,236,.06);
  --table-travail: #0a2330; --focus: #e1c494;
  --ombre-fen: 0 34px 90px -22px rgba(0,8,14,.7), 0 0 0 .5px rgba(248,244,236,.1);
  --ombre-fen-in: 0 20px 50px -24px rgba(0,8,14,.55), 0 0 0 .5px rgba(248,244,236,.07);
  --ciel-1: #0a2b3c; --ciel-2: #0e3a4a; --ciel-3: #164e5b;
  --nuage-1: rgba(53,169,177,.2); --nuage-2: rgba(225,196,148,.09); --halo: rgba(225,196,148,.26);
  --arc: rgba(225,196,148,.62); --arc-op: 1; --sol: rgba(4,20,28,.42);
  --gravure: #e1c494; --gravure-op: .2; --grain-op: .05;
  --verrou-texte: #f8f4ec; --verrou-voile: rgba(6,24,34,.28); --v-btn: rgba(248,244,236,.14); --v-btn-lis: rgba(248,244,236,.32);
  --fond-base: #0a2b3c;
}
/* Apparence choisie dans le poste : elle prime sur celle du navigateur. */
.os[data-apparence="clair"] {
  color-scheme: light;
  --encre: #112f40;
  --bleu: #244e61; --bleu-vif: #2f6177; --sur-accent: #ffffff;
  --rouge: #a82e35; --rouge-pale: rgba(168,46,53,.11);
  --ambre: #80623d; --ambre-pale: rgba(171,139,88,.17);
  --vert: #2f7258; --vert-pale: rgba(47,114,88,.12);
  --bleu-pale: rgba(36,78,97,.1);
  --texte: #112f40; --doux: #586365; --leger: #8b9291;
  --surface: #fcfaf5; --surface-2: #f8f4ec; --surface-3: #efe9dc; --tete: #f8f4ec; --side: rgba(245,240,230,.92);
  --survol: rgba(17,47,64,.05); --selection: rgba(36,78,97,.11);
  --trait: rgba(17,47,64,.085); --trait-fort: #d9d1c2;
  --verre-fort: rgba(252,250,245,.93); --barre-verre: rgba(248,244,236,.74); --barre-texte: #112f40; --barre-survol: rgba(17,47,64,.08);
  --dock-verre: rgba(252,250,245,.62); --dock-lisere: rgba(255,255,255,.8); --cc-tuile: rgba(17,47,64,.05);
  --table-travail: #efe9dc; --focus: #244e61;
  --ombre-fen: 0 30px 80px -26px rgba(17,47,64,.42), 0 10px 26px -14px rgba(17,47,64,.2), 0 0 0 .5px rgba(17,47,64,.18);
  --ombre-fen-in: 0 18px 46px -24px rgba(17,47,64,.28), 0 0 0 .5px rgba(17,47,64,.14);
  --ciel-1: #fbf8f1; --ciel-2: #f5efe4; --ciel-3: #e9e0cf;
  --nuage-1: rgba(255,255,255,.85); --nuage-2: rgba(168,46,53,.06); --halo: rgba(255,253,247,.95);
  --arc: rgba(171,139,88,.5); --arc-op: 0; --sol: rgba(171,139,88,.08);
  --gravure: #112f40; --gravure-op: .55; --grain-op: .035;
  --verrou-texte: #112f40; --verrou-voile: rgba(248,244,236,.28); --v-btn: rgba(17,47,64,.07); --v-btn-lis: rgba(17,47,64,.16);
  --fond-base: #f8f4ec;
}
.os[data-apparence="sombre"] {
  color-scheme: dark;
  --bleu: #e1c494; --bleu-vif: #ecd4aa; --sur-accent: #0a2b3c;
  --rouge: #e27a70; --rouge-pale: rgba(226,122,112,.16);
  --ambre: #e1c494; --ambre-pale: rgba(225,196,148,.16);
  --vert: #7fcfae; --vert-pale: rgba(127,207,174,.14);
  --bleu-pale: rgba(225,196,148,.14);
  --texte: #f3eee4; --doux: #a9bcbc; --leger: #6f8a8d;
  --surface: #0f2e3b; --surface-2: #0c2733; --surface-3: #16394a; --tete: #113240; --side: rgba(12,39,51,.92);
  --survol: rgba(248,244,236,.06); --selection: rgba(225,196,148,.16);
  --trait: rgba(248,244,236,.08); --trait-fort: rgba(248,244,236,.15);
  --verre-fort: rgba(14,44,57,.93); --barre-verre: rgba(8,32,44,.55); --barre-texte: #f3eee4; --barre-survol: rgba(248,244,236,.12);
  --dock-verre: rgba(10,38,50,.52); --dock-lisere: rgba(248,244,236,.14); --cc-tuile: rgba(248,244,236,.06);
  --table-travail: #0a2330; --focus: #e1c494;
  --ombre-fen: 0 34px 90px -22px rgba(0,8,14,.7), 0 0 0 .5px rgba(248,244,236,.1);
  --ombre-fen-in: 0 20px 50px -24px rgba(0,8,14,.55), 0 0 0 .5px rgba(248,244,236,.07);
  --ciel-1: #0a2b3c; --ciel-2: #0e3a4a; --ciel-3: #164e5b;
  --nuage-1: rgba(53,169,177,.2); --nuage-2: rgba(225,196,148,.09); --halo: rgba(225,196,148,.26);
  --arc: rgba(225,196,148,.62); --arc-op: 1; --sol: rgba(4,20,28,.42);
  --gravure: #e1c494; --gravure-op: .2; --grain-op: .05;
  --verrou-texte: #f8f4ec; --verrou-voile: rgba(6,24,34,.28); --v-btn: rgba(248,244,236,.14); --v-btn-lis: rgba(248,244,236,.32);
  --fond-base: #0a2b3c;
}
/* Marianne de lumière : un fond de nuit, quelle que soit l'apparence. Le verrouillage, la barre de menus et le Dock
   passent en verre sombre ; les fenêtres gardent l'apparence choisie (papier par défaut), pour rester lisibles. */
.os[data-fond="marianne"] {
  --ciel-1: #061a25; --ciel-2: #0a2b3c; --ciel-3: #0f3a49;
  --nuage-1: rgba(31,106,115,.34); --nuage-2: rgba(201,165,106,.10); --halo: rgba(143,227,214,.10);
  --verrou-texte: #f8f4ec; --verrou-voile: rgba(6,24,34,.18); --v-btn: rgba(248,244,236,.12); --v-btn-lis: rgba(248,244,236,.3);
  --barre-verre: rgba(6,26,37,.58); --barre-texte: #f3eee4; --barre-survol: rgba(248,244,236,.12);
  --dock-verre: rgba(8,32,44,.52); --dock-lisere: rgba(143,227,214,.2);
  --fond-base: #061a25;
}
/* Marianne de lumière, le jour : session ouverte, le bureau passe au papier ; la Marianne devient de l'encre. */
.os[data-fond="marianne"].jour {
  --ciel-1: #fbf8f1; --ciel-2: #f5efe4; --ciel-3: #e9e0cf;
  --nuage-1: rgba(255,255,255,.85); --nuage-2: rgba(171,139,88,.08); --halo: rgba(255,253,247,.95);
  --barre-verre: rgba(248,244,236,.74); --barre-texte: #112f40; --barre-survol: rgba(17,47,64,.08);
  --dock-verre: rgba(252,250,245,.62); --dock-lisere: rgba(255,255,255,.8);
  --fond-base: #f8f4ec;
}
.os[data-fond="marianne"].jour .fond { background: radial-gradient(70% 60% at 82% 40%, #fffdf8, transparent 70%), linear-gradient(180deg, #faf6ee, #f1ebdf); }
.os[data-fond="marianne"].jour .gravure { display: block; background: #112f40; opacity: .16; }
/* La feuille du jour : posée sur le bureau, sous les fenêtres ; l'encre et l'or de la charte. */
.jour-feuille { position: absolute; left: clamp(24px, 4.6vw, 64px); top: calc(30px + clamp(20px, 4vh, 34px)); width: min(760px, 58vw); z-index: 1; color: #112f40; display: grid; gap: clamp(12px, 2.4vh, 22px); }
.jour-feuille[hidden] { display: none; }
.jr-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.jr-tete .sur { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: #80623d; font-weight: 600; }
.jr-tete h1 { margin: 2px 0 0; font: 400 clamp(40px, 5.6vh, 60px)/.95 var(--titre); color: #112f40; }
.jr-tete h1 em { color: #80623d; }
.jr-actions { display: flex; gap: 8px; }
.jr-actions .btn { background: rgba(253,251,246,.8); }
.jr-page { background: #fdfbf6; border-radius: 6px; box-shadow: 0 1px 0 rgba(17,47,64,.06), 0 18px 40px -22px rgba(17,47,64,.35), 0 0 0 1px rgba(17,47,64,.07);
  display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); padding: 20px 0 14px; }
.jr-col { padding: 0 22px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.jr-filet { background: #d9d1c2; }
.jr-col h2 { margin: 0 0 6px; font: 400 23px var(--titre); display: flex; align-items: baseline; justify-content: space-between; color: #112f40; }
.jr-col h2 small { font: 600 12px var(--ui); color: #80623d; }
.jr-l { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 7px 4px; border-top: 1px solid rgba(217,209,194,.7); text-align: left; color: #112f40; border-radius: 4px; }
.jr-l:first-of-type { border-top: 0; }
.jr-l:hover { background: rgba(17,47,64,.04); }
.jr-l b { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-l small { color: #586365; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-l time { font-size: 12px; color: #586365; font-variant-numeric: tabular-nums; }
.jr-pic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #244e61; box-shadow: inset 0 0 0 1px #d9d1c2; }
.jr-pt { width: 7px; height: 7px; border-radius: 50%; background: #244e61; margin: 0 4px; }
.jr-pt.lu { background: transparent; box-shadow: inset 0 0 0 1px #d9d1c2; }
.jr-vide { color: #586365; padding: 6px 4px; }
.jr-vide button { color: #244e61; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.jr-pied { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.jr-alertes { display: grid; gap: 4px; }
.jr-alertes button { display: inline-flex; align-items: center; gap: 8px; color: #80623d; font-weight: 600; text-align: left; }
.jr-liens { display: grid; gap: 4px; justify-items: end; }
.jr-liens button { color: #244e61; font-weight: 600; border-bottom: 1px solid rgba(36,78,97,.25); }
/* Sur un fond de nuit (Sarcelle, ou Marianne sans le jour), le titre passe au papier. */
.os[data-fond="sarcelle"] .jr-tete h1, .os[data-fond="sarcelle"] .jr-pied button { color: #f8f4ec; }
.os[data-fond="sarcelle"] .jr-tete .sur, .os[data-fond="sarcelle"] .jr-tete h1 em { color: #e1c494; }
/* Mode sobre : surfaces opaques, rien ne bouge en fond. */
.os[data-mode="sobre"] { --barre-verre: var(--surface-2); --dock-verre: var(--surface); --verre-fort: var(--surface); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: var(--trait-fort) transparent; }
html, body { height: 100%; }
body { margin: 0; background: var(--fond-base); font: 13.5px/1.45 var(--ui); color: var(--texte); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.i { flex: none; display: block; }

.os { position: fixed; inset: 0; overflow: hidden; color: var(--texte); background: var(--fond-base); }

/* Fond d'écran */
.fond { position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(90% 60% at 50% 112%, var(--halo) 0%, transparent 62%),
    radial-gradient(55% 45% at 88% 6%, var(--nuage-1), transparent 70%),
    radial-gradient(45% 40% at 4% 26%, var(--nuage-2), transparent 70%),
    linear-gradient(180deg, var(--ciel-1) 0%, var(--ciel-2) 55%, var(--ciel-3) 100%); }
.fond::before { content: ""; position: absolute; left: -30%; width: 160%; height: 130%; top: 76%; border-radius: 50%; opacity: var(--arc-op);
  border-top: 1.5px solid var(--arc); box-shadow: 0 -34px 110px -12px var(--halo), inset 0 40px 90px -30px var(--halo);
  background: linear-gradient(180deg, var(--sol), transparent 45%); }
.fond::after { content: ""; position: absolute; inset: 0; opacity: var(--grain-op); pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.aurore { position: absolute; inset: -25%; opacity: .9; pointer-events: none; will-change: transform;
  background: radial-gradient(38% 28% at 28% 62%, var(--nuage-1), transparent 70%), radial-gradient(32% 24% at 72% 38%, var(--nuage-2), transparent 70%), radial-gradient(30% 22% at 55% 80%, var(--halo), transparent 70%);
  animation: derive 46s ease-in-out infinite alternate; }
@keyframes derive { to { transform: translate(7%, -5%) rotate(9deg) scale(1.06); } }
.fond::before { animation: respire 13s ease-in-out infinite alternate; }
@keyframes respire { from { transform: translateY(0) scaleX(1); } to { transform: translateY(-1.4%) scaleX(1.015); } }
.os.reveil .fond { animation: reveil 2s var(--ease) both; }
@keyframes reveil { from { transform: scale(1.1); } to { transform: none; } }
.gravure { position: absolute; left: 0; right: 0; bottom: 0; height: min(calc(100vw * 469 / 1672), 52vh); pointer-events: none;
  background: var(--gravure); opacity: var(--gravure-op);
  --gravure-img: url("data:image/webp;base64,GRAVURE");
  -webkit-mask-image: var(--gravure-img); mask-image: var(--gravure-img); -webkit-mask-size: 100% auto; mask-size: 100% auto;
  -webkit-mask-position: center bottom; mask-position: center bottom; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.os.glisse .aurore, .os.glisse .fond::before { animation-play-state: paused; }
.os[data-mode="sobre"] .aurore, .os[data-mode="sobre"] .fond::before, .os[data-fixe] .aurore, .os[data-fixe] .fond::before { animation: none; }
.fond .fond-marque { position: absolute; right: 6%; bottom: 14%; width: min(34vw, 420px); color: #fff; opacity: 0; transition: opacity .6s; }
.os[data-fond="sarcelle"] .fond { background: radial-gradient(90% 65% at 50% 108%, rgba(225,196,148,.26), transparent 60%), radial-gradient(60% 50% at 82% 8%, rgba(53,169,177,.2), transparent 70%), radial-gradient(120% 90% at 50% 40%, #164e5b, #0a2b3c); }
.os[data-fond="sarcelle"] .fond::before { opacity: 1; border-top-color: rgba(225,196,148,.62); box-shadow: 0 -34px 110px -12px rgba(225,196,148,.26); background: linear-gradient(180deg, rgba(4,20,28,.42), transparent 45%); }
.os[data-fond="sarcelle"] .gravure { background: #e1c494; opacity: .2; }
.os[data-fond="marianne"] .fond { background: radial-gradient(60% 55% at 78% 45%, rgba(53,169,177,.16), transparent 70%), radial-gradient(120% 100% at 40% 0%, #0b3242, #061a25); }
.os[data-fond="marianne"] .gravure { display: none; }
.os[data-fond="marianne"] .fond::before { display: none; }
.os[data-fond="marianne"] .fond .fond-marque { opacity: 0; }
/* Marianne de lumière : les points du logo (poste.js), au-dessus de l'aurore */
.fond-lumiere { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.os[data-fond="marianne"] .fond-lumiere { display: block; }

/* Démarrage */
.boot { position: absolute; inset: 0; z-index: 9900; background: #061c27; color: #f8f4ec; display: grid; place-content: center; justify-items: center; gap: 56px; cursor: pointer; }
.boot .logo { width: 62px; height: 88px; animation: lueur 1.7s var(--ease) both; }
@keyframes lueur { 0% { opacity: 0; scale: .9; } 60% { opacity: 1; scale: 1.02; } 100% { opacity: 1; scale: 1; } }
.boot .halo-boot { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(225,196,148,.22), transparent 65%); animation: halo 2.2s var(--ease) both; pointer-events: none; }
@keyframes halo { 0% { opacity: 0; scale: .6; } 55% { opacity: 1; scale: 1; } 100% { opacity: .5; scale: 1.08; } }
.b-prog { width: 180px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
.b-prog i { display: block; height: 100%; width: 0; background: #e1c494; border-radius: 2px; animation: prog 1.9s cubic-bezier(.45,.05,.25,1) .3s forwards; }
@keyframes prog { to { width: 100%; } }
@keyframes apparait { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.eteint { position: absolute; inset: 0; z-index: 9950; background: #000; display: grid; place-content: center; justify-items: center; gap: 18px; color: rgba(255,255,255,.7); }
.eteint button { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.eteint button:hover { background: rgba(255,255,255,.08); }

/* Verrouillage */
.verrou { position: absolute; inset: 0; z-index: 9800; display: grid; grid-template-rows: auto 1fr auto; justify-items: center;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(44px + env(safe-area-inset-bottom, 0px));
  color: var(--verrou-texte); background: var(--verrou-voile); }
.v-haut { width: 100%; display: flex; justify-content: space-between; align-items: center; opacity: .85; }
.v-haut .logo { width: 14px; height: 20px; }
.v-centre { align-self: start; margin-top: 7vh; display: grid; justify-items: center; gap: 4px; text-align: center; }
.v-date { font-size: 19px; font-weight: 600; letter-spacing: .01em; }
.v-heure { font: 400 clamp(88px, 15vw, 164px)/.95 var(--titre); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.v-bas { display: grid; justify-items: center; gap: 10px; }
.v-avatar { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 700; color: #fff;
  background: linear-gradient(160deg, #2f6177, #0a2b3c); box-shadow: 0 12px 34px -10px rgba(10,43,60,.5), inset 0 0 0 1px rgba(248,244,236,.25); }
.v-nom { font-size: 17px; font-weight: 700; }
.v-role { font-size: 13px; opacity: .75; margin-top: -6px; }
.v-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.v-btn { height: 40px; padding: 0 20px; border-radius: 999px; font-weight: 650; display: inline-flex; align-items: center; gap: 8px;
  background: var(--v-btn); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 .5px var(--v-btn-lis); color: inherit; }
.v-btn:hover { background: var(--v-btn-lis); }
.v-btn.ok { background: rgba(92,196,147,.3); }
.v-info, .v-info:hover { cursor: default; background: var(--v-btn); }
.v-code { display: flex; gap: 8px; align-items: center; }
.v-code input { width: 170px; height: 40px; border-radius: 999px; border: 0; padding: 0 18px; text-align: center; letter-spacing: .4em; font-size: 18px;
  background: var(--v-btn); color: inherit; box-shadow: inset 0 0 0 .5px var(--v-btn-lis); outline: none; backdrop-filter: blur(16px); }
.v-code input::placeholder { letter-spacing: .05em; color: inherit; opacity: .6; font-size: 14px; }
.v-code .v-btn { width: 40px; padding: 0; justify-content: center; }
.v-err { min-height: 18px; font-size: 13px; font-weight: 650; color: var(--rouge); }
.cc.notifs { gap: 4px; }
.cc-notif { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; text-align: left; padding: 6px 4px; border-radius: 9px; font-size: 12px; }
.cc-notif:hover { background: var(--survol); }
.cc-notif b { display: block; font-size: 12.5px; }
.cc-notif small { color: var(--doux); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.cc-notif time { color: var(--leger); font-size: 11px; }
.verrou.entre .v-centre { animation: descend 1.1s .35s var(--ease) both; }
.verrou.entre .v-bas { animation: monte 1.1s .6s var(--ease) both; }
.verrou.entre .v-haut { animation: fondu 1s .8s ease both; }
@keyframes descend { from { opacity: 0; translate: 0 -28px; } }
@keyframes monte { from { opacity: 0; translate: 0 34px; } }
@keyframes fondu { from { opacity: 0; } }
.verrou.sort { animation: sortv .55s ease forwards; }
.verrou.sort .v-centre { animation: envol .55s cubic-bezier(.4,0,.2,1) forwards; }
.verrou.sort .v-bas { animation: envol .5s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes sortv { to { opacity: 0; } }
@keyframes envol { to { opacity: 0; translate: 0 -46px; scale: .96; } }

/* Bureau */
.bureau { position: absolute; inset: 0; }
.bureau.arrive .barre { animation: barre .7s .05s var(--ease) both; }
.bureau.arrive .dock { animation: dockin .8s .12s var(--ease) both; }
.bureau.arrive .d-app { animation: pop .55s cubic-bezier(.2,.9,.3,1.25) both; animation-delay: calc(var(--i) * 38ms + 320ms); }
.bureau.arrive .filigrane { animation: fondu 1.2s 1s ease both; }
@keyframes barre { from { translate: 0 -110%; opacity: 0; } }
@keyframes dockin { from { translate: 0 150%; opacity: 0; } }
@keyframes pop { from { opacity: 0; translate: 0 22px; scale: .55; } }
.filigrane { position: absolute; right: 18px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 1; font-size: 11.5px; line-height: 1.4; text-align: right; color: var(--barre-texte); opacity: .5; pointer-events: none; }

.barre { position: absolute; top: 0; left: 0; right: 0; z-index: 9000; height: calc(30px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 8px 0; display: flex; align-items: center; gap: 1px; font-size: 13px; color: var(--barre-texte);
  background: var(--barre-verre); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 -.5px 0 var(--trait); }
.b-item { height: 23px; padding: 0 9px; border-radius: 6px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.b-item:hover, .b-item[aria-expanded="true"] { background: var(--barre-survol); }
.b-assistance { display: inline-flex; align-items: center; gap: 6px; padding-left: 3px; }
.b-assistance .visage { width: 18px; height: 18px; }
.b-assistance.attend .visage { box-shadow: 0 0 0 1.5px var(--ambre); }
.b-assistance.present, .b-assistance.present:hover { color: #fff; background: #a82e35; font-weight: 700; }
.b-assistance.present .visage { box-shadow: 0 0 0 1.5px #fff; animation: pouls 2s ease-in-out infinite; }
@keyframes pouls { 50% { box-shadow: 0 0 0 3px rgba(255,255,255,.45); } }
.visage { display: inline-grid; place-items: center; border-radius: 50%; object-fit: cover; flex: none; background: var(--trait-fort); }
.assist { position: absolute; top: calc(36px + env(safe-area-inset-top, 0px)); right: 120px; width: 300px; z-index: 9400; padding: 16px; border-radius: 20px;
  background: var(--verre-fort); box-shadow: var(--ombre-fen); backdrop-filter: blur(24px) saturate(1.2); display: grid; gap: 10px; }
.assist p { margin: 0; color: var(--doux); }
.assist-tete { display: flex; align-items: center; gap: 12px; }
.assist-tete .visage { width: 64px; height: 64px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--trait-fort); }
.assist-tete b { display: block; font: 400 26px/1.1 var(--titre); }
.assist-tete small { color: var(--doux); }
.assist-actions { display: flex; justify-content: flex-end; }
.os[data-mode="sobre"] .b-assistance .visage { animation: none; }
.code-assistance { display: block; margin-top: 4px; font: 400 34px/1.1 var(--titre); letter-spacing: .14em; color: var(--encre); font-variant-numeric: tabular-nums; }
.b-logo .logo { width: 12px; height: 17px; }
.b-app { font-weight: 800; }
.b-menus { display: flex; }
.b-droite { margin-left: auto; display: flex; align-items: center; gap: 1px; }
.b-heure { font-variant-numeric: tabular-nums; font-weight: 600; }

.dock { position: absolute; left: 50%; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 8000;
  display: flex; align-items: flex-end; gap: 7px; padding: 6px 8px; border-radius: 24px; height: 64px;
  background: var(--dock-verre); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 0 0 .5px var(--dock-lisere), 0 12px 40px -12px rgba(0,0,0,.4); }
.d-sep { width: 1px; align-self: stretch; margin: 6px 3px; background: var(--dock-lisere); }
.d-app { position: relative; width: 52px; height: 52px; flex: none; transform-origin: 50% 100%; transition: transform .14s var(--ease); will-change: transform; }
.d-sep { transition: transform .14s var(--ease); }
.d-app:active .ico-app { filter: brightness(.85); }
.bulle { position: absolute; bottom: calc(100% + 13px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 10px; border-radius: 8px;
  background: var(--verre-fort); color: var(--texte); font-size: 12.5px; font-weight: 650; box-shadow: 0 6px 20px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transition: opacity .12s; }
.d-app:hover .bulle { opacity: 1; }
.bulle small { font-weight: 500; color: var(--doux); font-size: 12px; }
.point { position: absolute; bottom: -5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--barre-texte); opacity: 0; transition: opacity .2s; }
.d-app.ouvert .point { opacity: .75; }
.d-app.saute { animation: saute .7s cubic-bezier(.3,.7,.4,1) 2; }
@keyframes saute { 0%,100% { transform: none; } 40% { transform: translateY(-16px); } }
.badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #a82e35; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.25); }

.ico-app { width: 100%; height: 100%; border-radius: 23%; display: grid; place-items: center; color: #fff; overflow: hidden; position: relative;
  background: linear-gradient(160deg, var(--a), var(--b)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.14), 0 3px 8px -2px rgba(0,0,0,.3); }
.ico-app > svg { width: 54%; height: 54%; stroke-width: 1.8; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.ico-app::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 48%); pointer-events: none; }
.ico-jour { background: linear-gradient(180deg, #fffdf8, #efe8da); color: #112f40; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; }
.ico-jour small { font: 800 9.5px/1 var(--ui); letter-spacing: .06em; color: #a82e35; text-transform: uppercase; margin-top: 3px; }
.ico-jour b { font: 400 31px/1 var(--titre); margin-top: -1px; }
.ico-texte { background: linear-gradient(180deg, #fffdf8, #efe8da); color: #244e61; }
.ico-texte::before { content: ""; position: absolute; left: 22%; right: 22%; top: 58%; height: 22%; background: repeating-linear-gradient(180deg, rgba(36,78,97,.35) 0 1.5px, transparent 1.5px 4px); }

/* Fenêtres */
.fen { position: absolute; display: flex; flex-direction: column; border-radius: var(--r-fen); background: var(--surface); box-shadow: var(--ombre-fen-in); overflow: hidden; min-width: 300px; min-height: 220px; }
.fen.actif { box-shadow: var(--ombre-fen); }
.fen.glisse { will-change: transform; }
.fen.max { border-radius: 0; }
/* plein écran : au-dessus de la barre, du Dock et des menus, sous l'écran de verrouillage */
.fen.plein { position: fixed; inset: 0 !important; width: auto !important; height: auto !important; z-index: 9700 !important; border-radius: 0; box-shadow: none; }
.fen.plein > .fen-tete, .fen.plein > .poignee { display: none; }
.fen-tete { flex: none; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 12px; background: var(--tete); border-bottom: 1px solid var(--trait); user-select: none; -webkit-user-select: none; touch-action: none; }
.feux { display: flex; gap: 2px; flex: none; margin-left: 2px; }
.feu { width: 36px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--doux); transition: background .12s, color .12s; }
.feu:hover { background: var(--survol); color: var(--texte); }
.feu.f-fermer:hover { background: #a82e35; color: #fff; }
.fen-app { width: 20px; height: 20px; flex: none; }
.fen-app .ico-app { border-radius: 6px; box-shadow: none; }
.fen-app .ico-app > svg { width: 64%; height: 64%; }
.fen-app .ico-jour small { display: none; }
.fen-app .ico-jour b { font-size: 12px; margin: 0; }
.fen-titre { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fen:not(.actif) .fen-titre { color: var(--leger); }
.fen-outils { margin-left: auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
.fen-corps { flex: 1; min-height: 0; display: flex; position: relative; background: var(--surface); container-type: inline-size; }
.poignee { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; z-index: 5; touch-action: none; }

/* Éléments communs */
.side { width: 212px; flex: none; background: var(--side); border-right: 1px solid var(--trait); padding: 10px 8px; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.side h6 { margin: 12px 9px 4px; font-size: 11px; font-weight: 700; color: var(--leger); letter-spacing: .02em; }
.side h6:first-child { margin-top: 2px; }
.s-item { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 7px; font-size: 13px; width: 100%; color: var(--texte); }
.s-item .i { color: var(--bleu); }
.s-item:hover { background: var(--survol); }
.s-item.sel { background: var(--selection); font-weight: 650; }
.s-item .compte { margin-left: auto; font-size: 11.5px; color: var(--leger); font-variant-numeric: tabular-nums; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 13px; border-radius: var(--r-ctrl); background: var(--surface-3); font-weight: 650; font-size: 12.5px; white-space: nowrap; }
.btn:hover { background: color-mix(in srgb, var(--surface-3) 85%, var(--texte)); }
.btn-p { background: var(--bleu); color: var(--sur-accent); }
.btn-p:hover { background: color-mix(in srgb, var(--bleu) 88%, #000); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-ico { width: 28px; padding: 0; }
.nu { background: none; }
.nu:hover { background: var(--survol); }
.pastille { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--surface-3); color: var(--doux); white-space: nowrap; flex: none; }
.p-rouge { background: var(--rouge-pale); color: var(--rouge); }
.p-ambre { background: var(--ambre-pale); color: var(--ambre); }
.p-vert { background: var(--vert-pale); color: var(--vert); }
.p-bleu { background: var(--bleu-pale); color: var(--bleu); }
.champ-texte { height: 30px; border-radius: 12px; border: 1px solid var(--trait-fort); background: var(--surface); padding: 0 10px; outline: none; width: 100%; }
.champ-texte:focus { border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-pale); }
.vide { margin: auto; color: var(--leger); display: grid; justify-items: center; gap: 10px; text-align: center; padding: 20px; }
.sur { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--leger); }

/* Aujourd'hui */
.auj { flex: 1; overflow: auto; padding: 26px 30px 30px; display: grid; gap: 22px; align-content: start; }
.auj-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.auj-tete h1 { font: 400 44px/1 var(--titre); margin: 2px 0 0; letter-spacing: -.01em; }
.auj-chiffres { display: flex; gap: 18px; color: var(--doux); font-size: 13px; }
.auj-chiffres b { display: block; font: 400 28px/1 var(--titre); color: var(--texte); font-variant-numeric: tabular-nums; }
.auj-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@container (max-width: 700px) { .auj-grille { grid-template-columns: 1fr; } }
.bloc { display: grid; gap: 8px; }
.bloc + .bloc, .bloc .bloc-titre + * { }
.bloc-titre { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--leger); margin: 12px 2px 0; }
.bloc-titre:first-child { margin-top: 0; }
.liste { display: grid; border-radius: 12px; background: var(--surface-2); padding: 4px; }
.ligne { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 9px; width: 100%; }
.ligne:hover { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.l-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--surface); color: var(--bleu); flex: none; box-shadow: 0 0 0 .5px var(--trait-fort); }
.l-ico.ia { color: #f8f4ec; background: linear-gradient(150deg, #2f6177, #0a2b3c); box-shadow: none; }
.l-txt { flex: 1; min-width: 0; display: grid; }
.l-txt b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-txt span { color: var(--doux); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdv { display: grid; grid-template-columns: 50px 1fr; gap: 12px; padding: 9px 10px; align-items: start; border-radius: 9px; }
.rdv time { font: 500 12.5px/1.6 var(--mono); color: var(--doux); }
.rdv.fait { opacity: .5; }
.rdv.fait b { text-decoration: line-through; }
.rdv.maintenant { background: var(--bleu-pale); }
.rdv.maintenant time { color: var(--bleu); }

/* Messagerie */
.mail-liste { width: 320px; flex: none; border-right: 1px solid var(--trait); display: flex; flex-direction: column; min-width: 0; }
.mail-liste-tete { padding: 12px 14px 8px; display: grid; gap: 8px; }
.mail-liste-tete h3 { margin: 0; font-size: 17px; font-weight: 800; }
.mails { overflow: auto; flex: 1; padding: 0 6px 8px; }
.mail { display: grid; gap: 2px; padding: 10px 12px 10px 20px; border-radius: 10px; width: 100%; position: relative; }
.mail + .mail { box-shadow: 0 -1px 0 var(--trait); }
.mail:hover { background: var(--survol); }
.mail.sel { background: var(--bleu); color: var(--sur-accent); box-shadow: none; }
.mail.sel + .mail { box-shadow: none; }
.mail.sel .m-ap, .mail.sel .m-h { color: var(--sur-accent); opacity: .8; }
.mail .m-l1 { display: flex; justify-content: space-between; gap: 8px; }
.mail .m-de { font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail .m-h { font-size: 12px; color: var(--leger); flex: none; }
.mail .m-obj { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail .m-ap { font-size: 12.5px; color: var(--doux); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mail.nonlu::before { content: ""; position: absolute; left: 7px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--bleu); }
.mail.sel.nonlu::before { background: var(--sur-accent); }
.lecture { flex: 1; min-width: 0; overflow: auto; display: flex; flex-direction: column; }
.lecture-in { padding: 22px 28px 28px; display: grid; gap: 16px; align-content: start; max-width: 780px; }
.lecture h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.l-meta { display: flex; align-items: center; gap: 10px; }
.l-av { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--doux); flex: none; }
.l-meta small { display: block; color: var(--doux); }
.l-corps { font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; }
.liens { display: flex; gap: 6px; flex-wrap: wrap; }
.lien-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--bleu-pale); color: var(--bleu); font-weight: 650; font-size: 12.5px; }
.lien-chip:hover { filter: brightness(1.05); text-decoration: underline; }
.prepa { border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; background: linear-gradient(180deg, var(--bleu-pale), transparent 140%); box-shadow: inset 0 0 0 1px var(--selection); }
.prepa-t { display: flex; align-items: center; gap: 8px; font-weight: 750; color: var(--bleu); font-size: 12.5px; }
.prepa p { margin: 0; white-space: pre-wrap; line-height: 1.6; }
.compose { display: grid; gap: 8px; }
.compose textarea { min-height: 140px; resize: vertical; border-radius: 12px; border: 1px solid var(--trait-fort); background: var(--surface); padding: 12px 14px; line-height: 1.6; outline: none; }
.compose textarea:focus { border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-pale); }
.compose .rang { display: flex; gap: 8px; justify-content: flex-end; }

/* Dossiers */
.dos-liste { width: 330px; flex: none; border-right: 1px solid var(--trait); display: flex; flex-direction: column; min-width: 0; background: var(--surface-2); }
.dos-tete { padding: 12px; display: grid; gap: 8px; border-bottom: 1px solid var(--trait); }
.segment { display: flex; padding: 2px; border-radius: 9px; background: var(--surface-3); }
.segment button { flex: 1; text-align: center; height: 26px; border-radius: 7px; font-size: 12.5px; font-weight: 650; color: var(--doux); }
.segment button.sel { background: var(--surface); color: var(--texte); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.dos-items { overflow: auto; flex: 1; padding: 6px; display: grid; align-content: start; gap: 2px; }
.dos-item { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; width: 100%; }
.dos-item:hover { background: var(--survol); }
.dos-item.sel { background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.08), inset 0 0 0 1px var(--selection); }
.dos-item .d1 { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.dos-item .d-num { font: 500 11.5px var(--mono); color: var(--leger); }
.dos-item b { font-weight: 700; }
.dos-item span.d-q { color: var(--doux); font-size: 12.5px; }
.dos-det { flex: 1; min-width: 0; overflow: auto; }
.dos-det-in { padding: 24px 30px 30px; display: grid; gap: 20px; align-content: start; max-width: 820px; }
.dos-det h2 { margin: 4px 0 0; font: 400 32px/1.1 var(--titre); letter-spacing: -.01em; text-wrap: balance; }
.infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; border-radius: 12px; overflow: hidden; background: var(--trait); box-shadow: 0 0 0 1px var(--trait); }
.infos div { background: var(--surface); padding: 11px 14px; display: grid; gap: 2px; }
.infos small { color: var(--leger); font-size: 11.5px; font-weight: 700; }
.infos b { font-weight: 650; }
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.etape { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 12px; color: var(--leger); font-weight: 650; }
.etape::before { content: ""; position: absolute; top: 11px; left: -50%; right: 50%; height: 2px; background: var(--trait-fort); }
.etape:first-child::before { display: none; }
.etape i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); position: relative; z-index: 1; font-style: normal; }
.etape.fait { color: var(--texte); }
.etape.fait i { background: var(--vert); color: #fff; }
.etape.fait::before, .etape.cours::before { background: var(--vert); }
.etape.cours { color: var(--bleu); }
.etape.cours i { background: var(--surface); box-shadow: inset 0 0 0 2px var(--bleu); }
.etape.cours i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); }
.pieces { display: grid; gap: 4px; }
.piece { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; background: var(--surface-2); width: 100%; }
.piece:hover { background: var(--surface-3); }
.piece .i { color: var(--rouge); }
.piece small { margin-left: auto; color: var(--leger); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Feuille modale (signature) */
.voile { position: absolute; inset: 0; z-index: 50; background: rgba(8,16,28,.28); display: grid; justify-items: center; align-content: start; }
.feuille-modale { width: min(400px, calc(100% - 32px)); margin-top: 0; border-radius: 0 0 16px 16px; background: var(--surface); box-shadow: 0 24px 60px -12px rgba(0,0,0,.45); padding: 22px; display: grid; gap: 14px; animation: glisse .25s var(--ease); }
@keyframes glisse { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }
.feuille-modale h3 { margin: 0; font-size: 16px; font-weight: 800; }
.cle { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.cle .i { color: var(--vert); }
.cle small { display: block; color: var(--doux); }
.pin { display: flex; gap: 8px; justify-content: center; }
.pin input { width: 44px; height: 50px; text-align: center; font: 600 22px var(--mono); border-radius: 10px; border: 1px solid var(--trait-fort); background: var(--surface); outline: none; }
.pin input:focus { border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-pale); }
.signe { display: grid; justify-items: center; gap: 8px; padding: 10px 0; text-align: center; }
.signe .rond { width: 54px; height: 54px; border-radius: 50%; background: var(--vert); color: #fff; display: grid; place-items: center; animation: apparait .35s ease; }

/* Navigateur */
.nav { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.nav-onglets { display: flex; gap: 4px; padding: 6px 8px 0; background: var(--tete); border-bottom: 1px solid var(--trait); overflow-x: auto; scrollbar-width: none; }
.onglet-nav { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 12px; border-radius: 9px 9px 0 0; font-size: 12.5px; font-weight: 600; color: var(--doux); max-width: 220px; min-width: 110px; flex: none; }
.onglet-nav span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.onglet-nav.sel { background: var(--surface); color: var(--texte); box-shadow: 0 0 0 1px var(--trait); }
.onglet-nav .x { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; opacity: .6; }
.onglet-nav .x:hover { background: var(--survol); opacity: 1; }
.adresse { flex: 1; min-width: 120px; max-width: 460px; height: 30px; border-radius: 9px; background: var(--surface-3); display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 13px; color: var(--doux); }
.adresse input { border: 0; background: none; outline: none; flex: 1; min-width: 0; color: var(--texte); text-align: center; }
.adresse .i { color: var(--vert); }
.nav-page { flex: 1; overflow: auto; }
.accueil-nav { padding: 30px 34px 36px; display: grid; gap: 26px; max-width: 1000px; margin: 0 auto; }
.accueil-nav h2 { margin: 0; font: 400 34px/1.1 var(--titre); }
.sites { display: grid; gap: 22px; }
.groupe-sites h4 { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--leger); }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tuile { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.tuile:hover { background: var(--surface-3); }
.mono { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; flex: none; background: var(--c); }
.tuile b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile small { display: block; font-size: 11.5px; color: var(--leger); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile > span:last-child { min-width: 0; }
.site-ext { display: grid; place-content: center; justify-items: center; gap: 14px; min-height: 100%; padding: 40px 20px; text-align: center; background: repeating-linear-gradient(135deg, var(--surface-2) 0 14px, var(--surface) 14px 28px); }
.site-ext .mono { width: 64px; height: 64px; border-radius: 18px; font-size: 22px; }
.site-ext h3 { margin: 0; font-size: 20px; font-weight: 800; }
.site-ext a { color: var(--bleu); font-weight: 650; text-decoration: none; }
.site-ext a:hover { text-decoration: underline; }

/* Documents */
.docs { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.docs-barre { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--trait); }
.docs-barre h3 { margin: 0; font-size: 15px; font-weight: 800; }
.docs-table { flex: 1; overflow: auto; }
.docs-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.docs-table th { position: sticky; top: 0; background: var(--surface); text-align: left; font-size: 11.5px; font-weight: 700; color: var(--leger); padding: 8px 14px; border-bottom: 1px solid var(--trait); }
.docs-table td { padding: 8px 14px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.docs-table tr { cursor: default; }
.docs-table tbody tr:hover td { background: var(--survol); }
.docs-table tbody tr.sel td, .docs-table tbody tr.sel:hover td { background: var(--bleu); color: var(--sur-accent); }
.docs-table tr.sel td small { color: var(--sur-accent); opacity: .8; }
.docs-table td.nom { display: flex; align-items: center; gap: 10px; }
.docs-table td small { color: var(--leger); }
.ext { width: 26px; height: 30px; border-radius: 4px; display: grid; place-items: end center; padding-bottom: 3px; font: 800 7.5px/1 var(--ui); color: #fff; flex: none; background: var(--c); position: relative; }
.ext::before { content: ""; position: absolute; top: 0; right: 0; width: 8px; height: 8px; background: linear-gradient(225deg, var(--surface) 50%, rgba(0,0,0,.2) 50%); }
.docs-pied { padding: 7px 14px; border-top: 1px solid var(--trait); font-size: 12px; color: var(--doux); display: flex; justify-content: space-between; background: var(--surface-2); }

/* Texte */
.tx { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tx-ruban { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 7px 10px; border-bottom: 1px solid var(--trait); background: var(--surface); }
.grp { display: flex; align-items: center; gap: 2px; padding-right: 7px; margin-right: 3px; border-right: 1px solid var(--trait); }
.grp:last-child { border-right: 0; }
.t-btn { min-width: 28px; height: 28px; padding: 0 7px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-weight: 650; font-size: 12.5px; }
.t-btn:hover { background: var(--survol); }
.t-btn.on { background: var(--selection); color: var(--bleu); }
.t-btn.ia { color: var(--bleu); }
.sel-style { height: 28px; border-radius: 7px; border: 1px solid var(--trait-fort); background: var(--surface); padding: 0 8px; font-size: 12.5px; font-weight: 600; }
.tx-plan { flex: 1; overflow: auto; background: var(--table-travail); padding: 28px 20px 56px; display: flex; flex-direction: column; align-items: center; }
.page { width: min(720px, 100%); min-height: 960px; background: #FFFFFF; color: #1B2430; flex: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 14px 44px -14px rgba(0,0,0,.28); padding: 60px 70px 70px; font: 15px/1.65 var(--doc); outline: none; caret-color: #244e61; }
@container (max-width: 640px) { .page { padding: 32px 26px; min-height: 700px; } }
.page h1 { font: 600 24px/1.25 var(--doc); margin: 0 0 16px; color: #112f40; }
.page h2 { font: 600 17px/1.3 var(--doc); margin: 18px 0 8px; color: #112f40; }
.page p { margin: 0 0 12px; }
.page blockquote { margin: 0 0 12px; padding-left: 14px; border-left: 3px solid #C9D6E6; color: #3E4B5B; font-style: italic; }
.page ul, .page ol { margin: 0 0 12px; padding-left: 22px; }
.page .entete { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 44px; font: 12px/1.55 var(--ui); color: #56606C; }
.page .entete b { display: block; font: 700 14px/1.4 var(--ui); color: #112f40; }
.page .entete .ref { text-align: right; }
.page .dest { margin: 0 0 30px auto; width: fit-content; min-width: 45%; }
.page .signature { margin-top: 36px; text-align: right; font-weight: 600; }
.page .centre { text-align: center; }
.champ { background: rgba(36,78,97,.1); color: #244e61; border-radius: 4px; padding: 0 3px; font-weight: 600; white-space: nowrap; }
.page .ia-ecrit { background: linear-gradient(90deg, rgba(171,139,88,.2), rgba(171,139,88,.05)); border-radius: 4px; }
.tx-etat { display: flex; gap: 16px; align-items: center; padding: 6px 14px; border-top: 1px solid var(--trait); font-size: 12px; color: var(--doux); background: var(--surface-2); }
.tx-etat .ok { color: var(--vert); font-weight: 650; }
.menu-local { position: absolute; z-index: 60; min-width: 230px; padding: 5px; border-radius: 10px; background: var(--verre-fort); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 12px 40px rgba(0,0,0,.25), inset 0 0 0 .5px var(--trait-fort); }

/* Tableur */
.tb { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tb-barre { display: flex; align-items: center; gap: 4px; padding: 7px 10px; border-bottom: 1px solid var(--trait); flex-wrap: wrap; }
.tb-formule { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--trait); }
.tb-nom { min-width: 70px; height: 26px; padding: 0 8px; border-radius: 6px; background: var(--surface-3); font: 500 12px/26px var(--mono); text-align: center; }
.tb-fx { font: italic 400 17px/1 var(--titre); color: var(--leger); width: 18px; text-align: center; }
.tb-formule input { flex: 1; min-width: 0; height: 26px; border: 1px solid var(--trait-fort); border-radius: 6px; padding: 0 8px; background: var(--surface); font: 12.5px var(--mono); outline: none; }
.tb-formule input:focus { border-color: var(--bleu); }
.tb-grille { flex: 1; overflow: auto; position: relative; outline: none; }
table.feuille { border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.feuille th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font: 600 11.5px var(--ui); color: var(--doux); height: 24px; border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait-fort); user-select: none; }
.feuille th.coin { left: 0; z-index: 3; width: 44px; min-width: 44px; }
.feuille td.nl { position: sticky; left: 0; z-index: 1; background: var(--surface-2); color: var(--doux); font-size: 11.5px; font-weight: 600; text-align: center; border-right: 1px solid var(--trait-fort); border-bottom: 1px solid var(--trait); user-select: none; }
.feuille td.c { height: 26px; padding: 0 8px; border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; cursor: cell; user-select: none; }
.feuille td.c.nb { text-align: right; }
.feuille td.c.gras { font-weight: 800; }
.feuille td.c.err { color: var(--rouge); font-weight: 650; }
.feuille td.c.plage { background: var(--selection); }
.feuille td.c.sel { box-shadow: inset 0 0 0 2px var(--bleu); }
.feuille .hsel { background: var(--selection) !important; color: var(--bleu) !important; }
.c-edit { position: absolute; z-index: 4; border: 2px solid var(--bleu); background: var(--surface); font: 13px var(--ui); padding: 0 6px; outline: none; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.tb-pied { display: flex; align-items: center; gap: 4px; padding: 5px 10px; border-top: 1px solid var(--trait); background: var(--surface-2); }
.onglet-f { padding: 4px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 650; color: var(--doux); }
.onglet-f.sel { background: var(--surface); color: var(--texte); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.tb-stat { margin-left: auto; font-size: 12px; color: var(--doux); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Notes */
.notes-ed { flex: 1; overflow: auto; padding: 26px 34px; }
.notes-ed .n-titre { font: 400 30px/1.15 var(--titre); outline: none; margin: 0 0 4px; }
.notes-ed .n-date { color: var(--leger); font-size: 12px; margin-bottom: 18px; }
.notes-ed .n-corps { outline: none; font-size: 14.5px; line-height: 1.7; max-width: 680px; }
.notes-ed .n-corps ul { padding-left: 20px; margin: 6px 0 12px; }
.notes-ed .n-corps h3 { font-size: 13px; font-weight: 800; margin: 16px 0 4px; }
.enreg { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--rouge-pale); color: var(--rouge); font-weight: 700; margin-bottom: 18px; max-width: 680px; }
.enreg .rec { width: 10px; height: 10px; border-radius: 50%; background: var(--rouge); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.onde { display: flex; gap: 2px; align-items: center; height: 20px; flex: 1; }
.onde i { width: 3px; border-radius: 2px; background: currentColor; opacity: .7; animation: onde 1s ease-in-out infinite; }
@keyframes onde { 0%,100% { height: 4px; } 50% { height: 18px; } }
.exemple { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bleu); background: var(--bleu-pale); border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }

/* Berger-Levrault, session hébergée */
.distant { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #DCDFE4; }
.d-bandeau { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--surface-2); border-bottom: 1px solid var(--trait); font-size: 12px; color: var(--doux); }
.d-bandeau .vert { width: 7px; height: 7px; border-radius: 50%; background: #3BB273; }
.win { flex: 1; display: flex; flex-direction: column; margin: 10px; background: #F3F3F3; color: #1E1E1E; border: 1px solid #B9BDC4; font: 12px/1.4 "Segoe UI", Tahoma, Arial, sans-serif; min-height: 0; }
.win-titre { background: #FFFFFF; padding: 6px 10px; border-bottom: 1px solid #D0D3D8; font-weight: 600; display: flex; justify-content: space-between; }
.win-menu { display: flex; gap: 14px; padding: 4px 10px; background: #F7F7F7; border-bottom: 1px solid #DADCE0; }
.win-corps { flex: 1; display: flex; min-height: 0; }
.win-arbre { width: 190px; background: #FFFFFF; border-right: 1px solid #D0D3D8; padding: 8px; overflow: auto; }
.win-arbre div { padding: 3px 6px; cursor: default; }
.win-arbre div.sel { background: #CCE4F7; }
.win-arbre .sous { padding-left: 18px; }
.win-table { flex: 1; overflow: auto; padding: 8px; }
.win-table table { width: 100%; border-collapse: collapse; background: #FFFFFF; }
.win-table th { background: #E9ECF0; text-align: left; padding: 4px 8px; border: 1px solid #D0D3D8; font-weight: 600; }
.win-table td { padding: 4px 8px; border: 1px solid #E1E3E7; }
.win-table td.m { text-align: right; font-variant-numeric: tabular-nums; }

/* Réglages */
.reg { flex: 1; overflow: auto; padding: 24px 30px; display: grid; gap: 18px; align-content: start; max-width: 720px; }
.reg h2 { margin: 0; font-size: 20px; font-weight: 800; }
.carte { border-radius: 12px; background: var(--surface-2); display: grid; }
.carte-l { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.carte-l + .carte-l { box-shadow: 0 -1px 0 var(--trait); }
.carte-l > div { flex: 1; min-width: 0; }
.carte-l small { display: block; color: var(--doux); font-size: 12px; }
.bascule { width: 38px; height: 22px; border-radius: 11px; background: var(--trait-fort); position: relative; flex: none; transition: background .2s; }
.bascule::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.bascule.on { background: var(--vert); }
.bascule.on::after { transform: translateX(16px); }
.bascule[disabled] { opacity: .6; cursor: default; }
.apropos { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 18px 0 6px; }
.apropos .logo { width: 56px; height: 80px; color: var(--texte); }
.apropos h3 { margin: 8px 0 0; font: 400 30px/1.1 var(--titre); }
.fonds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fonds button { aspect-ratio: 16/10; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--trait-fort); position: relative; overflow: hidden; }
.fonds button.sel { box-shadow: 0 0 0 3px var(--bleu); }
.fonds span { position: absolute; left: 8px; bottom: 6px; font-size: 11.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.fonds [data-fond="horizon"] span { color: #112f40; text-shadow: none; }

/* Recherche */
.recherche { position: absolute; inset: 0; z-index: 9500; display: grid; justify-items: center; align-content: start; padding-top: 13vh; background: rgba(4,12,22,.12); }
.r-boite { width: min(660px, calc(100% - 32px)); border-radius: 18px; background: var(--verre-fort); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 34px 90px -12px rgba(0,0,0,.5), inset 0 0 0 .5px var(--trait-fort); overflow: hidden; animation: apparait .16s ease; }
.r-champ { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 60px; color: var(--doux); }
.r-champ input { flex: 1; min-width: 0; border: 0; background: none; font-size: 22px; font-weight: 500; outline: none; color: var(--texte); }
.r-res { max-height: min(430px, 55vh); overflow: auto; border-top: 1px solid var(--trait); padding: 6px; }
.r-groupe { font-size: 11px; font-weight: 800; color: var(--leger); padding: 9px 12px 4px; text-transform: uppercase; letter-spacing: .07em; }
.r-item { display: flex; align-items: center; gap: 12px; padding: 7px 12px; border-radius: 10px; width: 100%; }
.r-item .r-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: var(--bleu); flex: none; overflow: hidden; }
.r-item .r-ic .ico-app { border-radius: 8px; }
.r-item .r-ic .ico-app > svg { width: 60%; height: 60%; }
.r-item .r-t { flex: 1; min-width: 0; display: grid; }
.r-item b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-item small { color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-item.sel { background: var(--bleu); color: var(--sur-accent); }
.r-item.sel small { color: var(--sur-accent); opacity: .82; }
.r-item.sel .r-ic { background: rgba(255,255,255,.18); color: var(--sur-accent); }
.r-rep { padding: 14px 16px 16px; display: grid; gap: 10px; border-top: 1px solid var(--trait); }
.r-rep h4 { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--bleu); font-size: 12.5px; font-weight: 800; }
.r-rep p { margin: 0; line-height: 1.6; }
.r-pied { display: flex; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--trait); font-size: 11.5px; color: var(--leger); }
kbd { font: 600 11px var(--ui); padding: 1px 5px; border-radius: 4px; background: var(--surface-3); color: var(--doux); }

/* Centre de contrôle, menus, notifications */
.centre { position: absolute; top: calc(36px + env(safe-area-inset-top, 0px)); right: 10px; width: 330px; max-width: calc(100% - 20px); z-index: 9400; padding: 12px; border-radius: 20px;
  background: var(--verre-fort); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 24px 70px -12px rgba(0,0,0,.45), inset 0 0 0 .5px var(--trait-fort);
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; animation: apparait .16s ease; }
.cc { border-radius: 14px; background: var(--cc-tuile); padding: 10px 12px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.cc.large { grid-column: 1 / -1; }
.cc.col { flex-direction: column; align-items: stretch; gap: 8px; }
.cc-rond { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--trait-fort); flex: none; }
.cc.on .cc-rond { background: var(--bleu); color: var(--sur-accent); }
.cc b { display: block; font-size: 12.5px; font-weight: 750; }
.cc small { display: block; font-size: 11.5px; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-t { min-width: 0; }
.curseur { display: flex; align-items: center; gap: 10px; color: var(--doux); }
.curseur input { flex: 1; accent-color: var(--bleu); }
.seg3 { display: flex; padding: 2px; border-radius: 9px; background: var(--trait); }
.seg3 button { flex: 1; text-align: center; height: 26px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--doux); }
.seg3 button.sel { background: var(--surface); color: var(--texte); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.code { font: 600 18px var(--mono); letter-spacing: .12em; color: var(--texte); }
.menu { position: absolute; z-index: 9600; min-width: 230px; padding: 5px; border-radius: 11px; background: var(--verre-fort); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 14px 44px rgba(0,0,0,.28), inset 0 0 0 .5px var(--trait-fort); font-size: 13px; animation: apparait .12s ease; }
.m-item { display: flex; justify-content: space-between; align-items: center; gap: 22px; width: 100%; padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.m-item:hover { background: var(--bleu); color: var(--sur-accent); }
.m-item:hover kbd { background: rgba(255,255,255,.2); color: var(--sur-accent); }
.m-item[disabled] { opacity: .4; pointer-events: none; }
.m-sep { height: 1px; background: var(--trait-fort); margin: 5px 8px; }
.toasts { position: absolute; top: calc(40px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 9300; width: 350px; max-width: calc(100% - 24px); display: grid; gap: 8px; }
.toast { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; width: 100%; text-align: left;
  background: var(--verre-fort); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 14px 44px -8px rgba(0,0,0,.35), inset 0 0 0 .5px var(--trait-fort); animation: arrive .4s cubic-bezier(.2,.9,.25,1.1); }
.toast .t-ic { width: 38px; height: 38px; flex: none; }
.toast b { display: block; font-weight: 750; }
.toast span { color: var(--doux); font-size: 12.5px; }
.toast small { margin-left: auto; color: var(--leger); font-size: 11.5px; flex: none; }
@keyframes arrive { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.os[data-mode="sobre"] .barre, .os[data-mode="sobre"] .dock, .os[data-mode="sobre"] .menu, .os[data-mode="sobre"] .menu-local, .os[data-mode="sobre"] .r-boite,
.os[data-mode="sobre"] .centre, .os[data-mode="sobre"] .toast, .os[data-mode="sobre"] .v-btn { backdrop-filter: none; -webkit-backdrop-filter: none; }
.os[data-mode="sobre"] .bureau.arrive .barre, .os[data-mode="sobre"] .bureau.arrive .dock, .os[data-mode="sobre"] .bureau.arrive .d-app { animation-duration: .2s; animation-delay: 0s; }
.voile-lum { position: absolute; inset: 0; z-index: 9990; background: #000; opacity: 0; pointer-events: none; }
.mesures { position: absolute; left: 14px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 8500; padding: 6px 10px; border-radius: 10px;
  background: var(--verre-fort); box-shadow: inset 0 0 0 .5px var(--trait-fort); font: 500 11.5px/1.5 var(--mono); color: var(--texte); pointer-events: none; font-variant-numeric: tabular-nums; }
.mesures b { font-weight: 600; }
.mesures .mauvais { color: var(--rouge); }
@media (max-width: 760px) {
  .b-menus, .b-wifi, .filigrane { display: none; }
  .dock { left: 10px; right: 10px; transform: none; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .dock { height: 58px; }
  .d-app { width: 46px !important; height: 46px !important; }
  .bulle, .d-sep { display: none; }
  .side { width: 150px; }
  .mail-liste, .dos-liste { width: 42%; min-width: 150px; }
  .poignee { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── Bureau pilote ─────────────────────────────────────────────────── */
.v-marque { background: linear-gradient(160deg, #2f6177, #0a2b3c); color: #f8f4ec; }
.v-marque .logo { width: 30px; height: 43px; }
.auj-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.raccourcis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.raccourcis .tuile { background: var(--surface-2); }
.ico-app.mini { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.ico-app.mini > svg { width: 58%; height: 58%; }
.fil { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.fil button { font-weight: 700; font-size: 14px; padding: 3px 6px; border-radius: 6px; white-space: nowrap; }
.fil button:hover { background: var(--survol); }
.fil span { color: var(--leger); }
.dossier-ic { width: 26px; display: grid; place-items: center; color: #b08a4a; flex: none; }
.bandeau-info { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 12.5px; color: var(--doux); background: var(--ambre-pale); border-bottom: 1px solid var(--trait); }
.entete-liste { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px -6px; }
.entete-liste b { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--leger); }
.carte button.carte-l { width: 100%; text-align: left; border-radius: 12px; }
.carte button.carte-l:hover { background: var(--survol); }
.reseau + .reseau { box-shadow: 0 -1px 0 var(--trait); }
.reseau.ouvert { background: var(--surface); border-radius: 12px; box-shadow: 0 0 0 1px var(--selection); }
.connexion { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0 14px 12px 46px; }
.connexion.seule { padding: 12px 14px; }
.connexion .champ-texte { flex: 1; min-width: 180px; }
.connexion .erreur { flex-basis: 100%; color: var(--rouge); font-size: 12.5px; font-weight: 650; }
.barres { color: var(--texte); flex: none; }
.cc.energie { gap: 6px; justify-content: space-between; }
.cc.energie .btn { flex: 1; padding: 0 8px; background: var(--trait); }
.voile-ecran { position: absolute; z-index: 9700; align-content: center; background: rgba(8,20,28,.35); }
.voile-ecran .feuille-modale { border-radius: 16px; }
.btn.danger { background: var(--rouge); color: #fff; }
.b-batterie span { font-variant-numeric: tabular-nums; font-weight: 600; }
.eteint .logo { width: 40px; height: 57px; color: #f8f4ec; }
.tuile { text-align: left; }