/* L'espace du syndic et la connexion. Les couleurs et les polices viennent
   d'alpage.css, chargée avant. */

.espace-page {
  --ambre: #8a4b05;
  --brique: #a8351b;
}

/* Un élément caché par un script reste caché, quel que soit son affichage. */
.espace-page [hidden] {
  display: none !important;
}

.espace-page h1.titre {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1.12;
}

.espace-page h2.titre {
  font-size: 1.35rem;
  line-height: 1.2;
}

/* Le menu latéral : quatre groupes, la copropriété en tête, le compte au
   pied. Sur téléphone, il devient un tiroir derrière la barre du haut. */

.coque {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.barre-mobile {
  display: none;
}

.menu-lateral {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px 14px 18px;
  background: var(--pre-fonce);
  color: #e4ede6;
}

.menu-lateral .marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  min-height: 44px;
  color: #fff;
  text-decoration: none;
}

.menu-lateral .marque-nom {
  font-size: 1.4rem;
  color: #fff;
}

.copro-courante {
  padding: 12px;
  border-radius: 14px;
  background: rgb(255 255 255 / 7%);
}

.copro-courante p {
  margin: 0;
}

.copro-courante-nom {
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
}

.copro-courante-ville {
  font-size: 0.9rem;
  color: #c9dacd;
}

.copro-courante a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--miel-bandeau);
}

.menu-groupes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.menu-groupe-nom {
  margin: 0 0 4px;
  padding: 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #a9c2b0;
}

.menu-groupes [role="group"] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-lateral nav a,
.menu-compte a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 10px;
  color: #e4ede6;
  font-weight: 600;
  text-decoration: none;
}

.menu-lateral nav a:hover,
.menu-compte a:hover {
  background: rgb(255 255 255 / 8%);
  color: #fff;
}

.menu-lateral nav a[aria-current="page"],
.menu-compte a[aria-current="page"] {
  background: var(--pre);
  color: #fff;
  font-weight: 800;
}

.menu-lateral a:focus-visible,
.menu-lateral button:focus-visible {
  outline: 3px solid var(--miel-bandeau);
  outline-offset: 1px;
}

.menu-compte {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.menu-compte .bouton-texte {
  padding: 0 10px;
  color: #c9dacd;
}

.bouton-texte {
  background: none;
  border: 0;
  padding: 10px 0;
  min-height: 44px;
  font: inherit;
  font-weight: 600;
  color: var(--pre);
  text-decoration: underline;
  cursor: pointer;
}

/* Contenu */

.espace-contenu {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  max-width: 1180px;
  padding: 36px clamp(16px, 4vw, 48px) 80px;
}

.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
}

.intro {
  max-width: 40em;
  color: var(--texte);
  margin-top: -12px;
}

