/* Numeo : la section animée de l'accueil. L'état « fixe » est complet sans script : le dernier écran de la revue.
   Dans la scène, tout ressemble à l'application : blanc, filets fins, texte sobre.
   Abricot sur le montant à vérifier seulement, rouge sur l'écart seulement. */

#fonctionnement {
  --demo-filet: #E3E7EC;
  --demo-gris-clair: #6B7583;
  position: relative;
  overflow-x: clip;
  padding: 72px 0 96px;
  background: var(--papier);
}
#fonctionnement > h2,
.demo-scene { width: min(1180px, 100% - 64px); margin-inline: auto; }
#fonctionnement > h2 { margin-top: 0; }

.demo-scene { margin-top: 28px; }

/* ------- Les cinq temps : du texte, le temps en cours souligné ------- */
.demo-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.demo-etapes { display: flex; gap: 26px; padding: 0; list-style: none; font-size: 13px; color: var(--demo-gris-clair); }
.demo-etapes li { padding-bottom: 5px; border-bottom: 1.5px solid transparent; white-space: nowrap; }
.demo-scene[data-etape="fixe"] li[data-etape="revoir"],
.demo-scene[data-etape="deposer"] li[data-etape="deposer"],
.demo-scene[data-etape="lire"] li[data-etape="lire"],
.demo-scene[data-etape="controler"] li[data-etape="controler"],
.demo-scene[data-etape="revoir"] li[data-etape="revoir"],
.demo-scene[data-etape="excel"] li[data-etape="excel"] { color: var(--encre); border-bottom-color: var(--encre); }

.demo-pause {
  flex: none;
  /* La largeur de « Reprendre » dès le départ : changer de mot ne déplace rien. */
  min-width: 5.2em;
  min-height: 24px;
  padding: 2px 0 5px;
  /* Atteint au clavier, il ne reste pas sous le bouton fixe de la navigation. */
  scroll-margin-top: 96px;
  -webkit-tap-highlight-color: transparent;
  text-align: right;
  border: 0;
  background: none;
  color: var(--gris);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.demo-pause:hover { color: var(--encre); }
.demo-pause:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }

/* La seule phrase de la section : ce que fait le temps en cours. Une ligne réservée : changer de texte ne déplace rien. */
.demo-legende { display: block; margin-bottom: 12px; color: var(--encre); font-size: 16px; font-weight: 500; line-height: 1.35; }

