/* Kelsto, the interface. Built from chapter 9 (recherche/fondations/09-beaute.md):
   the iPhone's own grammar (SF Pro, large titles, grouped lists, sheets), so it
   reads as familiar in 50 ms (Tuch 2012) and costs no effort (Reber 2004).
   One accent from the logo, light or dark like the phone, text size like the
   phone, soft and rare motion. Choices traced in ../DESIGN.md. */
:root {
  --fond: #ffffff;
  --groupe: #f2f2f7;
  --carte: #ffffff;
  --texte: #000000;
  --doux: #6e6e73;
  --tres-doux: #aeaeb2;
  --trait: rgba(60, 60, 67, .18);
  --accent: #1f7ae0;
  --accent-doux: rgba(31, 122, 224, .12);
  --vert: #34c759;
  --rouge: #ff3b30;
  --bulle: #f0f0f5;
  --verre: rgba(255, 255, 255, .78);
  --ombre: 0 8px 30px rgba(0, 0, 0, .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #000000; --groupe: #000000; --carte: #1c1c1e; --texte: #ffffff;
    --doux: #98989f; --tres-doux: #636366; --trait: rgba(84, 84, 88, .55);
    --accent: #4da3ff; --accent-doux: rgba(77, 163, 255, .16); --bulle: #2c2c2e;
    --verre: rgba(28, 28, 30, .78); --ombre: 0 8px 30px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="sombre"] {
  --fond: #000000; --groupe: #000000; --carte: #1c1c1e; --texte: #ffffff;
  --doux: #98989f; --tres-doux: #636366; --trait: rgba(84, 84, 88, .55);
  --accent: #4da3ff; --accent-doux: rgba(77, 163, 255, .16); --bulle: #2c2c2e;
  --verre: rgba(28, 28, 30, .78); --ombre: 0 8px 30px rgba(0, 0, 0, .5);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: -apple-system-body; font-family: -apple-system, system-ui, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  letter-spacing: -.01em; height: 100dvh; overflow: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
[hidden] { display: none !important; }
.ecran { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--fond); }
@media (prefers-reduced-motion: no-preference) {
  .entre { animation: entre .32s cubic-bezier(.2, .8, .2, 1); }
  @keyframes entre { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ---------- onboarding: one question per screen, iPhone setup style ---------- */
.etape { flex: 1; overflow-y: auto; padding: calc(env(safe-area-inset-top) + 56px) 24px 24px; max-width: 560px; width: 100%; margin: 0 auto; }
.etape .icone { width: 64px; height: 64px; border-radius: 15px; display: block; margin: 8px auto 20px; }
.etape h1 { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; text-align: center; }
.etape .sous { color: var(--doux); text-align: center; margin: 0 auto 26px; line-height: 1.45; max-width: 420px; }
.etape.gauche h1, .etape.gauche .sous { text-align: start; margin-inline: 0; }
.bas { padding: 12px 24px calc(env(safe-area-inset-bottom) + 18px); max-width: 560px; width: 100%; margin: 0 auto; display: grid; gap: 10px; }
.principal { width: 100%; height: 52px; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 600; font-size: 17px; }
.principal:disabled { opacity: .35; }
.secondaire { width: 100%; height: 44px; color: var(--accent); font-weight: 500; }
.progression { position: absolute; top: calc(env(safe-area-inset-top) + 18px); inset-inline: 24px; height: 4px; border-radius: 2px; background: var(--trait); overflow: hidden; max-width: 512px; margin: 0 auto; }
.progression i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s; }
.retour { position: absolute; top: calc(env(safe-area-inset-top) + 30px); inset-inline-start: 14px; color: var(--accent); font-size: 17px; padding: 6px 8px; }

/* search field, like iOS */
.recherche { display: flex; align-items: center; gap: 8px; background: var(--bulle); border-radius: 11px; padding: 0 10px; height: 38px; margin-bottom: 18px; }
.recherche input { flex: 1; border: 0; background: none; outline: none; font-size: 17px; }
.recherche svg { color: var(--doux); flex: none; }

/* grouped list (Settings app) */
.groupe-titre { font-size: 13px; color: var(--doux); text-transform: uppercase; letter-spacing: .02em; margin: 22px 16px 7px; }
.groupe { background: var(--carte); border-radius: 12px; overflow: hidden; }
.etape .groupe, .feuille .groupe { background: var(--groupe); }
:root[data-theme="sombre"] .etape .groupe, :root[data-theme="sombre"] .feuille .groupe { background: var(--carte); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .etape .groupe, :root:not([data-theme="clair"]) .feuille .groupe { background: var(--carte); } }
.ligne { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 16px; width: 100%; text-align: start; position: relative; }
.ligne + .ligne::before { content: ""; position: absolute; top: 0; inset-inline-start: 16px; inset-inline-end: 0; border-top: .5px solid var(--trait); }
.ligne .titre { flex: 1; min-width: 0; }
.ligne .titre small { display: block; color: var(--doux); font-size: 14px; margin-top: 2px; }
.ligne .valeur { color: var(--doux); }
.ligne .coche { color: var(--accent); font-weight: 600; visibility: hidden; }
.ligne.choisi .coche { visibility: visible; }
.ligne .chevron { color: var(--tres-doux); }
.ligne.danger { color: var(--rouge); }
.ligne:active { background: var(--trait); }
.ligne input[type=text], .ligne input:not([type]), .ligne select { border: 0; background: none; text-align: end; outline: none; color: var(--doux); max-width: 55%; }
.ligne select { appearance: none; }
.note { color: var(--doux); font-size: 13px; margin: 8px 16px 0; line-height: 1.4; }

/* answer cards (questionnaire) */
.choix { display: grid; gap: 10px; }
.choix button { text-align: start; padding: 16px 18px; border-radius: 14px; background: var(--bulle); line-height: 1.35; border: 2px solid transparent; transition: border-color .15s, background .15s; }
.choix button.choisi { border-color: var(--accent); background: var(--accent-doux); }
.champ-libre { width: 100%; min-height: 110px; border-radius: 14px; border: 0; background: var(--bulle); padding: 14px 16px; resize: none; outline: none; font-size: 17px; line-height: 1.4; }
.champ { width: 100%; height: 50px; border-radius: 12px; border: 0; background: var(--bulle); padding: 0 16px; outline: none; font-size: 17px; margin-bottom: 10px; }
.erreur { color: var(--rouge); min-height: 1.3em; margin: 4px 0 0; font-size: 15px; text-align: center; }
.conditions { background: var(--bulle); border-radius: 14px; padding: 16px 18px; line-height: 1.5; font-size: 15px; }
.conditions h3 { font-size: 15px; margin: 14px 0 4px; }
.conditions h3:first-child { margin-top: 0; }
.conditions p { margin: 0; color: var(--doux); }

/* ---------- the app ---------- */
#app { position: fixed; inset: 0; display: flex; }
.barre { display: flex; align-items: center; gap: 4px; padding: calc(env(safe-area-inset-top) + 6px) 8px 6px; min-height: 52px; background: var(--verre); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: .5px solid var(--trait); position: relative; z-index: 2; }
.barre .titre-chat { flex: 1; text-align: center; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.rond { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--texte); flex: none; }
.rond:active { background: var(--trait); }
main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }

/* drawer from the left (round 33) */
aside { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(320px, 84vw); background: var(--groupe); z-index: 20; transform: translateX(-100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 10px) 10px calc(env(safe-area-inset-bottom) + 10px); }
[dir="rtl"] aside { transform: translateX(100%); }
aside.ouvert { transform: none; }
#voile { position: fixed; inset: 0; background: rgba(0, 0, 0, .3); z-index: 15; }
.tete-tiroir { display: flex; align-items: center; gap: 10px; padding: 6px 8px 12px; }
.tete-tiroir img { width: 30px; height: 30px; border-radius: 8px; }
.tete-tiroir strong { font-size: 20px; flex: 1; }
.nouveau { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--carte); font-weight: 600; margin-bottom: 8px; }
.cherche-chats { margin: 0 2px 6px; }
#liste-chats { flex: 1; overflow-y: auto; }
.jour { font-size: 13px; color: var(--doux); font-weight: 600; padding: 14px 12px 6px; }
#liste-chats button { display: block; width: 100%; text-align: start; padding: 10px 12px; border-radius: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#liste-chats button.actif { background: var(--carte); font-weight: 600; }
.bas-tiroir { border-top: .5px solid var(--trait); padding-top: 8px; display: flex; align-items: center; gap: 10px; }
.moi { display: flex; align-items: center; gap: 10px; flex: 1; padding: 8px; border-radius: 12px; text-align: start; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 600; flex: none; }
@media (min-width: 900px) {
  aside { position: static; transform: none !important; border-inline-end: .5px solid var(--trait); }
  #voile, #ouvrir-tiroir { display: none !important; }
}

