:root {
  /* Les trois points du logo utılo, dans son ordre (COULEURS de tests/lib/logo-utilo.mjs ; tests/unit/boules-mascotte.test.mjs
     vérifie qu'ils sont les mêmes) : les boules de la mascotte et ses points « écrit… » (maquettes 77 et 78) */
  --logo-rouge: #ED7352; --logo-bleu: #4578DB; --logo-jaune: #F5C24D;
  /* Haut de l'écran à laisser libre : l'encoche du navigateur, ou la barre d'état quand l'appli Android fait passer la
     page dessous (--inset-top, maquettes 72d et 73b) */
  --sat: max(env(safe-area-inset-top, 0px), var(--inset-top, 0px));
  /* En-tête de la discussion posé par-dessus les messages (maquettes 73b puis 76b) : voile de la couleur du panneau
     (--hd-veil), flouté, qui s'arrête net sous « en ligne » sur un filet fin ; --hd-h (sa hauteur entière) est mesurée
     par la page */
  --hd-veil: 82%; --hd-blur: 18px;
  /* Téléphone : la discussion arrive en glissant depuis la droite (maquette 49), comme WhatsApp (maquette 86, mesurée
     image par image sur sa vidéo du 30 octobre) : durées à l'ouverture et au retour, courbe, recul de l'accueil
     dessous et voile qui l'assombrit */
  --slide-in: 440ms; --slide-out: 380ms; --slide-ease: cubic-bezier(.2, .7, .1, 1);
  --slide-back: -25%; --slide-dim: rgb(0 0 0 / 18%);
  /* Appli Android : la page ne passe sous la barre d'état et ne confie sa liste à Android qu'immobile, doigt levé et
     sans avoir défilé depuis ce temps (vidéo du 1er novembre, 16 h 08 : relais pendant l'élan, une image en arrière) */
  --handover-calm: 150ms;
  /* … et la liste d'Android attend que la page soit passée sous la barre d'état, ce temps au plus si Android ne répond pas
     (vidéo du 1er novembre, 18 h 08 : liste reprise 42,6 px trop haut) */
  --edge-wait: 300ms;
  /* Liste d'Android : élans enchaînés accélérés comme dans la page (règles du moteur de Chrome, « fling booster ») ; un
     nouveau coup de doigt dans le même sens ajoute la vitesse de départ de l'élan d'avant si cet élan filait encore et
     que le nouveau part assez vite (--fling-boost-min, px par seconde), le doigt glissé sans pause plus longue que
     --fling-boost-wait ni plus lent que --fling-boost-drag (px par seconde) */
  --fling-boost-min: 350px; --fling-boost-drag: 150px; --fling-boost-wait: 50ms;
  /* Ouverture d'une discussion : attente la plus longue d'une photo des derniers messages pas encore prête (elles
     sont préparées sur l'accueil, prepPhoto) */
  --photo-wait: 150ms;
  /* Place des coches dans une bulle : celle de « ✓✓ » (voir .ticks) */
  --tick-w: 1.25em;
  --rep-day: 34px; /* jours de la semaine d'un rendez-vous qui se répète (maquette 89b) */
  /* Carte « Aperçu en préparation… » : seulement pour un message plus récent que ça (voir linkCard) */
  --link-wait: 60s;
  /* (au retour dans l'appli, une discussion ouverte dans ce délai — notification touchée — s'affiche sans glisser) */
  --slide-settle: 1000ms;
  /* Carte « Aujourd'hui » (maquette 91, B2 et C) : appui long (menu), glisser (distance qui la retire, seuil avant
     de suivre le doigt), retour et départ de la carte, durée de la barre « Annuler » ; menu (largeur, écart avec la
     carte) ; barre (fond, texte, lien) */
  --today-hold: 450ms; --today-swipe: 96px; --today-swipe-slop: 10px; --today-back: 200ms; --today-out: 180ms;
  --today-undo-ms: 5000ms; --today-menu-w: 239px; --today-menu-gap: 8px;
  --today-bar: #222; --today-bar-fg: #fff; --today-bar-accent: #7FD8CB;
  /* Envoi d'une photo ou d'une vidéo (maquette 87, anneau A) : voile sur la photo ; anneau (taille, épaisseur, disque,
     piste, arc, ✕ ou ↻ dessinés dedans) ; écart et pastille des octets ; fini : effacement du voile, petite vibration */
  --up-veil: rgb(0 0 0 / 28%); --up-ring: 52px; --up-ring-w: 2.5px; --up-arc-r: 19px; --up-disk: rgb(0 0 0 / 45%);
  --up-track: rgb(255 255 255 / 30%); --up-arc: #fff; --up-x: 16px; --up-x-w: 2px; --up-fg: #fff; --up-gap: 8px;
  --up-pill: rgb(0 0 0 / 45%); --up-pill-pad: 3px 9px; --up-pill-fs: .78rem; --up-fade: 200ms; --up-buzz: 12ms;
  /* Maquette 81 (comme Telegram) : la barre de modification ou de réponse apparaît ou se ferme, le champ grandit en
     écrivant : le bas de la discussion et la liste d'Android glissent ensemble jusqu'à leur place (durée, courbe) */
  --glide: 160ms; --glide-ease: cubic-bezier(.33, 1, .68, 1);
  /* Hauteur du clavier du champ d'Android, laissée par la page (posée par Android 130 et plus ; 0 sinon) */
  --kb: 0px;
  /* Soulignement des liens des bulles (écart sous la ligne de base, épaisseur) : celui que le navigateur mettait de
     lui-même ; écrit ici pour qu'Android le dessine au même endroit */
  --link-ul: 1px;
  /* Plus grande image (miniature de citation, d'un envoi en cours) donnée à Android en image dans le dessin d'une bulle ;
     au-delà (photo, vidéo, carte de lien), Android garde sa bulle */
  --nl-raster-max: 128px;
  /* Message cité touché : anneau de la couleur de l'appli qui clignote autour de sa bulle (épaisseur, durée d'un
     clignement, nombre, courbe) ; la liste d'Android fait le même avec ces valeurs */
  --flash-ring: 4px; --flash-time: 1.6s; --flash-count: 2; --flash-ease: cubic-bezier(.25, .1, .25, 1);
  /* Maquette 94f (2 novembre) : animations du thème Classique. Durées, courbes et distances ici seulement ; le
     JavaScript les lit (cssMs, cssPx, cssVar). « Réduire les animations » du téléphone : aucune ne joue */
  --anim-ease: cubic-bezier(.2, .8, .2, 1); --anim-rebond: cubic-bezier(.2, 1.5, .4, 1);
  --anim-onglet: 180ms; --anim-onglet-dx: 16px;
  --anim-fab: 160ms; --anim-fab-tour: -90deg; --anim-fab-from: .6;
  --anim-coche: 420ms; --anim-coche-vol: 320ms; --anim-vol-scale: .8; --anim-vol-fin: .2;
  --anim-mois: 240ms; --anim-mois-dx: 28%;
  --anim-appui: 90ms; --anim-appui-scale: .98;
  --anim-bulle: 160ms; --anim-bulle-dy: 8px;
  --anim-pastille: 220ms; --anim-pastille-from: .6;
  --anim-ecran: 280ms; --anim-feuille: 260ms; --feuille-ferme: 60px;
  /* (l'accueil sous les Réglages ou « Mon profil » qui arrivent : il recule de --anim-recul-dx et s'assombrit à
     --anim-recul-lum ; demande du 2 novembre, « 1 et 2, sans maquette ») */
  --anim-recul-dx: -24%; --anim-recul-lum: .82;
  --bg: #f4f1ea;
  --panel: #ffffff;
  --text: #1d2a2f;
  --muted: #6b7b80;
  --line: #e4ded3;
  --accent: #2a9d8f;
  --accent-text: #ffffff;
  --mine: #d8f3ec;
  --theirs: #ffffff;
  --danger: #d62839;
  --ok: #2bb673;
  --radius: 18px;
  /* Écran d'appel : clair en mode jour, sombre en mode sombre */
  --call-bg: radial-gradient(circle at 50% 35%, #ffffff 0%, #eef1f3 70%);
  --call-fg: #111b21;
  --call-panel: #ffffff;
  --call-panel-shadow: 0 -2px 20px rgba(0,0,0,.08);
  --call-btn: #e9edef;
  --call-btn-on: #111b21;
  --call-btn-on-fg: #ffffff;
  --call-pulse: rgba(17,27,33,.18);
}
/* Mode sombre : automatique (réglage du téléphone), ou choisi dans les Réglages (data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11181b;
    --panel: #1a2428;
    --text: #e8eef0;
    --muted: #8fa1a6;
    --line: #2a373c;
    --mine: #1f4a44;
    --theirs: #223035;
    --call-bg: radial-gradient(circle at 50% 35%, #16252c 0%, #0b141a 70%);
    --call-fg: #ffffff;
    --call-panel: rgba(28, 38, 43, .92);
    --call-panel-shadow: 0 -2px 20px rgba(0,0,0,.35);
    --call-btn: rgba(255,255,255,.1);
    --call-btn-on: #ffffff;
    --call-btn-on-fg: #0b141a;
    --call-pulse: rgba(255,255,255,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #11181b;
    --panel: #1a2428;
    --text: #e8eef0;
    --muted: #8fa1a6;
    --line: #2a373c;
    --mine: #1f4a44;
    --theirs: #223035;
    --call-bg: radial-gradient(circle at 50% 35%, #16252c 0%, #0b141a 70%);
    --call-fg: #ffffff;
    --call-panel: rgba(28, 38, 43, .92);
    --call-panel-shadow: 0 -2px 20px rgba(0,0,0,.35);
    --call-btn: rgba(255,255,255,.1);
    --call-btn-on: #ffffff;
    --call-btn-on-fg: #0b141a;
    --call-pulse: rgba(255,255,255,.25);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
/* Pas de barre de défilement nulle part (demandé le 17 octobre) : on fait défiler au doigt ou à la molette, comme
   avant ; seule la barre dessinée disparaît (Chrome / WebView Android : ::-webkit-scrollbar ; Firefox : scrollbar-width) */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  /* Comme une vraie appli : pas de sélection de texte ni de menu sur appui long */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* …sauf là où on écrit, et sur les photos/vidéos (pour pouvoir les enregistrer) */
input, textarea, select { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.bubble img, .bubble video { -webkit-touch-callout: default; }
button, .icon-btn, .round { touch-action: manipulation; }
#mic-btn { touch-action: none; }
.hidden { display: none !important; }
/* Fonction « amis » cachée pour l'instant (réactivable côté serveur) */
.no-friends .friends-only { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.error { color: var(--danger); min-height: 1em; margin: 4px 0; font-size: .9rem; }
.error.pending { color: var(--muted, #777); }
.captcha-box { display: flex; justify-content: center; margin: 6px 0; }
.captcha-box:empty { display: none; }

input, textarea, select {
  font: inherit;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  width: 100%;
}
textarea { resize: none; max-height: 120px; }

.btn {
  font: inherit;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  background: var(--line);
  color: var(--text);
  cursor: pointer;
}
.btn.primary { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn.danger { color: var(--danger); }
.btn.small { padding: 4px 12px; font-size: .85rem; }
.btn.full { width: calc(100% - 24px); margin: 12px; }
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.3rem;
  cursor: pointer;
  color: inherit;
}
@media (hover: hover) { .icon-btn:hover { background: var(--line); } }
.icon-btn.send { background: var(--accent); color: var(--accent-text); }

.avatar {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  position: relative;
}
.avatar.big { width: 96px; height: 96px; font-size: 2.4rem; }
.avatar.online::after {
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ok);
  border: 2px solid var(--panel);
}

/* ---------- Connexion ---------- */
.auth-screen { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.card {
  width: min(400px, 100%);
  background: var(--panel);
  border-radius: 24px;
  padding: 28px 24px;
  display: grid;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.card h1 { margin: 0; text-align: center; }
/* Nom de l'appli à la connexion (maquette « 58d ») : icône, logo « utilo », « Famille » dessous */
#login-logo .logo-img { width: 56px; height: 56px; border-radius: 15px; }
#login-title { display: grid; justify-items: center; gap: 6px; margin-bottom: 8px; color: var(--text); line-height: 1; }
#login-title .wordmark { display: block; width: 96px; height: 48px; }
#login-title .wordmark-sub { color: var(--accent); font-size: 1.125rem; font-weight: 700; }
#login-title.friend .wordmark { display: none; }
#login-title.friend .wordmark-sub { color: inherit; font-size: inherit; font-weight: inherit; }
.card label { display: grid; gap: 4px; font-size: .9rem; color: var(--muted); }
.logo { font-size: 3rem; text-align: center; }
.invite-note { background: var(--mine); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; font-size: .95rem; line-height: 1.35; }
.logo-img { width: 76px; height: 76px; border-radius: 20px; display: inline-block; vertical-align: middle; }

/* ---------- Mise en page ---------- */
#app { display: flex; height: calc(100vh - var(--kb)); height: calc(100dvh - var(--kb)); }
#sidebar {
  width: 340px;
  flex: none;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
/* Page sous la barre d'état (--sat : iPhone, ou Android pendant la glissade de retour d'une discussion, maquette 73b) :
   c'est l'en-tête de l'accueil qui passe dessous, son fond jusqu'en haut, comme celui d'une discussion. Avant (vidéo du
   31 octobre), #sidebar ajoutait aussi cette hauteur : l'accueil glissait une barre d'état trop bas puis remontait d'un
   coup (tests/e2e/bord-haut.js). Jamais écrasé par la liste en dessous (téléphone en paysage : il perdait 10 px, son
   bouton ⋮ dépassait, et sous la barre d'état son contenu ne descendait que de la moitié de sa hauteur) */
#sidebar > .bar { padding-top: calc(10px + var(--sat)); flex: none; }
.me { display: flex; align-items: center; gap: 10px; flex: 1; }
.banner {
  margin: 10px 12px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff4d6;
  color: #5c4800;
  font-size: .9rem;
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
}
.banner.install { background: #dff3ef; color: #134e46; }
.banner .small-x { width: 28px; height: 28px; font-size: .9rem; color: inherit; }
.share-icon { display: inline-block; vertical-align: -3px; width: 18px; height: 18px; }
#conv-list { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; flex: 1; }
#conv-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
}
#conv-list li.active { background: var(--bg); }
/* Survol : seulement avec une souris. Sur un écran tactile, la ligne touchée restait grisée après avoir levé le doigt */
@media (hover: hover) { #conv-list li:hover { background: var(--bg); } }
.conv-text { flex: 1; min-width: 0; }
.conv-text strong { display: block; }
.conv-text small { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge {
  background: var(--accent); color: var(--accent-text);
  border-radius: 999px; min-width: 22px; padding: 2px 7px;
  font-size: .8rem; text-align: center; font-weight: 700;
}

#chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#chat .placeholder { display: none; }
/* (« leaving » : discussion fermée qui repart en glissant, maquette 86 ; elle garde ce qu'elle montrait jusqu'à la fin) */
#chat.empty:not(.leaving) > * { display: none; }
#chat.empty:not(.leaving) .placeholder { display: grid; place-items: center; flex: 1; color: var(--muted); font-size: 1.1rem; }
.chat-header { padding-top: calc(10px + var(--sat)); }
/* Maquette « 73b » (27 octobre, comme Telegram) : en Classique, l'en-tête est posé par-dessus les messages, qui passent
   dessous et sous la barre d'état (appli Android : setEdgeTop). Maquette « 76b » (27 octobre : le fondu prenait de la
   place) : voile de la couleur du panneau (--hd-veil), flouté, qui s'arrête net sous « en ligne » sur un filet fin.
   #messages commence sous lui (--hd-h, mesurée par la page) ; une bannière d'activité prend sa place dessous */
:root[data-skin="classique"] #chat { position: relative; }
:root[data-skin="classique"] #chat > :is(header.chat-header, #chat.picking > #pick-bar):not(#activity .bar) {
  position: absolute; left: 0; right: 0; top: 0; z-index: 4; --hd-bg: var(--panel); border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--hd-bg) var(--hd-veil), transparent);
  -webkit-backdrop-filter: blur(var(--hd-blur)); backdrop-filter: blur(var(--hd-blur));
}
:root[data-skin="classique"] #messages { padding-top: calc(var(--hd-h, 0px) + 12px); }
:root[data-skin="classique"] #activity-banner:not(.hidden) { margin-top: var(--hd-h, 0px); }
:root[data-skin="classique"] #chat:has(#activity-banner:not(.hidden)) #messages { padding-top: 12px; }
.chat-title { flex: 1; min-width: 0; display: grid; }
.chat-title small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Téléphone étroit ou texte agrandi (réglage Android) : la manette passe dans le menu ⋮, les boutons se resserrent */
.chat-header.tight { gap: 4px; padding-left: 6px; padding-right: 6px; }
.chat-header.tight .icon-btn { width: 36px; }
.chat-header.compact #games-btn { display: none; }
#back-btn { display: none; }

#messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 4px;
  display: flex; flex-direction: column; gap: 4px;
}
.day { align-self: center; font-size: .78rem; color: var(--muted); margin: 10px 0 4px; }
.msg { max-width: min(78%, 480px); display: flex; flex-direction: column; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg.theirs { align-self: flex-start; }
.msg .author { font-size: .78rem; font-weight: 600; margin: 6px 10px 2px; }
.bubble {
  background: var(--theirs);
  padding: 8px 12px;
  border-radius: var(--radius);
  /* (« anywhere » et pas « break-word » : un mot plus long que la bulle est coupé au lieu d'élargir la bulle hors de
     l'écran, vu le 28 octobre avec un mot de 75 lettres) */
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.msg.mine .bubble { background: var(--mine); }
.bubble.media { padding: 4px; }
.bubble img, .bubble video {
  display: block;
  max-width: 100%;
  max-height: 340px;
  border-radius: 14px;
  background: #000;
}
.bubble img { cursor: zoom-in; }
.bubble audio { display: block; width: 240px; max-width: 100%; }
.bubble .caption { padding: 6px 8px 2px; }
/* Photo / vidéo avec une légende (maquette « 93A », 2 novembre, comme WhatsApp) : l'heure est dans la légende, au bout
   de sa dernière ligne quand elle y tient (sinon dessous, la légende la contient : flow-root) ; moins de bord */
.bubble.media > .caption { padding: 4px 6px 0; display: flow-root; }
/* Photo / vidéo avec un texte : la bulle fait la largeur de la photo, le texte passe à la ligne en dessous (comme
   WhatsApp ; maquette Figma « 27 »). Le texte ne compte pas dans la largeur de la bulle, il prend celle de la photo.
   Photo très étroite (petit GIF…) : une largeur minimale garde le texte lisible. */
.bubble.media:has(> .caption) { min-width: 200px; }
.bubble.media > .caption { width: 0; min-width: 100%; box-sizing: border-box; }
.bubble a.link { color: inherit; text-decoration: underline; text-underline-offset: var(--link-ul); text-decoration-thickness: var(--link-ul); word-break: break-all; -webkit-touch-callout: default; }
.bubble.voice { padding: 8px 10px; min-width: 220px; }
.voice-player { display: flex; align-items: center; gap: 10px; }
.voice-btn {
  width: 38px; height: 38px; flex: none;
  border: 0; border-radius: 50%;
  background: var(--accent); color: var(--accent-text);
  font-size: 1rem; cursor: pointer;
}
.voice-track { flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; cursor: pointer; min-width: 90px; }
.voice-fill { height: 100%; width: 0; background: var(--accent); }
.voice-time { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.voice-status { font-size: .78rem; color: var(--danger); margin-top: 6px; white-space: normal; }
.meta { font-size: .7rem; color: var(--muted); margin: 2px 8px 0; }
/* Heure et ✓✓ dans la bulle, à droite de la dernière ligne (elles passent à la ligne s'il manque de place) */
.bubble { position: relative; }
:is(.bubble, .bubble.media > .caption) > .meta { float: right; margin: 8px -2px -4px 12px; line-height: 1; white-space: nowrap; user-select: none; }
.bubble > .meta.over { position: absolute; right: 10px; bottom: 8px; margin: 0; float: none; color: #fff; background: rgba(0,0,0,.4); padding: 3px 7px; border-radius: 10px; }
.bubble > .meta.over .ticks:not(.read) { color: #fff; }
.bubble.media > .meta:not(.over) { margin-right: 6px; margin-bottom: 2px; }
.bubble.media > .caption > .meta { margin: 8px 0 0 12px; position: relative; top: 2px; }
.msg.system { align-self: center; max-width: 90%; }
.msg.system .bubble { background: transparent; box-shadow: none; color: var(--muted); font-size: .88rem; text-align: center; }
.progress { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 6px; width: 160px; }
.progress > div { height: 100%; background: var(--accent); width: 0; transition: width .2s; }
/* Envoi en attente du réseau : bulle atténuée, bouton « Annuler » */
.pending-upload .up-label { display: block; }
.pending-upload.up-waiting .bubble { opacity: .85; }
.up-cancel { display: block; margin-top: 8px; padding: 4px 12px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font: inherit; font-size: .85rem; cursor: pointer; }
/* Envoi d'une photo ou d'une vidéo (maquette 87, anneau A, comme WhatsApp ; réglages --up-… en haut) : la bulle est
   celle du message à venir, photo comprise, à sa taille finale ; par-dessus, le voile, l'anneau (une image dessinée par
   la page, upRingSrc) qu'on touche pour annuler, et les octets envoyés dans une pastille. La place du voile est celle de
   la photo (posée par la page, placeUpOver) */
.up-over { position: absolute; display: grid; place-content: center; justify-items: center; gap: var(--up-gap); background: var(--up-veil); pointer-events: none; }
.up-over > * { pointer-events: auto; }
.up-x { display: block; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; }
/* (pas l'habillage des photos de bulle, « .bubble img » : ni fond noir ni coins) */
.bubble .up-ring { display: block; width: var(--up-ring); height: var(--up-ring); max-height: none; border-radius: 0; background: none; cursor: pointer; }
.up-bytes { display: block; padding: var(--up-pill-pad); border: 0; border-radius: 999px; background: var(--up-pill); color: var(--up-fg); font: inherit; font-size: var(--up-pill-fs); font-weight: 600; line-height: 1.3; white-space: nowrap; }
button.up-bytes { cursor: pointer; }
.pending-upload.up-done .up-bytes { visibility: hidden; }
#typing { font-size: .8rem; color: var(--muted); padding: 0 16px; min-height: 1.2em; }

.composer {
  display: flex; align-items: flex-end; gap: 6px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.rec-info { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px; font-variant-numeric: tabular-nums; }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* ---------- Appels ---------- */
.overlay {
  position: fixed; inset: 0;
  z-index: 50;
  background: rgba(10, 16, 18, .96);
  color: #fff;
}
#incoming { display: grid; place-items: center; }
.incoming-card { text-align: center; }
.incoming-card h2 { margin: 16px 0 4px; }
.incoming-card .avatar.big { animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 var(--call-pulse); } 50% { box-shadow: 0 0 0 22px rgba(255,255,255,0); } }
.call-actions { display: flex; gap: 60px; justify-content: center; margin-top: 40px; }
.round {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 0;
  font-size: 1.6rem;
  background: rgba(255,255,255,.15);
  color: #fff;
  cursor: pointer;
}
.round.red { background: var(--danger); }
.round.green { background: var(--ok); }
.round.off { background: #fff; color: #000; }

/* Écrans d'appel d'Android (appel entrant ; appel en cours, vocal et vidéo, maquettes 25, 34, 35a, 50) : leurs tailles,
   couleurs et durées, écrites ici seulement (28 octobre ; avant, dans le Kotlin). Ils marchent sans la page (téléphone
   verrouillé) : tests/lib/appel-ressources.mjs en fabrique le fichier d'Android (res/values/appel.xml : px → dp, rem → sp,
   #rrggbbaa → #aarrggbb, ms → nombre), tests/unit/appel-ressources.test.mjs vérifie qu'il est à jour. Celles qui valent
   aussi pour l'écran d'appel de la page (navigateur) servent aux deux ; les autres sont propres à Android. */
:root {
  /* Couleurs (écran clair, écran sombre : la nuit et en vidéo) */
  --appel-fond: #f3f5f7;            --appel-fond-sombre: #0f1418;
  --appel-carte: #ffffff;           --appel-carte-sombre: #1b2228;
  --appel-texte: #11181f;           --appel-texte-sombre: #f1f3f5;
  --appel-texte2: #4f5a63;          --appel-texte2-sombre: #a9b4bd;
  --appel-bouton-fond: #e9ecef;     --appel-bouton-fond-sombre: #2a333b;
  --appel-actif: #2a9d8f;           /* bouton enclenché, « Passer en vidéo », personne sans couleur */
  --appel-rouge: #e5173f;           /* « Terminer » */
  --appel-sur-couleur: #ffffff;     /* texte et icône sur une couleur */
  --appel-reduire-video: #ffffff22;
  --appel-image: var(--appel-carte-sombre);
  --appel-image-bord: #ffffff33;
  --appel-camera-coupee: #ffffffcc;
  --appel-attente: #ffffff55;
  --appel-etiquette-fond: #000000aa;
  --appel-voile: #00000099;
  /* En haut : « réduire », le nom et l'état */
  --appel-marge: 14px;              --appel-marge-haut: 10px;          --appel-marge-bas: 18px;
  --appel-reduire: 56px;            --appel-reduire-ico: 26px;
  --appel-titre-cote: 64px;         --appel-titre-haut: 6px;
  --appel-nom: 1.5rem;              --appel-etat: .9375rem;
  /* Les personnes (photo ou initiale) */
  --appel-personne-marge: 10px;     --appel-photo: 200px;              --appel-photo-groupe: 120px;
  --appel-photo-video-groupe: 96px; --appel-photo-petite-fenetre: 64px;
  --appel-initiale: .45;            /* taille de l'initiale, par rapport à la photo */
  --appel-nom-groupe: .9375rem;     --appel-nom-groupe-haut: 10px;     --appel-nom-groupe-l: 170px;
  --appel-colonne-etiquette: 6px;   /* « Caméra coupée » sous la photo */
  /* Vidéo : les images, la mienne en petit (« Moi »), le voile en haut, les étiquettes */
  --appel-ecart-images: 10px;       --appel-image-arrondi: 16px;       --appel-scene-marge: 12px;
  --appel-attente-ico: 40px;        --appel-image-etiquette-marge: 10px;
  --appel-moi-l: 104px;             --appel-moi-h: 148px;              --appel-moi-haut: 120px;
  --appel-moi-droite: 16px;         --appel-moi-arrondi: 14px;         --appel-moi-bord: 1px;
  --appel-moi-sous-titre: 8px;      --appel-moi-bord-droit: 2px;       --appel-deplacer-marge: 8px;
  --appel-camera-coupee-ico: 30px;  --appel-etiquette-marge: 8px;
  --appel-voile-h: 170px;           --appel-voile-sous-titre: 40px;
  --appel-etiquette: .8125rem;      --appel-etiquette-x: 10px;         --appel-etiquette-y: 5px;
  --appel-etiquette-arrondi: 14px;
  /* En bas : les boutons */
  --appel-panneau-arrondi: 32px;    --appel-panneau-cote: 8px;         --appel-panneau-haut: 22px;
  --appel-panneau-bas: 18px;        --appel-panneau-ligne: 18px;
  --appel-bouton: 72px;             --appel-bouton-ico: 30px;
  --appel-legende: .875rem;         --appel-legende-vocal: .8125rem;   --appel-legende-l: 110px;
  --appel-legende-cote: 2px;        --appel-legende-haut: 10px;
  /* Passer en vidéo (maquette 50) : l'invitation et le petit message */
  --appel-invitation-marge: 10px;   --appel-invitation-arrondi: 18px;  --appel-invitation-p: 16px;
  --appel-invitation-bas: 14px;     --appel-invitation-titre: 1.0625rem;
  --appel-invitation-texte: .875rem; --appel-invitation-texte-haut: 6px; --appel-invitation-texte-bas: 12px;
  --appel-pilule: .9375rem;         --appel-pilule-h: 44px;            --appel-pilule-ecart: 10px;
  --appel-pilule-arrondi: 999px;
  --appel-message: .9375rem;        --appel-message-x: 18px;           --appel-message-y: 11px;
  /* Appel terminé par l'autre : l'écran reste un instant */
  --appel-fin: 900ms;
  /* « Laura t'appelle » (écran qui s'allume, même téléphone verrouillé) */
  --appel-entrant-fond: #1d3b36;    --appel-entrant-type-couleur: #b7d6d0;
  --appel-refuser: #e63946;         --appel-repondre: var(--appel-actif);
  --appel-entrant-cote: 24px;       --appel-entrant-haut: 96px;        --appel-entrant-bas: 64px;
  --appel-entrant-photo: 132px;     --appel-entrant-emoji: 4rem;
  --appel-entrant-nom: 2.125rem;    --appel-entrant-nom-haut: 24px;    --appel-entrant-nom-bas: 8px;
  --appel-entrant-type: 1.25rem;
  --appel-entrant-bouton: 112px;    --appel-entrant-ecart: 48px;       --appel-entrant-bouton-texte: 1.125rem;
}

/* Écran d'appel (façon WhatsApp) : nom en haut, grande photo, panneau de boutons légendés en bas */
#call, #incoming { background: var(--call-bg); color: var(--call-fg); }
#call { display: flex; flex-direction: column; }
.call-top { position: relative; display: flex; justify-content: center; padding: calc(14px + var(--sat)) 70px 4px; min-height: 64px; }
.call-head { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
#call-name { font-size: 1.45rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#call-status { font-size: .95rem; opacity: .75; margin-top: 2px; }
.call-round-top { position: absolute; left: var(--appel-marge); top: calc(var(--appel-marge-haut) + var(--sat)); width: var(--appel-reduire); height: var(--appel-reduire); border-radius: 50%; border: 0; background: var(--call-btn); color: var(--call-fg); display: grid; place-items: center; cursor: pointer; }
.call-round-top svg { width: var(--appel-reduire-ico); height: var(--appel-reduire-ico); }
#call svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#call svg .fill { fill: currentColor; stroke: none; }
#call svg .slash { display: none; }
.call-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--appel-panneau-ligne) 8px; margin: 8px 16px calc(14px + env(safe-area-inset-bottom)); padding: var(--appel-panneau-haut) 10px var(--appel-panneau-bas); border-radius: 30px; background: var(--call-panel); box-shadow: var(--call-panel-shadow); }
.call-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .95rem; text-align: center; }
.call-btn.hidden { display: none; }
.call-btn .round { width: var(--appel-bouton); height: var(--appel-bouton); display: grid; place-items: center; background: var(--call-btn); color: var(--call-fg); }
.call-btn .round svg { width: var(--appel-bouton-ico); height: var(--appel-bouton-ico); }
.call-btn .round.on { background: var(--call-btn-on); color: var(--call-btn-on-fg); }
.call-btn .round.off .slash { display: inline; }
.call-btn .round.off { background: var(--call-btn-on); color: var(--call-btn-on-fg); }
.call-btn.call-end { grid-column: 3; }
.call-btn .round.red { background: var(--appel-rouge); color: var(--appel-sur-couleur); }
.call-btn .round.red svg { width: 34px; height: 34px; }
#call-reconnect { align-self: center; margin: 4px 10px; padding: 6px 14px; border-radius: 999px; background: rgba(233, 196, 106, .9); color: #1d1d1d; font-size: .9rem; font-weight: 600; }
#videos {
  flex: 1;
  display: grid;
  gap: 8px;
  padding: 8px;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  min-height: 0;
}
#videos.n2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { #videos.n2 { grid-template-columns: 1fr; } }
.tile {
  position: relative;
  background: #1c272b;
  border-radius: var(--appel-image-arrondi);
  overflow: hidden;
  display: grid; place-items: center;
  min-height: 0;
}
.tile video { width: 100%; height: 100%; object-fit: cover; }
.tile .avatar { position: absolute; width: 110px; height: 110px; font-size: 2.6rem; }
/* Appel vocal à deux : la photo de l'autre, en grand au milieu (le nom est en haut) */
.tile:not(.has-video) { background: transparent; }
#videos:not(.n2) .tile:not(.has-video) .avatar { width: min(52vw, 240px); height: min(52vw, 240px); font-size: 5rem; }
#videos:not(.n2) .tile:not(.has-video) .label { display: none; }
#call .tile .avatar.online::after { display: none; }
#call-waiting .avatar { width: min(52vw, 240px); height: min(52vw, 240px); font-size: 5rem; animation: callpulse 1.6s infinite; }
@keyframes callpulse { 0%,100% { box-shadow: 0 0 0 0 var(--call-pulse); } 50% { box-shadow: 0 0 0 26px rgba(255,255,255,0); } }
.tile.has-video .avatar { display: none; }
/* Appel vocal : le lecteur (qui joue le son) reste invisible */
.tile:not(.has-video) video { opacity: 0; }
.tile .label { position: absolute; left: 10px; bottom: 8px; font-size: .85rem; color: #fff; background: rgba(0,0,0,.45); padding: 2px 8px; border-radius: 8px; }
#local-video {
  position: absolute;
  right: 14px; top: calc(86px + var(--sat));
  width: 110px; height: 150px;
  object-fit: cover;
  border-radius: var(--appel-moi-arrondi);
  background: #000;
  transform: scaleX(-1);
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
#local-video.rear { transform: none; }
/* Maquette « 50 » : passer en vidéo pendant un appel vocal = une invitation (bandeau au-dessus des boutons) */
#video-ask { margin: 0 16px 6px; padding: var(--appel-invitation-p) var(--appel-invitation-p) var(--appel-invitation-bas); border-radius: var(--appel-invitation-arrondi); background: var(--call-panel); box-shadow: var(--call-panel-shadow); }
#video-ask strong { display: block; font-size: 1.05rem; }
#video-ask p { margin: var(--appel-invitation-texte-haut) 0 var(--appel-invitation-texte-bas); font-size: .9rem; opacity: .8; }
.video-ask-btns { display: flex; gap: var(--appel-pilule-ecart); }
.video-ask-btns button { flex: 1; min-height: var(--appel-pilule-h); border: 0; border-radius: var(--appel-pilule-arrondi); background: var(--call-btn); color: var(--call-fg); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
.video-ask-btns button.yes { background: var(--appel-actif); color: var(--appel-sur-couleur); }
#call-notice { align-self: center; margin: 0 16px 8px; padding: 10px var(--appel-message-x); border-radius: var(--appel-pilule-arrondi); background: var(--call-panel); box-shadow: var(--call-panel-shadow); font-size: .95rem; font-weight: 600; text-align: center; }
/* Application Android : petite fenêtre flottante pendant un appel vidéo (Picture-in-picture) :
   seulement l'image de l'autre (et la sienne en petit), même si l'appel était réduit */
body.pip #call { display: flex !important; position: fixed; inset: 0; z-index: 9999; }
body.pip .call-top, body.pip .call-panel, body.pip #call-reconnect, body.pip .tile .label, body.pip #video-ask, body.pip #call-notice { display: none; }
body.pip #videos { padding: 0; gap: 2px; }
body.pip .tile { border-radius: 0; }
body.pip #videos:not(.n2) .tile:not(.has-video) .avatar { width: 45vmin; height: 45vmin; font-size: 18vmin; }
body.pip #local-video { top: auto; bottom: 6px; right: 6px; width: 28vw; height: 38vw; border-radius: 6px; }

#viewer { display: grid; place-items: center; cursor: zoom-out; --sab: max(env(safe-area-inset-bottom, 0px), var(--inset-bottom, 0px)); }
#viewer { grid-template-rows: 1fr auto; }
#viewer img { max-width: 100%; max-height: 100%; align-self: center; justify-self: center; }
#viewer img.profile { width: min(80vw, 420px); height: min(80vw, 420px); max-height: 70vh; object-fit: cover; border-radius: 50%; }
#viewer video { max-width: 100%; max-height: 100%; align-self: center; justify-self: center; background: #000; }
/* (1fr seul laissait la vidéo dépasser la hauteur de l'écran en paysage : on n'en voyait qu'une partie — vu le 19 octobre) */
#viewer:not(.gallery) { grid-template-rows: minmax(0, 1fr) auto; }
#viewer:not(.gallery) > video { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
/* Barre du haut de la galerie, comme Telegram (maquette « 48 ») : ← à gauche ; à droite ✏️, ↪ et ⋮ (menu) */
#viewer-close { position: absolute; top: calc(8px + var(--sat)); left: 6px; z-index: 3; color: #fff; background: rgba(0,0,0,.35); border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center; }
#viewer.gallery #viewer-close { background: none; }
#viewer-close svg, #viewer-tools svg { width: 24px; height: 24px; }
#viewer-tools { position: absolute; top: calc(8px + var(--sat)); right: 4px; z-index: 3; display: flex; }
#viewer:not(.gallery) #viewer-tools { display: none; }
#viewer-tools .icon-btn { width: 44px; height: 44px; color: #fff; background: none; display: grid; place-items: center; }
#viewer-tools .icon-btn.hidden { display: none; }
#viewer.gallery::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(84px + var(--sat)); z-index: 1; pointer-events: none; background: linear-gradient(rgba(0,0,0,.92) 60%, rgba(0,0,0,0)); transition: opacity .2s; }
#viewer.gallery.chrome-off::before { opacity: 0; }
#viewer-menu { position: absolute; top: calc(54px + var(--sat)); right: 8px; z-index: 4; min-width: 250px; max-width: calc(100vw - 16px); padding: 6px 0; border-radius: 14px; background: #2a2f31; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
#viewer-menu button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 20px 11px 16px; border: 0; background: none; color: inherit; font: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
#viewer-menu button:active { background: rgba(255,255,255,.08); }
#viewer-menu button svg { width: 22px; height: 22px; flex: none; }
#viewer-menu button.danger { color: #ff6b6b; }
/* Vidéo dans une conversation : vignette, gros ▶ et durée (comme WhatsApp) */
.video-thumb { position: relative; display: block; cursor: pointer; background: #000; border-radius: 14px; overflow: hidden; min-width: 160px; min-height: 120px; }
.video-thumb { max-width: 100%; }
.video-thumb video, .video-thumb .video-shot { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; pointer-events: none; border-radius: 0; }
.video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; }
.video-play svg { width: 30px; height: 30px; fill: #fff; margin-left: 3px; }
.video-dur { position: absolute; left: 8px; bottom: 6px; color: #fff; font-size: .8rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.video-dur:empty { display: none; }
.video-mute { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.5); display: grid; opacity: 0; place-items: center; z-index: 2; pointer-events: none; }
.video-mute svg { width: 17px; height: 17px; fill: #fff; }
/* Vidéo qui joue toute seule, sans le son (maquette « 47 ») : par-dessus l'image, la durée et 🔇 restent visibles */
/* (27 octobre : ▶ et 🔇 changent en fondu, quand l'image de la vidéo bouge vraiment ; avant, ▶ disparaissait d'un coup
   un quart de seconde avant) */
:root { --video-fade: .2s; }
.video-play, .video-mute, .video-thumb .auto-video { transition: opacity var(--video-fade); }
.video-thumb .auto-video { position: absolute; inset: 0; opacity: 0; }
.video-thumb.auto-live .auto-video { opacity: 1; }
.video-thumb.auto-live .video-play { opacity: 0; }
.video-thumb.auto-live .video-mute { opacity: 1; }
.video-thumb .video-dur { z-index: 2; }
/* Liste des discussions : miniature de la photo ou de la vidéo, de la taille de l'icône */
.conv-thumb { position: relative; display: inline-block; width: 1.3em; height: 1.3em; margin-right: 5px; vertical-align: -.3em; border-radius: 4px; overflow: hidden; background: var(--line); flex: none; }
.conv-thumb img, .conv-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.conv-thumb.broken img, .conv-thumb.broken video { visibility: hidden; }
.conv-thumb-play { position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); width: 0; height: 0; border-style: solid; border-width: .22em 0 .22em .36em; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 0 1px rgba(0,0,0,.9)); }
#viewer-caption { color: #fff; font-size: 1.3rem; font-weight: 700; text-align: center; padding: 12px 12px calc(24px + env(safe-area-inset-bottom)); }
#viewer-caption:empty { display: none; }
/* Galerie des photos d'une conversation (balayer, double appui pour zoomer) */
#viewer-head { display: none; }
#viewer.gallery { cursor: default; touch-action: none; overflow: hidden; }
/* Bande de 3 photos (précédente, actuelle, suivante) qui suit le doigt */
.gstrip { display: none; }
#viewer.gallery > img { display: none; }
#viewer.gallery .gstrip {
  display: flex; position: absolute; top: 0; left: 0; height: 100%; width: 300vw; will-change: transform;
}
.gslide { width: 100vw; height: 100%; flex: 0 0 100vw; display: grid; place-items: center; overflow: hidden; }
/* (#viewer .gslide : plus fort que « #viewer img { max-height: 100% } », qui ne limitait rien dans la grille : en paysage la
   photo débordait et on n'en voyait que le haut — vu le 18 octobre) */
#viewer .gslide img { max-width: 100%; max-height: 100dvh; object-fit: contain; will-change: transform; user-select: none; -webkit-user-drag: none; }
.gslide img:not([src]) { display: none; }
/* Vidéo dans la galerie : sa vignette avec ▶ ; au milieu, le lecteur par-dessus (même taille que les photos) */
.gslide { position: relative; }
.gslide.gvideo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center / 34px no-repeat; pointer-events: none; }
.gslide.gvideo:has(video.gplayer)::after, .gslide.gvideo:has(video.gplayer) > img { display: none; }
#viewer .gslide video.gplayer { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: calc(100dvh - 120px); width: auto; height: auto; background: #000; }
/* Plein écran paysage (maquette « 53 ») : la vidéo prend toute la hauteur, fond noir */
#viewer.gallery.vfull { background: #000; }
#viewer.gallery.vfull .gslide img { max-height: 100dvh; }
#viewer.gallery.vfull .gslide video.gplayer, #viewer.gallery.chrome-off .gslide video.gplayer { width: 100%; height: 100dvh; max-height: none; object-fit: contain; } /* (sinon le lecteur garde sa taille d'origine, petite) */
/* Un appui sur la vidéo (27 octobre) : tout disparaît, la vidéo prend tout l'écran sur fond noir */
#viewer.gallery.chrome-off:has(video.gplayer) { background: #000; }
#viewer.gallery #viewer-head {
  display: block; position: absolute; top: calc(12px + var(--sat)); left: 56px; right: 140px; z-index: 2;
  color: #fff; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
#viewer-head strong { display: block; font-size: 1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
#viewer-head small { display: block; font-size: .8rem; font-weight: 500; opacity: .75; overflow: hidden; text-overflow: ellipsis; }
/* Légende d'une photo ouverte en grand : en bas, sur un fond sombre dégradé, lisible sur n'importe quelle photo (comme
   WhatsApp ; maquette Figma « 29 »). Avant, seule dans la grille (la photo est posée à part), elle se plaçait au milieu
   de l'écran, en blanc sans fond. Longue : un tiers de l'écran au plus, puis elle défile. */
#viewer.gallery #viewer-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; box-sizing: border-box;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.4; text-align: left; overflow-wrap: anywhere;
  padding: 28px 16px calc(34px + var(--sab)); text-shadow: 0 1px 3px rgba(0,0,0,.9);
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.85) 28px);
  max-height: 33vh; max-height: 33dvh; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
}
/* « 3 sur 12 » sous la légende (maquette « 72d ») */
#viewer-count { display: none; }
#viewer.gallery #viewer-count { display: block; position: absolute; left: 16px; bottom: calc(12px + var(--sab)); z-index: 3; color: #fff; font-size: .75rem; opacity: .75; text-shadow: 0 1px 3px rgba(0,0,0,.9); pointer-events: none; }
#viewer.gallery #viewer-count:empty { display: none; }
#viewer.gallery #viewer-head, #viewer.gallery #viewer-close, #viewer.gallery #viewer-tools, #viewer.gallery #viewer-caption, #viewer.gallery #viewer-count { transition: opacity .2s; }
#viewer.gallery.chrome-off #viewer-head, #viewer.gallery.chrome-off #viewer-close, #viewer.gallery.chrome-off #viewer-tools, #viewer.gallery.chrome-off #viewer-caption, #viewer.gallery.chrome-off #viewer-count { opacity: 0; pointer-events: none; }
/* Fenêtre « Supprimer » : case « Supprimer aussi pour … » (comme Telegram) */
.ask-check { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; font-weight: 600; cursor: pointer; }
.ask-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent, #2a9d8f); }
.me { cursor: pointer; border-radius: 12px; }
#chat-avatar, #members-list .avatar { cursor: pointer; }
.msg.deleted .bubble { font-style: italic; color: var(--muted); }

/* ---------- Fenêtres ---------- */
dialog {
  border: 0;
  border-radius: 20px;
  padding: 0;
  width: min(440px, calc(100% - 24px));
  background: var(--panel);
  color: var(--text);
}
dialog::backdrop { background: rgba(0,0,0,.45); }
.dialog-body { padding: 20px; display: grid; gap: 12px; max-height: 85vh; max-height: 85dvh; overflow-y: auto; }
.dialog-body h2, .dialog-body h3 { margin: 0; }
.dialog-body section { display: grid; gap: 8px; }
#add-member-form { display: grid; gap: 8px; }
#invite-create { display: grid; gap: 8px; }
#invite-result { display: grid; gap: 8px; }
#invites-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
#invites-list li { display: flex; align-items: center; gap: 8px; font-size: .88rem; }
#invites-list li span { flex: 1; }
#members-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
#members-list li { display: flex; align-items: center; gap: 10px; }
#members-list li span.grow { flex: 1; }
#group-members label { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
#group-members input { width: auto; }
.row { display: flex; gap: 8px; justify-content: flex-end; }

.fatal { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: grid; place-items: center; padding: 16px; text-align: center; }
.fatal .card { gap: 10px; }
.fatal #fatal-detail { word-break: break-word; font-size: .75rem; }
html.dialog-polyfill dialog:not([open]) { display: none; }
html.dialog-polyfill dialog[open] {
  display: block; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 60; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45);
}

#toast {
  position: fixed; left: 50%; bottom: calc(90px + var(--kb)); transform: translateX(-50%);
  background: #222; color: #fff;
  padding: 10px 16px; border-radius: 12px;
  z-index: 100; max-width: 90%;
}
/* Au premier plan (popover), par-dessus les fenêtres ouvertes : on garde la même place */
#toast[popover] { inset: auto; left: 50%; bottom: calc(90px + var(--kb)); margin: 0; border: 0; overflow: visible; }
#toast.hidden { display: none; }
.thanks-body { text-align: center; }
.thanks-heart { font-size: 3.5rem; line-height: 1; margin: 6px 0 4px; animation: thanksbeat 1.2s ease-in-out 2; }
@keyframes thanksbeat { 0%,100% { transform: scale(1); } 40% { transform: scale(1.25); } }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  #sidebar { width: 100%; border-right: 0; }
  #chat { display: none; }
  #app.in-chat #sidebar { display: none; }
  #app.in-chat #chat { display: flex; }
  #back-btn { display: inline-grid; }
  /* La discussion glisse par-dessus l'accueil (maquette 49, --slide-in) : il reste affiché dessous jusqu'à la fin, la
     discussion est posée devant lui, et son en-tête est opaque (sinon l'accueil se voyait à travers, 30 octobre) */
  /* Au retour (maquette 86), l'inverse : la discussion, déjà fermée (« leaving »), reste affichée par-dessus l'accueil le
     temps de repartir vers la droite. L'accueil recule et s'assombrit sous elle (--slide-back, --slide-dim : son voile,
     « isolate » pour qu'il passe au-dessus de tout l'accueil mais jamais de la discussion) */
  /* (la discussion, poussée hors de l'écran, ne doit pas rendre la page plus large : pas de défilement de côté) */
  #app.sliding { position: relative; overflow: clip; }
  #app.sliding #sidebar { display: flex; isolation: isolate; }
  #app.sliding #sidebar::after { content: ''; position: absolute; inset: 0; z-index: 2147483647; background: var(--slide-dim); opacity: 0; pointer-events: none; }
  /* (la discussion n'a pas de fond à elle : c'est la page, dessous, qui est de la couleur du thème ; posée devant
     l'accueil, elle le laissait voir à travers les bulles, vidéo du 30 octobre 11 h 18 : elle prend ce fond) */
  :root #app.sliding #chat { display: flex; position: absolute; inset: 0; z-index: 6; background: var(--bg); }
  /* (même poids que la règle du voile, plus haut : le même :is()) */
  :root[data-skin="classique"] #app.sliding #chat > :is(header.chat-header, #chat.picking > #pick-bar):not(#activity .bar) { background: var(--hd-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Photo de profil ---------- */
.avatar.photo { background-size: cover !important; background-position: center !important; }
.avatar-row { display: flex; align-items: center; gap: 16px; }
.avatar-row .col { display: grid; gap: 8px; }

/* ---------- Fond d'écran ---------- */
#wallpaper-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.wp-choice { font-family: inherit;
  height: 84px; border-radius: 14px; border: 3px solid transparent; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; padding: 4px;
  background-size: cover !important; box-shadow: inset 0 0 0 1px var(--line);
}
.wp-choice span { font-family: inherit; font-size: .72rem; background: rgba(255,255,255,.85); color: #222; border-radius: 6px; padding: 1px 6px; }
.wp-choice.active { border-color: var(--accent); }
.has-wallpaper .day,
.has-wallpaper .msg.system .bubble,
.has-wallpaper .author {
  /* Pastilles (dates, appels, auteurs) aux couleurs de l'appli, lisibles sur n'importe quel fond */
  background: color-mix(in srgb, var(--panel) 90%, transparent); color: var(--text); border-radius: 10px;
  padding: 3px 10px; align-self: flex-start; box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.has-wallpaper .day, .has-wallpaper .msg.system .bubble { align-self: center; }
.has-wallpaper .msg.system .bubble { color: var(--muted); }
.has-wallpaper .bubble { box-shadow: 0 1px 2px rgba(0,0,0,.22); }
.has-wallpaper .msg.theirs .bubble { background: var(--theirs); }

#messages { container-type: inline-size; } /* largeur de référence des photos / vidéos (cqw) */
#wallpaper-progress { display: grid; gap: 6px; margin-top: 10px; font-size: .9rem; }
#wallpaper-progress.hidden { display: none; }
#wallpaper-progress .progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
#wallpaper-progress .progress div { height: 100%; width: 0; background: var(--accent); transition: width .2s; }

/* ---------- Réactions et menu d'un message ---------- */
/* Qui a réagi */
.reaction-list { display: grid; gap: 2px; margin: 4px 0 12px; }
.reaction-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; }
.reaction-row:not(:disabled) { cursor: pointer; }
.reaction-row:not(:disabled):hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.reaction-row:disabled { opacity: 1; }
.reaction-row .avatar { width: 40px; height: 40px; flex: none; }
.reaction-row .who { flex: 1; display: grid; min-width: 0; }
.reaction-row .who small { color: var(--muted); }
.reaction-row .emoji { font-size: 1.5rem; }
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: -6px 8px 0; position: relative; z-index: 1; }
.reaction {
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  border-radius: 999px; padding: 1px 7px; font-size: .85rem; cursor: pointer;
}
.reaction.mine { border-color: var(--accent); background: var(--mine); }
#msg-menu {
  position: fixed; z-index: 70; background: var(--panel); color: var(--text);
  border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.25); padding: 6px; display: grid; gap: 4px;
}
.menu-reactions { display: flex; gap: 2px; }
.menu-reactions button { font-size: 1.6rem; background: none; border: 0; border-radius: 12px; padding: 4px 6px; cursor: pointer; }
.menu-reactions button.mine, .menu-reactions button:hover { background: var(--bg); }
.menu-actions { display: grid; border-top: 1px solid var(--line); padding-top: 4px; }
.menu-actions button { background: none; border: 0; color: var(--text); text-align: left; padding: 9px 10px; border-radius: 10px; font: inherit; cursor: pointer; }
.menu-actions button:hover { background: var(--bg); }
/* Répondre à un message : citation dans la bulle et bandeau au-dessus de la saisie */
.login-tagline { margin: -4px 0 6px; text-align: center; line-height: 1.45; }
.fwd-label { margin: 0 0 4px; font-size: .78rem; font-style: italic; color: var(--muted); }
.bubble.media > .fwd-label { margin: 2px 6px 4px; }
.share-sheet.forwarding .share-caption { color: var(--muted); }
.quote-box { display: flex; flex-direction: column; gap: 1px; width: 100%; min-width: 0; margin: 0 0 6px; padding: 6px 10px; border: 0; border-left: 4px solid var(--accent); border-radius: 8px; background: rgba(0,0,0,.06); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.quote-name { font-size: .8rem; font-weight: 700; color: var(--accent); }
.quote-text { font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } /* un long lien cité passe à la ligne (sinon la bulle sort de l'écran) */
.quote-text.gone { font-style: italic; }
/* Sourdine, mentions, alerte forte (maquette « 61 ») */
.muted-conv::after { content: "\1F515"; margin-left: 5px; font-size: .8em; opacity: .65; }
.mention { color: var(--accent); font-weight: 700; }
#composer { position: relative; }
.mention-list, .alert-bar { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px); z-index: 30; }
.mention-list { display: flex; flex-direction: column; padding: 6px 0; border-radius: 14px; background: var(--card, var(--bg)); box-shadow: 0 4px 16px rgba(0,0,0,.16); }
.mention-list.hidden, .alert-bar.hidden { display: none; }
.mention-item { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mention-item:first-child { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.mention-item .avatar { width: 32px; height: 32px; flex: none; font-size: .9rem; }
.alert-bar label { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid #f5c27a; border-radius: 14px; background: #fff4e5; color: #1d2427; cursor: pointer; }
.alert-bar .grow { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.alert-bar small { color: #6b7378; }
.alert-bell { font-size: 1.2rem; }
.mention-list:not(.hidden) ~ .alert-bar { bottom: calc(100% + 6px); }
.mute-dialog .mute-choice { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 1rem; }
.mute-dialog .mute-choice input { width: 20px; height: 20px; accent-color: var(--accent); }
/* (le navigateur donne le focus au premier choix à l'ouverture et l'entourait d'un carré : vu le 25 octobre) */
/* (c'est l'ombre de 2 px du thème Classique, plus bas, qui dessinait le carré : sélecteur plus précis pour passer devant) */
dialog.mute-dialog .mute-choice input:focus, dialog.mute-dialog .mute-mentions input:focus { outline: none; box-shadow: none; }
.mute-dialog .row { justify-content: flex-end; gap: 8px; margin-top: 10px; }
/* Message vocal en texte (maquette « 62 ») */
.voice-text-box { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 6px; }
.vt-chip { padding: 4px 12px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.vt-chip:disabled { opacity: .7; cursor: default; }
/* « Lire ce message en texte › » (maquette 74b) : une ligne en couleur de l'appli, comme un lien, sans pastille */
.vt-read { padding: 4px 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: .82rem; font-weight: 600; text-align: left; cursor: pointer; }
.vt-read:disabled { opacity: .7; cursor: default; }
.voice-text { margin: 0; font-size: .95rem; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.vt-note { font-size: .72rem; font-style: italic; color: var(--muted); }
.vt-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; }
/* Photo ou vidéo citée : miniature 40 × 40 à droite (maquette « 60 ») */
.quote-box.has-thumb { flex-direction: row; align-items: center; gap: 8px; padding-right: 4px; }
.quote-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.quote-box .quote-thumb { width: 40px; height: 40px; margin: 0; border-radius: 5px; vertical-align: middle; font-size: 30px; }
[data-theme="dark"] .quote-box { background: rgba(255,255,255,.08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .quote-box { background: rgba(255,255,255,.08); } }
#reply-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; background: var(--panel); border-top: 1px solid var(--line); }
#reply-bar .quote-slot { flex: 1; min-width: 0; }
#reply-bar .quote-box { margin: 0; cursor: default; }
#messages .msg { touch-action: pan-y; }
.msg.swipe-reply { position: relative; }
.msg.swipe-reply::before { content: "↩"; position: absolute; left: calc(-1 * (var(--swipe-ico) + var(--swipe-ico-gap))); top: 50%; width: var(--swipe-ico); height: var(--swipe-ico); margin-top: calc(var(--swipe-ico) / -2); border-radius: 50%; display: grid; place-items: center; background: var(--panel); color: var(--muted); box-shadow: 0 1px 3px rgba(0,0,0,.2); opacity: .5; transition: opacity .15s; }
.msg.swipe-ready::before { opacity: 1; color: var(--accent); }
.msg.swipe-left::before { left: auto; right: calc(-1 * (var(--swipe-ico) + var(--swipe-ico-gap))); }
#edit-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px; background: var(--mine); font-size: .88rem; border-top: 1px solid var(--line);
}
.watch-btn { display: block; margin-top: 6px; background: #ff0033; color: #fff; }

/* ---------- Appel réduit ---------- */
#call-mini {
  position: fixed; z-index: 65; bottom: calc(84px + env(safe-area-inset-bottom) + var(--kb)); right: 12px;
  display: flex; align-items: center; gap: 4px; background: var(--ok); color: #fff;
  border-radius: 999px; padding: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.3); max-width: calc(100% - 24px);
}
#call-mini { touch-action: none; user-select: none; -webkit-user-select: none; transition: left .2s, right .2s, top .2s; }
#call-mini.dragging { transition: none; opacity: .9; }
#call-mini button { border: 0; background: none; color: #fff; font: inherit; cursor: pointer; padding: 6px 10px; border-radius: 999px; }
#call-mini-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .88rem; }
#call-mini-hangup { background: var(--danger) !important; width: 34px; height: 34px; padding: 0 !important; }

/* ---------- Activités ---------- */
#activity-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; background: #fff4d6; color: #5c4800; font-size: .92rem;
}
#activity {
  position: fixed; inset: 0; z-index: 40; background: var(--bg); color: var(--text);
  display: flex; flex-direction: column;
}
#activity header { padding-top: calc(10px + var(--sat)); }
#activity-title { flex: 1; }
#activity-presence {
  padding: 6px 12px; font-size: .9rem; text-align: center; background: #fff4d6; color: #5c4800;
}
#activity-presence.here { background: #e3f6e8; color: #1d5b2c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #activity-presence { background: #3a3218; color: #f3dfa2; }
  :root:not([data-theme="light"]) #activity-presence.here { background: #193824; color: #bfe8c9; }
}
:root[data-theme="dark"] #activity-presence { background: #3a3218; color: #f3dfa2; }
:root[data-theme="dark"] #activity-presence.here { background: #193824; color: #bfe8c9; }
#activity-body {
  flex: 1; overflow-y: auto; padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
#activity-invite {
  position: fixed; z-index: 45; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom) + var(--kb)); transform: translateX(-50%);
  width: min(420px, calc(100% - 24px)); background: var(--panel); color: var(--text);
  border-radius: 18px; padding: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); display: grid; gap: 10px; font-weight: 600;
}
.activity-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
/* « Faire quelque chose ensemble » (maquette Figma « 11 ») : jeux en grille 2 × 2, Dictée sur une ligne, carte YouTube, ✕ */
.games-body { gap: 12px; }
.games-head { display: flex; align-items: center; gap: 10px; }
.games-head h2 { flex: 1; margin: 0; line-height: 1.2; }
.games-label { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: -4px; }
.games-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.game-choice {
  display: grid; justify-items: start; align-content: start; gap: 10px; padding: 14px; border-radius: 18px; text-align: left;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
}
.game-choice > span { font-size: 1.5rem; line-height: 1; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.games-grid .dictee-choice { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.dictee-choice b { display: grid; gap: 2px; font-weight: 600; }
.dictee-choice small { font-weight: 400; font-size: .8rem; color: var(--muted); }
.big-btn { font-size: 1.1rem; padding: 14px 22px; }
.center { text-align: center; }

.game-head { display: grid; gap: 6px; text-align: center; width: 100%; }
.game-score { font-weight: 600; }
.game-status { font-size: 1.15rem; font-weight: 700; text-align: center; padding: 6px 12px; border-radius: 12px; }
.game-status.my-turn { background: var(--mine); }

.ttt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(360px, 92vw); }
.ttt-cell {
  aspect-ratio: 1; font-size: clamp(2.2rem, 12vw, 3.6rem); border: 0; border-radius: 18px;
  background: var(--panel); box-shadow: 0 2px 6px rgba(0,0,0,.08); cursor: pointer;
}
.ttt-cell.win { background: #ffe082; }

.c4-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 8px;
  background: #1d4ed8; border-radius: 16px; width: min(460px, 94vw); overflow: hidden;
}
.c4-col { display: grid; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 10px; }
.c4-col:hover { background: rgba(255,255,255,.12); }
.c4-cell { aspect-ratio: 1; border-radius: 50%; background: var(--bg); box-shadow: inset 0 2px 4px rgba(0,0,0,.3); }
.c4-cell.red { background: #e63946; }
.c4-cell.yellow { background: #ffd60a; }
.c4-cell.win { box-shadow: 0 0 0 3px #fff, inset 0 2px 4px rgba(0,0,0,.3); }
.c4-cell.drop { animation: c4drop .35s ease-in; }
@keyframes c4drop { from { transform: translateY(calc(var(--drop-rows) * -110%)); } to { transform: none; } }

/* Bataille navale */
.bs-sea { display: grid; gap: 6px; justify-items: center; }
.bs-title { font-weight: 600; font-size: .95rem; }
.bs-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; padding: 6px;
  background: #1d6fe0; border-radius: 14px; width: min(340px, 90vw);
}
.bs-sea.mine .bs-grid { width: min(220px, 60vw); background: #4c8fe8; }
.bs-sea.mine.big .bs-grid { width: min(340px, 90vw); }
.bs-cell {
  aspect-ratio: 1; border: 0; border-radius: 6px; padding: 0; background: #9cc8ff;
  display: grid; place-items: center; font-size: clamp(.9rem, 5vw, 1.5rem); line-height: 1; color: inherit;
}
.bs-sea.mine .bs-cell { font-size: clamp(.7rem, 3.4vw, 1.1rem); }
.bs-sea.mine.big .bs-cell { font-size: clamp(.9rem, 5vw, 1.5rem); }
.bs-cell.ship { background: #6b7c93; }
.bs-cell.miss { background: #cfe3ff; }
.bs-cell.hit { background: #ffb4a2; }
.bs-cell.sunk { background: #e63946; }
.bs-sea.can-shoot .bs-cell:not(.hit):not(.miss):not(.sunk) { cursor: crosshair; }
.bs-sea.can-shoot .bs-cell:not(.hit):not(.miss):not(.sunk):active { background: #ffd60a; }
.bs-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.draw-scores { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: .9rem; }
.draw-scores .drawer { font-weight: 700; }
.word-choices { display: grid; gap: 10px; width: min(360px, 100%); }
.word-own { width: min(360px, 100%); display: grid; gap: 6px; }
.word-own .row { display: flex; gap: 8px; }
.word-own input { flex: 1; min-width: 0; }
.canvas-wrap { width: 100%; max-width: 640px; display: flex; justify-content: center; }
.draw-canvas { background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.12); touch-action: none; }
.draw-canvas.can-draw { cursor: crosshair; }
.draw-tools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.draw-tools .color { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.draw-tools .color.active { box-shadow: 0 0 0 3px var(--accent); }
.draw-tools .size { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); display: grid; place-items: center; cursor: pointer; }
.draw-tools .size span { display: block; background: var(--text); border-radius: 50%; }
.draw-tools .size.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.draw-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.guess-form { display: flex; gap: 8px; width: min(420px, 100%); }
.hint { font-size: 1.1rem; letter-spacing: .1em; }
.guesses { display: grid; gap: 2px; font-size: .9rem; text-align: center; }
.guesses .ok { font-weight: 700; color: var(--ok); }

.yt-holder { position: relative; width: 100%; max-width: 900px; display: flex; flex-direction: column; background: #000; border-radius: 12px; overflow: hidden; }
.yt-video { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.yt-video iframe, .yt-video > div { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Barre sous la vidéo : réactions + plein écran (jamais par-dessus les boutons de YouTube) */
.yt-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 6px; background: #111; }
.yt-reacts { display: flex; gap: 2px; flex-wrap: wrap; }
.yt-react-btn {
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 1.35rem;
  line-height: 1; cursor: pointer; padding: 0;
}
.yt-react-btn:active { background: rgba(255,255,255,.18); transform: scale(1.15); }
/* Emojis qui s'envolent par-dessus la vidéo */
.yt-video > .yt-react-layer { z-index: 4; pointer-events: none; overflow: hidden; }
.yt-react-fly {
  position: absolute; bottom: 8%; display: grid; justify-items: center; gap: 2px;
  animation: yt-fly 2.6s ease-out forwards;
}
.yt-react-emoji { font-size: clamp(2rem, 9vw, 3.4rem); line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.yt-react-who { font-size: .72rem; color: #fff; background: rgba(0,0,0,.55); padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
@keyframes yt-fly {
  0% { transform: translateY(20px) scale(.6); opacity: 0; }
  12% { transform: translateY(0) scale(1.1); opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateY(-160%) scale(1); opacity: 0; }
}
.yt-tap {
  position: absolute; inset: auto 12px 12px 12px; z-index: 2; border: 0; border-radius: 12px;
  background: rgba(255,0,51,.92); color: #fff; font: inherit; font-weight: 700; padding: 12px; cursor: pointer;
}
.yt-info { text-align: center; max-width: 600px; }
.yt-find { display: flex; gap: 8px; }
.yt-find input { flex: 1; min-width: 0; }
.yt-find-hint { margin-top: -2px; }
.yt-results { display: grid; gap: 6px; }
.yt-results:empty { display: none; }
.yt-section-title { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.yt-section-title.hidden { display: none; }
.yt-seen { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.yt-seen:empty { display: none; }
.yt-seen-card { flex: none; width: 136px; display: grid; gap: 6px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; }
.yt-seen-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #222; display: block; }
.yt-seen-name { font-size: .78rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-result { display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.yt-result img { width: 112px; aspect-ratio: 16 / 9; flex: none; border-radius: 8px; object-fit: cover; background: #222; }
.yt-result-txt { display: grid; gap: 2px; min-width: 0; }
.yt-result-title { font-size: .9rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-result-channel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Fête de fin de partie ---------- */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 90; pointer-events: none; }
.celebrate {
  position: fixed; z-index: 91; left: 50%; top: 42%; transform: translate(-50%, -50%);
  background: var(--panel); color: var(--text); border-radius: 26px; padding: 22px 30px;
  box-shadow: 0 16px 50px rgba(0,0,0,.3); text-align: center; min-width: min(300px, 86vw);
  animation: celebrate-in .55s cubic-bezier(.2, 1.6, .4, 1) both;
}
.celebrate.out { animation: celebrate-out .45s ease-in both; }
.celebrate-emoji { font-size: 4.5rem; line-height: 1.1; animation: celebrate-bounce .8s ease-in-out .3s 2; }
.celebrate-title { font-size: 1.5rem; font-weight: 800; margin-top: 6px; }
.celebrate-sub { font-size: 1.15rem; margin-top: 4px; color: var(--muted); }
.celebrate.win .celebrate-title { color: var(--accent); }
@keyframes celebrate-in { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes celebrate-out { to { transform: translate(-50%, -50%) scale(.8); opacity: 0; } }
@keyframes celebrate-bounce { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-18px) rotate(-12deg); } 60% { transform: translateY(0) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .celebrate, .celebrate-emoji { animation: none; } }

/* ---------- « écrit… » ---------- */
.typing-text { color: var(--accent) !important; font-style: italic; }
#chat-sub.typing-text { font-weight: 600; }
.typing-dots { display: inline-flex; align-items: center; gap: 5px; padding: 12px 14px; }
.typing-dots i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: block;
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots i:nth-of-type(2) { animation-delay: .15s; }
.typing-dots i:nth-of-type(3) { animation-delay: .3s; }
.typing-mic { font-size: .95rem; margin-right: 2px; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---------- Amis, groupes ---------- */
.members-title { font-weight: 700; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; }
#chat-name, #chat-sub { cursor: pointer; }
.group-head { display: flex; align-items: center; gap: 14px; }
.group-head .avatar.big { cursor: pointer; flex: none; }
.group-head h2 { margin: 0; }
.row.wrap { flex-wrap: wrap; justify-content: flex-start; }
#group-info-members { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
#group-info-members li { display: flex; align-items: center; gap: 10px; }
#group-add { display: grid; gap: 6px; }
.add-person { display: flex; align-items: center; gap: 10px; text-align: left; border-radius: 14px; }
.add-person .avatar { width: 32px; height: 32px; font-size: .85rem; }

/* ---------- Recadrage ---------- */
#crop { display: grid; place-items: center; z-index: 95; padding: 16px; }
.crop-box { width: min(420px, 100%); display: grid; gap: 12px; text-align: center; color: #fff; }
.crop-box h2 { margin: 0; }
.crop-box .muted { color: #cfd8dc; }
#crop-frame {
  position: relative; width: min(86vw, 58vh, 380px); aspect-ratio: 1; margin: 0 auto;
  overflow: hidden; touch-action: none; cursor: grab; background: #000; border-radius: 12px;
}
#crop-img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; transform-origin: 0 0; }
.crop-mask { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,.55); outline: 2px solid rgba(255,255,255,.8); outline-offset: -2px; }
#crop-frame.rect .crop-mask { border-radius: 0; }
.crop-zoom { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; }
.crop-zoom input { flex: 1; padding: 0; }

/* ---------- YouTube ensemble : présence et départ commun ---------- */
.yt-presence { font-weight: 600; font-size: .95rem; text-align: center; }
.yt-presence.alone { color: var(--muted); }
.yt-wait {
  background: #fff4d6; color: #5c4800; border-radius: 12px; padding: 8px 12px;
  font-size: .9rem; text-align: center; max-width: 600px;
}
.yt-countdown {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  background: rgba(0,0,0,.55); color: #fff; font-size: 5rem; font-weight: 800;
  pointer-events: none; animation: yt-pop 1s ease-out infinite;
}
@keyframes yt-pop { from { transform: scale(1.25); opacity: .6; } 30% { transform: scale(1); opacity: 1; } }

#invites-list li { flex-wrap: wrap; }
.small-select { width: auto; padding: 4px 8px; font-size: .82rem; border-radius: 999px; }

/* Dessine et devine : palette et gomme */
.draw-palette { display: grid; grid-template-columns: repeat(8, 34px); gap: 6px; justify-content: center; width: 100%; }
.draw-tools .eraser {
  border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 999px;
  padding: 6px 12px; font: inherit; font-size: .9rem; cursor: pointer;
}
.draw-tools .eraser.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.draw-tools .color[style*="255, 243, 176"], .draw-tools .color[style*="#fff3b0"] { box-shadow: 0 0 0 1px #ccc; }

/* ---------- Dictée ---------- */
.dictee-list { display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 6px; }
.dictee-list .grow { flex: 1; min-width: 0; }
.dictee-list .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dictee-editor, #dictee-start { display: grid; gap: 8px; }
#dictee-editor.hidden, #dictee-start.hidden { display: none; }
.dictee-who { display: flex; align-items: center; gap: 8px; }
.dictee-who select { flex: 1; }
.dictee-head { width: min(480px, 100%); display: grid; gap: 6px; text-align: center; }
.dictee-title { font-weight: 700; }
.dictee-bar { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; }
.dictee-bar > div { height: 100%; background: var(--accent); transition: width .3s; }
.dictee-word { font-size: 1.8rem; font-weight: 800; letter-spacing: .04em; text-align: center; }
.dictee-word.big { font-size: clamp(2rem, 11vw, 3.4rem); padding: 12px 0; }
.dictee-timer { width: min(360px, 90%); height: 8px; border-radius: 4px; background: var(--accent); transform-origin: left; animation: dictee-shrink linear forwards; }
@keyframes dictee-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.dictee-form { display: flex; gap: 8px; width: min(420px, 100%); }
.dictee-form input { font-size: 1.4rem; text-align: center; }
.center-row { justify-content: center; }
.dictee-bravo { font-size: 2.4rem; font-weight: 800; color: var(--ok); padding: 30px 0; animation: celebrate-in .4s both; }
.dictee-oops { font-weight: 700; font-size: 1.1rem; }
.dictee-correction { font-size: clamp(1.8rem, 10vw, 2.6rem); font-weight: 800; letter-spacing: .06em; }
.dictee-correction .ok { color: var(--ok); }
.dictee-correction .bad { color: var(--danger); text-decoration: underline; }
.dictee-correction .sp { display: inline-block; width: .4em; }
.dictee-results { display: grid; gap: 10px; justify-items: center; text-align: center; }
.dictee-stars { font-size: 3rem; }
.dictee-wrong { display: grid; gap: 4px; }
.dictee-wrong .dictee-correction { font-size: 1.4rem; }
.dictee-wrong-row { display: flex; align-items: baseline; gap: 8px; justify-content: center; }
.dictee-watch { display: grid; gap: 8px; justify-items: center; }
.dictee-live { font-size: 1.2rem; font-weight: 600; min-height: 1.5em; }
.dictee-history { display: grid; gap: 2px; text-align: center; font-size: .95rem; }
.dictee-history .bad { color: var(--danger); }

/* ---------- Pas de zoom : comportement d'appli ---------- */
html { touch-action: manipulation; }
/* iPhone zoome sur les champs dont le texte fait moins de 16px */
input, textarea, select { font-size: max(16px, 1em); }

/* ---------- Carte « Installer + notifications » ---------- */
#app-card, #email-card, #demo-card { display: flex; align-items: center; gap: 10px; margin: 8px 10px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
#app-card.hidden, #email-card.hidden, #demo-card.hidden { display: none; }
#app-card .setup-icon, #email-card .setup-icon, #demo-card .setup-icon { font-size: 1.6rem; }
#app-card .grow, #email-card .grow, #demo-card .grow { flex: 1; display: grid; min-width: 0; }
#app-card small, #email-card small, #demo-card small { opacity: .75; }
#setup-card {
  margin: 10px; padding: 12px; border-radius: 14px;
  background: linear-gradient(135deg, #fff4d6, #ffe3ec); color: #4a2a00;
  border: 2px solid #ffb74d; display: grid; gap: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  animation: setup-pop .5s ease-out;
}
#setup-card.hidden { display: none; }
#setup-card .setup-step { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.7); border-radius: 10px; padding: 8px; }
#setup-card .setup-step.hidden { display: none; }
#setup-card .setup-icon { font-size: 1.6rem; }
#setup-card .grow { flex: 1; display: grid; }
#setup-card small { opacity: .75; }
#setup-card #setup-later { justify-self: end; color: inherit; }
@keyframes setup-pop { from { transform: scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Accusés de réception ---------- */
.ticks { margin-left: 4px; letter-spacing: -3px; font-weight: 700; }
/* (chasse aux sauts, 31 octobre : « ✓ » envoyé, « ✓✓ » reçu ou lu et « 🕓 » en attente n'ont pas la même largeur ; la
   bulle s'élargissait de 6 px et sautait à gauche quand le message était reçu : la place de « ✓✓ » est réservée) */
:is(.bubble, .bubble.media > .caption) > .meta .ticks { display: inline-block; min-width: var(--tick-w); }
.ticks.sent, .ticks.delivered { color: var(--muted); }
.ticks.read { color: #34b7f1; }
#msginfo-list h4 { margin: 14px 0 6px; font-size: .9rem; opacity: .8; }
.msginfo-msg { align-self: center; margin: 4px auto 6px; max-width: 85%; width: fit-content; padding: 8px 14px; border-radius: 18px; background: var(--theirs, #eee); border: 1px solid var(--line); overflow-wrap: anywhere; }
.msginfo-msg.mine { background: var(--mine); }
#msginfo-list { display: flex; flex-direction: column; }
.msginfo-card { border-radius: 14px; background: var(--card, rgba(127,127,127,.08)); padding: 4px 12px; }
.msginfo-state { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.msginfo-state + .msginfo-state { border-top: 1px solid var(--line); }
.msginfo-ico { width: 26px; text-align: center; font-weight: 700; letter-spacing: -3px; color: var(--muted); }
.msginfo-state.read .msginfo-ico, .msginfo-sub.read { color: #34b7f1; }
.msginfo-state.pending { opacity: .6; }
.msginfo-sub { display: block; }
.backup-date { flex-direction: column; align-items: stretch; }
.backup-files { padding: 4px 0 8px 8px; }
.backup-files .btn.small { padding: 4px 10px; }
.app-version.old { color: var(--danger); opacity: 1; }
.msginfo-state .grow { flex: 1; }
.msginfo-card + .msginfo-card { margin-top: 8px; }
.msginfo-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.msginfo-row .avatar { width: 32px; height: 32px; font-size: .9rem; }
.msginfo-row .grow { flex: 1; }

/* Dessine et devine : réponses en cours d'écriture */
.guess-typing { display: grid; gap: 2px; font-size: .9rem; text-align: center; color: var(--muted); font-style: italic; }
.guess-typing.hidden { display: none; }

/* ---------- YouTube ensemble : plein écran ---------- */
.yt-fs {
  flex: 0 0 auto; width: 40px; height: 40px;
  border: 0; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.yt-video > .yt-overlay {
  position: absolute; inset: auto 50% 12px auto; transform: translateX(50%); width: auto; height: auto;
  z-index: 3; background: rgba(0,0,0,.7); color: #fff; padding: 6px 12px; border-radius: 999px;
  font-size: .9rem; white-space: nowrap; pointer-events: none;
}
.yt-video > .yt-overlay.hidden { display: none; }
/* Fin de vidéo : suggestions par-dessus l'écran de fin de YouTube */
.yt-video > .yt-end {
  z-index: 5; background: rgba(0,0,0,.88); color: #fff; display: flex; flex-direction: column;
  justify-content: center; gap: 8px; padding: 10px 0; overflow: hidden;
}
.yt-video > .yt-end.hidden { display: none; }
.yt-end-title { font-weight: 700; text-align: center; padding: 0 12px; font-size: clamp(.9rem, 3.6vw, 1.2rem); }
.yt-end-hint { text-align: center; font-size: .8rem; opacity: .75; padding: 0 12px; }
.yt-end-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 12px; scroll-snap-type: x mandatory; }
.yt-end-card {
  flex: 0 0 auto; width: clamp(110px, 32vw, 200px); display: grid; gap: 3px; align-content: start;
  border: 0; border-radius: 10px; padding: 0; background: #1f1f1f; color: #fff; text-align: left;
  cursor: pointer; overflow: hidden; scroll-snap-align: start;
}
.yt-end-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #333; }
.yt-end-name { font-size: .78rem; line-height: 1.2; padding: 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-end-channel { font-size: .7rem; opacity: .7; padding: 0 6px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-end-card.again {
  width: clamp(80px, 22vw, 120px); place-content: center; text-align: center; white-space: pre-line;
  font-size: 1rem; background: #2a9d8f;
}
/* Vrai plein écran (Android, ordinateur) */
.yt-holder:fullscreen { max-width: none; width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
.yt-holder:-webkit-full-screen { max-width: none; width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
/* En plein écran : vidéo au centre, barre en colonne à droite (dans les bandes noires) */
.yt-holder:fullscreen, .yt-holder:-webkit-full-screen, .yt-holder.yt-full { flex-direction: row; align-items: center; }
.yt-holder:fullscreen .yt-video, .yt-holder.yt-full .yt-video { flex: 1; height: 100%; aspect-ratio: auto; }
.yt-holder:-webkit-full-screen .yt-video { flex: 1; height: 100%; aspect-ratio: auto; }
.yt-holder:fullscreen .yt-bar, .yt-holder.yt-full .yt-bar { flex-direction: column; height: 100%; justify-content: center; padding: 6px 4px; background: #000; }
.yt-holder:-webkit-full-screen .yt-bar { flex-direction: column; height: 100%; justify-content: center; padding: 6px 4px; background: #000; }
.yt-holder:fullscreen .yt-reacts, .yt-holder.yt-full .yt-reacts { flex-direction: column; }
.yt-holder:-webkit-full-screen .yt-reacts { flex-direction: column; }
/* iPhone : la vidéo prend tout l'écran de l'appli */
.yt-holder.yt-full {
  position: fixed; inset: 0; z-index: 200; max-width: none; width: 100vw; height: 100dvh;
  aspect-ratio: auto; border-radius: 0;
  padding: var(--sat) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- Dictée : clavier de l'appli (style Gboard, sans suggestions) ---------- */
:root { --kb-bg: #e8eaed; --kb-key: #ffffff; --kb-special: #c9ccd1; --kb-text: #202124; --kb-hint: #80868b; --kb-accent: #1a73e8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --kb-bg: #202124; --kb-key: #3c4043; --kb-special: #5f6368; --kb-text: #e8eaed; --kb-hint: #9aa0a6; --kb-accent: #8ab4f8; }
}
:root[data-theme="dark"] { --kb-bg: #202124; --kb-key: #3c4043; --kb-special: #5f6368; --kb-text: #e8eaed; --kb-hint: #9aa0a6; --kb-accent: #8ab4f8; }
.dictee-input { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; }
.dictee-input.with-kb { flex: 1; }
.dictee-kb {
  position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); margin: auto -12px calc(-16px - env(safe-area-inset-bottom));
  width: calc(100% + 24px); max-width: 720px; box-sizing: border-box;
  display: grid; gap: 10px; padding: 10px 4px calc(14px + env(safe-area-inset-bottom));
  background: var(--kb-bg); user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.dictee-kb-row { display: flex; gap: 5px; justify-content: center; }
.dictee-key {
  position: relative; flex: 1 1 0; max-width: 64px; min-width: 0; height: 50px; border: 0; border-radius: 7px;
  background: var(--kb-key); color: var(--kb-text); font-family: Roboto, system-ui, sans-serif;
  font-size: 1.45rem; font-weight: 400; padding: 0; cursor: pointer;
  box-shadow: 0 1px 1px rgba(0,0,0,.18); -webkit-tap-highlight-color: transparent;
}
.dictee-key .hint { position: absolute; top: 2px; right: 5px; font-size: .7rem; color: var(--kb-hint); }
.dictee-key:active, .dictee-key.down { filter: brightness(.88); }
.dictee-key.shift, .dictee-key.erase, .dictee-key.layer, .dictee-key.enter { background: var(--kb-special); flex: 1.5 1 0; max-width: 96px; font-size: 1.35rem; }
.dictee-key.layer { font-size: 1rem; }
.dictee-key.shift.on { color: var(--kb-accent); }
.dictee-key.space { flex: 5 1 0; max-width: 340px; font-size: 1rem; }
.dictee-kb-popup {
  position: absolute; z-index: 5; display: flex; gap: 4px; padding: 4px; border-radius: 10px;
  background: var(--kb-key); box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.dictee-kb-popup .dictee-key { width: 44px; flex: none; background: var(--kb-bg); }
.link-btn { border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; padding: 4px; }
.chat-title small.wrap { white-space: normal; overflow: hidden; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Fenêtre de confirmation de l'appli */
#ask-dialog { width: min(420px, calc(100% - 32px)); }
#ask-dialog .ask-text { margin: 0; white-space: pre-line; line-height: 1.4; }
#ask-dialog .ask-field { display: grid; gap: 4px; font-size: .9rem; }
.btn.danger-fill { background: var(--danger); color: #fff; }

/* Menu du trombone : appareil photo, caméra, galerie */
.composer { position: relative; }
#attach-menu {
  position: absolute; left: 8px; bottom: calc(100% + 6px); z-index: 20;
  display: grid; min-width: 220px; padding: 6px; border-radius: 14px;
  background: var(--panel); color: var(--text); box-shadow: 0 8px 28px rgba(0,0,0,.25);
}
#attach-menu.hidden { display: none; }
#attach-menu button {
  display: flex; align-items: center; gap: 12px; border: 0; background: none; color: inherit;
  font: inherit; font-size: 1.05rem; padding: 12px; border-radius: 10px; text-align: left; cursor: pointer;
}
#attach-menu button:active { background: var(--bg); }
#attach-menu span { font-size: 1.4rem; }

/* Les fenêtres ne dépassent jamais la largeur de l'écran (sinon elles glissent sur le côté) */
.dialog-body { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
dialog { max-width: calc(100vw - 24px); overflow-x: hidden; }

/* Choix de l'apparence dans les Réglages */
.theme-choice { display: flex; gap: 6px; }
.theme-choice button { flex: 1; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 12px; padding: 10px 6px; font: inherit; font-size: .92rem; cursor: pointer; }
.theme-choice button.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); font-weight: 700; }
#settings-dialog a { color: var(--accent); }

/* Stockage utilisé */
#storage-info { display: grid; gap: 6px; }
.storage-line { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: var(--text); font-size: .92rem; }
.storage-bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.storage-bar > div { height: 100%; background: var(--accent); border-radius: 999px; }
.storage-bar.warn > div { background: var(--danger); }

/* ---------- Réglages rangés : menu de rubriques ---------- */
.settings-head { display: flex; align-items: center; gap: 6px; }
.settings-head h2 { flex: 1; }
.settings-head .icon-btn.hidden { display: none; }
.settings-menu { display: grid; gap: 2px; }
.settings-menu.hidden, .settings-panel.hidden { display: none; }
.settings-menu button {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 0; background: none; color: var(--text); font: inherit; padding: 12px 6px; border-radius: 12px; cursor: pointer;
}
.settings-menu button.hidden { display: none; }
.settings-menu button:active, .settings-menu button:hover { background: var(--bg); }
.settings-menu .ico { font-size: 1.5rem; width: 34px; text-align: center; }
.settings-menu .txt { flex: 1; display: grid; gap: 2px; min-width: 0; }
.settings-menu .txt small { color: var(--muted); font-size: .82rem; }
.settings-menu .chev { color: var(--muted); font-size: 1.5rem; }
/* Maquette « 92 » : « Tu aimes Utilo Famille ? » (noter, recommander), un petit groupe sous le menu des réglages */
.love-group.hidden { display: none; }
.love-group { margin-top: 14px; display: grid; gap: 8px; }
.love-title { margin: 0; padding: 0 4px; color: var(--muted); font-size: .82rem; font-weight: 600; }
.settings-panel { display: grid; gap: 12px; }

/* Partage depuis une autre application (façon WhatsApp) : écran plein, recherche, coches, légende */
#share-dialog.share-sheet { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--panel); color: var(--text); display: flex; flex-direction: column; }
.share-head { display: flex; align-items: center; gap: 8px; margin: 10px 12px 6px; padding: 4px 6px; border-radius: 999px; background: var(--bg); }
.share-back { font-size: 1.4rem; width: 44px; height: 44px; flex: none; }
.share-search { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 1.1rem; padding: 10px 4px; outline: none; }
.share-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.share-target { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 18px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.share-target.chosen { background: color-mix(in srgb, var(--ok) 22%, transparent); }
.share-av { position: relative; flex: none; }
.share-av .avatar { width: 50px; height: 50px; }
.share-tick { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; font-size: .8rem; font-weight: 700; display: none; align-items: center; justify-content: center; border: 2px solid var(--panel); }
.share-target.chosen .share-tick { display: flex; }
.share-text { display: flex; flex-direction: column; min-width: 0; }
.share-text strong { font-size: 1.05rem; }
.share-text small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.share-foot { border-top: 1px solid var(--line); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--panel); }
.share-compose { display: flex; align-items: flex-end; gap: 10px; }
.share-thumb { position: relative; width: 56px; height: 56px; flex: none; border-radius: 10px; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.share-thumb img, .share-thumb video { width: 100%; height: 100%; object-fit: cover; }
.share-count { position: absolute; right: 3px; bottom: 3px; padding: 0 6px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: .8rem; font-weight: 700; }
.share-caption { flex: 1; min-width: 0; box-sizing: border-box; resize: none; min-height: 48px; max-height: 120px; padding: 13px 16px; border: 0; border-radius: 24px; background: var(--bg); color: inherit; font: inherit; font-size: 1.05rem; outline: none; }
.share-bar { display: flex; align-items: center; gap: 12px; margin-top: 10px; min-height: 56px; }
.share-who { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-who.muted { color: var(--muted); font-weight: 400; font-size: .95rem; }
.share-send { width: 56px; height: 56px; flex: none; border: 0; border-radius: 50%; background: var(--ok); color: #fff; font-size: 1.5rem; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.share-send:disabled { opacity: .4; cursor: default; box-shadow: none; }

/* Conditions d'utilisation à accepter */
.terms-check { display: flex; gap: 8px; align-items: flex-start; font-size: 0.92rem; }
.terms-check input { width: auto; margin-top: 3px; }
/* Personnes bloquées, signalements */
.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.plain-list li .grow { flex: 1; }
.report-card { border: 1px solid var(--line, #ddd); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.report-card.done { opacity: 0.6; }
.report-card .quote { background: var(--bg); border-radius: 8px; padding: 6px 8px; margin: 6px 0; white-space: pre-wrap; word-break: break-word; }
.report-card img, .report-card video { max-width: 100%; max-height: 240px; border-radius: 8px; display: block; margin: 6px 0; }
.report-card .row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.report-reasons { display: grid; gap: 6px; }
.report-reasons button.on { outline: 2px solid var(--accent, #2a9d8f); }
.msg.hidden-blocked .bubble { font-style: italic; opacity: 0.7; }
#blocked-banner { padding: 8px 12px; text-align: center; font-size: 0.9rem; }
#notif-diag { white-space: pre-line; }

/* Installer l'application (phase de test Google Play) */
.play-steps { padding-left: 20px; margin: 4px 0 10px; display: grid; gap: 12px; }
.play-steps li .btn { display: inline-block; margin-top: 6px; text-decoration: none; }

/* Espaces : sa famille et les familles où l'on est ami(e) */
#spaces-bar { display: flex; gap: 6px; padding: 6px 10px; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--panel); }
#spaces-bar button { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg); color: inherit; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 0.9rem; cursor: pointer; }
#spaces-bar button.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
#spaces-bar .badge { position: static; }

/* Partage d'un lien YouTube : regarder ensemble ou envoyer le lien */
.share-modes { display: flex; gap: 8px; padding: 8px 12px 0; }
.share-mode {
  flex: 1; border: 1px solid var(--border, rgba(0,0,0,.15)); background: var(--panel); color: var(--text);
  border-radius: 999px; padding: 9px 10px; font: inherit; font-size: .92rem; cursor: pointer;
}
.share-mode.on { background: var(--accent, #2a9d8f); border-color: transparent; color: #fff; font-weight: 600; }
.share-compose.hidden { display: none; }

/* Journal replié : « 📋 5 appels manqués de Papa · 14:57–14:58 ▸ » */
.journal { display: contents; }
.journal.folded { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.journal.folded:not(.open) > .msg { display: none; }
.journal-head {
  align-self: center; border: 1px dashed var(--line); border-radius: 10px; padding: 5px 12px; margin: 2px 0;
  background: transparent; color: var(--muted); font: inherit; font-size: .88rem; cursor: pointer; max-width: 90%;
}
.has-wallpaper .journal-head {
  background: color-mix(in srgb, var(--panel) 90%, transparent); border-style: solid; box-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* À propos et dons */
.crash-text { max-height: 40vh; overflow: auto; font-size: .7rem; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel-2); border-radius: 10px; padding: 8px; }
.about-text p { margin: 0 0 10px; line-height: 1.45; }
.don-list { display: grid; gap: 8px; margin: 8px 0; }
.don-btn { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; }
.don-btn .don-price { font-weight: 700; white-space: nowrap; }
#email-card small { overflow-wrap: anywhere; }
/* Fichier effacé du serveur (gardé 30 jours au plus) */
.gone-note { font-size: .85rem; opacity: .8; padding: 8px 4px; max-width: 260px; white-space: normal; }
/* Album de famille */
#album-dialog .dialog-body { max-width: 760px; }
.album-month { margin: 14px 0 6px; font-size: 1rem; }
.album-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; }
.album-tile { position: relative; padding: 0; border: 0; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--panel); cursor: pointer; }
.album-tile img, .album-tile video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.album-play { position: absolute; inset: auto 6px 6px auto; color: #fff; font-size: .9rem; background: rgba(0,0,0,.5); border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; }
.album-video { display: grid; place-items: center; width: 100%; height: 100%; font-size: 2rem; }
/* Organisation familiale */
.orga-day { margin: 12px 0 4px; font-size: .95rem; }
.orga-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.orga-item .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.orga-item.done .grow { opacity: .55; }
.orga-item.done .done-title { text-decoration: line-through; }
.orga-add { display: grid; gap: 6px; margin-top: 14px; }
.orga-add input, .orga-line input { width: 100%; }
.orga-line { display: flex; gap: 6px; margin-bottom: 8px; }
.orga-chip { display: inline-block; margin: 0 6px 6px 0; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, var(--panel)); font-weight: 600; }
/* ---------- Modes d'affichage ---------- */
.author-av { display: none; }
.speak-btn { margin-left: 8px; border: 0; background: none; font-size: 1.5rem; cursor: pointer; vertical-align: middle; }
.quick-call { font-size: 1.6rem; flex: none; }
.choose-btn { display: grid; text-align: left; gap: 2px; width: 100%; margin-bottom: 8px; }
.choose-btn small { white-space: normal; }
body.mode-petit .author-av, body.mode-simple .author-av { display: inline-flex; width: 36px; height: 36px; font-size: 1rem; margin-right: 8px; vertical-align: middle; }

/* Enfant qui ne lit pas encore : des photos au lieu des noms, de gros boutons */
body.mode-petit #conv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 10px; padding: 10px; }
body.mode-petit #conv-list li { flex-direction: column; text-align: center; padding: 14px 6px; border-radius: 18px; position: relative; gap: 8px; background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
body.mode-petit #conv-list .avatar { width: 104px; height: 104px; font-size: 2.8rem; }
body.mode-petit #conv-list .conv-text { flex: none; }
body.mode-petit #conv-list .conv-text small { display: none; }
body.mode-petit #conv-list .conv-text strong { font-size: 1.05rem; }
body.mode-petit #conv-list .badge { position: absolute; top: 6px; right: 10px; font-size: 1.1rem; min-width: 32px; height: 32px; line-height: 32px; }
body.mode-petit #conv-list .quick-call { position: absolute; top: 4px; left: 6px; }
body.mode-petit #new-group-btn, body.mode-petit #games-btn, body.mode-petit #orga-btn { display: none !important; }
body.mode-petit #text-input, body.mode-petit #send-btn { display: none !important; }
body.mode-petit #composer { justify-content: center; gap: 28px; padding: 10px; }
body.mode-petit #mic-btn { width: 88px; height: 88px; font-size: 2.8rem; border-radius: 50%; background: var(--accent); }
body.mode-petit #attach-btn { width: 66px; height: 66px; font-size: 2.1rem; }
body.mode-petit #call-audio-btn, body.mode-petit #call-video-btn { font-size: 1.9rem; }
body.mode-petit .voice-player { min-width: 240px; }
body.mode-petit .voice-player .voice-btn { width: 64px; height: 64px; font-size: 1.9rem; }
body.mode-petit .bubble { font-size: 1.15rem; }

/* Grands-parents : tout en plus grand, appeler en un geste, photos en grand */
body.mode-simple { font-size: 118%; }
body.mode-simple #conv-list li { padding: 14px 12px; }
body.mode-simple #conv-list .avatar { width: 64px; height: 64px; font-size: 1.8rem; }
body.mode-simple #conv-list .conv-text strong { font-size: 1.2rem; }
body.mode-simple .quick-call { width: 56px; height: 56px; font-size: 1.8rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, var(--panel)); }
/* Accueil : le bouton d'appel tout à droite, après l'heure, les deux centrés sur la ligne ; le nom sur une seule ligne
   (vu le 17 octobre : le bouton remontait au-dessus de l'heure, décalée vers le bas, et un nom de groupe long passait
   sur deux lignes) */
body.mode-simple #conv-list .quick-call { order: 3; align-self: center; margin-left: -4px; }
body.mode-simple #conv-list li:has(.quick-call) .conv-meta { padding-top: 0; padding-bottom: 0; justify-content: center; align-self: center; margin-left: 0; }
body.mode-simple #conv-list .conv-text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mode-simple #games-btn, body.mode-simple #new-group-btn, body.mode-simple #orga-btn { display: none !important; }
body.mode-simple #mic-btn, body.mode-simple #attach-btn, body.mode-simple #send-btn { width: 56px; height: 56px; font-size: 1.7rem; }
body.mode-simple #call-audio-btn, body.mode-simple #call-video-btn { font-size: 1.8rem; }
body.mode-simple #text-input { font-size: 1.15rem; }
body.mode-simple .bubble.media img, body.mode-simple .bubble.media .video-thumb { width: min(calc(92cqw - 8px), 620px) !important; }
/* Tâches : le titre sur sa ligne, les boutons dessous (petits écrans) */
/* Cagnottes : barre de progression qui se remplit avec les étoiles */
#orga-goals .orga-item { flex-wrap: wrap; }
#orga-goals .goal-title { font-weight: 600; }
.goal-row { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.goal-bar { flex: 1 1 100%; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
.goal-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #f4a62a, #f7c948); transition: width .4s; }
.goal-txt { flex: 1; }
/* ---------- Mascotte ---------- */
.mascot { display: block; object-fit: contain; }
.placeholder .mascot { width: 160px; height: 160px; margin: 0 auto 10px; }
.placeholder { flex-direction: column; text-align: center; }
#setup-form .logo .mascot { width: 120px; height: 120px; margin: 0 auto; }
.ask-mascot { width: 96px; height: 96px; margin: 0 auto 4px; }
.mascot-party { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; align-content: center; gap: 8px; background: rgba(0,0,0,.35); overflow: hidden; cursor: pointer; }
.mascot-party .mascot { width: 180px; height: 180px; animation: mascot-jump .6s ease-in-out infinite alternate; }
.mascot-party strong { color: #fff; font-size: 2rem; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.star-fall { position: absolute; top: -40px; font-size: 2rem; animation: star-fall 2.2s linear forwards; }
@keyframes mascot-jump { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-18px) rotate(4deg); } }
@keyframes star-fall { to { transform: translateY(110vh) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mascot-party .mascot, .star-fall { animation: none; } .star-fall { display: none; } }
.mascot-party[popover] { margin: 0; border: 0; padding: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; }
/* Case « J'accepte les conditions » : à gauche du texte, aussi dans les formulaires d'inscription */
label.terms-check, .card label.terms-check { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; text-align: left; }
label.terms-check input[type=checkbox] { width: auto; flex: none; margin: 3px 0 0; }

/* ---------- Thèmes (Réglages → Apparence → Thème) ----------
   « Classique » : l'apparence de base. Les thèmes enfants ont leurs propres couleurs (jour ou sombre imposé
   par theme.js), un en-tête coloré, des coins plus ronds et un fond de conversation dessiné (public/themes/). */
:root[data-skin="mascotte"] {
  --wp-tile: url("/themes/mascotte.jpg");
  --head-solid: #2a9d8f;
  --bg: #e6f6f2; --panel: #ffffff; --text: #1d2a2f; --muted: #587576; --line: #cbe8e1;
  --accent: #2a9d8f; --accent-text: #fff; --mine: #ffe9a8; --theirs: #ffffff;
  --head: linear-gradient(120deg, #2a9d8f, #45c1b0); --chat-wp: url("/themes/mascotte.jpg"), linear-gradient(#e8f7f3, #e8f7f3);
}
/* Pirates : charte docs/charte-pirates.md (maquette Figma) — océan, lagon, or, voile, sable, parchemin, encre */
:root[data-skin="pirates"] {
  --wp-tile: url("/themes/pirates/decor.svg");
  --head-solid: #0F4C75;
  --bg: #FBF3E2; --panel: #FFF9EC; --text: #3B2412; --muted: #8A6A4A; --line: #E8D7B5;
  --accent: #D9483B; --accent-text: #fff; --mine: #FFE3A3; --theirs: #FFF9EC;
  --head: #0F4C75; --chat-wp: url("/themes/pirates/decor.svg"), linear-gradient(#FBF3E2, #FBF3E2);
}
:root[data-skin]:not([data-skin="classique"]) { --radius: 22px; }
:root[data-skin]:not([data-skin="classique"]) { color-scheme: light; }
:root[data-skin]:not([data-skin="classique"]) body { font-family: ui-rounded, "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
:root[data-skin]:not([data-skin="classique"]) .bar { background: var(--head); color: #fff; border-bottom: 0; }
:root[data-skin]:not([data-skin="classique"]) .bar .icon-btn { color: #fff; }
:root[data-skin]:not([data-skin="classique"]) .bar .muted { color: rgba(255,255,255,.85); }
:root[data-skin]:not([data-skin="classique"]) #conv-list li.active { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
:root[data-skin]:not([data-skin="classique"]) .btn.primary { border-radius: 999px; }
/* Liste des conversations : le motif du thème, très léger */
:root[data-skin]:not([data-skin="classique"]) #conv-list {
  background: linear-gradient(color-mix(in srgb, var(--panel) 45%, transparent), color-mix(in srgb, var(--panel) 45%, transparent)), var(--wp-tile);
  background-size: auto, 540px auto; background-attachment: local;
}
/* Mascotte animée en bas de la liste (thème Mascotte) : elle salue, cligne des yeux ; la toucher la fait saluer */
#sidebar { position: relative; }
#list-mascot { display: none; position: absolute; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 92px; z-index: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:root[data-skin]:not([data-skin="classique"]) #list-mascot { display: block; }
:root[data-skin]:not([data-skin="classique"]) #conv-list { padding-bottom: 110px; } /* la dernière conversation passe au-dessus de la mascotte */
/* Illustrations Canva (public/themes/*.jpg) : posées une fois, fixes derrière les messages */
#chat.skin-wp #messages { background: var(--chat-wp); background-size: cover, cover; background-position: center top; background-attachment: scroll, scroll; }

/* Choix du thème */
/* ---------- Réglages → Apparence (refonte « 31 », maquette Figma validée le 16 octobre) ---------- */
/* Taille du texte : toutes les tailles sont en rem, elles suivent la racine (réglage gardé sur le téléphone, theme.js) */
html[data-text="0"] { font-size: 90%; }
html[data-text="2"] { font-size: 112.5%; }
html[data-text="3"] { font-size: 125%; }
.ap-sec { display: grid; gap: 8px; }
.ap-h { margin: 6px 4px 0; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ap-card { display: grid; gap: 12px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; }
.ap-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.ap-switch.hidden { display: none; }
.ap-switch .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ap-switch strong { font-size: 1rem; }
.ap-switch small { font-size: .8rem; line-height: 1.3; }
.ap-switch + .ap-now, .ap-switch + #appicon-pick { border-top: 1px solid var(--line); padding-top: 12px; }
/* Thème : un petit téléphone par thème, en ligne, qu'on fait glisser */
#skin-choices.skin-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 6px 4px 8px; margin: 0 -4px; }
.skin-choice { flex: none; display: grid; justify-items: center; gap: 2px; width: 104px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; scroll-snap-align: start; }
.skin-phone { position: relative; display: block; width: 100px; height: 164px; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.skin-choice.active .skin-phone { box-shadow: 0 0 0 3px var(--accent); }
.skin-choice.active::after { content: "✓"; position: absolute; margin: 4px 0 0 64px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: .8rem; font-weight: 800; box-shadow: 0 0 0 2px #fff; }
.skin-choice { position: relative; }
.skin-head { position: absolute; left: 0; right: 0; top: 0; height: 38px; }
.skin-bub { position: absolute; left: 8px; width: 60px; height: 16px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.skin-bub:nth-of-type(2) { top: 50px; }
.skin-bub.mine { left: auto; right: 8px; top: 74px; width: 54px; }
.skin-bub:nth-of-type(4) { top: 98px; width: 44px; }
.skin-mascot { position: absolute; right: 2px; bottom: 2px; width: 54px; height: auto; }
.skin-name { margin-top: 6px; font-size: .9rem; font-weight: 700; }
.skin-choice.active .skin-name { color: var(--accent); font-weight: 800; }
.skin-kind { font-size: .72rem; color: var(--muted); }
/* Jour ou nuit : trois boutons dans une même case */
.theme-choice.ap-seg { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 4px; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; }
.theme-choice.ap-seg.hidden { display: none; }
.theme-choice.ap-seg button { border: 0; border-radius: 14px; padding: 10px 4px; font-weight: 600; white-space: nowrap; font-size: .9rem; }
.theme-choice.ap-seg button.on { background: color-mix(in srgb, var(--accent) 15%, var(--panel)); color: var(--accent); box-shadow: none; }
/* Taille du texte : curseur à 4 crans et aperçu en direct */
.ts-row { display: flex; align-items: center; gap: 12px; }
.ts-a { font-weight: 800; color: var(--muted); font-size: .9rem; }
.ts-a.big { font-size: 1.6rem; }
#text-size { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; padding: 0; border: 0; background: linear-gradient(var(--accent), var(--accent)) 0 / var(--ts-fill, 33.3%) 100% no-repeat, var(--line); }
#text-size::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
#text-size::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); }
.ts-labels { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; font-size: .75rem; color: var(--muted); }
.ts-labels span { cursor: pointer; }
.ts-labels .on { color: var(--accent); font-weight: 800; }
.ts-preview { display: grid; gap: 8px; }
.ts-bubble { justify-self: start; max-width: 80%; padding: 8px 14px; border-radius: 16px 16px 16px 4px; background: color-mix(in srgb, var(--line) 70%, var(--panel)); color: var(--text); font-size: 1rem; }
.ts-bubble.mine { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--mine, #DCF0EA); }
/* Icône de l'appli : l'icône actuelle, ou la grille des icônes quand elle ne suit plus le thème */
.ap-now { display: flex; align-items: center; gap: 12px; }
.ap-now.hidden { display: none; }
.ap-now img { width: 52px; height: 52px; border-radius: 14px; }
.ap-now .grow { display: grid; }
.ap-pick-title { display: block; margin-bottom: 10px; }
#appicon-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 6px; }
#appicon-choices .appicon-choice { display: grid; justify-items: center; gap: 6px; padding: 6px 2px; border: 0; border-radius: 18px; background: none; color: var(--text); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
#appicon-choices .appicon-choice img { width: 60px; height: 60px; border-radius: 15px; }
#appicon-choices .appicon-choice.active { background: color-mix(in srgb, var(--accent) 15%, var(--panel)); color: var(--accent); font-weight: 800; box-shadow: 0 0 0 3px var(--accent) inset; }

/* Menu ⋮ d'une conversation : petite liste en haut à droite, comme WhatsApp */
/* Menus ⋮ comme WhatsApp : petit menu collé en haut à droite, sous le bouton */
dialog.menu-dialog { margin: calc(6px + var(--sat)) 6px auto auto; padding: 8px 0; width: max-content; min-width: 210px; max-width: min(300px, calc(100vw - 16px)); border: 0; border-radius: 14px; background: var(--panel); color: var(--text); box-shadow: 0 8px 28px rgba(0,0,0,.25); }
dialog.menu-dialog::backdrop { background: transparent; }
dialog.menu-dialog form { display: grid; }
dialog.menu-dialog button { text-align: left; background: none; border: 0; color: inherit; font: inherit; font-size: 1.02rem; padding: 14px 22px 14px 18px; cursor: pointer; white-space: nowrap; }
dialog.menu-dialog[open] { animation: menu-in .14s ease-out; transform-origin: top right; }
@keyframes menu-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
dialog.menu-dialog button:hover, dialog.menu-dialog button:focus-visible { background: var(--bg); }
/* La fenêtre elle-même sélectionnée à l'ouverture (voir showModal dans app.js) : pas de contour */
dialog:focus, dialog:focus-visible { outline: none; }
#attach-menu.desk :is([data-attach="photo"], [data-attach="video"]) { display: none; }
dialog.menu-dialog button.hidden { display: none; }
#chat-more-btn { font-size: 1.5rem; font-weight: 700; }

/* Rechercher dans une conversation */
#search-input { width: 100%; }
#search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 55vh; overflow-y: auto; }
.search-item { padding: 10px 12px; border-radius: 12px; background: var(--bg); cursor: pointer; }
.search-head { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; }
.search-text { margin-top: 3px; word-break: break-word; }
.search-text mark { background: #ffe58a; color: #222; border-radius: 3px; padding: 0 1px; }
/* Message trouvé : il clignote */
.msg.flash .bubble, .flash > .bubble { animation: msg-flash var(--flash-time) var(--flash-ease) var(--flash-count); }
@keyframes msg-flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 var(--flash-ring) var(--accent); } }

/* Mascotte animée : corps + bras qui salue (public/mascotte/) + paupières dessinées par-dessus les yeux */
.mascot-anim { position: relative; display: block; aspect-ratio: 1; }
.mascot-anim > img, .mascot-anim > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mascot-anim .m-arm { transform-origin: 25% 51.95%; } /* l’épaule (128, 266 sur 512) ; le bras est derrière le corps */
.mascot-anim .m-lid { transform: translateY(-80px); }
.mascot-anim .m-lash { opacity: 0; }
/* Salut en arrivant (2 fois), puis de temps en temps ; clignement des yeux toutes les quelques secondes */
.mascot-anim.hello .m-arm { animation: m-wave 1.1s ease-in-out 2; }
.mascot-anim.idle .m-arm { animation: m-wave-rare 9s ease-in-out infinite 3s; }
.mascot-anim .m-lid { animation: m-blink 4.5s ease-in-out infinite 1.2s; }
.mascot-anim .m-lash { animation: m-lash 4.5s ease-in-out infinite 1.2s; }
.mascot-anim.idle { animation: m-breathe 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
.mascot-anim.hop { animation: m-hop 1.4s ease-in-out infinite; transform-origin: 50% 90%; }
.mascot-anim.party { animation: mascot-jump .6s ease-in-out infinite alternate; }
.mascot-anim.party .m-arm { animation: m-wave .5s ease-in-out infinite; }
@keyframes m-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(16deg); } 75% { transform: rotate(-6deg); } }
@keyframes m-wave-rare { 0%, 82%, 100% { transform: rotate(0); } 86% { transform: rotate(16deg); } 90% { transform: rotate(-6deg); } 94% { transform: rotate(14deg); } 98% { transform: rotate(-3deg); } }
@keyframes m-blink { 0%, 92%, 100% { transform: translateY(-80px); } 95%, 97% { transform: translateY(0); } }
@keyframes m-lash { 0%, 94%, 98%, 100% { opacity: 0; } 95%, 97% { opacity: 1; } }
@keyframes m-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .985); } }
@keyframes m-hop { 0%, 60%, 100% { transform: translateY(0) scale(1, 1); } 70% { transform: translateY(0) scale(1.05, .93); } 80% { transform: translateY(-14%) scale(.97, 1.04); } 90% { transform: translateY(0) scale(1.04, .95); } }
@media (prefers-reduced-motion: reduce) {
  .mascot-anim, .mascot-anim .m-arm, .mascot-anim .m-lid, .mascot-anim .m-lash { animation: none !important; }
}

/* Couleurs des bulles d'une conversation (menu ⋮ → Thème de la discussion), jour et sombre */
#chat[data-bubbles="classique"] { --mine: #d8f3ec; --theirs: #ffffff; }
:root[data-theme="dark"] #chat[data-bubbles="classique"] { --mine: #1f4a44; --theirs: #223035; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) #chat[data-bubbles="classique"] { --mine: #1f4a44; --theirs: #223035; } }
#chat[data-bubbles="vert"] { --mine: #dcf8c6; --theirs: #ffffff; }
:root[data-theme="dark"] #chat[data-bubbles="vert"] { --mine: #005c4b; --theirs: #202c33; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) #chat[data-bubbles="vert"] { --mine: #005c4b; --theirs: #202c33; } }
#chat[data-bubbles="bleu"] { --mine: #d6ebff; --theirs: #ffffff; }
:root[data-theme="dark"] #chat[data-bubbles="bleu"] { --mine: #1d3a5c; --theirs: #202a33; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) #chat[data-bubbles="bleu"] { --mine: #1d3a5c; --theirs: #202a33; } }
#chat[data-bubbles="violet"] { --mine: #e9e0ff; --theirs: #ffffff; }
:root[data-theme="dark"] #chat[data-bubbles="violet"] { --mine: #3a2f63; --theirs: #262433; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) #chat[data-bubbles="violet"] { --mine: #3a2f63; --theirs: #262433; } }
#chat[data-bubbles="rose"] { --mine: #ffe0ef; --theirs: #ffffff; }
:root[data-theme="dark"] #chat[data-bubbles="rose"] { --mine: #5a2944; --theirs: #33242c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) #chat[data-bubbles="rose"] { --mine: #5a2944; --theirs: #33242c; } }
#chat[data-bubbles="jaune"] { --mine: #ffe9a8; --theirs: #ffffff; }
:root[data-theme="dark"] #chat[data-bubbles="jaune"] { --mine: #5a4a14; --theirs: #2e2a1e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) #chat[data-bubbles="jaune"] { --mine: #5a4a14; --theirs: #2e2a1e; } }
#bubble-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 14px; }
.bub-choice { display: grid; gap: 4px; padding: 8px 6px 6px; border: 3px solid transparent; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; font: inherit; color: var(--text); }
.bub-choice i { display: block; height: 14px; border-radius: 8px; width: 70%; }
.bub-choice i.me { justify-self: end; }
.bub-choice span { font-size: .75rem; text-align: center; }
.bub-choice.active { border-color: var(--accent); }

/* YouTube ensemble : chat éphémère (sous la vidéo ; en plein écran, les derniers messages en haut à gauche) */
/* Mise en page comme le chat en direct de YouTube : vidéo en haut, chat dans tout le reste de l'écran */
#activity-body.yt-body { overflow: hidden; padding: 0 0 env(safe-area-inset-bottom); gap: 0; align-items: stretch; }
#activity-body.yt-body > .yt-holder { flex: none; border-radius: 0; max-width: none; }
.yt-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 10px; background: var(--panel); }
/* Onglets « Vidéos | Chat » en pilule + bouton ⓘ (maquette Figma « 10 · YouTube ensemble ») */
.yt-tabs { flex: none; display: flex; align-items: center; gap: 8px; }
.yt-seg { flex: 1; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg); }
.yt-tab { flex: 1; border: 0; border-radius: 999px; padding: 8px 10px; background: none; color: var(--muted); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.yt-tab.on { background: var(--accent); color: var(--accent-text); }
.yt-info-btn { flex: none; width: 38px; height: 38px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; }
.yt-info-btn.on { background: var(--bg); color: var(--text); }
.yt-infos { flex: none; display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--bg); }
.yt-infos.hidden { display: none; }
.yt-infos .yt-info { text-align: left; max-width: none; }
.yt-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.yt-panel.hidden { display: none; }
.yt-panel-videos { overflow-y: auto; }
/* Dans l'onglet qui défile, rien ne rétrécit (sinon « Déjà regardées ensemble » était écrasé en bas) */
.yt-panel-videos > * { flex-shrink: 0; }
.yt-panel-videos { padding-bottom: 8px; }
.yt-chat-note { text-align: center; }
.yt-chat-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; font-size: .95rem; }
.yt-chat-list:empty::before { content: "Personne n’a encore écrit. Dis quelque chose !"; color: var(--muted); font-size: .9rem; }
.yt-chat-line { word-break: break-word; }
.yt-chat-line b { color: var(--accent); }
.yt-chat-form { display: flex; gap: 6px; }
.yt-chat-form input { flex: 1; min-width: 0; }
.yt-chat-fly { position: absolute; left: 10px; top: 10px; bottom: auto; max-width: 70%; display: none; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; z-index: 3; }
.yt-holder.yt-full .yt-chat-fly, .yt-holder:fullscreen .yt-chat-fly { display: flex; }
.yt-chat-fly .yt-chat-line { background: rgba(0,0,0,.55); color: #fff; padding: 4px 10px; border-radius: 12px; font-size: .95rem; animation: yt-chat-fade 7s ease forwards; }
.yt-chat-fly .yt-chat-line b { color: #ffd76a; }
@keyframes yt-chat-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* Agenda en vue mois (comme un calendrier de téléphone) : barres de couleur par rendez-vous */
.cal-dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
#ev-colors { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; margin-left: 6px; }
.ev-color { width: 26px; height: 26px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.ev-color.active { border-color: var(--panel); box-shadow: 0 0 0 2px var(--text); }
#activity-body.yt-body > .yt-presence, #activity-body.yt-body > .yt-wait { flex: none; padding: 6px 12px; text-align: center; }
#activity-body.yt-typing > .yt-presence, #activity-body.yt-typing > .yt-wait, #activity-body.yt-typing .yt-tabs, #activity-body.yt-typing .yt-infos, #activity-body.yt-typing .yt-chat-note { display: none; }

/* ---------- Organisation en plein écran (agenda façon FamilyWall, tâches) ---------- */
/* Onglets de l'accueil : Discussions / Agenda / Tâches */
#home-tabs { display: flex; flex: none; border-top: 1px solid var(--line); background: var(--panel); padding-bottom: env(safe-area-inset-bottom); position: relative; z-index: 2; }
#home-tabs.hidden { display: none; }
#home-tabs button { flex: 1; display: grid; justify-items: center; gap: 1px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .78rem; font-weight: 600; padding: 6px 4px 7px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#home-tabs .ht-ico { position: relative; display: grid; place-items: center; width: 56px; height: 30px; border-radius: 15px; font-size: 1.25rem; }
#home-tabs button.on { color: var(--text); }
#home-tabs button.on .ht-ico { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ht-badge { position: absolute; top: -3px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: .7rem; line-height: 18px; font-weight: 700; }
body.mode-petit #home-tabs, body.mode-simple #home-tabs { display: none !important; }
#sidebar[data-tab="agenda"] > :not(header):not(#orga-pane):not(#home-tabs),
#sidebar[data-tab="tasks"] > :not(header):not(#orga-pane):not(#home-tabs) { display: none !important; }
#orga-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#orga-pane.hidden { display: none; }
.orga-body { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Fiche, formulaire, calendriers liés : par-dessus tout l'écran sur un téléphone */
@media (max-width: 760px) { .orga-over { position: fixed; z-index: 30; } }
/* Rappel du jour en haut des Discussions */
#today-card { display: flex; align-items: center; gap: 10px; margin: 8px 12px 0; padding: 10px 12px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--accent) 13%, var(--panel)); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
#today-card.hidden { display: none; }
/* Maquette 91 (B2, C) : la carte se glisse de côté (l'accueil défile toujours de haut en bas), et l'appui long n'ouvre
   ni sélection de texte ni menu du téléphone */
#today-card { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#today-menu { position: fixed; z-index: 70; width: var(--today-menu-w); padding: 0 0 6px; border-radius: 16px; background: var(--panel); color: var(--text); box-shadow: var(--elev2, 0 16px 40px rgba(0, 0, 0, .2)); overflow: hidden; }
#today-menu.hidden, #today-undo.hidden { display: none; }
#today-menu-agenda { display: block; width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; font-size: .875rem; font-weight: 600; text-align: left; cursor: pointer; }
.today-menu-title { display: block; padding: 10px 16px 2px; color: var(--muted); font-size: .6875rem; font-weight: 600; }
.today-menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; font-size: .875rem; font-weight: 600; cursor: pointer; }
#today-undo { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(90px + var(--kb)); padding: 12px 14px; border-radius: 14px; background: var(--today-bar); color: var(--today-bar-fg); }
.today-undo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .8125rem; font-weight: 600; }
#today-undo-cancel { border: 0; background: none; color: var(--today-bar-accent); font: inherit; font-weight: 700; cursor: pointer; }
#today-undo-hide { display: block; width: 100%; margin-top: 10px; padding: 6px 10px; border: 1px solid var(--today-bar-accent); border-radius: 15px; background: none; color: var(--today-bar-accent); font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; }
.today-ico { font-size: 1.2rem; }
.today-txt { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-more { color: var(--accent); font-weight: 700; }
/* « Aujourd'hui » sur deux lignes (maquette « 32b ») : le moment en petit, le titre en entier dessous */
.today-txt { display: grid; gap: 1px; }
.today-when { font-size: .75rem; font-weight: 800; letter-spacing: .02em; color: var(--accent); }
.today-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-more { flex: none; font-size: .8rem; white-space: nowrap; }
.today-more:empty { display: none; }
.today-go { flex: none; font-size: 1.4rem; line-height: 1; color: var(--muted); }
/* Aujourd'hui / Ajouter / Tous : en haut de l'agenda */
.cal-tools { display: flex; gap: 6px; padding: 0 10px 6px; }
.cal-tools button { flex: 1; border: 0; border-radius: 999px; padding: 7px 6px; background: var(--bg); color: var(--text); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cal-tools button.on { background: var(--accent); color: var(--accent-text); }
.orga-top { display: flex; align-items: center; gap: 8px; padding: calc(8px + var(--sat)) 10px 8px; border-bottom: 1px solid var(--line); background: var(--panel); }
.orga-top .grow { flex: 1; min-width: 0; font-size: 1.1rem; }
.orga-page { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px 16px; }
.orga-page[data-orga="agenda"] { padding: 4px 0 0; }
#orga-events { padding: 0 12px 16px; }
.no-parent { display: none !important; }
/* Mois */
#orga-cal { display: flex; flex-direction: column; min-height: 100%; touch-action: pan-y; } /* glisser à gauche / à droite : à nous ; défiler : au navigateur */
#orga-cal.hidden { display: none; }
.cal-head { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.cal-title { flex: 1; text-align: center; font-size: 1.3rem; }
.cal-nav { width: 40px; height: 40px; font-size: 1.6rem; color: var(--accent); }
.cal-wds, .cal-week { display: grid; grid-template-columns: 20px repeat(7, minmax(0, 1fr)); }
.cal-wd { text-align: center; font-size: .8rem; color: var(--muted); padding: 2px 0 4px; }
.cal-week { flex: 1; grid-template-rows: 24px repeat(4, 17px) 1fr; min-height: 100px; border-top: 1px solid var(--line); }
.cal-wn { grid-column: 1; grid-row: 1 / -1; font-size: .62rem; font-weight: 700; color: var(--muted); text-align: center; padding-top: 6px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.cal-day { grid-row: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 3px 0 0; border: 0; border-left: 1px solid var(--line); background: none; color: var(--text); font: inherit; cursor: pointer; text-align: center; }
.cal-day.other { color: var(--muted); }
.cal-day.sel { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
.cal-num { display: inline-block; font-size: .9rem; min-width: 22px; height: 22px; line-height: 22px; border-radius: 11px; }
.cal-day.today .cal-num { background: var(--accent); color: var(--accent-text); font-weight: 700; }
.cal-bar { position: relative; z-index: 1; pointer-events: none; align-self: center; margin: 0 2px; color: #fff; font-size: .66rem; font-weight: 700; line-height: 15px; height: 15px; padding: 0 4px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: clip; text-align: left; }
.cal-bar.cont-l { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-bar.cont-r { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-more { pointer-events: none; z-index: 1; font-size: .62rem; font-weight: 700; color: var(--muted); text-align: center; }
.cal-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
/* Journée (feuille du bas) */
.cal-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; max-height: 55%; overflow-y: auto; background: var(--panel); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.18); padding: 6px 12px calc(14px + env(safe-area-inset-bottom)); }
.cal-sheet-head { display: flex; align-items: center; gap: 4px; position: sticky; top: 0; background: var(--panel); padding: 6px 0; }
.cal-sheet-head strong { flex: 1; font-size: 1.15rem; }
#cal-sheet-add { color: var(--accent); font-size: 1.7rem; }
.ev-line { display: flex; align-items: stretch; gap: 10px; width: 100%; margin: 6px 0; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ev-time { width: 54px; flex: none; display: grid; align-content: center; font-size: .85rem; }
.ev-time small { color: var(--muted); }
.ev-chip { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; color: #fff; }
.ev-chip strong { font-size: .98rem; }
.ev-chip small { opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#orga-events .orga-day { margin: 14px 0 2px; color: var(--muted); font-size: .9rem; }
/* Fiche et formulaire d'un rendez-vous */
.orga-over { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: var(--bg); overflow-y: auto; }
/* La colonne défile, elle n'écrase jamais ses cartes : une carte à bords arrondis (overflow caché) pouvait sinon être
   réduite à 0 quand le contenu dépassait l'écran — la fiche d'un rendez-vous disparaissait sous ses commentaires
   (♡ J'aime et « Publié par » invisibles, vu le 17 octobre) */
.orga-over > * { flex-shrink: 0; }
.ev-top { background: var(--accent); color: var(--accent-text); border-bottom: 0; }
.ev-top .icon-btn { color: inherit; }
.ev-top .btn.primary { background: var(--accent-text); color: var(--accent); }
.ev-card { margin: 12px; padding: 16px; border-radius: 14px; background: var(--panel); display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.ev-title { margin: 0; font-size: 1.3rem; overflow-wrap: anywhere; }
.ev-row { display: flex; align-items: center; gap: 12px; }
/* ---------- Tâches, côté parent (maquette « 9 · Tâches — parent ») ---------- */
.orga-sub { display: block; margin-top: 2px; font-size: .78rem; font-weight: 500; color: var(--muted); }
.kid-stars.neg { color: var(--danger, #c2362c); }
.check-who { font-size: .85rem; font-weight: 700; color: var(--or, #b7791f); margin-bottom: 6px; }
#orga-check .task-card.check { border: 2px solid color-mix(in srgb, var(--or, #b7791f) 70%, transparent); background: color-mix(in srgb, var(--or, #b7791f) 6%, var(--panel)); margin-bottom: 10px; }
#orga-check .task-btns .btn.primary { flex: 2 1 auto; }
.board-list { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 2px 14px; }
.plain-list li.board-row, .board-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; }
.board-row + .board-row { border-top: 1px solid var(--line); }
.board-check { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--accent); background: none; color: #fff; font: 700 1rem/1 inherit; display: grid; place-items: center; cursor: pointer; padding: 0; }
.board-row.ok .board-check { background: var(--accent); }
.board-row.no .board-check { border-color: var(--muted); background: var(--muted); }
.board-row.off { opacity: .55; }
.board-row.off .board-check { border-style: dashed; cursor: default; }
.board-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.board-txt strong { font-weight: 600; }
.board-row.ok .board-txt strong { color: var(--muted); text-decoration: line-through; }
.board-txt small { font-size: .78rem; color: var(--muted); }
.board-list .task-empty { padding: 14px 0; }
.goal-top { display: flex; align-items: center; gap: 8px; }
.goal-top .goal-title { flex: 1; min-width: 0; }
.goal-count { font-size: .85rem; font-weight: 700; color: var(--or, #b7791f); white-space: nowrap; }
.goal-offer { margin-top: 8px; width: 100%; }
.orga-add-btn { display: flex; width: 100%; height: 52px; align-items: center; justify-content: center; margin: 14px 0 6px; padding: 0 14px; font-size: 1rem; line-height: 1; } /* hauteur fixe, texte centré sur une ligne de 1 em : même rendu partout (le rognage « text-box » descendait le texte sur certains téléphones) */
.add-choice { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 10px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.add-choice span:last-child { display: grid; gap: 2px; }
.add-choice b { font-size: 1.05rem; }
.add-choice small { color: var(--muted); }
.add-choice .add-ico { font-size: 1.6rem; }
.add-choice.danger { background: color-mix(in srgb, var(--danger, #c2362c) 8%, var(--panel)); }
.add-choice.danger b { color: var(--danger, #c2362c); }
.seg-label { margin: 14px 0 6px; font-weight: 700; font-size: .92rem; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-btn { padding: 9px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; }
.seg-btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text, #fff); }
[data-form="task"] #task-add, [data-form="goal"] #goal-add { width: 100%; margin-top: 16px; }
.log-list { margin-top: 6px; }
.plain-list li.log-line, .log-line { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.log-main { min-width: 0; }
.log-ico { margin-right: 6px; }
.log-title { font-weight: 600; }
.log-what { color: var(--muted); }
.log-pts { font-weight: 700; white-space: nowrap; text-align: right; }
.log-pts.plus { color: var(--ok, #257a4d); }
.log-pts.minus { color: var(--danger, #c2362c); }
.log-by { grid-column: 1 / -1; color: var(--muted); font-size: .78rem; }
.task-menu .dialog-body { display: grid; gap: 8px; }
.task-menu .dialog-body h3 { margin: 0 0 6px; }
.task-byparent { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0; cursor: pointer; }
.task-byparent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.task-byparent span { display: grid; gap: 2px; }
.task-byparent small { font-size: .8rem; }
.task-byparent-note, .task-nope { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--accent-doux, color-mix(in srgb, var(--accent) 12%, var(--panel))); color: var(--accent); font-weight: 600; }
.task-nope { background: color-mix(in srgb, var(--muted) 12%, var(--panel)); color: var(--text); font-weight: 500; }
.task-by { margin-top: 6px; font-size: .82rem; font-weight: 600; color: var(--accent); }
.task-by.no, .task-by.refused { color: var(--muted); }
.orga-item.done .task-by { display: block; }
.task-byparent-toggle { display: block; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: .8rem; cursor: pointer; }
.task-byparent-toggle.on { color: var(--accent); font-weight: 600; }
/* « Qui le voit ? » (maquette Figma « 22a ») : trois pilules, celle choisie remplie */
.ev-vis-row { align-items: flex-start; }
.ev-vis-box { flex: 1; display: grid; gap: 8px; min-width: 0; }
.ev-vis-box small { font-size: .8rem; }
.ev-vis { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-vis button { font: inherit; font-size: .9rem; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; }
.ev-vis button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.ev-vis button.hidden { display: none; }
.ev-when { display: flex; align-items: flex-start; gap: 12px; }
.ev-when .grow { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.ev-ico { width: 24px; flex: none; text-align: center; font-size: 1.15rem; }
.ev-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.ev-by { margin: 0; text-align: center; }
.ev-lab { width: 44px; flex: none; color: var(--muted); font-size: .9rem; }
.ev-edit input, .ev-edit textarea, .ev-edit select { font: inherit; }
.ev-edit #ev-title { font-size: 1.15rem; font-weight: 600; width: 100%; }
.ev-edit .ev-row input[type=date] { flex: 1; min-width: 0; }
.ev-edit .ev-row input[type=time] { width: 104px; }
.ev-edit .ev-row input { padding-inline: 8px; }
.ev-edit textarea { flex: 1; min-width: 0; resize: vertical; }
.ev-menu { position: absolute; top: calc(52px + var(--sat)); right: 8px; z-index: 6; display: grid; min-width: 200px; padding: 6px 0; border-radius: 12px; background: var(--panel); box-shadow: 0 8px 28px rgba(0,0,0,.25); }
.ev-menu button { border: 0; background: none; color: var(--text); font: inherit; text-align: left; padding: 12px 18px; cursor: pointer; }
.ev-menu button:hover { background: var(--bg); }
.ev-color.active { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--text); }
/* Tâches */
.orga-h { margin: 16px 0 6px; font-size: 1.05rem; }
/* Parent : une grande carte par enfant (comme la carte « mes étoiles » d'un enfant) */
.orga-kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 2px; }
.kid-hint { grid-column: 1 / -1; text-align: center; }
.kid-card { display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 16px; background: linear-gradient(135deg, #fff3c4, #ffe08a); color: #4a3a00; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.kid-card.on { box-shadow: 0 0 0 3px var(--accent); }
.kid-av { width: 44px; height: 44px; flex: none; font-size: 1.1rem; }
.kid-txt { display: grid; min-width: 0; }
.kid-name { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kid-stars { font-size: 1.45rem; font-weight: 800; line-height: 1.15; }
.task-ok { background: color-mix(in srgb, var(--accent) 15%, var(--panel)); color: var(--accent); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--accent); }
.kid-sub { font-size: .8rem; opacity: .85; }
.task-who { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; color: var(--muted); font-size: .92rem; }
.avatar.mini { width: 24px; height: 24px; font-size: .62rem; flex: none; }
.task-undo { justify-self: center; }
/* Trois grandes tuiles pour ajouter */
.orga-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.orga-tile { display: grid; justify-items: center; gap: 4px; padding: 14px 6px; border: 0; border-radius: 16px; background: var(--panel); color: var(--text); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.orga-tile span { font-size: 1.8rem; }
.orga-tile:first-child { background: var(--accent); color: var(--accent-text); }
/* Formulaires (tâche, cagnotte, récompense) : par-dessus, comme la fiche d'un rendez-vous */
.orga-add[data-form] { position: absolute; inset: 0; z-index: 6; margin: 0; border-radius: 0; overflow-y: auto; align-content: start; background: var(--bg); padding: calc(10px + var(--sat)) 14px 20px; box-shadow: none; }
.orga-add[data-form].hidden { display: none; }
@media (max-width: 760px) { .orga-add[data-form] { position: fixed; z-index: 30; } }
.form-head { display: flex; align-items: center; gap: 8px; }
.form-head h3 { flex: 1; font-size: 1.2rem; }
.orga-add[data-form] input:not([type=number]) { font-size: 1.05rem; padding: 12px; }
.orga-hero { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, #fff3c4, #ffe08a); color: #4a3a00; }
.hero-mascot { width: 76px; flex: none; }
.hero-txt { display: grid; gap: 2px; }
.hero-stars { font-size: 2rem; line-height: 1.1; }
.task-cards { display: grid; gap: 10px; }
.task-card, .plain-list li.task-card { display: flex; flex-direction: column; align-items: stretch; padding: 12px 14px; }
.task-card { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--panel); box-shadow: 0 1px 4px rgba(0,0,0,.08); border-left: 5px solid var(--accent); }
.task-card.check { border-left-color: #f4a62a; background: color-mix(in srgb, #f4a62a 10%, var(--panel)); }
.task-card.waiting { border-left-color: #f4a62a; }
.task-top { display: flex; align-items: center; gap: 8px; }
.task-main { flex: 1; min-width: 0; font-size: 1.08rem; font-weight: 600; overflow-wrap: anywhere; }
.task-pts { flex: none; padding: 3px 10px; border-radius: 999px; background: #fff0b8; color: #6b5200; font-weight: 700; }
.task-meta { color: var(--muted); font-size: .9rem; }
.task-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.task-btns .btn { flex: 1 1 auto; }
.task-done-btn { font-size: 1.1rem; padding: 12px; width: 100%; }
.task-wait { flex: 1; color: #8a6400; font-weight: 600; }
.task-empty { padding: 12px; text-align: center; }
.orga-fold { margin-top: 12px; }
.orga-fold summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.orga-add { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--panel); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.orga-add h3 { margin: 0; }
.orga-form-row { display: flex; flex-wrap: wrap; gap: 10px; }
.orga-form-row label { display: flex; align-items: center; gap: 6px; }
.orga-form-row input[type=number] { width: 70px; }
.task-ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.task-ideas .orga-chip { margin: 0; border: 0; font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer; color: var(--text); }
.cal-links-btn { width: 40px; height: 40px; font-size: 1.15rem; }
#cal-links .ev-card h3 { margin: 0; }
#cal-links input:not(.switch) { width: 100%; }
.cal-help summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.feed-item .grow { line-height: 1.3; }
.feed-err { color: var(--danger); }
#ical-box { display: grid; gap: 8px; }
.ical-url { font-size: .8rem; }
/* Mascotte de la liste : juste au-dessus de la barre d'onglets (le bouton « Nouveau groupe » est passé dans ⋮) */
#sidebar:has(#home-tabs:not(.hidden)) #list-mascot { bottom: calc(76px + env(safe-area-inset-bottom)); }
/* Tâches de chaque jour */
.task-repeat { font-size: .85rem; color: var(--accent); font-weight: 600; }
.task-card.off { opacity: .6; }
/* Réglages → Famille : une carte par personne */
#members-list { gap: 10px; }
#members-list li.member-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 12px; border-radius: 16px; background: var(--bg); }
#members-list li.member-card .avatar { width: 52px; height: 52px; font-size: 1.15rem; }
.member-info { display: grid; gap: 3px; min-width: 0; }
.member-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.member-name { font-size: 1.08rem; overflow-wrap: anywhere; }
.role-chip { padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); white-space: nowrap; }
.role-chip.enfant { background: #fff0b8; color: #7a5a00; }
.role-chip.famille { background: color-mix(in srgb, #2e7dd7 14%, transparent); color: #2667b4; }
.role-chip.friend { background: color-mix(in srgb, #7e57c2 16%, transparent); color: #7e57c2; }
.role-chip.is-me { background: var(--accent); color: var(--accent-text); }
.role-chip.demo { background: var(--line); color: var(--muted); }
#demo-remove .set-group { margin-top: 12px; }
#demo-remove p { margin: 6px 4px 0; }
#demo-remove.hidden { display: none; }
.member-meta { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.member-meta .app-version.old { color: var(--danger); }
.members-title { margin-top: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* Glisser vers la gauche pour supprimer (tâches, cagnottes, récompenses) */
.plain-list li.swipe-row { display: block; position: relative; padding: 0; overflow: hidden; border-radius: 14px; }
.swipe-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding: 0 22px; border: 0; border-radius: 14px; background: var(--danger); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.swipe-card { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.swipe-card.orga-item { background: var(--panel); padding-left: 4px; padding-right: 4px; }
.swipe-row.removing { transition: opacity .2s; opacity: 0; }
.swipe-hint { justify-content: center; padding: 0 0 2px; }
/* Invitation à jouer / regarder : photo de la personne qui invite */
#activity-invite { grid-template-columns: 46px minmax(0, 1fr); align-items: center; column-gap: 12px; }
#activity-invite-av { width: 46px; height: 46px; font-size: 1rem; }
#activity-invite > :not(#activity-invite-av):not(#activity-invite-text) { grid-column: 1 / -1; }
/* Accessoire du thème sur la tête (repère 512 × 512 de corps.png : haut du crâne à y = 63, tête large de ~280 px au niveau
   du bord) : chaque chapeau fait tout le tour de la tête, déborde un peu de chaque côté et suit la tête légèrement penchée */
.mascot-anim > img.m-hat { inset: auto; height: auto; transform: rotate(6deg); transform-origin: 50% 100%; pointer-events: none; }
.mascot-anim > img.m-hat[hidden] { display: none; }
.mascot-anim .m-dots { display: none; }
.mascot-anim.has-hat .m-dots { display: inline; }
:root[data-skin="pirates"] .mascot-anim > img.m-hat { left: 21.9%; top: -2.4%; width: 66.4%; }
/* Serre-têtes : le bandeau est dessiné (.m-band) le long du contour de la tête ; les antennes partent de ses deux côtés
   (à 130° et 50° sur l'arc), la couronne de fleurs et sa petite corne sont posées sur le dessus, droites */
:root[data-skin="espace"] .mascot-anim > img.m-hat { left: 18.8%; top: -1.2%; width: 71.9%; transform: none; }
:root[data-skin="licorne"] .mascot-anim > img.m-hat { left: 22.5%; top: -8.1%; width: 64.4%; transform: none; }
.mascot-anim .m-band { display: none; pointer-events: none; }
.mascot-anim .m-band path { fill: none; stroke-linecap: round; }
.mascot-anim .m-band .b-edge { stroke: var(--band-edge); }
.mascot-anim .m-band .b-main { stroke: var(--band-main); }
.mascot-anim .m-band .b-light { stroke: var(--band-light); opacity: .8; }
.mascot-anim .m-band .b-sparkle { fill: #fff; opacity: .9; }
:root[data-skin="espace"] .mascot-anim .m-band { display: inline; --band-edge: #9a82d4; --band-main: #c4b0eb; --band-light: #ece4fb; }
:root[data-skin="licorne"] .mascot-anim .m-band { display: inline; --band-edge: #e48fb2; --band-main: #f7bcd4; --band-light: #fde6ef; }
:root[data-skin="licorne"] .mascot-anim .m-band .b-sparkle { display: none; }
:root[data-skin="dinos"] .mascot-anim > img.m-hat { left: 20.9%; top: -10.1%; width: 68.4%; }
:root[data-skin="ocean"] .mascot-anim > img.m-hat { left: 22.9%; top: -7%; width: 64.4%; }

/* ---------- Thème Pirates : la charte appliquée à toute l'appli (docs/charte-pirates.md, maquette Figma) ----------
   Base calme (sable), un seul style de dessin (plat, contour d'encre), 10 couleurs, icônes dessinées
   (public/themes/pirates/icones/*.svg), aucun emoji dans l'interface, une seule ombre « posée » sans flou. */
@font-face { font-family: "Charte Fredoka"; src: url("/fonts/fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Charte Nunito"; src: url("/fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
:root[data-skin="pirates"] { --ombre: 0 3px 0 rgba(59, 36, 18, .14); --encre: #3B2412; --or: #F2B33D; --or-clair: #FFE3A3; --lagon: #29A89F; --ocean: #0F4C75; --titres: "Charte Fredoka", ui-rounded, system-ui, sans-serif; }
:root[data-skin="pirates"][data-skin] body { font-family: "Charte Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
:root[data-skin="pirates"] :is(dialog h2, dialog h3, .bar strong, .cal-title, #orga-tasks-title, .hero-stars, .mascot-party > strong) { font-family: var(--titres); font-weight: 600; }
/* Pictogrammes : un emoji d'interface (span.emo[data-ico]) devient l'icône dessinée correspondante */
:root[data-skin="pirates"] .emo[data-ico] { display: inline-block; width: 1.35em; height: 1.35em; vertical-align: -.32em; overflow: hidden; text-indent: 3em; white-space: nowrap; background: center / contain no-repeat; }
:root[data-skin="pirates"] .emo[data-ico="ancre"] { background-image: url("/themes/pirates/icones/ancre.svg"); }
:root[data-skin="pirates"] .emo[data-ico="boussole"] { background-image: url("/themes/pirates/icones/boussole.svg"); }
:root[data-skin="pirates"] .emo[data-ico="bouteille"] { background-image: url("/themes/pirates/icones/bouteille.svg"); }
:root[data-skin="pirates"] .emo[data-ico="camera"] { background-image: url("/themes/pirates/icones/camera.svg"); }
:root[data-skin="pirates"] .emo[data-ico="cloche"] { background-image: url("/themes/pirates/icones/cloche.svg"); }
:root[data-skin="pirates"] .emo[data-ico="coche"] { background-image: url("/themes/pirates/icones/coche.svg"); }
:root[data-skin="pirates"] .emo[data-ico="coffre"] { background-image: url("/themes/pirates/icones/coffre.svg"); }
:root[data-skin="pirates"] .emo[data-ico="des"] { background-image: url("/themes/pirates/icones/des.svg"); }
:root[data-skin="pirates"] .emo[data-ico="envoyer"] { background-image: url("/themes/pirates/icones/envoyer.svg"); }
:root[data-skin="pirates"] .emo[data-ico="etoile"] { background-image: url("/themes/pirates/icones/etoile.svg"); }
:root[data-skin="pirates"] .emo[data-ico="gouvernail"] { background-image: url("/themes/pirates/icones/gouvernail.svg"); }
:root[data-skin="pirates"] .emo[data-ico="groupe"] { background-image: url("/themes/pirates/icones/groupe.svg"); }
:root[data-skin="pirates"] .emo[data-ico="joindre"] { background-image: url("/themes/pirates/icones/joindre.svg"); }
:root[data-skin="pirates"] .emo[data-ico="loupe"] { background-image: url("/themes/pirates/icones/loupe.svg"); }
:root[data-skin="pirates"] .emo[data-ico="micro"] { background-image: url("/themes/pirates/icones/micro.svg"); }
:root[data-skin="pirates"] .emo[data-ico="options"] { background-image: url("/themes/pirates/icones/options.svg"); }
:root[data-skin="pirates"] .emo[data-ico="palette"] { background-image: url("/themes/pirates/icones/palette.svg"); }
:root[data-skin="pirates"] .emo[data-ico="photo"] { background-image: url("/themes/pirates/icones/photo.svg"); }
:root[data-skin="pirates"] .emo[data-ico="retour"] { background-image: url("/themes/pirates/icones/retour.svg"); }
:root[data-skin="pirates"] .emo[data-ico="telephone"] { background-image: url("/themes/pirates/icones/telephone.svg"); }
/* En-têtes : océan, bord bas en vagues soulignées d'encre ; prénom en Fredoka */
:root[data-skin="pirates"] .bar:not(#activity .bar) { background: var(--ocean); border: 0; position: relative; z-index: 3; margin-bottom: 10px; }
:root[data-skin="pirates"] .bar:not(#activity .bar)::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: url("/themes/pirates/vagues.svg") repeat-x left top / 98px 14px; pointer-events: none; }
:root[data-skin="pirates"] .bar:not(#activity .bar) strong { font-size: 1.2rem; }
:root[data-skin="pirates"] .bar .muted { color: var(--or-clair); }
:root[data-skin="pirates"] #back-btn { font-size: 0; background: url("/themes/pirates/icones/retour.svg") center / 24px no-repeat; }
:root[data-skin="pirates"] :is(#home-more-btn, #chat-more-btn) { font-size: 0; background: url("/themes/pirates/icones/options.svg") center / 26px no-repeat; }
:root[data-skin="pirates"] :is(#games-btn, #call-audio-btn, #call-video-btn) { width: 38px; height: 38px; margin: 0 1px; font-size: 0; border: 2px solid var(--encre); background: var(--ic) center / 24px no-repeat, var(--panel); }
:root[data-skin="pirates"] #games-btn { --ic: url("/themes/pirates/icones/des.svg"); }
:root[data-skin="pirates"] #call-audio-btn { --ic: url("/themes/pirates/icones/telephone.svg"); }
:root[data-skin="pirates"] #call-video-btn { --ic: url("/themes/pirates/icones/camera.svg"); }
/* Photos de profil cerclées d'or */
:root[data-skin="pirates"] .avatar { box-shadow: inset 0 0 0 3px var(--or); }
:root[data-skin="pirates"] .avatar.mini { box-shadow: inset 0 0 0 2px var(--or); }
/* Fond : sable uni, le décor (ancre, boussole, étoile) à 7 % */
:root[data-skin="pirates"] #conv-list { background: url("/themes/pirates/decor.svg") center top / 420px auto, var(--bg); background-attachment: local; padding: 4px 12px 110px; }
:root[data-skin="pirates"] #chat.skin-wp #messages, :root[data-skin="pirates"] #messages { background: url("/themes/pirates/decor.svg") center top / 420px auto, var(--bg); }
/* Conversations de la liste : des cartes */
:root[data-skin="pirates"] #conv-list li { margin: 0 0 10px; background: var(--panel); border: 2px solid var(--line); border-radius: 18px; box-shadow: var(--ombre); }
:root[data-skin="pirates"] #conv-list li.active { background: var(--panel); border-color: var(--or); }
@media (hover: hover) { :root[data-skin="pirates"] #conv-list li:hover { background: var(--panel); border-color: var(--or); } }
:root[data-skin="pirates"] .badge { background: var(--accent); color: #fff; box-shadow: 0 0 0 2px var(--panel); }
/* Cartes de l'accueil (aujourd'hui, notifications, appli, e-mail) */
:root[data-skin="pirates"] :is(#today-card, #setup-card, #app-card, #email-card, #demo-card) { background: var(--or-clair); border: 2px solid var(--or); border-radius: 18px; box-shadow: var(--ombre); color: var(--text); animation: none; }
:root[data-skin="pirates"] #setup-card .setup-step { background: rgba(255, 249, 236, .75); }
/* Bulles : coins de 18 px, 6 px côté expéditeur ; bord fin ; ombre posée */
:root[data-skin="pirates"] .bubble:not(.media) { border: 2px solid var(--line); border-radius: 18px 18px 18px 6px; box-shadow: var(--ombre); }
:root[data-skin="pirates"] .msg.mine .bubble:not(.media) { border-color: var(--or); border-radius: 18px 18px 6px 18px; }
:root[data-skin="pirates"] .msg.system .bubble { border: 0; box-shadow: none; }
/* Barre d'écriture : parchemin, champ en pilule, joindre / micro dessinés, envoyer = bouton or */
:root[data-skin="pirates"] .composer { background: var(--panel); border-top: 2px solid var(--line); }
:root[data-skin="pirates"] .composer textarea { background: var(--bg); border: 2px solid var(--line); border-radius: 22px; }
:root[data-skin="pirates"] #attach-btn { font-size: 0; background: url("/themes/pirates/icones/joindre.svg") center / 32px no-repeat; }
:root[data-skin="pirates"] #mic-btn { font-size: 0; background: url("/themes/pirates/icones/micro.svg") center / 30px no-repeat; }
:root[data-skin="pirates"] :is(#send-btn, #rec-send, #ev-comment-send) { font-size: 0; border: 2px solid var(--encre); box-shadow: var(--ombre); background: url("/themes/pirates/icones/envoyer.svg") 46% 54% / 24px no-repeat, var(--or); }
/* Onglets du bas : icônes dessinées ; l'onglet actif dans une pilule or cerclée d'encre */
:root[data-skin="pirates"] #home-tabs { background: var(--panel); border-top: 2px solid var(--line); }
:root[data-skin="pirates"] #home-tabs .ht-ico { width: 64px; height: 34px; font-size: 0; background: var(--ic) center / 28px no-repeat; }
:root[data-skin="pirates"] #home-tabs button.on .ht-ico { background: var(--ic) center / 28px no-repeat, var(--or); box-shadow: inset 0 0 0 2px var(--encre); }
:root[data-skin="pirates"] [data-home-tab="chats"] .ht-ico { --ic: url("/themes/pirates/icones/bouteille.svg"); }
:root[data-skin="pirates"] [data-home-tab="agenda"] .ht-ico { --ic: url("/themes/pirates/icones/boussole.svg"); }
:root[data-skin="pirates"] [data-home-tab="tasks"] .ht-ico { --ic: url("/themes/pirates/icones/coffre.svg"); }
/* Boutons : principal rouge voile, secondaire parchemin, tous cerclés d'encre */
:root[data-skin="pirates"] .btn { border-radius: 999px; font-family: var(--titres); font-weight: 600; }
:root[data-skin="pirates"] .btn.primary { background: var(--accent); color: #fff; border: 2px solid var(--encre); box-shadow: var(--ombre); }
:root[data-skin="pirates"] .btn:not(.primary):not(.danger-fill):not(.ghost) { background: var(--panel); color: var(--text); border: 2px solid var(--encre); box-shadow: var(--ombre); }
:root[data-skin="pirates"] .btn.ghost { border: 2px solid var(--encre); }
/* Fenêtres et menus : parchemin cerclé d'encre, coins de 24 px, ombre posée ; titres en océan */
:root[data-skin="pirates"] dialog:not(.menu-dialog) { background: var(--panel); border: 2.5px solid var(--encre); border-radius: 24px; box-shadow: 0 6px 0 rgba(59, 36, 18, .35); }
:root[data-skin="pirates"] dialog:not(.menu-dialog) :is(h2, h3) { color: var(--ocean); }
:root[data-skin="pirates"] dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select) { background: var(--bg); border: 2px solid var(--line); }
:root[data-skin="pirates"] dialog.menu-dialog { border: 2px solid var(--encre); border-radius: 18px; box-shadow: 0 5px 0 rgba(59, 36, 18, .3); }
:root[data-skin="pirates"] dialog.menu-dialog button { font-weight: 700; }
:root[data-skin="pirates"] dialog.menu-dialog .emo[data-ico] { margin-right: 6px; }
/* Tâches : le trésor d'étoiles en or clair cerclé d'encre ; les tâches en cartes ; « +3 » sur une pièce or */
:root[data-skin="pirates"] :is(.orga-hero, .kid-card) { background: var(--or-clair); border: 2px solid var(--encre); border-radius: 20px; box-shadow: var(--ombre); color: var(--text); }
:root[data-skin="pirates"] .task-card { background: var(--panel); border: 2px solid var(--line); border-left-width: 2px; border-radius: 18px; box-shadow: var(--ombre); }
:root[data-skin="pirates"] :is(.task-card.check, .task-card.waiting) { border-color: var(--or); }
:root[data-skin="pirates"] .task-pts { background: var(--or-clair); color: var(--text); box-shadow: inset 0 0 0 2px var(--or); }
:root[data-skin="pirates"] .orga-tile { background: var(--panel); border: 2px solid var(--encre); box-shadow: var(--ombre); }
:root[data-skin="pirates"] .orga-tile:first-child { background: var(--accent); color: #fff; }
:root[data-skin="pirates"] :is(.cal-title, .cal-nav) { color: var(--ocean); }
:root[data-skin="pirates"] .cal-tools button { background: var(--panel); border: 2px solid var(--line); }
:root[data-skin="pirates"] .cal-tools button.on { background: var(--or); color: var(--text); border-color: var(--encre); }
/* Écran vide : le coffre dessiné au-dessus du texte */
:root[data-skin="pirates"] .empty-art { display: grid; justify-items: center; gap: 8px; padding-top: 12px; text-align: center; font-weight: 700; color: var(--muted); background: none; border: 0; box-shadow: none; }
:root[data-skin="pirates"] .empty-art::before { content: ""; width: 88px; height: 88px; background: url("/themes/pirates/icones/coffre.svg") center / contain no-repeat; opacity: .9; }
/* Fête des étoiles : des étoiles dessinées tombent, la mascotte pirate saute */
:root[data-skin="pirates"] .star-fall { font-size: 0; width: 30px; height: 30px; background: url("/themes/pirates/icones/etoile.svg") center / contain no-repeat; }
:root[data-skin="pirates"] .mascot-party > strong { color: var(--or-clair); text-shadow: 0 2px 0 var(--encre); font-size: 2.2rem; }
/* Réglage des sons : seulement pour un thème qui en a */
/* Sons du thème : seul le thème Pirates en a (cloche, pièces d'or) */
#skin-sounds-section { display: none; }
:root:is([data-skin="pirates"], [data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #skin-sounds-section { display: grid; }

/* ---------- Thème Classique (adultes) : la charte docs/charte-classique.md (maquette Figma) ----------
   Le contenu d'abord, une seule couleur d'action (sarcelle), neutres chauds, contraste AA vérifié, Jour et Nuit,
   icônes au trait (public/themes/classique/icones/*.svg, colorées par masque CSS), Plus Jakarta Sans. */
@font-face { font-family: "Charte Jakarta"; src: url("/fonts/jakarta.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
#home-title, #conv-search-box { display: none; }
:root[data-skin="classique"] {
  --head-solid: #F6F4EF; /* barres du téléphone : couleur du fond de l'accueil */
  --bg: #F6F4EF; --panel: #FFFFFF; --panel-2: #EFEBE3; --text: #1B2527; --muted: #5B686B; --line: #E3DDD2;
  --accent: #1B776D; --accent-doux: #DCF0EA; --accent-text: #FFFFFF; --mine: #DCF0EA; --theirs: #FFFFFF;
  --today-bar: var(--text); --today-bar-fg: #FFFFFF; --today-bar-accent: #7FD8CB;
  --danger: #C2362C; --ok: #257A4D; --or: #B7791F;
  --elev1: 0 1px 2px rgba(28, 38, 40, .06), 0 2px 8px rgba(28, 38, 40, .05);
  --elev2: 0 2px 6px rgba(28, 38, 40, .08), 0 16px 40px rgba(28, 38, 40, .16);
}
:root[data-skin="classique"][data-theme="dark"] {
  --head-solid: #000000; --bg: #000000; --panel: #121618; --panel-2: #1C2225; --text: #EBF0F1; --muted: #9AA9AD; --line: #262D30;
  --accent: #52C4B4; --accent-doux: #12332F; --accent-text: #06201C; --mine: #12332F; --theirs: #121618;
  --today-bar: var(--panel-2); --today-bar-fg: var(--text); --today-bar-accent: var(--accent);
  --danger: #F07A6E; --ok: #5CC98F; --or: #F0BE4F; --elev1: none; --elev2: 0 16px 40px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="classique"]:not([data-theme="light"]) {
    --head-solid: #000000; --bg: #000000; --panel: #121618; --panel-2: #1C2225; --text: #EBF0F1; --muted: #9AA9AD; --line: #262D30;
    --accent: #52C4B4; --accent-doux: #12332F; --accent-text: #06201C; --mine: #12332F; --theirs: #121618;
    --today-bar: var(--panel-2); --today-bar-fg: var(--text); --today-bar-accent: var(--accent);
    --danger: #F07A6E; --ok: #5CC98F; --or: #F0BE4F; --elev1: none; --elev2: 0 16px 40px rgba(0, 0, 0, .5);
  }
}
:root[data-skin="classique"] body { font-family: "Charte Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* Icônes au trait : un pseudo-élément teint par la couleur du texte (masque), l'emoji d'origine est caché */
:root[data-skin="classique"] :is(#back-btn, #home-more-btn, #chat-more-btn, #games-btn, #call-audio-btn, #call-video-btn, #attach-btn, #mic-btn, #send-btn, #rec-send, #ev-comment-send) { font-size: 0; color: var(--text);
  /* flex et pas grille : l'emoji caché (taille 0) formait une 2e ligne de grille qui remontait l'icône */
  display: inline-flex; align-items: center; justify-content: center; }
:root[data-skin="classique"] :is(#back-btn, #home-more-btn, #chat-more-btn, #games-btn, #call-audio-btn, #call-video-btn, #attach-btn, #mic-btn, #send-btn, #rec-send, #ev-comment-send, #home-tabs .ht-ico)::before {
  content: ""; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
:root[data-skin="classique"] #back-btn { --ic: url("/themes/classique/icones/retour.svg"); }
:root[data-skin="classique"] :is(#home-more-btn, #chat-more-btn) { --ic: url("/themes/classique/icones/options.svg"); }
:root[data-skin="classique"] #games-btn { --ic: url("/themes/classique/icones/jeux.svg"); }
:root[data-skin="classique"] #call-audio-btn { --ic: url("/themes/classique/icones/telephone.svg"); }
:root[data-skin="classique"] #call-video-btn { --ic: url("/themes/classique/icones/video.svg"); }
:root[data-skin="classique"] #attach-btn { --ic: url("/themes/classique/icones/joindre.svg"); background: var(--panel-2); }
:root[data-skin="classique"] #mic-btn { --ic: url("/themes/classique/icones/micro.svg"); }
:root[data-skin="classique"] :is(#send-btn, #rec-send, #ev-comment-send) { --ic: url("/themes/classique/icones/envoyer.svg"); background: var(--accent); color: var(--accent-text); }
@media (hover: hover) { :root[data-skin="classique"] .icon-btn:hover { background-color: var(--panel-2); } }
:root[data-skin="classique"] :is(#send-btn, #rec-send, #ev-comment-send):hover { background-color: var(--accent); }
:root[data-skin="classique"] .emo[data-ico] { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.22em; overflow: hidden; text-indent: 3em; white-space: nowrap; background-color: var(--muted); -webkit-mask: var(--emo) center / contain no-repeat; mask: var(--emo) center / contain no-repeat; }
:root[data-skin="classique"] .emo[data-ico="etoile"] { background-color: var(--or); }
:root[data-skin="classique"] .emo[data-ico="groupe"] { --emo: url("/themes/classique/icones/groupe.svg"); }
:root[data-skin="classique"] .emo[data-ico="photo"] { --emo: url("/themes/classique/icones/medias.svg"); }
:root[data-skin="classique"] .emo[data-ico="gouvernail"] { --emo: url("/themes/classique/icones/reglages.svg"); }
:root[data-skin="classique"] .emo[data-ico="des"] { --emo: url("/themes/classique/icones/jeux.svg"); }
:root[data-skin="classique"] .emo[data-ico="palette"] { --emo: url("/themes/classique/icones/theme.svg"); }
:root[data-skin="classique"] .emo[data-ico="loupe"] { --emo: url("/themes/classique/icones/recherche.svg"); }
:root[data-skin="classique"] .emo[data-ico="drapeau"] { --emo: url("/themes/classique/icones/drapeau.svg"); }
:root[data-skin="classique"] .emo[data-ico="interdit"] { --emo: url("/themes/classique/icones/interdit.svg"); }
:root[data-skin="classique"] .emo[data-ico="joindre"] { --emo: url("/themes/classique/icones/joindre.svg"); }
:root[data-skin="classique"] .emo[data-ico="etoile"] { --emo: url("/themes/classique/icones/etoile.svg"); }
:root[data-skin="classique"] .emo[data-ico="cloche"] { --emo: url("/themes/classique/icones/cloche.svg"); }
:root[data-skin="classique"] .emo[data-ico="coffre"] { --emo: url("/themes/classique/icones/taches.svg"); }
:root[data-skin="classique"] .emo[data-ico="boussole"] { --emo: url("/themes/classique/icones/agenda.svg"); }
:root[data-skin="classique"] .emo[data-ico="coche"] { --emo: url("/themes/classique/icones/taches.svg"); }
:root[data-skin="classique"] .emo[data-ico="camera"] { --emo: url("/themes/classique/icones/video.svg"); }
:root[data-skin="classique"] .emo[data-ico="micro"] { --emo: url("/themes/classique/icones/micro.svg"); }
/* Menu ⋮ de l'agenda (maquette 33j) : « Tout ce qui arrive », calendriers liés, plannings de travail */
:root[data-skin="classique"] .emo[data-ico="liste"] { --emo: url("/themes/classique/icones/liste.svg"); }
:root[data-skin="classique"] .emo[data-ico="lien"] { --emo: url("/themes/classique/icones/lien.svg"); }
:root[data-skin="classique"] .emo[data-ico="mallette"] { --emo: url("/themes/classique/icones/mallette.svg"); }
/* Tâches : « Valider » et le titre d'une cagnotte restent en texte simple (pas de pictogramme) */
:root[data-skin="classique"] .task-ok .emo, :root[data-skin="classique"] .goal-title .emo[data-ico="coffre"] { display: none; }
:root[data-skin="classique"] .goal-txt .emo[data-ico="etoile"], :root[data-skin="classique"] .goal-title .emo[data-ico="etoile"] { width: 1em; height: 1em; vertical-align: -.12em; }
/* En-têtes : blancs, filet fin en bas ; à l'accueil, seulement la photo et ⋮ (le titre « Discussions » est en dessous) */
:root[data-skin="classique"] .bar:not(#activity .bar) { background: var(--panel); border-bottom: 1px solid var(--line); }
:root[data-skin="classique"] #sidebar > .bar { background: var(--bg); border-bottom: 0; padding-bottom: 0; }
:root[data-skin="classique"] #sidebar > .bar .avatar { width: 36px; height: 36px; font-size: .9rem; }
:root[data-skin="classique"] #me-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:root[data-skin="classique"] .chat-title strong { font-size: 1rem; font-weight: 600; }
:root[data-skin="classique"] .chat-title small { font-size: .8125rem; }
/* Accueil : grand titre, recherche, carte « Aujourd'hui » */
:root[data-skin="classique"] #home-title { display: block; margin: 2px 16px 12px; font-size: 1.625rem; line-height: 2rem; font-weight: 700; letter-spacing: -.4px; }
:root[data-skin="classique"] #conv-search-box { display: block; margin: 0 16px 12px; }
:root[data-skin="classique"] #conv-search { height: 44px; padding: 0 14px 0 42px; border: 0; border-radius: 12px; background: var(--panel-2); font-size: .9375rem; }
:root[data-skin="classique"] #conv-search-box { position: relative; }
:root[data-skin="classique"] #conv-search-box::before { content: ""; position: absolute; left: 13px; top: 12px; width: 20px; height: 20px; background-color: var(--muted); -webkit-mask: url("/themes/classique/icones/recherche.svg") center / contain no-repeat; mask: url("/themes/classique/icones/recherche.svg") center / contain no-repeat; pointer-events: none; }
:root[data-skin="classique"] #conv-search::placeholder { color: var(--muted); }
:root[data-skin="classique"] #today-card { margin: 0 16px 6px; padding: 12px 14px; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--elev1); }
:root[data-skin="classique"] #today-card .today-ico { position: relative; flex: none; width: 40px; height: 40px; border-radius: 12px; background-color: var(--accent-doux); -webkit-mask: none; mask: none; vertical-align: middle; }
:root[data-skin="classique"] #today-card .today-ico::before { content: ""; position: absolute; inset: 9px; background-color: var(--accent); -webkit-mask: url("/themes/classique/icones/agenda.svg") center / contain no-repeat; mask: url("/themes/classique/icones/agenda.svg") center / contain no-repeat; }
:root[data-skin="classique"] #today-card .today-more { color: var(--muted); }
:root[data-skin="classique"] :is(#setup-card, #app-card, #email-card, #demo-card) { margin: 0 16px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--elev1); color: var(--text); animation: none; }
:root[data-skin="classique"] #setup-card .setup-step { background: var(--panel-2); }
/* Liste : pas de cartes, séparateurs alignés sur le texte ; non-lus en gras avec pastille sarcelle */
:root[data-skin="classique"] #conv-list { padding: 4px 0; }
:root[data-skin="classique"] #conv-list li { padding: 0 16px; gap: 14px; }
:root[data-skin="classique"] #conv-list li.active { background: var(--panel-2); }
@media (hover: hover) { :root[data-skin="classique"] #conv-list li:hover { background: var(--panel-2); } }
:root[data-skin="classique"] #conv-list li > .avatar { width: 52px; height: 52px; font-size: 1.1rem; }
:root[data-skin="classique"] #conv-list .conv-text { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 14px 0; }
/* Liste des discussions : pas de trait entre les lignes (maquette Figma) — l’espacement suffit */
:root[data-skin="classique"] .conv-text strong { font-size: 1rem; font-weight: 600; }
:root[data-skin="classique"] .conv-text small { font-size: .9375rem; margin-top: 2px; }
:root[data-skin="classique"] #conv-list li:has(.badge) strong { font-weight: 800; }
:root[data-skin="classique"] #conv-list li:has(.badge) .conv-text small { color: var(--text); }
:root[data-skin="classique"] .typing-text { color: var(--accent) !important; font-weight: 600; }
:root[data-skin="classique"] .badge { background: var(--accent); color: var(--accent-text); }
/* Onglets du bas : icônes au trait, indicateur en pilule sarcelle douce */
:root[data-skin="classique"] #home-tabs { background: var(--panel); border-top: 1px solid var(--line); }
:root[data-skin="classique"] #home-tabs button { color: var(--muted); font-weight: 500; font-size: .8125rem; }
:root[data-skin="classique"] #home-tabs button.on { color: var(--text); font-weight: 700; }
:root[data-skin="classique"] #home-tabs .ht-ico { width: 64px; height: 32px; font-size: 0; color: var(--muted); }
:root[data-skin="classique"] #home-tabs button.on .ht-ico { background: var(--accent-doux); color: var(--accent); }
:root[data-skin="classique"] #home-tabs .ht-ico::before { width: 24px; height: 24px; }
/* ---------- Accueil Classique : la couche de finition (maquette Figma « 32b », validée le 16 octobre) ---------- */
/* 1 · en-tête sur une ligne : la photo, « Discussions » en grand, ⋮ — même couleur que la barre d'état, sans trait */
:root[data-skin="classique"] #sidebar > header.bar:not(#activity .bar) { gap: 12px; padding: calc(10px + var(--sat)) 12px 10px 16px; background: var(--bg); border: 0; box-shadow: none; } /* (le « :not » : plus fort que la règle générale des barres) */
:root[data-skin="classique"] #sidebar > .bar .me { flex: none; }
:root[data-skin="classique"] #sidebar > .bar #home-title { flex: 1; min-width: 0; margin: 0; font-size: 1.75rem; line-height: 2.25rem; font-weight: 800; letter-spacing: -.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* fond de l'accueil : le beige de la barre d'état, sous l'en-tête comme sous la liste (cartes blanches dessus) */
:root[data-skin="classique"] #sidebar { background: var(--bg); }
/* 2 · recherche : une pilule plus fine et plus claire */
:root[data-skin="classique"] #conv-search-box { margin: 4px 16px 16px; }
:root[data-skin="classique"] #conv-search { height: 44px; border-radius: 22px; background: color-mix(in srgb, var(--panel-2) 75%, var(--bg)); }
/* 3 · « Aujourd'hui » : carte plate, deux lignes, « et 1 autre » et une flèche */
:root[data-skin="classique"] #today-card { margin: 0 16px 8px; padding: 12px 10px 12px 14px; gap: 12px; box-shadow: none; }
:root[data-skin="classique"] #today-card .today-ico { width: 36px; height: 36px; border-radius: 10px; }
:root[data-skin="classique"] #today-card .today-ico::before { inset: 8px; }
:root[data-skin="classique"] #today-card .today-what { font-size: 1rem; font-weight: 600; }
:root[data-skin="classique"] #today-card .today-more { color: var(--muted); font-weight: 600; }
:root[data-skin="classique"] #today-card .today-go { width: 20px; height: 20px; font-size: 0; background-color: var(--muted); -webkit-mask: url("/themes/classique/icones/chevron.svg") center / contain no-repeat; mask: url("/themes/classique/icones/chevron.svg") center / contain no-repeat; }
/* 4 · 5 · liste : le nom d'abord, l'aperçu plus petit ; l'heure sur la ligne du nom, le nombre de non-lus dessous */
:root[data-skin="classique"] #conv-list li { min-height: 72px; }
:root[data-skin="classique"] #conv-list strong { font-size: 1rem; font-weight: 600; }
:root[data-skin="classique"] #conv-list li:has(.badge) strong { font-weight: 700; }
:root[data-skin="classique"] #conv-list .conv-text small { font-size: .875rem; color: var(--muted); }
:root[data-skin="classique"] #conv-list .conv-meta { justify-content: flex-start; gap: 6px; padding-top: 17px; }
:root[data-skin="classique"] #conv-list .conv-time { font-size: .78rem; font-weight: 500; color: var(--muted); }
:root[data-skin="classique"] #conv-list .conv-time.unread { color: var(--accent); font-weight: 700; }
/* 6 · coches et « Appel manqué » dessinés, avec un espace avant le texte ; l'appel manqué en rouge */
:root[data-skin="classique"] #conv-list small .ticks { display: inline-block; width: 16px; height: 16px; margin: 0 4px 0 0; vertical-align: -3px; overflow: hidden; font-size: 0; letter-spacing: 0; background-color: var(--muted); -webkit-mask: url("/themes/classique/icones/lu.svg") center / contain no-repeat; mask: url("/themes/classique/icones/lu.svg") center / contain no-repeat; }
:root[data-skin="classique"] #conv-list small .ticks.sent { -webkit-mask-image: url("/themes/classique/icones/coche.svg"); mask-image: url("/themes/classique/icones/coche.svg"); }
/* ✓✓ « lu » bleu dans la liste aussi, comme dans la discussion (décidé le 8 octobre, perdu avec l'accueil 32b le 16, redemandé le 18) */
:root[data-skin="classique"] #conv-list small .ticks.read { background-color: #34b7f1; }
:root[data-skin="classique"] #conv-list small.missed { color: var(--danger); }
/* 7 · onglets : libellés plus petits */
:root[data-skin="classique"] #home-tabs button { font-size: .75rem; }
/* ---------- Finitions avant le Play Store (maquette Figma « 33 », validée le 16 octobre) ---------- */
/* 33b · Agenda : « Aujourd'hui » rond dans l'en-tête (point sarcelle), « + » flottant, « Tous » dans la barre du mois,
   plus de rangée de boutons au-dessus du mois */
:root[data-skin="classique"] [data-orga="agenda"] > .cal-tools { display: none; }
:root[data-skin="classique"] #sidebar > header.bar #cal-today { display: none; position: relative; flex: none; width: 36px; height: 36px; margin-right: 2px; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--text); font-size: 0; align-items: center; justify-content: center; cursor: pointer; }
:root[data-skin="classique"] #sidebar[data-tab="agenda"] > header.bar #cal-today { display: inline-flex; }
:root[data-skin="classique"] #sidebar > header.bar #cal-today::before { content: ""; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url("/themes/classique/icones/agenda.svg") center / contain no-repeat; mask: url("/themes/classique/icones/agenda.svg") center / contain no-repeat; }
:root[data-skin="classique"] #sidebar > header.bar #cal-today .ce { display: none; }
:root[data-skin="classique"] #orga-pane > #cal-new { position: absolute; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 4; display: none; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 0; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); cursor: pointer; }
:root[data-skin="classique"] #sidebar[data-tab="agenda"] #orga-pane > #cal-new { display: inline-flex; }
:root[data-skin="classique"] #orga-pane:has(.orga-over:not(.hidden), #cal-sheet:not(.hidden), #orga-events:not(.hidden)) > #cal-new { display: none; }
:root[data-skin="classique"] #orga-pane > #cal-new::before { content: ""; width: 24px; height: 24px; background-color: currentColor; -webkit-mask: url("/themes/classique/icones/plus.svg") center / contain no-repeat; mask: url("/themes/classique/icones/plus.svg") center / contain no-repeat; }
:root[data-skin="classique"] #orga-pane > #cal-new .ce { display: none; }
:root[data-skin="classique"] .cal-head { gap: 6px; padding: 0 6px; }
:root[data-skin="classique"] .cal-head .cal-title { font-size: 1.125rem; }
:root[data-skin="classique"] .cal-head :is(.icon-btn, #cal-all) { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--muted); }
:root[data-skin="classique"] .cal-head .cal-nav { color: var(--text); font-size: 1.4rem; }
:root[data-skin="classique"] .cal-head #cal-all { display: inline-flex; align-items: center; justify-content: center; font-size: 0; cursor: pointer; }
:root[data-skin="classique"] .cal-head #cal-all.on { background: var(--accent-doux); color: var(--accent); }
:root[data-skin="classique"] .cal-head #cal-all::before { content: ""; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url("/themes/classique/icones/liste.svg") center / contain no-repeat; mask: url("/themes/classique/icones/liste.svg") center / contain no-repeat; }
:root[data-skin="classique"] .cal-head #cal-all .ce { display: none; }
:root[data-skin="classique"] #orga-events > .cal-head { margin: 4px 10px 8px; }
/* 33j · le menu ⋮ de l'en-tête, sur l'onglet Agenda : Tout ce qui arrive, Calendriers liés, Plannings de travail */
#home-menu .agenda-only { display: none; }
#home-menu.on-agenda .agenda-only { display: block; }
#home-menu hr.agenda-only { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
/* 33f · Famille : « notifications désactivées » discret ; les actions en pilules de texte */
.member-meta .app-version.off { color: var(--muted); }
/* 33h · Nouvel événement : « Début » et « Fin » sur deux pilules lisibles (plus de champ tronqué) */
:root[data-skin="classique"] .ev-edit .ev-lab { width: 50px; }
:root[data-skin="classique"] .ev-edit .ev-row input[type=date] { min-width: 140px; height: 48px; padding-inline: 12px; font-weight: 600; }
:root[data-skin="classique"] .ev-edit .ev-row input[type=time] { width: 100px; height: 48px; font-weight: 600; text-align: center; }
/* 8 · barre de navigation du téléphone (en bas) : la couleur des onglets */
:root[data-skin="classique"] { --foot-solid: #FFFFFF; }
/* Nuit : onglets en noir OLED, barre du bas aussi ; la recherche garde son gris #1C2225 (sur le noir, le mélange l'effacerait) */
:root[data-skin="classique"][data-theme="dark"] { --foot-solid: #000000; }
:root[data-skin="classique"][data-theme="dark"] #conv-search { background: var(--panel-2); }
@media (prefers-color-scheme: dark) { :root[data-skin="classique"]:not([data-theme="light"]) { --foot-solid: #000000; } :root[data-skin="classique"]:not([data-theme="light"]) #conv-search { background: var(--panel-2); } }
:root[data-skin="classique"] [data-home-tab="chats"] .ht-ico { --ic: url("/themes/classique/icones/discussions.svg"); }
:root[data-skin="classique"] [data-home-tab="agenda"] .ht-ico { --ic: url("/themes/classique/icones/agenda.svg"); }
:root[data-skin="classique"] [data-home-tab="tasks"] .ht-ico { --ic: url("/themes/classique/icones/taches.svg"); }
:root[data-skin="classique"] .ht-badge { background: var(--accent); color: var(--accent-text); }
/* Conversation : bulles reçues blanches (filet + ombre douce), les miennes en sarcelle douce ; coin de 6 px côté expéditeur */
:root[data-skin="classique"] .bubble:not(.media) { border-radius: 20px 20px 20px 6px; box-shadow: var(--elev1); }
:root[data-skin="classique"] .msg.theirs .bubble:not(.media) { border: 1px solid var(--line); }
:root[data-skin="classique"] .msg.mine .bubble:not(.media) { border-radius: 20px 20px 6px 20px; box-shadow: none; }
:root[data-skin="classique"] .msg.system .bubble { border: 0; box-shadow: none; }
:root[data-skin="classique"] .bubble { font-size: 1rem; line-height: 1.375; }
/* ✓✓ « lu » : bleu comme partout (et comme dans « Infos du message »), pas la couleur de l’appli : vert sur bulle verte se voyait mal */
/* Jours, appels et résumés du journal : une même pastille grise, en minuscules, avec les icônes du thème (maquette
   « 71c », 27 octobre : le style qu'Android leur donnait, choisi pour la page et donc pour Android) */
:root[data-skin="classique"] { --note-fs: .6875rem; --note-fw: 600; --note-lh: 1.3; --note-pad: 4px 12px; --note-r: 999px; --note-my: 2px; --note-ico: 12px; }
:root[data-skin="classique"] :is(.day, .msg.system .bubble:not(.activity-card), .journal-head) {
  padding: var(--note-pad); border: 0; border-radius: var(--note-r); background: var(--panel-2); color: var(--muted);
  font-size: var(--note-fs); font-weight: var(--note-fw); line-height: var(--note-lh);
}
:root[data-skin="classique"] :is(.msg.system, .journal-head) { margin: var(--note-my) 0; }
:root[data-skin="classique"] :is(.day, .msg.system .bubble:not(.activity-card), .journal-head) .ce { width: var(--note-ico); height: var(--note-ico); }
/* Activité (maquette « 72f ») : la même pastille, sur deux lignes — l'icône de l'activité, ce qui s'est passé et
   « terminé », puis le titre de la vidéo ; « Rejoindre » dessous tant qu'elle est en cours */
:root[data-skin="classique"] { --act-r: 14px; --act-pad: 5px 12px; --act-gap: 2px; --act-join-gap: 5px; }
:root[data-skin="classique"] .msg.system .bubble.activity-card {
  justify-content: center; column-gap: 0; row-gap: var(--act-gap); padding: var(--act-pad); border: 0; border-radius: var(--act-r);
  background: var(--panel-2); color: var(--muted); font-size: var(--note-fs); line-height: var(--note-lh); box-shadow: none;
}
:root[data-skin="classique"] .activity-card .act-line { font-weight: var(--note-fw); }
:root[data-skin="classique"] .activity-card .ended { order: 1; color: inherit; font-size: inherit; font-weight: var(--note-fw); }
.activity-card .ended .sep { display: none; }
:root[data-skin="classique"] .activity-card .ended .sep { display: inline; white-space: pre; }
:root[data-skin="classique"] .activity-card .act-title { order: 2; color: inherit; font-size: inherit; }
:root[data-skin="classique"] .activity-card .join { order: 3; margin-top: var(--act-join-gap); }
:root[data-skin="classique"] .activity-card .act-line .ce { width: var(--note-ico); height: var(--note-ico); }
/* Barre d'écriture : + dans un rond, champ en pilule, micro ; envoyer = rond sarcelle */
:root[data-skin="classique"] .composer { background: var(--panel); border-top: 1px solid var(--line); }
:root[data-skin="classique"] .composer textarea { background: var(--panel-2); border: 0; border-radius: 22px; padding: 11px 16px; }
/* Boutons : coins de 12 px, 44 px de haut */
:root[data-skin="classique"] .btn { border-radius: 12px; font-weight: 600; min-height: 44px; }
:root[data-skin="classique"] .btn.small { min-height: 36px; border-radius: 10px; }
:root[data-skin="classique"] .btn.primary { background: var(--accent); color: var(--accent-text); }
:root[data-skin="classique"] .btn:not(.primary):not(.danger-fill):not(.ghost) { background: var(--panel-2); color: var(--text); }
/* Fenêtres : coins de 28 px, ombre de niveau 2 */
:root[data-skin="classique"] dialog:not(.menu-dialog) { background: var(--bg); border-radius: 28px; box-shadow: var(--elev2); }
:root[data-skin="classique"] dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not(#conv-search), textarea, select) { background: var(--panel-2); border: 1px solid transparent; border-radius: 12px; }
/* Réglages : fenêtre centrée (comme avant), coins de 28 px — maquette Figma « 4 · Réglages » mise à jour */
:root[data-skin="classique"] .game-choice { background: var(--panel); box-shadow: var(--elev1); }
/* Lignes « Dictée » et « YouTube ensemble » : chevron au trait à droite (maquette « 11 ») */
:root[data-skin="classique"] .games-grid .dictee-choice b { flex: 1; }
:root[data-skin="classique"] .games-grid .dictee-choice::after { content: ""; flex: none; width: 18px; height: 18px; background-color: var(--muted); -webkit-mask: url("/themes/classique/icones/chevron.svg") center / contain no-repeat; mask: url("/themes/classique/icones/chevron.svg") center / contain no-repeat; }
/* Nuit : une fenêtre noire sur une page noire ne se voyait pas (bords invisibles, texte qui « flotte ») ; elle passe
   un cran au-dessus de la page, avec un trait, et ses cases encore un cran au-dessus (comme les menus) */
/* (la couleur « carte » monte d'un cran à l'intérieur de la fenêtre : cases, textes, champs suivent tout seuls) */
:root[data-skin="classique"][data-theme="dark"] dialog:not(.menu-dialog) { background: #121618; border: 1px solid #262D30; --bg: #121618; --panel: #1C2225; --panel-2: #262D30; --line: #303A3E; }
@media (prefers-color-scheme: dark) {
  :root[data-skin="classique"]:not([data-theme="light"]) dialog:not(.menu-dialog) { background: #121618; border: 1px solid #262D30; --bg: #121618; --panel: #1C2225; --panel-2: #262D30; --line: #303A3E; }
}
:root[data-skin="classique"] dialog.menu-dialog { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--elev2); }
/* Réglages → Famille : une cellule blanche par personne (sur la feuille couleur fond, elles ne se voyaient plus) */
/* Famille (maquette « 36a ») : une seule carte, une ligne par personne, la flèche ouvre sa fiche */
:root[data-skin="classique"] #members-list { gap: 0; }
:root[data-skin="classique"] #members-list li.member-card { background: var(--panel); border: 1px solid var(--line); border-top-width: 0; border-radius: 0; padding: 12px 14px; grid-template-columns: 46px minmax(0, 1fr) auto; }
:root[data-skin="classique"] #members-list li.member-card.first { border-top-width: 1px; border-radius: 18px 18px 0 0; }
:root[data-skin="classique"] #members-list li.member-card.last { border-radius: 0 0 18px 18px; box-shadow: var(--elev1); }
:root[data-skin="classique"] #members-list li.member-card.first.last { border-radius: 18px; }
:root[data-skin="classique"] #members-list li.member-card:not(.first) { box-shadow: inset 0 1px 0 var(--line); }
:root[data-skin="classique"] #members-list li.member-card .avatar { width: 46px; height: 46px; }
:root[data-skin="classique"] #members-list .members-title:not(:first-child) { margin-top: 16px; }
:root[data-skin="classique"] #members-list .member-meta { font-size: .8125rem; }
:root[data-skin="classique"] dialog.menu-dialog button { font-size: .9375rem; padding: 12px 22px 12px 16px; }
:root[data-skin="classique"] dialog.menu-dialog .emo[data-ico] { width: 20px; height: 20px; margin-right: 10px; vertical-align: -5px; }
/* Tâches et agenda : cartes blanches, étoiles dorées */
:root[data-skin="classique"] :is(.task-card, .kid-card, .orga-hero, .orga-tile) { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--elev1); color: var(--text); }
:root[data-skin="classique"] .task-card { border-left-width: 1px; }
:root[data-skin="classique"] :is(.task-card.check, .task-card.waiting) { border-color: var(--accent); }
:root[data-skin="classique"] .kid-card.on { box-shadow: 0 0 0 2px var(--accent); }
:root[data-skin="classique"] .task-pts { background: var(--panel-2); color: var(--text); }
:root[data-skin="classique"] .orga-tile:first-child { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
:root[data-skin="classique"] .cal-tools button { background: var(--panel-2); }
:root[data-skin="classique"] .cal-tools button.on { background: var(--accent-doux); color: var(--accent); }

/* Classique : champs actifs cerclés de sarcelle (plus de contour noir) */
:root[data-skin="classique"] :is(input, textarea, select):focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--accent); }
/* Réglages : une liste groupée sur une carte blanche, tuiles d'icône sarcelle, chevron au trait */
:root[data-skin="classique"] .settings-menu { gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--elev1); }
:root[data-skin="classique"] .settings-menu button { border-radius: 0; border-bottom: 1px solid var(--line); }
:root[data-skin="classique"] .settings-menu button:last-child { border-bottom: 0; }
:root[data-skin="classique"] .settings-menu button:hover { background: var(--panel-2); }
:root[data-skin="classique"] .settings-menu .ico { position: relative; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--accent-doux); font-size: 0; }
:root[data-skin="classique"] .settings-menu .ico::before { content: ""; position: absolute; inset: 7px; background-color: var(--accent); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
:root[data-skin="classique"] .settings-menu .txt b { font-weight: 600; }
:root[data-skin="classique"] .settings-menu .chev { width: 18px; height: 18px; font-size: 0; background-color: var(--muted); -webkit-mask: url("/themes/classique/icones/chevron.svg") center / contain no-repeat; mask: url("/themes/classique/icones/chevron.svg") center / contain no-repeat; }
/* Sous-pages des Réglages (Mon compte, Notifications, À propos, Confidentialité) : cellules blanches sur le fond,
   comme le menu (maquette Figma « 4b–4e ») ; ailleurs que dans Classique, les groupes ne changent rien */
.set-group:not(.row) { display: contents; }
.set-ico { display: none; }
:root[data-skin="classique"] .set-group { display: grid; gap: 0; margin: 4px 0 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--elev1); }
:root[data-skin="classique"] .set-group > :is(.btn, p):not(.primary) { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; margin: 0; padding: 0 14px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text); font: inherit; font-size: 15px; font-weight: 500; text-align: left; justify-content: flex-start; }
:root[data-skin="classique"] .set-group > :not(.hidden) ~ :not(.hidden) { border-top: 1px solid var(--line); }
:root[data-skin="classique"] .set-group > .btn:not(.primary):hover { background: var(--panel-2); }
:root[data-skin="classique"] .set-group > .btn.primary { margin: 10px 14px; justify-self: start; }
:root[data-skin="classique"] .set-group .set-ico { display: block; position: relative; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--accent-doux); }
:root[data-skin="classique"] .set-group .set-ico::before { content: ""; position: absolute; inset: 7px; background-color: var(--accent); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
:root[data-skin="classique"] .set-group :is(.btn, a) .ce { display: none; } /* l'emoji d'origine : remplacé par la tuile */
:root[data-skin="classique"] .set-group > :is(.btn, p):not(.danger):not(.primary)::after { content: ""; margin-left: auto; flex: none; width: 18px; height: 18px; background-color: var(--muted); -webkit-mask: url("/themes/classique/icones/chevron.svg") center / contain no-repeat; mask: url("/themes/classique/icones/chevron.svg") center / contain no-repeat; }
:root[data-skin="classique"] .set-group > .btn.danger:not(.primary) { color: var(--danger, #c2362c); font-weight: 600; }
:root[data-skin="classique"] .set-group > .danger .set-ico { background: color-mix(in srgb, var(--danger, #c2362c) 12%, var(--panel)); }
:root[data-skin="classique"] .set-group > .danger .set-ico::before { background-color: var(--danger, #c2362c); }
:root[data-skin="classique"] #settings-dialog .set-group.set-links > p > a { display: flex; align-items: center; gap: 14px; flex: 1; color: var(--text); text-decoration: none; }
:root[data-skin="classique"] .settings-panel .about-text { padding: 14px 16px 4px; margin-bottom: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--elev1); }
:root[data-skin="classique"] .settings-panel .don-btn { min-height: 56px; padding: 0 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--elev1); }
:root[data-skin="classique"] [data-panel-open="compte"] .ico { --ic: url("/themes/classique/icones/profil.svg"); }
:root[data-skin="classique"] [data-panel-open="famille"] .ico { --ic: url("/themes/classique/icones/groupe.svg"); }
:root[data-skin="classique"] [data-panel-open="notifs"] .ico { --ic: url("/themes/classique/icones/cloche.svg"); }
:root[data-skin="classique"] [data-panel-open="apparence"] .ico { --ic: url("/themes/classique/icones/theme.svg"); }
:root[data-skin="classique"] [data-panel-open="stockage"] .ico { --ic: url("/themes/classique/icones/stockage.svg"); }
:root[data-skin="classique"] [data-panel-open="telephone"] .ico { --ic: url("/themes/classique/icones/stockage.svg"); }
:root[data-skin="classique"] [data-panel-open="apropos"] .ico { --ic: url("/themes/classique/icones/info.svg"); }
:root[data-skin="classique"] [data-panel-open="confidentialite"] .ico { --ic: url("/themes/classique/icones/bouclier.svg"); }
:root[data-skin="classique"] #menu-rate .ico { --ic: url("/themes/classique/icones/etoile.svg"); }
:root[data-skin="classique"] #menu-recommend .ico { --ic: url("/themes/classique/icones/partager.svg"); }
/* Tâches : tuiles d'ajout avec icônes au trait */
:root[data-skin="classique"] .orga-tile span { width: 28px; height: 28px; font-size: 0; background-color: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
:root[data-skin="classique"] .orga-tile:not(:first-child) span { background-color: var(--accent); }
:root[data-skin="classique"] [data-orga-form="task"] span { --ic: url("/themes/classique/icones/joindre.svg"); }
:root[data-skin="classique"] [data-orga-form="goal"] span { --ic: url("/themes/classique/icones/etoile.svg"); }
:root[data-skin="classique"] [data-orga-form="reward"] span { --ic: url("/themes/classique/icones/taches.svg"); }

/* ---------- Liste : heure du dernier message et pastille, à droite (l'heure : thème Classique) ---------- */
.conv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.conv-meta:empty { display: none; }
.conv-time { display: none; font-size: .6875rem; font-weight: 600; color: var(--muted); }
:root[data-skin="classique"] .conv-time { display: block; }
:root[data-skin="classique"] .conv-time.unread { color: var(--accent); }
:root[data-skin="classique"] #conv-list li { align-items: stretch; }
:root[data-skin="classique"] #conv-list li > .avatar { align-self: center; }
:root[data-skin="classique"] #conv-list .conv-meta { justify-content: center; margin-left: -14px; padding: 14px 0 14px 10px; }
/* ---------- Rendez-vous partagé dans une discussion (tous les thèmes ; maquette « 72b ») ----------
   Une carte dans la bulle, comme un aperçu de lien : une page de calendrier (mois en bandeau, jour en grand, jour de la
   semaine), le titre, l'heure, le jour (« demain », « dans 2 jours »), puis « Voir dans l'agenda › » sur toute la
   largeur. Carte blanche dans ma bulle, crème dans une bulle reçue */
:root { --ev-pad: 6px; --ev-w: 258px; --ev-r: 14px; --ev-in: 12px; --ev-cal-w: 52px; --ev-cal-h: 58px; --ev-cal-r: 10px; --ev-ico: 14px; --ev-go-ico: 18px; --ev-go-chev: 16px; }
.bubble.event-msg { padding: var(--ev-pad); }
.ev-msg { display: grid; width: var(--ev-w); max-width: 100%; border-radius: var(--ev-r); background: var(--panel); overflow: hidden; }
.msg.theirs .ev-msg { background: var(--bg); }
.ev-msg-top { display: flex; align-items: center; gap: var(--ev-in); padding: var(--ev-in); }
.ev-cal { display: grid; grid-template-rows: auto 1fr; box-sizing: border-box; width: var(--ev-cal-w); height: var(--ev-cal-h); flex: none; border: 1px solid var(--line); border-radius: var(--ev-cal-r); overflow: hidden; background: var(--panel); text-align: center; line-height: 1; }
.ev-cal-m { padding: 3px 0; background: var(--accent); color: var(--accent-text); font-size: .625rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.ev-cal-d { display: grid; place-content: center; gap: 2px; }
.ev-cal-d strong { color: var(--text); font-size: 1.25rem; font-weight: 700; }
.ev-cal-d small { color: var(--muted); font-size: .5625rem; font-weight: 700; text-transform: uppercase; }
.ev-msg-txt { display: grid; gap: 4px; min-width: 0; }
.ev-msg-txt strong { color: var(--text); font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.ev-msg-row { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .8125rem; }
.ev-msg-go { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; padding: 11px var(--ev-in); border: 0; border-top: 1px solid var(--line); background: none; color: var(--accent); font: inherit; font-size: .875rem; font-weight: 600; text-align: left; cursor: pointer; }
.ev-msg-go .lbl { flex: 1; }
:root[data-skin="classique"] .ev-msg .ce { flex: none; width: var(--ev-ico); height: var(--ev-ico); vertical-align: 0; }
:root[data-skin="classique"] .ev-msg-go .ce { width: var(--ev-go-ico); height: var(--ev-go-ico); }
:root[data-skin="classique"] .ev-msg-go .ce[data-c="chevron"] { width: var(--ev-go-chev); height: var(--ev-go-chev); }
/* ---------- Message vocal : onde (thème Classique ; les autres gardent la barre) ---------- */
.voice-wave { display: none; }
:root[data-skin="classique"] .voice-track { background: none; height: 28px; display: flex; align-items: center; }
:root[data-skin="classique"] .voice-fill { display: none; }
:root[data-skin="classique"] .voice-wave { display: flex; align-items: center; gap: 2px; width: 100%; height: 100%; }
:root[data-skin="classique"] .voice-wave i { flex: 1; height: 30%; min-height: 3px; border-radius: 2px; background: var(--muted); opacity: .45; transition: height .2s; }
:root[data-skin="classique"] .voice-wave i.on { background: var(--accent); opacity: 1; }
/* Liste dessinée par Android (nl-on) : les barres ne s'animent pas ; la page est cachée et chaque image de l'animation
   faisait redécrire la bulle à Android, qui redessinait sa liste 3 à 4 fois (journal du 30 octobre : « voice draw ») */
:root[data-skin="classique"] #messages.nl-on .voice-wave i { transition: none; }
:root[data-skin="classique"] .voice-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-text); }
/* ---------- Tâches (thème Classique) : enfants en filtres, À vérifier, Cagnottes, À faire ; « Nouvelle tâche » flottant ---------- */
:root[data-skin="classique"] section[data-orga="tasks"]:not(.hidden) { display: flex; flex-direction: column; gap: 10px; padding-bottom: 96px; }
:root[data-skin="classique"] #orga-kids { order: 1; display: flex; flex-wrap: wrap; gap: 8px; }
:root[data-skin="classique"] #orga-points { order: 2; }
:root[data-skin="classique"] #orga-check { order: 3; }
:root[data-skin="classique"] #orga-tasks-title { order: 4; }
:root[data-skin="classique"] #orga-tasks { order: 5; }
:root[data-skin="classique"] #orga-goals-title { order: 6; }
:root[data-skin="classique"] #orga-goals { order: 7; }
:root[data-skin="classique"] .orga-add-btn { order: 8; }
:root[data-skin="classique"] #orga-done { order: 9; }
:root[data-skin="classique"] #orga-rewards-title { order: 9; }
:root[data-skin="classique"] #orga-rewards { order: 10; }
:root[data-skin="classique"] .orga-actions { order: 11; }
:root[data-skin="classique"] .orga-h { margin: 8px 0 0; font-size: 1.125rem; font-weight: 700; }
:root[data-skin="classique"] .orga-kids .kid-card { flex-direction: row; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; box-shadow: none; }
:root[data-skin="classique"] .orga-kids .kid-av { width: 28px; height: 28px; font-size: .75rem; }
:root[data-skin="classique"] .orga-kids .kid-txt { display: flex; align-items: center; gap: 6px; }
:root[data-skin="classique"] .orga-kids .kid-name { font-size: .9375rem; font-weight: 600; }
:root[data-skin="classique"] .orga-kids .kid-stars { font-size: .8125rem; font-weight: 600; color: var(--muted); }
:root[data-skin="classique"] .orga-kids .kid-sub, :root[data-skin="classique"] .orga-kids .kid-hint { display: none; }
:root[data-skin="classique"] .orga-kids .kid-card.on { background: var(--accent-doux); border-color: var(--accent); box-shadow: none; }
:root[data-skin="classique"] .orga-actions { display: flex; gap: 8px; margin-top: 4px; }
:root[data-skin="classique"] .orga-actions .orga-tile { flex: 1; padding: 10px 6px; font-size: .875rem; }
:root[data-skin="classique"] .orga-actions .orga-tile:first-child { position: fixed; z-index: 4; right: 16px; bottom: calc(100px + env(safe-area-inset-bottom)); flex: none; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 16px; border-radius: 16px; box-shadow: var(--elev2); font-size: .9375rem; }
:root[data-skin="classique"] .orga-actions .orga-tile:first-child span { width: 22px; height: 22px; }
:root[data-skin="classique"] .orga-actions .orga-tile:first-child { font-size: 0; }
:root[data-skin="classique"] .orga-actions .orga-tile:first-child::after { content: "Nouvelle tâche"; font-size: .9375rem; font-weight: 600; }
:root[data-skin="classique"] .goal-bar { height: 8px; border-radius: 4px; background: var(--panel-2); }
:root[data-skin="classique"] .goal-fill { background: var(--accent); border-radius: 4px; }
/* Cartes à glisser (parents) : même arrondi que la carte, et le fond rouge « Supprimer » ne dépasse pas aux coins */
:root[data-skin="classique"] .plain-list li.swipe-row { border-radius: 16px; }
:root[data-skin="classique"] .swipe-bg { inset: 1px; border-radius: 15px; }
:root[data-skin="classique"] .swipe-card.orga-item.goal { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--elev1); }
:root[data-skin="classique"] #orga-rewards-title .emo { --emo: url("/themes/classique/icones/taches.svg"); }

/* ---------- Stockage (administrateur) : tuiles de chiffres et une carte par famille ---------- */
#storage-info { display: grid; gap: 10px; color: var(--text); }
.by-type { display: grid; gap: 6px; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; list-style: none; }
#owner-families-list li.stat-tiles { display: grid; padding: 0; margin-bottom: 4px; }
.stat-tile { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.stat-tile strong { order: -1; font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-tile span { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#owner-families-list { display: grid; gap: 8px; }
#owner-families-list li.fam-card { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
#owner-families-list li.fam-card.idle { opacity: .7; }
.fam-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.fam-name { font-size: 1rem; overflow-wrap: anywhere; margin-right: auto; }
.fam-chip { padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); white-space: nowrap; }
.fam-chip.kid { background: #fff0b8; color: #7a5a00; }
.fam-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fam-facts div { display: grid; gap: 1px; min-width: 0; }
.fam-facts span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fam-facts strong { font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-skin="classique"] :is(.stat-tile, #owner-families-list li.fam-card) { box-shadow: var(--elev1); border-radius: 16px; }

/* ---------- Thème Classique : emojis de l'interface remplacés par les icônes de la charte (voir CE_ICONS, app.js) ---------- */
:root[data-skin="classique"] .ce { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; overflow: hidden; text-indent: 3em; white-space: nowrap; color: inherit; background-color: currentColor; -webkit-mask: var(--ce) center / contain no-repeat; mask: var(--ce) center / contain no-repeat; }
:root[data-skin="classique"] .ce + .ce { margin-left: .15em; }
:root[data-skin="classique"] .ce-off { display: none; }
:root[data-skin="classique"] .ce[data-c="etoile"] { background-color: var(--or); }
:root[data-skin="classique"] :is(.ce[data-c="corbeille"], .ce[data-c="interdit"], .ce[data-c="drapeau"]):where(.danger *, .member-del *) { background-color: var(--danger); }
:root[data-skin="classique"] .muted .ce, :root[data-skin="classique"] .member-meta .ce { opacity: .9; }
:root[data-skin="classique"] .avatar .ce { width: 55%; height: 55%; vertical-align: middle; }
:root[data-skin="classique"] .ce[data-c="agenda"] { --ce: url("/themes/classique/icones/agenda.svg"); }
:root[data-skin="classique"] .ce[data-c="alerte"] { --ce: url("/themes/classique/icones/alerte.svg"); }
:root[data-skin="classique"] .ce[data-c="ampoule"] { --ce: url("/themes/classique/icones/ampoule.svg"); }
:root[data-skin="classique"] .ce[data-c="appareil"] { --ce: url("/themes/classique/icones/appareil.svg"); }
:root[data-skin="classique"] .ce[data-c="bateau"] { --ce: url("/themes/classique/icones/bateau.svg"); }
:root[data-skin="classique"] .ce[data-c="bouclier"] { --ce: url("/themes/classique/icones/bouclier.svg"); }
:root[data-skin="classique"] .ce[data-c="cadeau"] { --ce: url("/themes/classique/icones/cadeau.svg"); }
:root[data-skin="classique"] .ce[data-c="cadenas"] { --ce: url("/themes/classique/icones/cadenas.svg"); }
:root[data-skin="classique"] .ce[data-c="cartable"] { --ce: url("/themes/classique/icones/cartable.svg"); }
:root[data-skin="classique"] .ce[data-c="chevron"] { --ce: url("/themes/classique/icones/chevron.svg"); }
:root[data-skin="classique"] .ce[data-c="cle"] { --ce: url("/themes/classique/icones/cle.svg"); }
:root[data-skin="classique"] .ce[data-c="cloche"] { --ce: url("/themes/classique/icones/cloche.svg"); }
:root[data-skin="classique"] .ce[data-c="cloche-barree"] { --ce: url("/themes/classique/icones/cloche-barree.svg"); }
:root[data-skin="classique"] .ce[data-c="coeur"] { --ce: url("/themes/classique/icones/coeur.svg"); }
:root[data-skin="classique"] .ce[data-c="copier"] { --ce: url("/themes/classique/icones/copier.svg"); }
:root[data-skin="classique"] .ce[data-c="corbeille"] { --ce: url("/themes/classique/icones/corbeille.svg"); }
:root[data-skin="classique"] .ce[data-c="crayon"] { --ce: url("/themes/classique/icones/crayon.svg"); }
:root[data-skin="classique"] .ce[data-c="discussions"] { --ce: url("/themes/classique/icones/discussions.svg"); }
:root[data-skin="classique"] .ce[data-c="document"] { --ce: url("/themes/classique/icones/document.svg"); }
:root[data-skin="classique"] .ce[data-c="drapeau"] { --ce: url("/themes/classique/icones/drapeau.svg"); }
:root[data-skin="classique"] .ce[data-c="ecran"] { --ce: url("/themes/classique/icones/ecran.svg"); }
:root[data-skin="classique"] .ce[data-c="enveloppe"] { --ce: url("/themes/classique/icones/enveloppe.svg"); }
:root[data-skin="classique"] .ce[data-c="envoyer"] { --ce: url("/themes/classique/icones/envoyer.svg"); }
:root[data-skin="classique"] .ce[data-c="etoile"] { --ce: url("/themes/classique/icones/etoile.svg"); }
:root[data-skin="classique"] .ce[data-c="groupe"] { --ce: url("/themes/classique/icones/groupe.svg"); }
:root[data-skin="classique"] .ce[data-c="haut-parleur"] { --ce: url("/themes/classique/icones/haut-parleur.svg"); }
:root[data-skin="classique"] .ce[data-c="horloge"] { --ce: url("/themes/classique/icones/horloge.svg"); }
:root[data-skin="classique"] .ce[data-c="info"] { --ce: url("/themes/classique/icones/info.svg"); }
:root[data-skin="classique"] .ce[data-c="interdit"] { --ce: url("/themes/classique/icones/interdit.svg"); }
:root[data-skin="classique"] .ce[data-c="partager"] { --ce: url("/themes/classique/icones/partager.svg"); }
:root[data-skin="classique"] .ce[data-c="jeux"] { --ce: url("/themes/classique/icones/jeux.svg"); }
:root[data-skin="classique"] .ce[data-c="joindre"] { --ce: url("/themes/classique/icones/joindre.svg"); }
:root[data-skin="classique"] .ce[data-c="lecture"] { --ce: url("/themes/classique/icones/lecture.svg"); }
:root[data-skin="classique"] .ce[data-c="lecture-video"] { --ce: url("/themes/classique/icones/lecture-video.svg"); }
:root[data-skin="classique"] .ce[data-c="lien"] { --ce: url("/themes/classique/icones/lien.svg"); }
:root[data-skin="classique"] .ce[data-c="lieu"] { --ce: url("/themes/classique/icones/lieu.svg"); }
:root[data-skin="classique"] .ce[data-c="liste"] { --ce: url("/themes/classique/icones/liste.svg"); }
:root[data-skin="classique"] .ce[data-c="lu"] { --ce: url("/themes/classique/icones/lu.svg"); }
:root[data-skin="classique"] .ce[data-c="lune"] { --ce: url("/themes/classique/icones/lune.svg"); }
:root[data-skin="classique"] .ce[data-c="maison"] { --ce: url("/themes/classique/icones/maison.svg"); }
:root[data-skin="classique"] .ce[data-c="mallette"] { --ce: url("/themes/classique/icones/mallette.svg"); }
:root[data-skin="classique"] .ce[data-c="medias"] { --ce: url("/themes/classique/icones/medias.svg"); }
:root[data-skin="classique"] .ce[data-c="micro"] { --ce: url("/themes/classique/icones/micro.svg"); }
:root[data-skin="classique"] .ce[data-c="musique"] { --ce: url("/themes/classique/icones/musique.svg"); }
:root[data-skin="classique"] .ce[data-c="main"] { --ce: url("/themes/classique/icones/main.svg"); }
:root[data-skin="classique"] .ce[data-c="morpion"] { --ce: url("/themes/classique/icones/morpion.svg"); }
:root[data-skin="classique"] .ce[data-c="nuage"] { --ce: url("/themes/classique/icones/nuage.svg"); }
:root[data-skin="classique"] .ce[data-c="oeil"] { --ce: url("/themes/classique/icones/oeil.svg"); }
:root[data-skin="classique"] .ce[data-c="options"] { --ce: url("/themes/classique/icones/options.svg"); }
:root[data-skin="classique"] .ce[data-c="palmier"] { --ce: url("/themes/classique/icones/palmier.svg"); }
:root[data-skin="classique"] .ce[data-c="piece"] { --ce: url("/themes/classique/icones/piece.svg"); }
:root[data-skin="classique"] .ce[data-c="pinceau"] { --ce: url("/themes/classique/icones/pinceau.svg"); }
:root[data-skin="classique"] .ce[data-c="transferer"] { --ce: url("/themes/classique/icones/transferer.svg"); }
:root[data-skin="classique"] .ce[data-c="plus"] { --ce: url("/themes/classique/icones/plus.svg"); }
:root[data-skin="classique"] .ce[data-c="portable"] { --ce: url("/themes/classique/icones/portable.svg"); }
:root[data-skin="classique"] .ce[data-c="profil"] { --ce: url("/themes/classique/icones/profil.svg"); }
:root[data-skin="classique"] .ce[data-c="puissance4"] { --ce: url("/themes/classique/icones/puissance4.svg"); }
:root[data-skin="classique"] .ce[data-c="recherche"] { --ce: url("/themes/classique/icones/recherche.svg"); }
:root[data-skin="classique"] .ce[data-c="reglages"] { --ce: url("/themes/classique/icones/reglages.svg"); }
:root[data-skin="classique"] .ce[data-c="repeter"] { --ce: url("/themes/classique/icones/repeter.svg"); }
:root[data-skin="classique"] .ce[data-c="repondre"] { --ce: url("/themes/classique/icones/repondre.svg"); }
:root[data-skin="classique"] .ce[data-c="retour"] { --ce: url("/themes/classique/icones/retour.svg"); }
:root[data-skin="classique"] .ce[data-c="sablier"] { --ce: url("/themes/classique/icones/sablier.svg"); }
:root[data-skin="classique"] .ce[data-c="soleil"] { --ce: url("/themes/classique/icones/soleil.svg"); }
:root[data-skin="classique"] .ce[data-c="stockage"] { --ce: url("/themes/classique/icones/stockage.svg"); }
:root[data-skin="classique"] .ce[data-c="taches"] { --ce: url("/themes/classique/icones/taches.svg"); }
:root[data-skin="classique"] .ce[data-c="taille"] { --ce: url("/themes/classique/icones/taille.svg"); }
:root[data-skin="classique"] .ce[data-c="tasse"] { --ce: url("/themes/classique/icones/tasse.svg"); }
:root[data-skin="classique"] .ce[data-c="telecharger"] { --ce: url("/themes/classique/icones/telecharger.svg"); }
:root[data-skin="classique"] .ce[data-c="telephone"] { --ce: url("/themes/classique/icones/telephone.svg"); }
:root[data-skin="classique"] .ce[data-c="theme"] { --ce: url("/themes/classique/icones/theme.svg"); }
:root[data-skin="classique"] .ce[data-c="tirelire"] { --ce: url("/themes/classique/icones/tirelire.svg"); }
:root[data-skin="classique"] .ce[data-c="trophee"] { --ce: url("/themes/classique/icones/trophee.svg"); }
:root[data-skin="classique"] .ce[data-c="valide"] { --ce: url("/themes/classique/icones/valide.svg"); }
:root[data-skin="classique"] .ce[data-c="video"] { --ce: url("/themes/classique/icones/video.svg"); }
/* Recherche de l'accueil : une discussion écartée disparaît vraiment (sinon « display: flex » la garde à l'écran) */
#conv-list li[hidden] { display: none !important; }
#conv-search-empty { padding: 24px 16px; text-align: center; color: var(--muted); }
/* Classique Nuit, noir OLED (maquette Figma) : en-têtes, accueil, onglets et barre d'écriture sur le noir, pas sur une surface grise */
:root[data-skin="classique"][data-theme="dark"] :is(#sidebar, #sidebar header, #home-tabs, #chat header, #composer, #recorder) { background-color: #000 !important; }
@media (prefers-color-scheme: dark) {
  :root[data-skin="classique"]:not([data-theme="light"]) :is(#sidebar, #sidebar header, #home-tabs, #chat header, #composer, #recorder) { background-color: #000 !important; }
}
/* Fiches de l'agenda (rendez-vous, nouveau, modifier) sur ce noir : texte clair et crayon / ⋮ turquoise, sinon ils
   gardent la couleur prévue pour l'en-tête turquoise du mode Jour (vert presque noir) et disparaissent */
:root[data-skin="classique"][data-theme="dark"] .ev-top { color: var(--text); border-bottom: 1px solid var(--line); }
:root[data-skin="classique"][data-theme="dark"] .ev-top .icon-btn { color: var(--accent); }
:root[data-skin="classique"][data-theme="dark"] .ev-top .btn.primary { background: var(--accent); color: var(--accent-text); }
@media (prefers-color-scheme: dark) {
  :root[data-skin="classique"]:not([data-theme="light"]) .ev-top { color: var(--text); border-bottom: 1px solid var(--line); }
  :root[data-skin="classique"]:not([data-theme="light"]) .ev-top .icon-btn { color: var(--accent); }
  :root[data-skin="classique"]:not([data-theme="light"]) .ev-top .btn.primary { background: var(--accent); color: var(--accent-text); }
}
/* ---------- Retirer des étoiles (maquette Figma « 7 · Retirer des étoiles ») ---------- */
.orga-actions { grid-template-columns: repeat(4, 1fr); }
.malus-kids { display: flex; flex-wrap: wrap; gap: 8px; }
.malus-label { margin-top: 4px; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
#malus-kids .orga-chip.on, #malus-ideas .orga-chip.on { background: var(--text); color: var(--panel); border-color: var(--text); }
.malus-step { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.malus-round { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; font-size: 1.4rem; font-weight: 600; cursor: pointer; }
.malus-val { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: center; text-align: center; }
.malus-val strong { font-size: 1.6rem; color: var(--danger); font-variant-numeric: tabular-nums; }
.malus-star { font-size: 1.3rem; color: #B7791F; }
:root .btn.malus-btn, :root[data-skin] .btn.malus-btn { width: 100%; background: var(--danger); color: #fff; border: 0; font-weight: 600; }
.malus-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); overflow: hidden; }
.malus-list:empty { display: none; }
.malus-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.malus-item + .malus-item { border-top: 1px solid var(--line); }
.malus-txt { flex: 1; display: grid; gap: 1px; min-width: 0; }
.malus-txt strong { font-size: .95rem; overflow-wrap: anywhere; }
.malus-pill { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.malus-undo { border: 0; background: none; color: var(--muted); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; padding: 6px 4px; }
:root[data-skin="classique"] [data-orga-form="malus"] span { --ic: url("/themes/classique/icones/etoile-moins.svg"); }
:root[data-skin="classique"] .orga-actions .orga-tile[data-orga-form="malus"] span { background-color: var(--danger); }
:root[data-skin="classique"] :is(#orga-malus-title, #orga-malus) { order: 9; }
:root[data-skin="classique"] .malus-star { color: var(--or); }
:root[data-skin="classique"] .ce[data-c="etoile-moins"] { --ce: url("/themes/classique/icones/etoile-moins.svg"); }
#malus-kids .orga-chip, #malus-ideas .orga-chip { font: inherit; font-size: .875rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
:root[data-skin="classique"] :is(#malus-kids, #malus-ideas) .orga-chip:not(.on) { background: var(--panel); border: 1px solid var(--line); color: var(--text); }

/* =====================================================================================================
   Thème Mascotte (thème de base des enfants) : charte docs/charte-mascotte.md, maquette Figma « Mascotte — Maquettes ».
   La mascotte est l'héroïne : elle accueille (accueil), annonce (agenda), brandit l'étoile (tâches), invite à écrire
   (discussion vide), fait la fête. Couleurs tirées d'elle (lagon, encre de ses yeux, trois boules corail / soleil / ciel),
   très arrondi, Fredoka pour les titres, Nunito pour le texte, icônes dessinées (public/themes/mascotte/icones).
   ===================================================================================================== */
:root[data-skin="mascotte"] {
  --wp-tile: url("/themes/mascotte/fond.webp");
  --head-solid: #1F8C85; --head: #1F8C85;
  --bg: #EAF7F4; --panel: #FFFFFF; --text: #163C3D; --muted: #4E6B6B; --line: #CFE9E3;
  --accent: #17716B; --accent-text: #FFFFFF; --mine: #FFF3CC; --theirs: #FFFFFF;
  --chat-wp: linear-gradient(#EAF7F4, #EAF7F4);
  --lagon: #2BA79F; --lagon-doux: #D5F1EC; --encre: #163C3D; --corail: #F9746E; --corail-fonce: #C8443E; --corail-doux: #FFE3E0;
  --soleil: #FFCD41; --soleil-doux: #FFF3CC; --ciel: #4B9DE8; --ciel-doux: #DDEEFC;
  --titres: "Charte Fredoka", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* (image WebP faite depuis fond.svg, 3 fois plus grande : le dessin vectoriel, 21 groupes transparents, était redessiné
     à chaque bout de fond découvert en faisant défiler ; vu le 24 octobre sur un OnePlus Nord CE4 Lite, discussions lentes
     en Mascotte, fluides en Classique) */
  --m-wp: url("/themes/mascotte/fond.webp") 0 0 / 360px auto repeat;
  --i-agenda: url("/themes/mascotte/icones/agenda.svg"); --i-cadeau: url("/themes/mascotte/icones/cadeau.svg"); --i-cloche: url("/themes/mascotte/icones/cloche.svg"); --i-coffre: url("/themes/mascotte/icones/coffre.svg");
  --i-discussions: url("/themes/mascotte/icones/discussions.svg"); --i-envoyer: url("/themes/mascotte/icones/envoyer.svg"); --i-etoile: url("/themes/mascotte/icones/etoile.svg"); --i-groupe: url("/themes/mascotte/icones/groupe.svg");
  --i-jeux: url("/themes/mascotte/icones/jeux.svg"); --i-joindre: url("/themes/mascotte/icones/joindre.svg"); --i-loupe: url("/themes/mascotte/icones/loupe.svg"); --i-micro: url("/themes/mascotte/icones/micro.svg");
  --i-options: url("/themes/mascotte/icones/options.svg"); --i-photo: url("/themes/mascotte/icones/photo.svg"); --i-reglages: url("/themes/mascotte/icones/reglages.svg"); --i-retour: url("/themes/mascotte/icones/retour.svg");
  --i-taches: url("/themes/mascotte/icones/taches.svg"); --i-telephone: url("/themes/mascotte/icones/telephone.svg"); --i-video: url("/themes/mascotte/icones/video.svg");
  --m-ombre: 0 6px 18px rgba(13, 51, 51, .10);
}
/* Espace, Licorne, Dinosaures, Océan : les formes de Mascotte avec leurs couleurs pastel, leurs icônes recolorées
   (docs/themes-enfants/genere-icones.py) et leurs illustrations (public/themes/<thème>/entete.jpg, fete.jpg, chemin.jpg).
   Chartes et maquettes : Figma « Espace — Charte » … « Océan — Maquettes » (validées le 16 octobre). */
:root[data-skin="espace"] {
  --wp-tile: url("/themes/espace.jpg");
  --head-solid: #5B45C9; --head: #5B45C9;
  --bg: #F1EEFF; --panel: #FFFFFF; --text: #2E2A5C; --muted: #6A659A; --line: #E2DCFA;
  --accent: #6C4FE8; --accent-text: #FFFFFF; --mine: #FFE9F2; --theirs: #FFFFFF;
  --chat-wp: url("/themes/espace.jpg"), linear-gradient(#F1EEFF, #F1EEFF);
  --lagon: #8C7BFF; --lagon-doux: #E6E0FF; --encre: #2E2A5C; --corail: #FF8FB8; --corail-fonce: #C7336D; --corail-doux: #FFE3EE;
  --soleil: #FFD66B; --soleil-doux: #FFE9F2; --ciel: #7CC4FF; --ciel-doux: #E2F1FF;
  --titres: "Charte Fredoka", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --m-ombre: 0 6px 18px rgba(91, 69, 201, .12);
  --m-wp: url("/themes/espace.jpg") center top / 100% auto repeat-y;
  --head-img: url("/themes/espace/entete.jpg"); --fete-img: url("/themes/espace/fete.jpg"); --chemin-img: url("/themes/espace/chemin.jpg");
  --i-agenda: url("/themes/espace/icones/agenda.svg"); --i-cadeau: url("/themes/espace/icones/cadeau.svg"); --i-cloche: url("/themes/espace/icones/cloche.svg"); --i-coffre: url("/themes/espace/icones/coffre.svg");
  --i-discussions: url("/themes/espace/icones/discussions.svg"); --i-envoyer: url("/themes/espace/icones/envoyer.svg"); --i-etoile: url("/themes/espace/icones/etoile.svg"); --i-groupe: url("/themes/espace/icones/groupe.svg");
  --i-jeux: url("/themes/espace/icones/jeux.svg"); --i-joindre: url("/themes/espace/icones/joindre.svg"); --i-loupe: url("/themes/espace/icones/loupe.svg"); --i-micro: url("/themes/espace/icones/micro.svg");
  --i-options: url("/themes/espace/icones/options.svg"); --i-photo: url("/themes/espace/icones/photo.svg"); --i-reglages: url("/themes/espace/icones/reglages.svg"); --i-retour: url("/themes/espace/icones/retour.svg");
  --i-taches: url("/themes/espace/icones/taches.svg"); --i-telephone: url("/themes/espace/icones/telephone.svg"); --i-video: url("/themes/espace/icones/video.svg");
}
:root[data-skin="licorne"] {
  --wp-tile: url("/themes/licorne.jpg");
  --head-solid: #9A3A92; --head: #9A3A92;
  --bg: #FFF0F7; --panel: #FFFFFF; --text: #4A1D5E; --muted: #7A4A8A; --line: #F6D6E8;
  --accent: #B13C8E; --accent-text: #FFFFFF; --mine: #F1E6FF; --theirs: #FFFFFF;
  --chat-wp: url("/themes/licorne.jpg"), linear-gradient(#FFF0F7, #FFF0F7);
  --lagon: #F58FC8; --lagon-doux: #FBE1F1; --encre: #4A1D5E; --corail: #FF9EC4; --corail-fonce: #C2336D; --corail-doux: #FFE3EE;
  --soleil: #FFD66B; --soleil-doux: #F1E6FF; --ciel: #8CCBFF; --ciel-doux: #E2F1FF;
  --titres: "Charte Fredoka", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --m-ombre: 0 6px 18px rgba(154, 58, 146, .12);
  --m-wp: url("/themes/licorne.jpg") center top / 100% auto repeat-y;
  --head-img: url("/themes/licorne/entete.jpg"); --fete-img: url("/themes/licorne/fete.jpg"); --chemin-img: url("/themes/licorne/chemin.jpg");
  --i-agenda: url("/themes/licorne/icones/agenda.svg"); --i-cadeau: url("/themes/licorne/icones/cadeau.svg"); --i-cloche: url("/themes/licorne/icones/cloche.svg"); --i-coffre: url("/themes/licorne/icones/coffre.svg");
  --i-discussions: url("/themes/licorne/icones/discussions.svg"); --i-envoyer: url("/themes/licorne/icones/envoyer.svg"); --i-etoile: url("/themes/licorne/icones/etoile.svg"); --i-groupe: url("/themes/licorne/icones/groupe.svg");
  --i-jeux: url("/themes/licorne/icones/jeux.svg"); --i-joindre: url("/themes/licorne/icones/joindre.svg"); --i-loupe: url("/themes/licorne/icones/loupe.svg"); --i-micro: url("/themes/licorne/icones/micro.svg");
  --i-options: url("/themes/licorne/icones/options.svg"); --i-photo: url("/themes/licorne/icones/photo.svg"); --i-reglages: url("/themes/licorne/icones/reglages.svg"); --i-retour: url("/themes/licorne/icones/retour.svg");
  --i-taches: url("/themes/licorne/icones/taches.svg"); --i-telephone: url("/themes/licorne/icones/telephone.svg"); --i-video: url("/themes/licorne/icones/video.svg");
}
:root[data-skin="dinos"] {
  --wp-tile: url("/themes/dinos.jpg");
  --head-solid: #3F7A35; --head: #3F7A35;
  --bg: #F5F7EC; --panel: #FFFFFF; --text: #2D3A1A; --muted: #5F6B45; --line: #DDE6CB;
  --accent: #3E7D34; --accent-text: #FFFFFF; --mine: #FFF0CC; --theirs: #FFFFFF;
  --chat-wp: url("/themes/dinos.jpg"), linear-gradient(#F5F7EC, #F5F7EC);
  --lagon: #8CC47A; --lagon-doux: #E3F0D3; --encre: #2D3A1A; --corail: #FFB38A; --corail-fonce: #C4500A; --corail-doux: #FFE8DA;
  --soleil: #FFD66B; --soleil-doux: #FFF0CC; --ciel: #8CCBE8; --ciel-doux: #E2F2FA;
  --titres: "Charte Fredoka", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --m-ombre: 0 6px 18px rgba(63, 102, 38, .12);
  --m-wp: url("/themes/dinos.jpg") center top / 100% auto repeat-y;
  --head-img: url("/themes/dinos/entete.jpg"); --fete-img: url("/themes/dinos/fete.jpg"); --chemin-img: url("/themes/dinos/chemin.jpg");
  --i-agenda: url("/themes/dinos/icones/agenda.svg"); --i-cadeau: url("/themes/dinos/icones/cadeau.svg"); --i-cloche: url("/themes/dinos/icones/cloche.svg"); --i-coffre: url("/themes/dinos/icones/coffre.svg");
  --i-discussions: url("/themes/dinos/icones/discussions.svg"); --i-envoyer: url("/themes/dinos/icones/envoyer.svg"); --i-etoile: url("/themes/dinos/icones/etoile.svg"); --i-groupe: url("/themes/dinos/icones/groupe.svg");
  --i-jeux: url("/themes/dinos/icones/jeux.svg"); --i-joindre: url("/themes/dinos/icones/joindre.svg"); --i-loupe: url("/themes/dinos/icones/loupe.svg"); --i-micro: url("/themes/dinos/icones/micro.svg");
  --i-options: url("/themes/dinos/icones/options.svg"); --i-photo: url("/themes/dinos/icones/photo.svg"); --i-reglages: url("/themes/dinos/icones/reglages.svg"); --i-retour: url("/themes/dinos/icones/retour.svg");
  --i-taches: url("/themes/dinos/icones/taches.svg"); --i-telephone: url("/themes/dinos/icones/telephone.svg"); --i-video: url("/themes/dinos/icones/video.svg");
}
:root[data-skin="ocean"] {
  --wp-tile: url("/themes/ocean.jpg");
  --head-solid: #1D5F9A; --head: #1D5F9A;
  --bg: #EEF7FF; --panel: #FFFFFF; --text: #0B2E4F; --muted: #3D5F7A; --line: #D3E7F5;
  --accent: #1F6AAE; --accent-text: #FFFFFF; --mine: #FFE8E2; --theirs: #FFFFFF;
  --chat-wp: url("/themes/ocean.jpg"), linear-gradient(#EEF7FF, #EEF7FF);
  --lagon: #7CC6EE; --lagon-doux: #DCEFFC; --encre: #0B2E4F; --corail: #FF9E8F; --corail-fonce: #C9402F; --corail-doux: #FFE6E0;
  --soleil: #FFD66B; --soleil-doux: #FFE8E2; --ciel: #7FD4B4; --ciel-doux: #DDF5EC;
  --titres: "Charte Fredoka", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --m-ombre: 0 6px 18px rgba(26, 76, 140, .12);
  --m-wp: url("/themes/ocean.jpg") center top / 100% auto repeat-y;
  --head-img: url("/themes/ocean/entete.jpg"); --fete-img: url("/themes/ocean/fete.jpg"); --chemin-img: url("/themes/ocean/chemin.jpg");
  --i-agenda: url("/themes/ocean/icones/agenda.svg"); --i-cadeau: url("/themes/ocean/icones/cadeau.svg"); --i-cloche: url("/themes/ocean/icones/cloche.svg"); --i-coffre: url("/themes/ocean/icones/coffre.svg");
  --i-discussions: url("/themes/ocean/icones/discussions.svg"); --i-envoyer: url("/themes/ocean/icones/envoyer.svg"); --i-etoile: url("/themes/ocean/icones/etoile.svg"); --i-groupe: url("/themes/ocean/icones/groupe.svg");
  --i-jeux: url("/themes/ocean/icones/jeux.svg"); --i-joindre: url("/themes/ocean/icones/joindre.svg"); --i-loupe: url("/themes/ocean/icones/loupe.svg"); --i-micro: url("/themes/ocean/icones/micro.svg");
  --i-options: url("/themes/ocean/icones/options.svg"); --i-photo: url("/themes/ocean/icones/photo.svg"); --i-reglages: url("/themes/ocean/icones/reglages.svg"); --i-retour: url("/themes/ocean/icones/retour.svg");
  --i-taches: url("/themes/ocean/icones/taches.svg"); --i-telephone: url("/themes/ocean/icones/telephone.svg"); --i-video: url("/themes/ocean/icones/video.svg");
}
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"])[data-skin] body { font-family: "Charte Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) :is(dialog h2, dialog h3, .bar strong, .cal-title, .orga-h, .hero-stars, .mascot-party > strong, #kh-hello, .soon-title, .task-main, .goal-title, .ce-bubble strong, .btn, .orga-tile) { font-family: var(--titres); font-weight: 600; }
/* Icônes dessinées à la place des emojis de l'interface (les emojis sans icône restent) */
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .emo:is([data-ico="groupe"], [data-ico="photo"], [data-ico="gouvernail"], [data-ico="des"], [data-ico="loupe"], [data-ico="joindre"], [data-ico="etoile"], [data-ico="cloche"], [data-ico="coffre"], [data-ico="boussole"], [data-ico="camera"], [data-ico="micro"], [data-ico="telephone"], [data-ico="options"], [data-ico="retour"], [data-ico="envoyer"], [data-ico="bouteille"]) { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -.3em; overflow: hidden; text-indent: 3em; white-space: nowrap; background: center / contain no-repeat; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .emo[data-ico="groupe"] { background-image: var(--i-groupe); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .emo[data-ico="photo"] { background-image: var(--i-photo); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .emo[data-ico="gouvernail"] { background-image: var(--i-reglages); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .emo[data-ico="des"] { background-image: var(--i-jeux); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .emo[data-ico="loupe"] { background-image: var(--i-loupe); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .emo[data-ico="joindre"] { background-image: var(--i-joindre); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .emo[data-ico="etoile"] { background-image: var(--i-etoile); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .emo[data-ico="cloche"] { background-image: var(--i-cloche); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .emo[data-ico="coffre"] { background-image: var(--i-coffre); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .emo[data-ico="boussole"] { background-image: var(--i-agenda); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .emo[data-ico="camera"] { background-image: var(--i-video); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .emo[data-ico="micro"] { background-image: var(--i-micro); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .emo[data-ico="telephone"] { background-image: var(--i-telephone); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .emo[data-ico="options"] { background-image: var(--i-options); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .emo[data-ico="retour"] { background-image: var(--i-retour); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .emo[data-ico="envoyer"] { background-image: var(--i-envoyer); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .emo[data-ico="bouteille"] { background-image: var(--i-discussions); }

/* ---------- Accueil : en-tête « scène » avec la mascotte qui salue et sa bulle ---------- */
#kid-hero, .typing-mascot, .chat-empty, #soon-card, .hero-star, .hero-say, .hero-label { display: none; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #list-mascot { display: none; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #sidebar > .bar { background: var(--head-solid); border: 0; color: #fff; padding-top: calc(10px + var(--sat)); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #sidebar > .bar .avatar { box-shadow: 0 0 0 3px #fff; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #sidebar > .bar strong { font-size: 1.25rem; color: #fff; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #home-more-btn { color: #fff; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #kid-hero { display: flex; align-items: flex-end; gap: 4px; position: relative; z-index: 1; height: 132px; padding: 0 14px 0 4px; margin-bottom: 30px; background: var(--head-solid); border-radius: 0 0 36px 36px; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #sidebar:is([data-tab="agenda"], [data-tab="tasks"]) #kid-hero { display: none; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #kid-hero .kh-mascot { flex: none; width: 148px; margin-bottom: -38px; cursor: pointer; -webkit-tap-highlight-color: transparent; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .12)); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .kh-bubble { align-self: center; display: grid; gap: 2px; min-width: 0; margin-top: -8px; padding: 12px 16px; background: #fff; border-radius: 22px 22px 22px 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, .16); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #kh-hello { font-size: 1.3rem; line-height: 1.15; color: var(--encre); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #kh-line { font-size: .92rem; font-weight: 700; color: var(--muted); }
/* recherche : une pilule blanche */
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #conv-search-box { display: block; padding: 0 16px 8px; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #conv-search { width: 100%; height: 48px; padding: 0 16px 0 46px; border: 0; border-radius: 24px; background: #fff var(--i-loupe) 16px center / 22px no-repeat; box-shadow: var(--m-ombre); font: inherit; font-size: 1rem; font-weight: 600; color: var(--text); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #conv-search::placeholder { color: var(--muted); }
/* discussions : des cartes blanches très arrondies */
:root[data-skin]:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #conv-list { padding: 6px 16px 24px; background: var(--bg); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #conv-list li { margin: 0 0 10px; padding: 12px 14px; background: #fff; border: 2px solid transparent; border-radius: 24px; box-shadow: var(--m-ombre); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #conv-list li:has(.badge) { border-color: var(--lagon); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #conv-list li.active { background: #fff; border-color: var(--lagon-doux); }
@media (hover: hover) { :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #conv-list li:hover { background: #fff; border-color: var(--lagon-doux); } }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #conv-list .avatar { width: 52px; height: 52px; font-family: var(--titres); font-size: 1.3rem; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #conv-list strong { font-family: var(--titres); font-weight: 600; font-size: 1.12rem; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #conv-list li:has(.badge) small { color: var(--text); font-weight: 700; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .badge { background: var(--corail-fonce); color: #fff; font-weight: 800; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) :is(#today-card, #setup-card, #app-card, #email-card, #demo-card) { background: #fff; border: 2px solid var(--lagon-doux); border-radius: 24px; box-shadow: var(--m-ombre); margin-left: 16px; margin-right: 16px; }
/* onglets : une pilule blanche qui flotte, l'onglet actif en lagon doux */
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #home-tabs { margin: 0 14px calc(12px + env(safe-area-inset-bottom)); padding: 6px; border: 0; border-radius: 36px; background: #fff; box-shadow: 0 8px 24px rgba(13, 51, 51, .16); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #home-tabs button { border-radius: 28px; padding: 6px 4px; font-size: .8rem; font-weight: 700; color: var(--muted); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #home-tabs button.on { background: var(--lagon-doux); color: var(--accent); font-weight: 800; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #home-tabs .ht-ico { width: 32px; height: 28px; font-size: 0; background: var(--ic) center / 26px no-repeat; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #home-tabs button.on .ht-ico { background: var(--ic) center / 28px no-repeat; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) [data-home-tab="chats"] .ht-ico { --ic: var(--i-discussions); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) [data-home-tab="agenda"] .ht-ico { --ic: var(--i-agenda); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) [data-home-tab="tasks"] .ht-ico { --ic: var(--i-taches); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .ht-badge { font-size: .7rem; background: var(--corail-fonce); }

/* ---------- Conversation ---------- */
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #chat > .bar { background: var(--head-solid); border: 0; border-radius: 0 0 28px 28px; color: #fff; gap: 8px; position: relative; z-index: 3; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #chat > .bar strong { color: #fff; font-size: 1.2rem; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #chat > .bar .muted { color: var(--lagon-doux); font-weight: 700; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #chat-avatar { box-shadow: 0 0 0 3px #fff; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) :is(#back-btn, #games-btn, #call-audio-btn, #call-video-btn, #chat-more-btn) { width: 40px; height: 40px; flex: none; margin: 0; padding: 0; border-radius: 50%; font-size: 0; color: transparent; background: #fff var(--ic) center / 24px no-repeat; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #back-btn { --ic: var(--i-retour); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #games-btn { --ic: var(--i-jeux); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #call-audio-btn { --ic: var(--i-telephone); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #call-video-btn { --ic: var(--i-video); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #chat-more-btn { --ic: var(--i-options); width: 32px; background-color: transparent; filter: brightness(0) invert(1); }
/* fond de conversation du thème : motif doux dessiné d'après la mascotte (charte Figma) — bulles-mascottes, étoiles,
   cœurs, confettis de ses trois couleurs ; un fond choisi par l'enfant reste le sien */
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #chat.skin-wp #messages { background: var(--m-wp), var(--bg); background-attachment: scroll, scroll; }
/* (le motif reste immobile derrière les messages, comme le fond d'écran de WhatsApp et comme les autres fonds au choix :
   il défilait avec eux, et le téléphone redessinait du fond à chaque défilement — 24 octobre, OnePlus Nord CE4 Lite :
   discussions qui rament avec le fond du thème, fluides avec « Fond : Aucun ») */
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .bubble:not(.media) { border-radius: 22px 22px 22px 6px; font-size: 1.06rem; font-weight: 600; box-shadow: 0 2px 6px rgba(13, 51, 51, .08); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .msg.mine .bubble:not(.media) { border-radius: 22px 22px 6px 22px; background: var(--soleil-doux); box-shadow: none; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .msg.system .bubble, :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .day { box-shadow: none; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .day { background: #fff; color: var(--muted); font-weight: 800; border-radius: 12px; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .msg.mine .meta { color: var(--accent); }
/* « écrit… » : la petite mascotte et trois points aux couleurs de ses boules */
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #typing-bubble { display: flex; align-items: flex-end; gap: 6px; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .typing-mascot { display: block; width: 38px; height: 38px; object-fit: contain; animation: m-hop 1.4s ease-in-out infinite; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .typing-dots i:nth-of-type(1) { background: var(--corail); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .typing-dots i:nth-of-type(2) { background: var(--soleil); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .typing-dots i:nth-of-type(3) { background: var(--ciel); }
/* (maquette 78 : la mascotte, elle, a les boules du logo, dans son ordre ; les autres thèmes gardent celles de leur charte) */
:root[data-skin="mascotte"] .typing-dots i:nth-of-type(1) { background: var(--logo-rouge); }
:root[data-skin="mascotte"] .typing-dots i:nth-of-type(2) { background: var(--logo-bleu); }
:root[data-skin="mascotte"] .typing-dots i:nth-of-type(3) { background: var(--logo-jaune); }
/* barre d'écriture : blanche, arrondie en haut */
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .composer { background: #fff; border: 0; border-radius: 28px 28px 0 0; box-shadow: 0 -4px 16px rgba(13, 51, 51, .08); gap: 8px; padding-top: 10px; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .composer textarea { background: var(--bg); border: 0; border-radius: 24px; font-weight: 600; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #attach-btn { font-size: 0; background: var(--i-joindre) center / 36px no-repeat; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #mic-btn { width: 48px; height: 48px; border-radius: 50%; font-size: 0; background: var(--lagon-doux) var(--i-micro) center / 28px no-repeat; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) :is(#send-btn, #rec-send, #ev-comment-send) { width: 48px; height: 48px; border-radius: 50%; font-size: 0; background: var(--soleil) var(--i-envoyer) 46% 54% / 26px no-repeat; }
/* discussion vide : la mascotte invite à écrire, messages tout prêts */
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .chat-empty { display: grid; justify-items: center; gap: 14px; padding: 36px 16px 20px; text-align: center; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .chat-empty .ce-mascot { width: 168px; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .ce-bubble { display: grid; gap: 4px; padding: 14px 20px; background: #fff; border-radius: 22px; box-shadow: var(--m-ombre); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .ce-bubble strong { font-size: 1.35rem; color: var(--encre); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .ce-bubble span { font-weight: 700; color: var(--muted); font-size: .9rem; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .ce-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 360px; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .ce-chip { border: 0; border-radius: 20px; padding: 10px 16px; font: 500 1rem var(--titres); color: var(--encre); cursor: pointer; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .ce-chip.c0 { background: var(--soleil-doux); } :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .ce-chip.c1 { background: var(--corail-doux); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .ce-chip.c2 { background: var(--ciel-doux); } :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .ce-chip.c3 { background: var(--lagon-doux); }

/* ---------- Tâches : la mascotte brandit une étoile ---------- */
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .orga-hero { position: relative; display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 4px; padding: 16px 16px 16px 6px; background: #fff; border: 0; border-radius: 28px; box-shadow: var(--m-ombre); color: var(--text); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .orga-hero .hero-mascot { width: 150px; height: 150px; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .hero-mascot .m-arm { animation: none !important; } /* le bras tient l'étoile */
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .hero-star { display: block; position: absolute; left: -2%; top: 14%; width: 34%; height: auto; transform: rotate(-12deg); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .15)); animation: m-star 2.4s ease-in-out infinite; }
@keyframes m-star { 50% { transform: rotate(4deg) scale(1.06); } }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .hero-txt { display: grid; gap: 2px; justify-items: start; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .hero-stars { font-size: 3.4rem; line-height: 1; color: var(--encre); display: flex; flex-direction: row-reverse; align-items: center; gap: 6px; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .hero-stars .emo { width: .62em; height: .62em; vertical-align: 0; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .hero-label { display: block; font: 500 1.1rem var(--titres); color: var(--muted); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .hero-long { display: none; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .hero-say { display: inline-block; margin-top: 8px; padding: 7px 12px; border-radius: 16px 16px 16px 4px; background: var(--soleil-doux); font-weight: 800; color: var(--encre); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .orga-h { font-size: 1.25rem; color: var(--encre); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .task-card { background: #fff; border: 0; border-radius: 24px; box-shadow: var(--m-ombre); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) :is(.task-card.check, .task-card.waiting) { background: var(--soleil-doux); box-shadow: none; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .task-main { font-size: 1.15rem; color: var(--encre); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .task-pts { background: var(--soleil-doux); color: var(--encre); font-family: var(--titres); font-weight: 700; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .task-done-btn { background: var(--accent); color: #fff; border: 0; border-radius: 18px; min-height: 52px; font-size: 1.15rem; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .task-done-btn .emo { display: none; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .goal-bar { height: 14px; border-radius: 7px; background: var(--soleil-doux); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .goal-fill { background: var(--soleil); border-radius: 7px; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .kid-card { background: #fff; border: 0; border-radius: 22px; box-shadow: var(--m-ombre); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .orga-tile { background: #fff; border-radius: 22px; box-shadow: var(--m-ombre); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .orga-tile:first-child { background: var(--accent); color: #fff; }

/* ---------- Agenda : la mascotte annonce le prochain rendez-vous ---------- */
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #soon-card:not(.hidden) { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 8px; width: 100%; margin: 4px 0 14px; padding: 10px 16px 10px 4px; border: 0; border-radius: 28px; background: #fff; box-shadow: var(--m-ombre); text-align: left; font: inherit; color: var(--text); cursor: pointer; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .soon-mascot { width: 104px; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .soon-txt { display: grid; gap: 2px; justify-items: start; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .soon-day { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--corail-fonce); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .soon-title { font-size: 1.4rem; line-height: 1.15; color: var(--encre); overflow-wrap: anywhere; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .soon-time { margin-top: 4px; padding: 3px 10px; border-radius: 12px; background: var(--ciel-doux); font-weight: 800; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .cal-tools button { background: #fff; border: 0; border-radius: 20px; box-shadow: var(--m-ombre); font-weight: 700; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .cal-tools button.on { background: var(--lagon-doux); color: var(--accent); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) :is(.cal-title, .cal-nav) { color: var(--encre); }

/* ---------- Fête : la mascotte saute de joie ---------- */
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .mascot-party { background: rgba(31, 140, 133, .94); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .mascot-party .mascot { width: 230px; height: 230px; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .mascot-party > strong { color: #fff; font-size: 2.4rem; text-shadow: none; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .star-fall { font-size: 0; width: 34px; height: 34px; background: var(--i-etoile) center / contain no-repeat; }

/* ---------- Fenêtres, boutons, menus ---------- */
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .btn { border-radius: 18px; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .btn.primary { background: var(--accent); color: #fff; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) dialog:not(.menu-dialog) { border-radius: 28px; box-shadow: 0 16px 40px rgba(13, 51, 51, .25); }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) dialog.menu-dialog { border-radius: 22px; }
/* (corrections après comparaison avec la maquette) */
:root[data-skin]:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #list-mascot { display: none; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #kid-hero > .kh-mascot { width: 150px; height: 150px; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #typing-bubble { flex-direction: row; align-items: flex-end; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #sidebar { background: var(--bg); }
/* Espace, Licorne, Dinosaures, Océan : en-tête illustré (une grande image à la place de l'aplat), textes foncés */
:root:is([data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #sidebar { background: var(--head-img) center top / 100% auto no-repeat, var(--bg); }
:root:is([data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) :is(#sidebar > .bar, #kid-hero) { background: transparent; }
:root:is([data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #sidebar > .bar, :root:is([data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #sidebar > .bar strong { color: var(--encre); }
:root:is([data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #home-more-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--encre); }
:root:is([data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #chat > .bar { background: linear-gradient(color-mix(in srgb, var(--lagon-doux) 45%, #fff), var(--lagon-doux)); color: var(--encre); }
:root:is([data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #chat > .bar strong { color: var(--encre); }
:root:is([data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #chat > .bar .muted { color: var(--muted); }
:root:is([data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #chat-more-btn { filter: none; }
/* Fête : l'illustration du thème (la fusée sur la Lune, la licorne sur les nuages, l'œuf qui éclot, le coffre au trésor) */
:root:is([data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .mascot-party { background: var(--fete-img) center bottom / cover, var(--bg); }
:root:is([data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .mascot-party > strong { color: var(--encre); }
:root:is([data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .party-next { position: relative; z-index: 1; padding: 10px 18px; border-radius: 22px; background: #fff; box-shadow: var(--m-ombre); font-weight: 800; color: var(--accent); }
/* Cagnotte (enfant) : le voyage du thème — escales au quart, à la moitié et aux trois quarts, la récompense au bout */
.goal-voyage { position: relative; margin: 8px 0 2px; }
.goal-row:has(> .goal-voyage) { display: block; }
.goal-row:has(> .goal-voyage) > .goal-txt { display: none; } /* « Prochaine escale » le dit déjà */
.goal-voyage .gv-img { aspect-ratio: 3; background: var(--chemin-img) center / 100% 100% no-repeat; border-radius: 12px; }
.goal-voyage .gv-m { position: absolute; top: -8%; width: 16%; transform: translateX(-50%); transition: left .6s; }
.goal-voyage .gv-labels { position: relative; height: 18px; }
.goal-voyage .gv-labels span { position: absolute; transform: translateX(-50%); white-space: nowrap; font-size: .72rem; font-weight: 800; color: var(--muted); }
.goal-voyage .gv-labels span.gv-end { color: var(--corail-fonce); }
.goal-voyage .gv-next { display: block; margin-top: 8px; padding: 5px 10px; border-radius: 12px; background: var(--bg); text-align: center; font-size: .86rem; font-weight: 800; color: var(--encre); }
/* Discussion de groupe : la bulle suit son contenu, même si le prénom au-dessus est plus long (« … » et « Hihi » trop larges) */
.msg.theirs > .bubble, #typing-bubble > .bubble { align-self: flex-start; }
.msg.mine > .bubble { align-self: flex-end; }

/* Fenêtres : on ferme en touchant à côté ou par le geste retour ; le bouton « Fermer » ne reste qu'en mode Simplifié */
body:not(.mode-simple) .dlg-close { display: none !important; }

/* ---------- Chasse aux incohérences de design, 2e passage (v203) ---------- */
/* Les boutons gardent la police de l'appli (sinon Arial pour ⋮ ‹ › ←) */
button { font-family: inherit; }
/* Fenêtres : une zone encore vide (statut de recherche, résultats, erreur, album) ne laisse pas de trou */
.dialog-body > :is(p, ul, ol):empty, #album-grid:empty { display: none; }
/* Cases à cocher : même taille et même couleur partout (Nouveau groupe était à la taille du navigateur) */
#group-members input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }
/* Infos du groupe : « Retirer » au bout de la ligne, comme dans Famille */
#group-info-members li .grow { flex: 1; min-width: 0; }
/* Titres des fenêtres en Classique : sans icône devant, comme Réglages, Mon profil, Nouveau groupe */
:root[data-skin="classique"] dialog h2 .ce { display: none; }
/* Mascotte : tous les boutons en pilule (« Annuler » et « Plus tard » étaient carrés arrondis à côté de « Créer ») */
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .btn { border-radius: 999px; }
/* Textes d'aide dans les fenêtres : l'écart vient de la grille (12 px, 8 px dans une rubrique), pas en plus des marges du paragraphe */
.dialog-body > p, .dialog-body section > p { margin-block: 0; }

/* ---------- Agenda comme FamilyWall (v206) ---------- */
/* Calendriers intégrés : vacances scolaires (zone), jours fériés, fêtes */
.builtin-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.builtin-row .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.builtin-row small { font-size: .8rem; }
.zone-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.zone-chips .btn { min-height: 36px; }
input[type=checkbox].switch { -webkit-appearance: none; appearance: none; flex: none; width: 44px; height: 26px; margin: 0; border-radius: 13px; background: var(--line); position: relative; cursor: pointer; transition: background .15s; }
input[type=checkbox].switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
input[type=checkbox].switch:checked { background: var(--accent); }
input[type=checkbox].switch:checked::before { transform: translateX(18px); }
/* Les 24 couleurs (les nôtres + celles de FamilyWall) passent à la ligne */
#feed-colors, #ev-colors, .ev-palette { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 0; }
.ev-palette { padding: 4px 0 8px 36px; }
.ev-palette.hidden { display: none; }
.ev-recolor { cursor: pointer; }
#feed-colors, #ev-colors { flex: 1; min-width: 0; }
/* Liste du jour : le calendrier derrière est assombri, le toucher ferme la liste (comme FamilyWall) */
.cal-scrim { position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, .35); animation: scrim-in .15s ease-out; }
.cal-scrim.hidden { display: none; }
@keyframes scrim-in { from { opacity: 0; } }

/* ---------- Commentaires d'un rendez-vous et animations, comme FamilyWall (v208) ---------- */
.ev-comments h3 { margin: 0 0 4px; font-size: 1rem; }
#ev-comments-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
#ev-comments-list:empty::before { content: "Pas encore de commentaire. Écris le premier en bas."; color: var(--muted); font-size: .9rem; }
.ev-com { display: flex; gap: 10px; align-items: flex-start; }
.ev-com .avatar { flex: none; width: 34px; height: 34px; font-size: .9rem; }
.ev-com-body { flex: 1; min-width: 0; }
.ev-com-head { font-size: .78rem; color: var(--muted); font-weight: 600; }
.ev-com-head strong { color: var(--text); margin-right: 4px; }
.ev-com-text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.ev-com .icon-btn { flex: none; width: 32px; height: 32px; font-size: .95rem; color: var(--muted); }
.ev-comment-bar { position: sticky; bottom: 0; margin-top: auto; display: flex; gap: 8px; align-items: center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); }
.ev-comment-bar input { flex: 1; min-width: 0; border-radius: 999px; padding: 12px 16px; }
#ev-comment-send { flex: none; width: 44px; height: 44px; }
/* Liste du jour : elle monte du bas, et redescend en s'effaçant quand on la ferme (calendrier qui s'éclaircit) */
.cal-sheet:not(.hidden) { animation: sheet-up .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes sheet-up { from { transform: translateY(100%); } }
.cal-sheet.closing { animation: sheet-down .16s cubic-bezier(.4, 0, 1, 1) forwards; }
@keyframes sheet-down { to { transform: translateY(100%); } }
.cal-scrim.closing { animation: scrim-out .18s ease-in forwards; }
@keyframes scrim-out { to { opacity: 0; } }
/* Fiche d'un rendez-vous : elle arrive de la droite, et repart vers la droite */
.orga-over.slide-in { animation: over-in .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes over-in { from { transform: translateX(100%); } }
.orga-over.closing { animation: over-out .18s cubic-bezier(.4, 0, 1, 1) forwards; }
@keyframes over-out { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .cal-sheet, .cal-scrim, .orga-over { animation: none !important; } }
.cal-sheet.closing, .cal-scrim.closing, .orga-over.closing { pointer-events: none; }
/* Jour touché : il se remplit de gris depuis l'endroit touché, et reste gris tant que sa journée est ouverte
   (comme FamilyWall) ; le cadre, lui, reste sur aujourd'hui */
.cal-day { position: relative; }
.cal-day .cal-num { position: relative; }
.cal-day.picked::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--text) 10%, transparent); pointer-events: none; }
.cal-day.pick-anim::before { animation: cell-fill .14s ease-out; }
@keyframes cell-fill { from { clip-path: circle(0% at var(--px, 50%) var(--py, 25%)); } to { clip-path: circle(150% at var(--px, 50%) var(--py, 25%)); } }
@media (prefers-reduced-motion: reduce) { .cal-day.pick-anim::before { animation: none; } }

/* ---------- Vue « Agenda » (liste des jours), comme FamilyWall (v210) ---------- */
[data-orga="agenda"].ag-mode { display: flex; flex-direction: column; overflow: hidden; }
[data-orga="agenda"].ag-mode > .cal-tools, [data-orga="agenda"].ag-mode > #soon-card { flex: none; }
#orga-cal.ag { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ag-top { flex: none; }
.ag-mini { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; padding: 0 6px; }
.ag-wd { text-align: center; font-size: .75rem; font-weight: 600; color: var(--muted); padding: 2px 0 2px; }
.ag-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 0 3px; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ag-day.other .ag-num:not(.sel) { color: var(--muted); }
.ag-month { position: absolute; top: 0; font-size: .64rem; line-height: 1; color: var(--muted); font-weight: 600; }
.ag-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; }
.ag-num.today { background: color-mix(in srgb, var(--text) 12%, transparent); font-weight: 700; }
.ag-num.sel { background: var(--accent); color: var(--accent-text); font-weight: 700; }
.ag-num.pop { animation: ag-pop .18s cubic-bezier(.2, .8, .3, 1.25); }
@keyframes ag-pop { from { transform: scale(.35); } }
.ag-dots { display: flex; gap: 3px; height: 5px; }
.ag-dots i { width: 5px; height: 5px; border-radius: 50%; }
.ag-handle { display: block; width: 52px; height: 18px; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.ag-handle::before { content: ""; position: absolute; left: 10px; right: 10px; top: 7px; height: 4px; border-radius: 2px; background: var(--line); }
.ag-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 24px; border-top: 1px solid var(--line); overscroll-behavior: contain; }
.ag-sec { padding-bottom: 6px; }
.ag-dh { margin: 0 0 8px; padding: 9px 12px; background: var(--panel-2, color-mix(in srgb, var(--text) 7%, transparent)); border-radius: 6px; font-size: .95rem; font-weight: 700; }
.ag-dh.today { color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.ag-empty { margin: 4px 0 12px; text-align: center; color: var(--muted); font-size: .9rem; }
.ag-row { display: flex; align-items: stretch; gap: 10px; width: 100%; margin: 0 0 8px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ag-time { flex: none; width: 84px; display: flex; flex-direction: column; justify-content: center; padding-left: 4px; }
.ag-time strong { font-size: .9rem; font-weight: 600; }
.ag-time small { font-size: .78rem; color: var(--muted); }
.ag-card { flex: 1; min-width: 0; border-radius: 10px; padding: 10px 12px; color: #fff; display: grid; gap: 3px; }
.ag-card strong { font-size: 1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-card small { font-size: .8rem; opacity: .92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ag-num.pop { animation: none; } }
/* Brouillon dans la liste des conversations (comme WhatsApp) */
.draft-text b { color: var(--accent); font-weight: 700; }
/* ---------- Fiche d'un rendez-vous comme FamilyWall (v213) ---------- */
/* Plein écran sur un téléphone, par-dessus l'en-tête de l'accueil et les onglets (la règle plus haut était écrasée
   par celle de .orga-over, placée après elle) */
@media (max-width: 760px) { .orga-over { position: fixed; z-index: 30; } }
/* Une seule carte, lignes séparées par un trait */
.ev-fiche { padding: 0; gap: 0; overflow: hidden; border-radius: 16px; }
.ev-fiche .ev-title { padding: 18px 18px 16px; font-size: 1.45rem; line-height: 1.25; border-bottom: 1px solid var(--line); }
.ev-fiche .ev-row { gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 1.05rem; line-height: 1.4; }
.ev-fiche .ev-row .muted.small { font-size: .88rem; }
.ev-fiche .ev-ico { width: 24px; color: var(--muted); font-size: 1.2rem; }
.ev-fiche .ev-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; }
/* Prénoms des participants à la couleur du rendez-vous (un peu plus foncée / claire pour rester lisible) */
.ev-who { color: color-mix(in srgb, var(--ev) 80%, var(--text)); }
.ev-change { flex: none; }
.ev-fiche .ev-palette { padding: 4px 16px 14px 56px; border-bottom: 1px solid var(--line); }
.ev-fiche .ev-palette p { flex-basis: 100%; margin: 0 0 4px; }
/* ♡ J'aime au centre ; rouge quand on aime, avec les prénoms */
.ev-like-row { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 16px; border-bottom: 1px solid var(--line); }
.ev-like { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.ev-like path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: fill .15s; }
.ev-like.on { color: #e5484d; }
.ev-like.on path { fill: currentColor; }
.ev-like.pop svg { animation: heart-pop .32s cubic-bezier(.2, .8, .2, 1.4); }
@keyframes heart-pop { 45% { transform: scale(1.3); } }
.ev-likers:empty { display: none; }
/* « Publié par / Mis à jour par … » en bas de la carte */
.ev-fiche .ev-by { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 12px 16px 14px; }
.ev-ico-small { font-size: .95rem; }
#ev-view .ev-comments { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .ev-like.pop svg { animation: none; } }
/* ---------- Sélectionner plusieurs messages / photos d'un coup (v214, maquette Figma « 17 ») ---------- */
.pick-bar { display: none; }
#chat.picking > .chat-header { display: none; }
/* (même hauteur que l'en-tête qu'elle remplace : rien ne bouge dessous à l'appui long ; --hd-h, mesurée par la page) */
#chat.picking > #pick-bar { display: flex; padding-top: calc(10px + var(--sat)); min-height: var(--hd-h, 0px); }
.pick-bar .pick-count { flex: 1; min-width: 0; font-size: 1.25rem; }
.pick-bar .icon-btn.hidden { display: none; }
/* Message choisi : surligné sur toute la largeur, bulle comprise (comme WhatsApp) */
#messages { overflow-x: hidden; }
#chat.picking #messages .msg[data-id] { cursor: pointer; -webkit-user-select: none; user-select: none; }
.msg.picked { position: relative; }
.msg.picked::after { content: ""; position: absolute; inset: -2px -100vw; background: color-mix(in srgb, var(--accent) 22%, transparent); pointer-events: none; }
/* Médias : vignette choisie entourée, avec une coche */
#album-dialog.picking .settings-head { display: none; }
#album-dialog.picking #album-pick-bar { display: flex; position: sticky; top: 0; z-index: 2; margin: -4px -4px 8px; padding: 6px 4px; border-radius: 12px; }
.album-tile.picked { outline: 3px solid var(--accent); outline-offset: -3px; }
.album-tile.picked > img, .album-tile.picked > video { transform: scale(.9); border-radius: 8px; }
.album-tile.picked::after { content: "✓"; position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: .8rem; font-weight: 800; }
/* « ← » de la barre de sélection : la même flèche que le bouton retour de chaque thème */
:root[data-skin="classique"] .pick-bar [data-pick="close"] { font-size: 0; color: var(--text); display: inline-flex; align-items: center; justify-content: center; --ic: url("/themes/classique/icones/retour.svg"); }
:root[data-skin="classique"] .pick-bar [data-pick="close"]::before { content: ""; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
:root[data-skin="pirates"] .pick-bar [data-pick="close"] { font-size: 0; background: url("/themes/pirates/icones/retour.svg") center / 24px no-repeat; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .pick-bar [data-pick="close"] { font-size: 0; color: transparent; background: var(--i-retour) center / 24px no-repeat; }
/* ---------- Rappels d'un rendez-vous, comme FamilyWall (v215, maquette Figma « 18 ») ---------- */
/* Liste (formulaire, page « Rappels ») : toucher un rappel le change, ✕ le retire, « Ajouter un autre rappel » */
.ev-reminds { display: grid; gap: 2px; }
.remind-row { gap: 12px; }
.remind-lab { flex: 1; }
.remind-lab, .remind-add { border: 0; background: none; color: var(--text); font: inherit; text-align: left; padding: 8px 0; cursor: pointer; min-width: 0; }
.remind-add { display: flex; align-items: center; gap: 12px; width: 100%; }
.remind-x { flex: none; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); font-size: .8rem; }
#remind-edit .ev-card { padding: 8px 16px; }
.remind-note { margin: 0 20px; }
/* Page « Rappel » : la liste des choix, le choix actuel en gris avec 🔔 (comme FamilyWall) */
.remind-list { display: grid; background: var(--panel); }
.remind-opt { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px; border: 0; background: none; color: var(--text); font: inherit; font-size: 1.05rem; text-align: left; cursor: pointer; }
.remind-opt .ev-ico { width: 24px; color: var(--muted); }
.remind-opt.on { background: color-mix(in srgb, var(--text) 8%, var(--panel)); font-weight: 600; }
/* Rendez-vous qui se répètent (maquette Figma « 89 ») : ligne « Répéter » du formulaire (89a), jours de la semaine et
   « Jusqu'au » sur la page de choix (89b), boutons radio de « Ce rendez-vous / … et les suivants / Tous » (89c, 89d) */
.ev-rep-row { width: 100%; border: 0; background: none; color: var(--text); font: inherit; text-align: left; padding: 8px 0; cursor: pointer; }
.ev-rep-texts { display: grid; gap: 2px; min-width: 0; }
.ev-rep-texts small { font-size: .8rem; }
.ev-rep-texts small.hidden { display: none; }
.ev-chev { flex: none; color: var(--muted); font-size: 1.3rem; line-height: 1; }
.rep-days { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 16px 14px 56px; background: color-mix(in srgb, var(--text) 8%, var(--panel)); }
.rep-day { width: var(--rep-day); height: var(--rep-day); padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.rep-day.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.rep-day:disabled { opacity: 1; cursor: default; }
.rep-until { display: grid; gap: 8px; padding: 18px 16px 18px 56px; }
.rep-until small { font-size: .8rem; }
.ev-vis .rep-until-date { width: auto; font: inherit; font-size: .9rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.ev-vis .rep-until-date.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; color-scheme: dark; }
.ask-choices { display: grid; gap: 2px; margin: 6px 0 12px; }
.ask-radio { display: flex; align-items: center; gap: 14px; padding: 10px 0; cursor: pointer; }
.ask-radio input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent, #2a9d8f); }
.remind-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 16px 18px 56px; }
.remind-custom.hidden { display: none; }
.remind-custom input[type=number] { width: 72px; }
.remind-custom input[type=time] { width: 110px; }
.remind-custom select { width: auto; }
/* Fiche : la ligne 🔔 (un parent la touche pour changer les rappels) */
.ev-fiche .ev-remind-row .grow > div + div { margin-top: 2px; }
/* Appui long = message sélectionné (v216, maquette Figma « 17b ») : réactions au-dessus d'un message seul, ⋮ en haut */
.pick-react { position: fixed; z-index: 70; padding: 6px 8px; border-radius: 999px; background: var(--panel); box-shadow: 0 8px 30px rgba(0,0,0,.25); }
/* « + » au bout de la barre des réactions, et panneau de tous les emojis (maquette Figma « 28 ») */
.pick-react { align-items: center; }
/* (chasse aux sauts, 31 octobre : texte du téléphone agrandi, petit écran, la barre de la sélection dépassait à droite et
   son « + » était coupé : ses émojis rétrécissent pour qu'elle tienne toujours dans l'écran ; taille normale sinon) */
#pick-react:not(.tap-react) > button:not(.react-more) { font-size: min(1.6rem, calc((100vw - 64px) / 7 * .62)); padding: 4px min(6px, 1.4vw); }
.menu-reactions button.react-more { width: 34px; height: 34px; padding: 0; margin-left: 2px; border-radius: 50%; background: var(--bg); color: var(--muted); font-size: 1.4rem; line-height: 1; display: grid; place-items: center; }
dialog.emoji-sheet {
  position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 640px; margin-inline: auto; box-sizing: border-box;
  height: min(60dvh, 460px); padding: 0 12px env(safe-area-inset-bottom); border-radius: 22px 22px 0 0;
  background: var(--panel); color: var(--text); display: flex; flex-direction: column; transition: transform .15s;
}
dialog.emoji-sheet:not([open]) { display: none; }
.emoji-handle { flex: none; height: 22px; display: grid; place-items: center; touch-action: none; cursor: grab; }
.emoji-handle::before { content: ''; width: 40px; height: 4px; border-radius: 2px; background: var(--border, rgba(128,128,128,.4)); }
.emoji-tabs { flex: none; display: flex; justify-content: space-between; border-bottom: 1px solid var(--border, rgba(128,128,128,.25)); }
/* Onglets en pleines couleurs (une opacité les pâlissait) : l'onglet choisi est souligné */
.emoji-tab { flex: 1; background: none; border: 0; padding: 6px 0 8px; font-size: 1.25rem; cursor: pointer; border-bottom: 3px solid transparent; }
.emoji-tab.on { border-bottom-color: var(--accent); }
.emoji-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; position: relative; }
.emoji-cat { margin: 12px 4px 4px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
.emoji-pick { height: 46px; background: none; border: 0; border-radius: 12px; font-size: 1.75rem; line-height: 1; padding: 0; cursor: pointer; }
.emoji-pick.mine, .emoji-pick:hover { background: var(--bg); }
#msg-menu.pick-menu { min-width: 210px; }
#msg-menu.pick-menu .menu-actions { border-top: 0; padding-top: 0; }
:root[data-skin="classique"] .pick-bar [data-pick="more"] { font-size: 0; color: var(--text); display: inline-flex; align-items: center; justify-content: center; --ic: url("/themes/classique/icones/options.svg"); }
:root[data-skin="classique"] .pick-bar [data-pick="more"]::before { content: ""; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }

/* ---------- Planning de travail (maquette Figma « 21 ») ---------- */
/* Sous chaque jour de l'agenda : « ● 💼 Fred 09:45 – 19:30 Livraison » */
.plan-line { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: .9rem; min-width: 0; }
.plan-line.tap { cursor: pointer; }
.plan-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.plan-who { white-space: nowrap; }
.plan-hours { white-space: nowrap; font-weight: 600; }
.plan-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cal-sheet-list .plan-line { padding-left: 4px; }
/* « ⚠️ Personne pour récupérer Alaric à 16:30 » */
.plan-alert { margin: 6px 10px; padding: 12px 14px; border-radius: 14px; display: grid; gap: 6px; border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--panel)); }
.plan-alert small { color: var(--muted); }
.plan-alert.done { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--panel)); display: flex; align-items: center; gap: 10px; }
.plan-alert.done strong { flex: 1; min-width: 0; font-size: .9rem; }
.plan-alert-btns { display: flex; flex-wrap: wrap; gap: 8px; }
/* Mon planning */
#plan-body { padding: 4px 0 24px; }
.plan-tabs { display: flex; gap: 8px; padding: 12px 14px 0; overflow-x: auto; }
.plan-tab { font: inherit; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 999px; padding: 6px 14px; cursor: pointer; white-space: nowrap; }
.plan-tab.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.plan-week { display: flex; align-items: center; gap: 8px; padding: 8px 10px; text-align: center; }
.plan-week .icon-btn { font-size: 1.3rem; }
.plan-days { display: grid; gap: 8px; padding: 4px 14px; }
.plan-day { font: inherit; color: var(--text); text-align: left; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; background: var(--panel); cursor: pointer; }
.plan-day .grow { display: grid; gap: 2px; min-width: 0; }
.plan-day.rest, .plan-day.none { background: color-mix(in srgb, var(--line) 45%, var(--bg)); border: 1px dashed var(--line); }
.plan-day.none strong { color: var(--muted); font-weight: 500; }
.plan-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.plan-chip { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 10px; border-radius: 999px; font-size: .8rem; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.plan-actions { display: grid; gap: 8px; padding: 14px; }
.plan-actions .btn:not(.primary) { background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.plan-switch { display: flex; align-items: center; gap: 10px; padding: 8px 18px; }
.plan-feeds { display: grid; gap: 4px; padding: 4px 18px; }
/* Fenêtres : un jour, le cycle, les modèles, la sortie d'école, la photo lue */
.plan-dlg { width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
.plan-form { display: grid; gap: 10px; }
.plan-form h2 { margin: 0; }
.plan-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-opt { display: grid; justify-items: start; gap: 0; background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 8px 12px; }
.plan-opt small { color: var(--muted); font-size: .8rem; }
.plan-opt.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.plan-opt.on small { color: inherit; opacity: .85; }
.plan-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.plan-row input:not([type="checkbox"]), .plan-row select { min-width: 0; font-size: max(16px, 1rem); }
.plan-row input[type="time"] { flex: none; width: auto; min-width: 7em; }
.plan-form > input { font-size: max(16px, 1rem); }
.plan-tpls .plan-row input:first-child { flex: 1; }
.plan-cycle { display: grid; gap: 6px; max-height: 32vh; overflow-y: auto; }
.plan-cycle .plan-row > span { white-space: nowrap; }
.plan-school { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.plan-read { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
.plan-read-row { padding: 8px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.plan-read-row .grow { display: grid; gap: 1px; }
.plan-read-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); }
/* Enfant : « Aujourd'hui », qui travaille et qui vient le chercher */
#plan-today { display: grid; gap: 10px; padding: 8px 12px 4px; }
.plan-kid-title { margin: 4px 2px 0; font-size: 1.15rem; }
.plan-kid { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 20px; }
.plan-kid .grow { display: grid; gap: 2px; }
.plan-kid small { color: var(--muted); }
.plan-kid-ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; background: var(--panel); }
.plan-kid.sun { background: color-mix(in srgb, #f4b400 22%, var(--panel)); }
.plan-kid.home { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.plan-kid.sky { background: color-mix(in srgb, #1e88e5 16%, var(--panel)); }
/* Ami(e) sans famille : « 🏠 Ta famille à toi » en haut de « Mes contacts » */
.own-family-card { display: grid; gap: 8px; margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.own-family-card.hidden { display: none; }
.own-family-card h3 { margin: 0; }
.own-family-card p { margin: 0; }
/* Commentaire ouvert depuis sa notification : mis en avant un instant */
.ev-com.ev-com-new { animation: evcomnew 2.4s ease-out; border-radius: 12px; }
@keyframes evcomnew { 0%, 35% { background: color-mix(in srgb, var(--accent) 18%, transparent); } 100% { background: transparent; } }

/* ---------- Téléphone en paysage (peu de hauteur) : en-têtes compacts, rien d'inutile au-dessus de la liste ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  :root[data-skin] #sidebar > .bar, :root[data-skin] .chat-header { padding-top: calc(4px + var(--sat)); padding-bottom: 4px; min-height: 0; }
  :root[data-skin] #sidebar > .bar .avatar, :root[data-skin] .chat-header #chat-avatar { width: 34px; height: 34px; font-size: .9rem; }
  :root[data-skin] #home-title, :root[data-skin] #kid-hero, :root[data-skin] #today-card { display: none !important; }
  :root[data-skin="classique"] #sidebar > header.bar:not(#activity .bar) { padding-top: calc(4px + var(--sat)); padding-bottom: 4px; } /* plus fort que l'en-tête Classique de l'accueil */
  :root[data-skin] #conv-search-box { margin-top: 6px; margin-bottom: 6px; }
  :root[data-skin] #conv-search { padding-top: 7px; padding-bottom: 7px; }
  :root[data-skin] #home-tabs button { padding: 2px 4px 3px; font-size: .7rem; }
  :root[data-skin] #home-tabs .ht-ico { height: 24px; }
  :root[data-skin] .composer { padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
}
/* … et clavier ouvert (encore moins de hauteur) : l'en-tête de la discussion s'efface pour laisser voir les messages */
@media (orientation: landscape) and (max-height: 300px) {
  #chat:has(#text-input:is(:focus, .ni-focus)) .chat-header { display: none; }
  /* la liste des discussions laisse toute la largeur à la discussion pendant qu'on écrit (comme WhatsApp) */
  #app:has(#text-input:is(:focus, .ni-focus)) #sidebar { display: none; }
}
/* Zone d'écriture native de l'appli Android (maquette « 51 ») : le champ d'Android est posé par-dessus ; celui de la
   page garde son fond, son bord et sa taille, son texte devient invisible */
#text-input.ni-on { -webkit-text-fill-color: transparent; caret-color: transparent; }
#text-input.ni-on::placeholder { opacity: 0; }
#text-input.ni-on::selection { background: transparent; }
/* Fichier audio : son nom au-dessus du lecteur (maquette Figma « 23 ») */
.voice-name { font-weight: 600; font-size: .92rem; margin: 2px 2px 6px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Retoucher une photo (maquettes Figma « 24a » à « 24d ») ---------- */
#photo-editor { box-shadow: none; animation: none; position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #111; color: #fff; display: flex; flex-direction: column; }
#photo-editor::backdrop { background: #111; }
#photo-editor .pe-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: calc(10px + var(--sat)) 12px 10px; }
#photo-editor .pe-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#photo-editor .pe-pill { border: 0; border-radius: 999px; padding: 9px 14px; background: rgba(255,255,255,.14); color: #fff; font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; min-height: 40px; }
#photo-editor .pe-pill.on { background: #fff; color: #1b2527; font-weight: 700; }
#photo-editor .pe-pill.pe-okmode { background: var(--accent, #1b776d); color: #fff; }
#photo-editor .pe-pill.pe-text { background: transparent; padding-left: 4px; }
#photo-editor .pe-pill.pe-close { background: transparent; font-size: 1.3rem; padding: 6px 10px; }
#photo-editor .pe-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#photo-editor .pe-wrap { position: relative; overflow: hidden; touch-action: none; }
#photo-editor .pe-view, #photo-editor .pe-ink { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#photo-editor .pe-ink { touch-action: none; }
#photo-editor:not(.drawing) .pe-ink { pointer-events: none; }
#photo-editor .pe-crop { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); touch-action: none; cursor: move; }
#photo-editor .pe-h { position: absolute; width: 22px; height: 22px; border-radius: 5px; background: #fff; }
#photo-editor .pe-h[data-h="nw"] { left: -3px; top: -3px; cursor: nwse-resize; }
#photo-editor .pe-h[data-h="ne"] { right: -3px; top: -3px; cursor: nesw-resize; }
#photo-editor .pe-h[data-h="sw"] { left: -3px; bottom: -3px; cursor: nesw-resize; }
#photo-editor .pe-h[data-h="se"] { right: -3px; bottom: -3px; cursor: nwse-resize; }
#photo-editor .pe-tools { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px 12px 0; }
#photo-editor .pe-tools:empty { display: none; }
#photo-editor .pe-colors { gap: 12px; }
#photo-editor .pe-color { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); padding: 0; cursor: pointer; }
#photo-editor .pe-color.on { box-shadow: 0 0 0 3px #111, 0 0 0 5px #fff; }
#photo-editor .pe-bottom { display: flex; align-items: center; gap: 10px; padding: 12px 12px calc(14px + env(safe-area-inset-bottom)); }
#photo-editor .pe-bottom:empty { display: none; }
#photo-editor #pe-caption { flex: 1; min-width: 0; border: 0; border-radius: 24px; padding: 13px 16px; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 1rem; }
#photo-editor #pe-caption::placeholder { color: rgba(255,255,255,.6); }
#photo-editor .pe-send { margin-left: auto; min-width: 52px; height: 52px; border-radius: 26px; border: 0; background: var(--accent, #1b776d); color: #fff; font: inherit; font-size: 1.2rem; font-weight: 700; padding: 0 16px; cursor: pointer; }


/* Couleur de la pastille de son planning (maquette Figma « 21g ») */
.plan-color-card { display: grid; gap: 10px; margin: 0 0 12px; padding: 14px 16px; border-radius: 16px; background: var(--panel); }
.plan-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.plan-color { width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; }
.plan-color.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 5px var(--text); }

/* « Continuer avec Google » (maquettes Figma « 26 ») */
.google-box { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 2px; }
.google-box.hidden { display: none; }
.google-slot { display: flex; justify-content: center; min-height: 44px; }
/* Le bouton de Google est une fenêtre intégrée dont la page ne déclare pas de couleurs : en mode Nuit, le navigateur
   lui mettait un fond blanc opaque, un cadre blanc autour du bouton (vu le 25 octobre). Même réglage que sa page :
   fond transparent */
.google-slot iframe { color-scheme: light; }
.google-own { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; border-radius: 14px; border: 1.5px solid var(--line, #d6d2c8); background: #fff; color: #1b2a2a; font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; }
.google-own img, .g-logo { width: 22px; height: 22px; flex: none; }
.btn .g-logo { margin-right: 10px; vertical-align: -5px; }
.or-sep { display: flex; align-items: center; gap: 10px; color: var(--muted, #4f5a5a); font-size: .85rem; }
.or-sep::before, .or-sep::after { content: ''; flex: 1; height: 1px; background: var(--line, #e2ddd3); }
.google-unknown { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, #2a9d8f 12%, transparent); font-size: .9rem; text-align: left; }
.google-unknown.hidden { display: none; }

/* Famille en lignes (maquette « 36 »), tous thèmes : prénom et type sur une ligne, identifiant et appli sur une autre,
   sans retour à la ligne ; « à mettre à jour » en ambre, discret ; la flèche ouvre la fiche */
#members-list li.member-card { grid-template-columns: 52px minmax(0, 1fr) auto; }
#members-list li.member-card.has-sheet { cursor: pointer; }
#members-list .member-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
#members-list .member-head { flex-wrap: nowrap; min-width: 0; }
#members-list .member-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.member-meta .app-version.old { color: #b26a00; }
:root[data-theme="dark"] .member-meta .app-version.old { color: #e9a23b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .member-meta .app-version.old { color: #e9a23b; } }
.member-chev { font-size: 1.5rem; line-height: 1; color: var(--muted); padding-left: 4px; }
:root[data-skin="classique"] .member-chev { width: 20px; height: 20px; font-size: 0; background-color: var(--muted); -webkit-mask: url("/themes/classique/icones/chevron.svg") center / contain no-repeat; mask: url("/themes/classique/icones/chevron.svg") center / contain no-repeat; }
/* Fiche d'une personne (maquette « 36b/36c ») */
.member-sheet-top { display: grid; justify-items: center; gap: 6px; margin: 4px 0 18px; text-align: center; }
.member-sheet-top .avatar { width: 88px; height: 88px; font-size: 2rem; cursor: pointer; margin-bottom: 6px; }
.member-sheet-top .member-head { justify-content: center; flex-wrap: wrap; }
.member-sheet-top .member-name { font-size: 1.35rem; }
.member-sheet-top .member-meta { color: var(--muted); font-size: .85rem; }
#member-sheet .set-group .set-val, #kid-title-btn .set-val { margin-left: auto; color: var(--muted); font-weight: 500; }
:root[data-skin="classique"] #member-sheet .set-group > .btn:has(.set-val)::after { margin-left: 8px; }
#member-sheet .set-group + .set-group { margin-top: 14px; }

/* Lien YouTube dans une bulle (maquette « 37 ») : miniature 16:9 avec le bouton de lecture, titre (2 lignes au plus),
   chaîne ; puis le lien raccourci et « Regarder ensemble » */
.bubble.has-yt { width: min(300px, 78vw); }
.yt-card { display: grid; gap: 4px; margin-bottom: 6px; }
.yt-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #1b2228; cursor: pointer; margin-bottom: 4px; }
.yt-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yt-thumb.no-img img { visibility: hidden; }
/* Maquette « 40b » : le logo YouTube au milieu, « Ouvrir dans YouTube » en bas à gauche (la miniature ouvre l'appli) */
.yt-logo { position: absolute; inset: 0; margin: auto; width: 60px; height: 42px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M66.5 7.5c-.8-3-3.1-5.3-6-6C55.2 0 34 0 34 0S12.8 0 7.5 1.5c-3 .8-5.3 3.1-6 6C0 12.8 0 24 0 24s0 11.2 1.5 16.5c.8 3 3.1 5.3 6 6C12.8 48 34 48 34 48s21.2 0 26.5-1.5c3-.8 5.3-3.1 6-6C68 35.2 68 24 68 24s0-11.2-1.5-16.5z' fill='%23f00'/%3E%3Cpath d='M27 34.3 45 24 27 13.7z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; }
.yt-open { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 10px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .72rem; font-weight: 600; line-height: 1.3; }
.yt-title { font-size: .95rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-title:empty, .yt-chan:empty { display: none; }
.yt-chan { color: var(--muted); font-size: .82rem; }
.bubble.has-yt a.link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
/* Maquette « 41d » : l'adresse remplacée par le titre de la carte (titre en gras, 2 lignes au plus, à sa place) */
.bubble a.link.url-replaced { display: none; }
.yt-card .link-host { margin-top: -2px; }
.yt-card { margin-bottom: 0; margin-top: 4px; }
.yt-title { font-weight: 700; }
.link-title { font-weight: 700; }
/* Aperçu des autres liens (maquette « 41 ») : la carte sous le texte, préparée par le serveur */
.bubble.has-link { width: min(300px, 78vw); }
.bubble.has-link > a.link { font-size: .88rem; font-weight: 500; word-break: break-all; }
.link-card { display: grid; gap: 4px; margin-top: 8px; color: inherit; text-decoration: none; min-width: 0; }
.link-img { position: relative; display: block; width: 100%; aspect-ratio: 1.91; border-radius: 12px; overflow: hidden; background: color-mix(in srgb, currentColor 10%, transparent); margin-bottom: 4px; }
.link-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.link-open { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 10px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .72rem; font-weight: 600; line-height: 1.3; }
.link-card.with-icon { grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.link-ico { display: block; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, currentColor 8%, transparent); }
.link-ico img { display: block; width: 100%; height: 100%; object-fit: cover; }
.link-body { display: grid; gap: 4px; min-width: 0; }
.link-card.with-icon.no-title .link-body { align-self: center; }
.link-card.with-icon.no-title .link-host { font-size: .95rem; color: inherit; }
.link-site, .link-desc { color: var(--muted); font-size: .82rem; line-height: 1.35; overflow-wrap: anywhere; }
.link-title { font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.link-title, .link-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-host { color: var(--accent-text-on, var(--accent)); font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-card.loading .sk { display: block; border-radius: 6px; background: color-mix(in srgb, currentColor 12%, transparent); }
.link-card.loading .link-img.sk { border-radius: 12px; aspect-ratio: 2.2; }
.link-card.loading .sk-line { height: 13px; width: 80%; }
.link-card.loading .sk-line.short { width: 50%; }
.link-wait { color: var(--muted); font-size: .76rem; font-weight: 500; }
@media (prefers-reduced-motion: no-preference) { .link-card.loading .sk { animation: link-pulse 1.2s ease-in-out infinite alternate; } }
@keyframes link-pulse { from { opacity: .55; } to { opacity: 1; } }

/* Invitation « Regarder ensemble » qui sonne (maquette « 38 ») */
.act-ring { position: fixed; top: calc(var(--sat) + 64px); left: 50%; transform: translateX(-50%); z-index: 30; padding: 7px 14px; border-radius: 999px; background: #2a9d8f; color: #fff; font-weight: 700; font-size: .875rem; box-shadow: 0 4px 14px rgba(0,0,0,.25); white-space: nowrap; }
/* Séance « YouTube ensemble » (maquette « 40c ») : une ligne, le titre de la vidéo dessous en petit */
.activity-card .act-title { flex-basis: 100%; text-align: center; color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-card .act-title:empty { display: none; }
.activity-card.expired .act-line { color: var(--muted); }

/* Apparence (maquette « 39d ») : l'affichage simplifié sous l'aperçu de la taille du texte, séparé par un filet */
.ap-card .ap-sep { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ---------- Tablette (maquette Figma « 43 », 18 octobre) ----------
   Portrait (761 px et plus) : la colonne des discussions fait 360 px ; Agenda et Tâches prennent toute la largeur.
   Paysage (900 px et plus) : colonne de 400 px (440 px en thème enfant) ; Agenda et Tâches en deux volets : le mois
   (ou le héros des tâches) à gauche, la journée touchée (ou « À faire ») à droite — les blocs sont déplacés par
   app.js (tabletLayout), pas copiés ; bulles limitées à 60 % du volet ; thème enfant plus grand. */
@media (min-width: 761px) {
  #sidebar { width: 360px; }
  #app:has(#sidebar:is([data-tab="agenda"], [data-tab="tasks"])) #sidebar { width: 100%; border-right: 0; }
  #app:has(#sidebar:is([data-tab="agenda"], [data-tab="tasks"])) #chat { display: none; }
  /* Pas de bouton retour en large (les thèmes Classique et enfants le réaffichaient avec leurs icônes) */
  :root[data-skin] #back-btn { display: none; }
  /* Aucune discussion ouverte, thème enfant : la mascotte en grand, le texte dans une bulle blanche */
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #chat .placeholder { gap: 18px; align-content: center; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #chat .placeholder .mascot { width: 240px; height: 240px; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #chat .placeholder > span:not(.mascot) { padding: 14px 22px; background: #fff; border-radius: 22px; box-shadow: var(--m-ombre); font: 600 1.35rem var(--titres); color: var(--encre); }
}
@media (min-width: 900px) {
  #sidebar { width: 400px; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #sidebar { width: 440px; }
  .msg { max-width: min(60%, 600px); }
  /* Agenda : deux volets */
  .orga-body { display: grid; grid-template-columns: minmax(400px, 38%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .orga-body > [data-orga="agenda"] { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; }
  /* Le mois remplit exactement la hauteur de la colonne (il la débordait : chaque semaine gardait 100 px au moins) */
  .orga-body > [data-orga="agenda"] > #orga-cal { flex: 1; min-height: 0; }
  .cal-week { min-height: 72px; }
  .orga-body > [data-orga="agenda"].ag-mode { grid-column: 1 / -1; }
  .orga-body:has(> [data-orga="agenda"].ag-mode:not(.hidden)) #orga-side { display: none; }
  #orga-side { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 12px 24px 24px; border-left: 1px solid var(--line); background: var(--bg); }
  .orga-body:has(> [data-orga="tasks"]:not(.hidden)) #orga-side { display: none; }
  #orga-side > #plan-today { padding: 4px 0 8px; }
  #orga-side > .cal-sheet { position: static; flex: 1; max-height: none; padding: 0; background: transparent; border-radius: 0; box-shadow: none; animation: none !important; }
  #orga-side > .cal-sheet .cal-sheet-head { background: transparent; padding: 4px 0 10px; }
  #orga-side > .cal-sheet .cal-sheet-head strong { font-size: 1.5rem; }
  .cal-scrim { display: none !important; }
  /* Fiche, formulaire, planning, calendriers liés, rappels : dans le volet de droite, le mois reste visible */
  .orga-over { grid-column: 2; grid-row: 1; position: relative; inset: auto; border-left: 1px solid var(--line); }
  .orga-over > :not(header) { width: min(100%, 680px); margin-left: auto; margin-right: auto; }
  /* Thème Classique : le bouton + reste visible à côté de la journée (il se cachait quand la journée était ouverte) */
  :root[data-skin="classique"] #sidebar[data-tab="agenda"] #orga-pane:has(#cal-sheet:not(.hidden)):not(:has(.orga-over:not(.hidden), #orga-events:not(.hidden))) > #cal-new { display: inline-flex; }
  :root[data-skin="classique"] #orga-pane > #cal-new { bottom: 24px; right: 24px; }
  /* Tâches : deux colonnes */
  /* (plus précis que la règle Classique « section[data-orga=tasks]:not(.hidden) { display: flex } ») */
  :root[data-skin] .orga-body > section[data-orga="tasks"]:not(.hidden) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(360px, 36%) minmax(0, 1fr); gap: 0 24px; align-content: start; padding: 12px 24px 24px; }
  .tasks-col { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
  .tasks-col > .orga-h:first-child { margin-top: 4px; }
  /* Thème enfant : mascotte, bulle, recherche, lignes, onglets et conversation vide plus grands (×1,1 à ×1,35) */
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #kid-hero { height: 150px; padding-right: 18px; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #kid-hero > .kh-mascot { width: 176px; height: 176px; margin-bottom: -44px; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .kh-bubble { padding: 14px 18px; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #kh-hello { font-size: 1.5rem; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #kh-line { font-size: 1.02rem; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #conv-search { height: 52px; font-size: 1.05rem; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #conv-list li { padding: 14px 16px; gap: 14px; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #conv-list .avatar { width: 58px; height: 58px; font-size: 1.45rem; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #conv-list strong { font-size: 1.22rem; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #conv-list small { font-size: 1rem; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #home-tabs button { padding: 8px 4px; font-size: .9rem; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #home-tabs .ht-ico { width: 36px; height: 32px; background-size: 30px; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #home-tabs button.on .ht-ico { background-size: 32px; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .bubble:not(.media) { font-size: 1.12rem; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .composer textarea { font-size: 1.1rem; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .chat-empty { padding-top: 10vh; gap: 18px; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .chat-empty .ce-mascot { width: 240px; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .ce-bubble strong { font-size: 1.6rem; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .ce-bubble span { font-size: 1.02rem; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .ce-chips { max-width: 460px; gap: 10px; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .ce-chip { padding: 12px 20px; font-size: 1.1rem; }
  /* Thème enfant, Agenda et Tâches : volet droit teinté, journée en Fredoka, héros plus grand */
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #orga-side { background: color-mix(in srgb, #fff 40%, var(--bg)); border-left: 0; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) #orga-side > .cal-sheet .cal-sheet-head strong { font: 600 1.7rem var(--titres); color: var(--encre); }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .hero-mascot { width: 110px; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .hero-stars { font-size: 2.6rem; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .cal-num { font-size: 1.05rem; min-width: 26px; height: 26px; line-height: 26px; }
  :root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .cal-week { min-height: 56px; }
}

/* ---------- Appui simple sur une bulle (maquette Figma « 44 ») : voile, bulle nette, emojis, menu ---------- */
.tap-veil, .tap-veil-out { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .2); animation: scrim-in .15s ease-out; }
.tap-copy, .tap-copy-out { position: fixed !important; z-index: 81; margin: 0 !important; box-sizing: border-box; pointer-events: none; box-shadow: 0 6px 22px rgba(0, 0, 0, .25) !important; }
.tap-copy-reac, .tap-copy-reac-out { position: fixed !important; z-index: 82; margin: 0 !important; pointer-events: none; }
/* Maquette « 65 » (comme Telegram) : la pastille et le menu grandissent depuis l'endroit touché, les émojis arrivent
   l'un après l'autre avec un petit rebond ; à la fermeture, tout rétrécit et s'efface */
.tap-react, .tap-react-out { display: flex; z-index: 82 !important; animation: tap-grow var(--tap-in) var(--tap-ease); }
.tap-react > button { animation: tap-pop var(--tap-pop) var(--tap-pop-ease) both; }
.tap-menu, .tap-menu-out { position: fixed; z-index: 82; min-width: var(--tap-menu-min); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-x: hidden; overflow-y: auto; padding: 6px 0;
  background: var(--panel); color: var(--text); border-radius: 16px; box-shadow: 0 10px 34px rgba(0, 0, 0, .28); animation: tap-grow var(--tap-in) var(--tap-ease); }
.tap-page-old { position: absolute; left: 0; pointer-events: none; }
.tap-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: var(--tap-item-pad); border: 0; background: none; color: inherit; font: inherit; font-size: var(--tap-item-size); font-weight: var(--tap-item-weight); text-align: left; cursor: pointer; }
.tap-item:active, .tap-item:hover { background: var(--bg); }
.tap-item.danger { color: #d0453b; }
.tap-read { font-size: .86rem; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tap-back { border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tap-read .tap-seen { width: 100%; }
/* Icônes des actions : les dessins au trait du thème Classique, de la couleur du texte (rouge pour Supprimer) */
.tap-ico { flex: none; width: 22px; height: 22px; background: var(--muted); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.tap-item:not(.danger) .tap-ico { background: var(--text); opacity: .72; }
.tap-item.danger .tap-ico { background: currentColor; }
.tap-ico[data-i="repondre"] { --i: url("/themes/classique/icones/repondre.svg"); }
.tap-ico[data-i="copier"] { --i: url("/themes/classique/icones/copier.svg"); }
.tap-ico[data-i="transferer"] { --i: url("/themes/classique/icones/transferer.svg"); }
.tap-ico[data-i="crayon"] { --i: url("/themes/classique/icones/crayon.svg"); }
.tap-ico[data-i="pinceau"] { --i: url("/themes/classique/icones/pinceau.svg"); }
.tap-ico[data-i="telecharger"] { --i: url("/themes/classique/icones/telecharger.svg"); }
.tap-ico[data-i="partager"] { --i: url("/themes/classique/icones/partager.svg"); }
.tap-ico[data-i="coche"] { --i: url("/themes/classique/icones/coche.svg"); }
.tap-ico[data-i="corbeille"] { --i: url("/themes/classique/icones/corbeille.svg"); }
.tap-ico[data-i="retour"] { --i: url("/themes/classique/icones/retour.svg"); }
.tap-ico[data-i="chevron"] { --i: url("/themes/classique/icones/chevron.svg"); transform: rotate(90deg); width: 18px; height: 18px; }
.tap-react .react-more { display: grid; place-items: center; }
/* Maquette « 70 » (comme Telegram) : tailles du menu d'un message, de son panneau ⌄ et de la flèche ↓. Seule source :
   les règles s'en servent, la page les lit (placement) et les envoie à Android, qui dessine avec (rien d'écrit ailleurs) */
:root {
  --tap-edge: 8px;                    /* écart avec les bords de l'écran */
  --tap-gap: 8px;                     /* entre la bulle, la pastille et le menu */
  /* Glisser un message pour y répondre : bords de l'écran laissés au geste « retour », distance pour que le geste parte
     (et, verticale, pour qu'il soit abandonné), course au plus, seuil où relâcher répond, icône ↩ (taille, écart avec
     la bulle), retour en place ; la page les lit, Android les reçoit (28 octobre : écrits dans le JavaScript et le Kotlin) */
  --swipe-edge: 24px; --swipe-start: 14px; --swipe-cancel: 12px; --swipe-max: 90px; --swipe-ready: 60px;
  --swipe-ico: 28px; --swipe-ico-gap: 6px; --swipe-back: 180ms;
  --tap-finger: 24px;                 /* maquette 75 (comme Telegram) : bord gauche du menu, à gauche du doigt */
  /* (chasse aux sauts, 31 octobre : texte du téléphone agrandi, petit écran, la pastille dépassait à droite et son
     « + » était coupé ; elle ne dépasse plus jamais la largeur de l'écran : 6 émojis et « + » dans 100vw − 52px) */
  --tap-emoji: min(1.375rem, calc((100vw - 52px) / 7 * .61)); /* pastille : émojis de 22… */
  --tap-cell: min(2.25rem, calc((100vw - 52px) / 7));         /* … dans des cases de 36… */
  --tap-cell-r: 10px;
  --tap-pad: 3px 6px;                 /* … soit 42 de haut */
  --tap-more: min(1.875rem, calc((100vw - 52px) / 7 * .83));  /* ⌄ : 30 */
  --tap-menu-min: 12.5rem;            /* menu : 200 de large au moins, */
  --tap-item-size: .9375rem;          /* texte de 15, */
  --tap-item-weight: 500;
  --tap-item-pad: 9px 18px 9px 16px;  /* lignes de 40 */
  /* Mouvements du menu (maquette « 65 », comme Telegram), lus aussi par la page et par Android (28 octobre : écrits
     dans le JavaScript et le Kotlin) */
  --tap-in: .2s;                      /* la pastille et le menu grandissent depuis le doigt (de --tap-in-scale), */
  --tap-in-scale: .85;
  --tap-ease: cubic-bezier(.2, .8, .2, 1);
  --tap-pop: .32s;                    /* chaque émoji arrive avec un rebond (de --tap-pop-scale) : le premier après */
  --tap-pop-scale: .3;                /* --tap-pop-wait, puis un toutes les --tap-pop-step ; */
  --tap-pop-ease: cubic-bezier(.3, 1.6, .5, 1);
  --tap-pop-wait: 40ms;
  --tap-pop-step: 28ms;
  --tap-page: 220ms;                  /* une page du menu (« qui a lu », « Retour ») glisse d'un peu plus du tiers ; */
  --tap-page-slide: .35;
  --tap-out: .12s;                    /* fermé : tout rétrécit (à --tap-out-scale) et s'efface ; */
  --tap-out-scale: .92;
  --tap-gone-y: 12px;                 /* ⌄ : le menu s'efface en glissant vers le bas, la pastille s'efface ; */
  --tap-gone-fade: .16s;
  --tap-gone-move: .2s;
  --tap-gone-bar: .1s;
  --emo-in: 260ms;                    /* le panneau grandit depuis ⌄ (de --emo-in-scale), son contenu paraît après */
  --emo-in-scale: .12;                /* --emo-fade-at de ce temps ; */
  --emo-fade-at: .35;
  --emo-tab-at: 8px;                  /* onglet souligné : la catégorie dont le titre est en haut, à 8 près */
  --emo-w: 20rem;                     /* panneau ⌄ : 320 × 300 (moins haut seulement si la place manque), */
  --emo-h: 18.75rem;
  --emo-cell: 2.375rem;               /* cases de 38 au moins sur 40, */
  --emo-cell-h: 2.5rem;
  --emo-size: 1.75rem;                /* émojis de 28 (maquette 95C : même panneau, émojis plus grands, comme Telegram) */
  --emo-tab: 1.25rem;                 /* onglets de 20 */
  --down-size: 2.75rem;               /* flèche ↓ : 44, */
  --down-gap: 12px;                   /* à 12 du bord droit et du bas de la discussion, */
  --down-off-scale: .6;               /* rétrécie quand elle s'en va */
}
.tap-react { padding: var(--tap-pad); }
.tap-react > button:not(.react-more) { font-size: var(--tap-emoji); width: var(--tap-cell); height: var(--tap-cell); padding: 0; line-height: 1; display: grid; place-items: center; border-radius: var(--tap-cell-r); }
.menu-reactions.tap-react button.react-more { width: var(--tap-more); height: var(--tap-more); }
.tap-emojis .emoji-grid { grid-template-columns: repeat(auto-fill, minmax(var(--emo-cell), 1fr)); }
.tap-emojis .emoji-pick { height: var(--emo-cell-h); font-size: var(--emo-size); border-radius: var(--tap-cell-r); }
.tap-emojis .emoji-tab { font-size: var(--emo-tab); }
/* ⌄ : le panneau de tous les émojis prend la place de la pastille ; le menu s'efface en glissant un peu */
.tap-emojis, .tap-emojis-out { position: fixed; z-index: 83; display: flex; flex-direction: column; overflow: hidden; padding: 6px 8px 0; border-radius: 20px;
  background: var(--panel); color: var(--text); box-shadow: 0 10px 34px rgba(0, 0, 0, .28); }
.tap-gone { opacity: 0; pointer-events: none; transform: translateY(var(--tap-gone-y)); transition: opacity var(--tap-gone-fade) ease-out, transform var(--tap-gone-move) ease-out; }
.tap-react.tap-gone { transform: none; transition-duration: var(--tap-gone-bar); }
.tap-out { pointer-events: none; animation: tap-shrink var(--tap-out) ease-in forwards !important; }
.tap-veil-out, .tap-copy-out, .tap-copy-reac-out { animation: tap-fade var(--tap-out) ease-in forwards !important; }
@keyframes tap-grow { from { opacity: 0; transform: scale(var(--tap-in-scale)); } }
@keyframes tap-pop { from { opacity: 0; transform: scale(var(--tap-pop-scale)); } }
@keyframes tap-shrink { to { opacity: 0; transform: scale(var(--tap-out-scale)); } }
@keyframes tap-fade { to { opacity: 0; } }
.tap-readers { display: grid; gap: 2px; padding: 2px 8px 6px; min-width: 240px; }
.tap-readers > p { margin: 8px 10px; }
.tap-reader { display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
.tap-reader .avatar { width: 38px; height: 38px; flex: none; }
.tap-reader .grow { display: grid; min-width: 0; }
.tap-reader small.read { color: #34b7f1; }
/* (pas de « will-change » permanent : Chrome gardait l'image de la barre dessinée au début de l'animation, petite, et
   les émojis restaient flous, comme délavés ; 26 octobre. Pendant l'animation, il la met à part tout seul) */
/* Clavier d'Android ouvert (appli) : les émojis et le menu sont dessinés par Android, par-dessus le clavier ; ceux de la
   page restent, invisibles (chaque toucher dans le menu d'Android touche le même bouton ici) */
.tap-native { visibility: hidden !important; pointer-events: none !important; }
@media (prefers-reduced-motion: reduce) { .tap-veil, .tap-react, .tap-react > button, .tap-menu, .tap-out, .tap-veil-out, .tap-copy-out, .tap-copy-reac-out { animation: none !important; } .tap-gone { transition: none; } }
/* Thèmes enfants : plus grand et plus arrondi */
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .tap-menu { border-radius: 22px; }
:root:is([data-skin="mascotte"], [data-skin="espace"], [data-skin="licorne"], [data-skin="dinos"], [data-skin="ocean"]) .tap-item { font-family: var(--titres); font-size: 1.08rem; font-weight: 600; padding: 13px 20px; }

/* Menu de l'appui simple : « ✓✓ Fils de brute » + sa photo, ou « ✓✓ 2 vues » + photos empilées, comme Telegram */
.tap-read .tap-seen { display: flex; align-items: center; gap: 10px; }
.tap-seen-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: .98rem; font-weight: 600; }
.tap-seen-txt .ticks { margin: 0 9px 0 0; font-size: .7rem; vertical-align: 1px; }
.tap-seen-avs { display: flex; flex: none; }
.tap-seen-avs .avatar { width: 28px; height: 28px; font-size: .75rem; border: 2px solid var(--panel); box-sizing: content-box; }
.tap-seen-avs .avatar + .avatar { margin-left: -10px; }

/* ---------- Carte flottante d'une photo de profil (maquette « 49 », comme WhatsApp) ---------- */
.peek { position: fixed; inset: 0; z-index: 90; }
.peek-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.peek-card { position: absolute; left: 50%; top: max(96px, 14vh); width: min(280px, 74vw); margin-left: calc(min(280px, 74vw) / -2); border-radius: 6px; overflow: visible; background: #182022; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.peek-photo { display: grid; place-items: center; width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px 6px 0 0; border: 0; padding: 0; font-size: 5rem; color: #fff; background-size: cover; background-position: center; cursor: pointer; transform-origin: 0 0; }
.peek-photo.online::after { display: none; }
.peek-name { position: absolute; left: 0; right: 0; top: 0; padding: 10px 14px; border-radius: 6px 6px 0 0; color: #fff; font-weight: 700; font-size: 1.15rem; background: rgba(0,0,0,.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.peek-actions { display: flex; justify-content: space-around; padding: 6px 4px; }
.peek-actions .icon-btn { width: 52px; height: 44px; color: #4fc2a8; background: none; display: grid; place-items: center; }
.peek-actions svg { width: 26px; height: 26px; }
.conv-list .avatar, #conv-list .avatar { cursor: pointer; }
/* Transitions plus douces (maquette « 49 ») : fenêtres et menus apparaissent en fondu avec un léger zoom */
@keyframes dlg-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.88); } }
@media (prefers-reduced-motion: no-preference) {
  dialog[open]:not(.menu-dialog):not(#photo-editor) { animation: dlg-in .22s cubic-bezier(.2, .8, .2, 1); }
  dialog[open]::backdrop { animation: scrim-in .22s ease-out; }
  #msg-menu, #viewer-menu { animation: pop-in .16s cubic-bezier(.2, .8, .2, 1); transform-origin: top right; }
  #attach-menu:not(.hidden) { animation: pop-in .16s cubic-bezier(.2, .8, .2, 1); transform-origin: bottom left; }
}
/* Essai caché : liste des messages dessinée par Android (26 octobre). Les bulles de la page restent là, invisibles */
#messages.nl-on > * { visibility: hidden !important; }
/* Maquette « 69 » : messages à la suite d'une même personne (moins de 5 min) : le pseudo seulement sur la première
   bulle, bulles collées à 2 px, coin de 6 px là où elles se touchent (la « queue » du thème reste en bas) */
#messages > .msg.grp-prev > .author { display: none; }
#messages > .msg.grp-tight { margin-top: -2px; }
#messages > .msg.theirs.grp-tight > .bubble:not(.media) { border-top-left-radius: 6px; }
#messages > .msg.mine.grp-tight > .bubble:not(.media) { border-top-right-radius: 6px; }
#messages > .msg.theirs.grp-next > .bubble:not(.media) { border-bottom-left-radius: 6px; }
#messages > .msg.mine.grp-next > .bubble:not(.media) { border-bottom-right-radius: 6px; }
/* Flèche ↓ (maquette « 70 », comme Telegram ; tailles plus haut, --down-…) : remonté de plus d'un écran, elle ramène tout
   en bas ; la pastille compte les messages arrivés pendant ce temps. La page donne le coin bas droit de la discussion
   (--x, --y). Liste dessinée par Android : la sienne, celle-ci est cachée */
.to-bottom { position: fixed; z-index: 6; left: calc(var(--x, 0px) - var(--down-gap) - var(--down-size)); top: calc(var(--y, 0px) - var(--down-gap) - var(--down-size));
  width: var(--down-size); height: var(--down-size); padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel); color: var(--text); box-shadow: 0 3px 10px rgba(0, 0, 0, .22); cursor: pointer; transition: opacity .15s, transform .15s; }
.to-bottom .tap-ico { background: currentColor; }
.to-bottom.off { opacity: 0; transform: scale(var(--down-off-scale)); pointer-events: none; visibility: hidden; transition: opacity .15s, transform .15s, visibility 0s .15s; }
.to-bottom-n { position: absolute; top: -8px; right: -2px; min-width: 20px; box-sizing: border-box; padding: 1px 6px; border-radius: 10px;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 16px; text-align: center; }
#messages.nl-on ~ .to-bottom { display: none; }
@media (prefers-reduced-motion: reduce) { .to-bottom { transition: none; } }

/* ---------- Maquette « 83 » (30 octobre, validée) : finition du thème Classique inspirée de WhatsApp ----------
   Accueil blanc, titre en couleur à côté de la photo, recherche en champ gris, filtres en pastilles, carte « Aujourd'hui »
   démarquée, liste pleine largeur sans filets, bouton flottant « écrire » ; discussion sur un fond beige uni (sans fond
   choisi ; les motifs de la maquette ont été retirés à la demande de l'utilisateur, 30 octobre), en-tête opaque,
   bulles à coins de --radius avec une queue sur la première d'une suite, nom de
   l'auteur dans la bulle, pastille de date blanche, barre d'écriture en pilule (trombone dedans) et micro rond ;
   agenda sur fond blanc, rendez-vous en lignes (icône ronde teintée), jours en petites capitales, + carré arrondi.
   Une seule source : ces variables, lues par la page (et la liste d'Android, qui recopie ce que la page dessine). */
:root[data-skin="classique"] {
  --home-bg: var(--panel); --head-solid: #FFFFFF;
  --nav-bg: #F7F8FA; --foot-solid: #F7F8FA;
  --chat-bg: #EFEAE2;
  --hd-veil: 100%; --hd-blur: 0px;
  --radius: 12px; --bubble-tail: 8px; --bubble-tail-h: 10px; --bubble-shadow: 0 1px .5px rgba(11, 20, 26, .13);
  --title-fs: 1.5rem; --title-lh: 2rem;
  --row-h: 74px; --row-av: 52px; --row-name: 1.0625rem; --row-sub: .9375rem; --row-time: .75rem; --badge: 22px;
  --chip-h: 32px; --chip-fs: .8125rem;
  --fab: 56px; --fab-r: 16px; --fab-ico: 24px; --fab-shadow: 0 4px 12px rgba(17, 27, 33, .2);
  --card-r: 12px; --today-tile-w: 44px; --today-tile-h: 48px; --today-tile-r: 10px;
  --ag-ico: 48px; --ag-ico-glyph: 22px; --ag-ico-gap: 14px; --ag-band: 8px;
}
/* (maquette 88a, validée le 31 octobre, « Black oled oui » : fond de la discussion noir comme l'accueil, au lieu du
   gris-bleu #0B141A de WhatsApp ; sur un écran AMOLED, ses pixels sont éteints) */
:root[data-skin="classique"][data-theme="dark"] {
  --home-bg: #000000; --nav-bg: #000000; --foot-solid: #000000;
  --chat-bg: #000000; --bubble-shadow: 0 1px .5px rgba(0, 0, 0, .45); --fab-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="classique"]:not([data-theme="light"]) {
    --home-bg: #000000; --nav-bg: #000000; --foot-solid: #000000;
    --chat-bg: #000000; --bubble-shadow: 0 1px .5px rgba(0, 0, 0, .45); --fab-shadow: 0 4px 12px rgba(0, 0, 0, .5);
  }
}
/* 1 · accueil blanc ; « Discussions » en couleur, à droite de la photo */
:root[data-skin="classique"] #sidebar { background: var(--home-bg); }
:root[data-skin="classique"] #sidebar > header.bar:not(#activity .bar) { background: var(--home-bg); padding: calc(8px + var(--sat)) 12px 6px 16px; }
:root[data-skin="classique"] #sidebar > .bar #home-title { font-size: var(--title-fs); line-height: var(--title-lh); font-weight: 700; letter-spacing: -.3px; color: var(--accent); }
/* 2 · recherche : champ gris */
:root[data-skin="classique"] #conv-search-box { margin: 6px 12px 10px; }
:root[data-skin="classique"] #conv-search { background: var(--panel-2); }
/* 3 · filtres : Toutes · Non lues · Groupes (cachés avec les autres thèmes, en mode enfant et simplifié) */
#conv-filters { display: none; }
:root[data-skin="classique"] #conv-filters { display: flex; gap: 8px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none; }
:root[data-skin="classique"] #conv-filters::-webkit-scrollbar { display: none; }
:root[data-skin="classique"] #conv-filters button { flex: none; height: var(--chip-h); padding: 0 14px; border: 0; border-radius: calc(var(--chip-h) / 2); background: var(--panel-2); color: var(--muted); font: inherit; font-size: var(--chip-fs); font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:root[data-skin="classique"] #conv-filters button.on { background: var(--accent-doux); color: var(--accent); font-weight: 600; }
body.mode-petit #conv-filters, body.mode-simple #conv-filters, #sidebar[data-tab="agenda"] #conv-filters, #sidebar[data-tab="tasks"] #conv-filters { display: none !important; }
/* 4 · « Aujourd'hui » : carte démarquée (vert doux, tuile de date avec le mois et le jour). Maquette 90C (31 octobre) :
   plus de repère à gauche (bordure sur une carte aux coins arrondis : un croissant de lune), marges égales */
:root[data-skin="classique"] #today-card { margin: 0 12px 8px; padding: 8px 12px; gap: 12px; border: 0; border-radius: var(--card-r); background: var(--accent-doux); box-shadow: none; }
:root[data-skin="classique"] #today-card .today-ico { display: grid; align-content: center; justify-items: center; row-gap: 2px; width: var(--today-tile-w); height: var(--today-tile-h); border-radius: var(--today-tile-r); background-color: var(--panel); -webkit-mask: none; mask: none; text-indent: 0; overflow: hidden; font-size: 0; line-height: 1; }
:root[data-skin="classique"] #today-card .today-ico::before { content: attr(data-m); position: static; inset: auto; width: auto; height: auto; background: none; -webkit-mask: none; mask: none; font-size: .5625rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--accent); }
:root[data-skin="classique"] #today-card .today-ico::after { content: attr(data-d); font-size: 1.25rem; font-weight: 700; color: var(--text); }
:root[data-skin="classique"] #today-card .today-when { color: var(--accent); }
:root[data-skin="classique"] #today-card .today-go { background-color: var(--accent); }
/* (cartes d'installation, de notifications, d'e-mail : alignées sur la même marge que la carte « Aujourd'hui ») */
:root[data-skin="classique"] :is(#setup-card, #app-card, #email-card, #demo-card) { margin-left: 12px; margin-right: 12px; }
/* 5 · liste : lignes de --row-h, photo de --row-av, nom et aperçu plus grands, badge rond */
:root[data-skin="classique"] #conv-list li { min-height: var(--row-h); }
:root[data-skin="classique"] #conv-list li > .avatar { width: var(--row-av); height: var(--row-av); }
:root[data-skin="classique"] #conv-list strong { font-size: var(--row-name); }
:root[data-skin="classique"] #conv-list .conv-text small { font-size: var(--row-sub); }
:root[data-skin="classique"] #conv-list .conv-time { font-size: var(--row-time); }
:root[data-skin="classique"] #conv-list .badge { box-sizing: border-box; min-width: var(--badge); height: var(--badge); padding: 0 6px; line-height: var(--badge); border-radius: calc(var(--badge) / 2); font-size: .75rem; }
/* 6 · bouton flottant « écrire » (nouveau groupe) : carré arrondi, comme celui de l'agenda */
#conv-new { display: none; }
#conv-new[hidden] { display: none !important; }
:root[data-skin="classique"] #sidebar:not([data-tab="agenda"]):not([data-tab="tasks"]) #conv-new { position: absolute; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 4; display: inline-flex; align-items: center; justify-content: center; width: var(--fab); height: var(--fab); border: 0; border-radius: var(--fab-r); background: var(--accent); color: var(--accent-text); font-size: 0; box-shadow: var(--fab-shadow); cursor: pointer; }
/* son icône : le « ✎ » est un span.emo (gardé tel quel par le thème Classique, qui ne touche pas aux .emo) ; sans la
   ligne --emo ci-dessous, et avec le font-size: 0 du bouton, il mesurait 0 px : bouton vide (Galaxy S25+, 30 octobre) */
:root[data-skin="classique"] .emo[data-ico="crayon"] { --emo: url("/themes/classique/icones/crayon.svg"); }
:root[data-skin="classique"] #conv-new .emo { width: var(--fab-ico); height: var(--fab-ico); vertical-align: 0; background-color: var(--accent-text); }
/* paysage (peu de hauteur) : l'en-tête reste compact, comme pour les autres thèmes (règle plus haut) */
@media (orientation: landscape) and (max-height: 520px) {
  :root[data-skin="classique"] #sidebar > header.bar:not(#activity .bar) { padding: calc(4px + var(--sat)) 12px 4px 16px; }
}
:root[data-skin="classique"] #orga-pane > #cal-new { border-radius: var(--fab-r); box-shadow: var(--fab-shadow); }
/* 7 · onglets : fond gris très clair, sans filet */
:root[data-skin="classique"] #home-tabs { background: var(--nav-bg); border-top: 0; }
/* 8 · discussion : fond beige uni quand aucun fond n'est choisi (un fond choisi reste peint sur #messages) */
:root[data-skin="classique"] #chat:not(.has-wallpaper) #messages { background: var(--chat-bg); }
/* 9 · bulles : coins de --radius, queue sur la dernière bulle d'une suite (maquette 88c, plus bas), ombre fine ; le nom
   de l'auteur dans la bulle */
:root[data-skin="classique"] .bubble:not(.media) { border-radius: var(--radius); box-shadow: var(--bubble-shadow); }
:root[data-skin="classique"] .msg.theirs .bubble:not(.media) { border: 0; }
:root[data-skin="classique"] .msg.mine .bubble:not(.media) { border-radius: var(--radius); box-shadow: var(--bubble-shadow); }
/* (« #chat .msg » et non « #messages > .msg » : la sonde de la liste d'Android mesure des bulles fantômes posées dans
   #chat ; avec « #messages > », elle ne voyait pas ce coin à 0 et Android arrondissait le coin à côté de la queue, qui
   ressemblait à une petite oreille carrée : 30 octobre) */
:root[data-skin="classique"] #chat .msg.theirs:not(.grp-next):not(.system) > .bubble:not(.media) { border-bottom-left-radius: 0; }
:root[data-skin="classique"] #chat .msg.mine:not(.grp-next):not(.system) > .bubble:not(.media) { border-bottom-right-radius: 0; }
/* Queue (maquette 88c, C3 choisie le 31 octobre ; avant, maquette 83 : en haut de la première bulle, une « oreille »
   bombée) : en bas de la dernière bulle d'une suite, du côté de la personne, recourbée comme iMessage, à côté du coin à
   0 ; --bubble-tail × --bubble-tail-h, de la couleur de la bulle, moins un quart d'ellipse creusé depuis le coin haut
   extérieur (masque). Android la reçoit en image (nlTail) */
.bubble > .tail { display: none; }
:root[data-skin="classique"] #messages > .msg:not(.grp-next):not(.system) > .bubble:not(.media) > .tail { display: block; position: absolute; bottom: 0; width: var(--bubble-tail); height: var(--bubble-tail-h); background: inherit; -webkit-mask: radial-gradient(ellipse var(--bubble-tail) var(--bubble-tail-h) at var(--tail-x) 0, transparent 97%, #000 100%); mask: radial-gradient(ellipse var(--bubble-tail) var(--bubble-tail-h) at var(--tail-x) 0, transparent 97%, #000 100%); }
:root[data-skin="classique"] #messages > .msg.theirs:not(.grp-next):not(.system) > .bubble:not(.media) > .tail { left: calc(-1 * var(--bubble-tail)); --tail-x: 0; }
:root[data-skin="classique"] #messages > .msg.mine:not(.grp-next):not(.system) > .bubble:not(.media) > .tail { right: calc(-1 * var(--bubble-tail)); --tail-x: 100%; }
#messages > .msg.grp-prev .bubble > .author { display: none; }
:root[data-skin="classique"] .bubble > .author { margin: 0 0 2px; padding: 0; background: none; box-shadow: none; border-radius: 0; font-size: .8125rem; font-weight: 600; }
:root[data-skin="classique"] .bubble > .author .author-av { display: none; }
/* 10 · pastilles posées sur le fond beige (date, appels, résumés du journal, activités) : blanches (la grise de la
   maquette 71c, #EFEBE3, disparaissait sur ce fond #EFEAE2). Rien d'autre ne change (ni capitales, ni ombre) : Android
   les dessine lui-même d'après la page, avec les seuls réglages qu'elle lui envoie */
:root[data-skin="classique"] #messages :is(.day, .msg.system .bubble, .journal-head) { background: var(--panel); }
/* 11 · barre d'écriture : posée sur le fond, pilule blanche (champ + trombone), micro ou Envoyer en rond plein */
.composer .field { display: contents; }
.composer #attach-btn { order: -1; }
:root[data-skin="classique"] .composer { background: transparent; border-top: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 8px; }
:root[data-skin="classique"] .composer .field { flex: 1; display: flex; align-items: flex-end; min-width: 0; background: var(--panel); border-radius: 24px; box-shadow: var(--bubble-shadow); }
:root[data-skin="classique"] .composer textarea { flex: 1; min-width: 0; background: transparent; padding: 12px 8px 12px 16px; }
:root[data-skin="classique"] #attach-btn { order: 2; flex: none; width: 44px; height: 48px; background: none; color: var(--muted); }
:root[data-skin="classique"] :is(#mic-btn, #send-btn) { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--accent-text); }
:root[data-skin="classique"] #mic-btn::before { background-color: var(--accent-text); }
:root[data-skin="classique"] #attach-menu { left: auto; right: 64px; transform-origin: bottom right; }
/* 12 · rendez-vous partagé : « Rendez-vous » en petit en haut à droite de la bulle (à côté du nom dans un groupe), puis
   la carte teintée, avec un repère à gauche (une bordure : Android la dessine, suivie de l'arrondi) */
.ev-msg-tag { display: none; }
:root[data-skin="classique"] .bubble.event-msg { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; }
:root[data-skin="classique"] .bubble.event-msg > .author { grid-column: 1; margin: 0; padding: 2px 0 4px 6px; }
:root[data-skin="classique"] .ev-msg-tag { display: block; grid-column: 2; justify-self: end; padding: 3px 6px 4px 0; color: var(--accent); font-size: .625rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
:root[data-skin="classique"] .bubble.event-msg > :is(.ev-msg, .meta) { grid-column: 1 / -1; }
:root[data-skin="classique"] .bubble.event-msg > .meta { justify-self: end; }
:root[data-skin="classique"] .ev-msg, :root[data-skin="classique"] .msg.theirs .ev-msg { background: var(--accent-doux); border-radius: var(--card-r); } /* (maquette 90C : sans repère, comme la carte « Aujourd'hui ») */
:root[data-skin="classique"] .ev-msg-go { border-top: 0; padding-top: 2px; }
/* 13 · agenda : jours en petites capitales, rendez-vous en lignes (icône ronde teintée de la couleur du rendez-vous,
   titre, heure dessous, chevron), aujourd'hui en rond doux et le jour choisi en rond plein */
.ag-card { background: var(--ev-c); }
.ag-ico { display: none; }
:root[data-skin="classique"] .ag-list { border-top: var(--ag-band) solid var(--panel-2); padding: 4px 8px 96px; }
:root[data-skin="classique"] .ag-dh { margin: 0; padding: 10px 8px 2px; background: none; border-radius: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
:root[data-skin="classique"] .ag-dh.today { color: var(--accent); box-shadow: none; }
:root[data-skin="classique"] .ag-empty { text-align: left; padding: 0 8px; }
:root[data-skin="classique"] .ag-row { display: grid; grid-template-columns: calc(var(--ag-ico) + var(--ag-ico-gap)) auto minmax(0, 1fr) auto; grid-template-areas: "ico title title chev" "ico time sub chev"; column-gap: 0; row-gap: 3px; align-items: center; margin: 0; padding: 10px 8px; border-radius: 12px; }
/* Maquette « 85b » (30 octobre, « c'est pas clair ») : sous le titre, une seule ligne grise alignée à gauche, « heure · qui ·
   commentaires · note » ; avant, l'heure était seule, centrée, sur une ligne à part (écart avec la 83c validée) */
/* (2 novembre : la colonne du rond comprend l'écart ; avant, elle ne faisait que --ag-ico et l'écart débordait : le
   rond touchait le cadenas et l'heure) */
:root[data-skin="classique"] .ag-ico { grid-area: ico; display: grid; place-items: center; width: var(--ag-ico); height: var(--ag-ico); margin-right: var(--ag-ico-gap); border-radius: 50%; background: color-mix(in srgb, var(--ev-c) 18%, transparent); }
:root[data-skin="classique"] .ag-ico::before { content: ""; width: var(--ag-ico-glyph); height: var(--ag-ico-glyph); background-color: var(--ev-c); -webkit-mask: url("/themes/classique/icones/agenda.svg") center / contain no-repeat; mask: url("/themes/classique/icones/agenda.svg") center / contain no-repeat; }
:root[data-skin="classique"] .ag-card { display: contents; color: var(--text); }
:root[data-skin="classique"] .ag-card strong { grid-area: title; min-width: 0; font-size: 1rem; font-weight: 600; color: var(--text); }
:root[data-skin="classique"] .ag-card small { grid-area: sub; min-width: 0; color: var(--muted); opacity: 1; font-size: .875rem; }
:root[data-skin="classique"] .ag-time + .ag-card small::before { content: "· "; }
:root[data-skin="classique"] .ag-time { grid-area: time; width: auto; display: flex; flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 0; padding: 0; white-space: nowrap; }
:root[data-skin="classique"] .ag-time strong { font-size: .875rem; font-weight: 400; color: var(--muted); }
:root[data-skin="classique"] .ag-time small { font-size: .875rem; color: var(--muted); }
:root[data-skin="classique"] .ag-time small::before { content: " "; white-space: pre; }
:root[data-skin="classique"] .ag-time small.end::before { content: " – "; }
:root[data-skin="classique"] .ag-time::after { content: " "; white-space: pre; }
:root[data-skin="classique"] .ag-row::after { content: ""; grid-area: chev; margin-left: 14px; width: 20px; height: 20px; background-color: var(--muted); -webkit-mask: url("/themes/classique/icones/chevron.svg") center / contain no-repeat; mask: url("/themes/classique/icones/chevron.svg") center / contain no-repeat; }
:root[data-skin="classique"] .ag-num.today { background: var(--accent-doux); color: var(--accent); }
:root[data-skin="classique"] .ag-num.sel { background: var(--accent); color: var(--accent-text); }

/* ---------- Maquette 94 (validée le 2 novembre : « 94b 94c 94d 94f »), thème Classique ---------- */
:root[data-skin="classique"] {
  --aide-ico: 40px; --aide-ico-glyph: 20px; --aide-gap: 12px; --aide-pad: 12px 14px;
  --ecran-pad: 16px; --ecran-head-gap: 8px; --ecran-moi-av: 48px; --ecran-z: 1000;
  --feuille-r: 24px; --feuille-max: 640px; --feuille-pad: 20px; --feuille-poignee-w: 40px; --feuille-poignee-h: 4px;
  --feuille-av: 44px; --feuille-coche: 22px; --feuille-btn-h: 52px;
  --ecran-carte-r: 16px; --ecran-moi-pad: 14px; --ecran-moi-gap: 14px; --ecran-moi-nom: 1.0625rem; --ecran-chev: 18px;
  --feuille-ligne-gap: 14px; --feuille-ligne-pad: 8px; --feuille-coche-in: 3px; --feuille-label-fs: .75rem;
  --coche-from: .7; --coche-halo: 10px;
}
/* 94b · « Pour ne rien rater » : une seule carte (icône dans un rond, texte, « Activer », « Plus tard » en lien) ; plus
   de titre ni de deuxième carte à l'intérieur. Le rond est peint sous l'icône (l'icône au trait est un masque) */
:root[data-skin="classique"] #setup-card:not(.hidden) { display: flex; align-items: center; gap: var(--aide-gap); padding: var(--aide-pad); }
:root[data-skin="classique"] #setup-card > strong { display: none; }
:root[data-skin="classique"] #setup-card .setup-step { flex: 1; min-width: 0; min-height: var(--aide-ico); padding: 0; border-radius: 0; gap: var(--aide-gap);
  background: radial-gradient(circle at calc(var(--aide-ico) / 2) 50%, var(--accent-doux) calc(var(--aide-ico) / 2), transparent calc(var(--aide-ico) / 2 + .5px)) no-repeat; }
:root[data-skin="classique"] #setup-card .setup-step .setup-icon { flex: none; width: var(--aide-ico-glyph); height: var(--aide-ico-glyph); margin: 0 calc((var(--aide-ico) - var(--aide-ico-glyph)) / 2); vertical-align: 0; background-color: var(--accent); }
:root[data-skin="classique"] #setup-card .setup-step .grow { min-width: 0; }
:root[data-skin="classique"] #setup-card #setup-later { flex: none; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--accent); font-weight: 600; }

/* 94c · Réglages et « Mon profil » : un écran entier sur le téléphone (plus une boîte au milieu), « ← » en haut, qui
   glisse depuis la droite et repart à droite (« closing » : la fenêtre déjà fermée reste peinte le temps du départ) */
.settings-me, #profile-back { display: none; }
@media (max-width: 760px) {
  :root[data-skin="classique"] :is(#settings-dialog, #profile-dialog) { position: fixed; inset: 0; box-sizing: border-box; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; background: var(--bg); }
  :root[data-skin="classique"] :is(#settings-dialog, #profile-dialog)::backdrop { background: transparent; }
  :root[data-skin="classique"] :is(#settings-dialog, #profile-dialog) > .dialog-body { box-sizing: border-box; height: 100%; max-height: none; padding: calc(var(--sat) + var(--ecran-head-gap)) var(--ecran-pad) calc(var(--ecran-pad) + env(safe-area-inset-bottom, 0px)); align-content: start; }
  :root[data-skin="classique"] #settings-dialog #settings-back.hidden { display: inline-grid !important; } /* (.hidden est !important : le menu garde « ← », qui ferme) */
  :root[data-skin="classique"] #profile-back { display: inline-grid; }
  :root[data-skin="classique"] #profile-dialog .settings-head h2 { margin: 0; }
  :root[data-skin="classique"] .settings-me:not(.hidden) { display: flex; align-items: center; gap: var(--ecran-moi-gap); width: 100%; padding: var(--ecran-moi-pad); border: 1px solid var(--line); border-radius: var(--ecran-carte-r); background: var(--panel); box-shadow: var(--elev1); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
  :root[data-skin="classique"] .settings-me .avatar { flex: none; width: var(--ecran-moi-av); height: var(--ecran-moi-av); }
  :root[data-skin="classique"] .settings-me .txt { flex: 1; display: grid; gap: 2px; min-width: 0; }
  :root[data-skin="classique"] .settings-me .txt b { font-size: var(--ecran-moi-nom); font-weight: 700; }
  :root[data-skin="classique"] .settings-me .txt small { color: var(--muted); }
  :root[data-skin="classique"] .settings-me .chev { width: var(--ecran-chev); height: var(--ecran-chev); font-size: 0; background-color: var(--muted); -webkit-mask: url("/themes/classique/icones/chevron.svg") center / contain no-repeat; mask: url("/themes/classique/icones/chevron.svg") center / contain no-repeat; }
  :root[data-skin="classique"] :is(#settings-dialog, #profile-dialog).closing:not([open]) { display: block; z-index: var(--ecran-z); pointer-events: none; }
  @media (prefers-reduced-motion: no-preference) {
    :root[data-skin="classique"] :is(#settings-dialog, #profile-dialog)[open] { animation: over-in var(--anim-ecran) var(--anim-ease); }
    :root[data-skin="classique"] :is(#settings-dialog, #profile-dialog)[open]::backdrop { animation: none; }
    :root[data-skin="classique"] :is(#settings-dialog, #profile-dialog).closing:not([open]) { animation: over-out var(--anim-ecran) var(--anim-ease) forwards; }
  }
}

/* 94d · « Nouveau groupe » : une feuille qui monte du bas (poignée : on la descend pour fermer), la photo de chaque
   membre, la coche ronde à droite, « Créer le groupe (n) » en bas, grisé tant que le groupe n'a pas de nom */
#group-dialog .sheet-handle, #group-dialog .sheet-label { display: none; }
:root[data-skin="classique"] #group-dialog { position: fixed; inset: auto 0 0 0; box-sizing: border-box; width: 100%; max-width: var(--feuille-max); margin: 0 auto; border-radius: var(--feuille-r) var(--feuille-r) 0 0; }
:root[data-skin="classique"] #group-dialog > .dialog-body { padding: 0 var(--feuille-pad) calc(var(--feuille-pad) + env(safe-area-inset-bottom, 0px)); }
:root[data-skin="classique"] #group-dialog .sheet-handle { display: grid; place-items: center; height: var(--feuille-pad); margin: 0 calc(-1 * var(--feuille-pad)); touch-action: none; cursor: grab; }
:root[data-skin="classique"] #group-dialog .sheet-handle::before { content: ""; width: var(--feuille-poignee-w); height: var(--feuille-poignee-h); border-radius: var(--feuille-poignee-h); background: var(--line); }
:root[data-skin="classique"] #group-dialog h2 { margin: 0; }
:root[data-skin="classique"] #group-dialog .sheet-label { display: block; margin: 0; color: var(--muted); font-size: var(--feuille-label-fs); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
:root[data-skin="classique"] #group-members { display: grid; }
:root[data-skin="classique"] #group-members label { gap: var(--feuille-ligne-gap); padding: var(--feuille-ligne-pad) 0; cursor: pointer; }
:root[data-skin="classique"] #group-members .avatar { flex: none; width: var(--feuille-av); height: var(--feuille-av); }
:root[data-skin="classique"] #group-members .grow { flex: 1; min-width: 0; font-weight: 600; }
:root[data-skin="classique"] #group-members input[type=checkbox] { appearance: none; -webkit-appearance: none; position: relative; width: var(--feuille-coche); height: var(--feuille-coche); border: 2px solid var(--muted); border-radius: 50%; background: none; }
:root[data-skin="classique"] #group-members input[type=checkbox]:checked { border-color: var(--accent); background: var(--accent); }
:root[data-skin="classique"] #group-members input[type=checkbox]:checked::after { content: ""; position: absolute; inset: var(--feuille-coche-in); background-color: var(--accent-text); -webkit-mask: url("/themes/classique/icones/coche.svg") center / contain no-repeat; mask: url("/themes/classique/icones/coche.svg") center / contain no-repeat; }
:root[data-skin="classique"] #group-dialog .row { display: grid; grid-template-columns: 1fr; justify-content: stretch; }
:root[data-skin="classique"] body:not(.mode-simple) #group-dialog button[value=cancel] { display: none; }
:root[data-skin="classique"] #group-create { width: 100%; min-height: var(--feuille-btn-h); border-radius: calc(var(--feuille-btn-h) / 2); }
:root[data-skin="classique"] #group-create:disabled { opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-skin="classique"] #group-dialog[open] { animation: sheet-up var(--anim-feuille) var(--anim-rebond); }
}

/* 94f · Animations (durées : variables --anim-… plus haut). Appui sur une ligne : elle se teinte et rentre un peu */
@media (prefers-reduced-motion: no-preference) {
  :root[data-skin="classique"] :is(#conv-list li, .settings-menu button, .settings-me, .set-group > .btn, .ag-row, .board-row, .kid-card, #group-members label) { transition: transform var(--anim-appui) var(--anim-ease), background-color var(--anim-appui) var(--anim-ease); }
  :root[data-skin="classique"] :is(#conv-list li, .settings-menu button, .settings-me, .set-group > .btn, .ag-row, .board-row, .kid-card, #group-members label):active { transform: scale(var(--anim-appui-scale)); background-color: var(--panel-2); }
  /* pastille de non-lus qui arrive ou dont le nombre monte */
  :root[data-skin="classique"] .badge.pop, :root[data-skin="classique"] #tasks-badge.pop { animation: pastille-pop var(--anim-pastille) var(--anim-rebond); }
  /* tâche cochée : le rond se remplit (la coche avec lui) ; le compteur de l'enfant saute quand les étoiles arrivent */
  :root[data-skin="classique"] .board-row.just .board-check { animation: coche-pop var(--anim-coche) var(--anim-rebond); }
  :root[data-skin="classique"] .kid-card .kid-stars.pop { display: inline-block; animation: pastille-pop var(--anim-pastille) var(--anim-rebond); }
  /* bulle envoyée : monte depuis la barre d'écriture */
  :root[data-skin="classique"] #messages .msg.just-sent { animation: bulle-monte var(--anim-bulle) var(--anim-ease); }
}
@keyframes pastille-pop { from { transform: scale(var(--anim-pastille-from)); } }
@keyframes coche-pop { 0% { transform: scale(var(--coche-from)); box-shadow: 0 0 0 0 var(--accent-doux); } 60% { box-shadow: 0 0 0 var(--coche-halo) var(--accent-doux); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes bulle-monte { from { transform: translateY(var(--anim-bulle-dy)); opacity: 0; } }
/* « +10 ★ » qui s'envole de la tâche cochée vers le compteur de l'enfant */
.etoiles-vol { position: fixed; z-index: var(--ecran-z, 1000); pointer-events: none; color: var(--or); font-weight: 800; white-space: nowrap; }