.carte {
  background: var(--papier);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.carte-lien {
  text-decoration: none;
  color: var(--encre);
  gap: 4px;
  border: 1.5px solid transparent;
}

.carte-lien:hover {
  border-color: var(--pre);
  color: var(--encre);
}

.carte-titre {
  font-size: 1.3rem;
}

.vide {
  max-width: 40em;
  align-items: flex-start;
}

.liste-coproprietes {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.message {
  border-radius: 12px;
  padding: 12px 16px;
}

.message ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.message-ok {
  background: #dce8d6;
  color: var(--pre-fonce);
}

.message-erreur {
  background: #fbe3dc;
  color: #7a2412;
}

/* Tableau de bord */

.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}

.chiffre-valeur {
  font-size: 2.2rem;
  line-height: 1.1;
}


/* Formulaires */

.formulaire {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.formulaire-large {
  max-width: 820px;
}

.formulaire > .champ,
.formulaire > .rangee,
.formulaire > fieldset,
.formulaire > .message,
.formulaire > .depot {
  align-self: stretch;
}

/* Dans une colonne, la base de .champ (220px) deviendrait une hauteur. */
.formulaire > .champ {
  flex: none;
}

.rangee {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.champ {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.champ-court {
  flex: 0 1 170px;
}

.espace-page label,
.espace-page legend {
  font-weight: 700;
  font-size: 0.98rem;
}

.facultatif,
.aide-ligne {
  font-weight: 400;
  color: var(--doux);
}

.aide {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--doux);
}

.espace-page input:not([type="checkbox"], [type="file"]),
.espace-page select,
.espace-page textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid #c9d4c2;
  border-radius: 10px;
  background: var(--papier);
  font: inherit;
  color: var(--encre);
}

.espace-page input:focus-visible,
.espace-page select:focus-visible,
.espace-page textarea:focus-visible {
  border-color: var(--pre);
}

.champ-case {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.champ-case input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--pre);
}

.champ-case label {
  font-weight: 600;
}

fieldset {
  border: 1px solid var(--hall);
  border-radius: 14px;
  padding: 14px 18px 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

legend {
  padding: 0 6px;
}


.actions-formulaire {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.espace-page .bouton {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.bouton-cadre-large {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid var(--pre);
  background: var(--papier);
  color: var(--pre);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--pre);
  min-height: 44px;
  display: flex;
  align-items: center;
}

details[open] summary {
  margin-bottom: 8px;
}


.bouton-danger {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid #a8351b;
  background: var(--papier);
  color: #a8351b;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.bouton-danger:hover {
  background: #fbe3dc;
}

/* Clés et tableaux */

.cles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.cles li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--filet);
}

.cle-ligne {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
}

.cle-etat {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cle-juste .cle-etat {
  color: var(--pre);
}

.cle-manque .cle-etat {
  color: var(--ambre);
}

.cle-trop .cle-etat {
  color: var(--brique);
}

.cle-nom {
  font-weight: 700;
}


.tableau-defilant {
  overflow-x: auto;
  background: var(--papier);
  border-radius: 20px;
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}

.tableau th,
.tableau td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px;
  border-bottom: 1px solid var(--filet);
}

.tableau thead th {
  font-size: 0.88rem;
  color: var(--doux);
  font-weight: 700;
  white-space: nowrap;
}

.tableau tbody tr:last-child > * {
  border-bottom: 0;
}

.tableau .nombre {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tableau-journal .detail {
  font-size: 0.88rem;
  color: var(--texte);
  overflow-wrap: anywhere;
}

.deux-colonnes {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.deux-colonnes > .carte {
  flex: 1 1 380px;
  min-width: 0;
}

code {
  font-size: 0.9em;
  background: var(--sol);
  padding: 1px 6px;
  border-radius: 6px;
}

/* Connexion */

.connexion {
  max-width: 460px;
  margin: 0 auto;
  padding: 48px 16px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
}

.connexion-carte {
  align-self: stretch;
}

.connexion-carte .formulaire {
  align-items: stretch;
}

.connexion-carte p {
  color: var(--texte);
}

.espace-page input.champ-code {
  font-size: 1.6rem;
  letter-spacing: 0.3em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.renvoi {
  align-self: center;
}

/* Ce qui rend l'espace plus doux à parcourir */

/* Le passage d'une page à l'autre se fond au lieu de clignoter ; la barre du
   haut ne bouge pas. Les navigateurs qui ne savent pas faire changent de page
   comme avant. */
@view-transition {
  navigation: auto;
}

.menu-lateral {
  view-transition-name: menu;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 160ms;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ancre {
  scroll-margin-top: 24px;
}

html:has(.espace-page) {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:has(.espace-page) {
    scroll-behavior: auto;
  }
}

.entete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.entete-actions .bouton-cadre {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
}

.pile {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Le message « enregistré » */

.toast {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 24px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 12px 20px 12px 16px;
  border-radius: 999px;
  background: var(--pre-fonce);
  color: var(--papier);
  font-weight: 600;
  box-shadow: var(--ombre);
  view-transition-name: toast;
}

.toast svg {
  flex: none;
  color: var(--miel);
}

@media (prefers-reduced-motion: no-preference) {
  .toast {
    animation: toast-entree 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  }

  .toast-parti {
    animation: toast-sortie 0.3s ease-in forwards;
  }
}

.toast-parti {
  animation: toast-sortie 0.01s forwards;
}

@keyframes toast-entree {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes toast-sortie {
  to {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* La ligne qu'on vient d'enregistrer brille un instant. */

.ligne-lien {
  cursor: pointer;
}

.ligne-lien:hover > * {
  background: var(--sol);
}

.ligne-lien:target > * {
  background: var(--miel-clair);
}

@media (prefers-reduced-motion: no-preference) {
  .ligne-lien > * {
    transition: background-color 0.15s;
  }

  .ligne-lien:target > * {
    animation: lueur 2.4s ease-out 0.3s both;
  }
}

@keyframes lueur {
  from {
    background: var(--miel-clair);
  }
  to {
    background: transparent;
  }
}

.a-saisir {
  color: var(--ambre);
  font-weight: 600;
}

.puce-lot {
  display: inline-block;
  min-width: 2em;
  margin: 0 4px 4px 0;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--hall);
  text-align: center;
  font-weight: 600;
  font-size: 0.92rem;
}

.accord {
  color: var(--pre);
  font-weight: 600;
}

/* Jauges : la mise en route, et chaque clé de répartition. Des <progress>,
   pas des largeurs en style en ligne, que la CSP refusera. */

.jauge {
  display: block;
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: 999px;
  background: var(--hall);
  overflow: hidden;
  appearance: none;
  color: var(--pre);
}

.jauge::-webkit-progress-bar {
  background: var(--hall);
}

.jauge::-webkit-progress-value {
  background: currentColor;
  border-radius: 999px;
}

.jauge::-moz-progress-bar {
  background: currentColor;
  border-radius: 999px;
}

.jauge-fine {
  height: 6px;
}

.cle-manque .jauge {
  color: var(--miel);
}

.cle-trop .jauge {
  color: var(--brique);
}

@media (prefers-reduced-motion: no-preference) {
  .jauge::-webkit-progress-value {
    transition: width 0.5s ease-out;
  }
}

.liste-avancement {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

/* La mise en route au tableau de bord */

.route-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}

.etapes {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.etape {
  position: relative;
  display: flex;
  gap: 16px;
  padding-bottom: 20px;
}

.etape:last-child {
  padding-bottom: 0;
}

/* Le fil qui relie les pastilles */
.etape:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 2px;
  width: 2px;
  background: var(--hall);
}

.etape-faite:not(:last-child)::before {
  background: var(--pre);
}

.pastille {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--hall);
  background: var(--papier);
  color: var(--doux);
  font-weight: 700;
}

.etape-faite .pastille {
  border-color: var(--pre);
  background: var(--pre);
  color: var(--papier);
}

.etape-courante .pastille {
  border-color: var(--miel);
  background: var(--miel);
  color: var(--encre);
}

.etape-corps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-top: 4px;
  min-width: 0;
}

.etape-titre {
  font-weight: 700;
}

.etape-faite .etape-titre,
.etape-a-venir .etape-titre {
  color: var(--doux);
  font-weight: 600;
}

.restes {
  margin: 0;
  padding-left: 18px;
  color: var(--texte);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Saisie des tantièmes : ce qu'il reste à répartir */

.reste:empty {
  display: none;
}

.reste[data-etat="juste"] {
  color: var(--pre);
  font-weight: 600;
}

.reste[data-etat="manque"] {
  color: var(--texte);
}

.reste[data-etat="trop"] {
  color: var(--brique);
  font-weight: 600;
}

/* Dépliants : nouvelle clé, suppression */

.depli summary,
.zone-suppression summary {
  list-style: none;
  gap: 8px;
}

.depli summary::-webkit-details-marker,
.zone-suppression summary::-webkit-details-marker {
  display: none;
}

.depli summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hall);
  color: var(--pre);
  font-size: 1.1rem;
  line-height: 1;
}

.depli[open] summary::before {
  content: "−";
}

.zone-suppression {
  border-top: 1px solid #d3dccd;
  padding-top: 8px;
  color: var(--texte);
}

.zone-suppression summary {
  color: var(--brique);
  font-weight: 600;
  width: fit-content;
}

.suppression-confirmer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #fbe3dc;
}

@media (prefers-reduced-motion: no-preference) {
  details[open] > :not(summary) {
    animation: deplier 0.22s ease-out;
  }
}

@keyframes deplier {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* Le dépôt du fichier à importer */

.depot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  border: 2px dashed #c9d4c2;
  border-radius: 16px;
  background: var(--sol);
  color: var(--pre);
  text-align: center;
  font-weight: 600;
  cursor: pointer;
}

.depot:hover,
.depot-survol {
  border-color: var(--pre);
  background: var(--hall);
}

.depot:focus-within {
  outline: 3px solid var(--miel);
  outline-offset: 2px;
}

.depot-plein {
  border-style: solid;
  border-color: var(--pre);
}

/* Le vrai champ couvre la zone : un clic l'ouvre, un dépôt y tombe. */
.depot input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Les lots d'un copropriétaire, en étiquettes à cocher */

.choix-lots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choix-lot {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 108px;
  padding: 8px 14px;
  border: 1.5px solid #c9d4c2;
  border-radius: 12px;
  background: var(--papier);
  cursor: pointer;
  font-weight: 700;
  line-height: 1.3;
}

.choix-lot input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choix-lot-type {
  font-weight: 400;
  font-size: 0.86rem;
  color: var(--doux);
}

.choix-lot-libre .choix-lot-type {
  color: var(--ambre);
}

.choix-lot:hover {
  border-color: var(--pre);
}

.choix-lot:has(input:checked) {
  border-color: var(--pre);
  background: var(--pre);
  color: var(--papier);
}

.choix-lot:has(input:checked) .choix-lot-type {
  color: #d8e6d2;
}

.choix-lot:has(input:focus-visible) {
  outline: 3px solid var(--miel);
  outline-offset: 2px;
}

/* Un bouton qui envoie : il patiente, un second clic ne repart pas. */

[aria-busy="true"] {
  cursor: progress;
  opacity: 0.75;
}

[aria-busy="true"]::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: 8px;
  vertical-align: -0.12em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tourner 0.7s linear infinite;
}

@keyframes tourner {
  to {
    rotate: 360deg;
  }
}

/* Sur un téléphone, les onglets défilent sur une ligne sous le nom. */

@media (max-width: 760px) {
  .toast {
    bottom: 16px;
  }
}

/* .espace-page .bouton retire la bordure des boutons ; le bouton cadré la garde. */
.espace-page .bouton-cadre {
  border: 1.5px solid var(--pre);
}

.tantiemes-saisie .champ-court {
  flex-basis: 200px;
}

.espace-page a.bouton-cadre {
  display: inline-flex;
  align-items: center;
}

/* Saisie par un agent */

.bandeau-proposition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 16px 20px;
  border-radius: 20px;
  background: var(--miel-clair);
  border: 1.5px solid var(--miel);
}

.bandeau-proposition svg {
  flex: none;
  color: var(--ambre);
}

.bandeau-proposition p {
  flex: 1 1 320px;
}

.acces-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.acces-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--filet);
}

