/* ============================================================
   Common/CSS/panneau.css  --  le panneau lateral Compte (lot U1)
   ============================================================
   Le bouton utilisateur n'emmene plus sur une autre page : il ouvre ce
   panneau, qui glisse depuis la DROITE. Le contenu de la page reste
   visible derriere, et il n'y a aucun rechargement (CDC-026, CDC-027).

   Largeurs, du plus large au plus etroit (CDC-058) :
     >= 1600 px   420 px, le contenu principal respire
     >= 1100 px   380 px
     >= 700 px    62 %, le panneau prend de la place quand l'ecran fond
     <  700 px    100 %, plein ecran : sur telephone, un panneau etroit
                  ne sert a rien

   Le voile derriere n'est PAS opaque : le CDC demande que le contenu
   principal reste visible (CDC-027).
   ============================================================ */

:root {
    --pan-fond: rgba(10, 12, 20, 0.92);
    --pan-bord: rgba(255, 255, 255, 0.09);
    --pan-bleu: #33C6FF;
    --pan-texte: rgba(255, 255, 255, 0.88);
    --pan-attenue: rgba(255, 255, 255, 0.45);
    --pan-largeur: 380px;
}

/* ---- Le voile ---- */
#z7-panneau-voile {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;

    /* ---- CORRECTIF : LE VOILE FERME NE DOIT RIEN CAPTER -----------
       Il etait cree une fois puis conserve, et seule son OPACITE
       changeait. Apres la premiere fermeture, il restait donc un
       calque invisible, plein ecran, en z-index 100000, avec
       `pointer-events: auto` : plus AUCUN bouton de la page n'etait
       cliquable jusqu'au rechargement. C'est la cause du defaut
       « parfois plus rien ne repond » — il se produisait en realite a
       CHAQUE fermeture du panneau.

       `visibility` le sort de l'arbre d'evenements ; son delai de
       transition attend la fin du fondu pour ne pas le faire
       disparaitre d'un coup. `pointer-events` est la ceinture en plus
       de la bretelle. */
    visibility: hidden;
    pointer-events: none;
}
#z7-panneau-voile.ouvert {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.18s ease, visibility 0s;
}

/* ============================================================
   LE VERROU DE LA PAGE  —  PAR UNE CLASSE, PLUS PAR UN STYLE EN LIGNE
   ============================================================
   `panneau.js` posait `document.body.style.overflow = 'hidden'` a
   l'ouverture. Une declaration EN LIGNE non importante perd contre une
   regle d'auteur `!important` — et il en existe une, ecrite pour une
   toute autre raison :

       Accueil/CSS/landing.css, @media (max-width: 900px)
       html, body { overflow-y: auto !important; }

   Elle a ete ajoutee parce que le pied de page de l'accueil etait COUPE
   sur mobile, `Accueil/JS/main.js` posant lui aussi un overflow hidden
   en ligne. Elle fait son travail — mais elle neutralise du meme coup le
   verrou du panneau, qui emploie le meme mecanisme.

   Resultat mesure a 390 px sur l'accueil : panneau ouvert, `body` calcule
   a `auto`, la page derriere defilait encore, et le geste de defilement
   de la liste d'amis partait dans la page. Sur un vrai telephone, la
   barre d'URL apparait alors et `100dvh` change en pleine manipulation :
   la liste semble sauter, et les derniers amis deviennent impossibles a
   atteindre.

   On passe donc par une CLASSE, posee sur `<html>` ET sur `<body>` :
   `html.z7-page-verrouillee` a une specificite de (0,1,1) contre (0,0,1)
   pour `html` — elle l'emporte, meme a `!important` egal. Et comme rien
   n'est ecrit en style en ligne, la fermeture du panneau ne peut plus
   effacer un overflow qu'une autre page aurait pose elle-meme.

   `overscroll-behavior: none` ferme le dernier interstice : meme si une
   page parvenait a rester defilante, le geste ne s'y propagerait pas. */
html.z7-page-verrouillee,
body.z7-page-verrouillee {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* ---- Le panneau ---- */
#z7-panneau {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: var(--pan-largeur);
    max-width: 100vw;
    background: var(--pan-fond);
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    border-left: 1px solid var(--pan-bord);
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.5);
    z-index: 100001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.22s;
    font-family: Arial, sans-serif;

    /* Meme raison que le voile : un panneau hors ecran reste un element
       positionne. On le retire de l'arbre d'evenements tant qu'il est
       ferme, pour qu'il ne capte pas un clic sur le bord droit. */
    visibility: hidden;
    pointer-events: none;
}
#z7-panneau.ouvert {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

