/* VOLKOV — direction artistique « nuit polaire » : le langage des meilleures apps iPhone
   (noir profond, San Francisco, listes groupées, grands titres) et une signature : l'aurore boréale.
   Performances : animations limitées aux transformations et à l'opacité (carte graphique), aucune police à télécharger. */

:root {
  color-scheme: dark;
  /* surfaces (couleurs système d'iOS en mode sombre) */
  --noir: #000;
  --cellule: #1c1c1e;
  --cellule-2: #2c2c2e;
  --cellule-3: #3a3a3c;
  --separateur: rgba(84, 84, 88, 0.42);
  --texte: #f5f5f7;
  --texte-2: rgba(235, 235, 245, 0.62);
  --texte-3: rgba(235, 235, 245, 0.32);
  /* aurore boréale */
  --menthe: #5cf2c4;
  --glace: #59b8ff;
  --violet: #9b7bff;
  --rose: #ff7ac8;
  --teinte: #7cc8ff;
  --vert: #32d74b;
  --ambre: #ffb340;
  --rouge: #ff453a;
  /* anneaux */
  --anneau-sport-a: #ff4f7b; --anneau-sport-b: #ff9a5c;
  --anneau-pas-a: #5cf2c4; --anneau-pas-b: #c4ff6b;
  --anneau-sommeil-a: #59b8ff; --anneau-sommeil-b: #9b7bff;
  /* typographie */
  --police: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ronde: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'New York', ui-serif, 'Iowan Old Style', Georgia, serif;
  --rayon: 14px;
  --bas: env(safe-area-inset-bottom, 0px);
  --haut: env(safe-area-inset-top, 0px);
  /* barre d'onglets flottante : sa hauteur, sa distance au bas de l'écran, et la place à laisser au contenu */
  --onglets: 62px;
  --pied: max(10px, calc(var(--bas) - 6px));
  --reserve-bas: calc(var(--pied) + var(--onglets) + 12px);
  --ressort: cubic-bezier(0.2, 0.9, 0.25, 1.05);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--noir); color: var(--texte); }
body { font: 17px/1.42 var(--police); letter-spacing: -0.012em; overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--teinte); text-decoration: none; }
[hidden] { display: none !important; }
svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
::selection { background: rgba(124, 200, 255, 0.35); }
.chiffre { font-family: var(--ronde); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* retour tactile : tout ce qui se touche s'enfonce légèrement */
button, .ligne.action, a.bouton { transition: transform 0.14s ease, opacity 0.14s ease, background-color 0.2s; }
button:active:not(:disabled), a.bouton:active { transform: scale(0.965); }

/* ======================================================================= orbe */
.orbe { --taille: 168px; position: relative; width: var(--taille); height: var(--taille); flex: none; isolation: isolate; }
.orbe-halo { position: absolute; inset: -38%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(92, 242, 196, 0.28), rgba(89, 184, 255, 0.14) 45%, transparent 100%);
  opacity: 0.55; transition: opacity 0.6s ease, transform 0.6s var(--ressort); }
.orbe-sphere { position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 120%, #0d1f2a, #04060a 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 calc(var(--taille) * 0.08) calc(var(--taille) * 0.3) rgba(0, 0, 0, 0.7);
  transform: scale(calc(1 + var(--niveau, 0) * 0.07)); transition: transform 0.12s ease-out; }
.orbe-tourbillon { position: absolute; inset: 0; animation: tourne 2.4s linear infinite; animation-play-state: paused; }
.orbe-tourbillon i { position: absolute; width: 72%; height: 72%; border-radius: 50%; mix-blend-mode: screen;
  filter: blur(calc(var(--taille) * 0.085)); opacity: 0.92; will-change: transform; animation: derive 16s linear infinite; }
.orbe-tourbillon i:nth-child(1) { background: var(--menthe); left: -6%; top: 12%; animation-duration: 13s; }
.orbe-tourbillon i:nth-child(2) { background: var(--glace); right: -10%; top: -4%; animation-duration: 17s; animation-direction: reverse; }
.orbe-tourbillon i:nth-child(3) { background: var(--violet); left: 18%; bottom: -22%; animation-duration: 11s; }
.orbe-tourbillon i:nth-child(4) { background: var(--rose); width: 38%; height: 38%; right: 4%; bottom: 8%; opacity: 0.55; animation-duration: 9s; animation-direction: reverse; }
.orbe-reflet { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.38), transparent 32%), radial-gradient(circle at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.55));
  pointer-events: none; }
@keyframes derive { from { transform: rotate(0deg) translateX(14%) rotate(0deg); } to { transform: rotate(360deg) translateX(14%) rotate(-360deg); } }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.orbe[data-etat='ecoute'] .orbe-halo { opacity: 1; transform: scale(1.12); }
.orbe[data-etat='ecoute'] .orbe-sphere { animation: respire 1.8s ease-in-out infinite; }
.orbe[data-etat='reflexion'] .orbe-tourbillon { animation-play-state: running; }
.orbe[data-etat='reflexion'] .orbe-halo { opacity: 0.9;
  background: radial-gradient(closest-side, rgba(155, 123, 255, 0.34), rgba(89, 184, 255, 0.14) 45%, transparent 100%); }
.orbe[data-etat='parole'] .orbe-halo { opacity: 1; transform: scale(calc(1 + var(--niveau, 0) * 0.18)); }
.orbe[data-etat='alerte'] .orbe-halo { opacity: 1; background: radial-gradient(closest-side, rgba(255, 69, 58, 0.45), transparent 100%); }

/* ======================================================================= halo des bords (façon Siri) */
.aura { position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: 0; transition: opacity 0.5s ease; }
.aura i { position: absolute; inset: 0; opacity: 0; animation: pulse 3.6s ease-in-out infinite; animation-play-state: paused; }
.aura i:nth-child(1) { box-shadow: inset 0 0 34px 6px rgba(92, 242, 196, 0.8); }
.aura i:nth-child(2) { box-shadow: inset 0 0 34px 6px rgba(89, 184, 255, 0.8); animation-delay: -1.2s; }
.aura i:nth-child(3) { box-shadow: inset 0 0 34px 6px rgba(155, 123, 255, 0.85); animation-delay: -2.4s; }
body[data-voix='ecoute'] .aura, body[data-voix='parole'] .aura, body[data-voix='reflexion'] .aura { opacity: 1; }
body[data-voix='reflexion'] .aura { opacity: 0.55; }
body[data-voix]:not([data-voix='']) .aura i { animation-play-state: running; }
@keyframes pulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* ======================================================================= connexion */
.porte { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(ellipse at 50% 30%, #071318 0%, var(--noir) 60%); }
.porte-contenu { width: 100%; max-width: 340px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.porte .orbe { --taille: 150px; margin-bottom: 30px; animation: eveil 1.2s var(--ressort) both; }
.porte .marque, .porte-texte, .porte form { animation: monte 0.7s var(--ressort) both; }
.porte .marque { animation-delay: 0.25s; } .porte-texte { animation-delay: 0.35s; } .porte form { animation-delay: 0.45s; }
@keyframes eveil { from { opacity: 0; transform: scale(0.55); filter: blur(14px); } }
/* la porte s'ouvre : l'orbe grandit et tout s'efface sur l'app */
.porte.ouverture { animation: fondu-sortie 0.6s ease 0.1s both; pointer-events: none; }
.porte.ouverture .orbe { animation: grandit 0.7s cubic-bezier(0.5, 0, 0.2, 1) both; }
.porte.ouverture .marque, .porte.ouverture .porte-texte, .porte.ouverture form { animation: fondu-sortie 0.25s ease both; }
@keyframes grandit { to { transform: scale(3.4); opacity: 0; } }
@keyframes fondu-sortie { to { opacity: 0; } }
.marque { font: 600 15px/1 var(--police); letter-spacing: 0.42em; margin: 0 0 10px 0.42em; color: var(--texte); }
.porte-texte { color: var(--texte-2); font-size: 15px; margin: 0 0 22px; }
.porte form { width: 100%; display: grid; gap: 10px; }
.porte .faceid { width: 100%; margin-bottom: 4px; }
.porte-ou { margin: 6px 0 10px; color: var(--texte-3); font-size: 13px; }
.porte #porte-btn:not(.primaire) { background: var(--cellule-2); color: var(--texte); }
.erreur { color: var(--rouge); font-size: 14px; min-height: 1.2em; margin: 0; }

/* ======================================================================= structure */
.app { height: 100%; display: flex; flex-direction: column; max-width: 720px; margin: 0 auto; position: relative;
  transform-origin: 50% 0; transition: transform 0.45s var(--ressort), border-radius 0.45s; }
/* une feuille s'ouvre : l'app recule, comme sur iPhone */
body.feuille-ouverte .app { transform: translateY(calc(var(--haut) + 6px)) scale(0.93); border-radius: 16px; overflow: hidden; }
.vues { flex: 1; min-height: 0; position: relative; }
.vue { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.vue-contenu { position: relative; isolation: isolate; padding: calc(var(--haut) + 10px) 16px calc(var(--reserve-bas) + 24px); }
.vue.parler { display: flex; flex-direction: column; overflow: hidden; }

/* les blocs d'un écran arrivent l'un après l'autre */
.vue-contenu.entree > * { animation: monte 0.55s var(--ressort) both; }
.vue-contenu.entree > :nth-child(2) { animation-delay: 0.03s; }
.vue-contenu.entree > :nth-child(3) { animation-delay: 0.07s; }
.vue-contenu.entree > :nth-child(4) { animation-delay: 0.11s; }
.vue-contenu.entree > :nth-child(5) { animation-delay: 0.15s; }
.vue-contenu.entree > :nth-child(6) { animation-delay: 0.19s; }
.vue-contenu.entree > :nth-child(n+7) { animation-delay: 0.23s; }
@keyframes monte { from { opacity: 0; transform: translateY(14px); } }

/* bord supérieur : sous l'heure, le contenu s'estompe dans un flou ; le grand titre s'y range en petit */
.bord-haut { position: absolute; left: 0; right: 0; top: 0; z-index: 15; height: calc(var(--haut) + 50px); pointer-events: none;
  display: flex; justify-content: center; padding-top: calc(var(--haut) + 12px); }
.bord-haut::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.25s;
  background: linear-gradient(rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.78) 55%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
#titre-compact { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; opacity: 0; transform: translateY(8px); transition: opacity 0.22s, transform 0.35s var(--ressort); }
body.defile .bord-haut::before, body.defile #titre-compact { opacity: 1; transform: none; }
body[data-ecran='parler'] .bord-haut { display: none; }
/* bas de l'écran : le contenu s'efface sous la barre d'onglets */
.app::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--reserve-bas) + 16px); z-index: 19; pointer-events: none;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82) 65%); }
body[data-ecran='parler'] .app::after { display: none; }

