/* =========================================================
   PLCCGRAM — fil visuel de la PLCC
   ---------------------------------------------------------
   Tout est préfixé .pg- : aucune collision avec styles.css.
   On réutilise les variables de thème du site.
   ========================================================= */

.btn--petit{ padding:.5rem .95rem; font-size:.86rem; }

/* Les boutons ont un display explicite, qui écrase l'attribut hidden.
   Sans cette règle, « Voir plus » resterait visible en cas d'erreur. */
.pg-plus .btn[hidden], .pg-modale__actions .btn[hidden]{ display:none !important; }

/* ---------- en-tête du compte ---------- */
.pg-entete{ position:relative; background:var(--gris-50); }

.pg-banniere{
  height:clamp(120px,22vw,220px);
  background:
    linear-gradient(120deg, rgba(11,27,51,.92), rgba(30,58,99,.75)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px);
  background-size:cover; background-position:center;
}
.pg-banniere[data-image]{ background-blend-mode:multiply; }

.pg-entete__interieur{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1rem,3vw,2.4rem);
  padding-bottom:2rem; align-items:start;
}

.pg-avatar{
  margin-top:clamp(-58px,-7vw,-40px);
  width:clamp(96px,15vw,150px); aspect-ratio:1;
  border-radius:50%; overflow:hidden;
  background:var(--blanc); border:5px solid var(--blanc);
  box-shadow:0 6px 22px rgba(8,20,38,.22);
}
.pg-avatar img{ width:100%; height:100%; object-fit:contain; display:block; }

.pg-identite{ padding-top:1.2rem; min-width:0; }

.pg-nom{
  font-family:var(--font-display); font-size:clamp(1.5rem,3.4vw,2.25rem);
  line-height:1.1; margin:0; color:var(--marine-900); letter-spacing:.02em;
}
.pg-identifiant{
  font-family:var(--font-mono); font-size:.9rem; color:var(--gris-500);
  margin:.15rem 0 1rem;
}

.pg-compteurs{
  list-style:none; margin:0 0 1.1rem; padding:0;
  display:flex; flex-wrap:wrap; gap:clamp(1.2rem,4vw,2.6rem);
}
.pg-compteurs li{ display:flex; flex-direction:column; }
.pg-compteurs strong{
  font-family:var(--font-display); font-size:1.35rem; color:var(--marine-800);
  line-height:1.1;
}
.pg-compteurs span{ font-size:.8rem; color:var(--gris-500); }

.pg-bio{
  margin:0 0 1.2rem; max-width:56ch; white-space:pre-line;
  color:var(--gris-700); font-size:.98rem; line-height:1.65;
}
.pg-liens{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:0; }
.pg-site{ font-size:.9rem; color:var(--marine-600); text-decoration:underline; }

/* ---------- filtres ---------- */
.pg-filtres{
  display:flex; gap:.5rem; flex-wrap:wrap;
  padding:1.6rem 0 .4rem;
}
.pg-filtre{
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.04em;
  padding:.45rem .9rem; border-radius:100px; cursor:pointer;
  background:var(--blanc); color:var(--marine-700);
  border:1px solid var(--gris-300);
}
.pg-filtre:hover{ border-color:var(--marine-400); }
.pg-filtre.est-actif{
  background:var(--marine-800); color:var(--blanc); border-color:var(--marine-800);
}
.pg-filtre:focus-visible{ outline:2px solid var(--orange-500); outline-offset:2px; }

/* ---------- la grille ---------- */
.pg-etat{
  font-family:var(--font-mono); font-size:.86rem; color:var(--gris-500);
  padding:1rem 0; margin:0;
}
.pg-grille{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(4px,1vw,14px);
  padding-bottom:1.4rem;
}
.pg-case{
  position:relative; aspect-ratio:1; overflow:hidden; cursor:pointer;
  border:0; padding:0; background:var(--gris-100); display:block;
  border-radius:var(--r-sm);
}
.pg-case img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s ease;
}
.pg-case:hover img{ transform:scale(1.05); }
.pg-case:focus-visible{ outline:3px solid var(--orange-500); outline-offset:2px; }

