/* ==========================================================================
   auGramme — socle de charte
   Réutilisable par tous les écrans : jetons (variables), base, composants.
   Tablette d'abord : zones tactiles d'au moins 56 px, rien ne dépend du survol.
   Chaleur sans clinquant : prune vibrant en marque, corail / pêche / rose en
   touches, beaucoup de neutre pour respirer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */
:root {
  /* Gamme prune — la marque. 700 est l'accent principal. */
  --prune-950: #24103a;
  --prune-900: #37175a;
  --prune-800: #4e1d7e;
  --prune-700: #6526a3;
  --prune-600: #7a36c0;
  --prune-500: #9553d6;
  --prune-300: #c9a6ee;
  --prune-200: #e3d0f7;
  --prune-100: #f1e8fc;
  --prune-50:  #f9f5fe;

  /* Complémentaires chaudes — pour la gaieté, jamais en aplat massif. */
  --corail: #f26b5b;
  --corail-doux: #fde6e1;
  --peche: #ffae7a;
  --peche-doux: #fff0e5;
  --rose: #e2649e;
  --rose-doux: #fce7f0;

  /* Neutres chauds */
  --neutre-0:   #ffffff;
  --neutre-25:  #fdfcfb;
  --neutre-50:  #faf8f6;
  --neutre-100: #f3f0ee;
  --neutre-200: #e9e4ea;
  --neutre-400: #a39cab;
  --neutre-600: #6f6879;
  --neutre-900: #28232f;

  /* Rôles — ce que les composants utilisent. */
  --couleur-fond: var(--neutre-50);
  --couleur-surface: var(--neutre-0);
  --couleur-surface-douce: var(--neutre-25);
  --couleur-surface-verre: rgba(255, 255, 255, 0.72);
  --couleur-texte: var(--neutre-900);
  --couleur-texte-doux: var(--neutre-600);
  --couleur-texte-discret: var(--neutre-400);
  --couleur-bordure: var(--neutre-200);
  --couleur-accent: var(--prune-700);
  --couleur-accent-fonce: var(--prune-800);
  --couleur-accent-doux: var(--prune-100);
  --couleur-accent-texte: #ffffff;
  --couleur-erreur: #c2372b;
  --couleur-erreur-doux: #fdebe7;
  --couleur-succes: #1d7a55;
  --couleur-succes-doux: #e3f5ec;

  /* Dégradés signature */
  --degrade-marque: linear-gradient(135deg, var(--prune-600) 0%, var(--prune-800) 100%);
  --degrade-marque-vif: linear-gradient(135deg, var(--prune-500) 0%, var(--prune-700) 55%, var(--prune-800) 100%);
  --degrade-chaleur: linear-gradient(135deg, var(--prune-600) 0%, var(--rose) 60%, var(--peche) 100%);

  /* Typographie — pile système : aucune requête externe (RGPD), affichage immédiat. */
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --taille-petite: 0.875rem;
  --taille-normale: 1rem;
  --taille-grande: 1.25rem;
  --taille-titre: clamp(1.7rem, 3.4vw, 2.4rem);

  /* Espacements (échelle de 4 px) */
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 24px;
  --espace-6: 32px;
  --espace-7: 48px;
  --espace-8: 64px;

  /* Formes */
  --rayon-petit: 10px;
  --rayon: 16px;
  --rayon-grand: 24px;
  --rayon-rond: 999px;

  /* Ombres — teintées de prune : elles réchauffent au lieu de salir. */
  --ombre-douce: 0 1px 2px rgba(55, 23, 90, 0.05), 0 4px 12px rgba(55, 23, 90, 0.05);
  --ombre-moyenne: 0 2px 6px rgba(55, 23, 90, 0.06), 0 14px 34px rgba(101, 38, 163, 0.10);
  --ombre-haute: 0 6px 14px rgba(55, 23, 90, 0.08), 0 24px 56px rgba(101, 38, 163, 0.16);
  --ombre-accent: 0 8px 22px rgba(101, 38, 163, 0.32), 0 2px 6px rgba(101, 38, 163, 0.20);

  /* Mouvement */
  --duree-rapide: 120ms;
  --duree: 220ms;
  --duree-lente: 420ms;
  --courbe: cubic-bezier(0.2, 0.8, 0.2, 1);
  --courbe-ressort: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Tactile */
  --cible-min: 56px;
  --largeur-contenu: 980px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  /* Base : prune très clair en haut, blanc cassé, une pointe de pêche en bas. */
  background: linear-gradient(180deg, var(--prune-50) 0%, var(--neutre-50) 55%, var(--peche-doux) 130%);
  background-attachment: fixed;
  color: var(--couleur-texte);
  font-family: var(--police);
  font-size: var(--taille-normale);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
}

/* Aurore : halos colorés très doux, qui dérivent lentement derrière tout.
   De simples dégradés radiaux (pas de filtre flou) : léger pour la tablette. */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(149, 83, 214, 0.20), transparent 70%),
    radial-gradient(34% 38% at 85% 18%, rgba(242, 107, 91, 0.13), transparent 70%),
    radial-gradient(40% 44% at 78% 82%, rgba(226, 100, 158, 0.13), transparent 70%),
    radial-gradient(36% 40% at 22% 88%, rgba(255, 174, 122, 0.16), transparent 70%);
  animation: aurore 38s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes aurore {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(3%, -2%, 0) rotate(6deg) scale(1.05); }
  100% { transform: translate3d(-2%, 3%, 0) rotate(-4deg) scale(1.02); }
}

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--prune-500);
  outline-offset: 3px;
}

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Mise en page et transitions d'écran
   -------------------------------------------------------------------------- */
