/* ─────────────────────────────────────────────────────────────
   Design system Émile — CHARTE CLAIRE (refonte du 25/08/2026,
   alignée sur Emelia), portée en CSS natif pour rdv.asmoweb.fr.
   Source de vérité : repos/emile @ origin/main —
   frontend/app/globals.css (les valeurs) et tailwind.config.ts
   (le vocabulaire), plus components/ui/{Card,Button,Field,Badge}.

   Ce qui a changé par rapport à la charte sombre d'août :
   fond clair, accent corail (plus le mint), Jost comme police
   UNIQUE, cartes à fond plein + ombre quasi nulle (plus de
   dégradé), et surtout PLUS AUCUN libellé en mono capitales
   espacées — Emelia est en letter-spacing normal partout.
   ───────────────────────────────────────────────────────────── */

:root{
  /* fonds */
  --bg-page:#fafaff; --bg-panel:#ffffff; --bg-panel2:#f1f1f9; --bg-raised:#f1f5f9;
  /* bordures */
  --line-subtle:hsl(213 36% 95%); --line:#e2e8f0; --line-hover:hsl(213 27% 84%);
  /* texte, 7 niveaux décroissants */
  --t-primary:#333333; --t-secondary:hsl(215 19% 35%); --t-tertiary:hsl(216 18% 39%);
  --t-muted:#64748b; --t-subtle:hsl(217 16% 53%); --t-faint:hsl(217 17% 61%);
  --t-disabled:hsl(215 20% 76%);
  /* accents, nommés par rôle */
  --accent:#f07c5c; --accent-hover:hsl(13 70% 58%); --accent-ink:#ffffff;
  --accent-strong:hsl(13 65% 45%);
  --warning:#f5bc66; --warning-strong:hsl(33 70% 38%);
  --negative:#cc403e; --negative-strong:hsl(1 58% 45%);
  --positive:#33c758; --positive-strong:hsl(138 62% 32%);
  --info:#2b2f54;
  /* ombres : presque rien, et teintées pour le primaire */
  --shadow-card:0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-float:0 0 2px 0 rgb(0 0 0 / .1), 0 4px 12px -4px rgb(0 0 0 / .08);
  --shadow-accent:0 4px 6px -1px rgb(240 124 92 / .25), 0 2px 4px -2px rgb(240 124 92 / .25);
  --font-sans:"Jost",system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg-page); color:var(--t-primary);
  font:400 15px/1.55 var(--font-sans); -webkit-font-smoothing:antialiased;
  min-height:100vh; padding:24px 16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:9999px}
::-webkit-scrollbar-thumb:hover{background:var(--line-hover)}
::selection{background:rgb(240 124 92 / .18);color:var(--t-primary)}
a{color:var(--accent-strong);text-decoration:none}
a:hover{text-decoration:underline}

@keyframes emRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes emPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}

/* ── Carte : fond plein, bordure 1 px, ombre presque nulle ── */
.card{
  border:1px solid var(--line); border-radius:8px; background:var(--bg-panel);
  box-shadow:var(--shadow-card); overflow:hidden; animation:emRise .35s ease-out;
}

/* ── Marque ── */
.brand{display:flex;align-items:center;gap:9px}
.brand .dot{width:7px;height:7px;border-radius:9999px;background:var(--accent);
  animation:emPulse 2.4s ease-in-out infinite}
/* Ancien micro-libellé mono capitales : Emelia n'a ni mono, ni capitale forcée,
   ni letter-spacing. C'est devenu du texte normal, un cran plus lisible. */
.eyebrow{font-size:13px;font-weight:600;color:var(--t-muted)}

/* ── Badge ── */
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid;border-radius:9999px;
  padding:2px 8px;font-size:11px;font-weight:500;line-height:20px}
.badge.ok{border-color:rgb(51 199 88 / .30);background:rgb(51 199 88 / .10);color:var(--positive-strong)}
.badge.ko{border-color:rgb(204 64 62 / .25);background:rgb(204 64 62 / .10);color:var(--negative-strong)}
.badge.off{border-color:var(--line);background:var(--bg-raised);color:var(--t-tertiary)}
.badge.acc{border-color:rgb(240 124 92 / .25);background:rgb(240 124 92 / .10);color:var(--accent-strong)}

/* ── Boutons ──
   Le primaire d'Emelia est un dégradé corail → ambre → corail, pas un aplat. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 16px;border-radius:6px;font:500 14px/1 var(--font-sans);
  cursor:pointer;transition:all .15s ease-in-out;border:1px solid var(--accent);
  background:var(--accent);
    background-image:linear-gradient(to right,var(--accent),rgb(245 188 102 / .8),var(--accent));
  color:var(--accent-ink)}
.btn:hover{filter:brightness(.94);text-decoration:none}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
.btn.sec{border-color:var(--line);background:var(--bg-panel);color:var(--t-primary);
  box-shadow:var(--shadow-card)}
.btn.sec:hover{border-color:var(--line-hover);background:var(--bg-raised);filter:none}

.pagefoot{max-width:980px;margin:18px auto 0;text-align:center;font-size:13px;color:var(--t-muted)}
.pagefoot a{color:var(--t-muted);margin:0 8px}
.pagefoot a:hover{color:var(--t-primary);text-decoration:none}