.acces-liste li > div {
  display: flex;
  flex-direction: column;
}

.copie {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.copie-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}

.copie-ligne input,
.copie-ligne textarea {
  flex: 1 1 320px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9rem;
  resize: vertical;
}

.copie-ligne .bouton {
  min-height: 44px;
}

.decision {
  padding-top: 4px;
}

/* --- Conseil syndical, compte, coffre ------------------------------------- */

.sous-titre {
  font-size: 1.1rem;
  margin: 8px 0 0;
}

.etiquette {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--hall);
  color: var(--texte);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.etiquette-ok {
  background: #d7ecd9;
  color: var(--pre-fonce);
}

.etiquette-attente {
  background: var(--miel-clair);
  color: var(--ambre);
}

.acces-liste li > div .etiquette {
  margin-top: 6px;
}

/* Une action qui demande confirmation, au bout d'une ligne de liste. */
.depli-action summary {
  list-style: none;
  width: fit-content;
  margin-left: auto;
}

.depli-action summary::-webkit-details-marker {
  display: none;
}

.depli-action[open] {
  flex-basis: 100%;
}

.depli-action[open] summary {
  display: none;
}

.passkey-connexion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.passkey-connexion .bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.separateur {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 0;
  color: var(--doux);
}

.separateur::before,
.separateur::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--hall);
}

