/* Exprism sur le téléphone (exprism.app/d/) — la note du jour, le calendrier, le dock.
   ⛔ PAS UN SECOND STYLE : les valeurs sont celles d'`app/static/style.css` et de DESIGN.md
   (tokens, spectre, rayons, durées, courbes), et les composants gardent LEURS noms d'Exprism
   (`.note-check`, `.np-tache-due`, `.njc-case`, `.roue-item`, `.np-date-lisible`…) : un même objet
   se dessine pareil sur l'ordinateur et sur le téléphone. Seules changent les tailles — un pouce
   n'est pas un pointeur (cibles de 44 px au moins, texte à 17 px).
   ⛔ Aucune ressource tierce : le CSP de /d/ l'interdit. Le grain est un SVG en ligne. */
:root{
  --tri-largeur: 820px;
  --tri-hauteur: 900px;
  --tri-marge: clamp(16px, 3vw, 28px);
  --tri-espace: clamp(16px, 3vw, 32px);
  --tri-scene-hauteur: 360px;

  --bg:#0c0d11; --bg2:#14161d; --line:#23262f; --line2:#2c303b;
  --txt:#e9ebf0; --dim:#7c8290; --faint:#565c69;
  --survol:color-mix(in srgb,var(--txt) 7%,transparent);
  --accent:var(--prism-violet); --accent-ink:#0b0d14; --primary-ink:#0b0d14;
  --ok:#5fd08a; --warn:#e0b35a; --err:#e87b7b; --attente:#ffb84f;
  --prism-white:#f8fbff; --prism-cyan:#78f7ff; --prism-violet:#b69cff;
  --primary:var(--prism-violet); --action:#cf4230; --action-ink:#fff;
  --act-create:var(--action); --act-create-ink:var(--action-ink);
  --act-note:var(--kind-note); --act-note-ink:#0b0d14;
  --act-task:color-mix(in srgb,var(--err) 70%,#8c1028);
  --act-task-hover:color-mix(in srgb,var(--err) 48%,#731427); --act-task-ink:#fff;
  --act-share:var(--prism-violet); --act-share-ink:#0b0d14;
  --act-confirm:var(--ok); --act-confirm-ink:#0b0d14;
  --act-open:var(--prism-cyan); --act-open-ink:#0b0d14;
  --sable:#dcbd86;   /* le sable du sablier : la journée qui s'écoule (même valeur qu'Exprism) */
  --constellation-teinte:color-mix(in srgb,var(--prism-cyan) 50%,var(--prism-violet));
  --kind-daily:#3bff00; --kind-person:#ff4d6d; --kind-video:#ff1f4b; --kind-note:#ff2ee6; --fav:#ffe500;
  --temps:var(--kind-daily); --temps-txt:color-mix(in srgb,var(--temps) 68%,var(--txt));
  /* Les seize types, aux valeurs d'`app/static/style.css` (Max, 06/10/2026 : « chacun son code couleur
     et pictogramme respectif, comme sur la version bureau »). */
  --kind-article:#8b2fff; --kind-base:#b4c8de; --kind-book:#e068b8; --kind-collection:#f2edff; --kind-description:#4d5bff;
  --kind-image:#00ff9c; --kind-periodique:#00ff30; --kind-place:#d18cff; --kind-summary:#eaff00; --kind-surligne:#f8b0c8;
  --rainbow-1:#4fb6ff; --rainbow-2:#7d8bff; --rainbow-3:#b07bff; --rainbow-4:#ff7eb3; --rainbow-5:#ffb84f;
  --rainbow-grad:linear-gradient(90deg,var(--rainbow-1),var(--rainbow-2),var(--rainbow-3),var(--rainbow-4),var(--rainbow-5));
  --rainbow-conic:conic-gradient(from -90deg,var(--rainbow-1),var(--rainbow-2),var(--rainbow-3),var(--rainbow-4),var(--rainbow-5),var(--rainbow-1));
  --prisme-grad:linear-gradient(90deg,var(--rainbow-1),var(--rainbow-2),var(--rainbow-3));
  --faisceau:linear-gradient(90deg,var(--prism-cyan),var(--prism-white),var(--prism-violet));
  --verre-fond:color-mix(in srgb,var(--bg) 88%,transparent);
  --verre-flou:blur(16px) saturate(1.25);
  --r-btn:999px; --r-ui:14px; --r-panel:18px; --r-feuille:24px;
  --dur-0:.12s; --dur-1:.17s; --dur-2:.3s; --dur-3:.52s; --dur-prisme:2.6s;
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --ease-sortie:cubic-bezier(.55,0,.8,.2);   /* ce qui QUITTE l'écran accélère (la bascule jour ⇄ calendrier) */
  /* La pastille d'un message non lu : le rouge des notifications (Max, 18/10/2026 : « tu peux y mettre
     en rouge […] quand il y a un nouveau message ») — une alerte d'arrivée, jamais un bouton. */
  --notif:#ff453a; --notif-ink:#fff;
  --ease-bounce:cubic-bezier(.34,1.85,.5,1);
  --ease-ressort:linear(0, .036, .126, .248, .385, .521, .649, .762, .857, .934, .991, 1.032, 1.058,
    1.073, 1.078, 1.076, 1.07, 1.061, 1.05, 1.04, 1.029, 1.02, 1.013, 1.006, 1.002, .998, .996,
    .994, .994, .994, .994, .995, 1);
  --font-ui:"Avenir Next","SF Pro Text","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-note:"Avenir Next","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* Le texte d'une note suit la taille de lecture d'Exprism (16 px) + 1 : un téléphone se lit
     plus loin de l'œil qu'un écran posé, et iOS zoome un champ sous 16 px. */
  --note-font-size:17px;
  /* La barre des onglets (sans la zone d'accueil d'iOS) : ce qui flotte au-dessus d'elle s'y cale. */
  --dock-h:62px;
  --txt2:#a9afbb; --kind-audio:#00e5ff; --kind-project:#0a82ff;
  --clavier:0px;
  /* LE SPECTRE QUI TOURNE, SANS FILTRE (05/10/2026). Les teintes que `hue-rotate` donne à
     `--accent` tous les 45° : une bande deux fois périodique qu'on fait GLISSER (transform, donc
     le compositeur seul) au lieu d'animer un `filter` — que Safari sur iPhone repeint à chaque
     image, bouton et flou d'arrière-plan compris : c'était la saccade du dock. */
  --spectre:linear-gradient(90deg,#9fb7ff,#d9a6fb,#ff9fcf,#fba695,#cfb76f,#95c873,#6fcf9f,#73c8d9,
    #9fb7ff,#d9a6fb,#ff9fcf,#fba695,#cfb76f,#95c873,#6fcf9f,#73c8d9,#9fb7ff);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);touch-action:manipulation}
/* ⛔ LA PAGE NE BOUGE JAMAIS DE CÔTÉ (Max, 05/10) : rien ne déborde en largeur, et la journée ne
   se laisse défiler que verticalement (`pan-y`) — le balayage horizontal reste à nous : il
   change de jour (`balayer`, qui écoute les touches sans jamais faire défiler). Les rangées qui
   défilent de côté (événements, amis, filtres) le disent elles-mêmes. */
html,body{overflow-x:hidden;overscroll-behavior:none;max-width:100%}
/* ⛔ PAS DE SCROLL DANS LE VIDE (10/2026, iPhone : tirer au-delà du contenu montrait du vide
   avec rebond). `overscroll-behavior:none` verrouille le rebond vertical ET horizontal ; la page
   fait toujours au moins la hauteur visible (`#cp-app{min-height:100dvh}`). */
#cp-app{overflow-x:hidden;max-width:100vw}
.cp-jour{overflow-x:hidden;touch-action:pan-y}
.cp-jour button,.cp-jour a,.cp-jour summary,.cp-jour [contenteditable]{touch-action:pan-y}
.cp-evenements,.cp-personnes,.cp-filtres{touch-action:pan-x pan-y}
.cp-evenements button,.cp-evenements a{touch-action:pan-x pan-y}
/* ⛔ Aucun double tape ne zoome : chaque élément touchable le dit au navigateur. */
button,a,input,textarea,summary,[contenteditable]{touch-action:manipulation}
body{margin:0;min-height:100dvh;color:var(--txt);background:var(--bg);font:16px/1.5 var(--font-ui);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-text-size-adjust:100%}
body.cp-fige{overflow:hidden}
#cp-app{min-height:100vh;min-height:100dvh}
.dp-grain{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.16;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[hidden]{display:none !important}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
button{font:inherit;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--prism-cyan);outline-offset:2px}

/* ── La tête : la journée, ses deux portes, le calendrier ───────────────────────────────── */
/* ⛔ PAS DE FLOU EN HAUT (Max, 05/10 : « il faut enlever le flou sur la web app, au top ») —
   PUIS FLOU RÉINTRODUIT (mission 10/2026, iPhone 13 mini : marge et flou sous le notch). Le
   compromis : un verre TEINTÉ à 86 % (la date reste lisible), flou + saturation qui adoucissent
   la barre d'état, et 16 px d'air au-dessus du contenu. La tête continue de partir AVEC le
   contenu (décision du 06/10 inchangée) : le flou ne coûte que le temps où elle est visible. */
/* ⛔ TROIS COLONNES ÉGALES, PAS UN FLEX (Max, 06/10/2026 : « que tout soit mieux centré »). En
   flex, la pilule se centrait ENTRE le logo (26 px) et le rond du calendrier (44 px) : 9 px à
   gauche du vrai centre, et sur ordinateur le rond masqué gardait sa place. `1fr auto 1fr` pose
   la date sur l'axe exact de la colonne de lecture, quels que soient ses voisins. */
.cp-tete{position:relative;z-index:30;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;
  width:100%;max-width:680px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 16px) 16px 12px;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25)}
.cp-tete>.cp-moi-btn{justify-self:start}
.cp-tete>.cp-tete-actions{justify-self:end}
.cp-tete::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;opacity:.55;background:var(--faisceau)}
/* La date tient le centre de la tête ; sa ligne fine (relatif · semaine) dessous, dans la tête. */
body .cp-tete{padding-bottom:24px}
.cp-tete>.np-jours-nav{justify-self:center}
/* Les flèches ne servent que la journée ; ailleurs, la pilule seule (elle ramène au jour). */
body:not([data-vue="jour"])[data-vue] .cp-tete .np-jour-pas{visibility:hidden;pointer-events:none}
.np-jours-nav{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0}
.np-date-bloc{position:relative;display:flex;justify-content:center}
/* La ligne FINE sous la pilule : ce que ce jour est pour nous, et sa semaine. Posée sous la pilule
   sans pousser ses voisins (les flèches restent centrées sur la date, pas sur l'ensemble). */
.np-date-sous{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none;
  font-size:11px;font-weight:400;line-height:1.2;letter-spacing:.02em;color:var(--faint);font-variant-numeric:tabular-nums}
.np-jour-pas{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;
  border-radius:12px;border:1px solid transparent;background:transparent;color:var(--faint);cursor:pointer;
  transition:color var(--dur-1) var(--ease-soft),background var(--dur-1) var(--ease-soft),transform var(--dur-1) var(--ease-bounce)}
.np-jour-pas svg{width:17px;height:17px;stroke-width:2}
.np-jour-pas:active{color:var(--txt);background:var(--bg2);transform:scale(.92)}
/* La pilule de la date : rouge quand c'est AUJOURD'HUI (`--kind-person`, la loi du 27/08). Elle
   PORTE la date (« lun. 5 oct. »), et rien d'autre : le jour relatif et la semaine vivent dessous. */
.np-date-lisible{flex:none;min-height:38px;display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;line-height:1.1;color:var(--dim);white-space:nowrap;cursor:pointer;
  padding:4px 16px;border-radius:var(--r-btn);background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  transition:background var(--dur-2) var(--ease-soft),color var(--dur-2) var(--ease-soft),transform var(--dur-1) var(--ease-bounce)}
.np-date-jour{font-size:15px;font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums}
.np-date-lisible:active{transform:scale(.96)}
.np-date-lisible.auj{color:#fff;font-weight:750;border-color:color-mix(in srgb,var(--kind-person) 70%,transparent);
  background:color-mix(in srgb,var(--kind-person) 82%,transparent);
  box-shadow:0 2px 10px color-mix(in srgb,var(--kind-person) 30%,transparent)}
.np-date-lisible.auj .np-date-jour{color:#fff}
/* L'horloge de la journée : la pilule du Mac, version bureau seulement. Le contour de sable est un
   trait SVG qui épouse la pilule et se remplit sur 24 h (`pathLength` 1000 → 1 unité = 1/1000 de jour). */
.np-horloge-jour{position:relative;flex:none;display:inline-flex;align-items:center;margin-right:6px;
  padding:5px 12px;border-radius:var(--r-btn);border:1px solid var(--line);cursor:default;
  background:color-mix(in srgb,var(--sable) 7%,transparent);
  font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--txt)}
.np-horloge-jour[hidden]{display:none}
.np-horloge-jour>svg{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none}
.np-horloge-jour>svg rect{fill:none;stroke:var(--sable);stroke-width:2;stroke-linecap:round;
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--sable) 55%,transparent))}
/* Le rond du calendrier porte la teinte de la note du jour (`--kind-daily`), comme dans la roue. */
.cp-rond-leger{flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:50%;
  border:1px solid var(--line2);background:var(--bg2);color:var(--dim);cursor:pointer;
  transition:transform var(--dur-1) var(--ease-soft),color var(--dur-1) var(--ease-soft)}
.cp-rond-leger svg{width:18px;height:18px}
.cp-rond-leger:active{transform:scale(.9);color:var(--txt)}

/* ── La journée ─────────────────────────────────────────────────────────────────────────── */
.cp-vue{position:relative;z-index:1;width:100%;max-width:680px;margin:0 auto;
  padding:6px 18px calc(env(safe-area-inset-bottom) + var(--dock-h) + 30px)}
/* Le jour est DANS la pilule de la tête : sur le téléphone, le grand titre ne répète plus la date
   (il reste lu par les lecteurs d'écran). Sur ordinateur, la place ne manque pas : il s'affiche. */
.cp-titre{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.cp-jour.cp-glisse .cp-titre,.cp-jour.cp-glisse .cp-contenu{animation:cp-glisse-in calc(var(--dur-3) * 1.2) var(--ease-soft) both}
.cp-jour.cp-glisse[data-sens="precedent"] .cp-titre,.cp-jour.cp-glisse[data-sens="precedent"] .cp-contenu{animation-name:cp-glisse-in-g}
@keyframes cp-glisse-in{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes cp-glisse-in-g{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
/* L'état d'envoi : une PASTILLE flottante au-dessus du dock, à gauche — elle ne pousse jamais la
   journée, ne croise pas le message court (en haut) ni le rond des envois (à droite). */
.dp-etat{position:fixed;left:max(16px,calc(env(safe-area-inset-left) + 12px));bottom:calc(env(safe-area-inset-bottom) + var(--dock-h) + 18px);z-index:60;
  margin:0;width:max-content;max-width:calc(100vw - 96px);padding:7px 14px;border-radius:var(--r-btn);border:1px solid var(--line2);background:var(--bg2);
  color:var(--faint);font-size:12.5px;font-weight:600;line-height:1.35;pointer-events:none;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.9);animation:cp-etat-in var(--dur-2) var(--ease-soft) both}
.dp-etat:empty{display:none}
@keyframes cp-etat-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Le rond des envois flotte en bas à droite : le bas de la journée garde de quoi passer dessous. */
body:has(#cp-envois-rond:not([hidden])) .cp-jour{padding-bottom:calc(env(safe-area-inset-bottom) + var(--dock-h) + 84px)}
.dp-releve:empty{display:none}
.dp-etat[data-ton="attente"]{color:var(--attente)}
.dp-etat[data-ton="envoi"]{color:var(--prism-cyan)}
.dp-alerte{margin:0 0 12px;padding:10px 14px;border-radius:var(--r-ui);border:1px solid var(--err);color:var(--err);font-size:14px}

/* La note : la lecture d'Exprism (`.np-view`), au corps du téléphone. */
.cp-note{margin:6px 0 4px}
.np-view{color:var(--txt);font-family:var(--font-note);font-size:var(--note-font-size);line-height:1.6;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
.np-view h1{font-size:1.45em;margin:.5em 0 .25em;line-height:1.2}
.np-view h2{font-size:1.22em;margin:.8em 0 .25em;line-height:1.25}
.np-view h3{font-size:1.08em;margin:.7em 0 .25em}
.np-view p{margin:.2em 0}
.np-view ul,.np-view ol{padding-left:1.3em;margin:.3em 0}
.np-view li{margin:.12em 0}
.np-view a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 42%,transparent)}
.np-view code{background:var(--bg);border:1px solid var(--line2);border-radius:5px;padding:1px 5px;font-size:.88em}
.np-view hr{border:0;height:1px;margin:1em 0;background:var(--line2)}
.np-view mark{border-radius:3px;padding:0 .12em}
.np-view blockquote{margin:.7em 0;padding:12px 16px;border:1px solid var(--line2);border-radius:12px;background:var(--bg2);color:var(--dim)}
.cp-code{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.5 ui-monospace,"SF Mono",Menlo,monospace;
  background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r-ui);padding:12px 14px;margin:.6em 0}
/* Une porte du carnet que CETTE page ne sait pas ouvrir (carnet autonome) : elle ne se déguise pas
   en lien de note — pas de magenta, un filet pointillé (07/10/2026). */
.cp-lien-carnet{color:var(--dim);border-bottom:1px dashed var(--line2)}
.cp-img{max-width:100%;height:auto;border-radius:10px;display:block;margin:8px 0}
.cp-image-absente{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--r-btn);
  border:1px dashed var(--line2);color:var(--faint);font-size:.82em}
.cp-tronque{color:var(--faint);font-size:14px;font-style:italic}
/* Le texte prisme : le flux unique d'Exprism (même dégradé, même tempo, même sens). */
.txt-prisme{background-color:transparent;background-image:var(--rainbow-grad);background-size:240% auto;background-position:0% 50%;
  animation:gradFlow var(--dur-prisme) linear infinite;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@keyframes gradFlow{to{background-position:-240% 50%}}
@keyframes rainbowSpin{to{filter:hue-rotate(360deg)}}
@keyframes rainbowSpinHot{to{filter:hue-rotate(360deg) saturate(1.6) brightness(1.08)}}

/* Les tâches de la note : le rond rouge d'Exprism, vert une fois validé — même dessin, mêmes
   valeurs (`.note-check`), une cible de 44 px autour d'un rond de 20. */
.note-tasks{list-style:none;padding-left:0;margin:8px 0;display:grid;gap:2px}
.note-task{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:start;gap:4px;min-height:36px;padding:3px 0}
.note-check{appearance:none;position:relative;width:20px;height:20px;margin:4px 0 0 6px;padding:0;border-radius:50%;
  border:1.8px solid var(--act-task);background:color-mix(in srgb,var(--act-task) 9%,transparent);
  color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:background var(--dur-1) var(--ease-soft),border-color var(--dur-1) var(--ease-soft),transform var(--dur-1) var(--ease-bounce)}
.note-check::before{content:"";position:absolute;inset:-12px;border-radius:50%}
.note-check:active{transform:scale(.88)}
.note-task.done>.note-check{border-color:var(--ok);background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 11%,transparent),0 0 11px color-mix(in srgb,var(--ok) 20%,transparent)}
.note-task.done>.note-check::after{content:"✓";font-size:12px;font-weight:800;line-height:1;color:var(--accent-ink)}
.note-check[data-pop],.np-tache-rond[data-pop]{animation:note-task-checked var(--dur-3) var(--ease-bounce)}
@keyframes note-task-checked{0%{transform:scale(.88)}56%{transform:scale(1.12)}100%{transform:scale(1)}}
.note-check:disabled{opacity:.45;cursor:default}
.note-task-text{min-width:0;padding-top:1px;transition:color var(--dur-2) var(--ease-soft)}
.note-task.done>.note-task-text{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--faint) 70%,transparent);color:var(--faint)}
.note-task.annulee>.note-task-text{text-decoration:line-through;color:var(--faint)}
.note-task.annulee>.note-check{border-style:dashed;opacity:.5}
.note-task[data-attente]>.note-check{box-shadow:0 0 0 3px color-mix(in srgb,var(--prism-cyan) 18%,transparent)}
.cp-en-vol{opacity:.72}
.cp-en-vol>.note-check{border-style:dashed;border-color:var(--prism-cyan);background:transparent;animation:cp-pouls 1.4s var(--ease-soft) infinite}
@keyframes cp-pouls{0%,100%{opacity:.55}50%{opacity:1}}
.np-task-age{align-self:center;flex:none;font-size:11px;font-weight:700;line-height:1;padding:4px 8px;border-radius:var(--r-btn);color:var(--dim);
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));background:color-mix(in srgb,var(--accent) 7%,transparent);white-space:nowrap}
.np-task-quand{color:var(--temps-txt);border-color:color-mix(in srgb,var(--kind-daily) 28%,var(--line));
  background:color-mix(in srgb,var(--kind-daily) 7%,transparent)}

/* ── « Prévu ce jour », « À reprendre » : les pilules de tâche d'Exprism ───────────────────── */
.cp-bloc{margin:26px 0 0;animation:dp-entree calc(var(--dur-3) * 1.5) var(--ease-soft) both}
.cp-bloc-titre{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.cp-compte{font-size:10.5px;letter-spacing:0;padding:1px 7px;border-radius:var(--r-btn);background:var(--survol);color:var(--dim)}
.cp-pilules{display:flex;flex-wrap:wrap;gap:7px}
.np-tache-due{display:inline-flex;align-items:center;gap:9px;max-width:100%;min-width:0;min-height:40px;padding:7px 12px 7px 9px;
  border:1px solid var(--line);border-radius:var(--r-btn);background:transparent;color:var(--txt);font-size:14.5px;
  transition:background var(--dur-1) var(--ease-soft),border-color var(--dur-1) var(--ease-soft)}
.np-tache-due>.np-tache-rond{position:relative;width:20px;height:20px;flex:none;margin:0;padding:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:#fff;border:1.8px solid var(--act-task);background:color-mix(in srgb,var(--act-task) 9%,transparent);
  transition:background var(--dur-1) var(--ease-soft),border-color var(--dur-1) var(--ease-soft),transform var(--dur-1) var(--ease-bounce)}
.np-tache-due>.np-tache-rond::before{content:"";position:absolute;inset:-12px;border-radius:50%}
.np-tache-due>.np-tache-rond:active{transform:scale(.88)}
.np-tache-due>.np-tache-rond:disabled{opacity:.5;cursor:default}
.np-tache-due.fait>.np-tache-rond{border-color:var(--ok);background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 11%,transparent),0 0 11px color-mix(in srgb,var(--ok) 20%,transparent)}
.np-tache-due.fait>.np-tache-rond::after{content:"✓";font-size:12px;font-weight:800;line-height:1;color:var(--accent-ink)}
.np-tache-due>em{font-style:normal;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-tache-due.fait>em{text-decoration:line-through;color:var(--faint)}
.np-tache-due.retard{border-color:color-mix(in srgb,var(--err) 34%,var(--line))}
.np-tache-due em a{color:var(--accent);text-decoration:none}
.np-tache-source{display:inline-flex;align-items:center;gap:4px;flex:none;max-width:40%;padding:1px 4px;border-radius:5px;color:var(--faint);font-size:11px;font-weight:600}
.np-tache-source svg{width:12px;height:12px}
.np-tache-source span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-tache-de-projet{--accent:var(--kind-video)}
.np-tache-de-projet>.np-tache-source{color:var(--kind-video);border:1px solid color-mix(in srgb,var(--kind-video) 30%,transparent);background:color-mix(in srgb,var(--kind-video) 9%,transparent)}

/* ── États qui DISENT leur cause ────────────────────────────────────────────────────────── */
.cp-vide{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin:22px 0 6px;padding:26px 20px;
  border:1px dashed var(--line2);border-radius:var(--r-panel);color:var(--dim);animation:dp-entree calc(var(--dur-3) * 1.5) var(--ease-soft) both}
.cp-vide strong{color:var(--txt);font-size:16px}
.cp-vide p{margin:0;font-size:14px;max-width:34ch}
.cp-vide-ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--kind-daily);margin-bottom:4px;
  background:color-mix(in srgb,var(--kind-daily) 8%,transparent);border:1px solid color-mix(in srgb,var(--kind-daily) 26%,var(--line2))}
.cp-carte-info{display:flex;gap:12px;align-items:flex-start;margin:8px 0 14px;padding:14px;border-radius:var(--r-panel);
  background:color-mix(in srgb,var(--prism-cyan) 6%,var(--bg2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--prism-cyan) 26%,transparent);
  animation:dp-entree calc(var(--dur-3) * 1.5) var(--ease-soft) both}
