/*
 * La Pochette — page « Envoyer vers mon téléphone » (T3).
 * Épuré, fond blanc, accent maroon de marque #970000 — aligné sur le thème de
 * l'app (cf. la-pochette/src/constantes/theme.ts, palette « Couleurs.light »).
 * Fond TOUJOURS clair : pas de mode sombre (lisibilité + le QR se scanne sur blanc).
 * Aucune ressource externe (police système, pas de webfont → zéro requête tierce).
 */

:root {
  --rouge: #970000; /* accent primaire = maroon de marque (Couleurs.light.accent) */
  --rouge-fonce: #7a0000; /* survol des boutons pleins */
  --fond: #ffffff; /* fond de page — toujours blanc */
  --carte: #ffffff; /* fond de la carte */
  --fond-element: #f2f3f7; /* champs, lignes de fichier (Couleurs.light.fondElement) */
  --texte: #0b0f1a; /* Couleurs.light.texte */
  --texte-doux: #5a6072; /* Couleurs.light.texteSecondaire */
  --bord: #e6e8ee;
  --ok: #188a4e; /* CouleursMarque.vert */
  --erreur: #c0392b;
  --rayon: 14px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px 48px;
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

.carte {
  width: 100%;
  max-width: 460px;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 28px 24px;
  box-shadow: 0 10px 30px rgba(16, 21, 31, 0.06);
}

.entete h1 {
  margin: 0;
  font-size: 1.35rem;
  color: var(--rouge);
  letter-spacing: -0.01em;
}
.entete .sous-titre {
  margin: 2px 0 20px;
  color: var(--texte-doux);
  font-size: 0.95rem;
}

.intro {
  color: var(--texte-doux);
  font-size: 0.95rem;
}

/* ── Chargement (vue 0, le temps du GET /moi) ── */
.vue-chargement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 0 12px;
}
.vue-chargement .intro {
  margin: 0;
}
.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--bord);
  border-top-color: var(--rouge);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* Accessibilité : on ralentit fortement plutôt que de figer (repère visuel conservé). */
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2.4s;
  }
}
.fort,
.fort span {
  color: var(--texte);
  font-weight: 600;
}

/* ── Formulaires ── */
form {
  margin: 0;
}
label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 14px 0 6px;
}
input[type="email"],
input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  color: var(--texte);
  background: var(--fond-element);
  border: 1px solid var(--bord);
  border-radius: 10px;
  outline: none;
}
input:focus {
  border-color: var(--rouge);
  box-shadow: 0 0 0 3px rgba(151, 0, 0, 0.18);
}

button {
  font: inherit;
  cursor: pointer;
}
button[type="submit"],
#btn-demarrer {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 13px 16px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--rouge);
  border: none;
  border-radius: 10px;
  transition: background 0.15s ease;
}
button[type="submit"]:hover,
#btn-demarrer:hover {
  background: var(--rouge-fonce);
}
button:disabled {
  opacity: 0.55;
  cursor: default;
}
/* Bouton plein en cours de requête : texte masqué (largeur préservée) + spinner blanc. */
button.charge {
  position: relative;
  color: transparent;
  opacity: 1;
  pointer-events: none;
}
button.charge::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.lien {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 0;
  background: none;
  border: none;
  color: var(--rouge);
  font-size: 0.9rem;
  text-decoration: underline;
}

/* Bouton « Retour » — secondaire, épuré (bordure discrète, plein largeur). */
.bouton-retour {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--texte);
  background: transparent;
  border: 1px solid var(--bord);
  border-radius: 10px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.bouton-retour:hover {
  border-color: var(--rouge);
  color: var(--rouge);
}

/* ── Envoi ── */
.compte-ligne {
  font-size: 0.9rem;
  color: var(--texte-doux);
  padding-bottom: 12px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--bord);
}
.compte-ligne .lien {
  margin: 0 0 0 8px;
}

.qr-zone {
  text-align: center;
  margin: 8px 0 16px;
}
.qr {
  display: inline-flex;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--bord);
  min-height: 40px;
}
.qr :is(svg, img) {
  width: 200px;
  height: 200px;
  display: block;
}
.qr-etat {
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: var(--texte-doux);
}

/* Zone de dépôt : le label occupe toute la surface (clic = sélecteur, glisser =
   dépôt). Plus haute qu'un simple bouton pour offrir une cible franche au drag. */
.bouton-fichier {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 26px 16px;
  margin-top: 6px;
  font-weight: 600;
  color: var(--rouge);
  background: transparent;
  border: 1.5px dashed var(--rouge);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.depot-titre {
  font-size: 1rem;
}
.depot-sous {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--texte-doux);
}
/* Survol d'un glisser au-dessus de la zone → cible mise en évidence. */
.fichiers-zone.depot-actif .bouton-fichier {
  border-style: solid;
  background: color-mix(in srgb, var(--rouge) 8%, transparent);
}
.aide {
  margin: 8px 0 4px;
  font-size: 0.8rem;
  color: var(--texte-doux);
}
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.liste-fichiers {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.fichier {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--fond-element);
  border: 1px solid var(--bord);
  border-radius: 10px;
  font-size: 0.9rem;
}
.fichier-nom {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fichier-meta {
  color: var(--texte-doux);
  font-size: 0.8rem;
  white-space: nowrap;
}
.fichier--erreur {
  border-color: var(--erreur);
}
.fichier--erreur .fichier-meta {
  color: var(--erreur);
}
.fichier--envoye .fichier-meta {
  color: var(--ok);
}

.badge-ok {
  margin: 14px 0 0;
  padding: 10px 12px;
  text-align: center;
  color: var(--ok);
  font-weight: 600;
  background: rgba(24, 138, 78, 0.1);
  border-radius: 10px;
}

.erreur {
  margin-top: 14px;
  padding: 10px 12px;
  color: var(--erreur);
  background: rgba(192, 57, 43, 0.1);
  border-radius: 10px;
  font-size: 0.9rem;
}

.pied {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--bord);
}
.pied p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--texte-doux);
}

/* Encart d'avertissement pour l'action irréversible (page /supprimer-compte). */
.encart-danger {
  margin: 16px 0 4px;
  padding: 14px 16px;
  background: #fdecea;
  border: 1px solid var(--erreur);
  border-radius: 10px;
  color: #7a1c14;
  font-size: 0.9rem;
  line-height: 1.45;
}
.encart-danger strong {
  color: var(--erreur);
}
.encart-danger ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.encart-danger li {
  margin: 2px 0;
}

/* Récapitulatif « ce qui est supprimé / conservé » affiché d'emblée sur la page
   /supprimer-compte (exigence Google Play : visible avant toute action). Ton neutre,
   à la différence de .encart-danger qui alerte au moment de confirmer. */
.recap {
  margin: 20px 0 4px;
  padding: 14px 16px;
  background: var(--fond-element);
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--texte-doux);
}
.recap p {
  margin: 0 0 8px;
}
.recap p:last-child {
  margin-bottom: 0;
}
.recap ul {
  margin: 0 0 8px;
  padding-left: 20px;
}
.recap li {
  margin: 2px 0;
}

[hidden] {
  display: none !important;
}