/*
 * Identité Recyc Matelas — direction « Institutionnel » (arbitrage William 29/08/2026).
 *
 * Charte relevée à la source, pas devinée : couleurs prises dans le fichier du logo
 * (#3AB281) et sur recyc-matelas.fr (titres #09422D en DM Sans 900, vert vif #1AC185,
 * vert foncé #118259, fond #F4F4F4, texte #181818).
 *
 * Trois contraintes d'atelier commandent le reste, et priment sur l'habillage :
 *   - gros caractères et fort contraste (lumière changeante, poussière, écran sale) ;
 *   - cibles tactiles larges (60 à 72 px : usage fréquent avec des gants) ;
 *   - aucune ressource externe — la coquille doit s'ouvrir hors réseau, et la
 *     politique de sécurité du serveur interdit les appels à des tiers.
 */

@import url("polices/dm-sans.css");

:root {
  /* Charte RME */
  --vert-profond: #09422D;   /* titres du site — la couleur qui « fait » RME */
  --vert-fonce: #118259;
  --vert-logo: #3AB281;
  --vert-vif: #1AC185;
  --fond: #F4F4F4;
  --texte: #181818;

  /* Déclinaisons de service */
  --vert-profond-clair: #0D5A3D;
  --texte-doux: #5A5A5A;
  --carte: #FFFFFF;
  --bordure: #E3E7E5;
  --bandeau: #DDE5E1;
  --bandeau-texte: #3F5B4F;
  --alerte: #B3261E;
  --alerte-fond: #FCEBEA;

  /* Chantier : les sections en construction. Un ambre, pas un rouge — c'est un
     avertissement, pas une panne. */
  --chantier: #B26A09;
  --chantier-fond: #FDF3E3;
  --gris-absent: #8A8A8A;

  --ombre: 0 1px 3px rgba(9, 66, 45, .12);
  --rayon: 12px;
}

* { box-sizing: border-box; }

/*
 * L'attribut `hidden` doit TOUJOURS l'emporter.
 *
 * La règle par défaut du navigateur (`[hidden] { display: none }`) a une spécificité
 * si faible que n'importe quel sélecteur de classe portant un `display` l'annule en
 * silence. C'est arrivé ici : `.ecran-code { display: flex }` rendait `hidden` inopérant,
 * et l'écran de saisie du code restait affiché par-dessus l'application après validation
 * — l'application fonctionnait, elle était simplement recouverte.
 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}

body { padding-bottom: env(safe-area-inset-bottom); }

h1, h2, h3 { margin: 0; font-weight: 900; }

/* ============================ Écran de saisie du code ============================ */

.ecran-code {
  position: fixed;
  inset: 0;
  background: var(--vert-profond);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 30;
}

.carte-code {
  background: var(--carte);
  border-radius: 16px;
  padding: 30px 24px 26px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .26);
}

.logo-code { display: block; margin: 0 auto 14px; }
.carte-code h1 { font-size: 25px; color: var(--vert-profond); margin-bottom: 6px; }

.enseigne {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--vert-logo);
  margin: 0 0 16px;
}

.explication { color: var(--texte-doux); font-size: 16px; margin: 0 0 22px; }

.carte-code label {
  display: block;
  text-align: left;
  font-weight: 700;
  color: var(--vert-profond);
  margin-bottom: 6px;
}

.carte-code input {
  width: 100%;
  padding: 14px;
  font-family: inherit;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  border: 2px solid var(--bordure);
  border-radius: 10px;
  margin-bottom: 14px;
  background: #FAFBFA;
}

.carte-code input:focus {
  outline: none;
  border-color: var(--vert-logo);
  background: #fff;
}

.erreur-code {
  background: var(--alerte-fond);
  color: var(--alerte);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
}

.bouton-principal {
  width: 100%;
  min-height: 54px;
  background: var(--vert-profond);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
}

.bouton-principal:active { background: var(--vert-profond-clair); }

.version {
  margin: 18px 0 0;
  font-size: 13px;
  color: #9AA5A0;
  letter-spacing: .02em;
}

/* ================================== En-tête ==================================== */

