:root{color-scheme:light;--bg:#f2f5f9;--surface:rgba(255,255,255,.84);--solid:#fff;--soft:#f7f9fc;--text:#172234;--muted:#718097;--line:rgba(37,60,89,.12);--line2:rgba(37,60,89,.21);--blue:#2868bf;--blue2:#124a93;--blueSoft:#e9f2ff;--cyan:#69c8de;--green:#23815e;--greenSoft:#e9f8f1;--amber:#a9690d;--amberSoft:#fff4df;--red:#b64b59;--redSoft:#fff0f2;--shadow:0 18px 46px rgba(24,46,76,.10);--shadow2:0 8px 28px rgba(24,46,76,.07)}
html[data-theme=dark]{color-scheme:dark;--bg:#0b111a;--surface:rgba(18,27,39,.84);--solid:#121b27;--soft:#0f1823;--text:#edf4fc;--muted:#91a0b4;--line:rgba(160,190,225,.12);--line2:rgba(160,190,225,.21);--blue:#74aeff;--blue2:#a3caff;--blueSoft:#172b45;--cyan:#66c9df;--green:#65d1a6;--greenSoft:#143429;--amber:#ffc36f;--amberSoft:#3a2b15;--red:#ff8b98;--redSoft:#3b2026;--shadow:0 24px 64px rgba(0,0,0,.30);--shadow2:0 12px 34px rgba(0,0,0,.22)}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;min-height:100vh;overflow-x:hidden;color:var(--text);background:radial-gradient(circle at 12% 1%,color-mix(in srgb,var(--blue) 12%,transparent),transparent 28rem),radial-gradient(circle at 88% 7%,color-mix(in srgb,var(--cyan) 10%,transparent),transparent 27rem),var(--bg);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button{color:inherit}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
.ambient{position:fixed;z-index:-1;width:32rem;height:32rem;border-radius:50%;filter:blur(72px);opacity:.13;pointer-events:none;animation:drift 14s ease-in-out infinite alternate}.ambient-a{top:-18rem;left:-8rem;background:var(--blue)}.ambient-b{top:8rem;right:-20rem;background:var(--cyan);animation-delay:-5s}@keyframes drift{to{transform:translate3d(2rem,1rem,0) scale(1.05)}}
.reflect-surface{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow2);backdrop-filter:blur(18px) saturate(125%)}.reflect-surface:before{content:"";position:absolute;inset:0 auto auto 9%;width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);opacity:.65;pointer-events:none}.eyebrow{margin:0 0 .35rem;color:var(--blue);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.login-body{display:grid;place-items:center}.login-shell{width:100%;min-height:100vh;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem)}.login-card{width:min(100%,440px);padding:clamp(1.35rem,4vw,2rem);border-radius:24px;box-shadow:var(--shadow);animation:enter .5s cubic-bezier(.2,.8,.2,1) both}@keyframes enter{from{opacity:0;transform:translateY(12px) scale(.985)}}.login-brand,.brand{display:flex;align-items:center;gap:.8rem}.brand-mark{position:relative;flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;border-radius:15px;color:#fff;font-weight:900;background:linear-gradient(145deg,#2f78d5,#164b91 58%,#123f78);box-shadow:0 8px 22px rgba(28,92,170,.3),inset 0 1px rgba(255,255,255,.32)}.brand-mark:after{content:"";position:absolute;inset:2px 2px auto;height:42%;border-radius:12px 12px 50% 50%;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent)}.brand-mark.small{width:36px;height:36px;border-radius:11px;font-size:.78rem}.login-brand h1{margin:0;font-size:clamp(1.55rem,5vw,2rem);letter-spacing:-.035em}.login-copy{margin:1.6rem 0;color:var(--muted)}.login-copy strong{color:var(--text)}.login-form{display:grid;gap:1rem}.field{display:grid;gap:.42rem}.field>span{color:var(--muted);font-size:.76rem;font-weight:700}.field input,.field textarea{width:100%;border:1px solid var(--line);outline:0;color:var(--text);background:color-mix(in srgb,var(--solid) 82%,transparent);border-radius:12px;padding:.78rem .9rem;transition:.16s}.field textarea{min-height:105px;resize:vertical}.field input:focus,.field textarea:focus{border-color:color-mix(in srgb,var(--blue) 60%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 12%,transparent)}.primary-button{position:relative;overflow:hidden;min-height:46px;border:0;border-radius:12px;cursor:pointer;color:#fff;font-weight:800;background:linear-gradient(135deg,#2e79d7,#174d95);box-shadow:0 10px 24px rgba(28,91,170,.24)}.button-glint{position:absolute;top:-50%;left:-40%;width:30%;height:200%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transition:transform .55s}.primary-button:hover .button-glint{transform:translateX(450%) rotate(18deg)}.login-footer{margin-top:1.25rem;color:var(--muted);font-size:.72rem;display:flex;align-items:center;gap:.45rem}.status-pulse,.user-dot,.state-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green)}.status-pulse{animation:pulse 2.4s infinite}@keyframes pulse{70%{box-shadow:0 0 0 7px transparent}}.alert-box{margin:0 0 1rem;padding:.72rem .82rem;border:1px solid color-mix(in srgb,var(--red) 26%,var(--line));border-radius:11px;color:var(--red);background:var(--redSoft);font-size:.82rem}
.topbar{position:sticky;z-index:20;top:0;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--solid) 77%,transparent);backdrop-filter:blur(20px) saturate(135%)}.topbar-inner{width:min(1280px,100%);height:66px;margin:auto;padding:0 clamp(.8rem,3vw,1.5rem);display:flex;align-items:center}.brand strong{display:block;font-size:.9rem}.brand small{display:block;color:var(--muted);font-size:.68rem}.top-actions{margin-left:auto;display:flex;align-items:center;gap:.5rem}.icon-button,.user-button{border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;transition:.15s}.icon-button:hover,.user-button:hover{border-color:var(--line2);transform:translateY(-1px)}.icon-button{width:37px;height:37px}.user-button{min-height:37px;display:flex;align-items:center;gap:.45rem;padding:0 .75rem;color:var(--muted);font-size:.76rem}
.page{width:min(1280px,100%);margin:auto;padding:clamp(1.2rem,3vw,2rem) clamp(.8rem,3vw,1.5rem) 4rem}.hero{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;margin-bottom:1.25rem}.hero h1{margin:0;font-size:clamp(2rem,5vw,3.25rem);line-height:1;letter-spacing:-.052em}.hero-copy{margin:.7rem 0 0;color:var(--muted)}.period-badge{min-width:138px;padding:.72rem .9rem;border:1px solid color-mix(in srgb,var(--blue) 18%,var(--line));border-radius:13px;color:var(--blue);background:linear-gradient(135deg,var(--blueSoft),color-mix(in srgb,var(--surface) 70%,transparent))}.period-badge span{display:block;font-size:.58rem;font-weight:850;letter-spacing:.12em}.period-badge strong{display:block;margin-top:.15rem;font-size:.9rem}.metrics{width:min(820px,100%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-bottom:1rem}.metric-card{min-height:105px;padding:1rem 1.05rem;border-radius:15px}.metric-label,.metric-card small{display:block;color:var(--muted);font-size:.68rem}.metric-card strong{display:block;margin:.12rem 0;font-size:1.7rem;letter-spacing:-.04em}.command-bar{display:flex;align-items:center;gap:.7rem;padding:.7rem;border-radius:15px;margin-bottom:1rem}.search-box{position:relative;flex:1;min-width:220px}.search-box input{width:100%;height:40px;padding:0 .8rem 0 2.25rem;border:1px solid var(--line);border-radius:10px;outline:0;color:var(--text);background:var(--soft)}.search-icon{position:absolute;left:.8rem;top:.47rem;color:var(--muted);font-size:1rem}.filters{display:flex;gap:.35rem}.filter-chip{min-height:34px;padding:0 .72rem;border:1px solid transparent;border-radius:9px;color:var(--muted);background:transparent;cursor:pointer;font-size:.74rem;font-weight:700}.filter-chip.active{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 18%,var(--line));background:var(--blueSoft)}
.companies{display:grid;gap:.62rem}.company-card{overflow:hidden;border:1px solid var(--line);border-radius:15px;background:var(--surface);box-shadow:0 3px 16px rgba(24,46,76,.035);backdrop-filter:blur(16px)}.company-header{width:100%;min-height:70px;padding:.8rem 1rem;border:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;background:transparent;cursor:pointer}.company-title{display:flex;align-items:center;gap:.7rem}.company-title strong{display:block;font-size:.88rem}.company-title small{display:block;margin-top:.15rem;color:var(--muted);font-size:.68rem}.chevron{display:inline-block;color:var(--muted);font-size:1.5rem;transition:transform .2s}.company-card.open .chevron{transform:rotate(90deg)}.company-state{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.7rem;white-space:nowrap}.state-dot.amber{background:var(--amber)}.company-collapse{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s cubic-bezier(.2,.8,.2,1)}.company-card.open .company-collapse{grid-template-rows:1fr}.company-content{min-height:0;overflow:hidden}.company-card.open .company-content{border-top:1px solid var(--line)}.unit-table-head,.unit-row{display:grid;grid-template-columns:minmax(220px,1.55fr) .55fr .6fr .8fr minmax(140px,.85fr) 20px;gap:.75rem;align-items:center}.unit-table-head{padding:.55rem 1rem;color:var(--muted);background:var(--soft);font-size:.6rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.unit-row{width:100%;padding:.75rem 1rem;border:0;border-top:1px solid var(--line);text-align:left;background:transparent;cursor:pointer;transition:background .14s}.unit-row:hover{background:color-mix(in srgb,var(--blueSoft) 35%,transparent)}.unit-identity strong{display:block;font-size:.82rem}.unit-identity small{display:block;margin-top:.18rem;color:var(--muted);font-size:.64rem}.type-pill{display:inline-flex;margin-right:.35rem;padding:.08rem .32rem;border:1px solid var(--line);border-radius:5px;color:var(--muted);background:var(--soft);font-size:.55rem;font-weight:850}.unit-number b{display:block;font-size:.82rem}.unit-number small{color:var(--muted);font-size:.6rem}.unit-meter,.unit-contact{color:var(--muted);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;font-weight:750}.status-pill i{width:6px;height:6px;border-radius:50%;background:currentColor}.warning{color:var(--amber)}.success{color:var(--green)}.info{color:var(--blue)}.alert-count{display:block;margin-top:.12rem;color:var(--amber);font-size:.6rem}.row-arrow{justify-self:end;color:var(--muted);font-size:1.2rem}.empty-company,.empty-inventory{display:flex;align-items:center;gap:.8rem;padding:1.2rem;color:var(--muted)}.empty-company strong,.empty-inventory strong{color:var(--text);font-size:.82rem}.empty-company p,.empty-inventory p{margin:.15rem 0 0;font-size:.7rem}.empty-orbit{width:31px;height:31px;flex:0 0 auto;border:1px solid var(--line2);border-radius:50%;box-shadow:inset 0 0 0 7px var(--soft)}.no-results{margin:1rem 0;padding:1.2rem;text-align:center;color:var(--muted)}
.drawer-open{overflow:hidden}.drawer-backdrop{position:fixed;z-index:50;inset:0;background:rgba(4,10,18,.38);backdrop-filter:blur(3px);opacity:0;transition:opacity .18s}.drawer-backdrop.show{opacity:1}.drawer{position:absolute;top:0;right:0;width:min(790px,94vw);height:100%;overflow:hidden;background:var(--solid);box-shadow:-24px 0 70px rgba(0,0,0,.22);transform:translateX(26px);transition:transform .22s cubic-bezier(.2,.8,.2,1)}.drawer-backdrop.show .drawer{transform:translateX(0)}.drawer-panel{height:100%;display:flex;flex-direction:column}.drawer-header{display:flex;justify-content:space-between;gap:1rem;padding:1.15rem 1.25rem;border-bottom:1px solid var(--line)}.drawer-header h2{margin:0;font-size:1.4rem;letter-spacing:-.03em}.drawer-meta{margin:.2rem 0 0;color:var(--muted);font-size:.7rem}.drawer-scroll{overflow:auto;padding:1rem 1.25rem 2rem}.drawer-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-bottom:.8rem}.drawer-metrics article{padding:.75rem;border:1px solid var(--line);border-radius:12px;background:var(--soft)}.drawer-metrics span{display:block;color:var(--muted);font-size:.58rem;font-weight:750;text-transform:uppercase}.drawer-metrics strong{display:block;margin-top:.15rem;font-size:1rem}.compact-value{font-size:.72rem!important;text-transform:capitalize}.panel-section{padding:1rem;border-radius:14px;margin-bottom:1rem}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:.75rem}.section-heading h3{margin:0;font-size:.95rem}.section-kicker,.save-state,.muted{color:var(--muted);font-size:.62rem}.section-kicker{display:block;color:var(--blue);font-weight:800;text-transform:uppercase;letter-spacing:.08em}.profile-form{display:grid;gap:.8rem}.archive-table{overflow:hidden;border:1px solid var(--line);border-radius:12px}.archive-head,.archive-row{display:grid;grid-template-columns:.35fr 1.1fr .75fr .75fr 1.3fr;gap:.65rem}.archive-head{padding:.55rem .7rem;color:var(--muted);background:var(--soft);font-size:.58rem;font-weight:850;text-transform:uppercase}.archive-row{padding:.68rem .7rem;border-top:1px solid var(--line);font-size:.68rem}.archive-row.needs-review{background:color-mix(in srgb,var(--amberSoft) 40%,transparent)}.drawer-loading,.drawer-error{min-height:100%;display:grid;place-items:center;color:var(--muted)}.spinner{width:24px;height:24px;border:2px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.unit-table-head{display:none}.unit-row{grid-template-columns:minmax(0,1fr) auto auto}.unit-row>:nth-child(2),.unit-row>:nth-child(3),.unit-row>:nth-child(5){display:none}}
@media(max-width:680px){.topbar-inner{height:60px}.brand small,.user-dot{display:none}.user-button{width:37px;padding:0;justify-content:center;font-size:0}.user-button:after{content:"↪";font-size:.9rem}.hero{align-items:flex-start;flex-direction:column}.metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}.metric-card{min-height:90px;padding:.75rem}.metric-card strong{font-size:1.35rem}.command-bar{align-items:stretch;flex-direction:column}.search-box{min-width:0}.filters{overflow-x:auto;scrollbar-width:none}.filter-chip{flex:0 0 auto}.company-state{display:none}.unit-row{padding:.75rem;grid-template-columns:minmax(0,1fr) auto}.unit-row>:nth-child(4){display:none}.drawer{width:100vw}.drawer-scroll,.drawer-header{padding:.85rem}.drawer-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.archive-head{display:none}.archive-row{display:grid;grid-template-columns:1fr;gap:.45rem;padding:.75rem}.archive-row>span{display:grid;grid-template-columns:78px 1fr;gap:.6rem}.archive-row>span:before{content:attr(data-label);color:var(--muted);font-size:.58rem;font-weight:800;text-transform:uppercase}}
@media(max-width:420px){.page{padding-left:.65rem;padding-right:.65rem}.metrics{grid-template-columns:1fr 1fr}.metric-card:nth-child(3){grid-column:1/-1}.login-card{border-radius:19px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ------------------------------------------------------------------
   Physical collection status
   ------------------------------------------------------------------ */

.unit-row.is-collected {
  position: relative;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--green) 13%, transparent),
      color-mix(in srgb, var(--green) 4%, transparent) 55%,
      transparent
    );
  box-shadow: inset 3px 0 0 var(--green);
}

