/* Design system de hopy, d'après Hola Hope (Penpot « design system for hope »)
   et la charte de techforhope.com : bleu nuit pour le texte, crème en fond,
   corail en accent, ciel et ambre en appui. Voir DESIGN.md. */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("/ui/source-sans-3.woff2") format("woff2-variations");
}

:root {
  /* Charte Tech for Hope */
  --nuit: #0b1b77;
  /* Texte sur corail : le bleu nuit seul n'y fait que 4,47:1. */
  --nuit-profond: #08124f;
  --corail: #fb524f;
  --corail-clair: #ff6c69;
  --corail-encre: #c42f2c;
  --corail-pale: #ffa19f;
  --creme: #fff8eb;
  --ciel: #d4e9ff;
  --ciel-doux: #e6f1ff;
  --ciel-filet: #b7d6f7;
  --ambre: #fea82f;
  --ambre-doux: #fff0d2;
  --peche: #ffebe6;
  --peche-filet: #f9c1b9;

  /* Rôles */
  --fond: var(--creme);
  --surface: #fffdf7;
  --blanc: #fff;
  --doux: #fbf1df;
  --filet: #ecdcbd;
  --encre: var(--nuit);
  --titre: var(--nuit);
  --discret: #5a6390;
  --erreur: var(--corail-encre);
  --erreur-fond: var(--peche);
  --focus: var(--nuit);

  /* Boutons : rayon 6, ombre franche sans flou (Hola Hope, techforhope.com) */
  --rayon: 6px;
  --rayon-champ: 10px;
  --rayon-carte: 16px;
  --rayon-vedette: 24px;
  --ombre-bouton: -5px 5px 0 var(--nuit);
  --ombre-appuyee: -1px 1px 0 var(--nuit);

  --police: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
  --mesure: 44rem;
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
  accent-color: var(--corail);
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

/* Le bandeau reste en haut : une cible d'ancre ou un champ focalisé ne passe pas dessous. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: 1.125rem;
  line-height: 1.55;
  caret-color: var(--corail);
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ciel); color: var(--nuit); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 {
  color: var(--titre);
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); font-weight: 900; letter-spacing: -0.015em; }
h2 { font-size: 1.5rem; font-weight: 900; }
h3 { font-size: 1.125rem; font-weight: 700; }
p, .aide { margin: 0; max-width: 65ch; text-wrap: pretty; }
strong { font-weight: 700; }

a { color: var(--nuit); text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: var(--corail); }
a:hover { text-decoration-thickness: 2px; }

.montant, .chiffres { font-variant-numeric: tabular-nums; }

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

.aller-au-contenu {
  position: absolute;
  left: 1rem; top: -4rem;
  background: var(--nuit);
  color: var(--creme);
  padding: 0.5rem 1rem;
  border-radius: var(--rayon);
  z-index: 10;
}
.aller-au-contenu:focus { top: 1rem; }
/* Le focus posé par script sur un titre d'étape ne dessine pas de cadre. */
[tabindex="-1"]:focus { outline: none; }

/* ---- Bandeau ---- */

.bandeau {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--creme) 90%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--filet);
}
/* Le bandeau est plus large que la colonne de lecture : logo, onglets et compte tiennent sur une ligne. */
.bandeau-interieur {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.marque { display: flex; align-items: center; gap: 0.875rem; text-decoration: none; color: var(--titre); }
.marque img { height: 2.25rem; width: auto; display: block; }
/* Le nom du produit, en étiquette corail penchée comme sur les supports Tech for Hope. */
.marque-produit {
  display: inline-block;
  background: var(--corail);
  color: var(--nuit-profond);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.3;
  padding: 0 0.625rem;
  transform: rotate(-3deg);
}
/* Les onglets des rubriques : le soulignement corail marque la page ouverte. */
.rubriques { display: flex; gap: 0.25rem; }
.rubriques a {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  color: var(--discret);
  border-bottom: 3px solid transparent;
}
.rubriques a:hover { color: var(--nuit); border-bottom-color: var(--filet); }
.rubriques a[aria-current="page"] { color: var(--nuit); border-bottom-color: var(--corail); }
.compte { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; font-size: 1rem; white-space: nowrap; }
.compte-email { color: var(--discret); overflow: hidden; text-overflow: ellipsis; }
/* Pas la place pour l'email : on le cache plutôt que de couper les onglets. */
@media (max-width: 60rem) { .compte-email { display: none; } }
/* Écran étroit : les onglets passent sur une deuxième ligne. */
@media (max-width: 40rem) {
  .bandeau-interieur { flex-wrap: wrap; row-gap: 0.25rem; }
  .rubriques { order: 3; width: 100%; margin-left: -0.625rem; }
  .marque img { height: 1.9rem; }
}

/* Les icônes des rubriques ne servent que dans le menu latéral. */
.rubriques .icone { display: none; }

/* ---- Menu latéral (écran large, personne connectée) ---- */
/* Sur un grand écran, la place manque en hauteur, pas en largeur : le bandeau devient une colonne
   fixe à gauche, avec la marque, les rubriques, le compte et le pied de page. Le contenu prend le reste. */
@media (min-width: 64rem) {
  .avec-menu { --menu: 15rem; padding-left: var(--menu); }
  html:has(.avec-menu) { scroll-padding-top: 1.5rem; }
  .avec-menu .bandeau {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--menu);
    border-bottom: 0;
    border-right: 1px solid var(--filet);
    backdrop-filter: none;
    background: var(--creme);
    overflow-y: auto;
  }
  .avec-menu .bandeau-interieur {
    max-width: none;
    min-height: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
    padding: 1.5rem 1rem 5.5rem;
  }
  .avec-menu .marque { padding-inline: 0.5rem; }
  .avec-menu .rubriques { flex-direction: column; gap: 0.25rem; }
  .avec-menu .rubriques a {
    gap: 0.75rem;
    padding: 0 0.75rem;
    border-bottom: 0;
    border-radius: var(--rayon);
    font-size: 1.125rem;
  }
  .avec-menu .rubriques .icone { display: block; flex: none; }
  .avec-menu .rubriques a:hover { background: var(--surface); }
  /* La rubrique ouverte : posée sur la surface, son icône en corail. */
  .avec-menu .rubriques a[aria-current="page"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--filet); }
  .avec-menu .rubriques a[aria-current="page"] .icone { color: var(--corail-encre); }
  .avec-menu .compte {
    margin: auto 0 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 1rem 0.75rem 0;
    border-top: 1px solid var(--filet);
    white-space: normal;
  }
  .avec-menu .compte-email { display: block; max-width: 100%; font-size: 0.9375rem; white-space: nowrap; }
  .avec-menu .compte .lien-bouton { min-height: 2.75rem; }
  .avec-menu .pied {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 6;
    width: var(--menu);
    max-width: none;
    margin: 0;
    padding: 1rem 1.75rem 1.25rem;
    border-top: 0;
    text-align: left;
  }
  /* Le contenu occupe toute la largeur, avec une marge qui grandit avec l'écran. */
  .avec-menu main, .avec-menu.page-large main {
    max-width: none;
    margin: 0;
    padding: 2.5rem clamp(1.5rem, 3vw, 3.5rem) 4rem;
  }
  /* Un formulaire garde la largeur d'une colonne de lecture : un champ trop long se lit mal. */
  .avec-menu main > form:not(.formulaire-grille, .filtres) { max-width: var(--mesure); }
  /* Les activités d'une mission se rangent côte à côte. */
  .avec-menu .activites { grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); align-items: start; }
}
/* Mes notes de frais, sur un très grand écran : le total et le bouton à gauche, la liste à droite. */
@media (min-width: 80rem) {
  .avec-menu main:has(> .note-du-mois) { grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr); align-items: start; column-gap: 3rem; }
  .avec-menu main:has(> .note-du-mois) > :not(.note-du-mois) { grid-column: 2; }
  .avec-menu main:has(> .note-du-mois) > .entete { grid-column: 1 / -1; }
  .avec-menu main > .note-du-mois { grid-column: 1; grid-row: 2 / span 3; position: sticky; top: 2.5rem; }
}

