/* Styles partagés du site. Volontairement minimal : les pages portées
   depuis Power Pages gardent leurs styles inline, ce fichier ne sert qu'aux
   éléments communs (en-tête, cartes, formulaires). */

:root {
  --tafi-brun: rgb(126, 58, 9);
  --tafi-brun-clair: rgb(158, 76, 16);
  --gris-texte: rgb(82, 82, 91);
  --gris-clair: rgb(228, 228, 231);
  --fond: rgb(250, 250, 250);
  --rouge: rgb(185, 28, 28);
  --vert: rgb(21, 128, 61);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--fond);
  color: rgb(24, 24, 27);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* En-tête de navigation, injecté par /assets/nav.js : une barre compacte
   fixe (hamburger + marque) et un tiroir plein écran ouvert par-dessus le
   contenu, plutôt qu'une barre qui s'enroule sur plusieurs lignes en
   mobile et fait sauter la page pendant son chargement. */
#entete {
  height: 52px;
}

.barre-app {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: 52px;
  background-color: var(--tafi-brun);
  color: white;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
}

.bouton-menu {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 12px;
  border-radius: 8px;
  line-height: 0;
}

.bouton-menu:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.icone-burger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 20px;
}

.icone-burger span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background-color: white;
}

.marque-app {
  color: white;
  text-decoration: none;
  font-weight: 600;
  padding: 8px;
  white-space: nowrap;
}

/* Barre horizontale (grand écran) : cachée par défaut, activée par la
   media query plus bas dès que la largeur permet d'aligner tous les
   liens sans qu'ils s'enroulent sur plusieurs lignes. En dessous de ce
   seuil, on repasse sur le hamburger + tiroir. */
.nav-desktop {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 0.92em;
  margin-left: 12px;
}

.nav-desktop a,
.menu-groupe-bouton {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.nav-desktop a:hover,
.menu-groupe-bouton:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-desktop a.actif,
.menu-groupe-bouton.actif {
  color: white;
  font-weight: 600;
}

.menu-groupe {
  position: relative;
}

.menu-groupe-bouton {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

.menu-groupe-panneau {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background-color: white;
  border: 1px solid var(--gris-clair);
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 16px;
  padding: 6px;
  min-width: 200px;
  z-index: 31;
}

.menu-groupe-panneau[hidden] {
  display: none;
}

.menu-groupe-panneau a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  color: rgb(24, 24, 27);
  text-decoration: none;
  font-size: 0.95em;
  white-space: nowrap;
}

.menu-groupe-panneau a:hover {
  background-color: var(--fond);
}

.menu-groupe-panneau a.actif {
  color: var(--tafi-brun);
  font-weight: 600;
}

.bouton-deconnexion-desktop {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9em;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.bouton-deconnexion-desktop:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Cloche : accès au fil des notifications (/app/notifications), avec le
   nombre de non lues. À ne pas confondre avec le bouton "Activer sur cet
   appareil" voisin, qui gère l'autorisation push du navigateur. */
.cloche-desktop {
  display: none;
  position: relative;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 1.05em;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 6px;
}

.cloche-desktop:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}

.pastille-notifs {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background-color: var(--rouge);
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.pastille-notifs[hidden] {
  display: none;
}

/* Dans le tiroir, la pastille suit le libellé au lieu de flotter. */
.lien-cloche-tiroir .pastille-notifs {
  position: static;
  margin-left: auto;
}

@media (min-width: 1220px) {
  .bouton-menu {
    display: none;
  }

  .nav-desktop {
    display: flex;
  }

  .bouton-deconnexion-desktop {
    display: inline-block;
  }

  .cloche-desktop {
    display: inline-flex;
  }
}

/* Voile assombri derrière le tiroir ouvert ; un clic dessus referme. */
.scrim {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 35;
}

.scrim[hidden] {
  display: none;
}

/* Tiroir de navigation : hors écran par défaut (translateX), glissé à
   l'écran par la classe .ouvert. position: fixed (et non absolute) car le
   vrai site n'a pas de cadre englobant comme la maquette. */
.tiroir {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(300px, 84vw);
  background-color: white;
  color: rgb(24, 24, 27);
  z-index: 40;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  box-shadow: rgba(0, 0, 0, 0.25) 4px 0px 24px;
}

.tiroir.ouvert {
  transform: translateX(0);
}

body.tiroir-ouvert {
  overflow: hidden;
}

.tiroir-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  background-color: var(--tafi-brun);
  color: white;
  flex-shrink: 0;
}

.tiroir-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}

