/* ══════════════════════════════════════════════════════════════════════
   ARCSTUD — app staff (§7, §7bis, §7ter)
   ══════════════════════════════════════════════════════════════════════

   Charte reprise de la maquette `docs/maquettes/02-staff-app.html` : palette
   navy/teal/rose/or, Public Sans, cartes blanches sur fond gris clair, barre
   d'onglets en bas, bandeau supérieur permanent.

   ── Ce qui diffère de la maquette, et pourquoi ─────────────────────────

   La maquette est une vignette de 375 px affichée sur un écran de bureau : les
   tailles y sont choisies pour cette vignette (10,5 px pour un compteur de
   section, 12,5 px pour un nom de résident). Sur un téléphone réel, tenu par
   quelqu'un qui travaille dehors, dans un sous-sol ou sous la pluie, elles
   seraient à la limite du lisible.

   Les proportions, les couleurs et la structure sont donc respectées ; les
   tailles sont remontées d'environ deux points, et les cibles tactiles ne
   descendent jamais sous 44 px — sauf les pavés +/− de quantité, à 34 px, qui
   sont groupés et dont une erreur se corrige d'un appui.

   ── Ce qui n'est pas repris de la tablette client ──────────────────────

   La tablette interdit la sélection de texte, le zoom et le menu contextuel :
   elle est vissée au mur en mode kiosque (§3.5), et chacun de ces gestes y
   laisse l'écran dans un état dont un résident ne sait pas sortir. Rien de
   tout ça ici : c'est un téléphone personnel, on y copie un numéro, on y zoome
   sur un index de compteur. Le seul emprunt est `overscroll-behavior`, pour
   que le rebond de fin de liste ne déclenche pas un rechargement de page au
   milieu d'un état des lieux.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Palette — CLAUDE.md */
  --navy: #1D3557;
  --teal: #2A9D8F;
  --rose: #B33951;
  --or: #E9C46A;

  --fond: #F4F6F8;
  --bordure: #D8DEE4;
  --texte: #1B1F23;
  --texte-second: #5C6B7A;
  --texte-tertiaire: #8C99A5;
  --blanc: #fff;

  /* Teintes dérivées, une seule fois ici plutôt qu'en dur dans les règles */
  --navy-pale: #EAF0F4;
  --teal-pale: #E4F3F1;
  --teal-fonce: #1F7A6E;
  --rose-pale: #F9E3E7;
  --rose-bordure: #EFC2CB;
  --or-pale: #FBF1D8;
  --or-fonce: #8A6D18;
  --separateur: #EEF1F3;

  --rayon: 10px;
  --rayon-petit: 7px;

  /* Cible tactile minimale. Une erreur de saisie sur un état des lieux se
     corrige, mais une case cochée par erreur sur « documents à emporter »
     envoie quelqu'un en logement sans son contrat. */
  --cible: 44px;

  --t-xs: 11.5px;
  --t-s: 13px;
  --t-m: 14.5px;
  --t-l: 16.5px;
  --t-xl: 20px;
  --t-xxl: 34px;

  --ombre: 0 2px 6px rgba(29, 53, 87, 0.06);
  --ombre-haute: 0 -2px 10px rgba(29, 53, 87, 0.08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* L'attribut `hidden` ne vaut qu'un `display: none` de feuille de style du
   navigateur : n'importe quelle classe qui pose un `display` le neutralise.
   La règle est posée une fois, pour tous les composants. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: var(--fond);
  color: var(--texte);
  /* Public Sans ne couvre ni l'arabe ni le géorgien. Les noms de résidents
     peuvent l'être : les replis nommés sont les polices présentes sur Android
     et iOS. */
  font-family: 'Public Sans', 'Noto Naskh Arabic', 'Noto Sans Georgian', system-ui, sans-serif;
  font-size: var(--t-m);
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

body { overscroll-behavior: none; }

button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
svg { display: block; flex: none; }

/* ── Ossature ────────────────────────────────────────────────────────── */

/* Colonne flex, et non grille à pistes nommées.
   Quatre des cinq zones s'effacent selon l'écran — la barre d'onglets sur la
   porte de pointage, l'en-tête sur la connexion, le bandeau de lecture seule
   dès qu'on a pointé. Avec `grid-template-rows`, les éléments restants se
   replacent sur les *premières* pistes : le corps atterrissait sur une piste
   `auto` au lieu du `1fr`, et la porte de pointage s'arrêtait aux deux tiers de
   l'écran avec du gris en dessous. Une colonne flex n'a pas de pistes à
   décaler. */
.app {
  display: flex;
  flex-direction: column;
  /* `dvh` et non `vh` : la barre d'adresse du navigateur mobile apparaît et
     disparaît au défilement, et `vh` placerait la barre d'onglets sous le bord
     de l'écran une fois sur deux. */
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

.bandeau, .lecture-seule, .entete, .onglets { flex: none; }

/* ── Bandeau ─────────────────────────────────────────────────────────── */

.bandeau {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) 18px 8px;
  background: var(--navy);
  color: var(--blanc);
  font-size: var(--t-xs);
  font-weight: 600;
}

.bandeau__marque { letter-spacing: 0.3px; }
.bandeau__date { opacity: 0.82; }

/* ── Bandeau lecture seule (§7.4) ────────────────────────────────────── */

.lecture-seule {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  background: var(--or-pale);
  border-bottom: 1px solid var(--or);
  color: var(--or-fonce);
  font-size: var(--t-xs);
  font-weight: 700;
}

.lecture-seule__icone { display: flex; }
.lecture-seule__icone svg { width: 15px; height: 15px; }
.lecture-seule__texte { flex: 1; }

.lecture-seule__action {
  background: var(--or-fonce);
  color: var(--blanc);
  border-radius: 6px;
  padding: 7px 13px;
  font-size: var(--t-xs);
  font-weight: 800;
  min-height: 34px;
}

/* Le verrou de la §7.4, côté interface : tout ce qui écrit s'éteint. Le
   contrôle réel est côté Worker (`middleware/pointage.ts`) — ceci n'en est que
   l'affichage honnête, et `pointer-events: none` évite qu'un appui parte vers
   une API qui répondrait 409. */
.lecture-seule-active .action {
  opacity: 0.35;
  pointer-events: none;
}

/* ── En-tête d'écran ─────────────────────────────────────────────────── */

.entete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px 13px;
  background: var(--blanc);
  border-bottom: 1px solid var(--bordure);
}

