/* =====================================================================
   INIONA v3 : style de toute l'appli
   ---------------------------------------------------------------------
   Pensé d'abord pour le téléphone, thème sombre.
   Les couleurs sont définies une seule fois ci-dessous (variables).
   Noms de classes en français : .carte, .bouton-principal, .badge...
   ===================================================================== */

/* ---------- Couleurs et mesures ---------- */
:root {
  --fond:          #18181b;   /* fond de page */
  --fond-profond:  #09090b;   /* bandeaux */
  --fond-carte:    #27272a;   /* cartes */
  --fond-champ:    #3f3f46;   /* boutons discrets */
  --bord:          #3f3f46;
  --texte:         #fafafa;
  --texte-doux:    #a1a1aa;
  --texte-faible:  #71717a;
  --orange:        #f97316;
  --orange-fonce:  #ea580c;
  --orange-clair:  #fdba74;
  --rouge:         #ef4444;
  --rouge-fonce:   #dc2626;
  --vert:          #22c55e;
  --vert-fonce:    #16a34a;
  --jaune:         #facc15;
  --bleu:          #3b82f6;
  --violet:        #8b5cf6;
  --arrondi:       12px;
  --hauteur-nav:   62px;
}

/* ---------- Bases ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  min-height: 100vh;
}
body.avec-navigation { padding-bottom: calc(var(--hauteur-nav) + 16px + env(safe-area-inset-bottom)); }
h1, h2, h3 { line-height: 1.25; margin: 0; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0; }
a { color: var(--orange-clair); }
img { max-width: 100%; }
ul.liste { list-style: none; margin: 0; padding: 0; }
button { font: inherit; }
table { border-collapse: collapse; width: 100%; }

/* ---------- Icônes (police Material Icons, hébergée localement) ---------- */
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("icones/material-icons.woff2") format("woff2");
}
.icone {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 1.35em;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
}
.icone-petite { font-size: 1.05em; }
.icone-geante { font-size: 3.5rem; }