/* the thread */
#fil { flex: 1; overflow-y: auto; padding: 18px 16px 10px; }
.accueil { min-height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; text-align: center; padding-bottom: 40px; }
.accueil h2 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 520px; }
.suggestions button { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: .5px solid var(--trait); background: var(--carte); color: var(--texte); font-size: 15px; }
.suggestions button svg { color: var(--accent); }
.msg { max-width: 720px; margin: 0 auto 20px; line-height: 1.5; overflow-wrap: anywhere; font-size: 17px; }
.msg.moi { display: flex; justify-content: flex-end; }
.msg.moi .bulle { background: var(--accent); color: #fff; padding: 9px 14px; border-radius: 20px; border-end-end-radius: 6px; max-width: 82%; white-space: pre-wrap; }
.msg.moi .bulle .joint { display: block; font-size: 13px; opacity: .85; margin-top: 3px; }
.msg.kelsto .corps p { margin: 0 0 .6em; }
.msg.kelsto .corps ul { margin: .2em 0 .7em; padding-inline-start: 1.3em; }
.msg.kelsto .corps strong { font-weight: 600; }
.msg.kelsto .corps .titre-md { display: block; font-weight: 700; font-size: 18px; margin: .4em 0 .3em; }
.msg.kelsto .corps code { font: .88em ui-monospace, "SF Mono", monospace; background: var(--bulle); padding: 1px 5px; border-radius: 5px; }
.msg.kelsto .corps pre { font: .82em/1.5 ui-monospace, "SF Mono", monospace; background: var(--bulle); border-radius: 12px; padding: 12px 14px; overflow-x: auto; }
.msg.kelsto .corps.flux { white-space: pre-wrap; }
.etapes { list-style: none; padding: 0; margin: 0 0 8px; font-size: 14px; color: var(--doux); display: grid; gap: 3px; }
.etapes li { display: flex; align-items: center; gap: 7px; }
.etapes li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--vert); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat, linear-gradient(#000, #000); -webkit-mask-composite: source-over; }
.etapes li.encours::before { background: none; border: 2px solid var(--accent); border-top-color: transparent; animation: tourne .8s linear infinite; -webkit-mask: none; }
@keyframes tourne { to { transform: rotate(360deg); } }
.pensee { font-size: 14px; color: var(--doux); border-inline-start: 2px solid var(--trait); padding-inline-start: 10px; margin-bottom: 8px; max-height: 4.5em; overflow: hidden; }
.point { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8fe6cf, var(--accent) 70%); }
.point.mini { width: 12px; height: 12px; display: inline-block; vertical-align: middle; }
@media (prefers-reduced-motion: no-preference) { .point.vit { animation: respire 1.6s ease-in-out infinite; } }
@keyframes respire { 0%, 100% { transform: scale(.85); opacity: .7; } 50% { transform: scale(1); opacity: 1; } }
.sources { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.sources a { font-size: 13px; color: var(--texte); background: var(--bulle); padding: 5px 10px; border-radius: 999px; text-decoration: none; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actions { margin-top: 4px; display: flex; gap: 2px; }
.actions button { width: 34px; height: 30px; border-radius: 8px; color: var(--doux); display: grid; place-items: center; }
.actions button:active, .actions button.fait { color: var(--accent); }
.ameliore { font-size: 13px; color: var(--vert); margin-top: 4px; }
.fichier-genere { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--bulle); text-decoration: none; color: var(--texte); max-width: 360px; }
.fichier-genere .ext { width: 38px; height: 46px; border-radius: 7px; background: #d24726; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }

/* input */
#saisie { padding: 6px 12px calc(env(safe-area-inset-bottom) + 10px); }
.boite { max-width: 760px; margin: 0 auto; background: var(--carte); border: .5px solid var(--trait); border-radius: 24px; box-shadow: var(--ombre); padding: 6px 6px 6px 8px; }
#pieces { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 4px 0; }
#pieces span { font-size: 13px; background: var(--bulle); padding: 5px 10px; border-radius: 10px; }
.boite .rangee { display: flex; align-items: flex-end; gap: 4px; }
#texte { flex: 1; resize: none; border: 0; background: none; outline: none; padding: 9px 6px; max-height: 40vh; font-size: 17px; line-height: 1.35; }
.joindre { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--doux); cursor: pointer; flex: none; }
#micro { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--doux); flex: none; }
#micro.ecoute { background: var(--rouge); color: #fff; }
#envoyer { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; margin: 1px; }
#envoyer:disabled { background: var(--trait); }

/* sheets (settings, memory, files) */
.feuille { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--groupe); }
@media (min-width: 700px) { .feuille { inset: 5vh calc(50% - 300px); border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .3); overflow: hidden; } }
.feuille .tete { display: flex; align-items: center; padding: calc(env(safe-area-inset-top) + 8px) 12px 8px; min-height: 52px; border-bottom: .5px solid var(--trait); background: var(--verre); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.feuille .tete h2 { flex: 1; text-align: center; font-size: 17px; margin: 0; }
.feuille .tete button { color: var(--accent); font-weight: 600; min-width: 70px; text-align: end; }
.feuille .tete .retour-f { text-align: start; font-weight: 400; }
.feuille .corps-f { flex: 1; overflow-y: auto; padding: 8px 16px 40px; }
.fait-memoire { padding: 12px 16px; }
.fait-memoire small { color: var(--doux); font-size: 13px; }
.fait-memoire textarea { width: 100%; border: 0; background: none; resize: none; outline: none; padding: 4px 0; font-size: 16px; }
.fait-memoire .boutons { display: flex; gap: 16px; }
.fait-memoire .boutons button { color: var(--accent); font-size: 15px; }
.fait-memoire .boutons .effacer { color: var(--rouge); }
.vide { color: var(--doux); text-align: center; padding: 40px 20px; line-height: 1.5; }
.toast { position: fixed; bottom: calc(env(safe-area-inset-bottom) + 90px); left: 50%; transform: translateX(-50%); background: var(--texte); color: var(--fond); padding: 10px 16px; border-radius: 12px; font-size: 15px; z-index: 50; }

/* ---------- additions: centred onboarding, counter ---------- */
.etape.centre { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.point.grand { width: 92px; height: 92px; margin: 0 auto 30px; }
.compteur { color: var(--accent); font-weight: 600; font-size: 14px; margin: 0 0 8px; }

/* ---------- the working line (chapter 6): one living line, the raw thought never shown ---------- */
.travail { margin: 0 0 10px; }
.tete-travail { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px 7px 10px; border-radius: 999px; background: var(--bulle); color: var(--doux); font-size: 15px; }
.travail.vivant .tete-travail { background: var(--accent-doux); color: var(--texte); }
.tete-travail .chrono { font-variant-numeric: tabular-nums; color: var(--doux); font-size: 14px; }
.brille { font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .travail.vivant .brille { background: linear-gradient(90deg, var(--doux) 0%, var(--texte) 40%, var(--accent) 50%, var(--texte) 60%, var(--doux) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: balaye 1.8s linear infinite; }
  @keyframes balaye { from { background-position: 100% 0; } to { background-position: -150% 0; } }
  .etapes li { animation: entre .28s cubic-bezier(.2, .8, .2, 1); }
  .etapes li.faite::before { animation: pop .3s cubic-bezier(.3, 1.6, .5, 1); }
  @keyframes pop { from { transform: scale(.2); } to { transform: scale(1); } }
}
.travail .etapes { display: none; margin: 8px 4px 0; }
.travail.ouvert .etapes { display: grid; }
.etapes li.faite::before { content: "✓"; color: #fff; background: var(--vert); width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; -webkit-mask: none; }
.etapes li.encours::before { content: ""; width: 12px; height: 12px; margin: 2px; border-radius: 50%; border: 2px solid var(--accent); border-top-color: transparent; background: none; -webkit-mask: none; animation: tourne .8s linear infinite; }
.point.vit-lent { animation: respire 3s ease-in-out infinite; }
img.dessin { display: block; max-width: min(420px, 100%); border-radius: 14px; margin-top: 10px; background: #fff; }

/* the input row now has dictation and call */
#appel { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--doux); flex: none; }
#micro.ecoute { background: var(--rouge); color: #fff; }
@media (prefers-reduced-motion: no-preference) { #micro.ecoute { animation: respire 1.2s ease-in-out infinite; } }

/* ---------- the call screen ---------- */
.appel-ecran { position: fixed; inset: 0; z-index: 60; background: #08080a; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 60px) 24px calc(env(safe-area-inset-bottom) + 40px); text-align: center; }
.appel-nom { font-size: 30px; font-weight: 600; }
.appel-chrono { color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; margin-top: -40px; }
.appel-vue { width: 100%; display: grid; place-items: center; }
.lumieres-appel { display: block; }
.appel-etat { color: rgba(255, 255, 255, .7); min-height: 1.4em; }
.raccrocher { width: 72px; height: 72px; border-radius: 50%; background: var(--rouge); color: #fff; display: grid; place-items: center; }

/* ---------- drawer extras and settings card ---------- */
.raccourcis { display: grid; gap: 2px; padding: 6px 0; border-top: .5px solid var(--trait); }
.raccourcis button { text-align: start; padding: 9px 12px; border-radius: 10px; color: var(--doux); }
.moi .reglage-ic { color: var(--doux); font-size: 18px; }
.carte-moi { display: grid; justify-items: center; gap: 4px; padding: 18px 0 6px; }
.carte-moi small { color: var(--doux); }
.avatar.grand { width: 72px; height: 72px; font-size: 30px; margin-bottom: 6px; }
.fait-memoire { display: block !important; }
#envoyer.stop { background: var(--texte); color: var(--fond); }

.ouvrir-bouton { display: inline-flex; align-items: center; margin-top: 10px; padding: 11px 18px; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; }

/* =====================================================================
   Kelsto's own identity, from the logo (20 October, second pass).
   Night ink #12161C, Mediterranean teal #7FE0C4, sea blue #4DA3FF, paper.
   One family: the iPhone's SF, rounded for titles (warmer for his mother).
   One memorable thing: the living orb. Everything else stays quiet.
   ===================================================================== */
:root {
  --encre: #12161c; --sarcelle: #3fb89a; --sarcelle-vive: #7fe0c4; --mer: #2f86e6; --papier: #fbfcfd; --brume: #eef2f5;
  --fond: var(--papier); --groupe: var(--brume); --carte: #ffffff; --texte: var(--encre); --doux: #5d6672; --tres-doux: #a3abb5;
  --trait: rgba(18, 22, 28, .1); --accent: var(--mer); --accent-doux: rgba(47, 134, 230, .1); --bulle: var(--brume);
  --arrondi: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #0d1015; --groupe: #0d1015; --carte: #171b22; --texte: #eef2f5; --doux: #9aa4b0; --tres-doux: #5b6470;
    --trait: rgba(238, 242, 245, .09); --accent: #4da3ff; --accent-doux: rgba(77, 163, 255, .14); --bulle: #1d222a;
  }
}
:root[data-theme="sombre"] {
  --fond: #0d1015; --groupe: #0d1015; --carte: #171b22; --texte: #eef2f5; --doux: #9aa4b0; --tres-doux: #5b6470;
  --trait: rgba(238, 242, 245, .09); --accent: #4da3ff; --accent-doux: rgba(77, 163, 255, .14); --bulle: #1d222a;
}

/* the orb: the one bold thing */
.point { background: radial-gradient(circle at 32% 28%, #c9fff0 0%, var(--sarcelle-vive) 22%, var(--mer) 62%, #123a6b 100%); box-shadow: 0 10px 40px rgba(47, 134, 230, .28); }
.point.grand { width: 120px; height: 120px; margin-bottom: 36px; }
@media (prefers-reduced-motion: no-preference) {
  .point.grand, .accueil .point { animation: flotte 6s ease-in-out infinite; }
  @keyframes flotte { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.03); } }
}

/* titles */
.etape h1, .accueil h2, .appel-nom, .carte-moi strong { font-family: var(--arrondi); font-weight: 700; letter-spacing: -.015em; }
.etape h1 { font-size: 32px; }
.accueil h2 { font-size: 28px; max-width: 520px; line-height: 1.2; }
.etape .sous { font-size: 17px; }
.compteur { font-family: var(--arrondi); color: var(--sarcelle); }

/* segmented progress, one segment per question */
.progression { height: 5px; background: var(--trait); }
.progression i { background: linear-gradient(90deg, var(--sarcelle-vive), var(--mer)); }

/* choices: large rounded pills with a radio ring */
.choix button { display: flex; align-items: center; gap: 14px; justify-content: space-between; padding: 18px 20px; border-radius: 18px; background: var(--carte); border: 1.5px solid var(--trait); font-size: 17px; }
.choix button .rond-choix { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--tres-doux); flex: none; transition: all .15s; }
.choix button.choisi { border-color: var(--mer); background: var(--accent-doux); }
.choix button.choisi .rond-choix { border-color: var(--mer); background: var(--mer); box-shadow: inset 0 0 0 4px var(--carte); }
.champ-libre, .champ { background: var(--carte); border: 1.5px solid var(--trait); }
.champ-libre:focus, .champ:focus { border-color: var(--mer); }
.sous-choix { min-height: 80px; margin-top: -2px; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.puce { padding: 9px 14px; border-radius: 999px; background: var(--carte); border: 1.5px solid var(--trait); font-size: 15px; }
.puce:active { border-color: var(--mer); }
.principal { background: var(--encre); color: #fff; border-radius: 16px; height: 54px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .principal { background: #eef2f5; color: #0d1015; } }
:root[data-theme="sombre"] .principal { background: #eef2f5; color: #0d1015; }
.etape .groupe, .feuille .groupe { background: var(--carte); border: 1px solid var(--trait); }
.conditions { background: var(--carte); border: 1px solid var(--trait); }
.recherche { background: var(--carte); border: 1px solid var(--trait); }

/* chat */
.msg.moi .bulle { background: var(--encre); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .msg.moi .bulle { background: #26303d; } }
:root[data-theme="sombre"] .msg.moi .bulle { background: #26303d; }
.suggestions button { border: 1.5px solid var(--trait); padding: 11px 15px; }
.suggestions button svg { color: var(--sarcelle); }
.boite { border-radius: 26px; border: 1.5px solid var(--trait); box-shadow: 0 6px 24px rgba(18, 22, 28, .06); }
#envoyer { background: var(--encre); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) #envoyer { background: #eef2f5; color: #0d1015; } }
:root[data-theme="sombre"] #envoyer { background: #eef2f5; color: #0d1015; }
#envoyer:disabled { background: var(--trait); color: var(--tres-doux); }
.tete-travail { background: transparent; padding-inline-start: 0; }
.travail.vivant .tete-travail { background: transparent; }
.nouveau { background: var(--carte); border: 1px solid var(--trait); }
#liste-chats button.actif { background: var(--carte); }

/* =====================================================================
   The postcard (20 October, third pass): what made the old app beautiful.
   His own Canva images (Raouché, Paris, the cedars), full screen, breathing
   slowly in depth; frosted glass on top, white type. One bold thing: the
   place. Everything else is glass and type.
   ===================================================================== */
#scene { position: fixed; inset: -4%; z-index: -2; background: center / cover no-repeat; transform-origin: 50% 60%; }
#scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 10, 18, .38) 0%, rgba(6, 10, 18, .52) 45%, rgba(6, 10, 18, .78) 100%); }
@media (prefers-reduced-motion: no-preference) {
  #scene { animation: profondeur 38s ease-in-out infinite alternate; }
  @keyframes profondeur { from { transform: scale(1.04) translate3d(-1%, .6%, 0); } to { transform: scale(1.12) translate3d(1.2%, -1%, 0); } }
}
:root.carte-postale {
  --fond: transparent; --groupe: transparent; --texte: #ffffff; --doux: rgba(255, 255, 255, .72); --tres-doux: rgba(255, 255, 255, .45);
  --trait: rgba(255, 255, 255, .16); --carte: rgba(18, 24, 34, .42); --bulle: rgba(255, 255, 255, .12);
  --accent: #8fd3ff; --accent-doux: rgba(143, 211, 255, .18); --verre: rgba(14, 18, 26, .38); --encre: #ffffff;
  color-scheme: dark;
}
:root.carte-postale body { background: #0b0f16; color: #fff; }
:root.carte-postale .ecran, :root.carte-postale #app { background: transparent; }
:root.carte-postale .etape h1, :root.carte-postale .accueil h2 { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
:root.carte-postale .etape h1 { font-size: 36px; }
:root.carte-postale .etape .sous { color: rgba(255, 255, 255, .82); }
/* glass */
:root.carte-postale .groupe, :root.carte-postale .choix button, :root.carte-postale .champ, :root.carte-postale .champ-libre,
:root.carte-postale .recherche, :root.carte-postale .conditions, :root.carte-postale .puce, :root.carte-postale .boite,
:root.carte-postale .suggestions button, :root.carte-postale .nouveau, :root.carte-postale aside, :root.carte-postale .barre,
:root.carte-postale .feuille, :root.carte-postale .feuille .tete, :root.carte-postale .tete-travail {
  background: rgba(18, 24, 34, .42); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border-color: rgba(255, 255, 255, .16); color: #fff;
}
:root.carte-postale .etape .groupe, :root.carte-postale .feuille .groupe { background: rgba(18, 24, 34, .42); border: 1px solid rgba(255, 255, 255, .14); }
:root.carte-postale .choix button.choisi { background: rgba(143, 211, 255, .22); border-color: #8fd3ff; }
:root.carte-postale .choix button .rond-choix { border-color: rgba(255, 255, 255, .5); }
:root.carte-postale .choix button.choisi .rond-choix { background: #8fd3ff; border-color: #8fd3ff; box-shadow: inset 0 0 0 4px rgba(18, 24, 34, .9); }
:root.carte-postale .principal { background: #ffffff; color: #0b0f16; }
:root.carte-postale #envoyer { background: #ffffff; color: #0b0f16; }
:root.carte-postale #envoyer:disabled { background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .5); }
:root.carte-postale .msg.moi .bulle { background: rgba(255, 255, 255, .92); color: #0b0f16; }
:root.carte-postale .msg.kelsto .corps { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
:root.carte-postale .msg.kelsto .corps pre, :root.carte-postale .msg.kelsto .corps code { background: rgba(10, 14, 20, .55); }
:root.carte-postale .barre { border-bottom-color: rgba(255, 255, 255, .1); }
:root.carte-postale aside { border-inline-end: 1px solid rgba(255, 255, 255, .1); }
:root.carte-postale #liste-chats button.actif { background: rgba(255, 255, 255, .14); }
:root.carte-postale .feuille { background: rgba(10, 14, 20, .55); }
:root.carte-postale .groupe-titre, :root.carte-postale .jour { text-transform: none; letter-spacing: 0; font-size: 14px; color: rgba(255, 255, 255, .7); }
:root.carte-postale .progression { background: rgba(255, 255, 255, .18); }
:root.carte-postale .progression i { background: #fff; }
:root.carte-postale .compteur { color: #8fd3ff; }
:root.carte-postale .ligne + .ligne::before { border-top-color: rgba(255, 255, 255, .12); }
:root.carte-postale .sources a, :root.carte-postale .fichier-genere { background: rgba(18, 24, 34, .55); color: #fff; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
:root.carte-postale .toast { background: rgba(255, 255, 255, .95); color: #0b0f16; }
:root.carte-postale .travail.vivant .brille { background: linear-gradient(90deg, rgba(255,255,255,.55) 0%, #fff 40%, #8fd3ff 50%, #fff 60%, rgba(255,255,255,.55) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }

/* =====================================================================
   LUMIÈRE (22 October 2026, his carte blanche): the style of the sites he
   validated, sheets of light moving slowly in a deep night, glass on top,
   the orb that breathes while Kelsto works. One bold thing: the light.
   The postcard mode (his photos) still wins when he chooses it.
   ===================================================================== */
:root {
  --nuit: #f3f6fa; --lueur-a: rgba(63, 184, 154, .26); --lueur-b: rgba(47, 134, 230, .22); --lueur-c: rgba(140, 120, 255, .14);
  --verre-l: rgba(255, 255, 255, .62); --verre-bord: rgba(18, 22, 28, .08); --halo: rgba(47, 134, 230, .28);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) {
  --nuit: #08080a; --lueur-a: rgba(40, 110, 200, .46); --lueur-b: rgba(40, 150, 170, .34); --lueur-c: rgba(72, 147, 252, .40);
  --verre-l: rgba(16, 21, 30, .52); --verre-bord: rgba(255, 255, 255, .08); --halo: rgba(77, 163, 255, .45);
  --fond: transparent; --groupe: transparent; --carte: rgba(22, 28, 38, .72); --bulle: rgba(255, 255, 255, .07);
} }
:root[data-theme="sombre"] {
  --nuit: #08080a; --lueur-a: rgba(40, 110, 200, .46); --lueur-b: rgba(40, 150, 170, .34); --lueur-c: rgba(72, 147, 252, .40);
  --verre-l: rgba(16, 21, 30, .52); --verre-bord: rgba(255, 255, 255, .08); --halo: rgba(77, 163, 255, .45);
  --fond: transparent; --groupe: transparent; --carte: rgba(22, 28, 38, .72); --bulle: rgba(255, 255, 255, .07);
}
:root:not(.carte-postale) body { background: var(--nuit); }
:root:not(.carte-postale) .ecran, :root:not(.carte-postale) #app { background: transparent; }
#lumiere { position: fixed; inset: -20%; z-index: -1; pointer-events: none; filter: blur(60px); }
#lumiere i { position: absolute; border-radius: 50%; }
#lumiere i:nth-child(1) { width: 60vmax; height: 60vmax; left: 5%; top: 0%; background: radial-gradient(circle, var(--lueur-a), transparent 65%); }
#lumiere i:nth-child(2) { width: 55vmax; height: 55vmax; right: 0%; top: 25%; background: radial-gradient(circle, var(--lueur-b), transparent 65%); }
#lumiere i:nth-child(3) { width: 45vmax; height: 45vmax; left: 30%; bottom: -5%; background: radial-gradient(circle, var(--lueur-c), transparent 65%); }
:root.carte-postale #lumiere { display: none; }
@media (prefers-reduced-motion: no-preference) {
  #lumiere i:nth-child(1) { animation: nappe1 26s ease-in-out infinite alternate; }
  #lumiere i:nth-child(2) { animation: nappe2 32s ease-in-out infinite alternate; }
  #lumiere i:nth-child(3) { animation: nappe3 38s ease-in-out infinite alternate; }
  @keyframes nappe1 { to { transform: translate3d(14%, 10%, 0) scale(1.15); } }
  @keyframes nappe2 { to { transform: translate3d(-16%, -8%, 0) scale(.9); } }
  @keyframes nappe3 { to { transform: translate3d(10%, -14%, 0) scale(1.2); } }
  /* while Kelsto works, the whole light quickens and brightens a little */
  :root.travaille #lumiere i { animation-duration: 7s, 9s, 11s; }
  :root.travaille #lumiere { filter: blur(50px) brightness(1.15); transition: filter 1.2s; }
}

/* glass */
:root:not(.carte-postale) aside, :root:not(.carte-postale) .barre, :root:not(.carte-postale) .boite,
:root:not(.carte-postale) .feuille .tete {
  background: var(--verre-l); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
  border-color: var(--verre-bord);
}
:root:not(.carte-postale) aside { border-inline-end: 1px solid var(--verre-bord); }
:root:not(.carte-postale) .barre { border-bottom: 1px solid var(--verre-bord); }
:root:not(.carte-postale) .feuille { background: var(--nuit); }
.boite { border-radius: 28px; transition: box-shadow .35s, border-color .35s; }
.boite:focus-within { box-shadow: 0 0 0 1.5px var(--accent), 0 14px 50px var(--halo); }

/* the welcome: big type, the orb leads */
.accueil h2 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.08; letter-spacing: -.03em; max-width: 620px; }
.accueil .point { width: 104px; height: 104px; box-shadow: 0 0 0 10px rgba(127, 224, 196, .06), 0 20px 70px var(--halo); }
.suggestions button { background: var(--verre-l); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: var(--verre-bord); transition: transform .18s, border-color .18s; }
.suggestions button:hover { transform: translateY(-2px); border-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .accueil .suggestions button { animation: entre .5s cubic-bezier(.2, .8, .2, 1) both; }
  .accueil .suggestions button:nth-child(2) { animation-delay: .05s; } .accueil .suggestions button:nth-child(3) { animation-delay: .1s; }
  .accueil .suggestions button:nth-child(4) { animation-delay: .15s; } .accueil .suggestions button:nth-child(5) { animation-delay: .2s; }
  .accueil .suggestions button:nth-child(6) { animation-delay: .25s; }
}

/* messages */
.msg.moi .bulle { border-radius: 22px; border-end-end-radius: 7px; padding: 10px 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
.msg.kelsto .corps { font-size: 17px; line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) {
  .msg.kelsto .corps.flux::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-inline-start: 4px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #c9fff0, var(--sarcelle-vive) 40%, var(--mer)); vertical-align: middle; animation: respire 1s ease-in-out infinite; }
  .msg.entre { animation: monte .42s cubic-bezier(.2, .9, .25, 1) both; }
  @keyframes monte { from { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
}

/* the level pill, in the input row */
.niveau-pastille { height: 32px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--doux); border: 1px solid var(--verre-bord); background: var(--bulle); flex: none; align-self: center; display: inline-flex; align-items: center; gap: 6px; transition: color .2s, border-color .2s; }
.niveau-pastille:hover { color: var(--texte); border-color: var(--accent); }
.niveau-pastille .pt { width: 7px; height: 7px; border-radius: 50%; background: var(--sarcelle); }
.niveau-pastille[data-n="moyen"] .pt { background: var(--mer); }
.niveau-pastille[data-n="eleve"] .pt { background: #8c78ff; }
.menu-niveau { position: fixed; z-index: 40; width: min(320px, calc(100vw - 32px)); padding: 6px; border-radius: 18px; background: var(--carte); border: 1px solid var(--verre-bord);
  -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); box-shadow: 0 24px 70px rgba(0, 0, 0, .3); }
.menu-niveau button { display: grid; grid-template-columns: 14px 1fr 18px; gap: 4px 10px; width: 100%; text-align: start; padding: 11px 12px; border-radius: 12px; align-items: center; }
.menu-niveau button:hover { background: var(--bulle); }
.menu-niveau .pt { width: 9px; height: 9px; border-radius: 50%; }
.menu-niveau small { grid-column: 2; color: var(--doux); font-size: 13px; line-height: 1.35; }
.menu-niveau .ok { color: var(--accent); font-weight: 700; visibility: hidden; }
.menu-niveau button.choisi .ok { visibility: visible; }
@media (prefers-reduced-motion: no-preference) { .menu-niveau { animation: entre .22s cubic-bezier(.2, .8, .2, 1); } }

/* the usage ring, top right */
.anneau { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; position: relative; }
.anneau svg { width: 26px; height: 26px; transform: rotate(-90deg); }
.anneau circle { fill: none; stroke-width: 3.5; }
.anneau .fond-a { stroke: var(--trait); }
.anneau .plein-a { stroke: var(--sarcelle); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1), stroke .4s; }
.anneau.haut .plein-a { stroke: #f0a020; } .anneau.plein .plein-a { stroke: var(--rouge); }
.util { padding: 6px 4px; display: grid; gap: 18px; }
.util .ligne-u { display: grid; gap: 7px; }
.util .ligne-u .h { display: flex; justify-content: space-between; font-weight: 600; }
.util .ligne-u .h span:last-child { color: var(--doux); font-variant-numeric: tabular-nums; font-weight: 500; }
.util .barre-u { height: 8px; border-radius: 4px; background: var(--trait); overflow: hidden; }
.util .barre-u i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--sarcelle-vive), var(--mer)); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.util small { color: var(--doux); }

/* the context gauge, a thin line under the top bar */
#jauge { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--sarcelle-vive), var(--mer)); transition: width .8s cubic-bezier(.2, .8, .2, 1); border-radius: 2px; }
#jauge.moitie { background: linear-gradient(90deg, var(--mer), #f0a020); }
.conseil { max-width: 720px; margin: 4px auto 22px; padding: 14px 16px; border-radius: 18px; background: var(--verre-l); border: 1px solid var(--verre-bord);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: grid; gap: 10px; font-size: 15px; line-height: 1.45; }
.conseil button { justify-self: start; padding: 9px 14px; border-radius: 999px; background: var(--texte); color: var(--nuit); font-weight: 600; font-size: 14px; }

/* the send button stays visibly off while the field is empty, in every theme */
:root #saisie #envoyer:disabled { background: var(--trait); color: var(--tres-doux); }
.menu-niveau { background: color-mix(in srgb, var(--nuit) 94%, transparent); }
:root[data-theme="clair"] .menu-niveau { background: rgba(255, 255, 255, .96); }
/* on a phone the level pill keeps only its dot, so the field keeps one line */
#texte { min-width: 0; }
@media (max-width: 480px) {
  .niveau-pastille { width: 32px; padding: 0; justify-content: center; }
  .niveau-pastille span:last-child { display: none; }
  .niveau-pastille .pt { width: 10px; height: 10px; }
}

/* =====================================================================
   THE OLD APP'S INTERFACE (his decision, 22 October 2026, evening): the new
   app dressed as the old one he likes. Near-black ink, warm paper, one blue
   accent, big grotesque type with the end in blue italics, the numbered
   menu, the grain, the light. Taken from livrables/kelsto/app/pwa/app.html.
   ===================================================================== */
:root {
  --ink: #0b0b0c; --ink-2: #141416; --ink-3: #1c1c1f;
  --paper: #efeae1; --paper-dim: rgba(239, 234, 225, .58); --paper-faint: rgba(239, 234, 225, .14); --paper-ghost: rgba(239, 234, 225, .06);
  --bleu: #4893fc; --grotesk: "Helvetica Neue", Helvetica, Inter, "Segoe UI", Arial, sans-serif; --ease-a: cubic-bezier(.16, 1, .3, 1);
  --nuit: #08080a; --lueur-a: rgba(40, 110, 200, .46); --lueur-b: rgba(40, 150, 170, .34); --lueur-c: rgba(72, 147, 252, .40);
  --fond: transparent; --groupe: transparent; --carte: rgba(28, 28, 31, .82); --texte: var(--paper); --doux: var(--paper-dim);
  --tres-doux: rgba(239, 234, 225, .35); --trait: var(--paper-faint); --accent: var(--bleu); --accent-doux: rgba(72, 147, 252, .14);
  --bulle: var(--paper-ghost); --verre-l: rgba(11, 11, 12, .6); --verre-bord: var(--paper-faint); --halo: rgba(49, 134, 255, .45);
  color-scheme: dark;
}
/* light, when he chooses it: the same page on paper */
:root[data-theme="clair"] {
  --nuit: #efeae1; --lueur-a: rgba(72, 147, 252, .14); --lueur-b: rgba(63, 184, 154, .10); --lueur-c: rgba(72, 147, 252, .16);
  --texte: #0b0b0c; --doux: rgba(11, 11, 12, .58); --tres-doux: rgba(11, 11, 12, .35); --trait: rgba(11, 11, 12, .12);
  --carte: rgba(255, 255, 255, .8); --bulle: rgba(11, 11, 12, .05); --verre-l: rgba(239, 234, 225, .7); --verre-bord: rgba(11, 11, 12, .1);
  --paper-dim: rgba(11, 11, 12, .58); --paper-faint: rgba(11, 11, 12, .12); --paper-ghost: rgba(11, 11, 12, .05); color-scheme: light;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="sombre"]):not([data-theme="clair"]) { color-scheme: dark; } }
body { font-family: var(--grotesk); -webkit-font-smoothing: antialiased; color: var(--texte); }
#lumiere { filter: blur(70px) saturate(130%); }
/* the grain over everything, as in the old app */
body::after { content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: grain 8s steps(6) infinite; }
  @keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -2%); } 80% { transform: translate(3%, 1%); } }
}

/* the menu */
:root:not(.carte-postale) aside { background: linear-gradient(180deg, rgba(11, 11, 12, .72), rgba(11, 11, 12, .5)); border-inline-end: 1px solid var(--paper-faint); }
:root[data-theme="clair"] aside { background: linear-gradient(180deg, rgba(239, 234, 225, .8), rgba(239, 234, 225, .6)); }
@media (min-width: 900px) { aside { width: 264px; } }
.marque { display: flex; align-items: center; gap: 12px; padding: 4px 10px 22px; }
.marque img { width: 34px; height: 34px; border-radius: 10px; }
.marque strong { display: block; font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; }
.marque small { display: block; font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--paper-dim); }
.menu-num { display: grid; gap: 2px; }
.menu-num .lien { position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 12px; width: 100%; text-align: start; color: var(--paper-dim);
  transition: color .35s var(--ease-a), background .35s var(--ease-a), padding .45s var(--ease-a); font-size: 15px; }
.menu-num .lien:hover:not(.plus-tard) { color: var(--texte); background: var(--paper-ghost); padding-inline-start: 16px; }
.menu-num .lien.plus-tard { cursor: default; }
.menu-num .num { margin-inline-start: auto; font-size: .62rem; letter-spacing: .2em; opacity: .45; }
.menu-num .bientot { margin-inline-start: auto; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; padding: 3px 7px; border-radius: 99px; border: 1px solid var(--paper-faint); color: var(--paper-dim); }
.menu-num .sep { height: 1px; background: var(--paper-faint); margin: 10px 12px; }
svg.i { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#liste-chats.replie { display: none; }
#liste-chats button { color: var(--paper-dim); font-size: 14px; }
#liste-chats button.actif { color: var(--texte); background: var(--paper-ghost); }
.jour { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-dim); }
.pied-menu { padding: 12px; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-dim); opacity: .6; }
.cherche-chats { background: var(--paper-ghost) !important; border: 1px solid var(--paper-faint) !important; }

/* the top bar disappears into the night, as in the old app */
:root:not(.carte-postale) .barre { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; }
.barre .titre-chat { font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--paper-dim); font-weight: 400; }

/* the greeting: the old app's signature */
.accueil { align-items: flex-start; text-align: start; max-width: 900px; margin: 0 auto; width: 100%; padding: 0 10px 40px; }
.accueil .point { display: none; }
.sur-titre { font-size: .64rem; letter-spacing: .28em; text-transform: uppercase; color: var(--paper-dim); }
.h-geant { font-size: clamp(40px, 6.4vw, 92px) !important; font-weight: 500 !important; letter-spacing: -.045em !important; line-height: .95 !important; margin: 4px 0 18px !important; font-family: var(--grotesk) !important; max-width: none !important; }
.h-geant em { font-family: "Times New Roman", Times, Georgia, serif; font-style: italic; font-weight: 400; color: var(--bleu); }
[dir="rtl"] .h-geant em { font-style: normal; }
.mot { display: inline-block; opacity: 0; transform: translateY(.4em); animation: monte-mot .9s var(--ease-a) forwards; }
@keyframes monte-mot { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mot { opacity: 1; transform: none; animation: none; } }
.suggestions { justify-content: flex-start; }
.suggestions button { background: transparent; border: 1px solid var(--paper-faint); color: var(--paper-dim); border-radius: 99px; font-size: 14px; }
.suggestions button:hover { color: var(--texte); border-color: var(--bleu); }
.suggestions button svg { color: var(--paper-dim); }

/* messages */
.msg.moi .bulle { background: var(--paper) !important; color: var(--ink) !important; border-radius: 22px; }
:root[data-theme="clair"] .msg.moi .bulle { background: var(--ink) !important; color: var(--paper) !important; }
.msg.kelsto .corps { color: var(--texte); }

/* the field */
.boite { max-width: 820px; border-radius: 24px; padding: 10px 10px 10px 18px;
  background: linear-gradient(180deg, rgba(28, 28, 31, .82), rgba(20, 20, 22, .82)) !important; border: 1px solid var(--paper-faint) !important;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .04); }
:root[data-theme="clair"] .boite { background: rgba(255, 255, 255, .85) !important; }
.boite:focus-within { border-color: rgba(72, 147, 252, .45) !important; box-shadow: 0 30px 70px -30px rgba(49, 134, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .05); }
#envoyer { background: var(--paper) !important; color: var(--ink) !important; }
:root #saisie #envoyer:disabled { background: var(--paper-ghost) !important; color: var(--paper-dim) !important; }
.niveau-pastille { background: transparent; border: 0; color: var(--paper-dim); font-weight: 500; }
.menu-niveau { background: rgba(20, 20, 22, .96); }
.avatar { background: var(--bleu); }
/* each rising word is its own box: the space between them is a margin */
.h-geant .mot { margin-inline-end: .22em; }
.h-geant em.mot { margin-inline-end: 0; }

/* his folds: the whole side bar, the functions, the search */
@media (min-width: 900px) {
  #ouvrir-tiroir { display: grid !important; }
  body.menu-replie aside { display: none; }
}
.marque { position: relative; }
.loupe-menu { margin-inline-start: auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--paper-dim); }
.loupe-menu:hover, .loupe-menu[aria-expanded="true"] { color: var(--texte); background: var(--paper-ghost); }
.cherche-chats.replie, .groupe-menu.replie { display: none !important; }
.titre-groupe { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px 6px; font-size: .6rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--paper-dim); }
.titre-groupe:hover { color: var(--texte); }
.titre-groupe .chev { font-size: 14px; letter-spacing: 0; transition: transform .3s var(--ease-a); }
.titre-groupe.ferme .chev { transform: rotate(-90deg); }
.groupe-menu { display: grid; gap: 2px; }

/* his two side bars: the menu, then the conversations, each folding whole */
@media (min-width: 900px) {
  #ouvrir-conversations { display: grid !important; }
  aside#conversations { width: 260px; flex: none; }
  body.menu-replie aside#tiroir { display: none; }
  body.conv-replie aside#conversations { display: none; }
}
aside#conversations { display: flex; flex-direction: column; gap: 6px; }
:root:not(.carte-postale) aside#conversations { background: linear-gradient(180deg, rgba(11, 11, 12, .55), rgba(11, 11, 12, .35)); }
.tete-conv { display: flex; align-items: center; gap: 6px; padding: 4px 2px 8px; }
.nouvelle-conv { flex: 1; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--paper-faint); color: var(--texte); font-weight: 500; }
.nouvelle-conv:hover { background: var(--paper-ghost); }
#ouvrir-conversations svg.i { width: 21px; height: 21px; }
aside#tiroir .pied-menu { margin-top: auto; }
.nouvelle-conv { white-space: nowrap; font-size: 14px; }

/* back to one side bar: the menu folds whole under its title, the chats below */
.menu-num.replie { display: none; }
aside#tiroir { overflow-y: auto; }
aside#tiroir .conversations { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; border-top: 1px solid var(--paper-faint); padding-top: 10px; }
aside#tiroir .pied-menu { margin-top: auto; }

.tete-conv .titre-groupe { flex: 1; }
.corps-conv { display: flex; flex-direction: column; gap: 6px; }
.corps-conv.replie { display: none; }

/* long answers: real titles and pictures, drawn while they are written */
.msg.kelsto .corps .titre-md { font-size: 20px; margin: 1.1em 0 .4em; letter-spacing: -.01em; }
.msg.kelsto .corps .titre-md.grand { font-size: 28px; font-weight: 600; margin-top: .2em; }
.image-md { margin: 14px 0 18px; }
.image-md img { display: block; max-width: min(560px, 100%); max-height: 420px; border-radius: 16px; object-fit: cover; background: var(--paper-ghost); }
.image-md figcaption { margin-top: 6px; font-size: 13px; color: var(--paper-dim); max-width: 560px; }

/* History and memory tabs (22 October 2026) */
.tout-historique { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 12px; color: var(--accent); font-weight: 600; text-align: start; }
.tout-historique svg { width: 18px; height: 18px; flex: none; }
.tout-historique .num { margin-inline-start: auto; font-size: 12px; color: var(--doux); font-weight: 500; }
.tout-historique:hover { background: rgba(127, 127, 127, .1); }
.cherche-hist { margin: 4px 16px 10px; }
.liste-hist { display: flex; flex-direction: column; padding: 0 8px 30px; }
.liste-hist button { text-align: start; padding: 11px 12px; border-radius: 12px; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-hist button:hover, .liste-hist button.actif { background: rgba(127, 127, 127, .12); }
.liste-hist .jour { font-size: 13px; color: var(--doux); margin: 14px 12px 4px; }
.onglets-mem { display: flex; gap: 6px; margin: 6px 16px 4px; padding: 4px; border-radius: 14px; background: rgba(127, 127, 127, .12); }
.onglets-mem button { flex: 1; padding: 9px 0; border-radius: 10px; font-weight: 600; color: var(--doux); }
.onglets-mem button.actif { background: rgba(77, 163, 255, .22); color: inherit; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }  /* readable in both themes (23 October 2026: white on white in dark) */
.note-mem { color: var(--doux); font-size: 14px; line-height: 1.45; margin: 10px 16px; }
.fichiers-mem { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 6px 16px 30px; }
.fichier-mem { display: flex; flex-direction: column; gap: 4px; text-align: start; padding: 14px; border-radius: 16px; background: rgba(127, 127, 127, .1); min-width: 0; }
.fichier-mem b { font-size: 15px; overflow-wrap: anywhere; }
.fichier-mem small { color: var(--doux); font-size: 13px; line-height: 1.3; }
.fichier-mem .compte { font-size: 12px; color: var(--accent); margin-top: 4px; }
.avant-mem { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; opacity: .75; }

/* Pictures and the questionnaire (23 October 2026) */
.image-kelsto { margin-top: 10px; max-width: min(560px, 100%); }
.cadre-image { position: relative; border-radius: 14px; overflow: hidden; }
.cadre-image img.dessin { display: block; width: 100%; max-width: 100%; margin: 0; border-radius: 0; cursor: zoom-in; }
.grille-secteurs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.grille-secteurs .secteur { border: 1px solid rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .18); color: #fff; font-size: 22px; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.grille-secteurs .secteur:hover { background: rgba(77, 163, 255, .35); }
.barre-image { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.barre-image button, .barre-image a { padding: 7px 14px; border-radius: 999px; background: rgba(127, 127, 127, .16); font-size: 14px; font-weight: 600; color: inherit; text-decoration: none; }
.visionneuse { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100dvh; background: #000; display: grid; place-items: center; padding: 0; cursor: zoom-out; }
.visionneuse img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; object-fit: contain; border-radius: 0; }
.visionneuse-fermer { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-size: 18px; cursor: pointer; }
.qcm { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; max-width: 640px; }
.qcm-titre { font-weight: 600; margin-bottom: 6px; }
.qcm-options { display: flex; flex-wrap: wrap; gap: 8px; }
.qcm-option { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(127, 127, 127, .35); background: rgba(127, 127, 127, .08); font-size: 15px; color: inherit; }
.qcm-option.choisi { background: var(--accent, #4da3ff); border-color: transparent; color: #fff; }
.qcm-option.suite { font-weight: 700; }
.qcm-option:disabled { opacity: .55; }
.qcm-option.choisi:disabled { opacity: 1; }
.grille-secteurs.fine .secteur { font-size: 16px; background: rgba(0, 0, 0, .08); }
.atelier { position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, .55); display: grid; place-items: center; padding: 16px; }
.atelier-panneau { width: min(720px, 100%); max-height: 100%; overflow: auto; background: var(--fond-carte, #1c1f26); color: inherit; border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
:root:not(.sombre) .atelier-panneau { background: #fff; color: #111; }
.atelier-tete { display: flex; justify-content: space-between; align-items: center; font-size: 18px; }
.atelier-tete button { font-size: 18px; padding: 4px 10px; color: inherit; }
.atelier-loupe { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: 14px; background-repeat: no-repeat; overflow: hidden; }
.atelier-aide { margin: 0; opacity: .75; font-size: 14px; }
.atelier-elements { display: flex; flex-direction: column; gap: 10px; }
.atelier-element b { display: block; margin-bottom: 6px; }
.atelier-attente { opacity: .7; font-size: 14px; }
.atelier-libre { display: flex; gap: 8px; }
.atelier-libre input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(127, 127, 127, .35); background: transparent; color: inherit; font-size: 15px; }
.atelier-libre button { padding: 10px 16px; border-radius: 999px; background: var(--accent, #4da3ff); color: #fff; font-weight: 600; }
.qcm-autre { margin-top: 8px; width: 100%; max-width: 420px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(127, 127, 127, .35); background: transparent; color: inherit; font-size: 15px; }
/* questionnaire, one question at a time (like Claude's) */
.qcm { gap: 10px; padding: 14px; border-radius: 18px; border: 1px solid rgba(127, 127, 127, .25); background: rgba(127, 127, 127, .06); }
.qcm-tete { display: flex; justify-content: space-between; align-items: center; font-size: 13px; opacity: .75; }
.qcm-nav { display: flex; gap: 6px; }
.qcm-nav button { width: 30px; height: 30px; border-radius: 50%; background: rgba(127, 127, 127, .15); color: inherit; font-size: 18px; }
.qcm-nav button:disabled { opacity: .3; }
.qcm .qcm-titre { font-size: 17px; font-weight: 600; margin: 2px 0 4px; }
.qcm-liste { display: flex; flex-direction: column; gap: 8px; }
.qcm-carte { display: flex; gap: 12px; align-items: flex-start; text-align: start; width: 100%; padding: 11px 14px; border-radius: 14px; border: 1px solid rgba(127, 127, 127, .25); background: transparent; color: inherit; }
.qcm-carte:hover { border-color: var(--accent, #4da3ff); }
.qcm-carte.choisi { border-color: var(--accent, #4da3ff); background: rgba(77, 163, 255, .12); }
.qcm-num { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: rgba(127, 127, 127, .18); }
.qcm-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qcm-texte small { opacity: .7; font-size: 13px; line-height: 1.35; }
.qcm-formats { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.qcm-formats .qcm-autre-ligne { grid-column: 1 / -1; }
.qcm-format { flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; text-align: center; font-size: 13px; }
.forme-cadre { width: 64px; height: 64px; display: grid; place-items: center; }
.forme { display: block; max-width: 100%; max-height: 100%; border-radius: 4px; border: 2px solid currentColor; opacity: .75; }
.qcm-format.choisi .forme, .qcm-format:hover .forme { border-color: var(--accent, #4da3ff); background: rgba(77, 163, 255, .18); opacity: 1; }
.qcm-autre-ligne { align-items: center; }
.qcm-autre-ligne input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font-size: 15px; outline: none; }
.qcm-autre-ligne button { font-size: 18px; color: var(--accent, #4da3ff); }
.qcm-passer { align-self: flex-end; font-size: 13px; opacity: .7; color: inherit; }
.qcm-resume { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.qcm-resume-ligne { display: flex; justify-content: space-between; gap: 12px; }
.qcm-resume-ligne span { opacity: .7; }
.qcm-resume-ligne b { text-align: end; }

/* Photo (T804, 23 October 2026) */
.onglets-photos button { font-size: 13px; }
.grille-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin: 10px 16px 24px; }
.tuile-photo { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: rgba(127, 127, 127, .15); }
.tuile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reste-photo { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; font-weight: 600; }
.verrou-photos { display: flex; flex-direction: column; gap: 10px; margin: 18px 16px; }
.verrou-photos input { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(127, 127, 127, .35); background: transparent; color: inherit; font-size: 18px; letter-spacing: 6px; text-align: center; }
.verrou-photos button { padding: 11px; border-radius: 12px; background: var(--accent, #4da3ff); color: #fff; font-weight: 700; border: 0; }
.verrou-photos small { color: var(--rouge, #ff5a5f); min-height: 1em; }
.visionneuse-photo img { bottom: 72px; height: auto; }
.barre-photo { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
  padding: 12px 14px max(12px, env(safe-area-inset-bottom)); background: rgba(0, 0, 0, .75); cursor: default; }
.barre-photo small { width: 100%; text-align: center; color: rgba(255, 255, 255, .7); }
.barre-photo button, .barre-photo a { padding: 8px 14px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
.barre-photo .effacer { background: rgba(255, 90, 95, .3); }

/* Présentations (T804, 23 October 2026) */
.ligne-pres { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.ligne-pres .boutons { display: flex; gap: 8px; }
.ligne-pres select { flex: 1; padding: 7px 10px; border-radius: 10px; background: transparent; color: inherit; border: 1px solid rgba(127, 127, 127, .35); }
.form-cat input { letter-spacing: normal; text-align: start; font-size: 15px; }
.form-cat .titre-cat { color: var(--doux); font-weight: 600; }

/* Contact (T804, 23 October 2026) */
.ligne-contact { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.tete-contact { display: flex; gap: 12px; align-items: center; }
.tete-contact div { display: flex; flex-direction: column; }
.tete-contact small { color: var(--doux); }
.boutons-contact { display: flex; flex-wrap: wrap; gap: 6px; }
.boutons-contact a { padding: 7px 13px; border-radius: 999px; background: rgba(77, 163, 255, .16); color: inherit; text-decoration: none; font-weight: 600; font-size: 14px; }
.note-contact { color: var(--doux); }

/* Code (T804, 23 October 2026) */
.bloc-code { position: relative; }
.copier-bloc { position: absolute; top: 6px; right: 6px; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; background: rgba(127, 127, 127, .25); color: inherit; border: 0; }

/* Sign-up (23 October 2026) */
.case-parent { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; margin-top: 6px; }
.case-parent input { margin-top: 3px; width: 20px; height: 20px; flex: none; }

/* =====================================================================
   MOTION AND DELIGHT (24 October 2026, his "plus stylé, plus fluide, une
   expérience à chaque clic"). One motion vocabulary: ease-out for answers to a
   touch, the drawer curve for sheets, a spring for what arrives. Only transform,
   opacity (and a light blur on reveals) move. Desktop gets the glow and the magnet;
   reduced motion gets 0.2 s fades and keeps every feedback.
   ===================================================================== */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --ambre: #f0a020;
  /* the primary button, near-white on the night, near-black on paper */
  --primaire: #f4f1ea; --sur-primaire: #121214; --signal: var(--accent); --lueur-bouton: rgba(72, 147, 252, .2);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, .054, .183, .348, .52, .679, .814, .919, .995, 1.045, 1.072, 1.083, 1.081, 1.072, 1.059, 1.045, 1.031, 1.019, 1.009, 1.002, .997, .995, .994, .997, 1); }
}
:root[data-theme="clair"] { --primaire: #121214; --sur-primaire: #f4f1ea; --lueur-bouton: rgba(127, 224, 196, .18); }
@keyframes fondu { from { opacity: 0; } }
@keyframes fondu-sort { to { opacity: 0; } }

/* every tappable: no grey flash, no double-tap zoom delay, a press that gives */
button, a, label, select, summary, [role="button"], input[type="checkbox"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:is(button, .joindre, .puce, a.fichier-genere, a.ouvrir-bouton, .sources a, .barre-image a, .boutons-contact a, .barre-photo a) {
  transition: scale .16s var(--ease-out), translate .45s var(--spring), background-color .2s var(--ease-out), border-color .2s var(--ease-out),
              color .2s var(--ease-out), box-shadow .3s var(--ease-out), opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
:is(button, .joindre, .puce, a.fichier-genere, a.ouvrir-bouton, .sources a, .barre-image a, .boutons-contact a, .barre-photo a):active:not(:disabled):not(.ligne) { scale: .97; transition-duration: .1s, .45s, .2s, .2s, .2s, .3s, .2s, .2s; }
.suggestions button { transition: scale .16s var(--ease-out), translate .45s var(--spring), transform .2s var(--ease-out), border-color .2s, color .2s; }
.choix button { transition: scale .16s var(--ease-out), border-color .15s, background .15s; }
.menu-num .lien { transition: scale .16s var(--ease-out), color .35s var(--ease-a), background .35s var(--ease-a), padding .45s var(--ease-a); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus:not(:focus-visible) { outline: none; }

/* the nine details of the primary button: 52 px, a full pill, the real font,
   near-black (near-white at night), one accent signal dot, an arrow that turns
   on hover in 350 ms, a glow under the cursor, a magnetic lean, a .97 press */
.principal {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; min-height: 52px; border-radius: 999px; padding: 0 44px;
  font-family: var(--grotesk); font-weight: 600; font-size: 17px; letter-spacing: -.01em;
  background: radial-gradient(circle 3.5px at 24px 50%, var(--signal) 92%, transparent 100%) no-repeat, var(--primaire) !important;
  color: var(--sur-primaire) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .18), 0 10px 28px -12px rgba(0, 0, 0, .5);
}
[dir="rtl"] .principal { background: radial-gradient(circle 3.5px at calc(100% - 24px) 50%, var(--signal) 92%, transparent 100%) no-repeat, var(--primaire) !important; }
.principal.danger { --signal: var(--rouge); }
.principal::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(150px circle at var(--x, 50%) var(--y, 50%), var(--lueur-bouton), transparent 70%); transition: opacity .3s var(--ease-out); }
.principal::after { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; transition: rotate .35s var(--ease-out), translate .35s var(--ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
[dir="rtl"] .principal::after { scale: -1 1; }
.principal:disabled::before { opacity: 0 !important; }
@media (hover: hover) and (pointer: fine) {
  .principal.survole:not(:disabled)::before, #envoyer.survole::before { opacity: 1; }
  .principal:hover:not(:disabled)::after { rotate: -45deg; }
  [dir="rtl"] .principal:hover:not(:disabled)::after { rotate: 45deg; }
}
.secondaire { min-height: 44px; border-radius: 999px; }

/* hit targets of at least 44 px, the drawing unchanged */
.rond, .anneau { width: 44px; height: 44px; }
.actions button { width: 40px; height: 40px; border-radius: 10px; }
.joindre, #micro, #appel, #envoyer, .qcm-nav button, .loupe-menu, .visionneuse-fermer { position: relative; }
.joindre::after, #micro::after, #appel::after, .qcm-nav button::after, .loupe-menu::after { content: ""; position: absolute; inset: -4px; }
#envoyer { isolation: isolate; overflow: visible; }
#envoyer::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
#envoyer::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(40px circle at var(--x, 50%) var(--y, 50%), var(--lueur-bouton), transparent 70%); transition: opacity .3s var(--ease-out); }
#envoyer:disabled::before { opacity: 0 !important; }

/* inputs at 16 px at least: iOS never zooms on focus */
.atelier-libre input, .qcm-autre, .qcm-autre-ligne input, .form-cat input, .ligne-pres select, .verrou-photos input { font-size: 16px; }

/* typography: tabular numbers, pretty paragraphs, balanced titles */
.chrono, .compteur, .num, .appel-chrono, .anneau, .pct, .reset, .maj-util, .qcm-compte, #pieces { font-variant-numeric: tabular-nums; }
.msg .corps p, .msg .corps li, .msg.moi .bulle, .note, .note-mem, .sous { text-wrap: pretty; }
h1, h2, .accueil h2, .feuille .tete h2, .conseil > div { text-wrap: balance; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* the grain, quieter */
body::after { opacity: .035; }

/* glass on the top bar, which solidifies as the thread scrolls under it */
.barre::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: var(--verre-l); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--verre-bord); transition: opacity .25s var(--ease-out); }
.barre.solide::before { opacity: 1; }
@supports (animation-timeline: scroll()) {
  main { timeline-scope: --fil; }
  #fil { scroll-timeline: --fil block; }
  .barre::before { animation: solidifie linear both; animation-timeline: --fil; animation-range: 0px 72px; }
  @keyframes solidifie { from { opacity: 0; } to { opacity: 1; } }
}

/* the composer: glass, and a gradient border when it has the focus */
.boite { position: relative; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.boite::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0;
  background: var(--accent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  transition: opacity .3s var(--ease-out); }
.boite:focus-within::before { opacity: .55; }
.boite:focus-within { border-color: transparent !important; }

/* the opening: dots in the night, the K traced then filled */
#ouverture { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; background: var(--nuit); cursor: pointer; touch-action: manipulation; }
#ouverture canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#ouverture .logo-ouv { position: relative; width: 132px; height: 132px; overflow: visible; }
.logo-ouv g { stroke: #7fe0c4; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
:root[data-theme="clair"] .logo-ouv g { stroke: #2f86e6; }
.passer-ouv { position: absolute; bottom: calc(env(safe-area-inset-bottom) + 22px); inset-inline-end: 18px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  color: var(--doux); font-size: 14px; letter-spacing: .02em; }
@media (prefers-reduced-motion: no-preference) { .passer-ouv { animation: fondu .4s .3s var(--ease-out) both; } }

/* while Kelsto works: a small constellation */
.constellation { display: inline-block; width: 22px; height: 22px; flex: none; vertical-align: middle; }

/* messages: the user's bubble springs from the send button's corner; the answer
   arrives chunk by chunk from a light blur, a soft caret while it writes */
.msg.kelsto .corps.flux::after { content: none; }
.curseur { display: inline-block; width: 3px; height: 1.05em; margin-inline-start: 3px; border-radius: 2px; vertical-align: -.16em;
  background: var(--accent); opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .msg.moi.envoye .bulle { transform-origin: 100% 100%; animation: bulle-arrive .42s var(--spring) both; }
  [dir="rtl"] .msg.moi.envoye .bulle { transform-origin: 0 100%; animation-name: bulle-arrive-rtl; }
  @keyframes bulle-arrive { from { opacity: 0; transform: translate(12px, 16px) scale(.6); } to { opacity: 1; transform: none; } }
  @keyframes bulle-arrive-rtl { from { opacity: 0; transform: translate(-12px, 16px) scale(.6); } to { opacity: 1; transform: none; } }
  .msg.kelsto .corps .neuf { animation: revele .32s var(--ease-out) both; }
  @keyframes revele { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: blur(0); } }
  .curseur { animation: clignote 1.1s ease-in-out infinite; }
  @keyframes clignote { 0%, 100% { opacity: .9; } 50% { opacity: .2; } }
}

/* sheets and the drawer: the drawer curve */
aside { transition: transform .38s var(--ease-drawer); }
@media (prefers-reduced-motion: no-preference) {
  #voile:not([hidden]) { animation: fondu .3s var(--ease-out); }
  .feuille.entre { animation: feuille-monte .4s var(--ease-drawer) both; }
  .feuille.sort { animation: feuille-descend .24s var(--ease-out) both; pointer-events: none; }
  @keyframes feuille-monte { from { translate: 0 100%; } }
  @keyframes feuille-descend { to { translate: 0 60%; opacity: 0; } }
  @media (min-width: 700px) {
    .feuille.entre { animation-name: feuille-pose; animation-duration: .3s; }
    .feuille.sort { animation-name: feuille-part; }
    @keyframes feuille-pose { from { opacity: 0; translate: 0 18px; scale: .97; } }
    @keyframes feuille-part { to { opacity: 0; translate: 0 12px; scale: .98; } }
  }
  /* toasts slide and fade */
  .toast { animation: toast-entre .28s var(--ease-out) both; }
  .toast.sort { animation: toast-sort .22s var(--ease-out) both; }
  @keyframes toast-entre { from { opacity: 0; translate: 0 14px; scale: .96; } }
  @keyframes toast-sort { to { opacity: 0; translate: 0 8px; scale: .98; } }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; animation-timing-function: var(--ease-out); }

/* the usage screen, like Claude's plan usage limits */
.util.util-cartes { gap: 12px; padding: 10px 0 4px; }
.carte-limite { --remplir: var(--accent); display: grid; gap: 10px; padding: 16px 16px 14px; border-radius: 18px; background: var(--carte); border: 1px solid var(--verre-bord); }
.carte-limite.haut { --remplir: var(--ambre); }
.carte-limite.plein { --remplir: var(--rouge); }
.carte-limite .h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.carte-limite .lib { font-weight: 600; }
.carte-limite .pct { color: var(--doux); font-size: 15px; white-space: nowrap; }
.carte-limite.plein .pct { color: var(--rouge); }
.carte-limite .piste { height: 8px; border-radius: 999px; background: var(--trait); overflow: hidden; }
.carte-limite .piste i { display: block; height: 100%; border-radius: inherit; background: var(--remplir); transform: scaleX(0); transform-origin: left center; transition: transform .7s var(--ease-out); }
[dir="rtl"] .carte-limite .piste i { transform-origin: right center; }
.carte-limite .reset { color: var(--doux); font-size: 13px; }
.maj-util { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 0 6px; color: var(--doux); }
.maj-util small { font-size: 13px; }
.rafraichir { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--doux); }
.rafraichir:hover { color: var(--texte); }
.rafraichir.tourne svg { animation: tourne .7s var(--ease-out) infinite; }
.note-util { color: var(--doux); padding: 0 6px; line-height: 1.45; }
/* the ring: the same three states, its stroke animated */
.anneau .plein-a { stroke: var(--accent); transition: stroke-dashoffset .8s var(--ease-out), stroke .4s var(--ease-out); }
.anneau.haut .plein-a { stroke: var(--ambre); }
.anneau.plein .plein-a { stroke: var(--rouge); }

/* the limit warning above the field */
.alerte-limite { --remplir: var(--accent); max-width: 820px; margin: 0 auto 8px; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px;
  border-radius: 16px; background: var(--carte); border: 1px solid var(--verre-bord); font-size: 14px; color: var(--texte); }
.alerte-limite.haut { --remplir: var(--ambre); }
.alerte-limite.plein { --remplir: var(--rouge); }
.alerte-limite .pt { width: 8px; height: 8px; border-radius: 50%; background: var(--remplir); flex: none; }
.alerte-limite .txt { flex: 1; min-width: 0; }
.alerte-limite button { min-height: 36px; padding: 0 12px; border-radius: 999px; font-weight: 600; color: var(--accent); }
.alerte-limite .x { width: 36px; padding: 0; color: var(--doux); font-weight: 400; }
@media (prefers-reduced-motion: no-preference) {
  .alerte-limite { animation: alerte-entre .3s var(--ease-out) both; }
  .alerte-limite.sort { animation: fondu-sort .2s var(--ease-out) both; }
  @keyframes alerte-entre { from { opacity: 0; translate: 0 8px; } }
}

/* the chat list skeleton (only after 200 ms) */
.squelette { position: relative; overflow: hidden; height: 12px; margin: 14px 12px; border-radius: 6px; background: var(--paper-ghost); }
.squelette::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--paper-faint), transparent); transform: translateX(-100%); }
@media (prefers-reduced-motion: no-preference) { .squelette::after { animation: miroite 1.2s var(--ease-out) infinite; } @keyframes miroite { to { transform: translateX(100%); } } }

/* the Sounds switch in the settings */
.ligne-switch input[type="checkbox"] { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent); }
.ligne-switch input[switch] { width: auto; height: auto; }

/* the hidden switch that plays the iPhone's haptic */
.haptique { position: fixed; left: -200px; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* reduced motion: movement becomes a 0.2 s fade, the feedback stays */
@media (prefers-reduced-motion: reduce) {
  .feuille.entre, .toast, .msg.envoye .bulle, .alerte-limite { animation: fondu .2s ease both; }
  .feuille.sort, .toast.sort, .alerte-limite.sort { animation: fondu-sort .2s ease both; }
  :is(button, .joindre, .puce, a) { translate: none !important; }
  .carte-limite .piste i, .anneau .plein-a { transition-duration: .2s; }
  .rafraichir.tourne svg { animation: none; opacity: .5; }
  @media (max-width: 899px) {
    aside { transition: transform 0s .2s, opacity .2s ease; }
    aside:not(.ouvert) { opacity: 0; }
    aside.ouvert { transition: transform 0s, opacity .2s ease; }
  }
}

/* 24 October 2026, his word and his screenshot of 22 October: the look from before (ink, grain, greeting),
   with the light in the blues he saw then, never orange; only the interactions change. */
/* the composer on a phone: the field keeps its room, the placeholder never wraps */
#texte::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .rangee { gap: 2px; } }

/* =====================================================================
   THE DETAIL PASS (24 October 2026, his "simplicité, vraiment dans le détail").
   The look stays exactly his (the night, the light, the grain, the cream
   bubbles, the numbered menu, the greeting); only the measures are made one.
   Spacing 4/8/12/16/24/32. Radii 8/12/16/24 and the pill. Icons 20 px in the
   bars, 18 px in the rows, one stroke. Every target 44 px. Hover only where a
   mouse is. Everything below is a later rule over the same ids and classes.
   ===================================================================== */
:root { --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 24px; --gouttiere: 16px; --colonne: 720px; }

/* scrollbars: thin, discreet, never a grey slab */
* { scrollbar-width: thin; scrollbar-color: var(--paper-faint) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--paper-faint); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--tres-doux); }
::-webkit-scrollbar-corner { background: transparent; }

/* disabled is calm and clearly off, everywhere */
button:disabled, [aria-disabled="true"] { cursor: default; }
.qcm-nav button:disabled { opacity: .28; }

/* focus rings: keyboard only, round with the element, never on a mouse click */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-s); }
:is(.rond, .anneau, .joindre, #micro, #appel, #envoyer, .rafraichir, .vers-bas, .qcm-nav button, .visionneuse-fermer):focus-visible { border-radius: 50%; }
:is(.suggestions button, .niveau-pastille, .sources a, .barre-image > *, .qcm-option, .boutons-contact a, .principal, .secondaire):focus-visible { border-radius: 999px; }
:is(input, textarea, select):focus:not(:focus-visible) { outline: none; }
#texte:focus-visible { outline: none; }
.joindre:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.recherche input:focus-visible { outline: none; }
.recherche:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important; }

/* ---------- the top bar ---------- */
.barre { padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right)); }
.barre svg { width: 20px; height: 20px; }
.barre .titre-chat { padding: 0 12px; }

/* ---------- the thread ---------- */
#fil { padding: 16px max(var(--gouttiere), env(safe-area-inset-right)) 16px max(var(--gouttiere), env(safe-area-inset-left)); overscroll-behavior: contain; scroll-padding-bottom: 16px; }
.msg { max-width: var(--colonne); margin-bottom: 24px; }
.msg.moi .bulle { max-width: min(82%, 560px); }
/* an answer reads at a comfortable measure: about 68 characters a line */
.msg.kelsto .corps { max-width: 68ch; }
.msg.kelsto .corps p { margin: 0 0 12px; }
.msg.kelsto .corps > :last-child, .msg.kelsto .corps > :last-child > :last-child { margin-bottom: 0; }
.msg.kelsto .corps :is(ul, ol) { margin: 4px 0 16px; padding-inline-start: 24px; }
.msg.kelsto .corps li { margin: 0 0 6px; padding-inline-start: 2px; }
.msg.kelsto .corps li::marker { color: var(--doux); }
.msg.kelsto .corps ol li::marker { font-variant-numeric: tabular-nums; font-size: .94em; }
.msg.kelsto .corps .titre-md { margin: 24px 0 8px; line-height: 1.3; }
.msg.kelsto .corps .titre-md.grand { margin: 4px 0 12px; line-height: 1.15; letter-spacing: -.02em; }
.msg.kelsto .corps > .titre-md:first-child { margin-top: 0; }
.msg.kelsto .corps code { font-size: .86em; padding: 2px 6px; border-radius: 6px; background: var(--paper-ghost); border: 1px solid var(--paper-faint); }
/* code: one quiet panel, its language and Copy in a header line, never over the code */
.bloc-code { margin: 4px 0 16px; border-radius: var(--r-m); background: rgba(0, 0, 0, .28); border: 1px solid var(--paper-faint); overflow: hidden; text-align: start; }
:root[data-theme="clair"] .bloc-code { background: rgba(11, 11, 12, .04); }
.tete-code { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 4px 0 12px; border-bottom: 1px solid var(--paper-faint); }
.langue-code { font: 12px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--doux); text-transform: lowercase; }
.copier-bloc { position: relative; top: auto; right: auto; min-height: 32px; padding: 0 10px; border-radius: var(--r-s); font-size: 13px; font-weight: 500; background: transparent; color: var(--doux); }
.copier-bloc::after { content: ""; position: absolute; inset: -6px 0; }
.msg.kelsto .corps .bloc-code pre { margin: 0; padding: 12px 16px; border-radius: 0; background: transparent; font-size: 13.5px; line-height: 1.6; tab-size: 4; }
.msg.kelsto .corps pre code { background: none; border: 0; padding: 0; }
/* tables: hairlines, a quiet header, scroll sideways on a phone */
.tableau { margin: 4px 0 16px; overflow-x: auto; border: 1px solid var(--paper-faint); border-radius: var(--r-m); }
.tableau table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.tableau th, .tableau td { padding: 8px 12px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--paper-faint); }
.tableau th { font-weight: 600; color: var(--doux); font-size: 13px; letter-spacing: .02em; background: var(--paper-ghost); white-space: nowrap; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau td + td, .tableau th + th { border-inline-start: 1px solid var(--paper-faint); }
.image-md img, .cadre-image { border-radius: var(--r-l); }
.image-md figcaption { margin-top: 8px; }

/* the working line: aligned to the text, a real 44 px row */
.travail { margin-bottom: 8px; }
.tete-travail { min-height: 36px; padding-block: 4px; gap: 8px; font-size: 14px; }
.travail .etapes { margin: 4px 0 8px; gap: 4px; }

/* the row under an answer: icons on the text's left edge, 18 px, one stroke */
.actions { margin-top: 8px; margin-inline-start: -11px; gap: 0; }
.actions button { width: 40px; height: 40px; border-radius: var(--r-s); position: relative; }
.actions button::after { content: ""; position: absolute; inset: -2px 0; }
.actions svg { width: 18px; height: 18px; stroke-width: 1.8; }
.ameliore { margin-top: 8px; }

/* chips: sources, image actions, contact links, the drawing options, one family */
.sources { margin-top: 12px; gap: 8px; }
.sources a, .barre-image > button, .barre-image > a, .boutons-contact a {
  position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: transparent; border: 1px solid var(--paper-faint); color: var(--texte); font-size: 14px; font-weight: 500; text-decoration: none; }
.sources a { display: block; line-height: 34px; max-width: min(260px, 100%); color: var(--doux); }
:is(.sources a, .barre-image > *, .boutons-contact a)::after { content: ""; position: absolute; inset: -4px 0; }
.barre-image { margin-top: 12px; gap: 8px; }
.image-kelsto { margin-top: 12px; }
.fichier-genere { margin-top: 12px; gap: 12px; padding: 12px; border-radius: var(--r-m); border: 1px solid var(--paper-faint); background: var(--paper-ghost); }
.fichier-genere .ext { width: 36px; height: 44px; border-radius: 6px; font-size: 10px; letter-spacing: .04em; }
.fichier-genere .titre { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.fichier-genere .titre small { color: var(--doux); font-size: 13px; font-weight: 400; }
.ouvrir-bouton { margin-top: 12px; min-height: 44px; padding: 0 20px; border-radius: 999px; }

/* the drawing questionnaire: one card, one radius family, quiet hairlines */
.qcm { margin-top: 12px; gap: 12px; padding: 16px; border-radius: var(--r-l); border-color: var(--paper-faint); background: var(--paper-ghost); }
.qcm-tete { font-size: 13px; opacity: 1; color: var(--doux); }
.qcm-nav { gap: 4px; }
.qcm-nav button { width: 32px; height: 32px; background: transparent; border: 1px solid var(--paper-faint); color: var(--texte); font-size: 18px; line-height: 1; }
.qcm-nav button::after { inset: -6px; border-radius: 50%; }
.qcm .qcm-titre { margin: 0; font-size: 17px; line-height: 1.35; }
.qcm-liste, .qcm-formats { gap: 8px; }
.qcm-carte { min-height: 48px; padding: 12px; gap: 12px; align-items: center; border-radius: var(--r-m); border-color: var(--paper-faint); }
.qcm-carte:has(small) { align-items: flex-start; }
.qcm-carte.choisi { border-color: var(--accent); background: var(--accent-doux); }
.qcm-num { width: 24px; height: 24px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--paper-ghost); border: 1px solid var(--paper-faint); color: var(--doux); }
.qcm-carte.choisi .qcm-num { border-color: var(--accent); color: var(--accent); }
/* the advised last choice, "a few more questions" (25 October 2026) */
.qcm-carte.conseille { border-color: var(--accent); background: var(--accent-doux); }
.qcm-carte.conseille .qcm-num { background: var(--accent); border-color: var(--accent); color: #fff; }
.qcm-texte b { font-weight: 600; }
.qcm-texte small { opacity: 1; color: var(--doux); }
.qcm-format { padding: 12px 8px; gap: 8px; }
.qcm-autre-ligne { padding-block: 4px; }
.qcm-autre-ligne input { min-height: 40px; font-size: 16px; }
.qcm-autre-ligne button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.qcm-passer { align-self: flex-end; min-height: 36px; padding: 0 12px; border-radius: 999px; opacity: 1; color: var(--doux); }
.qcm-option { min-height: 36px; padding: 0 14px; border-color: var(--paper-faint); background: transparent; position: relative; }
.qcm-option::after { content: ""; position: absolute; inset: -4px 0; }
.qcm-resume { color: var(--doux); }
.qcm-resume-ligne b { color: var(--texte); font-weight: 500; }

/* the scroll-to-the-end arrow, above the field, only when far from the end */
#saisie { position: relative; }
.vers-bas { position: absolute; top: -52px; inset-inline: 0; margin-inline: auto; translate: 0 8px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; z-index: 3;
  color: var(--texte); background: var(--carte); border: 1px solid var(--paper-faint); box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease-out), translate .3s var(--ease-out), scale .16s var(--ease-out); }
.vers-bas::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
.vers-bas.visible { opacity: 1; translate: 0 0; pointer-events: auto; }

/* ---------- the composer ---------- */
#saisie { padding: 8px max(12px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 12px) max(12px, env(safe-area-inset-left)); }
.boite { max-width: calc(var(--colonne) + 48px); padding: 8px 8px 8px 12px; }
[dir="rtl"] .boite { padding: 8px 12px 8px 8px; }
.alerte-limite { max-width: calc(var(--colonne) + 48px); }
#pieces { gap: 8px; padding: 4px 4px 8px; }
#pieces:empty { display: none; }
#pieces span { padding: 4px 10px; border-radius: var(--r-s); border: 1px solid var(--paper-faint); background: var(--paper-ghost); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boite .rangee { gap: 4px; align-items: flex-end; }
.joindre, #micro, #appel { width: 40px; height: 40px; }
#envoyer { width: 40px; height: 40px; margin: 0; }
.joindre svg, #micro svg, #appel svg { width: 20px; height: 20px; stroke-width: 1.8; }
#texte { padding: 10px 4px; line-height: 1.4; min-height: 40px; scrollbar-width: thin; }
.niveau-pastille { height: 40px; align-self: flex-end; }
@media (hover: hover) and (pointer: fine) {
  .joindre:hover, #micro:hover:not(.ecoute), #appel:hover { color: var(--texte); background: var(--paper-ghost); }
}

/* ---------- the welcome ---------- */
.accueil { padding: 0 8px 40px; gap: 16px; }
.suggestions { gap: 8px; }
.suggestions button { min-height: 44px; padding: 0 16px; gap: 8px; }
.suggestions button svg { width: 18px; height: 18px; stroke-width: 1.8; }

/* ---------- the side drawer ---------- */
aside { padding-inline: 8px; }
aside#tiroir { overscroll-behavior: contain; padding-bottom: 0; }
.marque { padding: 4px 12px 24px; }
.titre-groupe { min-height: 36px; padding: 8px 12px; font-weight: 400; }
.titre-groupe .chev { width: 20px; text-align: center; }
.menu-num .lien { min-height: 44px; padding: 10px 12px; }
.menu-num .sep { margin: 8px 12px; }
.jour { padding: 16px 12px 8px; font-weight: 400; }
#liste-chats button { min-height: 40px; padding: 10px 12px; border-radius: 10px; line-height: 1.35; }
#liste-chats.replie { display: none; }
/* "the whole history" line: icon, then its label, the count at the end */
#liste-chats .tout-historique { display: flex; align-items: center; gap: 12px; margin-top: 8px; min-height: 44px; color: var(--paper-dim); font-weight: 500; font-size: 14px; }
#liste-chats .tout-historique svg { width: 18px; height: 18px; }
#liste-chats .tout-historique .num { color: var(--tres-doux); }
.vide-chats { margin: 8px 12px; color: var(--doux); font-size: 14px; line-height: 1.45; }
aside#tiroir .conversations { margin: 8px 0 0; padding-top: 8px; border-top: 0; position: relative; }
aside#tiroir .conversations::before { content: ""; position: absolute; top: 0; inset-inline: 12px; border-top: 1px solid var(--paper-faint); }
.tete-conv { padding: 0; gap: 0; }
.tete-conv .loupe-menu { width: 40px; height: 40px; }
.cherche-chats { margin: 0 4px 8px; height: 40px; border-radius: 10px; }
.pied-menu { padding: 16px 12px 8px; }
/* the person's row stays at the bottom of the drawer while it scrolls */
.bas-tiroir { position: sticky; bottom: 0; z-index: 1; margin-inline: -8px; padding: 8px 8px calc(env(safe-area-inset-bottom) + 8px);
  border-top: 1px solid var(--paper-faint); background: color-mix(in srgb, var(--nuit) 94%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.moi { min-height: 48px; gap: 12px; padding: 8px 12px; }
.moi .titre { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.moi .reglage-ic { width: 24px; text-align: center; font-size: 17px; }
.avatar { width: 32px; height: 32px; font-size: 15px; }
@media (hover: hover) and (pointer: fine) { .moi:hover { background: var(--paper-ghost); } #liste-chats button:hover:not(.actif) { color: var(--texte); background: var(--paper-ghost); } }
@media (min-width: 900px) { aside#tiroir { padding-top: calc(env(safe-area-inset-top) + 12px); } }

/* ---------- sheets ---------- */
.feuille .tete { min-height: 56px; padding: calc(env(safe-area-inset-top) + 8px) max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); gap: 8px; border-bottom: 1px solid var(--paper-faint); }
.feuille .tete h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feuille .tete button { min-width: 72px; min-height: 44px; padding: 0 8px; border-radius: var(--r-m); white-space: nowrap; }
.feuille .tete .retour-f { color: var(--accent); }
.feuille .corps-f { padding: 8px max(var(--gouttiere), env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 40px) max(var(--gouttiere), env(safe-area-inset-left)); overscroll-behavior: contain; }
@media (min-width: 700px) { .feuille .corps-f { padding-inline: 24px; } }
/* every block in a sheet starts on the same left edge as its groups */
.note-mem, .cherche-hist, .onglets-mem, .fichiers-mem, .grille-photos, .verrou-photos { margin-inline: 0; }
.liste-hist { padding: 0 0 32px; }
.note-mem { margin-block: 12px; line-height: 1.5; }
.note-mem + .note-mem { margin-top: -4px; }
.groupe-titre { margin: 24px 16px 8px; font-size: 12px; letter-spacing: .06em; }
.groupe { border-radius: var(--r-m); }
.groupe + .groupe { margin-top: 24px; }
.note { margin: 8px 16px 0; }
/* a row: its label keeps at least 40 %, a long value wraps at the end, never over it */
.ligne { min-height: 48px; padding: 12px 16px; gap: 12px; }
.ligne > .titre { flex: 1 1 auto; min-width: 40%; }
.ligne > .valeur { flex: 0 1 auto; min-width: 0; text-align: end; line-height: 1.35; }
.ligne > .chevron { flex: none; }
[dir="rtl"] .ligne > .chevron { transform: scaleX(-1); }
.ligne .titre small { margin-top: 4px; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) { button.ligne:hover, label.ligne:hover { background: var(--paper-ghost); } }
.ligne:active { background: var(--paper-ghost); }
.carte-moi { padding: 24px 0 8px; gap: 4px; }
/* the Sounds switch, drawn like the iPhone's (the native one wherever Safari offers it) */
.ligne-switch input[type="checkbox"]:not([switch]), .ligne-switch input[switch] {
  -webkit-appearance: none; appearance: none; position: relative; width: 51px; height: 31px; flex: none; margin: 0; border-radius: 999px; cursor: pointer;
  background: var(--paper-faint); transition: background-color .2s var(--ease-out); }
.ligne-switch input[type="checkbox"]::before { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: translate .25s var(--ease-out); }
.ligne-switch input[type="checkbox"]:checked { background: var(--vert); }
.ligne-switch input[type="checkbox"]:checked::before { translate: 20px 0; }
[dir="rtl"] .ligne-switch input[type="checkbox"]:checked::before { translate: -20px 0; }
.ligne-switch input[type="checkbox"]:focus-visible { outline-offset: 3px; border-radius: 999px; }
/* tabs: a segmented control that never breaks its labels; a phone scrolls it */
.onglets-mem { margin-block: 8px 4px; padding: 4px; gap: 4px; border-radius: var(--r-m); background: var(--paper-ghost); border: 1px solid var(--paper-faint); }
.onglets-mem button { min-height: 36px; padding: 0 12px; border-radius: var(--r-s); font-size: 14px; }
.onglets-mem button.actif { background: var(--accent-doux); color: var(--texte); box-shadow: none; }
.onglets-photos { overflow-x: auto; scrollbar-width: none; }
.onglets-photos::-webkit-scrollbar { display: none; }
.onglets-photos button { flex: 1 0 auto; white-space: nowrap; font-size: 13px; }
.fichiers-mem { gap: 8px; margin-block: 8px 32px; }
.fichier-mem { padding: 16px; border-radius: var(--r-m); background: var(--paper-ghost); border: 1px solid var(--paper-faint); gap: 4px; }
.liste-hist button { min-height: 44px; padding: 12px; border-radius: var(--r-m); }
.liste-hist .jour { margin: 16px 12px 4px; padding: 0; font-size: 12px; }
.cherche-hist { margin-block: 4px 8px; }
.vide { padding: 48px 24px; font-size: 15px; max-width: 34ch; margin-inline: auto; }
/* the forms in sheets (new contact, new category, the hidden album's code) */
.verrou-photos { gap: 8px; margin-block: 24px; }
.verrou-photos input { min-height: 48px; padding: 0 16px; border-radius: var(--r-m); border: 1px solid var(--paper-faint); background: var(--paper-ghost); }
.verrou-photos input:focus { border-color: color-mix(in srgb, var(--accent) 60%, transparent); outline: none; }
.verrou-photos button { min-height: 48px; margin-top: 4px; border-radius: 999px; background: var(--primaire); color: var(--sur-primaire); font-weight: 600; font-size: 16px; }
.verrou-photos button:disabled { opacity: .4; }
.form-cat .titre-cat { margin: 0 4px 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 400; }
.verrou-photos small:empty { display: none; }
.grille-photos { gap: 4px; margin-block: 12px 24px; }
.tuile-photo { border-radius: var(--r-s); }
.ligne-pres, .ligne-contact { gap: 12px; }
.ligne-pres .fichier-genere { margin-top: 0; }
.ligne-pres .boutons { align-items: center; gap: 8px; }
.ligne-pres select { min-height: 40px; max-width: none; padding: 0 16px; border-radius: 999px; border-color: var(--paper-faint); font-size: 15px; text-align: start; color: var(--texte); }
.ligne-pres .effacer, .ligne-contact .effacer { min-height: 40px; padding: 0 12px; border-radius: 999px; color: var(--rouge); font-size: 15px; }
.boutons-contact { gap: 8px; }
.fait-memoire { padding: 12px 16px; }
.fait-memoire .boutons button { min-height: 36px; }
/* usage: the text lines up with the cards' own text */
.util.util-cartes { padding-top: 8px; }
.carte-limite { border-radius: var(--r-l); padding: 16px; border-color: var(--paper-faint); }
.maj-util { padding: 0 0 0 16px; }
[dir="rtl"] .maj-util { padding: 0 16px 0 0; }
.note-util { padding: 0 16px; margin: 0; }
.conseil { border-radius: var(--r-l); padding: 16px; }
.conseil button { min-height: 40px; padding: 0 16px; }
.menu-niveau { border-radius: var(--r-l); }
.menu-niveau button { border-radius: var(--r-m); min-height: 44px; }

/* the zone workshop and the viewers */
.atelier { padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.atelier-panneau { border-radius: var(--r-xl); padding: 16px; gap: 12px; background: color-mix(in srgb, var(--nuit) 96%, transparent); color: var(--texte); border: 1px solid var(--paper-faint); }
:root[data-theme="clair"] .atelier-panneau { background: #fbf8f2; color: #0b0b0c; }
.atelier-tete button { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.atelier-loupe { border-radius: var(--r-m); }
.atelier-libre input { min-height: 44px; border-color: var(--paper-faint); }
.atelier-libre button { min-height: 44px; background: var(--primaire); color: var(--sur-primaire); }
.visionneuse-fermer { width: 44px; height: 44px; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
[dir="rtl"] .visionneuse-fermer { right: auto; left: max(16px, env(safe-area-inset-left)); }

/* toasts: centred above the field, never over it, short and quiet */
.toast { bottom: calc(env(safe-area-inset-bottom) + 96px); max-width: min(420px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 500;
  text-align: center; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); background: var(--paper); color: var(--ink); }
:root[data-theme="clair"] .toast { background: var(--ink); color: var(--paper); }

/* ---------- sign in, sign up, the questions ---------- */
.etape { padding: calc(env(safe-area-inset-top) + 56px) max(24px, env(safe-area-inset-right)) 24px max(24px, env(safe-area-inset-left)); }
.etape h1 { margin-bottom: 12px; }
.etape .sous { margin-bottom: 24px; line-height: 1.5; }
.bas { padding: 12px max(24px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 16px) max(24px, env(safe-area-inset-left)); gap: 8px; }
.champ { height: 52px; border-radius: var(--r-m); margin-bottom: 12px; border: 1px solid var(--paper-faint); background: var(--paper-ghost); }
.champ-libre { border-radius: var(--r-m); border: 1px solid var(--paper-faint); background: var(--paper-ghost); }
.champ:focus, .champ-libre:focus { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.choix { gap: 8px; }
.choix button { min-height: 56px; padding: 16px; border-radius: var(--r-l); border-width: 1px; border-color: var(--paper-faint); }
.conditions { border-radius: var(--r-l); padding: 16px; border-color: var(--paper-faint); }
.recherche { border-radius: var(--r-m); border-color: var(--paper-faint); }
.puce { min-height: 40px; padding: 0 16px; border-width: 1px; border-color: var(--paper-faint); }
.retour { min-height: 44px; min-width: 44px; padding: 0 8px; border-radius: var(--r-m); top: calc(env(safe-area-inset-top) + 24px); inset-inline-start: max(8px, env(safe-area-inset-left)); }
.progression { height: 4px; }
.case-parent { gap: 12px; margin-top: 8px; }
.erreur { margin-top: 8px; }

/* touch screens never keep a hover look after a tap */
@media (hover: none) {
  .suggestions button:hover { transform: none; color: var(--paper-dim); border-color: var(--paper-faint); }
  .menu-num .lien:hover:not(.plus-tard) { background: transparent; color: var(--paper-dim); padding-inline-start: 12px; }
  .qcm-carte:hover:not(.choisi) { border-color: var(--paper-faint); }
  .qcm-format:hover:not(.choisi) .forme { border-color: currentColor; background: none; opacity: .75; }
  .grille-secteurs .secteur:hover { background: rgba(0, 0, 0, .18); }
  .niveau-pastille:hover, .titre-groupe:hover, .loupe-menu:hover:not([aria-expanded="true"]) { color: var(--paper-dim); }
  .nouvelle-conv:hover, .tout-historique:hover, .liste-hist button:hover:not(.actif), .rafraichir:hover, .menu-niveau button:hover { background: transparent; }
}

/* reduced motion: the arrow and the switch only fade */
@media (prefers-reduced-motion: reduce) {
  .vers-bas { transition: opacity .2s ease; }
  .ligne-switch input[type="checkbox"]::before { transition: none; }
  .menu-num .lien { transition: color .2s, background .2s; }
}
/* a title in another script than the page truncates at its own end */
.barre .titre-chat, .feuille .tete h2, .sources a, .fichier-genere .titre { unicode-bidi: plaintext; }
/* the field on its own line once the text runs past one line */
.boite.multi .rangee { flex-wrap: wrap; row-gap: 4px; }
.boite.multi #texte { order: -1; flex: 1 0 100%; padding-inline: 4px; }
.boite.multi .joindre { margin-inline-end: auto; }
#texte { overflow-y: hidden; }

/* 24 October 2026, "c'est trop blanc": the page is the night whatever the phone's
   own setting (only the Light theme puts it on paper), so every menu, popover and
   sheet takes the ink surface and readable text, and paper only in the Light theme. */
:root:not([data-theme="clair"]) { --verre: rgba(11, 11, 12, .72); --ombre: 0 8px 30px rgba(0, 0, 0, .5); }
:root:not([data-theme="clair"]) :is(.menu-niveau, .atelier-panneau) { background: rgba(20, 20, 22, .96); color: var(--paper); }
:root[data-theme="clair"] :is(.menu-niveau, .atelier-panneau) { background: rgba(255, 255, 255, .96); color: #0b0b0c; }

/* =====================================================================
   THE EXPERIENCE, MADE VISIBLE (24 October 2026, his "aucune différence…
   c'est rien ça"). Everyday motion is visible and classy; the spectacle is kept
   for chosen moments: the opening, a picture or a file ready, the first message
   of a new chat. Only transform, opacity and a light blur move. The look stays.
   ===================================================================== */
:root { --ressort-doux: cubic-bezier(.22, 1.25, .36, 1); }
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ressort-doux: linear(0, .09 6%, .3 12%, .55 19%, .76 26%, .9 33%, .98 41%, 1.015 49%, 1.02 56%, 1.012 66%, 1.004 80%, 1); }
}

/* the opening: a brain grows out of the night, then the page rises in */
#ouverture canvas { will-change: transform, opacity; }
@media (prefers-reduced-motion: no-preference) {
  :root.ouvre :is(.barre, #saisie) { opacity: 0; }
  :root.ouvre :is(.mot, .suggestions button, .sur-titre) { animation-play-state: paused !important; }
  :root.arrivee .barre { animation: arrive-haut .7s var(--ease-out) both; }
  :root.arrivee .sur-titre { animation: arrive-bas .7s .05s var(--ease-out) both; }
  :root.arrivee #saisie { animation: arrive-bas .8s .25s var(--ressort-doux) both; }
  @keyframes arrive-haut { from { opacity: 0; translate: 0 -14px; } }
  @keyframes arrive-bas { from { opacity: 0; translate: 0 26px; } }
}

/* the welcome: each word rises out of a blur, the suggestions follow 40 ms apart
   and lift on hover with a soft blue edge */
@media (prefers-reduced-motion: no-preference) {
  .h-geant .mot { animation: monte-mot-net .85s var(--ease-a) both; }
  @keyframes monte-mot-net { from { opacity: 0; transform: translateY(.55em); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
  .accueil .suggestions button { animation: pilule-entre .6s var(--ressort-doux) both; }
  @keyframes pilule-entre { from { opacity: 0; translate: 0 14px; scale: .94; } }
  .accueil .sur-titre { animation: fondu .8s var(--ease-out) both; }
  /* the first message: the greeting simply fades out, nothing flies */
  .accueil.part { animation: fondu-sort .28s var(--ease-out) both; }
  .accueil.part :is(.mot, .suggestions button, .sur-titre) { animation: none; opacity: 1; transform: none; filter: none; }
}
.suggestions button { transition: scale .16s var(--ease-out), translate .45s var(--spring), transform .3s var(--ressort-doux), border-color .25s, color .25s, box-shadow .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .suggestions button:hover { transform: translateY(-2px); color: var(--texte); border-color: rgba(72, 147, 252, .7);
    box-shadow: 0 0 0 1px rgba(72, 147, 252, .25), 0 10px 26px -10px rgba(72, 147, 252, .55); }
}
.suggestions button:active { transform: translateY(-1px); border-color: rgba(72, 147, 252, .7); box-shadow: 0 0 0 1px rgba(72, 147, 252, .25); }
@media (prefers-reduced-motion: reduce) {
  .accueil.part { opacity: 0; transition: opacity .2s; }
}

/* the answer: word by word, each new word fades in from a light blur */
@media (prefers-reduced-motion: no-preference) {
  .msg.kelsto .corps .neuf { animation: mot-neuf .22s var(--ease-out) both; }
  @keyframes mot-neuf { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: blur(0); } }
  /* the end: the icons one after another, a light passes once over the answer */
  .actions.arrive button { animation: icone-arrive .45s var(--ressort-doux) both; }
  .actions.arrive button:nth-child(1) { animation-delay: .12s; }
  .actions.arrive button:nth-child(2) { animation-delay: .2s; }
  .actions.arrive button:nth-child(3) { animation-delay: .28s; }
  @keyframes icone-arrive { from { opacity: 0; translate: 0 6px; scale: .8; } }
  .msg.kelsto { position: relative; }
  .msg.kelsto.balaye .corps { -webkit-mask-image: linear-gradient(100deg, #000 40%, rgba(0, 0, 0, .55) 50%, #000 60%); mask-image: linear-gradient(100deg, #000 40%, rgba(0, 0, 0, .55) 50%, #000 60%);
    -webkit-mask-size: 300% 100%; mask-size: 300% 100%; animation: balayage-texte 1.1s var(--ease-out) both; }
  .msg.kelsto.balaye::after { content: ""; position: absolute; inset: -6px -12px; pointer-events: none; border-radius: 16px;
    background: linear-gradient(100deg, transparent 38%, rgba(72, 147, 252, .14) 47%, rgba(127, 224, 196, .18) 50%, rgba(72, 147, 252, .14) 53%, transparent 62%) no-repeat;
    background-size: 300% 100%; animation: balayage 1.1s var(--ease-out) both; }
  @keyframes balayage { from { background-position: 100% 0; } to { background-position: 0 0; } }
  @keyframes balayage-texte { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
}
@media (prefers-reduced-motion: reduce) { .actions.arrive button { animation: fondu .2s ease both; } }

/* a picture draws itself: its contours traced by a sweep, then the colours fill in */
.cadre-image.compile img.dessin { opacity: 0; filter: saturate(0) brightness(1.5) blur(6px); transition: opacity .75s var(--ease-out), filter .9s var(--ease-out); }
.cadre-image.compile.couleur img.dessin { opacity: 1; filter: none; }
.cadre-image .contours { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; clip-path: inset(0 100% 0 0);
  transition: clip-path .8s cubic-bezier(.45, 0, .2, 1), opacity .8s var(--ease-out); filter: drop-shadow(0 0 3px rgba(72, 147, 252, .7)); }
.cadre-image.trace .contours { clip-path: inset(0 0 0 0); }
.cadre-image.couleur .contours { opacity: 0; }
.cadre-image .ligne-trace { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, #7fe0c4 20%, #fff 50%, #4893fc 80%, transparent); box-shadow: 0 0 18px 4px rgba(72, 147, 252, .55);
  transition: left .8s cubic-bezier(.45, 0, .2, 1), opacity .25s; }
.cadre-image.trace .ligne-trace { left: calc(100% - 3px); opacity: 1; }
.cadre-image.couleur .ligne-trace { opacity: 0; }
/* while a picture is made: a frame of its shape, the blue light, lines that trace
   themselves, a thin line toward the measured time, the time left in words */
.attente-dessin { margin-top: 12px; max-width: min(560px, 100%); transition: opacity .35s var(--ease-out); }
.attente-dessin.part { opacity: 0; }
.cadre-attente, .cadre-image.en-attente { position: relative; overflow: hidden; border-radius: var(--r-l, 16px);
  background: radial-gradient(120% 90% at 25% 15%, rgba(72, 147, 252, .14), transparent 62%), var(--ink-2, #141416);
  box-shadow: inset 0 0 0 1px rgba(72, 147, 252, .16); }
:root[data-theme="clair"] .cadre-attente, :root[data-theme="clair"] .cadre-image.en-attente {
  background: radial-gradient(120% 90% at 25% 15%, rgba(72, 147, 252, .12), transparent 62%), #e4ded3; box-shadow: inset 0 0 0 1px rgba(11, 11, 12, .08); }
.cadre-attente canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.barre-attente { position: absolute; inset-inline: 0; bottom: 0; height: 2px; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #4893fc, #7fe0c4); box-shadow: 0 0 12px rgba(72, 147, 252, .55); }
[dir="rtl"] .barre-attente { transform-origin: right; }
.legende-attente { margin-top: 8px; font-size: 13px; letter-spacing: .01em; color: var(--doux); font-variant-numeric: tabular-nums; }
/* a file is ready: the card assembles from its parts */
@media (prefers-reduced-motion: no-preference) {
  a.fichier-genere.assemble { position: relative; overflow: hidden; animation: carte-assemble .7s var(--ressort-doux) both, carte-halo 1.6s .3s var(--ease-out) both; }
  a.fichier-genere.assemble .ext { animation: ext-arrive .7s .12s var(--ressort-doux) both; }
  a.fichier-genere.assemble .titre { animation: titre-arrive .6s .24s var(--ease-out) both; }
  a.fichier-genere.assemble::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(72, 147, 252, .25) 50%, transparent 70%) no-repeat; background-size: 250% 100%;
    animation: balayage .9s .55s var(--ease-out) both; }
  @keyframes carte-assemble { from { opacity: 0; scale: .92; translate: 0 10px; } }
  @keyframes ext-arrive { from { opacity: 0; transform: translateX(-26px) rotate(-14deg) scale(.6); } }
  @keyframes titre-arrive { from { opacity: 0; transform: translateX(18px); filter: blur(4px); } }
  @keyframes carte-halo { 0% { box-shadow: 0 0 0 1px rgba(72, 147, 252, 0); } 30% { box-shadow: 0 0 0 1px rgba(72, 147, 252, .8), 0 0 34px -4px rgba(72, 147, 252, .55); } 100% { box-shadow: 0 0 0 1px rgba(72, 147, 252, 0); } }
}

/* thinking: the constellation, 72 px, beside a shimmering step; the background
   light never brightens (24 October 2026, "un flash, ça fait mal aux yeux") */
.constellation { width: 72px; height: 32px; margin-block: -4px; transition: margin .45s var(--ease-out); }
.constellation.rassemble { margin-inline-end: -58px; }
.travail.vivant .tete-travail { gap: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .travail.vivant .brille { animation-duration: 2.2s; }
}
:root.travaille #lumiere { filter: blur(70px) saturate(130%); }

/* every tap: a ripple from the touch point, clipped to the button's shape */
.onde { position: fixed; z-index: 95; pointer-events: none; overflow: hidden; }
.onde i { position: absolute; border-radius: 50%; background: radial-gradient(circle, currentColor 0 35%, transparent 72%); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .onde i { animation: onde .55s var(--ease-out) both; } }
@media (prefers-reduced-motion: reduce) { .onde i { transform: none; animation: onde-calme .4s ease both; } }
@keyframes onde { from { transform: scale(.08); opacity: .22; } 60% { opacity: .14; } to { transform: scale(1); opacity: 0; } }
@keyframes onde-calme { from { opacity: .12; } to { opacity: 0; } }
:is(button, .joindre, .puce):active:not(:disabled) { scale: .96; }

/* sending: the bubble springs from its corner, the arrow flies; nothing lights up */
@media (prefers-reduced-motion: no-preference) {
  .msg.moi.envoye .bulle { transform-origin: 100% 100%; animation: bulle-jaillit .62s var(--spring) both; }
  [dir="rtl"] .msg.moi.envoye .bulle { transform-origin: 0 100%; animation-name: bulle-jaillit; }
  @keyframes bulle-jaillit { from { opacity: 0; transform: translate(var(--dx, 12px), var(--dy, 16px)) scale(.6); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
  .fleche-vole { position: fixed; z-index: 6; pointer-events: none; display: grid; place-items: center; animation: fleche-vole .5s cubic-bezier(.5, 0, .75, 0) both; }
  @keyframes fleche-vole { to { transform: translateY(-46px) scale(.8); opacity: 0; } }
  #envoyer.part svg { animation: icone-pop .4s var(--spring) both; }
  #envoyer.revient svg { animation: fleche-revient .5s var(--spring) both; }
  @keyframes icone-pop { from { transform: scale(.4); opacity: 0; } }
  @keyframes fleche-revient { from { transform: translateY(14px); opacity: 0; } }
  /* an old conversation: a quick cross-fade with a slight rise */
  #fil.fil-arrive { animation: fil-arrive .22s var(--ease-out) both; }
  #fil.fil-arrive .msg.entre { animation: none; }
  @keyframes fil-arrive { from { opacity: 0; transform: translateY(6px); } }
}

/* sheets: they slide up on a spring while the page behind steps back and dims */
#app { transform-origin: 50% 0; transition: transform .5s var(--ease-drawer), opacity .4s var(--ease-out), border-radius .5s var(--ease-drawer); }
:root.feuille-ouverte #app { opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  :root.feuille-ouverte #app { transform: scale(.96) translateY(10px); border-radius: 18px; overflow: hidden; }
  .feuille.entre { animation: feuille-ressort .55s var(--ressort-doux) both; }
  @keyframes feuille-ressort { from { translate: 0 100%; } }
  @media (max-width: 699px) {
    .feuille { top: calc(env(safe-area-inset-top) + 10px); border-radius: 16px 16px 0 0; overflow: hidden; box-shadow: 0 -10px 40px rgba(0, 0, 0, .35), 0 60px 0 0 var(--nuit); }
    .feuille .tete { padding-top: 8px; }
  }
  @media (min-width: 700px) { .feuille.entre { animation: feuille-pose-ressort .45s var(--ressort-doux) both; } @keyframes feuille-pose-ressort { from { opacity: 0; translate: 0 26px; scale: .96; } } }
}
/* the drawer on a phone: it slides in and the page shifts slightly with it */
@media (max-width: 899px) {
  main { transition: transform .45s var(--ease-drawer), opacity .35s var(--ease-out); }
  @media (prefers-reduced-motion: no-preference) {
    #app:has(#tiroir.ouvert) main { transform: translateX(36px) scale(.98); opacity: .6; }
    [dir="rtl"] #app:has(#tiroir.ouvert) main { transform: translateX(-36px) scale(.98); }
  }
}
/* switches move on a spring */
.ligne-switch input[type="checkbox"]::before { transition: translate .45s var(--spring), width .2s var(--ease-out); }

/* hover on a desktop: a glow that follows the cursor, clearly visible */
@media (hover: hover) and (pointer: fine) {
  .suggestions button.survole, .carte-limite.survole, a.fichier-genere.survole, .qcm-carte.survole {
    background-image: radial-gradient(160px circle at var(--x, 50%) var(--y, 50%), rgba(72, 147, 252, .16), transparent 70%); }
  .boite::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease-out);
    background: radial-gradient(280px circle at var(--x, 50%) var(--y, 50%), rgba(72, 147, 252, .1), transparent 70%); }
  .boite.survole::after { opacity: 1; }
  :is(.rond, .anneau, .joindre, #micro, #appel, .vers-bas).survole { background-color: var(--paper-ghost); }
}
/* the light never changes pace while Kelsto works: a new duration made the blobs
   jump to another place at once, a flash on every message */
:root.travaille #lumiere i:nth-child(1) { animation-duration: 26s; }
:root.travaille #lumiere i:nth-child(2) { animation-duration: 32s; }
:root.travaille #lumiere i:nth-child(3) { animation-duration: 38s; }

/* the sources inside the text: small numbered pills */
.msg .corps a.cite { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-inline: 2px; vertical-align: .14em;
  border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1; text-decoration: none; font-variant-numeric: tabular-nums;
  color: var(--doux); background: var(--paper-ghost); border: 1px solid var(--paper-faint); transition: color .2s, border-color .2s, background-color .2s; position: relative; }
.msg .corps a.cite::after { content: ""; position: absolute; inset: -12px -6px; }
.msg .corps a.cite:hover, .msg .corps a.cite:focus-visible { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-doux); }

/* Photo: the old app's page, albums as rows with their icon, the chosen one marked */
.titre-photos { margin: 16px 0 20px; font-family: var(--grotesk); font-weight: 500; font-size: clamp(32px, 7vw, 52px); line-height: 1; letter-spacing: -.04em; text-wrap: balance; }
.titre-photos em { font-family: "Times New Roman", Times, Georgia, serif; font-style: italic; font-weight: 400; color: var(--bleu); }
[dir="rtl"] .titre-photos em { font-style: normal; }
.albums-photos { display: grid; gap: 16px; }
@media (min-width: 700px) { .albums-photos { grid-template-columns: 190px 1fr; gap: 24px; align-items: start; } }
.liste-albums { display: grid; gap: 2px; }
.liste-albums .album { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: var(--r-m); text-align: start; color: var(--paper-dim); font-size: 15px; }
.liste-albums .album .lib { flex: 1; }
.liste-albums .album .num-album { font-size: 12px; color: var(--tres-doux); font-variant-numeric: tabular-nums; }
.liste-albums .album.actif { color: var(--texte); background: var(--paper-ghost); }
.liste-albums .album.actif::before { content: ""; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--accent); }
@media (hover: hover) and (pointer: fine) { .liste-albums .album:hover:not(.actif) { color: var(--texte); background: var(--paper-ghost); } }
.contenu-album .legende-album { margin: 2px 0 14px; color: var(--doux); font-size: 14px; line-height: 1.5; }
.contenu-album .grille-photos { margin-block: 0 24px; }
.contenu-album .vide-album { margin: 0; padding: 28px 20px; max-width: none; text-align: start; border-radius: var(--r-l); border: 1px dashed var(--paper-faint); color: var(--doux); line-height: 1.5; }
.contenu-album .verrou-photos { margin-block: 0 24px; }

/* the tooltip */
.bulle-info { position: fixed; z-index: 96; pointer-events: none; max-width: 240px; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 500; line-height: 1.3;
  background: rgba(24, 24, 27, .96); color: #f4f1ea; border: 1px solid rgba(239, 234, 225, .12); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); opacity: 0; transition: opacity .15s var(--ease-out); white-space: nowrap; }
.bulle-info.visible { opacity: 1; }
:root[data-theme="clair"] .bulle-info { background: #16181d; color: #f6f7f9; border-color: transparent; }


/* =====================================================================
   THE LIGHT VERSION (24 October 2026: "le fond de la version claire est moche").
   The same spirit as the night: a very light cool white, the same soft blue and
   teal lights very faint, the grain almost invisible, ink text with real contrast,
   the user's pill in ink, menus and sheets white with hairlines and soft shadows.
   ===================================================================== */
:root[data-theme="clair"] {
  --nuit: #f5f7fa; --lueur-a: rgba(72, 147, 252, .20); --lueur-b: rgba(63, 184, 154, .13); --lueur-c: rgba(72, 147, 252, .15);
  --texte: #0e1116; --doux: rgba(14, 17, 22, .6); --tres-doux: rgba(14, 17, 22, .38); --trait: rgba(14, 17, 22, .1);
  --paper-dim: rgba(14, 17, 22, .6); --paper-faint: rgba(14, 17, 22, .1); --paper-ghost: rgba(14, 17, 22, .04);
  --carte: #ffffff; --bulle: rgba(14, 17, 22, .045); --verre-l: rgba(255, 255, 255, .72); --verre-bord: rgba(14, 17, 22, .08);
  --verre: rgba(255, 255, 255, .78); --accent: #2f7de8; --accent-doux: rgba(47, 125, 232, .1); --bleu: #2f7de8;
  --ombre-douce: 0 1px 2px rgba(14, 17, 22, .04), 0 8px 28px -10px rgba(14, 17, 22, .14);
  --lueur-bouton: rgba(47, 125, 232, .12);
}
:root[data-theme="clair"] #lumiere { filter: blur(80px) saturate(120%); }
:root[data-theme="clair"] body::after { opacity: .018; }
:root[data-theme="clair"] aside { background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .62)); }
:root[data-theme="clair"] .boite { background: #ffffff !important; border-color: rgba(14, 17, 22, .09) !important; box-shadow: var(--ombre-douce); }
:root[data-theme="clair"] .boite:focus-within { border-color: rgba(47, 125, 232, .35) !important; box-shadow: 0 0 0 4px rgba(47, 125, 232, .08), var(--ombre-douce); }
:root[data-theme="clair"] .msg.moi .bulle { background: #161a21 !important; color: #f5f7fa !important; box-shadow: 0 6px 20px -8px rgba(14, 17, 22, .35); }
:root[data-theme="clair"] #envoyer { background: #161a21 !important; color: #f5f7fa !important; }
:root[data-theme="clair"] #saisie #envoyer:disabled { background: rgba(14, 17, 22, .06) !important; color: rgba(14, 17, 22, .35) !important; }
:root[data-theme="clair"] .suggestions button { background: rgba(255, 255, 255, .7); border-color: rgba(14, 17, 22, .09); color: rgba(14, 17, 22, .7); }
:root[data-theme="clair"] .suggestions button svg { color: rgba(14, 17, 22, .55); }
:root[data-theme="clair"] .feuille { background: #fbfcfd; }
:root[data-theme="clair"] .feuille .tete { background: rgba(251, 252, 253, .86); border-bottom-color: rgba(14, 17, 22, .07); }
:root[data-theme="clair"] :is(.feuille .groupe, .carte-limite, .alerte-limite, .menu-niveau, .fichier-mem, .qcm, .conseil) {
  background: #ffffff; border: 1px solid rgba(14, 17, 22, .07); box-shadow: var(--ombre-douce); }
:root[data-theme="clair"] .menu-niveau { box-shadow: 0 24px 60px -12px rgba(14, 17, 22, .22), 0 2px 6px rgba(14, 17, 22, .05); }
:root[data-theme="clair"] .feuille .groupe .ligne + .ligne, :root[data-theme="clair"] .ligne { border-color: rgba(14, 17, 22, .07); }
:root[data-theme="clair"] .bas-tiroir { background: rgba(255, 255, 255, .85); }
:root[data-theme="clair"] .toast { background: #161a21; color: #f5f7fa; }
:root[data-theme="clair"] .bloc-code { background: #ffffff; border-color: rgba(14, 17, 22, .08); }
:root[data-theme="clair"] .msg.kelsto .corps code { background: rgba(14, 17, 22, .04); border-color: rgba(14, 17, 22, .08); }
:root[data-theme="clair"] .principal { --primaire: #161a21; --sur-primaire: #f5f7fa; }
:root[data-theme="clair"] .vers-bas { background: #ffffff; box-shadow: var(--ombre-douce); }
:root[data-theme="clair"] .feuille { box-shadow: 0 -10px 40px rgba(14, 17, 22, .12); }
@media (min-width: 700px) { :root[data-theme="clair"] .feuille { box-shadow: 0 30px 80px -20px rgba(14, 17, 22, .28), 0 0 0 1px rgba(14, 17, 22, .06); } }
:root[data-theme="clair"].feuille-ouverte #app { opacity: .7; }

/* the composer grows smoothly, then scrolls; the expand button and the writing sheet */
#texte { transition: height .2s var(--ease-out); }
.boite { position: relative; }
.agrandir-saisie { position: absolute; top: 6px; inset-inline-end: 6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; z-index: 2;
  color: var(--doux); background: var(--paper-ghost); }
.agrandir-saisie::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.agrandir-saisie:hover { color: var(--texte); }
@media (prefers-reduced-motion: no-preference) { .agrandir-saisie:not([hidden]) { animation: icone-arrive .35s var(--ressort-doux) both; } }
.boite.multi #texte { padding-inline-end: 34px; }
.corps-ecrire { display: flex; flex-direction: column; }
.champ-grand { flex: 1; min-height: 60vh; width: 100%; resize: none; border: 0; outline: none; background: transparent; color: var(--texte); font: inherit; font-size: 18px; line-height: 1.55; padding: 12px 4px; }
@media (prefers-reduced-motion: reduce) { #texte { transition: none; } }
.agrandir-saisie[hidden] { display: none; }

/* the icons under an answer: one stroke, soft hover and press, a drawn check, a playing state */
.actions button { color: var(--doux); transition: color .2s var(--ease-out), background-color .2s var(--ease-out), scale .16s var(--ease-out), translate .45s var(--spring); }
@media (hover: hover) and (pointer: fine) { .actions button:hover { color: var(--texte); background: var(--paper-ghost); } }
.actions button:active { background: var(--paper-ghost); }
.actions button.fait { color: var(--sarcelle, #3fb89a); }
.actions button.joue { color: var(--accent); background: var(--accent-doux); }
.trace-coche { stroke-dasharray: 22; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .actions button.fait .trace-coche { animation: trace-coche .4s var(--ease-out) both; }
  @keyframes trace-coche { from { stroke-dashoffset: 22; } }
  .actions button.joue svg path { transform-box: fill-box; transform-origin: center; animation: onde-son .9s ease-in-out infinite alternate; }
  .actions button.joue svg .o2 { animation-delay: -.3s; } .actions button.joue svg .o3 { animation-delay: -.6s; } .actions button.joue svg .o4 { animation-delay: -.15s; }
  @keyframes onde-son { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
}

/* the usage gauge: thin, a soft gradient, round caps, a faint track, a glow past 75 % */
.anneau svg { width: 28px; height: 28px; overflow: visible; }
.anneau circle { stroke-width: 2.6; }
.anneau .fond-a { stroke: var(--paper-faint); }
.anneau .plein-a { stroke: url(#anneau-degrade); stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease-out), stroke .4s var(--ease-out), filter .4s; }
.anneau.haut .plein-a, .anneau.plein .plein-a { filter: drop-shadow(0 0 3px rgba(240, 160, 32, .55)); }
.anneau.plein .plein-a { filter: drop-shadow(0 0 3px rgba(255, 69, 58, .55)); }
/* the usage bars fill from 0 a little after the sheet arrives */
.carte-limite .piste { height: 6px; }
.carte-limite .piste i { transition: transform .9s .12s var(--ease-out); background: linear-gradient(90deg, #7fe0c4, var(--remplir)); }
.carte-limite.haut .piste i, .carte-limite.plein .piste i { background: var(--remplir); }

/* an error: a calm line inside the thread, with a quiet "Try again" */
.erreur-calme { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 8px 8px 14px; max-width: 560px; border-radius: 14px;
  background: var(--paper-ghost); border: 1px solid var(--paper-faint); color: var(--doux); font-size: 14.5px; line-height: 1.4; }
.erreur-calme .pt { width: 6px; height: 6px; border-radius: 50%; background: var(--ambre); flex: none; opacity: .8; }
.erreur-calme .txt { flex: 1; min-width: 0; }
.erreur-calme button { flex: none; min-height: 34px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--texte); border: 1px solid var(--paper-faint); }
@media (hover: hover) and (pointer: fine) { .erreur-calme button:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); } }
@media (prefers-reduced-motion: no-preference) { .erreur-calme { animation: alerte-entre .3s var(--ease-out) both; } }

/* sign-in and sign-up: the brain softly behind the form */
.ecran.avec-cerveau { isolation: isolate; }
.ecran.avec-cerveau > :is(.etape, .bas, form) { position: relative; z-index: 1; }
.fond-cerveau { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .26; }
:root[data-theme="clair"] .fond-cerveau { opacity: .2; }
@media (prefers-reduced-motion: no-preference) { .fond-cerveau { animation: fondu 1.2s var(--ease-out) both; } }

/* 25 October 2026, his screenshots: no chat title in the top bar, and the viewer's
   close button back in the corner (the shared `position: relative` pulled it to the centre). */
.barre .titre-chat { visibility: hidden; }
.visionneuse .visionneuse-fermer { position: absolute; z-index: 2; }

/* ---------- Kelsto Kids (25 October 2026): the same ink and blue light, softer and
   bigger: rounded type, large tiles, a large composer, no ring, no menu ---------- */
.kids-ecran { position: fixed; inset: 0; display: flex; flex-direction: column; font-family: var(--arrondi); }
.kids-tete { display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 12px) 16px 10px; }
.kids-tete img { width: 30px; height: 30px; border-radius: 9px; }
.kids-tete strong { font-size: 19px; letter-spacing: -.01em; flex: 1; }
.kids-reste { font-size: 14px; color: var(--sarcelle); background: var(--verre-l); border: 1px solid var(--verre-bord); border-radius: 999px; padding: 5px 11px; }
.kids-reste:empty { display: none; }
.kids-rond { width: 40px; height: 40px; border-radius: 50%; font-size: 21px; background: var(--verre-l); border: 1px solid var(--verre-bord); }
.kids-sortir { font-size: 14px; color: var(--doux); padding: 8px 10px; }
.kids-fil { flex: 1; overflow-y: auto; padding: 8px 16px 20px; display: flex; flex-direction: column; gap: 14px; max-width: 760px; width: 100%; margin: 0 auto; }
.kids-accueil { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 4vh; }
.kids-orbe { width: 92px; height: 92px; border-radius: 50%; margin-bottom: 18px; }
.kids-accueil h1 { font-size: clamp(32px, 7vw, 46px); line-height: 1.05; margin: 0 0 6px; letter-spacing: -.02em; }
.kids-sous { color: var(--doux); font-size: 19px; margin: 0 0 24px; }
.kids-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 520px; }
.kids-tuile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 118px; border-radius: 26px;
  font-size: 19px; font-weight: 600; background: var(--verre-l); border: 2px solid var(--verre-bord); transition: transform .18s, border-color .18s; }
.kids-tuile .k-ic svg { width: 38px; height: 38px; }
.kids-tuile.t-dessin .k-ic { color: var(--sarcelle); } .kids-tuile.t-histoire .k-ic { color: var(--mer); }
.kids-tuile.t-devoirs .k-ic { color: #8c78ff; } .kids-tuile.t-question .k-ic { color: var(--sarcelle-vive, var(--sarcelle)); }
.kids-tuile:active { transform: scale(.97); }
.kids-tuile.choisie { border-color: var(--mer); background: var(--accent-doux); }
.kids-msg { display: flex; flex-direction: column; }
.kids-msg.moi { align-items: flex-end; }
.kids-msg .kids-bulle { max-width: min(88%, 620px); border-radius: 24px; padding: 13px 17px; font-size: 19px; line-height: 1.45; }
.kids-msg.moi .kids-bulle { background: var(--encre); color: var(--nuit, #fff); border-end-end-radius: 8px; }
.kids-msg.kelsto .kids-bulle { background: var(--verre-l); border: 1px solid var(--verre-bord); border-end-start-radius: 8px; }
.kids-msg .kids-bulle p { margin: 0 0 8px; } .kids-msg .kids-bulle p:last-child { margin: 0; }
.kids-pense { color: var(--doux); }
.kids-dessin { display: block; width: 100%; max-width: 480px; border-radius: 18px; margin-bottom: 8px; background: #fff; }
.kids-bas { padding: 6px 16px calc(env(safe-area-inset-bottom) + 14px); max-width: 760px; width: 100%; margin: 0 auto; }
.kids-bas.ferme .kids-boite { opacity: .35; pointer-events: none; }
.kids-note { margin: 0 0 8px; text-align: center; font-size: 13.5px; color: var(--doux); }
.kids-boite { display: flex; align-items: flex-end; gap: 8px; padding: 8px; border-radius: 30px; background: var(--verre-l); border: 1.5px solid var(--verre-bord);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.kids-boite:focus-within { border-color: var(--mer); }
.kids-boite textarea { flex: 1; border: 0; background: none; outline: none; resize: none; font-size: 20px; line-height: 1.35; padding: 11px 8px; min-height: 48px; font-family: inherit; }
.kids-envoyer, .kids-micro { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; }
.kids-envoyer { background: var(--encre); color: var(--nuit, #fff); }
.kids-micro { background: var(--accent-doux); color: var(--mer); }
.kids-micro.ecoute { background: var(--mer); color: #fff; }
.kids-puces { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.kids-ecran:has(.kids-accueil) .kids-puces { display: none; }
.kids-puce { flex: none; display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 15px; border-radius: 999px; font-size: 16px; font-weight: 600;
  background: var(--verre-l); border: 1.5px solid var(--verre-bord); }
.kids-puce .k-ic svg { width: 20px; height: 20px; display: block; }
.kids-puce.t-dessin .k-ic { color: var(--sarcelle); } .kids-puce.t-histoire .k-ic { color: var(--mer); }
.kids-puce.t-devoirs .k-ic { color: #8c78ff; } .kids-puce.t-question .k-ic { color: var(--sarcelle); }
.kids-puce.choisie { border-color: var(--mer); background: var(--accent-doux); }
.kids-repos { margin: auto; text-align: center; max-width: 420px; padding: 28px 22px; border-radius: 28px; background: var(--verre-l); border: 1px solid var(--verre-bord); font-size: 20px; line-height: 1.4; }
.kids-lune { font-size: 46px; margin-bottom: 8px; }
/* the parent's side bar and mirror */
.groupe-enfants { margin-top: 6px; }
.titre-groupe.statique { cursor: default; }
.avatar-enfant { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none;
  background: radial-gradient(circle at 32% 28%, #c9fff0 0%, var(--sarcelle-vive, #7fe0c4) 30%, var(--mer) 100%); color: #08263f; }
.pastille-alerte { margin-inline-start: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--rouge); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.aide-f { color: var(--doux); margin: 4px 16px 6px; line-height: 1.4; }
.alerte-enfant .titre strong { color: var(--rouge); }
.alerte-enfant.vue .titre strong { color: var(--doux); }
.champ-ligne .champ, .champ-ligne select { max-width: 55%; text-align: end; border: 0; background: none; outline: none; font-size: 17px; }
.ligne.rouge .titre { color: var(--rouge); }
.miroir-fil { display: flex; flex-direction: column; gap: 10px; padding: 6px 2px 30px; }
.miroir-fil .kids-bulle { font-size: 16px; }
.miroir-fil .heure-msg { color: var(--doux); font-size: 12px; margin: 0 6px 3px; }
.miroir-fil .avec-alerte .kids-bulle { box-shadow: 0 0 0 1.5px var(--rouge); }
.kids-code-fond { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .35); display: grid; place-items: center; padding: 16px; }
.kids-code { width: min(360px, 100%); border-radius: 22px; padding: 22px; background: var(--carte); display: grid; gap: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .3); }
.kids-code h3 { margin: 0 0 4px; text-align: center; }
.kids-code .champ { font-size: 26px; text-align: center; letter-spacing: .3em; height: 54px; border-radius: 14px; border: 1px solid var(--trait); background: var(--groupe); }

/* =====================================================================
   THE SCREENS (25 October 2026, his list): Photo, Présentations, Contact,
   Agenda, Mémoire, Routines, Historique in the main area, in the old app's
   professional style (livrables/kelsto/app/pwa/app.html): the eyebrow, the
   big title with its blue italic end, cards with hairlines, the tools' rows,
   and the screen's own "Demande à Kelsto" bar. ecrans.js draws them.
   ===================================================================== */
main.en-ecran > #fil, main.en-ecran > #saisie, main.en-ecran .alerte-limite { display: none !important; }
.ecran-vue { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.ev-defile { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px max(var(--gouttiere), env(safe-area-inset-right)) 24px max(var(--gouttiere), env(safe-area-inset-left)); }
.ev-largeur { max-width: 900px; margin: 0 auto; width: 100%; }
.ev-largeur .h-geant { margin-bottom: 22px !important; }
@media (max-width: 600px) { .ev-largeur .h-geant { font-size: clamp(38px, 11.5vw, 52px) !important; } }
.ev-corps { display: flex; flex-direction: column; gap: 14px; }
.ev-zone { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ev-note { color: var(--doux); font-size: 14px; line-height: 1.55; margin: 0; }
.ev-vide { color: var(--doux); padding: 28px 4px; font-size: 15px; line-height: 1.5; }
.ev-erreur { color: #e46a55; min-height: 1em; font-size: 13px; }
.retour-ecran { display: grid !important; }
.retour-ecran svg { color: var(--doux); }
[dir="rtl"] .retour-ecran svg { transform: scaleX(-1); }

/* the shared pieces */
.ev-carte { border-radius: 18px; border: 1px solid var(--paper-faint); background: linear-gradient(180deg, rgba(24, 24, 27, .72), rgba(16, 16, 18, .72));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
:root[data-theme="clair"] .ev-carte { background: rgba(255, 255, 255, .72); }
.ev-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 13px;
  background: var(--paper); color: var(--ink); font-weight: 500; font-size: 15px; transition: background .3s, transform .3s var(--ease-a), color .3s; }
:root[data-theme="clair"] .ev-bouton { background: var(--ink); color: var(--paper); }
.ev-bouton:hover { background: var(--bleu); color: #fff; transform: translateY(-1px); }
.ev-bouton svg.i { width: 18px; height: 18px; }
.ev-bouton.doux { background: var(--paper-ghost); color: var(--texte); border: 1px solid var(--paper-faint); }
.ev-bouton.doux:hover { background: rgba(72, 147, 252, .12); color: var(--texte); }
.ev-bouton.petit { min-height: 36px; padding: 0 14px; font-size: 14px; }
.ev-bouton.danger, .ev-lien.danger { color: #e46a55; }
.ev-bouton:disabled { opacity: .45; transform: none; }
.ev-lien { color: var(--bleu); font-size: 14px; font-weight: 500; padding: 6px 2px; min-height: 32px; }
.ev-lien:hover { text-decoration: underline; text-underline-offset: 3px; }
.ev-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ev-x { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--doux); flex: none; }
.ev-x:hover { color: var(--texte); background: var(--paper-ghost); }
.ev-x svg.i { width: 16px; height: 16px; }
.ev-points { display: inline-grid; place-items: center; min-width: 54px; min-height: 40px; padding: 0 12px; border-radius: 13px; border: 1px dashed var(--paper-faint);
  color: var(--doux); font-weight: 700; letter-spacing: 3px; transition: border-color .3s var(--ease-a), color .3s var(--ease-a); }
.ev-points:hover { border-color: var(--bleu); color: var(--bleu); }
.ev-points-grand { display: flex; flex-direction: column; gap: 8px; min-height: 96px; letter-spacing: 0; font-weight: 500; font-size: 14px; }
.ev-pill { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--paper-faint); color: var(--doux); white-space: nowrap; }
.ev-bientot { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--paper-faint); color: var(--doux); }
.ev-info { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(72, 147, 252, .3); background: rgba(72, 147, 252, .07);
  font-size: 14px; line-height: 1.5; color: var(--texte); flex-wrap: wrap; }
.ev-info svg.i { color: var(--bleu); width: 18px; height: 18px; margin-top: 1px; }
.ev-info span { flex: 1; min-width: 200px; }
.ev-info.ok { border-color: var(--paper-faint); background: transparent; color: var(--doux); }
.ev-info .ev-lien { padding: 0; min-height: 0; }
.ev-onglets { display: flex; gap: 6px; flex-wrap: wrap; }
.ev-onglet { padding: 9px 15px; border-radius: 12px; font-size: 15px; color: var(--doux); border: 1px solid transparent; transition: all .3s var(--ease-a); min-height: 40px; }
.ev-onglet.actif { color: var(--texte); border-color: var(--paper-faint); background: var(--paper-ghost); }
.ev-onglet:hover { color: var(--texte); }
.ev-form { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.ev-form h3 { margin: 0 0 2px; font-size: 15px; font-weight: 500; }
.ev-form input, .ev-form select, .ev-cat-form input, .ev-select, .ev-edit, .ev-form-routine input {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--paper-faint); background: rgba(8, 8, 10, .35); color: var(--texte); font-size: 16px; outline: 0; }
:root[data-theme="clair"] .ev-form input, :root[data-theme="clair"] .ev-form select, :root[data-theme="clair"] .ev-cat-form input, :root[data-theme="clair"] .ev-select,
:root[data-theme="clair"] .ev-edit, :root[data-theme="clair"] .ev-form-routine input { background: rgba(255, 255, 255, .7); }
.ev-form input:focus, .ev-cat-form input:focus, .ev-select:focus, .ev-edit:focus { border-color: rgba(72, 147, 252, .55); }
.ev-form .ev-bouton { align-self: flex-start; }
@media (min-width: 700px) { .ev-form-ligne { display: grid; grid-template-columns: 2fr 1fr 1fr auto; align-items: center; } .ev-form-ligne h3, .ev-form-ligne .ev-erreur { grid-column: 1 / -1; } .ev-form-ligne .ev-bouton { align-self: stretch; } }

/* the eyebrow line of a search: what was understood */
.ev-etat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.ev-compris { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--doux); }
.ev-pastille-txt { padding: 5px 12px; border-radius: 99px; background: rgba(72, 147, 252, .12); color: var(--texte); }
.ev-nb { font-variant-numeric: tabular-nums; }
.ev-rien { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 0; }
.ev-rien p { margin: 0; color: var(--doux); }

/* the screen's own bar: "DEMANDE À KELSTO · ..." and its field */
.ev-demande { padding: 8px max(12px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 12px) max(12px, env(safe-area-inset-left)); }
.ev-demande .ask { max-width: 820px; margin: 0 auto 8px; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--doux);
  display: flex; gap: 8px; align-items: baseline; overflow: hidden; }
.ev-demande .ask b { color: var(--bleu); font-weight: 500; white-space: nowrap; }
.ev-demande .ask span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ev-boite { display: flex !important; align-items: center; gap: 8px; margin: 0 auto; padding: 6px 6px 6px 14px !important; }
.ev-boite input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; padding: 10px 2px; color: var(--texte); }
.ev-boite input::placeholder { color: var(--doux); }
.ev-boite input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .6; }
.ev-loupe { color: var(--doux); width: 18px !important; height: 18px !important; }
.ev-envoyer { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--paper); color: var(--ink); flex: none; transition: background .3s, transform .3s var(--ease-a); }
:root[data-theme="clair"] .ev-envoyer { background: var(--ink); color: var(--paper); }
.ev-envoyer:hover { background: var(--bleu); color: #fff; }
.ev-envoyer svg.i { width: 18px; height: 18px; stroke-width: 2.2; }
@media (max-width: 520px) { .ev-demande .ask span { display: none; } }

/* Photo: the albums on the side, the grid */
.ev-deux { display: grid; grid-template-columns: 210px 1fr; gap: 22px; align-items: start; }
.ev-cote { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; }
.ev-album { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; width: 100%; text-align: start; color: var(--doux);
  transition: color .35s var(--ease-a), background .35s var(--ease-a); min-height: 44px; }
.ev-album:hover { color: var(--texte); background: var(--paper-ghost); }
.ev-album.actif { color: var(--texte); background: var(--paper-ghost); }
.ev-album.actif::before { content: ""; position: absolute; inset-inline-start: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--bleu); }
.ev-album span:not(.ev-num) { flex: 1; }
.ev-num { font-size: .7rem; opacity: .55; font-variant-numeric: tabular-nums; }
.ev-droite { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ev-legende { max-width: 560px; }
.ev-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ev-tuile { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--paper-ghost); border: 1px solid var(--paper-faint); padding: 0;
  transition: transform .5s var(--ease-a), border-color .3s; }
.ev-tuile:hover { transform: scale(1.02); border-color: rgba(72, 147, 252, .45); }
.ev-tuile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-tuile-leg { position: absolute; inset-inline: 0; bottom: 0; padding: 22px 10px 8px; font-size: 12px; line-height: 1.3; color: #fff; text-align: start;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .62)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-reste { position: absolute; top: 8px; inset-inline-start: 8px; font-size: .62rem; letter-spacing: .1em; color: #fff; background: rgba(8, 8, 10, .6); padding: 3px 8px; border-radius: 99px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ev-serrure { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 18px; text-align: center; max-width: 440px; }
.ev-serrure > svg.i { width: 26px; height: 26px; color: var(--bleu); }
.ev-titre-carte { margin: 0; font-size: clamp(28px, 6vw, 40px); font-weight: 500; letter-spacing: -.035em; line-height: 1; font-family: var(--grotesk); }
.ev-titre-carte em { font-family: "Times New Roman", Times, Georgia, serif; font-style: italic; font-weight: 400; color: var(--bleu); }
[dir="rtl"] .ev-titre-carte em { font-style: normal; }
.ev-code { width: 220px; max-width: 100%; text-align: center; font-size: 22px !important; letter-spacing: .4em; -webkit-text-security: disc; padding: 12px !important;
  border-radius: 12px; border: 1px solid var(--paper-faint); background: rgba(8, 8, 10, .45); color: var(--texte); outline: 0; }
:root[data-theme="clair"] .ev-code { background: rgba(255, 255, 255, .8); }
.ev-code::placeholder { letter-spacing: .1em; font-size: 14px; -webkit-text-security: none; color: var(--doux); }
.ev-code:focus { border-color: var(--bleu); }
.ev-dialogue { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(6, 6, 8, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: default; z-index: 3; }
:root .ev-dialogue .ev-serrure.ev-carte { background: var(--nuit); }
.visionneuse-photo .barre-photo small { max-width: 60ch; }

/* Présentations and Contact: the old app's table, one row per tool */
.ev-tableau { display: grid; grid-template-columns: 190px 1fr; border-radius: 18px; overflow: hidden; border: 1px solid var(--paper-faint); }
.ev-tableau > div { padding: 16px; border-bottom: 1px solid var(--paper-faint); min-width: 0; }
.ev-tableau > div:nth-last-child(-n+2) { border-bottom: 0; }
.ev-outil { display: flex; align-items: center; gap: 12px; background: rgba(20, 20, 22, .6); }
:root[data-theme="clair"] .ev-outil { background: rgba(255, 255, 255, .55); }
.ev-outil b { display: block; font-weight: 500; }
.ev-outil small { display: block; color: var(--doux); font-size: 12px; line-height: 1.35; }
.ev-logo { width: 34px; height: 34px; flex: none; display: grid; place-items: center; }
.ev-logo svg.logo { width: 34px; height: 34px; display: block; }
.ev-logo-ic { border-radius: 10px; background: var(--paper-ghost); border: 1px solid var(--paper-faint); color: var(--bleu); }
.ev-logo-ic svg.i { width: 18px; height: 18px; }
.ev-cats { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; background: rgba(14, 14, 16, .45); }
:root[data-theme="clair"] .ev-cats { background: rgba(255, 255, 255, .3); }
.ev-cat { min-width: 190px; max-width: 290px; flex: 1 1 200px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--paper-faint); background: rgba(8, 8, 10, .35); display: flex; flex-direction: column; gap: 6px; }
:root[data-theme="clair"] .ev-cat { background: rgba(255, 255, 255, .6); }
.ev-cat h3 { margin: 0; font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.ev-cat .point-cat { width: 8px; height: 8px; border-radius: 99px; background: var(--bleu); flex: none; }
.ev-style { font-size: 12px; color: var(--doux); font-style: italic; }
.ev-decks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ev-decks.ev-carte { padding: 10px 14px; }
.ev-deck { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--paper-faint); }
.ev-deck:last-child { border-bottom: 0; }
.ev-deck-lien { display: flex; align-items: center; gap: 8px; color: var(--texte); text-decoration: none; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.ev-deck-lien:hover { color: var(--bleu); }
.ev-deck-lien svg.i { width: 16px; height: 16px; color: #ed6c47; }
.ev-deck-bas { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--doux); }
.ev-deck-bas small { flex: 1; font-variant-numeric: tabular-nums; }
.ev-ranger { max-width: 120px; min-height: 30px; padding: 2px 6px; border-radius: 8px; font-size: 12px; background: transparent; color: var(--doux); border: 1px solid var(--paper-faint); }
.ev-vide-cat { color: var(--doux); font-size: 13px; }
.ev-cat-form { gap: 8px; }
.ev-cat-form input { min-height: 38px; font-size: 15px; }
.ev-fiches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ev-fiche { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--paper-faint); background: rgba(8, 8, 10, .35); min-width: 0; max-width: 100%; text-align: start; transition: border-color .3s; }
:root[data-theme="clair"] .ev-fiche { background: rgba(255, 255, 255, .6); }
.ev-fiche:hover { border-color: rgba(72, 147, 252, .45); }
.ev-fiche b { display: block; font-weight: 500; font-size: 15px; }
.ev-fiche small { display: block; color: var(--doux); font-size: 12.5px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-ini { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: var(--bleu); flex: none; }
.ev-pilules { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.ev-pilule { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--paper-faint); color: var(--texte); text-decoration: none; font-weight: 500; }
.ev-pilule:hover { border-color: var(--bleu); color: var(--bleu); }
.ev-pilule svg.i { width: 18px; height: 18px; }
.ev-fiche-grande { padding: 14px 16px; }
.ev-fiche-grande p { margin: 0 0 4px; font-size: 17px; }

/* Agenda and History: one card per day */
.ev-jour { padding: 6px 16px 8px; }
.ev-jour-tete { padding: 12px 0 8px; border-bottom: 1px solid var(--paper-faint); }
.ev-jour-titre { font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--doux); padding: 10px 0 6px; }
.ev-jour-tete .ev-jour-titre { padding: 0 0 6px; }
.ev-jour-resume { margin: 0; font-size: 17px; line-height: 1.45; letter-spacing: -.01em; }
.ev-rdv { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--paper-faint); }
.ev-jour-titre + .ev-rdv { border-top: 0; }
.ev-heure { font-variant-numeric: tabular-nums; color: var(--doux); font-size: 14px; min-width: 52px; }
.ev-rdv-titre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ev-entree { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 4px; border-top: 1px solid var(--paper-faint); text-align: start; border-radius: 0; transition: background .25s; }
.ev-jour-tete + .ev-entree { border-top: 0; }
.ev-entree:hover { background: var(--paper-ghost); }
.ev-entree-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--paper-ghost); border: 1px solid var(--paper-faint); color: var(--bleu); }
.ev-entree-ic svg.i { width: 17px; height: 17px; }
.ev-entree-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ev-entree-txt b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-entree-txt small { color: var(--doux); font-size: 12px; }

/* Mémoire */
.ev-souvenirs { padding: 2px 16px; }
.ev-souvenir { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--paper-faint); }
.ev-souvenir:last-child { border-bottom: 0; }
.ev-souvenir > svg.i { color: var(--bleu); width: 16px; height: 16px; }
.ev-souvenir-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.ev-souvenir small { color: var(--doux); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ev-edition { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--paper-faint); }
.ev-edition .ev-bouton { align-self: flex-start; }
.ev-fichiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ev-fichier { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; text-align: start; transition: border-color .3s, transform .4s var(--ease-a); min-width: 0; }
.ev-fichier:hover { border-color: rgba(72, 147, 252, .45); transform: translateY(-2px); }
.ev-fichier b { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; overflow-wrap: anywhere; }
.ev-fichier b svg.i { width: 17px; height: 17px; color: var(--doux); }
.ev-fichier small { color: var(--doux); font-size: 13px; line-height: 1.35; }
.ev-fichier .ev-compte { margin-top: auto; padding-top: 4px; font-size: 12px; color: var(--bleu); }
.ev-fichier.sans .ev-compte { color: var(--doux); }
.ev-fichier.double { border-color: rgba(72, 147, 252, .4); background: linear-gradient(180deg, rgba(72, 147, 252, .14), rgba(72, 147, 252, .04)); }
.ev-fichier.double b svg.i { color: var(--bleu); }
.ev-retour { align-self: flex-start; }
.ev-fichier-titre { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.02em; font-family: var(--grotesk); overflow-wrap: anywhere; }
.ev-fichier-titre svg.i { color: var(--bleu); }
.ev-comportement { padding: 2px 16px; }
.ev-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--paper-faint); }
.ev-ligne:last-child { border-bottom: 0; }
.ev-ligne span { color: var(--doux); font-size: 14px; }
.ev-ligne b { font-weight: 500; text-align: end; overflow-wrap: anywhere; }
.ev-ligne b.doux { color: var(--doux); font-weight: 400; font-style: italic; }
.ev-souvenirs .fait-memoire { padding: 12px 0; border-bottom: 1px solid var(--paper-faint); }

/* Routines, like Claude's "Tâches planifiées" */
.ev-outils { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ev-outils[hidden] { display: none; }
.ev-cherche-boite { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--paper-faint); background: var(--paper-ghost); }
.ev-cherche-boite svg.i { width: 17px; height: 17px; color: var(--doux); }
.ev-cherche { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: var(--texte); }
.ev-outils .ev-select { width: auto; min-width: 110px; flex: 0 1 auto; }
.ev-routines { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ev-routine { display: flex; flex-direction: column; gap: 8px; padding: 16px; min-width: 0; }
.ev-routine.en-pause { opacity: .72; }
.ev-routine-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ev-routine-tete b { font-weight: 500; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.ev-etat-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 500; border: 1px solid var(--paper-faint); color: var(--doux); }
.ev-etat-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ev-etat-pill.on { color: #3fb89a; border-color: rgba(63, 184, 154, .45); background: rgba(63, 184, 154, .1); }
.ev-routine-desc { margin: 0; color: var(--doux); font-size: 14px; line-height: 1.45; }
.ev-routine-bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--texte); margin-top: auto; padding-top: 6px; border-top: 1px solid var(--paper-faint); }
.ev-routine-bas > svg.i { width: 16px; height: 16px; color: var(--bleu); }
.ev-routine-bas > span { flex: 1; min-width: 140px; }
.ev-routine-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ev-modeles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.ev-modele { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; text-align: start; transition: border-color .3s, transform .4s var(--ease-a); min-width: 0; }
.ev-modele:hover { border-color: rgba(72, 147, 252, .45); transform: translateY(-2px); }
.ev-modele b { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 16px; }
.ev-modele b svg.i { color: var(--bleu); width: 18px; height: 18px; }
.ev-modele small { color: var(--doux); font-size: 13.5px; line-height: 1.4; }
.ev-modele .ev-compte { margin-top: 6px; font-size: 13px; color: var(--bleu); font-weight: 500; }
.ev-modele.indispo { opacity: .6; }
.ev-form-routine { padding: 4px 0 20px; gap: 14px; }
.ev-champ { display: flex; flex-direction: column; gap: 6px; }
.ev-champ > span { font-size: 13px; color: var(--doux); }
.ev-champ[hidden] { display: none; }
.ev-jours { display: flex; gap: 6px; flex-wrap: wrap; }
.ev-jsem { min-height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--paper-faint); color: var(--doux); font-size: 14px; }
.ev-jsem.on { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.ev-cases { display: flex; flex-direction: column; gap: 2px; }
.ev-case { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; }
.ev-case input { width: 18px !important; height: 18px; min-height: 0 !important; accent-color: var(--bleu); flex: none; }

/* phones: one column, the albums as a row of chips */
@media (max-width: 700px) {
  .ev-deux { grid-template-columns: 1fr; gap: 12px; }
  .ev-cote { flex-direction: row; flex-wrap: wrap; position: static; gap: 6px; }
  .ev-cote::-webkit-scrollbar { display: none; }
  .ev-album { flex: none; width: auto; padding: 8px 12px; border: 1px solid var(--paper-faint); border-radius: 99px; min-height: 40px; }
  .ev-album.actif { border-color: var(--bleu); }
  .ev-album.actif::before { display: none; }
  .ev-album span:not(.ev-num) { flex: none; }
  .ev-grille { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
  .ev-tableau { grid-template-columns: 1fr; }
  .ev-tableau > div:nth-last-child(2) { border-bottom: 1px solid var(--paper-faint); }
  .ev-outil { padding-bottom: 10px !important; }
  .ev-cat { max-width: none; }
  .ev-routines, .ev-modeles { grid-template-columns: 1fr; }
  .ev-fichiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-fichier { padding: 14px 12px; }
  .ev-fiche small { max-width: 160px; }
}

/* Code: said honestly, in preparation (his list, point 5) */
.accueil-code .sur-titre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge-prep { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; border: 1px solid rgba(72, 147, 252, .45); color: var(--bleu); letter-spacing: .14em; }
.note-code { margin: 0; color: var(--doux); max-width: 560px; line-height: 1.55; font-size: 15px; }

/* the generic chips under an answer (his list, point 10) */
.puces-suite { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.puce-suite { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--paper-faint); background: var(--paper-ghost);
  color: var(--texte); font-size: 14px; transition: border-color .25s, background .25s, transform .25s var(--ease-a); }
.puce-suite:hover:not(:disabled) { border-color: var(--bleu); background: rgba(72, 147, 252, .1); transform: translateY(-1px); }
.puce-suite .fleche-puce { color: var(--bleu); }
[dir="rtl"] .puce-suite .fleche-puce { transform: scaleX(-1); }
.puce-suite:disabled { opacity: .5; }
.puce-suite.choisie { opacity: 1; border-color: var(--bleu); }
.msg.kelsto .corps em { font-style: italic; }
.ev-droite > .ev-bouton, .ev-zone > .ev-bouton, .ev-zone > .ev-lien { align-self: flex-start; }
.menu-num .lien.actif { color: var(--texte); background: var(--paper-ghost); }
.menu-num .lien.actif::before { content: ""; position: absolute; inset-inline-start: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--bleu); }

/* ---------- The retouch by touch or brush, before / after, the versions (25 October 2026):
   the same ink, the selection in blue light with a soft glow, no flash ---------- */
.sel-scene { position: relative; width: 100%; border-radius: var(--r-m); overflow: hidden; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: pointer; background: var(--paper-ghost); }
.sel-scene.pinceau { cursor: crosshair; }
.sel-image { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.sel-toile { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 0 6px rgba(77, 163, 255, .75)); }
.sel-outils, .sel-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sel-groupe { display: flex; flex-basis: 100%; gap: 8px; align-items: center; }
.atelier.atelier-sel { place-items: start center; }
.atelier-sel .atelier-panneau { -webkit-user-select: none; user-select: none; }
.atelier-sel .atelier-panneau input { -webkit-user-select: text; user-select: text; }
.sel-groupe[hidden] { display: none; }
.sel-bouton { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--paper-faint); background: transparent; color: inherit; font-size: 14px; font-weight: 600; }
.sel-bouton.actif { border-color: var(--bleu); background: rgba(77, 163, 255, .14); box-shadow: 0 0 0 3px rgba(77, 163, 255, .12); }
.sel-bouton:disabled { opacity: .4; }
.sel-bouton.lien { min-height: 0; padding: 2px 8px; border: none; color: var(--bleu); text-decoration: underline; }
.sel-taille { width: 120px; accent-color: var(--bleu); }
.sel-note { margin: 0; font-size: 14px; opacity: .8; }
.sel-fonds[hidden] { display: none; }
.sel-invite { position: absolute; inset: auto 12px 12px 12px; min-height: 44px; border-radius: 999px; background: rgba(11, 11, 12, .72); color: #f4f1ea;
  border: 1px solid rgba(77, 163, 255, .55); box-shadow: 0 0 18px rgba(77, 163, 255, .35); font-weight: 600; font-size: 14px; }
.barre-image button.actif { background: rgba(77, 163, 255, .2); }
.barre-image button[hidden] { display: none; }
.cadre-image.compare img.dessin { cursor: default; }
.cadre-image.compare .sel-invite { display: none; }
.comparateur { position: absolute; inset: 0; touch-action: none; cursor: ew-resize; -webkit-user-select: none; user-select: none; }
.compare-avant { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare-ligne { position: absolute; top: 0; bottom: 0; width: 2px; margin-inline-start: -1px; background: #f4f1ea; box-shadow: 0 0 10px rgba(77, 163, 255, .9); }
.compare-ligne::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: rgba(11, 11, 12, .6); border: 2px solid #f4f1ea; box-shadow: 0 0 12px rgba(77, 163, 255, .7); }
.compare-etiquette { position: absolute; top: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(11, 11, 12, .6); color: #f4f1ea; font-size: 12px; font-weight: 600; pointer-events: none; }
.compare-etiquette.gauche { left: 10px; }
.compare-etiquette.droite { right: 10px; }
.versions { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 2px; }
.version { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; background: none; color: inherit; font-size: 12px; opacity: .8; }
.version img { width: 64px; height: 48px; object-fit: cover; border-radius: var(--r-s); border: 1px solid var(--paper-faint); }
.version.actuelle { opacity: 1; }
.version.actuelle img { border-color: var(--bleu); box-shadow: 0 0 10px rgba(77, 163, 255, .45); }