/* punker — direction « Affiche » (validée le 29/10/2026), d'après l'exposition Frank Gehry
   du Getty : un aplat bleu électrique, tout en noir dessus, un titre géant rogné par son
   bloc et des libellés à chasse fixe entre crochets. Pas de thème sombre : c'est une
   affiche, elle a une seule couleur. Polices servies par punker lui-même (polices/, OFL). */

@font-face {
  font-family: "Anton";
  src: url("polices/anton-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("polices/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("polices/jetbrains-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --fond: #3d8bff;
  --encre: #0b0b0c;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --affiche: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --marge: clamp(16px, 4vw, 40px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { background: var(--fond); }
body {
  min-height: 100svh;
  background: var(--fond);
  color: var(--encre);
  font: 400 13px/1.5 var(--mono);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

/* Le grain du papier d'affiche : un bruit très léger posé par-dessus tout, sans capter le doigt. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0.13;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }

.crochets { text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }

/* ---------------------------------------------------------------- le titre rogné */
/* Le bloc noir est plus bas que les lettres : il coupe le haut et le bas des majuscules,
   comme sur l'affiche. Hauteur et décalage en em, donc justes à toutes les tailles. */

.titre {
  display: inline-block;
  font: 400 clamp(96px, 29vw, 230px)/1 var(--affiche);
  letter-spacing: -0.015em;
  background: var(--encre);
  color: var(--fond);
  height: 0.8em;
  overflow: hidden;
  padding: 0 0.05em;
  margin: 24px 0 14px;
}
.titre span { display: block; margin-top: -0.115em; }
.titre.petit { font-size: clamp(64px, 20vw, 96px); margin: 14px 0 24px; align-self: flex-start; }

.chapo { max-width: 46ch; margin-bottom: 28px; }

/* ---------------------------------------------------------------- blocs (gros boutons) */

.bloc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 16px 20px;
  font: 700 14px/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid var(--encre);
  border-radius: 0;
  transition: transform 0.1s, box-shadow 0.1s;
  touch-action: manipulation;
}
.bloc.plein { background: var(--encre); color: var(--fond); }
.bloc.contour { background: transparent; color: var(--encre); }
/* Ombre portée franche au survol, comme un tampon décalé. */
@media (hover: hover) {
  .bloc:hover, .act:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--encre); }
}
.bloc:active, .act:active { transform: none; box-shadow: none; }
.bloc .poids { font-weight: 400; opacity: 0.7; }
.bloc[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }
/* Seul « Tout supprimer » garde un second clic : le bouton passe en négatif et demande. */
.bloc.contour.arme { background: var(--encre); color: var(--fond); }

/* ---------------------------------------------------------------- page */

.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) max(var(--marge), env(safe-area-inset-right)) max(80px, env(safe-area-inset-bottom)) max(var(--marge), env(safe-area-inset-left));
}

.barre { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }

.lien {
  background: none; border: none; color: inherit; cursor: pointer;
  font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: 0.04em;
  text-decoration: underline; text-underline-offset: 3px;
  padding: 8px 0; /* zone de doigt plus haute que le texte */
}

.gros-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 44px; }

/* ---------------------------------------------------------------- dossiers et fichiers */

.dossier { margin-bottom: 40px; }
.dossier h2 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 14px;
  font: 700 12px/1.35 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--encre);
}
.dossier h2 .nom-dossier { overflow-wrap: anywhere; }
.dossier h2 .meta { font-weight: 400; opacity: 0.75; white-space: nowrap; }

.ligne {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 0;
  border-bottom: 1.5px solid var(--encre);
  transition: opacity 0.2s;
}
.ligne .nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ligne .taille { opacity: 0.75; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; min-width: 5ch; }
.ligne .actions { display: flex; gap: 8px; }
.ligne.part { opacity: 0.25; pointer-events: none; }
.ligne.part .nom { text-decoration: line-through; }

/* Les deux actions de chaque fichier, bien visibles : un aplat noir pour télécharger, un
   cadre épais pour supprimer. */
.act {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  font: 700 12px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid var(--encre);
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  touch-action: manipulation;
}
.act.dl { background: var(--encre); color: var(--fond); }
.act.rm { background: transparent; color: var(--encre); }

.vide { padding: 56px 0; font-size: 14px; max-width: 40ch; }

/* ---------------------------------------------------------------- onglets */

.onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 26px; }
.onglet {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 12px 18px;
  border: 2px solid var(--encre); color: var(--encre); text-decoration: none;
  font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: 0.04em;
  touch-action: manipulation;
}
.onglet[aria-selected="true"] { background: var(--encre); color: var(--fond); }
.onglet .compte { font-weight: 400; opacity: 0.7; }

.onglets { grid-template-columns: repeat(3, 1fr); }

/* ---------------------------------------------------------------- chercher (slskd) */

/* Sur cet onglet, le titre se fait petit : l'écran est pour slskd. */
body.compact .titre { font-size: clamp(56px, 12vw, 84px); margin: 12px 0 12px; }
body.compact .onglets { margin-bottom: 12px; }
body.compact .page { padding-bottom: max(12px, env(safe-area-inset-bottom)); }

.vue-chercher iframe {
  display: block;
  width: 100%;
  height: 70vh; /* corrigé par app.js à la hauteur restante */
  border: 3px solid var(--encre);
  background: #1b1c1d; /* le fond de slskd, pendant qu'il charge */
}

/* ---------------------------------------------------------------- partage */

