/* WELD VISION — styles propres à l'onglet Portfolio.
   Chargé après styles.css et calculs.css, dont il reprend les jetons
   (--navy-900, --accent, --radius…). Rien ici ne redéfinit une classe
   existante, sauf la barre du bas, qui passe à six onglets. */

/* ── Barre à six onglets ─────────────────────────────────────────
   Six libellés sur 320-375 px : on resserre encore et on autorise le libellé
   à déborder légèrement de sa colonne plutôt que de le tronquer. */
.bottomnav { padding-left: 2px; padding-right: 2px; }
.bottomnav button { font-size: 9px; letter-spacing: -0.2px; padding: 7px 0; min-width: 0; }
.bottomnav button svg { width: 21px; height: 21px; }
@media (max-width: 340px) {
  .bottomnav button { font-size: 8.5px; letter-spacing: -0.3px; }
  .bottomnav button svg { width: 20px; height: 20px; }
}

/* ── Grille des réalisations ─────────────────────────────────────
   Cases carrées, recadrées au centre : la grille montre la matière, le
   détail montre la photo entière. */
.pf-compte { margin: -6px 0 10px; }
.pf-etat:empty { display: none; }
.pf-etat { margin-top: 8px; }

.pf-grille {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px;
}
@media (max-width: 340px) { .pf-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 560px) { .pf-grille { grid-template-columns: repeat(4, 1fr); } }

.pf-case {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; overflow: hidden;
  border: none; border-radius: var(--radius-sm); background: #0b1626; cursor: pointer;
}
.pf-case img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.pf-case:active img { transform: scale(.97); }
.pf-case-txt {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px;
  font-size: 11px; font-weight: 700; line-height: 1.2; color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(8, 20, 32, .85));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pf-vide { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 14px; line-height: 1.5; }
.pf-vide b { color: var(--navy-900); font-size: 15px; }
.pf-vide-ic { color: var(--accent-deep); }
.pf-vide-ic svg { width: 40px; height: 40px; }

/* ── Détail d'une photo ──────────────────────────────────────────
   Le cadre prend le format réel de l'image (aspect-ratio posé en ligne), pour
   que la page ne saute pas au chargement ; plafonné à 70 % de l'écran. */
.pf-grand {
  margin: 4px 0 10px; width: 100%; max-height: 70vh; border-radius: var(--radius); overflow: hidden;
  background: #0b1626; display: flex; align-items: center; justify-content: center;
}
.pf-grand img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pf-grand .ph { color: #3f5a78; }
.pf-grand .ph svg { width: 48px; height: 48px; }

.pf-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.pf-nav .btn { min-height: var(--tap); font-size: 14px; padding: 8px 10px; }
.pf-nav .hint { white-space: nowrap; }

.pf-notes textarea {
  width: 100%; min-height: 96px; padding: 12px; resize: vertical; font-family: inherit; font-size: 16px; line-height: 1.45;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
.pf-notes textarea:focus { outline: none; border-color: var(--accent-deep); box-shadow: var(--focus); }

@media (prefers-reduced-motion: reduce) { .pf-case img { transition: none; } }