/* ==========================================================================
   Atrium Std — design tokens & composants (extraits de "UI UX - Atrium Std.fig")
   Base : Radix Themes (accent SCC personnalisé, gray neutre, radius "medium",
   scaling 100 %, police Roboto). Préfixe des classes : .at-
   Utilisable tel quel dans un projet Angular (styles.scss) ou autre.
   ========================================================================== */

:root {
  /* --- Accent SCC (Figma : Colors/Accent/Accent/1..12) --- */
  --accent-1: #fcfdfe;  --accent-2: #f6faff;  --accent-3: #ebf2ff;
  --accent-4: #dceaff;  --accent-5: #ccdfff;  --accent-6: #b5d2ff;
  --accent-7: #9cbfff;  --accent-8: #7aa5ff;  --accent-9: #0541dc;
  --accent-10: #002cc9; --accent-11: #2057dd; --accent-12: #132c65;
  --accent-a2: rgba(0, 114, 255, .04); --accent-a3: rgba(0, 90, 255, .08);
  --accent-a4: rgba(0, 102, 255, .14); --accent-a5: rgba(0, 95, 255, .20);
  --accent-a7: rgba(0, 91, 255, .39);  --accent-a8: rgba(0, 83, 255, .52);
  --accent-contrast: #ffffff;
  --accent-surface: rgba(0, 114, 255, .04);

  /* --- Gray neutre (Colors/Gray/1..12) --- */
  --gray-1: #fcfcfc; --gray-2: #f9f9f9; --gray-3: #f0f0f0; --gray-4: #e8e8e8;
  --gray-5: #e0e0e0; --gray-6: #d9d9d9; --gray-7: #cecece; --gray-8: #bbbbbb;
  --gray-9: #8d8d8d; --gray-10: #838383; --gray-11: #646464; --gray-12: #202020;
  --gray-a2: rgba(0,0,0,.02); --gray-a3: rgba(0,0,0,.06); --gray-a4: rgba(0,0,0,.09);
  --gray-a5: rgba(0,0,0,.12); --gray-a6: rgba(0,0,0,.15); --gray-a7: rgba(0,0,0,.19);
  --gray-a8: rgba(0,0,0,.27); --gray-a11: rgba(0,0,0,.61);

  /* --- Sémantiques (Radix green / amber / red) --- */
  --green-3: #e6f6eb; --green-6: #adddc0; --green-9: #30a46c; --green-11: #218358;
  --amber-3: #fff7c2; --amber-6: #f3d673; --amber-9: #ffc53d; --amber-11: #ab6400;
  --red-3: #feebec;   --red-6: #fdbdbe;   --red-9: #e5484d;   --red-11: #ce2c31;

  /* --- Surfaces (Tokens/Colors/*) --- */
  --color-background: #ffffff;
  --color-panel-solid: #ffffff;
  --color-panel-translucent: rgba(255,255,255,.8);
  --color-surface: rgba(255,255,255,.9);
  --color-overlay: rgba(0,0,0,.27);
  --color-text: var(--gray-12);
  --color-text-muted: var(--gray-11);
  --focus-ring: var(--accent-8);

  /* --- Radius (Radius/1..6, profil "Medium") --- */
  --radius-1: 3px; --radius-2: 4px; --radius-3: 6px;
  --radius-4: 8px; --radius-5: 12px; --radius-6: 16px; --radius-full: 9999px;

  /* --- Espacements (Spacing/1..9, scaling 100 %) --- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 64px;

  /* --- Typographie (Typography Text|Heading) --- */
  --font: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-size-1: 12px; --line-height-1: 16px; --letter-spacing-1: .04px;
  --font-size-2: 14px; --line-height-2: 20px;
  --font-size-3: 16px; --line-height-3: 24px;
  --font-size-4: 18px; --line-height-4: 26px;
  --font-size-5: 20px; --line-height-5: 28px;
  --font-size-6: 24px; --line-height-6: 30px;
  --font-size-7: 28px; --line-height-7: 36px;

  /* --- Hauteurs de contrôles (Tokens/Space/button-height-*) --- */
  --control-1: 24px; --control-2: 32px; --control-3: 40px; --control-4: 48px;

  /* --- Ombres (Radix shadow-4/5/6) --- */
  --shadow-2: 0 0 0 1px var(--gray-a3), 0 1px 2px rgba(0,0,0,.05);
  --shadow-5: 0 0 0 1px var(--gray-a3), 0 12px 60px rgba(0,0,0,.12), 0 12px 32px -16px rgba(0,0,0,.18);
  --shadow-6: 0 0 0 1px var(--gray-a3), 0 16px 64px rgba(0,0,0,.14), 0 16px 36px -20px rgba(0,0,0,.2);
}