/* ---- Contenu ---- */

main {
  max-width: var(--mesure);
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
.entete { display: grid; gap: 0.625rem; }
/* Une page large (la grille des temps) : le contenu prend la largeur de l'écran. */
/* Le bandeau s'élargit avec lui, pour que le logo reste aligné sur le titre. */
.page-large .bandeau-interieur, .page-large main { max-width: 90rem; }
.page-large main > :not(.formulaire-grille, .grille-defile) { max-width: calc(var(--mesure) - 2rem); }

/* ---- Pied de page ---- */

.pied {
  max-width: var(--mesure);
  margin: 0 auto;
  padding: 1.5rem 1rem 2rem;
  border-top: 1px solid var(--filet);
  font-size: 0.875rem;
  color: var(--discret);
  text-align: center;
}
.pied p { margin: 0 auto; }
.pied a { color: inherit; }
.pied code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.8125rem; }
.entete .retour { font-size: 1rem; }
.retour { display: inline-flex; align-items: center; gap: 0.25rem; }
.chapo { color: var(--discret); font-size: 1.25rem; }

section { display: grid; gap: 1rem; }
/* Titre de section : le petit cercle pointillé corail de la charte. */
section > h2:first-child { display: flex; gap: 0.75rem; align-items: baseline; }
section > h2:first-child::before {
  content: "";
  flex: 0 0 1rem;
  height: 1rem;
  align-self: center;
  border: 2.5px dotted var(--corail);
  border-radius: 50%;
}

