/* BLK Emballages — thème clair « entrepôt » par défaut (fond crème anti-éblouissement,
   textes contrastés), thème sombre en option via le bouton 🌙 (attribut data-theme). */
:root {
  --accent: #a86f38;
  --accent-dark: #8a5a2b;
  --bg: #f2efe9;
  --card: #ffffff;
  --text: #211d18;
  --muted: #7a736a;
  --ok: #2e7d32;
  --todo: #e65100;
  --danger: #c62828;
  --border: #dcd2c0;
  --h3-band: rgba(168, 111, 56, 0.10);
  --btn-primary-text: #ffffff;
}
[data-theme="dark"] {
  --accent: #d99b4e;
  --accent-dark: #e2ab63;
  --bg: #15181d;
  --card: #1f242b;
  --text: #e8e4dd;
  --muted: #9aa2ad;
  --ok: #3fb950;
  --todo: #f0883e;
  --danger: #f85149;
  --border: #313841;
  --h3-band: rgba(217, 155, 78, 0.13);
  --btn-primary-text: #241a0d;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 16px; }
.hidden { display: none !important; }
a { color: inherit; text-decoration: none; }

/* Boutons — hauteur mini 44px pour le tactile */
.btn { min-height: 46px; padding: 10px 18px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn-primary { background: var(--accent); color: var(--btn-primary-text); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { background: transparent; color: var(--accent-dark); border: 1px solid var(--border); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); margin-top: 24px; }
.error { color: var(--danger); margin-top: 10px; }
.empty { color: var(--muted); font-style: italic; margin: 12px 0; }
.hint { color: var(--muted); font-size: 13px; margin-top: 6px; }

/* Connexion — mêmes proportions que l'écran BLKargo (carte 420 px, logo 140 px,
   respirations identiques), aux couleurs carton de BLKarton.
   L'écran reste SOMBRE quel que soit le thème : le logisticien choisit clair ou
   sombre une fois entré dans l'appli (bouton 🌙 de la barre du haut). */
#login-screen {
  --bg: #15181d;
  --card: #1f242b;
  --text: #e8e4dd;
  --muted: #9aa2ad;
  --border: #313841;
  --accent: #d99b4e;
  --accent-dark: #e2ab63;
  --danger: #f85149;
  --btn-primary-text: #241a0d;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background: var(--bg);
  color: var(--text);
}
/* ---- Page de garde ----
   Meme dessin que celle de BLKargo : le logo sur sa plaque blanche, le nom en
   grand dans l'accent de l'application, une phrase dessous. */
.home-hero {
  text-align: center;
  margin: 4px 0 24px;
}
/* `content-box` : la feuille pose `border-box` sur tout, si bien que la largeur
   annoncee incluait la marge interieure — le logo se retrouvait ecrase dans une
   plaque de 150 px dont 48 de remplissage. Ici la largeur est celle du logo, la
   marge s'ajoute autour. */
.home-logo {
  display: block;
  box-sizing: content-box;
  width: 118px;
  max-width: 100%;
  margin: 0 auto 16px auto;
  background: #fff;
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25);
}
.home-title {
  font-size: 2.1em;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.5px;
  margin: 0 0 8px;
}
.home-tagline {
  font-size: 1.15em;
  color: var(--muted);
  margin: 0;
}
@media (max-width: 640px) {
  .home-logo { width: 120px; padding: 14px 16px; }
  .home-title { font-size: 1.7em; }
  .home-tagline { font-size: 1em; }
}

.login-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 44px 40px 40px;
  width: 420px;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
/* Le logo est un PNG detoure aux lettres noires : il lui faut son fond blanc,
   sinon il disparait sur le theme sombre. La plaque respire — le logo ne touche
   plus ses bords — et l'ombre la detache de la carte au lieu de l'y coller. */
