/* ============================================================
   Move It · QCP — socle de design
   Charte : noir / blanc / rouge, cinématique
   ============================================================ */

:root{
  --ink:      #0a0a0c;
  --ink-2:    #101013;
  --ink-3:    #16161b;
  --ink-4:    #1c1c22;
  --line:     rgba(255,255,255,.08);
  --line-2:   rgba(255,255,255,.15);
  --paper:    #f3f2ef;
  --smoke:    #a2a2ab;
  --smoke-2:  #6d6d76;
  --rouge:    #e2001a;
  --rouge-2:  #ff2036;
  --rouge-deep:#a4000f;
  --ok:       #3ac98a;
  --warn:     #e6a53a;

  --font-display:'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --wrap: 1120px;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 24px 60px -22px rgba(0,0,0,.85);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--paper);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--rouge); color:#fff; }

/* — Utilitaires typographiques — */
.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--smoke);
}
.eyebrow--red{ color:var(--rouge-2); }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }

/* — Filet rouge signature — */
.rule{
  display:inline-block; height:2px; width:56px; background:var(--rouge);
  vertical-align:middle;
}

/* — Boutons — */
.btn{
  --bg:var(--rouge); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; font-size:15px;
  padding:14px 24px; border:none; border-radius:var(--radius-sm);
  background:var(--bg); color:var(--fg);
  transition:transform .12s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover{ background:var(--rouge-2); transform:translateY(-1px); box-shadow:0 10px 24px -10px var(--rouge); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ background:var(--ink-4); color:var(--smoke-2); cursor:not-allowed; transform:none; box-shadow:none; }
.btn--ghost{ --bg:transparent; --fg:var(--paper); border:1px solid var(--line-2); }
.btn--ghost:hover{ background:rgba(255,255,255,.05); box-shadow:none; }
.btn--block{ width:100%; }

/* — Champs — */
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; letter-spacing:.05em; color:var(--smoke); margin-bottom:6px; text-transform:uppercase; }
.input, .textarea, .select{
  width:100%; font-family:var(--font-body); font-size:15px; color:var(--paper);
  background:var(--ink); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:12px 14px; transition:border-color .15s ease, box-shadow .15s ease;
}
.textarea{ resize:vertical; min-height:110px; }
.input:focus, .textarea:focus, .select:focus{
  outline:none; border-color:var(--rouge); box-shadow:0 0 0 3px rgba(226,0,26,.18);
}
.select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--smoke) 50%),linear-gradient(135deg,var(--smoke) 50%,transparent 50%); background-position:calc(100% - 18px) 18px,calc(100% - 12px) 18px; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }

/* — Focus clavier visible — */
:focus-visible{ outline:2px solid var(--rouge-2); outline-offset:2px; }

/* — Puces d'état — */
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; }
.dot--ok{ background:var(--ok); box-shadow:0 0 0 4px rgba(58,201,138,.15); }
.dot--off{ background:var(--smoke-2); }
.dot--warn{ background:var(--warn); box-shadow:0 0 0 4px rgba(230,165,58,.15); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}