/* Carte : surface claire, filet chaud, coins arrondis. */
.carte, .notes, .resume, .autre-mois {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
}

.autre-mois { margin-top: 1rem; padding: 0 1.25rem; }
.autre-mois summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--titre);
  padding: 0.875rem 0;
  min-height: 44px;
  list-style: none;
  display: flex;
  gap: 0.625rem;
  align-items: center;
}
.autre-mois summary::-webkit-details-marker { display: none; }
.autre-mois summary::before { content: "+"; color: var(--corail-encre); font-weight: 800; width: 0.75rem; }
.autre-mois[open] summary::before { content: "\2212"; }
.autre-mois form { padding-bottom: 1.25rem; }

/* ---- Boutons ---- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.625rem 1.25rem;
  margin-left: 5px;
  border: 0;
  border-radius: var(--rayon);
  background: var(--corail);
  color: var(--nuit-profond);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--ombre-bouton);
  transition: transform 140ms var(--sortie), box-shadow 140ms var(--sortie), background-color 140ms var(--sortie);
}
.bouton:hover { background: var(--corail-clair); }
.bouton:active { transform: translate(-4px, 4px); box-shadow: var(--ombre-appuyee); }
.bouton[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
/* Icônes : taille du texte par défaut, chaque composant peut l'ajuster. */
.icone { width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.2em; }
.justificatifs a { display: inline-flex; align-items: center; gap: 0.25rem; }

.bouton svg { width: 1.25em; height: 1.25em; flex: none; }

.bouton-large { width: calc(100% - 5px); min-height: 3.5rem; font-size: 1.25rem; }

.bouton-second {
  background: transparent;
  color: var(--nuit);
  border: 2px solid var(--nuit);
  box-shadow: none;
  margin-left: 0;
}
.bouton-second:hover { background: var(--doux); }
.bouton-second:active { transform: translateY(1px); box-shadow: none; }

.bouton-danger {
  background: transparent;
  color: var(--erreur);
  border: 2px solid var(--erreur);
  box-shadow: none;
  margin-left: 0;
}
.bouton-danger:hover { background: var(--erreur-fond); }
.bouton-danger:active { transform: translateY(1px); box-shadow: none; }

.lien-bouton {
  background: none;
  border: 0;
  padding: 0.25rem 0;
  font: inherit;
  color: var(--nuit);
  text-decoration: underline;
  text-decoration-color: var(--corail);
  text-underline-offset: 0.2em;
  cursor: pointer;
  min-height: 2.75rem;
}

.actions { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: center; }

/* ---- Messages ---- */

