/* THÈME GRAPHITE (14/10/2026, user : « couleur graphite », choisi parmi 7 pistes posées sur le vrai forum) : toutes les
   couleurs bronze / cuivre de cette feuille ont été converties d'un coup (LCH, CLARTÉ GARDÉE, donc mêmes contrastes) :
   fonds et gris chauds → graphite neutre, cuivre → orange vif (#ffa635, celui du reste du site), textes crème → blanc
   neutre. Intouchés : rouges des pastilles, ors vifs (pièces, Berrys), blancs. Les commentaires plus bas qui parlent de
   bronze ou de cuivre racontent l'histoire : les valeurs, elles, sont graphite. */

/* LE DESIGN SYSTEM DE L'ACCUEIL (14/10/2026, user : « en rapport avec la page d'accueil, le fond galaxy mais plus léger,
   même design système ») : les jetons de accueil.css — fond #0b0c10, verre 4,5 % et filets 8-14 %, textes #f5f5f7 /
   #a9adb8 (7,4:1 sur une conversation [R22]), UN accent orange #fec388 pour l'action [R24] (--fga-or : tous les liens, le
   point « nouveau », les chiffres des rappels), titres Plus Jakarta Sans 800. Les annonces de coffres gardent leur or
   (un trésor, pas une action). Les groupes sont OPAQUES (#121319) : les étoiles ne passent jamais derrière un texte. */
