/* ══════════════════════════════════════════════════════
   Randozone — Profil utilisateur (Bootstrap 5)
   user/page-bs5.php + user/profil/user-1-bs5.php
   ══════════════════════════════════════════════════════ */

/* ── Tokens profil ── */
/* Les couleurs partagées vivent dans rz-bs5.css ; ici on n'a que des alias
   vers --rz-* (zéro littéral dupliqué) + quelques couleurs propres au profil. */
:root {
  --upro-primary:      var(--rz-primary);
  --upro-primary-dark: var(--rz-primary-dark);
  --upro-line:         var(--rz-border);
  --upro-surf:         var(--rz-surface);
  --upro-surf2:        var(--rz-surface-2);
  --upro-ink:          var(--rz-ink);
  --upro-soft:         var(--rz-inksoft);

  /* Échelle de teintes primaire (mutualisée) */
  --upro-pri-bg:    var(--rz-primary-bg);
  --upro-pri-line:  var(--rz-primary-line);
  --upro-pri-hair:  var(--rz-primary-hair);

  /* Pastilles catégories → palette sémantique partagée */
  --upro-easy:      var(--rz-easy);    --upro-easy-bg: var(--rz-easy-bg);
  --upro-hard:      var(--rz-hard);    --upro-hard-bg: var(--rz-hard-bg);
  --upro-gold-ink:  var(--rz-amber);   --upro-gold-bg: var(--rz-amber-bg); /* activités */
  --upro-warn-ink:  var(--rz-amber);   --upro-warn-bg: var(--rz-amber-bg); /* adresses  */

  /* Or décoratif (pastille rôle + icône total) — propre au profil */
  --upro-gold:        oklch(0.74 0.13 75);
  --upro-gold-dot:    #3a2c00;

  /* Alerte admin (composant local) */
  --upro-danger:      var(--rz-danger);
  --upro-danger-bg:   #fff5f5;
  --upro-danger-line: #fca5a5;
  --upro-danger-ink:  #991b1b;

  /* Marque & image de couverture — propres au profil */
  --upro-fb:          #3b5998;
  --upro-cover-1:     #1a4a7a;
  --upro-cover-2:     #0e2d4f;

  /* Voile sombre (mutualisé) */
  --upro-shadow-rgb:  var(--rz-veil-rgb);
}

/* ── Hero profil ── */
.upro-hero { background:var(--upro-surf); border:1px solid var(--upro-line); border-radius:20px; overflow:hidden; margin-bottom:.85rem; }
.upro-cover { position:relative; height:200px; background:linear-gradient(135deg,var(--upro-cover-1) 0%,var(--upro-cover-2) 100%); background-size:cover; background-position:center 40%; }
.upro-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(var(--upro-shadow-rgb),.04) 0%,rgba(var(--upro-shadow-rgb),.55) 100%); }
.upro-credit { position:absolute; bottom:.5rem; right:.75rem; z-index:2; font-size:.6rem; color:rgba(255,255,255,.8); background:rgba(var(--upro-shadow-rgb),.38); backdrop-filter:blur(3px); border-radius:999px; padding:.15rem .5rem; }
.upro-hero-body { position:relative; padding:0 1.4rem 1.3rem; }

.upro-avatar { position:relative; width:110px; height:110px; border-radius:22px; margin-top:-55px; background:linear-gradient(150deg,var(--upro-primary) 0%,var(--upro-primary-dark) 100%); border:5px solid var(--upro-surf); box-shadow:0 10px 28px -14px rgba(var(--upro-shadow-rgb),.5); display:grid; place-items:center; color:#fff; font-family:'Work Sans',system-ui,sans-serif; font-weight:700; font-size:2.2rem; letter-spacing:.02em; z-index:2; }
.upro-role-dot { position:absolute; right:-4px; bottom:-4px; width:28px; height:28px; border-radius:50%; background:var(--upro-gold); border:4px solid var(--upro-surf); display:grid; place-items:center; color:var(--upro-gold-dot); font-size:.7rem; }

.upro-id-row { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.7rem; margin-top:.75rem; }
.upro-name { font-weight:700; font-size:clamp(1.45rem,3.5vw,2rem); line-height:1.05; color:var(--upro-ink); margin:0; }
.upro-handle { font-size:.88rem; color:var(--upro-soft); margin-top:.1rem; }
.upro-handle strong { color:var(--upro-primary-dark); font-weight:700; }
.upro-role-badge { display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--upro-primary-dark); background:var(--upro-pri-bg); border:1px solid var(--upro-pri-line); border-radius:999px; padding:.26rem .62rem; margin-top:.5rem; }
.upro-hero-actions { display:flex; gap:.45rem; flex-shrink:0; }
.upro-btn-ghost { font-size:.78rem; font-weight:600; color:var(--upro-ink); background:var(--upro-surf); border:1px solid var(--upro-line); border-radius:9px; padding:.42rem .85rem; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:.38rem; transition:border-color .14s,color .14s; }
.upro-btn-ghost:hover { border-color:var(--upro-primary); color:var(--upro-primary); }