.message {
  padding: 0.875rem 1rem;
  border-radius: var(--rayon-champ);
  border: 1px solid var(--ciel-filet);
  background: var(--ciel-doux);
  color: var(--titre);
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.message svg { width: 1.5rem; height: 1.5rem; flex: none; margin-top: 0.05rem; }
.message-erreur { border-color: var(--corail); background: var(--erreur-fond); color: var(--erreur); font-weight: 600; }
.message-alerte { border-color: var(--ambre); background: var(--ambre-doux); color: var(--titre); }
.a-faire p { margin: 0 0 0.375rem; font-weight: 600; }
.a-faire ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.a-faire a { font-weight: 600; line-height: 1.75; }

/* ---- Formulaires ---- */

form { display: grid; gap: 1.5rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 1.25rem; }
legend { padding: 0; margin-bottom: 0.25rem; }

.champ { display: grid; gap: 0.375rem; }
.champ label, .libelle { font-weight: 700; color: var(--titre); }
.facultatif { font-weight: 400; color: var(--discret); }
.aide { font-size: 1rem; color: var(--discret); }

input[type="text"], input[type="date"], input[type="month"], input[type="email"], input[type="password"],
select, textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  border: 2px solid var(--nuit);
  border-radius: var(--rayon-champ);
  background: var(--surface);
  color: var(--nuit);
  font: inherit;
}
textarea { min-height: 6rem; resize: vertical; }
/* Champ fichier hors de la zone de dépôt : bouton secondaire, cible de 44 px. */
input[type="file"] { font: inherit; font-size: 1rem; color: var(--discret); min-height: 2.75rem; max-width: 100%; }
input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 700;
  color: var(--nuit);
  background: transparent;
  border: 2px solid var(--nuit);
  border-radius: var(--rayon);
  min-height: 2.75rem;
  padding: 0.375rem 1rem;
  margin-right: 0.75rem;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--doux); }
input:hover, select:hover, textarea:hover { background: var(--blanc); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  background: var(--blanc);
}
.champ-montant { position: relative; max-width: 14rem; }
.champ-montant input { padding-right: 2.25rem; font-size: 1.5rem; font-weight: 800; }
.champ-montant span { position: absolute; right: 0.875rem; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--discret); }

.en-erreur input, .en-erreur select, .en-erreur textarea { border-color: var(--corail-encre); background: var(--peche); }
.erreur-champ { color: var(--erreur); font-weight: 600; display: flex; gap: 0.375rem; align-items: flex-start; }
.erreur-champ svg { width: 1.2em; height: 1.2em; flex: none; margin-top: 0.15em; }

.choix { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.choix label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.5rem 1.125rem;
  border: 1.5px solid var(--filet);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
  color: var(--nuit);
  cursor: pointer;
}
.choix label:hover { border-color: var(--nuit); }
.choix input { width: 1.125rem; height: 1.125rem; margin: 0; }
.choix label:has(input:checked) { border-color: var(--nuit); background: var(--ciel); box-shadow: inset 0 0 0 1px var(--nuit); }
.choix label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Dépôt d'un justificatif */
.depot {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 2.25rem 1rem;
  border: 2.5px dashed var(--nuit);
  border-radius: var(--rayon-carte);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
}
.depot:hover { background: var(--ciel-doux); }
.depot:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.depot svg { width: 2.75rem; height: 2.75rem; color: var(--corail); }
.depot strong { color: var(--titre); font-size: 1.25rem; font-weight: 800; }
.depot input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.depot-apercu { display: none; max-height: 14rem; max-width: 100%; border-radius: var(--rayon-champ); }
.depot.a-fichier .depot-apercu { display: block; }
.depot-nom { font-size: 1rem; color: var(--discret); }

/* ---- Assistant pas à pas ---- */

.pastilles { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; }
.pastilles li {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 0.375rem;
  position: relative;
  font-size: 0.9375rem;
  color: var(--discret);
  text-align: center;
}
.pastilles li::before {
  content: "";
  position: absolute;
  top: 1rem;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--filet);
  z-index: 0;
}
.pastilles li:first-child::before { display: none; }
.pastilles li.faite::before, .pastilles li[aria-current]::before { background: var(--nuit); }
.pastille {
  position: relative;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--filet);
  background: var(--fond);
  font-weight: 700;
  transition: box-shadow 220ms var(--sortie), background-color 220ms var(--sortie);
}
.pastille svg { width: 1rem; height: 1rem; }
.faite .pastille { background: var(--nuit); border-color: var(--nuit); color: var(--creme); }
[aria-current] .pastille {
  background: var(--corail);
  border-color: var(--corail);
  color: var(--nuit-profond);
  box-shadow: -3px 3px 0 var(--nuit);
}
[aria-current] { color: var(--titre); font-weight: 700; }
@media (max-width: 30rem) {
  .pastilles .nom-etape { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pastilles [aria-current] .nom-etape { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

.etape { display: grid; gap: 1.25rem; }
.etape-titre { display: grid; gap: 0.25rem; }
.compteur { font-size: 0.9375rem; color: var(--corail-encre); font-weight: 700; letter-spacing: 0.04em; }
form:not(.etapes-actives) .js-seulement, .etapes-actives .sans-js { display: none; }
.etape:not([hidden]) { animation: entree 260ms var(--sortie); }
@keyframes entree { from { opacity: 0.4; transform: translateX(0.75rem); } }
.sans-js-separateur { border: 0; border-top: 1px solid var(--filet); margin: 0.5rem 0; }

.resume { margin: 0; display: grid; gap: 0; padding: 0 1.25rem; }
.resume div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--filet); }
.resume div:last-child { border-bottom: 0; }
.resume dt { flex: none; color: var(--discret); }
.resume dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-weight: 700; color: var(--titre); text-align: right; }

