/* Couleurs, polices, réglages de base */

:root {
  --desk: #0b0b0c;
  --bezel: #1a1b1e;
  --bg: #141518;
  --panel: #1c1e22;
  --panel-2: #24262b;
  --line: #2f3238;
  --text: #ececee;
  --muted: #8b9099;
  --red: #e3242b;
  --red-soft: rgba(227, 36, 43, 0.14);
  --amber: #f0a73a;
  --amber-soft: rgba(240, 167, 58, 0.14);
  --green: #3fbf7f;
  --green-soft: rgba(63, 191, 127, 0.14);
  --grey-soft: rgba(139, 144, 153, 0.16);
  --head: "Rajdhani", "Arial Narrow", sans-serif;
  --body: "Manrope", system-ui, sans-serif;
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 0%, #26070a 0%, var(--desk) 60%);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  display: grid;
  place-items: center;
  padding: clamp(0px, 2vw, 28px);
}

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
::selection { background: rgba(227, 36, 43, 0.4); color: #fff; }
:root { accent-color: var(--red); caret-color: var(--red); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Curseur du téléphone */
@media (pointer: fine) {
  body[data-mode="public"], body[data-mode="public"] *, body[data-mode="public"] *::before, body[data-mode="public"] *::after {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23fff' fill-opacity='0.35' stroke='%23fff' stroke-opacity='0.55'/%3E%3C/svg%3E") 12 12, auto !important;
  }
  body[data-mode="public"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  body[data-mode="public"] textarea, body[data-mode="public"] [contenteditable="true"] { cursor: text !important; }
}