.coffre-etat {
  border-left: 6px solid var(--miel);
}

.verrou {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  background: var(--pre-fonce);
  color: #f3f6f1;
}

.verrou svg {
  flex: none;
  color: var(--miel);
}

.verrou > div {
  flex: 1 1 260px;
}

.verrou .titre {
  color: #fff;
  margin: 0;
}

.verrou p {
  margin: 4px 0 0;
}

.verrou .bouton-pre {
  background: var(--miel);
  color: var(--pre-fonce);
}

.entete-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
}

.entete-section .titre {
  margin: 0;
}

.document-titre {
  display: block;
  font-weight: 700;
}

[data-titre]:not(:empty) + .document-fichier:empty {
  display: none;
}

.tableau-documents td {
  vertical-align: top;
}

.tableau-documents td:nth-child(3),
.tableau-documents td:nth-child(4) {
  white-space: nowrap;
}

.tableau-documents td:first-child {
  min-width: 14em;
}

.document-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0 18px;
  white-space: nowrap;
}

.document-actions summary {
  margin: 0;
}

.document-actions .bouton-texte {
  color: var(--pre);
  font-weight: 700;
  padding-inline: 4px;
}

.document-actions .bouton-texte:disabled {
  color: var(--doux);
  cursor: not-allowed;
}

.document-actions .depli-action[open] {
  min-width: 260px;
}

.champ-code-secours {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Le kit de secours : seul à l'écran le temps de le garder, seul à
   l'impression. */

.kit-ouvert .espace-contenu > :not(.kit),
.kit-ouvert .toast {
  display: none;
}

.kit {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
  outline: none;
}

.kit-feuille {
  background: var(--papier);
  border: 2px dashed var(--pre);
  border-radius: 20px;
  padding: clamp(20px, 4vw, 40px);
}

.kit-marque {
  margin: 0;
  color: var(--pre);
  font-weight: 700;
}

.kit-code {
  margin: 20px 0;
  padding: 18px;
  border-radius: 12px;
  background: var(--sol);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(1.05rem, 3.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  word-break: break-all;
  color: var(--encre);
}

.kit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

@media print {
  .kit-ouvert .kit-actions,
  .kit-ouvert .evitement {
    display: none;
  }

  .kit-ouvert,
  .kit-feuille {
    background: #fff;
  }

  .kit-code {
    background: #fff;
    border: 1px solid #000;
  }
}

/* Un bouton seul dans une carte garde sa largeur. */
.carte > button.bouton,
.coffre-etat > a.bouton {
  align-self: flex-start;
}

.espace-page .bouton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.acces-liste li > .actions-membre {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 20px;
  flex: 1 0 auto;
}

.actions-membre .depli-action summary {
  margin-left: 0;
}

.actions-membre .depli-action[open] {
  flex-basis: 100%;
}

.actions-membre .bouton-texte {
  color: var(--pre);
  font-weight: 700;
}

.confirmer-neutre {
  background: var(--miel-clair);
}

.message-attention {
  background: var(--miel-clair);
  color: var(--ambre);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0;
}

/* Banque */

.comptes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.compte-carte {
  height: 100%;
  gap: 6px;
}

.compte-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 6px;
}

.montant {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

td.montant,
th.montant {
  text-align: right;
}

.montant.entree {
  color: var(--pre);
  font-weight: 700;
}

.chiffre-valeur.ecart,
.etiquette-ecart {
  color: #7a2412;
}

.etiquette-ecart {
  background: #fbe3dc;
}

.iban {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.champ-large {
  flex: 2 1 18em;
}

.filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}

.tableau-operations td:first-child {
  white-space: nowrap;
}

/* Avant l'ouverture : affichées, mais déjà comptées dans le solde d'ouverture. */
.avant-ouverture td {
  color: var(--doux);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
}

.releve-periode {
  white-space: nowrap;
  font-weight: 700;
}

.tableau-releves td {
  vertical-align: top;
}

/* Comptabilité */

.sous-onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.sous-onglets a {
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--texte);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
}

.sous-onglets a:hover {
  background: var(--hall);
}

.sous-onglets a[aria-current="page"] {
  background: var(--pre);
  color: #fff;
}

.compteur {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--miel);
  color: var(--encre);
  font-size: 0.8rem;
  text-align: center;
}