.fga{--fga-or:#fec388;--fga-or-txt:#ffdab7;--fga-sourd:#a9adb8;--fga-txt2:#e6e7eb;--fga-fond:#0b0c10;--fga-surface:#121319;--fga-tuile:rgba(255,255,255,.045);--fga-tuile-appui:rgba(255,255,255,.09);--fga-filet:rgba(255,255,255,.08);--fga-filet2:rgba(255,255,255,.14);--fga-seg:rgba(255,255,255,.06);--fga-seg-curseur:#6b6c73;--fga-police-titre:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#0b0c10;min-height:100dvh}
/* LE CIEL DE L'ACCUEIL, PLUS LÉGER : ses lueurs (orange, rouge, bleu) très atténuées et ses trois calques d'étoiles
   (portrait au téléphone, paysage au PC, les fichiers de /media/accueil/) à 42 % — les bannières de l'accueil sont à
   46 %, son héros à 75 %. Fixe, inerte [R77], aucune animation (l'ancien ciel tournait dans un Worker) [R121][R136]. */
.fga-fond{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(55% 38% at 12% 4%,rgba(254,161,39,.13),transparent 70%),radial-gradient(45% 32% at 94% 20%,rgba(90,120,255,.08),transparent 72%),radial-gradient(42% 30% at 24% 80%,rgba(255,86,70,.05),transparent 70%),#0b0c10}
.fga-fond::before{content:"";position:absolute;inset:0;opacity:.42;background:url(/assets/m-ciel-mobile-pres-5d60e1d7.svg) center top/cover no-repeat,url(/assets/m-ciel-mobile-milieu-fa34771f.svg) center top/cover no-repeat,url(/assets/m-ciel-mobile-loin-35348938.svg) center top/cover no-repeat}
@media (min-width:1024px){.fga-fond::before{opacity:.5;background:url(/assets/m-ciel-etoiles-pres-a9e94b39.svg?v=2) center/cover no-repeat,url(/assets/m-ciel-etoiles-milieu-676e2715.svg?v=2) center/cover no-repeat,url(/assets/m-ciel-etoiles-loin-c9261b21.svg?v=2) center/cover no-repeat}}
.fga .fo-page{position:relative;z-index:1}
/* LE NOIR DU FORUM VA DU BANDEAU AU PIED DE PAGE (08/10/2026, user : « le fond recouvre pas correctement en bas de la
   page », puis « en haut, le haut n'est pas colle correctement au header ») : la marge de 8 px sous le bandeau du site
   et celle du pied de page (16 px au telephone, 64 px au PC) laissaient voir le fond violet du site entre le noir du
   forum et eux. Seulement sur l'accueil du forum (la page qui porte .fga) ; les autres pages gardent leurs marges. */
body:has(.fga) .entete-app{margin-bottom:0}
body:has(.fga) footer[aria-labelledby="footer-brand"]{margin-top:0}
/* le grand titre (style iPhone) et ce que le forum contient */
.fga-tete{padding:6px 6px 14px}
.fga-titre{margin:0;font-size:34px;font-weight:700;line-height:1.12;letter-spacing:-.03em;color:#fff}
.fga-totaux{margin:3px 0 0;color:var(--fga-sourd);font-size:13.5px;font-variant-numeric:tabular-nums}
.fga-desc{margin:4px 0 0;color:var(--fga-txt2);font-size:14px;line-height:1.4}
.fga-oeil{margin:0 6px 8px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fga-sourd)}
/* LES BULLES VIDÉO « Nouveautés One Piece en vidéo » : anneau or tant que la vidéo n'est pas vue sur cet appareil,
   gris ensuite ; pastille lecture ; la rangée défile de côté. Le lecteur et la feuille sont rendus dans <body>. */
.fga-bulles{padding:2px 0 4px}
.fga-bulles-aide{display:block;margin-top:2px;font-size:12.5px;color:var(--fga-sourd)}
.fga-bulles-rang{display:flex;gap:12px;overflow-x:auto;margin:0 -12px;padding:2px 18px 14px;scroll-padding-inline:18px;scrollbar-width:none;overscroll-behavior-x:contain}
.fga-bulles-rang::-webkit-scrollbar{display:none}
.fga-bulles-rang>div{flex:none}
.fga-bulle{display:flex;flex-direction:column;align-items:center;gap:6px;width:72px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fga-bulle-anneau{position:relative;display:grid;grid-template:100%/100%;place-items:center;width:68px;height:68px;padding:2.5px;border-radius:50%;background:conic-gradient(from 210deg,#ffeedf,#fec388,#feaf56,#fec388,#ffeedf);transition:transform .15s ease}
.fga-bulle-anneau img{display:block;width:100%;height:100%;min-width:0;min-height:0;aspect-ratio:1;border:2.5px solid var(--fga-fond);border-radius:50%;object-fit:cover;background:#111}
/* Bulle ovale (04/10/2026, capture de l'user) : une affiche verticale gardait son ratio (63×109) — la grille de l'anneau avait une
   ligne automatique, le height:100% de l'image ne se résolvait pas. Pistes fixées à 100 % + ratio 1 : toujours un rond de 63 px. */
.fga-bulle.vue .fga-bulle-anneau{background:rgba(255,255,255,.22)}
.fga-bulle-lecture{position:absolute;right:-1px;bottom:-1px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--fga-fond);color:#ffdab7;box-shadow:0 0 0 2px var(--fga-fond)}
.fga-bulle-lecture svg{width:12px;height:12px;margin-left:1px;fill:currentColor}
.fga-bulle-titre{display:-webkit-box;max-width:72px;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;line-height:1.25;text-align:center;color:#f2f2f7;overflow-wrap:anywhere}
.fga-bulle.vue .fga-bulle-titre{color:#8e8e93}
.fga-bulle:active .fga-bulle-anneau{transform:scale(.96)}
.fga-bulle--ajout .fga-bulle-anneau{padding:0;border:2px dashed rgba(254,195,136,.6);background:none}
.fga-bulle-plus{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;color:#ffdab7}
.fga-bulle-plus svg{width:26px;height:26px}
html.fga-fige,html.fga-fige body{overflow:hidden}
/* Les titres de l'accueil (14/10/2026) : Plus Jakarta Sans 800, approche serrée [R14] ; le grand titre suit l'échelle
   fluide en rem [R11] ; « À la une » n'est plus une étiquette en capitales [anti-modèle 3] mais un titre de section,
   comme le nom d'un groupe. */
.fga-titre{font-family:var(--fga-police-titre);font-weight:800;font-size:clamp(2.25rem,1.75rem + 2.2vw,3rem);line-height:1.04;letter-spacing:-.035em}
.fga-grp-nom h2,.fga-une-titre{font-family:var(--fga-police-titre);font-weight:800}
.fga-oeil{margin:6px 6px 12px;font-family:var(--fga-police-titre);font-size:20px;font-weight:800;line-height:1.15;letter-spacing:-.02em;text-transform:none;color:#f5f5f7}
.fga-lecteur{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:#000;color:#fff;font-family:inherit}
.fga-lecteur-scene{position:relative;width:min(100%,430px);height:100%;overflow:hidden;background:#000;animation:fga-entree .22s cubic-bezier(.2,.8,.2,1)}
@keyframes fga-entree{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.fga-lecteur-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
/* LE FORMAT (04/10/2026, user : je choisis le format, je ne veux pas deformer) : video entiere = rien de coupe, fond flou
   de son affiche autour ; plein ecran = les bords coupes (comme avant). */
.fga-lecteur-fond{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;filter:blur(26px) brightness(.5) saturate(1.2);transform:scale(1.08)}
.fga-lecteur-scene--entier .fga-lecteur-video{object-fit:contain;background:transparent}
.fga-feuille-formats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.fga-format{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px;border:0;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#fff;font:inherit;text-align:left;cursor:pointer}
.fga-format[aria-checked="true"]{background:rgba(232,192,106,.14);box-shadow:inset 0 0 0 2px #e8c06a}
.fga-format:focus-visible{outline:2px solid #e8c06a;outline-offset:2px}
.fga-format-ecran{position:relative;flex:none;width:36px;height:64px;overflow:hidden;border-radius:7px;background:#000;box-shadow:0 0 0 1.5px rgba(255,255,255,.35)}
.fga-format-ecran img{position:absolute;inset:0;width:100%;height:100%}
.fga-format-fond{object-fit:cover;filter:blur(6px) brightness(.55);transform:scale(1.15)}
.fga-format-ecran--entier .fga-format-image{object-fit:contain}
.fga-format-ecran--plein .fga-format-image{object-fit:cover}
.fga-format-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.fga-format-txt b{font-size:14px;line-height:1.2}
.fga-format-txt small{font-size:12px;line-height:1.3;color:#aeaeb2}
.fga-lecteur-zones{position:absolute;inset:92px 0 76px;z-index:1;touch-action:manipulation}
.fga-lecteur-haut{position:absolute;inset:0 0 auto;z-index:2;padding:calc(10px + env(safe-area-inset-top,0px)) 8px 20px;background:linear-gradient(180deg,rgba(0,0,0,.62),transparent)}
.fga-lecteur-barres{display:flex;gap:4px;padding:0 6px}
.fga-lecteur-barres i{flex:1;height:3px;overflow:hidden;border-radius:2px;background:rgba(255,255,255,.32)}
.fga-lecteur-barres b{display:block;width:0;height:100%;background:#fff}
.fga-lecteur-tete{display:flex;align-items:center;gap:8px;margin-top:8px;padding-left:6px}
.fga-lecteur-ava{flex:none;width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px rgba(240,209,140,.7)}
.fga-lecteur-qui{display:flex;flex:1;flex-direction:column;min-width:0}
.fga-lecteur-qui b{overflow:hidden;font-size:15px;line-height:1.2;white-space:nowrap;text-overflow:ellipsis}
.fga-lecteur-qui span{overflow:hidden;font-size:12.5px;color:rgba(255,255,255,.78);white-space:nowrap;text-overflow:ellipsis}
.fga-lecteur-btn{display:grid;flex:none;place-items:center;min-width:44px;height:44px;padding:0 6px;border:0;border-radius:22px;background:none;color:#fff;font:inherit;cursor:pointer}
.fga-lecteur-btn svg{width:24px;height:24px}
.fga-lecteur-btn.confirme{padding:0 14px;background:#ff453a;font-size:14px;font-weight:600}
.fga-lecteur-bas{position:absolute;inset:auto 0 0;z-index:2;padding:30px 16px calc(18px + env(safe-area-inset-bottom,0px));background:linear-gradient(0deg,rgba(0,0,0,.66),transparent);pointer-events:none}
.fga-lecteur-etiquette{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 10px;border-radius:99px;background:rgba(0,0,0,.55);color:#f0d18c;font-size:13px;font-weight:600}
.fga-lecteur-etiquette svg{width:15px;height:15px}
.fga-feuille-fond{position:fixed;inset:0;z-index:2147483001;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.55);color:#fff;font-family:inherit}
.fga-feuille{width:min(100%,430px);max-height:90dvh;overflow:auto;margin:0;padding:8px 18px calc(18px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0;background:#1c1c1e}
.fga-feuille-poignee{display:block;width:36px;height:5px;margin:2px auto 12px;border-radius:3px;background:rgba(255,255,255,.25)}
.fga-feuille h3{margin:0;font-size:20px;font-weight:700;line-height:1.2}
.fga-feuille-sous{margin:6px 0 12px;font-size:14px;color:#d1d1d6}
.fga-feuille-note{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:rgba(240,209,140,.1);color:#f0d18c;font-size:13.5px}
.fga-feuille-lab{display:flex;justify-content:space-between;margin:12px 0 6px;font-size:13px;font-weight:600;color:#8e8e93}
.fga-feuille-lab small{font-size:12px;font-weight:500}
.fga-feuille-video{display:flex;align-items:center;gap:12px}
.fga-feuille-apercu{width:56px;height:56px;border-radius:12px;object-fit:cover}
.fga-feuille-choisir{min-height:44px;padding:0 16px;border:0;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.fga-feuille-choix{margin:6px 0 0;font-size:13px;color:#d1d1d6}
.fga-feuille-champ{width:100%;height:46px;padding:0 14px;border:0;border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:16px}
.fga-feuille-progres{position:relative;height:30px;margin-top:12px;overflow:hidden;border-radius:10px;background:rgba(255,255,255,.08)}
.fga-feuille-progres b{position:absolute;inset:0 auto 0 0;background:rgba(232,192,106,.35);transition:width .2s}
.fga-feuille-progres span{position:relative;display:block;padding:0 12px;font-size:13px;line-height:30px;color:#fff}
.fga-feuille-erreur{min-height:1.2em;margin:8px 0 0;font-size:13px;color:#ff6961}
.fga-feuille-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.fga-feuille-annuler{min-height:44px;padding:0 16px;border:0;border-radius:12px;background:none;color:#d1d1d6;font:inherit;font-weight:600;cursor:pointer}
.fga-feuille-publier{min-height:44px;padding:0 18px;border:0;border-radius:12px;background:#e8c06a;color:#121416;font:inherit;font-weight:700;cursor:pointer}
.fga-feuille-publier:disabled,.fga-feuille-choisir:disabled{opacity:.6}
.fga-bulles-toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:2147483002;transform:translateX(-50%);max-width:calc(100% - 32px);padding:11px 16px;border-radius:16px;background:rgba(44,44,46,.94);color:#fff;font-size:14px}
@media (prefers-reduced-motion:reduce){.fga-lecteur-scene{animation:none}.fga-bulle-anneau{transition:none}}
/* L'annonce des Berrys gagnés (refaite le 04/10/2026, « trop rapide ») : dans <body>, AU-DESSUS du lecteur, 3 s. Les pièces
   jaillissent puis retombent, la pastille éclate (0,35 s), un reflet la traverse, elle respire, puis s'envole vers le
   porte-monnaie en haut à droite (0,7 s). Mouvement réduit : un fondu. */
.fga-gain{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 92px);z-index:2147483003;pointer-events:none;transform:translateX(-50%)}
.fga-gain-vol{position:relative;display:flex;align-items:center;justify-content:center;animation:fga-gain-vol 3s cubic-bezier(.3,.7,.3,1) both}
.fga-gain-txt{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;overflow:hidden;padding:10px 22px 9px;border-radius:22px;background:linear-gradient(180deg,#ffe9a6,#ffd5ad 55%,#feaa45);color:#26282b;box-shadow:0 10px 32px rgba(254,195,136,.55),inset 0 1px 0 rgba(255,255,255,.75);animation:fga-gain-pop 3s cubic-bezier(.2,.9,.25,1) both}
.fga-gain-txt b{font-size:26px;font-weight:800;line-height:1.1;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.fga-gain-txt small{font-size:12px;font-weight:700;opacity:.82}
.fga-gain-txt::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);transform:translateX(-120%);animation:fga-gain-reflet 1.1s .35s ease-out both}
.fga-gain-piece{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffeedf,#f7c948 45%,#f1950b);box-shadow:0 0 0 1px rgba(80,82,85,.35);opacity:0;animation:fga-gain-piece 1.4s cubic-bezier(.2,.8,.3,1) both}
@keyframes fga-gain-pop{0%{opacity:0;transform:scale(.4)}10%{opacity:1;transform:scale(1.18)}17%{transform:scale(.96)}23%{transform:scale(1.03)}28%{transform:scale(1)}50%{transform:scale(1.04)}72%{transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes fga-gain-vol{0%,76%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(min(38vw,170px),-70px) scale(.35)}}
@keyframes fga-gain-reflet{to{transform:translateX(120%)}}
@keyframes fga-gain-piece{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1}55%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1) rotate(160deg)}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 70px)) scale(.8) rotate(300deg)}}
@media (prefers-reduced-motion:reduce){.fga-gain-piece,.fga-gain-txt::after{display:none}.fga-gain-txt,.fga-gain-vol{animation:fga-gain-doux 3s linear both}}
@keyframes fga-gain-doux{0%,100%{opacity:0}8%,85%{opacity:1}}
.fga-bgroupes{display:flex;gap:8px;margin:6px -2px 0;padding:2px;overflow-x:auto;scrollbar-width:none}
.fga-bgroupes::-webkit-scrollbar{display:none}
.fga-bgroupe{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;max-width:220px;padding:0 12px 0 8px;border:0;border-radius:99px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#fff;font:inherit;font-size:13.5px;cursor:pointer}
.fga-bgroupe img{flex:none;width:24px;height:24px;border-radius:50%;object-fit:cover}
.fga-bgroupe span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fga-bgroupe small{flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:rgba(255,255,255,.12);color:#d1d1d6;font-size:11px;line-height:18px;text-align:center}
.fga-bgroupe--nouveau{padding:0 14px 0 10px;color:#f0d18c}
.fga-bgroupe--nouveau svg{width:16px;height:16px}
.fga-bgroupe[aria-checked="true"]{background:rgba(232,192,106,.14);box-shadow:inset 0 0 0 2px #e8c06a}
.fga-groupe:focus-visible{outline:2px solid #e8c06a;outline-offset:2px}
/* « Active les notifications » (04/10/2026) : une tuile sous les bulles, le bouton or à droite (44 px) */
.fga-rappel{margin:0 0 12px}
.fga-rappel-ligne{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 8px 8px 12px;border-radius:16px;background:var(--fga-tuile);box-shadow:inset 0 0 0 1px var(--fga-filet2)}
.fga-rappel-ic{flex:none}
.fga-rappel-txt{display:flex;flex:1;flex-direction:column;gap:1px;min-width:0}
.fga-rappel-txt b{font-size:14.5px;font-weight:700;line-height:1.25;color:#fff}
.fga-rappel-txt span{font-size:12.5px;line-height:1.3;color:var(--fga-txt2)}
.fga-rappel-btn{flex:none;min-width:44px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--fga-or);color:#121416;font:inherit;font-size:14px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.fga-rappel-btn:active{transform:scale(.97)}
.fga-rappel-btn:disabled{opacity:.6}
.fga-rappel-btn:focus-visible{outline:2px solid #ffdab7;outline-offset:2px}
.fga-rappel-aide{margin-top:10px}
@media (prefers-reduced-motion:reduce){.fga-rappel-btn{transition:none}}
/* LES VAGUES DE COFFRES (19/10/2026) : un encadré doré sous les bulles, sur UNE rangée (user : « plus visible », puis
   « là c'est trop gros ») : le médaillon du coffre des conversations, « Prochaine à 20 h » + les heures du jour, et à
   droite le compte à rebours ; pendant une vague, la conversation et « Y aller » (44 px). Rien ne bouge en boucle sauf
   le point de la vague en cours (opacité seule). */
/* LE JOURNAL DE BORD (23/10/2026, v3 « trop gros, trop long ») : UNE bande compacte, a part de l'encart des vagues (bleu
   nuit, filet dore, sceau au globe) ; « Mises à jour du site » + « Nouveau », puis l'annonce sur une ligne et son heure. */
.fga-journal{display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:center;column-gap:10px;margin:0 0 10px;padding:9px 12px 9px 10px;border-radius:16px;background:linear-gradient(160deg,#16243d,#0c1424 78%);box-shadow:inset 0 0 0 1px rgba(242,201,125,.4);color:#e8edf5;text-decoration:none;-webkit-tap-highlight-color:transparent}
.fga-journal[data-non-lu]{box-shadow:inset 0 0 0 1.5px rgba(242,201,125,.85)}
.fga-journal:focus-visible{outline:2px solid #ffdab7;outline-offset:3px}
.fga-journal:active{transform:scale(.985)}
.fga-journal-sceau{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#ffdc96 0%,#e3a740 58%,#9c6417 100%);box-shadow:0 0 0 1.5px rgba(255,230,170,.7);color:#14213a}
.fga-journal-sceau svg{width:19px;height:19px;stroke-width:2.2}
.fga-journal-txt{min-width:0;display:grid;gap:2px}
.fga-journal-tete{display:flex;align-items:center;gap:7px;min-width:0}
.fga-journal-tete b{overflow:hidden;font-family:var(--fga-police-titre);font-size:14.5px;font-weight:800;line-height:1.25;color:#f2c97d;white-space:nowrap;text-overflow:ellipsis}
.fga-journal-neuf{flex:none;padding:1px 6px;border-radius:999px;background:#c8312f;color:#fff;font-size:10.5px;font-style:normal;font-weight:800;line-height:1.5;letter-spacing:.04em;text-transform:uppercase}
.fga-journal-ligne{display:flex;gap:5px;min-width:0;font-size:12.5px;line-height:1.3;white-space:nowrap}
.fga-journal-extrait{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#e3e9f2}
.fga-journal-quand{flex:none;color:#a9b6ca}
.fga-journal-fleche{width:16px;height:16px;color:#f2c97d}
/* ecran etroit (320 px) : le titre passe avant tout ; « Nouveau » devient une pastille rouge (le nom lu le dit) */
@media (max-width:359px){.fga-journal-neuf{width:9px;height:9px;padding:0;font-size:0;line-height:0}}
@media (prefers-reduced-motion:reduce){.fga-journal:active{transform:none}}
.fga-vague{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px;margin:0 0 12px;padding:10px 12px 10px 10px;border-radius:20px;background:radial-gradient(120% 140% at 0% 0%,rgba(255,163,61,.3),rgba(255,163,61,0) 60%),linear-gradient(160deg,#231a0f,#15110c 75%);box-shadow:inset 0 0 0 1.5px rgba(255,196,120,.5),inset 0 1px 0 rgba(255,236,200,.2),0 10px 26px -14px rgba(243,147,36,.55)}
.fga-vague-medaille{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#ffc46a 0%,#f39324 55%,#a8520a 100%);box-shadow:0 0 0 2px rgba(255,214,150,.8),0 6px 16px -6px rgba(243,147,36,.75)}
.fga-vague-medaille svg{width:28px;height:28px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.fga-vague-txt{min-width:0}
.fga-vague-oeil{display:flex;align-items:center;gap:6px;margin:0;font-size:11px;font-weight:800;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:#ffc77d}
.fga-vague-titre{margin:1px 0 2px;overflow:hidden;font-family:var(--fga-police-titre);font-size:16.5px;font-weight:800;line-height:1.2;letter-spacing:-.015em;color:#fff;white-space:nowrap;text-overflow:ellipsis}
.fga-vague-titre b{color:#ffcf8a;font-weight:800}
.fga-vague-sous{margin:0;overflow:hidden;font-size:12.5px;line-height:1.3;color:#e3d3bd;white-space:nowrap;text-overflow:ellipsis}
.fga-vague-heures{display:flex;gap:0;padding:0;list-style:none}
.fga-vague-heures li{font-variant-numeric:tabular-nums}
.fga-vague-heures li+li::before{content:"·";margin:0 6px;color:#9c8a72}
.fga-vague-heures li[data-prochaine]{color:#ffcf8a;font-weight:700}
/* 4 vagues par jour (23/10) : à 12,5 px, « 20 h » sortait de la ligne sous 390 px (170 px pour 146 à 360, 161 à 375) */
@media (max-width:389px){.fga-vague-heures{font-size:11.5px;letter-spacing:-.01em}.fga-vague-heures li+li::before{margin:0 3px}}
.fga-vague-rebours{display:grid;place-items:center;min-height:40px;padding:0 11px;border-radius:14px;background:rgba(0,0,0,.34);box-shadow:inset 0 0 0 1px rgba(255,196,120,.25)}
.fga-vague-rebours>span[aria-hidden]{font-family:var(--fga-police-titre);font-size:18px;font-weight:800;letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.fga-vague-case{font-weight:800}
.fga-vague-aller{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 10px 0 16px;border-radius:999px;background:linear-gradient(180deg,#ffd08f,#f6a43f);color:#1c1206;font-size:14.5px;font-weight:800;text-decoration:none;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 16px -8px rgba(243,147,36,.8);-webkit-tap-highlight-color:transparent;transition:transform .12s}
.fga-vague-aller svg{width:18px;height:18px}
.fga-vague-aller:active{transform:scale(.97)}
.fga-vague-aller:focus-visible{outline:2px solid #ffdab7;outline-offset:3px}
.fga-vague[data-en-cours]{background:radial-gradient(120% 140% at 0% 0%,rgba(255,163,61,.48),rgba(255,163,61,0) 62%),linear-gradient(160deg,#2d200f,#17120c 75%);box-shadow:inset 0 0 0 2px rgba(255,206,140,.8),inset 0 1px 0 rgba(255,236,200,.25),0 12px 30px -12px rgba(243,147,36,.75)}
.fga-vague-direct{flex:none;width:7px;height:7px;border-radius:50%;background:#ffcf8a;animation:fga-vague-souffle 1.8s ease-in-out infinite}
@keyframes fga-vague-souffle{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.fga-vague-direct{animation:none}.fga-vague-aller{transition:none}}
/* « Modifier la conversation » (admin, appui long, 04/10/2026) : la rangée ne sélectionne pas de texte, la feuille
   pose le nom, l'interrupteur d'épingle (51×31, comme iOS) et le choix d'image. */
.fga-r[data-admin]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.fga-edit{display:flex;flex-direction:column;gap:12px;padding:2px 4px 6px}
.fga-edit-lab{display:flex;justify-content:space-between;align-items:baseline;margin:0;font-size:13px;font-weight:600;color:var(--fo-txt2,#d1d1d6)}
.fga-edit-lab small{font-size:12px;font-weight:500;color:var(--fo-sourd2,#8e8e93);font-variant-numeric:tabular-nums}
.fga-edit-ligne{display:flex;gap:8px}
.fga-edit-champ{flex:1;min-width:0;height:46px;padding:0 14px;border:0;border-radius:12px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#fff;font:inherit;font-size:16px}
/* le choix du groupe (08/10/2026) : la liste native, en sombre, avec l icone du dossier devant */
.fga-edit-choix{cursor:pointer;color-scheme:dark;padding-right:10px}
.fga-edit-ic-groupe{align-self:center;margin-left:2px}
.fga-edit-champ:focus{outline:none;box-shadow:inset 0 0 0 1.5px #e8c06a}
.fga-edit-ok{flex:none;min-height:46px;padding:0 16px;border:0;border-radius:12px;background:#e8c06a;color:#121416;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.fga-edit-ok:disabled{opacity:.45;cursor:default}
.fga-edit-rang{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 14px;border:0;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#fff;font:inherit;text-align:left;cursor:pointer}
.fga-edit-rang:disabled{opacity:.6}
.fga-edit-ic{flex:none;width:20px;height:20px;color:#e8c06a}
.fga-edit-txt{display:flex;flex:1;flex-direction:column;min-width:0;font-size:15px;font-weight:600}
.fga-edit-txt small{font-size:12.5px;font-weight:400;color:var(--fo-sourd2,#8e8e93)}
.fga-edit-fl{flex:none;width:18px;height:18px;color:var(--fo-sourd2,#8e8e93)}
.fga-edit-inter{position:relative;flex:none;width:51px;height:31px;border-radius:99px;background:rgba(255,255,255,.16);transition:background .2s}
.fga-edit-inter i{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3);transition:transform .2s}
.fga-edit-rang[aria-checked="true"] .fga-edit-inter{background:#e8c06a}
.fga-edit-rang[aria-checked="true"] .fga-edit-inter i{transform:translateX(20px)}
.fga-edit-images{padding:4px 0}
.fga-edit-fait{margin:0;font-size:13.5px;color:#7ad694}
.fga-edit-erreur{margin:0;font-size:13.5px;color:#ff6961}
@media (prefers-reduced-motion:reduce){.fga-edit-inter,.fga-edit-inter i{transition:none}}
/* « Pendant ton absence », réduit au maximum : une ligne de 44 px */
.fga-absence{margin:0 0 12px}
.fga-absence-ligne{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 14px 0 12px;border:0;border-radius:16px;background:var(--fga-tuile);box-shadow:inset 0 0 0 1px var(--fga-filet2);color:var(--fga-txt2);font-size:13.5px;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fga-absence-ligne:active{background:var(--fga-tuile-appui)}
.fga-absence-ic{flex:none}
.fga-absence-txt{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fga-absence-txt b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.fga-absence-voir{flex:none;color:var(--fga-or);font-size:13.5px;font-weight:600}
/* À la une : les conversations épinglées, en grandes cartes qu'on fait glisser */
/* A LA UNE (08/10/2026, user : « baisse un peu la grandeur de cette section et que ca centre l'image a chaque fois »,
   « on voit pas assez les textes ») : chaque carte s'arrete CENTREE (marges egales des deux cotes, calculees sur la
   largeur de la section), un peu moins haute (16/9, 196 px au plus), et le texte repose sur un voile plus sombre. */
[data-forum="une"]{container-type:inline-size}
.fga-une{--fga-une-l:min(84cqw,400px);display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -12px;padding:0 calc((100cqw + 24px - var(--fga-une-l)) / 2) 14px;scrollbar-width:none;overscroll-behavior-x:contain}
.fga-une::-webkit-scrollbar,.fga-rac::-webkit-scrollbar{display:none}
.fga-une-carte{position:relative;flex:none;display:block;width:var(--fga-une-l);aspect-ratio:16/9;max-height:196px;border-radius:24px;overflow:hidden;color:#fff;background:#1c1c1e;scroll-snap-align:center;-webkit-tap-highlight-color:transparent;transition:transform .14s}
.fga-une-carte:active{transform:scale(.985)}
.fga-une-couv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fga-une-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.6) 24%,rgba(0,0,0,.86) 46%,rgba(0,0,0,.94) 100%)}
.fga-une-contenu{position:absolute;left:16px;right:16px;bottom:12px;display:flex;flex-direction:column;gap:4px;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.55)}
.fga-une-oeil{align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 9px;border-radius:99px;background:rgba(0,0,0,.6);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#ffe19a}
.fga-une-titre{font-size:19px;font-weight:700;line-height:1.18;letter-spacing:-.02em;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fga-une-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;color:rgba(255,255,255,.9)}
.fga-points{display:flex;justify-content:center;gap:6px;margin:-8px 0 14px}
.fga-points i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.28);transition:width .2s ease,background .2s ease}
.fga-points i.actif{width:18px;background:var(--fga-or)}
/* une seule carte (08/10/2026, skill webdesign-expert [R7]) : un bandeau sur toute la largeur, aligné sur le reste, au lieu
   d'une carte étroite centrée seule (au PC, elle flottait au milieu d'une colonne alignée à gauche) */
.fga-une--seule{margin:0;padding:0 0 14px}
.fga-une--seule .fga-une-carte{width:100%}
/* filtres Tous / Non lus / Coffres (contrôle segmenté) */
.fga-seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin:0 4px 10px;padding:3px;border-radius:999px;background:var(--fga-seg)}
.fga-seg-curseur{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);border-radius:999px;background:var(--fga-seg-curseur);box-shadow:inset 0 0 0 1px var(--fga-filet2),0 3px 10px rgba(0,0,0,.35);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.fga-seg button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 6px;border:0;border-radius:999px;background:none;color:#fff;font-size:14.5px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fga-seg button .n{font-size:12.5px;font-weight:700;color:var(--fga-sourd);font-variant-numeric:tabular-nums}
.fga-seg button[aria-pressed=true] .n{color:#fff}
.fga-etat{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;min-height:44px;padding:0 6px 6px;font-size:13.5px;color:var(--fga-sourd)}
.fga-etat b{color:#fff;font-weight:600}
.fga-lien{min-height:44px;padding:0 2px;border:0;background:none;color:var(--fga-or);font-size:14px;font-weight:600;cursor:pointer}
.fga-lien:disabled{opacity:.6}
.fga-etat small{flex-basis:100%;color:#ff6961}
/* les raccourcis des groupes : tuile laquée, dessin or, nom court, pastille des non-lus */
.fga-rac{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;padding:6px 2px 22px}
.fga-rac--defile{display:flex;gap:12px;overflow-x:auto;margin:0 -12px;padding:6px 14px 22px;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.fga-rac--defile .fga-raccourci{flex:none;width:62px;scroll-snap-align:start}
.fga-raccourci{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;min-height:44px;padding:0;border:0;background:none;color:var(--fga-txt2);font-size:11.5px;font-weight:500;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fga-tuile{position:relative;display:grid;place-items:center;flex:none;transition:transform .14s;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08)}
.fga-tuile svg{display:block;flex:none}
.fga-raccourci .fga-tuile{width:54px;height:54px;border-radius:16px}
.fga-raccourci:active .fga-tuile{transform:scale(.94)}
.fga-raccourci-nom{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fga-badge{position:absolute;top:-5px;right:-6px;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#e0262f;color:#fff;font-size:11.5px;font-weight:700;font-style:normal;line-height:20px;text-align:center;box-shadow:0 0 0 2px #000;font-variant-numeric:tabular-nums}
/* les groupes : carte neutre, en-tête voilé de la couleur du groupe, collé sous la barre du forum */
.fga-groupes{display:flex;flex-direction:column;gap:28px;padding-bottom:0}
/* plus de grand vide noir avant le pied de page (capture de l'user, 04/10) : le pied suit la liste de près. Le même
   espace (24 + 16 px) est désormais tout entier DANS le noir du forum (08/10 : la marge de 16 px au-dessus du pied
   laissait voir le fond violet du site ; le pied n'a plus de marge, voir plus haut). */
.fga .fo-page{padding-bottom:40px}
.fga-grp{padding:0 12px 12px;border-radius:28px;background:var(--fga-surface);box-shadow:inset 0 0 0 1px var(--fga-filet),0 1px 2px rgba(0,0,0,.28),0 14px 30px -16px rgba(0,0,0,.75);scroll-margin-top:var(--fga-haut,108px)}
.fga-grp.eclaire{animation:fga-eclaire 1s ease-out}
@keyframes fga-eclaire{0%{background-color:color-mix(in srgb,var(--g) 26%,var(--fga-surface))}100%{background-color:var(--fga-surface)}}
.fga-grp-tete{position:sticky;top:var(--fga-haut,108px);z-index:6;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ico nom neuf" "ico meta meta";align-items:center;column-gap:12px;row-gap:2px;margin:0 -12px 12px;padding:14px 14px 13px 16px;border-radius:28px 28px 0 0;background:color-mix(in srgb,var(--g) 10%,var(--fga-surface));transition:border-radius .15s ease}
.fga-grp-tete.colle{border-radius:0}
.fga-grp-tete .fga-tuile{grid-area:ico;width:40px;height:40px;border-radius:12px}
.fga-grp-nom{display:contents}
.fga-grp-nom h2{grid-area:nom;min-width:0;margin:0;font-size:20px;font-weight:700;line-height:1.15;letter-spacing:-.02em;text-wrap:balance;color:#fff}
.fga-grp-nom h2 a{color:inherit}
.fga-grp-meta{grid-area:meta;display:block;min-width:0;overflow:hidden;font-size:12.5px;line-height:1.35;color:var(--fga-sourd);font-variant-numeric:tabular-nums}
/* « 10 conversations · actif il y a 13 min » : si la ligne se coupe, le point de séparation ne reste jamais en bout de
   ligne ni en tête de la suivante (le cadre décalé d'un point coupe celui du premier morceau de chaque ligne). */
.fga-grp-meta-in{display:flex;flex-wrap:wrap;margin-left:-1em}
.fga-grp-meta-in>span{white-space:nowrap}
.fga-grp-meta-in>span::before{content:"·";content:"·"/"";display:inline-block;width:1em;text-align:center}
.fga-neuf{grid-area:neuf;flex:none;height:26px;padding:0 10px;border-radius:99px;background:rgba(255,255,255,.16);color:#fff;font-size:12.5px;font-weight:700;line-height:26px;font-variant-numeric:tabular-nums}
/* LES CONVERSATIONS RESSORTENT (14/10/2026, user : « je veux que les conv ressortent plus ») : chaque conversation est une
   carte nettement plus claire que son groupe (voile 7,5 % au lieu de 4,5 %, filet 11 %, ombre de contact) [R20][R40],
   séparée de la suivante par 8 px [R30] ; titre plus grand et plus gras, image de 52 px ; textes secondaires à 7,7:1 sur la
   carte [R22]. */
.fga-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fga-r{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:74px;padding:11px 12px 11px 11px;border-radius:18px;background:rgba(255,255,255,.075);box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),0 1px 2px rgba(0,0,0,.35);overflow:hidden;-webkit-tap-highlight-color:transparent;transition:background .15s,transform .12s}
.fga-r:active{background:rgba(255,255,255,.12);transform:scale(.985)}
@media (hover:hover){.fga-r:hover{background:rgba(255,255,255,.1)}}
/* l'onde au toucher, dans la couleur du groupe, à l'endroit exact du doigt (03/10 : « une couleur qui réagit ») */
.fga-r .fga-onde{position:absolute;left:var(--x,50%);top:var(--y,50%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:color-mix(in srgb,var(--g) 55%,transparent);opacity:0;pointer-events:none}
.fga-r.fo-touche .fga-onde{animation:fo-onde-conv .52s ease-out}
@keyframes fo-onde-conv{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(42)}}
.fga-r-img{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:13px;overflow:hidden;background:color-mix(in srgb,var(--g) 18%,var(--fga-surface))}
.fga-r-img img{width:52px;height:52px;object-fit:cover}
.fga-r-img .fo-bl-img{width:52px!important;height:52px!important;border-radius:13px}
.fga-r-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.fga-r-haut{display:flex;align-items:flex-start;gap:8px}
.fga-r-titre{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:16.5px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:#ececf0}
.fga-r.neuf .fga-r-titre{color:#fff;font-weight:700}
.fga-r-heure{flex:none;padding-top:2px;font-size:12.5px;color:#b4b8c3;font-variant-numeric:tabular-nums}
.fga-r.neuf .fga-r-heure{color:var(--fga-or);font-weight:600}
.fga-r-bas{display:flex;align-items:center;gap:8px;min-width:0}
.fga-r-sous{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;color:#b4b8c3}
.fga-r-etats{display:inline-flex;align-items:center;gap:5px;color:#b4b8c3}
.fga-r-etats svg{width:15px;height:15px}
.fga-point{flex:none;width:10px;height:10px;border-radius:50%;background:var(--fga-or);animation:fga-pouls 1.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes fga-pouls{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(232,192,106,.65)}55%{transform:scale(1.22);box-shadow:0 0 0 8px rgba(232,192,106,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(232,192,106,0)}}
/* l'annonce de coffres : sa propre ligne, un coffre doré, une phrase entière */
.fga-annonces{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.fga-annonce{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:3px 12px 3px 6px;border-radius:99px;background:linear-gradient(180deg,rgba(240,205,124,.24),rgba(240,205,124,.12));color:#ffeedf;font-size:13px;font-weight:600;line-height:1.2}
.fga-annonce b{color:#ffeedf;font-weight:700;font-variant-numeric:tabular-nums}
/* Le multiplicateur de l'annonce unique (04/10/2026) : « Coffre à ouvrir ×3 ». */
.fga-annonce .fga-annonce-x{margin-left:-1px;padding:1px 7px;border-radius:99px;background:rgba(255,238,223,.16);font-size:12.5px;line-height:1.35}
.fga-annonce svg{flex:none;width:22px;height:22px}
.fga-annonce--une{align-self:flex-start;margin-top:4px;background:rgba(7,8,9,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fga-plus{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;margin-top:6px;border:0;border-radius:14px;background:none;color:var(--g-txt,var(--fga-or));font-size:14px;font-weight:600;cursor:pointer}
.fga-plus svg{width:16px;height:16px}
/* LES CONVERSATIONS ARCHIVÉES (admin, 07/10/2026) : une rangée repliée en bas de la liste. */
.fga-archives{margin:14px 0 0;border-radius:18px;background:var(--fga-tuile);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);overflow:hidden}
.fga-archives-tete{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:0 16px;border:0;background:transparent;color:var(--fga-txt2);font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer}
.fga-archives-tete b{margin-left:auto;min-width:24px;height:22px;padding:0 7px;border-radius:99px;background:rgba(255,255,255,.08);color:#fff;font-size:12px;line-height:22px;text-align:center}
.fga-archives-ic{width:18px;height:18px;flex:none}
.fga-archives-fl{width:18px;height:18px;flex:none;transition:transform 160ms ease}
.fga-archives-fl.fga-ouvert{transform:rotate(180deg)}
.fga-archives-liste{margin:0;padding:0 8px 8px;list-style:none}
.fga-archive{display:flex;align-items:center;gap:10px;padding:8px;border-top:1px solid rgba(255,255,255,.06)}
.fga-archive-lien{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;color:#fff;text-decoration:none}
.fga-archive-titre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px;font-weight:600}
.fga-archive-lien small{color:var(--fga-txt2);font-size:12.5px}
.fga-archive-remettre{flex:none;min-height:40px;padding:0 14px;border:0;border-radius:12px;background:rgba(232,192,106,.16);color:#e8c06a;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.fga-archive-remettre:disabled{opacity:.5;cursor:default}
@media (prefers-reduced-motion:reduce){.fga-archives-fl{transition:none}}
.fga-vide{margin:6px 0 0;padding:16px;border-radius:18px;background:var(--fga-tuile);color:var(--fga-txt2);font-size:14px;text-align:center}
.fga-groupes.attente{opacity:.55;transition:opacity .15s}
/* la barre du forum en mode compact : les petites icônes des groupes y apparaissent quand les grands raccourcis
   passent dessous (jamais deux rangées d'icônes à l'écran) ; pendant ce temps, ses autres pastilles s'effacent */
.fga-compacte{display:flex;gap:2px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
.fga-compacte.vue{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease}
/* 18/10/2026 (« le site est toujours lent ») : la barre porte .fga-compacte-vue, posée par forum.index.tsx en même temps
   que .vue, au lieu de « .fo-barre-nav:has(.fga-compacte.vue) » : mesuré en ligne (/forum, processeur ×4), ce :has faisait
   recalculer TOUTE la page (1 316 éléments, jusqu'à 230 ms) à chaque lettre du logo ; sans lui, 77 éléments au plus. */
@media (max-width:1023px){.fo-barre-nav.fga-compacte-vue>:not(.fo-retour):not(.fo-barre-titre):not(.fo-barre-action){display:none}}
.fo-barre-nav:not(.fga-compacte-vue) .fo-barre-action:has(.fga-compacte){position:absolute;right:8px;pointer-events:none}
.fga-compacte button{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fga-compacte .fga-tuile{width:32px;height:32px;border-radius:10px;transition:opacity .2s ease}
.fga-compacte.a-courant button:not(.actif) .fga-tuile{opacity:.42}
.fga-compacte .pt{position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:#ff453a;box-shadow:0 0 0 2px #000}
/* « NOUVEAU SUJET » DANS LE GRAND TITRE (14/10/2026) : le bouton flottant (admin) ne s'affiche qu'en haut de page — et
   c'est justement là qu'il tombait sur l'onglet « Coffres » (capture de l'user, puis 390×844) [R45][R83]. Au téléphone
   il rejoint le titre, comme le bouton d'écriture des messageries : la pilule de verre de l'accueil (acc-btn--verre),
   le stylo en orange ; l'orange plein reste à « Débloquer » [R44]. Au PC, le rail garde le sien. */
.fga-tete--action{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
.fga-tete--action>*{grid-column:1}
.fga-ecrire{grid-column:2;grid-row:1 / span 2;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 14px;border:0;border-radius:999px;background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),var(--fga-fond);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);color:#f5f5f7;font:inherit;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s}
.fga-ecrire svg{width:18px;height:18px;flex:none;color:var(--fga-or)}
.fga-ecrire:active{transform:scale(.97)}
.fga-ecrire:focus-visible{outline:2px solid #ffdab7;outline-offset:3px}
@media (hover:hover){.fga-ecrire:hover{background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)),var(--fga-fond)}}
/* LA BULLE « NOUVEAU SUJET » EN BAS À DROITE (14/10/2026, user : « nouveau sujet apparaît en bas à droite en bulle »,
   comme le « + » de la capture) : un rond sombre de 56 px, stylo cuivre, le libellé lu par les lecteurs d'écran ;
   la liste garde de l'air en bas pour que la dernière conversation ne reste pas dessous. Au PC, le rail porte le sien. */
@media (max-width:1023px){
  .fga .fo-cta{width:56px;height:56px;min-height:56px;padding:0;gap:0;justify-content:center;border-radius:50%;background:#1a1a1b;color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 10px 24px -8px rgba(0,0,0,.85)}
  .fga .fo-cta svg{width:24px;height:24px;color:#ffc58a}
  .fga .fo-cta-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .fga .fo-cta:focus-visible{outline:2px solid #ffc58a;outline-offset:3px}
  .fga[data-vue=accueil] .fo-page{padding-bottom:96px}
}
/* COMME SUR LA PHOTO (14/10/2026, user : « plus petits les rectangles des vidéos, les conv plus larges, le fond plus sombre ») :
   lueur brune discrète sur un noir presque pur ; vidéos en cartes de 84 × 112 ; conversations qui gagnent la largeur
   (marges et image réduites : le texte a 16 px de plus). */
.fga-fond{background:radial-gradient(130% 40% at 50% -10%,rgba(102,105,108,.3),transparent 70%),linear-gradient(180deg,#0e0f10 0%,#09090a 35%,#080707 100%)}
.fga .fga-bulles .fga-bulle{width:84px}
.fga .fga-bulles .fga-bulle-anneau{width:84px;height:112px;border-radius:18px}
.fga .fga-bulles .fga-bulle-anneau::after{border-radius:16px}
.fga .fga-bulles .fga-bulle-anneau img{border-radius:16px}
.fga .fga-bulles .fga-bulle--ajout .fga-bulle-anneau{border-radius:18px}
.fga .fga-bulles .fga-bulle-plus{border-radius:16px}
.fga .fga-bulles .fga-bulle-titre{bottom:8px;font-size:11.5px}
.fga .fga-bulles-rang{gap:8px}
.fga .fga-liste--plate{margin:0 -6px}
.fga .fga-liste--plate .fga-r{gap:12px;padding:12px 12px 12px 10px}
.fga .fga-liste--plate .fga-r-img,.fga .fga-liste--plate .fga-r-img img{width:56px;height:56px}
.fga .fga-liste--plate .fga-r-img .fo-bl-img{width:56px!important;height:56px!important}
.fga .fga-liste--plate .fga-r-titre{font-size:16.5px}
.fga-etat[data-forum=non-lus]{justify-content:flex-end}
/* LA PHOTO DE PROFIL DU HAUT (user : « améliore la bulle photo de profil, là c'est moche ») : un vrai rond de 54 px comme
   sur la capture, avec un fin liseré cuivre ; ni la jauge ni le badge de série collés dessus (la flamme a son bouton). */
.fga .fga-profil-moi .fo-pmoi{display:grid;place-items:center;width:58px;height:58px;min-width:58px;padding:0;border-radius:50%;background:transparent;box-shadow:0 0 0 2px rgba(255,197,138,.9),0 6px 16px -6px rgba(0,0,0,.8)}
.fga .fga-profil-moi .fo-pmoi-avatar>:first-child,.fga .fga-profil-moi .fo-pmoi-avatar img{width:54px!important;height:54px!important;border-radius:50%!important;font-size:22px;font-weight:700}
.fga .fga-profil-moi .fo-jauge,.fga .fga-profil-moi .fo-pmoi-serie{display:none}
/* FINITION « PREMIUM » SUR LA CAPTURE (14/10/2026, user : « améliore tous les détails, niveau premium ultime ») :
   · la zone du haut en dégradé chaud CONTINU (fil d'Ariane → en-tête), comme la lueur derrière « Hey Joseph » ;
   · un titre plus fin, un sous-titre sur une seule ligne, un fil d'Ariane discret (#999c9f : 5:1) ;
   · des cartes un rien plus lumineuses, avec un reflet d'un pixel en haut [R40][R41] ;
   · « Ajouter » (vidéo) en carte pleine avec un « + » dans un rond cuivre au lieu de pointillés ;
   · des pastilles de filtre et une bulle « Nouveau sujet » au même dessin que les cartes. */
@media (max-width:1023px){
  .fga[data-vue=accueil] .fo-ariane{background:#1f2124;color:#999c9f}
  .fga[data-vue=accueil] .fo-ariane a{color:#999c9f}
  .fga[data-vue=accueil] .fga-profil{background:linear-gradient(180deg,#1f2124 0%,#161819 100%)}
  .fga[data-vue=accueil] .fga-profil::after{height:24px;border-radius:24px 24px 0 0}
  .fga[data-vue=accueil] .fga-profil-actions>.fo-cloche,.fga[data-vue=accueil] .fga-profil-actions .fo-serie-bouton{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.08)}
}
@media (max-width:400px){.fga-totaux-msg{display:none}}
.fga-profil-salut{font-size:20px;font-weight:800;letter-spacing:-.015em}
.fga-profil .fga-totaux{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;color:#b5b8bb}
.fga .fga-liste--plate .fga-r,.fga .fga-r{background:linear-gradient(180deg,#1d1e1e 0%,#181819 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.05)}
.fga .fga-liste--plate .fga-r-titre{font-size:16px;font-weight:600;letter-spacing:-.005em}
.fga .fga-liste--plate .fga-r.neuf .fga-r-titre{font-weight:700}
.fga .fga-liste--plate .fga-r-sous{font-size:14px}
.fga .fga-liste--plate .fga-r-heure{font-size:12.5px}
.fga .fga-bulles .fga-bulle--ajout .fga-bulle-anneau{border:0;background:linear-gradient(180deg,#202122,#171818);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.06)}
.fga .fga-bulles .fga-bulle-plus svg{box-sizing:content-box;width:20px;height:20px;padding:9px;border-radius:50%;background:rgba(255,166,53,.2);color:#ffc58a}
.fga .fga-bulles .fga-bulle--ajout .fga-bulle-titre{color:#e6e7eb}
.fga .fga-seg .fga-filtre[class]{font-size:14.5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.fga .fga-seg .fga-filtre[aria-pressed=true][class]{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 16px -8px rgba(255,166,53,.6)}
.fga .fga-rappel .fga-rappel-ligne[class],.fga .fga-rappel:has(+ .fga-absence) .fga-rappel-ligne[class]{background:linear-gradient(180deg,#1d1e1e 0%,#181819 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.05)}
@media (max-width:1023px){.fga .fo-cta{background:linear-gradient(180deg,#252627,#1a1a1b);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.1),0 12px 28px -10px rgba(0,0,0,.9)}}
/* LA SÉPARATION DU HAUT (14/10/2026, user, capture de « Ma collection » : « crée une séparation comme sur cette page mais en
   beaucoup plus petit, pour la partie messages privés, profil, notifications, flamme ») : le fil d'Ariane et l'en-tête
   sont posés sur une zone un peu plus claire, et la page commence dessous en panneau noir aux coins arrondis (22 px). */
@media (max-width:1023px){
  .fga[data-vue=accueil] .fga-fond{background:#09090a}
  .fga[data-vue=accueil] .fo-ariane{margin:0 -12px;padding-left:24px;padding-right:24px;background:#1b1c1d}
  .fga[data-vue=accueil] .fga-profil{position:relative;margin:0 -12px 6px;padding:8px 14px 36px 14px;background:#1b1c1d}
  .fga[data-vue=accueil] .fga-profil::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:22px;border-radius:22px 22px 0 0;background:#09090a;pointer-events:none}
  .fga[data-vue=accueil] .fga-profil-actions>.fo-cloche,.fga[data-vue=accueil] .fga-profil-actions .fo-serie-bouton{background:#262729}
}
@media (min-width:1024px){.fga-tete--action{display:block}.fga-ecrire{display:none}}
/* LES ÉTOILES NE PASSENT JAMAIS DERRIÈRE UN TEXTE (14/10/2026) : le ciel est fixe, tout ce qui porte du texte a un socle
   opaque — le fond de l'accueil (#0b0c10) sous son voile de verre, le rendu exact des panneaux de l'accueil posés sur un
   fond uni [R19][R40]. Au téléphone et à la tablette, ces panneaux sont posés sur le ciel ; au PC, le panneau central et
   le rail reçoivent le socle (88 %), et ce qu'ils contiennent garde son verre. */
@media (max-width:1023px){
  .fga .fga-rappel-ligne,.fga .fga-absence-ligne{background:linear-gradient(var(--fga-tuile),var(--fga-tuile)),var(--fga-fond)}
  .fga .fga-absence-ligne:active{background:linear-gradient(var(--fga-tuile-appui),var(--fga-tuile-appui)),var(--fga-fond)}
  .fga .fga-seg{background:linear-gradient(var(--fga-seg),var(--fga-seg)),var(--fga-fond)}
  .fga .fo-amorce,.fga .fo-tuile{background:linear-gradient(rgba(255,255,255,.055),rgba(255,255,255,.055)),var(--fga-fond)}
}
@media (min-width:1024px){
  .fga .fo-page>.fo-principal{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.024) 260px,rgba(255,255,255,.016)),rgba(11,12,16,.88)}
  .fga .fo-page>.fo-sal.fo-sal-colonne{background:linear-gradient(rgba(255,255,255,.055),rgba(255,255,255,.055)),rgba(11,12,16,.88)}
}
/* au PC, les raccourcis et les filtres gardent leur taille de téléphone au lieu de s'étirer sur toute la colonne */
@media (min-width:640px){.fga-rac:not(.fga-rac--defile){grid-auto-columns:92px;justify-content:start;gap:14px}.fga-seg{max-width:480px}}
/* PC (08/10/2026, user : « PC sans doublons ») : la colonne « Salons » de gauche mène déjà à chaque groupe — plus de
   rangée de raccourcis ni de petites icônes dans la barre ; « À la une » en grille au lieu d'un carrousel [R93]. */
@media (min-width:1024px){
  .fga-rac,.fga-compacte{display:none!important}
  .fga-une:not(.fga-une--seule){display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;overflow:visible;margin:0;padding:0 0 14px}
  .fga-une:not(.fga-une--seule) .fga-une-carte{width:auto}
  .fga-points{display:none}
}
/* LE HAUT, COMME LES RÉGLAGES DE L'IPHONE (14/10/2026, user : « améliore le haut, tous les détails et les couleurs,
   réfléchis comme un UX designer d'Apple ») :
   · les icônes des rangées système dans une tuile de verre de 32 px, dessin blanc : on les distingue des tuiles en
     couleur des groupes (le contenu), et l'orange n'est plus semé sur des icônes [R24][R50] ;
   · le rappel des notifications et « pendant ton absence », quand ils se suivent, forment UNE carte groupée : deux
     rangées, un filet entre elles décalé après l'icône (56 px), au lieu de deux blocs de styles différents [R30][R34] ;
   · au téléphone, l'accueil du forum est la racine d'un onglet de la barre du bas : pas de bouton retour (règle des
     barres d'onglets d'Apple) — la barre du haut ne garde que Berrys, messages, cloche et profil. Au PC, rien ne change. */
.fga-rappel-ic,.fga-absence-ic{box-sizing:border-box;width:32px;height:32px;padding:7px;border-radius:9px;background:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);color:#fff}
.fga-rappel:has(+ .fga-absence){margin-bottom:0}
.fga-rappel:has(+ .fga-absence) .fga-rappel-ligne{border-radius:16px 16px 0 0;box-shadow:inset 1px 0 0 var(--fga-filet2),inset -1px 0 0 var(--fga-filet2),inset 0 1px 0 var(--fga-filet2)}
.fga-rappel + .fga-absence .fga-absence-ligne{position:relative;border-radius:0 0 16px 16px;box-shadow:inset 1px 0 0 var(--fga-filet2),inset -1px 0 0 var(--fga-filet2),inset 0 -1px 0 var(--fga-filet2)}
.fga-rappel + .fga-absence .fga-absence-ligne::before{content:"";position:absolute;top:0;left:56px;right:0;height:1px;background:var(--fga-filet2);pointer-events:none}
.fga[data-vue=accueil] .fo-barre-nav{display:none}
/* ══ VERSION « FAÇON MESSENGER » (14/10/2026, user, capture de Messenger à l'appui : « fais une version qui ressemble à
   Messenger mais avec nos options ») ══ Fond noir uni (le ciel est éteint : Messenger n'a aucun décor derrière la liste),
   grand titre + icône d'écriture, bandeau des notifications sur toute la largeur, filtres en pastilles, raccourcis des
   groupes en ronds comme des stories, conversations en LISTE PLATE : photo ronde de 60 px, nom sur une ligne, aperçu
   gris (blanc et gras quand c'est nouveau), heure à droite, point « non lu » fixe. Tout ce bloc retiré = la v6. */
.fga{--fga-fond:#000;background:#000}
.fga-fond{background:#000}
.fga-fond::before{display:none}
/* le haut : « Forum » comme « messenger », l'écriture en icône seule à droite (libellé lu par les lecteurs d'écran) */
.fga-titre{font-size:34px;line-height:1.1;letter-spacing:-.03em}
.fga-totaux{font-size:13px}
.fga-ecrire{grid-row:1;width:44px;height:44px;min-height:44px;padding:0;gap:0;justify-content:center;border-radius:50%;background:transparent;box-shadow:none;font-size:0}
.fga-ecrire svg{width:27px;height:27px;color:#fff}
@media (hover:hover){.fga-ecrire:hover{background:rgba(255,255,255,.1)}}
/* le bandeau des notifications, comme celui de Messenger, dans notre couleur */
.fga .fga-rappel .fga-rappel-ligne,.fga .fga-rappel:has(+ .fga-absence) .fga-rappel-ligne{min-height:56px;padding:8px 12px;border-radius:0;background:#fec388;box-shadow:none;color:#121416}
.fga-rappel-txt b{color:#121416;font-size:14.5px}
.fga-rappel-txt span{color:#121416}
.fga .fga-rappel-ic{background:rgba(18,20,22,.12);box-shadow:none;color:#121416}
.fga-rappel-btn{background:rgba(18,20,22,.14);color:#121416;box-shadow:inset 0 0 0 1px rgba(18,20,22,.3)}
.fga-rappel-btn:focus-visible{outline-color:#121416}
.fga-rappel{margin:0 0 12px}
.fga-rappel:has(+ .fga-absence){margin-bottom:8px}
@media (max-width:1023px){.fga .fga-rappel{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}}
@media (min-width:1024px){.fga .fga-rappel .fga-rappel-ligne{border-radius:14px}}
/* « Pendant ton absence » : une rangée de la liste, sans cadre */
.fga .fga-absence-ligne,.fga .fga-rappel + .fga-absence .fga-absence-ligne{min-height:56px;padding:0 6px;border-radius:12px;background:transparent;box-shadow:none}
.fga .fga-rappel + .fga-absence .fga-absence-ligne::before{display:none}
.fga .fga-absence-ic{width:40px;height:40px;padding:9px;border-radius:50%;background:rgba(255,255,255,.12);box-shadow:none}
.fga-absence-txt{font-size:15px}
/* les filtres en pastilles séparées ; la pastille choisie dans notre orange [R24][R109] */
.fga .fga-seg{display:flex;gap:8px;justify-content:flex-start;max-width:none;margin:2px 0 12px;padding:0;background:none;border-radius:0}
.fga-seg-curseur{display:none}
.fga-seg button{flex:none;height:44px;padding:0 18px;background:rgba(255,255,255,.1);font-size:15px}
.fga-seg button[aria-pressed=true]{background:#fec388;color:#121416}
.fga-seg button[aria-pressed=true] .n{color:#121416}
@media (hover:hover){.fga-seg button[aria-pressed=false]:hover{background:rgba(255,255,255,.16)}}
/* les raccourcis des groupes : des ronds, comme les stories */
.fga .fga-rac,.fga .fga-rac:not(.fga-rac--defile){display:flex;gap:14px;justify-content:flex-start;padding:4px 2px 18px}
.fga .fga-raccourci{flex:none;width:72px;gap:8px;font-size:13px;color:#f5f5f7}
.fga .fga-raccourci .fga-tuile{width:62px;height:62px;border-radius:50%}
/* les groupes : plus de carte, un titre de section collé en haut, sur le noir */
.fga-groupes{gap:18px}
.fga-grp{padding:0;border-radius:0;background:transparent;box-shadow:none}
.fga-grp-tete,.fga-grp-tete.colle{margin:0 0 4px;padding:10px 4px 8px;border-radius:0;background:#000;column-gap:10px}
.fga-grp-tete .fga-tuile{width:32px;height:32px;border-radius:50%}
.fga-grp-nom h2{font-size:18px}
.fga-grp-meta{font-size:12.5px}
/* les conversations : la liste de Messenger */
.fga-liste{gap:2px}
.fga-r{min-height:76px;padding:8px 6px;gap:14px;border-radius:14px;background:transparent;box-shadow:none}
.fga-r:active{background:rgba(255,255,255,.08);transform:none}
@media (hover:hover){.fga-r:hover{background:rgba(255,255,255,.06)}}
.fga-r-img{width:60px;height:60px;border-radius:50%}
.fga-r-img img{width:60px;height:60px}
.fga-r-img .fo-bl-img{width:60px!important;height:60px!important;border-radius:50%}
.fga-r-corps{gap:3px}
.fga-r-titre{-webkit-line-clamp:1;font-size:17px;font-weight:500;color:#f5f5f7}
.fga-r.neuf .fga-r-titre{font-weight:700;color:#fff}
.fga-r-heure{font-size:13px;color:#a9adb8}
.fga-r-sous{font-size:15px;color:#a9adb8}
.fga-r.neuf .fga-r-sous{color:#fff;font-weight:600}
.fga-point{width:12px;height:12px;animation:none}
/* LES GROUPES EN RANGÉES DE DISCUSSION (14/10/2026, capture de l'user) : rond du groupe, nom, dernier message, heure,
   pastille rouge des non-lus (blanc sur #e0262f : 4,7:1). Les ronds de raccourcis au-dessus feraient doublon : retirés de
   l'accueil (la liste EST les groupes). */
.fga-groupes:has(.fga-grp--rang){gap:2px}
.fga-grp--rang{padding:0;border-radius:0;background:transparent;box-shadow:none}
.fga-gr{display:flex;align-items:center;gap:14px;min-height:78px;padding:8px 6px;border-radius:14px;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.fga-gr:active{background:rgba(255,255,255,.08)}
@media (hover:hover){.fga-gr:hover{background:rgba(255,255,255,.06)}}
.fga-gr:focus-visible{outline:2px solid #ffdab7;outline-offset:2px}
.fga-gr .fga-tuile{width:60px;height:60px;border-radius:50%}
.fga-gr-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.fga-gr-haut,.fga-gr-bas{display:flex;align-items:center;gap:10px;min-width:0}
.fga-gr-nom{flex:1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fga-police-titre);font-size:17px;font-weight:800;line-height:1.25;letter-spacing:-.01em;color:#fff}
.fga-gr-heure{flex:none;font-size:13px;color:#a9adb8;font-variant-numeric:tabular-nums}
.fga-gr-apercu{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:#a9adb8}
.fga-gr-apercu b{color:#e6e7eb;font-weight:600}
.fga-gr.neuf .fga-gr-apercu{color:#e6e7eb}
.fga-gr-badge{flex:none;min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:#e0262f;color:#fff;font-size:13px;font-weight:700;line-height:24px;text-align:center;font-variant-numeric:tabular-nums}
.fga .fga-rac,.fga .fga-rac:not(.fga-rac--defile){display:none}
/* LE FOND ET LES BULLES DE LA CAPTURE (14/10/2026, user, capture d'un assistant sur Behance : « le fond des couleurs sur
   les conv, je le veux comme ça ») : une lumière bronze chaude en haut à droite qui se fond dans le noir (fixe, sans
   animation), et chaque groupe / conversation dans une BULLE de verre sombre aux grands arrondis (22 px). La lumière
   reste loin des petits textes : gris #a9adb8 ≥ 5:1 sur une bulle posée sur la zone la plus claire. */
.fga{--fga-fond:#0b0a09;background:#0b0a09}
.fga-fond{background:radial-gradient(120% 55% at 50% -15%,rgba(222,147,56,.45),transparent 65%),linear-gradient(180deg,#1b1c1e 0%,#0e0f0f 40%,#0a0908 100%)}
.fga-groupes:has(.fga-grp--rang){gap:10px}
/* (user : « ce design, je te parlais du fond des conv ») : la lumière bronze de la capture va DANS chaque carte — une lueur
   cuivrée derrière la photo, à gauche, fondue dans un brun très sombre ; la page reste noire. La lueur s'éteint avant le
   texte : gris #a9adb8 ≥ 5:1 là où commence le nom, l'heure et l'aperçu sont sur le fond sombre. */
.fga-gr,.fga-r{border-radius:24px;background:#181819;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.fga-gr{padding:12px 14px 12px 12px}
.fga-r{padding:12px 14px 12px 12px}
.fga-liste{gap:10px}
.fga-gr:active,.fga-r:active{filter:brightness(1.18)}
@media (hover:hover){.fga-gr:hover,.fga-r:hover{filter:brightness(1.1)}}
.fga-grp-tete,.fga-grp-tete.colle{background:rgba(12,12,13,.78);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
/* LA COULEUR DE LA CAPTURE (user : « cette couleur design ») : l'accent devient le CUIVRE du bouton d'envoi de la capture
   (#ffa635 ; texte #121416 dessus : 7,4:1 ; cuivre sur le noir : 7:1) — bandeau, filtre choisi, liens, points « non lu ». */
.fga{--fga-or:#ffa635;--fga-or-txt:#ffc58a}
.fga .fga-rappel .fga-rappel-ligne,.fga .fga-rappel:has(+ .fga-absence) .fga-rappel-ligne{background:linear-gradient(135deg,#ffb769,#d78616)}
.fga-seg button[aria-pressed=true]{background:#ffa635}
.fga-bulle--ajout .fga-bulle-anneau{border-color:rgba(255,166,53,.65)}
.fga-bulle-plus,.fga-bulle-lecture{color:#ffc58a}
.fga-bulle-anneau{background:conic-gradient(from 210deg,#feddbf,#ffa635,#d78616,#ffa635,#feddbf)}
/* LES FILTRES EN BLOCS (capture de l'user : « pour Tous / Non lus / Coffres, tu vas faire des blocs comme ça ») : trois
   tuiles, icône + nom en haut, grand chiffre dessous, chacune sa teinte (vert, bleu, cuivre pour les coffres) ; la choisie
   prend un filet cuivre de 2 px (≈ 6:1 sur le fond) et une teinte plus franche [R109]. */
.fga .fga-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:560px;margin:4px 0 14px;padding:0;background:none;border-radius:0}
.fga .fga-seg .fga-filtre{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;height:auto;min-height:92px;padding:13px 12px 12px;border-radius:20px;color:#f5f5f7;font-size:14.5px;font-weight:600;text-align:left}
.fga-filtre-haut{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 7px;min-width:0}
.fga-filtre-haut svg{width:18px;height:18px;flex:none}
.fga .fga-seg .fga-filtre .n{font-family:var(--fga-police-titre);font-size:28px;font-weight:800;line-height:1;letter-spacing:-.02em;color:#fff}
.fga .fga-seg .fga-filtre--tous{background:rgba(74,222,128,.12)}
.fga .fga-seg .fga-filtre--nonlus{background:rgba(96,165,250,.14)}
.fga .fga-seg .fga-filtre--coffres{background:rgba(255,166,53,.16)}
.fga-filtre--tous svg{color:#86efac}
.fga-filtre--nonlus svg{color:#93c5fd}
.fga-filtre--coffres svg{color:#ffc58a}
.fga .fga-seg .fga-filtre[aria-pressed=true]{color:#fff;box-shadow:inset 0 0 0 2px #ffa635}
.fga .fga-seg .fga-filtre[aria-pressed=true] .n{color:#fff}
.fga .fga-seg .fga-filtre--tous[aria-pressed=true]{background:rgba(74,222,128,.22)}
.fga .fga-seg .fga-filtre--nonlus[aria-pressed=true]{background:rgba(96,165,250,.24)}
.fga .fga-seg .fga-filtre--coffres[aria-pressed=true]{background:rgba(255,166,53,.28)}
.fga .fga-seg .fga-filtre:focus-visible{outline:2px solid #ffc58a;outline-offset:2px}
/* ══ LA PAGE D'APRÈS LA CAPTURE « HEY JOSEPH » (14/10/2026, user : « je veux que la page forum ressemble à ça finalement,
   mais avec le fond de couleur qu'on a choisi ensemble ») ══ fond bronze en haut fondu dans le noir (ci-dessus), bouton
   d'écriture rond et sombre comme la loupe de la capture, vidéos en grandes cartes arrondies, filtres en pastilles (la
   choisie pleine, cuivre ; les autres cernées, compte dans une pastille), conversations en cartes sombres de 24 px avec
   un aperçu sur deux lignes et la pastille cuivre des non-lus. */
.fga-ecrire{width:52px;height:52px;min-height:52px;background:#1a1a1b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.fga-ecrire svg{width:22px;height:22px}
.fga .fga-bulle{width:104px}
.fga .fga-bulle-anneau{width:104px;height:140px;padding:2px;border-radius:24px}
.fga .fga-bulle-anneau img{aspect-ratio:auto;border-width:2px;border-radius:22px}
.fga .fga-bulle--ajout .fga-bulle-anneau{border-radius:24px}
.fga .fga-bulle-plus{border-radius:22px}
.fga .fga-bulle-titre{max-width:104px}
.fga .fga-seg{display:flex;flex-wrap:wrap;gap:8px;max-width:none;margin:2px 0 14px}
.fga .fga-seg .fga-filtre[class]{flex-direction:row;align-items:center;justify-content:center;gap:8px;height:44px;min-height:44px;padding:0 16px;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16);font-size:15px;color:#f5f5f7}
.fga .fga-filtre-haut svg{display:none}
.fga .fga-seg .fga-filtre[class] .n{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:rgba(255,255,255,.12);font-family:inherit;font-size:13px;font-weight:700;line-height:1;color:#fff}
.fga .fga-seg .fga-filtre[aria-pressed=true][class]{background:#ffa635;box-shadow:none;color:#121416}
.fga .fga-seg .fga-filtre[aria-pressed=true][class] .n{background:rgba(18,20,22,.16);color:#121416}
.fga-gr-apercu{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;line-height:1.35}
.fga-gr-bas{align-items:flex-end}
.fga-gr-badge{background:#ffa635;color:#121416}
/* TOUT REPENSÉ SUR LA CAPTURE (14/10/2026, user : « je veux que tu repenses tout le design pour que ça soit comme ça ») :
   une lueur bronze plus franche en haut ; un en-tête compact (titre 28 px, bouton rond) ; le rappel des notifications en
   carte sombre arrondie comme les rangées (plus de bandeau plein écran) ; « pendant ton absence » en pastille discrète ;
   les vidéos en grandes cartes au titre posé en bas sur un voile, la pastille lecture en haut à gauche comme les
   compteurs de la capture. */
.fga-fond{background:radial-gradient(140% 50% at 50% -12%,rgba(196,120,9,.55),transparent 68%),linear-gradient(180deg,#1c1f21 0%,#0e0f10 38%,#0a0908 100%)}
.fga .fga-titre{font-size:28px;letter-spacing:-.025em}
.fga .fga-rappel .fga-rappel-ligne[class],.fga .fga-rappel:has(+ .fga-absence) .fga-rappel-ligne[class]{padding:10px 10px 10px 12px;border-radius:24px;background:#181819;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#f5f5f7}
.fga .fga-rappel .fga-rappel-txt b{color:#fff}
.fga .fga-rappel .fga-rappel-txt span{color:#a9adb8}
.fga .fga-rappel .fga-rappel-ic{background:rgba(255,166,53,.18);color:#ffc58a}
.fga .fga-rappel .fga-rappel-btn{background:#ffa635;color:#121416;box-shadow:none}
@media (max-width:1023px){.fga .fga-rappel[class]{margin-left:0;margin-right:0}}
.fga .fga-rappel:has(+ .fga-absence){margin-bottom:10px}
.fga .fga-absence .fga-absence-ligne[class]{min-height:48px;padding:0 16px 0 6px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.fga .fga-absence .fga-absence-ic{width:36px;height:36px;padding:8px}
.fga .fga-absence-txt{font-size:14px}
.fga .fga-bulle{position:relative;width:108px}
.fga .fga-bulle-anneau{width:108px;height:150px;border-radius:24px}
.fga .fga-bulle-anneau::after{content:"";position:absolute;inset:2px;border-radius:22px;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.78));pointer-events:none}
.fga .fga-bulle--ajout .fga-bulle-anneau::after{display:none}
.fga .fga-bulle-titre{position:absolute;left:8px;right:8px;bottom:10px;z-index:1;max-width:none;font-size:12.5px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.85)}
.fga .fga-bulle.vue .fga-bulle-titre{color:#e6e7eb}
.fga .fga-bulle-lecture{z-index:1;top:8px;left:8px;right:auto;bottom:auto}
/* ══ L'ACCUEIL D'APRÈS LA CAPTURE, POUR DE BON (14/10/2026, user : « les conv présentées comme sur l'image, sans groupe ;
   les bulles en haut, les groupes ; en haut, la photo de profil ; une bulle pour mes messages privés, alertes et gagner
   des Berrys ») ══ La barre du forum disparaît de l'accueil (tout est en haut de la page) ; dans un salon elle revient,
   avec son bouton retour. */
.fga-profil{display:flex;align-items:center;gap:12px;padding:10px 2px 16px}
.fga-profil-moi{flex:none;display:grid;place-items:center}
.fga-profil-moi .fo-pmoi{width:52px;height:52px}
.fga-profil-txt{flex:1;min-width:0}
.fga-profil-salut{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fga-police-titre);font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:#fff}
.fga-profil .fga-totaux{margin:3px 0 0;font-size:13.5px;color:#c7c9cb}
.fga-profil .fga-ecrire{flex:none}
/* les cartes du haut : les groupes, puis messages privés, alertes, Berrys */
.fga-hist{display:flex;gap:10px;overflow-x:auto;margin:0 -12px 16px;padding:2px 12px 4px;scroll-snap-type:x proximity;scroll-padding-inline:12px;scrollbar-width:none;overscroll-behavior-x:contain}
.fga-hist::-webkit-scrollbar{display:none}
.fga-hist-carte{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;width:92px;height:128px;padding:0 6px 10px;border-radius:22px;overflow:hidden;background:#181819;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#fff;text-decoration:none;scroll-snap-align:start;-webkit-tap-highlight-color:transparent}
.fga-hist-carte:active{transform:scale(.97)}
.fga-hist-carte:focus-visible,.fga-hist--outil:focus-within{outline:2px solid #ffc58a;outline-offset:2px}
.fga-hist-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fga-hist-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.75))}
.fga-hist-carte .fga-tuile{position:relative;width:40px;height:40px;border-radius:50%;outline:2px solid rgba(255,255,255,.9);outline-offset:1px}
.fga-hist-nom{position:relative;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:600;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.85)}
.fga-hist-n{position:absolute;top:8px;left:8px;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:700;line-height:22px;text-align:center;font-variant-numeric:tabular-nums}
.fga-hist--outil{background:linear-gradient(160deg,#2b2e30 0%,#161718 70%)}
.fga-hist--alertes{background:linear-gradient(160deg,#2c2b33 0%,#16151a 70%)}
.fga-hist--berrys{background:linear-gradient(160deg,#393c3e 0%,#151719 70%)}
.fga .fga-hist--outil>.fo-cloche,.fga .fga-hist--outil>.fo-serie-bouton{position:absolute;inset:0;z-index:1;display:grid;place-items:center;width:auto;height:auto;min-height:0;margin:0;padding:0 0 34px;border:0;border-radius:inherit;background:transparent;box-shadow:none;color:#fff;font-size:0}
.fga .fga-hist--outil>.fo-cloche::before{display:none}
.fga .fga-hist--outil>.fo-cloche svg{width:30px;height:30px}
.fga .fga-hist--outil>.fo-serie-bouton svg{width:30px;height:38px}
.fga .fga-hist--outil>.fo-serie-bouton>span{display:none}
.fga .fga-hist--outil .fo-pastille,.fga .fga-hist--outil .fo-cloche i{top:8px;left:8px;right:auto;min-width:22px;height:22px;padding:0 6px;font-size:12px;line-height:22px}
.fga-hist--berrys .fga-hist-nom{white-space:normal;text-align:center}
/* la liste : une seule, sans groupes */
.fga-liste--plate{gap:10px}
/* les vidéos (« Nouveautés One Piece ») gardent les GRANDS RECTANGLES de la capture (user : « les rectangles, c'est là où
   je mets les vidéos ») ; les groupes sont des bulles rondes (ci-dessous) */
/* TOUT EN HAUT (user : « nan, les messages tout en haut ») : messages privés, alertes, Berrys en boutons ronds de 44 px à
   côté de la photo ; « Nouveau sujet » (admin) devient la première carte de la rangée, comme « Créer une story ». */
.fga-profil{gap:10px}
.fga-profil-moi .fo-pmoi{width:48px;height:48px}
.fga-profil-salut{font-size:21px}
.fga-profil .fga-totaux{font-size:12.5px;line-height:1.3}
.fga-profil-actions{flex:none;display:flex;align-items:center;gap:6px}
.fga .fga-profil-actions>.fo-cloche,.fga .fga-profil-actions .fo-serie-bouton{position:relative;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:50%;background:#1a1a1b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#fff;font-size:0}
.fga .fga-profil-actions>.fo-cloche::before{display:none}
.fga .fga-profil-actions svg{width:21px;height:21px}
.fga .fga-profil-actions .fo-serie-bouton svg{width:20px;height:25px}
.fga .fga-profil-actions .fo-serie-bouton>span{display:none}
.fga-flamme{position:relative;display:inline-grid}
/* LES COFFRES SUR LA LIGNE DE L'APERÇU (user : « que ça ne grossisse pas le bloc conv ») : une pastille compacte, le coffre
   et ×N (« Coffre à ouvrir » reste lu par les lecteurs d'écran, dans le libellé de la pastille). */
.fga-r-bas .fga-annonces{flex:none;margin:0}
.fga-r-bas .fga-annonce{min-height:24px;padding:1px 8px 1px 3px;gap:3px;font-size:12px}
.fga-r-bas .fga-annonce>span:nth-child(2){display:none}
.fga-r-bas .fga-annonce svg{width:18px;height:18px}
.fga-r-bas .fga-annonce .fga-annonce-x{margin:0;padding:0 2px;background:none;font-size:12.5px}
/* FINITIONS, ENCORE (14/10/2026, user : « améliore encore à fond les détails ») : hauteur de carte constante, point « non
   lu » avec un halo, icônes d'état plus fines, photos cerclées, retour au toucher et contour au clavier. */
.fga .fga-liste--plate .fga-r{min-height:80px}
.fga .fga-liste--plate .fga-r-img{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 4px 10px -4px rgba(0,0,0,.6)}
.fga .fga-point{width:10px;height:10px;background:#ffa635;box-shadow:0 0 0 3px rgba(255,166,53,.2)}
.fga .fga-r-etats{gap:6px;color:#86888b}
.fga .fga-r-etats svg{width:14px;height:14px}
.fga .fga-liste--plate .fga-r:active{transform:scale(.985);filter:brightness(1.12)}
.fga .fga-r:focus-visible{outline:2px solid #ffc58a;outline-offset:2px}
.fga .fga-liste--plate .fga-r-sous{color:#a9adb2}
.fga .fga-liste--plate .fga-r.neuf .fga-r-sous{color:#e8eaec}
@media (prefers-reduced-motion:reduce){.fga .fga-liste--plate .fga-r:active{transform:none}}
/* (LE CONTOUR CUIVRE QUI TOURNAIT autour d'une conversation non lue, 14/10/2026, a été retiré le 16/10/2026 — user : « enlève
   le contour qui tourne quand il y a un message, à la place laisse le point vivant ». Le non-lu se dit par le titre en
   gras, l'heure cuivre et le point qui bat, juste en dessous.) */
/* LE POINT AUSSI (user : « aussi le point ») : une onde cuivrée sort du point « non lu » (transform + opacité seulement). */
@media (prefers-reduced-motion:no-preference){
  .fga .fga-point{position:relative}
  .fga .fga-point::after{content:"";position:absolute;inset:0;border-radius:50%;background:#ffa635;animation:fga-onde-point 1.8s cubic-bezier(.2,.8,.2,1) infinite;pointer-events:none}
}
@keyframes fga-onde-point{from{transform:scale(1);opacity:.6}to{transform:scale(2.8);opacity:0}}
/* FINITIONS ULTRA + UN PEU DE ONE PIECE (14/10/2026, user : « améliore tous les détails niveau max ultra premium »,
   « rajoute un ou des éléments One Piece ») :
   · (le chapeau de paille sur la photo et les vagues cuivrées ont été essayés puis retirés le 14/10 à la demande
     de l'user : « ne met pas de chapeau », « ça enlève ») ;
   · les pastilles des messages et des alertes en rouge orangé assorti (blanc dessus : 4,8:1) avec un cerne sombre ;
   · au PC, les cartes se soulèvent d'un pixel au survol ; le rail des salons passe au cuivre de la page. */
.fga .fga-profil-actions .fo-pastille,.fga .fga-profil-actions .fo-cloche i{background:#cf3f2a;color:#fff;font-weight:800;box-shadow:0 0 0 2px #1a1c1e}
@media (hover:hover) and (pointer:fine){.fga .fga-liste--plate .fga-r{transition:transform .15s cubic-bezier(.2,0,0,1),filter .15s}.fga .fga-liste--plate .fga-r:hover{transform:translateY(-1px)}}
.fga .fo-sal-cta,.fga .fo-sal-nouveau{background:#ffa635;color:#121416}
.fga .fo-sal-rang[aria-current=page]::after,.fga .fo-sal-rang.fo-sal-actif::after{background:rgba(255,166,53,.14);box-shadow:inset 0 0 0 1px rgba(255,166,53,.5)}
.fga .fo-sal-rang[aria-current=page],.fga .fo-sal-rang.fo-sal-actif{color:#e0e5eb}
@media (prefers-reduced-motion:reduce){.fga .fga-liste--plate .fga-r{transition:none}}
/* DERNIERS DÉTAILS (14/10/2026, user : « améliore tous les détails ») : un seul rythme vertical (16 px entre les blocs) [R34] ;
   les filtres sur UNE ligne qui défile (à 320 px, « Coffres » passait à la ligne) ; un appui visible sur les pastilles et
   les cartes vidéo [R66] ; un fondu entre la liste et le pied de page du site, au lieu d'une coupure nette. */
.fga[data-vue=accueil] .fga-rappel{margin-bottom:16px}
.fga[data-vue=accueil] .fga-bulles{padding:0 0 2px}
.fga .fga-seg{flex-wrap:nowrap;overflow-x:auto;margin:2px -12px 4px;padding:4px 12px 12px;scrollbar-width:none;overscroll-behavior-x:contain}
.fga .fga-seg::-webkit-scrollbar{display:none}
.fga .fga-seg .fga-filtre[class]{flex:none}
.fga .fga-seg .fga-filtre:active{transform:scale(.97)}
.fga .fga-bulles .fga-bulle:active .fga-bulle-anneau{transform:scale(.97)}
.fga[data-vue=accueil] .fo-page{background:linear-gradient(180deg,transparent calc(100% - 140px),#121317)}
@media (prefers-reduced-motion:reduce){.fga .fga-seg .fga-filtre:active,.fga .fga-bulles .fga-bulle:active .fga-bulle-anneau{transform:none}}
/* DÉTAILS, DEUXIÈME PASSE (14/10/2026, user : « améliore les détails du design au maximum ») : la rangée vidéo encore vide
   (seuls l'admin et Brankz la voient) dit à quoi elle sert au lieu de laisser 112 px de vide [R30] ; les chiffres qui
   changent (heures, compteurs des filtres, coffres ×N, flamme ×N) en chiffres de même largeur [R16]. */
.fga .fga-bulles-rang>.fga-bulles-vide{flex:1 1 auto;align-self:center;display:flex;flex-direction:column;gap:4px;min-width:0;max-width:300px;padding-right:6px}
.fga-bulles-vide b{font-size:15px;font-weight:700;line-height:1.25;color:#e0e5eb}
.fga-bulles-vide span{font-size:13px;line-height:1.4;color:#a9adb8}
.fga .fga-r-heure,.fga .fga-filtre .n,.fga .fga-annonce-x,.fga .fga-flamme-n,.fga .fga-totaux{font-variant-numeric:tabular-nums}
/* Petits téléphones : mesuré le 14/10, « 3 conversations à lire » coupé de 6 px à 360, « Salut… » à 320. La photo
   rétrécit (les trois boutons gardent leurs 44 px [R45]) ; le sous-titre passe sur deux lignes dès qu'il ne tient pas,
   plutôt que « … » (user : « adapte parfait à toutes les tailles de téléphone »). */
@media (max-width:379px){
  .fga .fga-profil-moi .fo-pmoi{width:48px;height:48px;min-width:48px}
  .fga .fga-profil-moi .fo-pmoi-avatar>:first-child,.fga .fga-profil-moi .fo-pmoi-avatar img{width:44px!important;height:44px!important;font-size:18px}
  .fga .fga-profil{gap:10px}
}
/* LA BULLE « NOUVEAU SUJET » NE PASSE PLUS SOUS LE PIED DE PAGE (14/10/2026) : fixée, elle vivait dans le contexte
   d'empilement de la page et disparaissait sous le pied tout en bas. Collante (sticky) en bas de la colonne, elle suit
   l'écran au même endroit puis se pose sous la dernière conversation, 16 px au-dessus du pied (mesuré). La zone ne prend
   pas les touchers, seul le rond. Les 96 px de marge qui protégeaient la dernière rangée ne servent plus. */
@media (max-width:1023px){
  .fga[data-vue=accueil] .fo-cta-zone{position:sticky;right:auto;left:auto;bottom:calc(3.75rem + env(safe-area-inset-bottom) + 14px);margin-top:12px;padding-right:4px;pointer-events:none}
  .fga[data-vue=accueil] .fo-cta-zone .fo-cta{pointer-events:auto}
  .fga[data-vue=accueil] .fo-page{padding-bottom:16px}
}
/* PC : le rail des salons et le panneau central passent du gris-bleu du site au bronze de la page (14/10/2026, relevé :
   rail #1d1e22 à côté d'une page bronze, deux matières côte à côte). Un seul jeu de surfaces [R20]. */
@media (min-width:1024px){
  .fo.fga .fo-page>.fo-sal.fo-sal-colonne,.fo.fga .fo-principal{background:linear-gradient(180deg,#1a1b1d 0%,#101112 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
  .fo.fga .fo-sal-colonne .fo-pmoi-txt small{color:rgba(255,255,255,.62)}
}
/* LES ÉLÉMENTS DE LA CAPTURE « HEY JOSEPH » QUI MANQUAIENT (14/10/2026, user : « rajoute les éléments manquants ») :
   la LOUPE (rond de 44 px en tête des filtres, puis un champ qui prend leur place, même hauteur : rien ne saute) et le
   COMPTEUR des vidéos pas encore vues sur chaque vignette, en haut à droite (la lecture est en haut à gauche). */
.fga .fga-seg .fga-filtre--cherche[class]{flex:none;justify-content:center;width:44px;min-width:44px;padding:0}
.fga .fga-seg .fga-filtre--cherche svg{width:19px;height:19px}
.fga-cherche{display:flex;align-items:center;gap:8px;min-height:44px;margin:6px 0 16px;padding:0 0 0 14px;border-radius:999px;background:#1a1a1b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.fga-cherche:focus-within{box-shadow:inset 0 0 0 1.5px #ffa635}
.fga-cherche-ic{flex:none;width:18px;height:18px;color:#ffc58a}
.fga-cherche-champ{flex:1;min-width:0;height:44px;padding:0;border:0;background:transparent;color:#fff;font:inherit;font-size:16px;outline:none}
.fga-cherche-champ::placeholder{color:#a9adb8;opacity:1}
.fga-cherche-champ::-webkit-search-cancel-button{display:none}
.fga .fga-cherche .fga-cherche-champ:focus,.fga .fga-cherche .fga-cherche-champ:focus-visible{outline:none;box-shadow:none}
.fga-cherche-fermer{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fga-cherche-fermer svg{width:18px;height:18px}
.fga-cherche-fermer:focus-visible{outline:2px solid #ffc58a;outline-offset:2px}
.fga .fga-bulle-anneau{position:relative}
.fga .fga-bulle-n{position:absolute;top:7px;right:7px;z-index:2;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:#ffa635;color:#121416;font-size:12px;font-weight:800;line-height:22px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px rgba(0,0,0,.35);pointer-events:none}
/* LE COFFRE, PLUS VISIBLE (14/10/2026, user : « améliore le bouton coffre » ; « quand il y a un coffre, remplace l'image de
   la conv par un rond avec une icône coffre ») : la pastille passe à l'orange plein du thème (texte sombre, 8:1) avec le
   nombre toujours écrit ; l'image de la conversation devient un rond orange portant le coffre doré, à la même taille (la
   rangée ne bouge pas d'un pixel). Aucun mouvement en boucle [R136]. */
.fga .fga-r-bas .fga-annonce[data-annonce]{min-height:26px;padding:2px 7px 2px 5px;gap:4px;border-radius:999px;background:linear-gradient(180deg,#ffbe5c,#f39324);color:#1b1205;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 12px -4px rgba(255,150,40,.55)}
.fga .fga-r-bas .fga-annonce[data-annonce] svg{width:19px;height:19px}
.fga .fga-r-bas .fga-annonce[data-annonce] .fga-annonce-x{margin:0;padding:0;background:none;color:#1b1205;font-size:13px;font-weight:800}
/* LE COFFRE CENTRÉ (16/10, user : « détails, améliore design centrage coffre ») : mesuré sur l'encre du dessin, la pastille
   d'UN coffre le posait 2,5 px à gauche (marges 4 | 9 pensées pour « ×N ») et « ×N » avait 5,9 | 9 px d'air : marges
   égales (7 | 7 seul, 6,9 | 7 avec ×N) ; le rond garde son coffre au centre pendant la secousse (pivot au centre) et sa
   lueur tout autour (elle pesait sous le rond et faisait paraître le coffre trop haut). Porte : porte_coffre.mjs. */
.fga .fga-r-bas .fga-annonce[data-annonce]:not(:has(.fga-annonce-x)){padding:2px 7px}
.fga .fga-liste--plate .fga-r-img.fga-r-img--coffre{position:relative;overflow:visible;background:none;box-shadow:none}
.fga .fga-r-coffre-fond{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 30%,#ffc46a 0%,#f39324 55%,#a8520a 100%);box-shadow:0 0 0 2px rgba(255,200,120,.7),0 0 18px -4px rgba(243,147,36,.65)}
.fga .fga-r-coffre{display:grid;place-items:center;width:34px;height:34px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.fga .fga-r-coffre svg{width:34px;height:34px}
/* L'ANIMATION (14/10, demandée par l'user) : le coffre se secoue brièvement (≈ 0,6 s) puis se tient tranquille ≈ 2,6 s, et
   un reflet traverse le rond au même rythme — un appel discret, pas une oscillation lente continue [R136]. Seulement
   transform (composité, 0 repeint), coupée en mouvement réduit. */
.fga .fga-r-coffre{transform-origin:50% 50%;animation:fga-coffre-secoue 3.2s cubic-bezier(.36,.07,.19,.97) infinite}
.fga .fga-r-coffre-fond::after{content:"";position:absolute;inset:-25%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);transform:translateX(-110%);animation:fga-coffre-reflet 3.2s ease-in-out infinite;pointer-events:none}
@keyframes fga-coffre-secoue{0%,78%,100%{transform:rotate(0) scale(1)}81%{transform:rotate(-10deg) scale(1.1)}84%{transform:rotate(9deg) scale(1.1)}87%{transform:rotate(-7deg) scale(1.08)}90%{transform:rotate(5deg) scale(1.05)}94%{transform:rotate(-2deg) scale(1.02)}}
@keyframes fga-coffre-reflet{0%,60%{transform:translateX(-110%)}80%,100%{transform:translateX(110%)}}
/* LE MULTIPLICATEUR : sur le bord du rond dès deux coffres, comme le ×N de la flamme (orange sur sombre, ≥ 7:1). */
.fga .fga-r-coffre-x{position:absolute;top:-5px;right:-8px;z-index:1;min-width:26px;height:21px;padding:0 6px;border-radius:99px;background:#1b1205;color:#ffbe5c;font-size:12px;font-weight:800;font-style:normal;line-height:21px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px #1c1c1d,0 3px 8px -2px rgba(0,0,0,.6)}
@media (prefers-reduced-motion:reduce){.fga .fga-r-coffre,.fga .fga-r-coffre-fond::after{animation:none}}
@media (max-width:339px){
  .fga .fga-profil-salut{font-size:18px}
  .fga .fga-profil .fga-totaux{font-size:12px}
  .fga[data-vue=accueil] .fga-profil{gap:8px;padding-left:12px;padding-right:12px}
  .fga .fga-profil-actions{gap:2px}
  .fga .fga-profil-moi .fo-pmoi{width:44px;height:44px;min-width:44px}
  .fga .fga-profil-moi .fo-pmoi-avatar>:first-child,.fga .fga-profil-moi .fo-pmoi-avatar img{width:40px!important;height:40px!important;font-size:17px}
}
.fga .fga-profil .fga-totaux{white-space:normal;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.fga-flamme-n{position:absolute;top:-5px;right:-7px;min-width:26px;height:20px;padding:0 6px;border-radius:99px;background:#ffa635;color:#121416;font-size:12px;font-style:normal;font-weight:800;line-height:20px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px #161819;pointer-events:none}
.fga .fga-profil-actions .fo-pastille,.fga .fga-profil-actions .fo-cloche i{top:-3px;right:-3px}
.fga-hist--ecrire{order:-1;border:0;cursor:pointer;font:inherit;background:linear-gradient(160deg,#2b2e30 0%,#161718 70%);box-shadow:inset 0 0 0 1.5px rgba(255,166,53,.45)}
.fga-hist-plus{position:absolute;inset:0 0 34px;display:grid;place-items:center;color:#ffc58a}
.fga-hist-plus svg{width:30px;height:30px}
.fga-hist--ecrire .fga-hist-nom{white-space:normal;text-align:center}
/* LES GROUPES EN BULLES RONDES (user : « les bulles en haut, que ce soit les groupes ; les rectangles, c'est pour les
   vidéos ») : un rond de 64 px au dégradé du groupe avec son logo, son nom dessous, la pastille cuivre des non-lus ;
   « Nouveau sujet » (admin) en premier rond. */
.fga-hist{gap:12px}
.fga .fga-hist--groupe,.fga .fga-hist--ecrire{width:72px;height:auto;padding:0;justify-content:flex-start;gap:7px;overflow:visible;background:none;box-shadow:none;border-radius:0}
.fga-hist--groupe .fga-hist-fond,.fga-hist--groupe .fga-hist-voile{display:none}
.fga .fga-hist--groupe .fga-tuile{width:64px;height:64px;border-radius:50%;outline:0}
.fga .fga-hist--groupe .fga-hist-nom,.fga .fga-hist--ecrire .fga-hist-nom{color:#f5f5f7;text-shadow:none;font-weight:500;white-space:nowrap}
.fga .fga-hist--groupe .fga-hist-n{top:-2px;right:0;left:auto;background:#ffa635;color:#121416;box-shadow:0 0 0 2px #0e0f10}
.fga .fga-hist--ecrire .fga-hist-plus{position:relative;inset:auto;flex:none;width:64px;height:64px;border-radius:50%;background:linear-gradient(160deg,#2b2e30,#161718);box-shadow:inset 0 0 0 1.5px rgba(255,166,53,.5)}
.fga .fga-hist--ecrire .fga-hist-plus svg{width:26px;height:26px}
.fga .fga-hist--ecrire .fga-hist-nom{font-size:11.5px;white-space:normal;text-align:center;line-height:1.15}
.fga .fga-hist{padding-top:8px}
.fga .fga-hist--groupe .fga-hist-n{z-index:2;top:-4px;right:2px}
.fga .fga-profil-actions>.fga-ecrire{width:44px;height:44px;min-height:44px;background:#1a1a1b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.fga .fga-profil-actions>.fga-ecrire svg{width:20px;height:20px;color:#ffc58a}
@media (prefers-reduced-motion:reduce){.fga-point,.fga-grp.eclaire,.fga-r.fo-touche .fga-onde{animation:none}.fga-seg-curseur,.fga-compacte,.fga-grp-tete,.fga-une-carte,.fga-ecrire{transition:none}}
/* LA LISTE RANGÉE PAR GROUPE (16/10/2026, user : « segmentation par groupe, partie clean ») : un en-tête discret par
   groupe — la pastille du groupe, son nom en capitales espacées, un filet qui s'éteint, le nombre (ou « N nouveaux » en
   cuivre) — puis les mêmes cartes qu'avant. Rien de collant, rien d'animé : la section se lit d'un coup d'œil. */
.fga .fga-sec{display:flex;flex-direction:column;gap:10px;scroll-margin-top:var(--fga-haut,108px)}
.fga .fga-sec-tete{display:flex;align-items:center;gap:10px;min-height:32px;margin:0 2px}
.fga .fga-sec-tete h2{min-width:0;margin:0;overflow:hidden;font-size:13px;font-weight:800;letter-spacing:.08em;line-height:1.2;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;color:#e6e7eb}
.fga .fga-sec-filet{flex:1 1 16px;min-width:16px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.03))}
.fga .fga-sec-n{flex:none;font-size:13px;font-weight:600;color:#9a9da3;font-variant-numeric:tabular-nums}
.fga .fga-sec-neuf{flex:none;height:24px;padding:0 10px;border-radius:99px;background:rgba(255,166,53,.16);box-shadow:inset 0 0 0 1px rgba(255,166,53,.42);color:#ffc58a;font-size:13px;font-weight:700;line-height:24px;font-variant-numeric:tabular-nums}
.fga .fga-sec .fga-liste--plate{margin-top:0}
.fga .fga-sec .fga-plus{margin-top:-2px}
/* LA PASTILLE DU GROUPE (16/10/2026) : verre sombre, anneau et lueur de la couleur vive du groupe (--v), icône au trait
   dans un ton clair de cette couleur ; ronde comme les photos de la liste, rien qui rappelle un emoji. */
.fga .fga-pastille-g{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  color:color-mix(in srgb,var(--v) 42%,#fff);
  background:radial-gradient(120% 120% at 30% 18%,color-mix(in srgb,var(--v) 36%,transparent) 0%,color-mix(in srgb,var(--v) 10%,transparent) 58%,transparent 100%),#141518;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--v) 62%,transparent),inset 0 1px 0 rgba(255,255,255,.12),0 0 16px -5px var(--v)}
.fga .fga-pastille-g svg{width:16px;height:16px;stroke-width:2.1}