/* ═══════════════════════════════════════════════════════════════════════
   reseau-page.css — [v1859] Panel Réseau (admin groupement)
   Mock Margot handoff-panel-reseau, classes renommées rz- (anti-collision :
   .grid/.btn/.pill/.nav/.alert/.k/.v du mock existent dans le CRM), scopé
   #page-reseau. Tokens --rz-ag1..5 déclinés sur les 4 thèmes.
   ═══════════════════════════════════════════════════════════════════════ */
#page-reseau{ --rz-ag1:#6b5cf5; --rz-ag2:#3d7fc2; --rz-ag3:#22a06b; --rz-ag4:#c08a2e; --rz-ag5:#d64560; }
[data-theme="noir"] #page-reseau,
[data-theme="donna"] #page-reseau{ --rz-ag1:#8b7bff; --rz-ag2:#5ca8ff; --rz-ag3:#4fd49a; --rz-ag4:#f0c050; --rz-ag5:#ff6680; }
/* ardoise = palette light (fond clair) */

/* [v1889] Gabarit aligné sur les autres pages du CRM (Anthony) :
   - padding latéral 24px comme #page-dashboard / #page-clients
   - respiration haute 26px (le header fixe est déjà compensé par body{padding-top:80px})
   - pleine largeur à gauche : plus de centrage max-width qui décalait la page
   - titre 24px display, comme les en-têtes des autres pages */
#page-reseau .rz-wrap{ max-width:1320px; margin:0; padding:18px 24px 60px; } /* [v1890] le hero natif porte la respiration haute */
#page-reseau .rz-btn{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:13px; font-weight:600; padding:9px 14px; border-radius:var(--radius,4px); border:1px solid transparent; cursor:pointer; }
#page-reseau .rz-btn svg{ width:15px; height:15px; }
/* [v1892] Bouton primaire ENCRE, comme tous les boutons donna. Le b1889 l'avait
   passé en accent violet pour la page ; le hero natif (b1890) fournit désormais
   son propre bouton, et .rz-pri ne sert plus qu'à la MODAL — où le violet
   détonnait (capture Anthony). Retour à l'encre. */
#page-reseau .rz-btn.rz-pri{ background:var(--text); color:var(--bg); border-radius:10px; padding:9px 16px; white-space:nowrap; transition:filter .15s, transform .15s; }
#page-reseau .rz-btn.rz-pri:hover{ filter:brightness(1.15); transform:translateY(-1px); }
#page-reseau .rz-btn.rz-sec{ background:var(--s2); color:var(--text); border-color:var(--border); }

/* badges type */
#page-reseau .rz-tbadge{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; letter-spacing:.02em; padding:2px 8px; border-radius:99px; }
#page-reseau .rz-tbadge svg{ width:11px; height:11px; }
#page-reseau .rz-tbadge.rz-succ{ color:var(--accent); background:var(--accent-dim); border:1px solid color-mix(in srgb,var(--accent) 24%,transparent); }
#page-reseau .rz-tbadge.rz-fran{ color:var(--tiede,#c08a2e); background:color-mix(in srgb,var(--tiede,#c08a2e) 12%,transparent); border:1px solid color-mix(in srgb,var(--tiede,#c08a2e) 28%,transparent); }

/* grille agences */
@media(max-width:900px){ }
#page-reseau .rz-dir{ display:flex; align-items:center; gap:9px; font-size:12.5px; }
#page-reseau .rz-av{ width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font-size:10px; font-weight:700; color:#fff; flex-shrink:0; }
#page-reseau .rz-dir .rz-todo{ color:var(--tiede,#c08a2e); font-weight:600; }

