/* ResaHello — jetons de design, base et utilitaires */

:root{
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --r-card: 24px; --r-nested: 16px; --r-input: 12px; --pill: 9999px;
  --ease: cubic-bezier(.15,.5,.5,1); --ease-toast: cubic-bezier(.175,.885,.21,1.65);
  --d-xs: .1s; --d-sm: .2s; --d-md: .3s; --d-lg: .45s;
  --sh-1: 0 .125rem .1875rem rgba(0,0,0,.05);
  --sh-2: 0 .1875rem .5rem rgba(0,0,0,.1);
  --sh-3: 0 .1875rem 1.875rem rgba(0,0,0,.08);
  --sh-4: 0 1rem 4rem rgba(0,0,0,.12);
  --sh-pop: 0 1rem 3rem rgba(0,0,0,.16);
  --side-w: 108px;
  --btn-h: 2.5rem; --btn-h-lg: 3.25rem;
}
/* Couleurs : redéclarées sur chaque [data-theme] pour que les aperçus imbriqués suivent leur propre thème */
:root, [data-theme]{
  --bg:#e8ecf1; --surface:#f8f9fb; --surface-2:rgba(44,58,82,.06); --surface-3:rgba(44,58,82,.11);
  --text:#2c3a52; --text-2:#5b6880; --text-3:#9ba6b8; --line:rgba(44,58,82,.10);
  --ink:#264b95; --on-ink:#fff; --accent:#264b95; --accent-rgb:38 75 149; --accent-solid:#264b95;
  --hero:#264b95; --hero-glow:rgba(125,165,240,.55); --tip:#2c3a52; --glass:rgba(248,249,251,.88);
  --bad:#db2031; --bad-rgb:219 32 49; --ok:#00916d; --ok-rgb:0 145 109; --warn:#d37100; --warn-rgb:211 113 0;
  --teal:#00af85; --teal-rgb:0 175 133; --purple:#7952f6; --purple-rgb:121 82 246; --pink:#ed5b7b; --pink-rgb:237 91 123;
  --red:#f54c3e; --yellow:#f8c200; --orange:#ec7e00; --green:#09be67; --blue:#4275db; --magenta:#e950a4; --grey:#717173;
  --shimmer:rgba(25,28,31,.06); --on-shimmer:rgba(255,255,255,.5); --seg-bg:rgba(31,31,31,.04); --search-bg:rgba(31,31,31,.08); --overlay:rgba(0,0,0,.4);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme=light]){
  --bg:#10151d; --surface:#182029; --surface-2:rgba(226,232,240,.06); --surface-3:rgba(226,232,240,.11);
  --text:#e3e8ef; --text-2:#97a3b5; --text-3:#5d6a7d; --line:rgba(226,232,240,.08);
  --ink:#2f5bb3; --accent:#7aa0e6; --accent-rgb:122 160 230; --accent-solid:#2f5bb3;
  --hero:#1c2a44; --hero-glow:rgba(80,130,230,.45); --tip:#2a3850; --glass:rgba(24,32,41,.86);
  --bad:#ff5363; --bad-rgb:255 83 99; --ok:#1ac097; --ok-rgb:26 192 151; --warn:#ff9f0a; --warn-rgb:255 159 10;
  --teal:#13d1a3; --teal-rgb:19 209 163; --purple:#805cff; --purple-rgb:128 92 255; --pink:#ff5777; --pink-rgb:255 87 119;
  --red:#ff453a; --yellow:#ffd60a; --orange:#ff9f0a; --green:#30d158; --blue:#6fa0ff; --magenta:#ff50a4;
  --shimmer:rgba(255,255,255,.08); --seg-bg:rgba(255,255,255,.1); --search-bg:rgba(255,255,255,.14);
  color-scheme:dark;
} }
[data-theme=dark]{
  --bg:#10151d; --surface:#182029; --surface-2:rgba(226,232,240,.06); --surface-3:rgba(226,232,240,.11);
  --text:#e3e8ef; --text-2:#97a3b5; --text-3:#5d6a7d; --line:rgba(226,232,240,.08);
  --ink:#2f5bb3; --accent:#7aa0e6; --accent-rgb:122 160 230; --accent-solid:#2f5bb3;
  --hero:#1c2a44; --hero-glow:rgba(80,130,230,.45); --tip:#2a3850; --glass:rgba(24,32,41,.86);
  --bad:#ff5363; --bad-rgb:255 83 99; --ok:#1ac097; --ok-rgb:26 192 151; --warn:#ff9f0a; --warn-rgb:255 159 10;
  --teal:#13d1a3; --teal-rgb:19 209 163; --purple:#805cff; --purple-rgb:128 92 255; --pink:#ff5777; --pink-rgb:255 87 119;
  --red:#ff453a; --yellow:#ffd60a; --orange:#ff9f0a; --green:#30d158; --blue:#6fa0ff; --magenta:#ff50a4;
  --shimmer:rgba(255,255,255,.08); --seg-bg:rgba(255,255,255,.1); --search-bg:rgba(255,255,255,.14);
  color-scheme:dark;
}