.entete__texte { flex: 1; min-width: 0; }

.entete__titre {
  font-size: var(--t-l);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
}

.entete__sous-titre {
  font-size: var(--t-xs);
  color: var(--texte-second);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entete__retour {
  width: var(--cible);
  height: var(--cible);
  margin-left: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  border-radius: var(--rayon-petit);
}
.entete__retour svg { width: 21px; height: 21px; }

/* ── Corps ───────────────────────────────────────────────────────────── */

.corps {
  flex: 1 1 auto;
  /* `min-height: 0` : sans lui, un enfant flex ne descend pas sous la taille de
     son contenu, et `overflow-y: auto` ne défile jamais — la fin d'une longue
     liste d'états des lieux serait inatteignable. */
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
}

.corps--centre {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
}

.corps--pleine { padding-bottom: 0; display: flex; flex-direction: column; }
.corps--pleine > * { flex: 1 0 auto; }

.attente { padding: 28px 18px; color: var(--texte-second); }

.section { padding: 14px 18px 2px; }
.section--derniere { padding-bottom: 18px; }

.sous-titre {
  font-size: var(--t-xs);
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 9px;
}

.section__titre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: var(--t-s);
  font-weight: 800;
}
.section__titre svg { width: 17px; height: 17px; }

.section__titre--rose { color: var(--rose); }
.section__titre--or { color: var(--or-fonce); }
.section__titre--teal { color: var(--teal-fonce); }
.section__titre--navy { color: var(--navy); }

.section__compte {
  margin-left: auto;
  font-size: var(--t-xs);
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
}
.section__compte--rose { background: var(--rose-pale); color: var(--rose); }
.section__compte--or { background: var(--or-pale); color: var(--or-fonce); }
.section__compte--teal { background: var(--teal-pale); color: var(--teal-fonce); }

/* ── Barre d'onglets ─────────────────────────────────────────────────── */

