/* Parlow — feuille de style.
   Univers violet/néon repris de la maquette du client, mais construit pour
   tenir sur un téléphone : sur la maquette d'origine les deux colonnes
   latérales étaient simplement masquées en dessous de 1024 px, ce qui
   supprimait les salons ET la liste des membres. Ici elles deviennent des
   onglets. */

:root{
  --fond:#050409;
  --fond-2:#0b0818;
  --fond-3:#130f24;
  --violet:#a855f7;
  --violet-fonce:#7e22ce;
  --violet-clair:#d8b4fe;
  --rose:#ec4899;
  --or:#f59e0b;
  --cyan:#38bdf8;
  --texte:#f4f2fb;
  --gris:#9ca3af;
  --haut:54px;
  --onglets:0px;                 /* remplacé sur mobile */
  --ombre-violet:0 0 18px rgba(168,85,247,.45);
}

*{margin:0;padding:0;box-sizing:border-box}

/* Le document lui-même ne défile JAMAIS : seules les listes intérieures le
   font. C'est le correctif de « sur le mobile, la page, elle bouge » — sans
   ça, iOS fait rebondir toute la page au bout du défilement et montre/cache sa
   barre d'adresse, ce qui donne exactement cette impression de flottement. */
html,body{
  height:100%;overflow:hidden;
  overscroll-behavior:none;-webkit-overflow-scrolling:auto;
}
body{
  position:fixed;inset:0;width:100%;
  background:var(--fond);color:var(--texte);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;          /* Safari agrandit le texte en paysage */
}
/* `select` DOIT figurer ici. Sans lui il garde la couleur par défaut du
   navigateur — du noir — sur notre fond noir : la commune était bien dans la
   liste, simplement invisible. C'est le défaut signalé par le client le 10/09
   (« la ville ne s'affiche pas correctement »). */
button,input,select,textarea{font:inherit;color:inherit}
/* Le menu déroulant ouvert est dessiné par le système : il lui faut ses propres
   couleurs, il n'hérite pas de celles du <select>. */