.budget-total {
  font-size: 1.4rem;
  margin: 0;
}

.formulaire-ligne {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}

.poste-modifier {
  min-width: 240px;
  align-items: stretch;
}

.appels {
  list-style: none;
  margin: 0;
  padding: 0;
}

.appels li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 10px 0;
  border-top: 1px solid var(--filet);
}

.appels li .montant {
  margin-left: auto;
}

.a-rattacher {
  list-style: none;
  margin: 0;
  padding: 0;
}

.a-rattacher li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--filet);
}

.operation {
  display: flex;
  flex-direction: column;
  flex: 1 1 16em;
  min-width: 0;
}

.operation-libelle {
  overflow-wrap: anywhere;
}

.rattacher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  flex-basis: 100%;
}

.rattacher select {
  flex: 1 1 14em;
  max-width: 26em;
}

/* L'avis d'appel, à l'écran comme sur papier. */

.avis {
  max-width: 46em;
}

.avis-tete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
}

.avis-tete p {
  margin: 0 0 4px;
}

.avis-copro {
  font-size: 1.2rem;
}

.avis-destinataire {
  min-width: 14em;
}

.adresse {
  white-space: pre-line;
}

.avis-tableau tfoot th,
.avis-tableau tfoot td {
  border-top: 1px solid var(--filet);
}

.avis-total th,
.avis-total td {
  font-weight: 700;
  font-size: 1.1rem;
}

@media print {
  body:has(.avis) .ecran-seulement,
  body:has(.avis) .evitement,
  body:has(.avis) .toast {
    display: none;
  }

  body:has(.avis) {
    background: #fff;
  }

  .avis {
    box-shadow: none;
    max-width: none;
    padding: 0;
  }
}

/* L'assemblée générale. */

.appels li .etiquette {
  margin-left: auto;
}

.ag-documents {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.ag-odj {
  margin: 0;
  padding-left: 1.4em;
}

.ag-odj > li {
  padding: 12px 0;
  border-top: 1px solid var(--filet);
}

.ag-odj > li:first-child {
  border-top: 0;
}

.ag-odj p {
  margin: 0 0 6px;
}

.ag-odj-tete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px 20px;
}

.ag-texte {
  white-space: pre-line;
  color: var(--doux);
}

.ag-resultat {
  padding: 8px 12px;
  border-left: 4px solid var(--hall);
  border-radius: 4px;
  background: var(--sol);
}

.ag-adoptee {
  border-left-color: var(--pre);
}

.ag-rejetee {
  border-left-color: var(--miel);
}

.ag-votes td:not(.montant) {
  text-align: center;
}

.ag-votes input[type="radio"] {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--pre);
}

.ag-presences select,
.ag-presences input {
  min-width: 10em;
}

.ag-modeles ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.ag-document h3 {
  margin-top: 24px;
}

.ag-odj-document > li {
  border-top: 0;
  padding: 4px 0;
}

.ag-pv-resolution {
  margin-top: 20px;
  break-inside: avoid;
}

.ag-pv-resolution p {
  margin: 0 0 6px;
}

.ag-case-signature {
  min-width: 10em;
  height: 2.6em;
}

.ag-signature {
  margin-top: 32px;
  text-align: right;
}

.ag-signatures {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
  min-height: 6em;
}

@media print {
  .ag-feuille td,
  .ag-feuille th {
    border: 1px solid #000;
  }
}

/* Les annexes comptables. */

.annexes {
  max-width: 60em;
}

.annexe {
  margin-top: 28px;
  break-inside: avoid-page;
}

.annexe .tableau + .tableau {
  margin-top: 16px;
}

.annexe-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
  gap: 16px 32px;
  align-items: start;
}

/* Le jeu de composants commun : une même couleur dit toujours la même
   chose, d'un module à l'autre. */

.espace-page {
  --brique-fonce: #8e2f1f;
  --brique-clair: #fbe6e1;
  --pre-clair: #ddebdf;
  --ciel-fonce: #244a60;
}

/* Les boutons d'action tiennent au doigt : 44 px au moins. */
.espace-page .bouton-pre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.espace-page .bouton-pre:disabled {
  background: #c7d2c2;
  color: var(--texte);
  cursor: not-allowed;
}