.unit-row.is-collected:hover {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--green) 18%, transparent),
      color-mix(in srgb, var(--green) 7%, transparent) 60%,
      transparent
    );
}

.collected-badge {
  margin-bottom: .18rem;
  color: var(--green);
  font-weight: 900;
  letter-spacing: .035em;
}

.collection-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.collection-card.collected {
  border-color: color-mix(in srgb, var(--green) 35%, var(--line));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--green) 14%, var(--surface-solid)),
      color-mix(in srgb, var(--green) 5%, var(--surface-solid))
    );
  box-shadow:
    inset 0 1px rgba(255,255,255,.18),
    0 10px 28px color-mix(in srgb, var(--green) 8%, transparent);
}

.collection-state {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.collection-state strong {
  display: block;
  font-size: .9rem;
}

.collection-check {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface-solid);
  font-weight: 900;
  transition: all .2s ease;
}

.collection-card.collected .collection-check {
  border-color: var(--green);
  color: #fff;
  background: var(--green);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 11%, transparent);
}

.collection-button {
  min-height: 39px;
  padding: 0 .9rem;
  border: 1px solid color-mix(in srgb, var(--green) 38%, var(--line));
  border-radius: 10px;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 7%, var(--surface-solid));
  cursor: pointer;
  font-size: .72rem;
  font-weight: 850;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.collection-button:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--green) 13%, var(--surface-solid));
}