option{background:#130f24;color:#f4f2fb}
button{cursor:pointer;border:0;background:none}
[hidden]{display:none !important}

/* ============================= ÉCRAN D'ENTRÉE ============================ */

.pw-porte{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;padding:22px;
  background:radial-gradient(1200px 700px at 20% -10%,rgba(126,34,206,.35),transparent 60%),
             radial-gradient(900px 600px at 110% 110%,rgba(236,72,153,.28),transparent 60%),
             var(--fond);
  /* La carte est plus haute depuis l'ajout du code postal et du profil : sur un
     petit téléphone elle doit pouvoir défiler, sinon le bouton « Entrer » est
     coupé et personne ne peut entrer. */
  overflow-y:auto;overscroll-behavior:contain;
}
/* Trois halos qui dérivent lentement derrière la carte : ça donne la sensation
   « animée » que le client demande, sans image ni bibliothèque.
   En `fixed` pour ne pas allonger la zone défilante. */
.pw-porte-fond{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.pw-porte-fond span{
  position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;
  animation:pw-derive 18s ease-in-out infinite alternate;
}
.pw-porte-fond span:nth-child(1){width:340px;height:340px;background:#7e22ce;top:-60px;left:-40px}
.pw-porte-fond span:nth-child(2){width:300px;height:300px;background:#ec4899;bottom:-80px;right:-30px;animation-delay:-6s}
.pw-porte-fond span:nth-child(3){width:260px;height:260px;background:#0284c7;top:40%;right:20%;animation-delay:-12s}
@keyframes pw-derive{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(40px,-30px,0) scale(1.18)}
}

.pw-carte{
  position:relative;width:100%;max-width:392px;
  background:rgba(19,15,36,.86);backdrop-filter:blur(14px);
  border:1px solid rgba(168,85,247,.36);border-radius:22px;
  padding:28px 24px 22px;
  box-shadow:0 30px 70px rgba(0,0,0,.6),var(--ombre-violet);
  animation:pw-monte .55s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes pw-monte{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}

.pw-logo{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-weight:900;font-size:1.5rem;letter-spacing:.08em;color:var(--violet-clair);
  text-shadow:0 0 16px rgba(168,85,247,.65);
}
.pw-bulle{font-size:1.25rem;animation:pw-bulle 3.2s ease-in-out infinite}
@keyframes pw-bulle{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-5px) rotate(6deg)}}

.pw-accroche{margin:12px 0 20px;text-align:center;color:var(--gris);font-size:.86rem;line-height:1.55}

.pw-champ{display:block;margin-bottom:13px}
.pw-champ>span{display:block;font-size:.7rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:#b9a8d8;margin:0 0 6px 3px}
.pw-champ input{
  width:100%;background:#0f0b1e;border:1px solid rgba(168,85,247,.3);
  border-radius:12px;padding:12px 14px;outline:none;font-size:16px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.pw-champ input::placeholder{color:#5b5474}
.pw-champ input:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(236,72,153,.18);background:#140f26}
.pw-duo{display:grid;grid-template-columns:1fr 92px;gap:11px}

.pw-btn-entrer{
  width:100%;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(135deg,#7e22ce,#c026d3 55%,#ec4899);
  border-radius:13px;padding:14px;font-weight:800;font-size:.98rem;color:#fff;
  box-shadow:0 10px 26px rgba(126,34,206,.45);
  transition:transform .18s,box-shadow .18s,filter .18s;
}
.pw-btn-entrer:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(192,38,211,.5)}
.pw-btn-entrer:active{transform:translateY(0)}
.pw-btn-entrer[disabled]{filter:grayscale(.5) brightness(.8);cursor:progress}

.pw-champ select{
  width:100%;background:#0f0b1e;color:var(--texte);
  border:1px solid rgba(168,85,247,.3);border-radius:12px;
  padding:12px 14px;outline:none;font-size:16px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#a78bfa 50%),linear-gradient(135deg,#a78bfa 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.pw-champ select:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(236,72,153,.18)}

.pw-note{margin:-6px 0 12px 3px;font-size:.72rem;color:#9b91b5;line-height:1.45}

/* Femme / Homme / Couple / Lesbienne / Trans / LGBT+ */
.pw-profils{display:flex;flex-wrap:wrap;gap:7px}
.pw-profil{
  display:flex;align-items:center;gap:5px;
  padding:8px 12px;border-radius:11px;font-size:.79rem;font-weight:700;color:#b8aad4;
  background:#0f0b1e;border:1px solid rgba(168,85,247,.28);
  transition:background .2s,color .2s,border-color .2s,transform .18s;
}
.pw-profil em{font-style:normal;font-size:.95rem;opacity:.9}
.pw-profil:hover{background:rgba(168,85,247,.16);color:#fff;transform:translateY(-1px)}
.pw-profil.actif{
  background:linear-gradient(135deg,#7e22ce,#c026d3);color:#fff;border-color:transparent;
  box-shadow:0 6px 18px rgba(126,34,206,.45);
}

.pw-err{min-height:1.1rem;margin-top:11px;text-align:center;color:#fca5a5;font-size:.82rem;font-weight:600}
.pw-regle{
  margin-top:16px;padding:11px 13px;border-radius:12px;font-size:.72rem;line-height:1.5;color:#c9b8e6;
  background:rgba(168,85,247,.09);border:1px solid rgba(168,85,247,.22);
}

/* ============================== APPLICATION ============================== */

/* `--haut-reel` est posé par le JS à partir de visualViewport : c'est la
   hauteur RÉELLEMENT visible, clavier ouvert comme fermé. Le `100svh` reste en
   secours pour les navigateurs qui n'exposent pas visualViewport. */
.pw-app{
  position:fixed;top:var(--haut-decale,0px);left:0;right:0;
  display:flex;flex-direction:column;
  height:100svh;height:var(--haut-reel,100svh);
  background:var(--fond-2);
}
.pw-porte{top:var(--haut-decale,0px);height:100svh;height:var(--haut-reel,100svh)}

.pw-haut{
  height:var(--haut);flex:none;display:flex;align-items:center;gap:14px;
  padding:0 14px;background:#0e0a1f;border-bottom:1px solid rgba(168,85,247,.28);
  padding-top:env(safe-area-inset-top);height:calc(var(--haut) + env(safe-area-inset-top));
}
.pw-logo-petit{font-size:1.02rem;gap:6px;flex:none}
.pw-logo-petit .pw-bulle{font-size:.95rem}

.pw-bandeau{
  flex:1;min-width:0;display:flex;align-items:center;gap:7px;justify-content:center;
  background:rgba(239,68,68,.13);border:1px solid rgba(239,68,68,.38);border-radius:20px;
  padding:5px 13px;font-size:.71rem;color:#fca5a5;
  animation:pw-pulse 1.9s ease-in-out infinite alternate;
}
.pw-bandeau-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes pw-pulse{
  from{box-shadow:0 0 4px rgba(239,68,68,.18)}
  to{box-shadow:0 0 15px rgba(239,68,68,.5)}
}

.pw-enligne{flex:none;display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--violet-clair)}
.pw-enligne strong{color:#fff}
.pw-point{
  width:8px;height:8px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pw-battement 2s infinite;
}
@keyframes pw-battement{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
  70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

.pw-btn-mp{
  flex:none;position:relative;display:flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:20px;font-size:.78rem;font-weight:800;color:#e9d5ff;
  background:rgba(168,85,247,.16);border:1px solid rgba(168,85,247,.4);
  transition:background .2s,color .2s;
}
.pw-btn-mp:hover{background:rgba(168,85,247,.34);color:#fff}
.pw-btn-mp em{
  font-style:normal;min-width:17px;padding:1px 5px;border-radius:9px;
  font-size:.62rem;font-weight:900;background:var(--rose);color:#fff;
}

.pw-grille{
  position:relative;                    /* ancre le tiroir des messages privés */
  /* Le panneau privé fermé est poussé hors écran par un `translateX` : sans ce
     `overflow:hidden`, il allonge la grille à 2573 px de large. On peut alors
     la faire glisser latéralement et le panneau vient recouvrir le tchat, où il
     avale les clics. Mesuré, pas supposé : scrollWidth 2573 pour 1280 visibles. */
  overflow:hidden;
  flex:1;min-height:0;display:grid;
  grid-template-columns:274px minmax(0,1fr) 300px;
  background:var(--fond-2);
}

/* La messagerie privée s'ouvre sur TOUTE la largeur de la page — demande du
   client le 11/09 : « je veux que ça ouvre de largeur de la page ». Elle glisse
   depuis la droite et recouvre les trois colonnes. */
.pw-prive{
  position:absolute;inset:0;z-index:26;
  /* FERMÉ = `display:none`, et rien d'autre.
     Deux tentatives ont échoué avant : le pousser hors écran avec
     `translateX`, puis y ajouter `visibility:hidden`. Dans les deux cas le
     panneau gardait une boîte, le navigateur pouvait faire défiler la grille
     jusqu'à lui, et il recouvrait le tchat en avalant les clics sur les
     réactions. `display:none` ne laisse aucune ambiguïté : ni boîte, ni survol,
     ni défilement. L'animation se joue à l'ouverture. */
  box-shadow:-16px 0 44px rgba(0,0,0,.55);border-left:1px solid rgba(168,85,247,.4);
}
/* `.pw-col.pw-prive` et non `.pw-prive` seul : le panneau porte AUSSI la classe
   `pw-col`, et `.pw-col{display:flex}` est déclarée PLUS BAS dans ce fichier.
   À spécificité égale, c'est la dernière qui gagne — le panneau repassait donc
   en `flex`, gardait sa boîte par-dessus le tchat et avalait les clics. Deux
   classes suffisent à trancher, sans `!important`. */
.pw-col.pw-prive{display:none}
.pw-prive.pw-ouvert{
  display:flex;
  animation:pw-glisse-prive .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes pw-glisse-prive{
  from{transform:translateX(6%);opacity:.35}
  to{transform:none;opacity:1}
}

/* Pleine largeur : la liste des conversations et le fil respirent au lieu de
   s'étirer sur 1400 px. */
.pw-prive-liste,.pw-prive-fil,.pw-prive .pw-saisie{
  width:100%;max-width:900px;margin-left:auto;margin-right:auto
}
.pw-prive-titre{max-width:900px;margin:0 auto;width:100%}

.pw-prive-fermer{
  margin-left:auto;flex:none;width:30px;height:30px;border-radius:9px;
  font-size:.85rem;font-weight:900;color:#fca5a5;background:rgba(239,68,68,.16);
}
.pw-prive-fermer:hover{background:rgba(239,68,68,.45);color:#fff}
.pw-col{min-height:0;display:flex;flex-direction:column}
.pw-salons{background:var(--fond-2);border-right:1px solid rgba(255,255,255,.05);
  overflow-y:auto;padding:12px 10px 16px;gap:4px}
.pw-membres{background:var(--fond-2);border-left:1px solid rgba(255,255,255,.05);
  overflow-y:auto;padding:10px}

.pw-col-titre{
  font-size:.66rem;font-weight:800;color:#8f88a6;text-transform:uppercase;
  letter-spacing:.09em;margin:12px 0 7px 9px;
}
.pw-col-titre:first-child{margin-top:2px}
.pw-col-titre-onglet{
  margin:0 0 9px;padding:11px 6px;text-align:center;color:var(--violet-clair);
  border-bottom:2px solid rgba(168,85,247,.6);letter-spacing:.05em;
}

/* --------------------------------- salons -------------------------------- */

.pw-salon{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;text-align:left;
  padding:10px 12px;border-radius:11px;color:#a9a2bd;font-size:.84rem;
  border:1px solid transparent;transition:background .22s,color .22s,transform .22s,box-shadow .22s;
}
.pw-salon:hover{background:rgba(168,85,247,.14);color:#fff;transform:translateX(5px)}
.pw-salon.actif{
  background:linear-gradient(135deg,#7e22ce,#9333ea);color:#fff;font-weight:700;
  box-shadow:var(--ombre-violet);transform:translateX(4px);
}
.pw-salon-nom{display:flex;align-items:center;gap:8px;min-width:0}
.pw-salon-nom em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-salon-n{
  flex:none;background:rgba(255,255,255,.14);border-radius:9px;
  padding:2px 7px;font-size:.68rem;font-weight:700;
}
.pw-salon.actif .pw-salon-n{background:rgba(0,0,0,.28)}

.pw-btn-creer{
  margin:14px 4px 0;padding:11px;border-radius:11px;font-size:.8rem;font-weight:800;
  color:var(--violet-clair);border:1px dashed rgba(168,85,247,.45);
  transition:background .2s,color .2s,border-color .2s;
}
.pw-btn-creer:hover{background:rgba(168,85,247,.14);color:#fff;border-color:var(--violet)}

/* --------------------------------- tchat --------------------------------- */

.pw-tchat{background:var(--fond);position:relative}
.pw-tchat-titre{
  flex:none;display:flex;align-items:center;gap:10px;
  padding:12px 18px;font-weight:800;font-size:.95rem;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:linear-gradient(180deg,rgba(126,34,206,.16),transparent);
}
.pw-tchat-compte{font-size:.72rem;font-weight:600;color:var(--gris)}

/* Bandeau annonce en haut du salon, écrit depuis l'administration. Le texte
   défile en boucle — « un message animé dans le head de chaque salon ». */
.pw-annonce{
  flex:none;overflow:hidden;white-space:nowrap;position:relative;
  padding:7px 0;font-size:.79rem;font-weight:700;color:#fde68a;
  background:linear-gradient(90deg,rgba(245,158,11,.16),rgba(236,72,153,.14));
  border-bottom:1px solid rgba(245,158,11,.32);
}
.pw-annonce span{display:inline-block;padding-left:100%;animation:pw-defile 22s linear infinite}
@keyframes pw-defile{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.pw-annonce:hover span{animation-play-state:paused}

.pw-cadenas{flex:none;font-size:.7rem;opacity:.85}

.pw-messages{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:18px;display:flex;flex-direction:column;gap:13px;
  scrollbar-width:thin;scrollbar-color:rgba(168,85,247,.4) transparent;
}
.pw-messages::-webkit-scrollbar{width:7px}
.pw-messages::-webkit-scrollbar-thumb{background:rgba(168,85,247,.4);border-radius:9px}

.pw-msg{display:flex;gap:10px;animation:pw-glisse .32s cubic-bezier(.2,.9,.3,1.1)}
@keyframes pw-glisse{from{opacity:0;transform:translate3d(-10px,12px,0)}to{opacity:1;transform:none}}
/* « Les discussions il vient à gauche et non à droite » (client, 12/09).
   Tout le monde est aligné à gauche dans les salons, y compris soi-même : c'est
   une conversation de groupe, pas une messagerie à deux. La couleur suffit à
   reconnaître ses propres messages. Les messages PRIVÉS, eux, gardent
   l'alignement à droite — là, c'est bien une conversation à deux. */
.pw-msg.pw-moi{flex-direction:row}

.pw-pastille{
  flex:none;position:relative;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:.95rem;color:#fff;
  background:linear-gradient(135deg,#4c1d95,#7e22ce);
}
/* Le liseré doré qui tourne autour de l'avatar d'un abonné. */
.pw-pastille.pw-premium::before{
  content:'';position:absolute;inset:-3px;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,#f59e0b,#a855f7,#ec4899,#f59e0b);
  animation:pw-tourne 3.4s linear infinite;
}
@keyframes pw-tourne{to{transform:rotate(1turn)}}

/* La colonne à droite de l'avatar : en-tête au-dessus, bulle, réactions. */
.pw-msg-col{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px}

/* « Moins gros et plus large » : la bulle ne porte plus que le texte, donc
   6 px de haut au lieu de 9 plus la ligne d'en-tête, et elle peut aller
   chercher 92 % de la largeur au lieu de 78 %. `inline-block` la fait coller
   au texte : trois mots ne dessinent plus une barre vide. */
.pw-bulle-msg{
  display:inline-block;max-width:min(92%,860px);padding:7px 14px;border-radius:14px;
  background:var(--fond-3);border:1px solid rgba(168,85,247,.16);
  font-size:.88rem;line-height:1.45;overflow-wrap:anywhere;
  box-shadow:0 3px 12px rgba(0,0,0,.35);
}
.pw-moi .pw-bulle-msg{background:linear-gradient(135deg,#0369a1,#0284c7);border-color:rgba(56,189,248,.4)}
.pw-entete{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:.71rem;margin:0 0 1px 3px;color:#c4b5fd;font-weight:700;
}
.pw-moi .pw-entete{color:#bae6fd}
.pw-lieu{color:#8b93a7;font-weight:600}
.pw-moi .pw-lieu{color:#d3ecfb}
.pw-heure{color:#6b7280;font-weight:500}
.pw-moi .pw-heure{color:#cfe9fa}

.pw-couronne{color:var(--or);filter:drop-shadow(0 0 4px rgba(245,158,11,.6))}

/* messages de service et de modération */
.pw-msg-sys{align-self:center;max-width:90%;text-align:center;
  font-size:.72rem;color:#8b8298;padding:4px 12px;border-radius:20px;
  background:rgba(255,255,255,.04);animation:pw-glisse .3s ease-out}
.pw-msg-mod{align-self:center;max-width:90%;text-align:center;
  font-size:.76rem;font-weight:700;color:#fecaca;padding:7px 14px;border-radius:12px;
  background:linear-gradient(135deg,rgba(220,38,38,.85),rgba(153,27,27,.85));
  border:1px solid #fca5a5;box-shadow:0 0 18px rgba(220,38,38,.45)}

/* --------------------------------- saisie -------------------------------- */

/* Barre de saisie affinée le 12/09 (« moins gros et plus large ») : 8 px de
   marge au lieu de 12, et le champ gagne la place rendue. */
.pw-saisie{flex:none;padding:8px 12px;background:var(--fond-2);
  border-top:1px solid rgba(255,255,255,.05);
  padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.pw-saisie form{display:flex;gap:9px}
/* 16 px MINIMUM : en dessous, Safari sur iPhone zoome automatiquement à chaque
   fois qu'on touche le champ, décale toute la page et coupe le bouton d'envoi —
   exactement la capture envoyée par le client le 10/09 à 22h27. */
.pw-saisie input{
  flex:1;min-width:0;background:var(--fond-3);border:1px solid rgba(168,85,247,.35);
  border-radius:11px;padding:9px 14px;outline:none;font-size:16px;
  transition:border-color .2s,box-shadow .2s;
}
.pw-saisie input::placeholder{color:#5b5474}
.pw-saisie input:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(236,72,153,.16)}
.pw-saisie input[disabled]{opacity:.5}
.pw-saisie button{
  flex:none;width:42px;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#7e22ce,#ec4899);
  box-shadow:0 6px 18px rgba(126,34,206,.4);transition:transform .16s,filter .16s;
}
.pw-saisie button:hover{transform:scale(1.06)}
.pw-saisie button[disabled]{filter:grayscale(.6) brightness(.7);transform:none}

.pw-avert{
  margin-bottom:9px;padding:9px 13px;border-radius:11px;font-size:.78rem;font-weight:600;
  color:#fecaca;background:rgba(220,38,38,.16);border:1px solid rgba(248,113,113,.5);
  animation:pw-secoue .4s;
}
@keyframes pw-secoue{
  0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}
  40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}
}

/* -------------------------------- membres -------------------------------- */

.pw-membre{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:8px;border-radius:11px;background:rgba(255,255,255,.02);
  border:1px solid transparent;margin-bottom:7px;text-align:left;
  transition:background .2s,border-color .2s,transform .2s;
}
.pw-membre:hover{background:rgba(168,85,247,.16);border-color:rgba(168,85,247,.4);transform:scale(1.02)}
.pw-membre-g{display:flex;align-items:center;gap:9px;min-width:0}
.pw-membre .pw-pastille{width:34px;height:34px;font-size:.82rem}
.pw-membre-nom{display:flex;align-items:center;gap:5px;font-size:.82rem;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-membre-sous{font-size:.68rem;color:var(--gris);margin-top:1px}
.pw-loc{font-weight:700}
.pw-loc-0{color:#38bdf8}.pw-loc-1{color:#34d399}.pw-loc-2{color:#f472b6}
.pw-loc-3{color:#fbbf24}.pw-loc-4{color:#a78bfa}

/* L'indicateur « caméra ouverte » qui clignote doucement sous le pseudo. */
.pw-cam{
  display:flex;align-items:center;gap:4px;margin-top:2px;
  font-size:.62rem;font-weight:800;text-transform:uppercase;color:var(--rose);
  animation:pw-clignote 1.8s ease-in-out infinite alternate;
}
@keyframes pw-clignote{
  from{opacity:.35;text-shadow:0 0 2px rgba(236,72,153,.2)}
  to{opacity:1;text-shadow:0 0 9px rgba(236,72,153,.85)}
}
.pw-cam i{width:6px;height:6px;border-radius:50%;background:var(--rose);
  animation:pw-cam-point 1.8s ease-in-out infinite alternate}
@keyframes pw-cam-point{
  from{transform:scale(.8);box-shadow:0 0 2px var(--rose)}
  to{transform:scale(1.35);box-shadow:0 0 9px var(--rose)}
}

.pw-vip{
  flex:none;font-size:.58rem;font-weight:800;padding:2px 7px;border-radius:7px;color:#fff;
  background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 2px 8px rgba(245,158,11,.4);
}

.pw-vide{padding:22px 12px;text-align:center;color:#6b6480;font-size:.78rem;line-height:1.5}

/* Étiquette de profil, sous le pseudo dans la liste et à côté dans les bulles. */
.pw-etiq{
  display:inline-flex;align-items:center;gap:3px;
  padding:1px 7px;border-radius:999px;font-size:.6rem;font-weight:800;
  letter-spacing:.02em;text-shadow:none;vertical-align:middle;
  background:rgba(148,163,184,.2);color:#cbd5e1;
}
.pw-etiq em{font-style:normal;font-size:.7rem}
.pw-etiq-femme    {background:rgba(236,72,153,.24);color:#f9a8d4}
.pw-etiq-homme    {background:rgba(56,189,248,.24);color:#7dd3fc}
.pw-etiq-couple   {background:rgba(168,85,247,.26);color:#d8b4fe}
.pw-etiq-lesbienne{background:rgba(244,114,182,.24);color:#fbcfe8}
.pw-etiq-trans    {background:rgba(125,211,252,.22);color:#bae6fd}
.pw-etiq-lgbt     {background:linear-gradient(90deg,rgba(239,68,68,.3),rgba(245,158,11,.3),rgba(34,197,94,.3),rgba(59,130,246,.3),rgba(168,85,247,.3));color:#f1f5f9}
.pw-membre-col{min-width:0}
.pw-membre-etiq{margin-top:3px}

.pw-18{
  flex:none;font-size:.55rem;font-weight:900;padding:1px 5px;border-radius:6px;
  background:rgba(239,68,68,.24);color:#fca5a5;letter-spacing:.03em;
}

/* --------------------------------- privé --------------------------------- */

.pw-prive{background:var(--fond-2);border-left:1px solid rgba(255,255,255,.05)}
.pw-prive-titre{
  flex:none;display:flex;align-items:center;gap:9px;
  padding:11px 14px;font-weight:800;font-size:.9rem;color:var(--violet-clair);
  border-bottom:2px solid rgba(168,85,247,.55);
}
.pw-retour{
  flex:none;width:28px;height:28px;border-radius:9px;font-size:1rem;font-weight:900;
  background:rgba(168,85,247,.18);color:var(--violet-clair);
}
.pw-retour:hover{background:rgba(168,85,247,.35);color:#fff}
.pw-prive-liste{flex:1;min-height:0;overflow-y:auto;padding:10px}
.pw-prive-fil{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:14px;display:flex;flex-direction:column;gap:11px;
}
.pw-neuf{background:linear-gradient(135deg,#ec4899,#be185d);box-shadow:0 2px 8px rgba(236,72,153,.45)}

/* ================================ MODALE ================================ */

/* DEFAUT SIGNALE LE 12/09 : « sur mobile on peut pas accéder au paiement ni
   accéder au bouton ». La fenêtre des Pass fait 1065 px de haut sur un écran de
   780 : elle commençait à -142 px, son bouton finissait 117 px SOUS l'écran, et
   ce voile ne défilait pas (`overflow:visible`). Le bouton était là, visible sur
   la capture, et physiquement inatteignable.

   `align-items:flex-start` + `margin:auto` sur l'enfant, et surtout PAS
   `align-items:center` : dans un conteneur qui défile, centrer rend le HAUT du
   contenu inaccessible dès qu'il déborde. Même piège que l'écran d'entrée. */
.pw-voile{
  position:fixed;inset:0;z-index:70;display:flex;align-items:flex-start;justify-content:center;
  padding:20px;background:rgba(2,1,6,.82);backdrop-filter:blur(3px);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  animation:pw-fondu .22s ease-out;
}
@keyframes pw-fondu{from{opacity:0}to{opacity:1}}
.pw-modale{
  width:100%;max-width:400px;margin:auto;flex:0 0 auto;background:var(--fond-3);
  border:1px solid rgba(168,85,247,.55);border-radius:18px;padding:24px;
  box-shadow:0 24px 60px rgba(0,0,0,.65),var(--ombre-violet);
  animation:pw-monte .3s cubic-bezier(.2,.9,.3,1.15);
}
.pw-modale h3{font-size:1.05rem;margin-bottom:9px;color:var(--violet-clair)}
.pw-modale p{font-size:.85rem;line-height:1.55;color:#c3bad6;margin-bottom:16px}
.pw-modale .pw-champ{margin-bottom:14px}
.pw-modale-actions{display:flex;gap:9px}
.pw-modale-actions button{flex:1;padding:11px;border-radius:11px;font-weight:800;font-size:.85rem}
.pw-oui{background:linear-gradient(135deg,#7e22ce,#ec4899);color:#fff;
  box-shadow:0 8px 20px rgba(126,34,206,.4)}
.pw-non{background:rgba(255,255,255,.07);color:#c3bad6}
.pw-modale .pw-err{text-align:left;margin:0 0 10px}

/* ================================ ONGLETS =============================== */

.pw-onglets{display:none}

/* ============================== RESPONSIVE ============================== */

@media (max-width:1180px){
  .pw-grille{grid-template-columns:236px minmax(0,1fr) 262px}
}

/* Tablette : la liste des membres passe en tiroir, les salons restent.
   Intervalle FERME (721 → 980) et non « max-width:980px » : les regles de ce
   bloc masquent deux des trois onglets, et comme leur selecteur est plus precis
   que celui du bloc telephone, un simple max-width les aurait laissees gagner
   en dessous de 720 px — la barre d'onglets du telephone n'aurait montre qu'un
   seul bouton sur trois. */
@media (min-width:721px) and (max-width:980px){
  .pw-grille{grid-template-columns:224px minmax(0,1fr)}
  .pw-membres{
    position:absolute;top:calc(var(--haut) + env(safe-area-inset-top));right:0;bottom:0;
    width:280px;z-index:20;border-left:1px solid rgba(168,85,247,.35);
    box-shadow:-14px 0 40px rgba(0,0,0,.5);transform:translateX(100%);
    transition:transform .28s cubic-bezier(.2,.9,.3,1);
  }
  .pw-membres.pw-ouvert{transform:none}
  .pw-onglets{
    display:grid;grid-template-columns:1fr;position:fixed;right:14px;bottom:18px;z-index:30;
    background:none;border:0;padding:0;
  }
  .pw-onglets button[data-vue="salons"],
  .pw-onglets button[data-vue="tchat"],
  .pw-onglets button[data-vue="prive"]{display:none}   /* le bouton Privé est dans l'en-tête */
  .pw-onglets button[data-vue="membres"]{
    display:flex;align-items:center;gap:7px;padding:11px 15px;border-radius:24px;
    background:linear-gradient(135deg,#7e22ce,#ec4899);color:#fff;font-weight:800;font-size:.8rem;
    box-shadow:0 10px 26px rgba(126,34,206,.5);
  }
}

/* Téléphone : trois vues, une barre d'onglets en bas. */
@media (max-width:720px){
  :root{--onglets:60px}

  .pw-bandeau{display:none}
  .pw-haut{gap:10px;justify-content:space-between}

  .pw-grille{
    grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);
    padding-bottom:calc(var(--onglets) + env(safe-area-inset-bottom));
  }
  .pw-col{grid-area:1/1;min-width:0}

  /* Une seule vue visible à la fois : plus de tiroirs, ce sont des onglets. */
  .pw-salons,.pw-membres{
    position:static;transform:none;width:auto;box-shadow:none;border:0;
    padding:10px 12px calc(14px + env(safe-area-inset-bottom));
  }
  .pw-prive{
    position:static;transform:none;width:auto;box-shadow:none;border:0;
  }
  .pw-btn-mp{display:none}
  .pw-col{display:none}
  .pw-app[data-vue="salons"] .pw-salons,
  .pw-app[data-vue="tchat"]  .pw-tchat,
  .pw-app[data-vue="prive"]  .pw-prive,
  .pw-app[data-vue="membres"] .pw-membres{display:flex;animation:pw-vue .26s ease-out}
  @keyframes pw-vue{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

  .pw-tchat-titre{padding:10px 14px;font-size:.9rem}
  .pw-messages{padding:14px 12px;gap:11px}
  .pw-bulle-msg{max-width:84%;font-size:.86rem}
  .pw-saisie{padding:10px 11px;padding-bottom:10px}

  .pw-onglets{
    display:grid;grid-template-columns:repeat(4,1fr);position:fixed;
    left:0;right:0;bottom:0;z-index:40;
    height:calc(var(--onglets) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:rgba(11,8,24,.96);backdrop-filter:blur(12px);
    border-top:1px solid rgba(168,85,247,.28);border-radius:0;box-shadow:none;
  }
  .pw-onglets button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    position:relative;font-size:.66rem;font-weight:700;color:#7d7593;
    background:none;box-shadow:none;padding:0;border-radius:0;
    transition:color .2s;
  }
  .pw-onglets button span{font-size:1.15rem;line-height:1;transition:transform .2s}
  .pw-onglets button.actif{color:var(--violet-clair)}
  .pw-onglets button.actif span{transform:translateY(-2px) scale(1.14)}
  .pw-onglets button.actif::before{
    content:'';position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 4px 4px;
    background:linear-gradient(90deg,var(--violet),var(--rose));box-shadow:0 0 10px var(--violet);
  }
  .pw-onglets em{
    position:absolute;top:5px;right:calc(50% - 19px);font-style:normal;
    min-width:17px;padding:1px 4px;border-radius:9px;font-size:.6rem;font-weight:800;
    background:var(--rose);color:#fff;
  }
}

@media (max-width:380px){
  .pw-carte{padding:22px 18px 18px}
  .pw-logo{font-size:1.3rem}
  .pw-enligne{font-size:.72rem}
}

/* Certaines personnes règlent leur téléphone pour supprimer les animations —
   on les respecte, le site reste utilisable sans un seul mouvement. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ======================== PIÈCES JOINTES ET EMOJIS ====================== */

.pw-outil{
  flex:none;width:40px;border-radius:12px;font-size:1.15rem;line-height:1;
  background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.3);
  transition:background .2s,transform .16s;
}
.pw-outil:hover{background:rgba(168,85,247,.3);transform:translateY(-1px)}

/* Aperçu de l'image choisie, AVANT l'envoi : on voit ce qu'on s'apprête à
   publier plutôt que de le découvrir dans le salon. */
.pw-jointe{
  display:flex;align-items:center;gap:10px;margin-bottom:9px;padding:7px 10px;
  background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.3);border-radius:12px;
  font-size:.76rem;color:#c9b8e6;
}
.pw-jointe img{width:44px;height:44px;object-fit:cover;border-radius:8px;flex:none}
.pw-jointe span{flex:1;min-width:0}
.pw-jointe button{
  flex:none;width:26px;height:26px;border-radius:8px;font-weight:900;color:#fca5a5;
  background:rgba(239,68,68,.18);
}
.pw-jointe button:hover{background:rgba(239,68,68,.4);color:#fff}

/* Image reçue dans une bulle. */
.pw-media{display:block;margin-top:6px;border-radius:12px;overflow:hidden;line-height:0}
.pw-media img{
  max-width:100%;max-height:260px;width:auto;height:auto;display:block;
  border-radius:12px;background:rgba(255,255,255,.04);
  transition:transform .2s;
}
.pw-media:hover img{transform:scale(1.02)}

.pw-emojis{
  position:absolute;bottom:100%;left:10px;right:10px;max-height:190px;overflow-y:auto;
  display:flex;flex-wrap:wrap;gap:3px;padding:10px;margin-bottom:8px;z-index:30;
  background:var(--fond-3);border:1px solid rgba(168,85,247,.45);border-radius:14px;
  box-shadow:0 -12px 34px rgba(0,0,0,.55);
}
.pw-emoji{
  width:36px;height:36px;border-radius:9px;font-size:1.25rem;line-height:1;
  transition:background .15s,transform .15s;
}
.pw-emoji:hover{background:rgba(168,85,247,.28);transform:scale(1.18)}
.pw-saisie{position:relative}

/* Drapeau « signaler ce message », discret jusqu'au survol. */
/* Le drapeau de signalement est passé DANS l'en-tête, au-dessus de la bulle
   (refonte du 12/09). Il était `position:absolute` calé sur la bulle : laissé
   tel quel il se serait accroché à un ancêtre positionné au hasard et posé
   n'importe où sur la page. C'est un élément de ligne, tout simplement. */
.pw-signaler-msg{
  font-size:.72rem;color:#f87171;opacity:0;padding:1px 5px;border-radius:6px;
  background:transparent;border:0;cursor:pointer;line-height:1;
  transition:opacity .18s,background .18s;
}
.pw-msg:hover .pw-signaler-msg{opacity:.75}
.pw-signaler-msg:hover{opacity:1 !important;background:rgba(239,68,68,.2)}
/* Sur téléphone il n'y a pas de survol : le drapeau reste visible, en pâle. */
@media (hover:none){ .pw-signaler-msg{opacity:.45} }

/* Mon propre salon : croix de suppression. */
.pw-salon.pw-mien{position:relative;padding-right:34px}
.pw-fermer-salon{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;display:grid;place-items:center;border-radius:6px;
  font-size:.7rem;font-weight:900;color:#fca5a5;background:rgba(239,68,68,.18);
}
.pw-fermer-salon:hover{background:rgba(239,68,68,.45);color:#fff}

/* ==================== VISIONNEUSE D'IMAGE FLOTTANTE ==================== */

/* L'image s'ouvre AU-DESSUS du tchat, sans ouvrir d'onglet ni quitter la
   conversation — « les GIF et les images seront flottés comme l'autre site ». */
.pw-loupe{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(2,1,6,.93);backdrop-filter:blur(4px);
  animation:pw-fondu .18s ease-out;
}
.pw-loupe img{
  max-width:100%;max-height:100%;border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.8);
  animation:pw-monte .26s cubic-bezier(.2,.9,.3,1.15);
}
.pw-loupe-fermer{
  position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;
  width:42px;height:42px;border-radius:50%;font-size:1.1rem;font-weight:900;color:#fff;
  background:rgba(255,255,255,.14);backdrop-filter:blur(6px);
}
.pw-loupe-fermer:hover{background:rgba(239,68,68,.7)}

/* Toute image reçue arrive voilée : « je veux les images floutées partout dans
   le site, la personne doit cliquer pour voir » (client, 11/09). */
.pw-media{position:relative;display:block;border:0;padding:0;background:none;cursor:zoom-in}
.pw-media.pw-floute{cursor:pointer}
.pw-media.pw-floute img{filter:blur(22px);transform:scale(.99)}
.pw-voile-img{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;color:#fff;letter-spacing:.02em;
  background:rgba(11,8,24,.35);border-radius:12px;text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.pw-media:not(.pw-floute) .pw-voile-img{display:none}

/* Le sélecteur de pays occupe toute la largeur, au-dessus du code postal. */
#pwPays{margin-bottom:0}

/* Sur téléphone le privé est un onglet : pas de croix, la barre du bas suffit. */
@media (max-width:720px){
  .pw-prive-fermer{display:none}
  .pw-prive-liste,.pw-prive-fil,.pw-prive .pw-saisie,.pw-prive-titre{max-width:none}
}

/* ===================== ÉCRIT / CITATIONS / RÉACTIONS ==================== */

/* « X est en train d'écrire… » — trois points qui rebondissent, comme partout
   ailleurs, pour que le geste soit reconnu sans lire. */
.pw-tape{
  flex:none;display:flex;align-items:center;gap:4px;
  padding:4px 16px 6px;font-size:.74rem;color:#9b91b5;
}
.pw-tape em{
  width:5px;height:5px;border-radius:50%;background:var(--violet);
  animation:pw-rebond 1.1s infinite ease-in-out;
}
.pw-tape em:nth-child(2){animation-delay:.15s}
.pw-tape em:nth-child(3){animation-delay:.3s}
.pw-tape span{margin-left:5px}
@keyframes pw-rebond{
  0%,60%,100%{transform:translateY(0);opacity:.45}
  30%{transform:translateY(-4px);opacity:1}
}

/* Un @pseudo dans un message. */
.pw-citation{
  color:#a5f3fc;font-weight:700;background:rgba(56,189,248,.16);
  padding:0 4px;border-radius:5px;
}
/* Le message où JE suis cité ressort — chez moi seulement. */
.pw-msg.pw-cite .pw-bulle-msg{
  border-color:rgba(56,189,248,.65);
  box-shadow:0 0 0 1px rgba(56,189,248,.35),0 4px 18px rgba(56,189,248,.18);
  background:linear-gradient(135deg,rgba(8,47,73,.55),var(--fond-3));
}

/* Réactions : discrètes tant qu'on n'a pas voté, lisibles ensuite. */
/* Les réactions sont sorties de la bulle : plus de marge du haut, elles se
   posent juste dessous et ne gonflent plus le message. */
.pw-reactions{display:flex;gap:5px;margin:1px 0 0 3px}
.pw-rea{
  display:inline-flex;align-items:center;gap:3px;
  padding:1px 7px;border-radius:999px;font-size:.78rem;line-height:1.5;
  background:rgba(255,255,255,.06);border:1px solid transparent;
  transition:background .18s,border-color .18s,transform .15s;
}
.pw-rea:hover{background:rgba(168,85,247,.22);transform:translateY(-1px)}
.pw-rea-n{font-style:normal;font-size:.68rem;font-weight:800;color:#c4b5fd}
.pw-rea-moi{background:rgba(168,85,247,.3);border-color:rgba(168,85,247,.6)}
.pw-rea-vide{opacity:.4}
.pw-rea-vide:hover{opacity:1}
@media (hover:none){ .pw-rea-vide{opacity:.55} }

/* ================== MESSAGES PRIVÉS : LISTE + CONVERSATION ============== */

/* ATTENTION : ne PAS remettre `display` ici. Cette règle est plus bas dans le
   fichier que `.pw-prive{display:none}` et la supplantait : le panneau fermé
   redevenait `flex`, gardait sa boîte par-dessus le tchat et avalait les clics
   sur les réactions. Elle ne décrit que le SENS des colonnes. */
.pw-prive{flex-direction:row}
.pw-prive-gauche{
  flex:none;width:260px;display:flex;flex-direction:column;min-height:0;
  border-right:1px solid rgba(255,255,255,.06);background:var(--fond-2);
}
.pw-prive-droite{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.pw-prive-onglets{display:grid;grid-template-columns:1fr 1fr;flex:none}
.pw-prive-onglets button{
  padding:12px 6px;font-size:.8rem;font-weight:800;color:#8f88a6;
  border-bottom:2px solid transparent;
}
.pw-prive-onglets button.actif{color:var(--violet-clair);border-bottom-color:var(--violet)}
.pw-prive-onglets button:hover{color:#fff}
.pw-prive-liste{flex:1;min-height:0;overflow-y:auto;padding:8px}

@media (max-width:720px){
  /* Sur téléphone, la liste occupe tout l'écran puis cède la place au fil. */
  .pw-prive{flex-direction:column}
  .pw-prive-gauche{width:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.06)}
  .pw-prive-onglets{display:none}
  .pw-app[data-mp="ouvert"] .pw-prive-gauche{display:none}
  .pw-prive-droite{flex:1}
}

@media (max-width:720px){
  /* En mode onglet, c'est `display` qui décide : on rend la visibilité au
     panneau, sinon il resterait invisible tout en occupant l'écran. */
  .pw-prive{visibility:visible;transform:none;transition:none}
}

/* ====================== TRANCHE 8 — la main de l'administrateur ========== */

/* Lien dans le bandeau du haut : seul l'administrateur peut en poser un, il
   doit donc se voir comme un lien et pas comme du texte de plus. */
.pw-bandeau-lien{
  margin-left:10px;padding:2px 10px;border-radius:20px;flex:0 0 auto;
  background:rgba(255,255,255,.16);color:#fff;text-decoration:none;
  font-weight:800;font-size:.76rem;white-space:nowrap;
  transition:background .18s;
}
.pw-bandeau-lien:hover{background:rgba(255,255,255,.3)}

/* Bouton Visible / Invisible. Absent pour tout le monde sauf l'administration :
   le serveur ne renvoie `patron` qu'a qui a la main. */
.pw-btn-invisible{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border:1px solid rgba(168,85,247,.4);border-radius:20px;
  background:rgba(168,85,247,.12);color:#e9d5ff;
  font:inherit;font-weight:800;font-size:.78rem;cursor:pointer;white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s;
}
.pw-btn-invisible:hover{background:rgba(168,85,247,.24)}
.pw-btn-invisible.pw-invisible-on{
  background:linear-gradient(135deg,#4c1d95,#1e1b4b);
  border-color:#a78bfa;color:#fff;
  box-shadow:0 0 0 1px rgba(167,139,250,.35),0 0 16px rgba(124,58,237,.45);
  animation:pw-fantome 2.6s ease-in-out infinite;
}
@keyframes pw-fantome{0%,100%{opacity:1}50%{opacity:.62}}

/* Outils de moderation dans la fiche d'un membre. */
.pw-sep{height:1px;background:rgba(168,85,247,.25);margin:14px 0 12px}
/* `.pw-note` porte un `margin-top:-6px` pense pour l'ecran d'entree ; dans une
   fenetre il collait au bouton du dessus. */
.pw-modale .pw-note{margin-top:14px}
.pw-outils-admin{flex-direction:column;gap:7px}
.pw-outils-admin button{width:100%;text-align:left}
.pw-modale-err{color:#fca5a5;font-size:.84rem;margin:8px 0 0;min-height:1.1em}

/* Ecran de sanction. Il se pose PAR-DESSUS le tchat mais ne le remplace pas :
   on peut le fermer et continuer a lire — c'est justement ce qui evite qu'on
   revienne avec un autre pseudo. */
.pw-sanction{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(7,4,16,.86);backdrop-filter:blur(7px);
  animation:pw-voile-apparait .22s ease;
}
.pw-sanction[hidden]{display:none}
@keyframes pw-voile-apparait{from{opacity:0}to{opacity:1}}
.pw-sanction-carte{
  width:100%;max-width:440px;max-height:92vh;overflow-y:auto;
  background:linear-gradient(160deg,#1a1030,#130f24);
  border:1px solid rgba(239,68,68,.45);border-radius:20px;padding:26px 22px;
  text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.6);
  animation:pw-sanction-entre .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes pw-sanction-entre{from{transform:translateY(18px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.pw-sanction-icone{font-size:2.6rem;line-height:1;margin-bottom:10px}
.pw-sanction-carte h2{font-size:1.15rem;color:#fca5a5;margin-bottom:12px}
.pw-sanction-motif,.pw-sanction-fin{font-size:.92rem;color:#d6cfe8;margin-bottom:5px}
.pw-sanction-motif strong{color:#fff}
.pw-sanction-rep{
  margin:14px 0;padding:12px;border-radius:12px;text-align:left;
  background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);
  font-size:.88rem;color:#bbf7d0;
}
.pw-sanction-rep[hidden]{display:none}
.pw-sanction-carte form{margin-top:18px;text-align:left}
.pw-sanction-carte label{
  display:block;font-size:.8rem;color:#b9a8d8;margin-bottom:7px;font-weight:700;
}
.pw-sanction-carte textarea{
  width:100%;background:#0f0b1e;color:#f4f2fb;border:1px solid rgba(168,85,247,.3);
  border-radius:11px;padding:11px;font:inherit;font-size:16px;resize:vertical;outline:none;
}
.pw-sanction-carte textarea:focus{border-color:#ec4899}
.pw-sanction-carte form button{
  width:100%;margin-top:11px;padding:12px;border:0;border-radius:11px;
  background:linear-gradient(135deg,#7e22ce,#c026d3);color:#fff;
  font:inherit;font-weight:800;cursor:pointer;
}
.pw-sanction-err{color:#fca5a5;font-size:.84rem;margin-top:8px;min-height:1.1em}
.pw-sanction-fermer{
  margin-top:16px;background:none;border:0;color:#b9a8d8;
  font:inherit;font-size:.85rem;text-decoration:underline;cursor:pointer;
}

@media (max-width:720px){
  /* Sur telephone le haut est deja charge : on garde le bouton, on retire le
     mot. L'icone suffit, et elle change quand l'etat change. */
  .pw-btn-invisible em{display:none}
  .pw-btn-invisible{padding:7px 10px}

  /* Le bandeau est masque sur telephone (ligne 577) — mais c'est justement la
     que le client regarde son site. On le REMET des qu'il porte un message
     ECRIT par l'administration, jamais pour le rappel par defaut qui ne ferait
     que voler une ligne. Deux classes (0,2,0) contre une (0,1,0) : cette regle
     gagne quel que soit l'ordre des declarations. */
  .pw-bandeau.pw-bandeau-perso{
    display:flex;flex:0 0 100%;order:2;margin:0 0 7px;
    font-size:.7rem;padding:4px 11px;
  }
  .pw-haut:has(.pw-bandeau-perso){
    height:auto;flex-wrap:wrap;padding-bottom:0;align-content:center;
  }
  .pw-bandeau.pw-bandeau-perso .pw-bandeau-lien{margin-left:7px;padding:1px 8px}
  /* Deux lignes plutot que des points de suspension : c'est une annonce, elle
     doit se lire en entier. */
  .pw-bandeau.pw-bandeau-perso .pw-bandeau-txt{
    white-space:normal;overflow:visible;text-overflow:clip;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    line-height:1.25;
  }
}

/* Repli pour les navigateurs sans `:has()` : le bandeau reste sur la meme
   ligne, un peu plus etroit, plutot que de deborder du haut. */
@supports not selector(:has(*)){
  @media (max-width:720px){
    .pw-bandeau.pw-bandeau-perso{flex:1 1 auto;order:0;margin:0;max-width:45vw}
  }
}

/* ============ TRANCHE 9 — la France par departement et par quartier ====== */

/* Plaque d'immatriculation : c'est ce que montre la maquette du client. Le
   bandeau bleu a gauche, le numero en noir sur blanc. */
.pw-plaque{
  display:inline-flex;align-items:center;flex:0 0 auto;
  border-radius:3px;overflow:hidden;border:1px solid rgba(255,255,255,.28);
  font-family:"Helvetica Neue",Arial,sans-serif;line-height:1;
}
.pw-plaque i{
  display:flex;align-items:center;justify-content:center;
  background:#1e3a8a;color:#fde047;font-style:normal;font-weight:800;
  font-size:.5rem;padding:3px 3px 2px;min-width:12px;
  border-bottom:2px solid #facc15;
}
.pw-plaque b{
  background:#f8fafc;color:#0b0818;font-weight:800;font-size:.72rem;
  padding:3px 5px;letter-spacing:.02em;
}

/* Region : une ligne qui se deplie. */
.pw-region{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:9px;
  padding:10px 11px;margin-bottom:4px;border:0;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.04);color:#e7e2f5;font:inherit;text-align:left;
  transition:background .18s;
}
.pw-region:hover{background:rgba(168,85,247,.14)}
.pw-region-ouverte{background:rgba(168,85,247,.16)}
.pw-region-nom{display:flex;align-items:center;gap:8px;min-width:0}
.pw-region-nom em{font-style:normal;font-weight:800;font-size:.86rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-region-emoji{flex:none;font-size:1rem}
.pw-region-droite{display:flex;align-items:center;gap:7px;flex:none}
.pw-chevron{font-size:.7rem;color:#b9a8d8;width:10px;text-align:center}

/* Le corps se deroule. `max-height` plutot que `height` : on ne connait pas la
   hauteur de 6 departements a l'avance. */
.pw-region-corps{
  margin:0 0 8px 6px;padding-left:8px;
  border-left:2px solid rgba(168,85,247,.3);
  animation:pw-deplier .22s ease-out;
}
@keyframes pw-deplier{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:none}
}
.pw-region-corps .pw-salon{padding:8px 9px}
.pw-region-corps .pw-salon .pw-salon-nom em{font-size:.83rem}

/* Le salon COURANT et le survol glissent de 4-5 px vers la droite
   (`translateX`). Sur un bouton en `width:100%`, ce glissement sort de la
   colonne : la liste devenait scrollable horizontalement de 4 px sur telephone.
   On reserve donc la gouttiere ici plutot que de retirer l'animation. */
#pwListeSalons{padding-right:6px}

/* Quartier : un cran de plus vers la droite, avec une petite maison.
   `calc()` et pas seulement `margin-left` : sinon les 14 px s'ajoutent a une
   largeur de 100 % et debordent a leur tour. */
.pw-quartier{margin-left:14px;width:calc(100% - 14px);opacity:.94}
.pw-quartier .pw-salon-nom::before{content:"↳";opacity:.5;margin-right:2px;font-size:.8rem}

/* --- ecran d'entree */
.pw-fondateur{
  /* Surtout PAS de marge negative : le logo PARLOW a sa propre hauteur de
     ligne et la mention lui rentrait dedans. */
  text-align:center;font-size:.68rem;color:#9b91b5;margin:8px 0 14px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;
}
h1.pw-accroche{font-size:1.02rem;font-weight:700}
.pw-pasrencontre{
  margin:0 0 16px;padding:11px 13px;border-radius:12px;
  background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.42);
  color:#fde68a;font-size:.79rem;line-height:1.5;
}
.pw-pasrencontre strong{color:#fff;display:block;margin-bottom:2px}
.pw-oblig{
  font-style:normal;font-size:.6rem;color:#f9a8d4;margin-left:6px;
  text-transform:uppercase;letter-spacing:.05em;
}
.pw-champ-aide{
  display:block;font-style:normal;font-size:.72rem;color:#c4b5fd;
  margin-top:5px;font-weight:700;min-height:.9rem;
}
.pw-depart{
  display:flex;align-items:center;gap:8px;margin:0 0 14px;
  padding:9px 11px;border-radius:11px;
  background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.34);
  color:#bbf7d0;font-size:.79rem;
}
.pw-depart[hidden]{display:none}

/* L'ecran d'entree porte maintenant DEUX blocs : la carte et l'annuaire des
   101 departements. En ligne (le defaut), ils se mettraient cote a cote.

   ATTENTION : on garde `justify-content:flex-start` et on centre par des marges
   `auto`. Avec `justify-content:center` dans un conteneur qui defile, le haut
   du contenu est INACCESSIBLE des qu'il deborde — le bouton « Entrer » se
   retrouverait au-dessus du bord sur un petit telephone. */
.pw-porte{flex-direction:column;justify-content:flex-start}
.pw-porte>.pw-carte{margin-top:auto;flex:none}
.pw-porte>.pw-annuaire{margin-bottom:auto}

/* --- annuaire de referencement, sous la carte d'entree */
.pw-annuaire{
  position:relative;z-index:1;
  max-width:860px;margin:26px auto 40px;padding:0 18px;color:#b9a8d8;
}
.pw-annuaire h2{font-size:1rem;color:#d8b4fe;margin-bottom:8px}
.pw-annuaire>p{font-size:.82rem;line-height:1.6;margin-bottom:18px}
/* « Tu peux supprimer celui-là de la page d'accueil, ou adapte-le » : je le
   garde — sans ces 101 liens internes, les pages de département sont
   introuvables par Google — mais replié. Une ligne par région, et les liens
   restent dans le HTML, donc suivis par les moteurs. */
.pw-annuaire-region{
  margin-bottom:6px;border:1px solid rgba(168,85,247,.18);border-radius:11px;
  background:rgba(255,255,255,.025);overflow:hidden;
}
.pw-annuaire-region>summary{
  cursor:pointer;padding:9px 13px;font-size:.79rem;font-weight:800;color:#d8b4fe;
  display:flex;align-items:center;gap:8px;list-style:none;
}
.pw-annuaire-region>summary::-webkit-details-marker{display:none}
.pw-annuaire-region>summary::after{
  content:'▸';margin-left:auto;font-size:.7rem;color:#9b91b5;transition:transform .2s;
}
.pw-annuaire-region[open]>summary::after{transform:rotate(90deg)}
.pw-annuaire-region>summary:hover{background:rgba(168,85,247,.12)}
.pw-annuaire-region em{font-style:normal;color:#8b8298;font-weight:600;font-size:.72rem}
.pw-annuaire-region ul{padding:0 13px 12px}
.pw-annuaire ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.pw-annuaire li a{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:9px;text-decoration:none;
  background:rgba(255,255,255,.05);color:#e7e2f5;font-size:.78rem;
  transition:background .16s;
}
.pw-annuaire li a:hover{background:rgba(168,85,247,.24)}

/* --- la « poupe » d'avertissement */
.pw-prevenir{
  position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(7,4,16,.9);backdrop-filter:blur(8px);
  animation:pw-voile-apparait .25s ease;
}
.pw-prevenir[hidden]{display:none}
.pw-prevenir-carte{
  width:100%;max-width:430px;max-height:92vh;overflow-y:auto;text-align:center;
  background:linear-gradient(160deg,#1a1030,#130f24);
  border:1px solid rgba(245,158,11,.5);border-radius:20px;padding:28px 22px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  animation:pw-sanction-entre .32s cubic-bezier(.2,.9,.3,1);
}
.pw-prevenir-icone{font-size:2.6rem;line-height:1;margin-bottom:10px}
.pw-prevenir-carte h2{font-size:1.15rem;color:#fcd34d;margin-bottom:12px}
.pw-prevenir-fort{
  font-size:1.02rem;font-weight:800;color:#fff;margin-bottom:12px;
  padding:9px;border-radius:11px;background:rgba(245,158,11,.16);
}
.pw-prevenir-carte p{font-size:.87rem;color:#d6cfe8;line-height:1.55;margin-bottom:11px}
.pw-prevenir-regle{font-size:.79rem !important;color:#9b91b5 !important}
.pw-prevenir-carte button{
  width:100%;margin-top:8px;padding:13px;border:0;border-radius:12px;
  background:linear-gradient(135deg,#7e22ce,#c026d3);color:#fff;
  font:inherit;font-weight:800;cursor:pointer;
}

@media (max-width:720px){
  .pw-annuaire{margin-top:20px;padding:0 14px}
  .pw-annuaire li a{font-size:.74rem;padding:4px 8px}

  /* Sur téléphone la fenêtre des Pass est forcément haute (trois formules
     empilées) : on la resserre, et le voile défile pour le reste. */
  .pw-voile{padding:12px}
  .pw-modale{padding:18px}
  .pw-passes{gap:9px;margin:11px 0 4px}
  .pw-pass{padding:11px}
  .pw-pass li{font-size:.76rem}
  .pw-modale-actions button{padding:13px}
}

/* ============= TRANCHE 10 — corrections demandees le 12/09 =============== */

/* Ruban tout en haut : « le site est géré par l'association CampGo ».
   `flex:none` dans la colonne de .pw-app : il prend sa hauteur et rend le
   reste au tchat, il ne se superpose a rien. */
.pw-ruban{
  flex:none;text-align:center;font-size:.66rem;letter-spacing:.05em;
  padding:4px 10px;color:#c4b5fd;
  background:linear-gradient(90deg,rgba(76,29,149,.55),rgba(192,38,211,.4),rgba(76,29,149,.55));
  border-bottom:1px solid rgba(168,85,247,.22);
  padding-top:calc(4px + env(safe-area-inset-top));
}
.pw-ruban strong{color:#fff;font-weight:800}

/* Le ruban ajoute sa hauteur au-dessus de l'en-tete : celui-ci ne doit plus
   reserver la marge de l'encoche, sinon elle est comptee deux fois. */
.pw-haut{padding-top:0;height:var(--haut)}

/* Bouton « Pass Région » dans l'en-tete. */
.pw-btn-pass{
  display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;
  padding:7px 13px;border:1px solid rgba(245,158,11,.5);border-radius:20px;
  background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(236,72,153,.2));
  color:#fcd34d;font:inherit;font-weight:800;font-size:.78rem;cursor:pointer;
  transition:background .2s,transform .16s;
}
.pw-btn-pass:hover{background:linear-gradient(135deg,rgba(245,158,11,.38),rgba(236,72,153,.34));transform:translateY(-1px)}
.pw-btn-pass[hidden]{display:none}

/* La fenetre de presentation des Pass est plus large que les autres. */
.pw-modale-large{max-width:780px}
.pw-pass-raison{
  margin:0 0 12px;padding:9px 12px;border-radius:10px;font-size:.82rem;
  background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.4);color:#fde68a;
}
.pw-passes{display:grid;grid-template-columns:1fr;gap:11px;margin:14px 0 4px}
@media (min-width:640px){ .pw-passes{grid-template-columns:repeat(3,1fr)} }
.pw-pass{
  padding:13px;border-radius:14px;text-align:left;
  background:rgba(255,255,255,.04);border:1px solid rgba(168,85,247,.24);
}
.pw-pass-phare{
  background:linear-gradient(160deg,rgba(245,158,11,.14),rgba(168,85,247,.12));
  border-color:rgba(245,158,11,.5);
}
.pw-pass-tete{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.pw-pass-emoji{font-size:1.15rem}
.pw-pass-tete strong{font-size:.9rem;color:#fff}
.pw-pass-prix{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;margin-bottom:9px}
.pw-pass-prix b{font-size:1.35rem;color:#fcd34d;font-weight:900}
.pw-pass-prix span{font-size:.76rem;color:#b9a8d8}
.pw-pass-prix em{
  font-style:normal;font-size:.7rem;color:#9b91b5;
  flex:0 0 100%;
}
.pw-pass ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.pw-pass li{
  position:relative;padding-left:16px;font-size:.78rem;line-height:1.4;color:#d6cfe8;
}
.pw-pass li::before{content:'✓';position:absolute;left:0;color:#86efac;font-weight:900;font-size:.75rem}

/* ========= TRANCHE 11 — robot de suggestions et ouverture programmee ===== */

/* Encart du robot : il ne doit PAS ressembler a une bulle de membre. Bord
   pointille, fond neutre, et la mention « suggestion de Parlow ». */
.pw-sugg{
  align-self:center;width:100%;max-width:min(92%,620px);
  padding:11px 14px;border-radius:13px;
  background:linear-gradient(135deg,rgba(56,189,248,.08),rgba(168,85,247,.08));
  border:1px dashed rgba(56,189,248,.45);
  animation:pw-glisse .32s cubic-bezier(.2,.9,.3,1.1);
}
.pw-sugg-tete{display:flex;align-items:center;gap:7px;margin-bottom:5px;flex-wrap:wrap}
.pw-sugg-puce{font-size:.95rem}
.pw-sugg-tete strong{font-size:.82rem;color:#7dd3fc}
.pw-sugg-tete em{
  font-style:normal;font-size:.63rem;color:#8b93a7;text-transform:uppercase;
  letter-spacing:.05em;font-weight:700;
}
.pw-sugg p{font-size:.83rem;line-height:1.45;color:#cfd6e4;margin-bottom:7px}
.pw-sugg-lien{
  display:inline-block;padding:4px 11px;border-radius:20px;text-decoration:none;
  background:rgba(56,189,248,.2);color:#bae6fd;font-size:.76rem;font-weight:800;
  transition:background .18s;
}
.pw-sugg-lien:hover{background:rgba(56,189,248,.36)}

/* --- Le mur d'avant-ouverture */
.pw-mur{
  position:fixed;inset:0;z-index:60;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:22px;
  background:radial-gradient(1200px 700px at 20% -10%,rgba(126,34,206,.35),transparent 60%),
             radial-gradient(900px 600px at 110% 110%,rgba(236,72,153,.28),transparent 60%),
             var(--fond);
}
.pw-mur-carte{
  width:100%;max-width:520px;margin:auto;flex:0 0 auto;text-align:center;
  background:rgba(19,15,36,.92);border:1px solid rgba(168,85,247,.4);
  border-radius:22px;padding:30px 24px;
  box-shadow:0 26px 70px rgba(0,0,0,.6);
}
.pw-mur-carte h1{font-size:1.2rem;color:#fff;margin:6px 0 12px}
.pw-mur-texte{font-size:.86rem;line-height:1.6;color:#c3bad6;margin-bottom:20px}

.pw-mur-asso{
  font-size:.76rem;line-height:1.55;color:#c4b5fd;margin:-8px 0 20px;
  padding:10px 12px;border-radius:12px;
  background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.28);
}

.pw-compte{display:flex;gap:9px;justify-content:center;margin-bottom:12px}
.pw-compte>div{
  flex:1;max-width:92px;padding:11px 5px;border-radius:13px;
  background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.34);
}
.pw-compte b{
  display:block;font-size:1.5rem;font-weight:900;color:#fff;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.pw-compte span{
  display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;
  color:#b9a8d8;font-weight:700;margin-top:2px;
}
.pw-mur-date{font-size:.76rem;color:#9b91b5;margin-bottom:22px}

.pw-mur-carte form{text-align:left}
.pw-mur-carte label{
  display:block;font-size:.78rem;font-weight:700;color:#c4b5fd;margin-bottom:7px;
}
.pw-mur-ligne{display:flex;gap:8px}
.pw-mur-ligne input{
  flex:1;min-width:0;background:#0f0b1e;color:#f4f2fb;
  border:1px solid rgba(168,85,247,.35);border-radius:11px;
  padding:11px 13px;font:inherit;font-size:16px;outline:none;
}
.pw-mur-ligne input:focus{border-color:var(--rose)}
.pw-mur-ligne input[disabled]{opacity:.55}
.pw-mur-ligne button{
  flex:none;padding:11px 16px;border:0;border-radius:11px;color:#fff;
  background:linear-gradient(135deg,#7e22ce,#ec4899);
  font:inherit;font-weight:800;font-size:.83rem;cursor:pointer;white-space:nowrap;
}
.pw-mur-ligne button[disabled]{filter:grayscale(.5) brightness(.75)}
.pw-mur-reponse{font-size:.79rem;margin-top:9px;min-height:1.1em}
.pw-mur-ok{color:#86efac}
.pw-mur-ko{color:#fca5a5}
.pw-mur-note{font-size:.71rem;color:#8b8298;line-height:1.5;margin-top:9px}

/* Le ruban porte maintenant une phrase entiere : il doit pouvoir passer a la
   ligne plutot que de couper le texte. */
.pw-ruban{line-height:1.35;padding-top:calc(5px + env(safe-area-inset-top));padding-bottom:5px}

@media (max-width:720px){
  .pw-mur{padding:14px}
  .pw-mur-carte{padding:24px 17px}
  .pw-compte>div{padding:9px 3px}
  .pw-compte b{font-size:1.25rem}
  .pw-mur-ligne{flex-direction:column}
  .pw-mur-ligne button{width:100%}
  .pw-ruban{font-size:.62rem}
}