/* ==========================================================================
   proxymetee · schema dynamique homepage
   ========================================================================== */

.pmt-flow {
  /* --- étapes proxymetee : cartes blanches --- */
  --pmt-proc-fill: #ffffff;
  --pmt-proc-edge: #D5DAEA;
  --pmt-proc-ink:  #283372;
  --pmt-proc-sub:  #5A649B;

  /* --- la GED : la destination porte l'ambre --- */
  --pmt-dest-fill: #FFC563;
  --pmt-dest-edge: #F0B546;
  --pmt-dest-ink:  #283372;
  --pmt-dest-sub:  #6E5210;
  --pmt-dest-card: #FFF6E6;
  --pmt-dest-cedge: rgba(40,51,114,.13);
  --pmt-dest-cink: #445086;

  /* --- systèmes et canaux du client --- */
  --pmt-sys-fill:  #F2F3F8;
  --pmt-sys-edge:  #D6DAE8;
  --pmt-sys-ink:   #3F4666;
  --pmt-acct-fill: #F2F3F8;

  --pmt-group-ink: #283372;
  --pmt-flowline:  #98A0BE;
  --pmt-frame:     #C6CBDE;

  --pmt-paper:      #ffffff;
  --pmt-paper-edge: #AEB4CB;
  --pmt-paper-line: #CFD3E0;

  --pmt-r-courrier: #283372;
  --pmt-r-factures: #E9A020;
  --pmt-r-notes:    #BE5334;

  --pmt-btn-ink:  #283372;
  --pmt-btn-edge: #D5DAEA;

  --pmt-auto-fill: #283372;
  --pmt-auto-ink:  #ffffff;

  --pmt-speed: 1;

  background: transparent;
  font-family: grotesque, "Bricolage Grotesque", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  /* Hauteur totale du composant */
  height: 60vh;
  height: 60svh;
  max-height: 60vh;
  max-height: 60svh;

  display: flex;
  flex-direction: column;

  overflow: hidden;
  box-sizing: border-box;
}

/* --- sur une section navy --- */
.pmt-flow.pmt-dark {
  --pmt-proc-edge: transparent;
  --pmt-sys-fill:  rgba(255,255,255,.10);
  --pmt-sys-edge:  rgba(255,255,255,.26);
  --pmt-sys-ink:   #ffffff;
  --pmt-acct-fill: #46508A;
  --pmt-group-ink: #ffffff;
  --pmt-flowline:  rgba(255,255,255,.52);
  --pmt-frame:     rgba(255,255,255,.26);
  --pmt-btn-ink:   #ffffff;
  --pmt-btn-edge:  rgba(255,255,255,.28);
}

/* Recevoir est une tuile blanche */
.pmt-flow .pmt-recv {
  --pmt-sys-fill: #F2F3F8;
  --pmt-sys-edge: #D6DAE8;
  --pmt-sys-ink: #3F4666;
}

/* Sur navy, les étapes secondaires sont teintées */
.pmt-flow.pmt-dark .pmt-auto-sys {
  --pmt-auto-fill: #ffffff;
  --pmt-auto-ink: #283372;
}

/* --------------------------------------------------------------- SVG */

.pmt-flow .pmt-svg {
  display: block;

  flex: 1 1 0;
  min-height: 0;

  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;

  /* Le SVG conserve ses proportions */
  object-fit: contain;
}

/* --------------------------------------------------------------- filtres */

.pmt-flow.pmt-nobar .pmt-bar {
  display: none;
}

.pmt-flow .pmt-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  width: 100%;
  flex: 0 0 auto;

  gap: 10px;
  margin: 0 0 18px;
}

.pmt-flow .pmt-btns {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;

  gap: 8px;
  width: 100%;
  max-width: 100%;

  overflow: visible;
}

.pmt-flow .pmt-btns::-webkit-scrollbar {
  display: none;
}

.pmt-flow .pmt-hint {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pmt-btn-ink);
  opacity: .62;
  font-family: grotesque2, "Bricolage Grotesque", inherit;
  margin-right: 2px;
}

.pmt-flow .pmt-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-family: inherit;
  font-size: clamp(12px, 0.9vw + 8px, 14px);
  line-height: 1.4;

  white-space: nowrap;
  flex: none;

  color: var(--pmt-btn-ink);
  background: transparent;

  border: 1px solid var(--pmt-btn-edge);
  border-radius: 9999px;

  padding: 7px clamp(11px, 1.2vw, 16px) 7px clamp(9px, 0.8vw, 12px);
  margin: 0;
  min-height: 0;

  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;

  cursor: pointer;
  transition: opacity .2s, border-color .15s;

  -webkit-appearance: none;
  appearance: none;
}

.pmt-flow .pmt-btn:hover {
  background: transparent;
  border-color: currentColor;
}