/* ---- Note et dépenses ---- */

.statut {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.75rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--nuit);
  background: var(--ambre-doux);
  white-space: nowrap;
}
.statut-soumise { background: var(--ciel); }
.statut-payee { background: var(--corail); color: var(--nuit-profond); }
.statut-rejetee { background: var(--peche); color: var(--erreur); box-shadow: inset 0 0 0 1.5px var(--peche-filet); }

/* La note du mois : la carte bleu nuit à ombre corail de techforhope.com. */
.note-du-mois {
  display: grid;
  gap: 1.25rem;
  padding: 1.75rem 1.5rem 2rem;
  margin-left: 10px;
  border-radius: var(--rayon-vedette);
  background: var(--nuit);
  color: var(--creme);
  box-shadow: -10px 10px 0 var(--corail);
}
.note-du-mois h2 { color: var(--creme); font-size: 1.75rem; }
.note-du-mois > h2::before { border-color: var(--corail-pale); }
.note-du-mois a:not(.bouton) { color: var(--creme); text-decoration-color: var(--corail); }
.note-du-mois .total { color: var(--creme); }
.note-du-mois .total-libelle { color: var(--ciel); }
/* Dans la carte sombre, le bouton passe en crème avec l'ombre corail. */
.note-du-mois .bouton {
  background: var(--creme);
  color: var(--nuit);
  border-radius: var(--rayon-carte);
  box-shadow: -6px 6px 0 var(--corail);
  margin-left: 6px;
  width: calc(100% - 6px);
}
.note-du-mois .bouton:hover { background: var(--blanc); }
.note-du-mois .bouton:active { box-shadow: -2px 2px 0 var(--corail); }
.note-du-mois :focus-visible { outline-color: var(--creme); }
.note-du-mois-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; }
.total { font-size: 2.75rem; font-weight: 900; color: var(--titre); letter-spacing: -0.02em; line-height: 1; }
.total-libelle { font-size: 1rem; color: var(--discret); margin-top: 0.375rem; }

.manque { color: var(--erreur); font-weight: 700; display: inline-flex; gap: 0.25rem; align-items: center; }
.manque svg { width: 1.1em; height: 1.1em; }


.vide { padding: 1.25rem; color: var(--discret); background: var(--surface); border: 1px dashed var(--filet); border-radius: var(--rayon-carte); max-width: none; }

.notes { list-style: none; margin: 0; padding: 0 1.25rem; }
.notes li { border-bottom: 1px solid var(--filet); }
.notes li:last-child { border-bottom: 0; }
.notes a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  text-decoration: none;
  color: var(--titre);
  font-weight: 700;
  min-height: 3rem;
}
.notes a:hover .notes-mois { text-decoration: underline; text-decoration-color: var(--corail); }
.notes-droite { display: flex; align-items: center; gap: 1rem; font-weight: 700; }