.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espace-5) var(--espace-6);
}

.app {
  flex: 1;
  width: 100%;
  max-width: var(--largeur-contenu);
  margin: 0 auto;
  padding: var(--espace-4) var(--espace-6) var(--espace-8);
  display: flex;
  flex-direction: column;
}

@media (max-width: 600px) {
  .entete { padding: var(--espace-4); }
  .app { padding: var(--espace-3) var(--espace-4) var(--espace-7); }
}

.ecran {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Chaque étape (liste, pavé, erreur…) remplace le contenu de l'écran : ses
   enfants directs entrent en fondu, ce qui anime aussi les changements
   d'étape sans toucher au JavaScript. */
.ecran > * { animation: entree var(--duree-lente) var(--courbe) both; }
.ecran > *:nth-child(2) { animation-delay: 60ms; }
.ecran > *:nth-child(3) { animation-delay: 120ms; }
.ecran > *:nth-child(4) { animation-delay: 180ms; }

@keyframes entree {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.ecran-centre {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--espace-4);
}

/* --------------------------------------------------------------------------
   4. Marque
   -------------------------------------------------------------------------- */
.marque {
  font-size: 1.65rem;
  letter-spacing: -0.03em;
  line-height: 1;
  user-select: none;
}
.marque-au { font-weight: 300; color: var(--couleur-texte-doux); }
.marque-gramme {
  font-weight: 800;
  color: var(--prune-700); /* repli si background-clip:text n'est pas géré */
  background: var(--degrade-chaleur);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.marque-grande { font-size: clamp(2.4rem, 6vw, 3.4rem); }

/* --------------------------------------------------------------------------
   5. Titres et textes
   -------------------------------------------------------------------------- */
.titre-ecran {
  margin: 0;
  font-size: var(--taille-titre);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--prune-950);
}
.sous-titre {
  margin: var(--espace-2) 0 0;
  color: var(--couleur-texte-doux);
  font-size: var(--taille-grande);
}
.en-tete-ecran { margin-bottom: var(--espace-6); }

/* --------------------------------------------------------------------------
   6. Boutons
   -------------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2);
  min-height: var(--cible-min);
  padding: 0 var(--espace-6);
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font-size: var(--taille-grande);
  font-weight: 650;
  cursor: pointer;
  transition: transform var(--duree-rapide) var(--courbe), box-shadow var(--duree) var(--courbe),
              filter var(--duree), opacity var(--duree), background-color var(--duree);
  touch-action: manipulation;
}
.bouton:active { transform: scale(0.96); }
.bouton:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.bouton-principal {
  background: var(--degrade-marque-vif);
  color: var(--couleur-accent-texte);
  box-shadow: var(--ombre-accent);
}
.bouton-principal:not(:disabled):hover { filter: brightness(1.06) saturate(1.05); }

.bouton-secondaire {
  background: var(--couleur-surface);
  border-color: var(--couleur-bordure);
  color: var(--prune-800);
  box-shadow: var(--ombre-douce);
}
.bouton-secondaire:hover { box-shadow: var(--ombre-moyenne); }

.bouton-discret {
  background: transparent;
  color: var(--couleur-texte-doux);
  min-height: 48px;
  padding: 0 var(--espace-4);
  border-radius: var(--rayon-rond);
  font-size: var(--taille-normale);
  font-weight: 550;
}
.bouton-discret:hover { color: var(--prune-700); background: rgba(101, 38, 163, 0.06); }

/* --------------------------------------------------------------------------
   7. Messages, chargement, cartes
   -------------------------------------------------------------------------- */
.message {
  margin: 0;
  border-radius: var(--rayon);
  padding: var(--espace-3) var(--espace-5);
  font-weight: 650;
  text-align: center;
  animation: entree var(--duree) var(--courbe) both;
}
.message-erreur {
  background: var(--couleur-erreur-doux);
  color: var(--couleur-erreur);
  box-shadow: inset 0 0 0 1px rgba(194, 55, 43, 0.14);
}
.message-succes {
  background: var(--couleur-succes-doux);
  color: var(--couleur-succes);
  box-shadow: inset 0 0 0 1px rgba(29, 122, 85, 0.14);
}

.chargement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-4);
  color: var(--couleur-texte-doux);
  font-weight: 500;
}
/* Anneau dégradé prune → rose → pêche, qui tourne. */
.spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 18%, var(--prune-500), var(--rose), var(--peche));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: rotation 0.9s linear infinite;
}
.spinner-petit {
  width: 24px;
  height: 24px;
  background: conic-gradient(from 0deg, transparent 0 18%, rgba(255, 255, 255, 0.5), #fff);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
@keyframes rotation { to { transform: rotate(360deg); } }

.carte {
  background: var(--couleur-surface-verre);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-moyenne);
  padding: var(--espace-6);
}

/* --------------------------------------------------------------------------
   8. Badges de coiffeuse (écran de connexion)
   -------------------------------------------------------------------------- */
.grille-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--espace-5);
}