.cp-carte-info>svg{color:var(--prism-cyan);filter:drop-shadow(0 0 6px rgba(120,247,255,.45));margin-top:2px}
.cp-carte-info strong{display:block;font-size:15px;margin-bottom:3px}
.cp-carte-info p{margin:0;color:var(--dim);font-size:14px}

/* ── Les envois (la file de la page de dépôt) ───────────────────────────────────────────── */
.cp-envois-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dp-ligne{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-ui);background:var(--bg2);border:1px solid var(--line);
  animation:dp-entree calc(var(--dur-3) * 1.5) var(--ease-soft) both;
  transition:opacity var(--dur-2) var(--ease-soft),transform var(--dur-2) var(--ease-soft),border-color var(--dur-2) var(--ease-soft)}
.dp-ligne[data-vu]{animation:none}
.dp-ligne[data-part]{opacity:0;transform:translateX(24px) scale(.98)}
.dp-ligne[data-etat="recu"]{border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}
.dp-ligne .dp-btn-leger{width:40px;height:40px;padding:0;display:grid;place-items:center;border:0;background:transparent;color:var(--dim);border-radius:50%}
.dp-ligne .dp-btn-leger svg{width:16px;height:16px}
.dp-pastille{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--survol);color:var(--accent);flex:none}
/* ⛔ L'icône ne naît qu'à un VRAI changement d'état (`data-neuf`, posé par `majLigne`) : une
   vérification de fond qui redessine la liste ne la rejoue pas. */
.dp-pastille svg{width:20px;height:20px}
.dp-pastille[data-neuf] svg{animation:dp-naitre var(--dur-3) var(--ease-soft) both}
.dp-ligne[data-etat="recu"] .dp-pastille{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.dp-ligne[data-etat="recu"] .dp-pastille[data-neuf] path{stroke-dasharray:24;stroke-dashoffset:24;animation:dp-tracer var(--dur-3) var(--ease-soft) .1s forwards}
.dp-ligne[data-etat="erreur"] .dp-pastille{color:var(--err)}
.dp-ligne[data-etat="attente"] .dp-pastille{color:var(--attente)}
.dp-ligne[data-etat="envoi"] .dp-pastille,.dp-ligne[data-etat="chiffrement"] .dp-pastille{color:var(--prism-cyan);box-shadow:0 0 14px -4px var(--prism-cyan)}
.dp-ligne-corps{flex:1;min-width:0}
.dp-ligne-nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.dp-ligne-etat{font-size:12.5px;color:var(--dim)}
.dp-ligne[data-etat="recu"] .dp-ligne-etat{color:var(--ok)}
.dp-ligne[data-etat="erreur"] .dp-ligne-etat{color:var(--err)}
.dp-ligne[data-etat="attente"] .dp-ligne-etat{color:var(--attente)}
.dp-barre{height:2px;margin-top:6px;border-radius:2px;background:var(--line);overflow:hidden}
.dp-barre i{display:block;height:100%;width:0;background:var(--faisceau);box-shadow:0 0 8px var(--prism-cyan);transition:width .3s var(--ease-soft)}
.dp-ligne[data-etat="recu"] .dp-barre,.dp-ligne[data-etat="erreur"] .dp-barre{display:none}
.dp-pct{flex:none;min-width:3.4em;text-align:right;font-size:17px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--prism-cyan)}
.dp-pct:empty{display:none}
.dp-ligne[data-etat="attente"] .dp-pct{color:var(--attente)}
.dp-ligne:is([data-etat="envoi"],[data-etat="chiffrement"]) .dp-barre{height:4px}
/* Ce que l'ordinateur en fait (transcription, résumé, prêt) ; prête, la ligne s'ouvre sur sa note. */
.dp-ligne:is([data-mac="import"],[data-mac="transcription"],[data-mac="resume"]) .dp-ligne-etat{color:var(--prism-cyan)}
.dp-ligne[data-mac="pret"] .dp-ligne-etat{color:var(--ok);font-weight:600}
.dp-ligne.dp-ouvrable .dp-ligne-corps{cursor:pointer}
.dp-ligne.dp-ouvrable .dp-ligne-nom{color:var(--txt);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}

.dp-pied{margin-top:36px;color:var(--faint);font-size:12.5px}
body[data-mode="relie"] .dp-pied-autonome,body[data-mode="autonome"] .dp-pied-relie{display:none}
.dp-pied .cp-btn svg{width:16px;height:16px}
.dp-pied p{margin:0 0 10px}

/* ── Boutons (pilules) et champs ────────────────────────────────────────────────────────── */
.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:var(--r-btn);
  border:1px solid var(--line2);background:var(--bg2);color:var(--txt);font-weight:600;font-size:15px;cursor:pointer;
  transition:transform var(--dur-1) var(--ease-soft),filter var(--dur-1) var(--ease-soft),box-shadow var(--dur-2) var(--ease-soft)}
.cp-btn svg{width:18px;height:18px}
.cp-btn:active{transform:scale(.97)}
.cp-btn-petit{min-height:38px;padding:0 16px;font-size:14px}
/* Une action garde sa couleur selon son verbe : ouvrir en cyan, partager en violet, confirmer en
   vert et créer en ton chaud. Les boutons restent dans leur couleur fixe. */
.cp-btn-primaire{--cp-action-color:var(--act-open);--cp-action-ink:var(--act-open-ink);
  background:var(--cp-action-color);color:var(--cp-action-ink);border-color:transparent;font-weight:700;
  text-shadow:0 1px 1.5px rgba(0,0,0,.18);
  box-shadow:0 2px 10px color-mix(in srgb,var(--cp-action-color) 32%,transparent);position:relative;isolation:isolate;overflow:hidden}
.cp-btn-primaire svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.cp-btn-primaire:active{filter:saturate(1.12) brightness(1.04);box-shadow:0 7px 20px color-mix(in srgb,var(--cp-action-color) 42%,transparent)}
.cp-btn-primaire.cp-btn-partager{--cp-action-color:var(--act-share);--cp-action-ink:var(--act-share-ink)}
.cp-btn-primaire.cp-btn-confirmer{--cp-action-color:var(--act-confirm);--cp-action-ink:var(--act-confirm-ink)}
.cp-btn-primaire.cp-btn-creer{--cp-action-color:var(--act-create);--cp-action-ink:var(--act-create-ink)}
.cp-btn-primaire.cp-btn-tache{--cp-action-color:var(--act-task);--cp-action-ink:var(--act-task-ink)}
.cp-btn-primaire.cp-btn-acheter{--cp-action-color:var(--primary);--cp-action-ink:var(--primary-ink)}
.cp-btn-primaire:disabled{opacity:.55}
.cp-champ{width:100%;min-height:50px;font:inherit;font-size:17px;color:var(--txt);background:var(--bg2);
  border:1px solid var(--line2);border-radius:var(--r-btn);padding:0 18px;outline:none;
  transition:border-color var(--dur-1) var(--ease-soft),box-shadow var(--dur-2) var(--ease-soft)}
.cp-champ:focus{border-color:var(--prism-cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--prism-cyan) 14%,transparent)}
/* Le champ d'une TÂCHE porte la couleur de la tâche (le rond rouge d'Exprism), pas le cyan
   générique, et son anneau n'est plus coupé par le bord de la feuille. */
.cp-champ-rangee{display:flex;gap:8px;align-items:stretch}
.cp-champ-rangee .cp-champ{flex:1;min-width:0}
.cp-champ-rangee .cp-btn{flex:none;align-self:center;white-space:nowrap}
.cp-champ-tache:focus{border-color:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 16%,transparent)}
.cp-champ:focus-visible,.cp-note-saisie:focus-visible{outline:none}
.cp-indice{margin:0;color:var(--faint);font-size:13px}
.cp-reception{padding:6px 2px 0;font-variant-numeric:tabular-nums}
.cp-reception[data-etat="erreur"]{color:var(--err)}

/* ── Le calendrier : la grille `njc` d'Exprism — une VUE (onglet), plus une feuille ───────── */
.cp-calendrier>.cp-vue-titre{margin:6px 0 16px}
.njc-nav{display:flex;align-items:center;gap:8px;margin:2px 4px 14px}
.njc-mois{flex:1;font-size:22px;font-weight:700;letter-spacing:-.01em}
.njc-mois span{color:var(--dim);font-weight:600}
.njc-prev,.njc-next,.njc-auj{border:1px solid var(--line2);background:var(--bg);color:var(--dim);border-radius:12px;cursor:pointer;
  transition:border-color var(--dur-2) var(--ease-soft),color var(--dur-2) var(--ease-soft),transform var(--dur-1) var(--ease-bounce)}
.njc-prev,.njc-next{width:40px;height:40px;display:grid;place-items:center;padding:0;order:-1}
.njc-next{order:0}
.njc-prev svg,.njc-next svg{width:17px;height:17px;stroke-width:2}
.njc-auj{height:40px;padding:0 12px;font-size:13px;font-weight:600;
  border-color:color-mix(in srgb,var(--kind-daily) 22%,var(--line));
  background:color-mix(in srgb,var(--kind-daily) 5%,var(--bg2));color:var(--temps-txt)}
.njc-prev:active,.njc-next:active{transform:scale(.92);border-color:var(--accent);color:var(--txt)}
.njc-auj:active{transform:scale(.92);border-color:var(--kind-daily);color:var(--temps-txt)}
.cp-cal-nav .njc-mois{order:-2}
.njc-sem,.njc-grille{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.njc-sem{margin-bottom:6px}
.njc-sem span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);text-align:center}
.cp-cal-grille.cp-glisse{animation:cp-glisse-in calc(var(--dur-3) * 1.2) var(--ease-soft) both}
.cp-cal-grille.cp-glisse[data-sens="precedent"]{animation-name:cp-glisse-in-g}
.njc-case{position:relative;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;
  padding:7px 2px 6px;border:1px solid var(--line);border-radius:11px;background:var(--bg);color:var(--dim);cursor:pointer;overflow:hidden;
  transition:border-color var(--dur-2) var(--ease-soft),transform var(--dur-2) var(--ease-bounce),background var(--dur-2) var(--ease-soft)}
