/* Prof Pro — Material 3
   Règles : grille de 8 px · une seule Card et un seul Button réutilisés partout ·
   2 couleurs de marque par thème (primaire + accent) · mobile d'abord.
   Les couleurs rouge / vert / ambre ne servent qu'à signaler un état (dû, payé, attention). */

/* ---------------------------------------------------------------- Jetons : thème Bleu (par défaut) */
:root {
  --md-primary: #4F46E5;             /* 1re couleur de marque : indigo */
  --md-on-primary: #FFFFFF;
  --md-primary-container: #E2DFFF;
  --md-on-primary-container: #2A1F9E;
  --md-secondary-container: #E7E5FB;
  --md-on-secondary-container: #3B3570;
  --md-accent: #FFE2C7;              /* 2e couleur de marque : mangue (conteneur) */
  --md-on-accent: #5A2600;
  --md-vivid: #FF9F43;               /* mangue pleine (FAB, éclats) */
  --md-on-vivid: #3D1D00;
  --hero: linear-gradient(135deg, #6C5CFF 0%, #4F46E5 45%, #2E22AA 100%);
  --md-surface: #F7F6FF;
  --md-surface-lowest: #FFFFFF;
  --md-surface-low: #F1F0FC;
  --md-surface-container: #ECEAF8;
  --md-surface-high: #E6E4F3;
  --md-surface-highest: #E0DEEE;
  --md-on-surface: #1B1B24;
  --md-on-surface-variant: #474659;
  --md-outline: #777589;
  --md-outline-variant: #CDCAE0;
  --md-inverse-surface: #2E3036;
  --md-inverse-on-surface: #F0F0F7;
  --md-error: #BA1A1A;
  --md-error-container: #FFDAD6;
  --md-on-error-container: #93000A;
  --md-success: #1E6B43;
  --md-success-container: #C3EFD2;
  --md-warning: #6E5100;
  --md-warning-container: #FFE08A;
  --md-card: var(--md-surface-lowest);
  --md-elev-1: 0 1px 2px rgba(42,31,158,.10), 0 4px 14px rgba(42,31,158,.07);
  --md-elev-3: 0 8px 20px rgba(42,31,158,.22), 0 2px 6px rgba(42,31,158,.16);
  --md-wa: #1DA851;

  /* Grille 8 px */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s7: 56px; --s8: 64px;
  /* Formes */
  --r-xs: 4px; --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 28px; --r-full: 999px;
  --nav-h: 80px;

  --font: 'Roboto Flex', Roboto, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-display: var(--font);
  --f-body: var(--font);

  /* Alias utilisés par les factures et quelques styles en ligne */
  --paper: var(--md-surface);
  --sheet: var(--md-card);
  --ink: var(--md-on-surface);
  --ink-2: var(--md-on-surface-variant);
  --ink-3: var(--md-outline);
  --muted: var(--md-on-surface-variant);
  --text2: var(--md-on-surface-variant);
  --rule: var(--md-outline-variant);
  --rule-2: var(--md-outline);
  --wash: var(--md-surface-high);
  --blue: var(--md-primary);
  --blue-deep: var(--md-on-primary-container);
  --blue-wash: var(--md-secondary-container);
  --red: var(--md-error);
  --danger: var(--md-error);
  --red-wash: var(--md-error-container);
  --danger-ink: var(--md-on-error-container);
  --green: var(--md-success);
  --green-wash: var(--md-success-container);
  --amber: var(--md-warning);
  --amber-wash: var(--md-warning-container);
  --hl: var(--md-accent);
  --on-hl: var(--md-on-accent);
  --strong: var(--md-inverse-surface);
  --seyes: rgba(79, 70, 229, .07);
  --placeholder: var(--md-outline);
  color-scheme: light;
}

/* Thème Vert */
html[data-skin="tableau"] {
  --md-primary: #0B7A55; --md-on-primary: #FFFFFF; --md-primary-container: #BDF2DA; --md-on-primary-container: #00513A;
  --md-secondary-container: #D6EEE2; --md-on-secondary-container: #2E4B40;
  --md-accent: #FFE7B3; --md-on-accent: #4A3000; --md-vivid: #FFB830; --md-on-vivid: #3D2A00;
  --hero: linear-gradient(135deg, #1DB584 0%, #0B7A55 50%, #05553B 100%);
  --md-surface: #F4FBF7; --md-surface-low: #EDF6F1; --md-surface-container: #E7F0EB; --md-surface-high: #E1EAE5; --md-surface-highest: #DBE4DF;
  --md-on-surface: #161D1A; --md-on-surface-variant: #3F4945; --md-outline: #6F7975; --md-outline-variant: #BFC9C3;
  --md-elev-1: 0 1px 2px rgba(0,81,58,.10), 0 4px 14px rgba(0,81,58,.07);
  --seyes: rgba(11, 122, 85, .07);
}
/* Thème Bordeaux */
html[data-skin="henne"] {
  --md-primary: #B0305A; --md-on-primary: #FFFFFF; --md-primary-container: #FFD9E2; --md-on-primary-container: #7A1238;
  --md-secondary-container: #F8DFE5; --md-on-secondary-container: #5E3A44;
  --md-accent: #FFE6BF; --md-on-accent: #4A2C00; --md-vivid: #FFB547; --md-on-vivid: #3D2500;
  --hero: linear-gradient(135deg, #E0517D 0%, #B0305A 50%, #7A1238 100%);
  --md-surface: #FFF7F8; --md-surface-low: #FFEFF2; --md-surface-container: #FAE8EC; --md-surface-high: #F4E2E6; --md-surface-highest: #EEDCE0;
  --md-on-surface: #22191B; --md-on-surface-variant: #534346; --md-outline: #857376; --md-outline-variant: #D8C1C6;
  --md-elev-1: 0 1px 2px rgba(122,18,56,.10), 0 4px 14px rgba(122,18,56,.07);
  --seyes: rgba(176, 48, 90, .07);
}
/* Thème Sombre */
html[data-skin="nuit"] {
  color-scheme: dark;
  --md-primary: #B9B3FF; --md-on-primary: #1E1880; --md-primary-container: #3A32B0; --md-on-primary-container: #E2DFFF;
  --md-secondary-container: #34325A; --md-on-secondary-container: #E4E1F9;
  --md-accent: #5C2E00; --md-on-accent: #FFDCC2; --md-vivid: #FFB066; --md-on-vivid: #3D1D00;
  --hero: linear-gradient(135deg, #5B4FF0 0%, #3A32B0 50%, #211A73 100%);
  --md-surface: #12121A; --md-surface-lowest: #0D0D14; --md-surface-low: #1A1A24; --md-surface-container: #1E1E29; --md-surface-high: #292934; --md-surface-highest: #34343F;
  --md-on-surface: #E5E3F0; --md-on-surface-variant: #C8C5DA; --md-outline: #918FA3; --md-outline-variant: #46455A;
  --md-inverse-surface: #E2E2E9; --md-inverse-on-surface: #2E3036;
  --md-error: #FFB4AB; --md-error-container: #93000A; --md-on-error-container: #FFDAD6;
  --md-success: #8BD8A6; --md-success-container: #0E5130; --md-warning: #F2C14E; --md-warning-container: #4A3A00;
  --md-card: var(--md-surface-low);
  --md-elev-1: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px 1px rgba(0,0,0,.3);
  --md-elev-3: 0 8px 20px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --seyes: rgba(255,255,255,.05);
}

/* ---------------------------------------------------------------- Base */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--md-surface); }
body { font-family: var(--font); color: var(--md-on-surface); font-size: 14px; line-height: 20px; letter-spacing: .015em; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .38; }
a { color: var(--md-primary); text-underline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; letter-spacing: 0; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; border-radius: var(--r-s); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#app { max-width: 600px; margin: 0 auto; min-height: 100dvh; position: relative; }
.screen { padding: var(--s2) var(--s2) calc(var(--nav-h) + var(--s5) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--s2); }
.screen.no-nav { padding-bottom: var(--s5); }

/* Typographie M3 */
.page-title { font-size: 28px; line-height: 36px; font-weight: 400; }
.lead { font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); max-width: 60ch; }
.help { font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); margin-top: 4px; padding-inline: var(--s2); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s1); }
.section-head h2, .section-head h3 { font-size: 16px; line-height: 24px; font-weight: 500; }
.section-head span { font-size: 12px; color: var(--md-on-surface-variant); }