/* Teinte personnelle : attribuée par la position dans la liste (triée par
   prénom côté API), sur un cycle de six. Chaque teinte = deux tons pour le
   médaillon et le liseré, un fond doux, une ombre colorée. */
.badge-coiffeuse {
  --teinte-a: #a46ae6; --teinte-b: #6526a3;
  --teinte-douce: #f1e8fc; --teinte-ombre: rgba(101, 38, 163, 0.30);
}
.badge-coiffeuse:nth-child(6n+2) {
  --teinte-a: #ff9f86; --teinte-b: #e0503f;
  --teinte-douce: #fde6e1; --teinte-ombre: rgba(224, 80, 63, 0.28);
}
.badge-coiffeuse:nth-child(6n+3) {
  --teinte-a: #5fd0bd; --teinte-b: #16877a;
  --teinte-douce: #dff5f1; --teinte-ombre: rgba(22, 135, 122, 0.26);
}
.badge-coiffeuse:nth-child(6n+4) {
  --teinte-a: #ffc978; --teinte-b: #e0871a;
  --teinte-douce: #fff1dc; --teinte-ombre: rgba(224, 135, 26, 0.28);
}
.badge-coiffeuse:nth-child(6n+5) {
  --teinte-a: #f59ac4; --teinte-b: #c9437f;
  --teinte-douce: #fce7f0; --teinte-ombre: rgba(201, 67, 127, 0.28);
}
.badge-coiffeuse:nth-child(6n+6) {
  --teinte-a: #8f9cf7; --teinte-b: #4a53c4;
  --teinte-douce: #e8eafd; --teinte-ombre: rgba(74, 83, 196, 0.26);
}

.badge-coiffeuse {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espace-3);
  min-height: 236px;
  padding: var(--espace-6) var(--espace-4) var(--espace-5);
  background:
    linear-gradient(180deg, var(--teinte-douce) 0%, #ffffff 58%) padding-box,
    linear-gradient(160deg, var(--teinte-a), var(--teinte-b)) border-box;
  border: 2px solid transparent; /* liseré en dégradé, via le border-box ci-dessus */
  border-radius: var(--rayon-grand);
  box-shadow: 0 2px 6px rgba(55, 23, 90, 0.05), 0 10px 26px -8px var(--teinte-ombre);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--duree) var(--courbe-ressort), box-shadow var(--duree) var(--courbe);
  touch-action: manipulation;
  animation: entree-badge 520ms var(--courbe-ressort) both;
}
/* Entrée en cascade */
.badge-coiffeuse:nth-child(2) { animation-delay: 70ms; }
.badge-coiffeuse:nth-child(3) { animation-delay: 140ms; }
.badge-coiffeuse:nth-child(4) { animation-delay: 210ms; }
.badge-coiffeuse:nth-child(n+5) { animation-delay: 280ms; }
@keyframes entree-badge {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* Reflet doux qui éclaire le haut du badge au survol. */
.badge-coiffeuse::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.9), transparent 60%);
  opacity: 0;
  transition: opacity var(--duree) var(--courbe);
}

/* Survol : uniquement sur les appareils qui en ont un (pas de survol « collé »
   après un toucher sur tablette). */
@media (hover: hover) {
  .badge-coiffeuse:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 4px 10px rgba(55, 23, 90, 0.06), 0 22px 44px -10px var(--teinte-ombre);
  }
  .badge-coiffeuse:hover::after { opacity: 1; }
  .badge-coiffeuse:hover .badge-emoji { transform: scale(1.06) rotate(-4deg); }
}
.badge-coiffeuse:active {
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(55, 23, 90, 0.06), 0 6px 16px -6px var(--teinte-ombre);
  transition-duration: var(--duree-rapide);
}

.badge-emoji {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 45%),
    linear-gradient(145deg, var(--teinte-a, var(--prune-500)), var(--teinte-b, var(--prune-800)));
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.9),
    0 10px 24px -6px var(--teinte-ombre, rgba(101, 38, 163, 0.35));
  font-size: 3.7rem;
  line-height: 1;
  transition: transform var(--duree-lente) var(--courbe-ressort);
}
.badge-prenom {
  font-size: 1.45rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: var(--prune-950);
}
.badge-role {
  font-size: var(--taille-petite);
  font-weight: 550;
  color: var(--couleur-texte-doux);
}

/* L'administratrice : pastille « Responsable » en dégradé de marque, avec une
   étincelle. Sa couleur personnelle reste celle de son badge. */
.badge-coiffeuse.est-admin .badge-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--espace-3) 4px 10px;
  border-radius: var(--rayon-rond);
  background: var(--degrade-marque);
  color: var(--couleur-accent-texte);
  font-weight: 650;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 12px rgba(101, 38, 163, 0.28);
}
.badge-coiffeuse.est-admin .badge-role::before {
  content: "✦";
  font-size: 0.8em;
  color: var(--peche);
}

/* --------------------------------------------------------------------------
   9. Saisie du PIN et pavé numérique
   -------------------------------------------------------------------------- */
.saisie-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-4);
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: var(--espace-6) var(--espace-5) var(--espace-5);
  background: var(--couleur-surface-verre);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 28px;
  box-shadow: var(--ombre-haute);
}
.saisie-pin > .sous-titre { margin: 0; }