.njc-case:active{transform:scale(.94)}
.njc-num{font-size:16px;font-weight:700;color:var(--dim);font-variant-numeric:tabular-nums}
.njc-case.n1{background:color-mix(in srgb,var(--kind-daily) 3%,var(--bg))}
.njc-case.n2{background:color-mix(in srgb,var(--kind-daily) 6%,var(--bg));border-color:color-mix(in srgb,var(--kind-daily) 16%,var(--line))}
.njc-case.n3{background:color-mix(in srgb,var(--kind-daily) 9%,var(--bg));border-color:color-mix(in srgb,var(--kind-daily) 24%,var(--line))}
.njc-case.n3 .njc-num,.njc-case.n2 .njc-num{color:var(--txt)}
.njc-case.hors{opacity:.34}
.njc-case.futur{background:transparent;border-style:dashed}
.njc-case.auj{box-shadow:inset 0 0 0 1.5px var(--kind-daily)}
.njc-case.auj .njc-num{color:#fff}
/* Aujourd'hui : un contour vert fixe, lisible dans le calendrier principal. */
.njc-spectre{position:absolute;inset:1px;border-radius:10px;padding:2px;background:var(--kind-daily);pointer-events:none;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.njc-case.sel{border-color:color-mix(in srgb,var(--kind-daily) 40%,var(--line));box-shadow:0 0 0 2px color-mix(in srgb,var(--kind-daily) 12%,transparent)}
.cp-marques{display:flex;gap:3px;align-items:center;min-height:6px}
.cp-marques i{display:block;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.cp-marques i.fait{background:var(--ok)}
.cp-marques .cp-marque-note{width:10px;height:3px;border-radius:2px;background:var(--kind-note);box-shadow:0 0 6px color-mix(in srgb,var(--kind-note) 28%,transparent)}
.cp-agenda{margin:18px 4px 0;padding-top:16px;border-top:1px solid var(--line);animation:dp-entree calc(var(--dur-3) * 1.2) var(--ease-soft) both}
.cp-agenda-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cp-agenda-tete strong{font-size:17px}
.cp-agenda-vide{margin:0;color:var(--faint);font-size:14px}

/* ── Les feuilles (tâche, note, vocal, lien, ami) : le verre d'Exprism, le geste d'iOS ───── */
/* ⛔ LE VOILE ASSOMBRIT, IL NE FLOUTE PAS (18/10/2026, Max sur iPhone 13 mini : « il y a un voile flou
   au-dessus […] c'est moche, trouve une solution »). Au-dessus d'une feuille, la bande de page
   floutée faisait une buée sous la barre d'état — sur un petit écran, elle se voit. Un fond sombre,
   net, suffit à dire « derrière » ; les feuilles d'écriture, elles, prennent tout l'écran. */
.cp-voile-feuille{position:fixed;inset:0;z-index:80;background:color-mix(in srgb,#05070c 72%,transparent);animation:roue-voile var(--dur-2) var(--ease-soft) both}
.cp-voile-feuille.cp-part{animation:roue-voile-part var(--dur-2) var(--ease-soft) both;pointer-events:none}
/* La feuille suit le CLAVIER : `--clavier` (posé par ui.js depuis `visualViewport`) la lève de la
   hauteur du clavier, et `--vue-h` borne sa hauteur à ce qui reste VISIBLE. */
.cp-feuille{position:fixed;left:0;right:0;bottom:var(--clavier,0px);z-index:90;max-height:calc(var(--vue-h,100dvh) - env(safe-area-inset-top) - 12px);display:flex;flex-direction:column;
  margin:0 auto;max-width:680px;padding:6px 18px calc(env(safe-area-inset-bottom) + 18px);
  background:color-mix(in srgb,var(--bg2) 72%,var(--bg));
  border:1px solid var(--line2);border-bottom:0;border-radius:var(--r-feuille) var(--r-feuille) 0 0;will-change:transform;
  box-shadow:0 -24px 60px -20px rgba(0,0,0,.85);animation:cp-monte calc(var(--dur-3) * .82) var(--ease-soft) both;
  transition:transform var(--dur-1) var(--ease-soft)}
.cp-feuille.cp-pleine{height:calc(var(--vue-h,100dvh) - env(safe-area-inset-top) - 12px)}
body.cp-clavier .cp-feuille{padding-bottom:10px;border-radius:var(--r-feuille) var(--r-feuille) 0 0;transition:bottom var(--dur-1) var(--ease-soft)}
body.cp-clavier .cp-feuille .cp-indice{display:none}
body.cp-clavier .cp-feuille .cp-ajoutees{max-height:22vh}
.cp-feuille.cp-part{animation:cp-descend var(--dur-2) var(--ease-soft) both}
@keyframes cp-monte{from{transform:translateY(100%)}to{transform:none}}
@keyframes cp-descend{from{transform:none}to{transform:translateY(100%)}}
.cp-poignee{width:44px;height:5px;margin:4px auto 6px;border-radius:3px;background:var(--line2);touch-action:none;cursor:grab;flex:none;
  box-shadow:0 0 0 12px transparent}
.cp-feuille-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 14px;flex:none}
.cp-feuille-tete h2{margin:0;flex:1;min-width:0;font-size:19px;font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-feuille-actions{display:flex;gap:8px}
.cp-feuille-corps{display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto;padding:4px 4px 2px;margin:-4px -4px 0}
/* ⛔ DANS UNE FEUILLE QUI DÉFILE, RIEN NE RÉTRÉCIT PAR DÉFAUT (08/10/2026, Max : « les rétroliens sont
   ratatinés sur mobile »). Le `flex-shrink:1` implicite comprimait le corps d'une note longue à 50 px :
   son texte débordait PAR-DESSUS les rétroliens. Ce qui doit défiler en dedans (le fil d'une
   conversation, la note neuve) le DIT plus bas par son propre `flex:1`. */
.cp-feuille-corps>*{flex-shrink:0}
.cp-feuille-pied{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;flex:none}
/* La légende d'un envoi : ce qui part se voit, le commentaire s'écrit dessous. */
.cp-legende-medias{display:flex;flex-direction:column;gap:8px}
.cp-legende-medias img,.cp-legende-medias video{width:100%;max-height:220px;object-fit:contain;border-radius:var(--r-ui);background:#000}
.cp-legende-fichier{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r-ui);background:var(--bg2);font-weight:600}
.cp-legende-fichier svg{width:20px;height:20px;flex:none}
.cp-legende-champ{margin-top:8px;min-height:58px;resize:none}
.cp-tache-saisie{position:relative;display:flex;align-items:center}
.cp-tache-saisie .note-check{position:absolute;left:12px;margin:0;pointer-events:none}
.cp-tache-saisie .cp-champ{padding-left:46px}
.cp-note-corps{flex:1}
.cp-note-saisie{flex:1;min-height:40vh;width:100%;resize:none;font-family:var(--font-note);font-size:var(--note-font-size);line-height:1.6;color:var(--txt);
  background:transparent;border:0;outline:none;padding:4px 2px}
.cp-note-saisie::placeholder{color:var(--faint)}
/* La note vocale : le prisme qui écoute (le spectre tourne : l'app TRAVAILLE). */
.cp-vocale{align-items:center;text-align:center;padding:8px 0 4px}
.cp-onde{position:relative;width:132px;height:132px;display:grid;place-items:center;margin:6px 0 4px;color:var(--prism-white)}
.cp-onde span{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;
  background:var(--rainbow-conic) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:cp-onde 2.4s var(--ease-soft) infinite;opacity:0;will-change:transform,opacity}
.cp-onde span:nth-child(2){animation-delay:.8s}
.cp-onde span:nth-child(3){animation-delay:1.6s}
.cp-onde svg{width:46px;height:46px;stroke-width:1.5;filter:drop-shadow(0 0 10px rgba(120,247,255,.7))}
@keyframes cp-onde{0%{transform:scale(.55) rotate(0);opacity:.95}100%{transform:scale(1.15) rotate(270deg);opacity:0}}
.cp-chrono{font:600 34px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.cp-vocale .cp-feuille-pied{width:100%}
.cp-vocale .cp-feuille-pied .cp-btn-primaire{flex:1}
/* Coupé par la veille (07/10/2026) : le prisme cesse d'écouter, le chrono se fige sur le temps
   VRAIMENT enregistré, la phrase dit la cause — ambre : une limite, pas une erreur. */
.cp-vocal-dit{margin:6px 0 2px;max-width:32ch;min-height:2.8em;text-wrap:balance}
.cp-vocale.cp-coupe .cp-onde span{animation:none;opacity:.2;transform:scale(.9)}
.cp-vocale.cp-coupe .cp-onde svg{filter:none;opacity:.5}
.cp-vocale.cp-coupe .cp-chrono{color:var(--attente)}
.cp-vocale.cp-coupe .cp-vocal-dit{color:var(--txt)}
.cp-vocale .cp-feuille-pied{flex-wrap:wrap}
.cp-vocal-question{flex:1 1 100%;text-align:center;color:var(--txt);margin:0 0 4px}
/* Le rouge est réservé à ce qui SUPPRIME (DESIGN.md) : jeter un vocal. */
.cp-btn-danger{background:color-mix(in srgb,var(--err) 16%,transparent);color:var(--err);border-color:color-mix(in srgb,var(--err) 42%,transparent)}
/* Les vocaux gardés : chacun son lecteur et ses deux gestes. */
.cp-vocal-garde{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}
.cp-vocal-garde:last-child{border-bottom:0}
.cp-vocal-garde-tete{display:flex;flex-direction:column;gap:2px}
.cp-vocal-garde-tete small{color:var(--dim);font-size:13px}
/* Dans la conversation, la barre d'écriture DEVIENT la barre d'enregistrement (comme Messages) :
   le point qui respire porte le spectre (ce qui vit), jamais un rouge d'alarme. */
.cp-compose.cp-rec{align-items:center}
.cp-rec-centre{flex:1;min-width:0;min-height:44px;display:flex;align-items:center;gap:10px;padding:0 16px;
  border-radius:var(--r-btn);background:var(--bg2);border:1px solid var(--line2)}
.cp-rec-point{flex:none;width:10px;height:10px;border-radius:50%;background:var(--rainbow-conic);
  box-shadow:0 0 12px color-mix(in srgb,var(--prism-violet) 70%,transparent);animation:cp-rec-pouls 1.4s var(--ease-soft) infinite}
@keyframes cp-rec-pouls{50%{opacity:.35;transform:scale(.8)}}
.cp-rec-chrono{font:600 16px/1 ui-monospace,"SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.cp-rec-dit{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--dim)}
.cp-rec-coupe .cp-rec-point{animation:none;background:var(--attente);box-shadow:none}
.cp-rec-coupe .cp-rec-dit,.cp-rec-coupe .cp-rec-chrono{color:var(--attente)}
.cp-rec-jeter[data-sur]{color:var(--err)}
.cp-bulle.cp-etat-envoi .cp-bulle-etat{color:var(--dim)}
.cp-bulle.cp-etat-envoi{opacity:.82}
/* Les amis : une rangée par ami, un geste par nature d'envoi. */
.cp-amis{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cp-amis li{animation:dp-entree calc(var(--dur-3) * 1.4) var(--ease-soft) both}
.cp-ami{width:100%;display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 14px 8px 8px;border-radius:var(--r-ui);
  border:1px solid var(--line);background:var(--bg2);cursor:pointer;text-align:left;transition:transform var(--dur-1) var(--ease-soft),border-color var(--dur-1) var(--ease-soft)}
.cp-ami:active{transform:scale(.98);border-color:var(--prism-violet)}
.cp-ami>svg{color:var(--faint);width:18px;height:18px}
.cp-ami-nom{flex:1;min-width:0;display:flex;flex-direction:column;font-size:16px;font-weight:600}
.cp-ami-nom small{font-size:12px;font-weight:500;color:var(--ok)}
.cp-ami-gestes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.cp-ami-geste{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0;border-radius:var(--r-ui);border:1px solid var(--line2);
  background:var(--bg2);color:var(--prism-cyan);cursor:pointer;font-size:12px;transition:transform var(--dur-1) var(--ease-soft)}
.cp-ami-geste span{color:var(--txt)}
.cp-ami-geste:active{transform:scale(.94);border-color:var(--prism-cyan)}

/* ── Le message court ───────────────────────────────────────────────────────────────────── */
/* Le retour d'un geste apparaît TOUJOURS au même endroit : sous la tête (Max, 05/10), au-dessus
   de tout — même d'une feuille ouverte ou du clavier. */
/* Sous la tête (~80 px + encoche) : le message ne la recouvre jamais. */
.cp-toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 100px);z-index:120;transform:translateX(-50%);
  max-width:min(92vw,520px);padding:10px 16px;border-radius:var(--r-btn);border:1px solid var(--line2);
  background:var(--bg2);
  font-size:14px;font-weight:600;color:var(--prism-white);text-align:center;box-shadow:0 16px 36px -16px rgba(0,0,0,.9)}
.cp-toast.cp-montre{animation:cp-toast-in var(--dur-3) var(--ease-soft) both}
.cp-toast.cp-part{animation:cp-toast-out var(--dur-2) var(--ease-soft) both}
.cp-toast[data-ton="erreur"]{border-color:color-mix(in srgb,var(--err) 50%,var(--line2));color:var(--err)}
/* Une invitation (l'offre fondateur) : le texte se touche, la croix referme. */
.cp-toast[data-action]{display:flex;align-items:center;gap:4px;padding:4px 4px 4px 14px;
  border-color:color-mix(in srgb,var(--prism-violet) 40%,var(--line2))}
.cp-toast-action{flex:1;min-width:0;min-height:40px;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.cp-toast-fermer{flex:none;width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--dim);cursor:pointer}
.cp-toast-fermer svg{width:16px;height:16px}
@keyframes cp-toast-in{from{opacity:0;transform:translate(-50%,-14px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes cp-toast-out{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-8px)}}

/* ── Bandeaux d'installation, d'invitation, page non reliée ─────────────────────────────── */
.dp-installer{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px;padding:14px;border-radius:var(--r-panel);
  background:color-mix(in srgb,var(--prism-cyan) 6%,var(--bg2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--prism-cyan) 26%,transparent);
  animation:dp-entree calc(var(--dur-3) * 1.5) var(--ease-soft) .2s both;transition:opacity var(--dur-2) var(--ease-soft),transform var(--dur-2) var(--ease-soft)}
.dp-installer[data-part]{opacity:0;transform:translateY(-8px) scale(.98)}
.dp-installer-ico{color:var(--prism-cyan);filter:drop-shadow(0 0 6px rgba(120,247,255,.45))}
.dp-installer-corps{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--dim)}
.dp-installer-corps strong{color:var(--txt);font-size:14.5px}
.dp-installer-corps b{color:var(--txt);font-weight:600}
.dp-partager{width:18px;height:18px;vertical-align:-3px;color:var(--accent);margin:0 2px}
.dp-installer-actions{display:flex;gap:8px;margin-top:4px}
.dp-invitation{background:color-mix(in srgb,var(--prism-violet) 9%,var(--bg2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--prism-violet) 32%,transparent)}
.dp-non-appaire{position:relative;z-index:1;max-width:520px;margin:calc(env(safe-area-inset-top) + 40px) 16px 0;padding:22px;border-radius:var(--r-panel);
  border:1px solid var(--line2);background:var(--bg2);animation:dp-entree calc(var(--dur-3) * 1.5) var(--ease-soft) both}
@media (min-width:552px){.dp-non-appaire{margin-inline:auto}}
.dp-non-appaire img{border-radius:10px;filter:drop-shadow(0 0 12px rgba(120,247,255,.35));margin-bottom:6px}
.dp-non-appaire p{margin:0 0 10px}
.dp-non-appaire strong{color:var(--prism-cyan)}
.dp-invit-code{font:600 26px/1.2 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.12em;text-align:center;
  background:var(--faisceau);-webkit-background-clip:text;background-clip:text;color:transparent;margin:6px 0 12px}

@keyframes dp-entree{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes dp-naitre{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
/* L'apparition DOUCE (06/10/2026) : une opacité, un souffle d'échelle — jamais de dépassement. */
@keyframes cp-doux{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes roue-voile{from{opacity:0}to{opacity:1}}
@keyframes roue-voile-part{from{opacity:1}to{opacity:0}}
@keyframes dp-tracer{to{stroke-dashoffset:0}}

/* ⛔ Le mouvement est un agrément, jamais une condition d'usage (DESIGN.md §5) : réduit, tout
   s'affiche d'un coup, les auras restent, les rotations et les glissements s'arrêtent. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .njc-case.auj::after,.txt-prisme,.cp-onde span,.cp-btn-primaire,.cp-rec-point,
  .cp-tuile#cp-note .cp-tuile-ico::before,.cp-tuile#cp-vocal .cp-tuile-ico::before,
  .cp-tuile#cp-tache .cp-tuile-ico::before{animation:none !important}
  .cp-onde span{opacity:.6}
  .dp-ligne[data-etat="recu"] .dp-pastille[data-neuf] path{stroke-dashoffset:0}
}

/* ══ 05/10/2026 — écrire, tiroirs, portes du carnet, événements, envoi direct, app autonome ══ */

/* Les événements du calendrier, AU-DESSUS de la note : une rangée qui défile sous le pouce. */
.cp-evenements{display:flex;gap:8px;overflow-x:auto;margin:2px -18px 12px;padding:2px 18px 4px;scrollbar-width:none;scroll-snap-type:x proximity}
.cp-evenements::-webkit-scrollbar{display:none}
/* ⛔ LA LIGNE D'ÉVÉNEMENT D'EXPRISM, À LA LETTRE (Max, 14/10/2026) : mêmes valeurs que
   `.njc-evenement` du bureau (app/static/style.css) — teinte rouge `--err` 11 %, bordure 30 %,
   heure rouge, pastille « note » à droite. Seule la TAILLE s'adapte au doigt (cible ≥ 32 px). */
.njc-evenement{--evt:var(--err,#ff5f73);flex:none;scroll-snap-align:start;display:flex;align-items:center;gap:4px;min-width:0;max-width:78vw;
  padding:2px 4px 2px 10px;border:1px solid color-mix(in srgb,var(--evt) 30%,transparent);border-radius:8px;
  background:color-mix(in srgb,var(--evt) 11%,transparent);color:var(--evt);font-size:14px;font-weight:650;line-height:1.3;
  animation:dp-entree calc(var(--dur-3) * 1.4) var(--ease-soft) both;animation-delay:calc(var(--i,0) * 40ms)}
.njc-evenement-ouvrir{display:flex;align-items:center;gap:7px;flex:1;min-width:0;overflow:hidden;
  padding:5px 0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:default}
a.njc-evenement-ouvrir,button.njc-evenement-ouvrir{cursor:pointer}
.njc-evenement time{flex:none;font-size:12px;font-variant-numeric:tabular-nums;color:var(--evt)}
.njc-evenement em{font-style:normal;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.njc-evenement-note{display:grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border:0;
  border-radius:7px;background:color-mix(in srgb,var(--evt) 12%,transparent);color:var(--evt);cursor:pointer;opacity:.9}
.njc-evenement-note svg{width:16px;height:16px}
.njc-evenement-note:active{opacity:1;background:color-mix(in srgb,var(--evt) 22%,transparent)}
.njc-evenement-note:disabled{opacity:.45;cursor:wait}
.njc-evenement-ouvrir:focus-visible,.njc-evenement-note:focus-visible{outline:2px solid var(--evt);outline-offset:1px}
.njc-evenement-fondateur{--evt:var(--prism-violet);padding-right:12px}
.cp-agenda-evts{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.cp-agenda-evts .njc-evenement{max-width:none}
.cp-marques .cp-marque-evt{width:6px;height:6px;border-radius:2px;background:var(--prism-cyan)}

/* Écrire dans la note du jour : une ligne d'appel, discrète, toujours à la fin de la note. */
/* ⛔ PLUS DE CADRE EN POINTILLÉS POUR ÉCRIRE (Max, 06/10/2026 : « très moche » ; « qu'on comprenne
   qu'on peut écrire librement »). La note EST une page : de l'air dessous, le curseur de texte
   partout, et une dernière ligne fantôme, du texte d'invitation et rien d'autre — comme Notes. */
.cp-note-libre{min-height:max(34vh,220px);cursor:text;padding-bottom:12px}
.cp-ecrire.cp-v-suite{display:block;width:100%;min-height:1.9em;margin:2px 0 0;padding:2px 0;border:0;background:transparent;
  color:var(--faint);font-size:inherit;line-height:1.6;text-align:left;cursor:text;opacity:.75;
  transition:opacity var(--dur-1) var(--ease-soft),color var(--dur-1) var(--ease-soft)}
.cp-ecrire.cp-v-suite:active{opacity:1;color:var(--dim)}
.cp-ecrire.cp-v-suite:focus-visible{outline:none;color:var(--dim)}
/* La ligne vide qu'on écrit porte l'invitation, et la ligne fantôme s'efface (une seule invitation). */
.cp-v-texte.cp-edite.cp-blanc::before{content:attr(data-vide);color:var(--faint);opacity:.75;pointer-events:none}
.cp-vive:has(.cp-edite.cp-blanc)>.cp-v-suite{display:none}
/* Un titre se replie : le chevron vit dans la marge, le titre garde son alignement. */
.cp-vl-h1,.cp-vl-h2,.cp-vl-h3{display:flex;align-items:baseline}
.cp-v-plier{flex:none;align-self:center;width:22px;height:22px;margin:0 4px 0 -4px;padding:0;display:grid;place-items:center;
  border:0;border-radius:50%;background:transparent;color:var(--faint);cursor:pointer;opacity:.55;
  transition:opacity var(--dur-1) var(--ease-soft),transform var(--dur-2) var(--ease-soft),color var(--dur-1) var(--ease-soft)}
.cp-v-plier::before{content:"";width:7px;height:7px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.cp-v-plier[aria-expanded="false"]{transform:rotate(-90deg);opacity:.9;color:var(--dim)}
.cp-v-plier:active{color:var(--txt)}
.cp-vl-h1>.cp-v-texte,.cp-vl-h2>.cp-v-texte,.cp-vl-h3>.cp-v-texte{flex:1;min-width:0}
.cp-v-ligne.cp-v-replie[data-plie]::after{content:attr(data-plie);align-self:center;margin-left:8px;min-width:20px;height:18px;padding:0 6px;
  display:inline-grid;place-items:center;border-radius:var(--r-btn);font-size:11px;font-weight:600;color:var(--faint);
  background:color-mix(in srgb,var(--txt) 6%,transparent);font-variant-numeric:tabular-nums}
.cp-v-ligne.cp-v-replie[data-plie="0"]::after{display:none}
/* Le menu « / » : sous la ligne, dans le flux (jamais rogné), au verre des menus d'Exprism. */
.cp-v-menu{display:flex;flex-direction:column;gap:2px;width:min(300px,100%);margin:4px 0 8px;padding:6px;border:1px solid var(--line2);
  border-radius:var(--r-panel);background:color-mix(in srgb,var(--bg2) 92%,transparent);box-shadow:0 18px 44px -20px rgba(0,0,0,.9);
  animation:dp-entree var(--dur-2) var(--ease-soft) both}
.cp-v-menu-item{display:grid;grid-template-columns:26px auto 1fr;align-items:baseline;gap:8px;width:100%;min-height:38px;padding:7px 10px;
  border:0;border-radius:10px;background:transparent;color:var(--txt);text-align:left;cursor:pointer;
  transition:transform var(--dur-1) var(--ease-soft),background var(--dur-1) var(--ease-soft)}
.cp-v-menu-item.on{background:color-mix(in srgb,var(--prism-cyan) 12%,transparent)}
.cp-v-menu-item:active{transform:scale(.98);background:color-mix(in srgb,var(--prism-cyan) 16%,transparent)}
.cp-v-menu-ico{color:var(--dim);font-weight:700;text-align:center}
.cp-v-menu-item b{font-size:14px;font-weight:600}
.cp-v-menu-item small{font-size:12px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Une note liée qui va naître sur l'ordinateur : déjà une porte, encore en pointillé de lumière. */
/* ⛔ UN SEUL DÉFILEMENT DANS UNE FEUILLE D'ÉCRITURE (11/10/2026). Max : « il y a un espèce de scroll
   qui fonctionne pas bien et ça nous met pas directement sur la note pour pouvoir écrire ». La feuille
   d'écriture (une note neuve, une tâche) portait DEUX boîtes capables de défiler l'une dans l'autre :
   le corps de la feuille — qui défile dans toutes les autres feuilles — et la note elle-même.
   Mesuré sous WebKit (`tests/sonde_note_neuve_webkit.cjs`) : le geste partait dans la mauvaise, et le
   clavier découvrait le haut de la feuille pendant qu'on écrit en bas. Désormais la NOTE est le seul
   défilement de ces feuilles : le corps ne défile plus et lui laisse la hauteur qui reste. */
.cp-editeur .cp-feuille-corps{overflow:visible}
.cp-editeur .cp-feuille-corps>.cp-vive{flex:1;min-height:0;overflow-y:auto}
/* Une note neuve : la première ligne fait le titre, et le dit par sa taille (comme Notes). */
.cp-note-neuve .cp-vive>.cp-v-ligne:first-child>.cp-v-texte{font-size:1.32em;font-weight:700;line-height:1.3}
/* ⛔ UN LIEN INTERNE SE DESSINE COMME SUR L'ORDINATEUR (Max, 06/10/2026 : « ça fait un truc vert et on
   ne peut pas cliquer dessus »). `a.note-link` d'Exprism : le texte en magenta (`--kind-note`), un
   filet dessous, un fond au toucher. Le `[[…]]` qui attend sa note a le même dessin, en pointillé. */
.np-view a.note-link,a.note-link,.cp-lien-note,.cp-sous-note{color:var(--kind-note);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--kind-note) 40%,transparent);
  padding:0 1px;border-radius:3px;cursor:pointer;transition:background var(--dur-0) var(--ease-soft)}
.cp-sous-note{border-bottom-style:dashed}
:is(a.note-link,.cp-lien-note,.cp-sous-note):active{background:color-mix(in srgb,var(--kind-note) 14%,transparent)}
.cp-note .cp-corps{cursor:text}
.cp-editeur .cp-note-saisie{min-height:0}

/* ── Sous la note, un seul rond (tiroirs, prévu, à reprendre, créé, reçu, clore la journée) ── */
.cp-dessous{margin:26px 0 8px}
.cp-dessous-rond{display:flex;align-items:center;gap:10px;max-width:100%;margin:0 auto;padding:4px 12px 4px 4px;border:0;border-radius:var(--r-btn);
  background:transparent;color:var(--faint);font-size:12.5px;cursor:pointer;transition:color var(--dur-1) var(--ease-soft),background var(--dur-1) var(--ease-soft)}
.cp-dessous-ico{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line2);
  background:var(--bg2);color:var(--dim);transition:transform var(--dur-2) var(--ease-soft)}
.cp-dessous-ico svg{width:14px;height:14px;transform:rotate(90deg)}
.cp-dessous.ouvert .cp-dessous-ico{transform:rotate(180deg)}
.cp-dessous-resume{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-dessous-rond:active{color:var(--txt)}
.cp-dessous-corps{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--dur-3) var(--ease-soft),opacity var(--dur-2) var(--ease-soft)}
.cp-dessous.ouvert .cp-dessous-corps{grid-template-rows:1fr;opacity:1}
.cp-dessous-dedans{min-height:0;overflow:hidden}
.cp-dessous-dedans>:first-child{margin-top:12px}

/* Les tâches d'un jour, rangées sous leur titre (note, projet) ; chaque titre se replie. */
.cp-groupes{display:flex;flex-direction:column;gap:6px}
.cp-groupe>summary{display:flex;align-items:center;gap:8px;min-height:32px;padding:2px 4px;list-style:none;cursor:pointer;color:var(--dim);font-size:13px;font-weight:600}
.cp-groupe>summary::-webkit-details-marker{display:none}
.cp-groupe>summary::before{content:"";flex:none;width:6px;height:6px;margin:0 3px 0 1px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(-45deg);transition:transform var(--dur-1) var(--ease-soft)}
.cp-groupe[open]>summary::before{transform:rotate(45deg)}
.cp-groupe>summary svg{width:15px;height:15px;color:var(--faint)}
.cp-groupe>summary span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-groupe>summary em{margin-left:auto;font-style:normal;font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums}
.cp-groupe>.cp-pilules{padding:2px 0 4px 18px}

/* Les tiroirs : « Tâches terminées », « Tâches annulées » — ceux d'Exprism, sous la note. */
.cp-tiroir{margin:14px 0 4px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-ui);background:color-mix(in srgb,var(--bg2) 78%,transparent)}
.cp-tiroir>summary{display:flex;align-items:center;gap:7px;min-height:30px;cursor:pointer;color:var(--dim);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.045em;list-style:none}
.cp-tiroir>summary::-webkit-details-marker{display:none}
.cp-tiroir>summary::before{content:"›";font-size:17px;line-height:1;transition:transform var(--dur-1)}
.cp-tiroir[open]>summary::before{transform:rotate(90deg)}
.cp-tiroir>summary em{margin-left:auto;font-style:normal;font-variant-numeric:tabular-nums}
.cp-tiroir>div{display:grid;gap:3px;margin-top:7px}
.np-done-task{position:relative;display:flex;align-items:center;gap:9px;width:100%;min-height:40px;padding:7px;border:1px solid transparent;border-radius:var(--r-ui);
  background:transparent;color:var(--faint);font:inherit;font-size:14px;text-align:left;cursor:pointer;animation:np-done-task-arrive var(--dur-3) var(--ease-soft) both}
.np-done-task:active{background:color-mix(in srgb,var(--ok) 6%,var(--bg));border-color:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--txt)}
.np-cancelled-tasks .np-done-task{cursor:default}
@keyframes np-done-task-arrive{0%{opacity:0;transform:translateY(6px) scale(.985)}100%{opacity:1;transform:none}}
.note-check-mini{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--accent-ink);background:var(--ok)}
.np-cancelled-tasks .note-check-mini{background:transparent;color:var(--faint);border:1.5px dashed var(--line2)}
.np-done-main{flex:1;min-width:0;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--faint) 70%,transparent)}
.np-task-status-date{margin-left:auto;flex:none;color:var(--faint);font-size:11px;white-space:nowrap}

/* Les portes du carnet : une note reliée, un média — touchées, elles s'ouvrent. */
.cp-porte{display:inline-flex;align-items:center;gap:6px;max-width:100%;vertical-align:middle;margin:1px 0;padding:2px 10px 2px 6px;border-radius:var(--r-btn);
  font:inherit;font-size:.92em;cursor:pointer;transition:transform var(--dur-1) var(--ease-soft)}
.cp-porte>span{min-width:0;overflow-wrap:anywhere;text-align:left}
/* ⛔ PLUS AUCUNE PORTE ROGNÉE (08/10/2026, Max : « des boutons raccourcis […] des trucs ratatinés ») :
   un nom long passe à la ligne. Au milieu d'une phrase, un passage ne montre que « ▶ 0:42 » (le nom
   au survol) ; seule sur sa ligne (`cp-seul`, posée par `enLigne`), la porte est une carte. */
.cp-porte-t{flex:none;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cp-porte:not(.cp-seul,.cp-seul>*)>.cp-porte-nom,.cp-porte-nom:empty{display:none}
:is(.cp-porte.cp-seul,.cp-seul>.cp-porte){display:flex;width:fit-content;margin:4px 0;padding:6px 12px 6px 6px;gap:10px;border-radius:var(--r-ui);line-height:1.35}
:is(.cp-porte.cp-seul,.cp-seul>.cp-porte) img{width:56px;height:36px;border-radius:6px}
:is(.cp-porte.cp-seul,.cp-seul>.cp-porte)>.cp-porte-nom{color:var(--dim)}
.cp-porte svg{width:15px;height:15px;flex:none}
.cp-porte:active{transform:scale(.96)}
.cp-porte-note{color:var(--kind-note);border:1px solid color-mix(in srgb,var(--kind-note) 34%,transparent);background:color-mix(in srgb,var(--kind-note) 8%,transparent)}
.cp-porte-media{color:var(--kind-video);border:1px solid color-mix(in srgb,var(--kind-video) 34%,transparent);background:color-mix(in srgb,var(--kind-video) 8%,transparent)}
.cp-porte-media img{width:30px;height:22px;object-fit:cover;border-radius:5px;flex:none}
/* Un fichier ou un dossier de l'ordinateur : une pastille neutre, qui dit où il est au toucher. */
.cp-porte-local{color:var(--dim);border:1px solid var(--line2);background:var(--bg2)}
.cp-image-attente{display:block;height:120px;margin:8px 0;border-radius:10px;background:linear-gradient(90deg,var(--bg2),color-mix(in srgb,var(--bg2) 70%,var(--line2)),var(--bg2));
  background-size:200% 100%;animation:cp-reflet 1.4s linear infinite;color:transparent;font-size:0}
@keyframes cp-reflet{to{background-position:-200% 0}}
.cp-img{cursor:zoom-in}

/* Lire une note, regarder un média. */
.cp-lecteur .cp-corps{padding-bottom:20px}
.cp-media{align-items:stretch;text-align:center}
.cp-media-scene{display:grid;place-items:center;min-height:180px;border-radius:var(--r-panel);background:var(--bg);overflow:hidden}
.cp-media-plein{display:block;max-width:100%;max-height:60vh;margin:0 auto;border-radius:var(--r-ui);background:#000}
.cp-audio{width:100%;margin:6px 0}
/* Le média d'une note ouverte (ancien `media` à part, ou cité en ligne `#m=tel-…`). */
.cp-note-medias{display:flex;flex-direction:column;gap:8px}
.cp-note-medias:empty{display:none}


/* Les tâches ajoutées à la suite, dans la feuille. */
.cp-ajoutees{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:30vh;overflow-y:auto}
.cp-ajoutees:empty{display:none}
.cp-ajoutees li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--dim);animation:dp-entree var(--dur-3) var(--ease-soft) both}
.cp-ajoutees .note-check{margin:0;pointer-events:none;border-style:dashed;border-color:var(--prism-cyan);background:transparent}

/* Ce qui a été créé sur ce téléphone, ce qu'on a reçu. */
.cp-elements{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.cp-element{width:100%;display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px 8px 8px;border-radius:var(--r-ui);border:1px solid var(--line);
  background:var(--bg2);color:var(--txt);text-align:left;cursor:pointer;transition:transform var(--dur-1) var(--ease-soft)}
.cp-element:active{transform:scale(.98)}
.cp-element>svg{color:var(--faint);width:16px;height:16px}
.cp-element-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--kind-note) 10%,transparent);color:var(--kind-note)}
.cp-element-vocale .cp-element-ico{background:color-mix(in srgb,var(--kind-audio) 12%,transparent);color:var(--kind-audio)}
.cp-element-photo .cp-element-ico{background:color-mix(in srgb,var(--kind-video) 10%,transparent);color:var(--kind-video)}
.cp-element-corps{flex:1;min-width:0;display:flex;flex-direction:column}
.cp-element-corps b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-element-corps small{font-size:12px;color:var(--faint)}

/* Clore la journée : l'appel du soir. */
.cp-clore{display:flex;align-items:center;gap:12px;width:100%;margin:26px 0 0;padding:14px 16px;border-radius:var(--r-panel);cursor:pointer;text-align:left;
  border:1px solid color-mix(in srgb,var(--prism-violet) 34%,var(--line));background:color-mix(in srgb,var(--prism-violet) 7%,var(--bg2));color:var(--txt);
  animation:dp-entree calc(var(--dur-3) * 1.5) var(--ease-soft) both;transition:transform var(--dur-1) var(--ease-soft)}
.cp-clore>svg{color:var(--prism-violet)}
.cp-clore>span{display:flex;flex-direction:column}
.cp-clore b{font-size:16px}
.cp-clore small{font-size:12.5px;color:var(--dim)}
.cp-clore:active{transform:scale(.98)}

/* Envoyer : deux voies — le lien direct, l'ami. */
.cp-choix{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 14px 10px 10px;border-radius:var(--r-ui);border:1px solid var(--line2);
  background:var(--bg2);color:var(--txt);text-align:left;cursor:pointer;transition:transform var(--dur-1) var(--ease-soft),border-color var(--dur-1) var(--ease-soft)}
.cp-choix:active{transform:scale(.98);border-color:var(--prism-cyan)}
.cp-choix>svg{color:var(--faint);width:16px;height:16px}
.cp-choix-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--prism-cyan);background:color-mix(in srgb,var(--prism-cyan) 10%,transparent)}
.cp-choix-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cp-choix-corps b{font-size:16px}
.cp-choix-corps small{font-size:12.5px;color:var(--dim)}
.cp-lien-direct{align-items:center;text-align:center}
.cp-direct-anneau{position:relative;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;color:var(--prism-white);background:var(--bg);isolation:isolate;margin:6px 0}
.cp-direct-anneau::before{content:"";position:absolute;inset:0;border-radius:50%;padding:3px;background:var(--rainbow-conic);z-index:-1;animation:cp-tourne 3.2s linear infinite;will-change:transform;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cp-direct-anneau svg{width:34px;height:34px}
.cp-direct-texte{margin:0;color:var(--dim);font-size:14.5px;max-width:36ch}
.cp-lien-direct .cp-champ{font-size:14px;text-align:center}
.cp-lien-direct .cp-btn{width:100%}

/* Réglages. */
.cp-reglages h3{margin:8px 0 0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.cp-segments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:var(--r-btn);background:var(--bg);border:1px solid var(--line)}
.cp-segment{min-height:38px;border-radius:var(--r-btn);border:0;background:transparent;color:var(--dim);font-size:13.5px;font-weight:600;cursor:pointer}
.cp-segment.on{background:var(--bg2);color:var(--txt);box-shadow:inset 0 0 0 1px var(--line2)}

/* La carte fondateur (app autonome) : une SURFACE (`--r-ui`), discrète — un contour au spectre de
   la marque, la ligne qui ouvre la feuille, et le bouton qui mène au site. */
.cp-fondateur{display:flex;flex-direction:column;gap:10px;width:100%;margin:26px 0 0;padding:12px 12px 14px;border-radius:var(--r-ui);
  background:var(--bg2);color:var(--txt);position:relative;isolation:isolate;
  animation:dp-entree calc(var(--dur-3) * 1.5) var(--ease-soft) .1s both}
.cp-fondateur::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--rainbow-grad);z-index:-1;opacity:.6;
  pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cp-fondateur-ouvrir{display:flex;align-items:center;gap:12px;width:100%;padding:2px 0;border:0;background:transparent;color:inherit;
  text-align:left;cursor:pointer;transition:transform var(--dur-1) var(--ease-soft)}
.cp-fondateur-ouvrir:active{transform:scale(.985)}
.cp-fondateur-ouvrir>svg{color:var(--faint);width:16px;height:16px}
.cp-fondateur-acheter{width:100%;text-decoration:none}
.cp-fondateur-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--prism-white);background:var(--bg)}
.cp-fondateur-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cp-fondateur-corps b{font-size:15.5px}
.cp-fondateur-corps small{font-size:12.5px;color:var(--dim)}
.cp-fd-intro{margin:0;color:var(--dim);font-size:15px}
.cp-fd-points{display:grid;gap:8px}
.cp-fd-point{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:var(--r-ui);background:var(--bg2);border:1px solid var(--line);
  animation:dp-entree calc(var(--dur-3) * 1.4) var(--ease-soft) both;animation-delay:calc(var(--i,0) * 60ms)}