.onglets {
  display: flex;
  background: var(--blanc);
  border-top: 1px solid var(--bordure);
  box-shadow: var(--ombre-haute);
  padding-bottom: env(safe-area-inset-bottom);
}

.onglet {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 0 10px;
  min-height: 54px;
  color: var(--texte-tertiaire);
}
.onglet svg { width: 19px; height: 19px; }
.onglet span { font-size: 10px; font-weight: 700; }
.onglet--actif { color: var(--navy); }

.onglet__pastille {
  position: absolute;
  top: 5px;
  left: calc(50% + 7px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--rose);
  color: var(--blanc);
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 17px;
  text-align: center;
}

/* ── Boutons ─────────────────────────────────────────────────────────── */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 15px;
  min-height: var(--cible);
  border-radius: var(--rayon-petit);
  font-size: var(--t-s);
  font-weight: 700;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  color: var(--navy);
}
.bouton svg { width: 16px; height: 16px; }

.bouton--primaire { background: var(--navy); color: var(--blanc); border-color: var(--navy); }
.bouton--teal { background: var(--teal); color: var(--blanc); border-color: var(--teal); }
.bouton--rose { background: var(--rose); color: var(--blanc); border-color: var(--rose); }
.bouton--fantome { background: var(--fond); color: var(--texte-second); }

.bouton--large { width: 100%; padding: 14px; font-size: var(--t-m); font-weight: 800; }
.bouton--petit { flex: 1; padding: 9px 10px; min-height: 40px; font-size: var(--t-xs); }
.bouton--petit svg { width: 14px; height: 14px; }

.bouton:disabled { opacity: 0.45; cursor: default; }
.bouton--eteint { opacity: 0.4; }

.bouton--attente svg { animation: tourner 1s linear infinite; }

@keyframes tourner { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bouton--attente svg, .chargement svg { animation: none; }
}

/* ── Cartes de tâche ─────────────────────────────────────────────────── */

.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 13px 14px;
  margin-bottom: 9px;
  box-shadow: var(--ombre);
}

/* Les quatre liserés de la maquette. Ce ne sont pas des ornements : ils
   distinguent au premier coup d'œil une urgence d'une routine hebdomadaire,
   et la §7.2 range les sections dans cet ordre de priorité. */
.carte--urgence { border-left: 4px solid var(--rose); }
.carte--relance { border-left: 4px solid var(--or); }
.carte--mission { border-left: 4px solid var(--teal); }
.carte--arrivee { border-left: 4px solid var(--navy); }

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

.carte__titre { font-size: var(--t-m); font-weight: 700; line-height: 1.3; }
.carte__meta { font-size: var(--t-xs); color: var(--texte-second); margin-top: 3px; }

.carte__description {
  font-size: var(--t-s);
  color: var(--texte-second);
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--fond);
  border-radius: var(--rayon-petit);
}

.carte__etat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  color: var(--teal-fonce);
  font-weight: 700;
  margin-top: 8px;
}
.carte__etat svg { width: 13px; height: 13px; }

.carte__delai {
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 5px;
  white-space: nowrap;
  background: var(--navy-pale);
  color: var(--texte-second);
}
.carte__delai--retard { background: var(--rose-pale); color: var(--rose); }

.carte__actions { display: flex; gap: 8px; margin-top: 11px; }

.etiquette {
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 5px;
  white-space: nowrap;
}
.etiquette--teal { background: var(--teal-pale); color: var(--teal-fonce); }
.etiquette--or { background: var(--or-pale); color: var(--or-fonce); }

/* ── Documents à emporter (§5bis.1bis) ───────────────────────────────── */

.emporter {
  margin: 14px 18px 0;
  background: var(--blanc);
  border: 1px solid var(--navy);
  border-radius: var(--rayon);
  overflow: hidden;
}

.emporter__entete {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  background: var(--navy);
  color: var(--blanc);
  font-size: var(--t-s);
  font-weight: 800;
}
.emporter__entete svg { width: 16px; height: 16px; }

.emporter__compte {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: var(--t-xs);
  font-weight: 700;
}

.emporter__ligne {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--separateur);
}
.emporter__ligne:last-of-type { border-bottom: none; }

