/* ====================== Jetons ====================== */
:root {
  --fond: #f2f2f7;
  --surface: #ffffff;
  --texte: #000000;
  --texte2: rgba(60, 60, 67, .6);
  --texte3: rgba(60, 60, 67, .3);
  --trait: rgba(60, 60, 67, .18);
  --champ: rgba(118, 118, 128, .12);
  --jaune: #e5a50a;
  --rouge: #ff3b30;
  --verre: rgba(249, 249, 249, .82);

  /* Tito */
  --t-fond: #f4f3f8;
  --t-halo1: rgba(124, 92, 255, .14);
  --t-halo2: rgba(255, 159, 67, .10);
  --t-surface: #ffffff;
  --t-surface2: #f1f0f6;
  --t-texte: #15131c;
  --t-texte2: #6f6b7d;
  --t-trait: rgba(21, 19, 28, .08);
  --t-moi1: #6d4cff;
  --t-moi2: #9b5cff;
  --t-moi-texte: #ffffff;
  --t-ombre: 0 1px 2px rgba(21, 19, 28, .06), 0 4px 14px rgba(21, 19, 28, .06);
  --t-verre: rgba(244, 243, 248, .78);
  --t-code: #f3f1fa;
  --t-vert: #22c55e;
  --t-lien: #6d4cff;
  --t-av1: #ffb347;
  --t-av2: #ff5f8f;
  --t-av3: #7c5cff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #000000; --surface: #1c1c1e; --texte: #ffffff;
    --texte2: rgba(235, 235, 245, .6); --texte3: rgba(235, 235, 245, .3);
    --trait: rgba(84, 84, 88, .55); --champ: rgba(118, 118, 128, .24);
    --jaune: #ffd60a; --rouge: #ff453a; --verre: rgba(22, 22, 24, .82);
    --t-fond: #0b0a10; --t-halo1: rgba(124, 92, 255, .22); --t-halo2: rgba(255, 120, 80, .08);
    --t-surface: #1a1822; --t-surface2: #24212e; --t-texte: #f4f2fa; --t-texte2: #9d98ad;
    --t-trait: rgba(255, 255, 255, .08); --t-moi1: #5b3df5; --t-moi2: #8b4dff;
    --t-lien: #b3a1ff; --t-ombre: 0 1px 2px rgba(0, 0, 0, .4); --t-verre: rgba(11, 10, 16, .72); --t-code: #2a2735;
  }
}
:root[data-theme="dark"] {
  --fond: #000000; --surface: #1c1c1e; --texte: #ffffff;
  --texte2: rgba(235, 235, 245, .6); --texte3: rgba(235, 235, 245, .3);
  --trait: rgba(84, 84, 88, .55); --champ: rgba(118, 118, 128, .24);
  --jaune: #ffd60a; --rouge: #ff453a; --verre: rgba(22, 22, 24, .82);
  --t-fond: #0b0a10; --t-halo1: rgba(124, 92, 255, .22); --t-halo2: rgba(255, 120, 80, .08);
  --t-surface: #1a1822; --t-surface2: #24212e; --t-texte: #f4f2fa; --t-texte2: #9d98ad;
  --t-trait: rgba(255, 255, 255, .08); --t-moi1: #5b3df5; --t-moi2: #8b4dff;
  --t-lien: #b3a1ff; --t-ombre: 0 1px 2px rgba(0, 0, 0, .4); --t-verre: rgba(11, 10, 16, .72); --t-code: #2a2735;
}

/* ====================== Base ====================== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fond); color: var(--texte);
  font: 17px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none; -webkit-text-size-adjust: 100%;
}
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg .pt { fill: currentColor; stroke: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.vue { display: none; position: fixed; inset: 0; flex-direction: column; overflow: hidden; }
.vue.active { display: flex; animation: entree .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes entree { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.defile { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ====================== Façade Notes ====================== */
.barre { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 12px 0 8px; flex: none; margin-top: env(safe-area-inset-top); }
.barre-liste { margin-top: env(safe-area-inset-top); }
.barre-droite { display: flex; align-items: center; gap: 18px; }
.icone { color: var(--jaune); display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; }
.lien { color: var(--jaune); display: inline-flex; align-items: center; font-size: 17px; }
.lien svg { width: 28px; height: 28px; stroke-width: 2.2; margin-right: -2px; }
.gras { font-weight: 600; }