.cp-fd-point b{font-size:15px}
.cp-fd-point span{font-size:13.5px;color:var(--dim)}
.cp-fd-titre{margin:10px 0 2px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.cp-fd-site-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cp-fd-site-liste a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-ui);border:1px solid var(--line);color:var(--txt);text-decoration:none}
.cp-fd-site-liste b{font-size:14px}
.cp-fd-site-liste span{font-size:12.5px;color:var(--dim)}
.cp-fd-offre{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin:12px 0 6px;padding:20px 16px;border-radius:var(--r-panel);
  background:color-mix(in srgb,var(--prism-violet) 7%,var(--bg2));border:1px solid color-mix(in srgb,var(--prism-violet) 30%,var(--line))}
.cp-fd-offre p{margin:0}
.cp-fd-offre .cp-btn{width:100%;margin-top:8px;text-decoration:none}
.cp-fd-kicker{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.cp-fd-prix b{font-size:40px;font-weight:750;letter-spacing:-.02em}
.cp-fd-prix span{color:var(--dim);font-size:16px}
/* Les places et la date : des faits, pas une alarme — la couleur du texte, sans clignotement. */
.cp-fd-places{font-size:14px;font-weight:650;color:var(--txt)}
.cp-fd-essai{font-size:13.5px;color:var(--ok)}
.cp-fd-close h3{margin:0;font-size:17px}

/* Grand écran tactile (tablette) : les onglets restent sous la colonne de lecture. */
@media (min-width:720px){
  .cp-onglets{max-width:680px;margin:0 auto;border-radius:22px 22px 0 0}
}
/* Paysage sur téléphone : moins de hauteur, les onglets se tassent. */
@media (max-height:480px) and (orientation:landscape){
  .cp-onglet span{display:none}
  .cp-onglet{min-height:40px}
  .cp-tete{padding-top:calc(env(safe-area-inset-top) + 6px)}
}
@media (prefers-reduced-motion:reduce){
  .cp-direct-anneau::before{animation:none !important}
  .cp-envois,.cp-envois-rond,.dp-etat{animation:none !important;transition:none !important}
}
.cp-recu-texte{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--font-note);font-size:var(--note-font-size);line-height:1.6;padding:4px 2px}

/* ── La note du jour, éditable en place (note_vive.js) : le texte d'Exprism, un curseur ─────── */
.cp-vive{display:flex;flex-direction:column;gap:1px}
/* La note peut défiler dans une hauteur bornée ; ses lignes gardent leur hauteur naturelle au lieu
   de se comprimer pour tenir dans la fenêtre. */
.cp-vive>*{flex-shrink:0}
.cp-v-ligne{position:relative;min-height:28px}
.cp-v-texte{display:block;min-width:2ch;min-height:1.6em;outline:none;white-space:pre-wrap;overflow-wrap:anywhere;
  -webkit-user-select:text;user-select:text;border-radius:4px}
/* ⛔ PLUS DE LAVIS VERT SUR LA LIGNE QU'ON ÉCRIT (Max, 09/10/2026 : « enlève le rectangle vert qui
   encadre le texte quand on écrit »). Rien ne le remplace : ce que dit la ligne en cours, c'est le
   curseur (ci-dessous) et la ligne fantôme « Écrire » — pas la couleur d'un TYPE. Le vert reste le
   code couleur de la note du jour PARTOUT AILLEURS (.njc-case.auj, .cp-v-date.pose, #cp-o-jour,
   .njc-auj, .cp-vide-ico) : là, c'est du contenu, pas un état de saisie. */
/* ── Le curseur d'écriture : le spectre de la marque, comme sur l'ordinateur ────────────────
   ⛔ L'ANIMATION NE TOURNE QUE SUR LE CHAMP QUI A LE FOCUS (06/10/2026, mesure : 13 % → 6 % d'un
   cœur). `caret-color` n'est pas animable par le compositeur : la poser sur tous les champs
   recalculait le style de chacun à chaque image, sans le moindre curseur visible. Les cinq arrêts
   sont exactement `--rainbow-1..5` : une seconde palette serait l'écart nommé le 25/08. */
@keyframes rainbowCaret{
  0%{caret-color:var(--rainbow-1)}20%{caret-color:var(--rainbow-2)}40%{caret-color:var(--rainbow-3)}
  60%{caret-color:var(--rainbow-4)}80%{caret-color:var(--rainbow-5)}100%{caret-color:var(--rainbow-1)}}
:is(.cp-v-texte[contenteditable="true"],.cp-note-saisie,.cp-champ,[contenteditable="true"],input,textarea){
  caret-color:var(--prism-cyan)}
:is(.cp-v-texte[contenteditable="true"],.cp-note-saisie,.cp-champ,[contenteditable="true"],input,textarea):focus{
  animation:rainbowCaret 3.6s linear infinite}
@media (prefers-reduced-motion:reduce){
  :is(.cp-v-texte[contenteditable="true"],.cp-note-saisie,.cp-champ,[contenteditable="true"],input,textarea):focus{
    animation:none}}
.cp-vl-h1 .cp-v-texte{font-size:1.45em;font-weight:700;line-height:1.25;margin:.4em 0 .15em}
.cp-vl-h2 .cp-v-texte{font-size:1.22em;font-weight:700;line-height:1.3;margin:.6em 0 .15em}
.cp-vl-h3 .cp-v-texte{font-size:1.08em;font-weight:700;margin:.5em 0 .1em}
.cp-vl-puce,.cp-vl-num{padding-left:1.3em}
.cp-vl-puce::before{content:"";position:absolute;left:.4em;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--dim)}
.cp-vl-num::before{content:attr(data-n);position:absolute;left:0;top:0;color:var(--dim);font-variant-numeric:tabular-nums}
.cp-vl-citation{margin:.2em 0;padding:4px 12px;border-left:3px solid var(--line2);color:var(--dim)}
.cp-vl-vide .cp-v-texte{min-height:1.2em}
.note-task.cp-v-ligne{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto auto;align-items:start;gap:4px;min-height:36px;padding:3px 0}
/* La flèche de niveau (08/10/2026) : ↳ fait une sous-tâche ; retournée, elle remonte. Discrète au
   repos, nette sous le doigt ou la souris ; éteinte (et qui dit pourquoi) quand rien n'est possible. */
.cp-v-niveau{align-self:center;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;
  border-radius:var(--r-btn);background:transparent;color:var(--dim);opacity:.55;cursor:pointer;
  transition:opacity var(--dur-1) var(--ease-soft),color var(--dur-1) var(--ease-soft),background var(--dur-1) var(--ease-soft)}
.cp-v-niveau svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--dur-2) var(--ease-soft)}
.cp-v-niveau.is-sous svg{transform:scaleX(-1)}
.cp-v-niveau:active:not(:disabled){opacity:1;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.cp-v-niveau:disabled{opacity:.2;cursor:default}
.note-task.cp-v-ligne:focus-within .cp-v-niveau:not(:disabled){opacity:.9}
@media (hover:hover) and (pointer:fine){
  .cp-v-niveau{opacity:0}
  .note-task.cp-v-ligne:hover .cp-v-niveau:not(:disabled),.cp-v-niveau:focus-visible{opacity:.85}
  .note-task.cp-v-ligne:hover .cp-v-niveau:disabled{opacity:.25}
  .cp-v-niveau:hover:not(:disabled){color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
}
@media (prefers-reduced-motion:reduce){ .cp-v-niveau,.cp-v-niveau svg{transition:none} }
.note-task.cp-v-ligne.done>.cp-v-texte{text-decoration:line-through;color:var(--faint)}
.note-task.cp-v-ligne.done>.note-check{border-color:var(--ok);background:var(--ok)}
.note-task.cp-v-ligne.done>.note-check::after{content:"✓";font-size:12px;font-weight:800;line-height:1;color:var(--accent-ink)}
/* La date d'une tâche : une pastille ; la toucher ouvre le calendrier du téléphone (reprogrammer
   = un tap). Sans date, la pastille n'apparaît que sur la ligne qu'on écrit. */
.cp-v-date{position:relative;align-self:center;display:inline-flex;align-items:center;min-width:30px;height:26px;padding:0 9px;border-radius:var(--r-btn);
  font-size:11.5px;font-weight:700;color:var(--dim);white-space:nowrap;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));background:color-mix(in srgb,var(--accent) 7%,transparent)}
.cp-v-date.pose{color:var(--temps-txt);border-color:color-mix(in srgb,var(--kind-daily) 30%,var(--line));
  background:color-mix(in srgb,var(--kind-daily) 7%,transparent)}
.cp-v-date:not(.pose){opacity:0;border-style:dashed;width:30px;padding:0;justify-content:center}
.cp-v-date:not(.pose)::after{content:"";width:12px;height:12px;border:1.6px solid var(--dim);border-radius:3px;border-top-width:3px}
.note-task.cp-v-ligne:focus-within .cp-v-date:not(.pose){opacity:1}
.cp-v-choix{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}

/* ── Envoyer : la feuille de partage (partage_ui.js) ──────────────────────────────────────── */
.cp-ap{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r-panel);background:var(--bg2);border:1px solid var(--line)}
.cp-ap-vignette{width:52px;height:52px;flex:none;border-radius:12px;display:grid;place-items:center;overflow:hidden;color:var(--prism-cyan);background:var(--bg)}
.cp-ap-vignette img{width:100%;height:100%;object-fit:cover}
.cp-ap-corps{min-width:0;display:flex;flex-direction:column;gap:2px}
.cp-ap-corps b{font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-ap-corps small{font-size:12.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-envoi-titre{margin:6px 0 0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.cp-personnes{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 6px;margin:0 -4px;scrollbar-width:none}
.cp-personnes::-webkit-scrollbar{display:none}
.cp-personne{flex:none;width:64px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--txt);cursor:pointer}
.cp-personne small{font-size:12px;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
.cp-personne:active .cp-av{transform:scale(.92)}
.cp-av{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:21px;font-weight:700;color:var(--prism-white);
  background:var(--bg2);isolation:isolate;transition:transform var(--dur-1) var(--ease-bounce)}
.cp-av::before{content:"";position:absolute;inset:0;border-radius:50%;padding:2px;background:var(--rainbow-conic);z-index:-1;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cp-av svg{width:22px;height:22px}
.cp-personne-inviter .cp-av{color:var(--dim)}
.cp-personne-inviter .cp-av::before{background:var(--line2)}
/* L'envoi en cours : l'anneau se REMPLIT (la part envoyée), puis la coche. */
.cp-av.cp-av-envoi::before{background:conic-gradient(var(--prism-cyan) calc(var(--p,0) * 360deg),var(--line2) 0)}
.cp-av.cp-av-fait::before{background:var(--ok)}
.cp-av.cp-av-fait::after{content:"✓";position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:var(--accent-ink);background:var(--ok);animation:dp-naitre var(--dur-3) var(--ease-soft) both;z-index:1}
.cp-av-grand{width:84px;height:84px;font-size:32px;margin:4px auto}
/* ⛔ SUR QUOI EST LA PERSONNE (19/10/2026). Maxime : « bien différencier les personnes avec qui on converse, sur quoi
   elles sont : web app ou Exprism bureau ». Un signe discret au coin du visage — un téléphone pour la web app, un écran
   pour Exprism bureau —, en encre neutre : jamais une couleur de plus (DESIGN.md, le spectre ne se pose pas sur du
   mobilier). Le même signe, en mots, à côté du nom. */
.cp-av-plateforme{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  color:var(--dim);background:var(--bg);box-shadow:0 0 0 1.5px var(--line2)}
.cp-av .cp-av-plateforme svg{width:11px;height:11px}
.cp-plateforme{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--faint);padding:1px 7px;border-radius:var(--r-btn);
  box-shadow:inset 0 0 0 1px var(--line2);white-space:nowrap}
.cp-ami-ligne .cp-plateforme{margin-right:auto}
/* OÙ VIT CHAQUE CONVERSATION : sur ce téléphone, ou sur l'ordinateur relié — deux rubriques, nommées. */
.cp-conv-rubriques{display:flex;flex-direction:column;gap:14px}
.cp-conv-ou{display:flex;align-items:center;gap:6px;margin:0 0 6px}
.cp-conv-ou svg,.cp-conv-ou-part svg{width:13px;height:13px;flex:none}
.cp-conv-ou-part{display:flex;align-items:center;gap:6px}
.cp-bulle-depuis{color:var(--faint)}
/* Supprimer : deux gestes nommés, sous l'en-tête, qui ne s'ouvrent qu'à la corbeille. */
.cp-conv-suppr{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0 2px;animation:dp-naitre var(--dur-2) var(--ease-soft) both}
.cp-conv-suppr[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.cp-conv-suppr{animation:none}}
.cp-voies{display:flex;flex-direction:column;gap:6px}
.cp-voie{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:10px 14px 10px 10px;border-radius:var(--r-ui);border:1px solid var(--line);
  background:var(--bg2);color:var(--txt);text-align:left;cursor:pointer;transition:transform var(--dur-1) var(--ease-soft),border-color var(--dur-1) var(--ease-soft)}
.cp-voie:active{transform:scale(.98);border-color:var(--prism-cyan)}
.cp-voie-ico{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--prism-cyan);background:color-mix(in srgb,var(--prism-cyan) 10%,transparent)}
.cp-voie-vedette .cp-voie-ico{background:var(--act-create);color:var(--act-create-ink);position:relative;isolation:isolate;overflow:hidden}
.cp-voie-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cp-voie-corps b{font-size:15.5px}
.cp-voie-corps small{font-size:12.5px;color:var(--dim)}
.cp-rangee{display:flex;gap:8px;flex-wrap:wrap}
.cp-rangee .cp-btn{flex:1 1 auto}
.cp-direct-travail::before{animation:cp-tourne 1.1s linear infinite}
@keyframes cp-tourne{to{transform:rotate(360deg)}}
.cp-accueil-ami{align-items:stretch;text-align:center}
.cp-accueil-ami p{margin:0;color:var(--dim)}

/* ── Amis et conversation : un petit réseau privé ─────────────────────────────────────────── */
.cp-statut{font-size:12px;font-weight:500;color:var(--faint)}
.cp-statut.en-ligne{color:var(--ok)}
.cp-statut.en-ligne::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--ok);vertical-align:1px}
.cp-conversation{flex:1;gap:8px}
.cp-conv-tete{display:flex;align-items:center;gap:10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.cp-empreinte{margin-left:auto;font-size:11px;color:var(--faint);text-align:right;max-width:40%}
.cp-fil{flex:1;min-height:120px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:6px 2px}
.cp-fil-vide{text-align:center;margin:auto 0}
/* ⛔ UN RAFRAÎCHISSEMENT NE REJOUE PAS LES ENTRÉES (10/2026) : le fil se rebâtit à chaque message ;
   animer toutes les bulles les faisait toutes ressauter. Seule la dernière — celle qui vient
   d'arriver — entre en douceur ; les autres restent posées (et `sig` évite tout rebâti inutile). */
.cp-bulle{max-width:82%;align-self:flex-start;display:flex;flex-direction:column;gap:4px;padding:9px 12px;border-radius:18px 18px 18px 6px;
  background:var(--bg2);border:1px solid var(--line)}
.cp-fil>.cp-bulle:last-child{animation:dp-entree var(--dur-3) var(--ease-soft) both}
.cp-bulle.moi{align-self:flex-end;border-radius:18px 18px 6px 18px;background:color-mix(in srgb,var(--prism-violet) 14%,var(--bg2));border-color:color-mix(in srgb,var(--prism-violet) 30%,var(--line))}
.cp-bulle-texte{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15.5px}
.cp-bulle img,.cp-bulle video{max-width:100%;max-height:44vh;min-height:120px;border-radius:12px;display:block;background:#000}
/* Une photo/vidéo qui arrive ne pousse plus le fil : la place est gardée, sobre, avant l'image. */
.cp-note-medias .cp-media-plein{min-height:140px}
.cp-legende-medias img,.cp-legende-medias video{min-height:120px}
.cp-bulle audio{width:240px;max-width:100%}
.cp-bulle a{color:var(--accent);overflow-wrap:anywhere}
.cp-bulle-fichier{display:flex;align-items:center;gap:8px}
.cp-bulle-fichier small{color:var(--dim)}
.cp-bulle-pied{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--faint)}
.cp-bulle-etat.ok{color:var(--ok)}
/* Les actions d'un message : derrière un rond discret (trois points), jamais étalées d'avance. */
.cp-bulle-plus{margin-left:auto;flex:none;min-width:32px;height:28px;padding:0 4px;border:0;border-radius:var(--r-btn);background:transparent;
  color:var(--faint);display:inline-flex;align-items:center;justify-content:center;gap:3px;cursor:pointer;opacity:.7;
  transition:transform var(--dur-1) var(--ease-soft),opacity var(--dur-1) var(--ease-soft),color var(--dur-1) var(--ease-soft)}
.cp-bulle-plus i{width:3.5px;height:3.5px;border-radius:50%;background:currentColor}
.cp-bulle-plus[aria-expanded="true"]{opacity:1;color:var(--txt);background:color-mix(in srgb,var(--txt) 7%,transparent)}
.cp-bulle-actions{display:flex;flex-wrap:wrap;gap:6px;padding-top:4px;animation:dp-entree var(--dur-2) var(--ease-soft) both}
.cp-bulle-action{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:1px solid var(--line2);border-radius:var(--r-btn);
  background:var(--bg2);color:var(--txt);font-size:12.5px;cursor:pointer}
.cp-bulle-action svg{width:15px;height:15px;color:var(--dim)}
/* ⛔ UN APPUI SE SENT (10/2026) : chaque geste de la conversation répond sous le doigt — envoi,
   actions, visages. `transform` seule, jamais d'ombre portée : instantané même en mouvement réduit
   (la règle `prefers-reduced-motion` fige les transitions, l'appui reste lisible sans glissement). */
.cp-bulle-action{transition:transform var(--dur-1) var(--ease-soft),background var(--dur-1) var(--ease-soft)}
.cp-bulle-action:active{transform:scale(.94);background:var(--survol)}
.cp-bulle-plus:active{opacity:1;color:var(--txt);transform:scale(.9)}
.cp-bulle-garde{color:var(--kind-daily)}
.cp-bulle.cp-etat-attente{opacity:.78}
.cp-bulle.cp-etat-attente .cp-bulle-etat{color:var(--warn)}
.cp-bulle.cp-etat-echec .cp-bulle-etat{color:var(--err)}
.cp-bulle-note{display:flex;align-items:center;gap:10px;padding:0;border:0;background:transparent;color:var(--txt);text-align:left;cursor:pointer;
  transition:transform var(--dur-1) var(--ease-soft),opacity var(--dur-1) var(--ease-soft)}
.cp-bulle-note:active{transform:scale(.98);opacity:.85}
.cp-bulle-note span{display:flex;flex-direction:column}
.cp-bulle-note small{font-size:11px;color:var(--faint)}
.cp-compose{display:flex;align-items:flex-end;gap:8px;padding-top:6px;border-top:1px solid var(--line)}
.cp-compose .cp-champ{flex:1;min-height:44px}
.cp-compose-champ{resize:none;max-height:140px;line-height:1.4;padding-top:11px;padding-bottom:11px;overflow-y:auto}
/* La liste des conversations : comme Messages — le nom et l'heure, dessous le dernier message. */
.cp-conversations .cp-ami-nom{gap:2px}
.cp-ami-ligne{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.cp-ami-ligne b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.cp-ami-ligne time{flex:none;font-size:11.5px;font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums}
.cp-conversations .cp-statut{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-non-lu .cp-ami-ligne b,.cp-non-lu .cp-statut{color:var(--txt);font-weight:700}
.cp-pastille{flex:none;min-width:22px;height:22px;padding:0 7px;display:grid;place-items:center;border-radius:var(--r-btn);
  background:var(--prism-violet);color:var(--accent-ink);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
/* La pastille des messages non lus, posée sur « + » et sur « Amis ». */
[data-pastille]{position:relative}
[data-pastille]::after{content:attr(data-pastille);position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--r-btn);background:var(--prism-violet);color:var(--accent-ink);
  font-size:11px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--bg);pointer-events:none}
.cp-fiche-ecrire{align-self:stretch;margin:12px 0 4px}
.cp-rond-envoi{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--act-share);color:var(--act-share-ink);position:relative;isolation:isolate;overflow:hidden;
  transition:transform var(--dur-1) var(--ease-soft),filter var(--dur-1) var(--ease-soft)}
.cp-rond-envoi svg{width:20px;height:20px}
.cp-rond-envoi:active{transform:scale(.88);filter:brightness(1.1)}

/* ── Carnet : chercher ────────────────────────────────────────────────────────────────────── */
.cp-filtres{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.cp-filtres::-webkit-scrollbar{display:none}
.cp-filtre{flex:none;min-height:34px;padding:0 14px;border-radius:var(--r-btn);border:1px solid var(--line2);background:transparent;color:var(--dim);font-size:13.5px;font-weight:600}
.cp-filtre.on{background:var(--txt);color:var(--bg);border-color:var(--txt)}
.cp-element-corps small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Un rond touché pendant le chargement de l'app : il attend, visiblement, puis s'ouvre (amorce.js). */
.cp-attend{box-shadow:0 0 0 3px color-mix(in srgb,var(--prism-cyan) 45%,transparent),0 0 22px -2px var(--prism-cyan) !important}

/* ══ 05/10/2026 (soir) — fluidité, ordinateur, « Programmé », envois discrets ═══════════════ */

/* Le spectre du bouton « + » reste discret ; les actions des feuilles gardent leur couleur. */
.cp-spectre::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:1800%;z-index:-1;pointer-events:none;
  background:var(--spectre);animation:cp-spectre 3.2s linear infinite paused;will-change:transform}
.cp-spectre{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:-1;pointer-events:none}
@keyframes cp-spectre{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes cp-tourne{to{transform:rotate(360deg)}}

/* ── Un rafraîchissement ne rejoue pas les entrées (`rendreJour`, data-calme) ─────────────── */
.cp-contenu[data-calme] :is(.cp-bloc,.cp-vide,.cp-carte-info,.dp-ligne,.cp-amis li,.np-done-task,.cp-ajoutees li,.cp-fondateur,.njc-evenement,.cp-clore){animation:none}
/* Le balayage qui revient en ressort quand il ne va pas au bout. */
.cp-contenu.cp-revient{transition:transform .46s var(--ease-soft),opacity .3s var(--ease-soft)}
.cp-carte-info[data-part]{opacity:0;transform:translateY(-6px) scale(.985)}
.cp-carte-info{transition:opacity var(--dur-2) var(--ease-soft),transform var(--dur-2) var(--ease-soft)}
.cp-carte-lien>svg{color:var(--prism-violet);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--prism-violet) 55%,transparent))}
.cp-carte-lien{background:color-mix(in srgb,var(--prism-violet) 7%,var(--bg2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--prism-violet) 28%,transparent)}
.cp-carte-ok{margin-top:10px}

/* ── Ce qui a été envoyé aujourd'hui : une CARTE (`--r-ui`), qui se replie en un rond ─────────── */
.cp-envois{margin:22px 0 0;padding:12px 12px 12px;border-radius:var(--r-ui);border:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 78%,transparent);
  transition:opacity var(--dur-2) var(--ease-soft),transform var(--dur-2) var(--ease-soft)}
.cp-envois[data-entre]{animation:cp-envois-entre var(--dur-2) var(--ease-soft) both}
.cp-envois[data-sort]{opacity:0;transform:translateY(6px) scale(.985)}
@keyframes cp-envois-entre{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.cp-envois-tete{display:flex;align-items:center;gap:8px;min-height:30px;margin:0 2px 10px}
.cp-envois-titre{margin:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
/* Le rond : le picto des envois, un anneau de progression tant que quelque chose part, un compte. */
.cp-envois-rond{position:fixed;z-index:45;right:max(16px,calc(env(safe-area-inset-right) + 12px));bottom:calc(env(safe-area-inset-bottom) + var(--dock-h) + 14px);
  width:48px;height:48px;display:grid;place-items:center;padding:0;border-radius:var(--r-btn);cursor:pointer;
  border:1px solid var(--line2);background:var(--bg2);color:var(--prism-cyan);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.9);transition:transform var(--dur-1) var(--ease-soft),opacity var(--dur-2) var(--ease-soft)}
.cp-envois-rond svg{width:20px;height:20px}
.cp-envois-rond:active{transform:scale(.92)}
.cp-envois-rond[data-entre]{animation:dp-naitre var(--dur-3) var(--ease-soft) both}
.cp-envois-rond[data-sort]{opacity:0;transform:scale(.7)}
.cp-envois-anneau{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  background:conic-gradient(var(--prism-cyan) calc(var(--p,0) * 1turn),color-mix(in srgb,var(--prism-cyan) 14%,transparent) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));transition:opacity var(--dur-2) var(--ease-soft)}
.cp-envois-rond[data-travail] .cp-envois-anneau{opacity:1}
.cp-envois-rond[data-travail="attente"]{color:var(--attente)}
.cp-envois-rond[data-travail="attente"] .cp-envois-anneau{background:color-mix(in srgb,var(--attente) 55%,transparent)}
.cp-envois-badge{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center;border-radius:var(--r-btn);
  font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent-ink);background:var(--accent);box-shadow:0 0 0 2px var(--bg)}