.emporter__case {
  width: var(--cible);
  height: var(--cible);
  margin: -10px 0 -10px -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--blanc);
}
/* La case elle-même fait 22 px, la cible tactile 44 : on coche en marchant, et
   rater la case renvoie en logement sans le contrat. */
.emporter__case::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid #C7D0D9;
  background: var(--blanc);
}
.emporter__case { position: relative; }
.emporter__case svg { width: 14px; height: 14px; position: relative; z-index: 1; stroke-width: 3.2; }
.emporter__case--cochee::before { background: var(--teal); border-color: var(--teal); }
.emporter__case--cochee { opacity: 1 !important; }

.emporter__texte { min-width: 0; }
.emporter__titre { font-size: var(--t-s); font-weight: 700; }
.emporter__detail { font-size: var(--t-xs); color: var(--texte-second); margin-top: 2px; }

.emporter__pied {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 13px;
  background: var(--or-pale);
  color: var(--or-fonce);
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 1.4;
}
.emporter__pied svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }

/* ── Porte de pointage (§7bis.0bis) ──────────────────────────────────── */

.porte {
  min-height: 100%;
  background: var(--navy);
  color: var(--blanc);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 26px calc(32px + env(safe-area-inset-bottom));
}

.porte__pastille {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.porte__pastille svg { width: 32px; height: 32px; }

.porte__salutation { font-size: var(--t-xl); font-weight: 800; }
.porte__message { font-size: var(--t-s); opacity: 0.82; margin-top: 7px; line-height: 1.5; }

/* L'heure est affichée en grand parce que c'est elle qu'on enregistre. */
.porte__heure {
  font-size: var(--t-xxl);
  font-weight: 800;
  letter-spacing: 1px;
  margin: 22px 0 4px;
  font-variant-numeric: tabular-nums;
}
.porte__date { font-size: var(--t-xs); opacity: 0.7; }

.porte .bouton { margin-top: 26px; }
.porte__erreurs { width: 100%; margin-top: 18px; }
.porte__erreurs:empty { margin-top: 0; }

.porte__position {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  opacity: 0.65;
  margin-top: 14px;
}
.porte__position svg { width: 13px; height: 13px; }

/* « Lien secondaire discret » (§7bis.0bis) : discret, mais pleinement
   atteignable — 44 px de haut, souligné, sans ambiguïté sur son rôle. */
.porte__lecture {
  margin-top: 18px;
  min-height: var(--cible);
  padding: 0 12px;
  font-size: var(--t-s);
  font-weight: 700;
  color: var(--blanc);
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Connexion (§10bis) ──────────────────────────────────────────────── */

.connexion {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.connexion__marque {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.connexion__marque svg { width: 28px; height: 28px; }

.connexion__titre { font-size: var(--t-xl); font-weight: 800; color: var(--navy); }
.connexion__sous-titre { font-size: var(--t-s); color: var(--texte-second); margin-bottom: 16px; }

.connexion .champ__etiquette { text-align: left; }
.connexion .bouton { margin-top: 10px; }

.connexion__aide {
  font-size: var(--t-xs);
  color: var(--texte-tertiaire);
  margin-top: 14px;
  line-height: 1.45;
}

/* ── Champs ──────────────────────────────────────────────────────────── */

.champ {
  width: 100%;
  padding: 12px 13px;
  min-height: var(--cible);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  background: var(--blanc);
  font-size: var(--t-m);
}
.champ:focus { outline: 2px solid var(--navy); outline-offset: -1px; }

.champ--zone { resize: vertical; min-height: 76px; }
.champ--mini { padding: 9px 10px; min-height: 40px; font-size: var(--t-s); }

.champ__etiquette {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--texte-second);
  margin: 8px 0 5px;
}

/* ── Onglet « Moi » ──────────────────────────────────────────────────── */

.pointage {
  margin: 14px 18px 0;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 16px;
  box-shadow: var(--ombre);
}

.pointage__etat { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }

.pointage__pastille {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--teal-pale);
  color: var(--teal-fonce);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.pointage__pastille svg { width: 20px; height: 20px; }
.pointage__pastille--close { background: var(--navy-pale); color: var(--navy); }

.pointage__libelle { font-size: var(--t-m); font-weight: 800; color: var(--navy); }
.pointage__sous {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-xs);
  color: var(--texte-second);
  margin-top: 2px;
}
.pointage__sous svg { width: 12px; height: 12px; flex: none; }

.pointage__meta {
  display: flex;
  justify-content: space-between;
  margin-top: 11px;
  font-size: var(--t-xs);
  color: var(--texte-tertiaire);
}

.semaine__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  padding: 11px 13px;
  margin-bottom: 7px;
}
.semaine__ligne--repos { opacity: 0.55; }
.semaine__ligne--jour { border-color: var(--navy); }

.semaine__jour { font-size: var(--t-s); font-weight: 700; }
.semaine__heures { font-size: var(--t-s); color: var(--texte-second); font-variant-numeric: tabular-nums; }

.semaine__marque {
  display: block;
  font-size: var(--t-xs);
  color: var(--or-fonce);
  font-weight: 700;
  margin-top: 2px;
}

.semaine__total {
  display: flex;
  justify-content: space-between;
  background: var(--navy-pale);
  border-radius: var(--rayon-petit);
  padding: 11px 13px;
  font-size: var(--t-s);
  font-weight: 800;
  color: var(--navy);
}

.conge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  padding: 12px 13px;
  margin-bottom: 7px;
}
.conge__titre { font-size: var(--t-s); font-weight: 700; }
.conge__dates { font-size: var(--t-xs); color: var(--texte-second); margin-top: 2px; }
.conge__etat {
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 5px;
  background: var(--or-pale);
  color: var(--or-fonce);
  white-space: nowrap;
}