/* ------- La fenêtre de l'application ------- */
.demo-plateau {
  --demo-barre: 48px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: var(--demo-barre) minmax(0, 1fr);
  grid-template-areas: 'barre barre' 'revue documents';
  overflow: hidden;
  border: 1px solid var(--demo-filet);
  border-radius: 6px;
  background: #fff;
  color: var(--encre);
  font-size: 13px;
  line-height: 1.35;
}
.demo-montant { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

.demo-barre {
  grid-area: barre;
  position: relative;
  z-index: 5;
  background: #fff;
  display: flex;
  align-items: flex-end;
  gap: 32px;
  padding: 0 20px;
  border-bottom: 1px solid var(--demo-filet);
}
.demo-barre .marque { padding-bottom: 12px; font-size: 16px; color: #000; }
.demo-onglet { padding-bottom: 11px; border-bottom: 2px solid var(--encre); margin-bottom: -1px; font-weight: 600; white-space: nowrap; }
.demo-avance { display: flex; align-items: center; gap: 12px; margin-left: auto; padding-bottom: 11px; color: var(--gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo-jauge { display: block; width: 108px; height: 3px; background: var(--demo-filet); }
/* --demo-avance : part de la liste déjà revue, de 0 à 1. */
.demo-jauge i { display: block; width: calc(var(--demo-avance, 1) * 100%); height: 100%; background: var(--nuit); }
.demo-plateau kbd {
  padding: 2px 6px;
  border: 1px solid var(--brume);
  border-radius: 4px;
  color: var(--encre);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
}

/* ------- La liste ------- */
.demo-revue { grid-area: revue; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--demo-filet); }
.demo-colonnes, .demo-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 76px 50px 24px;
  column-gap: 10px;
  align-items: center;
  padding: 0 14px 0 20px;
}
.demo-colonnes, .demo-section {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}
.demo-colonnes { min-height: 40px; border-bottom: 1px solid var(--demo-filet); }
.demo-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  /* Le total s'aligne sur la colonne Écart : la marque de droite en plus. */
  padding: 12px 48px 7px 20px;
  border-bottom: 1px solid var(--demo-filet);
}
.demo-section .demo-total { letter-spacing: 0; font-size: 12.5px; color: var(--encre); }
.demo-ligne { min-height: 41px; border-bottom: 1px solid #EEF1F4; }
.demo-nom { min-width: 0; }
.demo-tiers, .demo-sep { color: var(--gris); }
.demo-ecart { color: var(--demo-gris-clair); }
.demo-ligne[data-statut="justificatif"] .demo-ecart { color: var(--rouge-pointage); font-weight: 500; }
.demo-active { background: #EEF2F6; box-shadow: inset 2px 0 0 var(--nuit); }

.demo-coche {
  display: block;
  justify-self: center;
  width: 15px;
  height: 11px;
  background: var(--nuit);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6.2 6 10.5l8.5-9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6.2 6 10.5l8.5-9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Le « D » de l'application, en trait : il appartient à l'écart, seul à porter du rouge. */
.demo-ligne[data-statut="justificatif"] .demo-coche {
  width: 18px;
  height: 18px;
  border: 1px solid var(--rouge-pointage);
  border-radius: 3px;
  background: none;
  color: var(--rouge-pointage);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  -webkit-mask: none;
  mask: none;
}

.demo-bilan { margin-top: auto; padding: 12px 14px 13px 20px; }
.demo-reste { display: flex; justify-content: space-between; align-items: baseline; padding-right: 34px; font-size: 14px; font-weight: 600; }
.demo-reste .demo-montant { color: var(--rouge-pointage); font-size: 15px; }
.demo-justificatifs { margin-top: 2px; color: var(--gris); font-size: 12.5px; }

/* ------- Le document, ouvert à côté ------- */
.demo-documents { grid-area: documents; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--papier); }
.demo-doc-onglets { display: flex; gap: 20px; padding: 12px 18px 0; color: var(--demo-gris-clair); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.demo-doc-onglets span { padding-bottom: 8px; border-bottom: 1.5px solid transparent; }
.demo-documents[data-document="erb"] .demo-doc-onglets [data-page="erb"],
.demo-documents[data-document="releve"] .demo-doc-onglets [data-page="releve"] { color: var(--encre); font-weight: 500; border-bottom-color: var(--encre); }

/* Une visionneuse : la page coupée en bas, comme à l'écran. Les pages sont sorties du flux pour ne pas dicter la hauteur. */
.demo-lecteur { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; border-top: 1px solid var(--demo-filet); border-bottom: 1px solid var(--demo-filet); }
.demo-page { position: absolute; top: 12px; left: 18px; right: 18px; visibility: hidden; transform-origin: 0 0; background: #fff; box-shadow: 0 0 0 1px var(--demo-filet); }
.demo-page img { display: block; width: 100%; height: auto; }
.demo-documents[data-document="erb"] .demo-page[data-page="erb"],
.demo-documents[data-document="releve"] .demo-page[data-page="releve"] { visibility: visible; }

/* Positions en pourcentages de la page, lues dans le PDF : le cadre suit l'image quelle que soit sa taille. */
.demo-cadre {
  position: absolute;
  background: var(--abricot-fond);
  outline: 1.5px solid var(--abricot-texte);
  outline-offset: 1px;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.demo-doc-pied [data-page] { display: none; }
.demo-documents[data-document="erb"] .demo-doc-pied [data-page="erb"],
.demo-documents[data-document="releve"] .demo-doc-pied [data-page="releve"] { display: inline; }
.demo-doc-pied { display: flex; justify-content: space-between; gap: 12px; padding: 8px 18px 9px; color: var(--gris); font-size: 12px; }
/* Sous la fenêtre : elle reste visible à tous les temps du déroulé. */
.demo-mention { display: block; margin-top: 8px; color: var(--gris); font-size: 12px; font-weight: 500; text-align: right; }

/* ------- Les temps du déroulé : cachés dans l'état fixe, sans bouger la mise en page ------- */
.demo-pause,
.demo-ouverture,
.demo-controle,
.demo-excel { visibility: hidden; }

.demo-ouverture, .demo-excel { position: absolute; inset: var(--demo-barre) 0 0; background: #fff; }

/* Déposer : le dossier attend à gauche, la zone occupe le reste. */
.demo-ouverture { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 32px; align-items: center; padding: 32px; }
.demo-dossier { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; justify-self: center; color: var(--encre); }
.demo-dossier svg { display: block; margin-bottom: 8px; }
.demo-dossier-nom { font-weight: 500; white-space: nowrap; }
.demo-dossier-detail { color: var(--gris); font-size: 12px; white-space: nowrap; }
.demo-depot { position: relative; display: grid; place-items: center; height: 100%; border: 1px dashed var(--brume); border-radius: 4px; color: var(--gris); transition: border-color .2s; }
.demo-depot-texte { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); color: var(--encre); font-size: 14px; text-align: center; transition: opacity .2s; }
.demo-depot.demo-survol { border-color: var(--encre); }
.demo-depot.demo-survol .demo-depot-texte { opacity: 0; }
/* La marge laisse la place du dossier, qui se pose au-dessus de ses fichiers. */
.demo-fichiers { width: min(460px, 100% - 40px); margin: 124px 0 0; padding: 0; list-style: none; font-size: 12.5px; }
.demo-fichiers li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 2px; border-bottom: 1px solid var(--demo-filet); color: var(--encre); opacity: 0; transition: opacity .2s; }
.demo-fichiers li span + span { color: var(--gris); }
.demo-fichiers li:first-child { border-top: 1px solid var(--demo-filet); }
.demo-fichiers li.demo-vu { opacity: 1; }
.demo-curseur { position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; }

/* Contrôler : un panneau monte sur le document, sans le cacher tout à fait. */
.demo-controle { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 18px 16px; border-top: 1px solid var(--demo-filet); background: #fff; }
.demo-analyse { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; min-height: 20px; }
.demo-controles { font-variant-numeric: tabular-nums; color: var(--gris); }
.demo-analyse-fin { font-weight: 600; opacity: 0; transition: opacity .25s; }
.demo-analyse-fin.demo-vu { opacity: 1; }
.demo-controle .demo-jauge { display: block; width: 100%; margin-top: 9px; }
.demo-alerte { display: grid; margin-top: 16px; opacity: 0; transition: opacity .25s; }
.demo-alerte.demo-vu { opacity: 1; }
.demo-alerte-titre { padding-bottom: 8px; border-bottom: 1px solid var(--encre); font-weight: 600; }
.demo-alerte-ligne { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--demo-filet); }
.demo-alerte-ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.demo-alerte-ecart { color: var(--rouge-pointage); font-weight: 600; }

/* Récupérer : la vraie capture remplit la fenêtre, coupée à droite plutôt que réduite. */
.demo-excel { display: flex; flex-direction: column; z-index: 4; }
.demo-excel-titre { display: flex; flex: none; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--demo-filet); }
.demo-excel-titre span:first-child { color: var(--gris); }
.demo-excel-titre b { color: var(--encre); font-weight: 600; }
.demo-excel-titre span + span { color: var(--gris); }
.demo-excel-vue { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.demo-excel img { display: block; position: absolute; top: 0; left: 0; width: auto; max-width: none; height: 100%; }

/* ------- Le déroulé en marche : ce que le temps en cours n'a pas encore produit reste vide ------- */
.demo-animee .demo-pause,
.demo-animee .demo-ouverture,
.demo-animee .demo-controle,
.demo-animee .demo-excel { visibility: visible; }

/* Seul le dossier capture le doigt, et seulement tant qu'on peut le prendre : tout le reste laisse défiler la page. */
.demo-animee .demo-dossier { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.demo-animee .demo-dossier.demo-prenable { touch-action: none; cursor: grab; }
.demo-animee .demo-dossier.demo-tenu { cursor: grabbing; }

.demo-animee .demo-ligne .demo-nom,
.demo-animee .demo-erb,
.demo-animee .demo-piece,
.demo-animee .demo-ecart,
.demo-animee .demo-total,
.demo-animee .demo-bilan,
.demo-animee .demo-justificatifs { opacity: 0; transition: opacity .18s; }
.demo-animee .demo-lu-erb .demo-nom,
.demo-animee .demo-lu-erb .demo-erb,
.demo-animee .demo-lu-piece .demo-piece,
.demo-animee .demo-lu-ecart .demo-ecart,
.demo-animee .demo-total.demo-vu,
.demo-animee .demo-bilan.demo-vu,
.demo-animee .demo-justificatifs.demo-vu { opacity: 1; }
.demo-animee .demo-coche { visibility: hidden; }
.demo-animee .demo-faite .demo-coche { visibility: visible; }
/* Sans quoi le fond de la ligne allumée clignote à chaque passage. */
.demo-animee .demo-ligne { transition: background-color .12s; }

/* Lu : un filet. Vérifié : l'abricot, sur un seul montant à la fois. */
.demo-animee .demo-cadre { opacity: 0; background: none; outline: 1px solid var(--nuit); mix-blend-mode: normal; transition: opacity .12s; }
.demo-animee .demo-cadre.demo-vu { opacity: 1; }
/* Deux ombres pleines plutôt qu'un contour, que le navigateur arrondit à 1 px au moins : --demo-zoom, l'échelle de la page,
   garde le trait fin quand la page s'approche. Le blanc, multiplié, laisse voir la page entre l'abricot et le trait. */
.demo-animee .demo-cadre.demo-cadre-actif {
  opacity: 1;
  background: var(--abricot-fond);
  outline: 0;
  box-shadow: 0 0 0 calc(1px / var(--demo-zoom, 1)) #fff, 0 0 0 calc(2.5px / var(--demo-zoom, 1)) var(--abricot-texte);
  mix-blend-mode: multiply;
}

/* ------- Écrans moyens : la référence au-dessus du tiers ------- */
@media (max-width: 1180px) {
  .demo-sep { display: none; }
  .demo-ref, .demo-tiers { display: block; }
  .demo-tiers { font-size: 12px; }
}

/* ------- Une colonne : le document sous la liste ------- */
@media (max-width: 860px) {
  .demo-plateau { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: 'barre' 'revue' 'documents'; }
  .demo-revue { border-right: 0; border-bottom: 1px solid var(--demo-filet); }
  /* La hauteur vient de la page et non plus de la liste, coupée sous le dernier montant à encadrer. */
  .demo-lecteur { flex: none; aspect-ratio: 1400 / 1560; }
  /* Les montants de l'alerte à côté de leur intitulé : le bouton fixe de la navigation, à droite, ne peut pas les couvrir. */
  .demo-alerte-ligne { justify-content: flex-start; gap: 12px; }
  .demo-alerte-ligne span:first-child { min-width: 3.5em; }
}

/* ------- Une colonne, déroulé lancé : la fenêtre garde une seule hauteur à tous les temps, liste et document se partagent la vue.
   Posé au départ seulement : jusque-là, l'écran fixe reste entier. ------- */
@media (max-width: 860px) {
  .demo-prete .demo-plateau { height: 640px; grid-template-rows: var(--demo-barre) 250px minmax(0, 1fr); }
  .demo-prete .demo-revue { min-height: 0; }
  .demo-prete .demo-liste { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .demo-prete .demo-bilan { flex: none; margin-top: 0; border-top: 1px solid var(--demo-filet); }
  .demo-prete .demo-lecteur { aspect-ratio: auto; flex: 1 1 auto; }
  /* La page garde une taille où les montants se lisent : on la déplace, on ne la réduit pas. */
  .demo-prete .demo-page { left: auto; width: max(100% - 24px, 500px); }
  .demo-prete .demo-doc-pied { display: none; }
}

/* ------- Téléphone ------- */
@media (max-width: 760px) {
  .demo-plateau { --demo-barre: 44px; }
  #fonctionnement { padding: 48px 0 64px; }
  #fonctionnement > h2, .demo-scene { width: calc(100% - 32px); }
  .demo-scene { margin-top: 20px; }
  .demo-legende { margin-bottom: 10px; font-size: 15px; }
  .demo-tete { gap: 8px; }
  .demo-etapes { gap: 12px; font-size: 12px; }
  .demo-pause { font-size: 12px; }
  .demo-barre { gap: 14px; padding: 0 12px; }
  .demo-barre .marque { font-size: 15px; }
  .demo-onglet { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
  .demo-avance { gap: 0; }
  .demo-jauge, .demo-plateau kbd { display: none; }
  .demo-colonnes, .demo-ligne { grid-template-columns: minmax(0, 1fr) 52px 52px 34px 18px; column-gap: 6px; padding: 0 10px 0 12px; font-size: 12px; }
  .demo-colonnes { font-size: 10px; letter-spacing: .06em; }
  .demo-ligne { min-height: 46px; padding-block: 5px; }
  .demo-ref { font-size: 11.5px; line-height: 1.25; letter-spacing: -.01em; }
  .demo-tiers { font-size: 11px; }
  .demo-section { padding: 12px 34px 6px 12px; font-size: 10px; letter-spacing: .06em; }
  .demo-section .demo-total { font-size: 12px; }
  .demo-bilan { padding: 11px 10px 12px 12px; }
  .demo-reste { padding-right: 24px; }
  .demo-doc-onglets { padding: 10px 12px 0; gap: 14px; }
  .demo-page { top: 8px; left: 12px; right: 12px; }
  .demo-doc-pied { padding: 7px 12px 8px; }
  /* À gauche, comme les montants de l'alerte : le bouton fixe, à droite, ne peut pas le couvrir. Deux lignes plutôt qu'un débord. */
  .demo-analyse { justify-content: flex-start; }
  .demo-controles { flex-basis: 100%; }
  .demo-analyse-fin { max-width: 10.5em; }
  .demo-ouverture { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 16px; padding: 16px; }
  .demo-fichiers { width: calc(100% - 24px); margin-top: 110px; font-size: 11.5px; }
  .demo-controle { padding: 10px 12px 10px; }
  .demo-alerte { margin-top: 10px; }
  .demo-alerte-ligne { padding: 5px 0; }
  .demo-excel-titre { flex-direction: column; gap: 2px; padding: 10px 12px; font-size: 12px; }
}

/* ------- Petit téléphone : les cinq temps et « Reprendre » sur une ligne. En dessous de 350 px, le bouton passe à la ligne. ------- */
@media (max-width: 400px) {
  .demo-tete { flex-wrap: wrap; column-gap: 6px; row-gap: 2px; }
  .demo-etapes { gap: 8px; }
  .demo-pause { margin-left: auto; }
  /* À moins de 350 px, la légende la plus longue passe sur deux lignes : la place est réservée, pour tous les temps. */
  .demo-legende { font-size: 14px; }
}
@media (max-width: 349px) {
  .demo-legende { min-height: 2.7em; }
}