.cp-envois-badge:empty{display:none}
/* Le fantôme du morphing carte ⇄ rond : la surface de la carte, sans contenu. */
.cp-envois-fantome{position:fixed;z-index:46;pointer-events:none;border:1px solid var(--line2);background:var(--bg2);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.9)}
.cp-masquer{margin-left:auto;min-height:28px;padding:0 11px;border-radius:var(--r-btn);border:1px solid var(--line2);background:transparent;
  color:var(--dim);font-size:11px;font-weight:650;letter-spacing:.02em;text-transform:none;cursor:pointer;
  transition:color var(--dur-1) var(--ease-soft),border-color var(--dur-1) var(--ease-soft),transform var(--dur-1) var(--ease-soft)}
.cp-masquer:active{transform:scale(.95)}

/* ── « Programmé » : la temporalité, en vert (la teinte de la note du jour, comme Exprism) ── */
.np-scheduled-tasks{--temps:var(--kind-daily);border-color:color-mix(in srgb,var(--temps) 30%,var(--line));background:color-mix(in srgb,var(--temps) 4%,var(--bg2))}
.np-scheduled-tasks>summary{color:color-mix(in srgb,var(--temps) 60%,var(--txt))}
.np-sched-task{display:flex;align-items:center;gap:6px;min-height:42px;border-radius:var(--r-ui);
  transition:opacity var(--dur-2) var(--ease-soft),transform var(--dur-2) var(--ease-soft),background var(--dur-1) var(--ease-soft)}
.np-sched-task[data-part]{opacity:0;transform:translateX(14px) scale(.98)}
.np-sched-aller{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:7px;border:0;border-radius:var(--r-ui);background:transparent;color:var(--txt);
  text-align:left;cursor:pointer;font-size:14.5px}
.np-sched-aller:active{background:color-mix(in srgb,var(--temps) 8%,transparent)}
.np-sched-when{width:15px;height:15px;color:color-mix(in srgb,var(--temps) 70%,var(--txt))}
.np-sched-main{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-sched-task .np-task-status-date{color:color-mix(in srgb,var(--temps) 65%,var(--txt));font-weight:650}
.np-sched-actions{display:flex;gap:4px;flex:none}
.np-sched-act{width:34px;height:34px;display:grid;place-items:center;padding:0;border:1px solid var(--line2);border-radius:50%;background:transparent;color:var(--dim);cursor:pointer;
  transition:color var(--dur-1) var(--ease-soft),border-color var(--dur-1) var(--ease-soft),transform var(--dur-1) var(--ease-bounce)}
.np-sched-act svg{width:15px;height:15px}
.np-sched-act:active{transform:scale(.9);color:var(--txt);border-color:var(--temps)}
/* Le départ d'une tâche programmée : lisible un instant, puis elle se resserre sans saut
   (même courbe que `note-task-scheduled-out` d'Exprism) — hauteur ET opacité, pas de flou. */
.note-task.cp-v-ligne.cp-programmee{pointer-events:none;overflow:hidden;transform-origin:left center;
  animation:cp-programmee-part .8s var(--ease-soft) both}
.note-task.cp-v-ligne.cp-programmee .cp-v-date{color:var(--prism-white);border-color:var(--kind-daily);
  background:color-mix(in srgb,var(--kind-daily) 26%,transparent);box-shadow:0 0 14px -2px color-mix(in srgb,var(--kind-daily) 60%,transparent)}
@keyframes cp-programmee-part{
  0%{max-height:var(--programmation-h,40px);opacity:1;transform:none}
  45%{max-height:var(--programmation-h,40px);opacity:.85;transform:translateX(6px)}
  100%{max-height:0;min-height:0;padding-top:0;padding-bottom:0;opacity:0;transform:translateX(26px) scale(.97)}}

/* ── Le survol (souris, trackpad) : ce que le doigt ne peut pas faire, la souris l'annonce ── */
@media (hover:hover) and (pointer:fine){
  .cp-btn:hover{border-color:color-mix(in srgb,var(--txt) 20%,var(--line2));background:color-mix(in srgb,var(--txt) 4%,var(--bg2))}
  .cp-btn-primaire:hover{border-color:transparent;background:var(--cp-action-color);filter:brightness(1.07) saturate(1.12);box-shadow:0 6px 22px color-mix(in srgb,var(--cp-action-color) 38%,transparent)}
  .cp-rond-leger:hover,.np-jour-pas:hover{color:var(--txt);background:var(--bg2);border-color:var(--line2)}
  .np-date-lisible:not(.auj):hover{color:var(--txt);background:color-mix(in srgb,var(--accent) 18%,transparent)}
  .njc-case:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--txt)}
  .njc-prev:hover,.njc-next:hover,.njc-auj:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line2));color:var(--txt)}
  :is(.cp-element,.cp-voie,.cp-choix,.cp-ami,.cp-clore,.dp-ligne):hover{border-color:color-mix(in srgb,var(--prism-cyan) 32%,var(--line2));background:color-mix(in srgb,var(--txt) 3%,var(--bg2))}
  .cp-fondateur-ouvrir:hover>svg{color:var(--txt)}
  .cp-ecrire.cp-v-suite:hover{opacity:1;color:var(--dim)}
  .cp-v-plier:hover{opacity:1;color:var(--txt)}
  .cp-v-menu-item:hover{background:color-mix(in srgb,var(--txt) 5%,transparent)}
  .cp-dessous-rond:hover{color:var(--dim);background:color-mix(in srgb,var(--txt) 3%,transparent)}
  .cp-groupe>summary:hover{color:var(--txt)}
  .cp-bulle-plus:hover{opacity:1;color:var(--txt)}
  .cp-bulle-action:hover{border-color:color-mix(in srgb,var(--prism-cyan) 32%,var(--line2))}
  .cp-porte:hover{filter:brightness(1.18)}
  .np-tache-due:hover{background:var(--survol)}
  .note-check:hover,.np-tache-due>.np-tache-rond:hover{background:color-mix(in srgb,var(--act-task) 22%,transparent)}
  .cp-v-ligne:hover>.cp-v-texte:not(.cp-edite){background:color-mix(in srgb,var(--txt) 3.5%,transparent);border-radius:6px}
  .note-task.cp-v-ligne:hover .cp-v-date:not(.pose){opacity:.7}
  .cp-tiroir>summary:hover,.cp-filtre:not(.on):hover,.cp-segment:not(.on):hover{color:var(--txt)}
  .cp-masquer:hover{color:var(--txt);border-color:color-mix(in srgb,var(--txt) 26%,var(--line2))}
  .np-sched-aller:hover{background:color-mix(in srgb,var(--temps) 8%,transparent)}
  .np-sched-act:hover{color:var(--txt);border-color:var(--temps)}
  .cp-v-texte{cursor:text}
  /* Des barres de défilement d'app, fines et sombres — pas celles d'un formulaire. */
  *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--txt) 16%,transparent) transparent}
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--txt) 16%,transparent);border-radius:10px;border:3px solid transparent;background-clip:content-box}
  ::-webkit-scrollbar-track{background:transparent}
}

/* ── L'ordinateur : une fenêtre large, une souris (body.cp-large, posé par `appliquerLarge`) ─────
   ⛔ UNE VERSION BUREAU, PAS LE TÉLÉPHONE ÉTIRÉ (Max, 08/10/2026 : « la version bureau de la web app
   a disparu, à la place on a une version mobile sur la version bureau, c'est pas bon »). La refonte
   par onglets du 06/10 avait posé la colonne du téléphone au milieu de l'écran. Le bureau garde ses
   deux colonnes du 05/10 : le CALENDRIER toujours là, en colonne FIXE à gauche (un clic ouvre le
   jour), et à droite la vue active (journée, tâches, notes) dans sa colonne de lecture. L'onglet
   « Calendrier » n'a plus d'objet : le dock flotte sous la colonne de droite avec Jour, Tâches,
   Notes et le « + ». Les feuilles restent des fenêtres centrées. Tête, vues, dock et message court
   partagent `--colonne` et l'axe de la colonne de droite (`--axe`).
   ⛔ `position:fixed`, pas `sticky` : `#cp-app` et `body` portent `overflow-x:hidden`, qui fait
   d'eux des conteneurs de défilement — un `sticky` y resterait collé au haut de la page. */
body.cp-large{--colonne:720px;--cote:clamp(300px,24vw,360px);--axe:calc(var(--cote) + (100vw - var(--cote)) / 2)}
body.cp-large #cp-app{padding-left:var(--cote)}
body.cp-large #cp-calendrier,body.cp-large #cp-calendrier[hidden]{display:block !important;position:fixed;z-index:40;top:0;left:0;bottom:0;
  width:var(--cote);max-width:none;margin:0;padding:22px 18px 40px;overflow-y:auto;overscroll-behavior:contain;
  border-right:1px solid var(--line);background:var(--bg);animation:none}
/* L'onglet fusionné reste sur ordinateur : il y dit « Jour » (le calendrier est la colonne). */
.cp-o-lib-large{display:none}
body.cp-large .cp-o-lib-tel{display:none}
body.cp-large .cp-o-lib-large{display:inline}
body.cp-large .njc-nav{margin:0 2px 12px}
body.cp-large .njc-mois{font-size:19px}
body.cp-large .njc-prev,body.cp-large .njc-next{width:32px;height:32px;border-radius:10px}
body.cp-large .njc-auj{height:30px;padding:0 10px;font-size:12px}
body.cp-large .njc-sem span{font-size:10.5px}
body.cp-large .njc-sem,body.cp-large .njc-grille{gap:3px}
body.cp-large .njc-case{min-height:42px;gap:3px;padding:5px 1px 4px;border-radius:10px}
body.cp-large .njc-num{font-size:13px}
body.cp-large .cp-agenda{margin:16px 2px 0}
body.cp-large .cp-agenda-tete strong{font-size:15px}
/* ⛔ La ligne fine sous la date (« aujourd'hui · semaine 41 ») vit DANS la tête : sa marge basse
   la garde au-dessus du filet (07/10/2026, elle passait dessous à 14 px). */
/* ⛔ LA BARRE DE LA TÊTE VA D'UN BORD À L'AUTRE (Max, 08/10/2026 : « la barre noire sur la version bureau,
   le header, pour qu'on n'ait pas d'espace entre, que ça respecte la continuité graphique »). Elle n'était
   large que de la colonne de lecture : un vide apparaissait entre le calendrier et elle. Le fond et le
   filet courent désormais de la colonne du calendrier au bord droit ; seul le CONTENU garde la colonne
   de lecture (les marges latérales se calculent sur la largeur disponible, jamais en dur). */
body.cp-large .cp-tete{max-width:none;padding:18px max(28px,calc((100% - var(--colonne)) / 2)) 26px}
body.cp-large .cp-vue{max-width:calc(var(--colonne) + 56px);padding:10px 28px 150px}
body.cp-large .np-jour-pas{width:36px;height:36px}
body.cp-large .cp-onglets{left:var(--axe);right:auto;bottom:22px;width:auto;transform:translateX(-50%);display:grid;grid-template-columns:1fr 1fr auto 1fr 1fr;gap:6px;padding:7px 10px;
  border:1px solid var(--line2);border-radius:var(--r-btn);background:color-mix(in srgb,var(--bg2) 92%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--txt) 7%,transparent),0 26px 60px -26px rgba(0,0,0,.95)}
body.cp-large .cp-onglets::before{display:none}
body.cp-large .cp-onglets.cp-cache{transform:translate(-50%,calc(100% + 40px))}
/* ⛔ La barre flottante est une GRILLE, pas une rangée flex : le `width:100%` des onglets, résolu
   dans une rangée qui se dimensionne sur son contenu, écrasait le « + » à 8 px (07/10/2026, une
   pilule verte au milieu du dock). En grille, les quatre onglets ont la largeur du plus long et
   le « + » tombe au centre exact, quels que soient les libellés. */
body.cp-large .cp-onglet{flex-direction:row;gap:7px;min-height:42px;padding:0 14px;border-radius:var(--r-btn);font-size:13px}
body.cp-large .cp-onglet svg{width:19px;height:19px}
body.cp-large .cp-onglet[aria-current="page"]{background:color-mix(in srgb,var(--onglet) 12%,transparent)}
/* Le « + » est AU MILIEU du dock (3e sur 5 : jour, tâches, +, notes, messages), comme sur
   téléphone — la colonne centrale `auto` le centre quel que soit le libellé des onglets. */
body.cp-large .cp-ajout{flex:none;justify-self:center;width:46px;height:46px;margin:0 2px;transform:none}
body.cp-large .cp-toast{left:var(--axe);top:76px}
body.cp-large .dp-etat{left:var(--axe);translate:-50% 0;bottom:98px;max-width:min(520px,calc(100vw - var(--cote) - 160px))}
body.cp-large .cp-envois-rond{right:28px;bottom:28px}
/* Les feuilles deviennent des FENÊTRES centrées (pas de poignée, pas de montée depuis le bas). */
body.cp-large .cp-feuille{left:50%;right:auto;top:50%;bottom:auto;width:min(580px,calc(100vw - 48px));max-width:none;
  max-height:min(82vh,800px);padding:18px 22px 20px;border:1px solid var(--line2);border-radius:22px;transform:translate(-50%,-50%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--txt) 6%,transparent),0 40px 120px -30px rgba(0,0,0,.95);
  animation:cp-fenetre-in var(--dur-2) var(--ease-soft) both}
body.cp-large .cp-feuille.cp-pleine{width:min(760px,calc(100vw - 48px));height:min(86vh,900px)}
body.cp-large .cp-feuille.cp-part{animation:cp-fenetre-out var(--dur-1) var(--ease-soft) both}
body.cp-large .cp-poignee{display:none}
body.cp-large .cp-note-saisie{min-height:32vh}
@keyframes cp-fenetre-in{from{opacity:0;transform:translate(-50%,-49%) scale(.985)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes cp-fenetre-out{from{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-49.5%) scale(.99)}}

@media (prefers-reduced-motion:reduce){
  .cp-spectre::before,.cp-direct-anneau::before,.cp-direct-travail::before{animation:none !important}
  .cp-contenu.cp-revient{transition:none}
  .cp-dessous-corps,.cp-dessous-ico,.cp-v-plier{transition:none}
  .note-task.cp-v-ligne.cp-programmee{animation:none;opacity:0}
}

/* ── Le code à scanner (lien direct, code d'ami) ─────────────────────────────────────────── */
.cp-qr{margin:2px auto 4px;width:min(236px,64vw);display:flex;flex-direction:column;align-items:center;gap:8px;
  animation:cp-doux var(--dur-3) var(--ease-soft) both}
.cp-qr svg{display:block;width:100%;height:auto;stroke:none;fill:initial;border-radius:16px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--txt) 8%,transparent),0 18px 44px -18px color-mix(in srgb,var(--prism-violet) 55%,transparent)}
.cp-qr figcaption{font-size:12.5px;color:var(--dim);text-align:center}
.cp-mon-code{align-items:stretch;text-align:center}
body.cp-large .cp-qr{width:260px}

/* ── Le flashcode DE RÉCEPTION du bureau (10/2026) ─────────────────────────────────────────
   La carte vit en haut de la journée (`cp-carte-info`) ; le QR y tient sans écraser la page,
   l'état se lit d'un mot, les gestes sont les boutons ordinaires. */
.cp-rx{align-items:flex-start}
.cp-rx>div{min-width:0;flex:1}
.cp-rx-qr{display:flex;justify-content:center;margin:10px 0 2px;min-height:120px}
.cp-rx-qr .cp-qr{width:min(216px,58vw);margin:0}
body.cp-large .cp-rx-qr .cp-qr{width:240px}
.cp-rx-qr .cp-qr-fantome{width:min(216px,58vw);aspect-ratio:1}
.cp-rx-etat{margin:8px 0 0;font-size:12.5px;color:var(--dim)}
.cp-rx .cp-rangee{margin-top:10px}

/* « Envoyé » (déposé, l'ordinateur le récupère) n'est PAS un chargement : la coche, sans barre ni
   lueur — l'envoi est fini du côté du téléphone. Seul « Reçu » passe au vert. */
.dp-ligne[data-etat="depose"] .dp-barre{display:none}
.dp-ligne[data-etat="depose"] .dp-pastille{color:var(--dim)}
.dp-ligne[data-etat="depose"] .dp-ligne-etat{color:var(--dim)}

/* ── Profil, fiches des personnes, « envoyé par » ─────────────────────────────────────────── */
/* ⛔ LA PHOTO SE POSE DANS L'ANNEAU, JAMAIS PAR-DESSUS (Max, 06/10/2026 : « quand on ajoute une image, elle
   semble se coller par-dessus le rond par défaut »). L'anneau du spectre (2 px) reste visible, un fin
   jour le sépare de la photo ; et une conversation pose son avatar à SA taille (il héritait des 56 px). */
.cp-av img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:50%;object-fit:cover;display:block}
.cp-av:has(img){color:transparent}
/* ⛔ LE VISAGE SE VOIT (10/2026) : 48 px dans la conversation, centré avec son nom — on sait à
   qui l'on parle d'un coup d'œil, même avec une photo. */
.cp-conv-tete .cp-av{width:48px;height:48px;font-size:19px;flex:none;align-self:center}
.cp-conv-tete .cp-av-plateforme{width:16px;height:16px}
.cp-conv-tete .cp-av .cp-av-plateforme svg{width:9px;height:9px}
.cp-ami .cp-av{width:44px;height:44px;font-size:18px;flex:none}
.cp-profil{align-items:center;text-align:center}
.cp-profil .cp-champ{text-align:center}
.cp-profil-visage{margin:6px 0 2px}
/* ⛔ Le pointillé n'est que pour la ligne « Ajouter ton prénom » des Réglages (`.cp-ami.cp-moi`) : la feuille
   « Moi » porte aussi la classe `cp-moi`, et prenait un cadre pointillé autour de tout son contenu (08/10/2026). */
.cp-ami.cp-moi{border-style:dashed}
.cp-personnes-recues{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.cp-fiche-tete{display:flex;align-items:center;gap:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cp-fiche-tete .cp-av-grand{margin:0;flex:none}
.cp-fiche-tete>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.cp-fiche-tete b{font-size:20px}
.cp-fiche-tete small{font-size:12.5px;color:var(--dim)}
.cp-fiche-jour{margin:10px 2px 2px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);list-style:none}
.cp-de{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px 8px 8px;border-radius:var(--r-ui);border:1px solid var(--line);
  background:color-mix(in srgb,var(--prism-violet) 6%,var(--bg2));color:var(--txt);text-align:left;cursor:pointer}
.cp-de .cp-av{width:40px;height:40px;font-size:16px;flex:none}
.cp-de>span{display:flex;flex-direction:column;flex:1;min-width:0}
.cp-de small{font-size:11.5px;color:var(--dim)}
.cp-de em{font-style:normal;font-size:12px;color:var(--dim)}
.cp-profil-rappel{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px 10px 10px;border-radius:var(--r-ui);
  border:1px dashed color-mix(in srgb,var(--prism-violet) 45%,var(--line2));background:transparent;color:var(--txt);text-align:left;cursor:pointer}
.cp-profil-rappel .cp-av{width:40px;height:40px;font-size:16px;flex:none}
.cp-profil-rappel>span{display:flex;flex-direction:column}
.cp-profil-rappel small{font-size:12px;color:var(--dim)}
.cp-btn-danger{color:var(--err);border-color:color-mix(in srgb,var(--err) 40%,var(--line2))}
@media (hover:hover) and (pointer:fine){
  .cp-de:hover,.cp-profil-rappel:hover{border-color:color-mix(in srgb,var(--prism-violet) 55%,var(--line2))}
  .cp-btn-danger:hover{background:color-mix(in srgb,var(--err) 10%,var(--bg2))}
}

.cp-histoire-replie{position:static}
.cp-h-rail[hidden]{display:none}

/* ══ 06/10/2026 — la navigation par onglets, tout le carnet, rechercher, l'historique, la caméra ══
   Max : « les boutons du bas deviennent une navigation, comme sur la plupart des apps : la note du
   jour, le calendrier, toutes les tâches, les notes en grille » ; « un menu où on choisit ce qu'on
   veut ajouter » ; « l'app devient similaire à la pilule mémoire ». Chaque surface ci-dessous
   reprend un composant d'Exprism (pilule, carte, pastille de type, lien interne) à la taille du
   pouce — jamais un second style. */

/* ── La tête : moi, le logo, chercher et les conversations ─────────────────────────────── */
.cp-tete-actions{display:flex;align-items:center;gap:8px}
.cp-moi-btn{width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;display:grid;place-items:center}
.cp-moi-btn .cp-av{width:36px;height:36px;font-size:15px;transition:transform var(--dur-1) var(--ease-soft)}
.cp-moi-btn .cp-av svg{width:18px;height:18px;color:var(--dim)}
.cp-moi-btn:active .cp-av{transform:scale(.92)}
.cp-tete .cp-rond-leger{width:38px;height:38px;color:var(--txt2)}
.cp-tete .cp-rond-leger svg{width:19px;height:19px}

/* ── Les onglets : quatre vues, et au centre un bouton pour ajouter ─────────────────────── */
/* ⛔ OPAQUES, SANS FLOU : un flou d'arrière-plan sous un bouton qui s'anime, Safari le repeint à
   chaque image (la saccade du 05/10). La barre s'efface en descendant (`.cp-cache`, posé par
   `suivreLeDefilement`) et revient dès qu'on remonte — un `transform`, rien d'autre ne bouge. */
.cp-onglets{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;justify-items:center;
  padding:5px max(8px,env(safe-area-inset-left)) max(6px,calc(env(safe-area-inset-bottom) - 8px));background:var(--bg);
  transition:transform var(--dur-2) var(--ease-soft);will-change:transform}
.cp-onglets::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;opacity:.5;background:var(--faisceau)}
.cp-onglets.cp-cache{transform:translateY(calc(100% + 6px))}
/* Ce qui flotte au-dessus des onglets descend avec eux. */
.dp-etat,.cp-envois-rond{transition:translate var(--dur-2) var(--ease-soft),transform var(--dur-1) var(--ease-soft),opacity var(--dur-2) var(--ease-soft)}
body.cp-onglets-caches:not(.cp-large) .dp-etat,body.cp-onglets-caches:not(.cp-large) .cp-envois-rond{translate:0 var(--dock-h)}
.cp-onglet{--onglet:var(--accent);width:100%;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 0 2px;
  border:0;background:none;color:var(--faint);font-size:10.5px;font-weight:600;letter-spacing:.01em;cursor:pointer;
  transition:color var(--dur-1) var(--ease-soft),background var(--dur-1) var(--ease-soft)}
.cp-onglet svg{width:24px;height:24px;transition:transform var(--dur-1) var(--ease-soft),filter var(--dur-2) var(--ease-soft)}
.cp-onglet:active svg{transform:scale(.88)}
/* ⛔ LE TAP SE VOIT (mission 10/2026 : retour immédiat au doigt). L'icône GROSSIT puis se pose en
   douceur (transform seul : le compositeur, jamais de repeinture) ; l'onglet actif, lui, s'allume
   dans la même frame que le toucher (`aria-current`, posé par `allerA`). */
.cp-onglet.cp-tape svg{animation:cp-onglet-tape .32s var(--ease-soft)}
@keyframes cp-onglet-tape{0%{transform:scale(1)}35%{transform:scale(1.28)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.cp-onglet.cp-tape svg{animation:none}}
/* Chaque onglet porte la couleur de son contenu : jours/dates en vert, tâches en rouge, notes en
   magenta. La personne conserve sa teinte distincte dans la constellation. */
#cp-o-jour{--onglet:var(--kind-daily)}
#cp-o-calendrier{--onglet:var(--kind-daily)}
#cp-o-taches{--onglet:var(--act-task)}
#cp-o-notes{--onglet:var(--kind-note)}
#cp-o-conversations{--onglet:var(--prism-violet)}
/* La pastille ROUGE des messages non lus, contre l'icône de la bulle. */
.cp-o-messages[data-pastille]::after{top:3px;right:calc(50% - 23px);background:var(--notif);color:var(--notif-ink);
  animation:dp-naitre var(--dur-3) var(--ease-bounce) both}
body.cp-large .cp-o-messages[data-pastille]::after{top:-4px;right:-4px}
.cp-onglet[aria-current="page"]{color:var(--txt)}
.cp-onglet[aria-current="page"] svg{color:var(--onglet);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--onglet) 55%,transparent))}
/* Le bouton « + » : la peau des boutons de création d'Exprism (le spectre qui glisse), en rond. */
.cp-ajout{position:relative;width:52px;height:52px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--act-create);color:var(--act-create-ink);isolation:isolate;overflow:hidden;transform:translateY(-2px);
  box-shadow:0 2px 10px color-mix(in srgb,var(--act-create) 32%,transparent),0 12px 30px -14px rgba(0,0,0,.8);
  transition:transform var(--dur-1) var(--ease-soft),box-shadow var(--dur-1) var(--ease-soft)}
