/*
   Feuille de style unique.

   Téléphone d'abord, la saisie se faisant debout devant le
   réfrigérateur : cibles tactiles larges, texte lisible de loin, aucune
   action cachée derrière un survol. Au delà de 900 pixels, la barre du
   bas devient une colonne latérale et le contenu se met en deux
   colonnes, pour rester correct sur un écran d'ordinateur.

   Les propriétés personnalisées portent un préfixe de deux tirets, qui
   est la syntaxe imposée par CSS pour les déclarer, non une ponctuation.
   */

:root {
  color-scheme: light dark;

  --fond: #f6f4f0;
  --surface: #ffffff;
  --surface-appuyee: #f0ece5;
  --texte: #1c1917;
  --texte-doux: #6b6560;
  --bordure: #e4ded4;
  --accent: #b45309;
  --accent-doux: #fdf3e7;
  --alerte: #b3261e;
  --alerte-doux: #fdeceb;
  --attention: #8a6100;
  --attention-doux: #fdf6e3;
  --calme: #2f6f4e;
  --calme-doux: #ecf6f0;
  --froid: #1e5f8c;
  --froid-doux: #eaf3f9;

  --rayon: 14px;
  --rayon-petit: 9px;
  --espace: 12px;
  --ombre: 0 1px 2px rgba(28, 25, 23, 0.06), 0 4px 14px rgba(28, 25, 23, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14161a;
    --surface: #1e2228;
    --surface-appuyee: #272c34;
    --texte: #eceae6;
    --texte-doux: #9aa1a9;
    --bordure: #2f353e;
    --accent: #e39a4a;
    --accent-doux: #2a2118;
    --alerte: #f0857c;
    --alerte-doux: #2e1c1b;
    --attention: #e0b95c;
    --attention-doux: #2a2418;
    --calme: #6fbf95;
    --calme-doux: #17241d;
    --froid: #7ab8e0;
    --froid-doux: #16222b;
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }

/* L'attribut hidden ne tient son effet que de la feuille du navigateur,
   qu'une simple règle d'auteur écrase sans discussion. Sans ce rappel,
   un élément masqué par hidden mais porteur d'un display continue de
   s'afficher, et s'il est en position fixe il intercepte tous les clics
   de la page. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.5 system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overscroll-behavior-y: contain;
}

h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1.25; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.95rem; }
p { margin: 0 0 0.6em; }

/* === Entête === */

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace);
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
}

.indicateur {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 4px 11px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: var(--surface);
  color: var(--texte-doux);
  font-size: 0.78rem;
  cursor: pointer;
}

.pastille-etat {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--texte-doux);
  flex: none;
}

.indicateur[data-etat="synchronise"] .pastille-etat { background: var(--calme); }
.indicateur[data-etat="en_attente"] .pastille-etat { background: var(--attention); }
.indicateur[data-etat="hors_ligne"] .pastille-etat { background: var(--texte-doux); }
.indicateur[data-etat="erreur"] .pastille-etat { background: var(--alerte); }

/* === Contenu === */

.contenu {
  padding: 16px 16px calc(96px + env(safe-area-inset-bottom));
  max-width: 760px;
  margin: 0 auto;
  outline: none;
}

.attente { color: var(--texte-doux); }

.section { margin-bottom: 26px; }
.section > h2 { margin-bottom: 10px; }

.legende {
  color: var(--texte-doux);
  font-size: 0.85rem;
  margin: -4px 0 10px;
}

.vide {
  padding: 22px 16px;
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte-doux);
  text-align: center;
}

/* === Cartes === */

.carte {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--ombre);
  overflow: hidden;
}

.carte::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--repere, transparent);
}

.carte-principale { padding: 18px 18px 16px; }
.carte-principale .nom { font-size: 1.5rem; font-weight: 680; line-height: 1.2; }
.carte-principale .motif { color: var(--texte-doux); font-size: 0.83rem; margin-top: 2px; }

.carte-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.nom { font-size: 1.05rem; font-weight: 640; }

.detail {
  color: var(--texte-doux);
  font-size: 0.87rem;
  margin-top: 3px;
}

.note {
  margin-top: 10px;
  padding: 9px 11px;
  background: var(--accent-doux);
  border-radius: var(--rayon-petit);
  font-size: 0.87rem;
}

/* === Étiquettes === */

.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 550;
  background: var(--surface-appuyee);
  color: var(--texte-doux);
  white-space: nowrap;
}

.etiquette-alerte { background: var(--alerte-doux); color: var(--alerte); }
.etiquette-attention { background: var(--attention-doux); color: var(--attention); }
.etiquette-calme { background: var(--calme-doux); color: var(--calme); }
.etiquette-froid { background: var(--froid-doux); color: var(--froid); }

/* === Boutons === */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 560;
  cursor: pointer;
  text-align: center;
}

.bouton:active { background: var(--surface-appuyee); transform: translateY(1px); }
.bouton:disabled { opacity: 0.45; cursor: default; }

.bouton-large { width: 100%; min-height: 58px; font-size: 1.05rem; }

.bouton-primaire {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
@media (prefers-color-scheme: dark) {
  .bouton-primaire { color: #191308; }
}

.bouton-danger { color: var(--alerte); border-color: var(--alerte); }
.bouton-discret { border-color: transparent; background: transparent; color: var(--texte-doux); }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.actions .bouton { flex: 1 1 auto; }

.actions-serrees .bouton { min-height: 40px; padding: 6px 11px; font-size: 0.83rem; flex: 0 1 auto; }

/* === Pastilles de portions === */

.portions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  flex-wrap: wrap;
}

.portion {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--accent);
  cursor: pointer;
  padding: 0;
  flex: none;
}