.espace-page .bouton-cadre {
  font-weight: 800;
}

.espace-page .bouton-cadre:hover {
  background: var(--sol);
}

.bouton-doux {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--sol);
  color: var(--pre-fonce);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.bouton-doux:hover {
  background: var(--hall);
  color: var(--pre-fonce);
}

.espace-page .bouton-danger {
  border-color: var(--brique-fonce);
  color: var(--brique-fonce);
  font-weight: 800;
}

/* Statuts : prêt, à traiter, à venir, en retard, brouillon. */
.etiquette {
  font-weight: 800;
}

.etiquette-ok {
  background: var(--pre-clair);
  color: var(--pre-fonce);
}

.etiquette-attente {
  background: var(--miel-clair);
  color: #7a4e08;
}

.etiquette-avenir {
  background: var(--ciel);
  color: var(--ciel-fonce);
}

.etiquette-retard,
.etiquette-ecart {
  background: var(--brique-clair);
  color: var(--brique-fonce);
}

.etiquette-brouillon {
  background: var(--papier);
  color: var(--doux);
  border: 1px dashed #b9c7b3;
}

/* Messages : information, à vérifier, erreur, fait. */
.message-info {
  background: var(--ciel);
  color: #1e3e50;
}

.message-erreur {
  background: var(--brique-clair);
  color: #74251a;
}

.message-erreur a {
  color: inherit;
  font-weight: 800;
}

.message-attention {
  color: #5e3c06;
}

/* Montants : à droite, en chiffres tabulaires, le débit en brique. */
.montant.sortie {
  color: var(--brique-fonce);
}

.tableau tfoot th,
.tableau tfoot td {
  border-top: 2px solid var(--encre);
  border-bottom: 0;
  font-weight: 800;
}

/* Les sous-pages d'un module : des onglets segmentés sous le titre. */
.sous-onglets {
  align-self: flex-start;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--hall);
}

.sous-onglets a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--pre-fonce);
}

.sous-onglets a:hover {
  background: rgb(255 255 255 / 55%);
}

.sous-onglets a[aria-current="page"] {
  background: var(--papier);
  color: var(--pre-fonce);
  font-weight: 800;
  box-shadow: 0 1px 2px rgb(35 48 42 / 12%);
}

/* Le compteur miel signale du travail en attente, jamais une quantité. */
.compteur {
  font-weight: 800;
  line-height: 1.6;
}

/* Un écran vide dit quoi faire. */
.carte > .vide {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: none;
  padding: 20px;
  border-radius: 14px;
  background: var(--sol);
}

.vide p {
  margin: 0;
}

.vide-titre {
  font-weight: 800;
}

/* Le tableau de bord */