/* ---------------------------------------------------------------- Squelette (chargement) */
.loading { padding: var(--s2); display: flex; flex-direction: column; gap: var(--s2); }
.sk { border-radius: var(--r-l); background: var(--md-surface-high); position: relative; overflow: hidden; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: sk 1.2s infinite; }
html[data-skin="nuit"] .sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
@keyframes sk { to { transform: translateX(100%); } }
.sk-line { height: 24px; width: 55%; border-radius: var(--r-s); }
.sk-hero { height: 160px; }
.sk-row { height: 72px; }
.spinner { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--md-secondary-container); border-top-color: var(--md-primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Barre du haut (Navbar) */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 6; display: flex; align-items: center; gap: var(--s1); min-height: var(--s8); margin: calc(-1 * var(--s2)) calc(-1 * var(--s2)) 0; padding: var(--s1); background: var(--md-surface); }
.topbar h1 { font-size: 22px; line-height: 28px; font-weight: 400; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { width: var(--s6); height: var(--s6); border: none; background: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--md-on-surface-variant); flex: none; }
.icon-btn:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.icon-btn:active { background: color-mix(in srgb, var(--md-on-surface) 12%, transparent); }
.icon-btn.sm { width: var(--s5); height: var(--s5); }
.hello { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); min-height: var(--s8); }
.hello small { display: block; font-size: 14px; color: var(--md-on-surface-variant); }
.hello h1 { font-size: 24px; line-height: 32px; font-weight: 400; }
.pill { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--md-on-surface-variant); border: 1px solid var(--md-outline-variant); padding: 6px 12px; border-radius: var(--r-s); white-space: nowrap; }

/* ---------------------------------------------------------------- Card (unique) */
.card, .stats3, .parent, .rate, .entry, .row-btn, .empty, details.period-el, .solde {
  background: var(--md-card); border-radius: var(--r-l); box-shadow: var(--md-elev-1); border: none;
}
.card { padding: var(--s2); display: flex; flex-direction: column; gap: var(--s2); }
.card h2, .card h3 { font-size: 16px; line-height: 24px; font-weight: 500; }
.card .stats3 { box-shadow: none; background: var(--md-surface-container); }
.card.start { background: var(--md-primary-container); color: var(--md-on-primary-container); box-shadow: none; }
.card.start .lead { color: var(--md-on-primary-container); }
.list { display: flex; flex-direction: column; gap: var(--s1); }
.rows { display: flex; flex-direction: column; }

/* Carte de solde (conteneur primaire) */
.solde { position: relative; padding: var(--s3) var(--s3) var(--s2); background: var(--md-primary-container); color: var(--md-on-primary-container); box-shadow: none; border-radius: var(--r-xl); display: flex; flex-direction: column; gap: var(--s2); }
.solde small { display: block; font-size: 14px; line-height: 20px; opacity: .9; }
.solde .big { font-size: 45px; line-height: 52px; font-weight: 400; letter-spacing: 0; margin-top: 4px; }
.solde .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid color-mix(in srgb, var(--md-on-primary-container) 20%, transparent); }
.solde .row b { display: block; font-size: 22px; line-height: 28px; font-weight: 500; margin-top: 4px; }
.solde > .eye { position: absolute; top: var(--s2); right: var(--s2); width: var(--s6); height: var(--s6); border: none; border-radius: 50%; background: transparent; color: var(--md-on-primary-container); display: flex; align-items: center; justify-content: center; }
.solde > .eye:hover { background: color-mix(in srgb, var(--md-on-primary-container) 10%, transparent); }
.solde > .eye[aria-pressed="true"] { background: var(--md-accent); color: var(--md-on-accent); }
.shake-tip { display: flex; align-items: center; justify-content: center; gap: var(--s1); font-size: 12px; color: var(--md-on-surface-variant); margin-top: calc(-1 * var(--s1)); }