.grand-titre { font-size: 34px; font-weight: 700; margin: 2px 16px 10px; letter-spacing: .37px; }
.recherche { margin: 0 16px 22px; background: var(--champ); border-radius: 10px; display: flex; align-items: center; gap: 4px; padding: 0 8px; height: 36px; }
.recherche svg { width: 18px; height: 18px; color: var(--texte2); stroke-width: 2.2; }
.recherche input { border: 0; background: none; outline: none; flex: 1; padding: 0 2px; font-size: 17px; min-width: 0; }
.recherche input::placeholder { color: var(--texte2); }
.recherche input::-webkit-search-cancel-button { -webkit-appearance: none; }

.groupe-titre { font-size: 20px; font-weight: 700; margin: 0 16px 8px; letter-spacing: .3px; }
.groupe { margin: 0 16px 26px; background: var(--surface); border-radius: 12px; overflow: hidden; }
.item { display: block; width: 100%; text-align: left; padding: 11px 16px 11px 0; margin-left: 16px; border-bottom: .5px solid var(--trait); position: relative; }
.item:last-child { border-bottom: 0; }
.item:active { background: var(--champ); }
.item b { display: block; font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px; }
.item span { color: var(--texte2); font-size: 15px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item span em { font-style: normal; color: var(--texte); opacity: .85; margin-right: 6px; }
.item .epingle { position: absolute; right: 16px; top: 13px; width: 14px; height: 14px; color: var(--jaune); }

.vide { display: flex; flex-direction: column; align-items: center; color: var(--texte2); margin-top: 18vh; }
.vide svg { width: 64px; height: 64px; stroke-width: 2; color: var(--texte3); }
.vide p { margin: 10px 0 0; font-size: 17px; }

.outils { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 14px calc(6px + env(safe-area-inset-bottom)); background: var(--verre); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: .5px solid var(--trait); min-height: 50px; }
.compte { font-size: 11px; color: var(--texte); }

.note-corps { display: flex; flex-direction: column; padding: 0 20px 40px; }
.note-date { text-align: center; color: var(--texte2); font-size: 13px; margin: 6px 0 12px; }
.note-titre { border: 0; outline: none; background: none; font-size: 28px; font-weight: 700; padding: 0; margin-bottom: 8px; letter-spacing: .2px; }
#note-texte { flex: 1; min-height: 60vh; border: 0; outline: none; resize: none; background: none; padding: 0; font-size: 17px; line-height: 1.45; }
#v-note .barre, #v-note { background: var(--surface); }

/* Alerte façon iOS */
.voile { position: fixed; inset: 0; background: rgba(0, 0, 0, .32); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; animation: fondu .2s; }
.voile.bas { align-items: flex-end; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
@keyframes fondu { from { opacity: 0; } }
.alerte { width: 270px; background: var(--verre); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); border-radius: 14px; overflow: hidden; text-align: center; animation: zoom .22s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes zoom { from { transform: scale(1.12); opacity: 0; } }
.alerte-haut { padding: 19px 16px 15px; display: flex; flex-direction: column; gap: 8px; }
.alerte h2 { margin: 0; font-size: 17px; font-weight: 600; }
.alerte p { margin: 0 0 6px; font-size: 13px; line-height: 1.3; }
.alerte input { border: .5px solid var(--trait); background: var(--surface); border-radius: 7px; padding: 7px 8px; outline: none; font-size: 15px; }
.alerte .err { color: var(--rouge); margin: 0; font-size: 13px; }
.alerte .err:empty { display: none; }
.alerte-boutons { display: flex; border-top: .5px solid var(--trait); }
.alerte-boutons button { flex: 1; height: 44px; color: #0a84ff; font-size: 17px; }
.alerte-boutons button + button { border-left: .5px solid var(--trait); }

/* Feuille d'actions */
.feuille { width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 8px; animation: monte .28s cubic-bezier(.2, .9, .3, 1); }
@keyframes monte { from { transform: translateY(100%); } }
.feuille-groupe { background: var(--verre); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); border-radius: 14px; overflow: hidden; }
.feuille-groupe button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 57px; font-size: 20px; color: #0a84ff; border-bottom: .5px solid var(--trait); }
.feuille-groupe button:last-child { border-bottom: 0; }
.feuille-groupe button.danger { color: var(--rouge); }
.feuille-groupe button svg { width: 22px; height: 22px; }
.feuille-annuler { height: 57px; border-radius: 14px; background: var(--surface); font-size: 20px; font-weight: 600; color: #0a84ff; }

/* ====================== Tito ====================== */
.tito {
  background:
    radial-gradient(120% 60% at 100% 0%, var(--t-halo1), transparent 60%),
    radial-gradient(90% 50% at 0% 100%, var(--t-halo2), transparent 60%),
    var(--t-fond);
  color: var(--t-texte);
}
.t-entete {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: 6px;
  padding: calc(6px + env(safe-area-inset-top)) 10px 8px 4px;
  background: var(--t-verre); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-bottom: .5px solid var(--t-trait);
}
.t-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--t-texte); position: relative; }
.t-btn:active { background: var(--t-trait); }
.t-entete > .t-btn svg { width: 28px; height: 28px; stroke-width: 2.2; color: var(--t-lien); }
.t-ident { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.t-ident strong { display: block; font-size: 16px; font-weight: 650; letter-spacing: .1px; }
.t-ident small { display: block; font-size: 12.5px; color: var(--t-texte2); transition: color .2s; }
.t-ident small.actif { color: var(--t-lien); }
.t-droite { display: flex; }
.pastille { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); border: 1.5px solid var(--t-fond); }

.avatar { width: 38px; height: 38px; border-radius: 50%; position: relative; flex: none;
  background: conic-gradient(from 210deg, var(--t-av1), var(--t-av2), var(--t-av3), var(--t-av1));
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(124, 92, 255, .3); }
.avatar span { color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -.3px; text-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.avatar .enligne { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--t-vert); border: 2px solid var(--t-fond); }
.avatar.petit { width: 28px; height: 28px; box-shadow: none; }
.avatar.petit span { font-size: 12.5px; }
.avatar.grand { width: 76px; height: 76px; box-shadow: 0 10px 30px rgba(124, 92, 255, .35); animation: respire 4s ease-in-out infinite; }
.avatar.grand span { font-size: 32px; }
@keyframes respire { 50% { transform: scale(1.04); box-shadow: 0 14px 40px rgba(255, 95, 143, .35); } }

.fil { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(70px + env(safe-area-inset-top)) 12px 12px; overscroll-behavior: contain; }

.accueil { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6vh 8px 20px; }
.accueil h2 { margin: 18px 0 4px; font-size: 26px; font-weight: 700; letter-spacing: -.2px; }
.accueil p { margin: 0 0 26px; color: var(--t-texte2); font-size: 16px; }
.suggestions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 420px; }
.sugg { text-align: left; background: var(--t-surface); border-radius: 16px; padding: 12px 12px 13px; box-shadow: var(--t-ombre); display: flex; flex-direction: column; gap: 8px; border: .5px solid var(--t-trait); transition: transform .15s; }
.sugg:active { transform: scale(.97); }
.sugg i { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; }
.sugg i svg { width: 17px; height: 17px; stroke-width: 2.1; }
.sugg b { font-size: 14px; font-weight: 600; line-height: 1.25; }
.sugg small { font-size: 12px; color: var(--t-texte2); margin-top: -5px; }

