/* Page Archives (templates/archives/index.html.twig, js/pages/archives.js). */

.arch-tete {
  margin-bottom: .9rem;
}
.arch-sous-titre {
  margin: .2rem 0 0;
  color: var(--bs-secondary-color);
  font-size: .875rem;
}

/* --- Filtres ------------------------------------------------------------ */
.arch-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .6rem;
}
.arch-recherche {
  flex: 1 1 320px;
  max-width: 520px;
}
.arch-filtres .form-select {
  flex: 0 1 220px;
  width: auto;
}

.arch-types {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin: 0 0 .9rem;
  padding: 0;
  border: 0;
}
.arch-type {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .8rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: var(--cx-surface, var(--bs-body-bg));
  color: var(--bs-body-color);
  font-size: .85rem;
  font-weight: 600;
  transition: background-color .12s ease, border-color .12s ease;
}
.arch-type:hover {
  background: var(--bs-tertiary-bg);
}
.arch-type[aria-pressed="true"] {
  border-color: var(--cx-violet, var(--bs-primary));
  background: var(--cx-violet, var(--bs-primary));
  color: #fff;
}
.arch-type-n {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: .75;
}
.arch-type.is-vide:not([aria-pressed="true"]) {
  opacity: .55;
}
.arch-reinitialiser {
  margin-left: auto;
  text-decoration: none;
}

/* --- Liste --------------------------------------------------------------- */
.arch-liste {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.arch-item,
.arch-enfant {
  position: relative;
}
.arch-item {
  border: 1px solid var(--bs-border-color);
  border-radius: .6rem;
  background: var(--cx-surface, var(--bs-body-bg));
  box-shadow: var(--cx-shadow-sm, none);
}

/* Teinte de l'icône par type. */
.arch-item[data-type="executions"]       { --arch-teinte: var(--cx-violet, #6263FC); }
.arch-item[data-type="proceduresModele"] { --arch-teinte: #1F9D8B; }
.arch-item[data-type="groupesModele"]    { --arch-teinte: #D9822B; }
.arch-item[data-type="etapes"]           { --arch-teinte: #3B82C4; }

/* En-tête : chevron, icône, titre, informations ; les actions sont posées à droite. */
.arch-entete {
  display: grid;
  grid-template-columns: .9rem 1.1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  padding: .6rem 7.25rem .6rem .8rem;
  list-style: none;
  cursor: pointer;
}
.arch-entete::-webkit-details-marker {
  display: none;
}
div.arch-entete {
  cursor: default;
}
.arch-entete:focus-visible {
  outline: 2px solid var(--cx-violet, var(--bs-primary));
  outline-offset: -2px;
  border-radius: .6rem;
}
.arch-chevron {
  color: var(--bs-secondary-color);
  font-size: .75rem;
  transition: transform .15s ease;
}
details[open] > summary .arch-chevron {
  transform: rotate(90deg);
}
.arch-icone {
  color: var(--arch-teinte, var(--bs-secondary-color));
}
.arch-titre {
  color: inherit;
  font-weight: 600;
  overflow-wrap: anywhere;
}
a.arch-titre {
  text-decoration: none;
}
a.arch-titre:hover {
  text-decoration: underline;
}
.arch-meta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .3rem .8rem;
  color: var(--bs-secondary-color);
  font-size: .8rem;
}
.arch-meta time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.arch-client {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arch-etiquette {
  padding: .05rem .5rem;
  border-radius: 999px;
  background: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
  font-weight: 600;
  white-space: nowrap;
}
.arch-avancement {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.arch-barre {
  width: 3.5rem;
  height: .3rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bs-secondary-bg);
}
.arch-barre > span {
  display: block;
  height: 100%;
  background: var(--cx-violet, var(--bs-primary));
}
.arch-avancement.is-complet .arch-barre > span {
  background: var(--bs-success);
}

.arch-actions {
  position: absolute;
  top: .4rem;
  right: .6rem;
  display: flex;
  gap: .3rem;
}

/* Contenu ouvert, aligné sur le titre. */
.arch-corps {
  display: block;
  padding: 0 .9rem .8rem 3.25rem;
}
.arch-enfants {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.arch-enfant {
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: .5rem;
  background: var(--bs-body-bg);
}
.arch-enfant > details > .arch-entete {
  padding-block: .45rem;
}
.arch-enfant > .arch-actions {
  top: .25rem;
}
.arch-enfant .arch-corps {
  padding-left: 3rem;
}
.arch-enfant.is-trouve {
  border-color: var(--cx-violet, var(--bs-primary));
  box-shadow: inset 3px 0 0 var(--cx-violet, var(--bs-primary));
}

/* Étapes (fragments archives/_execution et _procedure_modele). */
.arch-etapes {
  margin: 0;
  padding: 0;
  list-style: none;
}
.arch-etape {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .18rem 0;
  font-size: .875rem;
}
.arch-etape > i {
  flex-shrink: 0;
  color: var(--bs-secondary-color);
}
.arch-etape.is-fait > i {
  color: var(--bs-success);
}
.arch-etape.is-masque {
  color: var(--bs-secondary-color);
  text-decoration: line-through;
}
.arch-etape a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.arch-etape a:hover {
  text-decoration: underline;
}
.arch-etape small {
  margin-left: auto;
  padding-left: .75rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}
.arch-etapes.is-numerotee {
  padding-left: 1.2rem;
  list-style: decimal;
}
.arch-etapes.is-numerotee > .arch-etape {
  display: list-item;
}
.arch-section {
  margin: .4rem 0;
  padding-left: .65rem;
  border-left: 3px solid var(--section-cl);
}
.arch-section-titre {
  display: block;
  color: var(--section-cl);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.arch-notes {
  display: flex;
  gap: .5rem;
  margin-bottom: .5rem;
  padding: .45rem .65rem;
  border-radius: .45rem;
  background: var(--bs-tertiary-bg);
  font-size: .85rem;
}
.arch-pied {
  margin: .6rem 0 0;
  color: var(--bs-secondary-color);
  font-size: .78rem;
}
.arch-chargement {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: .85rem;
}
.arch-vide {
  padding: 2rem 0;
  color: var(--bs-secondary-color);
  text-align: center;
}

/* Petit écran : informations sous le titre. */
@media (max-width: 720px) {
  .arch-entete {
    grid-template-columns: .9rem 1.1rem minmax(0, 1fr);
  }
  .arch-meta {
    grid-column: 3;
    justify-content: flex-start;
  }
  .arch-corps,
  .arch-enfant .arch-corps {
    padding-left: .9rem;
  }
}