/* ---- En-tete : identite + fermeture ---- */
.pan-tete {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pan-bord);
    flex-shrink: 0;
}
.pan-tete-nom {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    font-family: 'Arial Black', Arial;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pan-tete-role {
    font-size: 11px;
    color: var(--pan-attenue);
    font-weight: 400;
    font-family: Arial;
}
.pan-fermer {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--pan-bord);
    color: var(--pan-texte);
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.15s;
}
.pan-fermer:hover { background: rgba(255, 255, 255, 0.14); }

/* ---- Onglets principaux (CDC-028) ---- */
.pan-onglets {
    display: flex;
    border-bottom: 1px solid var(--pan-bord);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.pan-onglets::-webkit-scrollbar { display: none; }

.pan-onglet {
    flex: 1 1 0;
    min-width: 72px;
    padding: 13px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--pan-attenue);
    font-size: 11.5px;
    font-weight: 700;
    font-family: 'Arial Black', Arial;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.pan-onglet svg { width: 17px; height: 17px; }
.pan-onglet:hover { color: var(--pan-texte); }

/* L'onglet actif est clairement identifiable (CDC-028) : couleur,
   soulignement et fond, pas seulement l'un des trois. */
.pan-onglet.actif {
    color: var(--pan-bleu);
    border-bottom-color: var(--pan-bleu);
    background: rgba(51, 198, 255, 0.09);
}

/* ---- Corps defilant ---- */
.pan-corps {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Le geste s'arrete ici. Arrive en haut ou en bas de cette zone, un
       cran de molette ou un glissement du doigt ne doit PAS repartir
       dans la page situee derriere le panneau — c'est ce qui donnait
       l'impression que la liste refusait d'aller plus loin. */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}
.pan-corps::-webkit-scrollbar { width: 5px; }
.pan-corps::-webkit-scrollbar-track { background: transparent; }
.pan-corps::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 4px; }
.pan-corps::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.26); }

.pan-vue { display: none; padding: 16px; }
.pan-vue.actif { display: block; }
/* La vue Social gere sa propre hauteur : sous-onglets fixes, liste qui
   defile, saisie collee en bas. */
.pan-vue-social.actif { display: flex; flex-direction: column; height: 100%; padding: 0; }

/* ---- Onglet Profil (CDC-029, 030, 031) ---- */
/* ---- La banniere, au format de reference du site ------------------
   Elle etait fixee a 84 px de haut : un rectangle bien plus plat que
   partout ailleurs, qui recadrait l'image du joueur autrement que sur
   sa page Compte.

   Le site a UN format de banniere, repris ici sans en inventer un
   autre : rapport 5:2 (`padding-bottom: 40%`), image en `contain`
   centree — on voit la banniere entiere, jamais rognee — et avatar en
   pourcentages, pose a cheval sur le bord bas. On retrouve exactement
   ce cadrage dans `Compte/compte.html` (bloc « Modifier mon profil »),
   dans la carte joueur et dans l'inventaire des cosmetiques. */
/*  Le ratio, l'arrondi, le cadrage de l'image et le repli viennent de
    Z7-BANNIERE (`Common/CSS/banniere.css`, classe `z7-banniere` posee
    par panneau.js). Restent ici la bordure du panneau et la place
    laissee a l'avatar a cheval sur le bord bas. */
.pan-banniere {
    border: 1px solid var(--pan-bord);
    margin-bottom: 42px;
}
.pan-avatar {
    position: absolute;
    left: 5%;
    bottom: -9%;
    width: 18%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid var(--pan-fond);
    background: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 900;
    color: #fff;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.pan-avatar img { width: 100%; height: 100%; object-fit: cover; }

.pan-pseudo { font-size: 17px; font-weight: 900; color: #fff; font-family: 'Arial Black', Arial; }
.pan-statut { font-size: 12px; color: var(--pan-attenue); margin-top: 2px; }

.pan-infos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 16px;
}
.pan-info {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 10px 12px;
}
.pan-info-lib { font-size: 10px; color: var(--pan-attenue); text-transform: uppercase; letter-spacing: 0.5px; }
.pan-info-val { font-size: 15px; font-weight: 700; color: #fff; margin-top: 3px; font-family: 'Arial Black', Arial; }

.pan-bouton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--pan-bord);
    color: var(--pan-texte);
    font-size: 13px;
    font-weight: 700;
    font-family: Arial;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.pan-bouton:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }
.pan-bouton.bleu { background: rgba(51, 198, 255, 0.12); border-color: rgba(51, 198, 255, 0.3); color: var(--pan-bleu); }
.pan-bouton.bleu:hover { background: rgba(51, 198, 255, 0.2); }
.pan-bouton.danger { color: #ff6b6b; }
.pan-bouton.danger:hover { background: rgba(255, 107, 107, 0.12); border-color: rgba(255, 107, 107, 0.3); }

/* ---- Sous-onglets Social (CDC-033) ---- */
.pan-sous-onglets {
    display: flex;
    border-bottom: 1px solid var(--pan-bord);
    flex-shrink: 0;
}
.pan-sous-onglet {
    flex: 1;
    padding: 11px 6px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--pan-attenue);
    font-size: 11.5px;
    font-weight: 700;
    font-family: 'Arial Black', Arial;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}
.pan-sous-onglet.actif {
    color: var(--pan-bleu);
    border-bottom-color: var(--pan-bleu);
    background: rgba(51, 198, 255, 0.08);
}
.pan-sous-onglet .pastille {
    display: inline-block;
    min-width: 16px;
    padding: 1px 5px;
    margin-left: 5px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-family: Arial;
}

/* Le conteneur que les fonctions sociales existantes remplissent. */
#social-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Meme regle que `.pan-corps` : la liste d'amis est la zone la plus
       longue du panneau, donc celle ou le geste risquait le plus de
       s'echapper vers la page. */
    overscroll-behavior: contain;
    padding: 14px;
    scrollbar-width: thin;
}
#social-content::-webkit-scrollbar { width: 5px; }
#social-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 4px; }