.tiroir-identite {
  min-width: 0;
  flex: 1;
}

.tiroir-nom {
  font-weight: 600;
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tiroir-role {
  font-size: 0.82em;
  color: rgba(255, 255, 255, 0.75);
}

.bouton-fermer-tiroir {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
}

.bouton-fermer-tiroir:hover {
  color: white;
}

.tiroir-liste {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.tiroir-liste .lien,
.groupe-declencheur,
.sous-lien {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  color: rgb(24, 24, 27);
  text-decoration: none;
  background: none;
  border: none;
  font-size: 0.95em;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.tiroir-liste .lien:hover,
.groupe-declencheur:hover,
.sous-lien:hover {
  background-color: var(--fond);
}

.tiroir-liste .lien.actif,
.groupe-declencheur.actif,
.sous-lien.actif {
  background-color: rgb(253, 243, 234);
  color: var(--tafi-brun);
  font-weight: 600;
}

.icone-lien {
  font-size: 1.1em;
  flex-shrink: 0;
  width: 1.2em;
  text-align: center;
}

.groupe-libelle {
  flex: 1;
}

.chevron {
  transition: transform 0.15s ease;
  color: var(--gris-texte);
}

.groupe-declencheur[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.sous-liste {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sous-liste[hidden] {
  display: none;
}

.sous-lien {
  font-size: 0.9em;
}

.tiroir-pied {
  border-top: 1px solid var(--gris-clair);
  padding: 8px;
  flex-shrink: 0;
}

.lien-deconnexion {
  color: var(--rouge);
}

.lien-deconnexion:hover {
  background-color: rgb(254, 242, 242);
}

/* Carte centrée (pages d'authentification) */
.centre {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

.carte {
  width: 100%;
  max-width: 380px;
  background-color: white;
  border: 1px solid var(--gris-clair);
  border-radius: 12px;
  padding: 32px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px;
}

.carte h1 {
  margin: 0;
  font-size: 1.25em;
  color: var(--tafi-brun);
}

.carte p.intro {
  margin: 4px 0 24px 0;
  font-size: 0.9em;
  color: var(--gris-texte);
}

/* Formulaires */
.champ {
  margin-bottom: 16px;
}

.champ label {
  display: block;
  font-size: 0.85em;
  font-weight: 500;
  margin-bottom: 6px;
}

.champ input {
  width: 100%;
  padding: 9px 12px;
  font-size: 0.9em;
  border: 1px solid rgb(212, 212, 216);
  border-radius: 6px;
  font-family: inherit;
}

.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--tafi-brun);
}

.champ textarea {
  width: 100%;
  padding: 9px 12px;
  font-size: 0.9em;
  border: 1px solid rgb(212, 212, 216);
  border-radius: 6px;
  font-family: inherit;
  min-height: 72px;
  resize: vertical;
}

.champ .radio-groupe {
  display: flex;
  gap: 20px;
}

.champ .radio-groupe label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 1em;
  margin-bottom: 0;
}

.champ .radio-groupe input[type="radio"] {
  width: auto;
}

.champ select {
  width: 100%;
  padding: 9px 12px;
  font-size: 0.9em;
  border: 1px solid rgb(212, 212, 216);
  border-radius: 6px;
  font-family: inherit;
  background-color: white;
}

.bouton {
  width: 100%;
  background-color: var(--tafi-brun);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 11px 20px;
  font-size: 0.95em;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.bouton:hover:not(:disabled) {
  background-color: var(--tafi-brun-clair);
}

.bouton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bouton.bouton-danger {
  background-color: var(--rouge);
}

.bouton.bouton-danger:hover:not(:disabled) {
  background-color: rgb(153, 27, 27);
}

.bouton-secondaire {
  background-color: white;
  color: var(--tafi-brun);
  border: 1px solid var(--tafi-brun);
  border-radius: 6px;
  padding: 0 14px;
  font-size: 0.85em;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.bouton-secondaire:hover {
  background-color: var(--fond);
}

/* Liste de cartes (files d'attente : validation, décaissement) */
.carte-liste {
  background-color: white;
  border: 1px solid var(--gris-clair);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}

.carte-liste .ligne-info {
  font-size: 0.9em;
  margin-bottom: 4px;
}

.carte-liste .ligne-info strong {
  display: inline-block;
  min-width: 120px;
  color: var(--gris-texte);
  font-weight: 500;
}

.carte-liste hr {
  border: none;
  border-top: 1px solid var(--gris-clair);
  margin: 16px 0;
}

/* Actions d'une carte de file d'attente (valider/refuser, puis le
   panneau qui s'ouvre pour l'une ou l'autre). */
.actions-demande {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.actions-demande .bouton {
  width: auto;
  flex: 1;
}

.bloc-action {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gris-clair);
}

.bloc-action .actions-bloc {
  display: flex;
  gap: 8px;
}

.bloc-action .actions-bloc .bouton {
  width: auto;
  flex: 1;
}

.bloc-action .actions-bloc .bouton-secondaire {
  flex: 0 0 auto;
}

.groupe-select-ajout {
  display: flex;
  gap: 8px;
}

.groupe-select-ajout select {
  flex: 1;
}

.ajout-inline {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Un élément affiché en flex reste visible même avec l'attribut "hidden"
   (une règle d'auteur avec display l'emporte sur la feuille de style par
   défaut du navigateur, à spécificité égale) : ces deux classes ont besoin
   d'un rappel explicite pour que .hidden = true les cache vraiment. */
.actions-demande[hidden],
.ajout-inline[hidden],
.centre[hidden] {
  display: none;
}

.ajout-inline input {
  flex: 1;
}

/* Messages */
.erreur {
  background-color: rgb(254, 242, 242);
  color: var(--rouge);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.85em;
  margin: 0 0 16px 0;
}

.succes {
  background-color: rgb(240, 253, 244);
  color: var(--vert);
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 0.85em;
  margin: 0 0 16px 0;
}

.liens {
  margin-top: 20px;
  text-align: center;
  font-size: 0.85em;
  color: var(--gris-texte);
}

.liens a {
  color: var(--tafi-brun);
}

/* Contenu de page large (tableaux) */
.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 16px;
}

.page h1 {
  font-size: 1.25em;
  color: var(--tafi-brun);
  margin: 0 0 4px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  background-color: white;
}

table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gris-texte);
  background-color: var(--fond);
}

table td {
  padding: 8px 16px;
  border-top: 1px solid rgb(244, 244, 245);
}

.tableau-cadre {
  overflow-x: auto;
  border: 1px solid var(--gris-clair);
  border-radius: 8px;
  margin-top: 16px;
}

/* Étiquette de statut (suivi des demandes de sortie de caisse). */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 600;
  white-space: nowrap;
}

.badge-en_attente {
  background-color: rgb(254, 249, 195);
  color: rgb(133, 100, 4);
}

.badge-validee {
  background-color: rgb(219, 234, 254);
  color: rgb(29, 78, 216);
}

.badge-refusee {
  background-color: rgb(254, 226, 226);
  color: var(--rouge);
}

.badge-payee {
  background-color: rgb(220, 252, 231);
  color: var(--vert);
}

.badge-annulee {
  background-color: rgb(228, 228, 231);
  color: var(--gris-texte);
}

/* Étiquettes de statut des ordres de décaissement (suivi des
   décaissements) : en_attente réutilise .badge-en_attente ci-dessus. */
.badge-en-cours-ordre {
  background-color: rgb(219, 234, 254);
  color: rgb(29, 78, 216);
}

.badge-echoue-ordre {
  background-color: rgb(254, 226, 226);
  color: var(--rouge);
}

.badge-decaisse-ordre {
  background-color: rgb(220, 252, 231);
  color: var(--vert);
}

.badge-annule-ordre {
  background-color: rgb(228, 228, 231);
  color: var(--gris-texte);
}

/* Barre de filtres (suivi des demandes). */
.barre-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 16px;
}

.barre-filtres .champ {
  margin-bottom: 0;
}

.barre-filtres label.case {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  white-space: nowrap;
}

.barre-filtres label.case input {
  width: auto;
}