/* ══════════════════════════════════════════════════════════════════════════
   09/10 — Pages joueur : Actualités (index façon forum, lecture seule),
   Support (connexion, choix, formulaire), Profil (3 onglets), fil de ticket.
   Feuille autonome : couleurs reprises de la charte du site, avec valeurs de
   repli, pour ne pas dépendre de la mise en page de base.html.
   ══════════════════════════════════════════════════════════════════════════ */
.pj{
  --pj-or:var(--or,#e2b25c); --pj-or-clair:var(--or-clair,#f2cd85);
  --pj-txt:var(--txt,#dfe6f2); --pj-doux:var(--txt-doux,#9aa8bf); --pj-faible:var(--txt-faible,#6b7893);
  --pj-bord:var(--bord,rgba(139,170,214,.13)); --pj-bleu:var(--bleu-clair,#8cc9f7);
  --pj-fond:#0a0d16; --pj-fond-2:#0d111c;
  max-width:1240px; margin:0 auto; padding:clamp(1.6rem,4vw,3.2rem) clamp(1rem,4vw,2.4rem) 4rem;
  color:var(--pj-txt); font-family:'Exo 2',system-ui,sans-serif;
}
.pj *{box-sizing:border-box}
.pj a{text-decoration:none}

/* ── fil d'Ariane ─────────────────────────────────────────────────────── */
.pj-ariane{display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; font-size:.82rem;
  color:var(--pj-faible); margin:0 0 1rem; font-family:'Oxanium',sans-serif; letter-spacing:.08em; text-transform:uppercase}
.pj-ariane a{color:var(--pj-doux)}
.pj-ariane a:hover{color:var(--pj-or-clair)}
.pj-ariane span[aria-hidden]{color:var(--pj-or); opacity:.7}

/* ── cadre principal ──────────────────────────────────────────────────── */
.pj-cadre{background:linear-gradient(180deg,var(--pj-fond-2),var(--pj-fond)); border:1px solid rgba(226,178,92,.22);
  border-radius:16px; box-shadow:0 18px 48px rgba(0,0,0,.45); overflow:hidden}
.pj-cadre-tete{padding:1.15rem 1.4rem 1.05rem; border-bottom:1px dashed rgba(226,178,92,.35);
  background:linear-gradient(180deg,rgba(226,178,92,.07),transparent)}
.pj-cadre-tete h1{font-family:'Oxanium',sans-serif; font-size:clamp(1.05rem,2.2vw,1.3rem); font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--pj-or); margin:0}
.pj-cadre-tete p{margin:.35rem 0 0; color:var(--pj-doux); font-size:.92rem}
.pj-cadre-corps{padding:1.1rem 1rem 1.2rem}

/* ── bandeau de section (barre dorée à gauche) ────────────────────────── */
.pj-bandeau{display:flex; align-items:baseline; flex-wrap:wrap; gap:.6rem; margin:1.1rem 0 .3rem;
  padding:.62rem 1rem; border-left:4px solid var(--pj-or); border-radius:6px;
  background:linear-gradient(90deg,rgba(226,178,92,.30),rgba(226,178,92,.10) 55%,rgba(226,178,92,.02))}
.pj-cadre-corps > .pj-bandeau:first-child{margin-top:0}
.pj-bandeau h2{font-family:'Oxanium',sans-serif; font-size:.95rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--pj-or-clair); margin:0}
.pj-bandeau small{font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(242,205,133,.7)}

/* ── ligne d'index (rubrique ou article) ──────────────────────────────── */
.pj-ligne{display:flex; justify-content:space-between; align-items:center; gap:1.2rem;
  padding:.8rem .3rem .8rem 0; border-bottom:1px dashed rgba(139,170,214,.12)}
.pj-ligne:last-child{border-bottom:0}
.pj-ligne-g{min-width:0}
.pj-nom{font-size:1.14rem; font-weight:600; color:var(--pj-or-clair); line-height:1.3}
a.pj-nom:hover{color:#fff1cc; text-decoration:underline; text-underline-offset:3px}
.pj-sous{font-size:.86rem; color:var(--pj-doux); margin-top:.15rem}
.pj-sous b{color:var(--pj-txt); font-weight:600}
.pj-ligne-d{text-align:right; font-size:.88rem; color:var(--pj-doux); line-height:1.5; flex-shrink:0; max-width:48%}
.pj-ligne-d i{color:var(--pj-txt)}
.pj-ligne-d a{color:var(--pj-txt)}
.pj-ligne-d a:hover{color:var(--pj-or-clair)}
.pj-vide{color:var(--pj-faible); font-style:italic}
.pj-puce{display:inline-block; font-family:'Oxanium',sans-serif; font-size:.66rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:.12rem .5rem; border-radius:5px; vertical-align:middle;
  border:1px solid rgba(226,178,92,.4); color:var(--pj-or-clair); background:rgba(226,178,92,.08); margin-right:.35rem}
.pj-puce.bleu{border-color:rgba(140,201,247,.4); color:var(--pj-bleu); background:rgba(140,201,247,.08)}
.pj-puce.vert{border-color:rgba(106,211,154,.4); color:#8ee3b4; background:rgba(106,211,154,.08)}
.pj-puce.rouge{border-color:rgba(255,132,120,.45); color:#ffa69c; background:rgba(255,132,120,.08)}
.pj-puce.gris{border-color:rgba(154,168,191,.35); color:var(--pj-doux); background:rgba(154,168,191,.06)}
.pj-note{color:var(--pj-faible); font-size:.82rem; margin:1rem .2rem 0}

/* ── feuille de route ─────────────────────────────────────────────────── */
.pj-rm{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem}
.pj-rm-col h3{font-family:'Oxanium',sans-serif; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--col); margin:0 0 .6rem; padding-bottom:.45rem; border-bottom:2px solid var(--col)}
.pj-rm-item{background:rgba(255,255,255,.025); border:1px solid var(--pj-bord); border-radius:10px;
  padding:.75rem .85rem; margin-bottom:.6rem}
.pj-rm-item h4{font-family:'Oxanium',sans-serif; font-size:.96rem; margin:.15rem 0 .25rem; color:var(--pj-txt)}
.pj-rm-item p{font-size:.86rem; color:var(--pj-doux); margin:0}

/* ── article ──────────────────────────────────────────────────────────── */
.pj-article{padding:1.3rem 1.4rem 1.6rem; font-size:1rem; line-height:1.75}
.pj-article img{max-width:100%; border-radius:12px}
.pj-meta{color:var(--pj-doux); font-size:.88rem; margin-top:.35rem}

/* ── onglets (profil) ─────────────────────────────────────────────────── */
.pj-onglets{display:flex; gap:.4rem; flex-wrap:wrap; padding:.8rem 1rem 0; border-bottom:1px solid rgba(226,178,92,.22)}
.pj-onglets a{font-family:'Oxanium',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--pj-doux); padding:.6rem .95rem; border-radius:8px 8px 0 0;
  border:1px solid transparent; border-bottom:0; margin-bottom:-1px; white-space:nowrap}
.pj-onglets a:hover{color:var(--pj-txt)}
.pj-onglets a.actif{color:var(--pj-or); background:var(--pj-fond-2); border-color:rgba(226,178,92,.22)}
.pj-onglets a .n{display:inline-block; min-width:1.4em; margin-left:.35rem; padding:0 .35rem; border-radius:9px;
  background:rgba(226,178,92,.14); color:var(--pj-or-clair); font-size:.72rem; text-align:center}

/* ── fiche (profil) ───────────────────────────────────────────────────── */
.pj-fiche{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.8rem}
.pj-case{background:rgba(255,255,255,.025); border:1px solid var(--pj-bord); border-radius:10px; padding:.75rem .95rem}
.pj-case dt{font-family:'Oxanium',sans-serif; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--pj-faible)}
.pj-case dd{margin:.2rem 0 0; font-size:1.05rem; color:var(--pj-txt); word-break:break-word}
.pj-case dd small{display:block; color:var(--pj-doux); font-size:.8rem}
.pj-actions{display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin-top:1.2rem}
.pj-alerte{border:1px solid rgba(255,132,120,.4); background:rgba(255,132,120,.07); color:#ffb2a9;
  border-radius:10px; padding:.7rem .9rem; margin-bottom:1rem; font-size:.92rem}

/* ── tableau de tickets ───────────────────────────────────────────────── */
.pj-tickets{width:100%; border-collapse:collapse; font-size:.92rem}
.pj-tickets th{text-align:left; font-family:'Oxanium',sans-serif; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pj-faible); font-weight:700; padding:.5rem .6rem; border-bottom:1px solid rgba(226,178,92,.22)}
.pj-tickets td{padding:.7rem .6rem; border-bottom:1px dashed rgba(139,170,214,.12); vertical-align:middle}
.pj-tickets tr:last-child td{border-bottom:0}
.pj-tickets td.titre a{color:var(--pj-or-clair); font-weight:600}
.pj-tickets td.titre a:hover{text-decoration:underline}
.pj-tickets .num{color:var(--pj-faible); font-size:.8rem; margin-right:.3rem}