.pmt-flow .pmt-btn:focus-visible {
  outline: 2px solid #FFC563;
  outline-offset: 2px;
}

.pmt-flow .pmt-btn[aria-pressed="false"] {
  opacity: .42;
}

/* Icônes des boutons */
.pmt-flow .pmt-ico {
  width: 18px;
  height: 19px;
  flex: none;
  display: block;
  overflow: visible;
}

.pmt-flow .pmt-btn[data-flow="courrier"] {
  --pmt-acc: var(--pmt-r-courrier);
}

.pmt-flow .pmt-btn[data-flow="factures"] {
  --pmt-acc: var(--pmt-r-factures);
}

.pmt-flow .pmt-btn[data-flow="notes"] {
  --pmt-acc: var(--pmt-r-notes);
}

.pmt-flow .pmt-btn[aria-pressed="false"] .pmt-ico {
  filter: grayscale(1);
}

.pmt-flow .pmt-btn .pmt-lbl {
  color: var(--pmt-btn-ink);
}

/* --------------------------------------------------------------- schéma */

.pmt-flow .pmt-t-title {
  font-size: 30px;
  font-weight: 600;
}

.pmt-flow .pmt-t-sub {
  font-size: 24px;
  font-weight: 400;
  font-family: grotesque2, "Bricolage Grotesque", inherit;
}

.pmt-flow .pmt-t-group {
  font-size: 30px;
  font-weight: 500;
  fill: var(--pmt-group-ink);
}

.pmt-flow .pmt-t-chip {
  font-size: 24px;
  fill: var(--pmt-sys-ink);
  font-family: grotesque2, "Bricolage Grotesque", inherit;
}

.pmt-flow .pmt-t-auto {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
  fill: var(--pmt-auto-ink);
}

.pmt-flow .pmt-t-title2 {
  font-size: 24px;
  font-weight: 600;
}

.pmt-flow .pmt-t-sub2 {
  font-size: 23px;
  font-weight: 400;
  font-family: grotesque2, "Bricolage Grotesque", inherit;
}

.pmt-flow .pmt-t-auto2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
  fill: var(--pmt-auto-ink);
}

.pmt-flow .pmt-t-folder {
  font-size: 17px;
  font-family: grotesque2, "Bricolage Grotesque", inherit;
}

.pmt-flow .pmt-t-card {
  font-size: 24px;
  fill: var(--pmt-dest-cink);
  font-family: grotesque2, "Bricolage Grotesque", inherit;
}

/* --------------------------------------------------------- documents animés */

.pmt-flow .pmt-doc {
  offset-rotate: 0deg;
  offset-distance: 0%;
  opacity: 0;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: calc(20s * var(--pmt-speed));
}

.pmt-flow .pmt-c1 {
  offset-path: path("M 700,166 L 700,770");
  animation-name: pmt-k-c1;
}

.pmt-flow .pmt-c2 {
  offset-path: path("M 700,166 L 700,770");
  animation-name: pmt-k-c2;
}

.pmt-flow .pmt-f1 {
  offset-path: path("M 700,166 L 700,301 L 1200,301 L 1200,429 L 800,429 L 800,557 L 700,557 L 700,770");
  animation-name: pmt-k-f1;
}

.pmt-flow .pmt-fd {
  offset-path: path("M 700,166 L 700,301 L 1200,301 L 1200,429 L 800,429 L 800,557 L 1200,557 L 1200,679");
  animation-name: pmt-k-fd;
}

.pmt-flow .pmt-n1 {
  offset-path: path("M 700,166 L 700,770");
  animation-name: pmt-k-n1;
}

.pmt-flow .pmt-n1d {
  offset-path: path("M 700,166 L 700,557 L 1200,557 L 1200,679");
  animation-name: pmt-k-n1d;
}

.pmt-flow .pmt-n2 {
  offset-path: path("M 700,166 L 700,770");
  animation-name: pmt-k-n2;
}

.pmt-flow .pmt-n2d {
  offset-path: path("M 700,166 L 700,557 L 1200,557 L 1200,679");
  animation-name: pmt-k-n2d;
}

.pmt-flow .pmt-i1  { animation-delay: calc(3.5s * var(--pmt-speed) * -1); }
.pmt-flow .pmt-i2  { animation-delay: calc(7.5s * var(--pmt-speed) * -1); }
.pmt-flow .pmt-i3  { animation-delay: calc(17s * var(--pmt-speed) * -1); }
.pmt-flow .pmt-i4  { animation-delay: calc(13s * var(--pmt-speed) * -1); }
.pmt-flow .pmt-i5  { animation-delay: calc(0.75s * var(--pmt-speed) * -1); }
.pmt-flow .pmt-i6  { animation-delay: calc(6s * var(--pmt-speed) * -1); }
.pmt-flow .pmt-i7  { animation-delay: calc(9s * var(--pmt-speed) * -1); }
.pmt-flow .pmt-i8  { animation-delay: calc(5s * var(--pmt-speed) * -1); }
.pmt-flow .pmt-i9  { animation-delay: calc(14s * var(--pmt-speed) * -1); }
.pmt-flow .pmt-i10 { animation-delay: calc(2.5s * var(--pmt-speed) * -1); }