/* Notes de l'équipe : qui, quel mois, puis le montant et le statut. */
.entete > .bouton { justify-self: start; }
.titre-personne { display: block; font-size: 0.5em; font-weight: 700; color: var(--discret); letter-spacing: 0; }
.notes-qui { display: grid; gap: 0.125rem; }
.notes-detail { font-weight: 400; color: var(--discret); font-size: 0.9375rem; }
.notes-equipe .notes-droite { flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 1rem; }
/* Une note soumise se paie depuis la liste : un petit bouton au bout de la ligne, après le montant. */
.notes-equipe li { display: flex; align-items: center; gap: 0.75rem; }
.notes-equipe li > a { flex: 1; min-width: 0; }
.notes .montant { white-space: nowrap; }
.notes-equipe form { display: block; }
/* Un bouton de ligne : le bouton principal en petit, ombre réduite ; sa zone de clic garde 44 px de haut. */
.bouton-petit { position: relative; min-height: 2.25rem; padding: 0.25rem 0.75rem; gap: 0.375rem; font-size: 0.9375rem; margin-left: 3px; box-shadow: -3px 3px 0 var(--nuit); }
.bouton-petit:active { transform: translate(-2px, 2px); box-shadow: -1px 1px 0 var(--nuit); }
.bouton-petit::after { content: ""; position: absolute; inset: -0.25rem 0; }
.bouton-petit svg { width: 1.1em; height: 1.1em; }

/* La page d'une note : le retour à gauche, la note d'avant et celle d'après à droite, sur une ligne. */
.entete-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; }
.voisines { display: flex; gap: 0.25rem 1.25rem; margin-left: auto; }
.voisines a { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; font-weight: 700; }

/* Payer ou rejeter : le justificatif à vérifier, le bouton qui paie, le rejet replié. */
.revue { gap: 1.25rem; }
.revue-verifier { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; margin: 0; }
.revue-verifier a { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; font-weight: 700; }
.rejet { border-top: 1px solid var(--filet); padding-top: 0.75rem; }
.rejet summary {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem;
  cursor: pointer; list-style: none; font-weight: 700; color: var(--erreur);
}
.rejet summary::-webkit-details-marker { display: none; }
.rejet summary::before { content: "+"; font-weight: 800; width: 0.75rem; }
.rejet[open] summary::before { content: "\2212"; }
.rejet form { margin-top: 0.75rem; gap: 1rem; }

/* Le résumé d'une note, compact : libellé au-dessus de la valeur, deux colonnes dès qu'il y a la place. */
.resume-compact { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); padding: 0.5rem 1.25rem; column-gap: 1.5rem; }
.resume-compact div { display: grid; gap: 0.125rem; justify-content: stretch; padding: 0.625rem 0; border-bottom: 0; }
.resume-compact dt { font-size: 0.9375rem; }
.resume-compact dd { text-align: left; }
.filtres { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: end; }
.filtres .champ { flex: 1 1 10rem; margin: 0; }
.revue, .export { padding: 1.25rem; }
.historique { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.historique-quoi { font-weight: 700; }

.accueil { list-style: none; margin: 0; padding: 0 1.25rem; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon-carte); }
.accueil li { border-bottom: 1px solid var(--filet); }
.accueil li:last-child { border-bottom: 0; }
.accueil a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; text-decoration: none; color: var(--titre); }
.accueil-texte { display: grid; gap: 0.25rem; }
.accueil-titre { font-size: 1.375rem; font-weight: 800; }
.accueil-resume { color: var(--discret); font-size: 1rem; }
.accueil a:hover .accueil-titre { text-decoration: underline; text-decoration-color: var(--corail); text-decoration-thickness: 2px; }
.accueil .icone { flex: none; color: var(--corail-encre); }

.justificatifs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.justificatifs a { display: inline-flex; gap: 0.5rem; align-items: center; min-height: 2.75rem; }
.justificatifs svg { width: 1.2em; height: 1.2em; }

.zone-danger { border-top: 1px solid var(--filet); padding-top: 1.5rem; }

/* ---- Temps ---- */

.mois-voisins { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; font-weight: 700; }
.mois-voisins a { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; }

