/* lameute — polish global (propositions UI validées 4 · 7 · 8 · 10)
   À charger sur toutes les pages de l'app après styles.css. */

/* COULEUR (tranché 21/06) :
   ink + ambre = lameute (CTA, nav active, hints clavier, eyebrows, KPI, statuts,
   primes, boosters, notifs, montants).
   SAPIN = leberger UNIQUEMENT (son icône, ses bulles, sa conversation, ses CTA)
   + le scoring (produit par lui). Rien d'autre. Cf. REGLES-VISUELLES.md §0. */
:root {
  --ambre-50: #FAF3E3; --ambre-100: #F4E5C6; --ambre-200: #E8D0A0;
  --ambre-500: #C4891A; --ambre-600: #A87412; --ambre-700: #8A5F0E;
  /* Ambre SIGNAL (21/06) : l'ambre vif réservé aux statuts positifs / actifs
     (Validé, Activé, En cours, Nouveau, Confirmé). Tranche avec l'ink, sans vert.
     Un seul token : passer en « full ambre vif » = changer cette ligne. */
  --ambre-signal: var(--ambre-500);
}

/* LOGO VALIDÉ (11/06) : la touche de clavier T2, « n » minuscule.
   Crème ink-on-paper, jupe visible. 30 px par défaut (rail, headers). */
.lm-keylogo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; box-sizing: border-box;
  border-radius: 7px; background: #FAF8F1; border: 1px solid #D9D3C4;
  box-shadow: 0 2px 0 #D9D3C4, inset 0 1px 0 #fff;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 14px; font-weight: 500;
  color: #161513; line-height: 1; user-select: none;
}

/* RANGS · deux gammes (12/06) — aucune couleur partagée entre les 8 badges.
   Par défaut (sans classe) = la gamme BIZ DEV : l'arc de la chasse,
   Cobalt → Violet → Braise → NACRE (le « loup blanc », hérité de ranks.css).
   Ajouter .lm-ranks-client sur un conteneur pour la gamme CLIENT :
   l'arc de la fidélité, Sarcelle → Lichen → Carmin → OR. */
.lm-ranks-client {
  --rank-1: #0FA092; --rank-1-lead: #3BC9BA; --rank-1-tint: #D9F4F0; --rank-1-fg: #0B6E64;
  --rank-2: #7FA81F; --rank-2-lead: #A8D43F; --rank-2-tint: #EDF6D6; --rank-2-fg: #5A7A12;
  --rank-3: #C21A30; --rank-3-lead: #E5485A; --rank-3-tint: #FADDE0; --rank-3-fg: #9C1426;
  --rank-4: #C9971C; --rank-4-lead: #EDBE3F; --rank-4-tint: #FAF0D3; --rank-4-fg: #8A6209; --rank-4-edge: #E5C963;
}

/* CTA standard lameute : teinte AMBRE (branding) + raccourci clavier */
.lm-cta { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 14px; border-radius: var(--radius-md);
          background: var(--ambre-50); border: 1px solid transparent; color: var(--ambre-700);
          font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer; white-space: nowrap;
          transition: background 140ms cubic-bezier(0.2,0,0,1); text-decoration: none; }
.lm-cta:hover { background: var(--ambre-100); }
.lm-cta .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px;
               border-radius: 5px; border: 1px solid var(--ambre-200); background: var(--surface-card);
               font-family: var(--font-mono); font-size: 10.5px; color: var(--ambre-600); margin-left: 4px; }
.lm-cta--sm { height: 32px; font-size: 12.5px; padding: 0 12px; gap: 6px; }

/* CTA secondaire discret (même anatomie, zéro fond) : « Soumettre une facture » */
.lm-cta-2nd { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 12px; border-radius: var(--radius-md);
              background: transparent; border: 1px solid transparent; color: var(--text-secondary);
              font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer; white-space: nowrap;
              transition: background 140ms cubic-bezier(0.2,0,0,1), color 140ms cubic-bezier(0.2,0,0,1); text-decoration: none; }
.lm-cta-2nd:hover { background: var(--surface-sunken); color: var(--text-primary); }
.lm-cta-2nd .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px;
                   border-radius: 5px; border: 1px solid var(--border-default); background: var(--surface-card);
                   font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); margin-left: 4px; }

/* CTA plein ambre : le moment décisif côté app (ex. Soumettre à lameute) */
.lm-cta-solid { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--radius-md);
                background: var(--ambre-600); border: none; color: #fff;
                font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; white-space: nowrap;
                transition: background 140ms cubic-bezier(0.2,0,0,1); text-decoration: none; }
.lm-cta-solid:hover { background: var(--ambre-700); }
.lm-cta-solid:disabled { opacity: 0.45; cursor: not-allowed; }