.saisie-pin-qui {
  display: flex;
  align-items: center;
  gap: var(--espace-4);
}
.saisie-pin-qui .emoji {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 45%),
    var(--degrade-chaleur);
  box-shadow: 0 0 0 4px #fff, 0 10px 22px -6px rgba(101, 38, 163, 0.4);
  font-size: 2.4rem;
  line-height: 1;
  animation: pop 560ms var(--courbe-ressort) both;
}

.points-pin {
  display: flex;
  gap: var(--espace-5);
  padding: var(--espace-2) 0;
}
.point-pin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--prune-100);
  box-shadow: inset 0 0 0 2px var(--prune-300);
  transition: background var(--duree-rapide), box-shadow var(--duree-rapide);
}
.point-pin.rempli {
  background: var(--degrade-chaleur);
  box-shadow: 0 3px 10px rgba(101, 38, 163, 0.35);
  animation: pop 320ms var(--courbe-ressort);
}

.points-pin.secousse { animation: secousse 380ms var(--courbe); }
.points-pin.secousse .point-pin {
  background: var(--couleur-erreur-doux);
  box-shadow: inset 0 0 0 2px var(--couleur-erreur);
}
@keyframes secousse {
  0%, 100% { transform: none; }
  20% { transform: translateX(-11px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}
@keyframes pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}

.zone-message { min-height: 52px; display: flex; align-items: center; justify-content: center; width: 100%; }

.pave {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espace-3);
  width: 100%;
}
.touche {
  position: relative;
  min-height: 80px;
  border: 1px solid var(--neutre-200);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, var(--neutre-50) 100%);
  box-shadow: 0 1px 0 #fff inset, 0 2px 0 var(--neutre-200), 0 6px 14px rgba(55, 23, 90, 0.06);
  color: var(--prune-950);
  font-size: 2.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  touch-action: manipulation;
  transition: transform var(--duree-rapide) var(--courbe), box-shadow var(--duree-rapide) var(--courbe),
              background var(--duree-rapide), color var(--duree-rapide);
}
/* Onde au toucher : un halo prune qui éclot depuis le centre, puis s'éteint
   en douceur au relâchement. */
.touche::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(149, 83, 214, 0.28) 0%, transparent 65%);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 380ms var(--courbe), transform 380ms var(--courbe);
  pointer-events: none;
}
.touche:active {
  transform: translateY(2px) scale(0.96);
  background: var(--prune-50);
  color: var(--prune-700);
  box-shadow: 0 0 0 2px var(--prune-200) inset, 0 0 0 transparent, 0 2px 6px rgba(55, 23, 90, 0.06);
}
.touche:active::after { opacity: 1; transform: scale(1.4); transition-duration: 60ms; }
.touche:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.touche-effacer {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--couleur-texte-doux);
  font-size: var(--taille-grande);
  font-weight: 550;
}
.touche-effacer:active { background: var(--corail-doux); color: var(--corail); box-shadow: none; }

.touche-valider {
  border: 0;
  background: var(--degrade-marque-vif);
  color: var(--couleur-accent-texte);
  font-size: var(--taille-grande);
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, var(--ombre-accent);
}
/* Reflet qui balaie le bouton tant qu'il est prêt à valider. */
.touche-valider:not(:disabled)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: reflet 2.8s ease-in-out 0.3s infinite;
  pointer-events: none;
}
@keyframes reflet {
  0%, 55% { left: -60%; }
  100% { left: 130%; }
}
.touche-valider:active {
  background: var(--degrade-marque);
  color: #fff;
  box-shadow: 0 3px 10px rgba(101, 38, 163, 0.35);
}
.touche-valider::after { background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 65%); }
.touche-valider:disabled {
  opacity: 1;
  background: var(--prune-100);
  color: var(--prune-300);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   10. Médaillon (coiffeuse, cliente, écrans provisoires)
   -------------------------------------------------------------------------- */
.medaillon {
  display: grid;
  place-items: center;
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 45%),
    var(--degrade-chaleur);
  box-shadow: 0 0 0 4px #fff, 0 10px 24px -6px rgba(101, 38, 163, 0.42);
  color: #fff;
  font-size: 2.5rem;
  font-weight: 750;
  line-height: 1;
}
.medaillon-grand { width: 132px; height: 132px; font-size: 3.4rem; box-shadow: 0 0 0 6px #fff, 0 20px 44px -10px rgba(101, 38, 163, 0.45); }

/* --------------------------------------------------------------------------
   11. Accueil
   -------------------------------------------------------------------------- */
.accueil { gap: var(--espace-6); }

.accueil-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-4);
  flex-wrap: wrap;
}
.accueil-salut { display: flex; align-items: center; gap: var(--espace-4); }
.accueil-salut .sous-titre { margin-top: var(--espace-1); }