/* Bandeau de l'administrateur */
.banner { position: relative; min-height: var(--s7); display: flex; align-items: center; overflow: hidden; border-radius: var(--r-l); background: var(--md-accent); color: var(--md-on-accent); }
.banner .ico { flex: none; width: var(--s7); display: flex; align-items: center; justify-content: center; }
.banner .track { flex: 1; overflow: hidden; font-size: 14px; font-weight: 500; mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
.banner .track span { display: inline-block; white-space: nowrap; padding-left: 100%; animation: defil var(--dur, 16s) linear infinite; }
@keyframes defil { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* Messages d'information */
.alert { padding: var(--s2); border-radius: var(--r-m); font-size: 14px; font-weight: 500; display: flex; gap: var(--s1); align-items: center; }
.alert.danger { background: var(--md-error-container); color: var(--md-on-error-container); }
.alert.warn { background: var(--md-warning-container); color: var(--md-on-accent); }
html[data-skin="nuit"] .alert.warn { color: var(--md-warning); }
.alert.info { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

/* ---------------------------------------------------------------- ListItem */
.row-btn { width: 100%; display: flex; align-items: center; gap: var(--s2); min-height: 72px; padding: var(--s1) var(--s2); text-align: left; color: var(--md-on-surface); position: relative; }
.row-btn:hover { background: color-mix(in srgb, var(--md-on-surface) 4%, var(--md-card)); }
.row-btn:active { background: color-mix(in srgb, var(--md-on-surface) 10%, var(--md-card)); }
.rows > .row-btn, .list > .row-btn, #cl > .row-btn { border-radius: 0; box-shadow: none; }
.rows:has(> .row-btn), #cl:has(> .row-btn) { background: var(--md-card); border-radius: var(--r-l); box-shadow: var(--md-elev-1); overflow: hidden; }
.list:has(> .row-btn) > .row-btn:first-of-type { border-top-left-radius: var(--r-l); border-top-right-radius: var(--r-l); }
.list:has(> .row-btn) > .row-btn:last-of-type { border-bottom-left-radius: var(--r-l); border-bottom-right-radius: var(--r-l); }
.list:has(> .row-btn) > .row-btn { box-shadow: var(--md-elev-1); }
.list:has(> .row-btn) { gap: 0; }
.list:has(> .row-btn) > .section-head { margin-bottom: var(--s1); }
.row-btn + .row-btn::before { content: ""; position: absolute; top: 0; left: 72px; right: var(--s2); height: 1px; background: var(--md-outline-variant); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-main b { font-size: 16px; line-height: 24px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-main span { font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.amount { font-size: 14px; font-weight: 500; }
.amount.due { color: var(--md-error); }
.amount.paid { color: var(--md-success); }
.tag { font-size: 11px; line-height: 16px; font-weight: 500; color: var(--md-on-secondary-container); background: var(--md-secondary-container); padding: 0 var(--s1); border-radius: var(--r-xs); white-space: nowrap; }
.chip { font-size: 12px; line-height: 16px; font-weight: 500; padding: 4px var(--s1); border-radius: var(--r-s); white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 4px; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip.actif { background: var(--md-success-container); color: var(--md-success); }
.chip.lecture { background: var(--md-warning-container); color: var(--md-warning); }
.chip.suspendu { background: var(--md-error-container); color: var(--md-on-error-container); }
.chip.desactive { background: var(--md-surface-high); color: var(--md-on-surface-variant); }
.avatar { flex: none; width: var(--s5); height: var(--s5); border-radius: 50%; background: var(--md-primary-container); color: var(--md-on-primary-container); display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 16px; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 80px; height: 80px; font-size: 28px; }

/* État vide */
.empty { text-align: center; padding: var(--s4) var(--s3); color: var(--md-on-surface-variant); font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: var(--s2); box-shadow: none; background: transparent; border: 1px dashed var(--md-outline-variant); }
.empty::before { content: ""; width: var(--s7); height: var(--s7); border-radius: 50%; background: var(--md-secondary-container) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%2344474E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5h13l3.5 7v6a2 2 0 01-2 2H4a2 2 0 01-2-2v-6z'/%3E%3C/svg%3E") center / 28px no-repeat; }

/* Chiffres */
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); overflow: hidden; }
.stat { padding: var(--s2); min-width: 0; }
.stat + .stat { border-left: 1px solid var(--md-outline-variant); }
.stat small { display: block; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }
.stat b { display: block; font-size: 16px; line-height: 24px; font-weight: 500; margin-top: 4px; }
.card .stat + .stat { border-left-color: var(--md-surface-lowest); }
.meter { height: var(--s1); border-radius: var(--r-full); background: var(--md-error-container); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: var(--r-full); background: var(--md-success); }

/* Actions de la fiche élève */
.actions3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s1); }
.act { height: 80px; border: none; border-radius: var(--r-l); background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-size: 14px; font-weight: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1); }
.act:first-child:not(:disabled) { background: var(--md-primary); color: var(--md-on-primary); }
.act:active { filter: brightness(.95); }

/* Entrées (séances, paiements) */
.list:has(> .entry) { gap: 0; }
.list:has(> .entry) > .section-head { margin-bottom: var(--s1); }
.entry { padding: var(--s2); display: flex; flex-direction: column; gap: var(--s1); position: relative; }
.list > .entry { border-radius: 0; }
.list > .entry:first-of-type { border-top-left-radius: var(--r-l); border-top-right-radius: var(--r-l); }
.list > .entry:last-of-type { border-bottom-left-radius: var(--r-l); border-bottom-right-radius: var(--r-l); }
.entry + .entry::before { content: ""; position: absolute; top: 0; left: var(--s2); right: var(--s2); height: 1px; background: var(--md-outline-variant); }
.entry-top { display: flex; align-items: center; gap: var(--s1); }
.entry-top b { font-size: 16px; font-weight: 500; }
.entry-top .amount { margin-left: auto; }
.entry p { font-size: 14px; color: var(--md-on-surface-variant); white-space: pre-line; overflow-wrap: anywhere; }
.entry-actions { display: flex; gap: var(--s1); margin-left: calc(-1 * var(--s1)); }
.entry.off p { color: var(--md-outline); }
.entry.off .amount { color: var(--md-outline); font-weight: 400; font-size: 12px; }
.tag.st-absent { background: var(--md-warning-container); color: var(--md-warning); }
.tag.st-annulee { background: var(--md-surface-high); color: var(--md-outline); text-decoration: line-through; }
.month-sep { font-size: 14px; font-weight: 500; color: var(--md-primary); margin: var(--s2) 0 var(--s1); }
details.period-el { overflow: hidden; }
details.period-el + details.period-el { margin-top: var(--s1); }
details.period-el summary { list-style: none; display: flex; align-items: center; gap: var(--s2); min-height: 72px; padding: var(--s1) var(--s2); cursor: pointer; }
details.period-el summary::-webkit-details-marker { display: none; }
details.period-el[open] summary { border-bottom: 1px solid var(--md-outline-variant); }
details.period-el .inner { padding: var(--s2); display: flex; flex-direction: column; gap: var(--s1); background: var(--md-surface-container); }
details.period-el .inner .entry { box-shadow: none; border-radius: var(--r-m); }

/* Profil */
.profile { display: flex; align-items: center; gap: var(--s2); }
.profile h2 { font-size: 24px; line-height: 32px; font-weight: 400; overflow-wrap: anywhere; }
.profile p { font-size: 14px; color: var(--md-on-surface-variant); }
.parent { display: flex; gap: var(--s2); align-items: center; padding: var(--s2); font-size: 14px; }
.parent svg { color: var(--md-on-surface-variant); flex: none; }
.parent small { display: block; font-size: 12px; color: var(--md-on-surface-variant); }
.rate { padding: var(--s2); display: flex; justify-content: space-between; align-items: center; gap: var(--s2); font-size: 14px; background: var(--md-secondary-container); color: var(--md-on-secondary-container); box-shadow: none; }
.rate b { font-weight: 500; }
.rate span { font-weight: 500; font-size: 16px; }
.kv { display: flex; justify-content: space-between; gap: var(--s2); font-size: 14px; min-height: var(--s4); align-items: center; }
.kv span:first-child { color: var(--md-on-surface-variant); }
.kv span:last-child { font-weight: 500; text-align: right; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Button (unique) */
.btn { height: var(--s6); width: 100%; border: none; border-radius: var(--r-full); padding: 0 var(--s3); display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .01em; text-decoration: none;
  background: var(--md-primary); color: var(--md-on-primary); transition: box-shadow .15s, filter .15s; }
.btn:hover { box-shadow: var(--md-elev-1); }
.btn:active { filter: brightness(.92); }
.btn.sm { height: var(--s6); padding: 0 var(--s2); }
.btn.ghost { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.btn.outline { background: transparent; color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-outline); }
.btn.text { background: transparent; color: var(--md-primary); box-shadow: none; }
.btn.danger { background: var(--md-error); color: #fff; }
html[data-skin="nuit"] .btn.danger { color: #690005; }
.btn.danger-outline { background: transparent; color: var(--md-error); box-shadow: inset 0 0 0 1px var(--md-outline); }
.btn.warn-outline { background: transparent; color: var(--md-warning); box-shadow: inset 0 0 0 1px var(--md-outline); }
#out.btn.text { color: var(--md-error); }
.btn.wa { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.btn.wa svg { color: var(--md-wa); }
.btns2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }
.link-btn { border: none; background: none; height: var(--s5); padding: 0 var(--s1); border-radius: var(--r-full); font-size: 14px; font-weight: 500; color: var(--md-primary); }
.link-btn:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
.link-btn.danger { color: var(--md-error); }

/* FAB étendu */
.fab { position: fixed; right: max(var(--s2), calc(50vw - 300px + var(--s2)), env(safe-area-inset-right, 0px)); bottom: calc(var(--nav-h) + var(--s2) + env(safe-area-inset-bottom)); height: var(--s7); padding: 0 var(--s2) 0 var(--s2); border: none; border-radius: var(--r-l); background: var(--md-primary-container); color: var(--md-on-primary-container); font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: var(--s1); box-shadow: var(--md-elev-3); z-index: 5; }
.fab svg { width: 24px; height: 24px; }

/* ---------------------------------------------------------------- Input (champ M3 contour) */
.form { display: flex; flex-direction: column; gap: var(--s3); }
.field { position: relative; }
.field > label, .field > .label { display: block; font-size: 14px; font-weight: 500; color: var(--md-on-surface-variant); margin-bottom: var(--s1); }
.field:has(> label + :is(.fld, .pw-wrap, .inline)) > label { position: absolute; top: -8px; left: 12px; z-index: 1; margin: 0; padding: 0 4px; font-size: 12px; line-height: 16px; font-weight: 400; background: var(--md-surface); pointer-events: none; }
.card .field:has(> label + :is(.fld, .pw-wrap, .inline)) > label, .sheet .field:has(> label + :is(.fld, .pw-wrap, .inline)) > label, .dialog .field:has(> label + :is(.fld, .pw-wrap, .inline)) > label { background: var(--md-card); }
.sheet .field > label { background: var(--md-surface-low) !important; }
fieldset.group .field > label { background: var(--md-surface-container) !important; }
.field:focus-within > label { color: var(--md-primary); }
.fld { width: 100%; height: var(--s7); border: 1px solid var(--md-outline); border-radius: var(--r-xs); padding: 0 var(--s2); font-size: 16px; color: var(--md-on-surface); background: transparent; }
textarea.fld { height: 112px; padding: var(--s2); resize: vertical; line-height: 24px; }
select.fld { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--md-on-surface-variant) 50%), linear-gradient(135deg, var(--md-on-surface-variant) 50%, transparent 50%); background-position: calc(100% - 22px) 26px, calc(100% - 17px) 26px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: var(--s5); }
.fld:hover { border-color: var(--md-on-surface); }
.fld:focus { outline: none; border: 2px solid var(--md-primary); padding-left: 15px; }
.fld::placeholder { color: var(--md-outline); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.inline { display: flex; gap: var(--s1); align-items: center; }
.inline .fld { flex: 1; min-width: 0; }
.inline .btn { width: auto; flex: none; }
fieldset.group { border: none; margin: 0; padding: var(--s2); border-radius: var(--r-l); background: var(--md-surface-container); display: flex; flex-direction: column; gap: var(--s3); }
fieldset.group legend { float: left; width: 100%; padding: 0; font-size: 16px; font-weight: 500; }
.hint { padding: var(--s2); border-radius: var(--r-m); background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-size: 14px; }
.photo-pick { align-self: center; width: 112px; height: 112px; border-radius: 50%; border: 1px dashed var(--md-outline); background: var(--md-surface-container); color: var(--md-on-surface-variant); font-size: 12px; font-weight: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; overflow: hidden; position: relative; cursor: pointer; }
.photo-pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pw-wrap { position: relative; display: block; }
.inline .pw-wrap { flex: 1; min-width: 0; }
.pw-wrap .fld { padding-right: var(--s7); }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: var(--s6); height: var(--s6); border: none; background: none; color: var(--md-on-surface-variant); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.pw-eye[aria-pressed="true"] { color: var(--md-primary); }
.reuse { margin-top: var(--s1); display: flex; align-items: center; gap: var(--s1); max-width: 100%; height: var(--s4); border: 1px solid var(--md-outline-variant); background: transparent; color: var(--md-on-surface-variant); border-radius: var(--r-s); padding: 0 var(--s1); font-size: 14px; font-weight: 500; text-align: left; }
.reuse span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* SearchBar */
input[type="search"].fld { height: var(--s7); border: none; border-radius: var(--r-full); background: var(--md-surface-high) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2374777F' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") 16px center / 24px no-repeat; padding-left: var(--s7); }
input[type="search"].fld:focus { border: none; padding-left: var(--s7); outline: 2px solid var(--md-primary); outline-offset: 0; }

/* Boutons segmentés et puces */
.seg, .chips4 { display: flex; border: 1px solid var(--md-outline); border-radius: var(--r-full); overflow: hidden; }
.seg button, .chips4 button { flex: 1; min-height: var(--s5); border: none; background: transparent; color: var(--md-on-surface); font-size: 14px; font-weight: 500; padding: 0 var(--s1); display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.seg button + button, .chips4 button + button { border-left: 1px solid var(--md-outline); }
.seg button[aria-pressed="true"], .chips4 button[aria-pressed="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.seg button[aria-pressed="true"]::before, .chips4 button[aria-pressed="true"]::before { content: "✓"; font-size: 14px; }
.filters, .modes { display: flex; gap: var(--s1); flex-wrap: wrap; }
.filters button, .modes button { height: var(--s4); padding: 0 var(--s2); border-radius: var(--r-s); border: 1px solid var(--md-outline); background: transparent; color: var(--md-on-surface-variant); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.filters button[aria-pressed="true"], .modes button[aria-pressed="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; }
.filters button[aria-pressed="true"]::before, .modes button[aria-pressed="true"]::before { content: "✓"; }
.list-filter { margin-bottom: var(--s1); }
.list-total { font-size: 14px; color: var(--md-on-surface-variant); margin-bottom: var(--s1); }
.list-total b { color: var(--md-error); }

/* Durée d'accès */
.duree { display: flex; flex-direction: column; gap: var(--s2); }
.qty { display: flex; align-items: center; gap: var(--s1); }
.qty-b { width: var(--s6); height: var(--s6); flex: none; border-radius: 50%; border: none; background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-size: 24px; line-height: 1; }
.qty-in.fld { width: 80px; flex: none; text-align: center; font-size: 22px; font-weight: 500; padding: 0 var(--s1); }
.qty-u { font-size: 16px; color: var(--md-on-surface-variant); }
.duree-exp { font-size: 14px; color: var(--md-on-surface-variant); }
.duree-exp b { color: var(--md-on-surface); }

/* ---------------------------------------------------------------- TabBar (barre de navigation) + Sidebar (rail) */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--md-surface-container); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.nav-in { max-width: 600px; margin: 0 auto; display: flex; height: var(--nav-h); }
.nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: none; background: none; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--md-on-surface-variant); }
.nav button svg { width: 64px; height: 32px; padding: 4px 20px; border-radius: var(--r-full); transition: background .2s; }
.nav button[aria-current="page"] { color: var(--md-on-surface); font-weight: 700; }
.nav button[aria-current="page"] svg { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
@media (min-width: 840px) {
  .nav { top: 0; right: auto; width: 96px; padding: var(--s3) 0; display: flex; }
  .nav-in { flex-direction: column; height: auto; gap: var(--s2); margin: 0; width: 100%; }
  .nav button { flex: none; height: var(--s8); }
  body { padding-left: 96px; }
  .screen { padding-bottom: var(--s5); }
  .fab { bottom: var(--s3); }
}

/* ---------------------------------------------------------------- BottomSheet, Dialog, Snackbar */
.overlay { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.32); display: flex; align-items: flex-end; justify-content: center; animation: fade .18s ease-out; }
.overlay.center { align-items: center; padding: var(--s3); }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: 600px; max-height: 92dvh; overflow-y: auto; background: var(--md-surface-low); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: var(--s2) max(var(--s3), env(safe-area-inset-right, 0px)) calc(var(--s3) + env(safe-area-inset-bottom)) max(var(--s3), env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: var(--s3); animation: up .25s cubic-bezier(.2,0,0,1); }
@keyframes up { from { transform: translateY(48px); opacity: .5; } }
.sheet .grab { align-self: center; width: 32px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--md-on-surface-variant) 40%, transparent); flex: none; }
.sheet h2 { font-size: 24px; line-height: 32px; font-weight: 400; }
.sheet .sub { font-size: 14px; color: var(--md-on-surface-variant); margin-top: 4px; }
.dialog { width: 100%; max-width: 440px; max-height: 90dvh; overflow-y: auto; background: var(--md-surface-high); border-radius: var(--r-xl); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); box-shadow: var(--md-elev-3); animation: pop .22s cubic-bezier(.2,0,0,1); }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }
.dialog > *, .sheet > * { flex-shrink: 0; }
.dialog h2 { font-size: 24px; line-height: 32px; font-weight: 400; }
.dialog p, .dialog ul { font-size: 14px; color: var(--md-on-surface-variant); }
.dialog ul { margin: 0; padding-left: var(--s3); display: flex; flex-direction: column; gap: var(--s1); }
.dialog .field:has(> label + :is(.fld, .pw-wrap, .inline)) > label { background: var(--md-surface-high); }
.steps h3 { font-size: 16px; font-weight: 500; margin-bottom: var(--s1); }
.steps ol { margin: 0; padding-left: var(--s3); display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--md-on-surface-variant); }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + var(--s2) + env(safe-area-inset-bottom)); width: calc(100% - var(--s4)); max-width: 568px; z-index: 50; background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); min-height: var(--s6); padding: 14px var(--s2); border-radius: var(--r-xs); font-size: 14px; display: flex; align-items: center; box-shadow: var(--md-elev-3); animation: snack .2s ease-out; }
@keyframes snack { from { transform: translate(-50%, 16px); opacity: 0; } }
.toast.err { background: var(--md-error-container); color: var(--md-on-error-container); }
@media (min-width: 840px) { .toast { bottom: var(--s3); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .banner .track span { padding-left: var(--s1); white-space: normal; } }

/* ---------------------------------------------------------------- Connexion */
.login { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: var(--s5) var(--s3) var(--s4); gap: var(--s3); max-width: 440px; margin: 0 auto; }
.logo { width: var(--s8); height: var(--s8); border-radius: var(--r-l); display: block; box-shadow: var(--md-elev-1); }
.login h1 { font-size: 45px; line-height: 52px; font-weight: 400; }
.login .lead { font-size: 16px; line-height: 24px; margin-top: var(--s1); }
.login .field > label { background: var(--md-surface) !important; }
.access { display: flex; flex-direction: column; align-items: center; gap: var(--s1); text-align: center; padding-top: var(--s3); border-top: 1px solid var(--md-outline-variant); }
.access p { font-size: 16px; font-weight: 500; }
.access .btn { max-width: 280px; }
.access .access-num { font-size: 12px; font-weight: 400; color: var(--md-on-surface-variant); user-select: all; }

/* ---------------------------------------------------------------- Administration */
.admin-hero { display: flex; flex-direction: column; gap: var(--s2); }
.admin-hero small { color: var(--md-on-surface-variant); font-size: 14px; }
.admin-hero h1 { font-size: 24px; line-height: 32px; font-weight: 400; }
.stats2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }
.stats2 button { text-align: left; border: none; background: var(--md-card); box-shadow: var(--md-elev-1); border-radius: var(--r-l); padding: var(--s2); color: var(--md-on-surface); }
.stats2 button:first-child { background: var(--md-primary-container); color: var(--md-on-primary-container); box-shadow: none; }
.stats2 b { display: block; font-size: 32px; line-height: 40px; font-weight: 400; }
.stats2 span { display: block; font-size: 12px; color: inherit; opacity: .8; }
.viewing { background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); border-radius: var(--r-m); padding: var(--s1) var(--s1) var(--s1) var(--s2); font-size: 14px; display: flex; align-items: center; gap: var(--s1); }
.viewing svg { flex: none; }
.viewing button { margin-left: auto; border: none; background: transparent; color: var(--md-primary-container); height: var(--s5); padding: 0 var(--s2); border-radius: var(--r-full); font-size: 14px; font-weight: 500; flex: none; }
.creds { background: var(--md-surface-container); border-radius: var(--r-m); padding: var(--s2); font-size: 16px; display: flex; flex-direction: column; gap: var(--s1); }
.creds code, code.cred { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px; font-weight: 700; background: var(--md-accent); color: var(--md-on-accent); padding: 2px var(--s1); border-radius: var(--r-xs); user-select: all; letter-spacing: .04em; }
.access-card .kv span:last-child { display: inline-flex; align-items: center; gap: 4px; }
.abo-list { display: flex; flex-direction: column; gap: 4px; }
.rev-now b { display: block; font-size: 36px; line-height: 44px; font-weight: 400; }
.rev-now span { font-size: 12px; color: var(--md-on-surface-variant); }
.rev-bars { display: flex; align-items: flex-end; gap: var(--s1); height: 128px; padding-top: 4px; border-bottom: 1px solid var(--md-outline-variant); margin-bottom: var(--s3); }
.rev-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.rev-col i { display: block; width: 100%; max-width: 32px; border-radius: var(--r-s) var(--r-s) 0 0; background: var(--md-secondary-container); }
.rev-col.cur i { background: var(--md-primary); }
.rev-v { font-size: 11px; color: var(--md-on-surface-variant); white-space: nowrap; }
.rev-m { font-size: 11px; color: var(--md-on-surface-variant); font-weight: 500; margin-bottom: -24px; }