/* ---------------------------------------------------------------- base ---- */
.at-root, .at-root * { box-sizing: border-box; }
.at-root [hidden] { display: none !important; }
.at-root {
  font-family: var(--font); font-size: var(--font-size-2); line-height: var(--line-height-2);
  color: var(--color-text); -webkit-font-smoothing: antialiased;
}
.at-heading-7 { font-size: var(--font-size-7); line-height: var(--line-height-7); font-weight: 700; letter-spacing: -.12px; margin: 0; }
.at-heading-6 { font-size: var(--font-size-6); line-height: var(--line-height-6); font-weight: 700; letter-spacing: -.1px; margin: 0; }
.at-heading-5 { font-size: var(--font-size-5); line-height: var(--line-height-5); font-weight: 700; letter-spacing: -.08px; margin: 0; }
.at-heading-3 { font-size: var(--font-size-3); line-height: var(--line-height-3); font-weight: 700; margin: 0; }
.at-text-1 { font-size: var(--font-size-1); line-height: var(--line-height-1); letter-spacing: var(--letter-spacing-1); }
.at-text-2 { font-size: var(--font-size-2); line-height: var(--line-height-2); }
.at-text-3 { font-size: var(--font-size-3); line-height: var(--line-height-3); }
.at-muted { color: var(--color-text-muted); }

:where(.at-root) :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* -------------------------------------------------------------- button ---- */
.at-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-2); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-2);
  font: 500 var(--font-size-2)/1 var(--font); cursor: pointer; white-space: nowrap;
  transition: background-color .12s, color .12s, box-shadow .12s;
}
.at-btn svg { width: 16px; height: 16px; flex: none; }
.at-btn--1 { height: var(--control-1); padding: 0 var(--space-2); font-size: var(--font-size-1); border-radius: var(--radius-1); gap: var(--space-1); }
.at-btn--3 { height: var(--control-3); padding: 0 var(--space-4); font-size: var(--font-size-3); border-radius: var(--radius-3); gap: var(--space-3); }
.at-btn--solid { background: var(--accent-9); color: var(--accent-contrast); }
.at-btn--solid:hover { background: var(--accent-10); }
.at-btn--soft { background: var(--accent-a3); color: var(--accent-11); }
.at-btn--soft:hover { background: var(--accent-a4); }
.at-btn--outline { background: transparent; color: var(--accent-11); box-shadow: inset 0 0 0 1px var(--accent-a8); }
.at-btn--outline:hover { background: var(--accent-a2); }
.at-btn--ghost { background: transparent; color: var(--accent-11); }
.at-btn--ghost:hover { background: var(--accent-a3); }
.at-btn--gray.at-btn--ghost { color: var(--gray-12); }
.at-btn--gray.at-btn--ghost:hover { background: var(--gray-a3); }
.at-btn[disabled] { background: var(--gray-a3); color: var(--gray-a8); box-shadow: none; cursor: not-allowed; }
.at-icon-btn { width: var(--control-2); padding: 0; }
.at-icon-btn.at-btn--1 { width: var(--control-1); }

/* ---------------------------------------------------------- text field ---- */
.at-field {
  display: flex; align-items: center; gap: var(--space-2);
  height: var(--control-2); padding: 0 var(--space-2);
  background: var(--color-surface); border-radius: var(--radius-2);
  box-shadow: inset 0 0 0 1px var(--gray-a7); color: var(--gray-12);
}
.at-field--3 { height: var(--control-3); padding: 0 var(--space-3); border-radius: var(--radius-3); font-size: var(--font-size-3); }
.at-field:focus-within { box-shadow: inset 0 0 0 1px var(--accent-8), 0 0 0 1px var(--accent-8); }
.at-field svg { width: 16px; height: 16px; color: var(--gray-a11); flex: none; }
.at-field input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none;
  font: inherit; color: inherit; padding: 0;
}
.at-field input::placeholder { color: var(--gray-a10, var(--gray-10)); }

/* -------------------------------------------------------------- select ---- */
.at-label { display: block; font-size: var(--font-size-1); line-height: var(--line-height-1); font-weight: 500; color: var(--gray-11); margin-bottom: var(--space-1); }
.at-select {
  appearance: none; -webkit-appearance: none; width: 100%;
  height: var(--control-2); padding: 0 calc(var(--space-3) + 16px) 0 var(--space-3);
  border: 0; border-radius: var(--radius-2); background-color: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--gray-a7); color: var(--gray-12);
  font: var(--font-size-2)/1 var(--font); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' viewBox='0 0 15 15'%3E%3Cpath fill='%23646464' fill-rule='evenodd' d='M3.135 6.158a.5.5 0 0 1 .707-.023L7.5 9.565l3.658-3.43a.5.5 0 0 1 .684.73l-4 3.75a.5.5 0 0 1-.684 0l-4-3.75a.5.5 0 0 1-.023-.707Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-2) center;
}
.at-select:hover { box-shadow: inset 0 0 0 1px var(--gray-a8); }
.at-select:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--accent-8), 0 0 0 1px var(--accent-8); }
.at-select.is-set { box-shadow: inset 0 0 0 1px var(--accent-a7); background-color: var(--accent-a2); color: var(--accent-12); }