.login-logo {
  display: block;
  box-sizing: content-box;
  width: 158px;
  max-width: 100%;
  margin: 0 auto 26px auto;
  background: #fff;
  border-radius: 18px;
  padding: 18px 22px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
/* Le nom porte l'ecran : plus grand, plus gras, et l'accent de l'application. */
.login-title {
  color: var(--accent);
  font-size: 2.1em;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0 0 8px;
}
.login-sub { color: var(--muted); font-size: .95em; line-height: 1.5; margin: 0 0 34px; }

/* Formulaire : libellés alignés à gauche, champs pleine largeur */
.login-form { text-align: left; }
.login-form label { display: block; margin-bottom: 6px; font-size: .9em; color: var(--text); }
.login-card input {
  width: 100%;
  min-height: 46px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 20px;
  background: var(--bg);
  color: var(--text);
}
.login-card input::placeholder { color: var(--muted); }
.login-card input:focus { outline: none; border-color: var(--accent); }
.login-hint { color: var(--muted); font-size: 12.5px; margin: -14px 0 20px; }
.pw-wrap { position: relative; }
/* Croix pour vider un champ. Elle n'apparaît qu'une fois quelque chose saisi,
   et se range à gauche de l'œil quand le champ en a un (mot de passe). */
/* Lien discret sous le bouton de connexion. */
.lien-discret {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 6px;
  border: none;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
.lien-discret:hover { color: var(--accent); }
.input-wrap { position: relative; display: block; }
.input-wrap input { padding-right: 44px; }
.input-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.input-clear.visible { display: block; }
.input-clear:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.pw-wrap.avec-oeil input { padding-right: 84px; }
.pw-wrap.avec-oeil .input-clear { right: 46px; }
.pw-wrap input { padding-right: 50px; }
#pw-eye {
  position: absolute;
  right: 8px;
  top: 7px;
  width: 34px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
#pw-eye:hover { background: rgba(255, 255, 255, 0.07); }
.login-card .btn {
  width: 100%;
  justify-content: center;
  padding: 14px;
  min-height: 52px;
  font-size: 1.1em;
  font-weight: 600;
}
.login-card .btn:disabled { opacity: .65; cursor: default; }
.login-spinner { color: var(--accent); font-size: .9em; margin-top: 15px; }

/* Barre du haut */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--card); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 12px; }
/* Logo code-barres sur fond marron */
/* La pastille de la barre du haut passe au blanc : elle portait la couleur
   d'accent parce que l'ancien logo, carre et sur fond blanc, s'y decoupait mal.
   Le nouveau demande du blanc, la pastille le lui donne. */
.logo-badge { background: #fff; padding: 5px 10px; border-radius: 10px; display: inline-flex; }
.logo-badge img { height: 30px; width: auto; display: block; }
/* Ancien logo carton (SVG inline, couleurs pilotées par le thème) */
.brand-old { height: 58px; width: 218px; display: block; }
.topbar-actions { display: flex; gap: 8px; }
main { max-width: 960px; margin: 0 auto; padding: 20px; }
.back { display: inline-block; color: var(--accent-dark); margin-bottom: 12px; }
/* Barre de navigation de la fiche : le retour a gauche, « revenir aux recherches »
   a droite — l'equipe repartait jusque-la par le logo. */
.fiche-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.fiche-nav .back { margin-bottom: 0; }

/* Accueil */
.search-bar input { width: 100%; min-height: 54px; padding: 12px 18px; font-size: 17.5px; border: 2px solid var(--border); color: var(--text); border-radius: 12px; background: var(--card); }
.home-stats { color: var(--muted); margin: 12px 0 20px; font-size: 15.5px; }
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.brand-tile { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; transition: box-shadow 0.15s; }
.brand-tile:hover { box-shadow: 0 4px 16px rgba(45, 42, 38, 0.1); }
.brand-tile h3 { margin-bottom: 6px; font-size: 20px; }
.brand-tile p { color: var(--muted); font-size: 15px; margin-bottom: 10px; }
.progress { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--ok); border-radius: 3px; }