.collection-button.collected {
  color: var(--muted);
  border-color: var(--line);
  background: var(--surface-solid);
}

.collection-button:disabled {
  opacity: .65;
  cursor: wait;
  transform: none;
}

.drawer-panel.is-collected .drawer-header {
  box-shadow: inset 4px 0 0 var(--green);
}

@media (max-width: 680px) {
  .collection-card {
    align-items: stretch;
    flex-direction: column;
  }

  .collection-button {
    width: 100%;
    min-height: 44px;
  }

  .unit-row.is-collected {
    box-shadow: inset 4px 0 0 var(--green);
  }
}

/* ==================================================================
   Collection workflow — refined dashboard
   ================================================================== */

.unit-row {
  position: relative;
  isolation: isolate;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.unit-row:hover {
  transform: translateY(-1px);
}

.unit-title-line {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}

.unit-title-line strong {
  min-width: 0;
}

.unit-checkmark {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: .68rem;
  font-weight: 950;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--green) 10%, transparent),
    0 3px 10px color-mix(in srgb, var(--green) 22%, transparent);
}

/* Etat non collecté */

.collection-status {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  width: fit-content;
  white-space: nowrap;
  border-radius: 999px;
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .025em;
}

.collection-status.pending {
  padding: .38rem .62rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-solid) 72%, transparent);
  color: var(--muted);
}