/* ------------------------------------------------------------ checkbox ---- */
.at-check { display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; font-size: var(--font-size-2); line-height: var(--line-height-2); color: var(--gray-12); }
.at-check input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 2px 0 0;
  width: 16px; height: 16px; border-radius: var(--radius-1);
  background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--gray-a7); cursor: pointer;
  display: grid; place-content: center;
}
.at-check input::after {
  content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform .1s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath fill='white' fill-rule='evenodd' d='M11.467 3.727c.289.189.37.576.181.865l-4.25 6.5a.625.625 0 0 1-.944.12l-2.75-2.5a.625.625 0 0 1 .841-.925l2.208 2.007 3.849-5.886a.625.625 0 0 1 .865-.181Z' clip-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat;
}
.at-check input:checked { background: var(--accent-9); box-shadow: none; }
.at-check input:checked::after { transform: scale(1); }

/* -------------------------------------------------------------- slider ---- */
.at-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: none; cursor: pointer; --pct: 0%; }
.at-slider::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--accent-9) var(--pct), var(--gray-a4) var(--pct)); }
.at-slider::-moz-range-track { height: 6px; border-radius: var(--radius-full); background: var(--gray-a4); }
.at-slider::-moz-range-progress { height: 6px; border-radius: var(--radius-full); background: var(--accent-9); }
.at-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--gray-a6), 0 1px 3px rgba(0,0,0,.15); }
.at-slider::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--gray-a6), 0 1px 3px rgba(0,0,0,.15); }

/* --------------------------------------------------------------- badge ---- */
.at-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-2);
  font: 500 var(--font-size-1)/1 var(--font); letter-spacing: var(--letter-spacing-1); white-space: nowrap;
}
.at-badge svg { width: 12px; height: 12px; }
.at-badge--accent { background: var(--accent-a3); color: var(--accent-11); }
.at-badge--gray   { background: var(--gray-a3);   color: var(--gray-11); }
.at-badge--green  { background: var(--green-3);   color: var(--green-11); }
.at-badge--amber  { background: var(--amber-3);   color: var(--amber-11); }
.at-badge--red    { background: var(--red-3);     color: var(--red-11); }
.at-badge--outline { background: none; box-shadow: inset 0 0 0 1px currentColor; }

/* ---------------------------------------------------------------- card ---- */
.at-card { background: var(--color-panel-solid); border-radius: var(--radius-4); box-shadow: inset 0 0 0 1px var(--gray-a5); padding: var(--space-4); }
.at-card--interactive:hover { box-shadow: inset 0 0 0 1px var(--gray-a7); }

/* ----------------------------------------------------------- data list ---- */
.at-datalist { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--font-size-2); }
.at-datalist dt { color: var(--gray-11); }
.at-datalist dd { margin: 0; color: var(--gray-12); }

/* -------------------------------------------------------------- dialog ---- */
.at-overlay { position: fixed; inset: 0; background: var(--color-overlay); display: grid; place-items: start center; padding: 64px var(--space-4) var(--space-4); overflow-y: auto; z-index: 100; }
.at-dialog { width: min(720px, 100%); background: var(--color-panel-solid); border-radius: var(--radius-5); box-shadow: var(--shadow-6); padding: var(--space-5); position: relative; }
.at-dialog__close { position: absolute; top: var(--space-4); right: var(--space-4); }

/* ------------------------------------------------------------ progress ---- */
.at-meter { height: 4px; border-radius: var(--radius-full); background: var(--gray-a4); overflow: hidden; }
.at-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--accent-9); }
.at-meter--green > span { background: var(--green-9); }
.at-meter--amber > span { background: var(--amber-9); }
.at-meter--red > span { background: var(--red-9); }

/* ------------------------------------------------------------ separator --- */
.at-sep { height: 1px; background: var(--gray-a6); border: 0; margin: 0; }

/* ------------------------------------------------------------- skeleton --- */
.at-skeleton { border-radius: var(--radius-2); background: var(--gray-a3); animation: at-pulse 1s ease-in-out infinite alternate; }
@keyframes at-pulse { from { opacity: 1; } to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .at-skeleton { animation: none; } }