/* Listes produits */
.product-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.product-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-height: 54px; font-size: 16.5px; }
.product-name { flex: 1; }
.location-chip { background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px; font-size: 13px; color: var(--accent-dark); white-space: nowrap; }

/* Fiche produit */
.fiche { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
/* En-tête de fiche : nom du produit en grand + référence en étiquette */
.fiche-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.product-title {
  font-size: 1.5em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
}
.sku-chip {
  font-size: 0.93em;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.5px;
}
.sku-label { font-weight: 700; color: var(--accent-dark); }
.fiche section { margin-bottom: 28px; }
/* Titres de section : grands, texte marron sur fond dégradé marron doux (style BLKargo) */
.fiche h3 {
  color: var(--accent-dark);
  font-size: 1.3em;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border-left: 5px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, var(--h3-band), transparent 80%);
}
/* Photo principale : grande, centrée, entière (pas rognée) */
.photo-main { display: flex; justify-content: center; margin-bottom: 14px; }
.photo-main-inner { position: relative; display: inline-block; }
.photo-main img {
  display: block;
  max-width: min(460px, 100%);
  max-height: 460px;
  width: auto;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
}
/* Photos supplémentaires : miniatures centrées sous la principale */
.photo-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 12px; }
.photo-grid .photo-item img { width: 110px; height: 110px; }
.photo-item { position: relative; }
.photo-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.photo-delete { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.55); color: #fff; border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; }
.video-box video { width: 100%; max-height: 420px; border-radius: 8px; background: #000; margin-bottom: 12px; }

/* Import */
.import-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.import-result ul { margin: 8px 0 0 20px; color: var(--muted); }

/* Mobile — vue téléphone */
@media (max-width: 600px) {
  main { padding: 12px; }
  .brand-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .fiche { padding: 14px; }
  .fiche h3 { font-size: 1.15em; }
  .product-title {
  font-size: 1.5em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
}
  .sku-chip {
  font-size: 0.93em;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.5px;
}
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .logo-badge img { height: 24px; }
  .brand-old { height: 42px; width: 158px; }
  .topbar-actions { margin-left: auto; }
  .topbar-actions .btn { min-height: 40px; padding: 6px 10px; font-size: 14px; }
  .photo-main img { max-height: 320px; }
  .plan-pin { font-size: 40px; }
  .plan-pin::after { width: 92px; height: 92px; margin-left: -46px; bottom: -46px; }
  .pin-level-badge { font-size: 13px; padding: 5px 10px; transform: translate(-50%, 50px); }
  .pack-tab { min-height: 38px; padding: 7px 14px; font-size: 14px; }
  .qty-grid { grid-template-columns: repeat(2, 1fr); }
  .catalog-item { font-size: 13px; padding: 7px 11px; }
  .edit-actions { flex-wrap: wrap; }
}

/* Fiche produit — édition inline (emballage, emplacement, process) + liste d'étapes */
.edit-box { margin-top: 8px; }
.edit-box textarea, .edit-box input[type="text"] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
}
.edit-box textarea:focus, .edit-box input[type="text"]:focus { outline: none; border-color: var(--accent); }
.edit-actions { display: flex; gap: 8px; margin-top: 10px; }
.steps-list { margin: 8px 0 12px 4px; padding-left: 22px; }
.steps-list li { margin-bottom: 10px; line-height: 1.5; }
.steps-list li::marker { color: var(--accent); font-weight: 700; }

/* Plan de l'entrepôt + épingle « vous êtes ici » */
.plan-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
}
.plan-wrap img { display: block; max-width: 100%; user-select: none; }
.plan-wrap.placing { cursor: crosshair; box-shadow: 0 0 0 3px var(--accent); }
.plan-pin {
  position: absolute;
  transform: translate(-50%, -96%); /* la pointe de l'épingle tombe pile sur le point cliqué */
  font-size: 54px;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(45, 42, 38, 0.5));
  animation: pin-drop 0.35s ease;
}
/* La bulle « C'est dans cette zone » a été retirée le 03/09/2026 : la zone
   entière est en rose, l'étiquette ne faisait que répéter et masquer le plan. */