/* barre d'onglets flottante, en verre (façon iOS 26) ; une lentille glisse sous l'onglet actif */
.onglets { position: absolute; z-index: 20; left: 12px; right: 12px; bottom: var(--pied); max-width: 440px; margin: 0 auto; height: var(--onglets);
  display: grid; grid-template-columns: repeat(5, 1fr); padding: 4px; border-radius: 32px;
  background: rgba(32, 32, 36, 0.58); -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.17), inset 0 0 0 0.5px rgba(255, 255, 255, 0.07), 0 14px 36px rgba(0, 0, 0, 0.55); }
.onglets .indicateur { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 5); border-radius: 28px;
  background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.2);
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 0.55s cubic-bezier(0.3, 1.3, 0.45, 1); }
.onglets > :not(.indicateur) { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--texte-2); font-size: 10px; font-weight: 600; letter-spacing: 0; }
.onglets svg { width: 25px; height: 25px; transition: transform 0.3s var(--ressort); }
.onglets > :active svg { transform: scale(0.86); }
.onglets .actif { color: var(--texte); }
.onglets .actif svg { color: var(--teinte); filter: drop-shadow(0 0 6px rgba(124, 200, 255, 0.45)); }
.onglets .rebond svg { animation: rebond 0.55s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes rebond { 0% { transform: scale(1); } 30% { transform: scale(0.78); } 65% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* ======================================================================= grands titres et listes groupées (façon Réglages d'iOS) */
.titre-vue { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 6px 4px 18px; }
.titre-vue h1 { font: 700 34px/1.1 var(--police); letter-spacing: -0.025em; margin: 0; }
.titre-vue .sous-titre { color: var(--texte-2); font-size: 15px; margin-top: 4px; }
.titre-vue .surtitre { color: var(--texte-2); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 2px; }
.retour { display: inline-flex; align-items: center; gap: 2px; color: var(--teinte); font-size: 17px; margin: 0 0 6px -6px; padding: 4px 0; }
.retour svg { width: 22px; height: 22px; }

.section { margin-top: 28px; }
.section-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 16px 7px; }
.section-tete h2 { font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; color: var(--texte-2); margin: 0; }
.section-tete a, .section-tete button { color: var(--teinte); font-size: 15px; }
.section-pied { color: var(--texte-2); font-size: 13px; line-height: 1.38; margin: 7px 16px 0; }
.section-pied a { color: var(--teinte); }

.groupe { background: var(--cellule); border-radius: var(--rayon); overflow: hidden; }
.ligne { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 11px 16px; width: 100%; text-align: left; position: relative; }
.ligne + .ligne::before { content: ''; position: absolute; top: 0; right: 0; left: 16px; border-top: 0.5px solid var(--separateur); }
.ligne.avec-icone + .ligne.avec-icone::before { left: 60px; }
.ligne .texte { flex: 1; min-width: 0; }
.ligne .sous { color: var(--texte-2); font-size: 14px; margin-top: 1px; }
.ligne .valeur { color: var(--texte-2); text-align: right; flex: none; }
.ligne > svg.chevron, .profil > svg.chevron, details.repli summary > svg.chevron { width: 16px; height: 16px; color: var(--texte-3); stroke-width: 2.4; }
.ligne.action { color: var(--teinte); justify-content: center; }
.ligne.action.gauche { justify-content: flex-start; }
.ligne.action.danger, .danger { color: var(--rouge); }
.ligne.action:active { background: var(--cellule-2); transform: none; }
.icone-ligne { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; color: #fff; }
.icone-ligne svg { width: 18px; height: 18px; stroke-width: 2; }
.ligne.empile { flex-direction: column; align-items: stretch; gap: 10px; }
.vide { color: var(--texte-2); font-size: 15px; padding: 14px 16px; }

/* ======================================================================= boutons et champs */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px;
  background: var(--cellule-2); color: var(--texte); font-size: 16px; font-weight: 590; }
.bouton.primaire { background: #fff; color: #000; }
.bouton.teinte { background: var(--teinte); color: #00131f; }
.bouton.discret { background: none; color: var(--teinte); padding: 0 6px; }
.bouton.discret.danger { color: var(--rouge); }
.bouton.large { width: 100%; min-height: 50px; border-radius: 14px; font-size: 17px; }
.bouton:disabled { opacity: 0.4; }
.rangee { display: flex; gap: 10px; flex-wrap: wrap; }
.rangee > .bouton { flex: 1; }
.bouton-rond { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--texte-2); background: var(--cellule); }
.bouton-rond svg { width: 21px; height: 21px; }
.bouton-rond.discret { background: none; }
.bouton-rond[aria-pressed='true'] { background: rgba(124, 200, 255, 0.18); color: var(--teinte); }
.champ { width: 100%; min-height: 50px; padding: 13px 16px; border: 0; border-radius: 14px; background: var(--cellule); outline: none; font-size: 17px; }
.champ:focus { box-shadow: 0 0 0 2px rgba(124, 200, 255, 0.55); }
.champ::placeholder, textarea::placeholder { color: var(--texte-3); }
.saisie { flex: 1; min-width: 0; border: 0; background: none; outline: none; text-align: right; color: var(--texte-2); font-size: 17px; padding: 0; }
.saisie.gauche { text-align: left; color: var(--texte); }
.saisie:focus { color: var(--texte); }
select.saisie { appearance: none; -webkit-appearance: none; cursor: pointer; }
textarea.zone { width: 100%; min-height: 110px; border: 0; background: none; outline: none; resize: vertical; font-size: 16px; line-height: 1.45; }
textarea.zone.code { font: 13px/1.55 ui-monospace, 'SF Mono', Menlo, monospace; min-height: 320px; letter-spacing: 0; }

/* interrupteur iOS */
.interrupteur { position: relative; width: 51px; height: 31px; flex: none; }
.interrupteur input { position: absolute; inset: 0; opacity: 0; margin: 0; z-index: 1; cursor: pointer; }
.interrupteur i { position: absolute; inset: 0; border-radius: 16px; background: var(--cellule-3); transition: background 0.25s; }
.interrupteur i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); transition: transform 0.28s var(--ressort); }
.interrupteur input:checked + i { background: var(--vert); }
.interrupteur input:checked + i::after { transform: translateX(20px); }

/* curseur (réglage 1 à 10) */
.curseur { width: 100%; -webkit-appearance: none; appearance: none; height: 28px; background: none; margin: 0; }
.curseur::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--a, var(--glace)) var(--p, 50%), var(--cellule-3) var(--p, 50%)); }
.curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
.curseur::-moz-range-track { height: 6px; border-radius: 3px; background: var(--cellule-3); }
.curseur::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--a, var(--glace)); }
.curseur::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; }
.reglette { display: grid; grid-template-columns: 74px 1fr 30px; align-items: center; gap: 12px; }
.reglette b { font-weight: 500; font-size: 16px; }
.reglette output { text-align: right; color: var(--texte-2); font-family: var(--ronde); font-variant-numeric: tabular-nums; }
.reglette.vide-valeur output { color: var(--texte-3); }

/* ======================================================================= PARLER */
.barre-parler { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(var(--haut) + 8px) 16px 8px; position: relative; z-index: 2;
  background: linear-gradient(var(--noir) 60%, transparent); }
.identite { display: flex; align-items: center; gap: 10px; min-width: 0; }
.identite .orbe { --taille: 34px; }
.identite .orbe .orbe-halo { inset: -55%; }
.identite-texte { display: flex; flex-direction: column; line-height: 1.15; }
.identite-texte b { font-size: 16px; font-weight: 650; letter-spacing: 0.08em; }
.identite-texte span { font-size: 12.5px; color: var(--texte-2); }
.identite-texte span::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--vert); margin: 0 6px 1px 0; }
.identite-texte span.hors::before { background: var(--texte-3); }
.barre-actions { display: flex; gap: 8px; }

.fil { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 6px 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.fil > * { flex-shrink: 0; }
.plus-ancien { align-self: center; color: var(--teinte); font-size: 14px; padding: 6px 12px; }
.separateur-jour { align-self: center; font-size: 12px; font-weight: 600; color: var(--texte-3); padding: 8px 0 2px; }

.msg { max-width: 100%; overflow-wrap: anywhere; animation: apparait 0.38s var(--ressort) both; transition: scale 0.3s var(--ressort); }
/* appui long : la bulle s'enfonce, puis le menu (copier, lire, modifier) s'ouvre */
.msg.presse { scale: 0.97; }
@media (hover: none) { .msg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
@keyframes apparait { from { opacity: 0; transform: translateY(8px); } }
.msg.moi { align-self: flex-end; max-width: 82%; background: var(--cellule-2); border-radius: 20px 20px 6px 20px; padding: 9px 14px; white-space: pre-wrap; }
.msg.lui { align-self: stretch; font-size: 17px; line-height: 1.5; }
.msg .corps > :first-child { margin-top: 0; }
.msg .corps p { margin: 0 0 0.7em; }
.msg .corps p:last-child { margin-bottom: 0; }
.msg .corps ul, .msg .corps ol { margin: 0.2em 0 0.8em; padding-left: 1.3em; }
.msg .corps li { margin: 0.25em 0; }
.msg .corps li::marker { color: var(--texte-3); }
.msg .corps .titre { display: block; font-weight: 650; font-size: 18px; margin: 1em 0 0.35em; letter-spacing: -0.015em; }
.msg .corps strong { font-weight: 640; color: #fff; }
.msg .corps code { font: 0.86em ui-monospace, 'SF Mono', Menlo, monospace; background: var(--cellule-2); border-radius: 6px; padding: 1px 6px; }
.msg .corps blockquote { margin: 0.5em 0; padding-left: 12px; border-left: 3px solid var(--cellule-3); color: var(--texte-2); }
.msg .corps a { color: var(--teinte); }
.msg.lui.carte { background: var(--cellule); border-radius: 18px; padding: 12px 16px 14px; }
.carte-tete { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--texte-2); margin-bottom: 6px; }
.carte-tete i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--teinte)); box-shadow: 0 0 10px var(--c, var(--teinte)); }
.carte-tete span { margin-left: auto; font-weight: 400; color: var(--texte-3); }
/* réponses aux routines : la lumière de l'aube, du crépuscule… */
.msg.lui.briefing { padding: 0; overflow: hidden; box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
  background: radial-gradient(110% 80% at 0% 0%, color-mix(in srgb, var(--b1) 24%, transparent), transparent 62%),
    radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--b2) 18%, transparent), transparent 60%), var(--cellule); }
