/* ============================================================
   Libiduo — feuille de style
   Extraite d'index.html le 12 septembre 2026, sans modification
   de contenu. La couche « Velvet Night » figure en fin de fichier :
   elle surcharge les styles de base, la supprimer suffit à revenir
   au rendu clair d'origine.
   ============================================================ */

/* Polices hébergées sur le site : aucun appel à Google au chargement.
   Fichiers réduits aux graisses et aux caractères réellement utilisés. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/fraunces.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400 500; font-display: swap; src: url('/fonts/fraunces-italic.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/nunito-sans.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/nunito-sans-italic.woff2') format('woff2'); }

:root {
  --bg: #faf3ed;            /* crème très légèrement rosé */
  --surface: #ffffff;        /* carte blanche */
  --border: #e8dad0;         /* beige rosé clair */
  --border-strong: #d4bfa8;  /* beige foncé */
  --text: #1a1f4a;           /* bleu nuit (texte principal) */
  --text-muted: #4a5080;     /* bleu-gris */
  --text-dim: #9299b8;       /* bleu clair terne */
  --accent: #1e2478;         /* bleu marine du logo */
  --accent-dark: #141a5c;    /* bleu nuit profond */
  --accent-light: #e8ebf5;   /* bleu très pâle */
  --pink-soft: #f5dcd4;      /* rose doux (fond des photos du logo) */
  --pink-deep: #e8b8a8;      /* rose plus prononcé */
  --sage: #7a8f6f;           /* sauge conservé pour accents secondaires */
  --sage-light: #e2e8d8;     /* sauge très clair */
  --sage-dark: #5a6d52;      /* sauge foncé */
  --danger: #b85450;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: 'Nunito Sans', -apple-system, sans-serif; min-height: 100vh; }
body { font-size: 16px; line-height: 1.5; }
h1, h2, h3 { margin: 0; }
input, button, select { font-family: inherit; font-size: inherit; }
input:focus, button:focus, select:focus, textarea:focus { outline: none; }
button { cursor: pointer; }
.serif { font-family: 'Fraunces', Georgia, serif; font-weight: 400; }
.container { max-width: 640px; margin: 0 auto; padding: 0 16px; }

/* Auth screen */
.auth-wrap { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px 20px; }
.auth-card { width: 100%; max-width: 400px; text-align: center; }
.auth-card h1 { font-family: 'Fraunces', serif; font-weight: 400; font-size: 38px; color: var(--accent); margin-bottom: 6px; letter-spacing: -0.01em; }
.auth-card .tag { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; }
@media (max-width: 480px) {
  .auth-wrap { padding: 24px 16px 16px; }
  .auth-card h1 { font-size: 32px; }
  .auth-card .tag { margin-bottom: 16px; font-size: 13px; }
}
.auth-tabs { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 4px; margin-bottom: 20px; }
.auth-tab { flex: 1; background: transparent; border: 0; color: var(--text-muted); padding: 10px; border-radius: 7px; font-weight: 500; font-size: 14px; }
.auth-tab.active { background: var(--accent); color: white; }
.auth-form { text-align: left; }
.auth-form label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 6px; }
.auth-form input { margin-bottom: 14px; }
.champ-mdp { position: relative; }
.champ-mdp input { padding-right: 82px; }
.voir-mdp { position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  background: transparent; border: 0; color: var(--text-dim); font-size: 12.5px; cursor: pointer; padding: 6px; }
.voir-mdp:hover { color: var(--accent); }
.jauge { height: 5px; background: var(--border); border-radius: 999px; overflow: hidden; margin: 10px 0 8px; }
.jauge-barre { height: 100%; width: 0; border-radius: 999px; transition: width .2s, background .2s; background: var(--danger); }
.hint { font-size: 12px; color: var(--text-dim); margin-top: -8px; margin-bottom: 14px; }
.auth-error { background: rgba(216,138,138,0.12); border: 1px solid rgba(216,138,138,0.4); color: var(--danger); padding: 10px; border-radius: 8px; font-size: 14px; margin-bottom: 14px; }
.auth-success { background: rgba(122,143,111,0.12); border: 1px solid rgba(122,143,111,0.4); color: var(--sage-dark); padding: 10px; border-radius: 8px; font-size: 14px; margin-bottom: 14px; }
.link-btn { background: transparent; border: 0; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 4px; text-decoration: underline; }
.link-btn:hover { color: var(--accent-dark); background: var(--accent-light); }
.btn-primary { width: 100%; background: var(--accent); color: white; border: 0; padding: 12px; border-radius: 10px; font-weight: 700; font-size: 15px; transition: background 0.2s; }
.btn-primary svg,
.add-item-btn svg,
.row-btn svg,
.chip-btn svg {
 width: 16px;
 height: 16px;
 flex-shrink: 0;
 }
.btn-primary:hover:not(:disabled) { background: var(--accent-dark); }
.btn-primary:disabled { background: var(--border); color: var(--text-dim); cursor: not-allowed; }