.collection-status-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* Etat collecté */

.collection-status.collected {
  padding: .36rem .7rem .36rem .4rem;
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--green) 16%, var(--surface-solid)),
      color-mix(in srgb, var(--green) 7%, var(--surface-solid))
    );
  color: var(--green);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 4px 14px color-mix(in srgb, var(--green) 8%, transparent);
}

.collection-status-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: .65rem;
  font-weight: 950;
}

/* Les informations d'inventaire deviennent secondaires */

.unit-status-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .32rem;
}

.inventory-hint {
  display: block;
  color: var(--muted);
  font-size: .61rem;
  opacity: .68;
}

/* Une unité collectée doit être immédiatement identifiable,
   sans transformer toute l'interface en gros rectangle vert. */

.unit-row.is-collected {
  background:
    radial-gradient(
      circle at 88% 50%,
      color-mix(in srgb, var(--green) 9%, transparent),
      transparent 28%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--green) 11%, var(--surface-solid)),
      color-mix(in srgb, var(--green) 3%, var(--surface-solid)) 48%,
      var(--surface-solid)
    );
  border-color: color-mix(in srgb, var(--green) 23%, var(--line));
  box-shadow:
    inset 3px 0 0 var(--green),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.unit-row.is-collected::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      115deg,
      transparent 30%,
      rgba(255,255,255,.035) 46%,
      transparent 62%
    );
}

.unit-row.is-collected:hover {
  background:
    radial-gradient(
      circle at 88% 50%,
      color-mix(in srgb, var(--green) 13%, transparent),
      transparent 30%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--green) 15%, var(--surface-solid)),
      color-mix(in srgb, var(--green) 5%, var(--surface-solid)) 52%,
      var(--surface-solid)
    );
  border-color: color-mix(in srgb, var(--green) 36%, var(--line));
  box-shadow:
    inset 3px 0 0 var(--green),
    0 8px 24px color-mix(in srgb, var(--green) 7%, transparent);
}

.unit-row.is-collected .unit-identity > .unit-title-line > strong {
  color: color-mix(in srgb, var(--green) 82%, currentColor);
}

/* Drawer collecte */

.collection-card {
  position: relative;
  overflow: hidden;
  padding: 1rem 1.1rem;
  border-radius: 16px;
}

.collection-card::before {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -60px;
  top: -80px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 9%, transparent);
  filter: blur(4px);
  pointer-events: none;
}

.collection-card.collected {
  border-color: color-mix(in srgb, var(--green) 32%, var(--line));
  background:
    radial-gradient(
      circle at 90% 0%,
      color-mix(in srgb, var(--green) 17%, transparent),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--green) 11%, var(--surface-solid)),
      var(--surface-solid)
    );
}

.collection-card.collected [data-collection-label] {
  color: var(--green);
}

.collection-button {
  position: relative;
  z-index: 1;
  padding-inline: 1rem;
  font-weight: 850;
}

@media (max-width: 680px) {
  .unit-row.is-collected {
    box-shadow:
      inset 4px 0 0 var(--green),
      inset 0 1px 0 rgba(255,255,255,.06);
  }

  .unit-checkmark {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
  }
}

/* ==================================================================
   Collection progress
   ================================================================== */

.collection-overview {
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  padding: 1.35rem 1.45rem 1.15rem;
  border-radius: 20px;
}

.collection-overview::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  top: -190px;
  right: -70px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  filter: blur(8px);
  pointer-events: none;
}

.collection-overview-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.collection-total {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin-top: .18rem;
  line-height: 1;
}

.collection-total strong {
  font-size: clamp(2.3rem, 5vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -.055em;
}

.collection-total span {
  color: var(--muted);
  font-size: 1.15rem;
  font-weight: 750;
}

.collection-overview-head p {
  margin: .32rem 0 0;
  color: var(--muted);
  font-size: .78rem;
}

.collection-percent {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-bottom: .15rem;
}

.collection-percent strong {
  color: var(--green);
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 900;
}

.collection-percent span {
  margin-top: .25rem;
  color: var(--muted);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.collection-progress,
.company-progress {
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  border: 0;
  background: transparent;
}

.collection-progress {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 9px;
  margin-top: 1.15rem;
  border-radius: 999px;
}

.collection-progress::-webkit-progress-bar,
.company-progress::-webkit-progress-bar {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  border-radius: 999px;
}

.collection-progress::-webkit-progress-value,
.company-progress::-webkit-progress-value {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--green) 72%, white),
    var(--green)
  );
  border-radius: 999px;
}

.collection-progress::-moz-progress-bar,
.company-progress::-moz-progress-bar {
  background: var(--green);
  border-radius: 999px;
}

.collection-overview-stats {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1.4rem;
  margin-top: .8rem;
  color: var(--muted);
  font-size: .7rem;
}

