/* Les composants dessinés par le moteur d'affichage : boutons, champs, listes, cartes, colonnes,
   indicateurs, fenêtres. Des classes seulement : aucun style en ligne (la CSP le refuse).

   Les cibles font 44 px au moins (2,75rem) : un doigt les touche sans viser (conception § 12.2). */

/* --- Boutons ---------------------------------------------------------------------------------- */
.bouton, button.bouton, a.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; min-width: 2.75rem; padding: .45rem 1rem;
  font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  border-radius: .5rem; border: 1px solid var(--bordure-forte);
  background: var(--surface); color: var(--texte);
}
.bouton:hover { background: var(--surface-2); }
.bouton.principal { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.bouton.principal:hover { filter: brightness(1.08); }
.bouton.danger { color: var(--danger); border-color: var(--danger); }
.bouton.discret { border-color: transparent; background: transparent; color: var(--accent); }
.bouton.discret:hover { background: var(--surface-2); }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
/* Le champ fichier est caché à l'œil : son étiquette, un bouton, montre le focus. */
label.bouton.focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* --- Champs ----------------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="color"], select, textarea {
  font: inherit; color: var(--texte); background: var(--surface);
  border: 1px solid var(--bordure-forte); border-radius: .5rem;
  min-height: 2.75rem; padding: .45rem .7rem; width: 100%; max-width: 100%;
}
input[type="color"] { padding: .2rem; width: 4.5rem; }
textarea { min-height: 7rem; resize: vertical; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger);
}
input[readonly] { background: var(--surface-2); }
label, legend { font-weight: 600; }
.champ { margin: 0 0 1rem; min-width: 0; }
.champ > label, .champ > .etiquette { display: block; margin-bottom: .3rem; }
fieldset.champ { border: 0; padding: 0; }
fieldset.champ > legend { padding: 0; margin-bottom: .3rem; }
.aide { color: var(--discret); font-size: .9rem; margin: 0 0 .35rem; font-weight: 400; }
.erreur { color: var(--danger); font-size: .95rem; margin: .3rem 0 0; font-weight: 600; }
.obligatoire { color: var(--danger); margin-left: .15rem; }
.case {
  display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; font-weight: 400; cursor: pointer;
}
.case input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--accent); }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 1rem; }
.grille-adresse { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .5rem; }
.grille-adresse .large { grid-column: 1 / -1; }
.grille-adresse label { font-weight: 400; font-size: .9rem; display: block; }
.ligne-saisie { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ligne-saisie > input { flex: 1 1 8rem; min-width: 0; }
.ligne-saisie > select { flex: 1 1 10rem; min-width: 0; }
.unite { color: var(--discret); white-space: nowrap; }

/* Le formulaire : une grille sur grand écran, une colonne sur le téléphone, la barre d'actions
   fixée en bas (le pouce l'atteint sans remonter). */
.formulaire fieldset.section {
  border: 1px solid var(--bordure); border-radius: .75rem; padding: 1rem 1.25rem .25rem;
  margin: 0 0 1.25rem; background: var(--surface); min-width: 0;
}
.formulaire fieldset.section > legend { font-size: 1.1rem; padding: 0 .4rem; }
.formulaire .grille-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 1.25rem; }
.formulaire .grille-champs .large { grid-column: 1 / -1; }
.barre-actions {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .75rem 0; background: var(--fond); border-top: 1px solid var(--bordure);
}
.resume-erreurs {
  border: 2px solid var(--danger); background: var(--danger-fond); color: var(--texte);
  border-radius: .75rem; padding: .75rem 1rem; margin-bottom: 1rem;
}
.resume-erreurs h2 { color: var(--danger); font-size: 1.05rem; }
.resume-erreurs ul { margin: 0; padding-left: 1.25rem; }
.resume-erreurs a { color: var(--danger); display: inline-flex; min-height: 2.75rem; align-items: center; }

/* --- En-têtes de page ------------------------------------------------------------------------- */
.entete-page { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-start; margin-bottom: 1rem; }
.entete-page .titres { flex: 1 1 18rem; min-width: 0; }
.entete-page .aide { margin: 0; }
.retour { display: inline-flex; align-items: center; min-height: 2.75rem; margin-bottom: .25rem; }
.compte-resultats { color: var(--discret); margin: .5rem 0; }
.vide { color: var(--discret); font-style: italic; }
.non-renseigne { color: var(--discret); }

/* --- Cartes et sections ----------------------------------------------------------------------- */
.carte {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: .75rem;
  padding: 1rem 1.25rem; box-shadow: var(--ombre); margin-bottom: 1rem; min-width: 0;
}
.carte > h2:first-child { margin-top: 0; }
.grille-sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; }
dl.valeurs { margin: 0; display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: .5rem 1rem; }
dl.valeurs dt { color: var(--discret); font-weight: 600; }
dl.valeurs dd { margin: 0; min-width: 0; white-space: pre-line; }
@media (max-width: 40rem) {
  dl.valeurs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  dl.valeurs dd { margin-bottom: .6rem; }
}