/* carte */
#page-reseau .rz-maprow{ display:grid; grid-template-columns:1fr 230px; gap:16px; }
@media(max-width:900px){ #page-reseau .rz-maprow{ grid-template-columns:1fr; } }
#page-reseau .rz-mapbox{ position:relative; min-height:380px; border:1px solid var(--border); border-radius:var(--radius-lg,8px); overflow:hidden; background:var(--s2); display:grid; place-items:center; }
@media(min-width:901px){ #page-reseau .rz-mapbox{ min-height:600px; } } /* [v1873] carte plus grande (Anthony) */
#page-reseau .rz-legend{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg,8px); padding:12px; }
#page-reseau .rz-legend .rz-lt{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:9px; }
#page-reseau .rz-lg{ display:flex; align-items:center; gap:8px; padding:6px 5px; font-size:12.5px; border-radius:var(--radius,4px); min-width:0; } /* [v1871] anti-troncature */
#page-reseau .rz-legend{ overflow:hidden; }
#page-reseau .rz-lg .rz-sw{ width:12px; height:12px; border-radius:3px; flex-shrink:0; }
#page-reseau .rz-lg .rz-lgnm{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* table KPIs */
@media(max-width:700px){ }

/* état vide */
#page-reseau .rz-empty{ text-align:center; padding:52px 30px; }
#page-reseau .rz-empty .rz-il{ width:56px; height:56px; border-radius:15px; background:var(--accent-dim); color:var(--accent); display:grid; place-items:center; margin:0 auto 16px; }
#page-reseau .rz-empty .rz-il svg{ width:28px; height:28px; }
#page-reseau .rz-empty h2{ font-size:17px; font-weight:800; margin:0 0 7px; }
#page-reseau .rz-empty p{ font-size:13.5px; color:var(--text-dim); line-height:1.5; margin:0 auto 18px; max-width:340px; }

/* modal nouvelle agence */
#rz-ov{ position:fixed; inset:0; z-index:100085; display:none; place-items:center; padding:30px; }
#rz-ov.open{ display:grid; }
#page-reseau .rz-bd{ position:absolute; inset:0; background:rgba(20,22,31,.44); }
#page-reseau .rz-modal{ position:relative; width:460px; max-width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg,8px); box-shadow:var(--shadow-lg,0 14px 44px rgba(20,22,31,.14)); overflow:hidden; }
#page-reseau .rz-mh{ padding:18px 20px; border-bottom:1px solid var(--border); font-size:16px; font-weight:800; letter-spacing:-.02em; color:var(--text); }
#page-reseau .rz-mb{ padding:18px 20px; }
#page-reseau .rz-fld{ margin-bottom:15px; }
#page-reseau .rz-fld label{ display:block; font-size:12px; font-weight:700; color:var(--text-dim); margin-bottom:7px; }
#page-reseau .rz-fld input{ width:100%; box-sizing:border-box; font:inherit; font-size:14px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius,4px); padding:10px 12px; }
#page-reseau .rz-typ{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#page-reseau .rz-typ .rz-op{ text-align:left; padding:12px; border:1.5px solid var(--border); border-radius:var(--radius,4px); cursor:pointer; }
#page-reseau .rz-typ .rz-op.on{ border-color:var(--accent); background:var(--accent-dim); }
#page-reseau .rz-typ .rz-op b{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text); }
#page-reseau .rz-typ .rz-op b svg{ width:13px; height:13px; }
#page-reseau .rz-typ .rz-op span{ font-size:11px; color:var(--muted); display:block; margin-top:4px; line-height:1.4; }
#page-reseau .rz-warndef{ display:flex; gap:8px; align-items:flex-start; margin-top:12px; padding:9px 11px; background:color-mix(in srgb,var(--tiede,#c08a2e) 10%,transparent); border:1px solid color-mix(in srgb,var(--tiede,#c08a2e) 26%,transparent); border-radius:var(--radius,4px); font-size:11.5px; color:var(--text-dim); line-height:1.45; }
#page-reseau .rz-warndef svg{ width:14px; height:14px; color:var(--tiede,#c08a2e); flex-shrink:0; margin-top:1px; }
#page-reseau .rz-warndef b{ color:var(--text); }
#page-reseau .rz-mf{ padding:14px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:9px; background:var(--s2); }

/* ═══════════════════════════════════════════════════════════════════════
   [v1893] VUE RÉSEAU EN LISTE DENSE — mockup Margot « panel-reseau-alt ».
   Remplace la grille de cartes : encaisse 10→40 agences, chiffres alignés
   comparables, hiérarchie succursale/franchise structurelle.
   Classes préfixées rz- (le mock utilisait .row/.cell/.btn/.av/.nav/.main :
   collisions certaines avec le CRM — leçon b1859).
   ═══════════════════════════════════════════════════════════════════════ */

/* Bandeau de synthèse */
#page-reseau .rz-sumrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px; }
#page-reseau .rz-sum{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg,8px); padding:14px 16px; }
#page-reseau .rz-sum .rz-sk{ font-size:11px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:6px; }
#page-reseau .rz-sum .rz-sk svg{ width:14px; height:14px; color:var(--accent); }
#page-reseau .rz-sum .rz-sv{ font-family:var(--mono,'JetBrains Mono',monospace); font-size:23px; font-weight:600; margin-top:6px; letter-spacing:-.01em; }
#page-reseau .rz-sum .rz-sd{ font-size:11px; color:var(--text-dim); margin-top:2px; }
#page-reseau .rz-sum .rz-sv.rz-na{ color:var(--muted); font-size:19px; }

/* En-tête de colonnes */
#page-reseau .rz-rowhd{ display:grid; grid-template-columns:2.4fr 1.4fr repeat(3,1fr) 40px; gap:14px; padding:0 16px 8px; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
#page-reseau .rz-rowhd .rz-n{ text-align:right; }

/* Groupes par type */
#page-reseau .rz-grp{ margin-bottom:20px; }
#page-reseau .rz-grph{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
#page-reseau .rz-grph .rz-tt{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
#page-reseau .rz-grph .rz-cnt{ font-family:var(--mono,monospace); font-size:11px; color:var(--muted); }
#page-reseau .rz-grph .rz-bar{ flex:1; height:1px; background:var(--border); }

/* Ligne agence */
#page-reseau .rz-row{ display:grid; grid-template-columns:2.4fr 1.4fr repeat(3,1fr) 40px; align-items:center; gap:14px;
  background:var(--surface); border:1px solid var(--border); padding:13px 16px; cursor:pointer; transition:background .12s; }
#page-reseau .rz-row:hover{ background:var(--s2); }
#page-reseau .rz-row + .rz-row{ border-top:0; }
#page-reseau .rz-grp .rz-row:first-of-type{ border-radius:var(--radius-lg,8px) var(--radius-lg,8px) 0 0; }
#page-reseau .rz-grp .rz-row:last-of-type{ border-radius:0 0 var(--radius-lg,8px) var(--radius-lg,8px); }
#page-reseau .rz-rleft{ display:flex; align-items:center; gap:11px; min-width:0; }
#page-reseau .rz-lstripe{ width:3px; height:34px; border-radius:99px; flex-shrink:0; }
#page-reseau .rz-rav{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-size:11px; font-weight:700; color:#fff; flex-shrink:0; }
#page-reseau .rz-rnm{ min-width:0; }
#page-reseau .rz-rnm b{ font-size:14px; font-weight:700; letter-spacing:-.01em; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#page-reseau .rz-rnm > span{ font-size:11.5px; color:var(--muted); }
#page-reseau .rz-dir{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim); min-width:0; }
#page-reseau .rz-dir .rz-da{ width:22px; height:22px; border-radius:6px; display:grid; place-items:center; font-size:9px; font-weight:700; color:#fff; flex-shrink:0; }
#page-reseau .rz-dir .rz-todo{ color:var(--tiede,#c08a2e); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
#page-reseau .rz-cell{ text-align:right; }
#page-reseau .rz-cell .rz-cv{ font-family:var(--mono,monospace); font-size:14px; font-weight:600; }
#page-reseau .rz-cell.rz-priv .rz-cv{ color:var(--muted); }
#page-reseau .rz-cell.rz-priv svg{ width:12px; height:12px; vertical-align:-1px; color:var(--tiede,#c08a2e); }
#page-reseau .rz-cell .rz-cna{ font-family:var(--mono,monospace); font-size:14px; color:var(--muted); }
#page-reseau .rz-rchev{ color:var(--muted); text-align:right; }
#page-reseau .rz-rchev svg{ width:16px; height:16px; }

/* Badge de type inline dans le nom */
#page-reseau .rz-tb{ display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:700; padding:2px 6px; border-radius:99px; vertical-align:1px; margin-left:6px; letter-spacing:.02em; }
#page-reseau .rz-tb svg{ width:9px; height:9px; }
#page-reseau .rz-tb.rz-succ{ color:var(--accent); background:var(--accent-dim,rgba(107,92,245,.09)); }
#page-reseau .rz-tb.rz-fran{ color:var(--tiede,#c08a2e); background:color-mix(in srgb,var(--tiede,#c08a2e) 12%,transparent); }

@media(max-width:900px){
  #page-reseau .rz-sumrow{ grid-template-columns:repeat(2,1fr); }
  #page-reseau .rz-rowhd{ display:none; }
  #page-reseau .rz-row{ grid-template-columns:1fr auto; row-gap:10px; }
  #page-reseau .rz-row .rz-dir{ grid-column:1/-1; }
  #page-reseau .rz-cell{ text-align:left; }
}

/* ═══════════════════════════════════════════════════════════════════════
   [v1900] Tableau KPIs détaillé (toggle du hero, remplace l'onglet).
   ═══════════════════════════════════════════════════════════════════════ */
/* [v1902] La première colonne débordait sous « Directeur » : le nom en nowrap
   poussait le badge de type hors de sa cellule. On borne la colonne, le nom
   s'ellipse, le badge ne se comprime jamais. */
/* colonnes chiffrées : largeur stable, alignées avec leur en-tête */

/* Page Carte autonome */
#page-carte{ --rz-ag1:#6b5cf5; --rz-ag2:#3d7fc2; --rz-ag3:#22a06b; --rz-ag4:#c08a2e; --rz-ag5:#c9455e; }
#page-carte .rz-maprow{ display:grid; grid-template-columns:1fr 300px; gap:16px; }
#page-carte .rz-mapbox{ position:relative; height:640px; border:1px solid var(--border); border-radius:var(--radius-lg,8px); overflow:hidden; }
#page-carte .rz-legend{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg,8px); padding:14px; }
#page-carte .rz-lt{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
#page-carte .rz-lg{ display:flex; align-items:center; gap:9px; padding:6px 2px; }
#page-carte .rz-lgnm{ flex:1; min-width:0; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#page-carte .rz-sw{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
#page-carte .rz-btn{ font:inherit; font-size:13px; font-weight:600; padding:9px 14px; border-radius:var(--radius,4px);
  border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; }
