/* L'Atelier PWA — feuille de style racine.
   6A : tokens + ossature (ci-dessous). 6B : composants d'écran dans
   components.css, importé ici (un seul <link> dans index.html, shell figé 6.7).
   Direction figée par le brief (Sections 6.1/6.2) : sobriété brutale,
   noir warm + or, signature = bordure gauche de confiance. Toute couleur
   et toute mesure dérivent des tokens ci-dessous — aucune valeur en dur. */
@import url("/css/components.css");
@import url("/css/components-capture.css");
@import url("/css/components-form.css");
@import url("/css/components-queue.css");

:root {
  /* Fonds */
  --bg-deep: #0b0a09;            /* noir warm principal */
  --bg-elevated: #15120f;         /* cartes, surfaces légèrement levées */
  --bg-overlay: rgba(11, 10, 9, 0.92); /* modales, écrans de loading */

  /* Texte */
  --text-primary: #f4efe5;        /* blanc cassé chaud */
  --text-secondary: #b8ad9b;      /* texte secondaire, labels */
  --text-muted: #7a6b5c;          /* hints, placeholders */

  /* Or et accents */
  --gold-bright: #d4a968;         /* or principal, signature, boutons */
  --gold-soft: #9d7d4a;           /* or atténué, séparateurs, focus */
  --amber: #c08a3f;               /* confiance medium, indicateurs */

  /* États sémantiques */
  --confidence-high: #d4a968;     /* or éclatant */
  --confidence-medium: #c08a3f;   /* ambre */
  --confidence-low: #7a6b5c;      /* beige terne, gris chaud */
  --success: #6b8f5c;             /* vert sobre, confirmations */
  --error: #b85c5c;               /* rouge réservé aux vraies erreurs */

  /* Typographie */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", "Helvetica Neue", system-ui, sans-serif;

  /* Échelle */
  --step-0: 0.875rem;             /* 14px, captions */
  --step-1: 1rem;                 /* 16px, body */
  --step-2: 1.25rem;              /* 20px, labels */
  --step-3: 1.5rem;               /* 24px, titres section */
  --step-4: 2rem;                 /* 32px, titre écran */
  --step-5: 2.75rem;              /* 44px, titre hub */

  /* Espace */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;

  /* Rayons */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Hitbox tactile minimum */
  --tap-target: 56px;

  /* Dérivés ossature (6A) */
  --field-spine: 3px;             /* épaisseur de la colonne de confiance (spec 6.14) */
  --transition-base: 180ms;       /* fondu inter-écrans, micro-interactions */
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Reset minimaliste ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, picture, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus { outline: none; } /* remplacé par :focus-visible plus bas */

/* ---- Base ---- */
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Utilitaires layout (mobile-first, base 375px) ---- */
/* container : gouttière confortable au pouce, plafonné pour ne pas
   s'étaler au-delà d'un écran mobile. */
.container {
  width: 100%;
  max-width: 28rem;          /* ~448px, garde la mesure mobile */
  margin-inline: auto;
  padding-inline: var(--space-3);
  padding-block: var(--space-4);
}
/* stack : rythme vertical homogène entre éléments empilés. */
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack--tight { gap: var(--space-2); }
/* cluster : regroupement horizontal qui se replie proprement. */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---- Signature : marqueurs de confiance (spec figée 6.14) ----
   Bordure gauche pleine de 3 px sur chaque champ ; la couleur porte le
   niveau. Le niveau low ajoute une icône drapeau ⚑ à gauche du label,
   en --confidence-low. Incarne "mieux vide que faux". */
.field {
  background: var(--bg-elevated);
  border-left: var(--field-spine) solid transparent;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-2) var(--space-3);
}
.field--high   { border-left-color: var(--confidence-high); }
.field--medium { border-left-color: var(--confidence-medium); }
.field--low    { border-left-color: var(--confidence-low); }

/* Label de champ : porte le drapeau ⚑ quand le champ est en confiance low. */
.field__label { display: block; font-size: var(--step-0); color: var(--text-secondary); }
.field--low .field__label::before {
  content: "⚑";
  margin-right: var(--space-1);
  color: var(--confidence-low);
}

/* ---- Accessibilité : focus clavier visible ---- */
:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Mouvement : désactivable proprement ----
   Les transitions futures (180ms) doivent honorer ce réglage système. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}