.bord {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.bord-principal {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bord-cote {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bord .carte {
  gap: 12px;
}

.bord .carte p {
  margin: 0;
}

.bord .bouton-texte,
.bord .bouton {
  align-self: flex-start;
}

.taches {
  list-style: none;
  margin: 0;
  padding: 0;
}

.taches li + li {
  border-top: 1px solid var(--filet);
}

.tache {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 12px 8px;
  margin-inline: -8px;
  border-radius: 12px;
  color: var(--encre);
  text-decoration: none;
}

.tache:hover {
  background: var(--sol);
  color: var(--encre);
}

.tache-puce {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--miel);
}

.tache-retard .tache-puce {
  background: var(--brique-fonce);
}

.tache-pret .tache-puce {
  background: var(--pre);
}

.tache-corps {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tache-titre {
  font-weight: 700;
  line-height: 1.3;
}

.tache-detail {
  font-size: 0.93rem;
  color: var(--doux);
}

.tache .etiquette {
  align-self: center;
}

.chiffre-cle {
  font-size: 2.1rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ligne-chiffre {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--filet);
}

.ligne-chiffre .montant {
  font-weight: 800;
}

.mesure {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mesure-tete {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.93rem;
}

.mesure-tete span:last-child {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.echeances {
  list-style: none;
  margin: 0;
  padding: 0;
}

.echeances li {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
}

.echeances li + li {
  border-top: 1px solid var(--filet);
}

.echeances li > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.echeance-date {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 54px;
  padding: 4px 0;
  border-radius: 10px;
  background: var(--ciel);
  color: var(--ciel-fonce);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.15;
}

.echeance-jour {
  font-size: 1.15rem;
}

.echeance-titre {
  font-weight: 700;
}

.structure {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.structure > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
}

.structure > div + div {
  border-top: 1px solid var(--filet);
}

.structure dt {
  font-weight: 700;
}

.structure dd {
  flex: 1;
  margin: 0;
  text-align: right;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.structure dd .discret {
  display: block;
  font-weight: 400;
}

/* Rattacher : la proposition d'Alpage se lit avant le choix. */
.a-rattacher .rattacher {
  flex-wrap: wrap;
}

.a-rattacher .rattacher .etiquette {
  order: -1;
  flex-basis: 100%;
  align-self: flex-start;
  flex-grow: 0;
  max-width: max-content;
}

/* La séance : un vote se choisit d'un geste, et le résultat se lit d'un
   regard. */
.segments {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 12px;
  background: var(--sol);
}

.segment {
  position: relative;
  display: inline-flex;
}

.segment input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segment span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--texte);
  font-size: 0.93rem;
  font-weight: 700;
}

.segment input:checked + span {
  background: var(--pre);
  color: #fff;
}

.segment-contre input:checked + span {
  background: var(--brique-fonce);
}

.segment-abstention input:checked + span {
  background: var(--doux);
}

.segment input:focus-visible + span {
  outline: 3px solid var(--miel);
  outline-offset: 1px;
}

.ag-votes td:not(.montant) {
  text-align: left;
}

.ag-resultat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
}

.ag-resultat p {
  margin: 0;
}

.ag-resultat .etiquette {
  margin-right: 6px;
}

.ag-barre {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--hall);
}

.ag-barre-pour {
  fill: var(--pre);
}

.ag-barre-contre {
  fill: var(--brique-fonce);
}

.ag-barre-abstention {
  fill: #9aa89f;
}

.ag-decompte {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Sur téléphone, le menu devient un tiroir derrière la barre du haut. */
@media (max-width: 900px) {
  .coque {
    display: block;
  }

  .barre-mobile {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--pre-fonce);
    color: #fff;
  }

  .barre-mobile-nom {
    flex: 1;
    min-width: 0;
  }

  .barre-mobile-nom p {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .barre-mobile-nom .titre {
    font-size: 1.2rem;
    line-height: 1.2;
    color: #fff;
  }

  .barre-mobile-nom p + p {
    font-size: 0.85rem;
    color: #c9dacd;
  }

  .bouton-menu {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--pre);
    color: #fff;
    cursor: pointer;
  }

  .bouton-menu:focus-visible {
    outline: 3px solid var(--miel-bandeau);
  }

  .compteur-barre {
    flex: none;
    min-width: 28px;
    color: var(--encre);
    text-decoration: none;
  }

  /* Sans script, le menu reste déplié en tête de page. */
  .menu-lateral {
    position: static;
    height: auto;
  }

  .menu-repliable .menu-lateral {
    display: none;
  }

  .menu-repliable.menu-ouvert .menu-lateral {
    position: fixed;
    inset: 64px 0 0;
    z-index: 19;
    display: flex;
    height: auto;
    width: min(320px, 86vw);
    box-shadow: 0 0 0 100vmax rgb(35 48 42 / 45%);
  }

  .espace-contenu {
    padding-top: 24px;
  }

  .tache .etiquette {
    display: none;
  }

  .segment span {
    padding: 0 9px;
  }
}

@media print {
  .menu-lateral,
  .barre-mobile {
    display: none !important;
  }

  .coque {
    display: block;
  }
}

/* Les travaux votés */

.travaux-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.travaux-liste > li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 0;
  border-top: 1px solid var(--filet);
}

.travaux-liste > li:first-child {
  border-top: 0;
  padding-top: 4px;
}

.travaux-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
}

.travaux-titre {
  font-weight: 700;
  font-size: 1.08rem;
}

.travaux-appels {
  list-style: none;
  margin: 0;
  padding: 0;
}

.travaux-appels > li {
  padding: 12px 0;
  border-top: 1px solid var(--filet);
}

.travaux-appels > li:first-child {
  border-top: 0;
}

.travaux-appel-tete {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px 16px;
}

.travaux-appel-tete .etiquette {
  align-self: center;
}

.travaux-appel-nom {
  font-weight: 700;
}

.travaux-appels .depli {
  margin-top: 8px;
}

.travaux-appels .depli form {
  margin-top: 10px;
}