.pg-case__voile{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  gap:.4rem; background:rgba(8,20,38,.55); color:var(--blanc);
  opacity:0; transition:opacity .25s ease;
  font-family:var(--font-mono); font-size:.95rem;
}
.pg-case:hover .pg-case__voile,
.pg-case:focus-visible .pg-case__voile{ opacity:1; }

.pg-case__epingle{
  position:absolute; top:8px; right:8px; z-index:2;
  background:var(--orange-500); color:var(--marine-900);
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.2rem .5rem; border-radius:3px;
}

.pg-plus{ text-align:center; padding-bottom:2rem; margin:0; }

.pg-note{
  border-left:3px solid var(--orange-500);
  background:var(--gris-50); padding:1rem 1.2rem;
  margin:0 0 3rem; font-size:.92rem; color:var(--gris-700); line-height:1.6;
}
.pg-note a{ color:var(--marine-600); }

/* ---------- ouverture en grand ---------- */
.pg-modale{ position:fixed; inset:0; z-index:1000; display:flex;
  align-items:center; justify-content:center; padding:clamp(.5rem,3vw,2rem); }
.pg-modale[hidden]{ display:none; }
.pg-modale__fond{ position:absolute; inset:0; background:rgba(6,14,28,.88); }

.pg-modale__boite{
  position:relative; z-index:1; background:var(--blanc);
  border-radius:var(--r-md,8px); overflow:hidden;
  width:min(980px,100%); max-height:92vh;
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.pg-modale__image{ background:#0A1424; display:flex; align-items:center; justify-content:center; }
.pg-modale__image img{ width:100%; height:100%; max-height:92vh; object-fit:contain; display:block; }

.pg-modale__texte{ padding:clamp(1.2rem,3vw,2rem); overflow-y:auto; }
.pg-modale__titre{
  font-family:var(--font-display); font-size:1.35rem; color:var(--marine-900);
  margin:0 0 .3rem;
}
.pg-modale__lieu{
  font-family:var(--font-mono); font-size:.8rem; color:var(--gris-500);
  margin:0 0 1rem;
}
.pg-modale__legende{
  white-space:pre-line; color:var(--gris-700); line-height:1.7;
  margin:0 0 1.1rem; font-size:.98rem;
}
.pg-modale__mots{ margin:0 0 1rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.pg-modale__mots span{
  font-family:var(--font-mono); font-size:.78rem; color:var(--marine-600);
  background:var(--gris-50); border:1px solid var(--gris-100);
  padding:.2rem .55rem; border-radius:100px;
}
.pg-modale__date{
  font-family:var(--font-mono); font-size:.78rem; color:var(--gris-500);
  margin:0 0 1.3rem;
}
.pg-modale__actions{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:0; }

.pg-modale__fermer{
  position:absolute; top:8px; right:10px; z-index:3;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:rgba(8,20,38,.72); color:#fff; border:0; font-size:1.5rem; line-height:1;
}
.pg-modale__fermer:hover{ background:var(--marine-800); }

.pg-reagir{
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  font-family:var(--font-mono); font-size:.9rem;
  background:var(--blanc); color:var(--rouge-500);
  border:1px solid var(--gris-300); border-radius:100px; padding:.5rem 1rem;
}
.pg-reagir:hover{ border-color:var(--rouge-500); }
.pg-reagir[disabled]{ background:var(--rouge-50); border-color:var(--rouge-500); cursor:default; }
.pg-coeur{ font-size:1.05rem; line-height:1; }
.pg-reagir[disabled] .pg-coeur{ animation:pg-bat .45s ease; }
@keyframes pg-bat{ 0%,100%{transform:scale(1)} 45%{transform:scale(1.35)} }

/* ---------- petits écrans ---------- */
@media (max-width:900px){
  .pg-modale__boite{ grid-template-columns:1fr; max-height:94vh; }
  .pg-modale__image img{ max-height:44vh; }
}
@media (max-width:640px){
  .pg-entete__interieur{ grid-template-columns:1fr; }
  .pg-avatar{ margin-top:-46px; }
  .pg-identite{ padding-top:.4rem; }
  .pg-compteurs{ gap:1.4rem; }
}

@media (prefers-reduced-motion:reduce){
  .pg-case img, .pg-case__voile{ transition:none; }
  .pg-reagir[disabled] .pg-coeur{ animation:none; }
}

/* =========================================================
   Deuxième temps : stories, à la une, barre d'actions
   ========================================================= */

/* ---------- bulles : stories du jour + à la une ---------- */
.pg-bulles{
  display:flex; gap:1rem; overflow-x:auto; padding:1.6rem 0 .6rem;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.pg-bulles:empty{ display:none; }
.pg-bulle{
  flex:0 0 auto; width:82px; border:0; background:none; padding:0;
  cursor:pointer; text-align:center;
}
.pg-bulle__cercle{
  width:72px; height:72px; margin:0 auto .4rem; border-radius:50%;
  padding:3px; background:var(--gris-300); display:block;
}
.pg-bulle--vive .pg-bulle__cercle{
  background:linear-gradient(135deg,var(--orange-500),var(--rouge-500) 55%,var(--marine-600));
}
.pg-bulle__cercle span{
  display:block; width:100%; height:100%; border-radius:50%;
  border:2px solid var(--blanc); overflow:hidden; background:var(--gris-100);
}
.pg-bulle__cercle img{ width:100%; height:100%; object-fit:cover; display:block; }
.pg-bulle__titre{
  font-size:.75rem; color:var(--gris-700); line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pg-bulle:focus-visible .pg-bulle__cercle{ outline:2px solid var(--orange-500); outline-offset:3px; }

/* ---------- barre d'actions ---------- */
.pg-barre{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem; }
.pg-act{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  font-family:var(--font-mono); font-size:.85rem;
  background:var(--blanc); color:var(--marine-700);
  border:1px solid var(--gris-300); border-radius:100px; padding:.45rem .85rem;
}
.pg-act:hover{ border-color:var(--marine-600); }
.pg-act:focus-visible{ outline:2px solid var(--orange-500); outline-offset:2px; }
.pg-ic{ font-size:1rem; line-height:1; }
.pg-act__mot{ font-size:.8rem; }

.pg-act--jaime.est-actif{
  background:var(--rouge-50); border-color:var(--rouge-500); color:var(--rouge-500);
}
.pg-act--jaime.est-actif .pg-ic{ animation:pg-bat .45s ease; }
.pg-act--non.est-actif{
  background:var(--gris-100); border-color:var(--gris-500); color:var(--gris-700);
}
.pg-act--enregistre{
  background:var(--orange-50); border-color:var(--orange-500); color:var(--orange-600);
}

.pg-abonne{ background:var(--vert-500) !important; color:var(--blanc) !important; }

/* ---------- visionneuse de stories ---------- */
.pg-story{
  position:fixed; inset:0; z-index:1100; background:#050C18;
  display:flex; align-items:center; justify-content:center;
}
.pg-story[hidden]{ display:none; }

.pg-story__jauges{
  position:absolute; top:12px; left:12px; right:12px; z-index:3;
  display:flex; gap:4px;
}
.pg-story__jauge{ flex:1; height:3px; background:rgba(255,255,255,.28); border-radius:2px; overflow:hidden; }
.pg-story__jauge i{ display:block; height:100%; width:0; background:var(--blanc); }
.pg-story__jauge.est-faite i{ width:100%; }
.pg-story__jauge.est-active i{ animation:pg-jauge var(--duree,6s) linear forwards; }
@keyframes pg-jauge{ from{width:0} to{width:100%} }

.pg-story__cadre{
  position:relative; margin:0; width:min(460px,100%); height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2.6rem 1rem 5rem;
}
.pg-story__cadre img{
  max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--r-sm);
  display:block;
}
.pg-story__cadre figcaption{
  color:var(--blanc); font-size:.95rem; line-height:1.55; text-align:center;
  margin-top:1rem; max-width:44ch; white-space:pre-line;
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}

.pg-story__fermer{
  position:absolute; top:26px; right:16px; z-index:4;
  width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff; font-size:1.6rem; line-height:1;
}
.pg-story__fermer:hover{ background:rgba(255,255,255,.3); }

.pg-story__cote{
  position:absolute; top:0; bottom:0; width:34%; z-index:2;
  border:0; background:transparent; cursor:pointer;
}
.pg-story__cote--g{ left:0; }
.pg-story__cote--d{ right:0; }

.pg-story__lien{ position:absolute; bottom:2rem; z-index:3; }

@media (prefers-reduced-motion:reduce){
  .pg-story__jauge.est-active i{ animation:none; width:100%; }
  .pg-act--jaime.est-actif .pg-ic{ animation:none; }
}

/* =========================================================
   Commentaires — validés avant publication
   ========================================================= */
.pg-com{ border-top:1px solid var(--gris-100); margin-top:1.6rem; padding-top:1.4rem; }
.pg-com[hidden]{ display:none; }
.pg-com__titre{
  font-family:var(--font-display); font-size:1.05rem; color:var(--marine-900);
  margin:0 0 .9rem;
}
.pg-com__titre span{ color:var(--gris-500); font-weight:400; }

/* La mention est volontairement en évidence : c'est elle qui évite
   qu'une victime raconte son affaire ici en croyant saisir la PLCC. */
.pg-com__avis{
  border-left:3px solid var(--orange-500); background:var(--orange-50);
  padding:.8rem 1rem; font-size:.85rem; line-height:1.6; color:var(--gris-700);
  margin:0 0 1.2rem; border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.pg-com__avis a{ color:var(--marine-600); }

.pg-com__liste{ list-style:none; margin:0 0 1.4rem; padding:0; }
.pg-com__liste:empty{ margin:0; }
.pg-com__item{ padding:.8rem 0; border-bottom:1px solid var(--gris-100); }
.pg-com__item--reponse{
  margin-left:1.4rem; padding-left:.9rem;
  border-left:2px solid var(--orange-500); border-bottom:0;
}
.pg-com__qui{
  font-weight:600; font-size:.88rem; color:var(--marine-800);
  display:flex; align-items:center; gap:.45rem; flex-wrap:wrap;
}
.pg-com__badge{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.07em;
  text-transform:uppercase; background:var(--marine-800); color:var(--blanc);
  padding:.14rem .45rem; border-radius:3px;
}
.pg-com__quand{ font-family:var(--font-mono); font-size:.72rem; color:var(--gris-500); font-weight:400; }
.pg-com__corps{ font-size:.92rem; line-height:1.65; color:var(--gris-700); margin:.3rem 0 0; white-space:pre-line; }

.pg-com__form label{ display:block; margin-bottom:.8rem; }
.pg-com__form label > span{
  display:block; font-size:.82rem; font-weight:600; color:var(--marine-800); margin-bottom:.25rem;
}
.pg-com__form label em{ font-weight:400; font-style:normal; color:var(--gris-500); }
.pg-com__form input, .pg-com__form textarea{
  width:100%; padding:.6rem .75rem; border:1px solid var(--gris-300);
  border-radius:var(--r-sm); font:inherit; font-size:.92rem; background:var(--blanc);
}
.pg-com__form textarea{ min-height:90px; resize:vertical; }
.pg-com__form input:focus, .pg-com__form textarea:focus{
  outline:2px solid var(--orange-500); outline-offset:1px; border-color:var(--orange-500);
}
.pg-com__duo{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
@media (max-width:520px){ .pg-com__duo{ grid-template-columns:1fr; } }

.pg-com__pied{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:0; }
.pg-com__etat{ font-family:var(--font-mono); font-size:.8rem; color:var(--gris-500); }
.pg-com__etat[data-ok]{ color:var(--vert-700); }
.pg-com__etat[data-ko]{ color:var(--rouge-500); }