/* Arrivée juste après la connexion : le médaillon rebondit, deux ondes s'en échappent. */
.accueil-arrivee .accueil-salut .medaillon {
  position: relative;
  animation: arrivee 820ms var(--courbe-ressort) both;
}
.accueil-arrivee .accueil-salut .medaillon::before,
.accueil-arrivee .accueil-salut .medaillon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 3px solid var(--prune-300);
  opacity: 0;
  animation: onde 1.6s var(--courbe) 0.35s both;
  pointer-events: none;
}
.accueil-arrivee .accueil-salut .medaillon::after { border-color: var(--peche); animation-delay: 0.7s; }
@keyframes arrivee {
  0%   { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.12) rotate(5deg); opacity: 1; }
  80%  { transform: scale(0.97) rotate(-2deg); }
  100% { transform: none; }
}
@keyframes onde {
  0%   { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* --- Recherche : l'élément central --------------------------------------- */
.recherche {
  padding: var(--espace-5);
  background: var(--couleur-surface-verre);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 28px;
  box-shadow: var(--ombre-haute);
}
.recherche-boite { position: relative; }
.recherche-champ {
  width: 100%;
  min-height: 68px;
  padding: 0 60px 0 64px;
  border: 2px solid var(--neutre-200);
  border-radius: 20px;
  /* Loupe dessinée en SVG, aux couleurs de la charte. */
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a36c0' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.8-4.8'/%3E%3C/svg%3E") no-repeat 22px center / 26px;
  color: var(--prune-950);
  font: inherit;
  font-size: 1.3rem; /* ≥ 16 px : pas de zoom automatique sur mobile */
  font-weight: 550;
  box-shadow: inset 0 1px 2px rgba(55, 23, 90, 0.05);
  transition: border-color var(--duree), box-shadow var(--duree);
  -webkit-appearance: none;
  appearance: none;
}
.recherche-champ::placeholder { color: var(--neutre-400); font-weight: 450; }
.recherche-champ:focus {
  outline: none;
  border-color: var(--prune-500);
  box-shadow: 0 0 0 5px rgba(149, 83, 214, 0.16);
}
.recherche-champ::-webkit-search-cancel-button { -webkit-appearance: none; }
.spinner-recherche {
  position: absolute;
  right: 20px;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
.spinner-recherche[hidden] { display: none; }

.recherche-etat {
  margin: var(--espace-3) var(--espace-2) 0;
  min-height: 1.5em;
  color: var(--couleur-texte-doux);
  font-size: var(--taille-petite);
  font-weight: 550;
}
.recherche-etat:empty { display: none; }
.recherche-etat-vide { color: var(--prune-800); font-size: var(--taille-normale); }
.recherche-etat-erreur { color: var(--couleur-erreur); font-size: var(--taille-normale); }
.lien-reessayer {
  min-height: 44px;
  padding: 0 var(--espace-2);
  border: 0;
  background: none;
  color: var(--prune-700);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.resultats {
  list-style: none;
  margin: var(--espace-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--espace-3);
}
.resultats:empty { display: none; }
.resultats > li { animation: entree var(--duree-lente) var(--courbe) both; }
.resultats > li:nth-child(2) { animation-delay: 40ms; }
.resultats > li:nth-child(3) { animation-delay: 80ms; }
.resultats > li:nth-child(n+4) { animation-delay: 120ms; }

.carte-cliente {
  display: flex;
  align-items: center;
  gap: var(--espace-4);
  width: 100%;
  min-height: 84px;
  padding: var(--espace-3) var(--espace-4);
  border: 1px solid var(--neutre-200);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--ombre-douce);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--duree) var(--courbe-ressort), box-shadow var(--duree), border-color var(--duree);
}
@media (hover: hover) {
  .carte-cliente:hover { transform: translateY(-2px); box-shadow: var(--ombre-moyenne); border-color: var(--prune-200); }
}
.carte-cliente:active { transform: scale(0.98); background: var(--prune-50); border-color: var(--prune-200); }

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--prune-100), var(--rose-doux));
  color: var(--prune-700);
  font-weight: 750;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px var(--prune-200);
}
.carte-cliente-texte { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.carte-cliente-nom {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--prune-950);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.carte-cliente-tel {
  color: var(--couleur-texte-doux);
  font-size: var(--taille-petite);
  font-variant-numeric: tabular-nums;
}
.pastille-historique {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--rayon-rond);
  background: var(--peche-doux);
  color: #b4581f;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 174, 122, 0.55);
}

/* --- Actions -------------------------------------------------------------- */
.actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--espace-4);
}
.carte-action {
  display: flex;
  align-items: center;
  gap: var(--espace-4);
  min-height: 104px;
  padding: var(--espace-4) var(--espace-5);
  border: 1px solid var(--neutre-200);
  border-radius: var(--rayon-grand);
  background: #fff;
  box-shadow: var(--ombre-moyenne);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--duree) var(--courbe-ressort), box-shadow var(--duree), filter var(--duree);
}
@media (hover: hover) {
  .carte-action:hover { transform: translateY(-3px); box-shadow: var(--ombre-haute); }
}
.carte-action:active { transform: scale(0.97); }
.carte-action-icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--prune-50);
  box-shadow: inset 0 0 0 1px var(--prune-200);
  font-size: 1.8rem;
}
.carte-action-texte { display: flex; flex-direction: column; gap: 2px; }
.carte-action-titre { font-size: 1.2rem; font-weight: 750; color: var(--prune-950); }
.carte-action-detail { color: var(--couleur-texte-doux); font-size: var(--taille-petite); }

