/* Menu « Mon compte » en haut à droite (24 oct 2026, includes/ph_account.php) */
.ph-acct-btn { position: relative; flex-shrink: 0; box-sizing: border-box; width: 40px; height: 40px; margin-left: 8px; padding: 1px; border-radius: 50%;
               background: transparent; border: 2px solid var(--border); cursor: pointer; display: grid; place-items: center; }
.ph-acct-btn:hover, .ph-acct-btn.on { border-color: var(--t-accent, var(--accent1)); }
.ph-acct-btn .avatar-init { display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; }
.ph-acct-btn > img, .ph-acct-btn > .avatar-init { width: 100% !important; height: 100% !important; }
.ph-acct-dot { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
               background: #ef4444; color: #fff !important; -webkit-text-fill-color: #fff !important; font: 700 11px/18px system-ui, sans-serif; font-style: normal; text-align: center; }
html[data-theme="voice-clair"] .header .ph-acct-btn { border-color: rgba(255,255,255,.45) !important; }

.ph-acct-menu { position: fixed; z-index: 1001; width: 320px; max-width: calc(100vw - 16px); max-height: calc(100vh - 80px); overflow-y: auto;
                overscroll-behavior: contain; padding: 10px; background: var(--bg-card, #161b24); color: var(--text);
                border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.38); }
.ph-acct-menu[hidden] { display: none; }
.ph-acct-menu a { color: var(--text); text-decoration: none; }
.ph-acct-head { display: flex; align-items: center; gap: 12px; padding: 6px 6px 12px; border-bottom: 1px solid var(--border); }
.ph-acct-av { flex-shrink: 0; }
.ph-acct-av .avatar-init { display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; }
.ph-acct-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ph-acct-who b { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-acct-who small { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-acct-money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 6px; }
.ph-acct-money a { display: flex; flex-direction: column; gap: 1px; padding: 8px 8px 7px; border-radius: 10px; background: var(--bg-card2, rgba(127,127,127,.08));
                   border: 1px solid var(--border); min-width: 0; }
.ph-acct-money a:hover { border-color: var(--t-accent, var(--accent1)); }
.ph-acct-money span { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.ph-acct-money b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-acct-money small { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-acct-plan { font-size: 12.5px; color: var(--text-muted); padding: 2px 6px 8px; }
.ph-acct-links { display: flex; flex-direction: column; padding: 6px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ph-acct-links a, .ph-acct-out { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 8px; font-size: 14.5px; }
.ph-acct-links a:hover, .ph-acct-out:hover { background: rgba(127,127,127,.12); }
.ph-acct-links span, .ph-acct-out span { width: 22px; text-align: center; }
.ph-acct-n { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; background: #ef4444; color: #fff; font: 700 11px/18px system-ui, sans-serif; font-style: normal; text-align: center; }
.ph-acct-out { margin-top: 6px; color: #ef6b6b !important; }
@media (max-width: 768px) { .ph-acct-btn { width: 36px; height: 36px; margin: 0 8px 0 6px; } .ph-acct-btn > .avatar-init { font-size: 14px !important; } }
@media (max-width: 480px) { .ph-acct-menu { left: 8px; right: 8px !important; width: auto; max-width: none; } }
/* Le bouton 🎨 se colle à gauche des boutons du haut (🔔 ✉…) au lieu de rester près de la recherche */
.header-inner > .theme-wrap { margin-left: auto; }
.header-inner > .theme-wrap + .header-nav { margin-left: 6px; }
#phAcctMenu a { color: var(--text); }
#phAcctMenu a.ph-acct-out { color: #ef6b6b; }

/* Bandeau défilant des alertes dans la barre du haut (24 oct 2026, includes/ph_ticker.php) — à la place de 🔔 et ✉ */
.ph-tk { position: relative; flex: 1 1 auto; min-width: 140px; height: 34px; margin: 0 14px; overflow: hidden; border-radius: 17px;
         border: 1px solid var(--border); background: rgba(127,127,127,.08); font-size: 14px; line-height: 1;
         -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
                 mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
.ph-tk-run { position: absolute; left: 0; top: 50%; white-space: nowrap; will-change: transform;
             transform: translate(var(--tk-a, 100%), -50%); animation: phTk 20s linear infinite; }
.ph-tk:hover .ph-tk-run { animation-play-state: paused; }
@keyframes phTk { from { transform: translate(var(--tk-a, 100%), -50%); } to { transform: translate(var(--tk-b, -100%), -50%); } }
.ph-tk-it { display: inline-flex; align-items: center; gap: 7px; margin-right: 60px; color: var(--text); }
.ph-tk-it b { font-weight: 700; }
.ph-tk-it::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #38bdf8; flex: none; }
.ph-tk-warning::before { background: #f59e0b; } .ph-tk-danger::before { background: #ef4444; } .ph-tk-success::before { background: #22c55e; }
@media (prefers-reduced-motion: reduce) { .ph-tk-run { animation: none; transform: translate(12px, -50%); } }
@media (max-width: 768px) { .ph-tk { display: none; } }
@media (min-width: 769px) { .global-alerts-bar { display: none; } }   /* ordinateur : l'alerte passe dans le bandeau défilant du haut */

/* Téléphone (24 oct 2026, Gérald : « ça prend trop de place ») : sans les crédits dans la barre d'essai du haut (ils sont dans « Mon compte »),
   et l'en-tête du profil (couverture, photo, nom) n'est plus figé en haut : il défile avec la page comme un bloc */
@media (max-width: 768px) {
    .ph-testbar .ph-tb-credit, .ph-testbar .ph-plan { display: none !important; }
    html .pv.pv-head { position: relative; top: auto; }
}

/* Menu ☰ du téléphone (24 oct 2026, includes/ph_tiroir.php) : la page derrière ne défile plus ; le menu défile s'il est long ;
   « 💰 Mon compteur » en tête, qui déplie le compteur ; le compteur n'est plus affiché sur la page du membre au téléphone */
html.ph-tiroir { overflow: hidden !important; overscroll-behavior: none; }   /* html seulement : la barre du haut reste collée */
.mobile-nav-drawer.open { max-height: calc(100vh - 58px); max-height: calc(100dvh - 58px); overflow-y: auto; overscroll-behavior: contain; }
.ph-tr-cpt { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 4px; padding: 11px 12px; border-radius: 10px;
             border: 1px solid var(--border); background: rgba(127,127,127,.08); color: var(--text); font: inherit; font-size: 15px; font-weight: 600;
             text-align: left; cursor: pointer; }
.ph-tr-cpt i { margin-left: auto; font-style: normal; transition: transform .2s; }
.ph-tr-cpt.on { border-color: var(--t-accent, var(--accent1)); }
.ph-tr-cpt.on i { transform: rotate(180deg); }
.ph-tr-cpt-box { margin: 2px 0 8px; }
.ph-tr-cpt-box .ph-mod { margin: 0; padding: 12px; }
@media (max-width: 768px) { .ph-mod-main { display: none !important; } }

/* Téléphone (24 oct 2026, Gérald) : plus de photo « Mon compte » en haut ; son contenu est dans le menu ☰ (includes/ph_tiroir.php) */
@media (max-width: 768px) { .header .ph-acct-btn { display: none !important; } }
.hamburger-btn { position: relative; }
.ph-tr-dot { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444;
             color: #fff !important; -webkit-text-fill-color: #fff !important; font: 700 11px/18px system-ui, sans-serif; font-style: normal; text-align: center; }
.mobile-nav-drawer .ph-tr-acct { margin-bottom: 6px; }
.mobile-nav-drawer .ph-acct-head { display: none; }   /* sans la photo ni le pseudo : plus de place pour la liste (24 oct 2026, Gérald) */
.mobile-nav-drawer .ph-acct-money { margin-top: 2px; }
.mobile-nav-drawer .ph-acct-money a { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px; border: 1px solid var(--border); color: var(--text); }
.mobile-nav-drawer .ph-acct-links { border-bottom: 0; padding: 6px 0 0; margin-top: 4px; }
.mobile-nav-drawer .ph-acct-links a { padding: 10px 8px; font-size: 15px; color: var(--text); }
.mobile-nav-drawer .ph-acct-out { padding: 10px 8px; font-size: 15px; margin-top: 0; }

/* Téléphone (24 oct 2026, includes/ph_rail.php) : 4 boutons discrets collés au bord (ma page, messages, accueil, notifications), déplaçables */
.ph-rail { display: none; }
@media (max-width: 768px) {
    .ph-rail { display: flex; flex-direction: column; gap: 6px; position: fixed; left: 0; top: 38%; z-index: 310; padding: 7px 5px;   /* au-dessus de la barre du haut (300), sous les fenêtres (1000) */
               background: rgba(10,14,22,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
               border: 1px solid rgba(255,255,255,.10); border-left: 0; border-radius: 0 16px 16px 0; touch-action: none;
               transition: top .2s ease, left .2s ease, right .2s ease, opacity .2s; }
    .ph-rail.ph-rail-d { left: auto; right: 0; border-left: 1px solid rgba(255,255,255,.10); border-right: 0; border-radius: 16px 0 0 16px; }
    .ph-rail.ph-rail-glisse { transition: none; opacity: .85; }
    .ph-rail a { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px;
                 color: rgba(255,255,255,.80); text-decoration: none; -webkit-tap-highlight-color: transparent; }
    .ph-rail a.on { background: rgba(255,255,255,.14); color: #fff; }
    .ph-rail a:active { background: rgba(255,255,255,.20); }
    .ph-rail svg { width: 21px; height: 21px; }
    .ph-rail i { position: absolute; top: 0; right: -2px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: #ef4444;
                 color: #fff; font: 700 10px/15px system-ui, sans-serif; font-style: normal; text-align: center; }
    html.ph-tiroir .ph-rail { display: none; }                         /* caché quand le menu ☰ est ouvert */
    html[data-theme="voice-clair"] .ph-rail, html[data-theme="clair"] .ph-rail { background: rgba(255,255,255,.72); border-color: rgba(15,23,42,.12); }
    html[data-theme="voice-clair"] .ph-rail a, html[data-theme="clair"] .ph-rail a { color: #334155; }
    html[data-theme="voice-clair"] .ph-rail a.on, html[data-theme="clair"] .ph-rail a.on { background: rgba(15,23,42,.08); color: #0f172a; }
}

/* Téléphone (24 oct 2026, Gérald : « la barre du haut agit bizarrement ») : la barre du haut (logo, 🎨, ☰) et les onglets du fil ne restent
   plus collés en haut et ne se retirent plus : ils défilent avec la page comme les autres blocs (assets/entete.js ne les touche plus) */
@media (max-width: 768px) {
    html { --hdrH: 0px !important; }
    .header, .ph-tabs-pin { position: relative !important; top: auto !important; transform: none !important; }
}