[hidden] { display: none !important; }

/* Application MAGNET : sombre, une colonne, pensée pour le téléphone. Aucune animation continue. */
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --or: #d8b26a; --or-clair: #f3dcab; --bg: #000; --card: #111112; --ink: #f2f2ef; --ink-2: rgba(242, 242, 239, .66); --ink-3: rgba(242, 242, 239, .42); --line: rgba(242, 242, 239, .12); --serif: "Geist", system-ui, -apple-system, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100svh; background: var(--bg); color: var(--ink); font-family: "Geist", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
h1, p, ul { margin: 0; padding: 0; } ul { list-style: none; } a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }

.a-install { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 16px; background: #f2f2ef; color: #0b0b0a; }
.a-install[hidden] { display: none; }
.a-install__title { font-weight: 600; font-size: 14px; }
.a-install__text { grid-column: 1; font-size: 13px; opacity: .75; }
.a-install__btn { grid-row: 1 / span 2; grid-column: 2; border: 0; border-radius: 999px; padding: 10px 16px; background: #0b0b0a; color: #f2f2ef; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }

.a-app { width: min(560px, 100%); margin-inline: auto; padding: calc(16px + env(safe-area-inset-top)) 20px calc(32px + env(safe-area-inset-bottom)); }
.a-top { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.a-logo { font-weight: 600; letter-spacing: .3em; font-size: 13px; }
.a-state { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: var(--card); color: var(--ink-2); }

/* Verrouillée. */
.a-locked { position: relative; margin-top: 16px; min-height: calc(100svh - 120px); display: grid; }
.a-preview { grid-area: 1 / 1; padding: 24px; border-radius: 24px; background: var(--card); filter: blur(7px); opacity: .5; pointer-events: none; user-select: none; }
.a-preview__k { font-size: 13px; color: var(--ink-3); }
.a-preview__h { margin-top: 6px; font-family: var(--serif); font-size: 26px; }
.a-preview__row { margin-top: 18px; display: grid; gap: 8px; font-size: 13px; color: var(--ink-2); }
.a-preview__row b { height: 8px; border-radius: 999px; background: var(--ink); width: 70%; }
.a-preview__row:nth-of-type(3) b { width: 48%; } .a-preview__row:nth-of-type(4) b { width: 30%; }
.a-preview ul { margin-top: 24px; display: grid; gap: 14px; font-size: 15px; }
.a-lock { position: relative; z-index: 1; grid-area: 1 / 1; align-self: center; justify-self: center; width: min(420px, 100%); display: grid; justify-items: center; gap: 16px; text-align: center; padding: 32px 24px; border-radius: 28px; background: rgba(11, 11, 10, .82); border: 1px solid var(--line); }
.a-lock__icon { width: 48px; height: 40px; border-radius: 9px; border: 2px solid var(--ink); position: relative; margin-top: 22px; }
.a-lock__icon::before { content: ""; position: absolute; left: 50%; top: -24px; width: 26px; height: 24px; margin-left: -13px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 13px 13px 0 0; }
.a-lock__title { font-family: var(--serif); font-weight: 600; letter-spacing: -.03em; font-size: 28px; line-height: 1.1; }
.a-lock__text { font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 30ch; }
.a-btn { margin-top: 8px; display: inline-flex; justify-content: center; align-items: center; min-height: 54px; width: 100%; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 500; font-size: 16px; }
.a-btn:active { transform: scale(.98); }

/* Débloquée. */
.a-open { margin-top: 24px; display: grid; gap: 12px; }
.a-open[hidden] { display: none; }
.a-open__k { font-size: 13px; color: var(--ink-3); }
.a-open__title { font-family: var(--serif); font-weight: 600; letter-spacing: -.035em; font-size: 32px; line-height: 1.08; margin-bottom: 8px; }
.a-card { padding: 20px; border-radius: 20px; background: var(--card); }
.a-card__k { font-size: 13px; color: var(--ink-3); }
.a-card__date { margin-top: 8px; font-family: var(--serif); font-size: 24px; }
.a-card__link { display: inline-block; margin-top: 12px; font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; }
.a-card__empty { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.a-card--rdv { background: var(--ink); color: var(--bg); }
.a-card--rdv .a-card__k { color: rgba(11, 11, 10, .55); }
.a-card--rdv .a-card__link { color: rgba(11, 11, 10, .7); }

/* Les chiffres du mois et le journal, une fois l'espace ouvert avec la clé d'accès. */
.a-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.a-chiffres b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.a-chiffres span { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-2); }
.a-journal { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.a-journal li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 10px 12px; border-radius: 12px; background: #0b0b0b; }
.a-journal em { font-style: normal; color: var(--ink-3); }

/* Les abonnés sur les réseaux. */
.a-reseaux__total { margin-top: 10px; font-size: 26px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.a-reseaux { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.a-reseaux li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 10px 12px; border-radius: 12px; background: #0b0b0b; }
.a-reseaux em { font-style: normal; color: var(--ink-2); }

/* L'or MAGNET : les chiffres, les repères et le cadenas. */
.a-open__k, .a-card__k { color: var(--or); }
.a-chiffres b { background: linear-gradient(175deg, #fff 18%, var(--or-clair) 58%, var(--or) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.a-reseaux__total { color: var(--or-clair); }
.a-lock__icon, .a-lock__icon::before { border-color: var(--or); }
.a-preview__row b { background: linear-gradient(90deg, var(--or-clair), var(--or)); }
.a-state { color: var(--or); border: 1px solid rgba(216, 178, 106, .35); }


/* Corrections de lisibilité et de confort (test du 20/09). */
.a-card--rdv .a-card__k { color: rgba(11, 11, 10, .7); }          /* contraste 4,2 → ~6 */
.a-card__note { margin: 10px 0 0; font-size: 14px; color: rgba(11, 11, 10, .7); }
.a-card__link { display: inline-flex; align-items: center; min-height: 44px; }
.a-open__title, .a-journal li, .a-reseaux li { overflow-wrap: anywhere; }
.a-card__k, .a-open__k { font-size: 15px; }
.a-state { font-size: 13px; }
.a-chiffres span { font-size: 14px; }
.a-note { font-style: normal; margin-left: auto; color: var(--ink-3, rgba(242, 242, 239, .55)); }
.a-journal li, .a-reseaux li { display: flex; align-items: baseline; gap: 10px; }
.a-lock__hint { margin: 0 0 14px; font-size: 15px; color: rgba(242, 242, 239, .64); text-align: center; }
.a-install__plus-tard { background: none; border: 0; color: inherit; opacity: .7; font: inherit; min-height: 44px; padding: 0 10px; cursor: pointer; }

/* L'objectif du mois et la pente des six derniers mois. */
.a-card__objectif { margin: 6px 0 0; font-size: 18px; line-height: 1.35; }
.a-jauge { margin-top: 14px; height: 8px; border-radius: 999px; background: rgba(242, 242, 239, .14); overflow: hidden; }
.a-jauge i { display: block; height: 100%; width: calc(var(--part, 0) * 100%); border-radius: 999px; background: linear-gradient(90deg, #f3dcab, #d8b26a); }
.a-hist { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; align-items: end; height: 120px; }
.a-hist li { display: grid; gap: 6px; align-content: end; text-align: center; font-size: 12px; color: var(--ink-3, rgba(242, 242, 239, .55)); }
.a-hist li::before { content: ''; display: block; height: calc(12px + var(--part, 0) * 74px); border-radius: 8px; background: linear-gradient(180deg, #f3dcab, #8a6a22); }
.a-hist b { font-size: 14px; color: var(--ink, #f2f2ef); font-weight: 600; }

/* Un moyen de nous joindre, sur les deux écrans. */
.a-aide { margin: 26px 0 0; text-align: center; font-size: 14px; color: rgba(242, 242, 239, .6); }
.a-aide a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.a-aide--lock { margin: 0 0 16px; }

/* Les dates du journal et les évolutions ne se coupent plus en plein mot. */
.a-journal li .a-note, .a-reseaux li .a-note { white-space: nowrap; }
.a-reseaux__total { letter-spacing: normal; }