/* ═══════════════ AVANCEMENT — barre de progression des missions (29/09/2026) ═══════════════
   Composant : resources/views/partials/avancement.blade.php · moteur : App\Support\Avancement
   · Le % est du TEMPS écoulé entre le paiement et la livraison attendue ; js/avancement.js le fait
     avancer en direct. Sans JS, la largeur inline est déjà la bonne.
   · Tout est préfixé .umc-av ; couleurs par état via --av-* ; clair ET sombre (data-theme + système).
   · Aucune dépendance, aucun décalage de mise en page (hauteurs réservées, chiffres tabulaires). */

.umc-av{
  --av-ink:#101114; --av-ink-2:#454a55; --av-track:#e9ebef; --av-line:#d7dae0; --av-surface:#fff;
  --av-fill:#ff7a24; --av-fill-2:#ff6300; --av-txt:#9a3b00; --av-soft:#fff1e6;
  position:relative; color:var(--av-ink); font-size:14px; line-height:1.4; margin:10px 0 0;
  font-variant-numeric:tabular-nums;
}
.umc-av--bientot{--av-fill:#f59e0b; --av-fill-2:#d97706; --av-txt:#8a3c00; --av-soft:#fef3c7;}
.umc-av--retard{--av-fill:#dc2626; --av-fill-2:#b91c1c; --av-txt:#b91c1c; --av-soft:#fee2e2;}
.umc-av--attente_client{--av-fill:#3b82f6; --av-fill-2:#2563eb; --av-txt:#1d4ed8; --av-soft:#dbeafe;}
.umc-av--litige{--av-fill:#8b5cf6; --av-fill-2:#7c3aed; --av-txt:#6d28d9; --av-soft:#ede9fe;}
.umc-av--termine{--av-fill:#22c55e; --av-fill-2:#16a34a; --av-txt:#15803d; --av-soft:#dcfce7;}
.umc-av--annule{--av-fill:#9ca3af; --av-fill-2:#6b7280; --av-txt:#4b5563; --av-soft:#f1f2f4;}
.umc-av--indetermine{--av-fill:#9ca3af; --av-fill-2:#9ca3af; --av-txt:#4b5563; --av-soft:#f1f2f4;}

html[data-theme="dark"] .umc-av{
  --av-ink:#eceef2; --av-ink-2:#b6bac4; --av-track:#2b2f38; --av-line:#3a3f4a; --av-surface:#16181d;
  --av-fill:#ff7a24; --av-fill-2:#ff8f45; --av-txt:#ffa266; --av-soft:#2d1b0f;
}
html[data-theme="dark"] .umc-av--bientot{--av-fill:#f59e0b; --av-fill-2:#fbbf24; --av-txt:#fcd34d; --av-soft:#2e2410;}
html[data-theme="dark"] .umc-av--retard{--av-fill:#ef4444; --av-fill-2:#f87171; --av-txt:#fca5a5; --av-soft:#321516;}
html[data-theme="dark"] .umc-av--attente_client{--av-fill:#3b82f6; --av-fill-2:#60a5fa; --av-txt:#93c5fd; --av-soft:#14223d;}
html[data-theme="dark"] .umc-av--litige{--av-fill:#8b5cf6; --av-fill-2:#a78bfa; --av-txt:#c4b5fd; --av-soft:#241b3a;}
html[data-theme="dark"] .umc-av--termine{--av-fill:#22c55e; --av-fill-2:#4ade80; --av-txt:#86efac; --av-soft:#0f2b1b;}
html[data-theme="dark"] .umc-av--annule,
html[data-theme="dark"] .umc-av--indetermine{--av-fill:#6b7280; --av-fill-2:#9ca3af; --av-txt:#c3c7cf; --av-soft:#23262d;}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .umc-av{
    --av-ink:#eceef2; --av-ink-2:#b6bac4; --av-track:#2b2f38; --av-line:#3a3f4a; --av-surface:#16181d;
    --av-fill:#ff7a24; --av-fill-2:#ff8f45; --av-txt:#ffa266; --av-soft:#2d1b0f;
  }
  html:not([data-theme="light"]) .umc-av--bientot{--av-fill:#f59e0b; --av-fill-2:#fbbf24; --av-txt:#fcd34d; --av-soft:#2e2410;}
  html:not([data-theme="light"]) .umc-av--retard{--av-fill:#ef4444; --av-fill-2:#f87171; --av-txt:#fca5a5; --av-soft:#321516;}
  html:not([data-theme="light"]) .umc-av--attente_client{--av-fill:#3b82f6; --av-fill-2:#60a5fa; --av-txt:#93c5fd; --av-soft:#14223d;}
  html:not([data-theme="light"]) .umc-av--litige{--av-fill:#8b5cf6; --av-fill-2:#a78bfa; --av-txt:#c4b5fd; --av-soft:#241b3a;}
  html:not([data-theme="light"]) .umc-av--termine{--av-fill:#22c55e; --av-fill-2:#4ade80; --av-txt:#86efac; --av-soft:#0f2b1b;}
  html:not([data-theme="light"]) .umc-av--annule,
  html:not([data-theme="light"]) .umc-av--indetermine{--av-fill:#6b7280; --av-fill-2:#9ca3af; --av-txt:#c3c7cf; --av-soft:#23262d;}
}

/* ── En-tête facultatif (titre de la mission) ── */
.umc-av-titre{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 12px; margin:0 0 8px;}
.umc-av-titre a{color:var(--av-ink); font-weight:700; font-size:15px; text-decoration:none; min-width:0; overflow-wrap:anywhere;
  display:inline-flex; align-items:center; min-height:44px; margin:-10px 0;}
.umc-av-titre a:hover,.umc-av-titre a:focus-visible{text-decoration:underline;}
.umc-av-titre span{color:var(--av-ink-2); font-size:13px;}
.umc-av-titre b{color:var(--av-ink); font-weight:700;}

/* ── Libellé d'état + gros % ── */
.umc-av-tete{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 0 8px; min-height:34px;}
.umc-av-etat{display:inline-flex; align-items:center; gap:7px; min-width:0; padding:4px 10px 4px 8px; border-radius:999px;
  background:var(--av-soft); color:var(--av-txt); font-size:12.5px; font-weight:700; line-height:1.25; letter-spacing:.005em;}
.umc-av-etat > span{overflow-wrap:anywhere;}
.umc-av-puce{flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--av-fill-2);}
.umc-av--live .umc-av-puce{animation:umc-av-battement 1.8s ease-in-out infinite;}
.umc-av-pct{flex:0 0 auto; color:var(--av-ink); font-weight:800; font-size:30px; line-height:1; letter-spacing:-.02em; white-space:nowrap;}
.umc-av-pct b{display:inline-block; min-width:3ch; text-align:right; font-weight:800;}
.umc-av-pct small{font-size:15px; font-weight:700; margin-left:1px; color:var(--av-ink-2);}

/* ── La barre ── */
.umc-av-barre{position:relative; height:12px; border-radius:999px; background:var(--av-track); overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);}
.umc-av-rempli{position:absolute; left:0; top:0; bottom:0; max-width:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--av-fill-2),var(--av-fill)); transform-origin:left center;
  transition:width .6s cubic-bezier(.22,1,.36,1), background-color .4s;}
.umc-av-rempli::after{content:""; position:absolute; inset:0; border-radius:inherit; opacity:0;
  background:linear-gradient(100deg,transparent 0%,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%,transparent 100%);
  background-size:220% 100%; background-repeat:no-repeat;}
.umc-av--live .umc-av-rempli::after{opacity:1; animation:umc-av-reflet 2.8s ease-in-out 1s infinite;}
.umc-av--retard .umc-av-rempli{background:repeating-linear-gradient(-45deg,var(--av-fill-2) 0 8px,var(--av-fill) 8px 16px);}
/* sans date de fin : barre indéterminée, discrète */
.umc-av--indetermine .umc-av-rempli{width:32% !important; opacity:.55; animation:umc-av-indet 2.4s ease-in-out infinite;}
.umc-av--indetermine .umc-av-pct{color:var(--av-ink-2); font-size:22px;}

/* ── Jalons ── */
.umc-av-jalons{list-style:none; display:flex; margin:12px 0 0; padding:0; counter-reset:none;}
.umc-av-jalons li{position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center;
  font-size:11.5px; line-height:1.25; color:var(--av-ink-2); padding:0 2px; margin:0;}
.umc-av-jalons li::before{content:""; position:absolute; top:7px; left:-50%; right:50%; height:2px; background:var(--av-line); z-index:0;}
.umc-av-jalons li:first-child::before{display:none;}
.umc-av-jalons li.fait::before,.umc-av-jalons li.actif::before{background:var(--av-fill-2);}
.umc-av-pt{position:relative; z-index:1; width:16px; height:16px; border-radius:50%; background:var(--av-surface);
  border:2px solid var(--av-line); display:flex; align-items:center; justify-content:center; margin-bottom:5px; box-sizing:border-box;}
.umc-av-pt svg{width:10px; height:10px; display:block;}
.umc-av-jalons li.fait .umc-av-pt{background:var(--av-fill-2); border-color:var(--av-fill-2); color:#fff;}
html[data-theme="dark"] .umc-av-jalons li.fait .umc-av-pt{color:#101114;}
.umc-av-jalons li.actif .umc-av-pt{border-color:var(--av-fill-2); background:var(--av-surface);}
.umc-av-jalons li.actif .umc-av-pt::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--av-fill-2);}
.umc-av-jalons li.actif .umc-av-pt::before{content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--av-fill); opacity:0; animation:umc-av-halo 2s cubic-bezier(.4,0,.2,1) infinite;}
.umc-av-jalons li.fait,.umc-av-jalons li.actif{color:var(--av-ink);}
.umc-av-jalons li.actif{font-weight:700;}
.umc-av-lb{display:block; max-width:100%; overflow-wrap:anywhere; hyphens:auto;}
.umc-av-sr{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ── Date + temps restant ── */
.umc-av-date{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:12px 0 0; color:var(--av-ink-2); font-size:13.5px; line-height:1.35;}
.umc-av-date svg{width:15px; height:15px; flex:0 0 auto; color:var(--av-ink-2);}
.umc-av-date strong{color:var(--av-ink); font-weight:700;}
.umc-av-reste{color:var(--av-txt); background:var(--av-soft); font-weight:700; white-space:nowrap; font-size:12.5px;
  padding:2px 9px; border-radius:999px; line-height:1.4;}
.umc-av-reste:empty{display:none;}

/* ── Action suivante ── */
.umc-av-action{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; margin:10px 0 0;
  padding:10px 12px; border-radius:10px; background:var(--av-soft); color:var(--av-ink); font-size:13.5px; line-height:1.4;}
.umc-av-action > span{display:flex; gap:8px; align-items:flex-start; min-width:0; flex:1 1 200px;}
.umc-av-action > span svg{width:16px; height:16px; flex:0 0 auto; margin-top:1px; color:var(--av-txt);}
.umc-av-btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 16px; border-radius:10px;
  background:var(--av-btn,#b64700); color:#fff !important; font-weight:700; font-size:14px; text-decoration:none !important; white-space:nowrap;
  transition:transform .15s, filter .15s;}
.umc-av--retard{--av-btn:#b91c1c;} .umc-av--attente_client{--av-btn:#1d4ed8;} .umc-av--litige{--av-btn:#6d28d9;}
.umc-av--termine{--av-btn:#15803d;} .umc-av--annule,.umc-av--indetermine{--av-btn:#4b5563;}
.umc-av-btn:hover{filter:brightness(1.08);}
.umc-av-btn:active{transform:scale(.97);}
.umc-av-btn:focus-visible{outline:3px solid var(--av-fill); outline-offset:2px;}
html[data-theme="dark"] .umc-av-btn{color:#101114 !important; background:var(--av-fill-2);}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .umc-av-btn{color:#101114 !important; background:var(--av-fill-2);}
  html:not([data-theme="light"]) .umc-av-jalons li.fait .umc-av-pt{color:#101114;}}

/* ── Compact : en-tête + barre + date ── */
.umc-av--compact{margin-top:8px;}
.umc-av--compact .umc-av-tete{min-height:26px; margin-bottom:6px;}
.umc-av--compact .umc-av-pct{font-size:20px;}
.umc-av--compact .umc-av-pct small{font-size:12px;}
.umc-av--compact .umc-av-barre{height:8px;}
.umc-av--compact .umc-av-etat{font-size:12px; padding:3px 9px 3px 7px;}
.umc-av--compact .umc-av-date{margin-top:8px; font-size:13px;}

/* ── Animations ── */
@keyframes umc-av-reflet{0%{background-position:160% 0;}60%,100%{background-position:-60% 0;}}
@keyframes umc-av-halo{0%{transform:scale(.7);opacity:.75;}80%,100%{transform:scale(1.45);opacity:0;}}
@keyframes umc-av-battement{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(.7);opacity:.6;}}
@keyframes umc-av-indet{0%{transform:translateX(-100%);}100%{transform:translateX(320%);}}
/* le remplissage à l'apparition : js/avancement.js pose --av-s (0 → 1) */
.umc-av--js .umc-av-rempli{transform:scaleX(var(--av-s,1));}

@media (min-width:640px){
  .umc-av-jalons li{font-size:12px;}
  .umc-av-pct{font-size:32px;}
}
@media (prefers-reduced-motion:reduce){
  .umc-av *, .umc-av *::before, .umc-av *::after{animation:none !important; transition:none !important;}
  .umc-av--indetermine .umc-av-rempli{transform:none;}
  .umc-av-rempli::after{display:none;}
}
@media print{.umc-av-action a{display:none;}}