/* Donna Enseignes — système visuel repris de la maquette, à l'identique. */

:root {
  --fond: #FBFAF8;
  --surface: #FFFFFF;
  --barre: #F6F4F1;
  --trait: #E9E6E1;
  --trait-clair: #F0EDE8;
  --trait-tres-clair: #F5F2EE;
  --encre: #171614;
  --encre-douce: #55524C;
  --gris: #9A968E;
  --gris-clair: #B3AFA6;
  --accent: #3B54D8;
  --accent-fonce: #2A3FB0;

  --brouillon-t: #6B6862;  --brouillon-f: #F3F1ED;
  --envoye-t:    #8A6410;  --envoye-f:    #FDF3E0;
  --accepte-t:   #17673F;  --accepte-f:   #E7F4EC;
  --refuse-t:    #9C372F;  --refuse-f:    #FBECEA;
  --facture-t:   #33459E;  --facture-f:   #EEF0FE;

  --rayon: 12px;
  --ombre-carte: 0 1px 2px rgba(23, 22, 20, 0.05);
  --ombre-flottante: 0 24px 70px rgba(23, 22, 20, 0.28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Instrument Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--encre);
  background: var(--fond);
  font-size: 14px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-fonce); }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* Les montants s'alignent en colonne : chiffres à chasse fixe, partout. */
.num { font-variant-numeric: tabular-nums; }

/* ── Ossature ─────────────────────────────────────────────────────────── */

.app { display: flex; height: 100vh; overflow: hidden; }

.barre-laterale {
  width: 248px; flex-shrink: 0; background: var(--barre);
  border-right: 1px solid var(--trait); display: flex; flex-direction: column;
}
.marque { padding: 26px 22px 22px; display: flex; flex-direction: column; gap: 2px; }
.marque b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.marque span {
  font-size: 12px; color: var(--gris);
  letter-spacing: 0.06em; text-transform: uppercase;
}

.menu { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; }
.menu a {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border-radius: 8px; font-size: 14px; color: var(--encre-douce);
}
.menu a:hover { background: rgba(255, 255, 255, 0.6); color: var(--encre); }
.menu a.actif {
  background: var(--surface); box-shadow: var(--ombre-carte);
  font-weight: 500; color: var(--encre);
}
.menu a .compte { margin-left: auto; font-size: 12px; color: var(--gris); }

.pied-laterale { margin-top: auto; padding: 16px 12px; }
.carte-entreprise {
  display: flex; align-items: center; gap: 10px; padding: 10px 11px;
  border-radius: 9px; border: 1px solid var(--trait); background: var(--surface);
}
.jeton {
  width: 30px; height: 30px; border-radius: 7px; background: var(--encre);
  color: #FFF; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}

.colonne { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }

.barre-haut {
  height: 68px; flex-shrink: 0; border-bottom: 1px solid var(--trait);
  background: var(--fond); display: flex; align-items: center;
  justify-content: space-between; padding: 0 28px; gap: 20px;
}
.titre-page { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.sous-titre { font-size: 12.5px; color: var(--gris); }

.contenu { flex-grow: 1; overflow-y: auto; padding: 24px 28px; }

/* ── Commandes ────────────────────────────────────────────────────────── */

.bouton {
  display: inline-flex; align-items: center; gap: 8px; height: 38px;
  padding: 0 16px; border-radius: 19px; border: 1px solid var(--trait);
  background: var(--surface); font-size: 13.5px; color: var(--encre-douce);
  white-space: nowrap;
}
.bouton:hover { border-color: var(--gris-clair); color: var(--encre); }
.bouton.primaire {
  background: var(--encre); color: #FFF; border-color: var(--encre); font-weight: 500;
}
.bouton.primaire:hover { background: #2C2A27; color: #FFF; }
.bouton.discret { border-color: transparent; background: transparent; }
.bouton.discret:hover { background: var(--barre); }
.bouton.danger:hover { border-color: var(--refuse-t); color: var(--refuse-t); }
.bouton[disabled] { opacity: 0.45; cursor: not-allowed; }
.bouton.petit { height: 30px; padding: 0 12px; font-size: 12.5px; border-radius: 15px; }

.raccourci {
  font-size: 11.5px; color: var(--gris-clair); border: 1px solid var(--trait);
  border-radius: 5px; padding: 1px 5px;
}

.champ {
  height: 38px; padding: 0 13px; border-radius: 9px;
  border: 1px solid var(--trait); background: var(--surface); font-size: 13.5px;
  width: 100%;
}
.champ:focus { outline: none; border-color: var(--accent); }
textarea.champ { height: auto; padding: 10px 13px; resize: vertical; line-height: 1.5; }
.etiquette {
  font-size: 12px; color: var(--gris); display: block; margin-bottom: 5px;
}

/* ── Cartes et listes ─────────────────────────────────────────────────── */

.carte {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); overflow: hidden;
}
.carte > header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--trait-clair);
  font-size: 14px; font-weight: 600;
}
.carte-corps { padding: 18px; }

.tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tuile {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.tuile .intitule { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.tuile .chiffre {
  font-size: 30px; font-weight: 600; letter-spacing: -0.025em; line-height: 1;
}
.tuile .detail { font-size: 12.5px; color: var(--gris); }

.rangee {
  display: flex; align-items: center; gap: 14px; padding: 13px 18px;
  border-bottom: 1px solid var(--trait-tres-clair); color: inherit;
}
.rangee:last-child { border-bottom: none; }
a.rangee:hover { background: #FCFBF9; color: inherit; }
.rangee .principal {
  display: flex; flex-direction: column; gap: 3px; flex-grow: 1; min-width: 0;
}
.rangee .principal b { font-size: 13.5px; font-weight: 500; }
.rangee .principal span { font-size: 12px; color: var(--gris); }
.rangee .montant {
  font-size: 13.5px; font-weight: 600; width: 110px; text-align: right;
}

.etat {
  font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 11px;
  white-space: nowrap;
}
.etat.brouillon           { color: var(--brouillon-t); background: var(--brouillon-f); }
.etat.envoye              { color: var(--envoye-t);    background: var(--envoye-f); }
.etat.accepte, .etat.payee { color: var(--accepte-t);  background: var(--accepte-f); }
.etat.refuse, .etat.annule, .etat.annulee, .etat.expire {
  color: var(--refuse-t); background: var(--refuse-f);
}
.etat.emise, .etat.partiellement_payee, .etat.facture {
  color: var(--facture-t); background: var(--facture-f);
}

table.grille { width: 100%; border-collapse: collapse; }
table.grille th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--gris);
  padding: 10px 18px; border-bottom: 1px solid var(--trait-clair);
}
table.grille td {
  padding: 12px 18px; border-bottom: 1px solid var(--trait-tres-clair);
  font-size: 13.5px;
}
table.grille tr:last-child td { border-bottom: none; }
table.grille tbody tr:hover { background: #FCFBF9; }
table.grille td.droite, table.grille th.droite { text-align: right; }

.vide { padding: 44px 18px; text-align: center; color: var(--gris); font-size: 13.5px; }

/* ── Assistant ────────────────────────────────────────────────────────── */

.voile {
  position: fixed; inset: 0; background: rgba(23, 22, 20, 0.28);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 66px; z-index: 50;
}
.panneau-assistant {
  width: 760px; max-width: calc(100vw - 48px); height: min(768px, calc(100vh - 132px));
  background: var(--surface); border-radius: 18px; box-shadow: var(--ombre-flottante);
  display: flex; flex-direction: column; overflow: hidden;
}
.panneau-assistant > header {
  height: 58px; flex-shrink: 0; border-bottom: 1px solid var(--trait-clair);
  display: flex; align-items: center; gap: 11px; padding: 0 20px;
}
.pastille {
  width: 26px; height: 26px; border-radius: 13px; background: var(--encre);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fil {
  flex-grow: 1; padding: 22px 20px; display: flex; flex-direction: column;
  gap: 18px; overflow-y: auto;
}
.bulle-moi {
  align-self: flex-end; max-width: 500px; background: var(--encre); color: #FFF;
  border-radius: 14px 14px 4px 14px; padding: 12px 15px;
  font-size: 13.5px; line-height: 1.5;
}
.bulle-donna { max-width: 580px; font-size: 13.5px; line-height: 1.6; }
.saisie {
  flex-shrink: 0; border-top: 1px solid var(--trait-clair);
  padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 11px;
}
.ligne-saisie { display: flex; align-items: center; gap: 11px; }
.ligne-saisie input {
  flex-grow: 1; height: 44px; border: 1px solid #E3E0DA; border-radius: 22px;
  padding: 0 18px; font-size: 13.5px; background: var(--surface);
}
.ligne-saisie input:focus { outline: none; border-color: var(--accent); }
.micro {
  width: 44px; height: 44px; border-radius: 22px; background: var(--encre);
  border: none; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 5px rgba(23, 22, 20, 0.07); flex-shrink: 0;
}
.micro.enregistre { background: var(--refuse-t); animation: pouls 1.4s infinite; }
@keyframes pouls {
  0%, 100% { box-shadow: 0 0 0 5px rgba(156, 55, 47, 0.18); }
  50%      { box-shadow: 0 0 0 11px rgba(156, 55, 47, 0.08); }
}
.suggestions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.suggestion {
  height: 28px; display: flex; align-items: center; padding: 0 11px;
  border-radius: 14px; background: var(--barre); border: none;
  font-size: 12px; color: var(--encre-douce);
}
.suggestion:hover { background: var(--trait); }

/* ── Divers ───────────────────────────────────────────────────────────── */

.alerte {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 13px;
  border-radius: 10px; font-size: 12.5px; line-height: 1.5;
}
.alerte.attention { background: #FDF9EF; border: 1px solid #F2E6CC; color: #7A5A12; }
.alerte.erreur    { background: var(--refuse-f); border: 1px solid #F3D5D1; color: var(--refuse-t); }

.grappe { display: flex; align-items: center; gap: 10px; }
.pile { display: flex; flex-direction: column; gap: 2px; }
.chargement { padding: 44px; text-align: center; color: var(--gris); font-size: 13px; }

/* ── Dictée ───────────────────────────────────────────────────────────── */

.barre-enregistrement {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 12px;
  background: var(--refuse-f); border: 1px solid #F3D5D1;
  font-size: 12.5px; color: var(--refuse-t);
}
.barre-enregistrement [data-consigne] { flex-grow: 1; color: #8A4A43; }
.barre-enregistrement [data-verrou].actif { background: var(--refuse-t); color: #FFF; }
.point-rouge {
  width: 8px; height: 8px; border-radius: 4px; background: var(--refuse-t);
  animation: clignote 1.2s infinite; flex-shrink: 0;
}
@keyframes clignote { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.bulle-vocale { display: flex; flex-direction: column; gap: 8px; min-width: 320px; }
.entete-vocal {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: #A8A49C;
}
.bulle-vocale audio { width: 100%; height: 34px; }
.transcription-vocal {
  font-size: 13px; line-height: 1.5; color: #E6E3DE;
  padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Le micro ne doit pas déclencher la sélection de texte quand on le maintient. */
.micro { touch-action: none; user-select: none; -webkit-user-select: none; }

/* ── Surimpressions ───────────────────────────────────────────────────── */

/* L'arrière-plan reste lisible mais recule : flou léger et désaturation.
   Deux tons de voile selon que le navigateur sait flouter ou non. */
.voile {
  animation: voile-entre 160ms ease-out;
  background: rgba(23, 22, 20, 0.34);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .voile {
    background: rgba(23, 22, 20, 0.22);
    -webkit-backdrop-filter: blur(7px) saturate(0.85);
    backdrop-filter: blur(7px) saturate(0.85);
  }
}
@keyframes voile-entre { from { opacity: 0; } to { opacity: 1; } }

.voile.sort { animation: voile-sort 150ms ease-in forwards; }
@keyframes voile-sort { to { opacity: 0; } }

.voile-flou { align-items: center; padding: 0 28px; }

.panneau-fiche {
  width: 980px; max-width: 100%; max-height: calc(100vh - 80px);
  background: var(--fond); border-radius: 18px;
  box-shadow: var(--ombre-flottante);
  display: flex; flex-direction: column; overflow: hidden;
  animation: panneau-entre 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.voile.sort .panneau-fiche,
.voile.sort .panneau-assistant { animation: panneau-sort 150ms ease-in forwards; }

@keyframes panneau-entre {
  from { opacity: 0; transform: translateY(14px) scale(0.975); }
  to   { opacity: 1; transform: none; }
}
@keyframes panneau-sort {
  to { opacity: 0; transform: translateY(8px) scale(0.985); }
}
.panneau-assistant { animation: panneau-entre 200ms cubic-bezier(0.22, 1, 0.36, 1); }

.entete-fiche {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: 18px 22px; background: var(--surface);
  border-bottom: 1px solid var(--trait);
}
.jeton.grand { width: 42px; height: 42px; border-radius: 10px; font-size: 15px; }
.corps-fiche {
  overflow-y: auto; padding: 20px 22px 24px;
  display: flex; flex-direction: column; gap: 18px;
}
.colonnes-fiche {
  display: grid; grid-template-columns: minmax(0, 1fr) 304px;
  gap: 18px; align-items: start;
}
.pile-fiche { display: flex; flex-direction: column; gap: 18px; }

/* Les blocs de la fiche arrivent en cascade, très légèrement décalés. */
.corps-fiche > *, .pile-fiche > * { animation: bloc-entre 260ms ease-out backwards; }
.corps-fiche > *:nth-child(2) { animation-delay: 40ms; }
.pile-fiche > *:nth-child(2)  { animation-delay: 60ms; }
.pile-fiche > *:nth-child(3)  { animation-delay: 90ms; }
@keyframes bloc-entre {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Micro flottant ───────────────────────────────────────────────────── */

.micro-flottant {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  width: 58px; height: 58px; border-radius: 29px;
  background: var(--encre); border: none; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(23, 22, 20, 0.26), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms ease;
  animation: micro-arrive 320ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes micro-arrive {
  from { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.85); }
  to   { opacity: 1; transform: translateX(-50%); }
}
.micro-flottant:hover {
  transform: translateX(-50%) translateY(-3px) scale(1.04);
  box-shadow: 0 12px 30px rgba(23, 22, 20, 0.3);
}
.micro-flottant:active { transform: translateX(-50%) scale(0.95); }

/* Halo qui respire : présent sans être clignotant. */
.micro-flottant .halo {
  position: absolute; inset: 0; border-radius: 29px;
  box-shadow: 0 0 0 0 rgba(59, 84, 216, 0.4);
  animation: respire 3.2s ease-out infinite;
  pointer-events: none;
}
@keyframes respire {
  0%   { box-shadow: 0 0 0 0 rgba(59, 84, 216, 0.36); }
  70%  { box-shadow: 0 0 0 16px rgba(59, 84, 216, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 84, 216, 0); }
}

.micro-flottant .bulle-info {
  position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%) translateY(6px);
  white-space: nowrap; background: var(--encre); color: #FFF;
  font-size: 12.5px; padding: 6px 11px; border-radius: 8px;
  opacity: 0; pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}
.micro-flottant:hover .bulle-info { opacity: 1; transform: translateX(-50%); }
.raccourci.clair { border-color: rgba(255, 255, 255, 0.25); color: #A8A49C; }

/* Le micro ne doit pas masquer la fin des listes longues. */
.contenu { padding-bottom: 96px; }

@media (prefers-reduced-motion: reduce) {
  .voile, .panneau-fiche, .panneau-assistant, .micro-flottant,
  .corps-fiche > *, .pile-fiche > *, .micro-flottant .halo {
    animation: none !important;
    transition: none !important;
  }
}