/* Les pastilles des options (couleurs d'une liste fermée, jetons du thème). */
.pastille {
  display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
  background: var(--c-gris-fond); color: var(--c-gris-texte); white-space: nowrap;
}
.pastille.c-bleu { background: var(--c-bleu-fond); color: var(--c-bleu-texte); }
.pastille.c-vert { background: var(--c-vert-fond); color: var(--c-vert-texte); }
.pastille.c-jaune { background: var(--c-jaune-fond); color: var(--c-jaune-texte); }
.pastille.c-orange { background: var(--c-orange-fond); color: var(--c-orange-texte); }
.pastille.c-rouge { background: var(--c-rouge-fond); color: var(--c-rouge-texte); }
.pastille.c-violet { background: var(--c-violet-fond); color: var(--c-violet-texte); }
.pastille.c-rose { background: var(--c-rose-fond); color: var(--c-rose-texte); }
.pastille.c-turquoise { background: var(--c-turquoise-fond); color: var(--c-turquoise-texte); }
.pastilles { display: inline-flex; flex-wrap: wrap; gap: .25rem; }

/* --- Listes : un tableau sur grand écran, des cartes sur le téléphone ------------------------- */
.filtres {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: .75rem;
  padding: .75rem 1rem; margin-bottom: 1rem;
}
.filtres .champ { margin: 0; flex: 1 1 12rem; max-width: 18rem; }
.tri-mobile { display: none; }
.cadre-tableau { overflow-x: auto; border: 1px solid var(--bordure); border-radius: .75rem; background: var(--surface); }
table.tableau { width: 100%; border-collapse: collapse; }
.tableau th, .tableau td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.tableau thead th { font-size: .9rem; color: var(--discret); background: var(--surface-2); white-space: nowrap; vertical-align: middle; }
.tableau a[href^="tel:"], .tableau time { white-space: nowrap; }
.tableau tbody tr:last-child > * { border-bottom: 0; }
.tableau tbody tr:hover { background: var(--surface-2); }
.tableau .tri {
  font: inherit; font-weight: 700; color: inherit; background: none; border: 0; padding: 0 .25rem;
  min-height: 2.75rem; display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
}
.tableau .titre a { font-weight: 650; }
.pagination { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }
.pagination .page { color: var(--discret); }

@media (max-width: 40rem) {
  .tri-mobile { display: flex; gap: .5rem; align-items: flex-end; margin-bottom: .75rem; }
  .tri-mobile .champ { flex: 1; margin: 0; }
  .filtres .champ { max-width: none; flex-basis: 100%; }
  .cadre-tableau { border: 0; background: none; overflow: visible; }
  table.tableau, .tableau tbody, .tableau tr, .tableau td, .tableau th { display: block; }
  .tableau thead { display: none; }
  .tableau tr {
    background: var(--surface); border: 1px solid var(--bordure); border-radius: .75rem;
    padding: .5rem .9rem; margin-bottom: .75rem; box-shadow: var(--ombre);
  }
  .tableau tbody tr:hover { background: var(--surface); }
  .tableau td, .tableau th { border: 0; padding: .2rem 0; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .5rem; }
  .tableau td::before, .tableau th::before { content: attr(data-libelle); color: var(--discret); font-size: .9rem; font-weight: 600; }
  .tableau .titre { grid-template-columns: minmax(0, 1fr); font-size: 1.05rem; }
  .tableau .titre::before { content: none; }
  .tableau a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  /* Au doigt, chaque lien du contenu est une cible de 44 px, même un nom court ou un numéro. */
  #contenu a:not(.bouton) { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; }
}