.upro-meta-row { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--upro-line); }
.upro-meta-row .m { display:inline-flex; align-items:center; gap:.38rem; font-size:.83rem; color:var(--upro-soft); }
.upro-meta-row .m .rz-ico { color:var(--upro-primary); font-size:.88rem; }
.upro-meta-row .m a { color:inherit; text-decoration:none; }
.upro-meta-row .m a:hover { color:var(--upro-primary); }
.upro-socials { display:flex; gap:.38rem; margin-left:auto; }
.upro-soc { width:31px; height:31px; border-radius:9px; display:grid; place-items:center; background:var(--upro-surf2); border:1px solid var(--upro-line); color:var(--upro-soft); text-decoration:none; font-size:.85rem; transition:all .14s; }
.upro-soc:hover { color:var(--upro-primary); border-color:var(--upro-primary); background:var(--upro-pri-bg); }

/* ── Stats strip ── */
.upro-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; margin-bottom:1.5rem; }
@media (min-width:640px) { .upro-stats { grid-template-columns:repeat(8,1fr); } }
.upro-stat-cell { background:var(--upro-surf); border:1px solid var(--upro-line); border-radius:13px; padding:.75rem .55rem; text-align:center; transition:border-color .14s,transform .14s; }
.upro-stat-cell:hover { border-color:var(--upro-pri-hair); transform:translateY(-2px); }
.upro-stat-cell .v { font-weight:700; font-size:1.35rem; line-height:1; color:var(--upro-ink); }
.upro-stat-cell .k { font-size:.58rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--upro-soft); margin-top:.28rem; display:flex; align-items:center; justify-content:center; gap:.28rem; }
.upro-stat-cell .k .rz-ico { color:var(--upro-primary); font-size:.68rem; }
.upro-stat-cell.total { background:linear-gradient(150deg,var(--upro-primary) 0%,var(--upro-primary-dark) 100%); border-color:transparent; grid-column:span 4; }
@media (min-width:640px) { .upro-stat-cell.total { grid-column:span 1; } }
.upro-stat-cell.total .v { color:#fff; }
.upro-stat-cell.total .k { color:rgba(255,255,255,.84); }
.upro-stat-cell.total .k .rz-ico { color:var(--upro-gold); }
.upro-stat-cell.danger .v { color:var(--upro-danger); }

/* ── Panels ── */
.upro-panel { background:var(--upro-surf); border:1px solid var(--upro-line); border-radius:16px; padding:1.3rem 1.4rem; }
.upro-panel + .upro-panel { margin-top:1.3rem; }
.upro-p-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.95rem; }
.upro-p-head .ic { width:31px; height:31px; border-radius:9px; display:grid; place-items:center; background:var(--upro-pri-bg); color:var(--upro-primary-dark); font-size:.9rem; flex-shrink:0; }
.upro-p-head h2 { font-weight:700; font-size:1.15rem; letter-spacing:-.01em; margin:0; color:var(--upro-ink); }
.upro-p-head .count { margin-left:auto; font-size:.7rem; font-weight:500; color:var(--upro-soft); white-space:nowrap; }

/* ── Prose (À propos) ── */
.upro-prose { font-size:.95rem; line-height:1.7; color:var(--upro-ink); }
.upro-prose p { margin:0 0 .75rem; }
.upro-prose p:last-child { margin-bottom:0; }
.upro-prose h2 { font-size:1.05rem; font-weight:700; margin:1.3rem 0 .5rem; padding-left:.6rem; border-left:3px solid var(--upro-primary); color:var(--upro-ink); }
.upro-prose table.table { width:100%; font-size:.88rem; border-collapse:collapse; }
.upro-prose table.table td { padding:.38rem .5rem; border-bottom:1px solid var(--upro-line); vertical-align:top; }
.upro-prose table.table td:first-child { white-space:nowrap; color:var(--upro-soft); font-weight:600; min-width:90px; max-width:160px; }
.upro-prose ul { padding-left:1.2rem; }
.upro-prose ul li { margin-bottom:.28rem; }
.upro-prose a { color:var(--upro-primary); }