/* ── support : choix ──────────────────────────────────────────────────── */
.pj-choix{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
.pj-porte{display:block; padding:1.4rem 1.4rem 1.3rem; border-radius:14px; border:1px solid var(--pj-bord);
  background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.008)); color:var(--pj-txt);
  transition:border-color .2s,transform .2s,box-shadow .2s; position:relative; overflow:hidden}
.pj-porte::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent)}
.pj-porte:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.4); color:var(--pj-txt)}
.pj-porte .tag{font-family:'Oxanium',sans-serif; font-weight:800; letter-spacing:.2em; font-size:1.05rem; color:var(--accent)}
.pj-porte p{color:var(--pj-doux); font-size:.94rem; margin:.5rem 0 .9rem}
.pj-porte ul{margin:0 0 1rem; padding-left:1.1rem; color:var(--pj-doux); font-size:.9rem}
.pj-porte .aller{font-family:'Oxanium',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent)}

/* ── formulaires ──────────────────────────────────────────────────────── */
.pj-form{display:grid; gap:1rem}
.pj-form .duo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
.pj-champ label{display:block; font-family:'Oxanium',sans-serif; font-size:.74rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pj-or-clair); margin-bottom:.35rem}
.pj-champ label small{font-family:'Exo 2',sans-serif; text-transform:none; letter-spacing:0; font-weight:400; color:var(--pj-faible); font-size:.8rem}
.pj-champ input[type=text],.pj-champ input[type=password],.pj-champ input:not([type]),.pj-champ select,.pj-champ textarea{
  width:100%; min-height:2.9rem; background:rgba(255,255,255,.04); border:1px solid rgba(139,170,214,.22); border-radius:8px;
  color:var(--pj-txt); font:inherit; font-size:.98rem; padding:.62rem .8rem}