.bientot {
  background: var(--navy-pale);
  border: 1px dashed #C7D0D9;
  border-radius: var(--rayon);
  padding: 16px;
  text-align: center;
  color: var(--texte-second);
}
.bientot svg { width: 21px; height: 21px; margin: 0 auto; color: var(--texte-tertiaire); }
.bientot__titre { font-size: var(--t-s); font-weight: 700; margin-top: 7px; }
.bientot__texte { font-size: var(--t-xs); color: var(--texte-tertiaire); margin-top: 4px; line-height: 1.45; }

/* ── Notifications (§4.2) ────────────────────────────────────────────── */

.notifications {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 13px 14px;
}
.notifications__texte { display: flex; gap: 11px; flex: 1; min-width: 0; }
/* `bouton--petit` porte `flex: 1` pour les paires d'actions d'une carte de
   tâche ; ici il est seul et s'étalerait sur la moitié de la ligne. */
.notifications .bouton { flex: none; }
.notifications__texte > svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--texte-tertiaire); }
.notifications__titre { font-size: var(--t-s); font-weight: 700; }
.notifications__detail { font-size: var(--t-xs); color: var(--texte-second); margin-top: 3px; line-height: 1.45; }

.notifications--abonne { border-color: var(--teal); }
.notifications--abonne .notifications__texte > svg { color: var(--teal-fonce); }
.notifications--refuse, .notifications--a_installer { background: var(--or-pale); border-color: var(--or); }
.notifications--refuse .notifications__detail, .notifications--a_installer .notifications__detail { color: var(--or-fonce); }

/* ── Clôture de journée (§7ter.1) ────────────────────────────────────── */

.cloture { min-height: 100%; display: flex; flex-direction: column; }

.cloture__hero {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--rose);
  color: var(--blanc);
  padding: 16px 18px 18px;
}
.cloture__retour {
  width: 38px;
  height: 38px;
  margin: -6px 0 0 -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanc);
  flex: none;
}
.cloture__retour svg { width: 20px; height: 20px; }
.cloture__titre { font-size: var(--t-l); font-weight: 800; }
.cloture__message { font-size: var(--t-s); opacity: 0.88; margin-top: 5px; line-height: 1.45; }