/* Main app */
header { padding: 20px 0 16px; border-bottom: 1px solid var(--border); background: linear-gradient(to bottom, var(--pink-soft) 0%, var(--bg) 100%); }
header h1 { font-family: 'Fraunces', serif; font-weight: 400; font-size: 34px; color: var(--accent); letter-spacing: -0.01em; line-height: 1; }
header .row { display: flex; align-items: center; gap: 12px; }
.brand-duo { color: #c4705c; font-style: italic; }
.header-logo { flex-shrink: 0; }
.header-logo img, .header-logo svg { width: 91px; height: 91px; display: block; border-radius: 50%; }
@media (max-width: 480px) {
  header h1 { font-size: 32px; }
  header .subtitle { font-size: 12px; }
  .header-logo img, .header-logo svg { width: 74px; height: 74px; }
}
.auth-logo { margin-bottom: 12px; display: flex; justify-content: center; }
.auth-logo img, .auth-logo svg { width: 172px; height: 172px; display: block; border-radius: 50%; }
@media (max-width: 480px) {
  .auth-logo { margin-bottom: 10px; }
  .auth-logo img, .auth-logo svg { width: 138px; height: 138px; }
}
header .subtitle { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
header .space-badge { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }

nav { position: sticky; top: 0; z-index: 20; background: rgba(245,237,225,0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
nav .inner { display: flex; justify-content: center; gap: 4px; padding: 8px 12px; }
.nav-btn { background: transparent; border: 1px solid transparent; color: var(--text-muted); padding: 8px 14px; border-radius: 8px; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; transition: all 0.2s; }
.nav-btn svg { width: 16px; height: 16px; }
.nav-btn.active { background: var(--surface); border-color: var(--border-strong); color: var(--accent); }
.nav-btn .label { display: none; }
@media (min-width: 480px) { .nav-btn .label { display: inline; } }

main { padding: 24px 16px 120px; max-width: 640px; margin: 0 auto; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; margin-bottom: 16px; }
.card.p { padding: 20px; }
.label-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); font-weight: 600; }
.flex { display: flex; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.ml-auto { margin-left: auto; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.text-dim { color: var(--text-dim); }
.text-muted { color: var(--text-muted); }
.accent { color: var(--accent); }
.week-head { font-size: 22px; font-weight: 600; margin-top: 4px; }
.week-head .goal { color: var(--text-dim); font-size: 17px; font-weight: 500; }
.progress { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; margin-top: 12px; }
.progress-bar { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.5s ease; }
.goal-reached { display: flex; align-items: center; gap: 6px; color: var(--accent); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.pace-line { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; }
.pace-icon { flex-shrink: 0; font-size: 14px; line-height: 1.4; }
.pace-text { flex: 1; line-height: 1.4; }
.pace-text b { font-weight: 700; }
.pace-ok { color: var(--sage); }
.pace-late { color: var(--accent-dark); }
.pace-detail { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; }

input[type="date"], input[type="number"], input[type="text"], input[type="password"], input[type="email"] {
  width: 100%; max-width: 100%; background: white; border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 8px; transition: border-color 0.2s;
  -webkit-appearance: none; appearance: none; display: block;
  font-family: inherit; font-size: 15px;
}
input[type="date"] { min-height: 44px; /* iOS fix pour hauteur du date picker */ }
input[type="date"]:focus, input[type="number"]:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus { border-color: var(--accent); }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }

.cat-header { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.cat-header h3 { font-family: 'Fraunces', serif; font-weight: 400; font-size: 24px; }
.cat-header .plus { margin-left: auto; color: var(--accent); font-size: 17px; font-weight: 600; }
.items-list { padding: 12px; }
.item-row { display: flex; align-items: center; gap: 12px; padding: 12px; background: #faf4e9; border: 1px solid var(--border); border-radius: 10px; user-select: none; transition: all 0.15s; margin-bottom: 6px; cursor: pointer; }
.item-row:last-child { margin-bottom: 0; }
.item-row:hover { background: #f0e5d1; }
.item-row.active { background: var(--sage-light); border-color: var(--sage); }
.check { width: 20px; height: 20px; border: 2px solid var(--border-strong); background: transparent; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; }
.item-row.active .check { background: var(--sage); border-color: var(--sage); }
.check svg { width: 14px; height: 14px; color: white; display: none; }
.item-row.active .check svg { display: block; }
.item-name { flex: 1; font-size: 15px; }
.item-pts { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.item-row.active .item-pts { color: var(--accent-dark); }
.item-pts.neg { color: #b85450; }
.item-row.active .item-pts.neg { color: #963f3c; }
.chip.neg { background: #fbe9e7; color: #963f3c; }
.chip.neg .n { color: #963f3c; }

.save-bar { position: sticky; bottom: 12px; background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); border: 1px solid var(--border-strong); border-radius: 16px; padding: 14px; display: flex; align-items: center; gap: 16px; box-shadow: 0 10px 30px -10px rgba(58,46,36,0.2); margin-top: 16px; }
.save-btn { margin-left: auto; background: var(--accent); color: white; border: 0; padding: 12px 20px; border-radius: 10px; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; transition: background 0.2s; }
.save-btn:hover:not(:disabled) { background: var(--accent-dark); }
.save-btn svg { width: 16px; height: 16px; }
.save-btn:disabled { background: var(--border); color: var(--text-dim); cursor: not-allowed; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.kpi-card .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); font-weight: 600; margin-bottom: 8px; }
.kpi-card .val { font-size: 28px; font-weight: 700; color: var(--accent); }
.kpi-card .sublbl { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-style: italic; }

.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; margin-bottom: 16px; }
.chart-title { font-family: 'Fraunces', serif; font-weight: 400; font-size: 22px; margin-bottom: 16px; }
.bars-wrap { position: relative; }
.bars { display: flex; align-items: stretch; gap: 2px; height: 160px; margin-bottom: 8px; overflow-x: auto; padding-bottom: 4px; position: relative; }
.bar-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 14px; flex: 1; height: 100%; gap: 4px; }
.bar-inner { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; flex: 1; min-height: 0; }
.bar { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; transition: height 0.4s; min-height: 2px; }
.bar.zero { background: var(--border); min-height: 2px; opacity: 0.4; }
/* Graphique défilant : chaque barre garde une largeur fixe, le contenu
   déborde et se fait défiler horizontalement. */
.bars.defilant { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.bars.defilant .bar-col { flex: 0 0 30px; min-width: 30px; scroll-snap-align: end; }
.bars.defilant::-webkit-scrollbar { height: 4px; }
.bars.defilant::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.bar.sage { background: var(--sage); }
.bar-lbl { font-size: 9px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }
.goal-line { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--sage); pointer-events: none; }
.goal-line .goal-tag { position: absolute; right: 2px; top: -15px; font-size: 10px; color: var(--sage); background: var(--surface); padding: 1px 5px; border-radius: 4px; font-weight: 600; }
.topitem { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.topitem-name { font-size: 14px; min-width: 110px; }
.topitem-bar-wrap { flex: 1; height: 10px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.topitem-bar { height: 100%; background: var(--accent); border-radius: 999px; }
.topitem-count { font-size: 13px; font-weight: 600; color: var(--accent); min-width: 30px; text-align: right; }

.history-entry { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 12px; }
.history-head { display: flex; align-items: center; margin-bottom: 12px; }
.history-note { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 13px; color: var(--text-muted); font-style: italic; display: flex; align-items: flex-start; gap: 7px; }
.history-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.history-date { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 400; }
.history-pts { margin-left: auto; font-size: 19px; font-weight: 700; color: var(--accent); }
.trash-btn { background: rgba(184,84,80,0.08); border: 1px solid rgba(184,84,80,0.25); color: var(--danger); padding: 8px; border-radius: 8px; margin-left: 10px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; cursor: pointer; }
.trash-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.trash-btn:hover { background: var(--danger); color: white; border-color: var(--danger); }
.chip { display: inline-block; font-size: 13px; padding: 4px 10px; border-radius: 999px; background: rgba(232,168,124,0.1); border: 1px solid rgba(232,168,124,0.4); margin: 3px; }
.chip .n { color: var(--accent); font-weight: 600; }

/* Settings */
.goal-input { width: 90px !important; font-size: 24px; font-weight: 700; text-align: center; }
.cat-admin { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.cat-admin-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg); }
.cat-admin-head input { background: transparent; border: 0; font-family: 'Fraunces', serif; font-weight: 400; font-size: 20px; color: var(--text); flex: 1; padding: 4px 8px; }
.cat-admin-head input:focus { background: var(--surface); border-radius: 4px; }
.cat-admin-head { cursor: pointer; }
.cat-admin-titre { font-family: 'Fraunces', serif; font-size: 20px; color: var(--text); padding: 4px 8px; }
.cat-admin-sous { font-size: 12px; font-style: italic; color: var(--text-muted); padding: 0 8px 4px; }
.cat-admin-head input { cursor: text; }
.cat-admin-head .chip-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cat-chevron { display: inline-flex; width: 13px; height: 13px; transition: transform .18s; }
.cat-chevron svg { width: 13px; height: 13px; }
.cat-chevron.ouvert { transform: rotate(180deg); }
.cat-admin-names { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cat-admin-names input { width: 100%; }
.cat-subtitle-input { font-family: 'Nunito Sans', sans-serif !important; font-size: 12px !important; font-style: italic; color: var(--text-muted) !important; }
.chip-btn { background: transparent; border: 1px solid var(--border-strong); color: var(--accent); padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.items-admin { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.item-admin-row { display: flex; align-items: center; gap: 8px; }
.item-admin-row input[type="text"] { flex: 1; font-size: 14px; padding: 8px 10px; }
.item-admin-row input[type="number"] { width: 60px; text-align: center; font-size: 14px; padding: 8px; }
.drag-handle { cursor: grab; color: var(--text-dim); padding: 4px; flex-shrink: 0; display: flex; align-items: center; touch-action: none; }
.drag-handle:active { cursor: grabbing; }
.drag-handle svg { width: 16px; height: 16px; pointer-events: none; }
.item-admin-row.dragging { opacity: 0.35; background: var(--accent-light); border-radius: 10px; }
.item-admin-row.drag-over { outline: 2px dashed var(--accent); border-radius: 10px; }
.add-item-btn { width: 100%; background: transparent; border: 1px dashed var(--border-strong); color: var(--accent); padding: 10px; border-radius: 8px; font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.row-btn { width: 100%; display: flex; align-items: center; gap: 12px; background: transparent; border: 1px solid var(--border); color: var(--text); padding: 12px; border-radius: 10px; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.row-btn svg { width: 16px; height: 16px; color: var(--accent); }
.row-btn.danger { color: var(--danger); }
.row-btn.danger svg { color: var(--danger); }

.empty { padding: 48px 20px; text-align: center; }
.empty svg { width: 40px; height: 40px; color: var(--text-dim); margin-bottom: 12px; }
.empty .t { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 400; }
.empty .s { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

/* Messagerie */
.chat-wrap { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; padding: 2px; }
.chat-empty { text-align: center; color: var(--text-muted); font-size: 14px; font-style: italic; padding: 24px 8px; }
.msg { max-width: 84%; padding: 11px 14px; border-radius: 14px; font-size: 16px; line-height: 1.45; text-align: left; overflow-wrap: anywhere; }
.msg-mine { align-self: flex-end; background: var(--accent); color: white; border-bottom-right-radius: 4px; }
.msg-theirs { align-self: flex-start; background: white; border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 4px; }
.msg-meta { font-size: 12.5px; opacity: 0.78; margin-top: 6px; display: flex; align-items: center; gap: 10px; }
.msg-del { background: none; border: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.msg-icone { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: -7px -6px -7px 0; padding: 7px; background: none; border: none; border-radius: 8px; color: inherit; opacity: 0.85; cursor: pointer; }
.msg-icone:hover, .msg-icone:focus-visible { opacity: 1; background: rgba(255,255,255,0.10); }
.msg-icone svg { width: 16px; height: 16px; display: block; }
.msg-edit-input { display: block; width: 100%; min-width: 220px; box-sizing: border-box; resize: none; font: inherit; line-height: 1.45; color: inherit; background: rgba(255,255,255,0.10); border: 1px solid currentColor; border-radius: 10px; padding: 8px 10px; }
.msg-etat { white-space: nowrap; opacity: 0.85; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 16px; }
.chat-input { flex: 1; background: white; border: 1px solid var(--border); border-radius: 12px; padding: 12px 13px; font-family: inherit; font-size: 16px; color: var(--text); resize: none; min-height: 46px; max-height: 140px; line-height: 1.4; }
.chat-input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.chat-send { background: var(--accent); color: white; border: none; border-radius: 999px; padding: 0 20px; min-height: 46px; cursor: pointer; font-family: 'Nunito Sans', system-ui, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .01em; flex-shrink: 0; }
.chat-send:disabled, .chat-input:disabled { opacity: 0.45; cursor: not-allowed; }
.nav-btn { position: relative; }
.nav-badge { position: absolute; top: 3px; left: 50%; margin-left: 6px; background: var(--danger); color: white; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

.hidden { display: none !important; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.fade { animation: fadeIn 0.3s ease-out; }

/* Intro modal */
.intro-backdrop { position: fixed; inset: 0; background: rgba(26,31,74,0.55); backdrop-filter: blur(3px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; animation: fadeIn 0.25s; }
.intro-modal { background: var(--surface); border-radius: 20px; max-width: 520px; width: 100%; padding: 32px 28px 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); position: relative; max-height: calc(100vh - 40px); overflow-y: auto; }
.intro-close { position: absolute; top: 14px; right: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; padding: 0; color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.intro-close:hover { background: var(--danger); color: white; border-color: var(--danger); }
.intro-close svg { width: 14px; height: 14px; }
.intro-logo { display: flex; justify-content: center; margin-bottom: 12px; }
.intro-logo img, .intro-logo svg { width: 72px; height: 72px; border-radius: 50%; }
.intro-title { font-family: 'Fraunces', serif; font-weight: 400; font-size: 28px; color: var(--accent); text-align: center; margin-bottom: 8px; letter-spacing: -0.01em; }
.intro-lead { color: var(--text-muted); font-size: 14px; text-align: center; margin: 0 0 24px; font-style: italic; line-height: 1.5; }
.intro-section { display: flex; gap: 14px; margin-bottom: 18px; align-items: flex-start; }
.intro-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: white; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; font-family: 'Fraunces', serif; }
.intro-section h3 { font-family: 'Fraunces', serif; font-weight: 400; font-size: 18px; color: var(--text); margin-bottom: 4px; }
.intro-section p { font-size: 14px; color: var(--text-muted); margin: 0; line-height: 1.55; }
.intro-section b { color: var(--accent); font-weight: 700; }

/* ====== CELEBRATION OVERLAY ====== */
.celebrate-overlay { position: fixed; inset: 0; z-index: 300; pointer-events: none; overflow: hidden; }
.celebrate-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5); background: var(--surface); border: 2px solid var(--accent); border-radius: 20px; padding: 28px 36px; box-shadow: 0 20px 60px rgba(30,36,120,0.4); text-align: center; opacity: 0; animation: celebratePop 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.celebrate-message.big { border-width: 3px; padding: 32px 44px; }
.celebrate-message.huge { border-width: 3px; padding: 36px 48px; background: linear-gradient(135deg, #fff 0%, var(--accent-light) 100%); }
.celebrate-title { font-family: 'Fraunces', serif; font-weight: 400; font-size: 34px; color: var(--accent); line-height: 1.15; margin-bottom: 6px; letter-spacing: -0.01em; }
.celebrate-message.big .celebrate-title { font-size: 40px; }
.celebrate-message.huge .celebrate-title { font-size: 46px; background: linear-gradient(135deg, var(--accent) 0%, #c06088 50%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.celebrate-sub { font-size: 15px; color: var(--text-muted); font-style: italic; }
.celebrate-emoji { font-size: 48px; line-height: 1; margin-bottom: 8px; display: block; animation: emojiBounce 0.6s ease-out infinite alternate; }
.celebrate-message.huge .celebrate-emoji { font-size: 64px; }

@keyframes celebratePop {
  0% { transform: translate(-50%, -50%) scale(0.3) rotate(-8deg); opacity: 0; }
  15% { transform: translate(-50%, -50%) scale(1.1) rotate(2deg); opacity: 1; }
  25% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  80% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.85) rotate(0deg); opacity: 0; }
}
@keyframes emojiBounce {
  from { transform: translateY(0) rotate(-5deg); }
  to { transform: translateY(-8px) rotate(5deg); }
}

/* Confetti (5-9 pts) */
.confetti { position: absolute; width: 10px; height: 14px; top: -20px; opacity: 0; animation: confettiFall linear forwards; }
@keyframes confettiFall {
  0% { opacity: 1; transform: translateY(-20px) rotate(0deg); }
  100% { opacity: 0; transform: translateY(105vh) rotate(720deg); }
}

/* Fireworks (10+ pts) */
.firework { position: absolute; width: 6px; height: 6px; border-radius: 50%; opacity: 0; }
.firework.particle { animation: fireworkExplode 1.2s ease-out forwards; }
@keyframes fireworkExplode {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}
.firework.trail { animation: fireworkRise 0.8s ease-out forwards; }
@keyframes fireworkRise {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(var(--rise)); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   VELVET NIGHT — refonte 2026-09-10 · v2 plus claire
   Le markup fonctionnel reste intact : Accueil, Messages,
   Stats, Journal et Réglages sont tous conservés.
   ========================================================= */
/* ============================================================
   Palette de la couche Velvet, en variables.
   Le thème rose est la référence ; bleu, neutre et noir et blanc en sont
   dérivés par rotation de teinte, ce qui garantit que chaque nuance —
   fonds, bordures, ombres, dégradés — suit le thème choisi. Généré par
   script : ne pas retoucher une valeur à la main, modifier la référence.
   ============================================================ */
:root {
  --c-040205-a760: rgba(4,2,5,0.76);
  --c-100912-a550: rgba(16,9,18,0.55);
  --c-151017: #151017;
  --c-171018: #171018;
  --c-171019: #171019;
  --c-18111a: #18111a;
  --c-1b111a: #1b111a;
  --c-1c121d: #1c121d;
  --c-1c121d-a980: rgba(28,18,29,0.98);
  --c-1c121e-a930: rgba(28,18,30,0.93);
  --c-1d131e: #1d131e;
  --c-1f1522-a980: rgba(31,21,34,0.98);
  --c-201520: #201520;
  --c-201622-a980: rgba(32,22,34,0.98);
  --c-221724-a950: rgba(34,23,36,0.95);
  --c-241925: #241925;
  --c-271b28: #271b28;
  --c-2a1c2b: #2a1c2b;
  --c-2a1c2b-a940: rgba(42,28,43,0.94);
  --c-2a1d2b-a950: rgba(42,29,43,0.95);
  --c-2a2029: #2a2029;
  --c-2d1f2d: #2d1f2d;
  --c-2d202d: #2d202d;
  --c-301d2c-a980: rgba(48,29,44,0.98);
  --c-302030-a970: rgba(48,32,48,0.97);
  --c-322131-a970: rgba(50,33,49,0.97);
  --c-332132: #332132;
  --c-34202d: #34202d;
  --c-352336: #352336;
  --c-352435: #352435;
  --c-382234-a980: rgba(56,34,52,0.98);
  --c-382638: #382638;
  --c-3b2d39: #3b2d39;
  --c-3d2939-a900: rgba(61,41,57,0.9);
  --c-3e2839-a780: rgba(62,40,57,0.78);
  --c-443341: #443341;
  --c-472e3f-a960: rgba(71,46,63,0.96);
  --c-48283d: #48283d;
  --c-4a3446: #4a3446;
  --c-4b3947: #4b3947;
  --c-502d41-a940: rgba(80,45,65,0.94);
  --c-6e3447: #6e3447;
  --c-71636d: #71636d;
  --c-7d6976: #7d6976;
  --c-7e3247-a120: rgba(126,50,71,0.12);
  --c-887381: #887381;
  --c-8b7884: #8b7884;
  --c-8e7986: #8e7986;
  --c-8f4053: #8f4053;
  --c-8f7a87: #8f7a87;
  --c-914859-a680: rgba(145,72,89,0.68);
  --c-9d4659: #9d4659;
  --c-9f3e52-a220: rgba(159,62,82,0.22);
  --c-9f8692: #9f8692;
  --c-9f8995: #9f8995;
  --c-a28d99: #a28d99;
  --c-a28e9b: #a28e9b;
  --c-a4475b: #a4475b;
  --c-a4485c: #a4485c;
  --c-a4495d: #a4495d;
  --c-a64b5e: #a64b5e;
  --c-a68e9a: #a68e9a;
  --c-a84b5e: #a84b5e;
  --c-a88f9b: #a88f9b;
  --c-a8919d: #a8919d;
  --c-a94156-a200: rgba(169,65,86,0.2);
  --c-a9475c: #a9475c;
  --c-a98d9a: #a98d9a;
  --c-aa4a65-a240: rgba(170,74,101,0.24);
  --c-ad939f: #ad939f;
  --c-b24d60-a250: rgba(178,77,96,0.25);
  --c-b3455b-a130: rgba(179,69,91,0.13);
  --c-b55265: #b55265;
  --c-b59aa7: #b59aa7;
  --c-b65367: #b65367;
  --c-b75568: #b75568;
  --c-bb5d69: #bb5d69;
  --c-bba4ae: #bba4ae;
  --c-bea6b0: #bea6b0;
  --c-bf4a60-a120: rgba(191,74,96,0.12);
  --c-c0465d-a080: rgba(192,70,93,0.08);
  --c-c0a6b1: #c0a6b1;
  --c-d25d6f-a180: rgba(210,93,111,0.18);
  --c-d3bec6: #d3bec6;
  --c-d4747e: #d4747e;
  --c-d4b8bf: #d4b8bf;
  --c-d7adbc-a540: rgba(215,173,188,0.54);
  --c-d7b6bf: #d7b6bf;
  --c-d86373-a070: rgba(216,99,115,0.07);
  --c-d8737f: #d8737f;
  --c-d8bbc3: #d8bbc3;
  --c-d8c4ca: #d8c4ca;
  --c-dd7984: #dd7984;
  --c-df7d87: #df7d87;
  --c-df7f88: #df7f88;
  --c-e0717e-a140: rgba(224,113,126,0.14);
  --c-e16e79: #e16e79;
  --c-e17d89-a140: rgba(225,125,137,0.14);
  --c-e18189: #e18189;
  --c-e56f7c: #e56f7c;
  --c-e7d6db: #e7d6db;
  --c-e7d7dc: #e7d7dc;
  --c-e88791: #e88791;
  --c-e88791-a070: rgba(232,135,145,0.07);
  --c-e88791-a075: rgba(232,135,145,0.075);
  --c-e88791-a080: rgba(232,135,145,0.08);
  --c-e88791-a090: rgba(232,135,145,0.09);
  --c-e88791-a100: rgba(232,135,145,0.1);
  --c-e88791-a110: rgba(232,135,145,0.11);
  --c-e88791-a120: rgba(232,135,145,0.12);
  --c-e88791-a140: rgba(232,135,145,0.14);
  --c-e88791-a150: rgba(232,135,145,0.15);
  --c-e88791-a160: rgba(232,135,145,0.16);
  --c-e88791-a180: rgba(232,135,145,0.18);
  --c-e88791-a200: rgba(232,135,145,0.2);
  --c-e88791-a220: rgba(232,135,145,0.22);
  --c-e88791-a270: rgba(232,135,145,0.27);
  --c-e88791-a300: rgba(232,135,145,0.3);
  --c-e88791-a340: rgba(232,135,145,0.34);
  --c-e98993: #e98993;
  --c-e98b8b: #e98b8b;
  --c-ead8dc: #ead8dc;
  --c-eadde1: #eadde1;
  --c-eb7480-a500: rgba(235,116,128,0.5);
  --c-eb9ea9-a240: rgba(235,158,169,0.24);
  --c-ec8c94: #ec8c94;
  --c-ecd9dd: #ecd9dd;
  --c-ed8c96: #ed8c96;
  --c-ed8d98: #ed8d98;
  --c-ed919a: #ed919a;
  --c-ed929c: #ed929c;
  --c-ed939c: #ed939c;
  --c-ed969f: #ed969f;
  --c-ee8c99-a340: rgba(238,140,153,0.34);
  --c-ee8e99-a140: rgba(238,142,153,0.14);
  --c-ee9197: #ee9197;
  --c-ee919b: #ee919b;
  --c-ee919d-a310: rgba(238,145,157,0.31);
  --c-ef929b: #ef929b;
  --c-ef96a1-a320: rgba(239,150,161,0.32);
  --c-ef9a9a: #ef9a9a;
  --c-efa0a8: #efa0a8;
  --c-f08b97-a210: rgba(240,139,151,0.21);
  --c-f097a1-a680: rgba(240,151,161,0.68);
  --c-f09a9a: #f09a9a;
  --c-f09b9b: #f09b9b;
  --c-f0a8b0: #f0a8b0;
  --c-f0d5d8: #f0d5d8;
  --c-f0d8dc: #f0d8dc;
  --c-f0d9db: #f0d9db;
  --c-f0dadd: #f0dadd;
  --c-f1959e: #f1959e;
  --c-f1a9b2-a460: rgba(241,169,178,0.46);
  --c-f1dadd: #f1dadd;
  --c-f2a0a5: #f2a0a5;
  --c-f2a0a7: #f2a0a7;
  --c-f2e8ea: #f2e8ea;
  --c-f3c9cc: #f3c9cc;
  --c-f48b97-a620: rgba(244,139,151,0.62);
  --c-f4d8da: #f4d8da;
  --c-f4e9eb: #f4e9eb;
  --c-f5d9d8: #f5d9d8;
  --c-f699a3-a700: rgba(246,153,163,0.7);
  --c-f6dfe0: #f6dfe0;
  --c-f7dfde: #f7dfde;
  --c-f7ecec: #f7ecec;
  --c-ffc0c5: #ffc0c5;
  --c-ffc4c7-a035: rgba(255,196,199,0.035);
  --c-ffc7ca-a030: rgba(255,199,202,0.03);
  --c-ffd0d2: #ffd0d2;
  --c-ffd5d8: #ffd5d8;
  --c-ffd7d9: #ffd7d9;
  --logo-fond: #171019;
  --logo-clair: #f2c7c7;
  --logo-fonce: #d36f7b;
}
html[data-theme="bleu"] {
  --c-040205-a760: rgba(3,5,9,0.76);
  --c-100912-a550: rgba(5,10,16,0.55);
  --c-151017: #070c14;
  --c-171018: #040811;
  --c-171019: #070d15;
  --c-18111a: #050a12;
  --c-1b111a: #050a12;
  --c-1c121d: #050a12;
  --c-1c121d-a980: rgba(5,10,18,0.98);
  --c-1c121e-a930: rgba(5,10,18,0.93);
  --c-1d131e: #080f18;
  --c-1f1522-a980: rgba(9,16,26,0.98);
  --c-201520: #08111f;
  --c-201622-a980: rgba(9,16,26,0.98);
  --c-221724-a950: rgba(10,17,28,0.95);
  --c-241925: #0b1627;
  --c-271b28: #0b131e;
  --c-2a1c2b: #0b1420;
  --c-2a1c2b-a940: rgba(11,20,32,0.94);
  --c-2a1d2b-a950: rgba(12,20,32,0.95);
  --c-2a2029: #0d1521;
  --c-2d1f2d: #101b2c;
  --c-2d202d: #07101c;
  --c-301d2c-a980: rgba(12,21,35,0.98);
  --c-302030-a970: rgba(13,22,36,0.97);
  --c-322131-a970: rgba(13,23,37,0.97);
  --c-332132: #0d1725;
  --c-34202d: #0d1726;
  --c-352336: #0e1827;
  --c-352435: #0e1827;
  --c-382234-a980: rgba(14,24,40,0.98);
  --c-382638: #0f1929;
  --c-3b2d39: #111c2c;
  --c-3d2939-a900: rgba(16,27,44,0.9);
  --c-3e2839-a780: rgba(16,27,44,0.78);
  --c-443341: #132032;
  --c-472e3f-a960: rgba(18,31,50,0.96);
  --c-48283d: #101d31;
  --c-4a3446: #142135;
  --c-4b3947: #152337;
  --c-502d41-a940: rgba(18,33,55,0.94);
  --c-6e3447: #1e59b2;
  --c-71636d: #748195;
  --c-7d6976: #7c889b;
  --c-7e3247-a120: rgba(63,130,247,0.08);
  --c-887381: #8691a1;
  --c-8b7884: #8994a4;
  --c-8e7986: #8b95a5;
  --c-8f4053: #2067d1;
  --c-8f7a87: #8c96a6;
  --c-914859-a680: rgba(32,106,216,0.68);
  --c-9d4659: #216dde;
  --c-9f3e52-a220: rgba(32,107,218,0.22);
  --c-9f8692: #99a1ae;
  --c-9f8995: #9aa3af;
  --c-a28d99: #7f8ca4;
  --c-a28e9b: #9ea6b2;
  --c-a4475b: #2570e0;
  --c-a4485c: #2670e0;
  --c-a4495d: #7db4ff;
  --c-a64b5e: #3478e5;
  --c-a68e9a: #a0a7b3;
  --c-a84b5e: #2a73e1;
  --c-a88f9b: #a1a9b4;
  --c-a8919d: #a2a9b5;
  --c-a94156-a200: rgba(37,111,224,0.2);
  --c-a9475c: #2872e1;
  --c-a98d9a: #a0a8b4;
  --c-aa4a65-a240: rgba(63,130,247,0.15);
  --c-ad939f: #a5acb7;
  --c-b24d60-a250: rgba(49,120,227,0.25);
  --c-b3455b-a130: rgba(45,117,226,0.13);
  --c-b55265: #357be4;
  --c-b59aa7: #acb2bc;
  --c-b65367: #5e9cfb;
  --c-b75568: #4388f0;
  --c-bb5d69: #2f65c7;
  --c-bba4ae: #b3b9c1;
  --c-bea6b0: #b5bbc3;
  --c-bf4a60-a120: rgba(63,130,247,0.14);
  --c-c0465d-a080: rgba(53,123,228,0.08);
  --c-c0a6b1: #b6bbc4;
  --c-d25d6f-a180: rgba(77,139,234,0.18);
  --c-d3bec6: #c9d3e3;
  --c-d4747e: #5c96ed;
  --c-d4b8bf: #86b2f4;
  --c-d7adbc-a540: rgba(129,175,243,0.54);
  --c-d7b6bf: #86b2f4;
  --c-d86373-a070: rgba(84,144,235,0.07);
  --c-d8737f: #5e97ed;
  --c-d8bbc3: #8ab5f5;
  --c-d8c4ca: #cdd1d6;
  --c-dd7984: #649cee;
  --c-df7d87: #5d98f7;
  --c-df7f88: #6aa6ff;
  --c-e0717e-a140: rgba(63,130,247,0.12);
  --c-e16e79: #6099ee;
  --c-e17d89-a140: rgba(120,172,255,0.10);
  --c-e18189: #6ca0f0;
  --c-e56f7c: #639bee;
  --c-e7d6db: #97bdf7;
  --c-e7d7dc: #97bdf7;
  --c-e88791: #3f82f7;
  --c-e88791-a070: rgba(116,166,241,0.07);
  --c-e88791-a075: rgba(116,166,241,0.075);
  --c-e88791-a080: rgba(116,166,241,0.08);
  --c-e88791-a090: rgba(116,166,241,0.09);
  --c-e88791-a100: rgba(116,166,241,0.1);
  --c-e88791-a110: rgba(116,166,241,0.11);
  --c-e88791-a120: rgba(63,130,247,0.15);
  --c-e88791-a140: rgba(116,166,241,0.14);
  --c-e88791-a150: rgba(116,166,241,0.15);
  --c-e88791-a160: rgba(116,166,241,0.16);
  --c-e88791-a180: rgba(116,166,241,0.18);
  --c-e88791-a200: rgba(116,166,241,0.2);
  --c-e88791-a220: rgba(116,166,241,0.22);
  --c-e88791-a270: rgba(116,166,241,0.27);
  --c-e88791-a300: rgba(116,166,241,0.3);
  --c-e88791-a340: rgba(116,166,241,0.34);
  --c-e98993: #76a7f2;
  --c-e98b8b: #77a8f2;
  --c-ead8dc: #97bdf7;
  --c-eadde1: #97bdf7;
  --c-eb7480-a500: rgba(106,159,239,0.5);
  --c-eb9ea9-a240: rgba(93,151,255,0.24);
  --c-ec8c94: #78acff;
  --c-ecd9dd: #97bdf7;
  --c-ed8c96: #7aaaf2;
  --c-ed8d98: #7aaaf2;
  --c-ed919a: #7dacf3;
  --c-ed929c: #7eadf3;
  --c-ed939c: #7eadf3;
  --c-ed969f: #80aef3;
  --c-ee8c99-a340: rgba(122,170,242,0.34);
  --c-ee8e99-a140: rgba(124,171,243,0.14);
  --c-ee9197: #7eadf3;
  --c-ee919b: #7eadf3;
  --c-ee919d-a310: rgba(126,173,243,0.31);
  --c-ef929b: #7fadf3;
  --c-ef96a1-a320: rgba(112,171,255,0.75);
  --c-ef9a9a: #84b1f4;
  --c-efa0a8: #88b3f4;
  --c-f08b97-a210: rgba(63,130,247,0.18);
  --c-f097a1-a680: rgba(112,171,255,0.75);
  --c-f09a9a: #85b1f4;
  --c-f09b9b: #85b2f4;
  --c-f0a8b0: #8db7f5;
  --c-f0d5d8: #97bdf7;
  --c-f0d8dc: #97bdf7;
  --c-f0d9db: #97bdf7;
  --c-f0dadd: #97bdf7;
  --c-f1959e: #82aff4;
  --c-f1a9b2-a460: rgba(112,171,255,0.75);
  --c-f1dadd: #97bdf7;
  --c-f2a0a5: #8ab4f5;
  --c-f2a0a7: #8ab4f5;
  --c-f2e8ea: #97bdf7;
  --c-f3c9cc: #97bdf7;
  --c-f48b97-a620: rgba(126,173,243,0.62);
  --c-f4d8da: #97bdf7;
  --c-f4e9eb: #97bdf7;
  --c-f5d9d8: #97bdf7;
  --c-f699a3-a700: rgba(136,179,244,0.7);
  --c-f6dfe0: #97bdf7;
  --c-f7dfde: #ffffff;
  --c-f7ecec: #ffffff;
  --c-ffc0c5: #97bdf7;
  --c-ffc4c7-a035: rgba(151,189,247,0.035);
  --c-ffc7ca-a030: rgba(151,189,247,0.03);
  --c-ffd0d2: #97bdf7;
  --c-ffd5d8: #97bdf7;
  --c-ffd7d9: #97bdf7;
  --logo-fond: #050a12;
  --logo-clair: #ffffff;
  --logo-fonce: #5d9cff;
}
html[data-theme="neutre"] {
  --c-040205-a760: rgba(3,9,6,0.76);
  --c-100912-a550: rgba(5,15,10,0.55);
  --c-151017: #08120d;
  --c-171018: #050c09;
  --c-171019: #08130e;
  --c-18111a: #06100c;
  --c-1b111a: #06100c;
  --c-1c121d: #06100c;
  --c-1c121d-a980: rgba(6,16,12,0.98);
  --c-1c121e-a930: rgba(6,16,12,0.93);
  --c-1d131e: #091610;
  --c-1f1522-a980: rgba(10,24,17,0.98);
  --c-201520: #0a1812;
  --c-201622-a980: rgba(10,24,17,0.98);
  --c-221724-a950: rgba(10,25,18,0.95);
  --c-241925: #102019;
  --c-271b28: #0c1c14;
  --c-2a1c2b: #0c1e15;
  --c-2a1c2b-a940: rgba(12,30,21,0.94);
  --c-2a1d2b-a950: rgba(12,30,21,0.95);
  --c-2a2029: #0d1e16;
  --c-2d1f2d: #14251c;
  --c-2d202d: #09140f;
  --c-301d2c-a980: rgba(12,32,23,0.98);
  --c-302030-a970: rgba(13,33,23,0.97);
  --c-322131-a970: rgba(14,34,24,0.97);
  --c-332132: #0e2218;
  --c-34202d: #0e2218;
  --c-352336: #0e241a;
  --c-352435: #0f241a;
  --c-382234-a980: rgba(14,37,26,0.98);
  --c-382638: #0f251b;
  --c-3b2d39: #12281d;
  --c-3d2939-a900: rgba(17,40,29,0.9);
  --c-3e2839-a780: rgba(16,41,29,0.78);
  --c-443341: #142e21;
  --c-472e3f-a960: rgba(19,46,33,0.96);
  --c-48283d: #112d1f;
  --c-4a3446: #143123;
  --c-4b3947: #163225;
  --c-502d41-a940: rgba(19,50,35,0.94);
  --c-6e3447: #2f7658;
  --c-71636d: #749183;
  --c-7d6976: #7c978a;
  --c-7e3247-a120: rgba(60,154,115,0.05);
  --c-887381: #859e92;
  --c-8b7884: #89a095;
  --c-8e7986: #8ba297;
  --c-8f4053: #358d6b;
  --c-8f7a87: #8ca297;
  --c-914859-a680: rgba(53,141,107,0.55);
  --c-9d4659: #3b9470;
  --c-9f3e52-a220: rgba(60,154,115,0.16);
  --c-9f8692: #99aca2;
  --c-9f8995: #9aada4;
  --c-a28d99: #82988b;
  --c-a28e9b: #9eafa7;
  --c-a4475b: #3c9a73;
  --c-a4485c: #3c9a73;
  --c-a4495d: #72b89a;
  --c-a64b5e: #3c9a73;
  --c-a68e9a: #9fb1a8;
  --c-a84b5e: #3f9d76;
  --c-a88f9b: #a1b2a9;
  --c-a8919d: #a2b2aa;
  --c-a94156-a200: rgba(55,145,105,0.14);
  --c-a9475c: #3e9b74;
  --c-a98d9a: #a0b1a9;
  --c-aa4a65-a240: rgba(55,145,105,0.08);
  --c-ad939f: #a5b5ad;
  --c-b24d60-a250: rgba(60,154,115,0.16);
  --c-b3455b-a130: rgba(60,154,115,0.08);
  --c-b55265: #48a77f;
  --c-b59aa7: #abbab3;
  --c-b65367: #62b78f;
  --c-b75568: #449c78;
  --c-bb5d69: #32775b;
  --c-bba4ae: #b2bfb9;
  --c-bea6b0: #b5c1bb;
  --c-bf4a60-a120: rgba(55,145,105,0.10);
  --c-c0465d-a080: rgba(55,145,105,0.05);
  --c-c0a6b1: #b6c2bc;
  --c-d25d6f-a180: rgba(55,145,105,0.12);
  --c-d3bec6: #c8d8cf;
  --c-d4747e: #5eae88;
  --c-d4b8bf: #b8d8c8;
  --c-d7adbc-a540: rgba(105,185,150,0.42);
  --c-d7b6bf: #b8d8c8;
  --c-d86373-a070: rgba(55,145,105,0.04);
  --c-d8737f: #5eae88;
  --c-d8bbc3: #b8d8c8;
  --c-d8c4ca: #cdd5d1;
  --c-dd7984: #61b38c;
  --c-df7d87: #5ea883;
  --c-df7f88: #62b78f;
  --c-e0717e-a140: rgba(55,145,105,0.07);
  --c-e16e79: #5eae88;
  --c-e17d89-a140: rgba(114,184,154,0.05);
  --c-e18189: #64b58e;
  --c-e56f7c: #4b9f79;
  --c-e7d6db: #dce9e2;
  --c-e7d7dc: #b8d8c8;
  --c-e88791: #3c9a73;
  --c-e88791-a070: rgba(60,154,115,0.04);
  --c-e88791-a075: rgba(60,154,115,0.05);
  --c-e88791-a080: rgba(60,154,115,0.05);
  --c-e88791-a090: rgba(60,154,115,0.06);
  --c-e88791-a100: rgba(60,154,115,0.07);
  --c-e88791-a110: rgba(60,154,115,0.08);
  --c-e88791-a120: rgba(60,154,115,0.10);
  --c-e88791-a140: rgba(60,154,115,0.10);
  --c-e88791-a150: rgba(60,154,115,0.10);
  --c-e88791-a160: rgba(60,154,115,0.11);
  --c-e88791-a180: rgba(60,154,115,0.12);
  --c-e88791-a200: rgba(60,154,115,0.14);
  --c-e88791-a220: rgba(60,154,115,0.16);
  --c-e88791-a270: rgba(60,154,115,0.18);
  --c-e88791-a300: rgba(60,154,115,0.20);
  --c-e88791-a340: rgba(60,154,115,0.22);
  --c-e98993: #72b89a;
  --c-e98b8b: #78bea4;
  --c-ead8dc: #dce9e2;
  --c-eadde1: #dce9e2;
  --c-eb7480-a500: rgba(55,145,105,0.28);
  --c-eb9ea9-a240: rgba(92,160,130,0.24);
  --c-ec8c94: #72b89a;
  --c-ecd9dd: #dce9e2;
  --c-ed8c96: #7fbfa5;
  --c-ed8d98: #7fbfa5;
  --c-ed919a: #7fbfa5;
  --c-ed929c: #7fbfa5;
  --c-ed939c: #7fbfa5;
  --c-ed969f: #7fbfa5;
  --c-ee8c99-a340: rgba(105,185,150,0.24);
  --c-ee8e99-a140: rgba(105,185,150,0.10);
  --c-ee9197: #7fbfa5;
  --c-ee919b: #7fbfa5;
  --c-ee919d-a310: rgba(105,185,150,0.22);
  --c-ef929b: #7fbfa5;
  --c-ef96a1-a320: rgba(105,185,150,0.62);
  --c-ef9a9a: #86c3aa;
  --c-efa0a8: #84c1a8;
  --c-f08b97-a210: rgba(55,145,105,0.16);
  --c-f097a1-a680: rgba(105,185,150,0.62);
  --c-f09a9a: #87c4ab;
  --c-f09b9b: #87c4ab;
  --c-f0a8b0: #92c7ac;
  --c-f0d5d8: #dce9e2;
  --c-f0d8dc: #dce9e2;
  --c-f0d9db: #dce9e2;
  --c-f0dadd: #dce9e2;
  --c-f1959e: #62b78f;
  --c-f1a9b2-a460: rgba(105,185,150,0.42);
  --c-f1dadd: #dce9e2;
  --c-f2a0a5: #72b89a;
  --c-f2a0a7: #72b89a;
  --c-f2e8ea: #dce9e2;
  --c-f3c9cc: #dce9e2;
  --c-f48b97-a620: rgba(105,185,150,0.38);
  --c-f4d8da: #dce9e2;
  --c-f4e9eb: #b8d8c8;
  --c-f5d9d8: #dce9e2;
  --c-f699a3-a700: rgba(105,185,150,0.58);
  --c-f6dfe0: #62b78f;
  --c-f7dfde: #ffffff;
  --c-f7ecec: #ffffff;
  --c-ffc0c5: #78bea4;
  --c-ffc4c7-a035: rgba(184,216,200,0.025);
  --c-ffc7ca-a030: rgba(184,216,200,0.02);
  --c-ffd0d2: #dce9e2;
  --c-ffd5d8: #dce9e2;
  --c-ffd7d9: #dce9e2;
  --logo-fond: #06100c;
  --logo-clair: #ffffff;
  --logo-fonce: #62b78f;
}
html[data-theme="noir"] {
  --c-040205-a760: rgba(3,3,3,0.76);
  --c-100912-a550: rgba(7,7,7,0.55);
  --c-151017: #0a0a0a;
  --c-171018: #020202;
  --c-171019: #0b0b0b;
  --c-18111a: #030303;
  --c-1b111a: #030303;
  --c-1c121d: #030303;
  --c-1c121d-a980: rgba(3,3,3,0.98);
  --c-1c121e-a930: rgba(3,3,3,0.93);
  --c-1d131e: #0c0c0c;
  --c-1f1522-a980: rgba(14,14,14,0.98);
  --c-201520: #050505;
  --c-201622-a980: rgba(14,14,14,0.98);
  --c-221724-a950: rgba(15,15,15,0.95);
  --c-241925: #101010;
  --c-271b28: #111111;
  --c-2a1c2b: #121212;
  --c-2a1c2b-a940: rgba(18,18,18,0.94);
  --c-2a1d2b-a950: rgba(18,18,18,0.95);
  --c-2a2029: #121212;
  --c-2d1f2d: #151515;
  --c-2d202d: #090909;
  --c-301d2c-a980: rgba(19,19,19,0.98);
  --c-302030-a970: rgba(20,20,20,0.97);
  --c-322131-a970: rgba(21,21,21,0.97);
  --c-332132: #151515;
  --c-34202d: #151515;
  --c-352336: #161616;
  --c-352435: #161616;
  --c-382234-a980: rgba(22,22,22,0.98);
  --c-382638: #171717;
  --c-3b2d39: #1a1a1a;
  --c-3d2939-a900: rgba(26,26,26,0.9);
  --c-3e2839-a780: rgba(26,26,26,0.78);
  --c-443341: #1e1e1e;
  --c-472e3f-a960: rgba(29,29,29,0.96);
  --c-48283d: #1c1c1c;
  --c-4a3446: #202020;
  --c-4b3947: #212121;
  --c-502d41-a940: rgba(32,32,32,0.94);
  --c-6e3447: #9b9b9b;
  --c-71636d: #7b7b7b;
  --c-7d6976: #838383;
  --c-7e3247-a120: rgba(255,255,255,0.03);
  --c-887381: #8c8c8c;
  --c-8b7884: #909090;
  --c-8e7986: #929292;
  --c-8f4053: #acacac;
  --c-8f7a87: #939393;
  --c-914859-a680: rgba(176,176,176,0.68);
  --c-9d4659: #b4b4b4;
  --c-9f3e52-a220: rgba(178,178,178,0.22);
  --c-9f8692: #9f9f9f;
  --c-9f8995: #a0a0a0;
  --c-a28d99: #858585;
  --c-a28e9b: #a4a4a4;
  --c-a4475b: #b7b7b7;
  --c-a4485c: #b7b7b7;
  --c-a4495d: #ffffff;
  --c-a64b5e: #ffffff;
  --c-a68e9a: #a6a6a6;
  --c-a84b5e: #bababa;
  --c-a88f9b: #a7a7a7;
  --c-a8919d: #a8a8a8;
  --c-a94156-a200: rgba(183,183,183,0.2);
  --c-a9475c: #b9b9b9;
  --c-a98d9a: #a6a6a6;
  --c-aa4a65-a240: rgba(255,255,255,0.04);
  --c-ad939f: #ababab;
  --c-b24d60-a250: rgba(191,191,191,0.25);
  --c-b3455b-a130: rgba(188,188,188,0.13);
  --c-b55265: #c2c2c2;
  --c-b59aa7: #b2b2b2;
  --c-b65367: #f2f2f2;
  --c-b75568: #f2f2f2;
  --c-bb5d69: #c6c9cd;
  --c-bba4ae: #b9b9b9;
  --c-bea6b0: #bbbbbb;
  --c-bf4a60-a120: rgba(255,255,255,0.08);
  --c-c0465d-a080: rgba(193,193,193,0.08);
  --c-c0a6b1: #bcbcbc;
  --c-d25d6f-a180: rgba(209,209,209,0.18);
  --c-d3bec6: #c4c4c4;
  --c-d4747e: #dbdbdb;
  --c-d4b8bf: #f5f5f5;
  --c-d7adbc-a540: rgba(242,242,242,0.54);
  --c-d7b6bf: #f5f5f5;
  --c-d86373-a070: rgba(214,214,214,0.07);
  --c-d8737f: #dcdcdc;
  --c-d8bbc3: #f7f7f7;
  --c-d8c4ca: #d4d4d4;
  --c-dd7984: #e0e0e0;
  --c-df7d87: #d5d7da;
  --c-df7f88: #c3c6ca;
  --c-e0717e-a140: rgba(255,255,255,0.04);
  --c-e16e79: #dddddd;
  --c-e17d89-a140: rgba(255,255,255,0.02);
  --c-e18189: #e5e5e5;
  --c-e56f7c: #dfdfdf;
  --c-e7d6db: #ffffff;
  --c-e7d7dc: #ffffff;
  --c-e88791: #ffffff;
  --c-e88791-a070: rgba(234,234,234,0.07);
  --c-e88791-a075: rgba(234,234,234,0.075);
  --c-e88791-a080: rgba(234,234,234,0.08);
  --c-e88791-a090: rgba(234,234,234,0.09);
  --c-e88791-a100: rgba(234,234,234,0.1);
  --c-e88791-a110: rgba(234,234,234,0.11);
  --c-e88791-a120: rgba(255,255,255,0.08);
  --c-e88791-a140: rgba(234,234,234,0.14);
  --c-e88791-a150: rgba(234,234,234,0.15);
  --c-e88791-a160: rgba(234,234,234,0.16);
  --c-e88791-a180: rgba(234,234,234,0.18);
  --c-e88791-a200: rgba(234,234,234,0.2);
  --c-e88791-a220: rgba(234,234,234,0.22);
  --c-e88791-a270: rgba(234,234,234,0.27);
  --c-e88791-a300: rgba(234,234,234,0.3);
  --c-e88791-a340: rgba(234,234,234,0.34);
  --c-e98993: #ebebeb;
  --c-e98b8b: #ebebeb;
  --c-ead8dc: #ffffff;
  --c-eadde1: #ffffff;
  --c-eb7480-a500: rgba(227,227,227,0.5);
  --c-eb9ea9-a240: rgba(255,255,255,0.24);
  --c-ec8c94: #e2e4e6;
  --c-ecd9dd: #ffffff;
  --c-ed8c96: #ededed;
  --c-ed8d98: #eeeeee;
  --c-ed919a: #efefef;
  --c-ed929c: #f0f0f0;
  --c-ed939c: #f0f0f0;
  --c-ed969f: #f1f1f1;
  --c-ee8c99-a340: rgba(238,238,238,0.34);
  --c-ee8e99-a140: rgba(238,238,238,0.14);
  --c-ee9197: #f0f0f0;
  --c-ee919b: #f0f0f0;
  --c-ee919d-a310: rgba(240,240,240,0.31);
  --c-ef929b: #f0f0f0;
  --c-ef96a1-a320: rgba(255,255,255,0.72);
  --c-ef9a9a: #f3f3f3;
  --c-efa0a8: #f6f6f6;
  --c-f08b97-a210: rgba(255,255,255,0.08);
  --c-f097a1-a680: rgba(255,255,255,0.72);
  --c-f09a9a: #f4f4f4;
  --c-f09b9b: #f4f4f4;
  --c-f0a8b0: #f9f9f9;
  --c-f0d5d8: #ffffff;
  --c-f0d8dc: #ffffff;
  --c-f0d9db: #ffffff;
  --c-f0dadd: #ffffff;
  --c-f1959e: #f2f2f2;
  --c-f1a9b2-a460: rgba(255,255,255,0.72);
  --c-f1dadd: #ffffff;
  --c-f2a0a5: #f7f7f7;
  --c-f2a0a7: #f7f7f7;
  --c-f2e8ea: #ffffff;
  --c-f3c9cc: #ffffff;
  --c-f48b97-a620: rgba(240,240,240,0.62);
  --c-f4d8da: #ffffff;
  --c-f4e9eb: #ffffff;
  --c-f5d9d8: #ffffff;
  --c-f699a3-a700: rgba(246,246,246,0.7);
  --c-f6dfe0: #ffffff;
  --c-f7dfde: #ffffff;
  --c-f7ecec: #ffffff;
  --c-ffc0c5: #ffffff;
  --c-ffc4c7-a035: rgba(255,255,255,0.035);
  --c-ffc7ca-a030: rgba(255,255,255,0.03);
  --c-ffd0d2: #ffffff;
  --c-ffd5d8: #ffffff;
  --c-ffd7d9: #ffffff;
  --logo-fond: #030303;
  --logo-clair: #ffffff;
  --logo-fonce: #c6c9cd;
}

html[data-theme] { background: var(--bg); }

/* Sélecteur de thème : quatre pastilles */
.themes { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-choix { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); min-width: 72px; color: var(--text-muted); font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.theme-choix.actif { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 1px var(--accent); }
.theme-pastille { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.12); }
.theme-choix input { position: absolute; opacity: 0; pointer-events: none; }

:root {
  --bg: var(--c-18111a);
  --surface: var(--c-241925);
  --surface-2: var(--c-2d1f2d);
  --border: var(--c-eb9ea9-a240);
  --border-strong: var(--c-f1a9b2-a460);
  --text: var(--c-f7ecec);
  --text-muted: var(--c-d3bec6);
  --text-dim: var(--c-a28d99);
  --accent: var(--c-e88791);
  --accent-dark: var(--c-bb5d69);
  --accent-light: var(--c-e88791-a120);
  --pink-soft: var(--c-34202d);
  --pink-deep: var(--c-d8737f);
  --sage: #a9b79a;
  --sage-light: rgba(169, 183, 154, .13);
  --sage-dark: #c0cfb3;
  --danger: #e27979;
}

html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
/* Mode « ajouté à l'écran d'accueil » : la page passe sous la barre d'état
   d'iOS. On réserve la hauteur exacte via les variables d'encoche. */
body { padding-bottom: env(safe-area-inset-bottom); }
/* Bandeau opaque derrière la barre d'état : sans lui, le contenu défile
   visiblement sous l'heure et la batterie en mode plein écran. */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top);
  background: var(--c-1c121d);
  z-index: 40;
  pointer-events: none;
}
/* Barre d'enregistrement et barre d'accueil de l'iPhone : la zone
   réservée en bas (34 px environ) est bien plus haute que le trait
   lui-même, qui n'occupe que les 13 px du bas. Ajouter 12 px au-dessus de
   toute la zone laissait un vide d'environ 46 px. On empiète donc sur la
   partie vide de la zone, en gardant le bouton au-dessus du trait ; hors
   iPhone (zone nulle), on garde un écart de 10 px. */
.save-bar { bottom: max(10px, calc(env(safe-area-inset-bottom) - 14px)) !important; }
/* Les écrans de connexion, de rattachement et de choix du lot n'ont ni
   en-tête ni navigation : ils doivent réserver eux-mêmes la hauteur de
   la barre d'état, sinon ils passent dessous. */
.auth-wrap { padding-top: calc(28px + env(safe-area-inset-top)) !important; }
header { padding-top: calc(11px + env(safe-area-inset-top)) !important; }
nav { top: env(safe-area-inset-top) !important; }
header .container, nav .inner, main, .container {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}
/* Empeche le zoom par double tape, sans bloquer le defilement. */
body, .item-row, .nav-btn, button, .card { touch-action: manipulation; }
html, body {
  background:
    radial-gradient(circle at 14% -8%, var(--c-aa4a65-a240), transparent 32%),
    radial-gradient(circle at 90% 8%, var(--c-e17d89-a140), transparent 24%),
    linear-gradient(180deg, var(--c-201520) 0%, var(--c-171018) 48%, var(--c-1b111a) 100%);
  color: var(--text);
}
body { font-size: 15px; line-height: 1.42; }
::selection { background: var(--c-e88791-a340); color: #fff; }

.container { max-width: 640px; padding: 0 12px; }

/* Connexion / rattachement */
.auth-wrap { padding: 28px 16px 18px; }
.auth-card h1 { color: var(--c-f5d9d8); text-shadow: 0 0 24px var(--c-e88791-a160); }
.auth-card .tag, .hint { color: var(--text-muted); }
.auth-tabs { background: var(--c-2a1c2b-a940); border-color: var(--border); }
.auth-tab { color: var(--text-muted); }
.auth-tab.active { background: linear-gradient(135deg,var(--c-8f4053),var(--c-d4747e)); color:#fff; box-shadow:0 5px 18px var(--c-b24d60-a250); }
.btn-primary { background: linear-gradient(135deg,var(--c-a4475b) 0%,var(--c-e18189) 100%); color:#fff; box-shadow:0 8px 22px var(--c-9f3e52-a220); border-radius:999px; font-family:'Nunito Sans',system-ui,sans-serif; font-weight:700; letter-spacing:.01em; }
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg,var(--c-b55265),var(--c-ee9197)); }
.btn-primary:disabled { background:var(--c-2a2029); color:var(--c-71636d); box-shadow:none; }
.link-btn { color:var(--c-efa0a8); }
.link-btn:hover { color:var(--c-ffd0d2); background:var(--c-e88791-a080); }
.auth-error { background:rgba(226,121,121,.09); border-color:rgba(226,121,121,.28); color:var(--c-f09b9b); }
.auth-success { background:rgba(169,183,154,.08); border-color:rgba(169,183,154,.25); color:#c8d6bb; }

/* En-tête : beaucoup plus compact que la maquette marketing */
header {
  padding: 11px 0 9px;
  border-bottom: 1px solid var(--c-e88791-a150);
  background:
    radial-gradient(circle at 82% 20%, var(--c-e0717e-a140), transparent 24%),
    linear-gradient(180deg, var(--c-301d2c-a980), var(--c-1c121d-a980));
  position: relative;
  overflow: hidden;
}
header::before {
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 18%,var(--c-ffc4c7-a035) 44%,transparent 68%);
  pointer-events:none;
}
header .container { position:relative; z-index:1; }
header .row { gap:9px; }
header h1 { color:var(--c-f7dfde); font-size:38px; line-height:.98; text-shadow:0 0 22px var(--c-e88791-a110); }
.brand-duo { color:var(--c-df7f88); }
header .subtitle { color:var(--c-d4b8bf); font-size:14px; margin-top:5px; }
header .space-badge { color:var(--c-f0a8b0); font-size:12.5px; font-weight:700; margin-top:7px; letter-spacing:.1em; }
/* Sur un petit écran, le nom du duo cède la place plutôt que d'écraser le titre. */
@media (max-width:420px) { header .space-badge { font-size:11.5px; letter-spacing:.06em; } }
/* Le nom de l'espace occupe la colonne centrale, entre le titre et le logo. */
.header-logo { background: transparent; border: 0; padding: 0; cursor: pointer; }
.menu-fond { position: fixed; inset: 0; z-index: 59; }
.menu-compte {
  position: fixed; top: 96px; right: 14px; z-index: 60;
  min-width: 216px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 6px; margin-top: 6px;
  box-shadow: 0 14px 34px rgba(0,0,0,.42);
}
.menu-tete { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.menu-nom { font-family: 'Fraunces', serif; font-size: 16px; color: var(--text); }
.menu-mail { font-size: 12px; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.menu-ligne {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 0; border-radius: 8px; padding: 10px 12px;
  color: var(--text-muted); font-size: 14px; text-align: left; cursor: pointer; text-decoration: none;
}
.menu-ligne:hover { background: var(--surface-2, rgba(255,255,255,.05)); color: var(--text); }
.menu-ligne.danger { color: var(--danger); }
.menu-ligne svg { width: 16px; height: 16px; flex-shrink: 0; }
header .container { position: relative; }
.header-espace { flex:1 1 auto; min-width:0; text-align:center; margin-top:0 !important; padding:0 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.header-logo img, .header-logo svg { width:58px; height:58px; box-shadow:0 0 0 1px var(--c-e88791-a220),0 0 24px var(--c-bf4a60-a120); }

/* Navigation : les 5 accès du fichier d'origine restent visibles */
nav {
  position:sticky; top:0; z-index:30;
  background:var(--c-1c121e-a930);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  border-bottom:1px solid var(--c-e88791-a150);
}
nav .inner { max-width:640px; margin:0 auto; padding:6px 8px; gap:4px; justify-content:space-between; }
.nav-btn {
  flex:1; min-width:0;
  flex-direction:column; justify-content:center;
  gap:2px; padding:6px 2px 5px;
  border:1px solid transparent;
  border-radius:16px;
  color:var(--c-a28e9b);
  font-size:11.5px; line-height:1.15;
  font-weight:600;
}
.nav-btn svg { width:17px; height:17px; }
.nav-btn .label { display:block !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.nav-btn.active {
  color:var(--c-ffd7d9);
  border-color:var(--c-ef96a1-a320);
  background:radial-gradient(circle at 50% 25%,var(--c-f08b97-a210),var(--c-7e3247-a120) 55%,transparent 80%);
  box-shadow:inset 0 0 18px var(--c-e88791-a070),0 0 18px var(--c-c0465d-a080);
}
.nav-badge { background:var(--c-e16e79); color:#fff; box-shadow:0 0 0 2px var(--c-1d131e); }

main { padding:11px 8px 96px; max-width:640px; }
.home-stack { padding:0 4px; }

/* Surfaces verre/velours communes */
.card, .kpi-card, .chart-card, .history-entry, .cat-admin {
  background:linear-gradient(145deg,var(--c-322131-a970),var(--c-201622-a980));
  border-color:var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 28px rgba(0,0,0,.16);
}
.card { border-radius:16px; margin-bottom:10px; }
.card.p { padding:13px 14px; }
.label-eyebrow { color:var(--c-a98d9a); font-size:11px; letter-spacing:.1em; }

/* Bloc hebdomadaire façon écran de la maquette, sans gros pavé de bienvenue */
.progress-card {
  position:relative; overflow:hidden;
  border-color:var(--c-ee8c99-a340);
  background:
    radial-gradient(circle at 88% 35%,var(--c-b3455b-a130),transparent 32%),
    linear-gradient(145deg,var(--c-382234-a980),var(--c-1f1522-a980));
}
.progress-card::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg,transparent 34%,var(--c-ffc7ca-a030) 46%,transparent 61%);
}
.week-head { font-family:'Fraunces',Georgia,serif; font-size:28px; font-weight:400; margin-top:1px; line-height:1.05; }
.week-head .accent { color:var(--c-f6dfe0); }
.week-head .goal { color:var(--c-c0a6b1); font-size:18px; font-weight:400; }
.goal-target, .goal-reached { color:var(--c-e98993); }
.goal-target svg, .goal-reached svg { width:20px; height:20px; }
.goal-reached { font-size:9px; }
.progress { height:7px; background:var(--c-4a3446); margin-top:9px; box-shadow:inset 0 1px 3px rgba(0,0,0,.26); }
.progress-bar { background:linear-gradient(90deg,var(--c-e56f7c),var(--c-f2a0a5)); box-shadow:0 0 12px var(--c-eb7480-a500); }
.pace-line { margin-top:10px; padding-top:10px; border-color:var(--c-e88791-a150); font-size:12px; }
.pace-icon { font-size:13px; }
.pace-ok { color:#b4c3a5; }
.pace-late { color:var(--c-efa0a8); }
.pace-detail { color:var(--c-a8919d); font-size:10.5px; }

/* Date en une seule ligne */
.date-card { display:flex; align-items:center; gap:10px; padding:9px 10px !important; }
.date-label { min-width:72px; display:flex; align-items:center; gap:7px; color:var(--c-d7b6bf); font-size:13.5px; }
.date-label svg { width:17px; height:17px; color:var(--c-e88791); }
.date-card input[type="date"] { flex:1; min-height:38px; cursor:pointer; position:relative; z-index:2; }
.date-card { cursor:pointer; }
.date-label { pointer-events:none; }

input[type="date"], input[type="number"], input[type="text"], input[type="password"], input[type="email"], select, textarea {
  background:var(--c-2d202d) !important;
  border-color:var(--c-e88791-a200) !important;
  color:var(--c-f2e8ea) !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.20);
}
input::placeholder, textarea::placeholder { color:var(--c-7d6976) !important; }
input:focus, select:focus, textarea:focus { border-color:var(--c-f097a1-a680) !important; box-shadow:0 0 0 2px var(--c-e88791-a100) !important; }
input[type="date"] { padding:7px 10px; border-radius:10px; font-size:13px; cursor:pointer; }
input[type="date"]::-webkit-calendar-picker-indicator { filter:invert(85%) sepia(10%) saturate(900%) hue-rotate(300deg); opacity:.8; }

/* Catégories et activités */
.activity-card { overflow:hidden; }
.cat-header { padding:10px 12px 9px; border-color:var(--c-e88791-a140); align-items:flex-start; }
.cat-title-wrap { min-width:0; }
.cat-header h3 { color:var(--c-f1dadd); font-size:24px; line-height:1.1; letter-spacing:-.01em; }
.cat-subtitle { margin-top:3px; color:var(--c-a88f9b); font-family:'Fraunces',Georgia,serif; font-size:12.5px; font-style:italic; }
.cat-header .plus { color:var(--c-ed8d98); font-size:16px; font-weight:600; padding-top:2px; }
.items-list { padding:7px 9px 8px; }
.item-row {
  gap:10px; padding:8px 11px;
  min-height:42px;
  margin-bottom:5px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--c-3d2939-a900),var(--c-2a1d2b-a950));
  border-color:var(--c-e88791-a150);
  color:var(--c-f4e9eb);
}
.item-row:hover { background:linear-gradient(135deg,var(--c-472e3f-a960),var(--c-302030-a970)); }
.item-row.active {
  background:linear-gradient(135deg,var(--c-914859-a680),var(--c-502d41-a940));
  border-color:var(--c-f699a3-a700);
  box-shadow:inset 0 0 18px var(--c-e88791-a080),0 0 13px var(--c-d86373-a070);
}
.item-name { font-size:16.5px; font-weight:500; min-width:0; line-height:1.3; }
.item-pts { font-size:13.5px; color:var(--c-b59aa7); font-weight:600; white-space:nowrap; }
.item-row.active .item-pts { color:var(--c-ffd5d8); }
.item-pts.neg, .item-row.active .item-pts.neg { color:var(--c-f09a9a); }
.selection-dot {
  width:18px; height:18px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--c-d7adbc-a540);
  box-shadow:inset 0 0 0 3px var(--c-100912-a550);
}
.item-row.active .selection-dot {
  border-color:var(--c-ffc0c5);
  background:var(--c-f1959e);
  box-shadow:inset 0 0 0 4px var(--c-6e3447),0 0 0 3px var(--c-ee8e99-a140),0 0 13px var(--c-f48b97-a620);
}

/* Barre Enregistrer */
.save-bar {
  bottom:7px; margin-top:10px; padding:9px 10px;
  border-radius:17px;
  background:var(--c-221724-a950);
  border-color:var(--c-ee919d-a310);
  box-shadow:0 14px 34px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.025);
}
.save-total-value { font-family:'Fraunces',Georgia,serif; color:var(--c-f4d8da); font-size:22px; line-height:1.05; }
.save-btn {
  padding:10px 17px; border-radius:999px;
  background:linear-gradient(135deg,var(--c-a64b5e) 0%,var(--c-df7d87) 52%,var(--c-a4495d) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 6px 20px var(--c-a94156-a200);
  font-family:'Nunito Sans',system-ui,sans-serif; font-weight:700; font-size:14.5px; letter-spacing:.01em;
}
.save-btn:hover:not(:disabled) { background:linear-gradient(135deg,var(--c-b75568),var(--c-ec8c94) 52%,var(--c-b65367) 100%); }
.save-btn:disabled { background:var(--c-3b2d39); color:var(--c-8b7884); box-shadow:none; }

/* Stats */
.grid-2 { gap:8px; margin-bottom:10px; }
.kpi-card { border-radius:14px; padding:12px; }
.kpi-card .lbl { color:var(--c-9f8692); font-size:9px; margin-bottom:4px; }
.kpi-card .val { color:var(--c-efa0a8); font-family:'Fraunces',serif; font-weight:400; font-size:26px; }
.kpi-card .sublbl { color:var(--c-a8919d); }
.chart-card { border-radius:14px; padding:14px; margin-bottom:10px; }
.chart-title { color:var(--c-f0d9db); font-size:20px; margin-bottom:10px; }
.bar { background:linear-gradient(180deg,var(--c-ef929b),var(--c-a9475c)); }
.bar.zero { background:var(--c-4b3947); }
.bar.sage { background:#9eae8f; }
.bar-lbl { color:var(--c-887381); }
.goal-line { border-color:#9eae8f; }
.goal-line .goal-tag { color:#b8c7aa; background:var(--c-171019); }
.topitem-name { color:var(--c-e7d6db); }
.topitem-bar-wrap { background:var(--c-443341); }
.topitem-bar { background:linear-gradient(90deg,var(--c-a9475c),var(--c-ed8c96)); }
.topitem-count { color:var(--c-ed939c); }

/* Journal */
.history-entry { border-radius:14px; padding:12px; margin-bottom:8px; }
.history-head { margin-bottom:8px; }
.history-date { color:var(--c-f0dadd); font-size:18px; }
.history-pts { color:var(--c-ed919a); font-size:18px; }
.history-note { border-color:var(--c-e88791-a180); color:var(--c-ad939f); }
.history-note svg { color:var(--c-e88791); }
.chip { background:var(--c-e88791-a075); border-color:var(--c-e88791-a220); color:var(--c-d8c4ca); }
.chip .n { color:var(--c-ee919b); }
.chip.neg { background:rgba(226,121,121,.08); color:var(--c-ef9a9a); }
.chip.neg .n { color:var(--c-ef9a9a); }
.trash-btn { background:rgba(226,121,121,.07); border-color:rgba(226,121,121,.22); color:var(--c-e98b8b); }

/* Réglages : conserver tous les sous-écrans / contrôles */
.cat-admin { border-radius:13px; overflow:hidden; margin-bottom:9px; }
.cat-admin-head { background:var(--c-3e2839-a780); padding:8px 9px; }
.cat-admin-head input { color:var(--c-f0d8dc) !important; background:transparent !important; box-shadow:none !important; font-size:18px; }
.cat-admin-titre { color:var(--c-f0d8dc); font-size:18px; }
.cat-admin-sous { color:var(--c-a88f9b); }
.cat-admin-head input:focus { background:var(--c-352336) !important; }
.items-admin { padding:9px; gap:6px; }
.item-admin-row { gap:6px; }
.drag-handle { color:var(--c-8f7a87); }
.item-admin-row.dragging { background:var(--c-e88791-a090); }
.item-admin-row.drag-over { outline-color:var(--c-e88791); }
.chip-btn, .add-item-btn { color:var(--c-ed969f); border-color:var(--c-e88791-a300); }
.add-item-btn { padding:8px; }
.row-btn { color:var(--c-e7d7dc); border-color:var(--c-e88791-a180); background:rgba(255,255,255,.015); padding:10px; margin-bottom:6px; }
.row-btn svg { color:var(--c-e88791); }
.goal-input { color:var(--c-f2a0a7) !important; }

/* Messages */
.chat-wrap { gap:8px; max-height:56vh; }
.chat-empty { color:var(--c-9f8995); }
.msg { padding:11px 13px; border-radius:14px; font-size:16px; line-height:1.4; }
.msg-mine { background:linear-gradient(135deg,var(--c-9d4659),var(--c-d8737f)); color:#fff; }
.msg-theirs { background:var(--c-352435); border-color:var(--c-e88791-a220); color:var(--c-eadde1); }
.chat-form { margin-top:11px; gap:7px; }
.chat-input { min-height:46px; padding:11px 12px; font-size:16px; }
.chat-send { min-height:40px; padding:0 14px; background:linear-gradient(135deg,var(--c-a84b5e),var(--c-dd7984)); color:#fff; font-size:14px; }

/* Modal d'aide et célébrations */
.intro-backdrop { background:var(--c-040205-a760); }
.intro-modal { background:var(--c-271b28); border:1px solid var(--c-e88791-a270); box-shadow:0 22px 65px rgba(0,0,0,.45); }
.intro-close { background:var(--c-382638); border-color:var(--c-e88791-a270); color:var(--c-d8bbc3); }
.intro-title { color:var(--c-f0d5d8); }
.intro-lead, .intro-section p { color:var(--c-bba4ae); }
.intro-num { background:linear-gradient(135deg,var(--c-a4485c),var(--c-df7d87)); }
.intro-section h3 { color:var(--c-ecd9dd); }
.intro-section b { color:var(--c-ed929c); }
.celebrate-message { background:var(--c-2a1c2b); border-color:var(--c-e88791); box-shadow:0 20px 60px rgba(0,0,0,.46),0 0 35px var(--c-d25d6f-a180); }
.celebrate-message.huge { background:linear-gradient(135deg,var(--c-332132),var(--c-48283d)); }
.celebrate-title { color:var(--c-f3c9cc); }
.celebrate-sub { color:var(--c-bea6b0); }

.empty { padding:34px 16px; }
.empty svg { color:var(--c-8e7986); }
.empty .t { color:var(--c-ead8dc); }
.empty .s { color:var(--c-a68e9a); }

@media (max-width:480px) {
  header h1 { font-size:27px; }
  header .subtitle { font-size:12px; }
  .header-logo img, .header-logo svg { width:52px; height:52px; }
  main { padding-left:6px; padding-right:6px; }
  .container { padding-left:8px; padding-right:8px; }
  .cat-header h3 { font-size:22px; }
  .item-row { padding:11px 10px; min-height:48px; }
  .item-name { font-size:16px; }
  .item-pts { font-size:13px; }
  .cat-subtitle { font-size:12px; }
  .nav-btn { font-size:11px; }
  .selection-dot { width:20px; height:20px; }
}

/* Consentements à l'inscription : trois cases, jamais cochées d'avance. */
.consentements { margin: 14px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.consentement, .auth-form label.consentement { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--text-muted); text-transform: none; letter-spacing: 0; font-weight: 400; cursor: pointer; }
.consentement input, .auth-form label.consentement input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--accent); }
.consentement a { color: var(--accent); }