.pj-champ textarea{min-height:190px; resize:vertical; line-height:1.6}
.pj-champ select option{background:#0d111c; color:var(--pj-txt)}
.pj-champ input:focus,.pj-champ select:focus,.pj-champ textarea:focus{outline:none; border-color:var(--pj-or); box-shadow:0 0 0 3px rgba(226,178,92,.15)}
.pj-champ input[type=file]{width:100%; color:var(--pj-doux); font-size:.88rem; padding:.55rem; border:1px dashed rgba(139,170,214,.3);
  border-radius:8px; background:rgba(255,255,255,.02)}
.pj-champ input[type=file]::file-selector-button{font-family:'Oxanium',sans-serif; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; font-size:.72rem; border:1px solid rgba(226,178,92,.45); background:rgba(226,178,92,.1);
  color:var(--pj-or-clair); border-radius:6px; padding:.4rem .75rem; margin-right:.7rem; cursor:pointer}
.pj-aide{font-size:.82rem; color:var(--pj-faible); margin-top:.3rem}
.pj-bouton{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:'Oxanium',sans-serif;
  font-weight:700; font-size:.86rem; letter-spacing:.12em; text-transform:uppercase; padding:.75rem 1.6rem; border-radius:8px;
  border:1px solid transparent; cursor:pointer; background:linear-gradient(135deg,#f0c877,#d9a747); color:#20180a;
  box-shadow:0 6px 22px rgba(226,178,92,.22)}
.pj-bouton:hover{color:#20180a; box-shadow:0 10px 30px rgba(226,178,92,.36)}
.pj-bouton.fantome{background:transparent; color:var(--pj-doux); border-color:rgba(139,170,214,.3); box-shadow:none}
.pj-bouton.fantome:hover{color:var(--pj-txt); border-color:var(--pj-or)}
.pj-bouton.petit{padding:.5rem 1rem; font-size:.76rem}
.pj-erreur{color:#ffa69c; font-size:.9rem}

.pj-deux{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1.2rem; align-items:start}
.pj-encart{background:rgba(255,255,255,.025); border:1px solid var(--pj-bord); border-radius:12px; padding:1rem 1.1rem;
  font-size:.88rem; color:var(--pj-doux)}
.pj-encart h3{font-family:'Oxanium',sans-serif; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pj-or-clair); margin:0 0 .5rem}
.pj-encart ul{margin:0; padding-left:1.05rem}
.pj-encart li{margin-bottom:.3rem}
.pj-connexion{max-width:440px; margin:0 auto}

/* ── fil d'un ticket : aperçus ────────────────────────────────────────── */
.pj-apercu{margin-top:.6rem}
.pj-apercu img,.pj-apercu video{display:block; max-width:min(100%,560px); max-height:360px; border-radius:10px;
  border:1px solid var(--pj-bord); background:#000}

/* ── téléphone ────────────────────────────────────────────────────────── */
@media (max-width:760px){
  .pj-ligne{flex-direction:column; align-items:flex-start; gap:.35rem}
  .pj-ligne-d{text-align:left; max-width:none; font-size:.84rem}
  .pj-rm{grid-template-columns:1fr}
  .pj-choix,.pj-form .duo,.pj-deux{grid-template-columns:1fr}
  .pj-cadre-corps{padding:.9rem .8rem 1rem}
  .pj-cadre-tete{padding:1rem 1rem .9rem}
  .pj-onglets{padding:.6rem .6rem 0; gap:.2rem}
  .pj-onglets a{padding:.5rem .6rem; font-size:.72rem; letter-spacing:.06em}
  .pj-tickets thead{display:none}
  .pj-tickets, .pj-tickets tbody, .pj-tickets tr, .pj-tickets td{display:block; width:100%}
  .pj-tickets tr{padding:.7rem 0; border-bottom:1px dashed rgba(139,170,214,.14)}
  .pj-tickets tr:last-child{border-bottom:0}
  .pj-tickets td{border:0; padding:.12rem 0}
  .pj-tickets td[data-l]::before{content:attr(data-l) " : "; color:var(--pj-faible); font-size:.78rem}
}
/* 09/10 : page Gestion du compte. */
.pj-gestion{max-width:520px}
.pj-bandeau.pj-danger{border-left-color:#e0614f}
.pj-bandeau.pj-danger h2{color:#ff9d8f}
.pj-bouton.danger{background:linear-gradient(180deg,#d9573f,#a83a29); border-color:#e0614f; color:#fff; box-shadow:none}
.pj-bouton.danger:hover{filter:brightness(1.1)}
.pj-coche{display:flex; gap:.55rem; align-items:flex-start; font-size:.86rem; color:var(--pj-doux); margin:.2rem 0 .6rem; cursor:pointer}
.pj-coche input{margin-top:.2rem; accent-color:#e0614f}