/* Zone large autour du point : « c'est dans cette zone » */
.plan-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -62px;
  width: 124px;
  height: 124px;
  margin-left: -62px;
  background: rgba(225, 29, 72, 0.13);
  border: 2px dashed rgba(225, 29, 72, 0.55);
  border-radius: 50%;
  animation: zone-breathe 2.4s ease-in-out infinite;
}
/* Surbrillance de l'emplacement entier : le produit occupe toute la zone
   (ex. les canettes = tout Palettier 1), l'épingle n'en marque que le repère.
   Le rectangle vient de PLAN_ZONES dans app.js. */
.plan-zone-hl {
  position: absolute;
  box-sizing: border-box;
  /* Bien visible de loin (demande équipe entrepôt) : fond plus dense,
     bordure épaisse et halo lumineux qui pulse. */
  background: rgba(220, 38, 38, 0.34);
  border: 4px solid rgba(200, 24, 24, 0.95);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.75), 0 0 18px 6px rgba(220, 38, 38, 0.45);
  pointer-events: none;
  /* Pulsation en opacité + halo seulement : un scale ferait déborder le
     rectangle hors de la zone qu'il est censé désigner. */
  animation: zone-glow 1.8s ease-in-out infinite;
}
@keyframes zone-glow {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.75), 0 0 22px 8px rgba(220, 38, 38, 0.55); }
  50% { opacity: 0.8; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.75), 0 0 10px 3px rgba(220, 38, 38, 0.3); }
}
/* Mode modification : la zone se laisse attraper (déplacement) et son coin
   bas-droit ◢ tirer (redimensionnement). Plus de pulsation pour rester stable. */
.plan-zone-hl.editable {
  pointer-events: auto;
  cursor: move;
  touch-action: none;
  animation: none;
}
.zone-resize {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(220, 38, 38, 0.9);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  border-radius: 8px 0 8px 0;
  cursor: nwse-resize;
  touch-action: none;
  user-select: none;
}
/* Macaron « C'est ici » au centre de la zone désignée */
.zone-macaron {
  position: absolute;
  transform: translate(-50%, -50%);
  background: #dc2626;
  color: #fff;
  font: 800 14px 'Segoe UI', Arial, sans-serif;
  letter-spacing: .2px;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 0 0 3px #fff, 0 3px 10px rgba(45, 42, 38, 0.35);
}
/* Badge d'étage : juste sous le macaron, pour ne pas se marcher dessus */
.pin-level-badge.on-zone { transform: translate(-50%, 22px); }
/* Accrochés à un bord de zone : alignés sur ce bord, ils s'étendent vers
   l'allée (le badge étage, plus large que le macaron, ne déborde plus). */
.zone-macaron.anchor-right { transform: translate(0, -50%); }
.zone-macaron.anchor-left { transform: translate(-100%, -50%); }
.pin-level-badge.on-zone.anchor-right { transform: translate(0, 22px); }
.pin-level-badge.on-zone.anchor-left { transform: translate(-100%, 22px); }
/* Dans une zone repérée, le halo rond de l'épingle ferait doublon */
.plan-pin.in-zone::after { display: none; }

@keyframes zone-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.75; }
}
@keyframes pin-drop {
  from { transform: translate(-50%, -170%); opacity: 0; }
  to   { transform: translate(-50%, -96%); opacity: 1; }
}