/* En-tête et bandeau d'état collent ENSEMBLE : après défilement, on doit encore
   pouvoir lire le site, la date, la fraîcheur et la version. */
.haut {
  position: sticky;
  top: 0;
  z-index: 10;
}

.entete {
  background: var(--vert-profond);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 14px;
  padding-top: calc(12px + env(safe-area-inset-top));
}

/* Le logo est le bouton du menu : la cible doit être celle d'un bouton d'atelier
   (52 px comme le bouton rafraîchir), pas celle d'une image de 36 px. */
.bouton-logo {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  margin-left: -8px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: none;
  padding: 0;
  cursor: pointer;
}

.bouton-logo:active { background: rgba(255, 255, 255, .18); }

.logo-entete { width: 36px; height: 36px; display: block; }
.entete-texte { flex: 1; min-width: 0; }

/* « Atelier RME » est l'enseigne de l'application ; le titre est celui de la SECTION.
   Cette hiérarchie tient quand d'autres sections viendront (Pointage, Production). */
.nom-application {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--vert-logo);
}

.titre { font-size: 21px; letter-spacing: .2px; line-height: 1.15; margin-top: 1px; }

/* Le nom du site et la date : le chef d'équipe doit savoir d'un coup d'œil OÙ et QUAND
   — c'est ce qui distingue son écran de celui d'un autre site. */
