/* ===========================================================
   Projet Asso — système « doux » (refonte, DECISIONS.md §5)
   Références : Parenting App (adhérent), Scholarly (bureau).
   Toujours une seule teinte client : --brand-hue.
   Les pastels forment une palette FIXE, sans signification :
   ils habillent les cartes, jamais l'action ni les états.
   =========================================================== */

:root{
  --brand-hue:285;

  --ground:      oklch(97.2% 0.006 var(--brand-hue));
  --surface:     oklch(100% 0 0);
  --surface-alt: oklch(96% 0.008 var(--brand-hue));
  --rule:        oklch(92% 0.01 var(--brand-hue));
  --ink:         oklch(23% 0.02 var(--brand-hue));
  --ink-muted:   oklch(46% 0.02 var(--brand-hue));

  --brand:       oklch(52% 0.16 var(--brand-hue));
  --brand-hover: oklch(45% 0.17 var(--brand-hue));
  --brand-soft:  oklch(93% 0.05 var(--brand-hue));
  --brand-ink:   oklch(98% 0.01 var(--brand-hue));
  --brand-fonce: oklch(36% 0.12 var(--brand-hue));

  /* pastels fixes — les mêmes pour toutes les associations */
  --rose:     oklch(91.5% 0.045 10);
  --bleu:     oklch(91% 0.045 235);
  --jaune:    oklch(94% 0.085 98);
  --lavande:  oklch(91.5% 0.045 295);
  --vert:     oklch(92.5% 0.05 160);
  --peche:    oklch(92% 0.05 55);

  /* états — indépendants de la marque, toujours glyphe + mot */
  --ok:oklch(52% 0.13 150);  --warn:oklch(62% 0.14 70);
  --due:oklch(54% 0.19 25);  --pending:oklch(58% 0.02 260);

  --e1:4px; --e2:8px; --e3:12px; --e4:16px;
  --e5:24px; --e6:32px; --e7:48px; --e8:64px;
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px;

  --ombre: 0 1px 2px oklch(20% 0.02 var(--brand-hue) / .04),
           0 6px 20px oklch(20% 0.02 var(--brand-hue) / .05);

  --police:"Lexend",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ground)}  /* jamais de blanc entre deux pages */

/* navigation sans flash : le navigateur garde la page affichée jusqu'à ce que la suivante
   soit prête, puis fond l'une dans l'autre (Chrome, Edge, Safari 18.2+ ; ignoré ailleurs) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:120ms}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
body{margin:0;background:var(--ground);color:var(--ink);
     font-family:var(--police);font-size:16px;line-height:1.5;
     font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit}

/* --- boutons : la marque est un aplat, en pilule --- */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;
        font-weight:600;font-size:.98rem;padding:13px 22px;min-height:50px;
        border:0;border-radius:999px;background:var(--brand);color:var(--brand-ink);cursor:pointer}
.bouton:hover{background:var(--brand-hover)}
.bouton:focus-visible,.pilule:focus-visible,.icone-bouton:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.pilule{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:500;
        padding:7px 14px;border-radius:999px;border:0;background:var(--surface);cursor:pointer;
        color:var(--ink);white-space:nowrap}
.pilule svg{width:14px;height:14px}
.icone-bouton{width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);
              background:var(--surface);display:grid;place-items:center;cursor:pointer;position:relative;flex:none}
.icone-bouton svg{width:20px;height:20px}
.icone-bouton .point{position:absolute;top:10px;right:11px;width:8px;height:8px;border-radius:50%;
                     background:var(--due);border:2px solid var(--surface)}

/* --- états : jamais d'aplat, toujours glyphe + mot --- */
.etat{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;font-weight:500;white-space:nowrap}
.etat .glyphe{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;
              border:1.5px solid currentColor;font-size:.6rem;font-weight:700;line-height:1;flex:none}
.e-ok{color:var(--ok)}       .e-ok .glyphe{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.e-warn{color:var(--warn)}   .e-warn .glyphe{background:linear-gradient(90deg,var(--warn) 50%,transparent 50%)}
.e-due{color:var(--due)}
.e-pending{color:var(--pending)}

.montant{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.muet{color:var(--ink-muted)}

/* avatar à initiales */
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
        font-weight:600;font-size:.95rem;color:var(--ink)}

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

/* ---------- navigation de relecture (hors maquette, masquée dans les captures) ---------- */
.outil{position:fixed;left:12px;top:12px;z-index:99;display:flex;gap:4px;
       background:oklch(20% 0 0 / .88);padding:5px;border-radius:999px;
       backdrop-filter:blur(6px);box-shadow:0 2px 12px oklch(0% 0 0 / .25)}
.outil button{font-size:.72rem;font-weight:600;height:26px;padding:0 9px;border-radius:999px;
              border:0;cursor:pointer;background:transparent;color:oklch(92% 0 0);white-space:nowrap}
.outil button.actif{background:oklch(95% 0 0);color:oklch(20% 0 0)}
.outil .titre{color:oklch(70% 0 0);font-size:.66rem;align-self:center;padding:0 6px 0 4px;letter-spacing:.04em}