/* Réalisations d'un membre — 24/09/2026 (lot H, btob : « un portfolio, des photos de même taille, jusqu'à 20 »).
   Page publique afterlogin/spec-user/profilephotos.php (pr-*) et page du propriétaire afterlogin/mainprofile/add-photos.php
   (pr-* et rl-*). Écrit à la main : output.css (Tailwind) est figé. Le fond (photo floutée sous un voile) vient de la
   charte (assets/css/charte-fond.css) ; ici, des cartes blanches et les textes posés sur le fond en blanc. */

/* Les deux pages sont dans la liste des pages qui compensent elles-mêmes l'en-tête fixe du téléphone (navbar.php) */
.pr-page{max-width:1080px;margin:0 auto;padding:calc(var(--btb-h-entete-mobile,52px) + 10px) 16px 56px;box-sizing:border-box}
@media (min-width:1024px){.pr-page{padding-top:26px}}
.pr-retour{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;font-size:15px;text-decoration:none}
.pr-retour:hover{text-decoration:underline}
.pr-tete{display:flex;align-items:center;gap:12px;margin:2px 0 14px;min-width:0}
.pr-tete > div{min-width:0}
.pr-avatar{width:56px;height:56px;border-radius:999px;object-fit:cover;border:2px solid rgba(255,255,255,.85);background:#fff;flex:none}
.pr-tete h1{margin:0;font-size:22px;line-height:1.2;font-weight:800;overflow-wrap:anywhere}
.pr-tete p{margin:3px 0 0;font-size:14px;font-weight:600}
@media (min-width:640px){.pr-tete h1{font-size:28px}.pr-avatar{width:64px;height:64px}}

.pr-carte{background:#fff;border-radius:14px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);color:#10131b}
@media (min-width:640px){.pr-carte{padding:14px}}
.pr-carte + .pr-carte{margin-top:14px}

/* La grille : toutes les vignettes au même format (4:3, recadrées), 2 colonnes au téléphone, 3 puis 4 */
.pr-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:640px){.pr-grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}
@media (min-width:1024px){.pr-grille{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pr-case{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#e3e9f1}
.pr-vign{display:block;width:100%;height:100%;border:0;padding:0;margin:0;background:transparent;cursor:zoom-in}
.pr-vign img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .2s}
.pr-vign:hover img{transform:scale(1.04)}
.pr-vign:focus-visible{outline:3px solid #8abf56;outline-offset:-3px}
@media (prefers-reduced-motion:reduce){.pr-vign img{transition:none}}
/* Une photo qui ne se charge pas : la case reste, grise, sans icône cassée */
.pr-casse .pr-vign img{visibility:hidden}
.pr-casse .pr-vign{cursor:default}
/* « Télécharger » : le propriétaire seul (la page ne le rend pas pour un autre lecteur) */
.pr-dl{position:absolute;right:6px;bottom:6px;width:44px;height:44px;border-radius:999px;background:rgba(16,19,27,.72);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:16px}
.pr-dl:hover,.pr-dl:focus-visible{background:#0c376b;color:#fff}
.pr-ajout{aspect-ratio:4/3;border:2px dashed #c9d5e4;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#0c376b;font-weight:800;font-size:14px;line-height:1.25;text-align:center;padding:8px;text-decoration:none;background:#f6f9fc}
.pr-ajout small{color:#67748a;font-weight:700;font-size:12.5px}
.pr-ajout:hover,.pr-ajout:focus-visible{border-color:#0c376b;color:#0c376b}
.pr-vide{padding:22px 12px;text-align:center;color:#2b3442;font-weight:600;margin:0}
.pr-vide a{color:#0c376b;text-decoration:underline}

/* Page du propriétaire (add-photos.php) */
.rl-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px;margin:2px 0 14px}
.rl-tete h1{margin:0;font-size:24px;line-height:1.2;font-weight:800}
.rl-tete p{margin:3px 0 0;font-size:14px;font-weight:600}
.rl-voir{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:10px;background:#fff;color:#0c376b;font-weight:800;font-size:14px;text-decoration:none}
.rl-voir:hover{background:#e6eef8}
.rl-carte h2{margin:2px 2px 10px;font-size:17px;font-weight:800;color:#10131b;display:flex;align-items:center;gap:8px}
.rl-carte h2 .cnt{font-size:13px;font-weight:800;color:#0c376b;background:#e6eef8;border-radius:999px;padding:2px 9px}
.rl-msg{background:#fff;border-left:4px solid #0c376b;border-radius:10px;padding:10px 14px;margin:0 0 14px;color:#10131b;font-weight:600;font-size:14px;overflow-wrap:anywhere}
.rl-fichier{display:block;width:100%;box-sizing:border-box;min-height:48px;border:2px dashed #c9d5e4;border-radius:10px;padding:8px;background:#f6f9fc;font-size:14px;color:#2b3442;cursor:pointer}
.rl-fichier::file-selector-button{min-height:36px;margin-right:10px;border:0;border-radius:8px;padding:0 14px;background:#0c376b;color:#fff;font-weight:700;cursor:pointer}
.rl-aide{margin:8px 2px 0;font-size:13px;color:#4b5563}
.rl-erreur{margin:8px 0 0;padding:8px 12px;border-radius:8px;background:#fdf0ef;color:#95322b;font-size:14px;font-weight:700}
.rl-choix{margin:8px 2px 0;font-size:14px;font-weight:700;color:#1f7a3a}
.rl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin-top:12px;padding:0 20px;border:0;border-radius:10px;background:#0c376b;color:#fff;font-weight:800;font-size:15px;cursor:pointer}
.rl-btn:hover{background:#0a2d58}
.rl-btn[disabled]{opacity:.65;cursor:wait}
.rl-plein{margin:0;padding:10px 12px;border-radius:8px;background:#fff8e6;color:#7a5a10;font-weight:700;font-size:14px}
.rl-item{display:flex;flex-direction:column;gap:6px;min-width:0}
.rl-suppr{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;border:1px solid #f1c9c5;border-radius:8px;background:#fff;color:#b42318;font-weight:700;font-size:13.5px;cursor:pointer}
.rl-suppr:hover{background:#fdf0ef}