.travaux-reserves {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 4px solid var(--miel, #e9a23b);
  background: var(--pre-clair, #eef5ef);
  border-radius: 0 10px 10px 0;
  white-space: pre-line;
}

.echeancier-lignes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 560px) {
  .travaux-appel-tete {
    grid-template-columns: auto 1fr;
  }
}

/* --- La console de l'opérateur et le formulaire de contact --- */

.pot-de-miel {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact textarea {
  resize: vertical;
}

.semaines td:last-child {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.semaine-barre {
  display: inline-block;
  width: calc(100% - 2.5rem);
  height: .6rem;
  fill: var(--pre);
}

.semaine-nombre {
  font-variant-numeric: tabular-nums;
}

/* --- L'avis ouvert depuis un courriel, sans compte --- */

.avis-public {
  max-width: 52rem;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

.avis-public .entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}

/* --- Le formulaire de vote par correspondance --- */

.ag-formulaire th[scope="row"] span {
  display: block;
}

.ag-case-tete,
.ag-case {
  width: 6rem;
  text-align: center;
}

.ag-case-vide {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border: 1.5px solid var(--encre);
  border-radius: 3px;
}

.ag-ligne-vide {
  display: inline-block;
  min-width: 14rem;
  border-bottom: 1px solid var(--encre);
  height: 1.1em;
  vertical-align: bottom;
}

.ag-ligne-courte {
  min-width: 7rem;
}

.ag-signature-bloc {
  margin-top: 2rem;
  min-height: 6rem;
}

.ag-correspondance-reponse {
  font-weight: 600;
}

.ag-correspondance-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--filet);
}

.ag-correspondance-ligne p {
  margin: 0;
}

/* Les échanges : la liste des discussions, puis le fil d'une discussion,
   ses messages et ses sondages. */

.fils {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fil {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--filet);
}

.fil a {
  color: var(--encre);
  font-weight: 600;
}

.fil-nouveau a {
  color: var(--pre);
}

.fil-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.echanges-fil {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.echange {
  max-width: 46em;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--papier);
  box-shadow: var(--ombre);
}

.echange-moi {
  margin-left: auto;
  background: var(--pre-clair);
  box-shadow: none;
}

.echange-alpage {
  background: var(--miel-clair);
  box-shadow: none;
}

.echange-auteur {
  margin: 0 0 4px;
  font-size: 0.875rem;
  color: var(--doux);
}

.echange-texte {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.sondage {
  border-left: 4px solid var(--pre);
}

.sondage-question {
  margin: 4px 0;
}

.sondage-choix fieldset {
  margin: 12px 0;
  padding: 0;
  border: 0;
}

.sondage-resultats {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.sondage-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 6px;
  padding: 0 12px;
  border: 1px solid var(--filet);
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
}

label.sondage-option {
  cursor: pointer;
}

.espace-page .sondage-option input[type="radio"] {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  padding: 0;
  accent-color: var(--pre);
}

.sondage-option > span:first-of-type {
  flex: 1;
}

.sondage-option:has(input:checked),
.sondage-decision {
  border-color: var(--pre);
}

.sondage-voix {
  font-size: 0.875rem;
  color: var(--doux);
  font-variant-numeric: tabular-nums;
}

/* La part des membres qui ont choisi cette réponse, en fond. */
.sondage-barre {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  appearance: none;
  background: transparent;
  z-index: -1;
}

.sondage-barre::-webkit-progress-bar {
  background: transparent;
}

.sondage-barre::-webkit-progress-value {
  background: var(--hall);
}

.sondage-barre::-moz-progress-bar {
  background: var(--hall);
}

.sondage-public {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.sondage-public legend {
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--encre);
}

.sondage-public .choix {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
}

.espace-page .sondage-public input[type="radio"] {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  accent-color: var(--pre);
}

.consultation {
  margin-top: 12px;
}

.consultation-envoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 12px 0;
}

.consultation-saisie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.consultation-public {
  max-width: 40em;
}

.espace-page .consultation-saisie select {
  width: auto;
  min-width: 0;
  max-width: 14em;
}

/* --- Les garanties des travaux ---------------------------------------------- */

.garanties th[scope="row"] {
  white-space: nowrap;
}

.garanties td:last-child {
  white-space: nowrap;
}

.garanties tr.discret th,
.garanties tr.discret td {
  color: var(--doux);
  font-weight: 400;
}

.garanties-assurances {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 12px 0 0;
}

.garanties-assurances dt {
  color: var(--doux);
}

.garanties-assurances dd {
  margin: 0;
}

.desordres {
  list-style: none;
  margin: 0;
  padding: 0;
}

.desordre {
  padding: 14px 0;
  border-top: 1px solid var(--filet);
}

.desordre-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  color: var(--doux);
}

.desordre-texte {
  margin: 6px 0 0;
  white-space: pre-line;
}

.desordre-suivi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 10px;
}

@media (max-width: 640px) {
  .garanties-assurances {
    grid-template-columns: 1fr;
  }

  .garanties-assurances dd {
    margin-bottom: 8px;
  }
}

/* --- Le carnet d'entretien et la fiche synthétique ------------------------- */

.fiche-liste {
  display: grid;
  grid-template-columns: minmax(0, 18rem) 1fr;
  gap: 6px 20px;
  margin: 8px 0 20px;
}

.fiche-liste dt {
  color: var(--doux);
}

.fiche-liste dd {
  margin: 0;
}

.fiche-apercu h2 {
  font-size: 1.1rem;
}

.carnet-batiment {
  display: block;
  font-weight: 400;
}

.carnet-actions {
  min-width: 11rem;
}

.carnet-actions .depli {
  margin-top: 4px;
}

.carnet-actions .formulaire {
  min-width: 18rem;
}

@media (max-width: 640px) {
  .fiche-liste {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .fiche-liste dd {
    margin-bottom: 10px;
  }
}

/* Le dossier d'un impayé. */

.impaye-lettre {
  border-top: 1px solid var(--filet);
  margin-top: 16px;
  padding-top: 16px;
}

.impaye-lettre h3 {
  margin: 0 0 8px;
}

.impaye-signature {
  margin-top: 32px;
}