/* La grille défile à l'horizontale ; la colonne des missions reste fixe à gauche. */
.grille-defile {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-carte);
  overscroll-behavior-x: contain;
  position: relative;
  /* La colonne des missions : jamais plus de 40 % de l'écran, même avec un texte agrandi. */
  --colonne-missions: min(9rem, 40vw);
  /* Une case qui reçoit le focus ne se cache pas sous la colonne des missions. */
  scroll-padding-inline-start: calc(var(--colonne-missions) + 0.5rem);
}
@media (min-width: 48rem) { .grille-defile { --colonne-missions: min(13rem, 30vw); } }
.grille { border-collapse: separate; border-spacing: 0; font-size: 1rem; }
.grille th, .grille td {
  padding: 0.25rem;
  text-align: center;
  border-bottom: 1px solid var(--filet);
  min-width: 2.75rem;
}
.grille thead th { font-weight: 700; color: var(--titre); line-height: 1.1; padding-block: 0.5rem; vertical-align: bottom; }
.grille .jour-nom { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--discret); }
.grille .grille-mission {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  text-align: left;
  width: var(--colonne-missions);
  min-width: var(--colonne-missions);
  max-width: var(--colonne-missions);
  padding: 0.5rem;
  border-right: 1px solid var(--filet);
  font-weight: 700;
  color: var(--titre);
  overflow-wrap: break-word;
}
.grille .week-end { background: var(--doux); }
/* Une ligne : l'activité en gras, son client et sa mission en dessous, plus discrets. */
.grille .grille-activite { display: block; hyphens: auto; }
.grille .grille-contexte { display: block; font-size: 0.875rem; font-weight: 600; color: var(--discret); line-height: 1.3; }
.grille .grille-mission .statut { margin-top: 0.25rem; }
/* Pas de temps le week-end : une colonne étroite, juste assez pour le jour. */
.grille :is(th, td).week-end { min-width: 1.5rem; width: 1.5rem; padding-inline: 0; }
.grille thead .week-end { font-size: 0.875rem; }
/* Les nombres et les totaux ne se coupent jamais. */
.grille :is(td, thead th:not(.grille-mission)) { white-space: nowrap; overflow-wrap: normal; }
.grille .etat-grille { font-size: 1rem; }
.grille [data-aujourdhui] { box-shadow: inset 0 -3px 0 var(--corail); }
.grille [data-aujourdhui] .jour-nom { color: var(--corail-encre); }
.grille select {
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--discret);
  border-radius: var(--rayon);
  background: var(--surface);
  text-align: center;
  text-align-last: center;
  font-weight: 700;
  appearance: none;
  cursor: pointer;
}
.grille select:hover { border-color: var(--nuit); }
.grille .week-end select { background: var(--doux); }
.grille .en-erreur select { border: 2px solid var(--corail-encre); background: var(--peche); }
.grille tfoot td, .grille tfoot th, .grille .grille-total { font-weight: 800; color: var(--titre); }
.grille tfoot td, .grille tfoot th { border-bottom: 0; border-top: 2px solid var(--filet); }
.grille .grille-total { padding-inline: 0.75rem; }
.grille .trop { color: var(--erreur); background: var(--peche); }
.etat-grille { color: var(--discret); font-size: 1rem; }
/* Sur grand écran : des cases plus serrées, pour voir tout le mois sans défiler. */
@media (min-width: 64rem) {
  .grille-defile { --colonne-missions: min(16rem, 17vw); }
  /* La grille prend toute la largeur : les jours ouvrés se partagent la place, les week-ends restent étroits. */
  .grille { width: 100%; }
  .grille th, .grille td { min-width: 0; padding: 0.25rem 0.125rem; }
  .grille thead th { font-size: 0.9375rem; }
  .grille .jour-nom { font-size: 0.8125rem; }
  .grille select { width: 2rem; min-height: 2rem; font-size: 0.9375rem; }
  .grille .grille-mission { padding: 0.375rem 0.625rem; font-size: 0.9375rem; }
  .grille .grille-total { padding-inline: 0.5rem; }
}
.refus { margin: 0.375rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.25rem; font-weight: 400; }
.refus a { color: inherit; font-weight: 700; }