/* Graphique des périodes */
.legend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); font-size: 12px; color: var(--md-on-surface-variant); }
.lg { display: inline-flex; align-items: center; gap: var(--s1); }
.lg i, .cd-row i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
i.hatch { background: repeating-linear-gradient(45deg, #E26A3C 0 3px, #EFA58A 3px 5px); }
.chart-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--s2)); padding: 0 var(--s2); scrollbar-width: thin; }
.chart-scroll svg { display: block; font-family: var(--font); }
.cg { cursor: pointer; outline: none; }
.cg .cg-hit { fill: transparent; transition: fill .15s; }
.cg.on .cg-hit { fill: var(--md-secondary-container); }
.cg:focus-visible .cg-hit { stroke: var(--md-primary); stroke-width: 2; }
.chart-detail { background: var(--md-surface-container); border-radius: var(--r-m); padding: var(--s2); display: flex; flex-direction: column; gap: var(--s1); font-size: 14px; }
.chart-detail > b { font-weight: 500; }
.cd-row { display: flex; justify-content: space-between; gap: var(--s1); }
.cd-row span { display: inline-flex; align-items: center; gap: var(--s1); color: var(--md-on-surface-variant); }
.cd-row b { font-weight: 500; }

/* Réglages : installation et thèmes */
.install-top { display: flex; gap: var(--s2); align-items: center; }
.install-top img { width: var(--s7); height: var(--s7); border-radius: var(--r-l); flex: none; }
.skins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s1); }
.skin { border: 1px solid var(--md-outline-variant); background: transparent; border-radius: var(--r-l); padding: var(--s1); display: flex; flex-direction: column; align-items: center; gap: var(--s1); font-size: 12px; font-weight: 500; color: var(--md-on-surface-variant); }
.skin[aria-pressed="true"] { border: 2px solid var(--md-primary); color: var(--md-primary); padding: 7px; }
.skin i { display: block; width: 100%; height: var(--s6); border-radius: var(--r-m); position: relative; overflow: hidden; }
.skin i::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 16px; border-radius: var(--r-s); background: var(--a); }
.skin i::after { content: ""; position: absolute; left: 6px; width: 40%; bottom: 6px; height: var(--s1); border-radius: 4px; background: var(--h); }

