/* Design « Liquid Glass », version 2 : le verre clair est réservé aux barres et aux sélecteurs (barre du haut, périodes, onglets, boutons),
   le contenu (cartes, tuiles, listes) est en matériau sombre, comme le demande Apple. Texte centré dans les tuiles, voile sombre sous le verre. */
:root {
  --fond: #0b0807; --texte: #f6f1ed; --doux: #cfc3b9; --trait: rgba(255,255,255,.13);
  --accent: #e2714a; --sur-accent: #1a100b; --alerte: #f5a98c;
  --ok: #78e1a0; --ok-fond: rgba(120,225,160,.14);
  --police: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --mono: var(--police);
  /* verre clair : presque transparent, flou léger, voile sombre dessous (Apple conseille environ 35 %) */
  --v-fond: linear-gradient(150deg, rgba(255,255,255,.17), rgba(255,255,255,.03) 48%, rgba(255,255,255,.10));
  --v-relief: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.07), inset 0 -12px 20px -14px rgba(255,200,160,.38), inset 0 12px 20px -14px rgba(255,255,255,.26), 0 14px 34px rgba(0,0,0,.5);
  --v-flou: blur(10px) saturate(1.8) brightness(.82);
  --voile: rgba(10,4,2,.38);
  --teinte: linear-gradient(150deg, rgba(255,178,134,.86), rgba(226,113,74,.66) 55%, rgba(226,113,74,.78));
  --lentille: linear-gradient(150deg, rgba(255,255,255,.36), rgba(255,255,255,.12) 55%, rgba(255,255,255,.24));
  --lentille-relief: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -10px 14px -10px rgba(255,210,180,.55), inset 0 0 0 1px rgba(255,255,255,.2), 0 6px 16px rgba(0,0,0,.4);
  --glissade: cubic-bezier(.25, .85, .3, 1); /* freine sans dépasser */
  --ressort: cubic-bezier(.34, 1.56, .64, 1); --glisse: cubic-bezier(.2, .9, .25, 1.12); --elastique: cubic-bezier(.34, 1.45, .64, 1);
  --haut: calc(env(safe-area-inset-top, 0px) + 10px); /* sous la barre d'état / l'encoche de l'iPhone */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--fond); color: var(--texte); color-scheme: dark; }
body { font: 16px/1.45 var(--police); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, p { margin: 0; }
h1 { font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
h2 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 12px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.doux { color: var(--doux); }
.petit { font-size: 13px; }

/* fond : halos cuivrés flous qui dérivent lentement derrière le verre */
.fond { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.halo { position: absolute; border-radius: 50%; filter: blur(46px); }
.halo.h1 { left: -70px; top: -50px; width: 340px; height: 340px; background: radial-gradient(closest-side, rgba(255,126,82,.6), rgba(226,113,74,0)); animation: derive1 19s ease-in-out infinite alternate; }
.halo.h2 { right: -110px; top: 36%; width: 330px; height: 330px; background: radial-gradient(closest-side, rgba(214,92,52,.48), rgba(214,92,52,0)); animation: derive2 23s ease-in-out infinite alternate; }
.halo.h3 { left: 8%; bottom: -80px; width: 300px; height: 300px; background: radial-gradient(closest-side, rgba(255,170,120,.38), rgba(255,170,120,0)); animation: derive3 17s ease-in-out infinite alternate; }

/* ================= COUCHE VERRE : barres, sélecteurs, boutons principaux ================= */
/* le flou n'est jamais posé sur un parent d'un autre flou, ni sur le contenu qui défile (Safari les gère mal) */
.verre, button.principal, .barre-envoi button {
  position: relative; isolation: isolate; border: 0;
  background: var(--v-fond); box-shadow: var(--v-relief);
  -webkit-backdrop-filter: var(--v-flou); backdrop-filter: var(--v-flou);
}
/* liseré lumineux : un trait fin, plus clair en haut à gauche et en bas à droite, comme la tranche d'un verre éclairé */
.verre::before, button.principal::before, .barre-envoi button::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,.95), rgba(255,255,255,0) 28%, rgba(255,255,255,0) 64%, rgba(255,200,160,.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* voile sombre derrière le texte : il garde le verre lisible quand il est transparent */
.verre::after, button.principal::after, .barre-envoi button::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--voile); z-index: -1; pointer-events: none;
}
/* teinte cuivre : réservée à l'action principale (Actualiser, Envoyer, Trier) */
.verre.teinte, button.principal, .barre-envoi button { background: var(--teinte); }
.verre.teinte::after, button.principal::after, .barre-envoi button::after { background: rgba(40,12,4,.16); }

/* barres de sélection (onglets, périodes, Liste/Calendrier) : le verre est sur ::before, la bulle (avec son propre flou) est une sœur, pas une enfant du flou */
.barre-sel { position: relative; isolation: isolate; }
.barre-sel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--voile), var(--voile)), var(--v-fond); box-shadow: var(--v-relief);
  -webkit-backdrop-filter: var(--v-flou); backdrop-filter: var(--v-flou); }