.portion-vide { background: transparent; border-color: var(--bordure); cursor: default; }
.portion:active { transform: scale(0.92); }

.portions-texte { color: var(--texte-doux); font-size: 0.85rem; margin-left: 4px; }

/* === Blocs d'alerte === */

.bloc-alerte {
  border-radius: var(--rayon);
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--bordure);
  background: var(--surface);
  border-left-width: 5px;
}

.bloc-alerte[data-gravite="critique"] { border-left-color: var(--alerte); background: var(--alerte-doux); }
.bloc-alerte[data-gravite="urgente"] { border-left-color: var(--attention); background: var(--attention-doux); }
.bloc-alerte[data-gravite="attention"] { border-left-color: var(--froid); background: var(--froid-doux); }

.bloc-alerte .titre { font-weight: 640; }
.bloc-alerte .detail { color: var(--texte); opacity: 0.78; }

.blocage {
  margin-top: 9px;
  padding: 8px 10px;
  border-radius: var(--rayon-petit);
  background: var(--surface);
  font-size: 0.85rem;
}

/* === Chiffres clés === */

.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.chiffre {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 13px 14px;
}

.chiffre .valeur { font-size: 1.45rem; font-weight: 680; line-height: 1.15; }
.chiffre .intitule { color: var(--texte-doux); font-size: 0.8rem; margin-top: 2px; }

/* === Filtres === */

.filtres { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }

.filtre-groupe {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.filtre {
  min-height: 38px;
  padding: 6px 13px;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: var(--surface);
  color: var(--texte-doux);
  font: inherit;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
}

.filtre[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
@media (prefers-color-scheme: dark) {
  .filtre[aria-pressed="true"] { color: #191308; }
}

/* === Champs === */

.champ { display: block; margin-bottom: 12px; }
.champ > span { display: block; font-size: 0.85rem; color: var(--texte-doux); margin-bottom: 5px; }

.champ input, .champ select, .champ textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
}

.champ textarea { min-height: 76px; resize: vertical; }

.grille-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 12px;
}

/* === Tableaux === */

.tableau-enveloppe { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
}

th, td { padding: 9px 11px; text-align: left; border-bottom: 1px solid var(--bordure); }
th { font-size: 0.8rem; color: var(--texte-doux); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }

/* === Navigation === */

.navigation {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--bordure);
  padding-bottom: env(safe-area-inset-bottom);
}

.onglet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 60px;
  padding: 7px 2px;
  border: none;
  background: transparent;
  color: var(--texte-doux);
  font: inherit;
  font-size: 0.66rem;
  cursor: pointer;
}

.onglet svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.onglet svg path:not(.trait), .onglet svg circle:not(.trait) { fill: currentColor; stroke: none; }
.onglet[aria-current="page"] { color: var(--accent); font-weight: 620; }

/* === Calque et dialogues === */

.calque {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(20, 18, 16, 0.45);
  padding: 0;
}

.dialogue {
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--rayon) var(--rayon) 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
}

.dialogue h2 { margin-bottom: 4px; }
.dialogue .legende { margin-bottom: 14px; }
.dialogue .actions { flex-direction: column; }
.dialogue .actions .bouton { width: 100%; }

/* === Messages fugaces === */

.messages {
  position: fixed;
  left: 50%;
  bottom: calc(78px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 460px);
  pointer-events: none;
}

.message {
  padding: 11px 14px;
  border-radius: var(--rayon-petit);
  background: #1f2937;
  color: #f4f2ee;
  font-size: 0.88rem;
  box-shadow: var(--ombre);
}

.message-alerte { background: var(--alerte); color: #ffffff; }

/* === Écran large === */

@media (min-width: 900px) {
  body {
    display: grid;
    grid-template-columns: 216px 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
  }

  .entete { grid-column: 1 / -1; padding-left: 24px; padding-right: 24px; }

  .navigation {
    position: sticky;
    top: 0;
    align-self: start;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    border-top: none;
    border-right: 1px solid var(--bordure);
    padding: 14px 10px;
    gap: 3px;
    height: 100%;
  }

  .onglet {
    flex-direction: row;
    justify-content: flex-start;
    gap: 11px;
    min-height: 46px;
    padding: 8px 13px;
    border-radius: var(--rayon-petit);
    font-size: 0.92rem;
  }

  .onglet[aria-current="page"] { background: var(--accent-doux); }

  .contenu {
    grid-column: 2;
    padding: 24px 28px 60px;
    max-width: 940px;
    margin: 0;
  }

  .calque { align-items: center; padding: 24px; }
  .dialogue { border-radius: var(--rayon); }
  .messages { bottom: 24px; left: auto; right: 24px; transform: none; }

  .deux-colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 22px;
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .bouton:active, .portion:active { transform: none; }
}

/* === Grilles de choix, saisie de cargaison === */

.grille-choix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.grille-choix-serree {
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}

.choix {
  position: relative;
  min-height: 58px;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.choix::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--repere, transparent);
}

.choix[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-doux);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.choix .sous { display: block; font-size: 0.76rem; font-weight: 450; color: var(--texte-doux); margin-top: 2px; }

/* === Lignes du brouillon de cargaison === */

.ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--bordure);
  border-left-width: 5px;
  border-radius: var(--rayon-petit);
  background: var(--surface);
  margin-bottom: 7px;
}

.ligne .intitule { font-weight: 560; }
.ligne .precision { color: var(--texte-doux); font-size: 0.82rem; }

.barre-collante {
  position: sticky;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 15;
  padding: 10px 0 0;
  background: linear-gradient(to top, var(--fond) 72%, transparent);
}

@media (min-width: 900px) {
  .barre-collante { bottom: 0; }
}

.onglet:disabled { opacity: 0.35; cursor: default; }