/* ---- Notifications dans le panneau ---- */
.pan-notif {
    display: flex;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 7px;
    cursor: pointer;
    transition: background 0.15s;
}
.pan-notif:hover { background: rgba(255, 255, 255, 0.07); }
.pan-notif.non-lue { background: rgba(51, 198, 255, 0.07); border-color: rgba(51, 198, 255, 0.2); }
.pan-notif-titre { font-size: 13px; font-weight: 700; color: #fff; }
.pan-notif-texte { font-size: 12px; color: var(--pan-attenue); margin-top: 2px; line-height: 1.35; }
.pan-notif-date { font-size: 10.5px; color: rgba(255, 255, 255, 0.3); margin-top: 4px; }

/* ---- Message neutre (liste vide) ---- */
.pan-vide {
    text-align: center;
    padding: 34px 16px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 13px;
    line-height: 1.5;
}

/* ---- Chat general (CDC-045 a 050) ---- */
.pan-chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.pan-chat-liste {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* ---------------------------------------------------------------
   Lot S1 · une ligne du Chat general (CDC-045, CDC-046, CDC-053)

   « Photo, pseudo, message, heure. » L'heure est poussee a droite de
   l'en-tete, qui est en flex : pas de largeur fixe a tenir.
   --------------------------------------------------------------- */
.pan-chat-msg {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 8px 10px;
}
.pan-chat-entete { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.pan-chat-avatar {
    width: 20px; height: 20px; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 900; color: #fff; flex-shrink: 0;
}
.pan-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pan-chat-pseudo {
    font-size: 11.5px; font-weight: 700; color: #fff;
    /* Un pseudo long ne pousse ni l'heure ni le sceau hors de la ligne. */
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pan-chat-heure {
    font-size: 9.5px; color: rgba(255, 255, 255, 0.3);
    margin-left: auto; padding-left: 8px; white-space: nowrap; flex-shrink: 0;
}
.pan-chat-texte {
    font-size: 12.5px; color: rgba(255, 255, 255, 0.82);
    font-family: Arial, sans-serif; line-height: 1.45;
    /* Un mot de quarante caracteres sans espace ne doit pas elargir le
       panneau : `anywhere` fait tomber la largeur minimale de la boite,
       contrairement a `break-word`. Meme raison qu'au lot G1. */
    overflow-wrap: anywhere; white-space: pre-wrap;
}

/*  CDC-046 : le message officiel du Z7 Bot. Il se voit sans lire le
    pseudo — c'est tout l'interet d'une annonce. */
.pan-chat-msg--officiel {
    background: rgba(51, 198, 255, 0.08);
    border-color: rgba(51, 198, 255, 0.3);
}
.pan-chat-officiel {
    font-size: 8.5px; font-weight: 900; letter-spacing: 0.6px;
    color: #33C6FF; background: rgba(51, 198, 255, 0.14);
    border: 1px solid rgba(51, 198, 255, 0.3);
    border-radius: 50px; padding: 1px 6px; flex-shrink: 0;
}

/*  CDC-053 : un message supprime garde sa place. Le retirer ferait
    croire a celui qui l'a lu qu'il a reve. */
.pan-chat-msg--supprime { opacity: 0.55; }
.pan-chat-msg--supprime .pan-chat-texte { font-style: italic; color: rgba(255, 255, 255, 0.4); }

.pan-chat-saisie {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--pan-bord);
    background: rgba(0, 0, 0, 0.2);
}
.pan-chat-saisie input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--pan-bord);
    color: #fff;
    font-size: 13px;
    font-family: Arial;
}
.pan-chat-saisie input::placeholder { color: rgba(255, 255, 255, 0.3); }
.pan-chat-saisie input:disabled { opacity: 0.55; cursor: not-allowed; }
.pan-chat-envoyer {
    padding: 10px 14px;
    border-radius: 9px;
    background: rgba(51, 198, 255, 0.15);
    border: 1px solid rgba(51, 198, 255, 0.3);
    color: var(--pan-bleu);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}
.pan-chat-envoyer:disabled { opacity: 0.45; cursor: not-allowed; }

.pan-reglement { padding: 18px; }
.pan-reglement h4 { color: #fff; font-size: 15px; margin: 0 0 10px; font-family: 'Arial Black', Arial; }
.pan-reglement ol { color: var(--pan-attenue); font-size: 12.5px; line-height: 1.6; padding-left: 18px; margin: 0 0 16px; }
.pan-reglement-case {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    color: var(--pan-texte);
    cursor: pointer;
    line-height: 1.4;
    margin-bottom: 14px;
}
.pan-reglement-case input { margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; }

/* Note discrete : ce qui relie une interface prete a un moteur qui
   arrive dans un lot ulterieur. Ce n'est pas un bouton factice : la
   fonction est nommee, datee, et l'element est inactif. */
.pan-note {
    margin: 0 12px 10px;
    padding: 9px 11px;
    border-radius: 9px;
    background: rgba(255, 183, 0, 0.07);
    border: 1px solid rgba(255, 183, 0, 0.22);
    color: rgba(255, 210, 120, 0.9);
    font-size: 11.5px;
    line-height: 1.45;
}

/* ============================================================
   Responsive du panneau (CDC-058)
   ============================================================ */
@media (min-width: 1600px) { :root { --pan-largeur: 420px; } }
@media (max-width: 1100px) { :root { --pan-largeur: 360px; } }

@media (max-width: 860px) {
    :root { --pan-largeur: 62vw; }
    .pan-onglet { font-size: 11px; min-width: 66px; }
}

@media (max-width: 700px) {
    :root { --pan-largeur: 100vw; }
    #z7-panneau { border-left: none; }
    /* La barre fixe du bas ne doit pas manger le contenu du panneau. */
    .pan-corps { padding-bottom: 70px; }
    .pan-vue-social.actif .pan-chat-saisie { margin-bottom: 58px; }
    .pan-onglet { font-size: 11.5px; padding: 12px 6px; }
}

@media (max-width: 420px) {
    .pan-infos { grid-template-columns: 1fr; }
    .pan-onglet span { font-size: 10.5px; }
}

/* Ecran bas (paysage telephone) : on rend la place au contenu. */
@media (max-height: 520px) {
    /*  La hauteur est bridee : la LARGEUR suit le ratio officiel, au lieu
        d'etirer la banniere en bandeau (56 px de haut sur toute la largeur
        cassait le format 2,5:1). */
    .pan-banniere { height: 56px; width: fit-content; margin-bottom: 30px; }
    .pan-avatar { width: 52px; height: 52px; bottom: -22px; }
}