/* Localisation strip */
.upro-loc { display:flex; align-items:center; gap:.45rem; font-size:.87rem; color:var(--upro-soft); background:var(--upro-surf2); border:1px solid var(--upro-line); border-radius:10px; padding:.5rem .8rem; margin-bottom:1.3rem; }
.upro-loc .rz-ico { color:var(--upro-primary); flex-shrink:0; }

/* ── Timeline parcours ── */
.upro-tl { position:relative; padding-left:1.55rem; }
.upro-tl::before { content:""; position:absolute; left:5px; top:.4rem; bottom:.4rem; width:2px; background:var(--upro-line); }
.upro-tl .ev { position:relative; padding-bottom:1.15rem; }
.upro-tl .ev:last-child { padding-bottom:0; }
.upro-tl .ev::before { content:""; position:absolute; left:-1.55rem; top:.3rem; width:13px; height:13px; border-radius:50%; background:var(--upro-surf); border:3px solid var(--upro-primary); box-shadow:0 0 0 3px var(--upro-pri-bg); }
.upro-tl .ev.hl::before { background:var(--upro-primary); }
.upro-tl .yr { font-family:monospace; font-size:.73rem; font-weight:600; color:var(--upro-primary-dark); letter-spacing:.02em; margin-bottom:.14rem; }
.upro-tl .tx { font-size:.92rem; line-height:1.58; color:var(--upro-ink); }
.upro-tl .tx a { color:var(--upro-primary-dark); font-weight:600; border-bottom:1px solid var(--upro-pri-line); text-decoration:none; }
.upro-tl .tx a:hover { color:var(--upro-primary); border-bottom-color:var(--upro-primary); }
.upro-tl .tx .mono { font-family:monospace; }

/* ── Tabs contributions ── */
.upro-tabs { display:flex; flex-wrap:wrap; gap:.32rem; margin-bottom:1rem; }
.upro-tab { display:inline-flex; align-items:center; gap:.38rem; font-size:.77rem; font-weight:600; color:var(--upro-soft); background:var(--upro-surf2); border:1px solid var(--upro-line); border-radius:999px; padding:.38rem .75rem; cursor:pointer; transition:all .14s; line-height:1; }
.upro-tab .n { font-size:.63rem; font-weight:500; opacity:.78; font-family:monospace; }
.upro-tab:hover { border-color:var(--upro-pri-hair); color:var(--upro-ink); }
.upro-tab.active { color:#fff; background:var(--upro-primary); border-color:var(--upro-primary); }
.upro-tpanel { display:none; }
.upro-tpanel.active { display:block; }
.upro-rows { display:flex; flex-direction:column; }
.upro-crow { display:flex; align-items:center; gap:.8rem; padding:.7rem .32rem; border-bottom:1px solid var(--upro-line); border-radius:7px; text-decoration:none; color:var(--upro-ink); transition:background .14s; }
.upro-crow:last-child { border-bottom:none; }
.upro-crow:hover { background:var(--upro-surf2); color:var(--upro-primary); }
.upro-crow .cdate { font-size:.69rem; font-weight:500; color:var(--upro-soft); width:72px; flex-shrink:0; font-family:monospace; }
.upro-crow .cic { width:27px; height:27px; border-radius:8px; display:grid; place-items:center; font-size:.78rem; flex-shrink:0; }
.upro-crow .ctitle { font-size:.89rem; font-weight:600; line-height:1.3; flex:1; min-width:0; }
.upro-crow .cgo { color:var(--upro-soft); font-size:.72rem; flex-shrink:0; opacity:0; transition:opacity .14s; }
.upro-crow:hover .cgo { opacity:1; }
.upro-tfoot { margin-top:.8rem; }
.upro-more { display:inline-flex; align-items:center; gap:.38rem; font-size:.79rem; font-weight:600; color:var(--upro-primary-dark); background:var(--upro-pri-bg); border:1px solid var(--upro-pri-line); border-radius:9px; padding:.42rem .82rem; text-decoration:none; transition:all .14s; }
.upro-more:hover { background:var(--upro-primary); color:#fff; border-color:var(--upro-primary); }
.upro-empty { font-size:.88rem; color:var(--upro-soft); font-style:italic; padding:.8rem 0; }
@media (max-width:490px) { .upro-crow .cdate { width:56px; font-size:.63rem; } }

/* ── Couleurs catégories ── */
.b-gps  { background:var(--upro-easy-bg); color:var(--upro-easy); }
.b-fiche{ background:var(--upro-hard-bg); color:var(--upro-hard); }
.b-topo { background:var(--upro-pri-bg);  color:var(--upro-primary-dark); }
.b-act  { background:var(--upro-gold-bg); color:var(--upro-gold-ink); }
.b-art  { background:var(--upro-pri-bg);  color:var(--upro-primary-dark); }
.b-adr  { background:var(--upro-warn-bg); color:var(--upro-warn-ink); }
.b-lien { background:var(--upro-easy-bg); color:var(--upro-easy); }

/* ── Galerie photos ── */
.upro-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:.48rem; }
@media (min-width:480px) { .upro-gallery { grid-template-columns:repeat(4,1fr); } }
@media (min-width:800px) { .upro-gallery { grid-template-columns:repeat(6,1fr); } }
.upro-gphoto { position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--upro-surf2); display:block; }
.upro-gphoto img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.upro-gphoto:hover img { transform:scale(1.07); }
.upro-gphoto::after { content:""; position:absolute; inset:0; border:1px solid rgba(var(--upro-shadow-rgb),.06); border-radius:10px; }
.upro-gphoto .zoom { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:.95rem; background:rgba(var(--upro-shadow-rgb),.3); opacity:0; transition:opacity .14s; }
.upro-gphoto:hover .zoom { opacity:1; }

