/* ════════════════════════════════════════════════════════════════════
   Klartè Buggy Loc — feuille de style partagée — direction « Ciel »
   Esprit Apple Plans / Météo : léger, calme, fini.
   Contrat : .impeccable/surfaces/klarte-buggyloc.md
   Maquettes : .impeccable/mocks/direction-f/
   Référence détaillée : .claude/skills/klarte-uiux/references/design-system.md

   Règles :
   - couleurs UNIQUEMENT via les variables ci-dessous
   - marine = sélection, liens, ciel ; orange = bouton principal seul (texte encre)
   - listes groupées (cartes blanches, séparateurs fins), pas de badges : un point de couleur + un mot
   - police du système (SF / Segoe / Roboto), chiffres en demi-gras à chasse fixe
   - texte blanc uniquement dans la moitié haute (foncée) du ciel
   ════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  /* Fonds */
  --bg: #f2f2f7;              /* fond gris doux (fond « groupé » iOS) */
  --surface: #ffffff;         /* cartes, listes groupées */
  --surface-raised: #e9e9ef;  /* survol, contrôle segmenté */

  /* Lignes */
  --border: #d8d8e0;          /* séparateurs fins, filet des cartes */
  --border-strong: #8a8a96;   /* contour des champs isolés, bouton secondaire — 3,4:1 sur blanc */

  /* Texte */
  --ink: #111427;             /* texte et chiffres — 16,3:1 sur le fond */
  --muted: #5b5f73;           /* libellés, aides, légendes — 5,7:1 */
  --placeholder: #6b6f80;     /* texte d'exemple — 5,0:1 sur blanc */

  /* Marque — bleu marine du logo */
  --brand: #293277;           /* sélection, liens, éléments actifs, haut du ciel */
  --brand-soft: #e6e8f4;      /* fond teinté marque */

  /* Orange du logo — action */
  --orange: #f59f55;          /* bouton principal, uniquement */
  --orange-ink: #111427;      /* texte sur --orange — 8,7:1 */
  --orange-soft: #fdf0e3;     /* fond très léger (en-têtes dépliables) — textes d'état ≥ 5:1 */

  /* Statuts (texte ≥ 4,6:1 sur leur fond teinté) */
  --ok: #1e7b46;   --ok-soft: #e6f4ec;
  --warn: #8f5a00; --warn-soft: #fbf0dc;
  --crit: #c42b1c; --crit-soft: #fdeceb;

  /* Signature : le ciel du jour + verre givré */
  --sky: #293277;                             /* haut d'écran : marine du logo, uni (plus de dégradé) */
  --on-sky: #ffffff;                          /* texte sur la moitié haute du ciel — ≥ 6,2:1 */
  --on-sky-muted: rgba(255, 255, 255, .9);
  --glass: #ffffff;                           /* carte blanche posée sur le ciel (plus de verre flou) */
  --glass-blur: none;
  --bar: rgba(249, 249, 251, .88);            /* barres translucides (actions, onglets) */

  /* Typo : police du système, aucun téléchargement */
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-title: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-num: var(--font-ui);  /* chiffres : même police, chasse fixe via .num */

  /* Arrondis */
  --radius-sm: 8px;    /* champs isolés, contrôle segmenté */
  --radius: 12px;      /* listes groupées, cartes */
  --radius-lg: 16px;   /* cartes givrées, gros boutons */

  /* Espacements */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* l'attribut hidden l'emporte sur display:flex/grid */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-title); font-weight: 700; margin: 0; line-height: 1.15; letter-spacing: -0.02em; } /* couleur héritée */
p { margin: 0; }
a { color: var(--brand); text-underline-offset: 2px; }
::selection { background: var(--brand-soft); color: var(--ink); }
input, textarea { caret-color: var(--brand); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── LE CIEL DU JOUR (signature) ── */
.sky { background: var(--sky); color: var(--on-sky); }
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-lg);
  color: var(--ink);
}

/* ── LISTES GROUPÉES (comme Réglages / Plans) ── */
.section-title {
  font-size: 13px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .02em;
  margin: 0 0 6px 16px;
  display: flex; justify-content: space-between; gap: 12px;
}
.group { background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.cell { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; }
.cell + .cell::before, .group > * + *::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--border);
}
.cell .sub { display: block; font-size: 14px; color: var(--muted); }
.card { background: var(--surface); border-radius: var(--radius); padding: var(--space-4); }