.collection-overview-stats strong {
  color: var(--text);
  font-weight: 850;
}

/* Progression dans les compagnies */

.company-collection {
  display: grid;
  grid-template-columns: auto 90px;
  align-items: center;
  gap: .8rem;
  min-width: 165px;
}

.company-collection-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.company-collection-copy strong {
  font-size: .7rem;
  font-weight: 850;
  white-space: nowrap;
}

.company-collection-copy small {
  margin-top: .08rem;
  color: var(--muted);
  font-size: .57rem;
}

.company-progress {
  width: 90px;
  height: 5px;
  border-radius: 999px;
}

.company-collection.complete strong {
  color: var(--green);
}

@media (max-width: 680px) {
  .collection-overview {
    padding: 1.15rem;
  }

  .collection-overview-stats {
    gap: .8rem;
    justify-content: space-between;
  }

  .company-collection {
    grid-template-columns: auto;
    min-width: 80px;
    gap: .25rem;
  }

  .company-progress {
    width: 80px;
  }
}

/* ==================================================================
   Stylized Haute-Savoie map
   ================================================================== */

.territory-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  padding: 1.35rem 1.45rem 1rem;
  border-radius: 20px;
}

.territory-card-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.territory-card-head h2 {
  margin: .16rem 0 .18rem;
  font-size: 1.25rem;
  letter-spacing: -.025em;
}

.territory-card-head p {
  margin: 0;
  max-width: 520px;
  color: var(--muted);
  font-size: .72rem;
}

.map-legend {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-top: .25rem;
  color: var(--muted);
  font-size: .65rem;
  white-space: nowrap;
}

.map-legend > span {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
}

.map-legend-dot {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  font-style: normal;
  font-size: .5rem;
  font-weight: 950;
}

.map-legend-dot.pending {
  border: 2px solid color-mix(in srgb, var(--text) 45%, transparent);
  background: var(--surface-solid);
}

.map-legend-dot.collected {
  background: var(--green);
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 10%, transparent);
}

.territory-map-wrap {
  position: relative;
  max-width: 820px;
  margin: -.2rem auto 0;
}

.territory-map {
  display: block;
  width: 100%;
  height: auto;
  min-height: 340px;
  overflow: visible;
}

.map-shadow {
  fill: color-mix(in srgb, var(--text) 7%, transparent);
  transform: translateY(5px);
  filter: blur(5px);
}

.map-silhouette {
  fill: color-mix(in srgb, var(--surface-solid) 87%, var(--green) 13%);
  stroke: color-mix(in srgb, var(--text) 17%, transparent);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.map-relief {
  fill: none;
  stroke: color-mix(in srgb, var(--text) 10%, transparent);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
}

.map-relief.soft {
  opacity: .55;
  stroke-dasharray: none;
}

.map-region-label {
  fill: color-mix(in srgb, var(--text) 30%, transparent);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1.15px;
  pointer-events: none;
  user-select: none;
}

.map-unit {
  cursor: pointer;
  outline: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .16s ease;
}



.map-unit-pulse {
  fill: color-mix(in srgb, var(--text) 7%, transparent);
  stroke: color-mix(in srgb, var(--text) 8%, transparent);
  stroke-width: 1;
  transition: fill .18s ease, stroke .18s ease;
}

.map-unit-dot {
  fill: var(--surface-solid);
  stroke: color-mix(in srgb, var(--text) 50%, transparent);
  stroke-width: 2.2;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.13));
  transition: fill .18s ease, stroke .18s ease;
}

.map-unit-check {
  display: none;
  fill: #fff;
  font-size: 7px;
  font-weight: 950;
  pointer-events: none;
}

.map-unit:hover .map-unit-dot,
.map-unit:focus-visible .map-unit-dot {
  stroke: var(--green);
}

.map-unit.is-collected .map-unit-pulse {
  fill: color-mix(in srgb, var(--green) 16%, transparent);
  stroke: color-mix(in srgb, var(--green) 13%, transparent);
}

.map-unit.is-collected .map-unit-dot {
  fill: var(--green);
  stroke: color-mix(in srgb, var(--green) 72%, white);
}

.map-unit.is-collected .map-unit-check {
  display: block;
}

.map-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin-top: -.35rem;
  color: var(--muted);
  font-size: .62rem;
}

.map-caption-line {
  width: 22px;
  height: 1px;
  background: var(--line);
}

@media (max-width: 680px) {
  .territory-card {
    padding: 1.1rem .85rem .9rem;
  }

  .territory-card-head {
    flex-direction: column;
    gap: .6rem;
  }

  .map-legend {
    padding-top: 0;
  }

  .territory-map {
    min-height: 280px;
  }

  .map-region-label {
    font-size: 6.5px;
  }
}