/* ── Sidebar ── */
.upro-scard { background:var(--upro-surf); border:1px solid var(--upro-line); border-radius:15px; padding:1.05rem 1.15rem; }
.upro-scard + .upro-scard { margin-top:.95rem; }
.upro-scard-title { font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--upro-soft); margin:0 0 .82rem; display:flex; align-items:center; gap:.42rem; }
.upro-scard-title .rz-ico { color:var(--upro-primary); font-size:.82rem; }
.upro-coord { display:flex; flex-direction:column; }
.upro-coord .li { display:flex; align-items:center; gap:.62rem; padding:.52rem 0; border-bottom:1px solid var(--upro-line); }
.upro-coord .li:last-child { border-bottom:none; }
.upro-coord .li .rz-ico { color:var(--upro-primary); font-size:.9rem; width:.9rem; flex-shrink:0; }
.upro-coord .li .lab { font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--upro-soft); }
.upro-coord .li .val { font-size:.88rem; font-weight:600; color:var(--upro-ink); margin-top:.03rem; }
.upro-coord .li .val a { color:var(--upro-ink); text-decoration:none; }
.upro-coord .li .val a:hover { color:var(--upro-primary); }
.upro-coord .li .val.danger { color:var(--upro-danger); }
.upro-fb-list { display:flex; flex-direction:column; }
.upro-fb-list a { display:flex; align-items:center; gap:.58rem; padding:.56rem 0; font-size:.83rem; font-weight:500; color:var(--upro-ink); border-bottom:1px solid var(--upro-line); text-decoration:none; transition:color .14s; }
.upro-fb-list a:last-child { border-bottom:none; }
.upro-fb-list a:hover { color:var(--upro-primary); }
.upro-fb-list a .ico-fb { color:var(--upro-fb); font-size:.95rem; flex-shrink:0; }
.upro-fb-list a .ar { margin-left:auto; color:var(--upro-soft); font-size:.68rem; }
.upro-follow-card { background:var(--upro-pri-bg); border-color:var(--upro-pri-line); }
.upro-follow-desc { font-size:.83rem; line-height:1.5; color:var(--upro-soft); margin:0 0 .82rem; }
.upro-social-row { display:flex; gap:.38rem; flex-wrap:wrap; }
.upro-soc-btn { width:31px; height:31px; border-radius:9px; display:grid; place-items:center; background:var(--upro-surf2); border:1px solid var(--upro-line); color:var(--upro-soft); text-decoration:none; font-size:.85rem; transition:all .14s; }
.upro-soc-btn:hover { color:var(--upro-primary); border-color:var(--upro-primary); background:var(--upro-pri-bg); }

/* ── Admin: bouton suppression ── */
.upro-admin-strip { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; padding:.55rem .75rem; background:var(--upro-danger-bg); border:1px solid var(--upro-danger-line); border-radius:9px; font-size:.84rem; color:var(--upro-danger-ink); }