/* ---------------------------------------------------------------- Factures (la feuille reste claire dans tous les thèmes) */
html[data-skin="nuit"] .inv-wrap {
  --md-card: #FFFFFF; --sheet: #FFFFFF; --paper: #F4F6FB; --ink: #191C20; --ink-2: #44474E; --ink-3: #74777F;
  --rule: #C4C6D0; --rule-2: #74777F; --wash: #E7E8EE; --blue: #415F91; --blue-deep: #284777; --blue-wash: #D6E3FF;
  --red: #BA1A1A; --red-wash: #FFDAD6; --danger-ink: #93000A; --green: #1E6B43; --green-wash: #C3EFD2;
  --hl: #FFE08A; --on-hl: #3E2E00; --seyes: rgba(65, 95, 145, .08);
  color: var(--ink);
}
.inv-wrap { width: 100%; max-width: 440px; display: flex; flex-direction: column; }
.inv-actions { display: flex; gap: var(--s1); flex: none; }
.inv-actions .btn { flex: 1; }
.inv-actions .btn.ghost, .inv-actions .btn.wa { background: var(--md-surface-high); color: var(--md-on-surface); }
.inv-wrap .dialog.invoice { gap: 10px; }
.inv-wrap .dialog.invoice h2 { font-weight: 700; }