.cloture__corps {
  flex: 1;
  padding: 14px 18px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bloc {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 13px 14px;
}
.bloc--rose { border-left: 4px solid var(--rose); }
.bloc--or { border-left: 4px solid var(--or); }
.bloc--teal { border-left: 4px solid var(--teal); }
.bloc--navy { border-left: 4px solid var(--navy); }
.bloc--gris { border-left: 4px solid var(--bordure); }

.bloc--fait { display: flex; align-items: center; gap: 11px; opacity: 0.85; }

.bloc__haut { display: flex; align-items: flex-start; gap: 11px; }

.bloc__pastille {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy-pale);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.bloc__pastille svg { width: 16px; height: 16px; }
.bloc__pastille--teal { background: var(--teal-pale); color: var(--teal-fonce); }

.bloc__titre { font-size: var(--t-s); font-weight: 700; line-height: 1.35; }
.bloc__detail { font-size: var(--t-xs); color: var(--texte-second); margin-top: 3px; line-height: 1.45; }

/* Le cartouche porte la règle de la §7ter.2. Sa couleur dit si la ligne est
   close pour de bon (rose : une urgence ne bascule pas) ou reportable (or). */
.bloc__regle {
  font-size: var(--t-xs);
  font-weight: 700;
  margin-top: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  line-height: 1.4;
}
.bloc__regle--rose { background: var(--rose-pale); color: var(--rose); }
.bloc__regle--or { background: var(--or-pale); color: var(--or-fonce); }

/* ── États des lieux (§5) ────────────────────────────────────────────── */

/* La pastille d'enregistrement est `position: fixed` au-dessus de la barre
   d'onglets : sans cette réserve, elle recouvre le bouton « Terminer la
   saisie », qui est la dernière chose de l'écran et la seule qu'on cherche en
   arrivant au bas. */
.edl { padding-bottom: 112px; }

.element {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.element--manque { border-color: var(--rose); background: var(--rose-pale); }

.element__texte { min-width: 0; }
.element__nom { font-size: var(--t-s); font-weight: 600; display: block; }
.element__entree { font-size: var(--t-xs); color: var(--texte-tertiaire); display: block; margin-top: 2px; }
.element__manque-texte { font-size: var(--t-xs); color: var(--rose); font-weight: 700; display: block; margin-top: 2px; }

.element__actions { display: flex; gap: 6px; flex: none; }

.etat-bouton {
  width: 36px;
  height: 36px;
  border-radius: var(--rayon-petit);
  border: 1px solid var(--bordure);
  background: var(--blanc);
  font-size: var(--t-s);
  font-weight: 800;
  color: var(--texte-tertiaire);
}
.etat-bouton--bon.etat-bouton--actif { background: var(--teal-pale); border-color: var(--teal); color: var(--teal-fonce); }
.etat-bouton--moyen.etat-bouton--actif { background: var(--or-pale); border-color: var(--or); color: var(--or-fonce); }
.etat-bouton--degrade.etat-bouton--actif { background: var(--rose-pale); border-color: var(--rose); color: var(--rose); }

.photo-bouton {
  width: 36px;
  height: 36px;
  border-radius: var(--rayon-petit);
  border: 1px solid var(--bordure);
  background: var(--fond);
  color: var(--texte-second);
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-bouton svg { width: 16px; height: 16px; }
.photo-bouton--prise { background: var(--teal-pale); border-color: var(--teal); color: var(--teal-fonce); }
.photo-bouton--envoi svg { animation: tourner 1s linear infinite; }

.compteur {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  padding: 12px 13px;
  margin-bottom: 8px;
}
.compteur--inapplicable { opacity: 0.75; }

.compteur__haut { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }

.compteur__pastille {
  width: 32px;
  height: 32px;
  border-radius: var(--rayon-petit);
  background: var(--navy-pale);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.compteur__pastille svg { width: 16px; height: 16px; }

.compteur__nom { font-size: var(--t-s); font-weight: 700; flex: 1; }

.compteur__na {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--texte-tertiaire);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 8px 10px;
  min-height: 36px;
}
.compteur__na--actif { background: var(--navy); border-color: var(--navy); color: var(--blanc); }

.compteur__champs { display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; align-items: center; }
.compteur__note { font-size: var(--t-xs); color: var(--texte-second); line-height: 1.4; }
.compteur__manque { font-size: var(--t-xs); color: var(--rose); font-weight: 700; margin-top: 7px; }
.compteur__conso { font-size: var(--t-xs); color: var(--texte-tertiaire); margin-top: 7px; }
.compteur__conso--anomalie { color: var(--or-fonce); font-weight: 700; }

.acces {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  padding: 11px 13px;
  margin-bottom: 7px;
}
.acces--ecart { border-color: var(--or); }

.acces__haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acces__nom { font-size: var(--t-s); font-weight: 600; }
.acces__reference { font-size: var(--t-xs); color: var(--texte-tertiaire); }

.acces__sortie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--separateur);
}
.acces__etiquette { font-size: var(--t-xs); font-weight: 700; color: var(--texte-second); }

.acces__compteur { display: flex; align-items: center; gap: 7px; }

.acces__bouton {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--bordure);
  background: var(--fond);
  font-size: var(--t-l);
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}
.acces__valeur { font-size: var(--t-m); font-weight: 800; min-width: 20px; text-align: center; }