.cp-ajout svg{width:26px;height:26px;stroke-width:2.2;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));transition:transform var(--dur-2) var(--ease-soft)}
.cp-ajout:active{transform:translateY(-2px) scale(.93);box-shadow:0 7px 20px color-mix(in srgb,var(--act-create) 42%,transparent),0 14px 34px -14px rgba(0,0,0,.85)}
.cp-ajout[aria-expanded="true"] svg{transform:rotate(45deg)}
.cp-ajout .cp-spectre::before{animation-play-state:paused}
.cp-ajout:active .cp-spectre::before,.cp-ajout[aria-expanded="true"] .cp-spectre::before{animation-play-state:running}

/* ── Les vues : un titre, un compte, l'entrée douce ──────────────────────────────────────── */
.cp-vue-entre{animation:cp-vue-entre var(--dur-2) var(--ease-soft) both}
@keyframes cp-vue-entre{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cp-vue-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 14px}
.cp-vue-titre{margin:0;display:flex;align-items:baseline;gap:10px;font-size:28px;font-weight:750;letter-spacing:-.02em;line-height:1.15}
.cp-vue-titre small{font-size:14px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.cp-vue-taches .cp-bloc{margin-bottom:18px}
.cp-vue-taches .cp-bloc-retard .cp-bloc-titre{color:var(--err)}
.cp-vue-notes>.cp-filtres{margin:0 -18px 14px;padding:0 18px 2px}

/* ── Le code couleur des types : posé UNE fois, porté par `data-kind` ─────────────────────
   ⛔ Le sélecteur reste NOMMÉ (`:is(...)`), jamais un `[data-kind]` nu — la règle d'Exprism
   (`app/static/style.css`) : une surface qui PORTE un type entre dans la liste, et rien d'autre. */
:is(.cp-type-picto,.cp-filtre,.cp-carte-note,.cp-resultat,.cp-retro,.cp-note-ouverte,.cp-h-ligne,.cp-tuile){--k:var(--kind-note)}
:is(.cp-type-picto,.cp-filtre,.cp-carte-note,.cp-resultat,.cp-retro,.cp-note-ouverte,.cp-h-ligne,.cp-tuile)[data-kind="daily"]{--k:var(--kind-daily)}
:is(.cp-type-picto,.cp-filtre,.cp-carte-note,.cp-resultat,.cp-retro,.cp-note-ouverte,.cp-h-ligne,.cp-tuile)[data-kind="periodique"]{--k:var(--kind-periodique)}
:is(.cp-type-picto,.cp-filtre,.cp-carte-note,.cp-resultat,.cp-retro,.cp-note-ouverte,.cp-h-ligne,.cp-tuile)[data-kind="project"]{--k:var(--kind-project)}
:is(.cp-type-picto,.cp-filtre,.cp-carte-note,.cp-resultat,.cp-retro,.cp-note-ouverte,.cp-h-ligne,.cp-tuile)[data-kind="collection"]{--k:var(--kind-collection)}
:is(.cp-type-picto,.cp-filtre,.cp-carte-note,.cp-resultat,.cp-retro,.cp-note-ouverte,.cp-h-ligne,.cp-tuile)[data-kind="video"]{--k:var(--kind-video)}
:is(.cp-type-picto,.cp-filtre,.cp-carte-note,.cp-resultat,.cp-retro,.cp-note-ouverte,.cp-h-ligne,.cp-tuile)[data-kind="audio"]{--k:var(--kind-audio)}
:is(.cp-type-picto,.cp-filtre,.cp-carte-note,.cp-resultat,.cp-retro,.cp-note-ouverte,.cp-h-ligne,.cp-tuile)[data-kind="image"]{--k:var(--kind-image)}
:is(.cp-type-picto,.cp-filtre,.cp-carte-note,.cp-resultat,.cp-retro,.cp-note-ouverte,.cp-h-ligne,.cp-tuile)[data-kind="person"]{--k:var(--kind-person)}
:is(.cp-type-picto,.cp-filtre,.cp-carte-note,.cp-resultat,.cp-retro,.cp-note-ouverte,.cp-h-ligne,.cp-tuile)[data-kind="place"]{--k:var(--kind-place)}
:is(.cp-type-picto,.cp-filtre,.cp-carte-note,.cp-resultat,.cp-retro,.cp-note-ouverte,.cp-h-ligne,.cp-tuile)[data-kind="surligne"]{--k:var(--kind-surligne)}
:is(.cp-type-picto,.cp-filtre,.cp-carte-note,.cp-resultat,.cp-retro,.cp-note-ouverte,.cp-h-ligne,.cp-tuile)[data-kind="summary"]{--k:var(--kind-summary)}
:is(.cp-type-picto,.cp-filtre,.cp-carte-note,.cp-resultat,.cp-retro,.cp-note-ouverte,.cp-h-ligne,.cp-tuile)[data-kind="article"]{--k:var(--kind-article)}
:is(.cp-type-picto,.cp-filtre,.cp-carte-note,.cp-resultat,.cp-retro,.cp-note-ouverte,.cp-h-ligne,.cp-tuile)[data-kind="book"]{--k:var(--kind-book)}
:is(.cp-type-picto,.cp-filtre,.cp-carte-note,.cp-resultat,.cp-retro,.cp-note-ouverte,.cp-h-ligne,.cp-tuile)[data-kind="description"]{--k:var(--kind-description)}
:is(.cp-type-picto,.cp-filtre,.cp-carte-note,.cp-resultat,.cp-retro,.cp-note-ouverte,.cp-h-ligne,.cp-tuile)[data-kind="base"]{--k:var(--kind-base)}
/* Hors type : « Tout » et « Tâches » restent neutres ; les favoris ont leur jaune ; la caméra, le faisceau. */
.cp-filtre[data-kind=""]{--k:var(--txt)}
.cp-filtre:has(.cp-filtre-fav){--k:var(--fav)}
.cp-tuile[data-kind="camera"]{--k:var(--prism-cyan)}

/* La pastille d'un type : son pictogramme, dans sa couleur, sur un fond de sa couleur à peine. */
.cp-type-picto{flex:none;width:30px;height:30px;display:inline-grid;place-items:center;border-radius:9px;color:var(--k);
  background:color-mix(in srgb,var(--k) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k) 26%,transparent)}
.cp-type-picto svg{width:17px;height:17px}