.map-unit.is-filtered {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.map-unit {
  transition:
    transform .16s ease,
    opacity .18s ease,
    visibility .18s ease;
}

/* ==================================================================
   Haute-Savoie map v2 — realistic styled map
   ================================================================== */

:root {
  --map-bg-top: #f7fbff;
  --map-bg-bottom: #eef4f8;
  --map-fill-a: #f8fafb;
  --map-fill-b: #e7edf1;
  --map-stroke: rgba(30, 41, 59, 0.22);
  --map-divider: rgba(30, 41, 59, 0.20);
  --map-relief: rgba(30, 41, 59, 0.18);
  --map-relief-soft: rgba(30, 41, 59, 0.11);
  --map-label: rgba(30, 41, 59, 0.58);
  --map-water: #dceefe;
  --map-water-stroke: rgba(76, 125, 179, 0.35);
  --map-zone-annecy: rgba(93, 125, 162, 0.12);
  --map-zone-bonneville: rgba(105, 139, 116, 0.11);
  --map-zone-chamonix: rgba(136, 115, 151, 0.12);
  --map-zone-sjg: rgba(201, 171, 106, 0.13);
  --map-zone-thonon: rgba(94, 149, 164, 0.12);
}

html.dark,
body.dark,
[data-theme="dark"] {
  --map-bg-top: #0f1620;
  --map-bg-bottom: #111b24;
  --map-fill-a: #1a2430;
  --map-fill-b: #16202b;
  --map-stroke: rgba(255, 255, 255, 0.14);
  --map-divider: rgba(255, 255, 255, 0.14);
  --map-relief: rgba(255, 255, 255, 0.14);
  --map-relief-soft: rgba(255, 255, 255, 0.08);
  --map-label: rgba(255, 255, 255, 0.55);
  --map-water: rgba(110, 171, 226, 0.18);
  --map-water-stroke: rgba(123, 187, 245, 0.28);
  --map-zone-annecy: rgba(128, 171, 224, 0.10);
  --map-zone-bonneville: rgba(112, 185, 129, 0.10);
  --map-zone-chamonix: rgba(183, 146, 214, 0.10);
  --map-zone-sjg: rgba(218, 188, 115, 0.11);
  --map-zone-thonon: rgba(106, 188, 205, 0.11);
}

.territory-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  padding: 1.35rem 1.45rem 1rem;
  border-radius: 22px;
}

.territory-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,0.18), transparent 28%),
    radial-gradient(circle at 90% 85%, color-mix(in srgb, var(--green) 10%, transparent), transparent 20%);
  pointer-events: none;
}

.territory-card-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: .55rem;
}

.territory-card-head h2 {
  margin: .14rem 0 .16rem;
  font-size: 1.28rem;
  letter-spacing: -.025em;
}

.territory-card-head p {
  margin: 0;
  max-width: 560px;
  color: var(--muted);
  font-size: .74rem;
}

.map-legend {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-top: .25rem;
  color: var(--muted);
  font-size: .66rem;
  white-space: nowrap;
}

.map-legend > span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.map-legend-dot {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-style: normal;
  font-size: .52rem;
  font-weight: 950;
}

.map-legend-dot.pending {
  border: 2px solid color-mix(in srgb, var(--text) 38%, transparent);
  background: color-mix(in srgb, var(--surface-solid) 90%, white);
}

.map-legend-dot.collected {
  background: var(--green);
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent);
}

.territory-map-wrap {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
}

.territory-map {
  display: block;
  width: 100%;
  height: auto;
  min-height: 350px;
  overflow: visible;
}