/* 7 · Focus ring unifié : le même anneau ambre sur tout élément focusable (doctrine 21/06, REGLES §11) */
:focus-visible {
  outline: 2px solid var(--ambre-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 10 · Transition d'écran : fondu 120 ms du contenu.
   Important : pas d'opacity:0 dans la keyframe. Si l'animation cale au frame
   initial dans certains contextes d'iframe (onglet en arrière-plan, throttling),
   le contenu doit RESTER VISIBLE. On ne gate jamais la visibilité sur l'anim ;
   on ne garde qu'un micro-déplacement de 3px, imperceptible s'il se fige. */
.lm-fade { animation: lm-fadein 120ms cubic-bezier(0.2, 0, 0, 1); }
@keyframes lm-fadein {
  from { transform: translateY(3px); }
  to { transform: none; }
}

/* 8 · Skeleton : le standard de chargement (remplace tout spinner de liste) */
.lm-sk {
  border-radius: 6px;
  background: var(--n-150, #E8E8E4);
  animation: lm-skpulse 1.1s ease-in-out infinite;
}
@keyframes lm-skpulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* 4 · Toast avec action : l'œil discret, révélé au survol (jamais de gros bouton) */
.lm-toastwrap { position: relative; }
.lm-toastwrap .lm-toasteye {
  position: absolute; right: 8px; bottom: 6px;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 6px;
  color: var(--text-muted); cursor: pointer;
  opacity: 0; transition: opacity 120ms cubic-bezier(0.2, 0, 0, 1);
}
.lm-toastwrap:hover .lm-toasteye, .lm-toastwrap:focus-within .lm-toasteye { opacity: 1; }
.lm-toastwrap .lm-toasteye:hover { color: var(--text-primary); }

/* Actions de ligne révélées au survol (ledger, listes de RDV) + spinner */
.lm-row .lm-rowact { opacity: 0; transition: opacity 120ms cubic-bezier(0.2, 0, 0, 1); }
.lm-row:hover .lm-rowact, .lm-row:focus-within .lm-rowact { opacity: 1; }
/* Lignes de mission : léger fond au survol pour les lire comme des blocs distincts */
.lm-mrow { border: 1px solid transparent; transition: background 140ms cubic-bezier(0.2,0,0,1), border-color 140ms cubic-bezier(0.2,0,0,1), box-shadow 140ms cubic-bezier(0.2,0,0,1); }
.lm-mrow:hover { background: var(--surface-card); border-color: var(--border-default); box-shadow: var(--shadow-sm); }
.lm-spin { animation: lm-rotate 1s linear infinite; }
@keyframes lm-rotate { to { transform: rotate(360deg); } }

/* Cadence — barre segmentée façon Linear (refonte 18/06).
   Le CSS est neutre en couleur : le remplissage (dégradé d'or continu, hex assumés,
   REGLES §10) est posé par le JSX. Le segment « suivant » respire (pulse). */
.lm-seg {
  position: relative; height: 10px; border-radius: 99px;
  background: var(--n-100, #ECECE8); overflow: hidden;
}
.lm-seg-fill {
  position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(0.2, 0, 0, 1);
}
.lm-seg.is-next { animation: lm-segpulse 1.7s ease-in-out infinite; }
@keyframes lm-segpulse {
  0%, 100% { background: var(--n-100, #ECECE8); }
  50% { background: var(--n-150, #E0E0DB); }
}

/* Reflet doré qui balaie UNIQUEMENT le segment en cours (l'étape où l'on se trouve). */
.lm-seg.is-current .lm-seg-fill::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, 0.55) 50%, transparent 66%);
  transform: translateX(-130%);
  animation: lm-sheen 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes lm-sheen {
  0% { transform: translateX(-130%); }
  60%, 100% { transform: translateX(130%); }
}

/* Respiration de l'étape en cours (barre cadence A). */
@keyframes lm-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@media (prefers-reduced-motion: no-preference) {
  .lm-breathe { animation: lm-breathe 1.8s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .lm-fade { animation: none; }
  .lm-sk { animation: none; }
  .lm-spin { animation: none; }
  .lm-row .lm-rowact { opacity: 1; }
  .lm-toastwrap .lm-toasteye { opacity: 1; }
  .lm-seg-fill { transition: none; }
  .lm-seg.is-next { animation: none; }
  .lm-seg.is-current .lm-seg-fill::after { animation: none; opacity: 0; }
}

/* Hover navbar : surlignage foncé sur TOUTE icône au survol (le bouton 40px seul),
   l'icône active gardant son surlignage clair ambre. */
.lm-rail { transition: background 140ms cubic-bezier(0.2, 0, 0, 1); }
.lm-rail:hover { background: var(--ambre-100) !important; }
.lm-rail.is-active { background: var(--ambre-50) !important; }
.lm-rail.is-active:hover { background: var(--ambre-100) !important; }
/* leberger = sapin : son icône de rail se surligne en sapin clair, pas en ambre.
   Marqueur par classe `.is-leberger` (ne dépend plus de l'attribut title natif,
   qu'on remplace par le Tooltip DS). On garde le sélecteur title* en rétro-compat. */
.lm-rail[title*="leberger"]:hover,
.lm-rail.is-leberger:hover { background: var(--sapin-50) !important; }
.lm-rail[title*="leberger"].is-active,
.lm-rail.is-leberger.is-active { background: var(--sapin-50) !important; }
.lm-rail[title*="leberger"].is-active:hover,
.lm-rail.is-leberger.is-active:hover { background: var(--sapin-100, #D8EEE4) !important; }
@media (prefers-reduced-motion: reduce) { .lm-rail { transition: none; } }

/* Champs de formulaire épurés (Paramètres) : fond crème, hairline, focus ambre. */
.lm-field { width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: transparent; font-family: var(--font-sans); font-size: 14px; color: var(--text-primary); outline: none; transition: border-color 140ms cubic-bezier(0.2,0,0,1), box-shadow 140ms cubic-bezier(0.2,0,0,1); }
.lm-field::placeholder { color: var(--text-muted); }
.lm-field:hover { border-color: var(--border-strong); }
.lm-field:focus { border-color: var(--ambre-500); box-shadow: 0 0 0 3px var(--ambre-50); }

/* CTA ghost sur une card grise (zebra) : le survol s'éclaircit en crème pour rester
   visible. Sur une card crème, le survol gris par défaut (--surface-hover) suffit. */
.lm-cta-on-grey button:hover,
.lm-cta-on-grey a:hover { background: var(--surface-card) !important; }