/**
 * Mon profil — la page telle que Claude Design l'a dessinée.
 *
 * La barre du haut est reprise du fil, à l'identique : la recopier ici plutôt
 * que de la partager n'est pas un oubli — les regles du fil vivent dans le
 * <style> en ligne de feed.html, et les deplacer dans nav.css toucherait la
 * vingtaine de pages qui utilisent deja la classe .nav. Les classes .fy-*
 * de la barre, elles, viennent bien de fil.css, charge par cette page.
 */

body {
  background: var(--fy-nuit, #07071a);
  color: var(--fy-encre, #f2f1f7);
  font-family: var(--font-body, 'Instrument Sans', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100dvh;
}
*, *::before, *::after { box-sizing: border-box; }

/* ── La barre du haut ─────────────────────────────────────────────────── */
/* Le menu de la barre. Il n'existait pas sur cette page : on ne pouvait
   sortir d'un profil que par le logo. Il s'efface avant la recherche quand
   la place manque — chercher reste plus utile que naviguer sur un téléphone,
   où la barre du bas porte déjà les mêmes rubriques. */
/* 1100 : mesuree, la barre la plus chargee (/live, deconnecte) reclame
   1055 px. La barre d onglets prend le relais au MEME seuil, pose dans
   nav.css — les deplacer separement rouvre une bande sans navigation. */
@media (max-width: 1100px) { .fy-menu-barre { display: none; } }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 18px; border-radius: 10px;
  font-family: inherit; font-size: .875rem; font-weight: 600;
  cursor: pointer; border: none; text-decoration: none;
}
.btn-outline { background: transparent; color: var(--fy-gris, #a5a3bc); border: 1px solid rgba(255, 255, 255, .16); }
.btn-outline:hover { border-color: rgba(139, 123, 255, .5); color: var(--fy-encre, #f2f1f7); }
.btn-primary { background: var(--fy-violet, #8b7bff); color: var(--fy-nuit, #07071a); }
.btn-primary:hover { background: var(--fy-violet-vif, #a395ff); }

/* ── La bannière ──────────────────────────────────────────────────────── */
.pr-page { max-width: 1100px; margin: 0 auto; }

.pr-banniere {
  position: relative; height: 240px; overflow: hidden;
  background: repeating-linear-gradient(135deg,
    var(--fy-surface, #14142e) 0 12px, #191940 12px 24px);
}
.pr-banniere img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-banniere-vide {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .69rem; letter-spacing: .12em; color: var(--fy-faible, #4a4866);
}
.pr-banniere-bouton {
  position: absolute; top: 18px; right: 32px;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 9px; cursor: pointer;
  background: rgba(7, 7, 26, .7); color: var(--fy-encre, #f2f1f7);
  font-family: inherit; font-size: .845rem; font-weight: 500;
}
.pr-banniere-bouton:hover { background: rgba(7, 7, 26, .92); }
.pr-banniere-bouton[hidden] { display: none; }
.pr-banniere-bouton:disabled { opacity: .6; cursor: progress; }

/* ── L'identité ───────────────────────────────────────────────────────── */
.pr-corps { padding: 0 32px; }

/* La recherche est hors du corps depuis qu'elle est passée au-dessus de la
   bannière : elle reprend son cadrage, sans quoi elle toucherait les bords.
   Une marge en haut la décolle de la barre. */
.pr-recherche { padding: 20px 32px 0; }

/* DEVANT LA BANNIÈRE, PAS DERRIÈRE.

   `.pr-banniere` est `position: relative` — son bouton « Changer la
   bannière » y est posé en absolu — et un élément positionné se peint
   au-dessus d'un frère statique, quel que soit l'ordre du document.

   Tant que la marge négative faisait chevaucher la ligne de recherche,
   statique elle aussi, l'avatar passait devant. Face à la bannière, il
   passait dessous. Un cran d'empilement suffit : la bannière garde sa
   position, qui a une raison d'être. */
.pr-tete {
  display: flex; align-items: flex-end; gap: 24px; margin-top: -48px;
  position: relative; z-index: 1;
}
.pr-avatar {
  width: 120px; height: 120px; flex: none; border-radius: 32px;
  background: var(--fy-surface, #14142e); border: 4px solid var(--fy-nuit, #07071a);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 2.75rem; font-weight: 600; color: var(--fy-violet, #8b7bff);
}
.pr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pr-identite { flex: 1; min-width: 0; padding-bottom: 6px; }
.pr-ligne-nom { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pr-nom {
  margin: 0; font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-weight: 400; font-size: 2.625rem; line-height: 1.05;
}
.pr-badge {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .625rem; font-weight: 500; letter-spacing: .1em;
  border-radius: 5px; padding: 5px 9px; white-space: nowrap;
}
.pr-badge-createur { color: var(--fy-violet, #8b7bff); background: rgba(139, 123, 255, .14); }
.pr-badge-vendeur  { color: var(--fy-cyan, #5cd6e8);  background: rgba(92, 214, 232, .12); }
.pr-poignee {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .845rem; color: var(--fy-sourd, #6e6c88); margin-top: 8px;
}
.pr-actions { flex: none; display: flex; align-items: center; gap: 10px; padding-bottom: 6px; flex-wrap: wrap; }
.pr-action {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 500;
  border: 1px solid rgba(255, 255, 255, .16); background: none;
  color: var(--fy-encre, #f2f1f7); text-decoration: none;
}
.pr-action:hover { background: rgba(255, 255, 255, .06); }
.pr-action[hidden] { display: none; }
.pr-action-direct {
  border: 0; font-weight: 600;
  background: var(--fy-ambre, #f0b45c); color: var(--fy-nuit, #07071a);
}
.pr-action-direct:hover { background: #f7c578; }
.pr-action-suivre { border: 0; font-weight: 600; background: var(--fy-violet, #8b7bff); color: var(--fy-nuit, #07071a); }
.pr-action-suivre:hover { background: var(--fy-violet-vif, #a395ff); }
.pr-action-suivre.pr-suivi { background: none; border: 1px solid rgba(255, 255, 255, .16); color: var(--fy-encre, #f2f1f7); font-weight: 500; }

/* ── Le formulaire d'édition ──────────────────────────────────────────── */
.pr-edition {
  background: var(--fy-carte, #0c0c24); border: 1px solid rgba(139, 123, 255, .35);
  border-radius: 18px; padding: 24px; margin-top: 26px;
}
.pr-edition[hidden] { display: none; }
.pr-etiq {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .656rem; font-weight: 500; letter-spacing: .12em;
  color: var(--fy-violet, #8b7bff); margin-bottom: 20px;
}
/* ── Les deux images, dans le formulaire ──────────────────────────────── */
.pr-images { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.pr-image-bouton {
  display: flex; align-items: center; gap: 14px; text-align: left;
  min-height: 76px; padding: 12px 16px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px;
  background: var(--fy-nuit, #07071a); color: inherit; font-family: inherit;
}
.pr-image-bouton:hover { border-color: rgba(139, 123, 255, .45); background: rgba(139, 123, 255, .05); }
.pr-image-apercu {
  flex: none; overflow: hidden; display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, var(--fy-surface, #14142e) 0 7px, #191940 7px 14px);
  font-size: 1.05rem; font-weight: 600; color: var(--fy-violet, #8b7bff);
}
.pr-image-apercu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-image-apercu.pr-rond { width: 48px; height: 48px; border-radius: 50%; }
.pr-image-apercu.pr-large { width: 72px; height: 30px; border-radius: 7px; }
.pr-image-titre { display: block; font-size: .9rem; font-weight: 600; }
.pr-image-mot { display: block; font-size: .75rem; line-height: 1.4; color: var(--fy-sourd, #6e6c88); margin-top: 4px; }
@media (max-width: 620px) { .pr-images { grid-template-columns: 1fr; } }

/* Les deux actions d'un direct passé, côte à côte. */
.pr-actions-direct { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-supprimer-direct:hover { color: #ff8f8f; border-color: rgba(255, 143, 143, .45); }

.pr-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.pr-champ-titre { display: block; font-size: .845rem; color: var(--fy-gris, #a5a3bc); margin-bottom: 9px; }
.pr-champ, .pr-zone {
  width: 100%; background: var(--fy-nuit, #07071a);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 11px;
  padding: 13px 15px; outline: none; color: #e6e4f0;
  font-family: inherit; font-size: .9375rem; min-height: 44px;
}
.pr-champ:focus, .pr-zone:focus { border-color: rgba(139, 123, 255, .55); }
.pr-zone { min-height: 82px; resize: vertical; line-height: 1.6; }
.pr-boutons { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pr-enregistrer {
  border: 0; border-radius: 10px; min-height: 44px; padding: 0 20px; cursor: pointer;
  background: var(--fy-violet, #8b7bff); color: var(--fy-nuit, #07071a);
  font-family: inherit; font-size: .9rem; font-weight: 600;
}
.pr-enregistrer:hover { background: var(--fy-violet-vif, #a395ff); }
.pr-enregistrer:disabled { opacity: .55; cursor: not-allowed; }
.pr-annuler {
  border: 0; border-radius: 10px; min-height: 44px; padding: 0 18px; cursor: pointer;
  background: rgba(255, 255, 255, .08); color: var(--fy-gris, #a5a3bc);
  font-family: inherit; font-size: .9rem;
}
.pr-annuler:hover { background: rgba(255, 255, 255, .14); }
.pr-message { font-size: .82rem; color: var(--fy-sourd, #6e6c88); margin-left: 4px; }
.pr-message.pr-ko { color: #ff8f8f; }

/* ── Présentation et renseignements ───────────────────────────────────── */
.pr-bio { margin: 26px 0 0; max-width: 70ch; font-size: 1.03rem; line-height: 1.65; color: var(--fy-corps, #d6d4e4); }
.pr-meta { display: flex; align-items: center; gap: 20px; margin-top: 18px; font-size: .9rem; color: var(--fy-gris, #a5a3bc); flex-wrap: wrap; }
.pr-meta span, .pr-meta a { display: inline-flex; align-items: center; gap: 8px; }
.pr-meta a { color: var(--fy-gris, #a5a3bc); text-decoration: none; }
.pr-meta a:hover { color: var(--fy-encre, #f2f1f7); text-decoration: underline; }

/* ── Les compteurs ────────────────────────────────────────────────────── */
.pr-compteurs {
  display: flex; gap: 40px; margin: 28px 0 0; padding: 24px 0; flex-wrap: wrap;
  border-top: 1px solid var(--fy-bord, rgba(255, 255, 255, .08));
  border-bottom: 1px solid var(--fy-bord, rgba(255, 255, 255, .08));
}
/* Les chiffres alignés demandent des chiffres de largeur fixe : sans cela,
   un « 1 » plus étroit fait danser la colonne à chaque rafraîchissement. */
.pr-compteur-nb {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums;
}
.pr-compteur-mot { font-size: .8125rem; color: var(--fy-sourd, #6e6c88); margin-top: 4px; }
.pr-agents {
  margin-left: auto; display: flex; align-items: center; gap: 11px;
  background: rgba(92, 214, 232, .07); border: 1px solid rgba(92, 214, 232, .24);
  border-radius: 12px; padding: 12px 16px; text-decoration: none;
  font-size: .845rem; color: var(--fy-gris, #a5a3bc);
}
.pr-agents:hover { border-color: rgba(92, 214, 232, .45); color: var(--fy-encre, #f2f1f7); }
.pr-agents[hidden] { display: none; }
.pr-carre { width: 9px; height: 9px; flex: none; border-radius: 2px; background: var(--fy-cyan, #5cd6e8); }

/* ── Les onglets ──────────────────────────────────────────────────────── */
.pr-onglets {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--fy-bord, rgba(255, 255, 255, .08)); margin-bottom: 28px;
}
.pr-onglet {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: .9375rem; font-weight: 600; padding: 16px 18px;
  border-bottom: 2px solid transparent; color: var(--fy-sourd, #6e6c88);
  min-height: 44px;
}
.pr-onglet:hover { color: var(--fy-corps, #d6d4e4); }
.pr-onglet[aria-selected="true"] { color: var(--fy-encre, #f2f1f7); border-bottom-color: var(--fy-violet, #8b7bff); }
.pr-onglet-nb {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .78rem; color: var(--fy-sourd, #6e6c88); margin-left: 6px;
}

/* ── Les panneaux ─────────────────────────────────────────────────────── */
.pr-panneaux { padding: 0 32px 100px; }
.pr-panneau[hidden] { display: none; }
.pr-entete-panneau { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.pr-legende {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .69rem; letter-spacing: .1em; color: var(--fy-sourd, #6e6c88);
}
.pr-lien { margin-left: auto; font-size: .9rem; font-weight: 600; color: var(--fy-violet, #8b7bff); text-decoration: none; }
.pr-lien:hover { color: var(--fy-violet-vif, #a395ff); }

/* ── Publications ─────────────────────────────────────────────────────── */
.pr-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pr-tuile {
  position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--fy-surface, #14142e) 0 9px, #191940 9px 18px);
  display: block; text-decoration: none; color: inherit;
}
.pr-tuile img, .pr-tuile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-tuile-texte {
  padding: 16px; font-size: .875rem; line-height: 1.5; color: var(--fy-corps, #d6d4e4);
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.pr-tuile-produit {
  position: absolute; top: 10px; right: 10px; width: 16px; height: 16px;
  border-radius: 5px; background: var(--fy-violet, #8b7bff);
}
.pr-tuile-chiffres {
  position: absolute; bottom: 10px; left: 12px;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .69rem; font-weight: 500; color: var(--fy-corps, #d6d4e4);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}
.pr-tuile-ajout {
  aspect-ratio: 1; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, .18);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--fy-violet, #8b7bff); text-decoration: none; font-size: .845rem;
}
.pr-tuile-ajout:hover { background: rgba(139, 123, 255, .06); }

/* ── Boutique ─────────────────────────────────────────────────────────── */
.pr-produits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pr-produit {
  background: var(--fy-carte, #0c0c24); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit;
}
.pr-produit:hover { border-color: rgba(255, 255, 255, .2); }
.pr-produit-image {
  position: relative; height: 180px;
  background: repeating-linear-gradient(135deg, var(--fy-surface, #14142e) 0 9px, #191940 9px 18px);
}
.pr-produit-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-fanion {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .5625rem; font-weight: 500; letter-spacing: .1em;
  border-radius: 100px; padding: 4px 8px;
  background: var(--fy-ambre, #f0b45c); color: var(--fy-nuit, #07071a);
}
.pr-produit-corps { padding: 16px; }
.pr-produit-nom { font-size: .9rem; font-weight: 600; }
.pr-produit-prix {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .875rem; font-weight: 500; color: var(--fy-cyan, #5cd6e8); margin-top: 5px;
}
.pr-produit-stock { font-size: .78rem; color: var(--fy-sourd, #6e6c88); margin-top: 8px; }
.pr-produit-stock.pr-rare { color: var(--fy-ambre, #f0b45c); }
.pr-ajout-produit {
  grid-column: 1 / -1; border: 1px dashed rgba(255, 255, 255, .18); border-radius: 16px;
  padding: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.pr-ajout-rond {
  width: 44px; height: 44px; flex: none; border-radius: 13px;
  background: rgba(139, 123, 255, .14); display: flex; align-items: center; justify-content: center;
}

/* ── Directs ──────────────────────────────────────────────────────────── */
.pr-directs { display: flex; flex-direction: column; gap: 14px; }
.pr-direct {
  background: var(--fy-carte, #0c0c24); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 20px;
  text-decoration: none; color: inherit; flex-wrap: wrap;
}
.pr-direct-prochain {
  background: linear-gradient(135deg, rgba(240, 180, 92, .1), rgba(255, 107, 107, .05));
  border-color: rgba(240, 180, 92, .3); padding: 22px;
}
.pr-direct-vignette {
  width: 132px; height: 84px; flex: none; border-radius: 12px;
  background: repeating-linear-gradient(160deg, #0f0f28 0 10px, #191940 10px 20px);
}
.pr-direct-corps { flex: 1; min-width: 180px; }
.pr-direct-quand {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .656rem; font-weight: 500; letter-spacing: .1em;
  color: var(--fy-ambre, #f0b45c); margin-bottom: 7px;
}
.pr-direct-titre { font-size: 1.0625rem; font-weight: 600; }
.pr-direct-sous { font-size: .875rem; color: var(--fy-gris, #a5a3bc); margin-top: 5px; }
.pr-direct-chiffres { flex: none; display: flex; gap: 32px; text-align: right; }
.pr-direct-nb {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 1.0625rem; font-weight: 500; font-variant-numeric: tabular-nums;
}
.pr-direct-mot { font-size: .75rem; color: var(--fy-sourd, #6e6c88); margin-top: 3px; }
.pr-pastille-nature { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; }

/* ── À propos ─────────────────────────────────────────────────────────── */
.pr-fiches { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pr-fiche {
  background: var(--fy-carte, #0c0c24); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px; padding: 26px;
}
.pr-fiche-large { grid-column: 1 / -1; }
.pr-fiche-agents { border-color: rgba(92, 214, 232, .28); }
.pr-fiche-titre {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .656rem; font-weight: 500; letter-spacing: .12em;
  color: var(--fy-sourd, #6e6c88); margin-bottom: 20px;
}
.pr-fiche-agents .pr-fiche-titre { color: var(--fy-cyan, #5cd6e8); }
.pr-fiche p { margin: 0 0 20px; font-size: .97rem; line-height: 1.65; color: var(--fy-corps, #d6d4e4); }
.pr-rang {
  display: flex; justify-content: space-between; gap: 16px; padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, .07); font-size: .9rem;
}
.pr-rang:first-child { border-top: 0; }
.pr-rang span:first-child { color: var(--fy-gris, #a5a3bc); }
.pr-agents-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pr-agent-nom { font-size: .97rem; font-weight: 600; }
.pr-agent-mot { margin: 7px 0 0; font-size: .875rem; line-height: 1.55; color: var(--fy-gris, #a5a3bc); }

/* ── Vide et attente ──────────────────────────────────────────────────── */
.pr-vide {
  grid-column: 1 / -1; text-align: center; padding: 48px 20px;
  color: var(--fy-sourd, #6e6c88); font-size: .9rem; line-height: 1.6;
}

/* ── L'état du dossier vendeur ────────────────────────────────────────── */
.pr-etat-dossier {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 26px; padding: 18px 20px; border-radius: 16px;
  background: rgba(139, 123, 255, .06); border: 1px solid rgba(139, 123, 255, .28);
}
.pr-etat-dossier[hidden] { display: none; }
.pr-etat-dossier > div { flex: 1; min-width: 220px; }
.pr-etat-titre { font-size: .97rem; font-weight: 600; }
.pr-etat-mot { margin: 6px 0 0; font-size: .845rem; line-height: 1.55; color: var(--fy-gris, #a5a3bc); }
.pr-etat-dossier .pr-action { flex: none; }

.pr-onglet[hidden] { display: none; }

/* Un direct EN COURS, et rien d'autre, allume l'onglet. Le nombre à côté de
   « Directs » est un total : douze directs terminés se lisaient comme douze
   directs en cours. */
.pr-onglet-vif::after {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 7px;
  border-radius: 50%; background: #ff6b6b; vertical-align: 2px;
  animation: nav-pouls 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .pr-onglet-vif::after { animation: none } }

/* ── Un direct en cours dans le panneau ───────────────────────────────── */
.pr-direct-encours {
  border-color: rgba(255, 107, 107, .5);
  background: linear-gradient(135deg, rgba(255, 107, 107, .12), transparent);
}
.pr-quand-rouge { color: #ff6b6b !important; display: flex; align-items: center; gap: 7px; }
.pr-point-vif {
  width: 8px; height: 8px; flex: none; border-radius: 50%; background: #ff6b6b;
  animation: nav-pouls 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .pr-point-vif { animation: none } }
#compteur-produits[hidden] { display: none; }
#bloc-conditions[hidden] { display: none; }

/* ── La note dans les compteurs ───────────────────────────────────────── */
.pr-compteur-note { text-decoration: none; color: inherit; }
.pr-compteur-note[hidden] { display: none; }
.pr-compteur-note:hover .pr-compteur-nb { color: var(--fy-ambre, #f0b45c); }

/* ── Les avis ─────────────────────────────────────────────────────────── */
.pr-avis-tete { display: flex; align-items: center; gap: 44px; flex-wrap: wrap; margin-bottom: 28px; }
.pr-note-grande { text-align: center; flex: none; }
.pr-note-chiffre {
  font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-size: 3.25rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.pr-etoiles-vue { display: inline-flex; gap: 2px; margin-top: 8px; }
.pr-note-mot { font-size: .8125rem; color: var(--fy-sourd, #6e6c88); margin-top: 8px; }

.pr-repartitions { flex: 1; min-width: 220px; max-width: 380px; display: flex; flex-direction: column; gap: 6px; }
.pr-repartition {
  display: flex; align-items: center; gap: 12px;
  font-size: .8125rem; color: var(--fy-sourd, #6e6c88);
  font-variant-numeric: tabular-nums;
}
.pr-jauge { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.pr-jauge i { display: block; height: 100%; background: var(--fy-ambre, #f0b45c); }
.pr-repartition-nb { min-width: 2ch; text-align: right; }

.pr-avis-forme {
  background: var(--fy-carte, #0c0c24); border: 1px solid rgba(139, 123, 255, .35);
  border-radius: 18px; padding: 24px; margin-bottom: 24px;
}
.pr-avis-forme[hidden] { display: none; }
/* 44 px de côté : une étoile qu'on rate est une note qu'on ne donne pas. */
.pr-etoiles { display: flex; gap: 4px; margin-bottom: 16px; }
.pr-etoile {
  width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 10px;
}
.pr-etoile:hover { background: rgba(240, 180, 92, .12); }
.pr-avis-refus {
  color: var(--fy-sourd, #6e6c88); font-size: .875rem; line-height: 1.6;
  border: 1px dashed rgba(255, 255, 255, .14); border-radius: 14px;
  padding: 18px 20px; margin-bottom: 24px;
}
.pr-avis-refus[hidden] { display: none; }

.pr-avis-liste { display: flex; flex-direction: column; gap: 14px; }
.pr-avis {
  background: var(--fy-carte, #0c0c24); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px; padding: 20px;
}
.pr-avis-tete-ligne { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pr-avis-nom { font-size: .9rem; font-weight: 600; }
.pr-avis-quand { font-size: .78rem; color: var(--fy-sourd, #6e6c88); margin-top: 3px; }
.pr-avis-texte { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--fy-corps, #d6d4e4); }
.pr-avis-reponse {
  margin-top: 16px; padding: 14px 16px; border-radius: 12px;
  background: rgba(139, 123, 255, .07); border-left: 2px solid var(--fy-violet, #8b7bff);
}
.pr-avis-reponse-titre {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .625rem; letter-spacing: .1em; color: var(--fy-violet, #8b7bff); margin-bottom: 7px;
}
.pr-avis-reponse p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--fy-corps, #d6d4e4); }
.pr-repondre { margin-top: 14px; }
.pr-avis-repondre { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }

/* ── Le replay d'un direct ────────────────────────────────────────────── */
.pr-a-replay { position: relative; display: block; }
.pr-fanion-replay {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .5625rem; font-weight: 500; letter-spacing: .1em;
  border-radius: 100px; padding: 4px 8px;
  background: rgba(255, 107, 107, .9); color: #fff;
}
.pr-lien-replay {
  /* 44 px comme partout : un bouton secondaire reste un bouton, et celui-ci
     ouvre un sélecteur de fichier — le rater fait perdre le geste entier. */
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 9px; padding: 0 12px;
  background: none; color: var(--fy-gris, #a5a3bc);
  font-family: inherit; font-size: .78rem; cursor: pointer;
}
.pr-lien-replay:hover { color: var(--fy-encre, #f2f1f7); background: rgba(255, 255, 255, .06); }
.pr-lien-replay:disabled { opacity: .6; cursor: progress; }

select.pr-champ { appearance: none; -webkit-appearance: none; cursor: pointer; }

/* ── Le message de partage ────────────────────────────────────────────── */
.pr-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 400;
  background: var(--fy-clair, #f4f2ee); color: var(--fy-nuit, #07071a);
  border-radius: 13px; padding: 15px 20px; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55); font-size: .9375rem; font-weight: 500;
  max-width: calc(100vw - 32px);
}
.pr-toast[hidden] { display: none; }
.pr-toast .pr-carre { background: var(--fy-violet, #8b7bff); }

/* ── Écrans étroits ───────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .pr-grille, .pr-produits { grid-template-columns: repeat(3, 1fr); }
  .pr-fiches { grid-template-columns: 1fr; }
  .pr-agents-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .pr-corps, .pr-panneaux, .pr-recherche { padding-left: 20px; padding-right: 20px; }
  .pr-banniere { height: 150px; }
  .pr-banniere-bouton { right: 20px; top: 12px; }
  .pr-tete { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: -40px; }
  .pr-avatar { width: 92px; height: 92px; border-radius: 26px; font-size: 2rem; }
  .pr-nom { font-size: 2rem; }
  .pr-actions { width: 100%; }
  .pr-action { flex: 1 1 auto; justify-content: center; }
  .pr-duo { grid-template-columns: 1fr; }
  .pr-grille, .pr-produits { grid-template-columns: 1fr 1fr; }
  .pr-compteurs { gap: 24px; }
  .pr-agents { margin-left: 0; width: 100%; }
  .pr-direct-vignette { width: 100%; height: 120px; }
  .pr-direct-chiffres { gap: 24px; text-align: left; }
  .pr-agents-grille { grid-template-columns: 1fr; }
  .pr-avis-tete { gap: 24px; }
  .pr-repartitions { max-width: none; }
}
@media (max-width: 420px) {
  .pr-grille { grid-template-columns: 1fr 1fr; }
  .pr-produits { grid-template-columns: 1fr; }
}