@keyframes pmt-k-c1 {
  0% { offset-distance: 0%; opacity: 0; }
  2.5% { opacity: 1; }
  30.31% { opacity: 1; }
  33.31% { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes pmt-k-c2 {
  0% { offset-distance: 0%; opacity: 0; }
  2.5% { opacity: 1; }
  30.31% { opacity: 1; }
  33.31% { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes pmt-k-f1 {
  0% { offset-distance: 0%; opacity: 0; }
  2.5% { opacity: 1; }
  85.47% { opacity: 1; }
  88.47% { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes pmt-k-fd {
  0% { offset-distance: 0%; opacity: 0; }
  72.31% { opacity: 0; }
  72.32% { opacity: 1; }
  97.00% { opacity: 1; }
  100.00% { offset-distance: 100%; opacity: 0; }
}

@keyframes pmt-k-n1 {
  0% { offset-distance: 0%; opacity: 0; }
  2.5% { opacity: 1; }
  30.31% { opacity: 1; }
  33.31% { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes pmt-k-n1d {
  0% { offset-distance: 0%; opacity: 0; }
  22.67% { opacity: 0; }
  22.68% { opacity: 1; }
  52.87% { opacity: 1; }
  55.87% { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes pmt-k-n2 {
  0% { offset-distance: 0%; opacity: 0; }
  2.5% { opacity: 1; }
  30.31% { opacity: 1; }
  33.31% { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes pmt-k-n2d {
  0% { offset-distance: 0%; opacity: 0; }
  22.67% { opacity: 0; }
  22.68% { opacity: 1; }
  52.87% { opacity: 1; }
  55.87% { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Couleurs des flux */
.pmt-flow .pmt-lane-courrier {
  --pmt-acc: var(--pmt-r-courrier);
}

.pmt-flow .pmt-lane-factures {
  --pmt-acc: var(--pmt-r-factures);
}

.pmt-flow .pmt-lane-notes {
  --pmt-acc: var(--pmt-r-notes);
}

/* Ouvrir le document */
.pmt-flow .pmt-open {
  offset-path: path("M 920,801 L 1200,801 L 1200,720");
  offset-rotate: 0deg;
  offset-distance: 0%;
  animation: pmt-open calc(10s * var(--pmt-speed)) linear infinite;
  transition: opacity .35s ease;
}

.pmt-flow .pmt-open-f {
  --pmt-acc: var(--pmt-r-factures);
}

.pmt-flow .pmt-open-n {
  --pmt-acc: var(--pmt-r-notes);
  animation-delay: calc(5s * var(--pmt-speed) * -1);
}

.pmt-flow .pmt-open[data-off="true"] {
  opacity: 0;
}

@keyframes pmt-open {
  0%, 5% {
    offset-distance: 0%;
  }

  45%, 100% {
    offset-distance: 100%;
  }
}

/* Transitions des flux */
.pmt-flow .pmt-lane {
  transition: opacity .35s ease;
}

.pmt-flow [data-flows] {
  transition: opacity .35s ease;
}

.pmt-flow [data-off="true"] {
  opacity: .2;
}

.pmt-flow .pmt-lane[data-hidden="true"] {
  opacity: 0;
}

/* Respect des préférences de réduction des animations */
@media (prefers-reduced-motion: reduce) {
  .pmt-flow .pmt-doc {
    animation: none;
    opacity: 1;
  }

  .pmt-flow .pmt-fd,
  .pmt-flow .pmt-n1d,
  .pmt-flow .pmt-n2d {
    opacity: 0;
  }

  .pmt-flow .pmt-open {
    animation: none;
  }
}

/* --------------------------------------------------------------- mobile */

@media screen and (max-width: 767px) {

  /* Hauteur sur mobile */
  .pmt-flow {
    height: 80vh;
    height: 80svh;
    max-height: 80vh;
    max-height: 80svh;
  }

  /* La barre de filtres occupe toute la largeur */
  .pmt-flow .pmt-bar {
    width: 100%;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 12px;
  }

  /* Les boutons sont empilés verticalement */
  .pmt-flow .pmt-btns {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;

    width: 100%;
    max-width: 100%;
    gap: 8px;

    overflow: visible;
  }

  /* Chaque bouton prend toute la largeur */
  .pmt-flow .pmt-btn {
    display: flex;
    flex: 0 0 auto;

    width: 100%;
    min-width: 0;
    box-sizing: border-box;

    justify-content: flex-start;
    white-space: normal;

    font-size: 13px;
    padding: 9px 12px;
  }

}