/* ═══════════════════════════════════════════════════════════════════════════
   L'ESPACE ABONNEMENT — mêmes jetons que `proTheme.ts`, verrouillés le 11/07.

   La typographie est celle du site — Fraunces et Inter, auto-hébergées. Un
   espace de compte et le site public doivent se ressembler, sinon on doute
   d'être au bon endroit au moment précis où l'on regarde son argent.
   ═════════════════════════════════════════════════════════════════════════ */

/* 🚨 LES POLICES DU SITE, AUTO-HEBERGEES. Pas de Google Fonts : la CSP de ces
   pages est `font-src 'self'` et les bloquerait silencieusement -- le texte
   tomberait en repli sans que rien ne le signale. Et sur une page ou quelqu'un
   regarde son abonnement, faire transiter son adresse IP par Google pour une
   police serait un transfert de donnees qu'on ne peut pas justifier.
   Memes fichiers que `nuit.css`, memes sous-ensembles, meme `swap`. */
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('/assets/fonts/fraunces-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('/assets/fonts/fraunces-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('/assets/fonts/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('/assets/fonts/inter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --page:   #F3F2EF;
  --sheet:  #FFFFFF;
  --sheet2: #FAF9F6;
  --ink:    #1B1A1E;
  --ink2:   #66645E;
  --ink3:   #9A968E;
  --line:   rgba(20,18,22,.08);
  --line2:  rgba(20,18,22,.14);
  --field:  #ECEBE7;
  --accent: #3A6B63;
  --danger: #B23A3A;
  --alerte: #8A6E32;

  --serif: 'Fraunces', Georgia, "Times New Roman", serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; background: var(--page); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 5px; }

.wrap { max-width: 940px; margin: 0 auto; padding: 0 20px calc(60px + env(safe-area-inset-bottom)); }

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.bandeau {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 20px 0 16px; border-bottom: 1px solid var(--line);
}
.marque { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.compte { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink3); }
.pastille-on { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }

h1 {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.015em;
  font-size: clamp(27px, 4vw, 38px); line-height: 1.1; margin: 28px 0 8px;
  text-wrap: balance; max-width: 22ch;
}
h2 { font-family: var(--serif); font-size: 18px; font-weight: 600; margin: 0 0 3px; }
.chapeau { font-size: 15px; color: var(--ink2); margin: 0 0 26px; max-width: 58ch; }
.sous  { font-size: 12.5px; color: var(--ink3); margin: 0 0 14px; }
.muet  { font-size: 13.5px; color: var(--ink2); margin: 0; }
/* Pas de `style=` en ligne dans le HTML : `style-src 'self'` les bloque, et le
   bloc s'afficherait sans sa mise en page sans qu'aucune erreur ne le dise. */
.attente { padding: 14vh 0; text-align: center; }
.centre { text-align: center; padding: 9vh 0 0; }
.centre h1 { margin: 20px auto 8px; }
.centre .chapeau { margin-left: auto; margin-right: auto; }

/* ── Blocs ───────────────────────────────────────────────────────────────── */
.deux { display: grid; gap: 18px; grid-template-columns: 1.05fr .95fr; align-items: start; }
@media (max-width: 720px) { .deux { grid-template-columns: 1fr; } }

.bloc { background: var(--sheet); border: 1px solid var(--line2); border-radius: 18px; padding: 20px 22px; }
.bloc.etroit { max-width: 420px; }
.bloc.plein { margin-top: 18px; }

/* ── L'état, en forme autant qu'en mots ──────────────────────────────────── */
.etat { display: flex; gap: 13px; align-items: flex-start; }
.etat-pastille { width: 10px; height: 10px; border-radius: 999px; margin-top: 7px; flex: 0 0 auto; background: var(--ink3); }
.etat-pastille.actif   { background: var(--accent); }
.etat-pastille.termine { background: var(--ink3); }
.etat-pastille.doute   { background: var(--alerte); }
.etat-titre  { font-family: var(--serif); font-size: 22px; font-weight: 600; margin: 0; }
.etat-detail { font-size: 13.5px; color: var(--ink2); margin: 3px 0 0; }

.faits { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.faits div { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; }
.faits dt { color: var(--ink2); }
.faits dd { margin: 0; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Actions ─────────────────────────────────────────────────────────────── */
.actions { display: grid; gap: 9px; margin-top: 18px; }
.cta, .lien-action {
  display: block; width: 100%; text-align: center; border: 0; border-radius: 13px;
  padding: 14px; font-family: var(--sans); font-size: 15px; font-weight: 700;
  background: var(--ink); color: var(--page); cursor: pointer; text-decoration: none;
}
.cta.etroit-auto { max-width: 320px; margin: 22px auto 0; }
.cta[disabled] { opacity: .5; cursor: default; }
.lien-action.second { background: transparent; color: var(--ink); border: 1px solid var(--line2); font-weight: 500; }

.retour {
  border: 1px solid var(--line2); background: transparent; color: var(--ink2);
  font-family: var(--sans); font-size: 13.5px; border-radius: 12px; padding: 11px 17px; cursor: pointer;
}
.barre-bas { margin-top: 22px; }

/* ── Formulaire ──────────────────────────────────────────────────────────── */
.champ { display: grid; gap: 6px; margin-bottom: 16px; }
.champ span { font-size: 12.5px; color: var(--ink2); }
.champ input {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--field); border: 1px solid transparent; border-radius: 12px; padding: 13px 14px;
}
.champ input:focus { border-color: var(--line2); outline: none; background: var(--sheet); }
.msg { font-size: 13px; margin: 12px 0 0; }
.msg.err { color: var(--danger); }
.msg.ok  { color: var(--accent); }
.legal { font-size: 11.5px; color: var(--ink3); margin: 14px 0 0; line-height: 1.55; }

/* ── Historique ──────────────────────────────────────────────────────────── */
.paiement {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.paiement:first-child { border-top: 0; }
.paiement .date { font-size: 13px; color: var(--ink2); }
.paiement .moyen { display: block; font-size: 11.5px; color: var(--ink3); }
.paiement .somme { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.etiquette {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
}
.etiquette.paye     { background: rgba(58,107,99,.12); color: var(--accent); }
.etiquette.attente  { background: var(--field); color: var(--ink2); }
.etiquette.refuse   { background: rgba(178,58,58,.10); color: var(--danger); }
.etiquette.doute    { background: rgba(138,110,50,.12); color: var(--alerte); }

.vide { font-size: 13.5px; color: var(--ink3); padding: 8px 0 4px; }

/* ── Documents ───────────────────────────────────────────────────────────── */
.liens { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.liens a { color: var(--ink); font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--line2); padding-bottom: 2px; }
.liens a:hover { border-color: var(--ink); }

/* ── Ronds d'état ────────────────────────────────────────────────────────── */
.rond { width: 54px; height: 54px; border-radius: 999px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.rond.ok { background: var(--accent); }
.rond.ko { background: rgba(178,58,58,.12); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── Thème sombre ────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --page:   #131216;
    --sheet:  #1C1B21;
    --sheet2: #232128;
    --ink:    #F1EFEA;
    --ink2:   #A8A49B;
    --ink3:   #77736B;
    --line:   rgba(241,239,234,.10);
    --line2:  rgba(241,239,234,.18);
    --field:  #26242B;
    --accent: #6FA79A;
    --danger: #E08A8A;
    --alerte: #D8BE8C;
  }
}