#page-carte .rz-btn.rz-pri{ background:var(--text); color:var(--bg); border-color:transparent; border-radius:10px; }
#page-carte .rz-btn:disabled{ cursor:default; opacity:.5; }
/* [v1901] Actions empilées, pleine largeur : dans une colonne de 300px, deux
   boutons côte à côte avec un libellé long débordent. Le texte peut passer à
   la ligne plutôt que forcer la largeur. */
#page-carte .rz-cbtns{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
#page-carte .rz-cbtns .rz-btn{ width:100%; text-align:center; white-space:normal; line-height:1.3; }
@media(max-width:900px){ #page-carte .rz-maprow{ grid-template-columns:1fr; } #page-carte .rz-mapbox{ height:420px; } }

/* ═══════════════════════════════════════════════════════════════════════
   [v1904] POPUP STATS AGENCE (mockup Margot « handoff-agence-popup »).
   S'ouvre au clic sur une ligne du réseau. Remplace le toggle + tableau KPIs.
   Classes préfixées rz-p (le mock utilise .pop/.k/.bars/.fun/.av/.chart).
   ═══════════════════════════════════════════════════════════════════════ */
.rz-pscrim{ position:fixed; inset:0; z-index:10040; background:rgba(10,12,20,.42);
  backdrop-filter:blur(3px); display:grid; place-items:center; padding:24px; opacity:0; transition:opacity .16s ease; }
.rz-pscrim.on{ opacity:1; }
.rz-pop{ width:720px; max-width:100%; max-height:88vh; overflow:auto; background:var(--surface);
  border:1px solid var(--border); border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.28);
  transform:translateY(8px) scale(.99); transition:transform .16s ease; }