.ajout-ligne { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.375rem; max-width: calc(var(--mesure) - 2rem); }
.ajout-ligne label { font-weight: 700; color: var(--titre); }
.ajout-ligne-controles { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ajout-ligne-controles select { flex: 1 1 14rem; width: auto; min-width: 0; max-width: 100%; text-overflow: ellipsis; }

/* À facturer : une carte par entreprise. */
.facture { padding: 1.25rem; gap: 1rem; }
.facture-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; }
.facture-total { font-size: 1.5rem; font-weight: 900; color: var(--titre); }
.facture-total .total-libelle { font-size: 1rem; font-weight: 400; }
/* Avec un texte très agrandi, le tableau défile dans la carte plutôt que d'élargir la page. */
.facture { min-width: 0; }
.facture-defile { overflow-x: auto; }
.facture-missions { width: 100%; border-collapse: collapse; font-size: 1rem; }
.facture-missions th, .facture-missions td { padding: 0.5rem 0.5rem 0.5rem 0; text-align: right; border-bottom: 1px solid var(--filet); }
.facture-missions th:first-child { text-align: left; }
.facture-missions td { white-space: nowrap; overflow-wrap: normal; }
.facture-tete > * { min-width: 0; }
.facture-missions tbody th { overflow-wrap: break-word; }
.facture-missions thead th { color: var(--discret); font-weight: 600; white-space: nowrap; }
.facture-legende { text-align: left; padding-bottom: 0.25rem; }
.facture-missions tbody th { font-weight: 700; color: var(--titre); }
.facture-missions .facture-mission > * { padding-top: 0.875rem; font-weight: 700; color: var(--titre); }
.facture-missions .facture-activite { padding-left: 1rem; font-weight: 400; color: var(--encre); }
/* Sur un petit écran, le taux passe sous le nom de l'activité : la table tient sans défiler. */
.facture-taux-court { display: none; }
@media (max-width: 30rem) {
  .facture-missions .facture-col-taux { display: none; }
  .facture-taux-court { display: block; font-size: 0.875rem; color: var(--discret); }
}
.facture .autre-mois { margin-top: 0; padding: 0; border: 0; border-top: 1px solid var(--filet); border-radius: 0; }
.detail-temps { list-style: none; margin: 0; padding: 0 0 1rem; display: grid; gap: 0.25rem; font-size: 1rem; }
.detail-temps li { display: flex; flex-wrap: wrap; gap: 0 0.75rem; }
.detail-temps li span:first-child { min-width: 7rem; color: var(--discret); }
.detail-temps li span:last-child { margin-left: auto; }

/* ---- Connexion ---- */

.connexion {
  max-width: 28rem;
  width: 100%;
  justify-self: center;
  display: grid;
  gap: 1.75rem;
  padding: 2rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-vedette);
  box-shadow: -10px 10px 0 var(--nuit);
  margin-left: 10px;
}
.connexion .marque-grande img { height: 3.5rem; width: auto; }

/* ---- Clients, missions et activités ---- */

/* Un titre de section avec son action à droite ; l'action passe dessous si la place manque. */
.section-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
.section-tete h2 { margin: 0; }
section > .aide { margin-bottom: 1rem; }
.statut-mission-en_cours { background: var(--ciel); }
.statut-mission-terminee, .statut-mission-annulee, .statut-close { background: var(--doux); color: var(--discret); box-shadow: inset 0 0 0 1.5px var(--filet); }

.resume-mission { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.activites { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.activite { display: grid; gap: 0.75rem; padding: 1rem 1.25rem; }
.activite-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; }
.activite-tete h3 { margin: 0; }
.activite-taux { margin: 0; font-variant-numeric: tabular-nums; }
/* Close : toujours là, mais en retrait. */
.activite-close { background: var(--doux); }
.activite-close h3, .activite-close .activite-taux { color: var(--discret); }
.activite-hoppers { display: grid; gap: 0.5rem; border-top: 1px solid var(--filet); padding-top: 0.75rem; }
.activite-hoppers .libelle { margin: 0; }
.hoppers { list-style: none; margin: 0; padding: 0; }
.hoppers li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--filet); }
.hoppers li:last-child { border-bottom: 0; }
.discret { color: var(--discret); margin: 0; }
.activite .actions { gap: 0.5rem 1.25rem; }
.associer summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; font-weight: 700; color: var(--nuit); text-decoration: underline; text-decoration-color: var(--corail); text-underline-offset: 0.2em; }
.associer form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.25rem; }
.associer select { flex: 1 1 12rem; width: auto; }
.activite-pied { border-top: 1px solid var(--filet); padding-top: 0.25rem; }
.activite-pied a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.trace { margin: 0; font-size: 0.9375rem; color: var(--discret); }

@media (min-width: 48rem) {
  main { padding-top: 3rem; gap: 2.5rem; }
  .note-du-mois { padding: 2.25rem 2.25rem 2.5rem; }
  .connexion { padding: 2.5rem 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}