/* La nouvelle coloration est l'action principale : dégradé de marque. */
.carte-action-principale {
  border: 0;
  background: var(--degrade-marque-vif);
  box-shadow: var(--ombre-accent);
}
.carte-action-principale .carte-action-icone {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.carte-action-principale .carte-action-titre { color: #fff; }
.carte-action-principale .carte-action-detail { color: rgba(255, 255, 255, 0.82); }
@media (hover: hover) {
  .carte-action-principale:hover { filter: brightness(1.06) saturate(1.05); box-shadow: var(--ombre-accent); }
}

/* --- Colorations en cours -------------------------------------------------- */
.titre-section {
  margin: 0 0 var(--espace-3);
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--prune-950);
}
.etat-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-1);
  padding: var(--espace-6) var(--espace-5);
  border: 2px dashed var(--prune-200);
  border-radius: var(--rayon-grand);
  background: rgba(255, 255, 255, 0.55);
  text-align: center;
  color: var(--prune-800);
  font-weight: 650;
}
.etat-vide p { margin: 0; }
.etat-vide-icone { font-size: 2rem; margin-bottom: var(--espace-2); opacity: 0.85; }
.etat-vide-detail { color: var(--couleur-texte-doux); font-weight: 450; font-size: var(--taille-petite); }

/* --------------------------------------------------------------------------
   12. Écrans provisoires (fiche cliente, parcours à venir)
   -------------------------------------------------------------------------- */
.ecran-provisoire > .medaillon { animation: arrivee 700ms var(--courbe-ressort) both; }
.ecran-provisoire .sous-titre { margin: 0; }
.pastille-bientot {
  margin: 0;
  padding: 6px var(--espace-4);
  border-radius: var(--rayon-rond);
  background: linear-gradient(135deg, var(--peche-doux), var(--rose-doux));
  color: #a8431f;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 174, 122, 0.6);
}

@media (max-width: 600px) {
  .accueil { gap: var(--espace-5); }
  .recherche { padding: var(--espace-4); border-radius: var(--rayon-grand); }
  .medaillon { width: 60px; height: 60px; font-size: 2.1rem; }
}

/* --------------------------------------------------------------------------
   13. Parcours de coloration : fiche cliente, choix du mode, formule
   -------------------------------------------------------------------------- */
.parcours { gap: var(--espace-5); }
.parcours > .en-tete-ecran { margin-bottom: 0; }

.fil-retour {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 var(--espace-3);
  margin-left: calc(-1 * var(--espace-3));
  border: 0;
  border-radius: var(--rayon-rond);
  background: transparent;
  color: var(--prune-700);
  font-weight: 650;
  cursor: pointer;
}
.fil-retour:hover { background: rgba(101, 38, 163, 0.06); }

.fiche-entete { display: flex; align-items: center; gap: var(--espace-4); }
.fiche-entete .sous-titre { margin-top: var(--espace-1); font-variant-numeric: tabular-nums; }
.medaillon-initiales { font-size: 1.6rem; letter-spacing: 0.02em; }

.infos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--espace-3);
}
.info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--espace-4);
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--ombre-douce);
}
.info-libelle { font-size: var(--taille-petite); color: var(--couleur-texte-doux); font-weight: 600; }
.info-valeur { color: var(--prune-950); font-weight: 600; overflow-wrap: anywhere; }
.info-vide { color: var(--couleur-texte-discret); font-weight: 450; }

.liste-historique { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-3); }
.carte-historique {
  padding: var(--espace-4) var(--espace-5);
  border-radius: var(--rayon);
  background: #fff;
  box-shadow: var(--ombre-douce);
}
.carte-historique-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2) var(--espace-3); }
.carte-historique-date { font-weight: 750; color: var(--prune-950); }
.carte-historique-par { color: var(--couleur-texte-doux); font-size: var(--taille-petite); }
.pastille-manque {
  padding: 2px 10px;
  border-radius: var(--rayon-rond);
  background: var(--corail-doux);
  color: #b3392b;
  font-size: 0.8rem;
  font-weight: 700;
}
.carte-historique-composants { list-style: none; margin: var(--espace-3) 0 0; padding: 0; display: grid; gap: 4px; }
.carte-historique-composants li { display: flex; justify-content: space-between; gap: var(--espace-3); }
.carte-historique-composants b { font-variant-numeric: tabular-nums; color: var(--prune-800); }
.carte-historique-total { margin: var(--espace-2) 0 0; color: var(--couleur-texte-doux); font-size: var(--taille-petite); }

/* Choix du mode */
.choix-mode { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--espace-4); }
.carte-choix { min-height: 140px; align-items: flex-start; padding: var(--espace-5); }
.carte-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--ombre-douce);
  background: var(--neutre-100);
}
.carte-action:disabled .carte-action-icone { filter: grayscale(1); }
.carte-action.en-cours { opacity: 1; outline: 3px solid var(--prune-300); outline-offset: 2px; }
.mention {
  align-self: flex-start;
  margin-top: var(--espace-2);
  padding: 2px 10px;
  border-radius: var(--rayon-rond);
  background: var(--neutre-200);
  color: var(--couleur-texte-doux);
  font-size: 0.8rem;
  font-weight: 650;
}