/* ── Les filtres : la légende de ce que la liste va montrer ─────────────────────────────── */
.cp-filtre{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  transition:color var(--dur-1) var(--ease-soft),background var(--dur-1) var(--ease-soft),border-color var(--dur-1) var(--ease-soft)}
.cp-filtre-picto{display:grid;place-items:center;color:var(--k)}
.cp-filtre-picto svg{width:15px;height:15px}
.cp-filtre em{font-style:normal;font-size:12px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.cp-filtre.on{color:var(--txt);background:color-mix(in srgb,var(--k) 15%,var(--bg2));border-color:color-mix(in srgb,var(--k) 55%,transparent)}
.cp-filtre.on em{color:var(--dim)}

/* ── Toutes les notes, en grille ─────────────────────────────────────────────────────────── */
.cp-grille-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:560px){.cp-grille-notes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cp-carte-note{position:relative;min-width:0;min-height:128px;display:flex;flex-direction:column;gap:7px;padding:12px 12px 11px;border-radius:var(--r-panel);
  border:1px solid var(--line);background:var(--bg2);color:var(--txt);text-align:left;cursor:pointer;overflow:hidden;
  animation:cp-vue-entre var(--dur-2) var(--ease-soft) both;
  transition:transform var(--dur-1) var(--ease-soft),border-color var(--dur-1) var(--ease-soft)}
.cp-carte-note:active{transform:scale(.97);border-color:color-mix(in srgb,var(--k) 45%,var(--line2))}
.cp-carte-tete{display:flex;align-items:center;gap:7px;min-width:0}
.cp-carte-tete .cp-type-picto{width:24px;height:24px;border-radius:7px}
.cp-carte-tete .cp-type-picto svg{width:14px;height:14px}
/* Une personne qui a sa photo : son visage à la place du pictogramme (07/10/2026). */
.cp-type-picto.cp-portrait{border-radius:50%;overflow:hidden;background:none}
.cp-type-picto.cp-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.cp-carte-tete small{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:600;color:color-mix(in srgb,var(--k) 62%,var(--dim))}
.cp-carte-tete time{flex:none;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.cp-carte-fav{width:13px;height:13px;color:var(--fav);fill:var(--fav);flex:none}
/* L'ÉTOILE, la même partout (favoris.js, 08/10/2026) : un contour discret au repos, le jaune des
   favoris (--fav, celui d'Exprism) quand elle est posée. Cible de 32 px : un pouce, pas un pointeur. */
.cp-etoile{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:-4px -6px -4px 0;padding:0;border:0;
  border-radius:var(--r-btn);background:transparent;color:var(--faint);cursor:pointer;
  transition:color var(--dur-1) var(--ease-soft),transform var(--dur-1) var(--ease-bounce)}
.cp-etoile svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.cp-etoile.on{color:var(--fav)}
.cp-etoile.on svg{fill:var(--fav)}
.cp-etoile:active{transform:scale(.86)}
.note-task>.cp-etoile{align-self:center}
.np-tache-due>.cp-etoile{margin-left:auto}
/* Une tâche ouverte non favorite : l'étoile n'apparaît qu'au survol (ordinateur) — au doigt, elle reste là, pâle. */
@media (hover:hover) and (pointer:fine){
  .cp-etoile:not(.on){opacity:0}
  .note-task:hover>.cp-etoile,.np-tache-due:hover>.cp-etoile,.cp-etoile:focus-visible,.cp-feuille-actions .cp-etoile{opacity:1}
  .cp-etoile:hover{color:var(--fav)}
}
.cp-feuille-actions .cp-etoile{margin:0;width:38px;height:38px}
.cp-feuille-actions .cp-etoile svg{width:19px;height:19px}
.cp-bloc-fav{width:15px;height:15px;margin-right:6px;vertical-align:-2px;color:var(--fav);fill:var(--fav)}
@media (prefers-reduced-motion:reduce){ .cp-etoile{transition:none} }
.cp-carte-titre{font-size:15px;font-weight:650;line-height:1.3;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cp-carte-extrait{font-size:12.5px;line-height:1.4;color:var(--dim);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cp-carte-tags{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:auto}
.cp-carte-tags i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--faint)}
.cp-sentinelle{height:1px}
/* Ce qui arrive : des cartes fantômes, un reflet qui passe — jamais un écran vide. */
.cp-carte-fantome{cursor:default;pointer-events:none;gap:10px}
.cp-carte-fantome i,.cp-lignes-fantomes i{display:block;height:11px;border-radius:6px;
  background:linear-gradient(90deg,var(--line) 0%,color-mix(in srgb,var(--txt) 9%,var(--line)) 50%,var(--line) 100%);background-size:200% 100%;
  animation:cp-reflet 1.5s linear infinite}
.cp-carte-fantome i:first-child{width:40%}
.cp-carte-fantome i:nth-child(2){width:88%;height:14px}
.cp-carte-fantome i:nth-child(3){width:64%}
.cp-lignes-fantomes{padding:6px 0}
.cp-lignes-fantomes i{margin:12px 0}
.cp-lignes-fantomes i:nth-child(1){width:92%}
.cp-lignes-fantomes i:nth-child(2){width:78%}
.cp-lignes-fantomes i:nth-child(3){width:56%}

/* ── Rechercher ─────────────────────────────────────────────────────────────────────────── */
.cp-carnet{gap:12px}
.cp-carnet>.cp-filtres{margin:0 -4px;padding:0 4px 2px}
.cp-recherche-etat{margin:-2px 2px 0}
.cp-resultats{display:flex;flex-direction:column;gap:6px;padding-bottom:12px}
.cp-resultat{width:100%;display:flex;align-items:flex-start;gap:12px;padding:10px 12px 10px 10px;border-radius:var(--r-ui);border:1px solid var(--line);
  background:var(--bg2);color:var(--txt);text-align:left;cursor:pointer;animation:cp-vue-entre var(--dur-1) var(--ease-soft) both;
  transition:transform var(--dur-1) var(--ease-soft),border-color var(--dur-1) var(--ease-soft)}
.cp-resultat:active{transform:scale(.985);border-color:color-mix(in srgb,var(--k) 45%,var(--line2))}
.cp-resultat-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cp-resultat-corps b{font-size:15px;font-weight:650;line-height:1.3;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cp-resultat-corps small{font-size:12.5px;line-height:1.4;color:var(--dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cp-resultat>time{flex:none;margin-top:2px;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.cp-resultat mark,.cp-carte-tags mark{color:var(--txt);background:color-mix(in srgb,var(--k) 28%,transparent);border-radius:3px;padding:0 1px}

/* ── Une note ouverte : son type, sa date, ses tags, son texte, ses rétroliens ───────────── */
.cp-note-meta{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:650;color:color-mix(in srgb,var(--k) 70%,var(--txt))}
.cp-note-meta .cp-type-picto{width:26px;height:26px;border-radius:8px}
.cp-note-meta .cp-type-picto svg{width:15px;height:15px}
.cp-note-meta time{margin-left:auto;font-size:12px;font-weight:500;color:var(--faint);text-align:right}
.cp-note-tags{display:flex;flex-wrap:wrap;gap:6px}
.cp-tag{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:var(--r-btn);font-size:12.5px;font-weight:600;
  color:var(--txt2);background:color-mix(in srgb,var(--txt) 6%,transparent);border:1px solid var(--line2)}
.cp-note-hote{min-height:40px}
.cp-note-attente{display:flex;flex-direction:column;gap:6px}
.cp-note-apercu{margin:0;font-family:var(--font-note);font-size:var(--note-font-size);line-height:1.6;color:var(--dim)}
.cp-note-echec{color:var(--attente)}
.cp-retroliens{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.cp-retroliens h3{display:flex;align-items:center;gap:8px;margin:0 2px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.cp-retroliens h3 em{font-style:normal;font-weight:600;color:var(--dim)}
.cp-retro-liste{display:flex;flex-direction:column;gap:6px}
.cp-retro{width:100%;display:flex;align-items:center;gap:11px;min-height:48px;padding:7px 12px 7px 8px;border-radius:var(--r-ui);border:1px solid var(--line);
  background:var(--bg2);color:var(--txt);text-align:left;cursor:pointer;transition:transform var(--dur-1) var(--ease-soft),border-color var(--dur-1) var(--ease-soft)}
.cp-retro>span:not(.cp-type-picto){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px;font-weight:600}
.cp-retro>svg{width:16px;height:16px;color:var(--faint)}
.cp-retro:active{transform:scale(.985);border-color:color-mix(in srgb,var(--k) 45%,var(--line2))}
.cp-retour svg{width:18px;height:18px}

/* ── « Ajouter » : quatre grandes cases, chacune dans la couleur de son type ─────────────── */
.cp-ajouter{gap:14px;padding-bottom:4px}
.cp-tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cp-tuile{min-height:118px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:2px;padding:14px;border-radius:var(--r-panel);
  border:1px solid color-mix(in srgb,var(--k) 22%,var(--line));background:color-mix(in srgb,var(--k) 6%,var(--bg2));color:var(--txt);text-align:left;cursor:pointer;
  animation:cp-vue-entre var(--dur-2) var(--ease-soft) both;transition:transform var(--dur-1) var(--ease-soft),border-color var(--dur-1) var(--ease-soft),background var(--dur-1) var(--ease-soft)}
.cp-tuile:nth-child(2){animation-delay:25ms}.cp-tuile:nth-child(3){animation-delay:50ms}.cp-tuile:nth-child(4){animation-delay:75ms}
.cp-tuile-ico{width:42px;height:42px;margin-bottom:auto;border-radius:13px;display:grid;place-items:center;color:var(--k);
  background:color-mix(in srgb,var(--k) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k) 30%,transparent)}
.cp-tuile-ico svg{width:23px;height:23px}
.cp-tuile b{margin-top:10px;font-size:16px;font-weight:700}
.cp-tuile small{font-size:12.5px;color:var(--dim)}
.cp-tuile:active{transform:scale(.97);border-color:color-mix(in srgb,var(--k) 60%,var(--line2));background:color-mix(in srgb,var(--k) 12%,var(--bg2))}
.cp-tuile[data-kind="camera"] .cp-tuile-ico{color:var(--prism-white);background:var(--bg);position:relative;isolation:isolate;box-shadow:none}
.cp-tuile#cp-vocal{--k:var(--kind-note)}
.cp-tuile#cp-tache{--k:var(--act-task)}
.cp-tuile[data-kind="camera"] .cp-tuile-ico::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--rainbow-conic);z-index:-1;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cp-petits-gestes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cp-petit-geste{min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 10px;border-radius:var(--r-btn);border:1px solid var(--line2);
  background:var(--bg2);color:var(--txt);font-size:14px;font-weight:600;cursor:pointer;transition:transform var(--dur-1) var(--ease-soft)}
.cp-petit-geste svg{width:18px;height:18px;color:var(--dim)}
.cp-petit-geste:active{transform:scale(.96)}
.cp-petit-large{grid-column:1/-1}
.cp-bug-contexte{font-size:13px;color:var(--dim)}
.cp-bug-contexte summary{cursor:pointer;min-height:32px;display:flex;align-items:center}
.cp-bug-contexte ul{margin:4px 0 0;padding-left:18px;overflow-wrap:anywhere}

/* ── Moi : mon profil, mon code, l'historique, les réglages ──────────────────────────────── */
.cp-moi .cp-moi-profil{border-style:solid}
.cp-moi-code{display:flex;flex-direction:column;align-items:stretch}
.cp-ligne-moi{width:100%;display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 14px 8px 8px;border-radius:var(--r-ui);border:1px solid var(--line);
  background:var(--bg2);color:var(--txt);text-align:left;cursor:pointer;transition:transform var(--dur-1) var(--ease-soft),border-color var(--dur-1) var(--ease-soft)}
.cp-ligne-moi:active{transform:scale(.985);border-color:var(--prism-cyan)}
.cp-ligne-ico{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;color:var(--prism-cyan);background:color-mix(in srgb,var(--prism-cyan) 9%,transparent)}
.cp-ligne-ico svg{width:20px;height:20px}
.cp-ligne-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cp-ligne-corps b{font-size:15.5px;font-weight:650}
.cp-ligne-corps small{font-size:12.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-ligne-moi>svg{width:16px;height:16px;color:var(--faint)}
.cp-ligne-offre .cp-ligne-ico{color:var(--fav);background:color-mix(in srgb,var(--fav) 10%,transparent)}

/* ── Mon code d'ami : le flashcode d'abord, le lien dessous ──────────────────────────────── */
.cp-code-ami{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:4px 0 2px}
/* ⛔ DEUX BOUTONS CÔTE À CÔTE, JAMAIS DEHORS (10/2026) : sur petit mobile, « Envoyer mon lien »
   et « Scanner le sien » s'empilaient en débordant — une base de 160 px les met en colonne,
   plein largeur, dès que la feuille se resserre. */
.cp-code-ami>.cp-rangee{width:100%}
.cp-code-ami>.cp-rangee>.cp-btn{flex:1 1 160px}
.cp-code-ami-nom p{margin:0;color:var(--dim);font-size:14px;max-width:32ch}
.cp-qr-fantome{position:relative;width:min(236px,64vw);aspect-ratio:1;display:grid;place-items:center;border-radius:16px;color:var(--faint);
  background:color-mix(in srgb,var(--txt) 4%,var(--bg2));box-shadow:0 0 0 1px var(--line2);isolation:isolate;overflow:hidden}
.cp-qr-fantome svg{width:46px;height:46px;stroke-width:1.3}
.cp-qr-fantome.cp-direct-travail::before{content:"";position:absolute;inset:-40%;z-index:-1;
  background:conic-gradient(from 0deg,transparent 0 70%,color-mix(in srgb,var(--prism-cyan) 35%,transparent) 85%,transparent)}
body.cp-large .cp-qr-fantome{width:260px}
/* Le code, repliable, en tête des conversations. */
.cp-code-repli{border:1px solid var(--line);border-radius:var(--r-panel);background:color-mix(in srgb,var(--bg2) 70%,transparent);overflow:hidden}
.cp-code-repli>summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 14px 8px 10px;cursor:pointer}
.cp-code-repli>summary::-webkit-details-marker{display:none}
.cp-code-repli>summary>svg:first-child{width:22px;height:22px;color:var(--prism-violet)}
.cp-code-repli>summary>span{flex:1;min-width:0;display:flex;flex-direction:column}
.cp-code-repli>summary b{font-size:15.5px}
.cp-code-repli>summary small{font-size:12.5px;color:var(--dim)}
.cp-code-repli>summary>svg:last-child{width:16px;height:16px;color:var(--faint);transition:transform var(--dur-2) var(--ease-soft)}
.cp-code-repli[open]>summary>svg:last-child{transform:rotate(90deg)}
.cp-code-repli>.cp-moi-code{padding:0 14px 16px}
.cp-conv-liste .cp-amis{margin-top:2px}

/* ── Envoyer : le flashcode EN TÊTE, puis les amis, l'ordinateur, « Partager… » ───────────── */
.cp-envoi-qr{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-height:40px}
.cp-envoi-qr>.cp-direct-anneau{margin:8px auto 0}
.cp-envoi-qr>.cp-direct-texte{margin:0;text-align:center;color:var(--dim);font-size:13px}
.cp-qr-preparer{align-self:center}
.cp-capsule{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.cp-capsule-code{display:flex;flex-direction:column;gap:8px}
.cp-capsule-code .cp-code{margin:0;font-size:17px;letter-spacing:.06em;flex:1 1 auto;text-align:center}
.cp-dest{display:flex;gap:6px;padding:4px;border-radius:var(--r-btn);background:var(--bg2);border:1px solid var(--line)}
.cp-dest-choix{flex:1;min-height:38px;padding:0 12px;border:0;border-radius:var(--r-btn);background:transparent;color:var(--dim);font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background var(--dur-1) var(--ease-soft),color var(--dur-1) var(--ease-soft)}
.cp-dest-choix[aria-checked="true"]{background:var(--txt);color:var(--bg)}

/* ── L'historique : des rubriques par jour, une phrase par ligne, l'heure à droite ──────── */
.cp-historique{gap:6px}
.cp-h-jour+.cp-h-jour{margin-top:16px}
.cp-h-rubrique{position:sticky;top:-4px;z-index:1;margin:0 0 8px;padding:6px 2px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--faint);background:color-mix(in srgb,var(--bg2) 72%,var(--bg))}
.cp-h-lignes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cp-h-ligne{width:100%;display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px 8px 8px;border-radius:var(--r-ui);border:1px solid var(--line);
  background:var(--bg2);color:var(--txt);text-align:left;cursor:pointer;transition:transform var(--dur-1) var(--ease-soft),border-color var(--dur-1) var(--ease-soft)}
.cp-h-ligne:active{transform:scale(.985);border-color:color-mix(in srgb,var(--k) 45%,var(--line2))}
.cp-h-ligne .cp-av{width:38px;height:38px;font-size:15px;flex:none}
.cp-h-ligne .cp-type-picto{width:38px;height:38px;border-radius:12px}
.cp-h-ligne .cp-type-picto svg{width:19px;height:19px}
.cp-h-ligne-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cp-h-phrase{font-size:14.5px;line-height:1.35;color:var(--txt2);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cp-h-phrase b{color:var(--txt);font-weight:700}
.cp-h-quoi{color:var(--txt);font-weight:600}
.cp-h-ligne-corps small{font-size:12px;color:var(--faint)}
.cp-h-ligne>time{flex:none;align-self:flex-start;margin-top:3px;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.cp-h-vider{align-items:center;text-align:center;gap:12px}
.cp-h-vider>p{margin:0;max-width:36ch}
.cp-h-vider-ico{color:var(--err);background:color-mix(in srgb,var(--err) 9%,transparent);border-color:color-mix(in srgb,var(--err) 30%,var(--line2))}
.cp-h-liste-effets{margin:0;padding:12px 14px 12px 30px;text-align:left;font-size:13.5px;line-height:1.45;color:var(--dim);
  border:1px solid var(--line);border-radius:var(--r-ui);background:var(--bg)}
.cp-h-liste-effets li+li{margin-top:6px}
.cp-h-vider>.cp-rangee{width:100%}

/* ── La caméra : plein écran, photo par défaut, les flashcodes lus en visant ──────────────── */
.cp-cam{position:fixed;inset:0;z-index:120;background:#000;color:#fff;overflow:hidden;touch-action:none;
  animation:roue-voile var(--dur-2) var(--ease-soft) both}
.cp-cam.cp-part{animation:roue-voile-part var(--dur-1) var(--ease-soft) both;pointer-events:none}
.cp-cam-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--dur-2) var(--ease-soft)}
.cp-cam.cp-cam-prete .cp-cam-video{opacity:1}
.cp-cam.cp-cam-miroir .cp-cam-video{transform:scaleX(-1)}
.cp-cam-haut{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 18px;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.cp-cam-rond{width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;border:0;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(0,0,0,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:transform var(--dur-1) var(--ease-soft)}
.cp-cam-rond svg{width:21px;height:21px}
.cp-cam-rond:active{transform:scale(.9)}
.cp-cam-eclair[aria-pressed="true"]{background:var(--warn);color:#231a00;box-shadow:0 0 14px color-mix(in srgb,var(--warn) 65%,transparent)}
.cp-cam-qr{width:44px;height:44px;display:grid;place-items:center;color:rgba(255,255,255,.55)}
.cp-cam-qr svg{width:20px;height:20px}
.cp-cam.cp-cam-code-vu .cp-cam-qr{color:var(--prism-cyan);filter:drop-shadow(0 0 8px var(--prism-cyan))}
.cp-cam-chrono{padding:5px 12px;border-radius:var(--r-btn);background:var(--err);font:600 15px/1 ui-monospace,"SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums}
.cp-cam-bas{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:26px 22px calc(env(safe-area-inset-bottom) + 18px);background:linear-gradient(transparent,rgba(0,0,0,.6) 40%)}
.cp-cam-modes{display:flex;gap:4px;padding:3px;border-radius:var(--r-btn);background:rgba(0,0,0,.4)}
.cp-cam-mode{min-height:30px;padding:0 14px;border:0;border-radius:var(--r-btn);background:transparent;color:rgba(255,255,255,.72);
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:color var(--dur-1) var(--ease-soft),background var(--dur-1) var(--ease-soft)}
.cp-cam-mode[aria-selected="true"]{color:var(--warn);background:rgba(255,255,255,.1)}
.cp-cam.cp-cam-filme .cp-cam-modes{visibility:hidden}
.cp-cam-rangee{width:100%;max-width:420px;display:flex;align-items:center;justify-content:space-between}
/* Le déclencheur : l'anneau blanc d'un appareil photo ; en vidéo, le cœur devient rouge, puis un carré. */
.cp-cam-declencheur{width:76px;height:76px;padding:0;border:4px solid #fff;border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer}
.cp-cam-declencheur i{display:block;width:60px;height:60px;border-radius:50%;background:#fff;
  transition:transform var(--dur-1) var(--ease-soft),background var(--dur-2) var(--ease-soft),border-radius var(--dur-2) var(--ease-soft),width var(--dur-2) var(--ease-soft),height var(--dur-2) var(--ease-soft)}
.cp-cam-declencheur:active i{transform:scale(.9)}
.cp-cam[data-mode="video"] .cp-cam-declencheur i{background:var(--err)}
.cp-cam.cp-cam-filme .cp-cam-declencheur i{width:30px;height:30px;border-radius:8px}
/* Le code lu : un cadre sur lui, une pastille qui dit ce qu'il ouvre. */
.cp-cam-cadre{position:absolute;left:0;top:0;width:0;height:0;border-radius:18px;pointer-events:none;
  box-shadow:0 0 0 2px var(--prism-cyan),0 0 26px 2px color-mix(in srgb,var(--prism-cyan) 50%,transparent);
  transition:transform .12s linear,width .12s linear,height .12s linear}
.cp-cam-code{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 196px);transform:translateX(-50%);max-width:calc(100% - 40px);
  display:flex;align-items:center;gap:11px;padding:8px 18px 8px 8px;border:0;border-radius:var(--r-btn);cursor:pointer;text-align:left;
  color:var(--accent-ink);background:#fff;box-shadow:0 14px 40px -12px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.4)}
.cp-cam-code.cp-cam-code-entre{animation:cp-cam-code-entre var(--dur-2) var(--ease-soft) both}
@keyframes cp-cam-code-entre{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translateX(-50%)}}
.cp-cam-code-ico{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--accent-ink)}
.cp-cam-code-ico svg{width:18px;height:18px}
.cp-cam-code[data-genre="ami"] .cp-cam-code-ico{background:var(--prism-violet);color:var(--accent-ink)}
.cp-cam-code[data-genre="note"] .cp-cam-code-ico{background:var(--kind-note)}
.cp-cam-code-corps{min-width:0;display:flex;flex-direction:column}
.cp-cam-code-corps b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-cam-code-corps small{font-size:12px;color:#4b5160;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-cam-indice{position:absolute;left:20px;right:20px;top:calc(env(safe-area-inset-top) + 74px);margin:0;text-align:center;font-size:14px;font-weight:600;
  color:rgba(255,255,255,.9);text-shadow:0 1px 6px rgba(0,0,0,.7);pointer-events:none}
.cp-cam-indice:empty{display:none}
.cp-cam-erreur{position:absolute;left:20px;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;padding:20px;
  border-radius:var(--r-panel);background:var(--bg2);border:1px solid var(--line2);color:var(--txt);text-align:center}
.cp-cam-erreur p{margin:0;font-size:15px;line-height:1.45}
.cp-cam-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.cp-cam-flash.cp-cam-flash-on{animation:cp-cam-flash .32s var(--ease-soft) both}
@keyframes cp-cam-flash{0%{opacity:.85}100%{opacity:0}}
body.cp-cam-ouverte .cp-onglets{visibility:hidden}

@media (hover:hover) and (pointer:fine){
  .cp-onglet:hover{color:var(--txt2)}
  .cp-onglet[aria-current="page"]:hover{color:var(--txt)}
  .cp-ajout:hover{box-shadow:0 6px 22px color-mix(in srgb,var(--act-create) 38%,transparent),0 12px 30px -14px rgba(0,0,0,.8)}
  .cp-ajout:hover .cp-spectre::before{animation-play-state:running}
  :is(.cp-carte-note,.cp-resultat,.cp-retro,.cp-h-ligne):hover{border-color:color-mix(in srgb,var(--k) 38%,var(--line2))}
  .cp-tuile:hover{border-color:color-mix(in srgb,var(--k) 50%,var(--line2))}
  :is(.cp-ligne-moi,.cp-petit-geste):hover{border-color:color-mix(in srgb,var(--prism-cyan) 32%,var(--line2));background:color-mix(in srgb,var(--txt) 3%,var(--bg2))}
  .cp-code-repli>summary:hover b{color:var(--txt)}
  .cp-dest-choix[aria-checked="false"]:hover{color:var(--txt)}
  :is(a.note-link,.cp-lien-note,.cp-sous-note):hover{background:color-mix(in srgb,var(--kind-note) 14%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .cp-onglets,.dp-etat,.cp-envois-rond{transition:none}
  .cp-vue-entre,.cp-carte-note,.cp-resultat,.cp-tuile,.cp-cam,.cp-cam-code{animation:none !important}
  .cp-carte-fantome i,.cp-lignes-fantomes i{animation:none}
  .cp-cam-cadre{transition:none}
}

/* ══ 07/10/2026 — ÉPURE : la date dans la tête, le calendrier qui respire, des titres plus légers ══
   Max : « le calendrier, j'aimerais le rendre plus lisible, que les éléments prennent plus
   d'espace, que ce soit plus minimaliste. Pareil les polices : des titres, des textes un peu plus
   épurés. Faut que ça reste comme ça, c'est pas mal, mais épurer un peu l'interface. »
   ⛔ Les MÊMES polices, les MÊMES tokens : on retire du poids et des bordures, on n'invente rien. */

/* ── Le calendrier : des chiffres posés sur le fond, comme Calendrier d'Apple ─────────────── */
/* Le mois EST le titre de la vue : « Calendrier » au-dessus ne disait rien de plus (lu, pas vu). */
.cp-calendrier>.cp-vue-titre{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.njc-nav{margin:6px 0 20px}
.njc-mois{font-size:27px;font-weight:650;letter-spacing:-.02em;line-height:1.1}
.njc-mois span{font-weight:400;color:var(--faint)}
.njc-prev,.njc-next{border-color:transparent;background:transparent;color:var(--txt2)}
.njc-auj{border-color:transparent;border-radius:var(--r-btn);background:color-mix(in srgb,var(--kind-daily) 7%,transparent);color:var(--temps-txt);font-weight:600}
.njc-sem{margin-bottom:2px}
.njc-sem span{font-size:11px;font-weight:600;letter-spacing:.1em}
.njc-grille{column-gap:0;row-gap:4px;background:color-mix(in srgb,var(--kind-daily) 2%,var(--bg2));border-radius:16px}
/* Une case n'a plus de boîte : son chiffre, et dessous ce qu'elle porte. */
.njc-case,.njc-case.n1,.njc-case.n2,.njc-case.n3,.njc-case.futur{min-height:64px;gap:5px;padding:5px 0 8px;
  border:0;border-radius:16px;background:transparent;box-shadow:none}
.njc-num{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:17px;font-weight:450;color:var(--txt2)}
.njc-case.n2 .njc-num,.njc-case.n3 .njc-num{color:var(--txt);font-weight:600}
.njc-case.hors{opacity:.32}
/* L'activité du jour : une barre FINE sous les marques (la couleur va aux données, pas au contenant). */
.njc-case::before{content:"";position:absolute;left:50%;bottom:3px;width:0;height:2px;border-radius:2px;transform:translateX(-50%);
  background:var(--kind-daily);opacity:.72;transition:width var(--dur-2) var(--ease-soft)}
.njc-case.n1::before{width:18%}
.njc-case.n2::before{width:36%}
.njc-case.n3::before{width:54%}
/* Aujourd'hui : un anneau vert stable autour du chiffre, sans animation dans la vue principale. */
.njc-case.auj{box-shadow:none}
.njc-case.auj .njc-num{color:var(--prism-white);font-weight:700}
.njc-spectre{inset:auto;top:5px;left:50%;width:36px;height:36px;transform:translateX(-50%);border-radius:50%;padding:2px}
/* Le jour choisi : un disque doux derrière le chiffre, rien d'autre. */
.njc-case.sel{border:0;box-shadow:none;background:transparent}
.njc-case.sel .njc-num{background:color-mix(in srgb,var(--kind-daily) 9%,transparent);color:var(--temps-txt);font-weight:650}
.njc-case:active{transform:scale(.92)}
.cp-marques{gap:4px;min-height:7px}
.cp-marques i{width:7px;height:7px}
.cp-marques .cp-marque-note{width:12px;height:3px}
.cp-agenda{margin-top:22px;padding-top:18px}
.cp-agenda-tete strong{font-size:18px;font-weight:600;letter-spacing:-.01em}
@media (hover:hover){
  .njc-case:hover{background:color-mix(in srgb,var(--txt) 4%,transparent);border:0}
}

/* ── Les titres : moins de poids, plus d'air ──────────────────────────────────────────────── */
.cp-vue-titre{font-size:25px;font-weight:650;letter-spacing:-.015em}
.cp-vue-titre small{font-weight:500}
.cp-feuille-tete h2{font-size:17px;font-weight:600}
.np-date-jour{font-weight:650}
.cp-bloc-titre,.cp-reglages h3,.cp-retroliens h3{font-weight:600;letter-spacing:.1em}
.cp-vl-h1 .cp-v-texte,.np-view h1{font-weight:650;letter-spacing:-.015em}
.cp-vl-h2 .cp-v-texte,.np-view h2{font-weight:600;letter-spacing:-.01em}
.cp-vl-h3 .cp-v-texte,.np-view h3{font-weight:600}

/* ── Les petits téléphones (iPhone SE, mini : 320–375 px — 375 INCLUS : un iPhone 13 mini mesure 375, le seuil à 374 le laissait sur la mise en page des grands) : rien ne déborde, rien ne s'écrase ── */
@media (max-width:375px){
  body .cp-tete{gap:6px;padding-left:12px;padding-right:12px}
  .cp-tete .np-jour-pas{width:30px;height:34px}
  .np-date-lisible{padding:4px 11px}
  .np-date-jour{font-size:14px}
  .cp-tete-actions{gap:4px}
  .cp-tete .cp-rond-leger{width:34px;height:34px}
  .cp-vue{padding-left:14px;padding-right:14px}
  .njc-case,.njc-case.n1,.njc-case.n2,.njc-case.n3,.njc-case.futur{min-height:56px}
  .njc-num{width:32px;height:32px;font-size:16px}
  .njc-spectre{width:32px;height:32px}
  .njc-mois{font-size:23px}
  .cp-compose{gap:6px}
  .cp-compose .cp-rond-leger{width:36px;height:36px}
}
@media (max-width:339px){
  /* 320 px : la pilule seule — on change de jour d'un geste de côté. */
  .cp-tete .np-jour-pas{display:none}
}

/* ── La conversation s'écrit comme une note (07/10/2026) ──────────────────────────────────── */
/* Les gestes d'une note, au-dessus de la barre d'écriture : « / » ou « + ». Une rangée de pilules
   qui défile de côté, jamais une feuille (elle fermerait la conversation). */
.cp-gestes{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px;touch-action:pan-x;
  animation:dp-entree var(--dur-2) var(--ease-soft) both}
.cp-gestes::-webkit-scrollbar{display:none}
.cp-geste{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 6px;border:1px solid var(--line2);
  border-radius:var(--r-btn);background:var(--bg2);color:var(--txt);font-size:14px;font-weight:500;cursor:pointer;
  transition:transform var(--dur-1) var(--ease-bounce),border-color var(--dur-1) var(--ease-soft)}
.cp-geste:active{transform:scale(.95)}
.cp-geste-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.cp-geste-ico svg{width:16px;height:16px}
.cp-geste-premier{border-color:color-mix(in srgb,var(--accent) 55%,var(--line2))}
.cp-compose-plus[aria-expanded="true"] svg{transform:rotate(45deg)}
.cp-compose-plus svg{transition:transform var(--dur-2) var(--ease-soft)}
/* Un message-note dans sa bulle : le moteur des notes, à la taille d'une bulle. */
.cp-bulle-note-vive{font-size:15.5px;line-height:1.45}
.cp-bulle-note-vive>:first-child{margin-top:0}
.cp-bulle-note-vive>:last-child{margin-bottom:0}
.cp-bulle-note-vive h1,.cp-bulle-note-vive h2,.cp-bulle-note-vive h3{font-size:1.08em;margin:.5em 0 .2em}
.cp-bulle-note-vive h1{font-size:1.2em}
.cp-bulle-note-vive .note-tasks{margin:4px 0}
.cp-bulle-note-vive .note-task{grid-template-columns:30px minmax(0,1fr);min-height:32px}
.cp-bulle-note-vive .note-check{margin-left:2px}
.cp-tache-message[data-creux="1"]{padding-left:22px}
.cp-tache-message[data-creux="2"]{padding-left:44px}
.cp-tache-message[data-creux="3"],.cp-tache-message[data-creux="4"]{padding-left:60px}
/* La flèche d'une tâche mère (19/10/2026) : ouverte, elle pointe vers le bas ; repliée, vers la droite. */
.cp-tache-message[hidden]{display:none}
.cp-bulle-note-vive .note-task:has(> .cp-tache-pli){grid-template-columns:30px minmax(0,1fr) auto}
.cp-tache-pli{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;
  background:none;color:var(--faint);cursor:pointer}
.cp-tache-pli svg{width:14px;height:14px;transform:rotate(90deg);transition:transform var(--dur-2) var(--ease-soft)}
.cp-tache-message[data-plie] > .cp-tache-pli svg{transform:none}
@media (prefers-reduced-motion:reduce){.cp-tache-pli svg{transition:none}}
.cp-bulle-titre{display:block;font-weight:600;margin-bottom:2px}
/* ── Citer et réagir (10/2026) : la citation est un bouton (elle ramène au message cité), ──────
   les réactions se posent sur la bulle, la barre de réponse coiffe le compositeur. */
.cp-citation{display:block;width:100%;text-align:left;border:0;border-left:3px solid var(--prism-violet);border-radius:0 10px 10px 0;
  background:color-mix(in srgb,var(--prism-violet) 10%,transparent);padding:5px 9px;cursor:pointer;font-size:13px;line-height:1.35;
  transition:filter var(--dur-1) var(--ease-soft),background var(--dur-1) var(--ease-soft)}
.cp-citation:active{filter:brightness(1.15)}
.cp-citation b{display:block;font-size:12px;color:var(--prism-violet)}
.cp-citation span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}
.cp-reactions{align-self:flex-end;font-size:15px;line-height:1;background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:2px 8px;margin-top:-2px}
.cp-bulle.moi .cp-reactions{align-self:flex-start}
.cp-cite-vise{outline:2px solid var(--prism-violet);outline-offset:2px}
.cp-reponse{display:flex;align-items:center;gap:8px;flex:none;margin:0 10px 6px;padding:6px 6px 6px 10px;
  border-left:3px solid var(--prism-violet);border-radius:0 12px 12px 0;background:var(--bg2)}
.cp-reponse[hidden]{display:none}
/* La citation coiffe le champ en douceur (montrerCitation la démasque : l'entrée se rejoue). */
.cp-reponse:not([hidden]){animation:dp-entree var(--dur-2) var(--ease-soft) both}
.cp-reponse-qui{flex:none;font-size:12px;font-weight:600;color:var(--prism-violet)}
.cp-reponse-quoi{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;opacity:.85}
.cp-emojis{display:flex;gap:4px;justify-content:space-around;padding:6px 0}
.cp-emoji{font-size:30px;line-height:1;border:2px solid transparent;border-radius:14px;background:transparent;padding:6px 8px;cursor:pointer;
  transition:transform var(--dur-1) var(--ease-soft),background var(--dur-1) var(--ease-soft)}
.cp-emoji:active{transform:scale(1.18)}
.cp-emoji-moi{border-color:var(--prism-violet);background:color-mix(in srgb,var(--prism-violet) 12%,transparent)}
.cp-bulle-capsule{min-width:0}
.cp-attend-texte{color:var(--dim)}

/* ── L'arbre des tâches (07/10/2026) : la poignée, la tâche tenue, le rond qui se remplit ──── */
.cp-vive{position:relative}
/* La poignée vit dans la marge gauche, hors de la grille de la ligne ; elle n'apparaît qu'au
   survol d'un pointeur (au doigt, c'est l'appui long sur le rond qui prend la tâche). */
.cp-v-poignee{position:absolute;left:-26px;top:5px;width:22px;height:26px;padding:0;border:0;border-radius:6px;background:transparent;
  color:var(--faint);cursor:grab;opacity:0;touch-action:none;transition:opacity var(--dur-1) var(--ease-soft)}
.cp-v-poignee::before{content:"";position:absolute;inset:7px 7px;
  background:radial-gradient(circle,currentColor 1.3px,transparent 1.6px) 0 0/4px 4px}
@media (hover:hover) and (pointer:fine){
  .note-task.cp-v-ligne:hover>.cp-v-poignee{opacity:.8}
  .cp-v-poignee:hover{color:var(--txt);background:color-mix(in srgb,var(--txt) 6%,transparent)}
}
@media (hover:none){ .cp-v-poignee{display:none} }
.cp-v-glisse{user-select:none;-webkit-user-select:none}
.cp-v-tenu{z-index:5;border-radius:10px;background:var(--bg2);
  box-shadow:0 10px 28px -12px rgba(0,0,0,.85),0 0 0 1px color-mix(in srgb,var(--prism-violet) 35%,transparent);
  transition:none !important;will-change:transform}
.cp-v-insertion{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--accent);pointer-events:none;
  box-shadow:0 0 10px color-mix(in srgb,var(--prism-cyan) 60%,transparent)}
/* Une parente : son rond se REMPLIT de ses sous-tâches faites — la mécanique d'Exprism (`has-sub-ring`) :
   le secteur rouge du rond monte avec les feuilles faites, et la case passe au vert plein, coche
   comprise, quand la branche est finie. `--progres` est une propriété DÉCLARÉE : sans `@property`,
   deux `conic-gradient` ne s'interpolent pas et le rond sauterait au lieu de monter. */
@property --progres{syntax:"<number>";inherits:true;initial-value:0}
.note-check.cp-parente{
  /* Le stop de fin est décalé de .6° d'arc APRÈS le stop plein : l'arête du secteur est lissée. */
  background:conic-gradient(from -90deg,var(--err,#ff5f73) calc(var(--progres,0) * 1turn - .6deg),
    color-mix(in srgb,var(--err,#ff5f73) 9%,transparent) calc(var(--progres,0) * 1turn));
  transition:--progres var(--dur-2) var(--ease-soft),border-color var(--dur-1) var(--ease-soft),transform var(--dur-1) var(--ease-bounce)}
.note-task.done>.note-check.cp-parente{background:var(--ok)}
@media (prefers-reduced-motion:reduce){ .note-check.cp-parente{transition:none} }
/* BALAYER une ligne de liste (téléphone) : elle suit le doigt et dit ce que le lâcher ferait.
   `pan-y` : le défilement vertical reste au navigateur, l'horizontal est à nous. */
.note-task>.cp-v-texte,.cp-vl-puce>.cp-v-texte,.cp-vl-num>.cp-v-texte{touch-action:pan-y}
.cp-v-balaye{transition:none !important;will-change:transform;user-select:none;-webkit-user-select:none}
.cp-v-balaye::after{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;letter-spacing:.02em;
  color:var(--dim);pointer-events:none;opacity:0;transition:opacity var(--dur-1) var(--ease-soft)}
.cp-v-balaye[data-geste]::after{opacity:1}
.cp-v-balaye[data-geste="sous"]::after{content:"↳ sous-tâche";color:var(--ok)}
.cp-v-balaye[data-geste="remonte"]::after{content:"↰ remonter";color:var(--ok)}
.cp-v-balaye[data-geste="non"]::after{content:"impossible ici"}
/* La barre au-dessus du clavier : ⇤ ⇥ ↑ ↓ — seulement sans souris ni Tab (téléphone, tablette). */
.cp-vive.cp-v-avec-barre{padding-bottom:64px}
.cp-v-barre{position:fixed;left:0;right:0;bottom:0;z-index:96;display:flex;justify-content:center;gap:6px;
  padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg2) 94%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.cp-v-barre button{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:40px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r-btn);background:transparent;color:var(--txt);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background var(--dur-1) var(--ease-soft),opacity var(--dur-1) var(--ease-soft)}
.cp-v-barre button:active{background:var(--survol)}
.cp-v-barre button:disabled{opacity:.32;cursor:default}
.cp-v-barre-g{font-size:17px;line-height:1}
@media (hover:hover) and (pointer:fine){ .cp-v-barre{display:none} }
/* LA BARRE DE SÉLECTION (11/10/2026) : les outils du passage choisi — gras, italique, barré,
   surligné, note reliée, tâche. Elle vit au-dessus du clavier, comme la barre de niveau, et se
   tait sur un ordinateur, où ⌘B/⌘I existent déjà (`note_vive.js` suit la même règle que la barre
   de niveau : une seule barre au doigt, jamais deux). */
.cp-v-sbarre{position:fixed;left:0;right:0;bottom:0;z-index:97;display:flex;justify-content:center;align-items:center;gap:6px;
  padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg2) 94%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  animation:cp-monte var(--dur-2) var(--ease-soft) both}
.cp-v-sbarre button{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:40px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r-btn);background:transparent;color:var(--txt);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background var(--dur-1) var(--ease-soft)}
.cp-v-sbarre button:active{background:var(--survol)}
.cp-v-sbarre-sep{width:1px;align-self:stretch;margin:4px 2px;background:var(--line2)}
.cp-v-sbarre-hl{padding:0 5px;border-radius:4px;background:color-mix(in srgb,var(--accent) 22%,transparent)}
/* Sur ordinateur, la barre de sélection est une BULLE posée au-dessus du passage choisi (18/10/2026,
   Max : « quand on sélectionne dans une note on doit avoir les formatages sur la version bureau ») :
   pas de clavier à suivre, une souris qui est déjà là. `note_vive.js` la place (`left`, `top`). */
@media (hover:hover) and (pointer:fine){
  .cp-v-sbarre{left:auto;right:auto;bottom:auto;width:auto;padding:4px;gap:2px;border:1px solid var(--line2);border-radius:12px;
    background:color-mix(in srgb,var(--bg2) 94%,var(--bg));box-shadow:0 14px 34px -12px rgba(0,0,0,.85);
    animation:cp-bulle-sel var(--dur-1) var(--ease-soft) both}
  .cp-v-sbarre button{min-width:34px;height:32px;padding:0 9px;border-radius:8px;font-size:14px}
  .cp-v-sbarre button:hover{background:var(--survol)}
  .cp-v-sbarre[data-dessous]{animation-name:cp-bulle-sel-bas}
}
@keyframes cp-bulle-sel{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes cp-bulle-sel-bas{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Le rond des tâches d'une note, sur sa carte : un anneau qui se remplit, le compte à côté. */
.cp-carte-rond{display:inline-flex;align-items:center;gap:4px;flex:none;font-size:11px;font-weight:600;color:var(--dim);font-variant-numeric:tabular-nums}
.cp-carte-rond i{width:13px;height:13px;border-radius:50%;flex:none;
  background:conic-gradient(var(--ok) calc(var(--progres,0) * 1turn),color-mix(in srgb,var(--txt) 14%,transparent) 0);
  -webkit-mask:radial-gradient(circle,transparent 3.6px,#000 4px);mask:radial-gradient(circle,transparent 3.6px,#000 4px)}
.cp-carte-rond.plein{color:var(--ok)}
.cp-carte-rond.plein i{-webkit-mask:none;mask:none}

/* ── Supprimer des notes : choisir, puis la barre (08/10/2026) ───────────────────────────── */
.cp-vue-actions{display:flex;align-items:center;gap:8px}
.cp-carte-case{position:absolute;top:9px;right:9px;width:22px;height:22px;display:none;place-items:center;border-radius:50%;
  border:1.5px solid var(--line2);background:var(--bg);color:transparent}
.cp-carte-case svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cp-grille-notes[data-choix] .cp-carte-note .cp-carte-case{display:grid}
.cp-grille-notes[data-choix] .cp-carte-note .cp-carte-tete time{visibility:hidden}
.cp-carte-note.cp-sel-fermee{opacity:.38;cursor:not-allowed}
.cp-carte-note.cp-sel-fermee .cp-carte-case{display:none}
.cp-carte-note.cp-sel-on{border-color:var(--err);background:color-mix(in srgb,var(--err) 9%,var(--bg2))}
.cp-carte-note.cp-sel-on .cp-carte-case{background:var(--err);border-color:var(--err);color:#fff}
.cp-sel-barre{position:fixed;z-index:55;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + var(--dock-h) + 14px);
  display:flex;align-items:center;gap:8px;max-width:calc(100vw - 24px);padding:8px 8px 8px 16px;border-radius:var(--r-panel);
  border:1px solid var(--line2);background:var(--bg2);box-shadow:0 10px 30px rgb(0 0 0 / .35)}
.cp-sel-compte{flex:1;min-width:0;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-sel-suppr:disabled{opacity:.4}
.cp-feuille-actions .cp-supprimer{color:var(--err)}
body.cp-large .cp-sel-barre{left:var(--axe);bottom:22px}
.cp-media-origine{justify-self:start;align-self:flex-start;text-decoration:none}
/* Un lien direct reçu alors que l'expéditeur est hors ligne : son texte, ses médias, sa présence (13/10/2026). */
.cp-reception-apercu{display:grid;gap:8px;width:100%;max-height:34vh;overflow:auto;text-align:left}
.cp-reception-note{padding:10px 12px;border-radius:var(--r-panel);background:var(--bg)}
.cp-reception-note p{margin:4px 0 0;color:var(--faint);font-size:13px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cp-reception-media{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:var(--r-panel);background:var(--bg);font-size:13px}
.cp-presence{display:flex;align-items:center;gap:7px}
.cp-presence::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--faint)}
.cp-presence.en-ligne::before{background:var(--ok,#5fd08a)}

/* ── LES ENCARTS À REMPLIR (15/10/2026, `encarts.js`) ─────────────────────────────────────────
   Une place qui attend un média dans une note du Mac. Le cadre en pointillés dit « pas encore là »,
   l'accent du prisme dit « ceci se remplit » ; trois gros ronds, l'appareil photo mis en avant.
   ⛔ Jetons seulement, pas de glow (retour du 11/10). */
.cp-encarts{margin:0 0 14px}
.cp-encarts-titre{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;font-size:.82rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.cp-encarts-tout{all:unset;margin-left:auto;text-transform:none;letter-spacing:0;color:var(--accent);cursor:pointer}
.cp-encarts-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cp-encart{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:var(--r-ui);
  border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--line2));background:color-mix(in srgb,var(--bg2) 60%,transparent)}
.cp-encart-picto{flex:none;display:grid;place-items:center;color:var(--accent)}
.cp-encart-picto svg{width:20px;height:20px}
.cp-encart-corps{all:unset;flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;cursor:pointer;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.cp-encart-corps b{color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-encart-corps small{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-encart-ronds{flex:none;display:flex;gap:6px}
.cp-encart-rond{width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:var(--r-btn);
  border:1px solid var(--line2);background:transparent;color:var(--txt);cursor:pointer;
  transition:transform var(--dur-1) var(--ease-soft),border-color var(--dur-1) var(--ease-soft)}
.cp-encart-rond:active{transform:scale(.94)}
.cp-encart-rond svg{width:19px;height:19px}
.cp-encart-rond-fort{border-color:color-mix(in srgb,var(--accent) 70%,var(--line2));color:var(--accent)}
@media (prefers-reduced-motion:reduce){.cp-encart-rond{transition:none}.cp-encart-rond:active{transform:none}}

/* ── Le chargement des notes se voit avancer (15/10/2026) ─────────────────────────────────────
   Un pourcentage au-dessus des cartes fantômes ; une ligne fine au-dessus d'une grille déjà
   montrée, qui n'apparaît qu'au-delà d'un instant (une mise à jour rapide ne clignote pas).
   Pas de halo : une barre de faisceau, discrète. */
.cp-notes-progres{display:flex;flex-direction:column;gap:7px;margin:2px 0 12px;font-size:12.5px;font-weight:600;color:var(--txt2)}
.cp-notes-progres-texte{font-variant-numeric:tabular-nums}
.cp-notes-progres-barre{display:block;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.cp-notes-progres-barre i{display:block;height:100%;width:0;border-radius:inherit;background:var(--faisceau);transition:width var(--dur-2) var(--ease-soft)}
.cp-notes-progres[data-indetermine] .cp-notes-progres-barre i{width:30% !important;animation:cp-notes-va-vient 1.6s var(--ease-soft) infinite alternate}
@keyframes cp-notes-va-vient{from{transform:translateX(-100%)}to{transform:translateX(330%)}}
.cp-notes-maj{font-size:11.5px;color:var(--faint);animation:cp-notes-apparait var(--dur-2) var(--ease-soft) .45s both}
.cp-notes-maj .cp-notes-progres-barre{height:2px}
@keyframes cp-notes-apparait{from{opacity:0}to{opacity:1}}

/* ── Ce qu'on vient d'ajouter, en route vers l'ordinateur ─────────────────────────────────────
   Une carte de note comme les autres (sa couleur de type), au bord pointillé tant qu'elle n'est
   pas encore une note du carnet ; sa barre dit où en est l'envoi ou le travail de l'ordinateur. */
.cp-en-route{margin-bottom:10px}
.cp-en-route[hidden]{display:none}
.cp-carte-en-route{border-style:dashed;border-color:color-mix(in srgb,var(--k) 40%,var(--line2));min-height:112px}
.cp-carte-en-route[data-ouvrable]{border-style:solid}
.cp-carte-en-route[data-erreur]{border-color:color-mix(in srgb,var(--err) 55%,var(--line2))}
.cp-en-route-etat{font-size:12px;font-weight:600;color:var(--txt2)}
.cp-carte-en-route[data-erreur] .cp-en-route-etat{color:var(--err)}
.cp-en-route-barre{display:block;height:2px;margin-top:auto;border-radius:2px;background:var(--line);overflow:hidden}
.cp-en-route-barre i{display:block;height:100%;width:0;background:var(--k);transition:width var(--dur-2) var(--ease-soft)}
.cp-carte-en-route:not([data-vol]) .cp-en-route-barre{visibility:hidden}

/* Un bloc de tâches qui attend d'être bâti : une place à sa hauteur probable, un reflet discret. */
.cp-bloc-attente{border-radius:var(--r-panel);background:linear-gradient(90deg,var(--line) 0%,color-mix(in srgb,var(--txt) 6%,var(--line)) 50%,var(--line) 100%);
  background-size:200% 100%;opacity:.45;animation:cp-reflet 1.8s linear infinite}
@media (prefers-reduced-motion:reduce){
  .cp-notes-progres[data-indetermine] .cp-notes-progres-barre i,.cp-bloc-attente{animation:none}
  .cp-notes-maj{animation:none}
}

/* ── La synchronisation des notes, dite en mots (18/10/2026) ───────────────────────────────────
   Max : « ajoute un feed-back de sync et du versioning […] avec la mention quand c'est modifié sur
   la web app ou sur Exprism ». Une ligne sous le titre de chaque note (calme quand tout est là-bas,
   ambre quand ça attend, rouge seulement quand il faut choisir), la puce en tête, l'historique. */
.cp-synchro{display:flex;align-items:center;gap:8px;min-height:28px;margin:-2px 0 4px;color:var(--dim);font-size:13px;line-height:1.35}
.cp-synchro-texte{flex:1;min-width:0}
.cp-synchro-point{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 16%,transparent)}
.cp-synchro[data-ton="envoi"] .cp-synchro-point,.cp-synchro-resume[data-ton="envoi"] .cp-synchro-point{background:var(--prism-cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--prism-cyan) 18%,transparent);animation:cp-synchro-pouls 1.6s var(--ease-soft) infinite}
.cp-synchro[data-ton="attente"] .cp-synchro-point,.cp-synchro-resume[data-ton="attente"] .cp-synchro-point{background:var(--attente);box-shadow:0 0 0 3px color-mix(in srgb,var(--attente) 18%,transparent)}
.cp-synchro[data-ton="erreur"] .cp-synchro-point,.cp-synchro-resume[data-ton="erreur"] .cp-synchro-point{background:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 20%,transparent)}
.cp-synchro[data-ton="erreur"]{color:color-mix(in srgb,var(--err) 70%,var(--txt))}
@keyframes cp-synchro-pouls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.cp-synchro-versions{flex:none;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:var(--r-btn);
  border:1px solid var(--line2);background:transparent;color:var(--txt2);font:600 12.5px var(--font-ui);cursor:pointer}
.cp-synchro-versions svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cp-synchro-versions:active{background:var(--survol)}
/* La puce de la tête : un rond léger qui tourne quand ça part, un chiffre quand ça attend. */
.cp-synchro-puce{position:relative}
.cp-synchro-puce svg{transition:color var(--dur-1) var(--ease-soft)}
.cp-synchro-puce[data-ton="ok"]{color:var(--faint)}
.cp-synchro-puce[data-ton="envoi"]{color:var(--prism-cyan)}
.cp-synchro-puce[data-ton="envoi"] svg{animation:cp-synchro-tourne 1.4s linear infinite}
.cp-synchro-puce[data-ton="attente"]{color:var(--attente)}
.cp-synchro-puce[data-ton="erreur"]{color:var(--err)}
@keyframes cp-synchro-tourne{to{transform:rotate(360deg)}}
.cp-synchro-compte{position:absolute;top:2px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:9px;display:grid;place-items:center;
  font:800 10.5px/1 var(--font-ui);color:var(--accent-ink);background:currentColor;pointer-events:none}
.cp-synchro-compte:empty{display:none}
.cp-synchro-puce[data-ton="envoi"] .cp-synchro-compte{background:var(--prism-cyan)}
.cp-synchro-puce[data-ton="attente"] .cp-synchro-compte{background:var(--attente)}
.cp-synchro-puce[data-ton="erreur"] .cp-synchro-compte{background:var(--err);color:#fff}
@media (prefers-reduced-motion:reduce){ .cp-synchro-puce svg,.cp-synchro-point{animation:none !important} }
.cp-synchro-resume{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-ui);border:1px solid var(--line2);background:color-mix(in srgb,var(--bg2) 70%,transparent)}
.cp-synchro-resume strong{font-size:15px}
.cp-synchro-h{margin:10px 2px 0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);font-weight:700}
.cp-synchro-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:var(--r-ui);border:1px solid var(--line);
  background:transparent;color:var(--txt);text-align:left;font:inherit}
button.cp-synchro-item{cursor:pointer}
button.cp-synchro-item:active{background:var(--survol)}
.cp-synchro-item>svg{width:16px;height:16px;flex:none;color:var(--faint);fill:none;stroke:currentColor;stroke-width:1.8}
.cp-synchro-item-ico{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--survol);color:var(--dim)}
.cp-synchro-item-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cp-synchro-item[data-ton="erreur"] .cp-synchro-item-ico{color:var(--err);background:color-mix(in srgb,var(--err) 14%,transparent)}
.cp-synchro-item[data-ton="envoi"] .cp-synchro-item-ico{color:var(--prism-cyan)}
.cp-synchro-item[data-ton="attente"] .cp-synchro-item-ico{color:var(--attente)}
.cp-synchro-item-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cp-synchro-item-corps b{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-synchro-item-corps small{font-size:12.5px;color:var(--dim);line-height:1.35}
/* Deux versions de la même note : on le dit en tête, sans alarme — une décision, pas une panne. */
.cp-divergence{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 14px;border-radius:var(--r-ui);
  border:1px solid color-mix(in srgb,var(--attente) 42%,transparent);background:color-mix(in srgb,var(--attente) 9%,transparent);color:var(--txt);font-size:14px;line-height:1.4}
.cp-divergence>svg{width:18px;height:18px;flex:none;color:var(--attente);fill:none;stroke:currentColor;stroke-width:1.8}
.cp-divergence>span{flex:1 1 200px}
.cp-diff-legende{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--dim)}
.cp-diff-legende span{display:inline-flex;align-items:center;gap:6px}
.cp-diff-legende svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}
.cp-diff-l-plus{color:color-mix(in srgb,var(--ok) 80%,var(--txt))}
.cp-diff-l-moins{color:color-mix(in srgb,var(--err) 80%,var(--txt))}
.cp-diff{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-ui);overflow:hidden;font-family:var(--font-note);font-size:15px;line-height:1.5}
.cp-diff-ligne{display:grid;grid-template-columns:22px 1fr;gap:4px;padding:3px 10px 3px 4px;white-space:pre-wrap;overflow-wrap:anywhere}
.cp-diff-signe{text-align:center;color:var(--faint);font-weight:700}
.cp-diff-plus{background:color-mix(in srgb,var(--ok) 12%,transparent)}
.cp-diff-plus .cp-diff-signe{color:var(--ok)}
.cp-diff-moins{background:color-mix(in srgb,var(--err) 11%,transparent);color:color-mix(in srgb,var(--txt) 78%,transparent)}
.cp-diff-moins .cp-diff-signe{color:var(--err)}
.cp-diff-pareil{color:var(--txt2)}
.cp-comparer-choix{flex-wrap:wrap;position:sticky;bottom:0;padding:10px 0 2px;background:linear-gradient(transparent,var(--bg2) 30%)}
.cp-comparer-choix .cp-btn{flex:1 1 200px}
/* L'historique : chaque version dit où elle a été écrite. */
.cp-versions{display:flex;flex-direction:column;gap:6px}
.cp-version-ligne{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:var(--r-ui);border:1px solid var(--line);
  background:transparent;color:var(--txt);text-align:left;font:inherit;cursor:pointer}
.cp-version-ligne:active{background:var(--survol)}
.cp-version-ligne>svg{width:16px;height:16px;flex:none;color:var(--faint);fill:none;stroke:currentColor;stroke-width:1.8}
.cp-version-ico{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--prism-violet);background:color-mix(in srgb,var(--prism-violet) 13%,transparent)}
.cp-version-ligne[data-origine="web"] .cp-version-ico{color:var(--prism-cyan);background:color-mix(in srgb,var(--prism-cyan) 12%,transparent)}
.cp-version-conflit .cp-version-ico{color:var(--attente);background:color-mix(in srgb,var(--attente) 13%,transparent)}
.cp-version-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cp-version-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cp-version-corps b{font-size:14.5px;font-weight:600}
.cp-version-corps small{font-size:12.5px;color:var(--dim)}
.cp-version-meta{display:flex;align-items:center;gap:8px;margin:0;color:var(--dim);font-size:13px}
.cp-version-meta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.cp-version-texte{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-ui);background:color-mix(in srgb,var(--bg) 60%,transparent)}
.cp-version .cp-feuille-pied{flex-wrap:wrap;gap:8px}
.cp-version .cp-feuille-pied .cp-btn{flex:1 1 160px}
.cp-carte-deux{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;padding:2px 8px;border-radius:var(--r-btn);font-size:11.5px;font-weight:600;
  color:var(--attente);background:color-mix(in srgb,var(--attente) 12%,transparent)}
.cp-carte-deux svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8}

/* ── Écrire et lire une note : TOUT l'écran (18/10/2026) ───────────────────────────────────────
   Max : « quand on crée une note ça doit prendre toute la surface de l'écran ». Sur le téléphone, la
   note neuve, la note ouverte, la recherche et l'historique ne sont plus des feuilles posées sous une
   bande de page : elles occupent toute la zone VISIBLE (`--vue-h`, qui suit le clavier), la barre
   d'état comprise — plus aucune buée au-dessus. Sur ordinateur, elles restent des fenêtres. */
body:not(.cp-large) .cp-feuille:is(.cp-note-plein-ecran,.cp-feuille-note,.cp-feuille-recherche,.cp-feuille-versions,.cp-feuille-version,.cp-feuille-comparer){
  top:auto;bottom:var(--clavier,0px);height:var(--vue-h,100dvh);max-height:none;max-width:none;width:100%;
  padding-top:calc(env(safe-area-inset-top) + 2px);border:0;border-radius:0;background:var(--bg);box-shadow:none}
body.cp-clavier:not(.cp-large) .cp-feuille:is(.cp-note-plein-ecran,.cp-feuille-note,.cp-feuille-recherche,.cp-feuille-versions,.cp-feuille-version,.cp-feuille-comparer){
  padding-top:calc(env(safe-area-inset-top) + 2px);border-radius:0}
body:not(.cp-large) .cp-feuille:is(.cp-note-plein-ecran,.cp-feuille-note,.cp-feuille-recherche,.cp-feuille-versions,.cp-feuille-version,.cp-feuille-comparer) .cp-poignee{margin-top:2px}
/* Le corps d'une note ouverte plein écran : la colonne de lecture d'Exprism, pas plus large. */
body:not(.cp-large) .cp-feuille:is(.cp-note-plein-ecran,.cp-feuille-note) .cp-feuille-corps{width:100%;max-width:680px;margin-left:auto;margin-right:auto}

/* ── La barre d'état n'a jamais de buée (18/10/2026) ───────────────────────────────────────────
   iOS 26 floute ce qui défile SOUS la barre d'état quand rien ne la couvre. Un capot plein, à la
   couleur de la page, la couvre en permanence : le haut de l'écran est net, comme une app. */
.cp-capot{position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);z-index:35;background:var(--bg);pointer-events:none}
/* Le menu « [[ » et « / » flotte, collé à la ligne, jamais sous le clavier (`note_vive.placerMenu`). */
.cp-v-menu.cp-v-menu-flottant{position:fixed;z-index:98;margin:0;background:var(--bg2);overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.9);animation:cp-bulle-sel var(--dur-1) var(--ease-soft) both}
.cp-v-menu.cp-v-menu-flottant[data-dessus]{animation-name:cp-bulle-sel-bas}

/* ── La bascule journée ⇄ calendrier (18/10/2026, `bascule.js`) ─────────────────────────────────
   La vue qu'on quitte file hors de l'écran (vers le bas depuis la journée, vers le haut depuis le
   calendrier), l'autre arrive de l'autre bord. L'anneau naît dans l'écart que le doigt ouvre : il
   se remplit jusqu'au seuil, puis le spectre tourne (« une animation de chargement ») — chargé, ça
   bascule. */
.cp-vue-part-bas,.cp-vue-part-haut{transition:transform var(--dur-2) var(--ease-sortie),opacity var(--dur-2) var(--ease-sortie);opacity:0;pointer-events:none}
.cp-vue-part-bas{transform:translate3d(0,100vh,0)}
.cp-vue-part-haut{transform:translate3d(0,-100vh,0)}
.cp-vue-depuis-haut{animation:cp-vue-depuis-haut var(--dur-3) var(--ease-soft) both}
.cp-vue-depuis-bas{animation:cp-vue-depuis-bas var(--dur-3) var(--ease-soft) both}
@keyframes cp-vue-depuis-haut{from{opacity:0;transform:translate3d(0,-22vh,0)}to{opacity:1;transform:none}}
@keyframes cp-vue-depuis-bas{from{opacity:0;transform:translate3d(0,22vh,0)}to{opacity:1;transform:none}}
.cp-tirette{position:fixed;left:50%;z-index:45;width:46px;margin:-23px 0 0 -23px;display:flex;flex-direction:column;align-items:center;gap:6px;
  pointer-events:none;opacity:min(1,calc(var(--tirette-p,0) * 1.6))}
.cp-tirette[hidden]{display:none}
.cp-tirette-anneau{position:relative;width:46px;height:46px;border-radius:50%;
  background:conic-gradient(var(--prism-cyan) calc(var(--tirette-p,0) * 360deg),var(--line2) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  transform:scale(calc(.7 + var(--tirette-p,0) * .3))}
.cp-tirette-charge .cp-tirette-anneau{background:var(--rainbow-conic);transform:none;animation:cp-tirette-charge .42s linear both}
@keyframes cp-tirette-charge{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.cp-tirette-mot{font-size:12px;font-weight:600;color:var(--dim);letter-spacing:.01em;white-space:nowrap}
.cp-tirette-charge .cp-tirette-mot{color:var(--txt)}
/* Le doigt tire la journée ou le calendrier : la page, elle, ne rebondit pas par-dessus. */
html:has(body:not(.cp-large)[data-vue="jour"]),html:has(body:not(.cp-large)[data-vue="calendrier"]){overscroll-behavior-y:none}
@media (prefers-reduced-motion:reduce){
  .cp-vue-part-bas,.cp-vue-part-haut{transition:none}
  .cp-vue-depuis-haut,.cp-vue-depuis-bas,.cp-tirette-charge .cp-tirette-anneau{animation:none}
}

/* ── Messages en page : une vraie fenêtre, pas une feuille ────────────────────────────────
   La liste et la conversation vivent ici, jamais l'une sur l'autre : un seul en-tête (retour,
   nom, gestes), un seul défilement par écran, le fond verrouillé comme sous une feuille. */
#cp-conv-page{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:var(--bg);
  padding-top:calc(env(safe-area-inset-top,0px) + 8px)}
#cp-conv-page[hidden]{display:none}
/* ⛔ UN NOM LONG NE SE COUPE PLUS (10/2026) : deux lignes centrées au lieu des « … » — et le
   bouton reste à droite, aligné, que les gestes soient là ou non (la colonne garde sa place). */
.cp-page-tete{display:grid;grid-template-columns:44px minmax(0,1fr) auto 44px;align-items:center;gap:4px;
  padding:2px 6px 10px}
.cp-page-tete .cp-rond-leger{width:38px;height:38px;color:var(--txt2)}
.cp-page-titre{margin:0;font-size:17px;font-weight:700;line-height:1.25;text-align:center;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.cp-page-actions{display:flex;justify-content:flex-end;align-items:center}
.cp-page-actions:empty{visibility:hidden}
.cp-page-corps{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column}
.cp-page-corps[hidden]{display:none}
.cp-page-liste{gap:12px;padding:4px 16px calc(env(safe-area-inset-bottom,0px) + 16px)}
/* ⛔ LE CLAVIER NE MANGE PLUS LE CHAMP (10/2026) : SEUL LE FIL défile — l'en-tête et le
   compositeur sont fixes hors scroll (le champ reste visible en bas, rien ne vit sous lui).
   Le champ grandit, le fil rétrécit, rien ne se recouvre. */
.cp-page-discussion{padding:0 16px calc(env(safe-area-inset-bottom,0px) + var(--clavier,0px) + 12px);overflow:hidden}
.cp-page-discussion .cp-conversation{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.cp-page-discussion .cp-fil{flex:1;min-height:0;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;gap:10px;padding:10px 2px 14px}
/* Le champ d'écriture : plus haut, carré arrondi, collé au clavier, sans saut (17px : iOS ne zoome pas). */
.cp-page-discussion .cp-compose{flex:none;background:var(--bg);padding-top:8px}
/* ⛔ LE FIL GLISSE, IL NE SAUTE PAS (sauf mouvement réduit). */
@media (prefers-reduced-motion:no-preference){
  .cp-page-discussion .cp-fil{scroll-behavior:smooth}
}
.cp-page-discussion .cp-compose-champ{min-height:58px;max-height:220px;border-radius:18px;padding:15px 16px;font-size:17px}
@media (prefers-reduced-motion:reduce){.cp-page-discussion .cp-compose-champ{transition:none}}

/* ── La note d'une photo ou d'une vidéo (29/10/2026) : l'image se montre avec son champ ── */
.cp-media-note{display:flex;flex-direction:column;gap:10px}
.cp-media-note-apercu{width:100%;max-height:38vh;object-fit:contain;border-radius:14px;background:#000}
.cp-media-note-champ{min-height:76px;resize:vertical}