.map-frame-bg {
  fill: url(#hsBg);
}

.hs-shadow {
  fill: rgba(0, 0, 0, 0.08);
  filter: blur(6px);
  transform: translateY(6px);
  transform-origin: center;
}

.hs-department {
  fill: url(#hsFill);
  stroke: var(--map-stroke);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.lake-leman {
  fill: var(--map-water);
  stroke: var(--map-water-stroke);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

.company-zone {
  stroke: none;
}

.zone-annecy { fill: var(--map-zone-annecy); }
.zone-bonneville { fill: var(--map-zone-bonneville); }
.zone-chamonix { fill: var(--map-zone-chamonix); }
.zone-sjg { fill: var(--map-zone-sjg); }
.zone-thonon { fill: var(--map-zone-thonon); }

.company-divider {
  fill: none;
  stroke: var(--map-divider);
  stroke-width: 1.15;
  stroke-dasharray: 4 5;
  vector-effect: non-scaling-stroke;
}

.massif-line {
  fill: none;
  stroke: var(--map-relief);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-dasharray: 2 4;
  vector-effect: non-scaling-stroke;
}

.massif-line.soft {
  stroke: var(--map-relief-soft);
  stroke-dasharray: none;
}

.map-region-label,
.map-water-label {
  fill: var(--map-label);
  font-weight: 800;
  letter-spacing: 1px;
  pointer-events: none;
  user-select: none;
}

.map-region-label {
  font-size: 7.2px;
}

.map-water-label {
  font-size: 7px;
  font-style: italic;
}

.map-unit {
  cursor: pointer;
  outline: none;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform .16s ease,
    opacity .18s ease,
    visibility .18s ease;
}



.map-unit.is-filtered {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.map-unit-pulse {
  fill: rgba(30, 41, 59, 0.06);
  stroke: rgba(30, 41, 59, 0.08);
  stroke-width: 1;
  transition: fill .18s ease, stroke .18s ease;
}

.map-unit-dot {
  fill: color-mix(in srgb, var(--surface-solid) 92%, white);
  stroke: color-mix(in srgb, var(--text) 40%, transparent);
  stroke-width: 2.1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.16));
  transition: fill .18s ease, stroke .18s ease;
}

.map-unit-check {
  display: none;
  fill: #fff;
  font-size: 7px;
  font-weight: 950;
  pointer-events: none;
}

.map-unit:hover .map-unit-dot,
.map-unit:focus-visible .map-unit-dot {
  stroke: var(--green);
}

.map-unit.is-collected .map-unit-pulse {
  fill: color-mix(in srgb, var(--green) 14%, transparent);
  stroke: color-mix(in srgb, var(--green) 14%, transparent);
}

.map-unit.is-collected .map-unit-dot {
  fill: var(--green);
  stroke: color-mix(in srgb, var(--green) 72%, white);
}

.map-unit.is-collected .map-unit-check {
  display: block;
}

.map-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin-top: -.2rem;
  color: var(--muted);
  font-size: .63rem;
}

.map-caption-line {
  width: 24px;
  height: 1px;
  background: var(--line);
}

@media (max-width: 680px) {
  .territory-card {
    padding: 1.05rem .85rem .9rem;
  }

  .territory-card-head {
    flex-direction: column;
    gap: .6rem;
  }

  .map-legend {
    padding-top: 0;
    flex-wrap: wrap;
    gap: .75rem;
  }

  .territory-map {
    min-height: 290px;
  }
}

/* --- map markers refinement --- */

:root {
  --map-marker-pending: #647b8d;
  --map-marker-border: rgba(255, 255, 255, .96);
  --map-marker-collected: #2f9b68;

  --map-label-bg: rgba(255, 255, 255, .97);
  --map-label-border: rgba(30, 41, 59, .18);
  --map-label-text: #172033;
}

[data-theme="dark"] {
  --map-marker-pending: #8da4b7;
  --map-marker-border: rgba(15, 23, 42, .95);
  --map-marker-collected: #57c78d;

  --map-label-bg: rgba(23, 31, 43, .98);
  --map-label-border: rgba(255, 255, 255, .16);
  --map-label-text: #f4f7fb;
}

.map-unit-dot {
  fill: var(--map-marker-pending);
  stroke: var(--map-marker-border);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.map-unit.is-collected .map-unit-dot {
  fill: var(--map-marker-collected);
}

.map-unit-check {
  font-size: 4.3px;
  font-weight: 900;
  fill: white;
  pointer-events: none;
}

.map-unit-label {
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
}

.map-unit-label-box {
  fill: var(--map-label-bg);
  stroke: var(--map-label-border);
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .16));
}

.map-unit-label-text {
  fill: var(--map-label-text);
  font-size: 6.1px;
  font-weight: 700;
  letter-spacing: 0;
}

.map-unit:hover .map-unit-label,
.map-unit:focus-visible .map-unit-label {
  opacity: 1;
}

.map-unit:hover .map-unit-dot,
.map-unit:focus-visible .map-unit-dot {
  stroke-width: 2;
}

/* --- Real Haute-Savoie geometry --- */

.hs-real-shape {
  fill-rule: evenodd;
}

.hs-shadow {
  transform: translateY(4px);
}

.map-topography {
  pointer-events: none;
}

.ridge-major {
  stroke-width: 1.35;
  opacity: .9;
}

.mountain-ridge {
  fill: none;
  stroke: var(--map-relief);
  stroke-width: 1.15;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.mountain-ridge.subtle {
  stroke: var(--map-relief-soft);
}

/* Le contour administratif devient le trait visuel principal. */
.hs-department {
  stroke: color-mix(in srgb, var(--text) 28%, transparent);
  stroke-width: 1.45;
  stroke-linejoin: round;
}

/* --- Real Lake Geneva geometry --- */

.lake-leman-real {
  fill: var(--map-water);
  stroke: var(--map-water-stroke);
  stroke-width: 1.05;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.map-water-label-leman {
  fill: color-mix(in srgb, #4c7da8 72%, var(--text));
  font-size: 7.5px;
  font-weight: 650;
  font-style: italic;
  letter-spacing: .25px;
}

.lake-annecy-real {
  fill: var(--map-water);
  stroke: var(--map-water-stroke);
  stroke-width: .9;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* --- Company territorial boundaries --- */

.company-boundaries {
  fill: none;
  stroke: color-mix(in srgb, var(--text) 32%, transparent);
  stroke-width: .9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

[data-theme="dark"] .company-boundaries {
  stroke: color-mix(in srgb, var(--text) 38%, transparent);
}


/* --- Map interaction polish --- */

.map-unit-hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.map-unit-check {
  fill: none;
  stroke: #fff;
  stroke-width: .85;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.map-unit-label-text {
  dominant-baseline: central;
}


/* --- UI polish 0.1.12 --- */

.theme-toggle {
  width: auto;
  min-width: 5.2rem;
  padding-inline: .72rem;
  gap: .42rem;
}

.theme-toggle-icon {
  width: 1rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1;
}

.theme-toggle-label {
  font-size: .76rem;
  font-weight: 750;
}

/* La cible interactive est plus grande que le marqueur visible. */
.map-unit-hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.map-unit {
  cursor: pointer;
}

/* Coche SVG indépendante des fontes. */
.map-unit-check {
  fill: none;
  stroke: #fff;
  stroke-width: .82;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/*
 * Pas de déplacement du tooltip au hover :
 * seule l'opacité change, donc aucun recalcul visuel susceptible
 * de provoquer un clignotement au bord du marqueur.
 */
.map-unit-label {
  opacity: 0;
  transform: none;
  transition: opacity .12s ease;
  pointer-events: none;
}

.map-unit:hover .map-unit-label,
.map-unit:focus-visible .map-unit-label {
  opacity: 1;
  transform: none;
}

/* Tooltip explicitement lisible en thème clair. */
[data-theme="light"] .map-unit-label-box {
  fill: rgba(255, 255, 255, .98);
  stroke: rgba(30, 41, 59, .20);
}

[data-theme="light"] .map-unit-label-text {
  fill: #172033;
}

[data-theme="dark"] .map-unit-label-box {
  fill: rgba(22, 30, 42, .98);
  stroke: rgba(255, 255, 255, .16);
}

[data-theme="dark"] .map-unit-label-text {
  fill: #f4f7fb;
}

.map-unit-label-text {
  font-weight: 750;
  dominant-baseline: central;
}

/* Une compagnie terminée passe visuellement au second plan. */
[data-company].is-complete {
  opacity: .48;
  filter: saturate(.55);
  transition: opacity .16s ease, filter .16s ease;
}

[data-company].is-complete:hover,
[data-company].is-complete:focus-within {
  opacity: .78;
  filter: saturate(.8);
}

.collection-date {
  margin: .32rem 0 0;
  color: var(--muted);
  font-size: .79rem;
}

.collection-date strong {
  color: var(--text);
  font-weight: 750;
}

@media (max-width: 680px) {
  .theme-toggle {
    min-width: 2.75rem;
    padding-inline: .6rem;
  }

  .theme-toggle-label {
    display: none;
  }
}


/* --- UI polish 0.1.13 --- */

.map-unit {
  transform: none !important;
}

.map-unit:hover,
.map-unit:focus-visible {
  transform: none !important;
}

.theme-toggle-icons {
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
}

.theme-icon {
  grid-area: 1 / 1;
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-icon-moon {
  fill: currentColor;
  stroke: none;
}

.theme-icon-sun {
  display: none;
}

[data-theme="dark"] .theme-icon-moon {
  display: none;
}

[data-theme="dark"] .theme-icon-sun {
  display: block;
}

.map-unit-label {
  transition: opacity .08s ease;
}


/* --- Editable collection date 0.1.13 --- */

.collection-date-editor {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: .45rem;
  color: var(--muted);
  font-size: .76rem;
}

.collection-date-control {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.collection-date-editor input[type="date"] {
  min-width: 8.8rem;
  padding: .34rem .5rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  outline: none;
}

.collection-date-editor input[type="date"]:hover {
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
}

.collection-date-editor input[type="date"]:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 13%, transparent);
}

[data-collection-date-state] {
  min-width: 4.5rem;
  color: var(--green);
  font-size: .68rem;
  font-weight: 700;
}

[data-collection-date-state].error {
  color: #c45a5a;
}

@media (max-width: 680px) {
  .collection-date-editor {
    align-items: flex-start;
    flex-direction: column;
    gap: .3rem;
  }
}

/* --- Theme toggle alignment --- */

.theme-toggle {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .42rem !important;
  white-space: nowrap;
}

.theme-toggle-icons {
  display: inline-grid;
  flex: 0 0 1.05rem;
  width: 1.05rem;
  height: 1.05rem;
  align-items: center;
  justify-items: center;
}

.theme-toggle-label {
  display: inline-block;
  line-height: 1;
}


/* --- Dashboard polish 0.1.14 --- */

/* Soleil/lune sur la même ligne que le texte. */
.theme-toggle {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .42rem !important;
  white-space: nowrap;
}

.theme-toggle-icons {
  display: inline-grid;
  flex: 0 0 1.05rem;
  width: 1.05rem;
  height: 1.05rem;
  place-items: center;
}

.theme-toggle-label {
  display: inline-block;
  line-height: 1;
}

/* Résumé global. */
.collection-overview-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .8rem 1.2rem;
}

.remaining-summary {
  color: var(--text);
}

.remaining-summary strong {
  font-size: 1.05rem;
}

.latest-collection {
  color: var(--muted);
  font-size: .82rem;
}

.latest-collection strong {
  color: var(--text);
  font-weight: 750;
}

.latest-collection-separator {
  margin-inline: .2rem;
  opacity: .6;
}

/* Export volontairement discret. */
.csv-export-button {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: .38rem .68rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(
    in srgb,
    var(--surface-solid) 92%,
    transparent
  );
  color: var(--text);
  font-size: .74rem;
  font-weight: 750;
  text-decoration: none;
  transition:
    border-color .14s ease,
    background .14s ease;
}

.csv-export-button:hover {
  border-color: color-mix(
    in srgb,
    var(--green) 44%,
    var(--line)
  );
  background: color-mix(
    in srgb,
    var(--green) 7%,
    var(--surface-solid)
  );
}

/* État + date dans la liste. */
.collection-status-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .16rem;
}

.unit-collection-date {
  padding-left: .15rem;
  color: var(--muted);
  font-size: .67rem;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .collection-overview-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: .55rem;
  }

  .csv-export-button {
    margin-left: 0;
  }

  .theme-toggle-label {
    display: none;
  }
}

/* --- Unit photos --- */

.photo-section {
  overflow: hidden;
}

.photo-add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.05rem;
  padding: .38rem .68rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-solid);
  color: var(--text);
  font-size: .74rem;
  font-weight: 750;
  cursor: pointer;
}

.photo-add-button:hover {
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
}

.photo-add-button input {
  display: none;
}

.photo-help {
  margin: -.15rem 0 .8rem;
  color: var(--muted);
  font-size: .7rem;
}

.photo-upload-state {
  min-height: 0;
  margin-bottom: .5rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 650;
}

.photo-upload-state:empty {
  display: none;
}

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}

.photo-item {
  min-width: 0;
}

.photo-preview {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface-solid);
  cursor: zoom-in;
}

.photo-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.photo-meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .3rem;
}