.acces__motif { margin-top: 9px; }
.acces__manque { font-size: var(--t-xs); color: var(--or-fonce); font-weight: 700; margin-bottom: 6px; }

.acces__total {
  display: flex;
  justify-content: space-between;
  background: var(--navy-pale);
  border-radius: var(--rayon-petit);
  padding: 11px 13px;
  font-size: var(--t-s);
  font-weight: 800;
  color: var(--navy);
  margin-top: 4px;
}

.manques {
  background: var(--rose-pale);
  border: 1px solid var(--rose-bordure);
  border-radius: var(--rayon-petit);
  padding: 12px 13px;
  margin-bottom: 11px;
}
.manques__titre {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-s);
  font-weight: 800;
  color: var(--rose);
  margin-bottom: 7px;
}
.manques__titre svg { width: 15px; height: 15px; }
.manques__ligne { font-size: var(--t-xs); color: var(--rose); line-height: 1.5; }

/* Barre d'état d'enregistrement — le prix du différé, payé ouvertement. */
.sauvegarde {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(64px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 700;
  background: var(--teal-pale);
  color: var(--teal-fonce);
  box-shadow: var(--ombre);
  z-index: 5;
}
.sauvegarde svg { width: 14px; height: 14px; }
.sauvegarde--attente { background: var(--or-pale); color: var(--or-fonce); }
.sauvegarde--envoi { background: var(--navy-pale); color: var(--navy); }
.sauvegarde--erreur { background: var(--rose-pale); color: var(--rose); }

/* ── Stock (§6) ──────────────────────────────────────────────────────── */

.sites {
  display: flex;
  gap: 7px;
  padding: 14px 18px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.site {
  padding: 9px 14px;
  min-height: 38px;
  border-radius: 999px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--texte-second);
  white-space: nowrap;
}
.site--actif { background: var(--navy); color: var(--blanc); border-color: var(--navy); }

.alerte-stock {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 18px 12px;
  padding: 11px 13px;
  border-radius: var(--rayon-petit);
  background: var(--rose-pale);
  border: 1px solid var(--rose-bordure);
  color: var(--rose);
  font-size: var(--t-s);
  font-weight: 700;
}
.alerte-stock svg { width: 16px; height: 16px; flex: none; }

.stock__ligne {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  padding: 11px 13px;
  margin-bottom: 8px;
}
.stock__ligne--bas { border-left: 4px solid var(--rose); }

.stock__pastille {
  width: 36px;
  height: 36px;
  border-radius: var(--rayon-petit);
  background: var(--navy-pale);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.stock__pastille svg { width: 17px; height: 17px; }
.stock__pastille--critique { background: var(--rose-pale); color: var(--rose); }

.stock__texte { flex: 1; min-width: 0; }
.stock__nom { font-size: var(--t-s); font-weight: 700; }
.stock__seuil { font-size: var(--t-xs); color: var(--rose); margin-top: 2px; line-height: 1.35; }

.stock__reglage { display: flex; align-items: center; gap: 7px; flex: none; }

.stock__bouton {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--bordure);
  background: var(--fond);
  font-size: var(--t-l);
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}
.stock__bouton:disabled { opacity: 0.4; }

.stock__quantite {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 38px;
  font-size: var(--t-m);
  font-weight: 800;
  line-height: 1.15;
}
.stock__unite { font-size: 10px; color: var(--texte-tertiaire); font-weight: 600; }

/* ── Modale ──────────────────────────────────────────────────────────── */

.modale {
  position: absolute;
  inset: 0;
  background: rgba(27, 31, 35, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 40;
}

.modale__feuille {
  width: 100%;
  max-height: 88%;
  overflow-y: auto;
  background: var(--blanc);
  border-radius: 16px 16px 0 0;
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
  animation: monter 0.18s ease-out;
}

@keyframes monter { from { transform: translateY(18px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .modale__feuille { animation: none; } }

.modale__entete { display: flex; align-items: flex-start; gap: 10px; }
.modale__titre { flex: 1; font-size: var(--t-l); font-weight: 800; color: var(--navy); }

.modale__fermer {
  width: var(--cible);
  height: var(--cible);
  margin: -10px -10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texte-tertiaire);
}
.modale__fermer svg { width: 19px; height: 19px; }

.modale__texte { font-size: var(--t-s); color: var(--texte-second); margin-top: 5px; }

.modale__regle {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--or-pale);
  color: var(--or-fonce);
  border-radius: var(--rayon-petit);
  padding: 10px 12px;
  margin-top: 11px;
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 1.45;
}
.modale__regle svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }

.modale__choix { display: flex; flex-direction: column; gap: 7px; margin-top: 13px; }

.modale__option {
  text-align: left;
  padding: 12px 13px;
  min-height: var(--cible);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  background: var(--blanc);
}
.modale__option--actif { border-color: var(--navy); background: var(--navy-pale); }
.modale__option-libelle { display: block; font-size: var(--t-s); font-weight: 700; }
.modale__option-detail { display: block; font-size: var(--t-xs); color: var(--texte-second); margin-top: 2px; }

.modale__actions { display: flex; gap: 9px; margin-top: 14px; }
.modale__actions .bouton { flex: 1; }

/* ── Messages, notes, annonces ───────────────────────────────────────── */

.message { text-align: center; max-width: 340px; }

.message__pastille {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy-pale);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.message__pastille svg { width: 25px; height: 25px; }
.message--alerte .message__pastille { background: var(--rose-pale); color: var(--rose); }

.message__titre { font-size: var(--t-l); font-weight: 800; color: var(--navy); }
.message__texte { font-size: var(--t-s); color: var(--texte-second); margin-top: 8px; line-height: 1.5; }
.message__actions { display: flex; justify-content: center; gap: 9px; margin-top: 18px; }

.chargement svg { width: 30px; height: 30px; color: var(--navy); margin: 0 auto 12px; animation: tourner 1s linear infinite; }

.alerte-ligne {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--rose-pale);
  border: 1px solid var(--rose-bordure);
  border-radius: var(--rayon-petit);
  padding: 10px 12px;
  margin: 8px 0;
  font-size: var(--t-s);
  font-weight: 700;
  color: var(--rose);
  text-align: left;
  line-height: 1.4;
}
.alerte-ligne svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