.depot {
  border: 3px dashed var(--encre);
  padding: clamp(24px, 5vw, 44px) clamp(16px, 4vw, 32px);
  text-align: center;
  margin-bottom: 18px;
  transition: background 0.15s;
}
/* Un fichier survole la zone : elle passe en négatif. */
.depot.survol { background: var(--encre); color: var(--fond); }
.depot.survol .bloc.plein { background: var(--fond); color: var(--encre); }
.depot.survol .bloc.contour { border-color: var(--fond); color: var(--fond); }
.depot-titre { font: 400 clamp(36px, 7vw, 64px)/1 var(--affiche); text-transform: uppercase; margin-bottom: 10px; }
.depot-aide { font-size: 12px; margin: 0 auto 20px; max-width: 52ch; }
.depot-boutons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.depot-boutons .bloc { justify-content: center; min-width: 240px; }

/* Ordinateur : glisser-déposer et choix d'un dossier. Écran tactile : un seul gros bouton,
   puisque Safari sur iPhone ne sait pas choisir un dossier. */
.mobile { display: none; }
@media (pointer: coarse) {
  .ordi { display: none !important; }
  .mobile { display: inline; }
}

.rangement { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.rangement input {
  font: 700 16px var(--mono); letter-spacing: 0.04em; color: var(--encre);
  background: transparent; border: 2px solid var(--encre); border-radius: 0;
  padding: 14px 16px; min-height: 56px; -webkit-appearance: none; appearance: none;
}
.rangement input::placeholder { color: var(--encre); opacity: 0.55; }
.rangement-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.message { font-weight: 700; text-transform: uppercase; font-size: 12px; min-height: 1.5em; margin-bottom: 14px; }

.envois { margin-bottom: 40px; }
.envois h2, #vue-partager .dossier h2 {
  display: flex; justify-content: space-between; gap: 12px;
  font: 700 12px/1.35 var(--mono); text-transform: uppercase; letter-spacing: 0.04em;
  padding-bottom: 10px; border-bottom: 3px solid var(--encre);
}
.envois h2 .meta, #vue-partager .dossier h2 .meta { font-weight: 400; opacity: 0.75; }
.envoi { padding: 10px 0; border-bottom: 1.5px solid var(--encre); font-size: 12px; }
.envoi .haut { display: flex; justify-content: space-between; gap: 12px; }
.envoi .haut .nom { min-width: 0; overflow-wrap: anywhere; }
.envoi .haut .etat { white-space: nowrap; text-transform: uppercase; }
.envoi.attente { opacity: 0.55; }
.envoi.echec .etat { font-weight: 700; }
.barre-progression { height: 10px; border: 1.5px solid var(--encre); margin-top: 6px; }
.barre-progression i { display: block; height: 100%; width: 0; background: var(--encre); transition: width 0.2s linear; }

.album {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px 16px;
  padding: 10px 0; border-bottom: 1.5px solid var(--encre);
}
.album .nom { min-width: 0; overflow-wrap: anywhere; font-size: 13px; text-transform: uppercase; }
.album .nom .meta { opacity: 0.7; text-transform: none; }
.album .taille { opacity: 0.75; font-size: 12px; white-space: nowrap; }
.album.part { opacity: 0.25; pointer-events: none; }
.erreur { font-size: 12px; min-height: 1.5em; font-weight: 700; text-transform: uppercase; }

/* ---------------------------------------------------------------- connexion */

.connexion {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) var(--marge) max(24px, env(safe-area-inset-bottom));
}
.porte { width: min(420px, 100%); display: flex; flex-direction: column; gap: 10px; }
.porte input {
  font: 700 16px var(--mono); /* 16 px : sous ce seuil, Safari zoome sur le champ */
  letter-spacing: 0.04em;
  color: var(--encre);
  background: transparent;
  border: 2px solid var(--encre);
  border-radius: 0;
  padding: 14px 16px;
  min-height: 56px;
  -webkit-appearance: none;
  appearance: none;
}
.porte input::placeholder { color: var(--encre); opacity: 0.55; }
.porte input:focus { outline: 3px solid var(--encre); outline-offset: 2px; }

/* ---------------------------------------------------------------- téléphone */

@media (max-width: 640px) {
  .titre { margin: 18px 0 12px; }
  .chapo { margin-bottom: 22px; }
  .gros-boutons { grid-template-columns: 1fr; gap: 10px; margin-bottom: 36px; }
  .bloc { min-height: 58px; }

  .dossier h2 { grid-template-columns: auto 1fr; }
  .dossier h2 .meta { grid-column: 2; }

  /* Nom et taille sur une ligne, les deux boutons dessous, chacun la moitié de la largeur
     et 48 px de haut : assez pour le pouce. */
  .ligne { grid-template-columns: 1fr auto; padding: 12px 0; }
  .ligne .nom { white-space: normal; overflow-wrap: anywhere; }
  .ligne .actions { grid-column: 1 / -1; }
  .ligne .actions .act { flex: 1; min-height: 48px; }

  /* Trois onglets sur 343 px : le pictogramme au-dessus du mot, sans crochets ni compteur
     sur la même ligne. */
  .onglets { gap: 6px; margin-bottom: 22px; }
  .onglet {
    flex-direction: column; justify-content: center; gap: 2px;
    padding: 8px 4px; font-size: 11px; letter-spacing: 0.02em; text-align: center;
  }
  .onglet .compte { font-size: 10px; }
  body.compact .onglets { margin-bottom: 10px; }
  /* Sur « Chercher », le résumé des fichiers n'a pas sa place : une ligne de plus pour slskd. */
  body.compact #resume { display: none; }
  body.compact .barre { justify-content: flex-end; }
  .depot-boutons .bloc { min-width: 0; width: 100%; }
  .album { grid-template-columns: 1fr auto; padding: 12px 0; }
  .album .act { grid-column: 1 / -1; min-height: 48px; }
}