.jour { text-align: center; margin: 14px 0 10px; }
.jour span { font-size: 12px; font-weight: 600; color: var(--t-texte2); background: var(--t-surface2); padding: 4px 10px; border-radius: 10px; text-transform: capitalize; }

.ligne { display: flex; align-items: flex-end; gap: 7px; margin-top: 2px; animation: pop .25s cubic-bezier(.2, .9, .3, 1.1); }
.ligne.debut { margin-top: 10px; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.ligne.moi { justify-content: flex-end; padding-left: 48px; }
.ligne.lui { padding-right: 34px; }
.ligne.lui .avatar { visibility: hidden; }
.ligne.lui.fin .avatar { visibility: visible; }
.colonne { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.ligne.moi .colonne { align-items: flex-end; }

.bulle { padding: 8px 12px 7px; border-radius: 20px; word-wrap: break-word; overflow-wrap: anywhere; font-size: 16px; line-height: 1.42; max-width: 100%; position: relative; }
.moi .bulle { background: linear-gradient(135deg, var(--t-moi1), var(--t-moi2)); color: var(--t-moi-texte); box-shadow: 0 2px 10px rgba(109, 76, 255, .25); }
.lui .bulle { background: var(--t-surface); box-shadow: var(--t-ombre); border: .5px solid var(--t-trait); }
.moi:not(.fin) .bulle { border-bottom-right-radius: 7px; }
.moi:not(.debut) .bulle { border-top-right-radius: 7px; }
.moi.fin .bulle { border-bottom-right-radius: 6px; }
.lui:not(.fin) .bulle { border-bottom-left-radius: 7px; }
.lui:not(.debut) .bulle { border-top-left-radius: 7px; }
.lui.fin .bulle { border-bottom-left-radius: 6px; }

.meta { font-size: 11px; color: var(--t-texte2); margin: 3px 6px 0; display: flex; gap: 6px; align-items: center; }
.meta svg { width: 13px; height: 13px; stroke-width: 2.4; color: var(--t-lien); }

.bulle p { margin: 0 0 7px; } .bulle > :last-child { margin-bottom: 0; }
.bulle h3 { font-size: 16px; margin: 8px 0 4px; font-weight: 700; } .bulle h3:first-child { margin-top: 0; }
.bulle ul, .bulle ol { margin: 2px 0 8px; padding-left: 22px; } .bulle li { margin: 2px 0; } .bulle li::marker { color: var(--t-lien); }
.bulle blockquote { margin: 4px 0 8px; padding: 2px 0 2px 10px; border-left: 3px solid var(--t-moi2); color: var(--t-texte2); }
.bulle hr { border: 0; border-top: 1px solid var(--t-trait); margin: 10px 0; }
.bulle code { background: var(--t-code); border-radius: 5px; padding: 1px 5px; font: 13.5px ui-monospace, "SF Mono", Menlo, monospace; }
.moi .bulle code { background: rgba(255, 255, 255, .18); }
.bulle pre { background: var(--t-code); border-radius: 10px; padding: 9px 10px; overflow-x: auto; font: 12.5px/1.45 ui-monospace, "SF Mono", Menlo, monospace; margin: 6px 0; white-space: pre; }
.bulle a { color: var(--t-lien); text-decoration: none; font-weight: 500; }
.moi .bulle a { color: #fff; text-decoration: underline; }
.tableau { overflow-x: auto; margin: 6px -4px 8px; }
.bulle table { border-collapse: collapse; font-size: 13.5px; min-width: 100%; }
.bulle th, .bulle td { padding: 6px 9px; text-align: left; border-bottom: .5px solid var(--t-trait); white-space: nowrap; }
.bulle th { font-weight: 650; color: var(--t-texte2); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; }
.bulle tr:last-child td { border-bottom: 0; }

.bulle.media { padding: 4px; overflow: hidden; }
.bulle.media img { display: block; max-width: min(260px, 70vw); max-height: 340px; border-radius: 16px; object-fit: cover; }
.bulle.media .legende { padding: 6px 8px 3px; }
.bulle .legende { font-size: 15px; }

.doc { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; min-width: 210px; padding: 2px 0; }
.doc .ext { width: 40px; height: 48px; border-radius: 8px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7px; font-size: 10px; font-weight: 800; color: #fff; letter-spacing: .4px; position: relative; flex: none; }
.doc .ext::before { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 11px 11px 0; border-color: transparent var(--t-surface) rgba(255, 255, 255, .45) transparent; }
.moi .doc .ext::before { border-color: transparent var(--t-moi2) rgba(255, 255, 255, .45) transparent; }
.doc div { min-width: 0; }
.doc b { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.doc small { font-size: 12.5px; color: var(--t-texte2); }
.moi .doc small { color: rgba(255, 255, 255, .75); }

.vocal { display: flex; align-items: center; gap: 10px; min-width: 210px; padding: 2px 0; }
.vocal .lecture { width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--t-moi1); color: #fff; }
.moi .vocal .lecture { background: #fff; color: var(--t-moi1); }
.vocal .lecture svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.vocal .barres { flex: 1; display: flex; align-items: center; gap: 2px; height: 28px; }
.vocal .barres i { flex: 1; border-radius: 2px; background: var(--t-texte2); opacity: .35; min-width: 2px; transition: opacity .1s, background .1s; }
.vocal .barres i.lu { opacity: 1; background: var(--t-moi1); }
.moi .vocal .barres i { background: #fff; opacity: .4; } .moi .vocal .barres i.lu { opacity: 1; background: #fff; }
.vocal .duree { font-size: 12px; color: var(--t-texte2); font-variant-numeric: tabular-nums; min-width: 30px; }
.moi .vocal .duree { color: rgba(255, 255, 255, .8); }
.transcrit { font-size: 14px; opacity: .85; margin-top: 6px; font-style: italic; }

.frappe-bulle { display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
.points { display: flex; gap: 4px; }
.points i { width: 7px; height: 7px; border-radius: 50%; background: var(--t-texte2); animation: saut 1.3s infinite; }
.points i:nth-child(2) { animation-delay: .16s; } .points i:nth-child(3) { animation-delay: .32s; }
@keyframes saut { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-4px); } }
#frappe-txt { font-size: 13px; color: var(--t-texte2); }
#frappe-txt:empty { display: none; }

.t-bas { position: absolute; right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); width: 40px; height: 40px; border-radius: 50%; background: var(--t-surface); box-shadow: 0 4px 16px rgba(0, 0, 0, .15); display: flex; align-items: center; justify-content: center; color: var(--t-lien); z-index: 4; border: .5px solid var(--t-trait); }
.t-bas svg { width: 20px; height: 20px; stroke-width: 2.3; }
.t-bas b { position: absolute; top: -5px; right: -3px; background: var(--t-moi1); color: #fff; font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }

.t-pied { flex: none; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--t-verre); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-top: .5px solid var(--t-trait); }
.saisie, .enreg { display: flex; align-items: flex-end; gap: 8px; }
.champ { flex: 1; min-width: 0; background: var(--t-surface); border-radius: 21px; border: .5px solid var(--t-trait); box-shadow: var(--t-ombre); display: flex; }
.champ textarea { flex: 1; min-width: 0; border: 0; background: none; resize: none; outline: none; padding: 9px 14px; max-height: 150px; font-size: 16px; line-height: 1.35; color: var(--t-texte); }
.champ textarea::placeholder { color: var(--t-texte2); }
.rond { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: transform .15s; }
.rond:active { transform: scale(.9); }
.rond.doux { background: var(--t-surface); color: var(--t-texte); border: .5px solid var(--t-trait); box-shadow: var(--t-ombre); }
.rond.doux svg { width: 22px; height: 22px; }
.rond.plein { background: linear-gradient(135deg, var(--t-moi1), var(--t-moi2)); color: #fff; box-shadow: 0 3px 12px rgba(109, 76, 255, .4); animation: apparait .2s; }
.rond.plein svg { width: 21px; height: 21px; stroke-width: 2.4; }
.rond.rouge { color: var(--rouge); }
@keyframes apparait { from { transform: scale(.6); opacity: 0; } }
.enreg { align-items: center; }
.enreg-zone { flex: 1; display: flex; align-items: center; gap: 10px; height: 40px; background: var(--t-surface); border-radius: 21px; padding: 0 14px; border: .5px solid var(--t-trait); min-width: 0; }
.enreg-zone #enreg-t { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; min-width: 36px; }
.point { width: 9px; height: 9px; border-radius: 50%; background: var(--rouge); animation: saut 1s infinite; flex: none; }
.onde { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 2px; height: 26px; overflow: hidden; }
.onde i { width: 3px; border-radius: 2px; background: var(--t-moi1); flex: none; }

.piece { display: flex; align-items: center; gap: 10px; background: var(--t-surface); border-radius: 14px; padding: 6px 4px 6px 6px; margin-bottom: 8px; border: .5px solid var(--t-trait); animation: pop .2s; }
.piece-vignette { width: 42px; height: 42px; border-radius: 9px; background: var(--t-surface2) center/cover; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; flex: none; }
.piece-info { flex: 1; min-width: 0; }
.piece-info b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.piece-info small { font-size: 12px; color: var(--t-texte2); }
.piece .t-btn svg { width: 18px; height: 18px; color: var(--t-texte2); }

.visionneuse { position: fixed; inset: 0; background: rgba(0, 0, 0, .94); z-index: 30; display: flex; align-items: center; justify-content: center; animation: fondu .2s; }
.visionneuse img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visionneuse .t-btn { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; color: #fff; background: rgba(255, 255, 255, .15); }

.toast { position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: rgba(20, 18, 28, .88); color: #fff; padding: 9px 16px; border-radius: 20px; font-size: 14px; z-index: 40; animation: pop .2s; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: nowrap; }
.feuille-info { margin: 0; padding: 14px 16px; font-size: 13px; color: var(--texte2); text-align: center; border-bottom: .5px solid var(--trait); }

/* ====================== Bureau ====================== */
.bureau {
  background:
    radial-gradient(110% 55% at 100% 0%, var(--t-halo1), transparent 60%),
    radial-gradient(90% 50% at 0% 100%, var(--t-halo2), transparent 60%),
    var(--t-fond);
  color: var(--t-texte);
}
.b-defile { padding: calc(14px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); }
.b-entete { display: flex; align-items: flex-end; justify-content: space-between; margin: 6px 2px 18px; }
.b-entete small { display: block; font-size: 13px; font-weight: 600; color: var(--t-texte2); letter-spacing: .2px; }
.b-entete h1 { margin: 2px 0 0; font-size: 30px; font-weight: 750; letter-spacing: -.3px; }
.b-verrou { width: 42px; height: 42px; border-radius: 50%; background: var(--t-surface); border: .5px solid var(--t-trait); box-shadow: var(--t-ombre); display: flex; align-items: center; justify-content: center; color: var(--t-texte); }
.b-verrou svg { width: 20px; height: 20px; }

.widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.widget { text-align: left; background: var(--t-surface); border-radius: 22px; padding: 14px 14px 13px; box-shadow: var(--t-ombre); border: .5px solid var(--t-trait); display: flex; flex-direction: column; min-height: 132px; transition: transform .15s; overflow: hidden; }
.widget:active, .w-rappel:active, .appli:active { transform: scale(.96); }
.w-haut { display: flex; align-items: center; gap: 8px; margin-bottom: auto; }
.w-haut span { font-size: 13px; font-weight: 650; color: var(--t-texte2); }
.w-ico { width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg, var(--c1), var(--c2)); }
.w-ico svg { width: 16px; height: 16px; stroke-width: 2.2; }
.widget b { font-size: 24px; font-weight: 750; letter-spacing: -.4px; margin-top: 14px; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget b.petit { font-size: 17px; letter-spacing: -.1px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.widget small { font-size: 12.5px; color: var(--t-texte2); margin-top: 3px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.widget .vert { color: #16a34a; } .widget .rouge { color: var(--rouge); }
.jauge { height: 5px; border-radius: 3px; background: var(--t-surface2); margin-top: 8px; overflow: hidden; }
.jauge i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #60a5fa, #2563eb); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.jauge i.haut { background: linear-gradient(90deg, #fbbf24, #ef4444); }

.w-rappel { margin-top: 12px; width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: var(--t-surface); border-radius: 18px; padding: 12px 12px 12px 14px; box-shadow: var(--t-ombre); border: .5px solid var(--t-trait); transition: transform .15s; }
.w-rappel .w-ico { width: 34px; height: 34px; border-radius: 10px; }
.w-rappel .w-ico svg { width: 19px; height: 19px; }
.w-rappel div { flex: 1; min-width: 0; }
.w-rappel small { display: block; font-size: 12px; font-weight: 650; color: var(--rouge); }
.w-rappel b { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chevron { width: 18px; height: 18px; color: var(--t-texte2); }

.b-titre { font-size: 20px; font-weight: 750; margin: 26px 2px 14px; letter-spacing: -.2px; }
.grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 8px; }
.appli { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: var(--t-texte); transition: transform .15s; }
.appli .tuile { width: 64px; height: 64px; border-radius: 16px; position: relative; display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(150deg, var(--c1), var(--c2)); box-shadow: 0 6px 16px -4px var(--c2), inset 0 1px 0 rgba(255, 255, 255, .25); overflow: hidden; }
.appli .tuile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 50%); pointer-events: none; }
.appli .tuile svg { width: 32px; height: 32px; stroke-width: 1.9; position: relative; z-index: 1; }
.appli .tuile .lettre { font-size: 30px; font-weight: 800; letter-spacing: -.5px; position: relative; z-index: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.appli .tuile.conique { background: conic-gradient(from 210deg, var(--t-av1), var(--t-av2), var(--t-av3), var(--t-av1)); }
.appli span { font-size: 12px; font-weight: 500; text-align: center; line-height: 1.2; max-width: 80px; }
.b-maj { text-align: center; font-size: 11.5px; color: var(--t-texte2); margin: 28px 0 0; }

/* ====================== Pages (rappels, fichiers) ====================== */
.page { background: var(--t-fond); color: var(--t-texte); }
.p-entete { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: calc(8px + env(safe-area-inset-top)) 10px 8px 4px; background: var(--t-verre); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom: .5px solid var(--t-trait); flex: none; }
.p-entete strong { font-size: 17px; font-weight: 650; }
.p-retour { display: inline-flex; align-items: center; color: var(--t-lien); font-size: 17px; height: 40px; }
.p-retour svg { width: 28px; height: 28px; stroke-width: 2.2; }
.p-corps { padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); }
.p-groupe { font-size: 13px; font-weight: 650; color: var(--t-texte2); text-transform: uppercase; letter-spacing: .4px; margin: 18px 4px 8px; }
.p-groupe:first-child { margin-top: 4px; }
.p-liste { background: var(--t-surface); border-radius: 16px; overflow: hidden; border: .5px solid var(--t-trait); box-shadow: var(--t-ombre); }
.p-ligne { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 12px 14px; border-bottom: .5px solid var(--t-trait); }
.p-ligne:last-child { border-bottom: 0; }
.p-ligne:active { background: var(--t-surface2); }
.p-date { flex: none; width: 50px; text-align: center; border-radius: 10px; background: var(--t-surface2); padding: 5px 0 4px; }
.p-date b { display: block; font-size: 19px; font-weight: 750; line-height: 1.05; }
.p-date small { display: block; font-size: 10.5px; font-weight: 650; color: var(--rouge); text-transform: uppercase; }
.p-ligne .p-texte { flex: 1; min-width: 0; font-size: 15px; line-height: 1.35; }
.p-ligne .p-texte small { display: block; color: var(--t-texte2); font-size: 12.5px; margin-top: 3px; }
.p-vide { text-align: center; color: var(--t-texte2); padding: 50px 20px; font-size: 15px; }

.segments { display: flex; margin: 10px 16px 0; background: var(--t-surface2); border-radius: 10px; padding: 2px; flex: none; }
.segments button { flex: 1; height: 32px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--t-texte2); }
.segments button.actif { background: var(--t-surface); color: var(--t-texte); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.mosaique { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 14px; overflow: hidden; }
.mosaique img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--t-surface2); }
.g-doc { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: .5px solid var(--t-trait); text-decoration: none; color: inherit; }
.g-doc:last-child { border-bottom: 0; }
.g-doc .ext { width: 36px; height: 44px; border-radius: 7px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-size: 9.5px; font-weight: 800; color: #fff; flex: none; }
.g-doc div { flex: 1; min-width: 0; }
.g-doc b { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-doc small { font-size: 12.5px; color: var(--t-texte2); }
.g-vocal { padding: 10px 14px; border-bottom: .5px solid var(--t-trait); }
.g-vocal:last-child { border-bottom: 0; }
.g-vocal small { display: block; font-size: 12px; color: var(--t-texte2); margin-bottom: 6px; }

.r-carte { width: 100%; max-width: 500px; background: var(--t-surface); color: var(--t-texte); border-radius: 20px; padding: 18px 16px 14px; display: flex; flex-direction: column; gap: 10px; animation: monte .28s cubic-bezier(.2, .9, .3, 1); }
.r-carte h2 { margin: 0 0 2px; font-size: 17px; }
.r-carte textarea, .r-carte input { border: .5px solid var(--t-trait); background: var(--t-surface2); border-radius: 12px; padding: 10px 12px; font-size: 16px; outline: none; resize: none; color: var(--t-texte); }
.r-boutons { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.r-boutons span { flex: 1; }
.r-boutons button { font-size: 16px; color: var(--t-lien); height: 40px; }
.r-boutons .danger { color: var(--rouge); }
.r-boutons .r-ok { background: linear-gradient(135deg, var(--t-moi1), var(--t-moi2)); color: #fff; padding: 0 16px; border-radius: 12px; font-weight: 600; }

/* VS Code plein écran */
.plein { position: fixed; inset: 0; z-index: 25; background: #1e1e1e; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); animation: fondu .2s; }
.plein-barre { flex: none; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 2px; background: #181818; color: #cccccc; font-size: 13px; border-bottom: 1px solid #2b2b2b; }
.plein-barre button { display: inline-flex; align-items: center; color: #8ab4f8; font-size: 14px; height: 30px; padding: 0 6px; }
.plein-barre svg { width: 20px; height: 20px; stroke-width: 2.2; }
.plein-barre span { font-weight: 600; }
.plein iframe { flex: 1; width: 100%; border: 0; background: #1e1e1e; }
.widget.large { grid-column: span 2; min-height: 110px; }