/* Pages de la box, reprises de maquettes/box.css (décision 0009) : papier crème, encre bleu-noir, jaune postal pour
   l'envoi. Polices du système uniquement : aucune adresse externe (décision 0004). Sert aussi à la page de connexion. */

:root {
  --papier: #f3eee3;
  --papier-clair: #fbf8f1;
  --encre: #1d2b33;
  --encre-douce: #55626a;
  --jaune: #f5c400;
  --jaune-appuye: #dcb000;
  --vert: #2f6b45;
  --rouge: #a3342b;
  --trait: 2px solid var(--encre);
  --arrondi: 6px;
  --titre: Georgia, "Times New Roman", serif;
  --texte: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1rem;
  line-height: 1.45;
}

.page {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding:
    calc(1.25rem + env(safe-area-inset-top)) calc(1.25rem + env(safe-area-inset-right))
    calc(1.5rem + env(safe-area-inset-bottom)) calc(1.25rem + env(safe-area-inset-left));
}

/* En-tête : le nom de la box à gauche, le nombre de dépôts en attente à droite. */
.entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: var(--trait);
}

.titre {
  margin: 0;
  font-family: var(--titre);
  font-size: 2rem;
  font-weight: normal;
  line-height: 1;
}

.compteur {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  text-align: right;
}

.compteur-nombre {
  font-family: var(--titre);
  font-size: 2.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.compteur-libelle {
  max-width: 6.5rem;
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--encre-douce);
}

.etiquette {
  font-weight: 600;
}

/* 16 px au moins : en dessous, Safari sur iPhone agrandit la page quand on touche le champ. */
.texte {
  display: block;
  width: 100%;
  min-height: 9rem;
  padding: 0.75rem;
  border: var(--trait);
  border-radius: var(--arrondi);
  background: var(--papier-clair);
  color: var(--encre);
  font: inherit;
  font-size: max(1rem, 16px);
  resize: vertical;
}

.texte::placeholder {
  color: var(--encre-douce);
}

.texte:focus-visible {
  outline: 3px solid var(--jaune);
  outline-offset: 2px;
}

/* Le champ fichier reste dans la page pour le clavier, mais seul son libellé se voit. */
.champ-fichier {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bouton {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
  border: var(--trait);
  border-radius: var(--arrondi);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.bouton-fichier {
  background: transparent;
  color: var(--encre);
}

.bouton-fichier:active {
  background: var(--papier-clair);
}

.champ-fichier:focus-visible + .bouton-fichier,
.bouton-envoyer:focus-visible {
  outline: 3px solid var(--encre);
  outline-offset: 3px;
}

/* Page de connexion : le champ du mot de passe reprend le cadre de la zone de texte. */
.formulaire {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.champ {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem;
  border: var(--trait);
  border-radius: var(--arrondi);
  background: var(--papier-clair);
  color: var(--encre);
  font: inherit;
  font-size: max(1rem, 16px);
}

.champ:focus-visible {
  outline: 3px solid var(--jaune);
  outline-offset: 2px;
}

.choisis {
  margin: -0.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--encre-douce);
  overflow-wrap: anywhere;
}

.bouton-envoyer {
  margin-top: 0.5rem;
  background: var(--jaune);
  color: var(--encre);
  box-shadow: 0 3px 0 var(--encre);
}

.bouton-envoyer:active {
  background: var(--jaune-appuye);
  box-shadow: 0 1px 0 var(--encre);
  transform: translateY(2px);
}

.bouton-envoyer:disabled {
  cursor: progress;
  opacity: 0.7;
}

.retour {
  min-height: 1.5rem;
  margin: 0.25rem 0 0;
  font-weight: 600;
}

.retour.ok {
  color: var(--vert);
}

.retour.erreur {
  color: var(--rouge);
}

@media (hover: hover) {
  .bouton-fichier:hover {
    background: var(--papier-clair);
  }

  .bouton-envoyer:hover {
    background: var(--jaune-appuye);
  }
}

/* Écran de PC : plus d'air autour de la colonne. */
@media (min-width: 48rem) {
  .page {
    padding-top: 3rem;
  }

  .texte {
    min-height: 12rem;
  }
}