.briefing-tete { display: flex; align-items: center; gap: 12px; padding: 15px 16px 4px; }
.briefing-icone { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(135deg, var(--b1), var(--b2)); box-shadow: 0 6px 20px color-mix(in srgb, var(--b2) 45%, transparent); }
.briefing-icone svg { width: 21px; height: 21px; stroke-width: 2; }
.briefing-tete b { display: block; font-size: 17px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
.briefing-tete small { color: var(--texte-2); font-size: 13px; }
.msg.briefing .corps { padding: 8px 16px 16px; font-size: 16px; }
.msg.erreur { color: var(--rouge); font-size: 15px; }
.curseur-ecriture::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--teinte); animation: battement 1s ease-in-out infinite; vertical-align: 1px; }
@keyframes battement { 50% { opacity: 0.25; transform: scale(0.7); } }
/* outil en cours : texte qui scintille (façon Apple) */
.activite { font-size: 15px; font-weight: 500; margin-bottom: 6px;
  background: linear-gradient(90deg, var(--texte-3) 30%, #fff 50%, var(--texte-3) 70%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: scintille 1.6s linear infinite; }
@keyframes scintille { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* accueil (conversation vide) */
.accueil { margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 4px 0; }
.accueil .orbe { --taille: 150px; margin-bottom: 28px; }
.accueil h1 { font: 400 34px/1.12 var(--serif); letter-spacing: -0.01em; margin: 0 0 8px; }
.accueil p { color: var(--texte-2); margin: 0 0 26px; font-size: 16px; max-width: 320px; }
.suggestions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.suggestion { text-align: left; background: var(--cellule); border-radius: 16px; padding: 13px 14px; font-size: 15px; line-height: 1.3; min-height: 74px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.suggestion small { color: var(--texte-3); font-size: 12.5px; }

/* zone de saisie */
.compositeur { flex: none; padding: 6px 12px var(--reserve-bas); position: relative; z-index: 2;
  background: linear-gradient(transparent, var(--noir) 26%); }
.capsule { display: flex; align-items: flex-end; gap: 4px; padding: 5px 5px 5px 4px; border-radius: 26px; background: var(--cellule);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06); transition: box-shadow 0.25s; }
.capsule:focus-within { box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 0 0 4px rgba(124, 200, 255, 0.08); }
.capsule textarea { flex: 1; min-width: 0; border: 0; outline: none; background: none; resize: none; font-size: 17px; line-height: 1.32; padding: 9px 4px; max-height: 150px; scrollbar-width: none; }
.capsule textarea::-webkit-scrollbar { display: none; }
.pastille { flex: none; align-self: center; height: 28px; padding: 0 10px; border-radius: 14px; font-size: 13px; font-weight: 600; color: var(--texte-3); background: var(--cellule-2); }
.pastille[aria-pressed='true'] { color: #120a2a; background: linear-gradient(135deg, var(--violet), var(--glace)); }
.bouton-action { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; }
.bouton-action svg { width: 21px; height: 21px; stroke-width: 2.2; }
.bouton-action.ecoute { background: var(--rouge); color: #fff; }
.vignettes { display: flex; gap: 8px; margin: 0 4px 8px; }
.vignettes img { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; }

/* ======================================================================= AUJOURD'HUI */
.anneaux-carte { background: var(--cellule); border-radius: 22px; padding: 18px; display: grid; grid-template-columns: 148px 1fr; gap: 18px; align-items: center; }
.anneaux { width: 148px; height: 148px; }
.anneaux svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.anneaux circle { fill: none; stroke-linecap: round; }
.anneaux .piste { stroke-opacity: 0.16; }
.anneaux .arc { transition: stroke-dashoffset 1.1s var(--ressort); }
.legende-anneaux { display: grid; gap: 12px; }
.legende-anneaux button { text-align: left; display: block; }
.legende-anneaux .nom { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.legende-anneaux .val { font: 600 22px/1.15 var(--ronde); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.legende-anneaux .val small { font-size: 14px; color: var(--texte-2); font-weight: 500; }
.c-sport { color: var(--anneau-sport-a); } .c-pas { color: var(--anneau-pas-a); } .c-sommeil { color: var(--anneau-sommeil-a); }
.serie { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 12px; border-radius: 20px; background: rgba(255, 79, 123, 0.13); color: #ff8aa6; font-size: 14px; font-weight: 600; }
.serie svg { width: 17px; height: 17px; }
.semaine { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; background: var(--cellule); border-radius: var(--rayon); padding: 12px 6px 10px; }
.semaine .j { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--texte-3); text-transform: uppercase; }
.semaine .j.auj { color: var(--texte); }
.semaine .mini { width: 34px; height: 34px; }
.semaine .mini svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.coche-rond { width: 24px; height: 24px; border-radius: 50%; border: 1.8px solid var(--cellule-3); flex: none; display: grid; place-items: center; transition: background 0.2s, border-color 0.2s; }
.coche-rond svg { width: 15px; height: 15px; stroke-width: 3; opacity: 0; color: #000; }
.coche-rond.fait { background: var(--teinte); border-color: var(--teinte); }
.coche-rond.fait svg { opacity: 1; }
/* tâche prioritaire : un « ! » ambré devant le titre, comme dans Rappels */
.prio-1 .tache-titre::before { content: '!'; color: var(--ambre); font-weight: 700; margin-right: 6px; }
.prio-1 .coche-rond:not(.fait) { border-color: rgba(255, 179, 64, 0.65); }
.ligne.terminee .tache-titre { color: var(--texte-3); text-decoration: line-through; transition: color 0.3s; }

/* ciel de l'en-tête d'Aujourd'hui : sa lumière suit le moment de la journée */
.ciel { position: absolute; left: 0; right: 0; top: 0; height: 420px; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
/* deux nappes de lumière qui dérivent lentement (seulement des déplacements : la carte graphique s'en charge, sans effort) */
.ciel > i { position: absolute; top: -30%; width: 120%; height: 110%; border-radius: 50%; will-change: transform;
  animation: derive-ciel 19s ease-in-out infinite alternate; }
.ciel > i:nth-child(1) { left: -45%; background: radial-gradient(closest-side, var(--c1), transparent); }
.ciel > i:nth-child(2) { right: -50%; top: -26%; background: radial-gradient(closest-side, var(--c2), transparent); animation-duration: 24s; animation-direction: alternate-reverse; }
@keyframes derive-ciel { from { transform: translate3d(-7%, -3%, 0) scale(1); } to { transform: translate3d(9%, 7%, 0) scale(1.18); } }
/* la nuit, de temps en temps, une étoile filante */
.ciel > b { display: none; }
.ciel[data-moment='nuit'] > b { display: block; position: absolute; top: 4%; left: 72%; width: 80px; height: 1.4px; border-radius: 1px; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0)); animation: filante 13s ease-in 5s infinite; }
@keyframes filante { 0% { opacity: 0; transform: rotate(-24deg) translateX(0); } 1.5% { opacity: 0.9; } 5.5% { opacity: 0; transform: rotate(-24deg) translateX(-150px); } 100% { opacity: 0; transform: rotate(-24deg) translateX(-150px); } }
.ciel[data-moment='aube'] { --c1: rgba(255, 158, 110, 0.34); --c2: rgba(255, 111, 160, 0.24); }
.ciel[data-moment='jour'] { --c1: rgba(89, 184, 255, 0.3); --c2: rgba(92, 242, 196, 0.18); }
.ciel[data-moment='soir'] { --c1: rgba(255, 138, 92, 0.3); --c2: rgba(155, 123, 255, 0.32); }
.ciel[data-moment='nuit'] { --c1: rgba(79, 107, 255, 0.26); --c2: rgba(155, 123, 255, 0.2); }
.ciel[data-moment='nuit']::after { content: ''; position: absolute; inset: 0 0 40%; animation: scintillement 5s ease-in-out infinite alternate;
  background-image: radial-gradient(1.2px 1.2px at 8% 22%, #fff, transparent), radial-gradient(1px 1px at 21% 9%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 37% 30%, #fff, transparent), radial-gradient(1px 1px at 52% 12%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 64% 26%, #fff, transparent), radial-gradient(1px 1px at 76% 6%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 88% 19%, #fff, transparent), radial-gradient(1px 1px at 95% 34%, #fff, transparent),
    radial-gradient(1px 1px at 44% 4%, #fff, transparent), radial-gradient(1.2px 1.2px at 15% 40%, #fff, transparent); }
@keyframes scintillement { from { opacity: 0.35; } to { opacity: 0.8; } }
.meteo { flex: none; text-align: right; padding-bottom: 2px; }
.meteo-ligne { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.meteo-ligne b { font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.meteo-icone svg { width: 27px; height: 27px; }
.meteo small { display: block; font-size: 12.5px; color: var(--texte-2); margin-top: 4px; white-space: nowrap; }
.ic-soleil { color: #ffd76b; } .ic-lune { color: #c9d4ff; } .ic-nuage, .ic-brume { color: #c7d0dc; } .ic-pluie { color: var(--teinte); } .ic-orage { color: var(--ambre); } .ic-neige { color: #fff; }
/* prochain rendez-vous du jour */
.ligne.prochain::after { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(var(--menthe), var(--glace)); }
.compte-a-rebours { flex: none; font-size: 12.5px; font-weight: 600; color: var(--menthe); background: rgba(92, 242, 196, 0.12); padding: 4px 9px; border-radius: 10px; white-space: nowrap; }
.heure-col { width: 54px; flex: none; color: var(--texte-2); font: 15px var(--ronde); font-variant-numeric: tabular-nums; }
.barre-progres { height: 6px; border-radius: 3px; background: var(--cellule-3); overflow: hidden; margin-top: 8px; }
.barre-progres i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--glace), var(--menthe)); }
.puces-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.puces-choix button { padding: 8px 14px; border-radius: 18px; background: var(--cellule-2); font-size: 15px; }
.puces-choix button.on { background: #fff; color: #000; }
.grand-nombre { width: 100%; text-align: center; font: 600 46px/1.1 var(--ronde); background: none; border: 0; outline: none; letter-spacing: -0.02em; padding: 8px 0; }
.compteur { display: flex; align-items: center; justify-content: center; gap: 22px; }
.compteur button { width: 52px; height: 52px; border-radius: 50%; background: var(--cellule-2); font-size: 26px; line-height: 1; }
.compteur .chiffre { font-size: 46px; font-weight: 600; min-width: 120px; text-align: center; }

/* ======================================================================= COMPTA */
.navigation-mois { display: inline-flex; align-items: center; gap: 2px; background: var(--cellule); border-radius: 18px; padding: 3px; }
.navigation-mois button { width: 32px; height: 30px; border-radius: 15px; display: grid; place-items: center; color: var(--texte-2); }
.navigation-mois button svg { width: 18px; height: 18px; stroke-width: 2.2; }
.navigation-mois span { font-size: 14px; font-weight: 600; padding: 0 6px; min-width: 104px; text-align: center; }
.heros { background: var(--cellule); border-radius: 22px; padding: 18px 18px 6px; overflow: hidden; position: relative; }
.heros .lib { font-size: 13px; color: var(--texte-2); font-weight: 600; }
.heros .montant { font: 700 44px/1.08 var(--ronde); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.heros .montant small, .tuile .val small { font-size: 0.56em; font-weight: 600; color: var(--texte-2); letter-spacing: -0.01em; }
.heros .lib { transition: color 0.2s; }
.heros.parcours .lib { color: var(--teinte); }
.heros.parcours .evolution { opacity: 0; }
.heros .detail { color: var(--texte-2); font-size: 14px; margin-top: 6px; }
.heros .detail b { color: var(--texte); font-weight: 600; }
.evolution { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; padding: 3px 8px; border-radius: 10px; margin-left: 8px; vertical-align: 10px; transition: opacity 0.2s; }
.evolution small { font-weight: 500; opacity: 0.75; margin-left: 2px; }
.evolution.hausse { background: rgba(50, 215, 75, 0.15); color: var(--vert); }
.evolution.baisse { background: rgba(255, 69, 58, 0.15); color: #ff6b62; }
/* courbe des 12 mois : se parcourt au doigt (le montant du mois touché s'affiche en grand) */
.courbe-zone { margin: 12px -18px 0; touch-action: pan-y; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.courbe { display: block; width: 100%; height: 104px; overflow: visible; }
.courbe .trait { fill: none; stroke: url(#degrade-trait); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 1.4s var(--ressort) 0.1s forwards; }
.courbe .aire { fill: url(#degrade-aire); stroke: none; opacity: 0; animation: fondu 0.8s ease 0.6s forwards; }
.courbe .point { fill: #fff; stroke: none; opacity: 0; animation: fondu 0.4s ease 1.2s forwards; }
.courbe .repere { stroke: rgba(255, 255, 255, 0.4); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; transition: opacity 0.15s; }
.parcours .courbe .repere { opacity: 1; }
/* le mois en cours « respire » */
.courbe .onde { fill: none; stroke: #9b7bff; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: onde 2.6s ease-out 1.6s infinite; }
.parcours .courbe .onde { visibility: hidden; }
@keyframes onde { 0% { opacity: 0.85; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
.mois-courbe span { transition: color 0.15s; }
.mois-courbe span.on { color: #fff; font-weight: 700; }
.a-encaisser { color: var(--ambre) !important; font-weight: 600; }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes fondu { to { opacity: 1; } }
.mois-courbe { display: grid; grid-template-columns: repeat(12, 1fr); font-size: 10px; color: var(--texte-3); text-align: center; text-transform: uppercase; padding: 2px 0 8px; }
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.tuile { background: var(--cellule); border-radius: 18px; padding: 14px 16px; min-width: 0; }
.tuile .lib { font-size: 13px; color: var(--texte-2); font-weight: 600; }
.tuile .val { font: 600 24px/1.2 var(--ronde); font-variant-numeric: tabular-nums; margin-top: 4px; letter-spacing: -0.02em; }
.tuile .sous { font-size: 13px; color: var(--texte-3); margin-top: 2px; }
.tuile.alerte .val { color: var(--ambre); }
.repartition { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin: 4px 0 2px; }
.repartition i { display: block; height: 100%; min-width: 3px; }
.pastille-couleur { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.jauge .barre-progres i.chaud { background: linear-gradient(90deg, var(--ambre), var(--rouge)); }
details.repli summary { list-style: none; cursor: pointer; }
details.repli summary::-webkit-details-marker { display: none; }
details.repli[open] summary svg.chevron { transform: rotate(90deg); }
details.repli summary svg.chevron { transition: transform 0.2s; }

/* ======================================================================= RÉGLAGES / MÉMOIRE */
.profil { display: flex; align-items: center; gap: 14px; background: var(--cellule); border-radius: 18px; padding: 14px 16px; width: 100%; text-align: left; }
.profil .orbe { --taille: 52px; }
.profil b { font-size: 19px; font-weight: 650; display: block; }
.profil span { color: var(--texte-2); font-size: 14px; }
.etat { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--texte-2); }
.etat::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--texte-3); }
.etat.ok::before { background: var(--vert); }
.etat.attention::before { background: var(--ambre); }
.code-appairage { font: 600 22px var(--ronde); letter-spacing: 0.12em; text-align: center; padding: 14px; border-radius: 12px; background: var(--cellule-2); user-select: all; }
.etapes { margin: 0; padding-left: 20px; color: var(--texte-2); font-size: 15px; }
.etapes li { margin: 5px 0; }
.couts { width: 100%; border-collapse: collapse; font-size: 14px; }
.couts td { padding: 7px 0; color: var(--texte-2); border-top: 0.5px solid var(--separateur); }
.couts tr:first-child td { border-top: 0; }
.couts td:last-child { text-align: right; color: var(--texte); font-family: var(--ronde); font-variant-numeric: tabular-nums; }
.souvenir-texte { flex: 1; outline: none; border-radius: 6px; }
.souvenir-texte[contenteditable='true'] { box-shadow: 0 0 0 2px rgba(124, 200, 255, 0.5); padding: 2px 4px; }

/* ======================================================================= feuille modale (bas d'écran) */
.voile { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0); transition: background 0.3s; }
.voile.ouvert { background: rgba(0, 0, 0, calc(0.5 * var(--tire, 1))); }
.feuille { width: 100%; max-width: 640px; max-height: calc(100% - var(--haut) - 20px); overflow-y: auto; background: #161618; border-radius: 26px 26px 0 0;
  padding: 6px 16px calc(var(--bas) + 18px); transform: translateY(100%); transition: transform 0.42s var(--ressort);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5), inset 0 0.5px 0 rgba(255, 255, 255, 0.1); }
.voile.ouvert .feuille { transform: none; }
/* poignée et en-tête : on y attrape la feuille pour la faire glisser vers le bas */
.poignee { width: 38px; height: 5px; border-radius: 3px; background: var(--cellule-3); margin: 0 auto; padding: 0; background-clip: content-box; box-sizing: content-box; border: 8px solid transparent; border-width: 6px 40px 10px; touch-action: none; cursor: grab; }
.feuille-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; touch-action: none; }
.feuille-tete h2 { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.015em; }
.feuille-corps { display: grid; gap: 14px; }

/* ======================================================================= notification façon Dynamic Island
   une capsule noire s'ouvre en haut de l'écran d'un coup de ressort, puis son contenu apparaît */
.toast { position: fixed; left: 50%; top: calc(var(--haut) + 8px); z-index: 80; display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px); min-height: 44px; padding: 9px 18px 9px 12px; border-radius: 24px; background: #000; color: #fff;
  font-size: 15px; font-weight: 500; line-height: 1.3; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65), inset 0 0 0 0.5px rgba(255, 255, 255, 0.16);
  transform: translate(-50%, -10px) scale(0.36, 0.7); opacity: 0; pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.18, 1.25, 0.32, 1), opacity 0.22s ease; }
.toast.visible { transform: translate(-50%, 0) scale(1); opacity: 1; }
.toast > * { opacity: 0; transition: opacity 0.18s ease; }
.toast.visible > * { opacity: 1; transition-delay: 0.14s; }
.toast > svg { width: 22px; height: 22px; flex: none; stroke-width: 2.4; }
.toast[data-type='ok'] > svg { color: var(--vert); }
.toast[data-type='souci'] > svg { color: var(--ambre); }
.toast-point { width: 8px; height: 8px; margin: 0 2px 0 5px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--menthe), var(--violet)); box-shadow: 0 0 10px rgba(89, 184, 255, 0.8); }

/* VOLKOV injoignable : une pastille discrète au-dessus de la barre d'onglets ; les écrans montrent les dernières données connues */
.reseau { position: fixed; left: 50%; bottom: calc(var(--pied) + var(--onglets) + 12px); z-index: 21; padding: 6px 12px 6px 10px; border-radius: 14px;
  display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--texte-2); white-space: nowrap;
  background: rgba(28, 28, 30, 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  transform: translate(-50%, 8px); opacity: 0; transition: transform 0.4s var(--ressort), opacity 0.25s; pointer-events: none; }
.reseau::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ambre); }
body.hors-ligne .reseau { transform: translate(-50%, 0); opacity: 1; }
body[data-ecran='parler'] .reseau { display: none; } /* (l'en-tête de Parler le dit déjà) */
.msg.erreur { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.reessayer { padding: 6px 14px; border-radius: 14px; background: rgba(255, 69, 58, 0.15); color: #ff6b62; font-size: 14px; font-weight: 600; }

/* ======================================================================= transitions entre écrans
   dans le sens du déplacement (onglet plus à droite → arrive par la droite ; Actu, Mémoire s'empilent) ;
   la barre d'onglets ne bouge pas pendant ce temps (seule sa lentille glisse) */
.onglets { view-transition-name: onglets; }
::view-transition-group(onglets), ::view-transition-new(onglets) { animation: none; }
::view-transition-old(onglets) { display: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; animation-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1); }
::view-transition-old(root) { animation-name: vt-sortie; }
::view-transition-new(root) { animation-name: vt-entree; }
html[data-sens='avant']::view-transition-old(root) { animation-name: vt-sortie-gauche; }
html[data-sens='avant']::view-transition-new(root) { animation-name: vt-entree-droite; }
html[data-sens='arriere']::view-transition-old(root) { animation-name: vt-sortie-droite; }
html[data-sens='arriere']::view-transition-new(root) { animation-name: vt-entree-gauche; }
@keyframes vt-sortie { to { opacity: 0; } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(6px); } }
@keyframes vt-sortie-gauche { to { opacity: 0; transform: translateX(-32px); } }
@keyframes vt-entree-droite { from { opacity: 0; transform: translateX(32px); } }
@keyframes vt-sortie-droite { to { opacity: 0; transform: translateX(32px); } }
@keyframes vt-entree-gauche { from { opacity: 0; transform: translateX(-32px); } }

@media (min-width: 720px) {
  .vue-contenu { padding-left: 24px; padding-right: 24px; }
  .fil { padding-left: 24px; padding-right: 24px; }
  .suggestions { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* sources citées en fin de réponse : discrètes */
.msg .corps .titre-sources { display: block; margin: 1.1em 0 0.3em; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texte-3); }
.msg .corps .titre-sources + ul { font-size: 14px; color: var(--texte-2); }

/* ======================================================================= ACTU */
/* « À la une » dans Aujourd'hui : une carte par rubrique, qui défilent au doigt */
.carrousel-actu { display: flex; gap: 10px; margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.carrousel-actu::-webkit-scrollbar { display: none; }
.carte-actu { flex: none; width: 232px; height: 240px; scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px; background: var(--cellule); text-align: left; box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.07); }
.carte-actu > img, .carte-actu-fond { display: block; width: 100%; height: 112px; flex: none; object-fit: cover; background: var(--cellule-2); }
.carte-actu-fond { background: radial-gradient(120% 100% at 20% 0%, color-mix(in srgb, var(--c) 55%, transparent), transparent 70%), var(--cellule-2); }
.carte-actu-texte { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 10px 13px 12px; }
.rub { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c); }
.rub svg { width: 14px; height: 14px; stroke-width: 2.2; }
.carte-actu b { font-size: 15px; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.carte-actu small { margin-top: auto; font-size: 12px; color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.squelette-carte, .squelette-une, .ligne-grise { background: linear-gradient(90deg, var(--cellule) 25%, var(--cellule-2) 50%, var(--cellule) 75%) 0 0 / 200% 100%; animation: chargement 1.3s linear infinite; }
@keyframes chargement { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* écran Actu : rubriques en pastilles, résumé de VOLKOV, l'article à la une, puis la liste */
.puces-rubriques { display: flex; gap: 8px; margin: 0 -16px; padding: 2px 16px 6px; overflow-x: auto; scrollbar-width: none; }
.puces-rubriques::-webkit-scrollbar { display: none; }
.puce-rub { flex: none; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px 0 12px; border-radius: 19px; background: var(--cellule);
  color: var(--texte-2); font-size: 15px; font-weight: 600; transition: background-color 0.25s, color 0.25s; }
.puce-rub svg { width: 18px; height: 18px; color: var(--c); transition: color 0.25s; }
.puce-rub.on { background: #fff; color: #000; }
.puce-rub.on svg { color: #000; }
.resume-actu { margin-top: 14px; padding: 14px 16px; border-radius: 18px;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c, var(--teinte)) 16%, transparent), transparent 60%), var(--cellule); }
.lancer-resume { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.lancer-resume > span:nth-child(2) { flex: 1; min-width: 0; }
.lancer-resume b, .resume-tete b { display: block; font-size: 16px; font-weight: 600; }
.lancer-resume small { display: block; color: var(--texte-2); font-size: 13.5px; margin-top: 1px; }
.lancer-resume svg.chevron { width: 16px; height: 16px; color: var(--texte-3); stroke-width: 2.4; }
.resume-icone { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #000; background: var(--c, var(--teinte)); }
.resume-icone svg { width: 19px; height: 19px; stroke-width: 2; }
.resume-tete { display: flex; align-items: center; gap: 10px; }
.resume-tete small { margin-left: auto; color: var(--texte-3); font-size: 12.5px; }
.resume-corps { margin-top: 10px; font-size: 15.5px; line-height: 1.5; }
.resume-corps ul { margin: 0; padding-left: 1.2em; }
.resume-corps li { margin: 0.35em 0; }
.resume-corps li::marker { color: var(--c, var(--teinte)); }
.resume-corps p { margin: 0 0 0.5em; }
.une { display: block; margin-top: 14px; border-radius: 20px; overflow: hidden; background: var(--cellule); color: inherit; transition: transform 0.15s; }
.une:active, .article:active, .carte-actu:active { transform: scale(0.98); }
.une-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--cellule-2); }
.une-texte { padding: 12px 16px 16px; }
.une b { display: block; margin-top: 4px; font-size: 21px; line-height: 1.22; font-weight: 700; letter-spacing: -0.02em; }
.une p { margin: 6px 0 0; color: var(--texte-2); font-size: 15px; line-height: 1.4; }
.meta-article { display: block; font-size: 12.5px; font-weight: 600; color: var(--texte-3); }
.meta-article .src { color: var(--c, var(--teinte)); }
.liste-articles { margin-top: 12px; }
.article { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; color: inherit; transition: transform 0.15s; }
.article + .article::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; border-top: 0.5px solid var(--separateur); }
.article .texte { flex: 1; min-width: 0; }
.article b { display: -webkit-box; margin-top: 3px; font-size: 16px; line-height: 1.3; font-weight: 500; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vignette { width: 72px; height: 72px; flex: none; border-radius: 12px; object-fit: cover; background: var(--cellule-2); }
.squelette-une { height: 300px; margin-top: 14px; border-radius: 20px; }
.ligne-grise { display: block; height: 12px; width: 92%; margin: 6px 0; border-radius: 6px; }
.ligne-grise.courte { width: 60%; }

/* écran de secours (js/garde.js) : l'app n'a pas démarré */
.secours { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 32px; background: var(--noir); text-align: center; }
.secours b { font-size: 22px; }
.secours p { margin: 0; max-width: 320px; color: var(--texte-2); font-size: 15px; }
.secours button { margin-top: 10px; min-height: 50px; padding: 0 26px; border-radius: 14px; background: #fff; color: #000; font-weight: 600; font-size: 17px; }

/* ======================================================================= SERVICES (façon Binance) */
/* le tiroir est rangé à gauche de l'app : --tiroir va de 0 (rangé) à 1 (ouvert) et suit le doigt ;
   l'app recule et s'assombrit derrière lui (sans jamais dépasser de l'écran : la page serait dézoomée sur iPhone) */
.tiroir { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 50; max-width: 720px; margin: 0 auto;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: radial-gradient(90% 36% at 0% 0%, rgba(155, 123, 255, 0.15), transparent 70%), radial-gradient(70% 30% at 100% 0%, rgba(89, 184, 255, 0.1), transparent 70%), var(--noir);
  transform: translate3d(calc((var(--tiroir, 0) - 1) * 100vw), 0, 0); box-shadow: 16px 0 48px rgba(0, 0, 0, calc(var(--tiroir, 0) * 0.75)); }
.tiroir .vue-contenu { padding-bottom: calc(var(--bas) + 32px); }
/* sous l'heure, le contenu s'efface en remontant */
.tiroir-haut { position: sticky; top: 0; z-index: 5; height: calc(var(--haut) + 8px); margin-bottom: calc(-1 * (var(--haut) + 8px)); pointer-events: none;
  background: linear-gradient(var(--noir) 45%, transparent); }
.app { scale: calc(1 - var(--tiroir, 0) * 0.06); opacity: calc(1 - var(--tiroir, 0) * 0.6); }
body.tiroir-anime .tiroir { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s; }
body.tiroir-anime .app { transition: scale 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s, transform 0.45s var(--ressort), border-radius 0.45s; }

/* rubrique ouverte depuis un raccourci : elle s'arrête sous le bord supérieur et s'éclaire un instant */
[data-ancre] { scroll-margin-top: calc(var(--haut) + 58px); }
[data-ancre] .groupe { transition: box-shadow 0.5s ease; }
[data-ancre].cible .groupe { box-shadow: 0 0 0 2px rgba(124, 200, 255, 0.55), 0 0 26px rgba(124, 200, 255, 0.18); }

.grille-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 6px; padding-top: 4px; }
@media (min-width: 520px) { .grille-services { grid-template-columns: repeat(6, minmax(0, 1fr)); } .raccourcis .grille-services { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.tuile-service { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; position: relative;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.tuile-icone { position: relative; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--c);
  background: radial-gradient(120% 100% at 30% 0%, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%), color-mix(in srgb, var(--c) 8%, var(--cellule));
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 0.5px color-mix(in srgb, var(--c) 24%, transparent); }
.tuile-icone > svg { width: 25px; height: 25px; stroke-width: 1.9; }
.tuile-nom { max-width: 100%; font-size: 12px; line-height: 1.22; letter-spacing: -0.005em; text-align: center; color: var(--texte);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.badge-service { position: absolute; top: -6px; right: -8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--ambre); color: #1a1000; font: 700 12px/20px var(--ronde); text-align: center; box-shadow: 0 0 0 2.5px var(--noir); }
.pastille-neuf { position: absolute; top: -7px; right: -14px; padding: 2px 6px; border-radius: 8px; background: var(--menthe); color: #00140d;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 0 0 2.5px var(--noir); }
/* mode « Modifier » : les tuiles frémissent (comme l'écran d'accueil de l'iPhone), − pour retirer, + pour ajouter */
.marque-edition { position: absolute; top: -7px; left: -7px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cellule-3); color: #fff; box-shadow: 0 0 0 2.5px var(--noir); }
.marque-edition svg { width: 13px; height: 13px; stroke-width: 3; }
.marque-edition.ajouter { background: var(--teinte); color: #00131f; }
.edition .tuile-icone { animation: fremit 0.28s ease-in-out infinite alternate; }
.edition .tuile-service:nth-child(2n) .tuile-icone { animation-delay: -0.14s; animation-direction: alternate-reverse; }
.edition .tuile-service:nth-child(3n) .tuile-icone { animation-duration: 0.32s; }
@keyframes fremit { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
#s-favoris { touch-action: none; }
.edition #s-favoris .tuile-service { cursor: grab; }
.tuile-service.tenue { z-index: 5; transition: none; }
.tuile-service.tenue .tuile-icone { animation: none; transform: scale(1.14); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.65), inset 0 0 0 0.5px color-mix(in srgb, var(--c) 40%, transparent); }
.vide-services { color: var(--texte-2); font-size: 15px; padding: 14px 16px; background: var(--cellule); border-radius: var(--rayon); }

/* Aujourd'hui : les favoris juste sous le titre */
.raccourcis { margin: -2px 0 22px; }
.raccourcis:empty { display: none; }

/* recherche */
.recherche { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 10px; border-radius: 12px; background: var(--cellule); color: var(--texte-3); transition: opacity 0.2s; }
.recherche > svg { width: 18px; height: 18px; stroke-width: 2.2; }
.recherche input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; font-size: 17px; color: var(--texte); -webkit-appearance: none; appearance: none; }
.recherche input::placeholder { color: var(--texte-3); }
.recherche input::-webkit-search-cancel-button { -webkit-appearance: none; }
.recherche .effacer { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--cellule-3); color: var(--texte); }
.recherche .effacer svg { width: 13px; height: 13px; stroke-width: 2.8; }
.recherche.grise { opacity: 0.4; pointer-events: none; }
.demander-volkov { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 22px; padding: 13px 16px; border-radius: 16px; text-align: left;
  background: radial-gradient(120% 140% at 0% 0%, rgba(155, 123, 255, 0.16), transparent 60%), var(--cellule); }
.demander-volkov > svg:first-child { width: 22px; height: 22px; color: var(--violet); }
.demander-volkov span { flex: 1; min-width: 0; }
.demander-volkov b { display: block; font-size: 16px; font-weight: 600; }
.demander-volkov small { display: block; color: var(--texte-2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demander-volkov > svg:last-child { width: 16px; height: 16px; color: var(--texte-3); stroke-width: 2.4; }

/* ======================================================================= LÉLÉ ET RORO (l'espace à deux) */
/* leurs couleurs, reprises de l'icône : lui menthe et glace, elle rose et ambre */
.q-romain { --q1: #5cf2c4; --q2: #59b8ff; }
.q-elle { --q1: #ff7ac8; --q2: #ffb340; }
.nous-tete { position: relative; text-align: center; padding: 18px 0 6px; isolation: isolate; }
.nous-tete::before { content: ''; position: absolute; left: -16px; right: -16px; top: calc(-1 * var(--haut) - 10px); height: 300px; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 60% at 30% 30%, rgba(92, 242, 196, 0.16), transparent 70%), radial-gradient(55% 60% at 72% 34%, rgba(255, 122, 200, 0.17), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.nous-tete h1 { font: 400 34px/1.12 var(--serif); letter-spacing: -0.01em; margin: 14px 0 6px; }
.nous-resume { margin: 0; color: var(--texte-2); font-size: 15px; }
.duo { display: inline-flex; }
.bulle-qui { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font: 600 24px/1 var(--ronde); color: #0b0b10;
  background: linear-gradient(135deg, var(--q1), var(--q2)); box-shadow: 0 0 0 3px var(--noir), 0 10px 30px color-mix(in srgb, var(--q2) 35%, transparent); }
.bulle-qui + .bulle-qui { margin-left: -14px; }
.duo.petit .bulle-qui { width: 34px; height: 34px; font-size: 15px; box-shadow: 0 0 0 2px var(--cellule); }
.duo.petit .bulle-qui + .bulle-qui { margin-left: -9px; }
.point-qui { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 6px 1px 0; background: linear-gradient(135deg, var(--q1), var(--q2)); }
.coche-rond.pointille { border-style: dashed; }
.tache-nous .texte { text-align: left; }
.tache-nous.en-cours { opacity: 0.55; }
.tache-nous.faite .tache-titre { color: var(--texte-3); text-decoration: line-through; }
.tache-nous .coche-rond.fait { background: linear-gradient(135deg, var(--menthe), var(--glace)); border-color: transparent; }
.rappel-nous .texte { text-align: left; }
.cloche-nous { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #0b0b10; }
.cloche-nous svg { width: 17px; height: 17px; stroke-width: 2.1; }
.cloche-nous.p-deux { background: linear-gradient(135deg, #5cf2c4 0%, #59b8ff 45%, #ff7ac8 75%, #ffb340); }
.cloche-nous.p-romain { background: linear-gradient(135deg, #5cf2c4, #59b8ff); }
.cloche-nous.p-elle { background: linear-gradient(135deg, #ff7ac8, #ffb340); }
.pour-nous { flex: none; font-size: 12.5px; font-weight: 600; padding: 4px 9px; border-radius: 10px; background: var(--cellule-2); color: var(--texte-2); }
.pour-nous.p-deux { color: #ffc0e3; background: rgba(255, 122, 200, 0.14); }
/* choix « pour qui » : contrôle segmenté façon iOS */
.segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 2px; border-radius: 10px; background: var(--cellule-2); }
.segments button { min-height: 34px; padding: 0 6px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.segments button.on { background: var(--cellule-3); color: var(--texte); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.puces-choix [data-m].on { background: #fff; color: #000; }
/* carte sur Aujourd'hui */
.carte-nous { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 18px; text-align: left;
  background: radial-gradient(90% 120% at 0% 0%, rgba(255, 122, 200, 0.12), transparent 60%), radial-gradient(80% 120% at 100% 100%, rgba(92, 242, 196, 0.08), transparent 60%), var(--cellule); }
.carte-nous-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.carte-nous-texte b { font-size: 16px; font-weight: 600; }
.carte-nous-texte small { color: var(--texte-2); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apercu-nous { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--texte-2); font-size: 13px; white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.apercu-nous i.point-qui { margin: 0; flex: none; }
.apercu-nous span { color: var(--texte-3); }
.carte-nous > svg.chevron { width: 16px; height: 16px; color: var(--texte-3); stroke-width: 2.4; }

/* la petite app de sa copine (page à part, sans barre d'onglets) */
.nous-page { position: fixed; inset: 0; max-width: 720px; margin: 0 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.page-nous .vue-contenu { padding-bottom: calc(var(--bas) + 40px); }
.page-nous .reseau { bottom: calc(var(--bas) + 14px); }
.carte-installer { display: flex; align-items: center; gap: 14px; width: 100%; margin: 4px 0 4px; padding: 14px 16px; border-radius: 18px; text-align: left;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 122, 200, 0.16), transparent 60%), var(--cellule); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08); }
.carte-installer b { font-size: 16px; font-weight: 600; }
.carte-installer p { margin: 3px 0 0; color: var(--texte-2); font-size: 14px; line-height: 1.4; }
.carte-installer p svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--teinte); }
.carte-installer > div { flex: 1; min-width: 0; }
.carte-installer > svg { width: 16px; height: 16px; color: var(--texte-3); stroke-width: 2.4; }
.icone-installer { flex: none; width: 44px; height: 44px; border-radius: 11px; overflow: hidden; display: grid; place-items: center; }
.icone-installer.cloche { background: linear-gradient(135deg, #ff7ac8, #ffb340); color: #0b0b10; }
.icone-installer.cloche svg { width: 22px; height: 22px; stroke-width: 2.1; }
.pied-nous { margin: 26px 16px 0; text-align: center; color: var(--texte-3); font-size: 12.5px; line-height: 1.45; }

/* --- part de chacun (barre bicolore) et légende */
.partage-nous { display: flex; gap: 3px; height: 8px; margin-top: 6px; border-radius: 4px; overflow: hidden; }
.partage-nous i { display: block; height: 100%; background: linear-gradient(90deg, var(--q1), var(--q2)); transition: flex 0.6s var(--ressort); }
.legende-nous { display: flex; gap: 14px; font-size: 12.5px; color: var(--texte-2); margin-top: 6px; }

/* --- filtres : tout / pour moi / pour l'autre */
.filtres-nous { display: flex; gap: 6px; margin: 0 0 10px; }
.filtres-nous button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--cellule); color: var(--texte-2); font-size: 14px; font-weight: 600; }
.filtres-nous button small { font: 600 12px var(--ronde); color: var(--texte-3); }
.filtres-nous button.on { background: #fff; color: #000; }
.filtres-nous button.on small { color: rgba(0, 0, 0, 0.5); }

/* --- échéances : en retard, aujourd'hui, demain, plus tard */
.quand-nous { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 7px; font-size: 12px; font-weight: 600; background: var(--cellule-2); color: var(--texte-2); text-transform: capitalize; }
.quand-nous.retard { background: rgba(255, 69, 58, 0.16); color: #ff7b72; text-transform: none; }
.quand-nous.auj { background: rgba(92, 242, 196, 0.14); color: var(--menthe); }
.quand-nous.bientot { background: rgba(89, 184, 255, 0.14); color: var(--glace); }
.tache-nous.en-retard .coche-rond:not(.fait) { border-color: rgba(255, 105, 97, 0.7); }
.bulle-qui.mini { width: 26px; height: 26px; font-size: 12px; flex: none; box-shadow: none; }
.tache-nous .coche-rond.fait { animation: coche 0.42s var(--ressort); }
@keyframes coche { 40% { transform: scale(1.25); } }

/* --- ajout rapide : les puces « quand » et « qui » apparaissent pendant la saisie */
.options-ajout { display: grid; gap: 8px; padding: 0 16px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s var(--ressort), opacity 0.2s, padding 0.3s; }
.options-ajout.ouvert { max-height: 120px; opacity: 1; padding: 2px 16px 12px; }
.mini-puces { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.mini-puces::-webkit-scrollbar { display: none; }
.mini-puces button { flex: none; height: 30px; padding: 0 11px; border-radius: 15px; background: var(--cellule-2); color: var(--texte-2); font-size: 13.5px; font-weight: 600; }
.mini-puces button.on { background: rgba(124, 200, 255, 0.2); color: var(--teinte); }

/* --- fiche d'une tâche */
.detail-nous { display: flex; flex-direction: column; gap: 6px; padding: 0 4px 4px; }
.detail-titre { font: 400 26px/1.2 var(--serif); letter-spacing: -0.01em; }
.detail-nous small { color: var(--texte-2); font-size: 13.5px; }
.libelle-nous { margin: 4px 4px -6px; font-size: 13px; font-weight: 600; color: var(--texte-2); text-transform: uppercase; letter-spacing: 0.03em; }
.signe-nous, .bouton.primaire[data-fait] { gap: 8px; }
.signe-nous { background: linear-gradient(135deg, #ff7ac8, #ffb340); color: #1a0710; }
.signe-nous svg, .bouton[data-fait] svg { width: 19px; height: 19px; stroke-width: 2.2; }

/* --- confettis (aux couleurs de l'aurore et des deux anneaux) */
.confettis { position: fixed; z-index: 90; width: 0; height: 0; pointer-events: none; }
.confettis i { position: absolute; left: -3px; top: -4px; width: 6px; height: 9px; border-radius: 2px; background: var(--c);
  animation: eclat var(--t) cubic-bezier(0.15, 0.7, 0.3, 1) forwards; }
.confettis i:nth-child(3n) { width: 7px; height: 7px; border-radius: 50%; }
@keyframes eclat { 0% { transform: translate(0, 0) rotate(0) scale(0.6); opacity: 1; } 70% { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 40px)) rotate(var(--r)) scale(1); opacity: 0; } }

/* ======================================================================= LE JEU (niveau du duo, points, trophées, défi, boss) */
.carte-jeu { margin-top: 18px; padding: 16px 16px 12px; border-radius: 22px; position: relative; overflow: hidden;
  background: radial-gradient(90% 120% at 0% 0%, rgba(92, 242, 196, 0.12), transparent 60%), radial-gradient(90% 120% at 100% 0%, rgba(255, 122, 200, 0.12), transparent 60%), var(--cellule);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08); }
.jeu-haut { display: flex; align-items: center; gap: 16px; }
.badge-niveau { position: relative; width: 84px; height: 84px; flex: none; }
.badge-niveau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.badge-niveau circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.badge-niveau .piste { stroke: rgba(255, 255, 255, 0.08); }
.badge-niveau .arc { stroke: url(#degrade-niveau); transition: stroke-dashoffset 1.3s var(--ressort); filter: drop-shadow(0 0 6px rgba(124, 200, 255, 0.4)); }
.badge-niveau > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.badge-niveau small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texte-2); }
.badge-niveau b { font-size: 32px; font-weight: 700; margin-top: 1px; background: linear-gradient(135deg, #fff, #cfe8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jeu-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.surtitre-jeu { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texte-2); }
.jeu-texte b { font: 400 24px/1.15 var(--serif); letter-spacing: -0.01em; }
.jeu-texte small:last-child { color: var(--texte-2); font-size: 13.5px; }
.jeu-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.jeu-chiffres > div { background: rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 8px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.jeu-chiffres b { font-size: 20px; font-weight: 700; }
.jeu-chiffres small { font-size: 11px; color: var(--texte-2); display: inline-flex; align-items: center; justify-content: center; gap: 3px; line-height: 1.2; }
.jeu-chiffres small .point-qui { margin: 0; }
.jeu-chiffres small svg { width: 12px; height: 12px; }
.jeu-chiffres .en-feu { background: rgba(255, 159, 67, 0.14); }
.jeu-chiffres .en-feu b, .jeu-chiffres .en-feu small { color: #ffb36b; }
.jeu-chiffres b svg { width: 17px; height: 17px; margin-right: 2px; vertical-align: -1px; stroke-width: 2.2; }
.trophees { display: flex; gap: 8px; margin: 12px -16px 0; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
.trophees::-webkit-scrollbar { display: none; }
.trophee { flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 5px; opacity: 0.38; filter: grayscale(1); }
.trophee span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--cellule-2); color: var(--texte-2); }
.trophee span svg { width: 22px; height: 22px; }
.trophee small { font-size: 10.5px; line-height: 1.2; text-align: center; color: var(--texte-2); }
.trophee.obtenu { opacity: 1; filter: none; }
.trophee.obtenu span { background: radial-gradient(circle at 35% 30%, #fff3c4, #ffc94d 45%, #e08a1e); color: #4a2800; box-shadow: 0 6px 18px rgba(255, 179, 64, 0.35); }
.trophee.obtenu small { color: var(--texte); }
.jeu-pied { margin-top: 10px; font-size: 11.5px; color: var(--texte-3); text-align: center; }
/* le défi de la semaine */
.carte-defi { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 10px; padding: 14px 16px; border-radius: 18px; text-align: left;
  background: radial-gradient(100% 140% at 0% 0%, rgba(255, 179, 64, 0.14), transparent 60%), var(--cellule); }
.carte-defi.vide { background: var(--cellule); border: 1px dashed rgba(255, 179, 64, 0.35); }
.defi-icone { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #2a1600; background: linear-gradient(135deg, #ffd76b, #ff9f43); }
.defi-icone svg { width: 21px; height: 21px; stroke-width: 2.1; }
.defi-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.defi-texte b { font-size: 16px; font-weight: 600; }
.defi-texte small { color: var(--texte-2); font-size: 13.5px; }
.barre-defi { display: block; height: 8px; border-radius: 4px; background: var(--cellule-3); overflow: hidden; margin: 4px 0 2px; }
.barre-defi i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ffd76b, #ff9f43); transition: width 0.8s var(--ressort); }
.carte-defi.reussi { background: radial-gradient(100% 140% at 0% 0%, rgba(255, 215, 107, 0.25), transparent 60%), var(--cellule); box-shadow: inset 0 0 0 1px rgba(255, 215, 107, 0.35); }
.carte-defi > svg.chevron { width: 16px; height: 16px; color: var(--texte-3); stroke-width: 2.4; }
/* le boss : une couronne, une lueur dorée */
.tache-nous.boss { background: linear-gradient(90deg, rgba(255, 201, 77, 0.1), transparent 70%); }
.tache-nous.boss .coche-rond:not(.fait) { border-color: rgba(255, 201, 77, 0.8); box-shadow: 0 0 10px rgba(255, 201, 77, 0.35); }
.boss-nous { display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; padding: 1px 7px 1px 5px; border-radius: 7px; font-size: 12px; font-weight: 700; color: #ffd76b; background: rgba(255, 201, 77, 0.15); }
.boss-nous svg { width: 13px; height: 13px; stroke-width: 2.2; }
.couronne-ligne { width: 18px; height: 18px; color: #ffd76b; vertical-align: -3px; margin-right: 6px; }
/* les points gagnés s'envolent de la case cochée */
.plus-points { position: fixed; z-index: 91; transform: translate(-50%, -50%); font: 800 20px var(--ronde); color: var(--menthe); text-shadow: 0 2px 12px rgba(92, 242, 196, 0.6);
  pointer-events: none; animation: envol 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
.plus-points.boss { color: #ffd76b; font-size: 26px; text-shadow: 0 2px 14px rgba(255, 201, 77, 0.7); }
@keyframes envol { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } 20% { opacity: 1; transform: translate(-50%, -90%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -230%) scale(1); } }

/* ======================================================================= LA CAGNOTTE */
.carte-cagnotte { padding: 16px; border-radius: 22px; display: flex; flex-direction: column; gap: 6px;
  background: radial-gradient(90% 120% at 100% 0%, rgba(89, 184, 255, 0.14), transparent 60%), radial-gradient(80% 100% at 0% 100%, rgba(92, 242, 196, 0.1), transparent 60%), var(--cellule); }
.carte-cagnotte.pleine { box-shadow: inset 0 0 0 1px rgba(92, 242, 196, 0.45), 0 0 30px rgba(92, 242, 196, 0.12); }
.cagnotte-haut { display: flex; align-items: center; gap: 12px; }
.cagnotte-haut > span:last-child { display: flex; flex-direction: column; }
.cagnotte-haut b { font-size: 17px; font-weight: 600; }
.cagnotte-haut small { color: var(--texte-2); font-size: 13px; }
.tirelire { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #00131f; background: linear-gradient(135deg, #5cf2c4, #59b8ff); }
.tirelire svg { width: 22px; height: 22px; stroke-width: 2; }
.cagnotte-montant { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.cagnotte-montant b { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; }
.cagnotte-montant b small { font-size: 0.56em; color: var(--texte-2); }
.cagnotte-montant > small { color: var(--texte-2); font-size: 15px; }
.barre-cagnotte { position: relative; height: 12px; border-radius: 6px; background: var(--cellule-3); overflow: hidden; }
.barre-cagnotte i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #5cf2c4, #59b8ff 60%, #9b7bff); box-shadow: 0 0 14px rgba(89, 184, 255, 0.5); transition: width 1s var(--ressort); }
.barre-cagnotte span { position: absolute; top: 2px; bottom: 2px; width: 2px; margin-left: -1px; border-radius: 1px; background: rgba(255, 255, 255, 0.18); }
.barre-cagnotte span.passe { background: rgba(0, 0, 0, 0.25); }
.cagnotte-infos { font-size: 13.5px; color: var(--texte-2); }
.carte-cagnotte .rangee { margin-top: 8px; }
.carte-cagnotte .bouton svg { width: 18px; height: 18px; stroke-width: 2.4; }
.valeur.positif { color: var(--menthe) !important; }
.valeur.negatif { color: #ff8a80 !important; }
.puces-choix.centre { justify-content: center; }

/* ======================================================================= AGENTS */
.avatar-agent { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; color: #0b0b10; }
.avatar-agent svg { width: 16px; height: 16px; stroke-width: 2.2; }
.avatar-agent.grand { width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); }
.avatar-agent.grand svg { width: 24px; height: 24px; stroke-width: 2; }
.propositions { display: grid; gap: 10px; }
.proposition { padding: 14px 16px; border-radius: 18px; background: var(--cellule); box-shadow: inset 0 0 0 0.5px rgba(155, 123, 255, 0.35); display: flex; flex-direction: column; gap: 6px;
  transition: transform 0.3s var(--ressort), opacity 0.25s; }
.proposition.validee { transform: scale(0.96); opacity: 0.4; box-shadow: inset 0 0 0 1.5px var(--vert); }
.proposition.refusee { transform: translateX(-30px); opacity: 0; }
.prop-tete { display: flex; align-items: center; gap: 8px; color: var(--texte-2); font-size: 12.5px; }
.proposition b { font-size: 16px; font-weight: 600; line-height: 1.3; }
.proposition p { margin: 0; color: var(--texte-2); font-size: 14px; line-height: 1.4; }
.proposition .rangee { margin-top: 6px; }
.proposition .bouton { min-height: 40px; font-size: 15px; }
.proposition .bouton svg { width: 17px; height: 17px; stroke-width: 2.6; }
.carte-agent { padding: 16px; border-radius: 22px; background: var(--cellule); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08); transition: opacity 0.3s; }
.carte-agent.eteint { opacity: 0.55; }
.agent-tete { display: flex; align-items: center; gap: 12px; }
.agent-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.agent-nom b { font-size: 18px; font-weight: 650; }
.agent-nom small { color: var(--texte-2); font-size: 13px; }
.agent-mission { margin: 10px 0 0; color: var(--texte-2); font-size: 14px; line-height: 1.4; }
.agent-rapport { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); display: flex; flex-direction: column; gap: 6px; }
.agent-rapport small { color: var(--texte-3); font-size: 12px; font-weight: 600; }
.agent-rapport p { margin: 0; font-size: 15px; line-height: 1.45; }
.agent-rapport.erreur p { color: #ff8a80; }
.element-veille { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--cellule-2); color: inherit; }
.element-veille small { color: var(--glace); font-size: 11.5px; font-weight: 600; }
.element-veille b { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.element-veille span { color: var(--texte-2); font-size: 13.5px; line-height: 1.35; }
.sujets-veille { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.puce-sujet { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 4px 0 11px; border-radius: 15px; background: var(--cellule-2); font-size: 13.5px; }
.puce-sujet button { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--texte-3); }
.puce-sujet button svg { width: 12px; height: 12px; stroke-width: 2.6; }
.ajout-sujet { display: flex; gap: 8px; margin-top: 8px; }
.ajout-sujet .champ { min-height: 40px; padding: 8px 12px; font-size: 15px; background: var(--cellule-2); }
.ajout-sujet .bouton { min-height: 40px; }
.agent-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.agent-actions label { display: flex; align-items: center; gap: 6px; color: var(--texte-2); font-size: 14px; }
.agent-actions .saisie { flex: none; width: 76px; text-align: left; color: var(--texte); }
.agent-actions .bouton { min-height: 40px; font-size: 15px; }
.agent-actions .bouton svg { width: 17px; height: 17px; }
.bouton.travaille { background: linear-gradient(90deg, var(--teinte) 30%, #c9e8ff 50%, var(--teinte) 70%) 0 0 / 300% 100%; animation: scintille 1.6s linear infinite; opacity: 1; }
.carte-agents { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 18px; text-align: left;
  background: radial-gradient(90% 120% at 0% 0%, rgba(155, 123, 255, 0.16), transparent 60%), var(--cellule); }
.carte-agents .avatar-agent { width: 38px; height: 38px; border-radius: 12px; }
.carte-agents .avatar-agent svg { width: 21px; height: 21px; }
.carte-agents > svg.chevron { width: 16px; height: 16px; color: var(--texte-3); stroke-width: 2.4; }

/* ======================================================================= SANTÉ (Apple Santé, esprit StepsApp et Forme) */
/* carte d'Aujourd'hui */
.carte-sante { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 13px 14px 13px 16px; border-radius: 18px; text-align: left;
  background: radial-gradient(90% 140% at 0% 0%, rgba(255, 79, 123, 0.13), transparent 60%), var(--cellule); }
.carte-sante.relier .avatar-agent { width: 38px; height: 38px; border-radius: 12px; color: #fff; }
.carte-sante.relier .avatar-agent svg { width: 21px; height: 21px; }
.carte-sante > svg.chevron { width: 16px; height: 16px; color: var(--texte-3); stroke-width: 2.4; }
.carte-sante-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mesures-sante { display: flex; gap: 14px; overflow: hidden; }
.mesure-sante { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.mesure-sante svg { width: 15px; height: 15px; color: var(--c); stroke-width: 2.2; align-self: center; margin-right: 1px; }
.mesure-sante b { font-size: 17px; font-weight: 600; }
.mesure-sante small { font-size: 12.5px; color: var(--texte-2); }
.synchro-sante { display: inline-flex; align-items: center; gap: 4px; color: var(--texte-3); font-size: 12px; white-space: nowrap; }
.synchro-sante svg { width: 13px; height: 13px; color: #ff4f7b; stroke-width: 2.4; }
@media (max-width: 360px) { .mesure-sante:nth-child(3) { display: none; } }

/* pastille « synchronisé il y a… » du titre */
.pilule-synchro { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; margin-bottom: 4px; border-radius: 15px; background: var(--cellule);
  color: var(--texte-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pilule-synchro i { width: 7px; height: 7px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 8px var(--vert); }
.pilule-synchro.ancienne i { background: var(--ambre); box-shadow: 0 0 8px var(--ambre); }

/* jauge des pas */
.sante-heros { position: relative; overflow: hidden; border-radius: 26px; padding: 18px 16px 16px; text-align: center;
  background: radial-gradient(70% 55% at 50% 38%, rgba(92, 242, 196, 0.16), transparent 70%), linear-gradient(180deg, #0f1a17, var(--cellule) 70%); }
.sante-heros.atteint { background: radial-gradient(70% 55% at 50% 38%, rgba(255, 215, 107, 0.2), transparent 70%), linear-gradient(180deg, #1c1810, var(--cellule) 70%); }
.jauge { position: relative; width: min(250px, 72vw); aspect-ratio: 1; margin: 0 auto -18px; }
.jauge > svg { width: 100%; height: 100%; overflow: visible; }
.jauge > svg path { fill: none; stroke-width: 15; stroke-linecap: round; }
.jauge .piste { stroke: rgba(255, 255, 255, 0.07); }
.jauge .arc { stroke: url(#g-jauge); stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 10px rgba(92, 242, 196, 0.45)); transition: stroke-dashoffset 1.3s var(--ressort); }
.atteint .jauge .arc { filter: drop-shadow(0 0 12px rgba(255, 215, 107, 0.55)); }
.jauge .arc.pret { stroke-dashoffset: var(--cible); }
.jauge-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 6%; }
.jauge-centre small { display: inline-flex; align-items: center; gap: 5px; color: var(--menthe); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.jauge-centre small svg { width: 16px; height: 16px; }
.jauge-centre b { font: 700 clamp(44px, 14vw, 58px)/1.02 var(--ronde); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.jauge-centre span { color: var(--texte-2); font-size: 14px; }
.jauge-etat { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); color: var(--texte-2); font-size: 14px; }
.jauge-etat b { color: var(--texte); font-weight: 600; }
.jauge-etat svg { width: 17px; height: 17px; color: #ffd76b; }
.atteint .jauge-etat { color: #ffe39a; background: rgba(255, 215, 107, 0.12); }
.serie-sante { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 10px; color: #ff8aa6; font-size: 13.5px; font-weight: 600; }
.serie-sante svg { width: 16px; height: 16px; }
.tuiles-sante { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.tuile-sante { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 2px 9px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); min-width: 0; }
.tuile-sante svg { width: 19px; height: 19px; color: var(--c); stroke-width: 2.1; margin-bottom: 3px; }
.tuile-sante b { font-size: 19px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.tuile-sante b small { font-size: 12px; color: var(--texte-2); font-weight: 600; margin-left: 2px; }
.tuile-sante small { color: var(--texte-2); font-size: 11.5px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* graphiques en barres (heure par heure, tendance, nuits) : la valeur touchée s'affiche au-dessus */
.graphe { background: var(--cellule); border-radius: 20px; padding: 14px 14px 10px; }
.graphe .segments.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 14px; }
.lecture { min-height: 20px; color: var(--texte-2); font-size: 14px; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.15s; }
.lecture b { color: var(--texte); font-weight: 600; font-variant-numeric: tabular-nums; }
.parcours .lecture { color: var(--texte); }
.barres { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 3px; height: 128px;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: crosshair; }
.barres.jours, .barres.nuits { gap: 7px; }
.barres.jours.serre { gap: 2px; }
.barres i { display: block; height: var(--h); min-height: 0; border-radius: 4px 4px 2px 2px; transform: scaleY(0); transform-origin: bottom;
  background: linear-gradient(180deg, #c4ff6b, #5cf2c4); opacity: 0.85;
  transition: transform 0.7s var(--ressort) calc(var(--i) * 18ms), opacity 0.15s; }
.barres i.pret { transform: scaleY(1); }
.barres.heures i.futur { opacity: 0.25; }
.barres.heures i.now { opacity: 1; box-shadow: 0 0 12px rgba(196, 255, 107, 0.5); }
.barres.jours i { background: linear-gradient(180deg, rgba(196, 255, 107, 0.55), rgba(92, 242, 196, 0.45)); }
.barres.jours i.ok { background: linear-gradient(180deg, #c4ff6b, #5cf2c4); }
.barres.nuits i { background: linear-gradient(180deg, rgba(155, 123, 255, 0.55), rgba(89, 184, 255, 0.45)); }
.barres.nuits i.ok { background: linear-gradient(180deg, #9b7bff, #59b8ff); }
.parcours .barres i { opacity: 0.35; }
.parcours .barres i.vise { opacity: 1; }
.barres[style*='--objectif']::after { content: ''; position: absolute; left: 0; right: 0; bottom: var(--objectif); border-top: 1.5px dashed rgba(255, 255, 255, 0.35); pointer-events: none; }
.axe { display: flex; justify-content: space-between; margin-top: 7px; color: var(--texte-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.axe.sept { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 7px; text-align: center; text-transform: capitalize; }
.chiffres-tendance { display: flex; gap: 18px; margin-bottom: 12px; }
.chiffres-tendance small { display: block; color: var(--texte-2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.chiffres-tendance b { font-size: 24px; font-weight: 600; }
.chiffres-tendance b small { display: inline; font-size: 14px; text-transform: none; letter-spacing: 0; }
.c-retard { color: var(--ambre); }

/* sommeil */
.carte-sommeil { border-radius: 20px; padding: 16px; background: radial-gradient(80% 90% at 100% 0%, rgba(155, 123, 255, 0.18), transparent 65%), var(--cellule); }
.sommeil-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sommeil-tete small { color: #b9a6ff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.sommeil-tete b { display: block; font: 700 40px/1.05 var(--ronde); letter-spacing: -0.03em; margin-top: 2px; }
.sommeil-tete b small { font-size: 20px; color: var(--texte-2); text-transform: none; letter-spacing: 0; font-weight: 600; }
.sommeil-heures { display: flex; flex-direction: column; gap: 4px; color: var(--texte-2); font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; }
.sommeil-heures span { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.sommeil-heures svg { width: 16px; height: 16px; }
.hypno { position: relative; margin-top: 16px; padding-left: 64px; }
.hypno svg { display: block; width: 100%; height: 88px; }
.hypno line { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hypno rect { stroke: none; }
.hypno-rangs { position: absolute; left: 0; top: 0; bottom: 0; display: grid; grid-template-rows: repeat(4, 1fr); align-items: center; color: var(--texte-3); font-size: 11px; }
.phases-barre { display: flex; gap: 2px; height: 10px; margin-top: 14px; border-radius: 5px; overflow: hidden; }
.phases-barre i { min-width: 0; }
.phases-legende { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-top: 14px; }
.phases-legende div { display: grid; grid-template-columns: 10px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.phases-legende i { width: 10px; height: 10px; border-radius: 3px; grid-row: 1; }
.phases-legende span { color: var(--texte-2); font-size: 13px; }
.phases-legende b { grid-column: 2; font-size: 17px; font-weight: 600; }
.phases-legende small { grid-row: 1; grid-column: 3; color: var(--texte-3); font-size: 12px; }

/* cœur */
.carte-coeur { display: flex; align-items: center; gap: 14px; border-radius: 20px; padding: 16px; background: radial-gradient(80% 90% at 0% 0%, rgba(255, 79, 123, 0.14), transparent 65%), var(--cellule); }
.carte-coeur > div { flex: none; }
.carte-coeur small { display: inline-flex; align-items: center; gap: 5px; color: #ff6f8f; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.carte-coeur small svg { width: 15px; height: 15px; stroke-width: 2.3; }
.carte-coeur b { display: block; font: 700 34px/1.1 var(--ronde); letter-spacing: -0.03em; }
.carte-coeur b small { display: inline; margin-left: 4px; color: var(--texte-2); font-size: 16px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.carte-coeur span { color: var(--texte-2); font-size: 12.5px; }
.trace-coeur { flex: 1; min-width: 0; height: 60px; overflow: visible; }
.trace-coeur polyline { fill: none; stroke: #ff6f8f; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(255, 79, 123, 0.5)); }

/* relier Apple Santé */
.relier-sante { text-align: center; padding: 26px 18px 22px; border-radius: 26px;
  background: radial-gradient(70% 70% at 50% 0%, rgba(255, 79, 123, 0.22), transparent 70%), var(--cellule); }
.relier-icone { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #ff4f7b, #ff9a5c); box-shadow: 0 12px 30px rgba(255, 79, 123, 0.35); }
.relier-icone svg { width: 34px; height: 34px; stroke-width: 2; }
.relier-sante h2 { margin: 0; font-size: 24px; letter-spacing: -0.02em; }
.relier-sante p { margin: 8px 0 0; color: var(--texte-2); font-size: 15px; line-height: 1.45; }
.etapes { list-style: none; margin: 0; padding: 4px 0; counter-reset: etape; background: var(--cellule); border-radius: var(--rayon); }
.etapes li { counter-increment: etape; position: relative; padding: 12px 16px 14px 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.etapes li + li::before { content: ''; position: absolute; top: 0; left: 56px; right: 0; border-top: 0.5px solid var(--separateur); }
.etapes li::after { content: counter(etape); position: absolute; left: 16px; top: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #ff4f7b, #ff9a5c); color: #fff; font: 700 14px/1 var(--ronde); }
.etapes b { font-weight: 600; }
.etapes span { color: var(--texte-2); font-size: 14px; line-height: 1.42; }
.etapes span b { color: var(--texte); }
.etapes .bouton { margin-top: 6px; min-height: 40px; font-size: 15px; background: var(--cellule-2); }
.etapes .bouton.teinte { background: var(--teinte); }
.etapes .bouton svg { width: 18px; height: 18px; }
.icone-teinte { color: var(--teinte); width: 20px; height: 20px; }

/* clé de secours de la sauvegarde e-mail */
.cle-secours { font: 600 clamp(13px, 4.1vw, 19px)/1.4 var(--ronde); letter-spacing: 0.02em; text-align: center; padding: 16px 8px; border-radius: 14px; background: var(--cellule-2);
  white-space: nowrap; overflow-x: auto; -webkit-user-select: all; user-select: all; }
.texte-feuille { margin: 0; color: var(--texte-2); font-size: 15px; line-height: 1.45; }
.texte-feuille b { color: var(--texte); }