/* ── STATUT : point de couleur + mot (pas de badge) ── */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.tag-depart { color: var(--brand); }
.tag-retour, .tag-ok { color: var(--ok); }
.tag-resa, .tag-entretien, .tag-warn { color: var(--warn); }
.tag-incident, .tag-crit { color: var(--crit); }

/* ── CHIFFRE CLÉ ── */
.kpi-label { font-size: 13px; font-weight: 500; color: var(--muted); }
.kpi-val { font-size: 26px; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.kpi-val.is-crit { color: var(--crit); }
.kpi-ctx { font-size: 13px; color: var(--muted); }

/* ── BOUTONS ── */
.btn {
  min-height: 48px; padding: 0 20px;
  border-radius: var(--radius-lg);
  font: 600 17px/1 var(--font-ui);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none;
  transition: background-color .15s, opacity .15s;
}
.btn svg { flex-shrink: 0; }
/* Bouton principal : un seul par écran */
.btn-primary { background: var(--orange); color: var(--orange-ink); border: none; }
.btn-primary:hover { background: color-mix(in srgb, var(--orange) 90%, var(--ink)); }
.btn-primary:active { opacity: .85; }
.btn-secondary { background: var(--surface); color: var(--brand); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--surface-raised); }
.btn:disabled { opacity: .55; cursor: wait; }

/* ── CHAMPS ── */
/* Champ isolé : bordé */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field-label { font-size: 14px; font-weight: 500; color: var(--muted); }
.req { color: var(--crit); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; min-height: 46px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font: 400 17px var(--font-ui); color: var(--ink);
}
.field textarea { padding: 10px 12px; min-height: 90px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.field input[aria-invalid="true"] { border-color: var(--crit); }
.field .aide { font-size: 13px; color: var(--muted); }
.erreur-champ { font-size: 13px; color: var(--crit); font-weight: 500; }

/* Champ dans une liste groupée : une ligne, libellé au-dessus, sans bordure ;
   la ligne entière s'entoure de marine au focus et de rouge en erreur */
.group > .field { position: relative; gap: 2px; padding: 10px 16px 11px; min-height: 64px; justify-content: center; }
.group > .field > label { font-size: 13px; }
.group > .field input, .group > .field select {
  min-height: 30px; padding: 0; border: 0; border-radius: 0; background: transparent; outline: none;
}
.group > .field:focus-within { box-shadow: inset 0 0 0 2px var(--brand); border-radius: var(--radius); }
.group > .field:has([aria-invalid="true"]) { box-shadow: inset 0 0 0 2px var(--crit); border-radius: var(--radius); }
.group > .field:focus-within::before, .group > .field:has([aria-invalid="true"])::before { display: none; }

/* Menu déroulant : chevron dessiné */
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b5f73' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center;
}
.field:not(.group > .field) select { background-position: right 12px center; padding-right: 40px; }

/* Case à cocher */
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; font-size: 15px; line-height: 21px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--brand); }

/* ── ALERTES ── */
.alert { border-radius: var(--radius); padding: 12px 16px; font-size: 15px; display: flex; gap: 10px; align-items: flex-start; }
.alert-warn { background: var(--warn-soft); color: var(--warn); }
.alert-crit { background: var(--crit-soft); color: var(--crit); }
.alert-ok { background: var(--ok-soft); color: var(--ok); }
.alert-info { background: var(--brand-soft); color: var(--brand); }

/* ── BARRE TRANSLUCIDE (actions ou onglets en bas d'écran) ── */
.bar-bottom {
  background: var(--bar);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
}
/* Sans flou disponible : fond opaque, toujours lisible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: #ffffff; }
  .bar-bottom { background: #f9f9fb; }
}

/* ── ANIMATIONS : sobres, et coupées si l'utilisateur le demande ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Champs date et heure : sur iPhone, leur largeur native les fait déborder de leur carte */
@supports (-webkit-touch-callout: none) {
  input[type="date"], input[type="time"] {
    -webkit-appearance: none; appearance: none;
    display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 44px;
  }
  input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; }
}