/* --- La vue en colonnes ----------------------------------------------------------------------- */
.onglets-colonnes { display: none; }
.tableau-colonnes {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12.5rem, 1fr); gap: .75rem;
  overflow-x: auto; padding-bottom: .5rem; align-items: start;
}
.colonne {
  background: var(--surface-2); border-radius: .75rem; padding: .75rem; min-width: 0;
  border: 2px solid transparent;
}
.colonne.survol { border-color: var(--accent); }
.colonne > h2 { font-size: 1rem; display: flex; justify-content: space-between; gap: .5rem; align-items: center; }
.colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.carte-colonne {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: .6rem; padding: .6rem .75rem;
  box-shadow: var(--ombre);
}
.carte-colonne[draggable="true"] { cursor: grab; }
.carte-colonne.deplacee { opacity: .5; }
.carte-colonne a.titre { font-weight: 650; display: inline-flex; min-height: 2.75rem; align-items: center; }
.carte-colonne dl { margin: 0 0 .4rem; font-size: .92rem; }
.carte-colonne dt { color: var(--discret); font-size: .8rem; font-weight: 600; }
.carte-colonne dd { margin: 0 0 .25rem; }
.plus-de-cartes { display: inline-flex; min-height: 2.75rem; align-items: center; }
@media (max-width: 40rem) {
  .onglets-colonnes { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
  .onglets-colonnes [aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
  .tableau-colonnes { display: block; overflow: visible; }
  .tableau-colonnes .colonne { display: none; }
  .tableau-colonnes .colonne.choisie { display: block; }
}

/* --- Le tableau de bord ----------------------------------------------------------------------- */
.indicateurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.indicateur { margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.indicateur h2 { font-size: 1rem; color: var(--discret); }
.indicateur .valeur { font-size: 2rem; font-weight: 750; line-height: 1.1; color: var(--texte); }
.indicateur > a.bouton { align-self: flex-start; margin-top: auto; }
.indicateur.large { grid-column: 1 / -1; }
.repartition { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.repartition li { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr) 2.5rem; gap: .5rem; align-items: center; }
.repartition .barre { height: .75rem; border-radius: .4rem; background: var(--surface-2); overflow: hidden; }
.repartition .barre > span { display: block; height: 100%; width: calc(var(--part, 0) * 100%); background: var(--accent); }
.repartition .nombre { text-align: right; font-weight: 650; }

/* --- Messages --------------------------------------------------------------------------------- */
.messages { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; display: grid; gap: .5rem; max-width: min(26rem, calc(100vw - 2rem)); }
.message {
  padding: .75rem 1rem; border-radius: .6rem; box-shadow: var(--ombre); border: 1px solid var(--bordure);
  background: var(--surface); color: var(--texte); display: flex; gap: .75rem; align-items: center;
}
.message p { margin: 0; flex: 1; }
.message.succes { background: var(--succes-fond); color: var(--succes); border-color: var(--succes); }
.message.erreur-message { background: var(--danger-fond); color: var(--danger); border-color: var(--danger); }
.encart { border-radius: .75rem; padding: .75rem 1rem; margin-bottom: 1rem; border: 1px solid var(--bordure); }
.encart.info { background: var(--info-fond); color: var(--texte); }
.encart.alerte { background: var(--alerte-fond); color: var(--texte); border-color: var(--alerte); }
.encart.danger { background: var(--danger-fond); color: var(--texte); border-color: var(--danger); }
.encart.succes { background: var(--succes-fond); color: var(--texte); border-color: var(--succes); }
.encart > :last-child { margin-bottom: 0; }

/* --- Fenêtres (dialog natif : le navigateur tient le focus) ------------------------------------- */
dialog.fenetre {
  border: 1px solid var(--bordure); border-radius: .9rem; padding: 1.25rem; width: min(32rem, calc(100vw - 2rem));
  background: var(--surface); color: var(--texte); box-shadow: 0 10px 40px rgb(0 0 0 / 35%);
}
dialog.fenetre::backdrop { background: rgb(0 0 0 / 45%); }
dialog.fenetre h2 { margin-top: 0; }
.choix-fiches { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .25rem; max-height: 50vh; overflow: auto; }
.choix-fiches button { width: 100%; justify-content: flex-start; text-align: left; font-weight: 500; }

/* --- Divers ----------------------------------------------------------------------------------- */
details.repli { border: 1px solid var(--bordure); border-radius: .75rem; background: var(--surface); margin-bottom: 1rem; }
details.repli > summary {
  cursor: pointer; padding: .5rem 1.25rem; min-height: 2.75rem; display: flex; align-items: center;
  font-weight: 650; list-style-position: inside;
}
details.repli > .contenu-repli { padding: 0 1.25rem 1rem; }
.historique { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.historique li { border-left: 3px solid var(--bordure); padding-left: .75rem; }
.historique .quand { color: var(--discret); font-size: .9rem; }
.pieces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .75rem; }
.pieces li { display: grid; gap: .25rem; align-content: start; }
.pieces img { border-radius: .5rem; border: 1px solid var(--bordure); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--surface-2); }
.codes-secours { columns: 2; font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; padding-left: 1.25rem; }
.secret-totp { font-family: ui-monospace, Consolas, monospace; font-size: 1.1rem; letter-spacing: .05em; word-spacing: .3em; }
.qr { width: 13rem; height: 13rem; background: #ffffff; padding: .5rem; border-radius: .5rem; display: block; }
.qr rect { fill: #000000; }
.lien-a-remettre { display: grid; gap: .5rem; }
.lien-a-remettre input { font-family: ui-monospace, Consolas, monospace; }
.choisies { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .25rem; }
.choisies li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.choisies li > span { flex: 1 1 10rem; }
.tableau-simple { width: 100%; border-collapse: collapse; }
.tableau-simple th, .tableau-simple td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--bordure); vertical-align: top; }

/* L'agenda (module « agenda », conception § 20) : un jour par colonne sur un écran large, les jours
   les uns sous les autres au téléphone. La couleur d'un rendez-vous est celle de son motif (liste
   fermée, jetons du thème) : un liseré, et la pastille du motif pour qui ne distingue pas les couleurs. */
.barre-agenda { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1rem; }
.barre-agenda .periode { display: flex; flex-wrap: wrap; gap: .5rem; }
.barre-agenda .filtre-membre { margin: 0; min-width: 0; flex: 1 1 14rem; max-width: 22rem; }
.agenda { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 72rem) {
  .agenda.jours-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .agenda.jours-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.agenda .jour { background: var(--surface); border: 1px solid var(--bordure); border-radius: .5rem; padding: .5rem; min-width: 0; }
.agenda .jour.aujourdhui { border-color: var(--accent); border-width: 2px; }
.agenda .jour h2 { font-size: .95rem; margin: 0 0 .5rem; }
.agenda .jour h2::first-letter { text-transform: uppercase; }
.rdvs { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.rdv { border-left: .3rem solid var(--bordure-forte); background: var(--surface-2); border-radius: .3rem; padding: .25rem .4rem;
  overflow-wrap: anywhere; display: grid; gap: .2rem; }
.rdv > a { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left;
  min-height: 2.75rem; color: var(--texte); text-decoration: none; }
.rdv > a:hover .objet, .rdv > a:focus-visible .objet { text-decoration: underline; }
.rdv .heure { font-variant-numeric: tabular-nums; font-weight: 650; font-size: .9rem; }
.rdv .details { display: flex; flex-wrap: wrap; gap: .1rem .6rem; font-size: .85rem; color: var(--discret); }
.rdv .pastille { justify-self: start; }
.rdv.c-gris { border-left-color: var(--c-gris-texte); }
.rdv.c-bleu { border-left-color: var(--c-bleu-texte); }
.rdv.c-vert { border-left-color: var(--c-vert-texte); }
.rdv.c-jaune { border-left-color: var(--c-jaune-texte); }
.rdv.c-orange { border-left-color: var(--c-orange-texte); }
.rdv.c-rouge { border-left-color: var(--c-rouge-texte); }
.rdv.c-violet { border-left-color: var(--c-violet-texte); }
.rdv.c-rose { border-left-color: var(--c-rose-texte); }
.rdv.c-turquoise { border-left-color: var(--c-turquoise-texte); }
.repartition .mois { font-variant-numeric: tabular-nums; }
/* L'évolution par mois : la colonne des nombres prend la place d'un montant, sans couper « 1 234,00 € ». */
.repartition.evolution li { grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr) auto; }
.repartition .nombre { white-space: nowrap; }

/* --- La facturation (lot 2) : les lignes d'un devis ou d'une facture, la copie émise ------------------- */
.champ-lignes { grid-column: 1 / -1; }
.cadre-lignes { overflow-x: auto; }
.tableau-simple .nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lignes-saisie { display: grid; gap: .75rem; margin-bottom: .75rem; }
.ligne-facture { border: 1px solid var(--bordure); border-radius: .5rem; padding: .5rem .75rem .25rem; margin: 0; min-width: 0; }
.ligne-facture > legend { font-weight: 650; padding: 0 .3rem; }
.grille-ligne { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0 .75rem; }
.pied-ligne { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; justify-content: flex-end; margin-bottom: .25rem; }
.total-ligne, .total-general { font-weight: 650; font-variant-numeric: tabular-nums; }
.depuis-catalogue { flex: 1 1 18rem; margin: 0; }
.copie-emise .entete-copie { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
.copie-emise .parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem 1.5rem; margin: .75rem 0; }
.copie-emise .parties p { margin: 0; white-space: pre-line; }
.totaux { margin: .75rem 0 0 auto; max-width: 24rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; }
.totaux dt { color: var(--discret); }
.totaux dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.totaux .fort { font-weight: 750; color: var(--texte); }
.mentions-manquantes li { margin-bottom: .25rem; }
@media (max-width: 40rem) {
  .tableau-simple.lignes thead { display: none; }
  .tableau-simple.lignes, .tableau-simple.lignes tbody, .tableau-simple.lignes tr, .tableau-simple.lignes td { display: block; width: 100%; }
  .tableau-simple.lignes tr { border-bottom: 1px solid var(--bordure); padding: .4rem 0; }
  .tableau-simple.lignes td { border: 0; padding: .1rem 0; text-align: left; white-space: normal; }
  .tableau-simple.lignes td:not(:first-child)::before { content: attr(data-libelle) " : "; color: var(--discret); }
  .tableau-simple.lignes td:first-child { font-weight: 650; }
  .totaux { max-width: none; }
}