/* ============================================================================
   theme.css — Tokens de marque « Facture-urgences »
   ----------------------------------------------------------------------------
   Source : DESIGN.md racine (charte hi-vis chantier, Patrick Knoll électricien).
   Les variables --brand-* portent l'IDENTITÉ de l'artisan (couleurs, police) :
   ce sont les valeurs PAR DÉFAUT du moteur. À terme elles seront injectées
   depuis la config `artisans` (Supabase) — rethémer un artisan = un UPDATE en
   base, zéro modif de code. Les autres tokens (--surface-*, --space-*, --radius-*)
   sont le design-produit, fixe.

   Règle d'or : AUCUNE couleur/police en dur ailleurs — tout passe par var(--*).
   ============================================================================ */

:root {
  /* --- Marque artisan (swappable via config `artisans`) --------------------- */
  --brand-primary:          #ffd400;  /* jaune hi-vis — l'ACTION (DICTER, VALIDER, focus) */
  --brand-primary-active:   #e6bf00;  /* :active / pressed */
  --brand-primary-disabled: #4a4a42;  /* jaune éteint (désactivé) */
  --brand-on-primary:       #17191c;  /* texte sur le jaune = anthracite, JAMAIS blanc */
  --brand-font:             'Inter', system-ui, -apple-system, sans-serif;
  --brand-font-mono:        'JetBrains Mono', ui-monospace, monospace; /* montants alignés */

  /* --- Surfaces de l'APP (sombre = terrain connu de l'artisan) -------------- */
  --canvas:         #17191c;  /* fond de l'app (anthracite = camion, tableau élec) */
  --surface-soft:   #1e2126;  /* sections */
  --surface-card:   #23272d;  /* cards / panneau récap */
  --surface-raised: #2b2f36;  /* élément survolé / actif */

  /* --- Texte sur l'app sombre ---------------------------------------------- */
  --ink:         #f7f7f5;  /* titres, montants — contraste max */
  --body:        #d6d6d2;  /* texte courant */
  --body-strong: #f0f0ec;  /* texte courant emphasé */
  --muted:       #9a9a94;  /* secondaire / hints */
  --muted-soft:  #75756f;  /* tertiaire / labels désactivés */

  --hairline:      #2e3136;  /* borders standards */
  --hairline-soft: #26282c;  /* borders subtiles */

  /* --- Sémantique (feedback uniquement) ------------------------------------ */
  --success: #4ade80;  /* transcription OK, « facture prête » */
  --warning: #fbbf24;  /* champ à vérifier */
  --error:   #f87171;  /* erreur STT, montant manquant */

  /* --- Rayons -------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;   /* défaut boutons/inputs */
  --radius-lg:   14px;   /* cards récap */
  --radius-xl:   20px;
  --radius-pill: 999px;  /* bouton DICTER */

  /* --- Spacing (échelle 4px, densité aérée) -------------------------------- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* --- Container app (mobile-native, format téléphone même sur desktop) ----- */
  --app-max-width: 28rem; /* max-w-md */
}

/* ---- Reset léger --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* L'attribut [hidden] doit TOUJOURS masquer, même quand une classe pose un
   `display` (flex/grid/block) : sinon la règle auteur écrase le `[hidden]{display:none}`
   du navigateur (cascade auteur > UA) et l'élément reste visible. Garde-fou global. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--brand-font);
  font-size: 18px;        /* body-lg = défaut app (lisibilité terrain) */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Layout : une colonne, format téléphone centré ----------------------- */
.app {
  max-width: var(--app-max-width);
  min-height: 100dvh;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* ---- En-tête (monogramme provisoire « PK » + identité) ------------------- */
.app-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.monogram {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--ink);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.5px;
}

.app-header .identite { display: flex; flex-direction: column; }
.app-header .nom    { color: var(--ink); font-weight: 700; font-size: 18px; line-height: 1.2; }
.app-header .metier { color: var(--muted); font-size: 13px; font-weight: 500; }