.note-ligne {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: var(--rayon-petit);
  padding: 10px 12px;
  margin: 8px 0;
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}
.note-ligne svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.note-ligne--or { background: var(--or-pale); color: var(--or-fonce); }
.note-ligne--teal { background: var(--teal-pale); color: var(--teal-fonce); }
.note-ligne--navy { background: var(--navy-pale); color: var(--navy); }

.vide {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px;
  border-radius: var(--rayon-petit);
  background: var(--blanc);
  border: 1px dashed var(--bordure);
  font-size: var(--t-s);
  color: var(--texte-second);
}
.vide svg { width: 17px; height: 17px; color: var(--teal-fonce); flex: none; }

.annonce {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(72px + env(safe-area-inset-bottom));
  max-width: calc(100% - 36px);
  padding: 11px 16px;
  border-radius: var(--rayon-petit);
  background: var(--navy);
  color: var(--blanc);
  font-size: var(--t-s);
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 6px 18px rgba(29, 53, 87, 0.28);
  z-index: 30;
  animation: monter 0.18s ease-out;
}
.annonce--erreur { background: var(--rose); }

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

.noscript {
  padding: 28px 20px;
  text-align: center;
  font-size: var(--t-m);
  line-height: 1.6;
}

/* ── Secousse — code refusé, saisie invalide ─────────────────────────── */

.secousse { animation: secousse 0.32s ease-in-out; }

@keyframes secousse {
  0%, 100% { transform: none; }
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}

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