/* ---------------------------------------------------------------- Modèles de facture (inchangés) */
/* Facture : une page de carnet à souches, réglée Seyès, avec marge rouge */
.dialog.invoice { position: relative; padding: 30px 22px 22px 40px; overflow-x: hidden;
  background:
    linear-gradient(90deg, transparent 27px, rgba(194,58,46,.45) 27px 28.5px, transparent 28.5px),
    repeating-linear-gradient(0deg, transparent 0 23px, var(--seyes) 23px 24px),
    var(--sheet); }
.dialog.invoice::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px;
  background: radial-gradient(circle at 8px 0, rgba(14,19,46,.48) 4px, transparent 4.5px) 0 0 / 16px 12px repeat-x; }
.invoice-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.invoice-head h2 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.invoice-head small { font-size: 13px; color: var(--ink-2); display: block; margin-top: 2px; }
.invoice-no { font-size: 12px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--rule-2); background: var(--sheet); padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.invoice-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; }
.invoice-parties small { color: var(--ink-3); display: block; }
.invoice-parties b { font-weight: 600; font-size: 14px; display: block; margin-top: 2px; overflow-wrap: anywhere; }
.invoice-lines { border-top: 1.5px solid var(--ink); }
.invoice-line { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--rule-2); }
.invoice-line div { flex: 1; min-width: 0; }
.invoice-line b { font-size: 14px; font-weight: 600; display: block; overflow-wrap: anywhere; }
.invoice-line small { font-size: 12px; color: var(--ink-3); }
.invoice-line span { font-family: var(--f-display); font-size: 15px; font-weight: 700; white-space: nowrap; }
.invoice-tot { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.invoice-tot div { display: flex; justify-content: space-between; gap: 10px; }
.invoice-tot span:first-child { color: var(--ink-2); }
.invoice-tot b { font-family: var(--f-display); font-weight: 700; }
.invoice-tot .final { font-size: 18px; padding-top: 10px; margin-top: 4px; border-top: 1.5px solid var(--ink); align-items: baseline; }
.invoice-tot .final span:first-child { color: var(--ink); font-weight: 700; font-family: var(--f-display); }
.invoice-tot .final b { color: var(--red); font-size: 24px; letter-spacing: -.02em; }
.invoice-tot .final.ok b { color: var(--green); }
.stamp { position: absolute; top: 38%; right: 18px; z-index: 2; font-family: var(--f-display); font-size: 40px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red); border: 4px solid currentColor; outline: 2px solid currentColor; outline-offset: 4px; border-radius: 8px; padding: 2px 14px 2px 18px; line-height: 1.15; transform: rotate(-14deg); opacity: .9; pointer-events: none; mix-blend-mode: multiply; animation: stamp .35s cubic-bezier(.3,1.6,.5,1) .15s both; }
@keyframes stamp { from { transform: rotate(-12deg) scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .stamp, .dialog, .sheet, .toast { animation: none; } }

/* Facture compacte : tient sur une capture d'écran avec 8 à 10 séances */
.inv-wrap { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 10px; max-height: 96dvh; }
.inv-wrap .dialog.invoice { max-height: none; overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 22px 16px 16px 34px; gap: 10px; border-radius: 16px;
  background: linear-gradient(90deg, transparent 23px, rgba(194,58,46,.4) 23px 24.5px, transparent 24.5px), var(--sheet); }
.inv-wrap .dialog.invoice::before { height: 10px; background-size: 14px 10px; }
.inv-wrap .invoice-head h2 { font-size: 24px; line-height: 1.1; }
.inv-wrap .invoice-head small { font-size: 12px; margin-top: 1px; }
.inv-wrap .invoice-no { font-size: 11px; padding: 3px 6px; }
.inv-wrap .invoice-parties { gap: 10px; font-size: 12px; line-height: 1.3; }
.inv-wrap .invoice-parties b { font-size: 13px; margin-top: 0; }
.inv-wrap .invoice-lines { border-top: 1.5px solid var(--ink); }
.il { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed var(--rule); font-size: 13px; line-height: 1.3; }
.il-d { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.il-d small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); line-height: 1.1; }
.il b { font-weight: 500; color: var(--ink-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.il-m { font-family: var(--f-display); font-weight: 700; font-size: 13px; white-space: nowrap; text-align: right; }
.il-charge b { color: var(--ink); font-weight: 600; }
.il-charge .il-d { color: var(--ink-3); font-weight: 500; font-size: 12px; }
.il.off .il-d, .il.off b, .il.off .il-m { color: var(--ink-3); }
.il.off b { font-style: italic; }
.inv-wrap .invoice-tot { gap: 3px; font-size: 13px; }
.inv-wrap .invoice-tot .final { font-size: 16px; padding-top: 6px; margin-top: 3px; }
.inv-wrap .invoice-tot .final b { font-size: 22px; }
.inv-wrap .stamp { top: 46%; bottom: auto; right: 16px; font-size: 32px; opacity: .82; }
.inv-actions { display: flex; gap: 8px; flex: none; }
.inv-actions .btn { flex: 1; }
.inv-actions .btn.ghost { box-shadow: none; }

/* Facture en couleur */
.inv-wrap .dialog.invoice { padding-top: 0; }
.inv-wrap .invoice-head { margin: 0 -16px 2px -34px; padding: 20px 16px 14px 34px; color: #fff; align-items: center;
  background: repeating-linear-gradient(0deg, transparent 0 15px, rgba(255,255,255,.07) 15px 16px), linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%); }
.inv-wrap .invoice-head h2 { color: #fff; }
.inv-wrap .invoice-head small { color: rgba(255,255,255,.82); }
.inv-wrap .invoice-no { background: var(--hl); border-color: var(--hl); color: var(--on-hl); font-weight: 700; }
.inv-wrap .dialog.invoice::before { z-index: 1; }
.inv-wrap .invoice-parties > div { padding: 8px 10px; border-radius: 10px; background: var(--blue-wash); }
.inv-wrap .invoice-parties small { color: var(--blue); font-weight: 600; }
.inv-wrap .invoice-parties b { color: var(--ink); }
.inv-wrap .invoice-lines { border-top: 2px solid var(--blue); }
.il:nth-child(even) { background: linear-gradient(90deg, rgba(35,56,160,.045), rgba(35,56,160,.02)); }
.il { padding-inline: 4px; border-bottom-color: var(--blue-wash); }
.il-d { color: var(--blue); }
.il-charge { background: linear-gradient(90deg, rgba(255,227,77,.55), rgba(255,227,77,.25)) !important; border-radius: 6px; border-bottom-color: transparent; margin-block: 3px; }
.il-charge .il-d { color: var(--amber); font-weight: 600; }
.inv-wrap .invoice-tot { background: var(--paper); border-radius: 10px; padding: 8px 10px; }
.inv-wrap .invoice-tot .final { margin: 4px -10px -8px; padding: 8px 10px; border-top: none; border-radius: 0 0 10px 10px; background: var(--red-wash); }
.inv-wrap .invoice-tot .final.ok { background: var(--green-wash); }
.inv-wrap .invoice-tot .final span:first-child { color: var(--danger-ink); }
.inv-wrap .invoice-tot .final.ok span:first-child { color: var(--green); }

/* ---------------------------------------------------------------- Modèles de facture */
.inv-paper { flex: 1 1 auto; min-height: 0; overflow-y: auto; border-radius: 16px; }
.inv-paper > * { min-height: 100%; }
.inv-models { display: flex; gap: 4px; padding: 4px; background: rgba(255,255,255,.14); border-radius: 12px; flex: none; }
.inv-models button { flex: 1; height: 36px; border: none; border-radius: 9px; background: transparent; color: #fff; font-size: 13px; font-weight: 600; }
.inv-models button[aria-pressed="true"] { background: #fff; color: #141B3D; }
.paper { position: relative; border-radius: 16px; overflow: hidden; color: #141B3D; }

/* Classique : sobre et professionnel */
.m-classique { background: #fff; padding: 20px 18px 16px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: #1D1D1F; }
.cl-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 2px solid #1D1D1F; }
.cl-mono { width: 38px; height: 38px; border-radius: 8px; background: #1D1D1F; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 800; font-size: 14px; flex: none; }
.cl-head > div:nth-child(2) { flex: 1; min-width: 0; }
.cl-head b { display: block; font-size: 14px; }
.cl-head small { color: #6E6E73; font-size: 11px; }
.cl-title { text-align: right; }
.cl-title h2 { font-family: var(--f-display); font-size: 20px; letter-spacing: .14em; font-weight: 800; color: #1D1D1F; }
.cl-title small { display: block; line-height: 1.35; }
.cl-to { display: flex; flex-direction: column; gap: 1px; background: #F5F5F7; border-radius: 8px; padding: 8px 10px; }
.cl-to small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #6E6E73; }
.cl-to b { font-size: 14px; }
.cl-to span { color: #424245; font-size: 12px; }
.cl-t { width: 100%; border-collapse: collapse; font-size: 12px; }
.cl-t th { text-align: left; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #6E6E73; font-weight: 600; padding: 4px 4px; border-bottom: 1px solid #D2D2D7; }
.cl-t td { padding: 5px 4px; border-bottom: 1px solid #EDEDF0; vertical-align: top; }
.cl-t td:first-child { white-space: nowrap; color: #424245; }
.cl-t td:nth-child(3) { white-space: nowrap; color: #6E6E73; }
.cl-t th:last-child, .cl-t td:last-child { text-align: right; white-space: nowrap; font-weight: 600; }
.cl-t tr.ch td { background: #F5F5F7; font-weight: 600; }
.cl-tot { align-self: flex-end; width: 62%; display: flex; flex-direction: column; gap: 3px; }
.cl-tot div { display: flex; justify-content: space-between; gap: 8px; }
.cl-tot span { color: #6E6E73; }
.cl-tot .g { margin-top: 4px; padding: 7px 8px; background: #1D1D1F; color: #fff; border-radius: 6px; }
.cl-tot .g span { color: #fff; font-weight: 600; }
.cl-tot .g b { font-size: 15px; }
.cl-foot { text-align: center; color: #6E6E73; font-size: 11px; font-style: italic; }
.stamp2 { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); font-family: var(--f-display); font-size: 44px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #C23A2E; border: 5px double #C23A2E; padding: 0 16px; border-radius: 6px; opacity: .8; mix-blend-mode: multiply; pointer-events: none; z-index: 2; }

/* Reçu : ticket de caisse */
.m-recu { background: #FFFEF8; margin: 0 auto; max-width: 330px; padding: 18px 16px 26px; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace; font-size: 12px; line-height: 1.45; color: #222;
  -webkit-mask: radial-gradient(circle at 8px 100%, transparent 6px, #000 6.5px) 0 0 / 16px 100% repeat-x; mask: radial-gradient(circle at 8px 100%, transparent 6px, #000 6.5px) 0 0 / 16px 100% repeat-x; border-radius: 6px 6px 0 0; }
.rc-c { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; }
.rc-left { align-items: flex-start; text-align: left; }
.rc-big { font-size: 15px; letter-spacing: .12em; }
.rc-sep { border-top: 1.5px dashed #999; margin: 8px 0; }
.rc-sep.dbl { border-top: 3px double #222; }
.rc-l { display: flex; align-items: baseline; gap: 4px; padding: 1px 0; }
.rc-l span { min-width: 0; overflow-wrap: anywhere; }
.rc-l i { flex: 1; min-width: 12px; border-bottom: 1.5px dotted #AAA; transform: translateY(-3px); }
.rc-l b { white-space: nowrap; }
.rc-due { font-size: 14px; font-weight: 700; }
.rc-due b { font-size: 15px; }
.rc-paid { text-align: center; margin-top: 10px; font-size: 18px; font-weight: 800; letter-spacing: .1em; color: #C23A2E; border: 2px solid #C23A2E; padding: 4px; transform: rotate(-3deg); }
.rc-thanks { margin-top: 10px; color: #666; font-size: 11px; }

/* Moderne : grande somme en tête, couleurs vives */
.m-moderne { background: #fff; display: flex; flex-direction: column; }
.md-hero { padding: 16px 18px 14px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, #FF8A5B 0%, transparent 55%), linear-gradient(135deg, #6D3BD6 0%, #3B2A9E 100%); }
.md-hero.ok { background: radial-gradient(120% 140% at 100% 0%, #7FE0B0 0%, transparent 55%), linear-gradient(135deg, #12925A 0%, #0B5E3B 100%); }
.md-top { display: flex; justify-content: space-between; font-size: 11px; opacity: .85; margin-bottom: 8px; }
.md-hero small { font-size: 12px; opacity: .85; display: block; }
.md-big { display: block; font-family: var(--f-display); font-size: 36px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.md-who { display: flex; flex-direction: column; margin-top: 8px; font-size: 12px; opacity: .92; }
.md-who span:first-child { font-weight: 700; font-size: 14px; opacity: 1; }
.md-list { padding: 10px 12px 4px; display: flex; flex-direction: column; gap: 5px; }
.md-r { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: #F6F4FD; font-size: 13px; }
.md-r.ch { background: #FFF1E9; }
.md-d { flex: none; min-width: 44px; text-align: center; font-weight: 700; font-size: 12px; color: #fff; background: #6D3BD6; border-radius: 7px; padding: 3px 4px; }
.md-r.ch .md-d { background: #FF8A5B; }
.md-s { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.md-s b { font-weight: 600; color: #22194A; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.md-s small { font-size: 11px; color: #7A7396; }
.md-a { flex: none; font-family: var(--f-display); font-weight: 700; color: #22194A; font-size: 13px; }
.md-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 12px; }
.md-sum div { background: #F6F4FD; border-radius: 10px; padding: 7px 8px; }
.md-sum small { display: block; font-size: 11px; color: #7A7396; }
.md-sum b { font-family: var(--f-display); font-size: 13px; color: #22194A; }
.md-foot { text-align: center; font-size: 11px; color: #9A94B5; padding: 2px 0 12px; }
/* Ajustements : choix du modèle lisible, facture entière à l'écran */
.overlay.center:has(.inv-wrap) { padding: 10px 12px; }
.inv-wrap { max-height: calc(100dvh - 20px); gap: 8px; }
.inv-models { background: rgba(14,19,46,.88); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.inv-models button { color: #C9CEEA; }
.md-hero { padding: 13px 16px 12px; }
.md-big { font-size: 32px; }
.md-list { gap: 4px; padding: 8px 10px 2px; }
.md-r { padding: 4px 8px; }
.md-sum { padding: 6px 10px; }
.md-foot { padding: 0 0 8px; }

/* ===== Mouvement Material 3 : ondulation, pression, transitions ===== */
:root { --ease-std: cubic-bezier(.2,0,0,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); }
.btn, .fab, .act, .row-btn, .icon-btn, .eye, .reuse, .link-btn, .seg button, .filters button, .modes button, .chips4 button, .qty-b, .pw-eye { overflow: hidden; -webkit-tap-highlight-color: transparent; }
.btn, .act, .row-btn, .icon-btn, .reuse, .link-btn, .seg button, .filters button, .modes button, .chips4 button, .qty-b { position: relative; }
.btn, .fab, .act, .row-btn, .icon-btn, .eye, .reuse, .seg button, .filters button, .modes button, .chips4 button, .qty-b { transition: transform .35s var(--ease-spring), box-shadow .2s var(--ease-std), background-color .2s var(--ease-std), color .2s; }
.btn:active, .act:active, .reuse:active, .seg button:active, .filters button:active, .modes button:active, .chips4 button:active, .qty-b:active { transform: scale(.96); transition-duration: .08s; }
.fab:active { transform: scale(.92); box-shadow: var(--md-elev-1, 0 1px 3px rgba(0,0,0,.2)); transition-duration: .08s; }
.row-btn:active { transform: scale(.985); transition-duration: .08s; }
.icon-btn:active, .eye:active { transform: scale(.88); transition-duration: .08s; }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .16; transform: scale(0); animation: ripple .55s var(--ease-std) forwards; }
@keyframes ripple { 60% { opacity: .14; } to { transform: scale(1); opacity: 0; } }
/* Indicateur de l'onglet actif qui s'étire */
.anim .nav button[aria-current="page"] svg { animation: pill .4s var(--ease-spring); }
@keyframes pill { from { transform: scaleX(.3); background: transparent; } }
.nav button svg { transition: background .25s var(--ease-std), transform .3s var(--ease-spring); }
.nav button:active svg { transform: scale(.9); }
/* Entrée d'écran et des listes en cascade */
.anim > .screen, .anim > .topbar + .screen { animation: enter .32s var(--ease-std); }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } }
.anim .list > *, .anim .stats3 > *, .anim .stats2 > * { animation: enter .36s var(--ease-std) backwards; }
.anim .list > :nth-child(2), .anim .stats3 > :nth-child(2), .anim .stats2 > :nth-child(2) { animation-delay: .04s; }
.anim .list > :nth-child(3), .anim .stats3 > :nth-child(3) { animation-delay: .08s; }
.anim .list > :nth-child(4) { animation-delay: .12s; }
.anim .list > :nth-child(5) { animation-delay: .16s; }
.anim .list > :nth-child(n+6) { animation-delay: .2s; }
.anim .fab { animation: fabIn .45s var(--ease-spring) .1s backwards; }
@keyframes fabIn { from { transform: scale(.4); opacity: 0; } }
/* Cases à choix : la coche apparaît en ressort */
.seg button[aria-pressed="true"]::before, .chips4 button[aria-pressed="true"]::before { animation: pop .3s var(--ease-spring); }
.eye svg { transition: transform .35s var(--ease-spring); }
.eye[aria-pressed="true"] svg { transform: rotate(-12deg); }
.overlay.out { animation: fade .16s ease-in reverse forwards; }
@media (prefers-reduced-motion: reduce) { .ripple { display: none; } .btn:active, .fab:active, .row-btn:active, .icon-btn:active, .act:active { transform: none; } }

/* ===== Couleur : carte héros, accents mangue, avatars variés ===== */
.solde { background: var(--hero); color: #fff; box-shadow: var(--md-elev-3); overflow: hidden; isolation: isolate; }
.solde::before { content: ""; position: absolute; z-index: -1; width: 220px; height: 220px; right: -70px; top: -90px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--md-vivid) 70%, transparent), transparent 70%); opacity: .55; }
.solde::after { content: ""; position: absolute; z-index: -1; width: 180px; height: 180px; left: -60px; bottom: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); }
.solde small { color: rgba(255,255,255,.82); opacity: 1; }
.solde .row { border-top-color: rgba(255,255,255,.22); }
.solde > .eye { color: #fff; }
.solde > .eye:hover { background: rgba(255,255,255,.14); }
.solde > .eye[aria-pressed="true"] { background: var(--md-vivid); color: var(--md-on-vivid); }
.btn:not(.ghost):not(.outline):not(.text):not(.danger):not(.wa):not(.warn-outline) { box-shadow: 0 4px 12px color-mix(in srgb, var(--md-primary) 35%, transparent); }
.fab { background: var(--md-vivid); color: var(--md-on-vivid); box-shadow: 0 8px 20px color-mix(in srgb, var(--md-vivid) 45%, transparent), 0 2px 6px rgba(0,0,0,.12); }
.act:nth-child(2):not(:disabled) { background: var(--md-accent); color: var(--md-on-accent); }
.act:first-child:not(:disabled) { background: var(--hero); box-shadow: 0 4px 12px color-mix(in srgb, var(--md-primary) 35%, transparent); }
.row-btn:nth-of-type(3n+2) .avatar { background: var(--md-accent); color: var(--md-on-accent); }
.row-btn:nth-of-type(3n) .avatar { background: var(--md-primary); color: var(--md-on-primary); }
.avatar.lg { background: var(--hero); color: #fff; box-shadow: var(--md-elev-3); }
.hello h1 { font-weight: 600; color: var(--md-primary); }
.nav { background: color-mix(in srgb, var(--md-primary) 6%, var(--md-surface-lowest)); box-shadow: 0 -1px 0 var(--md-outline-variant); }
.nav button[aria-current="page"] { color: var(--md-primary); }
.nav button[aria-current="page"] svg { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.card .stats3 { background: color-mix(in srgb, var(--md-primary) 7%, var(--md-surface-lowest)); }
.stats3 .stat b:not(.amount) { color: var(--md-on-primary-container); }
.meter i { background: linear-gradient(90deg, var(--md-success), color-mix(in srgb, var(--md-success) 60%, #7FE0A8)); }
.seg button[aria-pressed="true"], .filters button[aria-pressed="true"] { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.banner { background: linear-gradient(90deg, var(--md-accent), color-mix(in srgb, var(--md-vivid) 55%, var(--md-accent))); }
.empty::before { background-color: var(--md-accent); }
.tag { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.parent, .rate { border-left: 4px solid var(--md-vivid); }
.login > div:first-child { position: relative; overflow: hidden; isolation: isolate; background: var(--hero); color: #fff; border-radius: var(--r-xl); padding: var(--s3); box-shadow: var(--md-elev-3); }
.login > div:first-child::before { content: ""; position: absolute; z-index: -1; width: 240px; height: 240px; right: -80px; top: -100px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--md-vivid) 70%, transparent), transparent 70%); opacity: .6; }
.login > div:first-child .lead { color: rgba(255,255,255,.86); }
.login > div:first-child .logo { box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
html[data-skin="nuit"] .stats3 .stat b { color: var(--md-on-surface); }
html[data-skin="nuit"] .nav { background: var(--md-surface-container); }
html[data-skin="nuit"] .card .stats3 { background: var(--md-surface-container); }