/* ---- Zone centrale : consigne + transcription ---------------------------- */
.zone {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.eyebrow {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.transcription {
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: var(--ink);
  font-size: 18px;       /* body-lg */
  line-height: 1.55;
  min-height: 8rem;
  white-space: pre-wrap;  /* respecte les retours ligne dictés */
}

.transcription:empty::before {
  content: attr(data-placeholder);
  color: var(--muted-soft);
}

/* ---- Ligne d'état (jamais d'alert JS — messages inline ici) -------------- */
.etat {
  min-height: 1.4em;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}
.etat[data-tone="error"]   { color: var(--error); }
.etat[data-tone="success"] { color: var(--success); }
.etat[data-tone="warning"] { color: var(--warning); }

/* ---- Récap éditable (Phase 3) : l'écran de la confiance ------------------ */
.recap {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.recap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

/* Label court et ferme (caption-uppercase) — repère de champ */
.cap {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Badge de statut (À vérifier / Prêt) */
.badge {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--body);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.badge[data-tone="warning"] { background: rgba(251, 191, 36, 0.16); color: var(--warning); }
.badge[data-tone="success"] { background: rgba(74, 222, 128, 0.16); color: var(--success); }

/* Panneau récap (recap-card DESIGN.md) */
.recap-card {
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.recap-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.recap-sep { height: 1px; background: var(--hairline); margin: var(--space-xs) 0; }
.recap-lignes-title { margin: 0; }
.recap-lignes { display: flex; flex-direction: column; gap: var(--space-md); }

/* Champ de correction (text-input DESIGN.md) — gros, focus ring jaune */
.text-input {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  background: var(--surface-soft);
  color: var(--ink);
  font-family: var(--brand-font);
  font-size: 18px;
  line-height: 1.4;
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 120ms ease-out;
}
.text-input::placeholder { color: var(--muted-soft); }
.text-input:focus { border-color: var(--brand-primary); border-width: 2px; }
.text-input--num {
  font-family: var(--brand-font-mono);
  text-align: right;
}

/* Une ligne de prestation : label pleine largeur, puis qté × prix = montant */
.ligne {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--surface-soft);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-md);
}
/* Ligne sans prix (a_confirmer) : mise en évidence tant qu'elle n'est pas complétée */
.ligne[data-confirm] {
  border-color: var(--warning);
  box-shadow: inset 3px 0 0 var(--warning);
}
.ligne .ligne-label { background: var(--surface-card); }

.ligne-calc {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.ligne-calc .text-input { min-height: 48px; padding: 10px 12px; font-size: 16px; }
.ligne-qte  { flex: 0 0 4.5rem; }
.ligne-prix { flex: 1 1 auto; }
.ligne-calc .mul { color: var(--muted); font-weight: 600; }
.ligne-calc .unite { color: var(--muted); font-size: 13px; }
.ligne-montant {
  flex: 0 0 auto;
  min-width: 6rem;
  text-align: right;
  color: var(--ink);
  font-family: var(--brand-font-mono);
  font-size: 16px;
  font-weight: 500;
}

/* TVA : label + petit champ numérique aligné */
.recap-tva { flex-direction: row; align-items: center; justify-content: space-between; }
.recap-tva .text-input { max-width: 6.5rem; min-height: 48px; padding: 10px 12px; }

/* Totaux (amount mono, colonnes nettes) */
.recap-totaux { display: flex; flex-direction: column; gap: var(--space-sm); }
.totline { display: flex; align-items: baseline; justify-content: space-between; }
.totline .amount {
  color: var(--body-strong);
  font-family: var(--brand-font-mono);
  font-size: 16px;
  font-weight: 500;
}
.totline--ttc { margin-top: var(--space-xs); padding-top: var(--space-sm); border-top: 1px solid var(--hairline); }
.totline--ttc .cap { color: var(--ink); font-size: 13px; }
.totline--ttc .amount { color: var(--ink); font-size: 22px; font-weight: 700; }

.recap-hint { margin: 0; color: var(--warning); font-size: 15px; font-weight: 500; }

/* ---- Zone d'action (thumb zone) : VALIDER (si récap) + DICTER ------------ */
.actions {
  margin-top: auto;            /* collé en bas (thumb zone) */
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Toast de confirmation "✓ Facture enregistrée n° …" (toast-success DESIGN.md) */
.toast {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.toast[data-tone="success"] { background: var(--success); color: var(--brand-on-primary); }
.toast[data-tone="error"]   { background: var(--error);   color: var(--brand-on-primary); }

/* VALIDER ET ENREGISTRER : la confirmation finale (button-primary DESIGN.md) */
.btn-primary {
  width: 100%;
  min-height: 60px;
  padding: var(--space-md) var(--space-lg);
  border: none;
  border-radius: var(--radius-md);
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  font-family: var(--brand-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease-out;
}
.btn-primary:active { background: var(--brand-primary-active); }
.btn-primary:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; }
.btn-primary:disabled {
  background: var(--brand-primary-disabled);
  color: var(--muted-soft);
  cursor: not-allowed;
}

/* ---- Bouton DICTER : le geste central, énorme, jaune, en bas ------------- */

.btn-record {
  width: 100%;
  min-height: 88px;
  padding: var(--space-lg) var(--space-xl);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  font-family: var(--brand-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  transition: background 150ms ease-out, transform 150ms ease-out;
}
.btn-record:active { background: var(--brand-primary-active); }
.btn-record:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; }

.btn-record .ico { width: 26px; height: 26px; display: inline-block; }

/* État « j'écoute » : pulse jaune lent, PAS de bounce (charte : sérieux) */
.btn-record.recording { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 0, 0.45); }
  50%      { box-shadow: 0 0 0 14px rgba(255, 212, 0, 0); }
}

/* État « transcription en cours » : bouton neutralisé visuellement */
.btn-record.loading {
  background: var(--surface-raised);
  color: var(--muted);
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  .btn-record.recording { animation: none; }
}

/* ---- Bouton secondaire (Fermer l'aperçu) : gris, JAMAIS jaune (charte) ---- */
.btn-secondary {
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--brand-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease-out;
}
.btn-secondary:active { background: var(--surface-soft); }
.btn-secondary:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; }

/* État « génération en cours » du bouton Télécharger (pas de spinner gadget) */
.btn-primary.loading { background: var(--surface-raised); color: var(--muted); cursor: progress; }

/* ---- Overlay aperçu facture (Phase 4) : bottom-sheet plein écran ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
}
.overlay[hidden] { display: none; }

.overlay-panel {
  width: 100%;
  max-width: 40rem;           /* un peu plus large que l'app : on lit une facture A4 */
  margin: 0 auto;
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
  max-height: 100dvh;
}

.overlay-head {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--hairline);
}
.overlay-num { margin: 4px 0 0; color: var(--ink); font-weight: 700; font-size: 18px; }

.overlay-frame-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;              /* permet à l'iframe de scroller dans le flex */
  background: #e9e9ee;        /* gris « feuille » (comme l'aperçu Gotenberg) */
  overflow: hidden;
}
.overlay-frame { width: 100%; height: 100%; border: 0; display: block; background: #e9e9ee; }
.overlay-loading {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  margin: 0; color: var(--muted); font-size: 15px;
}

.overlay-erreur {
  margin: 0;
  padding: var(--space-sm) var(--space-lg) 0;
  color: var(--error);
  font-size: 15px;
  font-weight: 500;
}

.overlay-actions {
  padding: var(--space-md) var(--space-lg);
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--surface-card);
  border-top: 1px solid var(--hairline);
}