.rz-pscrim.on .rz-pop{ transform:none; }

.rz-pph{ display:flex; align-items:center; gap:13px; padding:20px 22px 4px; }
.rz-pav{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:14px; flex-shrink:0; }
.rz-pnm{ font-size:17px; font-weight:800; letter-spacing:-.02em; display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
/* [v1905] La popup vit dans <body>, hors de #page-reseau : le CSS scopé du
   badge ne l'atteignait pas → SVG sans dimensions, coche géante (capture
   Anthony ; même piège qu'en b1871). On redéclare le badge pour la popup. */
.rz-pop .rz-tbadge{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
  letter-spacing:.02em; padding:2px 8px; border-radius:99px; white-space:nowrap; flex-shrink:0; }
.rz-pop .rz-tbadge svg{ width:11px; height:11px; flex-shrink:0; }
.rz-pop .rz-tbadge.rz-succ{ color:var(--accent); background:var(--accent-dim,rgba(107,92,245,.09));
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent); }
.rz-pop .rz-tbadge.rz-fran{ color:var(--tiede,#c08a2e); background:color-mix(in srgb,var(--tiede,#c08a2e) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--tiede,#c08a2e) 28%,transparent); }
.rz-pph > div{ min-width:0; }
.rz-pnm > span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rz-psub{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.rz-pclose{ margin-left:auto; background:none; border:0; color:var(--muted); cursor:pointer; padding:6px; border-radius:6px; }
.rz-pclose:hover{ background:var(--s2); color:var(--text); }
.rz-pclose svg{ width:18px; height:18px; display:block; }

/* [v1906] Tout est « boxé » comme le mock : chaque bloc porte sa propre carte
   (bordure + radius), au lieu des séparateurs 1px partagés. */
.rz-pkrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:18px 22px 4px; }
.rz-pk{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 15px; }
.rz-pkk{ font-size:10.5px; font-weight:600; color:var(--muted); letter-spacing:.02em; }
.rz-pkv{ font-family:var(--mono,'JetBrains Mono',monospace); font-size:21px; font-weight:600; margin-top:5px; letter-spacing:-.01em; }
.rz-pkd{ font-size:11px; color:var(--text-dim); margin-top:2px; }
.rz-pkv.rz-pna{ color:var(--muted); font-size:17px; }

.rz-psec{ padding:18px 22px 4px; }
.rz-pst{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; display:flex; align-items:center; gap:8px; }

/* Graphe barres empilées, CSS pur */
.rz-pchartbox{ border:1px solid var(--border); border-radius:12px; padding:16px 18px 14px; }
.rz-pchart{ display:flex; align-items:flex-end; gap:10px; height:200px; }
.rz-pbcol{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; justify-content:flex-end; }
/* [v1905] Fond retiré : un track gris pleine hauteur donnait l'illusion que
   les mois SANS mandat étaient pleins (août, nov. sur la capture). Une barre
   vide doit être vide. Ligne de base discrète à la place. */
.rz-pbstack{ width:100%; height:140px; display:flex; flex-direction:column; justify-content:flex-end;
  border-radius:6px 6px 0 0; overflow:hidden; background:transparent; }
.rz-pb{ width:100%; transition:height .2s ease; }
/* [v1908] 3 strates du mock : offres (clair) → compromis → actes (accent plein) */
.rz-pb-acte{ background:var(--accent); }
.rz-pb-comp{ background:color-mix(in srgb, var(--accent) 52%, transparent); }
.rz-pb-offre{ background:color-mix(in srgb, var(--accent) 22%, transparent); }
.rz-ppeak{ height:16px; font-size:11px; font-weight:600; color:var(--accent); font-family:var(--mono,monospace); }
.rz-pbm{ font-size:11.5px; color:var(--muted); font-family:var(--mono,'JetBrains Mono',monospace); white-space:nowrap; }
.rz-pbcol.rz-pnow .rz-pbm{ color:var(--text); font-weight:700; }
.rz-pleg{ display:flex; gap:14px; font-size:11px; color:var(--text-dim); font-weight:500; text-transform:none; letter-spacing:0; margin-left:auto; }
.rz-pleg span{ display:inline-flex; align-items:center; gap:6px; }
.rz-pleg i{ width:9px; height:9px; border-radius:2px; display:inline-block; }

/* Entonnoir */
/* [v1907] Entonnoir calqué sur le « Pipeline transactions » du mock : cartes
   alignées à gauche, icône teintée dont l'intensité croît le long du parcours,
   valeur, libellé, sous-libellé avec le taux de conversion ; chevron circulaire
   entre les cartes. */
.rz-pfun{ display:flex; align-items:stretch; gap:0; }
.rz-pfc{ flex:1; border:1px solid var(--border); border-radius:12px; padding:16px; min-width:0; }
/* [v1909] 44px écrasait la carte : ramené à 34px, icône 15px (Anthony) */
.rz-pfi{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; margin-bottom:14px; }
.rz-pfi svg{ width:15px; height:15px; }
.rz-pfi.rz-s1{ background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent); }
.rz-pfi.rz-s2{ background:color-mix(in srgb, var(--accent) 30%, transparent); color:var(--accent); }
.rz-pfi.rz-s3{ background:var(--accent); color:#fff; }
.rz-pfv{ font-family:var(--mono,'JetBrains Mono',monospace); font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.05; }
.rz-pfk{ font-size:13.5px; color:var(--text); margin-top:6px; }
.rz-pfs{ font-size:12px; color:var(--muted); margin-top:3px; }
.rz-pfchev{ display:grid; place-items:center; width:44px; flex-shrink:0; }
.rz-pfchev span{ width:24px; height:24px; border-radius:50%; border:1px solid var(--border); background:var(--surface);
  display:grid; place-items:center; color:var(--muted); }
.rz-pfchev svg{ width:12px; height:12px; }

/* Bas : 2 colonnes */
.rz-pbtm{ display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:20px 22px; }
.rz-pbtm > div{ min-width:0; }
.rz-pagbox{ border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.rz-pag{ display:flex; align-items:center; gap:10px; padding:11px 13px; }
.rz-pag + .rz-pag{ border-top:1px solid var(--border); }
.rz-prank{ font-family:var(--mono,monospace); font-size:11.5px; color:var(--muted); width:12px; flex-shrink:0; }
.rz-pagav{ width:26px; height:26px; border-radius:7px; display:grid; place-items:center; color:#fff; font-size:9.5px; font-weight:700; flex-shrink:0; }
.rz-pagn{ flex:1; font-size:13px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rz-pagv{ font-family:var(--mono,monospace); font-size:12.5px; font-weight:600; }
.rz-pmisc{ display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:12px;
  padding:11px 13px; margin-bottom:9px; }
.rz-pmisc:last-child{ margin-bottom:0; }
.rz-pmi{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--s2); color:var(--text-dim); flex-shrink:0; }
.rz-pmi svg{ width:15px; height:15px; }
.rz-pmtxt{ min-width:0; }
.rz-pmtxt b{ display:block; font-family:var(--mono,monospace); font-weight:600; font-size:15px; letter-spacing:-.01em; }
.rz-pmtxt b.rz-pna{ color:var(--muted); font-weight:500; }
.rz-pmtxt span{ font-size:11.5px; color:var(--muted); }

.rz-popaque{ padding:34px 22px; text-align:center; }
.rz-popaque .rz-pi{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin:0 auto 12px;
  background:color-mix(in srgb,var(--tiede,#c08a2e) 12%,transparent); color:var(--tiede,#c08a2e); }
.rz-popaque .rz-pi svg{ width:20px; height:20px; }
.rz-popaque h3{ font-size:15px; font-weight:700; margin:0 0 6px; }
.rz-popaque p{ font-size:12.5px; color:var(--muted); margin:0; line-height:1.55; }

@media(max-width:760px){
  .rz-pkrow{ grid-template-columns:repeat(2,1fr); }
  .rz-pbtm{ grid-template-columns:1fr; }
  .rz-pbtm > div:first-child{ border-right:0; border-bottom:1px solid var(--border); }
  .rz-pfun{ flex-direction:column; align-items:stretch; }
}