/* Bandeau « zone de rangement non définie » : traverse tout le plan */
.plan-banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: repeating-linear-gradient(45deg,
    rgba(220, 38, 38, 0.93) 0 22px,
    rgba(154, 22, 22, 0.93) 22px 44px);
  color: #fff;
  font: 800 16px 'Segoe UI', Arial, sans-serif;
  letter-spacing: 0.4px;
  text-align: center;
  padding: 14px 10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  box-shadow: 0 3px 14px rgba(45, 42, 38, 0.35);
  pointer-events: none;
}

/* Bandeau « pas de photo disponible » — même esprit hachuré que .plan-banner, en gris neutre */
.photo-banner {
  background: repeating-linear-gradient(45deg,
    rgba(107, 114, 128, 0.16) 0 22px,
    rgba(107, 114, 128, 0.30) 22px 44px);
  border: 2px dashed #9ca3af;
  border-radius: 12px;
  color: var(--text, #374151);
  font: 800 16px 'Segoe UI', Arial, sans-serif;
  letter-spacing: 0.4px;
  text-align: center;
  padding: 28px 12px;
  margin: 6px 0 12px;
}

/* Bloc Emballage — pastilles colorées par famille + pilules cliquables en édition */
.mat-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  vertical-align: 2px;
}
.mat-empty { color: var(--muted); font-style: italic; margin: 12px 0; }
.material-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 14px; }
.material-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 16px 8px 10px;
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid;
  box-shadow: 0 1px 3px rgba(45, 42, 38, 0.08);
}
.material-chip .chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  font-size: 14px;
}
/* Familles : carton ambre, capote bleu, calage vert, enveloppe violet, autre gris */
.material-chip.mat-carton { background: #fdf1e0; border-color: #e0b070; color: #8a5b20; }
.material-chip.mat-capote { background: #e7f1fd; border-color: #86b4ec; color: #1d4ed8; }
.material-chip.mat-calage { background: #e5f6ec; border-color: #7fd3a4; color: #047857; }
.material-chip.mat-env    { background: #f1ebfb; border-color: #b79ae8; color: #6d28d9; }
.material-chip.mat-autre  { background: #f2f0ed; border-color: #c4bcb0; color: #6b665f; }

.catalog-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 18px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.catalog-group { display: flex; flex-wrap: wrap; gap: 8px; }
/* Pilule cliquable : la case à cocher est cachée, le style fait le travail */
.catalog-item {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--muted);
  transition: all 0.15s ease;
  user-select: none;
}
.catalog-item:hover { border-color: var(--accent); color: var(--text); }
.catalog-item input { position: absolute; opacity: 0; pointer-events: none; }
.catalog-item:has(input:checked) { box-shadow: 0 1px 4px rgba(45, 42, 38, 0.12); }
.catalog-item.mat-carton:has(input:checked) { background: #fdf1e0; border-color: #d99b4e; color: #8a5b20; }
.catalog-item.mat-capote:has(input:checked) { background: #e7f1fd; border-color: #3b82f6; color: #1d4ed8; }
.catalog-item.mat-calage:has(input:checked) { background: #e5f6ec; border-color: #10b981; color: #047857; }
.catalog-item.mat-env:has(input:checked)    { background: #f1ebfb; border-color: #8b5cf6; color: #6d28d9; }
.catalog-item:has(input:checked)::before { content: "\2713"; font-weight: 800; margin-right: 6px; }

/* Épingle déplaçable directement à la souris (mode édition) */
.plan-pin.draggable { pointer-events: auto; cursor: grab; touch-action: none; }
.plan-pin.draggable:active { cursor: grabbing; }

/* Badge « Étage x/3 » accroché sous la zone de l'épingle */
.pin-level-badge {
  position: absolute;
  transform: translate(26px, 6px); /* sur le côté de l'épingle, pour ne pas masquer la zone */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid #e11d48;
  color: #be123c;
  font: 800 12px 'Segoe UI', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(45, 42, 38, 0.25);
  pointer-events: none;
  white-space: nowrap;
}
.pin-level-badge.editable { pointer-events: auto; cursor: pointer; }
.pin-level-badge.editable:hover { background: #fff1f2; }
.mini-rack { display: inline-flex; flex-direction: column; gap: 2px; }
.mini-rack i {
  display: block;
  width: 12px;
  height: 3px;
  border-radius: 2px;
  background: #e5d5d9;
}
.mini-rack i.on { background: #e11d48; }

/* Fenêtre de choix d'étage après placement de l'épingle */
.level-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 42, 38, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
  padding: 20px;
}
.level-card {
  background: var(--card);
  border-radius: 16px;
  padding: 26px 24px;
  width: min(440px, 100%);
  box-shadow: 0 12px 40px rgba(45, 42, 38, 0.3);
}
.level-card h3 { margin-bottom: 14px; color: var(--accent-dark); }
.level-card .rack-view { max-width: none; margin-bottom: 14px; }

/* Fenêtre de choix d'étage : palettier vu de face, étagères avec cartons */
.level-sub { color: var(--muted); font-size: 13.5px; margin: -6px 0 16px; }
.lvl-rack {
  border-left: 10px solid #94a3b8;
  border-right: 10px solid #94a3b8;
  border-radius: 6px 6px 0 0;
  padding: 0 6px;
  margin-bottom: 16px;
  background: linear-gradient(180deg, #fdfcfa, #f4efe7);
}
.lvl-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 12px 10px 0;
  border-bottom: 7px solid #c98a4b;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.lvl-row:hover { background: #fdf3e3; }
.lvl-row.selected { background: #e5f6ec; box-shadow: inset 0 0 0 2px #10b981; }
.lvl-boxes { font-size: 20px; letter-spacing: 4px; line-height: 1; padding-bottom: 2px; opacity: 0.85; }
.lvl-lab { font-weight: 700; color: var(--text); padding-bottom: 4px; }
.lvl-lab small { color: var(--muted); font-weight: 600; margin-left: 4px; }
.lvl-check { margin-left: auto; color: #047857; font-weight: 800; font-size: 18px; padding-bottom: 2px; }
.lvl-ground { height: 8px; background: #94a3b8; border-radius: 0 0 3px 3px; margin: 0 -6px; }

/* Onglets d'emballage par quantité (Par 1, Par 2… Par 8) */
.pack-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pack-tab {
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.pack-tab:hover:not(.active) { border-color: var(--accent); color: var(--text); }
.pack-tab.active { background: var(--accent); border-color: var(--accent); color: var(--btn-primary-text); }
.pack-add { font-size: 17px; padding: 8px 14px; }

/* Liste des emballages de l'onglet actif */
.pack-list { list-style: none; margin: 4px 0 14px; padding: 0; max-width: 540px; }
.pack-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text);
}
.pack-list li:last-child { border-bottom: none; }
.pack-ico {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.pack-list li.mat-carton .pack-ico { background: #fdf1e0; }
.pack-list li.mat-capote .pack-ico { background: #e7f1fd; }
.pack-list li.mat-calage .pack-ico { background: #e5f6ec; }
.pack-list li.mat-env .pack-ico    { background: #f1ebfb; }
.pack-list li.mat-autre .pack-ico  { background: #f2f0ed; }

/* Choix de la quantité pour un nouvel onglet */
.qty-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.qty-btn {
  min-height: 46px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--card);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}
.qty-btn:hover:not([disabled]) { border-color: var(--accent); background: #fdf3e3; }
.qty-btn[disabled] { opacity: 0.35; cursor: not-allowed; }

/* ── Correctifs mode sombre pour les composants à fond clair codé en dur ── */
[data-theme="dark"] .pin-level-badge { background: #1f242b; }
[data-theme="dark"] .pin-level-badge.editable:hover { background: #2a2f37; }
[data-theme="dark"] .lvl-rack { background: linear-gradient(180deg, #232830, #1b2026); border-left-color: #5a6472; border-right-color: #5a6472; }
[data-theme="dark"] .lvl-ground { background: #5a6472; }
[data-theme="dark"] .lvl-row:hover { background: #2c3038; }
[data-theme="dark"] .lvl-row.selected { background: #1e3229; }
[data-theme="dark"] .qty-btn:hover:not([disabled]) { background: #2c3038; }
[data-theme="dark"] .rack-editable .rack-level:hover { background: #2c3038; }
[data-theme="dark"] .escalier, [data-theme="dark"] .plan-wrap { background: var(--card); }
[data-theme="dark"] .catalog-item:hover { color: var(--text); }
/* Pastilles familles : fonds pastel conservés, mais textes foncés pour rester lisibles dessus */
[data-theme="dark"] .catalog-item.mat-carton:has(input:checked),
[data-theme="dark"] .catalog-item.mat-capote:has(input:checked),
[data-theme="dark"] .catalog-item.mat-calage:has(input:checked),
[data-theme="dark"] .catalog-item.mat-env:has(input:checked) { filter: none; }
[data-theme="dark"] .pack-list li { color: var(--text); }
[data-theme="dark"] .level-card { background: var(--card); }
[data-theme="dark"] .login-card { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); }

/* Champs de la fenêtre changement de mot de passe */
.pw-modal-input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 10px;
  background: var(--bg);
  color: var(--text);
}
.pw-modal-input:focus { outline: none; border-color: var(--accent); }

/* Œil des champs de la fenêtre changement de mot de passe */
.pw-eye-btn {
  position: absolute;
  right: 6px;
  top: 8px;
  width: 36px;
  height: 30px;
  border: none;
  background: transparent;
  font-size: 17px;
  cursor: pointer;
}
.pw-wrap .pw-modal-input { padding-right: 48px; }

/* Puces de recherche par catégorie — style BLKargo, tons marron du logo */
.cat-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: linear-gradient(180deg, var(--card), var(--bg));
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 3px rgba(45, 42, 38, 0.08);
}
.cat-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.cat-chip.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: var(--btn-primary-text);
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(168, 111, 56, 0.35);
}
.cat-ico { font-size: 15px; }
@media (max-width: 600px) {
  .cat-chip { padding: 7px 12px; font-size: 13px; }
}

/* Accueil : trois tuiles côte à côte, titre seul. Le contenu se déroule au
   survol à la souris, au clic sur tablette, et flotte au-dessus des résultats.
   Le panneau colle au bas de la tuile (top: 100%) : le moindre espace entre les
   deux couperait le survol quand la souris descend vers le panneau. */
.filter-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 20px 0 18px;
  /* L'accueil n'a que ces trois tuiles : elles débordent volontairement du
     max-width de la page pour occuper l'écran, au lieu d'une bande étroite. */
  width: min(1600px, calc(100vw - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
  position: relative;
  z-index: 20;
}
/* L'accueil forme un bloc — page de garde puis les trois tuiles — cale en HAUT
   de l'ecran. Il etait centre verticalement : les tuiles descendaient si bas que
   le deroulant des categories sortait du bas de la fenetre. */
#view.home-empty {
  min-height: calc(100vh - 132px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* L'ecart avec les tuiles est calcule sur la place restante sous le deroulant
   des categories : 80 px laissent encore ~90 px de marge en bas sur l'ecran de
   Marion (2560x1440), deroulant ouvert a 9 puces. */
#view.home-empty .home-hero {
  margin: 0 0 80px;
}
#view.home-empty .filter-tiles {
  margin-top: 0;
  margin-bottom: 0;
}
/* Les résultats s'alignent sur la largeur des tuiles, sinon ils apparaîtraient
   dans une colonne étroite décalée sous elles. */
#search-results {
  width: min(1600px, calc(100vw - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
  position: relative;
  z-index: 1;
}
.filter-tile { position: relative; }
.filter-tile-head {
  width: 100%;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 22px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--card);
  color: var(--accent-dark);
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(45, 42, 38, 0.08);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.filter-tile-head:hover,
.filter-tile.open .filter-tile-head {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(45, 42, 38, 0.14);
  transform: translateY(-1px);
}
.filter-ico { font-size: 42px; line-height: 1; flex: none; }

.filter-panel {
  display: none;
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  /* Exactement la largeur de sa tuile : en max-content le panneau s'étalait
     plus large qu'elle et débordait sur les tuiles voisines. */
  width: 100%;
  margin-top: 6px;
  padding: 14px;
  border: 1px solid var(--accent);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 12px 30px rgba(45, 42, 38, 0.24);
  /* Garde-fou : le bloc d'accueil est cale en haut, donc le panneau s'ouvre
     toujours vers 460 px du haut. Sur un ecran plus court que prevu il defile
     au lieu d'etre coupe. */
  max-height: max(200px, calc(100vh - 620px));
  overflow-y: auto;
}
.filter-tile:hover .filter-panel,
.filter-tile.open .filter-panel { display: block; }
.filter-panel .cat-chips { margin: 0; gap: 6px; }
/* Catégories et zones : une par ligne, pleine largeur, compteur poussé à droite. */
#cat-chips, #zone-chips { flex-direction: column; align-items: stretch; gap: 8px; }
#cat-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
}
#cat-chips .cat-chip, #zone-chips .cat-chip {
  justify-content: flex-start;
  text-align: left;
  padding: 11px 18px;
  font-size: 17px;
}
#cat-chips .cat-ico, #zone-chips .cat-ico { font-size: 21px; }
/* Catégorie encore vide : montrée pour la structure, mais pas cliquable. */
.cat-chip[disabled] { opacity: 0.45; cursor: default; box-shadow: none; }
.cat-chip[disabled]:hover { border-color: var(--border); transform: none; }
.filter-panel .search-bar input { width: 100%; min-height: 52px; font-size: 17px; }
.filter-panel .empty { margin: 0; }

/* Ecran peu haut (tablette en paysage, portable 768 px) : le bloc du haut
   se tasse pour que les 11 categories tiennent sans ascenseur. */
@media (min-width: 901px) and (max-height: 900px) {
  .home-logo { width: 84px; padding: 10px 12px; margin-bottom: 10px; }
  .home-title { font-size: 1.7em; }
  .home-tagline { font-size: 1em; }
  #view.home-empty .home-hero { margin-bottom: 18px; }
  .filter-tiles { gap: 16px; }
  .filter-tile-head {
    min-height: 125px;
    gap: 8px;
    padding: 14px 16px;
    font-size: 17px;
  }
  .filter-ico { font-size: 32px; }
  #cat-chips .cat-chip, #zone-chips .cat-chip { padding: 8px 14px; font-size: 15px; }
  .filter-panel .cat-chips { gap: 5px; }
  .filter-panel { padding: 12px; }
  #cat-chips .cat-ico, #zone-chips .cat-ico { font-size: 18px; }
  .filter-panel { max-height: max(180px, calc(100vh - 430px)); }
}

@media (max-width: 900px) {
  .filter-tiles {
    grid-template-columns: 1fr;
    gap: 12px;
    width: auto;
    margin: 16px 0;
    margin-left: 0;
    transform: none;
  }
  .filter-tile-head {
    min-height: 0;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
    padding: 16px;
    font-size: 16px;
    border-radius: 14px;
  }
  .filter-ico { font-size: 24px; }
  /* En colonne, le déroulant reprend le flux normal : pas de superposition */
  .filter-panel { position: static; box-shadow: none; max-height: none; overflow: visible; }
  #search-results { width: auto; margin-left: 0; transform: none; }
  #view.home-empty .filter-tiles { min-height: 0; }
  #view.home-empty .home-hero { margin-bottom: 20px; }
  #cat-chips { grid-template-columns: 1fr; }
}