/* Bascule Clair ↔ Nuit : révélation circulaire (View Transitions) ou fondu */
::view-transition-old(root), ::view-transition-new(root){ animation:none; mix-blend-mode:normal; }
.u-tA, .u-tA *, .u-tA *::before, .u-tA *::after{
  transition:background-color .35s var(--ease), color .35s var(--ease), fill .35s, stroke .35s, box-shadow .35s !important;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body{ margin:0; min-height:100%; }
html{ background:var(--bg); }
body{ background:var(--bg); color:var(--text); font-family:var(--font); font-size:.875rem; line-height:1.42857; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
button, input, select, textarea{ font:inherit; color:inherit; }
img, svg{ display:block; }
::selection{ background:rgb(var(--accent-rgb)/.25); }
:focus-visible{ outline:.125rem solid rgb(var(--accent-rgb)/.5); outline-offset:.125rem; }
input[type=search]{ -webkit-appearance:none; appearance:none; }
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration{ -webkit-appearance:none; display:none; }

/* Icônes Font Awesome : taille pilotée par --is */
.u-iC{ --is:17px; font-size:var(--is); width:1.25em; line-height:1; text-align:center; flex:none; display:inline-block; }
.u-iC.m-sM{ --is:13px; } .u-iC.m-lG{ --is:21px; }

/* ---------- Typographie ---------- */
.u-dS{ font-size:clamp(1.75rem,3vw,2.25rem); font-weight:700; line-height:1.15; letter-spacing:-.02em; margin:0; }
.u-h1{ font-size:1.5rem; font-weight:700; line-height:1.25; letter-spacing:-.01em; margin:0; }
.u-h2{ font-size:1.25rem; font-weight:700; line-height:1.4; margin:0; }
.u-h3{ font-size:1rem; font-weight:600; line-height:1.375; margin:0; }
.u-eB{ font-size:.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-2); }
.u-mT{ color:var(--text-2); } .u-fN{ color:var(--text-3); }
.u-sM{ font-size:.75rem; line-height:1.5; }
.u-sT{ font-weight:600; } .u-nM{ font-variant-numeric:tabular-nums; }
.u-bN{ font-size:2rem; font-weight:700; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.u-eL{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.u-nW{ white-space:nowrap; }
.u-lN{ color:var(--accent); font-weight:600; display:inline-flex; align-items:center; gap:4px; cursor:pointer; background:none; border:none; padding:0; }
.u-kB{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; background:var(--surface-2); border-radius:10px; padding:12px 14px; word-break:break-all; display:block; line-height:1.5; }

/* ---------- Mise en page ---------- */
.u-rW{ display:flex; align-items:center; gap:12px; min-width:0; }
.u-rW.m-wR{ flex-wrap:wrap; } .u-rW.m-tP{ align-items:flex-start; } .u-rW.m-bT{ justify-content:space-between; }
.u-cL{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.u-g4{ gap:4px; } .u-g8{ gap:8px; } .u-g1{ gap:12px; } .u1-g1{ gap:16px; } .u-g2{ gap:20px; } .u1-g2{ gap:24px; }
.u1-gR{ flex:1; min-width:0; } .u-nN{ flex:none; }
.u-gR{ display:grid; gap:16px; }
.u2-g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.u-g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.u1-g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.u-s2{ grid-column:span 2; }
@media (max-width:1100px){ .u1-g4, .u-g3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .u2-g2, .u-g3, .u1-g4{ grid-template-columns:minmax(0,1fr); } .u-s2{ grid-column:auto; } }
.u1-m8{ margin-top:8px; } .u-m1{ margin-top:16px; } .u-m2{ margin-top:24px; } .u-m8{ margin-bottom:8px; }
.s-hD{ display:none !important; }
.u-fI{ animation:k-fD var(--d-md) var(--ease); }
@keyframes k-fD{ from{ opacity:0; transform:translateY(6px); } }

/* ---------- Tons sémantiques ---------- */
.t-bL{ background:rgb(var(--accent-rgb)/.12) !important; color:var(--accent) !important; }
.t-gR{ background:rgb(var(--ok-rgb)/.12) !important; color:var(--ok) !important; }
.t-oR{ background:rgb(var(--warn-rgb)/.13) !important; color:var(--warn) !important; }
.t-rD{ background:rgb(var(--bad-rgb)/.1) !important; color:var(--bad) !important; }
.t-pR{ background:rgb(var(--purple-rgb)/.12) !important; color:var(--purple) !important; }
.t-pN{ background:rgb(var(--pink-rgb)/.12) !important; color:var(--pink) !important; }
.t-tL{ background:rgb(var(--teal-rgb)/.12) !important; color:var(--teal) !important; }
.t1-gR{ background:var(--surface-2) !important; color:var(--text-2) !important; }
.t-dR{ background:var(--ink) !important; color:var(--on-ink) !important; }
.t-bD{ color:var(--bad) !important; } .t-wR{ color:var(--warn) !important; } .t-oK{ color:var(--ok) !important; }