/* Formule en préparation */
.carte-formule {
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
  padding: var(--espace-5);
  background: var(--couleur-surface-verre);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 28px;
  box-shadow: var(--ombre-haute);
}
.liste-composants { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-2); }
.ligne-composant {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  min-height: 68px;
  padding: var(--espace-2) var(--espace-2) var(--espace-2) var(--espace-4);
  border-radius: var(--rayon);
  background: #fff;
  box-shadow: var(--ombre-douce);
  animation: entree var(--duree) var(--courbe) both;
}
.ligne-composant-texte { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ligne-composant-nom { font-weight: 700; color: var(--prune-950); }
.ligne-composant-detail { font-size: var(--taille-petite); color: var(--couleur-texte-doux); }
.ligne-composant-dose { font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--prune-800); }
.bouton-retirer {
  flex: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--couleur-texte-discret);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.bouton-retirer:active, .bouton-retirer:hover { background: var(--corail-doux); color: var(--corail); }
.formule-vide { margin: 0; padding: var(--espace-4) 0; text-align: center; color: var(--couleur-texte-doux); }
.total-formule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--espace-3) var(--espace-2) 0;
  border-top: 1px dashed var(--prune-200);
  font-size: 1.1rem;
  color: var(--couleur-texte-doux);
}
.total-formule b { font-size: 1.6rem; color: var(--prune-800); font-variant-numeric: tabular-nums; }
.bouton-large { width: 100%; }

/* Panneau d'ajout (feuille qui monte du bas sur tablette) */
.panneau-fond {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(36, 16, 58, 0.32);
  animation: fondu var(--duree) var(--courbe) both;
}
.panneau {
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
  width: 100%;
  max-width: 720px;
  max-height: 88dvh;
  padding: var(--espace-5);
  border-radius: 28px 28px 0 0;
  background: var(--neutre-50);
  box-shadow: 0 -12px 40px rgba(36, 16, 58, 0.25);
  animation: montee 320ms var(--courbe) both;
}
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes montee { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.panneau-tete { display: flex; justify-content: space-between; align-items: center; }
.panneau-tete .titre-section { margin: 0; }
.recherche-champ-compacte { min-height: 60px; font-size: 1.15rem; }

.catalogue { overflow-y: auto; display: grid; gap: var(--espace-4); padding-bottom: var(--espace-2); }
.groupe-marque ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-2); }
.groupe-marque-titre {
  margin: 0 0 var(--espace-2);
  font-size: var(--taille-petite);
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--prune-700);
}
.ligne-produit {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  width: 100%;
  min-height: 60px;
  padding: var(--espace-2) var(--espace-4);
  border: 1px solid var(--neutre-200);
  border-radius: var(--rayon);
  background: #fff;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.ligne-produit:active { background: var(--prune-50); border-color: var(--prune-300); }
.ligne-produit-nom { flex: 1; font-weight: 700; color: var(--prune-950); }
.ligne-produit-stock { color: var(--couleur-texte-discret); font-size: var(--taille-petite); font-variant-numeric: tabular-nums; }
.pastille-type {
  padding: 2px 10px;
  border-radius: var(--rayon-rond);
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--prune-100);
  color: var(--prune-800);
}
.pastille-oxydant { background: var(--neutre-100); color: var(--neutre-600); }
.pastille-decoloration { background: var(--peche-doux); color: #b4581f; }
.pastille-patine { background: var(--rose-doux); color: #a8336d; }

.dose-produit { display: flex; flex-direction: column; align-items: center; text-align: center; }
.dose-produit-nom { font-size: 1.5rem; font-weight: 750; color: var(--prune-950); }
.dose-produit-detail { color: var(--couleur-texte-doux); }
.dose {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--espace-2);
  padding: var(--espace-3) var(--espace-5);
  border: 2px solid var(--prune-300);
  border-radius: 20px;
  background: #fff;
}
.dose:focus-within { border-color: var(--prune-500); box-shadow: 0 0 0 5px rgba(149, 83, 214, 0.16); }
.dose-champ {
  width: 5ch;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--prune-950);
  font: inherit;
  font-size: 3rem;
  font-weight: 750;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dose-unite { font-size: 1.6rem; font-weight: 650; color: var(--couleur-texte-doux); }
.doses-rapides { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--espace-2); }
.puce-dose {
  min-width: 76px;
  min-height: 52px;
  padding: 0 var(--espace-4);
  border: 1px solid var(--prune-200);
  border-radius: var(--rayon-rond);
  background: #fff;
  color: var(--prune-800);
  font-weight: 700;
  cursor: pointer;
}
.puce-dose:active { background: var(--prune-100); transform: scale(0.96); }

/* --------------------------------------------------------------------------
   14. Pesée
   -------------------------------------------------------------------------- */
.pesee-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--espace-4); }
.pesee-entete .sous-titre { margin-top: var(--espace-1); }
.barre-balance { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3); }
.actions-balance { display: flex; flex-wrap: wrap; gap: var(--espace-2); }
.etat-balance {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2);
  padding: 6px var(--espace-4);
  border-radius: var(--rayon-rond);
  background: var(--neutre-100);
  color: var(--couleur-texte-doux);
  font-weight: 650;
}
.etat-balance::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--neutre-400); }
.etat-balance.connectee { background: var(--couleur-succes-doux); color: var(--couleur-succes); }
.etat-balance.connectee::before { background: var(--couleur-succes); box-shadow: 0 0 0 4px rgba(29, 122, 85, 0.18); }