.contexte { margin: 2px 0 0; font-size: 14px; }
.nom-site { font-weight: 700; color: #fff; }
.contexte .separateur { opacity: .45; margin: 0 6px; }
.date-du-jour { opacity: .85; }

.bouton-rafraichir {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.bouton-rafraichir:active { background: rgba(255, 255, 255, .30); }
.bouton-rafraichir[disabled] { opacity: .55; }
.bouton-rafraichir.tourne svg { animation: rotation .9s linear infinite; }

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

@media (prefers-reduced-motion: reduce) {
  .bouton-rafraichir.tourne svg { animation: none; }
}

/* =============================== Bandeau d'état ================================ */

.bandeau-etat {
  background: var(--bandeau);
  color: var(--bandeau-texte);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 16px;
  text-align: center;
}

.bandeau-etat.en-erreur {
  background: var(--alerte-fond);
  color: var(--alerte);
  font-weight: 700;
}

/* La version, discrète mais toujours là : c'est ce qu'on se demande au téléphone
   quand un poste ne se comporte pas comme les autres. */
.version-bandeau {
  opacity: .65;
  font-weight: 400;
}

.version-bandeau:not(:empty)::before {
  content: " · ";
  opacity: .5;
}

/* ============================== Menu des sections ============================== */

/*
 * Le menu n'utilise PAS l'attribut `hidden`, contrairement au reste de l'application.
 * Raison : `[hidden] { display: none }` empêche toute transition, et un tiroir qui
 * apparaît d'un coup ne dit pas d'où il vient. `visibility` fait les deux à la fois —
 * il autorise le glissement ET retire réellement le menu du parcours au clavier et des
 * clics une fois fermé, ce qu'un simple `transform` ne ferait pas.
 */
.voile-menu {
  position: fixed;
  inset: 0;
  background: rgba(9, 66, 45, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
  z-index: 24;
}

.voile-menu.ouvert {
  opacity: 1;
  visibility: visible;
  transition: opacity .2s ease, visibility 0s;
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(84vw, 330px);
  background: var(--carte);
  box-shadow: 4px 0 24px rgba(0, 0, 0, .22);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s;
  z-index: 25;
}

.menu.ouvert {
  transform: translateX(0);
  visibility: visible;
  transition: transform .22s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .voile-menu, .menu { transition: visibility 0s; }
}

.menu-entete {
  background: var(--vert-profond);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 16px 16px;
  padding-top: calc(14px + env(safe-area-inset-top));
}

.menu-entete-texte { flex: 1; min-width: 0; }
.menu-site { margin: 1px 0 0; font-size: 16px; font-weight: 700; }

.menu-fermer {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.menu-fermer:active { background: rgba(255, 255, 255, .30); }

.menu-liste {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  flex: 1;
  overflow-y: auto;
}

.menu-item {
  width: 100%;
  min-height: 68px;   /* cible d'atelier : le doigt ganté ne vise pas au pixel */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: none;
  border: none;
  border-left: 4px solid transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.menu-item-texte { flex: 1; min-width: 0; }

.menu-item-titre {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: var(--vert-profond);
}

.menu-item-detail {
  display: block;
  font-size: 14.5px;
  color: var(--texte-doux);
  margin-top: 1px;
}

/* La section où l'on se trouve : marquée par la couleur de marque, pas seulement par
   un fond — sur un écran sale et en plein soleil, une nuance de gris ne se voit pas. */
.menu-item[aria-current="page"] {
  border-left-color: var(--vert-vif);
  background: #F1F7F4;
}

.menu-item[aria-disabled="true"] { cursor: default; }
.menu-item[aria-disabled="true"] .menu-item-titre { color: var(--texte-doux); }
.menu-item[aria-disabled="true"] .menu-item-detail { opacity: .8; }

.badge-avenir {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 12px;
  background: #EDEFEE;
  color: var(--texte-doux);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.badge-admin { background: var(--vert-profond); color: #fff; }

/* --- Sélecteur de site : n'apparaît que pour un poste multi-site --- */

.menu-bloc-site { border-top: 1px solid var(--bordure); padding-top: 6px; }

.menu-sous-titre {
  margin: 6px 16px 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.menu-liste-sites { padding: 0 0 4px; flex: 0 0 auto; }
.menu-liste-sites .menu-item { min-height: 56px; }
.menu-liste-sites .menu-item-titre { font-size: 17px; }

.menu-pied {
  border-top: 1px solid var(--bordure);
  padding: 14px 16px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

.menu-poste {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--vert-profond);
}

.menu-version { margin: 0; font-size: 13px; color: #9AA5A0; }

/* ============================ Groupes repliables =============================== */

main { padding: 12px; }

.groupe {
  background: var(--carte);
  border-radius: var(--rayon);
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: var(--ombre);
}

.entete-groupe {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.entete-groupe:active { background: #F5F7F6; }

.titre-groupe {
  flex: 1;
  font-size: 20px;
  font-weight: 700;
  color: var(--vert-profond);
}

.compteur {
  min-width: 34px;
  height: 30px;
  padding: 0 10px;
  border-radius: 15px;
  background: #EDEFEE;
  color: var(--texte-doux);
  font-size: 16px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* « Sur site » est la section qui compte : elle porte la couleur de marque. */
.groupe[data-categorie="sur_site"] .compteur {
  background: var(--vert-profond);
  color: #fff;
}

.chevron {
  width: 11px;
  height: 11px;
  border-right: 3px solid var(--vert-profond);
  border-bottom: 3px solid var(--vert-profond);
  transform: rotate(-45deg);
  transition: transform .18s ease;
  flex: 0 0 auto;
  opacity: .6;
}

.entete-groupe[aria-expanded="true"] .chevron { transform: rotate(45deg); }

.contenu-groupe { border-top: 1px solid var(--bordure); }

/* ============================== Lignes de camion =============================== */

.camion {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--bordure);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.camion:last-child { border-bottom: none; }
.camion:active { background: #F5F7F6; }

.camion-gauche { min-width: 0; }

.camion-cdt {
  font-size: 18px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.camion-detail {
  font-size: 15px;
  color: var(--texte-doux);
  margin-top: 2px;
}

.camion-droite { flex: 0 0 auto; text-align: right; }

.heure-forte {
  font-size: 20px;
  font-weight: 700;
  color: var(--vert-profond);
  white-space: nowrap;
}

.heure-douce { font-size: 15px; color: var(--texte-doux); white-space: nowrap; }

.tonnage {
  font-size: 19px;
  font-weight: 700;
  color: var(--vert-fonce);
  white-space: nowrap;
}

.vide {
  padding: 20px 16px;
  color: var(--texte-doux);
  font-size: 16px;
  text-align: center;
}

/* ================================ Fiche camion ================================= */

.fiche {
  position: fixed;
  inset: 0;
  background: var(--fond);
  z-index: 20;
  overflow-y: auto;
}

/* Même bandeau que la liste : on reste dans la même application, pas dans un ailleurs. */
.fiche-entete {
  position: sticky;
  top: 0;
  background: var(--vert-profond);
  padding: 8px 8px;
  padding-top: calc(8px + env(safe-area-inset-top));
}

.bouton-retour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 14px;
  background: none;
  border: none;
  color: #fff;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.fiche-corps { padding: 20px 16px 40px; }

.fiche-corps h2 {
  font-size: 24px;
  color: var(--vert-profond);
  overflow-wrap: anywhere;
}

.fiche-etiquette {
  display: inline-block;
  margin: 10px 0 20px;
  padding: 5px 13px;
  border-radius: 14px;
  background: var(--vert-profond);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.fiche-champs {
  margin: 0 0 24px;
  background: var(--carte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
}

.fiche-champs > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bordure);
}

.fiche-champs > div:last-child { border-bottom: none; }
.fiche-champs dt { color: var(--texte-doux); font-size: 16px; }

.fiche-champs dd {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--vert-profond);
  text-align: right;
  overflow-wrap: anywhere;
}

/* Coquille en retard sur le serveur. Un ambre, pas un rouge : ce n'est pas une panne,
   c'est une application à fermer et rouvrir. */
.version-en-retard {
  color: var(--chantier) !important;
  font-weight: 700;
}

/* ---------------------- Signalement : la fiche en écriture (V2) ---------------------- */

.sr-seulement {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.fiche-signalement { margin-bottom: 22px; }

.fiche-signalement .bloc-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.fiche-signalement h3 { font-size: 18px; color: var(--vert-profond); margin: 0; }
.fiche-signalement .aide { font-size: 13.5px; color: var(--texte-doux); }

.fiche-signalement .saisie {
  background: var(--carte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  border-left: 4px solid var(--vert-vif);
  padding: 13px;
}

.fiche-signalement textarea {
  width: 100%;
  min-height: 84px;
  border: 1.5px solid var(--bordure);
  border-radius: 9px;
  padding: 11px 12px;
  font: inherit;
  font-size: 17px;
  line-height: 1.45;
  resize: vertical;
  color: var(--texte);
  background: #FCFDFC;
}

.fiche-signalement textarea:focus { outline: 2px solid var(--vert-vif); outline-offset: 1px; }

.apercu {
  margin-top: 11px;
  border-radius: 9px;
  background: #F2F7F4;
  border: 1px dashed var(--vert-logo);
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.apercu .lib {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vert-fonce);
  margin-bottom: 4px;
}

.apercu .prefixe { font-weight: 700; color: var(--vert-profond); }
.apercu .ancien { color: #909994; margin-top: 8px; white-space: pre-wrap; }

/* --- Photos : la file d'envoi ------------------------------------------------- */

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

.vignette {
  width: 72px;
  height: 72px;
  border-radius: 9px;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  background: #55635C center/cover no-repeat;
}

.vignette .etat {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  padding: 3px 2px;
  color: #fff;
  background: rgba(9, 66, 45, .86);
}

.vignette .etat.envoi   { background: rgba(178, 106, 9, .92); }
.vignette .etat.attente { background: rgba(90, 90, 90, .88); }
.vignette .etat.echec   { background: rgba(179, 38, 30, .94); }

/* Retirer n'est possible QUE tant que la photo attend son tour : une fois partie,
   elle ne revient pas — BONX interdit toute suppression. */
.vignette .retirer {
  position: absolute;
  top: 2px; right: 2px;
  width: 24px; height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(24, 24, 24, .72);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.ajouter-photo {
  width: 72px;
  height: 72px;
  border-radius: 9px;
  border: 1.5px dashed var(--vert-logo);
  background: #F4F9F6;
  color: var(--vert-fonce);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  flex: 0 0 auto;
  cursor: pointer;
}

.ajouter-photo .signe { font-size: 22px; line-height: 1; }
.ajouter-photo[disabled] { opacity: .5; cursor: not-allowed; }

/* Une pièce jointe qui n'est pas une image (BSD scanné en PDF) : on ne l'affiche pas
   en vignette, on la nomme. Elle n'a pas été prise ici, mais elle est sur la fiche. */
.piece-fichier {
  width: 72px;
  height: 72px;
  border-radius: 9px;
  background: #EDF1EF;
  color: var(--texte-doux);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  padding: 4px;
  flex: 0 0 auto;
  overflow: hidden;
}

.piece-fichier .type { font-size: 17px; }

.fiche-message {
  margin: 11px 0 0;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 14.5px;
  line-height: 1.45;
  background: #EAF3EC;
  color: var(--vert-profond);
}

.fiche-message.en-erreur { background: var(--alerte-fond); color: var(--alerte); }

.fiche-signalement .bouton-principal { margin-top: 11px; width: 100%; }
.fiche-signalement .bouton-principal[disabled] { opacity: .45; cursor: not-allowed; }

.fiche-commentaire h3 {
  font-size: 18px;
  color: var(--vert-profond);
  margin-bottom: 8px;
}

.fiche-commentaire p {
  margin: 0;
  background: var(--carte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  border-left: 4px solid var(--vert-logo);
  padding: 16px;
  font-size: 17px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fiche-commentaire p.absent {
  color: var(--texte-doux);
  font-style: italic;
  border-left-color: var(--bordure);
}

/* ======================= Sections en construction ============================== */

/*
 * Pointage et Production sont consultables en MAQUETTE, dans l'habillage réel.
 * Deux garde-fous, parce qu'un écran crédible finit toujours par être pris pour vrai :
 *   - un ruban en travers, permanent, visible sur toute copie d'écran ;
 *   - une phrase en clair en haut de l'écran, qui dit ce que le ruban montre — un
 *     lecteur d'écran ne lit pas une décoration.
 */

.ruban-construction {
  position: fixed;
  inset: 0;
  z-index: 15;              /* au-dessus du contenu, sous l'en-tête collant et le menu */
  display: grid;
  place-items: center;
  pointer-events: none;     /* on doit pouvoir essayer les gestes SOUS le ruban */
}

.ruban-bande {
  width: 150%;
  padding: 10px 0;
  transform: rotate(-16deg);
  background: repeating-linear-gradient(
    45deg,
    rgba(178, 106, 9, .93) 0 18px,
    rgba(146, 86, 6, .93) 18px 36px
  );
  color: #fff;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}

.ruban-titre {
  display: block;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.ruban-detail {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  opacity: .92;
}

.maquette { padding: 12px; }

.avertissement-maquette {
  margin: 0 0 12px;
  padding: 11px 14px;
  border-radius: var(--rayon);
  border-left: 4px solid var(--chantier);
  background: var(--chantier-fond);
  color: #7A4806;
  font-size: 15px;
}

.avertissement-maquette strong { font-weight: 700; }

/* ---- Sélecteur d'équipe (inerte : c'est une maquette) ---- */

.segments { display: flex; gap: 8px; margin-bottom: 12px; }

.segment {
  flex: 1;
  min-height: 48px;
  border-radius: 10px;
  border: 1.5px solid var(--bordure);
  background: var(--carte);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--texte-doux);
  text-align: center;
}

.segment.actif {
  background: var(--vert-profond);
  border-color: var(--vert-profond);
  color: #fff;
}

.segment small { display: block; font-weight: 400; font-size: 11.5px; opacity: .75; }

/* ---- Compteurs : le résultat avant de faire défiler ---- */

.resume { display: flex; gap: 8px; margin-bottom: 12px; }

.compte {
  flex: 1;
  background: var(--carte);
  border-radius: 10px;
  padding: 9px 6px;
  text-align: center;
  box-shadow: var(--ombre);
}

.compte b { display: block; font-size: 22px; font-weight: 900; line-height: 1.1; }
.compte span { font-size: 11.5px; color: var(--texte-doux); }
.compte.present b { color: var(--vert-fonce); }
.compte.absent b { color: var(--gris-absent); }
.compte.retard b { color: var(--chantier); }

/* ---- Liste de pointage ---- */

.liste-personnes {
  background: var(--carte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
}

.personne {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bordure);
}

.personne:last-child { border-bottom: none; }

/* Les vignettes sont des INITIALES : les photos n'existent nulle part aujourd'hui,
   et en inventer donnerait une fausse idée de ce qui est prêt. */
.vignette {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: var(--vert-logo);
}

.vignette.grise { background: #B8C2BD; }

.personne-infos { flex: 1; min-width: 0; }
.personne-nom { font-size: 15.5px; font-weight: 500; line-height: 1.2; }
.personne-nom b { font-weight: 700; }

.motif {
  font-size: 12.5px;
  margin-top: 3px;
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  background: #EEF1EF;
  color: var(--texte-doux);
}

.motif.conge { background: #E7EEF9; color: #2A5B96; }
.motif.formation { background: #EAF3EC; color: var(--vert-fonce); }
.motif.maladie { background: #F6ECEC; color: #96453C; }

.marques { margin-top: 5px; display: flex; gap: 6px; flex-wrap: wrap; }

.marque {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 9px;
  background: var(--chantier-fond);
  color: var(--chantier);
  font-weight: 500;
}

.marque.note { background: #EDF1EF; color: var(--texte-doux); }

/* ⭐ Le geste principal a la plus grande cible : cocher « présent » se répète quinze
   fois par poste, souvent avec des gants. Retard et commentaire, plus rares, sont
   derrière deux petits boutons. */
.bascule {
  width: 60px;
  height: 36px;
  border-radius: 18px;
  border: none;
  background: #D6DBD8;
  position: relative;
  flex: 0 0 auto;
  padding: 0;
  cursor: pointer;
  transition: background .15s ease;
}

.bascule::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: left .15s ease;
}

.bascule[aria-pressed="true"] { background: var(--vert-fonce); }
.bascule[aria-pressed="true"]::after { left: 27px; }

@media (prefers-reduced-motion: reduce) {
  .bascule, .bascule::after { transition: none; }
}

.actions-personne { display: flex; gap: 6px; flex: 0 0 auto; }

.mini {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1.5px solid var(--bordure);
  background: var(--carte);
  display: grid;
  place-items: center;
  font-size: 15px;
  cursor: pointer;
}

.mini.actif { border-color: var(--chantier); background: var(--chantier-fond); }

/* ---- Production ---- */

.bloc {
  background: var(--carte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  margin-bottom: 10px;
  overflow: hidden;
}

.tete-bloc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  width: 100%;
}

.tete-bloc .lib {
  flex: 1;
  font-weight: 700;
  font-size: 16.5px;
  color: var(--vert-profond);
  text-align: left;
}

.tete-bloc .cpt { font-size: 12.5px; color: var(--texte-doux); }

.tete-bloc-bouton {
  min-height: 60px;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

.tete-bloc-bouton:active { background: #F5F7F6; }
.tete-bloc-bouton[aria-expanded="true"] .chevron { transform: rotate(45deg); }

.contenu-autres { border-top: 1px solid var(--bordure); }

.note-maquette {
  margin: 0;
  padding: 14px;
  font-size: 15px;
  color: var(--texte-doux);
  line-height: 1.5;
}

.note-maquette strong { color: var(--vert-profond); }

.matiere {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-top: 1px solid var(--bordure);
}

.matiere .lib { flex: 1; font-size: 15.5px; font-weight: 500; }

/* Boutons − / + plutôt qu'un clavier : on compte des balles, en petit nombre,
   debout dans un atelier. */
.pas { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.pas button {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid var(--bordure);
  background: var(--carte);
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  color: var(--vert-profond);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.pas button:active { background: #EFF3F1; }

.pas .val {
  min-width: 42px;
  text-align: center;
  font-size: 19px;
  font-weight: 900;
  color: var(--vert-profond);
}

.pas .val.zero { color: #B8C2BD; font-weight: 500; }

/* Le total et le tonnage AVANT validation : c'est le dernier moment où une erreur de
   saisie se voit encore. « estimé » n'est pas une précaution de style — le poids moyen
   par balle est figé dans BONX et connu pour dériver. */
.total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 14px;
  background: #EAF0EC;
}

.total .lib { font-weight: 700; color: var(--vert-profond); font-size: 15.5px; }
.total-droite { text-align: right; }
.total .chiffre { display: block; font-weight: 900; font-size: 19px; color: var(--vert-profond); }
.total .estim { display: block; font-size: 12.5px; color: var(--texte-doux); }

.valider { margin-top: 4px; }
.valider[disabled] { opacity: .5; cursor: not-allowed; }

/* ========================= Parc des téléphones (Admin) ========================= */

.vue-parc { padding: 12px; }

.parc-resume {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--texte-doux);
}

.poste-carte {
  background: var(--carte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  margin-bottom: 10px;
  padding: 13px 15px;
  border-left: 4px solid var(--vert-vif);
}

/* Un poste révoqué n'est pas retiré de la liste : savoir qu'il a existé, et quand il a
   été coupé, fait partie de ce qu'on vient chercher ici. */
.poste-carte.revoque { border-left-color: var(--gris-absent); opacity: .72; }

.poste-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.poste-nom {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--vert-profond);
  overflow-wrap: anywhere;
}

.poste-nom.sans-nom { font-weight: 500; font-style: italic; color: var(--texte-doux); }

.poste-niveau {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 11px;
  background: #EDEFEE;
  color: var(--texte-doux);
}

.poste-niveau.rex { background: #EAF3EC; color: var(--vert-fonce); }
.poste-niveau.admin { background: var(--vert-profond); color: #fff; }

.poste-sites { margin-top: 5px; display: flex; gap: 5px; flex-wrap: wrap; }

.puce-site {
  font-size: 12.5px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 10px;
  background: #EAF0EC;
  color: var(--vert-profond);
}

/* Flex + wrap plutôt qu'une ligne de `span` : sans point de coupure entre eux, la ligne
   débordait de la carte sur un écran de téléphone. Chaque morceau reste insécable, mais
   l'ensemble passe à la ligne. */
.poste-lignes {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--texte-doux);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
}

.poste-lignes span { white-space: nowrap; }
.poste-lignes .separe { opacity: .45; }

/* Le dernier changement de niveau, sur sa propre ligne. Pas de `nowrap` ici — c'est ce
   qui faisait déborder la carte quand cette phrase vivait parmi les compteurs. */
.poste-journal {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--texte-doux);
  overflow-wrap: anywhere;
}

/* --- Changement de niveau ------------------------------------------------------
   Le contrôle EST l'affichage du niveau : le segment actif dit où en est le poste.
   Une pastille en plus, à côté, ferait deux choses qui disent la même — et qui
   pourraient se contredire à la moindre erreur de rendu. */

.poste-niveaux {
  margin-top: 10px;
  display: flex;
  gap: 6px;
}

.niveau-choix {
  flex: 1 1 0;
  min-height: 46px;          /* cible tactile : usage avec des gants */
  padding: 6px 4px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--texte-doux);
  background: #F1F3F2;
  border: 1.5px solid transparent;
  border-radius: 9px;
  cursor: pointer;
}

.niveau-choix[aria-pressed="true"] {
  background: var(--vert-profond);
  border-color: var(--vert-profond);
  color: #fff;
}

/* Le niveau le plus élevé se distingue même quand il n'est pas choisi : c'est celui
   dont l'attribution doit rester un geste qu'on remarque. */
.niveau-choix.admin:not([aria-pressed="true"]) {
  border-color: var(--chantier);
  color: var(--chantier);
  background: var(--chantier-fond);
}

.niveau-choix[disabled] { opacity: .55; cursor: not-allowed; }

/* Pourquoi ce poste n'est pas modifiable. Le dire vaut mieux qu'afficher un contrôle
   grisé sans raison — un bouton mort se lit comme une panne. */
.poste-fige {
  margin: 9px 0 0;
  font-size: 13.5px;
  font-style: italic;
  color: var(--texte-doux);
}

.poste-carte.moi { border-left-color: var(--vert-profond); }

.parc-message {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: var(--rayon);
  font-size: 14.5px;
  background: #EAF3EC;
  color: var(--vert-profond);
}

.parc-message.en-erreur { background: var(--alerte-fond); color: var(--alerte); }