/* ---------- Mise en page ---------- */
.contenu { max-width: 42rem; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.contenu.large { max-width: 80rem; }
.pile { display: flex; flex-direction: column; gap: 12px; }
.pile-serree { display: flex; flex-direction: column; gap: 6px; }
.ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ligne.fin { justify-content: flex-end; }
.ligne.entre { justify-content: space-between; }
.ligne.centre { justify-content: center; }
.grille { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: start; }
.grille.deux-colonnes-toujours { grid-template-columns: 1fr 1fr; }
@media (min-width: 768px)  { .grille.deux-colonnes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .grille.trois-colonnes { grid-template-columns: 1fr 1fr 1fr; } }
.grandit { flex: 1; min-width: 0; }

/* ---------- Bandeau du haut : qui est connecté ---------- */
.barre-haut {
  background: var(--fond-profond);
  border-bottom: 1px solid var(--fond-carte);
  color: var(--texte-doux);
  font-size: .8rem;
  padding: 6px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.barre-haut .qui { display: flex; align-items: center; gap: 6px; min-width: 0; }
.barre-haut b { color: var(--texte); }
.barre-haut a { color: var(--texte-doux); }
.bandeau-vue {
  background: #5b21b6; color: #fff; font-size: .9rem;
  padding: 8px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
}
.bandeau-vue form { margin: 0; }
.bandeau-vue .lien { color: #fff; }

/* Mode démo (équipe fictive) */
.bandeau-demo {
  background: #0369a1; color: #fff; font-size: .9rem;
  padding: 8px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
}
.bandeau-demo .lien { color: #fff; }

/* ---------- Barre de navigation du bas ---------- */
.navigation {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--fond); border-top: 1px solid var(--fond-carte);
  display: flex; justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-lien {
  flex: 1; max-width: 120px; min-height: var(--hauteur-nav);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--texte); text-decoration: none; font-size: .72rem; text-align: center;
}
.nav-lien .icone { font-size: 1.5rem; }
.nav-lien.actif { color: var(--orange); }

/* ---------- Cartes ---------- */
.carte {
  background: var(--fond-carte);
  border-radius: var(--arrondi);
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
a.carte { display: block; color: inherit; text-decoration: none; }
a.carte:hover { background: #303036; }
.carte-titre { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.05rem; }
.entete-page { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.retour { color: var(--texte-doux); text-decoration: none; display: inline-flex; align-items: center; font-size: .9rem; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 8px; padding: 10px 16px; min-height: 44px;   /* 44 px : facile à toucher avec le doigt */
  font-weight: 600; text-decoration: none; cursor: pointer;
  color: #fff; background: var(--fond-champ);
}
.bouton:disabled { opacity: .45; cursor: not-allowed; }
.bouton-principal { background: var(--orange); }
.bouton-principal:hover { background: var(--orange-fonce); }
.bouton-danger { background: var(--rouge); }
.bouton-danger:hover { background: var(--rouge-fonce); }
.bouton-succes { background: var(--vert-fonce); }
.bouton-discret { background: var(--fond-champ); }
.bouton-discret:hover { background: #52525b; }
.bouton-contour { background: transparent; border: 2px solid var(--orange); color: var(--orange-clair); }
.bouton-violet { background: #6d28d9; }
.bouton-bloc { width: 100%; }
.bouton-grand { padding: 14px 18px; font-size: 1.1rem; border-radius: var(--arrondi); }
.bouton-petit { min-height: 34px; padding: 6px 10px; font-size: .85rem; }
.lien { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- Champs de formulaire ---------- */
.champ, select.champ, textarea.champ {
  width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #d4d4d8;
  background: #fff; color: #18181b; font: inherit; font-weight: 600;
}
.champ:focus { outline: 3px solid var(--orange); outline-offset: 1px; }
.champ-grand { font-size: 1.15rem; padding: 14px; }
.majuscules { text-transform: uppercase; }
label.etiquette { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--texte-doux); }
label.case { display: flex; align-items: center; gap: 10px; cursor: pointer; }
label.case input { width: 20px; height: 20px; accent-color: var(--orange); }
.aide { font-size: .8rem; color: var(--texte-faible); }

/* ---------- Badges ---------- */
.badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 6px; white-space: nowrap; }
.badge-orange { background: rgba(249,115,22,.25); color: var(--orange-clair); }
.badge-violet { background: rgba(139,92,246,.35); color: #ddd6fe; }
.badge-bleu   { background: rgba(59,130,246,.3);  color: #bfdbfe; }
.badge-vert   { background: rgba(34,197,94,.25);  color: #bbf7d0; }
.badge-rouge  { background: rgba(239,68,68,.3);   color: #fecaca; }
.badge-jaune  { background: rgba(250,204,21,.25); color: #fef08a; }
.badge-gris   { background: var(--fond-champ);    color: #d4d4d8; }

/* ---------- Encarts d'information ---------- */
.encart { border-radius: var(--arrondi); padding: 14px; border: 1px solid; display: flex; gap: 10px; }
.encart-alerte { background: rgba(113,63,18,.4); border-color: #ca8a04; color: #fef08a; }
.encart-info   { background: rgba(249,115,22,.1); border-color: rgba(249,115,22,.45); color: var(--orange-clair); }
.encart-erreur { background: rgba(220,38,38,.18); border-color: var(--rouge-fonce); color: #fecaca; }
.encart-succes { background: rgba(22,163,74,.18); border-color: var(--vert-fonce); color: #bbf7d0; }

/* ---------- Message flash (après une action) ---------- */
.flash {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 60;
  max-width: 92vw; padding: 10px 16px; border-radius: 8px; color: #fff;
  font-size: .9rem; text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,.5);
  transition: opacity .4s;
}
.flash-ok { background: var(--vert-fonce); }
.flash-erreur { background: var(--rouge-fonce); }
.flash.disparait { opacity: 0; }

/* ---------- Fenêtres (confirmation, formulaires) ---------- */
.modale-fond {
  position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modale {
  background: var(--fond); border: 1px solid var(--bord); border-radius: 16px;
  padding: 20px; width: 100%; max-width: 26rem; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
}
.zoom {
  position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out;
}
.zoom img { max-width: 100%; max-height: 100%; border-radius: 8px; }
img[data-zoom] { cursor: zoom-in; }

/* ---------- Clavier du code PIN ---------- */
.pin-affichage { font: 600 2rem/1 ui-monospace, Consolas, monospace; letter-spacing: .5em; text-align: center; padding: 8px 0 8px .5em; }
.clavier-pin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 300px; margin: 0 auto; }
.centre.pile > form, .centre.pile > .pile { width: 100%; }
.clavier-pin button {
  background: var(--fond-carte); color: var(--texte); border: 0; border-radius: 10px;
  font-size: 1.4rem; padding: 16px 0; cursor: pointer;
}
.clavier-pin button:active { background: var(--fond-champ); }
.clavier-pin button.valider { background: var(--orange); }

/* ---------- Textes ---------- */
.texte-doux   { color: var(--texte-doux); }
.texte-faible { color: var(--texte-faible); }
.texte-orange { color: var(--orange); }
.texte-rouge  { color: #f87171; }
.texte-vert   { color: #4ade80; }
.texte-jaune  { color: var(--jaune); }
.petit  { font-size: .85rem; }
.minuscule { font-size: .75rem; }
.gras   { font-weight: 700; }
.mono   { font-family: ui-monospace, Consolas, "Courier New", monospace; }
.centre { text-align: center; }
.centre.pile { align-items: center; }
.tronque { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.texte-multiligne { white-space: pre-line; }
.logo { display: block; margin: 0 auto; width: 120px; height: auto; }
.logo.petit-logo { width: 72px; }

/* ---------- Listes et tableaux ---------- */
.liste-separee > * + * { border-top: 1px solid var(--bord); }
.liste-separee > * { padding: 10px 0; }
.tableau th { text-align: left; color: var(--texte-doux); font-weight: 600; padding: 8px 10px; white-space: nowrap; background: var(--fond-carte); }
.tableau td { padding: 8px 10px; border-top: 1px solid var(--fond-carte); vertical-align: top; }
.defile-horizontal { overflow-x: auto; }

/* ---------- Matériel (pool) ---------- */
.ligne-materiel { display: flex; gap: 14px; align-items: flex-start; }
.vignette {
  width: 76px; height: 76px; flex-shrink: 0; border-radius: 8px; object-fit: cover;
  background: var(--fond); border: 1px solid var(--bord);
}
.vignette.vide { display: flex; align-items: center; justify-content: center; color: var(--texte-faible); }
.nom-materiel { font-size: 1.1rem; overflow-wrap: anywhere; }
.actions-materiel { display: flex; flex-wrap: wrap; gap: 8px; }
.actions-materiel > form { flex: 1 1 auto; }
.actions-materiel.pile > form { flex: none; }
.photo-fiche { width: 100%; max-height: 260px; object-fit: contain; border-radius: var(--arrondi); background: var(--fond); }
.photo-souci { max-width: 220px; max-height: 220px; border-radius: 8px; object-fit: cover; }
.case-chiffre { background: var(--fond); border-radius: var(--arrondi); padding: 10px; }
.chiffre { font-size: 1.6rem; font-weight: 700; }

/* Sélecteur de quantité  − [ 2 ] +  */
.compteur { display: inline-flex; align-items: center; background: var(--fond); border-radius: 8px; flex-shrink: 0; }
.compteur button {
  background: none; border: 0; color: var(--texte); font-size: 1.3rem; width: 40px; height: 44px; cursor: pointer;
}
.compteur input {
  width: 42px; background: transparent; border: 0; color: var(--texte); text-align: center;
  font: inherit; font-weight: 700; -moz-appearance: textfield; appearance: textfield;
}
.compteur input::-webkit-outer-spin-button, .compteur input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.champ-court { width: 7rem; }

/* ---------- Métrologie ---------- */
.titre-groupe {
  position: sticky; top: 0; z-index: 5; background: var(--fond); padding: 6px 0;
  color: var(--orange); font-size: .95rem; display: flex; align-items: center; gap: 6px;
}
.lien.tri { text-decoration: none; font-weight: 600; color: var(--texte-doux); white-space: nowrap; }
.lien.tri:hover { color: var(--texte); }

/* ---------- Pages de texte, journal d'erreurs ---------- */
.texte-legal { font-size: .92rem; line-height: 1.6; }
.texte-legal h2 { color: var(--orange); margin-top: 8px; }
.texte-legal ul { margin: 0; padding-left: 20px; }
.journal-erreurs {
  background: var(--fond); border-radius: 8px; padding: 10px; font-size: .72rem; line-height: 1.4;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow-y: auto; margin: 0;
}

/* ---------- Divers ---------- */
.cache { display: none !important; }
.separateur { border: 0; border-top: 1px solid var(--bord); margin: 4px 0; width: 100%; }
details > summary { cursor: pointer; font-weight: 600; }
footer.pied { text-align: center; color: var(--texte-faible); font-size: .75rem; padding: 8px 16px 16px; }
footer.pied a { color: var(--texte-faible); }