.pesee-grille { display: grid; grid-template-columns: minmax(250px, 1fr) 2fr; gap: var(--espace-5); align-items: start; }
@media (max-width: 820px) { .pesee-grille { grid-template-columns: 1fr; } }

.progression-pesee { color: var(--couleur-texte-doux); font-weight: 600; }
.liste-pesee { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-2); }
.ligne-pesee {
  display: flex;
  align-items: center;
  gap: var(--espace-3);
  width: 100%;
  min-height: 68px;
  padding: var(--espace-2) var(--espace-4);
  border: 2px solid transparent;
  border-radius: var(--rayon);
  background: #fff;
  box-shadow: var(--ombre-douce);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--duree), background var(--duree);
}
.ligne-pesee.courante { border-color: var(--prune-500); background: var(--prune-50); }
.ligne-pesee-etat {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--neutre-100); color: var(--neutre-400); font-weight: 800;
}
.ligne-pesee.pesee-faite .ligne-pesee-etat { background: var(--couleur-succes); color: #fff; }
.ligne-pesee-texte { display: flex; flex-direction: column; min-width: 0; }
.ligne-pesee-nom { font-weight: 700; color: var(--prune-950); }
.ligne-pesee-detail { font-size: var(--taille-petite); color: var(--couleur-texte-doux); font-variant-numeric: tabular-nums; }

.pesee-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-3);
  padding: var(--espace-5);
  text-align: center;
  background: var(--couleur-surface-verre);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 28px;
  box-shadow: var(--ombre-haute);
}
.pesee-produit { margin: 0; font-size: 1.6rem; font-weight: 800; color: var(--prune-950); letter-spacing: -0.02em; }
.pesee-cible { margin: 0; color: var(--couleur-texte-doux); }
.pesee-cible b { color: var(--prune-700); }

/* La goutte (esprit v3) : se remplit vers la cible, plafonnée à 100 % visuel. */
.goutte-cadre { position: relative; width: min(260px, 60vw); }
.goutte { display: block; width: 100%; height: auto; overflow: visible; }
.goutte-fond { fill: var(--prune-50); }
.goutte-contour { fill: none; stroke: var(--prune-300); stroke-width: 3; transition: stroke var(--duree); }
.goutte-liquide {
  fill: url(#goutte-degrade);
  transform: translateY(240px);
  transition: transform 300ms var(--courbe);
}
.goutte .goutte-haut { stop-color: var(--prune-500); transition: stop-color var(--duree); }
.goutte .goutte-bas { stop-color: var(--prune-800); transition: stop-color var(--duree); }
.goutte.zone-cible .goutte-haut { stop-color: var(--rose); }
.goutte.zone-cible .goutte-bas { stop-color: var(--prune-700); }
.goutte.zone-cible .goutte-contour { stroke: var(--prune-600); }
.goutte.zone-dessus .goutte-haut { stop-color: #ff9f86; }
.goutte.zone-dessus .goutte-bas { stop-color: var(--corail); }
.goutte.zone-dessus .goutte-contour { stroke: var(--corail); }
.goutte.validee { animation: validee 700ms var(--courbe-ressort); }
.goutte.validee .goutte-contour { stroke: var(--couleur-succes); stroke-width: 5; }
@keyframes validee { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

.goutte-valeurs { position: absolute; inset: 42% 0 auto 0; display: flex; justify-content: center; pointer-events: none; }
.poids-geant {
  padding: 0 var(--espace-3);
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, 0.82);
  color: var(--prune-950);
  font-size: clamp(2.8rem, 9vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  box-shadow: var(--ombre-douce);
}

.pesee-statut { margin: 0; min-height: 1.6em; font-size: 1.3rem; font-weight: 700; color: var(--couleur-texte-doux); }
.statut-cible, .statut-fini { color: var(--couleur-succes); }
.statut-dessus { color: #c2372b; }
.statut-sous { color: var(--prune-700); }

.stabilite { width: min(320px, 80%); height: 6px; border-radius: var(--rayon-rond); background: var(--neutre-200); overflow: hidden; }
.stabilite-barre {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--prune-500), var(--couleur-succes));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 200ms linear;
}

.ligne-tare { display: flex; align-items: center; gap: var(--espace-2); min-height: 48px; }
.etat-tare { font-size: var(--taille-petite); font-weight: 650; color: var(--couleur-texte-doux); }
.tare-materielle { color: var(--couleur-succes); }
.tare-en-cours { color: var(--prune-700); }
.tare-logicielle, .tare-inconnue {
  padding: 4px 10px; border-radius: var(--rayon-rond);
  background: var(--peche-doux); color: #b4581f;
}
.dose-manuelle { width: min(320px, 100%); }
.pesee-zone .bouton-large { max-width: 420px; }
.bouton.a-confirmer { background: linear-gradient(135deg, #ff9f86, var(--corail)); box-shadow: 0 8px 22px rgba(242, 107, 91, 0.35); }
.bouton-terminer { animation: entree var(--duree-lente) var(--courbe) both; }
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   15. Accessibilité : mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  body::before { animation: none !important; }
  /* Le spinner reste un indicateur : ralenti, pas arrêté. */
  .spinner { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}