.barre-sel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,.95), rgba(255,255,255,0) 28%, rgba(255,255,255,0) 64%, rgba(255,200,160,.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* ---- mise en page : barre du haut fixe, onglets en bas (téléphone) ---- */
.appli { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; --rangs: 0; }
main { max-width: 600px; margin: 0 auto; padding: calc(var(--haut) + 62px + var(--rangs) * 52px) 18px calc(112px + env(safe-area-inset-bottom, 0px)); }

.barre-haut { position: fixed; z-index: 12; top: var(--haut); left: max(14px, calc(50vw - 282px)); right: max(14px, calc(50vw - 282px));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.titre { --pad-titre: 22px; position: relative; margin: 0; height: 48px; padding: 0 var(--pad-titre); display: flex; align-items: center; border-radius: 24px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1; }
#titre-texte { display: inline-block; white-space: nowrap; }
.titre-ancien { position: absolute; left: var(--pad-titre); top: 0; bottom: 0; display: flex; align-items: center; white-space: nowrap; pointer-events: none; }
.actualiser { flex: none; height: 48px; padding: 0 18px 0 14px; border-radius: 24px; display: flex; align-items: center; gap: 8px; color: #fff; cursor: pointer;
  transition: transform .55s var(--ressort); }
.actualiser:active { transform: scale(.94); transition-duration: .15s; }
.actualiser svg { width: 20px; height: 20px; flex: none; stroke-width: 2; transform-origin: 50% 50%; }
.actualiser.charge svg { animation: tourne .9s linear infinite; }
.actualiser .libelle { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; font-size: 14.5px; font-weight: 700; }
.actualiser .age { font-size: 10.5px; font-weight: 600; opacity: .85; }
.actualiser .age:empty { display: none; }
.actualiser:disabled { opacity: .85; cursor: progress; }
.rang-haut { flex: 0 0 100%; display: flex; flex-direction: column; gap: 8px; }
.rang { display: flex; flex-direction: column; gap: 8px; }

/* effet de bord doux (le « scroll edge effect » d'Apple) : le contenu qui passe sous les barres se floute progressivement, sans voile sombre
   (plusieurs couches de flou de plus en plus fortes vers le bord, chacune fondue par un masque ; visibles seulement quand la page a défilé) */
.flou-bord { position: fixed; left: 0; right: 0; pointer-events: none; z-index: 5; display: none; }
.flou-bord.actif { display: block; }
.flou-bord i { position: absolute; inset: 0; }
.flou-haut { top: 0; height: calc(var(--haut) + 62px + var(--rangs) * 52px + 26px); }
.flou-haut i:nth-child(1) { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 48%); mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 48%); }
.flou-haut i:nth-child(2) { -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); -webkit-mask-image: linear-gradient(to bottom, transparent 12%, #000 34%, #000 42%, transparent 66%); mask-image: linear-gradient(to bottom, transparent 12%, #000 34%, #000 42%, transparent 66%); }
.flou-haut i:nth-child(3) { -webkit-backdrop-filter: blur(3.5px); backdrop-filter: blur(3.5px); -webkit-mask-image: linear-gradient(to bottom, transparent 34%, #000 54%, #000 62%, transparent 84%); mask-image: linear-gradient(to bottom, transparent 34%, #000 54%, #000 62%, transparent 84%); }
.flou-haut i:nth-child(4) { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); -webkit-mask-image: linear-gradient(to bottom, transparent 56%, #000 78%, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 56%, #000 78%, #000 88%, transparent 100%); }
.flou-bas { bottom: 0; height: calc(112px + env(safe-area-inset-bottom, 0px)); }
.flou-bas i:nth-child(1) { -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); -webkit-mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 58%); mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 58%); }
.flou-bas i:nth-child(2) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(to top, transparent 20%, #000 46%, #000 56%, transparent 82%); mask-image: linear-gradient(to top, transparent 20%, #000 46%, #000 56%, transparent 82%); }
.flou-bas i:nth-child(3) { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); -webkit-mask-image: linear-gradient(to top, transparent 50%, #000 74%, #000 86%, transparent 100%); mask-image: linear-gradient(to top, transparent 50%, #000 74%, #000 86%, transparent 100%); }

/* barre d'onglets : même modèle que les périodes, en plus haut */
.nav { position: fixed; left: 10px; right: 10px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 10; height: 68px; border-radius: 34px; padding: 5px;
  display: flex; align-items: center; justify-content: space-between; }
.nav .marque { display: none; }
.nav button { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 58px; margin: 0; padding: 0;
  border: 0; border-radius: 29px; background: transparent; color: #dccfc5; font: 600 clamp(9px, 2.5vw, 10.5px) var(--police); letter-spacing: 0; cursor: pointer;
  transition: color .3s, transform .5s var(--ressort); }
.nav button svg { width: 22px; height: 22px; flex: none; }
.nav button span { display: block; max-width: 100%; white-space: nowrap; }
.nav button:active { transform: scale(.9); }
.chips button.actif, .bascule button.actif, .nav button.actif { color: #fff; }
.nav button:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* barres de sélection (périodes, Liste/Calendrier) : une capsule de verre, une lentille qui glisse vers le choix */
.chips, .bascule, .nav { touch-action: pan-y; }
.chips, .bascule { display: grid; height: 44px; padding: 4px; margin: 0; border-radius: 22px; }
.chips { grid-template-columns: repeat(5, 1fr); }
.bascule { grid-template-columns: 1fr 1fr; }
.chips button, .bascule button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; margin: 0; min-height: 0; min-width: 0; padding: 0;
  border: 0; border-radius: 18px; background: transparent; color: #dccfc5; font: 600 13.5px var(--police); white-space: nowrap; cursor: pointer; transition: color .3s, transform .5s var(--ressort); }
.chips button::before, .bascule button::before { content: ""; position: absolute; inset: -4px 0; } /* zone tactile de 44 px */


/* la lentille de verre qui glisse sous l'élément actif : position, taille, soulèvement (--lev) et copie agrandie sont calculés à chaque image par glisse.js
   (ressort d'Apple). Rendu voulu par Axel (essai « lentille repos » / « lentille soulevée ») : verre presque incolore, couleurs derrière plus vives (saturation 1,7,
   luminosité 1,1), SANS flou ni voile blanc, un liseré fin, une ombre portée ; soulevée, le libellé dessous est agrandi (copie) ou réfracté (Chromium).
   Le vrai libellé caché sous la lentille est effacé par un masque (voir .sous-lentille), pas par du flou : un seul libellé visible, jamais de dédoublement. */
.bulle-verre { --lev: 0; position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0; pointer-events: none; border-radius: 18px; opacity: 0; overflow: hidden;
  background: rgba(255,255,255,calc(.05 + .03 * var(--lev)));
  -webkit-backdrop-filter: saturate(1.7) brightness(1.1); backdrop-filter: saturate(1.7) brightness(1.1);
  box-shadow: 0 calc(3px + 5px * var(--lev)) calc(9px + 9px * var(--lev)) rgba(0,0,0,calc(.3 + .1 * var(--lev))); will-change: transform, width, height; }
.bulle-verre::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1.2px rgba(255,255,255,.5), inset 0 1px 2px rgba(255,255,255,calc(.25 + .3 * var(--lev))); }
/* la copie des libellés, agrandie, que la bulle laisse voir (même mise en page que la barre) */
.copie { position: absolute; left: 0; top: 0; pointer-events: none; transform-origin: 0 0; }
.avec-copie.pose > button.actif { color: transparent; transition: none; }
/* pendant que la lentille bouge, les vrais libellés qu'elle recouvre sont effacés (la copie les remplace) : trou du masque = de --ml à --mr (px, dans le bouton) */
.sous-lentille > button { -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--ml, -999px) - 5px), transparent var(--ml, -999px), transparent var(--mr, -999px), #000 calc(var(--mr, -999px) + 5px));
  mask-image: linear-gradient(90deg, #000 calc(var(--ml, -999px) - 5px), transparent var(--ml, -999px), transparent var(--mr, -999px), #000 calc(var(--mr, -999px) + 5px)); }
.copie button { color: #fff !important; transition: none !important; }
.chips .copie { display: grid; grid-template-columns: repeat(5, 1fr); padding: 4px; }
.bascule .copie { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; }
.nav .copie { display: flex; align-items: center; justify-content: space-between; padding: 5px; }

/* mois du calendrier : deux ronds et un titre, comme une barre de sélection */
.nav-mois { display: flex; align-items: center; gap: 8px; }
.rond { flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rond svg { width: 22px; height: 22px; }
.titre-mois { flex: 1; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }

/* indicateur « tirer pour actualiser » : sous la barre du haut */
.tirer { position: fixed; left: 50%; top: calc(var(--haut) + 62px + var(--rangs) * 52px); transform: translate(-50%, -260px); z-index: 20; padding: 9px 18px; border-radius: 999px;
  color: #fff; font-size: 13px; font-weight: 600; transition: transform .6s var(--elastique); }
.tirer.visible { transform: translate(-50%, 0); }

.message { min-height: 22px; margin: 0 0 10px; font-size: 14px; font-weight: 500; color: var(--alerte); }
.message:empty { min-height: 0; margin: 0; }

/* tout ce qui s'appuie : ressort, comme les boutons d'iOS */
.lien { cursor: pointer; transition: transform .55s var(--ressort); }
.lien:hover { transform: translateY(-3px) scale(1.012); }
.lien:active { transform: scale(.965); transition-duration: .18s; }
.lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ================= TUILES ET PANNEAUX : verre clair par défaut, verre fumé au choix (interrupteur « Verre fumé ») ================= */
.carte, .tuile { position: relative; isolation: isolate; border: 0; border-radius: 28px; padding: 18px; margin-bottom: 12px;
  background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 48%, rgba(255,255,255,.09));
  -webkit-backdrop-filter: blur(10px) saturate(1.8) brightness(.82); backdrop-filter: blur(10px) saturate(1.8) brightness(.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.07), inset 0 -12px 20px -14px rgba(255,200,160,.32), inset 0 12px 20px -14px rgba(255,255,255,.22), 0 14px 34px rgba(0,0,0,.45); }
.carte::before, .tuile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,.85), rgba(255,255,255,0) 28%, rgba(255,255,255,0) 64%, rgba(255,200,160,.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.carte::after, .tuile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(10,4,2,.30); z-index: -1; pointer-events: none; }
.fume .carte, .fume .tuile { background: linear-gradient(150deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 50%, rgba(255,255,255,.05));
  -webkit-backdrop-filter: blur(18px) saturate(1.5) brightness(.9); backdrop-filter: blur(18px) saturate(1.5) brightness(.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.4); }
.fume .carte::after, .fume .tuile::after { background: rgba(10,4,2,.46); }
button { font: 600 15px var(--police); }
.boutons { display: grid; gap: 10px; margin-top: 10px; }
.boutons button, .carte > button { min-height: 52px; padding: 10px 16px; border-radius: 18px; border: 1px solid var(--trait); background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); color: var(--texte); cursor: pointer; transition: transform .5s var(--ressort), border-color .2s; }
.boutons button:hover, .carte > button:hover { border-color: rgba(255,255,255,.3); }
button:active { transform: scale(.96); }
/* bouton principal et bouton flottant : verre cuivré */
button.principal, .barre-envoi button { min-height: 52px; padding: 10px 24px; border-radius: 999px; color: #fff; cursor: pointer; text-shadow: 0 1px 2px rgba(120,40,10,.35);
  box-shadow: var(--v-relief), 0 2px 6px rgba(0,0,0,.35); transition: transform .55s var(--ressort), box-shadow .3s; }
button.principal:hover, .barre-envoi button:hover { transform: scale(1.03); box-shadow: var(--v-relief), 0 12px 30px rgba(226,113,74,.5); }
button.principal:active, .barre-envoi button:active { transform: scale(.94); transition-duration: .15s; }
button.confirmer { background: #ffb020; border-color: #ffb020; color: #000; }
button:disabled { opacity: .5; cursor: default; }
.bandeau { border-radius: 18px; padding: 12px 14px; font-weight: 600; margin-bottom: 10px; }
.bandeau.ok { background: var(--ok-fond); color: var(--ok); }
.bandeau.alerte { background: rgba(245,169,140,.14); color: var(--alerte); }

/* accueil : salutation, anneau et tuiles (texte centré dans les deux sens) */
.salut { margin: 0 0 12px; padding: 2px 2px 0; }
.salut .doux { font-size: 13px; font-weight: 500; }
.salut h2 { margin: 2px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px 16px 20px; }
.anneau { position: relative; width: 176px; height: 176px; }
.anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); stroke-width: 6; }
.anneau .piste { stroke: rgba(255,255,255,.13); }
.anneau .arc { stroke: url(#cuivre); filter: drop-shadow(0 0 6px rgba(255,154,110,.5)); animation: anneau 1.5s cubic-bezier(.3, .9, .3, 1) .35s both; }
.anneau .arc.chaud { stroke: #ffb020; }
.centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.gros { font-size: 34px; font-weight: 700; letter-spacing: -.03em; }
.grand { font-size: 30px; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; line-height: 1.1; }
.enorme { font-size: 44px; font-weight: 700; letter-spacing: -.03em; margin: 2px 0; line-height: 1.1; }
.etat { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 14px; font-weight: 600; text-align: center; }
.point { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.point.ok { background: var(--ok); animation: pouls 2.4s ease-out infinite; }
.alerte { font-size: 13px; font-weight: 600; color: var(--alerte); text-align: center; }
.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.tuile { min-height: 108px; margin: 0; padding: 12px; border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.entete-tuile { font-size: 13px; font-weight: 600; }
.tuile .grand { display: block; font-size: 30px; }
#t-depense { font-size: 28px; }
.tuile .petit { min-height: 16px; font-size: 12.5px; }
.tuile .petit.mono { white-space: nowrap; }
.titre-tuile { font-size: 18px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.retard { min-height: 16px; font-size: 12.5px; font-weight: 600; color: var(--alerte); }
.ligne-titre { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; margin-bottom: 8px; }
.courbe { width: 100%; height: 64px; display: block; }
.courbe path { stroke: none; }
.courbe .trait { stroke: #ff9a6e; stroke-width: 2.6; stroke-dasharray: 600; stroke-dashoffset: 600; animation: trace 1.6s cubic-bezier(.2,.7,.2,1) .5s forwards; vector-effect: non-scaling-stroke; }
.axe { display: flex; justify-content: space-between; font-size: 12px; margin-top: 6px; }
.titre-reglage { margin: 14px 6px 6px; font-weight: 600; }
.reglage { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; padding: 12px 0; }
.reglage .fort { font-size: 16px; font-weight: 600; }
.reglage + .reglage { border-top: 1px solid rgba(255,255,255,.12); }

/* interrupteur « Réduire la transparence » : un bouton à glissière, comme sur iOS */
.inter { position: relative; flex: none; width: 58px; height: 34px; padding: 0; border: 0; border-radius: 17px; background: rgba(255,255,255,.22); cursor: pointer; transition: background .3s; }
.inter::before { content: ""; position: absolute; inset: -6px; } /* zone tactile de 46 px */
.inter i { position: absolute; top: 3px; left: 3px; width: 40px; height: 28px; border-radius: 14px; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.35); transition: left .35s var(--ressort); }
.inter.on { background: var(--accent); }
.inter.on i { left: 15px; }

/* listes : chaque ligne est centrée verticalement ; deux colonnes (nom à gauche, montant et date à droite) */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: 13px 0; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 2px; align-content: center; animation: monte .6s var(--glisse) both; animation-delay: calc(var(--i, 0) * 35ms); }
.liste li:first-child { border-top: 0; }
.liste .fort { font-weight: 600; overflow-wrap: anywhere; }
.liste .montant { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 700; }
.liste .alerte-ligne { color: var(--alerte); font-weight: 600; }
.liste .vide { color: var(--doux); border: 0; }
#liste-factures li, #liste-commandes li { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; min-height: 64px; padding: 8px 0; align-items: center; }
#liste-factures li > .doux, #liste-commandes li > .doux, #liste-commandes li > .alerte-ligne { font-size: 13.5px; }
#liste-factures li > .fort { grid-column: 1; grid-row: 1; }
#liste-factures li > .doux:not(.petit) { grid-column: 1; grid-row: 2; }
#liste-factures li > .montant { grid-column: 2; grid-row: 1; text-align: right; }
#liste-factures li > .petit { grid-column: 2; grid-row: 2; text-align: right; }
#liste-commandes li > .fort { grid-column: 1; grid-row: 1; }
#liste-commandes li > .puce { grid-column: 2; grid-row: 1; justify-self: end; }
#liste-commandes li > .doux, #liste-commandes li > .alerte-ligne { grid-column: 1 / -1; }
.puce { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.12); color: #efe4da; }
.puce.retard { background: rgba(255,122,92,.22); color: #ffb9a2; }
.puce.livree { background: rgba(143,220,174,.18); color: #a6e8c4; }
.puce.annule { background: rgba(255,255,255,.07); color: #b3a8a0; }
.ligne-rdv { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 64px; padding: 8px 0 !important; }
.ligne-rdv input { width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }
.ligne-rdv label { display: grid; gap: 2px; cursor: pointer; }

/* graphiques */
.barres { display: flex; align-items: flex-end; gap: 8px; height: 96px; margin-top: 14px; }
.barres .barre { flex: 1; min-height: 3px; border-radius: 9px 9px 4px 4px; background: rgba(255,255,255,.2); transform-origin: bottom; animation: pousse .9s var(--glisse) both; animation-delay: calc(var(--i, 0) * 60ms + .25s); }
.barres .barre.fin { background: var(--accent); }
#vue-factures .carte:first-of-type, #vue-commandes .carte:first-of-type { text-align: center; }
#vue-factures .barres { text-align: left; }

/* calendrier */
.jours-semaine { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; font-weight: 600; margin: 2px 0 4px; }
.grille-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.grille-cal button { position: relative; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 22px; background: transparent; color: var(--texte); font: 600 15px var(--mono); font-variant-numeric: tabular-nums; cursor: pointer; }
.grille-cal button.hors { color: #9a8c82; }
.grille-cal button.aujourdhui { box-shadow: inset 0 0 0 1.5px #ff9a6e; }
.grille-cal button.choisi { background: var(--lentille); box-shadow: var(--lentille-relief); color: #fff; font-weight: 700; animation: pop .55s var(--ressort); }
.grille-cal button i { position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #ff9a6e; }

/* bouton flottant « Envoyer au calendrier » : une bulle de verre cuivré au-dessus de la barre du bas */
.barre-envoi { position: sticky; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 5; margin-top: 4px; display: flex; justify-content: center; pointer-events: none; }
.barre-envoi button { pointer-events: auto; min-width: 270px; min-height: 56px; padding: 0 30px; font-size: 16px; }
.barre-envoi:not([hidden]) button { animation: surgit .75s var(--elastique) both; }

/* connexion */
label { display: block; margin: 14px 0 6px; font-weight: 600; }
input[type=url], input[type=password] { width: 100%; padding: 14px; border-radius: 16px; border: 1px solid var(--trait); background: rgba(255,255,255,.06); color: var(--texte); font: 17px var(--police); }
#vue-config button.principal { width: 100%; margin-top: 14px; min-height: 54px; cursor: pointer; }
#erreur-config { min-height: 24px; margin-top: 12px; font-weight: 600; color: var(--alerte); }

/* animations */
@keyframes derive1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(50px, 60px) scale(1.15); } }
@keyframes derive2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-60px, -40px) scale(.9); } }
@keyframes derive3 { from { transform: translate(0, 0); } to { transform: translate(30px, -70px) scale(1.2); } }
@keyframes anneau { from { stroke-dasharray: 0 264; } }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes monte { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes surgit { from { opacity: 0; transform: translateY(34px) scale(.55); } to { opacity: 1; transform: none; } }
@keyframes etire { 40% { scale: 1.05 .94; } 100% { scale: 1 1; } }
@keyframes entre-droite { from { transform: translateX(46px) scale(.985); } to { transform: none; } }
@keyframes entre-gauche { from { transform: translateX(-46px) scale(.985); } to { transform: none; } }
@keyframes pousse { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pousse-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 rgba(120,225,160,.55); } 100% { box-shadow: 0 0 0 10px rgba(120,225,160,0); } }
@keyframes tourne { to { transform: rotate(360deg); } }
.vue-droite { animation: entre-droite .65s var(--elastique) backwards; }
.vue-gauche { animation: entre-gauche .65s var(--elastique) backwards; }

/* vraie réfraction (Chromium seulement : refraction.js pose la classe .refraction et la variable --refr de chaque pièce de verre) */
:root.refraction { --refr: saturate(1); }
.refraction .verre, .refraction button.principal, .refraction .barre-envoi button, .refraction .barre-sel::before { -webkit-backdrop-filter: var(--v-flou) var(--refr); backdrop-filter: var(--v-flou) var(--refr); }
.refraction .copie { display: none; }
.refraction .sous-lentille > button, .reduit .sous-lentille > button { -webkit-mask-image: none; mask-image: none; }
.refraction .avec-copie.pose > button.actif { color: #fff; }

/* transparence réduite : verre plus opaque et plus net (réglage de l'appli, ou « Augmenter le contraste » de l'appareil) */
.reduit .verre, .reduit button.principal, .reduit .barre-envoi button { background: linear-gradient(150deg, rgba(66,49,40,.96), rgba(42,31,26,.97)); -webkit-backdrop-filter: blur(30px) saturate(1.1); backdrop-filter: blur(30px) saturate(1.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 10px 24px rgba(0,0,0,.5); }
.reduit .verre::before, .reduit .verre::after, .reduit button.principal::before, .reduit button.principal::after, .reduit .barre-envoi button::before, .reduit .barre-envoi button::after { display: none; }
.reduit .verre.teinte, .reduit button.principal, .reduit .barre-envoi button { background: linear-gradient(150deg, #c65d38, #a94727); }
.reduit .bulle-verre, .reduit .grille-cal button.choisi { background: #5e493c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), 0 3px 8px rgba(0,0,0,.35); }
.reduit .carte.carte, .reduit .tuile.tuile { background: linear-gradient(160deg, #211814, #17110e); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); -webkit-backdrop-filter: none; backdrop-filter: none; }
.reduit .carte.carte::before, .reduit .carte.carte::after, .reduit .tuile.tuile::before, .reduit .tuile.tuile::after { display: none; }
.reduit .copie { display: none; }
.reduit .avec-copie.pose > button.actif { color: #fff; }
.reduit .barre-sel::before { background: linear-gradient(150deg, rgba(66,49,40,.96), rgba(42,31,26,.97)); -webkit-backdrop-filter: blur(30px) saturate(1.1); backdrop-filter: blur(30px) saturate(1.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 10px 24px rgba(0,0,0,.5); }
.reduit .barre-sel::after { display: none; }
.reduit .bulle-verre { background: #5e493c; -webkit-backdrop-filter: none; backdrop-filter: none; }
.reduit .bulle-verre::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); }
.reduit .flou-bord { display: none !important; }
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  .verre, button.principal, .barre-envoi button { background: linear-gradient(150deg, rgba(66,49,40,.96), rgba(42,31,26,.97)); -webkit-backdrop-filter: blur(30px) saturate(1.1); backdrop-filter: blur(30px) saturate(1.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 10px 24px rgba(0,0,0,.5); }
  .verre::before, .verre::after, button.principal::before, button.principal::after, .barre-envoi button::before, .barre-envoi button::after { display: none; }
  .verre.teinte, button.principal, .barre-envoi button { background: linear-gradient(150deg, #c65d38, #a94727); }
  .bulle-verre, .grille-cal button.choisi { background: #5e493c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), 0 3px 8px rgba(0,0,0,.35); }
  .carte.carte, .tuile.tuile { background: linear-gradient(160deg, #211814, #17110e); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .carte.carte::before, .carte.carte::after, .tuile.tuile::before, .tuile.tuile::after { display: none; }
  .copie { display: none; }
  .sous-lentille.sous-lentille > button { -webkit-mask-image: none; mask-image: none; }
  .avec-copie.pose > button.actif { color: #fff; }
  .barre-sel::before { background: linear-gradient(150deg, rgba(66,49,40,.96), rgba(42,31,26,.97)); -webkit-backdrop-filter: blur(30px) saturate(1.1); backdrop-filter: blur(30px) saturate(1.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 10px 24px rgba(0,0,0,.5); }
  .barre-sel::after { display: none; }
  .bulle-verre { background: #5e493c; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bulle-verre::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); }
  .flou-bord { display: none !important; }
}

/* mouvement réduit : plus de rebond ni d'entrée animée */
@media (prefers-reduced-motion: reduce) {
  .halo, .liste li, .barres .barre, .anneau .arc, .point.ok, .grille-cal button.choisi, .vue-droite, .vue-gauche, .bulle-verre.bouge, .barre-envoi:not([hidden]) button { animation: none; }
  .courbe .trait { animation: none; stroke-dashoffset: 0; }
  .bulle-verre { transition: opacity .2s; }
  .inter i, .inter { transition: none; }
  .lien:hover, .actualiser:hover, button.principal:hover, .barre-envoi button:hover { transform: none; }
  button:active, .lien:active, .actualiser:active { transform: none; }
}

/* grand écran (Windows, iPad) : barre latérale de verre flottante, barre du haut avec les sélecteurs sur une seule ligne */
@media (min-width: 900px) {
  body { font-size: 16px; }
  main { max-width: 1760px; width: auto; margin: 0 0 0 276px; padding: 92px 30px 56px 0; }
  .nav { position: fixed; left: 14px; top: 14px; bottom: 14px; right: auto; width: 236px; height: auto; border-radius: 30px; padding: 20px 12px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; }
  .nav .marque { display: flex; align-items: center; gap: 10px; margin: 2px 10px 20px; font-size: 18px; font-weight: 800; }
  .pastille { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px rgba(226,113,74,.7); }
  .nav button { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; height: 52px; margin: 0; padding: 0 16px; border-radius: 20px; font-size: 15px; }
  .nav button span { display: inline; overflow: visible; }
  .nav button:hover { color: #fff; }
  .nav .bulle-verre { border-radius: 20px; }
  .sous-lentille > button { -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--ml, -999px) - 5px), transparent var(--ml, -999px), transparent var(--mr, -999px), #000 calc(var(--mr, -999px) + 5px)); mask-image: linear-gradient(180deg, #000 calc(var(--ml, -999px) - 5px), transparent var(--ml, -999px), transparent var(--mr, -999px), #000 calc(var(--mr, -999px) + 5px)); }
  .nav .copie { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 20px 12px; }
  .barre-haut { left: 276px; right: 30px; top: 14px; flex-wrap: nowrap; gap: 12px; }
  .titre { order: 1; }
  .rang-haut { order: 2; flex: 1 1 auto; min-width: 0; flex-direction: row; align-items: center; }
  .actualiser { order: 3; }
  .rang { flex-direction: row; align-items: center; gap: 12px; }
  .chips { width: 400px; }
  .bascule { width: 220px; }
  .nav-mois { width: 300px; }
  .flou-haut { height: 96px; }
  .flou-bord.flou-bas, .flou-bord.flou-bas.actif, .tirer { display: none; }   /* PC : pas de barre en bas, donc pas de flou (« .actif » est plus précis que « .flou-bas » : il fallait le nommer aussi) */
  h1 { font-size: clamp(34px, 2.5vw, 46px); }
  .titre { font-size: 19px; }
  .carte { padding: 22px; }
  .salut { display: none; }

  /* accueil : l'anneau à gauche sur toute la hauteur, tuiles (2 × 2) et courbe à droite */
  #vue-accueil { display: grid; grid-template-columns: minmax(340px, 30%) minmax(0, 1fr); gap: 0 18px; align-content: start; }
  #vue-accueil > .carte, #vue-accueil > .tuiles, #vue-accueil > p { grid-column: 2; }
  #vue-accueil > .hero { grid-column: 1; grid-row: 1 / span 3; margin: 0 0 12px; padding: 30px 20px; gap: 22px; }
  .anneau { width: clamp(220px, 15.5vw, 300px); height: clamp(220px, 15.5vw, 300px); }
  .gros { font-size: clamp(38px, 3vw, 54px); }
  .tuiles { gap: 14px; margin-bottom: 14px; }
  .tuile { min-height: 112px; }
  .tuile .grand { font-size: clamp(30px, 2.6vw, 44px); }
  #t-depense { font-size: clamp(26px, 2.3vw, 38px); }
  #lien-courbe { display: flex; flex-direction: column; }
  #lien-courbe .courbe { flex: 1; height: auto; min-height: 120px; }
  .etat { font-size: 16px; }

  /* autres écrans : deux colonnes (résumé et graphique à gauche, liste à droite) */
  #vue-factures, #vue-commandes, #vue-rdv { display: grid; grid-template-columns: minmax(380px, 34%) minmax(0, 1fr); gap: 0 18px; align-items: start; }
  #vue-factures > .carte:nth-of-type(1), #vue-commandes > .carte:nth-of-type(1) { grid-column: 1; }
  #vue-factures > .carte:nth-of-type(2), #vue-commandes > .carte:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 3; }
  #vue-factures > p, #vue-commandes > p, #vue-rdv > p { grid-column: 1; }
  #vue-rdv > #r-resume { grid-column: 1 / -1; margin-bottom: 10px; }
  #vue-rdv[data-affichage="cal"] > #bloc-calendrier { grid-column: 1; }
  #vue-rdv[data-affichage="cal"] > .carte:not(#bloc-calendrier) { grid-column: 2; grid-row: 2 / span 3; }
  #vue-rdv[data-affichage="liste"] > .carte { grid-column: 1 / -1; }
  #vue-tri { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; align-items: start; }
  .barre-envoi { bottom: 22px; grid-column: 1 / -1; }
}
@media (min-width: 1500px) {
  #vue-tri { grid-template-columns: minmax(380px, 30%) minmax(0, 1fr); }
}
@media (max-width: 380px) { .gros { font-size: 30px; } .anneau { width: 160px; height: 160px; } .chips button, .bascule button { font-size: 12.5px; } .titre { --pad-titre: 16px; font-size: 17px; } }

/* commandes : filtre par statut (5 choix, libellés de longueurs différentes : colonnes inégales, la bulle suit la taille de chaque bouton) ; « .statuts.chips » pour passer devant « .chips { width: 400px } » du PC */
.statuts, .statuts .copie { grid-template-columns: .85fr 1.5fr 1fr 1.25fr 1fr; }
.statuts.chips { margin-top: 14px; width: auto; }   /* dans la carte des commandes (pas dans la barre du haut) : toute la largeur de la carte */
.statuts button { font-size: 12.5px; }

/* agenda : deux boutons flottants (calendrier, suppression) ; le second est rouge, il passe ambre pendant la confirmation */
.barre-envoi { flex-wrap: wrap; gap: 10px; }
.barre-envoi button { min-width: 0; }
.barre-envoi button.principal, #envoyer-cal { min-width: 230px; }
#supprimer-rdv { min-width: 150px; padding: 0 22px; }
.barre-envoi button.danger { background: linear-gradient(150deg, rgba(255,128,108,.62), rgba(196,62,52,.7)); }
.barre-envoi button.danger::after { background: rgba(50,8,4,.2); }
.reduit .barre-envoi button.danger { background: linear-gradient(150deg, #b4443a, #8c2c26); }
.barre-envoi button.danger.confirmer { background: #ffb020; color: #000; text-shadow: none; }