/* Velours de nuit : une colonne étroite posée sur un noir prune, un halo rose → violet qui respire derrière,
   titres en Bodoni italique, texte en Jost. Un seul thème, volontairement sombre. */
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 600; font-display: swap; src: url("/static/fonts/bodoni-moda-italic.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/static/fonts/bodoni-moda.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("/static/fonts/jost.woff2") format("woff2"); }

:root {
  --nuit: #09060a;
  --velours: #140d15;
  --velours-haut: #1c1220;
  --ligne: rgba(255, 196, 228, .13);
  --texte: #f7eef3;
  --doux: #a9939f;
  --rose: #ff5fae;
  --violet: #9d63ff;
  --degrade: linear-gradient(115deg, var(--rose), var(--violet));
  --ok: #6ee7b7;
  --erreur: #ff8f7e;
  --attention: #f5c46b;
  --affiche: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --corps: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: var(--nuit);
  color: var(--texte);
  font: 300 16px/1.55 var(--corps);
  letter-spacing: .01em;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* halo : deux lueurs floues, rose en haut, violet en bas, qui dérivent lentement */
.halo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.halo::before, .halo::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(90px); opacity: .34;
}
.halo::before { background: radial-gradient(circle, var(--rose), transparent 62%); top: -32vmax; left: -22vmax; animation: derive-a 18s ease-in-out infinite alternate; }
.halo::after { background: radial-gradient(circle, var(--violet), transparent 62%); bottom: -34vmax; right: -24vmax; animation: derive-b 22s ease-in-out infinite alternate; }
@keyframes derive-a { to { transform: translate(9vmax, 6vmax) scale(1.08); opacity: .42; } }
@keyframes derive-b { to { transform: translate(-8vmax, -7vmax) scale(1.12); opacity: .4; } }

main {
  position: relative; z-index: 1;
  max-width: 560px; margin: 0 auto;
  padding-block: max(28px, env(safe-area-inset-top)) 56px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
[hidden] { display: none !important; }

h1 {
  font: italic 500 clamp(2.4rem, 9vw, 3.3rem)/1.02 var(--affiche);
  letter-spacing: -.01em; margin: 0; text-wrap: balance;
}
h2 { font: italic 500 1.5rem/1.15 var(--affiche); margin: 0 0 14px; text-wrap: balance; }

/* surtitre : petites capitales espacées, précédées d'un trait rose */
.surtitre {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font: 500 .72rem/1 var(--corps); letter-spacing: .32em; text-transform: uppercase; color: var(--rose);
}
.surtitre::before { content: ""; width: 28px; height: 1px; background: var(--degrade); }
.accroche { color: var(--doux); margin: 14px 0 0; max-width: 34ch; }

/* carte : fond velours, liseré dégradé d'un pixel */
.carte {
  position: relative;
  background:
    linear-gradient(160deg, var(--velours-haut), var(--velours)) padding-box,
    linear-gradient(140deg, rgba(255, 95, 174, .55), rgba(255, 196, 228, .08) 40%, rgba(157, 99, 255, .55)) border-box;
  border: 1px solid transparent;
  border-radius: 22px;
  padding: clamp(22px, 6vw, 36px);
  margin-top: 18px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9), 0 0 60px -30px rgba(255, 95, 174, .35);
}
#vue-connexion, #vue-2fa { margin-top: 9vh; animation: apparition .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes apparition { from { transform: translateY(14px); } }
.entete-carte { margin-bottom: 30px; }

form { display: flex; flex-direction: column; gap: 22px; }
label { display: block; margin: 0; }
label > span {
  display: block; margin-bottom: 4px;
  font: 500 .7rem/1 var(--corps); letter-spacing: .24em; text-transform: uppercase; color: var(--doux);
}

/* champs : un simple trait, qui s'allume en dégradé au focus */
input[type=text], input:not([type]), input[type=password] {
  width: 100%;
  font: 400 16px/1.3 var(--corps); /* 16px : pas de zoom automatique sur iPhone */
  letter-spacing: .02em;
  padding: 12px 2px 10px;
  border: 0; border-radius: 0;
  border-bottom: 1px solid var(--ligne);
  background: transparent var(--degrade) no-repeat left bottom / 0% 1px;
  color: var(--texte);
  caret-color: var(--rose);
  transition: background-size .45s ease, border-color .3s ease;
}
input:focus { outline: none; background-size: 100% 1px; border-bottom-color: transparent; }
input:-webkit-autofill { -webkit-text-fill-color: var(--texte); -webkit-box-shadow: 0 0 0 40px var(--velours) inset; caret-color: var(--rose); }
input:focus-visible { outline: none; }

button {
  font: 400 1rem var(--corps);
  border: 1px solid var(--ligne);
  background: transparent;
  color: var(--texte);
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
  transition: border-color .25s ease, transform .2s ease, box-shadow .3s ease, filter .3s ease;
}
button:hover { border-color: rgba(255, 196, 228, .35); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

button.principal, .bouton-lien {
  width: 100%;
  border: 0;
  background: var(--degrade);
  color: #fff;
  font: 500 .82rem/1 var(--corps);
  letter-spacing: .26em; text-transform: uppercase;
  padding: 18px 22px;
  box-shadow: 0 12px 34px -12px rgba(255, 95, 174, .7);
}
button.principal:hover, .bouton-lien:hover { filter: brightness(1.08) saturate(1.1); box-shadow: 0 16px 44px -12px rgba(157, 99, 255, .8); transform: translateY(-1px); }
button.principal:active, .bouton-lien:active { transform: translateY(0); }
button.lien {
  border: 0; background: none; padding: 6px 2px; border-radius: 4px;
  color: var(--doux); font-size: .9rem;
  text-decoration: underline; text-decoration-color: rgba(255, 95, 174, .45); text-underline-offset: 4px;
}
button.lien:hover { color: var(--texte); }
button:disabled { opacity: .5; cursor: default; transform: none; }

.erreur { color: var(--erreur); margin: 0; font-size: .95rem; }
.ok { color: var(--ok); margin: 0; }
.avertissement { color: var(--attention); font-size: .9rem; margin: 12px 0 0; }
.doux { color: var(--doux); }
.petit { font-size: .85rem; }

/* ---------- double authentification ---------- */
#vue-2fa p { margin: 0 0 16px; }
.etapes { list-style: none; counter-reset: etape; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 12px; }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: baseline; }
.etapes li::before {
  content: counter(etape);
  font: italic 500 1.35rem/1 var(--affiche);
  background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bouton-lien { display: block; text-align: center; text-decoration: none; border-radius: 999px; margin-bottom: 20px; }
.qr {
  display: block; width: 200px; max-width: 100%; height: auto; margin: 4px auto 22px;
  padding: 10px; background: #fff; border-radius: 16px;
  box-shadow: 0 0 0 1px var(--ligne), 0 0 46px -12px rgba(157, 99, 255, .6);
}
details { margin-bottom: 26px; }
summary { cursor: pointer; color: var(--doux); font-size: .92rem; }
summary::marker { color: var(--rose); }
details[open] summary { margin-bottom: 12px; }
.secret {
  display: block; padding: 14px; border-radius: 12px;
  font: 500 1.02rem/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .08em;
  text-align: center; word-break: break-all; user-select: all; -webkit-user-select: all;
  color: var(--texte); background: rgba(255, 255, 255, .03); border: 1px dashed rgba(255, 95, 174, .35);
}
#f-code {
  font: 400 2rem/1 var(--affiche); letter-spacing: .5em; text-align: center;
  font-variant-numeric: tabular-nums; padding: 14px 0 12px .5em;
}

/* ---------- espace de dépôt ---------- */
.barre { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 2px 0; }
.qui { font: italic 500 1.5rem/1 var(--affiche); }
.qui::before { content: "✦"; font-style: normal; font-size: .8rem; margin-right: 10px; color: var(--rose); vertical-align: middle; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; }

.zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 190px; margin: 0; padding: 24px; text-align: center; cursor: pointer;
  border: 1px dashed rgba(255, 95, 174, .4); border-radius: 18px;
  background: radial-gradient(circle at 50% 0%, rgba(255, 95, 174, .09), transparent 70%);
  transition: border-color .3s ease, background .3s ease;
}
.zone:hover, .zone.survol { border-color: var(--violet); background: radial-gradient(circle at 50% 0%, rgba(157, 99, 255, .16), transparent 70%); }
.zone:focus-within { outline: 2px solid var(--rose); outline-offset: 3px; }
.zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.zone-icone {
  font-size: 2.1rem; line-height: 1;
  background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.zone strong { font: italic 500 1.45rem/1.15 var(--affiche); }
.zone small { color: var(--doux); }

#global { margin-top: 22px; }
.ligne-global { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
#g-texte { font-weight: 400; }
#g-pct { font: 500 1.7rem/1 var(--affiche); font-variant-numeric: tabular-nums; }
#g-detail { color: var(--doux); font-variant-numeric: tabular-nums; }

.barre-prog { height: 4px; background: rgba(255, 255, 255, .07); border-radius: 99px; overflow: hidden; }
.barre-prog.grande { height: 8px; margin-bottom: 8px; }
.barre-prog > div {
  height: 100%; width: 0; border-radius: 99px; background: var(--degrade);
  box-shadow: 0 0 14px rgba(255, 95, 174, .6); transition: width .25s linear;
}
.barre-prog.fini > div { background: var(--ok); box-shadow: 0 0 12px rgba(110, 231, 183, .5); }
.barre-prog.raté > div { background: var(--erreur); box-shadow: none; }

#liste, #recents { list-style: none; padding: 0; margin: 18px 0 0; }
#liste li { padding: 14px 0; border-top: 1px solid var(--ligne); }
#liste .haut { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
#liste .nom, #recents .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#liste .pct { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--rose); }
#liste .etat { font-size: .85rem; color: var(--doux); margin-top: 6px; display: flex; justify-content: space-between; gap: 8px; }
#liste .etat.ok { color: var(--ok); }
#liste .etat.erreur { color: var(--erreur); }
#liste .annuler { padding: 0; font-size: .85rem; }
#recents li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--ligne); font-size: .92rem; }
#recents small { color: var(--doux); white-space: nowrap; font-variant-numeric: tabular-nums; }

dialog {
  border: 1px solid var(--ligne); border-radius: 22px; padding: 28px;
  width: min(440px, calc(100vw - 32px));
  background: linear-gradient(160deg, var(--velours-haut), var(--velours)); color: var(--texte);
  box-shadow: 0 40px 100px -30px #000, 0 0 70px -30px rgba(157, 99, 255, .5);
}
dialog::backdrop { background: rgba(6, 3, 8, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.boutons { display: flex; gap: 10px; }
.boutons button { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .halo::before, .halo::after, #vue-connexion, #vue-2fa { animation: none; }
  * { transition: none !important; }
}