.photo-meta > span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--muted);
  font-size: .67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-delete {
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.photo-delete:hover {
  background: color-mix(in srgb, #b84c4c 10%, transparent);
  color: #b84c4c;
}

.photo-empty {
  padding: .8rem 0;
  color: var(--muted);
  font-size: .76rem;
}

.photo-lightbox {
  position: fixed;
  z-index: 5000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: rgba(8, 12, 18, .88);
}

.photo-lightbox[hidden] {
  display: none;
}

.photo-lightbox img {
  max-width: min(94vw, 1400px);
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

.photo-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(0,0,0,.28);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
}

@media (max-width: 680px) {
  .photo-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .photo-lightbox {
    padding: 1rem;
  }
}


.photo-upload-state.error {
  color: #c45a5a;
}

.photo-delete:disabled,
.photo-add-button:has(input:disabled) {
  opacity: .55;
  cursor: wait;
}

/* Period badge alignment */
.period-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}


/* Archive quantity progress */
.archive-progress-block {
  position: relative;
  z-index: 1;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.archive-progress-block .collection-total strong {
  font-size: clamp(1.75rem, 4vw, 2.45rem);
}

.archive-progress-block .collection-total span {
  font-size: 1rem;
}

.archive-progress-block .collection-percent strong {
  font-size: 1.25rem;
}

.archive-collection-progress {
  margin-top: .85rem;
}

/* Mobile photo rendering stability */
@media (max-width: 680px) {
  .drawer-backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .drawer .reflect-surface {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .photo-preview {
    contain: paint;
  }

  .photo-preview img {
    backface-visibility: hidden;
  }
}